搜索动作在App中依靠搜索框来完成，好用的搜索框很大程度上决定了产品的搜索体验如何。大多数搜索框存在相似性，但真正好的搜索框会在细节上为用户带来差异化的反馈，带来很暖很贴心的感觉。

1、搜索框结构分析 

从体验层面上看，一个良好的用户体验需要具备完整的流程。搜索框的使用流程可以简单划分为：

使用前-找到搜索框入口；使用中-点击输入内容；使用后-展示搜索结果。

其中使用中会涉及到跳转和输入两种不同的状态，在下面的文章里我会展开来分析。

2、搜索框的常见类型 

回想常用App的搜索框，好像它们的样式看起来差别并不是很大，但其实每个搜索框的细节都是经过精心设计的，下面总结了几种常见的搜索框类型。

搜索图标

页面上只提供一个放大镜图标，通常需要用户点击图标后才能跳转到搜索页面，例如小红书就将搜索图标放置在页面右上角。

基本搜索框

基本的搜索框组成包括放大镜图标、文字提示、输入框三部分。微信主页的搜索框采用了这种基本形式，文字提示为搜索，简洁清晰。

文字提示类搜索框

和基本搜索框的唯一不同的地方在于，这类搜索框中的文字提示部分不再是搜索两个字，而是根据产品需求支持预置多组文字提示并在搜索框内循环展示。

▲ 在大众点评的顶部搜索框中，文字提示部分循环展示了三组不同的内容，引导用户快速检索到好吃和好玩的。

功能类搜索框

之所以叫做功能类搜索框，是在文字提示类搜索框的基础上根据产品功能的需要额外添加了常用的功能性图标，如扫码图标、拍照图标、语音图标等，赋予搜索框更多的功能属性。

▲ 经常使用豆瓣看书评的同学可能会注意到豆瓣主页的搜索框中有一个扫码图标，点击之后可以快速扫描图书条码或二维码，快速识别书的内容，省去检索的麻烦。

▲ 淘宝搜索框的组成更复杂，除了支持扫码外还有相机图标，方便用户拍照识别商品。 

3、搜索框设计状态分析 

使用搜索框搜索的过程总体可以分为四部分：搜索前、点击搜索框、输入中、搜索后。设计分析过程中我们要先理清整体的搜索流程，再考虑每个状态对应的交互细节及反馈，这样才能保持逻辑清晰。

搜索前-默认状态

位置

大多数搜索框出现在页面顶部，作为一个大的触摸目标更符合用户的认知习惯，更容易被用户发现和使用。

▲ 在苹果自带的地图应用中，搜索框放在页面中部偏下的位置，相比于顶部搜索框，这样的位置分布更方便用户单手操作。

样式

搜索前的状态除了前面讲的几种常见的搜索框样式外，有些产品会直接在搜索框增加“搜索”按钮。

▲ 阿里系产品包括淘宝、支付宝、闲鱼等主页搜索框都额外添加了“搜索”按钮，相比于点击搜索框再点击键盘搜索内容推荐，直接点击按钮简化了搜索流程。

点击后-获取焦点

搜索框

点击搜索框后，框内的放大镜图标会消失，出现闪烁的光标引导用户输入，搜索框右侧会出现“取消”按钮。

▲ 点击大众点评的搜索框后，搜索页会出现三个选项，点击每一个选项，搜索框内的文字提示都会改变，有效帮助用户提升搜索准确度，虽然是很小的点但做的很用心。

键盘

点击搜索框后会弹起键盘，在不输入内容的情况下，点击键盘自带的“搜索”按钮能查询搜索框中推荐的内容。

搜索页

搜索页的内容通常包括历史搜索、搜索发现、热门推荐等版块，记录用户的搜索行为，推荐目标商品或服务，提高转化率。

▲ 豆瓣将最热门的内容都展现在搜索页中，包括实时更新的热门书影音榜单、热门小组、热门话题等，为用户提供有效的引导。

关于历史搜索我们还可以继续深入分析，思考这些记录怎么排序、最多显示几条记录……

▲ 网易云音乐的历史搜索最多可以保留10条，采用横向滑动的手势交互可以节省屏幕空间。根据内容长短一屏一次可以显示2-3条记录，这会导致排在后面的历史记录不容易被用户快速发现。

▲ 淘宝的历史搜索可以容纳更多的数量，当搜索记录超过两行时会有一个小的展开按钮，点击按钮可以查看早期的记录，这样既能节省屏幕空间也能最大化容纳历史记录。

搜索中-输入内容

删除/取消

当开始输入内容时，在搜索框的右侧会出现删除图标，方便用户一键删除输入的内容，这里要注意区分删除和取消的区别。

▲ 在淘宝中点击“删除”图标，页面会返回到上一级也就是搜索页；

▲ 点击“取消”按钮，页面会直接返回到主页也就是搜索前的状态。

搜索提示

在用户输入内容时，产品会根据用户输入的内容提供相对应的搜索推荐，这是搜索框的必备的交互反馈。

通过合理的词条推荐能极大降低用户的思考时间，提高搜索效率，同时省去再次点击搜索按钮的流程，降低用户的操作步骤。

字数限制

目前我所知道的大多数App在搜索时都没有字数限制问题。

回顾一下搜索使用场景会发现用户在搜索框内输入任何内容都是有可能的，尽量不要约束用户的输入内容。无论用户输入多少内容，点击都可以完成基本的搜索操作，这样整个流程才完整。

▲ 在百度中输入过多字符时，会提示查询限制在38个汉字以内，多的字符会被忽略，虽然给出了提示但并未打断用户的操作流程，可以让用户继续完成搜索。

搜索后-展示结果

符合预期

搜索的理想状态是搜索到的结果符合用户的预期，满足用户的搜索需求，并把最吻合的搜索结果排在前面，为用户带来清晰的结果展示。

智能提示

智能提示是对用户输入内容上的一种提示或纠正，如果用户输入的内容有问题或不够标准，在搜索结果中会能给最贴切的搜索结果。

▲ 在淘宝中输入“shouji”或“souji”，淘宝会根据拼音给出“手机”的搜索结果，但仍保留原标签，方便用户再次点击搜索；输入“手ji”时，会直接给出“手机”标签，这种差异化的反馈能更好的为用户服务。

无结果提示

如果没有搜索到用户输入的内容，搜索页会显示一个空状态，提示用户没有搜索结果。关于空状态如何设计可以看我之前写的一篇文章——如何做好「空状态」设计？来看资深设计师的总结！详细分析了空状态的设计方法。

▲ 相比于直接显示搜索无结果的状态，拼多多的搜索结果首先会标明相关商品较少，然后将搜索内容拆分成不同的标签进一步引导用户来发现内容。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

常见的分类是简单的线性分类，缺少立体化的图标分类思维。文章通过梳理来帮助大家对不同类型及风格的图标有一个体系化的认知。

今年是腾讯发起99公益日的第七个年头。腾讯公益不仅在配捐机制、产品体系、企业联动、公益基础建设上全面升级，还连接数亿网友、近万家慈善组织和爱心企业，为全民公益交出一张漂亮的成绩单：

数据显示，小红花互动人次超1.25亿，送小红花、答公益题目等行为公益实现破圈传播，亿万爱心网友共同领取了超9000万朵助力小红花，共计有超过6870万人次在99公益日期间捐出35.69亿元，加上腾讯公益慈善基金会的6亿元资金支持，共募得善款41.69亿元。

99 公益日为何能实现破圈传播，作为腾讯公益日和 99 公益日的品牌符号，小红花的设计背后又传达了怎样的思考？今天就来聊聊小红花那些事。

2015年9月9日，腾讯公益联合国内数百家公益组织、知名企业共同发起了中国第一个互联网公益日。

为了让用户了解互联网公益的核心特色与参与方式，让更多的人参与到互联网公益中，第一届 99 公益日的活动主题定调为“一起爱”，在logo的设计中也借用了“无限”符号表示“爱无止境”的含义。

在前三年的 99 公益日中，募款额度得到了广度上的增长，在用户已经了解到互联网公益低门槛、多形式、透明度、可记录的特点之后，如何留住用户，对互联网公益形成日常习惯和持久投入，就成为了设计亟需解决的问题。

“小红花”是腾讯公益平台在2018年给出的答案。因为小红花作为国人的集体回忆，关联着你我儿时从老师那里收获到的鼓励。每一朵小红花背后，是我们完成的一件“好事”。

延续小红花的记忆线索进行延展，在公益中，小红花是对用户的捐赠给予的最大肯定，是受助者正在发生的改变。在传播上，小红花是记录用户每一次公益行为的符号，通过「戴小红花，一块做好事」而得到成就感的有效激励。

于是，2018年99公益日的主视觉上，无数的爱心化为花瓣，汇聚成一朵小红花，这是小红花在腾讯公益平台的初次绽放。

为了让品牌有延续性，加深用户对小红花和99公益日的认知，小红花作为核心品牌元素开始贯穿在每一年99公益日的主视觉中，并通过不同的画面故事表达每一年的主题。

比如，2018年的主题是积小善，成大爱，于是在设计中，让很多爱心小花汇聚在一起，让小的爱心变成大爱；2019年的主题是一块做好事，通过每个人的善意汇聚成小红花……

在2019年，“小红花”正式成为腾讯公益与99公益日的品牌符号。

从2020年开始，小红花开始发力于传播，联动外部品牌 IP 如QQ、微信、Bilibili、狐妖小红娘等开启推广，在各种不同的场景，诠释“一块做好事”的内涵。

这一年，小红花之歌火了，同名神曲MV播放量超1亿次；在线下，小红花也开到喜茶等连锁品牌的店里。

而2021年，属于用户独特的小红花爱心账户上线了，用户在腾讯公益平台做好事打卡，向好友发起集小红花的自发传播，从而争取更大的配捐额，在增强用户捐款积极性的同时，撬动更多用户了解并参与到活动中来。

小红花爱心账户

用户还可将积累的小红花兑换周边礼品。在推广上则从创作入手，发起共绘小红花的活动。

可以说，小红花串联起了用户从感知、到行动、到反馈的全流程，保证了用户参与互联网公益的动机和动力。

在预热推广阶段，腾讯公益推出一支小红花为主角的宣传片，试图为小红花是什么，做出来自官方的定义。

不管是线上线下征集用户绘制的小红花，“每个人的小红花”画展，还是在感恩日随证书送出的小红花画作，都让用户全方位地感受到腾讯公益小红花的“玩法”，也为小红花元素赋予了丰富的内涵。

征集到的部分小红花作品

寄出公益荣誉证书

爱心用户的开箱视频

99公益日期间，小红花与腾讯新闻、微保、腾讯视频、腾讯会议等多产品的玩法联动，让小红花开遍“地球村”。

多款产品联动一块做好事

而在线下，小红花也伴随系列广告，落地在线上下，IP联盟、异业合作、核心城市灯光投影秀等，让小红花无处不在。

部分城市地标灯光投影秀

最后，小红花这一品牌形象的成功，不仅在公益设计这一领域上有借鉴的意义，在品牌IP的设计上同样有值得学习的地方。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

以我自己近期的工作为例，不妨为大家举个简单的例子：

下图是一个补贴规则的设置流程，在用户未设置补贴规则之前，明确告知用户还未设置补贴规则，当用户设置了补贴规则后，可以对补贴规则进行修改。

我认为这是一个非常简单且合理的页面路径跳转，并且在很多现有的产品中都有类似这样的逻辑存在。然而在与上下游同学对接的过程中，却遇到了不同的意见：有人认为没有必要区分用户是否设置了规则，用户未设置规则可以直接展示系统默认的补贴条件和补贴范围，如果用户认为不合理，自行修改便是。

不知道大家看到这里是什么感觉，我在听到「方案二」时的反应是：能够理解却并不认同，说不出来哪里不对，就是觉得这事它不应该这样。

以上，就是在我工作中发生的一次非常具体的案例。

那么为什么我会产生“感觉哪里不对，却又说不出为什么”的强烈感受呢？

最直接的原因是，这样的设计方案（方案一）是用直觉做出来的，缺少了对方案本身的思考。

直觉，指的是那些没有经过分析推理的观点，因此常常给人一种不靠谱的感觉。

可是有时候我们依赖「直觉」做事真的就完全不靠谱吗？带着这样的疑惑，我去查阅了一些相关的资料来辅助我更好理解这种直觉性思考，恰好找到了一个真实的实验案例：

根据上述实验，我们起码能发现直觉未见得不可靠，也就是说，凭借直觉出的设计方案，并不意味着不是一个正确的方案。

可是在日常沟通协作的过程中，「直觉设计」一旦遇到不同的意见，就会缺少理论支撑。决策者无法判断设计师的直觉是否可靠，从而觉得方案本身也不可靠。

遇到这种看似「死胡同」的情况，我们应该怎么去思考呢？

很简单，直觉在前，策略性推理在后。

乔纳森•海特（Jonathan Haidt），著名社会心理学家，在《正义之心》中有提到：

拿上述的方案来说，当我面对这类的质疑时，我也会有愣住，但我知道我不能惊慌，而是该让骑象人（推理）表演了。

其实仔细分析一下上述案例就会发现，方案一和方案二最本质的区别在于：

是否需要区分用户（商家）自行设置过「补贴规则 」？

百度百科对规则的定义是：

规则本身是属于利益相关者之间的约定。按照这个逻辑，「补贴规则」可以理解为用户（商家）与消费者形成的基本约定。

用户（商家）未设置规则，如果系统直接展示默认的补贴条件和补贴范围，就会给用户（商家）一种平台借以商家的名义与消费者形成了约定的印象，这与现实不符，甚至可能给用户（商家）的业务带来不必要的纷争。因此，区分用户是否设置过补贴规则是非常有必要的。

在上述场景中，虽然我的直觉先于理性给我发送了信号，但设计师如果光依靠直觉却给不出任何说明，同样会带来一系列麻烦。

汤姆·格里弗（Tom Greever）在一篇文章提到，伟大的设计往往取决于你怎么说。

描述设计不是一件容易的事情，但每个设计师都不得不向很多没有设计经验的人讲述自己的设计，并且要让他们信服自己是对的，这群人很可能是方案的决策者。决策者通常会选择那个听上去最合理的方案，所以方案的表述对于最终方案的确立至关重要。

普通设计师和顶级设计师之间的差距不仅仅是他们解决问题的能力，还在于他们能否用一种让人心服口服、并促使人们同意的方式来阐述他们是怎么解决问题的。理论上，最好的设计应该胜出，然而事实并非如此，设计评审很容易变成设计批判会，每个人都在告诉设计师要怎么设计。

最终，那些能够说服别人“我是对的”的人会胜出。设计师如果没有办法说服别人为什么他们要这么做，就不得不按照他们不同意的方式去修改设计，原因仅仅是因为他们没有办法简要的为自己的设计辩护。

听起来似乎这些决策有失公允，甚至成了设计师的辩护大会，那么对于一些有着出色能力却不善言辞的设计师而言，就真的没有任何方法了吗？

设计师要想守卫自己的设计，就要警惕那些单凭设计直觉做出来的方案。

设计直觉的形成与个人经历、阅读经历相关。遇到相似的问题，设计师如果有这方面的经验固然是好的，直接复用之前的做法可以大大提升设计效率。但我们完成设计后，最好想想哪些地方存在路径依赖，以确保自己的方案能经得住质疑。

一个最实用的可以判断自己的设计方案，是不是由直觉得来的，就是多向自己提问。

同样，我们来用实际的案例做个说明：

想想下图中「智能上传」「更多操作」按钮放在表格的左下方行不行？

很明显不行，但重点是支持这么做不行的理由是什么？

如果你的理由是：

“别的页面是将按钮放在了列表左上角的”

“放在左下角不好看呀”

“没见过有产品这么放啊”

“......”

那这个方案就是直觉设计的产物了。

想要突破直觉设计，设计师需要尽可能在每个设计点上多思考几步，比如：

为什么别的页面会将按钮放在左上角？

根据2006年NNGroup 在眼动实验中的发现，人们在网络中的阅读成F型，即用户进入页面中的第一眼，通常会落在页面的左上角，也就是说左上方的区域是页面的黄金区。「智能上传」「更多操作」属于页面的核心操作，那么放在列表左上方是非常合理的。

此外，我们可以看到页面的翻页器是可以筛选列表展示的条数，假设用户设置的条数，超出了屏幕显示范围，也就意味用户进入到页面会看不到操作选项，所以按钮放在表格的左下方也是不合理的。

为什么别的页面按钮放在左上角这个页面也要这么做？

因为我们需要保障产品的一致性，产品的核心操作方式保持一致，可以有效地降低用户的学习成本，避免不必要的思考。

在设计协作的过程中，设计师不可避免地会接收到来自四面八方的声音，而我自己也曾在设计沟通中陷入过类似困境，因此我越发明白只有清晰地表述出自己的设计思考，才可能赢得每个人的支持。

以上是关于这篇文章的关键思考总结，回到设计师个体而言，我认为我们需要对直觉设计保持警惕，因为看似简单的设计背后往往蕴含着复杂的设计原理，而一个好的设计师除了拥有过硬的设计能力，强大的设计思考力和表达能力以外，我相信同样在跨学科的研究和学习上会远强于普通设计师，否则根本无法支撑起背后的设计思考。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

桌面和大屏幕上导航栏要怎么设计其实是一个经常被拿来探讨的问题，如今这也是 B 端设计中绕不开的一个设计问题。Jennifer Rose Kingsburg 曾经有针对网页的三级菜单导航进行过一份研究，结论是在左侧设置导航好处多多。此外还有很多类似的研究，你可以在这里看到很多相关研究的摘要。值得注意的是，这些研究大都是 2017年之前的研究成果，而如今很多设计范式发生了变化。

1、左侧导航更容易浏览

Eyetracķ荷兰国际集团的研究表明，用户习惯于使用 F 式的浏览路径，这使得左侧导航在一般情况下有着相对更强的可用性，它不需要用户视线上的查找，因为用户会下意识注意到它们的存在。

2、顶部导航更加节省空间

如果我们经常使用笔记本电脑来浏览页面，会很容易注意到不同的导航模块对于页面空间的占用比例，左侧导航所占用的页面控件通常是同样内容量的顶部导航的占用空间的3倍，因为纵向的侧边栏导航需要考虑到横向的标题占用空间，再加上搜索等功能模块的加入，这种空间占用就成了不可避免的结果。即使左侧的菜单栏可以折叠，这种处理方法也不总是有效的，因为这可能会隐藏相关条目的标签信息，降低了导航的可用性。

3、侧边导航更容易缩放和收纳

也正是左侧导航本身的排版逻辑，它通常可以显示比顶部导航多一倍的条目内容，如果你的信息架构本身涉及到的一级菜单条目较多的时候，采用左侧边栏导航是明显更合理的选择，而且这种导航非常适合随着时间推移逐渐增加条目的需求。

4、侧边导航支持定制化导航结构

侧边导航本身虽然占用的空间更大，但是它也有着更多的空间根据需求来定制各种不同的需求，相比于顶部导航，侧边导航甚至可以直接将分层的二级菜单直接展现出来，就像 Outlook 的侧边栏和 Slack 的侧边栏导航。

5、侧边栏更和桌面端系统更一致

你会注意到 macOS 和 Windows 操作系统当中，系统默认的用户界面大都采用了灵活的侧边栏导航设计，很多 web 应用也是如此，它们会将顶部空间留给系统默认的菜单模块。采用侧边栏导航的 UI 界面可以和操作系统的逻辑保持一致。

6、悬停激活下级菜单在顶部导航中更好用

悬停激活抽屉式下拉菜单的设计在顶部导航当中是非常自然的，但是在侧边栏导航当中，这种设计可能会在一定程度上遮挡住下级菜单，如果使用在旁边展开的方式，可能会占用大量的空间，总而言之，它更贴合顶部导航的交互模式。

7、顶部导航栏适合做超级菜单

顶部导航正是因为和悬停出发下级菜单的功能很搭，所以很多电商和大型网站上会使用它来呈现条目众多的超级菜单。它是用来一次容纳超多条目的下级菜单的有效方式，这种布局也为产品展示和广告留出了足够多的空间。

8、尽量避免重设计时改变导航模式

如果一种导航模式看起来不够好用，那么是否要借助重设计的机会，切换到另外一种模式呢？根据 Jira 的用户测试，95% 的早期用户对于这种情况会感到非常迷惑，即使是再小的导航功能修改都可能直接影响到大量用户的日常使用，因此不管哪种导航模式，一旦选定，尽量不要改变。

9、不论哪种导航栏都面临响应式设计的挑战

对于没有太多条目的顶部导航，在移动端上依然可以直接在顶部呈现，不过如果太多了就需要使用汉堡菜单来承载，或者切换为垂直的侧边栏导航。而侧边栏导航在移动端上相对好一点，因为导航模式本身是一致的，但是有限的空间内如何呈现大量的导航条目同样存在挑战。

结论：用哪种导航栏取决于需求

顶部导航：占用空间小，在页面的位置最为显著，涉及条目不多的时候效果非常好。对于层次结构简单的中小型网站，顶部导航还是很好用的，对于层级较少但是二级条目特别多的超级导航，顶部导航也是不二选择。

侧边导航：侧边导航支持一级条目较多且层级较多的导航需求，扩展性良好，对于复杂的产品和自定义需求较多的产品、涉及到管理功能、 桌面级产品、 都适合使用侧边导航。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

印象中，Windows 就一直伴随着我们的成长，它有着 35 年的丰富历史并不断带给我们新的体验，它的存在充分展现了计算机如何丰富我们的生活习惯：用 Word 写下第一篇文章，用 Paint 画出第一幅画，或者用电脑写出第一行代码。

设计下一代 Windows 需要我们理解过去，但更重要的是对当前和新兴人类需求的深切共情，以及对技术如何更好落地的理解。当我们开始 Windows 11 的设计之旅时，我们研究了过去 18 个月世界是如何变化的，包括疫情大流行暴露出未被满足的需求和新的行为方式。更重要的是，我们与人们谈论他们的梦想和抱负，这样我们就可以了解什么驱动着他们，以及他们需要从他们的技术中获得什么来实现他们的目标。Windows 11 的设计专注于对人的关注，计算机如何赋予他们力量，以及用户到底喜欢什么。

创造大量的爱需要大量与人的沟通，我们喜欢这种沟通，因为以人为本是我们设计理念的核心。在 85 个以上的专题研究和数万轮测试中，我们与所有人进行了交谈，从喜欢我们产品的忠实粉丝，到希望 Windows 更容易和更平易近人的新用户。

Windows 10 之前使用 Metro 设计语言，Windows 11 使用 Fluent 设计语言

（彩云注，可能有的朋友分不清这 2 个设计语言，彩云专门研究了一些资料，也跟大家一起分享下：

Metro UI 是一种界面展示技术，和苹果的 iOS、谷歌的 Android 界面语言最大的区别在于：后两种都是以应用为主要呈现对象，而 Metro 界面强调的是信息本身，而不是冗余的界面元素。显示下一个界面的部分元素在功能上的作用主要是提示用户信息的存在。同时在视觉效果方面，这有助于形成沉浸感。

Fluent Design System（以下简称 FDS）主要包括五大核心元素：Light（光感）、Depth（深度）、Motion（动画）、Material（材质）和 Scale（缩放）。

Fluent UI 设计语言的核心就是在美观的前提下，应用的使用更加自然和流畅。在体验上用户会获得全新的过渡动画、视觉效果、半透明和模糊等等。毛玻璃效果重新成为趋势就是微软通过这套设计全新语言一手带起来。

这是 Windows 有史以来最受人期待的发布之一，这得益于基于研究过程中得出的一个关键设计指导原则：平静的技术让我们的生活真正变得更好。在今天的世界中，平静是非常需要的，它往往取决于我们掌控、放松和信任的能力。Windows 11 通过让人感受到熟悉的基本体验，软化了以前冰冷的 UI，并增加了情感联系，最终促进了这一点。这些改进让你更接近你最爱的东西:家庭、朋友、激情、娱乐和创作。Windows 11 是将所有东西结合在一起的地方，对它的需求从未像现在这样强烈。

就像它对所有东西造成的影响一样，疫情也影响了 Windows 11。虽然移动设备的崛起让 PC 从聚光灯下淡出，但去年它又重新回到了舞台中心。在个人与专业相结合的新型虚拟模式中，PC 的强大功能和灵活性使我们能够在家中的各个角落工作。它始终是一个值得信赖的工具和伙伴，跨越工作、家庭和学校，静静地等待我们的辉煌时刻。

过去的一年充分展示了人类的智慧。在一片混乱中，我们看到人们实时学习如何在混合环境中工作，帮助孩子学习，并找到新的连接和娱乐方式。我们在 Windows 11 的设计上不断迭代，努力创造一种深受大家喜爱的体验，让我们更容易专注于对我们每个人来说最重要的东西。

情绪板捕捉各种新的图标、主题、UI 和插图。

以用户为中心

微软的 Windows 设计团队是由创造性的实用主义驱动的。为超过 10 亿人设计需要同理心。它依赖于将人类的需求内化，以建立一个包容所有人的解决方案，同时仍能传递独立的个性。随着 Windows 跃入下一个时代，它的演变故事再次被讲述，通过以人为本的产品设计，以及打造最具包容性和个性化的操作系统的承诺愈加坚定。

以“开始”菜单为例：Windows 体验的基础被移到了核心位置。在听到人们在使用“开始”时希望提高效率、减少噪音后，我们设计了一种更干净、更简单的体验，通过优先排序人们喜欢的应用和他们需要的文件，将用户置于中心位置。它还适配现代设备的尺寸因素，使所有屏幕尺寸的访问更容易，从 Surface Go 到超宽显示器都能获得一致的体验。

在微软，这些设计决策不是轻易做出的。团队痴迷于每个像素，我们更新了“开始”Logo，以配合我们新的视觉语言和动画，为互动增加乐趣和信心。我们也有意地选择了壁纸，开机画面，并调整了新的中心对齐，使用户的体验更加平衡和集中。我们希望你进入 Windows 11 的旅程从一开始就真正处于中心。（彩云注：大厂的设计团队做项目更看重整体品牌感知，各个元素间都要能形成一致的设计语言。这里连居中对齐都可以跟设计理念联系上，值得学习的思路。）

我们对让技术更人性化的关注也反映在“开箱即用”体验上，这个体验曾经的欢迎词是你“进来”，但现在是欢迎你“回来”。我们知道不是每个人都是新用户，我们渴望通过我们的设计来尊重我们与长期忠实客户的关系。你也可以在安装过程中给你的电脑起一个名字，这样 Windows 就会给你一种独特的感觉，比系统设置中使用的随机名字更人性化。Windows 是你们的，我们设计它是为了庆祝你们的生活和工作方式。（彩云注：在文案上也是精雕细琢，也是为了紧贴他们的设计理念）

新的 Windows 11 主题提供了个性化和自我表达的不同主题选择

一旦你开始正常使用，Windows 11 就会记住你是谁，以及你在日常生活中需要什么。一键交互将带你从一个任务到另一个任务，而不会中断你的工作流程。在过去的一年里，工作和生活的界限被重新定义了。在新版本的 Windows 中，组织活动的能力是我们密切关注的东西，确保无论环境如何变化，你都能保持专注和心流状态。窗口和截图功能已经被重新设计，以记住你的喜好，所以当你离开工作流去查看新闻的时候（新的窗口部件故意设计来尊重你的工作流程），系统会记住你是如何组织你的空间的。我们创造了一个数字版的办公桌，它就像依偎在你家里的办公桌，让你能够实现一些伟大的事情，同时又能感受到与生活的紧密相连。

这些变化通过一种优美的新设计语言来实现，使 Windows 在体验上比以往任何时候都更加连贯。听到人们对更加柔和、友好和优美 UI 的渴望，我们进化了视觉和听觉表达。我们圆滑了尖锐的棱角，并创建了一个温暖的调色板，以构建一个更人性化、更平易近人的语言，同时不会妨碍你的工作效率。

一些新的 Fluent 图标，UI 和插图内容的选择，以及我们的 Segoe UI 变量字体的示意

不仅仅是一个操作系统

如何为超过 10 亿有着不同和独特需求的人开发产品？倾听、迭代、适配。通过用户的洞察，我们通过软化边缘、减少杂乱和一致性设计，使 Windows 11 更加人性化和受欢迎。这些变化还通过新材质、字体、新调色板、新壁纸和主题包来提升自我表达，以兼顾广泛的品味。

在 Windows 11 中，我们看到了一种从单纯的功能性技术向情感、人性和个性化技术的转变。Windows 不仅仅是一个操作系统，它是编织在我们生活中的一块织物，让我们更接近我们所爱的一切，帮助我们创造和连接。

如文章开头所说，彩云为大家搜集到了 Windows 11 最新设计语言 Fluent UI 的设计组件，供大家参考学习，

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

2021 年已经九月份了，毫不例外，今年也给大家准备了明年的八个视觉设计趋势，这些将在 2022 年出镜率继续升高。设计趋势一直都处于不断变化与轮回之中，设计风格技法也跟随时代潮流在不断变化。

“趋势不一定每年都全新，但是趋势每年都很重要”，与大家共勉。下面，我们一起来看看明年视觉设计大方向，到底有多精彩。 style="font-size:16px;white1;margin-top:0px;margin-bottom:30px;padding:0px;width1;caret-color:#525252;color:#525252;font-family:"letter10000000149011612px;">

幻彩立体也是 3D 设计的演化，在 2022 年它会依然会疯狂的出现。不过风格上有些微妙的变化，质感更轻盈纯粹、色彩更少量、图形上更几何块面化，保持更真实的空间立体感受，直观自然。

我们可以从 Dribbble 上面看到像 UI8、craftwork、Is 等，他们的 3D 作品逐渐趋近走向更简洁风格调性，减少复杂的光影，这也是在扁平化中找到的思路。

几何分形

美国电视频道 Turner Classic Movies

今年发现越来越多几何形状在平面作品或者 UI 中出现，新的几何图形更具表意，更趋于表达真实情感。少了一些图形的抽象化装饰，更多的是传达设计理念，品牌符号穿透。当分形形状与色彩完美结合，可以创建出极具吸引力的视觉效果。

Goodfood Market

HANBOK CULTURE WEEK

unipapa 推出的卫生纸，以简洁纯白的包装令人眼前一亮。

NFT 艺术

Gucci 发布首款只能在数字环境中穿着的虚拟运动鞋

AR 和 VR 这个大家都知道，前几年就火起来了。今天主要提一下今年备受关注的 NFT 艺术，什么 NFT？其中文名称是非同质化代币，一种应用区块链技术验证的数字资产。它最容易理解的外号，是数字艺术品。

Andrés Reisinger 在 2 月份售出支持 NFT 家具

将 NFT 与平面设计联系起来，就是我们所说的数字平面艺术。它的到来对设计师影响有很大变化，横向能力要求有所提高，比如了解虚拟数字化设计，以及对全新审美和新三维技术有更高的要求。

Beeple 一幅拼贴画，经过区块链验证的艺术品在拍卖会上以超过 6900 万美元的价格成交。

Beeple 的其中一幅作品

Moooi 与 3D 艺术家 Andrés Reisinger 合作完成了这把不能生产的虚拟椅子

超萌趣图标

来源：腾讯 ISUX 出品

图标设计一直是社交领域的重头戏，自从去年大量在设计作品中后，截止今年依然很强劲。因为很多设计师意识到单一的枯燥图标无法满足一些特殊场景的情感化设计表达，平面超萌趣图标来了，带来更强的视觉观欣赏性与生动性。

来源：腾讯 ISUX 出品

经典衬线字体

衬线字体在今年 Behance 作品集首页上，可谓出镜率可比以往高，唤起一种怀旧的感觉。也许是因为看多了衬线字体版式，设计师更多想尝试用衬线字体来打破僵局，设计出新颖的视觉效果。

自然设计

Vocation

自然设计，主张可持续性发展与环境建立联系，是一种新生活态度，是百转千回，回归本源的理想之态。设计师通过设计表达对环境的敬意，与产品建立强相关，既能表达产品自然纯粹之意，又可以宣传品牌贴近我们生活自然之意。

&SMITH 凉茶包装“循环生活”理念

TRØVE

超变形字体

dia Design studio

今年很多平面海报设计、品牌符号的动态系统设计中，都可以看到字体被扭曲、变形，以一种新的形态出现在眼前，没错，这就是超变形字体。它打破常规，以不同寻常的路子出现在大众视野中，带来全新视觉体验。

动态包装

1. Pinterest Sans

说到动态包装，这是在国内外这两年火起来一个大趋势，首先微软早期各种产品宣传视频，在到 Google、IBM、Apple 的视觉语言更新宣传视频。现在越来越多厂商喜欢厂商动态包装产品，这样比平面展示更多细节与生动。

2. Rise

格拉斯哥设计工作室 Need 为 Rise 全新重塑品牌，同时通过动态展示品牌延展设计。

今天的趋势分析差不多到这结束了，设计趋势没有好坏之分，选择合适的应用在设计中，将发挥不可估量的作用。希望今天的分享能给大家带来一些启发。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

最近读了《有效竞品分析》这本书，书中系统地介绍了竞品分析方法论，全面、透彻，收获颇多；为了更好地形成知识体系，加深理解和印象，书写成文，分享给现在看到的你。

书中说这是好产品必备的竞品分析方法论，作为设计师，总说要有产品思维，那么学习产品必备技能，便是一个培养产品思维的重要途径。

这篇小文，将从四个模块讲述如何有效竞品分析。

01 认识竞品分析

竞品分析顾名思义，是对竞争对手的产品进行比较分析。

不同的角色做分析的方向是不同的，UX设计师做产品体验分析，从视觉和感觉两个方面去分析；产品经理做竞品分析从功能、框架、技术、战略等，分析产品背后的部分，比如竞品为什么这么做？是如何做到的？下一步会怎么做……这里作者主要是分析产品层面的竞品分析。

02 竞品分析的意义

竞品分析的意义根据产品发展阶段不同，可归纳为以下四点：

1. 了解产品

通过竞品分析，可以快速了解这个行业、市场、竞争对手的产品以及自己的产品。

2. 决策支持

从产品战略层面来说，可以为企业制定战略、布局规划提供依据；可以通过MVP来测试产品是否符合市场预期，找准产品定位。

3. 预警避险

做竞品分析会让我们时刻关注竞争对手，关注环境的变化，关注政策的变化等，有效的竞品分析可以预警避险。

4. 全局判断

定方向、定目标、定策略，包括竞品分析、用户研究、需求分析、产品规划、产品设计等。

03 竞品分析流程

输出一份完整的竞品分析，需要完成六个核心流程：

明确目标：明确为什么要做、想解决什么问题、竞品分析的目标是什么

选择竞品：选择要分析的竞品、直接竞品、间接竞品、参照品

确定分析维度：根据竞品分析目标，确定要从哪些维度分析竞品

收集竞品信息：从各种渠道收集竞品信息

信息整理与分析：对收集到的竞品信息进行整理与分析

总结报告：得到竞品分析的结论，输出竞品分析报告

明确目标

在第一部分全面认识竞品分析中有提到竞品分析的意义，也是竞品分析的目标所在，概括的可以分为四类：决策支持、学习借鉴、市场预警、机会探索。

根据产品生命周期不同，竞品分析的目标和侧重点不同。所以在竞品分析之前一定要了解当前产品处于什么阶段，需要分析的目标是什么。

选择竞品

竞品的选择，首先要了解竞品的分类：直接竞品、间接竞品、替代品、参照品。然后根据目标针对性的选择产品。

直接竞品

是指产品形式和目标用户群是完全相同的产品。比如生活中最鲜明的例子：可口可乐 VS 百事可乐。

间接竞品

是指产品形式不同，目标用户群类似的产品。比如：可口可乐 VS 元气森林，都是饮品。

替代品

是指产品形式不同、品类不同，目标用户群类似，能满足用户相同需求的产品。比如：公交车 VS 滴滴打车。

参照品

是指有参考价值的产品，可能是跨界的各种产品，开放式的产品类别。

竞品的选择不是数量越多越好，而是要选择合适的，做深度分析，分析出有价值的信息。

确定分析维度

分析维度是指从哪些方面、哪些角度去分析，在这个阶段要确定产品分析的广度和深度。可以从产品视角和用户视角两个不同的视角去确定分析维度。

产品视角：从产品本身的信息量上去选择要分析的维度。以功能、框架、技术、体验、用户……等维度进行分析；

用户视角：从用户最关注的信息上去选择要分析的维度。以$APPEALS（客户需求分析）框架作为分析框架。

$APPEALS方法是IBM在IPD总结和分析出来的客户需求分析的一种方法。它从8个方面对产品进行客户需求定义和产品定位。具体如下：

1. $-产品价格（Price）；

2. A-可获得性（Availability）；

3. P-包装（Packaging）；

4. P-性能（Performance）；

5. E-易用性（Easy to use）；

6. A-保证程度（Assurances）；

7. L-生命周期成本（Life cycle ofcost）；

8. S-社会接受程度（Social acceptance）。

收集竞品信息

收集竞品信息的渠道总结为三种：官方渠道公开资料、第三方竞品分析平台获取、打入产品自行体验或与用户接触调研出来的等。

在之前公众号文章里曾分享过有关用户分析、产品分析等数据分析平台的汇总表。

信息整理与分析

信息收集完成后，并不是所有信息都是可用的，需要对其进行筛选、分类、剔除、评级等，得到有效信息，针对有效信息进行分析。

这里也是竞品分析重要的一个环节，不同的目标，需要选择不同的分析方法，汇总一下竞品分析的方法有：比较法、矩阵分析法、竞品跟踪矩阵、功能拆解、探索需求、PEST分析、波特五力模型、SWOT分析……（下一部分会具体讲解）

总结报告

所有的分析步骤都完成之后，需要对分析结果进行总结，从中挑选出有价值的信息，形成一份分析报告，报告的格式可根据展示场景输出选择适当的格式。

04 竞品分析方法

比较法

与竞品做横向比较，深入了解竞品，并通过分析得出优势、劣势。

打勾比较法：有无某功能，如果产品功能复杂，要拆解成2级功能等再横向比较
评分比较法：应用于用户体验设计评估和$APPEALS要素评估
描述比较法：通常会用“界面截屏+文字描述”的形式

矩阵分析法

以二维矩阵的方式分析产品与竞品的定位、特色或优势。

竞品跟踪矩阵

跟踪竞品的版本更新，找到竞品各版本的发展规律，以推测竞品下一步的行动计划。竞品跟踪矩阵包括几个要素：时间、版本号、版本变化要点（新增、优化、删除）以及外部环境变化。

功能拆解

把竞品分解成1级功能、2级功能、3级功能，甚至4级功能，以便更全面地了解竞品的构成，避免遗漏。

探索需求

挖掘竞品功能所满足的深层次的需求，以便找到更好的解决方案，提升产品的竞争力。

PEST分析

PEST分析法是对宏观环境进行分析，以便找到机会，认清威胁与挑战。

所谓PEST ，P是政治（Politics），E是经济（Economy），S是社会（Society），T是技术（Technology）。

波特五力模型

对行业环境进行分析，评估某一行业的吸引力、利润率。

SWOT分析

PEST分析和波特五力模型可归纳出SWOT分析中的机会和威胁，通过SWOT分析找出产品的优势、劣势、机会、威胁，以便制定竞争策略。

加减乘除

产品越发展难免会进入同质化的竞争，与其更好，不如寻找更好的机会点。在竞品的基础上做“加减乘除”，以便进行差异化创新。

05 竞品分析工具

借助精益画布、竞品画布、战略画布这三个工具可以提升竞品分析的效率。

精益画布

精益画布是关于产品商业模式分析的一种很实用的工具，可以用来做产品商业模式规划和分析。精益画布可以帮助产品更全面的思考、决策，从系统、商业的角度来规划产品、分析产品，建立产品的全局观。

精益画布在日常工作中的使用场景包含：编写PRD、项目立项、商业计划书……

知己   用精益画布--规划自己的产品

知彼   用竞品画布--规划竞争对手的产品

竞品画布

竞品画布是前面提到的竞品分析的一种方式，是把竞品分析的六个步骤固化到一张表上，作为一个规范性的模板，引导大家更规范的做竞品分析。

竞品画布相当于竞品分析报告的MVP（最小可用产品），用来低成本快速验证分析的思路是正确的，避免返工。

很多人在刚接触一个新产品时，很容易盲目的去分析，找不到方向，此时借助竞品画布这个标准化的模板，一步步的去分析产品，可以很快地了解一个产品。

战略画布

战略画布是做产品差异化竞争的有效工具，是通过价值曲线的方式，在某一时间段内寻找到有用户价值的战略方向。

价值曲线

价值曲线是以图形的方式描绘出一个产品在各个竞争元素上表现得相对强弱程度，由此可以看出一个产品的战略轮廓。

横坐标显示产品的竞争元素、价值点（用户在意点）等，通过用户的评价就可以了解到对于用户来说他们最在意的是什么，他们使用产品的原因是产品给他们带来了什么，这就是要寻找的竞争元素的来源。

纵坐标显示相对水平。

通过价值曲线的方式，可以清晰的看到产品与竞品间的差异点，战略画布是做产品差异化创新的有效工具。

最后，利用思维导图结构化的方式，整合了竞品分析核心知识点，分享给看到的你：

06 总结

看似这些竞品分析的方法论是在做一些与设计无关的事情，但很多方法论是通用的，可以应用到视觉、交互的竞品分析当中；作为设计师不能给自己设限，要多去学习跨界的知识，了解这些竞品分析的方法论后，以后再接触新项目，便可以借助文中的规范尝试做竞品分析，助力自己快速了解业务、行业等。

总之，多读、多看、多学，步履不停……

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

世界中从不缺少的就是对比，人和人的对比，价格和价格的对比，生活和生活的对比，而今天我说的，是设计中的对比，是按钮、颜色、排版布局的对比，设计中通过有效的对比技法，可以更加快速的传递产品信息，从而提升用户体验。

1、什么是对比

对比，是把具有明显差异、矛盾和对立的双方安排在一起，进行对照比较的表现手法。对比是把对立的意思或事物、或把事物的两个方面放在一起作比较，让读者在比较中分清好坏、辨别是非。

那么，为什么说对比度很重要呢？因为人眼最快速捕捉到的就是对比度。而图像的最高可能对比度，我们称它为对比度或动态范围。更重要的是，对于色盲等弱视视觉障碍的人来说，对比度显得更加重要，因为事物的对比度是成为他们看到的物体的核心特征，使他们能够区分它们，没有了对比度，对他们而言，也就失去了视觉。

在学术艺术中，对比是处理对立元素和效果的一种排列方式，例如：明暗颜色、大小形状、粗糙或光滑的纹理。在这种情况下，对比不仅可以用来吸引注意力，还可以设置情绪和氛围，在艺术品中创造多样性、视觉趣味和戏剧性。

在设计中，对比度还是影响效果的关键因素之一。 不管是PC端网页还是手机中的APP，它们的视觉层次、结构，设计师在通过对比度设计后，也能够以一种独特的方式呈现，并告知用户哪些交互点是重要的，哪些是次要的。同时，对比度还可以有效地吸引用户的注意力并将其吸引到特定元素上，因此它在产品的直观引导和可用性方面也发挥着重要作用。

Lucibel的网站设计展示了纯粹的单色颜色对比，为页面构建了坚实的视觉层次结构。

LAUDEMIO的品牌网站使用黑色背景和产品主体进行层次分离，最后加上白色文案说明

2、UI设计中的对比类型

对比在UI中具有很多不同的特征属性，其中就包括：

• 颜色：颜色是人眼最快发现和最明显对比之一，它适用于各种内容下使用，例如：通过互补色、对比色或类似色进行多种组合。这鞋方式最广泛地用于洁面按钮、导航、卡片、产品背景等地方，就是希望用户能在打开的第一时间看到，并快速进行操作使用。

• 大小：这种对比类型是希望重要元素或内容首先引起用户注意所使用的，多数情况下设计师会将元素设计成明显大于其他元素。

• 形状：这种对比类型属于形状改变，通过使一个元素的形状与其他元素不同来吸引用户的眼球。

• 位置：在这种类型中，设计师以这种方式更改行中一个元素的位置，使其看起来不同，我们看到最多的这种对比案例就是阅读文本片段时，新段落会以缩进开头。

• 纹理：这里的差异是由于使用彼此明显区分的纹理而建立的。

• 方向：在这里，设计师通过更改元素的物理位置，使其使用其他或意想不到的方向进行，通过这种不寻常的方式来吸引用户的注意力。

以上这几种对比类型，我现在通过可视化的方式为大家呈现一遍，这样可以加深大家对对比的理解。

不同特征属性的对对比方式

其实，多数人只要想到对比，我想第一想到的会是黑白的东西吧。在没有阴影和多种颜色的情况下，单色的对比度是表现潜力最好的形式。更重要的是，与艺术品或摄影作品相比，对比度不仅会影响美感，而且对布局的可用性和可见性也有重大影响。因此，对比度的使用应该算是用户最友好、最易于使用的方法了。

F2Pool APP的界面中，颜色对比有助于数据和内容形成分割，便于用户阅读使用

区块链APP界面通过使用多色的插画设计，使整体产品更加具有活力和动感，同时吸引力更强

根据相关数据结果表明，“黑白”的配色方式，是对用户帮助和引导最大的。所以，使用黑白配色进行对比，可以有效提升用户的体验。当然，多色对比也是可以的，这里我提供一个色轮配色法，大家可以自行采纳。

该色轮可以帮助设计师找到最佳水平的颜色组合

3、排版对比

除了刚才说到的哪些，接下来我在说一种对比类型，它主要是基于字体的区别进行做排版对比的。

这里提供几种关于字体、排版的对比方式：

• 尺寸：通过对字体字号的设定进行对比实现，可以有效的展示主次分明。比如以及标题使用30px的字号，而内容文本则使用24px的字号。

• 重量：主要的方式是将字体加粗呈现，在视觉上看起来更加具有厚重感，这样加粗的文本在视觉上会更加具有地位和突出性。

• 结构：形式在这里可以理解成是字体的字像，通过改变字体字象进行区别，比如标准的苹方体和花体就是很好的视觉对比。

• 形式：将字体加以倾斜，也可以呈现出不一样的结果。

• 颜色：这里的颜色不光是指字体颜色本身，同时也可以为字体添加背景色，用来衬托字体。

• 方向：通过改变单个字体的方向、或一句话的排列方向，都可以形成有效的对比效果。

艺术学院概念展示的不同类型排版对比

4、对比的辅助功能

说了刚才那么多，可能你已经抓住了设计的要害，那就是对比度越高，设计就越好。其实，并不是这样的，任何事物都需要掌握一个度，超过那个度，有时候就会适得其反。虽然我们知道对比度会使内容更加明显，但是你还应该知道，过高的对比度也会使用户感到疲劳。按照文本视觉呈现的正确比例，我们应该将对比度控制在7:1之间才是比较合适的选择。

在当前这个概念APP界面中，通过明显的颜色来提升按钮的视觉焦点，同时，加粗的文本也是重点提醒，这些手法都是便于阅读和操作的方式

5、需要考虑的要点

除了刚才说到的这些对比方式和规则外，作为设计师，还应该考虑的一些问题。

内容加在了图片上，要是用高对比度

由于图片本身的体积较大，覆盖面积也大，所以用户在浏览时，视觉很容易会被图片吸引过去，但是，由于图片内容的情况，很多相关文案就会显得柔弱不堪，在这种情况下，一般的对比就无法解决视觉问题了，而是需要你加大提高文案和背景的对比，比如使用了类似黑色图片的背景，就要使用纯白色文本，如果使用了亮色的图片背景，文本就需要考虑使用暗色。

注意对比度给用户带来的伤害

这种情况多数出现在阅读类产品上，比如我们日常使用的小说类app，产品里就有一种功能叫做背景自定义，它的主要目的就是担心用户在长时间阅读的情况下产生视觉疲劳，所以需要设计柔和的背景进行自定义切换。有的产品还会增加字体大小、颜色修改、夜间模式等多个功能，都是为了降低对比度，使用户在体验上不再那么刺眼。

留白的重要性

留白是极其重要的设计手法之一，它同样是产生对比的好技法，通过给产品界面留有适当的空白余地，可使产品具有通透感，用户在使用产品时也不会产生压抑，另外由于留白是大面积的空白空间，这也就产生了和密集内容的强烈对比。

6、为什么对比度很重要

最后总结一下所有的内容，我们可以定义一下对比度的几个关键优势和好处：

• 更强的视觉层次

• 更好的专注

• 创意氛围

• 增强可读性

• 与人类自然感知和反应的对应

生活充满了对比，无论你会采取什么方面。对于所有的生命，我们必须学会如何接受这一点，并尝试享受如此多样化和不可预测的生活。与现实相呼应，设计也充满对比，并尽可能多地借鉴。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务