随着移动端互联网时代渐渐发展向成熟阶段,用户也慢慢揭下了互联网产品神秘的面纱,他们开始预知某个行为将会触发什么交互效果,某个icon大致代表着什么意思,我们设计者因此有了更大的发挥空间,更大胆的尝试。由此,设计语言开始了一轮又一轮的迭代。
这次我就来简单总结一下当今的设计语言做了哪些主流的迭代,以及分享一些简单易学的设计技巧。
趋势1:直男癌的设计
在没有把产品放到用户眼前的时候,用户不会知道自己想要什么,同时,这意味着我们的设计,要让用户第一眼就知道,这是什么,接下来我能做什么。
谷歌地球最近又进行了一次LOGO改版,从2001年到2017年,总共进行了四次改版,从图形我们可以清晰的看出,设计越来越趋向于轻量,扁平,直接。两个颜色就能认知的东西,那就避免第三个颜色。没了高光,投影等质感的表现,看似给设计师节约了不少工作量,实则是设计水平的进步而产生设计语言的迭代。用更少,更肯定的设计,而使用户一眼认知。
UI中的体现
苹果公司对UI的趋势起到非常重要的引导作用,ios6到ios10的的迭代,从轻质感到扁平化,再到如今的大而简,简而精。又或谷歌推出的代表性MD5.0风格,高饱和度的用色,通过卡片而体现更清晰的信息层级。
01、信息层级区分更直接
做为一名直男癌设计师,我想让你一眼看到的是我所要表达的重点,其它一切都退后。方便理解可以把设计想像成奥运会,冠军与亚军的区别可谓是天壤之别,而谁是亚军谁是季军好像就没有多少人记得了吧。所谓冠军就是设计中的第一信息层级。亚季军就是第二三层级。
02、信息段落间距更透气
直男癌设计师绝不准许信息段落间距的藕断丝连,分就分的彻底而有尊严,合就就好好过日子。从前一屏信息的承载量似乎与交互效率扯上了直接关系,一目十行真的就效率高吗?如今的产品越来越懂得看得清与看得见的区别。用户一眼看懂才是硬道理。
03、用色更加肯定
传统设计总与高级灰联系起来,朦胧感,神秘感使用户感觉:哇,高大上!而如今UI设计用色更加肯定,对比色和互补色的使用在近几年越来越频繁的出现在视野,这也是设计进步的一种体现。节约用户了解时间,吸引用户眼球。
趋势2:把用户想的聪明一些
在用户越来越了解移动端产品的同时,他们看见头像就会联想到个人中心,看见房子会联想到首页,看见卡片同样会尝试左右滑动。这就使我们现在要把用户想的聪明一些。
01、能用Icon解决就别用文字
在移动端页面中,Icon的作用除了指引交互,更有视觉美观,增加用户点击欲望的作用。该使用Icon若使用了文字会使界面没有细节,没有设计感。
02、设计别太满
很多新手设计师喜欢把设计做的面面俱到,把用户想象成成没有思维的对象。其实给用户一些思考的空间,可以让用户有参与感,反而做的太满会适得其反。
03、巧用交互手势
从前交互手势较为单一,点击,滑动。如今交互手势越来越丰富,从功能上看:
横向滑动赋予的功能有:删除、平级切换、返回首页,,开关,滑块,附属功能。
竖向滑动赋予的功能有:下拉刷新,底部加载更多、全屏、上下篇切换、返回上一级,附属功能。
拖动是更大力度的滑动,常见的是拉出附属功能或其它隐藏内容。
双指收缩、拉开常见的功能是:图片、字体放大,亮度调节,打开关闭,新增删减等。
按住并拖动一般用于自定义(改变顺序,加入,拉出等)。
趋势3:品牌调性
移动端产品如此趋同的情况下,品牌调性显得越来越重要,如何让用户记住,除了掌握需求痛点,对设计师来说,品牌调性如何深入人心,越来越值得用心去考虑。
01、产品属性与标准用色
标准用色是一个产品给用户的第一感觉,产品属性与色彩心理不可差异过大,想到吃喝玩,一般暖色居多,而工具技术类产品就冷色居多。另外越大体量产品用色较轻,小体量产品用色较重。这就可比喻为胖的人普遍想穿的显瘦一些,而瘦的人相反。
02、产品形象吉祥物
看到企鹅,会想到腾讯qq,看到鱼,会想到斗鱼直播。看到大象,会想到印象笔记。看到鹿,会想到UC头条... 通过某个动物或者其它吉祥物使用户记住产品是个可行的办法,吉祥物多在引导页,加载状态,空状态,弹窗等地方出现,增强品牌印象。
03、Icon与button元件统一
上面也提到了icon在一款产品里的重要性,icon风格的统一虽然是UI设计的基本常识,但是这里还是要强调一下细节,线性icon又分尖点与圆点,断点与非断点,复杂性又有区分。面性有纯面性,错位填充面性,线面结合等...除了icon的统一,button与界面元件的统一也需要注意,如果标题栏使用渐变色,那么button也需要渐变色去呼应。如果页面中button使用圆角,那么弹窗butten同样需要圆角。
04、运营与产品调性的统一
做运营活动是增加产品流量的惯用手段,增强产品识别性,运营活动更要做出自己的调性,如今的杜蕾斯海报,已经从产品调性升级成全民热议的热点,再比如Apple的极简风格,从产品到宣传广告都遵循一个极简原则。
趋势4:表现手法不受局限
Icon可以不只是icon,button也可以不只是button。图片可以是3D,也可以是gif。用户可以接受任何想象不到的表现方式,设计没有圈。
01、设计不必循规蹈矩
产品严格按照规范去做,当然节约开发成本。可是...开发成本关你什么事?页面好不好看才是设计师最要关心的问题。规范是死的,设计师是活的。敢于打破规范,设计才能进步。
02、软件是思维创意的建筑师
固然软件不重要,思维创意排在第一位。然而如今移动端产品已经不仅仅满足于图片了。如果还靠一手PS打天下,总有一天会力不从心。
软件不需要深究,基础操作懂已经足够。打破学习新软件的恐惧感,会有利于突破设计瓶颈。开始学习吧,就比如从我前面的交互小教程
学起...
03 设计没有圈
所谓设计师的成长,就是一步一步的打破圈圈。有些颜色不敢用,有些排版不敢试,只是还没有成长到那一步。所有的设计技巧,再或设计思维都只是给新手刚上路的设计师一些善意的指引,要想突破,只有靠自己掌握设计规则的同时,打破规则。排版无非点线面,色彩无非红黄蓝。设计没有圈。