头像，作为我们在虚拟世界展现给别人的形象，无疑拥有强烈的社交属性，还记得当年刚刚拥有QQ的我，隔一周就会换上自己喜欢的图片，通过头像还添加了好些拥有同样爱好的人。
但是随着年龄的增长，我们开始不太爱去设置自己的头像(有些APP甚至会将设置头像作为领取奖励的任务，可见大家越来越不爱设置头像)，一些不经常使用的APP都是习惯性的使用默认头像。
这时候设计合适产品的默认头像能够使产品整体更加和谐。接下来我们就来看看默认头像的7种设计方式。
单个无性别头像是最常见的默认头像设计方式，以无性别灰色或单色系半身人像为主，有些会使用宇航员的形象（也看不出性别），且一般只有一个。如下图：
特点：无性别头像具有更广的包容性，设计简单快捷适合比较赶的项目；但设计单一，单个无性别头像的社交属性不够强烈。
性别头像以男女性别划分，根据用户男女比例的不同有以下三种情况。
产品定位以男性居多，无论用户男女都仅有男性默认头像。
特点：只设计一个男性头像，比较快捷，但对女性用户不太友好
产品定位以女性居多，无论用户男女都仅有女性默认头像。
特点：只设计一个女性头像，比较快捷，但对男性用户不太友好
产品定位没有明显的性别偏向，分别设计男性和女性头像，需要注意的是该方式常常需要用户设置性别。
特点：分别设计男性与女性头像，能满足大部分用户，需要开发判定用户的性别。
吉祥物头像也是使用很频繁的，一般拥有吉祥物的APP都会采用该方式设计默认头像，设计1个或是多个。
常见吉祥物多以动物为主，也有以人物、拟人物为主的吉祥物，比如B站的看板娘萌妹子和黄油相机的一坨黄油。
特点：吉祥物头像更具辨识度，随时随刻加深用户对吉祥物的印象，便于制作延伸设计。
这里的logo头像是除去以吉祥物为logo的APP后，其他的logo头像。使用这种默认头像的APP比较少见，目前我看到的有悦动圈和开眼，如下图：
特点：logo头像能加深品牌的印象，但缺失了头像应有的社交属性。
头像中以文字为主，一般仅有两个字。以钉钉为列，它的默认头像使用用户姓名后两位作为中心，我认为其实钉钉的默认头像已经可以很好地帮助用户找到公司对应的同事，反而比起某些图片类自定义头像来的直接。
还有一种文字头像是以APP名称为主，比如叮当快药，它的默认头像取了”叮当“二字，和logo头像类似，同样能加深品牌印象。
特点：以文字为主，多为两个字。OA办公系统可借鉴钉钉以员工姓名为主。也可将APP名称置入头像中，能迅速设计出来，适合时间紧的项目。
多主题默认头像，常用在拥有强烈社交属性的产品中，APP给了用户更加丰富的默认头像选择，有了这些丰富的默认头像即便用户不自定义头像也不会对界面的层次感造成影响。
soul设置头像时可以选择多种画风的不同人物，男女分别有36个默认头像供用户选择，并且还可以改变背景色，使得默认头像变化丰富，具有一定的趣味性。
类似的还有B站的随机头像，共有11个以B站看板娘为形象的默认头像，可以帮助用户减轻因选择困难症不知用何头像的焦虑。
特点：为用户提供了丰富的默认头像，能减轻用户不知使用什么头像的选择困难，并且具有一定的趣味性，但设计花费时间较多，不适合时间紧的项目。
最后介绍的捏脸头像，追溯起来应该是从iOS12发布的Memoji延伸而来，这种可以像捏泥人一样任意改变的头像具有非常强烈的趣味性，甚至形成了一夜爆红专门捏脸的APP-ZEPETO。
捏脸头像的有趣不仅在于可以捏脸，它就像是我们在虚拟世界中的形象，可以给她打扮、布置房间等，更像是延伸出来的装扮游戏。比如淘宝点击个人中心的头像就会进入淘宝人生。
soul则将捏脸头像真正应用到了头像的制作中，在个人中心点击头像即可进行超级捏脸，捏好后就可以直接应用了。
特点：具有强烈的趣味性，可以延伸为单独的互动游戏，实现难度较大，不适合广泛的应用。
本文着重介绍了7种默认头像的设计方式，分别是单个无性别头像、性别头像、吉祥物头像、logo头像、文字头像、多主题头像、捏脸头像，我们在设计时可以根据项目时间、产品的定位、趣味性等选择合适的默认头像。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945
作者：人類君 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
数据可视化的表现形式现在也2D和3D（这里的2D和3D只是通俗的叫法，不具备行业普遍性，只是作为文章中的分析，进行表达），在网上还是有很多关于2D数据文章和教程，我觉得还比较具备行业的普遍性，所以今天我们就来聊聊3D数据可视化。
现状：3D可视化目前来说还是属于一个比较小众的设计群体，而且因为主要面对的客户大多是ToG或者ToB的项目，项目保密工作做的很好，对外发声较少，因此也会显得特别神秘，行业门槛也相对较高。但是由于政府和企业对于这类项目的需求大，再加上城市智慧建设、军事电子沙盘、智慧交通，项目多且广泛，也就导致了这类设计师较为稀缺。
通常所表达的就是通过3D的游戏引擎（例如：Unity3D）制作出来的数据可视化项目，他能够更直观的还原出所要展示数据可视化的真实场景，并且能够实时接入数据，使得整个项目更具立体、更具有科技感。使得项目在面对复杂操作时能灵活应对。
在我看来，虽然也是UI设计师，但是他和大众认知中的UI设计师又有很多不同，比如承载设计的屏幕可能大到16m*9m、小到只有iPad的尺寸，因此很考验设计师对不同尺寸屏幕下的设计方法。而3D数据可视化更多是向空间、建模形式的表达，因此对于三位的理解、空间的交互转变都尤为重要，我在下面来一一拆解需要哪些能力～
视觉能力：在设计当中，视觉也是最基本的能力，其主要满足这个数据可视化当中对于场景、物体的视觉能力、数据图表的视觉效果，对于地图、建筑、数据的视觉表达。通常风格以科技感的风格为主，因此考验的更多是我们设计师的想象力、对于科技产品的表达能力，因此对于FUI比较重视，如果平时能够多看科幻电影能够对这方面能力也会有所提升～
数据可视化能力：首先你需要具备很强的数据表达能力，即将用户想的数据现象通过你的数据化设计进行表现出来。同时需要去理解每个数据之间的真正含义，然后再去设计，因此对于图表的理解必须更加深刻。再次因为是通过3D的手法实现，你所更需要了解是我设计的这个图表，2D和3D之间到底存在什么差异，既然我用了3D，在图表层面上怎么和2D图表拉开差距、有所区别，这是我们需要去认真思考的。
三维交互能力：三维软件的交互和二维不同，虽然在移动端大家都提出了Z轴的概念，但是和现如今所需要的可视化的项目不同。
建模能力：因为在实际工作当中，很多建筑物不能够靠你的三维想象来进行设计稿的制作，因此通常我们也会使用c4d这一类的三维建模软件，这样能够保证快速出设计稿的同时，对于物体的表现又能非常到位。
对于接触数据可视化的UI设计师来说，最关心的莫过于这个项目你们是怎么落地。因为每个公司要求不同，我说的只是我们自己的做法，只是想说出来和大家分享分享～
一般我们产出的会几个东西：设计静帧图（包含静帧图、标注、切图）、视频demo、交互流程（看项目）
基本流程：这个是必须要的，首先项目会根据我们所出的设计静帧图进行和需求方进行对接，确定他们想要的效果和设计静帧稿上是否一直。如果双方理解存在差异，就会按照要求进行修改。修改完成后会将设计静帧稿交到建模师手中，3D建模会根据你这个静帧图进行建模。当然，我们设计师是不需要制作模型的，如果会，当然也是更好，能够方便建模师进行快速建模。但是因为每个项目的要求不同，对于我们这种设计师来说时间相对很紧。对于我们来说需要进行快速的出图，从而能够和需求方进行方案的确定。
设计静帧图：他最大的作用是和需求方进行沟通，以及和建模师进行效果确定。还有后续验收时会根据静帧图进行效果评定～
标注：字体、字号、颜色、位置、基本数据参数，标注和之前大家熟悉的思路基本一致。
切图：icon、图片，开发不能通过代码进行实现的
视频demo：会根据项目的难以程度进行制作，通常在较大项目中，会有时间进行视频demo的制作，同时demo也会给需求方、开发进行很好的演示，使得整个项目在开发当中能够更加明确。
交互流程：但是我们需要考虑到的是设计后整个效果是如何，以及设计后整个点击过后的交互，因此在基本方案确定后，静帧图会和交互方案
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945
作者：CE青年 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
筛选可以说是我使用比较频繁的一种交互形式，比如我点外卖，会选择满减优惠力度大，同时我也可以选择在哪一个价格区间内的产品，这就会用到筛选，而到了B端产品上来，一个CRM系统当中，筛选的逻辑也会比移动端的复杂，伴随着：且关系、或关系、大于、小于等等这样复杂的逻辑，也为设计本身增加了很多难度。因此，今天我们就来讨论讨论筛选控件
筛选存在的对于整个表单来说是非常重要的，它可以帮助用户，在表单茫茫多的数据当中进行快速的定位；可以对表单进行快速划分，缩短用户对于数据的寻找时间；能够满足用户在工作中，实际业务场景的筛选。
对于实际B端场景来说，筛选是日常数据分类的一个重要途径，我们先来看看实际场景到底有哪些？
比如今天作为一个电话销售人员，想要联系最近注册的用户时，通常会通过筛选来选出最近几天注册过，同时又没有销售更进的客户，进行一个优先级的排布；
再比如说，在销售周报当中，销售主管可以通过筛选得到每个人这周完成的状态，也可以通过筛选得出每个人对于线索的更进情况和对客户的流失状态等等，这些都可以通过各种各样的筛选形式来满足用户对于特定情况下的使用
筛选可以通过多个筛选条件进行多维度的寻找，而导航、搜索只能通过单一条件进行指定筛选。
虽然在现在很多搜索都可以支持多维度用空格去进行多字段的关键词搜索，但本质上区别不大
所以在B端项目当中，如果你有表单，那你就需要筛选
我们将筛选分为基础筛选和高级筛选两种，两种筛选会根据业务场景不同，在不同的页面去使用
基础筛选一般为系统预设好的筛选字段，具有很强的业务和场景的需求。基础筛选一般分为四个部分：
筛选条件：是指用户可以筛选的范围
筛选项：是指用户可以选择的筛选项目
已选项：是指用户已经选中的筛选项
备选项：是指用户还没有选择的筛选选项
基础筛选更多作为用户快捷筛选的一种方式，因为一般使用场景当中用户几个筛选逻辑为“且”
同时筛选的逻辑也为简单筛选，所以在使用场景上只适合在对筛选要求不高的场景下使用。
高级筛选一般为筛选中含有运算符，同时筛选当中包含条件关系，比如且关系或者否关系。一般高级筛选包含以下几类关键词
筛选关系：是指几个筛选条件之间的关系，一般为 且、或关系，即 且 关系为几个条件之间的交集；或 关系为几个条件之间的联集（并集）
筛选字段：是指在筛选当中，所要的筛选项，一般为表单当中的所有可筛选的字段
筛选操作：是指筛选字段和筛选值之间的关系，常见的筛选操作有：大于、小于、是、否、包含、不包含、为空、不为空等等。
筛选值：你所需要筛选的数值
高级筛选一般满足更多的用户场景，为用户多条件多字段、多个筛选关系、多个筛选操作 提供有利保障。
当在筛选器条件少于5个的情况下，最常使用的就是上下布局，这样筛选能与网站保持统一的情况下，上下布局也更方便用户进行阅读
当筛选器过多的情况下（一般在5-15个之间），筛选器过多，需要滚屏才能看到筛选结果，用户使用起来会很别扭。所以在5-15个的情况下，一般会将筛选项进行收折，这样保证筛选整体面积不会太大，同时将用户常用的筛选放在前面，可以满足用户基本的业务需求和使用场景
左右布局在PC端一般是以字段选择进行筛选，通俗来讲就是将用户可以筛选的所有字段全部罗列出来，然后通过勾选选，择出你需要筛选的字段，进行筛选器的使用
左右布局的好处是能够将筛选的所有条件都直接的展示出来，可以适应很多场景，在筛选器用15个以上时。通过左右布局的方式，能够让筛选条件进行滚动，在最大限度保持用户使用体验
在日常的B端产品中，筛选的形式有哪些？筛选到底应该怎么设计？接下来为大家总结梳理一些在 B端产品 中的筛选玩法，希望为你开启新大陆。
平铺型一般为用户搜索结果数据量过大，使用户搜索出来的结果与其预期差距过大，用户然后可以通过筛选对数据的再一次分类，使用户能够精准寻找其想要的结果。
平铺型一般为筛选条件少于6个，这样能够通过1行或者2行去展示筛选项的结果
多用于信息量大的产品，比如电商、视频网站等等。常见的淘宝、京东、腾讯视频PC端 都采取用这样的方式，将所有的筛选条件列出来。
平铺型的好处是将筛选项的结果全部或者部分放出，能够帮助用户快速理解筛选项以及快读找到自己想要的结果。
缺点也是很明显，平铺型的控件占比大，需要占据大量面积展示平铺出的筛选结果。
比如淘宝PC端，搜索一个产品后花去40%的面积去展示所有的筛选条件，其实就是想引导用户，淘宝搜索过后spu的数量仍然过大，想通过进一步的筛选，让用户明确自己对想要东西。同时因为面积占比大，通常平铺型都是以收折的状态，只有在搜索触发后才会完全展开
收折型筛选是一种简单直接的筛选形式，将用户常用的筛选形式通过下拉框的形式进行筛选。每一个筛选条件就是一个下拉框，这种形式看上去很简单，但是在B端场景中，下拉框对于用户来说认知成本低，操作性也较强，同时在用户重度使用时，又能给用户很好的使用体验的一种方式
用户可以直接对其常用的字段筛选进行一步操作，并且没有复杂的筛选关系，全部都是“且”的筛选逻辑，能够保证用户进行快速的筛选选择
将所有信息全部平铺展开，信息量过于冗杂繁多，同时在做通用性产品时，这种方式很难做到通用性
单侧筛选是一种更通用的筛选形式，通过对于你想筛选的字段进行勾选，勾选完成后就会出现筛选条件，然后选择筛选字段、筛选操作、筛选值，一般选择完成所有筛选后，还需要点击查询，筛选操作才算完成。
整个单侧筛选，大量的筛选条件可以放置在表单的左侧或者右侧，通过表单纵向空间，去承载大量筛选条件。
节省空间、通用性强。因为在很多Saas系统、Paas系统当中，无法针对每一个客户进行设计，就要考虑到系统通用型高，做一些大而全的功能。在每个表单也所需要定制化修改的地方很少，同时能容纳的信息量可以很大。
就是在后台系统当中只有这一种筛选形式会面临在我常用的几种筛选的字段中，要通过不断寻找，来满足我的筛选需求，操作麻烦。
我们产品在某一次改版就将筛选由收折式修改为单侧式，因为我们用户使用筛选的场景非常的多，用户每次筛选都要多进行2、3步操作，导致用户进行了大量的吐槽，后来进行修改，将筛选顺序支持手动调整顺序，用户吐槽的次数才慢慢减少。
表头筛选是一种复杂筛选的形式，其最开始是来源于Excel的筛选形式。点击表单的筛选按钮，可以将表头的筛选字段直接带入，方便用户。之后在后台产品的发展中，得以借鉴过来。
可以通过表头的点击，使用户更快捷进入到自己的筛选条件，在通常情况下，在表单越左的数据显然是越重要的，也是使用筛选去筛频率最高的，因此高频的筛选场景基本还是得到满足。
用户第一次进入系统很难理解这种交互形式，且在每个表头都会有一个icon，影响用户对于表头的识别。
通过点击筛选按钮，展现出筛选弹窗，进行筛选。这种筛选适合在筛选功能在系统中不是很重要的层级。最常见的就是Tapd，在其中筛选不是很强的一个功能，同时也是系统中十分有必要的。
是能够在节省面积的情况下，可以进行很复杂的筛选，同时可以支持复杂情况下的筛选
弹窗会遮挡一部分表单数据，会影响筛选人的判断，其次筛选条件的添加也相对更加繁琐。
在我们一系列筛选的调整过后，我们团队也总结了对于我们来说更重要的条件和形式，来和大家分享探讨一下。
我们认为影响筛选控件最重要的是用户的使用频率，因为用户的使用频率和使用方式，直接影响到我们筛选是用普通筛选or高级筛选，也会影响到筛选的形式。
筛选功能的做法，取决于我们产品未来是想往哪一个方向发展，如果想把功能做的强大，就得考虑到筛选的后续扩展性。因此满足实际业务也是十分重要。
在B端系统当中，最可能遇见的就是你给用户设计的路径但是其实用户根本没有往你想的方向去操作。我们系统最开始给用户设计好了很多功能点，但是用户对于这个点的认知成本实在过低，也导致了后面系统功能点很多都被埋没。因为在你设计好了一个功能点后，要适当引导用户，解释这个功能的使用场景才不会让你设计的功能被淹没。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945
作者：CE青年 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
提起用户激励体系你会想到什么？积分体系？签到体系？或者是简单粗暴的现金优惠？
以上都不是，今天我想和大家分享的是任务成就体系中的勋章设计。
一、什么是勋章
我们先来看看勋章的定义： 勋章，是指授给有功者的荣誉证章或者标志。 古代欧洲为了区别在战场上的骑士，一个名为勋章的标志制度得以发展。每一个贵族都会设计出一个独特的标志，制作在他的盾牌、外衣、旗帜和印章上。（摘自百度百科）
上面这段话有三个词语是重点，有功者、荣誉、独特标志。有功者反应了勋章不是每个人都能获得的，而荣誉则反应了勋章是荣誉的象征，能带给获得者精神上的满足。独特标志则区分了获得者与其他人。
小到小时候得到的小红花，大到奥运会国家赢得奖牌，这些都算是勋章（不同产品的叫法可能不同，有勋章、徽章、奖章等）。
二、勋章的作用
上面我们说了勋章能带给获得者精神上的满足，那么延伸到互联网中，勋章设计的完善则能一定程度上起到满足用户的成就感，激励用户不断使用产品的作用，常用在内容类产品中，如视频类、知识付费类、阅读类产品中。
但是把勋章设计运用的最好的当属游戏类产品了，比如王者荣耀的勋章成就体系，借助获得难易程度不同的勋章，能使用户自主的不断使用产品，获得高等级勋章后还会被膜拜为大神，充分满足了用户的虚荣心。
三、勋章页的构成
勋章页大致由六部分构成。包括勋章页入口、勋章墙、勋章详情说明、进度展示、勋章图标。
1.勋章页入口
勋章入口一般有两个位置，一是放置在个人中心页中，还有一种则是放置在个人主页中。个人中心页只需点击底部tab切换即可看见入口，而个人主页还需用户再点击一次才可看见。
放置在个人中心
放置在个人中心的勋章入口大致也有两种样式，一种是以图标的形式跟随在昵称旁边，另一种则是放入个人中心列表功能入口中。如下图：
二者的选择主要是看个人中心的主要导航方式，一般宫格导航为主的个人中心页会采用勋章入口跟随昵称旁边，列表导航为主的则会将入口放入列表中。
当然，具体选择还是看勋章功能的重要程度，比如波洞的个人中心以列表导航为主，但勋章入口却是放置在顶部宫格中，我的理解是波洞的勋章功能层级较高，因此放在了更显眼的位置。
放置在个人主页
勋章入口多以图标形式跟随昵称放置在个人主页中，此类产品往往拥有较强的社交属性，用户拥有自己的动态主页，因此既能查看自己的，也能查看他人的勋章。
上图知乎的勋章入口还将用户拥有的勋章展示了出来，比起单个图标入口更能吸引用户点击进入
2.勋章墙
点击勋章入口进入的页面就是勋章墙了，勋章墙主要包括用户已获得的勋章信息以及产品包含的所有类别的勋章展示。
勋章墙展示几乎都是采用的宫格式布局，一般一行分布2~5个勋章，多以3个为主。
勋章墙中的已获得勋章信息包括用户总获得的以及不同类别勋章的单类获得数，显示总获得数的勋章墙会在顶部加入用户的获得信息，帮助用户一眼识别。
在勋章墙的设计中，注意要做好获取与未获取勋章的区别样式，重点是保证用户能一眼识别出获得与未获得的勋章，多是将未获得的勋章置灰处理。反面例子如下：
上图KEPP中，已获得勋章是将其正常颜色展示，而未获得勋章采用的浅紫灰色，我一眼看过去时真的没有反应过来哪些是未获得的。
3.勋章详情说明
勋章详情说明是在勋章墙展示中，点击勋章后以弹窗的形式展示出来的，包括全屏弹窗与非全屏弹窗两种展现形式。
全屏弹窗详情说明
勋章详情说明采用全屏弹窗能承载更多的信息，除了可以包括获取说明外，还可以承载奖励说明、获取进度以及获得后的分享炫耀按钮等。
上图中得到与咕咚的该勋章都属于升级类勋章，勋章本身有级别的划分，左右切换可查看不同级别的勋章，像这样有等级划分的勋章采用全屏弹窗会更加直观
非全屏弹窗详情说明
承载的信息较少，一般只包括简短的说明信息，更加简洁轻量。如下图：
知乎与开眼都采用的非全屏图片弹窗，视觉效果更加轻量。知乎虽然也有等级划分类的勋章，但由于采用的非全屏弹窗，等级切换采用的是点击切换，说明文字也更加简洁。而开眼则直接在文字中说明下一等级勋章，并不能直接切换查看。
4.进度展示
需要累积获得的以及等级划分的勋章还需要加入获取进度。我汇总了3种勋章进度展示的样式，包括进度条、数字进度、文字说明。
进度条
以一个横向进度条展示在勋章详情说明中，能够直观看出当前进度占比，对升级进度有一个大致的判断，占屏比较大，适合放入全屏弹窗详情说明中。
上图中咕咚进度条只展示了进度百分比，而波洞的进度条同时配上文字说明，升级进度更加精确。
数字进度
左边为当前达到数字，中间斜杠隔开，右边为该勋章获取总达到数字。升级进度精确，占屏比小，即可放入全屏弹窗详情说明也可放入非全屏弹窗详情说明。
文字说明
文字说明进度直接告诉用户还差多少具体的进度，没有总进度展示，进度也很精确，占比小，注意需要对文字进行字数限制。
5.勋章图标
勋章图标作为勋章设计中最重要的一环，需要UI设计师花费很多的心思。勋章图标目前多为图形图标，我只看到开眼是采用的图片类勋章。
在设计图形勋章时以现实生活中的勋章为灵感，多采用统一的勋章背景模板，保证整体勋章墙的视觉统一，便于多次复用。常用的形状有六边形、圆形、盾牌形状等。
切忌在设计图形勋章时采用复杂的背景模板，以免降低了勋章内部主体的层级。
四、划重点
本文主要为大家浅析了勋章设计的定义、作用以及勋章页的构成。
勋章的定义：勋章是指授给有功者的荣誉证章或者标志；
勋章的作用：勋章能带给获得者精神上的满足，一定程度上激励用户不断使用产品；
勋章页的构成：包括勋章页入口、勋章墙、勋章详情说明、进度展示以及勋章图标。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945
作者：人類君 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
随着跨设备跨平台的趋势不断显现，比如最近很火的鸿蒙，一部手机就可以完成办公场景到生活娱乐场景的转化，未来B端的管理系统不在局限于pc端，体验将不断向移动化对齐，使B端用户不再受时间和地点限制。
B端各个端口的特性：
在保证使用体验下。pc端、pad端、pc端的功能会是一个下放的过程，屏幕越小功能越简化。
比如有赞的美业工作台，手机端只有宫格功能入口，PAD端除了功能入口外，把工作内容也做了露出，PC端则展示了数据图表、快捷功能，以及其他提升效率的入口，内容交互更加的复杂。三端里，不仅屏幕尺寸不一样，使用场景和角色也完全不同，比如PC端店长使用频次更高，用于管理店铺查看经营状况。PAD端则普通员工频次更高，用于查看具体工作内容，需要接待的客人。手机端更通用，所有角色所有场景都会使用，有可能是在店里、家里、路上所以在设计移动端时要考虑如何在提升操作效率的同时兼容可用性。
B端的典型表单，由数据录入和操作按钮构成，往细拆解的话包含1.标题、2.标签、3.提示信息、4.输入区、5操作按钮。
标题：表单的主题，起到说明表单模块的作用，尤其是在分组的表单中格外重要。
必填提示：用于区分多个表单内容项的必填和非填项，一般使用红色的“*”表示。
标签标签：表单内容项的名称，说明对应表单含义以及向用户说明应该录入信息的类型。
提示：帮助用理解表单，最多见的是引导说明信息和反馈信息。
输入区：表单的核心区域，承载用户主要的交互。
操作按钮：完结表单操作的触发器，用于确认数据或者取消数据，表单越复杂按钮也会越多样。
大部分场景我们希望用户能尽快完成表格。但在有些场景呢又希望用户能放慢速度，使他们能够深思熟虑，比如下面的三个场景：
1.在一些资质审核的页面，希望用户能仔细填写。
2.小屏幕的场景，要求表单纵向或者横向最小化。
3.国际本地化的需求，表单需要适应不同的长度和多种语言。
这张图是医生端注册流程的竞品对比。他们哪种方案能更好的为用户和产品服务呢？接下来我们来看下三种典型的表单，能帮助你更好的理解。
1.左对齐标签
优点：如果用户不熟悉表单要录入的数据，或者是复杂内容，左对齐会更容易些。视觉动线会更符合人们阅读习惯，并能节省纵向的空间。
缺点：长标签会增加标签和输入框的距离，导致延长完成时间。
从马泰奥-彭佐在2006年进行的眼动研究里发现，左对齐标签速度是最慢的，用户眼动定位的次数最多的。如果希望用户能放慢速度，并仔细阅读表单中的每个输入框，左对齐会是一个很好的办法。特别是含有大量的可选输入框，或者陌生数据，比如像资质认证页、金融申请页等。
在左对齐标签里，内容也有右对齐的方案，如下图。这解决了长标签带来的适配问题，使空间能更好地利用。但关联度会降低，增加理解成本。并会导致眼动距离拉长，适合选择类的录入方式，缓解此缺点。
2.顶对齐标签
优点：有较多的横向空间，并且阅读效率快，对于国际化的设计或长标签特别有用。
缺点：会占用较多的纵向空间。
在同一个实验中，标签到输入框只花了50毫秒，比左对齐快了10倍。
以下是B端的典型列表，主要是信息的查看和操作。基本是由1.卡片、2.切换筛选、3.搜索、构成。
卡片：在移动端列表中更多的是以卡片式的形式呈现，卡片利于展示信息的深度和承载更好的交互。在移动app中我们可以大胆的尝试使用卡片式设计，不仅信息能够很好的突出，也能适应多端设备的展示。
筛选：筛选对于整个表单来说是非常重要的，它可以帮助用户在表单茫茫数据中进行快速的数据定位以及划分，缩短用户对于数据的寻找时间；
搜索：将想要查询的信息输入到相应的搜索器中，用户可直达任务目标。
贴近场景的设计可以舒缓数据页面带来的心理压力，拟物元素与表单的结合的呈现形式能够给用户带来愉悦感。
如下图的例子，途牛商旅用了差旅审批单粗细线条元素，医鹿用了病历本上面的钉扣，饿了么商家版模拟小票的设计。
B端典型数据页，他们基本是由1.数据统计、2.可视化卡片、3.筛选、4.数据明细构成。
数据统计：将用户所需关注的重点摘出来，并展示和业务相关的其他数据。通常是主数据+副数据的结构。
可视化卡片：数据分析里有一句话叫“一图胜千言”，当面对海量数据时（右图），利用图表可以帮助用户快速理解数据含义。
而图表是数据页面里的重要组件，经过图形化、通俗化、形象化后的数据可以帮助我们直观的理解数据。
激励性数据设计
2008 年，为了减少电力消耗，有一家电力公司向 35,000 名客户发送了一封带有简单图表的信，向客户展示了他们和邻居的电力消耗情况。
在图表中，可以看到一个条形图，代表 3 个不同组的功耗：节能的邻居、所有邻居和收信人的家庭。这向客户显示他们是否比邻居消耗更多或更少的电力。
最后这些收到信件的客户平均降低了 2% 的功耗 ，虽然就个人电费而言，这似乎很小，但对所有客户而言，这相当于节省了大量电力和百万美元。从那时起，全国其他电力公司都采用了这种方法。而这种方法也叫做激励性的数据设计。
移动端图表
实际执行中，要针对具体场景，选择合适的方案。比如在一个多折图表要选曲线的还是直角的，直角能精准的体现数据而曲线降低认知负担使视觉愉悦。
下图淘特首页设计中，需要在较少的纵向空间里设计可视化图表，可以看出这里简化了y轴的标签以及取值范围，最后反应到图表上会是一个较平滑的曲线。而这种设计方案上更多的是感知价值而不是精准的数据，这跟激励性的数据设计有相同的作用。
工作台是一个帮助用户快速掌握工作进度及进入工作状态的导航页面。也是用户感知产品价值的重要门面；所以首页工作台是体验规范和视觉风格的核心场景。
我们来观察下医蝶谷为什么这样改版。从原型的变化可以发现，这次改版更多的是去满足业务上的变化，我认为有以下几点
业务优化：
1.这样的改版体现了医蝶谷在业务策略上的变化。观察老版本我们发现，极速问诊占了首页的4/10。这个阶段更多是考虑患者订单响应时间，所以接单较慢的新手医生体验较差。
2.将极速问诊的内容进行收起，医生抢单的成本更高，并且将原本tab的问诊整合进了首页。使医生在首屏就可以快速掌握工作进度及进入工作状态。
视觉优化：
1.老版本的快捷工具图标颜色更丰富容易被用户发现，但是在医生常用的工作台里，又显得有些用力过猛，新版本弱化常用功能图标的视觉，让医生关注到更有价值的信息上。
2.在新版的首页里，因为极速问诊改变了位置，我们可以在设计上做一些差异化的改变，去适应新功能的承载。
前面提到了B端的表单、列表、数据页面、工作台的案例。为了表达透彻下面我跟大家分享下我在工作中碰到的案例。
医生这个职业对我们来说熟悉又陌生，在我们生活里每过一段时间几乎都会去和医生打交道。医生一上午可能就有多达几十位患者就诊，平均到每位患者仅有3～4分钟的诊断时长。在这短暂的时间内，要完成病症的诊断处置、病历填写，还要面对来自病患各种问题，难度可想而知。而这种场景映射到互联网上也是同样的，何况大部分还是兼职医生。所以我们要做的是让产品更易用，降低流程的复杂度。
通过医生调研发现，医院排班并不按照周循环，平常临时突发事情多。所以一日的排班里，时间会有一定的跨度。
举个例子，大家去看病时候时候一定遇到一个场景，是医生让你去拿报告，在回来的时候你不是重新排队的状态，医生需要在这时候对你进行干预。
设计应当顺应医生的工作特点，考虑在特殊场景上的使用，我们提出的以下策略。
精简布局，提升屏效
1.在前文B端列表有提到，列表顶对齐的方式用户阅读起来效率是最高的。所以这里将时间标签调整到内容上方，同时调整卡片里任务名称和时间的权重。
2.优化前任务排序结构是按时间规律往下排布，一小时占用一行。因为医生平日事情多突发，排期上无法按照一定的规律。如果需要查看下午、晚上的排期交互步骤则会被增长。所以在设计上将无任务的时间标签进行收缩，这样在首屏也能看到在晚上的排期状况。
利用色彩，少即是多
色彩是最具本质影响力的表现因素，在设计即简单又重要。研究表明，人们只需 90 秒就能对一种产品做出下意识的判断，而其中高达 60%以上的判断仅基于颜色。
排期表借助色彩关系，提高用户查找效率和传递更多的信息。如下图一开始的想法是按照患者端的逻辑，依据业务图标进行区分，但两端统一要考虑的因数比较多，不适合复用。最后考虑采用颜色标签的形式进行区分
优化路径，去繁化简
从前期的调研的结果来看，医生的排班是无规律多突发的，会出现在一天里添加多个不连续时段的场景。所以我们针对医生的排班的设置做了以下优化
优化前添加一个时段需要4步，添加一天不连续的3个时段需要3x4=12步，需要用户判断复杂的逻辑，而优化后添加一个时段需要3步，添加一天不连续3个时段需要4x1=4步，逻辑简单明了
这是医生端其中一个案例，可以看到一个视觉、交互上的优化都是针对医生实际的工作场景去设计的，在医生这个行业，有着很大的行业壁垒，需要我们逐一去调研给出设计方案。这也是B端设计中需要重点关注的地方。
代码框架
B端设计师最常接触的设备就是PC，而要做移动B端基本上也是会通过H5、RN等技术实现。这样方便多平台复用，下面我以web为例子，讲述我们该如何理解前端的页面结构
提升开发效率
设计的过程中，好的工作流程可以帮助开发节约工时。如果公司有交互的基本是能做到提前开发的。没有的话，我们最好有框架思维，先搭好框架，截图给开发参考，开发会根据你提供截图，进行基础模块搭建，最后在根据标注文档进行css上面的调整。
降低服务器成本
我们将切图给予到开发以后，开发会将其传到服务器上面。
用户在访问我们的页面时其实是相当于发送一次请求，将服务器里面的图片下载下来，如果图片的数量太多或者文件太大，会占用大量用户的带宽带来极差的体验。
而服务器的空间也是需要公司付费购买的，所以尽量一张图在多处使用。如果是非常高清的图片，可以将图片里的人物切出来，在不同的场景去复用。实测一张4k的官网banner，人物单独切出进行复用可以减少banner50%的大小。
占位符
在一些需要实现文本换行的效果里，开发很难去通过去写间距，因为会有换行的关系。一般会通过占位符的方式去实现，而在占位符里有分为好几种，下图我列举了最常用的三种占位，分别能实现三种不同的间距。
字重
字重的功能是为了在文本种突出重点强调内容，在文本中常采用3种规格的字重（regular，Medium，Smlbold）。但在h5的环境里，只有字体标准和粗的还原效果。在标注文件里也能发现标准体和粗体在标注文件里都会显示字重为500，而500在前端里的显示和标准体是是没有区别的，我们需要写好规则，和开发约定，以后只要看到medium就写成600字重。
如何推动规范
通常在一个版本我们就算把开发大佬的头搞秃了，都很难吧所有规范改完，因此我们需要将自己作为PM的角色，针对现有的需求进行拆分，并排出优先级、分版本迭代进产品，并同步需求。
另外在推动规范的过程中，有可能会出现上图的情况。这里可以使用表格的方式进行推动上线，可以好的避免以下情况。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945
作者：丸子说设计 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
其实说到设计的价值，它是非常大的，可以从很多不同的维度去出发，每一个小点都可以作为闪亮的发光点去助力产品获得价值，并且现在互联网时代，多元化思维越发重要，我们不仅需要在本职范围内去发光，还需要拓展更多的能力。
但是我也发现目前普遍存在一个很严重的问题，有很多小伙伴设计一个红包也能扯出一堆增长模型，这也是因为随着全链路、全栈设计的噱头出现，以及一系列的模板化思维体系所影响。
设计思维本没有对错，但是需要合理的运用，并且将设计点需要落在实际的内容上，像我们常见的用户画像、体验地图、情绪版等等，那么我们应该如何有效的将设计点落实在内容上呢？
众所周知，在整个产品设计中，视觉感受是最直观的，也是我们作为一名UI设计师能直接去影响的，而视觉层面的内容基本可以划分为六个点，也就是我们常常所说的 - 形色字构质动
在很多的设计运用场景中，这六点都是作为比较基础的内容，像一些视觉语言制定上，而产品设计的过程中，纵使有再多的方法论和思维体现，最终都需要通过视觉的表现，所以我打算利用这几点去深入挖掘，也许可以找到更多的设计发力点。
形也就是设计中最基础的图形元素，在平面和品牌设计中经常可以见到，像一些点线面、图形构成等等，而回到产品设计中呢，最典型的形就是我们经常见到的图标，那除此之外，形还有哪些体现方式呢？
图形的设计表现中，我第一个联想到的就是插画，但是插画的类型和使用方式也分为很多种。
首先我们先设想一个场景，当我们接触到一个新鲜的事物时，我们首先需要快速的了解他，我们可以通过产品说明书、产品结构图，场景使用模拟等不同的方式来表现。
因此在一些服务页面或新功能介绍中，都会适当的融入功能插画，而这种表现形式可以使得界面展示更直观，快速的让用户理解所描绘的功能含义，减少用户学习成本。
像一些页面中还可以利用场景插画去表现，不仅可以打造内容的差异性，还可以快速让用户融入到场景中，进一步提升用户的情感体验。
品牌设计的目的就是为了利用图形化的元素，去加强用户的记忆，而随着产品发展成熟，为了可以非常有效的去强化品牌，形成产品间的差异性，设计在表现层可以利用不同的形式去强化品牌。
设计表现上可以赋予产品非常明确的设计风格，例如抖音的故障风格，在图标、插画、活动页面都有很好的延展，这也赋予了很深的产品印象，甚至有很大一部分用户看到故障风格就会联想到抖音。
除此之外也可以利用品牌元素进行一定的延展设计，像Logo图形可以用到很多的图标和默认图上，或者也可以使用品牌形象，在一些界面的提示信息、内容引导、以及一些插画绘制上，都可以进行有效的融入，进一步达到品牌延展的功能。
那么说到延展，其实我们也可以针对一种元素进行适当的延展，将所需要体现的内容进行强渗透，从而进一步打造内容的专属调性，以及强化用户的心智。
下面的案例来自携程精选榜单，而在整个入口、详情页，均采用钻石元素贯穿到整个页面当中，不仅可以使得画面更加具有视觉冲击力，也可以使得钻石品质的氛围在页面中多次露出，进而加深页面品质感。
图形的表现还有一个非常重要的内容体现，那就是数据图表。在一些工具型或B端产品中，都会有着大量数据，而为了让产品使用更高效，我们可以利用这种形式来展示。
但每一个结构不同的图表，所侧重的功能都是不一样的，有的偏向于于数据对比，有的偏向于连续变化数据，有的偏向于占比情况等等，因此在使用的过程中需要区分内容的侧重以及用户对数据使用的倾向。
在现实中，颜色赋予了这个世界缤纷多彩，它是我们肉眼最直观的感受。在设计中，颜色是尤为关键的一部分，它赋予了内容不同的表现形式。
颜色的学问也比较广泛，除了我们常说的色彩关系、颜色搭配等等一系列之外，色彩上到心理学、下到用户体验，涉及的范围十分全面，那接下来我们就来感受一下色彩的美妙吧～
生活中有着不同的颜色，例如黄昏与清晨、深夜与极光，都有着不同的色彩倾向。除此之外，色彩心理学中介绍，不同的颜色给予用户不同的心理感受。
例如我们常常所说的金色表示尊贵，这就好比现实生活中的金银铜牌，他们利用不同的颜色去体现内容的品质，我们恰好可以利用这种颜色运用到会员、勋章等内容中，去凸显会员的尊享感、情感化，进一步强化用户的身份感知。
颜色的感受也可以利用到全局的设计配色上，我相信大家肯定都非常熟悉前段时间非常火爆的暗黑模式，这就是利用不同的颜色来打造特殊的模式，而暗黑模式可以使得用户在黑夜也能舒适的使用产品，并且一定程度上节约手机的电耗。
但不是所有的深色系产品都是暗黑模式，我们也可以利用这种颜色搭配打造不同的产品氛围与特色。例如抖音、MOO音乐等等。
并且随着互联网的发展，用户群体逐渐庞大，其中也有部分身体有局限的用户，对于他们来说更加迫切通过互联网获取信息，因此越来越多大公司注重到这一方向，而这也是我们作为一名设计师，更应该去优化的方向。
可以采用无障碍色系，以及颜色的色差处理，针对性的服务于色盲和色弱群体，使得他们可以在信息阅读上更符合他们的习惯，从而进一步打造更人性化的产品体验。
色彩搭配讲究颜色统一、协调，在一些界面中，我们可以利用这种色彩技巧去营造氛围，可以有效的提高界面沉浸感，但是产品中由于内容的差异无法固定颜色，而这也会导致颜色统一性较难处理，因此可以利用代码的能力判断封面色彩倾向，从而进行填色，例如豆瓣app。
不仅如此，我们也会市场看到头部背景图和banner图的色彩也会统一处理，这是单独配置了一张背景图，从而达到页面头部的协调性。
字体在设计中占有很重要的一部分，在UI设计中也是最为关键的信息传递载体之一，而关于字体的内容也是十分广泛的，下面我将从字体排版、字体设计和字体内容三个方向来分享我的心得。
字体排版中的字体行高、间距、段落等等，这些都是一名设计师必须去掌握的基础，但是有一些看似简单的规则，却常常会被忽略。
例如下面案例中的结尾标点符号在首，这个是避首位法则中最关键的内容，那为了解决这种方式，我们可以利用「推出式避头尾」，这也是目前主流的方式之一，利用这种换行的形式避免问题，但是往往会形成句尾参差不齐。
因此我们可以利用「优先推入式」标点挤压的方式，将标点符号进行空间挤压，这样可以在很大程度上确保文字在合适的版心内整齐一致。
空格是我们平时接触最多的一种字符了，常使用与内容分割中，但是在排版中有很多场景也会用到空格。
例如英文排版中的点号后面需要加空格，不然会导致语句之间过于拥挤，而中英文结合的时候，之间也是需要空格进行分割处理，除此之外中文和数字之间也是如此。
字体的类型分为很多种，而常规的界面信息展示中，一般都采用无衬线字体，但个别产品利用特殊字体去传递产品的气质，例如阅读产品中采用衬线字体。
除此之外， 大厂也纷纷设计属于自己的专属字体，通过这样的方式去强化自身的品牌感。
一年前的MIUI11版本更新，最重磅的内容即是推出动态字体，用户可以自由选择字体粗细，同时为了让界面的美观度及文本识别性不会被破坏掉。
既然聊到字体，那我们顺便再来谈谈近期比较火的微文案，虽说内容听起来侧重于文案策划，但是其目的是为了优化用户体验，甚至提高转化率等等，那么作为一名设计师，我们更应该去关注这样的内容。
而微文案的体现也分为两个部分，例如下图中所展示的情感文案，百度网盘的会员到期提示，拟用“藏头诗”的形式，渴望留住用户。
除了上面所描述情感文案外，我们还可以利用文案内容来影响用户行为，往往是这种越细节的地方越是存在着成就或破坏用户体验和转化率的因素，而这些文案一般出现于，提示文案，引导文案，弹窗文案等等，不仅可以解决用户的疑惑，还能进一步引导操作。
说到结构，我们一般都会联想到用户体验五要素中的结构层，他在产品设计中更多体现于信息布局和内容结构布局，而对于我们设计师来说，更多的感觉就好像画面中的布局与排版。
结构的内容相对来说还是比较广泛的，我主要是围绕界面布局来进行分析，讲一些我觉得还不错的优秀案例，希望从这几个角度出发，可以带给大家一些启发。
场景化设计是体验设计中较好的发力点，也是我最近一直在研究的方向，后续有空我会单独写一篇文章再进行深入分析。总的来说呢，场景化设计分为多个侧重点，今天分享的内容主要围绕着用户分层，为不同的用户设计。
像我们常见的一些首页布局中，其实有也简单的分层，我们可以根据用户不同的目的来进行布局拆分。
下面的案例从上到下依次为，目的明确的搜索用户、分类明确的用户以及只想随便看看的用户，这样的话，可以有效的服务与不同用户的目的，也可以快速实现流量分发的作用。
而这两个界面都属于功能服务类界面，用户去完成某件事的行为也可能会存在差异，所以我们也可以对于功能进行合适的分层布局。
下面的案例从上倒下依次为，想快速申请贷款或者快速完成任务获取现金的用户，我们提供了直接操作区域，并且置于头部进行业务属性强化，中间融入了更多的分类与内容引导，进一步激发用户的兴趣，最后可以再通过不同的形式适当的减少用户顾虑，例如优惠券的福利（强化申请贷款），为新用户提供发帖示例（确保社区的内容品质）
虽然两个界面的内容差异较大，但是结构拆分的方式以及目的都是大同小异的，主要还是为了满足不同行为的用户，进一步辅助他们完成功能服务。
而关于用户分层的场景设计中，我们还可以区分用户不同的状态/身份来对界面进行差异化布局，下面的案例来自于百度网盘会员界面。
我们都了解会员他分为很多不同的阶段，而不同阶段的用户，对于内容的关注上也存在很大的差异的，我们可以从这个角度出发，区分用户的会员状态，进一步来进行差异化设计。从而有效的提高不同阶段用户的行为决策。
论最出色的界面布局结构，那滴滴的 xpanel 必定让人印象深刻，它是一个将卡片附着于第一信息架构层级上，内容上分为“消息卡片”“主体卡片”“拓展卡片”三个维度，通过这种方式将一屏内抢占的空间通过简易的交互模式补偿回来了，这样既不打破用户的核心体验，同时又增强了运营、功能的玩法与拓展。
所以我们会发现在大部分的打车、导航产品中，均会采用这样的结构布局，这也是对特定场景垂直领域的深耕和挖掘，寻找“接触点”，帮助获取更多的功能、内容、服务，实现业务的“有效增长”。
而对于一个设计点，在历经了一段时间的发展后，也演变出了一系列的其他内容，我从这个点深入出发，围绕着内容和布局进行延展。
众所周知，产品和运营都希望我们能在有限的空间中去展示更多的信息，并且有效的给其他功能进行导流，因此我们可以根据长尾效应，在无限长的信息流当中，利用不同的卡片布局，给予不同的活动、功能进行导流。
上面所说到的xpanel，是将卡片附着与信息之上，跟着这个思路发展，我们便产生了下图所示中的半模态卡片布局，虽然追波之前出现一大批叠上叠上叠中叠的布局，但通过线上的实际使用最终发现，叠一层才是比较合理的方式，而这种布局有着良好的空间收纳能力与信息拓展能力。
质感是设计师在表现的时候最直观的体现，也可以称为设计风格，但风格近几年间也发生了很大的变化，从起初的拟物到扁平，而最近也有很多不同“流派”的质感表现，下面我将举例给大家欣赏一番。
前段时间流行了一段时间的新拟态，一度被扣上有望成为未来趋势主流的设计风格，但由于质感表现上细节过多，影响信息内容，并且局限性太大，因此并没有被广泛流传，但是在视觉设计上，是一个不错的设计表现。
磨砂玻璃的质感表现其实很早很早在iOS的界面设计中就已经存在，但当时并没有广泛普及，而最近这种风格又以一种全新的姿态回到我们的视线中，他给我们最直观的感受就是虚虚实实。
在用户界面中，这种虚实的变化可以有效的创建视觉层次结构，增加自然精心的细节，并且在多复杂内容中能让用户全面感知与处理信息，有效传达信息，让信息可阅读、易阅读。
随着大屏手机的兴起，单屏显示高度也明显增高，而大部分页面内容并不能占据一屏空间，因此利用设计手法去强化页面头部，除了元素装饰外，就是这种淡淡的色彩渐变效果，起初只运用于少部分页面中，但慢慢的这种效果开始流行起来，越发广泛。
动效设计，顾名思义就是动起来的效果，这种表现形式使得静态的页面可以更加灵活的动起来，不仅可以使得操作体验更加顺畅，也可以在某种程度上吸引、引导用户。
在动效的编排中，转场是非常关键的一部分，我之前也专门写过一篇《交互动效-转场的那些事儿》，感兴趣的朋友可以再碰个场，支持下。
用户操作进入新页面后，通常会比较关注入场元素，像一些金融产品、数据图表，都会采用短暂的动态效果，强化元素的展示效果，进一步吸引用户关注数据与内容。
在很多优秀的设计网站上，我们可以发现大多数交互动效都是对持续元素进行特殊处理，他们不仅可以让动效更加特别，还可以提高产品的流畅度。
例如下面的案例，前后页面的内容关系比较大，因此操作后可以采用持续效果，进一步引导用户的视线，提高视觉体验，强化交互流畅感。
在整个动效编排中，除了关注入场和持续元素之外，停留元素也是非常值得关注且可以深入打磨的内容。
例如下面的案例，在整个搜索体验的链路中，我们可以发现搜索框提示文字、输入的单词等等均在进行了停留处理，确保在页面切换时，减少用户的视觉跳转，可以有效提供用户的专注度，打造更加轻松的体验。
产品设计中都希望在足够的空间内可以展示更多的信息，但这样往往会带来信息过载的问题，因此我们需要在设计的过程中对信息展示进行区分，利用行动触发结合动效的形式，辅助信息布局更合理。
下图的案例来自vivo全新的原子随身听，利用现实生活中音乐播放器的样式，将同类app进行收纳，完美的体现了，在较小的空间布局下如何展示更多的内容。
与此同时也会发现很多产品中利用容器来承载信息，典型的案例就是FAB按钮，用户操作后再利用动效的形式进行反馈，其实和上面的相差不大，只不过他属于不同信息共用同一区域。
网页端有一个不同于移动端的交互，那就是hover，因此我们可以利用这种交互方式，去处理信息的重要层级，然后根据用户的操作再进行详细露出，很大程度上优化了信息空间展示。
随着产品体量越来越大，功能繁多的同时，页面结构也变得十分复杂，为了确保用户体验过程中，更清楚页面层级，以及操作后的流程，所以我们可以通过动效合理安排交互流程，助力用户的舒适体验。
我之前也专门写过一篇《交互流程中的三大重点》，感兴趣的朋友可以再碰个场，支持下。
利用动效的形式，提升用户在交互流程中的操作预知，例如下图的分类图表，充分的体现内容的含义，进一步强化用户操作前的预知性。
在一些结构复杂的页面中，我们可以通过合理安排交互动效，转场方式、状态反馈等等一系列的设计，有效的对界面层级路径梳理。
其实设计师的发力点不单单只是我们平时看到的产品分析、用户画像、体验地图，其实从设计的角度出发，也有很多价值点，我们作为一名设计师，更应该根据产品现状去制定明确的设计目标，深入挖掘，利用有效的设计价值观，正确的驱动设计前行，最终通过设计去提高产品体验。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945
作者：三石设计 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
大家有没有遇到这样的问题，当你面对非常复杂的信息时，在进行信息整理设计时，往往会陷入比较纠结的场面，不知道怎么把这一堆信息进行比较好的排列。如果你刚好也有这部分疑问，这篇文章适合你继续阅读。
本篇文章会提供一种解决排列问题的简单底层逻辑，我们可以围绕这个逻辑去排布我们的页面，从而让整体排版变得更加清晰合理。
信息层级存在于我们目前看到的每一个画面。它本质上是信息组织的一种方式，通过信息的放大缩小和对应的位置，能够将复杂的信息分为不同的模块呈现在我们的视野中。
大家先简单看一下图中两个画面，你就能够直观感受到信息层级对于用户认知的作用。
不好的信息层级就像左图一样会让画面比较杂乱，难以进行视觉上的识别。而优秀的信息层级就像右图一样能够让我们快速且准确的识别出画面想要传递的信息。
因此信息层级的排列不仅影响视觉上的美观度，更影响人们在检索信息时候的效率。尤其是对于B端复杂场景，我们不仅需要考虑清晰传递业务价值，合理的信息层级划分也是提高产品体验的重要部分，好的信息层级则意味着更好的使用体验。
既然信息层级对于使用体验比较关键，那么怎样做好页面的信息层级则显得尤为重要。而目前网上的资料也是参差不齐，我也曾为此类问题查阅了大量资料，想要找到一个简单高效的答案。
但目前查阅到的资料几乎都在讲排列的四个基本原则：对比、对齐、亲密、重复。不可否认的是这四个方法对于我们排布信息层级确实起到了很大的作用。但也阐述得太过宽泛，让人很难在实际中更有效地利用。
即使我对排版四个原则非常熟悉，在面对复杂层级排版时仍会面对困惑。因此我对目前页面上比较好的页面排版进行了进一步的探索：
经过线上页面与概念的整体研究发现，他们在遵循排版原则的基础上，本质上都存在一个简单的逻辑：那些优秀的页面设计都把主内容的层级控制在了三层左右，如下图所示。
因为三层左右的层级是最容易被用户感知，且视觉上不易混乱。超过三层后随着层级越多复杂性会相对增加。
比如我们看下面这两个例子，左边层级因为特别复杂，造成用户获取信息效率变低，而通过层级的转换，我们可以将其变得更简单且易读。
再举一个例子，我们在大部分场景见到的纯文字排版基本都离不开以下几种形式：
因此，我们需要在排版时需要首先思考一个逻辑：那就是尽量将我们的内容层级控制在三层左右。且这三层内有比较明显的对比关系。
有同学看到这肯定要问了，这个道理我也懂啊，可是在实际业务中大部分时间拿到的信息太多，根本做不到保持在三层以内。别急，这篇文章的重点当然不是告诉你这么简单的道理，而是在面对复杂层级的时候，我们应该怎样去控制它的层级表现，从而让它在最终呈现上保持在三层左右，让用户获取信息的效率更高。
其实我们在实际中的大部分优秀页面，在本身的信息层级上可能都非常复杂，但我们可以通过一系列的方法，去减轻这种多层级的影响，从而让我们的页面即使承载了很多复杂的信息，也能变得更加简单清晰。那我们接下来就阐述一下对复杂层级的处理方案。
这可能是被很多人忽略的一点，就是信息的前置处理。我也曾遇到过某些信息很复杂导致排版很困难，但却忽略了这些信息是否真实地被需要。这就需要我们从源头上进行第一层的判断。
源头降低的本质就是判断我们当前所要呈现的信息是不是必要的。其实这也是在目前工作中遇到的场景，比如某些时候产品给到了我们很多信息，但我们并不一定会全盘接受，而是通过当前页面的业务场景去进行判断。确定每个信息的合理性，从而可以决定有些元素是否可以删减，提高整体信息设计的一致性。
1. 当前的所有信息真的需要存在于页面中吗，如果去掉某些信息有无影响。
比如当你在进行打车的时候，当你输入目的地之前，一切其他的信息都无需呈现。当你输入目的地后，车辆的相关信息和价格才会进行呈现，当你打车后，司机的相关信息才会进行呈现。这些都是按照用户的使用场景来进行对应的呈现。
2.当前信息的重要程度是怎样的，对于某些不重要的信息是否可以通过隐藏的方式展现。
当你拿到一堆信息，信息的重要程度就决定了我们需要将哪些信息作为主体，哪些信息作为次要辅助信息，哪些信息甚至可以收起或者省略。比如当你浏览新闻的时候，标题永远是最关注的，而评论，作者，简介等都是可以忽略的信息。
上述两个问题的确认，会影响我们对后面的信息排布。因此我们需要在源头，比如去和产品或者业务沟通，弄清楚该信息呈现的缘由以及必要性，这样能够帮助我们最后理清楚信息层级。
信息排布的本质是通过我们对信息进行排列上的调整，来将多余的层级融入到三层以内。从而让我们整体的页面显得更加简洁。
通过目前的实践总结，我觉得目前可以有以下五种方法来帮助我们更合理地安排信息层级。
信息分组是大家在设计时都能够想到的形式，分组能够将复杂的信息打散，从而降低页面整体的复杂度。比如我们常用的分组方式有三种方式：间距、分割线、卡片。
那么这三种方式有没有区分呢，VIVO设计团队曾经就这个问题展开过用户调研，但结果表示，如果纯粹从用户的角度来讲，对其变化感知不大。但这三种分割方式会影响我们在呈现信息时的整体视觉观感，因此我们可以根据当前信息的复杂度作出以下规则：
通过这三种场景的区别，我们可以根据信息复杂度更好地选择分割方式，让界面的表达清晰明确。
组件其实是目前大部分设计师在进行信息排布时必备的部分，因此对于这部分设计师的熟练度也是最高的。而本篇想要强调的是，目前这几种组件对于我们信息层级的划分起到了比较重要的作用：树形结构、表格结构、步骤条、选项卡。
▍树形结构
对于有关联性的多层级非常适合，可以将复杂的层级结构进行收拢，从而能够显著降低信息的复杂度。
▍表格结构
对于信息多且关联性不大的复杂信息，可以聚合到表格来进行呈现，但表格的呈现方式不宜滥用，需要根据我们场景来进行选择。
▍步骤条
步骤条则对场景要求非常明确，我们可以将多个场景通过分布的形式进行呈现，从而减少当前页面的复杂度。
▍选项卡
选项卡更适合与同级的数据，对于同类型的结构可以更好地将页面进行拆分，从而让当前页面更简洁。
由于组件这一块大家的认知已经比较全了，在这里就不进行更深入的讲解了。如果有需要的同学可以通过浏览各大厂的组件文档去进行更细致的查阅。
通过改变布局的方式，我们可以将多层结构的样式通过拆分布局来将其控制在三层内。这句话什么意思呢，举个简单的例子：
从上图中你可以看出目前的层级较多，尤其是两层tab的叠加，视觉上就会显得稍微有点凌乱。我们可以通过将第二层tab换个布局，从上下结构变为左右结构，达到从视觉上简化层级的作用：
当然以上只是举了一个简单的例子。这里底层逻辑就是当遇到相对比较复杂逻辑时，我们可以考虑通过改变结构来减少其复杂度，比如上述的两栏结构，甚至三栏结构，从而让整体变得更加简洁。
我们可以利用信息融入的形式来减弱其对层级的影响。信息融入从本质上讲就是将某两种层级信息通过不同的组合方式，让其融入到同一个层级中。比如我们看下面这一个例子，Coding产品设计中将标题与tab利用分割排列在一起，从而变为同一层级，这个时候就不会出现四层的复杂结构，页面还是保持三层结构，通过这种方式有效降低了页面的复杂度。
信息融入这个方法，当我们在进行B端布局时，用得比较多。比如我们最常见的标题、搜索和按钮等都放在同一行上。这样既能够节省视觉空间，还能够降低信息层级的复杂度。
但在进行信息融入的过程中，我们需要注意的是：如果放在同一层级会造成理解上的误解时，这个时候不要采用该方案。比如搜索框的位置，放在哪个层级决定了对应的搜索范围。
信息弱化的原则是，将某些超出层级的部分进行弱化。比如有5个层级，但其巧妙地将功能筛选融入到了当前的结构中，使得即使超过3层我们也不会觉得其特别复杂，我们再看一个例子：
可以看到TAPD将「另存为视图功能」与「缺陷统计」进行了弱化，虽然还是有4种层级，但从视觉感知的层面上不会觉得视觉凌乱。
在很多时候，我们觉得信息混乱的原因，就是页面要素太多太花哨。比如工作中的一个小卡片，也就是利用信息弱化去减少画面的复杂度：
因此我们需要学会对信息分级，不重要的信息就进行弱化，这样整体的表述上会好很多。
通过上述5种方案：信息分组、利用组件拆分、更改布局、信息融入、信息弱化，我们可以将大部分层级过多的复杂信息简化在三层以内，从而让我们最终的页面呈现不会太过复杂，更容易被用户理解。但不可否认仍会有更复杂的页面，即使缩减也仍有过多层级，那么这个时候就一定要记得最开始的从源头去追溯这些所有信息是否必要。
在研究的过程中，也总结了目前在进行信息层级排布过程中比较纠结的一些细节点，也分享给大家。希望对遇到相同问题的同学一些帮助。
大家对「对齐」并不陌生，它存在于我们的每个页面。但在对齐的过程中，我们可能会忽视一个小细节点，那就是沿着字的轴线对齐。比如下图两个例子：
在看见左图时，总觉得哪里会有点奇怪，但又不知如何表述。而右图看着就会相对更舒服。经过对比过后明显发现右边的图整体相比于左侧会更整齐，而这就是说的沿着字的轴线对齐。这主要是由于相似原则引起的：那些明显具有共同特性(如形状、大小、颜色等)的事物会被我们的视觉组合在一起，即相似的部分在感知中会形成若干组。
而左侧因为标题字和底部字没有形成对齐，因此会显得更加凌乱一点。所以沿着字的轴线对齐会让我们在整体的页面呈现中显得更整齐。
这是我平时在做设计呈现时也会纠结的一个问题。当你想用卡片来呈现视觉时，你有没有纠结过到底是用线框卡片还是背景色填充呢。
我就曾陷入这种纠结，但在去搜索查阅时，发现目前其实关于这块相关的资料，因此在大部分情况下都是由设计师自行决定的。但经过线上产品的调研发现，这块内容其实也包含着一定的规则：
1.取决于卡片的数量
对于卡片少的其实可以用色块来呈现，对于卡片多的可以考虑用线框来进行。这其实主要是从一个视觉的维度来进行呈现，举个简单的例子：
通过coding和飞书的卡片对比，你会发现卡片过多时线性设计会让页面显得更整洁和清新，色块设计就会让页面显得更厚重。右侧整体的呈现行会显得更好一些。
2.取决于页面的视觉重心
这里页面视觉重心的含义是当你整个页面都全是线框时，你可以利用色块的卡片来达到突出页面重心的效果，让整体页面没有那么单调，可以看到下图的例子，右侧的页面会相对更稳重一点。
在进行色块时，时常会纠结用灰色底还是彩色底来进行。那么这两者到底有没有界限的区分呢，我们应该何时使用这两种色彩呢。
我们先看一下案例：
可以看出目前这两种颜色的运用更多的是功能上的区分：
1.彩色背景更适用于「想要引起用户注意的界面」，比如一些功能引导或者营销性质的页面。从表现性质上来讲更重。
2.而灰色背景更适用于「利用灰色背景来区分层级关系」或者一些微弱提示的信息。从表现形式上来讲更轻。
所以我们可以根据当前的信息场景来选择合适的色彩，后面再面对时就可以不用那么纠结。
本期的内容到这里就结束了。关于这期的信息层级内容，真正需要深入了解的是控制信息层级背后的方法。很多时候我们看见的优秀页面并不是因为它本身就简单，而是通过我们合理的信息层级控制，让最终呈现上显得不复杂，这其实也是我们在实际工作中需要注意的很重要的一个点。
本文重点内容再回顾，当我们遇见复杂的信息层级时，需要分三步：
1.明确当前所有信息的必要性和重要分级，需要从源头去深入了解；
2.运用五个方法可以有效减低信息层级：信息分组、组件拆分、更改布局、信息融入、信息弱化
3.同时在运用过程中需要注意影响层级的小细节
以上是本文关于信息层级的另一种角度的描绘，虽然没有提及四大基本原则，但在实际运用中也是很重要的。最后，虽然进行了很多资料查询，但在在阐述过程中不可避免会有阐述不到位的地方，欢迎进行反馈。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945
作者：进击的M 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
关于设计思维的文章我们也看过不少，也听过大佬们讲什么是设计思维，可都停滞于带我们了解初识阶段，并没有教到我们怎么去践行设计思维。设计思维 (Design Thinking) 是一种设计方法，提供基于解决方案的方法来解决问题。解决方案是什么？究竟要解决什么问题？如何去解决？在参考了大量的文献后，更多的是在阐述设计思维是什么，具体的分类和步骤，更偏向于介绍和展示相关的知识。比如 Google 的 Design Sprint 方法论，比如 IDEO 首席执行官 Tim Brown 提出的可行性三原则，比如斯坦福大学哈斯普拉特纳设计学院（d.school）提出的五阶段设计思维模型，而根据 d.school 提出的五阶段设计思维模型，大部分公司都基于这个模型进行变量修改后作为自己的设计思维模式，这五阶段设计思维模型为：同理心 (Empathise) - 定义 (Define) - 假设 (Ideate) - 原型 (Prototype) -测试 (Test) ,几乎大部分的设计思维都基于这五阶段模型做的改变。
用同理心代入 (Derivation) 定义，用同理心建立 (Build) 原型，通过原型反推 (Reverse) 原型的成立，最后用测试结果证实 (Validate) 定义的正确性。
现在对设计思维有了大致的认识，这里也不花太多篇幅去描述，但是全部看下来感觉自己脑袋晕乎乎的，那究竟我们在具体的工作学习中，要如何尝试性代入且应用设计思维来做设计呢？通过一些项目的经验我总结出关于如何运用设计思维做设计的方法，就是通过寻找产品之间的共通性和异样性，深挖出关键性的问题所在，最后去解决这个关键性问题。
共通性与共同性
共通性和共同性在意义上有根本的区别，共通性是指相通或者适用于各方面的东西，比如共通的道理，共通的方法；共同性则是指彼此都具有相同的性质，比如大家共同的目标，共同的性格；产品与产品之间也是有共通性和共同性的，只有找准产品的共通性，才能深度挖掘到核心问题的所在，从而通过设计手段解决核心问题。
与同类竞品分析不同的是，竞品分析需要通过大量且快速的对比找到各类产品之间的共同处和差异处，而寻找产品的共通性，则需要对逐个产品进行深度剖析，挖掘共通的点 (Point)，然后把这个点透过三原则：可行性 (Feasibility)，可取性 (Preferability) 和创新性 (Innovativeness)分析来设计产品解决问题。一款产品或者某个功能模块，只有在可行性和可取性中产生交集时，才可以在此之上进行创新设计，可行性可以理解为开发可实现，或者和业务需求没有冲突的模块，可取性是指性质上可以取用。
举一个简单的例子，某个模块希望通过弹窗的形式提升某二级页面的跳转率，那么提炼出业务诉求关键点：
1.提升二级页面的跳转率；
2.通过弹窗的形式展现；
那么可取性就是【弹窗】这个 Piont，而可行性同样为弹窗形式，那么他们共同的交集之处就是弹窗顶部的氛围层和行动点，设计师就可以在这两个交集处做自己的创意发散，比如在弹窗头部氛围做的很强烈吸引用户，或者把行动点设计成带有动效的按钮以此来吸引用户点击等等。产品设计中通过共通性挖掘问题，而承诺和顾客的体验达成共同相通，这是为了赢得用户信任和尊重的需要。
产品的共通性
做产品第一步就是找出同类竞品之间共同之处，把他们共同的地方记录下来并做出统计。比如我需要做一个关于 UGC(用户原创内容)的内容社区，那么我前期得搜集同类竞品，比如 MONO、新草、Lofter等等，找出他们共同的地方。首先来解释为什么要寻找共同的地方，根据模块出现的频率排列出模块的优先级，这是一款产品从零到一必须要经历的阶段，但往往很多产品到这一步就停止了，然后像堆砖砌瓦一样，它有的我 Duang 地加上去，另一个它有的我也要 Duang 地加上去，我全都要！最后导致产品做出来架构不清晰，目标不明确。这就是为什么老有设计师疑惑：为啥总是左改一版右改一版业务方/老板就是不满意，这在战略层就出现了的问题，跳到执行层上改来改去，肯定怎么改都不会有一个满意的结果。这时候就需要将搜集到共同的地方做分析，找出它们各自存在的性质，然后挖掘产品的共通性。
通过各类竞品搜集下来可以看出关于社区模块的内容大致分列为：话题标题占比18%，统计信息占比18%，话题说明占比16%，心智氛围占比8%，内容分级占比4%以及其他内容填充占比36%，具体归类成A.标题&统计、B.话题说明、C.心智氛围、D.分级信息和 E.其他信息，然后排列优先级顺序为：A>B>C>D>E，最后一步就是分析各自独有的性质：
A.标题&统计信息：话题标题和统计信息属于必要模块，标题显示话题主题，统计信息展示话题关注度等信息，增强话题氛围；
B.话题说明：是对话题进行的补充说明，也可增设相关活动等文案；
C.心智氛围：心智氛围的增设用于对话题主题的传达以及突出用户的参与感；
D.分级信息：分级信息对用户的筛选起到至关重要的作用；
E.其他信息：其他信息皆为用户提供UGC或者平台提供PGC。
而这类性质可以统称为社区类模块产品的共通性，提炼出产品的共通性有什么用呢？如果一个社区类产品上线后发现用户参与感热度不是很强，那么就可以从心智氛围模块去分析是否问题出在这里，是否应该加强话题的心智氛围，或者是否可以通过投资邀请专业的人士通过生产 PGC 来带动社区的热度等等，只有先去了解产品之间的共通性，然后找出关键点提炼出关键问题，在战略上提出解决方案，才能从根本上解决产品问题。
就好比一个人捂着肚子冲进诊所，医生首先了解捂着肚子的性质，是阑尾炎？是胃痛？还是其他的疾病，只有先熟悉各类疾病的性质原因后，通过排查筛选找出根本的原因，才能提出是做手术还是药物治疗的解决方案；同理，回到之前的那个问题：为啥总是左改一版右改一版业务方/老板就是不满意，都没查出究竟是什么原因导致肚子痛，就开始开刀手术或者胡乱吃药，运气好了胡乱吃药吃对了解决了，运气不好被折腾凉了，最后的结果就是产品模块下架撤离，所以无论是从零到一的产品还是业务改版，都需要找到产品之间的共通性，才能找出具体的解决方案。
设计细节的共通性
我们不难发现市场上很多出自于同一业务下的产品都有着自己的设计细节，而在这些母舰上都有着各个模块的附属模块，比如在QQ产品里的兴趣部落、NOW直播、微视等模块，比如在淘宝产品里的天猫、聚划算、飞猪等模块，那么在这些母舰下的附属模块，在设计细节上自然而然要和母舰保持一致性。举个很明显的例子：手淘设计语言中卡片的圆角为24px，手猫设计语言中卡片的圆角为10px（基于750px尺寸下），那么手猫其中的模块自然是要遵循手猫的设计语言——圆角的尺寸为10px，但是如果这个模块获取到手淘透出的资源，那么在设计上，就要遵守手淘的设计语言——圆角尺寸为24px。
那么你会问了，这样最多只是相同啊，有什么性质意义呢？这和共通性又有什么关系？不同的产品所面向的用户群体是不一样的，所以主打心智也不一样，设计上的细节传达给用户的心智一样的不同。众所周知，淘宝主要面向的用户群体是大众的，天猫主要面向的用户群体是追求更高质量或者品牌的，那么在细节上，24px的圆角卡片带给用户的心智是友好亲切的，10px的圆角卡片带给用户的心智是偏向更精致更高质感的；其次，如果用户通过手淘的场景进入天猫的模块，一会儿24px的圆角一会儿10px的圆角，长时间下去用户自然会分不清当前场景是天猫还是淘宝，这是在产品一致性上做的共通性协调工作。所以如果是同类系的产品或者是模块，在设计细节上一定要注意，保持模块与模块之间的共通性。（有的人可能不会注意到这些设计细节，设计细节既然是细节，个体本身影响力不是很大，很容易造成忽视，但是如果个体增多形成量级的话，造成的视觉影响是很直观的）
差异性
差异化策略是从改变产品的“绝对差异化”到改变认知的“相对差异化”，越来越着眼于“人”的视角。在如今发展迅猛的网络营销时代，“人”的因素更是被置于产品运营和品牌营销的核心位置，不过，这并非表明“定位”理论变得越来越重要了。这点做品牌的朋友相信有更多的感触，但是无论你是做产品的，还是做品牌的，要想脱颖而出，首要的策略就是“差异化”。大家都知道平台产品的最终目的是实现商业价值，可是如何实现商业价值，就是要通过产品之间的差异化来寻求突破点。
产品的差异性
依旧拿上面那个社区产品当例子，同类对比我们发现，大多数的社区产品更多的是流量引进来营造平台氛围，无论是通过 PGC 的形式还是对内容的打造，但是在商业价值化层面上则很少有渠道介入。那要如何通过设计表达出差异化并且实现商业价值，就需要对实现商业价值有一定的了解。当社区把流量引进时，实现商业价值常见的几种方式有：
1.广告宣传的推广；
2.电商平台的转化；
3.流量引导产品模块的介入等等。
以电商产品举例，我这个社区模块将流量引进后，需要致使用户通过 UGC 或者 PGC 种草的内容去购买所对应的种草商品，知名的社区电商产品的确也是这样做的，比如小红书、Lips等等，但是不难发现此类产品都有一个共同的弊端：用户需要先记住种草商品的内容后，自行去购买采购商品，这样可能就去了淘宝、京东等等更加知名的电商平台，最后为他人做了嫁衣，那么这一块就是关键突破点。
通过寻找差异性找出关键突破点问题所在，并推导出相关的设计策略：平台可以通过招商的形式发布社区话题，并且可以通过“参与话题送 xx 额度的优惠券”、“参与话题并分享给好友获取 xx 限量商品”等形式刺激用户参与话题，并且也给用户很方便的渠道入口直接进行商品购买，防止流量丢失为他人做嫁衣；商家通过入驻平台提供话题，平台流量导入参与话题，商家通过参与话题给予优惠等活动引导用户购物，用户通过平台参与话题了解品牌获取参与感；类似线下商场搞一些活动，品牌店给一些优惠券之类的当作参与活动的奖励，然后客人可以去到品牌店消费，最终实现三方获利的商业闭环！
不难发现，通过寻找产品之间的差异性来挖掘出关键点问题，然后在此基础上解决问题做出创新。追求差异化，是产品基于竞争角度永恒的主题。这种差异化甚至贯穿了产品生命不断迭代的全程，也贯穿在与品牌相关的一切要素中——产品、包装、广告、价格、渠道、视觉、代言人等等，每种要读的动态演变，都是一种创新，具体需要那种要素在哪些时刻做出何种改变，既要考虑到竞争，也要敏锐觉察用户的需求、态度和行为的变化趋向。
设计细节的差异性
设计细节用共通性同样也有差异性，而细节的差异性有时候往往能起到产品的关键性作用。这里使用之前做的一个实际项目做例子：淘抢购模块 v4.0.1的改版。（保密性原则不透露任何数据）因为淘抢购 v3.9样式太过老旧，根据手淘语言更新的淘抢购 v4.0在投放过程中发现，成交量和成交率比 v3.9降低了很多，所以在 v4.0.1的改版中最主要的是解决这个问题。
根据用户采样调研数据分析我们筛查和对比发现，成交量和成交率下降的根本原因是用户在页面丢失，而用户丢失的原因则是因为淘抢购 v3.9首屏的 Sublist 商品坑位的透出比 v4.0首屏的 Sublist 商品坑位多出一个，对的你没看错，就是因为这么一个商品坑位的细节原因，导致 v4.0的成交量和成交率比 v3.9降低了很多，以至于引起重视从而需要解决问题。
找出关键问题后就要去解决问题，那么如何解决问题是关键。此处需要保证在不改变新版设计语言的基础上对首屏 Sublist 的坑位透出做调整，那么只需要坑位透出3.5～4个坑位就能到达预期的效果，如何在有限的空间里解决这个问题，做了很多版本的尝试。
通过各类尝试得出ABCDEF六种方案后，这时候需要从设计细节的差异性逐一分析然后进行取舍：
A.此方案为目前 v4.0实行方案，可以明显看出单屏的效率只能展示3个商品坑位，因此是造成用户在浏览的过程中会流失的根本原因；
B.此方案计与 v3.9通栏无太大差异，所以问题就是：1.版式陈旧老化；2.信息过多整体会导致页面看起来杂乱无章；
C.此方案除了版式陈旧信息过多问题外，图片变小导致用户对信息细节辨识度不高，直接pass，所以通栏的方案在当前场景中完全不可行。
D.此方案基于 v4.0上，缩进了卡片内信息的距离，更加突出“抢购”的紧凑感氛围，同时单屏能显示3.5个商品坑位，解决了屏效的主要问题，同时数据显示比通栏式设计曝光点击率有所提升，也符合淘宝的设计风格规范，但是单卡片样式商品与商品之间分割感太强烈；
E.此方案将所有商品坑位包含在一个大卡片内，解决了商品与商品之间的分割感，商品信息细节也比小卡片展示得更完全，但存在问题就是：每个商品之间的间隔存在的分割线导致间距过大，屏效又回到旧版只能展示3个的问题，不能解决主要问题，所以pass；
F.此方案在大卡片设计上进行了优化，取消了分割线的设计，缩进了商品与商品之间的间距，解决了小卡片式商品与商品之间分割感强烈的问题，图片的大小信息细节也能给用户良好的体验，最主要单屏显示3.5个商品坑位，解决了最主要的问题，也符合最新的淘宝设计规范和风格，此方案为最佳方案。
最后采用了F方案，也就是目前我们线上看到的效果，在灰度上线和 A/B test 后数据反馈，淘抢购 v4.0.1的成交量&成交率相比 v4.0有很明显的上升甚至超出了 v3.9的数据，这是通过寻找设计细节上的差异性来解决问题最好的案例。再次证明：设计思维不应被视为一种具体而不灵活的设计方法，细节的差异性有时候往往能起到产品的关键性作用，所以设计师从设计层面上去解决问题的时候，要不断通过寻找产品之间的差异性，培养自己设计思维中的差异性。
动效差异性的运用
产品设计中，动效作为一种辅助手段，帮助设计师传达具象的意愿，帮助开发理解交互手段，是一种锦上添花的表达；前面的内容更偏向于战略层，而动效则偏向于表现层，同一种想表达的心智不同的样式表达的效果完全不同。如何做好动效在产品中的表现，我们就需要了解不同的动效所带来的性质传达。
举个例子，某个弹窗需要对行动点通过动效的展示进行强化，但是同样是强化行动点，如果产品是需要体现出质感、高端等心智时，那么在动效上的处理上就应该体现出高品质高质感的动效，如果产品主要用户为女性或者年龄偏小的用户，则需要体现出可爱、亲切感的心智。那么在动效的选择上，就需要通过平时对动效的收集积累，然后熟悉不同的动效所表达的性质，才能从中选择最优的方案。比如 Q弹缩放的动效看起来亲切感更强，闪光的按钮看起来质感更加强烈一些。
动效向来是产品的辅助，动效应该是克制的，只有了解动效的性质，通过动效的差异性，完美地契合产品，才能发挥出动效的最大作用。
总结
在如今网络时代和社会化媒体的大潮下，产品设计差异化的力量不仅仅基于竞争，更要基于消费者需求的敏锐察觉和捕捉；设计思维的共通性和差异性，在今天也比以往任何时代都显得重要。识别和竞争的需要决定了产品一定要差异化，而诚信和责任要求产品必须做到共通，差异性是产品价值的基础，而共通性则是产品价值的保障。设计思维不应被视为一种具体而不灵活的设计方法，而是需要设计师们通过自己的经验积累，刻意地培养设计与产品之间差异性和共通性的意识，总结归纳出一套适用自己的设计思维。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945
作者：雨灰 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
1-线上图片的四大类别
2-线上图片常见的五种处理方式
3-线上图片使用的五大要点
4-总结
在页面中单独存在的图片，以图片为主要元素传达给用户有效信息。
例如好好住APP，它在“看图板块”中就使用了信息图片，重点表现图片的信息，周围无任何干扰元素或辅助信息元素。
背景图片可以用于单个元素，也可以用于整体画面，主要作用于营造氛围。
单个元素：例如嘀嗒出行的“优惠券板块”，把插画图片应用在单个卡片中。
整体画面：例如网易云音乐的“听歌页面”，它就把歌曲封面的图片作为页面整体的背景。（图片进行了模糊处理）
作为导航入口，引导用户点击进入详情页面，在各应用都普遍使用。
Banner图作为最常见的图片使用形式之一，大家再熟悉不过了，它可以出现在APP中的各个界面中，如：首页、个人中心、运营活动页等等，造作新家APP的首页就用到了banner图。
作为文字的辅助元素，图片的含义需要和文字相符合才能更好地辅助传达文字的意思，反之会让用户觉得困惑。
图片与文字之间加黑色到透明度（10-60%）的遮罩，保证文字内容区域在黑色区域，目的是为了能让用户看清文字。
根据图片整体的色调，在图片上加与图片色调统一的颜色遮照，保证文字的可识别性，不影响图片的正常显示。 
图片与文字之间加透明度的渐变遮罩，让文字显得更加清晰，使画面过度更加协调。
在很多场景下我们都会采用到封面图模糊处理后作为背景图的方案，为保证信息能够清晰显示会在背景上加一个深色半透明蒙层。半透明层可以取黑色、深灰色、背景颜色（深），透明度为（25%-40%），它们呈现出来的效果都各有不同，我们可以根据不同的场景选择不同的方案。
图片圆角的使用也是十分有讲究，根据不同的产品属性去设定气质相符的圆角设计。
小圆角或直角：视觉印象是硬朗、高冷、具有攻击性的，多用于时尚、高端、冲突感强烈的设计中；
大圆角：视觉映像是有亲和力，柔软，安全的，多用于母婴产品、二次元产品、娱乐性强的设计中。
在设计banner图时我们如果只是在框框里做设计，有时候未免显得太呆板，我们可以突破画框让内容溢出，营造更大的氛围，近而使整个画面更具有冲击力。
图片投影的方式一共分为7大类别，分别为：普通投影、等高线投影、矢量投影、图层模糊投影、多层投影、移轴模糊投影、手动投影。（投影制作步骤可查看我之前发布的文章《七种投影详细解析》）。而在线上运用的最多的就是：普通投影、等高线投影、图片模糊投影，效果如下：
对于位图，我们在线上场景中最常使用的文件格式无非是PNG与JPEG（在特殊情况下会用到动画GIF）。
无损文件格式，我们UI设计师出图的首选，不会轻易造成细节像素模糊或输出文件变色的情况，并且支持alpha通道（透明度）。所以对于高质量图像文件建议输出为PNG格式，不过正因为像素无损，所以PNG文件大小相对较大，在特定情况下可以选择8位处理的做法来减小文件大小，在保证尽可能缩小文件大小的同时，也不会降低图像质量。
JPEG格式会损失掉图片中的一些像素细节，所以输出JPEG通常会比输出PNG的文件大小更小，适用于对于图片质量要求不过高的场景。并且JPEG格式支持对文件质量进行二次压缩，我们可以选择使用JPEG格式质量压缩的方式，在文件大小和图像质量之间找到平衡。
UI界面中常用的图片比例是1:1、3:2、4:3、16:9。
1:1是传统的120胶片画幅，也叫大画幅，因为相机结构和其他一些原因导致了胶片是方形的，此比例更容易将构图规整的简单，能突出主体图片，通常用于头像、电商图片等。
3:2这个尺寸源于135胶卷的比例，采用这一比例并不是因为它是黄金比例，而是由相机的像场大小决定的，这个尺寸运用到线上时适用于以内容为主的应用。
4:3是随着摄影的发展，微单的出现而诞生的，3:2尺寸与4:3尺寸极为相似，在做设计时很容易混淆，不过在同屏显示中，4:3的图片内容显示略大于3:2，所以4:3尺寸更适用于以图片为主或图片与内容比重相同的应用。
16:9是根据人体工程学的研究，发现人的两只眼睛视野范围是一个长宽比例为16:9的长方形，所以电视、显示器行业根据这个的黄金比例尺寸设计产品。这个尺寸的图片在线上运用于视频播放的图片显示。
栅格系统以规则的网络阵列来指导和规范版面布局以及信息分布，而UI设计里常用的栅格系统是从平面栅格系统中发展起来，栅格系统有时候也称为网格系统。
栅格系统在图片的排版布局、尺寸设定方面给了设计者直观的参考，它让图片变得有规律，从而减少了设计决策成本，使整个画面更加具有条理，让内容的可读性变高。
移动端常用的栅格系统最小单位为4px（@1x）或3px（@1x），那么我们来看看airbnb是如何用3px（@1x）的栅格系统来确认banner的尺寸大小（sketch软件-显示-布局，就可以打开栅格系统布局面板）：
如上图，airbnb的栅格系统布局设置总宽为328px（总宽为中间6列+4个间距宽度），偏置为24px（左侧初始偏置像素），列数为6（一共分为6列），列宽45px（列数的宽度），间距宽度为12px（当不能除正数时，会自动把间距缩小1px，所以会看到有些间距为11px，有些间距为12px）
当设定好栅格系统后，我们就可以很好的得出图片的宽度：158px（45+11+45+12+45）。再根据图片比例的尺寸3:2，我们就可以算出图片的高度为：106px（158*3x2），所以图片的像素为：158px X 106px。根据相同的方法，我们可以用栅格系统+尺寸比例得出更多的尺寸大小。（注：不管是3px或4px栅格，都会出现除不整的情况，如上图中的11px，这个不用担心，不影响大局。）
在对banner图进行输出时要考虑倍率的大小，每个产品会根据产品的特性来决策输出的倍率，有些产品用二倍图输出，有些产品用3倍图输出，各有利弊。
标准分辨率的显示器具有1：1的像素密度（即@1x），其中一个像素占位一个点。高分辨率显示器具有更高的像素密度， 2倍或3倍的比例系数（即@2x、@3x）。当1倍的位图放在2倍或3倍的尺寸下时，就会出现图片损伤现象（失真），那么我们到底该用几倍图去制作banner图呢？
优点：导出文件比@3x小，可平衡图片质量和线上文件大小的一个优质方案。
缺点：虽然@2x可向下适配@1x，但适配@3x放大后图片会微微模糊，所以我们如果要用@2x导出图片，那么banner内的文字不能过小或过于密集、粗旷，画面中也不能出现过多的效果，不然会看出明显的模糊痕迹（如下图的顶部文字与按钮文字放大后就有明显的模糊痕迹）
优点：@3x可向下适配@1x与@2x，能够很好的保证不同尺寸下的图片质量，对视觉要求高的项目就必须用3倍图来设计。
缺点：输出的文件相对较大。
图片的适配类型非常多，对于不同的布局适配场景我们选择的适配方案也不同，图片适配一共分为3大类：智能适配、设计师制图适配、用户裁剪适配。
简单来说智能适配是指通过后台代码的约束对上传的图片进行智能匹配，匹配内容包含图片大小、图片尺寸以及图片的展现方式。
图片大小：可以限制上传图片的最大尺寸。
图片尺寸：可以限制图片的长（宽）最小值，也可以限制图片的精准尺寸。
图片展现方式：可以设定图片在容器中的呈现方式，下面是最常见的8个图片呈现方式。
当你无法保证用户发几张图片，无法预估图片的比例时，我们就可以去设定它相应的规则使之适配。
*1、单张布局：
不管用户上传几张图片，Feed流中以一张大图进行展现，使用大图布局的图片适配方式一般有两种，一种是给予图片一个容器大小，让其内容全部展示；另一种是按照图片的上传比例而变化。
*1-1给予容器大小
我们可以给予图片一个容器尺寸（如：300X300px），无论图片有多大都不能超过此容器，为了让图片内容全部展示出来且不变形，我们可以让图片保持正比例缩放，使长边能完全显示出来（左上或中心区域）。这一类的适配更偏向于以内容为主的产品，下面是常用的两种适配方案：
*1-2随图片比例而变化
如果你想保证图片最佳的大图预览效果，那么就可以采用随图片比例而变化的方案，当用户上传不同比例的图片时，图片展示的高度与宽度会根据我们提供比例缩放。采用该适配方式能将图片信息表达完善，图片占用空间大，适合图片质量高，这一类的适配更偏向于以图片为主的应用。
要做这类适配时我们首先要设定裁切的比例，裁剪比例一般设置为常用的图片比例 1:1、4:3、3:2、16:9。我们上传的图片可以根据图片的比例进行自行匹配。当图片越接近正方形则选择1:1，当图片长宽比例越大则选择16:9。
用户上传的很多图片并不是标准比例，如果存在多余像素，那么可以采用保持图片正比缩放，从图片中心区域展示，根据比例一共可以分为7种展现方式：
我们可以看到上图，根据不同比例的尺寸展现出来的页面占比也是不同的，如果产品对页面承载信息量有较高要求，那么可以去除16:9、3:2、4:3的纵向尺寸。
瀑布流的图片适配方法需要规定图片比例，并且每个比例的容器大小是固定的，呈现方式也是保持图片正比缩放，从图片中心区域展示。
*3、宫格：
宫格式布局简单来说就是有规律的方形布局(1:1尺寸)，宫格布局的形式多种多样可以是九宫格、四宫格、三宫格，下面以较为复杂的九宫格的适配为例，当然最好的参考或者最常见的就是微信朋友圈。
对于特殊页面的图片展示，我们为了呈现最好的视觉效果，需要设计师对图片进行单独尺寸的适配设计，并且输出多个尺寸的图片进行上传。
例如在适配开屏页时就对其进行了单独的制图适配，想要让二倍图适配三倍图，最简单的方法就是把画面的上下区域留出更多的空间，中心画面放大10%，可操作按钮放置画面安全区域：
如果设计师不进行制图适配，把适配交给程序处理，那么最终呈现的图片就会显得非常糟糕。如下图1的强行适配，使得整个banner比例非常不协调，让人看了后觉得十分廉价；下图2则稍微好一点，虽然保证了画面的视觉中心，但是整体画面看起来过于饱满，没有任何呼吸感，并且“点击参与”按钮过于靠下，容易与home指示器造成误操作。
当用户想要呈现某些重要信息或识别性信息时，就可以把主动权交给用户，让用户进行自行裁剪，如头像、身份证信息。用户上传图片后，我们可以给用户设定一个默认裁剪区域，当用户不想进行繁琐时可以直接默认系统裁剪，如上传头像，我们可以把默认区域设置为图片的中心区域。
小红书在选择头像时默认裁剪区域是图片的中心区域1:1圆形，并且图片是短边显示，无论什么比例的图片都能全部展示在选区内，当你想要把图片脱离到选区外，系统会自动使图片弹回。未选择状态是选区内图片高清，选区外图片模糊，选择状态则是选区内图片高清，选区外图片黑色不透明遮罩（高透明度）。
微信在选择头像时默认裁剪区域是图片的中心区域1:1正方形，图片一样是短边显示，也不能让图片脱离到选区外，但是能拖动并放大缩小选区框。未选择状态是选区内图片高清，选区外图片有黑色不透明遮罩，选择状态则是图片内容全部高清呈现。
作者：黑狮力 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
通常我们理解图标设计的含义，是将某个概念转换成清晰易读的图形，从而降低用户的理解成本，提升界面的美观度。随着扁平化设计风格的普及，图标的风格越来越简约，看似简单的图形，实际要准确的表达含义，也是需要注意很多细节的，在如今大同小异的图标中，如何让你设计出的图标具有说服力也是一门学问，今天就给大家全面的剖析一下图标的知识，让你做出的图标有理有据。
1、图标的定义及分类
2、图标的设计规范
3、图标的性格走向
4、图标的评判标准
5、总结
图标是具有高度概括性的、用于视觉信息传达的图像。图标常常可以传达出丰富的信息，并且常常和词汇、文本搭配相互搭配使用，两者互相支撑，或隐晦或直白地共同传递出其中所包含的意义、特征、内容和信息。
在数字设计领域，图标作为网页或者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的首页标签。
设计师对自己做出的所有设计都必须要有理论支撑，图标也不例外，一套优秀的图标是设计师不断沉淀的结果。看完本文章后，如果大家想要去练习图标，建议找大厂的图标放在keyline里临摹，真的会让你收获不少。
资料提取：
最后给大家整理了一些资料，包含30个轻质感图标（临摹参考）、Ant Design的sketch插件、IBM的图标、keyline矢量文件（AI与Sketch）。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系
作者：黑狮力 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝 http://www.lanlanwork.com