没有难看的颜色，只有难看的搭配每一种颜色有其独特的作用，令人产生不同的情感。合理使用色彩可以取得宜人的效果。
1、色彩由色相、饱和度、明度三要素构成
色相(Hue)
即各类色彩的相貌称谓，如大红、普兰、柠檬黄等。色相是色彩的首要特征，是区别各种不同色彩的最准确的的标准。事实上任何黑白灰以外的颜色都有色相的属性，而色相也是由原色、间色和复色来构成。
饱和度(Saturation)
饱和度是指色彩的鲜艳程度，也称色彩的纯度。饱和度取决于该色中含色成分和消色成分(灰色)的比例。含色成分越大，饱和度越高；消色成分越大，饱和度越低。
明度(Brightness）
明度是眼睛对光源体和物体表面的明暗程度的感觉，主要有由光线强弱决定的一种视觉经验。明度不仅取决于物体照明程度，而且取决于物体表现的反射系数。
2、配色的基本认识
基本色环(Color Wheel）
按照光谱顺序为：红、橙红、黄橙、黄、黄绿、绿、绿蓝、蓝、蓝紫、紫、紫红、红和紫中间在加个中间色。在色相环的圆圈里，各种色调按照不同角度排列，则十二色相环每一色相距30度，24色相环每一色相距15度。
同一色
色相环中的任意色因明度变化而呈现的色彩。颜色混合是通过在色彩中加入黑、白、灰形成的。统一色调，色彩的纯度和明度是具有共同性，明度按照色相略有变化。
同色系配色是指主色和辅色都在同一色相上，这种配色方法往往会给人页面很一致化的感受
同类色
同类色又称类似色。色相环原色起45度以内，含有较多共同的色彩元素的色彩，同类色指色相性质相同，但色度有深浅之分。
相邻色
色相环中相距90度，或者相隔五六个数位的两色，为邻近色关系，属中对比效果的色组。色相彼此近似，冷暖性质一致，色调统一和谐，感情特性一致。
相邻色不同于同一色的枯燥乏味。稍微跳动的的色彩也一样保持着设计的稳定性，还能起到强调单独作品的作用
对比色
指色相环上色相对比较大、纯度较高的任意两色。对比色之间无过多的共性，对比效果强烈。当对比的两色具有相同的彩度和明度时，对比效果越明显；两色越接近补色，对比效果越强烈。
主导的对比配色需要精准掌控色彩搭配和面积，其中主导色会带动页面的气氛，产生激烈的心理感受。
补色
补色又称互补色、余色，亦称强度比色，就是两种颜色(等量)混合后呈现黑灰色，那么这两种颜色以定位互补色。色环的任何直径两端相对之色都称为互补色
补色对比由于色彩过于冲撞，很少用户传统网页界面，一般用于活动 banner，起到吸引用户眼球的作用。
如果你写过HTML和CSS，那么肯定熟悉RGB，三个字母分别表示：R(红)、G(绿)、B(蓝)。这种方式对电脑来说非常直接明了，也是电脑理解颜色的默认方式。对电脑友好并不意味对人类易用，这也是HSB诞生的原因。
HSB代表色相(Hue) - 饱和度(Saturation) - 明度(Brightness)，又称HSV，是一种更人性化的颜色描述方式。为什么这么讲？因为它与人们描述颜色的自然方法一致。
2、HSB色彩模式设置及优点
1)、比起 RGB 系统，HSB使用了更贴近人类感官直觉的方式来描述色彩 ，对于设计师来说更容易理解
HSB 的概念很接近色彩学所常使用的色彩空间模型，由于是由三个属性所组合而成，因此常以色立体表示，
但由于我们常用的操作系统依然为二度空间的系统，因此在计算机系统的选色接口中常以不同的接口出现，我想其实大家都很熟悉，像是下图为sketch中的选色器，可以看见一个全彩的色相条，和一个颜色的窗口，滑动色相条即可得到不一样的颜色
2)、HSB可以更加科学地保证设计师所使用的不同颜色处于同一明度和饱和度，使用户的视觉体验感更好
也许你会觉得 HSB 并没有比较简单，但是实际使用过就会发现，它是多么的好用。例如下图的男女比例的背景色块，如果用RGB调色只能通过设计师的眼睛和经验来调整他们是否处于同样的色调中，但是用HSB来调色，保持S和B值相同，只需要滑动色相条即可得到完全一样的色调，省时省力还科学
1、色调的分类
色调（color tone）是不同色相但是具有同样亮度和纯度的颜色进行的分组，
极浅vp（very pale）色调：
是纯度最低、亮度最高的，干净清淡的颜色，给人清的，柔弱的，女性的，年轻的，淡的，可爱的印象。
亮灰色lg（light grayish）色调：
纯度低，中高亮度的色调，给人高贵、安定、古朴的印象和轻柔的感觉。
中灰色mg（medium grayish）色调：
低纯度中亮度，具有浊，不起眼，古朴，稳健，安定的气氛。
深灰dg（dark grayish）色调：
低纯度和中低亮度，给人漂亮、安定、自然的感觉。
极暗vd（very dark）色调：
是纯度和亮度都最低的色调，具有厚重牢固的感觉，给人非常暗，阴暗，厚重，坚固、男性的印象。
浅的pl（pale）色调：
中纯度和高亮度的色调，给人干净、浅、爽朗的感觉。
柔软sf（soft）色调：
中纯度和中高亮度，给人稳健温柔的感觉。相比浅色给人感觉更安定。
晦暗dl（dull）色调：
中纯度和中亮度的色调，给人安心高雅的感觉，一般说的中间色就是晦暗色调。
暗dk（dark）色调：
中纯度和低亮度的色调，具有结实，成熟，古朴的色调印象。
亮It（light）色调:
高纯度高亮度的色调，具有明亮、健康、活泼，年轻而稳定的印象。
强st（strong）色调：
高纯度和中高亮度的色调，充满活力，冗长，热情，开放的印象。
深dp（deep）色调：
高纯度和低亮度的色调，具有力量感和深度，给人深的，浓的，传统的等印象。
活泼VV（vivid）色调：
高纯度和中亮度的色调，较为鲜艳，鲜明，华丽，鲜艳，鲜活的印象。
2、色调配色技巧
同色相环配色技巧原理一样，色调也有3种基本的配色技巧。
1）同色调的配色：
同色调的颜色几乎没有亮度和纯度差，是比较容易统一和协调的配色。
2）邻近色调配色：
具有一定的亮度和纯度差但是差值不大，比较容易调和，容易传达原有印象。有纵向邻近、横向邻近、和斜向邻近三种。
3）对比色调配色：
亮度与纯度差很大，是极具张力的配色方法。是色调图上相隔很远的色调的配色。自由选择色相，有亮度对比、纯度对比、亮度和纯度对比这三种配色方式。
推荐是三个比较好用的、简单操作的配色网站，有需要的可以收藏
1、coolors.co
2、designspiration.com
3、materialpalette.com
除了医疗作用外，颜色还有一定的象征意义和社会属性，对人类生活有着举足轻重的影响。颜色心理学领域的佼佼者，美国罗切斯特大学安德鲁.埃利奥特说，以前从来没有人做过这种联系。他表示：“颜色研究表明的是，我们的行为会受到我们没有留意，习以为常的事物的影响。”
据国外媒体报道，人们常常认为，穿着红色服装是自信的表现。同时，科学家们也认为，运动员身穿红色运动服更容易取得好成绩。然而，英国罗彻斯特大学的安德鲁·埃里奥特等人开展的一项最新研究却显示，红色会抑制人们思维的活跃性。
埃里奥特和他的研究小组共对一些中学的高年级学生和部分大学生进行了四次研究。期间，他们向被测试者发放了一些用于进行智力水平测试的纸片——在各张纸片的右上角分别用红色、灰色或绿色表明了序号。
结果，凡是所持纸片上用红色标明序号的学生，其所获得的智力水平评分均明显低于那些手持灰色或绿色序号纸片的学生。先前的研究已经证实，人们在日常生活中所接触到的颜色会对人的潜意识产生影响，只不过这种影响非常短暂。
埃里奥特教授认为，红色首先会使人们联想到错误和失败。谈到这一点，大多数人肯定都会想到老师在判卷时所使用的红墨水。当然，有关禁止的信号通常也以红色表示。而在自然界中，红色则是一种警示色。随后进行的另外两项研究则证实，当受测试者眼看着红色回答问题时，他们通常会选择那些较为简单的问题进行解答－－这是人们在面对困难时所选择的最经典的方法。
与红色相对的是，蓝色能够促进创新；黄色，则是最令人愉快的颜色，它被认为是愉快的象征，可以刺激神经系统和改善大脑功能，激发人的朝气，令人思维敏捷。另外还有，橙色，是新思想和年轻的象征，令人感到温暖、活泼和热情，能启发人的思维，可有效地激发人的情绪和促进消化功能。
赏心悦目的色彩能够通过视神经传递到大脑神经细胞，从而有利于促进人的智力发育。在和谐色彩中生活的少年儿童，其创造力高于普通环境中的成长者。若常处于让人心情压抑的色彩环境中，则会影响大脑神经细胞的发育，从而使智力下降。所以，我们在平时日常生活中，正确的应用色彩心理学，改善生活环境色彩，让我们的心情更舒适，思维更敏锐。
所以一定不要让自己孩子在高考的时候穿什么红色的外套，旗开得胜什么的，可能会影响思维活跃度，导致考试成绩不理想
橙色稍稍混入黑色或白色，会变成一种稳重、含蓄又火热的暖色，但混入较多的黑色，就成为一种烧焦的色；橙色中加入较多的白色会带来一种甜腻的感觉。由于位于可见光的中低频频段,橙色在空气中的衍射能力仅次于红色，而其色感比红色更暖，最饱和的橙色应该是色彩中感受最暖的颜色，能给人有庄严、尊贵、神秘等感觉，所以基本上属于心理色性。历史上许多权贵和宗教界都用以装点自己，现代社会上往往作为标志色和宣传色。不过也是容易造成视觉疲劳的色。
英国埃塞克斯大学做了一项研究显示，绿色是很特别的颜色，在四季分明之地方，如见到春天之树木、有绿色的嫩叶，大自然的颜色。在绿色环境中锻炼能提高情绪、活力和愉悦感。也就是说，户外锻炼有益身心。
色彩心理学家早就指出，人们在高频率颜色(如绿色，蓝色和紫色)的环境下会产生平静的感觉，而在中低频率颜色(如红色，橙色和黄色)的环境下更容易兴奋和激动。这一现象可能是在人类进化的过程出现的。因为对于原始人类来说，绿色的环境意味着充足的食物和水源，对绿色的积极感觉在进化过程中融入大脑。
英国埃塞克斯大学的研究者选取十四名男大学生，要求他们在室内固定单车上骑行5分钟，并观看关于森林的纪录片。随后，研究者将视频背景由绿色转换为黑色、白色和红色，让志愿者在观看这3种颜色视频的同时，又分别骑行了5分钟。结果发现，他们在观看绿色视频时疲劳感低，情绪也能保持愉悦；而观看红色背景视频时，他们更容易情绪不稳。
紫色跨越了暖色和冷色，所以可以根据所结合的色彩创建与众不同的情调。带些红色的深紫色可以产生一个暖色盘。浅紫色是较贵的，常常会联想到浪漫。当结合玫红色的时候，可以创建一个很女性化的色盘。一个比较男人的色盘可以使用偏红偏黑的深紫色。泥土和自然的色彩可以结合红紫色和浅褐色或者亮紫色+绿色。黄色和紫色是对比色，可以创建强对比度的色盘。
作者：木子浅谈 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
我们已经或多或少看过一些优秀作品，也知道了一些设计方法和技巧，了解到了一些相关的理论知识，自己也做过一些项目或者是练习，总体来说都掌握了一定的设计能力；但是设计师想要拥有更多的资源（指薪资、工作机会等等）或者是想职业进阶，除了一定的设计能力之外是远远不够的，设计师还需要掌握更多的能力，才能让自己成长提升，并且拥有他人无法取代的价值。我通过自己的经历和整理收集，发现目前如今不同阶段的设计师对待同一个问题不同的角度以及特征，如下图所示：
不难发现，当大家还是初级设计师的时候，刚刚接触设计行业，我们更多的是去观察、学习、临摹一些“好看”的作品，熟练地使用设计软件和提升设计技法，最后的是自己做出来的产品是否漂亮美观，最重要的是客户/老板是否会买单，而自己无法清晰地定义自己设计的产品价值，也不能很好表达出自己的想法和观点。所以产品走向会根据老板/客户的水准来定义，轮到自己表达只是支支吾吾，最后只是做为执行无休止地改改改。一切由老板/客户说的算，无法清晰地了解自己产品的定位，缺乏表达观点的能力，缺乏一定的审美，作为执行角色无休止加班成为了初级设计师最大的痛点。
而经过一段时间的学习和工作后，逐渐转型成为中级设计师后，有了一定的设计技法和软件使用熟练度，有了一定的审美和视觉表现能力，平台规模合作团队也逐渐变大，基本能满足老板/客户/业务方提出的需求。开始学习一些设计相关理论，开始拆解自己或别人产品的交互架构，更多地开始关注用户体验起来，也会融入品牌元素到自己的产品当中，为自己的产品做情感化设计和制定设计规范，会组织一些专业语言和业务沟通以及陈述自己的产品。但是如何从众多的设计方案中找到最优的方案来解决问题，如何更多地体现产品的价值，产品利益链如何形成商业闭环，如何在团队/设计圈体现自己个人的价值，如何提升自己的个人影响力，成为了中级设计师这阶段的痛点。
通过三年五年的沉淀，成为高级设计师后，形成了自己独有的一套方法论和设计思维，能熟练地拆解每款产品和定义产品，视觉表现层已经完全能驾驭，能清晰地阐述自己的设计思路和结论，产品用户体验层也有了一定的经验和方法，在团队中或者设计圈有自己一定的个人影响力，更多地会在工作中思考产品带来的社会价值和商业价值，会用不同的思维去思考产品的各个维度，找到最优的方法解决问题，会把固有的利益链转换成商业闭环，提升用户转化率等等。而这阶段的设计师的主要痛点就是面临着团队管理和沟通，朝着资深设计师和设计专家转型，以及如何为平台带来的利益价值考核等等问题。
资深设计师或者设计专家这里不谈，因为这阶段所思考的问题大都和设计无关了。通过上述不难发现，每个阶段的设计师都有各自的特征和痛点，虽然其中都包含着设计相关的能力，但是随着阶段的进阶设计相关的能力占比逐渐变少，更多的是其他的能力增长，所以设计师除了设计以外其他能力的重要程度显而易见，那么我们来看看除了设计以外，设计师应该掌握其他什么能力。
思考能力(Thinking)
思考能力作为首要的能力，不仅仅是设计师，其他职业一样需要这个能力，这里所涵盖的面太广泛了也说不了，这里主要针对三点来讲：核心竞争力、批判思维和分析能力。思考分为两个层面：自我层面的和业务层面的思考；自我层面的思考就是要通过深度剖析自我，发掘自己处于哪个阶段，有什么长处和不足，自己想要什么，需要往怎样的方向发展；而业务层面的则是要需要思考业务产品的结构框架、用户体验、商业价值等等等等，前者更加关注自身的成长，后者更加关注业务的成长。
· 核心竞争力
核心竞争力就是有与别人不一样的竞争力，想要做到别人无法替代你的地步，就要有自己个人核心的竞争力。如果你会做一张 Banner，我也会做一张 Banner，你会搞一个页面，我也会搞一个页面，那么你这个人就成为了可有可无的螺丝钉，唯一的优势就是年轻能拼能熬，等你熬锈了老了，随时可以换一颗新的螺丝钉来取代你的位置。所以不管什么阶段，我们要深度剖析自己，认清自己的优势劣势，并采取相应的措施。
剖析自己的核心竞争力给大家一个大致思路，从异样性和共通性入手。自己周围或多或少有团队，条件不足的话现在网络各大平台都很发达，也能融入一些设计圈子中，和不同的人对比寻找自己的核心竞争力。异样性是当前的优势，找出其中的优点，不断地放大深造，变成你的核心竞争力，而和别人不一样的缺点找出来摒弃改正；共通性就是和大家一样的地方，可以看作是伪劣势，因为诸多共通性中总有你最喜欢最擅长的一个，将它单独拿出来不断扩大，逐渐就拉开了差异性，慢慢就转化成你的核心竞争力了，而大家都有的缺点，你把它纠正了，就成为你的核心竞争力了。
来举一个栗子：小王是一名工作了3年的设计师，研究生毕业，由于公司的原因平时工作最多接触的就是一些运营图 banner，也有过很多品牌 VI 的经验，逐渐自己在视觉表现上有自己一定的见解和想法，也更加感兴趣做视觉表现的东西。
那么他的共通性就有：1.工作3年之久；2.研究生毕业；3.视觉表现能力强也更感兴趣；4.做过品牌 VI 的经验；5.有自己的见解和想法。
由此推断出小王的共通性是：1.工作经验丰富；2.视觉表现力强；3.有想法和见解；
异样性是：1.学历优势；2.品牌 VI 相关经验
那么小王可以保持自己学历优势下，可以继续深造品牌 VI 相关，逐渐转型成为高学历的品牌 VI 设计师，那么学历和很多品牌 VI 的经验就是小王的核心竞争力；也可以通过热爱去学习 C4D 动效等软件继续增强自己视觉表现力，配合自己丰富的工作经验逐渐转型成高学历的创意艺术设计师，然后通过将自己的想法见解通过分享会、文章等模式产出，将这一点升级成个人影响力，那么综合下来更加优秀的视觉表现力、丰富的工作经验和个人影响力也会逐渐变成小王的核心竞争力。
只有通过不同维度深度地剖析自己，找到自己的共通和异样点，清晰自己的价值定位，然后制定出适合自己成长目标和方案，不断放大增加自己的核心竞争力，成为不可取代的那个人。
· 批判思维
批判思维是一名设计师必须具备的思维能力，我们不仅仅要学会批判别人的作品，还要学会自我批判。这里不是指无脑的批判（之前遇到过一个实习生刚进到公司里，就把之前所有人做的东西全部批判了一遍，重点是只说产品好看与否，完全不顾及平台一致性商业价值用户体验等等，最后只批判却没有任何实质性的建议，颇有一种指点江山的感觉，然后后面再也没见到过他了），这里是指在自己通过批判别人或自我的方案，不断地优化纠正，最后产出最优质的方案，这是批判思维的出发点。
不同的人有不同的经历，看待问题的维度是多种多样的，所以一个方案产出后，通过不同的人思考后的结果是最好的解决方案。这也印证了波克定理：只有在争辩中，才可能诞生最好的主意和最好的决定。所以当设计师接到产品交互给到的原型图后，不要上手就做图，要通过自己经验和想法去看待原型图，然后提出更加优质的方案进行讨论，如果你的方案更加优质，那么不仅是产品的质量得到了优化，你个人的经验也得到了沉淀，下次遇到相同的场景就可以拿出来复用，直到遇到更好的方案。
唯一注意的事项就是注意沟通的方法，这里后文会提到，比你资历高的人提出的观点更加具有建设性，在毫无头绪没有创新的情况下就听比你更有经验的人的；遇到比你资历低的人提出的观点也不要嗤之以鼻，抓取其中有用的点，没准是一个新的思维方向；总之，有数据说数据，没数据举案例，没案例讲观点，如果连观点都没有的话，照着大佬说的话做就是了。
· 分析能力
分析能力也是设计师必须掌握的能力之一，无论你是创意艺术设计师，还是用户体验设计师，譬如一张 Banner 氛围传递或者文案排版，譬如插画的配色或者场景搭建，譬如产品的布局结构或者用户体验，这些都需要有一定的分析能力。通过拆解改版/竞品/参照产品等，明确产品的最终目的、商业价值等等，有了这些准备后才能对自己的产品进行设计或者改版。而分析产品可以以用户体验五要素的角度来分析，分别是：战略层、范围层、结构层、框架层和表现层，具体相关的文章站酷、PM 社区、36氪等等都搜的到，这里不再细说；之前在分析产品的时候发现有些产品强行套用这五个要素进去不适用，因为有些产品的页面它不存在战略层或者范围层的东西，所以我总结归纳了三个角度来分析产品。
案例就用淘抢购 v4.1 页面（已上线）来讲，三个角度主要是：表现层、用户体验层和价值层。表现层主要就是产品页面的配色、布局结构之类的；用户体验层就是产品的心智透出、交互流程之类的；价值层就是产品深度的价值体现了，比如商业价值、社会价值和用户留存率之类的；大致可以套用这个公式去思考：为什么这里会用这种表现形式，它想要表达怎样的效果，它要达到怎样的最终目的，如果是自己去设计会怎样做。举例：因为淘宝规范为卡片式设计，在视觉表现上要统一，所以淘抢购 v4.1 的业务目的是统一视觉样式，并且它需要给用户产生一种“商品很便宜快去抢购再不抢购就没了”的心智认知，它的最终目的是引导用户去商品 Detail 页面购买商品和提高商品的点击率，这样通过协调关系形成平台、商家和用户之间的利益链商业闭环。
想要提升自己的分析能力除了项目和时间的沉淀外，更多的时候需要自己平时的积累，站酷等平台有很多优秀的作品，作者会把自己设计的分析和思路写出来，我们可以看看别人的想法是否值得借鉴，然后再去分析一下，最后思考如果是自己的话会怎么去做；其次做设计的时候带着同理心去做，把自己当作用户去看待自己的产品，通过不断的积累提升自己对产品的敏锐度，将一些产品的隐性问题挖掘出来；另外可以多看一些好的设计分析书，比如《U一点料1、2》、《以匠心 致设计》等等，将学到的分析方法代入自己的产品或作品中，逐渐分析能力就增强了。
规划能力(Plan)
规划能力是日常工作生活中所需要掌握的能力，主要讲业务规划和职业生涯规划，业务规划能力应对的是我们工作中处理业务所需要具备的能力，而职业生涯规划应对的是我们整个人生职业生涯规划的能力。掌握这个能力后前者会给我们带来业务处理效率上的提升，后者给我们带来整个人生有益的好处，所以这个能力非常重要。
· 业务规划
很多时候我们还在有条不紊地处理某个需求，心想着下班去吃个饭买水果回家洗澡睡觉的时候，突然来了一个紧急的需求，就把我们整天的计划给打乱了，火急火燎地处理完这个需求，然后又把之前的需求做了，最后加班改改改导致整个计划泡汤了。工作中遇到这样的情况很多很多，处理方法有很多种，最经典的就是四象限法则，把事情的紧急重要程度分为：重要且紧急、紧急不重要、重要不紧急和不重要且不紧急四个象限。
很多时候都是道理我们都懂，可是一遇到情况依旧手忙脚乱，根本原因是没有认真地把它代入自己的工作生活当中。画一个象限表，把自己今天所要处理的事务陈列出来五分钟都不需要，一开始可能因为事情不多就没坚持下去，一旦养成习惯后，将来遇到多种紧急情况突发的时候就能认识到这个习惯给你带来的好处了，所谓养兵千日，用兵一时就是这个道理。
在做业务需求的时候，可能会碰到有些需求价值高，有些需求价值低但又很紧急，不知道怎么处理之间的关系，我们依旧可以套用四象限法则来制定一个四象限表：价值高且紧急、紧急但价值低、价值高不紧急和价值低不紧急。什么是价值高的需求呢，就是能让你有充分思考和分析的需求，比如某个页面的改版；价值低的需求则是相对不怎么需要思考和分析的需求，比如根据已有的规范改个颜色之类的。在时间的优先级前，价值高的需求大于价值低的，最后剩下的就是价值不高且不紧急的。因为我们无法拒绝需求，需求来了肯定要是做的，工作不是爱好可以有多种选择性，但我们要学会将需求分解成不同类型的，对自己有成长沉淀的需求那可以作为最高优先级去处理，留够充裕的时间去思考分析，然后沉淀经验稳定提升。
· 职业生涯规划
这个在大学期间就学过相关的课程，只不过当时并没有太深的感触，而是等工作以后才知道这项能力的重要性，它相当于关系着你每个阶段的里程碑，当成游戏中的成就任务也不为过，还是自己设定的成就任务。某个阶段想要达成什么样的目标，想要获得怎样的成就，都是要自己一步一步慢慢规划并且完成出来的。
因为我遇到过几个非常努力的人，努力到让人心悸的地步，每天除去吃饭睡觉工作时间就是在努力学习，到最后还是很迷茫，不知道做什么，不知道如何体现自己的价值。这类没有目的的努力的人是很可怕的，他们努力得没有错，但是这样下去没有成效的努力会让他们觉得努力并没什么用，然后逐渐开始产生抱怨、泄气和放弃等负面情绪。
举个例子来说明：如果你刚毕业，给自己制定的长远的职业生涯规划是在工作3～5年后进到大厂工作提升自己，那么所拆分下来就需要一些项目工作经验和优秀的作品，再拆分下来就是如何做出优秀的作品，细分到最后就是作品当中的元素，比如图标排版布局之类的，那么就制定一段时间内的练习就按照各类元素去做，比如图标画两个星期，APP 设计排版布局练习两个星期，插画练习画两个星期，这样坚持下来就组成一个完整的项目作品了，以此类推。有了规划目标并且在自我驱动的推动下，逐渐实现自己的职业目标。
设计师要如何培养自我驱动可以看我之前的文章：
浅谈设计师的自我驱动
https://www.zcool.com.cn/article/ZODEzMTky.html
执行能力(Execute)
执行能力是指自我在工作&学习中执行的能力，执行能力为一个设计师最主要的核心技能，一切的能力都凌驾于这个基础之上；哪怕你再能说会道，能赋予你的设计各种价值，能给予你的设计各种环境，但这些都是第二步，第一步就是你的设计表现达到期望值，如若第一步稿子都不好看，那么没人愿意会听你叙述的。前文已经提及到了，设计师在初级至中级阶段的时候大多数注重的就是表现手法，如同学说话一样，表现手法可以看作是汉语拼音，然后才是组成一个个字，最后组成一句完整的话语。
· 自我执行力
提升自我执行的能力我大致分为两个步骤：看和做。
首先先来说看，看其实是提高自己审美的一个过程，通过看一些平台网站的优秀设计作品，久而久之自己的审美能力才会提高，然而看分下来一种是带有目的性和不带有目的性的。不带有目的性地去看是在自己有空余或学习时间，通过浏览设计网站采集学习一些你觉得好看的作品；采集是一个很好的习惯，我觉得是每个设计师必须养成的习惯，把自己平时觉得好的表现形式收集起来，等到某一天需要用到的时候，脑海中对当前场景会有一定的印象，再根据印象去寻找采集到的作品，能很大程度上节省自己脑爆的时间，哪怕没有采集或者文件丢失，自己的脑中大致也会有一个雏形方向。而带有目的性地看是指针对某一个模块去搜集整理，比如今天我需要做一个关于内容的模块，那么我就会去寻找一些做内容的产品设计，搜集到的各类关于内容的表现手法，然后结合自己的经验和分析，找出最适合自己产品的一种。
仅仅看是不够的，在看过之后我们需要动手尝试才能算真正地沉淀自己所看到、学到的东西。做设计最忌讳的就是“眼高手低或者眼低手高”这种状态，有了审美但表现手法跟不上，或者说表现手法有但是审美跟不上。一定要在自己吸收了一定的审美后，通过自己的尝试去做出来，才能真正的沉淀到自己的大脑当中，变成自己的表现手法之一。最后通过大量的积累，结合对商业需求的判断形成设计策略，才能从容应对不同的产品需求，哪怕你今天做金融相关的产品，还是明天做电商的产品，后天又改做工具类产品，一旦形成了自己不同的应对策略，才能做到真正意义上的游刃有余。
很多时候我们只关注到鱼的大小、鱼的肉质是否鲜美那20%层面的东西，往往忽视了80%最重要的捕鱼技巧和方法；看到的只是产品是否好看，交互是否流畅，体验是否良好，没有往更深层次地去想这个产品的商业背景是什么，设计师为什么要这样设计，如果换做自己的话会去怎么做；毕竟我们所做的一切训练、思考都是为了更好地为工作服务，就如同脱离了商业背景以后，有些设计就只是单纯的炫技，并没有解决问题的价值，而设计师的工作核心就是解决问题，所以我们要结合作品的背景、价值等因素，去看、去做、去学相应的表现手法才是自我执行的核心所在。
表达能力(Express)
表达能力是设计师除去执行能力外第二重要的能力，小到平日里的沟通对接，大到述职晋升面试，都离不开表达能力的支持。有些设计师经常面试怎么都过不了关，我本以为是作品集的问题，可是看完之后作品方面完全没有什么问题，具体了解后才知道是在面试过程当中不知如何阐述自己的作品和思路或者在阐述过程中由于紧张等因素导致表达断断续续不顺畅，面试官就会觉得这个人不靠谱然后 PASS，明明做图很优秀却输在了表达上，这种情况就很憋屈。在广告公司中，一个 LOGO 或者广告视频往往只是赠品，出售的却是这个品牌VI的故事；如果一个设计师不懂得怎么阐述自己的业务，不懂得怎么推销自己的方案，不懂得拓宽自己的个人影响力，就单纯的只会执行作图的话，那么这名设计师是不合格的。网传有一个段子“一个公司的工资排名规律：用 Word 的不如用 Excel 的，用 Excel 的不如用 PPT 的，用 PPT 的不如讲 PPT 的，讲 PPT 的不如听 PPT 的，听 PPT 的不如听汇报的，听汇报的不如决定的，决定的不如签字的”，由此可见表达能力在职场中的重要性。
· 业务表达
业务表达是指在自己工作的过程当中，对自己的设计方案进行阐述。大部分设计师会遇到一个困扰，当设计稿做完以后就不知道怎么去表达自己的设计理念，被业务方/面试官/老板提出质疑时，比如：“你这产品的设计为什么要用红色？”、“聊天信息这块儿为什么要用小气泡的样式？”，往往不知道怎么去说，有一种当时就觉得好看所以这样做了，也没有去想那么多的感觉，或者其他优秀的作品/竞品是这样做的，我也就这样做了；那么结果往往就是自己的专业性遭到质疑，然后转变成业务方/老板进行设计主导，形成“改来改去还是第一版好”这样类似的恶性循环中。
那么如何提升自己的业务表达能力呢？首先设计师要提升在设计领域的专业度，通过学习吸纳设计相关的知识，然后代入自己的设计当中去试着阐述设计稿，准备工作先做到位，收集相关的数据，掌握相对应的设计理论，先说服自己再去说服别人。比如：“通过色彩心理学得知，红色能带给人兴奋、激动、热情等积极情绪，而我们产品所需要透出的氛围是热情的、积极向上的，相对应地激发出用户的正向情绪，所以我这里使用红色。”、“根据近半年数据研究得出，产品聊天信息模块使用过程当中女性用户占总用户数的85.9%，而小气泡样式相对比其他样式更能迎合女性用户群体的喜好，通过 A/B 测试结果得出，使用小气泡样式后数据上涨了15%左右，所以聊天信息模块整体改版成小气泡的样式。”
通过自己前期的准备（设计理论知识补充、用户调研、数据测试等），将自己的设计理念表达出来，主导整个设计的方向，必要时可以理性地坚持自己的设计方案，毕竟无论是老板还是业务方，出发点都是希望自己的产品能做到最好最完善，只要你给出数据支撑和专业性的建议，他们一定都会采纳接受的，而最后你的能力和专业性也得到了对应的认可。
· 书面表达
我本人是强烈建议在能力达到一定程度的时候，通过写作来检视自己成果的。因为往往很多东西自己是明白的，但是写出来让其他人看懂是另外一种能力了。自己一段时间的职业经验总结、对设计的见解看法、自己独特的设计思维、一本书的读后感等等都可以通过书面表达出来，某个知识理论难的不是学习，而是将它教授出去，因为只有你想要把某件事说明白，阐述得其他人都能看懂，那么首先你要对这件事理解得很透彻，然后通过自己的经验和见解，转化成通俗的语言说给别人听。最好的状态就是与你同样级别的人你能与他用专业术语对话，级别比你低的人你能把理论转换成他能听懂的语言进行交流，这样才算是对理论概念理解透彻到位。
大家也明白，学习最有效的方法不是输入而是输出，设计也是一样的。在学习某种理论方法后，通过书面表达出自己的见解和想法，并代入到相应的例子当中，做到举一反三才能算是真正的学到了这个知识点。
· 述职
述职一般出现在晋升报告或者面试当中，“诸侯朝于天子曰述职，述职者，述所职也。”述职可以说是工作报告中的总结性报告。向自己的老板述职是为了升职加薪，向面试官述职是为了获取更好的工作机会；工作成果有了，但是述职做不好的话，在老板/面试官眼里你就做了无成效的工作，述职没有想象的那么简单，但是也没有那么难，很多人都会经历两个述职的误区，这些误区我经历过也看到过，所以总结出来警醒大家。
一、把述职当作流水账
把述职当作流水账是很多新人容易犯的错误，当述职的时候，有的人就会陈列出自己今年做了多少多少工作：“我今年改版了 XXX 模块”、“我设计了 XXX 的首页”、“我通过调查研究自主推导改版了 XXX 模块并落地成功”等等，这时候你的老板/面试官会心里会想：“所以呢？”“然后呢？”，工作结果固然重要，但是决定你能否晋升/录用的，不仅仅是把你做的工作进行流水账般的描述就够了的。
二、把述职当作邀功大会
这个误区相对来说更高端一些，述职的时候有的人常常会像邀功一样：“我今年通过改版了 XXX 模块，导致用户量从50%上涨到了80%”、“通过调查研究改版了 XXX 模块，最后通过 A/B 测试发现数据上涨了5%，最后落地全部实施新的设计方案”，这些看似阐述了产品的背景、自己做了什么以及结果，但是往往来说还是不够的，以上统统可以归为无效述职。
你做了什么重要吗？没那么重要，重要的是你带了什么样的价值。述职所需要你做的，老板/面试官所想要了解的就是：分析为什么产品之前数据会那么低？你是通过那些方法得出解决方案的？为什么那么多种解决方案里你要选择这一种？你这样的方法能否沉淀成体系？如果换一个人来按照你的方法做是否可以得到同样的效果？有效述职也就是决定你能向上一步的，是把你在工作中的感性认知上升到理性规律的归纳总结的能力体现。
· SCQA模型
SCQA 模型是一个“结构化表达”工具，是麦肯锡咨询顾问芭芭拉·明托在《金字塔原理》中提出的，而这个模型可以套用在业务表达、书面表达以及述职任何场景当中；S是指场景(Situation)，C是指冲突(Complication),Q是指问题(Question)，A是指解决方案(Answer)。
无论你是在向业务方/老板阐述方案做工作汇报，还是自己写作梳理都可以用到这个模型；S场景陈述的通常是大家都熟悉的事、普遍认同的事、事情发生的背景。由此切入既不突兀交代了事情背景又容易让大家产生共鸣，产生代入感，然后引出冲突C。Q是其中发现的问题，最后A给出相对应的解决方案，是对Q的回答也是接下来我们要阐述的内容。整个结构其实是形成良好的沟通氛围，然后带出冲突和疑问，最后提供可行的解决方案。
我们熟知的广告词经常使用这个套路：
得了灰指甲——描述场景【S】
一个传染两——发生了冲突【C】
问我怎么办？——提出问题【Q】
马上用亮甲！——给出解决方案【A】
这个模型无论作为演讲的开场白，作为向业务方/老板阐述设计方案的开场，还是作为一篇文章的序言都是屡试不爽的。S场景需要让对方产生共鸣，必须让对方产生一种：“是的，你说的好有道理”的反应，只有场景被认同了才能继续故事的发展，这时候打破你给对方营造的安全感，制造C冲突，相继提出Q问题，共同确认面临的一个问题，然后你给出你的A解决方案，而这个解决方案就是你整个叙述的核心和中心思想。
比如你要向业务方/老板阐述你的设计方案，就可以这样来描述：“在 XXv2.0 版本上线后（交代场景），收集了近半年以来的数据发现，女性用户相对减少了20%（发生冲突），为什么会减少20%的女性用户（提出疑问），根据我的调查研究发现原因是改版后整个产品色调偏男性化，由于我们产品的受众群体大多是女性用户，男女比例为1:3，所以在 v.2.1 的改版中我将整个产品色调改为偏女性化的方向（给出解决方案）”。
同样，我写这个章节的思路就可以这样理解：设计师们工作中通常会面临述职、面试以及写文章等情况（交代场景），但是往往很多设计师不知道如何去表达，思路也不是很清晰，导致述职无效、面试失败等情况（发生冲突），要如何避免这种情况发生？如何锻炼自己的表达能力？（提出疑问），那就要多通过 SCQA 模型在生活工作中去练习表达（给出解决方案）。
生活能力(Lives)
最后是生活能力，设计不是工作的全部，工作不是生活的全部，我们应该过好自己的生活，产品设计都是从生活中获得灵感和启发的，我们如何对待自己的生活，我们就会得到怎样的反馈。多陪伴下自己的家人、培养一个兴趣爱好、保持学习新鲜事物的动力等等，成为一个有趣的灵魂。往往设计师能从多样化的生活中发现灵感和启发，也能从生活中找到不同用户的痛点和感知；如何做一名好的设计师，就是带着同理心去做设计，如何带着同理心做设计，就是将自己当作用户，而用户是融入到生活中的。下面我就来例举两个通过生活中的启发改变产品设计的例子。
· 用户拥有感
在购买星巴克的时候，为什么服务员要把顾客的名字写在杯子上呢？难道仅仅是为了分辨嘛？像其他奶茶店一样贴一张打印好的便签不就好了么？去宜家购置家具的时候，为什么要让顾客自己亲手组装家具？可口可乐为什么可以定制自己城市的易拉罐？因为这一切都是要给用户塑造拥有感，人是一种很不理性的生物，只要先拿到一个东西，就会觉得自己拥有这个东西，就不想放掉它了，这就是拥有感最根本的示范。从心理学的角度来说这被称为禀赋效应，意思就是我们对于自己所拥有东西的价值往往会看得更重。这就是为什么小时候玩的玩具、收集的画册、穿的衣服都已经没什么用了，我们还要留着当纪念的原因。因为我们的人性对于拥有感非常执着，对于自己得到的东西非常迷恋，当我们觉得要失去它的时候，会有一种损失感，觉得很不舍，会觉得心里很难受，这就是禀赋效应在我们身上发生了最明显的效果。
而这样的营销策略被用到产品设计当中，例如前段时间很火的软件 Zepeto，每个人都不一样的生成图片洗刷着我们的朋友圈；例如每年年末的账单、网易云音乐总结等等，账单它只是一份账单，根据不同用户生成不同的账单，也就赋予了不同的意义；又例如各种 H5 性格测试生成的分享卡等等，这些都是产品设计中从生活中营销案例中汲取经验的体现。
· 线下导购转线上
每当我们去到商场线下商店的时候，导购员和我们素未谋面，但是却可以通过我们的大致年龄、穿着、性别等因素推断我们需要什么样的产品，然后向我们推销对应的产品，如若刚好触动我们的需求，于是我们就会发生购买这个行为。生活中线下导购的方式也被运用到线上导购的产品中，同样平台和用户素未谋面，可是可以通过掌握大数据，分析用户近半年、近一个月的购买和浏览商品的数据，结合相对应季节等因素推送给用户所需要的产品。比如我平时经常浏览一些潮牌个性的衣物，现在正值冬季，想买一件冬季穿的棉衣，那么当我打开淘宝的时候，系统会推送一些潮牌大衣等冬季衣物在首页，我正好有这个需求又符合我的口味爱好，自然而然就会点进去购买了。
有一条创业准则是这样说的：“如果有点儿闲钱，还有点时间，但又找不到商机，最好的办法就是去闹市、电梯、小区人流量最高的那个大门口，端杯茶，静静的听人们抱怨。”，谷歌、苹果公司的设计思维首当其冲的就是带着同理心去设计、去制定设计策略，同理心来源于生活，而这一切只有设计师把自己的生活经营好，才能从当中获得启发和感悟，然后代入自己的设计理念当中，设计出真正能根本解决问题的产品。
其次偶尔会从网上看到或者听说 XX 设计师猝死，XX 设计师检验出 XX 疾病等等，每每看到此类消息都会感到痛心，工作不是生活的全部，如果连自己的工作和生活都处理不好的话，那么说明这个人生活能力真的很糟糕。如果一个人整天筋疲力尽打不起精神，那么他的工作会做得好嘛？所以在这请求大家合理安排好工作时间，劳逸结合，多锻炼身体，多花些时间陪伴父母、家人，这样才能带着健康的身心去工作，从而取得更好的工作成果，形成一个良性的循环。你怎样对待生活，生活就会怎样对待你。
作者：雨灰 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
标签栏也叫Tab Bar，是移动端应用程序中最常用的UI元素之一。标签栏出现在应用程序屏幕的底部，可以让用户在应用程序中的不同部分之间快速切换。标签栏可以是半透明的，也可以具有背景色，在所有屏幕方向上都保持相同的高度，并且在显示键盘时被隐藏。标签栏可以包含任意数量的标签，但是可见标签的数量根据设备的大小和方向而变化。如果由于水平空间有限而无法显示某些选项卡，则最终的可见选项卡将变为“更多”选项卡，该选项卡将在单独屏幕上的列表中显示其他选项卡。
标签栏在任何目标页面中的高度是不变的，iOS 规定它的高度为98px(iOS @2x)。但因为 iPhone X 之后的全面屏手机引入了 Home Bar ，所以在进行界面适配的时候，请务必要加上 Home Bar 自身的68px高度。别让Home Bar遮挡标签栏中标签的展示，这会让两个控件发生操作手势冲突。
史蒂文·霍伯（Steven Hoober）在对移动设备使用情况的研究中发现，人们会根据自己的设备，需求和背景以多种方式触摸手机，触摸手机屏幕或按钮的用户分三种基本方式：抱着手机的人占36%、两只手使用手机的人占15%，而49％的人依靠一只手在手机上完成事情，除此之外75％的用户仅用一个拇指触摸屏幕。
在下图中，出现在手机屏幕上的图表是近似覆盖图，其中的颜色表示用户的拇指可以接触到哪些区域以与屏幕交互。绿色表示用户可以轻松到达的区域；黄色，需要伸展的区域；红色区域，要求用户改变握持设备的方式。
这意味着：
将常用的“行为”放在屏幕底部很重要，因为只需一键式的交互即可轻松到达这些“行为”。
底部标签栏设计应当遵循三大原则：结构合理、位置清晰、可预测行为。
为了让标签栏表现清晰，两大平台在规范里都对标签数量给出了相同的建议：建议标签栏内的标签个数为3个至5个。因为标签过多会使每一个单元标签的可触空间降低，人们在物理上（手指）难以点击或误触，除此之外还会增加应用程序结构的复杂性。
注：如果你因为产品结构非常繁杂，标签数量想要达到更多，那么在 iOS 中就会给你强硬处理，iOS 人机交互规范告诉产品设计者们：标签栏虽然可以包含任意数量的标签，但可见标签的数量会根据设备的大小(平板或手机)和方向(竖屏或横屏)而自适应变化。如果由于水平空间有限而无法显示某些标签时，最后的一个可见标签将被会被系统强行转换为“更多”选项，需要用户点击“更多”选项之后，系统才将在单独屏幕上的列表中显示其他被隐藏的标签。
“我在哪里？” 是用户成功导航所需要回答的一个基本问题，我们应当采用适当的视觉提示让用户知道目前所处的位置（选中状态）。在APP应用中我们常见的处理方式有4种：改变图标样式、改变大小、改变颜色、改变展示样式。它们并不一定是独立存在的，可以同时作用于一个标签。
选取每个底部导航选项都有通向它的目的地，底部导航应当将用户直接引导到相关页面，不应该打开菜单或其他窗口。如果在某些情况下可以使用标签，但在其他情况下则无法使用，则应用程序的界面将变得不稳定且不可预测。我们要确保所有选项卡始终处于启用状态，并说明为什么选项卡内容不可用。例如造作新家APP，当用户处于未登录状态时，就不能查看底部标签“我的”信息，当我点击标签“我的”，就会弹出快捷登陆界面，这样就能让用户明白不能使用的原因是账号未登陆，从另一层面讲也很好的引导了用户注册与登陆。
注：不要使用标签栏为用户提供对当前屏幕或应用程序模式下的元素起作用的控件，如果需要提供控件，请使用工具栏。
在设计标签栏前我们首先要了解它的基础规范，在保证基础规范合理的情况下再去进行设计。
为了保证图标的尺寸大小一致性，我们往往会建立基础的网格尺寸来进行绘制图标，下面就以常用的24x24为大家举例：
网格包含2px出血位。这样可以确保图标在导出时将保留其所需的比例和周围的空白区域，同时还能够很好的平衡图标的视觉重心。
最后加入图标的keyline，keyline由圆形，正方形，矩形，正交，三角形和对角线组成。它可以为您提供图标集中基本形状或比例的一致大小。这使创建视觉上的稳定变得更加容易，并有助于在设计相似比例的图标时有共同的参考准则。
在24尺寸下的keyline构成如下（24尺寸下的出血区域为2）：
当把图标画在网格上时可以很好的规范图标，让它们从整体的视觉上看着统一规范。
标签的数量以及标签的展示形式决定了标签的布局形式，标签的常见布局一共有2种：屏幕等分、图标左右间距相等。
屏幕等分是最常见的标签布局形式，因为不管它存在多少图标，都可以用它进行屏幕划分，计算方法也十分简单，屏幕的宽度除以标签个数就是每列宽度。采用此等划分的案例有：懂车帝、今日头条。
图标左右距离相等多用在标签数量为3个的情况下，计算方法是先去除中间图标的尺寸，然后再左右平均划分等距。相对于屏幕等分，图标左右间距相等划分更为紧凑。
根据菲兹定律，使用指点设备到达一个目标的时间，与当前设备位置和目标位置的距离（D）和目标大小（S）有关。标签栏作为向用户展现产品框架的关键控件，热点区域（可点击区域范围）的设定一定要合理。底部图标尺寸较小，如果将图标作为热点区域，那么可点击区域就偏小，很可能出现用户点击不到的情况，正确的做法是以标签栏的布局作为基础设定，在标签相邻的部分划出一定区域作为不可点击区域，以免用户误操作，参考如下，红色为可热点区域，蓝色为不可点击区域：
在产品设计中，不同样式的图标会给人不同的感受，随着APP风格越来越简洁化，标签栏图标风格紧紧地跟着界面的风格而改变。经过长时间的沉淀，标签栏图标常见的默认设计样式一共可分为四类：线性图标、面性图标、线性+面性图标、轻质感图标。
线性图标通过线来塑造轮廓，在图标设计中使用的线有粗细之分，常用的App图标设计线的粗细一般有2px、3px、4px，不同的线条粗细所带来的视觉感受也不同，我在“如何让你的图标具有说服力”文章中提到过，线条越粗那么图标的性格就越活泼、粗旷，线条越细图标性格就越精致、商务，图标使用描边的粗细可以根据产品的气质来决定。
选中状态：当选中状态为高亮线性图标时，选中状态的图标颜色会与默认状态的图标颜色形成较强的反差，但由于线和线的差异性并不强，线性图标没有面性图标更具吸引力（引导性），即使加入了高亮色识别度也不及面性强。airbnb在处理线性图标选中状态时就考虑到了这一点，选中状态下不仅对图标的颜色做了较大变化，还加大了图标及文字的描边粗细，从一定程度上加强了图标的引导性。（注：线性状态的图标选中状态也可以变为面性图标或线性+面性图标）
面性图标是通过面来塑造形体的图标，采用了剪影的设计形式，通过线或者面去切割基础轮廓面，通过分型来塑造图标的体积感，面性图标的承载信息相对与线性图标来说更重，更具有引导性。
选中状态：面性图标的选中状态为高亮面性图标，颜色可以为纯色、也可以为渐变、透明。爱奇艺的选中状态就采用了高亮面性图标的展现方式，除了把图标底色及文字的颜色加深以外，还加入了品牌色，甚至为了让“会员”标签更加突出，还单独对“会员”标签的颜色进行了修改。
线面结合图标相较单一的线性图标或单一的面性图标样式更加丰富、也更富有趣味性。从设计的角度上说，由于元素的多样化，设计更容易获得好的效果。相反，如果运用不当会显得图标非常杂乱，如何有效的把控好两者之间的过度是关键。
选中状态：线性图标的选中状可以为高亮的线性+面性图标。懂车帝在处理标签选中状态时就把图标底部加入了高亮黄色圆形块状，即保存了线性也添加了面，加深了选中状态的视觉重量，更加明确的让用户感知自己所处的位置。
轻质感图标层次简单，用色素雅干净，采用轻投影、轻渐变的方法设计，这类图标具有一定的立体感，能给人轻盈、简洁、精致的感觉。轻质感图标在标签栏中运用的较少，在特殊情况下才会使用，例如盒马，就把轻质感图标用在了首页标签与盒马小镇标签，首页标签的引入是为了让用户加强对品牌形象的认知，而盒马小镇标签的引入则是为了加强图标的引导性。
*图标样式的常用变化（选中与未选中）
在我调研上百种应用程序中，发现主流的APP标签栏样式变化大致分为六种：线性-线性、线性-面性、线性-线+面、面性-面性、面性-线+面、线+面-线+面。虽然标签的样式变化繁多，但是使用率最多的是“由线性转面性”标签。
标签栏的不同展示形式会给用户带来不同的使用习惯和使用感受，常见的标签展示形式有四种：图标+文字、纯图标、纯文字、舵式。
图标+文字是最常见的标签展示形式，为了让用户能够很好的明白图标的意图，所以在图标下方会配有文字提示，这样就能大大的降低误读的可能性。正因为有文字提示，所以没有必要过于担心图标的识别性问题，那么图标就可以得到更深的延展，可以做的更有趣，更具有产品气质，甚至可以代入更深层次的动效。
例如东家·守艺人APP，专门售卖各种手艺人的亲手制作的各种艺术品，面向的对象是喜欢传统文化的人群，在这样的背景下东家结合宋体的笔画（笔画拆分）把图标设计的更加传统、古朴，创造出具有东方韵味且极具形式感的图标设计。
采用纯图标展示形式的产品比较少见，纯图标样式的最大缺点就是识别性低，没有文字说明会导致用户很难找到自己想要去的位置，也不明确自己所处的状态。所以我们如果要设计纯图标形式，那么必须要考虑到图标的识别性问题，间接的舍弃掉图标更多的延展性，让图标变得更规矩。（识别性的提升我之前写的图标文章中提到过，主要可以从大众认知隐喻与真实世界映射两个方向出发去提升）
使用纯图标样式的产品特征：产品单一、领域垂直、小众化、用户群体接受度高。即使满足这些条件下产品使用纯图标标签，用户第一次使用往往也是比较迷茫，需要等用户熟悉后才会得到好转，所以一定要慎用。除此之外不太建议用于电商、视频、学习、社交等领域。
对于我们设计师来说使用纯图标样式的产品中最为熟悉的就是花瓣了。
采用纯文字展示形式能够更直观的让用户进行操作，遵循简单易用的原则。适合用户群体跨度较大的产品，多用于直播类、内容类、简单工具类APP中。缺点也显而易见，图标样式比较单一，没法加入更多趣味化、具有产品特性的元素到标签中。
采用纯文字展示形式的产品有很多，最熟悉不过的就是抖音，抖音的标签默认状态下采用了纯文字形式，选中状态则把文字高亮显示，并且底部加入了圆角矩形，对于用户群体跨度较大的产品，这样的展现形式再好不过了。（抖音在途中改用过图标+文字格式，不过后面也放弃了，我当时用着图标+文字类型的抖音，的确感觉太奇怪！）
舵式标签可以看为底部标签式导航的一种变体。它在后者的基础上，突出强调了一个标签并且放在中间的位置，样子看起来像攒了一个舵，所以取名为舵式标签。一般舵式标签的颜色、大小等视觉表现会被设计得和其他普通标签有所差异，通过视觉对比的方式吸引用户关注。舵式标签通常和产品框架体现无关，大多数应用程序使用舵式标签是用来承载系统功能。起初是因为社区类APP为了激励和方便用户随时随地地输出UGC内容，所以把触发用户创作/发布的功能按钮放置在标签栏中。
因为舵式标签可以很好地承载产品的重要功能，而被许多的应用程序设计所采用，经过越来越多的应用采用舵式标签，使用的形式也越来越多样，它现在并不再单一地用于承载产品功能，而是配合营销场景、付费场景，给产品的变现、拉新赋能。拼多多就把它拉新的主要入口作用到了舵式图标上，并且为了让图标更加显目，甚至把图标做成了轻质感的形式体现，同时也通过2像素的线性图标减弱其他4个标签的引导性。
标签栏不仅是向用户展现产品框架的关键控件，还可以贯穿整个产品的商业价值的体现，它是连接着整个产品最重要的顶层信息。如果想要让标签变得更加丰富，想要标签内容中含有更多的情感需求、 商业需求、运营需求，那么我们可以重点从这两个层面考虑：视觉层面、交互层面。
在视觉层面上我们可以迎合用户的偏好与期望，通过丰富视觉体验的方法来增加内容的观赏性，这样不仅能够很好的向用户传递着产品调性还能吸引用户关注以及引导用户进行操作。
装饰性图标仅仅是用来提升整个界面的视觉体验，通过丰富视觉体验的方法来增加内容的观赏性，这样不仅可以吸引并留住用户，还可以让整个用户体验更加积极。
整体装饰性图标的出现往往是为了满足情感需求与商业需求，整体装饰图标并不是一直存在的，它的特点是季节性与周期性，并且它并不具备任何功能性。
从情感需求出发设计装饰图标：例如世界杯火热进行时，优酷为了满足用户的情感需求，就把标签栏的图标全部替换为带有世界杯元素的图案，让用户与其产生情感的共鸣。
从商业需求出发设计装饰图标：现在的年货节，之前的双十二、双十一、618等，每到节日促销活动的时候，很多电商应用都会换上装饰性图标，例如一号店，在过年前就把标签栏图标全部改为含带过年气息的元素，提前来预热活动，引导用户消费。
单个装饰性图标的出现大部分都是为了满足运营需求，运营为了推出某个活动或功能，往往会单独装饰某个图标的设计视觉，以便于提高图标的引导性，最直接的例子就是我刚才提到过的拼多多。
我们可以在标签中加入更多的品牌基因，让其与品牌产生联动性，这一形式是大部分应用程序都在做的，我们可以从这6个层面加入品牌基因：品牌颜色、品牌LOGO、品牌元素、品牌名称、品牌性格、品牌吉祥物。
色彩是图标设计中重要的构成元素之一，我们可以直接提取品牌色作为图标设计视觉元素。例如站酷，站酷的品牌色是黄色，标签栏的图标（选中状态）就提取了品牌的黄色，让其与品牌调性高度一致。
当然品牌颜色除了可以直接用外，还可以在提取时适当调整色彩的饱和度、明度，做更多的形式变化。例如懂车帝，就在原有的黄色基础上做了些许调整，图标采用黄色透明渐变的处理方式，在与品牌颜色呼应的同时，使得整个图标更加精致、有活力。
提取品牌LOGO是最常用的使用方式，我们从品牌中提取出来的图标一般运用在APP首页标签。因为首页是APP中最重要的页面，也是进入APP默认的页面，把首页图标替换成品牌LOGO，能反复加强了用户对App的LOGO印象，这样不但使App内外形成了视觉联系，同时也二次传递了品牌形象。例如大众点评，它的首页标签就用了品牌LOGO，同时也使用了品牌颜色。
我们可以在品牌中提取它识别性较强的局部元素作为图标。例如虎牙直播，它就提取了品牌卡通形象的外轮廓作为首页图标。
品牌提取的元素并不只是所见到的品牌视觉形象，还可以提取与品牌内容强相关的元素。例如QQ音乐，它并没有把它的品牌LOGO直接放于其中，而是通过大众所熟知的音符作为首页图标。
如果你的品牌还不为大众所熟知，那么为了强化用户对品牌名称的认知，可以把品牌名称直接放入标签栏中。例如MONO，就把它的名称分为四个字母分别放在了4个标签内，需要注意的是这类图标不能单独出现，因为它本身不具备识别性与引导性，必须配合文字一起出现，这样才能让用户理解标签的真正功能，我们不能为了设计而设计。
图标风格可以与品牌性格保持一致，一套带有浓厚品牌感的图标，会让人记忆犹新。例如：每日故宫，它的图标就非常具有特色，结合了品牌的性格以及定位，加入了众多的古代中国元素，整体看起来有股浓浓的古韵之风。
现在大部分品牌都会含带吉祥物，我们可以在设计图标时提取吉祥物的外形，把它用于产品的标签中。例如盒马，它就把吉祥物做为了底部标签，不过需要我们注意的是如果吉祥物的风格与我们的图标风格差别较大，我们就需要对它做风格化的处理，不然看起来就十分突兀。（盒马对吉祥物做了轻质感的风格化处理）
让用户自定义的标签现在越来越常见，而每个产品对其思考的层面也都有所不同。自定义标签往往出现在个人中心，它会根据用户上传的头像或用户的捏脸生成图标。
目前市面上很多APP都把用户上传的头像作为了个人中心标签展示，例如我们常用的百度网盘就采用了此方案，当用户注册未上传用户头像时，会默认显示系统标签，当用户上传完后就会显示用户头像，并且如果你是会员，还会把会员标示显示在标签的右上方，彰显会员用户的尊贵性。
我们可以很明显的发现百度网盘的底部标签默认状态为线性图标，而个人中心不管默认状态还是选择状态都为面性图标，所以如果你想要加强个人中心的引导性，那么可以采取此方案。
捏脸功能作为SOUL的一大特色，捏脸的虚拟形象赋予了真实人格属性，加强了社交的传播性，所以SOUL决定把用户自定义的捏脸放于个人中心标签中。
除了对标签做视觉的提升外，我们还可以对其加入合理的交互效果，一方面可以提升用户在使用产品过程中的乐趣，另一方面还可以为用户提供更多便利，从而增强用户体验。
在不同的状态下点击标签的功能也不一样，一个标签可承载2到3个功能，可以满足不同状态下的用户需求。
SOUL的广场标签（进入选取页+刷新）
SOUL的广告标签承载了2个功能，当你处于其他标签时，点击广场标签则直接进入到广场页面；当你处于广场页面中时，再次点击标签则会刷新整个页面。
有货的发现标签（进入选取页+上传图片）
有货的发现标签也承载了2个功能，在设计上运用的非常巧妙，当你处于其他标签时，点击发现标签则进入到发现页面；当你在发现页面时你的发现标签则变为了上传图片标签，可以点击上传图片。
淘宝首页标签（进入选取页+刷新+置顶）
淘宝的首页标签同时承载了3个功能，当你处于其他标签中，点击首页标签则直接进入到首页页面；当你在首页页面第一屏时，你点击首页标签则会刷新整个页面；当你滑过3分之1屏时，首页标签的功能则变为置顶。所以在不同状态下首页标签也会具备不同的功能，并且每种状态下的标签样式也是不同。
爱奇艺首页标签（进入选取页+到达指定位置+置顶）
爱奇艺的首页标签也是同时承载了3个功能，不过它与淘宝有些许不同，爱奇艺并不能刷新页面，而作为替换的功能是直接到达指定位置“猜你喜欢”。
我们做的设计不要仅限于视觉所看到的，还要考虑到所触摸的、所听到的，我们可以利用触觉与听觉去辅助用户确认自己的选择，当然我们一定要合理利用，反之则会让用户感到十分反感。
西瓜视频与今日头条在点击标签栏图标时手机就会发出轻微的震动，给予了用户很好的点击反馈。
SOUL点击星球标签时手机就会发出恋爱铃声，在SOUL的产品报告中，SOUL主要面对女性用户，女性用户约为男性用户的2.4倍（女人更偏感性），并且它的主要需求是满足测试、匹配、交友，所以恋爱铃声能够很好的引起用户的情感共鸣。不过铃声有利有弊，当你在特定场景下使用SOUL时，点击到星球标签周围人也都能听到恋爱铃声，实属尴尬，所以我在特定场景下使用SOUL时都会默默的关掉声音。
精彩的图标动画，对整体的设计具有画龙点睛的作用，降低标签切换时的枯燥感，提升操作的愉悦度和期待感。甚至可以通过 tab 的动画设计给用户传达出整个 APP 设计的品牌及理念。标签动画往往都比较简单，主要有：缩放、旋转、颜色过渡、位移、抖动、填充、线性轨迹、结合容器、元素介质等。接下来我们来看看SOUl、虎牙、汽车之家是怎么做的。
SOUL的底部标签栏运用到了弹性动画、结合容器以及线性轨迹。带有弹性缩放的标签反馈，让整体的设计更加具有趣味性，相比线性缩放也更有视觉冲击力。图标的运动规则：先从 0 放大到最大（数值根据实际情况设定），然后再回弹至正常大小。除了弹性动画外，它还结合了容器的元素对内部进行了颜色的替换以及单线条的轨迹动画。这样的处理不仅趣味性十足，还强化了选中当前状态，整体标签切换的一致性也较高。
虎牙一直是我比较喜欢的直播平台，它的底部标签动画也是非常值得借鉴，运用到的动画形式是抖动与趣味表达。抖动是通过图标的左右、上下快速位移或旋转形成，整体的动画效果节奏较快，具有一定的速度感，使整个标签切换的情绪表达较为俏皮、可爱。除了抖动外还在切换过程中代入了更多小元素的趣味表达，赋予了图标更多的性格，对我们的设计进行再升华，从而提高整体设计的质感和趣味。
因为用户群体的不同，汽车之家在标签动画的设计上也相对简单、严谨，它的动画形式主要是结合容器与细节晃动。选中效果由线切换为面，并加入了品牌底色，这样能够清晰的给用户传达当前页面。并且为了不使整体的切换效果变得生硬，在切换过程中采用了透明度与弹性缩放，让其过渡的相对柔和。在细节的处理上也是非常用心，每个图标都带有笑脸的形状，间接的给用户传达“笑脸”信息，在选取标签时内部形状会轻微晃动。整体来看汽车之家的标签动效虽然偏向严谨，但是在细节上也给予用户传达了更多的情感。
作者：黑狮力 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
一、图标的定义及分类
图标是具有高度概括性的、用于视觉信息传达的图像。图标常常可以传达出丰富的信息，并且常常和词汇、文本搭配相互搭配使用，两者互相支撑，或隐晦或直白地共同传递出其中所包含的意义、特征、内容和信息。
在数字设计领域，图标作为网页或者UI界面中的象形图和表意文字而存在，是确保界面可用性的基础设施，也是达成人机交互这一目标的有效途径。
释意性图标是用来解释和阐明特定功能或者内容类别的视觉标记。它并不是一定被点击可交互的UI元素，在很多时候只是有辅助解释其含义的文案。在不搭配文本的情况下用户会借助这些图标来获取信息。不过有时候图标表达的含义可能还不够完整或者清晰，所以会将图标和文案搭配起来一起使用，这样可以大大降低误读的可能性，释意性图标一共可以分为以下三类：
2-1-1纯图标：
例如火球买手APP中的店家“特定标签”，以及图文展示下的“观看数量图标”与“收藏图标”，它们并不需要用文字去解释，用户也知道它表达的是什么。
2-1-2图文结合：
例如造作APP中的“购物车图标”与“收货地址图标”，为了让用户能够很好的明白图标的意图，所以在图标下方会配有文字提示，这样就能大大的降低误读的可能性。
2-1-3纯图标（图标内含文字）：
例如开眼APP中视频封面左上角“开眼精选图标”，它把图标与重要文字结合在一起展示给用户，看起来不仅十分具有个性，而且用户对其理解性也非常强。
交互图标的最大意义在于可以引导用户进行交互行为，是在产品中不可或缺的组成部分。它们可以在用户不同的操作手势下帮助用户执行不同的交互过程，这种类型图标也是APP中最常见的，常见的交互性图标如：搜索、底部标签、返回、点赞、收藏、扫一扫等。
装饰性图标仅仅是用来提升整个界面的视觉体验，它并不具备任何功能性。这类图标往往是为了迎合用户的偏好与期望，通过丰富视觉体验的方法来增加内容的观赏性，这样不仅可以吸引并留住用户，还可以让整个用户体验更加积极，最为大家所熟悉的就是滴滴出行APP中的“小车图标”。
图标基于基础样式（线、面、线面结合）+表现手法（颜色、透明度、投影、叠加...）划分，一共可以分为20种类型，每种类型的展示方式也都各有不同。
线性图标通过线来塑造轮廓，在界面中App的图标尺寸并不大，所以如果线过于复杂，在小面积中过多的线会对识别性产生较大的困扰。在图标设计中使用的线有粗细之分，常用的App图标设计线的粗细一般有2PX或者3PX，不同的线条粗细所带来的视觉感受也不同，细线显得精致，粗线视觉面积大，显得厚重。
面性图标是通过面来塑造形体的图标，采用了剪影的设计形式，通过线或者面去切割基础轮廓面，通过分型来塑造图标的体积感。不同的切割手法造成了面性图标设计感的差别。
线面结合图标相较单一的线性图标或单一的面性图标样式更加丰富、也更富有趣味性。从设计的角度上说，由于元素的多样化，设计更容易获得好的效果。相反，如果运用不当会显得图标非常杂乱，如何有效的把控好两者之间的过度是关键。
这类图标的特点是通过细节和光影还原现实物品的造型和质感，能给用户极强的代入感，用户可通过对现实事物的联想，快速领会图标表达的意图。但是随着 ICON 的发展，拟物图标也带来了一些问题，因为用户关注的核心永远都是信息本身，华丽的视觉元素或许在用户使用的初期，起到赏心悦目的装饰，但久而久之，这都将成为对用户获取信息的一种干扰，所以现在拟物化的图标很少运用在APP界面之内。
相较于拟物风格不会有太多复杂的视觉元素，层次简单，用色素雅干净，采用轻投影、轻渐变的方法设计，这类图标具有一定的立体感，能给人轻盈、简洁、精致的感觉，在界面设计中，一般在面积比较大的区域我们会使用加入轻质感的图标。
合理的遵循图标规范可以有利于设计师之间合作使用，指导设计师如何规范的去设计图标，以确保企业所有产品图标风格的一致性和可用性达到统一，同时也是为了后续产品更新迭代有可参考的地方。
为了保证图标的尺寸大小一致性，我们往往会建立基础的网格尺寸来进行绘制图标，常用的网格绘制尺寸为：16、24、36、48、64、128、512、1024。这些尺寸并不是固定的，在设计中也会存在特殊的尺寸，例如谷歌在台式机上设计图标，当鼠标和键盘是主要输入方法时，就会使用密集布局，基础网格就会缩小到20。
下面就以常用的24x24为大家展示：
网格包含2px出血位。这样可以确保图标在导出时将保留其所需的比例和周围的空白区域，同时还能够很好的平衡图标的视觉重心。
*在使用常规图标时避免一部分在出血位。
*在使用多个元素的图标时，避免图标拥挤我们可以让其部分出现在出血位，确保它们之间有足够的空间。
keyline由圆形，正方形，矩形，正交，三角形和对角线组成。它可以为您提供图标集中基本形状或比例的一致大小。这使创建视觉上的稳定变得更加容易，并有助于在设计相似比例的图标时有共同的参考准则。
在24尺寸下的keyline构成如下（24尺寸下的出血区域为2）：
当把图标画在网格上时可以很好的规范图标，让它们从整体的视觉上看着统一规范。
在设计一整套系统化的图标时，我们一定要注意图标的像素大小，要运用相同的网格尺寸设计相同线条粗细的图标，包括曲线，角度以及内部和外部笔划。这样图标看起来才更统一，也有利于后期图标的迭代更新。
当然，描边像素的粗细并不是绝对的，如果我们要做一些密集型的图标时，可以考虑适当的缩小线的像素大小。如下，我们设定的系统图标线条粗细为3px，当你用3px作用于指纹图标上时就会显得非常拥挤，并且在视觉上比其余图标更重，这时我们就可以把它的线条像素降级，设定为2px。
我们在用矢量工具绘制图标时，要仔细看好图标的网格尺寸和图标结构尺寸，避免产生小数位。
曲率简单来讲就是图标中带有圆角的边角度数，只要是带有圆角的矩形就都会有一定的曲率。在图标中曲率的呈现方式有两种：外曲、内曲。
外曲与内曲并不一定同时存在，在特定情况下内部结构可以是直角（无曲率）。如下图：当内部结构都是圆角时会发现整个图标稍显臃肿，这时我们可以把部分内部圆角直接变为直角（也可以改变曲率大小），改变后就会发现图标的整体结构会显得更加协调。需要注意的是如果一个图标做了这样的处理，在同等情况下的图标都要做一样的处理，不然图标会显得非常杂乱，不统一。
根据像素的网格线来设置两条对角线，会让你的图标看起来更清晰。在倾斜的角度选择上，不要出现7.8°、14.2°这样的奇怪数值。我们可以将15°的增量用于倾斜角度（也可以采用其他有规律的角度方案），这样会使得整体的图形变化显得更加规律，也能够满足不同图形的角度需求。
在做很多图标时都会用断点的缺口来打破“全包边图标”的沉闷感，使图标具有透气性，如果想给图标添加断点，那么要保证断点的形态保持一致。
确保图标内每个细节和元素都有足够的空间，图标的相邻元素之间的空间在整个图标中不应太小，我们可以定义最小间隙以避免轮廓“粘住”，在24px尺寸下的间距不得小于1px。
如果在做图标时牵涉到了透视需求，那么就一定要保证图标的透视角度一致。
非中心对称图形物理对齐时视觉上会有偏离感，多个不同形状的图标视觉重心并不在一条水平线上，需要微调才能保证平衡感。
在图形的处理上，不要留有多余的节点，干掉多余的节点，保持图形的整洁。
ICON命名要求较为严格，涉及到我们切图给开发，所以我们命名争取做对，且需严格遵守规则，正确的命名原则：类型_位置_功能_状态_大小
每个App应该有自己独特的产品气质，同样图标性格也应当与产品气质保持一致。图标性格一共分为了4个走向：粗旷（粗直）、活泼（粗圆）、商务（细直）、精致（细圆）。
图标结构特点：线条较粗（或面性图标、线面结合图标）、拐角为直角。
粗旷类图标让人看起来非常饱满、刚正，它更多适用于男性、潮流、有格调类型等产品中。例如VSCO，它的底部标签栏图标全部采用了粗线条的直角设计。
图标结构特点：线条较粗（或面性图标、线面结合图标）、拐角为圆角。
活泼类图标让人看起来十分容易接近，能让人感受到温暖、舒适，它更多适用于电商、社交、母婴、二次元、娱乐、直播、美食等产品中。例如闲鱼，不管是在LOGO字体的处理还是APP内部的图标处理，都是采用了线条较粗的圆角设计。
图标结构特点：线条较细、拐角为直角。
商务类图标让人看起来十分规矩、严谨、值得信赖，它更多适用于新闻、政府、商务、工具等产品中。例如工具类的思维导图APP，它的可操作按钮都是商务类的图标。因为这类图标的特性，所以目前我们很少在移动端上看到它，它更多适用于PC端的后台界面中。
图标结构特点：线条较细、拐角为圆角。
精致类图标让人看起来非常干净、柔和、显得高级感，它更多适用于旅游、奢侈品、艺术、领域垂直等产品中。例如airbnb，在APP应用中大部分都采用了精致类图标。
当图标设计完后，我们应该如何去评判一个图标的好坏？很多设计师并没有完整的评判体系，其实我们可以从这五个维度对图标进行评判：识别性、图标气质、协调性、一致性、品牌调性。
图标最主要的用途就是辅助用户理解信息，特别是对于当图标单独存在时，一定不能让用户产生疑虑。要想图标达到高识别，我们可以从这2个方向入手：大众认知隐喻、真实世界映射。
在互联网普及的今天，许多界面的隐喻图标已被广大用户熟知认可，对于这类隐喻图标用户不用思考身体就已做出反应，我们在设计图标时可以从隐喻图标中添加修改部分元素，从而形成新的图标，这样既能保证图标的识别性，也能做出差异化。
选择真实世界中的物品映射，能使人下意识对图标的作用有近似预期，降低学习成本，提高识别度。
每个App应该有自己独特的产品气质，而我们所做的图标就是要跟随产品的气质。例如当你要做一款二次元产品，你的图标气质就应该偏活泼、可爱、萌、青春，而不是刚硬、严谨、规矩。
一致性是图标的基础，我们在绘制整套图标时要确保它们的基础属性全部一致，细节统一，图标内容的统一在视觉上也更加和谐美观。图标是否具有一致性，就要从以下七个方向去评判：尺寸大小、图形角度、拐角（曲率）、描边、间距、透视、颜色。
3-1 尺寸大小：网格大小是否统一、是否遵守图标的keyline规则。
3-2 图形角度：是否遵循设定的角度规范（15°的增量用于倾斜角度）
3-3 拐角（曲率）：拐角的曲率是否统一，如果图形太多且复杂，那么我们可以根据图标的特性去设定曲率的规则，例如可以设定当边角像素在1-2px时内外曲率为2px；当边角像素在3px时内外曲为2px，内曲为1px；当边角像素大于或等于4px时，外曲为2px，内部则为直角。
3-4 描边：描边大小是否一致。
3-5 间距：是否遵守间距规范。
3-6 透视：透视是否一致，避免在同一套图标中出现正视图/侧视图混杂的情况。
3-7颜色：在图标的配色上要保持一致的规律，采用相同的颜色是比较常见的配色方式。如果采用不同色相的配色方式。也需要保持整体的配色协调，避免出现饱和度、明度反差过大的配色。
一致性代表的是图标的基础，而协调性则代表图标的整体状态，协调性的呈现状态是验证一致性是否合理的标准，当协调性存在问题时，我们就要反过来查看一致性存在的误区并给予修改。在图标的协调性上我们主要审视这三点：视觉大小、饱满度、透析感。
视觉大小对标的是一致性的尺寸大小与描边大小，当你发现图标视觉大小不对等时，你就要回过去查看你的网格与keyline是否运用正确，确保正确后再查看你的图标是否按照keyline的规范绘制以及描边大小是否一致。（同样尺寸下的图标，从光感上来看描边粗的图标视觉偏大）
饱满度对标的一致性的间距，当你发现图标不够饱满时，你就要去查看你设定的间距值是否偏大，是否合理。
透析感简单来说就是留白区域。透析感对标的也是一致性的间距，当元素的描边过大时，我们就要合理的设定间距的最小值，不然整个图标就显得非常臃肿。
品牌调性是我们经常提到的纬度，我们打开很多APP都会发现他们的图标设计都非常普通，没有任何特色，过于大众化，虽然都做了一些形式上的改变，但总是与品牌缺乏联动性。其实我们可以结合品牌调性，在图标上做更多的联动、创新。
色彩是图标设计中重要的构成元素之一，我们可以直接提取品牌色作为图标设计视觉元素。例如站酷，站酷的品牌色是黄色，标签栏的图标（选中状态）就提取了品牌的黄色，让其与品牌调性高度一致。
当然品牌颜色除了可以直接用外，还可以在提取时适当调整色彩的饱和度、明度，做更多的形式变化。例如懂车帝，就在原有的黄色基础上做了些许调整，图标采用黄色透明渐变的处理方式，在与品牌颜色呼应的同时，使得整个图标更加精致、有活力。
提取品牌LOGO是最常用的使用方式，我们从品牌中提取出来的图标一般运用在APP首页标签。因为首页是APP中最重要的页面，也是进入APP默认的页面，把首页图标替换成品牌LOGO，能反复加强了用户对App的logo印象，这样不但使App内外形成了视觉联系，同时也二次传递了品牌形象。例如大众点评，它的首页标签就用了品牌LOGO。
我们可以在品牌中提取它识别性较强的局部元素作为图标。例如虎牙直播，它就提取了品牌卡通形象的外轮廓作为首页图标。
品牌提取的元素并不只是所见到的品牌视觉形象，还可以提取与品牌内容强相关的元素。例如QQ音乐，就把音符作为首页图标。
如果你的品牌还不为大众所熟知，那么为了强化用户对品牌名称的认知，可以把品牌名称直接放入标签栏中。例如MONO，就把它的名称分为四个字母分别放在了4个标签内，需要注意的是这类图标不能单独出现，因为它本身不具备引导含义，必须配合文字一起出现，这样才能让用户能易理解。
图标风格可以与品牌性格保持一致，一套带有浓厚品牌感的图标，会让人记忆犹新。例如：每日故宫，它的图标就非常具有特色，结合了品牌的性格以及定位，加入了众多的古代中国元素，整体看起来有股浓浓的古韵之风。
如果品牌中含有吉祥物，我们可以提取吉祥物的外形，把它用于产品的图标中。例如盒马，它就把盒马的吉祥物做了风格化的处理，放于APP的首页标签。
作者：黑狮力 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
大部分设计师应该都遇到过这种场景：在做设计前并没有考虑到加载，但在进行还原度走查或者验收的时候才发现，由于某些页面数据请求较慢，导致在页面中会出现空屏状态。这时才想起需要在这些页面添加动画来承载页面的过渡。
归根结底是因为设计师在设计过程中，更多关注页面本身，而很少去思考页面在呈现过程中何时会出现白屏状态，都是后知后觉去补充完善。加载作为必备的一环，却总是被忽略。目前很多B端产品在这方面都没有一个系统合理的规划，导致系统的加载体验缺失或者不统一。
因此希望这篇文章能够讲清楚中后台加载出现的场景和规则，对需要深入了解加载以及在制定加载规则的设计师朋友们带来一些帮助。
加载通俗来讲就是用户从触发页面操作，到页面最终呈现的一个等待过程。这个过程始终存在不可避免，只是时间有快有慢。快的加载只需要几百毫秒就结束，但慢的加载就可能会达到几秒甚至十几秒，让人产生焦虑。
而为什么会有如此大的差距，这就需要从页面渲染的整体过程来进行说明。当我们从浏览器输入网址，再到我们看到完整页面的这个过程，网页到底经过了哪些步骤呢。经过资料查询和与前端确认，整体过程可以阐述如下：
从这里我们可以看到页面的呈现是程序经过了一系列操作才最终呈现到我们面前的。在这里可以将其简化为四个阶段：用户操作功能→页面向服务器发送请求→服务器接受并返回数据→页面呈现。
而决定整个页面加载快慢的就在于请求与数据这里。一般我们可以将页面的数据分为2种类型：静态资源和动态资源。
静态资源：前端的固定页面，这里面包含HTML、CSS、JS、图片等等，不需要查数据库也不需要程序处理，直接就能够显示的页面。可以简单理解为你页面上的固定字段和结构。这种页面一般加载速度比较快，比如我们看到的展示型官网一般都是前端写好的静态资源。
动态资源：而对于页面上的动态变化的，需要程序处理或者从数据库中读数据，能根据不同的条件在页面显示不同的数据，比如表格数据、统计数据等称为动态资源，这种都需要调用后台接口来进行返回，因此加载速度相比于静态资源就会更慢。
而它们的区分点用下图可以表示：
可以看到静态资源基本是直接返回，而动态资源还需要连接数据库调取资源，尤其是在遇到数据库调取较慢时就会花费更多时间。而我们加载缓慢的大多数问题，也基本上更多出现在动态资源的获取上。
当我们清楚加载形成的原因，接下来要做的就是在需要加载的地方对其进行处理。这也是在设计过程中我们经常遗漏的地方。我们先看一下目前常见的2种处理方式：「默认处理」和「使用进度指示器」
当我们对加载过程不进行任何处理时，程序就会以默认的方式进行-即根据资源获取速度一步步呈现。可以看到嘿店后台的处理过程就是一种默认处理方式：
但是这种做法就会导致我们在页面加载过程中会出现空屏状态，比如上图切换到概览时出现了空屏状态，尤其是当遇到了网络缓慢的情况，会造成在加载时页面停留在当前状态下不动，往往会让用户陷入到「系统故障」的错觉。
这个名词说起来可能比较陌生，它指代的就是我们平时经常看到的加载动画、骨架屏或者进度条等。进度指示器的作用就是告知用户当前页面并没有故障，而是正在读取数据。
通过添加进度指示器来对空屏状态进行承载，能够减轻用户的焦虑感。目前很多B端产品更通用的形式是添加动画来过渡。
但是在体验过程中很容易发现一个问题，就是在产品的整体加载过程中，某些空屏状态是没被加载动画覆盖到的。当这些没被覆盖到的加载过程过长时，很容易出现焦虑感。比如神策数据在左侧列表切换时的加载过程就没被覆盖：
想要更全面的把加载动画覆盖到所有页面，我们就需要弄清页面在哪些状态下会出现空屏状态，从而制定统一的加载动画规则。这个问题可以先思考一下，后面解答。
在制定统一加载规则之前，我们需要明确一个概念，就是加载的模态与非模态。
模态加载的含义就是当前加载会中断用户其余操作，用户在这个期间只能等待加载而不能进行其他操作（有的模态会提供取消按钮）。如果你的页面涉及到以下2种情况，可以考虑使用：
1.用户当前的操作本身不能与其他操作同时进行。比如系统更新，或者工具类的导入导出相关操作，我们只能等待更新、导出完成才能继续进行后续的操作。这时候可以使用模态加载来承载，比如protopie的导入操作；
2.当用户进入到一个全新的页面时，这个时候页面什么都没有，我们只能等待页面加载完成才能进行后续的操作，因此在这种情况下也可以采用模态加载，比如我们刚进入Asanan产品页面看到的首屏加载动画：
除了上述2种情况外，你也可以根据你的业务场景来进行模态加载的选择，但建议是尽量少用模态加载，其会对用户的打断和干扰性比较强。
非模态加载的话，这种加载通常只会出现在需要加载的部分，不会中断用户其他操作。对用户干扰比较小。比如我们常见的功能切换加载、数据筛选加载等都属于非模态加载。
非模态加载相比于模态加载会更轻量，因为用户随时都可以打断也不会影响到其他操作。因此建议在大部分情况下都可以使用非模态弹窗来进行承载，比如飞书的左侧栏切换操作：
接下来我们进入正题，在这里我从加载的角度将网页整体加载过程分为呈现加载规则和操作加载规则。
我们先谈页面呈现规则。前面已经明确加载产生的原因和类型后，我们就可以开始为我们的产品制定统一的加载规则，以保证后续页面加载的一致性。
在拆解页面的加载过程前，我们进一步阐述之前提到的渲染原则，从前文中提到最后会经过「解码」和「渲染」2个步骤，这也是决定了我们看到的页面的最终呈现顺序：
我们看到的页面是由HTML、CSS和JavaScript来进行构成的。HTML可以看作最简单的框架、CSS则是赋予了框架样式，JavaScript则是负责页面中的交互(当然JS也可以控制样式，这里只描述主要功能)。
页面在「解码」阶段，拿到的HTML文档会被解码为DOM树，同时将CSS文件解析成CSSOM，这两者结合后一起渲染页面，JS一般是在最后渲染。所以逻辑上就是框架和样式一起渲染，最后渲染交互。视觉的角度来讲就是先看到元素样式，然后才能进行对应操作。
由于浏览器渲染顺序一般会根据代码的顺序进行渲染，而代码在页面中的构建一般也是按照页面的上下和左右的顺序去写的，因此我们看到的页面的视觉呈现顺序也是遵循从上到下，从左到右。
所以几乎所有的产品都是先看到顶栏，然后左侧边栏，然后其他内容。因此我们可以通过这个原则来拆解对应的页面，我们按照页面常规结构可以将其分为三个加载部分：顶栏、左侧导航栏、内容区域。而其加载顺序如图所示：
当知道对应页面的渲染顺序后，我们就能够清楚在页面渲染的过程中哪些地方会出现空屏了。因此将页面加载过程拆解为如下顺序：
我们的加载动画需要承载的就是上述这些白屏的地方，从而将加载细化为三种场景的拆分：全局加载+局部加载+内部加载。如图所示：
通过这三种加载就可以涵盖页面所涉及到的所有部分。接下来详细阐述一下这三种类型的定义和用法。
如上图所示，全局加载的目的是为了覆盖用户从输入网址到页面的资源渲染的这个中间过程的空屏状态而存在的。而这种状态会涉及三种场景：
1.通过网址进入到一个新的页面时；
2.通过鼠标右键或网页刷新按钮对该页面刷新时；
3.通过页面操作需要新开页面时。
该全局加载的动画构成为：
1：覆盖整个页面的加载，由纯白色+加载动画构成；
2：加载类型为模态加载，因为用户在这种页面状态下并不能进行其它操作。
但在这里我们需要注意全局加载的开始和结束时间：
开始时间：当进入页面时立即呈现加载动画；
结束时间：当页面加载出顶栏的时候，此时停止加载。
为何要这么处理结束时间，原因其实图中已经给出了。这里再解释一下原则：只要有页面资源返回，我们的全局加载动画就会结束，随后启用局部加载来承接后续的状态，避免用户在当前状态长时间等待。而顶栏在一般情况下都是最先加载出来的，所以以顶栏出现作为结束全局加载的标准。当然如果你的结构没有顶栏，可以以左侧栏来作为结束标准。
局部加载是用在页面整体框架加载的过程中，承接在全局加载后。局部加载的使用场景可以概括如下：
1.顶栏加载结束后，用在剩余框架的加载效果（具体体现为左侧边栏和右侧内容区域）；
2.对于涉及到局部页面的切换操作都会进行局部加载（比如左侧边栏的切换）；
光看文字可能不是特别清晰，在这里可以举一个动态的例子来帮助理解：
上述展示的是在页面呈现的时候一个完整的局部加载。在这里需要注意的是我们首次渲染和第二次渲染在加载动画上是可以有区分的，可以通过程序控制让这种加载动画只在初次加载时出现。
第一次加载时出现是因为我们需要有加载动画来承接框架首次加载的空屏时间：
但第二次的时候由于有缓存（缓存会加载我们的静态资源，能够让我们的页面框架在第二次时更快显示），这样在读取框架时基本不需要加载，我们就可以通过程序来直接去掉其中的局部加载动画，直接显示框架来进行呈现。
目前在飞书和钉钉等B端产品后台均采用了这种处理方式。可以看到图中我在第一次切换到角色管理时是有碰撞小球的局部动画存在的，而第二次再次进入时则直接出现框架。这样既能够保证加载动画能够覆盖所有的空屏状态，又避免了局部加载动画的频繁出现。
内部加载是用在页面内部不同模块数据间的加载。当框架都已经加载结束，但某些数据由于接口比较慢，此时还没有返回，这时我们就可以用内部加载来进行承载。这应该是我们更常见的加载情况：
在进行内部加载的时候，需要注意，内部加载的时候一般标题是存在的，因为标题基本都是固定的，所以能够很快被拉取。比如Zoho的内部加载，加载时标题已经出现了：
通过这三种类型的加载，能够覆盖从用户输入网址，到页面渲染完成这个页面呈现过程中的全部加载场景。
说完页面的呈现规则，再谈页面操作加载规则。页面的操作其实对应的是页面控件的反馈。而我们的常用的控件比如有按钮、tab切换等。我们不仅需要考虑控件本身的加载状态，而且需要考虑到控件影响的其他页面范围。
控件的加载并不是随时都需要，我们要根据实际的数据量大小及业务场景来选择性使用。目前我们需要考虑的控件及其加载状态主要有如下：
比如图中的按钮的加载状态是必备的，在很多场景下都会用到。但是下拉列表和级联列表，在一般的场景下都不太需要进行加载，当遇到列表中的数据特别多或者调取特别慢时就可以考虑为其加上加载状态。
这种控件比如日期筛选、表格筛选或者保存等操作，当你切换筛选条件后所有与其相关的页面元素都会发生变化。在这种情况下我们需要考虑到被影响元素的状态。目前的设计实现上有两种做法：
1.被影响元素不可被操作，且该区域有遮罩+加载动画来覆盖；
2.被影响元素可进行操作，无任何动画，但操作并不会影响之前提交的结果；
这两种方案一种是利用遮罩防止用户无效操作，另一种则是保持了足够的操作自由性。个人在这里更倾向于处理方式1，我认为被影响的元素是需要有遮罩+动画的，来避免用户在加载期间对其进行无效操作，比如示例中方案2后面修改的名称是没有被系统保存的。
需要注意的是如果在产品中使用方案1，我们的遮罩区域只需要覆盖被影响的元素就可以了（保存这种可以将按钮一起覆盖），比如通过筛选导致图表数据发生变化，这时只需覆盖图表区域，而不用覆盖筛选区域。这样的好处是当某些筛选数据出现加载过慢问题时，用户可以通过切换筛选项来打断当前加载。
上述描述的操作都是针对于当前页加载。当控件导致页面刷新或者跳转时，则整体遵照页面呈现的规则进行加载。
上面阐述的加载已经完全能够覆盖我们页面整体的加载，但是还是需要提及一下骨架屏和进度条这两种加载形式。
先说骨架屏。实际上骨架屏的使用效果体验是优于加载动画的体验的（骨架屏的加入使用会让用户感觉网页出现的更快）。那么为什么在大部分的B端业务页面中没被用到呢，主要有2点原因：
1.每种骨架屏都需要进行对应的定制开发，需要与加载后的页面框架保持一致，这会增加了开发成本。
2.中后台的业务界面对来说固定结构的页面会较少，这对于骨架屏的使用机会就相对较少。
个人认为在前期可以以统一加载体验为主，在后期业务相对成熟后，可以针对固定结构，通过骨架屏的使用优化加载体验。
再说进度条。我理解的进度条的使用条件：对于加载时间较长的规定场景可以考虑用进度条来承载，比如我们常见的游戏加载中进度条就用得比较多，因为游戏一般资源比较大。还比如figma在进入设计文件的过程中也采用了进度条加载也是因为设计文件可能会很大。
进度条在特定场景下能够缓解用户焦虑，让用户知道进展。但进度条在多数情况下都抓取不到程序的真实进度，这也会导致有时候我们看着加载到99%，那最后的1%迟迟加载不出来的的原因。目前很多中后台产品对于进度条加载使用相对较少的原因，很大程度是没有那种加载特别长的场景。
因此这两种加载场景的使用会更加定制化，如果需要使用请根据具体的业务场景来进行选择。
如果把加载动画等比作页面加载的外在，那么缓存和加载策略则是页面加载的内核，合理使用缓存和加载策略可以从根本上提升我们页面的加载速度，让用户更快速地看到页面。
大家肯定听过缓存这个概念，前后端都可以使用缓存。缓存就是数据交换的缓冲区（称作Cache），是存贮数据（使用频繁的数据）的临时地方。在这里主要讲一下浏览器缓存：
从这张图可以看出，服务器在请求数据时，会进行缓存的判断，如果有缓存则首先读取缓存，如果没有则从服务器中拿取。调取缓存会在很大程度上提升页面的加载速度，缩短了从服务获取数据的时间。通常浏览器会主动对页面的静态资源进行对应的缓存，这也就解释了我们第二次进入页面会比初次进入页面时加载快的原因。
但程序其实也可以对动态资源（也就是需要从数据库等拿到的资源）进行缓存的，并且可以设置缓存的过期时间（比如设置过期时间为1小时，那么1小时过后就会重新拉取新资源）。对于某些动态资源拉取过慢并且更新频率不高的我们可以采用动态资源缓存的策略，从而提升整体的页面加载体验。
现阶段我们常用的主要有下列6种加载策略：
加载策略的本质就是通过对应的加载设置来缩短产品与服务器交换数据的时间，接下来我们详细看一下每种加载策略的具体使用策略：
懒加载是当内容落入视窗被用户看到时，才会进行加载。这种比较节省资源和减轻服务器压力。对于当前页面内容很多的可以采用这种加载策略。而这种加载策略的设计，能够让用户更快看到当前屏幕内的内容，减少等待时间。
比如苹果官网的加载策略就采取了这样的一种方式。我们可以看到右侧的资源只有在我们向下滚动出现在屏幕中时才会进行对应的加载，这样能够保证用户在进入网页第一时间看到首屏内容，并且用户几乎感知不到这种加载延迟。
预加载是在页面空闲的时候就把用户即将用到的资源加载完存到缓存中，等用户需要使用时，通过缓存直接调用呈现。比如用户在看A页面的时候，就可以通过预加载来准备用户需要的B页面资源。当用户需要B页面的时候，立刻就可以呈现。
比如某些页面在实际中加载比较慢，这个时候就可以考虑是否用预加载的策略来提升网页整体加载速度。比如知乎的视频和文字在都进行了对应的预加载。即使当你处于断网状态（图中我将页面网络切换为断开状态），可以看到依旧可以点击全文进行查看和视频的部分预览。
当页面中有文字和图片时，优先加载占用网络资源小的，比如文字资源，然后再进行占用资源较大的加载，比如图片资源。通过分步加载也能有效减少页面等待时间。比如大众点评等图片很多的网站往往会采用这种加载策略。
分页加载是我们目前很常见的方式，比如我们常用的百度和谷歌等搜索引擎都是使用的分页加载，分页适用于数据量比较大的内容，比如表格数据或者大数据搜索场景可以使用。
分页加载可以理解为当前获取到100条数据，但是将100条数据分别拆成5页每页20条数据提供给用户，这样也可以让用户减少等待时间：
在目前还有一种滚动分页的加载，就是不提供视觉上的分页，而是当用户进行滚动时，自动加载一定数量的内容，这样从用户的视角看就是一个连续不间断的数据展示。比如一些资讯类的网站就是采用的这种加载策略，有的也把这种滚动分页的方式称为自动加载。
这里讲的延迟加载更多的是一种防护加载机制，一般延迟设置的时间为300ms。这里的延迟加载有2种使用，第一种多用于搜索，通过延迟加载能够让用户更好进行连续输入，避免搜索结果被高频率刷新，同时缓解服务器压力。如下图，可以看到我在输入1后会有个延迟才出现加载列表，并且我在连续输入12306的过程中是没有对结果进行更新的，当我输入完后才更新。
第二种则是通过延迟加载可以更好防止反复操作。当用户在同一组件上面进行切换时，如果该操作小于300ms,则只记录最后的点击操作。这种情况可以用在我们的表格翻页和开关等状态上，防止用户疯狂点击导致数据反复请求和屏幕闪烁的情况。我们可以通过下面这个组件演示例子来进行对应的感知：
延迟加载更多用于上述2种场景，对于其他情况的加载，直接加上就可以了，并不需要刻意设置延迟。
这里想要表达的含义是当用户在操作后，客户端立即反馈操作成功，然后把请求放到后台与服务器交互，这一过程用户不需要了解，不需要等待。无论在什么网络环境下你基本上都能操作成功。比如微信的朋友圈发布就是这样的操作，即使你在断网的情况下都能够立刻发布，但实际上这个时候并没有发送成功，还需要上传到服务器后才你的朋友们才能看见。
这样的好处是用户使用起来非常流畅，但是坏处就是，当操作不成功时，用户并不能及时进行感知，仍然以为操作已经成功了。所以这种场景我们也需要根据场景进行对应的判断和选择。对于复杂的B端场景个人建议慎用或者不用这种操作，毕竟很多发布的功能会同时影响很多业务线。
这里就拿微信的朋友圈发布来进行举例，下方手机状态都为断网状态，可以看到微信立即发布，而贴吧在这种状态下提示网络错误。
通过这些加载策略的选择性使用，能够在特定环境下提升我们系统的整体使用体验。因此我们需要对这些加载策略有一个比较全面的认识，这样我们不仅知道加载慢的原因，还可以利用加载策略去提升页面性能。
在整体的加载过程中，别忘了考虑加载异常的情况。在通常情况下我们会我们会遇到网络速度过慢或者突然断网这两种状况让页面一直加载不出来，这时我们需要考虑对长时间的加载过程进行处理。
通常做法是我们要对加载状态有一个最长时间的限制，一般为加载不超过10s，超过最长时间后就进行异常状态显示（提示语+刷新按钮）。这样用户可以选择重新加载或者离开此页面，而不是一直等待。
在这里还想到一点，就是对于编辑页面，我们应当加入网络连接是否异常的判断，比如当进入到编辑页面后，如果遇到网络断开，需要在页面的顶部加上常驻提示条【当前网络连接断开】，这样用户能够及时进行察觉并修复。避免在无网环境下继续输入。这对于某些需要输入很多内容且并不提供本地保存的页面来讲是非常有必要的。
加载在设计中是非常容易被忽略的模块，因为在大部分情况下网络速度都较快，人们很难深刻地感受到加载过程。但加载却在产品运行中起着不可或缺的作用。通过这篇文章想要告诉大家的有几个点：
1.我们需要明白加载为什么会出现，这个过程是怎么样的；
2.加载的通用处理手段是怎么样的，非通用处理方式有哪些；
3.通过缓存和对应加载策略能够让页面加载速度有本质上的提升。
这样当我们在页面上遇到加载速度慢的问题时，在为其加上动画承载过渡的同时，还应该思考其加载缓慢背后的原因，是因为数据量太大还是加载策略的相关问题，是否可以将其进行懒加载或者分步加载，这时我应该去找前端或者后端如何沟通。从源头上解决加载时间长的问题，才是后续产品设计过程中的长久思路。
作者：蒙东东 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
设计开始要了解设计的目标，用户的行为都是有「目标动机」的，B端产品的业务目标往往都是为了为企业或个人为了解决某一项工作上的问题。
当设计过程以「目标」为出发点，可以增强设计判断力，输出更有效设计解决方案。
B端产品的设计原则：提高使用者的工作效率，同时降低业务链路的操作及学习成本。
当你有了目标以后你的设计就可以围绕这个目标展开：
对于B端的产品而言，用户最关心它能为实际的工作带来哪些便利，而并非这个界面做的多么的好看，以及用户体验多么棒。所以B端产品设计价值优先级往往是 功能性＞表现力
B端产品设计需要站在整个业务线全局角度去把控各个设计点，不再是「用户体验」至上，为实现「任务目标」，「牺牲」一部分「用户体验」是必要的，这个时候视觉和一些体验就不那么重要了。通过调研业务去了解各个角色职能的工作流程、相关痛点，让产品能用，好用。
理想的B端设计需要了解业务目标以及业务链路中每一个环节的过程。将业务逻辑理解透彻再考虑应该如何进行设计实现。
这样做的原因当你站在使用者的角度进行同理心设计可以更好的帮助用户完成他要完成的工作，从而提高效率。产品原型一般基于「功能」本身，而设计师从用户实际场景规划用户的任务流，可以优化产品逻辑，补全缺失场景，通过了解业务流程也能给予创造性解决方案
B端产品往往是是服务于企业用户，用户画像需要专注于用户特征中的「群体职业身份」这类人无论性别、年龄、地区有何差异，他们都是一类角色，我们的产品要提供给这类角色使用，而不是某个人使用。
由于B端设计师不是产品的用户，无法沉浸在与用户相同的真实场景中，建立共情。所以设计师最好亲自感受一下业务流程，获得一手的用户洞察，
「通过业务人员交流」业务人员可以帮助我们快速高效的描绘出典型客户案例的用户画像。
「实地走访」：观察在自然状态下用户如何完成工作任务，并提问题：「你怎么做？」或者「为什么这么做？」
「建立种子用户群」：聚集活跃的种子用户群，收集意见和建议，并在群里验证设计想法。
「亲身体验」：成为真正的客服小二，接听客户电话，记录自己在工作台场景下的真实体验和感受。
获取用户画像后了解该群体背后工作感受，行为习惯，以及任务类型。
安全感和信任感建立：人们越来越关注隐私和信息安全。如果你要求必须填写敏感信息，请确保使用字段下方的注释文本解释为什么需要这些信息。
实际工作中我们曾经自动获取过用户之前表单中填写的的支付类账户信息，在收集的用户反馈中，用户会感觉到隐私正在泄露并让用户信任感降低。所以即使用户输入体验会更好，但是考虑到信任感，敏感类信息请不要自动获取。
让用户感受到你正在帮助他操作：Jakob Nielsen于1994年提出的十大可用性原则中，其最后一条原则Help and documentation（帮助性指导原则）是搭建B端用户帮助体系的核心准则，在理想情况下，没有帮助文档就可以使用系统是最好的，但在某些情况下（尤其是B端系统），提供一些引导性的帮助其实是必要的。
B端系统中可以尝试搭建用户帮助系统：
对B端产品来讲，设计师在设计的时候是不需要耗费太多的思考的，只是去按照交互设计师的规划堆砌图表和列表。但是对于使用者来讲，其中纵横交错的商业逻辑和业务逻辑却是给用户搭建了一个十分高的门槛。
例如修改资料的时候，使用弹窗、浮层等等交互操作会减少页面跳转的频率。
但是与此同时，减少页面跳转并不代表真正的高效，例如瑞幸的供应商系统，供应商所产生的订单需要按照指定的流程一步步进行操作确保不会出现问题这样虽然页面的跳转增加，但是可以避免操作出错给用户带来更大的困扰。
设计要根据用户的浏览习惯和视觉动线。要尝试引导用户的视觉，举个例子，如何引导：
B 端产品是以业务为核心，是需要用户长时间操作并完成工作任务的，对于操作和展示内容无关的元素，越少越好。视觉为功能让步，追求简洁、清晰、克制、理性的视觉风格。设计语言尽量做到不干扰不打扰。
输入顺序：先易后难；先必填后选填；先公开信息后隐私信息；有关联性的合成一组，特殊问题后置，用户输入时、不会觉得突兀、门槛太高 。
自动对焦（PC端）进行表单页面，自动对焦第一个输入字段可以引导用户开始进行输入。
标题：标题是对下文最短最精的概括。用户一般都会跳过表单内容，而且几乎都不会仔细阅读那种特别详细的描述。所以用最少的文字说清楚一个表单的目的尤其重要。
用户应该可以看一眼标题就知道他们应该怎么做，而不是非得把剩下的全部看完，
（附：这部分感兴趣的同学可以搜索“微文案设计”）
在表单编写方面，或者说各种写作中，删减词语都要比添加词语更加有益。 在仔细检查不必要的词语后，文章会更笃实，更连贯，更吸引人。
这个链接有什么用？关闭是点击右上角的按钮吗？如果并没有增效，那就是减效。每一个字，每一张图片，都不是100% 必需的，这些都会降低你表单的转换率。
删除一个字段，表单提交率就可以提高 26%。（本篇笔记原本有12000余字，为了避免浪费大家时间，我仅保留4000余字的高频要点内容）
PC端产品提示文字尽量不要放在框内
提示文字存在于框内常用在移动端，它的空间占比很小，对移动端的小屏来说，是非常友好的，但如果在交互上处理不好，会有很大的缺陷。
内部标签结构，只有提示性文字，用作提示用户应该输入什么内容，但用户在输入的时候，内部的标签/提示性文字就会消失，这时候，用户会失去它是否输入准确的唯一判别标准。
字段输入通过部分人工智能自动将操作步骤可以变得简洁高效 ，也包括诸如一些、自动定位、图片识别、自动获取，第三方导入等方式来使用户的效率得以提升的功能。
打字是在线表单中最耗时、最密集的部分，而且经常会导致错误——尤其是在手机上。用按钮、滑块替换文本框并使用自动完成功能，将减少工作量并提高转化率。
文本块会更容易让用户记住内容：例如银行账户、电话号码等等。它指的是将信息排列成「块」的过程，使内容更容易保留、处理和回忆。一份研究声称数字 3 是帮助人们吸收和回忆信息的神奇数字。
如果一个字段需要特定的格式输入，请告诉用户。例如密码要求、语法规则、编号间距等等。
可以用输入框长度提示用户输入的内容是否正确。
德莱厄斯研究所的可用性研究发现，如果一个字段太长或太短，用户开始怀疑他们是否正确理解了标签。
在用户输入的时候，右下角告诉用户已经输入了多少字，如果超过 限定字数后输入框红色，用来警示用户，此时用户依旧可以再输入字符，但当出现警示，用户继续输入一定数量字符后，系统需要强行限制无法输入新的内容，避免用户没有察觉到警示反馈导致的过多输入，从而浪费的时间。
（该部分感谢酷友@sh9513 提出的反馈）
如果用户填写错误，向用户显示错误发生的位置，并说明原因。
如果你的表单里的选项少于5个可以列出所有选项供用户快速选择，当大于5个时候可以尝试用下拉框解决。
将第一个选项作为用户最有可能的默认选项，且是最安全的选项，提前预判用户的操作提升选择效率。排列方式推荐数直排列，竖直排列相对于水平排列容易读取和定位，提高用户的浏览顺序。
当前需要用户填写相对隐私的信息时，请给予解释这么做的原因及目的。
完成表单的设计后可以给业务用户进行简单的测试，并记录他们填写的时间收集反馈，以及对这一连串的问题他们体验如何。这也将有助于你下次评估表单的设计。
最后在情感化设计系统里记得感谢用户填写或者反馈问题，因为用户是花时间的。所以请表示感谢。
表格的设计围绕着「可读性」和「易操作」两个设计原则。设计易读，易扫视，易比较，易操作的表格结构是表格设计的首要目标。
列宽有三种常见处理方式：
1. 根据内容的极限长度给出足够的固定宽度；
2. 可以固定部分列的宽，其余列按百分比处理；
3. 列宽需要考虑最低宽度/最大宽度/文字极限状态，内容为空状态显示方案；
4.需要设置列之间的最小宽度，表格响应式布局情况下最小不小于此宽度。
M-Densign规范中对齐方式会遵循如下规则：
表格的排序，应从用户目的出发，遵循用户查看数据的习惯，尊重数据之间的关联性，设计用户查看、操作数据的路径，而非随机排列（这部分可以在业务侧调研时验证，提高用户体验和阅读效率）。
1. 文本信息/混合型文本左对齐，符合从左到右的阅读习惯；
2. 数字信息右对齐，方便数字之间的直观对比；
（该图片感谢好友@晴蓝 同学反馈的一个错字，图片已修正）
设计规范需要定义按钮的四种状态：正常状态(Normal)、悬停状态(Hover)、激活状态(Active)、加载状态(Loading)、禁用状态(Disabled)
B端产品的开发一般涉及多个开发团队协作，例如瑞幸的后台修改按钮颜色，都可能牵动10+工程师的协同。
所以B端产品在进行设计改版以及设计侧调整时候要思考调整对于业务侧是否有直接帮助，在设计和规范建立之前，切勿频繁改动。
除了完全独立设计开发的项目以外，还有大量的 B 端项目是采用第三方框架开发而成的，如 Ant、Element 等等。这是因为这些第三方程序可以帮助团队节省大量的开发时间和精力。
作者：Cesare_玄漓 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
信息无障碍，是指任何人在任何情况下都能平等地、方便地、无障碍地获取信息和利用信息。随着互联网覆盖越来越广，对于身体有局限的群体而言，更加迫切通过互联网获取信息，而这就需要互联网产品进行信息无障碍的优化。在我国其受益人群至少包括：8500多万残障人士，2亿多60岁以上的老年人，数量庞大。率先考虑信息无障碍能为产品增加优势而带来更多用户。
如今智能手机掀起了一场无障碍辅助工具的革命，而站在这个关键点的互联网设计师，也要开始行动起来，先从以下这几个容易实现的事情开始着手进行无障碍的优化吧。
对视障用户来说，是用听取读屏语音来了解你设计的界面信息的。读屏软件就像他们了解互联网世界的眼睛，它的原理是直接读出界面里的文字，如果icon按钮未加无障碍标签读屏会读为"无法发音"，那么视障者就无法获取这些信息，自然也就无法使用你设计的功能。
解决的办法是:
1.需要在产品代码中添加无障碍标签(Android :contentDescription ; iOS:accessibilityLabel在对应的开发者文档里很容易找到，可以发给你合作的研发同学)。
2.装饰性icon可隐藏标签不读，提升读屏效率。不建议不做处理也不加标签，那么用户听到的就是“无标签”，这样会让用户以为这里有什么重要信息读不到而感到不安。
3.标签语义简短准确，尽可能使用动词。
4.必要时需要走查焦点顺序，确保不会被错误的焦点顺序误导页面含义。
并且最好由设计师进行语义的标注，因为设计师才是对页面里图形应用最了解的人。避免出现“搜索”被写成“放大镜”、或者是“searchBtn_123”之类的情况。
颜色可以用来区分信息数据的类别和维度，也可以帮助传达情绪等重要信息。然而，世界上有超过8%的男性和0.4%的女性都被色觉障碍的问题困扰。我们通常笼统的称这类人群为“色盲”，他们是典型的识别颜色有问题的群体。
"色彩"的目标是"易于感知"，指的是互联网产品的内容信息的色彩对任何人来说，都应该拥有足够高的辨识度和舒适度，我从以下4个方向进行介绍。
1.更安全的配色
a.色盲人群：
设计师在进行设计配色时应时刻自测，避免明度相似的橙黄绿两两配色和明度相似的红绿配色，因为这样的配色势必会造成色盲用户的可读性问题。并且，红色在红绿色盲眼中并不是一种明亮醒目的颜色。相反红色对他们来说显得非常深，而暗红色则几乎接近黑色。因此色盲人士很难分辨出文章内的深红色的强调字，从而遗漏关键信息（设计时，可利用此插件模拟色盲眼中的颜色：Color Oracle） 。
b.文化差异：
因为色彩在不同国家文化中代表不同含义,所以对于国际用户来说也是存在障碍的。在西方文化里，红色通常用于表示消极趋势，而绿色则表示积极趋势，但在东方文化中却正相反。
c.特殊群体：
临床医学研究表明对于部分自闭症患者来说，高饱和高对比度的颜色，甚至只是黄色都会让他们感到不舒服和不安，因此在自闭症康复中心是不会出现过于对比刺激的颜色的。
另外，老年群体随着年龄的增长，晶状体变黄变浑浊，会选择性的吸收蓝光，从而导致老年人对蓝色的鉴别能力下降明显，如果你的主流用户是老年人，请尽量避免将蓝色运用到重要的按键中去。
2.更强的文本对比度
文本对比度与可读性息息相关，它测量的文本颜色和背景色之间的明度差。WCAG AA对于文本对比度的规范是：4.5:1，若字号够大（>18pt，或粗体>14pt）时，标准可降到3:1。如果满足4.5:1这个标准会让你的页面视觉看起来不那么优雅，可以尝试局部加强可视性的方法：
关于可读性其他需要注意的点：尽量不要在图片上叠加文字，除非你能保证图片背景颜色单一且对比度足够高。
Material Design设计规范建议，需要淡淡的遮罩确保上层文字的可读性；并且不建议极高对比度的文本，因为这样会使一部分视障者看到的字旋转模糊。
3.更多样的视觉变量
颜色是数据可视化中最常用的视觉变量之一。但是对于无法辨别颜色的用户，如果颜色作为的唯一的提示信息，他们可能将无法理解你传达的信息。那么有什么改善的方法呢?
a. 不让颜色成为唯一的视觉变量：除颜色外，我们可以追加图标、纹理或者文字来加以标注。
b.色盲模式：Trello作为一款工具产品，在标注信息时，提供色盲模式可打开和关闭，并用不同纹理加以区别，色盲友好模式是一个很好的范例，它可以有效帮助色盲，又不会妨碍非色盲用户。
c.以明度饱和度为度量：虽然色盲人士对色相的辨识能力较弱，但却对明度、饱和度非常敏感。我们可以使用明度或饱和度区分信息。看这个例子：传统热力图习惯用暖色代表热力高冷色代表热力低，Google Analaytics的热力图采用深蓝色显示热度高的时段、浅蓝色显示热度低的时段，简单有效。
控件可以是按钮、链接、输入框或任何带有事件监听器的HTML元素。控件太小或彼此太靠近可能会给用户带来糟糕的体验问题。
比如对于无法用指尖精确定位的用户（有颤抖疾病的用户），或因年龄而导致灵活性降低的老年用户，都会难以点击过小控件。
为了给用户足够的间距来准确选择控件，Material Design建议至少48×48dp，iOS设计系统将目标热区尺寸最小值定为44 x 44pt，而WCAG对WEB的规范则建议至少44×44px。一个控件可以在视觉上是24 x 24px，但是在所有边上都会有一个额外的填充使它达到44×44px。并且太靠近的控件可能会因误点击而带来挫败感，所以同时还建议控件之间的空间足够远以减少误触。Microsoft给pc的建议是至少有8px的间距，而Material Design推荐的控件至少间隔8dp。我们可根据以上规范来审视自己设计的控件。
1.文字大小：
有视觉障碍的用户可能会把字号调得很大。你需要保证你的设计在大字号的情况下内容不会溢出或排版错乱。做设计的时候，可以使用2倍以上的字体测试你的设计。
在互联网早期，设计了字号在9-14px之间的网页，如今已与20年前不同，浏览器已经可以在任何尺寸设备上使用，小到智能手表大到4K荧幕，我们不能再使用固定的字号来设计产品了。字号应该与设计本身一样具有响应性。例如可以允许用户自定义字号、行高或字间距等以达到舒适的阅读水平。
2.文字样式:
文字作为传达信息的重要载体，对于许多用户来说，装饰字体或草书字体都是比较难阅读的。且用过细的、过小的、斜体和全大写文本，也会降低识别度。
有效的动画可以给页面带来生命感，但如果滥用动效不仅会分散用户注意力，严重的话对某些用户来说来说可能是致命的（光敏性癫痫的临床诱因之一就是闪光图像的刺激）。
1997年的一天，日本电视台正在播放《精灵宝可梦》第38集“电脑战士3D龙”，但就在这天晚上发生了600多名儿童昏倒在家中集体送医事件，轰动了动画界，任天堂的股价也随之大跌。原来，为了达到震撼效果，3D龙的背景运用了“蓝-红-蓝”的快速闪烁来表现爆炸，这样高频率的闪烁刺激了孩子们脆弱的眼睛，导致他们集体患上了急性光敏症。也因为这件事日本开始着手对动画片的制作制定规范。Twitter在2019年为了保护对闪烁图像敏感的人员安全，也采取了禁用APNG动图格式的措施。
另外WCAG 2.3.3官方说明，一些用户会因滚动页面的动效（例如缓动和视差滚动）而触发大脑前庭疾病从而产生头晕的症状，所以iOS、Mac、Windows 10都具有关闭动效的功能。
为了避免给特殊人群造成困扰，设计师在开始做动效之前，应该看看以下四条是否满足：
1.动效每秒闪动不超过3次，发生的闪光区域不超过超过25％否则，光敏癫痫患者会有发病的风险。
2.避免过于夸张的视差和运动效果，因为大脑前庭失调者会引发眩晕。
3.避免有多个元素通过不断移动、闪烁而分散注意力，因为这可能会让注意力缺陷者产生困扰 。
4.如果有上述情况，需提供一些控件或选项来暂停、隐藏或者更改任何动画或效果的频率。
作为体验设计师，研究无障碍会让我们收获良多。当然，目前所做的改进并非一劳永逸，而是我们与更广范围的用户保持持续对话的开端。不断改进产品的无障碍体验，让产品更友善，让美妙的互联网的世界变得更平等，我们希望能不断向这一目标前进。
作者：百度MEUX 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
人类与其他物种最显著的不同点之一是人类拥有与他人沟通和交流的能力。在整个人类社会的发展史中，沟通和交流行为需要双方处在同一个物理空间中。但进入21世纪，虚拟空间的出现让我们社交方式正在发生翻天覆地的变化，它已经成为我们每天生活的一部分，对设计师而言，虚拟空间设计仍是一个全新的、亟待探索的领域，我们有很多事可以做。
你或许听说过元宇宙这一新兴概念，它是一个增强的、或者说是一个完全虚拟的空间，我们需要使用VR头戴设备和数字形象才能进入。在这个有社交距离的时代，元宇宙可以让我们感受到更加紧密的社交关系：不论我们相隔多远，我们都可以看到和感受到对方。包括META（前身为Facebook）在内的很多商业巨头正在入局元宇宙，在他们洞察到的的商业机会上投资数十亿美金，这些投资在未来将为大量的元宇宙设计创造机会。
考虑到这一点，这篇文章主要描述关于元宇宙设计的一切：包括元宇宙的概念、设计元宇宙的技术，以及设计元宇宙的工具。
元宇宙一词首次出现在Neal Stephenson于1992创作的科幻小说《雪崩》中，讲述了主人公在被称为“元宇宙”的虚拟空间和现实空间中来回穿梭旅行。斯皮尔伯格的电影《头号玩家》也描绘了一个在不久的将来会出现的类似元宇宙的概念，在电影中，主角生活在类似于虚拟现实中，与其他玩家一起在元宇宙世界中探索。
《头号玩家》
虽然最初元宇宙可能起源于科幻小说，但它无法被单一的定义，它更像是创建一个沉浸式虚拟空间的想法，人们可以在其中自然地互动。你可以想象一个充满数字形象的 3D 世界，它能提供全方位的数字体验。
事实上，元宇宙并不是一个新兴的概念，早在2000年，一款名为“第二人生”的平台就已经拥有了许多在我们今天看来与元宇宙有关的功能。作为一个用户，你可以在“第二世界”中完成与现实世界中相同的事情，但它与现在我们所说的元宇宙有一个关键区别——“第二人生”并不是一个必须要借助VR/AR设备体验的互动世界，最主要的原因是当时的 AR/VR 设备还无法创造沉浸式的交互体验。
从2022年开始，我们逐渐意识到，AR和VR才是组成元宇宙的关键元素，因为它们可以创造更加真实的虚拟体验（并且我们已经拥有可以使其实现的技术）。只要用户戴上头戴装置，他们就能立刻进入一个完全不同的世界。尽管用户周围的所有物体都是虚拟的，但它们对用户来说是真实自然的。
下面是一些日常交互行为如何在元宇宙中应用的示例：
工作
办公室这个场景其实可以自然的进化成元宇宙，因为现在流行的混合办公模式（一部分员工在实体办公室办公，一部分员工远程办公）非常适合在元宇宙中实现。无论人们住在哪里，他们都可以作为一个团队一起工作，因为元宇宙给了他们一种共享物理空间的感觉。Oculus 的 Horizon WorkRoom就是一个很好的例子。
培训课程
元宇宙可以成为学习的绝佳场所，它可以让学生与老师或教练在元宇宙中进行实时互动，就像在现实中上课一样真实自然，你甚至可以认为他们是同处于一个空间中的。
游戏
元宇宙很可能会首先在游戏行业中脱颖而出，自然而然地继承许多游戏设计的许多属性。比如元宇宙里的内容可能会由用户生成，并且元宇宙鼓励用户长期参与。
从设计师的视角来看，元宇宙是拥有许多可交互的服务的巨大平台，用户可以在其中完全自主的选择他们想要的服务。进入元宇宙需要用户创建数字形象，它不仅仅是用户名和图片，更像是用户真实形象的数字孪生，用来与虚拟世界中的任何对象进行交互。就像真人一样，数字形象有一个身份来帮助用户进行访问。
用Oculus Quest来创建属于你自己的形象
元宇宙有很大概率成为Web3.0的关键元素，这是基于区块链的新一代更加民主化的互联网版本。产品设计师将专注于创建 3D 空间，这些空间可以是现有物理场所（即家庭、办公室、俱乐部），也可以是一个全新的世界（空间站、卡通世界等），但无论是什么样的虚拟空间，它都应该让用户感到舒适。
虚拟办公空间. 图片取自Meta.
为元宇宙设计意味着设计一个完全沉浸的世界，设计师需要更全面更综合的能力。
下面列举了设计师在设计元宇宙时需要特别关注的几个领域：
可用性是优秀设计的基本属性，创造一个易用的元宇宙体验是非常巨大的挑战，因为许多关键的设计因素都会对用户产生消极影响，比如晕动病（motion sickness）：用户长期佩戴 VR设备所带来的头晕、恶心等症状，设计师在设计元宇宙的体验时就应该想到这一点，并想办法进行优化。
元宇宙设计目前仍旧处于早期阶段，这提供了从一开始就构建易用性体验的绝佳机会。设计师不应该只是在已有的经验基础上进行适配，而应该找到新的、更舒适的方法来帮助用户长时间停留在虚拟空间中。
技术造成的晕动病。图片来自Harmony.
互联网时代的用户习惯浏览网站和应用程序来获取内容，那么元宇宙中，用户会期待什么样的内容呢？答案很有趣：和现在他们每天正在获取的内容一样就可以了。在元宇宙世界中，用户会选择他们熟悉的内容进行互动，比如文章、视频、音乐、电影等等。但他们消费这些内容的方式可能不同，比如元宇宙中用户无需购买大屏幕电视即可观看电影，他们可以依靠他们的头戴设备。
从设计的视角来看，在元宇宙中内容以最适合的形式展示给用户这一点尤为重要，但目前还没有简单且正确方法可以实现这一目标，因此设计师必须尝试各种内容形式，才能找到适合在元宇宙展示内容的形式。
元宇宙是一个拥有数字商品的数字世界。数字商品有它的局限性，你不能把它们带到物理世界中去，但它们也拥有巨大的优势——你在元宇宙中购买的数字商品可以以不同的方式在不同的环境中使用。例如，你可以购买一顶棒球帽，在你最喜欢的游戏和办公室中佩戴它，使其成为你个人风格的重要组成部分。当然，这个功能目前只是一个构想，需要那些在元宇宙运营的公司愿意支持数字商品在不同场景下的切换时才有可能实现。
去中心化支付是元宇宙体验的重要一环。在虚拟空间中用加密货币支付数字商品比用真钱支付要方便得多。加密货币可以在用户加入的所有不同虚拟世界中发挥作用，在今天，一些虚拟世界也证明了这种商业模式的可持续性。Decentraland就是一个很好的例子，它是一个 3D 虚拟世界平台，提供自己专有的货币，名为 Mana。
从技术角度来看，AR 和 VR 设备的质量在未来一定会大幅提升，它们是用户进入元宇宙的硬件基础。在过去，AR技术被认为是迈向虚拟世界的第一步，但随着技术不断进步，我们逐渐发现虚拟世界的真正力量将通过 VR 展现。可以预见的是 VR 技术在未来会更加吸引用户，因为它可以创造一种逼真的感觉，一种让用户沉浸在交互中的体验。
以下几个方面值得在设计时重点关注：
环境理解
理解物理环境中的用户。景深和透视是物理环境的两大特征，因此，VR 设备中的传感器将能够映射用户周围的世界，以便设计师可以在创造沉浸虚拟世界的同时保证用户的安全。
真实的面部表情设计
众所周知，人类之间的互动很多都是不依赖语言的，面部表情可以帮助人们传达感受，因此，数字形象要像真实的人与人交互一样传达人类情感。
VR手势设计标准化（头部、手部和身体移动）
设计标准化将会制定一些通用交互模型，这样当设计师为元宇宙制作产品时，用户将更轻松地学习如何使用它。
声音交互
以声音为基础的交互很可能成为虚拟世界中的一个重要组成部分。对用户来说，在私密环境中用语音进行交互要比在公开场合更加舒适。
在元宇宙中，侵犯在线隐私的行为会让用户感到被冒犯，所以从元宇宙设计第一天开始，隐私、安全和数据保护就应该是重要的组成部分。
不仅如此，防止网络霸凌也应是元宇宙设计中不能忽视的一部分，用户应该有自由决定他们在何时想和谁在一起的权利（或一个人独处，或去公司上班），并将那些对他们产生负面影响的人从他们的社交圈中移除。产品设计师需要与数据安全专家以及行为心理学家密切合作，以创建更安全和人性化的服务。
谈到元宇宙，或许我们脑中会想到一些基于广告曝光的商业模式，因为在元宇宙中植入广告将会是一件收入颇丰的生意，然而事实上，将广告植入虚拟世界需要谨慎、谨慎再谨慎。
想象一下，在你未来生活的元宇宙中，一些公司为了能更有针对性的为你提供服务，会跟踪你并记录下你的一举一动。这是一件让人非常恐惧的事，虽然元宇宙的创建者可能并不会这么做，但我们必须意识到这样做的风险非常高，特别对于那些把广告曝光作为商业模式重点一环的商业巨头来说（比如Meta），需要非常严肃的去思考是否可以接受过度广告植入带来的风险。
这里列举了5个设计工具，对于想要设计元宇宙的设计师来说，这些工具都应该派上用场。
故事板是来自电影行业的创作工具。它是一个图形组织板，其中包含按顺序显示的动作场景的图片，这些能让工作人员更容易理解场景的性质和演员必须传达的情感。就像拍摄电影一样，如果没有好的故事讲述，就不可能创造出身临其境的虚拟世界体验。
故事版案例。图片来自NN Group.
元宇宙是一个天然的3D世界，这个世界越真实，用户越能够进入沉浸式的体验。对于想要创造元宇宙体验的设计师来说，最好能成为3D建模大师，熟练使用如Blender、Cinema 4D、Houdini等建模工具。
使用 Blender 创建房屋模型。图片来自Blender.
设计师如果只通过搭建一些高质量的3D物体（例如房子、汽车和其他人类环境属性）就想创造出一个元宇宙，那几乎是不可能的。让元宇宙看起来和现实世界一样真实的关键因素是如何能让设计的物体之间的相互协作达到和谐统一。为了设计出一个拥有健康社会的的虚拟世界，设计师应该了解现实世界是如何运作的，这就是产品创造者必须学习人类学、建筑学和城市设计的原因。
诸如用户访谈、问卷、非参与性观察研究（在不知道被观察者的情况下进行观察）等方法对于创建好的用户体验来说非常重要。
创造真实的交互对设计师来说是首要目标。在设计互动体验时，很重要的一点是不要白费力去做重复的事情，使用一些在过往设计中验证过的经验和方法会更有效。
现在，有一些工具可以帮助我们做到这一点，其中很重要的一个工具是“交互SDK模块”（Interaction SDK)，这是一个模块化组件库，元宇宙设计师可以在其产品中使用。在这个组件库中有很多元宇宙会用到的的基本框架和对象，比如基础手部控制模型、距离计算器、手势检测等等。
使用交互 SDK 创建的虚拟手部和控件。图片来自Macprotricks.
对于设计师来说，仅仅将一个产品设计出来是远远不够的，我们还需要对设计的产品不断的进行测试，看看它是否能为用户提供出色的使用体验。情景研究是一个非常好的方法和技术，这项技术可以帮助设计师直接了解虚拟世界中发生了什么，以及哪些设计领域需要改进。通过沉浸在你所创造的体验中，你会看到它的优点和缺点。
元宇宙代表了数字技术进化历程的下一个阶段，最终元宇宙设计将融合人们的真实生活和虚拟生活。人们不仅会在元宇宙中互动，还会在元宇宙中生活。目前，我们正处于这一旅程的早期阶段，它为产品设计师提供了一个塑造互联网未来的绝佳机会。
作者：Nick Babich 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
所谓的“产品设计导向”指的是产品建设之前要围绕着产品的立项、目标用户等等去规划产品的功能点，明确产品核心价值；在产品上线之后，通过数据分析和功能反馈，发掘更多的需求，去规划下一步的”功能增删改“，将产品的设计方向引导到更正确的位置，提升用户留存率，延伸挖掘出产品更多的可能。
另一方面，从现在的设计环境而言，对所有的设计师既是机遇，又是挑战。大量的UI专用工具（Sketch、Principle、Flinto、Origami等）的出现，大大提升了产品前期的UI设计师的工作效率，所以现在“全链路思维”已经从刚出现时的“概念化思维”变成了“主流化趋势”。所以现在很多的UI设计师在站酷发布自己的作品的时候大部分都喜欢加入一些产品前期分析（功能设计、用户画像等）内容。
但是很多设计师的分析环节明显就是为了证明“有”而去“做”，缺少了真正的分析部分。给我印象很深刻的就是之前看到的一个二手房买卖的UI设计作品，典型用户画像里主流用户是：“男、七十岁、目标是给自己的儿子购买婚房”。实际上这种所谓的产品分析流程对于设计师而言是没有任何帮助的，只是从形式上走个过场罢了。
本篇主要讲述产品设计中的一些分析方法，范围从“个人练习式设计”到“团队合作式运作”，知识点大概有：空雨伞思维、文章大概六千字左右，建议阅读时间：15分钟。适读人群：初级产品经理、交互设计师、在工作中职能范围与产品规划有关的UI设计师、想要学习产品设计的新人（文中含有大量配图用来辅助观点，因此建议PC端阅读）。
产品运作流程概览
我遇到的比较普遍的问题是：很多设计师对于自己所在公司产品的运作流程并不是十分了解。这样会在你实际配合工作的时候感到无从下手。有的甚至于同一家公司的不同设计师对于产品设计方面的理解也不尽然相同。所以说要从浅到深的学习产品功能设计，就必须先理清当前工作的常规流程，例如常见的产品运作流程（如下图）
上面是一个相对规范的产品开发流程，实际上你在看到上述流程图后，对照自己公司的情况，会发现有一些岗位上的缺失。出现这种情况最大的原因是因为很多公司会把一些职能进行合并用来节省成本，现在仍然有大多数的公司并没有交互设计师的岗位，但是交互设计的职能不代表没有，而是被产品经理或者视觉设计师兼任了。你需要明确团队中各个人负责的职能部分，才能更好地提升沟通效率。
个人思考方法（一）：空·雨·伞
上面讲到了设计师的“全链路思维”现在已经成为了一种主流的观点，将来的前期的铁三角“产品经理、交互设计师、UI设计师”很有可能结合变成是“交互视觉二合一”甚至是“产品交互视觉三合一”的状态。所以现在很多的设计师开始尝试自己去DIY一个需求或者做ReDesign这样的设计，希望可以通过这样的方式完成自己跨领域能力的一个积累。但是当他们打开电脑的时候，大部分人会发现自己突然变得没有思路，从产品方向点确定到产品视觉产出之间出现了断层。
其实做过设计练习的人都知道，由于一些现实场景的不同，一些人在做设计练习的过程中会受到很多条件的局限，尤其是在孤立无援的情况下，你面对自己的练习作品往往会无从下手。当然，不同的场景下有不同的分析方法。
在团队协作的时候，分析方法要全面、严谨、反复推敲。
在个人练习的时候，分析方法要高效、直接、简化不必要的流程，以培养自己的分析能力为主，在这种场景下，空·雨·伞就是一个非常好的思考提升方法（如下图）
简单概述“空雨伞”思考方式：观察（事实） → 思考（内在） → 产出（解决方案）
运用在设计上就是：发现痛点 → 思考原因 → 提出解决方案。“空·雨·伞”因为简单、成本低、易上手，可以作为设计入门培养思考能力的一种方法，但是在使用空·雨·伞的分析方法时需要结合一定的具体调研（或者轻量级的用户研究）相配合，不然又会变成一味的“拍脑门儿”式的主观臆测，对于分析能力提升没有丝毫帮助。
个人思考方法（二）：逻辑树
逻辑树又称问题树、演绎树或分解树等。很多咨询公司分析问题最常使用的工具就是“逻辑树”。逻辑树是将问题的所有子问题分层罗列，从最高层开始，并逐步向下扩展。
简单来形容一下逻辑树：把一个已知问题当成树干，然后开始考虑这个问题和哪些相关问题或者子任务有关。每想到一点，就给这个问题（也就是树干）加一个“树枝”，并标明这个“树枝”代表什么问题。一个大的“树枝”上还可以有小的“树枝”，如此类推，找出问题的所有相关联项目。逻辑树主要是帮助你理清自己的思路，不进行重复和无关的思考。
如果你要运用逻辑树方法去分析产品，主要的一点在于学会细化拆解目标。
举个例子：
在2017年我创建了自己的个人站酷号，但在发布了一部分的文章之后，我开始意识到文章的可读性始终不高。在这个时候我们就可以按照逻辑树的分析方法去进行拆解分析，去发现自己提升的空间。
如上图，就是逻辑树最简单的一种场景应用。确定目标后向下进行拆分，拆分出三级逻辑树是比较容易的，甚至你可以沿着已经列出来的大纲继续深入细化，再拆分出更细更深层的各种提升点。
逻辑树分析法在个人作品中的主要作用是发散思维；在实际工作中的作用则是针对特定问题进行分析，理清思路。总而言之，是让你在分析的过程中更加有条理，避免重复思考。但是逻辑树分析也有一个缺陷，就是在逻辑树分析的过程中，根据现象分裂出子层级的步骤十分依赖你的认知能力，就如同做设计一样，当你感觉界面的视觉出现出题的时候，需要利用你学出来的知识去进行视觉优化，如果你对设计理论知识掌握程度并不是很强，那就不能采用逻辑树分析法解决问题。
总而言之，逻辑树分析法适用于对问题研究十分深入的情况下，如果你对当前的环境认知并不充足，那么就很容易走入歪路，跑偏主题。
实际项目：用户调研访谈
在一些实际项目中，用户调研是需求来源的主要渠道。提起用户调研，很多人会觉得这不属于UI设计师应该做的事情。其实行业逐渐规范的现在，用户调研、分析需求的能力也成为了衡量UI设计师能力的一个标准。现在的互联网产品种类繁多，从早期只做主流行业，到现在基本所有的冷门行业都有涉及；作为设计者而言，大多数设计师已经开始在设计的过程中心有余而力不足。
造成这种现象的主要原因为是因为随着行业的细分以及范围的扩大，我们距离用户的真实场景偏离太远，导致我们在设计中很容易理所当然的赋予给用户大量无用的东西。偏离了用户所需要的主要轨道。因此对于很多的设计师来说，学会了解用户以及分析需求成为了十分重要的事情。
然后整理了一下我在用户调研过程中的几点认知：
第一，保证调研的目标的准确性
我们需要明确，我们希望通过调研达到怎样的目的？（例如：提升部分页面转化率、收集用户对于产品不满意的地方、通过用户使用产品发现用户潜在的痛点）
第二，有目标的选择用户
一般来讲互联网公司都有收集客户反馈的部门，他们掌握着所有客户的反馈意见。我们在选择调研用户的时候，最好可以根据我们在调研行动确立初期拟定的目标去选择调研目标
第三，适当的准备调研内容
当我们确定了调研目标和调研用户之后，就可以根据现有状况去准备调研内容。调研内容一定是要在事先拟定好（开始调研之后根据实际情况进行改动）
一般市场调研细分的维度通常有四种，分别是：地理、人口统计、行为、心理统计。运用在互联网产品里面就更加的复杂。以B端产品为例：我们在调研中可能要把调研对象分为客户（老板）和用户（业务员）去进行不同情况的信息跟踪，而且根据产品的属性不同，需要提前预设好调研内容的侧重
第四，调研过程中
在调研过程中，我们可以适当结合上文讲述到的“空雨伞”方式去进行调研观察，收集用户需求（如下图）
在调研过程中，除了思考之外更多需要注意的是对用户洞察的记录与剖析，在记录用户行为的过程中，需要遵循“不干扰”、“不引导”、“记录客观”等原则，这样可以才可以保持用户行为记录的准确性。
第五，获取反馈整理结果
在调研结束后，我们应该产出一份完整的调查报告，按照本次调研预设目标进行整理，规划出合适的大纲，把调研收获转化为明确的产出，产出形式最好以报告（PPT、PDF），而不是口述或者微信消息，这两者之间差别很大~
需求归类：KANO模型
虽然说现在很多的公司都开始建立了用户体验类的部门，但是因为用户调研或者体验类的工作很难去量化产出。而且在大部分情况下当产品按照用户调研反馈的结果进行调整后，往往很少会出现我们幻想中的“逆袭”、“口碑急剧上升”，有时还会因为受到一部分用户观点的带偏导致产品口碑下降，用户表示不满；又或者会出现需求级规划混乱，重要功能反而后上线这种尴尬的情况。
所以这驱使着团队中负担“用研用体”职能的角色对用户需求进行正确的分类和排序
这个时候就可以运用到卡诺模型（KANO模型）。
KANO 模型是东京理工大学教授狩野纪昭(Noriaki Kano)发明的对用户需求分类和优先排序的有用工具，以分析用户需求对用户满意的影响为基础，体现了产品性能和用户满意之间的非线性关系。根据不同类型的质量特性与用户满意度之间的关系，狩野教授将产品服务的质量特性分为五类：
1.基本型需求
用户对企业提供的产品或服务因素的基本要求。是用户认为产品“必须有”的属性或功能。当其特性不充足(不满足顾客需求)时，用户很不满意；当其特性充足(满足用户需求)时，用户也可能不会因而表现出满意。对于基本型需求，即使超过了用户的期望，但用户充其量达到满意，不会对此表现出更多的好感。
例如对于网盘类产品来说，用户的基本需求是有快速的上传和下载。如果下载速度达不到用户的期望，则用户满意度将一落千丈。对于顾客而言，这些需求是必须满足的，理所当然的。对于这类需求，企业的做法应该是注重不要在这方面失分，需要企业不断地调查和了解顾客需求，并通过合适的方法在产品中体现这些要求。
2.期望型需求
提供该功能，用户满意度提高，如果不提供该功能，用户会感觉到不满。当然在这里要补充一句，这里的需求并不都是我们整理出的主观需求，也有可能是用户在使用的过程中产生的客观类需求，例如遇到不会的体验，需求得到响应时我们给的反馈
例如对于一些O2O类的产品，虽然做的都比较成熟，但是由于体量庞大的原因，偶尔也会受到糟糕体验，用户在受到糟糕的体验之后往往会期望能通过反馈得到心理上的安慰。例如携程（旅程预计时间偏差）、美团（酒店体验差）、饿了么（用餐体验差）等。在用户遇到这种糟糕体验之后，期望能通过投诉建议获得官方的反馈，那么官方把这种问题解决的越圆满，用户的满意度也会随之提高。
3.兴奋型需求
又称魅力型需求。指不会被用户过分期望的需求。对于兴奋型需求，随着满足用户期望程度的增加，用户满意度也会急剧上升，但一旦得到满足，即使表现并不完善，用户表现出的满意状况则也是非常高的。反之，即使在期望不满足时，用户也不会因而表现出明显的不满意。
4.无差异型需求
不论提供与否，对用户体验无影响。是质量中既不好也不坏的方面，它们不会导致顾客满意或不满意。
5.反向型需求
用户没有这个需求，提供后用户满意度反而会下降。
按照kano模型分析可以对收集到的产品需求进行分类，筛选掉一些不合理的需求。更好更有目的性的完成产品待办清单的记录。
作者：千夜Ryan_Vision 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
咱一起来聊聊排版的问题：
如果你看过我过往的文章，也许会对我的排版多少有点印象，夸张的大字，极强的对比，还有一些微妙的层级关系；坦诚的讲，我的风格揉杂了 2 种设计体系 —— 瑞士风格 / 拟物风格；
整洁、严谨、工整、理性化、实用的特征是瑞士平面设计的精神所在；这种一丝不苟，传达准确的风格，即所谓瑞士国际主义风格。简单的说，由于 Swiss Design 这种风格简单明确，传达功能准确，因而很快得到世界范围内的普遍认可，成为战后影响最大的一种平面设计风格，也是国际最流行的风格，因此，又被称为国际主义平面设计风格；
简单的说，瑞士的这种设计风格典型的代表就是我们看到的杂志，其中有 3 个特点：讲究网格 / 非常理智的克制颜色的使用 / 层级关系；有趣的是，审美和潮流是循环的，随着时代的发展，越来越多的app开始重新挖掘出来瑞士风格并加以使用，比如我们iOS系统自带的应用们，Spotify：
年少的时候，我经常看着这些个app会不禁的问，为什么在没有一张图片的情况下还能如此好看？这些年终于明白了前人良苦用心：文字是内容，同样也是构成；是信息，同样也是装饰；简单可以理解为，不管在平面还是网页亦或者是UI界面，在没有可用的装饰下，信息本身要承担起装饰和传达的双重功能，这就是瑞士风格的核心本质。
iOS是拟物的典型代表，网上对于这块的讲解已经过于饱和了，我也没必要赘述；那么这一趴，来聊聊对我产生深远影响的锤子科技吧。我第一次接触到 smartisan OS 并没有觉着多么惊艳，潜意识里只不过是觉着把 iOS 的图标画的更漂亮了一点而已…
但当我打开下图这个页面的时候，我意识到我对拟物的理解还是浅薄了，第一次被光影的层次震撼到：
通过光影塑造了一个三维空间，让整个画面丰富饱满，也打破了我幼稚的设计观，PS.不管锤子科技现在如何，我依然敬佩 Paco / 方迟 / 罗子雄的设计团队为这个行业做出的贡献，respect！
毫无保留的说，我的设计就是二者的融合，以 层次对比 作为核心理念。
啰嗦了半天，赶紧进入正题；如果你是一名产品体验设计师，一定听说过 “奥卡姆剃刀” ，这个定律通常用在交互链路的设计上（意思就是在用户路径中没必要的步骤，省了就完事了），“如无必要，勿增实体” 即简单有效原理；
通常来讲，如果想要不平，把二维空间转化成三维空间是必要的一步，需要在Z轴上下功夫；如果你恰巧也是一名摄影爱好者，可以想象下照相机的焦距和景深，工作原理是相同的，需要 前景 / 主体和背景 三个层次；当然，虚实的对比对信息的呈现和层次的拉开是极其重要的，这里需要通过景深来控制效果，你可以通过 photoshop 滤镜-模糊画廊的“场景模糊”来做到：
另外，空间的感觉想要被突显，那么“光影和空气”的价值就可以无限放大了，按照如上所说的结构，把内容和自然物质摆进去就好了，甚至可以做到举一反三（比如不同颜色的氛围，我就不展开了）：
整个case下来，你会发现用光来聚焦在信息上，自然而然就形成了我们说所得 “信息优先级”；有点时候空气和光影的饱满程度超乎你的想象，这种自然存在的物质可以很好的帮助画面分层，以达到填充的效果，并不是一定要依赖于实体化的装饰。
本来不打算再开一个章节说这个，但还是觉着很有必要再说下（我好纠结），作为PPT来讲，ta的主要用途分为两种：其一是给人看的，其二是给人讲的；不管是哪种，尽可能的简化文字，是对输入者关爱；
以上图为例（实名diss自己的作品），坦诚的讲左边的部分大多数观者是不会有心思来看的，按照视觉系统的处理，这部分就会被当成一个“面”而被忽略掉，这种情况下右边显得有力很多，也能帮助观者聚焦信息，所以还是那句话，能不写的就别写，能少些的别多写，保持信息的密度也是设计师必要的职责之一。
作者：负能量的补给站 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝设计的小编 http://www.lanlanwork.com