如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

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

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

目录：

• 警告框与操作表
• 标签栏与操作栏
• Tabs与分段控件
• Toast与Snackbar

一、警告框与操作表

1. 定义

警告框：是一种操作上的确认，只有当用户点击按钮后才算真的完成，才可以有其他操作，主要作用是警告或提示用户的。

警告框由三部分组成：标题、正文、按钮。有些简单的警告或提示只有正文和按钮即可。

操作表/ActionSheet：操作表通常会从屏幕底部边缘向上滑出一个面板，可提供2个以上的选择。呈现给用户的是简单、清晰、无须解释的一组操作，没有正文的描述内容（大部分）。另外重要的功能操作也会用红色文字展示。

2. 如何选用？

文字内容的重要性

文字内容的重要性：选择警示框和操作表时，要考虑的是两个弹窗文字内容对于用户的重要程度，如果内容极为重要则选用警示框，如果文字内容不重要甚至不需要描述文字我们就应该选择操作表。

案例：如下图，淘宝登录密码错误时，由于警示框更重要的是文字内容的体现，帮助用户找到问题所在，所以选用警示框。再看 QQ邮箱的垃圾箱中点击全部清空时，由于信息本身就在垃圾箱内，不需要对用户过多的文字提示，用户直接操作即可，所以最后选用操作表。

用户操作流畅性

用户操作流畅性：当我们需要让用户停止操作并必须点击当前界面的按钮时，要选择警示框，警示框对用户操作上的流畅性有着很严重的影响。如果不需要太过强硬，我们就选用只需在屏幕中任意位置点击就会消失的操作表。

数量

数量：这是最容易区分使用的方面，当弹窗中的按钮数量超过2个时我们一定选用操作表，因为警示框的按钮数量不可以超过两个。如果数量一样，可以根据上面两点择优使用。

案例：如下图，我们在得到App 中点击开通「推送通知」时，因为操作按钮只有一个，所以选择警示框。而点开微博中的更多按钮，用的则是操作表，因为操作按钮有三个。

二、标签栏与工具栏

1. 定义

标签栏：标签栏位于屏幕底部，它是悬浮在当前页面之上的，并且会一直存在，只有当用户点击跳转到二级菜单后才会消失。用户可以在不同的子任务、视图和模式中进行切换，并且切换按钮间都属于不同的内容。

当用户选中某个标签时，该标签呈现适当的高亮状态。数量也有限制，不能超过5个，如果存在5个以上的标签可以将最后的标签设计成「更多」标签。

工具栏：工具栏同样位于屏幕底部，悬浮在当前页面之上的，并且当用户不需要使用的时候，可以隐藏它。例如向上滑动界面时，工具栏会自动隐藏。工具栏的内容主要是对当前页面的相关操作按钮。

2. 如何选用？

切换状态

切换状态：当我们需要同级别界面切换时，应该选择标签栏，同时标签栏的切换通常为一级导航，工具栏的功能仅针对当前界面内容的相关操作。

案例：如下图，微信读书底部栏中是关于同级别的视图切换，所以选择标签栏，同时标签栏也常用于产品的一级导航。而 Safari浏览器底部的内容是针对当前界面的操作功能，所以使用了工具栏。

位置状态

位置状态：当底部导航始终在界面最上方时，上下滑动都不会消失，则选择标签栏；如果底部导航上滑随之消失则选择工具栏（说明：也有少数的工具栏是怎么滑动都不会消失的）。

案例：如下图，我们来看看百度的 App，当我向上滑动界面时，底部导航的位置是不会消失的，所以使用了标签栏。再看 Safari浏览器，因为上滑时底部栏会被隐藏，所以选用了工具栏。

选中状态

选中状态：当用户选中底部某一项时，如果需要高亮显示且显示的内容是不同子任务的视图，则使用标签栏；而当选择后，出现操作表等与当前界面相关的操作时，应该选择工具栏。

案例：如下图，我们还是来看百度App，当我点击底部的选项时，切换的同时，当前选中的「好看视频」需要变成选中的样式，来告知用户当前选中的是那个界面，所以使用了标签栏。再看 Safari浏览器，点击底部按钮后出现操作表且当前选中的按钮也不会变高亮，因为不会在当前切换界面，所以选择了工具栏。

三、Tabs与分段控件/Segment Control

1. 定义

Tabs：Tabs 来自 MD规范，早在 Android 2.0时代，官方的通讯录App 就使用顶部 Tab导航，可以滑动切换不同视图。Tabs 里 Tab 呈现的内容可以有很大的差别，而且数量没有限制，Tabs 不能作为表单的单选组件。

分段控件：iOS 原生控件之一，每个分段作用是互斥的，在分段控件里，所有的分段选项框在长度上要保持一致，同 iOS规范中对于分段控件的分段选项不得超过5个，每个分段选项可以是纯文字或者图片。

2. 如何运用？

来源不同

来源不同：分段控件来自 iOS规范，而 Tabs 来源于 MD规范。

案例：如图我们来看 iPhone 的日历界面点击收件箱，因为是 iOS系统配置的应用，所以界面中切换样式用的是分段控件，而反观安卓系统则用的是 Tabs切换。

内容不同

内容不同：分段控件主要起到分割和筛选同类数据，而 Tabs 则没有这样的限制，Tabs 里的每一项所呈现的内容可以有很大的差别。另外分段控件更多的是以单选功能出现在表单的使用中，而 Tab 则不能作为表单的单选组件。

案例：如下图鲨鱼记账中的图表页，支持、收入为整个界面展示项目，为了让用户查看起来更加方便，把数据分割为周、月、年的不同的数据展示，因为是同类数据切换，所以选择了分段控件。反观36氪首页的 Tabs栏，由于每个内容的差别都很大，所以使用了 Tab栏展示。

操作方式不同

操作方式不同：分段控件需要点击操作，而 Tabs 除了点击外还可以通过左右滑动切换不同视图。

案例：如下图，网易钱包App 界面中的切换控件，因为在表单中且是极为近似的数据图，不易让用户侧滑屏幕切换，需要让用户更精准的点击选择。所以使用了智能点击的分段控件，而优酷视频的切换页变化都比较明显，很容易区分，所以选择了可以侧滑屏幕切换的 Tabs。

数量

数量：分段控件数量不能超过5个，而 Tabs 没有数量限制。

案例：如下图网易云音乐中的消息界面，界面中因为分类的数量未超过五个（不是所有未超过5个的就要用分段控件，同时也要根据以上说的其他三种情况判断，这里只针对数量阐述而已），所以可以使用分段控件，而网易云音乐视频界面中因为分类数量过多且内容上有区别所以选择了 Tabs。

四、Toast与Snackbar

1. 定义

Toast：Toast 通常出现在顶部和中部，浮于页面上方，无法对其操作，出现一段时间后便会消失，并且在此期间不影响其他正常操作。

Snackbar：Snackbar 出自于安卓系统，是安卓系统的特色弹窗之一。它是由一段信息和一个按钮组成，他们会在超时或者用户在屏幕其他地方触碰后自动消失。Snackbar 可以在屏幕上滑动关闭。Snackbar 不会妨碍用户对产品的其他操作。

2. 如何选用？

操作不同

操作不同：Toast 弹窗没有任何操作键，而 Snackbar 是有操作键的。

案例：如图马蜂窝App 中给作者的文章点赞功能只需要告知用户，点赞已成功即可，不需要其他操作，所以选用 Toast弹窗。而携程中当进入酒店界面时，除了告知用户下面还有更多信息外，还想引导用户直接查看，所以选用了带操作功能的 Snackbar。

退出状态不同

退出状态不同：Toast弹窗完全是通过超时后自动消失，不存在任何操作，而 Snackbar 可以超时消失也可以用户主动上滑关闭。

案例：如下图豆瓣App 广播界面中，当我点击换一批后，换好的内容会自动刷新到最前面，所以用户不需要任何操作就可以看到内容，就可以选用无操作必须等待超时后才会消失的 Toast弹窗。

而携程App 中的酒店界面，因为更多精彩的内容在下面，并没有展示出来，为了不让用户在滑动浏览时造成视觉障碍。所以选择了 Snackbar，除了超时后自动关闭外，也可以通过滑动界面让弹窗主动关闭。

组成元素不同

组成元素不同：Toast弹窗主要是由文字和背景组成，也可以额外附加图标。而 Snackbar 除文字、背景，图标外还有操作键组成。

案例：如下图得到App 中只需要提示用即可，所以选用 Toast，组成元素选用背景+文字+图标，而小红书App 需要加入操作键，所以选择了 Snackbar。

总结

通过上面的分析，大家是不是对这八个组件有了更深的理解呢？

每个组件都有不可替代的作用，如果大家还有哪些不清楚的组件对比可以在文章下留言，之后我会选择一些整理出来再次和大家分享，感谢大家的耐心阅读。

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

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

本文教你用仿型和破型的思路，掌握各种插画风格。

不管是 UI设计中还是营销活动中，插画都有很高的出场率，原因并不复杂：插画比起图片可控性更强，更容易发挥创意，营造氛围，传递信息。从内容到技术细节，插画都在某种程度上超过现成的图片。

作为视觉设计师，我们也常常会接到各种各样的需求，针对不同的项目和产品绘制插画，往往项目时间紧张但又需要在插画展示上有差异性。

但看着网上风格各异的插图，往往想学习却又无从下手，该怎么办？

下面我将从仿型和破型两个角度来阐述，如何快速掌握风格各异的插画。

△ dribbble上形式各异的插画 图片来源：dribbble

一、仿型

仿型，可说是一个模仿、练习的过程。选择喜欢的插画作为学习对象，拆解画面构成元素，总结代表性特征，了解其思考方式，是一种理解原作者绘画思路和想法的过程。

我们从形式上来说可以将一张插画拆解为5个构成元素：构图、造型、素描关系、配色和肌理。

1. 构图

构图是一张插画的骨架，各个元素按照设计的位置、大小排列在画面中，就能形成一张画最基础的模样。概括来说，最基本的构图有如下这么几种：

环型

环形构图是非常常见的一种形式感很强的构图，往往画幅中心存在一个视觉焦点，围绕视觉焦点发散/聚拢元素。

对称

对称构图的画面中存在一个轴线，画面元素围绕轴线两边对称。这种对称既可以是追求强形式感的绝对对称，也可以是形成一种视觉平衡的动态对称。

平铺

平铺构图的画面往往不存在一个明确的视觉中心，所有的元素均匀的充满着画面，强调整体的统一性。

S型

S型构图是非常常见的一种构图方式，形式灵活多变，相信很多接受过素描静物训练的同学一定对此不陌生。S型构图重点不在于元素的布局是「S」或是「Z」，而是利用错位布局，营造空间，增强画面的节奏感。往往 S型构图有着明显的层次关系，元素在空间上可以分为前、中、后景。

2. 造型

同样的元素，在不同的设计师手上画出的感觉一定是不同的，一个插画师最明显的风格特征也往往体现在造型的独特性上。造型的类别是无法枚举的，写实或抽象、松弛或硬朗、精细或概括……对造型感的提升需要我们多看优秀的作品辅以大量的练习。

△ 风格迥异的人物造型 图片来源：dribbble

3. 素描关系

素描关系这个词想必大家不陌生，严格来说它也是造型的要素之一，单独提出来是方便大家更好的理解。素描关系由高光、灰部、明暗交界线、暗部、反光、投影组成。一个元素加哪几种素描关系，怎么加，加在哪，什么肌理，都能左右一张插画的视觉风格。一般来说，对素描关系处理的越多，画面会有更多的细节，更趋近于写实。

△ 对同一元素素描关系的增减

4. 配色

人类的视觉感知系统，对于颜色是第一位的，其次是形状。插图的颜色往往能决定观者的第一印象。对于配色，我们需要注意两点：

颜色的配比

决定画面整体色调的颜色，一般占画面60%以上，余下有30%的辅助色，10%的点缀色。这并不意味着画面中只能出现三个颜色，但是三个纬度的颜色需要尽量在色相上保持接近。

颜色的对比

一张插画中，一定蕴含着色彩的对比。

我们知道颜色三要素是：色相、明度、纯度。相应的对比也分为色相的对比，明度的对比，纯度的对比，当然更多时候是混用的。对比的作用有很多，较强的对比可以使得你的画面更富层次感和视觉冲击力，较弱的对比则营造一种柔和自然的感受。

△ 不同类型色彩对比营造的画面 插图来源：dribbble

5. 肌理

肌理本是指物体表面的组织纹理结构，即各种纵横交错、高低不平、粗糙平滑的纹理变化，是表达人对设计物表面纹理特征的感受，是一种三维的概念。在这里，肌理所指的含义与质感相近，是一种二维概念。我们可以通过刻意制造的笔触感、噪点、纹理等，使得画面蕴含丰富的细节，更加耐看。

△ 对同一元素的不同肌理表现

二、破型

破型，就是在充分理解学习对象构成的基础上，结合自己的风格痕迹和需要表现的内容，形成新的插画画面。

好的插画是形式与内容的完美结合，优秀的表现形式是为了传递信息，你应该明确插画需要传递何种信息，并且让所有的元素为之服务。

缺少内容创作的插画学习会失去内涵乃至成为抄袭，这是我们一定要避免的。如何更好的结合内容呢？

1. 理解各个元素的视觉表意

环形构图更聚焦，对称构图更具形式感；曲线的运用会让画面更柔和，贴近自然，直线与几何则更具现代感和科技感。先要理解各个元素所隐含的视觉语言，再通过你想传达的内容去挑选合适的呈现方式。

2. 构建一个故事

想象一个故事，谁（who），在哪（where），什么时间（when），做什么事（what），怎样在做（how）？

比如说，如果是想画关于工作的故事，是谁在工作（加班狗），在哪（工位），什么时间（深夜），做什么事（加班），怎样在做（几个人讨论需求）。

然后我们再问自己一个问题：这个故事要传达什么情绪（有趣、温馨…）。

不断思考这样的问题，完成从故事到画面的转变，画面里物境-情境-意境的搭建。

3. 视觉转译

故事是文字，我们需要将文字视觉转译为图形。

让我们接着上面继续想：怎样造型的加班狗是有趣的，什么表情是温馨的？加班的桌上应该有什么？怎样的色彩和素描关系可以表现深夜，又体现出温馨？ 等等。

答案也许会一点点浮现：深夜这个词从颜色的纬度，应该是冷色调的；从素描关系的纬度，应该是具有较深的投影，较强的高光，乃至是一个背光。

一点点的细化你的故事，将每一个词转化为可见的图形和颜色，并且快速的反馈到你的草图中去。当然，这个过程对于每个人来说都会得到不同的结果，自信一点，这才是你创作中最与众不同的部分。

采用这样的思路，我们可以快速的创作不同风格的插画：

△ 左侧为作者练习 右侧为学习对象

三、几个建议

1. 关上电脑

在自主创作的阶段中，我们一定会遇到想法不够，不知该如何进行下去的时候，此时应该避免回过头去看学习的对象，这样会让自己的创作变的局限，从而越来越像原作。

2. 足够细致的草稿

很多人对待草稿是不够用心的，粗糙的草图意味着你并没有真正做好独立创作的准备。请尽量保证从投影的造型到人物脸部的配色，每一个元素的细节都能在草稿画完之后心中有数，这样才能使你避免你对着 AI/PS中的半成品不知所措。

△ 作者平日的草稿

3. 向经典学习

dribbble 上固然能提供许多新鲜的想法和创意，但是不妨去了解一下新艺术运动的插图，席勒的速写，达达主义和立体主义的海报等等，你会发现艺术史上如此多大师和流派，都是取之不尽用之不竭的灵感源泉。

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

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

01-

肖形图形-构成规律：A组成B

肖形图形就是以单一元素或多个元素的外形共同变化来进行一个新形象的创造并使两者之间的含义得以连接。如果两个物体同时改变了原先的形态，并在这两种形态间产生了一种全新且严谨的契合关系，一个新形象也就诞生了。

还记得08年奥运期间的各地景观吗？你去看城市市民广场的花坛，从南到北，无不例外，用鲜花组成一个大大的奥运五环的图形，要不然就是京的印章标志，或者就是北京欢迎你的字样。印象最深刻的就是开幕式用击缶来形成倒计时的数字。

肖形图形概念是运用十分广泛的一种创意概念，它好理解，上手快。但不能理解成一个简单的重复罗列的过程，哪些图形可以结合构成新的意向？怎么组合更加有趣？怎么控制好元素之间的疏密关系？

当我们面对两个形态上看似没有什么关联的物件时，不妨先从点、线、面、空间这些角度来解析一下，或是再换个角度看，每个物件都可分解成基本的方形、圆形和三角形，这些隐秘的关系都为它们的解析重组提供了可塑的条件。

点的创意表现

在图形中，任何一个单独而细小的形象都可以称为点。点是以视觉中面积大小的感受来确定的，所以点的形状并不一定是圆，也可以是其他的几何形体，点是相对于线和面而存在的视觉元素。在设计中，点的排列的形状、方向、大小、位置、聚焦、发散，能够给人带来不同的心理感受和视觉冲击。点的构成可分为密集和分散两种不同的视觉类型。

线的创意表现

线是创意图形的基本要素之一，线可以串联各种视觉要素，可以分割画面和图像文字，可以使画面充满动感，也可以在上稳定画面。线与线之间的排列可以使画面具有节奏感，线的放射、粗细、渐变排列可以体现三维空间的感觉。

线的编排构成分为有节奏、有情感、有空间关系等的线。每条线都有自己独特的情感存在，将不同的线有节奏地编排在板式中就能形成各种不同的效果。作品通过线的空间处理，利用独特的视觉效果，能表现强烈的整体感和形式感。

面的创意表现

图形设计中的面由于轮廓的作用，使形态从周围空间中突显出来，从而比点、线的视觉冲击力更大。在进行面的创意表现时，要考虑形状与面积的对比、间隔与面积的对比、面积与面积的对比等因素。面是视觉元素创意的基础，可以运用不同的方式来表现。

02-

同构图形-构成规律：A+B组合

同构图形更注重于体现视觉意义上的艺术性和完整性，通过变形、错位、结合等种种手段来制造出虚拟的物象。同构可以理解为是一种形态上的置换行为，即是将组成某物件的其中一部分特定元素与另一种本不属于其自身却具备形态上相似之处的元素进行巧妙替换，相互借用，同生共荣，形成新的异象，产生出新的寓意和独特的视觉趣味。

同构图形在设计运用中最为广泛的一种图形概念，但在运用时我们必须注意做到自然巧妙而不生硬。如果总是一味的将一堆相关元素胡乱堆砌在画面中，这样的画面，细看之下实在是索然无味啊。

(一半写实一半创意)

一个完整的元素一分为二，一半保持元素原来的固有形态让用户保持认知，另一半就可以进行创意设计。案例一中是用直白的文案直接进入主体，使用手写字体切近用户的同时也彰写了格调；案例二中为了体现科技感，运用了电路板进行内部重新构造，增加科技感的同时也不失可爱。

(图形加文字)

图形加文字，通过提取文案，在图形设计中保留主要的重点文案，很明确的传达品牌的内涵，文字在图形中也尽量按照图形的走势进行排列。案例中的文案都传达了一种积极向上永不服输的态度，运动员们也为了胜利而拼搏，体现的耐克的品牌文化。

(双重曝光)

双重曝光从严格意义上讲不属于同构图形的一种，但是它也是同构两张图片两两相合成形成的一种特有的风格，由于这种风格也算大热的风格。我们在制作双重曝光的时候尽可能的保证人物形态的完整性，如上图的案例中双重曝光的画面很清晰，主次也很分明，很好的保留了人物的五官的完整性。

(APP节日闪屏)

(点)

(线)

(面)

(创意)

(插画)

作为UI或者产品设计师，我们在设计界面中会很少运用肖形图形和同构图形进行区创意。但是在APP闪屏页中，我们就可以很好的运用的肖形图形和同构图形。可以很好的与品牌LOGO图形相结合，更好的为品牌宣传去服务。在这方面做的最好的当属QQ音乐这款产品，它很好的利用品牌图形与点、线、面、插画相结合进行创意，很好的体现了节日的主题和氛围。

总结-

肖形图形和同构图形在设计中运用广泛，通过图形创意练习可以增加我们创意思维，也可以锻炼设计总的主次层级、疏密远近的关系。相对复杂的视觉图形元素能处理得当，相信在界面排版中也能很好的分析出层级和层次之间的关系。

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

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

这次的采访我们聊得很细，细到某一个交互的设计思路的变迁，以及为什么最终是以那种方式呈现在 MIUI 10 之上。我相信，无论你是对设计还是对手机系统存在好奇，一定都可以从这次访谈里得到一些有益的启发。因为我们没聊虚的。

△ MIUI设计团队

一、彻底干掉虚拟键的全面屏手势是不是太激进了？

△ 虚拟键不该存在

是不是太激进我们还是根据用户反馈来判断，这套手势因为没有任何虚拟键的提示，刚开始确实需要一两分钟来学习，但大部分的用户反馈是：用了就回不去了。目前从客观上来讲，安卓手机里的全面屏手势，MIUI 确实是最好用的，不是我们自己说，而是从各种用户反馈，包括微博上很多专业数码博主的反馈得来的结论，很多人在主动地说这件事。

但是在手势的设计上，我们是踩过很多坑的。

我们尝试过很多版本的全面屏手势，最初还没有大胆到想干掉所有虚拟键，而是想在虚拟键上做文章。开始我们觉得那个区域很多时候3个 button 可能用不上，比如看书的时候，你可能只需要一个返回键，所以我们考虑的是在某些特定的应用场景里把一些用不到的虚拟键收起来，这是做减法，减法做完之后，原来虚拟键的位置就空出来了，我们觉得这个空间是浪费的，又在想应该怎么利用起来，这是早期一个很复杂的思路。

△ 早期带横杆的产品

后来我们又想是不是可以把3个键整合成一个虚拟键，当初做了一个 Demo，把3个键集合成一个横杆，那个时候还没有看到 iPhone 的模型，在 iOS 的全面屏手势出来之前，我们就做了一个横杆子，其实是受 Palm 的启发，这根杆子很早之前 Palm 就有了，苹果可能也是受 Palm 启发。我们设计的是在那个杆子上横滑返回，然后上滑回桌面，很接近苹果目前的处理方式。但最终还是把这个设计给放弃了，去掉的原因是：提示杆一开始是有比较好的引导操作作用，但一段时间后，用户就不需要了，另外就是视觉感官上横杆并不好看，工业设计上好不容易才能把手机下巴缩短几毫米，你一根横杆又全给它加回来了，这其实背离了「全面屏」的初衷，在设计上是一种不得已而为之的妥协。

否定横杆之后，我们才真正全心考虑干掉所有虚拟键的方案。但没有虚拟键，就对我们的交互设计提出了很高的要求，首先，这个手势的出发点一定得非常符合直觉，所以不管是返回上一级菜单也好，回到桌面也好，这必须是两个最基础的操作（横滑、上滑），在这两个基础操作上略做停顿，我们就可以进入应用间的快切和多任务管理，我们用一种非常轻的设计把它附着在两个基础交互上。彻底干掉虚拟键这件事最早我们没有太大的勇气去做，最后做出来反倒更贴近用户操作手机的直觉，有一种柳暗花明的感觉。

△ 简洁易用的MIUI全面屏手势

二、MIUI 10的整体视觉设计遵循了什么思路？

△ 为全面屏而重新设计

在天气、日历、安全中心等等 MIUI 10 的各个角落里，其实都把原来分段式的画面结构做了一个全面屏化的设计，让页面不要有很强的割裂感。让内容直接浮在屏幕上，用户第一时间得到信息，去掉干扰元素。

在非全面屏时代，手机有上下两个比较大的黑色边框，在视觉上天然是分段式的，之前屏幕内的多色块设计其实是对应了手机外观的这种「分段」，它还是和谐的，但原样搬到全面屏手机上，就显得是把一整块完整的屏幕生生分割成了几段。

另外就是原来有一些插画类型的风格和表达手法，想让整个画面有一些亲和力。但是因为我们的用户覆盖面很大，两三亿用户，会有一些年龄层的用户觉得原先插画形式有些稚嫩感。所以我们觉得到10这一代，整个系统应该更成熟、更普适一些，我们更倾向于做一个对任何人来说都很舒服的视觉设计。

三、这次整体视觉风格有比较大的变动，有没有什么地方特别花费精力的？

举个特别细节的例子。MIUI 10 的时钟，有一部分用户会有疑问：在 MIUI 10 里，可见的大多数页面是亮色，为什么进入时钟时却是黑色的？我们其实也在白色和黑色反复了很多次，调研也做了很多次。最终我们认为更重要的是时钟的使用场景问题，比如说你晚上在睡觉前拿起手机定个闹钟，在夜晚或者室内，从手机桌面进来打开时钟，如果进入一个很亮的页面，它即便是好看的，也可能会刺眼。所以我们还是选择了黑色，当然那个对比度到现在还在调整，我们想把视觉上的美观和使用的舒服统一进来。

四、MIUI 10的自然音效系统是发布会上的一个惊喜，你们为什么会想到去做音效？

我明白你这个问题的意思，大部分人的手机是长期静音的，音效这个东西，好像已经被完全忽略了。但是我们觉得，哪怕只有1%的用户打开了手机铃声，他也应该感受到悦耳而不是打扰和腻烦。如果我没记错的话，我们是手机厂商里第一个针对音效做系统性设计和优化的，我们从「百听不厌」的自然系音效出发，和得过格莱美奖的顶尖音乐人合作，还针对手机音腔的特性对音效做了特别的优化。

发布会上洪锋把自然音效系统作为一个彩蛋来讲，这是我们送给小米手机用户的一个礼物，是让我们骄傲的产品。我不确定有多少用户会发现这个产品，有些人可能因为长期静音他没有机会接触到这个新设计，但它是一个能带给人惊喜和温暖的东西。

五、MIUI的设计理念是什么？

有些人可能会觉得设计是一个偏感性的、依赖审美的东西，但是对于一个好的系统设计，我会从视觉、动效、交互、字体、音效，五个维度的去衡量它的完善程度。

我们用一个人来做类比。视觉，就是感官层面的，比如说你见到一个人会说：这个人很帅；第二就是交互层面的整体逻辑，就好比你跟他说话，发现他的脑子清楚；第三就是整个动效的层面，这个人的肢体语言很优雅；还有字体，我们是从 MIUI8 的时候就开始做了，为了让大家有更好的阅读体验，让人觉得你这个人很有涵养，这已经深入到非常细节的层面了；最后，我们加了一个声音的系统，就是你说话的时候，声音还要好听。MIUI 在设计上一直是往多个方面进化，我们并不满足于做出某个漂亮的页面或者交互，而是追求整个体验层面的饱满。

做设计过程中，我们可能会尝试各种各样的方案，也有灵光乍现的时刻，但我们会从多个维度完整地去考量这个设计成果，避免做出一些只是「看上去很美」的自嗨的东西。实际看起来、用起来、听起来怎么样，我们想从这几个大的感官维度上都能达到体验层面的满足。

举一个例子：比如说之前我们为了快去掉了一些解锁的动画，用户一按指纹解锁，直接进到桌面，这种确实是非常的快，但这种感觉就像什么呢？就像你一按电梯，门就消失了，你进了电梯，它咔一声又关上了，是很快，但是这种观感是不太好的。它没有一种欢迎的意识，就只是把东西呈现给你。这一次我们希望把这个东西改回来，当你进入手机桌面的时候，图标应该有个简短的优雅的动态，有一个进场亮相的过程。

△ MIUI动态图标

MIUI 其实已经非常流畅了，在这种地方去掉应有的动画，是可以快100毫秒，但这种快是没有意义的。让用户舒服的看到这个东西，这才是整个体验的核心。所以我们这次就定下一个目标，和工程团队一起，把这种为快而快的东西给它削弱，用户要的是更优雅的体验，而不是那种无感知的快100毫秒。

这个事情说起来不大，但其实是一种理念层面的进步，大家已经从那种无意义的纯数据比拼里解脱出来，更注意到整个体验层面。我们这次会把上面说的进场动画加进来，能让用户点亮屏幕的时候感觉到更加的舒服，能够感觉整个系统的「肢体语言」更加优雅。

六、对于MIUI 11的展望？

之前的非全面屏时代，手机屏幕在16:9的形态下，UX设计上其实已经极度成熟。手机的很多功能和设计的出新，很大程度上都是在迎合一些小众的需求，可能一部分人觉得很喜欢这个设计，但它并不普适。

全面屏手机的出现又将设计师的注意力从这些小众需求拉回到了一个大众需求：怎么在全面屏手机上做出更好的体验。因为智能手机用户迟早会将手中的设备换成全面屏设备，手机厂商如果只是简单地把原来16:9的画面改成18:9，而不根据硬件特点做真正的深度定制，那就会离用户体验越来越远。

手机系统的未来我们认为也会是这样的趋势，软硬件的结合会更加的紧密。在这一点上，MIUI 有这个意识，也有行动，目前是走在比较前面的。

MIUI10 落版后，我们也在考虑往这个方向去深化。我们不会特意去考虑11跟10之间非得做出什么大的区别来，相比这个，我们更关心的问题是：什么是用户真正需要的设计。

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

还在为APP UI信息图表界面设计而犯愁吗？来看这就够了……

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

图表是显示大量信息的一种重要表达方式，良好的图表设计能够传达复杂的统计数据，并让用户易于理解。图表设计可以专门分出一个设计类别：信息图设计。

不过，信息图设计更多针对桌面端，很少考虑移动端，所以，移动端的图表设计挑战性更大。在小的屏幕上展示数据或信息，只能做一些取舍。

Android - 统计数据图表

Arco的图表和图表

股票应用设计

Analytics（分析）

移动仪表盘

优化 - 统计

移动UI中的图表和图形

金融应用

财经和新闻应用

支付帐单

线图页面

分析应用页面

分析应用

健康应用

自行车比赛

威胁仪表盘设计

仪表盘设计

图表

足迹App

管理模块

紫色的图表和图形

运动追踪应用

关于铁的图

Noblyn App重新设计

投资平台

跟踪应用

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

是百度专门为重大节日或纪念日设计制作的动态百度Logo

我们特此盘点了2017年的百度Doodle设计

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

但是，今天我并不是专门只针对某个店铺做视觉统一的设计分享，而是想从全局的角度去给大家阐述这个问题，毕竟，你得知道自己为什么需要做视觉统一，你才可能做好视觉统一，所以这个问题就不单单只是指店铺了，而是关于品牌与用户之间的问题。

因为不管是店铺也好，平台也好，他们其实都是为卖货服务的，它们与品牌产品之间其实都是合作关系，最终其实都是要链接到用户身上的，而设计师要做的，归根结底都是处理好它们与用户之间的关系，帮助达成交易。

所以我将要分享的关于视觉统一的方法，就不单止是适用于店铺了，而是品牌、平台、店铺都适合的。

按照惯例，我还是先给大家列出一个提纲，方便大家理解：

• 为什么需要统一视觉风格？
• 统一视觉风格的方法有哪些？
• 统一视觉风格的注意事项及总结

接下来我就逐条展开给大家说一下这其中的奥秘吧！

一、为什么需要统一视觉风格？

当我们提到统一视觉风格这几个字，不知道大家能联想到什么？或者能联想到什么画面什么公司什么产品呢？在回答这些问题之前，我还是先给大家举一些例子也许你就明白了。

比如前几天我无意中打开了淘宝app，然后刚好看到了2018年淘宝新势力周的一系列卖场页面：

大家知道像淘宝天猫京东这样的平台，每年各种卖场促销活动是很多的，而且每一场活动都需要容纳成千上万的商家和数以万计的商品，但是，所有这些东西都却只是通过一块液晶显示屏展现在消费者面前，那么这时候就是我们设计师发挥作用的时候啦。

这时候设计师需要做的事情就包括以下几个方面：

• 要保证活动页面里能把所有东西都容纳进去；
• 要保证页面是方便顾客浏览的，所以要有规律可循；
• 要保证页面是可以吸引顾客一直逛下去的，所以页面有规律的同时又要有所差异，视觉上不枯燥，不然会视觉疲劳；
• 要在顾客心里和脑袋里建立某种印象，找到存在感，以免被顾客遗忘；
• 既要保证平台活动整体的调性和谐性，又要为不同的商家提供最恰当的展示机会，所以视觉表现形式要合理；
• ……

总而言之就是要权衡平台、商家、顾客三者之间的关系和利益：顾客买的爽，商家卖的爽，平台名利双收。

那么这时候保持页面视觉统一就很有必要了，因为视觉统一就有以下非常重要的几点作用：

1. 强化品牌或事件在用户心中的印象

因为几乎所有的品牌都需要做的一件事情就是占领用户心智，就是要让用户在众多的品牌选择里有自己的一席之地，不要把自己遗忘了，所以它需要不断的出现，保持存在感。

一个活动每年去做，一个电影每年都出续集，一个产品每年都会出不同的系列等等，都是同一个道理，都是在强化自己在用户心目中的印象，保持存在感。

提到这个，我平时每次搞活动都会提醒大家不要经常换头像或微信昵称，我让大家多来留言其实就是这个道理，因为我每天要面对的那么多人的头像和名字，如果你长期不换头像并且经常来留言，那我肯定会记得你；但如果你经常换头像，并且留言次数还少，那我铁定就不记得你了，因为你没有强化一个符号在我的脑海里啊，明白了吧。

2. 让事件变得有序有规律可循

就像我们办运动会，不同的队穿不同的衣服、喊不同的口号等等，即便是队里的人走散了，你看一下队服或对方喊的口号你就能辨别出是自己人还是别人了是吧。

再比如你去超市货架上拿饮料，正是因为这种视觉统一的作用，所以你才能很好的辨认出自己要买的品牌产品，而不至于拿错了，反过来对于品牌也一样，自己内部的产品之间是有统一的视觉形象的，同时又是跟其他品牌相区分开来的，所以才可以保证顾客不买错。

这些道理运用到页面设计上也是一样的，让顾客方便逛，同时别逛错了地方。

3. 提高相关人员的可执行性

因为像这种大型的活动，需要大量的人力投入，就拿设计师来说，一般都是某个主设计师出来一个设计方案，然后这个方案不仅要能达到以上提到的要求，还必须要是能保证其他设计师能够以这个设计方案的模版，去执行剩余的几十上百个页面，工作量非常之大。

二、统一视觉风格的方法有哪些？

前面我们讲到了统一视觉风格和形象的必要性和重要性，那么接下来就是大家最关心的如何统一视觉形象的问题了，所以我依旧会从好几个方面以举例的方式给大家做讲解，你就明白了。

不过在这之前，我还是拿一张图给大家看，还是淘宝新势力的这张图：

你在这个画面里看到了什么？这个视觉画面里都包含了哪些东西？

嗯，我看到了模特、文字、图案、各种颜色，还有布局、排版、以及所有上面的内容汇聚在一起所组成的一种风格。

那所谓统一页面的视觉风格，也就是说只要保证以上所有提到的这些东西，我在另外的页面里也至少能找到一项是类似的，那我们就很容易将它们视为是具有共通性的页面了，也就达到了视觉风格统一的目的。

以下面这几个淘宝新势力分会场的页面为例：

你应该注意到了，这些页面虽然颜色不一样，但整体看视觉却非常统一，同时细看又有些差别，其原因就在于以下几个方面：

• 不同的页面对应的色相不同，但是明度和饱和度是近似的；
• 不同的页面对应的文案不同，但是文案的字体样式、布局排版是一样的；
• 不同的页面对应的氛围点缀元素不同，但是氛围元素的风格、质感、手法等等是类似的；
• 不同的页面对应的点缀元素不同，但是每一个页面里的点缀元素都是跟相应的主题、模特、文案等等相呼应的。

所以你才会有这些页面具有统一的视觉风格的印象，包括其他会场的页面，虽然做了一些小调整，但是依然可以看得出来是统一的视觉风格：

因为这里运用到了跟上面同样的原理。

不过这种手绘风格与模特相结合的设计形式我以前也给大家分析过，我这里就不深入举例了，大家可以看看圣保罗艺术家 Ana Strumpf 为很多时尚杂志所做的插画封面就能有所体会：

这种手法给人俏皮、时尚、新潮的感觉，非常适合追求趣味个性而又不失品味的心态年轻的群体，所以这一次的淘宝新势力周大概也是出于这种新潮人群定位考量，才会做这种形式的设计吧。

而且这种扁平质感半插画性质的设计形式几乎是很难过时的，非常前卫和耐看。

所以到这里你应该就好理解了，一般来说，我们有以下5个途径可以达到统一视觉风格的途径。

1. 提炼某种风格，重复使用

比如你看今天淘宝新势力的一些会场页面，视觉风格就非常统一，一眼就看出是实体模特＋手绘图形相结合的风格形式，在模特脸部做一些图案轮廓线，然后模特周围点缀一些手绘图案做氛围，有点达达主义的感觉。

2. 建立某种品牌色，重复使用

当我们重复看到某种颜色跟某个品牌或产品同时出现，时间久了就会自然而然的把这个颜色和品牌联系在一起，从而产生条件反射，只要看到某个颜色立马就会想到这个品牌，只要听到这个品牌的名字脑海里就会出现某种颜色。

这其实就是通过建立某种品牌色达到视觉风格统一的目的从而让品牌在用户心里建立起了这种色彩印象。

比如蒂芙尼蓝：

所以，任何页面，任何场所，任何产品上只要出现了这个蒂芙尼蓝色，用户都会默认他们是相关联的：

再比如，可口可乐红：

当然了，色彩种类那么多，有的品牌或店铺的品牌色并不是单一的，而是多彩的，这都没有什么限定。

那这个如果是运用到页面设计或 Banner 设计里的话，这种品牌色是一定都需要出现在画面里的，至于色彩比例就因需要而定了，而且今后只需要出现这种颜色，就能反过来达到视觉统一的目的。

3. 提炼某种视觉元素，重复使用

所谓视觉元素，其实就是指一切你能看到的想到的元素，所以这里的视觉元素也是指多个方面的，比如某种图案图形、某个物件、某个文字、产品、模特、logo 等等其实都算是视觉元素。

那说到视觉元素的运用，我脑海里印象比较深刻的2个品牌就是初语和天猫，前者是店铺，后者是平台。

我们可以看看品牌升级以前的初语，它有一个让人印象非常深刻的视觉元素，就是她的模特和眼部的妆容：

所有的模特都保持了一致的妆容特点，气质也是类似的，当然你也会看到很多他的设计都是会与艺术名画相结合，这些都是它的特点，并且加以充实用，就给人建立了很深刻的印象，你只要看到这种模特妆容或者画面，你就知道：「噢没错了，这是初语」。

那天猫也是一样的，每年双十一这个天猫头的元素就会以各种形式露面，而且不止是在双十一，可以说是相当强大的视觉符号了，你想忘都忘不掉它：

2017年天猫双十一宣传海报

△ Budweiser 百威

△ GUERLAIN 娇兰

△ Beats

这种通过某种视觉符号来统一视觉形象，重复使用从而加深用户印象的方式在很多其他地方都有用到，比如每一个苹果手机，每一次开机，都会出现同样的开机画面：白底＋黑色的苹果 logo。

4. 打造品牌专属的IP或宠物形象，并重复使用

这就跟品牌给自己找了个的代言人一样的效果，只要这个形象出现了，你就知道这个是xxx品牌。

比如店铺，三只松鼠就是这么干的：几乎所有的页面里都会出现三只松鼠。

比如平台，京东有狗，天猫有猫，苏宁也有狮子等等，电商界俨然是一个动物世界。

再比如珠宝品牌，卡地亚Cartier 有猎豹：

这只猎豹经常出现在各种品牌宣传广告里，或者制作成各种首饰，用户看到猎豹就会想到卡地亚。

5. 提炼某一句口号，重复使用

既然我们前面提到了视觉元素，那么文案或口号其实也是画面里的其中一种视觉元素，所以我们再以2017年天猫双十一宣传海报举例：

△ Budweiser 百威

△ GUERLAIN 娇兰

△ Beats

这里面的「xxx祝你双11快乐」 「天猫双11全球购狂欢节」等等口号文案，重复使用，其实就起到了这种画面视觉统一的作用。

而且这种方式也在很多地方有运用到啦，比如你看的很多动漫、电视剧，总会重复出现一些台词，嗯，说到这里，我想到了小时候看的一个动画片《宠物小精灵》，每集火箭队出场台词都是这几句：

然后每集结束的时候总会有那么一幕，喵喵被抛到空中然后喊出一句台词：「我们还会回来哒～」。

你看这种重复口号的威力多么可怕啊，一二十年了还让用户印象深刻呢。

不过，其实最后列举的这三点其实都可以称作是视觉元素的重复使用啦，至于原因我也在前面作了解释，而且以上所有的方式其实都是可以结合运用的，并不是孤立存在的。

还有，大家注意到了吗？我在每一条后面都加了4个字「重复使用」，因为就算你有了自己特定的视觉元素、有属于自己的宠物形象、有自己的品牌色、有自己的风格等等，但是你压根就不露面，你还特别低调藏着掖着不展示自己，那谁还记得你啊。

说到这个，我想到了异地恋之所以容易失败，不也是差不多道理吗？你和男/女朋友三五年不见面没有关系，没法手拉手亲亲嘴也没有关系，但是如果你们压根就不联系，不出现在彼此的视线里，那感情自然会淡的呀，等于是白白给了别人可乘之机。

所以我一直都觉得品牌和用户之间其实也是一样的道理，就是在「谈恋爱」，而不是做生意，至于你们之间是谈的什么类型的恋爱，那就看自己本事了。

总结

之所以我们需要做视觉统一，其实就是为了强化我们在用户心理的印象，让他们记住我们，记住我们是很有规范的，靠谱的，可信赖的品牌印象等等，并且还要重复的出现在用户的视野里，那怎么出现呢？方法就在我上面列举的几条内容里啦。

当然，你也得控制一个度，不要过份的运用这些方法，不然会招致用户反感的。

想想有的男孩子可以成功讨女孩子欢心，而有的却被女孩子嫌弃的不行，知道原因了吗？道理都是一样的啊。

你看下面这些世界杯期间的广告，画面 low，口号 low，重复次数又很多，用户记住是记住你了，但真的挺烦的。

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

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

一、图文布局

用户所关注的内容以及不同的业务诉求决定信息的优先级排布，所以没有通用的布局，只有适合的布局。

1. 上图下文

上图下文更强调了图片的重要性，以「见」这个属性为优先，上图下文需要注意的是图片高度过高会严重影响版面效率，而一个具有商业化目的的产品对首页的版面效率异常看中，同样对图片的质量要求也甚高。通常这样的 feed流布局更抓人眼球。

如果确实需要以大图+文的上下方式来布局，尽量找到版面的平衡点，考虑图片与文字之间想要给用户传达的关系和优先级图片的使用尽量使用黄金比例做展示，例如4:3，2:1，16:9等。

宫格排列式的上图下文能够极大的提升版面效率，一般更多用于电商平台，在首页将某个模块的优质商品进行透出，提高转化和流量。缺点是缺乏信息完整度，在布局时需要考虑更多因设备、极限值带来的不同状况的问题。

可以看出，严选将金额跟在标题后面，而非固定位置，这样做的好处是将标题和金额关联度更高，形成一致性，缺点是布局上显得层次不齐影响阅读效率。通常这样的排版会根据业务需要来选择展示一行或多行文字极限。但由于版面效率它不得不只给了两行的极限高度。

2. 左图右文

左图右文形式的排版应该也算是用的非常多了。其实大家会经常把它和左文右边图进行对比。但无论是左图还是右图，在这样的布局中我们首先就要做好图和文的占比。显示在外面的图片通常是选取了详情中的图片来进行展示，否则就浪费了比较多的人力资源去重新配图了得不偿失。同样和图片搭配的信息字段此时就显得极为重要。

菜鸟裹裹其实将标题的优先级又提升到了和图片一样的层次。图片本身给人的视觉冲击会更强所以即便图片放在标题下面，也不会弱。

方形缩略图是最常用的形式，不至于太窄也不至于太宽，对于右侧信息的布局也显得更游刃有余。横形的图片会让右侧的文字显示空间压缩的厉害，通常在视频缩略图会用到，但图片对整个页面的氛围感会更好。竖形的图片让右侧信息有更多的发挥空间，同时版面的留白也更大，但是如果右侧信息过少，则会让页面有些单调和不完整。

左文右图就不再赘述，现在大多数左文右图在咨询和旅游产品中使用的更多，因为用户在浏览这样的列表信息时图片无法在第一眼被识别出具体内容，而对于这样的产品来说无疑是低效的。当然很多时候没有那么多时间去验证如此设计对于用户来说是否真的能提高浏览效率，提升了多少满意度。我们可以简单的理解，如果说的是一件事，那么文字比图片更重要。如果说的是一样物品、人，那么左边放图更合适，体会一下。

3. 图文混排

为了使信息传达的更一致，通常如果没有大量的文字信息则我们会选择文字与图片混排的形式，为了适应多变的图片，我们会在文字底部加一层黑色半透明蒙层或者给文字加一些无伤大雅的阴影。前提是文字信息不会太多而干扰到图片内容的展示和传达。

二、按钮解析

其实严格意义上来说，能通过点击触发交互动作的控件我们都能将它定义为按钮，但是如果这样定义那就没的玩了，所以我们将移动端的按钮定义为具有引导性并且可点击的控件。

例如京东金融查看历史支取利率后的箭头，其实这才是这一行的引导按钮，但是为了更好的触发点击通常会将整一行都作为点击热区。

所以为了区分不同的按钮的用法，我这边将按钮进行了一个分类：主线场景、支线场景、异常场景。

主线场景下的按钮通常会使用的比较大，为了强化和引导核心的任务流程，所以该按钮应该是最醒目的。

样式通常会分为通栏和非通栏，而通栏则是从 MD 设计中衍生出来的一种形式。

1. 主线场景

要注意的是，通栏和非通栏按钮我们到底该如何选择，首先我们需要知道这样的按钮都是放在页面的底部固定显示，不会随着内容滚动，如果选择通栏按钮，则更适合可滚动的页面容器，也就是说一页中内容较多在一屏幕中无法显示全的页面，优点是按钮的优先级会很高，但是在 iphone X 这样的设备中，适配会纠结一些。

而如果选择不通栏的按钮，我们要考虑的是页面内容是否很长，如果很长需要在按钮底部加一层白色背景，尽量不要让内容穿过按钮，因为底部其实并不是内容最好的显示区域。同样非通栏的置底按钮相较于通栏按钮层级就显得没那么高。

所以我们会发现考拉和淘宝虽然有样式区别，但实际上都相当于在底部有一层内容遮盖的部分。

2. 支线场景

再来看支线场景的按钮，支线场景的按钮一般能够分为：图标、文字、图标+文字、框+图文字+图标这样几种类型。

图标就不用说了本身就具有可操作的属性，也有修饰的属性，关键看他的场景和布局位置。例如淘宝的 tab 标签上的定位图标，就是一种修饰型的图标，为了更好理解这里的定位是一种楼层定位，随着页面滑动到不同的业务模块而会跳动，这里并不是一个 tab 的功能，不能算是切换页面。

如果把定位按钮单独拿出来放在导航栏，或者页面右侧的空白处，我们就会觉得他是一个可点击并能够进行跳转的按钮。

包括「查看全部」这样的文字，即便不加箭头我们也会尝试去点击，高亮显示就更加明显，用户已经形成这样的意识，但是像上面的规格和参数如果不加箭头会让用户觉得这里并没有可操作的东西就不去点击了。所以我们总结一下就是支线按钮的使用场景较为复杂，需要通过参考上下文的情景来做不同样式的选择。

不过支线流程毕竟是支线流程，为了不打扰主线流程，尽量不要将支线流程的按钮做的过分明显。例如淘宝详情页中的进店逛逛，其实这个按钮用了实心的色块做了强引导，目的是为了提高客单价，同样只要是对最终目标有帮助，并不能算是跳失，说不定回来的时候买了更多更贵的东西。

3. 异常场景

异常场景下的按钮不需要做的过于醒目，一般会采用幽灵按钮或者和背景近似的颜色。该场景下按钮大多数情况是希望用户点击将页面恢复正常状态，并不是一种强烈的引导。

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