编者按：用户故事如何才能真正用到设计中，而不是成为作品集的装饰？本文从拆分场景、延展故事、痛点挖掘3个方面，教你打造实用型的 用户故事 。

拓展阅读：

如何梳理用户需求？试试这个超好用的「用户故事地图」 本文从「用户故事」的概念、准则、创建用户故事地图到建立用户故事卡的方法无一不包，帮你完整掌握「用户故事」这个知识点。

阅读文章 >

相信你没做过没用过也至少应该听过用户故事。

用户故事，设计师作品集里的常客，方法论大军的重要成员。

那么用户故事到底是什么？

如果你去百度的话，会发现用户故事的解释很多，其实我觉得简单来说就是一句话：

记录一类人完成一件事情的过程。

1. 谈“用户故事”色变 设计师很喜欢把用户故事加到自己的作品集中去，这些用户故事可能是真的，但也确实存在很大一部分装饰型用户故事，用结果去倒退用户故事，使得用户故事成为一个不痛不痒的存在。

甚至逐渐形成一种潜规则，默认作品集中的用户故事基本都是无用的包装。导致这样结果的原因主要有两个：

其一，完整的用户故事地图做起来很复杂

在网上搜关键词“用户故事”，你就可以看到一张张很详细的用户故事地图，从问题痛点、一级故事二级故事到想法痛点机会等等，分析起来繁琐且冗长。

不是说这样分析不好，能这样面面俱到彻底分析当然求之不得，但是现实情况是需求多，时间紧，留给我们做这样细致用户故事的时间太少了。等我们把故事完整分析一遍，需求可能早就上线了。

其二，很多人没有养成事前分析的习惯

你应该听过一句话叫做“为什么听了这么多道理还是过不好这一生”。

因为只是听，没有做，知行不合一。

虽然我们在网上也看了学了不少方法论，但是很多时候只是放到收藏夹吃灰，我也总干这事。

我的印象笔记可没少收藏好文章，但是真正用上的却寥寥无几。

大部分设计师做需求的方式都是拿来就开干，做到一半发现有问题了再改，甚至方向错了推倒重来，等到面试做作品集的时候，就用结果来倒推过程，久而久之人们对用户画像的印象就变样了。

难道用户故事在实际工作中就真的派不上用场吗？或者说只有大公司才会有时间和精力去做用户故事？

答案是否定的。

咱们先思考思考为什么要做用户故事这件事儿？

肯定不是为了做而做，也不是为了能够在作品集里炫耀所谓的方法论而做。

我认为用户故事是一个帮我们梳理需求，让我们找到更加精准的设计表达的工具。

关键词是：工具。

称手的工具才是好工具。

何谓称手？就是得适合自己，盲目套模板肯定容易水土不服，也就导致了上面的问题，用户故事逐渐沦为了形式主义。

那么用户故事到底要怎么用，才能真正帮助我们做设计呢？

2. 用户故事 3 步走 工作中面临着时间短任务重的现实问题，很难把用户故事做细，而用户故事用好了又确实能帮助我们做出更好的设计。

下面给你分享一些我做用户故事的经验，如何在不充裕的时间内利用用户故事来辅助设计产出。

我把这样的用户故事表达称为实用型用户故事，用更加接地气的方式来演化方法论。

首先，以文代图

咱朴实一点，直接用文字梳理，别绘图甚至不用 Excel 表格，就用最朴实的文字，甚至不用打开 Word，用一个便签就能写。

当你抛弃一切形式主义的时候，就能更加专注于内容本身。

然后，梳理角色

把需求中涉及到的所有角色都梳理出来，同一个需求不同的角色需要完成的任务不同，就会产生不同的用户故事，需要区分出来。

例如我做的教育直播中，就会有老师、助教等角色，老师和助教的操作流程不一样，用户故事自然也不同。

最后，写故事

准备好上面两步，下面就可以开始写故事了，只需要 3 个步骤，是不是很简单？

先别掉以轻心，咱们重点在写故事这一个环节，写故事也分为 3 步……哈哈，禁止套娃。

我把写故事分为三步：拆——延——痛

简称“拆烟筒”式写故事（谐音梗属实要扣钱了……）

简称“拆烟筒”式写故事

3. “拆烟筒”之拆：拆分场景 把每个角色的主要场景拆解出来，有规律的拆解，可以使用时间维度，例如直播前、直播中、直播后。

举个例子

角色：老师

场景：

直播前：把 PPT 上传到直播平台

直播中：讲课、切换 PPT、回答学员问题

直播后：查看直播数据

角色：助教

场景：

直播前：创建直播间、发送直播链接给老师和学员

直播中：监控直播画面，回复学员问题

直播后：导出直播数据

4. “拆烟筒”之烟：延展故事 把简单的场景描述延展为一个具体的故事，故事需要包含 3 个要素：时间、地点、人物。

拿上面老师回答学员问题这一场景来举例。

晚上 9 点，老师张明明在公司的办公室直播讲课，讲课来到了答疑环节，老师说让大家在聊天室内积极提问，他将抽取大家的问题来进行回答。

老师查看聊天室，聊天室内出现了很多新消息，老师向下滑动聊天室查看历史消息，筛选将要回答的问题。

老师看到问题 A，觉得是个典型问题，于是说就回答问题 A，于是老师针对问题 A 进行了回答，回答后追问说大家是否听懂了，听懂了扣 1，不懂的扣 0，聊天室内出现了很多 1 的消息，接着老师继续翻看聊天室回答下一个问题。

这个场景的故事到这就结束了，需要注意的是，描述上尽量客观，多使用动作例如“滑动页面”“翻看”等词语，动作类词语可以帮助我们更好地将老师的行为和软件界面联系起来，帮助我们更好地找到问题所在，也就是第三步。

5. “拆烟筒”之筒：痛点挖掘 延展出来的故事可以帮助我们更加清楚地看到用户使用过程中的痛点。

你可能会问，我用脑子想象不行吗？非得写下来吗？

我的建议是写下来。

我们的大脑是会骗人的，还记得格式塔原则中的封闭性原理吗？

人们在视觉上会把不完全封闭的物象当成一个统一的整体。

为什么？

因为我们的大脑非常会脑补，帮我们补充剩余的图形，但是实际上想象出来的可能是错误的。

近万字干货！带你全面了解格式塔原则 好的设计师理解心理学在视觉感知中的强大作用。

阅读文章 >

电影《泰坦尼克号》的泪奔情节

所以如果我们仅靠大脑的想象，我们的大脑会在把故事当成点来标记，而导致遗漏了点与点之间的细节，因为在大脑中点与点也能串联为一个故事。

例如老师回答问题这个场景大脑会认为是完整的点， 但是其实其中还包含了老师询问学生、老师用鼠标翻阅聊天室消息、老师回答某一个问题、老师询问大家是都听懂了等等细节，所以仅靠想象就很容易把这些细节遗漏掉。

岔远了，话题拉回来，通过场景细节如何发现痛点？

还拿老师答疑这一场景举例。

老师查看学员的提问，他的动作是使用鼠标滑动消息查看历史记录。

问题来了，如何保证不断有新消息涌入的情况下不影响老师查看消息？老师答疑后如何快速回到最新消息？

这一个动作是不是就发现了使用痛点？

接着分析。

老师答疑的时候，如何让学生把老师的回答和问题对应上？你上学的时候听课应该有经验，当问题比较复杂的时候，不看着问题来对应回答，一走神就容易忘了问题是什么。

看，我们可以根据场景描述细节把痛点梳理出来。

痛点都梳理出来了，解决策略可以有很多，选一个最适合的就可以了。

其实关键不是怎么解决问题，而是找到问题是什么。

最后总结一下

欢迎关注作者的微信公众号：馊面包

编者按： 飞书 文档作为国内首屈一指的文档类产品，有非常多的设计细节值得学习。本文总结了22个优秀的 体验设计 ，非常详细值得收藏。

往期拆解：

万字产品拆解！智联招聘产品设计全方位深度解析 1076 万，如果你对这个数字没有关注过，那么现在我可以告诉你，这是 2022 年全国的应届毕业生数。

阅读文章 >

1. 前言 如何高效地对信息进行整合、梳理， 是设计创作很重要的一环。基于此，这里给大家分享一下飞书文档的产品体验设计拆解。通过对「飞书文档」的体验设计拆解，为你提供一份文档类产品的解题宝典！

Ps：笔者之前写文章主要是使用语雀或 Notion，这次为了拆解「飞书文档」，就专门用飞书文档写文章来拆解飞书文档～（套娃警告）

 ① 事先声明

强烈建议使用电脑查看，用户体验更佳； Gif 体积较大，请耐心查看； 为了让设计细节更容易被看到，用 Gif 来呈展示。 ② 适合人群

第一类，UI/UX 设计师，可以跳出执行层，去思考飞书文档的产品设计策略，提升产品分析能力；

第二类，产品经理/运营，通过全面的产品设计拆解、策略推导，获取产品设计参考；

第三类，文档产品从业者，通过全面的产品设计策略推导、用户需求分析，获取竞品分析参考。

2. 日常使用场景 ① 飞书文档导航栏

进入飞书文档，首先看到的便是这几个一级的导航栏，先来对这几个导航栏做一下梳理

主页：个人的主页，展示快速访问、最近访问的文档； 我的空间：你的个人内容空间，你创建、上传的全部云文档、文件等内容都默认存储在我的空间。你可将我的空间中的内容分享给他人； 共享空间：在共享空间中显示你与他人共享的云文档、文件及文件夹。为个人文件夹添加协作者后，该文件夹将自动从我的空间移至共享空间 ； 知识库：面向组织的知识管理系统 ； 百科：云文档主页导航栏新增企业百科入口，你可以直接在云文档主页查看和搜索百科词条； 收藏：添加到收藏夹的所有文件 ； 回收站：被删除的项目将在回收站储存 30 天，之后自动彻底删除 。 ② 权限概念

飞书文档是一个可多人实时编辑的在线文档，在使用过程中自然需要对团队协作中的所涉及到的相关权限进行了解

③ 新建知识空间

设计思考：

此处「新建」按钮下拉面板的触发方式是鼠标悬停即触发，用户可以减少一次点击次数，提高操作效率； 知识空间模板：点击「新建知识空间」后，会有很多系统内置推荐的空间模板，选中模板后可以直接在右侧对空间模板的目录结构进行预览，让用户在使用空间模板之前能够有一个预期； 点击下一步，是完善知识空间信息，到这一步会默认聚焦到「名称」，通过默认聚焦的处理方式，便于用户直接更改知识空间的名称。在「完善知识空间信息」这一步可以注意到两个必填信息并没有在一起，可以理解为名称和简介的相关性是更大的，同时可见范围用的是 Radio 单选控件，会给一个默认的选项，因此「可见范围」这个必填项在此并不会阻塞用户的操作流程。 ④ 模板联动

设计思考：

新建空白文档后，输入文档标题，会自动在下方将已输入的文档标题关键词带入模板库搜索框进行检索，帮助更加便捷的使用推荐的模板。这个联动第一次用起来的时候感受非常巧妙，由于没有内部数据，不好推断实际的使用频率，不过单从创意上来讲不得不说飞书文档的产品设计还是下了一番功夫的。

⑤ 文档模板

飞书文档提供了非常丰富模板，在点击新建文档后，会直接弹出「模板库」弹窗，飞书文档提供了「实用」「专业」「丰富」的文档模板，非常推荐用户使用系统推荐的模板，进一步加强用户和飞书文档的粘性。

模板很实用。用户画像精准，产品定位清晰：垂直服务互联网人群、高端职场人群、需要方法论模型做写作依据的人群在工作中会用的文档模板。它的主要受众群体是互联网从业者，但很多方法论模型的模板，其实是通用的，比如：工作周报、会议纪要、年度规划等等，适用于各行各业在工作中可以直接套用。

模板很专业。基于精细化有写作需求的场景，都提供了一套总结好的方法论模型，你可以直接用模板，无脑做事。模板开头往往还会配一张脑图，告诉你写作的思路，给工作、开会没有头绪的人很大的帮助，也可以让有准备的人更加全面的思考，提高创作者思考效率和产出质量。

模板很丰富。针对互联网人群不同的工作岗位、工作中的每个环节，全部都遍历到，并提供对应的模板，比如：它的分类方式直接面向岗位：产品、研发、设计、运营、市场、销售、hr 等等； 针对岗位的每个环节全部遍历，单拿产品岗说：BRD、竞品分析/体验报告、各种需求分析方法、各种流程图脑图模板、PRD 或需求评审模板、项目计划里程碑管理、产品功能 Checklist、上线前说明、业务培训等。覆盖工作全流程，灵活遍历可能需要文档编辑的工作场景。

「实用」「专业」「丰富」的模板还都是免费的。飞书毕竟还在起步期，产品应该已经得到市场验证了，但新产品让其他产品的用户主动迁移的成本很大，推广时期还需要获客，所以这些模板就成了飞书获客的手段，全部文档模板免费使用。

⑥ 文档编辑

没有顶部固定工具栏

大部分同学应该习惯了 word 这种工具栏，包括其它很多的在线文档平台，也都保留了这种设计。

而飞书的工具栏默认是隐藏的，在没有开始第一个字输入之前，进入页面就是一片白色，功能区全部隐藏，需要点击或选中一些内容才能出现，看似更麻烦，但实则更高效。 这种工具栏叫做「浮动工具栏」，与传统的工具栏抛给你一堆选择不同，浮动工具栏是围绕内容服务的。你可以先书写内容，再使用浮动工具栏中的菜单设置格式。

让设置就在你的光标旁边，移动距离更短，日积月累能省下不少时间。当然，直接记住 Markdown 快捷键是更好的选择。

浮动工具栏

当鼠标选中文档内的已有内容时，界面会自动弹出浮动工具栏。

你可以针对选中的内容进行常规操作，例如改变字体样式或颜色、加粗或者加删除线、添加有序列表或无序列表、插入网站链接等，也可以针对选中内容进行评论

点击工具栏中的 ∨ 按钮，有更多内容呈现形式的选择，如调整内容布局、插入引用和代码块功能等

区块菜单工具栏（ Block ）

在文档中，我们用块去称呼结构化元素（Notioin 中称之为 Block）。文档里的每一种内容类型都属于块，包括标题、文本段落、列表、表格、图片、多媒体文件、投票、第三方网页等。例如，下图文档中的每一个蓝色区域，都表示一个单独的块。文档支持插入这些块元素，让你通过简单的鼠标点击，便捷完成一篇高信息量的文档。

/ 快速插入

在文档任意空白行输入 / ，或正文任意位置输入空格 / 即可触发 快速插入，可见工具栏菜单。

+ 工具栏

鼠标悬浮在文档任意空白处，即浮现 + 工具栏。将鼠标光标悬浮在 + 工具栏上，可见 + 工具栏菜单。

⋮⋮ 工具栏

将鼠标悬浮至想要编辑的区块，在区块左侧可以看到 ⋮⋮ 工具栏。将鼠标光标悬浮在 ⋮⋮ 工具栏上，可见此工具栏的菜单，你可以进行以下操作：

你可以调整本区块的格式，设置 标题、有序列表、无序列表 等，或是剪切、复制、删除本区块的内容。

你可以在此区块的下一行添加区块。

按住 ⋮⋮ 工具栏，待页面出现蓝色分栏线 | 或 — 后松开鼠标，将当前的区块灵活拖动到文档中任意位置。

⑦ 文档分享

设计思考：

飞书文档支持分享到组织内或互联网，同时支持更高级的权限设置，例如复制文档内容、创建副本、打印、下载、导出等权限。在文档协同便捷性的同时又提升了文档的安全性； 鼠标悬停到「分享」按钮上可以发现一个小细节，会通过 Tooltip 直接提示用户目前的分享类型，帮助用户更高效的获取信息； 不仅文档可以分享，整个知识空间也可以分享到互联网，给知识空间增添了更多的使用场景，例如企业可以直接用飞书知识空间来做产品的帮助手册。 ⑧ 多人协同编辑

设计思考：

飞书知识库的文档没有区分查看态和编辑态，所有的修改会实时同步给正在预览文档的用户；在多人协作的场景中，会把编辑者的光标实时显示出来，把线上协作的氛围感演绎得淋漓尽致。

3. 体验亮点 今年飞书悄悄上线了「新文档」，以下内容拆解均基于「新文档」拆解

Markdown

谈到飞书文档与传统文档最大的不同，我认为是飞书文档编辑器支持 Markdown 语言，并按 Markdown 的理念打造。Markdown 可以让你在编写文档时一气呵成，省去通过菜单栏手动调整文本结构的繁琐。

飞书文档继承了 Markdown 不允许改字号的理念。在这里，只有「一级标题」「二级标题」「三级标题」这些格式，没有「20 号」「15 号」这些字号的设置。Markdown 的本质是让我们回归到内容本身，而不是文档的样式。

此外，对于组织来说，让所有文档整齐划一，一级标题都是一样字号的一级标题、二级标题都是一样的二级标题，一定程度上对降低阅读难度有帮助。

这里分享一下 Markdown 的快捷键

N 级标题

在飞书的工具栏中，默认只会显示 H1、H2、H3 这三级标题，乍一看好像不太够。然后当文档里如果有使用到 H3 标题，那么 H4 就会自动出现在工具栏中，以此类推，最多可以有 H9。这种设计的处理方式非常人性化，既避免了一开始就出现到 H9 带来的复杂，毕竟很少有人会用到 H9，但是如果你真的用到了很多级别的标题的时候，又回自动出现下一集标题，非常巧妙。

列表首字母自动大写

国内很多在线文档，都不会注意到首字母自动大写，而飞书文档没有遗漏。 飞书文档不但没有遗漏上述细节功能，而且使用蓝色的编号，让列表的存在感更强了， 让用户在写文档时能够更加清晰。

错别字修正

在撰写文档的时候，难免会有一些错别字，飞书文档会自动识别可能是错别字的地方进行高亮，微信公众号也有类似的功能，但是公众号只会告诉你哪里错了，不会给出解决方案。但飞书文档更加人性化的是方式是直接给出了系统认为修正后的结果，而且大部分情况都是和编辑者预期的结果匹配的，用的过程中非常令人惊喜。

百科词条与文档打通

飞书百科是最近新上的功能，不仅仅是做成了企业的「百科全书」，而且能够和文档内部打通。当文档中有百科中的词汇时，关键词会自动高亮，鼠标悬停会展示这个百科词条的相关解释。对于一些大公司内部的黑话大全特别管用，当新人入职新公司的时候，对于一些企业内特有的名词就能够通过百科词条轻松 Get 到意思。

飞书剪存

飞书剪存是一个兼容于各大浏览器的扩展程序。它可以将自动剥离广告后的网页正文一键保存至飞书云文档。一键保存网页正文，告别手动复制粘贴：浏览到喜欢的网页，点击飞书剪存，即可将网页内容保存至你的飞书云文档中，而且标题格式还能完美保留。对于用飞书来搭建个人知识库的场景非常方便，再也不需要手动复制然后一个一个调整标题格式了，效率大大提升。

文档点赞

当看完一整片文档，在下方会出现点赞的按钮，这时候会习惯性的把鼠标放到按钮上，然后考虑要不要点赞，当我们鼠标悬停的时候，会触发点赞按钮蓄力的动态效果，而且点赞完成之后还会有撒花的动态效果，用情感化设计的方式引导用户给文档点赞。一定程度上提高了文档的活跃度，让文档的编辑者也能够有更好的正向反馈，进而激励文档的创作。

支持个性化封面

在文档标题上方可以 添加封面，从官方图库选择封面图或从本地上传，让文档看起来更有生气，呈现个性。官方图库中提供了很多高质量的配图，尤其是前面 3 排的配图还融入了飞书的品牌宣传元素。

横向图文分栏

在文档中使用分栏功能，让你的文档版面更加紧凑，实现图文、图表等各种功能的混排；还可以通过调整分栏的大小，调整高亮块、流程图等区块大小。有了分栏功能，可以将飞书文档打造成一个非常简单的个人网页的形式，通过简单的拖拉拽就能形成一篇精美排版的网页。

4. 体验槽点 图片默认对齐方式

插入图片后，调整图片大小时会发现图片默认是居中对齐的，但是就个人而言，大部分时候多使用习惯都会手动再去调整回左对齐，每次都得手动调一边，显得很繁琐。

图片区块手势不符合预期

新文档下，选中图片后鼠标悬停的手势会变成放大镜手势；旧文档下，选中图片后鼠标悬停的手势会变成抓手手势；这两种手势与本身图片支持的两种拖拽和放大的交互行为不太符合预期。有时候会误认为只能进行鼠标手势对应的操作。

工具栏不一致

点击「+」和「/」呼出的工具栏的样式不一致，其实仔细瞧会发现里面内功能内容其实是一致的，看了下 Notion 是一致的，不知道飞书文档是出于什么考虑这里处理成了两种工具栏的样式。

6. 总结 在设计方法论中有一个概念叫「希克定律」，即可供选择的刺激越多，用户决定与哪一个进行交互的时间就越长，受到选择轰炸的用户必须花时间来理解和决定，这相当于加重了他们不想要的工作。相比于竞品「腾讯文档」、「石墨文档」、「有道云笔记」等，进入文档边界会提供你丰富的文档编辑工具而言，「飞书文档」整个使用上的交互体验就是极简。

让设计更有说服力的20条经典原则：希克定律 编者按：作者整理了 20 条经典原则，并通过正反例子说明这些原则在设计中是如何运用的。

阅读文章 >

在《简约至上: 交互设计 四策略》一书中提到的四大策略：合理删除、分层组织、适时隐藏和巧妙转移。飞书文档可以说是将这四大策略用到了极致.

合理删除：去掉所有不必要的按钮，直至减到不能再减。在没有开始第一个字输入之前，进入页面就是一片白色，功能区全部隐藏。需要工具栏的时候，导航栏、编辑区通过间距做分割，没有复杂的色彩、边框、边界，非常极简。

分层组织：在删除了那些不必要的、无法实现的的功能之后，需要对保留下来的核心功能和辅助功能进行组织。进入写作时，因为你在不同位置需要的功能不同，飞书已经提前分类整体好，在你需要用的时候恰到好处的提供给你。例如各种「/」「+」「⋮⋮ 」召唤出来的工具栏。

适时隐藏：将不常用的功能隐藏在常用功能背后。写作过程中，页面也绝对不会出现你不需要的功能，但当你一旦需要某项功能时，它会立刻出现在你鼠标输入位置交互最方便的地方。例如框选文字后，便会立马在上方出现浮动工具栏，可以对文字的样式进行设置。

巧妙转移：把合适的功能转移到合适的组件或平台中去。编辑区、编辑工具没有固定的位置，而是根据人机交互规则，需要的时候的时候适时巧妙显示。

豆瓣评分9.1，经典设计书《简约至上》的精华版读书笔记来了！ 作为交互设计师，你一定经常苦恼你的界面该怎么达到「简约而不简单」，该通过什么样的形式、功能、才能让用户获取「更好的体验」。

阅读文章 >

整个编辑器中的交互设计，相比于传统 Word 类型的工具栏，不需要满屏找想要的功能在哪里。当用户需要的时候，会立刻出现在距离鼠标最近的地方，提高文档编辑的效率。整体使用飞书文档的感受会发现很多除了期望型需求外，还满足了用户很多的兴奋型需求。

由于时间和篇幅有限，关于飞书文档的体验设计拆解中存在的疏误之处还望大家给与指正，欢迎大家一起学习和讨论。

参考链接

https://zhuanlan.zhihu.com/p/532734411 https://www.feishu.cn/hc/zh-CN/categories-detail

编者按：本文从用户流程设计的定义、为什么要做用户流程设计以及如何做用户流程设计3个方面，帮你掌握用户流程设计。

设计师如何处理任务及优化流程？用实战案例帮你掌握！ 任务处理是体验设计师的一项基本功，任务处理的原则是提高任务完成的效率，同时满足用户体验的要求。

阅读文章 >

用户 流程设计 ，是用户与产品互动的内在交互逻辑，用户能感受到，但却不能直观地看见，它通常是以用户流程图的形式进行输出和呈现，多用于项目团队内部进行沟通。

好的 用户流程设计 不仅能够帮助用户完成目标，而且还能给用户带来愉悦甚至惊喜。交互设计是对用户行为的设计，而流程设计，核心就是用户与产品互动的行为步骤和顺序，所以想要做好 交互设计 ，必须要打好流程设计的基本功。

因为流程设计的表现载体是流程图，所以我们就从流程图开始入手学习，把看不见的流程可视化，方便我们学习和交流：

图 1 流程图的定义

流程图，是以特定的图形符号+辅助说明，表示某一任务过程的具体步骤和方向的图。一般包括起始、输入、判断、处理、输出与终结等基本节点及执行逻辑。

比如把大象放入冰箱的 3 步流程，我们就可以用上图所示的符号、文字和箭头来表达。

为了便于识别，绘制流程图有约定俗成的图形符号：以圆角矩形表示“开始”与“结束”，矩形表示行动方案、普通工作环节，菱形表示问题判断或判定环节，用平行四边形表示输入输出，箭头代表工作流方向等。

图 2 流程图的绘制规则

还是以把大象放进冰箱的流程为例，在把大象放进冰箱前，我们需要先判断一下冰箱是否能装下大象，能则开始装，不能则找一个更大的冰箱或者寻求其他解决方法。

下面我们就切入正题，讲讲跟用户行为密切相关的用户流程图。

1. What | 什么是用户流程图？ 用户流程图是指用户为了达成某个目标，而与产品交互的步骤及顺序的图。

图 3 用户流程图的定义和示意

在交互工作中，设计师通常会绘制 2 种用户流程图：

抽象的符号流程图：采用约定俗成的流程图符号，表示用户与产品互动的流程。 具象的页面流程图：采用用户真实可见的界面，表示用户与产品互动的流程。 后者更直观好理解，比较适合流程少且步骤相对短的流程；前者更抽象概括，在表现复杂的多步骤多分支的流程更有优势。

当我们进行用户流程的全局梳理及思考迭代时，我更建议用抽象的符号流程图，这样会减少页面细节的干扰，让我们聚焦到更本质的流程思考中，所以本文用户流程设计，也是以符号流程图为载体向大家进行介绍。

2. Why | 为什么要绘制用户流程图？ 用户流程图属于交互文档的一部分，当我们从 0 到 1 构建某个任务流程，或者对某个流程进行整体优化时，一般建议绘制用户流程图，以便更直观的展现用户与产品互动的具体步骤和顺序。

绘制流程图对设计师来讲有 4 大价值：

图 4 用户流程图的价值

① 认清现况。

当我们接触新项目或新功能时，将现有用户流程绘制出来，可以让我们对全局流程有更清楚的认识，否则随着步骤的增加，大脑的工作记忆会不足以支撑我们认知、记忆和理解。

② 流程优化。

通过对流程图的全局审视和竞品对比，可以帮助我们快速发现现有流程中存在的问题，同时可视化的呈现方式也更有利于激发我们创新流程设计的想法。

③ 避免遗漏。

有完整的用户流程图打底，可以保证我们后续在设计具体界面和细节时，没有遗漏，各种情况都考虑到。

④ 高效沟通。

当我们将新旧流程优化后，流程图可以更直观地向团队传达流程差异，团队沟通效率更高。

3. How | 如何进行用户流程设计 我把用户流程设计过程拆分成了 4 大步：

图 5 用户流程的设计步骤

定义流程图符号，这是我们表达用户流程的工具。 用流程符号，绘制用户完成目标的主流/核心流程。 审视流程的起点和终点，思考在现有流程外，有哪些流程可以替代现有流程，让用户一步直达或者通过其他路径更快捷地达成目标。 回顾每条流程，逐一审视流程的每一步，思考在现有流程下，如何能降低用户操作成本，更快捷地帮助用户达成目标。 ① 定义流程图符号

作为设计师，一般不会直接用软件中的形状来绘制流程图（确实有点丑），但要注意不能对形状样式改变太大，徒增团队成员认知成本。同时，也要考虑到并不是所有项目成员都接触过流程图，所以依然要对你的流程图符号进行图例解释，保证大家都能理解流程图中每个节点的涵义。

给大家看一下我自己常用到的流程图符号：

图 6 用户流程图常用符号

我保留了圆角矩形、矩形、菱形、箭头的基本涵义，并增加了一个页面节点，就像我之前表达用户旅程图中的行为一样，我认为页面节点可以将操作节点场景化，更易于还原用户的线上使用场景（非必须，大家也可以不用页面节点）。同时我还为不同的节点赋予了不同的颜色，方便大家通过颜色及形状快速识别起始节点和中间节点。

② 绘制主流/核心流程

如果是已有的产品，则按照用户操作步骤，用流程图符号逐一绘制核心流程，如果是规划中的产品，则绘制出你规划的核心流程。我还是以浏览器搜索为例：

图 7 搜索的核心流程

用户想要在浏览器中进行搜索，需要经历点击浏览器→点击搜索框→手动输入→点击搜索→点击结果，这几步核心操作才能达成目标。

③ 思考替代流程

现有/理想流程绘制完成之后，审视起点（启动浏览器）和终点（找到想要的结果），思考为了达成目标，是否有其他（更快捷的）流程呢？

这一步会比较难，所以很容易被设计师跳过，因为并不是每次思考都会有结果。但这一步其实更有价值和意义，只有我们时刻都想着这一步的优化，才有可能产生创意顿悟，萌生新的解决方案。所以建议大家一定要多花点时间，持续思考，头脑里思考得多，排列组合得多，某个对的组合就更有可能快速闪现。

全新的替代流程，往往非常具有创新性。比如我们之前提到的 QQ 的一键消除所有未读消息的设计：

图 8 QQ 的一键消除所有未读消息的流程设计

把原来至少 2 步，最多 2N 步的操作步骤，缩减为极致的一步，真的让用户大快人心，爽感爆棚。

再比如登录流程，本机号码一键登录也是一种非常创新的方式：

图 9 本机号码一键登录的流程设计

把原来繁琐的登录流程也缩减为极致的一步，也大大提升了用户的登录意愿和产品的登录完成率。

回到我们的浏览器搜索场景，除了前面提到的文本搜索的典型搜索流程，还有什么便捷的流程替代方式呢?大家可以先思考 1 分钟，看看你能想到几种？穷尽思考之后再往下接着看？

————————我是思考的分界线，不要忽略我，先想想哦———————

我相信大家很容易想到语音或者图片搜索的这种方式，我们可以把这算做第一类：

图 10 语音搜索流程

那除了语音/图片搜索还有更快捷的搜索方式吗？

我们可以回顾一下《一个公式教你搞定场景化设计》中提到的前置行为角度，如果我们检测到用户刚刚复制了某个网址，那当用户打开浏览器时，我们是有非常大信心认为用户是要打开网址的，那我们可以在首页出现一个打开复制网址的提示，从而实现一键打开结果详情页的设计。

用一个公式，从3个方面教你搞定场景化设计 之前我们讲了用户画像，让大家可以通过构建用户画像，去深入了解用户的行为、态度、痛点和需求。

阅读文章 >

图 11 网址搜索流程

还有更快捷的搜索方式吗？

我们可以像淘宝首页的搜索框一样，直接在框内猜测用户可能会感兴趣的搜索词，并提供搜索按钮，这样用户就可以通过一步点击搜索得到相应的结果。

图 12 推荐词搜索流程

还有更快捷的搜索方式吗？

移动场景下用户使用任何产品都是碎片化的，随时都有可能被外界干扰所中断，如果用户正在浏览某个结果页的时候，一个电话进来，用户接通电话之后又在手机上处理了几个别的事物，然后才想起来刚刚的搜索结果没有看完，这时候浏览器在后台的进程可能已经死掉了，用户再打开浏览器就需要再重新就进行前面的搜索行为（这种情况在浏览器中概率非常大，因为历史记录词的搜索占比能达到 20%~30%）所以类似这种用户并非主动退出结果页的流程，如果下次用户打开浏览器时能做到自动恢复上次的结果页，基本上就实现了 0 步直达搜索结果页，这应该算是最快捷的结果直达方式，已经跳出了搜索这条路径了。

图 13 自动恢复流程

大家可以参考《一个公式教你搞定场景化设计》中提到的场景因素，从不同的角度出发，思考是否有新的流程和方式可以帮助用户更快捷地达成目标。

④ 优化现有流程。

总目标=目标 1(A1 * X1%)+目标 2(A2 * X2%)+……+目标N(An * Xn%)

要达成某个目标，可以将达成方式分解成 N 种渠道（N 种流程），分别用 A1,A2…An表示，每种渠道的完成率用Xn表示（乘法拆解），那么各个渠道的累加完成量就是总的目标值。

我们通过替代流程的方式，实现了流程的场景化和多样化，接下来的任务就是逐一地去打磨每一条流程，提升每条流程的转化率。

我们还以典型的文本搜索流程为例，如何去提升这个流程的转化率呢？

我们可以通过提供历史记录、猜你想搜等模块，帮助用户一步直达搜索结果。

图 14 历史记录/猜你想搜搜索流程

这一步要考虑的是如何提升历史记录和猜你想搜的命中率，主要通过提升算法和增加数量的方式来达成。

如果一定需要用户输入的话，除了提供前面的提到的语音/图片的搜索方式外，还有什么方式可以减少输入成本呢？

答案是搜索联想词。通过关键词自动匹配输入联想，可以让用户尽可能少的进行文本输入。

图 15 联想词搜索流程

那除了联想词还有什么方法能够让用户更快地达成目标呢？

答案是即时搜索。伴随用户的输入，不仅出联想词，而且也出最有可能命中用户需求的搜索结果卡片，让用户可以通过点击卡片，一键直达搜索结果页。

图 16 联想卡片搜索流程

那到了搜索结果页，还有没有方法可以缩短用户操作路径呢？

百度给出答案是框计划，直接在搜索结果第一位显示用户需要的详情信息，让用户在信息结果页即满足需求，而不需要进详情页查看。

图 17 框计划搜索流程

以上都是围绕文本搜索，业界已经给出的一些减少操作步骤的具体实践，如果我们将所有替代流程和优化流程，再加上判断条件绘制到一起，就形成了一张全局的用户搜索流程图（仅作示意，真实的浏览器用户搜索流程比这更复杂）：

图 19 全局搜索流程示意图

好了，用户流程设计到这里就结束了，希望这次搜索的案例，能够给你一些启发，让你有思路迭代你的用户流程设计，为用户带来更方便快捷的流程体验。

欢迎关注作者微信公众号：「悦姐聊设计」

编者按：本文从用户流程设计的定义、为什么要做用户流程设计以及如何做用户流程设计3个方面，帮你掌握用户流程设计。

设计师如何处理任务及优化流程？用实战案例帮你掌握！ 任务处理是体验设计师的一项基本功，任务处理的原则是提高任务完成的效率，同时满足用户体验的要求。

阅读文章 >

用户 流程设计 ，是用户与产品互动的内在交互逻辑，用户能感受到，但却不能直观地看见，它通常是以用户流程图的形式进行输出和呈现，多用于项目团队内部进行沟通。

好的 用户流程设计 不仅能够帮助用户完成目标，而且还能给用户带来愉悦甚至惊喜。交互设计是对用户行为的设计，而流程设计，核心就是用户与产品互动的行为步骤和顺序，所以想要做好 交互设计 ，必须要打好流程设计的基本功。

因为流程设计的表现载体是流程图，所以我们就从流程图开始入手学习，把看不见的流程可视化，方便我们学习和交流：

图 1 流程图的定义

流程图，是以特定的图形符号+辅助说明，表示某一任务过程的具体步骤和方向的图。一般包括起始、输入、判断、处理、输出与终结等基本节点及执行逻辑。

比如把大象放入冰箱的 3 步流程，我们就可以用上图所示的符号、文字和箭头来表达。

为了便于识别，绘制流程图有约定俗成的图形符号：以圆角矩形表示“开始”与“结束”，矩形表示行动方案、普通工作环节，菱形表示问题判断或判定环节，用平行四边形表示输入输出，箭头代表工作流方向等。

图 2 流程图的绘制规则

还是以把大象放进冰箱的流程为例，在把大象放进冰箱前，我们需要先判断一下冰箱是否能装下大象，能则开始装，不能则找一个更大的冰箱或者寻求其他解决方法。

下面我们就切入正题，讲讲跟用户行为密切相关的用户流程图。

1. What | 什么是用户流程图？ 用户流程图是指用户为了达成某个目标，而与产品交互的步骤及顺序的图。

图 3 用户流程图的定义和示意

在交互工作中，设计师通常会绘制 2 种用户流程图：

抽象的符号流程图：采用约定俗成的流程图符号，表示用户与产品互动的流程。 具象的页面流程图：采用用户真实可见的界面，表示用户与产品互动的流程。 后者更直观好理解，比较适合流程少且步骤相对短的流程；前者更抽象概括，在表现复杂的多步骤多分支的流程更有优势。

当我们进行用户流程的全局梳理及思考迭代时，我更建议用抽象的符号流程图，这样会减少页面细节的干扰，让我们聚焦到更本质的流程思考中，所以本文用户流程设计，也是以符号流程图为载体向大家进行介绍。

2. Why | 为什么要绘制用户流程图？ 用户流程图属于交互文档的一部分，当我们从 0 到 1 构建某个任务流程，或者对某个流程进行整体优化时，一般建议绘制用户流程图，以便更直观的展现用户与产品互动的具体步骤和顺序。

绘制流程图对设计师来讲有 4 大价值：

图 4 用户流程图的价值

① 认清现况。

当我们接触新项目或新功能时，将现有用户流程绘制出来，可以让我们对全局流程有更清楚的认识，否则随着步骤的增加，大脑的工作记忆会不足以支撑我们认知、记忆和理解。

② 流程优化。

通过对流程图的全局审视和竞品对比，可以帮助我们快速发现现有流程中存在的问题，同时可视化的呈现方式也更有利于激发我们创新流程设计的想法。

③ 避免遗漏。

有完整的用户流程图打底，可以保证我们后续在设计具体界面和细节时，没有遗漏，各种情况都考虑到。

④ 高效沟通。

当我们将新旧流程优化后，流程图可以更直观地向团队传达流程差异，团队沟通效率更高。

3. How | 如何进行用户流程设计 我把用户流程设计过程拆分成了 4 大步：

图 5 用户流程的设计步骤

定义流程图符号，这是我们表达用户流程的工具。 用流程符号，绘制用户完成目标的主流/核心流程。 审视流程的起点和终点，思考在现有流程外，有哪些流程可以替代现有流程，让用户一步直达或者通过其他路径更快捷地达成目标。 回顾每条流程，逐一审视流程的每一步，思考在现有流程下，如何能降低用户操作成本，更快捷地帮助用户达成目标。 ① 定义流程图符号

作为设计师，一般不会直接用软件中的形状来绘制流程图（确实有点丑），但要注意不能对形状样式改变太大，徒增团队成员认知成本。同时，也要考虑到并不是所有项目成员都接触过流程图，所以依然要对你的流程图符号进行图例解释，保证大家都能理解流程图中每个节点的涵义。

给大家看一下我自己常用到的流程图符号：

图 6 用户流程图常用符号

我保留了圆角矩形、矩形、菱形、箭头的基本涵义，并增加了一个页面节点，就像我之前表达用户旅程图中的行为一样，我认为页面节点可以将操作节点场景化，更易于还原用户的线上使用场景（非必须，大家也可以不用页面节点）。同时我还为不同的节点赋予了不同的颜色，方便大家通过颜色及形状快速识别起始节点和中间节点。

② 绘制主流/核心流程

如果是已有的产品，则按照用户操作步骤，用流程图符号逐一绘制核心流程，如果是规划中的产品，则绘制出你规划的核心流程。我还是以浏览器搜索为例：

图 7 搜索的核心流程

用户想要在浏览器中进行搜索，需要经历点击浏览器→点击搜索框→手动输入→点击搜索→点击结果，这几步核心操作才能达成目标。

③ 思考替代流程

现有/理想流程绘制完成之后，审视起点（启动浏览器）和终点（找到想要的结果），思考为了达成目标，是否有其他（更快捷的）流程呢？

这一步会比较难，所以很容易被设计师跳过，因为并不是每次思考都会有结果。但这一步其实更有价值和意义，只有我们时刻都想着这一步的优化，才有可能产生创意顿悟，萌生新的解决方案。所以建议大家一定要多花点时间，持续思考，头脑里思考得多，排列组合得多，某个对的组合就更有可能快速闪现。

全新的替代流程，往往非常具有创新性。比如我们之前提到的 QQ 的一键消除所有未读消息的设计：

图 8 QQ 的一键消除所有未读消息的流程设计

把原来至少 2 步，最多 2N 步的操作步骤，缩减为极致的一步，真的让用户大快人心，爽感爆棚。

再比如登录流程，本机号码一键登录也是一种非常创新的方式：

图 9 本机号码一键登录的流程设计

把原来繁琐的登录流程也缩减为极致的一步，也大大提升了用户的登录意愿和产品的登录完成率。

回到我们的浏览器搜索场景，除了前面提到的文本搜索的典型搜索流程，还有什么便捷的流程替代方式呢?大家可以先思考 1 分钟，看看你能想到几种？穷尽思考之后再往下接着看？

————————我是思考的分界线，不要忽略我，先想想哦———————

我相信大家很容易想到语音或者图片搜索的这种方式，我们可以把这算做第一类：

图 10 语音搜索流程

那除了语音/图片搜索还有更快捷的搜索方式吗？

我们可以回顾一下《一个公式教你搞定场景化设计》中提到的前置行为角度，如果我们检测到用户刚刚复制了某个网址，那当用户打开浏览器时，我们是有非常大信心认为用户是要打开网址的，那我们可以在首页出现一个打开复制网址的提示，从而实现一键打开结果详情页的设计。

用一个公式，从3个方面教你搞定场景化设计 之前我们讲了用户画像，让大家可以通过构建用户画像，去深入了解用户的行为、态度、痛点和需求。

阅读文章 >

图 11 网址搜索流程

还有更快捷的搜索方式吗？

我们可以像淘宝首页的搜索框一样，直接在框内猜测用户可能会感兴趣的搜索词，并提供搜索按钮，这样用户就可以通过一步点击搜索得到相应的结果。

图 12 推荐词搜索流程

还有更快捷的搜索方式吗？

移动场景下用户使用任何产品都是碎片化的，随时都有可能被外界干扰所中断，如果用户正在浏览某个结果页的时候，一个电话进来，用户接通电话之后又在手机上处理了几个别的事物，然后才想起来刚刚的搜索结果没有看完，这时候浏览器在后台的进程可能已经死掉了，用户再打开浏览器就需要再重新就进行前面的搜索行为（这种情况在浏览器中概率非常大，因为历史记录词的搜索占比能达到 20%~30%）所以类似这种用户并非主动退出结果页的流程，如果下次用户打开浏览器时能做到自动恢复上次的结果页，基本上就实现了 0 步直达搜索结果页，这应该算是最快捷的结果直达方式，已经跳出了搜索这条路径了。

图 13 自动恢复流程

大家可以参考《一个公式教你搞定场景化设计》中提到的场景因素，从不同的角度出发，思考是否有新的流程和方式可以帮助用户更快捷地达成目标。

④ 优化现有流程。

总目标=目标 1(A1 * X1%)+目标 2(A2 * X2%)+……+目标N(An * Xn%)

要达成某个目标，可以将达成方式分解成 N 种渠道（N 种流程），分别用 A1,A2…An表示，每种渠道的完成率用Xn表示（乘法拆解），那么各个渠道的累加完成量就是总的目标值。

我们通过替代流程的方式，实现了流程的场景化和多样化，接下来的任务就是逐一地去打磨每一条流程，提升每条流程的转化率。

我们还以典型的文本搜索流程为例，如何去提升这个流程的转化率呢？

我们可以通过提供历史记录、猜你想搜等模块，帮助用户一步直达搜索结果。

图 14 历史记录/猜你想搜搜索流程

这一步要考虑的是如何提升历史记录和猜你想搜的命中率，主要通过提升算法和增加数量的方式来达成。

如果一定需要用户输入的话，除了提供前面的提到的语音/图片的搜索方式外，还有什么方式可以减少输入成本呢？

答案是搜索联想词。通过关键词自动匹配输入联想，可以让用户尽可能少的进行文本输入。

图 15 联想词搜索流程

那除了联想词还有什么方法能够让用户更快地达成目标呢？

答案是即时搜索。伴随用户的输入，不仅出联想词，而且也出最有可能命中用户需求的搜索结果卡片，让用户可以通过点击卡片，一键直达搜索结果页。

图 16 联想卡片搜索流程

那到了搜索结果页，还有没有方法可以缩短用户操作路径呢？

百度给出答案是框计划，直接在搜索结果第一位显示用户需要的详情信息，让用户在信息结果页即满足需求，而不需要进详情页查看。

图 17 框计划搜索流程

以上都是围绕文本搜索，业界已经给出的一些减少操作步骤的具体实践，如果我们将所有替代流程和优化流程，再加上判断条件绘制到一起，就形成了一张全局的用户搜索流程图（仅作示意，真实的浏览器用户搜索流程比这更复杂）：

图 19 全局搜索流程示意图

好了，用户流程设计到这里就结束了，希望这次搜索的案例，能够给你一些启发，让你有思路迭代你的用户流程设计，为用户带来更方便快捷的流程体验。

欢迎关注作者微信公众号：「悦姐聊设计」

编者按：在 UI设计 中如何构建 界面设计 框架？本文从用户需求、业务目标、媒介属性、竞品设计4个部分，帮你掌握这个 用户体验设计 的知识点。

更多框架好文：

如何制定B端项目全局框架？收下这篇总监级的经验！ 这阵子想了想关于交互知识的分享，还是应该要拓展成一整个系列的内容，包含各类组件、控件和行为的解析。

阅读文章 >

如何构建界面设计框架？ 一个界面的框架究竟是如何设计出来的呢？我们可以从 4 个维度来寻找答案：

图 1 界面框架的构建逻辑

分别是用户需求，业务目标，媒介属性和竞品设计。

为什么是这四个维度呢？我相信大家对用户需求和业务目标都没什么疑问，因为这是产品体验设计的基石，我们整体产品设计目标就是想通过满足用户需求，来助力业务目标的达成。

图 2 各目标之间的关系

那为什么要考虑媒介属性呢？因为不同的媒介，形态不同，可供性和系统规范也大相径庭。每个在其生态上产品，都需要遵守其基本的规则，才既符合平台上架的标准，也符合用户对平台上产品的使用预期。这也是为什么我们前期会花那么多时间来讲解 iOS 和 Material design 的系统规范，就是为了让大家了解基础的界面元素和布局规则，准备好产品设计的材料和秘方。

iOS 15 设计规范正式版即将发布，快来下载中文译稿！ 一年一度的科技春晚苹果发布会已经结束，新款 13 香系列苹果新机已经问世。

阅读文章 >

零基础 UI 入门六：最新安卓规范入门解析 安卓是由谷歌公司开源的，除 iOS 外的另一大手机系统，也是我们要学习规范的对象之一。

阅读文章 >

最后是头部竞品设计，细分到某个具体品类的产品，头部竞品会塑造用户对该品类产品的认知和习惯，作为后来者，有必要了解并借鉴头部竞品的一些设计模式，以顺应用户的心智模型，减少用户的操作成本，所以竞品设计也是设计师需要提前进行分析的。

下面我们以浏览器首页框架设计为例，为大家讲解界面框架的构建逻辑。

1. 用户需求 关于用户需求，我们可以通过用户调研这种偏用户主观的方式进行获取，并结合后台数据——用户真实行为数据进行验证，来确定用户的需求。

以浏览器首页为例，我们通过问卷调研，这种定量的调研方式，了解用户主观上挑选浏览器的驱动因素，其中代表功能需求的依次是：搜索、网页浏览、信息流、视频、小说。（不同页面调研的问题需要有针对性的设计，首页作为产品的初始界面，可以以 App 的整体的选择驱动为参考）

图 3 主观和客观的用户需求

再看看后台客观数据——浏览器首页的功能转化率数据，从高到低依次是：信息流、搜索、名站、提示、天气、二楼小程序。

对比主客观数据，如果数据一致，说明产品设计大概率是符合用户心智模型和业务预期的。如果主观和客观数据有偏差，一方面要审视产品设计是否有问题导致用户转化率低，另一方面也要挖掘是否用户言行有偏差导致预期数据虚高。

结合浏览器的这个案例，大家可以先想一想，二者的数据差异（用户认为搜索是核心驱动，但实际信息流的日活更高）代表什么呢？

我的理解是：用户使用浏览器的核心驱动是搜索+网页浏览体验，结合福格行为模型 B=MAP。用户使用浏览器的搜索动机 M 非常强，搜索功能和网页体验是浏览器的核心基础，很容易形成用户心智（主观认知），所以必须在产品设计上加以强化和优化，以稳固用户使用浏览器的核心驱动心智。其次，信息流虽然在用户认知中排名相对靠后，但却是转化最高的功能，说明信息流的触发性 P 极强（本来无主动诉求（动机），因提示而激发）加上对用户能力要求 A 极低，所以就形成了非常高的转化率数据（但有可能并未进入用户的心智）。所以在保障搜索体验的前提下，要尽可能的提升信息流的展示空间和内容吸引力，提升信息流的使用心智，进而给业务带来更多的收益。

如何提高设计转化？先学会经典的「福格模型」 日常工作中我们经常要考虑如何吸引用户转化。

阅读文章 >

2. 业务目标 浏览器作为 vivo 手机上最重要的一个互联网产品之一，其核心的业务目标就是盈利，通过提供优质的搜索+内容服务，带来更高的日活和时长（广告收益），助力 vivo 手机业务的发展。

为了便于理解，我就将浏览器的业务目标实现简单的以搜索和信息流来达成，回到我们之前的目标拆解公式：

图 4 业务目标的拆解

总目标=目标 1(A1 * X1%)+目标 2(A2 * X2%)+……+目标N(An * Xn%)

我们可以这么简单拆解：（数值非真实，仅作案例参考）

浏览器总营收=浏览器日活 1 亿*搜索点击 50%*搜索完成 90%*1 元广告收益*2 次人均搜索+浏览器日活 1 亿*信息流转化 60%*0.1 元信息流广告/10 分*40 分钟。

从中可以看出，作为设计师，我们可以发力的主要集中在搜索/信息流入口的转化率、搜索的完成率以及信息流的连续消费上，在后续界面及流程设计中，我们可以围绕这几点展开设计。

3. 媒介属性 在任何媒介上设计产品，我们都需要了解媒介的硬件和软件特性。因为媒介的形态和可供性会影响并塑造人们的认知和行为。

图 5 不同媒介的形态

比如电视、电脑、平板和手机，硬件不同，人们与之交互的方式也大相径庭。

电视：大屏幕（32~86 英寸），距离远（2.5~5 米），多用遥控器交互，；

电脑：中型屏幕（13~38 英寸），距离中（50~70 厘米），多用键鼠交互；

平板：中小屏幕（8~12 英寸），距离较近（40~60 厘米），多用手势交互；

手机：小屏幕（4~7 英寸），距离近（32~50 厘米），多用拇指交互；

今天我们就重点以手机为例，为大家讲讲手机媒介的特性和拇指交互的特点。

2013 年，Steven Hoober 和其他一些研究员，对人们在街上、机场、公共汽车站、咖啡馆、火车和公共汽车上使用移动设备进行了 1,333 次观察。发现当人们在手机上进行操作时：

图 6 有操作时的 3 种持机手势

有 49%的情况是单手操作，有 36%的情况是一手持机，另一只手的拇指或食指进行操作，有 15%的情况是双手持机并双手操作。综合来看，人们用拇指交互的比例达到了 75%（49%+26%），所以我们日常的互动操作的布局及热区设计，需要尽可能的满足拇指的可操作范围和精度范围。

我们具体看一下不同持机手势的操作热区分布：

图 7 不同持机手势的操作热区

从中可以看出，单手持机的交互盲区相比双手持机会更加显著。再进一步，我们来看一下单手持机时，左右手持机交互热区的分布：

图 8 不同持机手势的操作热区

给大家补充一个容易犯错的知识点：在生活中，右撇子的用户占比约 87%，但调研中偏向于右手持机并操作的用户仅占 28%。

图 9 左右手习惯调研

调研给出的原因是，多数用户会选择左手持机，以便让灵活的右手做更复杂的操作，比如吃饭等。其次是因为多数人是以左眼为主视眼的，左手持握会更方便左眼看手机。

坦白讲，我对这个数据是有些质疑的，但不管左手持机会不会翻转，都提示我们设计师：要兼顾用户左右手持机的习惯设计去设计页面框架，尽可能保证用户高频操作处于绿色热区内。

给大家举个视频的例子：

图 10 左右持机操作按钮布局变化

夸克视频检测到用户不同手持机时，会改变中间常用功能的位置：右手持机按钮在右侧，左手持机按钮在左侧，以方便拇指操作。

再回到 OS 系统特性，我们需要了解 ios 和 android 的布局规范，去顺应不同系统下的界面框架布局：

图 11 不同系统的页面框架

基于 OS 的系统框架，我建议采用标准组件布局时，尽量使用其标准位置（可以与硬件的布局及热区相匹配），把更多精力聚焦在内容区，去思考用户需求和业务目标的内容框架布局，这方面竞品设计可以给我们一些参考。

4. 竞品设计 从平台特性中吸取平台系统的产品设计框架，再从竞品中了解竞品内容区的设计框架，可以帮助我们初步构建好界面框架。以浏览器为例，我们选择了几大厂商和 3 个头部的第三方浏览器作为参考：

图 12 浏览器核心竞品页面

我们把这几个产品的框架进行梳理可以得到下图：

图 13 浏览器核心竞品页面框架

由此可以归纳出主流竞品的页面框架从上到下依次是：天气+运营位、搜索框、名站、信息流、导航栏。这是宏观的功能框架布局。如果我们的需求里包含的就是这几大模块，那可以延续这几大模块的布局顺序。

那进入到微观层面，明确每一个模块对用户的意义，对业务的价值，这里一定更要结合第一二步的分析结论，帮助我们判断：每一个模块在首页中应该占据什么样的位置，起到什么样的作用，应该占用多大的视觉空间，多强的视觉焦点。

以 vivo 浏览器的首页设计为例：最核心的功能是搜索+信息流，所以需要保证搜索功能的可见性（位置延续搜索框的顶部一致性认知）和操作的便捷性（适当往下且增加搜索栏的高度），并尽可能为为信息流腾出更多的展示空间（缩减名站的个数和高度，强化信息流的视觉样式）

PS：因为浏览器新版首页还未上线，所以暂时就不给大家展示新设计了。希望通过这个案例，可以让大家对如何进行界面框架设计有清楚的认识。

欢迎关注作者微信公众号：「悦姐聊设计」

编者按：在UI设计中如何构建 界面设计 框架？本文从用户需求、业务目标、媒介属性、竞品设计4个部分，帮你掌握这个 用户体验设计 的知识点。

更多框架好文：

如何制定B端项目全局框架？收下这篇总监级的经验！ 这阵子想了想关于交互知识的分享，还是应该要拓展成一整个系列的内容，包含各类组件、控件和行为的解析。

阅读文章 >

如何构建界面 设计框架 ？ 一个界面的框架究竟是如何设计出来的呢？我们可以从 4 个维度来寻找答案：

图 1 界面框架的构建逻辑

分别是用户需求，业务目标，媒介属性和竞品设计。

为什么是这四个维度呢？我相信大家对用户需求和业务目标都没什么疑问，因为这是产品体验设计的基石，我们整体产品设计目标就是想通过满足用户需求，来助力业务目标的达成。

图 2 各目标之间的关系

那为什么要考虑媒介属性呢？因为不同的媒介，形态不同，可供性和系统规范也大相径庭。每个在其生态上产品，都需要遵守其基本的规则，才既符合平台上架的标准，也符合用户对平台上产品的使用预期。这也是为什么我们前期会花那么多时间来讲解 iOS 和 Material design 的系统规范，就是为了让大家了解基础的界面元素和布局规则，准备好产品设计的材料和秘方。

iOS 15 设计规范正式版即将发布，快来下载中文译稿！ 一年一度的科技春晚苹果发布会已经结束，新款 13 香系列苹果新机已经问世。

阅读文章 >

零基础 UI 入门六：最新安卓规范入门解析 安卓是由谷歌公司开源的，除 iOS 外的另一大手机系统，也是我们要学习规范的对象之一。

阅读文章 >

最后是头部竞品设计，细分到某个具体品类的产品，头部竞品会塑造用户对该品类产品的认知和习惯，作为后来者，有必要了解并借鉴头部竞品的一些设计模式，以顺应用户的心智模型，减少用户的操作成本，所以竞品设计也是设计师需要提前进行分析的。

下面我们以浏览器首页框架设计为例，为大家讲解界面框架的构建逻辑。

1. 用户需求 关于用户需求，我们可以通过用户调研这种偏用户主观的方式进行获取，并结合后台数据——用户真实行为数据进行验证，来确定用户的需求。

以浏览器首页为例，我们通过问卷调研，这种定量的调研方式，了解用户主观上挑选浏览器的驱动因素，其中代表功能需求的依次是：搜索、网页浏览、信息流、视频、小说。（不同页面调研的问题需要有针对性的设计，首页作为产品的初始界面，可以以 App 的整体的选择驱动为参考）

图 3 主观和客观的用户需求

再看看后台客观数据——浏览器首页的功能转化率数据，从高到低依次是：信息流、搜索、名站、提示、天气、二楼小程序。

对比主客观数据，如果数据一致，说明产品设计大概率是符合用户心智模型和业务预期的。如果主观和客观数据有偏差，一方面要审视产品设计是否有问题导致用户转化率低，另一方面也要挖掘是否用户言行有偏差导致预期数据虚高。

结合浏览器的这个案例，大家可以先想一想，二者的数据差异（用户认为搜索是核心驱动，但实际信息流的日活更高）代表什么呢？

我的理解是：用户使用浏览器的核心驱动是搜索+网页浏览体验，结合福格行为模型 B=MAP。用户使用浏览器的搜索动机 M 非常强，搜索功能和网页体验是浏览器的核心基础，很容易形成用户心智（主观认知），所以必须在产品设计上加以强化和优化，以稳固用户使用浏览器的核心驱动心智。其次，信息流虽然在用户认知中排名相对靠后，但却是转化最高的功能，说明信息流的触发性 P 极强（本来无主动诉求（动机），因提示而激发）加上对用户能力要求 A 极低，所以就形成了非常高的转化率数据（但有可能并未进入用户的心智）。所以在保障搜索体验的前提下，要尽可能的提升信息流的展示空间和内容吸引力，提升信息流的使用心智，进而给业务带来更多的收益。

如何提高设计转化？先学会经典的「福格模型」 日常工作中我们经常要考虑如何吸引用户转化。

阅读文章 >

2. 业务目标 浏览器作为 vivo 手机上最重要的一个互联网产品之一，其核心的业务目标就是盈利，通过提供优质的搜索+内容服务，带来更高的日活和时长（广告收益），助力 vivo 手机业务的发展。

为了便于理解，我就将浏览器的业务目标实现简单的以搜索和信息流来达成，回到我们之前的目标拆解公式：

图 4 业务目标的拆解

总目标=目标 1(A1 * X1%)+目标 2(A2 * X2%)+……+目标N(An * Xn%)

我们可以这么简单拆解：（数值非真实，仅作案例参考）

浏览器总营收=浏览器日活 1 亿*搜索点击 50%*搜索完成 90%*1 元广告收益*2 次人均搜索+浏览器日活 1 亿*信息流转化 60%*0.1 元信息流广告/10 分*40 分钟。

从中可以看出，作为设计师，我们可以发力的主要集中在搜索/信息流入口的转化率、搜索的完成率以及信息流的连续消费上，在后续界面及流程设计中，我们可以围绕这几点展开设计。

3. 媒介属性 在任何媒介上设计产品，我们都需要了解媒介的硬件和软件特性。因为媒介的形态和可供性会影响并塑造人们的认知和行为。

图 5 不同媒介的形态

比如电视、电脑、平板和手机，硬件不同，人们与之交互的方式也大相径庭。

电视：大屏幕（32~86 英寸），距离远（2.5~5 米），多用遥控器交互，；

电脑：中型屏幕（13~38 英寸），距离中（50~70 厘米），多用键鼠交互；

平板：中小屏幕（8~12 英寸），距离较近（40~60 厘米），多用手势交互；

手机：小屏幕（4~7 英寸），距离近（32~50 厘米），多用拇指交互；

今天我们就重点以手机为例，为大家讲讲手机媒介的特性和拇指交互的特点。

2013 年，Steven Hoober 和其他一些研究员，对人们在街上、机场、公共汽车站、咖啡馆、火车和公共汽车上使用移动设备进行了 1,333 次观察。发现当人们在手机上进行操作时：

图 6 有操作时的 3 种持机手势

有 49%的情况是单手操作，有 36%的情况是一手持机，另一只手的拇指或食指进行操作，有 15%的情况是双手持机并双手操作。综合来看，人们用拇指交互的比例达到了 75%（49%+26%），所以我们日常的互动操作的布局及热区设计，需要尽可能的满足拇指的可操作范围和精度范围。

我们具体看一下不同持机手势的操作热区分布：

图 7 不同持机手势的操作热区

从中可以看出，单手持机的交互盲区相比双手持机会更加显著。再进一步，我们来看一下单手持机时，左右手持机交互热区的分布：

图 8 不同持机手势的操作热区

给大家补充一个容易犯错的知识点：在生活中，右撇子的用户占比约 87%，但调研中偏向于右手持机并操作的用户仅占 28%。

图 9 左右手习惯调研

调研给出的原因是，多数用户会选择左手持机，以便让灵活的右手做更复杂的操作，比如吃饭等。其次是因为多数人是以左眼为主视眼的，左手持握会更方便左眼看手机。

坦白讲，我对这个数据是有些质疑的，但不管左手持机会不会翻转，都提示我们设计师：要兼顾用户左右手持机的习惯设计去设计页面框架，尽可能保证用户高频操作处于绿色热区内。

给大家举个视频的例子：

图 10 左右持机操作按钮布局变化

夸克视频检测到用户不同手持机时，会改变中间常用功能的位置：右手持机按钮在右侧，左手持机按钮在左侧，以方便拇指操作。

再回到 OS 系统特性，我们需要了解 ios 和 android 的布局规范，去顺应不同系统下的界面框架布局：

图 11 不同系统的页面框架

基于 OS 的系统框架，我建议采用标准组件布局时，尽量使用其标准位置（可以与硬件的布局及热区相匹配），把更多精力聚焦在内容区，去思考用户需求和业务目标的内容框架布局，这方面竞品设计可以给我们一些参考。

4. 竞品设计 从平台特性中吸取平台系统的产品设计框架，再从竞品中了解竞品内容区的设计框架，可以帮助我们初步构建好界面框架。以浏览器为例，我们选择了几大厂商和 3 个头部的第三方浏览器作为参考：

图 12 浏览器核心竞品页面

我们把这几个产品的框架进行梳理可以得到下图：

图 13 浏览器核心竞品页面框架

由此可以归纳出主流竞品的页面框架从上到下依次是：天气+运营位、搜索框、名站、信息流、导航栏。这是宏观的功能框架布局。如果我们的需求里包含的就是这几大模块，那可以延续这几大模块的布局顺序。

那进入到微观层面，明确每一个模块对用户的意义，对业务的价值，这里一定更要结合第一二步的分析结论，帮助我们判断：每一个模块在首页中应该占据什么样的位置，起到什么样的作用，应该占用多大的视觉空间，多强的视觉焦点。

以 vivo 浏览器的首页设计为例：最核心的功能是搜索+信息流，所以需要保证搜索功能的可见性（位置延续搜索框的顶部一致性认知）和操作的便捷性（适当往下且增加搜索栏的高度），并尽可能为为信息流腾出更多的展示空间（缩减名站的个数和高度，强化信息流的视觉样式）

PS：因为浏览器新版首页还未上线，所以暂时就不给大家展示新设计了。希望通过这个案例，可以让大家对如何进行界面框架设计有清楚的认识。

欢迎关注作者微信公众号：「悦姐聊设计」

编者按： 设计还原 如何做才能达到至少80%的落地效果？本文从设计前期的严谨，设计中期的积极沟通到设计后期的主动跟进3个方面，让你的设计方案完美落地。

如何做好设计还原？从这5个方面入手！ 作为设计师，一个老生常谈的话题就是还原度检查。

阅读文章 >

1. 关于设计还原 设计还原是开发实现的效果不断校正并与设计稿保持一致的过程。在项目开发的流程中，设计还原和功能测试一样，是上线前最后的质检工作。设计界面是直接呈现给用户的，还原度的高低影响用户对产品的第一印象。

设计还原这么重要，在实际执行中是什么样的？

2. 设计还原现状 其实很多时候，设计验收环节不太受到各方重视。设计师更多思考的是如何达到美观的界面、流畅的交互等问题，认为开发能会完全按照设计稿标注来，而忽略掉后期的设计验收；开发则关心的是实现这个功能需要花费多长时间，实现难度如何等等。大家站在不同的角度看待问题，双方的目标没有对齐，最终影响到工作效率也是必然的。

设计还原，终究是一个合作问题。还原度的高低与否，取决于设计-开发-测试这些环节的协作质量，也直接影响上线产品的用户体验。

影响设计还原的原因

3. 如何高效验收 在对接的整个流程中，本文梳理了前中后三个阶段分别需要做的准备工作，来帮助解决设计师和开发如何高效验收的问题。

前中后三个阶段需要做的工作

前期·严谨设计 建立设计规范

设计规范的目的是为了统一设计内部及前端工程师的开发，提升团队的协作效率，从而实现设计稿到线上页面输出统一的设计语言，从根本提升设计质量和还原度。我们把颜色、字体、组件等内容预设定成规范，保证了视觉上的统一，也方便组件的复用。

在设计前期需要确认哪些模块有可调用的开发组件，若没有，需要评估开发成本，预留好制作规范组件的时间。如果不了解这些情况，后期会有调整设计稿或延期风险。

建立统一的设计规范和设计组件

设计完整输出

我们在做设计交付前期，需要把全部的页面状态、切图标注、动效视频等文件整理好，避免在开发过程中临时进行补充，影响项目开发进度。关于设计稿内的切图，我们要提前与研发沟通，切图的范围和形式，最后把设计稿上传到公司统一使用的协作网站，如 58 使用的是自研开发协作平台风火轮。

设计稿输出到风火轮等设计开发协作平台

关于标注，现在的标注软件虽然能解放设计师的双手，但是它们只是生成各元素的基本样式、尺寸等，对于重要模块部分建议手动标注，告知开发设计说明及注意事项。

中期·积极沟通 设计宣讲会

一个产品的完整流程中，从创意发散到设计实施，由一开始的抽象目标到最终具象的方案形成，背后很多工作是不为人知的。这就解释了为什么很多时候开发同学不理解设计师对一个字号、一个像素的差异要“锱铢必较”。所以我们需要通过设计宣讲环节把设计的理念表达出来，与开发对齐目标，避免开发同学带着疑问写页面。

设计宣讲会的意义是把问题前置化。通过宣讲可以把视觉变化最大的地方和开发说明清楚。有些细微的地方我们特别向开发说明，加深他们的印象，在实现时候减少出错，我们前面每走一步，都是为了开发落地更效率、后续验收更轻松。

设计师需要与项目成员阐述设计方案，达成一致目标

在设计宣讲前，确认项目组主要成员到场，包括前端、测试、产品、后端同学等。我们对已确认的设计稿进行宣讲，结合设计文档对设计理念、组件规范、动效、特殊样式等模块进行讲述，帮助开发同学理解。同时开发同学也要及时反馈是否有还原困难，如：是否有技术限制？是否有组件改动困难？实现成本过高等问题。针对宣讲过程当中的问题和解决方案以会议纪要的形式记录下来，会议结束后根据达成的共识和重要结论邮件周知项目组全员。

对宣讲会重要信息做会议记录

及时同步信息

在项目正式上线前，都可能出现产品临时更改需求，计划赶不上变化，这种情况比较常见。有时候产品同学认为更改个颜色或交互形式是比较小的调整，只告知了设计师调整往往忽略了同步给开发。那么在测试上线后暴露出的问题，可能导致了延期等状况时，各方就出现责任划分。所以信息的同步非常重要，在项目组成立时，把涉及到的项目成员建立项目沟通群，所有相关信息同步在群内，有问题及时沟通，必要时拉会面聊。

避免频繁修改

除了产品需求上变更导致设计稿调整外，应避免对设计稿的频繁修改。因为在随意更新设计稿的时候，我们不清楚当前的开发进度，如果修改的部分已开发，会给他们产生不必要的工作量，也可能会影响开发同学的代码规范。如果必须要修改，一定要及时说明原因，否则会有被开发同学“追杀”的风险。

后期·主动跟进 跟进开发进度

设计稿交付后，我们还需要实时跟进项目的进度，了解当前项目开发的时间节点，根据开发给出的时间排期，在计划提测时间介入走查。如果开发反馈有延期风险，我们需要跟产品及时了解原因，然后评估是否对设计有影响。

建立走查机制

尽管我们前面做了详细的沟通和宣讲，但有时也避免不了在开发过程中发现有些问题才暴露出来。设计师需要在提测阶段提前介入走查，给开发预留出修改时间，通过建立合理完善的走查机制，来提升团队整体的协作效率。

建立合理的走查机制流程

① 保证视觉还原度在80%左右

在项目排期阶段可与开发沟通，要求对自身负责的部分进行设计自查，同时将设计实现效果纳入测试同学的工作中，保证视觉还原度在 80%以上，再介入视觉验收工作。因为很多时候不要求测试走查设计还原度，我们在验收的时候就会浪费很多时间和精力在那些对照视觉稿就能发现的简单问题上，反复验收导致设计与测试的工作量变大。

② 规范走查文档

在视觉走查阶段，我们应该建立线上协作走查文档，支持设计、开发、测试、产品等项目成员共同管理和跟进走查进度，避免口头沟通造成的信息遗漏、沟通误差等扯皮事件。走查文档中包含对设计走查问题的分类、分级等，再根据影响程度、实现难度、资源配比等情况综合分析进行排期。

在走查过程中，设计师还需要给予充分的支持响应，必要时补充设计示意图或交互动效帮助开发同学理解，避免信息偏差导致再次调整。

建立健全的线上协作走查文档

③ 关注特殊情况

特殊场景在走查中常常被忽略，等上线后在现实中碰到缺失异常状态体验会大打折扣，所以完成主流程的走查后，一定要记得考虑到特殊场景，包括括网络异常、内容缺失、空状态等。同时还要看下不同机型适配的问题，保证不同机型的界面呈现效果一致，包括关键信息及操作是否超出屏幕，是否出现覆盖、拉伸等情况。

数据监测

功能上线后也不代表需求的完结，我们还要及时追踪数据的情况。数据的量化指标可以很好佐证我们方案的价值，也能帮助我们在错误道路上及时转向。我们可根据数据反映的情况及时调整对应的产品策略，促进我们设计上的修改、完善等工作。

4. 写在最后 所以设计能力再强，设计方案再好，没有后续良好的执行，也终究不过是废纸一张。一个优秀的项目落地是大家共同协作的结果。如果设计还原出了问题，首先要自查，确保自身工作做到位，提升设计输出质量，依照设计规范做设计，做到逻辑自洽。我们要做足前期的准备工作，尽可能的多思考、多沟通，打造专业的“人设”，不仅赢得开发同学的尊重也更方便自己顺利开展工作。

关于提升设计还原质量，这里只是抛砖引玉，如果大家有更好的工作方法，欢迎评论区留言交流～

欢迎关注「58UXD」的微信公众号：

编者按： 设计还原 如何做才能达到至少80%的落地效果？本文从设计前期的严谨，设计中期的积极沟通到设计后期的主动跟进3个方面，让你的设计方案完美落地。

如何做好设计还原？从这5个方面入手！ 作为设计师，一个老生常谈的话题就是还原度检查。

阅读文章 >

1. 关于设计还原 设计还原是开发实现的效果不断校正并与设计稿保持一致的过程。在项目开发的流程中，设计还原和功能测试一样，是上线前最后的质检工作。设计界面是直接呈现给用户的，还原度的高低影响用户对产品的第一印象。

设计还原这么重要，在实际执行中是什么样的？

2. 设计还原现状 其实很多时候，设计验收环节不太受到各方重视。设计师更多思考的是如何达到美观的界面、流畅的交互等问题，认为开发能会完全按照设计稿标注来，而忽略掉后期的设计验收；开发则关心的是实现这个功能需要花费多长时间，实现难度如何等等。大家站在不同的角度看待问题，双方的目标没有对齐，最终影响到工作效率也是必然的。

设计还原，终究是一个合作问题。还原度的高低与否，取决于设计-开发-测试这些环节的协作质量，也直接影响上线产品的用户体验。

影响设计还原的原因

3. 如何高效验收 在对接的整个流程中，本文梳理了前中后三个阶段分别需要做的准备工作，来帮助解决设计师和开发如何高效验收的问题。

前中后三个阶段需要做的工作

前期·严谨设计 建立设计规范

设计规范的目的是为了统一设计内部及前端工程师的开发，提升团队的协作效率，从而实现设计稿到线上页面输出统一的设计语言，从根本提升设计质量和还原度。我们把颜色、字体、组件等内容预设定成规范，保证了视觉上的统一，也方便组件的复用。

在设计前期需要确认哪些模块有可调用的开发组件，若没有，需要评估开发成本，预留好制作规范组件的时间。如果不了解这些情况，后期会有调整设计稿或延期风险。

建立统一的设计规范和设计组件

设计完整输出

我们在做设计交付前期，需要把全部的页面状态、切图标注、动效视频等文件整理好，避免在开发过程中临时进行补充，影响项目开发进度。关于设计稿内的切图，我们要提前与研发沟通，切图的范围和形式，最后把设计稿上传到公司统一使用的协作网站，如 58 使用的是自研开发协作平台风火轮。

设计稿输出到风火轮等设计开发协作平台

关于标注，现在的标注软件虽然能解放设计师的双手，但是它们只是生成各元素的基本样式、尺寸等，对于重要模块部分建议手动标注，告知开发设计说明及注意事项。

中期·积极沟通 设计宣讲会

一个产品的完整流程中，从创意发散到设计实施，由一开始的抽象目标到最终具象的方案形成，背后很多工作是不为人知的。这就解释了为什么很多时候开发同学不理解设计师对一个字号、一个像素的差异要“锱铢必较”。所以我们需要通过设计宣讲环节把设计的理念表达出来，与开发对齐目标，避免开发同学带着疑问写页面。

设计宣讲会的意义是把问题前置化。通过宣讲可以把视觉变化最大的地方和开发说明清楚。有些细微的地方我们特别向开发说明，加深他们的印象，在实现时候减少出错，我们前面每走一步，都是为了开发落地更效率、后续验收更轻松。

设计师需要与项目成员阐述设计方案，达成一致目标

在设计宣讲前，确认项目组主要成员到场，包括前端、测试、产品、后端同学等。我们对已确认的设计稿进行宣讲，结合设计文档对设计理念、组件规范、动效、特殊样式等模块进行讲述，帮助开发同学理解。同时开发同学也要及时反馈是否有还原困难，如：是否有技术限制？是否有组件改动困难？实现成本过高等问题。针对宣讲过程当中的问题和解决方案以会议纪要的形式记录下来，会议结束后根据达成的共识和重要结论邮件周知项目组全员。

对宣讲会重要信息做会议记录

及时同步信息

在项目正式上线前，都可能出现产品临时更改需求，计划赶不上变化，这种情况比较常见。有时候产品同学认为更改个颜色或交互形式是比较小的调整，只告知了设计师调整往往忽略了同步给开发。那么在测试上线后暴露出的问题，可能导致了延期等状况时，各方就出现责任划分。所以信息的同步非常重要，在项目组成立时，把涉及到的项目成员建立项目沟通群，所有相关信息同步在群内，有问题及时沟通，必要时拉会面聊。

避免频繁修改

除了产品需求上变更导致设计稿调整外，应避免对设计稿的频繁修改。因为在随意更新设计稿的时候，我们不清楚当前的开发进度，如果修改的部分已开发，会给他们产生不必要的工作量，也可能会影响开发同学的代码规范。如果必须要修改，一定要及时说明原因，否则会有被开发同学“追杀”的风险。

后期·主动跟进 跟进开发进度

设计稿交付后，我们还需要实时跟进项目的进度，了解当前项目开发的时间节点，根据开发给出的时间排期，在计划提测时间介入走查。如果开发反馈有延期风险，我们需要跟产品及时了解原因，然后评估是否对设计有影响。

建立走查机制

尽管我们前面做了详细的沟通和宣讲，但有时也避免不了在开发过程中发现有些问题才暴露出来。设计师需要在提测阶段提前介入走查，给开发预留出修改时间，通过建立合理完善的走查机制，来提升团队整体的协作效率。

建立合理的走查机制流程

① 保证视觉还原度在80%左右

在项目排期阶段可与开发沟通，要求对自身负责的部分进行设计自查，同时将设计实现效果纳入测试同学的工作中，保证视觉还原度在 80%以上，再介入视觉验收工作。因为很多时候不要求测试走查设计还原度，我们在验收的时候就会浪费很多时间和精力在那些对照视觉稿就能发现的简单问题上，反复验收导致设计与测试的工作量变大。

② 规范走查文档

在视觉走查阶段，我们应该建立线上协作走查文档，支持设计、开发、测试、产品等项目成员共同管理和跟进走查进度，避免口头沟通造成的信息遗漏、沟通误差等扯皮事件。走查文档中包含对设计走查问题的分类、分级等，再根据影响程度、实现难度、资源配比等情况综合分析进行排期。

在走查过程中，设计师还需要给予充分的支持响应，必要时补充设计示意图或交互动效帮助开发同学理解，避免信息偏差导致再次调整。

建立健全的线上协作走查文档

③ 关注特殊情况

特殊场景在走查中常常被忽略，等上线后在现实中碰到缺失异常状态体验会大打折扣，所以完成主流程的走查后，一定要记得考虑到特殊场景，包括括网络异常、内容缺失、空状态等。同时还要看下不同机型适配的问题，保证不同机型的界面呈现效果一致，包括关键信息及操作是否超出屏幕，是否出现覆盖、拉伸等情况。

数据监测

功能上线后也不代表需求的完结，我们还要及时追踪数据的情况。数据的量化指标可以很好佐证我们方案的价值，也能帮助我们在错误道路上及时转向。我们可根据数据反映的情况及时调整对应的产品策略，促进我们设计上的修改、完善等工作。

4. 写在最后 所以设计能力再强，设计方案再好，没有后续良好的执行，也终究不过是废纸一张。一个优秀的项目落地是大家共同协作的结果。如果设计还原出了问题，首先要自查，确保自身工作做到位，提升设计输出质量，依照设计规范做设计，做到逻辑自洽。我们要做足前期的准备工作，尽可能的多思考、多沟通，打造专业的“人设”，不仅赢得开发同学的尊重也更方便自己顺利开展工作。

关于提升设计还原质量，这里只是抛砖引玉，如果大家有更好的工作方法，欢迎评论区留言交流～

欢迎关注「58UXD」的微信公众号：

编者按：终于到 PPT 版式设计 最后一期了！本期会带大家回顾之前14期的章节，同时分享科技风 PPT设计 的图形部分。

往期回顾：

PPT 超全自学指南（1）：明确目标+软件操作 历时一个月的精心制作，用轻量有趣的图文，帮你轻松自学 PPT 设计。

阅读文章 >

PPT 超全自学指南（2）：搜索能力和逻辑能力 历时一个月的精心制作，用轻量有趣的图文，帮你轻松自学 PPT 设计。

阅读文章 >

PPT 超全自学指南（3）：图示能力和设计审美 历时一个月的精心制作，用轻量有趣的图文，帮你轻松自学 PPT 设计。

阅读文章 >

PPT 超全自学指南（4）：深入发展和学习资源 历时一个月的精心制作，用轻量有趣的图文，帮你轻松自学 PPT 设计。

阅读文章 >

PPT 超全自学指南（5）：8个常见问题解答 历时一个月的精心制作，用轻量有趣的图文，帮你轻松自学 PPT 设计。

阅读文章 >

PPT 超全自学指南（6）：进击的版式之观察逻辑（上） 进击的版式简而言之就是分享一些我观察设计作品的方法，从整体到细节都会讲到。

阅读文章 >

PPT 超全自学指南（7）：进击的版式之观察逻辑（下） 进击的版式简而言之就是分享一些我观察设计作品的方法，从整体到细节都会讲到。

阅读文章 >

PPT超全自学指南（8）：进击的版式之封面页 进击的版式简而言之就是分享一些我观察设计作品的方法，从整体到细节都会讲到。

阅读文章 >

PPT超全自学指南（9）：进击的版式之目录页 进击的版式简而言之就是分享一些我观察设计作品的方法，从整体到细节都会讲到。

阅读文章 >

PPT超全自学指南（10）：进击的版式之关键词页面（上） 进击的版式简而言之就是分享一些我观察设计作品的方法，从整体到细节都会讲到。

阅读文章 >

PPT超全自学指南（11）：进击的版式之关键词页面（下） 进击的版式简而言之就是分享一些我观察设计作品的方法，从整体到细节都会讲到。

阅读文章 >

PPT超全自学指南（12）：进击的版式之时间轴页面和文字排版 进击的版式简而言之就是分享一些我观察设计作品的方法，从整体到细节都会讲到。

阅读文章 >

PPT超全自学指南（13）：进击的版式之人物介绍页面和图表处理 进击的版式简而言之就是分享一些我观察PPT设计作品的方法，从整体到细节都会讲到。

阅读文章 >

PPT超全自学指南（14）：进击的版式之Logo页处理和科技风拆解 进击的版式简而言之就是分享一些我观察PPT设计作品的方法，从整体到细节都会讲到。

阅读文章 >