在UI设计中，95%以上的应用会涉及到头像元素，例如消息列表、个人中心/主页、会员服务、评价、排行榜等功能版块，明明用昵称或几个文字就能说清楚的地方，偏偏设计了一个头像、而且还占据该信息组的主视觉。那么，看起来简简单单、或方或圆的小头像到底还有哪些我们不知道的细节知识，今天笔者就通过这篇文章跟大家聊聊头像元素的方方面面，希望对大家有所帮助，欢迎共同探讨，相互交流。

一、头像在UI界面中的作用

1. 多账号区分

出于特殊原因，很多销售、客服等职业，在同一个应用中可能会存在多个账号，需要确认自己当前登录的是哪个账号时，查看头像就是最好的区分（需设置不同的头像）方式，当然也有一些非正常需要的用户有另外的小号，相信头像也会有所区别，其作用这里不便多说，避免「社死」。另外，如QQ登录、微信账号切换页面，也会利用突出的头像来快速区分账号信息。

2. 凸显自身形象

某个用户使用了一张成熟稳重、端庄得体的形象照作为个人头像时，在大多数情况下，这个人一定不是个动不动就爆粗口的键盘侠或网络喷子，虽然“隔着屏幕你又打不到我”，但在发表内容时会注意自己的措辞，潜意识的维护自己的网络形象（头像），这就是现实与网络中头像的人格映射。当碰到匿名社交时，为自己戴上面具后就会变得肆无忌惮，与前者相比，至少不再那么约束。

3. “面对面”沟通代表

很多时候，不管是跟好友聊天、还是在不同的应用中留言评论，有头像的用户总感觉是在进行平等交流，这么说感觉很抽象，下面举个例子：

如果是一个单身男性，当社交应用中有人加好友或请教问题时，针对有美女头像的用户，其响应效率、质量都会比其他头像的用户要高，这是不争的事实（别杠，我们不谈个例），这也说明自己时刻都在注意在对方心中的形象，总担心被对方看“穿”。

二、各场景中的头像类型

1. 默认头像

非强制登录的应用，切换到个人中心时，一般会有一个默认头像占位，可以是人物形象剪影或品牌吉祥物，以确保用户在登录之前保持页面的完整性。另外，即便用户登录后有上传自己的头像，但遇到网络延迟、头像加载失败、匿名操作等情况，系统默认头像都可起到临时替补的作用。常见的默认头像有灰色、彩色两种色彩模式，其二者各有利弊。

1）灰色头像

灰色头像色彩感较弱，可能会导致视觉不平衡，打破画面的美感，但也正好通过这一丝的不和谐，用一种明显且突兀的方式提醒用户去更换头像，强迫症患者几乎无法抵抗。

2）彩色头像

绝大多数是结合品牌色、吉祥物等进行展示，还能起到丰富画面、增加趣味性的作用，相比灰色头像则更加生动，不管用户是否登录、有无更换头像，都能保持界面的视觉平衡，唯一的缺点可能降低用户更换头像的欲望。

2. 系统推荐头像

1）用户选择

大家早期接触的QQ就是最典型的案例，系统提供了多种头像以供用户选择，甚至将部分头像纳入了QQ会员功能，当用户没有合适的图片作为头像且难以抉择时，使用系统推荐的头像不仅能降低用户的选择成本，还能满足部分个性化需求。如果默认头像跟产品相关联，也可作为品牌传播途径，两全其美的选择。

另外，最近很火的匿名社交应用Soul 只能使用系统头像（可自定义调整），不允许上传图片，这源于平台希望用户抛开颜值，通过不同的个体审美、价值观等进行心灵交流，找到真正的灵魂伴侣。同时，因为庞大的用户量，图片是否合法、质量的好坏带来了一系列的监管问题，使用系统推荐头像，在很大程度上能降低图片管理成本。

（PS：强制使用系统头像跟产品定位有着绝对的关系，并非拍脑门决定）

2）系统选择

注册成功后，系统会随机匹配个人头像，相比用户自己在列表手动选择，则多了一份神秘感与期待感，让头像的设置变的更有趣，例如小红书、B站等应用。

3. 文字头像

常出现在移动办公类应用中，由系统自动处理，基于OA类应用社交属性并不强，大多用于内部团队工作中的沟通交流，例如钉钉、纷享销客、飞书等。为了更清晰的获取对方个人信息，这类产品头像更倾向于上传自己的真实照片（部分企业强制），在用户未上传照片的情况下，系统会提取中文名字中的后两个字（两个字的全名显示）、英文名字前两个字母作为个人头像使用，方便团队成员更好的辨认。

4. 群组头像

只出现在群聊中，由多个群成员的头像组合而成，不同的应用对头像上限的设定不同，最为常见的是4个、9个两种。群组头像大多数不支持自定义上传，会根据当前群成员的数量（1-4人、1-9人）进行宫格排列，且不会超出设定的上限，例如钉钉群、微信群、QQ群等。

5. 用户头像组

在部分应用场景中，产品将多个用户头像堆叠组合在一起，通过“羊群效应”引导后续用户产生从众心理，以提高转化率，例如有多少用户已购买、多少用户已中奖等。另外，视频平台的直播间也会将排名靠前的用户头像组合排列并展示出来，吸引其他用户关注。

6. 历史头像

1）同平台

QQ会将用户之前使用过的头像搜集起来并单独提供一个入口，用户需要换头像时，可再次选择使用，虽然重新使用的几率并不高，但也不失为一种情怀，用户能清楚知道头像更换的历史轨迹，满满的回忆感。

设置微信头像时，也可选择使用上一张头像，方便用户设置新头像后反悔，可以理解为撤销本次更换操作，如果需要对图片进行裁切，也方便用户跟上一张头像反复对比。

2）跨平台

第三方登录的标配，用户无需重新编辑，就可以无差别继承第三方账号的头像、昵称等信息，节省了大量的时间及操作成本，例如微信、QQ、支付宝、微博授权登录等。

7. 其他头像

除了上述头像类型外，还有如视频头像、GIF头像、轮播头像等，这些并不常用，了解一下就好。另外就是之前刮起的一阵虚拟形象社交风潮而爆火的捏脸头像，极具针对性的新型头像类型，如果感兴趣，可以去下载Soul、崽崽APP体验，这里不多做赘述。

三、头像状态与附加操作

1. 不同的用户状态

用彩色头像和黑白头像来区分用户是否在线是最直观的表现方式，例如打开QQ好友列表，对方当前是否在线一目了然。除此之外，QQ的在线状态还延展了多种子级状态，例如：离开、忙碌、听歌中、请勿打扰…等，设置成功后，会以小图标的样式重叠在头像右下角，好友看到后能清晰感知当前状态下是否可以立即联系你。抖音采用了较为简单的方式，头像右下角有绿色小圆点显示表示在线，没有则代表离线。

2. 事件通知

常用于非社交类应用（社交应用有更专业的处理方式）的未读消息/事件通知，显示在头像右上角，点击查看后会消失。可设计不同的样式以体现视觉的强弱关系，对用户产生不同程度的引导。

• 弱提示：小圆点提示，填充红色或主体色，提示程度较弱；
• 中等提示：白色圆形+数字提示，数字色彩可以是红色或主体色；
• 强提示：圆形白色描边及红色填充+数字反白，较突兀的提示方式。

3. 挂件/装饰

很多挂件只是纯粹的装饰品，能起到美化、娱乐、趣味性的作用；增值服务、特权服务、认证类的标识更是一种身份的象征，体现出荣誉、尊贵的感觉；有小部分应用将用户的勋章标识重叠在头像某个位置，时刻给用户带来一种坚持完成任务之后的成就感，满足其虚荣心的表现。

4. 交互操作

在很多应用中，个人中心页面的头像区域隐藏了设置功能，点击后会进入到个人主页、个人信息页或更换头像页面。还有一些无实际功能作用、纯趣味化的交互，例如双击微信好友的头像“拍一拍”、拖动即刻个人中心头像会出现一个红心等，不同程度的给用户制造意外惊喜。

还有部分应用，在头像右下角通过有明确指向含义的图标引导用户操作。例如在完成表单过程中需要添加头像，上传成功后，头像右下角会出现删除图标；Soul个人中心头像右下角增加了个性商城入口；QQ、即刻则通过相机图标提示用户点击可直接更换头像，这种引导性的图标都相对较小，需要精准点击，为避免无效操作，在不影响其他交互的情况下，请尽量扩大图标热区范围。

四、方形与圆形的定义

虽然我们用过、研究过大量的互联网产品，但也许真的没怎么关注过头像的形状，以当前几个主流的产品为例，QQ、抖音是圆形头像，而微信、钉钉则是方形（圆角）头像，如果真的要分出个胜负，那么很明显，大部分产品使用的都是圆形。方形和圆形到底有什么区别？设计时该如何选择？下面我们就一起来唠一唠。

• 方形头像对照片的空间利用率更高、降低空间损失，圆形通过裁剪让空间更平衡、看起来更精致；
• 方形对四角、中心点均可构成聚焦区域，使用灵活，圆形则边界完美，没有聚焦冲突，可突出核心；
• 古埃及曾认为圆形是神赐予人们的神圣图形，因图形边界完美，能给人公正、信任感，但矩形却能给人一种专业、稳定的感觉；
• 圆形被认为是活泼，方形则显得比较严肃；
• QQ团队曾给出答案，因产品定位就要是给人一种年轻化、活跃的感觉，且人的脸也接近圆形，裁切后更能凸显人的脸部特征（看脸时代），明显使用圆形更适合。微信设计师的说法是图片本来就是方形（扯远了），方形头像能最大程度的降低图片损失，而且微信的定位相对成熟，方形还能给用户一种稳定可靠的感觉，更符合用户习惯，如果一定要用圆形，将头像处理成圆形即可，方/圆兼具；
• ……

说了这么多，依然不知道如何选择，那么笔者将根据一些常用到头像的三个模块给你一些建议：

• 个人中心/主页：如无特别需要，大部分情况下使用圆形，不会出错；
• 消息列表/即时会话：根据产品定位、上述的参考比较后决定，没有明确的要求，使用其中一种形状后，在其他同等级页面统一即可；
• 评论/交流区：直接圆形，没有为什么。头像本来就小，裁切掉无关信息会更聚焦。

五、头像设置步骤

1. 头像来源

用移动端设备上传头像时，来源主要为系统推荐、历史头像、从相册选择、拍照这几种方式，电脑端因设备限制等原因，一般只有系统推荐和上传本地图片。

2. 上传限制

上传图片时，一般会对图片的格式（JPG/PNG/GIF等）、尺寸（宽*高）、文件大小（多少KB/M）作出限制，这些需要给予明确的提示，避免用户因操作多次失败而受挫离开，同时也能避免因用户不知道平台可使用GIF、视频等头像格式，而雪藏了产品的多元化服务。

3. 图片裁剪

因图片来源、拍摄手法不一，针对横图、竖图，系统会贴着边缘（避免压缩/拉伸）先进行一次自动裁剪进行取方，然后用户可自行调整大小，选取最佳位置。

4. 效果预览

需要给用户提供真实的效果预览图，避免用户因操作失误或对处理后的头像不满意再次重复整个更换流程。所见即所得，通过降低用户重复操作的概率也是提升用户满意度的方式之一。

六、引导用户上传头像

1. 文案引导

当产品要求用户组做某件事情时，即便是为用户考虑，也需要给予一个合理的理由，可使用趣味、情感化或鼓励性质的文案引导用户主动上传头像，例如社交类应用“一切都很完美、就差一个帅气的头像了”、“换个好头像会让更多人认识你”等。或者用户在编辑个人信息时给予鼓励“恭喜你，只差最后一步了，换个头像就十分完美了”。

2. 第三方授权

前面讲到过第三方登录的方式，相信这也是对懒癌症患者上传头像最直接粗暴的方式了。

3. 纳入注册流程

部分社交类应用将上传头像作为注册流程中的必选步骤，任何用户都无法跳过，切记这种方式非必要不可滥用/乱用，这相当于对用户注册增加了门槛，任何产品每多一点操作成本，都会有一批用户离开，需根据产品定位以及强制上传头像的重要性来决定，避免得不偿失。

七、结语

「无头像不社交」，在设计界面之前，设计师应该考虑清楚产品社交属性的等级，再来决定头像在界面中的权重、占比，至于如何使用，还需根据产品的实际情况并结合用户头像的基础知识合理的做出判断。

「麻雀最小、五脏俱全」，头像看似一个很简单的UI元素，但在设计过程中需考虑的知识点还是有很多，这就需要我们平时不断的积累、探索，并多多总结，再融合到实际的UI设计中，做出有理有据的设计。

最后，分享一个图片转插画头像的工具：https://newprofilepic.com，非常好用，如果感兴趣就试试吧！

原文地址：能量眼球

作者：大漠飞鹰CYSJ

转载请注明：学UI网》头像篇 | 帮你快速掌握头像基础设计知识！

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

一、表单的构成

1、表单的组成

按照原子理论，表单应该属于一种“组织”。包括了以下组成部分：

• 标签

主要是用来说明表单数据域的含义和填写内容；当标签无法明确引导用户或者具有一定的内容限制时，需要增加帮助或者说明信息，方便用户更好地填写内容。

• 表单数据域

通常是数据录入型组件，需要用户以填写、选择的方式完成内容输入。

• 操作按钮

用来提交、保存数据信息，完成表单操作。

2、表单的类型

在B端产品审批流程中，不同的用户会面对不同的表单形式。

对于流程发起者，需要填写内容后提交审批，这类表单偏向于任务操作，也是我们最常见、最典型的表单形式。

而对于审批者而言，表单主要是传递信息，审批人依据内容做出审批决策，这类表单偏向于信息展示。由于审批类的表单相对简单，所以我们将主要的精力放在操作型表单上。

二、表单的设计关注点

1、表单布局

表单存在两种布局方式：单列布局和多列布局。

• 单列布局

单列布局信息自上而下，用户视觉动线更加稳定，横向的视觉跨度更短。所以信息阅读和填写的效率更高，是首选的布局方式。但是在长表单场景下，用户需要滚动屏幕才能查看完整的表单信息。

• 多列布局

多列布局下，一屏可以容纳更多信息、屏效更高，有效地避免出现滚动条。对于高频的长表单操作，采用多列布局的方式，可以减少滚动条带来的用户困扰。

当然多列布局表单信息密度也更大。一般为左右两列布局，列数最好不要超过2列，否则会影响用户的填写效率。

常见的搜索表单大都与表格宽度一致，可以容纳3列或4列。主要是搜索关键词与表格一致，业务属性不强，并且表单项没有强制性，用户可以自由填写，不会存在漏填的情况。采用多列布局对用户操作影响不大。

2、标签排列

标签排列方式历来都是设计师比较纠结的问题，常见的标签有3种：左对齐标签、右对齐标签、顶部标签。另外还有内联标签、浮动标签等形式。

先看阅读效率数据。

2006年，有专家就对3种对齐方式进行了眼动仪数据分析。研究结论表明，顶部标签移动到输入框效率最高，只要 50 毫秒；右对齐标签次之，需要 240 毫秒左右；而左对齐需要消耗“500 毫秒”，效率最低。单从效率上来说，肯定首选顶部标签。但是面对不同的场景，需要选择合理的排列方式。

• 顶部标签

（图片来源于网络）

顶部标签的排列方式符合用户自上而下的浏览习惯，标签与输入域联系更加紧密，视觉横向移动距离小。所以信息读取的效率更高。

另外标签单独占据一行空间，信息扩展性更强。问题也显而易见，标签挤占了纵向空间，会增加表单的总体长度。

所以我个人认为，顶部标签更适合信息量不大、简单的表单场景。例如登录、注册等。

• 右对齐标签

（图片来源于网络）

右对齐布局拉近了标签与表单域的距离，并形成固定间距。但是由于标签的长度不同，视线起始点会发生跳跃，从而影响用户的阅读效率。

不过对于普通表单，右对齐标签可以兼顾效率和页面空间，因此在B端产品中应用比较广泛。

• 左对齐标签

（图片来源于网络）

从整体性上来看，左对齐视觉结构性更强，有利于标签信息阅读。用户视线不会受到输入框的干扰，可以非常顺畅地扫视标签，方便用户快速搜寻必填项。

但是由于标签长度不一，为了保证所有标签都可以正常显示，会增加标签与表单域的间距，导致信息读取效率偏低。

左对齐标签可以用在复杂场景中，减缓用户的填写速度，尤其是那些有大量可选输入框，结合必*标识符快速定位必填项。或者在高级设置的场景中，字段信息对用户相对比较陌生时，让用户可以仔细考虑表单中的每个信息项。

• 内联标签

内联标签是将标签放在输入域内显示，标签代替了占位提示文字，告诉用户应该填写什么内容。常见于注册登录页，如下图。

内联标签解决了标签文字过长的问题，并且可以降低表单的视觉信息量。

但是这也带来了另一个问题，就是内置的标签信息会随着内容信息输入而消失。通常仅用于登录页面，因为用户对登录页的内容模式已经非常熟悉了，学习成本很低，不会带给用户困扰。

如果用在其他类型的表单页面，就容易让用户产生疑惑。特别是出错的场景下，信息提醒不到位，很容易增加用户的理解成本和使用难度。

• 浮动标签

浮动标签是指用户在录入时，内部标题（输入性提示信息）进行浮动位移。这在一定程度上弥补了内联标签消失的问题。不过需要额外的开发工作量，并且拓展性不强，不适合作为主要的标签形式应用在业务表单中。

一个系统中最好采用相对一致、稳定的标签排列方式，否则频繁变化的对齐方式也容易让用户无所适从。

三、表单的存在形式

表单信息量可大可小。有的可能只有一个字段，有的可能是包含多层卡片内容，甚至是相互嵌套。不同的表单信息有着不同的存在形式，梳理归纳后，主要有以下5种。

1、即时表单

常见于表格或者详情页面，通过编辑或新增功能触发。即时表单与原有内容保持一致，更强调操作的快捷性。

2、浮层表单

同样是一种轻量化的表单方式，一般用于定向修改特定内容。通常浮层空间较小，不用来承载大量的信息内容。另外浮层紧随修改内容，操作效率更高。

3、弹窗表单

在抽屉组件出现之前，弹窗应该是最为常见的表单交互形式。相比页面跳转，弹窗操作成本更低，但是空间比较受限，应对大表单信息会有一定的难度。另外表单填写时，可能会出现多层弹窗的情况。

4、抽屉

抽屉组件既可以承载较多的表单信息量，又可以和弹窗一样在当前页面完成操作，并且相对于居中弹窗，不会对页面核心内容造成过多遮挡。因此在B端产品中应用越来越广泛。

5、页面

页面表单通常用于信息量较多的场景。一般会增加页头明确告知用户在做什么，同时也要配置返回按钮，方便用户退出表单页面。

以上就是表单基础知识的解析。

下期我们来分析下表单设计的技巧~

原文地址：子牧UXD（公众号）

作者：子牧先生

转载请注明：学UI网》设计基础(6): 表单基础知识解析

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

工业制造场景下的B端软件设计有什么特点？

要了解行业KNOW HOW，光坐在办公室自我分析和信息检索是远远不够的。于是我们实地进入了多家工厂，与用户进行一对多的调研，输出了多份调研报告，整理了工厂用户的一些共性特征及问题。

1. 多角色协同的网状结构

C端场景中的客户就是最终用户，是单线程的线性关系。而在B端场景中，跑通整条链路需要从前期的数据创建，到过程中的生产操作，再到最终数据结果采集和分析。涉及到的用户角色就可能达到十几种，不同行业从业者会带有自己的认知习惯，不同角色之间多诉求也存在较大差异。

2.端侧载体多样化

B端用户触点已由原来中心化的WEB端，扩展到各式各样的终端智能，彼此之间进行着协同的服务。在工业场景中，电脑端作为管理员做工单创建和任务查看等功能的工作后台。手持的扫码智能终端承担着每道工序的过站任务，穿戴设备手表接收任务并给一线工人下派任务，PAD端用来给车间主任查看任务排版和首件检测的载体等。

3.链路长且场景差异大

工业场景的完整使用链路往往都较长，以工厂的一个基础工单流程举例，完成周期从几个小时到几个月不等。每一个链路对应的线下场景也是不同的：有些可以坐在办公室内用电脑完成，有些是站立在车间某个机器上或是一些货物仓库中完成。环境，噪音，光照，用户站立的位置等等都会对信息吸收造成影响，忽略场景做设计，容易出现很多无意义的产品功能。

物联网技术特征下的体验精益化设计

1.真实场景决定一切

在刚开始做工业SaaS设计时，由于对于行业领域了解不够深入，也走过不少弯路。以工单报工举例，我们参考了部分竞品，设计了一套比较通用的报工流程：通过手机获取到工人的工单数据，然后在手机端填写整套的报工流程：点开工单——找到对应工序——填写数据数量——填写和拍摄不良品照片——点击报工按钮——完成报工。

设计完成后，当我们去多家无尘车间调研时发现，手机是不允许被带进车间的，等到工人交接班时再拿出手机去报工，已经是一个非常延时的信息了。其次工人日常会带着硅胶纸套，在使用软件屏幕时是不太方便操作的。同时在工厂内工人的穿着对于感知会有一定影响，所以在这样的场景中手机的报工方案是不会被采用的。

继续观察发现，“扫码终端PDA”是工人每天用的次数最多且非常频繁的手持端，我们通过PDA上“扫码过站”的功能，直接在后台自动判断道用户是否做完某道工序，获取对应人员信息/完成数/良品率等信息后，在后台完成提交。让用户无感知的完成了报工流程。优化后的流程至少节省了用户5个步骤。客户使用后，也非常满意这次报工方式的优化，所以对于行业属性强领域深的，充分调研至关重要。

2.结合多端特征，增大信息感知

想象你来到一个车间，周围冲刺着嘈杂的机械制造声、各类报警设备的闪烁、频繁执行着的机械动作、获取的软件信息受限于眼前这台机器上的屏幕，不同设备的性能不同也进一步导致你在接触信息的效率是在逐渐衰减的。如何能确保自己能在一堆信息中快速获取有效信息并且完成工作呢？

我们将信息分为三类：

(1) “强感知”类：判断为重要状态需要第一时间被察觉的数据。比如设备状态，待办通知，任务计时等。

(2) “可感知”类：容易被查询到的信息，必要的操作功能等。比如扫码操作，过站的数据等。

(3) “无感知”类：非必要且较为繁琐的次要交互行为。这类信息需要被“隐身”，为用户吸收信息减负。比如按键输入替换成扫码输入，手动报工替换由扫码报工等。

以手表举例：作为最贴近用户的穿戴设备，可以配合硬件的振动触感快速传递数据，主要完成“消息下发的接收”，“任务开始的计时”，发生“危险情况的快速上报”等。当后台推送一个任务给用户，在手表桌面会出现任务计时器，当用户逾期未完成，那么任务计时器将提醒用户逾期时间，在顺利完成任务后用户能获得对应的绩效奖励，对于重要信息做强感知的展示，保证工单的实效性和完成率，也能调动用户的积极性。

作为手持扫码终端的PDA：用户的使用场景集中在工序的“扫码过站”上，用户每天扫码次数非常频繁，最多一次高达几百次，我们着重在引导用户使用“批量扫码”过站，通过扫码枪依次扫码进入列表页，一次性扫批量扫入，大幅减低手工操作的频次。过站的状态在PDA上的状态栏采取非常醒目的色系+标识做展示，每个产品的详细信息在同一屏内的下半部分同时呈现出来，让用户易感知到。

3.结合多角色，以任务效率为中心

和物联网场景下C端应用作对比，其用户是单线程的，以单点查看和控制设备为目的，家庭用户需要控制的智能设备数量基本不会太多，如果做了错误的操作，造成的后果相对不会太高。产品功能对于用户来说认知门槛也相对较低。所以在整体体验上对娱乐性要求更高。

再来看看工业场景，用户从D端的开发者到B端管理者、决策人员再到一线工人，角色之间同样是相互影响的，工厂设备数量非常多，一旦操作失误可能会造成不可逆的影响，所以用户对产品的诉求更注重效率的稳定性和操作的正确性。再加上行业属性的复杂程度，对于用户来说上手有一定的使用门槛。

所以在B端场景中，我们定义为以任务效率为中心的设计。对于信息的展示，工业场景需要更关注在重要数据透传上，一定要保证信息是明确，完整且精准的。在设备状态传递上更要保证时效性和高透传性，而对于需要用户操控的区域，需要提供足够的引导和提示，减少误操作的可能性。

不同角色对数据展示的诉求也是不同的，比如在同一个数据分析屏中，对于一线工人，他所关心的是当前这个设备的状态和工单任务任务等具体的数据，车间主任最关心的则是这个车间整体设备是否运行正常及不良品率，而工厂管理层则是关心整个工厂的能耗/人效/产能等。当确定不同用户群体的需求后，针对每一类群体采取对应的数据分层方式，最终完成多套数据展示方案。

在物联网新技术的加持下，制造工艺越来越精益化，工厂职能分工也越加明确，对于过程体验也会有更精细的要求。

从多角色，多端侧，长链路等几个方面，可以看出B与C端很明显的差异性，基于这些物联网的特征，通过精益化设计思路去打磨B端场景，达到较好的用户体验：

(1) 对于不熟悉的行业领域，需要深入理解行业，洞察问题，真实场景决定了产品的最终形态。

(2) 对于端侧的多样化，合理的运用各个端的优势，保证信息传递的有效性，进行结构化的设计.

(3) 对于多角色多场景相互关联的数据网络，针对不同角色的需求做出对应的方案。以用户任务效率为中心。

后续我们也会继续在人，场，设备，数据四个方向，去完善从（设备）上云到（产线）全貌化展示再到（人员）效能的精益化管理，最终（数据）可视化做全方位的数字化升级的理想闭环。

IoT让我们开始重构人与物，物与物的关系， 好的产品体验也就必然需要做到更好的设计品质，更高效的体验流程，并且能在同质化严重的B端产品中，赢得用户认可或好的口碑。

原文地址：AlibabaDesign （公众号）

作者：阿里云loT

转载请注明：学UI网》生产力体验—多端多角色的精益协作

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

RULE 1 断根

「断根」是指将发生错误的原因从根本上排除，不给用户犯错的机会。在交互设计中，最常见的设计方法就是使用置灰 / 禁用效果。

  案例 1    美团外卖对于在休息 / 暂不接单的店铺，除了使用「休息中」的 Tag 进行标注，还使用置灰的效果，让用户对于店铺营业情况一目了然，不会误点进入：

  案例 2     支付宝理财产品阅读协议，在用户勾选前一直会显示「请勾选」，页面的确定按钮在协议签署前为不可点击状态：

案例 3     用户用 Gmail 写邮件时，可以设置邮件为「保密邮件」，收件人将无法进行转发、复制、下载或打印邮件；也可以设定保密邮件的可读时间，到期后邮件内容会自动消失，来确保信息的保密性：

RULE 2 保险

「保险」是指按照顺序运行两个以上的动作才能完成操作，多加一步操作步骤，给用户创造更多的思考机会和时间。在交互设计中的典型用法是增加弹窗、链接等形式提供更多信息，让用户进一步确认。

案例 1     微信转账，连续转给好友同样金额的两笔钱，且第一笔好友未接收，系统会发出提醒，让用户再次确认，避免重复打款：

案例 2     被从微信群踢出的用户，如果再次申请加入该群，该群的管理员可以在申请中查看 ta 曾经在群中的聊天记录，判断 ta 是否适合入群：

案例 3     在一些重要的决策或不可逆的操作行为中，二次弹窗确认尤为常见。比如当用户在填写信息时点击「作废」，系统会给出提示让用户再次考虑：

RULE 3 标示

「标示」是指运用线条粗细、形状、颜色等区别以方便识别，提高易识别度。交互设计中多以颜色鲜亮的小色块、圆点等进行示意。

案例 1     钉钉的图片保存到本地的功能，做了很好的提示，下载过的图片会带有绿色的「对勾」，避免用户多次重复保存图片：

案例 2     微信发朋友圈的分组功能，你可以选择「谁可以看」和「谁不可看」，可以看用的是绿色字，不可以看用的是红色字，很易于区分，不用担心会搞混或错用：

案例 3     钉钉的会议未按时参会的提醒，用红色标签对时间进行重点标示：

案例 4     使用 Sketch 导出同名同格式的文件时，系统会在弹窗中将「取消」作为主按钮的形式呈现，避免用户因为忘记重命名而覆盖之前的导出的同名文件：

案例 5     钉钉和阿里的出差系统打通，当员工提交了出差申请，到了出差的那一天，钉钉上状态会自动切换成 「✈️出差中」，方便其他同事了解你的状态：

案例 6     Google 的标签页，可以被分组，标记颜色和重命名，可以一定程度上缓解因标签页开得太多而找不到的情况：

案例 7     疫情期间，很多小区的大门仅供行人通行，只有个别大门是行人和车辆都可通行。高德地图 App 会给每个小区的门标注好通行权限，方便开车的用户选择合适的门进入小区，不过个人感觉这个信息可以标注得更明显一些：

RULE 4 警告

「警告」是指将不正常或即将要出问题的情况，通过颜色、灯光、声音、动效等明显、特殊的方式进行警告，提醒用户及时修正错误。交互设计可以借鉴工业设计中的报警器等产品的功能，用弹窗、灯光和声音等对用户进行提示。

案例 1     在铁路 12306 上购票时，如果选的列车时间距离现在 1 小时内，会弹出弹窗提示发车时间与现在较近，提醒用户注意行程时间：

案例 2     京东 App 会在用户使用移动网络播放的环境下，提示用户注意流量损耗：

案例 3     上海的买菜 App 在疫情期间菜不好抢，盒马会在你加购每一件商品的过程中，都提示运力不足，让用户再做考虑：

原文链接：长弓小子（公众号）

作者：元尧

转载请注明：学UI网》案例锦囊｜交互设计中「防呆手法」的巧妙应用！

共分为方法和案例两篇。本篇为方法篇。

无论是发现了问题进行集中地优化，还是作为一种优化制度持续优化，优化专项持续的时间都不会太短。为保证顺利进行，在前期需要作出明确的规划。

规划需要结合产品的目标与规划，与产品侧形成合力。所以规划要与产品、技术共同制定。

制定体验规划的五个要素

一般需要明确以下内容：优化范围、问题获取、优化目标、参与人员、时间节点。

体验专项的五个阶段

需要注意的是，规划要清晰、明确、可执行。

可以将整个项目划分为前期启动、问题获取、方案产出、需求落地、项目复盘五个阶段。

每个阶段均需明确：「时间」、「人物」、「任务」、「产出」。

在这个环节，我们需要整理已有的体验问题，并在必要时进行补充调研，对问题有更全面、更细节的认识。

如何获得体验问题？

体验问题通常来自五个方面：用户挖掘、设计走查、竞品参考、老板反馈和产品提供。

如何使用这些方法？

以上方法可以综合使用，例如用户反馈某个功能有问题，可以设计自查看问题是否清晰，可以做用户观察看实际使用情况，可以通过数据分析获取操作细节，也可以参考竞品了解不同的解决方案。

将方法按照使用场景、问题的指向性和结论类型进行分类，大家可以根据具体情况灵活选择：

区分坏点、优化点和需求点

首先我们来明确三个概念：

坏点：有明显体验问题的问题点，体验层面。

优化点：针对一个或多个坏点的解决方案，设计层面。

需求点：一个或多个相关优化点组成的需求点，或目前没有满足的需求，产品层面。

从问题解决角度来说，它们不仅仅是不同阶段的产物：

我们获得问题的最初，坏点、优化点、需求点可能同时出现在各种信息源中，混杂在一起。后续需要把坏点转化为优化点，成为问题解决方案。解决方案再拆分整合成为一个个需求点，进入产品计划，推动落地。

而且对于把握问题的本质，也至关重要：

优化点、需求点，如果追根溯源，都可以对应到体验上的坏点。我们收集到的优化点和需求点，可能并不是当前最好的解决方案，需要挖掘出对应的坏点，制定最优方案。

如何还原为坏点——追问法

只要不断地追问，就可以挖掘出坏点。

例如在审批流程中：

用户：我想要个点一下系统就能发通知给处理人提醒TA审批的功能。（这显然是个需求，需要还原为坏点）

追问：什么情况下要提醒TA审批？

用户：有时候时间紧迫，不审批就耽误事了；有时候虽然不耽误事，可领导没批感觉心里不踏实。

追问：什么时候比较紧迫？

用户：比如考勤，我今天请假，但明天就是考勤截止日了，必须立即批才行。

追问：为什么想要系统发通知？

用户：因为如果我直接提醒老板，我不太好意思，感觉系统提醒能好一些。

ok，至此，我们基本明确了用户的体验坏点：部分紧急流程需要及时去提醒审批，部分流程审批人想尽快结束，但申请人又不想以个人身份去提醒。

这个坏点需要深入洞察审批人未及时审批的原因，再给出解决方案很多，且不一定要采用用户提出的解决方案，而应该综合考虑，选用最佳方案。

归类—推导—转化

1.将问题点归类

分组是为了把同类或者相关的问题点聚合，寻找系统性的解决方案，而不是「头疼医头，脚疼医脚」。

举个例子：

可按照不同页面、控件、功能、流程、系统来进行归类，如：申请表（页面）、目录树（控件）、收藏（功能）、审批单（流程）、导航（系统）。

2.推导出优化方案

这个也是设计师最拿手的议题——「如何解决问题」，即针对一个/组用户痛点去设计方案。这里可以应用平时方案产出的各种推导方法，包括创意方法。

同时应该注意到，问题也许不能仅通过设计手段解决，所以此过程需要产研同学参与，确保方案有效且可实现。

3.转化为具体需求

方案只有转化为具体需求，才能进入产品规划、落地上线。这也是重要的一步。

优化方案和需求的粒度不同：有时候需要把优化方案拆成不同的需求分拆上线，有时候一个需求又能同时涵盖多个优化方案。这需要根据优先价值，结合产品侧的规划进行。

如何判断优化价值

每个问题优化价值是不同的，我们可以从产品侧、用户侧、数据侧三个方面去衡量：

产品侧：看可行性。是否契合产品的中长期目标？是否符合产品的发展节奏？是否易于技术实现？时间资源成本如何？

用户侧：看影响力。是否是用户使用的核心流程、关键页面？影响的用户范围多大？用户角色的权重（主要指B端）是否较大？

设计侧：看价值感。设计的ROI如何？能否体现设计的专业度？能否提升设计的话语权？

设计师虽然主导了体验优化专项，但又不掌握开发资源，如何更好地推动落地呢？需要掌握一些技巧。

推动落地中的四个对齐

对齐是为了及时对齐信息，减少团队中的信息差，使团队成员互通有无。不但可以提升协作效率，还能使大家感到被尊重和需要，使大家拧成一股绳。

四个对齐包括目标对齐、进度对齐、方案对齐和效果对齐。

目标对齐：确保在项目启动和各个阶段产品、设计、技术各方达成统一的目标。可以通过启动会和重要节点会议进行对齐。

进度对齐：项目周期比较长时，需要注意各阶段的进度对齐，掌握进度和风险。方式有排期进度表、定期例会、定期邮件等。

方案对齐：这是比较容易忽略的一点。需要产品、设计、技术甚至用户做方案对齐。我们目标明确，是为了切实解决用户的体验问题的，方案一定要有效，且可以实现。所以要关注方案是否能解决用户问题（方案评估、测试）、是否能够技术实现（方案评审）、方案实现效果（方案验收）。这点做得不好，优化效果就要大打折扣。

效果对齐：上线后需要针对两个效果进行对齐：一是优化效果如何、是否达成了目标（效果评估）。二是项目运行得如何，有什么经验和教训（复盘总结）。及时的团队复盘，有利于大家扬长避短、取得更好的成绩。

形成长期的体验优化机制

对于体验问题，我们不能寄希望于体验优化专项「毕其功于一役」，而是要建立长期的体验优化机制。

包括：定期整理用户反馈、定期走查、定期与产品技术沟通优化计划、阶段性复盘等，建立良好的体验优化通路。

相信看完文章后，大家对「主导和推进体验优化专项」的方法有了一定了解。后续我们将会发布实战篇，分享具体实例。

原文地址： 58UXD（公众号）

作者：环铁艺术家

转载请注明：学UI网》设计驱动！体验UP！高手设计师必备工具包

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

本篇文章将围绕单选、复选、拨动开关三种选项元素的设计细节及使用场景展开分析，希望能帮助新手设计师避开选项设计的误区，为用户打造出更好的操作体验。

一、单选：独一无二

1.什么是单选？

单选按钮最早来源于老式的汽车收音机上的电台频道的切换按键，按下其中的一个按键就成为了被选中状态，其他就会被弹出，用户可通过这种方式快速切换不同的电台。

在UI设计中，单选是指当界面中存在两个或以上的选项时，且各项之间相互排斥，用户仅能在选项列表中选择其中的一个来使用，即便反复选择，最终的结果始终独一无二。单选框有选中、未选中两种状态（极少数不可选），主要通过填充和描边互换的样式将当前状态反馈给用户。

单选是一种较为精简的模式，它至少包含两个选项，为了提升操作效率，需要尽可能的将所有选项展示给用户，无需多余的操作和思考，即能快速完成任务。如果是必填选项，最好提供一个与当前用户较匹配或选中率最大的一个选项作为默认值，即便默认值有误，对用户也不会有什么影响，因为用户本来就需要去操作，可一旦匹配到对应的用户，就能免去这一步的作，且默认值是经过多方面分析、反复推敲后才进行预设，只会是有益无害。

2.单选组件样式

1）按钮式

按钮样式适合用在选项不多、文案不长的场景，可平铺在界面中或以弹窗的方式呈现。例如，购买衣服时，品牌、尺码、颜色都可以设计成按钮样式。

2）圆形组合

未选中都是浅灰色描边的圆形，选中后，Android常见的是描边变主色+内圆点填充，而iOS更多则是描边变填充+对勾图标组合。其实这些不重要，真的没必要纠结是用圆点组合还是对勾组合样式，只要在同一个产品中统一样式即可，用户不会因为这两种表现方式的不同而影响后续的操作。

3）对钩

对勾样式经常出现在弹窗列表选项中，只有选中后才会有“✔”标记，相比圆形组合，给用户的引导性更强。

在单个任务中，首次进入选择页面时，列表中没有任何标记（有默认选项除外），选中条件后，标记对勾的同时，无需其他操作即自动进入下一步任务流程，再次回到选项列表时，系统会标记上次的选择作为参考。另外，这种样式不会太过于局限选项的数量和字数。

4）选择器

通常作为表单项以弹窗的形式出现，适合二级、三级联动选项。例如：选择地址（省/市/区）、日期（年/月/日）、时间（时/分/秒）等选项较多且具有关联性的选项组。

3.单选的使用准则

首先要确保单选组件的可用性，所有单选项需要清晰的呈现给用户，避免嵌套或隐藏二级单选，否则会影响结构的识别性。

其次为确保可读性，单选组件的布局要符合用户认知。选项较少且标签较短时，使用多行多列的按钮式布局比较常见，例如电商APP的商品属性选择等；标签较长则使用圆形图标、对钩样式单列多行显示，例如选择退款原因；联动选项需根据关联的等级数量，在选择器中多列显示，例如三级联动地址，省、市、区三列并行。如果将选项毫无章法的平铺、标签/图标上下排布，会造成视觉动线混乱、内容紧凑及一些不可预知的问题出现。

4.提供默认选项

如果可以的话，尽量给用户提供一个默认选项，这并非随意设定，需要经过多方面分析综合决定。举个例子，你的产品属社交类型，大多数为男性用户，那么将男性设定为默认的性别选择，这类用户就可以直接跳过这一步，节约了大量用户的操作成本，即便面对的是女性用户，这也不影响原本就需要手动选择的步骤。默认选项需合理设定，切不可乱用，否则一些“偷懒”的用户并不会更换默认选项，导致后续数据分析的精准度。

二、复选：循环往复

1.什么是复选？

复选操作不会像单选那样出现信息阻隔，也没有拨动开关那么强的视觉干扰，通常包含一个或多个选项供用户选择，其选项条件不是互斥的，用户可从中选择一项或者多项，具体情况则根据选项条件的限制而定。

1）选择一项

一些设计师将复选理解为多选，且先不论对错，笔者想说明的是，多选只不过是复选的一种选择方式。在真实的设计中，有很多场景是不设限的，我们可以将选中/未选中理解为“是/否、同意/不同意、开启/关闭……”等意思。例如，注册页面中必定存在的「用户服务协议」，单个选项可反复操作；管理系统或B端的批量操作、权限设置等，选择其中的一项也可进入下一步操作流程。

2）选择多项

强制多选一般会设定需选择数量的下限和上限。例如：首次进入某些APP时，需选择个性化定制标签，通常最少不低于3项，最多不超过6项；还有，在填写调查问卷的多项选择时，最少选中两项、不设上限等，这些就是复选中真正意义上的多选。

2.复选的使用准则

相比单选，复选需要配备提交按钮，提交后才会记录被选中的信息。对于批量性的选项操作，复选框的操作效率比拨动开关要高出许多，例如，在某些页面开启/关闭几个权限，每个权限用单独的拨动开关进行控制，完全没问题，但涉及到几十个权限的控制，这种批量操作使用复选框一定是最佳的选择，只要用户能清楚操作之后会发生什么即可。

3.常见的使用场景

1）标签选择

个性化标签选择中最为常见，在标签文字、选项数量较少的情况下，使用外观大小完全相同的标签按钮多列显示，有助于用户浏览，还能节约页面纵向空间，用浅色描边/主色填充或明暗等级来区分选中/未选中状态，部分产品还会在选中的状态上增加一个小图标（✓、+/-），区分会更加明显。这种方式切记标签不能过长，否则可能会导致文字折行或容器内很拥挤，不利于用户阅读。

2）列表选择

当选项过多、标签长短不一时，适合使用列表式选择。WEB端常见的是圆角矩形勾选填充，例如管理系统的商品列表；移动端更多则是原型勾选填充，例如购物车，当然并没有明显的界定，所有页面统一样式即可。

4.未定状态

与单选视觉样式唯一不同的是多了一个未定状态。常见于管理系统或B端，当选项存在多个子级时，只是某些子级被选中，但并未全部选中，这时父级状态尚不确定，即为未定状态。

三、拨动开关：白天与黑夜

1.什么是拨动开关？

拨动开关就像生活中控制灯泡的开关，它是在两个互斥的选项中始终存在默认值、且操作会立即生效的按钮，操作后必定是对立的选项，例如开启/关闭、是/否、同意/不同意等。

2.拨动开关的使用准则

拨动开关必须表意明确，用户在操作之前就能清楚操作后会发生什么，使用时，需遵循以下原则：

• 用于操作后立即生效的场景；
• 标签和按钮是两个分离的视觉焦点，当用户有可能产生疑惑、或标签不足以言明时，需增加辅助文字予以说明；
• 主要用于控制全局，权重较高，针对单个任务流程的控制，请使用单选/复选；
• 默认就是开启/关闭状态，若存在子级，父级关闭的同时将子级隐藏（避免置灰）；
• 当操作有风险时，必须给予明确的提示；
• 避免大面积使用，如果存在太多需要开启/关闭的条件，建议使用复选；

3.背景与文案

拨动开关的背景通常只介于两种状态，关闭状态下为置灰（全服通用），开启后为绿色，也有很多产品将其设定为品牌色，统一颜色样式即可。

辅助文案常见有两种类型，第一种为当前状态反馈，例如：获取设备通知权限“消息推送已开启/关闭”，这种反馈在应用中可灵活运用，尤其是在关闭状态下，可起到一定的引导作用。第二种为标签辅助提示，例如：操作后的好处或风险，告知用户会发生什么，提前让用户有一定的心理预期。

四、单选控件的纠葛

1.单选框vs复选框

是用单选框还是用复选框，似乎是最好界定的，笔者查阅了很多资料，得到的信息是“需选择一个选项用单选、多个选项用复选”，答案出奇的一致，这好像什么都说了（确实如此）、又好像什么都没说（是个设计师都懂），当我们仔细分析之会发现，并非仅仅如此。

在PC端遇到两个对立的选项（如：是/否、同意/不同意、通过/不通过）时，除了用两个单选项之外，也可以使用复选框，尤其是在权限控制中，必定是复选。另外，移动端注册登录流程中，用户服务协议也是最具代表性的复选框（同意/不同意二选一）使用案例。除去这些特殊的使用场景，其他大部分就直接单选。

2.单选框vs拨动开关

仅存在两个选项时，单选与拨动开关的使用，有一些设计师就将其混淆了。笔者曾遇到过这样的设计案例，有产品将性别（男/女）、O2O取货方式（送货上门/到店自取）只有两个选项的任务用拨动开关来呈现，操作后，通过开关上的滑块左右移动+文案辅助来确定当前选中的条件。笔者认为，这种方式不可取，最大的弊端就是在当前状态下，用户并不知道另一个选项是什么，需要通过猜测或试错来确定，无疑让增加了任务的完成难度，也打破了用户对常用操作的固有认知。

至于什么时候需要用拨动开关，上述3-2《拨动开关的使用准则》中有详细说明，除此之外使用单选框，能解决设计中80%的单选与拨动开关的选择性问题。

3.单选框vs下拉列表

选项较少可直接在当前页面用单选框（选择性别）、按钮（标签）呈现，当用户需要在大量的选项中进行选择时，PC端可使用下拉列表，移动端更多使用的是操作栏弹窗或跳转到新页面让用户操作。其实这方面没有明确的界限，需根据使用场景以及选项的属性根据实际情况灵活变动。

五、必备常识和使用技巧

1.选项的几种状态

单选、复选、拨动开关各自都有不同的状态，在设计之前，设计师需要清楚地知道这些状态所代表的含义以及不同的使用场景，避免后续在使用中给用户造成困扰。

2.符合用户认知的控件样式

首先，选项框样式应符合用户认知，不能为了所谓的差异化、个性化打破用户固有认知，而带来额外的认知负担。例如单选/复选常见的是圆形填充+对钩（PC端）、圆角矩形填充+对钩（移动端）两种方式，虽然这并不是唯一，但至少不会出错。虽然鼓励跳出常规的设计思维做出改变，但一切都以不增加用户使用难度、提供更好的用户体验为出发点，不然还不如不变。

3.注意对齐方式

按钮式不用多说，文字跟容器上下左右居中。列表中的对齐方式无非两种，选项框在前，文字和选项框都是左对齐，单选/复选均可采用这种方式；选项框在后，则文字左对齐、选项框右对齐，采用这种方式的单选居多；拨动开关则是全网统一，标签左对齐，开/关右对齐。

4.清晰简短的标签

选项标签需清晰简短、直接表达核心含义，尽量避免否定的表达方式，以免用户产生误解。像拨动开关这种两极分化的选项，当用户不清楚对立的选项内容时，可以使用副标题进行描述，让用户在操作之前有一定的心理预期。

5.批量选择、节约操作成本

虽然都是将选择权交给用户，但面对不同的场景，需提供一个「全选」操作，帮助用户一次完成多个重复的操作，降低操作成本。

例如：B端的内容管理，批量操作能节省很多时间，还能降低因多次重复操作产生的失误概率；C端最具代表性的有购物车、以及初次进入部分应用时的个性化标签选择。

6.触控热区的设定

针对移动端，点击区域切勿直接使用选项框的范围大小，需单独设定热区范围。大家都知道，大拇指在移动端应用中使用频率是最高的，相对来说，要有足够大（非绝对）的操作区域以供手指进行精准交互，以免无效操作或操作失误。需要将文本标签、选项框以及各选项区域均分后四周的留白都作为触动热区，操作起来就会轻松很多。

六、结语

本文笔者主要总结了单选、复选、拨动开关的使用规范及常见问题，不过设计规范只是基于产品本身构建的一个标准，为了约束后续的视觉统一而存在的规范参考。在真实的设计中，这些设计规范并不是唯一，需要根据产品的特点和使用场景进行灵活变动，设计出最适合自身产品的控件才是最重要的。

遵循设计规范只是最基础的标准，遵循的同时跳出规范的束缚才会有创意，这就离不开我们平时的积累，钻研各产品中优秀的设计细节，通过查漏补缺、扬长避短，在其他产品的亮点中找到与自身产品的平衡点并将其融合，这才是我们学习和总结的最终目的。

原文地址：能量眼球

作者：大漠飞鹰CYSJ

转载请注明：学UI网》选项篇 | 单选/复选/拨动开关的使用小技巧！

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司