表单日常设计规范大致思路，增加对表单的认识~

全篇阅读大概需要15min，对表单设计不熟悉的同学看完后肯定会有不少的收获~~~

说到表单其实在生活中可以接触到各种各样的表单，主要目的就是让用户填写来「收集用户信息」。

初看这些表单，你可能觉得很简单，就是一些标签、非常基础的小组件，但是在实际业务中，想要将这些小组件组合拼装成合适的表单却需要推敲非常多的细节，常常会让设计师陷入无限的纠结中，比如：

• 文字标签是左对齐还是右对齐？
• 确定按钮是放左边还是右边？
• 控件颗粒长度是整齐划一还是与输入预期一样错落有致？反馈内容怎么显示……等等

所以针对这些问题，我从「框架」>「细节」的逻辑与大家一起探讨「如何设计一份体验好的表单」。

表单拆分

在UX Collective，作者Taras Bakusevych 进行了详细的阐述，对表单的组成部分进行了详细的拆解与说明 ↓ ↓ ↓

1. 标签：

标签文本主要是解释输入项的含义，一般不宜太长，需要简明扼要，快速让用户理解；还有一部分是告知用户哪些是必填项。

2. 占位提示：

直接展示在输入项中，采用弱提示文本对所需信息描述、示意，当用户输入信息时即消失。

3. 校验：

对输入项进行验证，并给出反馈提示，如：用户未填写，格式错误、内容错误等

△ 常见的校验类型

4. 基础组件：

可交互输入的区域，是构成表单的核心内容，主要有：输入框、单（复）选框、上传、时间选择器、开关……

5. 提示：

描述该输入项需要的输入类型，如：上传的文件类型

 6. 按钮：

用户完成输入后，点击按钮进行提交、进入下一步等，按钮一般是跟随的最后一个输入项后面，若输入项超出一屏显示，则按钮悬浮固定在底部；按钮“确定”放左、右统一即可，没必要过分纠结。

表单类型

看了很多文章，对表单类型的划分主要是：基础表单、分步表单、高级表单（分组表单）[1]

基础表单：常见于输入项较少的表单场景，如：登录、注册。

分步表单：常用于输入项较多，业务本身具有流程化特性（如：转账）

为了提高用户填写效率，减少用户心理负担，将一个冗长或用户不熟悉的表单任务拆分成多个步骤，一步步指导用户完成。

分步表单可以缓解用户需要填写较多内容时候的抵触情绪，并且通过拆分步骤，聚焦于每次填写的内容，提升用户在不同模块间的浏览效率。

△ 来源：Ant Design Pro

高级表单（分组表单）：主要用于需要一次性输入、提交大批量数据的场景。高级表单与分步表单有点类似，都是为了减轻用户填写压力，将填写内容进行分块。不同的点在于，分步表单的流程化明显，后一步填写的内容都是基于前一步来填写、是前一步反馈。

△ 站酷上传作品

但是以上说的基础表单、分步表单、高级表单都是基于业务需要而进行选择，但是实际在设计时，往往还需要考虑的是：这些表单应该是以什么承载结构展示？

• 是整页展示、弹窗展示、侧边栏展示？
• 表单内部布局方式，一定是平铺的一栏么，是否可以增加侧边目录？

这些都是设计师需要进行全盘考虑的问题，所以在设计表单的时候需要先确定这些框架，由外>内，层层深入，再对细节进行处理。所以接下来我会针对如何由外>内设计表单进行详细的陈述。

表单页设计步骤

在详细阐述如何设计表单页前，先明确下我对于表单页的划分 ↓ ↓ ↓

我将表单页大体划分成「页面框架」和「表单内容区」

这样划分是出于我对 AJAX之父Jesse James Garrett在2007年出版了一本名为《用户体验要素》的书，提出了从5个要素自下而上的建设用户体验，即：战略层、范围层、结构层、框架层、表现层，这种逐层的思考逻辑对于设计表单是十分必要的，因为在设计表单的时候，常常需要考虑这个表单页所需承载的业务诉求（战略上）基础上去做后面的优化体验，所以在设计表单的时候应：明确该表单的业务类型，因为不同的业务诉求的表单在设计中的展现形式会有不同，即“页面框架”会有不同（这也是我上面为何将表单页分成页面框架和表单内容区的原因）

在确定页面框架后，就要对表单需展示的内容进行明确的划分，如：表单的内容是否要展示流程进度？表单内容是否有不同层级的导航？确定了这些后，我们表单内容的大致布局框架就可以确定下来，我们才能进入下一步（内容区具体的陈列方式）的设计；

表单内容区主要是对输入项的陈列方式，对齐方式，进行体验优化；

最后对所有输入项进行统一整理，检查是否与用户预期一致？与其他输入项的关系是否清晰等。

整体而言可以分为以下四步：

STEP1：确定「页面框架」

这里的页面框架指的是承载着整个表单页的页面框架，即：整页式（新页面）、弹窗式、侧边栏式。因为其页面面积大小不一样，所以使用情境有所不同。[2]

整页式：最常用方式，适用于绝大部分的表单，可以支持构建复杂的表单。

弹窗式：通过小面积的弹窗进行轻量化的编辑，方便快速进行增、删、改、查；输入项较少，一般不会有滚动条。

侧边栏式：与弹窗式相似，通过小面积的侧边栏进行编辑；可承载比弹窗更复杂一些的表单内容，可以有滚动条。

以上这些就是常见的表单页面框架，我们在考虑采用何种样式时需要综合以下几个因素考虑：

内容多少 —— 内容较多不适合使用弹窗式

与原页面关系强度 —— 需与原页面保留强关联建议使用弹窗式、侧边栏式

表单内容区复杂程度 —— 一般高级表单、分组表单、分步骤表单、有表格聚合的表单、联动表单等都建议采用整页式的框架来展现。

STEP2：确定「表单内容区布局」

如上图所示，一个正常的表单内容区主要有：标题区、二级导航区、主内容区

其中标题区是必须要有的，标题区可以让用户快速明白该表单是需要收集什么内容

二级导航可以根据业务需要进行配置

主内容区则是表单填写的主区域，通常我们直接将这个区域称之为“表单内容区”，该区域布局样式可以分为三种：

• 通栏式，即：在页面中居中显示，从上到下直接平铺控件颗粒。
• 左右式，即：在表单域内容区左边放置导航栏、或在右侧放置辅助信息栏（如：流程节点展示）。
• 左中右式，即：分别在表单域内容区左侧放置导航栏，右侧放置辅助信息栏。

以上三种样式就是常见的表单内容区的布局，采用哪种布局，可以综合以下几个因素考虑：

内容多少——如果内容很多导致页面很长，则可以考虑将内容分类，作为左侧导航栏，采用左右式布局。

内容类型——导航作用内容必须放置左侧（有些分步骤的表单也会将步骤条放置左侧），而辅助信息的内容建议放在右侧（因为人眼浏览习惯都是从 左 > 右，所以信息重要度建议按照该视线路径放置）

STEP3：确定「表单内容排列方式」

在该步骤中，主要确定表单内容区控件颗粒的排列方式，单列布局 or 多列布局。

在输入项不多的情况下，建议采用单列布局，因为单列布局，用户填写的路径就是从上>下的一条直线，十分符合用户的视觉动线，能够提高用户浏览与填写的效率。

多列布局的表单会导致用户的视觉路径变长，用户需以 Z 字形的视觉动线扫描表单，会提高浏览与填写的效率，并且多列表单容易造成用户填写时的混乱，易填错，体验差。

但是有时部分业务诉求和某些特性的场景要求，会需要在有限的空间上放入更多的控件颗粒来收集用户的信息，这时就不得不使用多列布局的样式，因为多列能够省纵向空间。

so 根据单列布局、多列布局的优劣势，结合实际业务需要来选择：

单列布局

• 优：视觉路径清晰，填写效率高，体验好；
• 劣：占用纵向空间。

多列布局

• 优：省空间，能够放置更多的控件颗粒；
• 劣：视觉路径模糊，填写成本高，填写易出错。

在这个环节中，除了需要考虑单列式布局还是多列式布局，还有一个也是需要全盘考虑的——标签的对齐方式

在设计时，到底是采用左对齐、右对齐还是顶部对齐呢？

这篇文章有对标签不同的方式优劣势进行了说明。[3][4]

后续在这块纠结的时候，则可以对照上面表格进行评估了，其中详细原理你也可以点击下方链接进行查看：UX Collective

STEP4：确定「表单内容颗粒」

最后一步只需要按照收集信息类型的需要，选择正确的控件颗粒，如：如果是要收集用户购买数量，则可以直接使用“数字步进器”、“输入框”。

在选用控件颗粒时，需要注意的是：

• 选用的控件颗粒应是用户可以最快输入的，能点击完成就别输入完成
• 表单中同个信息类型的控件颗粒应统一
• 指意不明确的表单应搭配占位提示，占位提示应是完整的陈述句

重要信息的输入项应该有错误提示校验，这种一般用于错误率较高的情况，避免用户反复填写。如：在登录注册时，我们填写手机号如果不满11位数，就会报错。

特定的输入型颗粒控件，需要根据输入信息的特殊性给与格式的提示与限制，如：邮箱 @http://qq.com，这样有助于帮助用户提前感知，减少表单填写错误。

表单颗粒的宽度应该暗示填写内容的长度，与输入预期成正比，在Ant Design 4.0 系列分享的文章[5]分析结论是：

错落有致的排版比整齐划一更舒适，因为在视觉上我们更容易将下方有图的空间和内容视为一个和谐的整体，但左图过度的对齐导致暗示隐性的截断，我们会感觉表单列右侧空间缺了一大块。

写在最后

本篇文章从表单所在的页面形式 > 表单框架 > 表单内容区逐层对表单进行剥离拆解，帮助大家更加全面的认知表单，并总结了日常工作中设计师常常会遇到的表单类型和布局，设计师可结合文章中给出的建议参考并灵活应用。

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

编辑导读：随着5G技术的发展和AI的不断进步，自动驾驶产业迎来了发展的快速时期。而车联网作为自动驾驶产业链上的关键一环，吸引了包括百度阿里腾讯华为等巨头的注意，纷纷投入资金和精力，希望在市场中抢占先机。本文作者总结车联网2020年的发展，与你分享。

在5G应用加快落地、AI技术不断进步之时，自动驾驶产业迎来了发展的快速时期。特别是在传统汽车行业进入“新四化”的大趋势中，车联网更是成为自动驾驶产业链上的关键一环。

2020年“车联网”作为汽车行业技术发展研究中的一个重要领域，已经成为国内外新一轮科技创新和产业发展的热点。回顾整个2020年，国内车联网领域的发展也是稳步向前。

01 商业落地：BAT加速“上车”，互联生态量产车持续增长

近些年，在汽车产业“新四化”的推动下，“联网化”已经被当成汽车真正成为智能化终端的基础，并且据业内人士估算，车联网技术如果得到充分应用，将能够降低20%的能源消耗和25%～30%的尾气排放；缓解60%的交通拥堵，提高现有道路通行能力2～3倍；减少80%的车辆事故率和30%～70%的死亡人数，其重要性不言而喻。

日前，IHSMarkit发布了的《2020年中国智能网联市场发展趋势报告》报告显示，中国搭载智能网联功能的汽车市场规模预计将在未来持续增长，并在2025年超过75%，高于全球水平。

也正因如此，车联网已经成为这些年巨头们在互联网下半场竞逐的主要赛道，从市场竞争方面来看，百度入局，多年时间在自动驾驶赛道殚精竭虑；阿里抢入其中，联手上汽打造斑马智行；腾讯当然也没坐以待毙，更是打造出腾讯车联、蘑菇车联、梧桐车联三张牌；在BAT之后，华为也不甘示弱，成立了智能汽车解决方案事业部，携鸿蒙OS筹建自身朋友圈；今年车联网赛道战事再升级，京东、字节跳动也先后宣布加入混战，至此巨头云集的车联网迎来“大割据时代”。

巨头混战同样也在加速车联网商业化进程，有专家表示“智能驾驶下的车联网是未来，3到5年可以全面实现。”而市场数据同样也在印证这一说法。

在《2020年中国智能网联市场发展趋势报告》中，公布了今年BAT车联网系统的上车情况，具体来看，今年1-7月的新车销量市场占比中，百度实际搭载新车销量占比高达49%，腾讯占比35%，阿里占比16%。

而2020年全年当前市场搭载车型数量预估来看，百度预计将有61款搭载小度车载的车型上市，大大领先于阿里的32款及腾讯的26款，截止目前百度合作上市车型已超过600余款。

另外，在合作品牌方面，2020年也迎来了较大突破，BAT车联网合作汽车品牌在今年都有所增加，截止今年8月，百度Apollo智能车联已与奔驰、宝马、奥迪、福特、别克、凯迪拉克、雷克萨斯、吉利、长城、奇瑞、现代、起亚等汽车品牌达成合作；阿里方面则有福特、斯柯达、名爵、荣威、观致、宝骏等上汽品牌；腾讯合作方则有哈佛、吉利、长安、福特、奥迪、宝马、Jeep、玛莎拉蒂等品牌。

从品牌数量上能看出，依旧是百度遥遥领先，并且更大的优势在于百度Apollo智能车联不仅合作车企数量多，同时全面覆盖各大车系。除了自主品牌外，与德系、美系、韩系、日系的众多汽车品牌也在保持紧密合作，而这正是腾讯与阿里所缺乏的。

值得一提的是，在前不久的百度Apollo生态大会上百度提出了“领先一代”的概念和内容，其中“领先一代商业模式”就是重点之一，所谓领先一代商业模式是指，通过小度助手汽车版将为整成厂商提供从卖硬件到卖软件与服务的转型，为整车厂商开拓更宽广的增长引擎，将车联网从成本中心直接变成利润中心，并打造“会呼吸、有生命、可进化”的载体验，帮助整车伙伴业务持续升级，并且小度助手汽车版将通过高度集成的新运营工具集，赋能车企全周期用户运营。

2020年已被不少人视为5G车联网商用的拐点，在“软件定义汽车”的共识下，无论是软件企业还是整车品牌都在越跑越快，在百度Apollo生态大会上百度Apollo智能车联事业部总经理苏坦就表示：“汽车行业正在经历着前所未有的变革，软件正在定义着硬件，智能也在定义着性能，而车已经开始有了灵魂，这灵魂正在定义着车的形态。”

从软件到服务、到智能硬件支持、再到整体解决方案，车联网产业链上的每一个环节都蕴藏这巨大商机，而百度们正在加速开启。

02 技术底座：高举“开放”，谁能成为真正底座？

当下车联网技术层面的竞争，包括BAT在内玩家都在宣传自家的车联网方案都是一个开放的生态，都在建立一个开源的“技术底座”，但其中也存在不少差异。

例如，百度依托Apollo这个当下全球最大的自动驾驶开放平台，集成了包括车辆平台、硬件平台、软件平台和云端数据服务，再通过小度车载OS为智能网联系统，将能力集中对软硬件平台以云端数据平台进行管控，以此成就了百度Apollo智能车联的车载场景解决方案。

阿里旗下的斑马网络则是通过与YUNOS重组，形成了具备贯穿端、边、云、网能力的整体系统，使其达成在整车电子电气架构智能化、车机硬件与软件、车机内底层操作系统、上层应用形成四个层面的技术闭环，而AliOS则是链接枢纽。

腾讯车联网则是由五大基础框架构成，包括大数据、云计算、人工智能、安全能力和内容平台，像旗下三张牌之一的蘑菇车联就推出了“蘑菇OS+AI云+智能终端+传感器“的解决方案。日前，梧桐车联基于TINNOVE OpenOS技术，也推出了TINNOVE 3.0解决方案。

在外人看来，三家的车联网技术解决方案好像非常接近，只是形式和对概念的表述方式有所差异，其实不然内核区别非常大，简单来讲百度Apollo智能网联其覆盖了包括车联网、V2X、自动驾驶全领域的布局，而斑马，腾讯的解决方案主要仅覆盖于智能网联领域。

再来要弄清楚，车联网领域到底需要怎样的“技术底座”，是需要满足不同的车型，为汽车产品提供标准化解决方案?还是需要具备多场景应用生态，可以为行业提供丰富的可兼容性软件工具？答案是都要具备。

再来对比三大玩家，也是因为解决方案本质上覆盖领域的不同，目前而言能够满足这一要求的还只有百度。今年成都、北京的几大车展上，百度都展现出了这方面的能力，像全新推出的小度车载2021，基于五大基座满足了为汽车产品提供标准化解决方案；在多场景应用生态方面，依托强大的AI能力，百度车载OS集成了语音、搜索、小程序、地图导航等百度AI能力。

并且从当下市场数据中我们能看到，百度Apollo智能车联大规模上车，无论是合作车企品牌，还是搭载车型数量均位于行业第一，之前就提到已经与70多家汽车企业合作，合作上市车型超过600余款，这便是最好的证明。

在今年生态大会上，百度更是提出“领先一代的共赢关系”，对于开发者而言，依托小度助手汽车版推出首个车规级生态底座，并通过低代码量的小程序开发框架和标准组件，让更多车企与海量小程序对接，并开放丰富的车机流量入口，通过接入丰富成熟的运营⼯具，形成独特的跨联盟超级APP流量交换。助力开发者快速达成AI能力闭环，实现一次开发，多屏、多车型适配搭载，让开发者快速上车，同时通过丰富的车机流量，承接丰富成熟的运营工具，形成独特的跨联盟超级APP流量交换，引领开发者实现共赢。

除此之外，智能汽车已进入“人机共驾”新时代，如何打造人与车之间的全方位流畅交互，也成为汽车智能化行业的核心问题之一，为此百度地图汽版迎来再次进化，推出了智能领航系统，成为了最懂驾驶的下一代智能座舱地图，面向车企百度地图汽车版2021提供了三横一纵全方位地图解决方案，让车企量产更加简单，百度也将这称之为“领先一代的车载地图”。百度正的实现“开放”，而这些方面是现阶段阿里与腾讯无法比拟的。

2020年百度已经成为大部分车厂的技术底座已是事实，至于未来这个位置是否会发生变化，还要看百度能否一步快步步快。

03 生态溢出：朋友圈持续扩大，生态已成胜负手

最后，随着车联网渗透率越来越高，汽车的驾乘体验不再局限于驾驶感受、静音舒适这类硬件机械层面的体验，而延伸到车机交互、LBS服务等基于技术能力和内容生态方面的体验感受。

而2020年正是车载内容生态爆发的一年，“车内大生态”这一概念也被提出，BAT依然是这方面的佼佼者。

百度方面，车载生态一直都是强项。比如LBS，百度已经打造了中国车载领域最丰富的LBS服务基础设施；数据基座方面，同样建立起了一套完整的专为汽车和出行服务的数据平台，通过对车内车外云端数据整合和大数据分析，实现数据驱动变革；至于生态伙伴方面，截至目前Apollo已引入喜马拉雅、QQ音乐、蜻蜓FM等头部生态伙伴超300家，并且囊括了全球所有主流汽车制造商、一级零部件供应商、芯片公司、传感器公司、交通集成商、出行企业等等，覆盖了从硬件到软件的完整产业链。“软硬兼施、内外兼修”是百度在车联网内容生态方面路径。

阿里在车联网生态方面则有着不小的麻烦，“自生态闭环”遭到不少质疑，所谓“自生态闭环”即AliOS系统所搭载软件均为“阿里系”APP，地图一律用高德，音乐为虾米，每个都装有支付宝，若安装车载微信等第三方软件，需要将斑马系统破解。特别是当下“反垄断”成为热点后，阿里车联网生态也在遭受质疑，有行业人士认为“闭环说白了就是垄断，客户的选择有排他性，上面搭载的软件不管好不好用，都得用它的。”

在大方向上，腾讯与阿里一样也有着自己的“生态闭环”，但今年腾讯在车载内容生态上的布局并非以内容为主，像今年推出的腾讯生态车联网3.0作用在 “上车速度”方面，用腾讯的话来说，其搭建了一个适合车载的应用框架——“小场景”，可以通过云端统一发送，减少了对车辆硬件的占用，但同时又更容易上车。现阶段腾讯内容生态主要包含了微信车载版、爱趣听、小场景、云小微语音助手、腾讯地图等程序，并且已落地到部分车型。

三家对比可以发现，无论是数量上还是质量上，百度都有着较大的优势，其一百度拥有更多的第三方软件来源，也是因为企业属性，百度需要更多来自外界的助力；其二，在内容生态层面同样是百度更加开放，不同于阿里、腾讯的“自生态闭环”，像支付环节，小度车载OS提供的支付渠道中，不但有百度的度小满，还有银联、支付宝和微信支付等渠道也都可由用户自行选择。

更重要的是，百度还推出了“领先一代的智能车内体验”，像小度助手汽车版就是专门为车而生的车载Killer App，带来领先一代的智能化体验。例如，在交互方面小度助手汽车版创新发布专属虚拟助手形象，用户只需上传一张自己的照片，就可以得到一个投射在车机中的虚拟形象，成为自己专属的虚拟助手，从新交互、新智能、新场景、新生态四方面引领全新的用户体验；又比如在车载地图方面，面向用户，百度地图汽车版2021导航将更加智能，包括融合定位、多屏联动导航、电动车出行服务化、场景出行服务化等，像提前感知可辅助驾驶路段，帮助用户提前决策、实现全行程的规划和安全引导等等。之外，小度助手汽车版还搭建了全新Feed流式交互框架、全双工多模融合交互、SMLTA离在线语音模型等多种全新的交互方式，让用户拥有更加便利、快捷的交互体验。

当然，目前也不是终点，即便BAT暂时领先，但包括华为在内的新选择都在跃跃欲试，像百度现在虽然有着显著的领先优势，但也无法掉以轻心。

04 总结

回到智能汽车发展层面，虽然现阶段整个行业仍然处于起步阶段，但从“车联网”这些局部区域也大致能进行一些判断。

透过车联网我们能看到，百度自身的技术和生态基础已经足够强大，且作为中国自动驾驶道路测试牌照最多、专利申请数量最多、生态最庞大的玩家，百度各方面都处于领先。但智能驾驶无法一蹴而就，百度也还有较大的上升空间。

特别是今年百度已经实现在智能汽车“增量供应商”的竞争中提前占位，而“领先一代”概念和内容的提出更是让百度在车联网乃至智能驾驶领域登上了更高的山峰，同时在商业化、技术、生态等方面的全面推动下，不得不说百度已是国内智能驾驶领域当之无愧的“头号玩家”。

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

前文的原子设计中我曾经讲过，原子是构成所有元素的最小单元，没有办法再被细分。它通常对应着产品设计中的通用样式及构成组件的最小颗粒。而颜色，作为整个设计系统中极为重要的原子之一，在心智模型中占据了关键的地位。

我们看到红色能够感受到热情、兴奋和危险，看到绿色时往往就感受到安全、自然和平静。可以说，颜色调动我们的情绪只需要一瞬间，而且它在我们的记忆中可以停留更久。

接下来，我结合公司目前的业务CROV Dropshipping（以下简称DS），来进行色彩体系的探索，以输出一整套的色彩方案。但愿这次探索能够给予各位一点启发。

大纲走起：

• 业务背景
• 为什么我们需要色彩体系
• 如何创造一套色彩体系
• WCAG无障碍测试

业务背景

CROV DS是针对美国市场的线上一件代发平台（类似阿里巴巴的一件代发业务），属于跨境电商B2C行业。平台帮助用户无需任何初始成本、无需囤货即可顺利开展电商之路，时间灵活可控，让用户专注于销售本身。

为什么我们需要色彩体系？

1. 对于业务

目前CROV DS业务日益繁杂，但是除了品牌色之外，辅助色的定义过于随意。而且随着业务场景的扩展，临时增加的颜色很容易被遗漏在某个不知名角落的画板中，导致一次性用色的风险。（tips：一次性即前一篇我所讲到的用完即扔、未被复用的设计）

而且用色本身的随意也导致研发还原结果的不统一，一处地方色彩各异的现象比比皆是。

因此，我们需要基于我们自身的业务特征来产出一套足够完善的色彩体系，让业务从用色上达成基本的一致统一。

2. 对于设计师

我们设计师在定义颜色时，更多的是直接在色板上进行取色，但这样的取色方法存在诸多弊端。

增加决策

可能很多设计师选色时会有这种情况，一会觉得这个颜色脏了，一会又觉得那个颜色太刺眼了，有时候完美主义作祟，为了得到一个满意的颜色甚至花上大半天。这种情况尤其在多色搭配时更为严重。

其实这和不用网格系统来布局是一个道理。（注：网格系统是一种能够极大提升布局效率的方法，后面会讲～）

色板中取色的范围趋近于无穷。如果将HSB模式下的单个H、S和B作为一个最小单元格，那么我们可以选择的格子高达数百万个。颗粒度过细的情况（其实根本就没有颗粒度）导致我们在取色时往往会被迫进行反复的微调和尝试。

缺乏秩序和逻辑性

直接在色板中取色主要依赖的是”直觉“这种相对感性的存在。

比如一个按钮的状态可以包括normal、hover、pressed、disable等多个状态，如果我们仅仅靠自己的直觉自由调整明度和饱和度，最后的配色方案其实缺乏内在的逻辑性和秩序性。

难以复用

对于B端这些偏后台工具、场景复杂的业务，颜色运用得往往也比较广泛，如果我们没有一套完善的色彩体系，那每次一遇到新的项目及业务场景需要用到新的颜色时，之前定义的颜色难以复用，导致我们需要重新定义颜色。而且这种相对主观的方法也缺乏说服力，难以体现专业度。

而如果设计师提前定义好一套色彩体系，一方面只需要在对应的色板中选择即可，大大减少了设计决策。另一方面色彩体系所提供的不同色彩梯度也便于各个需求、业务场景的复用。而且色彩体系富有逻辑和秩序，因此从中挑选的颜色也同样是这样，显著降低设计师依赖”直觉“所带来的主观和不可控。

如何创建一套色彩体系？

Alipay Design团队提过：

以同色系配色为主导，多色搭配为辅。

同色系为统一的色相，使用中可以加深品牌色的感知，可以让界面更有层次，同时可以让界面保持色彩上的一致性；由于业务的多样化，我们需要多色搭配为辅；多色的辅助颜色，也可称之为功能色，可设定不同的任务属性和情感表达；再搭配中性色黑白灰，赋予更多的变化和层次。两种配色通过主次、使用比例，可灵活运用在业务的各个场景中，具有非常好的延展性。

接下来我以DS项目为例进行色彩体系探索——

首先，所有的色彩模型统一采用HSB模型进行，正如Ant Design设计团队说的那样，这个模型利于调整色彩时对颜色有明确的心理预期，同时便于团队沟通。

这里再简单普及下HSB模型。H指的是色相（Hue），S指饱和度（Saturation），B指明度（Brightness）。S控制颜色混入白色的量，S值越高，意味着混入白色的量越少，颜色也就越“纯”。B控制颜色混入黑色的量，B值越高，意味着混入黑色的量越少，颜色也就越“亮”。（通俗点说，它们分别代表了明色区域和暗色区域）

1. 品牌色

Crov Dropshipping基于其时间自由灵活、可兼职副业、成本风险低的业务特征，使得对应的用户群越来越多的集中在年轻一代的e-tailer（线上零售商）当中。他们不同于我们常规认知里那类传统的retailer（线下实体零售商），大部分的DSer拥有自己的事业和工作，为了赚取外快，将其当做自己的副业。因此，年轻化是这类用户群的主要标签。

所以，我们采用了高饱和度、偏向蓝色色相的紫色，来作为crov dropshipping的品牌色。它的HSB值是 （250，80，100）。

2. 基于品牌色生成24色“彩带”

为了覆盖掉Crov DS本身复杂的前后台业务场景，需要额外搭配各类型的辅助色。我们想要提取24类色相，所以直接通过360/24得出了色环中每类色相的基本角度15°。

因此，这里以品牌色色相为基础，在HSB 360°色环中，对色相（H）正向和反向各自±15°，饱和度（S）和明度（B）保持不变，得到24色的色环彩带。

后续我们的颜色体系就在彩带上的24个颜色上面进行提取。

3. 品牌色同色系配色

品牌色同色系是指，根据品牌色不同的饱和度和明度变化，生成不同深浅、不同明暗的一组颜色。同色系配色不仅传达了品牌性，多个梯度的变化也能够适应及通用尽可能多的业务场景，也便于多信息的层级划分。

而同色系配色的输出则遵循了antDesign发明的tint/shade 色彩系统算法，说人话，就是在颜色中分别加入一定比例的黑色或者白色来更科学地生成色阶。

sketch中可以直接将这套算法可视化处理，便于设计师直接生成所有颜色的色阶。需要注意的是明色区（就是上方横向的那块取色区域，白色至纯色时S由0过渡至100）和暗色区（右侧纵向的取色区域，纯色至黑色时B由100过渡至0）遵循了两种不同的规则，具体规则见下：

当S饱和度变化时（明色区域），S值以S/5的结果值为一个增量进行递减，B值以(100-B)/5的结果值为一个增量进行递增。我们品牌色的S和B分别是80和100，所以这里的两个增量分别是16和0。

品牌色在明色区的下两个色阶对应的HSB参数就是（250，64，100），（250，48，100），以此类推。

而当B明度产生变化时（暗色区域），S值以(100-S)/5的结果值为一个增量进行递增，而B值以B/5的结果值为一个增量进行递减。得出的两个增量分别为4和20。

品牌色在暗色区的下两个颜色对应的HSB参数即（250，84，80）、（250，88，60），剩下的所有颜色以此类推。

根据这两个定义规则推导出全部不同梯度的色阶，我们就可以将其作为品牌色同色系配色。

4. 定义辅助色

我们使用品牌色来传达品牌价值，还需要辅助色来满足多样化业务场景的需要，对用户进行不同的情绪引导，同时也可以缓解用户对单一主色产生的视觉疲劳。

辅助色的定义就可以直接用到我们之前基于品牌色所衍生出的24色“彩带”了。我们通过色环形式，来迅速得出品牌色的同类色、类似色、邻近色、中差色、对比色和互补色。

结果见下：

首先，由于相差15°的同类色与品牌色差距过小，色相对比感微弱，传递的调性过于相似，所以这里直接pass。而邻近色生成的粉色和青色在界面中基本不会作为功能色使用，这里同样直接舍弃。

类似色

类似色即色相差在30度左右的颜色，属于较弱对比色。我们基于品牌色的色相各自±30得出类似色。由于H280的类似色调性与品牌色类似，并且色彩体系中需要一个典型的冷色来覆盖一些场景，所以这里使用了H220的颜色作为冷系的辅助色。

中差色

中差色即色相相差90度左右的颜色，属于中等对比色。H340偏粉，与常规红色相差过多，所以这里借鉴了alipay的辅助色校正原则“色相差值不能超过15”，对H340进行了色相校正，调整至H355。

对比色

对比色即色相相差120度左右的颜色，属于强对比色。最后得出的H130调性与中差色的H160过于类似，直接舍弃。H10与H340调性类似，但是可以向橙色系发展，所以微调到同类色进行色相校正。

互补色

互补色即色相相差180度左右的颜色，属于高强度对比色。最后得出的H70偏绿，这里同样进行了色相校正，将其调整为H55。

最后，得出了共计5种辅助色。不过这些辅助色并不能直接使用，还需要进行感官明度的校正。

5. 感官明度校正

感官明度校正方法来自支付宝设计团队，这是是确认辅助色的最后关键一环。每种颜色都有属于自己的“感官明度”，即发光度。品牌色即辅助色的发光度不一致，就会导致视觉上会有明显的明暗差别。所以，我们需要通过发光度来进行最终的颜色校正。

明度较高的灰色意味着高发光度，明度较低则意味着低发光度。保持品牌色发光度不变，我们对其他辅助色进行微调。

我们只需要将那些视觉明暗差距明显的颜色进行调整。注意，并非所有的颜色都要调整到品牌色的感官明度，这些值仅仅是一个参考。最终的校正依然取决于我们的视觉！比如黄色感官明度本身很高，但是视觉缓和、不像绿色那么刺激，所以基本无需校正。

最后得到校正后的如下辅助色。蓝色、绿色、黄色以及红色在界面中可以作为功能色使用，可以分别代表常规、成功、警告和报错状态。而橙色则可以用作突出类的提示信息，它比bold字重要高出一个层级。

6. 辅助色的同色系配色

与品牌色一样，使用tint/shade规则推导出全部辅助色不同梯度的色阶。具体过程不再赘述～

7. 定义文本色

CROV DS的文本色并非纯粹的中性色，我们通过加入一点点品牌色来让文本呈现色彩倾向，以此提升页面的活力及年轻感，同时也可以让界面更加耐看，减缓B端产品长期使用时的视觉疲劳。

具体方法就是，分别在#222、#555、#888、#b3b3b3的一、二、三级中性文本色代表的色块上，覆盖一层10%透明度的品牌色。最后得出了四个层次的文本色。当然，中性文本色你也可以参考antDesign中通过透明度进行定义的方法，不一定需要按照某个具体色值来。

WCAG无障碍测试

我们必须要承认的现实是，设计师所定义出的色彩在mac上看上去是很出彩，但是这并不能代表所有用户。也许在用户中依然有一部分人群，他们的显示器配置低和老旧。而且我们无法判断用户们的使用环境，有可能是在刺眼的阳光下、有可能是在昏暗的环境中。如果色彩不去做可用性测试，在很多的情况下存在体验降低的风险。

而WCAG（Web Content Accessibility Guideline，Web内容无障碍指南）解决的正是这些障碍问题。WCAG中的POUR无障碍原则包括了：易于感知的（Perceivable）、便于操作的（Operable）、稳定理解的（Understandable）、稳定耐用的（Robust）。

而颜色则正是对应了易于感知的这一无障碍原则。网站中的文字和图像应该具备足够高的色彩对比度，使之更易被用户感知识别。

WCAG颜色对比度无障碍的两个标准分别为：「1.4.3条例：最小对比度标准」和「1.4.6条例：加强对比度标准」，分别对应着AA级和AAA级。

AA级的定义为：普通文本的视觉呈现与背景至少要有4.5：1的对比度，大文本与背景至少有3：1的对比度

AAA级的定义为：普通文本的视觉呈现与背景至少要有7：1的对比度，大文本与背景至少有4.5：1的对比度

（这里的大文本即≥18pt常规字重的文本或者≥14pt加粗字重的文本）

这两个条例被大厂们广泛运用到了产品的颜色标准当中。

比如MD规范中的文本移动性规范标准中的数据就是来自WCAG的1.4.3条例标准。

同样，阿里巴巴在前不久发布的B-Design中的无障碍色acs指标和WCAG本质上也是一样。

1. 颜色对比度验证

那该如何验证我们的颜色符合这俩标准呢？

easy。这里直接上个网址，https://contrast-ratio.com/#%23373247-on-%23fff

我们分别在背景及文本录入色值，即可得到最终的对比度数据。比如我录入了白色和一级文本色数值，最后的12.28即两者的对比度，嗯，达到了AAA级标准。

一样的步骤，分别测试了其他文本色的对比度（产品无暗色模式，所以此处仅验证白色背景下的颜色对比度），分别达到了7.59、4.71和2.38。可以看出除了2.38外，其他文本色的对比度均符合可见度标准。

不过WCAG中指出，一些特殊情况下的文本无对比度的限制，其中就包含了表单字段的占位符（placeholder）。而2.38对比度对应的文本色主要用于暗提示，因此这种情况就可以无视掉了~

最后

色彩体系的初步探索到此结束了，不过篇幅原因并没有面面俱到，比如渐变色、实际落地效果等等。另外，一些地方我自己也在摸索阶段，因此很多分析也可能存在不足，文章仅作参考。

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

转自：站酷.         作者：丝绒Store

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

孙子兵法有云：知己知彼，百战不殆。知天知地，胜乃不穷。

“知己知彼”说明了解自己和竞争对手的重要性，“知天知地”则强调了了解行业竞争环境的重要性。能通过竞品分析达到知己知彼、知天知地，是设计师的必备技能。

什么是竞品分析

竞品分析是对市场上存在直接或间接竞争关系的优质产品，进行分类、组织、对比、刨析，总结竞品、以及自己产品的优势和不足，为下一步决策提供帮助。竞品分析维度包含但不限于市场调研、盈利模式、战略定位、产品功能、交互流程、页面框架、视觉表现、文案内容、运营方式等。

竞品分析和市场分析、产品分析、产品体验分析的关系如下：

竞品分析的作用

对设计师来说，竞品分析在了解行业现状、熟悉功能、了解竞争对手、了解用户习惯、明确自己产品定位等方面都有帮助，具体如下：

竞品分析有这么多好处，那么设计师该如何做竞品分析？

设计师如何做竞品分析

1.明确竞品分析的目标

做竞品分析前最重要的是要明确竞品分析的目标。明确竞品分析目标的前提是要“知己”。

“知己”即了解自己产品处在哪一个阶段，有什么问题，接下来打算怎么做或达成什么目标。然后根据产品当前问题确认“要通过本次竞品分析获得什么？”。竞品分析一定是为自己的产品服务的，是通过了解竞品来达成自己产品的某种目的。不能盲目地为分析而分析。

大多数工作流程中，设计师进行竞品分析一般有以下几种场景：

场景一：在产品需求确认之前，通过竞品分析对某功能进行调研，了解行业中该功能的具体设计。

如设计师了解到产品计划对帖子详情页面进行改版，产品需求还没确认。此时进行竞品分析的目的可以是：了解竞品帖子详情页面的设计共有哪几类表达方式，每一类表达方式的优缺点各是什么。

场景二：.在产品需求确认之后，通过分析产品需求，推导出设计目标。此时竞品分析是为产出能满足设计目标的方案服务的。

如产品的设计需求是“提高帖子详情页的点赞数、留言数、评论回复数”。此时推导出的设计目标可能是“营造详情页互动氛围、提高回复评论的效率、减少操作步骤”，对应的竞品分析目的可以是“总结竞品营造社区互动氛围、提高活跃度的方式。掌握竞品回复评论功能中操作步骤少、效率高的设计方式及总结背后原因。”

场景三：产品大改版、重新设计，或者孵化新产品时，通过竞品分析对行业内的产品有一个整体的了解，从而得出自身产品的差异化定位。此时竞品分析的维度会更多元：可以从用户体验的5个要素逐级进行分析，或使用SWOT分析、波士顿矩阵分析等。

场景四：竞品的动态跟进，主要是跟进竞品的迭代情况，以保持长期的“知彼”状态。可以定期（如2周或一个月）对竞品迭代信息进行一次整理。App Store或七麦数据等网站可以查到竞品每个版本的迭代内容。

2.选择合适的竞品

竞品可以选择直接竞品或间接竞品。直接竞品指市场环境、商业模式、目标用户、产品功能都相似的产品。间接竞品可以是市场环境和目标用户相似，但商业模式和产品功能当前不同、未来可能相同的产品。如果只对产品交互流程、页面框架、视觉表现等进行分析，还可以选取功能相似，或者目标用户相似，用户体验好的产品进行分析。

建议通过易观千帆、七麦数据、App Annie等平台了解竞品的数据情况，选取数据排名靠前的产品进行分析。

3.了解竞品定位、盈利方式、用户画像

了解竞品的定位、公司战略、盈利方式和用户画像，有利于我们理解竞品功能的背后的逻辑，利于我们分析竞品为什么设计成这样。竞品分析不只是分析表面看到的功能，还要分析更深层次的原因。

1.了解竞品定位、公司战略途径有：竞品官网、维基百科、拉勾网、天眼查、IT桔子 、Questmobile、App Annie等

2.了解盈利方式的途径有：36 氪

2.了解竞品用户画像的方式有：竞品官网、移动观象台、百度指数、艾瑞咨询等网站。

4.选择合适的竞品分析方法

竞品分析的目的不同，选用的竞品分析方法也不同。以下介绍几种常用的竞品分析方法：

竞品画布

竞品画布是一个简易的竞品分析模板，用一页纸包含了竞品分析的9大问题，如下图。

适用条件：

1.竞品画布可以用在竞品分析之初，用来梳理竞品分析的思路，是竞品报告的MVP（最小可用产品）2.竞品画布包含竞品分析的6个关键步骤，可以让新手快速上手竞品分析。

操作步骤：

按照竞品画布模板上的问题依次的分析解答。竞品画布中包含了SWOT分析，注意优势、劣势是对产品或公司内部的分析，而机会和威胁是对外部环境的分析。另外，在分析第3点分析维度时，建议结合分析目标说明选择这些方式的理由。

优点：竞品画布相对其他方法来说视角更全面，可以结合其他分析方法一起使用。

缺点：对UI/UE来说，针对性不够强。

矩阵分析法

矩阵分析法又称知觉图，主要是通过二维矩阵分析2个关键要素，以了解自己和产品的定位及竞争优势。

适用条件：

1. 矩阵分析法主要用来帮助产品做2个关键要素方面的定位决策。如自营电商平台可用矩阵分析法来决策平台定位是售卖高价格、优质的商品平台（如寺库），还是售卖超低价格、质量一般的商品的平台（如拼多多）。以及帮助产品评估自己的竞争优势，判断产品是否需要重新定位。

2. 设计师还可以用矩阵分析法分析竞品的视觉风格，以辅助定位自身产品的视觉风格。如下图为视频app logo风格的矩阵分析

操作步骤：

（1）确定两个关键竞争要素。这两个竞争要素应该是用户最会关注、会影响用户决策的关键属性，如价格和配置。

如果是设计师用矩阵分析法来分析竞品视觉风格，可选取两对意思相反，对视觉风格有较大影响的关键词。如严肃—活泼、扁平—拟物

（2）绘制横纵坐标轴，把两个对关键竞争要素作为横坐标和纵坐标填入。

（3）针对竞品关键竞争要素的表现，把竞品放到4个象限的对应位置。并思考自身产品在4个象限中的位置。4个象限的空白区域可能存在机会，而4个象限中竞品较多的区域，用户群可能更广泛，也意味同类公司更多。

优点：矩阵分析法的优点在于聚焦于关键的两个要素，可以直观的表现出用户对自身产品和竞品在关键要素方面的认知。

缺点：矩阵分析法的缺点是只能从两个要素进行分析。如果要分析多个因素，可以使用雷达图分析法。

雷达图分析法

雷达图分析法本身是对企业经营情况进行系统分析的一种有效方法。我们可以将它运用到互联网产品用户体验分析上，用图示化的方式对竞品多个维度的优势、劣势作出直观的展示。下图为对母婴类产品拍大肚照上传功能进行的雷达图分析：

适用条件：

分析竞品多个维度的优势、劣势（一般选6个维度分析）。

操作步骤：

（1）定义分析维度

定义分析维度主要是确认从哪几个角度分析具体功能，如选择可用性、防错设计、易懂、一致性等。分析维度的选取也可以参考尼尔森的十大可用性原则，具体选取什么维度应根据分析的功能来定。

（2）对竞品的每个维度进行打分

定义好分析的维度后，我们依次对竞品的每个维度的表现情况进行打分评估，每个维度满分为100分。

优点：雷达图分析法的优点是相对直观、可以分析多个维度的优势，劣势。

缺点：雷达图包含多个维度，每个维度的满分和量级指标是不一样的。需要分析者心中对每一个维度的满分有个大致预期。如流畅度怎么样算90分，怎么样算80分？有可能同一个产品A同学认为流畅度80分，B同学认为流畅度90分，因此分析可能带有一定的主观性。

表格法

表格法主要是用表格来统计竞品功能元素的有无。

适用条件：

1.当我们想较为全面的了解一个功能的概况，或较为宏观的把握竞品的现状，可使用表格法。2.当我们思考某个功能元素是否需要保留，可使用表格法分析竞品的做法。

操作步骤：

（1）画出一个N行M列的表格，首列填入功能元素的具体名称，首行填入竞品的具体名称。

（2）对每一个竞品的具体功能元素进行统计，若某元素存在则在表格上对应位置打勾，不存在则空着。

（3）进行分析小结。

如果某一列功能元素所有竞品都打了勾，则说明该功能元素竞品都有，是个普遍元素，优先级可能较高。如果某个功能元素是某个竞品独有的，则可能是该竞品的差异化功能，可能是竞品的特色。使用该方法时要注意：即使是其他竞品都有的功能，自身产品也不一定要有，最终自身产品功能元素如何定，要根据需求来分析，不可盲目照搬。

优点：表格法的优点在于可以清晰展示功能细节的有无。

缺点：如果页面元素过多会显得杂乱，且表格中没有显示元素的优先级。

多级功能表格比较法

适用条件：当产品功能较复杂，要统计竞品功能元素、全面了解竞品概括，可用该方法。

操作步骤：在表格法的基础上，将功能点拆解成一级功能、二级功能、三级功能，再进行比较分析和总结。具体形式如下图：

优点：可以清晰的展示一级功能、二级功能、以及功能的子级。

缺点：如果层级太多，或者元素太多表格会比较庞大杂乱。

用户路径分析法

用户路径分析主要是把自己假想成用户，体验用户操作某软件中某功能流程，并记录过程。如下图是对亲宝宝拍摄照片用户路径分析：

适用条件：适用于要分析某一个功能的具体交互流程。

操作步骤：

（1）把自己想成小白用户，给自己布置一个小任务，并用竞品软件操作，完成这个任务，如完成上传照片。

（2）操作时按照：发现入口—了解功能—操作上传—跟进操作反馈的步骤进行。

（3）记录自己在体验功能时的感受，如哪一个步骤觉得疑惑，哪一个步骤觉得爽。

（4）梳理一下该功能的用户路径，看看产品设置的路径中有哪些是自己在体验时主要操作的，它们是不是该功能的主要路径？哪些是自己体验过程中忽略的，是竞品有意弱化或者其他，并总结结论。

优点：专注于操作流程中的细微体验，聚焦于发现体验问题。

缺点：自己的操作习惯不一定完全代表用户的操作习惯，带有一定主观性。

产品视觉表达分析法

产品视觉表达分析指对竞品某个模块的页面表达元素进行拆解分析，并总结每种表达方式体现的内容优先级和规律。

适用条件：适用于设计师横向分析某个功能模块的表达方式，及掌握每种表达方式的适用场景。

操作步骤：

（1）将选择竞品具体模块功能进行截图并对比。

（2）提取每个模块的表达元素，并在截图的下方用色块表达提取的元素。

（3）总结共有几种表达方式，每种表达方式的突出对象是什么、适用条件如何、视觉优先级如何。下图为母婴类产品问答功能视觉表达分析。

优点：可以聚焦于单模块的表达方式分析。

缺点：不适用于流程的纵向对比。

5Why分析法

5Why分析法又称5问法，即看到一个现象不断的去问“为什么”来寻找根本原因，以找出解决某个问题治本对策的方法。该方法最初由丰田公司提出并在丰田公司广泛采用。

适用条件：

适用于深挖某个功能表现背后的根本原因。也适用于帮助我们在做竞品分析时养成透过现象看本质的思维习惯。

操作步骤：

（1）把握现状。主要是为了确认问题，调查基本的表现、数据情况等。

（2）原因调查。针对明确的问题，探究背后原因。找到浅层次的原因后，再问为什么，找更深层次的原因，问5次为什么。原因调查过程中要注意：一定要以事实为依据去探究背后原因，不可主观臆想。另外，5why分析法也不一定都要问满5个为什么，重要的是通过多次提问探究到根本原因。

（3）实时措施，纠正问题

（4）吸取教训，从源头上预防错误再发生

5Why分析法用到竞品分析上，重点是在前2步，即把握问题和原因调查。我们不一定要完成5Why分析法的所有步骤，但我们要有问“为什么”的意识，不断的问自己竞品这么做的目的和原因。

优点：聚焦现象背后深层原因，利于我们培养透过现象看本质的思维。

用户体验5要素分析法

用户体验5要素分析指从战略层、范围层、结构层、框架层、表现层5个层级，逐级的去分析。

适用条件：适用于要全面系统地了解某个产品时，对该产品进行全局分析。

操作步骤：

可以按照用户体验要素的5个层级从上到下分析，或从下到上分析。每个层级的分析可以使用不同的分析方法，在此不赘述。需要注意的是使用该方法分析时要避免追求大而全，建议站在竞品分析目的角度，分析时有一定倾向性。

优点：分析较全面，对产品理解会比较深入。

缺点：要真正执行并好不容易，需要对用户体验的5个要素有比较深的理解。

以上就是设计师常用的竞品分析方法的解析说明，我们要根据分析目的灵活选择方法。各方法的对比如下图：

5.了解竞品的用户反馈

除了对竞品进行分析，我们还要关注竞品的用户反馈，了解竞品用户在使用产品过程中遇到的问题，了解用户觉得竞品好在哪里。要对竞品的问题进行规避，对好的使用体验进行分析并学习借鉴。

可以通过网站 https://appbot.co/ 查找App store上的用户反馈。如下图为亲宝宝产品的用户反馈:

6.总结竞品分析结论

不论使用哪一种分析方法，分析完之后都应输出分析小结。在所有分析结束之后，还要输出整体的分析结论。结论可以由定性或者定量分析得出，可以既包含客观分析的结论又包含主观分析的结论。

客观分析的结论如行业市场布局情况、竞品数据情况、界面操作反馈、产品包含的功能点（普遍功能、特色功能、实现程度如何）等。主观分析的结论如竞品的可用性、易用性、操作体验等。

总结

竞品分析是通过分析竞品，得出要解决的问题的结论过程。所以，了解自身产品当前处在哪个阶段，有什么问题相当重要。通过当前问题推导竞品分析目标，再跟进竞品分析目标灵活运用分析方法。竞品分析方法可以有很多，但确认好分析目标才是关键。

参考文献：

《有效竞品分析：好产品必备的竞品分析方法论》——作者：张在旺

《步步为赢 交互设计全流程解析》——作者：董尚昊

《电商类APP：商品卡片竞品分析》——作者：白鹭漫谈

转自：站酷

作者：小夕看太阳 

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

图标在UI设计体系中，是重要......

（此处省略1000字）

直接上图！

上图是我以前绘制的一套图标作品，

感兴趣的话就一起来了解一下我平时是怎么创作一套图标的吧~

制作过程

1、搜集+临摹+原创

积累素材是设计师必备的“基本功”，同时也是“职业病”。

平时我会有意识的在速写本上绘制一些简易的图标，如果在一些APP中看到比较好的图标，我也会临摹下来。

下面给大家随机展示一些我平时绘制的图标。

除了绘制图标以外，我平时也喜欢绘制一些其他的图案。

2、反复打磨

将绘制好的图标利用电脑矢量化后打印出来，根据打印稿用笔标记出不合理的地方，比如：线条太粗了，重心不稳.......对不合理的地方进行反复修改，再次打印，再修改，循环多次后直到得到自己满意的效果，最后定稿。

下面这幅手绘图就是文章一开始给大家展示的图标成品的手绘最终稿了。

需要强调的是，这一次图标的绘制，有一个特殊的地方，其中一个图标是有实物的。（左：实物图；右：对应图标）

3、图标插件化

最后，将图标上传阿里的iconfont网站，制作成字体图标。

然后将字体图标做成插件（我演示的是ps插件，也可以做成其它xd/sketch/figma插件）

制作过程就是给每个图标赋予关键字，然后利用正则表达式，可以方便的搜索所有图标。

不过这个步骤我就不详细解释了，因为

转自：站酷

作者：灰色执照 

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

/引言

“由理有剧”系列以”我们怎样理解暗黑模式“为开篇，缘由作者正在任职的工作是 TO B 产品交互及界面设计，入职时正值公司整体产品线升级迭代，用户界面从浅色模式向暗黑模式探索的阶段。这个探索阶段面临的本质问题便是“到底什么是暗黑模式”，同时“我们为什么要用暗黑模式”的问题也随之而来。

为了给公司同事阐述这两个问题，作者搜集了大量资料，翻阅了相关产品系统所给出的设计文档，重点围绕“什么是暗黑模式”展开，逐步推敲其中的理论原理，总结出便于理解的文字内容。这样做的目的简单有二，一是与产品、开发、测试方面的同事能够达成向暗黑模式优化升级的共识；二是能够让我们的各个产品线更从容地去拥抱暗黑模式的到来。

/“由理有剧”系列篇01：我们怎样理解暗黑模式

文章大纲

1、是什么？

2、为什么？

一、是什么？

随着 iOS 13 和 Android 10 的正式发布，“暗黑模式 (Dark Mode)”一词逐渐走入了我们的视野，“暗黑模式是什么？”这个问题也一度霸占了Google搜索榜首。想要深入了解暗黑模式，也许我们可以换一个角度，从用户界面的演进历史中寻找线索，从而帮助我们更好地理解暗黑模式。

作者自从拜读了《苹果三剑客》，对于用户界面的前世今生才有了更深的了解，苹果的产品发展史，某种程度上也可以称为用户界面的演进史。废话不说，下面让我们一起简单聊聊。

1、原来，“Dark Mode”是用户界面的起源

计算机诞生的早期，其显示器一直以“暗黑模式”面向操作者，其缘由是早期的显示技术一直被CRT主导，CRT释义为“阴极射线显像管”，在19世纪末被研制出来，因为制造原理相对简单，所以CRT一直是早期电脑显示的主力，但在上世纪80年代之前仅支持单色显示。

下面两图分别为苹果公司于1977至1980年间生产发售的 Apple II 及 Apple III 型计算机

图中显而易见，两款计算机的显示方式均为单调的黑底白字或绿字，呈现出一种“暗黑模式”的视觉效果。苹果公司的 Apple II 和 Apple III 两支产品线一直以这种“暗黑模式”面向用户。这也反映了早期的计算机以输入代码执行数字运算作为主要功能，但是这从另一方面反应出：未来计算机会借助不断成长、成熟的电子技术，必将掀起一场接一场的变革，用户界面也随之不断地革新。

2、Apple Lisa（丽萨）奠定了计算机向“图形用户界面”演进的基础

上个世纪80年代之后，CRT彩色显示技术成熟，逐渐流行普及到各个电子行业，但当时主流的计算机操作系统并没有“图形界面”这个概念，所以大部分计算机产品依旧延续了先前黑色背景的显示方式。

直到1983年1月9日，在年度股东大会上，苹果宣布了两款将在未来的计算机行业中占据关键地位的产品：一款叫 Apple Lisa （丽萨，老乔的第一个女儿），苹果第一台（也是全球第一款）基于图形用户界面（GUI）的计算机，也就是 Macintosh 的前身；另一台叫 Apple IIe ，是已获高度成功的 Apple II 系列的新一代进阶产品。

Apple Lisa 向主流个人电脑行业介绍了一种全新的鼠标控制的图形用户界面，宣布向单调的黑白用户界面告别。

运用形象的图标、方便的下拉菜单和重叠的窗口，替代了此前一贯使用的输入文字命令，Lisa的图形用户界面开启了消费者与个人电脑交互方式的革新之路。尽管Lisa存在诸多缺点，如定价过高，功能缺失、运行缓慢等，但它的图形用户界面依然给它赢得一阵喝彩。

Lisa的GUI影响如此深远，以至于诸多电脑制造商纷纷加入鼠标控制的GUI领域，争相模仿。就在Lisa首次亮相十个月后，微软于1983年11月推出了Windows操作环境。（对于此事，老乔总是公开谴责微软的盖茨抄袭他的产品创意，甚至想让盖茨吃官司，两位大佬一直不合也是业界皆知，跑题了...）

///一个有意思的事儿：今年7月份，一位外国的苹果粉在Twitter上发布了一条关于 Apple IIe 型计算机的动态，内容展示了自己使用 Apple IIe 型计算机进行智能化任务的过程，如发送推文、在Evernote中写作、发送电子邮件，甚至控制智能家居（如下图）。要知道，这台计算机生产发售至今已有37年的时间。由此感叹，不得不说苹果对于产品的品控做到了那个时代的。

3、Macintosh（麦金塔）推动了“暗黑模式”向“浅色模式”的迈进

1984年，苹果发布了个人计算机 Macintosh（麦金塔），Macintosh 延续了 Lisa 的图形界面语言，并向世界普及了图形用户界面（Graphic User Interface）的概念，从而开启了以白色为底色的图形交互时代。

Lisa获得的一些成就在 Macintosh 上体现的淋漓尽致，包括灵活的鼠标、点阵影像图、桌面的布局、形象的图标、相称的字体、屏幕上方的下拉菜单和重叠的窗口，这些也得益于日益成熟的显示技术和不断进步的计算处理技术。形象生动的图形设计和界面交互一直是老乔最引以为傲的杰作，不得不说，老乔对于计算机行业甚至是设计行业都有着极高的敏感度和先于旁人的前瞻性。（当然，这里的主语应该是苹果）

Macintosh 产品的成功，不是苹果一味地迎合计算机消费市场，而是利用创新的方式引导市场，引领计算机行业向人性化的用户界面发展、迈进。

至此，我们也彻底地向“暗黑模式”说了再见，全面拥抱“浅色模式”的到来。

4、“浅色模式”成为用户界面的主流

麦金塔搭载的 System 1 打破了字符终端的模式，浅色的界面风格一直持续到 System 6 都没有显著的改变。直到1991 年的 System 7 开始引入彩色，图标也增加了隐约的灰色，蓝色和黄色阴影。System 7 系列中的 7.6 版本正式被苹果公司改名为 Mac OS ，而这一年是1997年。

与此同时，微软的 Windows 从黑屏的 DOS 发展到全屏幕的 Windows 1，再到较为成熟的 Windows 3，最后演变到奠定当今 Windows 界面基础的炫丽多彩的 Windows 95。用那个时代的眼光来看，微软的变化是相当惊人的，微软俨然成为了一匹计算机行业的黑马，一路赶超苹果成为行业霸主，而苹果因为因循守旧，在界面设计上从领先掉到了最后。

此后，从 Mac OS 8 到 Mac OS X Server 1.0 ，苹果一直专注于改善操作系统和优化界面表现，直到2001 年 3 月，经历了四个开发者预览版和一个公共测试版之后的 Aqua 界面终于跟随 10.0 正式发布，发布后改变了人们对计算机界面的印象，在随后的10年里苹果一直沿用这套界面风格。

OS X 系列用户界面较大的更新来自于2007年10月发布的 10.5 Leopard 豹，虽然基本的界面仍为 Aqua 和其糖果滚动条，但新加入了一些铂灰色和蓝色，另外重新设计的 3D Dock和更多的动画交互使得新界面看上去 3D效果更强，此外还改进了 Finder、半透明菜单条并新增了最初只用于 iTunes 的 Cover Flow界面。

整体来说，Mac OS X 10.5 Leopard 豹 这一版本的用户界面相比之前有了翻天覆地的变化，灵活生动的图形语言和交互体验重新得到了用户青睐，苹果也以此，再一次走上了引领潮流之路，使得多彩的“浅色模式”成为用户交互界面的主流。

苹果开创性的界面图形语言也延续到了移动设备领域。

2007年的初代iPhone作为苹果公司第一个移动设备产品（iPhone1代）首次亮相市场，惊艳了整个行业，iPhone搭载的 iPhone OS 和后来更名为 iOS 的系统，延续了 Mac OS 用户界面的设计语言。在历代iPhone上可以看到没有物理键盘侵占空间的屏幕，精美的的方块图案整齐的排列开来，颜色丰富且耐看。

依稀记得当时的我们，还玩着黑白屏幕上的俄罗斯方块，还敲打着物理键盘上的九宫格，挪鸡鸭也表示永不为奴。

2010年堪称iPhone史上最重要的一年，苹果推出了“改变一切”的iPhone 4，并对其用户界面进行了革新。

生动的拟物化设计风格正式成为业界潮流，这也使得UI行业逐渐热了起来，苹果的界面设计规范也顺势成为了主流的移动端设计规范。

苹果以此作为移动端界面设计的基础，沿用到之后的iPhone系列中，期间iOS系统的风格保持依旧，只有 iPhone 5S 搭载的 iOS 7 做出了图标由拟物化向扁平化的改变，但整体都以“浅色模式”作为主流的用户界面视觉模式。

5、“暗黑模式”的正式登场

在 Mac OS 的系统上，用户可以通过“通用设置-外观”来对整体界面进行浅色、深色的切换，可以看出，苹果早已把“暗黑模式”纳入到他们的开发队列中，也就是说，“暗黑模式”的概念主要来源于苹果的 Mac OS，这也为“暗黑模式”的正式登场埋下了伏笔。

自从有了这个概念之后，很多网站都为用户提供了“浅色”和“深色”两套界面，便于用户根据自己的习惯或爱好进行切换。在 Mac OS 之后，很多 App 和 Android 定制 ROM 也加入了所谓“深色模式”的支持，其中也不乏 Web 端的网站、系统等。

北京时间2019年6月4日，果粉期待已久的苹果WWDC19如期而至。

发布会上，库克一如既往地优先调侃了Andriod系统一番….（苹果一直喜欢用数据说话，想了解的同学可以回顾一下发布会的视频）

言归正传，在发布了一系列硬件之后，库克终于介绍了大家期待已久的 iOS 13。新发布的 iOS 13，除了提升系统流畅度和增加系统稳定性外，还介绍了其他提升用户体验的优化。

其中，最为引人注目的“暗黑模式”即将亮相于新系统。

发布会表示，暗黑模式可以“改善电池寿命，改善视力不佳和强光下的人的可视性，以及在弱光环境中更好地使用设备”。

“Wow，beautiful！”、“That’s beautiful！”、“That’s so beautiful！”发布会的主持人一边演示使用在暗黑模式下的App应用，一边不由自主地发出赞美。这也许也受到了老乔的影响，犹如在剧场舞台中心的话剧演员，有着一种无可比拟的自信和气场。

但有意思的一点是，主持人展示了 iOS 13 暗黑模式的开发团队合照，从极客穿着到赛博朋克式的暗黑摇滚装扮，这一戏剧性的变化似乎在告诉大家：“玩，我们也是认真的。”

发布会上简单演示了暗黑模式下的漂亮界面，虽然没有过多地阐述暗黑模式的开发细节，但是这标志着暗黑模式“重新”登上历史舞台。

6、小结

我们从苹果产品发展史中，不难发现苹果对于用户体验的理解是具有创造性的，总是能先于用户发现用户的潜在需求。苹果产品的发展史也可以称之为用户界面的演进史，从早期黑色背景的计算机桌面发展到以浅色为主的用户界面，再到 iOS 13 正式发布的“暗黑模式”，这一过程貌似是在“返祖”，但这些始终是围绕以用户体验为中心的改变和突破。

“暗黑模式”是什么？抛开技术理论，简单理解就是降低用户界面在设备上的亮度，以深色的背景、较低的对比度、灰阶的色彩来呈现用户界面，提升用户使用产品的体验。

二、为什么？

上面我们提到了，根据 Apple 官方的说法，暗黑模式可以“改善电池寿命，改善视力不佳和强光下的人的可视性，以及在弱光环境中更好地使用设备”。

我们可以围绕这个说法，结合我们与设备、环境的关系进行探讨。

1、更好地适应弱光环境

随着人们对智能设备的依赖性越来越强，设备使用的时间也高频覆盖了白天到黑夜，夜晚使用的频率更是与日俱增，所以暗光环境的使用需求被实实在在地摆到了台面上。以设计职业为例，在阿里巴巴 UCAN 2019 设计大会上分享的数据结果显示：设计师群体夜晚的工作时间通常在5-6个小时…

不是在加班就是在加班路上的我们更习惯于在夜间工作，夜间安静的环境更能让我们专注设计、灵感爆棚。但这也在另一方面表达了我们需要设备更加符合我们在弱光环境下的视听需求。

Dark Mode 由此应运而生，使用暗色模式可以缩小屏幕显示内容与环境光强度的差距，可以保证使用者在暗光环境下使用设备的舒适度。也就是说 Dark Mode 可以降低屏幕的整体视觉亮度，降低对眼睛的视觉压力，再也不用怕夜晚的设备屏幕刺瞎我们的双眼了。

但这里我们要理解一个概念，“降低对眼睛的视觉压力”并不等同于所谓的“护眼”，夜晚使用暗黑模式的设备，实际上并没有改变屏幕的“频闪”问题，所以说用户看屏幕的时候依旧会有视觉疲劳的症状，所以各位大佬还是晚上少看屏幕，多爱护眼睛吧。

2、更好地专注显示内容

想象一下，我们在电影院看电影时，为什么要全场关灯？

甚至有些APP， 在影片的下方也会有一个模拟关灯效果的按钮，来让整个手机屏幕变黑， 只剩下视频画面的部分，这都帮助我们可以更专注、更沉浸在当前的内容下，也就是所谓的“沉浸感”。

这其中的原理就是色彩本身是具有层级关系的，深色会在视觉感官上自动后退，浅色部分则会向前延展，这样对比强烈的层次关系可以让用户更注重被凸显出来的内容和交互操作；尤其在信息负责界面内层级关系的合理拉开对操作效率都有明显的促进作用。

这一点在股票交易软件上就是最好的验证，目前来看全世界绝大多数的股票软件采用的都是负极性，也就是暗色底的设计方式。红色和绿色代表的涨或跌（不同国家颜色表示可能不一样）在这样的深色背景下就会特别显眼，还有一些颜色比如蓝色用于某些数据的走势图。这样的显示帮助用户更好地集中精力在数据获取上，更快地做出决策。

3、更好地迎合消费品味

这里所提到的消费品味是来自用户层面的潜在心理需求。

从心理学角度而言，颜色可以影响观者的感受和情绪，这直接影响到用户对于一个事物的判断和选择，这就像我们消费购物一般，有时候我们的消费不完全是为功能、实用性买单，而更加看重的是一个产品的外观属性，当产品的外观符合我们的消费审美甚至超越预期时，我们往往会更快地做出消费选择。

而黑色在积极层面的外在直观表现为高贵、庄严、镇定、神秘，这代表着黑色相比其他颜色存在着更多的可能性，这也造就了黑色成为百搭色，可以作为其他颜色的底色、陪衬色进行使用。暗黑模式也存在同样的心理暗示，沉稳、神秘的黑色会让用户联想到产品的稳定和高级，提升用户的心理信任度，迎合用户的消费品味。

4、更好地改善电池寿命

最后才探讨耗电功效方面的问题，算是一个压轴问题了，在某种程度上说，智能移动设备目前最大的矛盾是性能与电池功效的博弈。如果去微博等社交网站进行搜索可以发现，为了省电而使用深色主题或者说黑暗模式的用户大有人在，尤其是一些中高端采用 OLED 屏幕的手机。这是为什么？

暗黑模式省电的作用来源于 OLED 这种材质的特性，这种屏幕经过多年发展如今已经取代了 LCD 在中高端手机上的地位。和 LCD 依赖于背光不同，OLED 自发光的特性使得屏幕能够独立控制单个像素是否发光，也就是说画面越黑，采用 OLED 屏幕的手机就越省电。下图做了一个简单的理解示例，每一列的格子代表亮度，在不同亮度下有相对应的耗电量显示，闪电的亮度代表耗电量的多少。

理解了简单含义，我们再来看一下Notebookcheck上对于OLED功耗的专业研究数据。在使用 OLED 屏幕时，屏幕上显示的内容决定了功耗。当屏幕基本全黑时（OLED <1% White），OLED 屏在任何亮度下的功耗都保持恒定。显示了白色内容的屏幕，功耗曲线会随着亮度提高而逐渐变陡。

上面的可视化图表相对来说可能需要一定的理解时间，让我们翻译简化一下。

上图显而易见，OLED屏幕的耗电量不仅受到亮度高低的影响，关键在于在OLED屏幕显示了什么，有多少区域是浅色甚至是白色的，有多少区域是深色甚至黑色的，深色区域占比越高，相比较之下OLED屏幕也就越省电。这也就证明：OLED屏幕在使用以深色为主的显示模式时，能够降低耗电量，提升供电效率，也就是改善电池寿命。

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