前言

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

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

分享目录

一、关于刷新设计

二、刷新的设计形式

三、线上优秀案例分析

四、总结

一、关于刷新设计

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

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

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

二、刷新的设计形式

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

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

这次的海报案例呈现主要围绕以下三点展开的。

01、3D 膨胀功能

02、3D 凸出功能

03、3D 绕转功能 

除了大家熟悉的凸出和斜角，2022 版本这次的更新新增了对象-膨胀、材质、以及光照，简单的给大家示例看下膨胀的效果。

这是一个简单的几何图形膨胀得到的，效果看上去还是可以的哈，以及添加一些光照。

步骤拆解：大的轮廓由三个描边组合而成，描边粗细设定为 126pt，描边的粗细这里没有绝对的合适的就可以。

选中描边扩展，选择膨胀。

以下是参数设置展示部分，功能本身比较的简单。参数部分仅供参考，没有绝对的数值，具体看实际情况的效果决定。

#01. 对象：深度 10px、音量 100%、其他参数不变

#02. 材质：默认、基本属性-粗糙度 1、金属质感 0

#03. 光照：强度 120% 、旋转 145° 、高度 45° 、软化度 40%、 勾选环境光-强度 50%

最后点击白色尖头标注的部分（渲染），不然最后出来的效果不自然（不理想）。

这是光照选项下的勾选环境光与不勾选产生不同的效果示意图，可以看出区别还是蛮大的。

眼睛部分变成了透明， 这里粗糙度设置为 0，光照设置为标准强度 70%。

 

由于参数设定差不多就不一一阐述了，椭圆眼睛的参数设置如下。

星星的参数设置如下。

给大家一一介绍了参数的设置部分以及不同参数设置产生的不同效果，相信大家心里有了一个大致的了解了。最后简单的排版即可。

这里做了另外一版的海报，功能和参数和案例中差不多，希望可以给大家一些启发。

下图是海报的最终呈现效果。

首先我先做了个虎的字体，此处不暂不讲字体部分。

原先的凸出与斜角呈现的效果并不带任何的质感。

选中字体，选择 3D和材质-凸出和斜角给字体添加材质效果。材质：镀锌铲形图案点击渲染即可。

下图给出了参数设置部分，仅供参考。分辨率可以给的低一些 1024 就可以了，2048 相对效果会好很多，但是电脑会有那么点卡。

Aa. 铲形图案滤镜：哑光、Bb. 渲染设置下的品质：高。

 

下图是铲形图案滤镜三个不同的表现，案例中我选择了#03 相对来说会更好。大家也可以去玩一玩其他的材质以及滤镜。

接着进行适当的排版。

给原图层添加色相饱和度以及黑色纹理（图层模式——线性减淡）。

然后给文字层添加一个斜面浮雕效果，贴合主形象虎字体，让画面更加的自然。

最后做了简单的示意动图。

下图是案例中平面的图形部分展示。

三个图形的参数一样，下图给出了参数设置部分，仅供参考。

这里我并没有点击渲染设置，我们看下前后的对比。选择前者不渲染，出来的效果比要渲染的更自然。

下图是处理好文字编排与图形之前的构图部分（简单的提一提），置入图形部分就完成啦。

文章小提示：

01：手残党可以画一些简单的图形玩一玩（把控好构图啊，文字编排啊）

02：软件自带的材质非常多，个人觉得默认的比较 OK

03：软件对电脑系统的基本要求

04：不要点击高质量的渲染、高分辨率，软件会卡（你试试就知道了） 

那么今天的教程到这就结束了，我们下次见

在日常工作中，与设计师接触最多的角色就是产品经理（以下统称PM）了，根据他们的需求产出设计，也是设计师的主要工作内容之一。有些设计师会直接在产品原型的基础上进行细化，这样确实能节省很多思考和沟通的成本，有利于在短时间内快速交付。而有的设计师，则习惯把产品的原型先放在一边，先追溯需求的背景和目标，最终再在具体的需求上发力，产出一个截然不同的方案。

哪一种方式更好呢？这是借用一个大家都耳熟能详的故事：福特在设计汽车之前，到处去问人们“需要一个什么样的更好的交通工具？”，几乎所有人的答案都是 ── 一匹“更快的马”。

“更好的交通工具”代表“需求”；“更快的”是人对于“需求”的“期望值”；“马”是人对于解决这个“需求”的假设形态。类比到我们的工作，PM产出的原型，就是最终形态的假设，这个假设形态是否合理，取决于PM对于目标的理解程度和思路的开阔程度，也就是说，如果PM刚刚接手这个项目、还没来得及充分消化，或是欠缺行业解决经验、解决思路不够开阔，那么TA的原型很有可能存在漏洞，这也是很多需求反复变动的原因之一。当然，也有很多PM出原型，只是为了给设计师提供一种思路，实际合作时会给足设计师发挥空间。因此，设计师在设计之前的深思熟虑和充分沟通，是很有必要的。

今天要分享的这个案例，就属于PM给我一个思路，让我自由发挥的情况。需求背景如下：线上面试作为家政业务连接和转化的核心场景，家政从业者（以下简称阿姨）在面试环节中的临场表现是成单的关键因素。面试过程中，客户会问一些自己关注的问题，比如阿姨的工作经历、职业技能等，PM希望在客户侧提供一些常见的问题，并在阿姨侧提供与问题对应的回答要点，从理论上来讲，这种一一对应的问答，能够提升阿姨回答的准确率和客户满意度。PM给了我以上原型图（如图2），问我是否可以通过加强发送按钮的引导，来保证阿姨侧可以针对性地显示对应问题的指导答案。

经过分析可知，一一对应的问答引导是为了提升阿姨的面试表现，以达到提升客户满意度，从而提升面试签单转化的目的。那么，这是否是一个恰当的假设呢？问答能一一对应的前提是：客户要在面试环节点击先发送按钮，阿姨侧才会有对应的答案，这显然会增加客户侧的认知和操作成本，并打破面试的沉浸体验；同时，阿姨侧显示对应答案就能让阿姨对答如流，只能停留在理想层面：屏幕上密密麻麻的文字，有加重阿姨认知负担的风险，而客户也不会为对面死死盯着屏幕、念着标准答案的阿姨买单。经过一番分析讨论，PM同学也放弃了这种假设。

要想真正地解决问题，要先找到问题的本质。连接转化的关键因素是“人”，只有了解到他们的真实诉求，才能提供有价值的功能。

首先，我们要“源于用户”：把自己当成用户，通过真实场景的还原，思考“我”要的是什么（目标），什么能帮助“我”作出正确的决策（必要条件），什么能让“我”更容易更快速决策（重要条件）。

在这个案例中，我们要让自己在客户和阿姨两个角色之间切换。

当我们把自己想象成客户的时候，会发现在经历了线上查找阿姨-查看阿姨详情之后，我们已经按照我们的预期对阿姨们进行了一次初筛；再进入到面试间时，我们的关注点不再是些通用的问题，而是去确认一些在之前环节看不到的「隐藏信息」，比如：阿姨的性格、沟通能力、应变能力、处理特殊情况的经验等。

当我们把自己想象成阿姨，那么我们的目标就是通过好的表现，来获得这个工作机会。在视频面试的过程中，我们很少遇到千篇一律的客户，他们有着不同的需求和侧重，因此提问的内容也千差万别。另外，在很短的时间内表现自己的优势，对我们而言也有一定的挑战，由于学历和职业属性限制，我们中有很多人无法在互动中做到灵敏的反应和充分的表达。因此，我们希望在面试之前，能有人指导我们总结个人优势、告诉我们面试中要注意的点、并通过模拟面试锻炼临场反应能力，为真正的面试做足准备。

不仅如此，一次成功的服务达成之前，通常需要客户和阿姨分别进行多人多轮面试，无论是客户和阿姨，都会面临对精力和记忆力的双重消耗。面试间的面试效率和记忆辅助工具，就显得尤为必要。

经过两个角色的场景还原，我们明确了用户的核心诉求，很显然，依靠客户侧的通用提示问题和阿姨侧的答案模板，离解决核心诉求还有很大距离。那要如何解决呢？

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

作者：环铁艺术家

转载请注明：学UI网》设计进阶:一个案例,掌握设计价值密码

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

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

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

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

教程

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

一个不一样的球

这个球体图标无需三维软件的辅助，全程都是通过平面类软件完成，我个人是通过 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咨询、用户体验公司、软件界面设计公司