转载：优设
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
那好话不多说，我们正式开始～
在开始之前先来说说 什么是 B 端产品，我们通常也叫做管理后台。
这里会有两个问题：“它管理什么？到底如何管理？”给大家三秒钟可以思考一下。
首先它管理的是数据，无论是 ERP 系统的订单数据、CRM 的客户数据、OA 的流程数据，你都会发现管理后台就是在不停的对数据进行补充、整合。
那到底应该如何管理？简单来说就是 数据的“增删改查”，筛选其实就是查询的一种重要方式。
比如一个客户关系管理系统（CRM），销售人员去拜访客户就会提前查询客户信息，来了解客户关注内容进而去组织销售话术。
那这里的筛选应该如何设计？怎样设计既能高效便利，同时也具备扩展性？那今天我们系统盘点筛选组件究竟应该如何设计？
这里我们先来讲讲筛选的邻居“搜索”，因为很多同学其实对于这两者之间的差别不太了解，只知道它们都是在工具栏当中，都是在做查询数据的工作。但在功能上是有明显的区分：
搜索是对系统的关键词进行精准匹配，比如用户 ID、手机号、昵称、地址等信息内容
筛选则是给出产品的固定条件选项，比如归属人、状态、类型 等，你可以按需勾选条件，就能得出对应数据
这里稍微多说一句，因为所有的 B 端系统都是由字段组成，而在大的分类上，字段主要包含有输入、选择、上传三大类型。
搜索服务于输入类字段，比如刚才讲到了 用户 ID、手机号、昵称、地址等 都是得让用户自行输入才会得到，因此在表单里输入，在表格当中也是输入搜索，所以系统是关联的。
筛选则是选择类字段，也就是归属人、状态、类型 等，在 B 端系统当中，选择字段尤为重要，所以在表单处选择同样在筛选处也是相同逻辑。
理解筛选与搜索的差异后，我们再来说说筛选～
在筛选的过程当中，有着非常多重要的逻辑需要提前掌握，我们通过简单的快问快答，帮助大家快速拆解。
第一题：什么是 且、或、非
这是筛选当中必须要了解的基础运算条件。
且就是筛选的条件必须同时满足才能出结果，比如一个电商数据分析师，需要筛选潜在高意向客户，在筛选条件为「时间在近 30 天有支付订单、近 30 天累计消费金额≥800 元、近 30 天订单次数≥2 次」，必须同时满足才会满足用户需求。
或就是这些条件满足任意一个就能出结果，比如还是电商数据，需要寻找对产品有兴趣的潜在客户，就需要筛选「近 90 天内有过人工咨询记录、近 30 天内访问产品详情页≥6 次、近 180 天内提交过试用申请」，三个条件满足任意一个，这样就能涵盖更为全面。
非就是这些条件必须排除掉才能出结果，比如电商数据，因为涉及到刷单、退款的情况，需要将其进行清洗，因此在筛选条件上就需要满足「订单状态≠测试订单、支付状态≠已退款、客户类型≠内部员工」，需要同时排除这些数据。
所以对应的筛选运算规则，其实背后都是用户在使用时需要深度分析使用的最为重要的工具～
第二题：在B端系统当中多个筛选条件默认的运算规则是什么？
A：且 B：或 C：非
在 B 端系统当中，最常用的运算规则就是且，也就是取多个筛选当中的交集。
比如下面这三个筛选项，所计算的呈现规则就是 「销售负责人是李强」且「销售时间是 近一个月」且「价值为高价值」的客户，这样就是一个典型的且的关系。
因为这种思维方式是最符合用户的思考逻辑，这也是众多 B 端系统当中的常见逻辑。
第三题：且、或、非可以同时存在于一个筛选组合当中吗？
A.可以
B.不可以
它们可以出现在同一个筛选组合当中，因为实际的业务往往是“多条件、多逻辑” 的复合场景。
比如在教育管理系统当中，班主任要筛选 初三年级且数学月考不及格 或 非 住校生 的学生，来针对这两类人群进行重点管理与监控。
但在筛选的设计当中，为了让用户理解逻辑，我们需要通过 条件组（如括号、层级缩进、虚线框）让用户直观感知分组关系，避免依赖抽象的优先级规则。
第四题：如果你是一个设计师，应该如何降低成本表达这个关系？
因为逻辑较为复杂，所以在筛选时有些基础办法可以降低门槛。
① 可视化展示筛选运算，如果用户对于且、或逻辑不太了解，可以使用图标快速表示
② 实时校验逻辑规则，不要出现相互矛盾的筛选逻辑
这个功能其实不太好做，但 ONES 做了一个最简单的逻辑判断。在且条件当中，同一筛选条件不得选择两次，这样用于避免在且条件当中经常出现的相互矛盾的筛选逻辑。
好的，准备工作已经完成，我们就可以顺利了解筛选的类型。
由于筛选的类型众多，我们会按照 业务复杂度、容器差异 两个维度，来对筛选进行归类。
通过业务复杂度，将其分为：基础筛选、高级筛选、自定义筛选
按照容器差异，将其分为：标签筛选、折叠筛选、浮窗筛选、抽屉筛选、表头筛选、AI 筛选
基础筛选是将 高频使用（使用频率≥80%）的筛选条件进行固定，一直保持在页面中的核心位置，不折叠、不隐藏，让用户能够直接看到的筛选类型。
这是一个最为基础的筛选方式，在常见的 Ant Design、Arco Design 的页面模板当中都会有基础筛选的身影。
使用基础筛选最为重要的便是 快速触达，用户打开页面就会查看筛选条件，不需要点击“更多”“展开” 等入口，这能满足 B 端用户 高效完成日常操作 的核心需求。
在使用基础筛选时，我们需要注意以下问题：
① 基础筛选条件的数量不宜过多，一般 3-4 个最为合适
因为筛选条件过多，就失去了常驻的意义。但在实际业务当中，我们也需要考虑 5 个、7 个这类极端场景，毕竟常驻是最为基础的方案，难免会遇到特殊情况。（需要在筛选的规则当中进行梳理，将交互逻辑呈现清楚）
② 基础筛选当中，排序规则会非常重要
一般按照 高频-低频 的方式，从左到右依次排列，对于高频低频的获取方式，我们可以数据埋点、卡片分类、问卷调研等多种方式进行搜集。
③ 筛选基础，样式就不基础
基础筛选有着较多的筛选样式，大家可以结合自身业务进行选择，这里推荐样式一与二，因为展示效率更高～
这里列举一些常见的基础筛选产品，大家可以一并查看：
高级筛选是较为复杂的筛选形式，它为了满足更多 低频、复杂、个性 的业务需求，通常会提供相对独立筛选面板，展示更多的筛选条件。
独立面板也就是我们后续会提到的 浮窗筛选、抽屉筛选、表头筛选...，所以它们的关系也会相对复杂。
高级筛选与基础筛选最大的区别在于：
基础筛选只能覆盖 3 个左右的高频筛选，而高级筛选可支持 10 + 维度的灵活组合；常驻只能使用且的逻辑相对简单，而高级可以有条件组嵌套支持复杂业务逻辑；常驻位置较为固定，而高级则有面板加持，可以更为灵活。
其实选择高级筛选或者基础筛选，最大的话语权还是场景。
如果你的筛选是简单筛选几个条件，那基础筛选就已经足够，反之对筛选条件、筛选效率有着更高要求，我们则会考虑更为复杂的筛选方式。
在使用高级筛选时，这些问题尤为重要：
① 因为高级筛选需要访问独立面板，因此在入口的设计就会尤为重要。一般会用文字链接或者图标来提示用户，便于寻找。
② 基础筛选与高级筛选可以并存，因为角色不同、使用场景不同，常驻可以作为高频使用的固定模块，高级则作为特定角色需要更多筛选的补充，这部分放在下面 筛选的原则-筛选角色化 给大家详细说明。
这里列举一些常见的高级筛选产品，大家可以一并查看：
自定义筛选则是在高级筛选的基础上，进一步业务化。
它是为了满足 字段不固定、需求差异化 的业务场景，用户能够自定义选择 筛选字段，配置字段的筛选规则。
使用自定义字段最重要的核心要素就是 突破固定字段限制，因为高级筛选是针对产品预设好的固定字段进行筛选，自定义则是用户可以自行选择字段，用于适配更为灵活、多变的业务场景，如 CRM 的客户自定义字段、OA 的流程表单（因为不同的公司对于 流程、客户信息的管理不太相同，因此需要提供自定义字段进行支持）
在设计自定义筛选时，我们的方案选择主要受到“筛选频率、条件复杂度、界面空间”的影响。
① 小入口+大弹窗，以筛选图标作为入口，点击过后弹窗展示所有筛选条件。这种方式适合 中低频（每天 1-3 次）使用筛选，界面空间紧张用大弹窗容纳复杂配置
② 展开收起式，当用户点击筛选后，将表格与工具栏之间的部分展开，用于呈现筛选条件。它能够避免弹窗的跳转感，筛选时用户的视线可以无需离开表格区域，适用于 筛选条件数量多、高频使用的场景
③ 固定常驻式，在顶部区域固定，默认展开，这样就无需点击入口，这样更适合“筛选是核心工作流” 的场景
自定义筛选是最难设计的，在使用过程中会有 四大基本元素。
筛选入口：需要让用户快速找到入口，同时不干扰主界面。
逻辑运算区：主要就是 且、或 逻辑的展示，只是在运算区域里面，需要考虑切换时究竟应该如何做？
神策数据是通过文字方式，快速展示 且、或 逻辑，并且支持手动直接切换，这个方案目前看来是用户最容易理解的。
字段选择区：选择你所需要筛选的字段，点击 添加、选择，整体逻辑较为简单。
条件组管理区：筛选条件全部展示过的后续动作，比如保存，批量录入 等相关动作都可以放在条件组管理当中，进行呈现。
接下来的 标签筛选、折叠筛选、浮窗筛选、抽屉筛选，都是对容器进行分类。因此我们需要进行展开讲解，穷举一下不同容器的形式和变化。
先来说说标签筛选（外露筛选）
标签筛选是将重要的筛选选项设计成“可点击的标签按钮”，将筛选过程当中的选项直接来进行展示，目的是为了能够让筛选条件，直接暴露出来给到用户进行使用。
它最重要的是提升效率，针对高频使用的筛选维度将其外露展示，将多步操作压缩为 一步点击，同时能够凸显当前的筛选状态，避免用户忘记自己选了什么。
在使用标签筛选时，需要注意这些内容：
比如我想外露的内容是各种状态，我就可以将其放在顶部，进行指标图+筛选功能的杂糅，像在小红书千帆系统当中，对于订单的多种状态，就会使用这一技巧，进行呈现。
折叠筛选则是用隐藏的方式，按照使用频率将筛选条件分层。高频条件平铺展示、低频条件收折在面板当中，点击展开的筛选类型。
它最重要的价值是要平衡“空间与效率”的问题，当筛选条件 4-8 个时，如果全部平铺页面就会过于冗余，如果全部隐藏又会增加操作步骤，折叠筛选通过 “高频展示 + 低频折叠”，让用户既能快速操作高频条件，又能按需调用低频条件，兼顾 “便捷性” 与 “功能完整性”。
正因为这样的特性，所以很多基础固定的筛选一旦变多后，通常就会使用折叠的方式进行呈现。
浮窗其实是将筛选包起来，用浮窗进行承载，临时唤起，用完即走。
在设计时首先会有一个统一的筛选入口，浮窗弹出后设置对应条件，然后点击确认、取消，浮窗自动收起，不占用页面只提示有筛选条件。
对于系统而言，它为什么需要浮窗筛选？本质上会有三个原因：
我们之前就有相同的业务，需要将桌面端的部分移植到 Pad 端与移动端，使用浮窗性价比就会更高。
抽屉筛选就是浮窗筛选的另一种表达，它主要是平衡 筛选条件与界面空间 的另一种选择。
但确实会发现现在的抽屉筛选已经没有当年的雄风，感觉大家就避之不谈，基本不会使用它。其实也会有几个原因：
很多之前沿用抽屉筛选的产品，现在都在调整自己的交互方案。
并且因为抽屉的不稳定性，我们其实不太建议同学们使用抽屉进行选择自己的选项条件。
表头筛选是一种相对特殊的筛选形式，它是将筛选入口放置在头部，提供给到用户进行快捷的筛选操作。
本质上是在满足长时间使用 Excel 用户的使用习惯，因为在 Excel 当中表格众多，对于筛选只能使用一种影响较小，最为通用的做法，随着 B 端产品的发展，也会发现很多设计方式都被得到了延续。
在理解表头筛选时，会有两种使用场景：
① 空间较少，使用表头筛选可以进行轻量的筛选动作。
这样点击筛选过后便可直接选择筛选选项，执行筛选操作。你可以看到飞书文档，在主页列表中就会这样设计便可以轻量满足筛选需求。
② 字段太多，需要表头筛选带入更多筛选值，进行筛选安排。
这种方案本质上是针对高级筛选的体验补充，记住！是需要高级筛选 or 自定义筛选时才会用到筛选策略。
因为在这两种筛选当中，需要选择筛选字段，有大量的选项，这对用户来说会十分影响其正常使用，通过表头处的点击，就能够将字段默认带入，缩短筛选路径，提高筛选效率。
这种方案的表头筛选也会有相应弊端，首先是表头空间问题，因为表头本身需要展示的信息就相对较多，比如冻结、排序、等等，过多的操作会导致表头过于复杂，如果还加上筛选，表头空间就会更大，更不适合进行使用。
其次用户理解成本也会相对过高，因为很多行业属性相对较为简单的 B 端产品并不会使用这类筛选，对于用户初次使用也会有不小的负担。但表头筛选目前的普及率仍然比较低，使用比较频繁的便是纷享销客。
来到重点，AI 筛选。它不仅仅是未来筛选设计的大趋势，更是能够在产品层面解决 筛选复杂化的问题。
比如刚才的高级筛选、自定义筛选，无疑都是在增加用户的操作层面，他们需要不断的选择，才会得到自己想要的结果。而 AI 筛选的价值在于它解决了 用户自然语言与程序逻辑执行 之间的壁垒，让筛选能够响应用户的自然语言诉求。
比如我想筛选最近一个月的高价值客户，就只需要在 AI 输入框中说出自己想法，然后就能得到筛选结果。
程序逻辑执行，程序就可以根据自身知识库，对高价值客户进行拆解，逻辑变为 客户时间为：最近创建一个月客户、类型为高价值。
这样一来，其得到的结果就会更为简单合理，但是在设计 AI 筛选时，它的难度还是会相对较大。
因为 AI 的结果可能会出现差错，那对应的修改策略就会极为重要。
所以我们可以看到，像 Jira 对于 AI 筛选就会有更多的修改入口让用户对于筛选结果进行快速修正，同时在入口上也需要做更多的设计进行提示。
转载：优设
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
| 样式规范 | 字号 | 行距 (折行) | 核心使用场景 |
|---|---|---|---|
| 大标题级 | 40px | 60px | 模块标题、核心数据、页面大标题 |
| 小标题级 | 32px | 48px | 内容标题、板块小标题 |
| 正文级 | 28px | 42px | 正文内容、按钮文字、副标题 |
| 辅助说明级 | 24px | 36px | 金刚区文字、Tab 栏、辅助说明 |
| 微提示级 | 24px | 36px | 容器标签、弹窗提示、小红点数字 |
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
我们经常会使用到很多产品，一些产品里的色彩搭配也会给我们留下深刻的影响，比如你会记得淘宝的橙色、支付宝的蓝色等等，色彩对于用户的体验也很重要；兰亭妙微ui设计公司分享了关于色彩在UI设计中的应用，我们一起来看一下。
人脑对于色彩的记忆度要高于形态，即一个App给用户留下深刻印象的往往是界面的色彩；例如说到支付宝，我们可能想不起它的首页长什么样子，标签栏图标是那些，但能马上记起它的界面主色是蓝色；因此运用好色彩对UI设计十分重要，它能直观的呈现产品的气质和性格，能有效的帮助用户组织和阅读信息，与界面设计产生联系和记忆。
好的配色往往依靠设计师审美、感觉搭配出来，但合理的颜色搭配必定存在合理的配色规律和配色方法论的支撑，下面结合相关案例为大家讲解色彩运用的几个技巧。
分析研究了很多优秀设计作品，发现他们在用色的时候有一部分区域是不会使用的，也就是我们常说的“配色禁区”；当然，这里的“禁区”是带双引号带的，并没有什么绝对的禁区，只是说这些颜色不易控制，在连基础色都没有驾驭好之前，尽量少碰。
配色禁区大概分为这三种：三角形禁区、矩形禁区、扇形禁区（红色为禁区），如下图：
综合看来，不管是那种禁区，右下角区域的颜色是很少用的。毕竟他们又脏又深，当然什么颜色都能驾驭的大师请略过。
知识点：
在界面设计中，一般主色和辅助色都集中在右上角，次要的和不可点的颜色都集中在中中上方，而文字信息和背景色则集中在左侧，右下角禁区是我们要重点避开的对象。
在App设计之前应先确定界面的主色调，主色将占据界面中很大的比例，通常是品牌色，而辅助色、点缀色、背景色等都应以主色调为基准来搭配，这样才能保证App整体色调的一致。
色调一致的界面，能带给用户始终如一的视觉体验。例如马蜂窝将黄色（品牌色）作为主色，以及从主色搭配出的蓝色（对比色）贯穿App始终。
60% 30% 10%的原则，是达到色彩平衡的最佳比例。在60%的空间使用主色，可以运用到导航栏、按钮、图标等关键的元素中，使之成为整个App的视觉焦点和色彩关系；30%的空间使用辅助色，可以平衡过多的主色而造成的视觉疲劳；最后剩下10%的空间为点缀色，可以用在一些不太重要的元素又需要区分的时候。
6:3:1原则构建了一种丰富的色彩层次，让界面看上去和谐、平衡和不杂乱。
哔哩哔哩将粉色运用到页签、标签栏、按钮、入口图标等上，蓝色的辅助色用在角标、图标上，还有黄色、红色用在一些小图标、小标签上，主次非常清晰明了。
经常很多大神在网上说配色不要超过三种色，其实就是「色不过三」原则，即在一个页面中不要使用超过3种颜色搭配，这也和上面说的“60-30-10原则”类似，即一个主色、一个辅助色和一个点缀色。
但在实际UI设计中，迫于产品的需要可能会使用更多数量的色彩，但切记不可超过7种色相（注意不是7种色值），每个色相还可以运用其饱和度、明度的变化分解出丰富的色彩搭配。
美团外卖的首页20个功能入口大图标的背景用了9种不同的色彩，每种色彩又包含一种低饱和度色彩进行彩色渐变，但并没有显得杂乱，而是呈现一种年轻时尚的律动感。
这是因为这里虽然使用了9种不同的色彩，但仔细观察发现只使用了3种色彩，其他6种则是从前者邻近色中提取出来的搭配，再将它们错落放置，呈现出丰富多彩的色彩搭配，整体和谐统一。
黑色就像没有生命力的深渊，使用户陷入冷冷的负面情绪中。远离纯黑色和纯灰色，是因为它们不存在于现实世界里；尝试在纯黑和纯灰中加入一些色调，会让界面看上去更柔和自然；另外，纯黑色还会与白色产生强烈的对比度，看久了会使人疲劳，让用户产生焦虑的情绪。
MONO的导航栏并不是深黑色，而是加入了蓝色的低饱和度蓝黑色，它的界面背景也是加入了蓝色的的浅色，这样就不会让界面看上去死气沉沉的。
前文我们已经了解过各种色彩的心理学知识，就是为了我们在进行App设计时提供依据；这些色彩都是源于人类对大自然最原始的感受，蓝色的天空、绿色的草地、黄色的沙漠等等，自然的色彩，对于我们来说是司空见惯的，但其中却蕴含着丰富的美感，并达到了和谐统一。
网易云音乐使用红色作为主色，这种热情奔放的颜色传递出一种充满能量、自信的气质。
良好的可读性在界面设计中能为用户提供主次分明、层次清晰的阅读体验，而一个可读性差的界面则会成为用户浏览的障碍。
那如何确保界面具有良好的可读性呢？
这就需要在界面设计中注意色彩搭配的对比，如在浅色背景上使用深色文字，在深色背景上使用浅色文字，使用高对比的度的亮色展示重要的元素，用低对比度的浅色来体现需要弱化和次要的内容；例如苹果Music的主要功能入口，标签栏图标、按钮等都是用了高纯度的红色，与其他元素从形成鲜明对比，就连深灰色的辅助文字都有着清晰的可读性。
配色中尽量使用大众熟悉的色彩，如自然界中人们常见的色彩等；从大自然中获取的配色灵感可以使你的设计更加切合用户的审美，非常自然；而艺术是对自然的直接反映，是非常宝贵的资源，值得好好利用。
我们可以搜集各种与自然风光相关的图片，从中提取色彩运用到设计中，这些几近完美的搭配呈现出来的和谐美感能瞬间打动人心；天气应用Marline就是一个很好的例子，它的界面背景渐变就参考大自然的变化，随着不同时间段呈现出清晨、日出、正午、日落、深夜、雨天等渐变色，打开应用即唤起了用户的快乐情绪。
品牌价值在创建调色板中发挥关键作用，但是它们不是唯一重要的因素，行业规范也是关键；使用与品牌主要竞争产品几乎相同的配色方案不失一种好方法。
配色在品牌视觉中所发挥的作用是不言而喻的，但是，色彩本身的内涵和情绪特质并不是全部；比如一个行业当中，很多产品都使用了蓝色，那么你的产品继续使用蓝色，可以让用户更快「识别出」你所属的领域；但是本身也存在让人混淆的风险。如果你想要在视觉上脱颖而出，可以试着使用不同的色彩。
中国区或美国区，红色和蓝色都是最流行的颜色
在进行品牌设计的时候，选择配色的第一步，始终是了解各种颜色或者色相的气质和情感属性；然后，在具体设计的时候，再进一步根据品牌的气质和需求，再在色相的基础上调整明暗和饱和度。也可以打破常规创造出与众不同的配色方案。
想要让配色方案更加突出，在设计中添加强调色可能是最容易入手的地方；举个例子，一个律师咨询的App可能会使用传统的蓝色作为基础配色，但是，如果能够加入柠檬绿作为强调色，会显得独特很多。
冷暖对比色是自然平衡的规律，可以在设计中大量使用，这样的配色会使作品非常的出彩，同时不显单调，让用户感觉舒服平和；而且这种搭配方法基本没有啥缺点，使用在设计中，技巧性比较多，对设计的细腻感受要求比较高，需要多练习。
黑色是所有中性色中最强的，而白色是最常用的背景顏色。
黑色是一个很好的选择，有种高端和永恒的感觉，而白色可以带给用户自由，宽敞和透气的感觉；如上所述，黑色和白色也是最大的对比色，如果合理的使用黑色配合白色，会营造出一种优雅的氛围。
交互色彩在执行过程中必须清晰且在界面中保持一致。
号召性用语必须相对于背景具有足够的对比度，并且相对于其他组件必须具有足够的视觉权重，以便用户可以轻松识别它们；Nike健身应用中，「开始」按钮以高饱和度的柠檬绿作为主色，从背景中脱引而出。
但是，交互色彩并不总是以最具饱和度或最亮为特征，而是通过色调、形状、大小或对比度，从屏幕上脱颖而出；因此，交互色彩的有效性将基于用户识别交互区域和执行任务的速度来衡量。
同时，次要功能权重要更轻，并在视觉上更接近信息元素。如上图Nike Training界面中，“设置”和“声音”按钮只用简单的白色，减轻对主按钮的干扰，也避免了页面中出现多个强交互按钮。
可读性是任何设计中的重要因素。你的颜色应该清晰易读，尤其是在处理文字时；因此对比度对视觉效果对影响就非常关键，对比度过小，就会使得界面出现灰蒙蒙对效果。
清晰的对比度，一般会采用色彩的两极，黑纸白字或白纸黑字；而在彩色背景上要让内容清晰可见，就需要搭配纯白或高明度的文字，避免灰色文字；也要注意避免彩色背景上搭配互补色和明度接近的文字，因为这两种搭配会产生一种“震颤效应”，发出光晕的视觉效果。
没有完全纯黑的阴影，阴影的颜色是会受到物体本身固有色的影响，一定要避免使用纯黑色（#000000），使用不太深的灰色，效果会更好；对于有颜色的元素，好的做法是为阴影设定与元素相同的颜色，并使其更暗一些。
如果是有颜色的元素，并且它处在黑暗的背景下，一般情况下，是不建议使用阴影的；但是如果你一定要用，把阴影透明度调到小于10%及以下，并且颜色跟随主色调来；比如按钮为绿色，则可以为按钮设定一个更深的绿色阴影，并加上小于10%的透明度数值。
如下图，左侧的按钮阴影很自然，右侧的则有一层模糊发光的效果，显得不够漂亮。
知识点：
为什么「超链接文字」要用蓝色？
简单说，因为在最早期的网站页面中，蓝色能呈现最高的对比度。
Tim Berners-Lee——web 的主要开创者，被认为是最早用蓝色链接的人。
一个很早期的 web 浏览器 Mosaic，用的是深灰色背景和黑色文字；那时候，能用的非黑色、最深的文字颜色，就是蓝色；所以，让超链接文字突出显示，同时保证可读性，就选定了蓝色，此后超链接文字都用蓝色的传统沿用至今。
App的色彩搭配能直观、快速的反馈到用户的大脑中形成记忆思维；好的色彩搭配可以加深用户对产品的印象；明确界面的视觉层次，让用户分清主次信息；同时还能给用户赏心悦目的视觉享受。那么，在UI设计时该如何进行色彩搭配呢？
我们可以从App中都包含了那些色彩开始，通常一个App中包含了主色、辅助色、点缀色、背景色这4类，下面就以微信读书为例进行详细的讲解（个人角度）。
主色是指在配色中处于主导地位的色彩，给用户的第一眼印象，通常是产品的品牌色。
在App设计中，主色一般占有色相色彩的60%的比例；这里指的是60%的界面都使用到的主色比例，而不是使用面积（因为通常一个界面中使用面积最大的是背景色）；还有就是背景色多为浅灰色或白色，它们都属于无色相色彩，因此不涉及到配色过程中。
我们看到微信读书的第一印象，就可以判断它的主色为蓝色，这也是它的品牌色；在标签栏、按钮、图标、注册登陆全都使用了这种纯净的主色，使界面看上去非常和谐一致。
辅助色与主色相辅相成，辅助色的功能是帮助主色建立更完整的形象，使界面丰富精彩起来，避免画面过于单一。
通常，主色的邻近色、互补色、分散互补色和三角对立色都可以成为优秀的辅助色，但注意辅助色不宜过多，否则就会使界面看上去花哨分散了主题；根据6:3:1原则，辅助色可以占有色相色彩的30%或更少为宜。
在微信读书中，绿色、橙色、梅红、蓝紫色是除了主色以外使用最多的颜色，它们都是辅助色，主要用于功能图标和栏目分类上。
虽然辅助色看起来有点多，但其实都是从主色的邻近色和对比色（及其邻近色）中提取出来的搭配，而且只用在页面中很少的地方，这种搭配技巧既可以丰富色彩的搭配，传递出年轻活跃的产品气质，又保证了整体搭配的和谐统一。
点缀色是除了主色和辅助色以外的另一种色彩，通常体现在细节上。
其作用是，当页面中主色和辅助色不能满足关键信息的提示时，就需要点缀色来吸引用户眼球，还有就是利用点缀色来平衡画面的冷暖色调。
点缀色通常都是分散的，使用面积小，颜色非常显眼，能与主色形成强烈的对比；一般点缀色是主色的互补色。在微信读书中，使用了香槟金、梅红和红色作为点缀色；香槟金用在文章分享按钮上，梅红色用在点赞图标上，强调其特殊性，红色用在通知及退出登录提醒上，用于警示。
来康康这三种点缀色与主色之间存在什么样的关系，在色相（H）上，3种点缀色为邻近色，与主色为互补色；在明度（B）上，3种点缀色均为高明度色彩，起到强提醒的作用。这种强对比的互补色的点缀色可以快速引起用户注意力。
背景色就比较好理解了，通常为了衬托内容，大多数App都是用浅灰色作为背景色，以白色作为背景色的对比色，来区分视觉层次；建议是可以根据前景色来提取背景色，将其调亮或变暗，这样可以让界面色调更加统一。
在微信读书中背景色是偏蓝色调的浅灰色，而不是纯灰色，背景对比色是在白色里加入了蓝色色相，而不是纯白色，整体对比较柔和，给人清爽通透的感觉。
支付宝 Alipay Design 团队提出过一个配色原则：
以同色系配色为主导，多色搭配为辅。
同色系为统一的色相，使用中可以加深品牌色的感知，可以让界面更有层次，同时可以让界面保持色彩上的一致性；由于业务的多样化，我们需要多色搭配为辅；多色的辅助颜色，也可称之为功能色，可设定不同的任务属性和情感表达；再搭配中性色黑白灰，赋予更多的变化和层次。
两种配色通过主次、使用比例，可灵活运用在业务的各个场景中，具有非常好的延展性。
不同于单一色彩，渐变色不属于任何色彩，它营造出千变万化的视觉效果，却又不会增加视觉负担。
相较于单一的色彩，渐变色的复合性质让它在界面设计中具有更强的视觉冲击力，有助于快速抢占视线；如今，这种独一无二的色彩正逐渐成为一种潮流，究其原因是目前大量的扁平风格造成UI设计的严重同质化，人们需要追求更加个性的视觉语言来满足日益增长的设计需求。
下面我们来了解几种常见的渐变的使用技巧：
色相（H）渐变是指由一种色彩向另一种色彩的过渡，这种渐变因跨度大产生的视觉效果非常明显；饱和度（S）渐变是指同一种色彩不同纯度的过度，其产生的视觉效果比较和谐单调；明度（B）渐变是同一种色彩不同明暗的过度，这种渐变的视觉效果给人一种沉静的氛围。
在界面设计中经常看多各种各样的渐变表现方式，使用最多的有以下几种：
水平渐变：
这个很好理解，是指角度为0的线性渐变，是最流行的渐变形式；界面设计中多用在导航栏、进度条、按钮等元素上，能让画面变得精致而通透；例如京东使用橙红渐变的设计语言贯穿整个App，从应用图标到导航栏、按钮、标签，全部都运用了这种由红色到橙色的过渡；仔细观察发现在很多小标签上都使用了水平渐变设计手法，使产品看起来更年轻化。
知识点：
在水平渐变中，通常把轻（亮）的色彩放在左边，重（暗）的色彩放在右边，这样由左向右的方向感刚好与人的浏览习惯保持一致；而反过来就会与人的浏览视线相悖，应避免。
垂直渐变：
即角度为90°的线性渐变，它通常被用在正方形或竖条形的元素上，如注册登陆页，个人中心头部等；垂直渐变中上下两种色彩的深浅变化会产生截然不同的视觉效果，上浅下深会让给人一种凸起的立体感，而上深下浅会给人一种凹陷下去的空间感。
例如「纪念碑谷」的背景是采用了单色相和多色相的垂直渐变作为游戏背景，在让整个画面丰富的同时又不会太抢夺主体的色彩，使画面显得清新透气而不沉闷。
角度渐变：
角度渐变通常有对角渐变和多角度渐变；有角度的渐变相比水平和垂直渐变，它的使用场景更广，如图标背板、启动页、注册登录页、标签等；想让界面更加绚丽、动感和迷人，这时候我们可以考虑多组渐变搭配使用。
色块渐变：
渐变的颜色不只可以运用在一个色块上，还可以运用在一组色块上；设计师运用一组近似性色彩，将每个菜单项清晰区分开，让界面平衡在一个频率上，这样的画面更有节奏感和舒适性。
不同于平滑的渐变，色块渐变不再是单纯的背景装饰，在某些地方还具有一定的功能性，比如使用不同的色块来分割的列表样式；Clear Todos是一款日常任务清单的APP，它抛弃了传统的列表样式，使用了一系列色块来作为列表的分割，非常漂亮和精致。
径向渐变：
是指色彩以圆心向四周扩散的渐变，是一种模拟光源照射的视觉效果，因此光源是整个画面的视觉焦点，将关键元素放在光源中心就会成为主角；通常被运用到大背景上，如启动页、引导页等。
Solar天气应用的背景就是径向渐变，光源扩散的效果营造出一种梦幻般的美感。
渐变色是由一个色彩走向另一个色彩的过程，有着迷人的视觉效果；如果你仔细观察两种色彩的过渡关系，就会发现不是每次都会得到满意的效果，例如红绿渐变就很糟糕，因为它们两者是互为对立的色彩，但是如果加入黄色的过渡色就会好很多；原因是当两种色彩之间超过90度就会导致其渐变色看上去不太和谐自然，只有控制在90度之内才会产生美妙的变化。
如何改善超过90度的两种色相的渐变呢？这时候可以在两色之间加入过渡色进行调和。例如当从黄色到蓝色渐变时，就可以加入紫色作为过渡才能呈现完美的视觉效果。
知识点：
在搭配渐变色时，尽量只改变其色相（H）、饱和度（S）、明度（B）中的一项，这样才能创造出和谐的渐变色方案
转载：人人都是产品经理
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
我们平常会使用很多APP，久而久之我们会发现一些APP的设计非常的相似；一个有新意、精致的APP界面可以让用户产生很深的影响，对产品的形象也有一定的帮助；本文由兰亭妙微UI设计公司分享了关于如何提升UI设计的高级感的方法，我们一起来看一下。
一个App设计是否精致，是否富有设计感，在于它的细节，这就意味着我们在进行设计的时候，要从细微之处着手，从多方面去钻研如何创造出打动人心的UI设计。
本文总结了12个简单直观的提升设计感的小细节，一起来学习。
在对UI 文本进行样式控制的时候，最常见的错误莫过于过度依赖字体大小差异来营造对比；单纯使用字体大小对比，所营造的对比并不够，尝试结合色彩和字重来营造更好的对比效果。
每种颜色都有一个视觉权重，这有助于在内容中建立层次结构；通过使用颜色的深浅，为元素赋予不同的重要性。
如果可以的话，你甚至可以采用两到三种颜色：
类似的，在UI设计的时候，通常两种不同的字重足以营造出优秀的层次感：
▲主标题字重为600，其他标绿点的文字字重都为400
应当尽量不要让正文部分字重低于400，因为这一部分字体本身尺寸已经较小，低于400会使得可读性不佳。
如果你依然需要降低字重，那么不妨让字体色彩更浅一点，或者替换成其他识别度较强、字重相对较小的字体。
灰色文字在无彩/彩色背景下要分开处理：
不要在有色背景上使用灰色的文本，在白色背景下，将黑色的文本改成灰色（或者在黑色背景下使用灰色文本），是不错的淡化其视觉效果的做法。
但是在彩色背景下，想要降低和背景色之间的对比，通常有两种方法：
一是降低白色文本的不透明度；二是让文本逐步接近背景色，而不是改为灰色。
▲左图设计师职位信息为白色文字降低不透明度，右图为和背景同色相高明度的颜色
其次当涉及长篇内容时，大面积的深色粗体字会给人一种沉重感，而且很跳跃；通过选择类似深灰色（#4F4F4F）这样的颜色可以很容易地解决这个问题，使文字更容易被识别。
选择一种基础色，再调整色调和颜色深浅来增加均衡；设计时避免用过多的颜色。如果项目允许，只需使用固定的色板，通过调整基础色的饱和度和明度，利用这种简单的方式为设计增加一致性。
阴影是UI设计中最常见的视觉表现手法，它可以增加元素的深度，使其从背景中脱颖而出，引起用户的注意力，同时也能增强画面的视觉层次感。
相比于采用大范围的扩散模糊阴影，使用微妙的垂直偏移阴影效果更明显，更自然，它模拟了最常见的光源特征，光线从上往下照下来所营造的阴影效果。
这种轻柔的阴影呈现出的干净，增加了画面的精致；如果阴影的范围太小或颜色太深，位置也没有偏移，而是聚集在元素的四周，就会让画面更加扁平，让视觉变得厚重，呈现出不精致的画面感。
阴影不一定是黑色的，还有一种扩算阴影是模拟元素本身的颜色投射在背景上，由于阴影与元素的色调一致，因此呈现出十分融洽的画面感。
在UI设计中，这种手法不宜过多使用，否则呈现出的各种色彩搭配会让人眼花缭乱。
合格的设计师能够绘制风格统一的图标，而优秀的设计师能够创造风格独特的图标。
我们能否在追求大小一致，圆角一致，线宽一致和配色一致的同时，为它的视觉表现力加入更多的创意呢？例如下面这组图标设计，无论是在图形上的创新，还是颜色搭配上都呈现出无与伦比的创意。
标签栏作为一个App的全局导航起着至关重要的作用，它的设计影响着整个产品的视觉风格。
通常，大多数App都是使用iOS规范的设计样式（默认灰色，选中填充品牌色），这样的设计太普通，太常见了；要想让标签栏图标设计精致和富有个性，可以丰富每一个选中态图标的视觉表现，例如给图标加上背景和表情，即显得生动有趣，又增加了用户的好感，给人留下深刻的印象。
3D立体图标设计是近几年来的流行趋势，看上去十分精致、华丽，但是看久了会让人产生轻微的视觉疲劳，同时因其复杂的结构会增加用户的认知成本，一般在外卖美食类应用中比较常见。
Tab是App设计中最常见的控件之一，它源自Material Design的设计规范；现在很多iOS产品当中也开始使用这种导航栏样式来进行设计，而原本属于iOS规范当中的分段选择器变得不那么常见了。
在视觉表现形式上，Tab和标签栏同样也分为选中态和未选态，它的设计较为简单，通常是使用一组文字标签，通过颜色或在标签下加上小长条来区分两者的状态；因为它简单，却越难设计出彩，要发挥极大的设计想象力，跳脱出设计规范的限制，才能找到完美的方案。
例如虾米音乐的Tab选中态是一段音频波线，再配合文字的大小对比，一个富有设计感又符合产品特征的Tabs就被创造出来了。
我们还可以从品牌基因中获取灵感，品牌作为用户熟知的形象是个绝佳的来源。
从品牌形象中提取具有独特气质的视觉富豪作为Tab选中态的小长条，这样就建立起视觉上的联系，让用户产生由内而外的一致感受；例如马蜂窝品牌形象中的微笑符号和飞猪旅行品牌形象中的猪头都被延伸到Tab的设计上，既让界面视觉独一无二，又进一步强化了用户对品牌形象的认知。
在UI设计中，有许多的装饰元素，如卡片的边框、列表的分割线等，虽然边框，分割线是分隔两个元素的好办法，但是它不是唯一的方法；使用过多会让整个布局的设计感降低，或多或少都会干扰用户浏览的视线，让信息内容失去注意力，因此可以减少不必要的装饰元素。
我们可以通过以下几个方法来划分元素的视觉层次，让画面变得干净，整齐：
1）使用阴影
阴影同样可以营造出边界感，而且相比边框分割线更加微妙，并不会显得突兀，不会分散用户的注意力，让内容更聚焦。
2）使用不同的背景色来区分
通常，相邻的元素背景只需要有微妙的差别就能够让人对他们进行区分；所以，你所需要做的就是在不同的区块采用不同的背景色，并且尝试删除分割线，因为你根本不需要它。
3）增加额外的留白
创建元素之间的分离效果，并不一定要通过线框来表现，只要增加留白，让它们分隔开就行了，通过留白和间距来实现元素分组是UI设计中的常用手法。
在App中的每一个界面都有许多元素，那些同类的元素应保持统一的设计样式。
通常个人中心的标签栏图标是一个人形剪影，它代表着用户，因此可以在展示用户头像和用户形象的界面中延续使用。
如果图形拥有独特的外观，如椭圆矩形，也可以作为视觉符号的一种，延续到其他界面中，成为图形或按钮的外观；这样，整个界面就被统一的设计元素联系起来了，给用户始终如一的一致感。
选择符合产品气质的字体，可以与产品的定位相吻合，传递给用户正确的情感意识。
虽然默认字体可以满足大多数App 的设计需求，但会出现一个问题就是——系统字体的普适性并没有什么特色，在一些特定的情境下就显得收效甚微；例如在运动类App中更适合粗壮的斜体来传递力量、爆发力、速度的感觉，换成系统字体后，整体感觉在气势上就变弱了很多。
大多数App都支持三方登陆，他可以减轻用户注册的时间成本。
通常是在注册登陆页的底部展示第三方图标入口，这也是设计师最常忽略的内容，往往是直接将第三方图标调整一致大小和摆放整齐位置，没有针对它们再设计；一个设计精致的App不应漏过任何的细节，我们可以以自家App的图标风格为依据，对第三方图标进行优化设计。
App中优美的图文设计，能带给用户如沐春风的视觉享受，它非常重要。我们经常看到文字叠加在图片背景上的设计样式；为了减少复杂图片背景对文字的干扰，通常的做法是叠加半透明度的黑色蒙版，让白色文字清晰可见，但这不是最优的办法。
我们可以从图片中提取主色调用于叠加背景的填充色，这样就使文字、色块和图片融入到一起了，画面变得高级和富有设计感。
图片的质量影响着整个App的格调和用户的情绪，高品质的图片给人愉悦的视觉享受，产生美好的联想；而低品质的图片会瞬间拉低App的质感。
在App设计中，一张漂亮的图片从收集到上线，需要经过裁剪，调色等过程才能被使用；即使是普通的商品图片，我们将它抠图后调整成统一大小，再加上干净的背景，就能立刻提升商品的美感，界面视觉也会变得美观、整洁。
现在的UI界面设计中，卡片式设计已经是一种非常常见的设计形式，它有利于信息分层和整合，划分出更加清晰的组织结构，实现复杂内容的简化处理，提高空间利用率；同时卡片式设计通常很依赖视觉元素，很强的视觉元素正是卡片式设计的一种优势，也是提升设计品质感的良方。
转载：人人都是产品经理
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
UI设计有设计规范要遵循，同样的原型图也有自己的规范。
任何通过图形示意的东西一样，规范带来的最大的好处是提高信息传达效率。
人是视觉动物，好看的东西总喜欢多看两眼，混乱的东西给人最直白的感受就是逻辑混乱。
这就是「卷面分」。
这篇文章我们说下原型图的规范。
所谓的规范就是定规则，按照这一套规则作为标准进行执行，这里边包含元素规范、布局、颜色等等。
我对画原型图对规范的要求是：尽量向着规范靠近。
原型图不像UI图，不用去到像素级别去抠。
因为画原型我们需要考虑时间，考虑效率，我们需要将最大的精力去放到方案的产出，写需求文档上。
规范只是为了让我们有个标准，如果你想画的规范时，给你一个参考。
对于手机端、PC端、平板、车机等不同的产品形态，最大的区别是尺寸。
在画原型图之前，我们要做的就是先把页面原型尺寸给定下来。
可以参考的规范有：手机端首屏的尺寸设置为 375×667 px。
注：375 × 667 是首屏高度，也就是原型图的最小高度，并不是原型的固定高度，当内容很多时，直接把高度拉长到合适的内容即可。下边提到的PC端尺寸也是这个道理。
状态栏：375 × 20 px
导航栏：375 × 44 px
底部tab：375 × 49 px
这个规范的尺寸是使用的 iPhone8 的尺寸，产品经理火的那几年就是这个尺寸火，所以用这个尺寸的多。
你同样的也可以使用其他常用的手机端尺寸，这没有固定限制。
我比较建议用这个尺寸，因为很多Axure组件也都是按照这个尺寸去做的，适配的比较好。
对于PC端，尺寸可以按照 1440×900px。
虽然当前使用最多的屏幕尺寸是1920×1080。
对于原型图1440的宽度，如果是左边是原型图，右边写需求描述的话，在屏幕上可以正好展示出原型图+需求描述，不用左右滑动去看。
对于平板，建议直接使用 768×1024 px。
对于原型图的颜色，我们可以分别来看：
1）有UI设计师参与的
我们可以考虑使用中性色，中性色是指不强烈的色彩，常见的就是黑白灰。
在选择黑白灰时，我很推荐的是Axure色板中自带的颜色，在画原型时直接选取使用就行。
另外一些大厂规范中，都有自己的中性色定义，你也可以选择使用。不过我不建议你花费太多时间去处理颜色。
如下图，左边是用Axure中的黑白灰，右边是使用的Arcodesign的中性色，在画原型时，整体上影响并没有那么大。
虽然右边的更好点，如果你要用其它中性色，可以将颜色收藏进Axure的色板中，方便下次使用。
2）没有UI设计参与的
比如说后台，可以添加一些颜色。
后台一般都是内部使用，对样式没有太高要求，也不会让UI进行设计；
因为后台一般都是使用现成的UI组件进行开发的，比如Antdesign、Element等；
具体什么颜色，可以用万能的蓝色作为主色调，使用其他颜色作为辅助即可。
对于语义色，来表达成功、警告、错误语义，可以选择红绿黄进行使用即可。
对于文字，涉及到字体、字号、粗细、行间距等。
字体
可以使用 Arial，也就是Axure默认的字体。
同样的，也可以使用苹方、微软雅黑，这两个字体则需要单独安装。
不过当你通过Axure打包发布出去时，如果对方没有安装对应的字体，将则不会展示为苹方/微软雅黑字体进行展示。
对方查看的效果和你看的效果会不一样，我正在找处理方案，目前还没找到。
字号、字重
也就是字体大小、字体粗细，对于字体大小、粗细，还有颜色，影响的信息层级关系。
我们直接看规范：
一级标题：20px、加粗，颜色#000000
主标题：18px、选择性加粗，颜色#000000
次标题：16px、选择性加粗，颜色#000000
小标题：14px、选择性加粗，颜色#000000
正文：14px、选择性加粗，颜色#000000/#333333
辅助文字：14px/12px，不加粗，颜色#333333/#555555
次级文字：12px/10px，不加粗，颜色#555555/#7F7F7F
注：对于文字的大小，前提是在 375×667、1440×900 的页面尺寸下的。如果你使用的尺寸过大，对应的字号也需要加大。
这个规范不用记，可以用字号 14 作为标准，层级高的字号+2，加粗、颜色加重即可，层级低的字号就-2，不加粗，颜色浅一些。
行间距
在原型中不重要，Axure时会根据字体大小自动调整行间距，如果文字内容过多时，可以手动进行加大间距。
原型中如果是「图标+文字说明」一起出现，不用管图标，直接使用圆形或矩形代替即可。
占位符太丑，不建议用。
颜色不要使用太深的中性色。如下图示例：
如果只有「图标」，可以选择能表达具体含义的图标。
从iconfont、iconpark中搜索复制svg格式粘贴到Axure使用即可。
如下图中的扫一扫、设置、播放图标。
如果你觉得使用圆形或矩形表达图标的意思不明显，或者是不想找图标，就在加个「icon」文字，或者直接用写文字。
如下图的扫一扫、设置、播放，直接使用文字说明即可。
对于头像、图片等，都可以加个文字说明。
如果是没有UI介入设计，当需要确定图标时，则需要产品经理确定，同样的去iconfont、iconpark中找到图标，按前端要求提供过去即可。
图片在原型中不需要使用真实图片，直接使用矩形代替即可。
Axure中自带的图片元件太丑了，不建议用。
可以再加上文字说明，来表达这是图片，比如加个img，或者根据图片特性，如封面、头像，都是可以的。
原型中的图片规范可以按照宽高比，比如 4:3，3:2，16:9，1:1。
当然这个没那么严格，如果你想规范些，可以这样用。
圆角在原型中不重要，如果你想使用圆角，可以按照2的倍数调整。
圆角在UI中的作用很大，而且规范还挺多，原型中就无所谓了。
阴影不重要。如果想使用阴影，可以将阴影使用纯黑色号000000，透明度30%，模糊5。
对齐是版式设计的基本原则，使用工具进行对齐即可。
具体采用「左对齐、右对齐、上对齐、底对齐、居中对齐」，你可以按照布局来，比如靠右的元件，使用右对齐。
分布是指将页面内容使用水平分布、垂直分布的方式进行平均分布，来保证页面元素之间的间距相同。
当相同的元素多次出现时，我们可以使用分布快速调整，让页面更规范。
间距没有那么重要，但是规范的原型一定要有会有间距。
间距分为上下左右间距，分为模块与模块间的间距，子模块与子模块的间距，元素与元素之间的间距。
对于整个移动端来说，可以使用 5 的倍数调整间距。
对于尺寸较大的PC端原型，可以按照 10 的倍数调整间距。
也可以直接将元件结合「对齐、分布」直接调整，不用关注具体间距。
根据我们之前提到的设计原则「亲密性」，属于同组的内容间距小，不同组的内容间距大。
组件是就是可以直接拿过来的元件组合。
对于每个组件都是通过基础的形状、文字、颜色、尺寸、间距等进行组合形成的。
就是UI设计中的原子化设计。
当完成基础的形状、文字、颜色、尺寸、间距等规范确定后，进行基础元素的组合即可得到规范的组件。
你可以基于上边的规范去制定自己的产品组件库，可以快速使用规范的组件。
在画原型时，可以将原型中的内容尽量填写为真实内容，使用极值状态，将内容最多、数据最多的情况画出来。
规范建立好是为了使用，我们了解清楚原型的规范后，可以在画原型时往规范上靠，慢慢的养成好习惯。
一个规范好看的原型图在求职面试、评审的时候，会是个加分项。
当然，不要过度遵循规范，原型图不是UI图，重要的是使用原型将功能表达出来。
对于刚入门的产品经理来说，原型图是日常的基本工作。
转载：人人都是产品经理
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
UI走查中95%的问题源于“间距不准”，而肉眼难以量化，导致沟通低效。DevTools（浏览器开发者工具）作为设计师与前端的“共同尺子”，能将页面视觉问题转化为可测量、可验证的技术事实。本文从设计师视角系统讲解如何用DevTools高效走查，希望可以帮到大家。
如果你经常参与 UI 走查，应该会有类似的体验：设计稿里一切工整、呼吸感刚刚好，到了线上页面，总有种说不出的别扭——按钮看起来有点胖，列表挤成一团，弹层莫名“顶头”——你明明感觉哪里不对，却很难说清楚问题到底在哪儿。
有一组数据挺扎心：在一次前端对UI 走查问题的统计中，“间距”占到了 95%、字体相关只有 3%、边框背景色等合计只有 2%。
换句话说，大部分“看着不舒服”，其实都跟间距有关系。但是间距很难通过肉眼直接量化，导致设计师走查费时、与前端沟通效率低，前端修改有时也是“跟着感觉来”、难以达到最优效果。
这也是为什么，我把 DevTools（开发者工具）当成 UI 走查的标配工具。
这篇文章，就想从一个设计师的视角，讲讲什么是 DevTools 、如何用 DevTools 做高效的 UI 走查，把实践中总结出的那一整套方法，汇成一条实际好操作的路径。
本文不涉及复杂的代码和技术概念，放心享用。
DevTools（Developer Tools，开发者工具）是现代浏览器自带的一套网页检查与调试工具，用于查看网页的结构、样式、脚本、网络请求和性能等信息。它能够实时展示页面背后的代码和布局，并允许用户在本地修改样式、观察变化。
DevTools 不是独立软件，而是浏览器内置功能。目前主流浏览器都提供了自己的 DevTools，包括Chrome、Safari、Firefox、Edge等。
DevTools 不是只给前端用的“黑客面板”，而是设计师与工程师之间的一把“共同的尺子”，它能让一个页面的“表面外观”变成“透明结构”：你可以在上面看到每一个元素的真实尺寸、间距、颜色和字体，可以在几秒钟内验证“到底是谁没对齐”，也可以通过临时修改样式，把你脑子里的改善方案可视化地呈现出来。
换句话说，它提供了一种把 UI 视觉现象与技术实现逻辑直接对应起来的能力。
开始之前，第一步永远是把 DevTools 打开。最常用的方式是：
很多设计师第一次看到 Elements 面板时，会被大片的 <div> 吓到。
其实可以把它当作“页面骨架实时展开图”：每一层缩进就是嵌套关系，每个标签对应页面上的一个区域。
我们不需要懂它，只需要关注与UI走查密切相关的三个面板：样式Styles（样式规则）、计算样式Computed（最终计算值）、布局Layout（布局体系）。
如果你对英文属性名不够熟，可以在右上角齿轮按钮里，把语言切换到中文，这能降低学习成本。
要做 UI 走查，第一件事就是精准选中目标元素，常见方式包括：
点击 DevTools 左上角的小箭头
在页面上移动鼠标，高亮所选区域，点击可锁定元素
适合复杂、多层嵌套的界面。
hover到具体元素，右键 → 检查（Inspect）适合按钮、标题、图标等肉眼识别明显的元素
既然 UI 走查里 95% 的问题都是”间距看着不对”，学会量间距是最划算的一件事。
有两个方法：
要理解间距，首先要认识 Box Model（盒模型）——这是网页布局的基础概念，它将每个元素看作一个”盒子”，由内到外分为四层：content（内容区）、padding（内边距）、border（边框）、margin（外边距）。
DevTools 能将这个模型可视化展示，让你清楚看到每一层的数值，从而与设计稿进行比对，精准定位间距问题的根源。
在页面或者元素Elements 面板中移动鼠标，页面对应区域会出现不同颜色的高亮框：橙色：margin、绿色：padding。
适合快速巡检整体布局。
至于颜色、字体、行高等样式，可以从样式Style或者计算样式Computed查看。
Style面板显示了所有作用于当前元素的样式规则，包括颜色、字号、字重、字体、边框、阴影、圆角。
如果你发现同一个属性，比如font-size，出现了很多次，有的还被划上了删除线。也别奇怪，这代表有多个规则作用于它。
怎么找到哪个是真实的值呢？有两个方法：
一是Styles 面板里的规则，是按从上到下的优先级排列：越靠上的规则优先级越高。我们只需要从上往下找即可。被覆盖的会被划上删除线，不再生效，直接忽略就行。
二是计算样式Computed面板。
它显示了元素最终的样式，更直观，更适合回答：最终字号是多少？行高值是多少？是否有透明度？宽高是多少？
并且可以勾选“组合”，将这些属性分组显示，分为Layout、Text、Appearance和Other。更易查找。
DevTools 最强大的地方在于：你不仅能看到样式，还能立即修改它，实时预览效果——这让走查从”发现问题”变成了”提出方案”。
在 样式Styles面板中，找到你想修改的属性（比如 font-size: 14px），直接点击数值部分，就能进入编辑状态。
步骤：点击数值（如 14px） → 输入新值（如 16px） → 按 Enter 确认，页面立即生效
适合快速微调单个属性。
选中数值后，无需手动输入，可以用键盘上下键进行微调：
适合精细调整间距、透明度等需要”试着来”的场景。
如果某个属性根本不存在（比如你想加个 border-radius），可以在 Styles 面板的任意规则块内：
点击空白处 → 输入属性名（如 border-radius）→ 输入值（如 8px） → 按 Enter 确认
页面立即应用新样式。
有时你不确定是哪条规则导致了问题，可以用”复选框”快速开关样式：
在 Styles 面板中，每条样式左侧都有一个复选框，取消勾选即可临时禁用该规则，观察页面变化。
适合排查”到底是哪条规则在捣乱”。
当你调整出满意的效果后，可以：
右键点击修改后的属性 → 选择”复制” → “复制声明”或”复制规则” → 粘贴到文档或发给前端
这样你就能把”视觉方案”转化为”技术语言”，大幅提升沟通效率。
注意：所有修改都是临时的，刷新页面后会恢复原样。DevTools 不会改动源代码，只是让你在本地预览效果。
许多 UI 缺陷只在 hover、active、focus 状态下暴露，例如：hover 时颜色未变化、点击态几乎无反馈、表单 focus 出现丑陋蓝框。
在 Styles 面板顶部点击 :hov，勾选对应状态即可模拟：hover、active、focus、visited……无需鼠标繁琐操作。
当你发现”每个元素单独看都没问题，但整体就是不顺眼”时，问题往往出在布局层级。
这时候，DevTools 的布局 Layout 面板就能派上用场——它能把页面背后隐藏的布局逻辑全部”照亮”。
点击右侧面板中的布局 Layout，会显示所有网格布局（Grid）和弹性盒子布局（Flexbox）。
如果点击网格名称（或勾选复选框，或直接在元素Style面板中点击对应的 Grid 标签，三者是联动的），页面中会直接高亮显示网格区域，你可以看到：网格线与区域划分、网格线行号与列号、轨迹大小、区域名称、延长网格线（用于检查模块对齐效果）。
这对于排查”为什么这个卡片没对齐”特别有用。
如果点击弹性盒子名称（或勾选，或直接在元素中点击对应的 Flex 标签，三者是联动的），页面中会高亮显示色块、框线，你可以看到：主轴方向（横向还是纵向）、子项的分布方式（居中、两端对齐等）、容器与子项的边界、哪个元素占用了过多空间。
你还可以：点击色块，修改框线颜色、点击定位图标，直接跳转到 样式 Styles 中的对应代码。
这对于排查”为什么按钮挤在一起”或”为什么间距不均匀”非常有帮助。
DevTools 的“设备模拟”工具，让响应式问题无处可藏。
观察：导航是否撑开、文字是否过密、元素是否溢出、弹窗是否遮挡、按钮是否掉到底部……
并支持：切换设备型号、改变屏幕宽度、翻转屏幕方向。
当你熟练掌握了 DevTools 的基础操作，你会发现自己开始好奇更深的问题：这些元素是怎么组织的？移动端怎么走查?能不能让 AI 帮我自动找问题？
这些问题没有标准答案，但值得探索。
移动端页面分两种：H5 网页和原生 UI。它们的走查方式完全不同。
如果是 App 内的 H5 页面（WebView），你可以通过真机调试，直接用 DevTools 查看。如果是原生 UI（比如 iOS 的 UIKit、SwiftUI），DevTools 就无能为力了，需要用专门的工具，比如 Lookin。
怎么判断一个页面是不是原生？
有几个简单的特征：文本无法长按选中、滑动非常顺滑、动画丝滑、左右滑返回手势明显（iOS）。如果”像网页但又不像网页”，那可能是混合页面——Native 外框 + 内嵌 H5。
有团队已经在尝试用 AI 做自动化 UI 走查，比如让 AI 批量识别间距、颜色、字号等问题。
但目前来看，AI 更适合做”初筛”——它能快速找出明显的偏差，但最终的判断和决策，还是需要人来做。因为很多设计问题不是”对错”，而是”合不合适”。
未来，走查可能会变成这样：AI 先跑一遍，标出疑似问题；设计师再用 DevTools 逐一确认，给出具体的修改建议。这样既提高了效率，又保留了人的判断力。
当你习惯了这种基于 DevTools 的走查方式，你会发现自己跟以前有一处很大的不同：过去你走查，是在“凭感觉找问题”，现在你走查，是在“用证据找原因”。
DevTools 不是让你变成前端工程师，而是让你能够理解界面背后的结构、逻辑和约束，并提供既符合体验、又便于实现的解决方案。
最终，UI 走查也会从一场“找谁背锅”的会，变成一场“让产品更好”的会——设计师和工程师坐在同一个 DevTools 界面前，说着同一种语言，指着同一份证据。而这，正是一个成熟团队应该拥有的样子。
转载：人人都是产品经理
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
在科幻作品的宏大叙事中，用户界面（UI）不仅是信息的载体，更是世界观的具象化表达。它是未来科技的视觉语言，是连接人类与未知领域的桥梁，其设计美学深刻影响着我们对未来的想象。兰亭妙微的设计师最近在做一个vr眼镜的项目，所以要找一些相关的资料和文章，并写出来和大家分享。
@图文来源于PANTONE美国网站
又到了一年心跳与色彩同频共振的时刻！大家翘首以盼的PANTONE 2026年度流行色11-4201 Cloud Dancer （云上舞白）正式闪亮登场，它的出现为时尚设计界带来了一个新高潮，接下来，它将引领我们走向哪里？会激发出哪些新的灵感及故事呢？
2026年度彩通发布的流行色为PANTONE 11-4201“云上舞白”（Cloud Dancer），它属于关键的结构色，凭借自身多功能性为整个色谱搭建起框架，让所有色彩都能绽放光彩。
当下，色彩已然成为个性表达的象征，而“云舞者”这种色调能顺应环境，实现和谐搭配并营造出对比效果，不管是单独运用，还是与其他色彩搭配组合，都能为各类产品应用场景及环境增添轻盈灵动之感。
@图文来源于PANTONE美国网站
PANTONE 11-4201 “云上舞白”是单色穿搭的完美基调。这款低调的白色散发着内敛的气息，无论是服装纺织，时尚配饰和鞋履，美发美妆、室内装饰设计或者包装和多媒体等领域，都可以展现了一种自觉的简约状态，鼓励人们在寻求片刻宁静与休憩时，真正放松身心，专注当下。
于广大消费者而言，PANTONE是色彩领域的“预言家”，它的年度色无疑是最具影响力的存在之一，其凭借入微且精准的色彩洞察力，为我们揭开未来一年代表色的神秘面纱。解锁出当下人们内心深处向往的生活态度与精神追求。
且为了让这份色彩的魅力能更生动地融入生活，PANTONE还贴心地奉上七组精心搭配的色彩方案，助力我们轻松应对各种多元场景，让色彩灵感如泉涌般不断涌现。
粉状蜡笔
柔和的粉彩色调和中性色调与云舞者（Cloud Dancer）搭配相得益彰，呈现出微妙的色调变化，既细腻又赏心悦目，低调内敛。
@图文来源于PANTONE美国网站
休息一下
Cloud Dancer 邀请我们休息片刻，诱惑我们品尝各种色彩，任凭哪一种颜色触动我们：一杯气泡粉红柠檬水或木瓜，美味的焦糖或可可奶油，或者一口茶或芒果莫吉托——所有这些都构成了一个充满乐趣的调色板。
@图文来源于PANTONE美国网站
大气
云上舞白将我们带到高处，在那里，轻盈的白色冲破灰蒙蒙的天空，在朦胧的阳光下展现出清澈、轻快的蓝色。水润的蓝绿色从深邃的水域中散发出来。
@图文来源于PANTONE美国网站
舒适区
每个人都需要一个舒适区，一个可以放松身心、远离尘嚣的地方。“云舞者”周围自然有机的色彩令人感到舒适和包容，营造出一种令人安心的宁静氛围。
@图文来源于PANTONE美国网站
热带色调
当我们想象热带地区时，脑海中浮现出鲜艳的色彩：碧蓝的海洋、清爽的柑橘饮品、明艳的花朵和异域风情的鸟类。如果这片阳光普照的天堂里有一朵云，那也一定是朵轻盈飘逸的云舞者。
@图文来源于PANTONE美国网站
光与影
云舞者优雅地融入柔和的色调之中，最终消融于阴影之中，从而产生轻松自然的色彩对比。
@图文来源于PANTONE美国网站
魅力与光彩
白色与黑色的阴柔之美必然交融，再以魅惑的唇膏红点缀。复古酒红、蓝绿色、闪耀的石墨灰、璀璨的灰色以及银色缎面金属光泽，更添几分迷人魅力。
@图文来源于PANTONE美国网站
自2000年起，PANTONE每年都会从全球范围内筛选出一种代表色，作为该年度的流行色，这一色彩不仅在设计、时尚、家居等领域掀起潮流，更成为全球文化情绪与态度的直观表达。
而此刻发布的2026年度色PANTONE 11-4201，将把人类设计史推上一个新高潮，分为'遇见它之前'和'遇见它之后'。未来一年甚至更久，让我们满怀期待和见证以此为核心灵感且创意无限的作品问世。
COLOR
PANTONE历年代表色合集
智能家居开关面板的界面设计，核心是 “场景化交互、轻量化视觉、多感官反馈、生态化适配”.
头部品牌界面设计核心特点与代表案例
|
品牌 |
界面设计核心特点 |
代表系列 / 功能 |
界面设计亮点 |
|
华为鸿蒙智家 |
鸿蒙分布式 UI + 蒙德里安美学，卡片化场景优先 |
蒙德里安系列、智能中控屏 |
1. 引力动效 + 胶囊 / 卡片组件，视觉统一；2. 金缮 / 月辉系列界面与面板材质呼应；3. 背光随环境光自适应，低饱和配色 |
|
施耐德电气 |
极致简约 +“减感空间”，触控与实体双反馈 |
致铂系列 |
1. 4.3mm 超薄面板 + 窄边框，界面轻量化；2. 触控按键仅操作时高亮，平时隐形；3. 1.5° 微动摆角，操作 “有感无声” |
|
绿米 Aqara |
米家生态适配 + 场景化快捷入口 |
智能墙壁开关 H1 Pro |
1. 层级≤2 层，场景卡片（如 “回家 / 离家”）一键触达；2. 图标直观（太阳 = 照明、月亮 = 睡眠）；3. 状态色标低饱和，避免视觉干扰 |
|
罗格朗 |
艺术与科技融合，界面适配家装风格 |
Arteor 系列 |
1. 异形面板 + 装饰化界面（如时钟 / 温度嵌入）；2. 哑光涂层 + 同色系配色，弱化设备感；3. 场景模式替代多按键，操作元素少 |
|
公牛 |
性价比 + 易用性，适配大众家装 |
G56 系列 |
1. 大字体 / 图标（≥8mm×8mm），适配老人 / 儿童；2. 黑白灰中性色，适配北欧 / 极简风；3. 触控 + 实体旋钮双兼容， |
操作逻辑：1 步触达核心功能
设计避坑与落地建议
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
蓝蓝设计的小编 http://www.lanlanwork.com