无法想象没有按钮的页面是什么滋味，那定会像没有方向盘的汽车，让人不知所措吧？也无法想象按钮设计不恰当，会给用户带来怎样的困扰？
面对十万火急的任务需求，如果需要调动全部理性脑，深呼吸三秒，才能找到想要执行操作的按钮入口，我想这样的产品设计是失败的，是会被用户所唾弃的。
兰亭妙微UI设计公司，将详细剖析按钮的神秘面纱，了解它、研究它，让按钮设计成为产品的得力助手，为我们的产品赋能，为我们的工作提效，下面就让我们开启这场神秘之旅吧!
一、按钮的定义
二、按钮设计的种类
三、按钮设计的尺寸
四、按钮的构成
五、按钮设计的作用
六、按钮的位置
七、按钮的颜色
八、按钮在UI界面的设计原则
九、按钮设计的注意事项
十、按钮弱化设计的六种方式
按钮在我们生活中起着很大的作用，它就像我们的小助手一样，帮我们一键开启想要的任务，凡事都能一键触达。
按钮在UI界面中，是一种界面交互控件，通常以矩形、圆形或其他几何形状呈现，具有明确的视觉边界。它通过用户的点击、触摸等操作来触发特定的功能或操作，如提交表单、执行命令、导航页面、切换状态等。
按钮一般包含文字标签、图标或两者的组合，以清晰传达其功能。同时，按钮在不同状态下会呈现出不同的视觉效果，如默认状态、按下状态、悬浮状态、禁用状态等，为用户提供操作反馈和引导。
❶ 次按钮
常规按钮，用于非主要动作。如果不确定选择哪种按钮，次按钮永远是最安全的选择。
❷ 主按钮
突出“完成”、“推荐”类操作；一个按钮区最多使用一个主按钮。
❸ 文字按钮
弱化的按钮，采用更轻量的按钮样式，可用于需大面积展示按钮场景，例如下面的站酷活动页就用了很多的文字按钮，只有当按钮被选中时，按钮才会高亮选中。
❹ 图标按钮
图标提供视觉线索，避免逐字阅读按钮文案，更高效地使用界面，让页面看起来更加的简洁。
❺ 在按钮中添加图标
用于对按钮含义补充解释，提高按钮识别效率。
按钮的样式可以从多个方面进行分类和设计，以下是一些常见的样式分类：
❶ 按颜色划分
❷ 按形状分
❸ 按边框分
❹ 按图标分
❺ 按阴影样式分
❻ 按动画种类分
马蜂窝的功能主按钮，在点击的时候都会产生动画，交互感十足。
加载动画按钮：
当按钮处于加载状态时，按钮会有加载动画效果，如旋转图标、进度条等，常用于告知用户操作正在进行中。
3.1 默认按钮
按钮的初始状态，通常具有正常的颜色、形状和文字显示，等待用户操作。
3.2 待激活状态按钮
待激活状态按钮通常用于指示某个功能或服务尚未激活或启用，用户需要执行某些操作来激活它。这种按钮的设计和实现需要清晰地传达当前的状态，并引导用户进行下一步操作。
3.3 点击状态按钮
当用户点击按钮时，按钮会呈现按下的状态，通常通过改变颜色、形状或添加阴影等方式来表示。
3.4 禁用按钮
在某些情况下，按钮会处于禁用状态，无法进行操作，通常会以灰色或半透明的方式显示，提示用户当前操作不可用。
3.5 加载状态按钮
加载状态按钮通常用于指示某个过程正在进行中，例如数据加载、文件上传或页面正在加载等。这种按钮可以让用户知道他们的操作正在被处理，而不是卡住或出现错误。
3.6 危险提示状态按钮
危险提示状态按钮通常用于提醒用户即将执行的操作可能带来风险或不可逆的结果，例如删除重要文件、注销账户等。这种按钮的设计和实现需要让用户明确意识到操作的危险性，以避免误操作。
下边这两组弹框就是运用了危险按钮，来提示客户未来即将面临的风险，警示作用非常的明显。
在Web端，按钮尺寸没有固定标准。不过，一般来讲，按钮的高度常在32px-48px之间，宽度可根据内容灵活设置，但最好不要小于48px，这样方便用户用手指（触屏设备）或鼠标点击。
像一个简单的“提交”按钮，宽度可能是80px左右，高度是36px左右。这些尺寸能保证按钮在视觉上比较舒适，易于交互。
麻省理工触摸实验室通过对人类指尖的研究，得出了关于界面按钮大小设计的一些重要参考数据。
对于食指，平均宽度在16至20毫米，指腹触摸区域尺寸为10至14毫米，指尖触摸区域尺寸为8至10毫米；对于拇指，平均宽度为25毫米，指腹触摸区域尺寸为12至16毫米，指尖触摸区域尺寸为10至12毫米。
由此建议，食指触摸的按钮应保证在8毫米×8毫米以上，且控件间距应保证至少在1毫米以上；拇指触摸的按钮应保证在10毫米×10毫米以上，且控件间距应保证至少在2毫米以上。
该研究还指出，大多数用户可以舒适可靠地击中 10 毫米×10 毫米的触摸目标 。
从按钮图标尺寸来看，根据苹果官方设计指南，iOS中按钮图标有不同标准。小图标尺寸为24×24pt，用于小型按钮，如导航；标准图标为32×32pt，用于普通按钮，适合次要操作按钮；大图标是 40×40pt，用于宽大按钮；特大图标则为48×48pt，用于特大按钮。
不同设备屏幕尺寸也有对应的建议图标尺寸，如iPhoneSE建议24pt，iPhone14及iPhone14Pro建议32pt，iPad 建议40pt 。
在最小触摸区域方面，iOS规定最小触碰区域为44×44pt，这种尺寸一般适合主要操作按钮。
UI按钮的组成主要包括以下几个关键元素：
圆角的大小决定了按钮的气质和视觉感受。小圆角常用于常规按钮，如4px圆角；圆角越大，越有亲和力，人眼往往不喜欢非常锋利的物体，所以通常不建议使用0圆角的按钮样式，根据我大量的体验，我发现市面上确实也是带圆角的按钮居多些。
图标用于直观表达按钮的功能或状态，如加载中、编辑等。图标的设计应与整体页面风格一致，并确保其含义明确易懂。
内边距能够扩大按钮的可点击范围，帮助用户更容易点击按钮。一个好的设计间距是把按钮的水平内边距设计成垂直内边距的2倍。当然，你也可以根据你设计的实际情况做适当调整，规矩不是死的。
容器是包含所有视觉和交互元素的框架，包括颜色、纹理、文案和图标等。容器的设计应支持按钮的功能和美观。
边框定义了按钮的边界，常用于次级按钮的描边。边框的粗细和样式可以影响按钮的视觉层次和交互效果。
文案是按钮上的文字描述，用于表达按钮的含义和功能。文案应简洁明了，易于理解，同时具有一定的吸引力。
背景用于表达按钮的状态和品牌气质。不同的背景颜色和纹理可以增强按钮的视觉吸引力和品牌识别度。
投影用于凸显层级关系，帮助用户更好地区分不同的按钮。投影通常与纹理、渐变色结合使用，以打造更好的视觉体验。
佐糖首页为了促进转化，特意将“开通会员”的按钮用投影凸显处理，带投影的按钮明显有向前走的感觉，比没有投影的按钮看起来更加显眼。
小小投影在页面中不仅起到增加空间感的作用，还起到了业务强调的作用，已经不仅仅是样式的一个承载了。
这些元素共同作用，不仅提升了按钮的功能性，还增强了其美观性和用户体验。在设计UI按钮时，应综合考虑这些因素，以确保按钮既美观又实用。
Antdesign指出按钮的作用是指导用户采取你希望他们采取的行动，并帮助用户防错。
1.1 提交与确认
在表单填写场景中，如用户注册、登录、信息提交等，按钮用于触发提交或确认操作，将用户输入的信息发送给系统进行处理。
1.2 执行功能
在各类软件中，按钮是执行具体功能的主要方式，如在图像编辑软件中，“裁剪”“旋转”“调整颜色”等按钮，可让用户快速实现相应功能。
2.1 页面切换
在多页面的应用或网站中，按钮可实现页面之间的切换，如网站的首页、产品页、关于我们页等，通过点击按钮，用户能方便地浏览不同页面内容。
2.2 菜单展开与收起
用于控制导航菜单的展开与收起，节省页面空间，提高界面的整洁度和易用性。
3.1 显示与隐藏
可用于控制某些元素的显示与隐藏，如在电商网站中，点击“查看更多商品详情”按钮，可展开隐藏的详细商品信息。
飞书中的这个小小按钮，它承载着隐藏折叠的功能，让页面看起来更加的简洁有序。
3.2 启用与禁用
在某些功能需要满足一定条件才能使用时，按钮可用于表示该功能的启用或禁用状态，如在未填写完必填项时，“提交”按钮处于禁用状态，无法点击。
中国移动云盘的登录页就是这么设计的，当前面信息没有填完，后面的登录按钮始终是禁用的状态，只有当信息填完，且填写正确，按钮才会亮起。
4.1 操作反馈
当用户点击按钮后，按钮会通过颜色、形状、动画等方式的改变，向用户提供操作反馈，告知用户系统已接收到操作指令。
4.2 引导提示
在一些复杂操作或新功能引导时，按钮可作为引导提示的一部分，告知用户下一步操作，如在新手引导流程中，突出显示“下一步”按钮。
心岛日志的新手指引中就是这样设计的，按钮在其中起了很重要的指引作用。
5.1 数据筛选
在数据展示界面，如表格、列表等，按钮可用于对数据进行筛选，方便用户快速找到所需信息。
钉钉打卡这个界面中，多亏有了日、周、月的筛选按钮，才让数据筛选变得如此便捷。
5.2 数据排序
通过点击“按时间排序”“按销量排序”等按钮，用户可对数据进行重新排序，以满足不同的查看需求。
很多产品的按钮颜色都是与它的品牌色高度一致的，它既是按钮，又是品牌色的传递大使。
网易云音乐的按钮色用的网易红，钉钉打卡的按钮用的腾讯蓝，都是在传递自己的品牌色，同时也是在进行指令的传达。
在日常设计中，页面无疑少不了按钮位置的摆放，那么按钮放置在什么样的位置合适，这也是一个值得深思的问题，也许我们已经司空见惯了按钮的位置摆放，但是我们知道它为什么要放这里或者那里吗？下面我们来看下这几种设计模型，让它告诉我们，为什么，在特定场景下，按钮位置要这么放？
1.1 原理含义
Z型视觉模型是一种描述用户在浏览网页或界面时视觉轨迹的理论模型。
它的布局遵循字母Z的形状，指用户的浏览路线——从左到右，从上到下的的视觉运动轨迹。
首先，人们从左上角到右上角进行扫描，形成一条水平线；第二步，向页面的左下侧，创建一条对角线；最后，再次向右转，形成第二条水平线，当观众的视角以这种模式移动时，它形成一个虚构的“Z”字形。
1.2 视觉区域
1.3 应用案例
在电商网站中，商家会把热门推荐或主打产品放在区域1和区域3，以吸引用户的注意力。
在产品详情页面，将“加入购物车”“立即购买”等按钮放在区域4，方便用户在浏览完产品信息后进行购买操作。
天猫商城就是这样做的，把网站的LOGO图放置在左上角（区域1），把产品图放置在左下角（区域3），最后在用户浏览了全部页面之后，在右下角（区域4）放置购买按钮，引导用户下单。
在这个带有销售场景的页面设计中，购买按钮放置在右下角符合用户浏览习惯，也符合Z型视觉模型。
在B端应用软件中，可能运用的功能比较多，按钮也比较多，通过大量分析和观察发现，它们大部分喜欢把按钮放置在每次视觉运动线的起点或者终点的位置。
腾讯云是这样处理的，中国移动网盘是这么处理的，看似巧合，其实也有它合情合理的一面，因为每一个动作的开始和结束都会更加的引人注意。
这就跟人们每次入职一个新公司一样，刚进去时会特别卖力、小心，后面时间长了，也就形成免疫，习惯了，但是当最后要离开这家公司的时候，最后心情又会特别复杂，回想起自己在这里成长的岁月，就会心生很多的感慨，也会特别的记忆深刻。
也许这也是为啥很多页面设计，喜欢把重要的按钮放置在每次视觉运动线的起点或者终点吧！
按钮的颜色在界面中不仅起到视觉点缀的作用，同时也是按钮状态的一种呈现和反馈。
按钮颜色不是千篇一律的品牌色，它也经常需要根据业务场景的不同，更换颜色，比方说红色-删除按钮、黄色-告警按钮、绿色-通过按钮、蓝色-更多按钮，不同的按钮在颜色设计上都会有所区别。
此外，在设计按钮颜色时，有一些基本规范。
首先，从功能角度看，主要按钮通常会使用比较突出的颜色，像鲜艳的蓝色，这是因为蓝色醒目又不会过于刺眼，能引导用户去点击。次要按钮（如取消、返回）的颜色会稍淡一些，比如浅灰色，让用户知道这是相对次要的操作。
从颜色搭配来说，按钮颜色要和背景色有足够的对比度，方便用户识别。比如背景是白色，深色按钮就会很清晰；如果背景颜色较深，那按钮可以用浅色或者高亮度颜色。
另外，颜色的选择也要考虑产品的风格和使用场景。例如，在一个游戏软件里可能会使用更活泼的色彩，像红色、橙色；而在办公软件里，通常会采用比较沉稳的色调，如蓝色、黑色。
1.1 视觉清晰
按钮应采用用户熟悉的设计样式，如带有矩形或圆角矩形边框的填充按钮、带有阴影的填充按钮、幽灵按钮等。
1.2 文字明确
按钮上的标签应准确、简明直接地介绍其功能，避免使用过于通用或模糊的表述，让用户清楚点击后会发生什么。
2.1 位置合理
将按钮放在用户期望看到的地方，如遵循F型或古腾堡原则，在页面的视觉焦点区域放置重要按钮。
2.2 尺寸适宜
按钮大小应反映其在屏幕上的优先级，更大的按钮用于更重要的操作，同时要适配用户的手指，避免误触。
3.1顺序得当、逻辑一致
按钮的顺序应反映用户与界面之间交互的逻辑，如“上一步”按钮通常在左边，“下一步”按钮在右边。
3.2 状态样式一致
按钮应具有一致的状态样式，如默认、按下、聚焦、禁用等，一个产品中，这些状态样式要高度的一致，不能在这个页面按钮样式是这样的，跑到另一个页面，样式又发生了改变。
著名的格式塔心理学也是这么认为的，它强调人对事物的理解是基于整体的、有组织结构的，如果按钮设计做到一致性，对提高产品的整体性是有非常大的改进的。
4.1 避免过多
避免在一个界面中使用过多的按钮，以免让用户感到无所适从，应优先考虑最重要的操作。
4.2 功能单一
每个按钮应尽量只执行一个主要功能，避免一个按钮承载过多复杂的操作，降低用户的认知成本。
希克定律指出，人的决策时间会随着选择的增加而增加。在按钮设计中，简洁的设计能减少用户的选择和认知负担，使用户能更快地做出决策并执行操作。
5.1 风格统一
按钮的设计风格应与整个UI界面的风格保持一致，包括颜色、形状、字体等方面，形成统一的视觉体系。
5.2 对比协调
在保持整体协调的基础上，通过对比突出重要按钮，如使用高对比度的颜色、较大的尺寸等，吸引用户的注意力。
情感化设计理论强调设计应该注重用户的情感体验。美观的按钮设计能够传递积极的情感信息，增强用户和产品的情感连接。
奥斯卡·王尔德说过：“习惯一旦养成，便很难改变。”
所以我们在设计按钮的时候，一定要符合人性的习惯，而不是试图改变人们的习惯。
带有分组的按钮摆放，让人看起来总是更加的有序，也更利于用户进行操作，面对同类型的功能操作点无需跳跃着去寻找，能很快在相似功能操作区域找到。
360的分组意识很强烈，三个不同区域的图标按钮样式都做了明显的区分，让界面看起来更加有序，操作起来也更加的便捷。
切不可一行按钮中出现多个高强调的按钮，Antdesign对这个也做了诠释，会对用户的行为进行错误的引导，也不利于聚焦。
通义这个页面虽然有多个选中的按钮，但是没有全部用高强调的按钮，只有强推荐的操作“开始录音”才用了强按钮。
其它通过相对浅的颜色做了弱按钮选中处理，视觉上主次分明，信息主次表达上也清晰可见。
当一个按钮同时兼顾两个交互动作的时候，一定要区分设计，不能赤裸裸的展示在一个按钮中，而不做任何区分。
具有返回意义的按钮，应该放在左侧，暗示其方向是回到之前，例如上一步。
简短的文字更易被用户阅读和记住，在一个按钮上最多不超过5个文字，重要的按钮一般使用2~4个字。
❶ 用纯灰色文字的弱化按钮
❷ 用灰色边框＋灰色文字的弱化按钮
❸ 用颜色边框+颜色文字的弱化按钮
❹ 用灰底+灰色文字的弱化按钮
❺ 用浅色底+颜色文字的弱化按钮
❻ 用纯颜色的弱化按钮
通过本篇文章的探讨，我们深入了解了B端按钮设计的九大核心要素。
从按钮的基本定义到Antdesign的分类，再到尺寸、构成、作用、位置和颜色等细节，每一部分都是提升用户体验的关键。
按钮设计不仅关乎美观，更影响着用户的操作效率和满意度。在UI界面中，遵循设计原则和注意事项，确保按钮既实用又具有吸引力，是每位设计师的职责。
希望本文能为设计师们提供有价值的参考，激发更多创新灵感，共同推动B端产品的交互设计向更高水平发展。
转载：人人都是产品经理
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
转载：优设
兰亭妙微（蓝蓝设计）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。
蓝蓝设计的小编 http://www.lanlanwork.com