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