用户越接近里程碑（例如完成任务、达到目标等），他们就越快地朝着目标努力
心理学家曾经做过个有趣的实验，把老鼠放入迷宫里面，出口放置老鼠爱吃的甜点，结果发现，越是接近目标老鼠跑的越快，人类也有这样的现象，还记得我们上大学时都会测跑步时长，每当剩最后几百米时同学们都会疯狂冲刺，这就是所谓的目标梯度效应，越接近目标动机就越强，反之如果让人感觉距离目标很遥远，就很难有动力。
在互联网产品中拼多多就把目标梯度效应应用的非常成功，如果我们在拼多多上购买商品时到结算完成后会弹出一个分享领现金的弹窗，而这个弹窗上的内容展示是通过进度条的模式告诉用户你还差百分之几就能够领现金，当用户看到这种情况时大部分会选择分享，努力的完成最后百分之几，相信大家都收到过父母好友等分享的砍一刀链接，在这个过程中拼多多就通过了物质的刺激，运用目标梯度效应刺激用户产生分享行为，从而达到裂变的目的。
下图中的飞书官网，banner处就使用了梯度效应，告诉用户还需要多久到达目标，不需要用户在进行滚动或者点击，对广告来讲用户在得知目标的时候会耐心等待，从而避免用户直接跳过
当然也会出现弊端，当频繁去利用用户的目标梯度效应时，并不能帮助用户达到目标，久而久之就会对产品失去信任，会损失用户的忠诚度。
它指出计算机与用户的互动速度都不需要双方等待时，效率就会提升。
1979年IBM的，Walter Doherty提出系统响应时间每减少一秒，用户进行下一次的操作思考就会降低，这种现象与个人注意力的持续时间线相关，在1979年之前计算机的处理性还处于相对较慢的阶段平均高响应时长为2s，因此在1979年之前用户普遍认为2s的时间是最有效的时间，而1979年后计算机性能方面迎来提高，系统响应时间降到2s一下。
在1979年IBM公司的Doherty和他的团队通过3年的时间在1982年就《系统响应时间对经济价值影响》的课题进行研究，研究的主体主要以用户操作系后，响应时间作为变量，对多维度产生结果的影响。
结果发现，计算机处理请求所用的时间与用户的响应时间高度相关，即计算机响应时间越短，用户的思考时间就越短，而其中一组研究数据就显示一现象，一旦系统响应时间超过400ms左右时各项指标数据会产生较大的波动，于是IBM公司就此提出研究结果系统响应时间低于400ms效率就会提升。
在产品设计中多尔蒂阈值如何运用，我们要明白400ms是个范围值并不是一定要卡在400ms，而是在响应时间低于400ms范围，我们可以理解为是一个上限，那么有上限就有下限，响应时间并不是越快越好。
IBM在系统响应时间规范中强调了‘过渡时间’概念，虽然越快越好，但是用户在使用产品中需要理解结果和过程，这里可以理解为有效延迟，像我们在做UI中涉及的一些弹窗反馈这类通知形的元素，在做交互时间时对于用户越快越好，像一些轮播banner需要用户手动滑动的时候同样是响应越快越好，如果延迟超过400ms用户就会感知到明显的卡顿不流程。
而《过渡延迟》则需要在一些具有明显目标的场景进行使用，如我们做UI的过程中涉及到的TAB切换，这里则需要刻意的延长时间，目的是帮助用户感受到页面之间的变化，反而会感知上会更加流畅，对于用户而言有助于用户思考：我点了什么、结果是什么。
小场景内：过渡时间100ms左右
中型场景：过渡时间250ms左右
大型场景：过渡时间350ms左右
系统响应时间的目的是进行关键指引，因此并不是越快越好，多尔蒂阈值是一个范围值，而在这个范围内如何利用则需要根据具体的场景、产品目标、用户目标等多维度思考
户的大部分时间都在浏览其他网站或app，因此用户希望你所设计的网站或app能够像他们已知的网站或app一样运作。
雅各布定律是一个描述用户学习的定律，降低用户学习成本要求尽可能依据用户既有经验进行任务和流程设计。
例如在UI设计中我们强调一致性，从大的页面、组件到小的一个按钮元素，我们都要做的样式和交互的统一，这里除了说要保持一致性才去规范页面组件，还有一个就是因为我们要遵循雅各布定律，相似的内容、相似的操作方式能够让用户体验你的产品时更快的适应设计模式。
这里举个我工作中的例子，在去年的时候我帮助团队另一位设计做一个牛客web端的产品改版，由于产品的业务错综复杂，一个网页端承载了招聘、学习、社交、工具等多项业务。而整个产品的设计风格还还存在16年之前，这次做跨时代的改版对于当时的我们而言也是比较棘手的，因为市场上并没有像我们的产品这么业务复杂，每一个业务板块单独来拆解都是一个大的方向，并且竞品也是很多，用户群体来讲分层也是比较严重，像使用招聘业务的用户并不会去社交或者学习刷题。
因此我们当时就想到雅各布定律让用户决定产品的风格，本着这个思路我们去进行用户问卷调研，通过对用户日常使用什么网站的频率次数进行调研，通过对用户日常使用的网站进行统计，找出数量最高的前三位，以此再针对性的调研设计风格和形式，最终确定我们自己的产品风格，这个方法也是当时我们为了避免不同业务的用户群体对新风格的接受程度，最后用户的反馈也是符合我们的预期。
雅各布定律告诉我们在进行设计时，要延续用户已经习惯的认知，其次从产品自身业务出发进行细化，像一些同类型的产品，他们无论从功能还是设计上都大同小异，因为对于用户来讲，用户对这个行业的产品已经具备一定的认知，例如做电商的产品去用户做金融产品的思路来进行设计产品，那对于用户无疑就是增加认知成本。
像下图中的医疗软件，从功能和板式上首屏都高度相似，三个核心功能icon，紧接着是各个科室的入口，然后就是一些内容推荐，而右边的音乐产品又是另一种结构风格，试想一下如果我们目的是在去找医院，结果看到了音乐类产品的布局结构，这就打破了认知，虽然有创新但是在用户认知成本上就会非常大。
最后总结一下，用户会把使用其他产品的习惯转移到另一款相似的产品，我们做设计时金尽可能的避免非必要的创新，这样会让用户更快的适应产品。
霍桑效应是一种理论，它描述了一种反应性，在这种反应性中，个体根据被观察的意识来修改他们行为的一个方面，所以又被称为被“被试效应”。
霍桑是20世纪20年代位于美国芝加哥的一家电工厂，虽然设备先进、福利优越，但是工人们还是不满意，生产效率低下，为了研究这一现象，美国科学院专门进行了工作条件、设计会因素和生产效益关系等系列研究，最后发现是实验中效应，称为霍桑效应。
你是否有过这样的经历你们公司的大boss或者是某位重量级领导人物总是会时不时得“经过”你们办公室，搞得所有人都迅速进入战备状态，当有人要造访你家时，你是否会确保房间处于干净、整洁状态，并且会确保孩子们在客人来访过程中都展示出最佳状态，这些行为都是霍桑效应。
在产品设计时利用霍桑效应就能够激起用户的效率和产品数据，比如产品签到流程，在用户进行累计签到时给予特殊奖励，在连续签到过程中给出鼓励的话术，根据霍桑效应给予人们足够的尊重或者让人们感受参与其中会提升明显的效率，在签到过程中给予鼓励能够让用户感受到尊重，让产品更加人性化。
霍桑效应中讲到从旁人的角度，善意的谎言和夸奖真的可以造就一个，那么在产品设计的维度来思考这句话，我们在设计中是不是可以去不定时的夸奖用户呢，比如下面中keep在新用户进行一项运动结束后，会弹出称成就勋章给予支持鼓励，提升用户自信心和参与感
当用户由于先前投入的资源（时间、精力、金钱等）而继续做某事时，他们会体验到沉没成本效应。
沉没成本，是指已经付出且不可收回的成本，在日常生活中，沉没成本可以是已经花费的金钱、等待的时间甚至是付出的感情等。
比如我们去电影院看电影，过程中发现电影内容过于无聊、枯燥，大多数还是坚持看完，他们内心的想法是钱都花了怎么也要看完，在比如用户购买88元课程，赠送各种辅助服务导师指导、问题答疑、课后作业等服务，对于企业来讲这些赠送的服务就是对冲用户购买88元课程的沉没成本，既利于销售又增加企业的信任感。
而在产品设计中，不同的用户在不同的场景中也都会遇到沉没成本的抉择，帮助用户减少甚至隐去抉择、降低厌恶心理在一定程度上不仅提高用户体验，甚至能提升产品数据。
人们总是会对已知的损失耿耿于怀而造成判断的偏差，这来自于每一个“非理性人”本能性的恐惧，每个人损失厌恶，相对于收益所得往往更在意损失。试想当我们无意中获得一笔百元的收益时，我们因此兴奋的时间可能也仅限于当天甚至更短；而若自己不小心掉落一百元或因为决策失误损失一百元费用时，则将会捶胸顿足好长时间。
在产品设计中运用较多的是电商产品，例如京东的购物车中除了展示商品信息和价格外还会把赠品铺列出来，如果是多件商品，还会帮助用户计算好预计可节省多少钱，这些赠品和节省的钱都是沉没成本，用来刺激用户进行下单消费，提高平台的活跃度。
除此之外社交产品中也可以在情感方面减少用户的损失厌恶感，例如在一些直播产品中当用户进入直播间在聊天区域会通知主播，而同一时间用户退出直播间则不会提示，这个过程主播的感知几乎为零，不通过仔细对比很难发现，这样的手段对于产品而言能让主播在直播的过程中增加积极性，避免情绪上低落的表现，同时也能够帮助产品提升信任度。
上面说的是正向的沉没成本，而反向成本效应也可以帮助产品带来信任感，增加用户记忆提升用户增长，如下图中的京东的商品页面，用户下单后并不直接扣款，当7天过后用户没用进行售后退货等行为，平台将自动扣除，
在这7天内用户可以进行随意退款。
其实很简单，心理学目的是了解用户真实的想法，希望设计师在注重页面美感的同时也要注重用户的使用，做产品设计最终目的是为了给公司带来价值，给公司带来价值的前提是要给用户带来价值，这就需要我们去了解心理学当然不需要精通，每个心理学如果要去吃透他，需要耗费非常大的精力，对于设计带来的帮助不成正比，所以只需要了解各个心理学法则在产品中如何应用就OK了。
本次继续分享10个心理学的知识，将从心理学的背景定义、重点解析、设计运用、详细案例4个维度进行深度解析
简述定义：保证用户在使用流程中的高峰处和结尾处保持较高的愉悦体验
简述定义：用户对未完成的事情、被中断的事情记忆更加深刻
简述定义：基础的信息组织原则，主要提升用户获取信息的效率
简述定义：用户会更加珍惜已经获得的服务、物品等
用户同时思考两件事情以上时，思考效率和准确性会下降，做事情难以专注。
用户在使用一个产品流程时的高峰体验和结尾体验。
用峰终法则提升用户在整个产品上或某个功能上的体验，需要先对用户在整个产品上或某个功能上的使用行为与想法进行分析，并绘制出用户的情绪曲线，根据情绪的峰值节点和使用流程的结尾，这两个“关键时刻”，进行体验上的重点打造。
2002年的诺贝尔经济学奖得主、美国心理学家丹尼尔•卡尼曼经过深入研究，发现人们对体验的记忆由两个因素决定，即高峰（无论是正向的还是负向 的）时与结束时的感觉，这就是“峰终定律”。关于峰终定律有这样一个实验：让两组人员听相同时间的强噪音，然后一组停下来，另一组接着再听一段时间的弱噪音，就实际遭遇来讲，后一组比前一组受了更多的折磨，但是听到更长时间噪音的后一组的痛苦指数却要比前一组低很多，原因就是对于两组人员来讲，结束时刻的噪音给他们留下的感受最为深刻，因而他们的痛苦指数主要是由噪音结束时的刺激程度所决定的。在另 外一种情况下，令两组人员听相同时间的噪音，其中一组的噪音强度较高，另 外一组的噪音强度较低，但是其中某一时刻听到了极其刺耳的超强度的噪音， 结果就是，后一组的痛苦指数要高于前一组，尽管就总体而言，后一组所听到 的噪音强度要低许多。
这体现的就是感受过程中的“高峰”一刻的决定作用。依照峰终定律，高峰和结束时的体验主宰了人们这段感受的性质和强弱的 程度，而跟感受的总的比重以及体验时间的长短无关。也就是说，如果在一段 体验的高峰和结尾，体验是愉悦的，那么对整个体验的感受就是愉悦的，即使 这次体验更多的是痛苦或不愉快的感受。
用户根据体验的高峰和结束来判断产品体验是否好坏，并不是根据用户使用产品的每一个节点感受的平均值来判定，我们可以理解为结果比过程重要。
就像我们看电影时，一个电影2小时前1小时都枯燥无味，突然中间有5分钟让你的情绪上升，此时你可能觉得这个电影还行，至少让你达到了情绪高潮，当你继续观看时电影片段又变得枯燥无味，突然最后10分钟和结束时出现了电影彩蛋，并且这10分钟的内容特别符合你的胃口，这时候你就会出现一种“嗯，这个电影不错，结局挺好”这样的心理暗示，此时会发现接近100多分钟的枯燥内容都被你忽略掉了，或者你也记得但是你默认了电影90%的枯燥。
一些app里在用户购买成功后，将已购商品以一种具有仪式感的收藏卡形式展示给用户，给用户惊喜的体验，在盲盒星球内购买盲盒成功后会弹出卡片，把用户获得感拉满，在网易云音乐直播间内如果是新手用户就会弹出新人见面礼，通过视觉的表现形式把氛围拉拉满，当然还有一种反向峰值，当有一些产品进行抽奖时，如果用户未中奖会弹出情感化弹窗，对用户进行安慰降低用户的挫败感。
上面讲的偏向于业务弹窗，还有一种是功能性弹窗， 当用户使用某个产品流程时，这个流程可能通过多个维度才能到达最终的节点，在最后用户完成操作时通过情感化弹窗进行提示，又或者在版本升级时需要引导用户进行更新，使用情感化的表现，能够将产品与用户产生情绪共鸣，增加趣味性，提升体验。
当用户使用产品去完成目标时，突然中间步骤出现网络波动、网络断开等不可抗拒的因素，此时在页面中添加一些情感化设计，会缓解用户焦虑情绪，甚至可以在空状态中添加动效来提升趣味性。
近期在工作中做了一个直播项目，其中的一个功能就涉及到直播抽奖，因为产品奖品比例较多且轮数也多，用户的中奖几率也比较高，所以导致用户在中奖后基本就退出直播间，因此在做设计的过程中为了避免这个问题，我在中间弹窗上做了优化。
通过情感的中奖弹窗形式来强化用户的感知度，在直播过程中提升兴奋感，提升用户观看的直播的欲望。
在讲一个案例，去年我们做一个刷题功能的体验优化，用户在刷题场景下会面对几十道甚至上百道题目，整个过程非常漫长，并且旧版的功能交互上并没有展示总共还有多少题的这个提示，用户在刷题过程中会非常焦虑，为了解决这个问题，通过这三个手段改进，1）我在刷题过程中以进度条的形式去实时告知用户刷题进度，减少用户焦虑，2）用户在最后几题的场景中会添加鼓励话语，强化用户峰值，3）在结果页面为用户展示直观的数据变化，强化用户的满足感，同时激励用户进行持续性刷题。
用户只记得使用过程中体验高的场景和结束时的场景。
无论是在交互还是视觉上我们都可以利用峰终定律帮助用户达到好的使用体验。
蔡格尼克记忆效应（Zeigarnik effect；又称蔡加尼克效应、“契可尼效应”） 是一种记忆效应，指用户在完成一件事的过程中被打断，他会持续关注这件事，记忆更加深刻。
简单理解就是用户对没有完成的事更关注。
该效应由苏联心理学家蔡加尼克在20世纪20年代提出，有一次她在酒馆用餐，遇到了一位记忆力过人的服务生，她不用笔记就能记住所有客人下单的菜肴，奇怪的是当菜肴上齐之后，蔡加尼克再次询问服务生，她竟然完全不记得菜单了，这就是由于她的工作完成之后，紧张状态消失，记忆水平随之下降了。
我们生活中也会遇到相似的场景，考试我们都经历过，在过程中某一道题没答上来，在答后后面的时候脑子里一直会想那道未填的题，而前面填过那么多题，我们却不容易记住。
看综艺大家经常都知道，看到关键节点的时刻总会有广告插入，但是我们又舍不得换台生怕广告结束，错过了什么关键内容，广告商其实就是摸透观众心理，让你又爱又恨的看广告。
生活中还有很多场景，像晚上刷抖音一直想着刷两条就赶紧睡觉，一抬头发现凌晨了...打游戏赢一把就不玩了，但当到了赢一把时一看时间过了好几个小时...小时候买方便面集里面的卡片....
为什么我们会对未完成的工作事项记忆深刻？
假如我们把事项分为三类：1）我们允许其正常完成，2）我们再完成的过程中打断，过一段时间在接着进行，3）在完成的过程中打断，并且不允许完成。
稍加思考其实会发现，正常完成任务后是没有任何心理负担，完成事项的过程中被打断，这时候人的心理的会时刻记忆这件未完成的事项，就像我现在写这篇文章，如果某个段落我没写完去做一些其他事情，我就会时刻想着我文章的小段还没有完成，那么假如我在写文章的过程中，被打断并且不允许我写后续的文章，我的注意力可能就会完全在写文章这件事，我要去想怎么才能继续写，或者怎么才能让我继续写，这恰恰验证了人们对于未完成且无法继续的事项心理负担是最重的。
在一些教育产品或者签到产品中都会有一些进度型的提示，像下面“开言英语”的课程报名页面，在侧面添加了进度条，时刻告知用户当前进度，并且在进度末端提示未到达节点，对用户进行心理暗示，引导完成未来事项。
在新用户注册页面时很多产品会收集用户基本信息，通常会使用分段形式把信息分开，减轻用户心理负担，并且在完成任务时会给用户明确当前进度，同样在一些其他场景例如认证信息场景中，哪怕用户中途因为其他时间被打断，回来后也能够很快的定位到未完成事项。
很多日历产品中会添加代办事项的功能，这个功能就很好的利用了《蔡加尼克效应》有些用户会通过在日历下面添加每天的计划以此来督促自己完成，如果某一天的事项发现没有完成就会有很重心理负担，哪怕到了第二天也会回过头来把错过的事项给完成，像我经常就会使用《滴答清单》来督促自己完成什么事情，如果有哪一天的事项没有在清单上打上勾，我可能好几天都在关注这件事。
前几个月的时候我在公司做了一个新用户注册登录的流程，在过程中我主要是负责UI和UX的工作，在这个过程中就使用到了蔡加尼克效应，当时接到的需求是公司战略目标扩张，需要在移动端更针对性的收集新用户信息以此进行内容推荐，提升用户留存。
在得知业务目标是提升用户留存时，我就思考设计的发力点，通过倒推的方式去一步一步拆解，在这个需求场景内，用户留存取决于内容推荐是否准确，内容推荐准确度取决收集的用户信息是否准确和用户信息填写率，用户填写的准度度需要产品侧通过内容的方式进行发力，而如何让用户信息填写率增长则是设计目标。
设计目标已经很明确了，那么如果去优化呢，当时我是先把旧版的问题给拆解出来。
1、交互上旧版把用户信息都堆积在一个页面上，并且对于业务目标上很多信息是无效的并且还在视觉核心位置，如用户头像、用户昵称等这些信息对于内容推荐没有任何作用。
2、视觉上没有核心聚焦区域，用户进来后会措手不及不知道从哪开始下手填写，并且按钮的样式也不够直观对用户造成不可点击的假象。
首先从交互上开始优化，因为会新增很多信息填写内容，所以为了避免用户在同一个页面看到很多的表单，把交互流程拆解，按照业务维度把表单拆分成多个页面，在每个流程内给用户传达出这个填写是个简单的事情，从而避免用户从第一步就抗拒。
这里面还涉及到【沉没成本效应】当用户在填写第三步四步的时候会因为前面已经填写了那么多信息花费了时间并不想放弃，沉没成本前面几篇文章讲过设计心理学-5种用户体验法则，这里不详细讲了，其次就是【蔡加尼克效应】用户在每个页面看到当前进度的时候就会产生必须完成的暗示，然后这个心理暗示就会持续推动用户完成剩下的内容填写。
后期我们针对旧版和新版的优化做了可用性测试，结果上也非常正向，新版的步骤虽然被拉长了，但是每一个步骤都比较简单用户填写起来没有门槛，所以填写效率上大于旧版，详细过程之前有复盘过一篇文章感兴趣的可以了解一下注册登录可用性流程最后用户的信息填写率也是非常有效的提升。
上线之后数据也是正向增长，当然不止这一个场景才能用到蔡加尼克效应，比如像一些用户成本要求比较高的健身打卡、学习打卡等任务可以使用一些阶段奖励来激励用户持续完成。
五架帽理论简称为LATCH原则，它定义了在好的组织性信息才能提升用户体验，使设计更易于理解、灵活和可维护。
LATCH的概念最初由Richard Saul Wurman在他的设计原则和设计模式中提到，后来在他的《信息架构》的书中重新定义了五架帽概念。
LATCH即是Location位置，Alphabet字母，Time时间，Category类别和Hierarchy视觉层级组成，这五种方式目标都是通过高效的信息呈现来提升用户体验。
理论上讲的是通过位置来组织信息，其实比较好理解，我们可以理解为你本人所在位置是一个坐标点，所有的信息形成都是围绕你的坐标点来组成的。
例如地图软件中你的当前位置不断变换，手机屏幕中不断加载出新的地标建筑，在一些游戏场景，例如绝地求生，随着你的位置变换，不同的建筑环境、人、道具等都会随着在你周围出现，当一些信息组成对用户非常重视时则会优先出现，比如驾驶过程中当前位置不变，地图会优先加载道路信息，其次是建筑信息（网络波动的时候比较明显）。
并且随着VR/元宇宙等技术，基于位置变换组织信息已经是非常重要的一环。
总结：通过位置结合时间能够给用户展示高效率的信息
与字面意思一样，按字母顺序排列信息，当数据量很大时，它是组织信息的最佳方法之一，在产品应用中常见的就是像通讯录、目录等能够快速的定位到信息，通过这种方式延伸出其他场景的排序方式，例如电商产品中的侧边分类，就是利用英文字母的逻辑把商品类别进行分类，在一种就是按照时间的维度进行信息分类。
当信息具有相同性需要排序的时候，使用分类的方式能够最快的提升用户筛选效率，在我们生活我们每个人都有分类的习惯，如电脑桌上会放置一些小物件或电子设备相关的，衣柜里统一都放衣服每一层放不同季节的衣服，每当我们想使用到某件物品时第一时间就能定位到它的位置。
在产品中使用最多的是分类和导航，例如同样的鞋子可以用品牌分类，也可以按照季节分类或者性别分类......音乐可以用流行、摇滚、民谣等等分类......
类别是该理论中比较关键的一环，它定义事物按照分类的方式能够让用户快速的查找信息组织。
上面位置、字母、类别都是提高信息查找效率，视觉层级与字面意思相同，当我们满足基本的查找效率后可以使用不同的视觉层级来凸显重要性。
例如在产品设计中可以从颜色、大小等方式来满足我们想要的层级梯度，让产品/用户的核心价值快速的让用户察觉到。
上面只是对每条规则单独拆出来解析，实际中它们是可以共存的，如位置结合时间能够让用户第一时间看到重要信息，类别结合字母就出现了我们看到的通讯录，类别结合视觉层级能够让分类更加重要等。
五架帽理论最终目的都是为了提升用户使用产品时的信息效率，它的五条设计规则也是在产品设计中的必须要遵守的，为什么说要遵守，因为设计中我们可以仔细回想下，基本上每一个页面的诞生都与这五条规则相关，一但违背，这个页面的可用性或者美观就会有所缺失。
当一个物品用户没有拥有时，对他的价值感相对较低，当用户拥有时会高估和珍惜物品的价值。
心理学家 Daniel Kahneman、Jack Knetsch 和 Richard Thaler 对禀赋效应进行了实验，并在他们 1990 年的论文“禀赋效应和粗略定理的实验检验”中展示了这一概念，这一现象可以用行为金融学中的“损失厌恶”理论来解释，该理论认为一定量的损失给人们带来的效用降低要多过相同的收益给人们带来的效用增加。因此人们在决策过程中对利害的权衡是不均衡的，对“避害”的考虑远大于对“趋利”的考虑。出于对损失的畏惧，人们在出卖商品时往往索要过高的价格。
比如我们过生日收到的礼物，在没有得到这件礼物之前，我们对他的价值或者吸引力往往没那么高，但是当这件礼物通过生日的形式送给你的时候，他就具有一定的意义并且这件礼物是属于你的，假如此时有人花市场价购买你的礼物，内心更多的想法是不舍得卖，因为这件礼物已经属于你了。
讲个自己真实的故事，我自己是对一些财富手串、事业手串等等相关的东西不感兴趣的，哪怕他很便宜我也不会去买，但是有一天女朋友从雍和宫帮我求来一个财富手串并且还是开过光的，以后我就每天带着这个手串形影不离，有一次放在某个地方找不到了，当时我就很焦虑，感觉自己损失了很大一笔钱，这个其实就是禀赋效应作祟，因为这件东西通过很特别的方式才到我手里，我已经认定这就是我的东西了，所以他对我的价值是极其高，哪怕我之前对这种手串不感兴趣。
最常见的产品设计场景中就是分享的场景，例如我们常见的一些分享都是底部弹出一些第三方链接方式，那么想一下这样的方式分享率极低，我们可以利用禀赋效应去强化产品的价值感，在学习产品中把学习数据融入分享页面中提升让用户感受到学习的价值增加分享欲望，在旅游产品中一般都会记录用户的旅游足迹，此时把用户经过的城市以地图的形式融入在分享页面中，激发用户的旅游价值，禀赋效应在分享产品中不止这些玩法，商品收货时、贵重物品分享时等等。
诱导即是向用户赠送免费的东西，通过这种方式提供免费试用服务或者是一些优惠礼包等，当得到免费服务或者优惠时由于禀赋效应用户可能会去进行付费或者深度使用，让用户感受到这是它自己的东西，对产品的价值感加倍。（但是我感觉这种方式效果提升不是很明显，但是确实可以利用这种心理去尝试可能会有意外收获。）
诱发禀赋效应的另一个重要因素是用户的主人翁意识，在一些产品中会有一些个性化的设置，用户可以根据自己的喜好去进行设置，这样可以让用户与产品产生价值联动，比如谷歌浏览器的背景和同步功能就是我一直使用的原因，虽然其他浏览器也有同样的功能，但是在互联网初期谷歌可是用这个功能吸引了不少用户，在比如app中常见的换肤、换色等功能。
有正向的也就有反向的，反向指的就是厌恶效应，人们对自己所拥有的东西更加珍视，所以对于损失所表现出来的厌恶要比获取收益表现出的愉悦强烈得多，我们往往会对所损失的东西更为敏感，有心理学家实验过，股票下跌的损失要用双倍的涨幅才能挽回心理痛苦，在产品中常见的就是会员试用服务，当我们给用户7天或者30天的试用期后，时间一到大部分用户都会选择付费，因为他们默认这些服务已经拥有不愿损失。
情绪和社会会影响一个人的决策，因此根据行为经济学，当我们了解这些因素时，我们可以构建设计来帮助用户做出可能的最佳决策，产品设计师可以通过使用价值赋能、个性化、免费试用等简单方法，利用这种效果来提高产品的留存率和渗透率。
指的是用户同时思考两件事情以上时，思考效率和准确性会下降，做事情难以专注。
我们日常工作的时候，如果好几件待办事情同时需要处理，我们自己也是很难去说专注某一件事完成，做设计师的都知道，在设计时如果被别人打扰很容易打断设计思路，我们应该都经历过好不容易沉浸下来去做某个需求，忽然中间有个紧急的需求插过来让我们完成，当我们把紧急需求完成后，再去做被打断的需求发现思路被打断了，这就是《干扰效应》的影响。
人们在处理事情时大脑会给传递出目标信号，根据人的本能认知进行操作，处理收到的反馈信息，最后在反馈给大脑，当多个事情需要处理时，大脑需要同时传送不同的目标信号，身体的各项部位进行执行，这时候我们往往跟不上大脑信号，因为《想》和《做》是跟人能能力反应相关。
人们处理事情就像电脑运行软件一样，同时运行多个软件时，电脑的效率就会出现发烫、卡顿等问题，人处理多项事情时效率就会变慢，无法专注某一个事情。
看下图中这两组金刚区图标，首先第一组的问题是虽然颜色很丰富，但是没有进行很好的分类，增加用户的思考时间，干扰性太大。
再看第二组金刚区图标，虽然很精致且有食欲，很符合外卖平台的调性，当然有好也会有坏，这么多复杂的图标同时出现，当用户目标很明确的时候，这么多的图标就形成了信息干扰，用户需要配合文字才能减少筛选效率。
下面这组某生鲜的金刚区也是同样的问题，虽然把商品实物图作为信息传达的元素，但商品过于复杂，在移动端屏幕上很难看到细节，这需要用户对商品的认知非常明确，例如一用户来卖水果，如果是第一次使用这个产品可能很难通过图标来找到入口。
我们看下面的美团首页，他的金刚区入口有15个，他们的处理方法在结构上是进行了层级区分，把重要切频率高的5个入口重点突出，使用频率较低的入口弱化，通过层级和减少复杂度避免用户出现迷惑行为。
个人中心是承载功能入口较多的页面，很多功能用户一般很少用到，每个用户的功能使用频率都根据用户习惯而定，在设计上个人中心常见的就是把功能按照维度分类，如设置类、功能类等便于用户查找。
还有一种像站酷这种列表布局也是比较效率的布局方式，这种布局方式按照用户的习惯，由上到下的顺序进行浏览，干净简洁的页面，某种程度是减少了干扰。
先看一张对比图，简单讲下我是如何运用干扰效应进行设计。
这是去年我对我们产品的个人中心页进行改版，左边是旧版页面，旧版页面无论是视觉上还是交互上都不符合用户认知，在功能层面也是紊乱不够简洁，整个改版流程呢分为分析用户目标、问题梳理、针对优化、结果验证。
这里主要讲下如何针对用户目标进行优化，用户目标分两个维度，一是个人中心作为管理内容进行使用，二是通过个人中心查看投递简历的进度，其中投递简历对于产品价值是相对较高。
提一嘴当时的用户是技术类居多，大多是求职、学习目的。
无论是视觉上还是交互上问题都是比较多，并且结构比较混乱，把一些用户不常用且对产品没有价值的功能点放置层级较高，过多的就不写了，总之都是问题。
作者：爱吃猫的鱼___ 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
有效的颜色应用技巧是每个从事视觉合成相关工作的，包括插画家和UI设计师，都必须具备的。随着扁平化设计和material design的普及，具备色彩理论知识变得更加重要。
目前鲜艳的颜色和渐变出现在不同数字产品的用户界面上：从好玩和有趣的到商业应用和网站。然而，关于明亮的颜色对用户体验的影响还有很多讨论。本文对丰富多彩的用户界面设计的优缺点进行了深入的分析。
增加可读性和易读性
我们之前的一篇文章中，介绍了影响配色方案选择的因素。可读性和易读性是设计师考虑色彩运用的基本因素。提醒一下，可读性是指人们阅读文本内容的容易程度，而易读性则定义了用户在特定字体中区分字母的速度。
鲜明的颜色足够的对比度有助于增加可读性和易读性。有对比的布局元素会变得可区分和引人注目。然而，高色彩对比可能并不总是有效。如果文本内容和背景颜色对比度太大，将很难阅读或扫描文本。这就是为什么推荐设计师创建一个温和的对比度，只用高对比度颜色突出元素的原因。
对任何数字产品来说，视觉层次是打造清晰导航和直观交互的核心要素。UI组件就是这样被组织起来的，这样大脑就可以通过这种包括颜色在内的物理差异来区分物体。
颜色有自己的层次结构，这是受用户思维的影响所决定的。有大胆的颜色，如红色和橙色，以及弱的白色和奶油色。明亮的颜色很容易被注意到，所以设计师经常用它们来突出或设置对比度。此外，将一种颜色应用到几个元素上，表示它们在某种程度上是有相关性的。例如，您可以为购买按钮选择红色，以便人们在需要时直观地找到它们。
大脑对大胆的颜色反应强烈，这就是为什么明亮的颜色组合很容易被注意和记住的原因。色彩丰富的用户界面设计，在众多颜色较轻的产品中容易脱颖而出。颜色的选择需要基于目标受众的喜好和市场调查。
此外，如果一个公司拥有明亮的企业颜色应用于商标和品牌项目，那使用同样颜色在其网站或移动应用上也是一个好方法。这种方式连接公司所有的沟通渠道，创造了一致性的视觉解决方案，并且提高了品牌知名度。
为了传达正确的语气、信息和号召用户做出预期的行动，设计师需要知道颜色会影响我们的情绪和行为。我们的大脑会对颜色做出反应，而我们通常不会注意这点。这项名为“颜色心理学”的研究表明，当我们的眼睛感知到一种颜色时，大脑就会向内分泌系统发出信号，释放负责情绪变化的荷尔蒙。
适当选择颜色有助于让用户处于一种促使他们采取行动的心理状态，并设置合适的氛围将正确的信息传递给用户。比如，如果设计师设计了一个与自然或园艺相关的产品的UI，很有可能会选择用绿色和蓝色。通过这种方式，设计将从一开始就与一种产品或服务类型相关联。您可以在我们的文章《颜色对用户行为的影响》中找到对颜色含义的具体描述。
明亮的颜色和渐变，是UI设计中的最流行的趋势。如今，可以在不同类型的数字产品中看到这种运用，而严格的商业风格的限制似乎被抛在了一边。
明亮的渐变色彩在用户界面上可以带来一种现代化感和新鲜的想法。结合最新趋势设计的APP或网站往往引人注目，尽管竞争激烈，仍能吸引用户的注意力。
那些认为颜色能靠直觉和审美随意混合的观念是错误的。如果你想要创造和谐的视觉构图，那么关于颜色如何起作用以及它们如何协作的基本知识是必不可少的。
在UI中应用的颜色越鲜艳，搭配就越困难。为了让用户感到愉悦和舒适，设计师努力将平衡和和谐融入到用户界面设计中。色彩协调是指在设计中以最吸引人、最有效的方式来安排色彩，以供用户感知。和谐的颜色组合有助于对网站或APP获得一个不错的第一印象。颜色理论定义了一些基本的颜色方案，下面这些配色方案被证明是有效的。
单色，色彩和谐是基于一种颜色和它的各种色调。
类似色，该方案适用于颜色轮上相邻的颜色。
互补色，它是在色轮上相互放置的颜色的混合，目的是产生高对比度。
多色互补，这个方案与前一个方案相似，但是它使用了更多的颜色。例如，如果你选择蓝色，你需要取另外两个相邻的颜色，表示黄色和红色。
三元色，它是基于三个独立的颜色，在色轮上是等距的。专业人士建议使用一种颜色作为主调，其他颜色作为辅助。
四色，tetradic配色方案使用四个颜色从车轮是互补的。如果你把选中颜色上的点连起来，它们就形成了矩形。
大胆的颜色可以作为在UI中进行重音的工具，但它也可能成为重音消失的原因。许多鲜明的颜色在一个单一的视觉组成会带来了失去突出元素的风险，因为他们成为一个色彩种制造混乱的一部分。
这就是为什么推荐设计师使用60%-30%-10%的比例。最重要的部分应该是主色调，三分之一的构图采用第二色，10%的部分应该选择有助于形成重音的颜色。这样的比例被认为是令人愉快的，因为它允许逐渐感知所有的视觉元素。
创造数字产品的核心阶段之一是用户研究。定义和分析目标受众，使设计师了解他们对网站或应用程序的期望。年龄、性别和文化会影响潜在用户的喜好。例如，孩子们很喜欢黄色，但当我们长大后，黄色通常看起来不那么有吸引力。男人和女人通常喜欢冷酷的颜色，如蓝色，绿色。不像女人，男人通常喜欢白色、黑色和灰色。
明亮的颜色也是如此。即使您是设计一个有趣的APP，也需要考虑目标受众的具体情况。中年人通常更喜欢轻松的用户界面，他们可能不喜欢屏幕上很重的颜色去分散注意力。
正如我们上面所说，明亮的颜色可以产生大量的对比度，帮助突出重要的UI元素，并提供良好的易读性和可读性。然而，过多的对比度可能会起到不好的效果，尤其是在移动界面上，因为它们的空间有限，可以在不同的环境下使用。
小屏幕、环境光和明亮的字体使对比度高的图像在用户眼中显得很难看。这就是为什么在移动UI设计中使用明亮的颜色需要注意颜色之间的对比度，这样人们在阅读文字时会感到舒服。
颜色是大师手中的一件伟大的工具，和其他任何工具一样，它也有它的优点和缺点。为了有效地使用它，需要考虑它的所有方面，以便能够找到适合设计任务和目标的解决方案。
作者：爱设计的狐狸 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
「尼尔森十大原则」又称为「用户界面设计的10种可用性启发式」，是由雅各布·尼尔森（Jakob Nielsen）提出的10条交互设计一般原则。之所以将其定义为“启发式”，是因为它们是广泛的经验法则，而不是特定的可用性准则。
在官方2019年的描述视频中将原则定义为「十大UX设计试探法」，运用这些原则有助于我们试探设计的边界，探索设计的可能性，千万不要让原则成为束缚我们设计的枷锁。
“保证元素对象，操作选项的可见性，以此降低用户的记忆负荷。”
这个原则直译文过来的话有点拗口，其实就是指尽量减少需要用户记忆的东西，特殊情况下提供可选项让用户在此确认信息。特别是在一些较为长流程的页面流转中，一定要注意上下文的关联性，以此协助用户进行回忆，而不是从头开始记忆。
1. 选项可视性
最常见的运用，将选项以用户最能理解的方式呈现出来，不让用户疑惑。
在平常练习的飞机稿或者一些风格独特的产品中我们经常会看到只使用了icon的tab栏，虽然美观，但是当用户量达到一定程度，且用户属性较多的情况下很容易造成识别上的问题。目前市面上较多的产品还是选择了文字+icon的展示形式，通过文字与图形加深用户的识别，高德则选择了使用表意最为明确的文字。
2. 页面可视性
页面标题也是最为常见的运用形式，产品需要清晰的告知用户目前所处的位置。特别是在一些需要长时间停留，存在操作被打断的界面中标题尤为重要。
目前市面上常见的产品都会在用标题来告知用户当前所处页面，有段时间特别流行类似APP Store这种刻意放大来突出页面标题。值得一提的是，在IOS中如果从一个APP跳转至另一个APP左上角则会出现上一个APP的名称，切点击可以快速返回。如上图中的淘宝页面，我是通过微博点击广告链接后跳转进入的。
3. 交互通用性
只要是用户熟悉的交互形式，用户就不用浪费时间去记忆，即使不用文字说明，也能有效的保证用户的识别。
在文字阅读或者编辑的时候，长按可以拷贝/粘贴，即使不用说明，绝大部分用户也能get到，还有就是预览图片时候，使用手指交换进行缩放。
4. 历史记录
提供最近访问项可以帮助用户恢复他们未完成的任务以及难以回忆的任务。
最常见的莫过于浏览器的历史记录，可以帮助用户回忆寻找某个时间节点的内容，微信的聊天记录划分了更多的维度来帮助用户搜索相应的记录。淘宝浏览商品不稳定性较大，有时用户会因为某个宣传而点进某个商品，通过足迹可以查看浏览记录，这样就不用特地去记店铺名称或者加入收藏夹了。
“用户看不见的加速器（快捷方式）通常可以加快专家用户的交互速度，从而使系统可以同时满足经验不足和经验丰富的用户。允许用户定制频繁的操作。”
系统需要同时适用于新手用户与专家用户，对于新手用户来说，需要尽量降低他们的学习成本，帮助他们快速上手，而对于专家用户来说，他们需要的是快捷以及高效。
1. 千人千面
在注重用户数据分析的今天，很多时候已经不用用户自己手动去设置自己的偏好，产品便能像你所想。
左图的滴答清单是最为常见的为新手用户准备的引导方式，右图支付宝的财富界面，如果是新手用户，那么金刚区下方则展示现金红包，基金推荐等吸新人，如果是基金老用户了，则会展示更加专业的数据字段来帮助用户决策。
2. 重复操作
对于熟悉的产品，一般来说用户更希望一切趋于稳定。
在外卖这种使用频次较高选择项较多的产品中，很大一部分用户不愿意冒着风险尝试新的菜品，或者点餐决策时间较短（比如开会），他们很多时候会选择“再来一单”。
3. 快捷方式
在操作同一款软件时，专家用户的屏幕只有一个预览窗口，而我…恨不得屏幕再大点，塞下所有工具栏。
在各种软件中都会设置快捷键便于专家用户的高效操作，比如专家用户的Photoshop和我的PS。
“对话中不应包含无关紧要或很少需要的信息。对话中每增加一个信息单元都会与相关信息单元竞争，从而降低其相对可见度。”
我们在设计一个页面的时候，如果其中的元素都想突出，最终只会导致没有任何突出的元素。这里可以参考“信噪比”的概念，即相关信息与无关信息的比例，用户的注意力是有限的，降低不必要的视觉噪音，才不会过于分散用户的注意力，提高用户效率。
1. 文字内容
资讯类产品中最为常见，如果一大段文字又臭又长,那么就很容易影响到想要传达给用户的核心思想。
36氪在快讯页面中会将重点资讯标红来突出，此外默认情况下只展示资讯标题，方便用户快速浏览，如果遇到感兴趣的资讯可以再选择展开浏览详细信息。
2. 视觉元素
利用这个原理，现在的产品会在一些视觉元素处理上做出区分，不仅能引导用户快速完成预设的操作路径，且对产品本身业务也是相当有利。
淘宝的结算页面中，为了促使用户剁手不受干扰，会将付款btn与其他做高反差处理，同理Airbnb在首页中将搜索房源作同样的的处理，只要促使用户搜索了，那就提高了剁手的转化率。
“错误信息应该使用简单的语言表示，准确指示问题并建设性地提出解决方案。”
原文中特地强调不要用代码去表示错误信息，即用用户能够理解的，通俗的，接地气的词汇，千万不要用一些专业性术语。用语尽量礼貌，不要责怪用户，让他们觉得自己是个傻逼，这样很容易让他们产生挫败感。
得道在使用手机号登录的时候手机号少输入了一位，以至于登录btn一直无法点击，虽然诊断了错误，但是没有明确的告知用户错在哪。Behance在这方面就显得更为完善，会实时判断状态，并且实时告知原因，协助用户进行改正。
“即使可以在没有文档的情况下使用系统会更好，但可能仍需要提供帮助和文档。任何此类信息都应该易于搜索，着眼于用户的任务，列出要执行的具体步骤，并且信息量不要太大。”
每个用户的背景都有所不同，所以很难确保所有用户都能畅通无阻的使用自己的产品。无论什么类型的产品，都尽量给用户提供一个帮助的途径，对于那些只需要一句话就能概括的，可以考虑在附近进行简短的说明，而对于需要复杂说明的，最好统一一个帮助入口，且放置于用户易于找到的位置。
在IOS的设置中，会在一些设置项下添加简要的说明，以此来帮助用户更好的理解。印象笔记与普遍的产品一样，在菜单栏上有帮助的入口，而且提供精准的搜索功能，帮助用户更快的解决有可能遇到的问题。
作者：CE青年 来源：站酷
蓝蓝设计建立了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端系统当中，最可能遇见的就是你给用户设计的路径但是其实用户根本没有往你想的方向去操作。我们系统最开始给用户设计好了很多功能点，但是用户对于这个点的认知成本实在过低，也导致了后面系统功能点很多都被埋没。因为在你设计好了一个功能点后，要适当引导用户，解释这个功能的使用场景才不会让你设计的功能被淹没。
作者：CE青年 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
关于树形选择，我们必须先知道它的基础概念，“树” 究竟是什么？我们先来看看树状结构的定义
树状结构其实是作为一种层次结构化的表达方式，它能够将树的抽象出来表达完整的构造关系，为什么叫做树，是因为它更像是一个上下颠倒的树，根部在最顶端，枝叶反而变为下方。
同样在对树状结构的整体命名上，也遵循了与之类似的表达方式：
节点（Node）：是树状结构当中的基本单位，使用节点可以表示 不同数据间的 组成关系（从属关系与并列关系）通常节点会分为几类特殊情况。
1.根节点：整个树状结构的开端被称为根节点。一个树状结构一定只有一个根，在思维导图中，根节点就代表着它的开端，用于延展出更多的树状结构。不过在目前的树形选择当中，因为对易用性的要求，通常会隐藏根节点，只展示子节点。而根节点隐藏在 标题、选项文本 当中。
2.子节点：根节点之外的节点被称为子节点。一个树状结构子节点数量是没有具体限制，在树形选择当中是直接展示出来的部分。
3.叶节点：没有连接到其他子节点的节点。叶节点属于一类特殊的子节点，它是整个树状结构的最末端节点，在树形选择当中是一个重要的概念，下面会展开来讲。
分支（Branch）：节点之间的链接，在我们树形选择当中，分支的线条可以选择显隐。其搭配的使用方式也有所不同
同时我们还会用到节点的几个基础的概念：
节点层级：指当前节点所在的层级，比如根节点为第一层级，根的子节点为第二层级，以此类推；
节点高度：对于某一节点的高度，便是该节点下所有叶节点从上到下的个数；
节点深度：指该节点到根节点的唯一路径长度，深度与层级较为类似。
树状结构究竟出现在生活中的什么地方呢？树状结构对于我们又有什么用呢？大家可能理解上会觉得很枯燥，我给大家举一个例子：
回忆一下我们小学使用字典时的场景，首先我们是先通过声母，去确定这个汉字的大概的页数范围，然后通过韵母去确定这个汉字的详细位置，最后通过音调找到想要寻找的汉字：
其实字典的设计，便是一个典型的树形结构。而在 B端系统中我们常见的公司组织架构、省 市 县 地址选择、在线教育的班级结构 等等，这些都是使用了完整的树形结构。
采用树形可以快速进行结构化的表达，其目的是为了用户能够快速地增删改查，想要更多了解结构化表达的同学推荐大家看一本书《金字塔原理》，里面讲了非常多的逻辑化思维、表达的方法与内容，内容比较多，而这种思维其实在我们工作生活中都能够用到。
1.层级缩进
为了将树的整个结构完整的表达出来，会使用层级缩进的方式进行区分，通常会使用 8px 对下一级节点进行缩进，这样能够表达更为完整的层级关系。
这里要注意，如果想要更为强调树形选择的层级关系或者树形内容本身就比较多的情况下，可以见解 Coding 编辑器的思路，即：将缩进内容使用“分支线”进行表达，更明确清晰。 这里使用层级线后，折叠图标也会有所不同，下面有明确解释。
2.折叠图标（节点按钮）
主要是将节点下的所有树叶与子节点进行展示，在整个树的结构中，折叠图标一般分为两种：三角折叠、方形折叠
三角折叠：为页面层级较少时使用。因为在较少的层级下，用户不用特意去思考当前节点所在层级究竟在哪。
方形折叠： 更多与页面层级线进行配合使用，通过层级缩进，将页面层级线标识清楚，能够更好的在多层级情况下进行合理区分。
3.选择控件
整个树形结构依旧是在选择录入框架下，分为单选和多选。因此需要对其类型有所展示，特别是在多选的场景下，一定要标明它的类型，方便用户进行理解使用。
通常这个控件可以在单选的时候进行隐藏，这里先按下不表，我在树形选择的类型当中深入给同学们进行分析理解。
4.选项文本
注意字数限制、超出后如何处理即可，我就不做过多介绍。
在讲树形选择之前，我先为大家讲解关于与其相关的同类型产品，为了方便大家的记忆，我选择出了两类不同的组件进行对比，感兴趣的同学可以关注“CE青年” 后台回复树形对比进行查看。我通过视频的形式为大家进行了讲解，相信大家在看完之后一定会有所收获。
单选树只能选择叶节点，也就是需要将每个树展开过后才能进行选择。
它是一个较为传统的选择方式，因为它的选择热区较小并且理解成本较高，因此这种方式不太满足现如今对于B端产品效率提升方面的要求，并且要求十分特殊，因此使用较少，现多以单选节点树为主。
单选节点树与单选树最大的区别在于其能够选择子节点，这样可快速选择该子节点以及其各种叶节点。
同时传统的单选节点树中是采取单选按钮的方式，随着对B端要求的不断提高，并且在树的功能越发的复杂过后，几乎取消了 单选按钮 的形式，取而代之的是将整个 文本标签 作为选择的热区，用户点击过后即可进行选择。
因此在树形选择当中，逐渐将单选节点树演变成由两部分热区所组成的一个控件：
在左侧，主要以树类型的展开折叠操作，热区通常就是图标折叠图标这一部分；
在右侧，以选择该选项、节点的操作为主，热区范围以整个选项文本作为基础，进行延展即可。
这里还是提示以下新读者，这类选择一定要进行 Hover 状态处理，不然用户无法根据光标的变化判断是否可点击，当然老读者跳过就行～
大家在对比单选与多选时会发现，为什么不会存在多选树？不存在只选择选项的多选呢？
思考时间又到了，别忘下划，自己先想想呢～
虽然在理论上会存在多选树的情况，但是它存在的价值比较诡异。首先在树的节点当中，我选择一个子节点就是选择该节点下的所有。因此可以说是选择了一个节点；或者说它选择了该节点下的多个选项，因此在实际情况中这类场景过于的少，更多会用多选节点树进行代替。
当然，多选节点树与单选节点树在结构上是十分接近的，就是将复选框展示出来，方便大家进行选择。考虑到大家经验不足，建议这里复选框放在折叠图标前侧，原因有二：
在树形选择后续的拓展当中，经常会遇到选择增加一些操作功能，比如 新增、删除、复制、粘贴、拖动排序。我看很多设计师最开始因为种种原因将选择组件部分放在后侧，导致之后的操作无法进行更多的拓展，随之崩溃，对树形选择又是一顿乱造～
现有的基础架构基本都是沿用了这类设计，可减少前端同学的工作量，同时也减少他 BUG 的产生。
多选节点树的使用场景非常多，我举一个大家在树形选择中都会犯的例子，希望大家能够多理解其中存在的特殊逻辑：
比如在一个大型上市公司当中，我作为老板会去设定整个“设计部”的权限，并且想要得到的效果是之后有任何新员工都是使用这个权限。如果作为一个新人设计师，很容易就会使用多选节点树，将整个组织架构进行选择，但是这样的选择与用户实际想要的内容是存在较大差异的。
在产品设计中，对于上诉的“设计部”这个概念其实是一个动态数据，即在之后新增到“设计部”的所有员工，我不必再去权限管理中重新配置。我们遇到动态数据的情况时，首先不建议大家采取树形选择，因为首先对于这个概念的理解成本很高，无法通过树形选择这样的方式让用户理解；同时系统对于这类动态数据的情况都建议特殊处理，至于怎么处理，大家可以在评论区讨论，我也会在后续文章当中为大家进行讲解。
易理解：
因为树状结构本身就已经存在很久，早在 DOS 计算机时代就有它的影子，经过长期累月的发展，用户在理解上也会相对更加容易
快浏览：
在数据量特别大的时候，能够根据子节点优先找到自己想要的叶节点，从而提升选择效率，与《选择录入02》当中讲到的 Tab选择十分类似，没看过的同学建议先去看看。
看结构：
结构，能够辅助人们进行快速记忆，从而对整体框架有着更深了解。而树形选择正是有了这种结构能够更为方便的让更多人熟知，从而更快了解业务。
首先对于树形选择本身的控件形式，你就需要去分析其能承载的内容数据量。应该是在什么范围内较为合适。
当数据量过大时一定会出现异步加载、数据分页等诸多情况，因此在设计中，需对这类情况进行设计。
全选功能本身较为简答，无外乎就是一个复选框的事情，但是在上面提到的数据量过大 + 全选的存在，会有些问题还需要大家进行留意。
在树形选择当中，都可以采取键盘操作从而提高效率。基本规则是：
↑键：向上切换同级节点；从第一子节点，顺序返回父节点；
↓键：向下切换同级节点；顺序进入已展开的第一子节点；
←键：关闭当前级别节点；返回上一级父节点；
→键：展开子节点列表；顺序进入已经展开的第一子节点；
回车键：提交当前 foucs 的节点选项；
树形选择是较为常见的一类方式，但由于大家对 基本的树形结构 认识不足，导致对其设计会有许多误区。
作者：CE青年 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
最近看到很多美妆博主都在出什么红黑榜，其实就是在说哪些产品是有问题，不推荐大家使用，有哪些东西是可以安利的好物。
想着B端设计当中，也会存在这一情况。然后我在打开 Ant Design ，浏览完所有的组件，你会发现：“组件当中也会存在红黑榜~”
今天就趁着 618 刚过的这个时间节点，我也来“带带货”，说说B端组件当中的红黑榜
首先我先说一下关于红黑榜的定义
1.使用频率高：也就是这个组件我们平时会频繁的使用
2.黑榜：在使用过程中，会遇到诸多问题，导致无法正常使用
3.红榜：往往会更满足B端产品的实际需求，对于组件有更深的认识
通过我的分享能够给大家有一个初步的认识，当然整个组件都是基于我平时的设计观察与使用，目的也是想和大家分享、避避坑，如果有什么疑惑，欢迎在评论区我们一起讨论~
树形选择在B端系统当中的出现频率非常高，比如我们常见的：表格、表单、各类详情页，只要涉及到 层级结构的选择，都会有它的身影（注意，这里主要说的是树状的选择类组件）但是作为设计师，树形选择在使用的过程当中，会出现很多意想不到问题
尺寸无法确定
因为树形选择本身这个组件的特殊性，它的大小需要通过内容当中的高度与宽度共同决定，而在设计过程当中，高度与宽度究竟为多少就要仔细的考虑
因为在使用树形选择时，需要思考每一个内容的具体尺寸，太高太低都不行
如果太低，展开树形选择就会非常的麻烦；如果太高，则在数据量较少的时候，会给人数据很空
横向空间也是同理，也就造成了在设计时，需要深入思考
树形选择，作为基础组件，在应付复杂的选择需求时，很明显的会感到“力不从心”，无论是从它显示选中时的内容，还是大量的数据时的选择难度，树形在适用性上，都会大大降低，当遇到这类情况时，建议采取更多 “业务组件” 的方式来对选择进行优化
分类表单（也可以叫Tab表单，不过只是代称而已~）在B端产品当中也非常常见，它出现在复杂的表单当中，但是作为设计师，在真正去使用分类表单时，你就会发现会有非常多的问题需要我们去处理
对于用户而言，分类表单不能够完整的查看表单信息，每一个都需要来回切换。也就意味着填写表单的时候，我们不能通过滚动查看所有数据，而是要去点击每一个单独的分类里面，通过分类了解具体的表单内容
同时必填项的提示，在分类表单也非常难以处理，因为其每一个独立，而作为用户，其实是不清楚具体哪一个分类里面有必填项，也会导致填写的效率过于低下（其实会有处理的办法，只是大家对于这类提醒都不太满意）
分类表单在编辑状态时，同样难以处理。当提交完分类表单后，我们还需要考虑数据在详情页里的展示形式，因为表单与详情页的映射关系，这时候在设计时，应该提供某一分类下的数据编辑，还是整个分类表单的数据编辑？
其实这种情况，特别是初级B端设计师，处理起来也是非常棘手
顶部导航非常特殊，虽然在我之前 导航菜单 的文章当中提到过，但在使用顶部导航的过程当中，还是会面临很多问题
顶部导航最大的局限性便是展示数量太低，毕竟在空间布局当中，横向空间与纵向空间的差异其实是非常大的，顶部导航的高度设定不能过高，同时 二级、三级菜单 只能够使用下拉菜单，也就导致在导航菜单的设计当中局限性过大，并且项目一旦发展过后，不容易解决问题
当然，顶部导航并不是一无是处，在许多工具型产品、官网 当中，顶部导航都有着它的一席之地，其实这类形式，更多是以内容为主的网站结构，才会采取顶部导航，也就是上下结构会更加合理
栅格严格意义上来讲不算是组建，但是由于很多设计师 误用、乱用，导致设计师为了栅格而栅格
因为在常见的移动端设计当中，是不存在栅格（主要是移动端横向空间小，使用不频繁）
在桌面端的设计当中，并不是说栅格不好，而是很多时候设计师使用栅格往往会非常盲目，举一个简单的例子，在表格当中是否需要使用栅格？
答案是：“不用使用栅格”，其实这类问题就是目前很多设计师的问题，因为会盲目使用，也就导致了我在做设计的过程当中，出现很多为了栅格而栅格的现象。后面有时间单独总结一下栅格主要运用在哪些地方，希望大家别盲目使用
至于栅格应该如何使用，在我之前的文章当中都有提到，可以自行点击历史记录查看
滑动输入条在很多概念设计当中都会经常出现，特别是在 Dribbble 上的桌面端设计当中，是每一个设计师的标配，但是在实际的B端项目中，特别是桌面端的B端系统当中，滑动输入条是非常不合理的一个组件
因为B端产品当中，大多数的产品都是需要精准录入，并且数据的区间非常大，因此也就造成了滑动输入条，使用起来给用户的感受是非常糟糕的，并且由于大多数用户的预期还是以直接输入为主，这也就造成了现如今B端产品很见到滑动输入条的原因
面包屑导航在实际工作当中经常使用，因为在常见的B端系统当中，导航菜单以及信息结构，一定是非常复杂的（除非你的系统里面就只有一级导航菜单，并且没有其他的页面层级逻辑）
因此通过面包屑导航，能够让我们清晰知道整个页面的信息结构，通过面包屑又因为其 小巧、灵活，无论你是在一个完整大页面当中，又或者是一个小的气泡卡片当中，面包屑都能进行承载，并且它还能够起到 返回 的作用，又能够清晰的展示页面的路径信息，是一个可以一举多得的组件
穿梭框相比大家的不会陌生，在设计B端产品的时候，或多或少都会有所涉及，与此同时，由于穿梭框本身复杂，再加上很多设计师会觉得它占比过大，因此不会去使用
今天安利穿梭框，其实是想安利这一类的穿梭类的组件，你会发现其实很多业务选择类的组件都会通过穿梭框的形式进行演变，比如我们常见的“国家城市选择、部门成员选择” 甚至表格当中的字段显示隐藏设置，这些都是传统的数据选择过后一步一步演变而来，因此这类穿梭框型的数据选择
其实更加体现的是设计师基于目前的组件所进行的优化，而分析它为何这样做，这样做的原因，成为了穿梭框上榜的理由
折叠面板就像一个大的“盒子”，当产品经理在你的身后说着：“这个信息我要放，那个信息也不能落下的时候”，拖出一个折叠面板来解决这个问题
其实在折叠面板的使用过程中，主要是在详情页以及表格当中，因为折叠面板本身可以容纳很多信息，并且能够交代具体的层级关系，因此使用折叠面板能够有更多展示数据的可能性，即插即用，非常方便
在页面当中的任何地方，蹦出一个气泡卡片你都不会感到奇怪。其实气泡卡片我在日常设计当中，经常使用的一个组件，因为它能够容纳下任意的内容，小到一串文字、大到一个视频，都能够在气泡卡片当中进行使用
并且在信息当中，气泡卡片作为一个信息补充的组件，因此在系统当中，需要展示但是又不是那么重要的信息，使用气泡卡片，就会更加的方便
最后一个，自然逃不掉我们的锚点导航。感觉在我的疯狂安利下，越来越多的产品都开始使用锚点导航。因为B端产品必定是复杂且多的信息，自然而然我们在使用的过程当中要更多考虑信息的承载
作者：CE青年 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
按钮是任何用户界面当中（无论是桌面还是移动用户界面）必备的交互元素：甚至可以说，如果页面中没有一个按钮，整个页面设计将是不完整的。在日常生活中，按钮也是随处可见的，一个电灯开关、遥控器按钮，现实生活中按钮反复的出现也可以帮助我们不断去理解屏幕世界中按钮应该如何操作，从而衍生出屏幕世界中的按钮的具体形态
人机交互中最重要的就是把我们从小到大对于这个世界的认识映射到屏幕世界中，比如苹果最为经典ios的滑动解锁
而到了屏幕世界中，控件的设计更应该与物理世界保持相对的一致，这也是按钮设计中，尤为重要的一个环节
最近常问身边的朋友，按钮究竟是什么？
因为对于他们而言，按钮不就是一个操作区域加上文字，没什么特别的，也正因如此，对于按钮的具体构造也不太了解。这篇文章主要是根据自身的工作经验，结合当下对于按钮设计的理解，去分析如何进行更合理的按钮设计
对于每个设计师来说按钮并不陌生，在每天的设计中，都会使用按钮进行页面设计；但又不是每一个设计师都能够将按钮设计好，因为它存在三个方面的复杂性：
使用场景过多：
不是每个场景都需要相同的按钮，比如在登录页当中，登录和注册就是使用不同的按钮形式。这些情况特别在B端产品中，业务在每个步骤中需要突出和强调的点不同，导致设计师很难通过具体场景进行按钮设计；
出现频率太高：
B端产品中，每个页面当中都会有按钮不停的重复，而高频的出现会让我们感到麻木，导致很多设计师都将其忽略；
形式太多：
在我总结的按钮形式当中，一共分为10类，且情况多种多样，很多时候都没有意识到不同形式之间的差距，导致乱用混用
因此一个看上去小小的按钮，其实经常会困扰着我们，如果刚开始没有将按钮进行整体的梳理，那么在你的设计过程中，按钮会经常打断自己的设计思维，为了让大家能够对按钮有更深的理解，我将按钮进行系统的拆解，结合实际案例，能够使按钮更浅显易懂
在文章按钮类型的分析中，我将按钮分为两大类、十小类，将其分类也是为了更好的为大家去分析每一个按钮所涉及到的状态，当我们理解按钮之前，你需要了解它的内部构造
首先，抛出一个问题给大家，下图中，共有几种按钮形式？分别是什么？给大家五秒钟时间思考
如果你对上图的按钮形式并不完全了解，建议你拿好小本本，做好笔记～
在开始讲常见按钮类型前，我们必须要搞清楚一个重要的知识点：按钮状态
按钮状态：可以让用户知道这个按钮当前是在进行哪一种操作，方便帮助用户进行判断
常见的按钮状态分为：正常状态(Normal)、聚焦状态(Focus)、悬停状态(Hover)、激活状态(Active)、加载状态(Loading)、禁用状态(Disabled)，下面分别对这六大状态进行拆解
正常状态 (Normal)：除了其他五种状态外的情况都是正常状态，它是按钮最为常规的状态形式，也是设计师必须设计的一种状态
聚焦状态 (Focus)：主要是用于展示当前电脑光标所在的具体位置。听起来有点玄乎，我来讲他背后的原理，主要是方便一些键盘使用的用户，可以使用Tab键或者方向键来对网页进行访问输入
比如在Mac OS 以及 Windows的使用中，通过点击Tab，便展示出文件的Focus状态
Focus状态是一个非常重要的交互形式，但是很多设计师都会忽略，甚至在很多网站，直接就是将这个样式所去除，导致使用Tab键无法获取聚焦的反馈，比如常见的百度、Google再到各大操作系统都会有这类反馈，去除这类反馈，会导致用户无法用方向键控制光标位置，在很大程度上降低用户使用的可能性
悬停状态 (Hover)：在桌面端的设计当中，即使用户知道它是可以点击的，但是你还是需要设计悬停状态，表明鼠标现在正在按钮上。平板电脑和移动端的设备上用永远不会展示悬停状态，因为你的手指是无法在屏幕上进行悬停的（虽然IPad OS 更新了13.4版本后，会有Hover态的出现，但是是通过鼠标进行操作，因此这里不予以讨论）
激活状态 (Active)：激活状态因为叫法不同，在有的地方也称之为Press状态，它的表现就是将按钮按压下，将颜色变深同时会涉及到内阴影等效果的出现
禁用状态 (Disable)：按钮禁用状态作为最难设计的状态之一，主要在于禁用状态的表现形式以及禁用状态与激活状态之间如何的切换，我具体来分析一下两个难点
难点一：禁用状态在颜色上首先会给人灰色块的感觉，行业里也称之为置灰，在设计上，也需要注意光标移动时需要展示禁用光标，即让前端大哥将Cursor的hover状态更改为not-allowed，你可以优雅的在前端面前装个X（之后会出一期，简单聊聊我与前端如何协作如何装X）
难点二：禁用与激活状态的切换，比如在一个注册页面中，需要姓名与电话必填，当用户没有填写完成姓名与电话时，应该将按钮置灰，提示用户不可以点击，当用户填写完成必填字段后，将禁用按钮转变为激活按钮，提示用户可以点击登录
加载状态/Loading：按钮需要时间进行加载的一种状态，通常会被用户忽略，但是在B端产品中，Loading状态尤为重要，这里有很多细节和小技巧，展开讲篇幅太大，在文中4.3小节（按钮细节）会详细解答
主按钮为页面中按钮区最为核心的操作，在日常场景中，主要按钮一般都为新建、编辑、保存这一类正向的操作，强调页面中最为核心的功能，能够让用户一看到主按钮就明白大致在页面中需要如何操作
但在主按钮的使用中，要遵循以下两个原则：
1.在页面当中，按钮区域的主按钮最好只有一个，否者会对页面的主要功能造成干扰
2.并不是每一个页面都需要有主按钮，不要因为页面缺失主按钮而强行加上。因为在实际使用中，时常遇到按钮之间为平级的关系，强行添加，容易造成页面层级混乱
在主按钮中，按钮状态的设计也会跟随物理世界进行相应的映射，因此在设计时需考虑现实生活中的状态
比如用户的Hover时，一般都将按钮抬起并亮度增加，其目的是为了提示用户可以点击，而用户在按下时，用加黑来表示用户按下的状态，与现实生活中按钮的状态类似，因此按钮状态也应该映射物理世界
次按钮在页面中出现最为频繁，在日常使用中，如果你不太确定使用何种按钮时，那使用它，大概率没有错。因为它运用广泛，出现频率也最高，因此也被人们称为标准按钮
在次按钮的设计形式中，我们团队将设计形式分为两类：
此按钮整体以文字+边框的形式，这类形式在视觉层面上感知较弱，适合几个按钮同时展示，在B端项目中，字线型也是在使用中最为频繁的形式
字面型更偏向表达按钮整体，常见于各类移动端的按钮当中，整体的表达也更适合移动端这类屏幕尺寸较少的设备当中，更符合卡片化设计的思路，反而不太适合桌面端的设计
文字按钮为页面中视觉层级较低的按钮形式，因而可以在页面中大面积的重复使用，文字按钮与链接（Link）基本一致，且没有太多区分，所以在设计上，文字按钮与链接基本相同
文字按钮重复的出现，以表格页面当中的操作列表最为突出，因为表格当中常用的操作最好能够直接展示出来，因此表格中基本都采取文字按钮的形式
图标按钮为页面中控件占比最小的按钮，所以在页面中的使用也是最为高效的。因为没有了文字元素，会导致用户在图标的理解上出现偏差。为了解决这一问题，主要是通过用户在Hover时使用展示Tooltip提示按钮的含义，同时建议在图标按钮的使用上多为高频且易理解的图标
我举一个简单例子：
在桌面端产品中，帮助文档一定是非常重要的一个入口，当用户对页面中的功能有所疑惑时，可以通过此来帮助用户进行理解，通常需要在大多数页面当中展示帮助中心的入口，这时图标按钮就变得最为合适
因此，我们可以得出图标按钮的应用场景通常为：当页面中需要高效的展示一个或几个图标时，同时图标按钮的展示最为频繁时，当同时满足以上两点，使用图标按钮就是一个更优的解决方案
按钮菜单为页面中许多操作的集合，通常是将高频的操作以及一些低频的操作进行整合，组成的按钮菜单。这样既能够减少页面元素的冗杂，同时也能够满足业务对于功能的需求
举个例子，在表格页面当中，B端设计师最常见到的按钮菜单就是新建，这类新建按钮其实是必不可少的，同时业务需要，还需要多个业务按钮进行展示，按钮菜单的出现，帮助用户进行按钮的整理，同时也满足业务需求
这其实是主按钮的一种衍生，通过图标对主按钮的含义进行解释，从而帮助用户提高这个按钮的识别性。如果一个按钮你想比主按钮更加强调，那便可使用在按钮中添加图标，这样既能够强化图标的含义，同时也加深了用户对于按钮的印象
在六个常见按钮形式中，我们根据重要的优先级，给常见按钮进行一个简单的排序：
危险按钮在删除操作中最为常见，通常是为了警告用户，这个数据删除不可恢复，让用户谨慎考虑。在常见的删除操作中，都需要用户进行二次确认，避免用户误操作
当然，在实际业务中，危险按钮不宜过多，如果业务当中无法避免，需要展示多个删除按钮时，推荐采取图标按钮进行展示或者Hover过后将其呼出
幽灵按钮，看它的名字就能想到它的作用：像幽灵一般透明的存在
它没有使用复杂的颜色、样式，而是用线条表示外部轮廓，证明它还是一个按钮。同时内部只用文字展示按钮名称。它只出现在按钮背景复杂的页面当中，比如：渐变色、纹理、动态图片背景的情况下，幽灵按钮能够完美融入到环境当中
而现如今，传统意义上的幽灵按钮已经很少，毕竟在现如今的官网当中，幽灵按钮已经不再流行，更多的是出现在复杂页面的“实心按钮”，而在某种意义上讲，这类按钮才是幽灵按钮现在的状态
在形式上，幽灵按钮和次按钮看来起没有并什么不同，因此会有很多疑惑，那我什么时候用幽灵按钮什么时候用次按钮呢？
首先幽灵按钮是属于特殊按钮体系中，因此它不会受整个按钮体系的束缚，比如我在一个设计系统中，分别定义了常规按钮的尺寸分别是24px、32px、40px，但是我在一个官网落地页当中需要有一个46px的按钮出现，次按钮就完全不合适。其次幽灵按钮边框粗细、字体大小都是和常规按钮体系不同，因此幽灵按钮就和次按钮有所不同
第二个方面在次按钮的设计形式中，不仅仅只有描边按钮这一种形式，因此幽灵按钮与次按钮它们可能会有交集，但是属于两种不同类型的场景，因此也不能将它们混用
在Material Design 出现之初，悬浮按钮受到了很多人的追捧，它也是安卓设计的代名词。主要是用于页面当中最常用的操作，是整个APP中最核心的按钮，能够代表这个产品的核心功能，比如印象笔记的新增笔记（安卓）、滴答清单的新增清单等等...
但沉浸式设计的出现，使得移动端寸土寸金的地方，需要固定一个按钮的情况就变得更加少见
而在B端的设计过程中，逐渐衍生出了B端行业特有的方式
悬浮按钮在B端场景中，主要是帮助用户进行辅助咨询的功能，例如在一些用户需要得到帮助的页面中，可以通过悬浮按钮，使用户的又疑问的页面进行快速提问，帮助用户能够进行快速的跳转，在飞书的应用列表中，其实用户刚开始理解应用列表其实存在一个理解成本，就可以通过悬浮按钮进行展示
行为号召按钮简称：CTA按钮
主要目的是为了号召人们在某些特定的页面中使用此按钮来提高转化，比如立即购买、联系我们、立即订阅等等...
大多数时候，CTA按钮都是成对出现的。“是与否“ 、“登录与注册”、“确认与取消”等。因此，分析清楚CTA按钮后设计出视觉层级合理的页面称为非常重要的点。在设计中，一般会采取渐变色、主题色、主题色的互补色等等，它经常独立出现
在B端软件的场景中，官网是CTA按钮出现最为重要的页面，一般在官网中，使用CTA按钮将用户引导从潜在客户向付费客户进行转变（点击过后一般是一个联系表单进行信息的填写），这也是在B端产品中非常重要的指标：潜客向付费客户转变。可以引导用户进入到下一个阶段，如果CTA按钮设计不好，人们对于官网只是浏览，不会有任何转化
因此，在设计CTA按钮的形式与位置时，需要与产品、设计、运营等共同确定并讨论使用，大家站在不同的立场希望得到一个完美的方案，因为设计出清晰的结构层次将直接引导用户朝着理想的使用路径前进，从而极大提高转化率
在我们日常设计中，常常会遇到一些棘手的文案问题：登陆、登录、确认、确定、发送、发布，在许许多多的工作场景中，犹豫究竟应该在按钮上使用哪种文案，这就需要我们通过具体的案例场景进行展示相应文案
登陆（Land) ：这是网络中错别字最为频繁的用此，很多人都会把登陆放到登录页面中，其实是错的。这个词里的“陆”字，就是陆地的意思，其基本含义只是登上陆地而已，拓展出来还会有“登陆到某一个市场”，但登陆网站的说法是绝对错误的
登录（Login）：这是“登记记录、记载”的含义，我们正常输入账号密码就是为了去记录我们的一个信息，一般为官网登录页
确认（Confirm）：这是带有一些不可逆我操作的提示，一般用于用户配置、选择项等
确定（Yes）：这是询问用户是否进行某项不可逆操作，一般为一个单独的操作
发送（Send）：这是尽快传递对方的聊天消息，一般为即时性的聊天发送
发布（Publish）：这是用于用户填写的观点、意见、文章等反馈信息发布到一些正式场合，如论坛、社区等
这些细节的文案就是帮助用户去理解页面中所传达的真正含义，多将文字放置到场景中，文案也更好的辅佐他们作出抉择
圆角在每一个软件中，随处可见。圆角大小所带来的不仅仅是视觉表现，还更多影响着用户的使用体验以及对于产品而言的整体的认知，如果在开始设计之前，没有对按钮圆角有具体的规划，很容易踩坑，如何设计好圆角，我们来进行系统分析
在下文中我们将按钮的圆角大小，分为以下三类：直角、圆角、半圆
直角：
按钮四角的方向，具有很强烈的引导性，看上去也会更加刺眼，使得在页面当中注意力会减弱。同时，直角在按钮排列当中看上去更加统一，相同的东西在视觉上不太能引起我们的注意
圆角：
相比与直角按钮，在使用圆角的按钮中，视觉上总是给人一种柔和亲近的感觉，当几个圆角按钮进行排列时，能够感受到圆角按钮更容易被点击。因此在使用的按钮中，建议添加圆角的细节元素
为何直角的物体会给人更严肃的感受——每一个人都认为圆角会更好，但是并不是每一个人都能够解答为什么圆角更好
在巴罗神经病学研究所对拐角的科学研究发现，“拐角的感知程度随着角度线性变化。锐角比钝角产生更强的幻觉显着性”。换句话说，拐角越尖，则感觉越亮，拐角越多，越难看
圆角还有另一种解释，是因为现实生活中有圆角的物体会更友好。从小，我们就知道尖角的物体会让人受伤，圆角的物体会更安全。这就是小孩在玩皮球与刀的时候，家长的反应完全不同。
小朋友玩刀会让家长十分的紧张，赶紧让孩子放下；而小朋友玩皮球时，家长则是非常的放心。这激起了神经科学所谓的尖锐边缘“回避反应”。因此，我们倾向于“避免锋利的边缘，因为在自然界中它们可能会构成危险”
通常在移动端场景中，半圆按钮随处可见，移动端手指触摸操作上，对于圆角的影响小之又小；而到了桌面端的场景下，鼠标的使用，半圆按钮就会有所不妥
如果相同面积中，按钮的圆角增大，相应的对于按钮的可操作区域就会随之减小，在同等尺寸下的按钮中，小圆角的按钮明显比大圆角的按钮更容易操作
当然，麻烦事还不仅仅于操作区域，在结合实际业务，我们的按钮常常作为原子（原子设计理论）用来组成为下拉菜单进行联动，半圆按钮在下拉菜单的设计中，也会因为半圆的局限，使下拉菜单的设计会更加困难，同样在设计上，半圆角对于下拉菜单的适配也会相当突兀，因此在考虑这方面设计时，需要你多去思考之后的业务场景
按钮的状态中，Loading状态通常不会对用户进行直接展示，因为大多数情况下，Loading状态就发生在一秒钟以内，但是对于B端场景中有很多重要操作，在长时间等待中不展示loading状态，会导致用户在使用时犯下错误
当按钮响应时间小于1秒时，通常正常反馈即可
当按钮响应时间长于1秒时，我们通常会采取加载动画，减缓用户等待的焦虑感
举个例子：比如一个确认提交的按钮，由于网络或者服务器等原因，需要长时间加载资源，而用户不知道我刚才按下的按钮是否有效，这时用户慌张，想要多按下几次这个按钮，系统就会不停提交数据，最后网络变好时，窗口就会一瞬间疯狂展示，导致用户体验下降
为了防止这类事情的发生，需要在设计师考虑到按钮在加载一秒以后的状态，应当提示用户在网页已经收到请求，正在加载，同时在按钮状态中应该为不可操作状态。同时会给出加载转圈的动画，缓解用户的焦虑
当你完成了第一步的设计后，想想在按钮的状态中，是否更能够帮助用户进行体验上的提升呢？
这也是在面试某大型互联网公司时，被问到过的一个问题～敲黑板
对用户操作的适当反馈是用户界面设计的最基本准则。让用户了解当前状态、位置、是否成功、进度如何，减少不确定性；并引导他们在正确的方向上交互，而不是浪费精力在重复操作上
在Loading的加载过程中，等待焦虑一直是用户想要了解到的，为了缓解类似情况，可以将等待的进度状态进行展示，使的用户在等待的过程中，能够清晰的清楚自己的按钮目前处于何种状态，我大概还需要等待多久，缓解用户在等待过程中的焦虑
以上两个方式均是尼尔森十大原则的内容，能够在按钮Loading状态中，缓解用户在按钮加载过程中、重复提交、等待焦虑的问题，通过一些设计小细节，帮助产品提升用户体验
通过上文对于按钮的解释，大致明白按钮在设计中的作用，接下来我结合一个工作中的实际案例，来看看我们应该如何优化常见按钮在页面当中的设计
项目背景：在桌面端，我们需要对整个导航栏进行设计改版，但其中涉及到对于导航的一个整体优化，主要是由于业务功能发生变化，我们需要在导航栏上增加快捷添加入口和通知中心，来满足导航的后续的功能需求，由于保密协议的原因，就不放自家产品
在桌面端中，浏览模式大致分为两类，F型浏览模式、Z型浏览模式（下方知识拓展会有讲到）
首先，因为导航在整个页面的顶部，结合两种浏览模式在顶部时统一都为从左到右的浏览顺序
因此确定整个导航按钮初步的按钮重要层级排序
我们对于用户的按钮层级有着明显的划分，因为在整个导航右侧，又因为其的特殊性，我们把操作空间分为三部分：
左侧为操作路径最短的区域，因为桌面端的产品需要通过鼠标进行交互操作，而其中移动鼠标的长短直接决定用户是否愿意点击这个按钮，因此，靠左的按钮适合放置用户最常使用的操作
中部为按钮内部区，可以放置一些低频，但是又必须出现在这个区域的按钮操作（比如：帮助中心、通知中心等等...）
右侧为按钮最为重要层级最弱的区域，同时它也有一些特殊性
一般在浏览器的右侧，为用户最容易定位的操作区域，因为靠近边缘导致在用户定位当中能够帮助用户进行快速选择
回到页面中信息层级较高、同时需要精准定位的按钮就会将个人中心放置在最右侧，方便用户进行快速定位
因此我们讲导航当中按钮重要层级进行简单排序，得到下图：
通过亲密性原则，我们将除去左右两侧确定好的按钮之外的按钮进行简单分类，将有关联的按钮进行组合，形成较强的关联性～
视觉调整作为最重要的一步，主要是为了在最后的按钮重要层级上，将一部分按钮突出、一部分按钮弱化，达到我们想要的整个层级效果
通过团队内部讨论，将我们的新增按钮定位CTA按钮，因为它关联到我们每个使用系统的人都会用到，属于最高频的操作按钮，也因此将其突出
F型浏览模式：
是新闻平台、博客等文字为主的网站布局所采取的阅读模式
该阅读模式由尼尔森团队的眼动追踪研究结果从而进行普及，在这个研究中记录了超过200位用户浏览网页时，发现用户的主要阅读行为在许多网站和场景中表现得相当一致。这个阅读模式看起来有点像字母F，因此也被叫做F型浏览模式。
首先用户以水平方向进行阅读，通常是在阅读区域的上半部分
接下来，他们在屏幕左侧垂直浏览，寻找段落开篇几句中感兴趣的内容。当他们找到感兴趣的内容时，他们在第二个水平方向上快速浏览，通常这块内容区比上一个内容区更短小、更简洁。这部分元素形成了F的下半部分
最后，用户在垂直方向上浏览内容的左侧区域
Z型浏览模式
是扫描滚动的网站的典型模式
正如你所期望的，“z”型模式的布局遵循字母Z的形状。“Z”型模式的设计跟踪了人眼扫描页面时的路线——从左到右，从上到下：
首先，人们从左上角到右上角进行扫描，形成一条水平线
接下来，向页面的左下侧扫描，链接成一条对角线
最后，再次向右转，形成第二条水平线
当观众的视角以这种模式移动时，它形成一个虚构的“Z”字形
在实际工作中，经常遇到自己设计的按钮与开发实际还原的按钮差距很大，一些没有经验的设计师会和开发说，你看我设计稿，每一个按钮都要按照设计稿的来，这样设计师与前端开发之间的矛盾就会越来越深。其实在按钮设计的细节中，开发怎么完美的还原，里面还有很多细节
首先要想让开发完全还原你的设计稿，就必须了解开发实现的思维方式，针对它的思维方式进行相应的思考。
又由于Sketch与开发常使用的VScode之间逻辑上存在较大差异，导致设计师设计出来的很多设计稿开发根本无法实现，这也是B端设计师摆在你面前的第一个问题
对你没看错，无法实现，我举一个例子
这是一位同学问我的一个问题，他说我这个按钮为啥实现不了，前端不就是多几个代码去适配我的设计稿就可以了吗？
如果你看了上图也有很多疑问，那就接着看下去～
在按钮当中，通俗的理解Padding就是文字与按钮之间的间距
因为Sketch等软件在按钮的设计中，只有图形位置的概念，没有内间距Padding的概念，因此需要对按钮还原要明确的描述
比如上图，前端同学在开发是就会将Padding设置为24px，所以整个按钮长度便为24px*2+20px（文本宽度）=68px
而为什么说上面的设计规范实现不了，因为对于前端而言，Padding通常都是统一且固定的，只会根据按钮文字长度进行相应的调整，比如我上面举的错误栗子，其实在前端同学面前这类设计是不能够被共用，而且对前端同学项目会变得越来越不能维护，所以按钮设计应该更规划
但是如果真的需要去实现两个文字按钮长度和四个字的一样怎么办，需要去设定按钮的最小宽度
按钮最小宽度的设定一般为4个字文字的长度，假设字体大小为16px，左右的Padding为24px
最小宽度为：88px，因此在按钮的标注中，需要展示最小间距为88px，方便前端进行CSS开发
在我们的sketch中，按钮边框有三种，内边框、居中边框、外边框，默认为居中，但是在前端的CSS代码中没有居中边框，没有居中边框，没有居中边框（重要的事情说三遍），默认为内边框，如果需要调整为外边框，最好能够标注
作者：CE青年 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
信息无障碍，是指任何人在任何情况下都能平等地、方便地、无障碍地获取信息和利用信息。随着互联网覆盖越来越广，对于身体有局限的群体而言，更加迫切通过互联网获取信息，而这就需要互联网产品进行信息无障碍的优化。在我国其受益人群至少包括：8500多万残障人士，2亿多60岁以上的老年人，数量庞大。率先考虑信息无障碍能为产品增加优势而带来更多用户。
如今智能手机掀起了一场无障碍辅助工具的革命，而站在这个关键点的互联网设计师，也要开始行动起来，先从以下这几个容易实现的事情开始着手进行无障碍的优化吧。
对视障用户来说，是用听取读屏语音来了解你设计的界面信息的。读屏软件就像他们了解互联网世界的眼睛，它的原理是直接读出界面里的文字，如果icon按钮未加无障碍标签读屏会读为"无法发音"，那么视障者就无法获取这些信息，自然也就无法使用你设计的功能。
解决的办法是:
1.需要在产品代码中添加无障碍标签(Android :contentDescription ; iOS:accessibilityLabel在对应的开发者文档里很容易找到，可以发给你合作的研发同学)。
2.装饰性icon可隐藏标签不读，提升读屏效率。不建议不做处理也不加标签，那么用户听到的就是“无标签”，这样会让用户以为这里有什么重要信息读不到而感到不安。
3.标签语义简短准确，尽可能使用动词。
4.必要时需要走查焦点顺序，确保不会被错误的焦点顺序误导页面含义。
并且最好由设计师进行语义的标注，因为设计师才是对页面里图形应用最了解的人。避免出现“搜索”被写成“放大镜”、或者是“searchBtn_123”之类的情况。
颜色可以用来区分信息数据的类别和维度，也可以帮助传达情绪等重要信息。然而，世界上有超过8%的男性和0.4%的女性都被色觉障碍的问题困扰。我们通常笼统的称这类人群为“色盲”，他们是典型的识别颜色有问题的群体。
"色彩"的目标是"易于感知"，指的是互联网产品的内容信息的色彩对任何人来说，都应该拥有足够高的辨识度和舒适度，我从以下4个方向进行介绍。
1.更安全的配色
a.色盲人群：
设计师在进行设计配色时应时刻自测，避免明度相似的橙黄绿两两配色和明度相似的红绿配色，因为这样的配色势必会造成色盲用户的可读性问题。并且，红色在红绿色盲眼中并不是一种明亮醒目的颜色。相反红色对他们来说显得非常深，而暗红色则几乎接近黑色。因此色盲人士很难分辨出文章内的深红色的强调字，从而遗漏关键信息（设计时，可利用此插件模拟色盲眼中的颜色：Color Oracle） 。
b.文化差异：
因为色彩在不同国家文化中代表不同含义,所以对于国际用户来说也是存在障碍的。在西方文化里，红色通常用于表示消极趋势，而绿色则表示积极趋势，但在东方文化中却正相反。
c.特殊群体：
临床医学研究表明对于部分自闭症患者来说，高饱和高对比度的颜色，甚至只是黄色都会让他们感到不舒服和不安，因此在自闭症康复中心是不会出现过于对比刺激的颜色的。
另外，老年群体随着年龄的增长，晶状体变黄变浑浊，会选择性的吸收蓝光，从而导致老年人对蓝色的鉴别能力下降明显，如果你的主流用户是老年人，请尽量避免将蓝色运用到重要的按键中去。
2.更强的文本对比度
文本对比度与可读性息息相关，它测量的文本颜色和背景色之间的明度差。WCAG AA对于文本对比度的规范是：4.5:1，若字号够大（>18pt，或粗体>14pt）时，标准可降到3:1。如果满足4.5:1这个标准会让你的页面视觉看起来不那么优雅，可以尝试局部加强可视性的方法：
关于可读性其他需要注意的点：尽量不要在图片上叠加文字，除非你能保证图片背景颜色单一且对比度足够高。
Material Design设计规范建议，需要淡淡的遮罩确保上层文字的可读性；并且不建议极高对比度的文本，因为这样会使一部分视障者看到的字旋转模糊。
3.更多样的视觉变量
颜色是数据可视化中最常用的视觉变量之一。但是对于无法辨别颜色的用户，如果颜色作为的唯一的提示信息，他们可能将无法理解你传达的信息。那么有什么改善的方法呢?
a. 不让颜色成为唯一的视觉变量：除颜色外，我们可以追加图标、纹理或者文字来加以标注。
b.色盲模式：Trello作为一款工具产品，在标注信息时，提供色盲模式可打开和关闭，并用不同纹理加以区别，色盲友好模式是一个很好的范例，它可以有效帮助色盲，又不会妨碍非色盲用户。
c.以明度饱和度为度量：虽然色盲人士对色相的辨识能力较弱，但却对明度、饱和度非常敏感。我们可以使用明度或饱和度区分信息。看这个例子：传统热力图习惯用暖色代表热力高冷色代表热力低，Google Analaytics的热力图采用深蓝色显示热度高的时段、浅蓝色显示热度低的时段，简单有效。
控件可以是按钮、链接、输入框或任何带有事件监听器的HTML元素。控件太小或彼此太靠近可能会给用户带来糟糕的体验问题。
比如对于无法用指尖精确定位的用户（有颤抖疾病的用户），或因年龄而导致灵活性降低的老年用户，都会难以点击过小控件。
为了给用户足够的间距来准确选择控件，Material Design建议至少48×48dp，iOS设计系统将目标热区尺寸最小值定为44 x 44pt，而WCAG对WEB的规范则建议至少44×44px。一个控件可以在视觉上是24 x 24px，但是在所有边上都会有一个额外的填充使它达到44×44px。并且太靠近的控件可能会因误点击而带来挫败感，所以同时还建议控件之间的空间足够远以减少误触。Microsoft给pc的建议是至少有8px的间距，而Material Design推荐的控件至少间隔8dp。我们可根据以上规范来审视自己设计的控件。
1.文字大小：
有视觉障碍的用户可能会把字号调得很大。你需要保证你的设计在大字号的情况下内容不会溢出或排版错乱。做设计的时候，可以使用2倍以上的字体测试你的设计。
在互联网早期，设计了字号在9-14px之间的网页，如今已与20年前不同，浏览器已经可以在任何尺寸设备上使用，小到智能手表大到4K荧幕，我们不能再使用固定的字号来设计产品了。字号应该与设计本身一样具有响应性。例如可以允许用户自定义字号、行高或字间距等以达到舒适的阅读水平。
2.文字样式:
文字作为传达信息的重要载体，对于许多用户来说，装饰字体或草书字体都是比较难阅读的。且用过细的、过小的、斜体和全大写文本，也会降低识别度。
有效的动画可以给页面带来生命感，但如果滥用动效不仅会分散用户注意力，严重的话对某些用户来说来说可能是致命的（光敏性癫痫的临床诱因之一就是闪光图像的刺激）。
1997年的一天，日本电视台正在播放《精灵宝可梦》第38集“电脑战士3D龙”，但就在这天晚上发生了600多名儿童昏倒在家中集体送医事件，轰动了动画界，任天堂的股价也随之大跌。原来，为了达到震撼效果，3D龙的背景运用了“蓝-红-蓝”的快速闪烁来表现爆炸，这样高频率的闪烁刺激了孩子们脆弱的眼睛，导致他们集体患上了急性光敏症。也因为这件事日本开始着手对动画片的制作制定规范。Twitter在2019年为了保护对闪烁图像敏感的人员安全，也采取了禁用APNG动图格式的措施。
另外WCAG 2.3.3官方说明，一些用户会因滚动页面的动效（例如缓动和视差滚动）而触发大脑前庭疾病从而产生头晕的症状，所以iOS、Mac、Windows 10都具有关闭动效的功能。
为了避免给特殊人群造成困扰，设计师在开始做动效之前，应该看看以下四条是否满足：
1.动效每秒闪动不超过3次，发生的闪光区域不超过超过25％否则，光敏癫痫患者会有发病的风险。
2.避免过于夸张的视差和运动效果，因为大脑前庭失调者会引发眩晕。
3.避免有多个元素通过不断移动、闪烁而分散注意力，因为这可能会让注意力缺陷者产生困扰 。
4.如果有上述情况，需提供一些控件或选项来暂停、隐藏或者更改任何动画或效果的频率。
作者：百度MEUX 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
作者：大秘密mimi 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
蓝蓝设计的小编 http://www.lanlanwork.com
