背景

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

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

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

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