2020 年，新冠疫情席卷全球，后疫情时代的需求也促使设计师们不断提出更有意义的医疗解决方案。作者梳理了医疗保健类 APP 的类型，从产品的研究、功能特性、导航、颜色等角度提出了针对医疗保健 APP 的一系列设计建议，简单直观的界面、便捷的功能，以及积极的情感，才能使用户接受并喜欢原本 “令人生畏” 的医疗产品。

△ Justas Galaburda 绘制的插画

在移动应用市场中，的应用类别是 “游戏”，而 “健康与健身” 类勉强跻身前十名。2020 年是十分艰难的一年，但也创造了很多机会，例如，移动应用市场中医疗行业的产品大热，受到多方关注，这类产品直接影响人们的健康行为，可以使人们的生活更加轻松愉快。

为此，大批创业人士开始关注医疗这一领域。首先，你需要制作一个功能强大的 APP，因为如果一款产品不能交付使用的话，它就一文不值。但是，这种功能必须通过设计能力来呈现。一个好的医疗保健 APP 设计，应突出其最重要的细节，引导用户进行操作，并提出下一步建议，从而产生必要的行动。APP 本身可以成为有效的潜在客户开发工具和公司的主要产品。对于一个健康或医学相关的产品来说，用户界面或用户体验设计尤为重要。

△ George Frigo 设计的呼吸检测 APP

本文将探讨一些医疗保建 APP 设计的成功案例和经验，这对设计师和企业来说都很有帮助。

医疗保健应用的类型

值得注意的是，“医疗保健类 APP” 是一个综合性概念，涵盖了许多与健康和医学相关的数字产品。

医疗保健 APP 类型很多，包括但不限于：

• 医护人员与患者进行远程咨询的 APP（远程医疗）
• 患者与其电子健康病历（EMR，Electronic Health Records）进行交互的 APP
• 记录和管理患者生命体征的 APP
• 提醒患者何时服用药物或进行运动的 APP
• 用于医学计算的 APP
• 包含医疗信息的参考型 APP
• 健身和运动类 APP
• 健康生活方式和健康管理类 APP（日常饮水量、睡眠管理等）

这似乎是一个相当宽泛的主题（例如，卡路里计数 APP 和医学教育解决方案相差甚远，却都属于这个领域）。但是，有一些通用的设计方案，可以提高任何一款 mHealth APP 的易用性。（ mHealth（Mobile Health，移动医疗或移动健康）：通过移动设备提供与医疗相关的服务，例如，通过 PDA、移动电话和卫星通信来提供医疗信息和医疗服务等。）

△Victor Nikitin 的医疗类 APP

如何设计移动医疗保健 APP

一款 APP，即使它不是企业的主要产品，也可能具有巨大的价值。例如，用于医疗工作的配套 APP，能够为客户提供信息和服务，从而减轻员工的负担。如果一款医疗保健类 APP 是企业的主要产品（例如，健身或冥想 APP），因为没有硬核的业务场景支持，会有很大的风险。有时，这类 APP 设计中的不足会导致用户完全放弃使用它。

为了避免这种情况，我们来看看设计医疗保健 APP 的 12 个要点，以及它们如何帮助设计师们设计出更具针对性、更直观、更的 APP。

△ Anatoly 设计的 Healthcare APP

1. 研究 – 成功的第一步

在制作 APP 界面原型之前，你需要了解产品的目标受众是谁，他们的地理分布、社会人口特征以及心理特征是什么。因为没有一种产品可以满足所有人的需求。用户的兴趣和能力决定了他们如何与 APP 进行交互。因此，回答以下问题将对你有所帮助：

• 产品的目标受众是谁？
• 他们喜欢什么？
• 他们每天都使用哪些 APP？
• 他们使用这些 APP 是出于什么目的？

一般来说，患者和医生都会使用医疗保健类 APP（假设我们将生活方式类 APP 的用户也视为患者）。这两类用户在功能和 UI 设计方面有不同的需求。

医务人员通常需要快速找到一些数据项，例如 EHR / EMR、药物规格、诊断和治疗建议、参考材料等。但是，患者希望能与尽可能少的信息进行交互，且这些信息应该简单易懂。因为这类用户中有很多是老年人，或是存在某些障碍的人。

只有在进行适当的用户研究，并得出相应结论后，设计师才可以着手进行医疗保健类 APP 的设计。

△ Chahua 设计的健康管理 APP

2. 每一个案例都简洁明了

对于一般人来说，医学是一门复杂的学科。所以在设计医疗保健类 APP 时，请尽可能地让它们保持简单，这有助于让用户平静下来，并保持专注。

“复杂性是你的敌人。很多傻瓜都可以让事情变复杂，而让事情变简单是很困难的。” — 理查德·布兰森

为了让医疗类 APP 看起来很重要并给人留下深刻印象，而将其界面做得过于详细，是没有意义的。即使该产品是为医务人员设计的，也最好 让界面和逻辑易于理解。

△ lgor Savelev 设计的医疗类 APP

在设计医疗保健类 APP 的用户界面时，请提供有意义的用户引导，并 使界面直观易懂。否则，用户可能会在触达该应用核心内容之前就对其体验感到沮丧。

如果该 APP 清晰明了，医生及患者双方都更容易接受。这样一来，用户易于学习上手。即使它是针对医疗的解决方案，人们也不会感到不习惯。

为帮助用户在比较舒适的节奏下了解产品功能，请使用渐进呈现的原则，逐步为用户提供指示。从新手指引开始，将应用程序中的每个操作分成可管理的小模块，每次仅提供一个指引。（渐进呈现（progressive disclosure）：每次只展示用户当前需要的信息，引导人们平缓地由简单状态进入复杂状态。例如将原本复杂的逻辑隐藏起来，通过更易于认知的界面形式帮助人们轻松完成最为基础的任务。）

另外，采用被动输入、自动输入、调整键盘和动态验证字段的方式，能够限制用户必须输入的信息量。

所有医疗信息必须由受过相关教育且具备专业知识的专家提供。否则，内容要么不完整，要么包含错误，对于医疗产品来说是不可接受的。

△ yurig 为医生设计的医疗类 APP

3. 功能和特性

医疗保健类 APP 的 功能及特性取决于其用途和目标受众。例如，医疗中心 APP 需为用户提供个人帐户，在该帐户中，用户可查看其就诊记录、就诊建议以及预约情况。如果没有安全加密的视频会议和通讯功能，远程医疗 APP 将毫无意义。毕竟医疗类 APP 依赖的是可靠且有用的通知。

主页承载着一个 APP 的主要功能。请试着回答这个问题：用户为什么使用你的 APP？或与之类似的 APP 呢？如果用户访问 APP 是为了记录或接收某些信息，或是联系医生，查看他们的进程等，那么这个功能应该位于 APP 的主页。

重要的是，正如前文所提到的，避免一次性出现太多功能，从而造成混乱。不可否认的是，这种情况经常发生在老版本的 APP 上。这些 APP 常常不断添加新功能，偏离焦点，以至于只有专家用户才能理解它。

（专家用户（super-users）：专家用户在生活中愿意给予企业反馈，主动做口碑，或是积极分享、点赞等，这些无法以价钱衡量，却能在品牌价值传递、产品创新、营销推广等经营各环节，为企业带来实质贡献。）

根据帕累托原理（二八法则），80％ 的用户倾向于使用不超过 20％ 的功能。因此，务必确认哪些功能对用户来说是最重要的。

（帕累托原理（ Pareto’s principle）：也称二八法则。在任何特定群体中，重要的因子通常只占少数，因此控制具有重要性的少数因子，即可控制全局。）

△ Manoj Dalvadi 设计的 Medicine APP

4. 便于探索与享受的导航

清晰的导航结构是一个有效的医疗保健类 APP 的必要条件，也是医疗保健类 APP 用户界面设计的基础。没有清晰的导航，APP 是不会被广泛使用的。完善的导航意味着率和易用性，这对用户来说是十分有价值的。医疗专业人士需要的是能够快速开展工作的应用，因为他们花费了太多时间在处理电子健康档案（EHR）上。一项由斯坦福医学院展开的调查发现，医生花费在每个病人身上的时间，有 62% 是用于处理电子健康档案。如果针对医务人员的 APP 不够简洁，那 APP 便失去了使用价值。同样的，对于患者来说，他们也不会喜欢混乱的导航，即使当前的任务不是很重要。

重要的信息应放在明显的位置，并在必要时提供详情。根据 3 次点击原则，系统应保证用户在 3 次点击之内，找到所需信息。

为了使 APP 导航结构清晰，可采用标准的 APP 导航组件，如汉堡菜单、标签栏或抽屉式导航等。

△ Alex Samofalov 设计的医疗类 APP

颜色的选择

一般来说，APP 的颜色选择取决于目标受众以及该 APP 的主题。

医疗保健类 APP 设计通常采用中性色调，尤其是冷色调的蓝色和绿色，背景一般为 白色。设计师这样做是为了达到以下效果：利用柔和的色彩和医疗保健行业的联系，缓解用户焦虑并增加可信度。因此，在医疗保健类 APP 的用户界面中，亮红色或黄色是很少见的。

△ Adam Sokołowski 设计的医疗类 APP — Pharmagy

但是，考虑到医疗类软件的多功能性，颜色选择并没有特别的限制。主要思路是，这类 APP 的整体外观应营造积极的印象，不应引起焦虑、恐惧或其他不良情绪。

例如，深色的健身 APP 看起来优雅且有品味：

△ Saepul Rohman 的 UI 设计—健康及锻炼类 APP

而亮色为 APP 增添了许多活力：

△ Michal Parulski 设计的移动健身 APP

追求个性化

APP 的个性化定制是近年来最显著的设计趋势之一。特定的功能与特定的用户模式相适应，并且系统会暗示用户下一步可执行的操作，以免被用户忽略。

这些技术的目标是，帮助用户更快地利用 APP 解决问题。因此，有必要识别和分析用户模式，并跟进他们的变化。

正如每个人都有着不同的健康状况，用户希望他们所使用的 APP 也能提供同样独特的体验。除此之外，在非医疗保健行业，也有 33％ 的用户会因个性化程度不足而卸载应用程序。

在设计医疗保健类 APP 时，可以使用许多自定义选项，如颜色主题、个性化通知、交互元素，以及利用 AI 定制个性化推荐等。

△ Jawad 设计的在线咨询 APP

无障碍性是必需的

无障碍的 UI 设计对任何 APP 来说都很重要，对于医疗类 APP 尤为重要。

移动医疗解决方案针对的是不同年龄，具有不同视觉和听觉能力、身体和心理特征的用户。因此，医疗保健类 APP 主要功能的设计，应保证每个潜在用户都能访问。请考虑可能存在的限制，并努力克服它们的负面影响。例如，有晕动症的人不会喜欢过多的动效。

但这并不意味着一个医疗保健类 APP 的界面中只能有两种颜色，也并非所有文本字号都要非常大，但这确实意味着设计师将面临一些挑战。对于医疗保健类 APP 来说，其中的挑战也许相对多一些。无障碍设计能带来更多的机会，而不是负担。试着从浏览 W3C 网页中关于无障碍指南的内容开始，尝试使用色盲模拟器，如下图这种。

无需多言，试试移动端无障碍设计的常用方式：将主要元素的尺寸控制一个拇指大小的区域中、添加将视图改为水平模式的选项，以及放大文本的选项等。

△ keithar 的对比度分析仪和色盲模拟器

积极态度的力量

医学不仅复杂，而且通常令人生畏，即使涉及的医学内容不多。一个比较聪明的办法是使 APP 看起来与医学毫不相干。这将消除用户因刻板印象而产生的压力，并使体验更加愉悦。

除了使用柔和的颜色，还可以在用户使用 APP 的不同阶段 推送鼓舞人心的消息、有趣的图片、欢快的语音或其他元素。医疗保健类 APP 用户界面中的图像和图标，应始终带给用户积极、愉悦的情绪，并 营造一种无痛感和安全感。

△ Mahdieh Khalili 设计的冠状病毒 APP

区别于 Web 设计

当产品已具备现成的网站，企业方甚至设计师为了降低制作成本，可能会想从产品的网页版中 “借鉴” 一些解决方案直接应用在移动端设计中，这很可能导致用户拒绝使用 APP。

用户与移动设备间的交互不同于与电脑间的交互。移动设备的屏幕比显示器屏幕或笔记本屏幕小。此外，用户与移动设备交互的方式不同于在电脑上进行的操作。在移动设备上，我们做任何事情都依赖手指的移动，不愿意输入冗长的文本，但同时希望系统能更快地工作。

一般来说，尽管 APP 中的导航也很重要，但对于移动设备而言，更需关注的是交互设计。在大多数情况下，人们喜欢使用网站来获取信息，使用 APP 来完成任务。此外，APP 还集成了智能手机的功能，如加速度传感器和摄像头，这也是导致 APP 的用户界面设计与 Web 版有所不同的原因。

△ Grace Saraswati 设计的健康健身类 APP

好事过头反成坏事

视觉吸引力与功能性之间的平衡是非常重要的。医疗保健类 APP 必须便捷，且不能分散用户对内容的注意力。

图形元素，包括动画，应始终以满足使用目的为前提，来考虑是否需要，如数据输入，以及说明用户与系统间的微交互等。不能仅仅因为它看起来不错而添加。不要过度使用渐变和阴影，要将用户注意力集中在主要信息上。字体也只需选择一种，可以通过改变字号和其他特征（如斜体、粗体）来做区分。

使用简单的配色方案可以更清晰地传达品牌信息，并创造更好的导航效果。

△ Dibbendo Pranto 的健康及活动追踪交互设计

是否借鉴竞争对手

你可能会在某些点上考虑，是否要借鉴一些竞争对手的成功案例。好吧，如果这有用的话……一方面，抄袭其他产品是不明智的，因为 它们的设计可能并不完善。你采纳的可能是竞争对手的错误决策，以至于阻碍 APP 的未来发展。

另一方面，你应该先对其他应用进行分析，对竞品进行研究。应该参考用户以前使用其他 APP 的经历，并进行借鉴，从而降低用户的学习成本。添加太多创意会使 APP 显得很烦人，用户需要花大量时间去习惯并学习操作。为此，可以参考苹果制定的人机交互指南（Human Interface Guidelines ）和谷歌制定的材料设计指南（ Material Design）。

“用户大部分时间是花在别人家的网站上。” — 雅各布定律

（雅各布定律：用户在其他千千万万个网站中积累经验，学会如何使用网站，当一个网站跟其他网站一致时，用户会立刻知道该如何操作，但如果违反了雅各布定律，用户会毫不犹豫地离开。）

必须根据品牌、服务和产品细节来进行设计。例如，健身类 APP 与医学计算器有着很大区别。设计必须完全符合目标受众的要求、APP 的功能细节及主题场景等。

△ Martyna Zielińska 的医疗提醒 APP

可用性测试

最后，重要的是要记住，每个设计师都有自己的观点，认为这个或那个决定是合理或有效的。他们可能会对 APP 架构和导航的一致性，严谨的设计解决方案，以及产品的实用价值深信不疑，以至于忘记了测试。通过不断的实践，设计师提高了自己的共情能力，可以更好地理解用户需求。但事实上，直觉和经验带来的潜在陷阱也会给应用带来负面影响。

只有在分析用户与 APP 界面交互的相关数据后，才能得出相对准确的结论。测试有助于及时获得反馈，覆盖 APP 中的所有行为场景，并检查交互模式。

用户的积极参与是成功的关键。相关测试受众的年龄、职业、地理位置、性别、文化和宗教背景等要尽可能接近目标受众，越接近越好。尽可能多地让他们使用 APP 的主要功能并收集反馈。

△  Alex Samofalov 设计的患者卡片 APP

结论

设计所关注的并不仅仅是颜色和字体，而是创造价值和解决业务问题的能力。健康是一个敏感且具有挑战性的问题，需要特别注意。设计师们一直努力地在医疗类 APP 极高的安全性及可用性要求与界面美观性之间取得平衡。

经过深思熟虑的医疗保健用户体验和 UI 设计是一种极好的工具，它能凭借简单直观的界面、便捷的功能以及它所带来的积极情感等，吸引用户参与体验。

文章来源：优设网     作者：TCC翻译情报局

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

今天给大家带来的是如何建立设计师个人的插画组件库，因内容过长并知识点过多，请泡杯枸杞观看。

一、关于个人插画组件库的3大疑问点：

1、为什么要建立个人插画组件库？

其实最主要目的是为了给自己的插画提供一个设计轴心，我们可以围绕着这个轴心创作出更具有效率规范的插画内容，演变更多的插画风格，让我们使用插画时变得游刃有余，提升率的设计输出，衍生更多的组件化运营设计与品牌插画组件库。（注：按照以下步骤设计，插画手残党也能轻松学会哦！）

2、品牌（产品、项目）插画组件库与个人插画组件库的区别？

01-规范区别：

品牌插画组件库：组件品牌插画库前会做很多细致的规范，如：颜色规范/情景规范/光线规范/关节细节处理/景别元素处理等等；

个人插画组件库：为了让我们的插画更具有灵活性，所以在做个人插画组件库时不会做太多的规范，反而为了插画的衍生要更注重人物构造、比例、小组件等等，目的就是为了成立个人插画轴心。（注：个人插画轴心是针对于第一个插画系统的原型，我们后面的插画风格衍生都会参照第一个插画系统的原型，后面会给大家详细讲解）

02-使用效率：

品牌插画组件库：使用更加，拖入即可更换组件使用；

个人插画组件库：因为我们采用的是不断迭代式做法，所以在刚建立个人插画组件库时，我们的组件替换效率是比较低的，但是在逐渐迭代中，我们的使用效率会逐步提升。

03-拓展力：

品牌插画组件库：因为有很多规范的约束，所以拓展力偏弱，不过针对于自己的品牌已经足够了，它本身就是为了自己的品牌服务的；

个人插画组件库：因为从我们插画组件库的层级分区来看本来就是为了衍生拓展，所以拓展力非常强，不仅可以衍生出相同类型的插画风格，还可以衍生出不同类型的插画形势，甚至可以以个人插画组件库为基础创建单独的运营设计组件库，或者升级为品牌插画组件库。

3、个人插画组件库哪些人最应该去建立？

我认为UI设计师是最应该去建立的，在我们线上接触的banner、功能页、启动页、海报等等，很多都可以用到插画去设计，不管是针对于在公司还是针对于自己私下接私活都是一大利器，可以让你的完成甲方的任务，更大程度保证设计的统一性以及输出的质量。（相信大家都遇到过到处找插画素材拼凑banner的时候吧，有了个人插画组件库就不用愁了）

当然除了UI设计师还有插画设计师、平面设计师、美工也都可以去建立插画组件库，不过具体还是要看每个人所接触的不同设计内容，有些设计师的设计内容很少接触到插画部分，或者很少接触到可以组件化的插画（比如材质复杂、偏手绘插画），所以就没有必要去建立插画组件库。

二、如何建立个人插画组件库？

想要建立个人插画组件库就要从它的本质特点出发去考虑，个人插画系统归纳下来一共有三大特点：可复用、适应力强、效率高。那么接下来我会围绕着这三点来阐述该如何制作UI设计师个人的插画系统。

1、可复用性方向出发设计

可复用性是做插画系统的一个基础，如果不能解决可复用问题，那么做个人插画系统根本没有任何意义。

如果想要达到插画可复用性，我们就要把插画内容进行不同的拆分，在它可替换的部分都作为一个复用样式，让它可以更换不同的组件，那么我的解决方案有五步：

第一步：

设定基础人物组件（肢体细节、型体比例），规范组件内容。如果你是第一次做人物组件，可以多在网上找一些可参考内容：

下图是我做的一个基础人物组件案例：

从人物组件上面来看我一共把它们分为了9个小件，它们分别为：头部、上身、上臂、前臂、手掌、臀部、大腿、小腿、脚掌。

从人物比例来看，男性比例为10a，男性略高，上身宽大，整体壮硕；而女性比例为9a，稍矮于男性，纤细苗条。不管是男性还是女性整个身体构造简单常规，符合真实人物比例，有利于后期的组件改造。（第一个插画组件最好使用常规比例，后面会提到为什么要这样做）

在人物组件上的划分并不是固化的，你可以把它细化分为9个部分，也可以分为7个部分，如果分为7个部分就把上臂与前臂统一融为手臂，大腿与小腿统一融合为腿部，到底要怎么去进行组件化，还是要取决于自己设计的插画人物特性。

除了男性、女性外也可以建造更多的人物进来，例如老人、小孩、婴儿...人物越多，后续的延展空间也越大，前期为了更快的制作插画组件库，可以先建立1到2个人物，后续可以逐步完善迭代。

第二步：

为了后期人物的动态延展，我们可以用人物组件制定一些高频的人物基础动态，例如标准站姿、坐姿、跑动等，以便于我们插画的延展，图示如下：

做人物基础动态可以让我们在后面的插画设计上少花很多时间，例如工作中要用到跑步动态时，那么就可以直接用人物基础动态里面的跑步动作进行添加人物细节，会节省很多工作时间，提升工作效率。

第三步：

有了人物组件的基础，我们就可以开始设计插画的风格。

在设计前我们可以多参考一下别人的插画风格，这里所说的风格主要是指插画的处理方式，比如：颜色的选择、表情的处理、衣服材质的处理、曲线直线的选择等。

我们需要注意的是建立第一个插画系统时可以先做一个风格简单的，不仅容易调节组件也有利于后期的风格衍生，以下是我为人物添加的简单基础风格（ 特点：纯色/完全按人物组件贴合设计/无渐变）：

第四步：

设计人物组件（可以让你的插画在不同的场景应用不同的动作/服装/表情/肤色等）

1/发型：

在发型上面我们可以进行一些人物的区分，可以适用于不同的场景，例如：男性第一个适用于公司场景，第二个适用于学生，第三个适用于军人...

2/肤色：

做肤色的变化最主要原因是让插画适应于国际化，在不同的场景中可以加入不同肤色的人物。

3/表情：

表情是为了更好的体现出人物在环境中的状态，如：领取红包插画，人物的表情就应该是开心或者大笑。

4/角度：

在插画的角度上，我们采用了最常用：正面、半侧、正侧，让它在插画中的适应力变得更强。

5/纹理：

我们目前设计了6个基本纹理，基本纹理不仅可以设定于服装中，还可以设定于辅助元素以及背景中。

6/服装：

在整个人物组件中，分为3大块可替换服装组件，分为别：上身、下身、鞋子。例如上身可以替换为短袖、长袖、卫衣、背心等，同时在它的下一个层级还可以替换服装纹理、服装动作、服装颜色。

结合以上的人物组件我们就可以组合出各种不同的动作，如下：

第五步：

设计通用组件库：

通用组件库中的元素最开始要用黑白灰来表达，因为在不同的场景中元素的运用也有很大差异，例如花盆作为近景元素会多许多细节，作为远景元素可能只是作为线条来点缀，这些表达方式我们可以在日后使用过程中添加到它的子级库即可，这样可以让我们在使用组件库时更加灵活，也有利于我们迭代组件库，后面会逐一的讲解。

这5个步骤下来我们的可复用性插画就做好了，那么接下来看看运用效果：

我们可以看到以下4个场景，运用到了不同的景别处理方式，例如：第一组为背景渐变；第二组背景则采用了大面积的纯色；第三组背景用线性表达；第四组则用浅色面表达。

这也是与品牌插画组件库的很大区分点，虽然都是可复用性插画，但是品牌插画组件库大部分是使用现有的、具有规范的，而我们所做的个人插画组件库可以用同一个辅助元素增添不同的插画表达形式，不断迭代子级，迭代的子级越多它的内容选取性就越高，后续就可以直接拖入使用，比如图4中的植物就有2种状态，第一种是显示部分颜色，第二种则直接为灰色。（注：后面会详细讲解）

以下活动页中，背景元素也可以运用同样的方法，在我们的背景组件库中调取想要的单个插画元素，把它们组合放入活动页背景中，进行再次调色得到不同的背景组合，以下三种背景组合都可以相互替换使用。

2、让你的插画具有极强的适应力

适应力强是指我们的插画系统可以匹配大多数的产品，因为个人插画组件库是以设计师身份做的，我们会面临各类产品，而各类产品风格都会有不同的变化，要解决这一点我们可以使用以下三个方法：

方法一：改变人物结构

例如：你想为产品A做一些插画类的功能页或banner时，发现你现有的第一套插画组件库并不符合产品特性，产品A想表达更多夸张的成分，而我们所做的插画系统显示更多的是柔和与大众，这样就完全不匹配，那么我们就要去改变一个基础点，那就是人物结构，通过人物结构的重组我们可以得到想要的夸张效果，那么我就男女各举一例结构重组对比图，如下：

我们为了在身体结构中达到人物夸张的效果，在原有10a比例不动的情况下对原本的身体结构做了重大调整，男性：上身的缩短，下身的延长以及手部脚部的突出；女性：整体更加硬朗，手脚放大，腿加长。

如果把他们用相同的插画风格表现出来，就会出现如下效果：

当你在做人物结构调整时，你会发现有一个常规的人体结构作为基点去设计是多么重要，也就是之前所提的为什么第一版插画组件让你做常规的，因为如果不是常规人体结构，调整起来会非常麻烦，就很难有参考意义。

方法二：改变插画风格

除了人物结构外我们还可以更多的考虑插画风格，通过不同的插画风格去适应不同的产品，例如：线面/渐变/杂色/极简...同样我就男女各举一例，如下：

上图改变风格后，男性的风格则更偏向于线条的表达与高亮色调；女性的风格则简单直接，更注重凸显配色的碰撞。

方法三：改变人物结构+插画风格

在上面两种方法中除了已有的基础人物结构A与插画风格A，我们还得到了人物结构B、C与插画风格B、C，如果我们用人物结构B（或C）与插画风格B（或C）结合又可以形成新的插画状态。

按照这样的方式下来我们就可以逐步添加自己的插画系统，假如当你的插画系统人物结构有5组、插画风格有5组时，你就可以组合出25组不同的插画，这样你的插画系统适应能力就极强了，甚至你要为产品做插画系统时，也可以大幅度参考你的个人插画系统，当然这一切都是需要自己去慢慢迭代添加的。

3、用软件规范插画组件库（层级详解），提升应用效率

为了更好的替换组件，提升输出的工作效率，我们可以从一开始就使用软件对插画进行管理。市面上可以提供复用样式的软件也蛮多的，这里我就使用应用率最高的Sketch来进行讲解。

首先我给大家讲一下我的插画组件库的构成，我的插画组件库一共分为了5大块，分别为：人物组件库、非常规人物组件库、动物组件库、辅助元素组件库、辅助背景组件库，而这5大块中也细分出了很多小层级，我就一一为大家分析下我所用的层级。

我们可以从以上图中看出从风格分类开始直至最小的组件，我用到最多的层数是5层。

如果大家看的有点懵，我们就拿一块从层级1到层级5举例说明：

风格分类（A）-角度分类（正侧）-四大组件（下身）-动作（B）-颜色（B）

这里所用的是sketch复用样式中的“套中套”，“套中套”的组件方式看似复杂，其实挺简单的，并且在软件中换取都在大组件内，因为不是软件讲解所以就不带入过多的软件知识。

在制作时我们不要想着一次性就做出很多小组件，比如你想做表情时，一来就想做10多20个全部包含完，其实没有必要，我个人是比较建议最开始小组件做个3-5种常用的就可以了，因为组件库是要不断添加优化的，所以可以在后续工作应用中再不断的添加。

有了层级的划分，我们可以用sketch的复用样式简单、的规范插画组件库，想要覆盖替换组件内容也是十分方面，如下：

2/非常规人物组件库

除了常规的人物组件库外，我还单独罗列了非常规人物组件库，这一类组件库主要是作用于人物特殊的动作形态，比如下面3个透视类的插画动作形态，这些动态与常规的插画组件库的内容很多是不互通的，比如脸的角度、鞋子的角度、身体的透视尺寸，所以我们就单独给他罗列一个非常规人物组件库。

都是同为组件库，当然也有可替换内容，非常规人物组件库与常规的人物组件库的层级逻辑有所不同，常规的人物组件库是用小组件替换人物动作，但是非常规人物组件库是先替换整体的动作然后才可以替换小组件，这也是对他的特殊化管理。（注：不想舍弃它，又不想为他做出更大的调整，所以就单独让它成立出来。）

根据非常规组件库的设定给大家做个小案例：

以上可以看出我在这个透视化的插画人物中可以替换表情、发型、纹理、上身、下身。

3/动物组件库

我这里做的动物组件库是用来辅助人物以及调和场景的，所以在层级划分上并不会做的非常细，满足我的日常插画需求即可，当然如果你想把动作组件库做的非常细，那么可以参照人物组件库的层级来划分层级。

根据我使用的动物组件库层级，给大家举一个正确小案例与错误小案例，先看下错误小案例：

可以看到下图（狗子）是一个非常粗糙的动物组件库，里面只能替换动作以及动物的动作，当选在狗子的状态下，狗子除了换动作没有其他的组件选项，虽然我想让动物组件库简化，但是也不至于什么都不能替换。

接下来看看正确的案例：

我们可以看到在猫咪的状态下就有很多组件可以选择，不仅可以替换猫咪的动作，还可以替换展示形式（展示形式我是按照景别来做差异化，当然也可以用其他方法）、猫咪表情以及猫咪的颜色，这样的动物组件库已经完全能够满足我的设计需求。

4/辅助元素组件库

辅助元素组件库层级最好要添加景别，因为我们经常会遇到同一个元素在不同产品中体现出不同的景别，如果不区分，在选取组件时就非常的伤脑经，经验之谈、强烈要求。

为了大家更好的理解，我给大家举一个小案例：

我们可以看到我不仅可以切换元素，还可以切换景别以及颜色，至于其他的小组件我并不需要，因为这些已经足以满足我的日常运营设计需求，这个层级划分简单实用非常推荐。

5/背景元素组件库

背景元素组件库一共分为两种类型，分别为：组合场景背景与纹理背景。

组合场景背景：

组合场景背景是用辅助元素组件库拼凑而来，它是一个可以直接用的完整场景，想要替换的组件如果在辅助元素组件库能够替换，那么在背景组件库也是可以的。（注：这里牵涉到组件库的重组调动，在后续出的文章中会详细提到）

上面的插画由白天变为黑夜只需要用组件库就能轻松完成，而这些组件库也不是现做的，全部是辅助元素组件库里提取过来的，也就是我所说的组合场景背景是用辅助元素组件库拼凑而来。

大家可以发现插画中山上的小房子只用一个组件就可以全部替换颜色，而左右两边的树却要做6次不同的替换，树木需要多次替换的原因这就是没有做重组，如果想要相同元素做相同的替换，那么建议在调换过程中重组组件，优化层级。

纹理背景：

纹理背景相对于来说就是最简单的，它里面只存在纹理的不同样式，并且只可更换颜色。

三、人物插画组件库如何结合到运营设计中？

1、创建常见运营设计规范

在做设计前，我们先要做好运营设计的规范，以便于组件库的插入应用。

那么我就用卡片弹窗来举例：做设计前我们先确定卡片内容，当内容确定后，根据内容进行卡片的运营设计规范：

我们需要注意的是初步规范里并不需要涉及到用什么字体，也不需要罗列出插画的尺寸规范，我们可以在后面的设计中一步步去实现。

2、结合运营设计的两大方法：

当规范做好时，我们就可以利用规范去制作相应的组件库，利用组件库来结合运营设计，按照不同的情况可以分为以下两种方法：

1/重组组件库（无人物动态组件的情况下）

在一些运营设计中，如果我们要用到的人物动作之前并没有做过，那么就需要我们重新设计人物动作，设计完后再把可以重组的人物组件拖到我们现在的组件中进行重组，分以下几步进行：

第一步，根据卡片的规范做出卡片的设计内容，如下：

第二步，把设计好的内容分板块，以便于组件库的层级划分。在这里我把他们一共分为了4个大块，分别为：文字组件、人物组件、辅助装饰组件、背景元素组件。

第三步，在大的板块下划分小组件，结合小组件就可以得到我们组件库的层级，可看下图：

在小组件里，很多都是个人组件库里原本有的内容，这时我们就可以把它们拖进来进行重组。

假如你替换的元素不够用，那么就需要你自己手动设计了，这样也能反过来扩充你总的人物组件库内容，其实组件库的内容就是这么一点点迭代添加的，当你的组件库内容越来越多时，你的设计成本就会越来越低。

三步下来我们就把组件库融入到了运营设计中了，有了新的子级运营设计组件库。

2/直接替换（有人物动态组件的情况下）

如果你做的运营内容组件库里都有，那么就可以按着规范直接拖入即可，也没有必要去进行重组。

总结：

总的来说组件库的建立是一个庞大的工程，在你有了基础架构的时，你就要慢慢往里面塞更多的内容进行填充，当你的内容足够多时它就可以反向为你提供更多的便利，它是你的宝贵的设计资源库。

因为这期的内容实在太多，所以插画组件库的应用、运营设计常用模块组件案例、重组技巧以及品牌插画组件库的建立我会另外抽时间给大家总结。（做案例太费时间希望大家谅解）

参考资料提取：

我为大家提供了一些组件库的可参考性文件，里面包含成套组件库（sketch）、成套的插画图片、宣传动画、一些参考性的图片（构图、表情、发型等等）。

文章来源：tob.design     作者：黑狮力

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

祝愿大家在新的一年，有一个新的开始，更加有活力，更加有生机，生活像亮丽黄一样靓丽而多彩，像灰一样静谧而不失优雅。

为什么ui要有一致性设计

大家有没有听说过一次性设计

一次性设计就是，我今天投入成本完成了一个界面或者营销需求，但也只是完成了这个需求而已，今后再碰到类似的需求依然吃瘪，还得重新投入一轮成本。这种设计就好像一次性的碗筷，用后即扔，非常非常得低效，它不仅没有办法复用，而且无体系、非模块的处理方式非常摧残设计师的精力。

所以保持一致性设计也是可以提升操作的一致性、提高工作效率、延续品牌定位……而且一致性设计是UI和开发交接的一种很好的办法。

一致性设计的好处

对于开发团队而言

1.复用资源，降低设计成本

很多不同的界面中会用到同一个资源，如果见一个重做一个，会很大程度浪费设计的人力资源

2.产品风格及体验不易出问题

因为资源的复用，能基本保证整个产品的风格不跑偏，而在用户体验上，也起码能保持在一贯的水准

3.新人可以快速上手

比较大型的项目中如果人员流动率较高，一致性就相当有必要了。新人先阅读规范后更容易展开工作，根据一致性也能更快了解当前产品

4.程序能提高开发速度

主要也是因为能够复用自用资源，有些界面和控件，程序甚至无需找设计出资源，在产品策划指导下可直接开发

对于用户而言

1.对界面和功能操作的认知统一，学习成本低

熟悉过主要界面/功能后，在其他界面/功能中能基本自由操作

比如在北京开车是靠右行驶，到上海你不用学就知道也是这样。因为中国道路交通相关法律中对此是做了统一规范的。要是这一点不一致的话，到上海突然让你靠左行驶，你肯定要适应一段时间并难免犯错.....

2.提高操作效率

在降低了认知成本后，用户很容易就熟悉了产品的设计风格，那么操作起来自然也更容易上手，效率也更高

3.加强对产品（品牌）辨识度

别人一看很容易辨识出：哦，这是某某等那个产品

常见的产品中保持一致性设计的例子非常多，相信各位天天见，我就不啰嗦了。

一致性的规范提现在哪里

什么是设计规范？

设计规范是一个老生常谈的话题了，网上相关的文章也非常多，但我相信有很多设计师对设计规范的理解还是比较模糊，认为设计规范指的就是字体，颜色，控件规范那些，这种理解其实是比较狭隘的。

于我而言，设计规范用一句话总结就是：设计规范是针对特定产品所制定出来的一整套产品标准，包括流程标准，技术标准，设计规则等等。

今天就只来说最基础的几个小方面（也算是干货满满了）

• 颜色

• 字体

• 组件

• 交互

其他的一些需要大家根据自己的产品定义

颜色

颜色的搭配和选择影响着产品最后呈现出来的视觉效果，合理的颜色配比能加深用户对品牌的印象。色彩无处不在。

那我们如何去定义颜色规范呢，下面本人分享一套规范，小伙伴们可以根据自己的产品进行套用（如果不对大佬勿喷，一起学习）

1.定义基本的颜色

首先要定义基本色。理想情况下应该有1-3个基本色与产品相关联。

基本颜色的使用场景主要是

• 突出显示重要的界面状态或信息

• 在交互方面：如文本字段切换、复选框等

• 提供视觉反馈，如新的消息等

2.60%30%10%配色原则

根据数据反馈60%+30%+10%是是整体画面最有平衡感，也是用户最满意的方案引导用户的视线从一个CTA区域平滑移动到另一个区域。

如图

按其他顺序搭配，它仍然有效

3.了解受众

好的用户体验的关键是理解受众。颜色在这里起着重要的作用，因为颜色的选择会影响用户与产品交互时的感受和情绪。

• 你需要考虑的问题

• 谁是你的目标受众？

• 他们的年龄？

• 产品的专业化是什么？

• 你想让产品唤起什么样的情感？

注意：与团队讨论选择时，请始终关注这些问题。

4.色重对比

如果你想把用户的注意力集中在特定的操作上，最好使用强对比度的颜色来帮助用户找到焦点。

通过这种小技巧检查颜色的饱和度，能看到别人看不见的东西。

5.命名方式

另外分享一些将图像生成调色板的实用工具：

• Coolors.co/image-picker（Web app）

• Alembic(Sketch插件)

• Image-Palette(Figma插件)

  
  

字体

在项目中文案风格也要和产品定位统一，各个界面出现的文字提示等要风格统一。

主要从五个方面入手

• 类型

• 字号

• 字重

• 行高

• 行宽

类型

iOS设备的系统默认字体，中文为苹方，英文&数字为SF UI Text。

Android设备系统默认字体，中文为思源黑体，英文&数字为Roboto。

字号

不同的使用场景，文字的字号也不相同。文字的主使用场景分为：一级标题、二级标题、三级标题、正文和提示文字 。

通常最小字号为12px也有文字最小字号为11px的，特殊情况下，字号为10甚至可能更小，例如标签里面的文字。

字重

字重就是指字体笔画的粗细。字重的等级是用来标明同一字体家族中不同粗细笔画的字型。

UI设计中，常用的字重有两个，一个是常规（Regular），另一个是中黑体（ Medium）。

正常文字使用常规体（Regular）。当需要突出层级展示，增加对比时使用中黑体（ Medium），中黑体（ Medium）常用于标题。

行高

字号大小等于文字高度，如下图所示，字号为16时，行高设置为16，那么其行高也是字体本身的高度（16pt）。

如下图所示：行间距距离文字上方为3pt，行间距距离文字下方也为3pt。字体高度为16pt。

举个例子，设计一个标签时，当字号为14时，行高为20，那么为了保持视觉上字体到四周距离相同，那么上下间距为4，左右间距为8。

因为行间距的存在，不能将上下间距和左右间距设置相同。

如果行高设置为14（文字本身大小），那么上下间距应该也为8pt，而非4pt。

下图是Sketch默认字号和行高对照表

行宽

行宽=字体宽度+两侧距离字体的宽度

将行宽拉长，代表着设置了文本内容范围，文本距离右侧语音图标为12pt，表示当文字内容距离语音图标12pt时，文字打点或截断展示。

组件

组件的使用场景有很多今天借一个例子来分析和总结，让大家了解和认识组件的使用和规范。

那就来个最基本的：顶部栏设计

• 组成

• 变化

• 交互方式

来认识组件的模式和规则

顶部栏的常见样式

顶部栏是什么样子，它由什么组成？

通常，顶部栏提供有关此页面总体的信息，以及用户可能对该页面进行的潜在操作。常见的顶部栏如下所示：

顶部栏中常见的组件包括：标题、容器、操作项、导航图标等，接下来为大家逐一介绍各个组件的使用。

顶部标题通常与底部导航一起使用，共同解释页面的信息。

如果一个页面中底部导航只有图标没有文字解释，用户有可能不了解图标的意思，那么解释页面信息的重任就落在了顶部栏的标题上。

大多数情况下，标题位于顶部栏的中间，有时也会在左上角有一个很大的标题作为导航（IOS应用中）。除了解释页面的目的，大标题还可以用于品牌推广。

标题也可以解释用户在这个页面上执行的操作。例如，当用户想修改个人资料时，标题会显示“edit profile”，用来解释操作。

有时，在顶部栏主标题的下方会有补充文本，这样方便为用户提供更多的信息。

容器的趋势越来越不明显。容器通常是灰色或者不饱和的颜色，有时容器也会使用品牌主题色，起到宣传和推广品牌的作用。

操作项通常以图标和文本按钮的形式出现在顶栏上 ，当需要时可以在顶栏上显示0-4个图标或文本按钮。

在不同的页面中操作项可能代表不同的含义，但一些常见的图标/操作遵循着一定的规则：

1、返回：当用户进入第二/第三层级页面时，“返回”通常出现在左上角。单击“返回”图标可引导用户回到原始页面。

2、关闭或取消的位置不固定，可以在左侧也可以在右侧，具体取决于是否有其他操作。

这里讨论一个常见的问题，顶部栏中“返回”和“关闭”分别应该在什么情况下使用：使用“返回”：当用户在一个漫长的探索过程中需要不止一步的操作，或者在该页面上没有一个简短而明确的目的时。使用“关闭”：表示一个完整的单页操作，它有明确的起点和终点，在页面上执行特定的操作实现特定的目的。

3、个人资料或帐户有时会出现在顶部栏上，以方便用户编辑个人信息，设置或切换帐户。

4、添加或搜索可帮助用户浏览更多内容或者扩展他们感兴趣的区域，通常出现在右上角作为易触摸的目标。

需要注意的一点是，为了避免引起不必要的关注，顶部栏上的图标/文本按钮通常是线性图标而不是填充图标，并且是非饱和颜色。除非它们确实想吸引用户的注意，或者为了提示用户进行操作。

搜索顶部栏 

使用App时我们会发现，有的页面顶部栏中没有标题，而是增加了一个搜索框(淘宝首页)。

根据特定的需要，可以将搜索用在不同页面的顶栏上，因为它在用户浏览内容时为用户提供了更多的价值。

什么时候放弃使用顶部栏？

当顶部有很多内容时，一些App会让顶部栏变得非常简单甚至完全舍弃。

在Robinhood顶部显示最重要的用户信息——每日投资增长，右上角只有一个提示文本按钮，用来邀请好友。

放弃使用顶部栏的常见案例是个人资料页面。这样做的目的是自我暗示，这个页面自己可以掌控，个人信息在顶部占据了很大的空间。

顶部栏的交互模式

一个页面中可以有很多交互发生，有时顶部栏需要通过改变样式或内容来反映交互动作。

反映滑动位置 

下滑出现顶部栏:当顶部栏有许多重要信息但又占用大量空间的情况下，顶栏的内容可能会根据滚动位置而变化。当用户下拉页面以获取更多内容时顶部栏会出现。

下滑隐藏上拉出现:另一种形式是在Google搜索中，用户向下滑动顶部搜索框会隐藏(Google猜测用户希望集中精力浏览内容)，但是只要用户向上滑动，中止浏览过程，顶栏搜索框又会出现。

不管交互形式如何，这类顶部栏能在用户需要时快速显示：

• 用户可以进行搜索功能或常见操作；

• 标题/重要信息作为参考，提醒用户在哪个页面。

下滑隐藏顶部栏:对于那些不会影响用户需求和操作求的顶部栏，通常会随着页面的向下滑动而隐藏。

星巴克顶部有一个令人愉快的问候语，当用户向下滑动并尝试选择要喝哪种咖啡时，它会随着页面滑动而消失。

Airbnb会在顶部展示房屋图片，以便给用户留下深刻印象，但是当用户向下滑动时，顶部的图片也会跟着滑动。

反映当前页面的变化 

有时，顶部栏的信息会根据内容的变化而实时发生改变。

最常见的案例是收到消息时的反馈：在微信中，顶部标题会显示用户收到信息数量的变化；Instagram通过顶部小红点的变化来展示收到的消息。

交互式顶部栏

作为页面中必不可少的一部分，交互式顶栏减轻了页面中其它元素的负担。除了常见的图标或文本按钮(添加、取消、后退)的变化，在顶部栏中还会发生哪些有趣的交互？

互动标题 

有的产品服务非常依赖于用户的偏好、位置，例如常见的外卖或打车软件。

在这种情况下，App通常依靠用户的初始输入来决定显示的内容，用户也可以直接在顶栏标题上编辑信息。

交互式图标/文本按钮 交互式图标/文本按钮意味着用户可以在顶部栏上执行某些操作，而不必离开此页面。在robinhood中用户可以在不用切换页面的情况下，直接选择购买股票要用的计算方法，或者把页面上的股票添加到自己的收藏中。

顶部导航 

有的App希望在一个页面中能显示多个平行的内容，所以会在顶部栏上设置多个选项，实现更方便的导航。

常见的顶部导航包括分段控件和标签导航:

分段控件导航选项一般不支持左右滑动,选项较少，；标签导航选项的设计更多样，支持左右滑动切换。

https://www.xueui.cn/experience/app-experience/top-bar-ui-design-patterns-and-rules.html

研究过程可能会花费很多的时间和精力，却能让我们真正受益。

总结

一致性设计大方向为产品有更杰出的体验，在保证用户体验良好的同时，我们需要与同类产品做出差异化竞争设计，这就需要我们平时多观察互联网设计趋势，国外设计趋势，集合自己品牌去打造一套好用的产品。

这里推荐几个必看的大厂设计规范官网，建议收藏。

苹果iOS设计官网：https://developer.apple.com/design/human-interface-guidelines

谷歌Material Design设计官网：https://material.io/design

微软Fluent Design System设计官网：https://www.microsoft.com/design/fluent

IBM设计官网：https://www.ibm.com/design/language

Facebook设计官网：https://design.facebook.com

蚂蚁金服设计官网：https://ant.design/index-cn

其实，规范也是要在遵守和引领用户习惯中不断迭代的。既要保持大的设计规范框架不变化，又要在设计的过程中给用户制造惊喜。比如，整个UI的配色和字体需要保持统一，但在一些图形，动效上可以做出亮点，让用户在整个使用体验中既是沉浸的又能有些小惊喜。规范的打破与重建一定是需要一个动态平衡的过程。

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

作为一名UI设计师，图标设计是我们刚入门就必须学会的必备技能之一，它是用户界面中绝对不可或缺的元素。通常我们理解图标设计的含义，是将某个概念转换成清晰易读的图形，从而降低用户的理解成本，提升界面的美观度。随着扁平化设计风格的普及，图标的风格越来越简约，看似简单的图形，实际要准确的表达含义，也是需要注意很多细节的，在如今大同小异的图标中，如何让你设计出的图标具有说服力也是一门学问，今天就给大家全面的剖析一下图标的知识，让你做出的图标有理有据。

目录

1、图标的定义及分类

2、图标的设计规范

3、图标的性格走向

4、图标的评判标准

5、总结

一、图标的定义及分类

1、图标的定义

图标是具有高度概括性的、用于视觉信息传达的图像。图标常常可以传达出丰富的信息，并且常常和词汇、文本搭配相互搭配使用，两者互相支撑，或隐晦或直白地共同传递出其中所包含的意义、特征、内容和信息。

在数字设计领域，图标作为网页或者UI界面中的象形图和表意文字而存在，是确保界面可用性的基础设施，也是达成人机交互这一目标的有效途径。

2、图标类型（基于功能划分）

2-1释意性图标：

释意性图标是用来解释和阐明特定功能或者内容类别的视觉标记。它并不是一定被点击可交互的UI元素，在很多时候只是有辅助解释其含义的文案。在不搭配文本的情况下用户会借助这些图标来获取信息。不过有时候图标表达的含义可能还不够完整或者清晰，所以会将图标和文案搭配起来一起使用，这样可以大大降低误读的可能性，释意性图标一共可以分为以下三类：

2-1-1纯图标：

例如火球买手APP中的店家“特定标签”，以及图文展示下的“观看数量图标”与“收藏图标”，它们并不需要用文字去解释，用户也知道它表达的是什么。

2-1-2图文结合：

例如造作APP中的“购物车图标”与“收货地址图标”，为了让用户能够很好的明白图标的意图，所以在图标下方会配有文字提示，这样就能大大的降低误读的可能性。

2-1-3纯图标（图标内含文字）：

例如开眼APP中视频封面左上角“开眼精选图标”，它把图标与重要文字结合在一起展示给用户，看起来不仅十分具有个性，而且用户对其理解性也非常强。

2-2交互性图标：

交互图标的最大意义在于可以引导用户进行交互行为，是在产品中不可或缺的组成部分。它们可以在用户不同的操作手势下帮助用户执行不同的交互过程，这种类型图标也是APP中最常见的，常见的交互性图标如：搜索、底部标签、返回、点赞、收藏、扫一扫等。

2-3装饰性图标：

装饰性图标仅仅是用来提升整个界面的视觉体验，它并不具备任何功能性。这类图标往往是为了迎合用户的偏好与期望，通过丰富视觉体验的方法来增加内容的观赏性，这样不仅可以吸引并留住用户，还可以让整个用户体验更加积极，最为大家所熟悉的就是滴滴出行APP中的“小车图标”。

3、图标类型（基于基础样式+表现手法）

图标基于基础样式（线、面、线面结合）+表现手法（颜色、透明度、投影、叠加...）划分，一共可以分为20种类型，每种类型的展示方式也都各有不同。

3-1线性图标（6种）

线性图标通过线来塑造轮廓，在界面中App的图标尺寸并不大，所以如果线过于复杂，在小面积中过多的线会对识别性产生较大的困扰。在图标设计中使用的线有粗细之分，常用的App图标设计线的粗细一般有2PX或者3PX，不同的线条粗细所带来的视觉感受也不同，细线显得精致，粗线视觉面积大，显得厚重。

3-2面性图标（6种）

面性图标是通过面来塑造形体的图标，采用了剪影的设计形式，通过线或者面去切割基础轮廓面，通过分型来塑造图标的体积感。不同的切割手法造成了面性图标设计感的差别。

3-3线面结合图标（6种）

线面结合图标相较单一的线性图标或单一的面性图标样式更加丰富、也更富有趣味性。从设计的角度上说，由于元素的多样化，设计更容易获得好的效果。相反，如果运用不当会显得图标非常杂乱，如何有效的把控好两者之间的过度是关键。

3-4拟物化图标

这类图标的特点是通过细节和光影还原现实物品的造型和质感，能给用户极强的代入感，用户可通过对现实事物的联想，快速领会图标表达的意图。但是随着 ICON 的发展，拟物图标也带来了一些问题，因为用户关注的核心永远都是信息本身，华丽的视觉元素或许在用户使用的初期，起到赏心悦目的装饰，但久而久之，这都将成为对用户获取信息的一种干扰，所以现在拟物化的图标很少运用在APP界面之内。

3-5轻质感图标

相较于拟物风格不会有太多复杂的视觉元素，层次简单，用色素雅干净，采用轻投影、轻渐变的方法设计，这类图标具有一定的立体感，能给人轻盈、简洁、精致的感觉，在界面设计中，一般在面积比较大的区域我们会使用加入轻质感的图标。

二、图标设计规范

合理的遵循图标规范可以有利于设计师之间合作使用，指导设计师如何规范的去设计图标，以确保企业所有产品图标风格的一致性和可用性达到统一，同时也是为了后续产品更新迭代有可参考的地方。

1、图标尺寸

为了保证图标的尺寸大小一致性，我们往往会建立基础的网格尺寸来进行绘制图标，常用的网格绘制尺寸为：16、24、36、48、64、128、512、1024。这些尺寸并不是固定的，在设计中也会存在特殊的尺寸，例如谷歌在台式机上设计图标，当鼠标和键盘是主要输入方法时，就会使用密集布局，基础网格就会缩小到20。

下面就以常用的24x24为大家展示：

网格包含2px出血位。这样可以确保图标在导出时将保留其所需的比例和周围的空白区域，同时还能够很好的平衡图标的视觉重心。

*在使用常规图标时避免一部分在出血位。

*在使用多个元素的图标时，避免图标拥挤我们可以让其部分出现在出血位，确保它们之间有足够的空间。

2、图标的keyline

keyline由圆形，正方形，矩形，正交，三角形和对角线组成。它可以为您提供图标集中基本形状或比例的一致大小。这使创建视觉上的稳定变得更加容易，并有助于在设计相似比例的图标时有共同的参考准则。

在24尺寸下的keyline构成如下（24尺寸下的出血区域为2）：

当把图标画在网格上时可以很好的规范图标，让它们从整体的视觉上看着统一规范。

3、像素

3-1像素统一

在设计一整套系统化的图标时，我们一定要注意图标的像素大小，要运用相同的网格尺寸设计相同线条粗细的图标，包括曲线，角度以及内部和外部笔划。这样图标看起来才更统一，也有利于后期图标的迭代更新。

当然，描边像素的粗细并不是绝对的，如果我们要做一些密集型的图标时，可以考虑适当的缩小线的像素大小。如下，我们设定的系统图标线条粗细为3px，当你用3px作用于指纹图标上时就会显得非常拥挤，并且在视觉上比其余图标更重，这时我们就可以把它的线条像素降级，设定为2px。

3-2避免小数位

我们在用矢量工具绘制图标时，要仔细看好图标的网格尺寸和图标结构尺寸，避免产生小数位。

4、图标的曲率

曲率简单来讲就是图标中带有圆角的边角度数，只要是带有圆角的矩形就都会有一定的曲率。在图标中曲率的呈现方式有两种：外曲、内曲。

外曲与内曲并不一定同时存在，在特定情况下内部结构可以是直角（无曲率）。如下图：当内部结构都是圆角时会发现整个图标稍显臃肿，这时我们可以把部分内部圆角直接变为直角（也可以改变曲率大小），改变后就会发现图标的整体结构会显得更加协调。需要注意的是如果一个图标做了这样的处理，在同等情况下的图标都要做一样的处理，不然图标会显得非常杂乱，不统一。

5、倾斜角度

根据像素的网格线来设置两条对角线，会让你的图标看起来更清晰。在倾斜的角度选择上，不要出现7.8°、14.2°这样的奇怪数值。我们可以将15°的增量用于倾斜角度（也可以采用其他有规律的角度方案），这样会使得整体的图形变化显得更加规律，也能够满足不同图形的角度需求。

6、断点形态

在做很多图标时都会用断点的缺口来打破“全包边图标”的沉闷感，使图标具有透气性，如果想给图标添加断点，那么要保证断点的形态保持一致。

7、图标间距

确保图标内每个细节和元素都有足够的空间，图标的相邻元素之间的空间在整个图标中不应太小，我们可以定义最小间隙以避免轮廓“粘住”，在24px尺寸下的间距不得小于1px。

8、透视

如果在做图标时牵涉到了透视需求，那么就一定要保证图标的透视角度一致。

9、视觉重心

非中心对称图形物理对齐时视觉上会有偏离感，多个不同形状的图标视觉重心并不在一条水平线上，需要微调才能保证平衡感。

10、图形整洁

在图形的处理上，不要留有多余的节点，干掉多余的节点，保持图形的整洁。

11、命名

ICON命名要求较为严格，涉及到我们切图给开发，所以我们命名争取做对，且需严格遵守规则，正确的命名原则：类型_位置_功能_状态_大小

三、图标的性格走向

每个App应该有自己独特的产品气质，同样图标性格也应当与产品气质保持一致。图标性格一共分为了4个走向：粗旷（粗直）、活泼（粗圆）、商务（细直）、精致（细圆）。

1、粗旷类图标

图标结构特点：线条较粗（或面性图标、线面结合图标）、拐角为直角。

粗旷类图标让人看起来非常饱满、刚正，它更多适用于男性、潮流、有格调类型等产品中。例如VSCO，它的底部标签栏图标全部采用了粗线条的直角设计。

2、活泼类图标

图标结构特点：线条较粗（或面性图标、线面结合图标）、拐角为圆角。

活泼类图标让人看起来十分容易接近，能让人感受到温暖、舒适，它更多适用于电商、社交、母婴、二次元、娱乐、直播、美食等产品中。例如闲鱼，不管是在LOGO字体的处理还是APP内部的图标处理，都是采用了线条较粗的圆角设计。

3、商务类图标

图标结构特点：线条较细、拐角为直角。

商务类图标让人看起来十分规矩、严谨、值得信赖，它更多适用于新闻、政府、商务、工具等产品中。例如工具类的思维导图APP，它的可操作按钮都是商务类的图标。因为这类图标的特性，所以目前我们很少在移动端上看到它，它更多适用于PC端的后台界面中。

4、精致类图标

图标结构特点：线条较细、拐角为圆角。

精致类图标让人看起来非常干净、柔和、显得高级感，它更多适用于旅游、品、艺术、领域垂直等产品中。例如airbnb，在APP应用中大部分都采用了精致类图标。

四、图标的评判标准

当图标设计完后，我们应该如何去评判一个图标的好坏？很多设计师并没有完整的评判体系，其实我们可以从这五个维度对图标进行评判：识别性、图标气质、协调性、一致性、品牌调性。

1、识别性

图标最主要的用途就是辅助用户理解信息，特别是对于当图标单独存在时，一定不能让用户产生疑虑。要想图标达到高识别，我们可以从这2个方向入手：大众认知隐喻、真实世界映射。

1-1 大众认知隐喻

在互联网普及的今天，许多界面的隐喻图标已被广大用户熟知认可，对于这类隐喻图标用户不用思考身体就已做出反应，我们在设计图标时可以从隐喻图标中添加修改部分元素，从而形成新的图标，这样既能保证图标的识别性，也能做出差异化。

1-2 真实世界映射

选择真实世界中的物品映射，能使人下意识对图标的作用有近似预期，降低学习成本，提高识别度。

2、图标气质

每个App应该有自己独特的产品气质，而我们所做的图标就是要跟随产品的气质。例如当你要做一款二次元产品，你的图标气质就应该偏活泼、可爱、萌、青春，而不是刚硬、严谨、规矩。

3、一致性

一致性是图标的基础，我们在绘制整套图标时要确保它们的基础属性全部一致，细节统一，图标内容的统一在视觉上也更加和谐美观。图标是否具有一致性，就要从以下七个方向去评判：尺寸大小、图形角度、拐角（曲率）、描边、间距、透视、颜色。

3-1 尺寸大小：网格大小是否统一、是否遵守图标的keyline规则。

3-2 图形角度：是否遵循设定的角度规范（15°的增量用于倾斜角度）

3-3 拐角（曲率）：拐角的曲率是否统一，如果图形太多且复杂，那么我们可以根据图标的特性去设定曲率的规则，例如可以设定当边角像素在1-2px时内外曲率为2px；当边角像素在3px时内外曲为2px，内曲为1px；当边角像素大于或等于4px时，外曲为2px，内部则为直角。

3-4 描边：描边大小是否一致。

3-5 间距：是否遵守间距规范。

3-6 透视：透视是否一致，避免在同一套图标中出现正视图/侧视图混杂的情况。

3-7颜色：在图标的配色上要保持一致的规律，采用相同的颜色是比较常见的配色方式。如果采用不同色相的配色方式。也需要保持整体的配色协调，避免出现饱和度、明度反差过大的配色。

4、协调性

一致性代表的是图标的基础，而协调性则代表图标的整体状态，协调性的呈现状态是验证一致性是否合理的标准，当协调性存在问题时，我们就要反过来查看一致性存在的误区并给予修改。在图标的协调性上我们主要审视这三点：视觉大小、饱满度、透析感。

4-1 视觉大小

视觉大小对标的是一致性的尺寸大小与描边大小，当你发现图标视觉大小不对等时，你就要回过去查看你的网格与keyline是否运用正确，确保正确后再查看你的图标是否按照keyline的规范绘制以及描边大小是否一致。（同样尺寸下的图标，从光感上来看描边粗的图标视觉偏大）

4-2 饱满度

饱满度对标的一致性的间距，当你发现图标不够饱满时，你就要去查看你设定的间距值是否偏大，是否合理。

4-3 透析感

透析感简单来说就是留白区域。透析感对标的也是一致性的间距，当元素的描边过大时，我们就要合理的设定间距的最小值，不然整个图标就显得非常臃肿。

5、品牌调性

品牌调性是我们经常提到的纬度，我们打开很多APP都会发现他们的图标设计都非常普通，没有任何特色，过于大众化，虽然都做了一些形式上的改变，但总是与品牌缺乏联动性。其实我们可以结合品牌调性，在图标上做更多的联动、创新。

5-1品牌颜色

色彩是图标设计中重要的构成元素之一，我们可以直接提取品牌色作为图标设计视觉元素。例如站酷，站酷的品牌色是黄色，标签栏的图标（选中状态）就提取了品牌的黄色，让其与品牌调性高度一致。

当然品牌颜色除了可以直接用外，还可以在提取时适当调整色彩的饱和度、明度，做更多的形式变化。例如懂车帝，就在原有的黄色基础上做了些许调整，图标采用黄色透明渐变的处理方式，在与品牌颜色呼应的同时，使得整个图标更加精致、有活力。

5-2品牌LOGO

提取品牌LOGO是最常用的使用方式，我们从品牌中提取出来的图标一般运用在APP首页标签。因为首页是APP中最重要的页面，也是进入APP默认的页面，把首页图标替换成品牌LOGO，能反复加强了用户对App的logo印象，这样不但使App内外形成了视觉联系，同时也二次传递了品牌形象。例如大众点评，它的首页标签就用了品牌LOGO。

5-3品牌元素

我们可以在品牌中提取它识别性较强的局部元素作为图标。例如虎牙直播，它就提取了品牌卡通形象的外轮廓作为首页图标。

品牌提取的元素并不只是所见到的品牌视觉形象，还可以提取与品牌内容强相关的元素。例如QQ音乐，就把音符作为首页图标。

5-4品牌名称

如果你的品牌还不为大众所熟知，那么为了强化用户对品牌名称的认知，可以把品牌名称直接放入标签栏中。例如MONO，就把它的名称分为四个字母分别放在了4个标签内，需要注意的是这类图标不能单独出现，因为它本身不具备引导含义，必须配合文字一起出现，这样才能让用户能易理解。

5-5品牌性格

图标风格可以与品牌性格保持一致，一套带有浓厚品牌感的图标，会让人记忆犹新。例如：每日故宫，它的图标就非常具有特色，结合了品牌的性格以及定位，加入了众多的古代中国元素，整体看起来有股浓浓的古韵之风。

5-6吉祥物 

如果品牌中含有吉祥物，我们可以提取吉祥物的外形，把它用于产品的图标中。例如盒马，它就把盒马的吉祥物做了风格化的处理，放于APP的首页标签。

五、总结

设计师对自己做出的所有设计都必须要有理论支撑，图标也不例外，一套优秀的图标是设计师不断沉淀的结果。看完本文章后，如果大家想要去练习图标，建议找大厂的图标放在keyline里临摹，真的会让你收获不少。

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

全文阅读约 5 分钟， 主要分享 Ant Design 在页面信息组织策略上的探索思路。

人们是如何组织信息的？

在 Ant Design 的界面设计中，会包含大量的信息组织和编排工作，我们常常会遇到这样的问题：

·     一个详情页面里应该包含哪些信息？

·     什么样的信息应该放在卡片里，什么样的信息应该平铺显示？

·     一个页面内的信息该怎么让用户快速找到重点？

·     ···

信息组织是我们在日常生活中经常会遇到的问题，商场里的楼层导航、机场车站的标志指引、餐桌上的菜单、手机里的通讯录等等，各式各样的信息是如何被组织编排到一起，又是以何种方式把信息呈现给用户呢？

在解答这些关于页面设计的问题之前，我想先给大家讲一个生活中的小案例：

动线设计

逛过宜家的人，应该会注意到宜家类似迷宫的动线设计，这种动线设计能够让消费者不知不觉逛完商场的各个角落。踏入宜家门口时，就会被一条隐形“向导”默默地引导着向前走：一条曲折宛转的主线依次引导至客厅家具、客厅储物室、卧室、书房等各个主区域，直到一个不落地走完才抵达出口。但在这个主线之外，为了确保一些消费者在购物中，能够快速离开或快速去往感兴趣的区域，每个主区域间都有一些较隐蔽的捷径作为辅动线。

这种动线设计一方面能够把所有商品按照路径有效的串联起来，另一方面又能让消费者不知不觉的沿着这个路径去了解商品。

商品布局

动线布局是宜家的隐形骨架，而真正让宜家卖场丰富起来的，还是琳琅满目的商品。宜家的卖场和大部分零售卖场不一样，它不会把同类型产品进行大集合，而是根据人们的正常生活场景来分类，不同类型的产品在同一区域组合陈设，构成生活中的一个小场景，一方面能达到对各个商品功能的完美诠释，另一方面，一个产品尽量不会重复出现，尽可能减少商品展示的复杂性。

在整体商品布局上，有两个很有意思的地方：第一，在居家体验中心，样板间的陈列顺序完全是按照消费者回家后的场景而布置：客厅、餐厅、厨房、书房、卧室、卫生间......，第二，在家居用品中心，则会根据消费者在家的日常起居行为进行摆放：做饭、休息、读书、收纳......

现实生活中的这些例子，对我们的界面信息组织有什么启发呢？

关于动线和布局的思考

在宜家的案例中，关于动线，映射到人的行为上，有一个比较专业的概念叫做“流”（flow）。 Mihaly Csikszentmihalyi 的著作《心流：最优体验心理学》中对“流”的定义：当人们全身心投入到某个活动中时，会对周边干扰视而不见，这种状态被称为“流”。宜家的动线设计很好的营造了这种状态，让消费者完全沉浸于商品浏览，并且尽量不去打断这种行为流。

经过研究发现，构成“流”的行为动作，其前后必然存在某种连续性或者关联性，例如回家的行为动线，日常起居的行为关联等。这个概念在界面设计中依然适用，很多界面设计都在有意无意的去创造“流”的状态，带给你用户沉浸式体验，例如各类短视频应用会根据用户浏览习惯推荐相关联的视频内容，让用户沉浸其中无法自拔。

关于商品布局，映射到信息组织上，《韦氏大词典》 中提到一个词“编配”（orchestration），对应的解释为“和谐的组织”。这个词能比较好的表达信息组织的含义，宜家的商品和谐的组织构成一个场景，它向消费者传递的不仅仅是商品本身的功用性，更是在传递一种搭配建议或者一种生活方式。这种商品组织方式能非常有效的降低消费者对信息筛选的复杂程度。而在界面设计上，表单页的和谐组织能够帮助用户快速完成信息录入，详情页的和谐组织能够帮助用户快速理解一个描述对象......

各种各样的信息总能以某种关系组织到一起，而如何根据这种流为用户去组织和呈现信息呢？

“流”的本质其实是一系列具有关联性的行为动作串联，而“编配”的目的则是为了降低串联信息呈现的复杂程度。有了这两个基础的概念之后，我们可以做一个初步假定：所有的信息是否都可以通过关联性和复杂度来进行组织编排？针对着这两个维度，我们又进行了更深层次的研究和验证，并得到基本定义：

·     信息复杂度：信息量的大小，包括种类、数量等。

·     信息关联性：信息之间的潜在关联或者相互影响。

我们设想，这两个维度能否运用到界面设计上的信息组织呢？

页面信息的组织方式

信息关联性

界面信息之间的潜在关联或者相互影响，通常体现在「逻辑关联」和「视觉关联」两个层面。

逻辑关联

顾名思义是指一个事件中的所有信息之间的关系，在界面设计中，无论什么样的信息，总能以某种方式进行分类和编排在一起，例如手机通讯录中的人名，可以按照字母顺序从 a 到 z 进行排列，电商网站的商品导航会根据类别进行分组，待办事项可以根据时间进行排序等。

如何找出信息之间的逻辑关联性呢？

被称之为信息架构之父的 Richard saul wurman 在《信息焦虑》一书中将信息组织方式用“五顶帽架”来概括：

·     地点（Location）

·     字母（Alphabet）

·     时间（Time）

·     类别（Category）

·     层级（Hierarchy）

简称LATCH。这五种方式基本可以涵盖所有的信息组织策略，信息是无限的，但是信息组织方式却是有限的。

视觉关联

任何一个界面呈现给用户的时候，用户都会下意识的去判断界面上什么信息是最重要的，接着会去关注这些信息都有什么关联，因此，除了按照逻辑去组织信息之外，还应该合理的去呈现信息的视觉层级关系。

视觉层级关系有几种常见的区分方式：

·     强调：使用基本视觉元素（颜色、形状、大小等）区分层级

·     亲密性：位置接近的元素通常是有关系的，而且位置越近，关系越强

·     图胜于言：视觉符号和对象关联，例如：齿轮或扳手=设置，垃圾桶=删除

·     浏览顺序：根据浏览顺序，从左到右（部分地区）或从上到下信息重要程度依次减弱

·     ···

如何验证界面元素的视觉关联性是否合理呢？

眯眼测试

《About Face 4: 交互设计精髓》 中提到了一个很有意思的测试，为了确保界面视觉信息有效的拉开层次关系，图形设计师经常会用到一个方法“眯眼测试”（squint test）。闭上一只眼睛，眯着另外一只眼睛看屏幕，看看哪些元素突出，哪些元素模糊，哪些元素看上去成组，哪些元素看上去零散。从多个角度去观察，总能够发现之前没有注意到的布局和构成问题。

信息复杂度

通常以信息量的大小或样式多少来衡量，这两个维度实际决定了信息的浏览时长。例如一个详情页面内都是纯文本信息，但是信息量较大（超过三屏），则认为这个页面的复杂度较高，或者一个详情页面内同时包括文本、表格、代码展示、图表等元素，也会认为这个页面的复杂度较高。

信息的复杂度和关联性并不是两个完全独立的维度，根据关联性去组织信息，本身就是为了降低信息呈现出的复杂程度。而对复杂度的研究，可以帮助我们如何选择合适的方式把信息呈现给用户。

页面信息组织实践 - 详情页设计

具体到界面设计层面，信息体量大、复杂度高常常是中后台界面设计的难题之一。以详情页为例，详情页内的信息该如何合理的组织信息并有效的传达给用户呢？

根据关联性和复杂度的概念，我们抽象出一个简单的「复杂度模型」，用来判断信息复杂程度和关联性对页面结构的影响。

横坐标表示页面信息之间的关联性，纵坐标表示信息的复杂程度，两者交叉组成的色块代表不同的信息等级。靠近原点最浅的色块，代表复杂程度低且关联性强的内容，例如一段纯文本的产品描述信息；远离原点颜色最深的色块，代表复杂程度高且相互独立的信息，例如一个发布流程中的集成测、预发环境测试、灰度测试、上线等各个阶段信息展示。

与之对应的，我们对信息展示方式也进行了维度划分，用来解决在复杂的企业级产品界面设计中，何时使用卡片区分，何时拆分为 tab 等布局问题。

根据承载信息复杂程度的不同，我们对容器组件也进行复杂度划分，用来解决在不同页面布局中，不同类型的信息用何种方式呈现的问题。

这个模型可以帮助设计者在决策布局组件时，有章可循。最终让用户感知，当用户来到一个页面时，即可对页面的信息量、信息的搜寻方式有统一的预期。我们尝试将复杂度和关联性模型在界面布局中落地：

关于以上的模型在实际设计中该如何操作，这里提供一个推荐步骤可以参考：

·     「复杂度判断」明确设计对象信息量的大小

·     「关联性判断」判断各个信息之间的关联性，并合理分组

·     「组件选择」选择合适的容器组件来呈现信息

·     「模板选择」选择合适的页面模板，组织编排信息

·     「眯眼测试」检查整体布局是否合理（仅参考）

文章来源：站酷   作者：Ant_Design

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

转自：站酷

作者：杜失忆

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

收藏

收藏

收藏

收藏

收藏

转自：站酷

作者：673052665

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