《规律与逻辑·用户体验设计法则》 学习笔记5

相比文字而言，图标可以让人在更短的时间内认知并了解信息，并且能大大提升视觉美观性；尽管界面设计中一般都选择系统默认字体，但一些运营活动风格的界面中，字体设计也是非常重要的方面；一个好的界面不仅要求整体布局合理，还要注意细节的处理。

该部分记录了在用户界面设计中的图标，字体与细节的规律。笔记摘自《规律与逻辑》。

用户界面中的图标

使用图标比使用文本更具优势，因为图标简单，醒目且友好。但需要注意，如果图标使用不当会造成负面影响，比如在敏感位置使用识别度不高的图标可能会诱导用户误操作，同时图标放置位置不合适或风格不统一会带来很大的违和感。

应用程序图标

应用图标代表着用户对产品的第一印象。从某种程度上来说，用户可以通过应用图标判断出一款产品的好坏。应用图标设计形式多样，风格也多变。从最早图形化界面兴起时的像素风，到高分辨率屏幕问世后拟物化的登场，直到现在主流审美的扁平化，再到特殊设计的拟态风，对图标的改变就是：越来越抽象。拟物化图标通常是现实事物的反映，符合人们在现实生活中的认知，而到扁平化时代，图标内不再包含太多的信息，抽象元素占比越来越大。抽象元素看起来变简单了，但其实对设计提出了更高的要求。

抽象元素的优点就是可以让用户第一眼看到图标就知道这大概是什么东西（除非很抽象的那种），并且可以使得品牌具有独特性。抽象设计把控难度较大，如果非常抽象，则会降低识别度，无法很好地与其他元素区分开来。

在应用图标设计中，运用文字的优点就是可以让用户更容易记住产品，用户对汉字的敏感度其实远高于图形。但文字图标的缺点也是显而易见的，由于文字形状的固定，其品牌延展性将较差，在营造产品格调时文字图标的难度要比图形图标要大，且文字图标并不太适合用于小众产品。

采用产品吉祥物作为图标的方式也是比较流行的做法。很多品牌索性直接把吉祥物做成了图标，相比于图形和文字而言，这样的设计方式会更亲切一些，但在视觉上容易产生类似雷同的情况。

对于体量较小或功能单一的产品（比如系统自带软件，手电筒，计算器，指南针等），为了更加清晰传递产品属性，也可以直接使用物品本身的形状作为图标，强调其工具属性，这种方法并不适合对体量较大的产品使用。

在设计应用图标时，应当注意做到尽量简洁，因其显示尺寸较小（仅120px左右的正方形），在小尺寸下可能会因为显示不清晰而导致图像失真，这也意味着直接使用照片制作图标是大忌。设计风格独特，符合产品性格，色彩鲜活明亮则可以更加吸引用户。

App内功能性图标

功能图标的样式有很多，作用也不相同。不同图标表达的意义不同，其样式、复杂程度以及大小也有所不同。功能图标可以让界面充满设计感，提高用户交互效率。

功能图标设计原则：

• 预见性。功能图标存在的最大意义是提高用户获取信息的效率，要做到脱离文字也能了解含义，如果为了好看而失去了识别性就本末倒置了。设计师可以进行相关元素的联想，然后将它处理得尽量贴合表意。
• 美观性。在保证识别性的前提下应该尽量美观。要尽量做到美观，除了造型与配色的选择，细节处理上也同样重要。将不同样式的图标放在合适的位置才能达到美观的目的。这里需要特别注意在设计线性图标时不要使用反白的方式，因为线条无法压住大面积的色块，如果需要反白，请使用面性图标。
• 统一性。功能图标的数量往往较多，保证图标的统一性显得尤为重要。统一的图标可以提升产品的品质感，降低用户认知成本，提升使用效率。风格上的统一很好理解，视觉大小的统一是一个难点。人的视觉存在着误差，有时保证两个图标的统一时，在视觉观感上却不一定协调。在设计时如果出现视觉观感协调问题，则需要更换图标或者微调大小。粗细统一、端点统一和圆角统一是细节上需要注意的点。不仅是图标之间需要注意这三个统一，单个图标内的设计也要遵循这三个统一。但针对不同表意目的的目标，可以不用过多强调这三个统一。

功能图标表现形式与适用场景：

• 线性图标：提炼图形的轮廓勾勒而成的图标，线条描边多为1pt，描边越粗视觉层级越高，所以大部分线性图标视觉层级是较低的。多在同一产品内且功能入口较多的情况使用，主要功能入口很少使用。线性图标不能过于复杂，图标在界面中越小就要越简单。纯色线性图标适合大多数产品，多色线性图标更显活泼和年轻化，视觉层级高，需要谨慎使用。
• 面性图标：面性图标类似于使用颜色将图标的主要区域完全填充，显示面积较大，更容易吸引用户的视觉，一般常用于一些重要的快捷入口处。面性图标分形状图标和反白图标两种类型。反白图标是指图标底色使用彩色，图标本身全白，形状图标则是指没有图标底色，形状带有颜色。使用面性图标需要注意图形风格与设计语言的统一。
• 线面结合性图标：线性图标与面性图标的整合体，多了一些细节，视觉层级更高，常用在功能入口，空状态以及标签栏等位置。线面结合性图标突显年轻、文艺，对属性偏稳重的产品不太适用。

用户界面中的字体

摘要中也有说，设计用户界面与设计艺术海报不同，绝大部分情况下使用的是系统默认字体。但对于字体的选择其实也是有说法的。

首先是衬线字体与无衬线字体。衬线字体的横竖笔画粗细不一致，且笔画开始和结束的位置都有额外修饰。在扁平化风格时代来临之前，衬线字体的笔画有粗有细，阅读体验比较好。但扁平化风格之后，一切装饰似乎都显得多余，目前衬线字体在应用中很少出现了，但一些需要塑造产品性格的标题当中仍然会使用衬线字体。

字体有字形结构，笔画和细节特征这三个构成要素。粗笔画的字体在视觉上其笔画的负空间较小，经常作为视觉中心并起到强调作用。粗笔画字体能形成一种压迫感，给人的感受为阳刚、沉重、严肃、坚硬。细笔画的字体负空间较大，结构疏朗清透，给人以纤细、优雅、放松、文艺、时尚的感觉。过粗的字体会造成用户视觉负担加重，引起不适；过细的字体识别度较差，不利于信息的传递。较高的字体显得瘦一些，相对偏女性化，给人以时尚优雅轻盈的感觉，较低的字体显得胖一些，给人以沉稳厚重的感受，易于产生信赖感。字体的视觉中心点越高，字体越轻盈，滑稽，有趣味；字体的视觉中心点越低，字形越笨拙，淳朴，可爱。字体结构越松散，留白越多，便可给人以轻松透气随性的感受，字体越紧凑，留白越少则给人紧张庄重有力度的感觉。

黑体是无衬线体的代表，特点：笔画简单，横竖均匀，手机界面容易识别，充满现代感。

宋体和楷体在以往的书籍排版与印刷中很常用，但现代设计力求简洁，所以这两种字体已经不再大规模使用，如果需要营造中国风氛围则可以使用。

圆体给人的感觉是亲和力十足，用于儿童类产品或女性类产品较多。

书法体风格突出，识别度相对差一些，基本上不用于大篇幅文本甚至文字较多的标题，多用于短标题。书法体可以营造中国风氛围，体现出刚劲和大气。

特殊字体指一系列使用倾斜，变形手法特殊处理过的字体，这类字体造型别致，容易引起人们关注。

在使用字体时应当注意分析判断字体性格是否和产品特性相符，不可盲目使用。

用户界面中的细节规律

一个好的界面不仅要求整体布局合理，还要求注意细节的处理。

圆角产生亲和力，尖角产生距离感。使用圆角元素可以让界面更加具有亲和力，但要注意相同的版式应当让圆角大小统一。

使用圆角让界面产生亲和力的同时也会缺乏稳重感，而尖角设计可以为产品制造稳重与权威的感觉，但尖角会让用户对产品产生一些距离感。

箭头在界面设计中几乎是不可或缺的元素，不同的箭头代表不同的意义。右箭头一般而言表示进入新的界面，也可以指引用户向右滑动屏幕。左箭头一般出现在界面的左上角，并且提示用户可以返回前一页。上下箭头在界面中一般表示展开与收起，当界面中信息过多需要隐藏，不想让用户直接看到全部内容时，可以使用上下箭头。同时上下箭头也含有赞同反对之意（参见知乎，最右这样的app）。圆圈箭头一般代表者刷新与同步，比如换一批内容，同步消息记录等。

界面投影应当尽量使用在大面积的信息卡片上，避免将投影的颜色直接设为黑色，建议吸取背景色作为投影的颜色，然后降低一些明度和纯度即可。一般情况下，用户界面中的投影强度都不会太明显，淡淡的投影可以让卡片富有层次感。

分界线在用户界面中起到的作用是分割信息版块。如果用点线面在形容界面的元素，文字是点，分界线是线，图片是面。当点过多，内容过于琐碎时，就需要使用分界线分割，但是图片太多时一般并不需要添加分割线，因为图片的边界本身就起到了分割的作用。提示性短线尽量出现在状态栏，它存在的意义是让用户了解自己现在所处的位置和状态。

左对齐是界面设计比较常用的对齐方式，对于一些字段长度不确定的列表，左对齐可以确定每一行开始的点，看起来更加整齐。居中对齐主要的作用是制造一种仪式感，比如新闻主标题和滚动歌词一般是居中显示的，但居中显示不适用于内容信息比较复杂且板块较多的界面。

在图文混排列表中，如果图片比文字高，文本不需要刻意地和图片的上下两边对齐，否则会看起来出现视觉断层，俗话说“上顶天，下顶地，中间留空气”，保留一些上下间距可以让文字更具有关联性。如果文字高度超过了图片高度，只需要保持文字纵向对齐就可以了。

当标题与内容需要在同一行中呈现时，如果标题字数固定，可以在固定范围内显示，并且尽量做到标题和内容各自对齐。标题后面紧跟内容会因为标题长度不同而导致信息展示比较混乱。