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咨询、用户体验公司、软件界面设计公司

背景

百度搜索作为传统搜索引擎，内容浏览框架与内容消费体验都更符合图文类资源的特点。在视频化趋势下，用户搜索、浏览、消费视频的需求日益增长，原有的浏览框架导致用户在搜索后难以触达视频结果、消费时难以切换不同场景。此外在视频消费体验上还存在播放流畅性不佳、视频品质感较差等问题，用户感知未到达最佳水平。故我们综合百度自身特点与用户使用习惯，从强化认知、提升品质两方面出发，升级视频搜索全链路框架，提升搜索视频体验及品质。

一、升级视频搜索全链路框架

在对百度搜索所有视频场景梳理的过程中，我们发现用户筛选与消费视频的过程中存在筛选效率低、消费不畅快等问题：在综合搜索结果页由于其他资源类型的存在，用户很难畅快消费视频；视频结果页虽能满足用户消费视频的诉求，但该路径的用户认知较弱，操作成本也较高；此外横竖不同形态的视频各有独立的结果页与落地页，消费场景割裂。为强化用户对视频搜索的认知，降低视频触达成本，我们对视频搜索全链路框架进行了升级。

1.【负一楼框架】前置满足，畅快浏览

综合搜索结果页是用户最先触达的场景，为平衡用户畅快浏览视频与消费综合搜索结果的诉求，我们开拓了负一楼平行框架，即上层页面展示综合结果，下层负一楼页面展示视频结果。当用户搜索与视频关联度较高的搜索词时会自动进入负一楼页面，用户可上滑浏览视频，也可上拉或点击上层面板返回综合结果。设计实施过程中，我们围绕“打造可畅快浏览的视频消费框架”的目标，第一步定义页面框架结构，第二步打磨感知体验，第三步辅助用户认知。

1-1 定义框架结构

首先明确页面层级，从下至上分别为视频结果层、综合搜索结果层与全局框架层。接着划定视频结果与综合结果的布局占比，用户消费视频结果的速度与滑动频率均高于综合结果，为保证视频浏览的顺畅感与操作效率，需保证视频占比尽可能更多。所以综合结果面板仅露出tab，不展示搜索结果，让用户的注意力更聚焦于视频内容的同时保证用户可以来去自由。

1-2 打磨感知体验

确定框架结构后我们分别从视觉层与触觉层打磨感知体验。历史实验数据表明，深色系的背景色比浅色系的背景色更能帮助用户聚焦于视频内容本身，从而提升视频消费数量与时长，于是我们在负一楼通过较深的氛围底色带给用户更沉浸的消费感知，同时也与综合结果形成对比差异，加深用户记忆。在手势切换框架的过程中存在触发框架移动的临界值，当拖动位置到达临界值时会产生1次震动反馈，提示用户此时松手后框架自动切换，以降低用户认知成本。

1-3 辅助用户认知

为辅助用户建立对负一楼新框架的认知，我们通过三阶引导在不同时机引导用户进行不同操作。当一个新用户进入负一楼后【引导1】会通过面板上下弹动的效果引导用户上拉面板，帮助用户理解框架结构，引导用户进入综合结果；进入综合结果后【引导2】通过页面自动下拉的效果帮用户认知返回路径；当用户重新进入负一楼且一段时间内无操作【引导3】会引导用户上滑浏览视频。这三个引导紧密配合，有效辅助用户快速建立全新的使用习惯。

2.【五合框架】强化认知，操作提效

为养成用户视频垂直搜索的认知，缩短综合结果页到视频tab的路径，我们将原有的19个tab框架，精简为仅外露5个tab的五合框架，同时视频tab固定在各频道首位，形成强聚焦，减少信息干扰，降低筛选成本；新增横划切tab手势交互，用户在搜索结果页轻松一滑，即可快速触达视频tab。双管齐下降低用户视频搜索成本，养成百度视频搜索认知。

3.【融合框架】横竖融合，场景打通

在不同资源的分发方式上我们也做了一些改变，过去横版视频由【视频结果页】承载，竖版视频由【小视频结果页】承载，需手动点击tab进行切换，而对应的2个落地页也分别独立，互不打通。随着中视频的发展，横竖视频的时长与内容类型越来越接近，消费场景也逐步趋近。而原有框架消费场景割裂，操作成本高，消费路径长，已不足以支撑用户便捷筛选浏览的需求。于是我们将两个独立的tab合并为视频频道下二级tab，并将两个独立的落地页进行融合。

3-1 融合结果页

场景融合后二级tab供用户初步资源筛选；接下来新增排序功能，供用户进一步针对时效、热度筛选；最后tag search供用户深度精细化筛选，最终通过三层递进式筛选得到精准的需求满足。同时加入智能化交互反馈，跟随用户手势预判当前阶段用户诉求，决定二级tab、排序、tag search功能的展开收起。

3-2 融合落地页

结果页通过合并二级tab有效缩短了用户路径，而落地页作为视频消费的主要场景也存在着消费场景割裂的问题。于是我们将原有的两个落地页进行了打通融合，用户可在一个落地页混合浏览视频，此外还拓展了横屏分发新场景，用户在横屏也可上滑浏览推荐视频。经过以上一系列升级，搜索视频的分发效率进一步提升。

二、提升搜索视频体验及品质

百度搜索结果为多类型资源混排构成，随搜索视频化战略转型，视频资源在结果页占比大幅提升，视频既需遵循整页基础设计规范，保障用户搜索体验一致性；同时又需持续打磨，提升视频资源独有的播放体验品质感。所以如何在保障整页消费体验基础上，最大限度的提升视频品质感是我们面对的一大难题。基于此我们采用两步走打法，第一步视频资源播出来，第二步品质体验提起来。

第一步：视频资源播出来

原搜索结果页各类资源采用统一模版结构，资源展示趋同，视频相关正向描述元素不突出，用户快速筛选、识别视频资源的成本较高，视频播放器较小且不支持自动播放，需点击进入落地页观看消费，整体操作成本较高，导致用户消费路径变长，效率降低。我们将问题归纳分为3类，并逐一击破。

1. 强化视频展示

为解决视频展示不突出，用户难以在众多资源中快速识别的问题，我们优化视频资源卡结构，将播放器按照百度搜索栅格规范放至最大化，强化视频展示。

2. 视频自动播放

同时引入视频自动播放能力，将消费场景前置，缩短路径，使用户方便快捷的在当前页观看视频。

3. 信息合理布局

视频能力升级后，多个引入视频载体的业务同步升级。首先我们对引入视频资源的11个业务进行全面摸底，将信息归纳为两大类：1、通用基础信息   2、定制化信息。接下来制定信息展示原则：通用基础信息为必备，保证视频核心信息传达完整性；定制化信息根据各业务需求自选，确认特殊诉求兼容性。最后根据用户观看和使用习惯将功能、信息进行分区，保障用户统一认知，提升多业务引用效率及后续可拓展性。

第二步：品质体验提起来

视频升级为自动播放后，用户对视频播放、浏览体验的要求随之提高，细微的不顺畅也会被肉眼放大为强烈的卡顿感。故此时升级视频播放品质变得至关重要。我们根据用户消费行为，将优化分为两个维度：单一播放和联动浏览。再将两个维度细分为三种场景：1、单一视频在单页面内的播放；2、单一视频跨页面浏览；3、多视频在单页面轮换浏览。最终确认两大优化方向：播放体验流畅性提升、浏览体验顺畅性升级，并制定针对性解法。

1. 播放体验流畅性-信息交互动效升级

数据研究表明，用户观看视频的深入程度，可划分为3个阶段，我们针对不同阶段精准匹配信息交互规则。第一阶段视频未播放，用户在众多结果中粗略筛选，应尽可能全面的展示信息，辅助用户决策。第二阶段视频起播用户开始观看，此时展示操作功能，并突出展示正向信息，吸引用户点击。第三阶段视频播放5秒以上，用户进入沉浸观看状态，此时各类信息退化，保证清爽、沉浸的消费体验。最后增加信息精细化动效，规避卡顿感，保证视频播放流畅性。

2. 浏览体验流畅性

针对单一视频跨页面消费场景，续播精准度和衔接顺畅性至关重要。针对单一页面内多个视频轮换播放，如何在不影响用户浏览其他资源的前提下，保证多视频轮换播放顺畅性也是重中之重。视觉和听觉是用户获取视频内容的感官，所以视频播放画面、声音顺畅性成为了浏览流畅性的关键因素。所以我们从体验视角出发，建立搜索场景各页面播放、声音双联动机制。

2-1 视频播放联动

首先是视频播放联动，我们将视频播放拆分为起播、续播、连播3部分，分析现状并找出核心问题点。由于页面资源混排，视频化未发力前遗留一系列问题：视频起播门槛高、优先播放逻辑混乱、同一视频播放进度各页面不联动，视频消费不连贯等，已严重影响视频搜索体验与品质感。

• 降低起播条件，视频外露比例由70%降低为超过30%，播放器可视区域满足用户可真实观看条件即起播，强化视频搜索认知；
• 升级优先播逻辑，当页面存在多个视频时，播放器外露比例PK，外露比例大的优先播放，符合用户预期保障观看体验；
• 新增手势联动，当页面存在多个外露比例相同的视频时，根据手势滑动方向判断视频播放情况，智能预判用户观看意图；
• 优化续播交互，支持视频暂停在当前帧，二次起播不再展示封面；点击跳转落地页后返回精准续播点击过的视频，提高消费及分发效率；
• 新增自动连播，在纯视频浏览态场景下，当前视频完播后自动连播下一条，减少操作步长保障视频消费流畅性。

2-2 视频声音联动

然后是声音联动，原搜索场景内各页面以及搜索结果页各视频，声音状态各自独立互不影响，而声音作为视频传达的核心内容之一，状态不联动导致用户针对声音频繁重复操作，各场景割裂感强烈，视频浏览体验极差，故在视频搜索场景下升级声音联动机制。

• 分场景定状态：综合搜索结果页为筛选浏览场景默认无声状态，融合落地页为沉浸消费场景默认有声；
• 交互智能响应：用户有对声音的主动交互行为（佩戴耳机、调节物理声音按键、点击声音按钮）后，切换为有声播放；

• 页面声音联动：在综合搜索结果页、视频结果页任一页面调节声音后，页面发生滑动或跳转，声音状态联动跟随。

写在最后

在搜索视频化进击的过程中，我们从体验视角出发，通过对视频搜索全链路框架的升级，强化了用户视频搜索认知，降低了视频触达成本。通过对视频自动播能力升级、播放器信息布局的统一、播放与浏览体验流畅性的打磨，搜索视频品质感全面升级，用户体验也更加细腻、流畅、自然。经过以上一系列优化后，用户浏览消费视频的数量和时长等指标均显著增长。未来视频化方向的角逐会愈发激烈，我们将进一步探索百度搜索自身特色，以期做体验最好的视频搜索。

原文地址：百度MEUX（公众号）

作者：百度APP用户体验

转载请注明：学UI网》视频搜索体验价值论

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

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

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

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

前言

刷新在产品中属于基础功能，方便用户获取最新动态，是普及度较高的基础功能之一。在设计表达时有系统级表达、自定义设计、多功能结合等，设计发挥的可控性较大。

今天黑马哥就结合一些优秀的线上案例，和大家聊一下关于产品刷新设计的千奇百态，希望抛砖引玉，和大家一起进步。

分享目录

一、关于刷新设计

二、刷新的设计形式

三、线上优秀案例分析

四、总结

一、关于刷新设计

在产品中刷新对于用户来说并不陌生，是经常使用的基础功能，便于用户获取新动态。在一些可以提供内容更新的产品中，刷新获取内容变动是较为常见的形式。

大家都习惯将刷新称呼为下拉刷新，其实刷新的动作不仅限于下拉手势交互，也有产品采用单击和上滑等手势交互实现刷新动作。比如一些产品在滑动浏览内容时，底部标签栏首页图标会变为刷新的操作，通过点击实现页面内容的刷新；也有产品在上滑页面时实时加载完成刷新，就像很多影视类产品或者瀑布流设计的产品。

刷新动作不仅可以满足用户的求知欲，也能通过源源不断的内容增加用户黏性，提高用户的使用体验。

二、刷新的设计形式

简单的刷新动作已经不是简单的设计了，在产品设计师的创新中呈现出了众多的优秀案例，下面为大家梳理一下不同的设计表达形式。

2.1、系统级表达

系统级表达是采用系统默认的一些处理形式，类似于花瓣循环的动态形式，属于比较常规的表达。也有很多产品采用系统级形式，用户理解度较高，设计创新的角度来说欠缺一些，表现形式比较生硬。

2.2、情感化文案表达

为了带给用户更有温度的设计，除了在图形层面进行情感化设计发挥，在文案上面也可以更加情感化。有产品使用俏皮可爱的话术，每次用户刷新都呈现不同的文案，与用户产生情感共鸣。

2.3、动态形式结合

刷新的动态表达形式非常普遍，图形动效和动作演变等，能够体现出加载的动作。动态形式结合可以使得趣味性更强，动画演变的过程也能降低加载等待过程中的焦虑感。

2.4、IP 形象结合

IP 形象结合到 UI 场景中不仅可以强化品牌感，也能带来更加情感化的体验。IP 形象结合到刷新设计中，伴随着动态演变，以此来体现加载的过程。设计形式动感化，趣味性强且感官体验较佳。

2.5、品牌基因结合

立足于品牌做设计，品牌感可以带来差异化的设计表达，也能提高用户对品牌的记忆度。很多产品将品牌 LOGO 图形、辅助图形、品牌字体、品牌风格特征等融入到刷新设计中，带来差异化的刷新体验。

2.6、业务属性结合

根据业务特征设计刷新图形，让用户在刷新的过程中感知产品的业务属性，也是强化记忆点的有效形式。

2.7、多功能结合

刷新设计更多的还是为了给用户提供更多动态内容，除了这个底层需求以外，也有产品结合了多功能设计。比如下拉刷新到一定距离可以激活“二层楼”，进入活动空间或者其他功能模块，也有结合浏览记录等展示。多功能结合赋予了刷新更多玩法，在有限的资源空间发挥更多操作价值。

2.8、其他设计形式

随着体验的重要性升级，产品设计师会在更细微之处探索出更优的解决方案，做出差异化的体验设计。而刷新功能也将会呈现更丰富的设计，从感官层面带来更多视觉感的表现，从体验层面结合更多辅助功能或者业务，发挥更多使用价值。

三、线上优秀案例分析

通过以上的梳理我们对刷新设计有了深入的了解，下面通过一些优秀的线上案例来进行分析，辅助大家掌握更多差异化的设计表达。

3.1、情感化的文案设计

刷新除了在图形设计和动效层面发挥以外，多功能结合和文案设计也是差异化表达的方向。文案提示的设计相对比较特殊，通过不同的文案来打动用户的体验。

喜马拉雅 APP 每次下拉刷新时，都会显示不同的文案内容，有功能引导的提示文案，也有与用户共鸣的温馨提示等。情感化的文案设计让刷新更有温度，不失为一种差异化的功能设计探索。

3.2、动态化 IP 形象

针对下拉刷新这一常规操作，设计形式也是丰富多样。结合 IP 形象进行动态演变完成刷新动作，被很多产品设计师所采纳。

美团外卖就将品牌 IP 形象结合得恰到好处，下拉刷新时两只耳朵摇摆非常俏皮可爱，松开后 IP 形象露出，还配合眨眼睛等可爱的表情动效。情感化设计结合动态表现，拉近与用户之间的亲和力，带给用户更人性化的使用体验。

3.3、刷新带来美食诱惑

在完成刷新功能属性的同时，还能将产品的属性或者服务卖点强化出来，赋予了常规操作更多的功能价值。

麦当劳在麦麦商城栏目的下拉刷新设计中，采用汉堡形象结合层级动效进行表达，让人眼前一亮。动效拉长的汉堡不仅体现出份量感，激发用户的食欲；汉堡形象就十分麦当劳，展现出品牌关联性。

3.4、趣味化 IP 形象

IP 形象结合到刷新设计中的案例非常多，不仅可以带来情感化的体验，也能增加功能操作的趣味性。半次元在下拉刷新时不仅结合 IP 形象，还通过下拉的程度将形象拉长，最后再配合表情和动态营造出趣味性。

3.5、动态 IP 完美结合

转转的 IP 形象头部的转动条是其特征所在，在下拉刷新过程中完美的结合了转动条，还伴随着装饰符号散开的效果。不仅贴切的结合了 IP 形象的特点，装饰元素的动态效果也强化了氛围感，非常符合产品的属性，是一个不错的刷新设计案例。

3.6、品牌化路径动效

刷新设计中采用路径动效的表现形式比较多，主要集中在图形路径动效和品牌文字路径动效，图形通常是品牌 LOGO 为主，这一类比较适合图形趋近于线性的表达中。链家 APP 的下拉刷新就是 LOGO 图形进行路径动效，完美的匹配了图形轮廓，动效的流畅度也比较自然。

从品牌层面着手于刷新设计，如果放弃图形层面的元素选择，品牌字体的选择也是一个思路。得物 APP 将品牌名称的字体直接运用到刷新设计中，以路径动效的形式进行表达，最终将笔画打散散开。设计表达依然延续了品牌感，也区别于其他产品的刷新设计，在差异化方面呈现出了自身的品牌特征。

3.7、一路骑行的芒果崽

芒果 TV 的下拉刷新设计结合了吉祥物芒果崽，下拉刷新的过程就是一路骑行的芒果崽。骑行的沿途中有众多地标建筑的剪影，下拉不松手就会一直处于骑行状态，下拉的反馈体验度做得很好。

3.8、漫步的卡通形象

利用动态卡通形象作为刷新设计案例较多，特别是行走和跑步，这一类都比较贴合刷新这一动态表达。比如在少年得到 APP 中，在下拉刷新过程中以一个背着书包漫步的卡通形象进行表达，流畅的动效完美的呈现了学生放学或者上学时，背着书包漫步的场景。这样的呈现方式不仅贴合功能含义，也能与用户产生更好的情感共鸣。

3.9、业务化的 3D 图标

友啥 APP 利用 3D 图标进行循环切换代表刷新过程，带有业务属性的图标不仅可以直观的突出产品特性，3D 图标化之后视觉感十足。图标切换带来的动效流畅自然，匹配刷新动作的差异化也非常明显。

3.10、刷新动作下的多功能结合

刷新已经不局限于内容更新这一单一需求，一些电商类产品也赋予了刷新多功能的属性，带来更多样化的操作体验。

比如淘宝 APP 首页下拉刷新时，短距离下拉依然属于刷新范围，继续下拉则会提示释放进入淘宝二楼。在保持刷新基础功能的前提下，融入了多功能场景，开发出功能或者活动的全新曝光入口。

在商品详情页时下拉则无法提供刷新服务，为了给予更好的反馈设计，下拉动作便会显示我的足迹。不仅可以在用户习惯性操作时给予反馈，足迹的提供也更方便用户做出选择。

同一个产品也并非只能呈现出一种刷新设计方案，不同的业务场景可以使用不同的表达。淘宝 APP 里面便根据场景的不同提供了多种刷新方案。常规界面的刷新便以品牌字“淘”作为设计出发点，刷新的过程以动态形式表达品牌字，简单粗暴的传递出品牌感。

3.11、结合 Slogan 完成刷新

刷新不仅只是内容的更新，产品设计中呈现出更丰富的表达，比如辅助传播活动、宣传品牌形象和 Slogan 等。产品设计师都在赋予单一功能多重使命，带来丰富多样的使用体验。

58 同城首页在下拉刷新时，除了体现刷新动态以外，也展示了 Slogan “让生活简单美好”。借助刷新入口的曝光度，更快的将产品的定位传递给用户，增加用户对产品的好感度。

3.12、保持格调一致的设计

很多小众的产品在设计上面呈现出比较有格调的设计，区别于常规的氛围营造，设计风格更加简约大气。

屋颜 APP 整体的设计风格就属于比较简约文艺，在下拉刷新的设计中也保持了这个风格特征。以生活物品演变出的线形图标体现刷新的过程，整体的过度和衔接也恰到好处。

3.13、探索式的刷新设计

刷新设计除了图形、动效、文案等层面发挥以外，背景层发挥的案例相对较少，除了配合传播性质的设计。

AcFun 在下拉刷新时，背景层设计成类似于宇宙空间的插画场景，刷新的过程就像探索一样。配合卡通形象左顾右盼的动效，带来的感官效果也是非常不错的。

关于刷新设计的优秀案例很多，这里就不一一例举了，以上案例仅作为抛砖引玉形式的引导。大家根据这个框架多多体验产品，总结更多的优秀案例。

四、总结

刷新设计作为产品中使用较为频繁的基础功能，与用户的接触也是非常密切的，设计的重要性因此不言而喻。无论是突出品牌感、趣味性、差异化还是强化感官层面的体验，或者是多功能结合等，都是产品设计师重点发挥的模块之一。

本文以案例分析为引导，为大家梳理了刷新设计的形式与思路，希望可以抛砖引玉，带给大家更多的设计灵感。总结观点属于个人理解后的呈现，如有欠缺大家选择性吸收和修正补全。

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

作者：黑马青年

转载请注明：学UI网》刷新设计的千奇百态（UI设计）

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

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

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

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

任务处理是体验设计师的一项基本功，任务处理的原则是提高任务完成的效率，同时满足用户体验的要求。任务通常指的是有目的性的工作与行为，例如领导给你一个买烟的任务，妈妈给你一个去菜场买西红柿的任务，这些都是任务，并且都有一个目的。

而行为则是在完成任务的过程中，我们需要做的事情，例如你要买烟，那么你首先要坐电梯下楼，步行到烟酒店，向老板询问要购买的香烟，付款等一系列行为。为了完成任务，用户可能有不同的行为，你可以选择坐电梯，但是当电梯人很多的时候，走楼梯也许是更好的选择，但目标依然不变。

任务与行为都是可以被设计的，通过设计的手段我们可以提高任务的完成效率，提高用户行为准确性。如何对任务和行为进行设计也就是今天我们要探讨的内容。

一、任务流程设计

在数字产品中，有非常多的任务等待用户去完成，有的是用户发起，有的是产品业务引导用户去完成，例如修改个人头像、添加收货地址等等。任务听起来比较抽象，很多设计师不知道怎么去安排任务和处理任务的节点，那么我们来看一下如何完成这样的任务流程的设计。

1、分析任务

假如我们现在需要进行一个家电报修任务流程的设计，那么我们要来分析一下这个任务中需要明确的2个要素：

a) 背景和目标

用户可以通过报修流程自主完成家电报修，预约维修员上门维修。

b) 目标用户是谁

购买过相关产品的用户

2、如何划分任务节点

a) 分析用户行为与触点

要对家电进行报修，那首先要先确定报修的是什么家电，其次需要对家电类型进行选择、输入，然后填写相关的维修信息，例如发生了什么故障，维修地址在哪里，预约上门时间，填写备注，相关服务的说明。最后提交订单并查看服务受理的进度。

那么到底这些任务需要划分成几个界面呢？每个界面放多少内容，很多设计师在这一步就会比较纠结，那么我们就可以把用户行为和触点来进行一些假设，先将这些行为做成卡片。初学者可以先用这个办法来进行梳理，掌握熟练之后自然而然的可以直接进行快速的划分界面。

然后我们将卡片填充到界面容器中，思考当前容器中的信息内容是否会溢出，行为与任务节点是否契合，并对用户行为进行分类，例如填写选择报修家电、填写故障的原因、填写维修地址、预约时间、填写备注属于强关联的行为，而查看服务受理进度则属于下一个任务节点的用户行为，并不能直接在一个界面中填充。于是从这一步来看，任务流程节点可以划分出2个：1.填写报修信息 2.查看报修进度

然后我们继续思考， 填写报修信息界面的用户场景是否较为复杂，是否需要拆分，交互设计的原则并不是路径越短效率越高的，如果单个任务节点需要用户操作的内容过于复杂，也会降低效率与体验。所以在填写报修信息这个节点中，我们可以发现用户在选择报修电器的时候可能会有比较复杂的场景：

① 系统自动调出订单里的家电型号供用户选择

② 自己添加家电，但用户可能不知道自己的要报修的家电是什么型号

有小伙伴想问，既然能够自动调出为什么还要手动添加呢？因为这里还存在一个场景那就是你家的电器是别人给你买的，比如我给我妈家买了一个净水器，净水器坏了我妈想自己通过小程序报修，这个时候系统是无法读取到这台净水器的订单记录的。

然后选择家电时，可能会涉及到多个家电的选择，比如你买了某个品牌的多个产品，那需要从多个产品中选择需要报修的那个。综上所述，可能将选择报修电器这步行为单独做一个任务节点会更好，虽然节点多了一个，但是场景更聚焦，任务看起来也不会那么复杂。

在填写报修信息的时候依然也可以修改需要报修的家电，而不需要再返回上一个节点。

b) 穷举场景，划分核心与支线

当我们划分好任务节点后，剩下的场景穷举也就比较简单了。核心的任务和用户行为我们已经梳理完毕，剩余的支线场景我们再去补全即可。例如提交订单后无人联系，那么可以提供一个催单的功能，如果服务不满意可以进行投诉，对服务过程中的收费项目进行一个说明等等。

c) 用户行为与布局

这也是我们绘制原型和线框需要考虑的，我们需要用什么控件来引导和组织用户的行为，帮助用户完成这次的任务。那么我们一步步来看。

第一个任务节点是选择电器+手动添加，所以我们需要一个能够进行单选（订单列表）的box以及一个手动添加的按钮。同时需要将手动添加后的界面也思考一下，如何让用户快速的进行电器的筛选和添加。这里可以用一个纵向导航，类似商品的分类，同时加上搜索。

这里就要注意了，先给用户添加按钮还是先让用户去选择。大部分的场景还是用户自己进行自购的，所以一般订单都可以直接根据下单的手机号直接读取到，只要登录应用之后。但不要忘了，如果当前购买的产品太多，那么添加按钮会被顶到下方，用户可能会看不到。所以固定在顶部是更好的选择，这里不需要纠结谁的使用场景更多谁放前面的问题。

第二个任务节点在输入报修信息的时候可以自动带入一部分信息，例如下单地址、产品型号等，同时也要支持地址和型号的修改。我们来看一下布局是怎么做的。

在第三个任务节点查看报修进度的时候，比较关键的信息是报修的地址、报修电器以及单号，其次是报修的进度，当报修进度到达排工时，可以给用户工作人员相关的信息。在提交报修单后，也需要提供用户进行客服咨询的功能服务。最后是对本次服务其他支线需求，例如催单、投诉 等。

二、如何解决任务流程中的效率问题

1、任务设定不清晰，复杂且无序

我们先来看下方的界面案例

我们在设置任务流程时，首先要明确什么是核心任务，什么是次要/支线任务。在这个界面中除了底部的核心按钮“生成”以外，还有其他的任务，例如领取、修改、附加险、添加主案、收藏方案、收件人信息填写等。这里就会让用户开始迷茫了，如果我要最终完成“生成保险计划”，我该需要怎么操作？其他的按钮我该如何去点击，有什么顺序，有什么是必填或非必填的吗？

显然，在一个需要有严谨逻辑步骤的任务流中，不适合将所有的任务按钮都布局在一个界面中。这和一些电商的详情是有区别，有人会说那类似电商的详情不是也有很多这样的按钮嘛，除了加入购物车和购买以外，还有领券、查看评价、去店铺主页逛等按钮，为什么它可以这样，而这个界面中就不行呢？

① 这个界面的任务都需要用户进行填写、设置，需要花费较大的认知成本。

② 电商详情的按钮不是根据顺序和流程设置的，而是根据用户的场景和需求，按钮放那边你可以完全不看也不影响你最终的下单。但是这个界面中明显不行，用户在识别这个界面中的按钮和信息的同时会思考，我如果要完成最终的“计划生成”，这些按钮我是不是都需要进行点击，或者是否要按照顺序点击。

所以类似这样的界面我们需要进行线性化，让用户知道哪些任务需要先完成，把任务节点划分清晰，这样用户的效率也会提高。

2、线性任务的容错率

那讲到线性任务不得不提到它的容错率。线性任务经常遇到的几个问题就是

① 让用户经常返回操作修改，降低效率

② 步骤太多用户失去耐心

③ 任务结束进入死胡同没有闭环。

第一种，用户可能频繁需要返回，例如在多层级分类筛选的流程中或者超长步骤的表单填写。这种情况下用户如果对之前的信息要修改，那么就会出现问题。

我们通过合并触点或行为的形式，将可以在一个界面中完成的任务进行组合或提供一个公共页。

但是不管使用哪种方式，依然要分清楚当前任务节点的独立性，如果有行为、场景冲突的情况下是不能合并的，例如需要校验或者必须填写某些信息后才可进行下一步任务的情况下是不可以合并的，也不能使用公共页来解决问题。

还有一种类似公共页的形式，像闲鱼的二手电子产品回收，需要填写相关产品信息。这里其实也可以看作是一个公共页，只是相比传统的公共页形式这里需要填写单个选项少，并且可以直接在公共页中选择，这种形式虽然很像，但是和传统不同的是，他在最初阶段无法看到一共需要填写哪些信息，只有选择完一项才会出现下一项。这里我们也可以猜想一下，为什么一开始不直接把所有选项放出来让用户去修改呢？因为这里的选项也并非是有前后逻辑关系的。

两个原因：

① 由易入难用户更容易接受，初始阶段给予大量选项用户很容易放弃。

② 节省了n步选择的操作。前者选择完一项自动会展开第二项，后者则需要点击-选择-点击，每一个步骤多了一次点击。

所以完全线性的任务流程条件是比较苛刻的，也并不是所有线性流程都不好，要学会甄别。

3、任务的闭环

第二个情况先不去解释，咱们直接看第三个问题，也是一般交互设计容易犯的一个问题。那就是闭环。为什么要闭环，比如你想跟你的女神表白，当你请女神吃了饭看了电影之后，却忘了说我中意你，这是多么的可惜。这是一种情况，还有一种情况就是你表白了，她同意了，你的目标达成了，但是最后让你的女神自己打车回家，让人有点失望。

所以表白要彻底，好人也要做到底。闭环最关键的找到最初的设计目标。例如上一篇文章我们提到的新人限时免费读书的需求，在最后时间截止或者用户领完5本书后，需要再给用户进行vip购买和权益提示，不能直接消失。

还有如果咱们有活动进行优惠券发放的场景，也要注意引导用户使用优惠券或者在可以使用的场景继续逛，而不是让用户领取完优惠券后直接结束任务。

在上文中，我们提到的报修流程，当提交完信息后会需要一个状态页，例如预约成功，然后让用户查看预约的阶段，很多设计师在这步可能会分开设计，先给一个状态页，再在这个状态也让用户点击查看进度。其实没必要直接做在一个界面中即可。

闭环还要注意消除用户的不安全感，例如像饿了么下单后的状态一样，直接去掉返回键，告诉用户你完成了，也没有返回的必要了，你这时候可以去领取金豆兑换商品或者查看订单状态也可以完成订单返回首页。给用户的行为安排的明明白白。

4、任务的逆向逻辑

正向逻辑大家都会做，但是往往会忽略一些逆向流程。例如搜索的逆向流程，如果我们进行多次搜索后再进行返回，是进入到上一个关键词的结果页还是回到默认状态。应该是要回到默认状态页，也就是点击搜索框后进入的初始状态。

另外，逆向流程要注意的是返回上一步后，当前步骤是否需要提供保留提示，例如需要用户大量编辑和填写的表单，点击返回后需要给出弹窗提示。

三、总结

任务流程设计并不难，关注好用户的核心场景，主线流程一定要清晰，不要被支线流程干扰。在原型设计上也要注意信噪比，突出重要的信息与行为引导点。步骤多并不意味着效率低，步骤少也不代表效率高，在成熟期的产品中也要做好a/b测试来多多分析。设计如何落地，如何确定方案，很多时候不是理性的，也没有任何标准，每个人的意见都带有一定的主观性，设计师也在很容易在其中迷失，掌握好客观的验证方法，可以提高工作的效率。

原文地址：应谋鬼计（公众号）

作者： 应骏

转载请注明：学UI网》UI/UX设计师如何处理任务及优化流程

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

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

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

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

❷ 色块的数量要适当控制，太少了显得单调，太多了会很碎。

▲比如上图的色块就过于零碎了。

▲上图就要好很多。

❸ 不要把所有色块都严格对齐，否则会很死板。

❹ 由于几何色块本身比较单调、生硬，所以色块内的信息和图形可以灵活一点，可以增加一些细节，比如装饰元素。

❺ 不一定要把所有的信息都放进色块里，把个别信息、元素放出来，可以使版面看起来更灵活。

下面葱爷给大家分享几个案例，来看看色块排版具体是怎么操作的。

案例一：服装画册目录设计

下图是某服装画册的目录页设计，其实也是用了色块来排版，但是整体很混乱，信息分组不明确，而且很不精致，所以需要对它进行调整。

❶ 原稿几乎把所有信息都放在一个大色块一中，这么做色块就没起到区隔信息的作用，所以我把背景分成了三块（颜色全来自图片），最上面的放标题，下面两块分别放两组内容并对齐排版，使信息更清晰、更易读。配图保留原稿把图片放入方形色块的方式，只是去掉了多余的描边。

❷ 重新设计标题。黑色太过突兀，所以我把它改成了粉色，并给副标题也加了一个绿色块，副标题与标题以及下方的绿色块叠加，既增加了画面的层次感和设计感，也加强了上下两个空间的联系。

❸ 将内文的排得更精致一点。首先，选了一个欧式风格的字体，给内文中的四组信息分别加上序号，在风格与排版上与其他元素形成鲜明的对比。其次，把内文的颜色从黑色改成与对应色块的深色，融合性更好。最后，在小标题和正文之间加入短线条，做区隔和装饰的作用，并适当调整正文的行距。

❹ 用网格系统稍作规范就完成了。

方案二：儿童蛋白粉单张设计

下图是该版面需要展示的主要内容，文字较多，而且基本上是大段大段的，但信息组别并不多，大概可以分为四五个部分。

❶ 将属于不同组别的信息和元素分别放入色块中进行区隔，色块颜色来自于品牌logo和包装。

❷ 这样划分色块层级太少，而且矩形色块太硬，不太适合儿童产品，所以把标题和小标题都单独拿出来了，并把色块做了圆角处理。色块缩小后，产品图片有一半露在外面，正好起到打破方块的作用。

❸ 标题需要突出设计一下，但由于左上角有Logo，所以如果把标题拉大，那么左边就会有点拥挤，右边则会比较空，所以把产品图片和产品介绍的文字左右调换一下更好。功效证明的文字太多，句子也很长，所以我把它分成了两栏，提高文字的易读性。

❹ 把标题字体改成宋体和衬线体，并把产品图片下方的色块改成圆形，加强视觉上的对比效果和灵活性。

❺ 把标题的文字改成右对齐，并跟与下边功效证明文字的右栏对齐，这样左上角的留白会更舒服一些，平衡性也更好。

两个正文的大色块里全是文字所以略显单调，于是我在文字上下加了一组波浪线，细节上会更精致一点，到这里这个单张就排完了。

方案三：移动宽带海报设计

下图是移动宽带的一则促销海报，也是用了色块排版，该画面中的信息其实挺清晰的，主次分明，也有一定的视觉冲击力。问题在于美观性不够、形式过于普通不时尚、排版很呆板，下面我们来对它进行优化：

❶ 将该画面中的信息一一用色块框起来，原方案把“100M宽带优惠用”放在一个大色块里，层级关系太少，视觉变化不够丰富，所以我把它分成了三个色块（由于移动的调性还是比较年轻的，所以我打算用孟菲斯风格来做）。另外，原方案中的优惠套餐被处理成三个很平均的色块，看起来既分散又缺少变化，所以我把他们组合在了一起。

❷ 将“100M宽带优惠用”这几个色块进行适当错位排版，并在其下面增加一个大的色块（可以看作是电视机的屏幕），以使版面变得灵活且主次分明。

❸ 给文字色块加上立体效果，加强版面的空间感和信息之间的层次感。

❹ 只有文字和矩形色块的画面太过单调和生硬，所以我加了一些与宽带相关的图形元素进来，比如代表视频的播放器符号、代表网速快的闪电符号、代表互联网的箭头、代表网线的曲线。整个版面变得生动、活泼了很多。

❺ 在背景中加入网格底纹，使背景与主体形成呼应，视觉上也没那么单调，并把活动时间和办理方式从最下面的色块中调出来放在视觉主体的下方，与其他的文字色块形成对比，

❻ 再调整一点细节就做完了。

色块排版的用法还有很多，通过改变色块的风格、造型、组合方式等等，可以创造出非常多样的效果，所以用色块排版也不一定会很死板、很粗暴，比较适合表现时尚、冲击力强的设计需求，但确实不太适合用于表现高端、高级的视觉，这点需要注意一下。

原文地址：葱爷（公众号）

作者：葱爷

转载请注明：学UI网》用色块打开排版的思路，简单好用!

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

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

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

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

两个元素， 如果一样大，平铺在画面中，就会显得普普通通的，没有任何亮点。
如果我们把其中一个放大，另一个缩小，再来看：

画面是不是有特点了很多，并且有了节奏感， 就连文案排版也有更多的方式。

所以对比就是让画面的两个组成部分/元素，以夸张的手法，布局构图，以让画面产生强烈的反差。以提升画面冲击力，画面纵深，内容丰富度。是非常有效提升画面品质的方法之一。

那大小对比如何玩的精通，玩得高级呢？
我们一起来看一下：

一、人物与人物

1、全身与半身对比

这种半身人物和小人物的对比，或者头部表情眼神与小人物的对比主要可以展示人物细节，后面的人物放大表情传递情绪，前面的人物展示全身，传递状态，可以很好地传递内容，常常用在各类视觉海报中。

2、局部大特写与小人物对比 (下面右侧的图是江湖哥2017年做的图，分析两次了，哈哈，备注下）

这种对比有强烈的大小反差，并且可以很大程度地拉伸画面纵深，表现出很强的空间感！
并且还有一个细节：这两张都是三角形构图，非常稳定。

所以我们在设计的时候要也要注意画面的构图方式，夸张对比同时，要保证画面的稳定和饱满！

3、全身与全身对比

全身的人物对比很小的人物，让画面有更多的空间可以利用， 可以留白想象，也可以打造场景氛围，展示更多场景氛围。

二、人物与场景

1、小场景与大人物

夸张化的对比，让本该小巧的人物矗立在场景里，很容易就营造除了一种巍峨磅礴的视觉感受。

一般需要很高的设计成本，工时不小。简单点的做法我们可以直接在人物下面拼接一些小场景，比如这样：

一些日常小需求中，没有那么多的时间去打磨细节，就可以这样做，既能保证按时完成需求，也能有一定的创意性。

2、小人物与大场景对比

这种方法也非常具有创意性，把一些很小的物体放大，人物缩小， 反差表现两个主体的大小对比。往往也能有出人意料的效果，需要更多的灵感和想法。

总结

创意本身就是打破常规，把不可能变成可能，达到出人意料的效果就是创意。本期分享的大小对比在画面中的各种玩法就是可以很好达成这种目的的方法之一，大家可以多去尝试，和练习，单这一种方法用好了就很牛逼了。

原文地址：菜心设计铺  （公众号）

作者：菜心工作室

转载请注明：学UI网》这设计没创意？你信不信我不干了？

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

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

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

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

一、思考不同场景下的用户需要

原型里的某个页面、组件并不是画好了就万事大吉、一成不变的，交互侧需要分析：在不同场景下用户是否存在不同的诉求？

如顺丰速运，在工作日里是默认【派送到丰巢柜】，而到了休息日则自动勾选了【上门派件】。

正是充分考虑到了【工作日与休息日】这2个不同的场景与用户需要：

工作日：上班不在家，下班可以顺路去站点拿快递

休息日：有时间在家里等、不想/懒得出门去拿快递

通过分析和预判用户的行为，可以有效地减少操作成本、保障产品的使用体验。

二、尽量别让用户离开当前页面

我们在给用户设计一个新的、分支流程时，往往都会选择【新跳一个页面】的方式去处理。

而对于交互需要注意的是：

但并不是所有的新的、分支流程，都需要脱离掉当前页面。有些场景下，新跳页面容易断掉用户的当前任务，再切回来时的操作成本、链路会特别复杂。

比如你在刷朋友圈，此时收到一条消息，此时退出朋友圈回去看消息后，再切回来继续看朋友圈，这个链路得多长…

而对比QQ空间你就知道多香了：

查看QQ动态时有新的消息通知，可以用【小窗口】的方式进行快速查看与回复，用户处理完可以继续浏览动态，当前流程不受任何影响。

再如Edge浏览器，选中某段信息后可以在【右侧边栏】中加载结果。

这样既不用覆盖当前页面 来加载新的结果，又不用新建一个窗口去处理（用户还得切回来），用户可以边看边搜。

三、别忘了特殊人群的诉求

和上面的要点有点类似，同样是需要分析产品里不同的【用户群】，是否需要兼容不同的交互方式。

比如左撇子用户，【右边更容易操作的概念】就不能用在他们身上了。对于那些重要、高频的功能就需要思考：如何更好兼容【左/右手】的操作习惯。

比如UC浏览器的【刷新】按钮，默认是放在右边（顺应最主流的操作习惯），也可以长按它拖拽到左边的位置，这样都能兼顾到不同用户的使用习惯。

当然以上的预判、分析不一定都在画原型/出方案的时候能想到的，还得借助【用户反馈、访谈、后台数据等】等逐步发现和完善用户诉求，这也是交互和产品的工作之一。

四、用更直接的方式告知用户

当采用了某种方式、组件来设计方案后，交互都可以静下来心想一想：是否能更简单、明显一点？

毕竟设计者的理想视角，和使用者的使用视角，有时真的不是同一回事。不同的用户因为【年龄、经历、学历、身体条件】等原因，对同一个事物有着不同的理解。

比如上滑引导，传统的做法可能就是盖一个蒙层引导，跟你说上下滑动可切换视频

而为了更好地帮助用户理解、减少认知漏斗，交互侧可以考虑直接展示上滑的动作，让用户明显看到下面还有视频。

比如抖音的新手引导：

支付宝的这个例子就更加明显了，直接将我们习惯表达的术语，直接转换成最易懂的语言。

五、尽量摆脱组件的束缚

大部分设计者在设计某个页面或功能时，都会优先调取团队已有的设计组件，在大厂里更看重这点。

毕竟能用已有组件解决的，就绝不新增一个样式和代码，对整个产品的调性、交互方式、用户心智等都能保持统一。

实际上是：对设计和开发来说能减少很多工作量…

比如在【日期选择】上，我们的常规思路往往会选择系统组件，让用户在里面选择某一年的1-12个月份。

有条件的话交互也可以考虑：是否有更合适的表达形式？不一定要依靠组件的限制。

比如QQ团队在这点上就有新的突破：用侧边栏的方式里展示日期

这样做的处理有以下优势：

1.首屏内容可以展示更多月份，选择效率更快

2.用户可以一边选择月份，一边看QQ动态

3.更方便快速退出日期

六、维持用户已有的心智

每个人使用APP都存在着一定的【固有理解】，比如下拉=刷新。

在设计交互方案时同样需要注意这点，尤其是那些容易被我们忽略的地方。

举个栗子：iOS在日历里添加日程时，原本设置了「30分钟」的日程时间。

而当你在【开始时间】里修改了日期或时间点后，【结束日期】会自动设置「30分钟」后的时间点。

依然保持着原有「只有30分钟」的心智模型。

当然如果存在【信息变化】需要让用户知道的话，则需要进行一定程度的提示设计了。

七、用易懂的方式处理复杂事物 

交互设计的工作核心，就在于将复杂的产品/用户需求，转换成易懂、易操作的处理方式。特别是那些对用户来说【不知道怎么操作的】。

比如一些叠字（如‘淼’字），用户不知道怎么打出时。除了进行手写外，搜狗输入法中还提供了一个【打出N个组成词的拼音】的处理方法。

如输入3个【水】的拼音，就能得出【淼】字。

对于习惯打拼音的用户，这无疑也是一个不错的处理方法。

再比如：想打出一些不懂的生僻字（如‘卞’字），个人所得税APP里就提供一个【选择笔画数】的方式来帮助用户寻找。

– END

好了，以上老和对【交互价值】的一些小总结，觉得认同的麻烦帮我【点赞/在看/收藏/转发】，写得不对的请轻点喷~

原文地址：和出此严（公众号）

作者：和出此严

转载请注明：学UI网》结合案例 | 思考交互设计的价值！别再说我们只会画原型了!

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

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

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

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