信息 用户 业务 在决策类产品中，用户的行为路径一般从信息分析场景到信息决策场景。系统关键信息密度的高低是影响用户决策速率的重要因子。因此我们建议从「信息拆分与重组」、「功能高效聚合」两个层级出发，以提升关键信息在页面模块中的的密度。B 端有效信息密度提升设计框架的颗粒度由粗到细可总结为三个层级，分别为基础层、功能层与信息层。首先是基础层，B 端产品多场业务景、多用户角色、多任务流程的关键性差异决定了业务侧信息是一切设计的出发点；再者，需依据业务场景定义、角色定义与任务流排布的相关内容链接与聚合产品功能；最后，基于以上信息，使用交互与视觉相结合的设计方法，降低用户与系统的交互成本，引导用户聚焦产品核心能力，提升关键信息在页面中的密度与触达效率。「信息拆分重组」：在 B 端系统中，信息拆分与重组是依据业务与产品内容对信息进行重新组合，以求达到低跳转、高密度、有效触达的设计目标。「功能高效聚合」：在 B 端系统中，功能高效聚合是依据业务场景与业务逻辑对产品功能进行重新整合，旨在单位时间、单位面积内的带来更多商业效益/效率提升。案例一：入库计划-销售计划确认产品设计方法：信息层拆分与重组。项目背景：基于对计划方式的调研及整理，结合业务侧对于销售计划确认模块提供参考信息过少、浏览体验较差等问题，对明细表格及其他部分进行整体体验升级。用户痛点：销售计划确认明细表格的浏览与分析效率低下，导致线上计划确认难。设计目标：依据业务逻辑对表格信息进行拆分与重组，减少并优化用户眼动轨迹，提升信息展示密度。案例二：全流程数据概况产品设计方法：功能高效聚合项目背景：对全流程进行数据可视化，分环节数据监控，同时展示时效等更多维度数据，便于业务快速定位异常并跟进处理。用户痛点：用户在产品方案中无法快速获取到履约率相关数据，在一定程度上影响数据分析与决策的效率。设计目标：依据业务逻辑排布浏览分析全流程数据任务的起点、过程与终点，缩短优化用户眼动轨迹，提升信息触达时效。最后以上就是「关键信息密度提升设计」的全部内容啦～录入流程设计、任务中断回溯设计已经发布，感兴趣的小伙伴记得阅读收藏哦～后续会为大家带来「场景化设计」等 B 端的设计方法，希望能给正在从事或准备入局 B 端的的小伙伴带来启发，也希望跟大家一起探讨更多的 B 端设计方法。B端案例实战！执行类产品的录入流程设计指南执行类产品中，信息录入是用户工作中最常见的场景之一，用户按照要求录入信息提交给系统，系统整合信息以完成执行结果。阅读文章 > B端决策类产品设计指南：任务中断回溯设计在 B 端产品线特别是在决策类产品中，针对在较长时间段内任务中断回溯的场景的设计方法在 B 端产品线中，特别是在决策类产品中，经常会出现因为需要决策的信息量多、任务处理周期长而造成任务（主动 or 被动）中断，用户反复多次进入任务处理流程的情况。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/density-lifting-design
用户 功能 工具 相信这几天设计圈和产品圈的同学都在讨论 Figma 封禁大疆的团队帐号这个事儿，经过多轮文章和视频的洗礼，这个事件的始末和性质相信大家已经掰开了揉碎了看明白了。担心也好，警醒也罢，各位心里都有数了，受到影响的大疆和其他企业应该也已经转向 plan B，我这边想先聊点别的——关于Figma 是如何借助两波风口起飞的，两位创始人的创业经历，以及 Figma 与拜登设计团队、Adobe 的过往交集。（看过银河系漫游指南的同学应该都知道这是啥意思）首先，别慌。就此时此刻而言，绝大多数的国内 Figma 普通用户不会受到影响。1、暂时，对于绝大多数人不会有太大影响如果你只是一个普通的 Figma 用户，就目前而言，很大概率对你是完全没有影响，至少使用免费套餐的普通用户而言，你不会因为 IP 地址是中国大陆而被禁止访问，即使是购买了 12美元/月专业用户，也无需在注册购买的时候注明公司和企业。换句话说，Figma 不知道你是谁。而往下看你会注意到，在专业用户之上，还有 Organization 和 Enterprise 两个套餐，后者应该是最近新增的。而真正可能受到影响的，是购买后面两个套餐的企业用户：如果你仔细查看目前 Figma 对4类用户提供的服务的列表，你会发现，绝大多数的设计功能和常见的协作和管理功能，其实基础和专业用户两个套餐都是不缺的，而主要的差异，存在于下面的部分：这当中基础和专业用户套餐中所不包含的功能，绝大多数都是特别进阶和细分的功能服务，比如协作中的定制工作空间、语音通话、分支与合并，设计系统部分的共享字体、组织、多团队设计系统共享，开发当中的私有插件，等等等等，绝大多数国内正在使用 Figma 做设计的设计师同学有几个人真正深入用到这些功能？而这些功能有哪些是彻底完全无可替代的？对于使用免费版和专业版 Figma 帐号的同学，起码现在不用担心，没有影响。不过，既然我说「绝大多数」，也就意味着影响还是存在。对于拥有多个大型设计团队，并且基于 Figma 进行设计、开发协同的大型企业和公司而言，团队和企业账户下的「管理与安全」部分的独享功能，可能是都有需求的，比如大疆。包括插件管理、中心化帐号、用户帐号自动加入、链接和文件管理等等这些功能，也正是涉及到复杂协同环境的大型设计团队所需要的，而他们也是这次事件中受到威胁最大的部分，而真正受到实质性影响的，则是出现在 600 个企业名单上的一部分国内企业。当然，Figma 制裁国内企业这件事情虽然并未涉及到我们全体，而我上面所探讨的不同套餐和用户受到影响的差异，也是「现在」这个时间节点的状况，这并不意味着后续不会发生变化。不过我们大家都很容易在这种事情上「感同身受」，出于本能未雨绸缪准备备用方案也非常正常。好在国内设计软件服务蓝湖、即时设计等守望相助，提供了 Figma 的文件导入服务，在短时间内解了受影响企业用户的燃眉之急，也为准备迁移设计平台的用户及时提供选择，远哥在这篇文章当中提供了相关的介绍和入口，我这里也暂时不赘述了：Figma封禁大疆账户！国产软件的春天来了？就在上周六，刷微博时一条微博引起了我的关注：这则消息很快引起了轩然大波，有网友在评论质疑消息可靠性后，很快博主贴出了Figma 官方发给大疆的通稿，并表示向大疆朋友确认了消息属实。阅读文章 > 说完「目前」的状况和影响，，接下来把时间跨度放大，来看看这次事件的 B 面。2、Dylan Field 与 Figma 先重新审视一下 Figma 是怎么走到这一步的，很重要。正如同我们所知道的，Figma 目前的主要竞争对手 Sketch 和 Adobe XD 都是本地软件，而 Figma 恰恰相反，它是一款可以直接在网页运行的、天生带有多人协同属属性的「轻量级」设计服务和工具。在成长性和功能拓展上，Figma 明显超出两位竞争对手。当然，这种特质和它背后的始作俑者的的确确有着直接的关联。在维基百科中文版中，对于 Figma 和它的 2 位主要创始人的介绍是这么写的：「迪伦·菲尔德（Dylan Field）和埃文·华莱士（Evan Wallace）于 2012 年开始着手开发 Figma。这种基于Web的设计工具是菲尔德和华莱士在2011年就读于布朗大学期间所构思的。2012年，华莱士从布朗大学毕业，而菲尔德则退学接受了泰尔奖学金（Thiel Fellowship），该奖学金提供了10万美元用于寻求创业想法。随后，两人移居到旧金山，全职投入Figma的工作。Figma从2015年12月3日开始提供采用邀请模式的免费预览程式，于2016年9月27日首次公开。」这两位联合创世人中，Dylan Field 的个人经历更容易查到，而恰恰是他的个人成长经历，能够帮我们管窥 Figma 这个工具成长到今天这样的一些缘由。图片来源：维基百科1992 年出生于加州彭格罗夫 Dylan Field ，6岁的时候开始学习代数，从小对计算机感兴趣并且参加过 国际青年组织 FIRST 所举办的机器人竞赛，甚至在 Windows XP 的广告中作为演员露脸，中学时代长期和学校一位「在数学方面非常专业的看门人」一起玩，并且开始对设计产生兴趣。而升入高中的时候，Dylan 很自然地选择了一个位于索诺玛州立大学内的附属技术高中，这所学校除了常规的教学内容之外，还会额外提供大量科学、技术、工程和数学类的学科知识，而这个阶段 Dylan 和朋友一起制作机器人和网站，甚至参与了社交媒体方面的研究，而正是这样的契机使他得到了通往布朗大学的推荐信。《社交网络》进行中的黑客马拉松2009 年，Dylan 正式进入布朗大学学习计算机科学，在大学期间，他组织过黑客马拉松（著名电影《社交网络》中有展现过扎克伯格搞黑客马拉松的场景），在 LinkedIn 实习，并且两度进入 Flipboard 实习，大三第二次去实习的时候，他的身份是技术产品经理。而正是在 Flipboard 实习阶段，让他开始怀疑自己继续在大学进修计算机和数学的计划，并且在他遇到同样毕业于布朗大学并且从事图形学的 Evan Wallace 之后，决定创办自己的公司。Dylan 的个人成长经历和所具备的技能，大学和实习阶段在互联网初创公司的经历，以及当时正在快速演进的互联网技术，为后面 Figma 的出现铺陈出重要的底色。从各种意义上来说，Dylan 和 Evan 所创建的 Figma 抓住了上一个10年当中，2个关键的风口。3、第一个风口，HTML5 和 SaaS2009 年 5 月 28 日，彼时以扁平化管理而著称的 Google 的内部孵化并正式上线一个在当时看来极为实验性的产品，Google Wave 。Google Wave 从根本上了来说是一个在线实时协作编辑的软件框架，而在当时的用户眼中，看起来是一个集成了邮件、实时通讯、多人协作、实时开发等大量功能，可以嵌入各种各样媒体、服务功能的复杂集合体。彼时 Google 还未正式退出中国大陆，我曾经在大学阶段有幸体验过 Google Wave，当时常与朋友在 Google Wave 的协作文档中聊天，添加简单的媒体链接，分享信息。无法忽视的是，Google Wave 的诞生上线和 2008 年 HTML5 第一版草案的公布不无关系，当时想要体验 Google Wave 需要使用最新版本的 Chrome 浏览器，而这个时间节点恰恰是 Chrome 和 Firefox 浏览器开始普遍支持 HTML 5 的时候。同在 2009 年，Node.js 和 AngularJS 正式发布。（这一年，一直热衷于网络技术和设计的 Dylan Field 前往布朗大学上学）Google Wave 在 2010 年正式宣布暂停研发并于次年彻底暂停服务，用户仅能阅读自己的内容，直到 2012 年 Google Wave 彻底在 Google 删除，并完全移交给 Apache 软件基金会。Google Wave 存在的时间非常短暂，但是在它关停之后，它在实时协作编辑开发上的探索，直接反哺了 Google Docs 和 Google Drive，而这两项服务为谷歌此后拓宽了市场，甚至成为了 Google 如今占领教育和低端笔记本市场所用的 Chromebook 的一个重要先决条件：Pixelbook 2013 原型机，A面顶端两侧的 LED 灯在正式版中被移除了。更重要的是，Google Docs 这项服务，是 Figma 最终定型的重要参考，而两者在基础的思路和特性上，几乎是沿着 Google Wave 的这条脉络，一脉相承。从2009 年到 2012 年，Google Wave 大胆的尝试给彼时很多软件开发商和服务供应商打开了新世界的大门，围绕着 HTML5 所延展出来的技术、服务与工具如同雨后春笋般涌向，越来越多的 SaaS 服务开始选择使用浏览器这样的轻量级瘦客户端交付给用户，让复杂的渲染和计算留给位于云端的服务器来处理。2012 年刚刚成立 Figma 的 Dylan Field 和 Evan Wallace 并没有明确他们要创造的产品会有什么功能，具备什么样的服务，但是他们确定一件事情：「我们的产品应该直接立足于浏览器，它是一个免费、简单且充满创意的工具，要让任何人都可以借此发挥自己的创想。」随后，Figma 正式开始开发。4、第二个风口，去 Adobe 化的 UI 设计做 UI 设计这个事情在很长一段时间里面，靠的主要是 Adobe Photoshop。一方面 Adobe 和苹果早在90年代初就已经是深度合作的关系，甚至 Adobe Illustrator 干脆就是在 Macintosh 上研发测试的，Adobe Phtoshop 最初也是如此。另一方面，在很长一段时间里，UI 设计也需要 PS 来作为视觉呈现的支撑。在 2000 年前后，以 MacOSX 1.0 DP3 为分界点，正式引领整个 UI（GUI）设计圈子向着拟物化设计进发。具体参看《Mac视觉史》第三篇：Mac 视觉史 vol.3：浴「水」重生的 Mac 视觉美学世间所有的相遇都是久别重逢。阅读文章 > 这些高度拟物化的肌理材质，渐变的光影，丰富视觉层次，使得设计师不得不选择 PS 作为 UI 设计的工具。加拿大设计工作室 Teehan + lax 作为非官方为设计师提供的 iOS 6 的 PSD，当时苹果官方还没有在 HIG 当中提供 UI Kit。这种追求高光阴影和肌理的拟物化设计在 2010 年前后抵达了高峰，彼时著名的设计社区 Dribbble 和国内论坛 iconfans 内聚积着大量热衷于「抄现实」的拟物化 UI 设计高手。2009 年的 Dribbble 网站我真的找不到更清晰的当年的网站截图了然后，设计方向开始发生转变。虽然微软早在 2002 年的时候就开始在自家 Zune 播放器上尝试扁平化设计，但是直到 iOS 7 （2013年）和 Material Design 出现，市场份额极小的 Windows Phone 7 的Metro 设计风格延伸到桌面端的 Windows 8 上之后，扁平化设计的趋势才彻底盖过 拟物化设计。而移动端用户数量爆发式增长（2013年移动端流量正式超过桌面端流量），和同时期这种设计风向的改变，是让 UI 设计领域开始去 Adobe 化的重要前提。Sketch 1.02010 年问世的 Sketch 最初的目标，是希望在 Mac 平台上给用户提供一个足够轻量、足够快速的矢量图形编辑工具，实际上当时 Sketch 的创始人 Pieter Omvlee 对于未来的走向也没有清晰的思路：「当时我在特温特大学（荷兰）刚刚开始我的计算机科学研究。当时的想法是制作一个简单的绘图应用程序。那时的独立应用场景要小得多，似乎有一个我认为可以填补的空白。……上线后，我们被功能请求淹没了，保持专注一个方向是一个极大的挑战。每个人都想把 Sketch 拉向他们需要的方向。而真的迎合这种需求，风险在于你最终会得到一个怪物，一个可以做很多事情但没有办法掌握的应用程序。」当时有用户认为它是臃肿庞大的 Adobe Illustrator 的优质替代品，而此时 Sketch 的开发团队已经开始将 Symbol 作为核心功能提供给用户，只是当时更加粗陋，仅仅类似于 PS 的智能对象（真正的 Symbol 功能是到 Sketch 3 的时候才具备），不过，包括布尔运算在内的基础的矢量图形工具都已经基本具备。此后，随着扁平化设计的崛起，快速迭代的 Sketch 吸引了越来越多的使用 PS 绘制 UI 的用户，它逐渐成为一个现象级的 UI 设计软件。原本轻量级的软件体量，明确的功能，轻松兼容日渐复杂的 UI 设计需求（比如对于 x1 x2 x3 尺寸界面的轻松导出），快速而便捷的画板等等。Sketch 3与此同时，处于阵痛期的 macOS 平台对于 App Store 的软件分发机制有更多干预和要求，很多软件受不了对于功能和用户关系的干预而独立，其中就包括 Sketch。用户对 Sketch 的认可也使得它有了底气通过自家网站来进行许可证分发，此时正是 2015年，而这一年的年底，Figma 正式推出了第一个 Beta 版本。在这个扁平化设计风行、追求轻量高效设计工具的阶段，Sketch 和 Figma 选择的方向，其实是殊途同归的。和最初的 Sketch 一样，Dylan 对于 Figma 的未来形态并没有明确的远景，并且一度考虑制作成为一款3D软件。从 2012 年到 2015 ，Dylan Field 和整个 Figma 团队都面临着极大的压力，Dylan 本身对于 Figma 发展方向的不明确、领导经验的缺乏和融资上的挑战，使得很多员工在这个过程中离职，甚至影响到 Figma 的发展，最终是「团队中其他成员对 Dylan 进行了干预」，才在一定程度上扭转了管理上的问题。图片来自：维基百科2013年，Dylan 在寻求种子轮投资的时候，投资人 John Lilly 直接拒绝了他的请求，并且直言不讳地他说：「我想你压根不知道自己在做什么。」虽然 Dylan 最后从 Flipboard 的董事 Danny Rimer 以及别处为 Figma 拉来了 380 万美元的种子轮投资，但是他对 John Lilly 的话念念不忘，并随后主动联系 John 寻求解答，而 John 则随口跟他说，「你可以去找 Adobe 的 CEO Bruce Chizen 请教」。而 Dylan 真的就这么做了。在「部分功能」上对标 Photoshop 的 Figma 最终 于 2015 年正式发布 Beta 版之后，John 看到了产品，并且讶异于 Dylan 敢于从前辈（某种程度上算是未来对手）那里寻求解答的品质，而决定带领 Greylock 为 Figma 领投了 A 轮总计 1400 万美元的投资。随后，在 2016 年上线了正式版，2017 年开始推出付费的套餐，而此时在 UI/UX 设计领域，Adobe XD、Sketch 和 Figma 的竞争关系雏形已经形成。得益于和 Sketch、Adobe XD 截然不同的部署模式，借助浏览器即可使用的 Figma ，让用户更容易触达，在对标 Sketch 的功能特性的同时，以更快的速度培养出自家的插件生态和用户社区，这确保了 Figma 本身的生命力足够强健。Adobe XD 1.0而和 Sketch、Figma 同期发展的软件和服务还有很多，在 UI/UX 设计这个领域，它们共同蚕食了当初属于 Photoshop 的份额，即使有 Adobe XD 后续补位。这种去Adobe 化的趋势还体现在其他分支领域，比如基于模板的软件服务 Canva，手绘领域的 Procreate。同时 Figma 每年获得的投资也逐渐提升，随着疫情到来，远程办公需求大涨，2021 年6月获得 E轮融资 2 亿美元的 Figma 的市值已经直逼 100 亿美元大关。值得一提的是，据 Forbes 报道在 2020 年美国大选过程中，约瑟夫·拜登竞选团队的设计素材也曾使用 Figma ，并且在 Figma 上管理了所有的视觉资产。聊到这里，我们也给大家拓展一下当年奥巴马竞选时的视觉设计：连任当选有何秘密？聊聊奥巴马背后的视觉设计！为总统做设计，大概是所有的设计课题中最为复杂的了，奥巴马在2008年顺利当选美国总统，如果要列一个答谢名单，排在最前面的，并且要给予最重要的感谢的肯定会有在他背后的视觉设计团队。阅读文章 > 而 E 轮融资的 2 亿美元当中，有不少国际投资者，而此刻 Figma 超过 80% 的用户都在美国以外，这一切都使得 Figma 在如今复杂的国际形势下，需要「站队」。其实我们换个角度来重新审视 Figma 站队的逻辑也不复杂，中国用户时至今日依然需要借助第三方的插件来实现 UI 界面汉化（比如 Figma.cool），可见 Figma 用户群体当中，中国用户的比例之低，在如今的国际形势下，被 Figma 「做出取舍」，也遵循着屁股决定脑袋的基本逻辑。Figma.cool/cn不过到了这一步，并不是最终的结果。5、后 Figma 时代的中国 UI 设计软件Thiel Fellowship 的一位高管是这样评价 Dylan Field 的：「他毫无疑问在技术上是有天赋的，同时身上有一种奇妙的融合感——他有将工程和艺术融为一体的直觉。」作为 Figma 领导者，Dylan Field 目前已有的访谈内容当中，很少会体现出他的个人政治立场——当然这不代表着他没有。只是在这次大疆帐号被 Figma 封禁这件事情上，资本和美国当局的政治立场的影响，不应当被我们忽略。但是与此同时，即使疫情发展到今天这样，全球化影响下，各行各业很难彻底断开，起码短时间内做不到，即使最极端的情况发生，彻底的决裂也很难一蹴而就。那么说回 Figma 这样的 SaaS 服务/软件 本身吧。在知乎上，我注意到了这一条回答：这从侧面印证了一件事情，类似 Figma 这样的 SaaS 软件服务，尤其是将大量的服务和功能放在服务器端的专业软件，在开发成本和难度上，是并不低的。与此同时，从 Figma 到 Notion，各类基于浏览器的 SaaS 服务又在疫情之下，前所未有地得到资本的青睐。那么可以确认的是，Figma 这样「有难度」又「有价值」的方向，是未来趋势，也是需求所指的方向，而这件事情本身，与政治无关。那么对于这个方向，国内的设计工具的状况又到底如何呢？国内老牌设计协作平台蓝湖自不必说。2021 年于10月23日，蓝湖对外宣布获得10亿元的C+轮融资，投资人为GGV纪源资本、红衫中国，充裕的资金是专业软件开发的底气。他们对标 Figma 的产品 MasterGo 在这次事件中挺身而出，为准备从 Figma 迁移出设计素材的设计师和团队，提供了直接的入口。而位于中国境内的服务器显而易见会比 Figma 更加稳定，部分在 Figma 中收费功能，在 MasterGo 中是直接免费的。我们之前提到过的「即时设计」其实也是 2016 年就开始了他们的征程，他们是定位则是「为互联网公司的产品经理、UI设计师、研发工程师提供实时协作的云端设计工具」。「即时设计」在2018年1月、2019年1月获得了数百万天使轮融资和千万级Pre-A轮融资，而在2021年密集获得了四次融资，总计数亿人民币，投资人包括高领创投、SIG海纳亚洲、源码资本、蓝驰创投、靖亚资本，以及美国对冲基金Coatue Management等。在这次事件当中同样为国内设计师提供助理的 Pixso 则来自万兴科技，Pixso 敢于对标 Figma 的底气在于，万兴科技在 2020 年控股了国内著名原型设计工具墨刀。2021年，集线框设计、PRD文档撰写、原型交互设计、视觉设计、UI设计、设计交付、设计规范管理、任务管理、团队管理等功能于一体的 「摹客DT」获得 沣扬资本和凯泰资本分数千万元的投资，而他们的方向也是「打造更懂中国设计师的设计工具」，同时希望能够做「世界的摹客」。与其说 Figma 这次的事件是一次「危机」，倒不如说是对国内 UI/UX 设计类软件的一针「疫苗」——伤筋动骨自然是不止于，但是在很大程度上激发了国内同类型 SaaS 软件获得融资，进一步推动研发，让国内乃至于国际用户拥有更多的选择，甚至推动其他创意工具的研发团队，在「可能存在类似风险」的领域进行软件、工具和服务的研发。6、最重要的事情总而言之，这次事件对于绝大多数的设计师而言，并没有根本上的影响。软件工具必然会越来越强，硬件性能也同样处于快速的发展中。设计师和设计行业的从业者更需要考虑的，可能是软硬件高速增长下，自身技能和能力的成长。7、最后的话曾经 Google Wave 埋下的种子生长出了 Google docs 和 Google Drive，它们在多年后成为了Chrome OS坚强的后盾，从教育市场借道，让 Chromebook 逐渐占领了美国的入门级笔电市场。而借由Google docs 的灵感诞生的figma，则翻身逆袭了 Sketch，在UI/UX领域扶摇直上，在SaaS 市场上一骑绝尘。这是前瞻者的成功也是天才的胜利，但更是资本和市场对于这一方向试错后的成果。Figma 这次操作背后可能同样有资本和某些个人的影响，但是它更重要的是印证了发展方向的准确性，甚至可以说，它是促使国内创新工具的本土化的的一针催化剂。在更长的时间尺度上，这次的事件最多是一城一地的小得失，后面的日子还长呢。起风了，各位。图片来源 ivankristianto参考来源：https://en.wikipedia.org/wiki/Dylan_Fieldhttps://en.wikipedia.org/wiki/Sketch_(software)https://www.stateofdigital.com/google-wave-is-back-called-google-drive-and-gives-google-more-grip/https://web.archive.org/web/20160628174909/http://www.businessinsider.com.au/sketch-leaves-apple-mac-app-store-2015-12https://web.archive.org/web/20201020042828/https://www.wired.com/story/figma-updates/https://www.forbes.com/sites/alexkonrad/2021/08/10/how-figma-became-designs-hottest-startup-valued-at-10billion/https://www.36kr.com/p/1490187765032840本篇来源：优设网原文地址：https://www.uisdc.com/dont-panic-and-use-figma
数据 用户 商品 Nathan Yau 在《数据之美》中写到，可视化并不仅仅是一种工具，而更像是一种媒介，能最大化帮助我们挖掘数字背后的信息，让数据“开口”讲故事。可视化设计将信息和数据转化为用户能够理解的图表、图形和地图等元素，通过色彩、样式凸显其中的变化，帮助用户更高效的获取信息、判断趋势、识别变化等。那么在可视化设计中怎么让用户能更好的看清看懂数据或信息、让用户快速感知数据变化、让数据于用户所处的情境相呼应是微交互思考的方向。应用于当前状态表达，帮助快速判断「医鹿-新冠疫苗热力图」随着新冠疫情的反复， 新冠疫苗集中接种导致的排队情况比较突出，用户查询适合接种点的需求比较旺盛，希望可以快速找距离近，有苗可约、排队时间短的接种点；该热力图给用户提供一款可以快速查询附近可约苗、少排队的接种点工具，并通过人流量可视化来高效辅助用户选择合适的接种点。「雪球股票」在 list 页面中，每条 item 的背景颜色会随着实时的涨跌情况闪现红色或绿色，在 list 页做到实时状态前置。通过可视化中变化的凸显，帮助用户快速达成目标，在最少的时间内获取更多的信息，并引导用户进行更深层次的探究。应用于复杂商家后台设计，帮助提效「饿了么商家端」数据指标形象化：利用动效描述数据指标含义，帮助商户更好解读。例如下方案例：对于加购转化这个数据指标的解释，设计师利用动态的加购商品示意图来演示对应操作的界定。「饿了么商户端」数据切换和页面联动：借助 C 端页面展示 B 端数据，做到一一对应且更有画面感。「饿了么商家端」利用集合符号所见即所得拖拽标签圈选人群。将商家后台系统复杂的人群圈选操作变得更加简便且更容易帮助商家端的运营人员理解复杂运营规则。利用 3D 可视化，多维度展示商品「淘宝」商品卖点的用户参与式互动表达 ：利用不同的手势滑动屏幕控制序列帧图片。例如案例左一图中为了让用户更直观地了解摄像头长焦模式下的拍摄效果，用手势操作结合画面变化模拟了真实长焦影像的效果。其他两个也是利用 3D 模拟工作原理，用户可看到宠物洗澡机可拆卸演示以及烤箱的微蒸烤箱技术实现效果。「淘宝」3D 化商品外观展示：720 度及任意缩放查看商品 3D 模型以及不用款式和颜色的切换查看，增加线上商品的真实感和功能细节查看。超全面的数据可视化设计指南：风格篇各位数据可视化设计师们大家好，鉴于平时有很多同学对我们的可视化大屏的设计知识点有很多不理解的地方，阿勇决定花一些时间去详细剖析一下关于这方面的知识，全部都是多年工作经验所得，绝对有料。阅读文章 > 欢迎关注作者的微信公众号：「AlibabaDesign」本篇来源：优设网原文地址：https://www.uisdc.com/micro-interaction-visual-design
用户 窗口 侧边 不知道大家对交互设计中的控件持一个什么样的态度，反正我自己入行的时候其实是挺“怕”这玩意的。这些东西好像都来头不小，让我一个不小心就犯很多体验错误。但现在来看这样的心态其实很不必要，因为尽管控件设计有很多约定俗成的规则，但严格来说控件的应用不该讲“对”和“错”，只讲一致性与更好地贴合场景。面对控件时态度放松一点，也能让人更好地去思考未来改进的可能性。另外，由于市面上已经存在很多比较基础的、移动端场景下或者 UI 角度的弹窗文章，所以这一篇我将着重讲一讲 PC 端那种特复杂的大弹窗怎么做，内容比较多，所以会分两期。初识弹窗想象一下你去一家意大利餐馆吃晚饭，正餐刚端上来你正吃的高兴呢，一个服务生空着手走到你旁边戳戳你：“这位客人，外面有个人叫你，你站起来跟我过去一下。”你不得不（很不情愿地）暂停吃饭，站起来跟他走了。同一个吃晚饭的场景，假如这次服务生端着托盘走了过来，你一抬头，他“啪”一下把托盘上的罩子打开，盘子上放着一个小纸条，并且示意你拿起来看看。在交互设计中，假如把全页面的跳转类比成那个叫你“站起来跟我走”的服务生，弹窗就是那个端着托盘的服务生。他用一个新的任务或信息（托盘里的纸条），打断了用户原本的任务（吃饭），但是并没有把用户从桌子上拽起来，完全离开当前场景——也就是饭桌。因此可以这么说：网页与移动端设计中，弹窗本质上是一种对用户注意力的引导形式。它弱于全页面跳转、可能具有打断性，要求用户从原来的场景中抽出一部分精力来应对它。什么是弹窗？既然弹窗是引导注意力的一种形式，那是不是所有引导注意力的控件，都能叫弹窗呢？在 PC 应用程序设计的时代，所有的任务都是在窗体或者窗口 （window）上面完成的。因此实际上不存在所谓“全页面”和“弹窗”的差异，只有“这种窗口”和“那种窗口”的差异。比如在我的这篇文章里出现过的两种“弹窗”，在 windows 7 中同属于 dialog box 类；而除了这种窗口（弹窗），当时还定义了 wizard、property sheet 等多种不同的窗口样式。每种窗口都有一个主要的解决问题与标准样式。PC 设计从应用程序进入网页时代后，用户不再在多个窗口之间跳来跳去，而是在一个网页窗口下完成任务。因此在网页状态下，设计师模仿继承了“窗口”的样式与交互形式，产生了我们熟悉的“弹窗”。随着网页/移动端设计的不断发展，我们也发现，其实不用完全依照应用程序设计窗口的那一套来做弹窗或者做触达，因此网页/移动端产生了很多独有的设计样式。这些样式虽然起源于窗口，但更灵活多变、和传统意义上的“窗口”有一些差异。由于中文表达的含糊和不清晰，现在国内设计界倾向于把这些形形色色的触达/操作形式全部都统称为“弹窗”，但细究起来，我们甚至可以画一张九宫格：你是弹窗原教旨主义者吗？我在这里无意于给“弹窗”这个概念正本清源，但为了下文能够更有指向性，我们这里只把“层级高于页面的”、“容器大概是个方形”的控件纳入接下来“弹窗”的概念范围。并且由于 callout/tooltip 的一些变体和 menu 菜单不太好区分，为了方便，这期就不讲这些比较小的非模态控件了。同时我也认为，大家日常工作中特别是做控件的时候，可以去思考一下控件的具体定义，以防沟通起来鸡同鸭讲。为什么弹窗？还是承接上文那个吃饭场景，那个端着托盘的服务走后，你急急忙忙放下刀叉，把字条从托盘里拿出来：展开一看发现上面写的是——气不气人？你可能当场就想跳起来大骂服务生：这点事情需要这时候来打扰我吗？同样的道理，既然弹窗只是一种形式，那么是否选择这种形式，必然是由其实质内容（也就是场景与任务）决定的。我基于我自己的经验把弹窗的作用分成三种（当然你也可以分得更细，比如 IBM 就把他们的弹窗组件分成 5 种）：触达弹窗：这个弹窗是由系统触发的，而非用户主动触发的，一般用作信息通知，可能附带简单操作信息展示弹窗：用户主动触发，一般用来收纳全页面上放不下的信息详情操作弹窗：用户主动触发或受用户的操作触发，可能用来承载复杂操作（比如表单）在决定要设计一个弹窗时，至少要思考三个关于弹窗内容的问题：是否急迫：假如这是一个触达弹窗，用户是否需要马上处理/查看弹窗上的内容/任务？具体情境：假如这是一个操作或信息展示型弹窗，用户在处理这个内容/任务时，是否需要对照或查看其他内容？这个内容/任务是否反复发生/需要反复处理？生效方式：假如这是一个操作弹窗，用户是否需要对照自己处理的结果，再次对内容进行调整？1. 是否急迫这个问题决定了你需要占用多少用户注意力，是否要选择“弹窗”作为你的触达方式。就像我们上面提到的，触达弹窗不是由用户自己触发的，因此这个弹窗肯定不在用户预期之内，这意味着用户有很大可能性不会去看这个弹窗。对于触达弹窗来说，假如这件事情不那么急迫，不需要用户马上进行处理、或者用户根本处理不了，那么你可以考虑用以下方式弱化、降级触达：降低视觉音量：模态弹窗变成非模态弹窗，或者设置弹窗消失时间主动触达降级为被动展示：将触达弹窗变成用户主动点击查看由于触达本身是个很大的话题，我们这里不做赘述。未来讲触达的时候再细讲。2. 具体情境对于操作或信息展示弹窗来说，这个问题决定我们选择组件的层级、以及是否需要阻断用户和页面其他内容的交互（也就是模态/非模态）。想象这么一个场景：假如你是一个中学老师，你正在给每个小朋友写期末评语。学校提供的写评语系统长这样：你发愁了：班上有 50 个孩子，每个人的期末评语得按照他们的平时表现和期末成绩来写。为了写这个评语，你得打开期末成绩 excel、打开学生档案，再打开百度搜索评语模板，一边复制、一边粘贴：再来一个场景：假如你是一个第一天上岗的客服，用户来找你咨询：“这件衣服有几个码呀？我能穿上吗？”你一愣，“等等哦，我给你去查查”，然后打开了商品链接一通翻找。等你找到了，关闭商品页正准备回复呢，这时候客户也消失了。这就叫完成任务时，需要“对照或查看”其他内容。这种情况下假如设计一个模态弹窗，的确好像起到了“引导注意力、让用户专注当前任务”的效果，但也严重影响了用户完成任务的能力。对此，我们一般有以下几种方式来解决：尝试不用弹窗，而采用侧边栏来承载信息或任务使用各种形式的非模态弹窗，来让用户在完成任务的同时，可以自由行动、甚至允许暂时中断任务比如第二个案例里，我们可以尝试用侧边栏承载商品信息，这样客服就不需要离开当前聊天页面，而可以直接通过侧边栏获取商品规格，直接给到顾客及时的反馈。而在第一个案例中，也许我们可以尝试在学生的单人信息页上打开侧边栏，或者做成停驻窗口（docked window）的形式。这样即使在输入中，用户也可以去查阅完成任务所必要的信息，降低任务的完成难度。这个案例之所以我们不使用侧边栏，而采用了层级高于页面本身的面板来完成，主要还是考虑到写“期末评语”这个情景比较偏向长文本输入、一次性提交后不再支持编辑，所以相对于页面内输入，面板感觉起来比较“郑重”。这个就纯属个人习惯了。3. 生效方式这个问题在操作型弹窗非常多见。设计师用 Mac 的多，不知道平时打开系统偏好设置的时候，有没有注意过不同的菜单，右下角一会有“应用”和“复原”按钮，一会儿又没有。很明显，这两种弹窗的生效方式（或者叫生效模式）是不同的。有提交按钮的弹窗，在你没有真正点击“提交”之前，所有的修改都只是暂存，并没有真正生效。而右边这种没有提交按钮的弹窗，在你与弹窗内容区交互时，就已经即时生效了。windows 给这两种模式起了名字：前者叫延迟提交模式 delate commit model，后者叫即时提交模式 immediate commit model。我们大部分在网页端能见到的常规模态操作弹窗，都应该采用有提交按钮、需要再次确认的延迟提交模式：它的潜台词是，你可以仔细思考一下你键入的内容、选择的选项，随意修改到符合你的想法之后，再提交生效。相比起效率，这种模式更加关注准确性，填错了可能造成一些后果。但假如你的任务本身操作量不大，但是变更很频繁，比起准确性、更关注效率，那么就应该思考是否可以采用非模态弹窗或者侧边栏+即时提交模式，来创造相对高效、轻量的体验。比如 windows edge 的这个侧边栏，虽然也是设置，但采用了非模态面板+即时生效。5000字干货！从5个方面帮你完整掌握弹窗设计方法！前言产品经理：我觉得这里要加个弹窗，你去设计吧。阅读文章 > 欢迎关注作者微信公众号：「白话说交互」本篇来源：优设网原文地址：https://www.uisdc.com/popup-design
用户 操作 破坏性 TCC 推荐：大家好，这里是 TCC 翻译情报局，我是张聿彤。尼尔森十大原则由毕业于哥本哈根的人机交互学博士 Jakob Nielsen 发表，Jakob Nielsen 对人机交互有很多研究，他提出十大可用性原则，用来评价用户体验的好坏，每个产品设计者都可以根据这十大原则进行自查。本文中主要介绍了防错原则的具体应用示例，接下来让我们一起看看吧。用超多App 案例，帮你掌握尼尔森十大原则谈到我们生活中的那些产品和服务，它们常伴于我们左右，影响着我们的生活，与我们处处相关联，同样的这些产品也会影响我们的感受，我们常常在使用时会感到喜悦，也偶尔会在使用另一些产品时会感到不舒服，这些感受都是由产品和服务的体验直接决定的。阅读文章 > 错误预防错误预防是用户界面设计的 10 条启发式评估可用性的原则之一。据统计，犯错误的频率和严重性与系统的整体可用性呈负相关。尽管无法确保用户始终按照我们希望的方式使用我们的设计，但仍有一些方法可以防止（ 或减少 ）用户误操作，而且当涉及到破坏性操作时（ 例如，从系统中删除文件）尤为重要。对话框是系统和用户之间的“ 对话 ”。模态对话框会打断用户本身的任务流程，并要求他们采取行动或向他们提供有关当前工作流程的紧急信息。在执行破坏性操作之前，用户通常会看到一个确认对话框。破坏性操作的确认对话框示例一个确认对话框，询问用户进行确认，他们想询问用户对刚刚操作进一步确认（ 以防止用户误操作 ）。这些行为被称为肯定性破坏性行为；由用户发起的破坏性操作，其中出现模态对话框以确认操作，并确保用户完全理解操作所带来的后果。在某些情况下，用户或系统可能会意外启动破坏性操作。例如，在填写尚未提交的表单时离开页面可能会导致数据丢失。当用户在没有保存数据的情况下意外离开页面时触发错误预防模态对话。如何改进破坏性操作的模态对话框？1. 在执行操作之前提示在执行具有严重后果的操作之前（例如破坏用户的工作 —— 删除文件 / 帐户等），应使用确认对话框，这在无法撤销的行动之前尤为重要。2. 重申用户的请求确认对话框必须重申用户的请求，并说明如果请求得到确认，系统将执行什么操作，这使用户能够更加清楚地了解其操作的结果。将用户的行为描述成一个问题，是一种吸引用户注意力，并让他们停下来考虑自身的上一步操作的方式。下面的示例证明了这一点。重申用户请求的破坏性操作确认对话框示例。3. 帮助用户理解操作为了实现这一点，微内容 [2] 很重要。应该避免是/否以及那种含糊的选项（ 参见下面的一个反面案例 ）并且按钮的文本应该着重强调即将做出的选择（ 例如，删除帐户 ）。此外，在对话框中添加一些辅助解释会很有用，但主要消息应该在按钮文本中，因为急躁的用户更有可能忽略那些辅助的解释只关注按钮的文本。( [2] 微内容是一种用户体验文案，以短文片段或短语的形式出现，通常没有额外的背景支持。)糟糕的微文案会让用户感到困惑，并可能导致用户犯错并非常沮丧。4. 将按钮差异化例如，在一个按钮上使用了红色，可帮助用户识别出来这是一个破坏性操作。在这里颜色与主按钮的文案相匹配，并明确了按钮的用途，但是，由于可访问性和文化差异，仅依靠颜色是不够的。尤其是世界上大约 4.5 % 的人口患有某种形式的色盲，仅使用颜色来传达意义可能会让我们的很大一部分用户被拒之门外。因此，按钮标签需要具有足够的描述性，以便在没有颜色的情况下独立表达含义。为了使警告信号更引人注意且更易于理解，还可以在屏幕上显示一个代表破坏性操作的图标。5. 不要过度使用对常规动作使用确认性对话框会影响用户对破坏性动作对话框的认知。如果用户看到了太多确认性对话框的模态窗口，他们可能会习惯它们，并且不再注意他们。结果就会导致确认性对话框失去了错误预防的能力。6. 保证简洁确认性对话应该简短，以便于浏览，但是，在某些情况下，用户可能希望在提交之前了解有关其行为后果的更多信息。在这些情况下，可以使用渐进式披露 [3] 的交互方式。( [3] 渐进式披露 ：渐进式披露不直接给用户提供大量的信息和选择，而是将这个过程分解成几部分，让用户集中注意力在当前的事件上，从易到难地引导用户，这样不仅可以确保用户不会被新信息淹没，还可以分解用户不想做的任务。)渐进式披露能使用户自主决定是否要了解更多当前行为的后果用一篇文章，帮你了解交互设计方法论「渐进式披露」大家好，我是 Clippp。阅读文章 > 7. 避免默认选择我们要避免给确认性对话框提供默认的选择，因为本来我们的目的就是通过这种模式让用户仔细检查他们的操作，从而预防用户犯错。8. 撤销破坏性操作理想情况下，我们应该允许用户撤销破坏性操作，很多时候在一瞬间你就意识到自己犯下了一个可怕的错误。许多 APP 允许用户撤销此类操作，或者使用撤销空间，或者让用户在最终完成操作之前编辑这些操作。这与启发式评估可用性的 10 条原则中另一条的核心观点相吻合 ，即用户的控制性和自由度。这可以减少用户的焦虑，并能帮助他们挽回重大错误操作造成的损失。当用户知道他们可以撤销操作并从错误中恢复时，他们会感觉对产品有更多的控制权。Google 的 Gmail 有一个可选的“撤销发送”功能已经有一段时间了，它为用户提供了 20 秒的缓冲时间来撤销他们的操作。9. 通过输入确认操作如果无法实现撤销按钮，我们可以提示用户在文本字段中输入文字确认执行破坏性操作（ 例如需要用户手动键入删除/确认/等 ）。提示他们输入以确认，强迫他们停下来并阅读模态文本，从而做出有意识的决定。虽然有可能意外地按错按钮，但不可能意外地输入动作，因为这需要深思熟虑，下面给出一个例子。提示：在非常关键的删除操作中也应谨慎使用这种方式，因为如果经常使用，可能会惹恼用户。“键入以确认”模式可确保用户做出有意识的决定以上便是针对破坏性操作预防模态对话框设计的 9 点建议，可能不能做到万无一失，但关注每一个细节，一定会让你的设计得到提升，进而提升产品的用户体验，如果你有别的建议和技巧，欢迎在评论区分享~从这3个方面，帮你掌握二次确认的设计思路二次确认的主要作用是防止误操作，以及警示操作带来的后果，避免用户无意之间执行了本不想做的操作。阅读文章 > 欢迎关注作者微信公众号：「TCC翻译情报局」本篇来源：优设网原文地址：https://www.uisdc.com/error-prevention
用户 场景 方案 背景VR 全景为家具行业零售场景带来革命性的变化，在交互式展示和营销体验这两个方面带来了突出的市场机会。相比传统的静态效果图，在谈单阶段有全景图工具的介入，带来了明显的客户留店时长增加、线上传播获客提升以及所见即所得签单率提高等商家营销价值。对设计师来说，借助全景图能够更好地为自己的客户展现设计方案，衬托方案的品质，注解方案的细节，让整个浏览过程的体验感受更加舒适沉浸。业务变化我们在跟更多商家的密切合作过程中，也承接了越来越多的全景图工具需求。而在之前的界面框架基础上进行堆积，整个界面变得臃肿不堪；商家们希望借助全景图工具能够打造更好的营销体验，增加获客率和成交率，方案设计师们对于如何利用交互式展示的形式，更好地展现方案效果提出了挑战。借此契机，由设计侧发起了此次体验改版项目。设计目标具体分析问题之后发现，①商家的诉求是能够通过全景图充分传递设计意图，提高营销谈单的效率；②用户也就是全景图的浏览者的诉求是能够快速获取方案信息，便于决策；③业务的诉求是能够有拓展性更高的框架来承载后续的新增功能，同时提高产品的访问深度。从而推导出了三个设计目标:用户侧：提升用户浏览效率商家侧：提升营销互动体验产品侧：提升产品框架可拓展性和品质感提升用户浏览效率设计策略：拆分全景图信息类型，在导览内和场景内分别进行优化用户在浏览方案时，主要有两类信息需要用户关注：空间物理信息：整屋信息，视角所在房间信息设计辅助信息：商品信息，家具信息，材料信息，品牌、联系方式等。将浏览效率的提升拆分到空间信息和设计信息的传递效率的提升，即在辅助浏览者能够快速理解整个空间的信息的同时，让方案设计者的设计意图可以充分传递给浏览者。1. 导览内空间信息传递单张全景图的技术本身即可以满足用户环视单空间的需求，但是在多空间的场景，需要全局视角将不同空间的全景联系在一起，此时导览的全局概览就变的意义重大。用户理解空间之间的关系，需要知道自己所在房间位置、所在位置和全局的关系。2D 的平面图导览和 3D 场景中的位置标识应有明确清晰的映射关系，并且突出用户重点关注项。此时经常出现的场景是在一个房间内渲染了多张全景图的情况，即一个空间内有多个渲染锚点。移动端和 PC 端的交互处理需要做区分。PC 端可以用鼠标精确操作，所以锚点直接平铺在户型图上方便用户切换，若是重叠严重，支持用户拖拽展开，方便用户点选切换。移动端精确操作困难，在有限区域内显示锚点只会干扰用户视线，故可跳转到三维户型，用滑动模型，点击选择切换对象。2. 场景内空间信息传递在方案场景内，用户是以第一人称的漫游视角环视单个空间信息的，此时，场景热点就是为用户跳转不同空间全景图而存在的引导媒介，也是在全景图中点击量最高的热点，如何让他们能够不突兀地显示在三维场景中，自然地引导用户进行点击是优化的方向。选用立体的形态更能让场景热点的存在贴合三维的场景。拉近空间名称与标志的距离，在多个带房间名称的场景热点距离较近重叠时，更好地识别定位关系。3. 场景内设计辅助信息传递设计师通常会对方案做出额外的补充说明，而这些说明需要满足几个前提：关注度区分，可识别性和有序性关注度区分：希望用户在浏览方案时对不同类型的信息的关注度是不同的，比如商品是需要用户重点关注的对象， 文字多会用于补充说明, 不需要用户重点关注。设计侧通过动效、颜色、细节丰富度等不同维度综合考虑，区分热点的重要程度，从而引导用户的视线。可识别性：不同于普通界面元素，全景图在底图非固定的前提下，要保证在亮暗两色上的可识别性，所以在样式上有一定的限制和原则需要遵守。信息有序一致：作为辅助标注不能喧宾夺主，打破用户浏览的沉浸感。所以标注虽然种类繁多，但需要按照体量，在有限样式中增加，保证信息的有序性和一致性提升设计师营销谈单效率设计策略：分层增加场景互动性，增加访问深度谈单成功的前提是用户充分了解方案，全景图工具提供在单间商品内，多件商品之间，多个风格间和多个方案间等多个维度提供互动形式, 提高用户跟场景方案的互动，增加了对方案的整体访问深度。用户可以更了解商品细节，同时有更多对比选择余地，方便快速决策；设计师可以纵向增加方案丰富程度，提高谈单成交可能性。提升产品框架可拓展性和品质感设计思路：细分用户行为场景，整合场景诉求点随着功能的不断增加，现有高权益版本含功能 30+个，如何提高框架的可拓展性，在界面上合理地布局，需要分场景来分析前置条件。定位场景跟浏览场景互斥，当用户将注意力放在查看方案的时候，是顾不上看功能列表的。因此将“看方案”和“找功能”的场景区分开，共用同一块区域，从而优化信息排布。但同时“用功能”的场景要求所见即所得，需要在操作功能开关的时候，及时浏览到是否在界面上生效，要求场景和功能能同时被用户关注到。以上条件决定了界面特征：在主界面「看方案」，尽量减少操作按钮占用界面的空间，让用户有足够的空间沉浸浏览方案内容，所以需要制定一定规则对现有功能进行整合收纳，同时为后续可能增加功能留出拓展空间。功能列表可以遮盖界面，因为不会同时看方案，但是因为部分功能需要及时预览生效结果，所以遮盖区域需要限制，不能是全屏。1. 框架拓展性提升-功能分类整合收纳同类功能，如热点开关，放在下级菜单中进行统一管理根据频率决定分区，将高频按钮外露，低频使用的功能在「工具箱」中收起；工具箱在有限区域内可滑屏查看。保证商家信息展示优先级2. 风格品质提升-风格探索关键词：未来、空间、延展，借鉴 HMI 设计风格 —— 微型仪表盘、斜切角动态效果 .video_pc { width: 100%; height: 585px; } @media (max-width:767px) { .video_pc { height: 50vw; } }当视频无法加载时请刷新页面，或前往PC获得最佳体验。结语全景图去年也在展厅等细分领域得到了商业化的落地。我们在设计的时候也会结合更多的因素进行考量，比如不同于家居空间的小巧，展厅等商业空间商品的展示需求会更加密集，在这种情况下，如何结合空间特性，借助前端技术进行巧妙的呈现等，也非常值得思考发散。新领域引入了更多不确定因素，在其间探索更需要设计师把握商业和体验的平衡，我们也会针对特定的课题进行更深入的探讨。文中的数据均已做模糊处理, 非真实数据，仅作为演示用途, 对数据呈现不负相应责任。想着手设计 VR 应用？给你这份实操性极强设计指南！编者按：虚拟现实类的APP 要怎么设计？阅读文章 > 欢迎关注公众号「酷家乐用户体验设计」本篇来源：优设网原文地址：https://www.uisdc.com/vr-tool-design
测试 可用性 用户 设计师面试被提问可用性测试？挺意外的，就着机会结合个人的一点小心得，聊点不一样的“可用性测试”技巧。可用性测试的应用场景与作用可用性测试(Usability Test)的应用场景是没有行业的明确界定的，它一般发生在产品研发上线的前中期，在功能或交互流程有待商榷之时，通过可用性测试可以获得更加真实的反馈来帮助决策或改进。当然已上线的产品，同样可以使用可用性测试为下个版本优化迭代做投资。其中探索式跟验证式是常见的两个可用性测试类型，探索式适合企业对产品进行创新设计以迎合新时代发展的步伐与商业竞争力，验证式适合企业追求精益运营或增长设计。对于可用性测试的概念，这里我用一段类比的情景来揭示出其中奥妙。做好一个饭馆，而菜品必定是馆子的核心竞争力之一，菜不好吃，那就很难形成竞争力或留住客人，所以开发新的菜品或改进就很重要。当厨师开发了新的菜品后，首先肯定是厨师们互相品尝，并不会直接上菜谱开售，这就像是内测过程，当厨师们觉得还可以时，就会找食客们进行免费试吃，通常这个时候厨师们需要食客们给出反馈或一定意见，如果食客们大多表示这个菜不错，下次还愿意吃，那么就是表示这个新菜品的可行性很高，用户满意度不错，就可以考虑对菜品优化上菜谱了。而这个过程就像可用性测试一样，它为新菜品上菜谱降低了风险，为菜品对菜馆整体体验提升了保障，其中“菜馆的食客”就像是测试的目标用户，请求他们尝试新的菜品并给出意见，这便是招募用户和测试阶段，询问食客是否还会再点这个菜品，觉得这个菜品在什么价位区间，就算是对用户满意度或可行性衡量了。相比专业可用性测试，只是少了更多的测试流程、测试技巧与科学严谨的分析汇报，但是基本概念是一致的。但值得注意的是针对单个菜品的研究并不是面向整个菜馆的，可用性测试很少用于研究用户对产品或服务的整体体验。所以可用性测试的本质就很好理解了，以互联网产品为例，其实就是服务数字化后的功能与流程含有不确定性，而决定找到目标用户还原使用场景进行测试验证，以评测设计是否行得通、哪里需要改进，为功能上线减少风险加强容错，减少试错的成本。高保真原型与测试场景还原要测试就得有测试内容，所以测试对象是必不可少的内容，这个过程是我们还原真实用户在特定场景下进行产品体验的一系列问题反馈，那么为了尽可能的还原“真实”，肯定不能只是在用户的真实性上下功夫，接近真实的高保真原型就显得尤为重要，以互联网产品来讲，还原一个可交互的高保真原型并不难，成本也不会很高，可能就是信息内容设计与素材准备会相对麻烦点，对于交互动效，基本可用就行，不必过分追求，并且实现的工具也很丰富，对于大型框架原型可以使用“墨刀、MasterGo、AxureRP”等制作，小型精致的原型可以使用“Principle、Hype3、Flinto、Sketch、Keynote”等制作。反而是工业产品设计的原型会比较麻烦，有的可能要出 3D 打印甚至开发测试样品，尽管这些工作会花费一定的时间与成本，但是从产品稳健发展的战略来看，这些投资是值得的，也是老板们可以接受的。在大多数的可用性测试文章或教程中，用户都是在一个相对降噪的会议室或实验室进行的，其目的是为了更好的布置设备用于过程的观察与记录，同时为用户测试减少干扰与评估难度（其实也省钱），但事实上还原产品服务的真实场景是很有必要的，并且一些产品服务自身就会含有一定的场景属性，所以你的测试环境就应该考虑接近真实场景的布置，甚至考虑跳出会议室、实验室。这样的目的也是为了更加真实的还原使用场景，以取得更严谨科学的有效信息来赋能设计，这也是为什么大多数产品需要上前线测试的原因，就像药品诞生于实验室，上架于临床一样，例如出行、运动相关产品，如果依旧停留在写字楼里测试实验，那就是闭门造车。任务与指标定制化设计产品的本质是为用户提供服务，用户会为了达成自己的某个目标或需求而花费时间使用产品，而我们需要用户测试一系列功能来评测是否能够协助完成目标任务，所以我们在设定不同任务的时候应该以某个用户需求或目标为导向来驱动用户使用产品功能，而不是系统的指出完成那些操作任务，那样没办法深入挖掘真实有效的信息，所以在向用户颁布测试任务的时候，我们应该为用户建立一些任务背景，并且尽可能看起来真实可靠，容易接受和共情，甚至你可以在测试前的暖场环节，根据此次的功能作用推导一些使用场景和需求，并与用户进行简单交涉，看看哪些需求很有可能发生在用户身上，并以此需求目标来调整任务的话术来驱动用户完成测试，值得注意的是如果测试的部分比较明确，那么你的任务目标也应该尽可能的聚焦或明确下来。好了，为了方便理解我要说人话了重点补充：因为在整个测试的过程中，参与测试的用户不止一个，所以在了解用户情况后，可以综合一下共同的特征再去提炼优化任务目标，以保证在多个参与者中维持评估的一致性。并且任务目标应该尽可能的准确有效，我们是要测试新的拍摄识别功能，那我们就应该要求出来，而不是说看完书后使用 APP 的笔记并尝试各种功能支持，产品或功能所没有的就不要提。不保证有效性，最后也只能让用户感到困惑而已。通常完成测试任务的过程中，会涉及到多个功能之间的交互，所以任务目标涉及的多个阶段应该贴合实际的操作顺序或流程规范，另外尽可能的避免专业术语的出现，务必考虑“适老化”一下。关于指标定制化通常在可用性测试中，是否可用的指标被划分成了三大面：1.有效性、2.任务效率、3.满意度，对于这三方面我们可以继续细化成若干个二级指标用于界定产品可用性，至于你家的产品是什么行业、什么阶段、什么用途、有何特性，应该满足哪些指标为可用，我就不深入了，相信大家心里都有数。简言之核心就是考虑产品的特性与阶段，灵活的配置可用性的指标，这里整理了些常见的指标与说明用于参考；用户测试中常见的问题尽管我们有测试脚本甚至测试排练，已经尽可能的保障了可用性测试的稳定可靠，但实际上在用户测试的阶段还是会出现各种问题，用户像一个熟睡的婴儿，何时醒来何时哭泣不可预见，所以这就要求测试的主持人能够灵活变通，同时在技巧上符合可用性测试的科学严谨。在可用性测试过程中的科学严谨一方面体现在方案的合理性、测试主持的技巧上、及评估分析量化的方法上，这些大多可用性测试的文章或教程中都会提到，这里就不展开啰嗦了常见问题举例：1. 他似乎在想些什么但是没有说出来？你在想什么可以分享一下吗？2. 用户好像卡住了或遇到 bug 了这没事儿，是我们产品设计的问题，你可以考虑跳过这一步好了3. 就是这个，它怎么就那啥了？表述不清你刚刚打算做些什么，如果是你，你准备怎么去设计？有没有一些参考4. 然后我要怎么做呢？对于用户提问说明遇到了障碍，尝试反问你平时会怎么做？5. 用户反馈了一些趋势或点子，看起来很有价值尝试深挖，顺着点子或趋势向用户多问一点，但是不要直接问“为什么”，可以尝试问好在哪里或者哪里不好，让问题更有头绪一点以上不难看出，即使有了脚本，但是用户依旧是一个变量因素，所以脚本依旧需要不断调整，也只有去调整才能更好的保障测试结果的有效性，同时主持者也需要随时准备灵活的应对各种幺蛾子。创新与颠覆性设计如何测试可用性测试被很多人视为评估体验的制胜法宝，但实际上很多产品在行业中已经逐步成熟，并有大企业花费大量资源进行研究摸索，让生态系统更进一步，所以说要是你的产品没有特殊的创新或瓶颈，而是传统的功能研发，其实并不一定要花费成本去做可用性测试，直接按照行业标杆也是没问题的。那么你的产品就是有创新或颠覆性设计怎么办？通常这个时候就会面临一个问题，打破传统或者颠覆用户的常识。类似这种颠覆式或创新技术其实非常多，例如按键手机一下到了触屏时代、智能驾驶、语言助手的诞生、刷脸支付等，这对企业是机会也是风险，所以在进行可用性测试的时候也会有些不大一样的地方。我们悉知在可用性测试的三大指标中就有一项是“效率”，对此也会有一些完成任务的时间作为指标，这些指标通常是根据内部人士或专家完成任务的时间乘上 2 倍或者更多倍作为一个评测指标。但是对于颠覆性的变化，我们需要给用户首次测试留出更多的时间去学习去适应，在此之后，可以让用户再进行 1～2 次的测试，并且比较多次任务完成的时间变化，如果时间能够大幅度缩减且完成任务，那就表示可用，而这样做也是为了保障测试的科学严谨性，以避免学习门槛对创新性的评测影响。多版本 Battle 你需要小型可用性测试可用性测试需要招募用户进行测试，预算时间精力可谓一项都不能少，但是大多公司的窘境却是公司小资源又有限，又不给预算招募，可用性测试做不起来？内部产出版本过多，不知何去何从？别担心，小型可用性测试了解一下！1. 什么是小型可用性测试(Small Usability Test)？小型可用性测试就是在标准的可用性测试的基础上减少了一些流程与要求，这就像是大公司与小公司之间会有各自的研发流程一样，两者各有千秋，对应公司规模与背景对症下药。在小型可用性测试中，也有脚本、简易的暖场、用户定义、测试目标、测试任务、测试原型、测试参与者、测试观察、思考总结，更多的也是发生在功能上线之前的推敲阶段，它比较适合设计师在自测阶段后的验证以及多版本 Battle，帮助你 Pick 一套更加合适的方案。但是整个过程相对正式可用性测试会更加简单易行，其中价值观念与目的都是一致的，都是以用户价值与用户目标来驱动（使用动机）使用产品，并且观察用户的使用过程以获取有效的反馈来改进或决策。不过呢，脚本会更加简易一些，原型材料也不用那样精细，主要能表达功能作用与信息流程为主，其中测试者更多的是寻求那些关心我们产品或有需求的用户，另外也不会准备那些知情书、协议、录制设备、测试指标啥的，更多的是寻求熟人或哪些有意向的用户快速进行测试并观察，这样不仅时间成本都节省了，难度降低了，也能拿到一定的有效测评结果。基本上主要的实践步骤就这五点，还有一些布置会穿插在其中，后面代入案例讲解一下。2. 案例代入讲解便于直观的了解和感受小型可用性测试，这里代入一个老案例讲解一下，关于案例背景这里简单交代一下。背景：平台服务于游戏相关的订单交易、互动娱乐，本次测试的内容是新的游戏订单定制服务，通过推出一批专供用户定制游戏服务的客服来完成沟通与定制下单，其价值在于帮助用户快速了解平台游戏服务以及快速定制服务并完成下单转化，以沟通的方式减少用户下单的操作流程与门槛。任务流程：设计服务入口与流量分发->用户选择心仪的小鱼（专供客服的代称）->进入小鱼的会话界面->沟通需求目标->小鱼制定用户专属服务订单->用户支付确认->转到订单流程为了加快讲解和体现测试的价值与方法，这里就不跑全套流程了，就以小鱼入口的设计与流量分发来代入讲解，测试前提是聊天会话界面中已经集成了“小鱼”所受理的主要游戏业务介绍，以及快速下单的入口。当然一般都是在用户向“小鱼”倾述目标需求后，由“小鱼”进行服务定制，并向用户发起订单等待用户确认支付，之后便是等待订单完成到验收评价，平台转交佣金。首先定义用户与目标在这个测试任务开展前一定要知道开展目的是什么，然后就是这个过程中你的功能或产品是为什么样的人服务，能为他们带来什么样的价值，也就是前面一直提到的价值与目标驱动用户的概念。为此你可以建立一个简易的用户原型来定义用户的特征属性，使得目标群体再具体一些。然后将小鱼的服务价值写出来，让参与者能够快速知道小鱼功能有什么用：创建适用于目标的测试任务对于测试任务的创建，应该是围绕目标的。根据流程的多少或复杂程度，可以划分为多个阶段，这样具有阶段性会更好控制测试节奏或分段进行，然后就是将多个任务按照流程顺序或是操作难度排序，目的是使得任务流程正确或是用户接受起来更容易。当你把任务清单罗列出来后还不算完，这套清单你可以放在脚本里，但是当你描述给用户时，你应该代入对方视角去描述并且带有目标性，所以还需要进行一次调整后应用：找到合适的测试参与者关于参与者我们会参考第一步中所设定的用户原型，不需要全部中标，但至少这些人要看起来会用得上你的产品才行，通常这些人建议通过熟人关系去寻找，甚至可以是你的同事，只要他们对产品没有额外的偏见，且不是相关设计者、营销运营者或技术研发人员，因为这些人对该领域的知识掌握甚多，有失真实性。当你找到这五六个接近真实用户的参与者后，你只需要将起初写下的“功能价值阐述”告诉他们，让他们知道要做一个怎样的服务测试，然后预约他们在不同的时间节点上花费半个小时来做一个简单的功能测试即可。观察参与者如何执行任务在这个阶段，你需要保证已经准备好了测试原型，以及一份脚本，脚本中会规范以上的功能价值、测试任务、一些简易的指标、关注要点、暖场介绍、流程顺序等。然后你要找一个相对安静低调的测试场地，不一定是会议室，不用很大空间，一个桌子两个椅子和一些必备的材料即可，但不要有一些产品相关或商业的痕迹，会形成干扰。在测试开始前你需要将测试原型初始化，以确保每个参与者测试的一致性。在暖场和任务布置完成后，就是测试者的 Show Time 了，主持者可以拿好自己的小本本或者录音笔，认真的观察测试者的操作或口述反馈，当测试者遇到一些问题不知所措时，也不用着急指导，告诉测试者先按照自己的认知或想法去做就好，如果测试者在一个地方卡了好几分钟，没有一点头绪甚至感到受挫那就让测试者先跳过障碍，避免整个测试节奏失控。另外记得提醒测试者口述反馈，这很重要。当在计划的时间段完成测试后，就为测试者送上准备的奖品，寒暄几句后送测试者去休息或离开，然后对材料或记录进行简单整理后，准备下一场测试。思考与总结在完成一轮简单的小型可用性测试后，通常一定会拿到一些有用的反馈，可能有些零散还需要进一步的整理，但这不影响最后的分析结果，为了方便验证和整理，我们会提前把一些重要的问题点罗列出来，然后根据测试者的反馈进行记录归档；最终当你完成了这些测试及反馈信息收集以后，产品方案中究竟哪里出了问题应该就了解的差不多了，一些比较明显的问题甚至会被测试者多次提及，或许是页面信息不被理解、交互难懂、提供的内容不受测试者喜爱，亦或是测试者都认可、设计亮点被用户亲睐。尽管会发现一些跟我们预期不大一样的结果，但都是正常的，值得注意的是，我们应该结合这些数据进一步的反思，究竟这些反馈有何含义有何价值，哪里还能优化，基于不用的产品服务或受众，反思点可能会有些不同，这里我泛举一些：最终呢，我们也是通过测试取得一些有效的反馈，并根据反馈深思了更好的设计方案，我们对小鱼卡片的信息进行了丰富以保证可比较性，将每批三个小鱼卡片扩展到了 8 个，用户可以通过横向滑动查看更多，同时为了方便用户更好的换到下一批，在最末尾给予了滑动换批次的交互，使得用户可以一指滑动到底完成查看与换批次的交互衔接，在之后的验证测试中也是获得了测试者的认可与看好。相信说到这里，怎么做好一轮小型可用性测试已经了解了，当你完成了这些测试任务，一定记得不要忘了后续的反思与优化迭代，甚至制定后续的研究计划。多版本方案如何进行可用性测试有时候设计产生多个版本也是在所难免的，那么对于多方案是应该将内部推荐的拿出来测试，还是应该直接两个版本一起拿出来，两个一起会不会因为采集量过少不准确呢？这里我们再说说有多个版本怎么做好测试计划与分配，当有多个版本准备可用性测试时，如何制定测试计划还要看版本数量、版本差异化这两大维度，力争做好有效且不费力。如果说在设计过程中产生的多个版本差异不大，那么都进行测试的必要性我认为不大，通过在商业价值与用户体验间做衡量，选择一个更加符合产品阶段的方案进行可用性测试即可，但是如果多个版本差异较大，难以决策且不确定性较大，那么第一件事就是经过一轮决策将版本减少到两个左右，然后再进行可用性测试，对于此类情况基本上有两种方法进行分配测试；1. 将版本分为两组进行测试；如果说直接分成两组进行可用性测试，那么需要数据样本会更大，数据采集量过少确实会有不准确的可能，因此直接分成俩组进行测试的话，会需要招募更多测试者和测试准备，但同时可能会有意外的惊喜，往往我们以为的，可能会在测试者那里收获意料之外的反馈，这将允许我们以真实用户的视角去挖掘价值或决策，避免内部短视而埋没了好的设计。2. 一组人员测试两个版本；相比分多组测试，一组人员测试两个版本在成本上会更有优势，但同时会面临两个版本测试的前后顺序影响，要知道第一个版本会对用户形成更多印象，甚至产生一些偏好，所以为减小测试结果的偏差，我们会将测试者分为数量相同的两组，并安排两组不同的先后顺序进行测试来打破僵局。测试结果的量化或汇报技巧测试结果量化的目的在于更好的衡量可用性在怎样的一个水准线上，同时便于整理复盘整个测试过程，并将结果更加直观的展现出来，便于同事们了解。对于测试结果量化有两个方面；一方面是将整个测试过程中收集到的各种问题反馈进行分类整理，并用数据图表现出来，这样能够很直观的展现问题缺陷与突破口，同时能够快速体现测试价值，或者说你进行可用性测试为业务带来的价值。另一方面则是通过面向用户的问卷调查获取可用性测试量表，最常见的标配问卷即 ASQ(任务后评估问卷)与 SUS(系统可用性问卷)，除此之外还有专门面向网站产品的 WAMMI(网站分析和测量表)、SUPR-Q(标准通用的百分等级量表，但是获取有效的百分比数据需要购买服务，所以不额外介绍了，有兴趣的自己百度下)，以及面向 APP 使用体验的 SUPR-Qm(APP 用户体验量表)，在说明这些量化表怎么使用和定义前，我需要额外说明一些量化表的概念，这很重要！1. 可用性测试量表标准作为一个合格的标准化量表至少需要保障以下几点：可信度：对同一对象测量得到的结果是否一致，这将直接决定问卷获取的结果是否能可靠，可以通过重复测量信度和[分半信度]测量， 测量出的信度会在 0～1 之间，越是接近 1 的可信度越高，因为量化结果会被直接引用，所以信度至少高于 0.7 才比较有意义，不然一个半信半疑的结果真的充满风险，同时以上我提到 ASQ、SUS、WAMMI、SUPR-Qm 这四个量化问卷也都是经过业内长期试验与验证后信度较高的靠谱问卷模式。「对信度计算有兴趣点这里」：https://baike.baidu.com/item/%E4%BF%A1%E5%BA%A6%E5%88%86%E6%9E%90/9170373?fr=aladdin有效度：主要理念在于是否密切关注到了你所在意的问题点，以及问卷问题是否与验证系统有关联性，对于效度也有效标效度(皮尔逊相关系数) 和内容效度(因子分析) 两种评估方法，不过并不一定要有很高的系数来证明很有效。灵敏度：指达到统计显著性所需的最小样本量，例如一个水果偏好二选一问卷，你问两个人可能是答案 A，但是你问完 10 个人后却是 B，当采量过小没能达到统计显著性所需最小样本量时，可能会获得不够准确的答案。客观性：一份问卷应该保持客观性，不能携带编辑者的个人偏好或主观意愿影响，这会让问卷有失统一性。重复性：尽可能的使问卷框架结构能够复用，一方面便于更多人可以研究验证，另一方面可以使得问卷本身价值最大化。可量化：对于问题的答复最好进行量化处理，而不是单纯的是或否，目的在于可使用高效的统计学方法来理解结果，或进行对比，亦或是数据可视化体现更加精密的差异。所以说开发或调整一套标准可用的度量问卷也是一门富有学问的技术活，并非简单问几个问题这么简单。2. 任务后评估问卷(ASQ)也叫场景后问卷，一般在可用性测试完毕后进行，它可以直观的在任务难度、完成效率和帮助信息上获取到测试者的直接反馈，主要就固定三道题目，答案采用 5 分制或 7 分制，所得分除以总分即可得到一个均分，该分值至少要大于 0.6 才能合格，要获得大部分人满意或认可，则要高于 0.7。3. 系统可用性问卷(SUS)SUS 总共 10 题，奇数项是正面描述题，偶数项是反面描述题，答题采用奇数的 5 分制。SUS 益于它正反向问题结合，以及具有广泛应用的可用性与易用性题型，在业内具有大量应用数据为基础，不论是客观性、灵敏度、可量化还是信度都具有较高的水准，这也是 SUS 能够成为可用性测试后问卷最主流的原因。SUS 量化分数计算：在 SUS 的相关创建者经过对大批数据的研究，其中可用性部分量表信度为 0.91，易学性部分可行度为 0.7，为使得整体量表得分兼容在 0～100 的范围，最终需要对可用性量表总分乘以 3.125，易学性量表总分乘以 12.5。而经过长期的应用迭代，最终分数的计算方式进行了定格：步骤一：所有奇数编号题目得分减一后相加；步骤二：所有偶数编号题目得分由五减去后相加；步骤三：将奇数项最终得分+偶数项最终得分后乘以 2.5 即最终 SUS 得分。分数值概念：在经过创建者的研究与沉淀，最终构成了 5 层不同级别的评级，A 即最优评价，并且对应 0～100 分，有趣的是 5 个评级并非是将 100 分平分，为了解释评级与得分的强关联性，创建者新增了第 11 题进行整体而言的数据收集与分析，最终得到了以下图中所对应的关系，如果说结果是“Good(C)”，那么对应的平均分值则是“71.4”，如果说你的得分高于 85.5 分，那你的评级则处于“Excellent(B)”，这可能已经意味着你的产品优于绝大部分产品了。4. 网站分析和测量表(WAMMI)WAMMI 的建立是为了专门量化网站产品的，该问卷一共 20 道问题，采用 5 分制回答，整体信度高于 0.9，但是吸引力、可控性、效率、帮助性、易学性多个因子测试信度只在 0.63～0.74，因此该问卷对测试样本要求不少于 30 个，若该产品属于学术或专业性较强类型，则样本量不少于 100 个，平均分值为 50 分，总分 100 分，但是也受样本量影响，WAMMI 很难在可用性测试场景后使用，不过它的问题可以在小型可用性测试中进行应用或自检。WAMMI 官网： http://www.wammi.com/index.html5. APP 用户体验量表(SUPR-Qm)作为一个 APP 用户体验量表，涵盖了更多的体验度量面，而不仅仅是衡量了可用性（比如 SUS），并且可以在可用性测试期间或可用性测试之外进行，也可以与其他问题混合使用以便于测量某些特殊产品(如游戏)的用户体验，同时它的信度也高达 0.94，SUPR-Qm 一共 16 道问题，采用传统的 5 分制李克特反应选项。SUPR-Qm 的 16 道题原本来自 23 个其他相关文献中的题目和 4 个开放性的问题，经过不断测试验证和减少冗余后，留下的 16 个具有单维的、可靠的、有效的、兼容强的问题。SUPR-Qm 原博客说明： https://uxpajournal.org/supr-qm-measure-mobile-ux/6. 关于测试结果汇报有些同学一直不清楚可用性测试报告要写些什么，有无固定格式，其实报告没有什么特别的地方，简言之就是将测试的目的、测试过程、测试结果进行整理汇报并反馈优化意见而已，其中大部分内容没有硬性的格式要求，看起来清晰易懂是重点，你可以是文档汇报也可以是 PPT 汇报，另外记得测试汇报讲究真实性，可以把测试过程中的照片或截图等放进去用于佐证。另外就是测试结果的归档，我们通常会借助表格的形式来呈现，这样能够更好的将信息整合，但是考虑报告输出，不是一味的反馈负面问题或解决方案，同样也可以反馈被用户认可的设计，这也是测试的一种价值作用，能够为后续的优化设计提供一定的方向指引与团队信心，所以我们将常见的测试结论归档表进行了一些轻微的调整，补充了反馈的正负趋向，最终呈现如下；关于用户反馈的思考用户反馈本身就是用户在使用产品的过程中遇到了问题，然后通过找客服或反馈入口所给予的反馈，如果一个应用的用户忠诚度不高，即使你在应用内发布问卷收集反馈，用户的参与也会很有限，反而是因为一些问题让用户受阻了才会产生一些宝贵的反馈，而让用户准备和提交截图凭证更是困难，所以这个时候让用户反馈的入口更好找，对问题类型提供细分选项，甚至对截图等动作做出一些预判都是不错的选择。以支付宝的使用场景为例，我们有时候截完图是不是就马上会收到弹窗提示是否遇到什么问题了？这便是对用户反馈的一种重视，如果你确实要准备进行反馈，那么你后续的操作步骤会少很多，使你更容易达成而不会因为繁琐的步骤而产生放弃的念头，并且截图时询问的窗口也是极力克制不会产生过分的干扰。这么说来你是否对用户反馈这个功能有了新的看法，并有了给自家产品优化一下的想法呢？写着写着就又没刹住车，又成了所谓的万字干货了，不管你是从事什么职位，都希望你能够有所收获，即使你脑子里一灵光有了新的想法或不同意见都欢迎来找我交流，最后也感谢那些不厌其烦与我交流的用研大佬们，下次有想法了还来烦你们，哈哈。都看了这么久了，点个赞吧～如何做好可用性测试？来看高手的经验总结！什么是用户研究?用户研究听起来是个非常大的学科和话题，没有具象的描述和切实的研究方法就显得虚无缥缈，让人有种雾里看花的感觉。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/usability-testing-buff
文案 用户 产品 编辑导语：你有考虑过，写出一句你认为好的文案后，用户的感受是什么吗？这篇文章作者详细阐述了极其重要却常被忽视的“文案体验”，推荐想要了解文案撰写的童鞋阅读。著名节目主持人蔡康永说过这样一句话：“你说什么样的话，你就是什么样的人。”有时候，一个人的言语在别人眼里，就代表了这个人的性格为人。那些说话毫不在意别人感受的人，很难给别人留下好印象；而说话有分寸感，懂尊重懂换位思考的人，就很容易给别人留下一个良好的印象。在产品界面中，文案是我们和用户对话的重要桥梁，好的文案能够让用户在使用产品的过程中，能够很顺畅很愉悦地完成任务，给用户留下良好的印象和评价。因此文案的体验设计非常重要，但往往在很多产品设计中，却是最容易被忽视的体验部分。如何做好文案体验？1 个中心：以用户为中心。3 大要点：语言文字、语气态度、数字与标点。以用户为中心产品服务的对象就是我们的用户，所以要明确我们表述的立足点，相应的产品界面上的文案，也应该尽量以用户视角来写作。那我们在产品文案的提供上，就要有共情的能力，把自己切换成用户视角，感同身受地理解不同用户的能力，用户可能对我们业务并不是很了解，那我们就要思考如何通过通俗易懂的文案表达，帮助用户更有效率更愉悦地完成任务，从而达到业务目标。语言文字在产品界面中，文案是我们与用户沟通的基础，语言文字的表述也需要精心推敲仔细设计。如何提供更好的文案，让界面有更好的可读性和易读性，同时让用户体验更加友好。需注意以下事项：1. 清晰准确文案传达的语义能让用户清楚明白当前的信息内容，不产生理解上的歧义或误导。2. 简洁有效精简语句，减轻用户阅读及理解负担。3. 表述一致描述同一个事物的词汇表述要一致，避免让用户产生更多的认知负担。4. 语法正确在一些功能操作按钮上，语法要表达正确且需统一，先动词再名词。5. 用户语言使用用户熟悉的语言，能看得懂的用词，避免使用术语或一些非必要的技术专用词。6. 突出重点在一些长文本中，要提炼重点，突出最关键的信息，快速让客户获取重点信息。7. 规范名词通用以及所属行业认可的专业用语用词，要准确规范。语气态度在产品界面上，语言文字更多定义的是产品的内容，文案中体现出来的语气态度，则能牵动用户的情绪，合适的语气态度更容易让用户建立信任感。需注意以下事项：1. 友好尊重文案应传达给用户友好尊重的感受，永远站在用户的角度考虑，并采用包容的语调，给予用户支持与鼓励，不要命令和强迫用户。2. 不要过于极端避免使用过于绝对的表述，不用“一定、绝对、肯定、百分百”等极端词语。3. 尽量不用负面词语避免使用“不要、不可以、请勿”等词汇文案，多使用正向引导文案。数字与标点在产品界面中，数字是表达数量最直接的方式；标点符号是辅助文字阅读的符号，用来表示停顿、语气等作用。需注意以下事项：1. 数字代替文字用户对于数字的感知会更快，在适当场景下，使用数字而非文字表述会更加有效。2. 适当增减标点为了帮助用户更高效地扫视文本内容，可以省略不必要的断句点，但在长句或一些文字链前面，该使用标点还是要保留。3. 慎用感叹号一般只在需要表达强烈的正面情绪下，如祝贺、感谢、问候等场景下可使用，其他场景慎用。最后不同的行业不同的业务，除了上述总结的内容外，也许还有各自不同的表达方式。希望这篇文章能引起共鸣，大家在做产品设计的时候，能把文案体验这部分重视起来。当我们真正以用户为中心，从用户视角去仔细琢磨怎样使用产品的时候，总能够设计出足够优秀的微文案。谨记：尽量采用通俗易懂的文案，确保内容的可读性和易读性，帮助用户更效率更愉悦地完成任务，构建更美好的用户体验。我们不妨从最简单的工作方式尝试下：如产品界面设计出来后，自己再从用户视角复验一遍，以及让身边同事也来测试下，看产品的文案内容是否能读懂且易懂，然后及时再改再测，把它做到更好。好的体验体现在方方面面，我们尽量把每处的体验细节都做好，那么整体的体验终将越来越好，共勉!如何快速增加17%的业绩？收下这份微文案设计基础指南当我们想要设计一个用户体验良好的页面时，文案是我们不容忽视的重要元素。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/copywriting-experience
市场调研 产品 用户 现如今互联网市场竞争加剧、不断变化的用户行为习惯以及持续增加的新用户推广成本，多种因素导致企业对于用户需求了解越来越迫切，这也使市场调研的重要性越来越突出。调研具有较大的价值，适用于每个产品的生命周期，一个新项目的立项阶段，需要对整个产品项目有较明确的市场调研评估，精准的市场调研工作有助于提升产品上线后的成功概率，并且可以帮助项目管理人员控制开发成本等。而在产品上线后，侧重点则放在用户调研和竞品调研上，为产品改进和优化方向提供依据。本文的主要内容是一个 0~1 项目初期立项的市场调研内容，这个时候的市场调研应该要做哪些具体的工作？在《市场调研与数据分析》中，对市场调研的作用定义是：调研的重心在于获取可以用来制定决策的信息这一过程，为存在的特定问题提供信息。这个作用也明确了，市场调研的内容需要具有一定的客观性和真实性，调研信息的获取和对信息的理解分析，让我们能够做出较正确的规划和决策，从而促进新项目成功上线。市场调研的信息来源市场调研的主要任务是提供明确的信息，以此来减少决策制定时的不确定因素，而调研的内容来源主要可以分为两类，一类是对市面上已有的二手资料进行分析和研究，也叫桌面研究，另一类是通过实地调研和采集获得的原始数据进行研究。二手资料最显著的优点就是可以在短时间内迅速而便捷地收集到，并且成本相对比较低，主要的内容是行业、用户、相关产品的报告内容。但是，通常也会产生适合性和精确性的问题，缺乏特定项目的针对性、及时性、可靠性，这个时候就需要增加原始数据研究的环节，在二手资料提供的方向上，对理想的目标用户进行调研，目的就是把还未知的问题弄清楚。在《精益创业实战》中，提出了数据收集的方式，即两步验证法——先定性验证，再定量核实。因为我们一开始并不知道用户需要什么，通过定性调研的开放式问题，了解目标用户的相关信息后，再进行问卷定量的验证，可以在设计解决方案之前，了解用户的潜在需求。在市场调研的信息收集中，有目的性收集相关信息资料，需要得出对产品定位的定义性描述，并解决以下三个问题：我们为什么要做这个项目？（项目背景）什么问题应该得到解决？（用户需求）这个项目对公司有什么价值？（商业价值）市场调研的流程由于整个调研过程需要耗费大量的人力物力，并且耗时较长，需要有明确规划把控进度。在了解完具体需要调研的范围后，分阶段来获取内容信息，整个调研流程可分为四个阶段，分别是分析阶段、计划阶段、实施阶段和结论阶段。在四个阶段中，工作量最大的是计划和实施阶段，在这两个阶段中就需要合理的的评估现有资源和能力，最小成本的进行信息的快速获取。1. 分析阶段明确目标在市场调研的第一步就需要明确调查目的，以及要验证的方向，在接下来的流程里保证对信息的收集和验证有明确的范围限制，提升信息的有效性。背景分析在正式的市场调研展开前，需要对项目背景情况，以及相关行业进行初步了解和分析，平衡调研时间、数据可得性、对公司价值、调研投入成本之后，确定是否进一步调研，如果项目不具备明显的价值就果断放弃，可以减少成本投入。初步的调研可以使用 SWOT 分析法，对内外部竞争环境和竞争条件下进行态势分析。或者使用 PEST 分析法，对政治、经济、社会和技术这四大类影响企业的主要外部环境因素进行分析。以此来快速判断项目或者产品是否具备一定价值。2. 计划阶段调研计划调研计划是一个不可或缺的环节，为确保整个流程的流畅进行，需要根据现有资源去制定一整个调研计划方案，包括确定调研对象、选择调研方法、预估经费预算、分步规划实施进度。3. 实施阶段做完了前期的准备工作后，接下来进入实施环节，根据整理的二手资料和原始数据，从行业、用户、产品三个方向对内容进行信息归纳。在这个阶段中需要注意的是，所做的工作是客观信息的调研，应避免太主观的调研结果。行业分析从该项目（产品）角度去分析该行业的趋势、政策、相关新闻以及行业研究报告，更细分的维度分析记录以下几个方面：市场规模：该行业领域的分量，切入点产品的市场表现行业细分：是否存在更为垂直的细分场景，罗列具体的行业细分领域增长态势：该行业的增长空间和未来一段时间的增长趋势盈利情况：行业盈利能力以及稳定性用户分析先定性访谈一些目标用户，对结果进行记录，了解该部分人群的一些特征后，以定量问卷的方式对结果进行验证，主要记录的内容分析如下：社会属性：年龄，性别，职业教育程度等目的：用户为什么去使用这类产品，用户使用场景中有哪些需求行为：目标用户群体使用相关竞品的行为习惯；在使用过程中有哪些问题、痛点与不爽，针对这些内容，用户目前有什么解决方案；无竞品时的替代方案是什么观点：目标用户的消费能力；针对现有解决方案有没有更好的优化方向建议；众多需求中，哪方面需求与期望更迫切产品分析在市场调研中的产品分析，主要是了解相关竞品类型、核心优劣势、规模大小、盈利方式、产品定位等信息，不涉及具体功能细节和交互流程，把注意力放在产品要解决的问题上。4. 结论阶段在得出一系列的调研结果后，对产品发展方向进行分析预测，主要分析未来一段时间内的风险和发展机遇，细分市场，技术和成本可行性。然后根据所有资料内容概括总结，提取重点信息进行阐述。最后输出结论性文档，在团队中进行分享。发展分析风险：风险中有涉及的关于技术难度实现；其他产品可能的市场切入；盈利能力是否稳健且持续；宏观环境的影响等。新机会：行业细分领域中是否有突破口；未来技术发展等因素是否可以成为助力等角度。调研总结总结的内容主要从四个方面对信息进行整理，为方便查阅，也可以利用精益画布或者商业画布，对调研总结进行概括性描述，在画幅上可视化的描述项目产品的内容。产品定义：要解决什么问题、依据调查所得信息论证观点，提出解决方案和实施步骤。产品规划：行业机会在哪里，从哪点进行切入；用户群体特征怎样，用怎样的形式去满足怎样的需求；在众多竞品中怎样做到差异化；如何利用好资源发挥优势，从哪些角度入手项目成本：成本角度可以从研发成本，政策成本，费用成本等方面对项目进行预测。商业价值：可持续性的产品收益和盈利方式报告输出最后一步是输出结论性文档，在这个环节需要注意以容易阅读的方式输出可传阅的文档，在产品立项之初，帮助每个团队成员了解相关信息，达成共识，也为之后具体功能实现提供明确的客观依据。文档包括的内容，主要是上面提到的三个问题的答案，更细分主要有以下几个方面：项目背景和调研目的调研内容和行业调研计划，经费预算和时间安排调研方法、资料分析方法调研对象和调研范围项目前景和风险评估调研总结（产品定义、产品规划、项目成本、商业价值）设计师做调研问卷时，容易出现的5个问题我虽然不是什么问卷研究领域专家，但至少也对一些常见问题有点经验，所以这里给大家总结几点常见问题。阅读文章 > 欢迎关注作者微信公众号：「小馒头的交互笔记」本篇来源：优设网原文地址：https://www.uisdc.com/the-market-research
用户 案例 操作 长久以来，我们一直强调 B 端设计，最重要的输出产物不在于样式，而是交互。优秀的交互设计可以显著的提升操作效率，更快完成工作任务，从而提升经济效益。但是要怎么讲清楚它是很痛苦的一件事，理论上的交互原则，和真实工作场景遇到的困难很难匹配。大家会有这种感觉：看再多的分享和原则，也做不好交互。所以，我们要来探讨一些 B 端交互的基本要求和特点，下面用一些近期的案例做简单的剖析。在 B 端项目中，所有的工作目标，都是围绕在更好的解决业务问题展开的。一个完整的业务需求，必然是包含大量的组件、流程的共同参与。我们在设计内容的过程中，往往会掉进过度关注某个单元的细节，而忽略整体对整体业务目标、重点的认知，出现本末导致的问题。所以，针对每个局部的组件，我们一定要思考它在流程中的重要性，使用频率，使用场景。比如前阵子分享的学员案例筛选组件，我们将左侧露出的筛选项进行折叠合并，修改成了右图的结果。光盯着组件看，可以明确的说案例 1 必然是更好操作的，因为筛选内容可见，操作步骤较少。如果你只想到这里，那么必然是没法处理好交互的。我拿到这个案例的第一件事，实际上就是搞懂这个页面是干嘛用的，处理什么业务，以及了解目前用户的一些基本诉求。最后得到的结果，就是操作员来到这个页面，主要查看异常的状态和它们的详情。因为列表本身是根据时间排序的，异常状态没有处理的也通常都在前面。所以，操作员直接查看列表是最高频的操作，并且表头因为支持排序切换，也是高频操作的内容之一。反而顶部的筛选，只有遇到一些特殊情况，需要将历史中的某些条目筛选出来，才会用得到。在正常使用过程中是会被自动忽略的。而且目前用户的主要反馈也出现，顶部的筛选过高，每次进页面都要下拉才能看见列表，操作极为不便。基于这样的前提条件，我就一定会压缩顶部筛选区域的高度，确保下方列表的大多数内容在一屏内可以显示完。那为什么还要改里面的筛选方法而不是简单做个折叠和展示？还有一个全局化的考虑，就在对一个筛选组件的设计，就是其它所有页面筛选组件样式的基础。这个页面我们只放了七行，其它页面最多的筛选项最高多达一倍。即使做成折叠的，展开后甚至一屏都放不完筛选内容，比如下面这样的示例。并且，筛选完之后，这个面板折叠还是不折叠，折叠了的话看结果列表就看不到前面选了哪些。不折叠同样也基本看不见，因为列表需要下拉，把上半部分内容隐藏。所以，最终进行多列排序的设计，就是舍弃最“初步”的便利性，为业务目标让步。同时基于全局的可用性做预判，对一个低频操作的模块减少过度信息的露出，让用户可以高效完成 1 级信息索引（找到选项标题），然后再去做 2 级筛选。在长期以来的 B 端项目实践中，我都始终践行业务优先的原则，检查处理的方案能不能满足我上面分析的特征，只有满足不了业务需要，我才会去修改它。而不是虚空树靶，光靠各自的 “觉得” 来讨论，这样的讨论不仅没有质量，而且不会获得有效的结果。做产品和交互，对用户的理解优先建立在共情和同理心上。了解用户，最好的方法不是你做了科学的实验，应用完善的理论，而是你自己成为用户！可惜很多设计师都想不明白这个道理，过度追求数据或者调研方式。在上一个案例中，也有同理心应用的部分，自己作为用户知道这个页面操作的重点，在权衡利弊的过程中你自然知道应该选择什么，放弃什么。下面再看另外一个学员案例，也是表单，但是是需要用户完整填写的大量表单内容。在右侧的改版里，我把单从横排改成了竖排，从原本省空间的方案改成了不省空间的方案，和上一个案例截然不同。为什么？看看下面的细节先。如果真当自己是用户，看一遍自己做的设计，给自己定个操作的目的，并尝试在这些内容做选择，那么你选择到这种模块，就必然开始混乱起来。上下的内容离得太近了，比左右同行同级元素还近，这样会极大损害信息识别的效率和操作顺畅度。尤其当我核对前面单选项是否选对的情况，阅读起来更是痛苦。而我们把内容进行上下排序，将亲密性表现得更合理，那么操作的舒适度就会显著的上升。至于多出来的高度，作为用户你沉浸在表单输入过程中，为什么会关注多出来的那点高度？好吧！如果一定要用理论方法来分析，那可以堆砌一堆的理论解释：亲密/对齐性：上下排序的亲密性可以完美符合左对齐视觉引导，以及不同模块跨度的划分菲兹定律：左对齐的选框位置距离极短，除了滚动外鼠标就负责上下移动，而不用全屏幕流浪心流理论：用户视线不要轻易被打乱，就容易沉浸到完成当前目标，而不是关注怎么设计美观……理论可以拿来在 PPT 里强化自己方案的说服力，但前提是别自己绕进去，纯粹通过理论的堆积来认为自己设计的是合理的。再看看下面这种表单页的案例，多列设计来让画布被填满的设计，思考下到底是为了设计而设计，还是为 “用户” 设计？第三点，就是有效的整理需要的设计模块的字段信息。从产品层面去理解该模块的诉求，信息层级，状态类型。有很多复杂的组件，如果我们直接动手画，是行不通的。主要问题源自需求层面的复杂性，不仅字段非常多，而且它们是有层级关系，集联性质。比如再看下图的学员案例，一个在公司平台上传公共文件时，进行素材权限编辑和信息管理的组件。在这个模块中，包含的功能和可操控的元素非常多。从整个面板的标题开始，作为最顶层的信息，向下可以延伸出不同的子模块和对应的二级标题。每个二级标题下，还有不同的下级元素。我们不仅要有效处理这些关系，同时还要分析权限的字段内容，它们包含了：权限类型标题、对象、对象权限、选择、删除、添加。这时候，我就会用文字的方法把这些信息整理出来：然后，重新梳理不同层级结构，再完成不同状态的兼顾，缩减无效的按钮，尽可能降低信息的复杂程度。下面是改动后的案例（只做了原型）。交互的很多工作并不在设计软件上，而是要跳出软件和设计稿，去理解实际的产品需求、信息、字段。除了一些树状图外，必要的交互流程图是无法省略的。多种工具导图和原型的共同作用，才能帮助我们在复杂的需求环境下 “试” 出足够多的方案找到最满意的那一个。最后，就是自己也拿不定主意，或者你的方案就是说服不了产品、开发的常见情况，怎么办？那就是真实的做测试和投票！B 端比 C 端最大的优势之一，就是如果真要做用户调研和测试，容易了无数倍。不管是给客户做方案还是做公司内部项目，你的目标用户群体是非常固定而且容易联系的。当我们在交互方案上僵持不下的时候，就不用纠结或者通过开会的撕逼来做决策。而是把这交互方案的高保真原型做出来，给对应的目标用户做测试。比如上面表单的案例中，新老两个案例，你都可以快速用 Axrure 或者 Protopie 等软件实现高保真的交互原型，1:1 还原真实操作场景。你可以从下面制作的初步案例中查看操作结果：请在电脑端打开，才能还原真实操作：原案例： https://cloud.protopie.io/p/f20dc7a0eb改后案例： https://cloud.protopie.io/p/42c51829cd这时候，方案哪个有效不就根本不用争论，交给目标用户去使用和投票不就明了了嘛？B 端交互方案的决策权，可以由目标用户来主导，而我们要做的就是去建立这样的决策机制，如何快速的来生成不同交互方案，并让目标用户决断。不要再在无穷无尽的 “你觉得”、“我觉得” 中损耗项目进度了……以上，就是一些 B 端交互设计中的思路实际解决流程。这些也是我最真实的工作状态下解决问题的方案，所以并不想写一大堆理论来欺骗自己了（狗头保命）。希望大家能从中获得收获！掌握表格设计，就掌握 B 端设计的半壁江山！（5000字完整版）虽然我们按节奏只剩最后一篇交互部分的，但感觉前面有不少需要优化的地方，所以干脆重新整合，一起优化一遍！阅读文章 > 欢迎关注作者的微信公众号：「超人的电话亭」本篇来源：优设网原文地址：https://www.uisdc.com/improve-sense-of-use
会员 用户 权益 付费会员对各大平台的都具有重要的意义，付费会员运营和设计需要从用户购买到续费全链路综合分析。付费会员对平台的重要性不言而喻，对于消费者来说，会员的身份也能为自身带来一定的价值体验。从用户购买到续费全链路来看，付费会员流程划分为 5 个节点，文章对各个节点进行了系统分析，并对付费会员的未来发展进行了展望，与大家分享。从京东 PLUS 会员到拼多多省钱月卡、从喜马拉雅 VIP 到马蜂窝金卡 VIP，各行各业的付费会员层出不穷；抑或是公众号打赏、今日头条付费圈子，各种付费机制也在全面开花。在用户增长红利放缓的大背景下，如何实现普通会员转化为付费会员，更好的盘活存量会员的价值，增强会员的忠诚度和粘性，是电商平台重点的发展方向。在这个过程中，需要根据不同阶段的用户心理和需求，打造极致的用户体验，助力付费会员的增长。付费会员的发展1. 付费会员是大势所趋京东作为中国电商平台付费会员“尝鲜者”，自 2015 年 10 月推出 PLUS 会员，目前会员数突破 1500 万。之后各大电商平台纷纷跟进。目前主流的电商平台都推出了自己的付费会员。例如唯品会、考拉海购、苏宁易购、网易严选、小红书、淘宝 88VIP 等。2017 年艾瑞咨询发布的《中国零售业付费会员消费洞察报告》中指出，零售业将迎来付费会员时代。消费者对于个性化、服务体验的需求不断提升，越来越多的消费者开始接受为好的商品和服务付出溢价。数据来源于艾瑞咨询2. 付费会员价值巨大2019 双 11 期间，京东 PLUS 会员们两组数据十分惊人：一位 PLUS 会员单笔消费 46.7 万元，成为京东单笔消费最高的一单；一位 PLUS 会员在 11.11 期间一共下了 246 个订单。这意味着他平均每天在京东下 10 个订单，已经成为名副其实的“爆单王”。京东 PLUS 会员业务负责人孟春慧表示，PLUS 会员体现出了高消费、高活跃、高忠诚的“三高特质”。例如 2019 双 11 期间，京东 PLUS 会员的人均消费达普通用户的 4 倍。总的来说，付费会员的价值有以下 5 个方面：筛选忠实用户，锁定高价值用户付费用户通常是平台的忠实用户和高频消费用户，对平台的价值更大；提高用户活跃，增强用户粘性用户投入成本（付费）后，为了赚回成本，将会把平台作为购物首选，用户消费频率也会增加；降低用户流失率用户付费后，有了一定的沉没成本，离开的成本也会增加；提高用户 ARPU 值用户活跃度提升后，通过各类运营活动和优质的服务体验，用户 ARPU 值也会相应的提升；为相关产品赋能导流对于淘宝、苏宁易购等具有生态体系的平台，付费会员可以赋能同一生态体系下的其他产品。例如淘宝 VIP、引入了旗下饿了么、飞猪相关权益，必然会带动相关产品的流量和转化；付费会员体验维度分析虽然越来越多的消费者开始追求商品和服务的品质，但是付费会员需要通过付费获取相应的价值体验，对于已经习惯了免费模式的消费者而言，还是有一定的挑战的。付费会员模式必须通过极致的服务体验和高性价比，才能对用户产生强烈的吸引力，从而实现较高用户增长和会员续费率。对于价值体验，我认为可以分解为 3 个维度：1. 身份价值主要是彰显付费会员的独特身份，需要从界面展示、商品特权等维度体现付费会员的尊享感和专属感；2. 权益价值付费会员对用户最大的吸引力是可以返利省钱，因此权益价值主要体现在省钱、运费券、会员价等方面；3. 服务价值服务价值更多的是增值权益的使用体验，让用户在整个会员生命周期中，充分享受各种权益带来的快捷和便利，真正做到“省时”、“省心”；付费会员全链路场景分析付费会员的体验需要关注用户的整个生命周期，而不单单是一两个独立的场景。从用户购买到续费的全链路来看，付费会员的流程可以划分为以下几个节点：在不同阶段，用户的需求和心智模型是不同的，只有从用户的实际场景出发，才能更好的为用户服务，提升全链路的用户体验。1. 付费前2018 年，京东大数据研究院发布了《京东 PLUS 会员价值体系研究报告》显示，京东 PLUS 会员的认知渠道主要集中在网站推送及朋友推荐，用户首次购买会员核心是受到较大优惠或免费体验刺激。《报告》显示，省钱是购买京东 PLUS 会员主要考虑因素，其次是服务体验和专属感，高性价比是持续付费的主要驱动。因此在付费前用户核心心智：付出的会员费是否划算；在用户体验设计上，设计策略需要紧紧围绕用户心智，营造“省钱”认知。大额消费返利对于苏宁，京东等家电、3C 电商平台，用户存在大额消费的场景。此时 2%返利或 10 倍返京豆的权益，可以让用户一次性赚回会员费。因此需要强化返利权益的认知，增强付费会员的吸引力。顺便说一下，苏宁易购返利权益名称原来是 2%返云钻，现在变成了最高 20 倍返云钻，应该也是在强化用户对省钱的认知。毕竟 2%和 20 倍给用户的感知差异还是很大的。“省钱”氛围营造普通用户对于自己的常用购物平台，潜意识里会主动了解付费会员权益是否划算。因此电商平台需要在商品页面、购物付款页面，主打“省钱”利益点，引导用户认知付费会员的价值。例如京东在商品详情页的 PLUS 会员开通引导。同时在付费会员介绍页面，需要通过省钱大数据、省钱计算器等，增强付费会员的权益感知。并结合实际的商品优惠，让用户感受到实际的优惠力度。例如京东的省钱攻略，通过实际的商品的优惠价格，带给用户更强烈的省钱认知。同时为了更好的激活存量普通用户，可以在普通会员中筛选等级较高的忠实粉丝，通过更低的开卡费用，激励普通用户转化为付费会员，降低付费会员的获客成本。例如苏宁易购 SUPER 会员，对于 V3、V4 会员会有价格上的优惠，激励普通会员的转化。联名卡激励通过异业合作，借助高频平台促进低频会员的售卖。搭售的模式，让普通用户更容易接受高频平台的会员，提高低频平台会员的转化率。同时搭售的模式提高了低频平台会员的性价比，让用户觉得更加的物超所值。目前各大平台都在开展异业合作。京东 1 月 8 日京东将推出 PLUS 会员年度盛典，带来“买 1 得 18”的超级联名卡等专属福利，可享受爱奇艺、携程、腾讯视频、酷狗音乐、微博、迅雷、学而思等众多会员权益。苏宁也加大了联名卡的投入，先后与腾讯视频、优酷视频、爱奇艺、芒果 TV，咪咕音乐等高频平台合作，推出了联名卡。双 11 期间，实现了新增 SUPER 会员超过百万，这其中联名卡会员功不可没。开卡福利为了让用户增强省钱认知，部分平台加强了开卡付费体验。例如考拉海购，通过“开卡福利”、“先享后付”的方式，降低了用户的转化门槛，增强了用户的“省钱”认知；部分平台采用了免费试用的方式，用户可以试用 30 天，并能够享受一定的权益。短时间的试用体验，促使用户尽可能的完成各项权益的体验，从而让用户更加深入的了解会员权益，增强用户的体验感知。2. 付费中通常对会员价格、权益等内容已经有了足够的认知，并做出了付费决策，用户才会进入付费流程。因此付费流程应当给用户最简单、最明确的交互体验，保证用户快速完成付费流程。在付费流程设计中需要注意以下要点：灵活性尽可能的多的支持多种支付方式。例如最常用的支付宝、微信等，减少用户因为支付方式的缺失放弃会员购买。简单的信息内容给出必要的关键信息，例如付费金额等，减少付费流程中的冗余信息。将复杂和详细的信息前置，避免在付费阶段，出现新的信息或者不一致的信息，导致付费流程中断。付费成功后的仪式感用户支付完成后，通过富有仪式感的界面展示，强化用户对身份的认知，给用户强烈的“买的值”的感觉。3. 付费后完成付费后，用户会获得付费会员的身份后，会直接进入付费会员频道页。第一次的“见面”印象至关重要，需要给用户强烈的尊享感和专属感；视觉呈现在头像标识、界面配色等方面给付费用户带来与众不同的专属感。例如淘宝 88VIP 会员与普通用户界面设计差异明显，展示了醒目的身份特征；沉浸式体验沉浸式的界面设计可以很好的增强页面的尊贵感；交互设计电商平台始终以转化为目标，用户在付费后，第一时间也会以购物为目的。因此在页面展示逻辑时，可以增加购物券和会员商品，激励用户转化。同时增加权益快捷导航，方便用户便捷使用和查看权益详情。4. 日常体验付费用户本身都是对商品和服务品质有较高追求的用户，加之已经付出费用（会员费），对服务的质量和体验要求会成倍放大。小的服务问题，都可能让用户产生不爽的感觉，继而影响用户后期续费。总的来说，在整个付费会员期间，需要帮助用户建立“买的值，用的爽”的体验认知。买的值主要是“省钱”感知，通过实在的返利记录，运费券权益等，让用户获得物超所值的体验，满足用户的基本的需求。另外专属的会员价商品、专享的购物券、会员日活动，都可以很好的让用户获得“买的值”的使用体验。用的爽主要增值权益带来的使用体验。例如专属的客户经理、退还无忧等软性服务体验，虽然用户不一定能一直使用，但是关键时刻带给用户的服务体验，可以提升用户对会员价值、甚至是平台的满意度。惊喜体验在既定的付费会员权益基础上，凭借平台优势，通过商品或者其他的形式给用户带来一些小惊喜，营造更好的服务体验。例如 2019 年京东专门推出了 PLUS 会员年度账单。让用户感受到了独特的专属体验。而苏宁易购凭借飞天茅台的专有供应平台优势，为 SUPER 会员提供了专享的抢购机会，虽然不是所有 SUPER 用户的消费需求，但是独特的身份特权带来了独一无二的尊享感和惊喜体验。5. 临期续费续费是付费会员的重要运营指标，较高的续费率可以很好的降低获客成本。续费更多的是依靠平时对会员的各项服务体验和运营活动。但是临期阶段的设计策略，可以强化用户对付费会员权益的感知，提升用户的续费概率。因此可以针对用户的关注点，做出相应的设计策略。主要有以下几个方面；关键权益数据的复盘和总结主要是省钱数据。用户希望了解在会员周期内，到底省了多少钱，有没有赚回会费等。另外可以通过权益使用数据，唤起用户的权益使用记忆，增强情感体验。例如退换无忧、专属客户经理等权益的使用情况；续费优惠激励目前多数电商平台，对于老用户采用一定的续费优惠，或者续费礼，进一步加强用户对产品性价比的认知，激励用户完成续费。未来发展1. 权益套餐制参考运营商套餐制，用户可以根据自己的消费习惯和使用体验，进行自我组合和定制。不同的权益套餐对应不同的会员费，满足不同用户的权益需求。2. 场景化服务随着 80、90、00 一代逐步成为线上消费主力军，家庭消费正逐渐成为新的重要场景。近期京东推出了“家庭号”的服务模式。付费会员也可以考虑通过建立家庭共同消费模式，丰富会员的消费场景和权益，提升用户体验。3. 专属感的打造目前各个平台付费会员体系中专属感，更多的是通过优惠券和会员价商品体现。在商品购买上，缺少会员专区和购买特权，如果能够打造出会员专享商品和商品专享购买特权，可以更好的增强用户的身份价值，营造付费会员的专属感。总结付费会员是一个体系化的产品，需要多部门协同合作。必须始终围绕用户的需求打造极致的用户体验，建立与普通用户差异化的“专属感”，才能真正的打动用户，获得用户的认可。同时付费会员需要时刻关注用户的场景变化，建立场景化的运营机制和权益体系，围绕省钱和转化的目标，打造简单的使用体验，才能最大化的吸引用户转化，从而实现用户的增长。让1500万人真香的KFC付费会员卡，有哪些值得学习的设计点？据悉，截至2019年12月31日，肯德基会员数量超过2.15亿，必胜客会员数量超过7000万，相比去年同比增长35%和33%。阅读文章 > 欢迎关注作者微信公众号：「子牧UXD」本篇来源：优设网原文地址：https://www.uisdc.com/e-commerce-paid-membership-analysis
小技巧 用户 编者按 编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。这篇来自Marc Andrew 的文章梳理了 8 个实用性很强的 UI 效果提升小技巧，是系列文章的十一篇，原文最早发布于 marcandrew.me 。在创建实用、可访问性良好且视觉效果颇为出彩的 UI 界面的时候，我们大多只需要进行有限度的微调，即可达到颇为不错的效果。在之前，我已经撰写了很多实用的 UI & UX 优化小贴士（看完文章在文末获取），这篇文章继续增加 6 条实用的建议，一起来看看吧！1. 少用点色彩一样可以让视觉充满凝聚力在上方的两个设计范例当中，左边使用的配色明显不搭，右边则基于基础色微调明度和饱和度来进行配色，更加协调。如果你的设计项目可以让你在颜色选择方面有更多的自由，不要总是倾向于用花哨的彩虹色来包装它。如果你沿着彩虹系的配色走下去，你可能会很快发现你所选取的色彩总会在视觉上显得不那么协调。实际上，你只需要基础的色彩，然后基于这个颜色，借助微调明度和饱和度来拓展配色方案，就能够得到更加均匀、更加具有凝聚力和专业感的外观了，不需要闪亮的彩虹色和复杂的配色技巧，同样能够拿出好设计。当然，基于基础的颜色快速搭建出配色，我推荐这个网站：https://maketintsandshades.com。2.抓住用户的注意力的技巧在上面的两个设计范例当中， 一个菜单选项使用了简单的方形选框，另一个使用了彩色的背景。UI 可以是干净简约又直观的，但可用性和易用性更重要，不能以牺牲用户体验为代价。对于关键信息，UI元素需要有足够的对比度，以抓住用户的注意力。对于像选项菜单这样简单的东西，请确保用户在快速浏览的时候，能立刻注意到所选的项目。相比于小巧的选框，使用彩色的背景来进行区分，会更加直觉，也更容易被用户所识别出来。3. 使用细文本的时候加深颜色在上方的两个设计范例中，一个文本使用浅灰色，另一个则使用了更深的黑色。当涉及到长篇文本内容的时候，如果字体是普通粗细，使用可读性有所保障的某种灰色是目前多数设计师的选择，它相比于黑色更加优雅，不会显得对比过于强烈导致视觉感知上的突兀。但是当字体文本非常细的时候，灰色的可读性可能就存在问题了。这个时候，可以通过使文本变暗，让尽可能多的用户在阅读的时候不会出现可用性的问题。4. 让界面上最重要的元素更加突出在上面的两个设计范例当中，左边的一个视觉层次较差，右边的视觉层次则改善了很多。在做 UI 设计的时候，你总会希望用户的眼睛每次都能快速、高效地被关键的元素所吸引，并且只需付出最少的认知努力，不会觉得费劲。通过控制 字体大小、字重、颜色和布局等视觉层次，您可以轻松突出最重要的元素：重要的元素字体更大、字重更粗、颜色有差异、在排版的时候更加突出。5. 打消用户的顾虑，让用户放心点击下一步在上面的两个设计案例中， 一个仅仅只使用了CTA按钮，另一个则在此基础上，提供了额外的说明，打消了用户的顾虑。当用户在 UI 中需要进行重要操作的时候，尤其是面对某些带有号召性用语的按钮，请确保用户对于当前的局面有充分的了解，不会对接下来可能发生的事情一无所知。对于一些常见的、可能普遍存在于用户内心的顾虑，一定要提前考虑到，并提供说明。改善用户体验的每一步，都不要让用户在交互的历程中的任何环节产生质疑。6. 请对 CTA 元素的设计「更自私」一点在上方的两个设计范例当中，一个 CTA 按钮和其他元素使用了相同的颜色，另一个则做出了差异化，让CTA 按钮更突出。引导用户行为的 CTA 按钮必须是屏幕上最关键的元素之一，它理应得到最高的视觉优先级，换句话说，就是应该尽可能「自私」一点，将最吸引人注意力的颜色分配给它，让用户不会将它和其他的 UI 控件在优先级上出现混淆。当然，你也可以在尺寸、形状等方面更进一步设计，但 CTA 按钮应该保持一种突出的颜色，仅此一项，就可以规避掉绝大部分的问题。下面是往期的内容：第一波！快速提升 UI 设计效果的 9 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第二波！快速提升 UI 设计效果的 14 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第三波！快速提升 UI 设计效果的 6 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第四波！快速提升 UI 设计效果的 6 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第五波！快速提升 UI 设计效果的 6 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第六波！快速提升 UI 设计效果的 6 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第七波！快速提升 UI 设计效果的 6 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第八波！快速提升 UI 设计效果的 6 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第九波！快速提升 UI 设计效果的 7 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第十波！快速提升 UI 设计效果的 8 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/improve-ui-designs-faster-11
游戏 模型 用户 最近两三年游戏化设计被聊的很多。但其实说来说去都是隔靴搔痒，大多数时候是挂个游戏化的名头，做的事情其实没有什么新意。所以我打算对市面上形形色色的说法做一波综述，我们来细细聊聊游戏化设计它究竟是个什么东西。流量密码游戏化游戏化这个概念不是什么新鲜东西，在国外 2003～2004 开始就起热度了，国内设计界在经历了支付宝的蚂蚁森林/拼多多的砍一刀等等影响力比较大的游戏化实践以后，基本也普及了这个概念做了很多相关研究。基于一个叫 Sebastian Deterding 的老哥在 Gamification: Designing for motivation 中做的总结，我将这些林林总总的“游戏化”文章分成以下这些类型：类型 1-拆解“游戏化”的构造这种文章旨在说明一个游戏化产品的构成逻辑，在解释“游戏化”这个概念框架的同时，一般也能够给到一些设计行为上的建议。不同的模型强调的东西有一些差异，比如比较常见的有：DMC 模型：强调玩家被一些内部驱动力引导把游戏的组成部分本质到表象分成三个层级：动力（dynatmics）、机制（mechanics）、组件（Components），这个模型比较强调玩家玩游戏的底层动机，也就是玩家为什么要开展游戏。这个模型思路类似我们设计师经常讲的原子化设计，认为游戏动力、机制可以决定游戏的外在形式，设计师优先思考游戏的动力和机制，然后再去挑选一个匹配的游戏形式。这个模型因为出现在《游戏化思维:改变未来商业的新力量》中，所以在国内有一定知名度。MDA 模型：强调游戏要有“好玩”、有感情把游戏的组成部分分成机制（Mechanics）动力（ Dynamics）和美学（Aesthetics) 三个层级，比较强调游戏的艺术表现力和感性的一面，把“游戏的乐趣”拆分成不同的类型分析的比较细致。从这个框架下思考问题，设计师需要意识到自己只能从机制-动力的层面去构建游戏，但用户是基于美学-动机层面去体验游戏乐趣的，因此设计师应该站在用户的视角去分析游戏的最终体验，然后去反向分析什么样的机制-动力能够带来这种体验。这个模型比较偏向传统游戏设计，放在产品游戏化的语境下其实不太好发挥。类型 2-解释“游戏化”起作用的原因这种文章主要想要研究“游戏化”为什么能够吸引人不断的去玩、这个现象背后有没有什么理论支撑或者比较成体系的解释。目前在学术界对“游戏化”的研究基本是这个路数。Computers in Human Behavior 去年的文章将这些论文分成了 3 个类型：基于情感动机相关理论的：心流理论、自我效能或自我决定论等等基于行为理论的：强化理论、技术接受模型等等基于学习相关理论的：认知负荷理论、社会学习理论等等行业内来讲，基于情感动机和行为理论的游戏化文章其实是最常见的，我猜大部分人在上面这一串理论里最熟悉的就是心流了。对比学术界，行业内比较偏好对设计有直接指导价值的模型，比如：用心流理论解释游戏化：强调达成高效专注的游戏体验这个理论挺对现在国内商业环境的胃口，所以应用的比较广。简单来说就是基于用户的能力，合理设置任务、适当引导注意力，并且给予即时反馈，从而去引导用户长时间、高强度、不吃不喝不停也不会累地去做一件事情。用上瘾模型解释游戏化：强调让用户不断的长期使用这个理论将玩家不断进行游戏的行为拆解成触发-行动-奖赏-投入-触发的循环，强调通过这 4 个步骤引导用户长期、不断的去做一件事情。和它有点类似的还有福格模型。如何提高设计转化？先学会经典的「福格模型」日常工作中我们经常要考虑如何吸引用户转化。阅读文章 > 值得注意的是，把上瘾放在心流理论的下面其实算是给它抬咖了。虽然上瘾模型是我们日常工作中今天听到的一个东西，但它只能算是一个带有很强行为主义色彩的“设计思路”，实际上并没有经过严谨的证据论证，因此距离正儿八经的理论还是有很长一段距离的。类型 3-教导设计师如何去做“游戏化”这种文章一般是提出一些设计方法或者设计流程，类似“6 步设计一个成功游戏化产品”这类型的。这种文章是我觉得比较没意思的那种“游戏化”文章，我至少看过 3-4 种不同的说法，比如：情景游戏设计：探寻（Chasing）、增强（Enhancing）和部署（Deploying）简单来说就是先（从日常生活中）找到一个有潜力的游戏化场景，然后对其中一些关键场景做适当的夸张处理，从而制作出一个游戏原型，然后不断的和玩家测试、迭代这个原型。这个方法强调观察和用户参与，本身是一个挺真诚没什么套路的、很经典的游戏设计方法。但问题是我们做产品游戏化的时候，往往需要面对一个没什么游戏化潜力的场景，比如填表单。它的规则是固定的、不可改变的，因此基本没有什么游戏化的弹性。所有“游戏化”的元素都得是外来的，而不能来自产品本身。比如说游戏设计师可以从做饭获得灵感，做出“胡闹厨房”，但产品设计师没法把填表单功能“游戏化”成“胡闹填表单”，我们只能做一个和填表单完全没关系的“表单种树”，填一张表单帮你种一棵树。游戏化设计 6 步法将“游戏化设计”分成 6 步：明确目标、划定行为、描述用户、制定活动周期、评估乐趣、部署实施这个设计方法里除了第 4 步“制定活动周期”和第 5 步“评估乐趣”比较有独创性，其他的步骤都和普通做产品设计那种双钻模型没啥大差异。如何用好设计双钻模型？来看 vivo 浏览器的实战案例！前言刚入职时，有本书叫《方寸指尖》对我影响比较大，主要讲述如何做好用户体验设计。阅读文章 > 第 4 步“制定活动周期”（device activity cycles）在讲，要去设置一个类似上瘾模型的“触发-行动-奖赏-投入-触发的行为循环”，同时还要让玩家在这个循环里保持循序渐进、螺旋上升。类似打怪-得奖励-打怪-升级第 5 步“评估乐趣”是建议设计师要回头看一下自己的游戏化产品是不是真的有意思，不能只套个游戏化的壳子做无聊的东西。以玩家为中心的设计流流程将“游戏化设计”分成 5 步：了解用户、了解任务、了解动机并制定激励手段、产出游戏机制、评估测量。和上面的游戏化 6 步法比，这个设计流程比较强调激励手段，并且也着重强调可以从外部激励/内部激励两方面去推动用户玩起来。这些设计方法类的文章虽然多，但是去掉片汤话，说来说去也离不开探索-设计-验证的大流程，只是和一般产品从开始-结束单箭头的行为路径不同，做游戏化产品需要设计一个合理的、有意思的行为循环，仅此而已。但何种行为循环是合理的？这些方法论往往没有很具体的讨论，而又回归到心流/上瘾/福格模型三件套里。对于游戏化设计的具体技巧，我推荐大家去看游戏设计领域的书，比如《游戏设计艺术》里，就对如何设计游戏的兴趣曲线做出了如下的建议：一开始要给用户一个快速的体验峰值（B 点），然后再让用户遇到困难、在困难中不断升级循序渐进。类型 4-介绍具体的游戏化手段或思路这种文章是最流行、产出内容最多的，一般以《某某产品游戏化是怎么做的》为标题，介绍的内容大差不差是 PBL（点数、徽章、排行榜）或者其他类似的东西。这些手段非常具体、抽象程度低，可以拿来即用，因此大部分“游戏化产品”会选择直接借鉴这些手段。市面上将这些游戏化的手段归类的比较全的，大致有以下两个模型：八角模型（的外圈）这个模型将游戏化手段通过两个轴：内在驱动和外在驱动、黑帽思维（驱动）和白帽思维（驱动），划分成四个象限。内在驱动关注游戏体验，外在驱动关注游戏成果；黑帽思维代表具有紧迫感的负向动力、白帽思维代表正面积极的正向动力。它还将 8 种不同的动机放在这四个象限内，进一步细分了不同的游戏化手段各自的动机。这个模型主要是在归纳用户玩游戏的不同动机，可以归类到类型 1-拆解“游戏化”构造分类中。之所以放在这里，是因为我个人觉得这个模型的复杂程度实在是太高了，并且比较倾向于解释，指导设计的能力不是很强，所以我们主要来看被八角模型归纳的游戏化动机与手段：创造使命感：可以为游戏写背景故事、开局就给主人公强力道具，或者将公益与游戏联系起来进步与成就感：可以给游戏增加成就点数系统、徽章等成就象征、进度条、排行榜…让玩家开动创造力：可以给游戏增加通关道具（类似马里奥里的蘑菇）、提供多种选项分支…强调拥有权：可以给游戏添加收集元素、虚拟形象…创造社会联系：可以给游戏增加社交系统，比如师徒系统，或者允许用户炫耀/展示道具强调稀缺感：让用户觉得离完成目标非常近、或者向用户持续展示需要付出一定代价才能获得东西，比如付费道具调动好奇心：增加彩蛋、随机奖励等利用玩家害怕损失的心理：比如设置限时奖励，或者让玩家有大量沉没成本（最后说一句，八角模型现在市面上有的翻译都挺烂的，假如大家想看，我可以把作者的文章翻译一下）游戏化策略卡这个工具相比八角模型，更加倾向于去解释“游戏化”作为一个外壳，如何能更好的服务被“游戏化”产品目标。策略 1：提供具有新奇交互形式的沉浸化体验，激发用户的正面感情建立世界观：虚拟形象、背景故事设置惊喜：增加彩蛋、为游戏添加随机性策略 2：任务支持，使用类游戏任务的交互，传递给用户知识帮助玩家适应任务难度：设置等级系统、分解目标、逐步上升的难度对目标、反馈、手段、结果进行包装修辞策略 3：提供情感化的说服性元素，从而驱动用户使用自我成就：奖励、点数、收集、限定时间、稀缺性、惩罚社会成就：竞争目标、排行榜、团队自我表达：允许用户自定义某些元素、或者做出选择；为用户建立个人档案或者徽章系统社会关系：允许用户之间的合作、交易、帮助等游戏化这个概念就像糖衣在工作中，其实游戏化这个概念最受人质疑的点是，它所有的思路，比如任务设计要循序渐进、比如要给予用户正面和及时的反馈…所有的一切都是体验设计中已知的工作方法，没有什么全新的概念或者没见过的方法。在这样的情况下，很多人会觉得我们为什么还需要游戏化设计这个“糖纸”，去包装这些我们已经在做的事情呢？我的看法是，尽管游戏化设计的技巧都是已知的，但在设计师日常工作中，因为各种各样的原因，我们总会倾向于忽略这些点或者把他们的优先级排得很低。比如人人都知道一个页面包含的信息量越少，信息越聚焦，越容易引导点击。但是实际工作中还得把页面按产品的意思填得满满的。游戏化设计给出了一个成套的解决方案，并且允诺了一个很吸引人的远景：按这套方案去做，你的产品也会像游戏一样令人欲罢不能。因此用游戏化的壳子去包装整个设计方案，能让人暂时跳脱出我们日常工作的常规思考路径，去用不那么严肃的、玩家视角的看法来做东西。我个人觉得这么做有它的价值。另一个方面来说，因为游戏化只是层“糖纸”，它包裹的产品内核还是原来的样子，因此游戏化也不是什么包治百病的万灵药。比如包装成抽奖的广告、包装成中奖的拉新促活活动，基本不是从用户体验的角度出发做的设计。与其说这样的设计是使用了游戏化的思路，不如说是“伪装成游戏的名字和视觉样式，起到误导用户的效果”，还是不要往自己脸上贴金了。4000字干货！做好游戏化设计的 8 类机制和52个元素给大家直接盘点一下常用的游戏化机制，及每类机制下面常用的游戏化元素。阅读文章 > 欢迎关注作者微信公众号：「白话说交互」本篇来源：优设网原文地址：https://www.uisdc.com/game-design-2
用户 素材 产品 年底了，每次回顾自己，总想想说点什么，但又感觉好像没啥说的。感谢公司领导和客户的认可，让我很荣幸在今年获得两次晋升，并且还获得了年度优秀员工称号。今天就聊聊这一年我做了哪些事情，正好给自己做个年终总结，如有不足之处，请多提建议。点：产品触点数据提升去年下半年到今年上半年花了大力气输出并测试了很多素材，通过素材测试用户对于价值敏感度和价值感知的反馈，并对素材投放的数据详细的分析，得出较好的反馈，让我们知道什么样的素材表达方式可得到更高点击。部分数据分析截图1. 设计执行上怎么做的？品牌心智的表达，主要从两个方向去执行：品牌色的延伸&业务关键词精准表达品牌色的延伸能够让素材在界面中和谐统一，在外渠道中投放，暗藏品牌感知，让用户在进入前、后能够感受一致。业务关键词精准表达，举个例子，关键词：体验金——金币，福利——礼盒，在一些用户的认知中，关键词体验金不一定很明确，但是金币能够马上感知是和钱相关，福利同理，福利到具体的事物是什么？比较抽象，我们在制作素材过程中，将关键词福利转化成用户能够一眼感知的实物：礼盒。快速制作提效：关键词表达形式&主色延伸&精简组合&沉淀和复用关键词表达形式，比如说金币，我们说表达形式是很多，正视图的，侧视图的，单一金币，多金币组合，或者金币+宝箱组合…主色的延伸，主要强调色彩使用场景的契合，比如说金币，如果用一个蓝色的金币，绿色的金币，可能用户会误解，特定场景除外。素材组合形式也有很多种，在渠道素材投放中，在有限的空间，能够很明确的给用户传达这是什么，不宜过多素材堆叠，而是精简组合方式，主体元素放大，让用户一眼感知是什么。沉淀&复用，在素材制作完成后，很多同学习惯不整理，丢一边不管了。其实这些产出是一个非常大的灵感库，是可复用的素材集合，在很多场景中直接复用，在紧急需求的时候，不至于手忙脚乱。线：用户路径的优化梳理，更好引导用户今年做了几个较大的项目，有涉及到企业和个人的金融产品。不管什么产品，都认真梳理了产品的用户路径，为产品更好地提升转化而设计用户路径，每一个路径都奔着点击转化的目标去设计不同的路径策略。1. 设计执行上怎么做的？用户路径预设：构建 F 型视觉动线&提升视觉层级&优化用户路径F 型视觉动线，尼尔森于 2006 年通过报告形式提出的，构建 F 型视觉动线，符合用户阅读习惯，更好引导用户阅读和操作提升视觉层级，在产品市场页面，提升主推产品模块层级，凸显优势&高收益率引导用户点击。优化用户路径，在很多理财产品中，在市场页点击“购买”，会进入产品详情中去购买，但是这里我们优化了一个流程，跳过产品详情，直接进入购买流程，只需要用户继续即可买入成功。优化用户路径也有很多方式，比如我们在另外一个产品中，对于差额转入，我们提前预置金额，减少用户输入等等，这些都是在用户路径中的细节，提前预判用户接下来会做什么，了解用户，为用户做设计。营销场景的申购加持，促进申购转化：营销色刺激留下用户&利益型元素促点击在营销场景中，我们使用产品营销色红色吸引用户留下来，通过利益型元素红包、加息以及较高收益率等吸引刺激用户，最后在文案上“限时抢”营造紧张氛围，促使用户点击。以上都只是工作中点点滴滴的细节中一小部分，最终的数据挺好。当然也是离不开团队的产品、运营、交互、开发、以及设计等每一位同学的辛苦付出。面：实现整个产品数据提升和转化当单点触点点击率得到提升，进入到产品路径中，同样需要关注每一个触点和完整链路的整体数据，当某个数据不太理想，我们会立即做迭代方案。从全局的视角去把控整个产品链路数据提升，实现最终产品价值转化。个人 成长与待提升成长：经过项目的洗礼和经验沉淀，学会了怎样做正确的事情，怎样把事情做得更加深入，怎样把细碎的事情做完整。想做好产品其实挺不容易，每一个细节都需要打磨，每一个关键点都不能遗漏。另外，在做产品过程中一定要了解自己的用户，了解他们是什么样的，他们接下来会做什么，提前预判，提前预设方案。待提升：其实在项目过程中，很多时候加入了自己主观的想法和判断，觉得这样能更好，但是事实是：不要你觉得，要用户觉得，要通过测试或者更多方法验证“你觉得”是对的，只有这样才能真正说我们了解用户，真正为用户服务。不然就是为用户添堵。团队 提升与合作1. 工作流程标准化设计验收很多时候设计师真心不忍看开发同学的还原度，每次都很揪心。为避免扯皮，伤感情，我为团队明确验收流程和规范，严格输出验收文档，问题在工作群里沟通，避免私聊。另外每次都将验收文档传语雀工作文档中，工作内容公开透明，避免扯皮推诿，造成不必要麻烦。沟通技巧工作中做得最多的必须说沟通，不愿意表达，沟通不行，很多时候真的很费劲，也浪费大家时间。于是我整理了一份怎么把做 1 件事情表达清楚，到怎么确认的大概过程，给内部同学共享，特别对于沟通困难症的同学很有用呀~~由于是内部文件，只展示大纲思路，接下来的给大家自由发挥…高效素材搜集方法素材搜集方法，对于大部分设计师来说，都很简单，搜素材，谁不会，打开花瓣一顿搜，出来全是图……然而，素材搜索也有小窍门。刚好我梳理了大概的一个思路，适合刚入门的设计师或不知道怎么搜索高质量素材的设计师。因为文档图片比较长，这里就不贴图放进来了。这篇文章点赞破 10000 的话，下篇文章我就发出来，哈哈哈哈哈哈哈哈……2. 组件化设计思维助提效组件化思维，首先得有很多组件，组件怎么来？在最开始我接手这个事情的时候，我就在考虑日常运营需求繁重，我怎么做让效率更高，我不是鹿班，没有 1 秒 8000 张 banner 的能力。因为我们产品在运营里面的素材投放多为固定模板，需要做的就是 icon 素材的替换，数据收集，继续替换，每一期每一期迭代，直到去年 10 月份，这件事情我完完整整做了 1 年，这只是工作中的一小部分，积累了不下 1000 个不同表达方式的 icon，这就是我自己的一个庞大的灵感素材库。在很多场景都能够快速复用。而后来在日常运营中，相同的元素，直接拿来即用或者不同方式的组合复用，高效，快速，数据还不错，运营很开心，真是爽不胜爽！包括后来这件事情转交给其他同学，产出效率高，数据效果好。这是我以及整个团队都期望的事情。3. 优秀案例收集分享案例收集和学习能够提升大家的审美，能够给大家更多设计灵感，但是如果是无目的的搜集，无思考，不学习和分析，那么它就只是个图库。我对团队要求是，案例收集需结合我们自己的产品和业务，如 icon，支付宝腰封的素材设计方向，H5 的设计风格方向，金融产品 UI 设计方向，新客开户，活动弹窗，会员升级，卡券，游戏养成等等，去对应的搜集优秀案例给团队分享和学习，当我们需要竞品参考和灵感的时候，不至于漫无目的，手忙脚乱。以上只是日常收集案例的一部分，仅供参考4. 经验沉淀分享这一年，除了忙碌的工作，我们也组织了几次组内分享，一是增加团队同学的专业交流，二是让大家对工作有些自己的思考和总结。好了，忙忙碌碌，碌碌无为，唯命是从….又一年过去了，感觉这一年做的事情好多，但又觉得什么都没做。可能这就是别人说的最高境界：做又不做祝大家新的一年，2022，都有收获。设计师如何写好年终总结？我总结了4个维度！2021年已经快过去了，作为设计师来说总结并分析问题才能获取经验，本文将会和大家一起探讨学习下作为设计师如何写好总结。阅读文章 > 欢迎关注作者微信公众号：「Two Young设计笔记」本篇来源：优设网原文地址：https://www.uisdc.com/design-summary-3
页面 用户 产品 编者按：这篇文章出自于用户体验设计领域的专业机构 NNGroup，他们从电商产品页的用户体验和交互的角度入手，详细梳理了分页的设计要点，不同的方案的使用场景和优劣对比，结合实际的设计案例进行了演示和解读：许多电子商务网站正在摆脱传统的分页控件，转而选择交互成本更低的设计模式，比如无限滚动。那么是否应该采用这些模式吗？通常，这取决于页面的产品数量。传统的分页模式会将项目列表拆分为多个页面，每个页面包含特定数量的条目。要查看更多选项，用户必须通过翻页切换到下一页——通常通过单击或点击 屏幕顶部或底部的「下一页」 按钮。每个页面都有编号，用户可以通过点击相应的按钮来移动到特定编号的页面。在亚马逊列表页面的底部，有一排按钮，一个指向上一页的左向箭头、一系列数字按钮，然后是指向下一页的右向箭头。亚马逊的分页设计采用了传统的分页控件（在蓝绿色框中突出显示），这种控件对于这个平台丰富的产品而言，非常具有实用性。像亚马逊这样的大型零售平台确实应该坚持传统的分页控制设计，因为当购物者探索他们庞大的产品集时，这种机制提供了精确的控制。对于产品较少或加载性能良好的网站，可能能够简单地一次加载页面上的所有产品。但是，如果您的网站有产品数量较少的分支页面，你可以考虑使用「无限滚动」或使用「显示更多」 按钮作为传统分页控件的替代方案。无限滚动，动态加载有些电子商务网站会提供一个产品列表页面，当用户向下滚动页面时，页面会不断加载更多项目。 无限滚动 或 延迟加载（在用户滚动到页面底部时加载更多项目）可以很好地适用于具有以下特性的电商网站：产品数量相对较少（通常产品数量少于 40 个）有高质量的 过滤器 可以帮助用户缩小结果范围有明确 告知用户要现实的条目数量（比如 42 件物品）Christian Louboutin 网站上的一位客户注意到，每次她滚动到页面底部时，都会加载更多产品——也就是采用了无限加载的页面加载方式。她说她不介意，因为加载时间非常快。「只要它加载，就可以了。如果我滑动到底部，结果需要再花 30 秒加载下面的内容，我就会失去兴趣。不过这个节奏还好。而且我是一个非常果断的购物者。我只是盯着看东西，看看有什么吸引我的眼球。」虽然此解决方案可以很好地适用于包含有限数量产品的网站列表页，但在下面两个情况下（在以下部分中详细讨论），应避免使用无限滚动的技术：用户有需要访问网站页脚导航中的重要信息。当页面包含大量产品时，用户可能会迷失方向，并且不知道他们在产品列表中的位置。访问页脚导航因为一旦用户向下滚动到页面底部，新项目通常会自动添加，因此可能在有限的滚动下，到达页脚区域。使用无限滚动的网站经常让用户感到极度沮丧，因为每次他们试图导航到页脚时，页脚都会不断地被自动加载的新条目推离到更远的地方。当用户向下滚动 Louboutin 网站上的列表页面时，会自动加载更多产品，这会将页脚推到页面下方。这个就是不应该对有大量产品的页面使用无限加载的部分原因——当用户想要抵达页面底部的时候，不应该为此滚动 15 分钟，尤其是当页脚是为了访问诸如退款退货或者别的功能的时候。产品数量如果在单个页面上查看一个类别中的所有条目是不合理的，那么使用无限滚动的控件也是不合理的。Tory Burch 的网站没有提供传统的分页控件，而是在用户滚动时，自动让其他的产品加载到产品列表页面的下面。大多数情况下，产品加载速度足够快，以至于用户看不到加载指示器，还得等待产品加载完成。由于网站的产品数量有限，加载速度快，所以效果很好。一位在 Tory Burch 网站上购物的用户，赞赏产品列表总能完整显示在一个页面上，因此她可以简单地使用滚动，就浏览完所有可用的项目。「我喜欢可以滚动浏览所有内容的布局。有些网站会得一页一页地翻页。在这里，我可以非常轻松浏览完网站的所有商品。」Tory Burch 网站在一个产品列表页面上展示了一个类别中的所有产品。每个类别包含足够少的条目（此处为 69），以至于单个页面就足以承载。在实现无限滚动时，显示产品总数很重要 。Tory Burch 网站在产品列表顶部标识了产品总数，靠近页面左侧有过滤筛选的功能。不过，这个筛选结果的数字标识并不是很明显。Tory Burch 网站上的列表页左上角有过滤器和条目总数 ，只是这些信息很难发现。Ann Taylor 的网站采取了一种更引人注目的方法来显示产品总数。这个数字在用户滚动页面时，保持固定在页面上，并在长页面下方显示用户的当前位置——当用户进一步向下滚动页面时，深黑色边框的大小会延伸以标识进度。该指标帮助用户跟踪他们当前的位置，帮助他们了解已经查看了多少项目，以及还有多少项目有待查看。Ann Taylor 在产品列表右侧的页面上显示了可浏览的产品总数，并且借助它的黑色边框来作为进度指示器。无限滚动页面，通常会破坏标准浏览器右边的滚动进度条，因此用户不能依靠它来确定他们在页面上的位置。随着新条目被添加到列表的底部，页面被拉长，又会改变标准滚动指示器的位置。曾经位于中间的页面的部分，很快就会变成现在更长页面的前八分之一。最好增加一个自定义进度指示器，来高速用户当前的位置。「查看更多」按钮有些电商网站没有采用传统的分页模式或无限滚动，而是 在其列表页面的底部放置「查看更多」 按钮。例如，时尚服装零售商 Aritzia 的网站就使用了这种模式。Aritzia 的网站在其结果列表的末尾提供了一个「查看更多」的按钮（以蓝绿色框突出显示）。除了 「查看更多」之外，一些网站还使用了类似的标签，例如：展示更多加载更多查看更多产品与传统的分页相比，这种方法合乎逻辑，因为绝大多数用户无论如何都会线性地浏览产品列表。此外，与页码式的分页按钮相比，尺寸更大的 「查看更多」 按钮更容易点击。这种方法与无限滚动的本质区别在于，用户必须通过点击交互才能加载下一组产品，而不是让它们自动加载。因此，与无限滚动相比，「查看更多」 按钮允许用户直接查看站点页脚。「查看更多」按钮可能会更加流行，尤其是作为表率的谷歌开始在其移动端结果页面上使用它们来代替分页的机制。我们经常警示设计师 不要一味抄袭大公司的设计，但谷歌是搜索的结果页的一个特殊例外。纯粹是因为它们的使用非常广泛，它对于塑造用户的习惯和预期有着极大的影响。谷歌在其移动搜索结果页面上使用了 「查看更多」 按钮而不是分页。允许用户自己选择是否加载更多商品，对于移动端的购物者来说是特别好的，他们可能在网络流量有限制的情况下浏览页面，因此不一定想持续加载额外的产品内容。此外，如果用户未连接到 WiFi，那么在移动设备上的加载速度可能会比较慢。Lowes 的移动端页面向用户展示了一个「加载更多」的按钮，以查看其产品列表页面上的其他项目。这种设计帮助用户查看超出这个页面的内容，这种动态加载方式不仅兼顾到页面导航的需求，而且提升了浏览的效率，减少了信息传输的数据浪费。不过，这个网站未能显示这一类别中商品的总数 ，也没有说明已经查看了多少产品，也没有说明还要加载多少产品。没有这些信息，一些用户可能会犹豫是否要加载额外的项目，因为他们不知道何时会翻到达产品列表的末尾。Lowes 移动端网站的早期版本没有显示列表页面上可用项目的总数，这使用户很难确定他们需要加载多少内容才会查看所有选项。更新后的版本之一，是通过在产品列表页面（左）的顶部添加搜索结果数量。但是，它没有通知用户屏幕底部还有多少项目需要加载（右）。如果你的网站将采用 「查看更多」模式，请务必告知用户：列表中的项目总数已加载多少项目还有多少项目要加载Lululemon 的页面设计比 Home Depot 的效果更好，因为它提供了已显示的产品数量以及产品总数。Lululemon 在其移动端页面上使用了查看更多产品按钮，它还告诉用户他们目前正在查看的产品总数（查看 40 of 333 ）。当用户到达列表页面的末尾并且没有更多要加载的产品时，就只显示产品总数，就像 Lululemon 所做的那样，去掉「加载更多」的按钮。当无法加载更多产品时，Lululemon 的「查看更多」按钮消失了。标识用户的所在位置无论您选择「无限滚动」还是「查看更多」的设计模式， 请确保您的列表页面支持 Pogo Sticking 功能 —— 这个通常指的是用户在搜索页面中打开一个结果之后，感觉不满意又返回搜索结果页面，再查看其他的一种行为。这种行为和 SEO 、网站排名、内容推荐有非常紧密的关系。一些网站不支持这种操作，当用户在点击了列表中某个条目之后返回之前的列表页面时，他们必须向上或向下滚动才能重新找到他们当初所在的页面位置。传统分页模式可能偶尔会出现此问题，但在使用「无限滚动」或 「显示更多」模式的网站，这种问题会特别常见，且令人痛苦。尽管使用了「无限滚动」模式，但 Christian Louboutin 的移动端网站在点击了「后退」按钮后，用户能够回到最初在列表页面中所处的位置。当用户使用移动端设备浏览信息时，这一点尤其重要，因为在移动设备上打开新标签比在大屏幕上更麻烦。结语如果你的产品规模相对较小，「无限滚动」和「查看更多」 按钮可能会帮助您的用户更轻松地探索你的产品。请记住通过可用性测试来发现设计中的潜在问题——比如无法访问页脚或「 显示更多」 按钮难以被注意到。延伸阅读：尼尔森团队出品！让用户沉迷产品的3个心理要素编者按：这篇文章出自于用户体验设计领域的专业机构 NNGroup，他们从心理学和认知科学的角度入手，基于「自我决定论」重新梳理了驱动用户的3个核心心理需求，结合实际的设计案例进行了演示和解读：在 Nielsen Norman Group，我们倾向于说用户不是懒惰的，而是高效的。阅读文章 > 复杂网站的导航模式要怎么设计才合理舒适？我总结了7个方面！编者按：这篇来自nngroup 的文章探讨的是如今的现代电商类网站（以及其他复杂的网站中）导航设计的问题，对比了传统的导航模式和混合式导航的使用场景和实际优劣，为设计这类网站提供了一个相对完整的设计思路：具有大量库存商品，或是涉及复杂产品的网站，通常会提供产品类别页面，或者是产品列表阅读文章 > 从 4 个角度，聊聊长尾效应是如何帮助产品进行提升的编者按：长尾效应不是一个陌生的词汇。阅读文章 > Facebook 被上亿人指责的背后，可能是因为坎贝尔定律编者按：从 KPI 到 北极星指标，设计和产品团队都非常着迷这种杀手级关键性指标。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/alternatives-pagination-listing-pages
物品 表单 用户 执行类产品中，信息录入是用户工作中最常见的场景之一，用户按照要求录入信息提交给系统，系统整合信息以完成执行结果。页面中，由属性控件和数据容器组成的实体是整个录入流程的载体，录入流程设计的关键是「信息编排」与「高封装度表单」。帮助用户明确当前页面任务，快速查找和定位修改目标，轻松准确地理解表单项含义及生效后果，同时简化填写流程，确保用户准确、轻松、快速地完成任务。录入流程设计关键「信息编排」：将大型、复杂任务拆解为多个部分，并按照相关性分组，减轻用户输入负担。每部分内容单独处理，但最终一起完成提交。通过适当的任务分割，可以降低用户出错率。「高封装度表单」：根据表单的结构关系判断、寻找共性的内容，将他们封装为一个卡片，也可以封装成一个组。主要的目的就是减少用户认知负担，提升操作/使用效率。案例：B端某仓网布局项目项目背景：物流侧因某些原因需经常搬仓，规划侧需知道搬仓对拆单率及耗材费用等影响。因此，上线搬仓模拟系统，辅助业务在线上模拟与评估搬仓方案，通过系统自动化测算搬仓前后的各项指标，决策出最优的搬仓方案。用户痛点：搬仓模拟流程复杂，录入数据繁多，用户线上录入搬仓物品的效率低下。设计目标：调研整理用户工作流程，通过整合任务场景，设计逻辑清晰操作简单的录入流程，优化搬仓路径下各物品集的操作及展示。1. 「信息编排」区分信息间层级关系-使用格式塔心理原则对项目、任务与物品集进行层级区分展示。整体逻辑为项目包含任务，任务包含物品集，一个完整的项目包含基本信息+任务。再根据信息关联性将每个信息点集合成信息组。并根据眼动原理设计最优浏览路径（F型动线）。近万字干货！带你全面了解格式塔原则好的设计师理解心理学在视觉感知中的强大作用。阅读文章 > 项目=A基本信息（项目名称与模拟时间）+B任务（最多5个任务，其中任务包含搬仓路径与搬仓物品；每个任务最多包含5个物品集，物品集包含搬仓物品维度与温层属性）2. 「高封装度表单」根据搬仓逻辑及表单结构关系（项目>任务>物品集）及每个结构下添加的内容的一致性（每个任务必须填写搬仓路径及物品集，每个物品集必须选择物品集维度及温层），将他们封装为一个卡片，每个卡片内的结构内容封装成一个组。除了嵌套逻辑，高封装度的表单还要注意组件选取，高封装度表单要保持组件选择及样式的一致性，整个封装组件要有可复用性，整个录入流程从视觉层到交互层给用户一致的体验，以此来减少用户认知负担，提升操作效率。最后以上就是「录入流程设计」的全部内容啦～后续会为大家分享关键信息密度提升设计、场景化设计等一系列的设计方法，希望能给正在从事或准备入局B端的的小伙伴带来启发，也希望跟大家一起探讨更多的B端设计方法。万字干货！超全面的B端设计指南：选择录入（一）在前两篇文章中，我们主要讲到 B 端产品最为重要的信息展示组件表格的设计思路，根据不同的场景对表格进行了答疑，同时部分读者与我反馈，想让我聊聊选择组件的一些内容，今天就来简单聊聊在「数据录入场景」中的一个小点：选择录入。阅读文章 > 万字干货！超全面的B端设计指南：选择录入（二）关于下拉选择器、日期选择的攻略耐心看完，你一定有所收获！阅读文章 > 原创内容，未经授权请勿转载！本篇来源：优设网原文地址：https://www.uisdc.com/input-process-design
用户 互动 形式 前言评论区是一个神奇的地方，它可以拉近用户间的关系，也能增强用户与产品的联系。那么好的评论区该如何设计？本篇文章将通过三个维度、九个考量点对评论区的设计进行拆解，希望能对大家有所帮助:-)评论区设计的三个维度&十个考量点从产品维度定义评论区类别当拿到构建评论区的需求时，别着急出方案，先看看自己的产品是什么类型、适合什么样的评论区；公众号的评论是被作者选择性地“晒”出，生鲜超市类 app 的评论区是只能看不能回——产品类型不同、其评论区类别也不一样，这里有三种评论区类型供大家选择：从产品维度看评论类别1. 单向评论区单向评论偏向于让用户发表自己的观点，重点在评论内容本身的浏览上，用户与用户之间不可互动。如应用商店、外卖 app 的内容详情页中，评论内容是用户后续行为——下载应用、下单外卖的影响因子之一；2. 双向评论区双向评论多应用于作者与用户之间的留言互动中。如公众号的文章留言区，用户发表观点、作者可选择性地进行回复。双向评论更强调作者、读者之间的关系，整个评论区（留言区）的互动性不强；3. 多向评论区多向评论区顾名思义，用户可以在评论区发表自己的看法、也可与他人进行交流互动，这在社交 app 上、新闻资讯 app 等较为常见；设计师需要根据自己的产品特性，在设计之前，先来选取最适合的评论区类型。“看评论”时的五个设计考量点在确定了评论区类别之后，就可以去设计用户“看评论”的体验了；这里可以通过以下五个考量点来分析： “用户看到了什么” ——关系着评论区内容元素、展示形式、排序方式的呈现； “用户怎么看到的”——同正文与评论区间跳转方式、以及一级二级评论的跳转方式有关。“看评论”时的五个设计考量点1. “看评论”之内容元素评论区内容元素主要分为两部分，评论区入口+信息展示：评论区入口——通常是评论icon、评论量数字、“评论“二字说明，设计师按照产品的调性直接设计即可；评论区信息展示——分为说明类信息（e.g.评论内容）和互动类信息（e.g.点赞、回复)；设计时需注意各类信息展示的位置，以确保信息看起来动线流畅、用户操作起来移动距离最小。“看评论”·评论区内容元素之信息展示2. “看评论”之评论展示形式app 评论区常用的大致有四类展示形式——主题式、平铺式、盖楼式、引用式，这些“XX式”是什么意思，又适合在什么场景下用呢？主题式：如下图，用户对正文内容发表的一级评论在上，他人的回复则折叠在下方；因为一级评论通常以热度的形式排列，所以“主题式”可使优质评论获得更多的曝光，更容易吸引其他用户查看、并参与讨论中去；平铺式：对于“平铺式”的展示形式来说，评论和评论回复都处于同一个层级上，视觉上没有明显的层级区分；以朋友圈为例，在熟人社交圈子中，大家评论回复的层级是相同的，朋友圈的用户可以通过时间的先后顺序直接浏览；旧版某乎的精选评论页也为“平铺式结构”，当用户对某条精选评论感兴趣、进去详情页浏览时，只要从上往上依次阅读即可；盖楼式：如同字面意思，评论区用户之前的互动内容像在盖楼一样，一层一层向下堆砌。应用盖楼式展示形式的典型例子就是某易新闻——用户可以按照楼层依次向下浏览，虽然看得时候比较清晰，但因“盖楼式”的结构比较复杂、所占面积较大，在移动端上屏效会相对较低，可能影响用户的阅读效率；引用式：从名称上大家可以理解，用户 B 回复用户 A 时，B 的回复内容下方会显示 A 的评论内容。“引用式”的好处时便于读者理解，但劣势同“盖楼式”一样，移动端使用该样式会影响用户的浏览效率，在 PC 端上会更为适用；主题式、平铺式、盖楼式、引用式..展示形式虽然多样，大家可以根据自己产品的需要来选取合适的展示形式。3. “看评论”之评论排序方式不仅评论区的展示形式有四种，评论内容的展示顺序也有四种排序方式：评论按时间正序排列：按时间正序排列意为内容按照发布的时间由旧至新排列，其排列方式符合用户阅读时的逻辑顺序，用户可以通过时间线将大家的讨论内容串联起来，方便阅读、减轻了认知负担；评论按时间倒序排列：与评论正序排列相反，倒序排列会将新评论在上、旧评论在下，更适用于强调内容时效性的场景中；评论按热门程度排列：大家常看到的“精选评论”便是按照热门程度排列的——后台会计算出各条评论的“热度值”，衡量维度通常有评论的点赞数、回复数、或负反馈数等等。为了避免马太效应，热门程度的排列公式中通常也引入“时间衰退因子”，这对强调时效性的资讯app来说比较重要；评论按混合式排列：混合式排列方式简单理解可为上方评论“按热度”——展示精选评论，下方评论“按时间”——展示最新评论；这样排序使得用户既可以感受到热评的趣味性、专业性，也更有意愿来参与大家的讨论。看完了这些，你的产品评论区适合什么样的排序方式呢？4. “看评论”之正文、评论区的查看方式分析讲完了用户“在评论区看到了什么”，那我们就再来讲讲用户“怎么看去看评论”。首先是正文与评论区间的跳转，通常会用以下四种方式来实现：“看评论”·正文、评论区的跳转方式锚点定位、跳转至评论区：这种是比较常见的交互形式——点击评论icon后，通过页面的锚点定位直接跳转至评论区；待用户浏览完评论区内容之后，用户可再次点击评论icon返回至正文位置；上滑页面，评论区跟随在正文后：很多资讯 app 的评论区都跟随在正文尾部，在浏览完正文后，用户通过上滑页面便可以看到评论。对于用户的行为路径来说，这种方式是符合用户先阅读、后查看讨论、参与讨论的逻辑，但为了营收与数据，正文、评论区之间会夹杂了相关推荐与广告，会对用户的正常浏览造成一定的干扰；手势滑动、进入下一级页面查看评论：以某讯新闻为例，用户可以左滑直接进入评论页浏览；手势交互的好处是便于用户操作，但也具有一些的小“缺点”，如滑动进入下一级页面的操作是否符合用户认知、滑动手势是否在所有场景下都会适用等；评论内容以弹层形式呈现：在用户点击评论 icon 后，评论区以弹层的形式弹出——这是大多数视频类app常选用的，也是本次vivo浏览器评论区优化所采取的跳转形式。从手机屏幕的空间利用上，“正文内容”处于二维的x、y轴上，评论区以弹层的形式在z轴空间里交互，提高了手机屏效；从用户操作上来说，弹层的使用提高了操作效率，同时因弹层交互的普适性，用户的学习成本也较低；从内容的底层逻辑上来讲，评论属于资讯详情的一部分，用户通过弹层来进行资讯的延伸阅读，这种分层交互也符合详情页浏览的逻辑结构。“看评论”·评论区以弹层形式呈现5. “看评论”之评论、回复间的跳转方式分析对于“用户怎么看评论”，除了“怎么查看评论区”，也还有“怎么查看评论与回复”；后者的查看方式整理后大概有下图三种：1）在原位置直接展开更多“回复”：以美版某乎为例，其优势是操作成本、浏览成本都很小，弊端则是会影响到用户阅读下一条评论（屏幕滑动距离更长）；2）在下一级页面里再展示完整的“回复”；3）以弹层的形式来进行“回复”的完整呈现。“看评论”·评论区展示形式之评论、回复间的跳转方式根据以上五小考量点，大家可以根据自家的评论区特点及现状，选取合适的方式方法去做用户看评论的设计体验。“评论互动”时的三个设计考量点当完成了“看评论”的设计分析，那下一步就需要进行评论区互动时的设计分析啦。大家可以通过以下三点来考量：功能支持、手势操作、评论输入。“功能支持”以大家各自的支持产品功能为准，本文就不再赘述；这里就为大家简单讲解一下后两点的分析。1. “评论互动”之手势操作分析下面是对在不同类型的产品中，用户进行单击、双击、长按、滑动等手势操作反馈的整理：单击评论区内容：不同类型的产品，单击评论区内容的操作反馈会有所不同。如社交类 app，除了“评论”，也有“转发”等其他与之同等重要的功能，所以点击该类型产品的评论区内容时，会弹出“更多功能”弹层以让用户选择功能的使用；对于新闻资讯类 app，评论区是用户交流想法的地方，所以当用户点击评论内容，弹出输入框和键盘会更符合当下的用户预期，便于用户的操作使用；双击评论区内容：在社交 appIG 中，双击点赞的交互手势在产品的各个模块是通用的，用户自然而然就会有评论区“双击可赞“的认知。然而其他产品中，“双击赞”可能并不具有通用性。如果大家要在自己产品中选用双击手势的交互，可能要注意引导用户学习噢~长按评论区内容：通常情况下，长按是去使用评论区的更多功能。如下图，用户长按评论区，可以进行复制、分享、负反馈、翻译等操作，以满足用户在评论区的期望型功能的使用；2. “评论互动”之评论输入分析发评论路径分为了输入的“前、中、后“三阶段，大家设计时需注意以下三点：“评论互动”·评论输入之三阶段输入前告知：评论框里的默认文案可以起到引导用户评论、提示评论用语等的作用。如“说点什么吧”，可以促使用户去发表看法；如“有爱评论，说点儿好听的~”，可以侧面提示用户要文明评论等。大家可以结合自身的产品调性、设计目标，选择适合自己的文案风格；输入时协同：评论输入时，设计师需要考虑到不同场景下用户的评论诉求，提供合适的功能以提升用户的操作效率、使用体验。如团购 app 发评论时，输入框会提供“环境”、“服务”、“菜品”等标签，既降低了用户评论过程中的难度，也使得评论多维度、更丰富。同时，评论输入时大家也要注意异常场景下的防错设计，比方说误操作、键盘收起时，用户的编辑记录要帮他留下来喔；输入后反馈：发送评论后，产品需要给予用户明确的反馈结果，常见的有 Toast 反馈、评论区跳转定位等。大家注意啦，做评论区跳转定位时要给文本背景一个颜色变化的提示噢，避免用户在茫茫字海中迷失～总结以上内容就是评论区设计时需要掌握的对产品类别、看评论、评论互动三大维度、总计九个设计考量点的阐述。设计师们可以酌情参考文章内容，通过在各个考量点的打磨、创新、组合，打造适合自家产品的“最佳评论区设计”。轻松3招搞定评论区设计风筝KK：评论区在 APP 中有着不可或缺的地位，评论区又主要分评论入口、评论展示、评论排序三个方面，不同属性的 APP 评论区侧重点又都不一样。阅读文章 > 欢迎关注作者微信公众号：「VMIC UED」本篇来源：优设网原文地址：https://www.uisdc.com/comment-section-design
用户 产品 内容 众所周知，无论是在用户群体、产品定位，还是使用场景等方面，B 端产品与 C 端产品都有比较明显的差异。但是两者的基本设计理念是趋同的，例如提高效率、降低学习成本等等。不过 C 端产品更加注重运营，所以设计师不单单要考虑设计侧的用户体验，还要顾及商业目标的达成。B 端产品重点在于提升用户效率，这本身就是体验目标之一，因此 B 端产品的设计策略更加纯粹。两者在具体的设计表现上还是存在一定的差异性。今天我们就来总结一下，主要包括 3 个方面：内容的差异化交互形式的差异化展现形式的差异化内容的差异化1. 图文结合 VS 数据表格C 端产品重运营，通过流量的转化获得收益。B 端产品重功能，通过功能定制向客户收费。C 端产品想要达到商业目标，获得充足的流量，必然要内容化。内容想要吸引用户就必须要足够丰富，所以 C 端产品基本是用图说话，而短视频和直播的兴起，进一步增强了对用户不同层次的感官刺激。总之 C 端产品需要让用户看得爽、玩得爽、逛得爽，不知不觉的沉浸在其中，并逐渐产生依赖感。B 端产品聚焦功能，更强调帮助用户解决问题，特别是中后台的管理系统，主要是帮助用户完成数据监控、统计和查询。因此页面中充斥着大量的图表、表格和数据信息。内容的差异也带来了体验方面的差异。图片相对数据或者文字更加直观感性、富有亲和力，更容易引发用户的阅读兴趣，精美的图片更容易引导用户建立对内容的好感。而 B 端产品则是客观反映数据信息内容，相对更加理性，不会带有太多的情感体验。2. 个性化与标准化C 端产品服务于个人，更加注重用户的个性化体验，例如千人千面推荐机制，定制化的兴趣范围设定等等，希望能够通过精准的内容推荐，获得用户、留住用户。C 端产品功能服务于整体的商业目标，今天主推 A 功能用来拉新，明天可能就强调 B 功能的运营活动。另外版本迭代也比较快，功能玩法变化较为频繁，内容也会做出相应的变化。例如天猫最近首页也在不断变化。B 端产品服务于组织，每个用户不再是单独的个体，而是组织中的角色，更强调业务流程和组织协同，因此需要建立标准化的流程，或者相对有限的个性化。另外复杂和高门槛的业务内容，更加强调设计的一致性，从而减少用户的学习成本。同时 B 端产品的信息架构、业务流程一旦确定了，不会轻易改变。避免打破用户已经形成的认知和行为习惯，对用户的使用造成不便。交互形式差异化C 端更强调便捷性，希望可以随时随地触达用户，更多的是移动端产品。B 端产品以工作办公为主，更多的应用在 PC 领域。因此两者在交互形式上有很大的区别。1. C 端：全面体验、兼顾商业C 端产品在保证用户体验的同时，更讲求商业价值。交互体验上我个人觉得主要讲求少操作、短路径、沉浸式。特别是电商平台，例如淘宝，虽然首页中增加了各种频道入口和商品分类，但是并不希望用户按部就班，逐级操作。因为用户行为路径越长，造成的用户流失也就越大。搜索功能被放置在页面头部位置，页面滚动时也常驻在顶部，方便用户快速查找产品。同时运营活动会通过弹窗、浮窗、悬浮按钮，前置广告资源位等形式增加曝光，缩短用户的操作路径，实现内容的快速直达。而为了增加内容对用户的吸引力，让用户沉浸其中，淘宝、拼多多等都专门打造了专属频道，主打短视频和图文。2. B 端：业务为主，效率至上B 端产品最主要的价值在于优化业务流程，提升用户操作效率。除了常见的基础交互形式，在细节设计上也越来越 C 端化了。通过监测用户行为，或者信息内容实现智能提醒。例如飞书文档在用户首次使用场景下删除内容时，会主动提示快捷键功能，帮助用户了解学习相关功能。而公众号壹伴插件会检测文章中的关键字，文章中出现“原文链接”时，而用户未进行选项设置时，会主动提示相关信息，避免用户遗忘。另外在 B 端产品中信息架构非常重要，用户主要是依据导航菜单按图索骥，首先定位到功能页面，再次查找相应表格，最终定位自己所需的内容。所以信息层级的优化，可以较好的减少用户的操作成本和记忆成本。视觉表现的差异化视觉设计层面，C 端产品的要求远高于 B 端产品。1. C 端：场景化、丰富性C 端视觉设计师要求越来越高，基础的设计技能不用说了，动效、C4D 建模都逐渐成为了设计师的必备技能。界面风格也是多种多样，酸性风格、赛博朋克等等，希望能够通过提高界面设计的丰富性，增强页面氛围，保证对用户足够的吸引力，例如大促会场页面的头图设计。2. B 端：简洁化、统一性作为工具型产品，帮助用户提高工作效率是 B 端产品设计的核心价值。因此 B 端产品中视觉元素强调简洁高效，除了色彩相对丰富的图表外，主体风格基本是灰白色调，再加点主题色点缀基本就可以了，过多的颜色和背景信息反而会影响核心内容的浏览。写在最后虽然在设计理念上，C 端和 B 端产品具有一定的相似性。但是受到各种因素的影响，有时候 B 端的产品经理对用户体验重视不足，更多强调产品功能的强大，考虑如何实现产品功能，很少考虑用户是否真正的需要此功能，以及在使用过程中的操作体验。所以 B 端交互设计师需要在业务分析基础上，积极寻找产品设计中的体验突破口，不断提升产品的用户体验。如何区别B端与C端的产品设计差异？我总结了26条对比！随着企业数字化转型，B 端产品越来越受到人们的重视，B 端产品也越来越丰富，越来越多的 C 端设计师转行到 B 端产品的设计上来。阅读文章 > 欢迎关注作者微信公众号：「子牧UXD」本篇来源：优设网原文地址：https://www.uisdc.com/b-and-c-difference
标签 用户 信息 在 B 端产品线特别是在决策类产品中，针对在较长时间段内任务中断回溯的场景的设计方法在 B 端产品线中，特别是在决策类产品中，经常会出现因为需要决策的信息量多、任务处理周期长而造成任务（主动 or 被动）中断，用户反复多次进入任务处理流程的情况。针对在较长时间段内任务中断回溯的情景场景，从用户心理和业务场景出发设计快速定位任务进度的「状态标签」，在任务列表查询区提供「标签类别筛选」以及在任务处理详情页面「同步状态标签及关键信息」以保持视觉连贯和逻辑映射，从而增强用户定位能力，消灭负担及提高决策效率。B 端决策类产品流程图在这里，简单概括一下决策类产品的整体流程，用户通过逐条或批量处理待决策的任务最终完成所有任务的决策。在此过程中或主动或被动的会出现任务中断的情况，那么用户想要返回任务清单查找未完成或者处理中的任务就需要耗费时间和精力费力查找，这必然导致工作效率的降低。通过任务中断回溯这一设计手段，用户能够快速定位、精确查找，提高工作效率的同时带来更为平滑的用户体验。以 B 端-营销标签洞察产品为例项目背景：整合其他来源渠道的标签，并提供标签挂站内商品的服务。用户可通过各维度查询符合条件的营销标签，并可以针对标签进行修改后审核采纳。用户痛点：业务侧需在一周左右的时间中审核几十条甚至上百条营销标签，任务处理周期长，会出现主动或被动中断任务的情况，在重新开启任务处理流程时，需要从成百上千条任务中找出未审核或未采纳的任务后进行决策。设计目标：解决较长时间段内的审核中断回溯问题，使用户在每次进入该模块时，可以快速定位到未审核的标签。A「状态标签」：在标签表格中增设标签类别字段。标签类别分别为“已收藏”、“未收藏”、“已采纳”、“未采纳”、“新标签”。同时，设计三种颜色的标签来分别承载三种标签类别，使用“icon+字段”的视觉手段按状态差异化呈现，且该标签位于表格前列，依据用户浏览轨迹来辅助业务侧第一时间即可识别表格中不同类别的标签信息。B「标签类别筛选」：在页面查询区提供标签类别的筛选功能。中断后通过筛选“未采纳”、“未收藏”，即可快速查询到待审核的营销标签。C「同步状态标签及关键信息至其他场景」：将每条营销标签的“状态标签”及“关键信息”同步至详情页面。当用户点击表格中的“标签解读”按钮后，新页面打开标签详情页面，即用户能够同时打开多个详情页面。可在一定程度上无限拓展在某一时间内处理的标签个数。同时，在详情页面的页头展示该标签的“状态标签”与表格中该条的关键字段信息；在详情页面的页尾吸底展示“收藏”与“采纳”两个决策按钮，提升用户的审核效率。最后以上就是「任务回溯设计」的全部内容啦～～后续会为大家分享录入流程设计、关键信息密度提升、场景化设计等一系列的设计方法，希望能给正在从事或准备入局 B 端的的小伙伴带来启发，也希望大家一起探讨更多的 B 端设计方法。8000+干货！B端设计师要懂的信息架构一篇关于信息架构的深度解读，希望对大家有所帮助。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/task-interrupt-backtracking-design
用户 操作 信息 引言近一年来，Figma 可谓是体验设计领域中最热门的工具。刚好最近开始频繁的在 Axure 9.0 和 Figma 中切换使用，深刻的感受到了设计细节带来的体验差异化。今天就通过一些细节亮点，总结下工具软件的体验设计的几个原则。事先声明，本文不是对比软件工具孰优孰劣，仅仅是为了探讨设计技巧，希望对你有所帮助。本文主要的内容包括：效率设计：提高用户行为效率简洁化设计：降低信息噪点可视化设计：减少用户思考成本效率设计工具软件首要的任务就是追求效率，减少用户的操作成本。1. 模板化设置组件化设计Figma 拥有强大的组件功能，类似于 Axure 中的母板，但是更加灵活。既有父子继承关系，实现了修改父组件后，子组件可以同步修改。但是子组件又有一定的独立性，内容可编辑，保证了灵活可用。而 Axure 母版则是强制性的，一旦修改了父组件的内容，子组件必然修改。样式模板化在 Figma 中，用户可以创建自己的色彩、描边和阴影样式库，在设计中随时调用，一劳永逸，减少了频繁调整样式的操作成本。2. 选择代替输入预置选项可以有效的提高用户效率。例如字号设置时，Axure 并没有预置选择项，用户需要手动输入修改。在 Figma 中则预置了常用字号，用户下拉选择即可。另外 Axure 默认字体是 13 号，而 Figma 是 14 号字体，更加贴合设计师的主流使用字号，减少了用户的修改次数。3. 批量修改批量修改是我们最常用的提高效率的设计手段。Figma 和 Axure 都有 padding 设置功能。不过 Figma 可以一键操作，用户输入一次就可以修改四个边距，调整效率更高。而 Axure 想要设置四边等距，则要逐个修改，操作上相对繁琐。简洁化设计在工具软件中，对象的属性栏应该是用户的高频操作区域。整体布局上，Figma 和 Axure 基本一致，都是包含了 3 个模块。可以设置对象的各种属性、交互效果设计等。而基础属性模块更是用户操作的重中之重。不过 Figma 属性栏通过信息分级展示、内容精简、有序布局等设计方法，带给用户更好的体验。1. 分级展示，隐藏不必要的内容创建元素时，Figma 属性栏默认只显示位置尺寸信息、图层透明度和填色等基础信息，描边、投影、导出等设置项只显示标题，内容全部隐藏不展示，保证了操作信息的所见即所得。当用户增加设置项时，系统都会给出默认设置，用户根据需要只要修改内容即可。另外 Figma 还采用了交互操作，减少页面的信息量。例如可下拉的选项默认不展示下拉按钮，而是在鼠标悬停时展示，从而让原本信息繁杂的页面变得更加清爽。而 Axure 则将内容信息平铺展示，无论用户是否需要操作，都会显示设置项的内容。这样的布局设计确实可以减少用户一次点击操作，但是低频操作的设置项反而增加了页面信息量，成为了页面的信息噪点。2. 适配用户习惯，减少页面信息量用户为了提高自行为效率，不会对所有页面元素命名，其实用户的命名频率并不高。所以 Figma 在元素属性设置中，没有修改元素名称的选项，而是放在了图层列表中修改。而 Axure 元素属性中，命名作为首要内容放置在了最顶端。3. 统一的对齐方式，让信息更加有序两者在信息布局和对齐上也有所差异。Figma 采用的是上下布局的方式，上方是功能标题，下方是设置内容。信息层级更加明显，也更加符合用户的浏览习惯。同时具有很好的一致性。而 Axure 以左右布局为主，左侧是标题信息，右侧是内容项。我个人理解这样的布局方式是为了压缩高度方向的尺寸，尽可能的保证设置项一屏完整展示出来，避免出现滚动条，增加用户操作成本。但是这种布局方式却造成了内容展示的混乱。另外不同长度的底边型输入框，也增加了内容的繁杂和错乱感觉，造成了页面信息的无序感。可视化设计在设计工具中，可视化设计更多的用在位置相关功能，辅助用户更好的理解信息，从而降低用户的思考成本。所以两者在设置选项中都增加了可视化的形式。例如上文提到的 Padding 设置，Fimga 采用的是可视化的形式，用户直接对号填写就可以了，用户的思考成本更低，甚至可以说是 0 成本。Axure 中的圆角设置、边线可见性设置也都采用了可视化的形式。并且可视化还具备操作功能，方便用户操作。写在最后当然 Figma 中的设计细节不止这些，不过很多设计并不是 Figma 的全新创新，而是在 Axure 和 Sketch 基础上优化而来的。所以有价值的设计并不一定是为了翻天覆地的推倒重来时，也可以站在巨人的肩膀上，做出符合自己产品定位和特色的设计方案。想做好微交互设计？我总结了这 8 种常见类型！大家好，我是 Clippp，今天为大家分享的是「微交互设计」。阅读文章 > 欢迎关注作者微信公众号：「子牧UXD」本篇来源：优设网原文地址：https://www.uisdc.com/learn-design-from-figma
表哥
张大湿
飞翔的企鹅
在路上
落霞与孤鹜
