老龄化社会已经到来，如何让中老年群体更好地使用互联网产品是当今的热门话题。猫眼演出设计团队负责的一个 B 端项目的使用人群需覆盖到中老年用户，也属于适老化的涵盖范畴。
在前期调研和设计环节中，我们收集了一些相关的文献及案例，并且结合项目实践有所思考和沉淀，在这里与大家分享。
世界卫生组织根据现代人生命状况，提出了人生阶段年龄的新划分。45~59 岁为中年人；60~74 岁为年轻老年人；75~89 岁为老年人；90 岁以上为长寿老人。[1]
随着年龄的增长，人们的身体机能、心理状态、认知能力等都会出现衰退的情况。
适老化设计是无障碍设计中的一种。无障碍设计于 1974 年由联合国组织提出，设计中需要充分考虑具有不同程度生理伤残缺陷者和正常活动能力衰退者（如残疾人、老年人）的使用需求。[2]
目前互联网产品中大多数的适老化设计，主要是集中在 C 端。针对不同障碍（视觉、肢体、听觉、认知障碍）[3]，目前普适的适老化设计原则有：
1. “强烈“好于“柔和”
针对视觉障碍，常见做法有增大字体大小，使用非衬线体字体，提高颜色对比度等。
相比原版的 App，百度大字版 App 和支付宝长辈模式修改了 UI 界面，每个功能模块都用了明亮的大色块、加大字体的设计。
2. 善用“辅助”和“替代”
针对听觉障碍，常见的做法有通过视觉辅助，将声音转化成文字、扩大音量、降低语速等。
Google 安卓系统推出了 Live Caption 功能，可自动将手机上播放的内容转换成字幕。Live Transcribe-「Sound Notification 声音通知」功能，可识别特定声音（比如烟雾警报器、婴儿啼哭、敲门声等），并转化成文字及视觉符号推送至手机，方便听障用户辨别生活当中一些重要的声音信号。
3. “点击”好于“滑动”
针对肢体障碍，减少页面信息的密度，避免使用过小的按钮以及复杂的交互手势。
有研究表明，老年群体在操作时难以瞄准物体，在浏览图片时，由于视力衰退导致无法对焦，他们会不断地用两只手指放大/缩小并反复点击屏幕。[4]
平安银行 App 关怀模式采用卡片拼接的设计方式，将间距放大，保证每个信息有更大的展示空间，同时也放大按钮点击热区，提高操作的准确率。
4. “具象”好于“抽象”
针对认知障碍，避免使用不易识别的图标，尽可能配有图标或图片，简化信息内容。
有研究表明，文字+图标为主的设计有助于提升老年新手用户对新 ATM 使用的学习效率和记忆。[5]
滴滴 App 关怀模式针对老年人进行功能精简，满足高优先级核心诉求，首页只放「一键打车」，操作简单，大字、无广告。
在很多行业中，中老年人因为拥有丰富的经验在岗位上更具竞争优势，譬如教师、医生、律师、会计等职业，工作年限长、经验足是优势，可以提供更好的服务。他们既会使用 C 端产品，也有使用 B 端产品的场景。
随着时代变迁，2015 年世界卫生组织提出了“健康老龄化”理念[6]，倡导改变过去“老了就要退出社会生活”的消极认识。
从“老有所依”到“老有所为”，很多的 B 端场景都覆盖了中老年用户，如何提升中老年用户的办公用户体验是重要课题。
另外我们看下 C 端与 B 端的主要差别：
C 端 App 中时常将简单作为适老设计宣传点。追求简单有一部分原因是，C 端用户是在自己的场域操作且几乎无时间压力。而 B 端产品却相反，业务逻辑复杂，用户要长时间使用而且要求效率。B 端面向企业定制化，针对特定人群、情景，使得在适老化设计中要解决的问题更清晰。
留意生活中的零售行业，如餐厅、商场、药局、便利店的服务人员，往往能看到中老年人的身影。
POS 系统是 B 端场景中使用率最高的产品之一，POS 系统的英文全名为 Point of Sale，中文名为销售时点信息系统。[7]它由硬件与软件组成，根据产业和店面类型的不同，会有功能上的差异。
最近团队参与了一个改造 POS 系统的项目，使用人群覆盖到了中老年用户，提升他们的办公用户体验是其中一个产品目标。
本次项目主要是 POS 界面的更新，完整的 POS 体验不仅有软件本身，有更大的部分在于实体环境与设备，例如：结账区的控件、店面的摆设、扫描枪，读卡器等，而 POS 界面是连结上述元素的节点。
在对 POS 系统进行改造时，我们是按照以下设计思路进行的：
第 1 步:沿用旧系统规则与结构
B 端系统背后往往由成熟的业务场景和复杂的业务逻辑构成。B 端系统往往不是一个从 0-1 全新的系统，而是存在一个被使用了很多年的系统。
在这种情况下，企业服务的每个用户都是趋向于规避风险的。人们可能已经习惯了原有的解决方案（尽管不好用，但是大家都会用了），但新的方案如果不好用，他们的生产力反而会因为不知道如何使用新方案而降低。
这就意味着在做 B 端设计时，现行的方案会产生很大的习惯引力。
当设计师要引入一个新方案时，取消或改变某些功能及操作行为将有难度，不能霸道性更改，取代需要合理性。
设计思路：
第 2 步：理清主要用户与使用场景
想要了解使用者的真实痛点，需从场景出发。
第 3 步:用适老化设计原则去解决场景中的问题
POS 使用场景有很多，这里列举 3 个常见的使用情境：
可能存在的障碍：无法聚焦信息内容，难做到边看屏幕边与顾客交流。
设计目标：确保信息在复杂的环境中，信息内容清晰可读。
设计思路：
1. 放大信息内容
服务至上，POS 使用者在工作时需保持端庄热情的姿态，不能只专注看 POS 屏幕信息而不顾顾客。
内容大小的确立由设备分辨率、环境灯光、字体、视距等因素决定，在复杂的现场环境中，信息内容要清晰易读。
2. 色彩对比度符合 WCAG 标准
参照 WCAG 有 AA 和 AAA 的对比度标准，界面中的信息与其背景间的关系对比度至少在 4.5:1 之上，保证信息易读性。
WCAG 全称是 Web Content Accessibility Guidlines(网页内容无障碍指南)。这是一套由无障碍功能专家编辑的指南，有若干国家在其网络无障碍功能法律要求中明令必须使用这些指南。[8]
一些设计插件可以帮助我们检验色彩对比度是否符合 WCAG 标准，给大家推荐 2 款：Sketch 插件 Cluse，Figma 插件 A11y-Color Contast Checker。
3. 设计有意义的动画
通过动效来表达静态视觉效果无法准确传达的信息，如反馈、引导下一步、状态表达等。好的动效与视觉设计是互补而成系统的。
比如用动画来展示商品被加进购物车的状态，引导下一步操作。
4. 加大点击热区
提高使用者点击操作的准确率和速度。
5. 一屏策略
在这次的项目中存在一个场景，除了销售端服务员看到的屏幕，顾客也会有一个客显屏，即服务人员看到的界面，顾客也会看到。
对于页面信息框架以及布局尽量“一屏”展示，确保双方的视线和注意力一致，便于沟通交流。但这时会有挑战：字放大、按钮放大，信息和功能在一屏上怎么放得下？
解决思路：
可能存在的障碍：在顾客的“催促”下，使用者也会着急，对事物表现出茫然的情绪，定位当前位置困难。
设计目标：追求信息的有效表达和操作的直觉性与效率。
设计思路：
1. 避免使用不易识别的图标
B 端系统中会有些功能很难用一个图标去表达其含义，此时文字+图标按钮优于纯图标按钮，能帮助 POS 使用者更好地理解语意并做出操作。
2. 信息的呈现符合用户眼动规律，操作轨迹越短越好
可运用古腾堡图表法 Diagonal Balance，它由 14 世纪西方活字印刷术的发明人约翰·古腾堡提出。他发现人们视觉阅读规律，左上角是视觉第一落点区，右下角是视觉最终落点区，右上角和左下角都是一个视觉落盲点，大多数情况容易被忽略。
在进行信息排布时，可根据用户习惯性的眼动规律，将最重要的信息放在左上角，右上角和左下角添加辅助元素，右下角作为整个视觉落点可以展示重要操作。
可能存在的障碍：百忙之中，应变能力下降，容易发生误操作的情况。
设计目标：预防不当行为，提升容错率，反馈要及时有效且清晰。
设计思路：
1. 通过二次确认避免误操作
在产品设计时，要把各种可能性考虑进去，通过模态对话框让用户二次确认来避免误操作行为。
当有重要操作时需告知用户处理结果，状态反馈信息采用的颜色需要遵守用户对色彩的基本认知，如红色代表警示，黄色代表警告、绿色代表成功等。
上述举例的设计原则是启发但不是限制，每个设计提案最后都要经过用户调研，看是否符合使用者的使用习惯，是否真能解决业务与工作中的痛点。
附上总结图：
其实设计到后面会发现，起初为了方便中老年用户使用 POS 运用的设计原则，最终都能给多数人带来很大便利。
这是因为我们每个人在某些时候都会遇到各种临时的无障碍需求。
适老化设计，不仅仅只是为中老年群体做设计，更是一种新的设计思维方式，去挖掘更多普适的场景痛点，来指导我们做方案设计。
市面上很多适老化设计方法为 B 端产品提供了借鉴，但 B 端产品不能为了适老而适老，理清相关工作情境和要解决的问题很重要；不能霸道性更改，取代需要合理性，因为 B 端产品现行的方案会产生很大的习惯引力。
以上是近期对 B 端引入适老化设计的一些思考和沉淀，是开始，也将继续，适老化设计还有很多值得深究和验证的内容。
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
在 2020 年，疫情最为严峻的时候，B 端这一领域得到了前所未有的关注，而那时，身为 B 端用户体验设计师的我，也曾总结过，当时 B 端设计的诸多趋势，比如：
多端需求：即桌面端、平板端、移动端的设计形式
设计中台：拥有更为统一的设计平台，与这两年讨论较多的设计资产相同，都是起到快速协作的作用
随着 2022 年的到来，B 端行业又会迎来哪些新的机会？今天我们就从整个的 B 端入手，回顾一下 2021 年的设计形式，展望一下 2022 年的设计趋势。当然趋势完全是我自己个人主观理解，仅供参考，如有异议，以你为准~
完整的趋势，我们会分为视觉趋势与产品趋势：
虽然 3D 化的视觉风格早已到来，但是在 B 端市场上，3D 风格在此之前依旧表现的十分克制。随着 C4D、Blender 这些 3D 建模软件的不断普及，再加上互联网上关于 3D 建模教程的增多，你会发现 3D 风格的视觉表现，是一个 B 端视觉设计师的基本要求。
而 3D 风格用在 B 端软件当中，会有两个使用场景：
图标
因为在 B 端产品当中，图标本身就是非常难以去表现，比如“物联网，大数据”，许多抽象词汇很难通过一个具象的事物进行表达，而在企业官网当中，在视觉表现上的要求又十分的高。因此你会发现，在视觉风格上的选择，往往只有 3D 图标 + 插画这一条路。
并且 3D 图标的使用场景不会太过于局限，也可以用于产品的工作台、运营营销工具箱等页面，因此 3D 图标的出现，它的应用场景也会相比之前要更加的广阔。
可视化大屏
大屏设计也在不断的“内卷”，因为传统的 2D 可视化大屏所搭建出来的大屏已经满足不了企业的野心， 像 DataV 腾讯云图 ，大家都在朝着 3D 风格，炫酷的方向进行延展，因此也就会导致 3D 的视觉风格需求激增，而 3D 建模仿佛就是大势所趋。
虽然新拟态是在前两年的产物。这个设计风格背后，遭到了很多设计师的质疑与排挤。但是随着这个风格的不断成熟，感觉它在 B 端视觉领域（特指的是官网 ），是非常受欢迎的，因为整体的风格，与官网的设计形式趋同。
同时作为 B 端产品的官网，其实是更需要新拟态这种风格。因为电脑场景下鼠标光标对页面进行 Hover 操作给出的真实反馈，而使用了新拟态的官网按钮，给你的反馈非常真实。
这里安利一下腾讯云的首页官网，大家就会发现在设计风格上大量的采取了新拟态元素，并且配合 3D 风格的图标，以及毛玻璃材质的设计，让它的设计瞬间加分不少。
在去年，设计系统迎来了一波发展的高峰期，随着字节、腾讯，三大设计系统（Arco Design、TDesign、Semi Design）的开源，其实是给我们很多 B 端设计初学者，有了更加完整仔细的 B 端入门教程。
清晰的讲解了每一个组件的使用方式，以及注意事项，仔细阅读这里面的内容，其实就是 B 端设计的入门学习。而未来，国内的环境，开源的系统也会越来越多，大家可以针对这几大类不同的设计系统进行对比，或许会有一番收获。
这里的超级 app 可能和大家潜意识里的支付宝、微信这些软件不太一样
在 B 端行业，随着疫情的不断扩散、再加上两年时间的发展，很多 B 端产品的功能架构都出现了一个现象，产品的功能开始变得非常拥挤。因为 B 端软件的核心价值其实就是靠着一个又一个功能去累积，也就意味着随着 B 端产品的发展，功能模块在不断的累积，导致在设计层面，这样的现象变得更加严峻。
你会发现左侧的导航菜单已经完全没有办法装下这些导航内容，而这一现象也反映在很多产品当中，比如我了解的飞书管理后台、薪人薪事 等等诸多 B 端产品，它们在整个导航内容上，已经增加到一级导航 15+ 、二级导航 40+ ，这无疑会开始对设计师的能力造成巨大考验。
面对这一情况，许多导航菜单都将会迎来前所未有的挑战，最近也在深入研究导航菜单过多时的解决办法，发现了一些新的导航菜单设计方法，有机会咱们重新梳理一下导航菜单的内容，将 B 端设计指南文章进行更新。
低代码定制化
低代码一直是我关注的一个领域，先给不明白低代码的同学简单科普一下。
低代码，一种快速开发应用的软件，将通用、可重复利用的代码形成组件化的模块，通过图形化的界面来拖拽组件并形成应用。低代码能够实现只写少量代码或不写代码，类似用“乐高积木”的方式来开发。
在国外有很多著名的低代码成功案例。Outsystems（国外非常出名的低代码平台）帮助施耐德电气在 20 个月内推出了 60 款应用程序，开发过程加速了两倍；在 2012 年即将推出 Model S 之际，特斯拉放弃了 SAP 的 ERP 产品（可以思考一下为什么），改用低代码开发平台 Mendix，用 25 个人四个月时间自建 ERP 系统。
去年，低代码平台，也有很多新产品面世，其中就包含：
因此你会发现，其实低代码就是在解决一件事，围绕着某一个业务场景，通过平台的持续完善优化。让所有的功能都能围绕这个业务展开，其中包括：权限、时间轴、流程、表单、公式等等，能够解决很多特殊的业务场景。而低代码会涉及到设计思路上的转变，以及低代码编辑器的出现，如何去设计如此复杂的配置流程，如何让用户能够快速上手，如果你能够有比较完整的思路，这些都会成为我们设计的新机会。
行业细分
随着互联网市场的不断发展，用户会越来越关注产品在自己行业的应用，比如 CRM，其实只是一个笼统的称呼，现在 CRM 市场又会分为 SCRM、运营 CRM，等诸多产品。
SaaS 类的平台也出现了负责从虚拟主机和数据库层面入手的 iPaaS 以及从应用和数据层面入手的 aPaaS。
即使是大家经常使用的 钉钉、企微、飞书，它们也在各自的领域有所擅长。
因为 B 端产品，在底层逻辑上是不能允许趋同的产品出现，如果你和别人的产品一样，其实是没有办法在目前的市场上立足。因此你会发现，虽然产品形式都会比较相同，但是 B 端市场十分广阔，大家都在去寻找自己产品的差异化。
当然市场是瞬息万变的，这里也只是简单聊聊我自己的看法，希望对你有所帮助。
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
B 端产品主要是 Web 端产品，空间大、操作多，内容相对复杂。需要通过页面布局或者视觉设计表达出明确的逻辑关系，从设计角度降低用户的学习成本。而用户有固定的认知规律。格式塔原理揭示了人类视觉的认知是整体的：我们的视觉系统自动对视觉输入构建结构，并在神经系统层面上感知形状、图形和物体，而不是只看到互不相连的边、线和区域。
格式塔主要包括 7 个基本原则：
今天我们就来总结下，格式塔原理在 B 端产品中是如何应用的？
我们先看 2 张截图，分别是不同分辨率下的界面效果。
可以明显的感觉到高分辨率下，菜单列间距离较大，菜单的归属关系很清晰。而低分辨率下，菜单间的距离变小，特别是后面两列的菜单会给人混在一起的感觉。这就是格式塔原理中的接近性原则，距离近的关联亲密，距离远的就各自独立分组。
当我们想要传达给用户层级关系时，就需要善于利用接近性原则。例如表格上方的功能按钮，通常我们将高频、核心操作放置在左侧，低频、辅助功能放置在右侧。通过增大元素间的距离，达到功能分区的目的。
相似性原则是通过颜色、尺寸、图形等方面的共同属性，实现信息的分组或者高可读性。
例如在可视化图表中，不同范围值的指标采用不同的背景色。通过背景色的差异，将同一范围内的数据形成视觉关联，提高用户对信息的识别效率。
通过图形尺寸的相似性也可以构建内容分区。例如阿里云、腾讯云控制台的首页，都采用了双列设计，左侧主要以高频的业务功能信息为主，右侧是辅助运营信息。两列尺寸宽度有明显差异，用户会将相同宽度的卡片归为一组。这样有助于用户理解两类卡片的内容差异，并有效地突出业务信息。
IBM、苹果的 Logo 设计，无论是“用刀砍过”，还是被“偷咬了一口”，用户仍然可以识别出完整图形。这就是视觉闭合性原则的一种表现方式。
在 UI 设计中，则会通过对齐方式，形成虚拟空间。例如下图中阿里云通过明显的背景色、阴影等手法形成有形的内容空间。而微信公众号则是平铺背景色，内容区借助标题、卡片对齐形成视觉闭合空间，最终将页面划分为左侧导航菜单和内容区两个空间。视觉表现上更轻量化。
另外闭合性是需要元素之间相互辅助的，单独的元素无法构建出闭合空间。以下图为例，虽然四个小的卡片做了间距分割，但是由于界面整体上是横向分割的。我们会将 4 个卡片看作是整体元素去理解和认知。
用户更习惯于从左到右的横扫阅读，因此连续性主要体现在横向空间中。
下图中，虽然左侧的标签文字与右侧的内容信息有较为明显的间距，高度尺寸差距也比较大。但是用户不会将内容看作是 4 个独立的个体，而是理解为两组信息。
在某些场景中，如果信息平均分布，不会产生连续性的视觉感知。
例如下图指标监控中，指标都是采用小卡片，间距、尺寸较为统一。这种情况下用户就很难对信息分组处理。在我看来这些指标只是一个个的视觉散点，没有明确的视觉重点。用户无法感知到内在的逻辑性。用户想要找到某个指标时，需要逐个检索，花费的成本更高。
通过上述很多图片，我们可以看出页面元素基本都是横平竖直，中规中矩的元素和分割方式。或许有些单调乏味，但是胜在简单，不会带来额外的视觉噪点。
特别是 B 端产品，基本看不到异形的存在，甚至全圆角矩形都很少见到。即使有异形，也只是作为视觉表现元素存在于内容中，而不会作为空间的划分边界。
主体与背景原则最典型的应用就是蒙版弹窗。通过拉大主体与背景的差异性，凸显弹窗信息。
当我们需要着重表现内容时，同样适用于主体与背景原则。例如登录界面的设计，会通过差异化的背景、阴影等方式，带给用户清晰的视觉层级，适当凸显输入框的主体地位。
而 B 端内容区是核心空间，基本都是采用纯白背景，与页面背景形成对比，从而占据信息的主体地位。
共同命运原则听起来有点玄学，指的是相同运动特征的元素会被认为是同一组或者是具有相关性的内容。运动的元素在 B 端产品中应用很少，我没有找到合适的案例解释这个原理。
在移动端产品中有些应用案例。比如 iOS 系统中，桌面布局编辑态下抖动的图标，可以与静态不可编辑的内容形成隔离效果，视觉引导性更强。同样今日头条频道编辑时，也采用了抖动效果。
虽然 B 端产品没有 C 端色彩丰富，表现力上没那么炫酷。但是两者对信息传达的要求是一样的，要求和谐、有序、层次分明，辅助传达内在的业务层信息。灵活地运用格式塔原理将对产品的体验提升会有很大的帮助。
格式塔原理不仅限于视觉表现，产品经理或交互设计师在原型设计时，也要重视格式塔原理，辅助设计方案表达，提高团队间的协作效率。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
提到轮播首先可能想到的是广告，我们经常在移动端首页或网站首页会看到各式各样的轮播banner，不管在移动端还是网页上通常点击数据都是非常差的，本篇文章带你深入了解banner轮播。
如果需要设计一个轮播，我们应该考虑哪些因素？如何让轮播更具有价值？如何让轮播的体验更好？如何避免轮播常见的问题。
本篇文章通过以下几点探索轮播的特性，预计阅读20分钟
1、用户真的使用轮播吗
2、轮播的轮换形式
3、轮播的进度展示
4、轮播定位
5、轮播的切换
6、对轮播进行分类
7、使用缩略图进行预知
8、轮播异形化
9、轮播时间
10、总结
用户是否对轮播有感知，这个则需要根据不同的场景进行判断，包括每个产品中的每个轮播对用户用户的定位也不相同，常见的应用场景品牌曝光、活动营销、产品展示，每个场景下相关的数据也不相同。
促销轮播banner
品牌推广轮播banner
产品介绍轮播banner
同时还有个关键因素，轮播的占比，这里以pc端为例若是产品是以品牌效应吸引用户的，大多轮播是以大的屏幕占比为主通常会占首屏的50%，如果是以营销、内容为主的产品，轮播通常以16:9、7:4的常规比例进行展示。
用户在使用产品时会默认忽略轮播区域，一般轮播都会有自动轮换机制，一定时间后自动轮放下一张banner，那么每当页面上进行轮播时便会吸引用户进行关注，效果上会有一定的提升，所以在轮播中第二张第三张的效果往往会比第一张轮播的效果更有效一些。
还有一种用户比较喜欢关注轮播过去的banner以此来满足好奇心。
如果banner是作为内容传播希望用户通过banner了解内容，那么则要避免放在最后一位置，对于用户而言最后一张轮播路径过于长，并且用户很少会手动滑动banner。
国外一家公司在针对轮播中进行了相关的研究测试，随着页数的增加用户的点击逐步下降。
那么如果想让产品中的轮播更具有效果，则需要根据不同的场景设定策略达到目的。
不管在移动端还是手机端，轮播都有各种交互形式和尺寸，以pc为例在交互上会多样化一些，常见的几种则是通过滚轮滑动、通过点击切换两种。
如下图某艺术网站，它则是通过鼠标滚轮进行切换轮播banner，并且banner的占比也是铺满首屏，这种轮播形式适合一些品牌、产品宣传等相关的网站以此来突出产品的亮点，同时也符合用户目标。
在看下面这个医美网站它的切换方式则是通过鼠标点击进行切换，并且占比也是铺满首屏，在医美领域用户更关注美感，而轮播形态也是符合用户的心理预期更加沉浸美观。
而在移动端轮播的形式就比较统一，大多都是自动播放+手指滑动进行切换。
在网页中轮播都会有当前的定位点，许多用户的习惯是点击进度条进行切换banner这样能够更快的达到目标，不用一张一张切换，但是在有些产品中会忽略这一点，设计中会做的非常小导致用户在点击上可用性不太友好，如下图中的banenr进度点设计上过于小导致点击上有些阻碍。
如以下网站去除进度定位的方式，通过缩略图预览来告知用户下一个banner的内容，空白区域也可以添加缩略图引导介绍等关键信息，帮助用户提前预知在体验上相对较好。
以下国外某网站在进度定位的设计上采用了标签文案方式进行设计，能够帮助用户更加全局的了解banner内容
定位主要是用来指示当前轮播的进度，像上图中讲的便于用户更加全局的观看banner的张数和当前进度。
以下网站的设计中则把定位与进度相结合，进度条展示该banner预计多久会切换下一张，对于自动切换的产品轮播这个更直观的进度展示体验上相对较好。
以下是某个国外网站，不管是pc还是移动端都在轮播底部添加了水平条，告知用户当前位置
随着市场上产品同质化严重，产品的竞争力也更依赖体验，在下图中的数据可视化的网站上，在进度条上就利用了产品的特性以饼状图的形式进行展示。
在刚才上面举的例子中很多优秀的网站在设计上都很有创新性，但是需要注意一个点，在轮播中不只有自动播放，还需要考虑用户手动切换，因为在实际用户浏览中可能会对产品的播放时间达不到预期，此时则会使用手动切换，除去可点击的进度点，还需要上一张和下一张的入口切换。
在此基础上需要注意，在处于最后一张banner时，下一张切换还能不能点击，第一张时上一张切换还能不能切换，这个取决于产品特性和轮播张数，如果轮播张数过小的话则需要进行循环播放，如果过多的页数则第一步和最后一步不可点击。
上一张和下一张的距离远近取决于banner的大小，如果轮播banner占比较大时则需要考虑用户的操作时长，距离越短时间越快，为了避免用户操作失误在相对较近的切换按钮则需要在视觉上做的比较突出，便于用户寻找。
如果banner占比在首屏中占比较少的情况下则需要让切换按钮的间距拉大，保持视觉平衡，因为小区域banner用户能够更加全局的观看，在使用上不会犹豫。
反观移动端在轮播中除了展示banner进度外很少展示切换按钮，移动端更加依赖手势交互。
当轮播banner过多时利用标签进行分类，用户通过点击标签进行查看相关的轮播组合。
此方式更适合一些电商平台、新闻网站这种内容过多的产品
如下图国外社交媒体网站则使用了标签进行分类，此处提一句轮播不仅限于首屏banner。他的用处可落地在各个场景。
在banner首屏中，显示的内容越多，越能激发用户进行点击，像上面讲过的农业产品网站就使用下一张预览图的形式进行展示，当然不仅局限于这种形式，如下图中的餐饮网站把所有的轮播banner展示给用户观看。
相对于缩放图，图标展示效果上也较好，空间占用更少，使用这种方式需要谨慎，对图标的识别性要求较高，我印象中能够使用的这种方法的网站是苹果官网，让产品抽象化展示。
在移动端也存在这种设计手法，但是基于分辨率原因移动端的缩略图展示过少，最常见的如下图中的马蜂窝和企鹅电竞。
轮播最大的缺陷则是像刚开始讲的用户会默认为广告，对此可以使用个性化设计突破用户心理障碍，使轮播banner更具备亲和力。
如下图中的数码科技网站，利用产品与背景的结合营造出一种功能性的展示。
再例如下图中苹果官网入口，结合百度的定制化功能在大搜中进行个性化处理，把常规的banner轮播以功能卡片形式进行展示，同时卡片承载产品动画引导用户进行点击。
苹果官网进入后随意点击产品介绍页后会发现，苹果把轮播结合鼠标滚轮营造沉浸式观看，每个屏效内都展示产品一个功能特点，打破传统banner的展现形式。
自动播放的轮播会根据用户的耐心和用户的诉求进行调整优先级，如我们平常使用产品时会忽略banner广告，我们会更加关注移动中的东西，特别是在移动端上通常是banner进行轮播时才会关注。
谷歌设计团队曾对banner轮播的时间进行测试，测试结果得出5s-7s的轮播时间最佳，在这个时间内用户有足够的时间对轮播banner上的产品内容进行了解。
如下图谷歌商店的轮播时间设定在6s。
同时还需要注意，在自动播放的过程中如果用户鼠标hover上去后，则需要判定播放暂定，避免用户错过感兴趣的内容。
本文从轮播的样式、特性、用户对轮播的认知等多方面的介绍，在实际产品中轮播有很多可用性上的问题存在，我们在设计中则需要根据自己产品的特性、用户群体特点等多维度去思考适合什么样的轮播形式。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
Dribbble 平台对于互联网 UI 界面设计有着举足轻重的定位，对 Dribbble 设计的研究会让我们看清设计的方向。
为了保证这篇文章的质量，Dribbble 年度的每个作品都超过 550 赞。在此原则下挑选了 828 件作品，作品总的大小为 2.2G。
从挑选出的 828 件作品中，排名前十的作品中 9 件为 B 端设计，另一件作品也是 B 端产品 C 端化的产物。其中：
明眼人都能看出其中的比重关系，B 端设计再次大火，为什么是再次？因为 B 端设计之前火过，只不过没有赶上一个好的时代，在 C 端设计风光的十年里而忽略了其存在。随着 C 端市场饱和与数字化的浪潮下，实体经济、ToB、ToG 的产业再次迎来了它的曙光。视频动效的作品占比也已超过 C 端界面设计，相信今年视频动效作品占比还会再次提升。
Dribbble 年度最佳作品来自大家最熟悉的 UI8 团队中的 Tran Mau Tri Tam ✪，作者来自越南西贡，最佳作品截止目前355K浏览量，2933个赞。
为什么看似平平无奇的作品却能获得 Dribbble 年度最佳作品呢？既不是 C 端也不是纯 B 端的作品，更像一个网页与平面的结合体。如果去掉搜索图标、分类图标和按钮，你可以理解它就是一个平面作品，一个字体加几何形体构建的作品，为了丰富画面的层次，让画面更加的活泼采用了多彩加几何色块，让标题阅读有停顿感和呼吸感。faster 底部的横线让它从标题文字中脱颖而出，这种使用线条突出重要信息的设计也是今年Dribbble 设计流行趋势之一。
MetroUI 是 Windows8 的界面设计语言，在 2010 年至 2013 年间曾经风靡一时，那也是移动互联网的发展元年，现在国家推行实体经济、数字化带动 To B、To G 的发展元年，通过几何色块（MetroUI）实现 B 端产品与 C 端设计风格的传承与衔接，你会发现历史总是惊人的相似。最后背景结合今年最流行的微软风，毛玻璃的多彩高斯模糊渐变风，年度作品当之无愧。
最后来看下按钮的设计，正常的按钮要么文字加色块，要么左图标加右文字，它设计成左文本加右图标，更加注重信息的可读性和易读性，也体现 B 端设计重功能和交互体验，视觉点到为止的设计理念。
下面我们来欣赏年度最佳作品里面的流行趋势吧。
1. 易读性（停顿感）
字体三原则：可读性、易识性、易读性。当你同时读一篇文言文和一篇设计文章，肯定设计文章的内容可读性更好。易识性是用在字体设计上，不能过于浮夸的改变字体骨架、形体而不易识别。易读性和每个位设计师都息息相关，因为我们都需要编排文本。当我们小时候写作文时，不会写的文字可以用拼音代替。这时候读者读到拼音时会有停顿感，更加适合用户阅读。
通过给用户制作停顿感来增加用户的易读性。可以在相关联文本后面添加图片、表情、图标来更好的理解文本内容，丰富文本内涵。比如情侣间表达爱意时会输入文本，“我爱你”、“我 Love 你”、“我 ai 你”、“我❤️你”，哪个更加会有情感共鸣呢？不言而喻，相信你心中已经有答案了。
2. 曲线
在标题文字上添加曲线来突出重要文案是 2021 Dribbble 最流行的趋势之一，第一个设计目的就是突显文字，其次就是想表现铅笔真实书写的感觉。之前很多带有签名的设计中，签字的文本都是手写体的感觉，手写体对比电脑的机械字体会带有一种人文气息，也会让两者之间产生一种对比、矛盾。
除了突显文本外，曲线还有视觉引导的作用。通过视觉引导让用户按照设计师编排的顺序进行浏览界面。当然还有比这更科学的工具就是眼动仪测试，通过真实用户眼睛浏览界面显示对应的热点图。
3. 多彩高斯渐变风
多彩高斯渐变风是从色彩的角度来传达和丰富画面的，多彩高斯渐变风其实是从制造矛盾到平衡矛盾的过程，多彩渐变多为冷暖对比来制造画面的冲突，需要控制冷暖画面的大小来实现平衡。主流的还是以暖色突显为主。多彩渐变主要起到活跃气氛、吸引目光、平衡画面的作用。
多彩高斯渐变还可以结合轻拟物、几何图形、三维等新的组合方式去创新，给用户呈现一种更加新颖的视觉表现形式。最后我们还是要回归到内容上，为了更好的传达信息需要去设计与内容相匹配的视觉风格。
1. 侧边栏 Sidebar
B 端设计的火爆带动了 B 端相关模块设计，更多的人也愿意尝试 B 端相关模块设计，侧边栏作为产品架构中重要的导航系统，好的侧边栏设计能为用户带来更好的效率。主流侧边栏都做了展开、收起、拖拽等交互效果，也是受限于 PC 屏幕为展示更多数据而腾空间。侧边栏主要承担的功能有导航、分类、自定义筛选、共享、新增等。Dribbble 的 B 端产品设计已经不再是假大空概念设计，而是一套实用美观可落地的设计。
2. 仪表盘设计
仪表盘设计是一个很好的隐喻，想象一下开摩托车或汽车主驾驶前面的屏幕，汽车仪表有燃油表、车速表、里程表、水温表、转速表、故障指示灯等。B 端类产品后台界面的仪表盘设计也需要展示一些重要的数据和各种状态，大体分为侧标栏、导航栏、待办任务、个人信息、报表数据、消息中心、快捷入口等。当然最重要的就是报表数据，团队收益、任务进度、转化比例、新增、存量、团队工作时长等都是老板或领导关心的内容。每个公司业务不同、每个人员权限不同，自定义的仪表盘也各有差异。重要的是突显数据和业务状态，需要分层级系统性去思考和设计。
3. 流程设计
复杂的事情简单化，简单的事情标准化，标准的事情流程化，流程的事情自动化。流程设计是每一个企业核心功能和业务，可自定义的管理流程系统搭建也是 B 端产品设计的难点，需要对业务高度抽象，让每一个业务人员可自定义的流程才是好的流程设计。
4. B 端 C 化
B 端 C 化是 B 端产品设计的视觉表现力慢慢往 C 端产品设计的视觉靠齐，国内 B 端产品界面设计视觉水平还有很大的提高空间。除了视觉上的提升外，由于业务的发展，B 端产品也开始移动化、智能化，国内主流还是通过小程序、H5 来现实 B 端产品 C 端化。
5. 轻代码化
轻代码化是一种低代码赋能无代码的方式，弥补无代码拓展性差、覆盖场景少的问题。在保有无代码灵活、易用、快捷的同时，又能覆盖低代码使用场景。简单理解就是无需代码开发即可如搭积木般快速、灵活地创造属于你的个性化管理系统，轻松实现多元业务场景的数字化管理。
轻代码化将功能进行打包，升级成全局可以用的配置，技术人员配置好后，业务人员在应用编辑时直接选择使用模版，绑定对应的变量即可使用。
1. 人文气息
为什么人加色块的组合方式能流行起来？还是 B 端行业流行带动的。B 端讲的更多的是企业对企业。企业对企业除了讲行业解决方案外，还需要传达公司的价值观、使命、愿景。人加色块的组合方式非常适合体现公司的企业文化。对于一家全球化的公司不同肤色的人物组合在一起，这种人文气息和价值观已经就不言而喻了。
当然企业也需要进行营销，抓人眼球。几千年来的遗传证明了，人的大脑对食物、性、动的东西、人脸和眼睛、危险的动物很敏感。人加色块的组合方式也具有抓人眼球营销的功能。真可谓一举两得。
这种风格更适合大公司，国内的一些手机厂商 OPPO、VIVO 等也会通过手机+背景+人物来体现科技与人文的结合，而对于中小型公司产品差异化和行业解决方案展现应该还是重中之重。
2. 毛玻璃效果
毛玻璃效果加大了模糊程度，透明效果更加扁平，很好的顺应当下 UI 扁平化的设计趋势。苹果 Mac OS Big Sur 系统的图标、界面中运用了大量毛玻璃和半透明元素，界面更扁平。至于 C4D 三维彩色玻璃的视频教程可以在 B 站搜索“透光艺术-C4D 创建彩色玻璃的 4 个技法”，完全能满足 UI 设计师。当然还有一个好消息就是 Mac 用户可以享有 OC 一年免费的使用权，具体安装购买方法上某宝就可以轻松搞定，真香。
3. 轻拟物
轻拟物这几年一直流行，在 UI 设计中趋于稳定的位置。从写实到扁平再到轻拟物，其实是设计师们一路不断探索的结果。本质就是光影对形体产生的视觉感受。在色彩中对高光、亮面、明暗交界线、暗面、反光（环境光）五个部分的处理。写实三维的图标等设计更适用于简洁的画面中，扁平等设计更适用于复杂一点的界面中，比如 B 端产品界面中的功能图标。轻拟物可使用的范围更广，效果更佳。Sketch、Figma 软件对于渐变、高光、投影、高斯模糊处理已经非常简单且出彩。
4. 简洁设计
简洁设计遵从了密斯·凡德罗的“少即是多”的设计原则，在 B 端产品界面中更加需要简洁设计，我们最熟悉的 Sketch 软件界面已经是相当的简洁了。回到现实当需求功能不断增加，产品界面的编排如何取舍，如何保证界面的简洁是设计师需要深度思考的问题？如何与上级沟通？该功能是否可做可不做？是否需要埋点用数据说话？如果只是一味竞品有我们就需要有，功能不断累加只会让界面越来越重。
5. 几何图形
几何图形和几何插画有异曲同工之妙，几何图形多为产品界面和宣传内容的抽象，产品界面的几何图形多为占位符形式，加上色彩和几何色块让其成为一个整体。B 端产品视觉设计 C 端化的进程中，几何图形、几何色彩不失为最好的突破口，相信今年Dribbble B 端产品的视觉设计一定会更上一个台阶。
几何图形另一个场景化的地方就是品牌，作为一名 UI 设计师一定会经历从图标到几何图形到品牌设计的过程，品牌设计的技巧基本还是以几何图形为主，至于品牌的内涵需要更深层次的解读。掌握主流品牌设计的技巧对产品定位、品牌宣传打下扎实的基础。
6. 暗黑设计
暗黑模式的设计是解决在微弱环境下内容也可以有更高的可读性。随着用户夜晚及深夜使用电子设备时长增大，如何在夜晚这个特定场景下使用更加舒适。合理使用暗黑模式可以减轻眼睛疲劳，提高在夜间使用的可读性。
在设计暗黑主题时，不能为了突显视觉上的逼格，而去使用高饱和度鲜艳的色彩来突显界面的品质感。而应该把舒适度、可读性作为设计的衡量指标。Material Design 给出了暗黑主题的设计准则，即正文和背景之间的对比度应至少为 15.8:1。按照此标准设计，可读性都还不错。这里介绍一个插件“Stark”（Figma、Sketch、XD、Chrome 插件）用来测试界面的对比度。
7. 模块化（组件化）
为什么叫模块化，而不叫组件化，组件化更多的利用原子系统从原子、分子、组织、模版、页面来快速的搭建界面，但在 B 端产品设计中基础组件和业务组件的搭建是以提高工作效率为前提，是否有从 0 到 1 搭建 B 端产品组件的经历是设计师一生中最宝贵的经验之一，它能提高设计师的系统化思维、逻辑思维和抽象思维能力。
产品模块化设计就是将产品分成几个部分，也就是几个模块，每一部分都是具有独立功能，具有一致的连接接口和一致的输入、输出接口的单元，相同种类的模块在产品族中可以重用和互换，相关模块的排列组合就可以形成最终的产品。通过模块的组合配置，就可以创建不同需求的产品，满足客户的定制需求 。
8. 插画
插画作为设计的一大品类，不同的插画师都有自己擅长的风格，本质是都有自己的个性，但是在产品设计中更多是需要共情、共性来讲故事，表达产品理念和价值观。这就需要插画师去尝试并探寻出适合互联网产品设计类的插画风格。设计的本质是旧元素的重新组合，插画不会过时，而是需要结合当下和产品找到最匹配的设计风格。
9. 几何插画
几何插画算是插画简化的一种表现形式，人和物的形态不再写实，而是抽象成几何图形拼凑的感觉，同时保留人物形态的神韵。加上几何色块与人物交互形态的表现，传达出简洁、科技的现代感。难点还是在人物形态的表现上，平时多练习练习速写还是很有必要的。
10. 线面插画
线面插画最近一两年非常流行，准确的说是非常适合。首先线面插画主要是由线条和块面组合而成，用块面表现人物形态时某些结构会表现不出来，这时候用线条简单勾勒后，结构就会清晰明了。其次当线面插画运用在界面上时，可以打破界面纯文字或组件化的机械和沉闷感。线面插画的风格提升画面热闹感的同时，还能保持界面的干净整洁。
1. 微交互
界面微交互动效会让用户的体验更加精致到位。想要打造优秀的产品设计，微交互和动效设计是绕不开的，UI 界面设计通过微交互反馈告知用户当前正在发生的事情，所处的状态。细微的动效更能调动用户情绪，取悦用户。C 端产品微交互和动效已经很成熟了，一部分功劳来自 iOS 系统原生自带的效果。B 端产品的微交互和动效更多还是在学习海外产品，还需要给前端工程师灌输微交互和动效的设计价值，共同打造产品体验细节。
2. Mg 动画
Mg 动画需要很好的节奏感、韵律，每一个场景动画都需要其中的元素进行连接变化，让转场动画更加自然，MG 人物动画通过点线面的动效变化让画面更加有趣、自然，通过粒子效果让特定场景无限循环会让人更加印象深刻。
1. 三维图标
MacOS Big Sur 系统图标的更新带动了三维图标的流行，三维图标的应该场景还是需要有较大留白空间的界面，因为三维图标太小后就看不到更多细节。三维图标感觉又回到了拟物化和扁平化哪个更好的问题上？设计师应该保持开放多元的视角。设计本身也在不断的演化融合，存在即合理。合适最重要，它们都会有适合自己的场景和设计价值。
2. 轻三维
为什么轻三维在界面设计中占有一席之位？一个是设计师不断追求差异化的产物。另一个是更好的表现内容，并与用户产生共鸣。轻三维的基础模型都是来自手机界面中的各种元素，比如组件、开关、按钮、占位符、图表、几何图形、图标、进度条等，这些都是用户日常使用系统软件常见的元素，通过简单的几何形体建模—打灯光—加材质—渲染—PS调色。难度系数不大但效果很出彩。第一个出彩点是模型带有厚度的倒角，结合灯光渲染的光泽是二维软件不能比拟的。第二个出彩点就是材质自由添加，特别是当下流行的毛玻璃效果，玻璃材质渲染效果更佳。第三个出彩点就是可以加局部灯光，局部的渐变色或环境光更加出彩。
3. P4D（PS+C4D）
P4D 是 PS 加 C4D 的设计表现技法，也是视觉设计的最后一个环节，通过 PS 对 C4D 的渲染图片进行调色，利用 PS 的调色技巧可以很好的解决 C4D 打灯光的瑕疵，还可以利用 PS 强大的合成功能，将渲染图片与图片素材进行合成，来表现画面的视觉度，当然三维软件比较难实现的水、粒子、烟花等效果，也可以通过 PS 的后期合成来实现，这也是 P4D 的强大之处。
4. 卡通 IP
卡通 IP 设计最近三四年技术的迭代已经慢慢的走上成熟，卡通 IP 也从传统的纯 PS 手绘技法，转到 C4D 建模—角色绑定—MD衣服制作—OC渲染—PS（静态）/AE（动态）调色。
卡通 IP 火的本质更适合做营销，相比于品牌或 Slogan，卡通 IP 具有亲和力和画面感。随着各种手办行业大热，受互联网大厂影响下，卡通 IP 已经是互联网 B 轮以上公司的标配了。如果团队中没有这样能力的人，也可以通过绘制好二维，一套三维可以选择外包完成。
对于 UI 设计师来说学习是有成本的，暂时并不是必备技能，如果喜欢完全可以学习，从设计差异化的角度来看三维视觉确实有一定的竞争力。
5. 三维动画
C4D 三维场景动画通过构建实物和场景模拟生活中的现实场景，会让用户体验真实感，三维软件制作动效的最大优势是通过动力学和表达式来模拟真实感，未来在 AR/VR 领域会有更好的发展。相对于界面动效学习成本难度也相对较大。在三维动画中 C4D 软件对于域、动力学还是有一定的优势。
上一次写 Dribbble 流行趋势还是两年前了，通过两年的沉淀对趋势流行有了更深的认知。十年的互联网行业风风火火，随着最近的互联网裁员潮大家也慢慢的进入到反思层，客观的看待和理解这个真实的世界，曾经的流行趋势也需要慢慢的沉淀下来。
存在即合理，趋势流行稍纵即逝，注定是不长久的，只有大浪淘沙历史遗留下来的风格才能更长久。但我们也不能不去关注，因为哪有什么所谓的创新，只不过是旧元素的重新组合，并符合当下这个时代人的审美需求。香奈儿的“时尚易逝，风格永存”大概就是这个意思吧。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
客户与公司的商务售前进行沟通，客户的痛点和建议会传达给产品经理，产品需求明确后，做出原型图给到设计师。等设计师拿到需求的时候，基本已成定局，合不合理、如何优化的空间都会比较小了。造成这个现象的根本原因是设计师能看到的视角范围有限，B端业务场景本身比较专业，难以直接带入使用者的角色，就比较难取得大的突破了。
如何打破这一僵局呢？答案只有一个，那就是设计师要主动更前置的加入到产品方案设计中，深刻理解业务，为产品升级提供助力。这就涉及到用户研究了，本文将和大家分享用研的相关理论基础和方法。
双钻设计模型由英国设计协会提出，该设计模型的核心是：发现正确的问题和发现正确的解决方案。
双钻模型是一个结构化的设计方法，被很多设计师喜爱和使用。
探索/调研——透析问题（发散）
定义/合成——聚焦领域（集中）
发展/构思——潜在问题（发散）
传达/实现——实施方案（集中）
实际工作中用到双钻模型会有一些变体，举个例子：
下图是对阿里内部款移动运维产品的分析，分析其从0-1的方向探索和从1-1.5的发展历程：
下图是曾经在一个设计讲座中，滴滴CDX 一位设计师的分享，她把双钻模型利用到设计的研究和输出阶段，个人感觉此模型的使用场景也很贴切。
不仅仅是在完整的一个项目中，在单一的某个阶段双钻模型也是理念很好的承载容器。在每一个“确定”前后，都有用研的身影。
用研旨在通过实验和观察结合的研究方法来提高产品的可用性，指导产品的设计、开发和改进。重点是通过观察技术、任务分析和其他反馈方法来了解用户的行为、需求和动机。
在获取后台数据之后，我们会分析为什么留存、为什么流失、为什么买这个不买那个，
设计师认为很棒的新功能，真的是用户想要的吗？用户真的会用吗？
观察数据只是一种手段，而非结果。当一个页面中出现值很低的功能时，我们不能直接判断他就是不重要的，也可能是因为视觉上太弱或者交互操作不方便引起的。只有做用户研究才可以真正了解用户的行为背后的原因，真正的动机。
如上图，是一个红包发放页面的设计前后对比，从数据中了解到使用优惠券的用户不到30%，埋点发现大多都点击了返回，用户没有按照期望的路径走，调研发现操作路径不清晰，没有形成闭环。由此可见，发现问题时，先埋点细化问题——再分析问题——结合用户研究，提出优化方案，才能真正发现问题解决问题。
产品的发展周期分为产品概念期、设计开发期、宣传推广期、平稳发展期和产品衰退期五个阶段，在每个阶段都有相对应的用户研究测试可以做。
对应上文的产品发展周期可以做的用户测试，我们要找到相对应的人群：
最后就是将用户研究进行落地了，如何让用户研究达到预期的目的和效果呢？可以在开始前的准备阶段问问自己如下的问题：
接下来我们看看到实际落地环节，有哪些用户研究的类型可以做以及怎么去做。
桌面研究又叫“文案研究”，指不进行一手资料的实地研究和收集，而是通过电脑，杂志，书籍，文档，互联网搜索等现有二手资料进行分析和研究的方法。
完整的桌面研究分为以下五个步骤：
在需求细分阶段，可以用到SWOT 分析、波特五力模型、PEST分析、波士顿矩阵等模型
收集数据通常可以从内部数据和外部数据来源广泛获取然后结合分析。
内部数据来源：市场营销数据、产品后台数据、其他相关报告等。
外部数据来源：政府部门、国际组织、行业协会、专门调研机构、联合服务公司、其他大众传播媒介、商会、银行等金融机构、官方和民间信息机构等。
定性研究是指通过收集、分析和解释那些不能被数量化的信息，来挖掘问题、理解事件现象、分析人类行为与观点的方法，主要作用是探索“可能性”。
定性研究专注于更小但更集中的样本，通过非结构询问和观察来获得不能量化的信息。
流程如下：
常用的定性研究方法：
我们需要明白访谈适合哪一种项目研究，比如要针对新功能进行一次面访。
接下来我们需要进行用户的招募，因为面访比较耗费时间和精力，所以最好准备一些礼品，否则很难招募到用户。招募用户的渠道可以是产品中投放问卷、社群招募等方式来邀约难度用户。
用户访谈环境，准备一个安静的房间，准备好水、纸、笔、录像、录音笔等工具。
整理访谈内容，每访谈完一位用户进行一次小结。
接下来模拟一次用户访谈的整个流程：
开场：首先介绍一下自己的情况，并且让用户了解这次访谈的目的，建立一个轻松的谈话氛围。
探索：针对研究目的进行探索，比如目的是做用户体验地图，了解用户在使用过程中遇到的问题。
注意：如果直接问平时怎么使用我们的产品，用户会比较懵。这个时候最好给他一个确定的环境，比如你能不能演示一下你平时是怎么管理货源的，这个时候他就明白原来需要我进行这样一个任务。
观察：在用户回答提问和操作演示中，查看用户碰到了什么难题。比如有超过一半的用户多次点击一个按钮，说明这个按钮设计的大小不太合理。
思考：深层次挖掘。比如用户反馈字太小，但实际操作中并没有眯着眼或更靠近屏幕，可能原因一是他们本身就把手机屏幕文字调为最大，二是信息排布过于密集，效率低，并非因为字小。
定量研究是指确定事物某方面量的科学研究，将问题与现象用数量来表示，进而分析和解释，从而获得意义的研究方法。定量研究的数据分析，主要作用是回答“多少”的问题。
定量研究的意义：
用一个数值来表示你产品的可用性。数值有时比质量检测的结果和视频更有说服力（特别是当你试图说服像高管或客户这样的人）时。
比较不同的设计（比如，你的产品的新旧版本，或者是你的产品与竞争对手的产品相比），并且确定你观察到的差异是否具有统计学意义，而不是随机的。
改进用户体验权衡决策。比如，如果预期的设计改进成本很高，那么它值得做吗？定量研究方法可以帮助你验证重新设计是否值得。
常用的定量研究方法包括：可用性研究、A/B Test、问卷调查和满意度调查。
测试的重点是收集数据指标，比如任务时间或者成功率，一旦你收集了相对较大的样本量（大约35个或者更多），你就可以使用它们来跟踪产品的可用性，或者将其与竞争对手产品的可用性进行比较。
在A/B测试中，团队需要创建同一界面的两个不同的最新版本，然后将每个版本展示给不同的用户，用来确定哪个版本的性能更好。基于分析的实验，对于决定同一个设计的不同变体非常有用，并且可以结束团队关于哪个版本最好的争论。
问卷调查是一种灵活的用户研究工具，调研时可以同时获得定量和定性的数据，比如评分、多项选择题中的答案的比例，再加上开放式问题的答案。你甚至可以把对调查的定性回答转化为数字数据。
问卷的一个优点是：可以经常将你的调研结果与行业或竞争者的分数进行比较，看看你做得怎么样。即使你创建了自己的自定义问卷，也可以随时间的推移对自己产品平均分数进行追踪，来监控产品的改进情况。
可以根据你的研究问题进行定制，这些方法通常会首先让参与者接触到产品（通过向他们展示静态图片或者要求他们使用现场产品或原型）。然后，要求用户通过从描述性的词语列表中选择一个来描述当前设计。
如果你获取自身目标用户的样本量足够大，那么整体趋势就会显示出来。例如，你可能会有84%的受访者将此设计描述为"最新"。
比如这次改版用户对新版本的满意度怎么样。只有确定了目标，你的问卷才是有价值的。
因子分析法要求调查数量是调查问卷问题数量的5-10倍，因此，如果调查问卷中共有20个问题，那么调查样本数量可以大概确定为100～200个，有效回收样本30份即可。
问题顺序的基本原则
往前放：
熟悉的问题
简单的问题
引起兴趣的问题
往后放：
开放式的问题
个人背景资料
简洁明确：
•你用了多久的Google map？（❌）
•你第一次使用Google map是什么时候？（✅）
这两个问题看似类似，但是当用户在思考的时候，第一个问题显然会思考更多的时间，用户很可能在想，是想知道我第一次用的时间，还是我用了多久的时间。
中立、无诱导性：
•你喜欢这个功能的设计吗？（❌）
•请您对这个功能的满意程度进行一个打分，最低1分最高5分？（✅）
避免使用带有引导性的问题，问用户是否喜欢、是否满意，这样通常用户都会偏向于回答喜欢。
设置选项时，要做到：
定量分析的结果多以数据、模式、图形等来表达。
•眼动追踪，英文Eye Tracking，是指通过测量眼睛的注视点的位置或者眼球相对头部的运动而实现对眼球运动的追踪。
眼动仪是一种能够跟踪测量眼球位置及眼球运动信息的一种设备，在视觉系统、心理学、认知语言学的研究中有广泛的应用。
注视分析——分析注视轨迹、先后顺序与流畅度
注视热点图——分析最关注区域和忽视区域
兴趣区分析——分析平均注视时间与各兴趣区注视顺序
通常需要辅助测试（如定性访谈）来收集更多实验数据
•脑电研究，大脑活动时，脑内亿万神经元活动引起头皮表面的电位变化，含有大量心里信息，测量脑电信号可绘制脑电图，以不同波形反映出来。
利用生理探测技术，研究用户对产品的情绪反应
相比传统调研，更加能够排除从众行为、事后回忆偏差、社会赞许效应等的干扰
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
很多网站在短时间内就取得了巨大的进步 —— 那些过去十年里最知名的品牌网站，与第一次迭代相比发生了很大的变化，这令人感到无比惊讶。
网站最初用于商业目的时，人们并没有过多地关注用户体验。过去的目的是将尽可能多的内容塞进一页里。现在，设计师们通过大量研究、数据挖掘和优化等方式来吸引用户的注意力，同时在正确的时间提供合适的内容、功能和选项。
越来越多的公司正在采用先进的心理学研究，以推动用户参与更多的互动和付费项目，这一现象使得曾经被认为是一门艺术的东西转变成了一门科学。
1997 年的 Apple 网站
除了许多必要的元素之外，好的设计总是会考虑到用户的情感和心理需求。让我们来看看什么是「说服式设计」，并探索如何将影响人类行为的心理过程应用到设计中。
“说服” 这个词往往与操纵、欺骗相关联，尤其是对一个善于使用「互联网陷阱」的设计师来说。但是，我们要明确一点，说服式设计中的 “说服” 并不是这个意思。说服式设计可以使网站易于使用，从而改善用户体验。因为，说服式设计是源于对心理诱因、用户行为的理解和运用。
（互联网陷阱：兴于 2010 年，由当时英国用户体验咨询师 Harry·Brignull 首次提出，指的是网站或应用程序采用诱导性或胁迫性设计，迫使用户采取或不采取某种行动）
例如，亚马逊就很好的运用了说服式设计，它通过推荐其他产品和配件，以及展示 “查看过此商品的顾客也购买了某物品” 的选项，引导用户继续购买更多商品。为了快速完成销售，他们还为购物者提供了一键购买商品的功能。
亚马逊运用说服式设计的案例
我们都一直在花费大量时间上网，设计师可以利用从线下行为中学到的知识来创造更好的用户体验。无论你是想优化现有网站还是构建应用程序，说服式设计都将引导和支持用户的在线体验。
设计师要如何利用心理学的研究成果来增强其设计的影响力呢？
理解心理学原理可以让你对工作的基本原理有更透彻的理解。它可以：
让我们来讨论一些心理学理论。
作为人类，我们天生就需要控制。这可以追溯到我们最本源的需求。在划分需求层次时，心理学家亚伯拉罕·马斯洛（Abraham Maslow）在提出需求层次时，将我们最基本的需求命名为：健康、食物和睡眠。所有这些都需要我们对环境进行一定程度的控制。
马斯洛需求层次
作为 UI 设计师，我们需要确保用户在我们为他们创建的环境中拥有积极的体验。这就意味着需要通过提供合适的工具来增强用户的能力，以帮助用户在产品的使用过程中获得控制感。
“今天，你可以调整屏幕的亮度，禁用通知，并可以决定手机是否应该同时连接蜂窝数据和 Wi-Fi …… 即使这些调整只会将手机的电池寿命延长几分钟，但这种可以掌控一切的成就感也会使用户感到温暖。” -- 用户体验顾问 Nadine Kintscher
我们需要创建能够平衡功能和视觉吸引力的界面，并将掌控权提交给用户，以便他们有更满意的体验。
澳大利亚房地产搜索网站 Realestate 成功的做到了这一点，它让用户能够根据自己的偏好筛选所有房产，并让他们可以选择按不同的标准进行排序。
澳大利亚房地产搜索网站 https://www.realestate.com.au
我们该如何设计一种数字体验，才能使用户在适当的时候进行所需的行为？这需要了解一个简理论 -- 「福格行为模型」：一个人行为（Behavior）的发生需要满足至少三个条件，动机（Motivation）,能力（ability）和诱因（trigger），用公式表示即 B = MAT，这三者必须同时具备，缺少任一条件都不会导致行为的发生。对于任何试图实践劝导心理学的人来说都是理想的选择。理论表明，一个行为得以发生，行为者首先需要有进行此行为的动机和操作此行为的能力，接着，如果他们有充足的动机和能力来实施既定行为，他们就会在被诱导时进行此行为，预期的行为就会发生。
（福格行为模型：由斯坦福大学「说服技术研究实验室」Persuasive Technology Lab 创始人 BJ Fogg 研究而来）
动机 -- 人们做出这一行为的原因是什么，做出这一行为的原始动因是什么；
能力 -- 人们做出此行为需要满足什么能力，人们是否有条件来完成这个行动或者做这件事；
触发 -- 是什么诱发用户会做出这个行为，什么因素会导致用户会完成这个。
福格行为模型（https://behaviormodel.org/）
尼尔·埃亚尔（Nir Eyal）和瑞安·胡佛（Ryan Hoover）合著的书籍《上瘾》中曾提到过 福格行为模型，揭示了很多让用户形成习惯，甚至“上瘾”的互联网产品服务背后的基本设计原理，告诉你怎样打造一款让用户欲罢不能的产品。作者根据自己多年的研究、咨询及实际经验，提出了新颖而实用的 「上瘾模型」（Hook Model），即通过四个方面来养成用户的使用习惯。通过连续的“上瘾循环”，让用户成为“回头客”，进而实现循环消费的终极目标，而不是依赖高昂的广告投入或泛滥粗暴的信息传播。
上瘾模型
一个很好的例子是 TurboTax，在《为心灵设计：劝导式设计的七个心理学原则》一书中讨论过。
即使交税不会使我们感到开心，我们仍有很强的动力来报税。然而，与其他所有国家一样，美国的税收制度过于复杂，难以理解。TurboTax 在书中提到，使用户能够通过询问基本问题更轻松地完成纳税，可以有效的提高用户的纳税能力。在 TurboTax 的设计中，他舍弃了冗长的文档，相反，创建了一个工作流，使用户可以进行简单的逐步操作。最终便捷的操作方式会成为诱因，使用户愿意尝试在线提交税款。
TurboTax 设计的报税系统
用户有充足的动机和能力，同时又具备诱因，三个要素完美结合的情况可能会让人感到过于理想或不自然。事实上，其中某一因素占比多也没关系。发微博就是一个很好的例子，没有什么重要事情的话，发微博的动机可能很低，大多都是浏览；但触发因素随时都可能出现，提醒你可以开始行动了，可能是一个转发抽奖的活动、可能是朋友正好生日；同时，发微博的操作非常便捷，用户具备能力随时都可以发布。
作为设计师，我们可以使用该理论来检查是否为用户建立了足够的动机和能力，并提供诱因来引发他们的行为。
以上两种理论（控制感，以及 动机、能力和诱因）都需要进一步的研究，它们在设计界面时非常有用。
或者，有一些更简单的心理学理论，不需要较复杂的研究，即可用到你的设计中，比如 稀缺 和 害怕错过（FOMO -- Fear of Missing Out）的概念。
亚马逊在商品上增加 “只剩下 1 件存货” 强调库存不足，使用 FOMO 加强紧迫感
几十年来，心理学家一直对人们保持注意力的能力不断下降而感到困扰。
眼动追踪已经存在一段时间了，它主要用于测量用户注视某一点的位置和持续时间。研究表明，互联网的平均注意力持续时间不到几秒钟，用户会立即做出有关网站的决定，如果不适合，就会离开。
数据驱动的设计（https://www.eyequant.com）
EyeQuant 将这一想法向前推进了一步，利用眼球追踪数据构建了一种预测算法。你无需自己进行眼动测试，而是将设计上传到他们的网站，他们会告诉你用户在使用你的网站时关注点在哪些地方。
他们找了德国的参与者，并利用这些参与者建立了一个庞大的数据库，该数据库包含了大量吸引用户注意力的内容和不吸引用户注意的内容。研究发现，高对比度色彩比较容易吸引用户，表情和粗体的文字也是如此。
眼动追踪软件可能很昂贵。取而代之的是，诸如 Sumo Heat Maps 的在线分析软件，可用于显示访问者单击的内容和位置，以及吸引最多注意力的内容。然而，请记住，虽然我们可能会抓住大脑的注意力，但我们也有可能会把用户从更重要的事情上拉走。
使用眼动追踪或热力图可以使设计人员立即获得有关其设计的客观反馈。作为设计师，它可以用作用户体验想法的验证，并为你的设计决策提供数据，允许你通过 A / B 测试来优化设计。
眼动追踪可获得用户行为的客观反馈
你是否曾经注意到人类天生会有模仿他人的欲望？一个人的欲望也会促成他人的欲望。这种理论是由勒内·吉拉德（Rene Girard）提出的，理论认为，如果某人表现出对某件物品的渴望，你也会渴望得到这件物品。广告商就是利用这一方式促成人们对某物的渴望，显然，广告成功的激发了人们更多的欲望。
你我都是模仿生物。Darren Bridger 的《神经设计》一书就探索了这一理论，研究发现我们有一个镜像神经元系统。换句话说，仅看到某人执行某项操作（例如捡起一件物品）就会使你的大脑反映出该活动。
模仿一词的英文解释
模仿欲理论意味着如果我们看到别人拥有某样东西，我们便也想拥有 —— 这一点可以用 「社会认同」（或从众心理）来解释。
一种社会认同是来自 “用户的认同”，就像是推荐。推荐之所以有效，是因为它们来自拥有共同愿望和价值观的人。例如，专门为企业家服务的媒体 Foundr 不仅使用用户的声音，而且还显示人脸，从而触发了镜像神经元系统。
Foundr 专门为企业家提供媒体服务
另一种社会认同是来自 “专家的认同”，即你的产品获得了专家的认可，例如你的产品被 Twitter 提及、新闻引用、甚至有大 V 专门为你的产品撰文。Google 在其最新的 Pixel 手机广告系列中使用了这种技巧，用 Google 自身的品牌影响力作为最强力的背书推荐这款手机。
仅仅强调这款手机是 Google 出品，无须多言
对于设计师来说，现在是一个令人激动的好时代 -- 有丰富的资源和研究可以支撑我们的工作。
设计趋势正在向体感，语音、虚拟现实（VR）、增强现实（AR）、混合现实（MR）和物联网（IoT）转变；随着这些交互技术的不断发展，人们需要以更直观的方式来使用界面。
我们将迎来许多新的设计机会，而心理学将在其中发挥着重要的作用。
下一个我们日常生活中与设备交互方式的重大转变，将从触屏变为使用脑电波交互。该技术已经可用，使人们能够通过思想直接控制其设备。
随着我们逐渐接近人们的真实想法，心理学在设计中的应用以及设计师的道德责任将发挥越来越重要的作用。
除了使用分析法、用户研究、用户体验地图和其他方法来帮助做出设计决策并迭代产品外，设计师还应考虑使用上述四种有说服力的设计方法来完善其 “技巧工具包”。
有说服力的设计并不邪恶。它是一种工具，并且像任何工具一样，它可能被滥用。然而，通过正确的研究和深思熟虑的应用，它可以成为任何设计师工具箱中的宝贵补充。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
简介： 按钮组是把相关的动作组织成一组按钮的设计模式。按钮组的内部内容彼此水平或垂直对齐，并采用相似的视觉设计。如果超过三个或四个动作，往往会采取多个分组。
例子： 语雀编辑器的顶部工具栏
按钮组可以让界面不言自明。在复杂的布局中，被精心安排过的按钮组会很容易被用户感知和使用。一方面，它们在界面上往往非常明显，用户能够一眼看到有这些功能可以进行相关操作。
大家所熟知的格式塔原则（Gestalt principles）也在这里起作用。彼此相邻的按钮往往暗示着这些按钮的功能相近，因此会让用户感觉到这一组按钮可以完成类似的功能。相对的，不同的按钮分组往往暗示着不同的功能类型，因此彼此间应该保持间距，或用不同的形状，或用分割线进行区分。
如果你需要在界面上展示许多操作按钮，且需要确保它们随时在界面上可见。但同时，你又需要用图形化的方式组织它们，以使它们看起来不会特别散乱。
这些动作中有许多是彼此相似的 —— 它们有相似或互补的效果，比如，它们的功能语义相类似 —— 由此它们可以三五成组地放在一起。
按钮组可以用在对产品全局有效的操作上（例如「打开」和「选项」操作），或特定的一些通用操作（「保存」、「编辑」和「删除」），或特定的某些操作（例如布局的「对齐」、「分布」）。不同范围的操作不应当被到一个组中。
使用条件：
· 存在大量操作按钮；
· 希望用图形化的方式组织这些按钮；
· 操作按钮间存在功能相关性和差异性；
这个模式的总结简单到像是一句废话：把相关的操作按钮分成一组。
但如果详细展开就会有更多的介绍。比如：
· 如果需要包含文本说明，尽量使用两个字或三个字的动词短语，不要使用专业术语。
· 不要把不同功能范围的按钮放在一个组，应当将它们分成不同的分组。
· 同一组的按钮应该有同样的视觉设计：边框、颜色、高度或宽度、图标风格、动态效果等。
· 在空间排布上，可以将它们并排起来作为横排放置，如果空间不太适用的话，也可以考虑一列纵列放置（例如Photoshop的左侧工具栏）。
· 如果某一个动作是核心动作，可以将其区别对待。例如网页表单中的“提交”按钮。核心动作是希望大部分用户都需要（或期待）执行的动作。让这个按钮拥有更加强烈的图形或视觉风格来让它在显得更为突出。
· 如果按钮足够多，而且它们都有小图标，你也可以把它们放在工具条或者像工具条那样的狭长条上，放置在页面的顶部。
通过使用按钮组可以避免界面上按钮或链接过于拥挤混乱，也可以避免一长串冗长的动作列表看起来毫无关联或区别。
通过这一模式，你可以创建一个较为清晰的元素层级结构：用户可以一眼看出哪些动作是彼此相关的，哪些是重要的。
用户需求：编辑设计文件中的对象
Sketch 也是个很典型的应用了按钮组的设计工具。Sketch顶部的按钮不少于15个， 有很多要理解和追查。 但是得益于精心的视觉和语义组织，界面按钮始终保持一定的可理解性。
用户需求：按自己需求对文件进行显示修改和操作
这个案例显示了来自 macOS 的 Finder 窗口的顶部按钮组。 秉承其设计传统，按钮风格明显。 导航组是放置在左侧中的按钮组。 布局相关的按钮组放在了中间，文件操作相关的按钮组放在了右侧。这样的设计使得界面变得易于理解和使用。
用户需求：项目执行相关操作
这个案例显示了 Webstorm 的顶部功能操作区。WebStorm 采用了按钮组的模式，将项目执行的相关操作和Git相关的操作聚合在一起，中间使用了分割线进行了区分。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
在日常工作中，身为设计师的我们时常有这样的情形：身兼多个业务，但大部分的业务都是小业务，业务方给的需求也是七零八碎的小需求居多。面对该情况设计师有时会觉得没有一点挑战，限制自己对美好设计，给用户创造美好生活的想法，总想要去搞个大新闻。
不妨回头看看小业务，自己真的对它了解了么？这里提供一种视角，小业务也可以做大视野的事。通过一个小业务的案例改版，讲述如何从小项目中出发。
曾经负责过一个基础模块支持：设计详情。它是设计师用酷家乐设计工具设计方案产出的载体。该模块在之前有过改版迭代，迭代对业务目标（留存活跃）的提升并不理想。那从哪里入手呢？
理清业务目标
挖掘用户需求场景
梳理产品功能
拆解设计目标
设计策略实施
验证迭代
相对于大业务（例如网站改版），小业务因为简单，其业务目标界定常容易被忽略。在日常设计中常会遇见设计师在不知道业务目标是什么、目标模糊、目标不正确的情况，直接从梳理小业务具备哪些功能直接入手，分析下现状问题后开始制定设计策略，这往往会导致设计出现解决不了关键问题、出现偏差情况。产品功能本身只是满足用户需求和实现业务目标的服务载体，只是策略的表象。理清小业务所承担的业务目标是前提，那么如何理清呢？
理清业务目标
小业务目标来自大业务目标，对大业务的业务目标进行一级级向下拆解后，即可获得小业务对应的目标。目标拆解需要遵循MECE原则，拆解方法包含：二分法、过程法、要素法、公式法、矩阵法。（tips：目标的拆解有一定难度，）
Dapp设计详情为例，在酷家乐大增长业务背景下，用户活跃和用户留存为核心的目标，设计详情处于设计路径的一个节点，拆解得到设计详情的5个主要业务目标：
设计详情-用户周活跃
设计详情-新用户留存
设计详情-老用户留存
设计详情-内容投稿数
设计详情-内容分享数
业务目标可分为2个类别：
第一类别：符合用户意愿，如活跃、留存，在满足用户需求的情况下可以自然达成；
第二类别：不符合用户意愿，如内容投稿、内容分享，用户不太会主动去完成，需要去创造动机，激励用户进行。
有小业务的业务目标后，第二步就需要给用户提供价值满足用户需求，以此来实现业务目标的达成。梳理清楚小业务服务了哪些用户需求是提供价值的前提，那如何获取用户需求场景呢？
1. 用户访谈——获取相关用户需求场景
用户需求场景可以帮我们清晰了解到用户使用产品的原因。用户需求场景可以一句话进行界定，包含四个关键要素，其中需求本身最为核心，需要挖掘出当前诉求和其背后的潜在需求。
“在【某环境下】，【某用户】做了【某事】来满足【某需求】”
用户访谈为了挖掘到更为深入用户需求场景的要素信息。以设计师入行年限分组（1-3年、3-5年、5年以上），每次分组访谈2-3个设计师。梳理出设计详情相关的8个需求场景
访谈信息整合如下
2. 规整用户需求场景
在业务访谈中获取的场景往往都是碎片化的，碎片化场景对设计指导容易出现偏差，需要把场景结构化，为后续的方案设计提供依据。我把获得的场景按照设计师设计流程进行规整，按设计前、设计中、设计后三个阶段进行划分。
以上梳理了设计详情相关的用户需求场景，再来看原设计详情只基础满足了资料管理和方案展示的2个单一场景，在设计师的整个设计流程中只占了一部分。从设计层面来看，该2个场景局限在方案设计大场景中，设计更多做的是对其方案设计操作的体验优化，在原有较好操作体验的现状下，其对给用户创造价值上没有很大增量。再从以上业务目标来看，2个单一场景很难去促使用户对内容进行分享和投稿。
在理清小业务的业务目标和需求场景后，下一步就是按照场景去梳理产品能力。
1. 小业务功能现状分析
老版app设计详情的功能进行初步的现状分析，设计详情包含渲染、图文编辑、图片管理、投稿、分享5个主要功能。从需求场景来看，多个场景无法实现，如营销、谈单；从业务目标来看，通过当前功能有较大的优化空间，如当前投稿很难让用户知道投稿有什么价值。
2. 产品能力梳理
分析现状发现功能不足以支撑用户需求场景，有获取功能2个方向：
挖掘现有能力：可以扩大梳理范围，从小业务所在的上一级业务到整个平台，一级级往上梳理场景对应的现有功能。
打造新能力：围绕场景，打造出新的功能
挖掘平台上现有能力，可对业务的能力价值最大化利用，与其他业务形成互通，实现1+1大于2的业务价值。亦可围绕场景打造新能力，可反推产品去发倔新功能。
以下是设计详情涉及所有场景的产品功能矩阵，从平台获取到了很多全新的能力，以及对原有的能力进行了能力拓展。
在梳理出产品能力后，需要通过设计策略把产品能力有效组织起来，让用户快速感知快速上手使用。设计策略推导自设计目标，那如何得到设计目标？
基于用户需求场景将行为事件拆分，提炼行为事件再推导出设计目标，再基于设计目标给出设计策略。
Dapp设计详情受制于移动端能力，只涉及设计详情中5个相关场景，其设计目标和设计策略的拆解结果如下
拆解出设计目标后，基于目标分析产品现状得到存在的设计问题。为什么要基于目标分析现状？首先需要明确什么是问题，问题是导致目标和现状不一致的原因。只有明确了目标才可以理性分析与现状存在多少问题。在日常中时常看到设计师会直接得到问题，很多情况是默认假设了一个预设目标，但这目标得到不严谨、不全面，容易导致得到的问题本身也出现偏差。设计策略基于设计目标或问题得出，其最终都来自设计目标。
对老版Dapp设计详情现状进行了分析，得到了问题
在上一步得到设计策略后，围绕着设计策略是设计方案。本段将不全部展开说明，只选3个关键点讲述设计方案的思考
1. 设计详情框架的设计
Dapp设计详情涉及5个场景的承载及产品功能繁多，设计三步思考：
第一步：简化功能认知，对功能结构化，以场景的维度重组织功能，并以场景打造功能集合的认知，建立场景能力区；
第二步：梳理场景共同涉及的内容，作为联系的载体承载场景的放置，设计详情中展示态的方案涉及到了5个场景中的4个场景
第三步：提取场景中即时性和高优先级功能，打造快捷功能区
框架如下
建立框架后，填充具体的能力和内容。如场景入口放置于底部，并根据场景优先级做了主次的区分。
设计详情框架建立后，打造细分场景中的设计
2. 营销获客场景设计
营销场景的设计，将营销组成拆分为可营销内容、营销的渠道、渠道内容展现三大类，就可以清晰去梳理出现有的功能，以及可从内容、渠道各自去拓展挖掘。内容和渠道清晰后，再传达各渠道提供的价值激励用户去触发行为。
3. 谈单场景设计
谈单场景关键在方案详情上，谈单面对不同情况，存在多种内容形式去展示方案。在上面内容梳理中最主要是3个内容：图文方案、全屋漫游、渲染图册。在方案详情中，头部承载了全屋漫游、图册，如图文方案过于繁琐可直接点击全屋漫游图进行讲解，亦可点击封面进入图册直接图片说明。图文详情加上了房间切换的导航，可快速切换到需要讲解的地方。
上线后数据平稳后观测，设计详情的周活提升了89%，每个场景下的功能数据都得到显著的提升（tips：有部分数据因技术原因没有采集到）。除了改版了Dapp侧的设计详情，后续对PCweb侧的设计详情进行迭代，同样起到不错的结果。数据的结果验证了方法的可行，并起到了积极的效果。
以上是我应用这套设计方法去做了块小业务优化，反向推动进入产品迭代，上线后取得了不错的成绩。在本次赋能后，对小业务中多了一些感悟
小业务是大业务的缩影，可以作为去赋能大业务前沿验证的实验田，大概率可以快速验证自己的想法，即使方向错了因为小业务改动影响面也小
因知识广度和深度的限制，不是所有设计师都可以一开始就可以把控大业务，小业务可作为打磨设计深度专业度，一些小业务的复杂度并不低于大业务
该设计方法同样适用于大业务，但方法是死的，不是所有情况都套用，得需要把握重点灵活应用
不要总想着搞个大新闻，在能力未被业务方认可时，小业务的赋能可以成为一个很好的发声口
不要轻视小业务，有可能是你根本还不了解
蓝蓝设计的小编 http://www.lanlanwork.com
