分析产品，也是难到很多 UI 设计师的问题。很多人认为这属于产品经理的工作，但实际上 UI 设计师也离不开使用产品分析的技能来处理日常的工作，以及提升自己的产出质量。
产品的分析其实远远没有想象中那么玄乎，这篇文章就要教会大家如何通过正确的步骤完成对产品的分析。
以下为正文。
产品分析，顾名思义，就是对某互联网产品，进行系统的、多纬度的分析，并最终完成一份逻辑清晰，符合客观事实的商业报告。
为什么我们需要这个报告？那是因为对于我们工作的决策来说，获取越多有效的参考信息，就越能帮助我们做出正确的选择。
举个例子，如果我准备做一款针对定制奶茶外卖的 APP，那么就要了解这样的 APP 产品通常有哪些模块和功能，通过 APP 下单的流程是什么样的，以及用户更喜欢什么样的设计或者交互。这时候，光靠我自己脑补是没用的，我得分析同行或者相关外卖 APP 产品，才能得到明确的结论，然后作为依据开始设计我自己的产品。
或者，我们在面试或者客户谈判之前，有认真的分析过对方的产品，那么在沟通过程中就可以让我们的处境更有利，能进行更有质量的沟通和探讨。
产品分析的好处很多，不仅能帮助我们解决当前的问题，也可以帮助设计师锻炼自己的逻辑思维能力，产品能力以及业务能力，是升职加薪的必备技能。
接下来，可能很多同学已经忍不住摩拳擦掌，想要知道产品分析应该怎么开始了，但别急，我要先讲讲一个被很多人忽略，以及在众多讲解文章中都没有提及的东西，就是产品分析的 —— 目标。
前面提到，产品分析最后要以商业报告的形式呈现，而一份合格商业报告是要提供 “明确的结论” 的。如果这份报告指向性不清晰，洋洋洒洒写了一百页，像流水帐一样把所有能罗列的分析内容全都一股脑做进去，那对于自己和看的人都是一场灾难。因为这样的报告没有重点，缺乏阅读性。
开始分析前，我们要确定一个明确的目标，即想要通过这份报告获得哪些信息。在获取的内容上，往往不会只想得到一个结果，很可能会是复数形式，所以我们需要列一个表格，将它们罗列出来。
比如我们再用想做奶茶外卖服务的APP为出发点，那么我们分析美团或者饿了么的产品，定了下面这些目标：
可以看出，对于产品、交互层面的分析明显要大于设计的权重，根据 MVP 原则，第一个版本应该要得出的是一个流程可以跑通的产品，在前期过分关注设计和细节并不是首要任务。
所以，在不同的场景、时期、战略上，产品分析的侧重点就不同，而且留给我们的分析时间也不可能足够充足的，所以也要将精力集中在最重要的事情上，提升效率，才可以真正解决问题。
整个产品分析的内容，可以划分成多个纬度和若干的细节，我用下面这个思维导图表示出来。
这样的图表让人望而生畏，如果每一部分我们都认真做分析，那么势必得写出非常多的内容不可，所以才有了前面所说的要规划分析的目标，在实际执行过程中有很多分析项是不需要提及的。
再者，产品分析中还包竞品分析、运营分析、交互分析、视觉分析、文案分析等分支，它们各有侧重和取舍，所以不要为此而感到恐慌。
下面，我们分别对这些内容进行简单的说明。
1.产品的基本信息
分析任何产品的第一步，就是对它有一个大致的认识，首先就是去下载和体验它，并且能用一句话来概括它的功能，然后通过该功能解决了用户什么样的需求。
然后就是它所处的行业目前的状态，是否规模连年上升，有什么重量级新闻或者革新，未来的发展趋势是什么。如果我们不了解的情况下，可以多在百度、知乎、新闻门户上进行搜索和了解
尽可能收集可信的数据报告或者图表，便于信息的整理。
对于一些新上线不太久的应用，通常会带有非常明显的初创团队烙印，可能有一些匪夷所思的交互或者功能，这时候在应用上浪费时间干想是没有用的，可以花点时间在网上找找创始成员的履历，会对我们认识应用有更大的帮助。比如拼多多创始人在上线前有 “拼好货” 的多年积累，产品模式是经过检验的产物，有大量相似的特征。
最后，还可以对产品当前的处境做简单的收集，有没有强大的外部竞争，它们各自在市场中占比的数据，以及用户在不同商店、社交平台中对其的评价。这可以帮助我们对该产品的竞争力和商誉做出初步的认识。
2.用户研究
用户研究这个名词出现得非常频繁，想不看见都难，它是专业产品团队必备的项目准备工作。用户研究的方式和产出物多种多样，通常我们会建立清晰的目标画像找出目标用户，然后对他们进行访谈、调研，设计可用性测试、眼动测试等等，帮助我们更好的推出可以被用户喜爱的产品。
但在我们研究外部产品的时候，往往不需要将它想得太复杂（除非是对直接竞争对手的分析），否则只需要整理该产品的目标用户画像即可。
用户画像即总结核心用户多个纬度的特征，主要分成三个部分。
生理主要就是用户的年龄、性别、身高或体重等特性，外在的则是诸如学历、工作履历、所处城市、薪资状况等可以直接收集的内容，内在的则是性格、爱好、行为（喜好女装之类的……）等等和关联主观特征的内容。
根据我们的需要对这些属性进行筛选，就可以制作几个标准的用户画像卡片出来，比如下方这种。
3.用户体验要素
因为这两年对于产品、体验、设计的专业分析需求高涨，所以 《用户体验要素》 中的五要素就成为大家喜闻乐见的分析模型，它给我们提供了明确的分析步骤和方向，易于上手。
战略层：
战略层指的是产品在宏观、商业层面上的的考虑，需要我们自己的判断，因为如果不是内部人员，那么对于一款产品的战略层思考是无法做到绝对准确的。虽然网上可以搜索到很多商业分析和企业 PR 稿，但是这些内容的使用往往是具有欺骗性的，是基于运营需求抛给大众的障眼法。
比如我之前分析的一篇关于瑞幸咖啡的总结（个人总结）：
https://www.zhihu.com/question/306547560/answer/559771838
所以，报告中没有充足的把握时就不要在这个问题上侃侃而谈，只需要回答，一款什么样的产品才可以满足用户的需求获得商业上的成功。
范围层：
战略层可以获得的信息通常是一个比较宏观、含糊的概念，所以，我们要来制定更具体的方案，明确产品应该包含那些功能和服务，规划产品功能要覆盖的范围。
比如提供奶茶的外卖服务 APP，初期我们的功能包含选择店铺商品、加入购物车、交易结算系统，但不包含资讯推送、晒单社区等功能。
所以，范围层就是将该产品提供的最重要的服务、产品内容罗列出来。
结构层：
这就是一个产品的功能或者信息结构，通常我们可以用思维导图或者树状图的方式进行梳理。最初级的方法是通过对可视页面的层级做梳理，整理出产品的页面层级结构。
而更好的方式，是根据产品的几个核心功能建立产品流程图，将操作的结构与逻辑展示出来，绘制这个图表的过程中可以更好的加深我们对产品的理解。
框架层：
框架层即页面的布局结构，以及组件层面的交互和展示，一般来说，可以研究产品的主要流程页面，每个页面的布局和信息展示是否合理，操作是否顺畅。
如果觉得没法很好的理解，书中建议是通过 “界面设计”、“导航设计”、“信息设计” 三个角度切入，但这样操作性太差。建议在分析这个界面的时候，只要关注内容从上到下的布局内容有没有契合主题，并且重要的组件中，字段权重能不能很好的被表现出来即可。
比如我们看下面飞猪的航班页面，页面模块依次是城市、日期、班次列表、排序筛选。在航班列表中，最被用户关注的价格信息得到凸显（证明买机票的用户对价格更敏感），时间作为次级权重元素相对被弱化但依旧易于识别。
表现层：
这里就是着重分析产品设计本身的特点了，相对就容易了不少，只要分析配色的方案，设计的一致性，捕捉动效和情感化设计的细节即可。
就不展开更多的说明了。
用户体验五要素的分析一样不是散乱的抛出结果而已，如果按原书的方法做分析，肯定也会作出非常复杂的报告，所以我再提炼一次用户体验分析的思路。
通过分析产品的商业目标，进入划分功能和服务的范围，之后根据核心的服务总结主要操作流程，并在最后的交互、布局、设计的几个方向来判断它们是否有益于核心流程，能被用户接受。然后得出结论，如果有益，那么产品符合商业目标的条件，如果没有，则难以达成。
4.盈利模式
有一些产品本身就有购买要素，或者有付费的项目，那么对它作出分析是非常重要的。因为任何商业产品最终的目的都是为了盈利，所以多数产品会在这方面下足功夫。
如果是电商、外卖、快递这类直接发生交易的应用类型，只要分析产品本身的交流流程即可，相对比较直观。
如果是类似社交、资讯、工具类的应用，往往在盈利点上会比较隐晦，并通常包含较多零散的盈利来源，比如不同位置的广告位，订阅服务，付费道具等等。
我们要做的就是把这些盈利来源全部罗列下来，如果知道价格也对应填写上去即可。
5.运营策略
如果不是以工具为导向的产品，通常就有比较重的日常运营。包括用户运营、社区运营、媒体运营、内容运营和活动运营。
有不少产品的迭代是以运营为导向的，我们直接通过产品功能本身去分析它往往得不到理想的结果，所以需要从运营的角度进行切入。
比如每日优鲜这样的生鲜电商，如果仔细研究用过它的服务，就会发现这款产品本身交易的流程乏善可陈，但是出彩的地方是在于层出不穷的运营策略，无论是选品的内容运营或者活动运营上，而这些运营方式才是推动产品的改动和优化的主要因素。
作者：酸梅干超人 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
新手和初学者总会错误的将审美的能力托付给天赋或是科班教育，作为自己审美水平低下的借口。如果这么想，那肯定不会为自己带来任何改善。
今天，我要写一些不一样的东西出来。
按我一贯的风格，我不喜欢在入门问题上高开高走，一开始就讨论比较概念或者艺术性的问题，就讲讲在最初级月薪不过万，连自己工作设计类型相关的作品都没办法评判好坏的情况下，展开讨论。
所以，我要写一篇接地气的提高审美的回答。
关于比较
审美是一个宏大的话题，无论是文学、影视、视觉、时尚等我们都可以审视它们的 “美”。不同领域的 “美” 有不同的形式，不同的立场，不同的角度，不同的原则。
在这里，我们不谈具体某个领域审美的规则和方式，我们来讲讲提升审美的具体做法。
讲一个例子，在国内，我们普遍觉得女生在对穿衣打扮的审美上比男生更优，对于其它经过设计的事物所展现的审美也比男生更好。这种差别在高中时期便逐渐放大，在大学中就能明显得感觉出来这一点。
这是由于基因天赋论导致的吗？
是也不是。女生爱美这点是一个既成的事实，有比较大的先天因素，而因为对美好事物的追求比男生更强烈，所以在审美上整体大于男性。
但大家要注意，这个因果关系的模型太过简陋，我们要进一步来分析为什么对美好事物的追求就能导致审美上的差异，这就是我们提升审美的关键，先从衣品讲起。
原因1：
基于对美的追求，女生往往会花更多的时间在穿衣打扮上，也就意味着要购物。无论是在商场还是淘宝，女生逛起来的热情与时长都远远大于男生，这造成了女生在查看数量上也远远大于男生。
这就和很多设计前辈告诉你要 “多看” 的做法是一样的，通过量变引起质变，只要你看的够多，审美自然就可以提升了。
这话说的颇有道理，但依旧在推理上站不住脚。因为，量变为什么一定就能产生质变？这个变化的逻辑依据是什么？在青铜段位里打了一万盘，也不代表一定能打进最强王者不是。
所以，这就是要引入第二个原因，关于对比。
原因2：
女生逛街能逛这么久，往往在除了看以外，还会做一件事，就是大量的试衣服（此处被我言中的女性同学可以点个赞让我看见你们的双手），经常抱了一整箩筐的衣服进试衣间，在里面对着镜子鼓捣摆 Pose 大半个小时，然后才能挑选一两件自己喜欢的出来，或者干脆一件也不要。
嗯，不要问我是怎么知道的……
在这个过程里，就发生了提升审美中最重要的一环 —— 对比。通过大量的对比，来找出好看的、高级的、适合自己的衣服。也因为对比，女生们就通过实践来了解到，什么样的衣服是好看的，什么样的是丑的不适合自己的。
这个过程实际上收窄了选择的范围，比如一个个子比较高挑五官比较立体的女生，是很难在比较过后还会选择那些可爱、少女、小鸟依人的设计。很可能会偏向运动、男友、中性等风格。
而在有了具体的偏向以后，她们依旧会深入到这个范围，继续观察、尝试、对比，然后再次提升对这些东西的理解和审美。
所以，看吧，审美的提升第一步就是这么简单，通过大量的观察，然后对比和筛选，就能非常直接的提升我们的审美，这个提升的过程完全依靠的是人的主观能动性。
日常生活中我们遇到的绝大多数某些人审美比自己更好的人，都是因为他们在某些方面看过的，比较的比我们更多，而不是依靠天赋的加持，这个思路落实到创作中也一样。
当然，我丝毫不怀疑人类的历史长河里，有极少数人打娘胎里就因为染色体中某些基因片段神秘的律动，而获得了独特的审美与创作天赋，但那始终是一个可以忽略的概率。审美的提升是个人主动的行为，不要祈祷上帝在你身上投的骰子能得到你要的结果。
即使抛开这群有 “天赋” 的神仙，也依旧还有很多第二梯队、第三梯队的老法师们通过奋斗逼的经历功成名就不是。
所以别这么自恋总要搬达芬奇、毕加索、梵高等人举例，每次忍不住想要把锅甩给天赋前，就问问自己钥匙配嘛？
什么？您配？
您配几把……
具体案例
不正经到此为止，正经脸……
既然说了那么多关于比较的问题，空口白话难以令人信服，所谓没图我说个……锤子。因为很多新人都会说，你觉得大多数设计案例看起来都挺好，觉得挑不出什么毛病啊。
所以，下面我挑了几个与设计有关的方向，并找了一些案例出来，你们来看看同类型中，哪一张图是最优的。
而没被选上的那些，对于你选出来的图而言，它们当然都是有 “问题的”。
人像摄影
美食摄影
室内设计
产品设计
海报设计
管理界面
UI APP 界面
小结
审美提升的第一步，就是从对比开始，因为这个世界对所有事物的评判，都有不同方向的两个极端。善恶、美丑、高矮、胖瘦，是对立而相互依存。
就像左拉的《陪衬人》中所讲的：
“……另一个却总是奇丑无比，丑得刺眼，使路人不禁要看她几眼，并且拿她和她的同伴作个比较。要知道，你上了圈套。那个丑女子要是独自走在街上，会吓你一跳；那个相貌平常的，会被你毫不在意地忽略过去。但当她们结伴而行时，一个人的丑就提高了另一个人的美。”
之前我们讲了关于审美提升的第一步对比，但是我们留了一个疑问，为什么依靠对比我们可以提升，或者只靠对比我们就一定可以提升审美嘛？审美提升起来就如此容易？
当然不是！
对比的过程只是表象，我们还要追究深层次的原因，那就是“推理”。
在系统性提升审美的道路上，最大的敌人就是——主观感受。因为无论我怎么解释和审美提升相关的方法，总有人会觉得它就是依靠个人审美，不同人审美不一样，总能找出有的人就喜欢网红脸但看不上汤唯或者高圆圆的案例。
没错，每个人都有自己的审美，无论喜欢什么稀奇古怪的东西都可以，存在即合理。但是，设计师该拥有的审美是不能这么随意的，因为作为专业人士，我们的审美就要符合 “专业” 的要求，即通过客观标准来评价事物的内在价值。
比如茶、酒、咖啡这类饮品，都已经拥有非常成熟的市场，会根据产品的价值形成对应的价格。而有趣的是，这些饮品都不是甜的，都不符合我们本能的喜好。所以，还有很多人不接受它们，只喜欢带有甜味的饮料。这种个人的选择上，任何人都可以偏爱一杯 1 元不到的雀巢的速溶拿铁，厌弃红标瑰夏冰滴，但无论你怎么想，也无法改变它们价值不对等的事实，瑰夏手冲有远远超出速溶的口感和品质。
但超出的部分在哪里？答不答得上来，就是内行和外行的区别。
内行经过专业的训练可以品尝出其中蕴含的风味、口感，解释它们与产地气候的联系，储藏运输的条件，以及冲制过程的步骤。但外行往往只能给出好喝、甘甜、顺滑、难喝、太苦之类零碎、没有体系的评价。
如果设计师对设计相关的作品只能做到和外行一样的水平，那么他也只能是设计师中的外行，并且缺乏成为优秀设计师的必要基础。
所以，接下来我们来探究一下，作品的评价为什么重要！
丹尼尔·卡尼曼的畅销书《思考快与慢》中，将我们的思考方式简单的划分成了两个部分，用了非常简单粗暴的 “系统1”、“系统2” 命名。简单概括它们的含义，就是系统 1 是联想式思维，系统2是规则式思维，也可以看成是直觉与慎思的区别。
先说系统1，直觉是我们大脑对日常接受信息简化处理的产物，我们的大脑就像处理器一样，每天都要面对海量的信息通过视觉、味觉等五感导入，如果它没有任何区别的对这些内容进行深度、缜密的分析，那么它一定会超负荷运转并最终自我毁灭。
所以生物的演化，让我们的大脑进化出了一套可以对信息进行过滤和简化的系统，格式塔心理学中关于视觉对物体简化、完形的理论，也是由其产生，这就是我们对很多事物下意识反应的来源。比如在走路的过程中，看见一辆自行车直挺挺的从远处像你冲过来，那么你会马上感觉到危险并往某个方向规避，整个过程会在不到1秒的时间内完成。
而系统2，就是对事物进行逻辑推导的深入思考，如果用它来处理危险的事件，那么结果可能是我们先判断这辆自行车行驶的轨迹并得出它前进的方向与我站立的位置相交，并且它的时速约为 40km， 在撞到我的时间还有3S，如果以这种速度撞在我们身上，大概率会发生……
“BONG～”
那就不用想可能会发生什么事情，你已经被撞飞了，可以直接得到结果。类似的事情还有很多，无论是对与危险的，还是日常事务的作用，系统1都发挥出了极其重要的作用。也因为它的有效，而导致我们对它依赖过度。所以，很多人在对于美丑的审视上只依靠系统 1 来完成，而不会深入去思考各中原由。
系统 1 对美丑的判断，是个人的，但它并没有 “审” 的过程，专业的分析也就无从谈起。斯洛曼和费恩巴赫所著的 《知识的错觉》 里提到：
"直觉给予我们一个简化的、粗略的，而且通常足够好的分析，这让我们产生错觉，自以为所知甚广。但是当我们慎思时，我们才意识到事物实际上何其复杂，我们真的只是略知皮毛。"
审美和品尝美酒、咖啡一样，需要通过了解专业的知识，培养系统的分析方式进行刻意练习，逐渐摆脱依靠我们直觉做出的不可靠的判断。
因为任何优秀的设计作品，在创作过程中都不可能是随性而为的，都是经过创作者深思熟虑后的产物，我们对优秀作品的评价，就是通过专业的知识对其创作逻辑进行推导，哪里有亮点，哪些是败笔，都是清晰可见的。
它不仅帮助我们判断别人作品的优劣，也可以分析我们自己作品的不足，从而得到改进的思路。所以为什么说审美要先于实践，如果连什么是好的都不了解，自己设计出来的东西都不知道如何评价，又谈何进步？
在我自己的教学经验中，这个问题所表现出来的差异就很有意思。如有一些审美能力较差的学生第一次设计 Banner ，花了非常多精力和时间，自我感觉不错，但是作品质量极差，会在得到否定的评价以后表示诧异和茫然，因为他们已经预感应该得到赞美与肯定。而审美较好的学生则是在完成作业以后充分的发现自己设计的东西和较好的作品之间的差距，那么他希望在我这里获取的，就是如何缩小这种差距的具体方式，而不是对其作品做出评价，因为他们自己也会觉得作品质量差的没评价的必要。
但不幸的是，在商业视觉设计的领域中，提升我们的专业评价的能力，并不如其它行业一般有固定的流程和教学，按笔者自己长期的经验来看，如果我们盲目的从艺术、设计、心理多个学科的基础理论开始学起，那提升的速度太缓慢，需要的周期太长，而且有非常强烈的挫败感，如果没有好老师的引导，还容易钻牛角尖误入歧途。
所以，第一部分的对比，重要性才能体现出来。我们要通过实践作为基础，来系统性的提升我们的专业审美能力，通过应用推理的能力，抑制我们无所不在的直觉。
前面扯了这么一大堆，都是在纸面上的探讨，不太接地气，只分析一通原因，和你该如何提升审美没太多关系，这是最气人的。所以，最后一部分，我们来讲讲具体实施的做法。
先声明，审美提升是要通过刻意练习的步骤的，谁也不可能只通过区区几篇文章就以为自己已经明白了，所以需要执行下面这个循环步骤：
• 采集：大量观察和收集作品
• 对比：留下它们中最好的
• 分析：寻找优劣差异的原因
开始前，还要解释一件事，就是我们提升审美都要先从某个点开始突破，从你最感兴趣的，或是工作关联度最高的设计类型开始，而不是无差别的乱看。与美术学相关的所有设计中，底层的原则都是近似的，精通一种，就能更容易理解其它种类的作品。
1.采集
观察的来源多种多样，强烈建议初期只使用花瓣即可，不要分心到太多的平台上，选择太多往往不是好事，会增加干扰，让我们疲于奔命，模糊一开始的目标。
例如首先要提升在 APP 方面的审美，我们先在花瓣中创建一个 APP 的画板，然后搜索 APP 相关的关键字，但不需要关注第一页弹出的采集结果，直接查看 “画板” 选项。
画板是别的用户自己整理的采集合集，我们可以通过封面简单筛选出你喜欢的，然后打开它们，浏览里面收集的作品。
然后尽量按自己最高的要求来找到能让自己觉得满意的作品，再将它们 “采集” 到自己创建的画板中，并设定一个数量，比如采集到500张为止。
2.对比：
达到目标的数量就停下来，因为再采集下去能带来的作用已经非常有限了。虽然采集中已经包含了选择和对比的过程，但我们要更进一步，在自己的选出来的作品里进行比较。相信在完成这个步骤以后，你们已经可以明显感觉到最后 100 张收集的质量是远远高于前 100 张的。在罗子雄 TEDX 的演讲中就说过：你回头看三个月前收集的作品，会发现它们都是垃圾……
更极端一点，那就是我们只在挑选的作品中留下最好的十分之一，听起来是不是很刺激。
也就是我们要开始在自己选出来的作品中，你要删掉其中的 450 张作品 （最好有留底），即使当中有一些你非常喜欢，而且它们都是你的劳动果实。但就因为这样，你才会更慎重的进行比较。因为多数人的采集只是走马观花，后面根本就不会看这些东西。
当然，这个过程推荐用 Eagle 或者 花瓣 PRO 客户端，操作起来会更顺手一点。
3.分析：
在上一步操作里，我们会动用我们脑海里所有关于理性的分析方法来解释它们的优劣，并得出结论，虽然这些想法可能很幼稚或漏洞百出，但不要担心，最后一步就是用来解决这个问题的。
我们捉对挑选一些作品出来，在剩下的作品中和已经被你否决掉的作品各选一张，然后将它们排列到一起，对比它们的优缺点，比如下图是我从我自己画板中找出的近期和早期的采集作品。
专业的分析是怎么得出的？当然不像朱熹提出的 “格物致知” 一般盯着它们思考，就能把设计的理论给格出来，这条路是走不通的，所以才有王阳明 “知行合一” 的教诲。
我们要把对比的内容进行细化，把一套作品看成若干细节的合集，明确比较的目标，这样才能得到理想的结果，比如：
• 字体
• 配色
• 布局
• 配图
• ……
比如我们挑文字出来分析，这时候局势已经比较明朗了，上侧的设计中文字是能被清晰识别的，在不同的字段类型中字重有对应的调整，主次有序。而下侧的文字应用则缺乏对比，部分文字甚至和背景都无法做出区分，且字重几乎没有变化，使用了多种字体没有整体性，导致最后的阅读感受极差。
同理，你可以再试试分析其它几个细节，是不是简单多了。如果这时候你再觉得手足无措，完全分析不出什么具体的东西怎么办？
学啊！
如对比到配色，我们解释不出为什么右图的配色不行，那就针对配色去了解相关的配色技巧、理论，网上可以搜索的分享就一大堆了，比如关于色彩对比、用色比例等等，将你学到的知识现学现用套进这两张作品中，也就可以很快的得到验证。
后面每出现这样的问题，就现学现卖，不仅可以直接提升我们对作品的理解能力，还能巩固我们学过的理论知识。多分析几组对比，你就会发现对于这类作品的审美和理解已经得到了质的飞跃，这时候，你就可以以留下的这几十张作品作为你接受的下限，去收集新的作品，完成下一次循环。
结尾
对于设计基础审美的提升就解释到这里了，再写下去也没人看了（写不动了）。我们在职业相关的审美提升一定要具有实用性，接地气，目标准确的特点，不要这个阶段跑去听古典，看画展，读诗歌，所以整个回答我都尽量避开这些坑不提。
设计师的专业性首先不是追求审美的极限，而是先提高自己的下限。只有超出自己动手能力的下限，才能让我们拒绝粗制滥造的作品，驱动我们进步。
最后，在同意我前面观点的基础上，大家可以尝试我最后给出的方法，如果你觉得你的审美还提升不上去，那欢迎你们随时找我算账！而只是看完却没有实质行动，那就不要再抱怨自己什么提升上去了。
作者：酸梅干超人 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
在今天的 UI 设计领域，由扁平化设计风格占据主导地位，已经是无可辩驳的事实了。扁平化应用除了提升用户获取信息的效率外，对设计师而言就是设计的难度大大降低了。
一个界面的 UI 视觉元素，仅仅只需要图片素材、矢量图标、几何、文字，UI 设计师的工作仅仅是对内容进行组织和排版，涉及到原创的也仅仅只有少量的图标（大多数人还画不好）。
这种状态持续了很多年，看起来岁月一片静好。
但是，这两年市场发出了一些不同的声音，那就是打破纯扁平风格的 UI 风格、元素开始越来越盛行了。
比如新拟态风格在年初炒了一波热度，各大平台和公众号都铺天盖地的发文和介绍，介绍它的设计理念和设计方法。
还有就是以饿了么、美团为首的国民级应用在主页显眼的位置里使用极具识别性的拟物图标，引起设计圈的热议。
首先讲讲新拟态设计，之所以之前只字不提，是因为我对这个风格实在没什么好感，有种对纯拟物借尸还魂的味道，且它的样式对于信息密度高的应用是完全不适用的，只能活在飞机稿里。
而国内大型应用开始在实际项目中上线拟物图标，意义就不一样了，证明这样的设计是经过几个大厂团队认可，且有共识的。
当然，这并不因为大厂用了就无脑推崇。而是纯扁平的设计已经越来越难满足部分需要强视觉效果的页面设计了。
今天的互联网和过去不一样，用户的增长留存不再是过去一样通过裂变和口碑完成，一个产品只要认真打磨体验、功能就能获得用户的青睐和驻留。用户的精力时间是固定的，而互联网产品又层出不穷，佛系的等待用户临幸是没有出路，这种现状也被称为互联网的下半场。
佛系不行，当舔狗更不行（成本太高），所以今天大型产品都在对待用户的态度都选择更具更具侵略性的霸道总裁人设。不仅是用色饱和度越来越高，运营活动越来越密集，广告和强提示也越来越多。比如刚打开了三个应用，进入的首页大家自己意会……
有点扯远了，回到话题上。在这种掠夺用户注意力的思路指引下，再做所谓的性冷淡、大留白、极简风就不会合适。当对扁平的视觉效果已经开发到极限以后，那么进一步在一些细节处应用拟物就成为必然的选择。
而拟物的应用并不可能铺设到整个应用中去，因为完全拟物化的设计降低信息浏览效率是必然的，所以它只适合做局部的视觉强化，来加强用户对特定区域的感知。
最常见的需要被凸出的要素，就是首页中应用的快速入口图标、分类图标和底部导航栏图标了。这些区域长期受运营活动支配，相信大家已经很习惯了。
只是，这些图标开始在脱离运营活动的状态下，也开始使用非扁平模式，那就不再是运营设计师的工作职责，而是 UI 设计师们绕不过去的槛了（知识盲区）！
且除了 APP 外，其它领域对于拟物设计的需求也会开始逐渐提升，尤其是目前越来越复（fu）杂（kua）的大屏数据展示、车载界面、定制系统等等。
作为新世代的 UI 设计师，多数人对拟物的设计可以说是完全空白的状态，所以是时候要重拾拟物设计这个传统艺能了。
前面我有提到，拟物主要应用在关键的图标上，但应用的拟物风格并不是过去我们追求的那种极其真实、复杂的拟物，而是经过一定简化、抽象后的拟物 —— 轻拟物。我们要先来明确一下轻拟物到底是什么。
首先我们看看，过去优秀的拟物图标和设计案例，它不仅表现元素本身的光影、透视、构造，甚至会非常完整的表现物体表面的材质和肌理。
这种图标单看起来确实很好看、细致。但是，把它丢进我们当前的页面中是非常违和的，因为它们细节实在太多了，而且画起来非常耗时间，不利于项目整体的推进。
所以为了符合画面的质感，又要考虑项目效率，轻拟物这个概念开始被提出和应用，作为一个折中的解决方案。
它和纯拟物设计的共同点在于，也表现光影、结构、透视，但它尽可能精简了轮廓的复杂度、肌理和层级，呈现出更概念化、理想化、易于辨识的拟物图形。
所以，我们主要去学习的内容是轻拟物的设计方法，而不是徒手画照片（这个可以缓缓）！
而轻拟物虽然 “轻”，但它依旧也还具备拟物的基本特征，是有实体质感的。但是扁平从插画到图标设计经过多年的改版，有各种叹（hua）为（li）观（hu）止（shao）的设计，应用大量的渐变、投影、模糊的效果，比如下图案例。
这在我们之前图标的系列干货中有提过，这类设计是面性图标的进阶版，它们依旧属于扁平风格的范畴之内，不能和轻拟物划上等号。
对于这几年才开始学习 UI 设计的新手来讲，拟物已经变成一个很陌生的事物，这对行业来说是比较悲哀的一件事。
因为拟物的设计不仅仅是画图标而已，对它的学习可以全方位的提升设计师的基础素养，不仅包括对传统美术（结构、光影、色彩、透视）知识点的剖析，还包含对 PS 使用的深入探索。
可以说，自从拟物不成为必修题材以后，九成以上的UI设计师是不会用 PS 的，这极大的限制了他们自身的可能性和作品的多样性。
轻拟物本身也是拟物，所以它的核心基础和拟物设计师一致的，只是省略了更多复杂的细节。而对于整个拟物的体系来讲，最重要的东西实际上只有2个，形体、光影。
形体的表现，就是对图形外轮廓的样式的呈现。在过去我们写的图标分享中，有写过面性图标进阶的设计中，可以包含更多的细节、内部元素，而不是仅仅只有外轮廓。
轻拟物的形体设计就要处于进阶面性图标或者更难的水平之上，即你要把这个图形的内容有明确的示意并画出来，而不是用抽象的图形做填充而已。
比如大众点评的快速入口图标，虽然看起来很复杂，但是那是配色上的复杂，而不是形体轮廓上的具象化。
换句话说，拟物插画的图形基底，类似扁平插画风格图标，不能表现得太抽象，也不能增加过多的细节，需要一种恰到好处的平衡（玄学），这就非常考验设计师的判断和经验了。
并且，在描绘轮廓的时候，新手尽可能的采取正视图来进行绘制，而不要通过俯视图、侧视图、斜视图等方法来呈现图形的多个面，这样难度会大幅度上升，比如下面这种情况。
除了形体外，光影就是整个拟物的灵魂了。
当一个完整的图形完成填充色时，它是扁平图案，如果完成光影呈现的时候，它就是三维空间的立体图形，比如下面这个圆的案例：
在拟物的设计中，我们对光影的定义是至关重要的，所以首先就是针对该图形确定光源的方向，是上方、前方、左上还右上，这对后续的设计有一连串的影响。
如果对光影没有正确的解释，那么在制作细节的渐变角度、投影的使用上，就会产生错误的设计，造成光影视觉冲突和矛盾。
在创建了光源以后，物体受到光线的影响就会产生明暗面和投影，可以简单划分成4个部分，高光、亮部、暗部、投影。
这和我们学习的素描有一定的差异，美术中对光影的表现害会包含明暗交界、反光面，这对于轻拟物的来说负担太重，所以我们要去掉它们，接下来重点讲讲高光和暗部。
高光是物体作为受光物对光源的直接反映，比如人像摄影中人眼眸中的高光就是对闪光灯的镜像表现，再或者一拳超人中男主光头上长期存在的高光配饰（多数动画的光头角色都有）……
高光可以非常有效的增加画面的层次和对比性，让物体看上去更有冲击力和观赏性。
而暗部，则完全是为了正常表现物体结构和弧度增加的示意，因为不在受光面，所以颜色会变暗。在实际操作过程中，我们可以通过渐变的方式开控制明暗的表达，但尽量不要直接手动设置一个渐变色出来，而是为它叠加暗部或亮部的黑白透明度渐变。
了解这几个特性以后，下面，我们就通过一个实例来讲解一下轻拟物设计的过程吧。
作为轻拟物的演示，直接画个图标讲一遍怎么操作是没什么用的，我们要从实际场景出发，用它来解决一些真实的问题。比如看看下面的 KFC 官方 APP 首页：
总结它的问题，不难发现首页顶部业务功能太多了，顶部图标就包含30个（加滑动的），虽然每个模块图标单看都没有硬伤，但堆积到一起，就使得顶部缺乏足够的信息层级和对比性。
我们要做的，就是通过轻拟物的方式，调整快速入口最大的三个图标，凸显它们的重要性以及和其它图标的视觉差异性。先从第一个图标开始，讲解一下如何完成轻拟物化设计的升级。
第一步：确认轮廓造型
第一个操作，即确定图标本身的轮廓。根据原有图标的样式我做了一些改动，包括加粗车头，减少高度，增加车灯等。并对每一个模块进行纯色的填充，定义它们的色彩和做出区分。
形体的重要性在于要对图形本身有比较合理的呈现，不要让比例失调和图不达意。
第二步：完善图形细节
这一步，就要在原有基础上，进行下一步的深入。包括对一些细节交代得更清楚一点，增加一些有趣的小元素等等，完善它的具体样式。
第三步：增加基础的暗部表现
在这里，我们就要开始为图标增加高光了，高光从右上角打下来，那么有叠加关系的元素就会产生一个向下的投影。并且反向暗部的表现，让整体的立体感稍强。
这一步在软件中主要使用蒙版功能，通过蒙版在背景上方创建一个图层，然后添加深色的透明度渐变，就可以表现出对暗部和投影的效果。
第四步：增加高光效果
接着，就是最后一步，将高光添加到画面中来，讲整个图标的质感进行拉升，
通过上面的演示，我们可以将整个拟物设计流程精简成：
1.确定图形基本轮廓、外形比例、模块色彩
2.丰富细节样式增加趣味性和适当的拟真感
3.通过蒙版添加暗部来完善表现的明暗和层级关系
4.添加高光元素作为图形的亮点，拉升层次感
然后，通过这样的步骤，再来完成后续的两个图形，拆解完的效果如下。
然后，再用这三个修改后图标套用进原来的页面，并做出对应的修改，再来看看前后对比：
通过这个对比，我们就可以看出在这个复杂的首页头部中，轻拟物风格可以从一众平面中被凸显出来，且不会显得太突兀和复杂。
而这就是轻拟物在项目设计中的实际作用，当画面元素已经开始超负荷，且容易导致同质化的审美疲劳和主次不清时，就是轻拟物登场的时候了。
在如今的界面设计中，投影使用的范围和频次越来越高。无论线上项目或是追波上飞机稿，都可以看见各种各样的投影样式。
投影的使用，是 UI 设计师必须掌握好的视觉设计基础。投影远没有大家想象的那么简单，即使软件中可以设置的参数并不多，很多设计师始终没办法很好的应用投影来提升自己的设计质感。
所以，这篇文章就会详细讲解设计投影的正确姿势。
有了光，才有影。光影是美术和摄影最核心的基础。
如果没有系统学习过相关理论，对投影的认识会有失偏颇，会认为投影只是将一个物体的轮廓（遮挡光源的部分）完整映射在其它平面上而已，一个光源下只有一个影子，比如下图设计出来的情况。
但是，真实世界中的投影，却并没有这么简单，往往虚实即不统一，明暗也不一致。就像下面这个物体的阴影。
在光学原理中，不透明物体遮挡光源，所产生的影子有两个部分，本影和半影。本影是影子中间最暗的部分（还有伪本影的概念，我们暂时将它合并起来理解），而四周开始变浅变淡，有弥散质感的影子称为半影，就像下图所示。
现实世界中可见的投影都会形成这两种影子，因为光源有散射的特征，当光线照射在物体上时势必会产生非垂直角度的光线，于是其中作用最大，重叠最多的一部分形成本影，而其余比较极限的切线部分形成半影，如下图的案例。
通过案例我们也可以发现，当光源、物体、阴影面的距离不同时，产生的本影和半影面积也就不同。反过来讲，我们还可以通过物体本影和半影的面积，来判断它的空间关系，比如下方的两个物体，明显能感受到下侧悬浮的高度大于上侧。
或者，通过阴影来判断光源对于物体的方向和强弱。比如下图案例，就可以明显判断光源位于画面的左侧，所以即使摆入其它物体，阴影也会朝反方向延伸。
除此之外，投影还可以反应很多其它隐藏的三维信息，只要使用得当，它就可以帮助设计师表达呈现各种不同的空间位置。比如可以通过投影判断物体是处于悬空或者是平躺，以及物体的厚度如何。
根据生活的经验，我们已经对投影所产生的暗示习以为常，能根据投影的结果下意识的对界面内容做出判断。所以，设计师在设计过程中如果对投影没有进行很好的思考，就无法设计出符合规律和逻辑的投影，界面就会产生违和感，而作品也因此大幅降低了质感。
在进入了扁平化的设计环境后，投影有很长一段时间被抹除，因为大家认为那是拟物的遗毒，就怕设计里用到拟物元素显得不够时髦。
到了 Material Design 发布以后，谷歌在规范中增加了 Z 轴的概念，也就是为平面预设了立体的空间，设计元素可以定义与空间中水平面的距离，并通过投影来表现。
下图中，Z 轴数字越大，代表和水平面的距离越远，上升得越多。而带给我们这种感受的原因，就是投影的暗示，元素本身的 XY 坐标并没有任何改变。
即然增加了投影，那么谷歌的专业设计团队，肯定不会很随意的制定其参数。当我们打开谷歌的官方 UI kits 源文件进行查看时，就能发现其中的奥妙。它们为元素创建了两层投影，即本影和半影，有时也称为 top shadow 和 bottom shadow。
并且，还有一个在第一部分没有提及的要点，投影的深浅与元素的距离是非线性的，即中心到边缘衰减的速度是越来越大的，用坐标轴标示就是非线性的函数关系，而大多数软件中的投影只能以线性的模式呈现。
在 UI 设计师接触的平面类软件中，只有 PS 具备完美复现这种投影的能力，即控制投影的等高线。
上面出现的投影都是黑白灰，但在现在流行的设计作品中，最常见的是应用了彩色的投影，摄影中也经常会应用彩色的投影渲染氛围。
但是，投影中的这些彩色区域，并不完全都是投影，还包含了折射和漫反射等混杂的色光。为了简化（完整的阐述可以写一本书了），我们可以认为是光线穿透物体从而投射出带有物体本身颜色的投影。就像撑起一把绿色的阳伞，伞下的人头顶也会弥漫着草原的芬芳……
在开始展示具体的设计案例前，我们要先明确一个原则，即：优雅的投影是让你感受到它的存在，但不会吸引你去关注它！
一般的设计软件中，元素的阴影即是在元素的背后添加了一个相同轮廓的纯色矢量图形，我们可以通过 XY 轴移动它的位置，并使用模糊的参数来设置它的弥散度。
当元素距离水平面越近，阴影距离元素也就越近，即投影的 XY 值越小，模糊也越小，如果离得远则相反。
3.1 常规投影类型
第一种投影的类型，即假定元素平躺，光源正对着元素的平面，可以参考谷歌提供的投影方案叠加两层投影。第一层是 XY 轴坐标为0，只添加模糊的参数，透明度较低。第二层阴影使用相同的模糊参数，增加 Y 轴坐标，透明度较高。
在非 MD 设计中，它浓郁的投影参数会让整个界面变“脏”，变拥挤。我们要做的是要降低投影的透明度，这样才能让投影的表现更自然舒适。要牢记的是，当使用纯黑色做阴影时，透明度无论如何都不应该高于 20%，正常区间在 5%-15%。
既然知道阴影属性的规律，我们还可以复制这个矢量图层做高斯模糊也可以得到一样的效果，这种方法可以支持我们设计出更真实的投影。即将 Bottom Shadow 独立出来，缩小并向下移动。
如果想要得到彩色的投影，那么只要切换投影的色彩即可。值得注意的是，不同色彩的刺激程度不同，我们要凭感觉去调整它们的透明度。
如果感觉不得劲，阴影太少了，那么我们就让元素的 Z 轴上升。
既然前面提到彩色投影是由于光线穿透了元素，那么当使用了渐变色或者是图片的投影，我们在之前提到的复制出的那层充当 Bottom shadow 的矢量图形，就可以不使用填充色，而是直接用渐变或者是原图进行模糊和透明度调整。
3.2 非常规投影类型
光既然可以垂直于被照射平面，那么发挥想象力，我们还可以更改光与面的位置，让光线与平面之间的夹角变小，如下图所示。
在这个场景中，投影就作用在图片下方的地面，只有地面处于透视状态时，才能可以看见它的投影，所以，我们就可以得到下方的效果。
当然，我们还可以结合光源的类型，比如使用聚光灯等，那么阴影的轮廓就会发生变化。
我们甚至可以假设元素本身产生了一定的变形，如边缘翘起，那么就会出现独特的阴影形状。
我们可以从日常生活中的观察将各种不同的投影形式引用进我们的设计中，让我们设计中的视觉形式更丰富有趣。
学会正确的投影设计方式，并不是仅仅让我们局限在 UI 元素的设计上。它还能给我们带来很多意想不到的帮助，比如做设计作品的包装。
通过前面讲解的知识点，上方展示案例中应用的阴影方式相信你们已经可以看出端倪了，如果使用基础的阴影设置去创建展示的阴影，就会发现效果远远不如案例的高级，自然也难以带给别人良好的视觉体验。
最后，在项目中，想要将设计出来的阴影交付给开发，真正落地实现出来，无论安卓或是 iOS ，阴影的渲染和设计软件的参数是不一致的，这就需要大家自己钻研究了。
作者：酸梅干超人 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
从平面到屏幕，CMYK 到 RGB，墨点到像素，色彩越来越丰富，形式越来越复杂。而 UI 的发展从拟物的繁琐细节中挣脱出来，却在色彩的展现中放飞了自我。
零售业有个有趣的研究成果 —— “七秒钟定律”：人们在挑选商品和服务时 ，只需要 7 秒钟就可以确定是否感兴趣，而在这短暂的 7 秒钟内，色彩的作用占到了 67%。
要在小小的手机屏幕中加入这么多颜色，并保持其中的联系和逻辑，着实不易。如果你还对配色一无所知，完全不知道配色应该怎么入手，那么你需要了解一下，我几年经验总结的配色思路。
无论我们用 PS、AI，还是 Sketch、XD、Figma，和色彩打交道最多的地方就是拾色器窗口，我们来看看这些案例：
虽然是不同的应用，但是这个拾色器的用法大同小异，但是，很多新人并没有搞懂拾色器的正确应用逻辑。
很多人知道，UI 的色彩使用 RGB 模式，但是拾色器主要的选色原理遵循的是 HSB 模式的逻辑，也就是色相（H）、饱和度（S）、明度（B）。
HSB 是色彩科学中对所有颜色属性的理论划分，是种概念上的定义，可以用来解释任何色彩，也就是说可以和 RGB 和 CMYK 相互转化，且 HSB 的选色逻辑更清晰、简洁、干练。
因为一个正确的选色过程，是先确定出色相，然后再在这个色相维度下选出明度和饱和度，所以我们首先要关注色相选择条。
细心的同学应该已经发现了，它们的首尾都是红色，那是因为色相的序列是一个首尾相接的环形模式，所以它实际上就是色环的柱状展示图，应用起来和色环没有实际区别。
接下来就要说到重点，饱和度和明度选择区，我自己使用的习惯，是将这个选择区通过黄金三分法的方式切割成等比的 9 个区域，然后明确它们在 UI 中的对应情绪和应用场景。
在过去的大量分析中，互联网产品的主色和重要辅助色都会往右上角聚集，一些次要、不可点的色彩聚集在中上方，而文字背景色则聚集在左侧，无人区则是我们重点避开的对象。
下面我们分析几个案例，看看它们在这个选择区中的色彩分布情况：
大家也可以自己拿一些主流的应用做截图，然后把它们的 UI 元素色彩排列到拾色面板中，就会得到基本一致的结果。牢记这 9 个区域的场景划分，可以帮助我们非常高效、安全地完成 UI 配色。
在众多的 UI 设计规范中，色彩部分的介绍，都必然包含三种类型，分别是：
主色：应用的核心色彩，品牌色
辅色：丰富页面视觉和传达效果的次要颜色
中性：没有色相的文字、背景用色
主色是一个应用的最核心的色彩，品牌的象征色，比如想到饿了么的蓝色、微信的绿色、京东的红色、淘宝的橙色。
确定主色，并没有大家想象的那么复杂，它的要点在于 —— 你想让用户感受到哪种情绪，然后通过情绪关联一个大致的色彩范围，再进行微调。
在今天的互联网产品中，主色的应用选择范围在拾色器区域的右上角，前面已经有解释了。这和平面设计中的用色有非常大的不同。
移动端产品要在一个方寸大的空间中争夺用户的注意力，引起用户的兴趣，那么低饱和清淡的色调是无法实现这个目标的，所以今天主色饱和度越来越极致，比如我们之前整理的，发在站酷的一篇总结：
再加上屏幕的 RGB 显示特性，高对比度，高动态范围的特质能给用户提供更好的观感。所以选择主色最安全的做法，就是在确定色相类型后，在右上方区域选出合适的色值。
辅助色是丰富应用中的次要色彩，它会包含一到若干个和主色不同的色彩，除了品牌传达外，具有更强的实用性。
前面我们提到过色环，这里就要派上用场了。我们知道色环是个色彩序列首尾相连的环形模型，它蕴含一个最朴素的原则，即两个颜色在这个环形中角度越大，那么视觉差异性越大，对比越强，比如下图的展示：
这些配色的模式是不能闭着眼随便挑的，它们仅仅作为一个色彩对比度的判断标准。而真正辅助色的选择，是根据实际场景的功能决定的。
比如通知、提醒、取消用大红色，确认、同意用绿色或者蓝色，收藏、打分、评价用橙黄色。都是已经在用户心智中建立了标准的用色类型，跟着常规方法来做，是没有其它思路的情况下最简单、最安全的辅助色选择方式。
没有标准元素用色的情况下，再考虑应用色环的 “角度原则”，越需要被突出的颜色，可以在色环中离主色越远，越不需要被突出的则越近。
比如下方携程的案例，主色在蓝色的情况下，支付、保险金标签这些需要被重点突出的色彩，使用了主色的互补色， 让我们一眼就能看见并产生强烈的操作欲望。
中性色，是页面中文字、背景用到的颜色，它们承担起最基本的层次表现、便于阅读的重任。多数新手觉得中性色无关紧要，实际情况恰恰相反。
主色辅助色决定了界面视觉是否出彩，而中性色的应用直接决定了页面能不能正常使用。如果看过比较多的原型案例，就应该明白，即使只有黑白灰的状态下，我们理解这些页面和进行使用也不会有丝毫的障碍。
中性色的配置，就是制定一个由深到浅的灰度阶梯，应用在对应权重的元素上，色彩轻重的主要判断依据是 HSB 中的 B（明度） 值。
中性色虽然指的是无个性，但并不是只能用纯灰色，常见的一种做法，就是为中性色添加适量的蓝色饱和度，提升观看体验（满足 RGB 的某种特性）。
这种做法，颜色越浅的时候饱和度应用色值就越低，将这个规律在拾色器中进行表现，那么我们就可以得到一个 L 型曲线，我称它为 “中性曲线”。
掌握对于主色、辅助色、中性色的选择方法，那么对于 UI 配色的奥义来说，你已经掌握了一半，接下来就要了解更具体的实践思路了。
配色并不是只有色彩的色值本身，大家一直在研究各种色彩心理学和理论，却很少关心它们应用如何应用，如何配置。
所以，我根据主色和辅助色应用总结了一个配色的四象限表格，在分别看看它们对应的案例：
主色会作为顶部标题栏或其它重要模块中的背景色，进行大面积应用，加深用户对品牌的认知和辨识度。而产品中又包含了大量功能和服务，需要用丰富的色彩来进行暗示，吸引用户关注。
这类配色中，主色的应用占比也大，出现频率高，鲜有其它颜色出现。比较适用于图片内容丰富的题材中，或者是相对正式、品牌感强的应用。
这是多数主流应用的趋势，降低主色占比，留出更多的空间给内容模块的展示上，突出自身带有的服务和功能。
通常，会应用这种方式是因为产品的服务是相对单一，但也需要用户投入注意力的应用，设计师就会尽力避免给予用户过多的干扰。
每次在进行配色的时候，我们都需要对自己要应用哪种配色应用方式做出规划，然后再动手执行。有了这个目标，后面在整个项目的设计中的配色步骤就是水到渠成的事情了。
在实践前，我们要简单讲讲一个应用或者界面的标准配色的流程了，流程顺序如下：
具体应该怎么使用这套流程，我们用一个图虫 APP 改版的案例来做演示，首先从四象限中的第一个主色占比高、色彩丰富度高的类型做起。
原型是 UI 设计的基本艺能了，在开始具体设计、配色前，搭建页面的框架原型是一个必备的条件，下面，是我们已经准备好的原型案例。
然后，我们确定以橙色作为应用主色，并在拾色器中进行确认。
有了主色，就可以对页面进行色彩填充和图片填充了。既然我们主色是占比大的，那么首先可以用到的就是顶部标题栏的背景色了，以及底部 Tabbar 中的选中色，大按钮色等。
接着，我们开始整理中性色的使用，选择新的颜色来填充文字和背景，清晰的表现模块层级，文字信息的权重。
最后，就是添加辅助色和其它色彩的元素了，这个步骤建议都是放在最后一步操作。因为色彩越丰富，越难控制，容易让整个画面显得杂乱无序，所以先完成基础搭建，可以更好的帮助我们判断彩色的使用是否合理。
下面，我们使用彩色的金刚区图标，然后将用户关注、认证用户、标签等元素使用其它色彩，来丰富页面的色彩内容。
根据第一个方案，我们可以再用这个原型来实现其余的三个方案的配色。
比如下面的主色占比大，但是色彩丰富度低的。因为已经不太应用其它辅助色，所以主色填充上我们不再填充顶部导航栏的背景，而是将更多元素应用主色，减少辅助色数量。
然后是主色占比小，色彩丰富度高的方案，进一步降低主色应用的比例，然后在金刚区、标签等处使用较为丰富的配色。
最后，就是主色占比小，色彩丰富性也低的方案，那么使用中性色的元素就开始增多，只保留最核心的一些元素使用主色，和极少的辅助色。
根据四种不同的配色方案，我们就可以得到四种不同的配色结果和风格，在每次设计开始实施前，我们都可以根据这种做法来做尝试，并选出自己满意的方案。
要再次强调，UI 配色是极其强调形式的应用科学，最后做的往往会和一开始想的效果有极大出入，所以需要我们有几个备选方案，可以随时进行调整，并选出合理的那个。
作者：酸梅干超人 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
头像，作为我们在虚拟世界展现给别人的形象，无疑拥有强烈的社交属性，还记得当年刚刚拥有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咨询、用户体验公司、软件界面设计公司
蓝蓝设计的小编 http://www.lanlanwork.com