4月15日参加了一个设计分享的线下活动,其中一位分享的老师是携程UED高级视觉经理吴佳敏老师,讲了视觉设计层面的一些技巧和方法,作为小白的我感觉受益匪浅,于是回家便下单了她写的书《视觉链》。
今天刚刚看完一遍,感觉内容分类细致,干货满满,能为刚入行的视觉设计师打下一个比较好的基础。不过也有些一带而过的内容,大概是因为书中的内容太多不便于详细讲解,不过也是给阅读者打开了一扇大门,不是都说师傅领进门,修行在个人嘛。
下面是对本书中对我最有帮助的内容的一个记录,这样也算有输入有输出啦。
一、视觉信息层级
当用户在浏览一个页面时,设计师的理想状态是让用户按照页面设计的顺序来读取内容信息。而对用户来说,读取内容的方式和顺序只会按照他个人的喜好,如阅读新闻、看美图或者查找他需要的信息等。在这种情况下,就要求界面能抓住主流用户特征,将重点“推送”给他。而这也就是视觉设计师要建立良好的视觉层级给用户的原因。
界面的层级布置是由功能、操作、内容等按照需要的优先级进行排列组合的。
建立信息层级的方法
位置:当眼睛偏离中心时,在偏离距离相等的情况下,人眼对左上的观察最优,依次为右上、左下、右下,因此左上部和上中部被称为“最佳区域”。
眼睛沿水平方向运动比垂直方向运动快且不易疲劳。 因此如果想要体现并列关系,左右排列更合适。
大小:重要的元素大一些,并且要与不重要的信息的大小拉开差距。
距离:降低背景透明度,拉开视觉距离,产生空间层次感。或增加投影,使重要元素好像与其他内容不在同一个平面。
内容形式:图片比文字更易吸引人的视线。
色彩:暖色比冷色给人距离更近的感觉。高反差的颜色比低反差的颜色更吸引人的视线。
二、视觉稿的自我审查方法
将设计稿在PS中进行去色-反相-高斯模糊可以制作一个简单的界面热点效果,从而检查界面的层次是否合适,布局是否平衡,从而改进设计。
三、图标
1.图标类型分为表意功能性icon和标志性icon。
表意功能性多用于标签、标题、按钮、导航、信息提示等。以线性图标和面性图标为主。
线性图标的层级稍弱,不会抢了其他内容的风头,且用在导航上能让用户快速识别内容。
面性图标层级较高,能让用户一眼看到每个功能的不同。
层级:彩色面性图标>单色面性图标>线性图标
标志性icon多用于手机桌面、电脑桌面、移动应用的标志。
2.图标的绘制需要统一体量感
即在同样宽高的情况下,在这个面积里占有的比重大的icon会比比重小的icon在感觉上更大,因此为了感官一致则需要稍微缩小比重大的icon。
四、竞品分析的方法
1.选择核心功能相同的目标作为竞品
2.从界面层级分析竞品,通过对比以及前面提到的设计自审方法改进界面。
3、从界面风格分析竞品。从色彩数量、色彩占比分布、层级、字体、字号数量、icon和按钮风格,整体视觉设计风格分析。取长补短。
最终目的是通过竞品分析提高产品自身的核心竞争力,而核心竞争力往往体现在差异性。
以上就是今天的笔记,更多内容请阅读《视觉链》~