可搜索课程、软件、讲师、读书、直播
细节所能赋予的价值
细节是一种能影响全局的细微的易被忽略的物件或行为。这两年，我发现很多厉害的人不仅思考的比一般人要深，他们对于细节的把握能力也要甩一般人好几条街。之前有一本百万级的畅销书《细节决定成败》，讲的都是企业的高管如何通过方方面面的细节来把控一家公司的。但很遗憾的是，我还是发现80%的人其实都不太擅长把握细节。我们先拿电影举个例子，一部好的电影一定是有很多细节在里面的，如果一切按部就班会让剧情显得很不真实，比如两个人对戏的时候经常会因为一方没听清楚而一句话重复两次，这就是最简单的细节营造，细节越多会显得剧情越真实。我以前经常给朋友说，怎么样能让自己撒的谎很像真的呢？那就是加入细节，当然这都是开玩笑。
好的用户体验往往都是细节做的好，比如我讲解何为用户体验设计时所写的披萨包装例子：披萨的盒子中间一般都会有一个塑料的小支柱，很多人都不知道也不会注意这是做什么用的，其实看似小小的一个塑料支柱就可以让用户的外卖体验提升一个档次。由于披萨一般都用纸盒包装，但是刚做好的披萨温度较高，披萨的包装外壳由于披萨本身不断发散的热气，会整个软掉从而极容易与披萨贴到一起，而通过一个小小的塑料支柱就可以避免这个情况的出现，如果你和你朋友同时订了两家披萨，仅仅通过包装的一个小塑料支柱就会有完全不同的外卖体验。
有时候我们会感觉自己设计的页面没有亮点，其实拉开设计水平差距的，就在于设计之中一些微妙的细节，尤其移动端的界面设计，设计的区域就在几寸大手机屏幕之中，设计师所在做的大部分工作就是如何让复杂的信息在几寸大屏幕内更有秩序有层次的展现，并且提升用户的体验。
那么到底如何提升细节设计的能力呢？除了设计时的用心和全方位思考之外，了解页面中每一个控件所表达的意义，也是非常重要的一环。而且细节并不是等于加更多的元素，其实有思考的留白本也是一种细节，细节的本质是更多更全面的思考，让一切细微的地方都变的更合理。
1.界面中常见的组件表意
之前讲过平面设计与用户界面设计中的区别，平面设计更多是一种传达信息的媒介，而用户界面设计则更偏向于工业设计，不论是游戏类产品还是内容类产品都是需要与用户产生交互行为，从而解决用户的需求，所以用户界面设计中很少出现大面积的纯装饰性的元素，一切元素都应该有其足够的理由存在，否则用户会将所有的误操作归结于产品本身而非自己理解程度不够。
圆角与尖角的规律
圆角与尖角的规律在我们小时候其实就已经被灌输进了自己的观念里。在很小的时候家长都喜欢让孩子玩皮球或者布娃娃，即使不在看护状态下也可以放心的让孩子去玩，因为这个玩具很圆滑柔软，看起来不会对孩子造成伤害，而如果孩子们拿起尖锐的木杆，或者其他锋利的东西，家长就会担心伤害到孩子从而给予批评并且把木杆拿走，这就是锋利的尖角给人造成的“回避反应”。
圆角更具亲和力，尖角产生距离感
其实界面设计中很少会出现绝对的尖角，因为产品总是要让用户用的舒适，锋利的按钮或者锋利的卡片会让用户感觉非常的“不友好”从而产生距离感。而适当的圆角可以消除这种紧张的体验，当然圆角越大，便更具亲和力。然而其中也是要根据产品的属性最终确定圆角的大小，例如针对母婴类的产品圆角就会做的非常大，而工具类产品只需有一点圆角就够了，过大的圆角反而显得过于复杂了。这里需要注意的一个点就是一个产品中，圆角的大小是要统一的，如果界面中的信息卡片选择8px的圆角，那么不论是卡片还是按钮最好都选择8px的规范，减少不必要的对比。例如下图母婴类产品“贝贝”，几乎整个产品没有尖角的出现，全部都是较大的圆角，迎合产品性格的需要。
尖角更具权威感，圆角缺乏稳重感
当然每一个元素都没有绝对的好或者不好，例如尖角虽然在一定程度上让用户产生距离感，而这种距离感可以让某些特殊的产品更具权威感或者档次感。例如Apple的官方网站中出现的卡片基本全部是尖角，这就是为了营造一种高端的品质感受，给用户一种“不可触摸”的权威感，让用户感觉产品更值得信赖，更符合Apple的产品调性。而圆角具有了亲和力的同时失去了一些稳重感，尤其较大的圆角会让产品很难有“高大上”的视觉和心理感受，这也就需要设计师根据不同的场景需求选择不同的元素展现方式。例如下图：国外的一款针对高端用户的电商产品，尖角的使用让整体页面变的“高冷尊贵”。
圆角本就是一种细节
箭头的使用规律
箭头在设计中可以说是不可或缺的一个重要元素，然而不同的箭头也代表着不同的意义，如果使用不当很容易误导用户的操作。例如在我们日常的生活中，箭头通常出现在安全出口的指示牌用来指示方向，这也是根深蒂固在人们心中的箭头所存在的意义。而在用户界面设计中，还有延伸出其他的含义。
右箭头-进入新页面
在iOS系统中，右箭头一般代表着跳转到一个新的页面，其实箭头也有一定的作用是来通过这个元素丰富页面的布局，当然前题是需要跳转新页面的时候。当信息过多或者布局受限时也可以不加箭头，通过标题加粗或者其他方式让用户知道可点击即可。箭头的样式没有固定规范，根据界面风格或者信息层级的重要程度来定就可以，信息层级较弱，则箭头也较弱，相反则同理。
右箭头还有一种功能是指引用户右侧有隐藏内容可以横向滑动，然而如今更多的是通过遮挡住的未显示完整的图片或者文字来给用户传达横向滑动的信息。总而言之，右箭头在界面设计中起到锦上添花的作用，虽然有很好的提示效果，但还是要慎用，避免过多的不必要的箭头造成用户的晕头转向。如下图所示，“携程旅行”中“特价机票”大标题的“更多”按钮由于层级较低并且在界面中出现的次数较少，所以使用了右键头来强调可点击性。而右侧的列表页由于信息较多并且列表较密集，即使没有箭头用户也具有点击欲望，这里就没有加右箭头的必要。
左箭头-返回前一页
左箭头一般出现在页面的左上角，起到返回前一个页面的作用。当然有些APP也习惯把返回按钮放到左下角，这都是设计师主观去设计的。当然不太推荐设计师在这种用户根深蒂固的操作习惯中做改变。如下图所示，左图“优阁网”的返回箭头在界面底部，单手操作时更易点击然而用户习惯受到挑战。右图“每日优鲜”的返回箭头常规性的放在左上角。
为什么返回这么高频率的操作要放到最不好触控的左上角？
讲到这里大家心里可能会有一个疑问了，为什么返回这么高频率的操作要放到最不好点的左上角呢？其实这里也是有原因的，首先正是返回箭头操作的频率太高了，每一个二级页都要有返回箭头，如果返回在界面下方的话，就需要一条工具栏来承载它，那么每一个二级页就因为一个左箭头而多了一条工具栏减少了信息展示区域，如果正巧某个页面需要工具栏，在诸多的工具按钮之间出现一个返回按钮，也很容易让用户产生误操作，而顶部导航条是每一页都会有的，所以返回按钮与顶部导航条就顺理成章的“在一起”了。
还有一个原因就是目前iOS基本都是右滑返回上一页，Android也基本都有系统内置的虚拟返回键，所以界面内的返回箭头并不是唯一的返回交互方式，也就更没有放置在页面左下角的必要了。
上下箭头-展开与收起
下箭头一般在用户界面中代表着“展开全部”的意义，当界面中信息过多需要隐藏而又不想让用户单独跳页面查看全部内容时，展开与收起功能成了最佳交互选择。理所当然，上箭头一般代表着“收起部分内容”的意义。
圆形箭头-刷新、同步
一般圆形循环箭头常见于刷新页面或者换一批内容的操作。当然还有用作同步消息记录或者其它同步信息的按钮。
投影的使用规律
投影在界面设计中是一把双刃剑，用得好，会让界面多很多层次感，让界面更生动活泼，而用不好就会让界面变得脏与躁。首先投影适用于在大的信息卡片上增强立体感而不是琐碎的元素上，其次可以用在界面需要上下层级区分时，例如标题栏或者抽屉栏使用投影可以明确空间上的上下层级关系。注意单个产品中投影的属性要保持一致，也不要在有投影的卡片上再叠加新的投影卡片，否则会让界面层次过多反而变得降低阅读效率。
投影尽量不要使用纯黑色
很多设计师喜欢把投影设定为黑色然后调整透明度，然而这样很容易让界面变脏，尤其背景有色彩倾向的时候。推荐的投影颜色是吸取背景色，然后把明度与纯度降低一些即可，保留一些背景色的色彩倾向，可以让整个画面更和谐统一。如果背景为白色时可以稍微偏一些产品主色的色彩倾向，当然要注意度的把握，色相不可过于明显。
根据不同情景选择投影强度
一般界面设计时投影的强度都不会太重，弥散式投影就是其中常见的做法，只需达到层级区分的目的即可，过于明显的投影会适得其反，让用户的视觉反而被过强的投影抓了过去。而在做视觉banner或者H5时，强烈的肯定的投影又成了一种特殊的视觉表现技法，这就需要设计根据不同的情境选择投影的使用强度。
高斯模糊制作投影
除了使用软件内的图层样式制作投影之外，还有一种常见的方法，就是通过高斯模糊手动制作投影，通过钢笔工具或者图形工具画出投影的形状，然后选择高斯模糊，调整透明度后至于需要投影的元素下方。这种制作投影的方法有个好处就是可以自己设计投影的形状，让投影更生动起来。
这么多不同样式的投影，开发能实现吗？
首先即使不考虑开发成本的情况下，投影的使用也应该是谨慎的，因为投影本身就不耐看，并且用户对于弥散灰色的认知就是“脏”颜色，所以投影的使用应该是克制和谨慎的，尤其大面积使用时更应该权衡其利弊，国内的客户端产品一般本身就体量较大内容较为复杂，再大面积的使用投影反而会让页面更为臃肿杂乱，这也是为什么国内的上线产品为何很少出现概念稿中的那些弥散投影。
其次对于投影来说，开发确实很难用代码写出跟设计稿百分百还原的投影效果，因为设计软件中的属性太多了，代码中没有足够的预设选项供工程师去选择，除了一些简单常规的投影效果需要工程师去手敲之外，更多的弥散投影都可以使用切图的形式解决。
第一种方式：整体切图
对于按钮或者其他非响应式的元素，如果有投影的话可以将整个元素跟随投影一起切图，当然这种切图方式时元素不宜过大，如果元素过大会增加应用内存或者加载负担，并且全屏切图时适配也会出现问题，各种机型还原度会参差不齐。
第二种方式：点9切图
在Android的设计过程中，为了适配不同的手机分辨率，图片大多需要拉伸或者压缩，这样就出现了可以任意调整大小的一种图片格式“.9.png”。这种图片是用于Android开发的一种特殊的图片格式，它的好处在于可以用简单的方式把一张图片中哪些区域可以拉伸，哪些区域不可以拉伸设定好，同时可以把显示内容区域的位置标示清楚。对于一些需要响应式设计的投影可以使用点9切图的形式实现。
点9切图的做法其实很简单，首先需要确定内容显示区域跟拉伸区域，点9切图规范中会用四条黑色的线来表示，如下图所示：点九图格式规定由左侧和上侧来控制图片的拉伸，右侧和下册控制文字的显示区域。
拉伸区域是指当实际程序中设定了对话框的宽高时，横向拉伸区域和纵向拉伸区域就会被拉伸成所需要的高和宽，呈现出于设计稿一样的视觉效果。
内容区域是指为了让文字被输入框完整包裹，以达到显示效果的正常，所画黑线的区域就是你文字显示的区域，这样你的文字就不会超出对话框
上面讲了点9图的用法，那点9图如何输出呢？其实有很多种方式可以输出，比如说用draw9patch.bat这个工具，或者简单一点，用photoshop直接输出。输出的方式是先输出普通的png资源，然后扩大画布大小，上下左右各空出一个像素，再用一个像素的铅笔工具（颜色选择纯黑色），上下左右分别画线就可以了，保存的时候注意把后缀修改为.9.png。
特别注意：
1.最外围的一圈像素必须要么是纯黑色，要么是透明，一点点的半透明的像素都不可以有，比如说99%的黑色或者是1%的投影都不可以有;
2.文件的后缀名必须是.9.png，不能是.png或者是.9.png.png，这样的命名都会导致编译失败。
分割线的使用规律
分割线在用户界面设计中一般起到分隔信息板块的作用，从前的产品分割线都习惯做的很深很粗，然而在设计语言的不断迭代后，如今的分割线已经越来越淡化了。更多的通过大间距、细分割线来让信息分割的更清爽直观。
分割线多出现在文字板块
如果用点线面来形容界面中的元素的话，文字肯定就是点，而分割线就是线，图片就是面。当点过多内容过于琐碎时，就需要线来进行分割信息，而面本身就起到分隔的作用，所以图片之间一般不使用分割线。如下图所示，如果一页信息列表中是图文结合的，那么分割线一般只在文字部分出现，不会横穿整个界面。当然还有另一种情况，在同一页面有多个不同的大板块区分时，在做板块区分时分割线会横穿整个界面。
状态提示型短线
还有一种状态提示型的短线，严格意义上已经不属于分割线了，它的意义是让用户了解当前所处的状态与位置。从前的设计风格也习惯把这种状态提示型短线做的很长，如今的设计也习惯“点到为止”，让用户看到自己当前的所处的状态与位置就够了，过长过粗的提示线反而会在内容为主的设计趋势下增加不必要的视觉阻碍了。如下图所示，最右APP这几个Tabbar就使用了状态提示型短线，强调用户当前位置。
对齐方式的表意
在平面设计中居中对齐较为常见，而在移动端的界面设计中居中对齐则很少会用到，由于平面设计中的内容相对较为固定，所以居中对齐可以主观的去控制文字总数量与每一行显示的文字数量，并且在固定的版面中不会有过多的信息。然而移动端界面设计中同一页面可能同时存在很多信息列表，并且每个信息列表的字段长度都不一样，如果这时再使用居中对齐就会显得页面没了秩序。
界面设计中常见对齐方式
左对齐
人的视觉习惯横向的由左向右阅读，所以在界面内的列表信息中，左对齐是最常用的对齐方式。字段的长度不可确定，然而我们可以确定每一行字段开始的点，尤其信息较长并且字段长度不可确定时，使用居中对齐更容易在视觉上变的不整齐，阅读体验不佳。大板块区分时，在做板块区分时分割线会横穿整个界面。
居中对齐
居右对齐
居右对齐多用于图表类界面中，涉及到数据对比时数据使用居左对齐可以更直观的让用户了解到当前的数据差了几位数，单位是什么。文字左对齐，数字右对齐，能快速让用户识别数字体量。用户通常在读一个较大的数字时是从后面开始感知的。
对齐中常见的细节问题
图片与文本的列表对齐
当图文列表中图片过高时，文本不需要刻意贴紧图片的两端，刻意贴紧会使两端信息出现视觉断层，也就是俗语说的“上顶天下顶地中间留空气”，这种情况下需要上下各给出一些间距让两段文字更有一些关联性。
另外当图片如果是LOGO或者头像这种小图时，可能会出现文字的高度超过图片的高度，这个时候只需保持文字的纵向对齐就可以了，不需要强制性的与列表最边缘对齐。
当标题与内容在一排时，由于标题字数固定，所以可以固定范围显示，尽量做到标题与标题对齐，内容与内容对齐，尽量不要出现标题后面紧跟内容，这样会因为标题长度的不同导致页面信息杂乱没有秩序。
常见的字体性格及应用
在界面的设计中一般使用系统默认字体居多，尤其中文字很少去改动，但是一些产品为了营造特殊的产品格调会在APP内嵌入字体，由于数字字体包占用内存较小，所以嵌入数字字体的情况较为常见。比如下图左的贝壳找房嵌入了数字字体，右图妙读嵌入了中文楷体。
当然，在做产品偏运营活动风格的页面或者其他物料设计时，字体也是非常重要的一个元素，文字是用户视觉的最重要元素，所以字体选择的合不合适对整个版面的格调与版式会有很大程度的影响。比如下图两种字体营造出不同的视觉感受。
衬线体与无衬线体
在开始详细讲述之前，先让大家看看下面两段文字，有两种字体，你能分清楚哪个是衬线体，哪个是非衬线体吗？
相信大家即使之前没有了解过字体也可以大概猜的出来，上面为衬线体，下面为无衬线体。简单总结就是：衬线体的笔画在开始和结束处有额外的修饰，并且笔画横竖粗细不一。无衬线体则是所有笔画粗细一致，并且在笔画的开始和结束处没有额外的修饰线条。
在扁平化互联网没有兴起之前，由于衬线体每个字的笔划有粗有细，在连续阅读时流畅性更好，所以非常被亲睐。然而扁平化互联网时代到来之后，一切装饰都变的谨慎起来，尤其大篇幅的文字在寸土寸金的屏幕内衬线体变得反而不利于阅读了，所以衬线体现在界面设计中极少出现，就算出现也多用于标题或者用于特殊属性产品营造产品性格。
字体构造的细节规律
之前我讲到过色彩的性格，其实字体也是有性格的，不同字体可以传达出不同的视觉感受。我们知道字体基本是由字形结构、笔画和细节特征三者构成要素。而字体性格也是通过这三个要素的差异，给人不同的视觉感受。不同的场景和表意应该选择合适的字体，如下图所示。
字体的笔画粗细
粗笔画字体在文字排版上会形成高密度的文本块，这是因为笔画加粗，字体的负空间就会减小，视觉面积加重，产生一种压迫感，进而形成视觉重心，产生强调的作用。细笔画字体在视觉面积上较淡较轻，缩小了视觉面积后，笔画负空间增大，结构显得疏朗清透，较小的视觉分量亦不会让读者产生压迫感。用一句话来总结就是笔画越粗字体越显厚重，越有阳刚、沉重、严肃、坚硬的感受，而相应的如果把笔画都变细，就会显得字体纤细、优雅、放松、文艺、时尚。
过细的文字识别性会受到挑战，而过粗的文字如果大篇幅出现也会视觉上过重，引起阅读上的不适。所以常规正文选择正常的粗细就可以了，如果需要营造版面气氛，可以在标题字的粗细上下功夫。
字体字形的高低
字型的高低用通俗的语言来说就是字体的胖瘦，把一个字想像成一个人来看，高挑的会显得较为女性化，字形越低越显男性化，这是因为高挑的文字会凸显时尚、优雅、轻盈从而让人联想到女性，字面越低越沉稳、厚重、有信赖感与力量感。
字体的重心
重心即物体的视觉中心点，在字形中视觉重心线一般与几何中心线不同，通常视觉重心线高出几何中心线越多，字形越轻盈、滑稽、有趣味。而视觉重心线越低，字形越显拙、淳朴、可爱。
字体的笔画松紧
日常生活中的文字书写显得轻松活泼，有一种随性不羁之美。而文字书于庙堂、铸于钟鼎，或者付梓成书、传于后世，则是有一种严谨端庄的美。其本质的区别则是结构的松散与严谨之分。所谓笔画松散也就是内部空间的留白较多，会给人轻松、透气，节奏舒缓的感觉，相对的如果内部空间压缩较严重就会营造出紧张、有力度的氛围感。一句话来说就是字体结构越松散越轻松，随性。结构越紧凑越正式，庄重。
图标的使用细节
在界面设计中，图标的样式有很多，作用也各不相同，要基于不同的场景选择不同属性的图标。图标可以让界面充满设计感，以及通过图形化的设计，让用户浏览界面时效率更高。由于各种图标表达的意义不同，所以图标的样式，粗细，复杂程度，大小都有特殊的意义。
线性图标
一般页面中的图标分为线性图标与面性图标两大类，线性图标通过提炼图形的轮廓，简单的勾勒就可以有很好的效果，常用1pt的粗细绘制，当然线条越粗视觉层级越高。由于线性图标视觉上层级较轻，一般可用在同一页面功能入口较多时，底导按钮的未点击状态时，辅助功能按钮等。在做界面设计时线性图标很少用做主要入口。
线性图标不易过于复杂，尤其面积越小越要简练，一些功能入口图标由于面积较大，可以多一些细节在里面防止视觉上的单调。一般来说，我们会采用断点、粗细线条结合、图形点缀等多种方式去描绘。
另外有一点点要注意，纯色线性图标适用于大部分常规属性产品，而多色线性更显活泼，年轻化。视觉上层级上来说，多色线性视觉层级较高。
面性图标
面性图标更容易吸引用户的视觉，而且面性图标本就与类似按钮的形状，给用户可点击的心理预期。一般一些重要的快捷入口，都会使用面性的图标来表示。面性图标又分为反白和形状两种，反白图标是指底部有图形背景托起，这种图标一般是最高层级的图标，常用于首页标签式黄金布局处，一屏一般不超过10个。
形状图标是指没有底部背景，纯形状图形组成的图标，这种图标应用较于广泛，设计的方法也比较没有固定的章法，唯一需要注意的是图形风格与设计语言的统一。面性图标视觉上较重，一些层级较低的文字如果需要图标点缀，尽量不要使用面性图标。
线面结合图标
线面结合图标比纯线性或者面性更多了一些细节在里面，视觉层级也比较高，通常用在功能入口、空状态、标签栏等。需要注意的是线面结合图标比较凸显年轻、文艺，所以属性较为稳重的产品不太适用。
图标的表现形式以及适用场景
预见性
美观性
保证识别性的前提下尽量的做到美观，是一名设计师的职责所在。单个图标的美观除了常规的造型与配色之外，更多的体现在细节当中。这里讲几个比较重要的细节，首先一定要想清楚各个图标所要表达出的意义，复杂的图标如果放在不重要的位置并且面积很小就会显得不美观，而太过简单的图标如果放在主要功能入口也会显得粗糙不精致，所以每个图标符合自身的表意是美观与否的重点所在。以虾米音乐为例，主要功能入口的图标与个人中心页的文字装饰性图标相比，就多了一些细节在里面。
另外线性图标并不适合用反白的方式展示，线条在视觉上很难压住重重的底色，如果线性图标加以底色背景就会显得图标很粗糙。
统一性
由于一个产品内图标的数量较多，所以图标的统一性就显得尤为重要。统一的图标可以提升产品的品质感、信赖感，并且同一属性的图标如果保持样式上的统一可以降低用户认知成本，提升用户的使用产品时的效率。首先要保证同一属性的图标从风格、视觉大小、粗细、断点、圆角、复杂程度、特殊元素上的绝对统一。
风格的统一就不再多说了，面性、线性还是线面结合这个是最基础的统一，其次就是视觉大小的统一，这里需要解释一下为什么要称之为视觉大小呢？其实人的视觉也是有误差的，完全保证两个图标的宽高相等其实并不一定协调，比如下图，这两个图形我们看上去明显左边的正方形要大一些。
其实我们画上辅助线之后会发现，这两个图形宽和高都是相等的。
粗细统一、断点统一、圆角统一这些是细节上要留意的点，基本上也没有什么难度，比如同一属性的图标如果是1pt线性，那么都要保持1pt的统一，如果一些独特的设计语言比如外轮廓2pt内线条1pt，那么这种设计语言也要延续在每一个图标上。断点与圆角也是同理，如果一组图标确定使用断点元素，那么每一个图标都要有断点的出现。而圆角是最容易忽视的图标细节，除了一组图标内要保持圆角的统一，单个图标也要保持圆角细节上的统一。
复杂程度的统一就是同一组图标内细节程度的统一，比如一个图标细节丰富，轮廓清晰。那么这一组图标都要保持这些细节。
很多设计者在设计图标时，也喜欢加入一些特殊的元素来营造产品性格或者气氛。这种特殊元素同样是要保持统一的，不然不仅无法营造气氛，反而使页面变得复杂。
上面所讲的是同一表意属性内的图标，不同表意属性的图标就不需要过多细节上的统一了，只需迎合整个产品的性格就可以。比如偏娱乐化并且目标用户较为年轻的产品，整个产品内的图标都要有娱乐年轻的气质在里面。
总结
细节并不代表着多元素，一个设计师对于细节把控较好的前提是理解这些细节控件以及技法的表意，并且在合适的场景使用合适的控件跟技法。这是界面设计中对于细节最基础的要求，也就是首先要做到在细节上不犯错。而至于如何让界面通过细节出彩就需要进阶性的举一反三了，其中最重要的一点就是在将界面打散并了解透彻后在设计页面时尽可能的顾及到各种用户使用场景，正如我开头所讲的披萨包装一样。细节真的可以决定成败。