降本增效一直是为B端赋能的首要宗旨，那么我们该如何从设设层面为用户提高表单录入的效率呢？

文章来源：UI中国     作者：AI-玲玲

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

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

为什么要建立Banner组件库

在互联网公司中，运营Banner往往是由不同的运营团队去完成，甚至在一些跨国企业，运营Banner是由不同国家的运营团队完成的。那么如何保证大家输出的运营Banner在保证视觉冲击力的同时，还能输出以及体现统一的设计语言呢？甚至不用设计师也能轻松替换Banner组件？想要解决这种难题的最好方法就是设计Banner组件库，Banner组件库的四大优点能够完美解决以上的问题。

Banner组件库的类别

根据设计师个人及每个公司业务的不同需求，我一共把Banner组件库分为两大类别：

1. 设计师及设计团队操作的Banner组件库：

这类组件库面向的操作人群是设计师，仅有设计师才对其有操作权限：

案例部分效果演示：

2. 非设计师操作的Banner组件库：

这类组件库面向的操作人群是非设计师人员（运营、销售、子公司员工等），是设计师根据运营的需求特制的Banner组件库。

我当时制作这个组件库的原由是因为母、子公司经常都会有相同的模板化设计界面替换，而每次替换都需要花费设计师很多零碎的时间，所以我们干脆就直接设定好Banner组件库，让运营人员自行替换，我们先教会母公司的主运营操作流程，主运营再去负责子公司的操作流程培训，这样一套下来省去了运营人员与设计师的沟通及修改过程，运营人员可直接输出成品，从而提升了整个团队的生产力，也让设计师专注于设计上的创意与用户体验。

案例部分效果演示：

Banner组件库的四大知识要点

不管是建立哪一类别的Banner组件库，想要设计好它，那么首先就要清楚的了解Banner中的基本构成以及设计原则，从底层逻辑出发去构建Banner组件库，我构建Banner组件库的思路主要依据以下四大知识点：

1. Banner的层级拆分

Banner层级拆分的主要目的是为了组件的设定，我们通过层级拆分可以有规律的把每一个层级都设置为可替换选项，在Banner组件库中可分为5个层级：

• 背景层：可替换背景颜色、背景样式
• 文案层：可替换字体、颜色
• 标签层：可替换标签、显示隐藏标签、标签颜色
• 点缀层：可替换点缀元素、元素颜色
• 产品配图：可替换显示图片、也可更换为插画元素

案例：

2. 合理运用Banner中的点线面

在组件化的Banner设定中，我们可以用点、线、面来划分画面的整体层面，我们要罗列出哪些层级是用点来表达，哪些层级是用线或面来表达，这样不仅有利于组件库的快速建立，也有利于Banner整体画面的视觉表达。

点、线、面是相对存在的，点可能在画面中成为线、面，线也可能在画面中成为点、面。

“点”越大就可能会变成“面”，“点”发生规律性变化也可能成为“线”。

当“线”在画面上显得短小时，可以把它看成“点”，当把“线”加粗一定程度，那么我们就会把它看成“面”。

当“面”成为未封闭状态时就会成为“线”，当“面”在画面中的比例缩小时我们可以把它看成“点”。

我们在组件Banner时要事先把层级的点线面归纳好，这样才不会在我们设计相同元素时出现杂乱的现象，层级与点线面的常规关系图如下（这样的常规组合关系有利于建立组件库）：

需要注意的是在Banner组件库中点缀层与标签层并非一定要存在于Banner中。

3. Banner组件库常用版式

Banner的版式复杂多样，而我们的组件库想要达到轻量化，所以更适用于下面三种常规的版式，如下：

4. Banner设计五大原则

组件库的建立必须遵循Banner设计五大原则：对齐、统一、对比、留白、结构平衡。

对齐

Banner的内容都要有一个对齐的准则，特别是文案层面，每个元素都有自己应该处于的位置，要有秩序化，才有舒适感。常见的对齐方式有左对齐、右对齐、居中对齐，建议一个板式只使用其中一种对齐方式。一个小小的Banner版面，如果使用了多种对齐方式，实际上在用户看来这些信息都是零散的，增加了认知成本。

统一

字体以及字体颜色最好不超过两种，内容元素设计风格也必须一致，太多容易导致内容杂乱，干扰过强。

对比

了解各项信息的权重大小，重要的信息要加强显示，次要信息可以弱化。

留白

要为Banner留出一定空间，让Banner多一些呼吸感，这样也更容易聚焦重要信息。

降噪原则

在Banner设计中不要使用过多的字体、颜色或者过于复杂的图形，这种不断做“乘法”的行为，实际上是在增加用户认知的“噪音”。

组件库制作流程及案例展示

1. 制作前提：设计规范（字体/颜色/版式说明）

字体使用规范

在字体的使用中，我们要确定字体类型以及字体的大小。

颜色使用规范

为了保证Banner拥有较强的适应性，我们可以不规定精准颜色，用颜色明度的使用区间来代替。(颜色规范仅限于主色调，并不包含特殊用色：如标签、点缀元素)

版式说明

制定版式的整体尺寸、元素间距、排版、字数限制。

2. 设计师应用版制作流程：

设计师应用的Banner组件库可以用Sketch制作，也可以用Figma制作。

如果是用于外包设计或公司设计师仅有一人，那么建议用Sketch制作；如果设计团队人数较多，那么建议用Figma，我这里就用SKetch给大家讲解一下制作流程。

第一步：根据层级与点线面设计Banner中的元素

第二步：把每一层级的元素组件化

在Sketch中只用选择想要组件的图层（或组），点击按钮即可立即生成组件，如下图：

在组件层级时我们需要注意从哪里开始，到哪里结束。例如我做的这个宠物Banner案例，第一层是Banner样式切换，接着才是样式里面的层级切换，并不是把内部所有层级都组件完后就结束了，可能层级中还存在更多的小组件切换，比如在样式2中我没有把点缀层合成一个组件切换，而是分为三个组件切换，甚至在三个切换里你还可以设置它们的颜色切换，全部设置完后这样才算真正的组件结束，下面是我组件的层级图：

第三步：设计可替换组件

在完成元素组件化后，我们就可以在组件库里添加更多可替换组件的样式，添加方式如下图：

当把可替换的组件全部设计完后就可以使用了，如果发现内容不够用还可以往内部再次添加，下面是Banner样式1的切换效果展示：

Banner样式2的效果展示：

注意要点：

• Banner组件库的内部层数不宜过多，尽量轻量化。
• 组件库内部的相同元素可以同时使用，例如样式1与样式2的文案部分，都可以用一个组件，不用再单独设置。
• 命名要清晰，层级之间用“/”隔开，以免发生组件库内部的调取错乱。
• 因SKetch的组件机制，组件的尺寸大小要有区分，如果出现相同大小的组件请任意修改一个。（增加1px）
• 想要快速得到组件，可以把左侧的图层面板更换为组件面板，直接可拖取内部组件。

3. 运营人员应用版制作流程：

运营人员应用的Banner组件库的建立需要用到的软件是PS与Excel。

在设计这类组件库时我们一定要多从操作人员的角度出发去设计，最简单化，下面案例来自于之前在老东家做的PS组件。

第一步：根据层级与点线面设计Banner中的元素

第二步：设计可替换元素组件

在设定前我们需要了解以下几点知识：

• PS做组件库用到的是图像-变量属性。
• 我们进行所有的元素替换都不在PS内部，而是在Excel操作替换，若有图片替换，图片则与源文件存在同一文件夹内。
• 可设置所有元素的显示和隐藏。

通过以上4点可以得知我们需要设计的元素仅仅只有背景图片，而其他元素可以通过变量来达到效果，下面是设计的4张不同颜色的背景替换图：

第三步：定义变量元素

只是给需要变量的元素打标签，具体该如何变量在第四步

定量步骤：选择想要定量的图层-图像-变量-定义

注：PS会自动识别定量元素，如果是组，那么只有可见性选项（可见性选项的意思就是可显示可隐藏）；如果是图片，则会多出像素替换（替换图片）；如果是文字则会有文字替换（替换文字）

在定义时为了避免操作错误，定义名称就为图层名称，定义完成一个就按“下一个”按钮，直到全部定义完成再按“确认”按钮，案例中的Banner一共定义了6个元素，分别为商品图（像素替换）、商品名（文字替换）、原价（文字替换）、优惠价（文字替换）、特价标（可见性）背景图（像素替换）

第四步：制作Excel表格

我们所有的数据修改都是在Excel里面进行的，Excel表格制作非常简单，第一排为定义的名称，我们只需把刚才定义好的6个名称输入到表格的第一排。

如上图，建议大家多加入一个编号定义，在PS里把编号定义的图层隐藏就行了，目的是为了选取数据组时更直观，操作如下：

除了第一排，下面的排列都是输入性定义，如果要改变商品名的文字，就可以在下方输入修改的文字；

如果要替换图片，就要输入替换图片的名字及后缀，仅支持png与jpg格式的图片，并且图片必须与源文件在一个文件夹内。

如果要显示或隐藏某个元素，那么就可以输入大写的“TRUE”或“FALSE”。

当把表格信息都填完后，最后一步就是把表格存为.csv格式。（注：.csv文件必须与PS源文件、图片文件存在于同一文件夹内）

第五步：导入操作

当全部设定完后，我们就可以在PS内导入切换不同的数据应用。

操作路径：图像-变量-数据组-导入数据组-选择数据-应用-确定

这五步下来我们的Banner组件库就顺利完成了！

特别提醒：避免运营人员操作失误，建议把PS内部的所有图层锁定。

第六步：培训运营人员

通过上面的组件建立，运营人员只需添加Excel文件的子列表，并在PS选中导出即可完成操作，可以让运营人员把PS看成图片导出工具，可以非常轻松的完成。（机械化流程）

因为考虑到运营人员可能无法理解设计逻辑，所以很可能会出现操作失误或不知道怎么操作的情况，所以建议通过直播以及视频文件、PDF文件、GIF文件来引导运营人员操作。

• 直播优势：直播在线操作，不懂可以及时询问，能让运营人员快速上手。
• 文件优势：主要用于操作者忘记操作或操作失误时的提醒。
• 特别提醒：给予运营人员文件中必须包含：操作文件（PS源文件、背景图片、Excel表格）、字体包（PS中用到的字体）、操作提示文档（视频、PDF、GIF）

下面是员工PDF操作步骤图示：

案例源文件提取

Sketch组件库源文件：

PS、Excel组件库源文件：

下载链接：https://pan.baidu.com/s/1376TAJVr4V8Sqiu9YADLpA 提取码：e3li

文章来源：优设网     作者：黑狮力

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

1.为什么用户使用对齐标签填写表单的速度更快

想象一下，一个用户已经准备好注册您的站点了。他们会进入你的表格并输入他们的信息。字段标签对齐的方式会影响用户填写表单的速度。

你是想给用户提舒适体验，还是想给他们一个麻烦？

如果您想让他们的体验更快更容易，请使用输入框上面的字段对齐标签.或输入框内的对齐标签模式。

与左对齐和右对齐的标签相比，顶部对齐或内部左对齐标签填写起来更快、更容易。这是因为标签只需要有一半多的视觉固定物。

顶部对齐标签还允许用户以一个可视方向向下移动输入框。左对齐和右对齐的标签需要两个视觉指示才能填写。

顶部对齐标签的唯一缺点是，它们可以使表单变得很长。但是现在用户滚动的频率越来越高，所以这不是问题。

通过减少字段之间的空白，可以减少表单长度。您还可以将表单拆分成多个页面，以使表单更短。

顶部和左/右对齐标签之间的差异很明显。顶部对齐标签更容易在眼睛上，并使表格更容易填写。虽然他们可以使表单更长，

但用户将从完成表单所需的时间和精力的减少中获益更多。

如果顶部对齐的标签能够给用户提供更好的表单体验，那么它是值得采用的。设计师应该更多地考虑他们的字段标签对齐。

它可以区别于用户填写表单还是放弃表单。

2.为什么对话框中的“确认”按钮在右边工作得最好

有很多设计经常会问我一些关于按钮上的问题那我今天也来献丑讲以下我对按钮的一些理解，这段时间针对这些东西研究了很久，在对话框中放置“确认”和“取消”按钮的位置。“确认”按钮是完成任务的主要操作。

“取消”按钮是在没有完成任务的情况下将用户带回原来屏幕的辅助动作。

根据它们的功能，最好的顺序是什么？“确定”按钮应该出现在“取消”按钮之前还是之后？

许多人提到了以下几点平台约定作为答案。虽然这似乎是一个解决问题的方法，但实际上并非如此。它不能回答哪个位置对用户更好，以及为什么。为了一致性而遵循平台惯例的建议是不够好的，给设计师留下了空手而归的机会。

“一致性”是设计师们常用的一个词。不深入考虑用户面临的设计问题也是一个流行的借口。如果一个人不知道为什么会存在，遵循设计惯例有什么好处呢？

如果某个设计约定对用户有害呢？设计师应该为了一致性而盲目地遵循吗？糟糕的设计实践是否应该持续下去，因为设计师们希望通过平台设计的一致性来解决每一个问题？

今天，有一些平台设计约定被广泛使用，因为它们是为用户工作的。但这里的要点是，平台设计的一致性永远不应该让设计师满意，因为这是做某事的唯一理由。理解为什么您应该以一种方式而不是另一种方式来设计您的用户界面的原因是关键。

按钮放置事项

人们可能会说，让你的动作按钮突出给它更多的视觉重量和一个清晰清晰的标签比它的位置更重要。虽然动作按钮的视觉重量和标签是一个重要的设计方面需要考虑，但它不是唯一的方面。

只关注一个设计方面而不是其他方面是一个粗心的设计师的行为。一丝不苟的设计师会思考每个设计方面是如何影响用户的。

对于设计师来说，最难搞清楚的是主动作和次要动作是如何放置的。这就是为什么“确认”/“取消”按钮的争论在设计师中如此流行的原因。

为什么‘确认’按钮在右边工作得最好？

当你通过了平台惯例的争论后，你会质疑哪个位置最有效。您可以通过分析设计如何影响用户来解决这个问题。

减少视觉固定

一些设计师认为，在第二个操作之前将主操作放在左边对用户更好，因为它更接近，因此，点击的时间更少。

这是有意义的，但您不能忽视这样一个事实，即用户在选择要采取的操作之前将查看他们的所有选项。

这意味着大多数用户不会盲目地单击主操作按钮而不查看它旁边的辅助操作按钮。

他们将首先看到左边的主要动作，然后查看右边的次要动作。然后，他们会把眼睛移回主要的动作，点击它。这将在多个方向上总共创建三个视觉固定。

将其与放置在对话框右侧的主操作和放置在左侧的辅助操作进行比较。用户从第二个动作的眼睛开始，然后将眼睛移到主动作上单击按钮。这在一个方向上总共创建了两个视觉固定，给用户一个更快的视觉流。

用户只关注每个按钮一次，并在主动作按钮上结束。将主操作放在左边可能会使用户更容易到达，但是当您从用户的思维过程和视觉固定的角度来看速度时，将主操作放置在对话框的右侧实际上更快。

用户点击或操作按钮的心里状态

当用户单击辅助操作按钮时，他们期望应用程序什么也不做，并将它们带回到原来的屏幕。因此，“取消”按钮的功能类似于“后退”按钮。

当用户单击主操作按钮时，他们期望应用程序执行按钮所述的操作，并将其转到下一个屏幕。因此，“确认”按钮的功能类似于“下一页”按钮。将辅助动作按钮放置在左侧，主动作按钮在右边映射到用户可以期待的‘后退’和‘下一步’按钮功能。

它类似于分页按钮的放置方式。将用户带到下一页的按钮位于右侧，将用户带回其早期页面的按钮位于左侧。这个按钮的放置工作是因为它映射到用户从左到右的阅读和导航方向，其中右是前进的方向，左是后退的方向。

对话框中的“确认”和“取消”按钮应该遵循类似的交互模式，因为它们的功能类似于分页按钮。

不仅如此，在中国用户习惯了左右方向的模式。

将您的主要操作放在右侧，将次要操作放置在左侧，将使您的对话框按钮更容易、更直观地为用户所理解。

为用户提供更有效的视觉流畅度

将您的按钮放置在终端区域可以让用户看到他们最后需要采取的主要操作。这不仅改善了视觉流，也改善了任务流。

用户在扫描时不会跳过主动作按钮。当他们通过时，他们的眼睛就会盯着它，所以他们可以立刻点击它。

按钮放置在中间还是放置在左右两边？

另一个问题是设计师经常想知道他们是应该把按钮放在角落里，还是把它们放在一起。当您将主操作和辅助操作放置在对话框

的角中时，它将很好地映射到左右方向。但是，由于‘取消’和‘确认’按钮不是导航按钮，所以没有必要遵循方向映射。有时它弊大于利。

如果应用程序要执行用户无法撤消的关键操作，那么用户可以看到“取消”按钮和“确定”按钮是很重要的。在这种情况下，“取消”按钮的功能可能像“先前”按钮，但更重要的是，因为它充当安全按钮，以防止任何更改。

在左下角放置“取消”按钮的危险是，由于两个按钮之间的视觉分隔很大，它可能导致用户忽略它。将“取消”按钮和“确定”按钮放在一起，可以使用户更容易在一次凝视中查看和比较这两个动作，从而选择最佳的操作和点击。

我们经常卸载软件的时候一不留神就会点错，或者是我们在装某一个软件的时候全家桶一拥而上。所以在不同场景当中我们所用的按钮形态也是不一致的。

3.下拉菜单加图标和不加图标的区分在哪里！

大的侧边栏菜单甚至会让用户看起来很不双我们应当如何解决这一个问题。

其原因是设计人师在做显示菜单项的时候会出现的问题。

当它们都有相同的视觉处理时，菜单项很难进行识别与区分。

如果不修复这个问题，会导致用户放慢他的浏览速度从而导致用户的流失在大的层面来讲，小的层面来讲阅读不爽导致关闭页面。

菜单栏没有主次之分

当您对菜单项进行全文本或全图标处理时，问题就会出现.当用户扫描他们想要的项目时，他们的注意力分散在菜单周围。这是因为没有层次来吸引他们的注意力。

通过将用户的注意力引导到您的主要项目，使您的菜单可扫描。

要实现这一点，我们可以看下面设计形式来强调重点内容

主项图标

与其在每个菜单项上放置图标，还不如将其放置在主菜单项上。视觉强调首先将用户的注意力引导到这些项目上。

次要项目上缺少图标，这使得它们能够得到其余的关注。

略大一点的图标

如果要使所有图标处，请稍微放大需要突出的图标。

稍微的增大会使视觉效果有很大的不同，同时字形更容易辨认，每一行的线高也会增加。让整个看起来更加有空间感一些。

让用户浏览阅读起来也会更加舒畅一些。

4.在按钮上避免颜色对比度错误

想象一下，当用户在您的界面上遇到一对按钮时，他们犹豫不决。

用户向左看，然后向右看，比较它们。经过一番思考，他们做出了选择。

他们的选择按钮做出决定，而且不确定，因为你的按钮没有层次结构。

不要使用相同的颜色轮廓按钮

甚多的设计师设通常喜欢使用主按钮的轮廓形状作为辅助按钮。按钮样式看起来可能不一样，但还不够。

他们仍然会竞争，因为他们的颜色对比度相等。

为了给主按钮更多的注意，削弱轮廓按钮的对比度。与其使用重颜色，不如使用它的色调。你可以通过降低重颜色的亮度和饱和度来制作。确保对比度足够高，以达到主要的按钮突出性。

不要使用黑色辅助按钮

设计师的另一个趋势是把第二个按钮变成黑色。他们认为，使用中性的颜色，它是不会竞争的。然而，黑色按钮更为突出，因为它有一个更高的对比度。

不要使用黑色，而要使用重颜色的色调，以使辅助按钮比主按钮更弱。要做到这一点，增加亮度和降低饱和水平。

不要在主色调上使用浅色

将彩色按钮与中性灰色配对并不总是意味着彩色按钮会得到更多的关注。如果主按钮的颜色太轻，则中性辅助按钮将更加突出

要避免这一错误，请选择不太明亮的颜色。明亮的颜色可能看起来很有吸引力，但它与白色背景或文字的对比不太好。在主按钮上使用更暗的颜色，这样第二个按钮就不会引起注意。

5.复选框的设计与使用方式哪种更好

在界面上使用复选框之前，您必须先问自己几个问题。复选框是否是在此上下文中使用的正确组件？如果是的话，最有用的显示方式是什么？

许多设计师没有问这些问题，自动使用复选框，没有太多的事先考虑。

因此，它们通过在错误的上下文中使用它们而产生可用性问题。

不仅如此，许多设计人员都很懒惰，期望前端写成默认选框完成这项工作，而不是

自定义复选框设计。但问题是，前端默认的复选框不能完成这项工作，因为它们的

可用性很差。

大多数设计人员在复选框上会犯的几个可用性错误，这些错误会破坏用户体验。

单选与重复的选择

在设计当中我们经常会遇到做选择性的勾选，往往很多设计师会犯的一些错误问题和选择障碍问题。

通过更大的目标来明确与用户进行选择更为明确

我们设计单选框的时候这不是秘密而是让用户做出选择，复选框是很难点击，因为他们的小击中目标。

设计师通常会让标签点击，但如果它不是直观的，那也于事无补。

通过将复选框转换为复选标记，您可以为用户提供更大的命中目标和更清晰的交互提示。

重复物品的重量及数量选择

有时你可能想提供不同数量的商品。使用多个复选框复制它会产生更多的文本来读取，并使界面混乱,且让用户难以进行选择。对于增量输入更改使用数字选择器一次显示该项会为更好些。

总结以上两点，实际商用应用案例如下所示

6.在设计当中我们该如何控制内容的突出性与阅读性

新闻卡片的设计怎么才能突出信息内容

卡片内容有几种文本类型，提供不同的信息功能。让我们看看基本内容卡的文本类型。

首先是眉毛，它是一个明确的词或短语，用来描述内容的主题。

还有一个标题，它用一个句子中的几个单词告诉用户内容是关于什么的。

在此之后，就会有一个描述内容的正文。

最后，就是时间与操作的按钮

必须通过确定哪些文本类型对用户更重要，从而为您的卡片新闻建立文本层次结构。

此内容新闻卡片的适当文本层次结构为：

1.眉毛-可以是时间，可以是新闻分类

2.标题-最重要的是，因为它描述的内容最快。

3.正文-包含一个描述性段落，但阅读时间最长。

4.描述内容的正文对内内容的简要描述。

您的内容卡应指导用户按此顺序浏览文本类型。要实现这一点，您需要使用浏览控制对文本类型应用适当的视觉强调。

控制用户的浏览顺序

通过适当的视觉强调，可以控制用户浏览的顺序，并指定反映文本层次结构的浏览模式。

当扫描遵循文本层次结构时，用户会浪费更少的眼球运动，并且可以更快地处理信息。

下面的示例说明了浏览控制如何让眼球工作比较。不同的是强调不同的文本类型。

其他文本类型具有相同的强调度，这使得它们争夺用户的注意力。

其他设计形式及浏览方式

在内容颜色的控制上我们可以为三种，重要的突出的需要用户重点进行关注的就用黑色

例如：#333333      #222222   #454545     等等色值

在不需要突出的内容上我们可以用稍微浅一点的色值保证用户能够进行阅读即可，

例如：#999999      #787878   #666666     等等色值更加容易记住

其他辅助的内容表达比内容正文更浅

例如：#bbbbbb      #A8A8A8    等等色值

说到这里我要说一用户体验关于文字的事情如果做出来的设计文字是给自己看的随意设计读没人会说你，有句话说的好：现在

是内容为王的时代，如果在内容上不够吸引或者颜色不够吸引眼球那就是一个很失败的案例。

转自：站酷

作者：  东峰实业集团

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

排名榜单数据在我们日常生活中经常会遇到：

比如微博、抖、快的热搜榜单、各省份之前的GDP对比、双11的现场的榜单数据等等

都会涉及到，可以说排名数据已经涉及到了我们生活中的方方面面。

那我们应该如何做好榜单排名数据可视化呢？

我们常遇到的榜单排名数据主要分为两种：

↑ 榜单排名数据分类

1. 一种是无数据的排名，也就是只有排名和名称；

2. 另外一种就是有数据的排名，也就是包含了具体的数值；

   
   

那么，本篇文章我将按无数据的排名和有数据的排名，给大家带来，当我们遇到榜单排名数据时，应该如何将图做的更好看！

总共涉及到大于15种可视化表现形式，希望能够对你有所帮助！

一 没有数值的排名数据，如何做得好看？

1 基于数字本身去做变化

最简单的方法，我们可以从排名的数字本身去做优化，比如将排名数字1、2、3....去做内容的填充丰富，改为TOP1、TOP2、TOP3...或者NO.1、NO.2、NO.3...

还可以基于数字本身所处的环境去做优化，比如在其底部加入填充形状垫底，让数字排名更突显出来（如正方形、矩形等等）。

通过这两种形式，可以让单调的排名数字有了更多的细节，内容更丰富，展示更好看。

↑ 基于数字本身去做优化的案例

2 基于整体，通过形状元素去做变化

在数字本身变化的基础上我们还可以加入对文字的变化，比如在文字的底部垫上形状（如圆圈、条形图等等）。这样通过对数字和文字本身的设计强调，就从整体上得到了优化。

↑在文字底部垫上圆圈，在整体上突出设计感

虽然排名没有具体的数值，无法生成条形图，但是依旧可以通过等比缩放的矩形来强调文字，比如倒立金字塔和横向柱状图。

↑通过矩形形成倒立金字塔和条形图，在整体来突出设计感

3 基于内容主题传达，来做变化

3.1借助icon元素，来做变化

如果排名数据内容所传达的主题是品类、物品、或者城市，那么就可以借助icon来丰富可视化。

3.2 借助定制插画，来做变化

排名的数据如果涉及的是品类中的细分物品，比如生活中常见到的吃的、穿的，用的，那么就可以使用定制插画来丰富排名可视化。

3.3 借助头像、品牌LOGO、产品实景图，来做变化

当我们的排名数据中涉及到了人物、品牌、产品之间的排名时，我们可以通过与之对应的头像、品牌LOGO、产品实景图来丰富排名的可视化表现。

3.4借助地图，来做变化

如果排名数据讲的是省份之间的排名对比，那么我们就可以借助地图元素来丰富排名的展示。但是如果要用到中国地图，一定要注意使用中国标准的地图，当然基于设计的风格，你也可以使用简约风格，去掉地图元素，只保留可视化的部分。

4 借助背景设计元素，去做变化

排名数据也可以借助视觉背景模板来做变化，比如在涉及某个主题排名榜单时（如淘榜单、星数榜单等）就可以通过背景视觉元素来突出排名。

其实这种背景视觉模板，对可视化的要求并不高，你只需将排名通过单一表格的形式展示出来，但需要一个很强的视觉背景版来做衬托，这样，做好一个模板，其余的榜单都可以进行复制使用了。

二 如果排名数据包含数值，如何做得好看？

1 基础可视化排名数据图

如果数值单一，那么可以通过常规的可视化表现形式进行展示（如基础柱状图、饼图、圆圈大小、直角三角形柱状图、180°变形柱状图等等）。

1.1 横向柱状图展示

结合第一节讲到的基础排名样式再加上横向柱状图来进行展示。这样的排名展示形式简单、直观，特别适合单一排名数据之间的对比展示。

1.2 饼图、圆圈大小占比展示

如果排名数据中数值所传达的是占比，那么便可使用饼图或圆圈大小的形式对排名数据进行展示。

1.3 直角三角形柱状图（柱状图变种）展示

通常我们会使用常规的竖向柱状图来表现数值的大小，但其实还可以对其进行一点点变形，比如将柱子的右侧直角边去掉，那么就变身成为了直角三角形柱状图。

这时如果排名的文字比较多，我们还可以将排名和文字置于柱子的上方进行展示，一方面节省了空间，另一方面在视觉上也起到了美观度。

1.4 180°变种柱状图展示

柱状图的变种，在《如何做出比别人好看的柱状图？》系列文章中有讲到，大家对如何实现这种形式感兴趣的可以看下之前的文章，同样的排名数据也可以基于180°的变种柱状图来进行展示。

2 将主题元素和基础可视化排名图进行结合

除了基础的可视化展示和排名数据结合外，如果排名数据所涉及的是一些主题元素（如生活中吃的、穿的、用的等等）。那么就可以将基础的可视化和icon、头像、产品实景图、插画等等去做结合来丰富可视化。

3 使用桑基图来体现排名

当排名的数据中，还多了一列数据涉及到分类， 那么就可以使用桑基图来进行可视化的展示（如国家属于什么地区、公司属于什么行业、城市属于什么省份等等）。对如何实现桑基图感兴趣的可以看看之前发的桑基图教程。

4 排名连线图展示

如果我们的排名数据中，还涉及到了年份的排名变化，比如省份之前的年度排名，那么就可以使用排名连线图，通过线段的上下连线走向来看省份之间排名的上升或下降，同时这种数据还非常的适合做成动态柱状、折线图（在后面会讲到）。

4 排名连线图展示

如果我们的排名数据中，还涉及到了年份的排名变化，比如省份之前的年度排名，那么就可以使用排名连线图，通过线段的上下连线走向来看省份之间排名的上升或下降，同时这种数据还非常的适合做成动态柱状、折线图（在后面会讲到）。

5 地图展示

和第一节讲到的地图一样，如果排名数据中涉及到了地理位置数据，那么可以结合地图进行排名数据的展示。通常情况下，完成地图可视化后，可将具体的排名信息以表格的形式罗列在地图的空白区域内，这样结合地图和具体的详细排名数据，就会更加的直观和丰富。

6 组合图展示

如果我们的排名数据维度非常的丰富，数据所包含的信息点在3个以上，那么就可以通过将多种可视化的表现来进行结合，通过组合式的可视化来进行展示。

7 动态柱状图、动态折线图展示排名

7.1 动态柱状图

排名数据也可以通过简单的动态柱状图来进行展示。如果只是单一的排名没有涉及年份的变化，那么可以通过柱子从上到下一个一个地出现来进行展示（如下图左),如果涉及到年份的变化， 那么就可以通过柱子随着年份的上升或下降来进行动态的展示（如下图右）。

动态柱状图的实现方法也很多，我在想做出漂亮的图表，这12个网站不能错过！中有讲过，可以通过flourish网站（https://flourish.studio/）来快速的实现。同时如果想自己DIV得到更定制化版本的动态柱状图，也可以使用B站UP主见齐的开源可视化项目（http://r6d.cn/JdYy）进行实现。

7.2 动态折线图

同样的我们还可以通过动态折线图的形式进行展示，这种表现形式主要看的是排名的趋势变化，同样的，借助flourish网站（https://flourish.studio/）就可以实现这种动态折线图的展示效果。

8 3D建模渲染可视化展示

当然，我们的排名数据也可以使用现在市面上很火的3D可视化的表现形式来进行展示，比如随着摄像机移动的3D柱状图、还有基于主题而自定义化的3D场景排名展示等等。

8.1 3D柱状图展示

将基础的柱状图，通过3D立体柱状图的形式进行展示，排名的结果并不是啪的一下直接公布，而是随着镜头慢慢地公开，对观众来说随着镜头的视角观看有一种慢慢揭秘的感觉！

8.2 3D内容场景展示

如果我们的数据，所要传达的信息非常富有主题场景感，那么就可以通过3D场景渲染的形式进行展示，比如下图GIF中，在表现《哪个国家上班族工作时间最长》就可以将各个国家的学生，置于一个教室中，再通过镜头的移动位移来进行展示。

这种展示形式，实际投入成本还是很大的，从建模到渲染至少也需要2-3天的时间。所以最好基于一个好的选题再选择这种形式，要不然就会出现”虽然视频本身展示酷炫，但是由于选题不好，最终播放量不高“的尴尬情况。

三 做好排名数据的一些小事项

1 时间紧急时，一切从简

比如说，当我们在时间非常紧急的时候，排名数据如果是和地理数据相关的，那么我们会尽量避免使用地图元素来丰富可视化，因为这会增加我们审核检查地图正确性的时间成本。我们可采取常规的可视化表现形式进行展示，虽然会丢失掉一些美观度，但是正确性会有更高的保障。

2 强调重点数据

基于文章内容，需要在图中重点强调某些数据时，可通过填充颜色、框选、重点信息丰富(比如展示TOP3)的形式来对排名进行强调.

四 总结

排名数据看似简单，但其实所包含的展示形式和细节还是非常多的。希望当你在遇到排名数据时，这篇文章能够对你有所帮助！

文章来源：站酷   作者：邹磊ZouL

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