首页

132022-4

UI设计师交互设计-知识图谱的信息可视化设计方法

知识图谱作为语义网络，其技术算法研究被广泛应用在人工智能和大数据等领域。通常，知识图谱的运转过程是由数据模型完成，用户可见的只是计算后的结果，其数据的可视化也仅停留在对结果的可读性展示上。但其实，图谱之间的关系、数据计算的过程，也具备分析价值和潜在的机会信息。将知识图谱转化为可视化信息图，能帮助用户更好的理解和利用数据及其关系，但对于没有技术背景的界面设计师来讲，从技术架构、计算函数等技术视角去理解知识图谱概念和应用相对困难。本文分享一种设计思路，帮助大家在实际工作中，完成知识图谱向可视化交互界面的转化。

评论(0) 浏览(3716)

132022-4

UI设计师交互设计-注重产品细节的使用体验

之晨

前言

在使用产品的过程中，你是否看到了一些有趣的细节，而这些细节提升了你的使用体验？这些产品细节，便是产品设计师需要留意的，因为这些产品细节在某种程度上提升了用户的留存与转化。本文我就对一些产品细节进行了拆解，一起来看一下。

一.【夸克浏览器】节日彩蛋-特定场景下输入关键词触发彩蛋效果

二.【酷狗音乐】播放Tab-多交互操作，应对多场景使用

三.【腾讯新闻】左滑热点榜单-用户关注的热点放在路径短的位置

四.【荔枝博客】品牌传播-产品情感漏出，与用户产生共鸣

五.【百度网盘】自定义倍数-给用户更多可控操作，精细化观影感受

六.【网易云音乐】情感彩蛋-给你梦幻的魔法，带你重拾记忆

七.【即刻】头像彩蛋-趣味互动回弹，把喜欢强烈表现出来

八.【荔枝】录声音-轻拟物动态图，使用中的及时反馈

九.【微博】点赞反馈-情绪最大化宣泄，尽情释放情绪

十.【36氪】隐藏的浮窗-深挖用户操作，快切与停顿的奥秘

一、【夸克浏览器】节日彩蛋-特定场景下输入关键词触发彩蛋效果

1. 使用场景

在圣诞节日来临之际，用户使用搜索引擎输入关键词的频率会增加，在此增加彩蛋给用户营造节日氛围

2. 设计思考

设计目标：增加关键词趣味彩蛋雨，提高产品趣味体验，提高用户搜索频次。

设计方案：在节日来临前，用户通过搜索节日特定关键词，会在搜索结果页中以彩蛋雨的形式坠落下来，图案贴合节日物品，给用户营造出节日氛围，给予用户节日的浪漫。用户在使用时并不是一个冰冷的产品，而是有情感共鸣有情绪的产品。

二、【酷狗音乐】播放Tab-多交互操作，应对多场景使用

1. 使用场景

想要提高屏效，一屏显示更多内容。在浏览操作时会因为功能按钮外漏造成误操作情况。

2. 设计思考

设计目标：提升屏幕显示内容面积，给予TAB播放更多交互形式，增加趣味性提升产品记忆点。

设计方案：在TAB播放中给予「长按」「双击」两种交互操作，长按中包含双击的播放暂停，因为此操作，使用率较高，提供多入口能有效提高易用性。长按时，激活更多常用功能，包含移动进度条、收藏、下一首等操作，配合特有的交互展示形式，给用户形成产品记忆点，同时在浏览不同频道时，功能的隐藏大大降低误操作以及视觉干扰的情况。

三、【腾讯新闻】左滑热点榜单-用户关注的热点放在路径短的位置

1. 使用场景

如今的新闻产品都提供热点时事新闻，给用户提供更多丰富内容聚集。

2. 设计思考

设计目标：提高用户使用率，不影响主框架的情况下给用户最短路径查看热点新闻的入口，提高用户浏览时长。

设计方案：首屏以及导航模块更多还是以新闻资讯等内容为主，关注热点更多是娱乐热门等内容，浏览率都高的情况下，把热点模块放到左滑页面中，在不影响首页框架情况下，增加新的板块，给用户更多浏览选择，丰富产品多元化内容。

四、【荔枝博客】品牌传播-产品情感漏出，与用户产生共鸣

1. 使用场景

如今的产品趋于同质化，由原来只注重功能转变为产品情感表达，给用户产生情感互动，从功能付费变为情感价值观付费。

2. 设计思考

设计目标：传播产品价值观，给予用户引导，产生产品正向记忆，从而提高粘性。

设计方案：上几期产品分析中有说到顶部logo外漏的设计描述，有的植入隐藏功能，有的表示刷新功能等，归根结底都是给予静态标志功能属性，提高屏幕利用率同时提升用户探索欲望。

荔枝博客本身产品内容相对聚焦，想要做出差异化就要往品牌情感入手，当用户点击左上角「荔枝博客」标志时，会弹出产品的由来以及做博客的初衷，让用户思考产品深层意思时无形中把产品植入到用户记忆中，给用户情感绑定，提升用户使用粘性。

五、【百度网盘】自定义倍数-给用户更多可控操作，精细化观影感受

1. 使用场景

市场上的视频倍速参差不齐，0.25、0.5、1倍三种递增逻辑，用户在观影时会存在没有想要选择着倍速，只能使用平台提供的选择使用，操作受限制。

2. 设计思考

设计目标：解决倍速不是用户想要的，提供自定义倍速，给用户更多可操作性，提升观影感受。

设计方案：在百度网盘中观看视频时，点击调节倍速在提供默认常规5种倍速下提供自定义倍速，以0.1的速度逐渐递增，用户可以在0.5-3倍之间任意选择，根据视频类型、观影习惯选择合适的速度，同时把市面上不同倍速问题给用户造成的观影困扰也同步解决，提高视频观影体验。

六、【网易云音乐】情感彩蛋-给你梦幻的魔法，带你重拾记忆

1. 使用场景

音乐无国界，每首音乐背后都有一段很长的故事，在我听哈利波特主题曲时，浏览评论发现特定特定位置点击会有彩蛋，尝试了一下果然如此。网易云音乐评论区的强大之处展示之一。独有的彩蛋。

2. 设计思考

设计目标：提升评论活跃度，强化广告的表现形式，增加用户对产品的探索欲望提高使用粘性。

设计方案：哈利波特音乐中，在评论区第九和第十条中间分割线处，点击两下！触发魔法视频，把用户带入情境之中，勾起满满的回忆，配合音乐声音，真可谓视觉听觉双重享受。

对于开发来说，只需要在特定歌曲评论中写一个位置判定以及触发条件，当用户触发条件后，播放特定视频，触发用户情感共识，提升使用粘性。同时如果做为广告植入也是比较好的呈现方式，但要注意视频质量，尽量弱化广告中的产品，可以把品牌情感揉入视频中与用户产生情感关联。

七、【即刻】头像彩蛋-趣味互动回弹，把喜欢强烈表现出来

1. 使用场景

在看关注人主页时，想要强烈的表达出情感给予对方，释放自己心中的喜欢时如何表现出来。

2. 设计思考

设计目标：提升趣味玩法，增强用户操作感受，丰富产品玩法体验，提升使用粘性。

设计方案：在个人主页，通过拖拽用户头像放手回弹，头像以拉距来弹射回原有位置并且迸发出爱心动画，让用户产生更贴近的情感传达，反复操作达到一定数量会有文字提醒，文案的趣味描述也让彩带功能增加了一份趣味。

八、【荔枝】录声音-轻拟物动态图，使用中的及时反馈

1. 使用场景

在使用录音功能时，单纯靠进度条记忆静态按钮显示很难产生强提醒，除非做大做突出，荔枝在录音中是如何表现的。

2. 设计思考

设计目标：解决录音功能页面元素单一用户进行中与暂停感知浅的问题，结合动态插图给用户及时反馈，同时贴合线下使用场景，给用户注入产品记忆点。

设计方案：在我的-进入录声音模块中，头图展示一个录音磁带机，当开启录音功能时，磁带机会进行旋转播放，左慢右快的展示形式符合真实机器的运动规律，给用户强提醒告知用户此时正在录音中，当暂停时，磁带机及时停止，和按钮形成触发绑定，提高产品使用体验。

九、【微博】点赞反馈-情绪最大化宣泄，尽情释放情绪

1. 使用场景

单一的赞有时无法满足用户的爱意，用户希望更强烈的表达情感，来满足自己反馈欲。

2. 设计思考

设计目标：提升赞的强烈感知，释放用户内在情绪，提高产品趣味体验，从而增加使用粘性。

设计方案：在微博单条动态页面中，对“赞”进行点击一次操作是普通点赞反馈；长按触发连赞机制，会带来多彩多图标的更强的视觉感受，带来强烈的情感反馈，让用户尽情的释放情绪，得到内在解压。

十、【36氪】隐藏的浮窗-深挖用户操作，快切与停顿的奥秘

1. 使用场景

新闻资讯产品，文章之间来回切换阅读，时有发生，或者手头有事忙完再回过头看。

2. 设计思考

设计目标：解决阅读中断导致回看路径长，影响阅读效率的问题。

设计方案：浏览文章时，屏幕侧边从左向右划动是返回上一级的交互手势，当用户在滑动中停留一下就会激活浮窗功能，随着手势操作移动到黑圈内颜色会显示蓝色，表示移入成功，这时放手返回首页，右下角会显示一个圆形浮窗，可快速查看浮窗内的文章。

值得学习的是，左滑浮窗图形随着手势上下位置进行移动，路径更短更快的进行操作，提高用户使用体验。因为隐藏式的交互有一定学习成本，产品充分考虑到这点，在文章右上角更多按钮中放置加入浮窗功能，两个激活入口，兼容新老用户使用，提高产品易用性。

十一、结语

设计师要有发现美的眼睛。美不仅是视觉，还有好的体验流程。不要让用户思考，这是每个设计师所追求的。认真记录产品细节，了解背后的思考，也是不断提升自己逻辑思维和表达能力的一种方式。

文章来源：站酷作者：碳水sir

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(2617)

132022-4

UI设计师交互设计-教你在UX轻松创建文案

之晨

在了解了人物性格语气的重要性以及在大厂中的应用场景之后，大家一定很关心，要如何在自己的业务中从0开始创建文案的人物性格语气呢？下面会结合在酷家乐云设计工具的实践，针对这部分内容做详细介绍。酷家乐云设计工具主要是针对内装设计师的设计工具。整个过程大致分为 5 个阶段：资料研究、小组研讨、确定人物性格关键词、丰富人物性格、绘制画像。

<p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode__25" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微软雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">

<p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode26" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微软雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">性格描述的词汇里，我们进一步聚合细分，总共归为 3 类。灵活友好、随和的、善解人意为一类，理性为一类，直接坦率为一类。非性格描述的词汇里，我们主要看这些描述是否和前面的性格相关联，是否出现一些词汇，是前面的性格类词汇涵盖不了的，进而对性格类词汇进行一个校准。比如，专业、品质化、值得信赖等描述主要表示我们的产品是专业资深，有一定有话语权，这和性格描述的理性关联性很大。我们认为一个靠谱的、沉稳的、理性的人，他的能力一定是足够专业，表现出的特质一定是自信的，值得大家信赖，有一定权威性的。再比如，我们认为崇尚科技、科技感的东西在某种程度上和理性、冷静这种气质是相吻合的。依此类推，经过所有的分析后，我们发现性格描述下的3类词汇基本和非性格描述下的词汇是相关联的，满足这3类性格的人物是符合公司和品牌整体调性的。所以这3类性格将作为我们人物性格的考虑范围。最后我们将每一类性格进行一个关键词的总结，得出了善解人意、理性、直率三个关键词。

<h1 data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-weight: bold; line-height: 1.5; letter-spacing: -0.006em; font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode__29" style="white-space: normal; margin: 0px; padding: 0px; outline: none; box-sizing: inherit; caret-color: rgb(40, 40, 40); color: rgb(40, 40, 40); font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微软雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">Chapter FOUR「丰富人物性格」

<h4 data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-weight: bold; line-height: 1.5; letter-spacing: -0.006em; font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode31" style="white-space: normal; margin: 0px; padding: 0px; outline: none; box-sizing: inherit; caret-color: rgb(40, 40, 40); color: rgb(40, 40, 40); font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微软雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW; font-size: 14px;">-细化性格关键词，让人物更好理解

<p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode32" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微软雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">基于每种性格，为了更好的理解，我们详细描述这个人物是什么样的，不是什么样的，并给到一些例子描述。

<p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-weight: bold; line-height: 1.5; letter-spacing: -0.006em; font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode__33" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微软雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">

<p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-weight: bold; line-height: 1.5; letter-spacing: -0.006em; font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode34" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微软雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">善解人意

能够理解用户当下的心理状态，知道别人的需求是什么，然后说相应的话
能够理解用户的困难，并帮助他们克服
懂得聆听用户，给到用户反馈渠道，关心用户的反馈
提供新的或更好的方法，帮助用户实现目标

                                    <p style="font-size:16px;white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#666666;position:relative;line-height:32px;font-family:&quot;">
                                        <br />
                                    </p>

置身事外，只是客观的描述事实，没有体谅用户的心情
给人以压迫感或距离感

                                        <p style="font-size:16px;white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#666666;position:relative;line-height:32px;font-family:&quot;">
                                            <br />
                                        </p>

发生问题时，应告诉用户可行的解决方案，或产品为用户做了哪些挽救措施
从用户视角描述价值
多给用户支持和鼓励，不要命令、强迫用户，不要责怪用户
使用贴近用户的用语，不使用过于专业、用户难以理解的表述，也尽量不创造新的概念或词汇

能够聚焦关键信息，精炼表达
能够控制情绪，克制表达
逻辑清晰，表达严谨，前后一致

                                    <p style="font-size:16px;white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#666666;position:relative;line-height:32px;font-family:&quot;">
                                        <br />
                                    </p>

说话没有重点，所有细节都面面俱到
采用情感化的表达方式强调或放大情绪

                                        <p style="font-size:16px;white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#666666;position:relative;line-height:32px;font-family:&quot;">
                                            <br />
                                        </p>

提供帮助用户实现目标的关键信息，不用把前因后果都解释一遍
慎用“啦”、“哦”、“吧”、“吗”等矫饰的语气词，以及“！”、“？”等语气标点
不说“可能”、“不确定”、“也许”这类似是而非的词，也不能说过于绝对的话，会影响严谨性

不卑不亢，平等地和用户对话
表达简单清晰，不绕弯子
追求效率，为用户提供解决问题的最短路径

                                    <p style="font-size:16px;white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#666666;position:relative;line-height:32px;font-family:&quot;">
                                        <br />
                                    </p>

过度的关怀和讨好
过于官方，没有提供有效帮助
掩盖问题

                                        <p style="font-size:16px;white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#666666;position:relative;line-height:32px;font-family:&quot;">
                                            <br />
                                        </p>

说话平等直接，避免用”您“这类词，而是用你、我来进行对话
在出现问题时，及时通知用户，无需遮遮掩掩
在用户遇到问题时，坦诚客观描述事实，无需过多表达歉意

                                    <p style="font-size:16px;white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#666666;position:relative;line-height:32px;font-family:&quot;">
                                        <br />
                                    </p>

                                                <p style="margin-top:0px;margin-bottom:0px;white-space:normal;caret-color:#282828;color:#666666;font-family:&quot;font-size:16px;outline:0px;padding:0px;line-height:32px;text-align:justify;">
                                                    <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><strong style="margin:0px;padding:0px;outline:0px;max-width:100%;box-sizing:border-box !important;overflow-wrap:break-word !important;"><br />

文章来源：站酷作者：酷家乐UED

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

                                                <p style="margin-top:0px;margin-bottom:1rem;white-space:normal;caret-color:#282828;box-sizing:border-box;font-size:16px;background-color:#FFFFFF;color:rgba(0, 0, 0, 0.843);font-family:&quot;letter-spacing:0.1px;text-align:justify;">
                                                    <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><strong style="margin:0px;padding:0px;outline:0px;max-width:100%;box-sizing:border-box !important;overflow-wrap:break-word !important;"><strong style="box-sizing:border-box;font-size:14px;font-family:微软雅黑, Arial, Helvetica, sans-serif;color:#323232;"><b style="box-sizing:border-box;widows:1;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="font-family:&quot;font-size:14px;background-color:#FFFFFF;white-space:normal;widows:1;line-height1111111111111111111111111111111111111111111111:20px;color:#3e3e3e;box-sizing:border-box !important;"><strong style="box-sizing:border-box;font-family:微软雅黑, Arial, Helvetica, sans-serif;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><a href="http://www.lanlanwork.com/blog/admin" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;">蓝蓝设计</a>(&nbsp;<a href="http://www.lanlanwork.com/" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#0C386E;transition:all 0.5s ease 0s;vertical-align:baseline;padding:0px;margin:0px;text-indent:34px;background-position:0px -60px;">www.lanlanwork.com&nbsp;</a>)是一家专注而深入的<a href="http://www.lanlanwork.com/index.html" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;">界面设计公司</a>，为期望卓越的国内外企业提供卓越的UI界面设计、<a href="http://www.lanlanwork.com/bs.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;">BS界面设计&nbsp;</a>、&nbsp;<a href="http://www.lanlanwork.com/csjm.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;">cs界面设计&nbsp;</a>、&nbsp;<a href="http://www.lanlanwork.com/scjm.html" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;">ipad界面设计</a><a href="http://www.lanlanwork.com/csjm.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;">&nbsp;</a>、&nbsp;<a href="http://www.lanlanwork.com/baozhuang.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;">包装设计&nbsp;</a>、&nbsp;<a href="http://www.lanlanwork.com/icon.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;">图标定制&nbsp;</a>、&nbsp;<a href="http://www.lanlanwork.com/yhty.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;">用户体验 、交互设计、&nbsp;</a><a href="http://www.lanlanwork.com/web.html" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;">网站建设</a><a href="http://www.lanlanwork.com/WEB.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;">&nbsp;</a>、<a href="http://www.lanlanwork.com/xz.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;">平面设计服务</a></b></b></b></b></b></b></strong></b></strong></b></strong></b></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></b></strong></strong></strong>
                                                </p>
                                                <div>
                                                    <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><strong style="margin:0px;padding:0px;outline:0px;max-width:100%;box-sizing:border-box !important;overflow-wrap:break-word !important;"><strong style="box-sizing:border-box;font-size:14px;font-family:微软雅黑, Arial, Helvetica, sans-serif;color:#323232;"><b style="box-sizing:border-box;widows:1;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="font-family:&quot;font-size:14px;background-color:#FFFFFF;white-space:normal;widows:1;line-height1111111111111111111111111111111111111111111111:20px;color:#3e3e3e;box-sizing:border-box !important;"><strong style="box-sizing:border-box;font-family:微软雅黑, Arial, Helvetica, sans-serif;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><br />

评论(0) 浏览(2958)

082022-4

UI设计师交互设计-如何写好产品体验文档

之晨

文章将分为6部分

1、撰写文档的目的

2、什么样的产品值得体验

3、产品体验类型

4、产品体验文档应该包含的内容

5、文档质量的评判标准

6、体验文档和竞品文档的异同

一、撰写目的

首先要理清楚，我们为什么要写产品体验文档， 是工作需要？还是兴趣使然？

明确写作目的才不会迷失方向，不知道自己在写什么，应该写什么。

其次，要 明确文档的受众是谁。

好的文档，是写别人想看的内容，你要明白受众想要看什么内容。

二、什么样的产品值得体验

1、与你工作相关的

如果你是做平台型电商，那么淘宝、京东这些你就得去体验体验。

2、上热搜、应用商店登榜

例如之前大火的啫喱，一度在APP Store的热度超过微信、抖音，作为产品经理就很有必要下载体验一番，琢磨一下它爆火的原因，提升自己的产品感觉。

3、新颖的商业模式

例如之前QQ音乐，在听歌过程中给用户插入广告播放，虽然极度恶心，但确实是一个比较新颖的商业模式。。。

4、新颖的交互模式

例如现在有很多APP的开屏广告，直接使用手机的重力感应器，用户稍微摇动手机就会跳转到对应的广告页，不需要用户去点击。

虽然我觉得这种交互方式挺恶心的，但在不同的场景下，其实也有可借鉴之处。

5、新颖的解决方案

例如之前房产平台推出的3D实景看房，用新的方式更好地满足，用户想直观了解房屋布局的需求。

三、产品体验类型

1、深度体验

特点： 多角度、深挖产品细节。

这意味着，我们需要投入大量的时间和精力，持续做很多案头工作。

哪些产品适合我们去做深度体验呢？

个人建议是：经久不衰、行业TOP 10、与你工作比较相关的产品。

全面体验这些产品，可以在很多方面带给我们灵感。

例如从0到1它是怎么做出来的？1到100的推广它是怎么完成的？100到正无穷的行业壁垒它是怎么形成的？......

相信我，花一段时间去持续研究这些产品，一定收获满满。

2、快速体验

「快餐式」体验，特点： 短平快。

当我们想了解一些产品有趣的表现层、交互层设计时，就可以用这种方式，花个1-2小时把玩，记录你觉得特有意思的点。

四、文档应该包含的内容

接下来，阿G将通过分析「善诊」这款APP，和大家分享一下，好的产品体验文档应该包含的7部分内容。

注意： 我们不是为了写文档而写文档。

1、体验环境

1）产品信息，通常会包含

产品名称

产品logo
产品版本

2）体验信息，通常会包含

体验人
体验目的

体验时间

3）系统信息，通常会包含

体验系统
体验设备

撰写体验环境的 3个注意事项：

1、产品版本

不同环境，版本可能不一样，导致功能、界面等差异。

例如善诊，截止文章发出前，苹果最新的版本是2.7.0，小米最新的版本是2.6.0，华为最新版本是2.6.9，所以写的时候最好备注一下。

2、体验时间

可以是持续一段时间，特别是深度体验时。

3、写体验环境的目的

为了让读者（包括自己）清楚了解所体验产品的基础信息，方便（日后）翻阅。

特别是体验目的，要 很清晰地让读者知道， 为什么要体验这款产品，体验这款产品能收获什么。

2、产品概述

1）产品类型

写清楚产品的类型和形态，例如善诊是一个中老年健康医疗服务平台，专注在移动端。

2）Slogan

一个产品向外界传递的产品理念，例如「父母健康找善诊」。

3）产品介绍

通过体验产品和查阅公司/产品的资料，为读者提炼产品特点，介绍产品的主要用途。

4）产品历程

按时间线，介绍产品一些重大事件。

以上信息获取渠道：

1、公司官网（特别是B端产品，官网会给你安排得明明白白）

2、应用商城相关的产品介绍（注意灵活使用搜索引擎，哈哈）

3、用户分析

1）用户画像

一般会从人口学、社会学角度，放一些用户的年龄分布、地域分布、学历、性别占比等数据。

具体还是要以体验的产品类型、所处行业为准，把需要呈现给读者的重点信息放出来就好，不用贪多。

2）用户需求

3）使用场景

通过行业信息、产品功能、用户画像，结合自己的思考，提炼重点用户需求和使用场景。

很多时候，我们不熟悉体验产品所处的行业，不要紧，可以猜，然后通过和他人交流、查阅资料，修正内容。

以上信息获取渠道：

1、用户画像：百度指数、头条指数，或者行业报告

2、需求和场景：行业报告 + 体验产品（当然如果你身处于行业之中，就可以依据经验来做一些总结）

4、商业模式

1）模式概述

详细描述一下公司/产品的变现方式，最好可以图文 + 数据。

2）模式优势

每一个产品能活下来，都有能够形成闭环、具备一定优势的商业模式。利用搜索引擎查阅相关资料，再加上对产品的体验思考，剖析、学习其商业模式，有助于培养我们的商业嗅觉。

以上信息获取渠道：

行业报告 + 新闻报道

做产品，可不仅仅是为了情怀，首先你要考虑的是，如何活下去。

5、市场表现

1）市场/用户规模

产品在所处市场的占比，或者用户规模，可以侧面验证它是不是一个好产品。

这里的「好」不仅是用户体验好，更是真正解决了一些行业/用户的需求。

2）融资情况

资本是最敏感的，一个产品有没有前景，融资情况会很坦白地告诉你，哈哈。

以上信息获取渠道：

1、市场/用户规模

上市公司，可以看一下财报，里面真的啥都有......
非上市公司，那只能去官网瞅瞅，或者通过搜索引擎，看看对应的小道新闻或者行业报告

2、融资情况：企查查

6、运营体系

1）版本迭代

为什么要看产品的版本迭代？

任何产品的迭代，都是基于内外部环境变化引起的策略调整，我们可以通过观察某个产品的迭代情况，培养我们对市场环境变化的敏锐度。

同时可以通过历史版本迭代，思考产品的迭代逻辑和规律，看看是否有可借鉴之处。

2）增长转化策略

结合时间线和版本迭代记录，思考体验产品的运营策略是如何完成其用户/销量的增长转化。

以上信息获取渠道：

版本迭代：七麦数据、App Annie（付费）

7、功能体验

1）核心流程图

通过把玩产品，梳理出最核心的业务流程图。

2）信息架构图

信息架构图，简而言之就是把产品主要对象的属性列出来，与页面、交互都无关。（后面可以再单独出一篇和大家聊聊信息架构图应该怎么画）

3）特色功能

可以找一些你觉得最有意思，最特别的功能，并做简单介绍。

4）产品建议

在体验产品过程中，觉得哪些地方可以改进，具体说一下问题点，分析问题点可能产生原因，再提出有效的改进建议。

8、总结反思

对比自身

思考一下体验产品上某个亮点，如何能和自己负责的产品进行有效结合，站在巨人的肩膀上看世界。

上面说的7部分内容，是不是每次写体验文档的时候，都应该有？

当然不是，我们应该根据体验目的、体验类型、产品类型，适当地做一些裁剪。

五、文档质量的评判标准

围绕着体验目的和读者感受，可以把产品体验文档的质量评判标准做一个总结。

1、通用（两种体验类型都应该有）

1）体现产品核心价值

2）抓住产品重点

3）体现产品特色

4）结构清晰

5）格式美观

6）思考总结

2、深度体验可以有

1）详细数据支持

2）商业模式分析

六、体验报告和竞品报告的异同

很多小伙伴会把产品体验报告和竞品分析报告搞混：都是对产品进行体验和分析，除了名字之外，到底有啥区别？

我们从「异同」两个方面来分析，看看它们究竟有啥区别。

1、异

1）目的不同

竞品分析文档是对竞品做分析，常用SWOT模型，将自己和竞品做对比分析，学习借鉴。而产品体验，不一定是竞品，可能只是你个人感兴趣而已。

2）范围不同

竞品分析文档，一般仅限于输出竞品的思考总结，而产品体验的范围更广。

3）深度不同

产品体验可以浅尝辄止，但竞品分析不行，竞品分析需要透过现象看到本质，观察竞品的一举一动，配合市场动态，不断调整我们自身产品方向，甚至是公司战略定位。

2、同

产品分析报告和竞品分析报告，除了都是对产品进行分析之外，还有一个共同点：我们要 做自己。

不管体验的产品多厉害，不管竞品多无敌，我们都是抱着学习、借鉴的心态去分析，去思考问题。

每个团队、每个产品诞生的环境都不尽相同，纵然其他产品做的再好，我们也不能「全盘皆抄」，要时刻保持初心，做自己。

好了，产品体验文档如何撰写，阿G就先聊到这里。

其实产品体验的整个过程，最重要是以下几点思考：

1、如果你是这个产品的产品经理，你会用什么方案去解决重点用户的需求？

2、你的方案和现在产品方案的差异点在哪里？

3、为什么会有这些差异点？

4、方案对比的优缺点各有哪些？

不管是C端还是B端，不断思考这几个问题，相信慢慢就提升自己的产品Sense。

多体验、多思考、做自己、少纠结模板

文章来源：站酷作者：阿G聊产品

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

评论(0) 浏览(2333)

022022-4

超实用的12个UI设计法则，大神都在用！

之晨

想要制作一个漂亮，可用和高效的UI不是一件容易的事情，这不仅需要设计师有一定的审美能力，更需要花费大量的时间，并且在设计的过程中还要不断进行修订和调整，直到自己和你的客户满意。这个过程我自己也曾经感受过很多次。

今天老王将跟大家分享快速提升UI水平的8个技巧，通过一些易于实践的小技巧来进行简单的视觉调整，从而改善你要创建的视觉效果，希望能为你在设计项目中提供帮助。

评论(0) 浏览(2238)

022022-4

10大交互设计原则，大厂都在用

之晨

本文讲述交互设计用的最多的原则——尼尔森十大可用性原则。

评论(0) 浏览(2379)

022022-4

手把手教你撰写交互设计文档（保姆级教程）

之晨

前言：为什么要写交互设计文档？交互设计文档有什么用？

第一，交互设计师的交互设计文档就好像UI设计师的PSD文件一样用于保存记录自己的设计思路，但交互设计师负责的任务不仅仅停留在页面当中，还包括产品的需求分析、用户画像、竞品分析、产品数据分析、用户交互逻辑等等..我们都可以写在交互设计文档中做记录，为我们的交互设计提供依据。（其实就是避免开发怼你问你设计依据是啥，你就马上把分析摆他脸上，避免尴尬）

第二点是交互设计师作为产品的上游（一般开发流程是产品经理负责收集需求给予交互设计师进行交互设计，撰写交互设计文档，然后文档评审通过后，UI同学负责UI设计，接着提供前端同学进行界面开发，后端同学则根据交互稿搭建框架和业务逻辑，开发完成后进行测试，反馈测试结果，如此循环，因此交互设计师一般处于产品线的上游阶段），撰写一份标准和规范的交互设计文档是非常重要的，因为我们需要利用交互设计文档去表达我们的设计思路，通过交互文档我们可以让UI同学知道页面需要给用户表达什么情绪，达到怎样的目的，告诉前端同学页面跳转逻辑以及交互模块怎么写，帮助后端同学清晰搭建后台框架与数据库以及产品业务逻辑是怎么样的，最后测试童鞋还会拿着你的交互稿进行单元测试，编写测试用例，所以只有我们先把文档写好了，才能避免后面产品开发出现问题。

第三点也是最重要的一点就是未来我们用于跳槽加薪面试作品。内行看门道，外行看热闹，如果你面试交互设计师的时候还是带着一条长长的JPG或者是网上千篇一律排版的PDF作品集，在面试官眼中显得不入行（或许你会遇到性格好的面试官，毕竟千人千面，面试特别看人），因为专业的交互设计师在平时工作中为了避免干扰UI同学设计，只会使用黑白灰做交互稿，也很少做成一条长长的PNG或JPG，我们可以适当包装作品集，但如果过度了会让人觉得不落地，或许只停留在刚入行阶段，所以在技术面试，我们可以拿着我们的交互设计文档跟面试官叙述产品从需求层面怎样思考完成交互设计的，解决了用户什么痛点，最后取得了什么样的成果，得到了怎样的数据，我相信成功几率会大很多。（PS：用交互设计文档进行面试前请注意把公司机密信息做脱敏处理，避免发生纠纷）

1、交互文档包含什么内容？以及怎样撰写交互文档？

说了那么多，那究竟交互设计文档包含哪些内容？

一般来讲，一个基础、规范的交互设计文档应该包含文档封面、更新文档、设计说明文档、业务流程图、交互原型、垃圾桶等模块，当然了，这些模块也不是永恒不变的，有些是必须要，有些是选择性添加的，至于这些模块有什么功能和怎样进行撰写，这篇文章会逐一分享给大家~

（说明：作者比较习惯使用Axure软件撰写交互设计文档，大家可以根据自身爱好或者公司规定进行选择（例如sketch、figma、PS等等..都是可以的）。这里要引用一句话：软件仅仅是工具，并不能限制我们的思维，好的工具能让我们走得更快但不能使我们走得更远——沃·兹基硕德。）

1.1、文档封面（必须）

文档封面就相当于一本书的封面一样，用于记录产品名称、版本号、日期以及文档负责人（这样开发童鞋就能精准找到你进行撕X），只要能展示以上信息，其他信息（例如产品经理是谁等..）可以自行添加。

1.2、更新日志（必须）

以前我都习惯把更新日志放到产品文档后面，但是随着工作时间变久，我发现开发童鞋在SVN上打开设计文档后第一时间就是查看更新日志，所以后来把这一页提了上来。（是的，设计文档也是需要跟产品一样不断优化迭代的）

更新日志主要用于记录产品迭代修改的内容，让开发同学快速了解这次迭代修改了什么内容，他需要做哪些工作。我的更新日志特别简单，就只有日期、变更内容、所在页面以及备注四个字段，这里唯一注意的是，日期必须是最新修改的内容放在上面，以前的日期在下面，很多同学每次迭代的时候会在下面列进行内容添加，这样开发同学每次都必须滚到最下面查看信息，大哥，你是交互设计师，专业一点好吗。

1.3、产品项目背景（必须）

产品项目背景是一个项目的核心关键，告诉所有的团队成员我们要做一个什么样的产品，需要创造什么样的价值，就好比我们写作文时的中心句，时刻提醒着我们要不忘初心，为团队成员开发项目指明方向。

前段时间有个同学来问我，他们本来是刚开始是做校园教育系统的，但是随着产品慢慢迭代，功能逐渐强大了，最近老板希望在系统中加上财务功能，本来用户学习成本就高，如果再加上去会不会适得其反？虽然我不知道那位同学的老板产品战略是啥，背后是怎样思考的，但是在我看来这样的行为就不能是不忘初心，这顶多能算不忘出薪吧。（拒绝谐音梗从我做起）

好了，至于里面产品背景、产品目标以及定位的内容应该如何撰写？对，我抄的。一般情况下，这些内容我们都能够在项目立项文档或者在招投标书上就能找到，我们不用亲自写（但可以加以设计），再不行也能找到产品经理去了解。

或者你会说，小公司既没有立项、也没有招投标书，产品经理也是你，那该怎么办？那么你就得发挥出自己当年高考的作文水平，积极了解清楚产品背景定位，努力完成这一部分，因为信息的传递是有消耗性的，只有我们作为产品的上游做好了，才能为团队成员后面的努力提供方向。

1.4、产品需求（必须）

产品需求列表用于记录产品需要做哪些【功能点】，这些功能点我们一般能在产品经理或者项目经理上获得，我们收集需求后需要对其按照重要程度P0、P1、P2等级进行分类，我分类的原则是KANO法则（不知道的同学可以百度），P0等级是非做不可的需求，例如像微信的聊天，淘宝的支付功能等，P1是锦上添花的需求，时间紧迫的话可以下次再做的，例如微信的语音、视频聊天等..，排到最后Pn就是一些不必要可做可不做，就算做了也没太大影响的功能，就可以与领导层商讨是否确认要做。（例如炸屎，你们现在还有人炸屎吗？什么？炸屎你都不知道？那当我没说）

1.5、用户画像（可选）

所谓知己知彼百战不殆，通过用户画像我们可以快速了解产品目标用户群体特征，分析目标用户群体的期望、需求、动机等，再根据用户场景去进行设计，有了用户画像的支撑，能避免我们在设计过程中出现一些不必要的因素，例如我们目标用户是中老年人的话，那么按钮、字体就应该适当的放大、排版简单明了，而针对青少年就可以偏个性化风格设计。

当然，如果是小公司的话可能没有那么多的资源去做用户的调研，在这里分享一下我当年在创业公司经常使用的一种快速获取用户画像的方法，既快速又特别专业。

这里需要借助一个网站：艾瑞数据（https://index.iresearch.com.cn），打开后选择自己产品的类型（例如学习教育类），网站会把该类型的产品按照用户数量从高到低展示给你，然后我们选择一个差不多的竞品点击去查看他们的用户特征，最后Ctrl C+Ctrl V到我们的文档中，完成。

1.6、竞品分析（可选）

竞品分析相信大家都特别熟悉，我之前的文章也教过大家怎么进行详细的竞品分析，这里就不细讲了，虽然在交互文档中竞品分析可做可不做，但是在产品初期阶段我们如果认真做竞品分析的话能够快速了解产品业务、熟悉用户的使用习惯，同时当我们在做交互原型的时候能提供快速借（cao）鉴（xi），因此有条件的同学还是建议尽量做一下。

1.7、数据分析（可选）

数据分析时交互设计师必不可少的一项技能，也是验证设计成果的重要因素。如果缺少了数据分析而单凭个人主观因素的话，我们难以说明设计效果的好坏，毕竟现实中会出现各种意想不到的情况。

所谓“无对比，不分析”，一般数据分析都是通过数值进行对比，去查看数据相对是上升、下降、还是持平，是否跟当初设计预期的一样，对于初期的产品会更关注产品的一些DAU(日活数)、GMV（成交总额）、以及支付人数等，因为这些数据的增减是直接影响到整个产品的存活，如果产品的DAU不断下降的话，那你就要马上查找原因，及时调整，避免恶性循环。

一般情况下，像日活数那些简单的数据可以直接问后台同学就能获得，而用户某些环节的存活率、转化率等就需要利用【数据埋点】，市场上也有很多第三方做数据埋点的，例如神策数据、Growing IO等，这里就不展开说了，但是面试的时候你能说出这些就会显得很专业。

1.8、信息架构（必须）

信息架构属于用户体验的结构层，就像产品的骨架一样，而信息架构设计就是对产品信息进行构架、归类的设计，信息架构能够防止我们对产品功能点遗漏，同时也可以通过产品大体的信息架构观察出产品设计是否合理。

一般来说（干货来了），产品架构分支可以分为度和层，而好产品的信息架构在广度和层度都是恰到好处，下面我举两个反例大家就懂了：

1.产品架构的广度太广（不懂的看下图）：信息架构的广度太广意味着页面的承载信息量特别的多，没有侧重点，这样用户点进页面后会思考很久而不知所措，最经典的就是某某宝和某同城，新用户进入到首页真的模棱两可。

2.产品架构的层太深：信息架构的层太深会导致另外一个问题就是页面非常的多，要找到一些功能的话操作非常的困难，最常见的就是某些视频的取消会员流程（包括当年的ofo退费），你们是不是为了退费或者取消某APP会员百度过很多次？（反过来思考，如果某些功能你不想被用户发现，但是又必不可少的话应如何设计，你懂得）

1.9、业务流程图（可选）

绘制业务流程图的目的就是：梳理并分析优化业务流程。我知道很多同学做UI设计师的时候可以完全不管业务，直接做设计，但是作为交互设计师了解产品业务是非常重要的，因为不了解业务你就无法完成交互设计，优化业务场景。

举个例子：在教育考试系统中一般流程是：教育局出通知→学生报名考试→老师审核→报名通过→老师编排学生考试名单→学生开始考试对号入座→教育局公布成绩→学生查询成绩→考试结束，看这一些列的流程，因为关联特别多，如果对业务不熟悉的话设计起来会非常的不便，如果前期因为业务流程不熟悉而设计出错误的交互稿的话，后面就会特别麻烦。

那么如何去绘制完整的业务流程：

如果你的产品经理比较专业的话，可能会直接给你一个现成的业务流程图，那样就能省事很多。
要是没有产品经理的话，最直接的就是问用户，这里介绍我最常用的方法就是“一听二问三确认”。一听：先听客户代表或者业务方的介绍。听得过程中，不打断对方，以最简单的方式勾出主体脉络，即基本要素中的角色、活动、协作关系梳理出即可。二问：完成上一步后，就可以进行提问了。主要是沿着流程进行发问，重点放在分支、产物关系上。看看是否存在分支的情况，各协作之间是否有交付物。一边问，一边修正。三确认：最后一步就是自己讲一遍流程，和客户代表或者业务专家进行最后的确认。

1.10、交互原型（必须）

几乎可以说，上面所有的东西都是为了完成交互原型做铺垫的，我相信对大家来讲交互原型都非常熟悉，但是给大家分享几个经常犯错的点。

【1】页面尽量只采用黑白灰配色，避免干扰UI同学设计。这是大家经常犯错的一个点，毕竟很多同学以前是UI出身，做交互稿时也顺便配配色，这样会非常影响UI同学设计的（不在其位不谋其政，你做UI的时候也不希望有人在旁边指指点点吧），所以我们做交互稿时只采用黑白灰就够了，灰度大小就代表信息的重要程度，简洁规范即可。

【2】页面的跳转用连线表示其实就很方便了，真正厉害的人不会到处炫技。有些同学在交互稿上各种跳转、动态面板、中继器等花里胡哨一大堆，这样开发同学看起来特别的难受，所以很多时候用连线的方式表示往往是最简单明了的。

【3】如果涉及到多端设计（IOS、Andriod、PC端）的话，除非产品非常庞大，不然就放在同一个设计文档中，避免以后评审还要弄多个文件。

【4】创建一个适合自己的组件库，在日常设计中，80%的控件是可以重复利用的，做一个合适的组件库能节省大量时间（我整理了工作多年的B端以及移动端常用的组件，你们需要也可以分享给你们）。

1.11、垃圾桶（可选）

做交互文档时垃圾桶就相当于后悔药，因为一些页面如果删掉保存后是不能还原了的，因此在改稿时如果一些暂时不需要的页面可以丢到垃圾桶中，避免到最后用回以前的方案时重新再做浪费时间。

最后总结

好啦，文章分享的内容比较多，但是并不是每一部分都非做不可，文档也并不是绝对的规范，每一家公司交互设计师的职责可能都不太相同，所以大家可以根据自身需求因地制宜，曾经有人说过，设计的本质并不是把简单的事情做复杂，而是把复杂的事情做简单，所以我希望有一天你们能把交互设计文档做到很简单，而把产品做得非常好，然后跟我分享经验，这才是我写文章的初心。

文章来源：站酷作者：北沐而川

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。