模型 用户 动机 作为交互设计师，我们要确保产品的框架，任务的链路，界面的设计符合用户的心智模型。那么如何才能够尽可能的匹配用户的心智呢？今天我们开始讲解交互设计常用模型，帮助大家建构宏观的思考框架，利用前人的智慧，相对系统的解决设计问题，大家一起来学习一下吧~交互设计常用模型 · 有什么？交互设计的核心设计工作是在结构层和框架层，但战略层和范围层会影响甚至决定交互设计，所以对交互设计师而言，结构和框架是核心，但战略和范围相关的设计模型也必须要关注。图 1 用户体验要素表现层作为延伸关注维度，日常多一些关注即可。此外，作为设计师，我们在设计完成之后，灰度期间，上线之后，还需要总结复盘我们设计方案的有效性，进行二次迭代，因此体验度量也是我们需要关注的一个维度。综合以上维度，我搜罗了全网资料，结合我个人认知和经验，整理出来如下设计模型一览表：图 2 设计常用模型一览表大家可以先简单浏览一下，检验一下自己的知识储备，查漏补缺~交互设计常用模型 · 是什么？由于本文篇幅有限，我只进行简单的介绍。1. 用户分析相关模型战略层核心须关注用户需求，那么有哪些用户需求分析的工具和方法呢？图 3 用户分析相关模型对于设计师而言，接触比较多的包括：5W1H 模型：帮助我们做用户场景分析。用上这款分析工具，你看上去就像一个高级 UI 设计师了讲完 Kano，我们再来理解下一个模型，即 5W1H，了解一下它在我们的工作中发挥什么样的作用。阅读文章 > 卡诺模型：帮助我们从用户角度进行需求分类和排序。UI 进阶必学系列：需求分析工具 KANO 模型大家知道，长期以来我们一直在坚持分享一些基础的干货内容，那些看书、看分享很难系统搞得明白的知识点，这和我个人对基本功的执念有密不可分的关系。阅读文章 > 同理心地图：让我们从用户的感知认知——看听想说出发，理解用户的痛点，归纳产品的机会点。6个步骤，从零开始教你绘制同理心地图在之前关于用户体验地图的文章中，有提到可定期引用同理心地图作为灵感来源，来完善用户体验地图。阅读文章 > 用户旅程图：帮助我们了解用户在整个产品使用旅程中的行为，感受、痛点和期待，进一步帮助我们去归纳产品机会点和设计策略。心理账户模型：帮助我们理解用户对不同事物/信息的分类，顺应或改变产品的类别与匹配用户的心理模型。没有灵感怎么做设计创新？收下这个方法！工作中我们设计师除了要完成产品经理或者业务方的需求，往往还希望在设计产出上能有更多的创新来体现自身的价值。阅读文章 > 2. 增长分析相关模型图 4 增长分析相关模型对于产品而言，增长是各个时期都绕不开的一个核心目标。日活，留存，转化，复购……不同的生命周期，有不同的增长指标。作为设计师，我们有义务尽自己之所能，去辅助业务达成目标。在增长方面最为知名的是 AARRR 海盗模型（用户获取、激活、留存、收入、传播）。在此基础之上又衍生出了 RARRA 模型，6R 模型，八卦增长模型等，还有根据福格行为模型衍生出来的上瘾模型，这些模型可以帮助大家去梳理新用户从拉新到留存的设计闭环，也可以刺激老用户提高活跃频次，从而提升整体活跃。大家可以根据产品的发展阶段和目标，选择合适的增长模型框架展开设计。用一篇文章，让你掌握能让用户快速增长的AARRR 模型AARRR模型因其掠夺式的增长方式也被称为海盗模型，是Dave McClure 2007提出的，核心就是AARRR漏斗模型，对应客户生命周期帮助大家更好地理解获客和维护客户的原理。阅读文章 > 用一篇文章，帮你快速入门「增长黑客」导语：A/B Test 或 “病毒营销” 就是增长黑客？阅读文章 > 3. 行为转化相关模型图 5 行为转化相关模型这是我们团队交互设计师用得最频繁的基础模型。AIDA 模型：最早来自营销领域，将消费者从接触外界营销信息到完成购买，划分为注意、兴趣、欲望和行动四个阶段，是广告效果测量的一个重要模型。电商类产品，运营活动类产品的链路设计和页面结构设计通常会参照这个模型。想用设计提升转化率？先学会这个超好用的漏斗模型！漏斗模型，是一种数据分析方式，是一个线性流程，更是一种普遍适用的方法论，或者说是一种思维方式。阅读文章 > LIFT 模型：也是一个促进行为转化的有效模型，它以提炼出来的价值主张（用户购买的理由）为载体，通过提升相关性，清晰度和紧迫性，减少焦虑性和注意力分散，6 个维度出发去促进用户行为的完成。我们设计师在会员购买和直播打赏中都有用过这个模型。福格行为模型：我将其称为交互设计的底层模型，在本文第三节我会稍微详细的为大家展开讲解。如何提高设计转化？先学会经典的「福格模型」日常工作中我们经常要考虑如何吸引用户转化。阅读文章 > 八角行为分析法：这个在偏游戏类、运营活动类的产品设计中用的比较多，大家在进行这类产品设计时可以参考。4. 视觉与品牌相关模型图 6 视觉与品牌相关模型视觉与品牌相关的设计模型，我们团队用得比较多的包括：形色字构质动 6 维度的视觉语言体系，以及品牌屋，品牌金字塔模型、超级符号，感兴趣的同学可以在网上查阅到更多资料。从6个方面，全面解构「百度阅读Pro」的视觉设计！前言：小编是个重度的阅读产品使用者（做编辑这行不读书怎么行），几乎用遍了网上的各种阅读产品，最近在网上发现了一款非常低调的产品上线了，一查竟然是百度出品的，因为经常接触百度系产品，这个产品的设计体验和以往的都不同，然后就在网上搜索资料，查到了一位资深设计师对这个产品的评价，写的非常诚恳（阅读文章 > 5. 体验度量相关模型图 8 体验度量相关模型体验度量相关模型包括 Google 的 Heart 模型，通常与 GSM 模型结合使用，阿里根据 HEART 模型完善出一套五度模型，在国内更受推崇，也可以与 GSM 模型结合使用，这两套模型都比较偏 C 端，偏 B 端的包括 PETCH 和 UES 模型。产品体验度量设计指南（一）：谷歌HEART模型随着互联网流量红利的消失，互联网进入了以产业互联网为代表的下半场，各大企业的关注点聚焦到了如何获取企业及行业利润上来。阅读文章 > 设计师和产品想法不一致怎么办？试试谷歌的GSM模型！我们为什么要使用 GSM 模型常规工作中，需求往往由 PM 发起，UE 团队到底如何跟 PM、FE 等团队成员协同，达成目标共识，是我们值得讨论的。阅读文章 > 阿里出品！如何量化体验设计？看这一篇就够了！（上）如何评估设计价值已经成为设计同行都在思考和研究的课题。阅读文章 > 交互设计常用模型 · 怎么用？每一个设计模型都是前人智慧的结晶，至少需要一堂课以上的时间才能讲透彻。所幸现在互联网的知识是很丰富的。本文的价值是给大家普及这些设计模型的存在，让大家能够知道并按文索骥的自主学习。我无法将所有设计模型为大家一一讲解，一方面精力有限，另一方面有很多类型的模型也并非我所擅长。这一节我将以交互设计的底层模型——福格行为模型为例，为大家讲解如何在设计中运用设计模型，其他模型需要大家根据业务所处阶段和目标灵活选择。根据福格行为模型 B=MAP，影响行为的要素，有且只有 3 个：动机、能力和提示。图 9 福格行为模型作为交互设计师，我们需要清楚的了解这三个要素是什么，以及它们之间的关系，才能在设计中正确的运用它们，所以我们逐一来看。1. 提示根据福格教授的建议，在运用福格行为模型时，第一个步骤是检查有没有(合理的)行为提示，我把它翻译成能否吸引用户注意。能够引起我们注意的东西，才可以成为提示。没有提示，就没有注意，也就不会有任何行为发生。无论你的动机和能力有多么强烈都没用。那么，作为交互设计师，我们有哪些吸引用户注意的秘笈，我将其归纳为：图 10 吸引用户的四大秘籍① 运动（包括自身运动+附加运动元素）② 人脸（尤其是带有和用户互动眼睛的人脸）③ 对比（包括色彩、形状、大小、虚实、投影、情绪等）④ 本能（包括危险、食物、性）图 11 吸引用户注意的案例示意日常设计中我们可以先从这四个大的维度考虑可行性，然后再考虑单独维度下的具体策略。这四个维度是可以组合运用的，这样能够将视觉注意力效果发挥到极致。2. 能力能力，是人们对探索、认知、改造事物的水平的度量。图 12 行为与动机能力之间的关系从福格行为模型可以看出，行为位于行动线上方还是下方，同时取决于推动行为的动机和让行为容易做到的能力。这里有一个关键点：能成为习惯的行为一定会落在行动线上方。作为设计师，当我们不确认用户动机强弱时，最可靠的方式就是提升用户的能力（或者说降低行动门槛，让用户更容易做到）。图 13 降低用户负荷的方法-重复行为越容易做到，就越容易发生，发生越多次，就越容易做到，从而形成一个正向回路，进而形成用户习惯。提升用户能力，设计师常用的策略有三种：降低视觉负荷、认知负荷和操作负荷，让用户行为能够更容易完成。图 14 降低用户负荷的三种类型图 15 降低用户负荷的案例示意3. 动机动机是人们完成某个特定行为（如晚上看书 30min）或某类行为（如每晚看书 30min）的欲望。福格教授把动机来源分为 3 种：图 16 影响动机的 3 要素① 你自己想要的（其实我理解这就对应心理学家说的内在动机）；② 你希望通过采取行动可以得到的利益或避免的惩罚（对应外在动机）③ 以及你的周遭环境（例如，所有朋友都在做这件事，也对应外在动机）动机可以来源于这三个因素中的任何一个或多个，而且多个动机往往还相互冲突，互相较量，导致我们精神的痛苦（比如又想减肥，又想吃甜食）。所以动机是时刻变化非常不稳定的。结合个人经验，我将提升用户动机的因素分成了以下 3 大类：图 17 影响动机的 3 要素① 本能喜好：符合人类本性的，或者跟用户兴趣爱好匹配的，这个行动本身就可以给用户带来愉悦感，比如吃东西、看美女、狂淘宝。这也对应很多心理学家所说的内在动机，内在动机驱动的行为能为用户带来快乐、成就、意义，会更容易让用户产生心流状态，所以想让用户完成某个行为，最理想的情况就是这个行为和行为结果符合用户的本能喜好，给用户带来满足感和幸福感。② 奖惩刺激：属于典型的外在动机，用户不一定享受行动本身，但是希望通过采取行动获得奖赏或避免惩罚，比如做任务抽奖，刷题备考、锻炼减肥等。奖赏可以是有形的（金钱、奖品、证书等），也可以是无形的（表扬、支持、认可等）。③ 情境影响：用户本来没有动机或动机很弱，但是受到周围环境的刺激后，会触发服从跟随效应，比如排队、刷热点、追剧等。（某种程度上，情境影响也是一种外在动机，它受人的社交尊重需求的驱使和牵引）图 18 提升动机的案例腾讯出品！7 种人机交互设计模型科普众所周知，人机交互是一门集调研，构思，设计和测试为一体的学科。阅读文章 > 欢迎关注作者微信公众号：「悦姐聊设计」本篇来源：优设网原文地址：https://www.uisdc.com/common-design-model
用户 产品 操作 作为 UX 设计师来说，通过设计提高用户的操作体验是我们的工作重心。以最短的路径实现用户访问需求，同时保障产品需求和用户体验的双重达标，对于 UX 设计师而言至关重要。最近在体验产品的过程中，发现了很多设计不错的解决方案，总结了一些在提高用户体验层面的优秀案例。涵盖功能使用、业务流程、用户群体、个性化设计、手势设计等方面，希望可以带给大家更多启发。往期回顾：10个产品细节剖析，让你看看大厂是如何做设计的！作为 UI 设计师来说，都是一群细节猎人，以像素级的细节刻画着每一个需求。阅读文章 > 10个产品细节剖析，让你看看大厂是如何做设计的！感谢大家对黑马家族感官体验日记栏目的关注和支持，本栏目皆在为大家带来优秀的设计解决方案和不一样的设计思维。阅读文章 > 大厂出品！14个贴心的手势交互设计细节随着触屏时代的普及，借助手势交互可以提高用户的操作便捷度和效率。阅读文章 > 特殊场景下的差异化设计根据用户使用场景和特殊情况出现时，产品会结合变化呈现不同的功能或者服务，这种差异化的设计更能体现情感化设计的一面，提高用户对于产品的认可度。腾讯新闻 APP 在东航事故出现时，在底部操作栏新增了祈祷的图标，方便用户表达祈祷的心情。特殊情况下的差异化设计满足了用户的情感需求，也体现出了产品的温度，带给用户更强的粘性。优化指引路径提高操作效率通过提取本机号码一键登录减少了繁琐的注册流程，提高了登录的效率，减少用户的操作路径。在登录时都需要用户同意一些条款协议等内容，当用户未勾选时通常都是提示用户，指引用户选择后操作。这样的设计增加了用户的操作路径，使用体验不是很好。网易云音乐 APP 在同样问题出现时，提供了一个弹窗进行指引，用户无需重复操作，直接点击“同意并继续”即可完成登录。在用户误操作出现时，无需用户过多的操作路径，给出了更高效的操作解决方案，提高了用户使用体验。温馨提示降低用户的过度依赖随着互联网时代的到来，太多的娱乐产品占据了我们的时间，过度依赖和使用耗费了大量时间。特别是短视频的走热，刷视频容易带来过度依赖，影响用户的视力等健康问题。抖音 APP 作为用户量庞大的短视频产品，提高用户体验至关重要。为了降低用户的过度依赖，提示用户注意休息，特意设计了温馨提示。用户可以设置提示时间和进行管理，APP 也会定期提示用户。温馨的设计提高了用户对产品的好感度，也能辅助用户做好时间管理，以免过度依赖而影响休息时间。隐藏式设计提高版面利用率对于用户来说希望内容具有较高的可见性，提高内容的曝光度才能被关注。在控制内容的优先级时，通过隐藏式设计可以满足更多内容的呈现，不过需要做好隐藏内容的引导，提高隐藏内容被发现的概率。网易云音乐 APP 在云贝中心签到设计中使用了隐藏式设计，将签到相关的附属内容隐藏在展开卡片中，为更多主要内容提供了展示空间。为了提高展开的交互设计，在每天初次访问时会默认展开，然后再收起隐藏，这个动态的指引提高了这个交互动作的曝光度。利用隐藏式设计满足了产品需求，通过动作引导提高了用户知晓度，是一个具备较好体验的设计解决方案。更人性化的模式设计随着用户群体的跨度增加，为了带给不同年龄段用户更好的体验，众多产品都针对不同用户提供了定制化模式。特别是针对老年用户而进行适老化设计，还有针对青少年儿童设计的时间管理等，不同模式满足了更多不同年龄段的用户需求。比如优酷 APP 在个人中心设计了“模式切换”，点击可以设置长辈模式、青少年守护、儿童守护。针对不同年龄段对于产品的使用需求进行定制化，带给用户更加人性化的使用体验。定制化的播放页模式设计不同用户对于产品的使用需求有所差异，固定的模式虽然可以减少产品的开发成本，但是单一的体验不够人性化。针对不同用户提供更多选择，可以带给用户更加人性化的体验。MOO 音乐 APP 为了满足不同用户对于播放页的体验差异，设计了播放页模式定制化切换，用户可以选择以专辑封面或者背景大图进行展示。为了直观的方便用户做出选择，模式设计以可视化的图形展示，便于用户更快的做出选择。定制化的模式虽然把繁琐的事情留给了产品开发者，却把更好的体验带给了用户。缩放预览满足对细节的体验随着短视频走进更多用户的视野中，短视频的形式也是越来越丰富，满足不同用户的使用体验至关重要。特别是图片形式引入短视频平台，对于细节的体验因人而异，缩放画面满足对于细节的体验才能更加人性化。抖音 APP 无论是针对视频还是图片形式作品都可以缩放预览，配合缩放的手势交互带给用户放大细节查看的体验，满足了不同用户对于细节的需求。手势交互也是产品设计师需要多多探索的方向，更加便捷的操作有助于提升用户对于产品的使用体验。满足用户好奇心的设计用户从小白到依赖是一个逐步探索的过程，好奇心的用户会点击尝试任何的功能，甚至连一个图标或者 LOGO 都希望获得彩蛋。作为设计师来说设计出来的每一个元素都需要考虑用户体验，给予反馈式的设计才能满足好奇心的驱使。爱奇艺 APP 首页左上角的 LOGO 展示你有注意到吗？有没有尝试去点击体验，作为好奇心驱使特意尝试了一下。点击之后会跳转到皮肤等设置的页面，为该功能的曝光新增了首页入口，用户也可以通过个人中心“装扮”进行设置。该设计解决方案不仅满足了用户点击的好奇心，也赋予了 LOGO 展示功能化的作用。可以标记和叠加的点赞设计点赞设计在众多产品中均有体现，这是用户表达对于内容的喜欢，以此来增加作者和用户之间的互动性。为了吸引用户点击和带来差异化的体验，点赞设计也被脑洞大开，在表情化、叠加点赞、点赞标记、微动效等方向不断探索。小宇宙 APP 在播放页中对音频进行点赞时，可以多次叠加点赞，点击之后会针对音频播放进度条进行点赞标记，反复点击也会使得进度条纹增高，以此来强化点赞的程度。该设计解决方案不仅丰富了点赞的设计，也能通过标记和进度条纹的高度让用户记住关键的部分，方便后续回顾的时候知道哪些时间段是重要内容，提高用户对于产品的使用体验。差异化的短视频推荐设计作为新闻资讯类产品来说，大部分用户的习惯还是图文结合的阅读形式，不过随着短视频的出现，改变了一部分用户的阅读习惯。通过短视频获取新闻资讯、搜索指定内容、学习生活技巧或者专业技巧等均可实现，改变了用户的阅读习惯和获取内容的形式。央视新闻 APP 作为新闻资讯类的专业平台，在满足用户阅读新闻的同时，也跟进了短视频观看新闻的体验。在底部标签栏以舵式导航的形式作为短视频新闻入口，点击之后会有推荐视频展示，差异化的推荐设计不仅提高了内容的曝光度，也吸引了用户的关注度。小结本期为大家总结了提高用户体验的十个优秀设计解决方案，体验、分析、总结是为了掌握别人的设计经验，积累设计灵感并运用到项目设计中。灵感的积累离不开总结，探索细微之处的差异化对于 UX 设计师而言至关重要。本期分享到此结束，仅为个人角度的体验总结，希望可以带给大家更多灵感启发。欢迎关注作者的微信公众号：「黑马家族」本篇来源：优设网原文地址：https://www.uisdc.com/ui-design-skills-3
用户 医生 丁香 一个优秀的产品如何设计，遵循什么原则，有什么策略，是否可以用一个设计公式来描述它，从而让我们全面、结构化的方式去研究学习。我是一个喜欢对产品临摹拆解，诊断分析的交互设计师。2022年，我决定按行业甄选优秀产品调研分析，定期输出产品分析报告，本次「丁香医生APP产品设计分析报告」作为今年的第一份，旨在抛砖引玉，借此机会望结实更多业内朋友，与大家多交流共探讨！分析原则1. 适合人群UI/交互设计师跳出执行层，去洞察丁香医生的产品设计策略，提升产品分析能力；产品经理/运营通过全面的内容设计、交互流程分析，获取产品设计参考；医疗产品从业者通过对丁香医生的产品设计分析，获取竞品参考。2. 分析目标丁香医生 APP 是一款用户口碑非常好的产品，此次的产品分析目标主要去分析丁香医生做了什么，为什么做，如何做，旨在提炼出丁香医生的设计公式，为 UI 设计师、产品经理、产品运营及医疗产品从业者等提供设计参考。3. 分析步骤第一步，产品拆解。把丁香医生的功能板块全部拆解，去研究它到底做了什么；第二步，设计分析。对丁香医生的功能设计、内容策略、用户体验进行全面的分析；第三步，总结思考。总结思考丁香医生产品设计的优点，提炼产品设计公式。4. 分析原则AARRR 模型（海盗指标）AARRR 模型，也称海盗指标，由戴夫·麦克卢尔提出，包含用户获取、用户激活、用户留存、获取收入、用户推荐，分别对应用户生命周期中的 5 个重要环节。通过海盗指标，去分析各功能模块的价值，从而了解为什么做，对产品有什么帮助。用一篇文章，让你掌握能让用户快速增长的AARRR 模型AARRR模型因其掠夺式的增长方式也被称为海盗模型，是Dave McClure 2007提出的，核心就是AARRR漏斗模型，对应客户生命周期帮助大家更好地理解获客和维护客户的原理。阅读文章 > 社会心理学通过西奥迪尼的社会心理学《影响力》六大说服力原则——互惠、承诺和一致、社会认同、喜好、权威和稀缺，再结合陈勇转化六要素，去思考丁香医生的内容如何设计，这样设计是否有原则依据。尼尔森十大可用性原则通过尼尔森十大可用性原则，即系统可见性原则、环境贴切原则、撤销重做原则、一致性原则、防错原则、易取原则、灵活高效原则、易扫原则、容错原则、人性化帮助原则，去判断丁香医生的体验设计是否友好、合理。用超多案例，帮你掌握尼尔森十大可用性原则尼尔森设计原则是人机交互学博士 Jakob Nielsen 于 1995 年发表的“十大可用性原则”。阅读文章 > 产品概述通过产品概述，我们将会了解丁香医生是谁，谁在使用，为谁服务，什么时候用户会使用。1. 产品画像丁香医生是一个大众健康医疗服务 APP，聚焦院外健康场景，为大众提供专业可信赖的多元化健康场景解决方案, 致力于成为健康生活方式向导，核心功能包含健康百科、健康攻略、在线问诊、疫苗预约。2. 商业模式丁香医生链接了患者和医生两端，核心用户群以 26-35 岁的中青年妈妈为主，主要解决用户在生活健康方面的知识盲区，以及线下看病慢、优质医疗资源分布不均衡的痛点。在运营推广方面，主要通过医生、行业 KOL 产出高质量的健康科普、攻略，全网进行内容传播，拉新引流。3. 用户角色丁香医生 APP 链接了用户和医生两端，用户角色主要分为三类，分别为患者、医生、自媒体创作者。患者以 26-35 岁、文化水平较高、收入稳定的中青年妈妈居多；关注个人及家人健康，注重产品的服务和质量，是丁香医生的核心用户群。医生覆盖全国各地医院，以三甲主治及以上职称的医师为主；关注平台的生态环境，渴望在有一定收入的前提下提高自身知名度。自媒体创作者互联网医疗自媒体个人、机构创作者；关注平台发展模式，渴望通过平台获取知名度和收入。其他其他用户角色包含药企及健康相关企业，还有医院；关注丁香医生的生态环境，寻找商业合作机会，进行品牌推广。4. 用户画像介于分析目标和维度，只展示患者的用户画像，其他角色暂不考虑；5. 使用场景介于分析目标和维度，只列举患者使用产品的主要场景，其他角色暂不考虑；疾病查询1）场景描述：郦叶宝宝的幼儿园有小朋友感染了手足口病，郦叶需要查询预防手足口病的注意事项，于是开始查询手足口预防的相关措施。2）解决方案：健康百科、健康攻略常识科普1）场景描述：李芳喜欢搜集日常的健康知识科普，对疾病预防非常看重，希望可以找到一个权威、严谨的科普平台。2）解决方案：直播、健康攻略育儿1）场景描述：张茵是一个新晋宝妈，对照顾宝宝没有经验，渴望拥有专属有效的私人医生服务，解决育儿过程中的一些疑难点。2）解决方案：健康攻略、儿科会员小病问诊1）场景描述：王欢最近皮肤有点干燥，身上还出现红点，但碍于上班不好请假，所以希望通过医疗 APP 在线问诊的形式寻求解决方案。2）解决方案：在线问诊、监看攻略6. 功能架构注：大图高清版请查看附件7. 产品拆解通过 Sketch 软件临摹，把丁香 APP 全面拆解，输出高保真交互设计稿。8. 用户评价丁香医生在苹果 APPSTORE 医疗行业 APP 中排名长期保持在前十，从用户评分和评论也可以看出，它的医疗资源、内容质量和用户体验都获得了用户的认可，是一款非常优秀的 APP。9. 迭代历程截止 2022 年 2 月 20 日，丁香医生 APP 已经迭代了大小上百个版本。从它的迭代历程我们可以看看出，从最初的家庭用药到今天的丁香医生，从一个用药咨询工具发展到现在的大众健康生活服务平台，丁香医生做了无数次的设计优化和完善，才有了今天丰富完善的产品。内容服务根据功能价值，我把丁香医生重新划分为三个大板块，分别为内容服务、医疗服务和会员服务。内容服务主要实现用户获取、传播和留存，医疗服务实现用户激活和变现，会员服务为基础服务，包含用户资料、订单、就诊人管理等。1. 健康攻略功能价值健康攻略是由医生专家及相关医疗健康自媒体从业者创作（PGC 模式，专业创作内容），对用户进行医疗健康科普、宣传，其次为用户与医生之间建立关系链接，实现用户留存。健康攻略内容经过专家委员会严格质控、审核，通过高质量的内容输出，激发用户传播，拉新引流。策略分析首页⑴新用户打开APP后，引导用户选择感兴趣的话题，激活用户；⑵进入首页后，以信息流形式展示内容，为用户推荐感兴趣内容；⑶头部Tab栏为关注（我在乎的）、推荐（系统根据兴趣推荐）、直播（业务目标）、护肤减脂饮食（平台核心内容），左右可切换浏览；⑷PGC内容模式，创作者为医生专家和相关从业者，用户仅可评论；⑸攻略内容会自动生成标签，组成话题。内容详情页⑴头部展示了评审信息，提高内容权威性；⑵引导关注作者，建立链接；⑶首尾呼应，激发用户传播欲望；⑷用户与用户之间可相互评论，作者也可回复评论，建立关系链接，提高用户留存率。医生动态页&话题排行榜⑴关联医生服务，快速激活变现；⑵点击可分享微信好友，生成海报分享到朋友圈传播引流；⑶结合话题热度、社会热点，形成热门话题排行榜，吸引用户关注参与，提高用户活跃度。关键发现⑴首页下拉刷新每次都展示不同的科普知识，解决用户等待加载的同时，还能给用户科普；⑵攻略详情页进入首屏时，评论框列表展示数量，当页面滑动到底部，评论框列表数字变为查看内容，节省用户往上拖动的时间，便捷友好。优化建议⑴新用户首次使用选择兴趣标签进入APP以后，想增加兴趣标签时却发现找不到入口了；⑵首页的栏目支持自定义体验会更好，对于男性用户来说，对护肤、减脂并不一定感兴趣；2. 健康百科功能价值健康百科是一个医疗知识百科栏目，为用户提供查询疾病、药品、医院、体检、疫苗、急救知识等覆盖高频常见的健康问题，由三甲专家专业编审，以问答形式提供实用易懂的健康科普。它像一本健康手册，解决用户对常见病、常见症状、用药等健康问题一知半解的痛点。不仅对用户留存有极大的帮助，还可以帮助产品引流传播。内容策略一级栏目页面⑴头部是健康日历的入口，文字和箭头主要吸引用户进入；⑵醒目的搜索框设计，实时滚动热门话题，引导用户搜索；⑶为用户提供多种医疗服务的查询；⑷每日辟谣的交互设计很取巧，用户潜意识去查看详情的时候就已经开始参与答题，极大提升用户参与度；⑸底部为用户推荐健康科普相关的视频、图文内容。健康日历&每日辟谣⑴健康日历以海报形式激发用户分享，拉新引流；⑵每日辟谣以答题的形式，吸引用户参与辟谣，从而提升用户活跃度；⑶每周设置辟谣答题排行榜，形成排名机制，增强黏性，提高用户参与度；⑷题目解析关联了健康攻略内容，为用户进行全面的科普。子栏目首页⑴头部banner传达了健康百科的价值主张，向用户传递权威、严谨、专业的品牌形象，目的是获取用户信任，打消用户顾虑；⑵头部提供了醒目的搜索入口，引导用户关键词类型查询，培养用户习惯；⑶根据搜索频次，提取热门病种和药品，直观醒目、快速访问；⑷低频服务合并分类，节省页面空间。健康百科详情页⑴头部展示词条作者、审核专家、最后修订版本，向用户传达严谨、认真的态度，一方面增强词条的权威性和可信度，另一方面也是为了打消用户顾虑；⑵通过通俗易懂的问答形式，向用户全面介绍词条的简介、症状、病因、诊断、就诊建议等;⑶在词条底部，关联词条相关的医生专家，医院、药品，实现闭环，激活变现；⑷词条设置目录，可快速切换，便捷友好。优化建议健康百科一级栏目页的 TAB 栏内容和整个栏目没有关联性，早买早开心？清单？一图读懂？这几个栏目的出现很突兀，让人摸不着头脑，像是滥竽充数。3. 直播功能价值直播内容以健康科普为主，聚焦于女性和儿童两类人群医疗健康，为用户提供健康科普、在线答疑。直播场数多，时间覆盖长，最早从早上 08：30 开始，最晚到 23：00 结束，是用户获取、激活、留存、传播的重要手段。内容策略栏目页⑴头部通过精美的轮播广告图吸引用户，激发用户兴趣；⑵聚焦于女性和儿童两类核心用户群。详情页⑴橱窗图左边展示医生医院、科室、职称信息，右边展示医生上半身照，主要是获取用户信任，提高直播的权威度；⑵主讲人个人主页入口，引导用户关注，激活变现；⑶直播倒计时利用稀缺性制造紧迫感，提醒用户预约，设置提醒，并鼓励用户邀请好友分享。直播页⑴左上角是医生的个人头像和主页入口，吸引用户关注，为用户和医生建立链接；⑵直播右下角，设置了直播医生的问诊入口，这是一种场景化营销方式；⑶直播中直接赠送医生的个人问诊券，快速激活用户；⑷用户可以参与评论，也可以分享传播。4. 医师讲堂功能价值医师讲堂是一个知识付费栏目，为用户提供各种疾病健康科普课程，包含两性、育儿、护肤、孕产等，医师讲堂具备用户获取、激活、留存、变现和传播的功能。内容策略栏目页⑴头部设置了义诊的轮播，目的是通过讲堂的场景激活用户，培养用户习惯；⑵讲堂的课程分类，主要以两性、育儿、护肤为主。课堂详情页⑴头部营造促销氛围，吸引用户兴趣；利用畅销好评，增强用户信任；⑵讲师和课程的详细介绍，点击即可关注，查看讲师就诊详情页；⑶课程支持免费试听，同时提供音频和文稿。优化建议⑴整个APP没有课堂的入口，只有在搜索结果页的底部以及任务中心，才提供入口；⑵课堂是一个可以实现拉新引流、留存变现的内容栏目，而且课堂的内容也夯实，理应在首页预留一个明显的入口。5. 搜索功能价值搜索是实现用户激活和留存的重要手段，它关联了用户真实的使用场景，当患者对健康问题有疑问，需要找专家、找医院的场景时，为用户提供真实、有效的搜索结果，从而培养用户习惯，激活转化。内容策略引导页⑴为用户保留历史搜索，提供友好的用户体验；⑵通过热词和专题引导用户，快速激发用户兴趣；⑶采用模糊搜索，自动关联，帮助用户精准搜索。搜索结果页通过四个维度展示搜索结果内容，分别是推荐（全面了解）、医生（哪个医生擅长？）、医院（哪家医院擅长？）、药品（用什么可以治疗）。搜索结果-推荐⑴百科在顶部，权威性最高，最全面，对用户帮助最大；⑵链接相关医生，为用户解决困难，快速激活变现；⑶图文、视频、话题、社区等内容，增强社交属性；⑷利用社会认同心里，展示问诊的公开问题，激活用户；⑸通过讲堂更深的知识讲解，为用户解决疑惑。医疗服务医疗服务是实现激活用户和商业变现的重要方式，包含了问医生、速诊、义诊、疫苗预约、疫情地图五大板块，为用户提供专业完善的在线医疗服务，为用户解决线下看病难、慢、麻烦的痛点。1. 问医生功能价值问医生是丁香医生的在线问诊板块，链接了医生和患者两端，为用户提供专业完善的在线医疗服务，支持图文、电话问诊，是丁香医生实现用户激活、商业变现的重要手段。内容策略栏目页⑴拆解问诊服务卖点，极速卖时间，义诊卖促销，快速激活用户；⑵用户可按科室查找，也可查看平台推荐医生；⑶Feed流展示，根据医生评分、响应时间等指标计算。医生详情页⑴向用户展示医生的职称、科室、医院、擅长方向、个人简介等信息，目的是获取用户信任；⑵利用畅销好评，增强信任状；展示医生专栏，持续增强信任状，获取用户信任；⑶展示医生就诊的公开问题和患者评价信息，利用顺从心理，进一步打消用户顾虑，变现成交。图文问诊下单⑴问诊页提供了描述模板，降低用户学习成本；在输入框，提供了常用便签，方便快捷，有效促进新用户的首次激活；⑵提交病情后，新用户需要添加真实的患者才能进行问诊；⑶利用情感化营销，鼓励用户公开问诊，增加真实案例，丰富平台内容。电话问诊下单⑴电话问诊需要预约时间，用户可选择合适的时间，医生确认后进行电话问诊；⑵为确保医生的隐私，通过第三方虚拟电话拨打患者电话。图文问诊交流页⑴用户有3次提问机会，医生接单后，开始问诊；⑵用户可向医生申请开药；⑶鼓励用户对医生的服务进行评价。交互流程图文问诊⑴进入医生详情页；⑵选择问诊方式；⑶描述患者症状；⑷选择患者，新用户需要添加患者信息；⑸支付订单费用；⑹购买成功，等待医生接诊。电话问诊⑴进入医生详情页；⑵选择问诊方式；⑶医生就诊时间段预约；⑷描述患者症状；⑸选择患者，新用户需要添加患者信息；⑹支付订单费用，等待医生接诊。优化建议⑴当用户下单后，在等待医生接诊的过程中，虽然有短信提醒，但缺乏比较醒目的弹窗或入口提醒用户进入问诊订单对话框，这会让用户在产品体验中陷入迷失，不知道在哪里和医生进行沟通；⑵问诊的对话框层级太深了，需要点击我的-我的问诊-问诊订单才能进入问诊流程。2. 速诊功能价值速诊以时间为卖点，包含了极速问诊（图文问诊，3 分钟快速回复）和电话急诊（电话问诊，60 秒接通三甲医生）两种类型，主要解决用户在就诊过程中的等待、焦虑，其次，速诊是实现激活用户、培养用户习惯的重要方式。内容策略极速图文问诊页⑴极速图文问诊是系统根据病情智能匹配医生；⑵用户如果对系统推荐的科室不满意，可自行选择；⑶支付订单费用后，平台为患者推荐医生接诊。电话急诊页⑴电话急诊嵌入了很多问诊描述模板，点击标签，文本框自动读取病情，友好快捷；⑵电话急诊为核心用户群而设计，主要以孕妇、孕妈为主。⑶通过第三方虚拟号码致电患者电话，不给医生带来干扰。3. 义诊功能价值义诊以价格为卖点，包含了特惠义诊和专家义诊，通过限额、低价的形式，引流拉新，激活用户，培养用户习惯。内容策略特惠义诊&专家义诊页⑴新人首单1元，低价吸引新人快速激活；⑵利用稀缺性，制造紧迫感，限额促销；⑶行业大咖限量销售，不仅快速激活用户，还可以传播引流。4. 疫苗预约功能价值疫苗预约根据人群受众划分为女性专区、父母专区、新冠专区、儿童专区，包含了 HPV、新冠疫苗、乙肝等热门接种疫苗。丁香医生的疫苗服务是和第三方机构合作，为第三方机构导流，实现商业变现。内容策略栏目首页⑴根据地区划分，用户需要选择接种地点；⑵吸引用户加入疫苗社群；⑶划分为女性、父母、新冠、儿童专区；⑷知识小贴士，激发用户兴趣。详情页⑴信任加持，赢取用户信任；⑵互惠促销，激发用户兴趣；⑶展示可预约时间；⑷关联套餐，为用户提供多种促销方式；⑸预约流程介绍；⑹服务详情以及常见问题。交互流程⑴选择疫苗类目；⑵进入疫苗商品列表；⑶疫苗详情页介绍；⑷选择商品规格；⑸支付订单费用；⑹购买成功后，预约疫苗接种时间。优化建议疫苗预约整体的设计太粗糙了，无论是图片、图标都不精致，首屏的疫苗列表甚至是纯静态的图片展示，体验较差，也不方便产品更新。5. 疫情地图功能价值疫情地图为用户实时提供全国以及全球的疫情最新动态，包含了疫情热点、近期疫情分布、国内疫情分布、全球疫情数据、新冠疫苗科普，其次还向用户提供核酸检测预约、防疫物资购买、出行政策查询。疫情地图可以帮助产品引流、留存、传播，其次通过相关的科普、预防、辟谣，向用户树立专业、权威的品牌形象。内容策略栏目首页⑴展示历史累计阅读人数，增强用户认同，树立权威性；⑵场景化营销，赠送问诊优惠券，激活用户；⑶提供防疫相关检测服务及物资销售；⑷疫情出行的高频工具，帮助产品传播、留存；⑸关联产品科普内容，引导转化；⑹支持用户订阅，分享疫情地图，有效提升用户留存和传播。出行政策页⑴模拟出行类APP风格设计，降低用户学习成本，提升用户体验；⑵订阅变动引导用户关注丁香医生服务号，有效防止用户离开APP后无法接收通知。优化建议疫情地图和疫苗预约板块一样，设计太过粗糙，图片、图标都不精致，相比其他头部产品的疫情地图，用户体验急需优化升级。会员服务会员服务包含了会员资料、丁香豆、我的订单、就诊人管理、系统通知和在线客服，这个板块是一个辅助性功能模块，对用户激活和留存有一定帮助。1. 会员资料功能价值会员资料包含我的资料、我的关注、我的收藏、医生卡，有效帮助产品激活用户、增强用户活跃度，从而提高留存率。内容策略用户中心&资料设置页&推荐⑴数据面板展示我的关注、收藏、医生卡等信息，清晰明了；⑵个人资料设置页支持用户进行个性化设置；⑶采集了应用市场的精彩评论，鼓励用户分享推荐。我的关注&收藏&医生卡⑴关注的医生、创作者显示在列表，点击可访问详情；⑵收藏内容列表，可直接访问详情；⑶医生卡订单页，可查看所有待付款、服务中订单。2. 丁香豆功能价值丁香豆包含了用户签到、任务、积分、兑换内容，是实现用户留存和激活的重要方式。用户通过签到、做任务、分享、问诊等形式可获取积分（丁香豆），同时也可以使用积分兑换优惠券和物品。内容策略栏目首页⑴作为平台流通的虚拟货币，直观醒目展示用户的丁香豆数据；⑵按7天为一个周期进行签到，连续签到有奖励，吸引用户激活、留存；⑶鼓励用户完成任务，获取丁香豆，提升会员活跃度；⑷兑换专区的物品，除了有实物，还可以有各类问诊优惠券，比如极速、名医、电话问诊等，有效激活用户，培养用户习惯。任务中心&丁香豆明细&兑换记录⑴任务分为健康任务和新手任务；健康任务侧重留存，新手任务侧重激活；⑵丁香豆明细以及兑换记录。3. 我的订单功能价值我的订单包含了问诊、处方、药品、疫苗和讲堂的订单，当用户下单购买以后，在用户中心就能查看对应的订单；订单的设计对用户留存有一定的帮助。内容策略用户中心&我的问诊&疫苗订单详情⑴订单的入口直观醒目，包含了平台的所有订单类型；当有新订单时，出现角标，提醒用户查看；⑵左右可切换不同的订单状态，点击可查看订单详情；我的处方&我的药品订单&我的疫苗&我的医师讲堂⑴当用户购买了处方、药品、预约、医师讲堂服务后，生成服务订单，用户可查询详情。4. 就诊人管理功能价值就诊人管理包含了患者管理、预约人信息、成长测评、摇号信息，对激活用户和变现有一定的帮助。内容策略患者信息&添加患者⑴用户可添加多个患者，点击患者列表可对患者的资料进行更新，删除；⑵添加患者是一个用户激活的关键行为，其次对医生就诊也有重要的帮助；用户需要输入正确的信息才能成功添加；新增预约人&摇号信息&成长测评⑴用户新增预约人后，可以进行疫苗预约；⑵当用户成功报名疫苗预约接种后，就会生成摇号信息，用户可以查询；⑶成长测评为儿科会员的专享服务，帮助用户对孩子的成长进行全面的测评。5. 通知&客服功能价值通知包含了系统消息、问诊消息、攻略上新、我的评论的提醒，对用户的激活有一定帮助；在线客服默认为智能机器人，机器人会根据用户输入的关键词自动回复，用户也可以转人工进行解答，解决产品使用过程中的疑问。内容策略消息通知⑴通知集合了系统消息、问诊处方药品消息、内容上新和评论动态，对于用户激活和留存有很大帮助。⑵小红点提醒新用户有内容更新，橡皮擦提醒用户可以批量清除消息提示；⑶新用户注册后，系统会默认发送促销消息，促进用户激活。在线客服⑴在线客服包含了机器人和人工客服两种模式；⑵用户可随时切换人工客服，提供常见的咨询问题类型，节省沟通成本。优化建议⑴消息的层级有点深，用户需要至少点击4步才能查看到系统消息详情，其次消息的入口不醒目，用户容易忽略；⑵在线客服的机器人功能太简陋，智能提醒用户转人工或关注微信号，可结合AI智能问诊技术为患者提供更智能完善的服务。6. 小结通过对丁香医生的功能设计、内容策略、用户体验全面的分析，我们可以看出丁香医生的每一个功能模块、字段内容都是有价值的，并不是毫无规则、随心所欲的设计。总结思考1. 设计公式通过对丁香医生产品设计的全面分析，我参照增长模型公式提炼了丁香医生产品的设计公式，从而让大家可以全面、简单和结构化的方式去研究学习。丁香医生产品设计=聚焦核心用户需求 x 打造产品增长武器 x 持续优化用户体验聚焦核心用户需求丁香医生的设计策略，就是聚焦核心用户人群，为她们提供精细化的服务。整个产品的内容、服务和体验都是围绕中青年妈妈用户群体设计，牢牢抓住中青年妈妈这部分高消费力、高活跃度的用户群体。打造产品增长武器一个产品，如果不具备获取、激活、留存、变现、传播的武器，那么上了战场就只能让人宰割。丁香医生的武器库可谓是火力凶猛，拉新引流的飞机大炮，一应俱全。持续优化用户体验没有最好，只有更好。想要设计优秀的产品，只有日复一日的迭代优化，没有其他任何捷径。丁香医生产品的迭代频率几乎 1 周 1 次，可谓是追求极致的体现。资源包2. 参考文献《增长黑客》-肖恩·埃利斯/摩根·布朗《硅谷增长黑客实战笔记》-曲卉《影响力》-罗伯特·西奥迪尼《步步为赢：交互设计全流程解析》-董尚昊《超级转化率：如何让客户快速下单》- 陈勇《有效竞品分析：好产品必备的竞品分析方法论》-张在旺全是干货！在线问诊产品设计的 7 个关键问题最近看了一篇国外的互联网医疗产品设计文章，本以为国外没那么多黑话，没想到这篇文章通篇都是虚头巴脑，讲半天还是简洁高效情感化那一套空话。阅读文章 > 文件名 如何下载使用 文件大小 提取码 下载来源 丁香医生产品设计资源包43.3Miusd 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/dxy-product-design
用户 趣味性 完成任务 一样的活动不一样的呈现，改版结合游戏化设计，强化视觉冲击力，重塑了活动的参与体验~1. 项目背景尊享好礼活动，是针对中高频寄件用户的专属活动，根据用户过往的寄件频率和寄件量，给予不同等级的任务与相应奖励，鼓励和刺激用户寄件，以进一步提升其寄件量，进而提升寄件收入。2. 旧版本分析重要信息首屏展示不全辅助性质的头图，占据大面积的视觉焦点，而最重要的完成寄件任务、领取奖励部分内容相对靠后，在首屏内展示不全，不利于活动主信息传达；任务与奖励信息展示不突出任务节点与相应奖励，展示太弱，无法快速吸引用户的注意力，不利于刺激用户完成任务；完成任务后的状态不明显用户完成任务后，待领取奖励在第二屏，无法直观看到，且样式比较简单，感知弱，导致用户领取率低；缺乏品牌元素整体页面，缺少品牌融入，产品认知度差，不利于建立品牌感知。1. 优化目标增强用户对活动信息的感知，鼓励用户完成任务；引导用户完成任务后领取礼包，提升礼包领取率；引导用户使用礼包，提升寄件量和频次，实现业务转化。2. 优化策略简化页面信息，调整信息层级缩短不重要的头图内容，在视觉中心放置更重要的任务和奖励信息，并结合游戏化的进度展示，增强用户对任务进度的感知；化被动为主动，增强信息提醒当用户完成任务后，有待领取奖励时，主动弹窗提醒用户领取，既能增强奖品的视觉冲击力，亦可避免用户漏领取；融入品牌元素，强化服务感知在设计中，增加品牌元素融入，结合趣味性的动效，让用户进入后即可感知到顺丰的品牌温度。1. 关键词提取基于用户画像分析，我们可以看到产品客群男性稍多，但男女比例差异不大。26-35 岁有经济能力的年轻人居多，整体客群偏年轻化。因此，在设计风格上，采用中性的画面及色彩搭配，结合游戏化场景设计，增强趣味性，吸引年轻人参与。2. 主页面设计游戏化场景设计将头图和场景融合在一起，用路径引导用户循序完成任务红包元素提取运用大红包，增强奖品的视觉冲击力，按钮单独前置、券抖动提示，吸引用户点击领取奖励；趣味性动态表达小哥抱快递沿路径跑，展现本月已寄单量，同时趣味化表达“快去完成任务”的紧迫感；画面质感呈现采用轻量化、年轻化设计表现手法，彰显界面品质感。3. 标题设计字体设计经过几版修改：增加了厚度和金属光感来刻画品质感，颜色上蓝紫色和主视觉搭配更加融洽，最终呈现简洁大气质感。4. 动效设计小哥抱快递箱沿着路径向前跑的形式，取代传统进度条展示任务进度（寄件单量），更有趣味性的同时实现了品牌的情感化传达。针对上一期礼包领取率不高的情况，券做了抖动动效引导用户点击。1. 数据结果优化上线后，活动的奖励领取率提升 23.1%，奖励使用率提升 9.5%，提升效果显著，实现了优化目标。2. 设计总结针对本次优化设计，我们整理了如下设计要点：主次分明，提升信息获取效率从业务目标和用户目标出发，梳理信息层级，把握信息传达的主次关系，重新调整页面布局； 游戏化场景构建，增强趣味性寄件任务与关卡游戏场景相结合的形式，相对静态页面，既能有效传递信息，同时增强了页面的趣味性与新颖性；动态引导，强化视觉焦点运用小哥沿路径奔跑的动效，来替代传统的进度条，增加趣味性，以及其他微动效设计也能吸引用户关注重要信息；品牌传达，加深记忆点在页面设计中，增加品牌元素和 IP 形象，既增强了页面的品牌识别性，也实现了品牌的情感化传达。以上，是对《尊享好礼》活动优化项目的回顾与总结，谢谢您的阅览。更多改版后数据大幅提升的案例：点击率提升115%！腾讯动漫8.0改版实战完整复盘腾讯动漫 7.0 没过多久之后，我们就紧锣密鼓地进入了 8.0 改版的阶段。阅读文章 > 如何提升会员转化？用酷家乐的实战案例为你全面解析前言从2011年的爱奇艺VIP到2018年的淘宝88VIP上线，互联网纷纷掀起一股付费会员的热潮，付费会员也渐渐成为了互联网常见的用户经营工具，同时也是流量变现的通用模式。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/game-operating-design
用户 形象 财企 前言近年来随着盲盒、手办几近疯狂地在消费领域流行起来，IP 形象在品牌设计中的重要性也被各家品牌提上日程。腾讯理财通通过招财企鹅 IP 形象的设计与应用，拉近了平台与用户的距离，也拉近了金融与用户生活之间的距离，让每一个人乐享金融的美好。2021 年我们对招财企鹅形象进一步完善，将其作为理财通品牌的主 IP 形象，围绕更明确的品牌形象定位、更丰富的表演性与场景的应用展开设计，希望带给用户一个更鲜活、更具亲和力的存在。IP 角色定位理财通的设计目的就是让金融与生活距离更近，以友好的态度提供可靠的信息和帮助，让金融理财成为用户的一种生活方式。理财通作为个人财富管理平台，在用户理财的路上建立陪伴，与用户一起成长。“陪伴用户，一起成长” 就是我们的设计动力，指导理财通的设计实践。通过专业易懂的体验设计与用户建立信任关系之余，招财企鹅的出现，是我们品牌价值中”陪伴”的一个很好地补充。从感性角度出发，通过友好的态度，承担陪伴、共情、可靠、成长的形象定位。形象设计思路通过分析与案例整理，以及先前版本的应用情况，此次的调整方向主要是针对“IP 与品牌的关联性”、“IP 形象如何与用户建立亲和力”和“IP 延展应用的表演性”三个方面进行设计打磨。1. 招财企鹅形象设定招财企鹅形象的元素包括了腾讯 QQ 和招财猫。在信息爆炸的现在，为了在众多品牌中保有强识别度，以腾讯 QQ 为背书，保留了企鹅的脸，塑造一个可信赖的卡通形象，抢先与用户建立情感链接。为什么是猫咪呢？从古至今，招财猫是最不需要付出教育成本，就能传达财富寓意的存在，所以也保留招财猫样式，强化其招财属性。通过用户调研发现，用户在此阶段，虽不能明确指出招财企鹅形象即理财通 IP，但能明确通过企鹅元素识别到腾讯的关联性，以及招财猫的财富属性。2. 如何塑造 IP 形象亲和力？IP 形象的视觉核心可以用三个关键词来实现：简约、强识别、差异化。简约即简洁的卡通形象；强识别指的是强认知的造型和配色；差异化是可提炼的核心识别符号与辅助识别符号。看似简单的基础造型是通过无数次简化，提炼出的记忆符号，让人不看也可以在脑海中勾勒个大概，比如迪士尼米奇、小黄人等等。通常脸的视觉重心也在面部中央，五官排列更加居中的话，会显得更加富有亲和力，利用群化手法营造张力，让招财企鹅脸部的重心向上集中，传递更加积极向上、亲和的性格感受。3. 如何提升形象表演性？考虑到招财企鹅可能出现的不同使用场景，在保持短手短脚特征的前提下，我们把他整体的身高从 1.7 个头的比例增加到了 2.3 个头（长度主要加在了腿上）。增强 IP 形象的活动性和展示能力，扩展了基础造型变化性，方便业务多元场景应用。更加灵活的肢体拓展了他的应用场景，从线上活动，到线下品牌推广以及物料组合，让整个 IP 形象有更丰富的呈现，在与用户互动时更加鲜活。4. 设计风格延伸设计风格也有相应的拓展规划储备，包括线框风格、微立体风格和立体风格。不同的风格可以适配于不同场景的设计表现：线框风格通常适用于条漫、贴纸、胸针、手举牌等物料，物料相关氛围烘托较少，线框风格使得卡通形象造型更明确突出；微立体风格主要用于理财通平台站内设计，轻量的插图表现相对克制，但也可以增加 UI 设计的丰富表现；立体风格更适用于需要更强视觉冲击的营销场景，便于最大程度的吸引用户的眼球。从线稿到实体公仔为了把抽象的财运祝福“变”的更真实可见，他的招牌动作是高举喵爪招财，更加凸显他的招财属性；招财猫左手招福气，右手请财，爪子举在胸前意味着招来身边的好福气，举高的这只手寻求的是远方的财富，加上胸前抱着的金砖，意味着大家可以把招到的财运通通抱回家。基于前期用户调研的结论”用户不能识别到招财企鹅是理财通品牌形象”的问题，我们尝试尽可能加强形象和品牌的关联性。通过巧妙的文案语言“天天理财通”关联品牌，亦可传递出祝福的语义，避免了过硬的营销感受。招财企鹅包装设计以丰富活动场景的使用，设计出三款不同尺寸及材质区分不同价值感的手办融入腾讯企鹅大本营集体照丰富 IP 应用场景，夯实用户心智一个 IP 想要让用户记住，需要持续不断的运营，让 IP 尽可能多的在用户面前曝光，尽可能的传递出有记忆点的个性特征，从而夯实用户的品牌心智，帮助提升品牌好感度。我们尝试将 IP 与业务的不同场景进行结合，从平台的用户陪伴与引导场景、运营活动中作为核心画面及奖品等；延伸到平台以外比如微信表情、微信红包封面、线下落地活动等。我们的策略是将招财企鹅的 IP 形象，像一颗钉子一样，一点一点的植入用户的心智当中。1. 线下品牌宣传招财企鹅的物料针对不同声量做了全面覆盖，包括表情包、线下活动、周边产品等…理财通年终《一起来招财》活动将招财企鹅作为活动主要主体，出现在深圳、北京、上海的多场员工活动中。通过内宣渠道曝光量超 9 万。各地现场气氛火爆， 员工对于招财企鹅的评价和热情较高，纷纷表示期望后续有更多渠道能公开售卖。一起来招财线下活动在腾讯设计周的活动中，我们再次以招财企鹅形象作为主要的商品元素，在线上线下的售卖过程中也受到粉丝们高度喜爱。其中以招财企鹅为主体绘制的三幅画作，意外成为全场的爆款商品，这也正说明用户对我们形象设定的“招财”“好运”寓意的认同。腾讯设计周创意市集—招财好事多快闪店腾讯设计周创意市集—热销创意挂画招财企鹅的周边，我们融入了招财的理念，希望可以陪伴在用户身边，为用户带来好运加成，与用户形成情感共鸣。包括有“抱富”靠枕、“财运开挂”的挂件、招财企鹅“加薪”水杯等，拉近我们与用户的距离，陪伴用户。2. 表情包设计想要把形象推送到更多的用户手中，除了实物商品外，我们也尝试融入到用户的生活场景当中，微信表情包是很好的契机，而红包场景与金融场景的关联性是招财企鹅作为表情出现的机会点。我们在洞察到一般大家发完红包之后，我们都会用表情回复，去感谢金主，激活微信群的应用场景。其中包括老板发红包、我们求红包和收到红包的感谢、激动、没抢到红包的状态等等。通过红包场景关联，也强调了招财企鹅“招财”“好运”的人设特点。在红包主题的表情包场景中，我们根据场景热度的不同，发散并筛选了 4 个不同的状态主题，其中收到红包的表情包应用比例相对较大。感兴趣的小伙伴可以微信扫一扫，下载招财企鹅表情包除了表情包，招财企鹅也通过丰富的场景演绎，与一些祝语相结合，作为新年招财壁纸，希望把好运带到用户身边。3. 线上运营活动线上运用活动的优势在于它可以作为一个中枢，串联线上线下的不同场景。可以通过活动将“招财企鹅手办”送到用户身边，也可以将招财企鹅表情包传递给用户。在活动的设计上，通过动画效果、空间展示、互动形式提升用户对形象的认知，强化招财企鹅的 IP 个性、招财属性，从而让用户更加喜欢这个形象。为了更进一步的让用户认识这个形象，我们通过设计师视频采访的方式，讲述招财企鹅的「设计历程」，带出招财企鹅的设定，让它可以更好的融入到我们生活场景当中，让它从一个模型，变得更加真实。结语除了以上的形象表达之外，我们还有更多的尝试，目的是想要通过线上线下反复触达，招财企鹅的“人设”被一点一点的加入到了招财企鹅的生命中。后面的路还有很长，招财企鹅会不断的完善和优化自己，就像视频里讲到的，我们希望招财企鹅能够作为一个开运好物一样能常伴用户身边，帮助用户拉近金融与生活的距离，将理财变成一种生活方式，陪伴用户一起成长。而这也正是我们 FiT 腾讯金融科技的使命：让每一个人，乐享金融的美好。更多 IP 设计干货：4500字干货！帮你快速掌握 IP 设计基础知识即使你没有听过川沙妲己，那你也一定听说过玲娜贝儿，之所以称她为川沙妲己，是因为迪士尼在上海浦东新区川沙镇，而玲娜贝尔是一只可爱又迷人的粉色小狐狸。阅读文章 > 电商设计师必备！潮流IP涂鸦插画全解析+创作教程说到当下最热门最受年轻人喜欢的插画风格，就不得不提到潮流涂鸦插画。阅读文章 > 欢迎关注作者微信公众号：「腾讯设计族」本篇来源：优设网原文地址：https://www.uisdc.com/fortune-penguin-ip-design
标签 用户 图标 前言标签栏是用户进入 APP 的第一触点，绝大多数以固定在设备底部的形式、让用户在应用中的不同模块之间快速切换。它作为移动应用中最常见的元素之一，是 UI 设计师们绕不开的课题。一个好的底部标签栏可传达出产品的核心功能、品牌形象及设计理念，还能用作判断应用是否精致的标准，用户可通过第一触点来感受这个 APP 是粗糙的还是精致的。所以看似简单，但要想设计出视觉美观、反馈清晰的底部标签栏，有很多值得我们深究的地方。那么标签栏为何存在？背后满足的需求和场景到底有哪些？能给产品、用户带来什么价值？本文将从很多优秀产品中，挖掘出值得学习和借鉴的设计亮点，对标签栏作出思考及分析，希望能帮到大家。本期大纲了解标签栏标签栏常见设计规范标签栏组合方式图标切换样式标签栏功能样式延展总结了解标签栏1. 为什么要设计标签栏？虽然我们看到如淘宝、京东、美团等主流产品都使用了底部标签栏，但并不是所有的产品都需要，部分工具、打车类型的 APP 就没有使用标签栏，所以在设计一个产品之前应该思考，为什么需要、有没有更好的其他方式代替。在这里，我们先了解其作用，然后结合需求思考与产品的的契合度，最后再决定是否使用它。传达核心功能底部标签栏一般由 3~5 个功能（入口）组成一个完整的产品架构，这些功能基本都属产品的核心，可以帮助用户避开产品中其他信息的干扰、精准快速的找到这些功能并使用它。突出重要功能即便有些不是产品的核心功能，但用户的操作频率极高、可能是核心功能的前置条件或索引，也会将入口置于底部标签栏，常见的有扫一扫、搜索、发布作品等。需要注意的是，这种功能在操作之后大部分都会进行二级页面跳转，与其他标签的等级权重并非平行。多种展示方式因产品定位不同、受众用户不同，接收信息的方式也有区别。标签栏能灵活的承载多种视觉展现方式，以传达出不同的产品气质。例如：受众群体范围非常广泛且存在一定的互联网文化差异的产品，使用纯文字标签；而对于长期活跃在互联网环境下年轻化的专业用户，且产品较为轻量，标签栏使用纯图标会显得更加简洁、更有气质。定位用户坐标用户可通过被激活的标签（高亮、颜色变化）清楚自己当前所处位置，减少用户思考或通过其他信息解读而花费不必要的时间。2. 为什么放在底部?首先，将标签栏置于底部非常方便用户拇指与设备进行交互，基于单手操作的便利性，无论左、右手，其大拇指都处在设备底部的自然覆盖区域；其次，因用户是通过从上到下、从左到右的“F”型浏览顺序，设备底部对用户产生的视觉注意力相对较低，置底导航不会分散其注意力，同时又方便用户随时切换至其他感兴趣的功能模块。根据史蒂文·霍伯（Steven Hoober）在对移动设备使用情况的研究结论中表明：抱着手机的人占 36%、两只手使用手机的人占 15%，而 49％的人依靠一只手在手机上完成事情，也就是说，仅用大拇指操作手机的用户可能高达 75%，这足以说明将 Tab 栏置于底部体验会更好，很大程度上提高用户的操作效率及频次。绿色代表可以轻松到达的区域；黄色代表需要延伸的区域；红色表示难以到达，需用户改变手持方式。3. 标签栏结构底部标签栏结构布局相对来说比较简单，主要有以下几种元素组成：1 – 用于承载标签栏所有元素的容器；2 – 激活状态下的图标，高亮提示，明确用户当前所在位置，点击不会跳转到其他功能模块（舵式导航除外）；3 – 激活状态下的标签文本，作用与上述相同；4 – 未激活状态下的图标，相比激活状态，视觉层级较弱，点击会跳转至对应的功能模块；5 – 未激活状态下的标签文本，作用与上述相同。标签栏常见的设计规范1. 标签数量为确保底部标签栏表现清晰、反馈及时，iOS、Android 两大平台在设计规范中都对标签数量给了相同的建议，将底部标签数量控制在 3~5 个之间，低于 3 个会过于占用页面底部空间，浪费资源，超过 5 个会让结构变的复杂，且用户在操作中容易发生误触。针对超出 5 个之外的标签，Google 建议将以汉堡菜单的形式隐藏、iOS 也将多出的标签隐藏并强制替换成“更多”入口，虽然可以将其视为一种解决方案，但体验极差，一方面用户无法提前感知隐藏的功能入口，极易忽略，另一方面，产品将重要功能隐藏可能会存在不可预知的风险。具体的标签数量如何决定，这还得根据产品的框架来确定，功能结构的划分会告诉你标签数量到底是 3 个还是 5 个。比如：功能比较单一的产品，3 个入口足以满足需求，对于结构复杂且超出 5 个的，需根据产品的核心功能、主推业务进行筛选，最终控制在 5 个以内即可。2. 标签间隔屏幕均分：这是在设计中使用最多的一种方式，不管标签有几个，都可以利用整个标签栏的宽度进行平均分布。例如：以 iOS 二倍图设计稿 750px 的宽度为基准，如果存在 5 个标签，那么每个标签就应该在 150px 宽度的区域内左右居中、并依次均匀排布在整个底部标签栏中。同等间距：比较少见，一般只有 3 个标签时才会选择使用这种方式，在标签较少的情况下，相比均分，视觉上看起来更为紧凑。3. 视觉分割缺少视觉分割的标签栏很容易出现错觉，让用户误以为这是页面底部的内容，对信息的区分非常不友好，我们可以通过投影、分割线、背景色、毛玻璃效果对标签栏作出明确的信息版块区分。标签栏组合方式1. 图标加文字组合这是最为常见的组合方式，当某种样式的图标被广大用户熟知、或频繁使用某个应用时，引人注目的图标能让用户快速理解，且不受文化、地域的影响快速触达目标，即便存在某种歧义，配合文字说明使其更加标准化，这种图文组合最为稳妥，不容易出错。2. 纯文字两大短视频平台「抖音/快手」底部标签栏就是当代纯文字标签的代表作，另外如小红书、百度翻译、高德地图…等也采用的这种方式。纯文字标签遵循简单易用的原则，方便直观的进行操作，对用户的影响力较小，让用户更专注于信息本身，例如需用户高度聚焦界面内容的高德地图，去图标化降低标签栏注意力是一种不错的表现方式。不过这种标签样式单一，对于信息延展会受到一定局限，如品牌传播、节日宣传促销等，所以纯文字标签不能乱用、滥用，比较适合用户群体跨度较大的产品。3. 纯图标一般适用于较为小众的产品，例如花瓣，所面向的用户群体是跨度非常小的年轻化互联网专业人员。纯图标样式较为简洁，能在一定程度上提升产品气质，虽然在识别度有所降低，但对于这类用户心智模型的建立已相对完善，所以用户并不完全依赖通过阅读文字才能理解标签含义，更可能是利用位置记忆、图形化等知识唤醒固有认知来快速定位。图标切换样式标签栏的图标设计这里就不做阐述了，如果不太清楚，请看这篇文章：6大章节！图标设计基础知识全方位入门指南前言做好图标设计是一个入门级 UI 设计师的必备技能之一，图标是界面中非常重要的组成部分，在实际的工作中，即便是一些工作多年且有一定经验的设计师，也很难保证自己设计的图标有多么完美。阅读文章 > 1. 图标切换风格众所周知，底部标签栏图标都有选中与未选中状态，其「线性
用户 操作 产品 前言若想提升用户的粘性和留存率，产品需要在设计层面做好考量，给予用户更美好的使用体验，以有效避免用户的流失。那么，有哪些产品的设计细节体现了这类思考？本篇文章里，针对部分产品的设计细节做了分析，一起来看一下。小宇宙隐藏的彩蛋-情感化背后的思考1. 使用场景当使用一款较好的产品时，会不自觉地探索每一个模块。在「设置」-「关于我的」中，向上滑动屏幕时，会出现一个电池盒的装置，让用户看到耳目一新的品牌传达。2. 设计思考设计目标：提高用户使用产品的粘性，为「Z 世代」年轻人提供彩蛋等有趣、可探索的设计方案，从而提升产品的传播与使用频率。作为一款音频博客 App，和其他产品不一样的是，「小宇宙」抓住目标用户需求，去掉附加功能（可扩展的消费场景功能等），给用户清爽、简单、易操作的使用体验，同时内容推荐更符合我的需求。虽然小宇宙产品依托手机平台不需要外置的电池装置，但小宇宙依然给展示出来虚拟的电池装置。我们都知道，移动互联网还未到来时，听音频都要去电器城买收音机，最头疼莫过于听着听着突然没电了，还要更换电池才能继续收听。都是经历过才会有的感受。现如今，当用户在「关于我的」发现收音机电池装置，会有一种怀旧与神奇感并存，不仅加深了品牌记忆点，还能抓住用户心智给予情感化寄托。这里就要补充一下，当用户看到时一定是自发性的，再加上传统电池壳都会有品牌漏出，用户既不会觉得过多宣传，也不会过于反感。反而会加深用户记忆，增加用户粘性。从设计的角度，标识+产品文字（制作起来不算难），但小小的设计就可以让用户形成品牌记忆点，真可谓一举两得。一款好的产品不需要打扰用户、强制外漏。相反，而是十分腼腆，给用户更多的空间去探索发现，团队只需要把产品做好，满足用户需求就足以。设计方案：可以在不干扰用户操作的页面以外，或者是产品本身的宣传页，关于产品页等较能表达产品理念的展示页面提供一些小小的彩蛋。一定注意不要强制外漏来表现设计。因为，你不知道哪部分用户会反感，哪些用户会喜欢。微信读书收藏与返回-贴合场景高效操作1. 使用场景在阅读过程中，提供两种关闭书籍的操作，一个是顶部导航栏的返回按钮，另一个是上滑退出。2. 设计思考设计目的：解决单手操作时，返回首页按钮难以触达的交互手势。设计方案：在专注阅读时，通过上滑交互，可以快速返回首页，也可点击标签栏的返回图标，提供两种返回的交互形式，满足不同用户操作习惯。既然有上滑，那下拉是什么？下拉反而能「添加当前书签」再次下拉「取消当前书签。」上滑「返回」、下拉「收藏」两个交互对立又互斥，只要做不好，使用体验就大打折扣，好在「微信读书」做出来了，并且在使用效率上提高了很多。蚂蚁森林收取能量-快速收取能量的方法1. 使用场景当我收好友能量时，经常会花 2-3 分钟来重复操作，消耗的时间过长，体验不好。2. 设计思考设计目标：解决用户通过瀑布流好友列表，挨个进入挨个返回，操作过多，浪费时间的问题。提高收能量的效率，降低操作时长，提高用户收好友能量的互动性。设计方案：在「蚂蚁森林」页面，能看到右下侧有找能量按钮，点击进入可收能量的页面，通过不断点击相同位置，可进入不同好友主页，固定的操作入口，固定的操作，从而提升收能量的效率。偷偷告诉你一个秘密，在 watch 中收能量，要比手机更方便更便捷。抖音放大看-细节更清晰，内容焦点更明了1. 使用场景同一个视频，不同人看关注的焦点不同，很难满足所有用户观感体验。2. 设计思考设计目标：解决不同用户聚焦内容的清晰呈现。设计方案：用户在观看视频时，双指在屏幕上放大缩小，可放大视频本身，看到更清晰更想看的内容。作为全民都在使用的产品，上传的视频会有各种尺寸，手机屏幕是固定的，想要看训练姿势的细节，只有放大才能看得更清楚。还有类似「5 分钟电影」中某个人物或细节，通过双指放大视频，来看到更清晰的内容。知乎快捷弹幕-预判用户预期的弹幕才是精华1. 使用场景当产生共鸣、认可观点或有笑点想要快速发弹幕时，输入文字的时间过长，造成视频观感的断续。2. 设计思考设计目标：解决输入弹幕文字时间过长从而错过精彩瞬间的问题，或想发弹幕苦于当下词穷等问题。设计方案：在知乎中，视频页下方弹幕列表提供三种发送弹幕的方式，分别：文字、表情、快捷弹幕。要想高频发送弹幕可以点“快捷弹幕”这里推荐了本视频内以及同话题视频中高频出现的短句和知友的神弹幕，总有一句是你的菜。在体验感与效率提高的同时，发送速度也快了 N 倍有余。这样的解决方案能给用户带来更高效的使用体验。促进弹幕的使用频率，提升视频活跃度。中华万年历切换日历类型-给不同用户提供多种选择1. 使用场景用户想对照日历看天气、星座、择吉日程、需要来回切换不同软件或者 Tab之间来回切换，页面之间割裂感强，非常影响操作体验。2. 设计思考设计目标：提供多种日历类型，快速切换，减少学习成本。设计方案：在「中华万年历」日历模块，点击底部 TAB 中的「日历」模块，供用户选择四种日历类型，分别为：传统日历（展示农历阳历、节假日、节气等）天气日历（只在未来 1 个月中展示温度图标和温度、）星座日历（本人与每日速配星座以及运势等）择吉日历（嫁娶、出行、入宅、开市、盖屋等等）。保持统一设计语言的同时，侧重不同内容的展示，既能视觉降噪，还可以给用户提供人性化解决方案，真可谓一箭双雕。闲鱼个人页快捷入口-提高曝光，同时解决屏幕过大导致的高频热区点击问题1. 使用场景选好一款二手产品，沟通聊天都很顺利。想进一步查看卖家信誉度、平台认证等信息，以确保安全可靠。这时会点击头像区域进入卖家主页，商品详情页与卖家主页、聊天页与卖家主页都会存在频繁切换操作，如何缩短手势距离，提升交互操作。2. 设计思考设计目标：解决卖家主页快速访问操作，提高卖家「宝贝」更多曝光，从而提高商品的成交率。设计方案：用到 iOS 系统交互，左右两侧沿屏幕横向滑动手势，屏幕右侧向左划入进入卖家主页，屏幕左侧向右划入返回上级页面。不仅如此，给予‘左滑看 TA 的闲鱼号’文字描述，更能加深用户使用产品时的交互操作，提高主页曝光，展示更多商品给用户。盒马食材百科-全新体验让你爱上做饭1. 使用场景做饭时，先选好要吃什么食物，再去买对应的食材，遇到商家缺粉缺料的情况，真是让人头疼，做饭兴致瞬间降低。2. 设计思考设计目标：一站式服务，先选要吃的主（食材）再去挑选菜品和对应的佐料（就好比点外卖：我今天想吃米饭、炸鸡，土豆粉。一定是有目的地先选择（食材）方向。而不是今天想吃粤菜、或者川菜，具体吃什么再进行菜品选择（啊好烦，还是吃土豆粉好了）。大大降低做饭的制作体验。设计方案：在「吃什么」-食材百科内，按照果蔬市场菜品分这几类：肉禽蛋、蔬菜、水产等。把当季果蔬都罗列出来。用视频呈现出来，直观了解制作过程，降低理解成本。不仅如此，底部购物筐提供一站式的食材和佐料，只要一键下单，即可坐等食材送到家。相比某厨房选好菜品，再去对应佐料一个个购买，增加时间成本的同时，做饭兴致也慢慢降低。可能出现：食材到了，我已经不想做饭这种情况。iPhone 地图快速显示导航-绕过解锁操作，触达屏幕即可显示1. 使用场景出门靠地图，一部手机走天下。在骑行导航中，大致看一下路线后，手机会短暂放进口袋中，再次看地图时交互路径（唤起屏幕-解锁手机-打开后台应用-进入导航）在场景中打开地图的成本增加，对于用户来说，使用体验大打折扣。2. 设计思考设计目标：解决进入地图时的交互入口，优化场景中的操作路径，更快进入地图中。在乘车时，乘客向司机说明目的地，但司机不知道具体位置（手机很卡顿、高龄本地司机不会用地图、外在因素干扰等等。）需要乘客手机开导航来引导司机开车。再或者朋友开车带你，要是用你的手机地图引导，手机给出去心里多少会顾虑一下，会不会看我的手机等等，毕竟这个时代，手机已经成为个人隐私的全部。设计方案：苹果地图基于 iOS 原生系统的优势，当开启导航时。地图即便放到后台再锁屏，依然可以轻触屏幕唤起导航，缩短路径的同时，不需要解锁等复杂操作。即便让他人来使用导航，也不会担心偷窥你的隐私。因为显示逻辑只在锁屏上方显示地图，除了看地图别人操作不了任何东西。大大提升使用者的安全感。美团单车快速开锁-减少繁琐链路，一扫即开1. 使用场景和小伙伴骑车时，遇到扫码流程多，开锁时间长，当朋友都在等你时，一直开不了锁的你内心会无比尴尬。骑车出发一定是有目的的，希望整个链路流程简单且流畅。2. 设计思考设计目标：解决扫码开锁时过多操作跳页带给用户等待的焦虑感，缩短开锁时间。设计方案：无论在「美团单车」「美团」「微信」中，通过扫一扫判断付费用户都能直接进入开锁环节，新用户或未付费用户会在扫码后出现骑行价格明细，可以先骑后付，也可以先付再骑。相比「青桔单车」，即便你是付费老用户，也要先：扫一扫-进入小程序-再次扫码开锁。全部操作，在逻辑上是合理的。但在具体场景下，用户使用时进入小程序操作就是繁琐的一个步骤。这里给「青桔单车」的解决方案，针对新用户，扫一扫-进入扫码骑行页面（按钮上方购卡服务），付费老用户，扫一扫-开锁环节，减少操作等待时间，提升用户使用体验，提升续费购买率。结语设计师要有发现美的眼睛。美不仅是视觉，还有好的体验流程。不要让用户思考，这是每个设计师所追求的。认真记录产品细节，了解背后的思考，也是不断提升自己逻辑思维和表达能力的一种方式。本期产品细节分析结束，我们下期再见！10个产品细节剖析，让你看看大厂是如何做设计的！作为 UI 设计师来说，都是一群细节猎人，以像素级的细节刻画着每一个需求。阅读文章 > 10个产品细节剖析，让你看看大厂是如何做设计的！感谢大家对黑马家族感官体验日记栏目的关注和支持，本栏目皆在为大家带来优秀的设计解决方案和不一样的设计思维。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/product-details-4
用户 操作 老年 项目背景根据第七次全国人口普查，60 岁以上老年人达 2.6 亿人占比 18.7%，预计 60 岁以上老年人数量将保持 3.41%年增长率，2050 年达到 35%，我国即将进入中度老龄化社会。其中视障人群当前人口数已突破 1700 万，在使用移动端 APP 时通常会遇到的问题包括： 无法看到文字、文本与背景对比度不够、内容复杂，难以理解等等。因此需考虑支持对视障人群的优化，通过现有的技术低成本地进行移动端产品体验优化，提升高度近视、或老年远视用户的体验。作为快递物流行业的领头羊，顺丰速运从建立至今，一直注重服务质量的提升，在用户侧也一直拥有良好的口碑，顺应数字化潮流是顺丰速运在新时代发展的必然选择。前期分析此次针对顺丰速运 App 开展的老年用户研究项目，旨在理解老年用户使用快递物流类 App 产品的行为和需求，指导产品定义及优化工作，转化为机会点与产品功能点。因此，要理解老年用户，本项目产出的重点在于回答“谁”在“什么场景下”“出于什么动机”做出了“何种产品使用行为（功能+交互操作）”，使用时有“何种情绪”，其中现有产品哪些方面满足了这些需求，哪些没有契合老年用户需求特点，造成了痛点。老年用户特征个体在进入老年期后，老年群体的生理特征和认知能力会出现不同程度的退行性变化，从而影响生活质量。这些特征可以划分为视觉障碍、操作障碍和认知障碍。1. 视觉障碍指的是由于人的晶状体硬化等情况，导致老年人的视觉分辨物体的敏感度、明暗感觉、空间感觉、色彩感觉的能力下降，有看不清楚的情况出现。 包括的常见问题有：字小看不清、对颜色的识别弱、目光分散/不容易聚焦等。2. 操作障碍指的是由于神经运动机能缓慢，老年人的行动以及各项操作技能变得缓慢、不协调，在使用手机时会出现握持不住、不易点击、操作笨拙等问题。3. 认知障碍指的是在由于个体在进入老年期后，认知功能会出现衰退的现象，例如 感知觉、记忆力显著减退，近事容易遗忘，同时对新事物的学习能力减弱、学习成本增强、特别是对于一些手机、电脑等新兴科技产品的学习较为困难。设计方向基于老年用户特征和数据分析、顺丰速运使用场景痛点挖掘，确定了视觉、操作、认知三个层面的设计方案推导框架：在视觉层通过简化功能框架、优化信息展示，提升用户对信息的识别效率；在操作层通过流程简化等方式，缩减交互步长，降低用户操作成本；在认知层通过视频讲解和常驻入口，强化操作引导，固定用户认知，弱化记忆成本。1. 视觉层研究显示老年人基本上都存在一定程度的注意力分散症状。界面的内容、布局结构、理解效率有显著关系。因此，我们考虑从简化功能模块、提炼内容，围绕大字体、大图标、色彩鲜明出发。简化信息内容 减弱信息干扰根据老年群体特点“记忆力下降、注意力分散”，充分考虑到老年群体对新应用的适应能力，在结构和功能上做优先级舍取， 提炼重点内容，提取核心信息，降低认知成本，以最大限度的降低学习成本。以首页为例，我们选择保留主功能寄快递、查快递、电话寄件、扫一扫、在线客服，用大卡片、大字号、明亮颜色等视觉表现手法凸显主功能。隐藏非必要功能如：会员中心、同城跑腿、游戏、书籍回收、运营等，这些功能老年群体需要的概率低，成为干扰信息。字体大小给老年群体带来良好的阅读体验，需要考虑 易读性。易读性是指人们能否看见、区分、认出所提供文本里的文字。随着年龄增长，老年群体会出现 老花眼、眼睛进光量减少等问题会导致视力减退、注意力降低，眼睛失去快速对焦的能力。因此为了使老年群体更易获得信息，我们对界面字体大小做了一系列的改造，如标题、正文、辅助信息等不同信息层级采用不同的字号标准，使内容更易阅读。虽然老年群体的应用文字越大越好，但是要考虑到手机一屏内需要所展示的信息，就要合理的选择字体大小。有研究表明在我们 屏幕上 16 像素(一倍图)的文本大小与印刷在书籍上的文本大小相同，这很符合人的阅读习惯。但是人阅读还有一个因素是不能忽视的，就是人和屏幕之间的距离。颜色选择老年人眼睛晶体变浑浊、变黄，导致对色彩的感知减弱。因此在颜色的设计上，我们通过 加强色彩对比，使用品牌色黑红、品牌辅助色蓝绿，来进行主界面色彩的设计。2. 操作层老年群体因为其感知觉的退化，会存在着手指灵活度受限、手指握持不住、无法长时间连续操作等操作障碍，针对这类问题，我们通过简化流程步骤来缩短连续操作时间，并使用「点击」代替「输入」，降低操作成本；同时在功能上提供了语音寄件服务，方便老年群体无障碍寄件，提升服务关怀与体验。缩减交互步长：简化寄件流程寄件作为目前顺丰 APP 用户最常使用的功能，也是操作路径较长、信息复杂度较高的一项操作任务，需要用户填写多项信息（如：收寄件人、物品信息等）。我们对现有物品信息填写流程进行了简化， 提供常用的物品类型标签，使用点击取代输入，降低操作成本。人工服务线上化：语音寄件服务在前期的用户调研中，我们发现在线下寄件场景中，存在着老年人请快递员帮忙填写寄件信息的情景，线上也同样存在着类似的代填信息需求，基于此我们增加了电话寄件功能，服务于线上用户，通过人工服务热线帮助其快速下单。防误触机制：增加确认提醒部分老年用户因不熟悉手机界面操作，容易发生误触点击。针对这种情况， 需要建立防误触机制，预判用户可能发生的错误操作，在关键的行动节点设置提醒，如：在模式退出入口，增加弹窗提示，确认用户操作，同时再次明确功能入口位置，方便用户再次开启。3. 认知层在老年群体除了在感知觉（视觉、听觉、触觉）上会出现退行性的变化外，在认知与记忆层面也会出现衰退，具体表现为记忆力下降、学习新事情困难、阅读障碍、理解力衰退等。面对这些问题，除了在简化操作流程外，还可以 通过视频化的操作指引来对新用户进行功能介绍和操作说明，降低用户的学习成本。并且提供 常驻的引导入口和退出按钮，以固定用户的心智，减少理解与记忆成本。降低学习成本：操作演示视频首次进入时提供视频操作引导， 视频结合字幕的演示形式相较于文字说明更直观易懂，学习成本低。 纵向的实景操作视频，方便用户单手握持观看。固化用户心智：常驻快捷入口为了方便用户记忆，弱化学习成本，在首页设置常用的快捷入口，包括快捷退出入口、功能指引入口。通过首页的快捷退出入口可快速退回到标准模式，方便切换。首页右上角常驻的操作指引入口，方便再次查看学习。数据结果目前，顺丰速运 APP 老年版已上线多月，首页各功能入口的点击率均有所提升。环比上线初期时的数据，“扫一扫”入口点击率提升 29.8% ，其次“寄快递”和“电话寄件”点击率分别提升 26.1%和 19.5%。数据结果表明首页采用模块化功能布局，有助于提升核心功能的使用率，通过简化信息内容可以帮助用户聚焦核心功能，减弱信息干扰。总结我们从视觉、操作、认知层面出发，与大家分享了我们 在快递 APP 产品设计中对适老化领域的探索。作为用户体验设计师，发掘用户的深层需求和痛点， 帮助老年用户平等便捷的享受数字生活服务，提升产品的普适性和包容性，是我们的使命。未来，我们还将继续在适老化设计中做更多的探索与创新，聚焦用户痛点和场景需求，改善产品的深度体验，发挥设计价值。在产品体验优化的道路上，让我们一同探索前行。更多适老化设计案例：如何做好产品的适老化和无障碍设计？来看腾讯的实战案例！兔小巢 （txc.qq.com） 是一款由腾讯 CDC 开发的用户反馈互动社区，让腾讯内外各产品团队无需开发即可快速生成专属社区，高效收集用户反馈，并与用户进行深入交流。阅读文章 > 如何做好G端可视化中的适老化设计？我总结了10个注意点！前言调查显示，2020 年我国老年人口达到约 2.43 亿，占比 18%，50 岁以上的网民群体占比 22.8%，G 端可视化面对的主要群体就是政府领导，而政府大领导普遍都是市级及其以上，年纪大多数为 60 岁往上，属于适老化的涵盖范围，因此探索适老化在 G 端大屏中的体阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/sf-app-aging-design
快捷键 操作 用户 前言键盘，在很多人的眼中，就是一个信息录入的硬件设备。但你却不清楚完整的键盘当中，字符按键只占到了整个键盘数量的 60% （完整键盘共 108 键，字符键 65 键）你会发现，键盘除了打字之外，还会有其他很多用途。快捷键，就是不可忽视的一部分。（注：完整的快捷键会包含，快捷组合键与快捷按键两部分，文章就不做过多纠结，意在讨论这样的交互形式，这里简单统称为快捷键。）无论是设计师常见的三件套：Photoshop、Sketch、Figma，还是很多协作类型的产品：Word、PPT。快捷键，仿佛早已是许多产品的标配。但是我们在做 B 端设计时，又时常忽略掉快捷键这一特殊的交互形式。今天我们就来聊聊 B 端产品与快捷键之间的关系。在实际的工作当中，如何设计快捷键？我会产生这些疑惑：一款 B 端产品，有必要去设计快捷键吗？快捷键是否会增加用户的使用门槛？如果想要去做快捷键设计，究竟应该如何设计？我们就带着问题一起来了解快捷键之间的差异。往期回顾：B端设计指南：从 4 个方面帮你掌握「审批」的知识点一直以来，业务都是 B 端逃不开的话题，你可以在许多文章当中看到我们的改版方向是因为业务需求、设计的思路是因为业务需求。阅读文章 > B端设计指南：网页布局方式科普栅格一直都是很多同学非常疑惑的地方，无论是栅格的日常使用，又或者是栅格在整个产品当中的作用，一直以来都有非常多的疑惑，今天就来聊聊栅格在实际工作如何使用，以及产品之间究竟有何区别。阅读文章 > B端设计指南：栅格的定义和使用方法在一个 B 端页面当中，关于栅格的使用方法，你或多或少都会有所疑惑。阅读文章 > 老规矩开始之前，还是先科普一下桌面端与移动端，虽然他们之间存在很多差异，比如，页面布局、交互方式等等… 这些咱们以后再聊。但是今天想贴合主题，聊聊录入设备之间的差异。在移动端的设备当中，我们多数情况下，采取的是软键盘的形式，也就是手机录入是以虚拟键盘的形式存在。这样也就导致虚拟键盘存在一些常见问题缺少快捷键：虚拟键盘无法通过组合键，实现快捷操作录入门槛高：不能对键盘进行精准定位，无法实现盲打键盘的快捷录入功能按键少：在录入标点符号等信息时，需要切换页面进行实现总结下来就是整体信息录入效率低，准确率低。比如我们最常使用的复制粘贴，到了手机当中，只能够通过点击光标的方式来解决。对于桌面端键盘而言，由于我们录入信息的方式是通过双手与实体键盘进行交互，可以实现更多信息的点击。因此快捷键就会有很大的发展空间，这时候就会很好奇，快捷键究竟是如何诞生的？我们简单回顾一下计算机发展的早期，发现快捷键设定其实是源自 “硬件设计上的无奈”。早在 1980 年，IBM 所研发的个人电脑 Acorn，在当时遇到了一个棘手的问题，在电脑产生系统故障过后，它都需要通过手动重启，并且需要很长的时间来进行内存测试，验证计算机是否出现问题。但在公司内部进行系统测试时，并不是需要这样的一个机制。因此工程师 Bradley 在当时创造了一个快捷键：Ctrl+Alt+Del 可以在不需要内存测试的情况下将系统进行快速恢复重置。我们现在回顾，当时作为工程师，他在快捷键的设定上也是进行了很多思考，因为 Ctrl+Alt 键靠得很近，但 Del 则在键盘上的另一边，这样可以避免一些用户在日常使用的过程当中进行误触。而后续 Windows 电脑遭遇蓝屏死机，而 Ctrl+Alt+Del 这样一组快捷键便留在很多人的心中。随着个人电脑的不断发展，你会发现快捷键的设计也越来越复杂，因为我们想要了解如何设计快捷键，必须先知道，常见的按键分类有哪些？常见快捷键的分类目前共有 Windows MacOS 两大操作系统，在快捷键的设定上也会有着许多差异化，文章部分会将 Win/Mac 的系统统一进行讲解，大家可以优先看看关于两个系统之间的映射关系：想要知道我们快捷键的差异，我们必须了解每一个按键的基本定义：Ctrl / CommandWindows 系统当中的核心快捷键，可以理解为是各项操作的快速触发。我们可以使用它去实现各种组合快捷键，比如使用 Ctrl + C（复制） Ctrl + D （创建副本），算是用户使用最高频的快捷键。同样，在 Mac OS 当中，你会发现 Mac 的 Control 几乎很少使用，因为系统本身就没有给它 “安排太多任务” 取而代之的是饱经风霜的 Command 键。Command 作为 Mac 独有的按键，它的地位几乎等同于 Win 当中的 Ctrl，并且两者的快捷键方式都极为类似，因此也就造成两个系统当中的按键差异。ShiftShift 也叫上档键，可将其意为连续的按键，因为在连续选择时会用到，它的功能主要有两点：在中文输入的场景下，可以组合按键进行中英文的切换在文件选中的场景当中，对文件的内容进行快捷选择的操作TabTab 也叫制表键，不过现如今已不再是制表的含义，更多可以为切换按键，比如我们经常使用 Command + Tab 来对软件进行切换。其用途主要有两点：在信息录入时，按下 Tab 键来实现字符的缩进在表格页面当中，通过 Tab 键实现对单元格的快速切换Alt / OptionWin 系统当中的 Alt 与 Mac 系统的 Option 基本一致。他们的主要用途有两点WIN：呼出菜单或点击按钮的组合键MAC：快速访问系统偏好设置中某个选项的组合键如何设计快捷键，是否需要快捷键在我们的设计快捷键之前，需要考虑清楚是否真的需要快捷键。就像我们在网上冲动消费一样，购买的东西总会有当时觉得有用，然后立马吃灰的产品。所以明确需求的目的就显得尤为重要。因为 B 端产品存在太多产品类型，在每一个产品类型当中，我们也会有不同的使用场景。这里我总结了几个维度去思考。1. 高频使用俗话说得到，好钢得用到刀刃上，快捷键的设定，一定是需要用户使用频率高才会有意义。因为快捷键的使用本身就会有使用门槛，如果你做在一些用户本身就不会频繁操作的地方，对于用户而言感知并不强烈。其次你也不想自己花费了精力，到头来设计思路并没有落地。2. 核心功能这里的核心功能其实是针对不同的角色。比如一个在线教育的产品，老师需要每天在产品当中去点评同学们的作业，也就意味着老师需要高频的在点评学生作业，这个时候其实作业点评就是老师的核心功能。那你对这个功能上的操作进行优化，大概率就不会存在太多问题。比如我们以 figma 为例，如果它现在在 Darfts 首页增加了很多快捷操作，如：Command + N 新建画板 、Command+O 打开通知。但是 Figma 并未对核心功能，编辑区域页面当中添加快捷键，我想这对于很多人而言，就是一个糟糕的设计。3. 沉浸场景B 端产品的使用大致会分为三种状态：暂留、沉浸、配置（这里就不展开讲了）。而最常见的便是专注于用户使用的沉浸场景，也就是说，我们必须要让用户在沉浸场景下使用产品，这些快捷键才会变得更加有意义。沉浸及专注，专注就需要高效，因此高效使用快捷键就显得合情合理。归纳整理快捷键的诉求当我们明确真的需要快捷键的诉求过后，我们可以去思考，究竟应该设计哪些快捷键？哪些操作是属于高频操作？是否会存在操作之间的先后顺序？首先可以通过实地观察，先去判断用户在某一页面当中，具体使用顺序或者流程，然后通过流程图将数据内容进行整理。这其实是我们设计快捷键的基础依据。然后通过对页面当中不同操作进行数据埋点，能够得到用户具体的操作信息。通过这些数据信息，能够保证我们在做的设计都是有理有据，而不是拍脑袋的自己随意 YY 出来的。最后拿到数据进行分析，在数据当中并不能够单纯的去看它的点击量，而是要深入了解这个数据它背后的意义是什么？这也是我不建议初级的设计师去做数据埋点的原因。因为我见过有太多设计师拿到数据过后直接不分析上手就看，导致出现太多数据背后的问题。避免冲突在快捷键的设定，我们应该考虑避免与其他快捷键重复。想要解决这个问题，我们必须先搞清楚，产品究竟采取什么架构方式。通常会分为 BS 架构与 CS 架构。这里简单解释一下 BS 架构与 CS 架构的区别BS 架构：（Browser/Server,浏览器/服务器模式）web 应用，可以实现跨平台，但是个性化能力低，响应速度较慢CS 架构：（Client/Server,客户端/服务器模式）桌面级应用，响应速度快，安全性强，个性化能力强，响应数据较快可以简单理解为，目前产品是否需要通过浏览器才能够打开。需要浏览器打开，那就是 BS 架构，不然则反之只有我们确定了具体的产品架构之后，你才能够知道你设定的快捷键是否与浏览器本身到快捷键有所冲突。因为浏览器自身的快捷键权限肯定是会高于你页面当中的快捷键，所以在设计上我们需要格外留意。这里总结了一份浏览器的快捷键汇总，可以通过这个方式避浏览器的踩坑但客户端的快捷键设定，相对会更加开放，因为客户端不会受到浏览器的限制，在快捷键的设定的空间则会大很多快捷键的设定明确清楚上面的诉求与限制过后，接下来我们可以从三个方面，来对快捷键进行设定：1. 语义法在电脑快捷键设定的早期，最常使用的办法便是通过翻译英文单词首字母，进而实现快捷键的设定。比如我们经常使用的 Command+D 进行复制，D 便是 Duplication 的首字母、Command+N 进行新建，N 便是 New 的首字母。这样的设定方式其实源于国外，同样也是我们日常设定最为常见的一种方式。2. 流程法流程法就是去思考整个快捷操作的具体流程，比如我们最常使用的 Command + C 与 Command + V 就是一个例子。因为如果按照常规的设计思路，粘贴在大家的印象当中一定会是 Paste，但是由于复制、粘贴本身就是高频操作，并且两者按键相互关联，再加上 P 也是 Paint 的缩写，Command + P 有打印的含义，因此通过用户使用流程上的思考，最后将粘贴放在字母 V 上面。Viscidity 的缩写，它是一个名词，具有粘聚性、黏性的意思。3. 竞品法如果假设目前设计的产品当中已经存在许多竞品，它们就已经有了相对应的解决方案，这个时候可以考虑借鉴直接竞争对手的按键设计，因为你可以通过这样的竞品设计，让你的用户的切换成本更低，也能够让他们快速上手。举一个例子，比如 Sketch 与 Figma，Figma 的出现本身就是与 Sketch 进行竞争，因此没有必要在快捷键上进行特立独行，反而会增加用户的使用门槛。在哪使用快捷键既然上面讲到了如何设计，咱们还是不得不提一提在 B 端产品当中，哪些地方可以使用快捷键？好方便在读文章的同学们直接抄作业，用在自己的系统当中。1. 详情页编辑详情页几乎是每一个 B 端产品必备的页面。它能够帮助用户进行详细数据的阅读，其核心诉求会分为两种：对表格页当中的信息不太清楚，想要通过详情页进行更为仔细的阅读；对存储的数据有所质疑，想要更改几条数据；因此，分析完了这两种情况过后，我们可以使用快捷键，去满足用户对详情页编辑的诉求，进而可以实现对某一个页面的快速操作。具体做法我们可以按照上一章节讲的，如何设计快捷键的思路。我也举几个例子比如现在对纷享销客这样一款 CRM 产品的详情页进行编辑时，除了思考初级 B 端设计师需要处理的视觉部分之外，你还可以使用快捷键，将详情页的编辑，与按键的字母 “E” 进行绑定，这样可以配合鼠标来完成页面的快速操作，提高 “高级用户” 的操作效率。这样的优化就算是完了么？其实这也是市面上绝大多数教程不会涉及的点。因为他们缺乏 B 端的实际工作经验。也就导致只会教大家如何依葫芦画瓢，教学员去实现某一个页面的具体布局，根本不考虑实际的项目当中的各种诉求与逻辑关系。这也可能是我上课只喜欢去画草图的原因，因为 B 端的“形”很简单，有太多的组件可以支撑你进行设计，但是 B 端的“意”则会过于复杂，很难理解。说了这么多，我们来看看究竟应该如何进行优化？也就是在这个功能新增之下，还会有哪些存在的漏洞？简单列三点：在用户进入到详情页，但并没有编辑权限时，点击了按键 E 应该怎么办？在整体的页面当中，就只绑定编辑操作吗？其他操作需要绑定按键吗？如果需要你会怎么设计？让用户知道快捷键的存在？是简单的信息外漏？还是会有一整套 “机制” 来去辅佐进行解释。这样不断完善，设计方案才能更加完整。大家要记住，虽然得到一个设计结论很简单，但是 B 端系统本身就不是简单去删除列表，去增加更多视觉上的引导。而是你增加了一个功能模块过后，有没有考虑到它在整个产品当中的合理性，是否有具备思考完整的设计思考。不扯那么多了，我们继续～再举两个真实落地的例子：1. 在网页端的 B 站视频播放页面（你可以理解为是视频的详情页），用户可以通过点击 W 为投币、D 为弹幕开关、E 为添加收藏夹、F 为全屏播放，实现对视频的快速操作。而投币、弹幕开关、收藏夹、全屏播放都是属于 B 站最为核心的功能操作，因此这样的设计非常的赞。但 B 站的处理，还是会有小小的瑕疵。会有很多用户对于这样的快捷操作并不知情，可以考虑在入口提示上，进行对应的简单优化。当然这样的产品还会有很多，比如 Youtube、抖音网页版都采取了这样的设计，大家可以自己去查看总结一下不同产品的特点。2. Salesforce，还没开始对它进行调研的时候，我其实就能够猜到作为世界上如此出名的产品，肯定会有快捷键的设计。但随着调研的深入，发现在早些年间，它并没有进行快捷键的设计，因此受到很多用户的 Diss。随之便有人自行开发一款浏览器插件来实现对应的功能。而在后续的产品迭代当中，SF 逐步更进了这一功能，通过快捷按键，可以实现多个功能。逐渐将快捷键的方式放在整个系统当中，得到更多人的认可。目前形成了这样的一个完整快捷键体系。表格页新建在表格页当中，我们最常使用的便是新建操作。同样可以按照详情页的思路，将整个页面当中的新建操作进行键盘按键绑定，实现快捷操作的效果。比如在飞书管理后台的成员与部门页面当中，我是否可以通过点击 N 实现快速添加成员的操作？通过这样的方式就能够保证，用户的快速按键操作。其实这里还可以将问题再稍稍加深，我们是否还可以考虑一些新的方式？比如全局新建，在整个系统当中提供一个全局新建的入口，让入口更为统一，甚至可以实现全局键盘操作的“梦想”。又或者是通过快捷键呼出全局搜索，进行实现对应的操作？类似于 Notion 这样的产品，这些都是可以去思考的方向。导航菜单切换在 B 端产品当中，导航菜单的设计是最痛苦的一件事。因为一个员工，想要完成自己的工作，就必定会在不同的导航菜单之间进行来回切换。在 2022 年的趋势这篇文章里也讲到，越来越多的 B 端产品开始变得臃肿。也就意味着用户需要不断寻找、不停的切换导航菜单，来完成这个角色自身的工作，因此针对臃肿的 B 端产品，我们可以使用快捷键来实现导航菜单的切换。这里给到几个产品的思路，大家可以学习借鉴一下：比如常见的飞书，因为本身是 CS 架构（客户端），因此可以通过组合键的形式，来实现对导航菜单的快速切换。飞书通过按住 command + 1、2、3 … 来实现切换。钉钉则在这部分就缺少了这样的设计。而薪人薪事的做法则会有所不同，它的入口非常特殊，采取全局导航的形式（这个后面会单独出导航菜单的文章来进行讲解），将整个入口进行绑定，通过双击 command 对导航中心进行呼出，并且后续可以支持更多导航菜单的切换，这也是一个不错的思路，值得大家借鉴。全局功能在你的系统当中，一定会存在一些全局影响的功能。它会影响到系统当中的每一个角落。比如 CRM 系统里面的通讯录、消息、邮件。它本身和主营业务差别不大，但是由于业务发展等其他关系，需要单独处理。因此会有很多全局使用的功能，这时候便可考虑将其与快捷键进行绑定。比如明道云，因为在明道云的整体设计当中，消息、通讯录都是游离产品架构之外的一些协作内容。因此名道云将其通过快捷键的方式进行查看，进而实现页面的快速呼出，能够加大用户的使用效率总结：分享了过后，最后再唠一唠我的自己感受。其实快捷键是一个非常立竿见影的设计提升方式，我们除了去想清楚快捷键应该如何设计之外，更多还需要让用户能够发现有这样快捷键。虽然 B 端产品我们可以通过客户培训、新手引导、帮助文档的方式来教会用户，但是快捷键这样的一个功能本身是针对中、高熟练度的用户，也就意味着，你需要不断的去培养用户养成快捷键的习惯，这样才能够保证，快捷键能够真正的被用户所接受。其实现如今出现了很多无障碍的设计，大多数情况下都是在讨论如何脱离鼠标进行快捷的操作。其实比起无障碍，快捷键应该能够出现在更多 B 端产品当中。最后做个总结：我们常见的常见快捷键会分为：Ctrl、Command、Shift、Tab、Alt、Option如何设计快捷键？首先要去判断是否需要快捷键，共有三种判断方法、高频使用、核心功能、沉浸场景。其次要去归纳用户的快捷键诉求，想清楚快捷键的使用场景，避免与其他软件冲突。接着去想想究竟怎么设计快捷键？可以使用语义法、流程法、竞品法。最后我们可以在哪使用快捷键，能不能抄一抄作业？可以在详情页编辑操作、表格页新建操作、导航菜单的快速切换、以及全局的功能操作。唯快不破！可能是最全面的PS快捷键使用指南（图文演示）@阿随向前冲 ：看完这篇，帮你掌握最常用的32个Photoshop 快捷键。阅读文章 > 我是 CE 青年，一个 2 B 行业 的 2B 设计师欢迎关注作者的微信公众号：CE青年交互设计本篇来源：优设网原文地址：https://www.uisdc.com/shortcut-keys-design
用户 感官 动态 动效在 UI 设计场景中的运用强化了感官层面的体验，也使得交互设计更加易于理解，通过动效辅助功能操作的理解度。近期在体验产品的过程中，观察到了一些微动效的优秀案例，分享出来和大家一起探讨。拖拽头像营造趣味性体验头像属于个人中心的标配，通常不会带有互动体验，只会在装饰性设计上面营造氛围。最近在体验即刻 APP 的时候，个人中心头像可以长按拖拽，拖拽过程伴随着震动感，释放后弹出表情符号。带有互动体验感的头像增加了个人中心的互动感，趣味性的设计带给用户更高的亲和力。动态形象提高关注度品牌利用人物形象代言产品或者服务比较常见，在一些局部功能或者服务模块也会结合人物形象，带给用户更强的亲和力。通常的做法是静态展示，动态形象相对较少。开言英语 APP 学习模块中，顶部“立即测评”区域的人物形象采用动态形式，虽然只是简单的手势指引，也比静态图片带来的关注度要高。利用动态形象提高模块的关注度，也使得设计更加生动有趣。动态空状态趣味性更强空状态从文案提示到情感化设计的演变，从细微之处带给用户更好的感官体验。为了提高产品的体验，各种状态提示设计也在不断优化创新，利用动态的形式提高趣味性也是一个可取的方向。COVES APP 在空状态界面利用带有动态的形象进行设计表达，使得原本枯燥无趣的界面变得生动有趣。提高了用户的关注度，也提升了设计的感官度。动态极光风按钮设计极光风效果设计是近些年在 UI 设计中较为流行的趋势，不仅可以丰富视觉表现，也能使得产品设计更加年轻化。被广泛运用于背景装饰、卡片式装饰、弹窗设计、图标设计、按钮设计等场景中。优酷 APP 在会员栏目中，将打卡按钮以动态极光风效果进行设计，提高了按钮的关注度。设计风格显得更加年轻化，动感的表达形式打破了按钮设计的常规表达，带给用户更高的感官体验。动态引导提高关注度针对新功能或者重点功能在设计的时候，都会进行引导式设计，以此提高用户的关注度。除了通过设计的视觉化增强和浮层提示以外，动态的引导设计也是不错的选择。优酷 APP 在用户主页为了提高用户发布视频的参与度，每次新进页面就会以动态形式弹出引导设计。提示用户“抓住你的创作灵感”，青春活泼的视觉风格和动效的双重强化，提高关注度的同时也增强了用户的感官体验。带有互动感的品牌墙设计品牌 LOGO 展示常见的形式都比较中规中矩，横向或者纵向均以排版整齐为主。最近发现一个比较新颖好玩的品牌墙展示，结合互动性营造趣味感的体验。开眼 APP 在品牌墙展示 LOGO 时，使用圆形带有动态的形式，类似于一堆气泡相互碰撞，还能拖拽进行互动。停留时 LOGO 会自动飘起来，漂浮到界面顶部，真实感和互动性较强。该设计形式不仅打破了常规，也带给用户十分有趣的互动体验。弹幕强化内容关注度弹幕出现在视频播放中相信大家已经很熟悉，可以增强观看视频的互动性，也能激发大家的话题参与度。弹幕的运用不局限于视频，还能用于增强内容的关注度。LOFTER APP 首页在话题栏目中，单个内容区域增加了弹幕设计，提高了内容的关注度和氛围感。弹幕设计也可以出现在社区中，营造社区的氛围感。自如 APP 在发现生活栏目顶部视觉区域也运用了弹幕设计，以此来提高自如社区的氛围感，吸引更多用户参与分享和评论。卡片式轮播的色彩变化为了提高用户的关注度和强化信息的对比度，在设计的时候都会在背景层和信息设计层强化，针对卡片式设计在背景层强化是一个不错的方向。MOO 音乐在主题电台栏目，针对横向滑动切换的卡片背景做了色彩变化。利用极光风效果处理的同时，滑动的时候背景也会进行变化，色彩变化过渡自然，表现形式新颖独特。动画引导效果更直观针对功能或者业务进行引导设计，有助于让用户更快的理解，便于操作。提高引导设计的关注度和理解度，降低学习成本是设计的目标。MOO 音乐在引导设计的时候采用动画形式表达，传达意思更加直观清晰。动画的形式更能吸引用户观看，达到更好的信息传达目的，也能提高产品的感官体验。动感的音频波动打造独特记忆点音乐带来的不只是听觉体验，也有视觉享受的一面，让用户沉浸在音乐的氛围中。MOO 音乐在播放界面设计中，底部配合音量的大小弹出音频波动条，带给用户视听双享受。音频波动条采用不同的元素进行设计，体现不同音乐的差异，带给用户独特的感官体验。差异化的设计表达也能打造独特的记忆点，让用户在众多的音乐产品中形成独特的记忆。小结本期感官体验日记主要总结了动效范围的内容，根据特定的主题范围去体验分析，也能提高自己发现设计细节的能力。从细微之处体现设计差异，带给用户更强的品牌记忆和感官体验。本期分享到此结束，仅为个人角度的体验总结，希望可以带给大家更多灵感启发。超全面！腾讯出品的交互微动效设计指南本设计指南适用于UI界面中交互微动效，涵盖入场、出场动效，过渡动效和加载动效，在时间和缓动曲线的选择上提供了一些通用的设计建议，帮助设计师理清动效设计思路，提高设计效率。阅读文章 > 欢迎关注作者的微信公众号：「黑马家族」本篇来源：优设网原文地址：https://www.uisdc.com/micro-motion-design
文案 产品 用户 一、被忽视的 UX 文案在很多体验设计师的认知中，产品界面上的文案是设计中最细枝末节的事，往往会被忽视。大部分时候，能让用户理解的文案就是合格的。而什么是好的文案，没有一致的评价标准，在复杂的业务场景中也很难做出判断。文案看似小到微不足道，但在某些设计领域却完全不是这样。比如在品牌设计中，好的文案可谓“一字千金”，为企业带来了不可估量的商业价值：比如说耐克的「JUST DO IT」和 苹果的「Think Different」，向消费者传达了品牌的独特价值。这些文案与品牌 Logo 一样，是极具识别性的品牌资产。作为品牌的识别物，它的价值是长效的。从消费者接触文案到产生购买行为，中间的过程可以很长，文案在长时间不断的曝光中巩固了大众对它的认知，最终促成购买行为。因此，品牌文案要有较强的记忆点和传播力。产品界面上的文案（UX 文案）与营销场景的文案很不一样，它带有很强的短期功能性，目的是帮助用户或产品后的企业达成短期目标，每段文案起作用的时间短则几秒，长不过几分钟。例如这个确认对话框，用户做出判断只需要几秒钟，之后它就消失了，可能很久都不再出现，几乎不会给用户留下印象。正是因为这种特性，UX 文案不像营销型文案一样受到关注。在一个产品中，可能只有像活动页标题、主要行动点这样与流量和转化直接相关的文案被仔细打磨过。剩下那些具备短期功能性的 UX 文案，成为体验中被忽视的小小一环。二、用户与产品间的对话UX 文案本身不重要吗？这样想很容易踏入误区，也无法解释近些年来 “UX Writer” 岗位的出现（除微软、谷歌等国外巨头外，最近国内也出现了这个岗位）。在产品使用过程中，UX 文案的效用并不亚于交互逻辑、视觉表现等要素。那些 “合格的” UX 文案的确不会给用户留下印象，但不合格的文案却会以一己之力摧毁整个体验。想象一下，在工作场景下，当用户因为误解一段文案而执行了不可挽回的操作，文案撰写者显然要为此承担责任。体验设计师是用户界面的把关者，负责合理传递和接收交互过程中的信息，而文案则是信息中最直接的一种。理解 UX 文案、写出“好的”而不仅限于 “合格的” 文案，是 UX 设计师需要掌握的能力。但是设计师如何界定什么是好的文案呢？许多成熟设计体系中都对它做了一些定义，比如统一的格式、合理的语法、一致的用词等。这些定义最终具象为一条条规范，在应用时成为判断正确与否的标尺。而这些规范有一个源头，即人物性格与语气 （Voice and Tone)。理解这个概念需从 UX 文案的本质说起。UX 文案本质上是发生在用户和产品之间的对话。在人类信息传递的历史上，对话的出现比图形要早得多，但设计师往往富有对图形的观察力和想象力，却忽视对话的作用。想象一下，用户与产品的交互，就是对话发生的过程。此时产品不再是一个冷冰的机器媒介，而是一个人，他/她的存在是为了帮助用户实现目标，而他/她的行为意志则基于产品身后企业的目标。既然是对话，便有双向性：为了让用户能够实现目标，产品会在合适的场合说特定的话（指导、激励、安慰、帮助…），而用户也需要把自身的需求告诉产品，只是这些需求已经被提前预判，成为选项提供给他们——这样的对话是可以持续下去直到用户和企业都达成目标。而那些不能够进行下去的对话，可能是产品没有说话、说话的时机不对、说话的内容不对，也有可能是产品提供给用户的预判并不是他们真正想说的话。一次用户与产品间的对话没有通过预判给用户选项，对话无法持续要让这样的对话更具象，直到能够转化为界面上的文案，我们需要有对话双方更真实的人物形象和场景进行支撑。从使用者这一方看，设计师可以通过访谈、问卷、可用性测试、行为数据分析等方法接触用户，形成“用户画像”和“用户故事”。但从产品这一方看，则需要为无生命的代码创造一个虚拟人物形象，赋予他/她特定的性格，以及这个性格在不同场景下的表现形式。回到上文所说，大部分 UX 文案只有短期功能性，完成了它的功能就消失，不会给用户留下什么印象。但是，如果产品背后有一个强大而统一的人物形象，那么在用户日复一日的使用中，他们能感受到这种特质，它像品牌一样能延续、有价值、有影响力，这个特质就是产品的人格特性。就像一个长久没联系的老友，我们无法复述当年一起说了什么话，但这个朋友带给我们什么感受，一下子就能想起来。我们遇到一些事时，他/她会如何说如何做，我们也能想到。好的 UX 文案让用户与产品之间的关系就像这样。人格特性带来的持久感受三、什么是人物性格与语气1. 人物性格 (Voice)产品的「人物性格 (Voice)」是指用户在与产品交互的过程中，从产品文案中感受到的产品背后的人格特性。这种特性是持续且鲜明的，使用户感受到自己与产品出现某种情感联结，让这款产品的体验在其他竞品面前是可辨认的。稳定的人物性格决定了产品文案的调性，它与产品的视觉调性是契合的。[1]下图中，在类似情境（评论留言区为空时）下，Adobe Acrobat 和 Zeplin 的文案表现出截然不同的人物性格：Adobe Acrobat 冷静干练，Zeplin 则活泼幽默。Adobe 和 Zeplin 对文案的处理一款产品的视觉调性一般由 UI 设计师负责，而产品的人物性格（文案调性）则由体验设计师或 UX Writer 负责（微软、谷歌、Adobe 等许多公司聘有专职 UX Writer 负责文案撰写，有些还聘用语言学家进行指导）。人物性格至关重要，需要组织中的各角色达成共识，然后作为设计体系 (Design System) 中的基础。Confluence 和 Jira 背后的公司 Atlassian 有一套非常注重文案的设计体系[2]，他们定义的人物性格是：勇敢、乐观、实用（且有趣），并且始终如一地为我们的用户提供一致、友好、有用的指导。Atlassian 的设计师在分享时提到，在一开始定义人物性格时，设计师团队与市场团队之间出现明显的分歧，经过长时间的沟通后才最终达成一致。尽管过程不容易，但结果价值巨大，因为 Atlassian 是一家以收购外部产品为战略的公司，能否高效地将外部产品整合到已有生态中、打造一致的体验，极大地决定了收购能否产生预期的价值。2. 语气 (Tone)人是根据场合来调整语言的，例如同一个人在家与父母唠家常时的语气与在工作时和同事开会的语气显然是不一样的。如果说人物性格是文案中的常量，使语言风格始终一致且可辨认，那么「语气 (Tone)」就是其中的变量，根据场合和受众相应变化。根据场景（报错、庆贺成功、提供通知…）和对象（不同类型的用户）定义相应的说话方式和表现，能让产品文案更加灵活变通，使其在特定情境中发挥更大的作用。举个例子，Mailchimp 是一个提供电子邮件营销服务的平台，以黑猩猩 Freddie 作为其代言人。Freddie 的性格定位是：直言不讳（plainspoken)、真诚 (genuine)、翻译者 (translator)、幽默 (humor)。 [3]Freddie 会根据情况强调或弱化性格的某一方面，比如庆贺活动邮件发送成功时，他会幽默地想要与你击个掌；而遇到错误时他则会很真诚地向你道歉并提供帮助。Mailchimp 在不同场景下的文案体现语气差异我们可以用一条从“消极”到“积极”的轴线代表语气的变化，将每一段文案放在轴线的特定位置，上面 Mailchimp 的例子中，左边的文案会在积极侧，右边的文案在消极侧（这两种出现的概率都不会很高，大量文案会处于轴线的中间地带）。在轴线的基础上，Adobe 的设计体系[4]中对语气做了更细致的划分：激励的(Motivational)、帮助的(Helpful)、指导的(Instructive)、安慰的(Reassuring)、支持的(Suppotive)。不同语气出现的频率不一样，其目的和态度也不同。比如基于 Adobe 定义的人物性格（理性、人性、专注）， “帮助型” 语气对应的文案需要精简干练，以使用户快速达成目的，而 “安慰型” 语气对应的文案需要增加专业性和可信赖度，以解除用户的焦虑感。不过一段文案的语气也可能更加复杂，或许是某 2 种、甚至 3 种情感的结合，也或许位于两种语气的中间地带，需要写文案者对用户和场景有更敏锐的觉察。四、人物性格与语气的价值人物性格与语气为文案优劣的评判提供了场景化且有趣的标准，相比其他繁琐的细节规范，它更易于记忆、传播和沟通。为产品制定人物性格与语气，是规范文案表达的开始，也是后续所有文案规范的基础。人物性格与语气对企业的价值可以归纳为以下三点：增强产品亲和力：人物性格与语气的良好应用，能够让建立用户与产品之间的情感联结，让用户体验变得可辨认，以提高品牌忠诚度；增强体验一致性：帮助不同部门、不同职能的团队成员撰写风格一致的、符合产品特点和视觉调性的产品文案，增强体验一致性；降低学习和沟通成本：完整的文案规范对设计、产品、运营新人来说学习成本大，但人物性格与语气直观、易上手，能够显著降低学习成本和跨部门沟通成本。下一篇开始，我们将会以酷家乐云设计工具为例，展示从 0 开始创建人物性格与语气的过程，敬请期待。参考资料：[ 1 ] Lies, E. (2020). Strategic Writing for UX: Drive Engagement, Conversion, and Retention With Every Word: Torrey Podmajersky [Book Review]. IEEE Transactions on Professional Communication, 63(4), 404-405.[ 2 ] Atlassian voice and tone principles: https://atlassian.design/content/voice-and-tone-principle[ 3 ] Mailchimp voice and tone: https://styleguide.mailchimp.com/voice-and-tone/[ 4 ] Adobe Spectrum voice and tone: https://spectrum.adobe.com/page/voice-and-tone/文中的数据均已做模糊处理, 非真实数据, 仅作为演示用途, 对数据呈现不负相应责任。UX文案怎么写？来看看谷歌的方法总结写作是很容易的，你要做的就是删掉那些错误词句。阅读文章 > 欢迎关注公众号「酷家乐用户体验设计」本篇来源：优设网原文地址：https://www.uisdc.com/ux-copywriting
标签 用户 内容 Tabs 标签页又称选项卡（以下简称标签页），它是一种高效的屏幕空间利用手段，映射非常接近卡片的目录索引，用户可以基于索引标签，快速定位到目标中内容中去，这也是大多数用户来自现实世界的经验。在 Web 页面中，它的使用场景也较为简单，当页面的内容信息量较多，用标签页可以对其分类，一方面可以提升查找信息的效率，另一方面可以精简用户单次获取到的信息量，用户更能够专注于当前已显示的内容。本文从标签页的「基本原则」和「使用避免」两个维度，总结 10 个我们所要注意的一些规则和方法，如果遵循这些原则，它不仅能够快速、高效帮助用户完成任务，也会让我们设计的体验更好。由于 Tabs 标签页涉及到的端设备及内容较多，本文只讨论 Web 端内标签页的使用情况，不讨论浏览器级别的标签和导航标签设计等。基本原则1. 标签的文案应当是简短且高效的标签的文案应当简短，做到让用户快速识别标签的文案需要尽可能使用简短的、概括性强的关键词，如果使用较长的文案，那么对于用户阅读和区分这些信息都是一个不小的挑战。标签文案需要有明显的区分，避免用户产生歧义；在词语上优先使用名词而不是动词，因为动词让用户误以为这是可以行动的按钮。标签的文案应当做到高效展示标签的信息展示传达应当高效，比如不要让标签文案分开展示，如下图的标签页的状态和数量两组信息较为割裂，用户会做短暂思考关联下方内容的是状态还是数量。如果设计的样式与常规标准差异较大，用户就会产生疑惑，所以对于用户已形成的行为习惯，尽可能避免改变。2. 已选中的标签应当是唯一的且足够突出已选中的标签应当是唯一的标签页之间是相互独立且互斥的，一次只显示一个标签的内容信息，不会出现点击一个标签页，出现两个甚至更多标签的详细信息。一般默认选项为第一个标签页，而如果没有给到用户预选择的情况，也会让用户感觉困惑。同时关联的详细内容区域宽度应该是等同的，切换不同的标签，不要改变其内容宽度的大小。已选中的标签应当是足够突出确保已选中的标签页足够突出，让用户一眼就知道了当前选中了哪个选项卡，特别是当只有两个标签页的时候。可以通过字体大小、颜色、粗体等在增加已选中的视觉权重。3. 标签页版面延伸到内容区域，可加强标签与内容的关联性如果将选中卡片式标签页背景颜色和内容面板背景保持一致，就能够做到增强选项卡与内容之间的联系感。4. 标签页的位置和排序，应当基于人的阅读习惯位置：强调或需要引起用户的注意，请把它放至顶部因为人的阅读习惯是从左至右、从上到下的顺序浏览，所以相较于底部或左侧的标签页，顶部的标签页具有更强的视觉引导并引起用户的注意。相反如果用户不太关心，甚至很少切换这些标签页，可以考虑将它们放至底部。排序：重要的、使用频率高的标签应当放至前面如上所说，人的阅读视线从左到右，所以应当将重要的、使用频率高的或者按照逻辑顺序往前排，通常默认选项（一般为左侧第一个）是用户进入页面看到的第一个标签页，因此它的信息应当是最重要的、或者应当是用户使用频率最高的。以下是以京东关于商品详情的一个排序，用户看到的第一个标签页是关于商品的介绍，第二个标签页是商品的规格包装，第三个是该商品提供了哪些售后保障等等。使用避免1. 避免使用图标作为标签页文案在一些场景下，图标有时反而会让用户误解标签的信息，如果要用请全部添加，不要只针对部分标签选择使用图标。使用时仍需注意，将图标放至 tab 标签的左侧。2. 避免截断标签文案，并且让它们有足够的点击面积避免截断标签左侧的文案，减少的文本会阻碍用户对于信息的识别和理解完整的标签信息，可以帮助用户快速识别当前的位置。如图左侧标签内容的减少，会妨碍用户对于信息的理解，反而会降低标签的可识别度和操作切换的决策成本。标签页应当有足够的面积，避免让它们进入紧凑模式每个标签页都有层级引导的作用，需有一定面积来展示标签信息。比如像浏览器的标签页特别多时，会给用户使用带来两个问题，一是可点击区域非常小，精准点击较为困难；二是标签获取到的可用信息非常少，甚至有时只是一个图标，当然对于浏览器，我们完全可以重新打开一个新窗口，来解决这个问题。3. 避免数据为空，就不显示这个标签页一般情况下，如果将标签页作为数据信息分类展示时，即使该标签下没有数据，该标签也是需要显示的，否则用户就永远不会知道有这个标签页的存在。4. 避免标签页，在内容较少或者作为比较时使用避免将标签页用于很少的内容分类，因为会降低信息的展示效率标签页本就是为过多内容信息而采用的一种分类方式，如果一个 tab 下只有几段文字或者几组录入数据信息，可以考虑在一个页面内展示这些内容，不仅可以提高屏效，还可以减少操作上的切换成本。如下图，简单的三组数据信息，我们就可以将它们放在一个页面中，通过卡片来区分它们。避免将标签页用于比较不同类别的信息，因为它会增加用户的记忆负担因为用户通过切换标签页去比较这些信息时，短暂记住这些内容是一件非常困难的事情。所以对比不同类别之间的内容，可以考虑在一个页面展示，如下图就是苹果官网在一个页面显示的 Mac 机型比较，可以同时对比三款机型的信息。5. 避免嵌套标签页，如果使用请加大他们的层级关系避免在 web 页面中嵌套标签页，因为嵌套后层级较为复杂，可能会造成信息的混乱，用户记不住已访问过哪些标签页。如果有嵌套 tab，请在视觉上加大他们的层级关系，并且尽可能减少一级 tab 的数量。6. 避免复杂内容标签页，用户直接删除在表单中，如果删除该标签页后，会给用户造成工作负担，甚至会丢失一些数据，这时的删除操作需要给用户反馈提醒，给到用户二次确认是否删除；如果删除该页签后，对于用户几乎没有任何负担，或者再次输入的成本较小时，不建议使用二次确认，因为这时给用户带来的操作干扰远大于误操作成本。比如下图 Microsoft Excel，当标签页签有内容输入时，删除会需要用户二次确认，而当页面内容为空时删除不会给用户任何提醒。在具体的业务场景中，我们需要结合用户的删除频率、误操作成本以及删除组件的干扰三者之间找到一个相对平衡点。总结以上就是标签页在设计中我们所注意的一些事项，如果遵循这些用法，不但解决信息的堆积问题，也能够大幅提升页面的清晰和可用性。而如果我们发现用户很少去点击这些标签页、或者使用经常出错，就需要考虑这些标签页是否使用得当，或者违反了上述所说的一些基本用法。以上举例覆盖的场景不一定全面，不过我们最终的目的还是通过标签页这个组件，去引导用户将视觉聚焦于页面内容。参考文献：张亮《细节决定交互设计的成败》尼尔森诺曼，《Nielsen Norman Group》从3个方面，分析总结标签设计的体验细节！在移动端产品中，标签不是核心内容，甚至有点不起眼，但是谁都无法忽略它的存在。阅读文章 > 欢迎关注作者微信公众号：「小高杂谈」本篇来源：优设网原文地址：https://www.uisdc.com/how-to-use-tabs
用户 位置 信息 我们比较喜欢做新的功能（或产品），因为可以在较短的时间内看到效果，更具挑战性，仿佛也更能体现一个人的能力。尤其在现在这个人人提倡敏捷开发的时代，大家都在拼命的往前赶，生怕自己落后于竞争对手，被竞争对手新的功能优先抢占了市场，所以经常忽略了现有功能的用户体验。如果开发完一个功能，就把它丢在一边，浪费了人力、财力不说，还有可能因为不好的用户体验，不仅没能吸引更多的新用户，还会造成存量用户的流失，那真是得不偿失啊。既然提升现有功能的体验那么重要，我们又该怎么优化现有功能、提升用户体验呢？我总结了一个方法，提升用户体验三步曲，方法仅供大家参考，如果不合理之处，请大家予以指正。该三步曲的内容为：我现在在哪？即现有功能存在哪些问题？我要去哪？即针对存在的问题设定目标，也就是我们想要达到怎样的效果？怎么去？即解决方案是什么？下面，我将通过一个实际案例来简单介绍下，优化现有功能、提升用户体验的三步曲。我现在在哪？为什么要先明确我现在在哪，明确产品当前存在的问题呢？这就好比医生给病人看病，只有明确了病人的症结所在，才能对症下药。我们一起来看下下面这个案例。现在的 app 一般都需要获取用户的位置权限，通过用户的定位进行个性化的推荐，提供精准的服务，给用户带来了良好的体验。我自己也习惯在使用 app 的时候，默认允许 app 获取我手机的位置权限，这样就可以根据自己的位置筛选需要的信息了，非常之高效。可是，这么实用的一个定位功能，如果做的不好，很可能会遭到用户的吐槽、投诉，甚至是用户的流失。现在有一个线上预约洗车的功能，用户可以先在线选择洗车地点、洗车时间，填写其他必要的信息，完成预约操作。预约成功后，就可以在预约时间至该洗车店洗车，这样可以大大节省用户到店等待的时间。既然需要线上选择洗车店，那么就需要有个“附近洗车店”的查看功能，该功能可以根据用户的定位由近到远展示附近的洗车店（这里主要介绍定位问题，暂不考虑用户手动搜索洗车店等情况），所以需要先获取用户的当前定位，才能准确的显示附近的洗车店信息。可是，用户虽然开启了 app 获取手机定位的权限，却未开启手机的 GPS 定位，此时，该页面因为获取不到用户的位置信息，一直处于 Loading 状态，直到 1 分钟后，才弹出“获取位置失败，请检查您的获取位置权限是否开启”的提示信息。这个功能存在的问题，主要有以下 3 点：响应慢，在获取不到用户的位置信息时，在 Loading 状态停留了 1 分钟，这个时间也太长了。有研究表明，在=1s 的时间显示反馈结果，用户会明显地感受到延时；若是>10s 以上，用户极有可能直接转身离开了。而在移动端，时间的标准还会更短，通常的说法是“3s 等待”，即在移动端，若超过 3s，用户就会转身离开了。提示信息不明确，该提示说让用户检查获取位置权限是否开启，可是用户明明已经开启了 app 获取手机定位的权限。操作路径较长，没有提供用户直达开启位置信息的入口，用户需要先离开 app，再去打开位置信息开关，最后再返回到 app 进行操作。我要去哪？明确了存在的问题，那么我们的目标也就清晰了。针对上述 3 个问题，我们设定的目标是：快速响应，响应时间
用户 首页 差异 我最近看了很多大厂/名企的改版复盘后，我发现一个很常用也很好用的设计思路，那就是：用户分层国内大厂的产品大多综合性越来越强，例如卖菜的打车 APP、做直播的音乐 APP、做家政的外卖 APP……为了满足用户需求的较大差异，页面设计不得不变得越来越臃肿。如果设计得好，产品看起来就会像便利店一样，感觉便利快捷。如果设计不好，产品看起来就会像杂货铺一样，整个乱七八糟；由于用户需求差异过大，如果只用一套界面作为首页，难度极高，也很可能导致所有用户都不满意。为了确保几类主流用户的体验，很多产品都会在设计上进行用户分层。简单来说，就是给不同的用户展示不同的页面。这个概念一点也不新，甚至对于信息型产品来说，给用户推荐不同的内容是最基本的。例如同样是视频网站用户，喜欢游戏的和喜欢追星的，看到的内容差异就很大。但是这种内容差异化，属于用户分层运营，并不需要多套设计方案，只要往一个页面塞不同内容就行了。今天我们要讲的，是用户分层设计，必须提供多套设计方案才行。用户分层设计不同于用户分层运营如果只是内容需求不同，用户分层运营就可以了，并不需要设计多套页面。但如果是用户习惯和常用功能上的差异，那就很难用同一套页面框架来应对了。举个例子，喜马拉雅会员购买页，已购和未购状态的就有差异。对于未购用户来说，这个页面主要是展示运营活动，吸引用户下单。而对于已购用户来说，这个页面主要是展示会员服务，并提醒用户续约。这两种状态，如果做简单点也可以合并成一套框架，把文案、按钮之类的换一换也行。如果做复杂了，有时会感觉比较难合并，合并后维护成本反而更高，得出两套设计方案。不同类型的产品对于用户分层设计，有不同的处理方式，大致可以分成以下三类：整体分层局部分层自主选择接下来我就用具体的案例，给大家讲一讲这三种用户分层设计方式：整体分层58 这个产品，有人说是找工作的，有人说是找房子的，还有人说是找家政维修的……以上这种差异，其实也还是可以通过用户分层运营来解决。但是 58 真正的复杂性在于，用户使用习惯的差异：预装型用户是被动地发现自己手机上有这么一个 APP，并不了解功能，需要首页能够快速展示其功能价值，并吸引留住用户。服务型用户把这个 APP 当功能型产品使用，打开时通常有明确的目的，例如找家政服务的。内容型用户把这个 APP 当信息型产品用，打开时目的不是特别明确，大部分时间在浏览查看，例如求职看岗位。58 自己的设计团队也意识到了用户差异的问题，于是设计了三套首页。虽然三套首页都用一些通用组件，底部也都是瀑布流，但是布局和模块都有差异。仔细看看，你会发现预装型首页模块更加丰富，能够更多地展示功能价值，吸引用户尝试使用。服务型首页功能模块更加精简，重点更突出，使用起来更加快捷方便。内容型首页强调信息的展示和社群入口，功能入口反而是露出最少的。局部分层作为投资理财类产品，蛋卷基金对于用户分层做得更细致。购买基金的用户之间，最大的差异是未购买过的用户和已购买过的用户，前者更需要学习引导，后者更需要了解行情。虽然这两大类里面，也还是有很多小类别，但这些是有办法用页面内的模块设计解决的。所以最终蛋卷基金只在信息展示区块进行用户分层设计，并没有做整体差异化。改版上线效果，也是很不错。自主选择前面说的案例，都可以根据渠道来源和使用记录来进行对用户进行自动归类，并进行差异化设计。但有些时候，用户的区别很难自动判断，这时就需要让用户自己选择了。例如智联招聘 APP，进去后就会让你选择身份，进去后的流程和界面完全不同。起点阅读 APP 也允许用户自主切换页面样式，提供了图墙和列表两种形式来展示信息。他们之所以不提供一个统一的方式，就是因为数据发现，这两种模式的数据表现一半一半。既然用户各有喜好难以找到好的统一方式，就干脆都放出来，让大家自主选择。总结大部分情况下，我们都是希望方案越少越好，所以会尽量在首页上满足各类人群的需求。但是对于一些用户群明显较为复杂的产品，进行用户分层设计，反而比统一方案更简单。如果真的遇到反复讨论都举棋不定的情况，那就可以考虑考虑使用用户分层设计了。想成为高薪的增长设计师，先学会用户分层！用户分层是用户运营中常见的一个概念，简单理解就是指将用户分为不同类型，并根据不同用户提供差异化的内容和服务。阅读文章 > 欢迎关注作者的微信公众号：「体验进阶」本篇来源：优设网原文地址：https://www.uisdc.com/user-stratification-design
用户 原则 尼尔森 尼尔森设计原则是人机交互学博士 Jakob Nielsen 于 1995 年发表的“十大可用性原则”。尼尔森博士分析了两百多个可用性问题而提炼出的十项通用型原则，它是产品设计与用户体验设计的重要参考标准，值得每个交互设计师理解与思考。今天把尼尔森设计原则结合一些产品案例进行总结：用超多App 案例，帮你掌握尼尔森十大原则谈到我们生活中的那些产品和服务，它们常伴于我们左右，影响着我们的生活，与我们处处相关联，同样的这些产品也会影响我们的感受，我们常常在使用时会感到喜悦，也偶尔会在使用另一些产品时会感到不舒服，这些感受都是由产品和服务的体验直接决定的。阅读文章 > 原则一：状态可见性原则系统应该让用户时刻清楚当前发生了什么事情，也就是快速的让用户了解自己处于何种状态、对过去发生、当前目标、以及对未来去向有所了解，一般的方法是在合适的时间给用户适当的反馈，防止用户使用出现错误。沟通是所有关系的基础，无论人还是设备。产品应该通过在合理时间内的适当反馈，向用户通知正在发生的事情或者当前的状态。用户知道系统在做什么用户知道自己在什么位置用户知道下一步操作应该去往哪里产品名称：抖音体验说明：图一是抖音用户双击点赞后的反馈图，图二是抖音收藏成功后的提示图解释说明：利用提示语、icon 图标等方式告知用户自己的操作“成功”；图三，手机信号出现问题加载失败的时候也会告知状态。告知的方式有很多，除了图中的图标、文字等，还有声音、震动、动效等方式。原则二：环境贴切原则软件系统应该使用用户熟悉的语言、文字、语句，或者其他用户熟悉的概念，而非系统语言。软件中的信息应该尽量贴近真实世界，让信息更自然，逻辑上也更容易被用户理解。产品名称：豆瓣 FM解释说明：音乐唱片切换播放的交互行为虚拟现实场景中翻唱片。利用现实生活中的一些行为作为设计元素进行隐喻，很大程度上降低用户学习成本同时激发用户的使用兴趣。设计师在设计的过程中不要轻易自主创作手势交互，表现形式也最好借鉴现实生活的图形符号，以免增加用户认知和学习成本。原则三：用户可控原则用户常常会误触到某些功能，我们应该让用户可以方便的退出。这种情况下，我们应该把“紧急出口”按钮做的明显一点，而且不要在退出时弹出额外的对话框。很多用户发送一条消息、总会有他忽然意识到自己不对的地方，这个叫做临界效应；所以最好支持撤销/重做功能。产品名称：微信解释说明：用户可控性原则需要用户在操作过程可以自由的导航和退出、对于不可逆转的操作可以有提示，需要用户二次确认。如图一用户可以自由导航，进入内页后返回按钮或者右滑手势可以返回；同时图二，点击“看看”按钮，再次点击可以进行取消收藏；图三中，对于用户的误操作或者说是不可逆转的行为，有弹出框提示。原则四：一致性原则对于用户来说，同样的文字、状态、按钮，都应该触发相同的事情，遵从通用的平台惯例；也就是，同 一用语、功能、操作保持一致。产品名称：微信阅读解释说明：一致性原则在视觉、结构、行为交互、反馈层面都有所体现，微信阅读的交互行为在期刊和书籍阅读上做了区分。所有的书籍采用左右滑动翻页；期刊才有上下滚动方式翻页。同时视觉上统一品牌色，文章的字体排版也一致，便于用户识别。这就是为什么 UED 部门都要有自己的交互规范与视觉规范要遵守的原因。原则五：防错原则比一个优秀错误提醒弹窗更好的设计方式，是在这个错误发生之前就避免它。可以帮助用户排除一些容易出错的情况，或在用户提交之前给他一个确认的选项。在此，特别要注意在用户操作具有毁灭性效果的功能时要有提示，防止用户犯不可挽回的错误。产品名称：微信在进行危险操作或者不可逆转操作的时候有提示，如上图第一张的弹出框提示；错误预防的另外一个方法是利用一些视觉元素引起用户注意 ，提供警示作用，如上图的右图。原则六：识别好过记忆通过把组件、按钮及选项可见化，来降低用户的记忆负荷。用户不需要记住各个对话框中的信息。软件的使用指南应该是可见的，且在合适的时候可以再次查看。产品名称：夸克解释说明：识别好过记忆是指让用户减少识别记忆时间。图中夸克中的按钮采用可视化的表现形式，加以文字来辅助，让用户对信息一目了然。图标的形象比较扁平，虚拟现实生活的物品，或者其他 APP 的 icon 变形。PART2，展示用户常用或最近的历史记录，帮助用户记忆。原则七：灵活高效原则灵活高效原则旨在使用户更快捷的使用产品，让用户在最短的路径下最快实现目标。这需要对用户的使用场景、使用流程进行深度挖掘。汽车油门—新手用户常常看不见，而且对于高手来说可以通过它快速与汽车互动。这样的系统可以同时满足有经验和无经验的用户。允许用户定制常用功能。产品：腾讯会议点开腾讯会议 APP，首页展示如下图所示。根据用户参会的场景进行分类，常用的会议场景包括：加入提前预定好的会议、即时性快速开始会议、个人提前预定会议，以及在线下会议室并且需要马上进行无线投屏。四个场景分别对应：加入会议、快速会议、预定会议、无线投屏四个功能。四个功能分类，全面覆盖用户开会最常用的几个场景。同时，直接把几个场景功能进行区分，方便用户快速选择自己适合的功能，灵活高效，节约不必要的交互流程。原则八：优美且简约原则对话中的内容应该去除不相关的信息或几乎不需要的信息。任何不相关的信息都会让原本重要的信息更难被用户察觉。产品名称：多抓鱼解释说明：多抓鱼是 C2B2C 的电商平台，链接买卖双方，但是多抓鱼的框架、布局、视觉等各方面都很简洁。框架层：首页（浏览二手书）、卖书（一键扫码免费上门取书）、购物车、个人中心。简单明了，突出核心功能。同时多抓鱼的买书界面（图 2），图文形式简单的介绍卖书流程，一个按钮可以扫码卖书；个人中心中悬浮按钮可以直接写书评。界面布局与视觉干净简洁，减少视觉干扰项。首页的书籍列表，仅仅展示折扣、书名、豆瓣评分、价格几个关键字段，点进内页才有更多评价和介绍。总体来说多抓鱼的设计在各个方面都做的很简洁、清新，也符合文艺小青年的目标人群原则九：容错原则错误信息应该使用简洁的文字（不要用代码），指出错误是什么，并给出解决建议。也就是在用户出错时如何为出错的用户提供及时正确的帮助呢？即要帮助用户识别出错误，分析出错误的原因再帮助用户回到正确的道路上。如果真的不能帮助用户从错误中恢复，也要尽量为用户提供帮助让用户损失降到最低。产品名称：百度浏览器解释说明：在进行信息填写等一些操作行为的时候，需要使用到这个原则。如图一在用户填报信息前会有提示性信息防止用户填写失误、在用户填写的信息不符合要求的时候会有提示性信息描写哪里有问题。这个原则在一些填报银行卡等安全行为的时候也常用到，系统自动把需要注意的事项给用户，使用户防止出错。原则十：人性化帮助原则即使系统不适用帮助文档是最好的，但我们也应该提供一份帮助文档。任何帮助信息都应该可以方便地搜索到，以用户的任务为核心，列出相应的步骤，但文字不要太多。产品名称：KEEP解释说明：如上图中，用户初次使用 KEEP 课程的时候，会有相关提示进行行为引导；下图的添加设备的流程，每页的步骤引导用户进行选择，找到自己想添加的设备进行添加，引导用户将行为串行。并且最后一个 KEEP 链接小米设备的步骤，给用户进行提示。从而总结最常用的帮助与引导原则的方式有：采用一次性的提示信息、常驻的提示性信息、流程引导、帮助信息等若有收获，就点个赞吧！用超多案例，帮你掌握尼尔森十大设计原则（上）对于尼尔森原则，很多人应该并不陌生，但是并没有系统的了解过。阅读文章 > 用超多案例，帮你掌握尼尔森十大设计原则（下）对于尼尔森原则，很多人应该并不陌生，但是并没有系统的了解过。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/nielsen-design-principles-4
按钮 用户 文案 怎样设计 CTA 按钮，能够增加点击率和转化率呢？目录定义：什么是 CTA 按钮作用：CTA 按钮在界面中的作用设计：CTA 按钮需要注意些什么，通过什么方法增强 CTA 的点击总结定义CTA 是英文 “call-to-action”的简写，又名行为召唤按钮。是 Web 和移动软件应用中最常用的交互元素，其主要作用就是引导人们做出某些特定操作，从而提高产品的转化率。作用简而言之，就是设计师通过设计手法，视觉上突出按钮，让用户自然而然的产生点击按钮的行为，例如留下联系方式或者产生购买行为，都算是行为召唤。 行为召唤这一 UX 设计手段的主要目的就是催生交互、行为，提升转化，达成业务目标。 目前的主流电商 APP 在促销模块的购买按钮都在往大的面积，高饱和度，高层级的方向做。主要也是为了引导用户点击按钮并产生之后的一系列购买可能。怎样设计 CTA 按钮，能够增加点击率和转化率样式上1）按钮在样式是必须看起像是按钮，符合用户对以往按钮的认知，提高可辨识度，降低用户的学习认知成本 。纯文本按钮会让用户迟疑到底是按钮还是内容，从而造成混淆，这种不确定性可能会导致他们直接跳过这些按钮。如上图，在按钮在这个页面层级比较低，而且并不重要的时候可以是直接使用链接文字这样的按钮形式，一般的按钮根据在页面是视觉层级可以选择后面 2 种，无论是点击区域还是样式上更加容易吸引用户点击。2）使用渐变、阴影、圆角让按钮样式看上去更加的逼真，引导用户点击 。这些样式的应用会让按钮看起来更加立体，模拟现实生活中的按钮样式，比如，开关灯、键盘按钮等。用户在现实生活也需要对这些按钮进行点击和交互，如此用户看到这些按钮时，就直接知道如何去操作。3）正确的设计按钮的大小， 按钮的大小要符合拇指原则（44pt），同时按钮上下左右有足够的留白空间。需要一个页面相同位置的按钮组，必须有明确的层级区分，引导用户进行正确的操作，降低用户思考和选择的时间。例如上图的虾米、京东、网易云音乐 app 的登录页面，除了最重要的登录按钮最大，最突出外；其他的第三方登录以及账号密码登录等按钮都根据不同的层级重要性进行了样式区分。让用户可以直接进行正确（或者是你希望）的操作行为，降低用户的选择时间。文案上1）行为召唤按钮 ，顾名思义按钮对于用户的行为有一定召唤，指示作用。所以按钮上的文案可以使用紧迫感和即时性的文字提示。比如：立即、马上、开抢等。这些文字会给用户营造一种紧张、兴奋、刺激的感觉，刺激用户进行点击和消费。2）按钮文案应该表述明确，告知用户按钮的代表的意思，以及点击交互后会发生什么。通过清晰的文案给予用户操作预知，降低用户的使用成本和防备心态。同时文案也可以是利益点，促进用户点击，并产生消费。图 1 是苏宁易购购物车左划时效果，3 个按钮文案分别是表述清楚了不同的操作以及给予用户相应的操作预期。同时不同的按钮背景颜色表述了不同的操作层级，删除按钮是不可逆的操作，所以红色示警。图 2 是芒果台 tv 充值会员页面，按钮文案明确的说明：确认支付¥9，以及副文案开通会员后用户可以得到的利益点。用户可以很清楚的从按钮中的文案知道点击操作后，需要支付的¥9 元金额，以及可以得到的好处，排除了用户的疑惑，告知了用户好处，更有利于提高点击。交互上按钮在操作后需要及时给出用户不同状态的反馈，告知用户你的操作生效了，做到所见即所得，给用户安全感。例如：网页上的按钮鼠标悬停时，按钮会变色，提示并吸引用户点击。最起码按钮上的光标会变成小手；一些小游戏界面中需要引导用户点击按钮时，也会做各种动效，或是指引手势。总结CTA 是英文 “call-to-action”的简写，又名行为召唤按钮按钮在样式是必须看起像是按钮，符合用户对以往按钮的认知，大小要符合拇指原则（44pt）按钮文案上要清晰简洁，可以使用带有紧迫感、即时性、利益点的文案页面中按钮过多时，需要根据层级作出明确区分，减少用户决策时间按钮在操作后需要及时给出用户不同状态的反馈为吸引用户而存在：界面中CTA按钮的设计有何讲究APP和网站这样的数字产品中所包含的有效的交互系统，通常是由包含不同任务和功能的小元素组合到一起的。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/cta-button-ctr
游戏 用户 互动 存量市场下如何维持产品的活力，成为各个平台的重要任务。互动小游戏为何能够成为当下热门的互联网营销工具。互动小游戏是无需下载软件即可体验的一种游戏方式，在网页或者小程序点开即玩且不占用内存。它的发展时间并不长，早期的互动游戏绝大部分是依托于 flash 的富媒体技术。在 2008 年初，网页游戏市场开始日趋火爆，像 Facebook、MySpace 国内的校内网、QQ 空间等一大批 sns 社交网站的崛起，互动小游戏几乎成了这些网站留住用户的不二法则。抢车位、开心农场、QQ 餐厅等也是一大批 80、90 后的青春记忆。随着技术的发展 flash 的弊端也渐渐显露出来，浏览器的运行效率不高、访问电脑资源不方便、个人信息泄露等，加上 flash 技术由 Adobe 公司一家独大，导致各大公司都相继不再支持 flash 应用，而转投到了 H5。最终 Adobe 公司决定在 2020 年终止 flash 技术的提供，这项划时代的技术落下帷幕。近些年随着移动互联网的发展进入下半场。市场增速放缓，流量红利逐渐消失。存量市场下如何维持产品的活力，成为各个平台的重要任务。互动小游戏作为当下热门的互联网营销工具，它的效果远胜于传统的营销效果，成为各平台的公共选择。1. 娱乐体验佳相比冰冷单薄的营销页面，游戏化的互动形式更容易让用户接受，提升用户的参与度，让内容营销变得更加生动有效。和直接派送优惠券给用户相比，让用户参与到游戏中，付出时间成本再获取相应优惠券时，用户的使用度更高。2. 传播效果好无缝连接各种终端，在任何一款浏览器或者手机、平板电脑中都能够访问游戏。开发成本低周期短，便于分享传播。这种广泛性是之前的游戏难以媲美的。游戏自带的竞争性，也能够让用户自发地进行传播，传播成本低效果好。3. 需求植入易互动游戏的趣味性、竞争性以及灵活性，能够让平台更容易将业务诉求融入其中。让用户在游戏过程中潜移默化地接受产品内容。在电商领域也有效解决了价格歧视的问题游戏将优惠券的获取和兑换难度拆分为多个阶梯难度，通过游戏的趣味性降低消费者对价格的感知度。1. 促销类小游戏2009 年双十一后，节日大促层出不穷。各大平台在促销期间通过推出各种主题玩法的小游戏来为活动造势，以此链接平台与用户。S 级节日互动游戏植入游戏玩法对于像双 11 这类的 s 级大促，已经成为标注化配置。通过游戏弱化掉价格歧视，同时用户参与游戏付出的沉没成本，也能够促使他们在大促当天使用来之不易的红包优惠券，实现收益最大化。游戏主题通常与平台理念/IP 形象/大促主题紧密相关，巨额红包池多品牌联动，玩法简单但规则复杂，注重 aarrr 全方位的设计。19 年双 11 盖楼浅析：盖楼组队 PK 机制放大了用户间的胜负欲，但输的的队伍不仅耗费心神，还要倒贴门票红包。负面情绪氛围越来越重，买卖楼风气盛行。虽然使游戏热度大涨，但同时也导致不少用户放弃，影响平台拉新转化的效果，社交平台非常多的差评也有损品牌形象。常规互动游戏玩法简单、耗时短。相比直接领取优惠券，加入互动游戏后以奖励形式发放，券的使用率更高。这是利用了迷恋小概率事件效应。在概率论中，经济学家把在大量重复试验中出现的频率非常低，甚至接近于 0 的事件，称之为小概率事件。对于小概率事件，用户往往都抱着侥幸心理，而且会放大这份心理。“万一中奖了呢”所以用户对得来的奖品格外的珍惜。2. 日常小游戏轻互动的游戏方式与各大平台都能够有较好的适配性，通过互动游戏吸引用户打开 APP，提高打开率和活跃度，进而完成用户行为的转化；互联网巨头也纷纷开始在 APP 内尝试能够与日常运营相结合的游戏方式。常见的是养成签到类，种树几乎成了各个平台的标配。下面我们用“上瘾模型”来对蚂蚁森林和多多果园进行拆解，探索一下互动游戏如何帮助平台实现增长。2016 年支付宝通过立足于公益事业上线蚂蚁森林2018 年拼多多上线以真实水果作为奖励的多多果园，老套的玩法融入各种社交裂变营销，简单的创新使拼多多 2019 年一季度达到 5000 万 DAU，引爆了各大平台做养成游戏的潮流。互动游戏的趣味性、强互动能够很好的和各平台业务相结合。通过游戏化的方式，使用户参与到平台的营销活动中，能够产生真实的裂变效果，实现业务增长。在制作互动类游戏时，可以借鉴比较经典的 flash 小游戏（4399 沉淀了大量的经典小游戏）。通过对经典小游戏的拆解，沉淀游戏范式，再将不同游戏的亮点剥离出来进行优化创新融合。 但创新并不是单纯的模式复用，融合也不是机械地拼装。要结合实际业务，将游戏和商业诉求保持一个平衡点。 注重用户体验，让用户迅速进入心流状态。今天先到这里，希望大家能够多多发表自己的看法，一起交流。下期我们聊一聊互动游戏的设计。大厂出品！如何通过游戏化设计助力直播互动？游戏就如一位魔女，在她魔力所制造的幻境中，我们全身心沉浸在幻境里自由释放本我，你所经历喜怒哀乐，其实都是精心设计的哦。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/growth-of-interactive-games
用户 信息 模型 最近在 12306 网站购票时，弹窗中展示了大段的文字信息，我只是匆匆扫了两眼就果断关闭了，实在没有耐心逐字读完。特别是节日抢票的场景，用户更不会有心情去看这些提示信息。所以在做产品设计时，需要注重信息的传递效率。B 端产品通常用在 PC 端，屏幕显示区域大，在做设计时会不自觉的添加较多的信息，反而影响了用户的使用体验。今天我们就来讨论下如何做好信息传递？我总结了以下 3 个原则：匹配用户心智模型心智模型指的是人们心中根深蒂固存在的，影响人们认识世界、解释世界、面对世界以及如何采取行动的许多假设、陈见和印象。是一个决定用户信息获取行为的内在的、可预测的认知模型。简单来讲就是人类基于经验的总结，去认知世界。做设计这么久，竟然没听过心智模型？今天，我们来聊点不一样的东西。阅读文章 > 《About Face4:交互设计精髓》中提出了 3 种模型，实现模型、表现模型、用户的心智模型。好的产品的设计要尽可能匹配用户的心智模型，越符合用户心智模型的设计，产品越容易理解。B 端产品页面内容变化较少，更强调一致性。主要由表格、表单、按钮等各种信息元素构成。在长期的使用过程中，用户对某些信息元素已经形成了特定的心智模型。例如用户看到输入框，就知道需要填写内容；看到步骤条引导，就知道多步操作；看到 Radio Button，就知道是单选。因此方案设计时，设计师的一个重要目标就是让表现模型尽可能的匹配用户心理模型，避免因为组件使用不当，造成用户产生错误认知。例如考虑到用户的视觉动线，“新建”主要、高频按钮通常放在左上角，方便用户浏览和操作，而辅助功能按钮会放置在右侧，用户也逐渐形成了这样的心智模型。如果主操作按钮放置在右上角则违背了用户的心智模型，用户使用产品时，需要建立新的心智模型，改变已有的行为习惯。并且这种设计并不能带来其他层面的体验提升，个人认为有些得不偿失。信息的层次性B 端产品业务比较复杂，页面内容也会较多，信息的有效组织尤其重要。信息设计不是简单的内容堆砌，需要根据用户场景和需求做出优化处理，构建有效的信息的层级帮助用户去理解业务内容。信息层级包括 2 个方面：1. 系统空间分层在一个系统中存在着空间分层，当页面较为复杂时，需要通过合理的内容分层，有序的展现内在逻辑关系。B 端核心交互就是“增、删、改、查”，其中“查”就是信息的检索和浏览。所以页面主要是由搜索条件和表格构成的。而“增、改”等操作行为主要是在临时的系统空间中完成，例如弹窗、侧边浮窗、跳转页面等形式。不同的信息在不同系统层级中相对独立的展示出来，保证了信息的层次感和秩序性。2. 页面信息结构复杂业务场景下，单个页面会承载大量的信息内容，需要通过合理有序地呈现给用户。主要有 2 种方式进行信息拆解。1）高效组织——卡片化设计在 B 端产品中，为了保证功能的完整性，必须要一个页面中展示给用户。逐条平铺，散点式的信息展示会造成信息密度过高，缺少层次性。而卡片方式可以很好的聚类相似信息，分割差异化信息，有助于降低信息的复杂性，帮助用户快速定位信息、浏览内容。2）化整为零——步骤化设计面对复杂的信息内容，用户容易产生畏难情绪。将复杂内容分步拆解，把用户的关注点从页面内容转移到步骤进度上，可以减少用户的心理压力。另外节点信息页也可以帮助用户更好的理解业务流程。另外步骤化设计还可以将散点内容归集到一个任务流程中，引导用户快速完成工作任务。例如 Win11 系统安装后的设置引导，可以方便用户快速完成系统基本配置，避免用户操作的行为成本。3. 页面元素设计不同于 C 端产品，B 端产品更强调效率。正如奥卡姆剃刀原则所说“如无必要，勿增实体”。页面内容需要以简洁为主，避免无关要素形成信息干扰。而设计师更加感性，担心设计过于平淡，会在界面中添加各种视觉元素，反而会增加用户的认知成本。让设计更有说服力的20条经典原则：奥卡姆剃刀编者按：我们都知道在设计中简化不必要的元素和操作会提升产品的效率，那么这是什么原理呢？阅读文章 > 信息的可理解性B 端产品通常业务具有一定的专业性，用户门槛较高。在复杂业务场景下，必须让用户能够较为清晰的理解产品及功能，才能保证信息的传达效率。1. 帮助信息B 端产品需要尽可能地降低用户学习成本，但是本身业务层面的难度是无法避免的。因此需要为用户提供及时有效的帮助信息。在阿里云、腾讯云界面中包含了大量的解释说明、Tips 等信息，解决用户在使用过程中的疑问，帮助用户更好的理解业务内容，减少用户的记忆量。同时帮助信息还需要具有拓展性，当提示信息无法完全解决用户疑问时，还需要能够引导用户，查看完整的帮助文档，减少用户翻查资料的成本。2. 可视化设计数据可视化设计在 B 端产品中应用较多，例如概览页面，通过图形化的方式将数据的内在关系更直观的表达出来。在某些特定的场景下，内容页面也可以通过可视化展示帮助用户理解信息，例如常见的身份证图片上传等，很多用户无法分清楚正面反面，借助图片可视化提示，便于用户更好的理解信息。写在最后体验设计行业需要创新，但是 B 端产品设计需要更加谨慎。尊重用户的习惯，完整表达业务逻辑性、保证内容的可理解性，是设计师必须去关注的。从4个方面，帮你掌握B端产品设计利器「信息设计」图表图形、图像符号、地图，是我们生活中和设计实践中经常接触到的信息设计形式，这些设计制图在有限的平面空间里讲述了立体的故事，把信息清晰高效的传达给用户。阅读文章 > 欢迎关注作者微信公众号：「子牧UXD」本篇来源：优设网原文地址：https://www.uisdc.com/b-end-information-design-rules
表单 用户 内容 前言表单是 UI 设计中很常见的元素，不管是 PC 端还是移动端，表单几乎是无法规避的 UI 控件，用户可以通过表单完成线上购物、信息交换、文章订阅等任务，使用范畴极为广泛且牵扯到方方面面。表单设计看似很简单、实则很容易忽略用户体验，作为设计师，需要根据触发条件、使用场景将各元素进行灵活的调整，才能确保用户顺畅的完成表单任务，因此，设计出一个可用性非常好的表单非常有必要。本文将针对表单的设计准则及用户体验进行了总结，希望能够帮到大家。本期大纲认识表单表单结构及元素设计细节暂存及送出规则如何提升表单完成率常见误区及避坑指南总结认识表单1. 什么是表单？表单主要用来收集或呈现数据或特定字段等信息，属于信息采集工具，可运用到不同的场景模块中，例如常见的登录注册、调查问卷、个人信息页面。如何确定当前页面是不是表单页，主要看该页面是否发生信息采集而触发用户进行输入、选择、编辑等操作。2. 表单的交互状态完成表单内容需经过三个阶段，即交互前、交互中、交互后的三种状态。交互前：未发生任何操作，默认为初始化状态；交互中：光标插入即成为聚焦状态，占位符消失，随着内容的输入，输入框后面显示一键清除图标；交互后：输入完成光标离开，前端如验证内容有误会立即反馈，无误则回到正常输入后的状态。表单结构及元素设计细节1. 结构/框架首先，在视觉上，移动端表单不管所输入字段有多么少也不要在同一行添置多个表单，使用单列方式呈现，便于用户浏览和理解。如果存在关联性极强的前置条件可设计多列，如：输入手机号码之前要先选择国际电话区号，可将这两个字段纳入同一个（双列）表单项。其次，表单内容需先易后难，避免用户从一开始就产生逃避的想法，需根据内容的关联性循序渐进的引导用户完成。例如：添加地址，常见顺序是姓名、电话、地区、详细地址，如果一开始就让用户填写详细地址的话就不合理了（并不是不行），这等于在颠覆用户的认知，就算完成了表单内容多少也会有些“上头”。最后，当同一页面表单项过多时，需要根据类型、相似性或前后关系进行分组，以保持页面的节奏感，让用户在最短的时间内对整个页面内容有个大致的了解，从而能更轻松的完成表单。另外，将选填的内容尽量靠后，如果重要性较低，就直接去。2. 标签标签的作用是告知用户当前表单要输入什么内容，清晰简洁的表单能让用户更快速的理解。标签的长短决定着其对齐方式，通常标签字数在可控的情况下可使用左对齐；文本字数不可控但不是很多时可使用右对齐；字数不可控且标签长短不一、相差巨大就使用顶对齐（例如英文，大多数不可控，参差不齐）。3. 占位符占位符主要对标签进行描述或补充内容格式，它并非内容，而是在用户输入内容之前帮助其解决常见问题及误区，用以提升表单的完成效率。部分设计师喜欢将占位符和标签保持一致，实无必要，如果只是单纯的为了视觉上统一，使用通用提示「请输入/请选择」也很不错，或者在后面加上推荐性措辞，否则就直接留空。当光标插入时，尽量保留占位符，输入内容后再消失，方便用户在输入内容之前依然可通过占位符得到帮助。在这里需要说明一个误区，避免直接将占位符作为标签使用，如果只是针对登录页面，用户还可以理解，因为其内容比较大众化，账号+密码、额外再加个验证码，很容易理解。但其他类型的表单页面就容易让用户产生疑惑，输入内容时随着占位符的消失，容易忘记表单的内容属性，增加了用户的理解成本和使用难度。4. 输入能让用户选择的就不要让其码字输入，例如：输入手机号码，可让用户跳转到通讯录自行选择。尽量减少需输入的内容，通过已知信息预判并帮助用户自动录入，如：手机号码前要先输入国际区号，若产品主要服务于国内用户，系统自动录入“+86”，可节省用户的操作成本，降低表单的完成难度。在表单输入后，需在后面提供一键清除图标“ⓧ”，因为系统提供的删除功能只能单个文本清除。需对输入的内容设计规范格式，将同一组较长的内容加空格分段，便于浏览记忆。例如地址“广东省 深圳市 龙华区”、手机号码“138 888 88888”等。5. 键盘键盘是内容输入的必备组件，很多时候，产品会允许用户在系统输入法与第三方输入法之间自由切换，基于常规操作似乎没有什么问题，但站在用户体验角度，需要根据不同使用场景考虑是否需要开发内置键盘。如验证码、部分密码只需输入纯数字即可，这时调出内置的纯数字键盘可减少无关元素（字母/符号）的干扰；出于安全考虑，涉及财产相关的密码则需要打乱键盘的字母、数字顺序，虽然会增加用户的理解成本，但与财产的安全性相比，显然在可接受范围之内。6. 选项当表单项存在多个选项时，需根据选项的数量、长短设定不同的展示方式，如单/复选按钮、弹窗、页面跳转等。1）按钮：当选项不超过 6 条且单条选项在 4 个字左右的，可设计成按钮样式供用户选择；2）弹窗：选项较多时，使用操作栏弹窗展示；3）跳转页面：若选项太多且不可控，使用跳转页面的方式则体验更佳。7. 提示提示是用户在操作前对完成表单项可能存在疑惑，当占位符不足以说清楚时，会在标签后面增加一个提示图标，用户点击后通过弹窗或新的页面来查看详细的解释说明。8. 数据验证分为前端验证和后端验证，前端验证无需服务器传输数据，程序已写好的验证规则，光标离开即可验证（就像玩单机游戏），例如内容格式、长短、文本类型验证等；后端验证需要将表单内容传入后台数据库进行匹配，与数据不匹配将验证不通过，例如账号不存在、密码错误等。验证反馈需遵循就近原则，将错误提示显示在对应的表单项附近，便于用户及时修改。另外，不要将错误信息直接清除，可将对应信息或输入框用颜色区分（标红），让用户在原有基础上进行修改则效率更高，试想一下，你一口气输了 30 个数字，因为错了一个就得重复前面的操作次数是什么感受，请记住，把决定权永远留给用户。暂存及送出规则1. 暂存方式暂存是指已完成的表单内容还未提交至系统而需要离开当前页面，系统为避免用户重复完成表单内容而提供的预防措施。我们需要根据用户的实际使用场景来确定是否需要加入暂时存储功能，以给予不同的存储方式。笔者曾经碰到过这样一个问题，在微信某公众号中将一个超长表单完成一大半时，然后需切换到微信拿取几个信息，必须要回到对话列表（当时没有浮窗功能），无奈只能返回查看、并祈祷已输入的内容能够保留，结果…不出意外的给清空了。换个姿势再来，于是下载了对应的某 APP 去完成刚才已重复过的操作，当在微信中拿取信息后再回到某 APP 时，发现已被结束进程，&%￥#@……，卸载，拜拜。这些问题出现的原因有很多，可能是设备问题、也可能是自己的不良习惯，但作为设计师，虽然无法避免问题的出现，但需要给用户提供解决问题的措施。可能有人会说，这些小问题不在设计范畴，是程序控制的，用户习惯五花八门，即便提供预防措施也不一定能增加用户的忠诚度，笔者想说明的是“解决问题不一定能留住用户，但不解决问题一定留不住用户”。在部分较长的表单页面增加暂存功能，可一定程度的提升使用体验，基于场景的不同，我们对手动存储、自动存储、询问后存储三种方式进行解析，以确保选择合理的暂存方式。1）手动存储手动存储并非信息提交，指的是用户在完成表单中途有退出需求时所提供的暂存方案，其最常见的是页面右上角或末尾提供的“草稿箱”功能，存储后，下次可从草稿箱进入接着编辑。多用于 B 端或工具型应用，例如：我们需要发布投票、调查问卷、活动等，可事先设定好条件规则暂时保存至草稿箱，待需要时从草稿箱编辑或发布。2）自动存储对于填写内容超多的表单页面，数据自动存储非常有必要，当遭遇系统崩溃、网络故障、应用闪退等突发事件时，连手动存储的机会都没有，或许花费了很长时间才完成的内容又得重复一遍，真的很让人崩溃。如线上申请信用卡、贷款等复杂表单要求填写各种信息，可能需要来回获取且分多次完成，这时加入自动存储功能，体验一定会更好。3）离开时询问用户未将内容送出时返回/离开，会触发系统弹窗提示“是否保留内容？”，相当于手动存储的强提醒。我们在微信朋友圈编辑好内容、未发布离开时就有此提示。2. 送出方式在表单页面，会存在多种不同的操作按钮，如上一步、下一步、存草稿箱、提交等。这里讲到的送出是指通过下一步、保存、提交或确认等行为召唤按钮将表单内容提交至系统，并根据表单页内容的重要性、将按钮放在不同的操作位置，最常见的有固定页面右上角、固定设备底部和表单底部三种方式。1）固定页面右上角这是一种常见的提交形式，多用于内容较少的页面。当表单较为复杂、且需要认真填写时，为了不影响用户的注意力，也可能将送出按钮放在右上角以弱化视觉吸引力。2）固定设备底部方便用户随时点击，常用于内容重要性不是很高的表单页面，可能选填项多于必填项。这种设计方式有着较强的视觉吸引力，能降低用户的跳出率，促使其快速将表单内容送出。3）表单底部表单内容较长且重要性较高，需要完成绝大部分的必填项，下拉到最后一个表单项时才能看到送出按钮，能起到一定的引导作用。对于内容较少的表单，按钮最靠近内容，用户无需太大的视觉跳跃就能连贯地操作。行为召唤按钮的文案必须清晰简洁，能让用户快速明确按钮的功能和意图，不要让用户思考。如何提升表单完成率1. 用识别代替输入能用技术解决的问题就绝不留给用户，很多时候，用识别代替输入，能提升用户完成表单的效率及使用体验。例如身份证扫描自动识别录入个人信息、银行卡拍照识别卡号、系统自动定位等，都能帮用户省去很多不必要的操作。善用技术的力量，把所谓的麻烦留给技术，得到的回报并不仅仅是用户这一次的完成任务，可能是良性循环。2. 微交互让操作过程更有趣我相信，没有谁会在无聊的时候喜欢填写一些信息提交给产品（除非让 TA 领钱），用户是为了完成某项任务才被迫去完成表单的，所以在这个过程中适当给表单加入微交互，可以让交互过程变的更有趣，还能起到引导用户的作用。例如：B 站用户登录输入密码时，顶部的卡通人物会用双手捂住眼睛，给予用户安全的心理暗示。3. 提前告知必备材料，让用户有心理准备完成表单的主观意愿在于用户时，一般对操作结果会有一定的心理预期，那么应该在用户正式填写表单之前告知必备的材料。假如完成一个表单同时需要身份证、毕业证、银行卡等资料，用户总是被频繁中断、要去寻找这些资料，就会逐渐失去耐心，导致中途放弃的可能。提前告知用户可让其有一定的心理准备，从而接受程度会更高。4. 提前告知奖励，让用户有所期待完成表单的主观意愿在于产品时（与上面相反），为了更好的掌控主动权，部分潜在的风险、必备材料让用户过早知道，可能还没开始就已经放弃了。例如：获取线上理财产品额度时，没有谁会事先告诉你，一定要用身份证实名认证，即便这是必须的，产品也会先让用户提供一些重要性不是那么高的证明材料，然后再循序渐进的引导至重要证件的信息输入，当表单内容即将完成时，对后续的必备材料的接受度就会逐渐增高，毕竟谁都不喜欢在最后一步放弃。虽然不能过于明确用户的付出，但可在用户开始填写表单之前告知可能获得特权、奖励等，让用户有所期待。基于人性趋利、人心向利的弱点，产品可以通过福利、奖品的发放进行利益引用，吸引用户来完成以产品为主导的表单需求。（PS：这就是为什么推荐办理信用卡会带上几个拉杆箱、问卷调查会附带周边礼品赠送的原因）常见误区及避坑指南1. 减少不必要的表单项目PM 总是认为，每一个表单项都是必不可少的，殊不知每多一个选项，就会增加用户的时间成本和操作难度，可能导致用户流失。经过分析后发现并不是所有的表单项都必不可少，虽然有时出于特殊情况，但需要尽量去做到减少表单项。下图所示，身份证为必填项，出生日期完全可以使用技术从身份证号中提取；手机号、邮箱、微信、QQ 让用户填写不是目的，获取联系方式才是主要的，手机号码（必备）、微信（主流）完全能满足对用户联系方式的信息搜集，没必要设计一个既复杂又长的表单让用户全部完成。2. 将相互关联的表单项组合起来将关联性较强的信息组合起来形成一个表单项，不仅让用户输入的连贯性更强、有效节约界面空间资源的占用，还能让表单更有组织性、减少用户的认知负荷。例如时间/日期、区号/电话号码、省/市/区…等3. 隐藏不相关的信息如果用户打开表单时的第一感觉就是内容太多，会心生退意，隐藏不相关的信息、删减无用的字段，通过合理控制表单的复杂性能减少用户的心理负担，必要的信息在用户需要时出现，有效降低用户完成时的无关干扰。4. 合理的利用分页、分组如果隐藏、删减了很多内容后，表单依旧庞大，切记不要把所有表单项一次性全展示给用户，过长的表单感觉要花费很多时间才能完成，会导致用户不知所措、产生烦躁情绪而放弃填写。这时就需要将所有的表单项进行分组，有必要的话就分页展示。将超长表单分割多个小任务，分页呈现并显示操作进度，会让用户对整个表单形成清晰的预期。细心的设计师会发现，很多应用将登录页的手机号/验证码输入进行了分页，主要原因是点击获取验证码之后需等待接收短信，而等待的空档期会让用户产生效率缓慢的感觉，分页后在跳转页面时能掩盖小部分的等待时间，从某种意义上来讲，分页操作的流畅度会“高于”多信息同页面等待完成。将超长表单分组、分页虽能提升体验，但不能过于细化、刻意增加操作步骤，否则可能惹恼用户，遗留下来的将是一个全新的问题。5. 标签与输入框视觉关联接近性原则告诉我们，元素之间的相对距离会影响用户感知他们之间的关系，相互靠近的物体被认为比相互距离较远的物体更有关联性。同一组表单元素应该靠的更近，以体现内容的关联性，确保界面层级清晰，用户不会产生疑惑。6. 字数限制需实时提示单个表单项输入内容较多，需要实时提醒剩余可输入字数，避免用户一股脑的输入完成后才发现内容量已翻倍，就得重新组织语言重复输入，很不友好。这种情况常出现在备注、介绍等较长表单项。另外，在自定义注册账号、设置密码的较短表单项中也会碰到。7. 内容长度与输入区高度相适应重要的表单内容，不管内容多长都应该完整显示，例如个人简介、详细地址等表单项，如果仅仅因为内容过长就将后面的部分隐藏，可以说是非常不友好，用户甚至无法对已输入的信息进行完整的预览，不能确认信息的对错。请记住，如果从一开始就不想让用户输入太多信息，那就从程序上控制并给予对应的提示。表单输入区的宽度虽然是固定的，但可以通过自适应调整高度来确保信息内容的完整性，保持良好的使用体验。总结以上是笔者对表单设计的一点经验和总结，希望对大家有帮助。在设计表单时，需要用结构化的思维去思考分析，视觉只是整个体验的一小部分，如果只关注表面，也很容易将优秀的表单样式复制出来，但却无法理解背后的设计价值，毕竟设计都是先想好为什么，然后才开始做。很多时候，可能有人会认为一些很小的表单细节显得微不足道，就算能起到作用也只是对 1％、1‰甚至1‱的用户，杯水车薪。但是有没有想过，一个应用中可优化的点可能会有100个、1000个…。虽然有时候做的不是很好，但只要能比上一次好，那就毫不犹豫的换掉它。6000字干货！5个Web表单设计冷知识当我们设计 Web 表单时，往往用最直觉的设计经验本能驱动我们去解决一些看似在界面设计中最简单的问题，但每每到细微之处，又会有无数疑问从细节中冒出来给我们的设计造成困扰。阅读文章 > 欢迎关注作者微信公众号：「能量眼球」本篇来源：优设网原文地址：https://www.uisdc.com/form-design-rules
用户 游戏 驱动力 前言互联网对流量和用户注意力的争夺已经白热化，APP 内置增长游戏成为很多平台提升停留时长和消费转化的热门手段之一，然而这个过程只是将已有游戏放入业务环境让用户上瘾么？如何将游戏形式与业务属性和用户生活完美契合是一个值得探讨的话题。为了帮助设计者找到适合自身产品增长的游戏化策略，我们几位交互设计师与用户研究同学携手，针对当下互联网平台中，驱动用户使用 APP 内置游戏的原因进行定性+定量研究，结合成熟的动机理论，提出评估 APP 内置游戏驱动力构成和强弱的方法，并通过可视化形式让设计者清晰了解当下游戏的驱动力优劣势，从而有针对性制定设计策略。（注：本文所有的 APP 内置游戏指代例如蚂蚁森林、芭芭农场等长期内置于平台的增长运营游戏，暂不包括短期运营小游戏）文章较长，但建议通篇浏览，如有特殊需求可直接前往楼层哪些因素影响了用户玩 APP 内置游戏的动力？ 第02章用户驱动力模型介绍 第03章8 款 APP 内置游戏的驱动力表现如何？ 第04章APP 内置游戏驱动力影响来源分析APP 内置游戏已逐渐成为用户生活方式的一部分，影响游戏行为的因素不再仅限于好不好玩。为了探索更多影响因素，我们电话访谈了 10 位用户，从用户的个人属性、互联网动态属性和内置游戏经验来了解影响驱动力的原因。随后提炼关键评价进行定量的问卷调研，生成 APP 内置游戏总体驱动力趋向。图 1 定性调研大纲经过定性访谈，我们洞察到影响驱动力的原因来源可以主要包括：社交互动、个体经验和消费场景：图 2 用户评价总结1. 社交互动影响原因分析一种建立和增强社会融入感的方式：首先 APP 内置游戏是人与人互动的媒介，通过建立新的社交环境和沟通符号，来增强已有现实关系，例如多位用户描述在现实世界欠朋友人情，通过浇水来还人情或者增进关系的场景，甚至总是被某个好友偷能量却没有浇水补给，从此卸载蚂蚁森林。其次，游戏是用户增强社会参与感的方式。其中用户评价包括：听到或看到身边朋友都在玩，所以自己觉得应该也不错，会主动尝试，这样和朋友们就有话题了。或者游戏传达正能量，或者是当下潮流形式，例如跳一跳之类的，会主动参与或者推荐，从而获得群体归属感；与社会性主题相关的游戏也可以引发用户认同感，从而主动参与和传播，并且为社会带来积极价值。用户描述觉得能在自己能力范围内给他人帮助会产生积极感受，而且也十分认同对社会的正向价值取向，愿意长期参与并且推荐朋友一起参与。图 3 社交互动-用户评价提炼一种获得归属感和情感陪伴的方式：APP 内置游戏逐渐成为一种有情感和生命力的陪伴者，填补用户在复杂互联网环境的孤独和情感空缺。虚拟角色成为用户评价社会关系和自我价值的评价客体，用户希望获得虚拟角色的认同。例如用户描述会每天早晨醒来不由自主去农场看望小鸡，她将小鸡视作自己的小宠物和陪伴身边的朋友，看到小鸡挨饿或者被人欺负就非常难过，产生很强的保护欲。2. 个体经验影响原因分析一种适合短时间消遣的方式：在娱乐诉求期望上，APP 内置游戏主要扮演短暂精神愉悦和消遣压力的价值。经过定性访谈了解到，用户对内置游戏的可玩性预期并不是很高，而且认为不应该占用自己太多精力和时间，否则会产生愧疚、自我厌恶等负面体验。例如用户说很讨厌看视频赚金币的方式，觉得浪费时间和精力。除此之外，从用户整体的日常生活轨迹来看，大部分玩内置游戏的用户都有其他大型网络游戏、单机游戏或者同类型休闲网页游戏的使用经验，这些独立游戏已经较好解决了用户对于暂时逃离现实世界的诉求。多数用户认为游戏画面简约清晰，易理解易上手就可以满足在碎片化时间临时放松的期望，具体评价见下方：图 4 个体经验-用户评价提炼用户期望获得趣味的玩乐体验：在可玩性期望上，虽然 APP 内置游戏不属于纯游戏产品，但也需要具有游戏的元素和趣味性来满足用户的娱乐诉求。首先游戏的趣味性是有相对性的，用户在其他娱乐领域或相似游戏形式的喜好会对驱动力有一定影响，例如对竞技类游戏有偏好和经验的用户认为养成类的游戏节奏缓慢，没有难度阻碍，缺乏操控性或者社会竞争的快感。某用户是消消乐重度爱好者，认为 APP 内置的消消乐可以很好满足自己的玩乐体验，无需下载新软件而直接将游戏习惯迁移到 APP 内置游戏中。游戏中的成就感也给用户带来很强激励。多数用户描述在浇水/施肥后树苗立即变高，进度条前进时产生成就感受，在蚂蚁森林终于种下属于自己的树拿到环保证书时产生成就感，还有在打通关卡，排名超越熟人好友的时候产生成就感，都促使用户继续玩游戏。游戏形式与自我身份认同有关联性：APP 内置游戏也与用户对自我身份的认同相关。虽然用户会参与游戏中，但由于游戏的主题、界面风格和玩法形式与自身年龄和所在社会圈层的隔阂而阻碍游戏的传播与推荐。例如某几个 30 岁以上的用户描述，认为蚂蚁森林和芭芭农场形式比较卡通幼稚，并且认为大众对游戏的认知比较贬义，认为推荐游戏不符合自己的身份，但如果游戏主要是对公益正能量的宣传，自己则会考虑推荐。3. 消费决策影响原因分析实物奖励具有很强的激励性：APP 内置游戏除了让用户在碎片化时间排遣压力和带来情绪价值之外，也是品牌传播和引导用户消费的场所。通过让新手用户获得较好质量的真实奖品，增强用户对内置游戏经济价值的认可，激励参与动机。例如很多用户在提及芭芭农场时，第一时间就描述拿到过真实水果，水果质量挺不错，因此开始持续玩游戏之类的描述，包括笔者本人也在初次玩游戏时也获得一箱质量很不错的水果，从此产生很强的参与粘性。图 5 消费决策-用户评价提炼传递附加价值促进消费决策：APP 的使用频率和习惯与内置游戏是有关联性的，当两者具有场景关联时就可以建立一种认知和行为的习惯，在这个过程中将游戏的附加经济价值传达给用户，从而成为影响消费决策的因素。例如用户描述，已经习惯每次下单后主动去领游戏道具并立即使用，甚至自己会为了获得更多水滴道具而选择下单。除此之外，游戏也具有将业务内容透传给用户的重要功能，但除了通过外部奖励吸引用户前往业务进行转化，也需要考虑所推送的内容是否命中用户潜在诉求，否则用户会将主要精力放置在奖励而非业务内容上，这样会让用户感觉浪费精力和疲惫，转化的质量也就严重削弱。例如多位用户描述自己曾在游戏做任务版块前往某个商品页，浏览时发现感兴趣的商品，并且游戏金币可以抵现，因此立即下单购买了。而且在做任务浏览业务页时，也会主动去了解业务内容，所以这个场景下的用户注意力需要很好地利用起来。随后，我们将访谈结果中提及频率较高和对参与动力有明显正向作用的描述进行提炼，总结出如下评价类型进行问卷调研，样本平均覆盖一二三线城市，男女性别，18-39 岁四个年龄段的 561 位用户。图 6 定量调研结果APP 内置游戏驱动力模型构建虽然互联网平台都在尝试用游戏手段吸引用户的注意力，延长停留时长，但内置游戏的目的不是让用户沉迷和上瘾，而是平台与用户互动的另一种方式。其原则是让用户透过游戏形式更好地了解品牌和商品价值，促进用户增长；让用户与平台建立一种强粘性的情感关系，不强势占用用户的时间和精力；同时成为传播社会正向价值的媒介。从这样的设计原则出发，发挥游戏对业务场景的价值，让用户从内心认同并触发主动参与动机是长期 APP 内置游戏设计的关键。图 7 激发用户自主参与动力因此结合前期用户调研，我们融合了自我决定理论（Self-Determination Theory,SDT）来将前期洞察重构聚类，形成更指向激发用户自我动力的 APP 内置游戏驱动力评估模型。自我决定理论是由美国心理学家 Deci Edward L. 和 Ryan Richard M 等人在 20 世纪 80 年代提出的一种关于人类自我决定行为的动机过程理论，理论强调激发人类自由选择而非被迫强制的动机和行为。目前在游戏、教育、职场教育等研究领域有广泛应用。自我决定理论主要包括：（1）胜任性：人们认为自己有能力完成某个任务的诉求；（2）自主性：人们认为自己有选择自由的诉求；（3）关联性：人们希望与社会中其他人发生互动和归属的诉求。图 8 驱动力模型搭建过程图 9 APP 内置游戏驱动力模型1. 社会归属：是否增强现实熟人关系，或者建立新的社交关系？从众融入 | 营造身边人都在参与，强化不从众的亏损感：自我决定理论（SDT）的关联性认为，人类天生就有想与他人互动，建立合作和归属关系的动机。结合实际调研，我们也发现身边朋友是否广泛玩或者谈论游戏会影响用户的参与，从众效应让用户觉得越多人玩，自己也应该参与其中。例如在支付宝三小时公益游戏中，公益日记本中可以看到其他用户参与的项目和帮助他人的记录，与自己还没有任何公益项目形成鲜明对比，增强用户寻求融入和归属的愿望，并通过先扬后抑的文案手法和行为按键，触发用户的参与行为。图 10 图片来源：支付宝三小时公益游戏互动情景 | 通过游戏道具或行为建立新的互动情景，平衡积极和消极行为影响：游戏中与朋友发生趣味互动会增强或削弱在现实的关系，设计时需要考虑游戏道具和行为在现实社交关系中的作用。例如在蚂蚁森林中，游戏道具『绿色能量』成为好友互助的中间物，『捐能量/浇水』行为不仅体现友好，而且成为现实社交中的话题。蚂蚁庄园中通过在好友家种麦子行为来传达友好，并且能建立与好友一同培养农作物的互助情景。图 11 图片来源：蚂蚁森林&蚂蚁庄园除了积极行为，适当的消极行为也能激发社交趣味性，但需要把控程度。在蚂蚁森林中，本身「偷」行为在熟人朋友中有恶作剧增强情感互动的作用，如果「偷能量」过度却没有补偿行为，会增强「偷」的贬义感，损耗人们之间的友好关系，所以提供「踩 ta/放话」带有攻击色彩的行为，并且显示主动和被动收取能量对比，将负面情绪转化为新的参与动机。而蚂蚁庄园使用了一种更巧妙的方式，当好友的小鸡来使坏时，用户可以选择雇佣而不是攻击，将负面社交行为委婉转化，降低好友因互相攻击导致关系损耗的可能。图 12 图片来源：蚂蚁森林&蚂蚁庄园虚拟关系 | 建立角色增强情感粘性：也可以在游戏中设立虚拟角色，通过与角色互动可以建立新的社交关系，从而产生情感依赖。例如当小鸡被别人欺负或者很久没看见主人时，会有哭泣表情十分惹人怜爱，并且配上心情值和描述，将情绪表达更加量化和清晰，激发用户主动关爱，起到提升停留时长和召回次数的作用。2. 价值认同：价值导向、玩法和视觉风格是否契合用户的自我身份和正向价值观？自我认同 | 给用户定义自我的权利：游戏与用户内心产生共鸣才能产生与其互动的源源不断动力，所以用户需要认同游戏的价值取向。根据 SDT 理论的自主性，具有价值认同的游戏可以让用户自由诠释自我，不会强迫用户做一些自身不认同或者不符合身份的行为。例如网易音乐 2021 年度报告中，初次进入让用户定制自己的形象，通过虚拟角色来让用户表达自我。播客 APP 小宇宙的年度报告不会根据大数据框定对用户身份的标签或描述，而是将定义自我的权利归还用户，允许自主选择代表身份的电台，增强身份认同感。图 13 图片来源：网易云音乐&小宇宙播客身份认同 | 游戏内外行为符合用户身份：除了依靠外部奖励吸引用户，从内心认同行为目标的意义，也可以增强用户的参与动力。当强迫并不看重奖励或有消费想法的用户去做浏览业务页面的任务，会让用户觉得在浪费时间和精力，产生厌恶感，但如果用户在有潜在消费或游戏诉求时让他们去做这类任务，精准推送商品/奖品反而能带来商业转化。例如蚂蚁森林任务列表通过奖品图和功能说明，增强用户对行为目标的认同。图 14 图片来源：蚂蚁森林&蚂蚁庄园蚂蚁庄园中对用户在游戏/业务中的行为可以在消费/游戏场景带来何种价值进行关联说明，增强对目标意义的感知。除此之外，当任务内容具有科普或趣味性，让用户获得情绪或知识价值也可以触发主动参与行为，例如蚂蚁庄园中设置了答题任务，用户认为自己获得知识价值并且提升游戏趣味性。社会价值认同 | 游戏价值导向符合社会正向文化观念：其次帮助他人，传播有利于社会的正向观念和价值，这些代表良好品质的行为也会增强对自我的认同。例如蚂蚁森林将游戏种树的结果与现实沙漠种树进行结合，给予用户种树证书。余额宝锦鲤游戏结果与年画传统艺术保护活动结合的社会性主题，都让用户对自身游戏行为有更强的认同感。图 15 图片来源：余额宝锦鲤&蚂蚁森林3. 自我成就：是否让用户获得成功并认为自己有能力？吸引力目标 | 建立自我信心和目标期待感：首先需要建立一个成就期望目标，包括获得实物/道具奖品或者排行榜名次提升，并且这个目标是用户评估有能力触达的。例如京东双 11 的环游世界游戏奖励展示页，优先展示用户所获得的成果，增强能力信心，同时展示后续奖励内容建立目标感。图 16 图片来源：京东双 11 环游世界及时反馈和自我效能 | 强化对进度/目标差距的感知，并增强自我能力的正向归因：其次，在游戏过程中需要让进度可视化，同时增强每次行为后的反馈。例如美团天天领现金游戏中，每次解锁新角色时通过进度条展示与目标的距离，以及目标价值。其次需要对用户每次行为有积极反馈，在微信跳一跳游戏中，每次跳跃成功都有增加分数和超越他人的动效感知。图 17 图片来源：微信跳一跳&美团天天领现金同时，将成功结果归因于用户的付出和能力，失败原因归因于外部偶然事件。例如京东环游记 AR 游戏中将失败原因归因于未中奖而不是用户能力问题，可以减弱失败对成就感的挫败。图 18 图片来源：荒野大乱斗&京东双 11 环游世界成就回顾 | 融入游戏场景的成就可视化展示，唤起积极回忆：最后，让用户可以随时看到荣誉，通过可见物唤起过往的成就积极体验来增强自我能力的认可。蚂蚁庄园使用展示柜概念，将用户捐助的项目以相框形式进行展示，蚂蚁森林中使用徽章概念，作为树木装饰物进行展示，都是与游戏场景结合较好的展示方式。图 19 图片来源：蚂蚁庄园&蚂蚁森林但不同用户的成就感触发因素不同，例如更关注自我目标的用户需要强调自身技能，而关注社会比较的用户需要强调与他人的能力对比来增强成就感，所以设计时需要对不同用户有差异化设计。4. 自由便利：是否简单易学，用户不被强迫而有选择的自由？经验迁移 | 利用已有游戏经验和喜好进行设计：通过调研洞察到用户玩内置游戏的场景一般都发生在碎片化短暂时间内，主要期望能消磨时间，对可玩性并没有较多诉求，如果用户过去有使用经验则能降低学习成本。例如美团斗地主游戏将有线下棋牌游戏习惯和经验的用户进行线上迁移，用户认为比下载一个游戏 APP 更加方便，并且在疫情期间也无需线下聚集娱乐，带来便利。尊重自由 | 提升自主掌控权利，不过度引导：用户期望游戏画面和玩法不复杂，不占用太多精力和时间。当采用引导长时间上瘾或干扰的手段将增强用户的厌恶感。种植养成游戏中，引导用户播种但延时收取奖励的方式，可以将单次集中的注意力和行为成本分摊到长时间段内，减轻用户心理和行为压力。奖励获取：是否能真实获得奖品，并且觉得有吸引力有价值？诚信可靠 | 让用户有机会在现实中获得奖品，并通过奖品建立更好的品牌形象：当用户在游戏中可以获得实物奖励，或者通过游戏获得提升商品性价比的机会，都会提高内置游戏的经济价值。其经济价值主要通过奖品的高价值性和真实性进行体现，真实性体现在用户能真正获得与平台承诺一致的真实奖品，或者给消费带来实际效益，不仅强烈激励参与动力，同时传达诚信可靠的品牌形象。例如通过种树游戏，用户真实获取高品质水果和感谢信，而不是有破损但试图遮掩的奖品，或者让用户付出极大的精力和时间成本却没有相应回报。图 20 正确示例：芭芭农场奖品图 21 错误示例：奖品欺骗场景关联 | 在消费决策中强化游戏可以带来的价值，并在行为上建立联系：其次，需要逐步引导用户建立消费场景与游戏场景的关联认知和行为习惯，在关联的流程中不断强化对游戏价值的认知。例如在消费决策前透露出游戏道具可以带来什么额外价值，决策中让用户体会到性价比提升，促进消费转化，消费决策后引导继续领取和参与游戏，逐渐提高流失沉没成本。以淘宝淘金币游戏为例，在商品详情、购物车、下单页均有淘金币可以抵扣现金感知，下单后引导用户领取行为，随后立即展示淘金币可以用于购买的其他商品，再次刺激消费动机。图 22 图片来源：淘宝淘金币5. 乐趣代入：是否在故事主题、交互方式、视觉语言方面具有新颖和趣味性？内置游戏与其他产品的区别在于，它是一种通过游戏艺术性和情感性的方式与用户沟通的方式，主要是通过有主题的叙事、交互反馈和视觉符号将社会和品牌的价值观传递给用户。如果在某方面具有强的新颖和惊喜感，也将激励用户的驱动力。例如支付宝全民运动采用虚拟地图结合现实场景的玩法主题，积累用户线下步数在线上进行虚拟徒步活动，满足疫情期间人们对出门旅行的想象和愿望。或者对游戏关卡进行故事包装，在支付宝三小时公益中，用户与小树苗的故事分为多个章节，具有不错的情感维系效果。图 23 图片来源：支付宝三小时公益&支付宝运动APP 内置游戏的驱动力趋向分析为了在制定内置游戏设计策略时，更清晰地了解应该把握何种驱动力，我们结合以上六大维度将 8 款游戏的用户定量结果进行合并，制作驱动力可视化图表，帮助设计者宏观了解当下内置游戏的综合驱动力趋势，从微观了解各竞品的驱动力构成和优劣势，结合自身产品的消费场景和用户画像进行游戏驱动力定位和设计，跟踪数据验证效果。图 24 各维度用户评价聚类图 25 八款 APP 内置游戏的整体驱动力趋向从上图可以看到，乐趣代入、奖励获取、自我成就超越各维度平均值，是内置游戏的主要驱动力，在价值认同上仍然有很大待探索空间。同时我们也将 8 款游戏各自的定量结果对应到驱动力模型中，与整体各维度平均值进行对比，由此看出用户视角下各款游戏的驱动力构成和优劣势。从图中可以看出，蚂蚁庄园、多多果园、省钱消消乐、淘金币和斗地主均在乐趣代入上对用户有较强的吸引力，淘宝人生和蚂蚁庄园通过自我形象 DIY 和虚拟角色陪伴玩法，在社会归属营造上有较好的动力优势，斗地主和淘宝人生给予用户较好的自我成就体验。图 26 八款 APP 内置游戏各自驱动力趋向除了从定量结果上了解驱动力趋向，定位到各维度下的定性描述将帮助我们更好发现问题和机会点。例如蚂蚁森林在奖励获取、自我成就、价值认同和社会归属上有明显优势，对应到定性评价上，用户在自我成就维度上的评价是：在现实和虚拟世界种成属于自己的树是一种很大的激励；在奖励获取上，用户觉得每天消费和步数都能转化能量定时领取，有一种收取果实的感觉；在价值认同上，用户有参与公益活动的经验，觉得游戏主题很契合自己的价值观，在力所能及范围内帮助他人并看到效果，愿意主动参与和传播；但在乐趣代入上，用户觉得画面比较儿童化，而且游戏玩法比较单一，太简单了缺乏操作趣味，要不是排行玩法可能就弃了。目前驱动力模型能基本从用户视角体现游戏驱动力全局状态，但不代表所有用户群体的感知，具体问题仍要具体分析。驱动力模型是一种探索和评估的工具，帮助设计者更有针对性地洞察用户诉求，验证设计效果。实践应用从现实中提炼出来的方法，还是要应用到现实。一方面是组内学习，我们基于模型定期组织游戏设计方法共析会，另一方面是结合业务，寻找模型促进 58 业务增长的落地机会。初期依托于 58 同城「我的家」游戏，研究小组发起与我的家游戏项目组共创的「成长体系 x 游戏化驱动力模型」头脑风暴会议，参与者包括产品经理、交互设计师和 UI 设计师。大家先学习了有关驱动力模型的使用方法，了解当前我的家驱动力趋向。随后大家借助模型，主要从增强自我成就感角度进行成长体系的玩法机制、故事叙事、交互方式进行设计，最后筛选出 16 项有潜在机会的想法，共建落地推进计划。图 27 58 同城我的家游戏驱动力分析图 28 驱动力模型 X 我的家成长体系共创会同时也在驱动力六维度启发下，结合前期沉淀的设计案例和方法，在今年招才猫产品中应用。结合业务特点设计有故事感的年终总结报告和突出成就感的春运活动对战玩法，尝试将驱动力模型从前期的设计方案探索到效果评估的全过程进行应用探索。图 29 招才猫 2021 年终报告设计展望世界上没有通用不变的模型和方法，现实业务环境是模型生长的土壤，在与现实的沟通和碰撞中才能不断完善和促进模型的成长，研究小组在未来会寻找更多探索和打磨的机会，也期待和各位的合作！最后，研究和码字很不容易，如需借鉴和转载请标明出处，也欢迎大家找我们交流~游戏化设计研究 01 见：https://mp.weixin.qq.com/s/61V622oGHqD19KwLSKQbZg参考资料：Self-Determination Theory-Deci Edward L & Ryan Richard M.游戏设计艺术-Jesse Schell翻阅一篇论文后，我发现「游戏化设计」的真正玩法（附案例）前言今天想跟大家聊聊如何实现一款好的游戏化作品。阅读文章 > 欢迎关注「58UXD」的微信公众号：本篇来源：优设网原文地址：https://www.uisdc.com/game-design-3
飞翔的企鹅
张大湿
在路上
落霞与孤鹜
表哥
