本篇文章是承接《产品解决问题，什么解决「产品的问题」》、《设计定义专业，什么定义「设计的专业」—— 阿里云设计中心年鉴》的内容。年鉴的第三篇，走进“数字”世界；比起这些宏大的视角，我们更希望和你一起推敲每一个细节。

如何构建一个数字世界？

构建数字世界分为三步：

① 数据原料的采集与转译

② 数字世界的生产与加工

③ 设计过程的成本管控

 

数字世界的血液从哪里来？

数据是数字世界的血液，那么数据从哪里来？将空间数据采集后，我们进行标准化处理、融合，用于空间展示与计算；通过对环境、建筑、城市道路数据编辑能力，为生成3D城市（世界）提供完备数据。

                    

                    

空间构建平台 _

 

数字世界的构建就是建个模么？

孪生不仅仅停留在表面，而是由底层数据驱动、可以对物理实体流程模拟、结构模拟，甚至可以达到对物理的实时优化与反控。

                   

                    

                    

怎么理解数字世界的生产加工？

这是一种很“工程化”的设计流程，无法通过设计稿“所见即所得”，需要在了解数据的特性基础上，同工程师一起，通过算法决定建筑的形态，通过视觉设计规则决定建筑的样式，通过场景编辑器决定物理世界的表现形式和规则。

                   

                   

DATAV _

 

如何降低设计成本提高效率？

针对大屏搭建成本高、周期长、我们的方法是从生产的各个环节进行优化，如提供涵盖行业特色场景的大屏模板，建立设计资产库、数据映射视觉设计；同时，DataV的智能设计 AiVisLab提供的智能化搭建与编辑方式（识图搭建，美化工具箱，自动可视化等）以及Visbar的资产沉淀让搭建设计成本更低，提高搭建效率。

                    

                    

                    

自动化，智能化，产品化

设计预设，模版等 _

 

如何把图形引擎能力抽象出来，服务更多的场景？

 

三维场景和动态数据效果，是如何做到的？

我们通过提供便捷的数据服务一键生成三维数据基底、通过设计资产预设，后期环境设置等完成从物理空间到数字空间的转化；同时在数据业务展示层，我们有一套完整的图元系统贯彻组件支持数据展示；而在信息交互层上为了满足不同维度的交互编辑，我们提供了蓝图节点编辑，和镜头沉浸式设定等功能。

                    

                    

                     

                   

                   

                    

 

不会代码，也能用 DataV么？

当然，为满足用户日益增长的编辑诉求，我们从最初的1个画布编辑器已扩展至今天横跨多个维度的6大编辑器，形成一套简单易操作的可视化编辑器系统。用户可通过编辑器里丰富的模版及资产库、数据配置、自动数据映射等0代码编辑的功能快速搭建专业水准的数据可视化应用，感受数据的美好。

小白如何快速上手搭建三维空间可视化？

为了让用户能够“傻瓜式”搭建复杂的三维空间可视化，我们打造了一整套包括 CityPro、CityV、GI组件等的图形引擎产品。并提供了一套既能满足沉浸式数字孪生体验，又能满足时空大数据分析的解决方案，可覆盖可视化领域的各个场景。

                    

                  

 

 

如何把模型资产沉淀下来，产生更多的复用价值？

                    

                    

 

为什么要有 Visbar？

在数字孪生的行业可视化项目中 ，每个具体行业的需求往往很相似，功能场景也有较高通用性。于是我们以行业维度沉淀资产，并以解决方案打包输出，最终以产品化对外服务。Visbar 不但能够提升可视化项目交付效率，还可以降低项目投入成本。

行业案例 _

 

那么多资产沉淀得过来吗？

Visbar拥有自己的物料生态与运营模式。

原文地址：阿里设计中心（公众号）

作者：阿里设计中心

转载请注明：学UI网》S02E03: 数字构建世界，什么构建「数字的世界」—— 阿里云设计中心年鉴

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

                                                            

 

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

 

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

树形控件是种常见的设计模式，几乎与图形化用户界面同时诞生，通过结构化的组织方式逐级展示内容，让整体信息架构一目了然，非常适合以网页或桌面端为载体的 B 端产品和生产力工具，比如电脑文件管理系统。

使用场景

树形控件通常有以下 4 种表现形式：

可以把它们进一步总结为 2 个使用场景：

其中，树列表、思维导图在 2 个场景中都有应用，而树导航和树选择多以查看为主。不同的使用场景，在设计上会有不同取舍。可以把它们进一步总结为 2 个使用场景：

交互设计

结合树形控件的使用场景，对其的操作也如此分类。显然，「查看为主」时，对查看类操作的体验要求更高，而「编辑为主」时则相反。

新增节点

以新增节点为例，不同场景下用户有不同的诉求：

查看为主

可以考虑鼠标悬停到节点出现相关操作。

但此时较难预测的是用户到底是想增加一个子节点还是同级节点。一个完备的解法就是让用户选择。但实际业务中，此处可能还要选择节点类型，比如语雀要选择文档还是表格。所以「节点类型 x 层级选项」有可能导致选项过多。此时可以有两种处理方式：

针对第一种方法，我们需要额外思考一个问题：新建的子节点应该放在第一位还是最后一位？

我的第一反应是第一位，因为它离操作区域最近，从操作到反馈都很自然，也避免目录发生大幅度滚动，所以在语雀目录中是这样设计的。但是实际也有很多用户反馈希望是最后一个子节点，类似于1，2，3…… 的顺序从老到新排列。我没有办法去验证如果真的是加为最后一个子节点，会不会又有另一波反馈声音。后来我发现思维导图新增子节点就是新增在末尾，以及绝大多数产品也是加在末尾，所以下次我大概会选择放在最后试试。或者索性选择上述第二种方法来避免这个问题。

此外，界面上还需要提供一种方式，允许用户创建最顶层的一级节点。当界面较大时，可以放置在顶部，让用户更易发现。

编辑为主

相较于上述方法，可以给出更明确直接的界面操作和添加位置示意或快捷键。

语雀在进行目录改版时，本想统一「阅读页面」和「编排目录页面」的交互方式——采用「查看为主」的添加方式，却忽略了两个页面的用户诉求不一样。此时这里其实还可以借鉴思维导图的创建方式，使用Enter/Tab 键快速添加节点。

修改节点属性

结合实际业务，节点可能有不同属性，比如名称、类型、状态、优先级等。「查看为主」时，修改操作使用不多，可以考虑放入「…」中。

而「编辑为主」时，除了单个节点修改属性方便，还需要考虑连续修改多个属性，甚至是批量修改。如下图，树列表可以支持连续修改属性节点。

如下图，思维导图可以通过多选然后在格式面板统一修改属性。

调整结构

树形控件最有价值的部分就是其所表达的层级关系，常用调整结构的操作总结如下：

无论采用那种方式，都遵循以下设计原则：

拖拽调整

简单而言，设计上要解决以下问题：

1.如何让用户知道可以拖拽？

2.如何让用户知道可以怎么拖拽到哪里？

可以在拖拽中采用「插入位置符号」暗示用户，通常是一条彩色线条。应尽可能增加「插入位置符号」出现的机率，减少用户的困惑。设计时可以考虑上下左右两个方向的拖拽运动分别可以触发什么结果。

比如按以下方式简单把拖拽规则分为 3 大类，

当然在「插入位置符号」尽可能多出现的同时，也要让其出现的位置符合用户预期且易理解。

比如向左移动「非末尾子节点」，如果强行给以一个符合逻辑的响应，「插入位置符号」可能离当前光标很远，甚至在屏幕外，且放手后可能引起目录结构较大变化，那么不如选择此时拖拽无响应。

这里再介绍「把一个节点调整为另一个的子节点」的两种拖拽规则，分别适用于不同场景。

3.如何让用户快速拖拽到目标位置？

当用户掌握了拖拽规则后，就需要帮助用户快速实现自己的调整目标。拖拽过程中注意以下几点：

 ① 被拖拽节点可以半透明显示，以尽量少遮挡树形控件，方便用户定位目标位置。

 ② 被拖拽节点的原始位置可以以较弱的视觉效果展示，提示用户节点从哪里被拖拽。

 ③ 整棵树的结构不要发生变化，以免原先确定的目标位置发生位移。

 ④ 结构层级较深时，通过辅助示意帮助用户确定会将节点拖拽到哪一层级。

4.如何让用户确定拖拽结果满足自己的期望？

当以上问题都解决后，这个也许就不成问题。当然也可以增加二次确认的微交互。

非拖拽调整

调整结构也可以通过非拖拽的方式完成。拖拽是一种直观，但不轻松的操作，尤其是当树很庞大需跨屏拖拽时。此时可以增加按钮操作，直接指定目标位置，精确且快速。

         

当「编辑为主」时，调整结构也需要考虑批量操作。如下图，支持多选节点同时调整，被调整结构的节点有可能在原处于不同分支的不同等级，批量调整后会成为同一个字节的同级节点。

删除节点

删除是个比较慎重的操作，所以此处应该询问用户是只删除本节点，还是本节点及其下所有节点。

如果只删除本节点，首先本节点需要从树形控件中消失，以代表删除成功，然后其子节点可以上移一级，保证用户不会误以为内容丢失。

缩放视图

查看时，思维导图可视化效果更好。针对思维导图，需要考虑视图的放大缩小，适应视口/真实大小切换。比如下图语雀思维导图的「缩放视图」功能（不过这个设计把回到中心和适应画布藏的有点深）。

折叠层级

当树形控件庞大时，需要能够快速折叠/展开层级，包括全部层级或者某一层级。如果是一棵「私人树」，记住用户折叠的展示层级，并且在下次进来时仍旧保持。如果是一棵「公开树」，可以增加默认展开设置，比如下图语雀中编排目录的操作。

值得注意的是，折叠层级和缩放视图的操作都应该提供快捷键，会比通过界面操作更加高效，也不会打断查看过程。可以想象一下你正在一个会议中展示一张思维导图，在界面上操作「缩放视图」耗费更多时间，也会在夺走走观众的注意力。

附上常见查看操作快捷键，仅供参考：

上述部分快捷键会和浏览器自带快捷键冲突，使用时需要覆盖浏览器快捷键。

搜索和筛选

当节点数量很多时，树形控件应该支持搜索查找节点，搜索关键词可以高亮显示；或按条件筛选展示节点及其上级节点路径。

使用列表时，还有一个常见的操作是「排序」，但是整棵树「排序」和树形控件本身的层级顺序是相矛盾的。所以「树列表」基本没有「排序」功能。

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

文章来源：站酷   作者：Ant_Design

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

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

不论是作品集还是项目汇报，都少不了UI效果图展示。虽然网上有很多样机模板可以用，但与其与胡乱套用，还不如自己学会怎么展示界面。

今天教大家一个简单的方法，只需五个步骤就可以立即提升界面展示的空间感。

看过之后，说不定你还可以举一反三，做出更多不同的创新。

 

1、准备界面

可以像这样把两个界面并列放到一起，这里我用的是一个正方形画布。

看起来很无聊就对了，因为这只是第一步。

 

2、旋转角度

如果什么东西都方方正正的，看起来会很没意思。更何况在三维空间看二维界面，肯定是不可能这么摆放得规矩。

于是我们把两个界面都向不同的方向旋转一点角度，例如下图右边是 -5 度，左边是 8 度。

同样是为了体现三维空间感，我们把这两个界面交叠一下，像是两张散落在桌面的扑克牌。

 

3、添加背景

什么东西都用白色背景多无聊？更何况很多界面本身就是白色背景，再往白色画布上放就要找不到边界了。

最简单的方法，就是把界面上的主题色直接用到背景上，这样即把界面体现出来了，又能保证整体色调。

但是这样做问题还是很明显：首先，背景太强容易分散注意力；其次，也许有少量页面用主题色作为背景，那就和画布区分不开了。

所以，比较简单的方法，就是把背景上的主题色往浅灰色靠一些，让它即保留在同一个色调，又不至于太抢眼。

另外可以给画布和界面都加个圆角，让它们看起来更有卡片的感觉。

 

4、绘制投影

阴影可以说是空间感的点睛之笔，所以很有讲究。

很多人直接给界面设置阴影效果，结果阴影紧贴着边缘，导致空间感较弱。

为了让阴影更加真实，最好是单独画一个阴影方块，叠放在两张界面之间。

这个方块可以直接用上层界面的形状，缩小一点、加大圆角并填充黑色，至于摆放位置，就想象一下自然投影效果吧。

 

5、模糊投影

投影肯定不能是一个黑色的圆角方块，所以要给它添加效果。

例如，我设置了 50 的模糊效果，和 20% 的不透明度。这个数值可以根据具体的情况，自己调节。

 

总结

第五个步骤完成后，和第一个步骤比起来，是不是感觉好多了？

你也可以用这个方法尝试不同的色调和排版：

 

原文地址：知乎

转载请注明：学UI网》如何提升UI效果图空间感？

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

                                                            

 

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

 

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

今天给大家讲讲每周任务页页面头图案例，讲讲这里面的思路，让大家吸收一波！本文头图强调颜色的横向丰富与纵向丰富，色相的差异化、颜色占比的问题、层次和饱满度，这样就能大大提升画面质感。

最近在做每周任务页页面，头图又是给我难够呛，我们先看下第一版到第三版的变化：

第一版

 

第二版

 

第三版

中间过程思考了很多，和大家分享一下。

 

1. 颜色的横向丰富与纵向丰富

什么是横向颜色？

其实就是同一饱和度、明度的颜色，色相不同，比如下面这组颜色：

虽然色相挺丰富，但是看多了会比较腻。

所以有时候我们就需要进行颜色的纵向延伸，也就是除了色相的不同，还有饱和度、明度的不同，比如：

 

2. 色相的差异化

之前在总结颜色的时候有说过，色相不要用的太正，会比较常规，因为人们看多了比较正的颜色，所以就会感觉没什么新意。

举个例子，同样是红色：

第一个红色就会比较正，如果没有相当足的功力，很可能做成过年、国庆的感觉，而第个组就会相对容易出效果一点！

当然，颜色本身没有好坏，要看怎么用，只是说不太正的色相对新手来说比较友好一些。

所以大家看下，色相从比较正的橙色变换色相后，瞬间感觉没那么老气了:

 

3. 关于颜色占比的问题

当然，这个案例中，除了色相以外，还有颜色完毕的问题，其实我之前很多作品，重色会占比多一些，比如下面这种:

而这次的每周任务页面希望能有一点轻松愉悦的感觉，别用太浓烈的颜色让用户压力太大。所以对我来说也算是一次小挑战。

所以我将重色占比缩小，只用在最前处的近景和字体暗部（蓝色部分）:

其他地方都是比较轻的颜色。

 

4.关于层次和饱满度

上面讲的都是关于配色的，接下来说下层次和饱满度。

因为这次的构图比较简单，就是中心构图，也没有什么大透视，那如何增加层次呢？

我使用三、四层云放在前面，这几本就把算是拉开层次：

但是有个问题，下面是有层次了，但是上面有点感觉空空的，于是又加了一点小元素进行点缀：

这样整体看起来就比较和谐了，这里面有个要说的点，对于小元素的颜色，一定要有前后关系，也就是用颜色的深浅、色相来体现：

这样看起来才不会生硬。

 

总结：

做到这里，越看越不顺眼，总感觉有点油腻，有点土，具体什么原因？怎么修改？因为不想写的太长，所以我们下期再仔细的聊一聊在保持基础框架不变的情况下，如何拆分画面来优化每一处细节，使第二版变成第三版的！

 

原文地址：菜心设计铺

作者：菜心设计铺

转载请注明：学UI网》最初我觉得这效果也太差了，最后没想到做的还不错！

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

                                                            

 

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

 

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

编辑导语：如今随着科技的不断发展，人们日常的生活也开始变得智能化，智慧生态逐渐进入到各种领域，从买菜到小区物业等等，如今很多都变得更加智能方便；本文作者分享了关于智慧社区平台订单支付及退款结算规则设计，我们一起来了解一下。

笔者现就职于一家房产集团旗下科技公司，整体负责公司各产品线；公司主营智慧社区项目，在当地小有规模，智慧社区平台包括物业管理系统、社区电商平台、社区IOT系统、居家养老系统、社区政务系统、二手房交易平台等6大系统。

各系统后台独立，为了方便小区业主，让用户在同一个APP上能享受物业服务缴费、线上购物、扫码充电、会员缴费等等功能，需在用户端设计不同的支付结算方式。

本文主要分享社区电商系统、物业管理系统、社区IOT系统的订单支付及退款结算规则设计。

一、平台支付及结算业务需求分析

1. 物业管理系统支付结算需求

物业系统为SaaS模式，B/S架构，使用平台公有云服务器，单独数据库分区，使用角色为平台合作的付费物业企业，支付结算需求包括：

• 物业费、车位管理费、电梯费等费项需根据后台账单生成支付订单，且用户支付后直接结算至物业企业帐户，不做分成；
• 代收水电费需对接远程水电表设备，用户可在线预充费用，并随时查看余额，用户充值金额结算至物业企业帐户，并定期结算给当地水、电主管部门；
• 业主报修工单支付费用需按照材料费、工时费区分账单，直接结算至物业企业帐户，且平台收取3%的服务费；
• 物业结算金额需满足“T+1”到账，即次日（工作日）到账；
• 所有订单支持后台手动操作退款。

2. 社区电商平台支付结算需求

社区电商模式以整合社区周边商家为社区居民提供便捷的O2O服务为主，入驻商家包括社区周边零售商和服务商。

零售服务场景主要是方便社区居民在线选购社区周边商品，提供线上下单，线下送货上门服务，基于之前的业务拓展，支持平台配送、快递物流、到店自提、商家送货上门4种配送方式，其中平台配送是整合物业服务人员进行社区周边的送货上门服务。

综合各种配送方式及业务场景，支付结算需满足以下需求：

• 订单支付金额需”T+7″直接结算至商家帐户；
• 支持单笔订单直接分润，分润结算方包括平台分润、代理商分润、物业分润、商家结算；
• 部分商品支持7天无理由退货；
• 已完成订单支持单个商品退货退款；
• 平台配送费支付到平台帐户，并按月结算给配送人员；
• 快递物流、商家送货上门的订单配送费直接结算到商家；
• 到店自提不收取配送费；

预约服务场景主要满足社区居民在线预购社区周边服务，支付结算需满足以下需求：

• 订单支付金额需在服务完成后“T+1”直接结算至商家帐户；
• 支持单笔订单直接分润，分润结算方包括平台分润、代理商分润、物业分润、商家结算；
• 用户在服务未开始前申请退款，可全额退款，上门后退款需扣除上门服务费；
• 服务完成后不支持退款；
• 服务单到期未预约服务时，自动全额退款给用户；

3. 社区IOT系统支付结算需求

社区IOT系统对接设备包括：社区一卡通、门禁、楼宇对讲、停车道闸、电动车充电桩等等；涉及到支付业务的有社区一卡通、电动车充电桩。

社区一卡通支付及结算需满足以下需求：

• 一卡通需同时满足门禁卡、储值卡功能；
• 可应用的支付场景包括：缴物业费、水电费、维修费等，社区内及周边购物消费刷卡，线上支付扣款；

电动车充电桩支付及结算需求：

• 按照充电时间预付费，付费金额结算至平台；
• 不满预订时间结束充电时，自动计算退款金额，原路退回；
• 安装独立电表，电费由平台定时结算给物业；

4. 积分、优惠券、付费会员支付及结算需求

包括以下需求：

• 以上各个支付场景，用户都可使用积分抵现，抵现金额由平台让利给商家及用户，随订单支付金额一同由平台结算给商家，实时核销；
• 优惠券分为平台优惠券及店铺优惠券，统一由平台审核发放，可用于支付抵现；
• 平台优惠券抵现金额由平台补贴，随订单支付金额一同结算给商家，实时核销；
• 店铺优惠券抵现金额，直接由店铺让利优惠给用户，实时核销；
• 用户可购买付费会员，享受会员特权；

二、结算规则设计及注意事项

由以上需求内容可以看出，各系统的结算场景、结算流程，包括结算对象都存在不一致，但C端支付入口在同一应用端，这就需要在后台针对不同的业务流程设置不同的结算规则。

笔者对标了国内多个提供聚合支付及分账服务的平台，综合考虑对接成本及费率，最终选择了某平台作为对接方。

结算规则设计及注意事项如下：

1. 物业缴费

• 支付方式：线上-支付宝、线上-微信、线下-支付宝、线下-微信、现金、银行卡刷卡、一卡通；
• 分账对象：物业企业（第三方支付平台扣除支付费率）；
• 分账方式：直接分账；
• 账单生成：根据费项设置的规则在物业管理系统后台生成账单后，同步到业主APP；

• 到账周期：T+1；
• 退款方式：由物业系统后台手动操作单账单退款；

注意事项：为了保证客户资金安全及平台免责，由第三方支付机构与企业直接签约，且提供单独的对账后台，便于企业查账，线下支付则直接结算至企业银行卡账号，系统只做账单记录。

2. 电商购物（包括使用积分、优惠券结算）

• 支付方式：线上-支付宝、线上-微信；
• 分账对象：平台、代理商、物业、商家共4方分账；
• 分账方式：资管平台分账；
• 到账周期：订单完成日起T+7；
• 账单结算及退款规则：平台配送方式包括快递物流、平台快送（类似美团骑士）、到店自提、商家送货上门，每种方式用户需支付的配送费不等，需分别计算，且需考虑用户使用积分、优惠券抵现及退款时是否选择全部商品退款等结算情景，总结分析订单状态及配送方式不同，共包含以下6种用例；

Case1：订单状态=待发货，配送方式=快递物流/商家送货上门

计算规则：

示例：

设置店铺抽成比例5%；
用户甲下单商品总额为30元，配送方式为快递物流，物流费5元，使用平台优惠券抵扣10元，积分抵扣1元，则下单后，用户需支付24元（24=30+5-10-1）；商家收到结算总额为33.25元(33.25=（30+5）*（1-0.05）)；平台结算金额为-9.25元（-9.25=-10*0.95-1*0.95+24*0.05），负值，平台需结算给商家。发生退款后，用户可收到的退款总额为24元，+积分+优惠券；商家退款总额为33.25元；平台退款总额为-9.25元，负值，商家需退款给平台。

Case2：订单状态=待发货，配送方式=平台快送

计算规则：

示例：

设置店铺抽成比例5%；
用户甲下单商品总额为30元，配送方式为小慧快送，物流费5元，使用店铺优惠券抵扣10元，积分抵扣1元，则下单后，用户需支付24元（24=30+5-10-1）；商家收到结算总额为19元（19=（30-10）*（1-0.05））；平台收到的结算金额为5元（5=5-1+（20*0.05））元，正数，用户结算给平台。发生退款后，用户可收到的退款总额为24元，+积分+优惠券；商家退款总额为19元；平台退款总额为5元，正数，平台退款给用户。

Case3：订单状态=已完成，配送方式=快递物流/商家送货上门，退款商品=全部订单商品

计算规则：

示例：

设置店铺抽成比例5%；
用户甲下单商品总额为30元，配送方式为快递物流，物流费5元，使用平台优惠券抵扣10元，积分抵扣1元，则下单后，用户需支付24元（24=30+5-10-1）；商家收到结算总额为33.25元(33.25=（30+5）*（1-0.05）)；平台结算金额为-9.25元（-9.25=-10*0.95-1*0.95+24*0.05），负值，平台需结算给商家。发生退款后，用户可收到的退款总额为19元（19=24-5），+积分+优惠券；商家退款总额为28.5元（28.5=33.25-5*0.95)；平台退款总额为-9.5元(-9.5=-9.25-5*0.05)，负值，商家需退款给平台。

Case4：订单状态=已完成，配送方式=平台快送，退款商品=全部订单商品

计算规则：

示例：

设置店铺抽成比例5%；
用户甲下单商品总额为30元，配送方式为小慧快送，物流费5元，使用店铺优惠券抵扣10元，积分抵扣1元，则下单后，用户需支付24元（24=30+5-10-1）；商家收到结算总额为19元（19=（30-10）*（1-0.05））；平台收到的结算金额为5元（5=5-1+（20*0.05）），正数，用户结算给平台。发生退款后，用户可收到的退款总额为19元（19=24-5），+积分+优惠券；商家退款总额为19元；平台需退款总额为0元（0=5-5）元，为零，平台无需退款。

Case5：订单状态=已完成，配送方式=快递物流/商家送货上门，退款商品=部分商品，部分商品总额/订单商品总额=α（保留三位小数）

计算规则：

示例：

设置店铺抽成比例5%；
用户甲下单商品总额为30元，配送方式为快递物流，物流费5元，使用平台优惠券抵扣10元，积分抵扣1元，则下单后，用户需支付24元（24=30+5-10-1）；商家收到结算总额为33.25元(33.25=（30+5）*（1-0.05）)；平台结算金额为-9.25元（-9.25=-10*0.95-1*0.95+24*0.05），负值，平台需结算给商家。用户申请退款商品总额为20元,α=20/30=0.667，则用户可收到的退款总额为12.66元（12.66=20-1*0.667-10*0.667），退回积分667；商家退款总额为19元（19=20*0.95）；平台退款总额为-6.34元（-10*0.667-1*0.667+20*0.05），负值，商家需退款给平台。

Case6：条件：订单状态=已完成，配送方式=平台快送，退款商品=部分商品，部分商品总额/订单商品总额=α（保留三位小数）

计算规则：

示例：

设置店铺抽成比例5%；用户甲下单商品总额为30元，配送方式为小慧快送，物流费5元，使用店铺优惠券抵扣10元，积分抵扣1元，则下单后：用户需支付24元（24=30+5-10-1）；商家收到结算总额为19元（19=（30-10）*（1-0.05））；平台收到的结算金额为5元（5=5-1+（20*0.05）），正数，用户结算给平台。用户申请退款商品总额为20元,α=20/30=0.667，则用户可收到的退款总额为12.66元（12.66=20-1*0.667-10*0.667），退回积分667；商家退款总额为12.66元（12.66=（20-10*0.667）*0.95）；平台需退款总额为0元（0=-1*0.667+(20-10*0.667)*0.05），为零，平台无需退款。

3. 购买服务

• 支付方式：线上-支付宝、线上-微信；
• 分账对象：平台、代理商、物业、商家共4方分账；
• 分账方式：资管平台分账；
• 到账周期：服务完成日起T+1；
• 账单结算及退款规则：用户下单成功后，支付金额预存在第三方支付机构的资管平台，服务商家按照订单完成服务后，资金由资管平台T+1结算至商家帐户。服务订单完成前可申请退款，完成后不支持退款。

4. 一卡通支付

• 支付方式：线下刷卡支付；
• 分账对像：物业或商家；
• 分账方式：线下定期结算；
• 注意事项：一卡通需在商务局完成备案，并且是定向使用金额，接受商务局监管。

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

文章来源：人人都是产品经理   作者：正文

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

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

What 是什么

简介 ：包容格式是一种用于文本输入的模式，使用这种模式后，可以让用户输入文本内容时不用关心格式或语法，从而轻松达到预期目标。

例子 ：Google 搜索输入框

Why 为什么

用户操作界面时只是想完成某件事或某个操作，而不是考虑「正确」的格式或复杂的UI。计算机擅长弄清楚如何处理不同类型的输入。如果计算机无法正确处理多种类型或格式的文本内容，那么用户在输入内容时就会有明显的受阻感。

所以，让用户输入所需的任何内容，然后让计算机来处理结构或格式，才是一种比较理想的方法。这种模式可以极大地简化界面，并使其更容易被用户理解。

 相关资料：

https://zhuanlan.zhihu.com/p/343497540

When 什么时候使用

用户可能会输入不同类型、格式的文本内容，而我们希望用户可以不用太关心格式问题，同时希望界面保持简洁。很多时候，用户输入的数据可能类型、格式不一（例如存在空格、连字符、缩写或大写等等），如果提供不同的输入类型，那么界面就很可能不够简洁。这种模式可以很好地将数据类型有效处理。

使用条件：

• 输入内容存在不同类型或格式；

• 希望用户输入比较容易；

• 希望界面简洁；

How 如何使用

核心思想：将界面设计问题转化为编程问题。

我们需要考虑用户可能输入的文本类型：

• 简单的例子：只要求输入一个只有格式不同日期或时间；

• 复杂的例子：搜索某些关键词，根据关键词获得不同的结果；

由于业务场景不同，每个应用程序使用此模式的方式可能不同。只要确保软件对各种输入格式的响应与用户期望的一致即可。因此建议与用户进行真机测试。

Example 案例

案例 1：东方财富股票搜索框

用户需求：将特定股票添加到个人关注列表。

东方财富的股票搜索框，用来帮助用户快速找到目标股票。该搜索框就使用了「包容格式」这一模式。用户既可以输入股票代码进行查询，也可以输入股票的名称进行查询。

案例 2：Gumroad 信用卡输入框

用户需求：输入信用卡号

很多产品都有输入信用卡号的场景，用户应该只要输入16位数字，而不需要明确这 16 位数字的格式。输入的内容中是否带有空格对结果不应该有任何影响。

gumroad 的信用卡号输入框允许用户随意输入他们的信用卡号。信用卡号字段接受空格作为分隔符（不包含空格也可以），然后这个输入框会立即将输入的卡号格式化。

案例 3：macOS 日历创建日程

用户需求：创建日程

我们会有很多方式来表示日期，例如周一、星期一、2021/06/20、6-14 等等。在 macOS 日历中创建日程时，用户可以输入各种格式的日期，输入框都会正常识别到该格式，并按照其日期创建日程。

更多案例

你可以在下方查看「包容格式」更多的案例：

https://airtable.com/shr9tuJY8zKxAIdfo/tblXEEC6HykKOL3Ef

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

文章来源：站酷   作者：Ant_Design

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

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

用户体验设计需要考虑很多不同的因素，例如为用户创造新体验时需要考虑哪些内容？哪些规则能区分产品的好坏？文章整理了20条用户体验设计原则，希望通过这份简洁易懂的合集能够让你对用户体验领域有一个初步的概览和了解。

 

1.以用户为中心 

这是最常被提及的用户体验设计基础，当涉及到产品设计决策时，提醒我们要学会使用同理心，而不是仅凭个人的想法或意见。

真正好的用户体验设计是为用户量身打造的，用户的意见、痛点、愿望、偏好和需求对产品来说至关重要，所以在项目初始阶段需要投入大量的时间和精力去了解用户。

用户体验研究重点是了解用户，为接下来的产品设计做准备。以用户为中心的设计理念是设计师迎合用户的需求，区分了设计任何人都可以使用的产品和为目标用户设计的产品。

一款特定的产品需要面对不同的目标群体，前期研究中需要了解目标人群需要什么并在产品中反映出来，这是针对性很强的设计研究。

 

2.了解信息架构

可能很多人对信息架构的定义很模糊，这里举个例子来具象说明一下信息架构的含义。

例如在一款产品中，如果把所有内容都堆到一个列表或页面中，可能我们将无法使用这款产品，所以我们看到大多数的App和网站都包含很多的导航和页面结构，按照内容重要程度有序地来组织内容。

信息体系结构的最终目标是帮助用户理解他们在看什么，并帮助他们找到需要寻找的内容。

信息架构在制作线框图或原型之前完成，因为它是产品的基础，有助于设计师考虑什么功能是最重要的，哪些是用户最需要的以及哪些次要内容可以隐藏起来等。

这种结构与产品的导航设计密切相关，有助于将用户引导到正确的位置。导航和信息架构都试图让用户以最少的认知努力来完成操作。

信息架构的设计不当会造成重大故障甚至可能危及整个产品。如果用户在使用产品时找不到任何想要的内容，点击任何元素都没有反应，会给用户带来很糟糕的使用体验。

 

3.考虑使用场景

没有场景，任何设计都很难生效。设计师在项目开始时会投入时间去了解用户面临的问题以及围绕这些问题的背景。

这条原则有助于设计师考虑还有哪些因素会影响用户和产品，很多产品设计会为用户提供一些有助于消除使用摩擦的操作提示。

例如在设计表单时，会尽可能的添加输入提示，最大程度地减少用户出错的机会。

 

4.了解一致性及其重要性

保持一致性是用户体验设计的关键原则。拥有一致设计的产品可以更快地被新用户接受，因为用户不需要再次学习如何操作，他们会回忆起之前的操作习惯并将其作为指导，这也解释了为什么同类型的产品例如电商类App页面设计的很相似。

保持一致意味着在需要时可以重复使用某些UI组件，并在整个产品中保持一致的行为。例如当点击或悬停在按钮上面时，所以按钮的状态应该是一致的。

从逻辑上讲，产品越大，这种一致性会变得越来越有挑战性，这促使许多设计团队创建自己的设计系统。一款产品的学习曲线越长越陡，放弃的用户就会越多，在市场营销中，这通常被称为销售漏斗中的漏洞。

 

5.给予用户适当的控制权

这条原则意味着用户希望能控制产品，无论是完成任务还是定制满足他们需求的内容。

在设计过程中一直试图给用户尽可能多的控制权，例如允许用户撤消操作、更改设置、自定义UI外观、创建快捷方式等。

需要注意的是，当提供太多选项或用户太依赖于自己的选择时，用户可能会不知所措，造成所谓的选择悖论。所以在设计时要了解用户乐于掌控的余地，不能让用户感到使用压力。

 

6.把可用性放在首位

在整体上看，建立高标准的可用性是为用户做的最好的事情，有助于检查用户是否能够轻松地完成任务、产品是否正常运行以及是否完成工作。

可用性的重要之处在于要理解可用性的灵活性和重要性。

 

7.了解用户测试

结合可用性的概念，我们还要进行用户测试，这是设计师对工作进行测试的方式，对新的产品来说至关重要。

当设计思想和理念被转化为有形的原型时，设计师要观察真实的用户是如何与之交互的，可以通过许多不同的方式例如简单的A/B测试到全面的审核测试等来实现。

测试通常分几轮进行，团队在向原型添加更多细节之前验证每个步骤。随着测试结果的出现，设计也随之发生了变化。

如果发生更改，将会进行新一轮的测试，通过这个过程，设计团队可以改进他们的工作，直到达到可用性标准。

 

8.少即是多

在创造力和创造独特事物的渴望中，很多设计师很容易无意中弄乱产品界面甚至产品本身。

功能过多的产品可能会失去焦点并削弱吸引力。具有太多元素的页面会变得充满视觉冲击，但也会给用户带来负面体验，在设计时要学会克制并优先考虑真正关键的部分。

另外手机端的屏幕空间非常小，创建一个有效的布局，想出巧妙的方法来隐藏次要元素并创建一个令人愉悦的界面需要付出很大的努力和创造力。

 

9.视觉层次

视觉层次是向用户传达产品中元素重要性的方式。良好的层次结构有助于用户视线在界面上移动，并立即了解最重要的内容以及这些内容与其他部分的关系。

视觉层次结构与布局设计紧密相连，帮助用户消化所接触到的信息。

创建层次结构从概念的草图开始，一直持续到完成设计。例如发送按钮通常会用绿色而是不红色，而次要按钮会显示为灰色或与背景混合，并显示“撤消”或“返回”。

 

10.了解用户的心智模型

为用户创建心智模型是尝试使用同理心的一种方式，是帮助设计师从用户的角度看待问题的工具。

做到准确就是直观的产品，用户不需要投入精力就可以使用它，而错误的思维模型会导致一些问题，例如界面混乱、高昂的交互成本。

为了匹配用户的心智模型，可以采用多种不同类型的研究方法，常见的方法包括卡片分类、决策树、对用户行为的密切观察，或者使用大量的数据来建立关键用户的心理模型。

 

11.设计中的讲故事

讲故事的方式更加直观，利用图像、视频、动画和文本等元素让整个页面与用户对话。用户体验设计中的视觉叙事是为了唤起用户的情感，给用户留下持久的印象。

想出一种可视化的方式来传达复杂的内容具有挑战性，但同时也是有益的，可以更好地接近用户并将其作为提高产品可学习性的方法。

 

12.不要直接跳到高保真原型上

高保真原型是设计项目的最终目标，但是直接使用原型软件不断添加各种页面细节是错误的操作。

避免直接出高保真的主要原因是因为这样做的成本会更高。在没有任何用户研究和测试的情况下，一款产品无论具有多少的细节都有可能面临不符合用户使用的情况。

 

13.可访问性测试很重要

不仅要检查关键用户是否可以流畅地使用产品，还应该检查其他所有用户例如少数群体等是否都能够正常使用产品。

事实上，残疾人和其他用户一样需要数字产品，但很多产品在设计时并没有考虑到这些群体，但这也提供了一个机会，为所有用户提供一个可以依赖的好产品。

 

14.熟悉并在用户体验设计中使用

我们知道为用户提供一致的设计有助于克服学习曲线，同时为用户提供熟悉的东西也有助于缩短学习曲线。

例如，大多数用户都会立即识别某些UI组件(汉堡菜单/单选按钮)，这意味着他们会本能地知道这些组件代表什么意思或者如何操作。

使用用户已经熟悉的东西并不一定会让产品的独特性消失，有经验的设计师会利用这种熟悉性来来创造一些独特的设计，同时也是直观的，不需要太多努力就可以使用。

设计一个完全不依赖熟悉度的产品可能是具有风险的行为，因为它很容易让那些不熟悉产品的用户超负荷，形成巨大的学习曲线，增加用户负担。

 

15.了解交付成果的力量

可交付成果是可以在整个团队中交付的内容，包括用户画像、心智模型、用户旅程以及线框图和原型等，是一种有形和具体的表现。

可交付成果是用户体验设计原则，可以帮助设计团队和其他利益相关者理解和交流概念。

▲ 用户画像可以捕捉理想用户，并提供可以相关联的真实面孔，是一种指导设计的工具。用户旅程图帮助设计师了解用户完成任务需要的具体步骤，有助于确保这些步骤确实可以轻松执行，并且整个过程很流畅。

这些交付成果服务于关键功能，设计师需要在整个项目中都依赖它们，不断转换为用户可以与之交互的真实有形的设计。

 

16.专业的原型设计工具

用户体验设计的过程不是线性的，而是一个循环。无论创建什么样的产品，都需要专业的原型工具，将基本框架放在一起，然后添加可能需要的所有细节。

从逻辑上讲，设计团队的具体需求会因团队而异，但一些关键功能例如团队协作、需求管理、交互设计和开发移交等，对于大多数团队来说是必要的。

 

17.精心管理产品需求

一切都从收集需求开始，然后慢慢创建关键列表。虽然简单地列出一个列表听起来很容易，但随着项目的进展，要保持列表的条理性确实是一个挑战。

除了创建需求和检查需求之外，还有一个问题就是调整需求，需要从设计、技术和业务各个方面来处理各种需求，还要确保这些需求之间没有相互矛盾。

 

18.了解移动和网页产品之间的差异

网页端和移动端产品最明显的区别是屏幕尺寸，这意味着所有的视觉层次结构和信息架构都将从Web到App发生变化。

移动端产品会有更多影响设计决策的因素，例如设备的操作系统、使用产品的环境等。了解移动端产品在导航设计、用户流程等关键方面的差异是至关重要的用户体验设计原则。

 

19.利用UX设计模式

几乎所有的产品都专注于设计模式，它们可靠、易于查找并通过减少设计时间来为项目增加实用性。

▲ 当用户在谷歌搜索中输入的内容有问题时，谷歌会提供一个相关的搜索提示，辅助用户进行精确地搜索，解决用户使用不同方式在搜索栏中传达他们正在寻找的内容的问题。

 

20.使用合适的工具才能有效

拥有单一的内容来源可以为团队带来清晰性和高效性，如果线框和原型分散在多个渠道中，这种内容的集合就会变得很难达成。

通过合适高效的工具能够避免产品在到达终点时遇到各种各样的可用性问题，防止产品细节没有表现出来或者被忽略。

 

最后

通过这份用户体验设计原则的合集希望能够让你对这个领域有一个大致的了解。

没有人知道用户体验设计在未来会引领我们走向哪里，不过我们可以确定，无论它带给我们什么，肯定都会很有趣。

 

内容参考：justinmind.com/ux-design/principles

原文地址：Clip设计夹（公众号）

作者：Clippp

转载请注明：学UI网》掌握这20条用户体验设计原则，助力设计成长！

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小

助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

                                                            

 

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

 

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

随着设计团队规模扩大，人数快速增多，但每个人都带着自己以往工作经验和习惯，一些典型问题也相应显现：上手就干、主观设计、缺少方法、忽视跟进等等。所以我们撰写了「UI标准设计流程」，希望能为UI设计师提供对于设计支撑思路的共识，让设计更有价值。

 

从接到需求到上线后跟踪，我们把流程拆分为五个节点：需求分析-交互设计-视觉设计-视觉规范-方案验证。

当然，在设计流程中我们只表达不同流程中的行为目的及标准，相关方法论我们会配套一份「设计师成长指南」，不久之后再与大家分享。

 

1.需求分析

我们在接到一个设计需求后，要做的第一步是进行分析并确定设计目标。

我们需要：了解背景、用户和竞品，能准确理解产品定位和需求目标，评估需求的合理性和准确性，并提供相应策略；甚至洞见机会点，通过设计对业务产生正向价值。

 

背景分析

目的：背景分析是为了让我们在刚接触产品的时候，去洞察表面背后的东西。通过背景分析，能帮助我们快速切入产品，并根据已有信息去制定准确并具有说服力的设计策略。

行为：我们需要了解：产品的定位及价值是什么，它的现状如何，是否有既往的数据沉淀或经验总结。

 

用户分析

目的：对UI设计师而言，用户分析是为了让我们更好地了解产品，并拥有对整个产品的宏观思路。通过用户分析，能为我们的视觉设计提供方向，并为我们做出决策提供实际落点。

行为：我们通常需要了解：用户画像、用户需求、用户行为、用户路径等。

 

竞品分析

目的：竞品分析能够让我们获得行业内的优秀经验，减少我们的思维盲区，同时还为我们提供了一份可被量化的标准，使我们可以基于竞品去反推现有产品。

行为：UI设计师可以从竞品定位、主要功能、迭代动向、产品结构、页面布局、交互动效、视觉设计、优劣势对比这几个维度去进行竞品分析。

 

需求评估

目的：在了解以上的通用信息后，我们要对需求进行评估，去决定采用哪种方式、制定什么样的策略。

行为：我们接到的需求，通常可以分为三种：全新产品类、产品改版类、功能新增或优化类。

对不同类型的需求，我们都可以用5个问题去评估：

1. 是否可被证伪？
2. 目标是否明确？
3. 投产比如何？
4. 是否有更优解法？
5. 是否有可预见风险？

基于以上问题，我们可以去协同交互、产品做相应调整和策略制定，甚至发现新的机会点并进行推动。

 

目标对齐

目的：设计为目标服务，所以我们要在设计开始前与需求方对齐目标，这也能为设计价值的佐证提供标准。

行为：设计目标通常有3种，我们可以从中去对需求目标转译：提升数据型、解决问题型、体验优化型、创新项目型。针对不同目标我们可以去制定不同的设计策略，并对策略的落地进行数据监测与分析，进行方案校正。

 

2.交互设计

在产品流程中，交互设计的作用在于，通过信息架构的组织去产出体验流畅的界面原型。

我们需要：充分理解整体流程与交互原型，基于设计原则去发现可优化的部分；同时能平衡产品、设计与开发的效益最大化，并驱动产品的体验提升。

 

设计原则

目的：设计原则能为我们提供一个行之有效的设计向导或提示。熟知各类设计原则，能使我们在设计支撑时，拥有更丰厚的专业度和更敏锐的洞察力。

行为：我们需要去了解市面常见的Guildline如iOS、Material、UWP等，以及一些常用原则如菲兹定律、格式塔理论等等。

 

流程梳理

目的：流程的再梳理，可以帮助我们在视觉设计前，快速地理解和诊断流程逻辑。

行为：在流程再梳理的过程中，我们需要注意以下4个问题：

1. 功能是否完整？
2. 链路是否流畅？
3. 步骤是否冗余？
4. 是否易于理解？

基于以上问题，我们可以用自身的专业储备去推动流程的优化。

 

原型优化

目的：交互原型是需求内容的外在表现，通过原型优化，可以最大程度地避免视觉评审后的设计返工。

行为：在对交互原型优化的过程中，我们要重点注意以下4个问题：

1. 架构是否符合目标
2. 层级是否足够精简
3. 信息是否传达准确
4. 状态是否有所缺失

在视觉设计时，我们基于以上四点可以去同步优化原型，并根据经验去寻求体验和成本的最佳平衡。

 

3.视觉设计

视觉设计是产品与用户直接连接的媒介，优质而恰当的视觉设计，可以极大地提升产品吸引力。

我们需要：基于分析确定视觉方向、定义设计语言，输出完整且高质量的视觉页面。

 

设计情绪板

目的：设计情绪板可以为设计语言的构建提供可视化参考，也有助于我们前期快速与各方达成共识。

行为：我们通常基于分析，去确定设计关键词，并基于关键词去衍生映射物、建立图形情绪板，最终分析和确定设计方向。

 

设计语言

目的：设计语言是情绪板的具象表达，它将构建起用户对产品的视觉感知。

行为：在明确设计方向后，我们就要基于情绪版去定义设计语言，主要包括主视觉、色彩、字体、图标、图形、动效等。

 

典型页面

目的：典型页面是设计语言在场景中直观体现，这有助于我们制定设计规范，并为其他页面的设计提供参考。

行为：我们通常需要设计首页、频道页或其他具有示例作用的典型页面，在设计的过程中我们还需要同步去规范间距、卡片、视觉变量、图形应用等，以此为视觉规范夯实基础。

 

4.设计系统

在设计典型页面的同时，其背后其实已经对应了一套设计规范和组件，而我们基于此去整理并沉淀出设计系统，能极大地提升统一性和迭代效率。

我们需要：制定完整、清晰的基础规范，沉淀图标库、组件库等，并持续优化和更新，形成可持续沿用的产品设计系统。

 

基础规范

目的：基础规范是设计语言的沉淀，也是视觉变量的基本粒子。它可以保证页面的基本统一，同时我们可以基于不同业务快速地拓展其他主题。

行为：在我司，一份基础规范的构成包括：色彩、字体、间距、布局、断点、层级、圆角、透明度、阴影。

 

图标库

目的：图标规范可以帮助其他成员快速、准确地进行图标拓展，而沉淀的图标库也可以极大地提升产出效率。

行为：基于具体需要，我们可以设定多套图标风格，规范其栅格、笔画、圆角等，并将已有的图标资产进行沉淀。同时我们也会去规范一些常见图形并沉淀，如空态插画、悬浮入口、徽章、商品等。

 

组件库 

目的：组件库是对常用控件进行设计规范、开发、封装的可被复用的集合，组件分而治之，可被自由组合，能保证设计品质、统一用户体验、提升产研效率。

行为：在我司，一套组件库通常包括：通用、布局、导航、数据录入、数据展示、反馈、其它。除通用原子组件外，我们也会对常用模块进行梳理，沉淀业务组件库。

 

5.落地跟踪

在设计完成之后，我们需要对设计方案进行评审、验收及数据跟踪，以保证设计方案的落地并跟进调整。

我们需要：运用合理策略以保证设计方案的高质量落地，对方案上线后的用户反馈进行有效跟进，运用多种方式验证目标，迭代产品。

 

设计评审

目的：设计评审通常包含了交互与视觉，其目的在于审查设计方案中的可用性问题。

行为：在我司，视觉评审即终评，我们需要在视觉稿中标注出所有交互逻辑，并对潜在问题有预判，能与各方确认目标、分桶与数据埋点；同时我们要对开发实现有预判，能与研发确认实现细节。

 

设计验收

目的：设计验收是为了确保需求满足、体验流畅，并且设计细节能高质量落地。

行为：视觉设计师主要验收视觉细节的还原度，并且要在一定程度上对开发的适配、样式解法有预知，减少二次验收。同时需要保证验收有沉淀，利于后续跟进。

 

数据验证 

目的：数据验证除了分析分桶之外，也可以分析产品上线后的一些问题、并在迭代中修改。同时我们也可以总结设计经验、提升未来设计的准确率。

行为：我们通常基于设计策略，去对数据进行筛选与分析，以此衡量设计对于目标达成的增益度。对于有问题的，能反思并且修改；对于结果好的，能总结并且沉淀。

 

设计复盘 

目的：设计复盘以结果为导向，我们可以通过复盘对设计策略的价值进行总结验证，并去发现、优化流程中的不足之处。

行为：我们需要陈述设计目标和策略，对设计价值进行验证，并能总结过程中的亮点与不足，制定后续计划、沉淀相关经验。

 

以上是酷家乐UED「UI标准设计流程」的所有内容，虽然它主要针对UI设计师而设，但相信它也能帮助到交互、体验设计师们去拨开乱麻，更好地为业务目标服务。

后续我们会与大家继续分享与之配套的「设计师成长指南」，它将基于Design Thinking为大家带来更全面的专业知识帮助。

同时我们也会沉淀基于该流程的几个典型案例，包括C端、B端、以及工具端，会在未来陆续与大家分享。

 

原文链接：酷家乐用户体验设计（公众号）（公众号）

作者：不戳

转载请注明：学UI网》让设计更有价值——设计流程指南

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小

助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

                                                            

 

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

 

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

我们都知道，数据是支撑决策的重要依据，于是我们可以看到，几乎所有的产品，都会具有数据统计分析的功能模块。往大了说，比如数据中台；往高端了说，比如数据大屏、数据看板、数据驾驶舱；往本质了说，其实就是数据的统计分析。作为一个非数据型产品经理，或者是初级产品经理，该怎样设计这个功能模块呢？

如果你刚好为此苦恼，不妨试一下我最近研究的这三步曲：统计+分析+可视化！

前言

关于数据统计分析，首先表达一个我蛮认同的观点：

好的数据分析师，要像眼科医生一样：配眼镜可能有很多专业的方法，有很多专业的工具，可在配的过程中，医生纠结的不是自己的理论，而是关注用户看得清不清楚，不断问用户“这样可以吗？这样更清楚吗？再这样试试呢？”

—— 接地气的陈老师

相信在工作中，大家经常会碰到一些“孔乙己”式的数据统计分析，一开口就是“xx 指标体系”，再加上一大堆什么“权威的、标准的、BAT 认定的”这之类的修饰词汇。这特么就是典型的虚假数据分析啊，因为这些大多数时候，耗时费力，却没有解决实际问题。

并且这种虚假的数据统计分析，还有它遵循的理论模型：

而真正的数据统计分析，就像太极拳的精髓一样：“只重其义，不重其招，你忘记所有的招式，就练成太极拳了。”（以解决业务问题为根本）

统计

要搞数据的统计分析，那第一步我们得先有数据，也就是数据的统计工作。提起数据统计，那自然绕不开数据埋点。如果你们公司从来没整过埋点这个事，那也不用大费周章，因为界内已经有很多成熟的埋点公司了，例如神策、友盟等等，直接花钱办事就完了，也不贵。

我们今天研究的，是通过埋点，能够获得哪些数据呢？总结下来，大概有这么五类：

埋点获取五类数据

1. 整体概况
2. 用户获取
3. 活跃与留存
4. 事件转化
5. 用户特征

来来来，我们逐个剖析一下，这几类数据，具体都包含什么，以及获取这些数据有啥用。

1. 整体概况

实时数据意义：可以获取到每个小时的产品实时数据，帮助你了解产品目前的实时情况。

使用概况意义：产品整体的使用情况，包括用户量、访问情况、留存等，帮助你对产品整体指标有一个大致的了解。

2. 用户获取

渠道访问意义：每个渠道的用户的使用情况，包括渠道中新用户的占比、留存等，帮助你了解产品在获客层面上的优势与不足。

版本数据意义：每个版本的使用情况，帮助你了解在产品升级的过程中，是否在活跃和留存方面有所改善。

3. 活跃与留存

访问流量意义：产品的每日访问数据，指标集中在新老用户的访问行为上，提供访问次数、时长、次数分布、访问时段高峰等指标，帮助了解新老用户在使用产品时的一些行为特征。

用户留存意义：提供用户 7 日，次日，次周，次月留存的数据，帮助你了解新老用户的使用粘性。

4. 事件转化

自定义事件意义：用户自定义关键事件，系统会自动生成该事件的发生次数、人数以及分布情况，也就是能够看到用户都在干啥。

收益类事件意义：用户自定义收益类事件，系统会自动生成该事件的发生次数、人数以及分布情况，会根据你选择的数值类型属性，计算该数值的总值、人均值以及次均值。也就是能够看到用户都咋花钱的。

5. 用户特征

用户特征意义：能够看到我们的用户，都是哪些牛鬼蛇神~

分析

有了埋点的数据以后，那就是怎样利用这些数据，充分发掘这些数据的价值了。数据分析的套路就更多了，把下面这些学会，应该“二八原则”里面的“八”就能够搞定了~

1. 常见的数据分析指标

综合性指标：反映产品的整体情况。

流程性指标：反映用户的使用行为。

业务性指标：反映具体的业务情况。

2. 常见的数据分析维度

数据细分：通过不同的细分维度分析，往往可以追溯到问题发生的原因，还能为后续的一些动作提供参考依据。

数据对比：没有对比就没有伤害，一方面是横向比较，即自身和别人进行对比，如常见的同比、环比；另一方面是纵向比较，即自身和自身进行对比，比如行业竞品、全站数据、AB 测试等。

3. 常见的数据分析方法

HEART 模型：Google HEART 模型的提出，可以让大家反思自己的产品设计思维，同时运用相关设计工具去提高 HEART 五项指标来完善用户体验，打造更好的产品。

AARRR 模型：该模型出自于《增长黑客》，它是在 2007 提出，当年的获客成本还比较低廉，而这种模型很简单又很直观地突出了增长的所有重要元素，所以这个模型很长时间内都很受欢迎。

RARRA 模型：而现在获客的成本与日俱增，市场情况和 2007 年已经完全不同。现在黑客增长的真正关键在于用户留存，而不是获客。于是，一个突出了用户留存重要性的模型 RARRA 诞生了。

可视化

有了统计的数据以及分析的维度之后，最后一步工作就是可视化啦！

而想要完成这一步，又快又好的方法，那自然就是参考各种规范啦，首先我们可以去一个叫做「e-charts」的网站，去查看各种可视化图表，因为开发很多时候，就是依照这些开源的图表库进行撸代码的~

而我们设计的时候，就需要借助各种原型组件啦。数据可视化的内容有很多，我们来举几个典型例子：

1. 折线图

注意事项：选用的线型要相对粗些，线条一般不超过 5 条，不使用倾斜的标签，纵坐标轴一般刻度从 0 开始。预测值的线条线型改为虚线。

2. 柱形图

注意事项：同一数据序列使用相同的颜色。不使用倾斜的标签，纵坐标轴一般刻度从 0 开始。一般来说，柱形图最好添加数据标签，如果添加了数据标签，可以删除纵坐标刻度线和网格线。

3. 条形图

注意事项：同一数据序列使用相同的颜色。不使用倾斜的标签，最好添加数据标签，尽量让数据由大到小排列，方便阅读。

4. 饼图

注意事项：把数据从 12 点钟的位置开始排列，最重要的成分紧靠 12 点钟的位置。数据项不要太多，保持在 6 项以内，不使用爆炸式的饼图分离。不过可以将某一片的扇区分离出来，前提是你希望强调这片扇区。

饼图不使用图例，不使用 3D 效果，当扇区使用颜色填充时，推荐使用白色的边框线，具有较好的切割感。

5. 其他

这种数据可视化的图表还有很多，而它的意义就在于，用图表代替大量堆砌的数字，有助于阅读者更形象直观地看清楚问题和结论。我也在工作中搜集到了一些不错的数据可视化原型组件，有需要的同学可以自行下载啦~

结语

好了，以上就是今天的所有内容了，正如前言所说的，我们今天只讨论武功招式，不讨论内功心法。

延伸一下：数据统计分析，最终还是要从业务中来，到业务中去，一切的形式，都是次要的，关键还是要以解决业务问题为根本、但对于我们这些“新手”来说，经验主义自然也是要借鉴的！相信今天总结的内容，也足够支撑大家比葫芦画瓢啦。

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

文章来源：优设   作者：晓庄同学产品笔记

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

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

在2020 年的苹果全球开发者大会（WWDC），苹果发布了新的 macOS 11（又名 Big Sur）。其中在UI视觉方面macOS Big Sur 系统最大的变化就是图标上， Big Sur更新了很多新设计风格的应用图标。

关于 Big Sur 的新图标的讨论很多，很多都在激烈争论。人们对苹果公司没有将完全扁平设计引入 Mac 感到松了一口气，但分歧并未停止。有些人认为这引领一种新的图标表现方式，而有些人则认为这是丑到了天际。

但苹果的设计就是这样，不管你你喜不喜欢，过一段时间他总会流行起来。就像iPhone11刚面世时，背面的摄像头组被无数人吐槽一样，而现在这个设计已经成了高端机的标板。

大家还能想起来UI扁平化设计已经流行了多少年了吗？

从2013年6月11日苹果发布iOS7算起，现在已经将近8年了，这8年时间扁平化像飓风一般席卷了整个UI设计圈，一夜间几乎所有的APP UI都被拍扁了。

其中以Instagram的换标作为扁平盛行时代的里程碑

但扁平化设计的确已经一统江湖太久了，人们似乎已经有点厌倦了。其实设计风格就是这样，并没有绝对的好与不好，只要审美不疲劳，就可以继续流行下去，至于流行多久我们经常会用一个词去形容---耐看度。

扁平化带给我们的是画面的轻盈和设计的高效率，但是缺点也是明显的，场景表现过于单一的问题，设计感体现较为有限，于是很多设计师都在尝试用新的设计风格替代或者进化现在的扁平化设计风格，今天我们就来探讨一下新拟物背景下3D与平面的结合设计，能在UI中擦出什么样的火花。

2014年我的作品-Cache 

https://www.zcool.com.cn/work/ZMjY1OTEwMA==.html

现在这样的风格会被我们称之为重度拟物风格，他不好看了？技术落后了吗？当然不是！只是目前不流行了！

他的特点是强调光影对比与物理质感，色彩都会比较偏“暗”，而且伴随设计的往往是难和慢！刻画一个细节需要很久，在强调设计效率组件化的今天，这种费时又难学的设计方法必然不会成为主流。

当前的UI流行趋势是强调高饱和的色彩搭配（在没有光影细节之下也只有色彩可以玩了），这种风格明显也不符合趋势，被“淘汰”也就难免了。

从设计角度上解析，图标主要是由四方面构成：构图+光影+色彩+纹理

而拟物风格图标在这四方面更加强调构图、光影和纹理，而色彩则是更多去搭配纹理质感，所以你看到多数拟物风格图标在质感上很棒，但是色彩却没有那么丰富。

说到新的拟物风格，这只是一个概念，也有称之为轻拟物，轻偏平，这里并没有通用的称呼和预设的设计方法，一切的UI设计风格都是为产品本身服务，如果新的设计风格能让产品整体体验得到“提升”，哪怕这种提升只是成功获取到了用户的注意力，那这个设计就是有价值的。

所以当下如果你的产品中想要吸引目光就要有点与众不同的东西，要么是独门的功能，要么就是吸晴的设计。
显然扁平的彩色图标现在已经达不到这个效果了，而以前的拟物又显得有点过时，在这种时代背景下，新的风格必然就会被碰撞出来。

于是乎我们就会看到以下的一些大厂“创新”，你不止能看到轻拟物设计，还能看到“实物”设计......

不得不说，各位设计师们还真是拼了...

“哪怕这种提升只是成功获取到了用户的注意力，那这个设计就是有价值的。”没毛病！各位加油！

当然苹果BigSur带给我们的图标设计创新更加有趋势意义，这种3D+平面的设计组合方法更加能给我们一些设计启迪和思考，并且这种3D图标与之前的拟物风格有着明显的视觉区别

我用3D重构了一个计算器icon，以此为例来进行分解，如下：

与2D设计方法设计图标一致，都是先勾画图形（建模），然后填色、加材质和灯光，但不同的是在3D环境下，这一切都比2D环境下简单了，而且视觉效果更佳，整体画面感更佳立体，质感更加饱满，并且根据渲染器的参数调节和材质质感的不同，即使是在同一模型下，也能制造出很多种不同的视觉体验。

图标背板的选择上，由于选择了3D作为主体表现，3D背板过于抢视线，图标为了突出主体而非背景，建议使用2D平面背板与3D前景图标进行结合。

3D设计图标的确有一些天然的优势，特别是在质感和光感的表达准确度上，是绝对超过2D的。
但是2D图标在一些风格的设计也是很难替代的，比如线性图标和渐变风格图标。

3D设计的确可以提升UI整体的视觉氛围，并且现在在一些APP中已经可以看到小范围3D案例了（比如支付宝），但是多是以插画的形式出现，其实与产品UI还是有一定距离的。

未来3D设计一定会是UI中大展身手，但是目前的常见的3D设计软件实在是太庞大了，我与许多3D行业的同行聊天的时候，大家普遍的认知是现在的3D软件（包括C4D）的实际最佳场景依然是动画设计，UI的中的3D属于非常轻量级的，用现在主流的3D设计软件做UI应用案例，有点用巡航导弹打蚊子的感觉，而且这个蚊子还是距离一米以内。这有点像当年的PS来做UI，虽然可以完成但是效率不高，学习曲线也高，于是Sketch和Figma这样的产品顺理成章的取代了PS在UI界的地位。

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

文章来源：站酷   作者：残酷de乐章

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

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