页面 用户 内容 一、前言Notion 是一款融合笔记（Notes）、任务（Tasks）、知识库（Wiki ）以及数据库（Database）的 all-in-one 生产力工具，产品主要服务于互联网群体。2022 年，Notion 的用户规模目前已经达到 3000 万，付费用户达到 400 万。国外用户常用一个公式形容 Notion 是怎么 all-in-one 的：Notion = Google docs + Evernote + Trello + Confluence + Github + Wiki + Quip。同时，Notion 的产品风格也是走极简主义，有着“合而为一”的野心。如何高效地对信息进行整合、梳理， 是设计创作很重要的一环。基于此，这里给大家分享一下 Notion 的产品体验设计拆解。通过对 Notion 的体验设计拆解，为你提供一份文档类产品的解题宝典！更多产品拆解：上线即爆火！3600字完整拆解微信键盘的产品设计微信键盘发布啦！阅读文章 > 事先声明强烈建议使用电脑查看，用户体验更佳；为了让设计细节更容易被看到，用 Gif 来呈现展示；Gif 体积较大，请耐心查看。适合人群第一类，UI/UX 设计师，可以跳出执行层，去思考 Notion 的产品设计策略，提升产品分析能力；第二类，产品经理/运营，通过全面的产品设计拆解、策略推导，获取产品设计参考；第三类，文档产品从业者，通过全面的产品设计策略推导、用户需求分析，获取竞品分析参考。二、日常使用场景1. 工作区和基础概念左侧侧边栏。Notion 的侧边栏是导航系统，创建的所有页面和数据库都会出现在这里。可以将各个页面嵌套在一起，实现无限的组织层次。右侧编辑器。这是创建的所有内容的所在地，映入眼帘的是宛如白纸一样的画布，工作和生活就从这里开始。Workspace 工作区。在团队中，侧边栏的 **Workspace**标题下的任何页面都可以被看到，并且很可能被工作区的所有成员编辑（除非另有权限配置）。Teamspace 团队空间。团队空间可以配置开放式的还是封闭式的，有对应的不同权限的管理配置。Private 私人的。个人工作空间默认为保持页面的私密性，除非它们被明确地共享。Page 页面。Notion 的页面是无限层级的，一个页面能够添加多个页面，页面中的页面也可以继续添加页面。Block 区块。Notion 中的基本对象为 Block（区块），它可以是任何形式：表格、文本、网页、代码块、图片、视频、文件或者直接是一个 Page（页面）。2. Notion 由 Block 组成上图标出了不同类型的 Block（区块）。Notion 以 Block 为基本单位，围绕笔记文档、知识库、任务、轻量的数据库等方面来组织内容。在这张白纸上，包括文字、表格、视频、音频、网页、数据库等等，各种类型内容都可以看作「区块」。操作也非常简单，点击「+」或是输入“/”即可调用，随意将内容组织，并支持 Markdown 语法。Page（页面）上的任何内容，不管是文字、图片还是表格，都是一个 Block（区块）。每个页面都是各种 Block（区块）的排列组合。3. 新建工作区工作区的新建频率相对页面来讲是比较低的，因此新建工作区的入口相对较深，打开位于 Notion 窗口左上方的工作区切换器，会提供新建工作区的入口。尝试新建一个 Workspace，选择团队使用，会直接在根节点创建好几个对应的页面模板可以快捷使用。点击之后，又回批量生成很多模板页面，帮助用户快速上手，帮助用户轻松愉快的度过试用产品的 Day One。4. 新建页面点击侧边栏底部的**+ New Page 按钮来创建一个新的页面，这里新建的页面会默认出现在 Private 下。或者当你把鼠标悬停在侧边栏上的任意节点时，点击任何一个+**按钮，就会在对应的节点下新建页面。新建页面后，会默认出现一些快捷的操作，例如使用模板、导入、数据库等等，帮助用户快速地使用 Notion 强大的页面能力。如果自己尝试输入了一些文本，所有的模板提示和顶部的一些设置就会自动消失，映入眼帘的是宛如白纸一样的画布，工作和生活就从这里开始。5. 页面模板在产品体验中，对于初次上手的用户而言，模板是最好的选择。完全空白的 Notion 并不能解决用户的需求，得先搭建出各种工具，用户直接在工具里进行内容填充，才能满足用户的需求。所以，有了模板后，用户价值的探索路径缩短，减去了需要熟悉功能、自己动手搭建的负担，让用户能够迅速使用起来，并在持续使用的过程中不断熟悉产品各个功能，从而创建出属于自己的模板。在空白页面中点击「模板」，就会进入使用模板的流程。最近 Notion 也对使用模板的界面做了升级优化，记得之前选择模板的弹窗，侧边栏是在右边，左侧预览页面，这次把侧边栏放到了左边，在右边预览页面，「使用模板」的按钮位置也发生了变化。总的来讲会和用户在日常使用 Notion 得行为方式非常一致，都是在左边切换，右边看页面内容，减少用户的认知成本。使用模板的流程也非常短，在侧边栏切换模板的同时，就能在右边同步预览模板的内容，点击「使用模板」便能立刻将将模板内容应用到刚刚新建的页面中，使用上的体验也非常丝滑。所以，正是因为模板在产品策略与市场策略中的重要性：既能促进用户活跃，也能促进用户留存，Notion 才会将模板视作一个单独的模块，不断迭代更新。6. Database 数据表数据表帮助你在 Notion 中以各种方式组织信息--让你组织、分类、标记、过滤、搜索、查看和利用它来完成工作。下面是一个关于 Notion 数据表几种视图和常见的使用场景的介绍。Table 表格。表格形式，类似于 Airtable 表格，便于做数据统计。每一行都可以单独打开变成一个 Page，添加更多的内容。Board 看板。看板形式，类似于 Trello 看板，便于任务分配、分类。卡片中的选项可以完全由自己定义，看板的分组也可以用选项来改变。Timeline 时间轴。时间轴形式，时间轴视图，适合项目排期和计划.Calendar 日历。日历形式，便于查看时间相关的信息，可以在日历上按时间顺序查看任务。List 列表。列表形式，便于查看一部分关键性的信息，比如只显示名称和进度，来明确任务的进度。Gallery 画廊。便于查看多张卡片中的开头部分，可以在卡片开头添加一些概要内容。7. 工具栏大部分同学应该习惯了 Word 这种工具栏，包括其它很多的在线文档平台，也都保留了这种设计。而 Notion 的工具栏默认是隐藏的，在没有开始第一个字输入之前，页面顶部还会有少量的功能外露，当开始输入文本时，所有的多余功能都消失了，页面就是一片白色，功能区全部隐藏，需要点击或选中一些内容才能出现，看似更麻烦，但实则更高效。8. 浮动工具栏这种工具栏可以称为「浮动工具栏」，与传统的工具栏抛给你一堆选择不同，浮动工具栏是围绕内容服务的。你可以先书写内容，再使用浮动工具栏中的菜单设置格式。让设置就在你的光标旁边，移动距离更短，日积月累能省下不少时间。当然，直接记住 Markdown 快捷键是更好的选择。当鼠标选中文档内的已有内容时，界面会自动弹出浮动工具栏。可以针对选中的文本内容进行常规操作。例如加粗、斜体、删除线，或是将普通的正文文本转化为一二级标题，也可以针对选中的文本内容进行评论。9. 编辑工具① 「+」图标只要你把鼠标悬停在一个新的行上，左边的空白处就会出现「+」图标。点击它可以打开一个下拉面板，你可以从中选择想要使用的功能添加到页面中。② 「⋮⋮」图标每当你将鼠标悬停在一个新的行或内容块上时，「拖拽」图标就会出现在左边的空白处。点击它可以打开一个菜单，让你对该 Block 进行操作，例如删除、创建副本、转化成其他 Block 等。③ 「/」命令/ 命令是最简单的方法是向你的页面添加内容或应用上述的操作。输入/后跟任何类型的块来添加它。如/bullet 或/heading。一旦你输入/，就会弹出一个菜单，你基本上可以实时搜索你想要的东西，只要按 enter 就可以选择并使用它。10. 分享页面在分享页面的设置中，可以对不同的成员域做不同的权限配置。对于这些配置项，在鼠标悬停的时候会在弹出相应的图示截图和文字说明，告知用户进行了这项设置后会发生的变化，给予了用户清晰的配置界面。当用户准备点击右下方的「复制链接」时，还会再次出现 Tooltips 提示用户当前配置的分享权限说明，避免权限误操作引发的不符合用户预期的后果。三、体验亮点1. 左侧导航交互日常中常见的 B 端产品的导航栏一般都是要么展开，要么收起两种固定的交互模式，而 Notion 左侧导航非常灵活，尤其是导航栏收起状态时候，鼠标只要悬停到左侧区域，都可以将导航栏呼出，这时候通过导航栏切换到目标页面后，将鼠标移到页面内编辑内容时，悬浮的导航栏又回自动消失。在导航切换效率和页面内容浏览的沉浸感上有了非常好的权衡。2. 抽屉预览在数据表类型下打开页面，默认会通过侧边抽屉的方式打开，侧边打开方式可以自定义拖拽侧边抽屉的宽度。当抽屉拖动到一定宽度时，会自定将左侧的导航栏收起，再减小抽屉宽度时，侧边导航又回自动呼出。同时，侧边抽屉的交互方式并不是传统意义上的直接覆盖在当前页面的上方，在内容层级上会将下放的内容进行推拉，例如我们能够始终看到「新建」按钮，让用户在查看抽屉内容时，也能够灵活地操作后面的内容。3. 视图配置切换数据表有 6 种视图类型可以灵活切换，点击「新建视图」，切换的面板覆盖在内容上方，默认聚焦到「视图名称」的输入框中，在选择不同的视图类型时，能够直接预览到切换后的效果，并且能够设置不同的视图下，打开下一级页面默认的打开页面方式，整个使用体验上非常顺畅。4. 页面图标支持自定义给页面设置表情或图标。给予国际化和本地化的考虑，会有不同肤色的 emoji 配置，让不同肤色的用户能够用对应肤色的 emoji。对于一些只想加一个表情装饰，却有选择困难症的用户来说，还提供了一个「随机」的配置。更加智能的是，设置好的表情或图标也会在页面树中呈现，当用户的页面书中有较多内容时，可以高效地帮助用户对页面进行识别。5. 全局搜索点击「搜索」后，提前判断用户大概率要输入内容，会自动帮用户聚焦到搜索框当中。同时给出了几个非常高效的筛选项，能够帮助用户更精确地查找内容。底部提供了快捷键引导，这一点也是非常人性化，帮助不了解快捷键的用户能够迅速获取快捷键的用法，提高操作效率和体验。更令人惊喜的一点体验是当搜索的关键词没有匹配到时，会引导用户搜索已删除的页面，点击后会将搜索的关键词自动带入到垃圾箱中进行检索，提高了搜索能力的可用性。6. Block 工具栏悬停预览Block 工具栏中，鼠标悬停某个工具时，右边会出现对应工具的效果图和简单说明，能达到更好的引导目的，用户能够直接了解到这个 Block 是不是自己想要使用的，而不需要每次都一个一个插入试一下之后才知道，能够帮助用户更全面高效的了解 Notion 支持的能力，提高 Block 的使用效率。7. 即时修改和创建属性在使用数据库属性设置的时候，可以即时地对属性进行修改，使用检索可以快速使用属性，当检索的内容不在已经设定好的选项中时，会智能地提示用户可以创建一个新的属性。把属性配置的能力轻量化地外露出来，不再需要像传统的软件也痒属性配置有一个单独的属性配置面板。8. 图片尺寸调整图片支持宽高等比拉伸调整，常见的拉伸点实在图片的四个角，会容易引发的问题是当用户拖拽右上方拉伸点缩小图片时，因为图片在编辑器中的定位是固定的，会导致图片的缩放和鼠标指针没有跟随。Notion 的处理很好的解决了这个问题，拉伸点位于图片的左右两侧。同时图片的拉伸也会根据所处的 Block 来自动适应，例如图片位于折叠列表中时，由于图片约束了只能左对齐，所以只在右边有拉伸的手柄；而当图片位于普通的 Block 时，左右都能进行拉伸。9. 分栏交互Notion 中的分栏交互也非常智能，只需要点击并拖动你想放进另一列的文本或是其他类型的 Block (左边空白处的 **⋮⋮**符号是你的拖放手柄)⋮⋮，把它放到你想要的地方，就能够智能地变为分栏。想要改变分栏的宽度也非常灵活，只需要拖拽两栏中的竖线就可以智能的改变分栏的宽度。10. 弹出下拉面板时禁用页面滚动在很多中后台的系统中，经常容易发现的一个看似 BUG 的场景，就是打开了一个选择器 or 下拉菜单时，再往下滚动屏幕，下拉菜单的面板没有跟随滚动，看起来会有点像是 BUG。这个难题在 Notion 中有了一个非常巧妙的解法，在弹出下拉面板的时候，禁用页面的滚动能力。看似简单实则非常巧妙的解决了设计师在日常设计中经常遇到的难题。11. 折叠块正常情况下，Toggle list 下有内容时，箭头是深色的。当 Toggle list 的内容为空时箭头是灰色的。通过一个非常小的细节给予用户提醒，恰到好处。12. 页面为空时，图标是空心的页面内可以嵌入页面，如果嵌入的页面是有内容的，图标内也是会有几根横线；如果嵌入的页面没有内容，图标内部就是空的。通过一个小小的图标直接向用户传递是否有内容的关键信息，省去了用户需要去点进去页面才知道是否有内容的步骤。13. 拖拽小技巧框选文本 Block 可以直接拖拽到数据表中，并且会自动根据所框选的文本的 Block 的构成去自动转化为数据表中不同的行数据。批量变更 Block 类型时，非常高效。14. Block 链接文档中的每个 Block 都有一个专属的链接，复制这个链接发给其他人时，打开后会直接定位到对应的 Block，避免需要在一整篇文档中去找想要的关键词，非常灵活高效。15. @now 会实时更新Notion 还不容错过的一个实用小功能是利用「@」快速输入具体的时间戳，你可以把它用在日记里，或者是工作日志等。具体来说，假设今天是 17 号，当你在模板里用了「@Today」，无论你在多久之后利用这个模板创建新页面的时候，它只会显示「17 号」。而新的「@Today」则会动态更新，假设今天是 28 号，你用同个模板创建新页面的时候，会发现它变成了「28 号」，而非之前的「17 号」了。16. 任意空行都会快捷输入提示在所有的空段落前，都会有一个 Placeholder 提示用户输入「/」能够快速插入 Block，潜移默化的引导用户使用快捷键，起到了教育用户的作用，提高用户使用效率的同时也增强了用户对产品的粘性。17. Notion AI2022 年 11 月 16 日晚，Notion 发布了 Notion AI 测试版写作助手，来帮助用户写作、初稿整理以及记录创意点子，标志着 AIGC 发展进入一个新的阶段。申请了一下内测，已经排队到 16w 人了。四、体验槽点1. 没有固定位置的页面目录原生能力不支持页面目录，虽然支持目录 Block，但是插入的目录 Block，只能跟随页面内容显示，当页面内容往上滚动的时候，目录就会消失。这里右边还是通过第三方插件才实现了目录的能力。2. 没有原生的思维导图Notion 目前还不支持原生的思维导图，国内参考的竞品 Wolai、FlowUS 都已经能够支持思维导图了。目前仅能是通过一些第三方插件置入思维导图，整体的灵活性远不如原生的 Block 那样强大。3. 原生不支持中文目前对中文还不太友好，中文搜索不全面。12 月 14 日的时候，Notion 在 Twitter 上有发布了德语版本的支持，好奇的在下面留言啥时候支持中文，网友有趣的回答道 100 years。不过目前有一些第三方的汉化插件可以使用，这里分享给大家： https://zhuanlan.zhihu.com/p/397634631五、总结Notion 团队非常重视设计，创始人伊万说：“设计意味着这里的一切，Notion 的感觉对他们来说具有重要价值”。不仅如此，你在他们的网站会发现，好像全部都是用 Notion 创建的一样，有很强的认同感。从少数派到哔哩哔哩，从知乎到小红书，有大量的 Notion 用户每天都在分享自己的 Notion 使用经验。这导致关于 Notion 的文章和视频每天都在快速增长。PLG 的发展模式，要面对大量的 C 端用户，所以 Notion 必须要有非常好的产品体验。通过极致的产品体验，减少用户使用中的阻碍与疑惑，使整个产品在使用上更为顺畅，从而提高产品的易用性，减少在面向 C 端用户过程中的运营咨询，便于团队将咨询交付的精力集中 B 端用户的服务上，从而创造更大的商业价值。由于时间和篇幅有限，关于 Notion 的体验设计拆解中存在的疏误之处还望大家给与指正，欢迎大家一起学习和讨论。世界杯专题！8500字全方位深度拆解懂球帝APP2022 卡塔尔世界杯已经拉开帷幕，相信大家从这周开始，都已经陷入四年一次的狂热的足球氛围中。阅读文章 > 6000字拆解！花费10个亿，抖音如何设计世界杯专题？作为全球最火爆的体育赛事，世界杯由于其独有的稀缺性，被外界誉为四年一次的足球盛宴。阅读文章 > 参考链接Notion 官网： https://www.notion.so/Notion 帮助文档： https://www.notion.so/helphttps://36kr.com/p/2025046266178056注：部分图示取自 Notion 官网感谢阅读，我是设计师波波 Bobby He，深耕 B 端体验设计，持续学习输出中，欢迎关注和交流～本篇来源：优设网原文地址：https://www.uisdc.com/notion-design
用户 提示 微软 编者按：基于 AI 的各种产品越来越多，这些 AI 大都依托提示词来生成内容，那么这些产品和服务当中的提示词要如何安置，如何设计？资深设计师基于微软出品的 Microsoft Designer 产品的设计，梳理出了 6 个设计原则，下面是正文：Microsoft Paint 我一直在接触，当我听到 Microsoft Designer 发布的时候，我就开始为此感到兴奋了。微软这种体量的公司开始认真地使用 AI 技术的时候，它真的会让 AI 惠及用户。不仅仅是 Microsoft Designer，他们还将各种 AI 相关的技术应用到其他产品线当中。比如微软的 Bing 搜索引擎也加入了 Image Creator 的功能。微软正在通过引导用户编写文本提示信息，让用户借此获得视觉内容，开始适应新的计算机运作方式。「编写文本提示词是一门艺术，借此可以从 ChatGPT、Dall-E2 和 Midjourney 获得你想要的视觉内容。」如果你曾经尝试过这类文本转图片的人工智能服务，那么你应该知道这类服务的不可预测性。生成需要正确风格的图像，可能需要很长时间的尝试，而为了让 AI 按照需求运作所进行的反复试验则被称为「提示词设计」和「提示词工程」。手残党也能成为艺术家！4个热门AI绘画平台的创作经验总结AI画画，无疑是当下最火热的话题之一。阅读文章 > AI 产品的提示词设计原则AI 生成服务的不可预测性并非无法优化，有时候对提示词进行调整就能获得不一样的结果。我观察到 Microsoft Designer 会指引用户调整提示词，以获得更加可靠的内容输出，降低时间和算力上的浪费。微软、Dall-E2 和用户首先，了解所涉及到的技术和受众很有必要。Microsoft Designer 在 AI 技术上并不是微软自身的新技术，而是基于 OpenAI 出品的 Dall-E2 的产品：关于Dall-E2的介绍：10秒出图，以假乱真！设计师「用嘴修图」的愿望要成真了？大家好，我是和你们聊设计的花生~之前给大家推荐了 AI 图画生成器 Disco Difussion，它可以根据文本提示自动生成恢弘奇幻的艺术，非常适合作为艺术创作的灵感来源。阅读文章 > Microsoft Designer 本身是一种面向营销和运营人员用来创建社交媒体内容的工具，它更像是拥有人工智能加持的 Canva，和 Figma 或者其他的 UI 设计类工具有着巨大的差别。除了 Microsoft Designer 之外，微软顺道推出的 Bing Image Creator 也采用了类似的技术，它类似 Bing 的图像搜索，但是实际上获得的图片是基于描述使用 AI 生成的。以下是微软引导新用户使用提示词生成 AI 图像的一些设计原则。1、熟悉原则：提供熟悉的上下文环境人们经常将新事物存在的风险和不确定性联系起来，而人工智能图片生成服务就很符合这种特征。「人类天生就喜欢熟悉的事物，无论是文字、产品还是体验。」为了让大家更加熟悉，Microsoft Designer 将 AI 图片生成器生成图片作为一个选项提供出来，和其他的图片上传选项摆放在一起：用户可以选择：从设备直接上传从手机上传打开媒体库用 AI 生成图片AI 和熟悉的上传内容摆放在一起，自然融入到大家熟悉的流程当中，让人感觉 AI 和我们日常操作没有太多区别。「与其一头扎入算法当中，不如想象如今的用户是如何完成日常的操作的。」而在 Bing Image Creator 当中，AI 的运用方式则有所不同，它更接近用户日常使用 Bing 搜索引擎一样，唯一的区别在于，原本搜索栏所需要的填写的是AI 提示词，而 AI 生成图片的呈现方式则类似于 Bing 搜索图片的界面，整个体验无缝地和 Bing 搜索引擎的内容呈现保持一致。2、透明原则：AI 并非魔法有许多工具在用户实际使用过程中，压根没有提到他们生成内容的时候用到了 AI 技术，有时候用户需要通过其他的渠道或者深入挖掘调研才能知道相关的信息。Microsoft Designer 在你创建内容的醒目位置，运用工具提示的方式来告知用户他们所使用的技术细节：尽管对于用户而言，DALL-E2 是一个陌生的专业术语，但是后面紧跟着详细的解释，而不是将 AI 本身模糊化让它听起来像「魔法」一样。这段描述还可以传达出微软对于 AI 技术在道德层面上的理解和关注，并且会尽量清晰地展示背后的内容。「如今，太多人将人工智能（AI）视作为另外一种神奇的技术，对于它的工作原理知之甚少。」最后，将这些信息置于工具提示控件当中，也是尽量让技术术语不妨碍用户的正常使用，但是由于呈现样式会很清晰地同普通控件以及界面其他内容区分开，因此不会对用户造成可访问性上的障碍。3、道德原则：强调 AI 的道德性作为新生事物，AI 的不确定性让它很容易被不道德地使用。怎么使用才是道德的，这当中有很多模糊的地方，因为当下每天都会有新的用例出现，很多艺术创作者仍然会因为风格被盗用而感到愤怒，但是 AI 的艺术图片生成的速度从未放缓。「为了防止 DALL-E2 在 Designer 和 Image Creator 中生成的结果不合理，我们正在和开发 DALL-E2 的 OpenAI 一起采取措施优化，并根据需求改进我们生成图片的方法。」而在用户这一端，Microsoft Designer 的程序会在工具提示当中多次提示用户，如果生成的结果不合理、不符合预期的时候，让用户尽量提供反馈来帮助系统优化结果，以期后续给用户更好的结果：Bing Image Creator 当中，也采用了类似的策略，每个 AI 生成的图片附近都会有说明性的工具提示，其中会包含相关的道德规范，以及常见问题的相关回答：4、解释原则：告知用户结果的来源解决了道德问题之后，根据 AI 用户体验设计原则，AI 程序应该能够让用户追溯到它原始的数据点，或者让用户以某种方式了解图片内容生成的方法，以提高内容的可信度。「如果你是从多个来源聚合数据，那么请将它们分解开来让用户可以重现这个结果。这些信息应该作为用户流程中的一部分，并且通过一致的 UI 界面呈现出来。——《UX of AI》」绝大多数的 AI 汪中，从 OpenAI 的 DALL-E2 到 Prompt Hero 这样的 AI 灵感素材网站，都会在图片内容上公开展示每个图片的原始来源。Microsoft Designer 以相同的方式来解释来源，当你悬停在任何一个 AI 生成的图片上的时候，它会以工具提示的方式展示来源：这些 AI 生成图的原始来源，会呈现在界面的右侧，同时会使用文本「我们使用您的描述内容和 AI 为您设计出这些图片」，借此来陈述设计的来源。不过，Microsoft Designer 并没有展示具体的创建图片的数据点，也没有详细解释 AI 的工作方式，这可能和 DALL-E2 的工作方式有关系，它无法实现。另外，作为一个商业产品，太过细致的内容可能超出了范畴。5、引导原则：为用户提供建议AI 提示词对于很多用户而言可能会比较陌生，因为提示词文本需要符合 AI 处理信息的逻辑。OpenAI 甚至提供了「最佳实践快速指南」，而GPT-3 的经验则是：对所需要的背景、结果、长度、格式、风格尽可能进行具体详细的描述详细阐明所需要输出的格式从 zero-shot 开始，然后尝试 few-shot，如果两者都无效，再进行微调用户第一次撰写 AI 提示词文本的时候，可能会感觉非常陌生，而 Microsoft Designer 选择了最直接的策略，就是使用自动建议来辅助用户：和前面提到的熟悉原则类似，结合我们的搜索习惯，搜索建议文本也是我们所熟悉的东西。另外，这也意味着，后台必然是有着大量的用例来支撑这些自动建议文本。6、掌控原则：让用户掌握主动权尽管引导用户有帮助，但是依然要让用户拥有掌控权，按照他们的方式来进行创建。所以，产品本身不要完全依靠人工智能，允许用户选择跳过一些步骤，让用户选择符合他们需求的流程，让 AI 和用户协作，而不是让 AI 来接管一切。比如，当 AI 不符合用户需求的时候，用户依然可以选择自己事先准备的图像来继续设计。在 Microsoft Designer 当中，AI 生成的图片组当中始终有取消的选项，同时「从空白画布开始创建」的选项始终存在：这意味着用户即使完全不使用 AI 功能，依然可以借助自己准备的素材完整地创建出整套的营销内容和图片。结语尽管我确实想将上述的设计策略视作为一组设计法则，但是实际上它们更像是一套可供遵循的概念和范例，但是它们确实可以帮助你设计 AI 产品，这些案例和方法让你可以无需重新造轮子。人工智能技术确实在快速发展，但是此时的应用类型和场合依然有限，随着各种工具逐步发展，这些设计方法和用例会进一步完善。关于 AI 的 UX 设计，Lennart Ziburski 撰写了精彩的入门技巧，而本文也从中汲取了不少营养。本篇来源：优设网原文地址：https://www.uisdc.com/ai-prompt-design-principles
用户 内容 品牌 一、项目背景威睿能源是吉利旗下，一家专业从事新能源汽车动力电池、电机电控驱动系统、充电系统、储能系统的研发、制造、销售与售后服务的新能源科技公司。旧版威睿官网存在框架不合理、内容混乱、无法实时维护和品牌感弱等问题。威睿能源希望与极氪用户体验中心（ZED）合作对其官网改版，让用户更加全面了解的公司的品牌和产品。更多极氪文章：未来趋势！如何用数字孪生打造汽车工厂大屏？今年上半年我国新能源汽车销量达到乘用车总销量 25 %，同比增长 1.2 倍。阅读文章 > 二、目标归纳经过与业务方的多次讨论和分析，我们对威睿官网的改版诉求达成共识：建立信赖。搭建全新的官网框架内容和设计，让用户更全面的了解公司向用户传递专业、安全、可信赖的感知；提供用户和企业的沟通渠道，减少获客成本，提高潜在客户的留存和转化；高效曝光。使品牌产品能够快速在线上曝光与迭代，提高公司产品热度，减少广告营销成本；建立可及时维护更新内容的管理后台，方便高效的自主操作即时发布；理念透传。提高威睿的品牌辨识度，传递高技术/高品质/高安全的品牌理念及价值观；建立品牌影响力，感知客户，服务客户，成就客户；在此基础上，我们从框架、内容、视觉三个维度制定设计目标和策略。重新制定清晰合理的框架结构，呈现直观有效的信息传达、探索一致新颖的设计语言。三、框架制定要让网站框架清晰合理就必须对用户的诉求进行分析，经过体量和角色两个维度研究，我们确定框架主要服务于寻找和决策长期合作为目的的大企业客户决策者。在与业务协调确认内容素材，同时结合核心用户的诉需求，根据重要度、关系、次序进行信息的归纳与分析后，确认整个网站的信息架构。对于核心的首页，我们依据营销中的引入、成长、成熟、转化模型。首屏通过企业品牌理念对用户视觉进行冲击，吸引用户继续浏览。再通过产品矩阵、技术实力、成功案例和行业背书让用户对威睿的能力实力全面了解产生信任。通过前三步层层递进的宣导使潜在客户产生初步合作意向后，最后自然给出联系方式完成转化。四、内容设计新能源工业产品技术规格复杂，如果按产品资料直接平铺，大量文字无处安放，用户阅读费力。所以搭建一个高效，可扩展的内容结构尤为重要。为此我们对内容进行排序，精简、合并产品页模块，减少因内容迭代导致的楼层堆栈。提升高价值信息的展示优先级，让用户更容易发现有利于转化的内容。通过小标签、数值的提炼等方式，为大量内容划分层次，提升用户获取或理解业务关键内容的效率。并且用规则的阵列布局，营造有序严谨的官网形象，同时也满足平台和各业务的发展和扩展需求。增加更丰富的信息纬度，过去以表格、图文呈现的技术信息，现在以图文视频动效等方式展示信息，提升用户对内容的视觉聚焦。五、视觉表现确定视觉风格之前，我们结合品牌调性、产品特色和用户需求，整理情绪版，得到 2 个设计关键词——秩序感、空间感。秩序感充满规律和条理，新能源工业产品属于高科技行业，而科技正是人类从自然中发现和研究出的规律秩序。界面的秩序感能带来视觉冲击和人们对科技产品实用美的欣赏。网页设计呈现用户的屏幕上是二维平面，如果能创作中具有立体感和深度感的视觉空间，突破平面信息传递的限制，更能从多维度体现威睿的品牌和产品实力。空间感正是塑造意境氛围强化呈现效果的关键。六、秩序感为了让使用不同屏幕的用户访问网站时都有舒适的界面效果，我们通过对不同断点下栅格的宽度、模块、元素进行调整，保证页面布局的一致性，以达到最佳的页面展示效果。框架布局是体系化视觉设计的起点，我们受包豪斯无装饰和极简理念的启发，采用模块化结构去排布图文信息，统一规整理性。字体板式可以帮助创建清晰的层级结构，组织信息，高效清晰的呈现设计和内容。形成一套规范体系，沿用与其他门户网站项目中，在视觉上达到统一和整体。色彩体系按照品牌书中的颜色指导进行的设计，主要使用了白色和浅灰作为主色调，运用在页面背景中，电光绿作为主识别色，沙黄作为点缀色。强调品牌特性，增强用户记忆。七、空间感采用精致极简、有层次和空间感的三维图形为主视觉元素，契合威睿电力技术研发制造公司高科技、品质强、可靠安全的特性，给用户传递科技感、未来感。从品牌 logo 中提取元素创造代表电力的能量魔方，加上 VRMET 的基座，表达威睿公司电池、电机、电控系统强有力的研发制造能力。以核心主图为视觉聚焦点，辅助代表能量传输的绿色输送轨道向其他代表电力系统的的模块连接，底部用错落有致的图形代表平台，包罗整个威睿生态产品。统一的材质刻画极简纯粹、轻盈剔透的视觉效果。我们制定出统一有序的 3D 模型栅格、空间角度、长宽比例，快速搭建简化的几何图形，通过对图形的有机组合形成新的图形元素。提升风格一致性和搭建效率。设计可复用的通用场景底座，在核心区域搭建代表模块语义的核心图形，快速形成主页面 banner。以此标准化的分层组合手法，可快速搭建多个子页面，高效且体系化。结合实际的场景和概念语意，快速创造对应的虚实结合的图形主体物，搭建丰富的 3D 素材库，复用性强、延展性强、提升设计效能。总结此次威睿官网升级不仅搭建了全新的网站，更是建立了全新的科技感强、高品质、安全稳定的品牌形象，助力威睿品牌行业影响力的提升。强大的三维动效能力，可搭建空间感强且可交互工厂实景，应用于官网、数字可视化大屏、线下空间场景等，共同助力威睿品牌成为行业标杆。欢迎访问全新改版后的威睿官网：https://www.vremt.com/关注极氪 ZED 公众号，了解新能源汽车行业的体验设计干货。本篇来源：优设网原文地址：https://www.uisdc.com/vremt-website-design
表单 用户 标签 前言表单是我们生活中常见的信息添加、录入的方式之一，如何进行表单的设计也是 B 端设计师的必修课。身边别的部门的同事常常会说：表单不就是几个输入框，几个组件组成的东西么，挺简单的，有什么好设计的。但通常情况下，越是简单的东西，要思考的点却越多，想要把一个表单做好也是一件不容易的事情。生活中，大多数人都不喜欢表单，比如前段时间有一些许久没有联系过的朋友让我帮忙填写一下调查问卷，作为一个热心市民的我，自然是选择点开链接帮忙填写；一鼓作气填了一段时间后，看着剩下的问题，我不耐烦的放弃了填写这个调查问卷。所以作为设计师，我们应该“由内而外”而不是“由外而内”的去设计表单，如何让表单变得更容易让人接受也是设计师应该考虑的问题。更多兆日UCD的干货：6000字干货！3个优秀交互设计师应该具备的边界感引言售卖软件服务的公司，最理想的状态就是开发一套通用的解决方案或产品，而几乎不用接收任何定制化需求（定制化需求大多会被内化成通用产品的新功能）。阅读文章 > 一、什么是表单表单是一种用于信息添加、录入的页面类型。是连接用户与数据库的桥梁，通过引导用户进行信息的填写，从而提交数据给后台。在用户填写提交时，还需要对用户输入内容进行校验与反馈，保证用户信息填写的完整度。填写表单是一件麻烦事，当我们想做的是投票、网上购物或者添加好友之前，总是会有表单防碍着我们。正因为多数人不喜欢填写表单，所以在做表单设计时，我们的首要目标是让人们迅速轻松的完成填写，同时获得系统和用户想要的东西。二、如何进行表单设计1. 表单拆分基础表单中会有以下六个元素：1. 标签：标签文本主要是解释输入项的含义，一般不宜太长，需要简明扼要，快速让用户理解；还有一部分是告知用户哪些是必填项。2. 占位提示：直接展示在输入项中，采用弱提示文本对所需信息描述，当用户输入信息时即消失。3. 校验：对输入项进行验证，并给出反馈提示，如：用户未填写，格式错误、内容错误等4. 基础组件：可交互输入的区域，是构成表单的核心内容，主要有：输入框、单（复）选框、上传、时间选择器、开关……5. 提示：描述该输入项需要的输入类型，如：上传的文件类型6. 按钮：用户完成输入后，点击按钮进行提交、进入下一步等，按钮一般是跟随的最后一个输入项后面，若输入项超出一屏显示，建议将按钮悬浮固定在底部。当我们开始制作某一表单的时候，我们需要强迫自己思考一下每个元素的 UI 问题：这个元素是什么类型的？如何处理其他这类东西？元素之间有什么关系？通过合并相同类别元素或者扩展该元素和其他元素之间的关系，能否简化设计？2. 表单录入模式表单根据录入模式可以分为：单步表单、分步表单和高级表单① 单步表单：单步录入指的是在一个页面即可完成内容输入。使用于内容较少，结构简单的场景，我们常见的登录页就是典型的单步表单。② 分步表单：内容较多、录入内容的方式差异较大的情况且业务本身具有流程化特性，一般通过添加分步导航展示内容。常见的例如银行转账，修改密码等等。③ 高级表单（分组表单）：高级表单（分组表单）：主要用于需要一次性录入大批量数据的场景。高级表单与分步表单有点类似，都是为了减轻用户填写压力，将填写内容进行分块。不同的点在于，分步表单的流程化明显，后一步填写的内容都是基于前一步来填写、是前一步反馈。3. 表单的页面框架表单的页面框架指的是承载着整个表单页的页面框架，即：整页式（新页面）、弹窗式、侧边栏式。因为其页面面积大小不一样，所以使用情境有所不同。整页式（新页面）：最常用方式，适用于绝大部分的表单，可以支持构建复杂的表单。弹窗式：通过小面积的弹窗进行轻量化的编辑，方便快速进行增、删、改、查；输入项较少，一般不会有滚动条。侧边栏式：与弹窗式相似，通过小面积的侧边栏进行编辑；可承载比弹窗更复杂一些的表单内容，可以有滚动条。我们在选择页面框架时通常需要综合以下三个因素去考虑：内容数量 ：内容如果较多不适合使用弹窗式与原页面关联程度 ：需与原页面关联强建议使用弹窗式、侧边栏式表单的复杂程度： 一般高级表单、分组表单、分步骤表单、有表格聚合的表单、联动表单等都建议采用整页式的框架来展现。4. 表单的排列方式① 布局方式在制作表单的时候分成两种排列方式：单列布局和多列布局。我们可以通过以下几个因素去考虑使用什么布局：1. 在输入项不多的情况下，建议采用单列布局，因为单列布局，用户填写的路径就是从上至下的一条直线，十分符合用户的视觉动线，能够提高用户浏览与填写的效率。2. 多列布局的表单会导致用户的视觉路径变长，用户需以 “Z” 字形的视觉动线扫描表单，会提高浏览与填写的效率，并且多列表单容易造成用户填写时的混乱，易填错，体验差。但是有时部分业务诉求和某些特性的场景要求，会需要在有限的空间上放入更多的控件来收集用户的信息，这时就不得不使用多列布局的样式，因为多列能够省纵向空间。单列布局优势：视觉路径清晰，填写效率高，体验好；劣势：垂直空间占用率高。建议使用场景：表单内容较少的情况下使用单列布局多列布局优势：省空间，能够放置更多的控件；劣势：视觉路径模糊，填写成本高，填写易出错。建议使用场景：关联性强的填写项横向排放，且将该列中最重要填写项的放于最左侧。② 标签对齐方式标签的对齐方式有：左对齐、右对齐和顶对齐，除了需要考虑单列式布局还是多列式布局，还有我们也需要考虑标签的对齐方式。马泰奥·彭佐在 2006 年 7 月对表单的每种对齐方式做过眼动测试研究，根据研究结论做出以下分析：顶对齐标签：研究中，从标签移动到输入框只需 50 毫秒。比左对齐标签快了 10 倍，后者需要 500 毫秒；比右对齐标签方式快 2 倍，后者高达 240 秒。能迅速填完顶对齐标签表单的原因之一，是因为眼球只需要在标签和输入框之间进行上下单向运动。优势：眼动测试中移动速度最快，最有利于提高用户填写表单的效率。标签字数相比于左右对齐标签可容纳更多字数。劣势：纵向空间占用率高，对于小屏用户不太友好（设计前需要考虑用户使用场景以及使用设备）建议使用场景：希望用户快速完成表单；对标签的扩展性高，有国际化需求（中文转英文，英文会比较长）；更适用于弹窗式、侧边栏式布局。右对齐标签：如果要尽量减少表单占用垂直屏幕空间，右对齐能提供快速完成时间。研究中，专家用户和新手用户扫视（眼睛运动）右对齐标签表单的标签和输入框的平均时间分别在 170 毫秒和 240 毫秒，而填写完成时间比左对齐快 2 倍。优势：标签和输入框位置紧密，更方便填写劣势：右对齐的布局会造成标签的左侧不齐，影响快速阅读表单的效率问题；如果增加填写项标题字数过多，整体的表单页都需要修改，右对齐灵活性低。建议使用场景：适用于需要填写效率但受到屏幕垂直面积限制的页面。更适用于整页式布局。左对齐标签：在顶、右、左三种方案中，左对齐表单填写速度最慢。因为左对齐表单解析问题时眼球定位次数最多，用户一般情况下都能将左对齐布局中的标签和输入框联系起来，只是花费时间较长。在研究中，典型扫视时间为 500 毫秒，很长说明用户经历了沉重的认知压力。优势：易浏览标签；占用纵向空间较少劣势：标签和输入框距离较大，表单填写效率低建议使用场景：需要让用户认真思考后填写的页面；更适用于整页式布局输入字段上方的粗体标签在顶对齐的情况下，设计师可能会想：如果我们将标签进行加重，这增加了它们的视觉重量，并将它们带到了布局的最前面，这样说是不是可以让用户更好的去完成表单的填写呢？但事实却和设想相反：粗体标签反而增加了用户填写的负担。粗体标签导致从标签移动到输入字段的扫视时间增加了近 60% ，从没有粗体标签的 50 毫秒到有粗体标签的 80 毫秒，更突出的标签没有明显优势。粗体标签更难让用户阅读和感知——可能是因为粗体文本和输入字段的相邻粗边框之间存在更多的视觉混淆。小结标签位置：单从效率角度看，顶对齐>右对齐>左对齐，但是根据应用场景，效率快并不是我们选择标签对齐方式的唯一的指标。在大多数情况下，将标签放在输入字段上方效果更好，顶对齐的情况下标签的扩展性更高，且用户不会被迫分开查看标签和输入字段。需要注意在视觉上将下一个输入字段的标签与前一个输入字段分开。粗体标签：阅读粗体标签对用户来说有点困难，因此最好使用纯文本标签。但是，当使用粗体标签时，可能希望将输入字段设置为没有粗边框。三、表单校验形式1. 什么是表单的校验为了让用户准确的填写表单，在用户填写表单中/填写表单后，常常会增加我们常说的“反馈提示“，针对反馈信息的准确性，我们会采用两种校验形式：前端校验和后端校验。① 前端校验：主要负责校验输入的内容格式是否正确；例如常见的手机号格式是否正确、密码格式是否符合要求。② 后端校验：与数据库相关，主要负责校验输入内容是否正确；例如常见的手机号是否存在，密码是否正确。③ 校验触发条件：用户输入时进行校验（例如：注册输入密码时，实时显示密码强度）用户输入完成失去焦点时进行校验（例如：注册重复输入密码时，密码与前一次输入的是否一致）用户输入完成点击操作按钮时进行校验（例如：注册点击提交时进行校验，手机号已被注册所以未通过注册）④ 报错方式：即时报错输入完成后点击 提交/下一步/保存 等操作后报错2. 校验形式根据不同的校验触发条件和报错方式，我们可以组合成以下几种校验形式：① 输入时即时验证，即时报错用户在输入的过程中进行实时验证，输入框处于聚焦时开始提示，随着输入的过程，符合要求后已与用户通过验证的反馈。例如在注册阿里云账号时，设置密码需要满足三个条件，这里采取了即时验证。优点：可以实时告知用户表单的填写时候符合规范缺点：实时验证会使用户分散注意力，也有可能会引起用户的反感使用场景：注册时需要设置密码，通过密码不同的组成，时判断密码的强度，比如纯数字密码符合最低安全要求密码，但增加大些字母和小写字母后就形成了更安全的密码② 失去焦点后即时报错用户在输入完成后进行验证，输入框失去聚焦后（即用户点击输入框以外的位置后）与用户进行反馈。例如在注册网易邮箱时，填写完毕后即时报错。优点：为用户修改错误节省时间、避免出现很多错误需要改正的情况。缺点：如果输入有误，用户需要多一步操作，点击会有错误的输入框进行修改。使用场景：注册用户名时，取消聚焦后会反馈用户名是否可用，不可用的情况下是被注册还是格式有问题。③ 操作后（保存/提交/下一步）后全部报错用户完成表单填写后，点击操作按钮（保存/提交/下一步），系统将表单统一上传到后端数据库中进行对比后集中与用户进行反馈。优点：减少对用户的打扰，减少后端服务器压力，提高效率缺点：用户只能点击按钮后才可以得到反馈，不能及时修改；若表单过长，用户返回修改的路径也将增加。使用场景：登录账号是判断密码是否正确最后说说表单是后台最常见的场景之一，所以表单设计是 B 端产品最重要的部分之一。表单的设计是需要产品经理和设计师共同解决的难题。表单需要注意的点还有很多，我们在设计表单的同时，不仅要考虑上述的这些问题，还得“由内而外”的考虑表单为什么这么做，在用户录入信息时能降本提效才是我们应该做的。更多表单设计干货：想把表单的用户体验做到极致？我总结了这5个细节！Hi，我是彩云。阅读文章 > 把表单体验做到极致！11个表单设计的高效技巧大家好，这里是设计夹，今天为大家分享的是「表单设计」。阅读文章 > 欢迎关注团队微信公众号：兆日 UCD本篇来源：优设网原文地址：https://www.uisdc.com/web-form-design-2
插画 用户 风格 漫长的时间线里插画随着时代、文明、科技的变化，以不同的创作形式传递创作者的思想。如今插画独特的属性魅力，造就了其在设计中的新趋势。 鲁迅先生曾经说过：“在书本里边的插图，装饰了书籍，增加了读者兴趣，而这种无形的力量是文字所不及的。”更多设计史科普：用一篇文章，帮你掌握美国平面设计史在 20 世纪 30 年代时候“图形传达系统“传到美国，对美国地区的平面设计产生很大促进，我们今天的话题就需要将镜头移到美国。阅读文章 > 一、插画的源起发展将其划分为五个时间节点，分别为源起，开端，探索，发展，变化。 在漫长的时间线里插画随着时代、文明、科技的变化，以不同的创作形式传递创作者的思想。插画的源起，要从公元前 15000 年阿尔塔米拉洞穴彩色野牛头绘画说起，其次重要的是埃及的《死者之书》，这是公元前 332 年发现的纸钞草绘画作品，为什么说很重要呢？因为它是最早以插画形式完整展示的叙事性内容。死者之书也称为“通往光明之书”。段落是依照死者生平而撰写的，对其中画面感兴趣的也可以看看最近漫威新上映的英雄剧集《月光骑士》，里面后三集的一些情节和死亡之书有契合之处～，比如男主两个人格（马克和史蒂文）的心脏再和天平秤量的时候，因心脏都不完整无法在天平上保持平衡。这一设定死者之书中也有绘制，这源于古埃及神话：当一个人去世后，为了证明自己无罪，用玛特的羽毛和死者的心脏称量，如果心脏比羽毛轻即为无罪。反之则有罪。（Ma’at 玛特）「古埃及真理和正义的女神，其象征物为鸵鸟羽毛。」1. 插画的开端公元 5-15 世纪为插画的开端，这里主要着眼于两处，一是中国隋唐五代时期出现的为印制而雕刻成版的版画，这也是世界上发现最早的版画记录，二是欧洲，此时欧洲插画主要应用于宗教领域。呈现形式为刺绣和手抄本.2. 插画的探索15-17 世纪，插画进入了探索阶段，下图第一幅作品—火之圣母是欧洲记载最早的版画。1440年从欧洲的角度而言标志着插画艺术的真正开始，缘由为德国人古腾堡发明和建造第一台活字印刷机，由此插图版画在书籍中广泛运用。16 世纪文艺复兴时期，德国画家丢勒，使得欧洲木刻达到了顶峰。17 世纪巴洛克时期的鲁本斯对于木刻进行再次探索。3. 插画的发展18-19 世纪属于插画的发展阶段，这里首先提及英国 18 世纪的三位画家，分别是：威廉霍加斯、托马斯比维克、詹姆斯吉尔雷。第一幅《堕落过程》为霍加斯的系列作品，一共有 8 副，记录了伦敦社会中一位年轻绅士的腐败以及最终毁灭，讽刺当时英国贵族奢侈糜烂的生活。整个系列也被称之为叙事插画最伟大的成就之一。第二幅为《四足动物史》，作者比维克一生都在为伊索寓言绘制插画。最后一幅作品描绘的是英国首相威廉皮特和拿破仑瓜分全球，作者吉尔雷，他的蚀刻版画因其尖刻的政治讽刺而闻名。比如说现在的微博大 V 乌合麒麟他的绘画作品也多为社论和政治讽刺，最为大家所了解的是孟晚舟女士回国这张作品，在推特和 ins 上能看到很多相关社论插图，以下几张。发展阶段，纵观日本和中国仍然偏爱木版印刷，并且保持极简主义。葛饰北斋，是这一时期中最有成就的。简约清晰的线条以及全彩制图使他打破了木版绘画的局限性。代表作为《富岳三十六景》。此外在发展阶段必须要提及三次技术革新。第一次是 18 世纪平版印刷机的发明，在整个印刷过程中，可以在印刷运行中单独添加色彩以获得全彩效果。第二次技术革新是摄影技术的发明，1826 年尼埃普斯拍摄了现存最早的照片，但实际上 1839 年由其合伙人达盖尔才真正发明了摄影技术，这对古典艺术，写实类肖像画产生了一定的冲击，但由于最初的摄影技术只能拍摄黑白照片，所以对于彩色插图而言并有有形成太多的冲击。第三次革新为 19 世纪中叶，报纸在整个欧洲兴起。插画的叙事性为新闻增加戏剧性。由此出第一个标志性的漫画人物 Aly Sloper「盟友斯洛珀」诞生，围绕盟友斯洛珀塑造了很多新闻事件插图。4. 插画的变化20 世纪插画到了不断变化的阶段。从两个角度去看，一是变化的主要原因，二是不同风格的原因。接下来重点看一下有哪些插画风格在变化阶段应运而生。① 复古怀旧浪漫主要代表人物有 拉克姆 和 杜拉克 以及浪漫的乡村主义 波特（细致的水彩插图）波特笔下的兔子后期改编为电影，就是大家所熟知的《彼得兔》② 漫画的革新改变漫画形式为「乔治赫里曼」。在他的创作中，线条松散。构图上运用时间和空间的概念，表现出超现实的视觉幽默。上图《疯狂的凯特》通过洞的不同方向，以及夜晚白天来表达空间和时间的变化。到了六七十年代，比利时插画家 愛弗米倫，他的风格更为时髦犀利。③ 战争宣传海报一战期间，插画被应用到战争中，比如招募男性士兵、保护妇女儿童。二战期间，插画主题多为压迫犹太人，以及美化德国的民族主义。④ 装饰现代主义要提及四位著名的插画师。首先第一位新艺术运动的代表人物 穆夏，他抛弃传统装饰风格，使用大量自然元素作为装饰，优美的曲线来描绘女性。从小提琴手到顶尖插画师：穆夏大神炼成记上一回我们聊了 “维也纳分离派”这群叛逆青年的故事，其中著名的象征主义画家古斯塔夫跟建筑师霍夫曼两人的设计风格是此流派的风格基因，主要特点是简约的几何化构图以及富有象征意味的装饰图形。阅读文章 > 第二位 比亚兹莱 他的画风受日本浮世绘等风格的影响，具有强烈的个人风格，尤其是对线条的出色运用和黑白画的创造性成就。第三位 卡桑德尔，第二次工业革命以后，人民对现代性发展有了广泛的接受，卡桑德尔在他的作品中，打破了几何边界的界限，并且有较强的设计感。第四位是被誉为“发明了现代杂志设计的整个构想”的 克里斯蒂安 ，他为当时的《星期六晚邮报》制作了三百多个封面。1967 年嬉皮文化到来。由时代音乐及地下生活方式的影响而创作的色彩鲜艳的的迷幻图像（看起来像是一场对装饰艺术风格的革命），但是并没有转化为主流，到七十年代初，就几乎销声匿迹。⑤ 极简主义美学代表风格为萨普拉卡特风格，这种风格的先驱 霍尔温，作品中较少的几何形体、醒目的字母、形状最大简化等，对极简主义美学和海报化做到了很好的探索。⑥ 电影和动画真人电影和动画电影诞生于维多利亚时代晚期。到了 20 年代，它们已经主宰了娱乐界，此时摄影技术还没有很完善，所以制作海报的几乎都是插画。代表作品《大都会》《爵士歌手》。展示了插画在电影海报中的妙用。20 年代，第一位动画明星「猫菲利克斯」诞生，实际上后来很多的 IP 动画形象都有参考其模版绘制，包括米老鼠、猫和老鼠。1937 年：迪士尼，发行了第一部彩色长篇动画《白雪公主》此时除了动画师，还有数百名的概念艺术家、角色设计师。1938 年最初创造的超人形象登场——动画也向全新的流行艺术发展。⑦ 儿童绘本1928 年儿童插画家 万达加格 出版的《数百万只猫》被公认为是第一本（绘本）。打破了原有图书文字排版和插图之间的关系，取而代之的是更多的由有趣的插图，文字只是为了支撑图像。但此时儿童绘本并没有被更多用户接受和理解。一直到 1963 年 森达克 创作的《野生动物在哪里》强化了儿童绘本在用户心中的心智，这也是儿童绘本的里程碑。⑧ 超现实主义幽默第二次世界大战以后，插画师 阿兹巴舍夫，创作的图形风格惊人，在机器上显示出明显的人为属性，有超现实的黑色幽默。⑨ 奇幻画派六七十年代，摄影逐渐取代插画成为媒体视觉表达的主要方式，比如杂志的封面多为摄影拍摄，但由于摄影不能拍摄不存在的东西，所以幻想艺术蓬勃发展（科幻小说、漫画、儿童绘本）奇幻画派的先驱 弗雷泽塔 创作了很多肌肉发达的英雄，已及奇幻元素。当代游戏概念艺术都受到他的 影响。⑩ 数字艺术80 年代个人电脑革命兴起——数字技术发展迅速。 设备也不断更新比如：手绘版、iPad。综上所述可以发现，插画风格是多样的，而背后的原因，除了插画师本人的经历、喜好、价值观等主观原因，更多的是受时代背景、流行文化、社会环境、历史事件、以及绘画技法、等客观因素的影响，才慢慢演化为当下自由、多元、包容的插画创作氛围。二、商业插画被广泛应用的原因从六个方面来看，分别是商业插画的概念、应用场景、应用背景、插画本身的优势、市场和用户需求。艺术创作没有目的性，但是商业插画的目的性非常强。商业业插画一般承接了用户和市场的需求，深受当下的流行文化影响。插画的应用场景有很多，归类来看分为以下六种：从四个角度看插画的应用背景：商业化的发展及视觉文化传播方式的广泛应用人的思维模式从语言文字为主的理性主义形式转变成以图像为主的感性主义形式文化形态的传播方式从语言文字的生产、传播、消费转变成视觉图像的创作、传播和消费信息时代的不断发展，电脑等电子设备已经成为时代发展的标志插画本身的优势有几点：从市场需求的角度来看，市场需要通过插画广告刺激消费，提高经济效益，其次强化宣传提升品牌传达：从用户需求的角度来看，互联网信息时代，用户在接收复杂繁多的广告信息的同时，需要更好的视觉体验来提高审美，其次用户也希望从中产生一定的情感共鸣，获取到情绪价值。三、插画在 UI 设计中的优势和应用场景优势有以下6点：1. 信息可读性与高记忆点从用户角度来当前界面，可以简洁直观的通过插画 get 到花不同的钱可以享受到的不同服务。2. 叙事性激发用户交互美国的 Mailchimp 网页端用插画的方式，引导用户认识产品并如何使用产品，更好激发了用户进行交互操作。3. 强化品牌识别通过 IP 的插画设计，不断夯实品牌的用户心智。4. 强化界面的美型提，升用户审美5. 插画的定制感与独特感增强用户的分享欲望6. 建立信任插画的表达方式更能与用户拉近距离建立信任。插画在 UI 设计中的应用场景，分别有以下这些：1. 新手引导比如转转知乎在新手引导时都选择插画的表现形式，提升用户对产品的好感度，已及降低对产品的学习成本。2. 新功能提示降低用户学习成本，拉近与用户之间的距离～3. 品牌宣传Goole 的 web 端每逢节日便会有围绕 goole logo 来进行节日主题插画的创作，很好强化品牌的用户心智。4. 登录页众多产品都在登录页使用插画的表达形式，更容易于用户产生情感连接达到品牌触达。5. 插画组件Ant Design、自如都构建了自己的插画组件，有助于统一的视觉风格传递。6. IP 设计这可以很好的赋予品牌生命力，提升品牌的温度，更好的触达用户。7. 奖励机制和榜单在一些奖励交互动作时，通过插画形式传达正向反馈，提升用户情绪价值。8. H5 的主题分享最近几年产品都会有年度报告，很多都以插画的形式表现，插画的定制感与独特感增强用户的分享欲望，用户通过分享建立自己的社交货币，满足用户的社交需要。从插画的发展、商业插画、UI 设计中插画的应用三条脉络做了简单梳理。希望对您了解插画应用插画有一定的帮助。感谢浏览～Thanks与《小王子》作者合作出书：顶尖黄书插画师奥布里·比尔兹利上一回我们讲述了法国新艺术风格的代表设计师穆夏，他以绘画见长，成长阶段遇到不少贵人，最后练成自己独步天下的画风，至今仍然有不少品牌会以致敬方式复兴这种风格。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/history-of-illustration
公寓 用户 房型 当我们做项目的时候，最重要的就是设计目标的确定，这关系着我们的方案是否真正解决产品问题。然而这个目标可不是我们以为的用户需要这样改，也不是产品告诉我们这么改，甚至更不可能是拍脑袋定的，那这个影响大局的设计目标到底怎么得出来呢？我将以 58 公寓产品的体验优化项目，来阐述具体的解题思路。相关干货：如何利用方程思维，从设计目标推导设计方案？今天就想给大家做做数学题，让大家再次感受一下被数学支配的“恐惧”（回忆）。阅读文章 > 一、行业背景大家对于公寓的认知是如何呢？“虽然又贵又小，但是装修好配套全。”我想这句话足以表现我们对公寓的初印象。公寓初印象那什么样的人会租公寓呢？通过我们的问卷调研发现，在 58 租房群体的公寓用户中，18-25 对的人群占比最多，其次是 26 岁-40 岁，跟 58 整体租房用户相比，公寓人群趋于年轻化，这就意味着，租房群体已经从高性价比上升为高品质生活。58公寓人群年龄分布那随着年轻群体的需求转变，公寓行情又是如何呢？经过我们对行业的分析发现，得到了三个结论：头部公寓领跑明显，开始在二三线城市扩张；公寓主题细分越来越明确，都有自己的主打用户群体；随着公寓标准的建立，长租公寓开始越来越规范化。二、产品现状通过对 58 公寓商户的梳理，发现 58 的公寓商户较于竞品来说，大部分都是偏中低端，然而这个也成为我们设计的一个困难点。但是从更深入的观察了解，我们发现虽然大部分都是中低端公寓，但是却有着自身的优势：与竞品比价格偏低；与个人房源比装修好；与中介比价格透明；与租房比还能押一付一。58公寓产品现状那这样的优势按理说应该好租吧？但是，我们从问卷中发现 58 租户有一半的用户是不知道公寓的，而在租公寓的用户的比例也是远低于《20 年底租凭市场报告》的，这说明 58 公寓有很大的发挥空间。58公寓用户分析三、设计目标确定从结构层看，我们总结出的问题有：信息传递不准确、品牌感弱、需求方与供给方连接弱。从视觉层看，我们发现公寓房源几乎看不到任何品牌性的内容漏出，且在公寓频道下与租房频道差距并不明显。从竞品分析结果看，我们与竞品确实存在着一定的差距。所以结合以上，我们确定了此次公寓的优化目标，主要围绕着两个方向展开：如何向 58 用户更好的传递公寓优势？如何让关注品质的租房能够快速的找到心仪的房子？58公寓优化方向四、设计落地结合目前 58 的公寓产品在 C 端的产品形态，以及产品的 Q4 计划，我们找到了公寓大类页及独栋公寓频道作为优化的落地页。依据得出的设计方向，我们找到设计的发力点着重在于：结构层：优化不同场景下的信息展示结构；优化独栋公寓用户选房路径；增加租户精细化运营；视觉层：增强品牌感的传递；信息展示更直观；增强真实感。58公寓设计目标拆解公寓大类页优化主要做了以下 3 点在公寓大类页头部增加品牌性的展示区域，主要目的是传递 58 的公寓品牌理念，同时还可承载公寓的大型活动展示；对金刚区的图标进行了优化，在增加细节及品质的同时使其更趋于真实感，为保持与大平台的一致性，颜色控制在 58 的四色范围内；在腰部位置增加个性化推荐卡片，我们把更多的细分公寓房源按分类推荐给用户。独栋公寓改版因为独栋公寓在整个公寓频道中，房源质量是最高的、最贴近用户预期的一类，所以此次的改版变化比较大，主要有了以下 3 点突破初次尝试以房型的方式去做公寓的推荐通过判断用户不同的浏览路径来决定页面的展示结构不同级别的公寓采用不同的展示策略具体视觉呈现有：在独栋公寓落地页，对头部做了更多的品牌调性的尝试；在腰部增加房型推荐卡片，信息展示均围绕着房型，期望通过租户关注的户型、面积、所属公寓、位置因素促进转化；推荐公寓列表通过大卡片的方式展示，信息通过展示品牌+门店+位置+推荐理由促转化。独栋公寓首页改版前后对比在门店详情页，头部沿用门店列表的渐变样式，增加品质连续性；对地理位置与上班距离做了更直观的尝试；房型列表标题信息结构重构使其更直观，增加门店的服务与配置展示公寓间的差异化，甚至通过品牌故事的描述提升租户的好感度。独栋公寓门店详情改版前后在房型详情页，此处应是租户处于决策阶段，所以头部展示房型的基础信息，该房型下的放假则着重展示差异化信息，通过朝向及面积促转化等。独栋公寓房型详情写在最后其实解题思路没有捷径，最好的方式就是深入到产业中，深度理解当下的产品及当下的用户，定义自己产品当下要解决的问题是哪些，定义好问题，再去发散创意，在实现自己价值的同时还可以帮助产品解决问题，这才是我们最终要追求的吧，有相关问题欢迎留言讨论～欢迎关注「58UXD」的微信公众号：本篇来源：优设网原文地址：https://www.uisdc.com/design-objective-2
用户 也能 插画 作为 UI 设计师来说，体验总结是必不可少的日常习惯，灵感的来源离不开对优秀设计的探索。本期黑马哥选择了最近发现的一些不错的设计案例，希望这些优秀的案例可以带给大家更多设计思考，强化我们的设计感知能力。往期回顾：10个产品细节剖析，看看高手是如何做设计的！产品设计做到极致的时候，发挥的空间就会深入到细微之处的功能，看着简单的功能，也会被设计师脑洞大开。阅读文章 > 一、个性化的性别选择设计完善信息对于产品来说是提升体验的关键，一些产品在初始状态会引导用户去完善，比如昵称、头像、性别、年龄等基础信息的采集。如何提高用户的设置兴趣，降低完善信息的排斥感，需要设计师进行反复推敲。最近在体验 FLAG APP 的时候，在性别选择界面设计上区别于以往体验过的产品，将性别的可视化进行了更为情感化的强化。出色的设计让用户眼前一亮，精美的插画提高了整体设计的感官体验。该案例提供了性别选择差异化的表现，是提高常规信息界面设计视觉感的不错思路。二、情感化的用户等级设计用户等级是增加黏性的关键，也能通过等级带给会员更多的增值服务，激发用户的参与度。在使用海马体照相馆 APP 的时候，个人中心在顶部视觉区域会直接显示用户等级，配合情感化的人物插画特别突出。通过左右滑动可以查看不同的等级，等级名称和对应的人物形象插画也会针对性的设计，不仅强化了用户体验，不错的视觉感也能吸引用户的关注度。三、精美的插画助你释放压力插画在产品设计中的曝光度越来越高，风格多样化直接影响产品风格，也能增强情感化体验。全靠插画撑起整个产品的案例是什么样子呢？最近发现了这么一款产品。Wild Journey 是一款解压的白噪音 APP，内置了许多大自然的声音，让用户体验到荒野的空旷、森林的静谧、大海的波涛。整个设计全是精美的矢量插画作品，带给用户赏心悦目的感官体验。来这里释放自己的压力，放松身心。四、趋势化的引导页设计引导页设计是最容易呈现风格趋势的，利于设计师进行创意发挥。无论是想要发挥插画技能、建模能力或者动效表现，引导页都能提供发挥的场景。最近在体验嘀嗒出行的时候，发现全新升级的 9.0 版本，引导页设计风格也是让人耳目一新。利用了趋势感的插画风格和视觉表现风格（玻璃质感风）相结合，画面清新自然，带给用户非常好的视觉感官体验。五、可视化表现提高用户理解度可视化设计逐步成为信息传递的趋势，利用图形化的形式更利于用户理解，相较于枯燥的文字化呈现来说阅读理解的效率更高。Keep 在产品设计的时候，有效的将一些数据的表达和内容的普及以可视化的图形进行展示，不仅提高了界面设计的感官体验，也能有利于用户对于内容的理解。提高界面设计的视觉感也能让用户更为关注，图形可视化已经逐步成为产品设计解决方案中的趋势。六、个性化的主题皮肤设置个性化的定制设计可以让用户感受到产品的温度，根据自己的喜好选择主题化呈现。成熟的产品都会在个性化设置上面提升体验度，特别是在主题皮肤的定制上面，提供了更多的风格让用户选择。Keep 在将主题皮肤设置定义为选择运动伙伴，不仅提供了不同的 IP 形象和主题皮肤，俏皮可爱的动态延展也传递了情感化的体验。多种风格的设计满足了不同用户的喜好需求，还为不同的主题定义了拟人化的角色和身份，视觉感和体验度都非常的到位。七、提高参与度的签到设计签到设计可以提高用户黏性，让用户在参与的同时获得礼品或者增值服务，签到也成为了众多产品的标配功能。对于设计师来说，如何通过设计提高用户签到的参与度，是需要不断探索的设计思考。最近在使用天天跳绳时，发现其签到设计的视觉表达直观醒目，大大的提高了用户对于签到的理解和参与度。将签到后解锁的勋章、经验、装扮和礼品等直观的结合到签到界面中，不仅风格协调统一，视觉风格也符合运动场景感。看到这个界面成功吸引了我的签到欲望，签到操作简单，整体的体验度都做得非常不错。八、情感化的个人中心设计个人中心作为主界面之一来说，设计的体验度是至关重要的。为了满足用户的喜好需求，个性化的设置也是层出不穷，功能布局、头像装扮、主题皮肤等都呈现出了众多的优秀设计方案。天天跳绳是个人经常使用的一款运动辅助工具，记录小孩跳绳也是非常便利的工具。个人中心顶部视觉区域的人偶形象增强了界面设计的感官度，人偶的动态体现出用户的运动状态，可以进行自定义的设置来满足自己的情感表达。可以设置人偶的装扮、旋转角度、动作等，人性化的功能设置提高了自定义的体验度，强化了用户情感化的使用体验。九、结果导向的设计表达以图标/图形/图片等设计辅助信息的传递很常见，通常都是根据信息的文案来进行设计表达。如果放弃本身文案信息传递的意思，选择结果导向的设计表达，也能带来不一样的设计反思。最近在体验 One More 的时候，动作库的列表设计中便选择了结果导向的思路。如果是常规的设计解决方案，会根据列表主题内容来设计配图，这样也能辅助对于内容的理解。但是 One More 选择了完成该项目得到的锻炼部位为设计思路，虽然不能辅助项目信息的传递，但是这个设计表达更能让用户理解完成的结果，参与度也能得到提升。可视化的设计替代了文字的表达，提高了用户对项目的理解度，进而转化更高的参与度。十、新颖的轮播 Banner 设计轮播 Banner 图对于设计发挥来说，除了在本身的创意和视觉表达层面以外，产品结构和功能层面也是设计师需要探索的方向。极有家 APP 在产品的体验设计层面做得非常不错，针对轮播 Banner 位置也是做了新颖的创新。在 Banner 图上设计了不同商品的引导标签，方便用户在感受整体家装效果图的同时可以选择场景中的商品，也能对场景中的商品价值有个清晰的认知。轮播的形式结合了待轮播图的预览和风格名称，增加了待轮播图的曝光度，整个样式表达上面视觉感也非常不错，是一个比较新颖的设计解决方案。小结体验、记录和总结是为了提高我们对于优秀设计解决方案的理解，也能强化我们的设计思路和灵感。对于设计的理解阐述属于个人见解，不足之处欢迎大家留言补充，我们互相进步。欢迎关注作者的微信公众号：「黑马家族」本篇来源：优设网原文地址：https://www.uisdc.com/10-ui-ux-design
键盘 用户 功能 微信键盘发布啦！拥有 12 亿用户的移动端巨无霸微信发布微信键盘了！就在上周一，预热近两年的微信键盘终于发布，这款微信之父张小龙口中的——不搜集任何隐私的输入法工具，总算揭开了他的神秘面纱。廖尔摩斯第一时间全面体验了微信键盘，通过三天的使用，我也成了微信键盘的脑残粉，这篇接近3600字的拆解，将会告诉你，这个地主家的小儿子，为什么又帅有才！往期拆解：6000字拆解！花费10个亿，抖音如何设计世界杯专题？作为全球最火爆的体育赛事，世界杯由于其独有的稀缺性，被外界誉为四年一次的足球盛宴。阅读文章 > 一、产品拆解作为一款工具类产品，需要更注重产品的用户使用体验，所以此次产品拆解主要基于尼尔森十大可用性原则和常见的设计基础理论，比如格式塔原则、费茨定律等。我将会分为基础功能、个性化功能和个人隐私三个部分进行拆解。让设计更有说服力的20条经典原则：菲茨定律简介说明1. 理论表述 任意一点移动到目标中心位置所需要的时间，与目标距离正相关，与目标大小负相关。阅读文章 > 1. 基础功能① 键盘管理键盘是输入法最基础的功能，根据每个用户不同的操作习惯，微信键盘为用户提供六种类型的键盘，分别是九宫格、全键盘、笔画键盘、手写键盘、五笔键盘和双拼键盘。在五笔键盘和双拼键盘中，还为用户提供了多种偏好设置，比如 86 五笔方案、98 五笔方案等。设计思考相比行业头部老大哥搜狗输入法，微信键盘的类型相对还比较单薄，比如像搜狗输入法还支持生僻字键盘、拍照转文字等特色功能，不过作为一个 V1.0.0 版本，这也遵循了如今产品设计的主流设计模式，小步快跑，快速迭代。② 键盘输入框「输入框」是用户实际操作和使用的功能，这是最基础、最重要的功能。微信键盘的输入框界面风格非常简洁，和 IOS 默认键盘风格相近，目前仅有一款默认皮肤。长按技巧长按「拼音键」，可选择更多相关字符，比如数字、大小写等。其中长按「JKL」拼音键，可切换至「单手模式」；长按「中英文」键，可切换至「手写模式」，非常方便。智能删除复原这个小技巧使用起来特别方便，在我们删除一段文字的时候，经常会出现误删的情况，微信键盘设计了一个非常巧妙的功能，按住「删除键」左拉可以删除文字，往右则可以把删除的文字复原，提高了产品体验的容错性。上滑输入数字符号这个功能需要在系统设置开启，在键盘输入的时候，只需要上滑「拼音键」，就能直接把拼音键对应的数字拖到输入框，节省切换数字键盘的操作步骤。特殊符号「特殊符号」不仅包含了常见的 10 种类型，横排 26 键的设计更能让用户直观地找到自己需要的字符，使用起来体验非常友好。相比搜狗输入法超过 20 种的符号类型，微信键盘简洁的设计为用户提供了更高效的选择，带来了更友好的体验。设计思考少即是多。相比搜狗输入法的大而全，在特殊符号这个细节的设计，微信键盘让我爱不释手。首先应用了 72 效应，在用户的短期记忆里，降低记忆负荷。其次也应用了席克定律，减少用户的选择，降低消耗的时间成本，从而提升用户体验。③ 偏好设置语音转文字从识别语言观看，微信键盘支持普通话、粤语、英语、四川话和上海话，笔者亲自体验一番，发现识别准确率还挺高的（贵阳话，和四川话接近，超过 80%准确率）。声音和触感「声音和触感」指的是用户使用键盘按键的声音和触感。这里有一个非常贴心的设计，当用户手机静音的时候，打开声音开关按钮会提醒用户当前处于静音模式，无法听到按键声音。这就是尼尔森十大原则的防错原则，在用户出现操作错误之前，通过设计提示提前避免，你可以想象如果没有这样的提示语，如果你的手机不小心静音了，你就会懊恼为啥键盘没有声音，这个软件是不是出问题了（笔者亲身经历）。显示设置微信键盘支持用户可设置键盘候选字的大小，这里也有一个非常贴心的设计，当用户调整字体大小以后，如果想要恢复默认大小，只需要把滑动组件拖动到已经标记的默认起点就可以了，这应用了尼尔森十大原则的易取原则，用户无需记住默认大小设置，如果想恢复，拖动标记的起点即可。模糊拼音及其他「模糊拼音」主要针对拼音基础欠缺的用户，提供模糊的拼音设置，从而提高输入效率。其次微信键盘还提供「首字母自动大小写」、「双击空格输入句号」和「智能添加空格」等偏好设置，用户可根据自己的操作习惯进行设置，获取更便捷的体验。2. 个性化功能个性化功能主要指微信键盘最特色的「拼写 Plus」功能，这也是微信键盘发布以后给用户最大的惊喜。① 智能推荐「智能推荐」是微信结合自己强大的生态设计的一个功能，在用户输入文字的时候，系统会自动判断文字的类型，比如输入一本书的名字，系统就会提示是否需要向好友发送这本书籍。从内容类型看，包含了音乐、视频、读书、小程序、视频号和公众号。这个功能在用户的聊天场景中，实在太方便了，比如作者过去要给好友分享自己的公众号，还需要去公众号搜索、转发，如今只需要输入「设计大侦探」的名字，就可以向好友直接发送，减少了数步操作路径，极大提升了沟通效率。② 表情推荐表情是微信聊天场景中必不可少的一个元素，甚至有很多用户特别喜欢收藏表情，它可以用于各种聊天场景，活跃聊天的氛围。微信键盘的表情推荐，通过用户输入的词语，可以自动识别可能需要发送的表情，无需用户收藏，就可以为用户自动生成。这个功能非常赞，特别像笔者这样从不收藏表情的用户，当突然需要输入一个表情活跃一下气氛的时候，我只需要输入一个「大家好」，微信键盘就能为我提供数十种表情，满足我的需求。③ 智能拼写「智能拼写」是指当用户输入某个词语时候，系统为用户精准匹配候选词，提高输入效率。笔者尝试了输入「梅西」，几乎可以根据智能匹配输入一段完整的文字。而微信生态更为恐怖的是，它会自动结合当前的话题标签，用户可直接跳转至话题的视频号动态，一键查看更多信息，让用户彻彻底底对微信生态的服务上瘾。④ 拼写检查「拼写检查」是指系统会根据用户在输入文字的时候及时发现错别字，一键精准改错。这个功能设计得非常贴心，能让用户及时看到书写错误，降低因错别字带来的烦恼。⑤ 常用语过去在微信聊天的时候，为了提高输入效率，我会把很多反复发送的文字复制到备忘录或微信收藏，这能提升我一定的沟通效率。但相比微信键盘的常用语功能，我以后就会直接放弃之前的两个形式了。这个功能实在太方便了，比如每一次粉丝添加我的时候，我都会需要介绍一下我们公众号的内容，现在我只需要输入前 3 个字，这段话就可以直接出来了，极大提升我的沟通效率。⑥ 单手模式「单手模式」是指用户可根据自己的惯用手或场景设置输入模式，前面我有提到过，长按「JKL」拼音键，可切换至单手模式。⑦ 手写找字「手写找字」是一个支持同时手写多字的输入模式，这个功能对于我们父辈一代的用户特别适用，他们多数人还未习惯用拼音拼写，更喜欢用手写的形式去输入，而支持写多字的模式可以极大提升拼写效率。⑧ 小结什么是以场景为中心的设计，微信键盘的设计团队告诉我们，这就是以场景为中心的设计。过去设计者总是在思考如何去定义人们使用的系统和应用程序，而“以场景为中心”的概念，则强调要以人的需求为中心，系统和应用程序要去帮助人们满足他们的需求。看看微信键盘设计团队结合如此多真实场景的设计，可见设计师真的需要具备场景思维，才能设计出让用户尖叫的体验。3. 个人隐私① 清空个人词典微信键盘提供了「清空个人词典」的功能，这有点不可思议。不过微信键盘的创立之初，微信之父张小龙就说过，微信将上线属于自己的专属输入法，其目的并不是为了抢夺输入法市场，而是为了更好的保护用户的隐私。不过该功能大家要谨慎使用，一旦清空，你所累积的个人词汇就会清空，将会影响你的输入体验。② 帮助反馈针对微信键盘使用的技巧和常见问题，微信键盘也设计了帮助反馈文档，为用户解决使用过程中的困惑。很多产品设计师或许觉得这样的模块可有可无，但这其实这就是尼尔森十大原则的人性化帮助原则，通过帮助文档为用户解决软件使用困惑。③ 隐私与权限“我们非常重视你的隐私安全。我们谨遵最小、必要原则，仅依《微信键盘隐私政策》获取你使用微信键盘的功能所需的你的信息，不会额外获得你的其他信息”。这是隐私与权限页面的一句话，足以见得微信键盘的定位如上文所言，只做一款单纯的输入法软件，不侵犯用户的隐私。二、设计总结作为一个才上线发布 V1.0.0 版本的输入法产品，微信键盘真的给了我太大的惊喜。从产品的易用性来看，无论是交互，还是界面，都严格遵循了尼尔森十大原则的标准。这个产品设计中最基础的设计理论模型，事实上，太多的工具类产品都没有遵循它的设计原则，我们常常说一款工具难用、不好用、设计不好，就是这些操作细节没有考虑进去。而微信键盘，在我目前的使用操作过程中，暂时没有，易用性非常高。从产品的创新性来看，微信键盘不仅满足了一个键盘输入工具的基础功能，而且结合了自身强大的生态环境设计了「拼写 Plus」这样非常创新的功能。它帮助我实实在在地提升沟通效率，比如一键推送我的公众号、和粉丝沟通的常用语等等，甚至破天荒的可以直接在聊天输入框分享我喜欢的歌曲、书籍、电影、视频号等，换做以前真的不敢想象原来这些功能可以通过一个输入法软件实现。我已经彻底成为微信键盘的脑残粉了，即便某狗的输入法显示我已累计输入超过 4 百万字，但微信键盘给我使用的尖叫感，真的让我不可思议，就像那汹涌的潮水，一波又一波袭来，让我尖叫！欢迎关注作者微信公众号：「设计大侦探」本篇来源：优设网原文地址：https://www.uisdc.com/wechat-keyboard-2
用户 产品 目标 随着 4G、5G 的普及，移动互联网进入成熟时期。用户体验的概念变得越来越普及，互联网进入了用户体验为王的时代。那么为什么要强调用户体验，做用户体验的目的是什么？很多人会说用户体验好，才会有更多的人使用，产品的用户量才能越来越高。那么真的是这样吗？这是本文讨论的重点。相关讨论：如何平衡用户体验和商业收益？来看高级设计师的教程！吴轶 ：用户体验有的时候是和商业化指标KPI 相矛盾的，那我们在设计一款产品的时候如何用量化的方式获得商业化指标和用户体验的均衡？阅读文章 > 一、什么是用户体验用户体验是用户在使用产品过程中建立起来的一种纯主观感受，是用户在使用产品过程中建立起来的一种纯主观感受。用户体验的提升主要包含以下两个方面：从宏观上来说，用户体验就是提升整个产品所能触达到的服务。以滴滴打车服务为例，当用户使用滴滴出行 App 打车时，涉及的触达点有上车前、坐车中和下车后。这 3 个接触点构成了产品的用户体验。而“打开滴滴出行 App输入目的地与司机电话联系并确认具体位置上车在车中到目的地 扣款评价”这整个流程就是用户整体的用户体验。也就是说，好的用户体验不仅仅指的是用户对产品 App 的好感度，还指的是用户对整个服务流程的好感度。从微观上来说，用户体验就是提升 App 产品的用户体验。腾讯旗下最大两个日活产品是微信和 QQ，他们整体的用户体验做的很不错，但是他们的用户体验的出发点却不同。QQ 的用户体验是针对所有不同的用户群，他们的体验是为讨好不同的用户人群，这也就是导致了 QQ 这个产品越来越复杂，信息干扰元素越来越多。QQ 的对话框，用户可自定义样式和字体，表面看起来满足了各个用户的需求，但是对于接收人群来说，在提取信息过程中存在干扰，不利于信息的获取。QQ 空间，用户可以对单个图片进行评价，在看图片详情，评论会以弹幕对形式展示出来，提升了用户获取信息的效率，但是缺点就是看信息不聚焦。无法全心全意看核心信息。那么 QQ 体验不好吗？其实也是挺好的，很多地方很人性化，过于人性化的同时不可避免导致信息获取难度变大。QQ 的设计逻辑总结：满足各个不同群体的用户需求。只考虑使用的用户人群感受，对其他角色（接收者角色）用户人群几乎不考虑。微信在设计中，更多的是考虑全局用户人群。不会因为有的用户需要个性化需求，对其设计。更多的考虑是整个产品的生态。同样的对话框，朋友圈动态，图片详情查看，都保持极度简洁，不可否认这伤害了一部分用户（发送者角色）的需求体验，但是对于绝大部分接收信息的用户者来说却是友好的。微信的设计逻辑总结：所有角色整体考虑，在考虑角色 a 的使用需求，同时还要角色 a 的使用需求给角色 b、c 亦或平台所带来的影响（这点很重要，也是我们在做设计的时候很容易忽略的）整个产品的定位以及平台生态考虑，考虑需求或设计时先全局再局部。微信的用户体验体现在全局的战略智慧。更多的是从整体出发做产品的体验。所以微信能从当年 QQ 这样的庞然大物中异军突起。二、为什么要强调用户体验用户体验是为用户着想，解决用户的问题，让用户在使用过程中更顺畅愉悦。用户体验的核心目的是为了拉新和留存。拉新很好理解，即利用口碑传播，减少新用户的拉新成本。产品拥有良好的用户体验，产品能获得更好的口碑和传播为产品用户增长提供坚强的后盾。同时可以提高产品的用户留存，减少新用户的流失，减少用户拉新成本。同一种类型的产品，如果产品的用户体验好的话，可以达到 60%以上的留存，但是如果体验不好的话，留存可能只有 10%以下。那么这两个产品留存用户数就存在六倍以上差距。用户高留存是产品能否健康发展的基础，高留存背后核心指标之一就是用户体验，用户体验好，则留存高，反之留存低，产品无竞争力。也有一些产品做用户体验更多是为了做品牌宣传，例如夸克浏览器等产品。三、用户体验与商业化的对立用户体验，即主要服务于使用用户，通过设计的方法提升用户在使用过程中的用户体验。而商业化产品则明显和单纯的服务于用户人群相排斥。即商业化和用户体验大部分时间是互斥的。产品的目标大部分都是包含商业化，即通过提升商业化收入。通过从用户那里获取价值或收益，这一过程不可避免需要以牺牲用户为代价，获得利益，在这一过程中又是损坏用户体验的过程。百度在不涉及到商业利益时，无论是搜索推荐，还是搜索结果展示，都很能命中用户的痛点，其用户体验感受是完全优秀的。但是涉及到商业利益时，其竞价排名策略完全凌驾于用户体验之上。前面的搜索结果全是广告，严重误导用户。所以对于百度来说，涉及商业化的时候，用户体验不会优先考虑，会专注做产品的商业化收益设计。当然有一些好的产品商业模式，其巧妙的商业模式，使得用户体验和商业化之间不存在严重的对立，反而是双方互利共赢。例如「什么值得买」这个产品。通过向用户推荐物美价廉的产品，基本是全网最低价，用户通过其链接跳转到各个平台，用户成交后，可以得到部分卖家设置的提成佣金，从而得到盈利。所以什么值得买的产品目标就是，提供更优质的产品推荐内容和操作体验，从而获得更多的用户和成交，使得双方达到了共赢。下图为用户点击链接，跳转到对应的京东热卖，交易完成，会得到卖家的提成佣金。四、产品的设计立场是产品目标产品前期发展过程中，拉新和留存可能就是产品的首要目标，是为产品服务的。所以提升产品的用户体验是为产品的目标而服务。在这个过程中要强调目标用户的用户体验。产品到了稳定期，公司为了生存获益，这时候产品的目标就是商业变现，这时候当用户体验和商业化存在冲突时，就会牺牲产品体验，但是也不能过度牺牲用户体验，不然会影响到后续的商业化变现。作为产品经理或者设计师。我们偏向的角度更应该是公司或者我们的产品平台，而不是单纯的用户，当用户可以为我们的产品创造价值，在这个互利共惠的过程中，我们需要考虑体验去讨好用户，在产品商业化和用户体验中找到平衡点。但是在不同的阶段，产品目标会不同，所以我们需要确定核心目标，并拆解产品目标转化为对应的设计方案。五、产品目标和体验的区别用户体验只是产品目标里面其中的一环，如下图所示：当产品目标是盈利收入，则产品目标就是如何提升商业化收益。当产品当目标是提升用户留存，则这时候产品目标就是用户体验当产品目标是协助公司大战略方向时，则产品的整个形态和信息架构可能都需要调整。当产品目标是为了快速拉新用户，则设计可能就需要做用户裂变和各种营销活动。六、产品目标决定用户体验产品拥有什么目标，就决定了用户体验友好程度。如果对于 C 端产品，产品的第一阶段，主要做产品的用户量，在这个过程中，产品目标就是用户的快速增长，为了达到这个目的，用户体验是首先要考虑，其次是产品的裂变拉新，用户活动等等一系列措施。产品到了第二阶段，这一阶段是保持业务的稳定增长，在这个过程中，产品的目标是为业务增长服务的，当用户体验和业务两者出现冲突时，很可能是偏重业务而轻用户体验。产品到了第三阶段，这一阶段，产品到了成熟期，接下来就要考虑变现。产品的最终目标都是为了变现，为了变现，肯定是会伤害产品的用户体验钉钉的用户体验是从领导（管理者）的角度出发，努力抓住领导者的需求，并将管理者的体验做到极致。但是领导者和员工之间天生就存在一定的对立关系，这也导致了为什么钉钉在普通员工中的口碑极差，甚至谩骂。但是钉钉依旧是公司内部协同的首要选择。钉钉牢牢抓住了核心用户群。下图为钉钉的部分截图：总结：产品目标决定了用户体验。体验只是整个产品目标的一环，同时用户体验也是服从于产品目标。以上是我的个人感受和总结，欢迎大家留言评论。欢迎关注作者微信公众号：「ASAK设计」本篇来源：优设网原文地址：https://www.uisdc.com/user-experience-design-direction
用户 品牌 页面 Hey，亲爱的小伙伴，你期待的旅行是什么样的？很高兴在 22 年末，智行 10.0 带着轻快的步伐与大家见面啦！新年新面貌，全新智行希望为小伙伴来年的旅途提供更优质服务，增添一份好心情。下面就来看看，智行 10.0 的构思与成果吧～更多改版案例：如何让图标更吸引人？复盘智行 Tab 图标设计过程OMG！阅读文章 > 智行，作为一站式旅游出行平台，已覆盖火车、机票、汽车票、酒店等业务。近年来，更是以亲民的价格吸引了越来越多的年轻用户，其中 90 后及 00 后占比高达 75.2%。前期调研中我们发现，与核心用户年轻化趋势形成反差的是，智行的界面风格调性更多被评价为“商务”、“严肃”。因此，褪去旧壳，以崭新活力之姿拥抱年轻群体是智行 10.0 需要探索的方向。项目初期，为使改版的感情调性更贴近用户出游场景，我们在团队内部及用户渠道收集了大量关于“旅行”的联想关键词，其中包括：愉悦、轻松、有趣、探索...等等。这些美好的词汇，描绘了大家对未知旅程的期待与憧憬。由此，我们提出「旅行，是对自由与快乐的向往」作为 10.0 升级的主线。我们希望通过 10.0 升级，提升体验及服务品质同时，打破工具类产品较为沉闷的使用感受，挖掘旅行中快乐的情绪内核，以轻盈有趣的设计传递“快乐旅行，自由出发”的生活态度，做有价值有温度的 OTA 产品。以此，我们确立 10.0 的设计目标：轻盈有序 · 打造高效预订体验情感传递 · 旅程的贴心陪伴者品牌外化 · 构建品牌记忆点一、轻盈有序 · 打造高效预订体验1. 全新 10.0 框架 更轻量智行始终致力于让用户订得高效、订得安心。然而扩充的业务场景和功能，使页面结构不堪重负，密集的信息和堆叠的模块影响了用户的预订体验。10.0 全新框架语言，希望通过有效的视重引导及清晰的页面展示，降低操作费力度，打造高效预订流程。“轻”头部色彩 操作更聚焦色彩是影响视重的重要因素。10.0 的升级中，我们将框架语言的背板色由品牌重色调整为明亮通透的浅色，有效将视重由头部转移至高频操作区，为用户营造专注沉浸的下单体验。同时，轻量的头部使页面更具呼吸感，缓解旧版“沉闷”、“商务”的视觉感受。“轻”信息展示 预订更友好清晰的信息展示可有效降低预订流程中的操作难度及决策成本。我们对页面信息进行分类重组，通过字号大小间距等手段扩大信息层级，凸显关键决策信息。并在有限的页面空间内，精简信息，降低信息密度，增加透气感，提升阅读友好度。2. 全新首页 让营销变有趣首页是获悉智行业务种类和流量分发的第一道关卡，业务入口的清晰展示对用户查找和后续转化极为关键。新版首页在使用 10.0 框架的基础上，用重色光感色块衬托智行四大业务入口，增强点击感。同时我们将业务线入口作为营销载体，融入动效，使营销活动的曝光更立体有趣，为各业务线导流及增长起到了正向的作用。二、情感传递 · 旅程的贴心陪伴者我们希望智行 10.0，不仅好用而且好玩，传递正向情绪价值，与用户共情，成为旅途中的贴心伙伴。我们通过 IP 植入、可视化以及创意的视觉唤新等手段一改智行往日“严肃”的形象，为用户提供更温馨友好的服务。1. IP“小智” 陪你环游世界智行 IP“小智”自诞生以来，机智可爱的形象圈粉无数。在 10.0 的升级中，我们将它融入更多页面流程，增加情感触点，提升智行的品牌亲和力。我们结合业务场景的同时，为“小智”量身打造了俏皮活泼的动作，塑造和饱满了它的性格特点，使其焕发生命跃然纸上。下单助手，高效操作有“我”指引下拉刷新，一票在手，极速出行空态场景，有“我”不再无聊2. 全新视觉语言 营造愉悦氛围视觉语言是传递产品调性的关键要素，围绕着“轻松愉悦出行”的基调及年轻的客群特征，我们对 10.0 的整体视觉进行了唤新。明快的色彩天空是纯澈与美好的汇集，正如旅行中探索快乐的本心。我们从中寻找灵感，从智行品牌蓝延伸出“纯净蓝”，并将其作为背景色融入核心流程页面中，营造蓝天白云阳光暖煦的视觉氛围。同时，我们提高了辅助色的明度和饱和度，让页面配色更活泼。圆润的图形我们用简洁流畅的外形结合大圆角，使图形在视觉呈现上更灵动 Q 弹。叠色的表现形式起到 1+1>2 的效果，使图形更丰富多彩～轻盈的插画插画用简约的造型风格，聚焦核心功能点的传达。视觉上以灵动的线条，搭配轻盈的高明度渐变，展现 10.0 年轻活力的品牌调性。3. 3D 现实映射 服务贴心友好调研中我们发现，预订流程中，用户面对复杂功能场景，时常存在这样的烦恼：功能说明长，读得脑壳疼看了半天不理解，迷迷糊糊下了单我是出行新手，那么多专业词看不懂呀...常说“字不如表，表不如图”，图像在传递信息效率和容量上都是文字的数百倍。10.0 的升级中，我们希望通过有效的可视化手段替代单薄苍白的文字表达，将信息化繁为简，提升智行服务的品质感及友好度。我们结合功能为用户搭建 3D 场景，通过营造真实的环境氛围，将现实映射运用到功能表达中，调动用户真实生活中的常规心理认知。同时结合生动的动画，将冗长复杂的功能说明以更直观友好的方式呈现。4. 趣味动效 转角遇到“小惊喜”旅行是快乐地出发，我们在下单流程中埋藏了许多有趣的彩蛋动效，为用户即将到来的旅程增添不期而遇的“小惊喜”。三、品牌外化 · 构建品牌记忆点1. 打造全新 UI 品牌符号品牌符号有利于品牌价值观的外化输出，为产品带来记忆点，同时高辨识度的符号能降低用户对品牌的认知成本，增加信任感和忠诚度。由此，我们结合业务属性及视觉创意打造了智行全新 UI 品牌符号～符号的由来创意上我们选取智行最具代表的火车业务为基点，从产品 logo 出发，衍生出抽象的火车造型。以光感的主题色渐变，增强呼吸感和透亮度。让符号“动”起来为了更生动地展现火车迎面驶来的速度感，我们将符号“动”了起来，穿梭如风的动态不仅象征抢票的高效性，也为原本静态的页面带来一丝小调皮。我们将其应用到了底 bar、一级页面切换等众多核心页面中。写在最后智行 10.0，从探索、落地、验证到上线，历时 10 个月。比心每一位设计师为之付出的努力。同时很开心，我们收获了用户对此次升级的认可和喜爱。随疫情的逐步放开，旅游业也将稳步复苏。正如开篇所说：「旅行，是对自由与快乐的向往」智行期待未来与你相伴，共同探索未知的世界，欣赏旅途的风景。2023 年，和智行一起，向快乐出发～本篇来源：优设网原文地址：https://www.uisdc.com/zhixing-10-0
受访者 产品 用户 前言在上一篇文章中，详细介绍了如何通过调研问卷的方式，整理发现用户的浅层需求。如何设计高质量B端调研问卷？高手总结了8个步骤（附模板下载）编者按：B端设计的调研问卷该如何设计？阅读文章 > 本文将分享另一个更为深层全面的 B 端用户研究方法——用户访谈。通过面对面地沟通，以及观察用户的表情、行为去挖掘更深层的需求。下面是本次分享的文章结构，标⭐️的为重点部分。一、用户访谈的两种路径用户访谈通常可以采用线上会议、电话或者线下面对面交流两种形式。线上会议和电话访谈的优势显而易见，可以不受地域限制展开调研访谈，整体的成本也比较低，设计师可以自己找领导或者协调资源去推动。缺点也是比较明显，沟通起来效率低下，比如我们一定有过“电话里说不清，我们见面详谈”的经历。所以，相较而言线下访谈无疑是最佳的调研形式。首先当面沟通更加高效，其次对于搭载硬件设备的产品来说，让受访者在真实场景里操作演示，可以发现更多隐性问题。二、常见的 3 种受访者类型在访谈过程中通常会接触到以下 3 种类型的受访用户，不同类型的用户我们应该怎么接触交流呢？1. 话痨型话痨型的受访者占大多数，通常就是想法、意见比较多。他们不仅有一大堆不满意的点要诉说，甚至连对应的解决方案都想好了。整体接触下来，我觉得该类型的受访者，可提供的有价值信息会更多一点。只不过我们要学会过滤信息。因为他们的修饰用词通常比较多，例如：“太难用”、“超级麻烦”、“哎 我真的是受不了啊”...访谈话痨型的受访者，我们需要注意无论怎么聊都要紧扣主题，防止变成了吐槽专场。其次也要表达肯定，安抚情绪，并对问题进行进一步提问：“您的这些建议真的很棒，也给我们提供新的思路，我都记下来了，我还想确认下，刚才您说的 3 个关于结算环节的问题，哪一个给您造成的困扰最大？”2. 牙膏型顾名思义，受访者可能是因为性格内向或害怕说错了不好意思等缘故，在受访过程中问一句答一句，比较容易冷场。答案的价值也比较低，例如：“对，是的”、“还行吧”、“没啥感觉啊”、“反正就这样用用吧”、“说不上来”。这种情况下要尝试缓解下氛围压力，换个形式沟通：“就是随便聊聊，公司派我们来呢，就是因为非常关注用户的使用感受，想收集一波用户反馈与建议，您有啥不满意的地方都可以跟我讲讲，越多越好。”其次我们在提问的时候也要带有引导性，例如：“还有呢、然后呢、具体说说呢”，如果对方实在说不出所以然，最有效的办法就是进入上机操作环节，通常操作过程中那些问题也会随之暴露出来。3.专业型专业型的受访者一般是老板或者店长、经理岗位的员工，他们对于产品或整个门店乃至行业都了解的比较透彻。和这样的受访者沟通，不仅是局限于产品的一些问题挖掘，他们会从这个行业的角度阐述一些个人的见解观点，给我们提供一些有价值的优化方案或者改进方向。例如餐饮的老板其实并不是很关心点餐、结算的流程有多么的顺畅高效，毕竟他们不需要亲自去做这些执行，而且坦率的说，对于绝大部分产品而言，好用并不能成为其核心竞争力。他们关心的是如何带来更大的商业价值，类似于如何提升坪效，如何提升门店会员的储值能力等等。而这些老板的关注点，也会给我们未来的产品优化方向打开新的思路，去思考如何给我们的用户创造更高的商业价值。三、采访者需注意的 5 个要点1. 多了解行业&业务背景我们在做访谈之前，首先一定要熟悉产品业务的相关背景、受访商户的基本情况。访谈过程中可能会提及一些专业名词，例如餐前餐后模式、明档、一鱼多吃、坪效、估清等等。我们具备了这些基础相关知识以后，省去了不必要的解释环节，可以使访谈推进地更顺利。其次建议要了解下行业相关的基础知识。尤其是餐饮业态，华南、北方、四川等地都因为饮食习惯的不同，在产品的功能和使用上的需求也是相差很大。具备了这些知识点以后，在提问过程中，也更利于提出一些深刻的问题，而不是浮于表面的提问。行业相关的分析报告，可以去艾瑞、36 氪、发现报告等网站进行查询收集，在此不做赘述。也可以看这篇详细了解：B端设计师如何体系化了解业务？4个步骤快速搞定！前言接触 B 端设计的小伙伴会发现，很多业务具有角色多，业务场景复杂，功能链路长等特点，所以在工作中会经常遇到以下几个问题： 突然被调配到新业务，拿到一个不熟悉的业务或者新产品，不知如何开展工作？阅读文章 > 2. 访谈框架不设限在访谈初期，需要准备一份访谈框架，但并不意味着我们整个过程只能按提纲来提问。尤其是 B 端这种千载难逢的访谈机会，只按规定的框架提问属实是太吃亏了。所以在时间允许的情况下，除了框架以内的问题，尽可能多发散的去提问。例如餐饮业态，会有各种不同载体的终端设备联动使用，一体机 POS、手持的 POS、厨房 KDS、厨显大屏、各类打印机等等都可以顺便了解、调研下，让我们对于全链路的协作流程也会有更深刻的认知。再例如后厨会涉及到 KDS 大屏显示，可以问问目前的大屏显示是否够清晰（字够大），也可以和负责海鲜称重的工作人员聊聊，海鲜的售卖、计价流程，以及菜品双单位（例如：1「条」鱼，重量 1「公斤」）的使用等等。在沟通过程中，一定会有一些触类旁通的收获与问题被发现。这些问题也许来自一个模块、或者某个特定角色，又或者是主产品关联的其他后台产品。3. 讲大白话在提问的时候要考虑到受访者的年纪和理解能力，如果措辞过于专业，可能会导致受访者理解不到位，因此沟通的过程中要尽可能的说大白话。4. 多看多问多感受我们都知道没有经历过的事，很难感同身受。有时候看到客户群里，因为产品的各种原因导致商户情绪激动，我们理智上非常理解，但是情感上很难共鸣。因此每次的门店调研，我都会抓住机会观察整个门店的运营情况，去感受那种忙碌的氛围。有时候开始进入营业高峰期，机器出现卡顿或者外卖不接单等情况时，自己的情绪都会一下子紧张起来，也能够深刻感受到产品给客户带来的困扰。当再次有产品迭代优化时，这些体验总能让自己能更容易代入用户的角度思考问题。除了去体会产品对情绪的直接影响，还可以关注下整个门店的布局、收银产品的数量与摆放位置、不同产品的协同使用等等。这些都会帮助我们发现，到底什么是门店运营环节里最重要的模块。5. 做事有始有终在访谈过程中，不排除受访客户会反馈一些暂时无法解决的问题。这时候一定要告诉受访商户：“您的问题我已经记录下来，回去会针对这个问题反馈上报，最迟 X 天我会让顾问给您回复的”。这么做一方面也是细节处维护公司品牌的整体售后体验，其次也有助于我们再次回访时，受访商户乐意花时间跟我们聊。四、用户访谈的 3 个阶段了解了用户访谈的一些基本信息和注意点以后，到了本文核心部分，关于整个访谈的推进过程，一共分为 3 个阶段。1. 准备阶段① 访谈的3种类型首先明确访谈的类型，用户访谈的类型主要分为以下三种，最常见的就是第三种类产品使用回访。新品场景调研新品调研的访谈，一般是由于业务的发展，可能需要升级或者打磨一款新产品来满足市场的需求。在访谈的过程中，我们需要关注的点就是用户画像、商户诉求、使用场景、终端载体等一系列因素。潜在商户拜访当去往一个城市进行批量客户调研的时候，偶尔会有拜访潜在客户的调研机会。这种类型访问的关注点集中在商户的痛点与需求上。由于是潜在客户，我们势必是要了解他们想要购买或者替换产品的前因后果。也是借此机会了解到竞对的优劣势，他们放弃竞对的原因，以及我们当前产品的功能是否满足客户的需求，还有哪些点不满足，客户重点关注的是什么。产品使用回访使用回访是最常见的访问类型，主要目的是对商户进行售后维护、提升使用体验。且由于 B 端产品的复杂性和远距离特点，以及新功能同步给商户存在的滞后性，公司会安排定期的上门回访。如果有这样的机会，UED 一定要尽量申请跟着去门店调研。② 问题设计3步走到了最关键的一步，就是关于访谈的问题设计。总结一下，问题的设计渠道来源主要有 3 种。主要还是根据调研目标进行问题设计，另外两种方式，作为辅助。那具体问题应该怎么设计，这边我们分为 3 个步骤，从面到点依次拆解进行问题设计。第一步：了解产品全场景能力B 端产品的特点可以借用《U 一点料》的 9 个字概括，“多场景、全链路、多角色”，所以设计问题前，我们可以从场景+链路+角色/节点功能的维度来设计问题。以餐饮行业的产品举例，首先建议了解自家产品的全场景业务能力。即从商家端到消费端会经历的产品模块和具备的现有功能，做到心中有数即可，毕竟不会一下子调研这么多模块和功能。第二步：确定要调研的流程主线其他 ToB 产品同理，可根据某个操作链路为主线，确定主流程后进行问题设计。其实就可以理解为确定调研的目标。例如下图要调研的主流程，就是提取点餐>下单>结算为主线。第三步：关键节点问题展开设计根据刚才确定的主流程，我们找到所有关键节点进行问题框架设计。以上 3 个步骤可以理解为，如何在功能极其复杂的 B 类产品当中，筛选出与访谈目标紧密相连的功能链路。避免我们的访谈提纲做的过于冗余没有核心。③ 2种提前准备工作提前告知这点也非常重要，每一次去门店调研之前，先由当地负责的顾问与受访商户提前沟通。一方面是需要与对方预约时间，另外一方面这种访谈对商户而言就相当于优质的售后服务，会有受访商户提前列框架，准备问题。那么这种情况更有利于调研，因为受访者明确自己的问题点在哪里，就等着调研团队（售后团队）来门店后，好好拉扯一番。准备材料与设备万事具备，只欠东风。我们再盘点确认下本次访谈的各类工具是否备齐，准备进入访谈阶段，大致需要准备的东西是以下 4 种材料工具。2. 访谈阶段在了解了受访者类型、采访者需要注意的点，以及带着我们设计好的问题，下面正式进入访谈阶段。① 开场白到达门店后，我们的顾问会给受访客户做一下来访成员介绍，并讲明此次到店的目的。一般都是产品使用回访，或者新功能推荐培训。通常来说，受访商户对来访团队总是有很多”心里话“想唠一唠，因此暖场氛围比较容易起来，也有助于我们接下来的沟通② 访谈中进入正题以后，我们会先大致了解下受访者最近使用的体验以及遇到的问题，而后会根据问题框架进行提问。在整个过程中也需要注意观察用户在描述问题时候的表情和肢体语言，搜集用户对于产品的真实态度。其实整个访谈流程我们归纳一下，需要关注的就是四个关键点，手+口+心+颜。手-实操演示关于实操演示放在第一个讲，是因为这个环节非常重要。线下访谈时强烈不建议“脱机访问”，这种形式对受访者而言需要花更多的时间去思考问题的答案。会遗忘甚至想不起来当时的具体情况，随便的敷衍回答“嗯，还行”、“挺好的”，或者干脆彼此都不在一个频道上。其次，在操作过程中，建议用手机进行拍摄记录。因为每个人对产品的理解方式与程度不同，在用户操作的过程中，会发现一些有意思的代偿方案。这些也是思考的切入点。代偿方案是否比原先设定的实现方法更便捷。回去通过视频仔细分析受访者的操作路径，以及每个操作之前是否有迟疑等等。并且将问题点一一记录下来。口-问具体操作这个就是根据问题框架进行提问。在这个过程中，通常会穿插着上机操作演示，在现场记录的时候可以先记录个大概，等结束后再仔细整理。心-问心里感受问受访者的心理感受，其实就比较偏主观了，我们可以从“我们家的产品”和“人家的产品”两个维度去对比询问心里感受。值得注意的是，即使是这样开放式的提问，也有提问技巧。比如“你觉得现在还有什么不好用的地方”就比“你感觉现在的产品好用么”这样的提问方式更有效。因为产品一定是有可有优化的空间，“有什么不好用的地方”这样提问的方式就是具体到了某个点上面，具体什么点不好用。而后者的提问方式是基于整个产品，受访者可能会出于不好意思等原因直接说“你们的东西还行吧，还可以”。颜-关注动作表情当我们提问产品优缺点的时候，受访者大部分都会带上表情和肢体语言，并且情绪表现和性格有比较大的关系。性格比较雷厉风行、急躁一点的，通常会像连珠炮一样疯狂输出，并且措辞会比较极端。例如：“真的太难用了”、“太麻烦了”、“严重影响门店营业了啊”。接受到这种信息我们首先要做的就是安抚对方的情绪，其次对于这些信息要学会剔除一些夸张描述。而性格温和一点的受访者，在阐述问题的时候也会比较婉转。“不是太方便”、“这个改动没啥感觉”、“也还行、都可以”，如果某个高频操作真的很影响日常工作效率，往往会表现得很无奈，甚至还有点委屈。那么无论是哪种表现，其实都要考验采访者的经验，结合产品的功能去考虑，找到反馈中真实有效的部分。通过以上 4 个环节，其实就可以收集到很多有用的信息，语言信息、视频信息、动作表情信息等等。接下来的任务就是信息的梳理归纳。③ 结束语访谈结束后，我们需要做个简单的总结回顾。将关键问题再次复述确认，进行查漏补缺并且再次感谢受访者，表达他们今天提的建议价值很大，后续会梳理出可落地的点优化到产品当中。如果说聊得比较开心，大多数的受访商户都会邀请来访团队吃个饭再走，也算是额外的福利。在就餐过程中的非正式场合交流，也可以聊聊门店的一些运营情况等等，帮助我们更深入的了解这个行业。3. 收尾阶段① 资料梳理我们在访谈过程中会有大量未整理的一手记录，结束后需尽快的梳理，尽可能详细的记录下用户描述的细节、肢体动作表情语言等等。建议使用石墨、语雀、腾讯文档等在线编辑工具，方便分享修改。（本文提供模板可下载）如果是连续访谈几位商户，我会在访谈结束以后，迅速地将刚才的访谈内容整理出一份原始资料。并罗列出一些受访者反馈但访谈提纲里没有的问题，去下一家受访商户的时候可以验证下该问题的普遍性。② 整理落地输出后我们需要再次进行提炼，将有价值可落地的问题点提取出来，进行汇报分享，并找到相对应的产品研发进行探讨排期，这样就形成了一个完整的闭环，真正做到了发现问题、解决问题。③ 流程概括前文絮絮叨叨说了很多，其实关于用户访谈这事用 6 个字就可以概括，简单理解：问谁？问啥？答啥？改啥？能够回答清楚这 4 个问题，那么这就是一次有价值的访谈经历。最后ToB 业务的特点就是会有一定的行业壁垒，设计师在刚接触的时候一定会有很多茫然时刻。对于各种专业词汇的一脸懵，对于行业的不了解。或者很多人对于 B 端的认知还停留在，B 端好像没啥好设计的，都是现成的组件库拖一拖，成就感比 C 端差远了。那么做访谈、体验优化的意义是什么呢？在《U 一点料》一书中提到，B 端产品做体验设计创新时，有 2 个要诀要诀 1：更好地帮助用户降低经营成本，增加企业收入要诀 2：更好地在业务链路上促进用户协同，提升工作效率所以，无论我们采取何种方式去研究用户，去挖掘需求，最终的目标与意义都是为了使整个系统，更贴合用户的真实使用场景，让系统可以成为用户在工作过程中一件“称手的工具”。如何真正理解用户需求，给他们最想要的东西，比如高效协同、效率提升，或者创造更多的商业价值。这不仅仅是业务方的事，也值得每一位设计师参与深思。欢迎关注作者微信公众号：「B端设计情报局」 文件名 如何下载使用 文件大小 提取码 下载来源 用户访谈模板6.83MB8866 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/user-interview-2
时间 用户 场景 “时间戳”即时间信息的展示方式，它是一个在 UX 设计中经常出现，又容易被忽视的元素。许多人都以为时间戳仅仅向用户传递时间信息，其实它也会对业务带来重要影响。同时时间戳的设计非常灵活，在不同场景和状态下都有差异化设计。那么这其中有什么规律可循呢？本文将结合 58 相关产品的实践向读者阐述时间戳控件的设计方法。更多时间设计干货：如何设计「时间显示」更专业？来看大厂总结的方法！背景“时间”作为人机交互界面中经常出现的元素，本质上都是为了去传递时间维度的信息。阅读文章 > 一、时间戳类型时间戳的类型分为绝对时间和相对时间两种，二者覆盖了全部的时间戳场景，其中绝对时间强调“准确性”，而相对时间强调“即时性”。绝对时间和相对时间的差异1. 绝对时间绝对时间是指事件发生的确切时间，目标为用户提供精确的日期和时间，强调事件的准确性。它由“日期（年月日）+时间（时分秒）”的格式组成，既包含时间点也包含时间段，如：“下午 2:00 开会”、“2022 年 11 月 1 日～2022 年 12 月 1 日放假”等。优势是时间信息传达精准，给用户以确定性，强化对时间信息的感知；缺点是会导致文本过长浪费空间。绝对时间的常用的展示方式有以下 4 种：“2007 年 2 月 6 日” 和 “2007-02-06” 是公历日期标准格式，用“-”分割时个位数需要加“0”。“2007/02/06” 在不同国家有着不同的展示顺序，在设计时需要谨慎使用。“2007.02.06” 使用英文句号做分割，容易与英文字段混淆造成误解，建议尽量少用。我们建议平台使用统一的展示方式，以保证统一性同时提升用户感知。2. 相对时间相对时间是指事件发生的时间与现在所处时间的差值，目标是提供相对的模糊时间，向用户强调事件发生的即时性。它大多数由“日期（年月日）/时间（时分秒）+定语”的格式组成，如：“帖子发布于 2 天前”、“会员 30 天后到期”等。使用场景多用于：倒计时、即时性资讯、通知推送等。优势是用户的理解成本低，不用通过计算来判断时间过去或还剩下多久；缺点是相较于绝对时间不够精确。设计时首先要注意单位换算。试想一下随着时间的增加，单位前的数字会不断增长导致字段所占空间越来越大，以至于浪费空间并增加阅读成本。因此时间单位需要随着时间推移而变化，尽可能使用简短的字段描述相对时间，如将“48 小时前”简称为“2 天前”，将“712 天前”简称为“2 年前”。其次要关注时间取整。由于相对时间只提供及时性的模糊时间，因此为了降低用户理解成本并节省空间，我们可以将相对时间戳做取整处理，如将“1 小时 15 分钟前”取整为“1 小时前”。相对时间戳的设计注意「单位换算」和「时间取整」二、时间戳颗粒度绝对时间戳是由“日期+时间”组成的，在不同场景中设计师会使用不同的颗粒度来设计时间戳。「日期＋时间」的组合1. 粗颗粒度精确到“日”的时间戳，作为时间维度的 Tips 应用在各种设计组件中，向用户传达最基础的时间信息。2. 中等颗粒度精确到“分”的时间戳，常用于精确事件的时间展示，有 2 种展现形式：动态日期：以“XX 12:00”的格式出现，多用于时效性强的场景，如聊天信息和新闻资讯。根据时间发生的日期和当日距离有差异化：前一天发生，可写作“昨天”；一周内发生可以写周几，如“周二 12:00”；超过一周内发生可以写日月，如“2 月 6 日 12:00”；超过一年内发生可以加上年，如“2022 年 2 月 6 日 12:00”。固定日期：以“2022 年 2 月 6 日 12:00”的格式出现，应用于关键时间节点的展示场景，相比较上一种方式更正式且传达的确定感更强。中等颗粒度的格式差异3. 细颗粒度精确到“秒”的时间戳，应用于金融交易场景，如交易记录、订单记录等。举例：58 到家 App 的订单模块，用户在查看订单记录时，给他们传达强烈的确定感，从而产生安全感并提升对平台信任。58到家APP的订单模块倒计时的设计也会精确到秒，并被广泛应用在各类运营活动上。如下图，58 到家的运营活动，用户看到时间一分一秒地流逝对心理造成压力，从而产生激励作用，增强消费欲望。限时运营活动的倒计时三、时间戳应用场景为了能更好地使用时间戳，我们还需要知道它在不同场景下的作用。1. 重要内容在设计中作为重要的内容要素使用，来强调关键的时间节点。如运营活动，该场景下时间戳对于活动内容的传达有重要影响，甚至关系到用户能否顺利完成活动任务，如用户能否在规定时间内完成抽奖获得礼物，或能否按时观看直播。因此在设计中需要增强这部分的优先级和视觉表现力。运营活动中的时间要素2. 行为标记记录用户的关键行为。在用户进行某个动作后打上时间的标记。很多关键操作都存在可追溯性，包括付款、修改内容、创建产出物等。因此设计时间戳为的是让用户能够在查找相关信息时，实现快速定位。以下图的 B 端产品为例，我们在「智慧营销平台」和「云效 2.0」使用了时间戳引导，方便用户以时间维度查看操作行为。B端场景下标记用户的操作行为3. Tips 信息用户在浏览产品内容时，时间戳作为该条内容的附属信息，起到补充说明的作用。该场景下时间戳的优先级较低，需要弱化处理。根据内容的差异性可以选择不同的类型和颗粒度，如下图中的收到消息时间使用绝对时间展示从而强调准确性，而 Feed 流中帖子的时效性更强，可以不提供精确时间，故使用相对时间展示。时间戳Tips 信息最后不难看出时间戳是一个可灵活运用的设计元素，需要设计师选择合适的类型、格式和颗粒度，并与应用场景紧密贴合，保证用户有良好的体验和感知。它不仅承担着传递时间信息的任务，也可以给业务带来价值，像在 B 端场景下利用时间戳帮助用户追溯操作行为，或在 C 端场景下利用倒计时产生紧迫，感刺激用户消费，从而提升订单转化。时间戳虽然常见，但它的关注度却不高，许多设计师都是凭主观感觉设计，因此我们从一个理性的视角去梳理时间戳的设计方法，希望这篇文章能帮到你。欢迎关注「58UXD」的微信公众号：本篇来源：优设网原文地址：https://www.uisdc.com/time-stamp-design
数据 用户 指标 2009 年 Google 做了这样一个试验：用 41 种蓝色作为链接色，呈现在搜索结果页中，追踪它们带来的点击率，最终色值#2200CC 脱颖而出。据报道，该色值相较于其它蓝色，每年多为 Google 带来 2 亿美元的利润，可谓相当可观。数据结果显示，链接色越偏向绿色效果也就是他们的核心数据越差，越偏向蓝色效果效果越好。这不是个例，全世界许多互联网公司，包括 58，都在做着类似的事情——用数据来做设计决策。线上同时跑着许多版控制变量的测试方案，制定一个核心数据指标，有可能是点击率、停留时长或是日活跃用户数，保留数据效果好的那一版继续设计与试验，无限寻找并趋近商业与设计的平衡点。这便是数据驱动设计的一个缩影，它概括了数据在这类产品中的主宰地位。数据设计干货：如何构建数据体系设计方法论？五大章节帮你掌握！作为一名用户体验设计师，在工作中最常出现的痛点有两个：一个是如何让方案获得各个角色的认可，顺利的将方案推行下去；另一个是项目上线之后，设计产出和设计价值如何体现。阅读文章 > 一、提问与挑战看到 Google 的链接色试验，结合日常工作中数据的地位，难免会提出这样的疑问：为什么不测试第 42 种蓝色？为什么只测蓝色，而不测其它颜色？下图也是一个有关于颜色的案例，绿色与红色两个开始按钮，进行 AB 测。绿色在国际上都与顺畅通过有强烈的隐喻连接，而红色往往代表着错误与禁止。但是最终数据显示，红色按钮版本的转化率要优于绿色 21%。不知道这样的结果，是否能支持了这个产品将红色按钮推全量。为什么公认的更好的设计方案，最终数据不一定好看？数据至上的大环境下，我们是否会逐渐失去对产品的直觉判断能力？用户的每个决策简化为一个简单的逻辑动作，这背后一定是科学正确、无懈可击的么？要解答这些问题与挑战，需要先搞清数据驱动设计的优势所在。二、生存的土壤数据驱动设计之所以能够有生存的土壤且不断发展，总结市面上的沉淀，有以下几点：1. 利于团队理解一般来讲，产品的核心价值导向是抽象的，为产品制定核心指标的过程就是将它具象的过程。具体的核心指标，相比于一个抽象的价值观，更有助于整个团队的理解。2. 拥有可操作性核心指标制定后，能够有相应的公式对指标进行拆分，而拆分后的指标可以指导团队在各个环节去不断优化，具有很强的可操作性。3. 符合产品节奏许多互联网产品，由于市场环境也好、企业基因也好、产品生命周期也好，都希望小步快跑去快速迭代。数据驱动的产品，方便快速试错，不断调整方向。4. 便于向上管理广义的向上管理，包括个人对 leader 的汇报、项目组对高层的总结，甚至创业公司对投资机构的宣讲，这些场景有数据的加持，会使工作进展、项目成果、发展潜力更可被感知，从而争取更多的资源倾斜。三、数据陷阱数据驱动固然有它的优势，但这不意味着它是完美的理论。1. 核心数据难制定产品制定核心数据的过程，必然伴随着近似与误差。因为没有绝妙的数据指标能够完全等同于产品给用户带来的价值。举例来看，一款交友产品中「用户在这儿玩得开心」是核心价值，那么核心数据是用户停留时长、互动信息数量，还是 App 打开次数？如果用户停留时长高，但仅打开过一次手机意味着什么；如果用户频繁打开手机却没来往过几条信息又是什么场景；如果用户信息数量很多，但每天多次只打开不回复社交信息，那 ta 是怎样的用户？可是这些数据乍一看都是「玩得开心」的近似代表，却都有它们自己的局限。这就告诫我们一定要注意数据陷阱。2. 避免虚荣指标设计工作中，会出现数据指标有所提升，但最终产品收益不大的情况。其原因可能在于虚荣指标。虚荣指标 Looker 创始人 Lloyd Tabb 把虚荣指标与明确指标的差异总结如下：举例，对于家服平台来说，58 到家 App 并不是像其它 C 端用户一样只要登录就可以，用户需要在线完成购买服务的流程，才能称之为活跃用户：找服务、选服务、完成购买并完成线下服务。所以通过签到领奖励等运营手段带来的打开、注册/登录行为只是一些数据，除了为当天增加一个日活外，没有更多作用。所以 App 下载量、注册登录用户数便是 58 到家的虚荣指标，下单量才是精准指标。3. 代入到更宽广的层级设计一样东西通常需要把它置于它所属的更大的环境中来衡量，这是我从建筑师 Eliel Saarinen 的设计理念中学到的东西。互联网短短发展数十载，但是人们对于设计的探寻已经绵延千百年。建筑学——更是集概念性、落地性与时间沉淀于一身的学科。非常值得借鉴学习。建筑学如此，互联网产品的设计也如此。部分数据未能真实反应产品使用的情况，可能是因为没有把小的设计环节放置在整个流程中 没有把设计流程放置在整个产品的使用中 甚至，再进一步——没有把产品的使用放置在用户的日常手机使用中。如果我们在更长更广的视角去看待设计环节的数据驱动验证，很可能发现那个关键数据只是整个链条中的小小切片。它只能反应上下游关系，而无法真正地指导整套设计方案的产出。举例，58 到家 App 首页的 feed 模块，上线了双栏内容穿插 sku，与单栏场景化 sku 的灰度测试。预想中，后者能够为目标不明确的用户打造许多场景化的需求温床，促使用户根据场景提示来完成下单。数据情况：之前该该环节的核心数据定为了点击率，这就没有做到把这个小的设计环节放置到整个流程当中，也没有选用最核心的数据——即订单转化率，来衡量这个设计的好坏。如果仅看点击率，后者效果不佳，但如果看订单转化便扳回比分。再结合用户体验的直觉与经验：场景化 sku 的用户心智引领路径过长，不适用于若干行列表的呈现方式，会造成用户的疲劳感。相信后续针对后一版本的优化会取得较好的效果。还有些情况，一个核心指标确实无法反映设计的好坏，可以尝试增加二级指标，这也是代入到更大层级的一个方式。举例，假设 58 到家有 20%的用户是我们判断的高价值用户，他们贡献 80%的收入。那么我们在针对与收入相关的核心指标做版本迭代时，会不断向着 20%的用户倾斜。但是剩下 80%的用户，他们可能对于产品的增量拥有更大的想象空间，在优化核心指标的同时，可能会牺牲掉产品长远发展的可能性。所以增加并观测有关 80%非核心用户的二级指标，争取达到短期效益目标和长期增长目标的双保险。四、其他驱动经过上面的分析，我们发现数据驱动设计这件事本身，有利有弊，如果要做得科学有指导意义，难度并不小。那现行条件下，是否有其它驱动能够将其代替？假说驱动、理论驱动、直觉驱动以及神经营销学等等都是与之并列的驱动方式。其中直觉驱动与数据驱动最为不同。1. 直觉驱动罗翔老师讲刑法，说有些同学学了法之后，就失去了人性，失去了老百姓都懂的朴素价值观。做设计一样，我们判断一个设计好坏的时候，如果代入了太多复杂的设计方法论、数据验证理论、产品营销思维，就容易忘掉最朴素的设计直觉与价值判断。2. 神经营销学有关神经营销学，有一些耳熟能详的典故，如可口可乐与百事可乐的盲测。推荐 TED 演讲《神经营销: 消费者决策的新科学 Neuromarketing: The new science of consumer decisions》，内有详实的案例。3. 最重要的关卡最后回到产出设计方案的人——设计师自己。在发出交付邮件的那一刻，是否感到骄傲；上线后的某一天是否会很开心看到自己的设计；年终总结时是否愿意把它提交到团队的设计年鉴当中。这些问题的回答如果都是肯定的，我想这个设计不会差。最后回到最初的 41 种蓝色，无独有偶，2010 年 Microsoft 的 Bing 也做了类似的试验。最终确定了该搜索引擎的链接色——#0044CC。据报道，如果把额外的广告点击量和用户参与度考虑在内，每年能增加8000万美元的收入（考虑到Bing的市场份额远小于Google，Bing链接蓝的收益增长，从百分比来看要高得多）。看到这里，你是否对这两个互联网巨头的试验结果产生了一丝怀疑，Google 与 Bing 的用户，是否有如此大的差异，以至于这两个冠军蓝色看起来截然不同？有没有一种可能，人类的社会活动、心理状态以及使用产品时辅助做决策的潜意识等等这些，根本无法用数据去概括与总结？那数据驱动设计的根基，是否不复存在？这让我想到老友记中，Phoebe 让 Ross 这个古生物学博士，对进化论产生了动摇。当 Ross 松口后，Phoebe 对他说「How are you going to work tomorrow?」回到设计，这篇文章充满自相矛盾的假说与推演，既没有自圆其说，也没有明确立场。只是希望能够信马由缰地把有关数据的一些思考记录下来。接下来，你将用什么作为你的设计驱动?欢迎关注「58UXD」的微信公众号：本篇来源：优设网原文地址：https://www.uisdc.com/data-analysis-design
用户 视觉 玩法 本次升级主要目标是解决百度 APP-小说频道活动调性同质化，缺少创新性和品牌感的问题。往期改版：千万级产品实战！「百度小说」会员全链路设计复盘本文通过强化会员品牌、全链路精细化运营和提升会员服务的设计手段，阐释如何为用户提供更好的服务。阅读文章 > 一、项目概述运营升级主要针对运营活动，探索全新的设计语言，构建用户对小说产品的记忆点。同时收拢活动玩法，沉淀模型，提升用户产品体验和各角色协同效率。图片数据引用《2021 年度中国数字阅读报告》二、运营现状现在小说频道的现状是: 设计风格缺少文学的调性。业务策略也在慢慢调整。需求结构由多线路变成单线的内容分发。设计周期需要 5 天左右的时间，主要是在建模和渲染上。总结出三个痛点：缺少品牌调性，3d 的设计手法，时下较流行，但是同时同质化严重，缺少小说特有的设计调性；传统的运营手法需要大量的时间打磨视觉，现在大部分小说的活动没有复杂的玩法以及内容，迭代的速度也相对比较快，过于精琢的画面不适合这种实效性的运营活动，性价比低；活动路径过长的玩法体验，不适合目前业务的发展需要。三、设计目标基于痛点，围绕三个设计目标解决目前的问题，并提炼三个设计方法。四、洞察分析1. 前期工作：前期调研了行业 top 的品牌以及运营活动，梳理竞品优势:设计轻量简洁、品牌颜色、符号运用统一、产品体验更沉浸。2. 视觉洞察：从行业分析来看自身业务，打造运营体验闭环。从色彩、插画、字体等视觉元素贯穿整个运营体系。落地到活动、物料等，全链路反复强调产品感受，打造深刻记忆点。五、运营升级1. 唤新视觉印记：如何打造小说频道运营体验？我们对运营风格进行了新的尝试，定义产品核心词「书香气」「沉浸感」，诠释和传递品牌精神和视觉感受。通过色彩定义、统一插画风格的设计手法，打造放松、自然的视觉体验。2. 视觉语言推导：① 拓展运营活动配色以书香气为理念，受到中国纸质文学的启发，探索如何将“书”的质感和“看书”的沉浸用视觉语言表达出来。在定义颜色时，基于产品品牌色，尝试以中国传统颜色进行多种配色尝试，并结合小说分类内容拆解色彩体系。② 色彩拆解③ 探索新视觉风格为更加稳固品牌记忆透传，我们探索全新的插画风格。插画风格的一致性有利于建立产品调性，强化品牌形象。好的插图设计能唤起用户的共情，拉近用户关系。结合小说独特的特性“放松”“自然”的阅读感受，探索出轻量、制作成本相对低的微颗粒质感插画风格。总结出来这类风格的特征：简洁统一、有趣味性、明暗对比强烈、主题明确。再结合沉淀的颜色体系、以及书香气的设计理念，搭建一个放松、快乐、随意、自然的看书状态。有周末在家安静看书的样子、有下班后慵懒的状态，在情感上引起用户共情。风格成型④ 插画风格规则：最后总结插画风格特征，输出插画体系规范。减少协同之间的认知和学习成本，提升易用性。⑤ 运营设计案例：运营设计作为传播品牌的手段之一，一定要以产品气质来设计画面，且色彩、图形等都要精准表达内容。适当使用品牌色以及 IP 作为画面点缀，建立用户对品牌的认知。⑥ 插图案例：视觉的一致性能够帮助用户加深对产品的联想，周期性的运营活动，视觉符号，多角度触达用户，逐步完善用户心智的打造。六、玩法模型1. 需求挖掘：小说频道的用户主要集中在 22～44 岁中青年，使用产品主要用于获取内容，在浏览行为上，除了实用性，更注重内容获取方式的体验。所以在运营活动的核心除了视觉表现外，还有内容呈现的方式以及活动玩法流程的体验。2. 自身业务：频道的活动类型大体分为两类，一种是书单推荐模式，没有过多交互行为，第二种是激励型活动，可以赚书豆、书券等虚拟币为内容付费。3. 步骤方法：① 我们的设计策略是根据活动类型划分设计方法书单推荐型：页面信息轻量化，用简洁的设计语言搭建视觉容器，让用户聚焦信息，提升用户浏览体验。激励型：以减少用户行为路径、更简便获取激励为目标，找到适合小说用户的活动玩法，并沉淀模型，提升各侧协作效能。② 页面轻量化为了保持用户想看书的持续兴趣，把书单推荐类的活动页面划分为模块，视觉区、互动区、内容区。结合新的设计风格落地，背景元素的减少，图形的简化，同时不过多装饰互动区，让用户下意识产生交互行为。给用户完美的浏览体验，提升用户粘性。③ 沉淀玩法模型收拢激励型玩法活动：小说的用户来平台都是为了看书的，玩法复杂的活动，会造成用户反感，能够使用户得到及时反馈的活动是第一选择。我们调研了目前所有端上的运营活动。收拢了大转盘活动和答题活动作为频道内基础的活动模型，他有三个特点：流程少、可复用性高、用户粘性大，比较契合小说频道的用户需求。体验更优：玩法简单、行为路径更短有一些激励型活动，比如邀请好友，需要经历诱导、点击邀请、分享、端外、回流等五步，而转盘活动只需要两步就可以完成整个流程。研发也只需要开发一次基础功能，后期只靠视觉换肤就能完成迭代上线。提升效能：提升各角色协同效能之前一个项目从立项开始，整个活动周期大于 15 天，玩法模型的沉淀，我们只需要产品提需到视觉换肤两个角色的合作，就能完成日常活动的迭代。总结目前小说频道的运营升级已经取得了阶段性的成果，沉淀了运营设计资产，为产品打下了视觉基础，在一定程度上也帮助业务解决了现存的问题。当然我们的设计语言、产品体验还在不断打磨、优化，持续将产品痛点和设计目标紧密结合，助力业务发展。本篇来源：优设网原文地址：https://www.uisdc.com/baidu-novel
评价 用户 商品 大家好，这里是 TCC 翻译情报局，我是李泽慧。评价是电商网站不可或缺的重要组成部分，巧妙合理的评价模块设计可以帮助用户快速决策，有效提升平台下单转化率。作者通过对比多家热门电商平台的评价模块设计，总结出 10 条小技巧，并且附上了优秀和糟糕的设计案例方便理解，文章内容通俗易懂，案例丰富，一起来学习一下吧！线上用户依赖评价进行购买决策。一起来学习10个体验设计小技巧，看看如何活用用户评论来提升下单转化率吧。更多转化小技巧：增长设计实战！如何用一个公式提升5倍转化率？设计师如何提高转化率？阅读文章 > 做购买决策时，用户将在线评论视为有效的产品信息获取来源。在线场景下，用户不能亲临现场触摸或试用产品，浏览评论就成为帮助用户在下单前了解产品真实使用体验的渠道。但是如果评论的呈现不符合人们的使用习惯和预期，用户可能很难找到能解答自身疑惑的评论，因此不能判断产品是否满足自身的需要从而放弃购买。目前，有浏览评论习惯的用户较之以往正在增加，根据 2021 年的研究所示，超过 99.9%的用户表示他们在线购物时会至少偶尔看下评论，2018 年时，这个用户占比为 97%。2020 年另一个研究显示，当用户可以在商品详情页了解商品评分和评论时，购买转化率是没有提供此类功能产品的 120.3%。在浏览过大量电商网站后，我总结了利用用户评论提升下单转化和用户满意度的 10 个体验设计技巧，并附上了 优秀和糟糕的设计案例对比。浏览过的电商网站包括：亚马逊、Anthropologie、Ann Taylor、Asos、阿迪达斯、百思买（Best Buy）、好士多（Costco）、易趣（eBay）、家得宝（Home Depot）、Kohl’s、Karmaloop、H&M、宜家、L.L.Bean、梅西百货、耐克、Overstock、丝芙兰、塔吉特（Target）、Vitacost、沃尔玛一、提升高评分商品的可见性排序是有效且用户友好的工具，可以提升进入商品列表的几率同时反馈搜索数据。排序或筛选评分最高和最热的产品可以帮助用户在具有相似功能的产品之间评估出大多数用户认为最好的一款，从而帮助做出购买决策。我测评的网站中许多都允许用户通过最高评分、平均分或星级筛选商品，然而，几乎所有网站对筛选结果的排序都不太讲究，评价量少但都是五星评价的商品展示优先级高于评价量多但是混合了正负评的商品。比起这样，排序逻辑更应该考虑平均分和总评论数，这样可以避免让许多只有一个五星评价的商品优先于有许多用户评论的产品展示。优秀案例：Kohl’s 可以通过高评论量和星级筛选产品，这些功能让用户在购物时可以优先浏览评分高的商品。优秀案例：Kohl’s 的产品列表可以按评分高低筛选评价。糟糕案例：Target 让用户可以筛选平均分筛选商品，但是首页顶部展示的很多商品只有一个五星评价，同一星级但有更多评价的商品排序随机，这让用户可能错过热度更高更可靠的商品。糟糕案例：Target 通过平均分排序，同一五星等级中，只有一个评价的商品排在有更多评价的商品前面。二、在商品列表页展示评分当用户不能亲自评估产品质量时，他们就得依赖评分来找到高质量商品。评分应直接包含在产品列表中，特别是如果用户不熟悉网站售卖的产品类型时。几乎所有我测评的网站都在产品列表中展示了评分。当一个商品没有任何评价时就不展示评分或者显示评价数为 0。优秀案例：当产品有评分时就会展示在列表页中。未决策的用户或对商品领域不熟悉的用户可以从评分获取帮助。优秀案例：易趣在商品列表页展示用户评分。糟糕案例：H&M 在商品列表页没有展示评分，评论在商品详情的下面，除非用户滚动至详情页底部，否则很难看到它们。糟糕案例：H&M 在商品列表页没有展示评分。三、在星评旁标注评价数量当多个商品评分接近时（比如都是 4.5 星），看评价数量可以帮助用户推测哪个商品甚至是同件商品的不同颜色或口味更受欢迎。将星级与评价量结合，帮助区分评分近似的商品可以提升用户体验，比如 Vitacost 就是这么做的。优秀案例：Vitacost 将评分与评价量结合展示，帮助评估商品的热度。截图展示了两件评分相近的商品，但用户仍可以通过评价量判断哪个更受欢迎。优秀案例：Vitacost 将评分与评价量结合展示在商品列表中。糟糕案例：Ann Taylor 只有星级没有评价量，这就很难区分哪件商品有更多评价更受欢迎。糟糕案例：Ann Taylor 的商品列表中没有在星级旁显示评价量。四、将评分展示在价格附近在商品详情页，产品名称、评分、价格和操作按钮通常放置在页面上部，以确保可见性。在大多数电商网站上，可以在价格信息附近找到评分，通常展示在价格上方和产品名称下方，评价和其他详细信息，如买家秀等在页面更靠下的位置。沃尔玛的商品详情页中就将评分放在价格上方。但是 Costco 则把用户评论放在另一个 tab 下，这可能使用户做决策时无法及时看到评价。优秀案例：沃尔玛将评分直接展示在价格上方。糟糕案例：Costco 把评价放在后面的 tab 中，影响了评价的可见性。糟糕案例：Costco 的商品详情页中，用户评价在后面的 tab 中展示。五、给评价展示区提供快捷跳转方式将星评做成一个快捷入口，引导用户去看完整评价内容。大多数电商网站都用下划线标注评价数量表示可点击态，我见过两种交互形式用以导航至用户评价：跳转至页面下方的模块或打开一个侧边栏。不管是哪一种，在星评增加一个快捷入口，可以提供更简便的操作体验，并提升评价模块的浏览率。优秀案例：Overstock 的星评内容是可点击的，点击跳转至评论区。糟糕案例：Karmaloop 的评价数（查看一条评价）是可点击的，但点击后不是跳转至评论区，而是常见问题，这与入口文案相矛盾。糟糕案例：Karmaloop 商品详情页的星评内容是可点击的，但没有引导至正确的落地页。六、展示评价总览评价总览是对所有评价的总结，汇总了所有优点缺点。它通常位于商品详情页的用户评论的上方。根据我浏览过的网站，这一部分设计形式最多样。一些网站仅展示评分分布，另外一些像沃尔玛这样的店铺，会基于算法显示最有用和最无用的评价。L.L.Bean 则在评论总览下方展示用户尺码准确度反馈。所有成功的评论总览都用清晰的标签简洁地总结了用户评论，并附上链接方便用户了解更多。优秀案例：亚马逊对每件商品展示评价总览。在评分旁边附上了标签方便理解。每个评价标签点选后都可以筛选出相关评价。此外它还拆解出“商品质量”、“易清洁度”等商品特征的评分情况予以展示。优秀案例：亚马逊在商品详情页展示了评价总览。优秀案例：L.L. Bean 在评价总览下方展示用户对商品尺码的反馈。优秀案例：L.L. Bean 在商品详情页的评论总览下方展示了“用户尺码反馈”。糟糕案例：梅西百货对每件商品展示了评分总览并且为方便理解展示了标签，但遗憾的是标签不可点击，阻碍了用户进一步了解评价详情。糟糕案例：梅西百货商品详情页呈现的标签是不可点击的。七、增加针对评价的搜索、筛选、排序功能在商品评价中查找关心的信息可能很困难，特别是当产品的特性和规格很多样时。丝芙兰使用关键词过滤器（如粉底产品的肤质和肤色）轻松查找相关评价。另一方面，阿迪达斯将评价中最常提到的关键词做成筛选器。这样一来用户无需浏览所有评论就可以快速决定产品是否满足他们的需求，从而节约了用户时间提高了决策效率。优秀案例：丝芙兰将关键词（如粉底产品的肤质肤色）做成了评价筛选器。优秀案例：阿迪达斯将评价中最常提到的关键词做成筛选器。糟糕案例：Asos 让用户很难找到自己关注的评价，因为它没有筛选器，而需要通过点击评价总览或自行搜索关键词来查看。糟糕案例：Asos 评论区没有提供便捷的方法找到相关评价。八、展示用户上传的图片和视频专业的产品图片显示了产品在恰当光线下的最佳角度。它们虽然增加了产品的吸引力，但并没有显示产品在真实环境中的尺寸或外观。用户上传的图片和视频则可以呈现商品在真实环境中的样子。比如在美妆和服饰品类上，用户可以看到产品在其他人身上的效果，因为产品模特可能无法代表用户自身的体型、性别或肤色。优秀案例：家得宝的评论区展示了买家秀，以帮助用户更好了解产品在现实中的样子。优秀案例：亚马逊支持用户上传视频评价糟糕案例：宜家不支持用户上传图片和视频，无法展示产品在家中的样子。大部分宜家家具需要一定技巧进行组装，因为不支持图片和视频评价，宜家失去了让其他用户记录组装过程来指导动手能力弱的用户的机会。九、提供评价人相关信息在产品评论中有时很难找到相关信息，特别是当产品的特性和规格非常多的时候。L.L Bean 就展示了评价人相关信息，比如购买商品选项、评价日期、购买地、评价排名和购买认证等信息。优秀案例：L.L.Bean 展示了评价者相关信息，包括他们购买的商品规格、评价日期、购买地点、评价排名和购买认证。优秀案例：L.L.Bean 在用户评价详情中展示评论者相关信息。糟糕案例：耐克既没有展示评价者相关信息，也没有用户名，反而展示的是一串毫无意义的字符串。十、支持针对评价有用度投票和评论支持其他用户或卖家对评价进行投票和评论，可以提升平台评价的可信度。当评价被标记为有用，对于用户来说是来自之前购买者的可信信息输入。优秀案例：Target 支持卖家回复用户评价。卖家可以帮助解释潜在的疑惑，或者跟进问题并提供解决方案。糟糕案例：Anthropologie 不支持标记无用评价，并且也没有回复评价的功能。小结有效地展示用户评论可以帮助用户做出更明智的决策，通过评价获得转化激励，这已被证明会带来正向影响。以上这些建议是基于一些最热门的电商网站和我自身的观察，但需要注意它们不是固定的规则，且只是构建成功电商网站的一小部分。除了这些建议之外，设计优秀的用户评论区还需要基于用户反馈、目标和任务，因为每个网站都有独特的需求和待解决的问题。另外，持续衡量评价功能并不断迭代是很重要的。如果你有其他构建优秀用户评论区的方法，可以评论在下方。更多转化技巧和方法：如何让电商设计转化率更高？5个心理学技巧帮你轻松搞定！编者按：电商设计中如何快速提高转化率？阅读文章 > 转化率翻5倍！资深设计师需要学会的「分层设计」今天为大家带来一个关于到家精选服务下单转化的项目总结。阅读文章 > 欢迎关注作者微信公众号：「TCC翻译情报局」本篇来源：优设网原文地址：https://www.uisdc.com/10-user-evaluation-design
动态 用户 的是 好奇心总在驱使着人类进步，从二维到五维空间，从登陆月球到地球以外 930 亿光年的宇宙空间探索，人类的进步永不止步。如今在互联网技术的高速发展下，用户的审美、诉求都在不断提高，同时反向推动设计的进步。近些年，你会发现，更多的设计“动了起来”。今天就带大家来了解一下「动态平面设计」。关于动态设计趋势：腾讯出品！2021-2022设计趋势报告：动态篇前言动态设计（Motion Design）有助于创建令人愉悦且直观的用户界面。阅读文章 > 一、动态平面设计是什么？「动态设计是基于一定的静态基本视觉元素，通过动画软件将其再设计成一种特定时间内，会发生运动和变化的图形结果。」当然在交互设计中，动态平面设计也与界面设计有所交集，被称之为界面动效，这次我们讨论的范围包含了界面之外的应用场景。对于设计师而言，需要去学习及拥抱这一趋势。二、作用1. 提高连贯性让界面元素在用户流程中顺畅地转变与过渡，将用户操作导向期望的任务结果。连续性的动作有助于引导用户完成任务2. 链接场景在转换场景的过程中扮演润滑剂的角色，阐明场景之间的位置、层级与空间的关系。3. 视觉吸引聚焦用户视线，将其注意力放在重要的事情上，从而起到信息传达、提升识别度的作用。三、优势相较于静态平面，更具有感染力，通过增加「删除线」「眼睛的偏移位置」「伸手动作」来强化海报“不要”的情绪。增加动态区域后：设计创意来自@小红书 HE毛蛋与静态平面不同的是，动态平面可在一定时间内给予用户一定的沉浸体验。静态平面也能给予用户沉浸体验，但多数为多张图去表达含义，大家最熟悉的莫过于漫画，或是一些影视作品的分镜，从而达到用户置身于故事情节内的体验目的。动态平面更多的是让用户参与到一种交流活动中，用户可以以自己的选择去导向一种结果，更趋向于一种简单的 RPG（角色扮演）游戏。动起来后的趣味性，也是吸引用户并且加深记忆点的方式，点击按钮的动作对比与方言的结合，使得海报宣传更加生动且亲切，容易增加用户的代入感。创意来自@小红书 HE毛蛋四、类型1. 混合媒体/动画拼贴动画拼贴总给人一种复古 vibe，如同像素风格，拉回到旧时光。「We the people」是由 Netflix 网飞推出的动画，以定格、拼贴、字体等多种艺术形式，讲述了美国的立法史。@Netflix2. 动态字体动态字体通过变形与音乐相结合，可表达字体的性格，或灵动活泼，或成熟稳重。如果是作为品牌的宣传，也能起到展示品牌调性的意图。喜茶联合方正字体所推出的专属字体，在字体斜笔和勾画的弯曲幅度上进行了微调，曲率更克制平滑，使得字体更简洁、年轻态并多了一份亲和力。超实用！设计师必看的5个可变字体资源网站大家好~ 这里是被大暴雨吵得没睡好的花生，当然这并不耽误我和大家继续聊设计。阅读文章 > @喜茶 x 方正字库3. 故障效果故障错位感给人一种身临全数字化氛围中，特别是赛博朋克的影响，给人一种未来感，在科技进步的同时，又有一定的失序感。4. 复古怀旧复古怀旧把人们拉回到文艺复兴时期，用旧物搭配上现代的梗致敬经典。5. 变形变形使动画的转场更有趣且多层次。6. 液体动态液体在光线折射下能使物体产生形变，这种动态形式运用到动态平面中，产生一种独特风格。五、应用范围1. 海报、自媒体等厦门磐基名品中心 The Little 的开业动态海报，结合了「儿童好物」这一主题，使用的图形均以简单的几何形态勾勒出可爱童趣的一面。通过箱子拟人、几何形状的变形及音乐配合达到多元、有趣的表现形式。@地心引力品牌设计通过对平面的「转场」「叠加」「快速切换」等，让用户大致了解其设计风格，适合运用至品牌宣传、个人风格表现等。@by Design style对于突出个性风格越发显著的自媒体时代，每个公众号都想要阅读量 10w+文章，排版设计风格已成重要的辅助。通过采访者相关元素提取到设计排版中，纸板箱印刷字、夜市塑料凳增添了「街头采访」的意味，产生一种轻松随意的交流氛围。@by「设计便利店」公众号2. 品牌 logo① airbnb「airbnb」由 4 个 icon 结合而成，提取了 4 种含义创造出这个新 logo：以人为本，所有的功能都应基于用户痛点出发，以用户使用的满意度为情绪素材；其次由产品所到目的地的 icon 作为创作元素；整个旅程是愉悦的感受，路途中也充满着惊喜，爱也是人文关怀精神的体现；取自 airbnb 首字母「A」。四种图形的融合，成为 airbnb 的 logo。通过动态形式，描述「我们是干什么的」。动态 logo 由小场景到大场景切换，并最终回归到 logo 本身，表达「我们能够定到任何形式的民宿」。弹性圆润的线条给人一种轻松愉悦感，与度假的心情相得益彰。与此同时，品牌表达出能给予用户多种品类选择的含义。@airbnb② Meta（Facebook）品牌 logo 改版也可以通过动态形式表达。去年 Facebook 改名为 Meta。logo 也随之改版，通过一张动态图能清楚知道，扎克伯格希望 Meta 是多种媒体媒介和技术的集成。他表示 Facebook 名字不能包含集团的一切，「元宇宙」概念是以 VR 和 AR 技术构建的超级虚拟世界，在此空间中人们可以开虚拟会议室进行工作、社交和玩游戏，它打破了物理空间的局限性。有很多人将新 logo 解读为「无限」的符号，象征着「元宇宙」中的无限视野。这说对了一半，这里觉得更多的是借鉴了「莫比乌斯带」的概念。「莫比乌斯带」与普通纸带具有两个面（双侧曲面）不同，它只有一个面（单侧曲面），因此它就有了可「无限」运动的意义。莫比乌斯带Meta 的动态 logo 使我们看到了从 2D 转换为 3D 的视角。起先是平面圆环，后来扭曲 180 度，形成 3D 状态，动态的优势是让视觉看见了空间。3. 网页交互网页也是动态效果最常见的地方，特别是品牌类网站。动态交互首先为了提升品牌影响力与调性，再来网站也是用户体验的最直接接触方式，可能产品实物还未见到，网站即变成了初见面的第一印象。@苹果官网对于工具软件型网站来说，动态平面更便于用户去了解产品功能及用途，并给予网站赋予趣味性。@Figma 官网一些纯视觉的动态交互，适合用在个人主页、展会等宣传。上图为鼠标拖动的交互上图为菜单的交互4. 商业广告动态设计商业广告方面也不容小觑。蕉内以圆形、矩形、多边形及圆角矩形为基本元素，象征产品多样性，通过字符的不断变换及延展，让新用户首先了解到其品牌类别（服饰类），再到之后呈现形象人物，并用品牌色点缀身体部位，表示品牌做的是关于内衣的产品。@蕉内diptyque 新产品北京城市限定 PEKIN 宣传片由 PARALLEL STUDIO 制作，比较特别的是全动画的视觉效果，樱花、宫廷与龙的元素穿插其中，优雅且有历史底蕴，契合北京城市限定主题。@diptyque5. 会展宣传2020 台湾设计展主视觉形象由台湾知名设计工作室卵形设计的负责人叶忠宜操刀，以主题「Check in 新竹--人来风」为核心概念，使用「风」「wifi」「竹」「网络」「方向」等概念，提取几何图形符号来诠释「一位客人到达新竹的旅程」生动的动态感。「风」，边界由圆润到尖锐，并以转动的动态形式幻化成新竹兽，网格的拓展让画面更具有延展性，旋起「人来风」。「wifi」，用信号的图标，体现信息的传递与扩散，也是贯穿这一动态主题的媒介之一。「竹」，字体简化成箭头图形，并作为「去往新竹」的方向指引，存在于画面中并可扩大至各种设施应用的指示图形中。2020 台湾设计展 logo 动态第 59 届 2022 金马奖主视觉设计由刘耕名担任视觉统筹，并携手 Bito 设计团队打造。其动态视觉海报在平面状态时，被分为正视图与侧视图，而在 3D 动效海报中，将「59」字型构成金马图腾，通过 90 度翻转时，则变换形态为「金马」两字。「金马」两字以幕后工作人员避免光线反射的黑色服装为底色，呈现喷漆颜料水渍、定位胶带的标记、剧场器材间的磨损刮痕，各种记号形成交错的痕迹。这也体现了他们在幕后兢兢业业地付出，克服无数困难的勇气。“金马 59” 主视觉横版及竖版6. NFT 相关伴随着数字艺术近年来的兴起，很多平面设计大师也开始驻足于此，对于普通数字爱好者来说，也能将自己的创作品发布于 OpenSea（海外）或是国内部分 NFT 平台（NFT 中国等）进行交易。OpenSea 官网《Vogue Taiwan》以「Formosa Love（福尔摩沙之爱）」和「一座岛屿的可能性」为题，邀请平面设计师聂永真打造 2021 年 7 月号的特别版封面。聂永真这幅封面作品以 30 以太币、92,029.20 美金（约人民币 60 万）成交。后续聂永真受台湾地区微风集团的邀请为他们打造了 502 枚 NFT。本系列 NFT 共推出 502 枚，除了 2 枚为特别版，由微风及设计师聂永真分别拥有外，其余 500 枚又以 75%、20%、5%的比例被分为三个等级。以上设计作品版权归品牌和作者所有，更多内容请移步官网 https://www.breezeverse.io/#mint欢迎关注作者微信公众号：「Gtech UED」本篇来源：优设网原文地址：https://www.uisdc.com/dynamic-graphic-design
按钮 操作 用户 提到按钮，大部分人印象就是文字加个背景框，并没有太多需要设计的空间。但是作为 B 端设计师，相信很多同学在工作过程中都产生过以下问题：按钮作为最基本的交互单位之一，几乎在每个页面中我们都会使用到。由于不同行业下业务场景的复杂性，很多时候很难直接参照其他产品的按钮进行复用，也无法用一套布置方案复用所有场景，所以作为 B 端设计师需要对按钮控件具备足够的认知，理解其背后的使用逻辑和规范，才能满足多层级跨场景的设计需要。本文结合自身的工作经验，对按钮进行了系统性的整理和总结，希望对各位 B 端设计师同学的日常工作和学习有所帮助。更多按钮设计干货：万字干货！3个维度帮你有理有据做好CTA按钮设计任何设计师都曾经与 CTA 按钮打过交道。阅读文章 > 一、按钮的发展历史在详细介绍按钮前，我们先简单了解下按钮的发展历史。按钮的概念起初是源自现实物理世界的实体按钮，在日常生活中如电源开关、计算器、电话等都是通过实体按钮进行控制，由于其简单直观易操作的特性，即使如今各种电子产品都逐渐发展为触控屏操作，实体按钮依旧被保留了下来。当数字屏诞生后，人机交互设计开始走向数字屏幕后，为方便用户理解，在很长一段时间内设计师都是采用拟物风按钮来暗示用户可执行的操作。伴随着客户端设备升级和开发方式的变更，至 2013 年 Apple 在 iOS7 上第一次采用了扁平化设计，至此按钮样式开始往扁平化发展。随后历经了多年发展，按钮的样式开始层出不穷，但是无论样式如何变更，其背后的体验交互逻辑依旧是物理世界按钮的映射。二、什么是 B 端中的按钮1. 按钮的定义在 B 端设计中什么样的组件可以定义为按钮？我们先来看看国内外设计系统中对按钮组件的定义：总结来说，按钮可以理解为用于承载即时操作和命令的组件。由于 B 端产品业务逻辑复杂、页面流程多，相较于传统意义上的按钮，B 端中的按钮被设定为可复用、规范化的组件，通过对组件元素进行拆解、归纳、重组，将其划分为特定类型的组件方便管理和使用。按钮相较于输入框、选择器、单选框等控件无法进行数据输入，相较于标签、文字提示等控件也无法进行信息浏览，其关键在于「即时性」和「承载操作」，既可单独完成操作，也可与其他控件联动，作为触发操作的行动点。2. 容易与按钮混淆的控件① 标签 Tag虽然同样翻译为标签，但是此处指的是 Tag 标签，而非 Tabs 标签页。标签在样式上与按钮几乎相同，且同样可以添加图标标识和触发操作。两者的区别在于，标签侧重于信息的选择、筛选和分类，而按钮则只是单纯用于触发即时操作，因此很多时候标签会设置不同颜色样式以便信息区分。② 开关 Switch和其他录入控件相比，开关 Switch 最显著的特点便是和按钮一样触发后立即生效，因此很多初级设计师很容易将其与按钮归为一类。其区别是，开关承载的是两种互斥状态的切换，如打开/关闭、显示/隐藏、启用/禁用等，此外由于在视觉上符合用户对现实世界中开关的认知，所以可以直接展示当前项的状态。③ 单选/多选框 Radio/Checkbox单选框和多选框一般用于状态标记，但是无法直接触发操作，所以通常会和按钮配合进行使用。最常见的搭配场景便是在登录页，用户勾选「记住密码」或「自动登录」后标记其状态，再点击按钮进行登录。三、按钮的原子拆解相较于其他组件，按钮的元素构成较为简单，分为内容层和容器层，通过将不同元素进行搭配组合，即可设计出不同类型的按钮类型和按钮状态。内容层：图标和文字自由组合。内容层作为操作引导的核心必须存在。容器层：控制颜色、圆角、描边、投影等样式，有些设计系统下还会加上交互动效，提升用户体验感。四、如何区分按钮类型在查阅大厂的设计规范时，相信以下按钮名称大家应该都不陌生：主按钮、悬浮按钮、图标按钮、危险按钮、下拉按钮、文字按钮、CTA 按钮……很多新手设计师会产生疑惑：为什么要划分如此多的按钮类型？这些按钮间的区别是什么？为什么各家设计系统下按钮分类都不相同，我应该选择哪种作为参考？为了区分好按钮类型，关键要先明确类目划分的边界。这里为了方便大家学习，我从按钮的强调程度和使用场景 2 个维度将按钮进行划分，基本涵盖了常见的按钮类型：1. 依据强调程度划分在同一个页面中往往会存在多个行动点，因此需要将按钮依据强调程度进行划分，确保用户可以依据设计的按钮层级快速找到最需要操作的按钮。常见的按钮强调程度可以分为 3 个层级：高度强调：承载页面上最重要和突出的行动点。为了保证视觉层级最高，通常会采用大面积主色填充或投影增加空间层级的方式进行区分，例如主按钮和 FAB 按钮（悬浮按钮）中度强调：承载仅次于最重要行动点的常规操作。为了避免太过吸引用户注意，通常采用中性色进行描边或填充，也被称之为次按钮。轻度强调：对页面中其他操作补充或可选操作。为了确保视觉上不凸显，通常不会填充背景色，常见于文字按钮和图标按钮。在轻度强调中还可以划分为弱强调（内容填充主色）和不强调（内容填充中性色），由于文字按钮填充中性色难以和正常文本进行区分，所以一般内容填充中性色只会用在图标上。由此我们得到了依据强调程度划分的几个常见按钮类型：主按钮 > 次按钮 > 文字按钮 > 图标按钮。接下来针对每种类型我们来展开说明。（FAB 按钮在 B 端页面中属于特定场景下使用的按钮，不具有通用性，故划分到使用场景中进行讨论）① 主按钮 Primary主按钮代表着页面中的核心操作项，是视觉权重最高的按钮，常用于突出提交、完成、确定等操作。为吸引用户注意，常使用品牌色填充背景引导用户视觉焦点。关于主按钮的使用需要遵循以下 2 个原则：在一个焦点任务中最多只使用一个主按钮。同时存在多个主按钮会让用户失去操作焦点，造成信息干扰。主按钮并非必须使用。如果没有必须突出的操作项，强行添加主按钮反而会打破按钮间的层级关系。② 次按钮 Secondary次按钮是使用最频繁的按钮，当在页面中不确定选择哪种按钮时，使用它往往是最安全的。次按钮通常使用中性色，其样式可以分为描边型和填充型：描边型使用最为广泛，是次按钮首选的样式，而填充型相对特殊，在不同设计系体下会根据业务场景选择是否使用。关于填充型次按钮相较于描边型，早年在 B 端产品中很少会见到使用填充型样式作为次按钮使用的，但是可以发现近几年国内外设计系统如 Arco Design、Marterial 等，开始陆续将填充型次按钮纳入到按钮组件库中。填充型次按钮更多的使用场景是在移动端上，其视觉强调程度弱于主按钮但又高于描边型，可以更好的表达组件的整体性和吸引用户注意。伴随着硬件设备的发展，桌面端和移动端的操作边界开始逐渐模糊，各产品开始追求全生态环境下的统一性。为降低用户在设备切换时的体验隔阂，一套设计系统需要能同时满足多端设备的兼容，而填充型样式更符合其场景需求。最典型的便是 iPadOS 连接鼠标操作时，悬停态下填充型按钮明显比描边型更容易被识别。如何选择次按钮的样式基于以上考虑，在工作中选择次按钮样式时可以参考以下建议：如果当前项目上已经有在使用的开源库，尽量以原有组件库为主。除非自身产品有设备互通的场景或需要同一套设计语言兼顾不同端，否则增加多余的次按钮样式只会更加复杂且影响用户的体验一致性。如果是项目是 0～1 搭建组件库，根据自身业务场景选择其中一种样式使用即可。一般桌面端产品使用描边型，如果产品生态中有移动端，为了保持设计语言的统一更建议采用填充型。此外还需考虑前端修改组件库样式时的开发成本。③ 文字按钮 Text文字按钮适合承载如取消、还原等无需特意强调的操作，通常使用在表格操作栏、表单页等场景。为了和普通文本做区分，提示当前内容可交互，需要加上链接色（一般是蓝色）提醒用户。文字按钮和链接的区别文字按钮和链接（Link）的默认样式一致，在搭建组件库时很容易发生混淆。其区别在于按钮用于发起动作，触发相应的业务逻辑，而链接的作用是导航，作为页面跳转或锚点定位的触点。为了更好地区分，可以在交互样式上进行处理：文字按钮：指针悬停时容器添加背景色。链接：指针悬停时文本添加下划线。④ 图标按钮 Icon图标按钮的视觉层级最弱，但是由于占据空间小，常用于同时展示多个操作项时使用。由于缺少文字解释，单纯的图标可能会造成用户的理解偏差，故建议在指针悬停时加上 Tooltip 的文字提示进行辅助说明，对于特定操作还可加上快捷键指引。2. 依据使用场景划分在依据强调程度划分的基础上，还有部分按钮只应用于在特定的业务场景中，所以各设计系统下的按钮分类会有所不同。以下按钮的应用场景较为频繁，故被单独划分为一类方便交流和管理。① 功能按钮 Function功能按钮顺应用户心智，采用绿色、橙黄色、红色代表了成功、警告、危险三种功能按钮，用户无需浏览按钮内容，直接通过色彩即可识别当前操作可能导致的后果。由于功能按钮的视觉权重往往比主按钮还高，在页面中需谨慎使用，避免对其他页面信息造成干扰。② 虚线按钮 Dashed相较于普通的描边型按钮，虚线按钮只承载传输文件或新增配置项等操作，为方便用户感知，将其描边设计为虚线样式。上传 Upload由于虚线按钮只能支持单纯的触发操作，在很多上传情景下不能满足其业务需求，故逐渐衍生出单独的上传组件，相较于虚线按钮：上传组件支持批量上传通常有更大的交互区域且允许支持拖拽上传，以降低用户的操作门槛搭配展示文件列表，用于对已上传文件进行预览、重新上传、删除等操作③ 幽灵按钮 Ghost顾名思义，幽灵按钮不具备实体性，一般底色为透明，其按钮的内容反色，通常使用在复杂或颜色较深的背景中，例如 banner 图、官网首图等，避免按钮突兀地破坏背景的整体性。由于幽灵按钮使用的场景不固定，因此无须严格遵循现有规范，只要满足其特定场景下的业务需求即可。④ 行为召唤按钮 CTACTA，即“Call to Action”的缩写，意思是行为召唤。该词原本是营销领域的术语，后来逐渐引用至互联网领域中，即目的在于给用户一个明确的反馈：当前事件的操作流程已经完成或即将发起一个新的流程。CTA 按钮之所以会被单独归类，因为当按钮作为吸引用户采取点击行为的载体时，时常在事件操作的最后一步出现，作为产品的关键触点之一，可以有效提高页面或屏幕的转化。也因此当页面中存在多个按钮时，CTA 按钮的优先级往往是最高的，可以通过色彩对比、元素点缀等方式引导用户点击。⑤ 悬浮按钮 FAB悬浮按钮 FAB，即 Floating Action Buttons 的缩写，其特点是会始终悬浮在页面的固定位置，不会随着页面滚动而消失。在 B 端产品中，FAB 按钮更多的使用场景是承载全局性的附属功能，常见操作包括咨询、客服、快捷键、点赞、收藏、分享、回到顶部等。在设计 FAB 按钮时需注意以下要点：不能干扰用户在当前页的正常操作和浏览。尽量放置在页面的固定位置，当操作数过多时可将其他操作下钻至更多按钮中。承载操作须是当前页的全局操作，无须与其他页面元素发生联动即可触发。如不能承载保存、删除、清空等操作。⑥ 下拉菜单 Dropdown按钮组不是单独的按钮类目，而是按钮组的集合体，当多个同级操作项同时出现，但不想占有太多页面空间时使用。通常按钮组会将最关键的主操作露出，其他操作收入更多操作项中。严格来说 下拉菜单 Dropdown 并不属于按钮类型，但因为其使用场景较为频繁且时常用来承载多个按钮操作，故在此处作为单独类型进行讲解。下拉菜单作为操作命令集合使用时，可以简单理解成按钮组：将多个操作按钮收纳到同一菜单下。在使用时有两点需要额外注意：和选择器 Select 的区别选择器 Select 属于录入控件，在基本形态上和 下拉菜单 Dropdown 高度相似，都是通过下拉浮层来容纳更多信息，在实际应用时经常容易被混淆。要区分两种组件，最关键是理解其使用场景：下拉菜单：当页面上的操作命令过多时，用此组件可以收纳操作元素。核心是菜单导航和命令集合选择器：用于一组选项中选择一个或多个数值。核心表单填写和数据筛选样式与操作项的关系当下拉菜单用来承载操作项时，各操作项关联性也会引起下拉菜单样式上的区别，这里用实际的案例辅助大家理解：乍一看似乎都是差不多的样式，在工作中很多设计师也是随机选择其中一种进行使用，但是作为设计师，就是应该从细节之处见真章，每一处设计都应有理有据。简单来说，以上三种组合按钮中的操作关联性是逐渐疏远的，这一点从按钮样式上也可以看出。新建一：合并同类项。突出新建操作本身，更多操作项是新增的数据类型进行区分，减少重复文案的出现。新建二：操作延展。强调的是数据导入的形式，提供更多操作渠道供用户选择。新建三：信息收纳。各操作项之间并没有关联性，只是缓解空间压力或突出使用最频繁的操作。五、按钮的交互状态在了解了以上按钮类型，我们来看看按钮的交互状态。不管哪种按钮类型都会存在相应的交互状态，设计师在交付设计稿时需要将不同状态下的按钮样式进行标注，方便前端开发。在刚开始接触按钮时也曾被一堆状态给乱花了眼，光是理解不同状态的区别已经头大。其实回头来看，开始只要记住 4 种最关键的按钮状态便可满足大部分的使用场景，即按钮的正常态、悬停态、点击态和禁用态。在日常工作中，没有设置聚焦态和加载态并不会影响用户的正常使用，但是加上后可提升用户的产品使用体验，大家可以根据开发成本和实际的业务情况考虑是否加上。1. 正常 Normal/Default按钮的初始状态，即默认情况下的基础样式，此处不多做介绍。2. 悬停 Hover当鼠标指针移入按钮时的状态。为了暗示用户鼠标指针已进入按钮的可交互区域，按钮相较于正常状态在背景色彩等样式上会有明显的区别。悬停态通常还会配合鼠标指针变化辅助用户理解，在前端 CSS 样式表中常用 cursor:pointer，指针变化为伸出食指的手。由于悬停态是由鼠标指针移动引起，故只有设计桌面端产品时需要考虑到，而在移动设备上通过手指操作故按钮不存在悬停的状态。（在 iPadOS 更新至 13.4 版本后开始支持连接键鼠操作，但是在日常工作中很少会出现，此处不予以讨论）3. 激活/点击 Active/Press鼠标点击即按下按钮时的状态。激活态是在悬停态基础上发生变化，鼠标指针样式和悬停态保持一致，按钮背景色发生变化，提示用户已触发点击操作。4. 禁用 Disabled按钮无法操作被锁定时的状态。该状态是为避免用户误操作而设立，如在登录页未完成信息填写时将提交按钮禁用，提示用户无法点击，只有填写完必填字段后才可以点击提交。在鼠标悬停时指针变化为禁用状态，在前端 CSS 样式表中常用 cursor: not-allowed，通常会配合 tooltip 文字解释说明行动点不可用的原因，避免用户疑惑。值得一提的是，禁用按钮并非只有置灰一种样式，只降低色彩饱和度和明度也是禁用按钮的表现手法之一，且相较于置灰更方便用户识别主次按钮。以上是针对不同按钮状态的说明，这里并没有针对不同状态的样式进行详细说明，因为不同的设计体系下可能会采用不同状态样式进行展示。为方便对比，这里将常见组件库中的按钮状态进行了整理：可以发现，除了 TDesign 中描边按钮激活态下增加了中性色填充外，基本按钮状态都是保持着一致的梯度变化。这里以正常态的按钮样式为基准，将悬停和激活状态下的色彩变化进行整理：总结来看，在不同色彩的按钮上按钮状态会按照不同梯度分布：主色（品牌色）按钮色彩梯度从浅到深：激活 〉正常 〉悬停中性色按钮色彩梯度从浅到深：激活 〉悬停 〉正常之所以出现这种情况，主要是因为在搭建产品色彩体系时，品牌色一般会采用色板中间色作为主色（通常是第六个颜色），故不管往浅往深都有更多灵活调整的空间。而背景使用的中性色为了避免干扰视觉层级，通常选择色彩较浅的中性色，因此没有再往下延伸色彩梯度的空间。以上介绍的四种状态建议采用色彩组件库中色卡进行配色，上图标注了不同按钮状态的配色选择，下面是 AntD 和 ArcoD 的色板生成工具地址（关于产品取色未来会专门出一期文章进行讲解）。ArcoDesign Palette 色彩工具： https://arco.design/palette/listAnt Design 色板生成工具：https://ant.design/docs/spec/colors-cn#色板生成工具5. 聚焦 Focus该状态用于指示电脑光标的位置。在有些场景下不操控鼠标，只通过键盘方向或 Tab 切换选择页面元素进行操作，反而是更高效的操作方式。常见的聚焦态按钮样式为增加描边，有的设计系统下会采用和悬停态一样的样式。键盘操控快捷键推荐：「Tab」前进「Shift + Tab」后移「Enter」激活6. 加载 Loading表明用户操作后系统正在处理的状态。由于服务器响应或网络延迟等问题，有时候用户操作完需要间隔一段时间才能响应，加载态可缓解用户的焦虑情绪，避免用户由于未收到反馈而反复操作的情况。六、按钮设计需考虑的因素接下来便到了本文的最关键部分，也是按钮设计中出现最频繁和令人头痛的问题：我的按钮究竟应该放在哪里？在此之前先要理解按钮设计的目标是引导用户采取我们希望用户采取的行动。这就需要尽量帮助用户快速找到需要操作的按钮并了解执行该操作的结果，同时尽可能避免误操作。基于以上目标，我们从用户实际操作路径的视角来梳理按钮设计时应考虑的问题：按钮区在页面中的什么位置——空间位置有多个按钮时采用怎样的阅读顺序更合适——排列顺序按钮采用怎样的样式更合适——视觉样式1. 按钮区的空间位置当用户进入页面时，除了浏览当前页的信息内容还需要寻找接下来可执行操作的可交互区域，即按钮区。除了单纯通过视觉差异区分按钮和页面其他元素外，还需考虑到用户在信息浏览过程中的视觉动线。结合古腾堡法则和格式塔原理，给出以下设计建议：① 放置在用户的浏览路径中在没有其他视觉效果引导时，F 型和 Z 型网页浏览模式可以作为用户视觉动线的基础指导，关于以上 2 种浏览模式网上有太多相关介绍，此处就不再赘述。② 尽可能靠近其所控制或联动的对象将关联性强的信息放在一起，可以降低阅读成本，提高用户的感知效率。2. 多按钮的排列顺序① 保持用户的操作惯性这里先讨论一下开头提到的问题：主操作项放在左边合适还是右边合适？我们先来看看一些案例：可以发现，即使是业内顶尖的互联网公司也并没有遵从同一套确定方案。对于新用户而言，确定按钮的位置对操作时间和错误率影响并没有太大差别。并由此得出更关键的结论：不要轻易改变当前产品中用户已经习惯的按钮位置。在此基础上对于操作项不固定的页面，给大家整理了以下建议：② 同类操作项按组分类最典型的案例便是编辑器类产品的操作项，将同类操作区整理分组，方便用户查找。③ 阅读顺序符合操作预期此处的阅读顺序并非特指从左往右、从上往下，而是依据用户当前视觉动线，优先满足用户预期或操作可能性最大的按钮需要最先被用户发现。考虑到人体工程学操作习惯和操作后果的影响，还需注意一些特定的场景：④ 流程操作遵循方向认知习惯流程属性的按钮如上一步、返回、后退等操作用户习惯在左边，而下一步、前进、更多等操作在右边。⑤ 破坏性操作提升操作门槛如删除或清空按钮，尽可能放置在远离主按钮的位置，甚至可以下钻至更多按钮中，避免误触。3. 按钮的视觉样式在文章开始基于强调程度划分按钮类型时，按钮的视觉样式便是基于其强调程度划分的，页面中越是需要强调的按钮其视觉权重越高。前文中只划分了主按钮、次按钮、文字按钮、图标按钮这 4 种基本类型，此外还可以通过文本粗细、内容量等方式进一步细分。七、关于按钮的其他问题1. 按钮的尺寸按钮的尺寸优先体现在其高度上，而宽度一般根据内容区大小自动适配。通常会将按钮分为大、中、小这三种规格，以满足不同场景下的使用需求。高度大尺寸：通常使用在企业官网、账号登录、导航菜单等场景中。一般高度设置为 40～64px。中尺寸：按钮的默认尺寸，适用在 B 端页面的大部分场景。一般高度设置为 28～40px。小尺寸：常用于气泡弹窗等小型控件中。一般高度设置为 12～28px。宽度关于按钮宽度需要注意的是，由于按钮内容的不固定，同规格按钮可能因为内容量差异引起视觉上的层级误判。故为了减少按钮错综不齐的情况，建议设置按钮最小宽度的界限，一般为 4 个文字+左右内边距。2. 按钮的文案相较于其他方面，似乎大家对产品文案总是保持着“点到为止”的态度，但是并不意味着文案不重要，错误的文案会让用户产生疑惑，严重影响用户体验。相反好的按钮文字甚至可以做到即使不去阅读上下文，单凭按钮文案即可做出正确的判断。在一些关键节点的 CTA 按钮，文案的优化可以带来转化率大幅度的提升。因此关注文案细节也是设计师平时需要考虑的问题。优秀的按钮文案包含以下几个要点：① 内容简洁，删除赘词按钮区域寸土寸金，每一个字都要有其存在的意义，如果删除也不影响信息表达即没必要存在。② 表达清晰，避免产生歧义文字表达清晰，避免使用用户难以理解的专业术语。③ 规范用词，不要出现错别字常见的“登陆&登录”、“收获&收货”、“即时和及时”都是容易打错的词。下方给大家整理了 常见易错的按钮文案表，建议保存收藏。④ 一致的语法表达如统一采用动宾结构：修改价格、提交工单、查看更多等。⑤ 适当的情感化表达结合自身品牌特性，在按钮中融入适当的情感化文案，也是塑造品牌心智的触点之一。3. 按钮的圆角当前市面上主流的互联网产品大多都采用了圆角设计，因为圆角矩形相较于直角更具安全感和亲和力、在相似内容中识别度更高，且圆角对信息的聚焦性更强。同样 B 端设计中通常也会在按钮中加入圆角，方便用户更高效的辨别和获取信息，但是需要注意的是圆角并非越大越好，过大的圆角会导致按钮操作热区的缩窄，更不易被点击触发。如在移动端产品上都是采用手指按压，而桌面端采用鼠标指针单击，相较之下后者对点击按钮的触发精度要求更高，也因此全圆角按钮（也被称为胶囊按钮）更适合在移动端产品上使用。此外按钮的圆角设置还需考虑到产品整体的视觉一致性，在不同场景下都要保证统一的感官体验，如在大尺寸的按钮上圆角的曲率也应设置更大。8000字干货！超全面的 Web 端按钮设计指南按钮是设计界面中常用且重要的组件之一，它在页面中占据的位置不大，却承载着重要的交互操作。阅读文章 > 参考链接https://mp.weixin.qq.com/s/81Xbb2zEHqJS2bABY32ztQhttps://www.zcool.com.cn/article/ZMTI3MzkzMg==.htmlhttps://www.uisdc.com/button-applicationhttps://www.zcool.com.cn/article/ZMTI2MzUwMA==.htmlhttps://www.yuque.com/yovar/bq79sy/ufeuexhttps://uxmovement.com/buttons/why-ok-buttons-in-dialog-boxes-work-best-on-the-right/https://www.woshipm.com/pd/3104897.html本篇来源：优设网原文地址：https://www.uisdc.com/button-design-7
世界杯 足球 用户 作为全球最火爆的体育赛事，世界杯由于其独有的稀缺性，被外界誉为四年一次的足球盛宴。根据国际足联主席因凡蒂诺预测，2022 年的卡塔尔世界杯赛事将会吸引到全球超过五十亿人观看，这一人数占全球总人数的比重超过 60%。以往球迷们观看世界杯，更多是通过电视或者央视频、优酷这种传统的互联网视频平台，而在 2022 年这个冬天，抖音花费 10 亿巨资，成为了国内首个获得世界杯直播版权的短视频平台。作为拥有 6 亿日活的抖音，将会如何跨界设计世界杯专题，让亿万球迷能在抖音享受四年一次的足球盛宴，本期设计大侦探，就来全面拆解抖音世界杯专题。往期拆解：世界杯专题！8500字全方位深度拆解懂球帝APP2022 卡塔尔世界杯已经拉开帷幕，相信大家从这周开始，都已经陷入四年一次的狂热的足球氛围中。阅读文章 > 一、栏目入口抖音世界杯的入口在抖音头部一级导航栏最左边，和周边、关注、商城以及推荐并列。世界杯的栏目首页从上至下主要分为 5 个部分，分别是轮播（当日热门赛事以及活动）、金刚区（包含赛程、积分榜、有奖预测和我的主队入口）、比赛直播（当日赛事）、名嘴聊球（签约足球大咖）、赛事热点（热点头条资讯）、热门球星（入驻足球巨星）、世界杯好物（周边商城和抖音生活服务）、重磅热播（抖音自制节目）、大家都在拍（平台用户自创视频）和视频信息流（世界杯专题相关视频）。二、内容策划抖音在内容策划方面，几乎把前央视解说团队都邀请过来了，比如黄健翔、段暄、刘建宏这些家喻户晓的的足球主持人，都在抖音单独负责至少一款足球综艺栏目。除了解说团队，抖音还邀请了众多跨界娱乐综艺大咖，为球迷一口气送上 8 个原创足球综艺节目。从这个版块可以看出，抖音对此次世界杯的重视度之高，就像卡塔尔为了举办世界杯投资 2200 亿美元一样，劣势可以用金钱弥补。1. 内容专题① 观赛指南「观赛指南」是指在一场比赛开打之前，各方媒体对这场比赛进行的赛事分析和预测。足球这项运动，由于充满了竞技性，一场焦点比赛，从赛前到比赛，再到比赛后，都充满了无数话题。而观赛指南，可以为球迷提供完整的比赛情报和指南，为比赛做预热。分组解析「分组解析」是针对世界杯的 8 个小组（世界杯有 32 支参赛球队，分为 8 个小组，每个小组 4 支球队，前两名可以晋级到淘汰赛）进行出线形势分析。作为四年举办一次的比赛，对于每支球队来说，都是非常宝贵的机会，所以关于小组的出线分析也往往是世界杯的热门话题之一。从内容设计看，抖音的分组解析包含了专家预测（名嘴大咖）、小组赛程、历史数据（历史对战记录）、热门球员（小组热门球星）和热门动态（相关的足球资讯）五个内容。赛程解读「赛程解读」就是针对单场比赛进行解读，包含比赛前瞻（专业的足球分析）、专家点评（世界杯专家团，含金量高）、网友热议（精选网友的高质量分析）、近 5 场战绩、球队名单、球员 PK（核心球员）、积分榜以及相关的最新足球资讯。从这个栏目的内容策划看，由于缺少足彩竞彩和有深度的内容，显得中规中矩，稍显严谨，欠缺互动。② 比赛日报「比赛日报」就是根据每天结束的比赛生成当天所有比赛的战报，这个页面包含了直播回放、图文战报、视频集锦、赛况详情、技术统计和积分榜等内容，球迷也可以切换不同的比赛查看当场比赛详细的战报。直播回放「直播回放」对于体育赛事来说非常重要，比如像深夜场的比赛，大部分球迷都很难熬夜观看，这个时候只能通过直播回放来观看比赛。抖音的「直播回放」提供了全场录播回放、全场集锦（分长集锦和短集锦）、球星集锦和精彩时刻集锦，可以满足不同用户的观看需求。③ 热议话题当一场比赛结束以后，话题讨论的热度将会达到最高值，比如阿根廷输给沙特的比赛，全网球迷都在心疼梅西。抖音在「热议话题」的内容设计上，不仅有独立的图文专题页还有白岩松的「白说世界杯」短视频栏目，给球迷带来全方位的内容解读。2. 视频节目① DOU 来世界杯「DOU 来世界杯」是抖音官方自制的视频节目，这个节目合计 29 期，每天更新 1 期，内容非常丰富，包含比赛复盘、每日看点、球星球队故事和赛事预测等。从栏目定位看，这个栏目直接对标曾经央视体育最知名的《天下足球》栏目，更是邀请了主持多年《天下足球》的主持人段暄亲自负责，这不仅可以确保内容质量，还可以帮助抖音赢取众多 80、90 后球迷的好感（国内 80%的 80、90 后球迷都是看着《天下足球》长大的），既卖专业，也卖情怀，一举两得。② 宏哥侃球「宏哥侃球」是资深体育解说员刘建宏独家打造的足球直播综艺，合计 12 期。刘建宏和段暄一样，是央视体育另一个王牌节目《足球之夜》的制片人和主持人，甚至是第一位获得“金话筒奖”的体育节目主持人。从内容定位看，这个栏目主要以刘建宏通过邀约足球名宿和名人明星聊天的形式，为球迷带来不同角度的比赛解读和话题讨论。从嘉宾阵容看，不仅邀请了李明、徐亮、徐云龙这些足球大咖，还邀请了苏醒、姜昆、樊登、大能、隔壁老樊等跨界名人，可谓群星熠熠。③ 黄健翔谈「黄健翔谈」是前央视主持人黄健翔的个人脱口秀节目，合计 24 期。从内容定位看，这个栏目主要是黄健翔针对每日比赛进行看点分析，讲述队伍、球员之间的渊源与故事，专业性较强，差异化低。④ 依然范志毅「依然范志毅」是前国足名宿范志毅打造的直播节目。从内容定位看，这个栏目集合了脱口秀、电竞 PK、国际球星挑战等娱乐内容，其次还会邀请 02 年世界杯国足的众多足球大咖一起聊球。范志毅作为前国足名宿，不仅知名度高，近年来在社交媒体平台也以独特的“范式辣评”成为了众多网友崇拜的偶像，话题热度非常高。⑤ 懂球大会「懂球大会」是以段暄、黄健翔和刘建宏为常驻嘉宾，搭配各路懂球大咖赛前或赛后连线的足球直播节目。从内容定位看，这个节目主打前央视解说铁三角的卖点，再邀请其他足球嘉宾围绕每期的热门话题以直播火热开“吵”的形式为球迷们打造一款直播时代的另类足球节目。⑥ 黄家足球班「黄家足球班」 是黄健翔联手德云社打造的直播节目，合计 12 期。从内容定位看，这个节目把足球的专业性稀释，加入了相声的元素，从而拓宽用户人群，让大众都能看得懂，看得进去，感受到足球的乐趣。⑦ 大咖侃球「大咖侃球」由抖音官方出品。从内容定位看，这个节目主要以邀请体育、文化、财经、商业等领域的名人大咖，围绕世界杯开展泛人文社会热点话题讨的论，旨在打造一个专业又具有趣味性、互动性的世界杯抖音脱口秀。不过这个节目话题宽度太广，目标用户不精准。⑧ Hi！足球少年「Hi！足球少年」是世界杯官方赞助商海信独家打造的一款足球少年选秀节目，通过节目选拔足球热忱最突出的 4 名少年奔赴卡塔尔。这个节目邀请了李明、米卢等国足退役名将，还有柳岩、梁汉文这些娱乐明星，从嘉宾阵容看，这个节目以娱乐选秀为主，目前 8 期节目已全部更新结束。三、比赛数据历时 29 天的世界杯，将会进行 64 场比赛，最终决出冠军、MVP 和金靴奖等。随着互联网泛娱乐的发展，相比过往大家主要通过电视观看比赛这样静态的形式，现在的足球比赛不仅拥有丰富的直播形式，而且每个平台都有自己独特的看球文化。1. 直播间抖音的比赛直播间，功能非常丰富，主要包含六个内容，分别是直播、聊天、阵容、赛况、看点和预测。「直播」就像视频弹幕一样，大家可以畅所欲言的一边看球一边聊天。在底部的聊天窗口，点击「分享」后，不仅可以保存本场比赛即时生成的精彩瞬间，还能邀请好友一起观看比赛直播，互动非常强。「聊天」这个功能，充分利用了抖音的社交属性，通过邀请好有，可以像建立群组一样快速创建一个直播聊天群，非常便捷。这个功能就像一个VIP包厢，为用户提供了一个相对私密的空间，满足不同用户的需求。「阵容」是指当场比赛的出场人员统计，包含首发阵容、球员统计和替补球员等信息，点击球员头像以后，可查看球员当场比赛的数据，包含进球、射门、传球成功率等，非常全面。「赛况」是指当场比赛的详细战况，包含各种技术统计，比如控球率、射门数、传球成功率等。「看点」就是把一场比赛的精彩时刻快速生成GIF，不仅可以作为当场比赛的赛况回放，也降低了用户传播的行动成本，吸引用户分享传播。「预测」就是竞彩，球迷可以通过金币预测当场比赛的胜平负、两队总进球数以及其他话题。① 播放器「播放器」的功能非常丰富，除了弹幕、倍速、视频画质和电视投屏这样的常见功能，抖音还支持多种类型的解说和视角方式。比如同一场比赛可以切换不同的主持人（央视主持人、退役运动员还有粤语主持），还支持球星、无障碍字幕、现场原声、战术机位、场馆全景等四种视角方式，观看体验非常丰富。2. 数据作为一项体育运动，比赛数据的统计分析至关重要。球迷需要查询世界杯的详细赛程、积分榜、射手榜、球队和球员的详细数据。① 赛程「赛程」主要为球迷提供世界杯的详细比赛赛程，用户可以直接预约比赛直播。当球迷预约后，抖音会一键生成比赛海报吸引用户传播，设计得非常巧妙。其次抖音的设计团队非常用心，相比其他产品的「赛程」栏目，他们会用一句简短的话来描述每场比赛的结果或前瞻，让「赛程」这个冰冷的栏目加入了温度。② 积分榜「积分榜」主要为球迷们提供 8 个小组的积分排行详细，包含胜平负场次、进失球数和小组积分。③ 晋级图「晋级图」主要为淘汰赛服务，当小组赛结束以后，每个小组的前两名会进入淘汰赛，球迷可以通过这个图俯瞰世界杯的晋级明细路径。④ 射手榜「射手榜」主要针对球员个人，统计的数据非常全面，包含进球、助攻、射正、关键传球、红牌、黄牌等数据。球员主页「球员主页」就是足球运动员的详情落地页，主要包含六个部分，分别是基础资料（姓名、年龄、身高、体重、位置、身价、效力俱乐部等）、精彩集锦、球员单场表现、球员累计数据、球员赛程和球员百科。⑤ 球队榜「球队榜」和「射手榜」一样，包含进球、助攻、射正、关键传球、红牌、黄牌等数据。球队主页「球队主页」就是参赛球队的详情落地页，主要包含六个部分，分别是基础资料（世界排名、总身价、平均年龄、历届最佳成绩等）、精彩集锦、球队单场表现、球队累计数据、球队赛程、热门球星、球队阵容、历史数据和球队百科。3. 互动从 2014 年开始，世界杯就成了一个全民狂欢的盛宴，可谓全民参与，全民娱乐。由于受政策限制，抖音没有足彩版块，而是通过虚拟金币的形式设计了有奖预测和世界杯乐园、足球答人等游戏。其次为了鼓励用户参与到世界杯的盛宴中，抖音还设计了一套世界杯特效，提升用户的参与度。① 有奖预测「有奖预测」其实就是足球竞彩。足球竞彩作为支撑足球运动发展的重要支柱，也是全民世界杯的主要动力之一。由于国家政策等原因，抖音使用了虚拟的金球币用来作为竞彩的筹码，增加娱乐性。「有奖预测」的页面设计比较简单，头部为用户的钱包（金币和红包数量），主视觉为当前比赛的对阵双方，右上角是活动规则和预测记录，右下角是赚金钱币和预测榜。预测的内容主要是比赛的胜平负、总进球数以及其他根据当前比赛设计的竞彩内容，比如梅西会不会进球，比赛会不会出现头球等。整个预测页面的内容，相对而言比较简单，主要以提升用户参与度和用户拉新为目的。当用户确认预测后，抖音设计了一个用户拉新的功能，只要邀请好友助力就可以获得10万金币，如果是一个新用户，则可以获得3倍奖励。钱包「钱包」的内容主要分为三块，头部是数据板，包含金球币数量、现金金额（金球币可以兑换成现金，提现到自己的银行卡）、奖品数量、优惠券数量和抖音成就（类似勋章）；中间是「金球币抽奖」，用户可以使用金球币进行抽奖，奖品包含足球、优惠券等周边商品；底部是「公益版块」，用户可以使用金球币购买足球等方式助力贫困地区的乡村学校捐建足球场。预测榜抖音统计了全站预测榜的球迷，分为全国榜、本地榜和朋友榜。榜单的设计，能增加球迷的攀比心理，提升用户活跃度。金币游戏世界杯乐园「世界杯乐园」是一款足球游戏，玩法比较简单，用户通过体力可以让角色不断前进获取福利。而用户获取体力的方式需要做任务、看比赛以及邀请好友。足球答人「足球答人」是一款问答竞技类型足球游戏。这款游戏设计得非常有创意，三人随机组队，通过答题的形式模拟足球比赛在线 PK。第一个回答正确的用户会有模拟进球的画面，吸引球迷抢答，其次模拟世界杯的赛制，胜利后可以晋级下一轮，最终决出冠军，非常有趣。② 我的主队每个球迷都有自己喜欢的球队，这支球队就称为「主队」，比如一个喜欢阿根廷的球迷就会把阿根廷看作自己的主队。这种带有鲜明爱恨的元素，也是足球这项运动的魅力之一。用户进入「我的主队」以后，需要设置自己的主队，选定后，将会展示主队的赛况、比赛数据和视频集锦。用户如果更换主队，还需要消耗金币，可见抖音产品团队对球迷的研究足够透彻。通过建立「主队」，不仅可以增加用户的黏度，还能建立关系链接，提升用户的留存率。③ 世界杯好物燃情好物「燃情好物」就是向球迷销售世界杯相关的周边商品，比如世界杯吉祥物、钥匙扣、手办、纪念品等物品。吃喝玩乐世界杯独有的文化就是喝着啤酒看比赛，所以「吃喝玩乐」这个版块接入了抖音的「生活服务」，球迷可以在抖音购买夜宵、小吃、奶茶等，非常方便。④ 大家都在拍为了鼓励用户参与到世界杯的狂欢中，抖音为世界杯专门设计了一套视频特效，用户可以选择喜欢的特效录制，提升用户参与度。四、总结思考1. 商业层作为一个短视频平台，抖音为什么舍得花费巨资打造世界杯栏目，通过此次对抖音世界杯专题的拆解，我认为这是一次对针对 80、90 后群体的二次拉新和激活。从抖音重金邀请前央视主持人阵容看，抖音正在尝试通过世界杯这样能激发球迷情怀的载体把那些边缘用户重新拉回来。「DOU 来世界杯」不仅直接对标央视体育曾经最知名的《天下足球》栏目，甚至连主持人都不变，既卖内容，更卖情怀。像笔者这样以前每周只会打开几次抖音的用户，通过此次世界杯的直播，变成了日均使用超过 6 个小时的重度用户，这在以前简直不敢想象。当然，和四年前的优酷等互联网视频平台面临的情况一样，当世界杯硝烟散完以后，抖音又如何通过高质量的内容留住这部分用户群体，是一个问题。2. 内容层在过去，多数用户对抖音的印象是一个内容质量低劣、靠娱乐搞笑博眼球的短视频平台，但从此次世界杯的内容策划看，抖音不仅诚意十足，一口气推出 8 档原创足球直播节目，更是邀请了众多体育名嘴、知名运动员和跨界嘉宾输出高质量的内容。这对广大球迷来说，实在太过瘾了，已经很久没有这样的足球盛宴。而且相比过去传统的图文时代，加入了短视频传播媒介的世界杯，给了亿万球迷全新的看球体验，切换不同的解说风格、直播视角，在抖音直播间邀上几个好友，就可以一边聊天，一边看球，这样的看球体验，太爽了。3. 体验层抖音产品设计团队对世界杯专题的设计，无论是视觉、交互还是产品体验，都非常用心。比如在「赛程」页面，通过一句简短的赛况描述，不仅丰富了设计形式，还传递了设计的温度（其他的体育产品相比，「赛程」页面更像一个冰冷的机器，除了播报数据，没有任何情感）。还有像「足球答人」这样的游戏，完全以模拟世界杯晋级赛制的形式设计，在我首次试玩的时候，就开始为了“进球”进行“抢答”，最终拿下比赛冠军。这样让用户尖叫的设计，真的让人爱不释手。参考文献：当抖音进军世界杯，TikTok 挖了 NBA 墙角终于，我们都能在抖音看世界杯直播了“抖”来世界杯：流量盛筵，意义几何？欢迎关注作者微信公众号：「设计大侦探」本篇来源：优设网原文地址：https://www.uisdc.com/douyin-world-cup-features
场景 用户 需求 在产品设计中，我们经常会听到这些声音，“这个设计没有考虑用户的使用场景” “用户行为和场景不匹配”…… 每个人都有说到“场景”一词，但好像我们对于“场景”的理解又不太一样，那么场景到底是指什么呢？理解它又能够帮助到我们做什么？基于场景化的设计又当如何做呢？本文通过以下四个范畴，简要阐述一些场景化设计的一些概念，以帮助我们更好去理解它。更深入的场景化设计干货：万字干货！九大章节帮你掌握场景化设计思维编者按：本文从《无界面交互》一书说起，总结了场景化设计思维的知识点，帮读者掌握场景化设计。阅读文章 > 一、什么是场景化设计1. 什么是场景了解场景化设计前，我们先理解什么是场景，在实际生活中以及各类词条中，对于场景的定义会有些区别。百度百科，场景是电影或戏剧等艺术作品的场面，泛指人、空间、时间和事件构成的情境。梁宁《产品思维 30 讲》，将场景分为两个部分，“场”是时间+空间，“景”是情境和互动，当用户停留在空间的时间里，有情景并让用户产生互动，就是场景。书籍《About Face 4 交互设计精髓》场景是利用故事情节或者情境的叙述，通过叙事的手段方法设计用户目标的交互过程。不难发现，这里对于场景的描述都提到了人、空间，时间，以及要做的事情，大家一下就能联想到了 4w1h 分析法，简单描述就是谁（who），在什么时间（when），什么地点（where），通过什么行为（how），要做什么事件（what），这就组成了一个具体情境，也是我们经常讨论的用户场景，我们也可以简单称之为场景五要素。举个例子：小明早上起来后就去洗手台刷牙，人物小明，时间在早上，地点在洗手台，行为是用牙刷刷牙，目的是清洁口腔，这就是一个完整的场景。2. 什么是场景化设计有了对场景的定义，那么就不难理解什么是场景化设计了。场景化设计就是结合我们的产品需求，通过场景化的思考方式，即场景五要素，针对不同的场景结合需求制定不同的设计目标。二、场景五要素设计案例分析场景不是凭空猜测想象的，它需要有上述提到的 5 个要素中至少 2 个以上才能构成一个情境，下面我们分别从人（who）、时间（when）、地点（where）、行为（how）和目的（what）5 个要素在一些设计案例中的运用。1. 人（who）① 千人千面我们经常听到的千人千面，实质就是针对不同的用户画像，提供精准化的内容，比如头条新闻、微博推荐等，都是结合算法针对不同的用户提供个性化的内容。② RFM 模型基于用户分层，就是将人这个群体要素进行拆解分组，针对不同价值的用户，实现精准的营销策略，从而实现最大的 ROI。③ 为中间用户设计也是基于用户分层，通过用户群体对于系统使用的熟悉情况，从而把用户划分为新手、中间用户和专家，这么做的目的便于我们会把注意力集中在中间用户群体上。因为每个人接触产品时都是新手，但他们很快就会进入到中间用户，所以在产品设计中，我们需要做到既不迎合新手，也不迎合专家，而是把大部分工作和精力放在永久的中间用户上。2. 时间（when）时间也会有不同的类别，比如固定的时间点，或者周期性时间段。饿了么会根据不同时间点，推荐符合该时间的食物，比如在上午、下午、傍晚和深夜推荐的食物都会有一些差异。3. 地点（where）《春秋》写到，橘生淮南则为橘，生于淮北则为枳，说的就是地点会影响最终事物的性质和结果。举个例子，美团会根据用户切换不同城市地点，结合当地提供的服务，智能推送用户可能会用到的功能。当你在上海，猜你可能会需要疫情相关的服务；当你在齐齐哈尔、海拉尔区，猜你可能在旅游，需要查路线；当你在西藏日喀则，那就没有服务了。当然上述举例只是一个狭义的地点，在一些软件设计中，“地点”也有可能是不同硬件的区别，比如用户用安卓手机和 pc 电脑之间的区别。4. 行为（how）行为是用户通过一系列手段，能够达到他们目的工具或方法。行为的手段有很多，我们拿界面设计举例，《交互设计精髓》有一个理论，界面的设计呈现，应当是无限接近用户的心理模型，而不能基于实现模型（也就是开发逻辑）。当表现模型与用户心理模型无限接近，用户的行为也就会越顺畅，能够通过已有认知或习惯完成这个目标；反之，用户操作行为可能卡在了某个节点，或者没有完成自己的目的。所以当设计越接近用户的认知和预期，用户则会感觉容易理解，从而用户行为也符合我们的预判。举例说明，假设我们需要用奶油做一个苹果，希望用户愿意拿起它并愿意吃，应当怎么做呢？我们肯定会在形状、颜色以及气味，让它尽可能和真实场景的苹果更无限接近，这才符合用户对它的期待，最后用户才会愿意拿起并送入到自己的口中。5. 目的（what）在产品设计中，我们也称之为痛点或者爽点。它是一种需要，简单说就是要明白用户要什么。举个例子，因为最近疫情封控，我们需要做一款帮助大家做菜的产品，下面拿我和我老板做饭过程举例说明。我老板的做法过程，第一，我要吃什么，甜的辣的；第二，我需要哪些食材；第三，配上精美的盘子，美美地拍上一张照片。我的做饭流程，第一，冰箱里有什么，什么菜快坏了；第二，这些菜大概组合能够烧出一道什么菜；第三，用一个大盘子盛，这样可以少洗一个碗。简单看我们好像都是为做一顿菜，但目的完全是不一样的。我老板除了要吃上自己喜欢的菜，还有一点精社交的需要；而我嫌做菜麻烦，吃饭就是简单对付，填饱肚子就可以了。所以说同样是做一顿饭菜，两个人的目的（痛点）是完全不一样的，而如果到我们设计出来的产品，没有对用户目的做详尽的了解，最后出来的产品和用户的行为之间可能就是南辕北辙。三、场景化在产品设计中的价值有了上述对场景化的设计案例分析，我们发现场景更多思考的是用户需求。但是我们在做产品时，我们也会有产品需求，即我们要什么。通过对需求是否贴合用户场景，不仅可以帮助我们洞察需求，梳理核心价值点；还能帮助我们理解用户，提升产品体验。1. 洞察需求，梳理核心价值点梳理需求：初期的需求往往比较抽象，以功能为导向，这时候我们可以通过场景化的方法，深刻地理解需求，梳理并挖掘产品的新机会和新功能点。辨别真伪：通过场景化的思考，可以帮助我们筛选哪些是真需求，哪些是伪需求。主次矛盾：理清这些需求的强弱和先后，用户痛点的优先级，先解决和后解决哪些问题。2. 理解用户，提升使用体验① 理解需求上述提到，需求和场景紧密结合的，不存在没有场景的需求，所以设计前一定要先分析需求的价值及合理性，同时对场景作进一步细化和拆解，以便能够输出更加合理的设计方案。② 了解用户如果不了解用户的场景，单纯的纠结于界面设计，就像是盲人摸象，很容易陷入自己的胡乱揣测，导致设计出来的方案不一定符合用户的使用场景。③ 与用户共情把自己变成用户，站在用户立场考虑问题的思维方式。特别是 B 端产品，企业采购产品是为了提高组织关系的效率，产品功能往往强大且复杂，设计师在面对众多的业务需求，会很容易陷入到产品的逻辑规则中，而忽略用户使用过程中的感受。四、如何进行场景化设计理解了什么是场景化设计后，以及场景化设计的价值点后，我们再来看看场景化设计我们又当如何做。通过大量的产品设计实践中，我整理了常用的场景化设计设计步骤，如下 ：1. 列举场景场景梳理的过程中，我们抓大放小，找到核心场景，并描述出用户的主行为路径。然后再对其进行分类细化。便于理解，我们拿小明想要通过某电商平台购买一包虾条举例，主要流程：搜索挑选购买配送评价。当然以上只是大场景，拿第一个搜索场景细化举例，小明（who）在下班（when）回地铁的路上（where），拿起手机点开某拼夕夕 app（how），输入虾条关键词搜索（what）。重点是要通过场景化思考，描述出场景各要素之间的关系，是谁（who）、在什么时间（when）、什么地点（where）、通过什么行为（how）、做了哪些事件（what）。通过对用户场景的描述，将停留在我们脑海中抽象的信息提炼并具体化，更加直观的知道用户在各个场景的状态，发现我们在此之前想不到的一些细节，帮助我们真正了解用户痛点。关于真实场景的获得：以上只是一个简单的购物需求，它与我们日常生活息息相关，一般可以通过模拟或者访谈得到。但也有一些场景不是我们坐在办公室就能想象到的，比如拿 WMS 仓储系统来说，不到现场查看，设计师可能就体会不到现场环境的嘈杂和混乱，所以就不能够再用常规意义的办公环境来设计你的系统。有时为获得更真实的用户信息，躬身入局是一种比较好的做法，到真实现场观察和了解用户，也就是我们所说的田野调查。2. 通过场景挖掘机会点有了上面对场景的列举和描述外，这一步骤就是针对这些细化的场景进行分析和预判，并发现其中的机会点。通过场景化去挖掘机会点，一般有两种方法：基于当前场景寻找机会点通过对上一个场景分析，再结合当前场景预判行为，寻找机会点① 基于当前场景寻找机会点我们拿搜索场景举例，所有的电商平台在搜索输入时，都会提供关键词自动搜索内容展示。好处是可以通过输入的关键词，帮助用户进行整个词语的联想，方便用户直接点击，来提升搜索效率；另一方面也能够给用户提供更多的搜索方向。② 通过对上一个场景分析，再结合当前场景预判用户行为，寻找机会点比如拼多多的关键词自动纠错，在输入“下调”或“xiatiao”时，点击搜索后会将关键词已进行中文转译处理，并提示告知用户转译后的搜索结果，这样避免了用户重新输入再搜索，大大提升了搜索效率。再比如如果用户搜索了虾条没有下单，并且关闭了 app。那么等到用户再次打开 app 的时候，搜索输入框默认显示上一次与虾条相关的内容，一方面可以引起用户的注意，另一方面用户如果需要再搜索，可以快速触发，从而降低输入成本。3. 制定设计策略在制定设计策略前，我们需要考虑达成什么设计目标，只有明确了设计目标后，才可以理性分析存在的机会点，思考选择什么策略去解决。举例说明，我们想要提升淘宝搜索输入框的活跃度，通过用户体验地图（设计策略）在用户搜索中，增加热搜榜、XX 促销……再通过上线做 A/Btest （设计策略）看结果数据。最终我们发现，可以通过增加搜索推荐区域，针对那些不知道搜什么的用户、或者想要随大流的用户，通过一些热搜词汇来可以提升输入框的活跃度。常用的设计策略有很多，比如要分析用户场景或目标，就可以选择卡诺模型、用户体验地图、RFM 模型等；要提升用户活跃指标，可以采用福格行为模型、海盗 AARRR 模型，或者广告界常提到的 AIDA 模型等。用一篇文章，让你掌握能让用户快速增长的AARRR 模型AARRR模型因其掠夺式的增长方式也被称为海盗模型，是Dave McClure 2007提出的，核心就是AARRR漏斗模型，对应客户生命周期帮助大家更好地理解获客和维护客户的原理。阅读文章 > 不管我们采用任何一种设计策略作为指导时，都要先评估其是否合理、合适，确保选择的设计策略与设计目标是一致的。当然在使用过程中，我们也仍需对这些通用的设计策略进行适当的修正修改，使其和我们的业务更匹配。4. 效果验证效果验证就是需要通过一些度量指标，验证我们设计的结果如何，比如上述搜索举例，验证的指标就是搜索效率是否得到了提升。效果验证的度量指标需要结合我们的设计目标，上线后的方案这些指标是否提升或者降低了，是否和我们预判的行为一致。指标标的设立也和产品的特性有关，比如 B 端的产品常常关注效率等指标，是否缩短了操作流程，降低了用户认知等；C 端产品更加商业化，通常会用一些市场化指标，比如用户增长、转化率、GMV 等。五、结语回顾本文，不能发现，场景化设计实质是一种思维方式，它需要我们考虑清楚人、时间、地点和外部环境的关系，在这个关系下，用户会怎么想，以及他会做出什么样的行为。孙子兵法里说：水因地而制流，兵因敌而制胜。如果我们在设计时，也能够因地（场景）制宜，再通过制定合理的设计策略来引导用户，那么最终的设计目标也将会事半功倍。参考文献：Alan Cooper《About Face 4：交互设计精髓》梁宁《产品思维 30 讲》阿里巴巴《U 一点·料 2》本篇来源：优设网原文地址：https://www.uisdc.com/scene-based-design
在路上
表哥
飞翔的企鹅
落霞与孤鹜
