设计师不仅仅只是个画图仔，而更应该懂得用户心理学，明白用户行为背后的动机。利用这几个用户心理学，我们将可以促使用户更快的做出决策。
一、损失规避
人们获得损失时产生的痛苦远大于获得收益时所带来的快乐！心理学家把这种对损失更加敏感的底层心里状态叫做损失规避。
其实简单来说就是，相比于得到，你更在意失去。
举个例子：你今天在上班的路上捡到100元钱，心里很高兴。可是一不小心把钱弄丢了，那么你就会很沮丧了，甚至一天的心情都会很不好，虽然说这钱本来就不属于你的。
我们可以用损失规避系数来描述人们对不同东西损失规避的程度。对于一般的消费品，损失规避系数大概是2，也就是说，人们需要得到2倍于原先的价格才肯放弃已经拥有的商品。
损失规避系数因不同的事物而不同，如果涉及到情感等方面的因素，损失规避系数就会大大上升，一旦涉及到健康和生命等问题，损失规避系数就成百上千地增长了。这就解释了在商场买衣服你会跟销售员讨价还价，但在医院你绝对不敢跟医生讨价还价。
我们习惯于自然地规避风险，因而更加辛苦地工作只为避免一些微不足道的损失，而不愿冒险去争取更大的回报。规避损失是人的本性。这也解释了为什么大多数人只能上班，而创业者始终只是极少数。
那么，有哪些利用了损失规避心理的案例？
a.强调“失去”，而非“得到”
因为人的心理对损失更在意，因此要告诉用户如果不买，会受到什么样的损失。
对比以下两个文案：
达芬奇画作世界巡展，邀请来感受世界传世名画的魅力。
达芬奇画作世界巡展，如果不来，你将失去一生中唯一一次和世界传世名画邂逅的机会。
你觉得哪种方式更吸引你？
b.天猫双11红包
每年的双11活动，天猫都会提前给你发一堆的红包，虽然数额不大。但规定只能在双11当天使用。这时你就会心甘情愿的在当天剁手，因为如果你不买，就会白白浪费掉这些红包。而人的心理对损失是很抗拒的。
c.以旧换新
京东家电类目有个以旧换新的服务，以前我一直搞不明白这样做的目的何在？现在才知道，原来这也是利用了人的损失规避心理。
消费者想买新电器，但是家里已经有一个，直接丢掉会感觉浪费。那商家搞以旧换新，用旧家电抵扣一部分钱，这比直接给打折优惠，对消费者来说更有诱惑力。因为你收购了客户的二手电器，让他感觉自己的旧家电没有白白浪费了。
二、锚定效应
所谓“锚定效应”是指人们在做决定或下判断前，容易受到之前的信息影响，该信息犹如一个沉重的锚，沉到了海底，让你的思维以该信息为基准，在它的一定范围内做判断。
简单来说，就是当你在作决策之前，需要一个参考，货比多家。比如：你去菜市场买菜，你第一次买这个菜，你根本就不知道这个价格是否合理，这时候你不好决定是否买，你就会去多问几家。从而内心会形成对这个菜的价格锚定。
生活中锚定效应无处不在：
在线下超市我们会经常看到商品建议零售价100元，而实际售价78元。各大电商平台也采用了这种价格的对比效果，加快用户的决策。
在线下的服装店商家非常喜欢开一个天价然后等你还价，开价150元，到最后居然能还到50元，这水分……
你去婚纱摄影店咨询，开始销售员会给一个比较高的价格，然后后面会自主动给你减掉一千，这样很容易让消费都产生购买的冲动。
你去电脑城买电脑，当你买完电脑后，这时销售员给你推荐电脑保护套，你很容易会购买，因为你会想这么贵的电脑都买了， 这几十块钱的保护套自然就不在话下了。但如果直接叫你买保护套的话，你就没那么容易产生购买行为。
还有奶茶店价格菜单也是经过设计的，通常会采用降序排列，这种排列方式更有利于顾客购买。因为用户看到的第一个贵的价格会形成锚，往下价格越便宜，消费者更容易决策。
三、羊群效应
在一群羊前面横放一根木棍，第一只羊跳了过去，第二只、第三只也会跟着跳过去，这时候，如果把那根木棍撤走，尽管拦路的棍子已经不在了，后面的羊，走到这里，仍然会像前面的羊一样，向上跳一下。这样的群体盲目跟从就是所谓的“羊群效应”，也称为“从众心理”
这些动物的行为看起来愚蠢搞笑，可是看看我们自己，又何尝不是如此呢？从众是一种普遍的社会心理和行为现象，在很多情况下，人们都会表现出人云亦云的特征。
“羊群效应”是由个人理性行为导致的集体的非理性行为。由于信息的不对称，人们并不能得到做出判断所需的全部信息，那么在无法作出准确的判断时，其他人的选择自然就是最合理的参照。这并非全无道理的，因为很多情况下，多数人的做法往往都是正确的，参考他们的做法可以最大限度的降低个人的决策风险。这也是群体盲目背后的根本原因。
但是，凡事有利就有弊。跟随大众的做法，有时候很容易被误导。比如谣言的传播就是个最大的反例。
我想以下场景你一定不会陌生，在一个广场上，有商家正在进行着某种商品的促销活动，人们随着广播的声音慢慢凑了过去，到后来简直到了里三层外三层的地步。但就在这个时候，经过的人反而有了更大的兴致，越是后来的人越是想挤到人群中去，甚至他并不知道里面究竟是在进行什么活动。这是典型的“羊群效应”。
经常网购用户都明白，我们很容易受到商品销量的影响，我们的潜意识里会认为销量越好，商品质量越好，因此会倾向于选择销量高的商品。
羊群效应还表现在对权威的顺从，人们决策时所盲从的对象由大多数平常人变成了某一个具有一定权威性的人。
人们在做出某种选择都是在追求安全感，降低风险，而跟随权威人士给出的意见和建议，会让人们安全感倍增。权威之所以称为权威，就是因为在某个领域他们是最专业的。因此人们更愿意相信权威人士的意见，甚至愿意改变自己的选择去迎合权威的意见。
在设计工作中，尝试借用权威的号召力，达到对用户消费决策的影响。经常逛淘宝的人就知道，很多商家在商品详情页为了证明产品质量合格，经常会提供某权威机构的检测认证，或借助某个明星的推荐。因而会对其观点或者意见表现得非常顺从。
四、稀缺效应
在消费心理学的研究中，研究者把人们由于商品稀缺而引起的购买行为现象，称之为“稀缺效应”。
“稀缺效应”在我们的日常生活中太常见了，比如在线下逛商场时，经常可以看到商家喜欢用“一次性大甩卖”、“限量100件”等广告语来引诱顾客，以吸引顾客进店购买。这些广告语会给顾客造成这各种假象：如果现在不买下次再也没有这样难得的机会了。
俗话说，物以稀为贵，人们对于稀缺物品会表现出强烈的占有欲望，这在人们的心理需求层次中，属于较高的层次。越是不容易得到的东西，人们越倾向于得到，以此实现在精神层面上的价值满足。
在这种心理因素的驱使下，人们对于供不应求的东西，总是会给予特别的关注，同时也愿意支付更高的代价。某种商品一旦限量供应，那么其本身也就具备了稀缺的属性。
限量供应的销售原则，也吊足了顾客的胃口，很多顾客完全落入稀缺效应的心理战术之中，即便当天买不到，第二天也必定会早早前来购买。
比如天猫惯用的抢红包伎俩，吸引了一波又一波的少女们去疯狂的抢，它会设定在某一个时间点，限量提供一些红包，如果没有抢到。那么用户第二天还会来抢的，这就提高了用户的粘性。
五、紧迫感
为了加快用户下单的决策时间，我们需要给给用户造成一种紧迫感的氛围，告诉客户剩余的时间不多了。如果不立即行动，将错过这次优惠活动。他们常使用一个很显眼的倒计时，时时刻刻在提醒用户所剩的时间已经不多了，再不剁手就没机会了！天猫双11活动就是利用了这样的用户心理成功让广大女同胞们不知不觉中剁手了。
稀缺性与紧迫感可以结合着使用，你要明明白白的告诉用户，如果错过了就会损失什么。如果立即行动，可以获得什么好处。两者之间强烈地对比可以吸引用户立即购买。
比如“今天下单可以立减500元！” “错过今天，你要多付出500元，而且没有赠品”等等。
如果没有制造稀缺性和紧迫感，用户就会拖延，犹豫甚至放弃购买。客户会认为再过一天来买也是可以的。这时你需要斩钉截铁地告诉用户，产品、赠品、特价是有限的。
比如：“产品仅限10件啦，再不买就错过了！”，“赠品只有30件，刚才张三又抢走了一件，马上就抢光了！”，“特价产品只剩25件啦，卖完这25件就恢复原价。”通过人为的制造稀缺性与客户哄抢的气势，促使客户做出立即购买的决定，从而提升转化率。
文章来源：站酷 作者：CdzhcHappy
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
用户喜欢在网上收藏各种东西，把收藏到的东西占为己有，满足自我的占有欲，每个用户都为此而乐此不疲。
很多互联网产品在用户点击收藏后，让用户去选择收藏夹。其实用户并不喜欢去选择，他们只想简单的把自己喜欢的东西收藏下来。
选择本身并不是一件很容易的事情，尤其是对于那些有选择困难症的人来说。实际上，我每次都是选默认那个。
这并不是一个好的用户体验。
当然也有一些做的很好的体验，比如微信的收藏，收藏后会出现一个“收藏成功”的非模态反馈。
同时可以添加标签，但这个并非强制，为了满足那些有这种需求的用户。添加标签的目的是为了方便用户在日后的检索。
在收藏列表，微信会根据收藏的内容自动分成链接、文件、图片和视频等，最近使用位于第一位。
也就是说并不需要用户去创建自定义分类。
你也可以搜索标签来找到之前收藏的内容。通过这些方式基本上满足了大部分用户的需求。
网站会根据你采集的图片在极短的时间内，自动识别出图片对应的收藏夹类型。可以直接采集到对应的文件夹。
然而经过测试，经常会出现误差。因为图片的分类其实很复杂的，属于高度自定义，很显然，智能识别并不是一个好的解决方案。
花瓣是一个设计师收集灵感的网站，该网站常见的用户使用场景是，设计师在浏览素材时，会大量采集自己感兴趣的素材，但每次都要选择文件夹，非常繁琐且低效。
后来花瓣网加入了快速采集的功能，其逻辑是网站会默认选择上一次采集的收藏夹，这大大提高了用户采集图片的效率。
而如果你需要选择其他文件夹则可点击普通采集。这两种采集方式满足了设计师的不同需求。
社区类产品有各种点赞，收藏等互动信息，但用户又不想被别人知道这些信息。
因此，在规划产品时需要考虑到用户互动隐私的保护，这是用户侧的刚性需求。
抖音个人主页的点赞列表，我记得刚开始是公开的，且不能设置为私密。
用户点赞的视频会出现在这里，却少有人希望这些信息被别人看到，总有些点赞视频你并不想被别人看到。
如果点赞列表可见，那么用户在点赞的时候就会有所顾虑，这不利于平台的互动率。
特别是随着抖音上熟人也越来越多，强关系社交场景在渐渐加强。
抖音后来也发现了这个问题，把它设计成了默认隐藏。（当然可以自己设置为公开，但只有极少数用户会这样做。）
由于点赞是私密的，用户可以随心所欲的点赞自己喜欢的视频，毫无社交压力。
这是为何？
源于人性心理学：窥私欲。人人都喜欢窥视别人的隐私，而不喜欢自己的隐私被窥视。
不然为何如今的QQ空间基本上都设置了权限，毕竟，谁想被别人窥视当年那个煞笔的自己呢？
现在订阅号打开率越来越低，朋友圈分享曾是订阅号流量来源的一大入口。
朋友圈早已沦为了一个人设打造的阵地，现在的人发圈越来越谨慎。
用户似乎越来越不愿意在朋友圈分享文章了，除非是有利于自己人设打造的内容。
为了减轻用户的这种社交压力，微信推出了“在看”的功能。
用户点了“在看”后，此文章会出现在看一看这个模块，且七天前的分享将不可见，这就相当于一个弱化版的分享功能。
这将大大减轻用户分享的社交压力。对于公众号主来说，相当于增加了一个流量入口，激发他们创作更多的内容。
视频号点赞也是同理，会被朋友看到，导致用户在点赞的时候就会有所顾虑。
他会考虑，我点赞了这个视频，我老师、上司、父母、亲戚、朋友会不会看到？他们会怎么想？
但他在抖音上点赞是没有这么多顾虑的，单纯的喜欢就行。
第一，抖音是弱关系平台；
第二，抖音上的点赞默认是私密的。
因此，微信才推出了私密赞的功能，需要长按才能触发。
这并是一个优雅的解决方案，一是操作成本有点高，二是用户存在较高的学习成本。
微信作为一个强关系社交场景，这正是微信与抖音不一样的地方。
以上两者的目的都是一致的，那就是为了减轻用户的社交压力。
同时用过mac OS和windows系统的用户不知是否发现，这两个操作系统的弹窗按钮“确定”和“取消”的位置是不一样的？
mac的弹窗按钮确定在右，取消在左；而windows的刚好反过来，确定在左，取消在右。
为什么会有这样的差异？哪一种更加合理？
在交互设计中，这种弹窗叫做模态反馈，艾伦·库珀在《About Face 4》中提到：模态模式一种临时模式，它通过遮罩将用户当前看到的内容和之前看到的内容区分开来，界面中只有 popup（弹出层）组件具有可交互行为，需要用户操作才能退出该模式。模态的优势在于让用户专注于完成某个任务而不被干扰。
首先我们要明白这两个按钮哪个使用率更高，一般来说，“确定”的点击率要远远高于“取消”。这是因为大多数用户对于自己的操作行为是明确的。
所以这两个按钮在视觉上一定要做出差异化，“确定”的视觉层级要高于“取消”，这样用户才会一目了然，不会感到困惑。
回到刚才的问题，逆向思考这两者背后的逻辑差异。
windows弹窗的背后逻辑：
人的阅读习惯是从左到右，所以把点击率更高的按钮放在左边更加符合人的正常阅读习惯。
mac弹窗的背后逻辑：
根据一般的任务的流程，“取消”在左代表返回上一步操作，而“确定”在右代表进入下一步任务流程。
看上去似乎都有道理，这两种交互方式本身没有绝对的对与错。只要在整个系统中保持一致性，让用户形成操作习惯就没有啥问题。
从个人的使用习惯而言，个人更倾向于mac的这种方式。
手机上的实体按键电源键和音量键通常有两种分布方式，放在左右两侧或都放在右侧，前者以iPhone为代表，后者以安卓手机为代表。
这两种方式有什么区别？哪种方式更加合理？电源键和音量键属于完全不同类型的两种按键，且都是高频使用，它们的功能自然不用赘述。
我们先来看看都放在右侧会有什么问题，以下使用场景相信用户不会陌生：
用户a，在地铁上玩王者，声音有点大，想把声音调小，结果不小心按到了电源键，导致手机息屏，而此刻你正在激烈的团战，内心有一万只“草尼玛”奔腾而过……
用户b，每次按电源键（解锁或锁屏）都会不小心同时按到音量键，结果直接就截图了！这种情况发生了不止一次，因为这两个按键离的太近了……
用户c，自家的小米11，电源键位于中间位置，右手拿时大拇指会触碰到，左手拿时中指刚好会触碰到，而电源键又有指纹锁功能，导致手机在不断的解锁，而你毫无察觉……
通过上面的案例，可以得出结论：若按键都放在右侧，会导致用户经常误触而造成不必要的麻烦。
放在两侧就不会有这样的问题。可以有效防止误触，尤其是盲按，不用担心按错，减少误操作的几率。
值得一提的是，iPhone手机的电源键一开始是位于顶部位置，这是为何？
因为刚开始时手机都是小屏幕（3.5～4寸左右），对于iPhone5S及以前的手机来说，单手操控，拇指Home，食指电源，刚刚好。
所以电源键放在顶部既按得到又可以减少误操作。
后来随着手机大屏的趋势（4.7寸以上），这个时候单手已经不方便按到顶端了，从6代开始就把电源键放在右侧了。
但无论是哪种方式， 两个按键都是分开放。
还有一个小细节，iPhone的实体键不是在右侧正中间，而是在靠上的位置。
iPhone设计理念是单手持握，并且大多数人右手握手机，大拇指经常会碰到右侧边框，若果放中间，这样会造成误触音量键和静音键。
其实上面的案例3就已经说明了按键放在中间的弊端。
我想起了当年的锤子T1，左右按键一样大且位于两侧的中间，这是典型的为了追求完美的对称而向用户体验妥协。
iPhone从初代开始就已经建立了自己的设计理念，不管是工业设计还是界面设计，并沿用至今。
从初代开始，iPhone机身左侧音量键上方就有一个静音键。
这些年来，iPhone一直在减少各种实体按键以及外部接口，比如3.5mm耳机孔、home键。
但直到如今这个静音键却一直保留下来，为何iPhone对于这个按键情有独钟？
静音键开启后，任何来电或通知都是无声的，震动也会消失。
在无需点亮屏幕的情况下实现一键静音，方便快捷，深受用户的青睐。
根据自身的使用习惯以及用户研究，无非以下几种使用场景，比如看电影、开会、上课等：
1.进电影院看电影前，我一般都会拨一下，避免在看电影的过程中被来电铃声打扰，影响了自己和别人观影。
2.开会的时候也会拨一下，以防在开会的时候突然被来电铃声所打扰，避免不必要的尴尬。
3.学生党在上课前一般也会开启，这样整节课都不怕打电话进来了。
总之，就是不希望自己的手机铃声打扰到自己和别人，带来不必要的麻烦。
如果是虚拟静音键，需要先解锁手机，对着手机屏幕一顿操作。
而实体键不需要这么麻烦，可以盲操作，放在裤兜里都不影响操作。
这个按键这么重要，却很少看到安卓手机上有（除了一加基本上没有）。
实体静音键并非苹果首创，之前的Palm、Blackberry（黑莓）早已有这样的设计。
可能的原因是安卓控制中心很早有静音按钮，甚至有些定制系统还可以把静音按钮直接放在桌面上，设置静音非常方便，也就没必要再多加一个实体键了，显得多余又徒增成本。
上面提到过的，作为安卓阵营唯一的静音键，一加手机引以为傲的三段式按键，该设计可以通过物理键直接实现在静音、免打扰与正常模式当中快速切换。
但个人认为这个设定复杂了，三种模式远比两种模式复杂。用户并不一定能搞明白，有一定的学习成本。
在早期，iPhone的控制中心并没有静音按钮，想要设置个静音并不是一件容易的事情，而这个功能又是必须的，苹果索性直接做了一个实体物理键。
这样静音的时候只需要把静音键拨过来就可以了，一步到位，使用体验也很好，所以一直保留至今。
虽然现在iPhone的控制中心已经加入了勿扰模式，但考虑到老用户的使用习惯，以及品牌调性，苹果对于这个实体按键的去掉还是显得很谨慎。
考虑到之后iPhone在防水、机身内部空间的改进，不排除苹果终有一天会取消iPhone上这个静音键。
静音键虽好，但也并非没有缺点。用户有时候会无意中触发这个按键而不自知，或者开启后忘记关闭，导致错过了一些重要的电话。
虽然开启了静音键，但并不是绝对的静音。如果是闹钟，铃声还是会响起，因为闹钟的优先级要远高于静音模式。
苹果这是考虑到了如果有用户不小心触发了静音键，或者开启后忘记了关闭，害怕用户耽误了重要事情。
这就很好的解释了为何明明开启了静音模式，却还可以调解音量大小的原因所在。细微之处方见真功夫。
在日常生活中，旋钮是个很常见的东西，比如音箱，微波炉，收音机，老式电视，车载旋钮……
在机械产品上，旋钮凸起的把手和它下面的圆盘刻度，是最明显不过的旋转暗示，符合人的自然感知。
旋钮式交互是个人非常偏爱的一种交互方式，我认为这种交互跟iPhone的home键一样经典，主要原因有三：
旋钮操作简单，看到这种按钮，一岁小孩子都会忍不住用手去抓。对于用户来说，几乎不需要学习成本。
在旋转的过程中，可调大调小，一切尽在用户的掌控之中，用户感觉到有十分的安全感。
在调节的过程中，调大调小都能立刻收到即时的反馈，这是用户最喜欢的交互方式。
我们在触摸屏上很少看到这种旋钮式交互，因为这种交互是要建立在抓住旋钮实物的感受。
而触控屏是个二维的世界，没有真实抓握的手感，无法还原出三维世界的真实手感。
汽车上最常见的旋钮就要数音量和空调了。然而自从特斯拉在车上推广大屏幕后，越来越多的国内厂家开始盲目跟风，把绝大部分的功能按钮集成到屏幕中，比如空调，不仅不方便，行车中使用还容易造成危险驾驶。
车上的触控体验跟手机上是完全是两码事，使用场景也完全不同。最大的区别在于后者没有安全问题。
都知道开车不玩手机，可是行车时操作中控屏跟玩手机有什么两样？
对于驾驶员来说更加安全，通过旋钮调节空调，熟悉后完全可以实现盲操，边开车边操作毫无压力。
如果是触控屏，你必须看着屏幕，一顿操作猛如虎，而在开车过程中眼睛哪怕离开前方一秒钟就意味着危险。
而安全是汽车驾驶的重中之重。
用户的操作有真实的物理反馈，旋钮阻尼。
屏幕上虚拟按键反馈根本无法与实体旋钮相提并论。
软件系统用久了会变卡，可能会死机，难免会有bug。而这些不稳定因素将成为汽车驾驶的潜在危险因素。
一旦屏幕失灵，或者系统死机了，那所有按键都失效了。
虽然特斯拉为了提升其车载系统的稳定性下了很大功夫，但是问题从来都没有停止过。
但是硬件基本上很少会出问题，物理旋钮才让人100%放心。
无论厂家如何吹嘘，虚拟屏幕按键在大多数情况下都不会比实体按键有更好的使用体验。
因此，有一些实体键出于安全驾驶的考虑还是应该保留，将各种功能按钮都集成在屏幕里并不见得是一个明智的选择。盲目的把实体按键变为触摸按键存在安全隐患。
文章来源：站酷 作者：CdzhcHappy
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
作为一枚设计小萌新，对上述场景，是否似曾相识呢？此些尴尬的情况，也映射出了不少问题：数据化设计意识薄弱，数据基础知识模糊，缺乏系统的体验评估模型和度量方法等等。
那么，我们该从哪些维度进行数据分析呢？数据的基础知识又有什么呢？常见的数据分析方法又有哪些？诸位看官抓好扶好，入门版航班即将起飞，让我们一起走进数据的世界，掌握一定的数据分析能力，告别“我要我觉得”的任性决策。
增量尚不明确，存量博弈的下半场，都以去肥增瘦的方式，宣告着精细化运营的时代到来，似乎也对设计师同学提出更高专业的要求。数据意识作为能力象限中的某个小瓦块，虽然细微，但也是专业输出的切入点。
在面对产品功能迭代、用户行为分析、日常监测、设计决策以及效果评估等等问题时，单纯的从视觉维度进行推导，会稍显单薄。而基于客观数据的分析，可以更科学准确的辅助我们进行决策。
所谓的“数据指标”，简单来说就是可将某个事件量化，且可形成数字，来衡量目标。在一定程度上，“数据指标”能揭示出产品用户的行为和业务水平状况。
目前市面上的产品种类繁多，大致都围绕“用户是谁、做了何事、结果如何”进行归纳整合，分别对应着用户数据、行为数据、业务数据三类指标。
1. 存量：反映某一时间段内活跃的用户数。以日活（DAU）、周活（WAU）、月活（MAU）维度进行统计。其中，Active需以关键用户的自发行为来进行定义，常见的动作有登录、浏览内容等。
2. 增量：一般用新增用户数来反映，同样分为日新增（DNU）、周新增（WNU）、月新增（MNU）三类统计维度。其中，增量的定义相对模糊，需提前与渠道确认好新增指标，建议根据内部的账号体系进行指标的取舍，选择新增注册用户还是新增设备数。
3. 来源：用户从何而来，包含自然搜索、产品导流、好友邀请等多种渠道。结合不同渠道用户的数据表现，可以指导后续的推广方案。
4. 留存：通过留存率来评判产品的健康程度，表示新用户在一定时间段内，某些行为重复发生的比率。其中，日留存和月留存的评判分析作用又有所不同：
日留存：作为衡量用户渠道质量的重要依据，如老王的公众号在站酷、知乎、微信群进行导流宣传，通过分析不同渠道的用户留存表现，从而优化受众用户的投放来源。
月留存：作为用户粘性的重要判断，通过指标来分析产品对用户是否长期有吸引力。也可用作产品上新后，功能迭代是否符合预期的判断依据。
1. 访问深度：用户单次浏览页面的过程中，浏览了页面的数量越多，表示用户访问深度越深，产品粘性较好。
2. 转化率：指在一个统计周期内，完成转化行为的次数占总访问次数的比率。转化率=(转化次数/点击量)×100%。如在电商、理财等产品中，转化率是衡量产品优秀与否的重要指标之一。
3. 跳出率：访问了单个页面的用户占全部访问用户的百分比，可用来衡量访问质量，高跳出率通常表示内容或体验与用户目标脱节。
4. 停留时长：用户游逛的时间长度，需要区分对待内容消费与工具效率场景，高停留时长并非全是正向反馈。
5. 次数：包含页面访问次数（PV）和用户访问次数（UV），通过页面或者用户作为计数单位，但需进行相应数据去重，保证数据的真实性。
6. 点击率：CTR（Click-Through-Rate）即点击通过率，某一内容被点击的次数与被显示次数之比，CTR是衡量互联网广告效果的一项重要指标。影响用户点击的因子较多，作为入口级内容，却具备较大的设计发挥空间，可通过信息的布局与核心利益点的外化，实现行为号召（Call to Action）
1. 总成交量：GMV（Gross Merchandise Volume）属于电商平台企业成交类指标，主要指订单的总金额，包含付款与未付款两部分
2. 人均消费金额：ARPU（Average Revenue Per User）即每用户平均收入。这个指标计算的是某时间段内平均每个活跃用户为应用创造的收入。
3. 续费率：指的是在订阅期结束时，选择续费的用户占所有应续费用户的百分比
4. 付费率：付费用户占活跃用户的比例。
5. 用户周期价值：LTV（life time value）是产品从用户获取到流失所得到的全部收益的总和，当LTV大于平均获客成本和后续的运营成本时，产品获得净收益。
对上述数据类别有所了解之后，我们在面对纷纭复杂的应用类型与数据概念时，到底该怎么选取合适的指标进行衡量和分析呢？接下来，让我们进入下一个知识点-指标建模。我们大致可以按照以下方法进行关键指标的选取。
① 明确业务的最终目的；
② 判断业务模块所属类型；
③ 根据模块类型选择数据指标；
任何产品都有其商业或生存目的，且通常会使用一些支撑手段的工具、或是支撑手段的手段来达成目的。我们以“设计软件-Figma”为例，进行业务目的与手段的拆解。
1. 目的：Figma 是一个基于浏览器的协作式 UI 设计工具，其最终目的是完成商业变现，让更多用户付费购买。
2. 手段：为达成这一目标，而采用基于web的模式这一手段，极大的方便了团队协作办公的需求，继而备受青睐，普及率节节攀升。
3. 支持手段的工具：此外，借助开源的插件及完善的组件功能，为设计创作者提供更便捷的工具支持。
在从业务的最终目的出发，梳理业务模块后，可进一步的拆解该业务模块的具体类型。为方便理解，可以按照产品价值，将功能模块分为4种类别：工具、内容浏览、社区、交易。
1. 针对本身自带价值属性的产品，按照帮助用户节省时间和消磨时间可分为：
工具类：剪映、轻颜相机、飞书文档及翻译查词等
内容浏览类：各类图、文、音视频体裁的消费内容，如短视频、喜马拉雅、知乎等
2. 另一类产品本身不产生价值，通过自身的平台属性来连接资源，同样按照帮助用户节省时间和消磨时间可分为：
社区类：小红书、即刻、微博等
交易类：电商板块、会员付费板块以及直播打赏充值等
按照时间与价值维度，将产品划分为4类模块，每类都有各自需要核心关注的指标要素
下面对4种分类的功能模块，分别介绍如何选取指标体系
1. 工具类：通过产品达成个人目标，高频的使用行为，可以培养用户的固定习惯。因而可主要关注使用量、目标达成率、频次数据指标。（示例：剪映）
2. 交易类：以详情页作为用户购买动机的诱因，实现付费转化。倘若能多次反复的购买商品或服务，整体转化效果更佳。因而，可选取详情页转化率、客单价、复购率作为衡量指标。（示例：百度网盘）
3. 内容浏览类：用户是否已获得更优质的内容，愿意投入更多的时间浏览内容，并能触发与内容的互动行为。因而可选取浏览数、浏览广度、浏览时长和互动行为作为衡量指标。（示例：快手）
4. 社区类：社区环境主要受人与内容、以及人与人之间的关系影响。鼓励用户发布内容，以创造的内容来吸引其他用户产生共鸣，从而进行内容创造与互动行为。因而，可选取发布量、互动量、用户间的关系密度作为衡量指标。（示例：即刻）
在产品迭代发展的过程中，掌握有效的数据分析方法，能让冰冷客观的数据鲜活起来，为决策提供判断依据。接下来，就给大家推荐两类高频数据分析方法，请注意查收。
由Dave McClure 2007提出的客户生命周期模型，可以帮助大家更好地理解获客和维护客户的原理。其核心为AARRR漏斗模型，对应着实现用户增长的5个指标：
1. 获取(Acquisition)：用户如何发现（并来到）你的产品？
2. 激活(Activation)：用户的第一次使用体验如何？
3. 留存(Retention)：用户是否还会回到产品（重复使用）？
4. 收入(Revenue)：产品怎样（通过用户）赚钱？
5. 传播(Refer)：用户是否愿意告诉其他用户？
我们在进行数据分析的时候，应该考虑用户正处于AARRR模型的哪个部分、关键数据指标是什么、对应的分析方法又是什么？
科学反映用户行为状态以及从起点到终点各阶段用户转化率情况，是一种重要的分析模型。广泛应用于网站和App用户行为分析的流量监控、电商行业、零售的购买转化率、产品营销和销售等日常数据运营与数据分析的工作中。
例如：在完成电商购物行为时，共包含浏览选择、查看详情、添加购物车、生成订单、支付等环节。通过监控用户在流程上的行为路径，漏斗能够展现各个环节的转化率，直观地发现和说明问题所在，更快定位出某个环节的具体问题。
除了需要了解分析方法之外，还需要提防以下数据分析常见谬误，避免落入陷阱之中，从而做出错误的决策。
1. 数据偏⻅
在分析数据时受个⼈偏⻅和动机的影响，即仅选择⽀持你声明的数据，同时丢弃不⽀持声明的部分。“数据偏⻅”将让数据的客观性荡然⽆存。 避免这种谬误的⽅法是在分析数据时，尽可能收集相关数据，并询问他⼈意⻅。
2. 采样偏差
在做抽样分析时，选取的样本不够随机或不够有代表性。例如，互联网圈的人极少会使用PDD，为何该应用还会有这么好的市值表现？
3. 因果相关谬误
将两个同时发生的事件，判断为因果关系，忽略了其中间变量。例如，隔壁老王生了个孩子，同时种了一棵树。孩子和树都随着时间的推移而长高，在一定时间内，如果使用相关性分析，可以得出这两个变量具有相关性。然而我们都很清楚，孩子长高和树长高之间，并不具有因果关系。
4. ⾟普森悖论
即在某个条件下的两组数据，分别讨论时都会满足某种性质，可是一旦合并考虑，却可能导致相反的结论。避免“辛普森悖论”给我们带来的误区，就需要斟酌个别分组的权重，以一定的系数去消除以分组资料基数差异所造成的影响。
5. 定义谬误
在看某些报告或者公开数据时，经常会有人鱼目混珠。「网站访问量过亿」，是指的访问用户数还是访问页面数？
6. 比率谬误
谈论此类型指标时，都需要明确分子和分母是什么。另一方面，在讨论变化的百分比时，需注意基数大小。如小王和小刘体重都上涨了10%，但二者的体重基数分别为60kg、90kg。
文章来源：站酷 作者：美工李大强
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
为了保证这篇文章的质量，追波年度的每个作品都超过550赞。在此原则下挑选了828件作品，作品总的大小为2.2G。
相比于《2020年追波设计流行趋势》多出了328件作品。
从挑选出的828件作品中，排名前十的作品中9件为B端设计，另一件作品也是B端产品C端化的产物。其中：
B端界面设计占比476/828，57.4%；
C端界面设计占比180/828，21.7%；
视频动效作品占比223/828，26.9%；
明眼人都能看出其中的比重关系，B端设计再次大火，为什么是再次？因为B端设计之前火过，只不过没有赶上一个好的时代，在C端设计风光的十年里而忽略了其存在。随着C端市场饱和与数字化的浪潮下，实体经济、ToB 、ToG的产业再次迎来了它的曙光。视频动效的作品占比也已超过C端界面设计，相信今年视频动效作品占比还会再次提升。
追波年度最佳作品来自大家最熟悉的UI8团队中的Tran Mau Tri Tam ✪，作者来自越南西贡，最佳作品截止目前355K浏览量，2933个赞。
为什么看似平平无奇的作品却能获得追波年度最佳作品呢？既不是C端也不是纯B端的作品，更像一个网页与平面的结合体。如果去掉搜索图标、分类图标和按钮，你可以理解它就是一个平面作品，一个字体加几何形体构建的作品，为了丰富画面的层次，让画面更加的活泼采用了多彩加几何色块，让标题阅读有停顿感和呼吸感。faster底部的横线让它从标题文字中脱颖而出，这种使用线条突出重要信息的设计也是今年追波设计流行趋势之一。
MetroUI是Windows8的界面设计语言，在2010年至2013年间曾经风靡一时，那也是移动互联网的发展元年，现在国家推行实体经济、数字化带动To B 、To G 的发展元年，通过几何色块（MetroUI）实现B端产品与C端设计风格的传承与衔接，你会发现历史总是惊人的相似。最后背景结合今年最流行的微软风，毛玻璃的多彩高斯模糊渐变风，年度作品当之无愧。
最后来看下按钮的设计，正常的按钮要么文字加色块，要么左图标加右文字，它设计成左文本加右图标，更加注重信息的可读性和易读性，也体现B端设计重功能和交互体验，视觉点到为止的设计理念。
下面我们来欣赏年度最佳作品里面的流行趋势吧。
字体三原则：可读性、易识性、易读性。当你同时读一篇文言文和一篇设计文章，肯定设计文章的内容可读性更好。易识性是用在字体设计上，不能过于浮夸的改变字体骨架、形体而不易识别。易读性和每个位设计师都息息相关，因为我们都需要编排文本。当我们小时候写作文时，不会写的文字可以用拼音代替。这时候读者读到拼音时会有停顿感，更加适合用户阅读。
通过给用户制作停顿感来增加用户的易读性。可以在相关联文本后面添加图片、表情、图标来更好的理解文本内容，丰富文本内涵。比如情侣间表达爱意时会输入文本，“我爱你”、“我Love你”、“我ai你”、“我❤️你”，哪个更加会有情感共鸣呢？不言而喻，相信你心中已经有答案了。
在标题文字上添加曲线来突出重要文案是2021追波最流行的趋势之一，第一个设计目的就是突显文字，其次就是想表现铅笔真实书写的感觉。之前很多带有签名的设计中，签字的文本都是手写体的感觉，手写体对比电脑的机械字体会带有一种人文气息，也会让两者之间产生一种对比、矛盾。
除了突显文本外，曲线还有视觉引导的作用。通过视觉引导让用户按照设计师编排的顺序进行浏览界面。当然还有比这更科学的工具就是眼动仪测试，通过真实用户眼睛浏览界面显示对应的热点图。
多彩高斯渐变风是从色彩的角度来传达和丰富画面的，多彩高斯渐变风其实是从制造矛盾到平衡矛盾的过程，多彩渐变多为冷暖对比来制造画面的冲突，需要控制冷暖画面的大小来实现平衡。主流的还是以暖色突显为主。多彩渐变主要起到活跃气氛、吸引目光、平衡画面的作用。
多彩高斯渐变还可以结合轻拟物、几何图形、三维等新的组合方式去创新，给用户呈现一种更加新颖的视觉表现形式。最后我们还是要回归到内容上，为了更好的传达信息需要去设计与内容相匹配的视觉风格。
B端设计的火爆带动了B端相关模块设计，更多的人也愿意尝试B端相关模块设计，侧边栏作为产品架构中重要的导航系统，好的侧边栏设计能为用户带来更好的效率。主流侧边栏都做了展开、收起、拖拽等交互效果，也是受限于PC屏幕为展示更多数据而腾空间。侧边栏主要承担的功能有导航、分类、自定义筛选、共享、新增等。追波的B端产品设计已经不再是假大空概念设计，而是一套实用美观可落地的设计。
仪表盘设计是一个很好的隐喻，想象一下开摩托车或汽车主驾驶前面的屏幕，汽车仪表有燃油表、车速表、里程表、水温表、转速表、故障指示灯等。B端类产品后台界面的仪表盘设计也需要展示一些重要的数据和各种状态，大体分为侧标栏、导航栏、待办任务、个人信息、报表数据、消息中心、快捷入口等。当然最重要的就是报表数据，团队收益、任务进度、转化比例、新增、存量、团队工作时长等都是老板或领导关心的内容。每个公司业务不同、每个人员权限不同，自定义的仪表盘也各有差异。重要的是突显数据和业务状态，需要分层级系统性去思考和设计。
复杂的事情简单化，简单的事情标准化，标准的事情流程化，流程的事情自动化。流程设计是每一个企业核心功能和业务，可自定义的管理流程系统搭建也是B端产品设计的难点，需要对业务高度抽象，让每一个业务人员可自定义的流程才是好的流程设计。
B端C化是B端产品设计的视觉表现力慢慢往C端产品设计的视觉靠齐，国内B端产品界面设计视觉水平还有很大的提高空间。除了视觉上的提升外，由于业务的发展，B端产品也开始移动化、智能化，国内主流还是通过小程序、H5来现实B端产品C端化。
轻代码化是一种低代码赋能无代码的方式，弥补无代码拓展性差、覆盖场景少的问题。在保有无代码灵活、易用、快捷的同时，又能覆盖低代码使用场景。简单理解就是无需代码开发即可如搭积木般快速、灵活地创造属于你的个性化管理系统，轻松实现多元业务场景的数字化管理。
轻代码化将功能进行打包，升级成全局可以用的配置，技术人员配置好后，业务人员在应用编辑时直接选择使用模版，绑定对应的变量即可使用。
为什么人加色块的组合方式能流行起来？还是B端行业流行带动的。B端讲的更多的是企业对企业。企业对企业除了讲行业解决方案外，还需要传达公司的价值观、使命、愿景。人加色块的组合方式非常适合体现公司的企业文化。对于一家全球化的公司不同肤色的人物组合在一起，这种人文气息和价值观已经就不言而喻了。
当然企业也需要进行营销，抓人眼球。几千年来的遗传证明了，人的大脑对食物、性、动的东西、人脸和眼睛、危险的动物很敏感。人加色块的组合方式也具有抓人眼球营销的功能。真可谓一举两得。
这种风格更适合大公司，国内的一些手机厂商OPPO、VIVO等也会通过手机+背景+人物来体现科技与人文的结合，而对于中小型公司产品差异化和行业解决方案展现应该还是重中之重。
毛玻璃效果加大了模糊程度，透明效果更加扁平，很好的顺应当下UI扁平化的设计趋势。苹果Mac OS Big Sur系统的图标、界面中运用了大量毛玻璃和半透明元素，界面更扁平。至于C4D三维彩色玻璃的视频教程可以在B站搜索“透光艺术-C4D创建彩色玻璃的4个技法”，完全能满足UI设计师。当然还有一个好消息就是Mac用户可以享有OC一年免费的使用权，具体安装购买方法可以上“某宝”就可以轻松搞定，真香。
轻拟物这几年一直流行，在UI设计中趋于稳定的位置。从写实到扁平再到轻拟物，其实是设计师们一路不断探索的结果。本质就是光影对形体产生的视觉感受。在色彩中对高光、亮面、明暗交界线、暗面、反光（环境光）五个部分的处理。写实三维的图标等设计更适用于简洁的画面中，扁平等设计更适用于复杂一点的界面中，比如B端产品界面中的功能图标。轻拟物可使用的范围更广，效果更佳。Sketch、Figma软件对于渐变、高光、投影、高斯模糊处理已经非常简单且出彩。
简洁设计遵从了密斯·凡德罗的“少即是多”的设计原则，在B端产品界面中更加需要简洁设计，我们最熟悉的Sketch软件界面已经是相当的简洁了。回到现实当需求功能不断增加，产品界面的编排如何取舍，如何保证界面的简洁是设计师需要深度思考的问题？如何与上级沟通？该功能是否可做可不做？是否需要埋点用数据说话？如果只是一味竞品有我们就需要有，功能不断累加只会让界面越来越重。
几何图形和几何插画有异曲同工之妙，几何图形多为产品界面和宣传内容的抽象，产品界面的几何图形多为占位符形式，加上色彩和几何色块让其成为一个整体。B端产品视觉设计C端化的进程中，几何图形、几何色彩不失为最好的突破口，相信今年追波B端产品的视觉设计一定会更上一个台阶。
几何图形另一个场景化的地方就是品牌，作为一名UI设计师一定会经历从图标到几何图形到品牌设计的过程，品牌设计的技巧基本还是以几何图形为主，至于品牌的内涵需要更深层次的解读。掌握主流品牌设计的技巧对产品定位、品牌宣传打下扎实的基础。
暗黑模式的设计是解决在微弱环境下内容也可以有更高的可读性。随着用户夜晚及深夜使用电子设备时长增大，如何在夜晚这个特定场景下使用更加舒适。合理使用暗黑模式可以减轻眼睛疲劳，提高在夜间使用的可读性。
在设计暗黑主题时，不能为了突显视觉上的逼格，而去使用高饱和度鲜艳的色彩来突显界面的品质感。而应该把舒适度、可读性作为设计的衡量指标。Material Design给出了暗黑主题的设计准则，即正文和背景之间的对比度应至少为15.8:1。按照此标准设计，可读性都还不错。这里介绍一个插件“Stark”（Figma、Sketch、XD、Chrome插件）用来测试界面的对比度。
为什么叫模块化，而不叫组件化，组件化更多的利用原子系统从原子、分子、组织、模版、页面来快速的搭建界面，但在B端产品设计中基础组件和业务组件的搭建是以提高工作效率为前提，是否有从0到1搭建B端产品组件的经历是设计师一生中最宝贵的经验之一，它能提高设计师的系统化思维、逻辑思维和抽象思维能力。
产品模块化设计就是将产品分成几个部分，也就是几个模块，每一部分都是具有独立功能，具有一致的连接接口和一致的输入、输出接口的单元，相同种类的模块在产品族中可以重用和互换，相关模块的排列组合就可以形成最终的产品。通过模块的组合配置，就可以创建不同需求的产品，满足客户的定制需求 。
插画作为设计的一大品类，不同的插画师都有自己擅长的风格，本质是都有自己的个性，但是在产品设计中更多是需要共情、共性来讲故事，表达产品理念和价值观。这就需要插画师去尝试并探寻出适合互联网产品设计类的插画风格。设计的本质是旧元素的重新组合，插画不会过时，而是需要结合当下和产品找到最匹配的设计风格。
几何插画算是插画简化的一种表现形式，人和物的形态不再写实，而是抽象成几何图形拼凑的感觉，同时保留人物形态的神韵。加上几何色块与人物交互形态的表现，传达出简洁、科技的现代感。难点还是在人物形态的表现上，平时多练习练习速写还是很有必要的。
线面插画最近一两年非常流行，准确的说是非常适合。首先线面插画主要是由线条和块面组合而成，用块面表现人物形态时某些结构会表现不出来，这时候用线条简单勾勒后，结构就会清晰明了。其次当线面插画运用在界面上时，可以打破界面纯文字或组件化的机械和沉闷感。线面插画的风格提升画面热闹感的同时，还能保持界面的干净整洁。
界面微交互动效会让用户的体验更加精致到位。想要打造优秀的产品设计，微交互和动效设计是绕不开的，UI界面设计通过微交互反馈告知用户当前正在发生的事情，所处的状态。细微的动效更能调动用户情绪，取悦用户。C端产品微交互和动效已经很成熟了，一部分功劳来自iOS系统原生自带的效果。B端产品的微交互和动效更多还是在学习海外产品，还需要给前端工程师灌输微交互和动效的设计价值，共同打造产品体验细节。
Mg动画需要很好的节奏感、韵律，每一个场景动画都需要其中的元素进行连接变化，让转场动画更加自然，MG人物动画通过点线面的动效变化让画面更加有趣、自然，通过粒子效果让特定场景无限循环会让人更加印象深刻。
MacOS Big Sur系统图标的更新带动了三维图标的流行，三维图标的应该场景还是需要有较大留白空间的界面，因为三维图标太小后就看不到更多细节。三维图标感觉又回到了拟物化和扁平化哪个更好的问题上？设计师应该保持开放多元的视角。设计本身也在不断的演化融合，存在即合理。合适最重要，它们都会有适合自己的场景和设计价值。
为什么轻三维在界面设计中占有一席之位？一个是设计师不断追求差异化的产物。另一个是更好的表现内容，并与用户产生共鸣。轻三维的基础模型都是来自手机界面中的各种元素，比如组件、开关、按钮、占位符、图表、几何图形、图标、进度条等，这些都是用户日常使用系统软件常见的元素，通过简单的几何形体建模—打灯光—加材质—渲染—PS调色。难度系数不大但效果很出彩。第一个出彩点是模型带有厚度的倒角，结合灯光渲染的光泽是二维软件不能比拟的。第二个出彩点就是材质自由添加，特别是当下流行的毛玻璃效果，玻璃材质渲染效果更佳。第三个出彩点就是可以加局部灯光，局部的渐变色或环境光更佳出彩。
P4D是PS加C4D的设计表现技法，也是视觉设计的最后一个环节，通过PS对C4D的渲染图片进行调色，利用PS的调色技巧可以很好的解决C4D打灯光的瑕疵，还可以利用PS强大的合成功能，将渲染图片与图片素材进行合成，来表现画面的视觉度，当然三维软件比较难实现的水、粒子、烟花等效果，也可以通过PS的后期合成来实现，这也是P4D的强大之处。
卡通IP设计最近三四年技术的迭代已经慢慢的走上成熟，卡通IP也从传统的纯PS手绘技法，转到C4D建模—角色绑定—MD衣服制作—OC渲染—PS（静态）/AE（动态）调色。
卡通IP火的本质更适合做营销，相比于品牌或Slogan，卡通IP具有亲和力和画面感。随着各种手办行业大热，受互联网大厂影响下，卡通IP已经是互联网B轮以上公司的标配了。如果团队中没有这样能力的人，也可以通过绘制好二维，一套三维可以选择外包完成。
对于UI设计师来说学习是有成本的，暂时并不是必备技能，如果喜欢完全可以学习，从设计差异化的角度来看三维视觉确实有一定的竞争力。
C4D三维场景动画通过构建实物和场景模拟生活中的现实场景，会让用户体验真实感，三维软件制作动效的最大优势是通过动力学和表达式来模拟真实感，未来在AR/VR领域会有更好的发展。相对于界面动效学习成本难度也相对较大。在三维动画中C4D软件对于域、动力学还是有一定的优势。
上一次写追波流行趋势还是两年前了，通过两年的沉淀对趋势流行有了更深的认知。十年的互联网行业风风火火，随着最近的互联网裁员潮大家也慢慢的进入到反思层，客观的看待和理解这个真实的世界，曾经的流行趋势也需要慢慢的沉淀下来。
存在即合理，趋势流行稍纵即逝，注定是不长久的，只有大浪淘沙历史遗留下来的风格才能更长久。但我们也不能不去关注，因为哪有什么所谓的创新，只不过是旧元素的重新组合，并符合当下这个时代人的审美需求。香奈儿的“时尚易逝，风格永存”大概就是这个意思吧。
6000多字的设计流行趋势，希望能帮助设计师度过互联网裁员的寒春。最后希望以后每年坚持输出设计流行趋势。为设计行业奉献微薄之力。
总结
追波年度最佳作品
易读性（停顿感）
曲线
多彩高斯渐变风
B端界面设计
侧边栏Sidebar
仪表盘设计
流程设计
B端C化
轻代码化
界面设计技巧
人文气息
毛玻璃效果
轻拟物
简洁设计
几何图形
暗黑设计
模块化（组件化）
插画
几何插画
线面插画
动效
微交互
Mg动画
三维
三维图标
轻三维
P4D（PS+C4D）
卡通IP
三维动画
总结
文章来源：站酷 作者：水手哥
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
之前总结了B端表单页设计的一些问题，其中信息录入是比较重要的部分，信息录入中选择录入是最为常用及复杂的组件，平时工作中遇到的相关问题也是最多的，此次针对选择录入常用组件的应用场景和交互规则进行总结
选择录入的类型比较多，可以简单的分为两大类即
基础选择组件：单选/多选/开关/下拉选择
复杂选择组件：时间/日期/穿梭框/级联选择/树形选择等
B端表单业务场景比较多，很多场景具有通用性，有的场景却有一定的独立性，需要了解场景及用户的需求和组件的适用性才能提高用户操作体验和效率
一.单选框
单选框(Radio)是表单中比较常用的控件，它通常被用来从一组互斥的相关选项中选择一个单独的选项。
当点击一个未选中的单选名时，它会被选中，其他按钮为未选中状态。英文命名Radio来源于旧收音机上的按钮，用于旧收音机不同频道的切换，当一个按钮被按下时，其他按钮会弹起，使被按下的按钮处于唯一被选择状态的按钮。
使用场景
1.当用户需要在一组互斥的选项中进行单一选择时使用单选框；如果要进行多个选择，推荐使用多选框。
2.当选项数目在2-7个之间时使用单选框；如果选项超过7个，推荐使用下拉框。
3.如果有两个含义相反的选项，如“同意”和“不同意”，“接受”和“拒绝”等，建议使用一个多选框或者开关勾选为同意，不勾选为不同意。
4.如果每个选项都有同等的优先级，没有推荐选项时，使用单选框；如果需要向用户推荐某个选项，可以使用下拉框。
5.如果提供给用户的选项很熟悉，看了第一个选项就能预见到所有的内容，如“周一”，那么后边的选项是“周二到周日”等，这种情况下就不需要将所有的选项都展示出来，可以使用下拉框来简化界面。
交互逻辑
1.选项的设置，在设计单选框的选项时，要充分考虑用户的实际情况，给出的选项要覆盖到所有的情况。应该满足“互斥”的原则，因此选项之间要避免存在交集，同时也要注意选项覆盖要全面，不能出现遗漏。
例如，要考虑到用户不进行选择的情况，这时需要提供一个“无”的选项。给出的选项有可能都不符合用户的情况，如果所有的选项用户都可能不会选，就需要提供一个“其它”选项。
2.默认选项，一般情况下为第一个选项，需要选择最安全，最有可能的选项作为默认选项，提前预判用户的选择，提升用户选择效率。
3.选项排序会影响用户选择效率，所以需要遵循一定的原则。按照逻辑顺序，选择概率由高到低；或者按照复杂程度排序，由简单到复杂；也可以按照操作后风险排序，将最安全的操作放在前边，由风险最低到最高进行排序
4.排列对齐方式，竖直排列相对于水平排列而言，容易读取和定位，可以提高用户的浏览效率，所有的选项进行左对齐，不用受制于选项的标签文字长短，但竖直排列会占用较多的垂直空间；水平排列要注意每个选项之间的间距，间距尽量大一点，要不然用户会分不清单选按钮的文字到底是在前边，pc端水平空间比较大，所以相对而言，水平排列的方式更加常用。
5.交互区域，单选框的面积较小，用户在点击的时候会比较困难。可以通过扩大点击区的交互区域来提高易用性，将标签文字也设置为可点击，增加操作区域的面积，方便用户操作
6.文字标签，每个选项的文字都要简洁明了的表达该选项所代表的含义。一般使用短语而不是句子，因此不需要以句号来结尾。尽量保证每个文字标签用语的表达的一致性，不要出现有的用名词，有的用动词的情况。如果需要解释说明，可以在选项下方使用单独一行文字。如果标签文字无法进行精简，必须使用多行文字，将单选按钮与文字顶对齐
7.交互状态，每个选项都有选中和未选中两种情况，每种情况对应了3种交互状态，分别为默认、悬浮和禁用。
二.多选框
多选框的交互定义是帮助用户完成从若干个互斥的选项集合当中选取一个或者多个选项的任务，多选框多用于表单中。传统意义上，多选框是方形，单选框是圆的，用户已经形成这种习惯认知，所以尽量避免使用特殊形状
使用场景
1.当用户需要在一组互斥的选项中进行多个选择，完成N选n的任务，使用多选框
2.当选项数目在3-7个之间时使用多选框；如果选项超过7个，推荐使用下拉选择
3.当选项数量为一个，包含“是”和“否”的逻辑，也可叫单个多选框 比如常见的用户协议页面，通常采用单个多选框。
交互逻辑
选项排序/对齐方式/交互区域/文字标签等逻辑与单选框基本一致
1.选项的设置，因为所有选项处于外露状态，所以超过7个时建议使用下拉选择器，避免选项过多难以展示
2.默认选项，相对单选框，默认选择在多选框中并不常见
3.提交操作，单个多选场景中，提交时必不可少的，可以是确认按钮或是其他方式；下拉选框中为了提高效率也可不用确认，点击空白处即确认选择。
4.排列对齐方式：纵向排布，适用于选项内容较多或信息长度差异较大的情况；横向，适用于选项数量多且内容简短的情况
5.特殊状态：相对于其他控件，多选有了两个较为特殊的状态“半选中”“禁用(已选)”
1）半选中状态是全选状态的一种特殊状态，依附于全选状态，所以当多选框中存在全选时才可能出现半选状态，同时还需要有选中状态的子项，全选半选状态属于【父级】状态，交互的逻辑是状态的变化是随时体现的，所以【子级】状态的变化，作为【父级】状态也应该随之变化，这样父子级联动才会有半选中状态的出现。
2）禁用状态有未选禁用和已选禁用，未选禁用一般是该条数据不满足条件无法选中进行操作。而已选禁用一般用户的权限不足无法进行操作，通常展示出来只是为了让用户了解到有此操作。
应用场景
1.复杂选择器
复杂选择器中常常会用到多选框，可以明确展示选项的选择状态，需要注意的是多选框可以承载的半选，全选状态所对应的关系，是否符合业务场景。在实际工作中，我曾遇到过父级选择影响子级但是子级无法影响父级的多选场景，不符合常规的多选习惯，但是在实际业务场景中真实存在。
2.权限设置
在很多权限设置/流程设置的页面中，常常会用到多选框，需要注意的是各个场景中选中，取消，默认，重置等不同状态下，页面的变化，状态扭转时交互逻辑的合理性和易用性。
3.表格多选
表格页面情况多且复杂，对于勾选有两种形式一种是勾选多选框，一种是点击行数据选择，需要明确哪一种更适合当前的业务场景。另外表格的中最多的功能即是全选操作或是部分选择操作，需明确操作后对整个表格的影响
三.开关
开关用于两种相对对立的状态的切换,多用于「开/关」「启用/停用」等，不同于单选和多选开关是一个即时性的操作，这也导致开关使用的特殊性。开关能明确的展示当前的功能状态，让用户能高效的进行跳转操作。
使用场景
1.用于对流程的快速开启，如表格中开启或关闭某条数据/功能
2.权重较高的功能或设置，如配置表单的停用/启用，用户权限的启用/停用
3.用于开启/关闭全局权限，后设置其他功能的操作，如业务规则的设置等
交互逻辑
1.开关 配有对应的文字说明，开启/关闭某种功能或权限
2.开关具有联动性，通过开关去控制下层功能的操作
3.开关的每一次变更状态都要有相应的反馈，辅助用户进行状态判断
四.下拉选择
下拉选择B端业务中最常用的组件，且下拉选择的类型也比较广，一般有下拉单选，下拉多选，下拉级联，下拉树等基本场景是可选项过多时，会使用下拉选择器对所有选项进行整合方便用户高效录入信息。选项层级建议不超过 三层且需要有一定的逻辑排序，通常包括触发器和下拉面板两个部分当选项数量过多的时候，建议增加「搜索」功能。
下拉选择结构
1.标签文本：选择器标题，明确选择内容
2.选框：与文本框类似，需有一个外边框，为可操作的热区范围，主要功能是与下拉菜单进行联动
当选项较多的时候，多选框会配上搜索功能，目的是为了让用户快速找到对应的选项，而形式主要有以下两种
3.右侧标识(可选)：每个选框右侧的图标，都是选框类型的象征。常见的是下拉箭头，默认朝下；展示选项列表时，箭头朝上。
4.占位符：保持暗提示的简洁，避免把暗提示作为选择器的辅助说明，默认占位文字，格式为「请选择xxx」
5.回显值：回显值通常包括两种类型
1）当下拉单选，一般采用纯文本回显即可
2）当下拉多选，需要同时展示多个选中项，因此在录入框中采取Tag形式，使单个选项也可以点击删除形成完整的闭环
6.选项：下拉选择一般针对选项数超过5个
内容：1）选框 + 文本 + 副文本； 2）选框 + 文本； 3）文本 + 副文本； 4）文本。除了选项内容的不同，形式中也有较为复杂的，重点分析级联选择和树：
1)树展示，可选择的数据是一个树形结构时，例如公司层级、学科系统、分类目录等，树结构中可以自由选择子节点和根结点。
2)级联展示，针对的一般是有所属关系的选项且所属关系比较明确，层级一般3-5级，选择到最末子级才能完成选择一般是由大到小进行选择，选项数量上3>2>1，比如省市县选择
3)分组展示,选项过多时考虑使用的方式，使用分割线将同一类选项进行划分，用户选择时会思考从大的分类到具体的选项。但选项过多则还是建议用树结构
7.选项面板：承载所有可选择的选项列表，在选项数量过多时会对下拉菜单的高度进行限制，即设置下拉菜单的最大高度，当超过最大高度时，出现滚动条。面板相当于一个容器可以根据业务需求承载复杂的形式 例如tab分类、锚点、字母定位等，
选择器状态
默认（Default
悬停（Hover
1.未选择，若选框有搜索功能则光标变成文本输入状态，若没有搜索功能则光标变成小手（示例
2.已选择，选择后悬停状态下全部清空的功能，不是所有场景下配置该功能， 要考虑实际业务中是否需要清空
激活（Active
1.未选择，点击框体激活下拉面板，单选一般是勾选后自动关闭面板，多选则需要点击面板以外确认关闭面板
2.已选择，若是已选择再次激活，需要将已选择的选项高亮，再次点击已选选项则取消选择；选项热区，一般将整行作为热区扩大点击范围，方便用户操作。
禁用（Disable
1.选框禁用，用户无法激活，选框置灰，在设计工程中需要将禁用于正常状态之间拉开差距，这样用户能快速识别
2.选项禁用，表示该选项无法被选择，不影响整个选择器的功能，只用将该选项置灰即可，光标置入时会变成Not allowed
回显规则
单选，多数单选选择后下拉面板自动收起，回显选择的选项，选项回显时有一些特殊情况如存在极端情况文案过长则结尾用「…」展示， hover 显示「文字提示气泡」；或者选项中存在主文本副文本，考虑实际业务场景回显时可只显示主文本。
多选，以Tag形式展示已选择项使单个选项也可以点击删除形成完整的闭环；存在的极端情况是当选项过多时的展示效果，一般有两种形式撑开高度和选项融合
1）撑开高度，一般用在需要完全展示选择项同时可快速调整已选项的场景中，通过改变录入框的整体高度来展示完整的选型，撑开的高度能在表单中实现一些疏密变化，一般也不会无限撑开，会有一定的限制，并且在右侧增加滚动条。
2）选项融合，对选项展示不作要求的场景中可根据文本框的宽度进行选项融合，展示具体的选项数量即可，这样能最大程度的保证表单的的整齐，让选择器的适配性更高。
3）省略展示选项，以文本形式展示，鼠标hover气泡展示全部选项信息
问题思考
何时用下拉选框，何时用弹窗选择？
大部分情况下，单选优先用下拉选框，用户比较高效的完成选择，同时也可以明确自己的选择。而多选场景中对于选项数量可控，选项复杂度较低的可以用下拉选框。但是对于选项结构复杂，内容过载，用户频繁的滚动容易造成误操作影响选择的准确性和高效性，此时会考虑使用弹窗，且多选弹窗一般需要配有搜索区，选项区，已选区。需要注意的是，已选项在弹窗内的显示以及回显形式。多选弹窗一般可以比较直观的展示已选项，所以可以采用省略展示选项的方式。
选择搜索如何显示？
如下弹窗选择中，对于数量和层级比较复杂的选择项，搜索是很有必要的，对于搜索结果的展现形式不同的场景可能会有不同，用户使用搜索一般是对于选项比较明确，所以推荐搜索结果展示末级，用户可以更高效的做出选择，避免复杂的层级关系干扰。
五.时间与日期选择器
两种类型
1.时间点选择，选定某一个时间/日期点，B端时间点选择的业务场景较少
2.时间段选择，选定某一个时间范围，一般有开始时间和结束时间，时间段的应用一般是在数据筛选的场景中
确定时间类型后，要考虑时间粒度，时间粒度分为年、季、月、周、天、时、分、秒，B端图表页面中针对年度、季度、月度的筛选时很常见的，需要结合场景选择时间粒度。
日期选择器中一般是通过点击让用户选择时间，除了让用户点选外，时间选择器还会提供一些快捷选项例如“今天、本周、本月，本季度“等。选择后回显的时间显示格式有多种如“2022-01-01”“2022年01月01日”“2022.01.01”“20220101”“2022年01月01日”平台需要确定统一的样式，避免增加用户的认知成本。
时间段选择，常见两种形式分段式和连体式，在不同的平台都有应用，在交互上的区别分段式需要用户点击两次分别选择开始时间和结束时间，连体式是用户点击一次调起时间选择时间段，相对而言连体式操作更便捷，但是分段式理解更简单，连体式存在一定的认知成本，总体上来说其实区别并不大，平台需要建立统一的标准，这样能形成较为统一的体验和习惯。
选择器在实际工作中应用广泛，B端业务复杂，总会遇到各种新的场景，总结会有不足不全之处，欢迎大家一起探讨交流。
文章来源：站酷 作者：MuMu鱼
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
分享此文一切功德，皆悉回向给文章原作者及众读者.
用户体验是用户对产品价值的整体感受，其中包括用户感受到的产品价值以及用户感受到的操作体验。不要让用户思考，这是每个设计师所追求的。这篇文章举了大量的例子，来跟大家一起进行产品细节洞察分析。感兴趣的朋友一起来看看吧。
颜色是感知的问题。每种颜色代表不同的定义波长，但是我们每个人对颜色的感知都取决于我们的感知能力。此外，我们都有与颜色相关的不同文化或背景关联。
有很多很棒的文章和视频，介绍了色彩理论和色轮，还有许多用于生成调色板的工具。但是有时您会在实践中发现这些文章不太好用，颜色组合不完全匹配或所生成的调色板在您的项目环境中效果不佳。
所以你会怎么做？您如何开始思考和查看颜色，使它们更易于选择以及调整您的需求？
诸如互补和单色，饱和度和亮度之类的色彩理论术语并没有吸引他们。
因此，我开始以不同的方式分解色彩，方法是从绘画和室内设计等传统视觉和图形艺术中汲取灵感，并以对我们作为UI设计师所做的方式有意义的方式对其进行取景。
匹配调色板并平衡配色方案
也许您已经按照所有的色彩协调和颜色理论教程进行了准备，并生成了一个免费的调色板，但是您注意到这些颜色似乎不太匹配，也许它们看起来比较粗糙或不专业。
创建良好的配色方案就是与色调，阴影和温度匹配的平衡。要在设计应用程序中成功做到这一点，您需知道要拉动哪些杠杆。
色彩理论提供了一些公式，可用于启动调色板，这是理解调色板的重要基础。但是创建漂亮的调色板不仅与这些公式有关，还与平衡色调，阴影和温度有关。
这些是我们可以推拉的“杠杆”，可以为我们的UI设计实现更加平衡和独特的颜色组合。
因此，首先，回顾一下这些杠杆的作用。
色相是用于描述所见到的每种色调的通用术语。
饱和度指的是我们正在查看的特定颜色的主要颜色系列。白色，黑色和灰色通常被称为无彩色。
明度也指颜色的明暗程度。色调相同的颜色，明暗可能不同。例如，绛红色和粉红色都含有红色，但前者显暗，后者显亮。
色温-色温更多地是关于我们如何感知所看到的色相。并且我们倾向于将它们分为暖色和冷色。
暖色-通常是通过增加色调中的红色或黄色来获得的颜色。这些往往会唤起激情，舒适，活力和运动的感觉。他们使我们想起阳光和热量。
冷色-是增加蓝色和绿色的颜色。这些趋向于唤起，清新，冬天，静止，平静。他们使我们想起冰，雪和水。
色彩模型和色彩空间
要获得一些技术知识，您可能听说过3种不同的颜色模型，这将有助于我们更好地理解光和颜色的协同作用。
CMYK使用减法混色。它指的是光线反射物理白页的方式。颜色的重叠导致黑色。由于页面无法投射光线并向您发光，因此页面必须具有反射光。将这些颜色混合在一起就可以掩盖页面的白色，从而减少了可以反射的光量。
RGB称为光的加法混合。它指的是数字屏幕向我们投射光的方式。您在全亮度下的颜色会导致我们看到白色的重叠。有点像被明亮的泛光灯所蒙蔽。
HSB-代表色相，饱和度和明度
HSB颜色模型为我们提供了放射状的颜色，其中我们具有一定范围的色相，饱和度和明度值。
这就是我们的眼睛和大脑如何解释颜色HSB就是我们的眼睛所看到的一切，而与它是从屏幕还是在纸上投射的光线无关。
因此，出于为UI设计选择颜色的目的，我们将使用HSB颜色模型。
颜色属性
您经常会听到两种较大的颜色分组。暖色和冷色。
暖色通常被认为是主动色，这意味着它们会引起更多关注。
冷色通常被认为更被动且后退一些。
根据色彩的丰富程度和它们如何平衡，您可以使柔和的暖色充当被动元素，而更鲜艳的冷色则扮演主动角色。
现在，您了解了颜色如何在屏幕上显示以及如何设置我们的设计应用程序。让我们谈谈如何在我们的设计软件中使用和推动这些杠杆，并平衡我们的配色方案和调色板。
为了得出这些不同的颜色类别，我们将集中于推和拉色调，饱和度和亮度（HSB）的控制杆。
在数字屏幕上，我发现有一个公式和安全范围的饱和度和亮度，可以每次为每个类别创建一个完美的调色板。
为简化起见，我将主要颜色分为6种通常可以识别的主要颜色类别。这些反映了我们在日常生活中谈论颜色时通常倾向于指代颜色的方式：
1.宝石色调
S：83-73，B：76-56
这些颜色是饱和度很高的色调，以宝石命名，包括宝石蓝，宝石红，紫水晶紫色，柠檬黄和翠绿色。想一想红色宝石项链或皇家紫色的魅力。这些颜色富丽堂皇，深沉，并赋予豪华感。
2.粉彩
S：14-21，B：89-96
柔和的颜色属于浅色系。粉色，淡紫色和淡蓝色是常用的柔和色。这个家庭的颜色通常被描述为“舒缓”。我们通过降低饱和度和调整色彩来创建这些颜色。
3.大地色调
S：36-41，B：77-36
这些是自然界中常见的颜色。可以通过将纯色与白色，黑色或灰色相结合来创建它们。从广义上讲，这些是中性色。它们受到树木，森林，海洋和天空的色调的影响，被用以模仿自然色彩。我们通过增加饱和度和调整色调来创建大地色调。
4.中立
S：1-10，B：99-70
纯中性色包括黑色，白色，米色和所有灰色，而接近中性色则包括棕色，棕褐色和深色。这些是通过使色彩去饱和来创建的。它们可以与以上任何类别配对以创造平衡。我们通过降低饱和度并调整色调，色调和阴影来创建中性色。
5.荧光灯/霓虹灯
S：100-63，B：100-82
在物理世界中，这是由霓虹灯管或紫外线反应涂料的颜色创造的，但在数字世界中，我们可以通过将非常明亮和高度饱和的颜色应用于我们的设计来获得相同的效果。我们通过增加亮度和色调来创建它们。
6.阴影
S：0-0，B：0-100
两种主要的阴影是黑色和白色，其他阴影也包括不同程度的灰色。
UI颜色组合
最佳的用户界面设计结合使用一种颜色类别以及中性和阴影。
您实际上只需要这些类别中的1或2种颜色即可设计参与整个用户界面。
我们为什么不这样谈论颜色
作为数字设计师，我们倾向于避免给这些配色方案分类，因为术语似乎是为混合自然色彩的画家，印刷设计师和室内设计师保留的。但是从实际的角度来看，当我们仍在学习色彩理论并使我们的眼睛习惯于选择可以一起使用的色彩时，我发现以这种方式引用色彩在UI和数字屏幕设计中可以非常有用。
这不是一门精确的科学，但是您会看到如何以这种方式思考颜色并掌握一些杠杆和数字，以指导您帮助用户创建更令人愉悦和精致的调色板。
理解色彩理论的基础和原理很重要，特别是当涉及到实际应用时，它就显得尤为重要。引用不同的学科并找到对我们有用的类比可以带来很大的不同。
作为UI / UX设计师，最重要的是，无论您如何去实现，您都能够有效地使用颜色来传达信息并为用户创造最佳体验。
UI 设计，是用理性方法，来满足需求，并带来美学享受。
本篇探讨 UI 设计如何做到理性。全文共有三部分：有哪些理性，如何做到理性，止步于理性吗。
UI 设计主要有四类理性：基本原则，基础知识，风格设定，风格把控。四类理性有一个共同核心：活学活用。
共有四个基本原则：对齐，对比，亲密，重复。
先说对齐。
秩序产生美。对齐作为一种基本秩序，主要事关整齐美观和阅读体验。
对齐一般分左对齐、右对齐和居中对齐。
从阅读体验角度来讲，左对齐通常胜过居中对齐，所以绝大部分文章和 UI 界面都是左对齐为主。
从美感角度来讲，居中对齐往往胜过左对齐，所以一些强调美感胜过强调阅读效率、篇幅不长、同时需要细品的诗或歌往往采用居中对齐。
从空间利用率角度来讲，右对齐往往是左对齐的一种补充。比如微信的发现页面，最重要的图标和文字左对齐，次要的右箭头和其它信息右对齐。
UI 设计追求阅读体验、美感和高空间利用率，所以这三种对齐方式大部分时候都会同时出现。整体而言，是以左对齐为主，居中对齐和右对齐为辅。
再说对比。
嘈嘈切切错杂弹，大珠小珠落玉盘。音乐讲究韵律和节奏，设计也追求错落有致的节奏感。这种节奏感，很大程度上靠对比实现。
好的对比可以带来视觉张力，就是抓人眼球的吸引力，同时也能起到主次分明和视觉引导的作用，最终带来良好的阅读体验。
一定程度上，对比是无处不在的。只要存在不同，就存在对比。比如大小之间的对比，不同颜色之间的对比，文字与图标/图片之间的对比，不同对齐方式之间的对比，等等。
一般而言，对比需要果断：若不同，就彻底不同。因为一般情况下，充分的对比能带来更好的视觉张力和更好的阅读体验。
第三说亲密。
设计就是分类，张小龙曾如是说。分类中最重要的原则是亲密，还有一个副产物是留白。
性质相同或相似的元素，我们会让它们看起来离的更近，关系更亲密。亲密成就分类，分类能化繁为简。
最后说下重复。
设计追求一致性，一致性主要靠重复来实现。被大量“重复”的元素，比如这篇文章里的字体大小和字体颜色，既保证了一致性，又提高了效率。
基础知识主要包括：手绘、颜色、版式设计、字体设计、品牌设计、动效设计、插画设计等专业知识。
UI 设计师可能不用画卡通人物或插画，但一定会画图标和 logo，这些也会用到手绘。作为造型基本功，需要掌握一定手绘技能。
颜色方面，最重要的是能够很好感受和理解颜色传达出来的感觉，也即颜色的“精神之美”，这块主要依赖审美和练习。
配色方面，推荐软件里的 HSB（色相、饱和度和亮度） 模式，这种模式很好理解，也方便调色。另外还强烈推荐从照片中吸取颜色，因为照片往往会和“生活”、“自然”有一定关联，“生活”和“自然”是非常重要的素材和灵感来源。从色卡中选择颜色也是一个不错的选择。
版式设计就像是选秀节目中练习生的舞台表演，考验的是唱跳、表情管理、舞台魅力、临场应变等综合实力。
“活学活用”环节，会结合例子分享版式设计。
字体设计、品牌设计、动效设计、插画设计等方面，个人经验不多，就不分享了。文末会附一份推荐书单，囊括基本原则和部分基础知识。
风格设定，即上篇提到的“精确描述”，是在动手设计之前，先探索出合适的风格，并把它精确描述出来。
好的开始是成功的一半。风格设定是一个开始，极其重要。如果风格设定只做到 60 分，稍微打点折扣的执行结果就是不及格。所以，如果要把设计做到 85 分，风格设定一般要做到 90 分。
风格设定犹如在茫茫大海中行船，首要目标是把握方向，核心诉求是精准。海上并无现成道路和导航可循，只能依靠繁琐而严谨的推理和计算。
风格设定的次要目标是划一个既清晰界定风格、又清晰指明“发挥范围”的“圆圈”，核心诉求是周密。因为需要清楚知道“圆圈”以内代表什么，“圆圈”以外代表什么。
在“精准”和“周密”上同时做到优良，风格设定才能做到优良。
既精准又周密的风格设定，通常无法一蹴而就：“风格设定”阶段一般只能做到七成，剩下三成需要在设计过程中继续探索和打磨。下一大段会结合案例分享具体方法。
风格把控有两层含义，一是实现当初设定的风格，二是在实现的基础上做到统一和规范。
只要严格在“圆圈”里发挥，实现当初设定的风格并不难。那做到统一和规范难吗？往难了说就是需要做大量琐碎工作：以联系的眼光看待所有设计元素，并把它们分类规整好，注意分类不宜过多，同时分类逻辑上不能出现明显问题。往简单了说就是大量复用已有的设计样式。
风格把控就是在划定的“发挥范围”内，利用设计知识和经验，以规范的方式实现规划好的风格。
活学活用作为四类理性的共同核心，最典型的应用场景是版式设计。
活学活用有两个要点：正反结合，风格第一。
所谓正反结合，是指设计知识既能正着用，也能反着用。最常见的例子是对齐原则，大部分时候是正着用，但如果想要营造活泼的感觉，也会反着用：故意打破对齐原则。
除了对齐原则，其它设计知识，比如重复原则，也可以反着用。
本文配图就是一个例子：图片左上角、右上角和右下角分别散布着装饰元素（横线、圆环）和 logo，在装饰元素的出现次数上，没有用重复原则。过年家里挂灯笼一般至少挂两个，同一装饰元素一般至少出现两次，以达到一种和谐和较为热闹的装饰效果。
我在装饰元素的出现次数上没有用重复原则，而在出现位置（相似位置）、元素大小（相似大小）和元素颜色（相似颜色）上用了重复原则，同样达到了和谐效果。之所以没在装饰元素的出现次数上用重复原则，是想放一个隐喻在这里。
所谓风格第一，是指设计风格永远第一，设计知识永远第二。知识服务风格，切不可重知识轻风格。
《倚天屠龙记》中，张三丰教张无忌练习太极剑时，要他忘记剑招，只记剑意。某种程度上，版式设计也要将“剑意”放在第一位，“剑招”服务“剑意”。
对比原则也有反着用的时候。有一条关于对比的知识：对比要果断，若不同，就彻底不同。这条知识能解释百事可乐 logo 里红色与蓝色的强烈对比，但解释不了山本耀司旗下大部分服装那千篇一律的黑色——单色，无对比。
设计最重要的是感染力，感染力主要来自个性、态度、价值观这些风格层面的东西，而非设计知识这些技法层面的东西。
当一个设计，技法高超而风格不足时，感染力和魅力就会不足，这也是设计师经常会犯的错误，大家需要注意。
可以简单分成三步：规划，成形，细化。下面结合微信 Redesign 这个案例来说明。
设定风格，用到的方法姑且称之为“红绿灯”法。“红绿灯”法借鉴并改良了我在网上看到的一种“红黄绿卡片法”（在红、黄、绿三种颜色的卡片上写下不同的设计关键词），并和“情绪板”法有相似之处：都包含关键词定位和图片参考两部分。
先说关键词定位，共有两步。
第一步类似头脑风暴，结合产品属性、用户属性、市场情况、个人喜好等因素，把能想到的设计关键词全部写下来。合适的不合适的都要写，只要想到了就写下来，确保有二三十个。如果关键词数量不够，这个步骤可以多重复几次，直到够了为止。这一步设计师和需求方都要参与进来，在提供关键词上双方是平等关系。
这个微信 Redesign 是个具有探索性质的小练习项目，基于微信 7.0，有两个目的：首先保留原有交互体验和品牌识别度，其次在视觉上更年轻、更流行。可以通俗理解成：一款微信“皮肤”，主要给年轻用户和赶新潮的中老年用户用。
结合产品属性（社交类、工具类、内容类）、用户属性（年轻用户为主）、市场情况、个人喜好这些因素，这一步想到的关键词如下图所示。
第二步是归类，就是把第一步产生的所有关键词归成“红黄绿”三类。如果关键词不够，还可以再补充。这一步依然是需求方和设计师共同参与，但需要设计师来主导。
红色关键词代表不能踩的红线：不能这样做；黄色关键词代表黄灯警告：这样做不太合适；绿色关键词代表畅通无阻：应该这样做。
需要注意的是，绿色关键词最好控制在 3-4 个之间，如果超过 4 个，就需要分成主绿关键词和次绿关键词，主绿关键词依然要控制在 3-4 个之间。这样做有两个考量，一是确保简单和重点突出，二是也更容易实现。
回到第一步的关键词上来。设计中当然可以用“拟人”、“隐喻”等手法，所以“拟人”这个关键词显得意义不大，故删去。“温润”和“亲和”，“老少皆宜”和“大众”在语义上都存在一定的重复，所以删去后者。删除这类不合适的关键词后，剩余关键词就按“红绿灯”法归类，归类后情况如下。
（微信 Redesign 之按“红绿灯”法归类后的设计关键词）
关键词定位已就绪，再来找参考图片。
可供参考的图片有两大类：照片和 UI 界面。UI 界面也有两类：线上作品（真实项目、练习作品等）和上线作品。
做 UI 设计，参考什么样的图片？个人建议，做什么类型的设计，就重点参考什么类型的图片。比如 UI 界面就重点参考 UI 界面，banner 就重点参考 banner。
UI 界面的设计，个人喜欢重点参考知名产品的上线作品。单从视觉角度来说，上线作品的质量可能比不过一些线上练习作品。但是已经上线的知名产品的 UI 设计，其风格的形成往往都会经过很多推敲，会有很多比较成熟的设计思路在里面。
参考别人的设计，最重要的是参考设计思路，其次才是参考表现形式。这种设计思路，有时候能从网上找到，但更多时候靠自己推测。
微信 Redesign，根据“很多年轻人在用，且风格比较流行”这条主线，找来了 QQ、抖音、B 站、小红书、陌陌、Soul、腾讯视频、爱奇艺等产品的截图。这些产品的截图，看完一圈后，就会面临一个问题：以图标为例，这几个产品的图标，风格各异，但基本都具备“年轻”和“流行”的特点，那应该参考哪一个？
这时就要求助关键词定位。除了“年轻”和“流行”，主绿关键词还有一个“轻微老少皆宜”。最符合“轻微老少皆宜”的是爱奇艺和腾讯视频：很多老人和小孩也会用这两个 App 看视频，网上公开的数据也能佐证这一点，所以它们的设计一定会照顾中老年用户的审美。
最后，出于个人偏好，我选择重点参考爱奇艺的图标风格，具体而言就是：深浅双色、较粗(1.5pt)描边、圆润风格。
红黄绿三色关键词及重点参考图片就绪后，就可以动手设计。
我一般会把界面设计粗略分成三大部分：版式风格、元素风格、元素大小，元素为图标、图片、按钮等，然后去一一实现。
先说版式风格。
用的主要绿色关键词是“更流行”和“更年轻”。“更流行”包括：更大字号的页面标题、尽可能用留白代替分割线和卡片的“无界”风格、圆形头像、更多留白更多舒适、等等。“更年轻”包括：更圆润的搜索框、输入框和图标、更年轻更具活力的配色、等等。
再说元素风格之图标风格。
图标主要参考爱奇艺 App：其一，底部导航和发现页的图标都是深浅双色加较粗的描边；其二，除了更圆润以外，部分图标还变 Q 了。
最后说元素大小。
以这个小项目为例，最主要的元素大小是图标大小和字体大小，它们会影响整个设计的感觉。通常情况，元素越小，给人感觉越精致、越高端，此其一；其二，可能是年轻人和老年人视力存在差别的原因，越小的元素往往代表年轻人的审美，反之则代表老年人的审美。
元素大小主要运用的绿色关键词是“轻微老少皆宜”。也就是说，需要在年轻人和中老年人的审美中找到一个平衡，所以元素大小基本直接参考了微信 7.0 的设计，个别地方做了微调。
最后，出来的效果如下图所示。
这份设计我发在了网上，部分网友留言说看着不够好，不太舒服，有一个表达的比较具体——“虽然用了大面积留白，却让人感到紧迫...”。
基于网友的留言，我仔细审视了这个设计，最后发现问题主要出在页面（发现页为例）左右两侧：留白过小。
当初之所以这么设计，是想通过页面左右两侧较少的留白制造一种内容将要撑破屏幕的感觉，从而营造一种活泼的感觉。注意，彼时“活泼”还没出现在“黄色”关键词里，上文两张关于关键词的图都省略了中间探索和优化的过程。
很多网友之所以没有感受到活泼而只是觉得不太舒服，至少有两个原因：第一，整个设计的基调是简约、清爽，有一定的年轻感和流行感，但没有太明显的活泼感，硬往里面某个地方塞“活泼感”并不和谐，大家也难以感受到；第二，单纯就“活泼感”而言，做的依然不到位，比如图标与右侧文字的留白，可以比图标与左侧边界的留白大，方能更好彰显活泼与活力。
考虑到“轻微老少皆宜”这个绿色关键词及微信主要是工具型和内容型产品，“活泼感”用在这里并不十分合适，于是放弃，并将“活泼”归为“黄色”关键词。此处留白的目的就回归其本职工作：整体和谐与舒服。于是就把留白相应调大了。
另外一个优化的点是“眼睛”的形状：微信图标、看一看图标、表情图标、朋友圈里将点赞和评论折叠起来的图标都有一双“眼睛”，这双“眼睛”起初是竖着的椭圆形，很萌，也比较低龄化。为了尽可能的“轻微老少皆宜”，这里统一把“眼睛”由竖着的椭圆形改成了圆形，弱化了“萌”和“低龄化”的感觉。
还有一块是颜色上，拍摄视频动态的图标有用到蓝紫色。这个紫色基本符合“更年轻”、“更流行”，但不太符合“轻微老少皆宜”，所以最后放弃了紫色，保留了蓝色。
遵循主绿关键词里的“轻微老少皆宜”，其它优化的点有：微信图标尖角处的圆角调小，删除启动页与黑色"WeChat"字形成对比的绿色圆点。另外还有一些视觉层面美观、和谐、舒适度的优化，比如颜色、留白、圆角大小、字体大小方面的微调。
优化后的微信 Redesign，整体效果如下图所示。
凡事预则立，不预则废。UI 设计如何做到理性，最核心的是设计风格，规划、成形和细化都紧密围绕设计风格展开。
最后，尝试总结下“红绿灯”法的优势，主要有四点：精确、周密、稳妥、高效。
关于设计风格，传统规划方法一般只有三四个“绿色”关键词。
“红绿灯”法拥有“红灯”、“黄灯”和“绿灯”三种颜色的关键词，从而确保大方向更准确。“红绿灯”法会产生20个以上的红黄绿关键词，从而确保划出来的“发挥范围”更周密，极少有疏漏。
在“成形”这个设计环节，一旦踩到“红线”和“黄线”，规划好的红黄绿关键词都会马上发出警报，从而大大降低“违规踩线”行为的发生次数，确保设计执行环节的稳当可靠。
“红绿灯”法通俗易懂门槛低，需求方可以较为深度参与“规划”环节。需求方在“规划”环节的深度参与，理论上可以降低后期的返工和修改次数，从而确保整个设计过程的高效。同时理论上也能够提高设计师和需求方双方合作的愉快程度。
UI 设计，始于理性，但无法止步于理性，还需要超越理性。注意，这里的理性，仅指设计知识的相关理性。
超越理性主要有两点：直觉，其它知识。
直觉是指一种能够快速感受和评估设计优劣的感觉。良好的直觉往往快而准。
感知和评价别人的设计时，用到的几乎全部是直觉。审视自己的设计时，也离不开直觉。
在审视自己的 UI 设计时，直觉主要发挥两个作用：第一，囿于知识储备或表达能力，有些地方就是解释不清，这个时候就要靠直觉去感受去判断；第二，直觉往往会作为检视设计的最后一道关卡，也是最重要的一道关卡。
直觉来自哪里？
个人观察是，直觉往往和审美正相关。比如一个设计师，他掌握的设计知识有限，经验有限，对自我的要求也不高，最终的作品往往不出彩。但如果他审美好的话，往往能够分辨出不同设计方案之间孰优孰劣。
如果你想就设计稿征求别人的意见，请去找那些审美好的人。
其它知识是指设计知识以外的所有其它知识。比如 iPhone 上删除应用前应用图标的抖动，其灵感应该来自生活中的摇头求饶或吓得发抖，抖动的幅度和频率则需要利用物理学和数学方面的知识。
优秀的设计，一定会从生活中汲取大量灵感，并广泛利用社会类、人文类和理工类学科的知识。就拿数学来说，在好的设计中，一定是个常客：因为你需要不停的按计算器，从而计算不同设计元素之间的比例关系和各自的大小。
汝欲学诗，功夫在诗外。遣词造句这些文字技巧只能是写诗的基础，而非关键。写诗的关键在于你对生活、对世事的积累和感悟，在于你的思想是否深刻，情怀是否充足。
写诗如此，做设计亦如此。设计知识只是做设计的基础，而非关键。做设计的关键在于“其它知识”。“其它知识”非本文重点，就不展开了。
UI 设计里的理性，主要是各类设计知识。理性的核心在于活学活用各类设计知识。
理性严谨的做 UI 设计，可以简单分成三步：规划，成形，细化。好的开始是成功的一半，一个高质量的规划显得尤为必要。
用“红绿灯”法做规划，并指导成形和细化工作，会更精准、周密、稳妥和高效。
UI 设计，是七分理性，三分直觉。审美越好，直觉越准。
优秀的 UI 设计，一定会从生活中汲取大量灵感，并广泛利用设计以外学科的知识。
推荐书单
[美]Robin Williams《写给大家看的设计书》
[日]佐佐木刚士《版式设计原理》
[日]伊达千代《色彩设计的原理》
[日]小林章《西文字体1、2》
左佐《设计师的自我修养》
左佐《治字百方》
因为智能手机的普及，用PC浏览的网站关注度正在下降。但是，托B2B数字营销的福。PC网站今后也变成战略中心。即使在B2C的领域，PC网站也是不可或缺。
对于在硬件方面没有太大变化PC的网页设计来说，也有技术被固定化的印象，实际上现在也正在接受时代的潮流而发生着变化。特别是下面那样的环境变化，也给与PC网站的UI设计带来很大的影响。
•显示设备的多用化。
•智能手机应用的普及化
•电子设备触摸屏的普及
如果迎合趋势将会取得成功不是吗？这个基础就是抓住用户动向的变化，有必要完全理解这一变化。因此这篇文章是PC网页 UI设计的最新动向，基于那些背景下的推测汇总。
1.Big UI / low Density / Long Page的潮流
举例说曾经的PC网站有很多是在有限的空间内填入了大量元素的设计。但是现在UI部件变得有：大型化（Big UI）、较低的密度（Low Density）、长页面（Long Page）的倾向。
以前是海外以创意型，初创型为中心网站所采用的设计，进入日本的海外企业和前卫的网页设计师，采用那些理念设计的企业网站，渐渐地在日本也被广泛应用，这个趋势也与扁平化设计相呼应。2013年以后以Big UI / Low Density / Long Page 为基础的设计理念在网站更新中使用增多了。
这样的趋势，不能单单看起来时兴，其有合理的存在理由。在开发的立场，让响应式网站更容易实现。如果在用户的立场来看，更容易浏览、更容易理解、不再迷茫，除了所说的这些以外，让网站更好的利用触摸屏，作为其更大的优点。
近些年不只手写板，笔记本电脑也安装了触屏。对于在没有准备手机网站的情况，在智能手机上，网站的页面也被要求需要有一定程度的浏览。
触摸屏，因为用手指的点击，不能进行精准操作。因此用户界面会变大。元素之间的必需留出充分的空间。如果用户界面变大，密度变低，当然页面中表现元素要少，页面变长，以滚动为前提了。
这篇文章之后要介绍很多趋势，都是从Big UI / Low Density / Long Page的潮流中派生出来的。这不是最时尚的流行，但是现在是最适合用户行为的设计思想。
2.1栏布局
作为Big UI / Low Density / Long Page合适的布局，就是1栏布局。
曾经左右两栏布局的PC网站是UI设计主流。在电子商务网站等有大量信息的网站中，3栏布局也很常见。但是现在去掉左右栏，只焦点于内容部分，1栏布局正在增加。
对于用户，不再有不必要的杂音映入眼帘，集中真正必要的内容。文字更容易阅读，图片被展示的更大。
另一方面，映入眼帘的信息量减少，广告等会变得有些分散。因此，对于用户活动线路的设计，必须要更加谨慎。
另外，在侧边栏设置局部的导航条手法，与其他层级的网站相关，有让用户不再迷茫的突出优点。去掉侧边栏的导航条，让网站的层级降低，尽可能减少菜单，不止限于1页内的布局意味着网站全体的设计方法需要重新考虑。
反过来说，多层级化的前提是与网站的庞大度有关。有很多的1栏布局不能让内容被准确的理解，据此判断需要谨慎使用。
3.中对齐
1栏布局的一个问题是文字换行吧。文字充满整个宽度时候会显的很长，很难保持布局的美观。如果1行的文字数量超过40个字，人们就会觉得难以阅读。不能因为是1栏就什么也都不考虑，宽度被文字占满，是不可避免的。
解决这个问题的一个思路就是中间对齐。说到宽度很宽1栏的布局，中对齐和左对齐如何很好的组合，变成设计的要点。
中对齐的正确使用有一些值得注意的点。首先，必须避免用户的视线忽视中间。例如，如果长文本中对齐，文章的开始点就会因此改变，变得难以阅读。如果使用中对齐，短文章不必要换行，长文章必须左对齐。
还有，接近元素宽度充满的时候，虽然用中对齐，也不能很好的解决。但是,宽度被占满的情况是不存在的，看到中对齐不完整的位置就像悬浮一样。为此，必须要在运用盒子和边缘等下功夫，中对齐才不会出现违和感。
4.固定的顶部和顶部的超薄化
固定的顶部也很普遍。在很多的时候，这里搭载的是导航条。无论能进入页面内哪个位置，都能立即回到主要部分。固定顶部的UI没有侧边导航，当页面较长时，能确保使用的敏捷度。
但是，固定的顶部没必要的时候，会有占据一些空间的缺点。因此，顶部只能加工的变薄。像曾经PC网站的外观那样，采用多段式并且较厚的顶部是很困难的。
这就意味着必须在页面内限定元素。如果元素容纳的多，页面就会变厚，很难被固定化。菜单的数量应该被限定，相对于以前，这方面的意识必须要加强。
5.固定的左边导航
近年可以看到一些布局将导航条设置在左侧。说起来也与曾经2栏布局为主流时代的左导航在构造和功能上有所不同。
画面左边被固定，最近有很多追随滑动的按钮。另外，内容部分基本使用1栏布局，跟随画面宽度的进行伸缩的液态布局被使用的数量也很多。
这样的设计会带来应用程序的操作感。另外，有容易应对多设备的特点。移动端优先的设计，响应式网站和液态布局即是使用PC也能对应多种情况，有采用这样的构造的倾向。
但是，必须注意的是这样新式布局，对于一般的用户有很难留下第一印象的危险性。另外，对于菜单的多层级化的时候，连接和鼠标经过引出下一级菜单的操作是必要的，因此提高了操作的难易度。
从使用能力，全部的构造等固定左导航的缺点来看，有必要搞清导入的妥当性。
6.液态布局
在设备多样化中，画面的分辨率呈现前所未有的变化。以前，宽度符合960~980px就可以解决问题的这个规律变得难以通用。对于分辨率多用化的一个回答就是，符合画面宽度的布局也就是液态布局。
液态布局是，元素和图片不是用像素而是使用%。因此，无论看到什么样的尺寸，分辨率的画面，都会被布局成有一定的平衡。可以解决符合小画面的时候的缺点和符合大画面的时候的缺点。
必须留意的是，对各个页面“最合适化”的布局是不存在的。设想一下各种各样的分辨率的画面，汇集了最少破绽并被认为是有共同的妥协点的布局手法。有些特定的尺寸会感到平衡被打破，有些程度是必须被允许的，意味着会布局成像网页的网页。
未完待续...
出典：http://baigie.me/sogitani/2015/02/pc-site-trend-2015/
翻译：SISENdesign
蓝蓝设计的小编 http://www.lanlanwork.com