澳纽网

优设 - 澳纽网Ausnz.net聚合阅读



如何正确把玩APP?一个高级方法+两个实战案例帮你全面掌握!

大家都对 UED(用户体验设计)和 UCD(以用户为中心的设计)不陌生,我们在工作中也经常听到很多人在说要注重用户体验,设计师要站在用户的角度思考问题,以用户的需求为目标进行设计。

这篇文章,我们将通过天猫和寺库的对比,带大家一起更加深入地去理解用户体验。

我们先来一起回顾下用户体验要素的一些概念。

用户体验要素

首先就要说到《用户体验要素》这本书,书里用清晰的说明和生动的图形分析了以用户为中心的设计方法(UCD)来进行产品设计,要求设计人员关注于思路而不是工具或技术,从而使你的产品具备高质量体验的流程。

当人们提起用户体验要素时,就会说到用户体验要素的五个层和十个元素。

体验设计也是近两年来很流行的一个词。商业目的和用户体验是体验设计中必不可少的两个重要环节。这篇文章将通过实际的案例分析来给大家讲述一下用户体验在设计中的应用。

我们先来看一下用户体验的五个要素:

战略层、范围层、结构层、框架层、表现层这五个层级也是从概念到落地,从抽象到具体的一个过程。

我们平常也会听到这些专业术语,但是要如何才能把这些知识应用到实际中呢?我将通过对天猫及寺库的对比,带大家一起看一下这五个要素在工作中的映射。

我们先来了解一下天猫和寺库分别是什么样的产品。

天猫VS寺库

  1. 战略层

在分析产品之前,我们可以先从网上搜集一下这两个 APP 的相关数据,一个产品底层的战略信息我们无法完全清楚,但却可以从已有数据中进行分析。

以下的数据均来自艾瑞数据(https://data.iresearch.com.cn/Home.shtml

数据对比

天猫用户群体

目标用户分析:

用户定位:

主打正品品牌销售、时尚销售,整个产品大而全,期望满足用户的大部分购物需求,主要面向的是一二线城市的用户。

寺库用户群体

目标用户分析:

用户定位:

奢侈品电商,重新定位奢侈品消费,满足年轻且经济能力不错的群体,不做纯电商,线上线下同步,为有需求的用户提供高端服务链。

  2. 范围层

天猫注重品牌销售和用户的喜好,在意用户的注重购买体验,给用户提供优质的产品和服务。

首页「折扣」「聚划算」「天猫闪降」版块也可以刺激用户的购买,活动和种草墙被单独作为一个版块,目的是让用户可以找到更多想要购买的商品。从商业的角度来看在首页引入其他产品入驻可能是存在一定的平台费用或是销售分成。

△ 天猫部分功能框架

△ 寺库部分功能框架

对比:

天猫和寺库在很多地方都比较相似,因为都是线上电商,都会设立给用户推荐好物的版块,结构上也会有很多比较接近的。

天猫注重整个购物流程:

天猫会在首页设立很多版块去引导用户发现更多产品,以促进用户的消费,内置天猫超市和天猫国际两个体量也是非常大的,天猫整体「大而全」,会让用户觉得所有东西都可以在这里买到。

寺库注重打造产品的品质感:

寺库不追求用户在这里购买更多的东西,但是要让用户感受到在这里购买的每一件商品体验都是最好的。

  3. 结构层

天猫和寺库在购买逻辑上是比较相似的,在不同的地方由于产品的定位不同而产生一些差异。

天猫

天猫在浏览商品时会突出商品促销信息,代金券折扣、优惠券的信息会比较明显,并且会推荐比较多的相关产品,让用户多停留在页面上。

天猫的自营产品商品详情页是没有直接购买按钮的,可能的原因有:

△ 天猫购物流程

寺库

寺库和天猫相比,整个购买流程中多出门店自提一环,这也是它的特点之一。寺库的商品详情页的信息内容比较简单,也有猜你喜欢的推荐商品版块。可能是因为寺库的商品单价较高,所以会在页面上有一个版块是选择库票分期,应该也是与其他金融产品的合作。

在浏览商品时,寺库把分类单独放在一个 tab 里,是为了让有目的性的用户可以更容易找到自己想要的商品,而天猫的分类层级相对深一点,因为分类是一种固态的模式,天猫的产品种类非常多样,加上用户群体比较庞大,每一个人的购买习惯也不同,也是为了给用户更多的选择和浏览的空间。

△ 寺库购物流程

  4. 框架层

天猫在首页会根据用户最近浏览的物品去推测用户的喜好,推荐商品的篇幅占了很大一部分,为了向用户展示我们的产品种类是很多的,你想要的在我们这里都可以买到。天猫榜单和一些活动功能,让用户更直观了解天猫,很好地突出自己的特色。

寺库除了首页的一个分区域展示,还单独设计了一个详细的商品分类导航框架,这样设计更让用户觉得浏览时目的性更强。首页还增加了走进寺库版块,让用户更了解寺库是什么,服务十分周全。寺库的页面交互设计很用心,流畅的交互也让用户更加认可这个产品的品质。

商品详情页首屏没有什么差异,往下滑动两款 APP 都有的部分是:

天猫对一个店铺其他商品的导流会更在意一些,同店铺其他商品的推荐花费了比较大的占比,评价上天猫还多一个问答版块,寺库则是主要把商品本身的介绍作为重点。

  5. 表现层

造成设计上差异的原因

天猫首页展示很多推荐内容,运用刺激用户点击的颜色,突出优惠和满减这样的设计主要针对没有目的性浏览的用户,会增加他在网站的停留时间,促进他浏览的欲望。

因为天猫的定位就是可以让更多的用户选择这个产品用来线上购物,同时也有相对品质感比较好的商品来满足不同需求的人群。

寺库不论是 banner 图还是页面其他内容,都不会把「促销」「折扣」这类信息作为重点展示,因为寺库的定位比较高端,竞争力不在商品的价格上,促销这类型的信息并不是它们最想展示的。

首页所有可点击区域都比较清晰,采用大量留白的手法,一屏展示的内容不会显得杂乱,便于已经有目的的用户来浏览。

天猫的商品详情页会把优惠信息放在商品图片上,是为了促进用户点击购买,告诉用户在我这里购买这个商品是很实惠的,价格、优惠券等信息也标红让其比较明显,因为用户在天猫上购物会比较在意价格的多少,所以在首屏展示的优惠、活动信息偏多。

寺库的商品详情给人一种简单、干净的感觉,没有太多复杂的介绍,优惠券和促销的信息也占比较小的比重,是因为寺库商品单笔价格都是比较高的,给用户展示的信息要能让用户觉得这个商品值这个价格,因此在这个页面上还是希望用户可以更多的关注商品本身,浏览的时候可以更顺畅不轻易地被其他信息干扰。

天猫和寺库在商品的展示上底部的功能都基本一致,除了天猫超市自营的产品没有加入购物车外,在页面的商品展示上都使用了比较大的区域,因为二者都是比较在意产品本身的展示,但是天猫去掉了顶栏来增加商品展示区域,目的是在商品有更多展示空间的情况下,也能把优惠和活动信息也显示全。寺库的顶栏则被保留用来显示品牌,目的是为了塑造产品整体的形象。

在功能点比较相似的情况下,天猫和寺库选择了两种展现方式,天猫的功能比较多,因此它们进行分类,将我的订单和工具版块分隔开,看上去也会更清晰。寺库则使用图标+icon 的形式展示一些功能,每一个功能点的留白依然比较多。除了顶部的个人订单信息部分,其他每一个功能点都使重要程度的差异不那么大的,页面上还有会员信息的 banner 图,是希望用户在关注自己的订单信息后还能够关注到会员信息。

即使是在页面逻辑和结构差不多的购物车页面,二者的设计风格依然很好地体现了各自的产品特征。天猫页面比较紧凑,能够展现出更多内容,寺库则保持大片留白的做法,不管是已加入购物车的产品还是推荐产品,每款商品都展示得很清楚,整体风格依然很简洁。这种差异也是由于两款产品的定位不同造成的。

表现层对比总结

两款 app 都是电商类的,在页面承载内容上有很多相似的地方,但是由于产品定位不同,在具体页面上的设计风格有很大的区别。

天猫类似淘宝,页面承载的产品种类很多。

天猫涉及多个领域,也连接着一些其他网站的功能。在消费者之中传播的很快,让大家都很比较信赖这个品牌。天猫需要用户在页面上停留更多时间,因此所展示内容的区域比较小,但是用户能看到的种类比较齐全,而且推荐的内容基本都是按照用户最近浏览的商品来进行推荐,更容易让用户找到自己想买的商品。

寺库页面风格是为了传达给用户精细、高端感,和天猫比起来体量较小。

寺库的页面层次比较清楚,首页下拉后都是以标题+大图的文章列表形式展示一个主题,所要展示的内容或者商品都是会占较大的空间,注重单个商品和品牌的塑造,让用户浏览一个商品时更容易沉浸到其中。

总结

通过对天猫和寺库的分析总结可以让我们明白,一个产品最后呈现到用户面前的视觉效果也是由最底层的战略目标就决定了的。

用户体验并不是一件简单的事情,真正研究用户体验要时刻学习和总结,作为设计师不能只站在表层来思考问题,在研究一个产品时需要学会分析产品的战略目标。在工作中也要和产品多沟通,学会站在产品的层面,找准产品的根基,了解这样做的目的是什么,然后在这个基础上去做更适合的设计,而不单单是一味地追求好看。

优设大课堂

Source: 优设网 – UISDC | 21 May 2019 | 9:37 pm(NZT)

Instagram 的视觉美学是如何覆灭的

Instagram 如今的注册用户已经超过 10 亿,它创立了一种非常独特的风格:明亮的墙壁,巧妙摆放的拿铁咖啡和牛油果吐司,以及一切带有千禧粉色调的事物,所有这些都是呈现出一种精心设计感,通过滤镜和色彩校正之后,看起来极具视觉美感。拿捏准这种风格趋势的照片在 Instagram 上大受欢迎,以至于这种摆拍方式成为了平台本身的代名词──所谓的「Ins风」,随后这种风格随着社交媒体渗透到了更广阔的世界。即使你不使用Instagram,毫无疑问你也会遇到 Ins风的洗礼,这种弹出式的体验,很容易让人想起冰激凌博物馆(Museum of Ice Cream),或者为了打卡而设计得色彩鲜艳的网红餐厅的卫生间。

那些有影响力的大V 通常更能利用这种视觉流行趋势。有人甚至开始在通过售卖滤镜贴纸赚取数千美元的收益,这些预置的模板、滤镜和贴纸可以适用于任何人的照片。但每一种潮流都有自己的保质期,在 Instagram 上紧跟着粉色墙壁和柔和的马卡龙色火起来的是,牛油果吐司和沙滩照。「这些照片太普通了。你可以把任何女孩的照片 ps 到那个背景中,结果都是一样的」15岁的 Claire(由于年龄的关系她要求匿名)说道:「量产的话,就毫无新意了。」

诸如 Emma Chamberlain、爵士歌手安妮 Jazzy Anne 以及 Joanna Ceddia 这些千禧一代的流量明星拿着单反相机到海滩拍照,辅以娴熟的后期技术,就可以获得完美的照片。而比他们年轻的一代普通用户大多直接用手机发布照片。影响力营销机构 Estate Five 的联合创始人 Lynsey Eaton 说:「以前有影响力的人会说,‘哦,这又不是广告硬照’,或者只发布一些特定角度或大家都在拍的东西。而对于年轻一代,这些规则根本不适用。」

事实上,许多青少年正在想尽办法让他们的照片看起来「失真」,或者说更加 Low-Fi,低保真。Huji Cam 这款应用可以让你的照片看起来就像是用老式的一次性相机拍的,它的下载量已经超过了 1600 万次。20 岁的大学生 Sonia Uppal 说:「现在很流行在相片中添加噪点。人们试图表现得坦诚。人们上传了很多自拍照和他们闲逛的照片。」

以 22 岁的 Reese Blutstein 为例,她是一位颇具影响力的 po主。在短短一年多的时间里,她发布的一系列无滤镜的 Low-Fi 古怪着装照片,吸引了逾 23.8 万名粉丝。(最近一张和她的狗狗对着镜子照的照片获得了超过 5000 个赞。)像她这一代的许多人一样,她不强调连续两次发布几乎完全相同的照片,这是上一代大V做梦也想不到的局面。「我不怕发布过多信息。我不认为,哦,这会让我的展示页看起来凌乱。」她说,「我没有想太多。如果我喜欢一张照片,我就把它贴出来。」

对于 Blutstein 这群人来说,任何做作的东西都是不受欢迎的──就像上一代人不喜欢无修图或怪里怪气的照片一样。她说:「对于我们这一代,人们更愿意做自己,而不是伪造身份。我们试图展示一个真实的人在做一些很酷的事情,而不是试图创造一个不真实的角色。」

咨询公司 Sparks & Honey 的文化策略师 Matt Klein 也表示,他看到 2017 年末主导该平台的彩虹色滤镜正在逐渐被淘汰。他说:「我们都知道属于它的时代已经过去了。我们经历了精修图时代,并深知它所传递的压力和焦虑。我们可以洞悉它。文化是一个左右摇晃的钟摆。这并不是说每个人都不再上传精修图,但流行趋势确实在转移。」

在过去的一年里,「Instagram vs . reality」的照片越来越受欢迎,因为大V们要试图让自己看起来更平易近人。本月早些时候,在选美节 Beautycon 上,Instagram 上的明星们谈到要远离镁光灯,在阳光下秀出自己的脸。随着大家越来越多地意识到推广帖的影响力之大,美妆博主们正在试图远离品牌化的照片,而选择 po 出自己的素颜照。越来越多的账户致力于呼吁名人和有影响力的人揭开自己的面具。大V们也一直在积极地谈论自己的职业倦怠、心理健康以及保持完美所带来的压力。

「每个人都在努力变得更真实」社交媒体营销公司 Later 的内容营销人员 Lexie Carbone 说,「人们写的标题越来越长。他们在分享他们赚了多少钱……我想这一切都可以追溯到,你不想看到一个女孩站在一堵你见过几千次的墙前。我们需要一些新的东西。」

流量管理平台 Fohr 的首席执行官 James Nord 表示,他每天都能在客户数量上看到这种转变。他说:「以前对人们有用的东西,现在不管用了。有大V首次提出了这样一个问题:我如何随着品味的改变而继续成长?」一年前,一个大V如果在网上发布一张美甲配咖啡杯的照片,她会收获很多点赞,但现在人们会选择取消关注。根据 Fohr 的数据,在有超过 10 万粉丝的大V中,有 60% 的人实际上每月都在失去粉丝。「这是相当惊人的」他说,「如果 2019 年你仍然是 Instagram 上有影响力的人,这是很难得的。」

平台本身可能对这种趋势的演变负有部分责任。Instagram 最初只是一个给照片增加滤镜的纯视觉软件,现在已经演变成一个社交网络工具。照片与故事、IGTV、gif 和视频剪辑一起争夺人们的注意力。对于许多用户来说,照片本身只是在标题或评论中发泄情绪的一种方式。

DDB 广告公司的数字策略师 Taylor Cohen 表示,Instagram 审美饱和点出现在 2018 年年中某个时候。想想 2017 年在洛杉矶大张旗鼓开放的 Instagram 博物馆「the Happy Place」,它自称是「美国最受 Instagram 用户欢迎的弹出窗」。当它开业时,人们兴奋地支付了近 30 美元的入场费(VIP通行证199美元)。但当它本月抵达波士顿时,一下子跌下神坛无人问津。「我不会去」15岁的 Claire说,「我宁愿在图书馆前或别的什么地方拍照。」

Ins 博物馆和 Ins 墙是为了让普通人拍出高质量的照片而建造的,它们的效果确实非常好。而当此类照片在 Ins 中随处可见时,它便不再像过去那样能够引起共鸣。「你让每个人都上传这些普通的照片,所以彩虹食物的照片脱颖而出」Klein说,「正是因为大家都接受了这种美学,所以它已经过时了。我们生活在影响力超负荷的时代。」

此外,所有的完美都是一种折磨。「我花了好几个月的时间寻找一种特定颜色的墙」Sarah Peretz说,「在我的生活中,我无时无刻都在想的就是墙,墙,墙。我想,猜猜今天是什么日子?这是另一堵墙。」在她中断休假只为了去一家赌场完美的橙色墙壁前照张相之后,她觉得自己受够了。她开始改变 Instagram 的传统审美,开始尝试无人机摄影和更有创意的方式。她说,对她的观众来说,墙上的照片已经变得很无聊了,他们更感兴趣的是有趣的 Instagram 故事,而不是平面照片。

去年,公关咨询公司 Ruby Media Group 的董事长 Kristen Ruby 下了血本,在 Instagram 博物馆前随人群一起排起长队,但现在她觉得这非常不值得。如今和许多用户一样,她不再过多考虑自己在 Instagram 故事上的动态和帖子。她说:「你不需要考虑彩色的墙壁、滤镜,或者背景中的人,就能拍出完美的糖果乌托邦照片。」

随着 Instagram 理想形象的转变,各大品牌一如既往地急切地想要抓住下一波潮流。Nord 表示:「对于那些前卫品牌来说,他们不能再走过去的老路了,那种审美已经过时了。」科恩指出,Glossier 就是一个以更现代的方式使用 Instagram 的品牌案例。这家美容品牌分享了一系列表情包、自然的特写镜头,最近还分享了一段关于树懒的可爱视频。

最后,Eaton 总结道:「人们只是在寻找与他们相关的东西。粉色的墙和牛油果吐司不再能让人们驻足了。」

原作者:TAYLOR LORENZ

优设大课堂

Source: 优设网 – UISDC | 21 May 2019 | 8:37 pm(NZT)

中英文如何搭配最好看?来看小林章大师是怎么做的!

@飞屋睿UIdesign :虽说中国不是英语国家,但是在现代平面设计当中,很多时候也会涉及到对英文的使用。尽管大部分时候,英文在版式中出现的作用不是为了传达信息,而是为了增加装饰,平衡排版等,但正因如此,我们更应该了解英文字型的特征并加以运用,让中文传达的信息更精彩。

双语化始终是一个不可避免之势,我们在接触的部分客户其实已经选择采用双语来传递信息,因此,对于英文的掌握有一定的要求。最近,我正在看小林章的《欧文字体》,因此结合本书的部分内容,增加我对中英文搭配组合字型选用问题的学习记录写了这篇文章。

以下内容部分选自《欧文字体》这本书,摘录的部分为引用。其余部分为我的原创内容。

罗马体/衬线体

1. 选用合适的英文

罗马体/衬线体指的是笔画前端处有着爪状或线状的「衬线」的字体,因为这种样式的大写字母完成于古罗马,所以被称为罗马体,也同时被成为衬线体或者饰线体。

罗马体在英文排版中使用很广泛,在和中文搭配时,尤其是宋体、仿宋等字形,都能很好地进行呼应。当然,罗马体也有很多可选的字体,茫茫字海中挑选字体的关键还是要看字形的笔画特征。

比如下面的案例中,中文的部分我采用的是「浙江民间书刻体」,这款字体的特征是:

所以在选择英文作为搭配的时候,也同样选用「Roman SD」这款字体与之搭配,可以看到这款英文字体的特征也十分明显:

可以说这两款中英文就是十分相近的。如果是实际运用时,我建议大家再从细节入手,把这两款字形再调得更接近一点(比如把英文的部分的粗线部分再加粗)。相比来看,右边如果将英文换成无衬线体,那么彼此就显得不太相容。除非是故意表现这种比较「相撞」的感觉,否则我会弃用右边的组合。

但是,并不是所有中英文搭配都必须符合以「字型相同」的组合原则,最重要的是学会抓住饰线的视觉特征。

2. 抓住饰线的视觉特征

饰线是笔画起始端的装饰,其实在从前文字是被刻在石头、木头、动物骨头等表面,本来是书写工具书写时留下的痕迹,并没有特意美化之用,只是越往后发展,它的美化功能越突出。

饰线也分为几种大类,根据文明发展的过程,早期具有书写痕迹的罗马体被称为「旧式罗马体」,18 世纪以后所流行的直线式的衬线字体为「现代罗马体」。

但旧式罗马体其实并不如字面有「老旧过时」之意,在 21 世纪的今日,大多的书籍内文排版都还是以「旧式罗马体」为主。

此外书中另一部分提到的「曲饰线体」,也有的地方称之为花饰线体,指的是在文字起笔处和收笔处被特别拉长的装饰曲线。

饰线的特征不同,其可与之搭配的中文也就不同,比如同为旧式罗马饰线体,下面两款搭配,中文为仿宋,而与此相搭配的英文,左边为旧式罗马饰线体「Constantia」,它看上去持重沉稳,中英文之间彼此的笔画特征是比较接近的,收尾的端口皆为略小的方口。

而右边的英文是「Cinzel Decorative」,它看上去很优雅,具有古典风范,但是和中文的笔画收尾风格不太相似。

也许有部分人会更倾向选择左边的搭配,但是我却是站右边的搭配的。

3. 对比的力量

为什么我要拥护右边的搭配呢?这里我们要谈到对比。对比就是我们这个世界得以运行的法则之一,一切感受都是从对比中产生的,比如美与丑、善与恶、黑与白……有了这个思维基础,那么在视觉中,当我们想要制造某种效果,那么你就要制造出这个效果的反面特征。

在涉及到美观度而言,「Cinzel Decorative」这款字体看上去纤细又典雅,而且它的密度比较小,因为英文字腔比较大,所以中和了仿宋体中文部分的字体内部的高密度问题(比如参考「烟」字右边的「因」,其中所留空白并不多),这样就能形成焦点以中文为主,英文为辅,相辅相成的视觉感受。

而且,在字型的性格特征上来看,「Cinzel Decorative」的精致典雅又能和仿宋的古朴感相对比,这两种感受的交织,可以说是一种巧妙的混搭。但是混搭并非乱搭,大家可以看看右边,我用了另一个英文字体「Abril Fatface」,属于现代罗马体,因此在和仿宋搭配就显得不伦不类,似乎彼此并不关联,因为它的现代感让它本身无法和仿宋融为一体。而它本身字体的密度又很高,和仿宋类似的黑度,让整体看起来没有焦点。

由此可以窥见,中英文搭配不仅要涉及到字体、字型特征,还要兼顾到字体的黑度,文字本身(比如这里的「烟灰」二字,如果换成其他文字,未必会是这样的选择)。

无衬线体

无衬线体就是没有衬线的字体。在现代商业中,由于其简练的外观,越来越多地被采用。作为活字登场于 19 世纪前半,被普及使用则是 20 世纪之后的事了。

如果要说能与无衬线体相协调的中文字体,那无疑就是我们常见的黑体字,黑体其实也就是中文界的无衬线体。下面的中文所使用的是「思源黑体」,左边的英文所采用就是无衬线体「Nexa」,而右边则采用的是衬线体「Javanese Text」。

可以看出左边的组合更能传递出某种干练明晰的感觉,而右边则略有些退缩。黑体和无衬线体的搭配,更有助于信息传达的直接性。

除了比较传统的黑体能搭配无衬线体的英文,其他的黑体一样可以搭配出不错的效果。中文字体在黑体基础上也会有很多变体,这些笔画上的不同的表现,需要找寻的依然是笔画特征的协调性。

比如下面的案例中,中文采用的风格比较明显的黑体字,字形整体上是以圆角矩形为基础框架,英文当然也采用无衬线体,但是无衬线体也有无数的笔画风格,这里采用中黑粗的无衬线体是更好的选择,比起细体,这样的组合更「明确」,细体则显得中气不足。

1. 字体的音效

中文黑体字在平面设计中类似一种「高声喊话」的视觉效果,并且笔画越粗,其「声音」就越大。英文的无衬线体也有着现代性、直观性的特征,因此,如果要很明确传达信息,比如商业促销宣传等海报设计中,无衬线体无疑是非常适合的。

而细体通常用于比较精致、优雅的平面当中,更具有女性特征。它虽然传达效果没有那么迅捷,但是却能表现一种时尚现代感,是稍微缓和的黑体。可以参见下面的字体运用:

在这里我分别运用的字体是「josefin sans」以及「Nue」,Josefin 是我一直喜欢的细体,几何感造型很强烈。而 Nne 的设计感非常适合用在比较独立的场合,它是能量很大的字体,所以与之搭配的时候,尽量让它的设计感突出,周围不要再增加多余的装饰。

在主张「轻」风格的设计中,细体更能表现出轻的质感。

手写体

原书中小林章还举了意大利体,但现在意大利体已经发展成为斜体,在很多的英文字体中都有斜体的选择。意大利体最早还是一种手写体。

所以,我们这里会谈到手写体。除了正文排版,在很多时候,运用手写体英文,让画面变得更活泼,手写的痕迹会增加更多的趣味性。

在原书中,小林章是这样介绍的:

草书体,一种为了表现出手写文字氛围而设计的字体,因此也被称为手写体。从古典风格到像小朋友涂写般的造型都有,但一般来说,带着明显来写笔势的字体便称为草书体。

我们在这里讲的手写体和草书体不是一个范畴的概念,手写体显然涵盖的范围更大。

以上四种字体(「MV Boli」、「Lobster」、「Kaushan Script」、「Alex Brush」 )都是手写体,但是它们的表现效果差异很大,所以要说手写体的风格,几乎就是一人一个风格,这和每个人笔迹都不同是一个道理。

如果把手写体英文和中文做组合,我的建议有下面几点:

感受书写的性格

每个人写出的字都不一样,表现着个人不同的性格特点,手写体就是有这样的独特魅力,所以感受你所用手写体的性格感觉来搭配整体画面。

突出书写的独特表现

在运用书写体时,尽量把它当作一种氛围装饰来使用,而且是必定要是一个主角。由于它极大的自由感和独特性,如果也和其他的字体一起使用,没有做突出,甚至被埋没,那就不如不要选用手写体。

保持一个书写风格

如果画面中出现两种手写风格,不但画面看上去繁杂,而且显得太吵吵闹闹,如果不是做大卖场的广告,我想这样的视觉传达是不合格的。选用中文的时候也尽量选择性格不太突出的中性字体。

以上这个设计中,我运用了「Kaushan Script」这个手写体,这是我比较喜欢的书写风格,收尾有锋,且造型简洁,笔画柔和,但也有倾斜带来的动感效果,看上去干净利落。与此搭配的中文我选用的是比较中规中矩的幼圆,看上去性格柔和,比较像一个配角。线条在这里营造动态效果和优雅感。整体感觉明快。字体整体都做了略微的旋转,这样就能更好诠释当下的氛围。

手写体的氛围本身就是活泼明快的,于是画面也可以往这个方向靠拢。

小结

除了以上所讲到的大类,还有一些小类的英文字体。

比如哥特体其实也是欧文书写体的一种,但风格迥异,在中国的设计中几乎不怎么用到。但由于历史的沉淀,变成一种非常独特的字体风格。

我们虽然是解析小林章对英文字体的类别划分,但在此我和大家又分享了一些中英文搭配的技巧和要点。平面设计中中英双语使用的情况会越来越多,因此对英文的了解会带我们进一步加速这一结合。

字体下载

在本文中的所涉及到的英文字体下载,可以进入百度网盘下载。

下载链接:https://pan.baidu.com/s/1biFzeX9qxy-tWaG58cmsHg

提取码:la35

备用下载链接:https://share.weiyun.com/5sgicQD

优设大课堂

Source: 优设网 – UISDC | 21 May 2019 | 7:37 pm(NZT)

卡片分类法八大步骤,帮你确定产品信息架构

卡片分类法可以用于网站或应用的导航、信息架构等项目,也可以用于文档、电子书籍的结构整理或是文件的分类管理等。

卡片分类法定义

卡片分类法(Card Sorting)是指让用户将信息结构的代表性元素的卡片进行分类而取得用户期望的研究方法。

△ 卡片分类法

卡片分类法主要是对碎片化的元素进行归类,使之形成分组的具有包含关系的信息架构。

卡片分类法适用类型

卡片分类法在信息化产品上的应用,一般用于以下类型的项目:

卡片分类法操作步骤

卡片分类法实际操作步骤大致如下图所示,下面我会具体讲解每一步的操作方法。

△ 卡片分类法操作步骤

  1. 确定目标

首先要明确你想要使用卡片分类法解决什么样的问题,即你所面临的问题的解决方法。卡片分类法是不是一个最优的解决方案?卡片分类法特别适合用于解决那些子级信息元素庞杂,同时设计者又不能确定每个子级信息元素明确归属于哪一类,甚至可能连如何进行分类都不能确定的情况。

比如网站要进行重构,总共可以分为多少个大类?哪些版块应该归为一类?哪些版块应该独立出来?哪些版块应该进行合并?

或者要新设计一个应用,我应该如何确定一级导航和二级导航?哪些信息需要独立出来?

△ 对于子级元素庞杂混乱的项目,适合用卡片分类法

遇到这些类型的项目时,卡片分类法就是特别适合的解决方案。

而大的信息架构已经确定且分类合理,只是不确定一个小功能如何添加进大的信息架构中,就不适合使用卡片分类法。

△ 单个功能加入信息架构不适合卡片分类

或者产品信息元素特别少,只有寥寥几个主要功能的情况下,也不适合使用卡片分类法。

△ 只有有限信息元素的产品,也不适合卡片分类法

只有确定了信息元素的数量适合进行卡片分类,且希望通过卡片分类法,能够理清信息元素相互之间的逻辑关系,形成一个完整且清晰的信息架构的目标前提,才能够进入卡片分类步骤流程。

如果连自己要实现的目标都不清晰就稀里糊涂地使用卡片分类法,那就是本末倒置,毕竟卡片分类法本身只是一个工具,而工具是要为目的服务的。

  2. 确定信息元素

△ 确定信息元素

在确定了当前的项目适合使用卡片分类法以后,接下来就需要确定需要进行分析的信息项卡片了。

确定需要进行分析的卡片一般遵循如下原则。

尽量不要把父级项和子级项混在一起

△ 不要把父级项和子级项混在一起

卡片分类法有一个重要的步骤就是确定分组群簇,群簇名也就是父级的定义甚至可以交给被调研者自己完成,这个后面会讲到。在卡片设计时尽量把颗粒度固定在一个层级上,有利于分类的科学性和合理性。

如明确「商城」、「婴儿用品」、「洗护用品」三个信息项之间有明确无误地包含关系,则需要对卡片做出调整和筛选。

当然读者到这里可能有一个疑惑:「我本来就是需要卡片分类法帮我确定某些信息项的逻辑关系呀,如果我明确知道他们之间的包含关系我为什么还需要卡片分类?」对于完全不能确定相互之间是否有父级子级包含关系的信息项,就可以一起放入卡片,一般是可以通过分析推导出他们之间的逻辑关系的。

信息项卡片数量不能太少

如果只有有限几个元素,则没必要进行卡片分类法,只需要进行简单的用户调研即可。

信息项卡片不要选择颗粒度太细的层级。

在信息项卡片的选择上,需要对颗粒度进行规范和定义,把颗粒度聚焦在有十几到几十张卡片的层级比较适合,被调研者在这个卡片数量范围内比较容易集中注意力和发挥逻辑思维能力,不建议把信息项颗粒度拆分细化到非常零碎的层级,这样对被调研者和分析者都会是一个很大的考验,毕竟我们是需要卡片分类法来对我们的设计做验证或提供信息参照,而不是完全按照结果去设计产品。

卡片名称要描述清晰,定义清楚,没有歧义

伏尔泰曾说过:「要是你想与我交谈,那请先对自己的用语下个定义。」

要确保自己和被调研人群在同一个频道说话,并且是在说同一件事情。

如果觉得卡片名称可能比较难以理解或可能会让被调研人群产生迷惑,请在卡片名称下添加这个卡片名称的具体描述。

  3. 选择合适的卡片分类法

△ 选择合适的卡片分类法

卡片分类法在用户调研领域有很多具体的操作方法,形式上也有多种,按照分类方式不同可以分为:

封闭式

封闭式分类法是指发起人预先设置好卡片分组,要求被调研者把所有卡片按照自己的理解放入预设好的分组下的分类方法。

封闭式方法适合于产品已经预先确定了大的信息架构的情况下,或者发起人明确知道信息项应该属于哪些分组的情况下使用。封闭式方法的好处是目标明确,对于验证自己的推论或设计的情况下,让分析结果的分类在和自己预设的分类相同的基础上再进行比较。

△ 封闭式分类法

封闭式方法最好预留一个「其他」分组,以防止用户在无法把某个信息项合理归入预设组时随意放置而导致影响样本准确性。

开放式

开放式分类法是指不预设分组,让用户自行决定所有信息项应该有几个分组以及分别归属于哪些分组的分类方法。

开放式分类法适合于那些发起人自己也不确定自己所有的信息项属于哪些分类群簇,且不确定到底应该有多少分类群簇的情况,这种分类法适合于产品尚处于筹划阶段,连功能点和业务范围也还没有确定的项目,这种分类法的分析结果一般不是用来做设计验证,而是用来作为产品信息架构参考,为设计产品信息架构打好基础。

△ 开放式分类法

而这种分类方法的分析结果也往往能够带给发起者惊喜,发现隐藏在那些信息项之间非常隐蔽的逻辑关系。因为脱离了发起者预设分组的羁绊,被调研者往往能够更加关注卡片相互之间的逻辑关系。

  4. 选择参与分类对象

接下来就需要确定参与卡片分类调研的人员了。

△ 选择参与分类对象

对于参与卡片分类调研的人群,还是有一定的要求的。

与卡片分类法所服务项目有直接利益关系的需要尽量排除

卡片分类法所提供的调研结果是要服务于所属项目的,所以如果把参与项目的开发、测试、产品等相关人员包含在调研里,这些人群会因为自身的利害关系而选择对自己有利的分类方法,从而影响结果的客观公正性。

在样本数特别大的卡片分类法调研里,可以谨慎地选取有限数量的利益相关人群,因为数量少而不大会对结果产生严重干扰。这个比例需要严格控制。

逻辑思维能力极差的人群需要尽量排除

因为卡片分类法需要被调研人群具有较强的逻辑思维能力,最终结果才能比较符合客观现实,如果邀请的都是思路不清楚,逻辑混乱的低素质人群,那不但会有极大概率得不到想要的结果,还会影响整个项目的推进。

与卡片分类法所属项目完全没有交集的人群需尽量排除

虽然卡片分类法的每张卡片的名称下都要求尽量附加详细的解释信息来说明当前卡片代表含义,但如果所属项目比较抽象复杂,这时候被调研人群是完全不同行业或没有任何使用体验,也可能会影响到调研结果的准确性。

比如要分析一个区块链产品,而调研对象是街上随机招募的游客人群,结果可想而知。

因为我自己所处行业的关系,我一般在做卡片式分类法时,更倾向于找跟项目无关的交互设计师或产品经理朋友。

以上几点在有条件的情况下注意实施,就可以在选取被调研人群的时候不犯错误或少犯错误。

  5. 选择卡片分类:线上/线下

现在终于进入对于卡片分类来说最重要的环节了,那就是:进行卡片分类。

进行卡片分类具体操作方法可以根据项目实际情况分为以下几种。

线下场景现场调研

预订一个会议室:

△ 预订会议室

预订会议室或使用专业的用户调研室是为了让调研被控制在一个相对封闭,不容易被外界影响和干扰的空间内进行。如果是开放的环境,周围的不参与调研的无关人员可能会干预影响被调研人群的逻辑思考过程,另外被调研人群也需要一个相对安静的环境来深入思考分组的合理性。

邀约被调研人群:

△ 邀约被调研人群

被调研人群名单确定后,发起调研邀请,尽量让被调研人群在同一时间参与调研,一方面可以避免反复解释项目背景和元素描述,另一方面也可以保证每个被调研对象的接收信息一致。

制作卡片 :

△ 一组卡片制作

卡片一定要采用统一规格、质地、颜色的卡片纸。

如果条件限制无法保证所有的卡片规格、质地、颜色都完全一致,也要最低限度保证每个被调研对象拿到的那一组卡片的规格质地颜色一致,以避免因为材质不同而对用户造成心理暗示,从而影响用户的判断。

我在进行卡片分类法调研时,一般采用同色的便利贴,使用便利贴的好处是不容易被气流和人为干扰,同时不影响重新调整,方便统计。

我不是很建议发给每个被调研对象多种颜色的便利贴让用户根据分组不同自由选择不同颜色的调研方式。

△ 避免让用户自己选择

不同颜色卡片代表不同分组因为卡片分类本身就是一个不断调整、不断打破原来的思维定势的逻辑推理过程,如果让用户一开始就选择不同颜色代表不同分类,一方面会导致用户思维固化,另一方面也不方便及时修改。

准备与被调研人数相应份数的卡片,时间充裕的情况下可以由调研发起人自己准备好卡片,如果时间比较紧张可以把所有卡片项写在黑板上让用户自己填,但这样就存在一个样本可能会被污染或损坏的情况。

每张卡片标注名称,标好编号以便后期统计:这种方法的好处是可以在调研开始前,对项目的整体情况和信息元素做细致而详尽的解释说明,这样被调研人群存在疑问可以现场解释,并能尽最大可能地了解用户在做出某个选择时的想法和逻辑思考方式。

让参与者开始卡片分类:

△ 参与者开始卡片分类

卡片分类所有准备工作都完成以后,组织者就可以宣布分类开始了,组织者可以在被调研对象身边观察被调研对象的分类行为并进行简单记录或视频记录,同时可以为被调研对象答疑解惑,解释一些名词的具体定义,但切记千万不要用自己的想法干扰被调研对象的分类行为。

如果被调研对象做出了一个大大超出组织者心理预期的分类行为,或可能暗示着被调研对象对当前卡片名称定义产生误解的分类行为,组织者可以当场询问被调研对象的行为动机和行动原因。如果是一种比较独特的思路,组织者可以把这种思路记录下来,但不要用自己的想法干扰用户的选择。

如果是被调研对象对卡片名称的定义产生了误解导致,可以当场重新解释卡片名称的定义,直到对方明确理解为止。如果发现多个被调研对象都做出了类似行为,那么就要当场纠正更新卡片名称定义以避免歧义。

线下卡片分类调研结束:

在所有被调研对象都明确表示自己的分类已经完全合理,不需要再调整的情况下,组织者就可以宣布调研结束了,然后可以口头或以物质形式对参与者表示感谢,然后请被调研对象离场。

被调研人群离开后,组织者首先要在每组卡片上标明是哪个被调研对象的分类结果以方便后期追溯,然后对每组的现场拍照存档以供后期调研分析。

线上调研

线上调研可以继续细分为线上简单咨询和简单统计工具和专业工具三种。

线上简单咨询:

这种方式比较随意,一般是通过在线沟通软件把自己的意图、目标、卡片项、分组要求发送给被调研对象,然后从被调研对象那里收集反馈结果。

优点是适合于非正式的场合且可以大撒网,然后选择符合标准的答案来作为样本。

缺点是需要同一个个被调研对象具体沟通细节,沟通成本较高。且反馈答案五花八门,难以把卡片分组结果标准化。

简单统计工具:

可以使用图标制作工具比如 Visio,在线图表工具如迅捷思维导图,或者简单的 Excel 表格。

△ 用在线绘图工具进行卡片分类

在使用这些工具的时候,一定要把卡片选项事先明确输入这些工具,以保证结果的标准化。

专业卡片分类工具:

专业在线卡片式分类调研工具现在有多款,我使用最多,觉得最方便的是 Optimalworkshop,因为它不但提供了在线调研工具,还能够直接对调研结果进行分析并给出专业结论。

△ Optimalworkshop

注意,这里说的专业工具仅指进行调研所使用的工具,而不是指最终分析的专业工具(如EZSORT)。

Optimalworkshop 提供多个线上调研工具和数据追踪工具,卡片分类只是它提供的功能之一,这个工具分免费版和收费版两种,免费版允许招募 10 个被调研对象,收费版可以招募更多,但如果只是想要验证一个信息架构,那么使用免费版已经可以基本满足需求,如果是要进行全新的不预设立场的调研,那么收费版还是物有所值的。

在进行线上调研之前,首先你需要预先设置好开始前的所有准备环节,Optimalworkshop 之所以好用是因为它基本考虑到了所有的前置环节的详细说明,包括公司 LOGO、调研题目、调研目标、调研描述等等,填写好所有这些信息以后,基本上只需要发送一个链接给对方,对方就可以开始分类工作了,基本不需要额外说明。

△ 卡片分类准备工作

在调研开始之前,如果你想对被调研对象的一些属性进行进一步的分类和分析,你还可以设置前置调研问卷。

△ 卡片选项

可以从外部导入,也可以手动添加,如果担心卡片名称定义不够清晰,还可以填写卡片名称的具体描述信息,确实非常贴心。

△ 卡片分类法操作步骤

在设置所有的前置选项全部完成以后,就可以把链接发送给被调研对象了。

被调研对象在点击链接后,进入卡片分类操作界面。这个操作过程非常简单易用,只需要把左侧卡片栏里的卡片拖动到右侧工作区,然后再进行分组即可完成,完全是所见即所得(WYSIWYG)方式。

△ 拖动卡片进入操作区

△ 对卡片分组完成后,点击「Finished」即可完成当前调研。

卡片分类组织者在收到足够的样本数后(免费版为 10 份),就基本完成卡片分类调研工作了。

这种线上卡片分类调研工作的优势是组织成本低,基本只需要组织者一个人就够了,相比线下方式,更加灵活机动,而且可以比较自由地选择可用样本,基本不存在样本可用问题。

但缺点就是如果前期准备工作不足,或卡片命名定义不清楚,被调研对象很难快速与组织者沟通解决,可能会存在因理解偏差导致的分析不准确的情况。

所以说,好的工具能够事半功倍,帮助我们快速解决问题,但工具始终是工具,不能太依赖工具,因为最后使用工具的是人,而享受最终成果的,也是人。

  6. 信息整理分析

不论是通过线上还是线下方式,在收集到符合要求的卡片分类样本后,就可以开始进行信息的整理分析了。

△ 信息整理分析

首先我们获取了一张原始数据图表:

△ 曾负责的一个项目卡片分类原始数据

其中 CardName 纵列是原始卡片,每个 Sort 列是每个被调研对象的相对应卡片的分组归属数据。有多少个被调研对象,就有多少个纵列。

原始的数据可以依据卡片矩阵相关度和群簇分析两种方式进行处理。

卡片矩阵相关度

卡片矩阵相关度主要是用来查看用户倾向的卡片分组情况和分组命名情况,可以直接根据量化结果找出最佳的卡片分组方式和卡片分组的最佳命名,或者作为卡片分组和分组命名提供非常有用的参考。

一种最常用的相关度分析方式就是卡片-分组名矩阵归类,这种方法是把原始卡片作为纵轴把所有的被调研对象曾经列出的分类名作为横轴列出一个矩阵,然后把用户的选择以百分比标示出来,当然这种方法适合于开放式的,未预设分组的卡片分类法:

△ 卡片-分组名矩阵归类

另一种相关度分析方式是卡片间相似度分析矩阵,依据用户的分组情况得出各卡片相互之间的相似度,这个分析结果很难直接拿来作为分类依据,但一般可以用来作为信息架构的重要参考资料。

△ 卡片间相似度分析

聚类群簇分析

聚类群簇分析因为需要专业的群簇分析算法和相关专业知识,所以一般采用专业分析工具来完成这个工作,如 EZSORT,或者前文提到的 Optimalworkshop 在线卡片分类工具,也提供了专业的卡片聚类群簇分析功能。

△ EZSORT卡片分析工具

这种聚类群簇分析有两种主要的分析方式:完全一致方法(Actual Agreement method)和最优合并方法(Best Merge Method)。

前者重视各卡片之间的差异性,只要有差异就分别列出。

△ 完全一致方法

后者重视相互之间的一致性和同源关系,部分一致就归入一类。

△ 最优合并方法

这两种方法因为目标不同,侧重点不同从而在进行信息架构分析时各有不同作用,一般都是要结合这两种不同的方法共同分析。

以上就是卡片分类法的信息整理分析工具和方法,有了这些原始数据,我们就可以依据它们来完成我们的信息架构工作了。

  7. 归纳整理信息架构

信息整理分析完成后,我们就可以根据得到的结果基本推导出项目的信息架构。

如果是开放式卡片分类分组名未确定的情况下,我们可以通过卡片-分组名矩阵归类法找出最适合的分组名,可以通过卡片间相似度分析矩阵得出卡片相互之间的或紧密或疏离的关系。

通过聚类群簇分析可以对照分组名找出适合的分组数量,因为卡片之间关系越疏离,则从右侧分叉越早,卡片之间关系越紧密,则从右侧分叉越晚;最紧密的几张卡片之间甚至没有分叉。从这种树状结构中就能基本看出卡片之间的逻辑关系。

△ 群簇分析

如上图邮轮项目中「系统设置」和「我的行程/个人消费记录/个人信息维护」这 4 张卡片,究竟是需要分为两组,还是合并为一组,则需要根据现有分组数量、需要分组数量等因素综合考虑。

通过综合参考上述分析结果后,基本上可以给出符合逻辑关系的,符合用户心理预期的信息架构。

  8. 应用于实际项目

把符合用户心理预期和实际逻辑关系的信息架构应用于实际项目中,还需要根据项目需求、App 本身导航形式等因素综合考虑。如果 App 导航是采用 OTA 在线旅游预订平台那种较常用的瓦片式导航,那么可以允许存在较多的分组,如果采用底部导航栏导航,一般来说不应超过 4 个导航分组。

△ 卡片式导航应用于实际项目

欢迎添加作者个人微信:「bbdogbb」

优设大课堂

Source: 优设网 – UISDC | 21 May 2019 | 6:37 pm(NZT)

学编程后,我做了这10个有毒的在线免费设计神器!(下)

上篇的5个神器大受欢迎,人气极高。很多人也好奇背后的创造者@亚赛大人 是何方神圣,所以我特意做了个小专访,在收下今天的神器之前,一起来认识下这位造福广大设计师的小姐姐。

给大家介绍一下你自己(职业、过往经历,做过的事)

hi,我是亚赛,目前是一个数据可视化设计师,业余的设计工具开发者。

最初想做一些更酷的可视化效果,就学习了一门适合编程小白入门但创造性超强的编程语言 Processing ,用它做了一些可视化作品和循环动图的打卡,在这些过程中就发现编程的乐趣与可拓展性,后来又入门了 html 和 js ,开发了这一系列在线设计工具。

开发这么一款工具需要花多久时间?开发过程遇到最大的挑战是什么?

根据工具的难易度,最快的几个小时就搞定了,比如漫画速度线;多则断断续续大半个月,在 加一个 新功能 – 出现bug – 解决bug – 再加一个新功能……中来回折腾几十个回合。

在开发过程中,最大挑战应该是一些需求没有写出好的解决方法 T_T

比如做 Perlin Noise Painter 的时候,最理想的状态应该是输入字符自动生成。但那个时候没想到解决方法,所以用了另一个方法,需要用户自己上传图片,利用图片中像素的明度去生成效果。工具发布后,发现部分用户因为图片素材内容的不确定性原因,生成不了效果……隔了一段时间,写的东西多了,了解更多解题思路一样,终于把输入字符可以实时生成效果做出来了,这样也降低了用户的操作成本~

最近有没有在开发的设计神器,提前透露下

最近暂时没有在开发的工具,但 @Simon_阿文 给我提了一些设计的需求,比如用Ai中混合工具效果能否应用到在线工具中,正在排上我的日程表。

大家如果看到不错的效果,觉得有用工具生成的潜力,可以来微博 @亚赛大人 告诉或许就帮你开发了

推荐你觉得特别好用的日常神器(范围不限,实体/虚拟产品都可以)

推荐一款我每天都会用到图片管理工具:Eagle。

我是被优设上的一篇文章《这个国人开发的Eagle,堪称素材收集和管理神器!》强烈种草的!

它有很多炒鸡棒的点,上面的文章介绍的非常详细了。那我来说说喜欢的几点,一是它可以保存图片所在的地址,方便可以追踪图片的来源。我还可以利用这个地址,找到创作者的网站,看到他更多作品;二是可以给图片加标签,大大提高检索效率。

最令我惊艳的一点是,它有一个颜色筛选器,可以根据你选的颜色筛选出接近色相的图片~

相信你用上这个工具,也会爱上它的~强烈安利!

通过哪些渠道可以关注你?

虽然注册了很多社交平台,但来微博 @亚赛大人 找我最方便啦~

还有一些地方不定时会出现一下:

知乎:@亚赛大人

Twitter :@yasai_wang

Instagram :@yasaisai

采访看完,继续来收今天的6款神器!

上篇回顾:《学编程后,我做了这10个有毒的在线免费设计神器!(上)》

注:本文由优设网独家约稿,未经优设网许可请勿转载。授权请添加编辑微信:「gg_and_xb」

漫画速度线生成器

1. 试玩地址

https://wangyasai.github.io/Speed-Line/

2. 灵感来源

当漫画遇到超燃场景时,画面上常常会包围着一圈线,俗称速度线。可惜网上的优质速度线素材极少,要么付费要么不是透明背景…所以我们就制作了就有了这样一个简单好用的速度线生成器!

3. 工具简介

如何一秒钟让你的设计成为焦点?如何让画面冲击力突破天际?你可以试试在画面上加上速度线,感受一下啊!

你不仅可以调整焦点位置,你还可以调整线的数量、粗细、长短

同样,点击 Save 就可以保存透明背景的图片了,再也不用在素材网站上苦苦搜寻。

4. 参数解释

5. 案例应用:

中二感溢出屏幕……

你甚至可以切换成弯曲线型,一秒钟制造诡异画风

贝塞尔曲线生成器

1. 试玩地址 

https://wangyasai.github.io/Bezier/

2. 灵感来源

来自一个非常酷的网站https://colorpong.com/,这个网站上有超多酷炫抽象的点线效果,不过需要购买才可以使用哦~

3. 工具简介

这种粒子曲线,非常适合喜欢科技风的甲方了,一键无痛生成各种酷炫的线型图片!

这个工具有七种点线style,各具特色~

可以调整点线的数量

也可以调整点线的杂乱程度,杂乱也有杂乱美呀~

4. 参数解释 

5. 案例应用 

抽象线条再旁边点缀一些关键词,很科技作风。

@林书尼 把工具中几种形状结合起来,再加上一些同样抽象的粒子,一张抽象海报就诞生了!

动态马赛克背景生成器

1. 试玩地址 

https://wangyasai.github.io/Awesome-Mosaic/

2. 灵感来源

据说在发布会中,下面这张马赛克背景重复利用太多次至今没找到替代品……所以,我又开始了

3. 工具简介 

最初的时候,我们就想开发一个马赛克背景,就带点科技效果就好了,嗯,有点闪的科技效果。

在开发过程中,我做偏了……忘记为什么就加了下面的环绕模式,但最后的效果似乎还不错就保留下来了。控制面板上可以改变整体的规则程度,它可以每一圈一样的宽度,也可以每一圈各有长短,很随意但依然有节奏的变换。

可以用 Spacing 控制圈与圈之间的间距

用 Nums 调整每一圈中的数量

4. 参数解释 

5. 案例应用 

如何更骚气?试试粉黄撞色!骚气值至少上升10个度吧!

若是换成黑金配色,诶,画风转向低调奢华有内涵

万箭齐发biubiubiu生成器

1. 试玩地址 

https://wangyasai.github.io/Stars-Emmision/

2. 灵感来源

一年前,我们在群里讨论到一张有冲击力的海报,诶,这不就是中心向外扩散的射线吗?如果有这样一键生成小米海报这种背景效果的工具,无疑会大大节省了我们的设计时间。

3. 神器简介 

你一打开它,就会有一堆射线迫不及待地向你射来:

支持 | 上 | 下 | 左 | 右 | 中心 | 五种刺激的发射方式,看久了比刺激战场还紧张吧。

可以调整粒子的数量

最后保存的静态图,有种下一秒就要冲出屏幕的感觉!

4. 参数解释

5. 案例应用 

当然,你也可以录制成动图 / 视频,效果会酷炫一百倍:

6. 彩蛋1

这个工具的动效是在 Processing 大牛 Daniel Shiffman 的教程 starfired 启发下完成的。教程中最后的动效如下:

Daniel Shiffman,是一位讲课超级有活力且幽默的老师,感受一下他的画风。

如果你也想学习 Proceesing / p5.js 以及其他编程做出一些有趣的效果,可以关注他的 Youtube 频道(The Coding Train),跟着他的课学习,相信你也可以收获很多~

7. 彩蛋2

在我们的杂货铺,大家会丢一些好玩的神器或者一些酷炫的图片。我们就有可能把这些酷炫好玩的效果,制作出为设计师省力的设计工具!所以,大家如果看到好玩的效果可以来微博告诉我们呀~

群里的另一个大神 @pissang,他做了很多以 3D 效果为主的工具,每个工具生成的图片,随便一截都非常撑场面!指路:https://gallery.echartsjs.com/explore.html?u=bd-2215764494&type=work#sort=rank~timeframe=all~author=all

向量场迹生成器

1. 试玩地址 

https://wangyasai.github.io/Perlin-Noise/

2. 灵感来源

在一次粒子系统的学习过程中,我少写了一行代码 background() ,居然……获得了这个奇妙的抽象效果,或许这就是代码的奇妙之处吧,给人意想不到的效果。

3. 神器简介

和上述所有工具一样,各种参数可调整:颜色,线长,噪波比例……

是不是很像高中的等高线?但更也是更有艺术感的等高线吧!

控制面板中有一个参数 noiseScale ,它就是负责让线的弯曲程度,数字越小,比卷发还卷,不信的话你试试,数字越大,就相对越规整,也不会出现等高线那样一圈一圈的。

最后绘制出流畅美感的线条~

4. 参数解释 

5. 案例应用 

嘿嘿,恭喜你已经抵达本文的最后一个工具了!笔芯💗~

粒子爆炸生成器

1. 试玩地址 

https://wangyasai.github.io/Particles-Emission/

2. 灵感来源

这个工具就是开篇提到的因为打卡内容的相似性,想开始做个小工具,也因为开启制作这个工具,我才陆陆续续制作了上面的9个工具,还是很有成就感哒~

3. 神器简介 

想必大家都很熟悉我的工具的参数套路了……颜色、速度、形状、粒子大小等等……

调大粒子的阴影效果,竟然有种假3D的错觉。

增加粒子的重复次数,可以让粒子瞬间充斥你的整个屏幕

勾选旋转,就可以保存这样一张绽放出一朵抽象粒子花?

4. 参数解释:

5. 案例应用:

工具集合

最后,所有工具都在这个汇总页上~

直达链接:https://wangyasai.github.io/designtools.html

好啦,快去玩吧~

优设大课堂

Source: 优设网 – UISDC | 20 May 2019 | 8:07 pm(NZT)


优设轻访谈!拿到需求无从下手?来看这7位设计大咖的私藏搜索技巧

信息时代,每个人都需要具备基本的「搜索」技能,尤其是设计师,你有没有灵感枯竭不知所措的时候呢?今天我们召集了7位优秀设计师,对他们的设计灵感来源进行揭秘,希望这一期的轻访谈能够让你轻松Get设计大佬的搜索技巧!

优设轻访谈第八期,我们的话题是——不信息时代,能与我们分享一下你的搜索技巧么?平时的素材积累是如何进行的?

Dribbble 人气最高:Mike

Dribbble:https://dribbble.com/creativemints

实际上,现在寻找灵感或资源变得非常容易。去Pinterest,你会获取到任何你能想到的灵感!查看stock网站,获取所有你需要的资源!

△ AGE / Online courses

尽管如此,我仍然建议从外部世界获得灵感——请几天假,去一个新的城镇或国家旅行,逛逛博物馆,你会发现真实生活会成为你最重要的灵感来源。

产品视觉设计总监:Gleb Kuznetsov✈

Dribbble: https://dribbble.com/glebich

是的,你是对的,搜索技巧对产品设计师来说是必不可少的。我在一家公司做了很长时间的分析师和研究部门工作,在那里我负责用户体验,这些经历帮助我理解如何搜索有意义的数据和信息,并使用它来定义一个产品的关键指标。

但是搜索不仅仅是关于用户分析和信息,也是关于设计语言——理解什么是可能的。最好的设计只有当你跨越了可能和不可能之间的界限时才会出现。这种平衡基本上是一种新的设计语言或产品的品牌。

我使用Pinterest进行图像搜索。这个网站帮助我创建情绪板,并找到一些更具体更具象的东西,Dribbble的作品帮助我研究UI布局。然而,我不会使用Dribbble来作为我的色彩搭配灵感库。

对于颜色,我使用自己的灵感素材库,在我的职业生涯中,我花了大量的时间从互联网上搜集素材,并进行创作和整理。我也有自己的平面设计素材库,我创建并管理这些素材库大约有10年了。我几乎每天都在捕捉最新的设计灵感素材。问题不仅在于你如何搜索,还在于你如何将这个搜索结果应用到你的工作中。

△ Water waves simulation for 3d icon

那如何应用呢?例如,当我看到好的设计时,我将视觉图像结构分离开来——有时我在情绪板中添加新图像仅仅是因为我喜欢形状,有时是因为我喜欢颜色,有时是因为图形效果等。在将该引用添加到库之前,设计人员需要了解在何处可以使用以及如何使用。对于设计师来说,搜索绝对是一项必不可少的技能,我通过创建情绪板促进了我的搜索。

顶尖设计团队:Ramotion

我们相信灵感无处不在,当然也会取决于我们进行的项目类型。

我们在互联网上会搜索很多,比如Behance和Dribbble。然而,我们周围也有很多灵感。

△ Cellebrite Pictograms

例如,如果进行的是一个品牌项目,那么我们周围的自然环境就是我们获得灵感之所在。颜色、动效、形状和所有这些的组合使一切都在一个愉快的和谐场景中工作,这就是我们努力传递的。

对于UI/UX项目、网站和App设计,我们也是这样做的,但我们主要目的是理解用户的最终目标和每个行动背后的动机。我们不仅在数字世界中研究类似的解决方案,在现实世界中也会寻找类似的解决方案。

顶尖设计团队 FΛNTΛSY 总监:Minh-Pham-✪

Dribbble:https://dribbble.com/phamduyminh

我不在本地存储灵感资源,因为想要方便浏览必须对其进行分类,而这对于本地存储来说比较困难,所以我非常依赖于在线资源,它们有很好的搜索引擎,所以,为什么不呢?

基于不同的目的,我更喜欢从多种来源获得灵感:

服务设计机构:Zajno Crew

说到寻找灵感,我认为有两种人:使用Dribbble的人和使用Behance的人。Dribbble更像快餐,在这里你可以迅速的饱腹,Behance更像一家高档餐厅,你可以在那里度过整个晚上。

我个人喜欢吃快餐。我喜欢每天早上上班前查看Dribbble,当我发现好东西的时候,我就把它存起来以后用。

△ Promo Website Animation for Pocket Multilingual Assistant

如果你正在寻找真正的案例,而不仅仅是概念稿,你可以在Awwwards上找到一些主流的东西,也可以在这里找到一些更奇怪的东西。

哦,还有Pinterest,它的优势是推荐你可能喜欢的东西。我经常用它来做情绪板和寻找参考素材。

如果是插画资料,没有比Dribbble和Behance更好的地方了。只要滚动鼠标,所有的好东西和你喜欢的艺术家都会一步添加到你喜欢的作品中,简单!

△ Tempers Flare

Pinterest有利于发现新的想法、主题、不寻常的元素和灵感。每天浏览这些平台也会让你培养出一双训练有素的眼睛,这对提高你自己作品的质量和风格至关重要。」

Dribbble 人气插画师:Febin Raj

Dribbble: https://dribbble.com/febinraj

我每天都想更新!我认为这是件大事。因为这个世界瞬息万变。

△ Evening From Kerala

通常,我的主要搜索源是Behance和Dribbble,同时我从其他来源获取了更多的数据,比如文章,博客。

Behance 人气设计师:李宜轩

Behance: www.behance.net/yihsuanli

信息时代,每个人都必备一个「搜索」技能,尤其是设计师,很多人在接单后,可能会第一时间在网络中或者日常的资料扩中搜索素材、参考、灵感等。

我还记得刚开始接触设计时因为没有太多经验,常常因为资料整理太久,压缩了执行时间,最后反而虎头蛇尾的完成作品。虽然创作作品时资料搜集、调查很重要,但其实整体过程有更有效率的方法。其实收集资料也是需要练习的,通过经验累积,可以渐渐增加效率与快速找到最精准的讯息,避免漫无目的搜寻。

△ ZENWATER

Work hard 不如 Work smart, 有了较有系统的资料搜寻方式后,可以将时间留给创作和尝试。随着经验累积,我开始养成了一些小技巧帮助自己更有效率的搜集资料,大家可以酌量参考:

1. 先用树状图整理出关键字

在开始找资料前我会先把设计关键字整理出来,先从Google或百度等网站去搜寻相关的话题或图片,以此方式让思考可以更突破。例如,我要做一张音乐会的海报,开始前,我会先写下关键字,例如:乐器、钢琴、音乐、琴键、流动、弹奏….,接着利用这些关键字进行中英文查询,随着找到越来越多资料,可以从其中找到更多可能性的延伸。这个阶段搜寻目的是从抽象方向出发,避免找到与别人相似的元素。一个一个关键字搜寻后,就可以把其中好的图片整理再一起,收敛成更明确的设计方向。

2. 擅用IG的#hashtag功能

除了使用搜寻网站寻找资料,我觉得IG(instagram )也是一个不错的选择。我会用IG 的hushtag去找大家对于某一个单字不同的想像,例如找#music,在其中除了可以找到音乐相关的画面,有时候也可以找到不同场域里的音乐元素。除了找灵感外,我也会利用hushtag搜集最新的设计作品,例如找#logo#graphicdesign时,可以看到大家正在进行中的作品,或是还未整理好放上Behance的作品。

△ One Team One Goal / IBM Taiwan Sport Day

3. 以pinterest分类整理资料库

我平常就有整理pinterest的习惯,建立资料库的习惯除了为了特定专案外,我也会以设计种类分类作品,例如以CI、packaging、poster…分类。除此之外,以风格分类的资料库也是必要的,例如:东方风格、美式、日本风格、欧式….。这些平常就累积好的资料库能够让我搜寻作品资料时,有一个快速的开始。 Pinterest会依据风格推荐更多的作品给使用者,因此当平常有了足够的累积,寻找资料就会有效率很多,能够快速找到很多需要的作品风格。

4. Behance搜集不同风格的设计师

Follow特定设计师的IG或是Behance也是我搜集资料的一个方法。我会搜集一群在每个领域最具代表性的设计师。在找不到灵感时,我会不断浏览他们的作品集,试着从他们角度出发,思考如果是他们遇见这个题目,他们可能怎么发展。除此之外,他们也是一个完整的风格库,每个作品都是该领域的标竿,当客户有特定风格的需求时,能够快速给自己一个明确的目标,期许自己能够达到他们作品的高度。

非常感谢 7位优秀设计师带来的精彩分享,希望各位灵感迸发咯!每期一个设计师关心的话题,我们下期见。

优设大课堂

Source: 优设网 – UISDC | 20 May 2019 | 8:00 pm(NZT)

连一加7都有!五月份最新展示样机素材免费下载!

本月最新的样机素材包来咯,包括最新的安卓机皇OnePlus 7 Pro、特别Awesome 的三星 Galaxy Fold 、谷歌出品的Pixel 3A 应有尽有。都是高品质素材,已经给大家免费打包好了,快来收!

OnePlus 7 Pro 展示样机

Galaxy Fold 展示样机

Pixel 3a 展示样机

Google Pixel 3a 展示样机 Sketch版

iPhone 展示样机

Samsung Galaxy Fold 展示样机

打包下载链接

下载链接:https://pan.baidu.com/s/1OZ9dvZ5vdFaAUok3z3TgoA

提取码:9vt5

备用下载链接:https://share.weiyun.com/53WjhvD

优设大课堂

Source: 优设网 – UISDC | 20 May 2019 | 7:04 pm(NZT)

同样用着PS和AI,但这3倍的薪资差异是怎么造成的?

也许每个做设计的人,都会遭受相似的困扰:

与此同时,我们也不可避免地沉迷于别人成熟的设计。

比如保罗·兰德的经典LOGO设计,精魂内蕴,考究经典,让人忍不住反复琢磨。

很难不喜欢苹果的广告设计,比如激励人心的 Think Different 系列海报,令人难以忘怀。

国内的设计的优秀一样令人心潮起伏,比如黄海给《龙猫》所设计的中国版海报,精妙绝伦,温暖走心。

同样的PS和AI,相似的设计技巧,为什么他们的营销更走心、体验更到位、创意更突出、商业价值更持久、社会影响力独步江湖?因为思维和方法不一样,能够调用的能量更强大。

在这个产品高度同质化的商业社会里,能抓住企业内核的设计更能说服甲方,自然也能够切中用户的诉求创造价值,这样才足以让品牌和企业历久弥新。比如可口可乐,永远年轻,而每一个为可口可乐设计的设计师,也得到了远超其他的回报。

只会技法,总在临摹,总归落于下乘。掌握洞悉用户的方法,抓住品牌精神内核,再结合技巧方可原创,这才是带来商业价值的好设计。同时,商业和市场的价值,也会反哺到了设计和设计师身上。

竞争激烈的中国商场,品牌迭出的巨大机遇,这是属于懂得品牌和平面设计者的风口。所以,开头的几个问题,并不难回答:

同样的技能,别人比你多了想法。正确的设计思维,才能诞生原创。懂品牌懂用户,设计才能切题,好过稿,有力量。

无论你是平面设计师,UI设计师,产品设计师,还是正准备毕业的设计系学生,这里有一门课,带你在下一个风口,飞起来。

每一课都为进步成长而设计

太多普通设计师,还在5K的薪资上挣扎。而懂得品牌设计的设计师,增长和进步会更加显著,同样的技能组合之下,他们会向着 15K 的基准进发。

也许你已经敏锐地意识到了,品牌和LOGO设计,在这个数字化的时代已经悄然改变,甚至和5年前都截然不同了。所以,课程开头虽是开宗明义的概念普及,但是注入你的脑海中的基础概念,其实是基于此刻,植根于2019年最新的趋势变化,而精心定制的最新知识框架。

懂得品牌的优秀设计师,都是从制定策略开始的。在大量翔实的案例拆解和分析过程中,你将会习得一整套完整的策略制定方法,从想法上占据设计制高点。也许你过去做设计没有想法、没有创意,我要告诉你,思维的桎梏将在这里被打碎,你要的创意和想法,就是从这个几节课开始构建。

当然,做设计,是要落地的!这可能是这门课最硬核的部分。你将会开着 PS 和 AI,在老师的带领下,完成最为系统的学习。你想要学习的LOGO、字体、配色和完整的方案设计,都将在持续不断的授课、练习以及老师亲手改稿的过程中,被打磨和砥砺,百炼成钢。

放心,你碎片化的知识将会在这里收束,零散的设计技能,会被梳理成有效好用的组合技。你的褪变,会从这个环节开始。

在进阶过程中,你会明白融会贯通是多么美妙的感觉:接下来你将会享受一人成军的快感。在课程的第四部分,你不仅会具备制作全套VI系统的能力,你的设计还会进一步规范化,视觉化,更加生动,更具商业价值。这不仅意味着提案过高,这还意味着你将拥有设计的话语权,驱动品牌。

未来的你不会止步于一个单打独斗的设计师。课程最后还提供了系统性的设计管理,品牌环境、体验、营销的实战练习,让你的设计更加具有竞争力,为后面带更大的团队、管理更大项目而铺路。当然,课程中每一次练习,都会有老师亲自改稿,带你优化。从每一次指导,带你设计升级。

这门课程希望能够立足于此刻来传授设计的方法,打磨技能。更希望埋下一把种子,让他们悄然成长,让你在这条依然充满希望的道路上,成长为一片森林。

与时俱进,精心迭代,这可能是2019年最贴合当下语境的品牌与平面设计课程。你所需要的平面设计的知识与技巧,已经融入到每次课程,每一次练习,和老师的每一次指导当中了。

那么,你以为课程中所享受到的福利只有目录上的这些内容吗?不!下面的这些福利,也是你将会享有的特权:

除了跟着课程学习以外,课程最有价值的地方就是日常的作业和老师的亲手修改、复盘和迭代!

已经很想报名了?现在就可以直接添加客服微信 youshemeimei ,先领取限时优惠券!

开始感兴趣了嘛?往下看,你会很快意识到,你的老师是一个巨大的宝藏!

为你赋能的资深讲师——李前承

无论是港大的学术背景,还是一路升任品牌总监,再到独立创建自己的品牌服务团队,李老师入行后10年间的履历足够精彩。奇虎360,hao123,海底捞 这些一线品牌客户,它们的名字就是李老师的品牌设计能力的明证。当然,李老师所服务的客户远不止是这几个。

你们最熟悉的海底捞:

国内最著名的导航网站 hao123:

奇虎360 旗下的主力产品,360企业浏览器的品牌设计:

360旗下潮流视频剪辑工具,快剪辑的品牌重塑:

这些并不容易拿下的客户,到底提出过哪些刁钻的品牌设计需求?李老师又是如何应对化解,并通过正确的策略来完成提案,并最终完成设计,落地实施的?在这门课程中,你会获得答案。

当然,同样知道这些答案的学员,也已经完成了他们各自的褪变:

在学习课程之前,熊小猫同学的整个设计能力都发生了质的飞跃:

在此基础上,还完成了完整的品牌设计方案:

而学员清歌的提升则更加惊艳。这是在还未经过思维和技能提升前的设计:

在课程推进过程中,大多数学员已经足以拿出动人心魄的设计,无论是LOGO、字体、包装还是海报,都可以轻松驾驭:

课程进入后半段,他们足以设计出完整的VI系统,创造能够撑起整个品牌设计方案:

课程结束后的真实反馈,想必也是你最想了解的内容吧?

时间不等人,犹豫就会败北。成为更好的自己,用实力证明你的价值,赢得你应得的收益。

在这里,我们等你来。

做一个追光者,攥住灵魂里的那道光。用你自己做桥梁,在整个时代的面前点亮。

上课时间和价格

同时优设大课堂的老学员们还享有“100元*报班数量”的回馈大福利!

只要你曾经参加过以下老师的课程,均可以享受老学员专属优惠!

报名方式:
添加客服微信:youshemeimei

千万别忘了领取 100元 限时优惠券和福利哦!

优设大课堂

Source: 优设网 – UISDC | 20 May 2019 | 6:17 pm(NZT)

学编程后,我做了这10个有毒的在线免费设计神器!(上)

在微博关注我@亚赛大人 的朋友,都多多少少了解到我做了不少设计小工具吧~ 最初用 Processing 做循环 Gif 打卡,每一小段时间打卡的主要代码都差不多,改一些参数,就可以做出看上去不一样的效果,那何不做一个可以实时编辑并反馈的工具来玩,就开启了我开发设计工具之路。

诶,没想到现在自己做了10个了!是时候来一个最全的工具大总结了!

注:本文由优设网独家约稿,未经优设网许可请勿转载。授权请添加编辑微信:「gg_and_xb」

工具总结:

3个文字工具+1个玩具球+6个点线面背景生成器

阅前提示:

先从最近刚发布了的一个线型字工具开始吧~

波涛汹涌的线型文字

1. 试玩地址

https://wangyasai.github.io/waveFont/

2. 灵感来源

如果你对 Joy Division 这个乐队爱到不行,亦或是完全不知道《unknown pleasure》这专辑是什么鬼……但是你对这些看上去突出的山峰/波浪一定不会陌生。

这个经典的图案曾多次出现在影视作作品中,比如《头号玩家》中的一个彩蛋,女主背心上印的就是这个图案。

但事实上这并不是山峰或波浪,这是人类第一颗发现的脉冲星 CP 1919的脉冲信号。当然你也不用纠结这是什么,反正如你所见,这个工具的目的就是让文字突出!

3. 工具简介

上手十分简单,直接输入文字就可以实时生成,还可以调整字体的大小和粗细,这不就意味着你得到了波纹字体了吗?想写啥就写啥,还可以支持特殊符号!!!

这个工具当然支持填充颜色,那如何只看到文字不看到周边线条的颜色?只需要把背景颜色和线条1的颜色统一就好啦~

再试试颜色模式下的渐变,就是另一种风味了。

说完颜色,再说说山的海拔,调整 Control 面板中的 Height ,就可以任意拉高或降低高度了。

刚生成的字默认每一列小山峰都排列的整整齐齐,如何让它们不如此规整呢?那就调整 Offset 吧,这是调整山的偏移量,可以让文字的每个部分错落分布。

参数太多?不想一个一个调?那就不如试试随机效果 Random 吧,任意更改面板中的种种参数,给一个意想不到的结果。

4. 参数解释

参数太多,篇幅有限,大家自行探索吧~

提示:这次工具除了常规的 JPG 和 PNG ,还支持 SVG 下载哦~

5. 案例应用

@Simon阿文 提前内测做了下面一组打卡。

如何做到循环播放?先用开篇提到的录屏软件录制 gif ,然后在 PhotoShop 中删除超出一个完整循环的帧,最后循环播放时,最后一帧和第一帧能自然过渡。

感受到心电图般砰砰砰砰砰地跳动了吗?

猜猜下面两组是怎么做的?

不得不说,@Simon阿文真是个优秀玩家,他用我的工具做的东西,我……居然想求教程???

还做了一组变形数字,想知道怎么做的?Call 他写个教程吧!

他用我的工具,做了很多案例在 #PPT365# 的微博话题上,那里还聚集了很多人的设计脑洞,大家可以随时去找灵感噢~(对了,本篇中若无特殊注明的案例均来自 @Simon阿文 )

一个大写的粒子字

1. 试玩地址

https://wangyasai.github.io/PerlinNoisePainter/

2. 灵感来源:

在学习粒子系统时,想看粒子和文字结合会产生什么火花?

最先想到一个最简单的方法,在粒子的上层加一层镂空文字的蒙版,把不想看到的粒子遮住,只看到镂空的部分。

诶,就get了粒子字的效果~

2. 工具简介

如你所见,这个工具就是粒子充斥在文字里面,拥有它,让文字搭上酷炫的班车。

这个工具已经默默更新了 2.0 版本,1.0版本需要上传黑底白字的图片,现在直接在文本框输入文字,即刻生成效果。同样,也支持输入符号,输入一个 ★ ,就可以生成五角星粒子字。

用 Nums 控制粒子的数量,数量越多,当然文字看的更清楚啦,粒子越多也会影响运行的速度,建议粒子控制在能够看清文字的数量就够啦~

粒子的默认颜色是三种颜色随机分布,当选择 ColorMode 里面的渐变模式,颜色就会从上到下渐变。

3. 参数解释

4. 案例应用

想必你也掌握了下面的是怎么做的了吧~

黑客帝国同款文字雨生成器

1. 试玩地址 

https://wangyasai.github.io/TheMatrix/

2. 灵感来源

没错!就是来自科幻大片《黑客帝国》!!!

3. 工具简介

顾名思义,就是一款自带黑客帝国特效的文字工具。作为一个爱耍酷的工具,它绝对不会满足一种模式的,它内置多款故障字体,你可以用它来生成各种乱码文字雨背景。

除了默认的几种模式,你还可以定制文字雨中的关键词,只要在 Unicode 中选择 Text 模式,在下方文本框中,随意敲击文字,就可以实时看到输入的文字在屏幕中随机生成,瞬间 get 词云的新玩法!

另外,还提供多种参数设置,比如文字雨射出的方向,比如你可以通过设置透明度来营造出射线的错觉~

当把文字方向改成从左到右横,这不就是一面弹幕墙了吗~

4. 参数解释

5. 案例应用:

看,@林书尼 把图表和这个效果结合,开启科技感图表的新鲜玩法~

说完上面上面3个我制作的文字相关工具,再来说一个运用隐藏技巧可以制作油画字效的工具。

向量画笔重绘器

1. 试玩地址:

https://wangyasai.github.io/Noise-flow-field-painter/

2. 灵感来源

来自 Jason Labbe 大神开发的工具 Noise Flow Field Painter(地址:https://www.openprocessing.org/sketch/472966)我在他的基础上,加了一个控制面板,像其他工具一样可以方便修改参数~

3. 工具简介

这个工具就是用一堆圆柱形状把一张图片重绘,神奇地模仿出油画的质感~~

你可以上传你电脑中的任意图片,想重绘哪张就哪张。

可以非常方便地调整画笔的粗细、长短

调整画笔的粗细

诶,还记得前面说这是一个可以运用隐藏技巧制作油画字体的工具,如何实现呢?

上面我们上传的都是完整的照片,试想上传有油画效果的文字,那不就是油画字吗?

@Simon阿文 就这样用它做出了一套很好看的油画数字,相信你现在也掌握了吧

同理,各种圆形、方形、三角形、不规则图形的油画效果也这样处理。

4. 参数解释

5. 案例应用

让梵高的油画再次加工,这个笔触真的超有感觉~

@Simon阿文 用他旅游时拍的一张照片,把处理后的油画效果图,再和原图进行拼接,内容引起极度舒适,看了好想出去玩呀!!!

说完了上述的这四个字体工具,我们再来玩个球吧!

玩个球

1. 试玩地址

https://wangyasai.github.io/Play-a-ball/

2. 灵感来源:

相信不少同学在刚入门 Ai 的时候,都跟着教程做过这样的抽象球体:环形,波纹,网格……

虽然教程简单易懂,但很多同学还是过目就忘……现在,懒癌的福音来了!

3. 工具简介

这是一个在线抽象球体生成器,可以一键生成那种在 Ai 入门教程中非常常见的球体:环形,波纹,网格……是的,现在你连门都不用入了。

你可以随意更改花纹:

你可以调整球体的平滑度来实现变形:

当然,每种花纹的疏密和大小都可以调节:

懒得调参数?那就直接点击随机生成好了:

甚至可以上传自己的图片,作为图形的纹理!看,一秒钟自制星球:

4. 参数解释:

5. 案例应用:

恭喜你,文章已阅读过半!收藏好这篇,明天优设网会发布第二篇,将迎来一大波点线背景素材生成器,还有亚赛大人的专访哦,敬请期待!

优设大课堂

Source: 优设网 – UISDC | 20 May 2019 | 12:59 am(NZT)

你最想要的,都在壹周速读 vol.08

壹周速读,每周一早上更新!上周的优质内容,精彩看点都会汇集于此!最新的谷歌深色主题设计规范,治疗甲方「放大综合征」的解决方案,5月份的设计圈干货大合集,总会有你不愿意错过的优质文章!

一、跟趋势

掌握趋势,就是让整个时代的力量加持在你的设计之上。

规范 | 谷歌官方指导,教你用最专业的方法设计深色主题!

说是千呼万唤始出来一点都没错!深色主题在国内早已有之,十几年前很多主题和和APP类数字产品已经开始涉足了,但是为什么Google的这套设计规范这么重要?很简单的两个原因:

所以,无论你是做UI设计、网页设计还是产品和交互,请不要错过这次Material Design的内容更新。其中的整套规则和逻辑,可能比参数更有价值:《千呼万唤!这就是你们要的谷歌深色主题设计规范》

IP | 改变商业模式和设计能量的节点:IP品牌形象的设计趋势

IP 形象真的只是一个形象,一个角色,或者一段故事,产品和品牌的附属?至少从现在来看,它所具备的能量比我们想象中要大的多。无论是数据增长所反映出来的市场规模,还是现实生活中我们可以感知到现实的影响,都在昭示着视觉和产品设计者,以及企业和品牌都应该认真对待IP形象这个事情。

想了解更多?腾讯 ISUX 团队的设计趋势报告第二部分,就是关于 IP 形象的,你想了解的,都在这里:《腾讯顶尖设计团队总结的 2019 – 2020 设计趋势:IP形象篇》

二、有见地

高手的见地,为你提供最有效的方法支撑。

成长 | 给每一个焦虑者的解药:快速成长型设计师的私分享笔记

你所寻找的答案不一定是长篇大论的拆解和分析,这篇简单却真实的短文同样有你想要的答案。作者吴轶用真实的经验作为基底,拆解覆盘出他得以快速成长进步的四个方法。最简单的工具,明确却直观的方向,帮你消解焦虑、即刻开始成长的方法就在这篇文章里面:《为什么有人工作才两年,能力就远超过五年的设计师?》

沟通 | 掌握这套方法,你的说服力一样可以快速 Level up

沟通确实是个宏大的命题。让你的设计和想法要落地,千万不要因为沟通障碍而倒在了最后的环节。好在,沟通这个宏大的命题落地在设计团队这个场景之下,有一套成熟而具体的方法,你掌握了这套方法之后,一样可以提升说服力,增强设计方案落地的效率:《为什么你的设计方案没问题,但开发就是不想做?》

自学 | 学习没法坚持下去?可能你是因为你还没看过这篇文章!

为什么要每日练习?这个原因你可能知道,但是具体怎么样做到,最终能收获怎样的成就,你可能还没有明确的概念。这篇文章重新帮你拆解了自我学习和进阶的整个过程和潜藏的障碍——最重要的是,为你提供了破开阻碍的方法。读下去,再给自己一个机会:《自学坚持不下来?这份设计师打卡练习完全手册送给你!》

三、学秘技

方法论是重要的,掌握具体技巧则能够帮你更具体地搞定问题。

文案 | 让设计更加卖货的好文案,这套方法教给你!

文案的设计同样不是凭空得来的!高手的解决方案总会更加富有条理,而整套方法,就在这篇文章里:用3个小问题来梳理思路,拿6个套路来确定细节,最后加上一个按钮设计秘诀来促进转化。并不是什么高深的东西,你可能单独想到过其中的一两点,但是能够梳理到一起就非常有价值了:《懂点文案能加薪!设计师如何写出卖断货的好文案?》

配色 | 配色方法太抽象?也许这些精彩案例让你容易吸收!

你应该很清楚,设计方案从来都不是一下做出来的,包括配色在很多设计项目当中,也不是一下子就出来的。那么这中间所涉及到的技巧、思维过程和方法有什么讲究?看过那么多配色方法论依然头大,不妨看看 @做设计的面条 的这篇实战案例分享:《高手出品!这是一篇不看会后悔的配色干货!》

栅格 | 让设计裂变升级,这是你了解栅格系统的原因

栅格系统不仅仅能够帮你更好地规整和梳理产品布局,它最大的功能在于它是「动态」的——当屏幕尺寸和界面大小发生改变的时候,整个设计能够随之变化自适应。它是一个让设计价值「规模化」的重要技能。掌握栅格系统,从这篇文章开始吧:《看不懂不会用的栅格系统,这篇帮你彻底掌握它!》

图表 | 同样的数据,为什么设计老手呈现出来的就是不一样?

你必须得承认,同样的素材和基底,到了不同的设计师手上,会呈现出截然不同的样子。设计过100张图表之后,高级设计师 William Bengtsson 梳理出了一套完整的图表设计方法,从基础图表的绘制到功能和数据的优化呈现,再到细节的优化,构成一整套专业设计法。如果你正在纠结数据和图表的呈现方法,千万别错过这篇文章:《设计100张图表后,我总结了这些实用技巧!》

PPT | 这份言简意赅的PPT指南,比你想象中有用得多!

设计师一样要懂PPT设计。向谁学习,如何学习,整个学习路径应该是怎样的?这篇篇幅不算太长但是切入精准的文章,言简意赅的呈现方式,让全文几乎没有废话,颇为难得。从思路到方法、工具,这篇文章可以说是一篇浓缩精华:《做过多场PPT培训后,我把最精华的6个章节整理成这篇干货!》

排版 | 治疗甲方「放大综合征」的排版优化术!

「放大」早已不是设计圈的都市传说了,它是设计圈的噩梦。来自甲方的意志简单清晰,但是总觉得难以解决?其实答案并不复杂,它是有解决方案的——打破此时关于「大小」的思维桎梏,真正客户觉得不够大的原因是它不够「聚焦」。具体怎么落地呢?看看 K先生的秘诀:《甲方说:放大!再放大!我该怎么办?》

小程序 | 最热的微信小程序设计指南来了!

腾讯官方的小程序设计规范依然停留在2016年,而最新的设计已经迭代了一波又一波了。所以,@孙青Cynthia_Sun 的这篇源自实际案例的小程序设计规范就显得非常具有价值了!它是最贴近当下设计需求的小程序设计规范!需要么?收藏吧:《参与多个项目后,我总结了这份可能是网上最全的小程序设计规范》

四、屯干货

设计素材谁会嫌少呢?

干货 | 5月份的设计圈干货从超有看头!

特别推荐这一期干货中的 CC版权免费图片搜索引擎、Milanote 协同创意笔记应用以及 FlowCV 简历生成器!当然,其他的素材也一应俱全,图标、字体、教程甚至前端所需的代码片段也都不缺!戳这里获取:《快戳进来看看!2019年5月设计圈超实用干货大合集》

五、涨姿势

世界真奇妙,新奇独到的设计姿势真的不少。

求职 | 世界这么大,这些邪门的招聘启示你肯定没见过

一个公司哟多不靠谱,招聘启示就有多奇葩邪门。美丫姐的这篇文章是之前《求职中的自杀行为大赏》的姊妹篇,开眼界涨经验,引以为戒:《那些年,让人吐血的设计师奇葩招聘》

AI | 这个世界太疯狂,人工智能的玩法让你猝不及防!

人工智能的玩法越来越多了!以往纯手工的 PS 换脸邪术如今已经步入工业化生产的阶段,AI 一键生成你还要啥自行车!但是,这不是全部。这篇文章中的6个人工智能工具各有所长,得了解一下:《体验鹿班前,先来这6个人工智能网站感受 AI 黑科技!》

毕业展 | 港澳台的设计系学生,到底设计力几何?

每年的毕业展,是属于设计系学生展现自己设计能力的「汇报演出」。看惯了国内设计专业的毕业展,那么香港、澳门、台湾的设计系同学们的设计作品到底是个什么水平呢?看看美丫姐来自前方的报道:《大陆19届毕业展海报实力平平,港澳台能不能扳回一局?》

改版 | QQ语音进度条升级,背后的设计过程有多惊艳?

令人惊艳的产品,背后通常藏则更加令人惊艳的过程。QQ 的语音进度条的设计,就是这样一个典型。从痛点的挖掘,到设计要点的把握,再到落地和呈现,呈现出来的是一个大厂应有的素质。这次改版重设计背后值得学习的知识点很多,别错过:《129万人夸奖的QQ语音进度条,是如何设计出来的?》

六、面对面

每个人都是独一无二的,每次相遇都弥足珍贵。

专访 | 离开体制,独自学习,成为高手,他活成自己向往的样子

如果你经常翻看Dribbble,那么一定翻到过越南设计师 Hoang Nguyen 的作品。这些精彩设计作品背后,是一个自学成才的优秀设计师。远离父母规划的安稳的体制内的工作,独自奋斗成为一名专业、向上的独立设计师,他的经历和创作过程,有哪些独一无二的东西?也许,他的故事对你有启示;《优设专访!离开体制内,成为霸屏Dribbble 的设计师是如何成长的?》

七、一句话

心里的爱,要说出来!(如果不知道向谁说,或者不敢说与Ta听,不妨在留言区说给我听,我会用心看)

优设大课堂

Source: 优设网 – UISDC | 19 May 2019 | 11:59 pm(NZT)

7000多字,让你全面掌握交互设计输出文档的撰写方法

交互输出文档的作用

文档这个东西,我们又爱又恨,爱的是它能够记录并且在工作中让大家高效的协调合作,恨的就是很多人对文档嗤之以鼻非常敷衍,以至于文档不但没有起到它应有的作用,反而成为了一个不负责任的借口。所以一份合格或者优秀的交互输出文档对于一个项目的流转以及团队的配合来说是至关重要的。交互文档的主要利益相关者通常是以下几个角色:交互、产品、开发、UI

交互

首先优秀的交互文档必须在交互组内部进行过审核,包括一致的撰写标准和模式的使用,一个比较规范的交互设计组对于交互的撰写标准也是有严格的规范的,以及在什么情况使用什么交互模式还有组件库的调用都会有详细的说明,那么你的交互输出文档就必须满足团队设定的规范。

其次对于其他交互设计师来说,你的设计方案中是否会出现其他人负责的模块,那么在评审的时候需要同步,虽然交互输出文档对于其他交互来说不是直接受益人,但是在团队同步过程中也是非常重要的。

产品

每个公司对于文档的要求和规则不一样。小公司可能没有交互设计这个岗位,那么可能产品连prd文档也没有,仅仅只是一个简易的需求说明文档,就更不用说针对交互规则的说明文档了。

很多有完善规模和流程的团队不仅会有详细的需求说明文档也有很完善的交互说明文档。我们首先要明确的一点是那么多文档最后是给谁看的,一共在项目中会有多少文档产生。

通常产品经理会在项目初期做一份prd文档(Product-RequirementDocument,需求说明文档),这个prd文档主要是给业务方、交互和开发看的,在这个文档中需要包含一些业务规则以及交互规则,所以交互的输出文档是需要和产品的prd文档合并的。

当然如果你是一位很有自驱力的人,那么你可以自己推进需求并落地,一个人就可以完成prd文档的撰写和需求的落地了。

开发

特别想给各位提个醒,在开发需求评审的过程中,请一定记住你们评审的目的,开发同学也要注意,请把重点放在需求是否能实现以及开发相关的地方即可,请不要考虑为什么要这样做,或者你觉得应该怎么设计,一旦进入了开发对需求和设计的评头论足那么这个会议效率就相当低下。专业的事情就交给专业的人去做吧,可以私下讨论但不要在评审会上各抒己见。

交互输出文档对于开发的作用就是,开发可以更好的还原该功能中交互的跳转以及逻辑,所以我们尽量把交互规则写明白写详细,比如按钮在press和default时候是否样式会有变化,或者页面转场的方向,这都是一些细节,减少不必要的低效沟通。你会发现有些时候为什么开发总是来问一些规则,就是因为文档中没有描述准确,所以开发和交互都需要花时间去同步这个细节。

所以这个也非常考验交互设计师对需求文档撰写的功底,并不是图片文字随意摆放就可以的。和开发合作时也是一项内部的体验设计,你把文档写好了,开发看起来也舒服,满意度也高。如果是一堆文案,连基本的对齐都没做到的话,谁来看都会看不下去。

UI

交互输出文档对于UI来说,作用就非常简单了,但是这里也会碰到问题,那就是交互同学只需要把信息的层次表示出来即可,千万不要画到连视觉同学都没有发挥余地的程度。所以为什么现在UXD体验设计那么火,就是因为交互和UI其实重合度是很高的,只要有智能化组件库和工具做支撑,那么在交互和UI的设计流程中,时间就会大大降低。

交互输出文档的内容

在这里,我们就将整个prd文档的内容给大家分享一下,不仅仅是交互需要输出的部分。因为一个高阶的交互是需要能够独自产出prd文档的。然后不同的公司对与文档的要求也是不同,大家做参考即可。

一份基础的prd文档主要由这几部分组成(其实就是这个需求的来源以及推导过程和如何落地的说明):

  1. 项目概要

需求背景

这个是一个项目最重要的部分,可以说背景没有搞清楚,后面都可以不用做。这个指的就是我们做这个需求的价值和原因。比如我们app中业务方(运营)需要做一个扫一扫功能,那么这个功能首先我们就从业务价值和用户价值两个方面去评估,根据对业务方的沟通之后我们发现扫一扫功能将会在周年庆的时候通过物流包裹上的二维码,让用户进行扫码参与活动这样的玩法。

所以这个需求对于业务方来说是一个转化手段,通过扫码参与活动-领券-消费,确实是一个不错的玩法,但是大家如果只盯着眼前的问题或许就不够了,比如当周年庆结束之后这个功能还有什么用,他在以后的规划中的存在是怎样的。在所有的包裹中印上活动的二维码这个时间周期和成本有多大。

其次,对于用户来说,扫一扫并不是帮助他们解决了某个问题,而是我做了一个东西,同时搭配着这个功能让你们去使用,对用户来说是一个很可有可无的功能,如果线下包裹上的二维码破损了也是非常影响体验并且是不可控的。那么综上所述,既然要做一个临时的活动用其他的方式会不会更好?

所以在这个文档中的第一步,首先就是要确定需求的背景、价值,也就是说,你这个需求是怎么来的,比如再来讲我们一个店铺的优化项目,在这个项目中,首先我们必须在评审的时候说清楚我们为什么要对其进行优化和改版,一定是出现了或者我们定义到了某个比较严重的问题,这边大家对我们app业务可能不是很了解我就简单说了,就是个人中心和店铺营销场景重合过多,并且卖家的同时可以买和卖两个场景存在,所以店铺页通过我们的数据分析和用户的访谈我们发现了一些机会点,以及我们必须突出一个核心场景让用户有明确的分辨。

另外就是背景的描述也可以带上你的调研结果和分析,比如之前我们做首页优化,我们观察了近5个月的数据,都呈现下降的趋势,所以之后有进行了一系列的访谈和用户体验地图分析才有了这个需求的背景产生。

需求目标

目标很好理解,就是我们希望通过这次需求迭代达到一个什么成果,比如我们之前做过一次整体的体验优化改版,那么我们的目标就是减少用户的流程跳失、提升整体体验满意度、提高用户的任务转化率,其中我们做了一个商品关注的功能,由于是限时特价商品所以是限量的,在规定时间进行抢购,为了让用户的使用场景统一我们打算在应用内做一个商品关注功能,所以在这个需求的初期,我们对这个功能的目标和预期是提升xx百分比的转化,提高x%比的gmv,提高用户对关注商品下单的效率和满意度,之前很多用户想要购买商品需要自己在手机端设置闹钟,不方便。所以这个功能的一个目标就是解决用户场景迁移的问题。设定目标之后,就是为了在上线后对其进行复盘和数据跟踪还有用户跟踪。

可以用一句话来描述:针对什么用户在什么场景下解决用户的什么问题,达到什么目的?

需求范围

需求范围也相当于范围层,指的就是在该需求中我们需要做哪些相关功能以及功能涉及面。举个例子,之前说的扫一扫功能,不同的产品定位对于扫一扫功能的要求也是不同的,比如说微信在扫一扫功能中承载了:扫一扫、相册、封面、街景、翻译、手电筒等诸多功能,再比如淘宝,有扫一扫(ar、拍立淘)、相册、历史、帮助、手电,这说明了不同产品对扫一扫功能有不一样的要求,所以在需求范围内我们需要把本次需要做的功能进行描述,并且该功能是否影响其他功能的使用和对整个产品的影响范围。并且我们也会讲所需要的功能进行拆解和优先级拆分,在表格中编辑。

调研分析

调研分析其实就是为我们第一步背景和价值做准备,由于汇报方案和评审,或者在项目推进时,我们需要有相应的论据来支撑我们方案的客观性,所以在这一板块中输出的结论就非常重要,比如之前的首页改版,经过用户研究小组的访谈和数据分析得出相关的结论,通过埋点找到相应板块的点击数据和异常点,然后再进行一系列的问卷和访谈研究,找到结果,都是为了辅助项目的背景以及在评审中大家对需求价值的灵魂拷问。由于数据和调研结果比较敏感就不过多放了。

版本日志

日志是一个非常重要的组成部分,做过开发的同学都知道log 的重要性,当我们跑不通的时候我们都会去检查log,然后多测试几遍可能就找到问题所在了,其实我们的版本日志的作用也是这样,但是一个是对自己来说可以记录自己的工作过程,还有思路的变化,第二就是对外,包括和需求方的讨论,会议的纪要等。

要注意的是会议纪要在备注中需要详细说明,以做证据。同时也要邮件通知相关人员和负责人。可能有些公司还会放一些评审记录,比如各部门负责人对方案和需求的建议,业务方和技术负责人的一些建议也会放在项目概要中,而这个prd文档也可通过内部服务器进行实时更新和保存,如svn。方便大家对需求的进度和迭代有一个直观的追踪。

项目成员

这个就不用多说了,产品、运营、交互、视觉、开发各司其职,照相馆人员即可,就不至于当项目开始进行了人员分配还没到位就尴尬了。

  2. 需求方案设计

业务、任务、界面流程图

有些同学不是特别明白业务流程图和任务流程图的区别,这边给大家简单介绍一下

业务流程图:

意思就是在这个需求系统中,相关利益者的业务关系,任务信息的流向的一个图标。比如这个简单的例子,用户在点外卖这个场景中,相关的利益者有用户、店家、外卖员三者,那么当用户开始触发流程后,这3者在这个流程中就会各司其职,而业务流程图也很明显的告诉大家所有联动者的指责和流程走向。

任务流程图:

用户在具体执行某一个任务时候的工作流程,以及其核心任务的操作步骤,比如在登录注册这个任务中,用户需要进行一系列的操作,在这个流程中用户的操作引发的系统判断需要详细说明。

界面流程图:

界面之间的跳转关系和路径,在这个流程图中,我们不需要吧详细的说明写上,只需要将需求中涉及到的页面跳转进行叙述即可。

相关说明和规则

接下来就要开始我们交互文档最为关键的部分了,如何书写交互说明,以及交互说明应该包含的内容。

如何书写交互说明及包含内容

1. 全局思考

在做交互方案也就是我们画原型的时候会思考一些问题:

整体思考

用户权限

根据不同用户的权限对该需求进行检查,比如普通用户、vip用户、内外网用户、游客用户,在登录未登录时候对需求内功能的使用是否有影响

登录方式

用户登录和注册、终端的兼容,不同方式注册的用户是否需要补填相关信息等等

流程

2. 内容、状态和显示

内容的获取来源

例如下方的图片为例,banner的图片来源和发现feed流的图片来源肯定是不同的,那么就要写清楚,图片或者数据的来源是来自于用户的上传还是系统后台的配置获取;并且获取的方式是如何的,是需要手动下啦刷新还是切换页面自动刷新,还是设定时间自动刷新。

字段、图标是从接口获取还是前端写死,以及气泡展示的规则等等。另外一张图片可能用在多个地方,而可能呈现的尺寸不同,所以在涉及到相关图片使用时要注意剪裁规则和图片的来源。

缓存机制

图片以及一些资源通常我们需要对其进行缓存,有些同学不清楚什么是缓存,缓存是在计算机上的一个原始数据的复制集,一般来说需要缓存的内容是通过浏览产生的,包括图片以及cookie等,浏览过的视频和广告也会被缓存。同时在不同的网络环境下缓存的时间标准也不同,无网络那肯定只能读取缓存文件,wifi环境下缓存时间可设置的短一些,而流量环境下时间就可以设置的偏长。

状态

状态大家都应该都会写,主要包含的就是初始状态(冷启动无缓存第一次进入)、空状态(无任何内容比如空的购物车)、常规状态、异常状态(网络中断、接口报错)还有过期状态等。

显示

数据和内容的极限值,最大和最小,比如粉丝和关注的数量,小于1万人则显示完整的数量,大于等于1万小于11000则显示1万,大于11000小于12000则显示1.1万,这样的方式。另外包括标题极限为一行显示,超过部分的显示规则。敏感信息、错误提示以及超时的信息提示。金额的格式使用¥xxx还是xxx元,小数点保留的规则。日期的显示格式是xxxx年xx月xx日还是xxxx-xx-xx还是xxxx/xx/xx等等。

3. 反馈、提示、手势

反馈和提示的样式有很多种,一般反馈指的是用户对某一个控件进行触发后获得的反馈,比如按钮按下的反馈,以及之后收到的反馈,是进行跳转还是给用户提示,采用的是模态还是非模态的提示。比如点击关注某个人的按钮后会提示关注成功,比如退出某个图文编辑会二次确认是否退出,再比如抖音长按后出现的3个操作反馈,还有支付成功后的动效提示、恶意多次操作后的提示等等

如果有手势交互也需要说明,比如滑动后内容置顶、拖拽、左右轻扫的tab滑动、重按的3dtouch等等。

4. 加载

使用模态还是非模态,如果是模态加载请尽量使用情感化设计来减少用户焦虑。如果是非模态,根据信息呈现和体验采用分步加载还是预加载还是智能加载。如果是分布加载就选择先加载资源较小的内容,再加载图片,可以先将图片模糊化粗渲染给用户呈现,包括在浏览信息流的时候的分页加载也是可以的。如果更智能化一些也可以预判用户的行为进行内容加载,例如当用户在某个图文前停留时间达到某个值后就预先给用户加载里面的内容。

加载的全局方式在方案中需要考虑,页面加载、下啦刷新等等,需要统一。

5. 环境、设备与场景

不同设备、厂商的不同版本

都会影响到方案的落地和用户体验这个要非常注意。比如一些交互控件我们在6、iphonex和大屏幕尺寸上使用起来效果很好,但是小屏幕的时候这个交互控件显得就很难受,所以需要仔细斟酌用户的使用情况。另外还有横竖凭情况的交互方案是否兼容、是否需要与其他硬件进行兼容。

白天和晚上是否需要做不同的风格设计,以及在是否需要给用户遮挡隐私的功能。

6. 文案

文案这点很多设计师都忽略了,你们有没有听说过一个叫文案设计师的岗位。其实文案在我们产品设计中是非常重要的。首先一个产品的文案对应的语气和产品调性也是相关的,就好比我们说产品有它自己的性格一样,另外文案的使用直接就影响用户对该信息的理解,比如一个对话框的文案是:确定退出吗?下面会有两种不同的选择,一个确定,一个是退出,大家觉得哪个比较好?还有就是不加「吗」,就变成了:确定退出?这样描述出来的语言给人感觉很冰冷,甚至有一些威胁。

所以首先我们的文案是否有温度,和产品的个性是否相匹配。其次文案的表述是否准确和通俗易懂,比如你告诉程序员一句话,帮我去菜市场买西瓜,如果有西红柿,帮我买两个,你会带什么东西回家?程序员版:if(看到西红柿)西瓜等于2;else 西瓜=1。buy 西瓜。条件:看见西红柿 执行命令:买两个西瓜一语道破版:其实吧,看到西红柿呢是卖两个西瓜的触发条件…没看到就买一个西瓜,看到就买两个西瓜。所以这里出现的不仅仅是程序员的思维和我们的差异化,也说明了一句话没有表述清楚所带来的问题是很大的。

另外就是文案用语的一致性,在整个产品同样的场景中,我们需要统一文案用语。

7. 常见控件

具体见下方列表

8. 撰写方式

作为一个设计师,不管是否在做视觉,我们都需要对文档有一个美化意识,如果你的文档非常凌乱,那么在别人眼里就会觉得你是一个比较粗心大意,不够负责任的人,所以我们尽量在做交互输出文档的时候也画的美观一些。

目录

首先在目录的撰写时候要进行分类,通常我做的时候会对该需求以页面父子集关系进行创建,父集为核心页面,子集为其下的相关子页面,这样页面的流转和归属关系就不会搞错。

说明

在撰写规则与说明时可以通过标签法进行标签说明的撰写方式,同样在视觉上保持美观,对比与对齐的运用,具体该写什么东西上面已经说明就不赘述了。除了交互规则以外,高阶的交互设计或者产品经理还需要补充业务规则,比如排序、商品抓去规则、权重、算法、活动规则等等这里就不展开说了。

总结

文档的形式有非常多种,针对不同的公司和产品也需要作出相应的调整,能够满足需求和方便协作,目的就达到了,我们并不希望过多的时间花在文档的撰写上,而是希望大家在做设计时多思考业务,本次分享就到这里啦~

欢迎关注作者的微信公众号:「应谋鬼计」

优设大课堂

Source: 优设网 – UISDC | 19 May 2019 | 10:20 pm(NZT)

太强了!QQ 20周年展的策划与设计执行全过程!

概述

QQ 20周年,是互联网产品长青的一个传说,也是家喻户晓企鹅IP形象的成长,同时也代表了鹅厂精神的坚韧与奋进。即便已经陪伴大家20周年,但我们依旧怀揣初心,保持科技改变生活的热衷。应运而生我们设计了太空企鹅探索科技作为本次20周年的品牌理念,来寓意新的里程碑到来。就像宇航员勇于探索未知宇宙知识一样,QQ带着初心不断保持变革与成长,为用户提供更具科技力与创新的服务!也寓意鹅厂不断探索未来与科技向善的愿景!

Logo设计

我们在设计的第一阶段,logo设计,就是围绕「有趣和科技」来展开发散设计。我们决定从数字「20」开始入手,把QQ和20不断结合,同时融入宇宙太空元素,寓意QQ不断的对外探索,从多个维度来看世界,寻找有趣的内容。我们为了贴合「宇宙探索」这风格,为这次展览设计了专属徽章,徽章设计沿用了太空的概念,结合星球,星空,宇航员等科幻元素。简约的几何形状和大胆的配色贴合「QQ更好玩」的年轻潮流气息。

概念设计

1. Space QQ

太空QQ的太空服设计指的是科幻电影如《星际穿越》和《火星救援》中的太空服,我们也将最新的时尚潮流,2018年以来运动鞋领域最为明显的趋势,将 ugly & oversize 的潮流风格注入到运动鞋的设计当中。这种将最新时尚潮流与太空服相结合的新型运动鞋,使整体设计看起来时尚而风趣。如果没有它,太空服可能只是一个浅显的概念。

△ 太空QQ创意草图

△ 运动鞋设计草图

△ 3D原型

2. QQ X PUPU

本次设定,由两只企鹅背靠背组成,20周岁的QQ与1周岁的PUPU,鹅厂拥有着各种企鹅IP形象,除了经典的企鹅QQ,还有各种其他特色企鹅,包括PUPU,BabyQ等等,同时PUPU来自外太空也是企鹅FM产品的主形象,经典企鹅QQ携带了新生代PUPU共同探索科技太空,寓意企鹅在不断创新与拥抱新生代相互合力,为年轻用户提供更具科技力与社交娱乐化的服务。

最终设计

8米QQ模型制作

对于实际生产出这个巨型模型是个大挑战,我们先利用电脑三维模型生产出8米高的泡沫模型,反复检查生产的泡沫模型是否和设计模型一致,不断的打磨调整,待到确定泡沫模后开始翻模工作。

先给泡沫模喷上泥巴水,便于脱模,之后喷上石膏水,并加入麻丝增加石膏的牢固性,待石膏模晾干,把石膏里的泡沫模掏出后开始往里面涂一层泥巴水(便于后面玻璃钢脱模),然后涂上树脂和纤维布/毡,干了之后砸烂石膏模,里面的玻璃钢模型就出来了。

玻璃钢定型之后给内部焊接钢铁骨架,作为加固作用。刚脱模的玻璃钢是非常粗糙的,于是对玻璃钢的外观进行打磨,使得表面光滑和调整细节,打磨完成后开始批灰和上底色,前后三次,为的是填补空隙瑕疵使模型更逼真完整。接着我们便调模型身上的颜色,在不断尝试中调出最接近效果图的颜色,开始逐步上色。

上色完成后再喷保护漆防止褪色,待模型的漆干后清洗整个模型,为贴上专属贴纸做准备,接着确定贴纸位置并逐一贴上。最后开始搭建安装,因为在搭建过程中模型会有磨损,搭建完后再做最后的修补工作,最后巨型QQ模型完美地呈现出来。

贴纸设计

配合QQ20周年庆,我们要给8m的巨型QQ模型搭配上了贴纸设计,以slogan 「QQ更好玩」 为设计的出发点,希望把有趣好玩的态度注入各个品牌中,为品牌logo严肃的视觉带来玩味感和潮流感。同时配合巨型QQ宇航员的造型,我们在设计贴纸时参考了航天飞机,科幻机器等机械图案元素,每个品牌的设计方案除了有趣值得玩味外,同时需要贴合宇宙科技探险的风格。

我们针对这个大方向再进行了几轮细化,选出能代表各个品牌的最终的设计方案,并把贴纸模拟在太空QQ模型上反复测试贴纸最适合的位置,让贴纸和模型的整体风格可以完美契合。通过各个品牌的logo再设计贴纸和太空QQ的碰撞,把品牌推广做到最大化。

搪胶玩具设计

作为QQ20周年庆的惊喜,我们制作了与巨型太空QQ同款的迷你搪胶玩具,在这次玩具设计上我们加入了小机关,在玩具内部放置了小磁铁,使得QQ和PUPU可以方便拆卸组合。

同时为其设计了专属包装盒,包装设计从「太空宇宙」的角度出发,以黑色为主基调,图案印花设计选用了太空QQ来进行设计,把太空QQ模型线体化,配合QQ20周年logo进行设计,利用烫金工艺与醒目的图形搭配,更有效的展现了QQ年轻化的品牌特点。同时为了减少后期生产制作之间的沟通误会,我们同期将几个较重要的角度的包装3D效果图快速渲染出来,有着非常直观的参考对照作用。

品牌物料设计

1. 海报设计

设计QQ 20周年展的宣传物料,我们采用了最能代表这次展览的太空QQ IP为主体,作为本次展览的专属元素,太空QQ贴近科技,同时又具有趣味性和潮流感。我们结合了太空探索的特性,提炼出宇宙元素作为宣传的内容,让海报设计具有更多内容可看性和观赏性。

2. T恤设计

配合QQ20周年展,结合宇宙太空元素,并从QQ 20周年logo图形中延展设计出各类代表图形,正面简洁直接地显示出本次主题,把醒目的图形放置于T恤背后,利用坐标轴和经纬度的信息图案配合各个抽象化的宇宙元素,增加T恤设计的科技感,更明确地展现了科技向善的愿景。

QQ20周年展览

QQ联合深圳福田星河COCO Park 举办了「QQ20周年主题展览」,展馆外形模拟宇宙太空站,以太空白灰色为主调,搭配简洁的立方体造型,白色灯条勾勒大门,并以QQ20周年专属徽章做门面,科技未来感扑面而来,就如大型QQ太空站坐落于地球。

展馆大门旁的墙上安置了颇具科幻气息的全息投影装置,上面展示着QQ在不同时期的形象以及20年关键大事记。代表着不同时期的QQ形象用全息投影的方式展现出来,从最开始的胖QQ到现在的新版QQ,让你一眼了解QQ演变史。中间放着QQ历届各个跨界Figure展示,总有一款捕获你的心!

同时本次展览还和% Arabica咖啡跨界合作,% Arabica咖啡展台设计简洁透气与QQ20周年展览风格完美融合。一边喝美味咖啡,一边畅游展馆,两全其美。

蓝色发光的隧道科幻神秘,一进去马上感受到了超强的氛围感,仿佛时光碎片擦肩而过。用QQ扫描墙上的二维码,立刻生成你的专属时光隧道「QQ个人轨迹」,各种瞬间涌上心头。

联合天天P图,用13个LED屏组成了「复古头像画廊」。走进互动装置小屋里,往镜头前一站,稍作等待后,以你的形象即时合成的13个复古头像就会出现在面前的13块屏幕上,体验即时「变脸」效果。让自己的头像和曾经用过的QQ经典头像合二为一,形成专属的复刻版头像海报。

结语

QQ20周年展不仅包含了展馆设计,还包含了市场营销,运营活动,周边商品等多个设计环节,环环相扣,缺一不可,一起构建了整个QQ 20周年展的设计体系;展览设计了太空企鹅携带着新生代PUPU共同探索科技,寓意鹅厂不断创新探索与科技向善的愿景,为年轻用户提供更具科技力与社交娱乐化的服务,在打造「QQ更好玩」的路上奋力前行。

欢迎关注「腾讯ISUX」的公众号:

优设大课堂

Source: 优设网 – UISDC | 19 May 2019 | 9:16 pm(NZT)











© 澳纽网 Ausnz.net