设计每日一贴---北京兰亭妙微/UI设计公司

首页

042024-3

谈谈设计创意获取的思路

前端达人

读了一本书，杰夫戴维森的《The 60 sencond Innovation 》，讲的是

创意的获取方式

。因为国外的设计环境与国内还是有很大区别的（所以这本书的微信读书书评并不是很高），我摘选了几个我认为

适合国内现状的创意获取方法，与大家共享

。

一、关于设计趋势

设计创意是符合设计趋势的，我们需要关注设计趋势。

我觉得趋势这个词，书里面有个观点还是可以的：

关注长期趋势

。

为什么这么说呢，因为趋势不是朝三暮四的，往往会保持很长的时间。所以我们在做设计创意的时候可以适当关注长期趋势。

1.1关注社会趋势的重要性

最直接影响的就是职业生涯的发展

。譬如你是一名UI设计师或者即将毕业的学生，在当前的形势下UI设计师已经趋于饱和，你想完成一次职业方向的确定或转变，你会往哪里走？

那么你需要关注设计趋势。

如果你选择的是一个接近饱和的方向，那么你的薪资几年内肯定也得不到提高。有的设计师经常会说我做UI设计5-7年了，但是薪资依然还是1万，我

只能说你现在没有什么竞争力。

所以趁着年轻，你可以考虑换一条细分的赛道。

譬如逐渐趋于饱和的车载HMI设计，即将爆发的类似于Vision Pro的增强现实设计。。。

来自于苹果官网

1.2如何了解设计趋势

首先，最直观的就是设计大事件。

譬如苹果等著名品牌引导的设计承载方式的变革。从罗永浩推出无限屏概念开始，其实类似的空间设计就已经处于慢热状态。直到苹果正式发布了Vision Pro，这种大事件直接将增强空间设计推向了高潮。

我们可以通过苹果的官方网站，去了解Vision Pro的使用方法，以此来感受Vision pro可以改变什么？文本编辑、影视、阅读以及游戏等等用户体验与手机操作的不同点，从而延伸出未来可以商业化的场景方向，可以做预知性的推断。

有兴趣的设计师还可以通过苹果发布的

Vision pro模拟器

，来尝试性地输出一些创新的想法和创意，以此来建立自己在增强空间设计上的设计经验和竞争力。

其次，可以通过设计网站、社区和平台。

譬如优设、站酷、人人都是产品经理等一些设计资讯平台。很多设计师会将国外的一些好的设计趋势的文章翻译，我们可以通过这些文章来获取设计趋势。

再者，可以通过行业内的研究报告。

譬如艾瑞咨询发布的《2023年AIGC场景应用展望研究报告》，里面就阐述了下一年甚至是未来AIGC的发展方向。

二、经验积累促进设计创意输出

2.1经验积累到一定程度的好处

一般设计师在自身发展的同时，也都会留意身边设计师发展的如何，嫉妒和对比是很正常的。有的设计师会觉得为什么他年纪不大却能当领导，为什么他的薪资比我多那么多，为什么每次任务下来后他总是做的又快又好。。。

因为这是工作/设计经验给他带来了各种红利。

为什么经验丰富的设计师创意那么多呢？那就是

尤尼卡效应（灵感的悄然而至）

。有经验的设计师，职业生涯过程中看过无数的案例，想过无数的方案，做过无数的作品。所以，他们可以在看到问题的时候，立马给你输出设计方案。如果你能达到这种地步，你的竞争力也将无可匹敌。

2.2经验积累下的灵感输出

做到两点：

【建立方向】和【埋头苦干】

。

毕业5年内的设计师，可以不用过多的去关注别人与自己的差别，你要做的就是【建立方向】和【埋头苦干】，幸运只光顾有准备的头脑。

那些有经验的设计师也都是摸爬滚打一点一滴练出来的。过年的时候跟大学同学吃饭，设计耕耘10余载，他已经是某设计院的总监了。想想与他一起住过的小黑屋，想想我们打地铺黑灯瞎火的做项目，为了钱么？是因为热爱，想做出更好的作品。再看看他一路走来的工作历程，他基本上在一个垂直方向上深耕细作，从场馆的设计方案到制定预算，从项目投标到施工流程，整个一套流程都驾轻就熟了。

2.3不断尝试后的灵感输出

设计师们都知道，灵感不会轻易上门。

创意是被逼出来的

！这一点设计师们都很有感触。

这里的经验积累不完全是工作年限的意思，也有深度挖掘之意

。

尤尼卡效应要求我们，即使在设计工作中没有灵感的时候，继续尝试着梳理思路不断钻研，肯定会有灵感乍现的那一刻。就像书中说的那样：

因为创新是一个渐进的过程，一次加上一点思考，最终会柳暗花明。

MIdjourny输出：设计师绞尽脑汁

三、创意汇报

3.1高中低方案战略

要想实现创意被大家更好地接受，通常可以准备三种可能的方案：1.最佳方案2.中间方案3.最差方案

领导的决策，也需要有一定的参考。我们给出的方案，尽量涵盖高中低三种维度，以便进行对比。

3.2选择时机进行推荐

创意方案出来后，你可以安排一次会议/宣讲会，阐述一下自己的设计方案。聪明的做法就是在会议召开之前，先私下把方案简单过一下，以获得一定的支持。

3.3学会倾听

你在汇报项目的过程中，别人会有一些想法和建议，麻烦你认真倾听。不要着急去打断，以免造成厌恶性沟通。

3.4不要放弃

创意被否定很正常。

真正能一次通过的创意实属罕见，就好比不能因为拿不到第一就不上场比赛一样，你也不应该因为创意被否一次就永远自暴自弃。

四、创意输出需要心流状态

心流状态是指自己已经完全沉浸在设计创意中了。

心流状态可以很好地帮助设计师提高工作效率，促进设计创意的输出。

4.1如何获得心流状态

环境很重要。

对于设计师而言，通过调整周围的环境，比如说引进一些比较明亮的色彩、图片、标语等，可以大大激发一个人的学习能力。

开放、整洁、平整的表面有助于整理人的思维，所以一般来说，你的桌子越干净，就越容易提高工作效率，应对工作中的各种挑战。

五、创意伙伴日常沟通

众人拾柴火焰高。

5.1与什么样的人沟通

与相同价值的人沟通。

《探寻第一名》(Looking Out for Number One)一书中，作者罗伯特·林格(Robert Ringer)指出，持久的关系——一方为另一方提供相同的价值，双方的利益交织在一起，让这种关系持续下去——非常有价值。

因此

你找的人必定是彼此都珍视的人，可以成为创意伙伴

。你可以每个月找创意伙伴聊聊天喝喝茶充充电，获取一些新的想法，让自己的大脑保持常青常新。马云说过，企业在不缺钱的时候融资，而不是缺钱了再去融资。

设计圈有认识的大佬都很重视沟通，会经常跟身边的朋友聊天，其实这很大程度上

可以让一个人拥有多个人的经验和能力。

所以设计师应该尝试着开放一些，而不是闭门造车。

MIdjourny输出：设计师聊天

六、公司层面：讨论/沟通氛围的重要性

公司层面，应该鼓励设计师在会议上多阐述自己的意见。

很多公司是不是有这样一种现象：开会的时候鸦雀无声，只听到汇报的人胆怯地练着演讲稿或者说着自己的方案，让其他人给意见的时候基本无人举手，只能等领导给一些修改意见，

然后这个设计方案就变成了领导认可的设计方案了。

其实这种工作氛围真的非常糟糕，限制了设计师的创意的发挥，同时也让产品成为了一个片面性的产品。

6.1建立讨论沟通氛围的好处

所以团队的讨论氛围一定要建立起来。

书里这样描述：

1.当一个人感觉自己的想法受人欢迎的时候，他会想出更多有创意的点子来解决眼前的问题——有时可能会在会上发表看法，有时则是在私下里提出建议；

2.如果团队的每个成员都感觉更有满足感，他们的参与热情就会高涨。想想看，如果人人都愿意献计献策，事情将会变得多么容易啊！

6.2好好先生对设计创意的阻碍

讨论沟通，也促进了不同声音的展现。团队需要不同的声音，团队需要谦和而坚定的人来告诉我们事情的本来面目，要听到赤裸裸的现实。

感谢大家阅读。

【阿琦设计日记】，用最接地气的语言，讲述设计师成长道路上的故事。

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司

银行金融软件 UI界面设计、能源及监控软件 UI界面设计、气象行业 UI界面设计、轨道交通界面设计、地理信息系统 GIS UI界面设计、航天军工软件 UI界面设计、医疗行业软件 UI界面设计、教育行业软件 UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发

作者：阿琦Aqi
链接：https://www.zcool.com.cn/article/ZMTYwOTk3Ng==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

评论(0) 浏览(912)

042024-3

当设计遇上AI——百度APP装扮体验AI创新探索

前端达人

前言

随着AI技术的发展，越来越多的产品尝试结合AI进行功能升级，作为设计师的你是否也在面临这样的问题：如何将AI技术与场景需求更好的结合，为用户提供顺畅的AI原生设计体验呢？

本文将以AI装扮项目为例，分两部分介绍我们是如何通过深入分析用户痛点与需求，结合公司内部能力支持，找到AI创新突破口。同时发挥设计优势，在没有行业参考前提下，探寻出一条AI创新实践之路，设计主导创新方案优化落地。

第一部分：为什么要做装扮AI创新

1.百度APP装扮业务介绍

装扮是百度APP的一个基础能力，支持用户设置头像、皮肤、主页背景、套装等，以满足用户个性化诉求为目标，对设计有着较高的依赖。当前主要面临两个问题：

功能缺少吸引力：

各类装扮操作流程为选择→预览→装扮，体验单一，缺乏趣味性和吸引力

装扮资源迭代慢：

装扮资源更新对设计师依赖度较高，但手工绘图的成本高且周期长

2.装扮用户分析

通过用户调研和数据分析，对装扮用户有以下两点发现：

个性化需求难以满足：

通过装扮调研问卷发现，用户没有佩戴装扮的大部分原因是由于现有的免费装扮资源无法满足用户个性化需求

年轻群体对AI的喜爱：

装扮用户趋于年轻化，而年轻群体对智能化、趣味性产品有浓厚兴趣，同时对个性化、定制化也有着更高的要求

3.了解内部能力支撑

百度文心AI生图技术较为成熟，支持输入描述词后免费生成多张图片。

4.设计机会点

通过前面的分析，我们提出一个洞察思考：

装扮是否可以接入文心AI生图的能力，让用户自主生图并用于装扮？

我们从用户、业务、设计三方视角分析装扮中心接入文心AI生图能力的可行性和价值：

用户侧：丰富装扮玩法，提升装扮体验的趣味性和吸引力

业务侧：吸引更多用户装扮，提高装扮用户量和渗透率

设计侧：探索AI能力实际应用场景，积累AI原生设计经验；同时降低设计师生图成本，降本增效

第二部分：如何进行装扮AI创新突破

作为AI创新型项目，我们经历了三期迭代尝试，不断打磨升级AI装扮体验：1期快速试水验证效果，2期创新突破交互体验，3期结合数据持续优化，下面会从以下3个阶段讲述设计创新思考过程。

Step1：快速试水，验证玩法

首先我们快速调研了国内外具有AI生成能力的产品做为体验摸底，发现竞品在AI生图的创作体验上趋于雷同，创作页主要分为描述词输入框、选择风格、尺寸及张数等操作模块，对于普通用户来说

创作体验复杂、输入门槛高

。

在项目初期，我们希望能够快速验证用户对这套新玩法是否感兴趣，所以目标是低成本快速上线验证玩法。

我们将AI装扮流程分为4步：点击入口→开始创作→生成图片→预览装扮效果及装扮。

结合一期目标我们有两个设计难点：1.如何简化创作流程；2.如何精简步长减少折损

设计难点1：如何简化创作流程

解决思路：

在创作流程上我们决定简化方案，采取让用户选取关键词组合的简化方式来生成图片，简化创作流程快速上线验证。

设计难点2：如何精简步长减少折损

解决思路：

在图片生成与装扮预览步骤中，通过缩短路径让用户快速直达装扮预览页，减少折损。

在方案选择上，我们基于

路径更短、突出装扮预览效果

的目标，选择了方案1进行深化：

一期方案与上线数据

一期上线后装扮中心的日均设置量提升近3倍，AI装扮各环节转化漏斗较高，在各商城中，AI装扮设置量位列第二，仅次于头像，验证AI装扮对用户的吸引力较大，于是我们开始启动二期优化。

Step2：创新突破，打造亮点

对比一期直接让用户选取主体词和风格词的半自动化方式生成图片，虽然自定义能力较弱，但是生图方式更容易；二期希望增加用户自行输入生成图片，满足用户更加个性化和多样性的需求，但同时输入门槛对用户来说也更高。

现有AI生图输入门槛之所以较高，是因为一张高质量图片对生图描述词有很高的要求。我们分析发现，高质量描述词需要从画面风格、色彩、细节、光影效果、构图比例、画质甚至是相机设置等多维度来描述，专业词汇多，对于普通用户来说撰写门槛高、难度大。

这就留给我们一个难题：

如何让用户低门槛生成一张高质量图片？

结合二期目标我们有两个设计难点：1.如何创新突破生图体验；2.装扮流程整体重构

设计难点1：如何创新突破生图体验

1）思路发散

首先我们发散了两个方向：

方向1：提供高质量描述词范例让用户直接使用

方向2：辅助用户写出高质量描述词，比如提供描述词润色功能、高级描述词库叠加、按公式引导用户选择词组组合等形式辅助创作

2）框架探索

如果创作页要给用户提供丰富的引导内容，同时兼顾输入面板的稳定露出，基础平铺框架承载力有限，无法兼顾丰富引导内容的展示和输入功能的稳定露出。我们提出使用双层框架的形式，将承载“引导内容”和“输入功能”的容器拆分相互独立，在承载“引导内容”的容器中支持用户像刷feed一样上滑，同时顶层容器稳定置底展示输入功能。

3）多方案尝试

我们围绕以上两个方向进行了创作页从基础到高阶的多套方案探索。

方案收敛过程中，我们决定进行用户测试，观察用户对不同方案的理解与接受程度。

4）用户测试与痛点分析

我们找了多名不同类型的用户，观察他们对各个方案的理解和使用情况，了解用户在使用过程中遇到的问题和痛点，并制作表格记录每一位用户的反馈与建议。

汇总后得到以下发现点：

1.用户对点击推荐描述词的生成图片效果没有预期，且表示操作难以理解

2.有配图会增强吸引力，文字或步骤多会有负面影响

3.用户对风格选择没有强烈诉求

5）提炼问题迭代优化

根据测试结论1&2我们想到，能否结合方案2-1与2-2，采用图片范例代替纯文字范例，这样用户对生成效果就有了直接的预期，同时提高了点击吸引力和可玩性；根据结论3我们对现有步骤进行了简化，省略风格选择步骤，采用智能识别描述词风格或默认智能推荐生图风格，来减少用户生图步骤。

最终方案与竞品对比生图难度更低、生图步骤更短，同时我们也进行了新方案的回访，所有用户均表示新方案更简单直接，且吸引力更强。

设计难点2：装扮流程整体重构

在入口页和生成图片&装扮预览流程我们也发散了多个方案，同样通过用户测试选出最优方案。

二期方案设计

用户在装扮中心点击入口进入创作页，点击图例或输入内容后点击底部生成按钮，跳转AI生成图片页面，支持用户在当前页面预览图片、重新生成、修改描述、保存图片及分享等操作，底部按钮强引导进入装扮预览页进行装扮。

上线效果

1）上线数据漏斗分析

AI装扮2期上线后，在入口、输入页和装扮预览页转化较1期均有大幅提升，在输入难度大于1期的前提下，输入转化依然高于1期。

2）实际图片生成效果

以下是一些真实用户生成的图片，不同风格的生成质量都能达到理想效果。

3）数据指导持续优化

同时，进一步分析漏斗数据发现，虽然整体漏斗数据优于以往，但是在图片生成页的用户流失较大，于是我们开始探索在满足用户预览图片诉求的同时，是否存在能够快速进入装扮预览页的方案。

Step3：持续迭代，精细体验

3期我们以简化操作流程，提升装扮转化率为目标进行设计方案探索，结合用户在创作页点击生成按钮后希望先看到生成图片的诉求，我们3期的设计难点是：

如何在预览图片和减步长中寻找平衡？

设计难点：在预览图片和减步长中寻找平衡

1）框架探索

考虑到用户想要先看到生成图片的诉求，所以在思考方案过程中引入动效来衔接页面之间的变化，减少用户跳转的可行性。

方向1:缩短主操作路径，次要功能建立预期，后置操作；优势是层级简单，核心操作聚焦

方向2:仅预览图片结果，后置操作；优势是操作路径短

2）方案细化与测试

根据框架探索我们细化了3个方案：

为了更直观的展示，我们制作了3个方案的Demo并进行用户测试，大部分用户认为方案1更直观且简洁。

3）最终方案展示

生成中：展示重新生成、保存等相关操作，建立用户预期

生成后：展示生成图片并自动上滑，同时调起装扮预览面板，缩短装扮路径

优化后数据对比

对比2期方案，优化后方案点击生成按钮直达装扮预览页，缩短装扮路径，上线后日均装扮成功转化率显著提升。

结语

本文以百度APP装扮体验AI创新探索为例，分享了从设计视角出发，设计师如何结合AI能力进行设计创新，为用户提供顺畅的AI原生体验，并分三步推动项目落地与优化的思考过程。通过本次项目，我们也积累了一些经验分享给大家：

1.避免惯性思维，站在用户视角看问题

作为设计师，可能我们已经看过、使用过很多AI类产品，对它的玩法非常熟悉。在设计前期，我们常常理所当然的认为用户已经理解掌握生图的方法，结果在测试阶段发现即便是公司内部互联网员工，理解使用起来也有一定门槛。所以我们一定要避免惯性思维，注意时刻抽身站在用户视角，多问问自己：我们的用户群体是否能够快速理解并掌握设计方案。

2.用户测试是有效的工具，可以帮助设计师获得更深入的用户反馈，并将其转化为理想方案设计点

整个过程中，我们遇到了很多困难与挑战，尤其是在2期输入体验的优化上，在竞品创作体验千篇一律且都不理想的情况下，初期思考的方案均没有达到简单且能直接输入高质量描述词的理想效果，设计思路此时也达到了瓶颈。这时候引入用户测试是一种很好的帮助设计师“换脑”的方式，用户不会直接告诉我们理想方案是什么，但是我们可以从用户的反馈中抽丝剥茧，转化成理想方案的设计点。

3.设计方案应尽量简单直观，避免需要用户进行过多的思考和转换

通过我们多次的用户测试发现，除了大家熟知的设计方案应该尽量简单清晰、避免过多的复杂步骤和操作以外，还应该尽量避免用户需要思考转化的步骤：比如给一段纯文字示例让用户来生成图片，这个文字与图片生成的效果是需要用户通过思考并转换的，也许生图结果与用户预期天差地别。所以在调研后我们采取了“图生图”的方式，用户喜欢哪张图片，就使用它的描述词来生成相似，这样更加直观，减少在大脑里转换思考的过程。

以上就是我们的思考全过程与全部心得，希望对大家做类似AI创新型项目有所帮助。百度AI装扮项目依然在持续优化与完善，欢迎有兴趣、有建议的小伙伴，来找我们一起沟通交流～

关于我们：

MEUX,百度移动生态用户体验设计中心，负责百度移动生态体系的用户/商业产品的全链路体验设计。服务的产品包括百度APP、百度搜索、百度百科、百度贴吧、百度商业产品等。MEUX以「简单极致」为设计理念，创造极致用户体验的同时赋能商业，推动设计行业的价值和影响力，让生活因设计而更美好。

作者：百度MEUX
链接：https://www.zcool.com.cn/article/ZMTYxMDA5Ng==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

评论(0) 浏览(1220)

042024-3

B端设计语言-形色字构质动

博博

作者：啾啾复啾啾zz
来源：站酷

评论(0) 浏览(1008)

042024-3

作为设计师，你了解交互设计文档吗？

博博

许多设计师可能未曾接触过所谓的“交互设计文档”。在实际工作中，这份文档是由交互设计师负责输出的，但令人惊讶的是，大多数互联网公司并未设立专门的交互设计师岗位。相反，交互设计师的职责通常由UI设计师与产品经理共同分担。为什么这些公司不选择招聘专门的交互设计师呢？

本篇文章旨在帮助设计师们全面理解交互设计文档。我们将

深入探讨其定义、作用、价值、制作方法以及核心内容

等。当然，如果文中存在任何不准确或遗漏之处，我也非常期待各位专家的指正和建议，让我们共同进步。

一、基本概念解析

交互设计文档是交互设计师的核心工作成果。

交互文档，即交互设计说明文档（英文名“Design Requirement Document”）。又称“DRD文档”。用来承载交互说明、交互原型、项目背景等内容，存档并交互项目相关伙伴的团队协作文档。

它在将用户需求转化为高可用性产品的过程中起着至关重要的作用。这不仅仅局限于绘制线框图，而是要求设计师具备明确的产品化思维，精通需求分析，构建信息架构，掌握业务流程与任务流程，同时还要有严谨规范、结构清晰的设计说明。

一份出色的交互设计文档不仅能够展现设计师的专业素养，赢得同事的认可与尊重，更可以显著减少产品设计过程中的沟通成本，提高工作效率，从而确保产品研发的顺利进行。

二、为什么需要交互设计文档

交互设计文档在产品设计过程中的重要性不容忽视。

交互设计文档是设计师与团队成员之间沟通的桥梁。

在项目中，设计师通常需要与产品经理、开发人员、测试人员等不同角色的成员紧密合作。而交互设计文档则能够确保所有相关方对产品的设计目标、功能逻辑、用户体验等方面有统一的认识和理解。这有助于减少沟通成本，避免因为理解偏差而导致的项目延期或功能失误。
交互设计文档有助于提升产品研发的效率。

通过文档，设计师可以将复杂的设计思路转化为清晰、具体的可执行方案。这不仅有助于开发人员准确理解并实现设计师的意图，还能够减少因为需求不明确或设计改动而导致的返工和延误。同时，文档中的信息架构、导航设计、任务流程等内容也能够帮助团队成员更好地规划和分工，确保项目的顺利进行。
交互设计文档还是设计师个人专业素养的体现。

一份详尽、规范的文档不仅能够展示设计师对产品的深入思考和分析，还能够体现其严谨的工作态度和对细节的关注。这有助于赢得上下游同事的尊重和认可，提升设计师在团队中的影响力和话语权。
通过不断地积累和完善交互设计文档，设计师可以逐渐构建起一套规范化的设计体系

。这不仅有助于提升个人和团队的专业素养和知识水平，还能够为公司的产品设计提供有力的支持和保障。在未来的项目中，这些历史文档还可以作为参考和借鉴的依据，帮助团队更快、更好地完成设计任务。

三、交互设计文档给谁看？

交互设计文档需要确保文档的有效性和实用性，它必须具备良好的可读性、唯一性和时效性。

产品经理

——不同公司和团队中，产品经理与UI/UX设计师之间的合作方式和输出物各不相同。有些公司中，产品经理会负责撰写包括交互说明和原型在内的PRD文档，但这种情况下往往容易出现体验层面的疏漏。当公司有交互设计师时，交互设计师需要从功能规划、信息架构到原型说明等方面全面介入，确保产品的完整性和用户体验的流畅性。此外，在某些流程中，产品经理和交互设计师可能会分别负责PRD文档和交互文档的编写，两者之间的逻辑需要相互印证，以确保产品的逻辑和体验都达到最佳状态。
UI设计师

——作为交互设计师的下游，UI设计师在项目中也扮演着至关重要的角色。为了确保项目的顺利进行和避免后期可能出现的问题，交互设计师需要尽早介入需求沟通，与UI设计师紧密合作。通过交互设计文档，UI设计师可以更加清晰地了解产品的设计思路、信息架构和交互方式，从而设计出更符合用户期望和体验的界面。
开发（前端）

——开发团队是交互设计文档的重要受众之一。他们需要根据文档中的信息来实现产品的逻辑、页面跳转流程、交互方式和动效等。一份详细、准确的交互设计文档可以帮助开发团队更好地理解设计师的意图，减少开发过程中的误解和返工。然而，在实际操作中，很多公司可能只有简单的PRD文档，开发团队可能只是简单地浏览一下，这可能会导致开发结果与设计师的初衷产生偏差。因此，交互设计师需要与开发团队保持密切沟通，确保他们充分理解和遵循交互设计文档中的要求。

交互设计文档在产品开发过程中不仅能够帮助团队成员更好地理解和实现设计师的意图，还能够促进团队成员之间的沟通和协作，确保项目的顺利进行。因此，我们应该高度重视交互设计文档的编写和管理工作，确保其在项目中的有效应用。

四、交互设计文档应包含哪些内容？

一份最基本的交互设计文档需要包含：

封面、更新日志、需求分析、产品架构、任务流程图、页面流程图、交互规范说明、交互原型、废纸篓

等模块。

封面

——包括产品/项目名称、版本编号、撰写时间、撰写人、参与该项目的各方负责人，便于后续查阅及版本管理。

更新日志——包含具体新增或修改的内容，修改人，修改日期等信息。

在实际工作中，方案的修改和优化是不可避免的。更新日志方便项目成员一目了然关注到重点更新的内容，也方便开发找到对应的负责人进行沟通，提升工作效率。

需求分析——包括产品名称、项目背景、目标用户、用户目标、产品目标、产品目标、使用场景、设计目标与设计思路，方便项目相关人员快速理解项目背景，总结回溯项目设计。

需求分析是产品设计过程中至关重要的一步。它涉及到深入理解用户需求、业务目标和产品目标，以及将这些需求转化为具体、可执行的设计方案。在进行需求分析时，设计师需要与用户、产品经理和其他利益相关者进行深入的沟通与合作，确保对需求的全面把握。通过收集和分析用户反馈、市场数据、业务策略等信息，设计师能够挖掘出用户最真实、最根本的需求，为产品设计提供有力的指导。

产品信息架构——包括复杂内容的信息组成，展示完整的项目内容整体信息架构图。

产品信息架构是设计过程中的关键环节，它负责将产品的功能、内容和用户体验进行有序、清晰的组织与呈现。一个好的信息架构不仅能帮助用户快速找到所需信息，还能提升产品的整体可用性和用户体验。在构建信息架构时，设计师需深入考虑用户的信息查找习惯、浏览路径以及产品的核心功能。通过合理的信息分类、层次划分和导航设计，信息架构能够将复杂的产品内容变得易于理解和操作。

图源：龙爪槐守望者

业务流程图——产品主要业务流程图概述，用于描述主要功能业务流程（泳道图/单向流程图）。

业务流程图是一种视觉工具，用于清晰展现业务运作的逻辑和步骤。通过业务流程图，团队成员可以直观地了解业务的全过程，从而更好地协作和执行。绘制业务流程图时，设计师需要深入了解业务需求和流程细节，将每个步骤、环节和决策点都清晰呈现。这样的图表不仅有助于设计师梳理和优化业务流程，还能帮助开发团队准确实现业务逻辑。

图源：滴滴出行业务

任务流程图——产品任务的流程化表现，一个主流程，多个次要流程。每个任务用一组流程图表示。

设计师在绘制任务流程图时，需要细致分析每个任务步骤，确保流程图的准确性和完整性。流程图中的箭头、符号和文字说明等元素，能够清晰呈现任务执行的顺序、条件分支和循环等逻辑关系。通过任务流程图，用户可以更加清晰地了解任务的执行过程，减少操作失误和不必要的困扰。

页面流程图——带有页面形态的任务流程图。

页面流程图是设计过程中不可或缺的一环，它细致描绘了用户在产品使用过程中，不同页面之间的跳转、交互和逻辑关系。在绘制页面流程图时，设计师需要关注用户的行为路径、页面间的转换条件和可能的交互动作。通过流程图，设计师可以清晰地展现出用户从进入产品到完成目标的整个过程，以及期间可能遇到的分支和循环。

交互规范说明——原型设计中出现的公用组件，通用样式集合。

交互规范能保障产品内不同模块的设计一致性，同时提高不同设计师间的设计、协作效率；通过定义标准规范，提高流程、组件复用率，提高整体开发效率；让用户能够在产品全局感受到统一且完整的体验，降低使用成本和学习难度。

交互原型

——带有交互效果的页面结构设计，包括原型界面、设计说明等。

废纸篓

——放置多版本稿件。

五、总结

深入探索交互设计文档与用户体验的核心关系

。在产品设计的过程中，交互设计文档不仅是形式上的必要文件，更是设计师与用户、业务团队之间沟通的桥梁。它的核心目的在于确保设计的方向符合产品的整体战略和用户的真实需求。

用户体验是产品设计的灵魂。

设计师需要深入了解用户，挖掘他们最根本、最真实的需求。这不仅仅是通过问卷调查或用户访谈，更是要站在用户的角度，思考他们在使用产品时的每一个动作、每一个决策背后的原因。只有这样，设计师才能为用户带来真正有价值的产品体验。只有这样，才能确保设计出的产品既符合业务目标，又能为用户带来卓越的体验。希望每一位设计师都能在职业生涯中不断进步，为用户和业务创造更多的价值。

作者：Oceans1de
来源：站酷

评论(0) 浏览(1043)

042024-3

简洁之美，细节成就卓越：打造极致移动端弹窗体验

博博

细节成就卓越，从精致弹窗设计开始。

在移动端应用的世界里，弹窗不仅是信息传递的桥梁，也是用户体验的微妙触点。一个精心设计的弹窗能够在正确的时刻捕捉用户的注意力，以一种既美观又功能性强的方式提供必要信息或引导用户操作。从视觉清晰度到操作简便性，再到出现的时机和频率，每一个细节都关乎着用户对应用的整体感受和满意度。让我们一起探索如何通过细致入微的设计思考，打造既符合业务目标又让用户感到愉快的移动端弹窗，提升体验，创造细节之美。

作者：Miao_C
来源：站酷

评论(0) 浏览(1141)

042024-3

如何利用动效打造B端的用户体验

博博

说到B端后台产品，我们会想到业务复杂、信息庞大、用户角色多、页面层级深、使用门槛高等特征。这些特征让后台产品在设计时更强调“简单直接”，无需多余的设计元素，相比之下，没有C端产品有趣。而作为B端后台设计师在工作中会面临很多复杂场景的设计需求，有时候需求方未必能理解设计理念，会让设计师陷入“头秃”的状态。针对B端后台产品某些体验问题，我们可以借助动效的力量去解决。

下面将结合工作经验，以及线上文章，分享如何利用动效来提升B端后台产品的体验。

主要分为两大块：

使用动效不是为了炫技，而是辅助解决设计中发现的问题。我们要思考的是，眼下的问题结合动效能否达到1+1>2的解决效果。设计方案除了要得到需求方的认可，还要有开发团队的支持。设计师做到从痛点中出发，于可行处落地，才是有效的设计。那什么场景下的问题可以考虑结合动效呢?

1、信息量折叠收纳

B端业务的复杂程度决定了产品的信息体量，这也考验着设计师设计页面时，能为用户在有限的空间里获取多少信息。举个例子，用户的办公设备是小型笔记本，它的屏幕小，用户一屏看到的内容有限。这时需求方建议减少留白，压缩空间，信息往上堆积，页面最后会拥挤不堪。庞大的信息体量力求对用户的吸收效率，也对设计造成困扰，针对这种情况我们可运用“折叠收纳”法

应用案例1: 按钮折叠

如果一个页面的按钮太多，可“折叠”按钮。以下面的科目树为例，每个科目有若干个功能按钮，如按钮全部展示，不利于用户聚焦重要信息。用户必定是先看科目标题，如有需要才对科目进行操作，基于这个思路可把按钮折叠起来，待用户鼠标悬浮至科目才出现按钮。在恰当的场景下将按钮折叠，有助于精简页面结构。一个页面按区域划分功能区和信息区，信息区被文案铺满了，可简化功能区的表现形式。比如按钮和解释文案，可对解释文案进行收纳，用户鼠标悬浮上去显示。对于用户来说，一个按钮的含义只要使用一次便清楚。

应用案例2: 内容折叠

B端后台因信息量大有很多长页面，这时可在用户进行页面滚动浏览时，根据用户滚动的内容进行折叠。如下的筛选项占据了页面头部一定的空间，用户滑到结果列表内容时，已选项固定在顶部精简展示。

小结:通过“折叠收纳法”优化页面布局，根据用户的操作行为给予内容变化，帮助用户降低信息量过大带来的阅读疲劳，也让设计师在有限的设计空间里“堆积”信息。

2、对路径进行引导，及时给与用户反馈，提高效率

B端产品会有极其复杂的功能，这些功能通常用步骤条来拆分，引导用户分步完成。面对复杂功能。需求方希望

在页面的各个位置添加用法提示文案。但用户并不想阅读一串串文字，这时可结合用户的操作行为，及时响应引导下一步操作。

应用案例1:

操作响应如下的这个页面需要用户把左边的字段拖拽到右边生成卡片。当用户拖拽时，给予动效反馈让用户感知字段拖拽方向。这种可视可感知的方式帮助用户快速掌握用法，提升效率。

应用案例2:引导响应

在工作中我们也许会接到类似的修改需求:“按钮不够突出，不够大，要又大又突出”。你看完后心里想:“还不够突出吗，要这么大干什么呢?”这时沉住气，分析修改的根本目的，它想要突出的目的是什么?

1、这个按钮在整个页面中承载极其重要的功能，视觉上用户需立刻注意到2、点击按钮后的内容十分重要，希望增强点击欲。

当用户鼠标悬浮至按钮时，及时响应引导，一个箭头既起到醒目作用，也引导着用户去往下一步。

小结: B端后台页面信息繁杂，功能多。通过动效帮助用户在使用过程中增强反馈和引导，正确的引导能缩短用户的操作路径，提升效率。

3、增加情感化体验

B端后台产品大部分是给专业人员使用的，信息表单居多，页面内容相似，比较单调。加入适当友好的情感化式效可以提升产品的趣味性，减少用户使用的倦怠感。

应用案例1: Loading动效

常规的Loading动效通常是一个圆在转圈，当用户面对长时间加载时，一直盯着一个圈会产生焦虑感。情感化Loading动效可总结为两类:

1、产品本身有一个IP形象，可围绕IP进行创作。例如“加薪猫”，加载的时候猫咪追着钱币奔跑，增加了跑步流汗的细节，提升它已经在努力加载的形象感;

2、根据Loading的文案进行拓展设计，提取文案元素，图形场景化，分散用户等待的焦虑。

应用案例2:化抽象为形象

有些B端产品的业务背景专业而又抽象，可借助动效的力量化繁为简，化抽象为形象。以下面数据字典为例。用通过该字典进行与业务相关的字段查询。该页结构较简单:搜索栏和热词入口。我结合模块名称，对特征进行具体物化，在页面加入字典和放大镜元素。通过物化让用户快速感知该模块的作用。类似的大入口页面也可以运用3D效果，它能让物化更加立体。

比较常用的动效设计工具有: Ae、Principle、ProtoPie。这里分享一下我在工作中常用的并能解决大部分问题的工具。

1、Principle:快速制成交互动效演示Demo

Principle是一款只能用于Mac OS系统的交互设计工具，它的操作界面跟Sketch类似，学习成本较低。它搭配Sketch使用，能对界面做转场过渡动效和一些细节的交与动效。当你想提出某个交互动效提案时，可用Princidle快速制成演示Demo，导出GIF或视频给到需求方，让他们快速明白你的想法及可行性后台界面演示demo可直接选择箭头光标，呈现效果更贴合真实场景。

2、After Effect: 适合各种场景下的动效制作

AE是绝大UI设计师必备的动效制作工具。它支持Mac OS和Windows系统，其自身有着强大而丰富的特效库。现在也能通过AEUX插件，把Sketch里的图层直接导入到AE使用。AE的功能大而全，日堂工作中多用干制作情感化需要的图形动效，比如Loading、lcon点击动效等等。

小结: 设计师需要学习和掌握的软件很多，软件更新迭代的速度也很快。可选择能解决工作中绝大设计需求的软件精学，其余可在空闲时作为知识技能储备来学习。

总结

做适合的动效为B端产品体验赋能

当你在设计一款从0-1或是重构的B端后台产品，你可重新定义设计风格、规范控件。当你是半途介入一款风格规范都已相当成熟的B端产品，通常遇到的问题较为繁琐，可能是对一个按钮、一个颜色、一句文案去精打细磨。这时设计师需提升产品全局观，在设计过程中对遇到的问题层层剖析，洞悉设计的发力点，并在恰当的场景下紧贴产品特性和业务需求，提出恰到好处的动效方案，以小点出发，真正为产品的体验赋能。

作者：CNLILY
来源：站酷

评论(0) 浏览(1129)

042024-3

用视觉策略助力产品客户价值传达

博博

视觉策略：场景图形化

我们知道对于 PaaS 类产品而言，产品的客户价值传递是非常重要的，它决定着产品的增长获客、销售收入等。然而视觉设计师有时候会对所能提供的价值而感到方法有限，在完成了基本的页面布局、层级、组件的构建之外还能做些什么帮助产品传递客户价值。我们尝试为大家介绍一个设计方法“场景图形化设计”。

场景图形化设计是什么？

其实场景图形化的概念非常简单，它的核心点在于一方面将我们希望传达给用户的信息进行情境或情节的场景化构建，另一方面则是将构建好的场景通过图形化的方式进行视觉表达。那么为什么它可以帮助我们进行客户价值的传递？我们先简要的分析下它的原理。

场景图形化的原理

一般情况下我们认为用户产生某个行为背后的原理是，用户接受一个情境的刺激，然后会根据已有的认知经验去产生一个主观的期望效果，并产生与之对应的行为，行为产生的结果反馈又会成为认知经验，从而对下次行为产生影响。

用户行为原理

而场景图形化就是在情境刺激这个阶段，通过将业务概念场景化或者情境化，然后用图形的方式去表达场景或情境来增强客户受到的感知，影响他的主观认知，从而更好的促进后续的行为。因为人类是视觉动物，图像对我们的吸引力是远大于文字的，将复杂、艰深的业务概念通过图形的形式表达出来，相比单纯的文字描述有着巨大的优势。

图形化设计优势

场景图形化的项目实践

在了解到场景图形化的含义和原理之后，我们接着来看在（小程序平台）这个 PaaS 产品里我们是如何运用这个方法的。

1.业务场景图形化，传递产品客户价值

其实在 B 端的视觉设计中图形化的表达方式已经屡见不鲜。但是在 PaaS 产品中，我们认为左侧这种常见的抽象化的表达形式其实并不适合，它虽然能够满足本能层和反思层的设计表现，但是在降低业务理解门槛这个需求上并不能提供足够的帮助，或者可以说情境刺激的强度不够。

象化的图形设计方式在于把抽象的、看不见的事物通过提取、转化等形式变得看的见、容易理解。这显然更加符合我们希望增强情境刺激的效果，当然抽象化的表达方式在营造氛围和表达一些同样的抽象概念时也有自身优势，综合来看我们决定以具象化为主、抽象化为辅的形式来进行核心情境的图形化表达。

以（小程序平台）控制台概览页为例，在这个场景里我们希望客户能够快速地了解并体验小程序平台的两个核心价值点，于是我们把这两个价值点梳理成了两个场景，那么相对应的我们就需要将这两个场景进行图形化。

首先我们需要拆解文案中的描述，将文案转化为一个情境描述，这也需要交互设计师配合在文案设计阶段，就采用相同的设计方法首先将文案场景化。当然如果是一个非场景化的文案，我们也可以试着将它情境化。

接下来，我们根据转述好的情境来构建整个画面元素，在这里我们将画面分为了主体区和背景区，来表达重点的标题和次重点的正文。在实际操作中也可以根据现实情况来灵活调整。

完成图形的构建后，在质感选择上因为希望映射现实世界，所以我们放弃在质感上过多修饰，使用了一些写实的金属、塑料、玻璃质感来营造整个场景氛围。

最后运用相同的设计方法完成这个场景的图形化构建。

以上的思路就是一个典型的场景图形化的设计方法。从围绕文案的拆解来构建图形元素，到映射现实实体的质感表达我们的目的都在于让场景变得更加生动更加可理解易理解，从而最大限度的对客户进行情境刺激。秉承这个思路，我们在产品的整个用户路径中，对于关键场景都采用了这种图形化的表达方式。

2.品牌传递融入场景，构建品牌认知

接下来从品牌维度来看，品牌价值是客户价值在品牌侧的体现，品牌价值的构建对客户价值传递有极大的帮助。我们希望客户在理解到产品的客户价值后，可以进一步的记忆它。针对这个维度，我们的想法是在场景图形化在搭建中融入和露出品牌，同时贯穿整个用户路径，一方面潜移默化完成品牌认知构建，另一方面增强客户价值的记忆。