根据公司结构和职能角色的需求不同，用研中部分是行为观察，部分是商业战略，部分是心理学，部分是数据分析，部分是设计，部分是团队促进。用研可以有不同的风格，因此可以在行业范围内四处移换位置。根据公司规模和类型的不同，我见过很多用研团队变成设计部门的一部分，有些则变成营销部门的一部分，还有一些则在产品管理部门——最终在哪都根据公司的规模和类型来决定。在我任职期间的某个时候，我自己的团队已经集结到了之前提到的各个部门。
所以...有没有一个部门可以更加适合配备用研部门，让用研更加成功且具有影响力呢? 这是我想找到的答案。
...
用研部门应该存在于...
...在设计团队？
摄影：Harpal Singh 于 Unsplash
优势：
研究与设计交织在一起：用研已经成为许多用户体验设计师工作职位描述中的一部分，而用研的核心就是指导设计。研究结果可以指导交互行为，并且它从一开始就已经嵌入了设计过程里。如果一个设计团队有专门设立研究部门，会让这个团队变成一个强大的联盟。让更大的设计团队统一研究整体用户策略，会让之后的调研和设计过程更加整体和完善。同样，设计师也有想改善用户体验的众多想法，并且通常很高兴能看到用户和他们的想法进行交流。这直接与这些创造用户体验改善的设计师们，促成了一个强有力的文化测试、迭代、再测试的过程。由于设计与用研的过程是结合在一起的，因此可以立刻将这些用户洞察应用到设计中去。
类似的工作流程：用研的工作流程与传统的设计流程十分相似。设计领导者可以无缝地理解研究的各个阶段：复查现有的数据，引导生产性研究，汇编各种信息从而寻找新的模式，创建一份报告，陈述研究结果，在上线后测试等等。同时，从设计概念开始，征求意见、进行测试比较设计方案的好坏、迭代设计、产出最终的版本、呈现并且在上线之后进行迭代。设计和用研通常希望携手合作，共同努力改善数字化体验。
劣势：
设计≠用研：不是所有的设计师都会进行研究，要么是因为他们没有时间，要么是因为他们没有接受过理解研究方法的训练。（相反，也不是所有的研究人员都是设计师）通常，公司会安排设计师同时做研究员的工作，反之亦然。这对最终实现的产品来说可能是灾难性的。尤其是在较小的公司中，设计师需要扮演很多职能。这意味着他们“有时候“有时间能亲自调研。不幸的是，在设计和用研没有明确定义的前提下，这意味着雇佣部门和领导团队认为这两者是可以互换的 (注意: 这并不意味着某些设计师没有资格，只是“视觉设计师 / 平面设计师”、“UI设计师”和“UX设计师”的技能组合是有区别的，但我不会在这里讨论这些!)
用户需求可能会被遗忘: 有时候，一个设计规划图会被过分热烈的创造性驱动从而创建，而不是来自于数据或研究。很多时候，创意人员会对他们喜欢的新想法产生依恋，即使它并非源于用户需要的东西(有时候我们都会为此感到内疚)。不幸的是，这意味着研究可能是事后的想法，更经常地被作为验证工具而使用，而不是在产品生命周期中预先定义需求。这对于用研来说可能成为难以克服的一个障碍，特别是如果设计概念与利益攸关方或决策者领导人一起审查，他们喜欢并认为这是一个“ 可以去做的设计”。这意味着研究的机会很有可能丧失。
...在市场运营团队？
摄影：Carlos Muza 于 Unsplash
优势：
相似的技能组合:市场研究和 UX / 产品的研究在他们特定的核心研究中，共享相似的过程和研究方法。在社会心理学、市场营销学、人类学、人的因素、运作和设计等许多领域进行 “人的研究” 所使用的工具包非常相似：定量方法，如大样本调查和分析；定性方法，如面对面的观察，焦点小组，适度的访谈，日记研究以及其他。每个领域的方法都需要研究设计、用户招募和研究分析。对于市场团队来说，这是一个非常熟悉的世界，作为 用研 流动到这个部门意味着领导者可能会对你的角色需求有一个彻底的了解。
共同的目标是了解用户: 市场团队也将是你的拥护者。无论如何，源自于产品和设计的用户研究的洞察力，为市场部门关注的许多举措增添了直接价值。透过略微不同的角度来看，市场营销和用户体验有着相似的目标(理解客户) 。尽管如此，当团队协作并共享信息，在以业务或用户为中心的举措之间建立平衡时，用研结果还是能够帮助我们进行决策。
劣势：
商业需求可能与用户需求相反:如果组成“聚焦点”的事物变化太大，那么这个”聚焦点“既可以将市场营销与用户体验结合起来，也可以将它们分开。当业务需求与用户需求相矛盾时，可能会产生摩擦。如果市场部门的领导层将眼前的业务优先级置于用户研究之上，那么获取工具和客户的途径就可能受到限制。在一天结束的时候，市场团队关注创收，即使这对用户来说不是最好的体验(比如在某个地方放置广告，可能会干扰网页，以确保用户看到它) ; 而用研团队关注什么是对用户体验最好的(比如在页面上放置一个广告，使其不会干扰用户的任务，冒着用户看不到并参与其中的风险)。
用研 ≠ 市场研究: 有时候，流动到市场部门意味着其他人将 用研视作为市场研究的延伸。由于这一点，一些项目有可能被认为应该由市场专家处理，而不是用户体验专家。例如，营销活动的目标可能是“我们如何让用户使用这次促销活动” ？另一方面，用研 可能会强调用户的需求，比如“用户希望如何获得有关促销活动的通知” ？这种情况（关注点的转移）并不可能经常出现在市场部的议程表上。
...在产品管理团队？
摄影：Marvin Meyer 于 Unsplash
优势：
为产品使用路径图研究分配时间:通过将 用研 嵌入到产品管理团队中，研究有机会通过在产品路径图中划出其应有的空间和时间来充分发挥其潜力。通过让 用研 和产品经理向同一个领导层汇报，这意味着目标和优先级可以被共享，并且在同一时间被一起审查。这可能是一个有效的工作方式，特别是当你与产品经理一起工作的项目，他们知道如何使他们的产品更直观地呈现给用户。用研的产品管理为定义实际产品需求创建了一种更加无缝的方法。这意味着路线规划图中留出了时间，在积压成定局之前走出去，获得用户见解。这告知了大家需要开发的功能的优先级，并在完成设计之前，就形成产品了本身的特性。当 用研 与产品经理的目标紧密相连时，每个注入了用户见解的产品阶段都变得更加容易(因为它应该是在一个理想的世界中!)
更容易地与决策者进行知识交换:将产品经理的内部结构与 用研 的内部结构相结合，也意味着他们可以获得更多用户关于他们的体验的言论，从而形成定期更新，并且可以更容易地进入用户途径。用研经常关注复查定性趋势的反馈(比如 Qualtrics 或者 Medallia 系统)（在线调查或客户体验管理系统），这意味着产品经理听到这些趋势的机会变得更加频繁。产品经理一般来说应该对他们的用户群有深刻的理解，但是他们通常很难在倾听用户的基础上来保持冲刺、业务分析、 KPI 和产品路线图规划。因为团队会议中现在有一个指定的用户代言人一直在场，这就是为什么与 用研 如此紧密地联系在一起对产品经理来说是有益的。参加这些会议使得 用研 有机会直接与那些最需要了解用户需求的人进行自发的对话。加入同一个团队可以使这些沟通渠道更加开放，并且可以更加频繁地了解用户对产品经理的需求。
劣势：
研究的优先级可能会降低:不幸的是，转到产品管理团队意味着有时研究的优先级会降低。当利益相关者对产品交付施加压力时，这通常意味着产品需要尽快推出。然之后，产品经理必须专注于发布他们产品路线图规划上的项目，并在时间表和开发周期内实现业务目标。为了满足这些时间要求，尽快交付某些东西成为更紧迫的目标，而不是交付一个经过研究和磨练的产品(这需要更多的时间)。
更多的评估而不是生产性研究: 把用研流动这个部门可能意味着这项研究变得更加可评估(或者验证、可用性和迭代测试) ，而不是生产性(或者理解需求、价值和概念发现或开发的测试) ，就像在设计团队下可以做的那样。这不是一件坏事，而只是需要牢记在心，以便作为一个用户倡导者，用研 的工作可以更直言不讳地说，需要留出时间来做更深入、生产性的工作，从长远来看而不是短期内为产品提供信息。提前了解这个可能的障碍意味着用研可以更好地装备自己的 ROI（投资回报率）影响，以便为更深入的研究腾出时间。
...在自己独立的部门？
摄影：José Alejandro Cuffia 于 Unsplash
注意: 我还没有在一个独立的，指定的 UX 研究部门作为一个 UX 研究员的工作经验。我只能推测将一个独立的 用研 团队集合起来会是什么样子，或者当 用研 成为一个大型组织中自己的分支时，领导力的优缺点是什么。
优势（推测）：
拥有自己带领的用研部门，可以为更深入地研究需求提供机会。它将有能力根据合作伙伴的规划路线图从而制定自己的规划路线图。它可以让部门领导层能够深入地支持研究人员的需求，因为需求经常遇到障碍（如招聘、用户日程安排、预算、批准、 ResearchOps（ Research Operation service 研究运营管理） 的行政工作等)。能够拥有一个研究路线规划图，并为发现和生成性研究腾出时间，从长远来看，可能会大大有助于产品和客户体验的信息共享。拥有一个独立的团队可以使这些研究成为奢侈品。当一个领导者致力于使研究成功，这意味着他们希望研究可以带来更多战略上的影响。
正如我之前提到的，一些被称为 “ ResearchOps（研究运营管理）” 或者研究操作的东西，是一个趋势短语，类似于 “ designnops①” 或者 “ DevOps②” 等等。抛开时髦不说，设立一个独立的部门和领导层可能意味着在决策层有一个更大的席位，这反过来又意味着在使体验研究产生影响方面有更多的投资。当投入更多资金进行研究时，业务侧就有机会进行战略思考并得到支持。一个独立的 用研 部门反过来将能够雇佣人来支持行政管理，为研究人员能够专注于他们眼前的工作和分析而负责。在小型组织中，甚至在大型组织中的小型 用研 团队中(比如我的团队) ，研究人员往往负责所有的职能，这也是可以的！但是，如果有一个专门关注于这些研究人员需求的部门，并扩大他们工作的影响(不管团队规模有多大) ，我相信将有更大的机会去收集更好、更深入的见解，研究过程也能充分发挥其影响力和潜力。
①Design Systems Ops 是设计团队的一部分，他需要足够了解设计，并且要了解他们试图概念化什么。同时，Design Systems Ops 需要理解工程师的需求和定义方法，这将有助于设计系统的装运和规模化。在某些程度上，一个 Design Systems Ops 是两个世界的翻译。
② DevOps（ Development和Operations的组合词）是一组过程、方法与系统的统称，用于促进开发（应用程序/软件工程）、技术运营和质量保障（QA）部门之间的沟通、协作与整合。它是一种重视“软件开发人员（Dev）”和“IT运维技术人员（Ops）”之间沟通合作的文化、运动或惯例。透过自动化“软件交付”和“架构变更”的流程，来使得构建、测试、发布软件能够更加地快捷、频繁和可靠。
劣势（推测）：
相反，单独作为一个独立的 用研 部门，也可能使得决策层难以接受。如果不流入一个直接产生收入影响的部门内（至少在短期内，比如在销售或营销方面) ，那么 用研 的工作就很难得到认可。利益相关者之间的伙伴关系和一致性，对于用研人员能够成功地完成他们的工作来说至关重要。如果没有它，如果 用研 的需求被认为不是直接以产品为中心，同样的职位可以帮助 用研， 也可能会阻碍他们。开展生产性研究的时间可能被视为“有风险” ，而且当团队的领导层与其他更为成熟的角色(即风险较低的角色)分离时，可能很难获得合作伙伴和利益相关者的支持。
同样，投资一个独立的用研团队总的来说可能是有风险的。可能很难预测到有形的ROI（投资回报率）预测，以便业务合作伙伴能够理解，并在第一时间投入资金。这意味着，决策者们可能认为给用研分配预算或增加人数是有风险的，其他研究需求也是如此。一般来说，R&D（产品研发）在组织中是一个棘手的领域，而 用研 肯定会在这个预算范围内。尽管有证据表明，对研发的投资有能力改变企业经营的底线，并且可以通过创新保持企业价值，所以相对于独立的用研部门，紧迫的商业需求可能话语权更大。
...
作者：三分设
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
最近美剧《风骚律师》第六季正式回归，本来想等着全部更新完之后在一口气看个痛快。但是豆瓣里一万多名用户给出了9.9分的评价，就让我有点坐不住了，势必要看看「律师」是如何超越「毒师」的，也弥补一下近期的剧荒
当我打开Netflix之后，引起我注意的是「超爱这部!」这个功能，第一眼看到的时候有些疑惑，这个功能的意义是什么？与点赞功能的区别是什么？我点了之后会怎么样？我一直理解Netflix的点赞功能和Youtube、Twitter和抖音类似，点击之后会推荐给我更符合口味的内容或者有收藏的作用。但是对于Double the Thumbs的疑问是，除了喜欢与不喜欢之外，还可以给用户带来什么体验？它是Like功能的进化体么？已经拥有18年历史的点赞功能还有可优化的空间么？借此话题，来和大家聊聊点赞功能背后的洞察与价值
早期的点赞把原本静止的内容变成了社交的媒介，用户间通过赞来简单直接的交流。我喜欢，我就点赞，蕴含赞同、支持和鼓励，此时的点赞更单纯与纯粹
2004年，社交新闻聚合器Digg的创始人Kevin Rose发明了Digg功能，用户从内容列表中查找自己感兴趣的内容并将其“Digg”出来——本意「挖掘」，你可以理解为「顶」——以表达自己对这篇报道的认可。当一篇文章得到足够的Digg之后，就会被提升到首页上，让更多的人看到
就像是一个朋友给你讲了一个故事，你十分激动。这个故事是你从来没有听过的，你记住了它并将这个故事分享给了其他的朋友
2007 年，社交聚合网站FriendFeed 将“Like” 按钮作为一项新功能发布并推广，两年后，随着 FriendFeed 被 Facebook 收购，这项功能也整合到了 Facebook 里。随后，各大社交产品纷纷效仿，同期的 Tumblr、Vimeo以及后来的 Instagram 都增加了这一功能。在国内，微信4.0版本推出的朋友圈，后来抖音的小红心、知乎的大拇指或者老铁双击666，不管什么样式的图标和表达方式，点赞即可满足用户的基本需求，又可以为产品实现商业价值，已经成为了社交产品的标配并且一直延用至今
去点赞
先问各位几个问题，你一天会给几条抖音、朋友圈或者知乎的回答点赞？你一天又会收到几个点赞？那你会记得一天跟多少人打过招呼么？
可能你会认为我很无聊，谁会每天统计点赞和打招呼的次数呢。可正是因为这些你根本不在意的数字，无意的一个举动影响着生活。在电梯里碰到同事你要点头示意，领导发了一条朋友圈你要点赞附和，朋友积赞领优惠券你要支持。你需要礼貌的简单问候，或是处于功利维护人际关系，点赞无非是门槛最低，负担最小的表达方式，是敷衍的象征。相比于转发显得太重，评论则需要输出观点，模糊不清的态度绝对不会承担责任，还可以维持住一定的距离感
在社交媒体里，我们点赞做的只是观察他们，表示认同，而不是向他们展示我们关心的事情，更别说用它加深友谊 「 Karen North - 数字社交媒体教授」
在传统的社交中，我们有点头之交的关系，然而互联网的出现让我们生活和工作中又出现了一种新型的关系“点赞之交”，它已经成为了网络社交的通用礼仪，虽然它无关紧要，含义不足以加深感情，但是想躲也躲不掉
被点赞
作为一名内容输出者来说我的体会更深，我的视频怎么没人看，为什么点赞还不到一百个，每十分就会拿起手机看十几次，内心的挣扎与惶恐开始纠缠着我，是不是话术太枯燥，是不是灯光太暗了等等的问题反复的问自己。就比如当你精心拍了一张照片，编辑好一段文案准备点击发布按钮的那一刻你在担心什么？你耗费几个小时发出自我感觉良好的的一条朋友圈之后，点赞数只有稀稀拉拉的一两个。原本的炫耀因为点赞数太少变成了日记本
相反，点赞数成倍增加的时候，大脑就会开始分泌大量的多巴胺肾上腺素飙升，同时，你可能将在更多的社交平台重复这一受捧的过程，以及无数次打开这条动态，进入一种高度的自我欣赏状态。一个必要功能的出现，也意味着它承载着人们必要的需求。点赞满足的就是人们「被关注被看见被认同」的底层需求
重要的指标
当产品经理们发现了用户的底层需求之后，如何让用户不产生疏离感，积极参与并且促进用户留存？点赞功能给了他们一个非常轻量级的机会，任何用户只要点个赞，就可以在整个社区的内容量级评定上贡献自己的影响力。另一方面，内容的生产者能够从点赞中获得更正面的反馈，进而更愿意进行分享实现转化，这是平台更愿意看到的
Facebook 2009年在全球推广点赞功能之后，用户发贴的数量和质量都随之提升，约 30% 的用户每天都会多次点赞。另外，广告商们马上解锁了「营销密码」，Facebook将数据售卖给广告商，打破了传统媒体市场的盈利模式，把用户的「喜爱度」拿捏的死死的。就连美国国务院在 2011 年 – 2013 年，只为在 Facebook 上获得更多的赞，就已经花费了 63 万美金
但凡事都有利弊，毕竟人性极端化是难以避免的。不知道各位有没有经历过可以在淘宝上给微博买粉买赞买评论的阶段，看似大把的流量在手其实都是流量造假，早期微博上的电影大V都是靠着一手盗版资源和买粉赚的盆满钵满，如果活跃度较高，很容易成为天选之子，平台还会亲自送你粉丝，这种效果显然与社交网络设计之初，希望通过虚拟社区增进情感联络的初心是相悖的，另外，造假产业环环相扣侵蚀了平台的利益，这就不是平台愿意看到的了，所以改善社区环境是必然
各个平台也做过努力，例如微信朋友圈在点赞功能发布不久，就对公众号集赞送礼品等诱导分享行为严厉打击。2019年左右Facebook、Instagram包括Twitter在内的 Demetrication（去数量化）顾名思义，就是将点赞数量隐藏，让用户看不到有多少人给帖子点赞，强制用户把注意力放在内容上。类似于教育改革落实“双减”政策将百分制改为ABCD的等级制，考试结果不排名、不公布，全面关注学生综合素质的培养。但是，有条新闻，一名老师大白天的拉着窗帘偷偷摸摸搞培训被社区抓现形的新闻想必大家都看过，贪荣慕利，众星捧月的潘多拉魔盒已经打开了，与用户的底层需求博弈注定不是短期就可以完成的
转眼已经三年过去了，海外的社交平台显然没有做到 Demetrication，技术手段根本完不成的任务。国内的社交平台则是把压力放在了创作者身上，利用起了用户底层需求，你想让作品在流量池里获得更多的点赞、评论和转发就要不断优化内容质量，寻找自身问题，或者花钱买数据，抖音的抖加和小红书的薯条都是社区平台迭代后的现状。既能避免黑产保护平台利益，又能给创作者来带可观的数据何乐而不为呢
更好的评分制
说回 Netflix 的 Double the Thumbs，官方给到的解释“这是一种让会员们了解自身喜好，更精准的看到想看的电影和电视的另一种方式”
其实就是通过更细微的分类比如导演、演员类型或者制作团队等等给奈飞的用户推荐相关的内容，只能说这很奈飞。从1997年开始卖碟片直到2006年转战流媒体，Netflix 的用户增长和商业成功的关键就是把猜你喜欢做到极致，这也是手握全球两亿付费用户的原因
不难看出Netflix更依赖用户，用户对于平台的反馈很重要。2017年Netflix抛弃了类似豆瓣一样的五星评分制，原因在于用户的打分并未遵从内心，评分较高的电视剧/电影会越来越火，不火的内容永远不会被用户看到，乱打分的现象频繁出现，Netflix不希望用户变成批判家，受到其他人影响，你只需要看你喜欢的内容就好。就比如说，周末你想跟女朋友去甜甜蜜蜜度过一个周末，舞台剧「莎士比亚」和电影「小时代」你会选哪个？我想大部分人都会选「小时代」，因为它话题性强，电影结束后可以在餐桌上和女朋友一起吐吐槽。但是，如果让你在平台上给两部剧评分，一定是「莎士比亚」高于「小时代」，问题就在于Netflix在乎的并不是评分，而是用户会看哪部剧
显示性偏好（Revealed preference）和是期望性偏好（Aspirational preference），这在日常生活中也很常见，比如一个决定中午吃轻食的人实际点了炸鸡，一个计划下午去图书馆备考的人实际仍躺在宿舍里刷剧，一个决定更温和些的人在面临类似的矛盾时仍选择发脾气 - 经济学家保罗·萨默尔森（P.Samuelson）
另外，Netflix与YouTube、抖音和B站又有所不同，Netflix全部都是PGC内容，都是自己花钱买的，流媒体版权的成本越来越高，被淹没掉的内容几乎失去了竞争力，对于平台的冲击巨大
Netflix不得不做出改变，只有不断优化推荐算法，向用户推荐更精准的内容才是王道，显然点赞/点踩对于用户来说更方便且选择单一，是获取数据最高效最精准的方法，在一项 Beta 测试中，Netflix 向全球数十万新用户推出了点赞/点踩手势，发现评级参与度上升了 200%
Netflix产品副总裁Todd Yellin指出这种无法完全准确洞察用户喜好的评级系统对Netflix当下原创内容的储备没有益处
如果各位很喜欢看美剧应该知道Netflix有非常多的自制剧，自制剧要比买别人的版权便宜的多，如果版权到期或者竞品的乘胜追击，也不会让自己处于被动局面。只有自制剧、自制内容才是平台的护城河，比如「纸牌屋」和「鱿鱼游戏」等等，这些优质的内容之所以能制作成功出现在大众视野，全部都来自点赞功能获取的用户数据
如今，Netflix在点赞/点踩的旁边增加了Double the Thumbs，改为了三星评分制度，从官方给到的解释“用户可以通过它告诉 Netflix，自己对某种特定内容情有独钟，包括主演、制作团队、角色类型、小众剧集类型等等，Netflix 的推荐也就能够更具体入微”，反之，Netflix可以通过更细微的分类来洞察用户喜好，一方收获了利益，一方收获了效率
作者：Hubooooo
转载请注明：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( 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 配色的认识。
最后放一张阿玛尼的配色格言，我们下一篇再贱！
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系
作者：酸梅干超人 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
01、腾讯视频，色觉障碍优化
腾讯视频在播放视频时可以通过辅助功能调节色觉障碍优化，针对色觉障碍的用户提供了相应色彩画面的选择。通过优化视频色彩来提高画面辨识度，更加人性化的照顾更多用户群体。
代代 摘录
02、腾讯视频，重回后继续播放的小细节
当用户观影过程中需要暂停退出当前窗口，当重新切换回来时，视频播放进度会自动调节到暂停前 3-5 秒。这样的处理可以让用户可以更好的对剧情进行重新衔接，延续离开时的记忆，非常人性化的细节处理。
代代 摘录
03、高德地图十一期间不一样
高德地图节日期间在左上角新增了“景区随身听”服务，打造千人千面的全新语音导览体验，首批覆盖全国逾500个热门景区，为高德用户带来不一样的十一假期体验。
黑马青年 摘录
04、剪映，拖动试听音乐有助于选择
剪映在添加音乐时，可以通过拖动音频来快速试听该音乐，快速跳过缓慢的前奏部分，直接试听音乐高潮部分。根据当前素材选择最适合的高潮部分配音，可以节省用户选择配音的时间。
Liaju 摘录
05、高德地图，截图生成长图
搜索好目的地之后如果选择公交地铁出行，为了防止可能由于网络不佳等因素不能及时查看交通信息，可通过截图功能，保存完整的路线指引图。保存图片后可在相册中查看长图，也方便分享给好友，非常人性化。
疏晶晶 摘录
06、企鹅 FM，左滑到底直接删除收听记录
企鹅 FM 最近收听记录中，不仅可以左滑配合点击删除，还可以左滑到底直接删除当前操作内容。
许文娟 摘录
07、携程旅行语音导览
在携程旅行 APP 中，针对部分景点介绍有设置语音导览的功能，初次体验你可以选择该旅游景区的三个景点进行试听。对于很多游客来说只是看风景，如果不了解景点背后的故事，是很难有代入感的，这个功能可以让你对景点有个初步认知。
黑马青年 摘录
08、微信读书，想看啥摇一摇
微信读书，摇一摇！它会根据用户的阅读记录推荐类似的书籍。当用户不知道看什么书的时候就摇一摇，以有趣的交互解决用户选择困难症。
代代 摘录
09、bilibili 漫画跨页拼贴阅读
一般的漫画都是在一页之中进行分镜，在手机上阅读时不会有什么障碍，但是当出现一些比较大的跨页插画时，手机上的观看体验就不是那么友好。而当出现跨页时，bilibili 漫画可以通过向下滑动来进行拼页，将跨页拼成一页来进行观看，优化了阅读体验。
住住 摘录
10、叮咚买菜购物车领券激活用户购买欲
随着生活方式的不断变化，现在买菜这样的家常小事都可以服务到家。
最近在体验叮咚买菜 App 的时候，发现购物车顶部会有领券提示，通过满减、优惠券等形式可以更快的激活用户购买欲。空状态的购物车可以激活用户进行商品添加，已选择商品后会看到满减提示，激活用户选择更多的商品达到满减权限，一举多得。
黑马青年 摘录
11、微博动漫，不一样的性别设置
点击右上角的男生/女生头像便可直接替换角色，区别于常见的输入形式，简化用户操作步骤，并且推送内容会根据用户性别进行差异化推送。
Cherry 摘录
12、记账城市，游戏化记账玩法
对于我们这一代的年轻人来说能坚持记账的估计相对较少，一些互联产品的引入相对可以激活这一部分人群。最近体验的记账城市让我影响深刻，将游戏化的场景引入产品设计中，你记录一次就相当于为自己的虚拟城市进行一次基建，带入了几分趣味性。
也可以点击拍摄图标进行照片记录，调整好需要展示的城市场景，点击拍摄时模拟了类似拍立得形式的照片打印。整个体验不仅年轻化、游戏化，也结合了趣味性，在细节的处理上面也非常到位。
黑马青年 摘录
13、美图秀秀以营销思路引导登录
通常访问个人中心都需要用户登录账户，如何引导用户创建账户是产品不断思考的问题。美图秀秀以红包微动效替换默认头像，以登录领红包引导用户创建账户，也算是一种不错的以营销思路作为引导的方式。
黑马青年 摘录
14、骨骼，绘画人的热爱
很喜欢这款解析人体结构的 App，设计很大胆，有个性。点击右上角“显示插针”会显示插针在某个部位，点击插针还能出现对这个部位的解释。还能对骨骼进行360旋转，深入解剖每个部位。
功能操作控件放在上下左右四个角，内容的布局打破常规设计，左下角的“滑轮”操作，当你滑动时就会在“显示界面”跟“隐藏界面”之间切换。
Liaju 摘录
15、Keep 不一样的任务设置
Keep 的任务设置采用 H5 的形式，区别于其他大众的常规任务形式。没人喜欢做任务，用讲故事的方式去设置任务关卡，会增加用户的参与度。
“卡路里工厂”在取名上就增加了不少趣味性与点击欲望，进入“卡路里工厂”界面用星球、星空等元素设计，画面具有神秘感，让用户觉得是在探索星球中完成任务。结合游戏化的形式更有趣味性，因而提升用户参与度。
Liaju 摘录
16、音兔，音乐智能推荐
音兔 App 在进行图片和视频编辑时，音乐的类型会根据图片和视频的内容进行推荐，如发的风景照就会推荐旅行相关的音乐，发的猫咪照片就会推荐猫奴的音乐，方便用户在进行图片和视频编辑时更快捷的选到适合的音乐。
Xindy 摘录
17、微信读书滑到头还能无限场
卡片式滑动翻页现在非常普及，起点通常是无法滑动的，但是微信读书打破了你的思维局限。在开始时允许你向右滑动，此时便可进入无限场，带给你不一样的互动体验。
黑马青年 摘录
18、招商银行双重刷新相结合
招商银行 App 进入社区状态下 icon 变为刷新样式，可以手势下拉进行刷新，也可以点击 icon 进行刷新，操作更加便捷。
Cherry 摘录
19、网易云音乐，生日祝福
生日那天，网易云音乐的每日推荐图标会变成一个蛋糕图形，每日推荐的第一首歌是「祝你生日快乐」。这些小细节是不是很暖心呢，反正我是被俘获了。（Android Version 6.3.2）
無休 摘录
20、Space FM 通过音乐交友
Space FM 模拟宇宙太空，把每个用户比作一个宇航员，宇航员添加喜欢的歌曲，形成自己的音乐星球；宇航员可以带着自己的星球在太空漫游，每隔30秒匹配新的宇航员，如果双方都停留下来，可以听对方的歌曲，还可以打招呼、聊天，聊得来可以收听对方的音乐，即可私聊。
以太空星辰为动态背景，播放着自己喜欢的歌，营造了一个轻松的氛围。在与陌生人打招呼，有了音乐为话题引子，不会显得唐突尴尬。
無休 摘录
21、猫耳 FM 的闪屏启动音
猫耳 FM 增加启动音的设置，区别于传统 App 闪屏启动，加入声音的闪屏启动音更增趣味性。推荐的启动音也非常符合产品二次元的调性，让用户在进入 App 时有声优体验的沉浸感受，每一次的打开都是一次惊喜的体验。
“欢迎回来，主人”、“早安，大小姐”…等声音录制来自不同动漫的经典重现，能抓住一部分特定用户人群的喜爱，也是非常棒的运营策略。
老白 摘录
22、京东商城添加活动日历功能
京东商城在首页添加了活动日历的功能，用户可以了解到未来一周的优惠促销活动。可添加活动提醒，这样用户就不会错过好的优惠活动，同时也提高了平台的转化率。
逆光 摘录
23、腾讯视频，播放短视频中推荐正片
观看短视频的时候，播放大概 5 秒左右，视频下方标题栏会变成正片内容导航，避免用户找影视名字的繁琐，既能满足用户需要，又能增加产品需求。
皓月长歌 摘录
24、酷狗音乐，透视立体翻页设计
酷狗音乐歌单页，头部推荐歌单采用透视立体翻页效果呈现，增强视觉画面感，主体内容更突出，也区别于平铺卡片形式。头部的背景颜色也融合当前卡片的色调，整体更协调。类似这种呈现简单立体翻页效果的表现手法，在 UI 应用场景中也越来越常见。
Liaju 摘录
25、途家民宿，未完成订单的设计呈现
当用户有未完成的任务订单，在“首页”和“我的”以显著位置提示用户完成订单。多个订单“首页”以轮播形式进行展示，“我的”以上下滑动形式展示并提示用户。
皓月长歌 摘录
26、QQ 夜间模式下的 icon 设计
切换 QQ 夜间模式，底部标签栏消息选中模式下的 icon 结合睡觉打呼的情景设计，符合夜间场景。贴合场景的细节设计，带给用户更好的体验。
Liaju 摘录
27、马蜂窝旅游，详情页照片展示处理
马蜂窝旅游在文章详情页展示作者拍摄的景点照片时，不会对照片进行裁切等处理，而是以宽度固定高度自定义的方式进行呈现。展示出照片本身的原始状态，不仅方便作者拍摄不同比例的照片，也方便用户从不同的视角观看景点。
黑马青年 摘录
28、毒汤日历，点赞也要扎心
一款毒鸡汤产品，觉得很丧就打开看看，说不定丧丧就好了。点赞 icon 设计也是带“扎”的，恰好符合产品属性；当你想翻过明天的时候，会提示“明天，怎么翻也翻不过去”。
Liaju 摘录
29、百度翻译，通过引导互动完成信息采集
引导页在产品中比较常见，从静态、动态、视频等不断演变到互动式新形式引导设计。
在百度翻译 APP 中，通过引导页和用户进行互动，来了解用户群信息。通过这样的互动形式可以更好的被用户所接受，并进行相应信息的选择。
疏晶晶 摘录
30、抖音，背景图编辑预览更人性化
在抖音设置个人主页背景图，更换图片来自个人相册，在进行图片编辑时，可以预览基于布局结构上的呈现效果，便于用户截取需要的图片显示区域。
疏晶晶 摘录
31、编辑微信朋友圈动态试试长按照片
编辑微信朋友圈动态过程中，如果选错图片通常大家都是点击图片预览时删除。还有一种长按拖拽删除可能容易被你忽略，不妨试试看，通过长按拖拽删除照片更能方便用户操作。
疏晶晶 摘录
32、酷狗音乐，30 秒副歌播放
通过 30 秒的副歌播放，为你快速筛选是否喜欢这首歌，30 秒缩短了用户试听歌曲的时间成本。也会提示用户下一步操作，如果 30 秒不够可以增加 30 秒。
Matilda 摘录
33、QQ 音乐制作视频歌词海报
喜欢的歌词可以制作成动态海报，还可以自定义拍摄视频，符合当下流行的小视频。将喜欢的歌词歌曲同时赋予视频的记忆，听觉+视觉体验结合，给人更加丰富的情感体验。
Matilda 摘录
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系
作者：黑马青年 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
1、标签栏是什么？
2、为什么标签栏要放于底部？
3、标签栏的三大规则
4、标签栏的基础规范
5、标签栏的图标样式
6、标签栏的展示样式
7、赋予标签栏更多内容
标签栏也叫Tab Bar，是移动端应用程序中最常用的UI元素之一。标签栏出现在应用程序屏幕的底部，可以让用户在应用程序中的不同部分之间快速切换。标签栏可以是半透明的，也可以具有背景色，在所有屏幕方向上都保持相同的高度，并且在显示键盘时被隐藏。标签栏可以包含任意数量的标签，但是可见标签的数量根据设备的大小和方向而变化。如果由于水平空间有限而无法显示某些选项卡，则最终的可见选项卡将变为“更多”选项卡，该选项卡将在单独屏幕上的列表中显示其他选项卡。
标签栏在任何目标页面中的高度是不变的，iOS 规定它的高度为98px(iOS @2x)。但因为 iPhone X 之后的全面屏手机引入了 Home Bar ，所以在进行界面适配的时候，请务必要加上 Home Bar 自身的68px高度。别让Home Bar遮挡标签栏中标签的展示，这会让两个控件发生操作手势冲突。
史蒂文·霍伯（Steven Hoober）在对移动设备使用情况的研究中发现，人们会根据自己的设备，需求和背景以多种方式触摸手机，触摸手机屏幕或按钮的用户分三种基本方式：抱着手机的人占36%、两只手使用手机的人占15%，而49％的人依靠一只手在手机上完成事情，除此之外75％的用户仅用一个拇指触摸屏幕。
在下图中，出现在手机屏幕上的图表是近似覆盖图，其中的颜色表示用户的拇指可以接触到哪些区域以与屏幕交互。绿色表示用户可以轻松到达的区域；黄色，需要伸展的区域；红色区域，要求用户改变握持设备的方式。
这意味着：
将常用的“行为”放在屏幕底部很重要，因为只需一键式的交互即可轻松到达这些“行为”。
底部标签栏设计应当遵循三大原则：结构合理、位置清晰、可预测行为。
为了让标签栏表现清晰，两大平台在规范里都对标签数量给出了相同的建议：建议标签栏内的标签个数为3个至5个。因为标签过多会使每一个单元标签的可触空间降低，人们在物理上（手指）难以点击或误触，除此之外还会增加应用程序结构的复杂性。
注：如果你因为产品结构非常繁杂，标签数量想要达到更多，那么在 iOS 中就会给你强硬处理，iOS 人机交互规范告诉产品设计者们：标签栏虽然可以包含任意数量的标签，但可见标签的数量会根据设备的大小(平板或手机)和方向(竖屏或横屏)而自适应变化。如果由于水平空间有限而无法显示某些标签时，最后的一个可见标签将被会被系统强行转换为“更多”选项，需要用户点击“更多”选项之后，系统才将在单独屏幕上的列表中显示其他被隐藏的标签。
“我在哪里？” 是用户成功导航所需要回答的一个基本问题，我们应当采用适当的视觉提示让用户知道目前所处的位置（选中状态）。在APP应用中我们常见的处理方式有4种：改变图标样式、改变大小、改变颜色、改变展示样式。它们并不一定是独立存在的，可以同时作用于一个标签。
选取每个底部导航选项都有通向它的目的地，底部导航应当将用户直接引导到相关页面，不应该打开菜单或其他窗口。如果在某些情况下可以使用标签，但在其他情况下则无法使用，则应用程序的界面将变得不稳定且不可预测。我们要确保所有选项卡始终处于启用状态，并说明为什么选项卡内容不可用。例如造作新家APP，当用户处于未登录状态时，就不能查看底部标签“我的”信息，当我点击标签“我的”，就会弹出快捷登陆界面，这样就能让用户明白不能使用的原因是账号未登陆，从另一层面讲也很好的引导了用户注册与登陆。
注：不要使用标签栏为用户提供对当前屏幕或应用程序模式下的元素起作用的控件，如果需要提供控件，请使用工具栏。
在设计标签栏前我们首先要了解它的基础规范，在保证基础规范合理的情况下再去进行设计。
为了保证图标的尺寸大小一致性，我们往往会建立基础的网格尺寸来进行绘制图标，下面就以常用的24x24为大家举例：
网格包含2px出血位。这样可以确保图标在导出时将保留其所需的比例和周围的空白区域，同时还能够很好的平衡图标的视觉重心。
最后加入图标的keyline，keyline由圆形，正方形，矩形，正交，三角形和对角线组成。它可以为您提供图标集中基本形状或比例的一致大小。这使创建视觉上的稳定变得更加容易，并有助于在设计相似比例的图标时有共同的参考准则。
在24尺寸下的keyline构成如下（24尺寸下的出血区域为2）：
当把图标画在网格上时可以很好的规范图标，让它们从整体的视觉上看着统一规范。
标签的数量以及标签的展示形式决定了标签的布局形式，标签的常见布局一共有2种：屏幕等分、图标左右间距相等。
屏幕等分是最常见的标签布局形式，因为不管它存在多少图标，都可以用它进行屏幕划分，计算方法也十分简单，屏幕的宽度除以标签个数就是每列宽度。采用此等划分的案例有：懂车帝、今日头条。
图标左右距离相等多用在标签数量为3个的情况下，计算方法是先去除中间图标的尺寸，然后再左右平均划分等距。相对于屏幕等分，图标左右间距相等划分更为紧凑。
根据菲兹定律，使用指点设备到达一个目标的时间，与当前设备位置和目标位置的距离（D）和目标大小（S）有关。标签栏作为向用户展现产品框架的关键控件，热点区域（可点击区域范围）的设定一定要合理。底部图标尺寸较小，如果将图标作为热点区域，那么可点击区域就偏小，很可能出现用户点击不到的情况，正确的做法是以标签栏的布局作为基础设定，在标签相邻的部分划出一定区域作为不可点击区域，以免用户误操作，参考如下，红色为可热点区域，蓝色为不可点击区域：
在产品设计中，不同样式的图标会给人不同的感受，随着APP风格越来越简洁化，标签栏图标风格紧紧地跟着界面的风格而改变。经过长时间的沉淀，标签栏图标常见的默认设计样式一共可分为四类：线性图标、面性图标、线性+面性图标、轻质感图标。
线性图标通过线来塑造轮廓，在图标设计中使用的线有粗细之分，常用的App图标设计线的粗细一般有2px、3px、4px，不同的线条粗细所带来的视觉感受也不同，我在“如何让你的图标具有说服力”文章中提到过，线条越粗那么图标的性格就越活泼、粗旷，线条越细图标性格就越精致、商务，图标使用描边的粗细可以根据产品的气质来决定。
选中状态：当选中状态为高亮线性图标时，选中状态的图标颜色会与默认状态的图标颜色形成较强的反差，但由于线和线的差异性并不强，线性图标没有面性图标更具吸引力（引导性），即使加入了高亮色识别度也不及面性强。airbnb在处理线性图标选中状态时就考虑到了这一点，选中状态下不仅对图标的颜色做了较大变化，还加大了图标及文字的描边粗细，从一定程度上加强了图标的引导性。（注：线性状态的图标选中状态也可以变为面性图标或线性+面性图标）
面性图标是通过面来塑造形体的图标，采用了剪影的设计形式，通过线或者面去切割基础轮廓面，通过分型来塑造图标的体积感，面性图标的承载信息相对与线性图标来说更重，更具有引导性。
选中状态：面性图标的选中状态为高亮面性图标，颜色可以为纯色、也可以为渐变、透明。爱奇艺的选中状态就采用了高亮面性图标的展现方式，除了把图标底色及文字的颜色加深以外，还加入了品牌色，甚至为了让“会员”标签更加突出，还单独对“会员”标签的颜色进行了修改。
线面结合图标相较单一的线性图标或单一的面性图标样式更加丰富、也更富有趣味性。从设计的角度上说，由于元素的多样化，设计更容易获得好的效果。相反，如果运用不当会显得图标非常杂乱，如何有效的把控好两者之间的过度是关键。
选中状态：线性图标的选中状可以为高亮的线性+面性图标。懂车帝在处理标签选中状态时就把图标底部加入了高亮黄色圆形块状，即保存了线性也添加了面，加深了选中状态的视觉重量，更加明确的让用户感知自己所处的位置。
轻质感图标层次简单，用色素雅干净，采用轻投影、轻渐变的方法设计，这类图标具有一定的立体感，能给人轻盈、简洁、精致的感觉。轻质感图标在标签栏中运用的较少，在特殊情况下才会使用，例如盒马，就把轻质感图标用在了首页标签与盒马小镇标签，首页标签的引入是为了让用户加强对品牌形象的认知，而盒马小镇标签的引入则是为了加强图标的引导性。
*图标样式的常用变化（选中与未选中）
在我调研上百种应用程序中，发现主流的APP标签栏样式变化大致分为六种：线性-线性、线性-面性、线性-线+面、面性-面性、面性-线+面、线+面-线+面。虽然标签的样式变化繁多，但是使用率最多的是“由线性转面性”标签。
标签栏的不同展示形式会给用户带来不同的使用习惯和使用感受，常见的标签展示形式有四种：图标+文字、纯图标、纯文字、舵式。
图标+文字是最常见的标签展示形式，为了让用户能够很好的明白图标的意图，所以在图标下方会配有文字提示，这样就能大大的降低误读的可能性。正因为有文字提示，所以没有必要过于担心图标的识别性问题，那么图标就可以得到更深的延展，可以做的更有趣，更具有产品气质，甚至可以代入更深层次的动效。
例如东家·守艺人APP，专门售卖各种手艺人的亲手制作的各种艺术品，面向的对象是喜欢传统文化的人群，在这样的背景下东家结合宋体的笔画（笔画拆分）把图标设计的更加传统、古朴，创造出具有东方韵味且极具形式感的图标设计。
采用纯图标展示形式的产品比较少见，纯图标样式的最大缺点就是识别性低，没有文字说明会导致用户很难找到自己想要去的位置，也不明确自己所处的状态。所以我们如果要设计纯图标形式，那么必须要考虑到图标的识别性问题，间接的舍弃掉图标更多的延展性，让图标变得更规矩。（识别性的提升我之前写的图标文章中提到过，主要可以从大众认知隐喻与真实世界映射两个方向出发去提升）
使用纯图标样式的产品特征：产品单一、领域垂直、小众化、用户群体接受度高。即使满足这些条件下产品使用纯图标标签，用户第一次使用往往也是比较迷茫，需要等用户熟悉后才会得到好转，所以一定要慎用。除此之外不太建议用于电商、视频、学习、社交等领域。
对于我们设计师来说使用纯图标样式的产品中最为熟悉的就是花瓣了。
采用纯文字展示形式能够更直观的让用户进行操作，遵循简单易用的原则。适合用户群体跨度较大的产品，多用于直播类、内容类、简单工具类APP中。缺点也显而易见，图标样式比较单一，没法加入更多趣味化、具有产品特性的元素到标签中。
采用纯文字展示形式的产品有很多，最熟悉不过的就是抖音，抖音的标签默认状态下采用了纯文字形式，选中状态则把文字高亮显示，并且底部加入了圆角矩形，对于用户群体跨度较大的产品，这样的展现形式再好不过了。（抖音在途中改用过图标+文字格式，不过后面也放弃了，我当时用着图标+文字类型的抖音，的确感觉太奇怪！）
舵式标签可以看为底部标签式导航的一种变体。它在后者的基础上，突出强调了一个标签并且放在中间的位置，样子看起来像攒了一个舵，所以取名为舵式标签。一般舵式标签的颜色、大小等视觉表现会被设计得和其他普通标签有所差异，通过视觉对比的方式吸引用户关注。舵式标签通常和产品框架体现无关，大多数应用程序使用舵式标签是用来承载系统功能。起初是因为社区类APP为了激励和方便用户随时随地地输出UGC内容，所以把触发用户创作/发布的功能按钮放置在标签栏中。
因为舵式标签可以很好地承载产品的重要功能，而被许多的应用程序设计所采用，经过越来越多的应用采用舵式标签，使用的形式也越来越多样，它现在并不再单一地用于承载产品功能，而是配合营销场景、付费场景，给产品的变现、拉新赋能。拼多多就把它拉新的主要入口作用到了舵式图标上，并且为了让图标更加显目，甚至把图标做成了轻质感的形式体现，同时也通过2像素的线性图标减弱其他4个标签的引导性。
标签栏不仅是向用户展现产品框架的关键控件，还可以贯穿整个产品的商业价值的体现，它是连接着整个产品最重要的顶层信息。如果想要让标签变得更加丰富，想要标签内容中含有更多的情感需求、 商业需求、运营需求，那么我们可以重点从这两个层面考虑：视觉层面、交互层面。
在视觉层面上我们可以迎合用户的偏好与期望，通过丰富视觉体验的方法来增加内容的观赏性，这样不仅能够很好的向用户传递着产品调性还能吸引用户关注以及引导用户进行操作。
装饰性图标仅仅是用来提升整个界面的视觉体验，通过丰富视觉体验的方法来增加内容的观赏性，这样不仅可以吸引并留住用户，还可以让整个用户体验更加积极。
整体装饰性图标的出现往往是为了满足情感需求与商业需求，整体装饰图标并不是一直存在的，它的特点是季节性与周期性，并且它并不具备任何功能性。
从情感需求出发设计装饰图标：例如世界杯火热进行时，优酷为了满足用户的情感需求，就把标签栏的图标全部替换为带有世界杯元素的图案，让用户与其产生情感的共鸣。
从商业需求出发设计装饰图标：现在的年货节，之前的双十二、双十一、618等，每到节日促销活动的时候，很多电商应用都会换上装饰性图标，例如一号店，在过年前就把标签栏图标全部改为含带过年气息的元素，提前来预热活动，引导用户消费。
单个装饰性图标的出现大部分都是为了满足运营需求，运营为了推出某个活动或功能，往往会单独装饰某个图标的设计视觉，以便于提高图标的引导性，最直接的例子就是我刚才提到过的拼多多。
我们可以在标签中加入更多的品牌基因，让其与品牌产生联动性，这一形式是大部分应用程序都在做的，我们可以从这6个层面加入品牌基因：品牌颜色、品牌LOGO、品牌元素、品牌名称、品牌性格、品牌吉祥物。
色彩是图标设计中重要的构成元素之一，我们可以直接提取品牌色作为图标设计视觉元素。例如站酷，站酷的品牌色是黄色，标签栏的图标（选中状态）就提取了品牌的黄色，让其与品牌调性高度一致。
当然品牌颜色除了可以直接用外，还可以在提取时适当调整色彩的饱和度、明度，做更多的形式变化。例如懂车帝，就在原有的黄色基础上做了些许调整，图标采用黄色透明渐变的处理方式，在与品牌颜色呼应的同时，使得整个图标更加精致、有活力。
提取品牌LOGO是最常用的使用方式，我们从品牌中提取出来的图标一般运用在APP首页标签。因为首页是APP中最重要的页面，也是进入APP默认的页面，把首页图标替换成品牌LOGO，能反复加强了用户对App的LOGO印象，这样不但使App内外形成了视觉联系，同时也二次传递了品牌形象。例如大众点评，它的首页标签就用了品牌LOGO，同时也使用了品牌颜色。
我们可以在品牌中提取它识别性较强的局部元素作为图标。例如虎牙直播，它就提取了品牌卡通形象的外轮廓作为首页图标。
品牌提取的元素并不只是所见到的品牌视觉形象，还可以提取与品牌内容强相关的元素。例如QQ音乐，它并没有把它的品牌LOGO直接放于其中，而是通过大众所熟知的音符作为首页图标。
如果你的品牌还不为大众所熟知，那么为了强化用户对品牌名称的认知，可以把品牌名称直接放入标签栏中。例如MONO，就把它的名称分为四个字母分别放在了4个标签内，需要注意的是这类图标不能单独出现，因为它本身不具备识别性与引导性，必须配合文字一起出现，这样才能让用户理解标签的真正功能，我们不能为了设计而设计。
图标风格可以与品牌性格保持一致，一套带有浓厚品牌感的图标，会让人记忆犹新。例如：每日故宫，它的图标就非常具有特色，结合了品牌的性格以及定位，加入了众多的古代中国元素，整体看起来有股浓浓的古韵之风。
现在大部分品牌都会含带吉祥物，我们可以在设计图标时提取吉祥物的外形，把它用于产品的标签中。例如盒马，它就把吉祥物做为了底部标签，不过需要我们注意的是如果吉祥物的风格与我们的图标风格差别较大，我们就需要对它做风格化的处理，不然看起来就十分突兀。（盒马对吉祥物做了轻质感的风格化处理）
让用户自定义的标签现在越来越常见，而每个产品对其思考的层面也都有所不同。自定义标签往往出现在个人中心，它会根据用户上传的头像或用户的捏脸生成图标。
目前市面上很多APP都把用户上传的头像作为了个人中心标签展示，例如我们常用的百度网盘就采用了此方案，当用户注册未上传用户头像时，会默认显示系统标签，当用户上传完后就会显示用户头像，并且如果你是会员，还会把会员标示显示在标签的右上方，彰显会员用户的尊贵性。
我们可以很明显的发现百度网盘的底部标签默认状态为线性图标，而个人中心不管默认状态还是选择状态都为面性图标，所以如果你想要加强个人中心的引导性，那么可以采取此方案。
捏脸功能作为SOUL的一大特色，捏脸的虚拟形象赋予了真实人格属性，加强了社交的传播性，所以SOUL决定把用户自定义的捏脸放于个人中心标签中。
除了对标签做视觉的提升外，我们还可以对其加入合理的交互效果，一方面可以提升用户在使用产品过程中的乐趣，另一方面还可以为用户提供更多便利，从而增强用户体验。
在不同的状态下点击标签的功能也不一样，一个标签可承载2到3个功能，可以满足不同状态下的用户需求。
SOUL的广场标签（进入选取页+刷新）
SOUL的广告标签承载了2个功能，当你处于其他标签时，点击广场标签则直接进入到广场页面；当你处于广场页面中时，再次点击标签则会刷新整个页面。
有货的发现标签（进入选取页+上传图片）
有货的发现标签也承载了2个功能，在设计上运用的非常巧妙，当你处于其他标签时，点击发现标签则进入到发现页面；当你在发现页面时你的发现标签则变为了上传图片标签，可以点击上传图片。
淘宝首页标签（进入选取页+刷新+置顶）
淘宝的首页标签同时承载了3个功能，当你处于其他标签中，点击首页标签则直接进入到首页页面；当你在首页页面第一屏时，你点击首页标签则会刷新整个页面；当你滑过3分之1屏时，首页标签的功能则变为置顶。所以在不同状态下首页标签也会具备不同的功能，并且每种状态下的标签样式也是不同。
爱奇艺首页标签（进入选取页+到达指定位置+置顶）
爱奇艺的首页标签也是同时承载了3个功能，不过它与淘宝有些许不同，爱奇艺并不能刷新页面，而作为替换的功能是直接到达指定位置“猜你喜欢”。
我们做的设计不要仅限于视觉所看到的，还要考虑到所触摸的、所听到的，我们可以利用触觉与听觉去辅助用户确认自己的选择，当然我们一定要合理利用，反之则会让用户感到十分反感。
西瓜视频与今日头条在点击标签栏图标时手机就会发出轻微的震动，给予了用户很好的点击反馈。
SOUL点击星球标签时手机就会发出恋爱铃声，在SOUL的产品报告中，SOUL主要面对女性用户，女性用户约为男性用户的2.4倍（女人更偏感性），并且它的主要需求是满足测试、匹配、交友，所以恋爱铃声能够很好的引起用户的情感共鸣。不过铃声有利有弊，当你在特定场景下使用SOUL时，点击到星球标签周围人也都能听到恋爱铃声，实属尴尬，所以我在特定场景下使用SOUL时都会默默的关掉声音。
精彩的图标动画，对整体的设计具有画龙点睛的作用，降低标签切换时的枯燥感，提升操作的愉悦度和期待感。甚至可以通过 tab 的动画设计给用户传达出整个 APP 设计的品牌及理念。标签动画往往都比较简单，主要有：缩放、旋转、颜色过渡、位移、抖动、填充、线性轨迹、结合容器、元素介质等。接下来我们来看看SOUl、虎牙、汽车之家是怎么做的。
SOUL的底部标签栏运用到了弹性动画、结合容器以及线性轨迹。带有弹性缩放的标签反馈，让整体的设计更加具有趣味性，相比线性缩放也更有视觉冲击力。图标的运动规则：先从 0 放大到最大（数值根据实际情况设定），然后再回弹至正常大小。除了弹性动画外，它还结合了容器的元素对内部进行了颜色的替换以及单线条的轨迹动画。这样的处理不仅趣味性十足，还强化了选中当前状态，整体标签切换的一致性也较高。
虎牙一直是我比较喜欢的直播平台，它的底部标签动画也是非常值得借鉴，运用到的动画形式是抖动与趣味表达。抖动是通过图标的左右、上下快速位移或旋转形成，整体的动画效果节奏较快，具有一定的速度感，使整个标签切换的情绪表达较为俏皮、可爱。除了抖动外还在切换过程中代入了更多小元素的趣味表达，赋予了图标更多的性格，对我们的设计进行再升华，从而提高整体设计的质感和趣味。
因为用户群体的不同，汽车之家在标签动画的设计上也相对简单、严谨，它的动画形式主要是结合容器与细节晃动。选中效果由线切换为面，并加入了品牌底色，这样能够清晰的给用户传达当前页面。并且为了不使整体的切换效果变得生硬，在切换过程中采用了透明度与弹性缩放，让其过渡的相对柔和。在细节的处理上也是非常用心，每个图标都带有笑脸的形状，间接的给用户传达“笑脸”信息，在选取标签时内部形状会轻微晃动。整体来看汽车之家的标签动效虽然偏向严谨，但是在细节上也给予用户传达了更多的情感。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系
作者：黑狮力 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
一.什么是选择器
选择器是一个输入字段， 用户必须在其中选择一个（或多个）选项，这与文本字段中用户可以自由使用的输入区不同。选择器具有各种不同的形状和形式。下拉菜单，复选框，切换按钮，滑块等都是不同类型的选择器，但它们看起来彼此并不相似。这些类型的选择器之间的主要功能差异是用户可以选择的选项数量：一个或多个。
二.选择器的类别
-单选选择器
-多选选择器
1.单选选择器
单选选择器按效果又可以分为：点击选择器、滑动选择器、多联动选择器、开关选择器、可搜索效果的选择器、地图选择器。
特点：同一时间只能选择一个选项，当你已经选择完一项后，准备选取另一项，那么后选的一项会立刻使先选的一项被取消选择。
1-1点击选择器
点击选择器可分为两种状态，状态一为立即触发，当你点击后会立即跳到下一步操作；状态二为再次确认触发，当选中某项时，不会立即触发操作，而是需要再点击别的触发类组件（如保存按钮）后，再执行操作。
-立即触发式：
特点：直接进入，并没有再次确认的按钮，可以让你快速到达想要的目的。
建议：虽然目的能快速达到，不过也很可能会造成误操作，所以在设定这类选择器时要多考虑手指的触碰区域以及每个选择元素的距离，同时正因为是直接跳转，所以应当加入一些操作提示。
举例：汽车之家在用户选择二手车时就会出现此选择器，当我在汽车之家想要选择二手车时，它会弹出立即触发式选择器控件，我们在控件上可以看到有7个圆形选项，分别为：汽车之家诚信联盟、准新车、奥迪、奔驰、宝马、三厢轿车、分期购车，当我点击“奥迪”选项时就会立即跳转选择后的页面，为了让用户知道自己选择后的状态，在跳转页面时还会弹出非模态弹窗的文字提示“共找到1943辆车”。
-再次确认触发式：
特点：这是最为常见的选择器类型，当所在选项选上，除了选择另一个选项之外，便没法取消选中状态。（选且只能选择一个选项）
建议：在设定此类选择器时我们应该从产品的角度去考虑是否给用户一个默认选项，甚至是否考虑给出一个重置按钮。
举例：我刚注册小红书时，在小红书填写信息页面中，它的默认选项是“男”，我点击“女”，则会自动取消掉“男”，它们两者并不能同时存在，并且只有我点击下一步按钮时才会正式确认我选择完成。
1-2滑动选择器
特点：滑动选择器是将需要选中的内容滑动至中部，然后点击确认按钮确认选中后返回选中内容。大多数运用在选择时间或地址上。
建议：滑动选择器的展示区域有限，部分选项会被隐藏，最好是当用户对所有选项都比较熟悉、有预期的时候，才使用它。为了保证手机屏幕触控精度，以免发生误触，滚轮选择器建议控制在5列以内。
举例：在小红书填写年龄信息时，我们只需用手指在区域内滑动即可选择想要的选项。
1-3多联动选择器
特点：多联动选择器是由两个或两个以上的中继器制作而成，第一个中继器选择后，一般会对第二个中继器进行筛选，不过因为显示的区域有限，所以当你要切换时，还只能挨个切换，效率低下。
建议：可以通过数据以及功能来减少选择时间，例如在选择地区时，根据当前GPS定位地理位置，定位相关省级信息及名称，减少滑动操作。
举例：如下，当我选择了内蒙古自治区，那么2级内容就应该筛选掉内蒙古以外的城市，比较适用于省份-城市或者品牌-产品这种类似的选择，当然下面第一张多联动选择器也结合了滑动选择器。
多联动选择器展示的方式非常多，不仅可以用滑动形式展示，还可以用点击、平铺列表等形式展示。
在左图选择城市时，我们必须要先选择省份，再选择城市，最后才能选择县；
右图则没有先后顺序，不过当你首先选择颜色时，如果没有相同尺码的衣服，缺货的尺码则不会被选中，先选择尺码也是相同道理。
1-4切换开关选择器
特点：切换开关选择器有且只有两种选项，用来在开和关两种状态之间切换。开关属于触发类组件，拨动开关时，它所指挥的某个操作会立即生效，常见的使用就是授权。开关的默认状态并不都是关闭的，还要从产品本身的设定上来决策。
建议：如果某开关的功能是用户经常使用的状态，那么可以在默认状态下打开开关，不过需要注意的是在某些特殊的开关按钮需要打开时，必须要提前告知用户。
举例：当我打开UC浏览器的设置时，它的辅助功能就使用了切换开关选择器，切换的开关只需要点击即可。
1-5可搜索选择器
特点：可搜索选择器一般用于选择项较多时，特别是对于电商购物类的APP搜索选择器是必不可少的，搜索选择器会根据用户输入的内容，对中继器进行模糊的搜索，让用户快速找到并选择内容。
建议：在搜索区域输入文字时，可给予用户更多的文字提示以及以及引导类信息。
举例：小红书在搜索时就会出现数字化的信息提示，这样能够很好的引导用户进入到想要的搜索结果：笔记或者商品页面。
1-6地图选择器
特点：作为最特别的选择器，它的功能是复杂的，它的操作方式也是多样化的，地图选择器的操作可点击、可拖拽、可放大缩小等等，它多用于生活类APP。
建议：可以在选择器中加入更多趣味、互动、可感知的设计，如加入过节元素、车辆行驶路径、热门区域、甚至选取后手机的震动等。
举例：
打车类APP必用的地图选择器，滴滴出行的用户可以实时看到车辆信息，可以采用点击、拖拽、放大等操作来选取上车地点，选取后还有文字信息提示，让用户确认操作是否正确。
贝壳APP则用地图选择器来让用户选择二手房，同时也采用了联动式的效果，第一步是查看区域，可以明确看到区域的售房套数，点击选择区域后我们可以看到每个路段的房子套数，点击路段后就可以看到每个楼盘的套数以及均价，直到点击楼盘就会弹出详细信息框。这样有助于用户在选择二手房时从大数据分析二手房的情况，有更好的对比性与选择性。
2.多选选择器
当单选选择器不能满足用户需要时，这时我们就可以采用多选选择器，一般常用的多选选择器都是采用点击的方式，当然也有滑动类型的多选选择器。
2-1点击多选选择器
特点：当用户想要选择多个类别的情况下，我们就可以用点击多选选择器来展示提供给用户选择，通过屏幕点击选中或取消选中该选项，它不会立即触发操作，需要再点击别的触发类组件（如保存按钮）后，再执行操作。
建议：从用户的角度来讲尽量不要强制用户选择数量或者默认全部数量；多选项时触碰区域不能太小，以免造成误操作。
举例：小红书在选择感兴趣的内容时就采用了点击多选选择器，不过在选择兴趣时它就强制用户至少关注4个兴趣，而对于单兴趣或者少兴趣的用户来讲，这无疑会造成用户体验的不佳，被逼再次从中选择次要的兴趣。
2-2滑动多选选择器
特别注明：从用户的角度来看，它可以选择多个区域段的内容，所以我把它分为多选选择器中。
特点：当系统给出的选项不在自己的选择区间时，可以很好的自定义选择区间，把定义权限交在用户手里。同样，它需要再点击别的触发类组件（如保存按钮）后，再执行操作。
建议：在用户滑动操作期间要有明确的操作提示，让用户时刻感知目前处于的状态；滑动区域尽量不要超过100刻度，如果刻度距离太小，用户在滑动时也很难精准的选择范围。
举例：在汽车之家APP中，当我要选择汽车价格范围时就会出现此选择器，我们可以用手指滑动来选取它的价格区间，相对于上半部分的单选价格拓展性更强，用户可以自行选择上半部分的单选选择器，也可以选择滑动多选选择器，给予用户更多的选择。
三、选择器的十大应用要点
1、简单易懂
标题易懂：
在选择器中标题一定要简单明了，很快的让用户知道他在为什么做选择（如：当你关注某烹饪的APP后，它会让你勾选喜欢的菜谱，你的标题就可以用“选择菜谱”四个字，简单明了）
文字标签易懂：
一般使用短语而不是句子，也并不需要用标点符号来结尾。（如：当选择想要的菜谱时，菜谱后的文字不需要加入标点符号）
选取状态易懂：
用户能够明确感知什么是选中状态，什么是未选中状态，什么是禁用状态。（如：选中状态为高亮显示，未选中为普通显示，禁用状态为灰度显示）
反馈提示易懂：
当你在选择中遇到选项限制或是否需要确认操作时，反馈提示一定要一目了然。（如：当你选择某衣服时，S码不能选择，则会用灰度显示的文字代替，甚至可以用中横线划过文字，明确告诉用户不能选择）
2、基本排序
从逻辑顺序：
逻辑排序能让用户很快很准的找到自己需要的选项，特别是对于选择地址/时间/个数等常规的选项时，可以按照字母/远近/大小来进行排序。例如下面在选择地址时，就是按照A-Z字母排序，这样可以大大节省用户选择的时间。
从产品利益角度排列顺序：
当然为了产品自身的利益也可以自己优化排序方式，选项的顺序可以说服用户进行选择，用户可能因为第一个选项在列表中的位置而选择了第一个选项；可以辅助用户，也可以让用户向着产品所希望的方向倾斜。例如你在选择菜谱时，产品为了让用户选择更加优质的菜谱，就会把用户评价高的菜谱放在前列；当然商家也会这么做，例如你要去买某款商品，商家会在选项中把热门、优质的产品放在最上方，让你优先选择。
从用户体验排列顺序：
从用户角度来说哪些对用户体验好，那么就把它排在前面。例如汽车之家在进行车辆类别的排序中就把用户量最多的轿车排在第一位，而把用户量最少的轻客放在了最后一位；同样它在汽车品牌选择中，单独列出了热门品牌把它放在前列，让用户进行快速选择。
3、一致性
视觉布局一致：
每个元素之间的对齐、元素与元素之间的间距、按钮不同状态的视觉体现。一般情况下移动端更倾向于左对齐，这样有利于快速读取选择内容，可以提高用户的浏览效率并减少错误。
图片/插画风格统一：
在图文结合的选择器中，我们一定要保证图片（插画）的优质以及风格的统一。
4、合理运用默认选项
默认选项是选择器的开始状态。在不同的选择器中有不同的默认方式。
默认未选中：
这是最常见的一种状态，特别是对于选择年龄、生日这些个人隐私信息，系统也没有办法进行默认选择。
默认选中其中一个选项：
要想默认其中一项，必须考虑两点因素，因素一：你想要潜意识的像用户传达信息，在单选选择器中默认选择一项后，就可以潜意识的向用户传递信息必须要在这组单选项之中选择一个。因素二就是产品的倾向，例如此产品的性别9成都是女性，那么建议默认选项为女性。
默认选中全部：
其实默认选中全部在用户体验上来讲真的不是那么的友好，例如微博这个选择器界面，刚进这个界面时已经全部勾选中，并且当你没注意习惯性的点击下面的按钮时会生立即效，没有返回的余地。（吐槽：有些APP甚至没有一键取消功能，要一个个的点击取消...）这也是为了产品牺牲掉了部分用户体验吧！
5、给用户更多选择
单选选择器的更多选择：
如果用户不想做出选择，那么应该提供一个中立选项，为用户提供一个明确的方向，中立选项比勉强选择要好。例如在选择行业领域时，以上并没有你所处的领域或你不确定你的领域，你就可以选择“不限”或“其他”。
多选选择器的更多选择：
在多选选择器中，如果不能把控到用户的准确选项区间，那么可以考虑滑动多选选择器，让用户有更多的选择区间，不管是汽车之家还是懂车帝在选择车辆价格上两者都是采用的相同方式。
6、控件状态
选择控件在操作过程中必须更改其状态/外观，要明确让用户知道是否能选中，是否被选中。控件状态一般分为三种：未选中、选中、禁用。
未选中
选择器的开始状态，向用户表明，可对该选择控件进行操作。
选中
用户操作选取状态，选择控件处于被选中的状态。
禁用
一般情况会为灰色显示，用户将无法与选项进行交互。
7、操作提示
指的是用户在操作中让用户得到相应的反馈，用户根据这些反馈可以判断当前状态以及操作后状态。在选择器中，操作提示一般用辅助文案提示及非模态弹窗提示。
辅助文案提示（选择前与选择中）：
辅助文案指的是在选择控件主体之外另外放置一些文案信息来充当说明，例如下面是地区选择，我在选择不同层级的区域时，它的上方会出现辅助提示文案，让你明确的知道你上一层级选择的是什么。
同样，当我在选择价格区间时，滑动选择器的左上方一样有文字类的提示：
非模态弹窗提示（选择后）：
非模态弹窗一般出现在用户操作完的跳转页面中，为了让用户感知所选的选项在页面的状态，如下，非模态弹窗告知用户一共有7辆车符合标准。
当然除了非模态弹窗外，还有模态弹窗，但是用户体验极差，目前很少使用，所以就不列出来了。
8、合理使用操作区域
扩大点击区域：
在选取按钮类的操作时，容易出现点击不到或误操作的现象，我们可以通过扩大点击区的交互区域来提高易用性，例如下图，虽然按钮在左边，但是可以把横向区域都列为可点击区域。
当然我们也可以从设计的角度来扩大视觉范围，从而也提高了点击范围，这样的处理不仅提升了视觉层面，还提升了交互体验。（图文结合方式）
注意交互间距：
在元素与元素之间一定要有合理的交互间距，不然很容易出现误选的情况。
合理利用有效区域：
在选项较多的选择器中，我们可以利用好选择主体控件之外的区域，例如在选择城市/品牌时，我们可以做A-Z index式字母交互区，帮助用户快速找到想要的选项。
9、趣味性
让用户选择本来就是一件枯燥乏味的事情，如果让这件事变得有趣那么会极大的提升用户体验。
从文本层面：
例如当用户填写性别信息时，你给予用户的文字信息并不是“男”/“女”，而是“帅气的boy”与“酷酷的girl”，这样会让用户觉得这是一件比较有趣的事情，而不是被动选择。（注：这样的取名一定要符合产品的特性）
从视觉层面：
加入可玩儿性的选项，例如汽车之家的头像切换，可以选择自己喜欢的头像。（头像并不是强制选择的，如果不进行操作则是默认选项）
从交互层面：
让用户去享受选择。例如Soul的星球首页就做的非常棒，在未选择状态他的人物会360度围绕着转动，当然你也可以快速拖拽，或者放大缩小，可玩儿性十足，并且在内部设定了最匹配/新人的高亮显示，协助用户去选择。
10、合理使用选择器
不同的产品在使用选择器时都各有不同，因为每个选择器都有他的利弊，而真正要怎么去选择还要根据产品本身来定。
那么我就拿目前市面上最常见的5个地址选择器的类型来分析一下利弊：
1/多联动选择器（平铺式）
货车帮采用的是多联动平铺式选择器，它最大的特点就是能够一眼就看清楚所有地址，不过地址多时需要花时间去找，只是当你经常使用此功能时便会形成记忆，再此搜索的时候就能形成记忆点击，效率很高，并且在操作外还有路径提示，不仅可以帮助你记住层级选项，还可以实时返回路径进行重新选择。
手势操作：点－点－点
2/多联动选择器（列表跳转式）
闲鱼采用的是多联动列表跳转式选择器，这个选择器最大的缺陷就是选择三级之后用户可能会忘了上一级的内容，那么就又要切换到上一级，闲鱼采用它的原因是因为它只有二级联动，不存在遗忘现象，不过这样列表式的选择效率并没有平铺的效率高，人眼习惯扫视横向内容，所以横向的内容获取往往要比纵向的多，在地址选择器上我个人是不太建议采用多联动列表跳转式，因为并不高效也不直观。
手势操作：滑－点－点
3/多联动选择器（列表式）
转转采用的是多联动列表式选择器，它的优点是可以根据右侧字母来找城市，数据偏大也能够很快的查找。不过如果在层级的选项中出现错误，同样就要切换到上一级，并且在操作中没有辅助信息提示。
手势操作：滑/点－滑/点
4/多联动选择器（下滑式）
安居客采用的是多联动下滑式选择器，这种形式的选择器不会遮挡后面的主要内容信息，在选择完地址之后能立即看到地址的筛选结果。优点是能快速选择多级地址，并且层级分明，扩展性较强可以做成地址多选。缺点是不适合3个层级以上的地址选择。
手势操作：点－滑/点－点
5/地图选择器
美团外卖采用的是地图选择器，这个选择器一般用在需要精准定位的生活类APP中，它的优点就是能够快速精准定位，并且自动录取定位信息，它的缺点也显而易见，不能含带层级并且对范围也有约束。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系
作者：黑狮力 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
新冠疫情后，如“健康宝”这类的小程序逐步成为大家生活中必不可少的应用工具，并且大量线下商业场景如教育培训、百货购物等通过小程序方式快速实现了线上“营业”，使得“小程序”这类商业解决方案，更加被大众认可并获得新一轮快速发展。
而小程序的快速发展离不开其“生态土壤”——“分发平台”的助力。作为分发平台，为了满足C端用户的多元化需求，必然要在供给端市场上争夺优质B端商户。为衡量分发平台对B端商户的吸引力，需要用一套完善的评估机制。
这种评估的衡量主体不再是我们熟悉的C端用户产品，衡量范畴也不应仅局限在功能易用、体验流畅等传统用户产品体验维度上；而是转化到平台与B端的生态视角，分析内容或服务供给者与分发平台之间合作流程、合作意愿，以及分发平台的生态健康度。
那么如何开展面向B端的“生态评估”，如何设定合理且全面的评估指标，如何客观的解读评估结果，本文将从这些方面与大家分享我们在ToB视角下评估中的若干发现。
///
1、『评什么』评估体系建立
| 明确目标：理解B端商户诉求
传统意义上，一款C端产品主要为了满足用户的某项特定需求，诸如搜索、购物、社交或地图导航等，其产品目标往往聚焦在完成一系列特定操作，并注重提升可用、易用、好用等维度的体验感知，从而提升用户活跃、留存等数据结果，及品牌口碑。因此C端产品评估的核心指向是“体验”，体验是产品必须重视且保障的“红线”。
而在小程序生态中，B端商户作为小程序分发平台上服务或内容资源的供给方，最核心的诉求是以其独特的服务或内容资源，在分发平台获取对应的流量，从而产生订单、广告线索等商业利益。体验不再是唯一重要的评价维度，有时甚至会让位于对商业利益的考量。同时分发平台为获取B端商户丰富优质的服务或信息资源，功能布局必然导向满足B端商业利益的实现。因此对B端商户的诉求应该从合作“伙伴”视角去理解，评估的核心指向是“利益”，在利益之下体验成为“可选项”而非“必选项”。
理解了ToC与ToB两种业务的需求差异后，我们将更容易明确ToB指标设定和解读的重点。
| 设定指标：梳理生态产品内在的复杂结构
围绕着ToB业务中商户与平台间的利益共赢的底层逻辑，并通过对行业中多类B端分发生态产品的评估体系进行桌面研究及规律总结，我们认为以下三个链条可以描述B端分发生态产品的复杂结构：
1、流程操作层：“账号入驻-上线&迭代-数据分析-信息互动等”的操作链条，指向商户日常运营操作的CRM系统，建设目标是流程顺畅、操作便捷；
2、规则秩序层：“审核要求-规范建议-等级体系-权益激励”的秩序链条，表现了平台意志及价值观，定义了商户做什么被奖励，做什么被惩罚，构建了以权益为中心的成长激励体系，形成了奖惩规则秩序，建设目标是规则清晰、秩序井然；
3、资源能力层：“分发获客-私域沉淀-运营召回-变现转化”的收益链条，指向服务和内容的分发能力，及触达用户后私域沉淀及运营能力。建设目标是流量资源充沛，运营能力及工具有效，能带给商户实际利益，代表的是生态平台的实际吸引力。
由上，依照上述三个链条，对应的评估体系如下：
///
2、『如何评』评估方案制定
| 划定填答内容：明确“谁”可以“回答什么”
由于评估主体是商户，不像传统C端用户是“决策”与“执行”的统一体，商户内部存在决策层（CEO/小程序负责人）和执行层（商务、产品、运营、研发等）的角色分离，导致不同角色能贡献的信息并不相同。
具体而言，决策层通盘考虑公司的战略目标及布局，关注能带给商户实际利益的“资源能力层”指标，如流量，私域运营效果等。执行层更聚焦在目标实现中的执行效率、体验，可回答“流程操作层”、“规则秩序层”的指标，如流程操作的顺畅性、审核要求和规范建议的适用性等。
如错邀决策层回答执行层面问题，将无法得到细节问题的症结所在；如果错邀执行层回答决策布局问题，也不可能得到准确全面的答案。因此明确“谁”能回答“什么”问题至关重要。
同时，决策层会依据分发平台提供的商业价值，对比所付出的执行成本，确定是否继续投入。因此两者间的信息存在相互验证关系，引入多角色评估有利于得到更全面的视角。
| 做好抽样方案：长尾分布下分群抽样
B端商户作为生态中的供给“群体”，具有内在群体结构，每个商户为生态提供的价值并不均匀，在生态内可获得的资源也不均匀。符合“贫者愈贫，富者愈富”的马太效应。
少数行业头部商户，自身体量规模大、品牌效应强，如家政行业的58到家、快递行业的顺丰等，属于各自行业内寡头玩家，可为生态提供该行业内绝大多数优质甚至独有资源，通常可获取流量扶持。
而大量长尾商户，自身体量规模较小、品牌效应弱，如社区保洁公司、区域性物流公司等，可供给的资源稀薄、质量参差，多数情况下只能自生自灭。虽然长尾商户个体对平台价值贡献很少，但群体数量巨大，种类繁多，可保障平台供给的多样性，满足用户多元长尾的需求，因此也是生态中必不可少的供给者。
因此，考虑到两个群体在生态内价值的差异，评估需分别取样，并对两个亚群各自赋予结构权重，以便将各自评估得分拟合为统一得分。
对于具体结构权重拟定方式，则需依据平台不同发展阶段的目标重点而定，如发展初期依赖行业头部资源保障用户体验，则头部权重更高；而发展成熟期依赖大量长尾商户保障供给的多样性和丰富度，则长尾商户更高。
///
3、『评出啥』评估结果分析
接下来，我们将引入两个例子介绍评估结果的落地应用。
| 分析各板块得分差异
在不同发展阶段，平台生态建设的目标重点也不同。通过横向对比各指标差异，能够判断出现阶段短板问题，确定后续优化方向。
如上图1，有大量体验问题暴露在“流程操作层”，导致该维度得分低，这是一个典型的处于发展初期的平台生态特征：其基础功能尚未完善，商户入驻/上线等流程操作体验不佳；但早期受益于流量扶持等优待政策，外加开发者尚处于平台摸索期，其对规则秩序和资源能力的满意度相对较高。当前阶段，平台应将精力重点投入在基础流程的建设上，优化基础体验问题，以加速生态规模的扩大。
如图2，当基础流程逐步建设成熟后，开发者对于平台的各类分发场景、运营规则有一定的实践经验后，更容易挑战“规则秩序”和“资源功能”等板块的得分，此时说明分发平台已经进入细致打磨分发场景、运营工具、奖惩规则及权益体系阶段，精力重点应该放在深入理解不同类型的行业打法，拓展分发场景并配以适合的运营玩法的奖惩规则及权益体系，以提升开发者的主动运营意愿。
| 关注不同生态群体得分差异
平台发展初期往往需要扶持头部开发者，打造标杆案例吸引更多开发者入驻，因此这一阶段头部得分往往高于腰尾部。而随着生态进一步完善，腰尾部逐渐找到生存方式，逐渐缩小与头部的差距。而如果腰尾部得分持续低迷，则说明平台后续的发展潜力不足。同样，如果头部从始至终都没有腰尾部得分高，说明示范作用没树立起来，优质资源有流失的风险。这两种都是生态健康度不佳的表现，需要业务加强警惕。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系
作者：百度MEUX 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
为什么同样尺寸的圆形看起来比方形的小？
字体设计师不会把所有字母都设计得一样高。他们会注意到人类视觉的特殊性，所以他们会使用光学技巧创造一个和谐的、可读的、平衡的字体。
在上图中，一个正方形、一个三角形和一个圆在几何上是相等的。然而，我们的眼睛却认为三角形和圆形偏小。这是因为这三种形状有不同的重量。从字体上讲，就是黑色的数量分布并不均匀。
有两种方式能够使得它们保持视觉平衡：
A. 计算两个形状的面积，并保持它们相等
我不喜欢使用这种方法，因为它只适用于简单的形状，如三角形、圆形和菱形。这种方法对于复杂的视觉效果不太有效。
B. 使尺寸更大、超出和模糊形状是测试视觉重量最简单的方法
现在你应该明白了为什么非方形/图标看起来比方形小，让我们看看真正的图标和 UI 元素如何使用这些光学原理变得更好。
在设计整套图标时，确保它们的平衡是至关重要的。为了保持平衡，在图标背板和图标区域之间留出额外的空间，并允许非方形图标超出图标区域。
另一个例子是一个矩形的UI元素和一个圆形按钮放在一起。如果圆形按钮的高度与矩形UI元素相同，那么圆形按钮看起来会更小。基于光学校正原理，你需要区别对待这两个元素。
看看下面的例子，WhatsApp，三星消息，和Swiggy支持聊天。你觉得哪一个更正确?请在留言区发表你的看法。
还有比正方形更正方形的吗?
我们的眼睛有古怪的视觉感知，我们看到的事物与现实不同。下面是一个类似的小测试，你觉得哪个圆和哪个方更标准?
在这些椭圆和矩形中，一个是正圆，一个是正正方形。我已经修改了正确的，但他们似乎更对称了，这是因为垂直-水平错觉。(彩云注：右边是调整过的，看起来会更圆和更正)
大多数几何字体不是几何图形。字体设计师通过牢记人类的视觉感知来设计高质量的字体。他们几乎在每个字母中都使用光学原理，以使字体保持平衡。
你从上面的测试中应该明白了我的意思。要了解更多，请看下面的图片。我把字母“O”从几何字体Futura放在一个完美的圆圈旁边。你觉得哪一个看起来更对称?
你甚至在底部文字出现之前就猜到了，对吧?来自Futura的字母“O”比完美的圆更宽，但看起来更对称。原因是，我们的眼睛倾向于看到的垂直区域比水平区域要长，即使它们是相同的。
让我们看看这个错觉是如何出现在字母“T”上的。
在上图中，水平笔画的粗细要小于垂直笔画的粗细，以避免产生错觉。你可以在设计方形图标、方形背景或头像边框等时使用这个技巧。
如何使驾驶尽可能平稳?
设计字体字形就像开车。当我们开车时，如果已经在弯道的起点时，我们不会转动方向盘，只是在到达弯道前稍作自然转弯，以免发生意外。
字体设计者不依赖于图形编辑软件的预设弧度。他们会调整曲线使其更平滑，因为他们知道人眼可以立即注意到直线突然变成曲线的点。
让我们看看这两种曲线：纯几何和微调。试着观察哪一个干扰了你的眼睛，哪一个是光滑的。
让我们看看在UI设计中我们可以在哪些地方融入这种学习。
你可能已经注意到右边的按钮、图标和框架看起来更赏心悦目。而左边的曲线有一个很硬的从直线到曲线的过渡。
我们如何修正曲线呢?在设计时，可以进入形状编辑模式，手动调整曲线手柄的大小，如下图所示。
为什么眼睛的判断比数值参数更重要?
间距是字体设计中最关键的部分。字体设计师根据字母的形状对字母进行组合，并以不同的间距排列字母。例如，字母A和V是三角形的，包含更多的外部空白。所以，如果它们一起出现，那么它们之间的间距会有点宽，需要减少间距。这有助于形成和谐的字体。
字体来源:Ek Mukta，作者:Girish Dalvi博士和Yashodeep Gholap
现在，让我们看看如何将这个知识点运用到视觉设计的其他方面。你可能已经注意到，在圆形或矩形容器中放置三角形图标会使图标显得不协调。这仅仅是因为当用软件来对齐的容器中，三角形的面积两边是不相等的。看看下面的图片，可以用视觉解释来理解它。
为了使三角形在其容器内具有光学中心，我们需要平衡两边的重量。对于三角形，你可以找到质心，并将其与容器的中心对齐。现在，如果三角形是用形状工具创建的，Adobe Illustrator会提供质心的提示。
如果没有看到质心提示，也不要担心。质心可以通过简单地画线从任何两个边的中心到它们对面的顶点来定位。查看下面的图片来更好地理解它。
这种方法只适用于几何形状。对于其他更复杂的形状，你需要依靠你的眼睛判断，而不是数学参数。
需要记住的是:如果你为开发者切图时，你需要在图标周围保留一些区域，这样他们就可以将图标放在背景的中央。
从图标的质心画一个圈，留下它周围的额外区域。
让我们检查一下，可以在留言区讨论下到底哪个公司使用了错误的资源？
如何平衡?
你有没有仔细注意过字母“B”?它的底部被设计得比顶部大。如果我们设计的两个半圆在数学上是相等的，它会看起来不平衡(检查左图)。这是因为我们进化到从“视角”的概念来处理物理世界，在这个概念中，远处的物体看起来比附近的物体更小。（彩云注：可以理解为当你在山脚时看到的山脚物体要比看山顶的要大，透视原理）
在印刷中，这意味着要使字体同样平衡，就需要在底部画得更重。
让我们通过翻转字体中的几个字母来看到明显的区别。
字体来源:Ek Mukta，作者:Girish Dalvi博士和Yashodeep Gholap
同样的概念适用于其他水平对称的字母形式，甚至在字母“H”的交叉杠是放在实际的中心以上，使它看起来更平衡。
所以，下次当你设计一个水平的图标或标志时，使用这种底部重的技巧来让它在视觉上更加平衡。
这种错觉也被称为“波根多夫错觉”( Poggendorff illusion)，这是一种奇怪的现象，会扭曲我们对形状相交角度不是90°的感知。出于某种原因，我们的大脑很难推断出一条被其他形状部分覆盖的线，从而导致连续性的中断。为了更好地理解它，先看看下面例子中的左边的图，看看哪条线是连续的，A还是B?然后检查我缩小了封面线的右边的图片。我希望你明白我的意思。
在拉丁字体中，' X '或' x '就是这种错觉的受害者，需要特殊处理使其看起来更自然。字体设计者稍微偏移对角线，以矫正X或X的光学效果。(彩云注：右边是调整后的，视觉上看更加连续)
如果你在为其他语言设计字体或为APP设计图标集时遇到类似的问题，你可以尝试像在字母“X”中那样偏移斜线。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系
作者：彩云Sky 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
如何让自己的产品在保证基本的可用性和易用性的同时，还能让界面看起来柔和、更富有亲和力？一个产品能留住用户的虽然是内容本身的质量与吸引力，但一个小小的细节却能够阻止用户的流失，成为内容转化的最后一道防线，让人眼前一亮，值得借鉴。
076.「百度地图」出行前的“极端”天气预报
077.「搜狗输入法」“跨界”复制/粘贴
078.「支付宝」蚂蚁森林/庄园-模拟现实世界的自然规律
079.「躺平」趣味化的“击掌”点赞
080.「QQ音乐」导入外部歌单-不同的设备/账号歌单无缝对接
081.「微信」简便且高效的图片翻译功能
082.「橙」不一样的的登录方式
083.「高德地图」桌面一键导航-出行更高效
084.「爱奇艺阅读」性别选择-更明确的指引和提示
085.「饿了么」合适的时间、合适的提醒
086.「搜狗输入法」教你少打字、多开挂
087.「美团」垃圾分类-解决餐后垃圾分类之忧
088.「优酷」个性化弹幕设置-看剧调侃两不误
089.「随便走」AR导航-“傻瓜”式操作，老少皆宜
090.「微信读书」模拟现实的行为动作
076.「百度地图」出行前的“极端”天气预报
产品体验：
使用百度地图，导航路线规划后，会出现当日的天气提醒，点击进入即可查看每个时段的天气预报。
设计思考：
“赌博看运气，出行看天气”，任何时候，大家如果优先知道天气情况就可以提前做好准备，这对人们的生活方便起到很大的作用。尤其是出行，天气的变化是影响我们是否携带雨伞、交通工具选择、保暖问题的重要因素，所以提前预知天气的重要性可想而知。
使用百度地图APP，导航路线规划后，出行方式的下方会提示最近可能影响到出行问题的天气变化，便于用户选择更合理的出行方式及交通工具，避免受到恶劣天气变化的影响。还可以通过点击进入，查看每个小时的天气详情，对于时间不是很敏感的用户来说，为了错开恶劣的天气，提前或延迟出行也是一种不错的选择。
077.「搜狗输入法」“跨界”复制/粘贴
产品体验：
电脑和移动端都使用搜狗输入法，且在同一个账号登录的情况下，电脑端出现文字复制的操作后，可在移动端设备任何位置的输入框内直接粘贴，非常便捷。
设计思考：
输入法给大部分用户的第一感觉就是用来输入文字的，哪个好用用哪个，一旦习惯了使用某个输入法，基本就成了忠实用户，不会随意去改变。不过有时候输入法只是辅助作用，并不需要直接使用，比如：我们在电脑网页看到自己喜欢的文案语录时，想发个朋友圈，就需要先复制，再用电脑端微信发到手机微信，最后从手机微信复制再到朋友圈粘贴，虽然很麻烦，用户还是可以接受的，不然通过自己码字就会浪费大量的时间。
搜狗输入法的黑科技一直都很多，比如图片英文翻译、智能助手、文字扫描提取等，都是非常实用的功能。最近发现了一个新的设计细节，让人惊呼。当电脑和手机端都使用搜狗输入法且登录同一个账号时，在电脑端复制文字后，打开手机端任何输入窗口，即可看到在电脑上复制的文字，直接粘贴即可，由被动辅助变为主动摄取，再也不用通过聊天工具发送到手机端进行二次复制的繁琐操作了，实现“跨界”复制/粘贴，非常方便。可以看出团队站在用户体验的角度上，对于输入法使用场景的串联考虑是非常贴心的，不仅能再次俘获一大批新用户的芳心，也能提升老用户的使用忠诚度。
078.「支付宝」蚂蚁森林/庄园-模拟现实世界的自然规律
产品体验：
在支付宝蚂蚁森林/庄园里，白天和夜晚分别使用了不同的场景，模拟现实世界中的自然规律，白天晴空万里、且有阳光照射，夜晚满天繁星、且有流星划过，颇具真实感。
设计思考：
几年前QQ牧场养殖、农场偷菜，如今演变却变成了支付宝的蚂蚁庄园养小鸡、森林偷能量，将以前的纯游戏思维转变成了如今的游戏+公益的形式，不仅满足了用户小游戏的需求，还能促进公益事业的发展，同时用户也会得到心理上的满足和成就感。蚂蚁森林/庄园小游戏对用户产生的粘性除了其模式的新颖，也离不开产品团队日夜刻苦钻研所提升的用户体验。
蚂蚁森林/庄园的视觉场景跟随着白天、夜晚的环境变化，产品遵循现实世界惯例来呈现信息，更具真实感，便于用户在使用中将现实中的体验不经意间带入到游戏场景，可使其更加投入，通过用户的现有认知，以促成情感化的体验，使产品更具亲和力。
079.「躺平」趣味化的“击掌”点赞
产品体验：
在躺平APP对其他用户的发表的动态推荐时，使用了击掌图标，且有光彩线条围绕着掌心向四周扩散的动效样式，趣味性十足。
设计思考：
推荐是对其事件/事务认可的一种表达行为，最早可追溯到上古时代的尧舜禹时期，那时候如果对某件事或人，高度认可时就使用鼓掌（慢速且有节奏）的方式来表达；到后面慢慢演变成了简单的一个字“彩”；再到如今皆可用鼓掌、竖大拇指或直接言语...表达。基于互联网的发达，为了让更多人发现其内容资源的优质性，80%以上直接沿用了竖大拇指样式来表达对内容的认可及赞许，即使有区别于其他产品，也是在局部或动效样式上做出一点改变。
躺平APP的点赞样式较为新颖，使用了击掌的图标，并且使用了光彩线条围绕掌心向四周扩散的动效样式，相比竖起大拇指则更加强烈，意味着喝彩，表达了对内容的高度认可，相较于同质化严重的情况下作出了创新， 在过渡的时间差中，进行了趣味化的表达，更具视觉冲击力。
（“击掌”的点赞方式适合用于类似躺平、动漫、B站等二次元或个性化的产品中，如果用于工具、新闻、电商等类型产品，可能会对用户产生干扰，慎用）
080.「QQ音乐」导入外部歌单-不同的设备/账号歌单无缝对接
产品体验：
在QQ音乐我的页面，使用“导入外部歌单”功能，根据提示，即可把其他音乐应用里歌曲添加到QQ音乐歌单。
设计思考：
现在听歌早已不像以前，一张内存卡或一根数据线就可以把手机里的歌曲转移它处。基于人们生活水平的提高，数据流量套餐相比以前更是翻了百倍不止，WiFi基本人手普及，所以大家更倾向于在线听歌，无需下载（除非深山老林或地洞没有信号）占用手机内存，创建一个歌单，把自己喜欢的收藏起来，即时听歌，非常方便，如果没有特别的情况，成为了一款音乐应用的忠实用户后，基本不会频繁转移。
QQ音乐的导入外部歌单功能，可将其他音乐APP的歌单添加到QQ音乐自己的歌单里。对于导入外部歌曲，很多用户没有什么概念，感觉自己用不上，别忘了虾米音乐“尸骨未寒”，很多事情不是没有可能发生，当一旦需要时，这个功能就是“救命稻草”，可以想象，如果通过手动把以前的几百首歌曲一首一首的添加到歌单，不知道会不会“抽筋”。除此之外，还可以将歌单在朋友之间相互分享添加，这也是一种不错的音乐交友方式，实现不同设备、账号的音乐歌单无缝对接。
081.「微信」简便且高效的图片翻译功能
产品体验：
在微信的聊天对话框中打开英文图片，点击下方的翻译功能按钮，即可翻译图片上的外文，并以中文显示。
设计思考：
在我们的生活中，有时候多多少会遇到一些英文，比如进口食品包装、药物说明、护肤品等，其中就有一部分是纯英文说明，无论自己多么博学多才，但不见得都能理解英文。记得之前有一次，我自己的电脑蓝屏，出现的全是英文，虽然自己也是一直提倡用互联网解决问题，且也有一些拍译软件，但一想着需要下载注册，没准儿还要先看广告或收费，且天生对英文有一种与生俱来陌生感，还未开始便放弃了，于是成了伸手党，去请求别人帮助。
微信的图片翻译功能就是专为解决这一问题而生。通过在对话框中点击图片直接翻译，看到一道绿色的光由上而下扫过之后，图片中的英文就变成了中文，着实方便，比起以前通过第三方或先提取图片中的文字来翻译，操作简单且效率还提升了很多，可以说是一个非常实用的小功能。
082.「橙」不一样的的登录方式
产品体验：
在橙APP的登录页面，区别了常见的登录界面样式，使用对话聊天的方式按流程提示用户完成登录，界面流程方式新颖，浓厚的社交行业属性。
设计思考：
在任何应用中，要想有自己的“私密”领地，都绕不开登录/注册的流程，但凡手持智能手机又想玩的开的用户，对登录的流程是非常熟悉的，比如手机号+验证码、一键登录、第三方登录，无外乎这几种常规的登录方式，如果想来点“刺激”的，无非就是加个logo、贴个插图、来点动效等，见怪不怪了。
橙APP的登录方式虽然同样是手机号+验证码登录，但在流程样式上却非常新颖。鉴于应用本身属于社交行业，通过对话询问的方式让用户按照流程输入了手机号和验证码，给用户造成这不是对使用该APP设置门槛的错觉，降低用户的防备心理（很多产品用户量的增长都被挡在了登录之门外），让用户不知不觉在聊天过程中完成了登录流程操作，其方式非常友好且登录的过程是愉快的，同时还兼带了浓浓的社交行业属性，通过更直观的登录场景感受，拉近用户跟产品之间的距离，使用户的印象更加深刻。
083.「高德地图」桌面一键导航-出行更高效
产品体验：
通过高德地图的收藏夹，点击收藏地址右侧的功能菜单，在弹窗中将该地址“添加快捷导航到桌面”，后续就不用每次输入常用的目的地了，直接通过桌面的图标入口即可一键导航。
设计思考：
对于在外的工作人员，导航算是手机必备的软件，以前只是纯粹的导航认路，而随着汽车量的增长，各地交通逐渐开始变得紧张，那么不管我们是否知道路线，驾驶之前都会习惯性打开地图导航，随时观察路线拥堵情况来思考是否有更换更优路线的需求，于是就按照惯例打开导航、录入目的地、选择路线......等一系列的常规操作，日复一日，似乎没有觉得什么不妥。
高德地图的桌面一键导航功能，为长期有驾驶需求的用户提供了更为便捷的操作，将经常使用的目的地添加的收藏夹，再添加到桌面以生成目的地导航便捷入口，有需要时桌面点击即可，系统将自动规划最优路线，通过最便捷的方式一键导航，再也不用日复一日的重复之前的操作了。站在设计师的角度，在解决用户需求时，操作越复杂、步骤越多，用户的选择条件、视觉负担及时间成本就越多，出错的情况也越多，故而用户流失的可能性就越大。高德地图通过一键导航简化操作流程，通过合理的操作路径，降低用户时间成本，有效提升了使用频率及粘性。
084.「爱奇艺阅读」性别选择-更明确的指引和提示
产品体验：
首次进入爱奇艺阅读APP，在性别选择页面中，男生和女生的头像通过动画的形式反复左右替换，用强视觉提醒的方式推动用户进行选择操作，以便于提供更匹配的内容资源。
设计思考：
大部分新闻或阅读类型的APP，在用户首次进入应用时，都有类似性别、行业、爱好之类的选择，其主要目的是确定用户的属性，并提供更加匹配该属性的内容资源来提升用户的满意度。其流程也是千篇一律，以建议性的提醒用户去做选择，如无需要直接跳过即可。
爱奇艺阅读首次即进入APP时，以动态的性别头像插图反复左右切换的动效方式来提示有用户选择性别，相比常见的静态按钮直接显示在那里会更加友好，不会过于生硬、冷冰冰，其动画视觉样式给予明确的指引和提示，更能引起用户的注意，通过强烈的视觉提醒促使用户更高效的完成当前任务。
类似这种选择且非强制性的前置页面，很多设计师只是按部就班当做一个流程，其实要想做好并非仅仅如此，可以通过趣味化、情感化、动效等方式增强用户去选择的欲望，以提高操作几率，用户一旦选择，进入应用之后所看的内容定然更符合自身的需求，也能提高用户的满意度，其满意度的高低能决定用户的去留及转化，所以应用中，用户的前置选择对产品的重要性可想而知。
085.「饿了么」合适的时间、合适的提醒
产品体验：
如果在饿了么有正在进行中的订单，再次进入应用时，右下角会提供一个查看的快捷入口，点击可快速进入该订单查看进度或骑手配送状态。
设计思考：
随着外卖行业的普及，给我们的生活带来了很大的便利，尤其是一日三餐，我们只需花几分钟的时间在外卖平台上下单，其他的事情交给商家和外卖小哥，很大程度上缩短了我们去店途中和店里的等待时间，特别是对上班族来说，真的是太便利了。不过外卖平台不像京东淘宝-人们可以无忧无虑的逛上几个小时，通常都是目标明确的用户，在短时间内完成自己的需求，要么下单、要么查看配送进度。
如果在饿了么有订单存在，再次进入首页，右下角会提示配送信息，点击直接进入查看详情。从表面上看，右下角的入口虽然提供了快捷通道，但似乎不太友好，总是会遮挡部分内容。其实并非如此，是因产品根据用户的使用场景进行行为预判而设计的快捷入口，在正常情况下，从下单到完结一般在30分钟左右，如果用户存在未完结订单且在短时间内再次进入平台，80%以上的用户此时需求为查询配送进度，因此，右下角的进度提示正是在合适的时间给予用户合适的提醒，根据用户的场景需求提供了最为便捷的解决方案，由此可见、利大于弊。
086.「搜狗输入法」教你少打字、多开挂
产品体验：
进入搜狗输入法的设置中，可开启开挂模式，里面的三连发、回声、重要的事情说三遍分别对应不同的效果。
设计思考：
搜狗输入法在业界虽不敢说是最牛，但一定是数一数二的存在，发展至今，不仅仅是在满足用户的基本需求，还提供了让用户感到惊喜的功能，而现在更是研发了很多“黑科技”。
从搜狗输入法左侧的logo中进入工具选项，在设置中即可选择开挂模式（真实效果见上图）。正如字面的意思，搜狗输入法通过智能帮助用户自动完成一些列的复制粘贴工作，瞬间让打字刷屏的手速快到逆天，且操作简单、轻松完成，方便用户在开怼、卖萌、刷屏过程中直接碾压对方的打字速度。开挂功能可谓是实用性与趣味性兼备，让我们在日常中，面对不同的社交需求时带来贴心的改变。
（凡事有一个度，刷屏如果没有用对场景，可能会遭到对方的反感，事在人为。就像之前的“拍一拍”功能面世，却有人在上班时间拿去拍领导、拍老板，后果就不说了，刀可切菜亦可伤人）
087.「美团」垃圾分类-解决餐后垃圾分类之忧
产品体验：
美团我的页面，推荐工具的“垃圾分类”功能，能帮助我们进行识别因外卖产出的垃圾类型，便于跟线下对应的垃圾桶“对号入座”，减少不必要的垃圾混合而增加清洁工人的工作量。
设计思考：
外卖平台的兴起，给我们的生活带来了很大的便利，同时也产生了一些危害，首当其冲就是环境的污染。比如包装盒、包装袋、餐具等大量生活垃圾的产出，确实在外卖行业普及后，乱扔垃圾的情况跟随着疯速增长，虽然这些属于个人情况，但也有部分用户因不知垃圾如何分类，而将所有垃圾聚集在一起，然后就成清洁工的事情，最终无端增加垃圾分类的工作难度。
美团的“垃圾分类”功能对卫生环保方面增添了一份力量，当用户不知道自己产出的生活垃圾是何种类型时，可通过查看常见垃圾类型提示或搜索来确定类型，方便用户按类型将垃圾丢入对应的垃圾桶，解决餐后垃圾分类之忧，帮助养成良好的垃圾分类习惯，助力垃圾分类落地。还能消除用户对“外卖垃圾分类麻烦”的顾虑，利用线上垃圾类型的普及，为绿色发展及环境保护贡献自己的一份力量。
088.「优酷」个性化弹幕设置-看剧互动两不误
产品体验：
在优酷APP开着弹幕看片时，可通过弹幕设置调整字体的不透明度、行数、大小及速度来设定最适合自己样式。
设计思考：
弹幕，用户非常熟悉的一个词，很多时候在看影片时，弹幕里面的内容远远要比影片带来的乐趣多很多，除了能从中获得群众的陪伴增加愉悦感外，还可以带动视频的观看氛围，让活跃的用户有了表达自我的动力和热情。但对于“键盘侠”来说，仅仅在上方显示的几行弹幕根本无法满足自己看影片互动及调侃的需求。
优酷的弹幕设置中，可以根据自己的实际需求对弹幕字体大小、透明度、区域等参数进行设置，针对喜好调侃互动的用户来说，使用满屏半透明度字体样式的弹幕无疑是最好的选择，互动看片两不误。
089.「随便走」AR导航-“傻瓜”式操作，老少皆宜
产品体验：
使用随便走导航，全程利用AR实景，通过3D立体形式的方向引导，帮助我们找到周边的任何一个地方。
设计思考：
导航是我们出行必备的工具，目前高德和百度在该领域各自独霸一方，看似很牛叉，但并不是万能的。比如老人操作起来有一定的难度，经常各种功能找不到还说不好用；又比如我们在陌生的重庆市，可能你从这南面1楼进去，北面就在20楼，毫不夸张，如果通过常规的地图导航去找人，我建议你最好吃个早餐再出去，等找到人之后就可以吃夜宵了；再比如......不比了。
随便走APP是一款便捷式轻量导航工具，主打“让生活乐趣一目了然”。利用“AR全息实景”的展现方式，改变了必须要有地图的模式，对于我们找周边的美食、酒店、公交、厕所、景点等需求，进行穿透式3D立体指引，操作简单，不管前、后、左、右、上、下都有非常明显的视觉引导，只有你想不到，没有它找不到，对于长期生活在大城市的用户，交通复杂、道巷纵横，很可能我就在你“隔壁”，你却找不到我“老王”。此外，随便走APP操作简单，学习成本基本为零，对家中老人而言，也是一款不错的导航工具。
090.「微信读书」模拟现实的行为动作
产品体验：
在微信读书的书架页面，点击书籍以及书本翻页，都使模拟了现实生活中较为自然且真实的从书架拿书、及各个角度翻页的效果。
设计思考：
看书APP虽然众多，但真正能坚持下去、养成习惯的没有几个人能做到，站在平台的角度思考，毕竟书本的内容是平台无法修改的，除了提供优质的资源并给予方向指引外，其他便是通过设计体验来提升用户的好感度了，
微信读书APP从书架的拿书动作到书本的翻页，都模拟了现实生活中用户看书的行为动作，大家都知道，真正喜欢阅读的人，是不会在意这些所谓的横竖及交互效果的，但前面都说了，这种人毕竟在于少数。因为受众的差别，模拟现实其最主要的作用就是为了吸引眼球，模拟用户的实际行为，将其代入真实的情境中，使用户对产品产生深刻的认同感，则看着更加舒心，待用户提升忠诚且养成看书习惯之后，这些作用就会慢慢变得微不足道。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系
作者：大漠飞鹰CYSJ 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
从纸质阅读到屏幕阅读，通过理解用户从纸质到屏幕阅读行为的转变，我们从传统中文排印经验中吸取对字体、间距、标点的处理方式，跨越平面与UI不同终端的设计规范和实现手段。在UI设计的语境中调整中文排版策略，优化手机百度图文阅读场景设计，提升手百用户的阅读体验。
· 屏幕阅读与纸质阅读不同
人的阅读习惯会根据阅读环境而改变，包括文本的书写格式、文本的媒介、语言符号等。基于屏幕的阅读行为，往往表现了如下特征：很少人会一字一句阅读页面，更多的是在浏览、关键词确认、非线性阅读、有选择性的阅读。
· 设计差异点
UI设计与书籍排版不同之处在于：
第一、屏幕上可以实现更多的交互功能，增强了阅读的沉浸感和交互体验。
第二、UI设计不可控因素更多。平面排版纸张和内容固定可控，可以保证设计的精准展示。但在UI设计中，想让页面达到和原本设计一模一样的效果几乎是不可能的，显示屏幕尺寸的碎片化、内容的灵活可变，都让最后的展示效果多了很多不可预期。这就是为什么会有很多排版优秀的印刷品设计，但UI中优秀的排版设计却特别少。
因此，针对屏幕阅读的设计要注意：不能照搬文字排版规则，更要充分考虑屏幕与内容的灵活可变，确保设计方案可实际落地。
· 明确设计目标
本次设计改版主要针对手机百度——图文落地页部分，希望通过优化文字展现、内容排版提升阅读体验。
CEA阅读体验模型将用户的阅读体验分为舒适、效率、吸引三个纬度。
舒适（Comfort)：视觉负担低，信息适量，看着不累、没有信息压迫感
效率（Efficiency）：重点信息突出，直观性强，容易识别
吸引（Attraction）：页面设计美观，有吸引力
基于此模型，此次优化方案中我们确定的设计目标是：优化内容可读性；提升阅读效率；提升页面美观度。
· 优化内容可读性
· 选择屏显友好字体
屏显字体与印刷用字体最大的不同在于，屏显字体受限于分辨率，无法做到印刷字体那么多细节的设计。目前屏显汉字的设计方式一般是：
1、从字体的结构入手，扩大中宫的设计，字形设计看起来舒适放松，提升辨识度，相较于中宫内缩的字体，呈现现代的明亮感。
2、字形简洁，平直少细节的笔画有助于提高字体本身的辨识。
遍历手百用户常用手机的默认字体，系统默认字体都是使用屏显友好字体。
· 选择字重更全的字体
与纸质阅读相比，用户在在屏幕阅读中，会经常进行扫读、关键词确认，而不是像在纸质书上一字一句的读。
目前我们提供给作者的能够做重点信息区别的方式包括：文字加粗、风格化二级标题。但我们发现目前在一些安卓手机上，一些字体在增加字重后出现沾粘情况，不能保证可读性。
字重，即字形的重量，字重的等级用来标明同一字体家族不同粗细笔画的字形。
但通常一个特定的字体家族仅会包含少数的可用重量。若一个指定的字重不存在时，CSS会就近匹配其他字重：较重的字重映射到更重的重量、较轻的字重会映射到更轻的重量。
目前落地页代码中字体的设置，安卓使用的第一顺位的字体字重仅2档字重，所以在小字场景和分辨率较低的安卓机型上，会匹配到更粗的字重，出现文字沾粘的情况。
我们调整了font-family中的字体适配顺位，在安卓端优先适配字重更全的字体，保证安卓端加粗字体的展现，优化内容可读性。
· 提升阅读效率
· 优化字间距和行间距
阅读场景下，文字的间距是影响阅读效率的关键。文字的间距包括两部分，第一是横向字与字的间距；其次是纵向行与行的间距。
根据当前现状，再结合行业设计经验，我们选择了字号与行高倍数组合的一系列方案，进行了眼动实验和用户访谈，确定用户可接受的行间距为1.50-1.70的范围，再通过对比不同机型下的屏幕显示效果，以及不同档位字体显示效果、阅读效率，最后确定了图文落地页正文文字在当前方案基础上缩字间距为0，扩大行间距1.70倍行号的设计方案。
· 段落间距适配字号
图文落地页的定位是长文阅读场景，作者发文长度的中位数是600-700字的范围，以目前用户使用量最多的iPhone11举例，600-700字的文章长度为2屏（纯文字，无图情况）。
对于长文阅读，用户往往是缺乏耐心的。为让用户减少对长文的“畏惧感”，调整文章段落间距，一篇长文通过合理的分段，成为一段一段的短文，每结束一段短文，用户都有机会进行休息并获得满足感。
出于屏效考虑，当前图文落地页段落间距不论用户使用哪一档字号，都为一个固定值。所以在调大字号的模式下，段落间距小，用户难以区分；在小字模式下，段落间距又太大，降低了屏效。
优化段落间距的设定，段落间距应随着字号的变化对应做出变大或变小的调整。调整后的最大字号与最小字号段落间距都更合适，阅读节奏更好。
· 页面美观，提升吸引力
书籍排版中“微观字体排印”中一直都关注字距、行距、标点符号等排版调整，这些排印规则大部分源于文字本身的规律，排版风格和规范，并不随着设计潮流而轻易改变，是需要在所有媒介上都应遵循的规则。但是现在的UI排版中几乎都没有遵循，这也是我们经常觉得UI页面上的中文排版看起来不精致的原因。
通过学习W3C《中文排版需求》《中华人民共和国国家标准-标点符号的用法》等中文排版规范文档中对标点等微观排版的调整思路，并结合UI场景落地，希望从细节处提升页面美观度和吸引力。
· 优化标题，突出内容
在标点使用规范中对标题中标点符号的使用有严格的定义：标题的作用是概括表明文章内容，一般标题中除书名号、引号等表示专用名词的符号外，不应该出现标点符号，题中停顿可用空格表示。如确实因需要表明语意而必须使用标点符号时，应使用同号的半角标点，标题末尾除问号或叹号外，一般不使用其他标点符号。
但在实际UI界面中，我们无法在生产端对作者使用的不规范标点符号进行逐一的确认、修正。UI需要的是展示规则，保证多种内容最后都能有良好的视觉呈现。
在不修改作者不规范标点使用的前提下，优化标题中标点符号的宽度：将标题中引号、书名号使用半角标点；连续标点将前一位标点使用半角标点，其余标点不变，目的是在保持标题基本阅读节奏感的同时，减少标点在标题中的占位，突出标题内容。
· 标点首尾禁则
在中文排版规则中，为了保持阅读顺畅、体例一致，多数标点符号的位置有限制，通常一个标点符号依其性质，禁止出现在行首或行尾。这项规则自活字排版时代开始通行。在中文排版里面这项标点规则叫“标点首尾禁则”。
如何执行这种标点规避，平面排版中处理遵守“先推入，后推出”原则，即不希望标点符号出现在行首时，应在已经标点挤压的基础上再次检查是否有机会将其挤到前一行，如没有挤压机会再从前一行取最后一个字至下一行。前行多出来的空间需按照优先顺序拉伸，最后没有拉伸机会再按平均拉大字距的方式处理。
但“先推入，后推出”原则在UI场景中实现难度太大，意味着在判断每个标点位置的时候，还需要进行多次逻辑判断，技术成本太高。因此我们以效率优先，将“先推入，后推出”原则修改为“推出式标点避头尾”，即从上一行推出一个字排在下行的行首，避免行首、行末出现禁排的标点符号。
虽然由“先推入，后推出”退阶为“仅推出式标点避头尾”，但整体文章还是避免了标点出现在行首尾情况，遵循了中文排版基础规范。
· 连续标点挤压
中文的标点符号通常占1个字符宽度，便于识别、配置和排版，但当页面中连续出现2个及以上的标点符号的时候，文章上会出现一块空白，这些空洞会使在阅读时候增加文字间距，使文字过于跳跃，增加读者理解内容的时间，造成脑眼劳累；同时会造成版心灰度的不均衡，影响视觉美感。
标点符号字面分为“可调整”和“不可调整”两类，“可调整”的标点符号标点本身在字面左、字面右、字面居中，可缩减掉标点不占位部分的空间。
不可调整的标点包括：半字连接号、间隔号、分隔号，因为这几个标点固定半个字宽。
在《中文排版标准》里面说明：当文中出现连续标点符号排列时，为了使文字更加紧凑、易读，应该对标点符号的宽度进行调整。如果两个符号占用2个字宽，应当缩减成1.5个字宽。在此原则上，允许排版风格进一步调整让两个符号只占1个字宽。挤压方向应该是标点符号紧靠内容，挤压掉离内容远的空间。
根据这一原则，我们在代码中设置当连续出现两个及以上的标点时，挤压第二位及以后的标点为半角，缩减连续标点时的占位，减少阅读时候的视觉跳跃，减少文章中出现的“空洞”。
· 完整设计方案
回顾整个设计方案，包括了3个部分：
1、对比屏显字体与印刷字体，结合字体的字重，优化字体家族选择范围与展示顺位，优化内容可读性。
2、通过眼动实验、可用性测试调整字间距、行间距和段落间距，优化阅读节奏，提升阅读效率。
3、学习W3C《中文排版标准》等规范，吸取中文排印优良传统，通过对内容中标点符号等微观细致的调整。使正文区页面能够保持字距均匀，版面齐整、灰度均衡。从标点细节提升页面美观度和吸引力。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系
作者：百度MEUX 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝设计的小编 http://www.lanlanwork.com