一、前言Notion 是一款融合笔记（Notes）、任务（Tasks）、知识库（Wiki ）以及数据库（Database）的 all-in-one 生产力工具，产品主要服务于互联网群体。2022 年，Notion 的用户规模目前已经达到 3000 万，付费用户达到 400 万。国外用户常用一个公式形容 Notio...

一、前言 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 AI

2022 年 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字全方位深度拆解懂球帝APP 2022 卡塔尔世界杯已经拉开帷幕，相信大家从这周开始，都已经陷入四年一次的狂热的足球氛围中。

阅读文章 >

6000字拆解！花费10个亿，抖音如何设计世界杯专题？ 作为全球最火爆的体育赛事，世界杯由于其独有的稀缺性，被外界誉为四年一次的足球盛宴。

阅读文章 >

参考链接

Notion 官网： https://www.notion.so/ Notion 帮助文档： https://www.notion.so/help https://36kr.com/p/2025046266178056 注：部分图示取自 Notion 官网

感谢阅读，我是设计师波波 Bobby He，深耕 B 端体验设计，持续学习输出中，欢迎关注和交流～

大家好，这里是和你们聊设计的花生~今天为大家推荐一款可以将数码照片转为铅笔素描、水彩、油画、黑白线稿等多种插画效果的设计神器 FotoSketcher，它可以帮助我们快速将照片转换为更具有特色的风格化插图，让设计效果更出色 ~更多图片特效神器：27种特效一键生成！故障风生成神器Photomosh大家好，这里是和大...

大家好，这里是和你们聊设计的花生~

今天为大家推荐一款可以将数码照片转为铅笔素描、水彩、油画、黑白线稿等多种插画效果的 设计神器 FotoSketcher ，它可以帮助我们快速将照片转换为更具有特色的风格化插图，让设计效果更出色 ~

更多图片特效神器：

27种特效一键生成！故障风生成神器Photomosh 大家好，这里是和大家一起进步的南清音~ 亲爱的小伙伴们，你们在日常的设计中有没有需要用到故障艺术风格的素材呀？

阅读文章 >

FotoSketcher 官网直达： https://fotosketcher.com/

官方推特： https://twitter.com/fotosketcher （需搭梯子）

使用教程： http://fotosketcher.com/fotosketcher-help/

FotoSketcher 是一款 100%免费的图片特效处理软件，它可以在几秒钟内将摄影照片转化为各种绘画风格，包括铅笔素描、水彩、油画、钢笔画、抽象画、卡通等，共计 20 多种。

FotoSketcher 官网展示的转换效果图

官网的艺术画廊中展示每种风格应用后呈现的效果，我看了一下质量非常高。首先就是不同风格的特色都凸显出来了，比如油画的笔触、水彩的通透感和晕染效果、素描的排线等，然后就是照片内容转换后仍然是比较清晰精致的状态，画面元素清晰可识别，不会糊成一团。

油画风格转换效果：

水彩风格转换效果：

素描/黑白线稿效果：

FotoSketcher 并非在线工具，想要使用的话需要下载安装包，但软件大小只有 10M（macOS 版本的有 39M），用起来非常方便，而且作用真的非常强大。大家可以通过官网下载，本文末尾也有链接可以直接下载。

官方下载链接： http://fotosketcher.blogspot.com/2022/09/fotosketcher-400-alpha-1-available-for.html （本文末尾有打包好的安装包，可以直接下载）

软件的操作界面简单易懂，主要的功能为“绘图参数”，标志是一个调色盘。点击后会弹出一个参数修改窗口。可以修改内容包括风格、线条与笔触的样式、笔刷样式、色彩、对比度，精细度等，还可以添加纹理效果和文字。选择“风格”时，每个选项旁边会有一个小预览图，方便我们了解这种风格的效果。

所有的调整会实时呈现在右下角的预览图框内，当你觉得效果比较合适后，点击“绘制”可以将效果以应用到大图内，点击顶部工具栏第二个“保存”可以将生成效果保存到本地。调整的参数可以保存，方便下次加工图片时直接调用。

为了帮助用户调出更好的风格化效果，软件还内置有“图片裁剪”和“原图调整”功能。“原图调整”可以修改图片的亮度、对比度、饱和度，或对原图进行锐化及简化。比如我们要将照片处理成黑白线稿模式，将原图的对比度和锐度调高后生成效果肯定会更好。

以上就是为大家推荐的设计神器 FotoSketcher，可以一键帮我们将数码照片转换为油画、水彩、素描、黑白线稿等多种风格化插画，并且是免费使用的。喜欢本期推荐的话记得点赞收藏，也可以转发给身边有需要朋友 。如果你有关于本文或者设计的疑问，可以在评论区提出，我会第一时间为大家解答 ~

推荐阅读：

平面设计实战！如何分析运用图片素材？ 如果说设计师有一项技能是必须要学会的，那么对于图像的处理一定是一个离不开的话题。

阅读文章 >

超全整理！9个设计师必备的高质量图案背景素材网站 大家好，这里是和你们聊设计的花生~ 之前为大家推荐过5个纹理材质网站和5个科技感背景网站，今天继续为大家推荐9个高质量几何背景图案素材网站，它们包含了上千种丰富的图案样式，可以用作海报、网页、包装、PPT、壁纸设计等多个方面，下载便捷且都是免费可商用，一起来看看吧~ 1）more.

阅读文章 >

大家好，这里是和你们聊设计的花生~今天为大家推荐一款可以将数码照片转为铅笔素描、水彩、油画、黑白线稿等多种插画效果的设计神器 FotoSketcher，它可以帮助我们快速将照片转换为更具有特色的风格化插图，让设计效果更出色 ~更多图片特效神器：27种特效一键生成！故障风生成神器Photomosh大家好，这里是和大...

大家好，这里是和你们聊设计的花生~

今天为大家推荐一款可以将数码照片转为铅笔素描、水彩、油画、黑白线稿等多种插画效果的 设计神器 FotoSketcher ，它可以帮助我们快速将照片转换为更具有特色的风格化插图，让设计效果更出色 ~

更多图片特效神器：

27种特效一键生成！故障风生成神器Photomosh 大家好，这里是和大家一起进步的南清音~ 亲爱的小伙伴们，你们在日常的设计中有没有需要用到故障艺术风格的素材呀？

阅读文章 >

FotoSketcher 官网直达： https://fotosketcher.com/

官方推特： https://twitter.com/fotosketcher （需搭梯子）

使用教程： http://fotosketcher.com/fotosketcher-help/

FotoSketcher 是一款 100%免费的图片特效处理软件，它可以在几秒钟内将摄影照片转化为各种绘画风格，包括铅笔素描、水彩、油画、钢笔画、抽象画、卡通等，共计 20 多种。

FotoSketcher 官网展示的转换效果图

官网的艺术画廊中展示每种风格应用后呈现的效果，我看了一下质量非常高。首先就是不同风格的特色都凸显出来了，比如油画的笔触、水彩的通透感和晕染效果、素描的排线等，然后就是照片内容转换后仍然是比较清晰精致的状态，画面元素清晰可识别，不会糊成一团。

油画风格转换效果：

水彩风格转换效果：

素描/黑白线稿效果：

FotoSketcher 并非在线工具，想要使用的话需要下载安装包，但软件大小只有 10M（macOS 版本的有 39M），用起来非常方便，而且作用真的非常强大。大家可以通过官网下载，本文末尾也有链接可以直接下载。

官方下载链接： http://fotosketcher.blogspot.com/2022/09/fotosketcher-400-alpha-1-available-for.html （本文末尾有打包好的安装包，可以直接下载）

软件的操作界面简单易懂，主要的功能为“绘图参数”，标志是一个调色盘。点击后会弹出一个参数修改窗口。可以修改内容包括风格、线条与笔触的样式、笔刷样式、色彩、对比度，精细度等，还可以添加纹理效果和文字。选择“风格”时，每个选项旁边会有一个小预览图，方便我们了解这种风格的效果。

所有的调整会实时呈现在右下角的预览图框内，当你觉得效果比较合适后，点击“绘制”可以将效果以应用到大图内，点击顶部工具栏第二个“保存”可以将生成效果保存到本地。调整的参数可以保存，方便下次加工图片时直接调用。

为了帮助用户调出更好的风格化效果，软件还内置有“图片裁剪”和“原图调整”功能。“原图调整”可以修改图片的亮度、对比度、饱和度，或对原图进行锐化及简化。比如我们要将照片处理成黑白线稿模式，将原图的对比度和锐度调高后生成效果肯定会更好。

以上就是为大家推荐的设计神器 FotoSketcher，可以一键帮我们将数码照片转换为油画、水彩、素描、黑白线稿等多种风格化插画，并且是免费使用的。喜欢本期推荐的话记得点赞收藏，也可以转发给身边有需要朋友 。如果你有关于本文或者设计的疑问，可以在评论区提出，我会第一时间为大家解答 ~

推荐阅读：

平面设计实战！如何分析运用图片素材？ 如果说设计师有一项技能是必须要学会的，那么对于图像的处理一定是一个离不开的话题。

阅读文章 >

超全整理！9个设计师必备的高质量图案背景素材网站 大家好，这里是和你们聊设计的花生~ 之前为大家推荐过5个纹理材质网站和5个科技感背景网站，今天继续为大家推荐9个高质量几何背景图案素材网站，它们包含了上千种丰富的图案样式，可以用作海报、网页、包装、PPT、壁纸设计等多个方面，下载便捷且都是免费可商用，一起来看看吧~ 1）more.

阅读文章 >

hi，我是鱼先生，不止会设计的 90 后解忧大叔。设计画面平淡无味，是大多数设计师都会遇见的难点之一，那么今天跟着鱼先生一起来学习几个比较实用的版式技巧，希望可以给你带来一些提升。方法就是通过增加画面的维度，从而增加空间感，提高视觉的层次感。

hi，我是鱼先生，不止会设计的 90 后解忧大叔。

设计画面平淡无味，是大多数设计师都会遇见的难点之一，那么今天跟着鱼先生一起来学习几个比较实用的版式技巧，希望可以给你带来一些提升。

方法就是通过增加画面的维度，从而增加空间感，提高视觉的层次感。

更多提高画面冲击力的方法：

用超多案例，教你一招搞定海报设计视觉冲击力！ 强烈的视觉冲击力对于平面设计来说是一个很重要的品质，而关于如何加强画面的视觉冲击力，有一个方法简单又有效，即加强画面的空间感。

阅读文章 >

OK，开始吧！

形式 01：图形类 通过处理元素的前后关系，或者元素相互穿插的关系，从而增加画面的视觉层次感。

特别是打破大家常有意识形态的时候，效果会更好，比如上图案例中的相框，一般来讲相片不会出现在相框外，那么作为设计师，我们刻意把相框内的人物或元素进行破局处理，这个时候就等于让画面增加了一个视觉维度，原本平淡的画面就会显得更具备层次感。

我们继续看一些其他的案例视觉，加深理解：

形式 02：文字类 在以文字为主题的视觉画面中进行前后穿插，或借助某些元素进行前后关系的建立，让画面从一维到多维的变化，从而提高画面视觉效果。

形式 03：虚实结合 虚实结合就比较容易理解，利用前实后虚或前虚后实的方式，让画面产生前后延伸的空间感，就像在摄影里面的景深一样，从而刻意塑造出虚实有度的空间层次感。

形式 04：制造空间 利用文字的透视感，或者某些元素的透视感增加画面的空间感。

比如下面前两张案例，左边绿色这张就是利用文字的透视，让整个画面的空间感立马就出来了，再看右边案例中，利用圆环元素从远至近的塑造透视关系，也起到了视觉引导的作用，同时也是他们要走向的方向，其他文字则与圆环元素进行相互结合，也增加了画面的契合度。

形式 05：烘托气氛 利用光束的点缀烘托，直接的作用就是聚焦主体，产生强调的作用。

平面设计 是在一个平面上玩出各种花样的视觉艺术，以上的方法其实都是为了让画面在一维视觉上增加维度，从而塑造更好地视觉效果。

OK，理论看完了，我们在实战案例中加深理解一下。

实战演练 案例 01

① 我们来做一张画展海报，首先我们先选择了一张图片素材，放置在画面中。

② 把图片嵌入椭圆形内。

③ 把所需要的文案进行排版。

这个时候我们发现，当图片素材完全嵌入椭圆内的时候，整个画面视觉总感觉缺少了一点活跃的效果，发现问题，那我们继续优化。

④ 我们就把人物模特的一部分进行处理，造成破局的效果。

如下图画面所示：

⑤ 最后我们再次放上文案，得到以下案例：

这个时候我们仅仅只是调整了头巾的部分，因为头巾露出来之后，形成了圈里圈外的视觉层次感，增加了画面的活跃性。

最后我们看一下对比图：

案例 02

我们再来实践一张画册的案例。

常规情况下，设计师都会直接利用图片素材进行板块设计，如下图案例所示：

猛一看好像没有什么毛病，版面简洁，但我们仔细去观察的时候，就会感觉画面规规矩矩，缺少一些设计感。

没关系，跟着鱼先生继续来尝试调整，这一次我们把汽车进行抠图处理，然后左右两页的颜色进行分别填充，汽车跨越两个颜色之后，看上去就产生了跳跃的视觉性，前后和左右的维度都产生了变化，画面看起来就比原来饱满多了。

做到这一步对于大多数设计师来讲已经可以结束了，但是这里呢，我们可以再深入一个层次，因为我们可以明显看出来上面的案例画面还是有些太过于空洞。

这个时候我们可以把主体汽车这部分再进行优化，我们加入英文装饰，让整个画面再进行一个层次的加深。

完成后如下图所示：

这里如果想要继续优化细节，我们同样可以在汽车后面的文字上面下功夫，这里我利用模糊工具把文字局部进行模糊处理，形成了虚实结合的方式，让整个画面看上去更加的饱满。

完成后，我们一起看下对比图：

写在最后 在以上的两个案例中，仅仅通过添加一个维度的技巧，就让画面的视觉完全变得不一样了，是不是既简单又实用的方式呢？

设计不是一蹴而就，再小的技巧如果使用得当，都可以起到增加画面效果的作用，大家可以尝试起来了。

OK，今天的文章到这里结束了，大家加油！下期见！

欢迎关注作者 微信 公众号：「摆渡鱼生」

在互联网企业日常的项目需求中，插画经常会大量的运用在各类产品设计、产品运营、产品宣传中，但是传统的插画方式主要存在以下几个问题：不同岗位不同的设计师产出的插画风格不一致，质量参差不齐每次的设计插画需求都是从头开始绘制，插画的产出效率太低插画的风格不一致很难形成一致的品牌印象，品牌感太弱于是我们可以看到一些互联网团...

在互联网企业日常的项目需求中，插画经常会大量的运用在各类产品设计、产品运营、产品宣传中，但是传统的插画方式主要存在以下几个问题：

不同岗位不同的 设计师 产出的插画风格不一致，质量参差不齐 每次的设计插画需求都是从头开始绘制，插画的产出效率太低 插画的风格不一致很难形成一致的品牌印象，品牌感太弱

于是我们可以看到一些互联网团队已经走在了前面，通过构建系统的插画组件库来解决以上 3 个问题，对于设计师来说，插画组件库虽然已经不是什么特别新鲜的话题了，但是实际的执行过程中大部分设计师可能会遇到很多难题。那么，今天的飞凡指南就通过 3 个方面来深度解读下 插画组件库 的这个设计话题。

更多插画 组件库 干货：

保姆级教程！手把手教你做超实用的插画组件库（附组件库下载） 今天给大家带来的是如何建立设计师个人的插画组件库，因内容过长并知识点过多，请泡杯枸杞观看。

阅读文章 >

一、插画组件库的价值 1. 设计提效

当我们通过传统的流程去设计一个运营页面的时候，往往需要 2~3 天的时间，但是有了插画组件库，设计产出的效率基本上可以提升 1 倍以上，而节省出来的时间，设计师可以去考虑更有价值的事情

2. 统一风格

整套的插画组件库，在构建的时候，对风格、色彩、人物、元素、背景都有着统一的规范，在面对不同设计能力设计师的时候，都能够较大程度上保证风格统一和插画的产出质量

3. 提升品牌感

插画组件库在构建之初就要考虑和产品调性、品牌调性的一致性，这样在传播的过程中才更能在用户心中形成一致的品牌形象，提升品牌感

二、插画组件库需要考虑 4 个方面的问题 当我们在构建插画库的时候，以下 4 个问题是我们需要重点考虑的：如何凸显产品属性；如何体现品牌调性；如何满足用户场景；如何打造差异化的风格

凸显产品属性：插画的最终目的是辅助文字去传递产品信息，我们需要直观的向我们的用户告诉我们是干什么的，而避免用户做过多的思考；

如何体现品牌调性：和消费品一样，品牌是用户考虑的一个非常重要的因素，插画是传递信息和塑造品牌调性一个非常重要的渠道，所以插画库应该考虑如何能够对我们的品牌调性或产品调性进行补充

如何满足用户场景：在考虑插画的元素构成的时候，我们也需要把用户考虑进来，他们使用产品的时候是哪些场景，再基于用户的场景去设计我们的插画组件元素，这样在实际应用插画库的时候才能够尽可能涵盖传播的场景

如何打造差异化的风格：我们可以看到各大互联网产品的插画风格都基本上非常雷同，很难有明显的插画风格特征，这样的结果就是用户很难记住你，所以对于插画差异性的考虑也是一个很重要的点

三、插画组件库构建的 3 个步骤 对于设计师来说，最重要的还是如何将插画组件库落地了，总结下来可以分为 3 个步骤：插画风格推导、插画组件库搭建、插画组件库应用

1. 插画风格推导 插画风格我们主要可以从 3 个方面去推导：品牌、用户、产品

① 品牌

我们需要了解的是品牌的调性、色彩、辅助图形、logo 特征、品牌资产...，这些都是我们构建品牌插画库的基础参照。比如下面这张图是梳理的出来的 fashion data 的品牌相关元素：

② 用户&产品

了解我们的用户和产品，我们可以用以下这个电梯宣言的方法去梳理：

关于用户：为了满足「目标用户」，他们的「什么痛点或需求」

关于产品：我们的「产品名称」，是一个「怎么样的产品类型」；它可以「关键优点，通过什么样的功能，为用户带来什么样的价值」；而不像「市场上某竞品及其特点」；我们的产品是一个「主要独特价值点」

比如，下面这张图是对 fashion data 的用户和产品进行的梳理，去快速的了解用户的需求痛点、产品定位、产品价值...

了解完品牌、产品、用户之后就要推导出插画库的风格方向了。

在讨论 fashion data 的插画风格选定的时候，其他几组插画在风格上差异性和个性表达上虽然会比较强，但是和 B 端产品的定位差异比较大，最后还是选定了普通的矢量风格插画风格，它能比较好的像用户传递出 B 端产品的高效、专业、严谨的品牌形象，后期差异化主要是通过融入品牌元素和塑造插画角色这 2 个手段来体现。

2. 插画组件库搭建 插画组件库的搭建，可复用性是我们考虑的重点，要达到这个目标，我们构建分子的时候就应该尽可能的把插画拆分成比较细的分子，比如头部我们可以拆分成不同角度的基础头型、发型、表情...

① 角色组件

定义角色基础的形体比例、肢体细节

形体比例、肢体细节基本上就能够确定我们的角色是何种特点，比如，我们常见的互联网扁平插画风格就和我们的正常人物比例、肢体细节比较接近一些，但是一些欧美的插画风格经常会用很夸张的比例造型来塑造个性的角色，比如头特别小，肢体特别大。

还有不同人物的比例也会有所不一样，比如男性女性的黄金比例是 9a（九头身），小孩的比例大大约是 4a，但这不是固定不变的，还要看具体的插画风格。

为角色搭建灵活的骨骼系统

构建组件库，我们自然是希望我们的插画能够和人的骨骼一样，能够灵活的做出各种动作，这就要借助于灵活的骨骼系统了，通常情况下我们可以将我们的人体骨骼拆分成以下的组织。

在组织的连接处，我们尽量都能够采用正圆形，这样在变换动作的时候才能够更好的衔接上，大家可以看看传统的皮影人偶也是采用的这种连接方式，才能在舞台上作出灵活的动作。

建立不同角度下的表情、动作、服饰等组件

人物的应用场景不仅仅只有正面的角度，还有其他的角度，我们一般只需要设计正面、半侧、正侧这 3 个角度即可，在这 3 个角度我们需要构建不同的表情、动作、服饰...尽可能满足角色在不同场景的使用需求。

② 通用组件

通用组件我们一般基于用户场景来制定。比如下面的这个案例，fashion data 是一个高效的跨境电商数据管理平台，主要针对店铺运营人员，为他们提供快速管理店铺商品、直观查看店铺经营数据等服务，所以用户的场景主要办公场景和业务场景，办公场景的元素有比如：书桌、电脑、办公用品...；业务场景的元素有，比如：仓储、物流、数据、商品... ，最后我们再基于这些元素去制定通用的组件。

③ 背景组件

背景组件一共可以分为 2 种类型，场景背景和纹理背景。场景背景一般是基于某个特定的场景来制定的，用来交代画面所处的环境，比如室内背景、白天、黑夜、晴天...

纹理背景一般是用来装饰和丰富背景，比如下面的插画，加了背景纹理插画明显层次和画面更加丰富了。

3. 插画组件库应用 搭建完组件库之后，就可以在产品运营、线下物料、产品界面使用它们来提升设计的效率了。当然随着业务不断的变化和用户场景的变化，我们的插画组件库也应该及时的扩容和优化。

写在最后 需要提醒的是，插画组件库的目标是帮助那些重复、且设计质量要求不高的设计需求提效，而设计难度较高的设计需求还是需要设计师来处理，而这才是设计师能够真正体现价值的地方，同时，把时间节省出来，设计师才有精力去思考更多更有价值的事情。

2023年，让这20款AI工具帮你更高效的完成工作~大家好，这里是和你们聊设计的花生~2022年是AI技术大发展的一年，我都快记不清为大家推荐多少种AI工具了。正好年底，我重新翻了一遍自己的AI收藏夹，从中整理出20款免费且实用的AI工具推荐给大家，无论是做设计还是日常学习工作都能用得到。2023年已经开始，就让...

2023年，让这20款AI工具帮你更高效的完成工作~

大家好，这里是和你们聊设计的花生~

2022年是AI技术大发展的一年，我都快记不清为大家推荐多少种AI工具了。正好年底，我重新翻了一遍自己的AI收藏夹，从中整理出20款免费且实用的AI工具推荐给大家，无论是做设计还是日常学习工作都能用得到。2023年已经开始，就让这些AI工具给我们的生产效率来一次新升级！

1）AI聊天机器人 如果要说一个2022年底最受关注的AI工具，无疑就是OpenAI公司推出的聊天机器人chatGPT。它通过模拟人类对话的方式与用户进行互动，用文字回答各种用户提出的问题，甚至可以帮用户写工作报告、写小说、写游戏大纲甚至写代码，连马斯克用过之后都直呼“可怕”。AI聊天机器人筛选、组织及整合信息的能力给我们的信息获取方式带来革命性的改变，甚至可以充当智能个人助理，协助我们处理生活中各方面的问题。

了解chatGPT的详细信息：

地表最强AI聊天机器人ChatGPT诞生！会给设计师带来哪些影响？ 大家好，这里是和你们聊设计的花生~ 前几天刚和大家聊过 AI 绘画工具 Midjourney 的 V4 模型，感叹它图像生成质量之高。

阅读文章 >

ChatGPT虽然强大但也局限性，比较明显的一点就是它没有联网，所用的数据集都是2021年之前的。不过在ChatGPT发布之后，不少类似的产品纷纷涌现，其中比较出色的有Youchat。

Youchat网址直达： https://you.com/ （需要搭梯子）

与ChatGPT相比，Youchat在形式上更像一个搜索引擎，没有繁杂的注册流程，搭上梯子就可以使用，而且是联网状态，这意味着它可以实时从互联网获取信息并反馈给用户。

Youchat与用户聊天的界面

它不仅能像ChatGPT一样与人对话交流，也能像Google一样呈现与问题相关的资料——这些资料是经过智能筛选的、与问题最直接相关的资讯、图片和视频等，能极大程度的提升我们或许信息的速度和效率。但目前Youchat与ChatGPT一样也存在同样致命的问题：不能保证答案是100%正确，并且可能编造看似正确的答案，所以大家使用时仍要保持警惕。

经过Youchat筛选后呈现的内容

2）AI翻译工具 Deepl： https://www.deepl.com/translator （搭梯子速度更快）

腾讯交互翻译Transmart： https://transmart.qq.com/zh-CN/index

翻译软件是我们在生活和学习中不可缺少的工具，如果要向大家推荐一款我觉得最好的翻译软件，无疑就是Deepl了，它依托神经网络和最前沿的人工智能创新技术的支持，能轻松翻译出逻辑通畅、语句自然的结果，甚至能用上俗语和专业术语，翻译文本越长效果越好。

腾讯也出了一款交互翻译软件Tencent Transmart，融合了腾讯人工智能实验室自研的交互式机器翻译、神经网络机器翻译、 统计机器翻译、语义理解、信息检索等技术，可以参照原文上下文和机器翻译知识，实现精准组词，加快人工翻译过程中的输入效率。Tencent Transmart还有一个好处就是支持大型文件的免费翻译，如docx、PDF和PPT都可以直接上传，最大支持300页和40MB的文件。

3）AI文案工具 WantQuotes 据意查句： https://wantquotes.net/

WantWords 反向词典： https://wantwords.net/

详细介绍： https://www.uisdc.com/wantquotes

这2款是清华大学研究团队出品的文案处理工具，利用最前沿的人工智能（AI）和自然语言处理（NLP）技术，帮助人们更方便快捷地处理阅读、写作、查找信息等流程。WantQuotes（据意查句）可以按照我们想要的意思快速查找出相关的名言、诗句、俗语等 ；WantWord（反向词典）可以帮助我们轻松找到与给出词语相似且更高级的词汇，还支持中英双语同译和互译。

4）AI录音工具 网页直达： https://podcast.adobe.com/enhance?utm_source=FutureTools.io （需登录账号后使用）

Adobe新出一款人工智能录音处理工具，如果你在录制好音频后发现有很多环境杂音，使用这个工具可以快速清除背景杂音，并增强人声的清晰度，呈现出犹如在专业录音棚里录制出的效果。网站免费使用，仅支持MP3 和 WAV 文件，单次可处理时长在1小时以内小于1GB的文件。

5）AI配色工具 网站直达： https://huemint.com/brand-intersection/

详细介绍： https://www.uisdc.com/huemint

Huemint是一个内置了AI色彩模型的配色网站，里面的「creativity」调节滑块可以控制配色方案的对比度。默认为 1.3，数值越大，配色就越活跃，对比也越明显，反之生成的色彩会越趋于相似和平缓。它其特点包括：

支持生成等阶色、渐变色和 2~11 颜色的配色方案，无需注册，在线免费使用。 使用 AI 模型智能生成和谐的配色，且可以人为控制配色倾向和色彩对比度。 配色效果可视化，实时呈现在 UI、VI、文图排版、插画等模板上，直观明了。

6）AI图片处理工具 2022年为大家推荐最多的就是各种AI图片处理工具，人工智能技术的发展让原本繁琐的抠图、修图变得轻松，甚至能帮我们实现照片打光、黑白图片上色和无损放大。身为 设计师 ，利用好这些工具可以让我们的工作是事半功倍~

① 智能抠图

Pixian： https://pixian.ai/?ref=theresanaiforthat

EXPERTE： https://www.experte.com/background-remover

Toolkit： https://toolkit.boolv.tech/background-remover

以上3款都是免费的在线抠图工具，打开即用无需注册，从上传到抠图完成只需几秒。扣图的质量非常高，处理头发这样复杂的对象也有不错的效果，上传下载图片不会出现压缩的情况，可以放心使用。

Toolkit的抠图效果

② 智能修图

Hama： https://www.hama.app/

Magic eraser： https://magicstudio.com/magiceraser （下载有限制）

以上2款是在线免费修图工具，借助AI将图片不需要的某些元素完美消除，并通过算法自动修补残缺的部分，达到毫无修补痕迹的效果。第二个工具Magic eraser的修补效果非常惊人，但是不开通会员的话智能下载600*600px的低分辨率效果图，大家可以按自己的需要使用。

③ 无损放大

Bigjgp： https://bigjpg.com/

waifu2x： https://waifu2x.udp.jp/index.zh-CN.html

Imgupscaler： https://imgupscaler.com/#

上面的这三款工具都是效果非常棒的图片无损放大工具，利用人工智能技术可以将图片清晰度提升为原来的2倍甚至4倍，并实现降噪，无论是对摄影照片还是二次元绘画都有很好的效果。

④ 智能打光

网址直达： https://clipdrop.co/relight

详细介绍： https://www.uisdc.com/relight

Relight 是一个在线智能打光网站，使用它可以对照片添加光源，当光源移动的时候，人物身体上的亮部及投影也随之发生改变，仿佛是真实灯光照在立体模型。而除了照亮图片主体，Relight 还能实现改变图片整体布光、添加多个光源、修改灯光的颜色等效果。

⑤ 黑白图片上色

网址直达： https://palette.fm/ 详细介绍： https://www.uisdc.com/palette-fm

Palette.fm 是一个利用 AI 模型为黑白图像上色的在线图片处理网站，无需登录注册。将一张照片上传后，只要 10 秒左右的时间，网站就能提供一个基本的着色版本。除此之外，Palette.fm 还有另外 19 种不同的色彩滤镜，每一种都会生成不同的上色效果。

7）AI图像生成工具 2022年是AI图像生成工具的爆发之年，从Disco Diffusion、Dall·E 2、Midjourney再到Stable Diffusion，AI图像生成工具的技术进步及发展速度惊人，但随之而来的人类艺术家与AI工具之间的冲突也日益尖锐。特别是前段时间Artstation上艺术家们集体掀起了一次首页刷屏活动，旨在反对AI模型未经允许盗用艺术家作品进行数据集训练的行为。

在Artstation首页刷屏的反AI图标

现在大家对AI图像生成工具的态度也很割裂，一方面是认为它将为艺术创作和创意生成带来变革性的进步，而且也已经有人将AI图像生成工具加入工作流；另一方面则认为它会极大侵犯人类艺术家的生存空间，并对未来的版权问题及带来毁灭性打击。但无论如何，大家都无法否认未来AI图像生成工具肯定会持续发展，并进一步参与人类的艺术创意活动汇中。

对普通的设计师或插画师来说这种影响或许还不太明显，但对这一无法阻止的新技术趋势有基本的了解还是非常有必要的：

① 设计师必须了解几款AI图像生成工具：Disco Diffusion、 Dall·E 2、Midjourney、Stable Diffusion的介绍及其使用方法：

人工智能快速出图！盘点 4 款人气超高的 AI 绘画神器 大家好，我是和你们聊设计的花生~ 有关注 AI 绘画领域的小伙伴可能注意到，国内已经出现了能直接使用中文提示词生成 AI 图像的工具了，这就进一步降低了我们进入 AI 绘画世界的门槛，对设计师和创意工作者来说无疑是好消息。

阅读文章 >

手残党也能成为艺术家！4个热门AI绘画平台的创作经验总结 AI画画，无疑是当下最火热的话题之一。

阅读文章 >

② 适合入门尝试的2款AI图像生成工具：Dream Stuidio和 Dreamlike-Art

免费开放！人人都能轻松上手的AI绘画工具DreamStudio 大家好，我是和你们聊设计的花生~ 之前为大家介绍了初代 AI 图像生成器 Disco Difussion、Dall·E 2、Midjounery，国产 AI 图像生成器 Tiamat，以及 4 款由谷歌、微软等大厂推出的 AI 图像生成器 Imagen、Parti、Make-A-Sce

阅读文章 >

效果惊人！内置5种模型的AI图像生成神器「Dreamlike.art」 大家好，这里是和你们聊设计的花生~ 之前为大家推荐了一款上手非常容易的 AI 图像生成工具 Dream Studio，它操作界面简单易懂，非常适合刚接触 AI 图像生成工具的新手。

阅读文章 >

以上就是为今天大家推荐的 20个实用的人工智能工具，希望在新的一年里能给各位设计师的工作和生活带来帮助。 喜欢本期推荐的话记得点赞收藏，也可以转发给身边有需要朋友 。如果你有关于本文或者设计的疑问，可以在评论区提出，我会第一时间为大家解答 ~

导语不论是对 iOS 还是 Android 系统的 App 而言，获取用户权限都是极其重要的，但数据表明用户在面临授权请求时会非常谨慎地判断。那作为设计师，我们如何通过用户体验设计影响用户的 App 授权行为，以提高用户的授权可能性呢？授权相关设计细节分析：简单的微信授权登录，没想到设计细节如此惊艳！

导语

不论是对 iOS 还是 Android 系统的 App 而言，获取用户权限都是极其重要的，但数据表明用户在面临授权请求时会非常谨慎地判断。那作为设计师，我们如何通过用户 体验设计 影响用户的 App 授权行为，以提高用户的授权可能性呢？

授权相关设计细节分析：

简单的微信授权登录，没想到设计细节如此惊艳！ 现在很多网站产品和 APP 产品都不再固执地建立自己的用户账户体系，而是使用了微信授权登录的方式来降低获取新用户的门槛，这一方式对产品方和用户来说都有很多好处，例如让注册时操作成本更低，用户也不需要记录各个平台的不同账号等等，但是这种登录方式也带来了一些隐私方面的问题。

阅读文章 >

一、背景介绍 相信大家都遇到过这个令人头疼的场景，当我们下载一个新的 App 并尝试使用时，扑面而来的是接二连三的授权弹窗，请求我们给 App 授予各种权限。若我们不授予权限，很多功能都无法正常使用。这是因为不论是 iOS 系统还是 Android 系统，手机系统厂商都设计了一套授权机制。手机系统厂商之所以设计授权机制，是出于两方面的考虑：

一方面是为了符合隐私法规的要求，保护用户的信息及隐私。例如我国于 2021 年 11 月 1 日起正式施行的《个人信息保护法》中规定“App 不应以非正当合理的方式强迫捆绑和收集用户个人信息，如因用户不同意收集非必要个人信息或打开非必要权限，App 拒绝提供业务功能“。

另一方面是出于用户体验的考量，例如 iOS10 以后的系统都会在用户使用 App 前询问用户 “是否允许使用移动数据”，这一定程度上避免了用户的数据流量被无端消耗。

但是 App 想要顺利地拿到用户权限并没有那么容易。根据 2020 年国家网络安全宣传周组委会回收的 32 万份“App 安全意识保护公众调查问卷“结果显示，88.5%的受访者对于 App 申请手机权限会进行理性分析，谨慎授予权限。当 App 无法顺利地拿到用户的权限，则可能无法给用户提供优质的使用体验；用户使用体验的不佳最终会导致用户的流失。但是 App 的 授权设计 被很多产品开发及设计师忽略，很多 App 在用户首次使用时就连续弹出 n 个授权弹窗，这很有可能让用户在 3s 内放弃这个 App。

因此如何通过用户体验设计提高用户对 app 进行授权的可能性，对于一款 App 来说，是极其重要的。不同的手机系统有不同的授权流程，本文的研究范围将集中在市场占有率最高的 iOS 系统和 Android 系统上。下文会先介绍 App 授权的基本信息，然后再介绍如何为一款 App 设计优秀的授权体验，提高用户的授权可能性。

二、App 授权基本信息 1. 权限列表

在 iOS 系统和 Android 系统中，需要用户授予的权限是具有一定差异性的，详细的权限列表见图 1。

iOS 系统将权限分为用户隐私权限和系统权限，这两类权限都需要用户授权。两者的区别体现在授权弹窗上：用户隐私权限允许 App 开发者在弹窗中添加简短的自定义提示语；而系统权限不允许 App 开发者添加自定义提示语，只能使用系统固定的提示语。常见的用户隐私权限主要包括定位服务、通讯录、日历、照片、蓝牙共享、麦克风、语音识别、相机等，而系统权限主要包括无线网络与蜂窝、通知、VPN、键盘。

Android 系统将权限分为危险权限和普通权限，其中危险权限需要用户授权，而普通权限不需要用户授权。常见的危险权限包括：定位服务、通讯录、日历、麦克风、相机、存储。在 iOS 系统中经常需要用户授权的无线网络与蜂窝、通知、照片权限在 Android 系统中属于普通权限，不需要用户授权。

2. 授权流程&授权弹窗

那 iOS 系统和 Android 系统的这些权限都是如何让用户进行授权的呢？两个系统分别设计了一套授权流程让用户进行授权操作，用户只需要在用于授权的模态弹窗上点击一下就可以选择是否授权，这样简化了用户的授权步骤。若用户同意授权，则可以正常使用相关功能；若用户拒绝授权，则无法正常使用相关功能。

下图呈现了 iOS 和 Android 系统授权弹窗的基本样式，主要包含授权标题、授权提示语、和授权操作按钮。

两个系统的授权弹窗差异主要体现在授权弹窗提示语和授权弹窗弹出次数两个方面：

在授权弹窗提示语方面，iOS 用户隐私权限的授权弹窗是允许 App 开发者在弹窗中添加简短的自定义提示语，但是 iOS 的系统权限授权弹窗和 Android 的授权弹窗都不可以自定义提示语。

授权弹窗弹出次数与用户拒绝授权后的流程相关。iOS 系统的授权弹窗只会出现一次，若用户第一次没有同意授权，则用户只能在系统设置模块自行打开权限开关。而 Android 系统的授权弹窗只要用户未勾选“不再询问”就可以反复出现，若用户第一次没有同意授权，则下一次进入该场景时，App 依然会弹出系统授权弹窗请求用户授权。

3. 预授权（pre-permission）

正如上文提及的，由于 iOS 系统的授权弹窗只会出现一次，若用户第一次没有同意授权，则下次只能在系统设置界面自行打开权限开关。尽管从 iOS 8 开始，App 已经可以在界面中将用户直接引导到系统设置界面进行授权，但操作成本依然很高。此外，由于 iOS 系统的用户隐私授权弹窗只能添加简短的提示语，iOS 的系统权限的授权弹窗和 Android 的授权弹窗不可以自定义提示语，有些用户很难理解为什么需要授权。为了解决拒绝后再次授权操作成本高和用户理解成本高这两个问题，出现了预授权（pre-permission）的概念。

预授权是先弹出自定义的授权界面，让用户做出选择。如果用户同意，则弹出系统授权弹窗；如果用户不同意，则不弹出系统授权弹窗。虽然对于用户来说，在体验路径上多了一个步骤，但是给用户多保留了一次通过系统授权弹窗进行授权的机会，相当于降低了用户的试错成本。关于哪些权限适合设计预授权，下文会进行分析阐述。

三、App 授权设计 那在了解了 App 授权基本信息后，我们该如何为一款 App 设计好的授权体验，提高用户的授权可能性呢？在这里可以运用 material design 授权模型和 CREATE 行为漏斗模型进行授权设计。

1. 第一步：确定 App 在 IOS 和 Android 系统上分别需要哪些权限

首先，产品经理和技术人员需要罗列出 App 在 iOS 系统和 Android 系统中哪些权限需要用户授予。在这一步要遵循的原则是：不要向用户获取非必要的权限。

2. 第二步：利用 Material Design 的授权模型对权限进行分类，设定授权时机并判断是否需要预授权

在明确了要向用户获取什么权限后，设计师可以利用 material design 中的授权模型对权限进行分类，设定每个权限请求的时机，并判断是否需要预授权教育。

谷歌的 material design 设计规范是从两个维度考虑授权设计：权限重要性和权限明确度，基于这两个维度将授权场景分为了四类。虽然这是 Android 系统的授权模型，但同样适用于 IOS 系统。

① 预先请求授权（Ask up-front）

重要性高且容易理解的权限可以在用户第一次打开 App 时就请求授权，因为如果用户能轻松理解该权限的使用目的和重要性，那么预先通过系统授权弹窗上进行授权对用户而言是最快捷的授权方式。

例如 iOS 的无线网络和蜂窝数据权限就属于该类别，因为用户知道若不授予权限，无法正常使用很多功能。定位权限在打车 App 中也属于该类别，因为打车前定位是用户的共识，所以打车 App 可以预先请求用户授予定位权限。

但是对于有些权限而言，在用户第一次打开 App 时就请求授权是很容易被拒绝的，如：通知权限。因为用户对应用的信任感在一开始是最低的，而且在一开始缺乏使用场景，用户并不清楚权限的使用目的。

② 在使用场景中请求授权（Ask in context）

用户容易理解但重要程度不是非常高的权限适合在使用场景中直接向用户请求授权，如通讯录、麦克风、相机权限。因为在使用场景中请求授权时，用户对权限的使用目的有预期，同意授权的可能性更高。例如：在需要上传图片的场景中，请求用户的相册权限，用户一般都愿意授予。

③ 预先教育后请求授权（Educate up-front）

重要但不容易理解的权限可以在用户第一次打开 App 时，对用户进行教育后再请求授权，如：通知权限和通讯录权限，它们都属于用户敏感权限。如果通知权限和通讯录权限对一款 App 而言非常重要，建议设计师可以设计预授权页面对用户进行教育，再请求用户进行授权。

④ 在使用场景中先教育再请求授权（Educate in context）

重要程度不算高而且用户不容易理解的权限适合在在使用场景中先教育用户再请求，例如：非通讯软件的通知权限，因为用户开启通知权限时会顾虑有消息干扰。

那需要教育的这两类权限该用什么方式教育呢？由于系统授权弹窗的自定义提示语有字数限制，所以可以使用预授权的方式进行教育。使用预授权方式进行教育的权限主要有以下特征：

用户觉得可能会被打扰的权限，如：通知权限； 用户觉得很涉及隐私的权限，如：通讯录权限、定位权限； 若设计师希望对某些权限进行详细的说明，也开始采用预授权的方式进行教育，例如：相机、麦克风等权限。 总的来说，授权时机可以分为两类：第一次打开 App 时授权、在使用场景中授权。从是否需要教育的维度来看，分为直接通过系统授权框授权、通过预授权的方式先教育再授权。但是同一个权限在不同的 App 中可能会属于不同的区间，所以设计师在分类时，需要根据 App 的功能特点具体考虑。

3. 第三步：着眼于单个权限，基于 CREATE 行为漏斗模型设计预授权弹窗和系统授权弹窗

那在确定了合适的授权时机和是否需要预授权之后，设计师要把注意力放在单个权限的授权弹窗设计上。想要成功地说服用户授权，那设计师应着眼于人们产生授权行为的心理动机，从用户心理出发进行设计，让设计影响用户的行为。这里可以运用到一个模型----CREATE 行为漏斗模型，用来挖掘用户同意授权的整个心路历程。

① 什么是 CREATE 行为漏斗模型（CREATE Action Funnel）

CREATE 行为漏斗模型是 Stephen Wendel 博士在《Designing for Behavior Change: Applying Psychology and Behavioral Economics》一书提出的概念。这个模型展示的是人们决定做出某种行为所经历的路径，从接收提醒（Cue）到第一反应（Reaction）到分析评估（Evaluation）到检查能力（Ability Check）到判断时间压力（Time Pressure），最终决定是否采取行动（Experience）。

② 运用 CREATE 行为漏斗模型设计

CREATE 行为漏斗模型在用户授权行为上的运用如下：

Cue：屏幕上弹出授权弹窗，用户接收到授权提醒 Reaction：用户会凭直觉做出反应，在瞬间决定是否授予权限 Evaluation：用户会有意识地评估授予权限的利弊 Ability Check：用户会评估自己是否有能力完成授权操作 Time Pressure：用户会判断授权是否紧急，是该立即授权还是可以稍后授权 如果我们想通过设计达到说服用户授权的目的，那我们需要减少用户在行为漏斗的每个阶段所遇到的阻碍，在每个阶段推动用户授权。下文会从预授权弹窗的设计和系统授权弹窗的设计两个方面分别阐述。

预授权界面的设计

阶段一：用户接收提醒（Cue）

首先，在用户接收到授权提醒时，要让用户明确地感知到 App 在请求用户授权，这样才会开始后续的思考。那如何设计预授权弹窗才能让用户有强烈的感知呢？

强化提示的力度，并移除容易让用户分心的元素：（1）在视觉上采用容易吸引用户注意力的色彩、字体、插图等；（2）全屏形式会比半屏或弹窗形式的提醒更明显，同时可以降低多余元素带来的信息噪音，让用户聚焦授权提醒上； 用清晰的文字提示用户 App 想要请求授权。

阶段二：用户做出第一反应（Reaction）

当用户看见授权提醒的瞬间，直觉会告诉用户想不想授权。而用户的直觉取决于该任务是否让用户感到愉快或让用户觉得重要。

设计的界面要引发用户正向的感受，让用户觉得授予权限是正确的选择。 提示语要措辞清晰且语气诚恳，避免用户的习惯性拒绝。 阶段三：用户分析评估（Evaluation）

在用户在做出直觉判断后，会有意识地分析授权的利弊。那在该阶段，授权弹窗要让用户明白同意授权更有利。例如，若用户得知授予通讯录权限后才可以添加通讯录的朋友，他们同意授权的可能性较大。那设计如何该影响该阶段呢？

通过提示语强调同意授权的好处，说明拒绝授权的后果，例如提示语中可以说明“App 要获取这个权限的目的是什么，如果拒绝授权的后果是什么”。 通过提示语打消用户的顾虑。例如关于通知的预授权弹窗中可以明确说明：开启通知后不会打扰用户。 提示语可以通过社会认可强化用户的信任度，例如表示很多人都同意授权。 在界面上限制操作选项的数量，避免提供过多的选项干扰用户的分析。 阶段四：用户检查能力（Ability Check）

如果用户评估后发现同意授权更有利后，他们会想了解如何操作才能授权，要克服多少阻碍。那此时该如何设计呢？

授权界面需要明确地告知用户该如何授权，例如通过清晰的提示语、插画，或播放一小段简单的动画，展示如何授权。 授权界面上要降低授权操作的难度，例如将同意授权的按钮设置为默认按钮，放在用户容易触达的位置。 尽量让授权操作与系统授权弹窗的操作一致，例如系统授权弹窗上的“同意”一般居右，预授权界面上也可以采用一致的按钮设计。 阶段五：判断时间压力（Time Pressure）

在用户明确了授权对自己有利而且自己有授权的能力后，用户会判断授权任务是否紧迫。那在设计上，我们可以利用人们的损失规避心理。

通过提示语告知用户选择稍后授权需要付出更多的精力，操作会更繁琐。 通过提示语告知用户立即授权的好处更多。 预授权界面的设计原则总结：

1. 采用全屏的设计形式会比半屏或弹窗形式的提醒更明显，降低多余元素带来的信息噪音，让用户聚焦于授权提醒

2. 在视觉上采用容易吸引用户注意力的色彩、字号、插图等强化提示力度

3. 请求授权的提示语文案需要清晰、语气诚恳，结构可以如下：（1）App 要获取这个权限的目的是什么；（2）拒绝授权的后果是什么，如：无法使用功能；（3）打消用户顾虑，如：请求通讯录权限时说明不会侵犯隐私，用户可以随时关闭；请求通知权限时说明我们不会打扰用户；（4）强调立即授权比稍后授权更有好处，例如：稍后授权会付出更多精力

4. 降低授权操作的难度：（1）在界面上限制操作按钮的数量（2）尽量让授权操作与系统授权弹窗的操作一致，例如：将同意授权的按钮设置为默认按钮，放在用户容易触达的位置，如左右布局的右侧，或者上下布局的上方。

5. 利用插画、动画、或简单文字明确告知用户授权的操作方式

6. 利用插画、文字等强化用户的信任度，表示很多人都同意授权

系统授权弹窗的设计

IOS 和 Android 的系统授权弹窗并不允许用户进行过多的设计，只有 IOS 用户隐私权限的授权弹窗允许在弹窗中添加简短的自定义提示语，弹窗的样式并不能做太多设计。设计师能影响的主要是 CREATE 行为漏斗的分析评估阶段（Evaluation）。

考虑到提示语的字数限制，系统弹窗的提示语结构可以设计为：说明授权好处或者说明拒绝授权的后果，例如：如果不授予权限，您将不能使用什么功能。涉及到有些用户比较敏感的权限（如定位权限、通讯录权限），可以在授权弹窗中说明权限的使用目的后，再添加打消用户顾虑的语句，如下图中写的“App 彻底关闭时不会收集您的位置信息”。

4. 第四步: 设计授权被拒绝后的交互流程

即便设计师按照上述方式进行了授权设计，提高了用户的授权可能性，但依然会出现用户拒绝授权的情况。那我们如何设计用户拒绝授权后的交互流程，以改善用户稍后授权的交互体验呢？

① 预授权被拒

若用户在预授权界面拒绝授权，并不会触发系统授权弹窗的流程。当用户再次进入使用场景时，可以重新出现预授权界面，让用户决定是否授权。或者在权限的相关使用场景中设计文字提醒，提示用户进行授权。

② 系统授权弹窗被拒

iOS 系统的系统授权弹窗被拒

如果用户在 iOS 系统授权弹窗中拒绝授权，系统授权弹窗不会再次出现。但设计师可以在用户点击“拒绝授权”后设计明显的“未开启授权”的提示，提示用户若想使用相关功能就得打开该权限，并给用户提供一个设置权限的按钮。用户点击该按钮后，可以快速跳转到设置模块的授权页面，减少用户的操作步骤。未授权提示的样式可以设计为弹窗，也可以设计为全屏。若权限重要性高，那可以将提示设计为全屏，强化用户的感知。

下图展示了腾讯视频的案例：当用户拒绝网络权限后，下次进入 App 时，会弹出未授权网络权限的弹窗，并在弹窗中提供了快速跳转设置权限的按钮。

Android 系统的系统授权弹窗被拒

由于 Android 系统的授权弹窗只要用户未勾选“不再询问”就可以反复出现，若用户第一次没有同意授权，只需要在用户拒绝授权后，弹出一个轻量级弹窗提示用户未开启授权即可。用户下一次进入该场景时，App 依然会弹出授权弹窗请求用户授权。

总结 总的来说，不论是对 iOS 还是 Android 系统的 App 而言，获取用户权限都是极其重要的，但是数据表明用户在面临授权请求时会非常谨慎地判断。因此，通过提高用户体验设计提高用户的 App 授权可能性是非常有必要研究的方向。虽然 iOS 系统和 Android 系统的权限列表具有差异性，授权流程和授权弹窗的设计上也有差异性。但是对于设计师而言，为 iOS 和 Android 系统的 App 设计优秀的授权体验的方式是大同小异的。

设计流程总结如下：

第一步：确定 App 在 iOS 系统和 Android 系统上分别需要哪些权限

第二步：从整体考虑，利用 material design 中的授权模型对权限进行分类，设定授权时机，并判断是否需要预授权

第三步：着眼于单个权限，基于 CREATE 行为漏斗模型设计预授权弹窗和系统授权弹窗

第四步：设计授权被拒绝后的交互流程

授权设计过程中所遵循的设计原则总结如下：

绝对不获取没必要的权限 强化授权提示 从利他角度设计授权弹窗的提示语，打消用户顾虑，提高用户信任度 降低授权操作的难度，包括为用户拒绝授权后的再次授权提供快速跳转 欢迎关注作者微信公众号：「腾讯设计族」

导语不论是对 iOS 还是 Android 系统的 App 而言，获取用户权限都是极其重要的，但数据表明用户在面临授权请求时会非常谨慎地判断。那作为设计师，我们如何通过用户体验设计影响用户的 App 授权行为，以提高用户的授权可能性呢？授权相关设计细节分析：简单的微信授权登录，没想到设计细节如此惊艳！

导语

不论是对 iOS 还是 Android 系统的 App 而言，获取用户权限都是极其重要的，但数据表明用户在面临授权请求时会非常谨慎地判断。那作为设计师，我们如何通过用户 体验设计 影响用户的 App 授权行为，以提高用户的授权可能性呢？

授权相关设计细节分析：

简单的微信授权登录，没想到设计细节如此惊艳！ 现在很多网站产品和 APP 产品都不再固执地建立自己的用户账户体系，而是使用了微信授权登录的方式来降低获取新用户的门槛，这一方式对产品方和用户来说都有很多好处，例如让注册时操作成本更低，用户也不需要记录各个平台的不同账号等等，但是这种登录方式也带来了一些隐私方面的问题。

阅读文章 >

一、背景介绍 相信大家都遇到过这个令人头疼的场景，当我们下载一个新的 App 并尝试使用时，扑面而来的是接二连三的授权弹窗，请求我们给 App 授予各种权限。若我们不授予权限，很多功能都无法正常使用。这是因为不论是 iOS 系统还是 Android 系统，手机系统厂商都设计了一套授权机制。手机系统厂商之所以设计授权机制，是出于两方面的考虑：

一方面是为了符合隐私法规的要求，保护用户的信息及隐私。例如我国于 2021 年 11 月 1 日起正式施行的《个人信息保护法》中规定“App 不应以非正当合理的方式强迫捆绑和收集用户个人信息，如因用户不同意收集非必要个人信息或打开非必要权限，App 拒绝提供业务功能“。

另一方面是出于用户体验的考量，例如 iOS10 以后的系统都会在用户使用 App 前询问用户 “是否允许使用移动数据”，这一定程度上避免了用户的数据流量被无端消耗。

但是 App 想要顺利地拿到用户权限并没有那么容易。根据 2020 年国家网络安全宣传周组委会回收的 32 万份“App 安全意识保护公众调查问卷“结果显示，88.5%的受访者对于 App 申请手机权限会进行理性分析，谨慎授予权限。当 App 无法顺利地拿到用户的权限，则可能无法给用户提供优质的使用体验；用户使用体验的不佳最终会导致用户的流失。但是 App 的 授权设计 被很多产品开发及设计师忽略，很多 App 在用户首次使用时就连续弹出 n 个授权弹窗，这很有可能让用户在 3s 内放弃这个 App。

因此如何通过用户体验设计提高用户对 app 进行授权的可能性，对于一款 App 来说，是极其重要的。不同的手机系统有不同的授权流程，本文的研究范围将集中在市场占有率最高的 iOS 系统和 Android 系统上。下文会先介绍 App 授权的基本信息，然后再介绍如何为一款 App 设计优秀的授权体验，提高用户的授权可能性。

二、App 授权基本信息 1. 权限列表

在 iOS 系统和 Android 系统中，需要用户授予的权限是具有一定差异性的，详细的权限列表见图 1。

iOS 系统将权限分为用户隐私权限和系统权限，这两类权限都需要用户授权。两者的区别体现在授权弹窗上：用户隐私权限允许 App 开发者在弹窗中添加简短的自定义提示语；而系统权限不允许 App 开发者添加自定义提示语，只能使用系统固定的提示语。常见的用户隐私权限主要包括定位服务、通讯录、日历、照片、蓝牙共享、麦克风、语音识别、相机等，而系统权限主要包括无线网络与蜂窝、通知、VPN、键盘。

Android 系统将权限分为危险权限和普通权限，其中危险权限需要用户授权，而普通权限不需要用户授权。常见的危险权限包括：定位服务、通讯录、日历、麦克风、相机、存储。在 iOS 系统中经常需要用户授权的无线网络与蜂窝、通知、照片权限在 Android 系统中属于普通权限，不需要用户授权。

2. 授权流程&授权弹窗

那 iOS 系统和 Android 系统的这些权限都是如何让用户进行授权的呢？两个系统分别设计了一套授权流程让用户进行授权操作，用户只需要在用于授权的模态弹窗上点击一下就可以选择是否授权，这样简化了用户的授权步骤。若用户同意授权，则可以正常使用相关功能；若用户拒绝授权，则无法正常使用相关功能。

下图呈现了 iOS 和 Android 系统授权弹窗的基本样式，主要包含授权标题、授权提示语、和授权操作按钮。

两个系统的授权弹窗差异主要体现在授权弹窗提示语和授权弹窗弹出次数两个方面：

在授权弹窗提示语方面，iOS 用户隐私权限的授权弹窗是允许 App 开发者在弹窗中添加简短的自定义提示语，但是 iOS 的系统权限授权弹窗和 Android 的授权弹窗都不可以自定义提示语。

授权弹窗弹出次数与用户拒绝授权后的流程相关。iOS 系统的授权弹窗只会出现一次，若用户第一次没有同意授权，则用户只能在系统设置模块自行打开权限开关。而 Android 系统的授权弹窗只要用户未勾选“不再询问”就可以反复出现，若用户第一次没有同意授权，则下一次进入该场景时，App 依然会弹出系统授权弹窗请求用户授权。

3. 预授权（pre-permission）

正如上文提及的，由于 iOS 系统的授权弹窗只会出现一次，若用户第一次没有同意授权，则下次只能在系统设置界面自行打开权限开关。尽管从 iOS 8 开始，App 已经可以在界面中将用户直接引导到系统设置界面进行授权，但操作成本依然很高。此外，由于 iOS 系统的用户隐私授权弹窗只能添加简短的提示语，iOS 的系统权限的授权弹窗和 Android 的授权弹窗不可以自定义提示语，有些用户很难理解为什么需要授权。为了解决拒绝后再次授权操作成本高和用户理解成本高这两个问题，出现了预授权（pre-permission）的概念。

预授权是先弹出自定义的授权界面，让用户做出选择。如果用户同意，则弹出系统授权弹窗；如果用户不同意，则不弹出系统授权弹窗。虽然对于用户来说，在体验路径上多了一个步骤，但是给用户多保留了一次通过系统授权弹窗进行授权的机会，相当于降低了用户的试错成本。关于哪些权限适合设计预授权，下文会进行分析阐述。

三、App 授权设计 那在了解了 App 授权基本信息后，我们该如何为一款 App 设计好的授权体验，提高用户的授权可能性呢？在这里可以运用 material design 授权模型和 CREATE 行为漏斗模型进行授权设计。

1. 第一步：确定 App 在 IOS 和 Android 系统上分别需要哪些权限

首先，产品经理和技术人员需要罗列出 App 在 iOS 系统和 Android 系统中哪些权限需要用户授予。在这一步要遵循的原则是：不要向用户获取非必要的权限。

2. 第二步：利用 Material Design 的授权模型对权限进行分类，设定授权时机并判断是否需要预授权

在明确了要向用户获取什么权限后，设计师可以利用 material design 中的授权模型对权限进行分类，设定每个权限请求的时机，并判断是否需要预授权教育。

谷歌的 material design 设计规范是从两个维度考虑授权设计：权限重要性和权限明确度，基于这两个维度将授权场景分为了四类。虽然这是 Android 系统的授权模型，但同样适用于 IOS 系统。

① 预先请求授权（Ask up-front）

重要性高且容易理解的权限可以在用户第一次打开 App 时就请求授权，因为如果用户能轻松理解该权限的使用目的和重要性，那么预先通过系统授权弹窗上进行授权对用户而言是最快捷的授权方式。

例如 iOS 的无线网络和蜂窝数据权限就属于该类别，因为用户知道若不授予权限，无法正常使用很多功能。定位权限在打车 App 中也属于该类别，因为打车前定位是用户的共识，所以打车 App 可以预先请求用户授予定位权限。

但是对于有些权限而言，在用户第一次打开 App 时就请求授权是很容易被拒绝的，如：通知权限。因为用户对应用的信任感在一开始是最低的，而且在一开始缺乏使用场景，用户并不清楚权限的使用目的。

② 在使用场景中请求授权（Ask in context）

用户容易理解但重要程度不是非常高的权限适合在使用场景中直接向用户请求授权，如通讯录、麦克风、相机权限。因为在使用场景中请求授权时，用户对权限的使用目的有预期，同意授权的可能性更高。例如：在需要上传图片的场景中，请求用户的相册权限，用户一般都愿意授予。

③ 预先教育后请求授权（Educate up-front）

重要但不容易理解的权限可以在用户第一次打开 App 时，对用户进行教育后再请求授权，如：通知权限和通讯录权限，它们都属于用户敏感权限。如果通知权限和通讯录权限对一款 App 而言非常重要，建议设计师可以设计预授权页面对用户进行教育，再请求用户进行授权。

④ 在使用场景中先教育再请求授权（Educate in context）

重要程度不算高而且用户不容易理解的权限适合在在使用场景中先教育用户再请求，例如：非通讯软件的通知权限，因为用户开启通知权限时会顾虑有消息干扰。

那需要教育的这两类权限该用什么方式教育呢？由于系统授权弹窗的自定义提示语有字数限制，所以可以使用预授权的方式进行教育。使用预授权方式进行教育的权限主要有以下特征：

用户觉得可能会被打扰的权限，如：通知权限； 用户觉得很涉及隐私的权限，如：通讯录权限、定位权限； 若设计师希望对某些权限进行详细的说明，也开始采用预授权的方式进行教育，例如：相机、麦克风等权限。 总的来说，授权时机可以分为两类：第一次打开 App 时授权、在使用场景中授权。从是否需要教育的维度来看，分为直接通过系统授权框授权、通过预授权的方式先教育再授权。但是同一个权限在不同的 App 中可能会属于不同的区间，所以设计师在分类时，需要根据 App 的功能特点具体考虑。

3. 第三步：着眼于单个权限，基于 CREATE 行为漏斗模型设计预授权弹窗和系统授权弹窗

那在确定了合适的授权时机和是否需要预授权之后，设计师要把注意力放在单个权限的授权弹窗设计上。想要成功地说服用户授权，那设计师应着眼于人们产生授权行为的心理动机，从用户心理出发进行设计，让设计影响用户的行为。这里可以运用到一个模型----CREATE 行为漏斗模型，用来挖掘用户同意授权的整个心路历程。

① 什么是 CREATE 行为漏斗模型（CREATE Action Funnel）

CREATE 行为漏斗模型是 Stephen Wendel 博士在《Designing for Behavior Change: Applying Psychology and Behavioral Economics》一书提出的概念。这个模型展示的是人们决定做出某种行为所经历的路径，从接收提醒（Cue）到第一反应（Reaction）到分析评估（Evaluation）到检查能力（Ability Check）到判断时间压力（Time Pressure），最终决定是否采取行动（Experience）。

② 运用 CREATE 行为漏斗模型设计

CREATE 行为漏斗模型在用户授权行为上的运用如下：

Cue：屏幕上弹出授权弹窗，用户接收到授权提醒 Reaction：用户会凭直觉做出反应，在瞬间决定是否授予权限 Evaluation：用户会有意识地评估授予权限的利弊 Ability Check：用户会评估自己是否有能力完成授权操作 Time Pressure：用户会判断授权是否紧急，是该立即授权还是可以稍后授权 如果我们想通过设计达到说服用户授权的目的，那我们需要减少用户在行为漏斗的每个阶段所遇到的阻碍，在每个阶段推动用户授权。下文会从预授权弹窗的设计和系统授权弹窗的设计两个方面分别阐述。

预授权界面的设计

阶段一：用户接收提醒（Cue）

首先，在用户接收到授权提醒时，要让用户明确地感知到 App 在请求用户授权，这样才会开始后续的思考。那如何设计预授权弹窗才能让用户有强烈的感知呢？

强化提示的力度，并移除容易让用户分心的元素：（1）在视觉上采用容易吸引用户注意力的色彩、字体、插图等；（2）全屏形式会比半屏或弹窗形式的提醒更明显，同时可以降低多余元素带来的信息噪音，让用户聚焦授权提醒上； 用清晰的文字提示用户 App 想要请求授权。

阶段二：用户做出第一反应（Reaction）

当用户看见授权提醒的瞬间，直觉会告诉用户想不想授权。而用户的直觉取决于该任务是否让用户感到愉快或让用户觉得重要。

设计的界面要引发用户正向的感受，让用户觉得授予权限是正确的选择。 提示语要措辞清晰且语气诚恳，避免用户的习惯性拒绝。 阶段三：用户分析评估（Evaluation）

在用户在做出直觉判断后，会有意识地分析授权的利弊。那在该阶段，授权弹窗要让用户明白同意授权更有利。例如，若用户得知授予通讯录权限后才可以添加通讯录的朋友，他们同意授权的可能性较大。那设计如何该影响该阶段呢？

通过提示语强调同意授权的好处，说明拒绝授权的后果，例如提示语中可以说明“App 要获取这个权限的目的是什么，如果拒绝授权的后果是什么”。 通过提示语打消用户的顾虑。例如关于通知的预授权弹窗中可以明确说明：开启通知后不会打扰用户。 提示语可以通过社会认可强化用户的信任度，例如表示很多人都同意授权。 在界面上限制操作选项的数量，避免提供过多的选项干扰用户的分析。 阶段四：用户检查能力（Ability Check）

如果用户评估后发现同意授权更有利后，他们会想了解如何操作才能授权，要克服多少阻碍。那此时该如何设计呢？

授权界面需要明确地告知用户该如何授权，例如通过清晰的提示语、插画，或播放一小段简单的动画，展示如何授权。 授权界面上要降低授权操作的难度，例如将同意授权的按钮设置为默认按钮，放在用户容易触达的位置。 尽量让授权操作与系统授权弹窗的操作一致，例如系统授权弹窗上的“同意”一般居右，预授权界面上也可以采用一致的按钮设计。 阶段五：判断时间压力（Time Pressure）

在用户明确了授权对自己有利而且自己有授权的能力后，用户会判断授权任务是否紧迫。那在设计上，我们可以利用人们的损失规避心理。

通过提示语告知用户选择稍后授权需要付出更多的精力，操作会更繁琐。 通过提示语告知用户立即授权的好处更多。 预授权界面的设计原则总结：

1. 采用全屏的设计形式会比半屏或弹窗形式的提醒更明显，降低多余元素带来的信息噪音，让用户聚焦于授权提醒

2. 在视觉上采用容易吸引用户注意力的色彩、字号、插图等强化提示力度

3. 请求授权的提示语文案需要清晰、语气诚恳，结构可以如下：（1）App 要获取这个权限的目的是什么；（2）拒绝授权的后果是什么，如：无法使用功能；（3）打消用户顾虑，如：请求通讯录权限时说明不会侵犯隐私，用户可以随时关闭；请求通知权限时说明我们不会打扰用户；（4）强调立即授权比稍后授权更有好处，例如：稍后授权会付出更多精力

4. 降低授权操作的难度：（1）在界面上限制操作按钮的数量（2）尽量让授权操作与系统授权弹窗的操作一致，例如：将同意授权的按钮设置为默认按钮，放在用户容易触达的位置，如左右布局的右侧，或者上下布局的上方。

5. 利用插画、动画、或简单文字明确告知用户授权的操作方式

6. 利用插画、文字等强化用户的信任度，表示很多人都同意授权

系统授权弹窗的设计

IOS 和 Android 的系统授权弹窗并不允许用户进行过多的设计，只有 IOS 用户隐私权限的授权弹窗允许在弹窗中添加简短的自定义提示语，弹窗的样式并不能做太多设计。设计师能影响的主要是 CREATE 行为漏斗的分析评估阶段（Evaluation）。

考虑到提示语的字数限制，系统弹窗的提示语结构可以设计为：说明授权好处或者说明拒绝授权的后果，例如：如果不授予权限，您将不能使用什么功能。涉及到有些用户比较敏感的权限（如定位权限、通讯录权限），可以在授权弹窗中说明权限的使用目的后，再添加打消用户顾虑的语句，如下图中写的“App 彻底关闭时不会收集您的位置信息”。

4. 第四步: 设计授权被拒绝后的交互流程

即便设计师按照上述方式进行了授权设计，提高了用户的授权可能性，但依然会出现用户拒绝授权的情况。那我们如何设计用户拒绝授权后的交互流程，以改善用户稍后授权的交互体验呢？

① 预授权被拒

若用户在预授权界面拒绝授权，并不会触发系统授权弹窗的流程。当用户再次进入使用场景时，可以重新出现预授权界面，让用户决定是否授权。或者在权限的相关使用场景中设计文字提醒，提示用户进行授权。

② 系统授权弹窗被拒

iOS 系统的系统授权弹窗被拒

如果用户在 iOS 系统授权弹窗中拒绝授权，系统授权弹窗不会再次出现。但设计师可以在用户点击“拒绝授权”后设计明显的“未开启授权”的提示，提示用户若想使用相关功能就得打开该权限，并给用户提供一个设置权限的按钮。用户点击该按钮后，可以快速跳转到设置模块的授权页面，减少用户的操作步骤。未授权提示的样式可以设计为弹窗，也可以设计为全屏。若权限重要性高，那可以将提示设计为全屏，强化用户的感知。

下图展示了腾讯视频的案例：当用户拒绝网络权限后，下次进入 App 时，会弹出未授权网络权限的弹窗，并在弹窗中提供了快速跳转设置权限的按钮。

Android 系统的系统授权弹窗被拒

由于 Android 系统的授权弹窗只要用户未勾选“不再询问”就可以反复出现，若用户第一次没有同意授权，只需要在用户拒绝授权后，弹出一个轻量级弹窗提示用户未开启授权即可。用户下一次进入该场景时，App 依然会弹出授权弹窗请求用户授权。

总结 总的来说，不论是对 iOS 还是 Android 系统的 App 而言，获取用户权限都是极其重要的，但是数据表明用户在面临授权请求时会非常谨慎地判断。因此，通过提高用户体验设计提高用户的 App 授权可能性是非常有必要研究的方向。虽然 iOS 系统和 Android 系统的权限列表具有差异性，授权流程和授权弹窗的设计上也有差异性。但是对于设计师而言，为 iOS 和 Android 系统的 App 设计优秀的授权体验的方式是大同小异的。

设计流程总结如下：

第一步：确定 App 在 iOS 系统和 Android 系统上分别需要哪些权限

第二步：从整体考虑，利用 material design 中的授权模型对权限进行分类，设定授权时机，并判断是否需要预授权

第三步：着眼于单个权限，基于 CREATE 行为漏斗模型设计预授权弹窗和系统授权弹窗

第四步：设计授权被拒绝后的交互流程

授权设计过程中所遵循的设计原则总结如下：

绝对不获取没必要的权限 强化授权提示 从利他角度设计授权弹窗的提示语，打消用户顾虑，提高用户信任度 降低授权操作的难度，包括为用户拒绝授权后的再次授权提供快速跳转 欢迎关注作者微信公众号：「腾讯设计族」

在互联网企业日常的项目需求中，插画经常会大量的运用在各类产品设计、产品运营、产品宣传中，但是传统的插画方式主要存在以下几个问题：不同岗位不同的设计师产出的插画风格不一致，质量参差不齐每次的设计插画需求都是从头开始绘制，插画的产出效率太低插画的风格不一致很难形成一致的品牌印象，品牌感太弱于是我们可以看到一些互联网团...

在互联网企业日常的项目需求中，插画经常会大量的运用在各类产品设计、产品运营、产品宣传中，但是传统的插画方式主要存在以下几个问题：

不同岗位不同的 设计师 产出的插画风格不一致，质量参差不齐 每次的设计插画需求都是从头开始绘制，插画的产出效率太低 插画的风格不一致很难形成一致的品牌印象，品牌感太弱

于是我们可以看到一些互联网团队已经走在了前面，通过构建系统的插画组件库来解决以上 3 个问题，对于设计师来说，插画组件库虽然已经不是什么特别新鲜的话题了，但是实际的执行过程中大部分设计师可能会遇到很多难题。那么，今天的飞凡指南就通过 3 个方面来深度解读下 插画组件库 的这个设计话题。

更多插画 组件库 干货：

保姆级教程！手把手教你做超实用的插画组件库（附组件库下载） 今天给大家带来的是如何建立设计师个人的插画组件库，因内容过长并知识点过多，请泡杯枸杞观看。

阅读文章 >

一、插画组件库的价值 1. 设计提效

当我们通过传统的流程去设计一个运营页面的时候，往往需要 2~3 天的时间，但是有了插画组件库，设计产出的效率基本上可以提升 1 倍以上，而节省出来的时间，设计师可以去考虑更有价值的事情

2. 统一风格

整套的插画组件库，在构建的时候，对风格、色彩、人物、元素、背景都有着统一的规范，在面对不同设计能力设计师的时候，都能够较大程度上保证风格统一和插画的产出质量

3. 提升品牌感

插画组件库在构建之初就要考虑和产品调性、品牌调性的一致性，这样在传播的过程中才更能在用户心中形成一致的品牌形象，提升品牌感

二、插画组件库需要考虑 4 个方面的问题 当我们在构建插画库的时候，以下 4 个问题是我们需要重点考虑的：如何凸显产品属性；如何体现品牌调性；如何满足用户场景；如何打造差异化的风格

凸显产品属性：插画的最终目的是辅助文字去传递产品信息，我们需要直观的向我们的用户告诉我们是干什么的，而避免用户做过多的思考；

如何体现品牌调性：和消费品一样，品牌是用户考虑的一个非常重要的因素，插画是传递信息和塑造品牌调性一个非常重要的渠道，所以插画库应该考虑如何能够对我们的品牌调性或产品调性进行补充

如何满足用户场景：在考虑插画的元素构成的时候，我们也需要把用户考虑进来，他们使用产品的时候是哪些场景，再基于用户的场景去设计我们的插画组件元素，这样在实际应用插画库的时候才能够尽可能涵盖传播的场景

如何打造差异化的风格：我们可以看到各大互联网产品的插画风格都基本上非常雷同，很难有明显的插画风格特征，这样的结果就是用户很难记住你，所以对于插画差异性的考虑也是一个很重要的点

三、插画组件库构建的 3 个步骤 对于设计师来说，最重要的还是如何将插画组件库落地了，总结下来可以分为 3 个步骤：插画风格推导、插画组件库搭建、插画组件库应用

1. 插画风格推导 插画风格我们主要可以从 3 个方面去推导：品牌、用户、产品

① 品牌

我们需要了解的是品牌的调性、色彩、辅助图形、logo 特征、品牌资产...，这些都是我们构建品牌插画库的基础参照。比如下面这张图是梳理的出来的 fashion data 的品牌相关元素：

② 用户&产品

了解我们的用户和产品，我们可以用以下这个电梯宣言的方法去梳理：

关于用户：为了满足「目标用户」，他们的「什么痛点或需求」

关于产品：我们的「产品名称」，是一个「怎么样的产品类型」；它可以「关键优点，通过什么样的功能，为用户带来什么样的价值」；而不像「市场上某竞品及其特点」；我们的产品是一个「主要独特价值点」

比如，下面这张图是对 fashion data 的用户和产品进行的梳理，去快速的了解用户的需求痛点、产品定位、产品价值...

了解完品牌、产品、用户之后就要推导出插画库的风格方向了。

在讨论 fashion data 的插画风格选定的时候，其他几组插画在风格上差异性和个性表达上虽然会比较强，但是和 B 端产品的定位差异比较大，最后还是选定了普通的矢量风格插画风格，它能比较好的像用户传递出 B 端产品的高效、专业、严谨的品牌形象，后期差异化主要是通过融入品牌元素和塑造插画角色这 2 个手段来体现。

2. 插画组件库搭建 插画组件库的搭建，可复用性是我们考虑的重点，要达到这个目标，我们构建分子的时候就应该尽可能的把插画拆分成比较细的分子，比如头部我们可以拆分成不同角度的基础头型、发型、表情...

① 角色组件

定义角色基础的形体比例、肢体细节

形体比例、肢体细节基本上就能够确定我们的角色是何种特点，比如，我们常见的互联网扁平插画风格就和我们的正常人物比例、肢体细节比较接近一些，但是一些欧美的插画风格经常会用很夸张的比例造型来塑造个性的角色，比如头特别小，肢体特别大。

还有不同人物的比例也会有所不一样，比如男性女性的黄金比例是 9a（九头身），小孩的比例大大约是 4a，但这不是固定不变的，还要看具体的插画风格。

为角色搭建灵活的骨骼系统

构建组件库，我们自然是希望我们的插画能够和人的骨骼一样，能够灵活的做出各种动作，这就要借助于灵活的骨骼系统了，通常情况下我们可以将我们的人体骨骼拆分成以下的组织。

在组织的连接处，我们尽量都能够采用正圆形，这样在变换动作的时候才能够更好的衔接上，大家可以看看传统的皮影人偶也是采用的这种连接方式，才能在舞台上作出灵活的动作。

建立不同角度下的表情、动作、服饰等组件

人物的应用场景不仅仅只有正面的角度，还有其他的角度，我们一般只需要设计正面、半侧、正侧这 3 个角度即可，在这 3 个角度我们需要构建不同的表情、动作、服饰...尽可能满足角色在不同场景的使用需求。

② 通用组件

通用组件我们一般基于用户场景来制定。比如下面的这个案例，fashion data 是一个高效的跨境电商数据管理平台，主要针对店铺运营人员，为他们提供快速管理店铺商品、直观查看店铺经营数据等服务，所以用户的场景主要办公场景和业务场景，办公场景的元素有比如：书桌、电脑、办公用品...；业务场景的元素有，比如：仓储、物流、数据、商品... ，最后我们再基于这些元素去制定通用的组件。

③ 背景组件

背景组件一共可以分为 2 种类型，场景背景和纹理背景。场景背景一般是基于某个特定的场景来制定的，用来交代画面所处的环境，比如室内背景、白天、黑夜、晴天...

纹理背景一般是用来装饰和丰富背景，比如下面的插画，加了背景纹理插画明显层次和画面更加丰富了。

3. 插画组件库应用 搭建完组件库之后，就可以在产品运营、线下物料、产品界面使用它们来提升设计的效率了。当然随着业务不断的变化和用户场景的变化，我们的插画组件库也应该及时的扩容和优化。

写在最后 需要提醒的是，插画组件库的目标是帮助那些重复、且设计质量要求不高的设计需求提效，而设计难度较高的设计需求还是需要设计师来处理，而这才是设计师能够真正体现价值的地方，同时，把时间节省出来，设计师才有精力去思考更多更有价值的事情。