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

现在市面上的汽车大部分都是过时的，没有吸引力的用户界面，正因为如此，很多设计师都在思考未来的汽车用户界面将会如何改善我们的驾驶体验。今天这篇译文，一起来学习特斯拉和Apple Carplay 是怎么设计的！

汽车行业似乎每天都有着新的发展。很多证据都表明在接下来的20年里我们将会看到比上个世纪都要剧烈的变革。因此，顶尖的数字设计师们应该把重点放在对这个行业的关注。那么，到底什么才是车辆用户界面的未来？它能从根本上改变我们和汽车之间的关系么？

下面是我收集的一些由全世界不同的设计师设计的美丽和未来的汽车抬头显示器、用户界面交互、第三方app控制器。这些设计想法，有一些是真实存在的，有一些还正在发展中。

特斯拉移动控制中心原型

它为什么会让人震惊？

当你想确定你是否已经锁好车，关上灯，或者把你的车钥匙交给刚考完驾照的小屁孩的时候，你是否觉得自己是个偏执狂？

这个移动app可以让你在不离开座位的时候检查这一切，有一个柴油混合动力车？你甚至可以在你吃早餐的时候启动引擎。直观的动画会反馈你这个动作是否已经完成。

车载控制面板用户界面

它为什么会让人震惊？

这个用户界面看起来是一个用肌肉记忆和手势驱动的通用控制模型，不同数目的手指可以触发不同事件，你可以通过iPad面板，无线鼠标等控制它。你可以通过动作来控制数值的大小等等。

这个用户界面去掉了所有需要用户记忆的小控件和视觉元素，从而你可以使用相同的手势或者它的变体，来完成多个不同种类的任务。

你可以在这里查看整个案例研究：A New Car UI

特斯拉仪表界面概念版

它为什么会让人震惊？

汽车将会变得更加的智能，为我们的公共场所腾出更多的空间，并且汽车的功能也将变得越来越互相关联起来。随着这些发展，数据在我们面前将会变得势不可挡，试想一下不久之前，我们的手机和其它东西一样还是一个单一功能的设备。我们在我们看到什么和如何看上有我们的控制权，它应该变得更加自然和方便使用。人工智能和机器学习将会采取直觉控制。这个由Bureau Oberhaeuser制作的原型让我们提前看到了这一切的到来。

你可以在这里查看整个案例研究：Behance

远程车辆健康测试与控制

它为什么会让人震惊？

当汽车所有的零部件都变成电子系统时，你想拿起扳手就能发现问题变得越来越不可能了。这个移动app原型试图用一种你能理解的语言去描述汽车当前的健康状况，让你知道你是否有必要在开启你的海岸线之旅前修一下它。

轮胎压力和气候的用户界面

它为什么会让人震惊？

当进行轮胎检查时，这个界面将会告诉你每个轮胎的压力范围并且告诉你它们的极限在哪里。这个用户界面提供了如此重要的反馈，我觉得它应该被纳入常用标准中去。

Hudway增强现实显示器

它为什么会让人震惊？

不用说大家都知道司机应该保持视线在路上，但是现在的手机导航都需要司机把注意力来回切换在手机屏幕和路面之间，这个叫Hudway的app把你的第二块屏幕跟挡风玻璃很好的结合了起来。你面前的那块挡风玻璃很有可能就是未来的显示界面。

你可以在这里查看整个案例研究：Augmented Reality Projections Turn Windshield Into A Navigation Screen [Video]

城市导览汽车应用

它为什么会让人震惊？

这个用户界面对于勇敢的探险家来说非常完美，如果你想快速的知道你周围有什么，这个用户界面可以让你在有限的路线里来一段自发的旅行。

Apple Carplay

它为什么会让人震惊？

每个人都在关注它的到来，想都不要想，如果你已经有了一堆苹果的产品，你也会在你的汽车上装上它的。Apple Carplay将会是下一代的第二块屏幕。

数字仪表板集群显示器

它为什么会让人震惊？

没有什么能和发动引擎点亮仪表，汽车轰鸣犹如巡游乐队组成的和旋一样。身边的一切，声音和延迟的视觉互动，都给与你感官的反馈。仪表会通过动画直观的告诉你，合适讲切入下个转弯，油量是否变低，以及胎压是否过低。

然而，用数字型号在方方面面代替模拟型号也会开始令人担忧，因为无法人工手动介入账款车子，当保险丝熔断，或者电子仪器故障时，汽车很快会失控。

特斯拉 iWatch UI 原型

它为什么会让人震惊？

当可穿戴设备成为我们设备的一部分时，它很明显会帮助我们的手持设备分担掉一部分的操作功能。这个原型很好的说明了它是如何将这一切展示到手腕上来的。

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

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

在过去几年当中，插画开始以一种坚挺的姿势，站在设计趋势的最前列。不止是原本身处各个领域的画手和插画师开始越来越受追捧，而且连网页、UI和动效设计师都纷纷学习插画设计。当然，更显著的变化，是插画在网页和UI中的使用越来越多，越来越频繁，甚至越来越多样。

多年来，插画被广泛地运用在杂志、图书、报纸、海报、传单等不同的传统载体之上，新的工具和技术使得它更加轻松地植根于数字化媒体当中。

作为设计中，最具有表现力的元素，一张插画所传递的信息比文字更多更丰富。在UI和网页中，使用插画来辅助传达信息，无疑更加直接到位。而插画的可定制性之强，犹在图片之上。

插画在UI界面中的运用，可以说相当广泛了，它更清晰，更时尚，也可以更加精准，甚至更有表现力，为什么不用呢？就适用范畴而言，我们可以观察到，它可以运用到这些地方：

• 页面主题图

• 网页首图和Banner

• 吉祥物和形象插画

• 博客文章配图

• 新用户引导教程

• 工具提示

• 奖励页面和成就页面

• 游戏化设计的页面

• 通知和系统消息

• 聊天表情

• 讲故事的辅助配图

• 信息图

• 营销和广告图

• 图标和装饰性内容

• 社交媒体页面

• 支持性内容的页面

插画的适用范围之广，这些总结出来的使用场景，并不是全部。插画本身的属性很有意思，它连接了设计，作为内容呈现，还带着明显的艺术化的属性。今天的文章，我们总结一下在设计中使用插画的10个理由和注意事项。

无论是印刷品、品牌设计还是UI界面，更加风格化的插画能够将不同的风格和创意加入其中，在激烈的竞争中更容易因此脱颖而出。留下用户才有转化。

同样的，在博客、新闻和Banner 中使用插画，也是看准了插画可以根据内容进行深度定制的优势，这种微调能让内容更加统一一致，更加符合产品目标，借助色彩、角色、环境甚至暗藏的隐喻，来吸引特定的用户。

我们常说「一图胜千言」不是没有道理的。人的视觉感知能力很强，看到图片的一瞬间，也许还没有来得及进行逻辑思考，但是大脑已经接收到大量的信息和内容。

• 心理学研究表明，人类只需要大概1/10秒就可以感知到场景中绝大多数的元素和基本视觉信息。

• 视觉信息可以更快传递到大脑，而重要的信息，人类也通常会被固化为视觉图像，而非文本化的记忆。

• 文本需要依托可读性设计，而图片和插画则会被直接识别。

• 图片和插画更容易打破文化和语言隔阂，传递内容含义。

• 对于视障用户、阅读障碍用户和儿童，图片插画更容易被理解。

虽然图片一瞬间传递的信息很多，但是图片在很多时候是无法提供精准而详细的内容。用户依然需要文本来呈现清晰而可以被阅读和记录的内容，所以文本依然是不可或缺的。在另外一方面，文本和标题已经具备的情况下，经过定制的插画能够辅助用户理解，更清晰的记忆。

在很多特定的领域，举个例子比如说金融，插画能够借助色彩、图形和形象来讲述故事，让用户更清晰的理解复杂的金融功能，甚至强化信任感，而这是文本所不具备的。插画能带来强烈的情感连接。

故事是最令人难忘的内容，剧情的走向和起承转合会给人留下深刻的印象。而插画则以清晰的形象将文字和意象勾连起来，无论是在网页、UI设计还是内容和体验上，都有着足够突出的体现。

营造氛围，渲染情绪，描摹环境，呈现角色，插画让故事更加鲜活、易于理解。在内容制造上，有着难以替代的作用。

人是情感动物，看似理性的皮囊之下，几乎每个决定都是在情感和情绪的驱动下完成的。如果某个设计除了能够帮你达成某个目标，还能让你感到愉悦，会心一笑，那么通常下一步就是将它收藏起来并且分享给朋友。而在诸多设计因素当中，插画在撬动用户情绪这一点上，有着无与伦比的效用——从线条、色彩到面部表情和曲线和动效，都在竭尽全力地为你阐述故事，营造氛围，将你拉到故事和场景当中去。

即使所有人都在分析和争论产品的可用性和易用性，大家在对美的追求上，始终保持着一致的态度。一个设计是否具备可取性，是否能够通过甲方、客户和实际用户，是每个设计人都需要面对，都力求做到最好的事情。精心设计的插画在美学和风格上更加扎实，风格化的设计不弱于现成设计素材所提供的价值。

和文本相比，插画的视觉化属性无疑是更强的。图片插画所提供的定制化内容能够从各个方面来贴合品牌的需求，更加到位地表达品牌所需呈现的信息。这也使得插画不仅仅在品牌宣传的时候，运用在广告、海报等显而易见的地方，而且也成了品牌 APP 中新用户引导和教程中必不可少的元素。

就像 Perfect Recipes 这个应用的新用户引导屏中，就借助插画来呈现。而 Toonie 这个可爱的闹钟应用当中，甚至借助游戏化的设计，集成了大量有趣的表情和贴纸，当然，它们都是使用定制化的插画来呈现的。

数字化的好处就在这里，通过不同的数字软件，合理的处理之后，不仅能够变成动态的，运用于视频当中，还能够作为微交互，强化产品的整体体验。

一旦涉及到的动效和短视频，整个数字插画就开始具备更多的可能性了，不同的动效能带来截然不同的感觉和体验，更不用说这种玩法正贴合时下的流行趋势。

Whizzly 这个动态图标就是基于插画，给一个创意分享社区所准备的。

和艺术一样，设计中同样需要借助隐喻来传达一些相对更有趣、更深刻、更有意思的信息。插画的独特性也是借此来构成，包含的隐喻使得其中的价值更加复合，值得反复咂摸，而不是一眼就可以完全看穿。

在这个约会应用的网页当中，插画无疑传递出了多重的信息，暗含的隐喻告知了用户产品的功能和属性。而下面这幅插画则是为一篇如何找到原创风格的文章所准备的，图中的金鱼指代的则是难以被抓住的灵感和风格。

无论是图标还是大幅的插画，都能帮助用户理解，更加直观地知道要看哪里，要做什么。面对如今的数字界面，用户的注意力持续的时间越来越短，而插画则让用户更快、更直接地获取信息，并且决策下一步要做什么。如果插画或者图标内容不能被用户一眼看出来，那么用户就只能借助文本标签来了解功能是什么。设计师可以通过测试来测试图标和插画的可用性和识别度。

值得思考的问题

当然，插画的设计是没有门槛的，在设计的时候，要求也是比较高的。在使用和设计插画的时候，需要考虑以下的几个方面：

• 目标受众（身体能力，年龄，文化背景，教育水平等）

• 产品的使用环境

• 产品和内容的在全球范围内和当地的传播水平

• 所选图形的隐喻以及是否容易被识别

• 插画是否会让人分心

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

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

现在，当你打开 Instagram、Airbnb、Apple Music、Twitter、Dropbox 这些应用的时候，乍一看很难区分清楚彼此的区别：带有圆润边缘、现代感极强的非衬线字体大标题，极简的黑白色调为主的界面，大量的留白，少量的提亮色甚至没有提亮色。

这种现代的界面设计风格，乍一看很简陋。而具有讽刺意味的地方在于，它们出自于最大的公司，是也是受众最广的产品，在视觉观感上，让人觉得几乎没有被设计过。

Instagram 的深蓝的页头怎么变了？Lyft 中经典的亮粉色元素怎么不见了？这些有着深厚底蕴的品牌是否已经放弃了标识性的设计？又或者是它们开始共享相同的模板了？

问题在于，这不止是 Instagram 和 Lyft 这样了，有迹象表明，Google 这样的大厂也有类似的倾向。比如Gmail 中标志性的红色大幅度减少，白色的背景，白色的交互按钮，白色的输入框，其他的Ui控件都很精准到位地保持了这种简约而一致的风格。

身在硅谷的大型企业，互相之间的借鉴学习是常有的事儿，但是至少保持了足够的差异化。但是现在的局面则不同，这种高度趋同的趋势，让整个事情看起来非常反直觉。

到底是怎么回事？

好吧，我们认为产品设计的一致性是好事情，这里有几个值得注意的原因。

对于大量APP 的视觉和信息疲劳是谁都无法忽略的真实存在，绝大多数人已经厌倦了在太多应用之间来回切换，每一次下载新的应用都要花费大量的时间来重新了解界面的设计

调研表明，超过四分之一的应用，在首次下载之后，用户只用过一次就卸载了。绝大多数人日常使用的APP 其实是非常固定的，它们中绝大部分，核心在于帮助人们节省时间和金钱（或者兼而有之），让生活更轻松。

对，让生活更轻松。而这需要数字产品具备良好的一致性，而设计师也越来越多地将注意力投注在这一个点上。

正如同我们熟知的UX设计专家唐纳德·诺曼所说的：「很多用户界面所存在的真正的问题，在于它仅仅只是用户界面。很多用户界面的设计阻碍了功能。我想努力达成某个目标，而不是将精力耗费在界面上。」

所有的电商网站基本上都遵循着类似的交互逻辑和视觉元素，你不会搞错购物车的图标，也不会错过任何环节。这些约定俗成的惯例，意味着用户不再需要重新学习在某个新的平台上购物，降低学习成本。

绝大多数约定俗成的规则和流程都被用户不自觉地印刻在大脑中，成为一种自然的习惯，而独特的设计，截然不同的规则，则常常会成为习惯以外的东西，引起混乱，让初次上手的用户感到受挫和沮丧。

以 Snapchat 为例，今年早些时候曾经发布过一个版本，其中包含有一些比较有争议的设计。这个版本当中，被重新修改过的导航和几乎随意堆砌的功能模块，让用户活跃度几乎立刻下降了73%，甚至直接导致了用户流失和股票下跌。

正如同 Snapchat 所证明的那样，新颖的设计是有风险的。一致的设计，确实有一定的机率降低用户在面对新兴事物时候的不安感。

明白用户的需求和意图，在不断探索解决方案的过程中，才能真正创造出伟大的用户体验。相比于独特的外观，差异化的体验是更有价值的。

当然，样式和风格很重要，它们也确实会影响到体验，当人们感知到有视觉吸引力的设计的时候，即使有一些混乱和无效的设计，也是可以忍受的。

但是设计师的精力是有限的，用户的也是如此，相比于在色彩和花哨的动画上反复尝试，帮助用户找到更好完成任务的方式，无疑更有价值。设计好的产品，最终能够给用户带来价值的东西，是需要看似无限的测试和迭代，来向着可用和易用的产品更进一步。

奥巴马、乔布斯和扎克伯格每天穿着相同的衣服，他们的衣服和这种行为同样出名。心理学家将这种现象称之为「决策疲劳」，它们每天需要用有限的能量来做大量的决定，而为了给更重要的事情留下足够的精力，他们穿相对固定的衣服，就可以省心很多。

设计师面对的是同样的局面。随着界面设计的趋同化，设计师可以花费更少的时间来决定用什么色彩，而可以将更多的精力投注在更为深入的设计当中，比如更有效的布局，反思为什么要这样设计，等等。

我想你一定在思考这种设计趋势之下的缺点，比如这样的设计是否会显得缺乏创新，甚至会扼杀创造力。老实说，我觉得这样的影响是存在的。

但是，即使每个产品设计师都参与到极简主义设计的运动当中来，仍然有大量的设计工作有待完成，设计的范畴太广泛了，需要设计的东西远超用户界面本身。

事实上，界面中的趋同化在近期看来是颇为有益的，对于长期的影响也是非常巨大的。

首先，最重要的一点，VR、AR 和人工智能的逐渐普及，用户和数字设备之间的互动可能会变得更加隐形，小屏幕同样在普及，手势操作将会成为最基本的交互语言，我们将会越来越多地参与到无屏幕的交互当中去。

即使我们在iPhone 上，人工智能加持下的 Siri 越来越好用，越来越多的用户开始习惯使用类似的语音助手来创建待办事项，选择音乐，发送消息，查看天气，简单的功能它们已经可以很好地完成了，复杂的功能和需求也会通过机器学习逐步习惯、越做越好。

在诸如人工智能、机器学习这样相对高深的概念背后，是软硬件正在更好地帮助人类完成任务，做对事情。设计师的角色需要更进一步，更深入地参与到产品当中。

如果设计师要改进 Siri 的设计，那么要做的工作远不止设计界面，已经有很多相关领域的专家讨论过这个问题了，设计师所需要了解、掌控的维度越来越多，设计正在变得更加深入和复杂。更通俗的讲，设计师需要考虑新的方式，更加富有创造力的策略来吸引用户的注意力，甚至要深入到情感和感知当中去，而不是单纯的视觉。

如果我们仅仅将优秀的设计局限于我们在屏幕上看到的内容，未来更多的可能性，可能就止步于此了。

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

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

蓝蓝设计( 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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务