教程

前段时间做了一组练习作品，其中有一个关于球体的图标吸引了大家的注意，发布之后有很多同学后台留言希望出一个教程。今天黑马哥的教程如约而至，就带大家一起来画个球吧！

一个不一样的球

这个球体图标无需三维软件的辅助，全程都是通过平面类软件完成，我个人是通过 AI 软件和 Sketch 软件配合完成的。实际上通过 AI 软件也可以直接完成，球体造型是通过 AI 软件的 3D 功能实现的。后期的配色、光影处理、质感强化等细节处理，大家可以自由选择熟悉的软件，无论是 PS 还是 Sketch 等均可完成细节刻画。

下面黑马哥就来详细演练一下，案例分为球体造型绘制和质感刻画两个部分。

球体造型绘制

第一步：绘制纹理符号

通过矩形工具绘制几条细长的矩形，数量可以自由发挥，这个数量决定球体纹路的数量。然后全选之后拖进符号面板，无需改动参数直接点击确认即可（符号的名称可以自由设置）。

第二步：绘制球体

通过椭圆工具绘制一个正圆，然后利用剪刀工具剪切一半，形成一个半圆。然后再执行效果 → 3D → 绕转，然后把预览勾选上就可以观察变化了。注意红框标注位置需要选择“右边”，不然无法出现球体效果。

第三步：贴图

保持当前操作不变，点击 3D 绕转弹窗底部的“贴图”按钮，在弹出的面板中符号位置展开选择之前创建的球体纹理。然后调整纹理的大小，让其填充满图示区域，这里的纹理大小和位置可以一边调整一边观察球体的变化，调整到自己满意的效果即可。

第四步：调整空间位置

设置好贴图之后，我们可以通过图示区域去拖动这个立方体，改变球体的空间位置，调整出自己满意的角度之后点击确定即可。确定之后我们需要操作对象 → 扩展/扩展外观 → 然后取消编组，把纹理层分离出来，单独之后便于后期调节。

通过以上的步骤我们完成了球体部分的绘制，这个步骤需要在 AI 软件里面完成。接下来的步骤没有特殊的软件限制，只要能够方便进行渐变色调节和细节刻画即可。

质感刻画

第一步：导入到软件

质感刻画不限制操作软件，直接在 AI 软件里面也能操作，个人习惯运用 Sketch 软件进行细节刻画。直接将完成的球体通过复制，在 Sketch 软件里面粘贴即可（如果是 PS 软件操作类似）。

第二步：刻画球体立体感

突出球体立体感首先对圆形添加径向渐变，中心点设置在偏向于左上角位置，颜色的参数参考图示（颜色大家也可以自定义）。然后再对其添加两次内阴影，用于增强立体感，也能使得圆形更加通透。（内阴影的参数见图示，本案例圆形尺寸为 360*360px）

球体背景层绘制完成之后，再针对纹理层添加渐变色，依然选择径向渐变。角度和中心点设置的范围和背景层的一致即可，颜色的参数参考图示，最终两个图形合起来即可初步完成球体立体感的刻画。

第三步：纹理质感强化

为了进一步突出纹理的质感，将纹理部分复制两个出来，分别进行细节刻画。一个是为了强化色彩感，一个是为了强化光感，两个纹理部分设置参数见图示。

第四步：底部压暗

为了让球体能够显得更加稳重自然，添加一个同等尺寸的圆形作为底部压暗。采用的是线性渐变，颜色和填充的不透明度参数见图示。

最终我们便完成了球体部分的全部案例演练，添加一个圆角矩形作为应用图标的底座，完成整个案例的绘制。

小结

本案例的技术难点主要是通过 AI 软件的 3D 功能实现带纹理的球体造型，其次就是质感刻画的技巧，关于渐变色的调节和内阴影的运用。通过案例的学习可以帮助我们熟悉 AI 软件的 3D 功能运用，也能强化关于营造质感的技巧。

大家也可以举一反三，在创建符号的时候也可以变换更多不一样的图形，也能带来更多不一样的球体纹理效果。希望今天的教程分享可以带给大家一些思路，创作出更多优秀的立体图标设计。

原文地址：黑马家族（公众号）

作者：黑马青年

转载请注明：学U网》今天带你一起来画个球

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

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

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

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

我们先从网上找到一些洋葱的图片，试着把它的形象拟人化，第一个我已经把它想成大脑袋了

这时候我们可以先确定版式，然后用草图将人物场景画出来，不用在意细节。

接下来我们来完善主体形象，提取洋葱特点，一个洋葱人流着泪切洋葱，动作如果不太确定，可以直接搜网上切菜的动作来参考。

这一步做完之后，我们来设计主标题，垫字用矩形工具做出主体结构，再加上一些特征即可。

我们将标题和主体都放入画面中，大感觉就出来了。

接着根据剩余空间的形态，将剩余信息处理好，同时可以搭配英文来丰富层级。

我们将信息放到相应的位置，调整好它们的大小。

接下来开始搭配颜色，这里我们选用了玫红色和绿色来作为底色，两个颜色会使画面增加层次。

这一步做完之后，我们可以再加一些元素来丰富画面，增加视觉感和趣味性。

最后做一个简单的样机效果，那么这个版式练习就完成了。

OK，分享就到这里了，赶紧找个元素来练练手吧，

原文地址：趣设记（公众号）

作者：趣趣熊

转载请注明：学UI网》排版设计总没想法，试试简单图形这样做！！

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

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

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

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

去年国务院印发的《“十四五”数字经济发展规划》文中，明确国家要大力推进产业数字化转型，全面深化重点行业、产业园区，协同推进数字产业化和产业数字化，赋能传统产业转型升级，为构建数字中国提供有力支撑。IoT事业部也提出了“智物智造”战略，助力更高效的硬件智能化和生产数字化，重点投入在工业行业，助力传统企业做数字化转型。

IoT技术在行业中广泛应用，使得我们有机会服务了横跨B端基础云产品、PaaS、SaaS到C端的应用等各领域。由于类型的多样性，服务对象和服务场景的不同，在产品设计上也有不同的设计侧重，尤其是在涉及到B端产品设计时，在尝试结合B端的特征将做C端体验设计的精益化方式融入进去。

工业制造场景下的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咨询、用户体验公司、软件界面设计公司

  案例 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网》案例锦囊｜交互设计中「防呆手法」的巧妙应用！

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、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咨询、用户体验公司、软件界面设计公司