交互设计文档怎么写? | 设计基础

摘要交互设计师的工作虽不只是画交互稿子,但是好的交互稿不仅能够完美阐释产品内容和设计师的设计思路,还能够在项目各方协调工作中起到重要作用。保证完整的呈现产品需求和设计思路的交互稿,能够让各方工作人员有一致的工作目标,而有良好体验的交互稿,还能够便于各方理解,提高后期开发对设计的还原度,提高各方工作效率。对于一个设计团队来说,统一的文档规范和设计规范,不仅能够减少合作方的学习成本,提升设计师和设计部门影响力。即使产品不同需求不同设计师不同...

摘要

交互设计师的工作虽不只是画交互稿子,但是好的交互稿不仅能够完美阐释产品内容和设计师的设计思路,还能够在项目各方协调工作中起到重要作用。保证完整的呈现产品需求和设计思路的交互稿,能够让各方工作人员有一致的工作目标,而有良好体验的交互稿,还能够便于各方理解,提高后期开发对设计的还原度,提高各方工作效率。



对于一个设计团队来说,统一的文档规范和设计规范,不仅能够减少合作方的学习成本,提升设计师和设计部门影响力。即使产品不同需求不同设计师不同也能够带给前后端、底层和QA们一致的文档体验。或许每一个设计团队都有自己内部的交互文档规范,而且不同类型或量级的产品部门可能交互设计文档的体量和组织方式都是不同的,我们设计部是一个刚满一周岁的宝宝,部门里的设计师也都是设计行业的freshman,但是我们也在这一年中不断地积累和学习,提升设计文档体验,构建了组内的设计文档规范,以下共享,互相交流学习。



一、结构篇-交互文档目录


无论对于大型产品还是中小型产品,文档目录均需要有清晰的页面结构,无论以何种形式展现,整体交互项目应尽量包含明确的修改记录、交互规范、全局性设计说明、业务设计等。


交互设计文档怎么写? | 设计基础


1. 便于查找信息的修改记录

  • 明确的迭代上线日期:前后端、QA们能够对产品迭代内有有一直的认识,清楚哪些是自己某一个迭代要按成的事情;

  • 业务需求及对应设计师:便于协作方进行工作分工,并能够随时找到交互设计师;

  • 修改内容以及前端开发人员:明确写明什么页面修改了什么内容,或者一个需求增加哪些页面,便于协作方了解设计细节内容。写明前端开发人员,则有助于帮助自己和QA们找到对应功能点的前端开发人员是谁(我在一个迭代中可能对接好多个前端人员,具体哪些需求点是谁实现的是记不住的,太笨了~)。



2. 全局页面说明和全局交互

全局页面说明主要包括Z轴内容层级,X轴和Y轴适配方案、整体跳转逻辑等,这些均需要在产品研发前期周知前端、视觉等协作同事的。准确传达自己的整体产品设计思路,便于他们进行框架搭建或者视觉定义。另外还可以指导后期复杂需求的交互设计。


全局交互则是为了组件化设计,不仅保证产品设计的一致性,也能够提高视觉和开发工作效率。


3. 全局性方案

全局性方案不仅包含404/403方案、全局请求异常、空状态、页面/信息流加载方案等,还包含一些业务全局性方案,比如平台性的欠费停服流程(所有产品模块均需要)。



二、布局篇-交互文档布局


1. 单页面文档设计

我们组做的基本都是 Web 端的设计,由于每一个页面的内容比较丰富且交互逻辑复杂,所以逐渐形成了每一个文档页面只做一个页面的设计的规则,保证设计文档中的页面与真实产品中的页面一一对应,便于交互文档按照产品业务组织和减少协作方查找内容时间。


单页面设计其实与一个页面只讲一件事情的设计方法相通,在表述本页面内的设计内容时要说明清楚每一个与其他页面关联的用户接触点从哪里来到哪里去,保证开发、QA们阅读交互说明的时候能够理解当前页面内容与其他内容的关系。


2. 统一页面内容布局

作为交互文档,它的目标用户比较明显的主要是与我们协作的前后端开发、QA们、视觉小伙伴,其实我们可以很简单的就了解到他们几乎90%都在使用公司配置的显示器,公司配置的显示器基本尺寸微1920*1080,所以便可以根据显示器的尺寸定义Web页面大小、交互说明显示区域等,这样便可以尽量保证在首屏内显示相关内容。

另外,根据向开发了解,他们较为习惯Y轴方向浏览信息(其实感觉大部分人都喜欢Y轴方向浏览信息),因此文档页面和交互说明布局以纵向为主,在他们单方向浏览时,保证所有交互点都能看到。


交互设计文档怎么写? | 设计基础


  • 页面头主要包括页面名称、设计师信息和时间信息;

  • 主页面可在Y轴方向延伸,X轴方向尽量不做延伸,但是不排除有特殊的业务需求需要在X轴方向做延伸(比如运营平台中有强需要在表格中横向显示十几项信息内容);

  • 交互说明主要包括交互点编号和交互逻辑。



三、色彩和字体篇


1. 尽量使用灰阶色

不少交互设计师做交互稿的时候是非常认真的,会尽量做高保真的设计,有蓝色或绿色按钮、橙色的警告图标等,有时候还会直接用视觉设计定义的视觉色彩规范去做交互稿,呈现出完美的交互稿,说实话真的是很漂亮的交互稿,几乎不需要视觉设计师做什么修改。这样完美的交互稿却在无形中对视觉设计师、开发、QA们造成了困扰。


就这个问题,我跟对接的视觉师有过深入的沟通,对于视觉设计师来说,在交互稿中出现的那些彩色其实会对他们做视觉设计造成一定的干扰,表示不同明度的灰色调其实是他们能够理解到交互设计师所要表达的意思的。另外,交互稿中彩色内容还会成为视觉焦点,跟开发和QA们有沟通过,他们表示这会无形中会干扰他们对交互逻辑和细节的关注。


就这个问题,我们总结了一些灰阶色使用的大致范围,基本来说明度低于#333灰色是尽量不用的,大面积背景是尽量不使用明度地狱#999的灰色等一些原则,也能尽量让交互看起来干净整洁和有一定的美观度。


交互设计文档怎么写? | 设计基础


2. 统一字号和字体

对于字体,其实没有特别的要求,只要统一字体即可。我们组内统一使用微软雅黑,选择这个字体纯属因为它是无衬线字体,看着简单,而且微软雅黑是各浏览器适配系统字体时的常用默认字体。


对于字号,倒是有些要求的,比如正常页面文稿中不得使用小于12px的字号,通用字号为14px,强调可用加大字号和加粗解决。字体中有一个正常页面文稿唯一可以使用的彩色,即警告色#ff6666(彩色也尽量使用饱和度较低的彩色)。


交互设计文档怎么写? | 设计基础



四、内容篇


前面说了很多见面展示的东西,内容上的话主要是交互页面和交互说明了,这是个比较复杂的事情,要针对不同类型的业务需求做出不同的页面设计,我就简单说一下需要注意的几个细节点吧。


1. 不同类型的需求应有不同的方法呈现设计

我们都知道,产品需求大致可以分为两大类:任务型和信息型需求,针对不同类型的需求要能够通过一些基本的设计方法去呈现我们的设计。


比如对于任务型需求,我们可以提供必要的流程图去帮助开发和QA们更好的理解用户在完成任务的过程中可能会走到哪里,有助于他们进行研发设计和测试设计。那么对于信息型需求,则提供信息结构图和业务架构图,让他们在宏观上能够更好的理解需求。


2. 交互说明应便于阅读和查找

交互说明中尽量字体稍微大一些,,交互说明的字体大小我们使用的16px,比一般字体会大2px,这一方面可以区分交互说明文案内容和页面内容,另一方面也便于开发和QA们阅读。


面上内容与交互说明的组织方式可以有很多中,比如画上连接线、编号标记等。我们组目前做的业务需求还是都比较复杂的,考虑到不想让页面变成编织网一样的东西,便采取了实用编号标记的方式去组织交互说明,如果交互说明中出现不同内容的点需要再次写交互说明的时候,编号采用N-N的形式,交互点钟每一条交互内容以中划线开头,交互内容中如果再有分级,便可使用无序编号等等,依次类推下去。


如果交互说明中出现与其他页面的关联,着重标出来,这样便于开发和QA们在阅读的时候能够很快定位跳转或回跳页面,明确本页面与产品其他部分的关系。


交互设计文档怎么写? | 设计基础



3. 交互说明应具有逻辑性

逻辑性或许是每一个设计师的必备属性,我们使用MECE也好,使用逻辑树分析法也好,都是让我们能够遍历或穷举我们想要写的交互点的各种情况的。这里我主要想说的是要真正的具有逻辑性,我接触的一些设计师,虽然也能对一些用户接触点做处详尽而无遗漏的说明和解释,却经常会出现说此言彼的情况,使得交互说明冗杂而不易阅读。而真正的具有逻辑性,是能够清楚自己在每一个用户接触点上想要说明的场景和处理方式,尽量减少各个用户接触点的交叉说明,保证交互说明思路清晰而内容详尽。为此我也总结了一套简单的方法,即PTC4,此处先简单的说明下,以后会专门介绍一下这个方法。


交互设计文档怎么写? | 设计基础


4. 交互流程应具有封装性

封装性的概念其实来源于研发中代码封装的概念,说的是如果一个方法被封装好了,当使用到这个方法时,只需要传入不同的参数便可以得到想要的结果。这里我引用到流程的封装上,一个全局性的需求流程可能是不一样的,定义好变量参数,便可以在不同的模块调用这块逻辑。这是比较符合开发们设计代码的主要思路的,所以和研发们解释起来是非常顺畅的,而且能够减少重复设计。



 撰文 ✎ 田莉

图片 ✎ 田莉  

/ 作 者 简 介 /


交互设计文档怎么写? | 设计基础

田莉

网易蜂巢交互设计师,做交互,会视觉,懂产品,了开发,不可多得的全(wan)栈(mei)设计师。主要负责网易蜂巢的交互设计工作,掌控各种复杂技术型B端产品的设计秘籍。


本文经网易UEDC授权转载、未经授权请勿转载


---关于我们---

UI中国 专业用户体验设计平台

主站:www.ui.cn

新浪微博:@UI中国

合作请加微信:zhuti2016

版权声明:如有侵权请联系我们

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/35185/

(0)
交互精选交互精选
上一篇 2018-02-09
下一篇 2018-02-09

相关推荐

  • 2019工业设计/交互设计考研课程全国招生

    2019考研大军将会是一支更庞大的队伍,唯有先见意识和过人的战术才能庸中佼佼。初次踏上考研队列的童鞋们难免会遇到一些问题。专业问题、复习计划、院校选择、分数线和招生指标可私信客服。[ 长按加客服好友 ]工业设计x交互设计- - - - -相信大部分同学考研担心最多的是专业科目,500分中占了300分,在工业设计考研中,快题手绘和设计理论就是你的专业考试内容,快题考察你的设计表现能力,所以,手绘很重要。说到手绘,ICAMP创意坊有着教学多...

    2018-04-10
  • 骁龙835助力VR交互新体验,自由就要6DOF!

    今天,Pico 在北京举办新品发布会上,发布了旗下全球首款同时实现头部和手部 6DOF 追踪及交互的量产 VR 一体机 Pico Neo——搭载Qualcomm® 骁龙™835 移动 VR 平台,带来更加自由、沉浸的 VR 交互体验。Pico Neo 是 Pico 旗下最新一代 VR 一体机产品,搭载了Qualcomm骁龙835移动VR平台,采用一体式 ID 设计,更轻更透气的全包布材料,配备 3K 高清显示屏,4GB 高速 RAM,6...

    2018-01-30
  • 设计×交互 | 在做交互的时候,我们可以从不好的设计与好的设计中学到什么?

    让人人都懂点儿设计设计史论全文字数 :4689 | 阅读 时长:12分钟今天史论君为大家分享一篇来自interaction design foundation的文章原文作者:TEO SLANG    |    翻译:于于于Jessica编辑:Sujay Wu转载后台回复 :史论君把不好的设计和好的设计的反面例子一起看,不仅有趣,而且为设计师们提供了重要的经验教训。它们突出了设计人员要避免的陷阱,并让我们理解如何将设计理论转化为在现实世界...

    2018-04-07
  • 小欣浅谈 | 用户体验为什么如此重要

    前言说到我们日常所使用的那些产品和服务,我们对它们的情感可谓爱恨交织。它时而让我们为之欢呼雀跃,时而让我们感到挫败沮丧。时而让生活变得简单明了,时而使生活复杂无常。即使这样,我们每天还要和不计其数的产品打交道。而我们的产品开发人员,注意力的重点往往在95%以上都放在产品本身,而用户使用过程中的体验却常常被忽视。而这部分,常常成为一个产品投入市场后的隐形“杀手”。|糟糕的用户体验以我们办公室的饮水机为例:加水的按键分为“高\中\低”三档,...

    2018-04-16
  • 以服务设计视角推动设计赋能

    作者:阿里UED 周静&谢辉敏小编说:未来的设计都应该归纳服务设计的范畴,包括用户体验设计、交互设计等,比如新零售设计就是一套完整的服务设计体现,不要等服务设计成熟了再去设计,谁先先学习,谁就抢占了先机~~为未来充点电!本文较长,读完需要点耐心~~近两年随着UED团队的探索,沉淀出了业务协同、设计增值、设计驱动三个层次的价值模型,深入剖析了设计师价值实现的不同阶段与方式。同时越来越多的设计师也逐渐意识到了只有在协同业务的全流程中利用体验...

    2018-02-13
  • 【交互设计】北京中技华软科技服务有限公司内部主题分享会第七期

    北京中技华软科技服务有限公司内部主题分享会第七期主题:交互设计时间:2018年4月23日主讲人:高旭2018年4月23日上午,北京中技华软科技服务有限公司进行了第七期内部主题分享会——交互设计。交互设计起源于网站设计和图形设计,但现在已经成长为一个独立的领域。现在的交互设计师远非仅仅负责文字和图片,而是负责创建在屏幕上的所有元素,所有用户可能会触摸,点按或者输入的东西:简而言之,产品体验中的所有交互。主讲人高旭分别从交互设计的起源、原则...

    2018-04-24
  • 中国手机行业患上焦虑症,良药便是“用户体验”!

    可以说,2017到2018年中国手机市场震荡不断。首先经历了乐视手机的倒台,接着HTC也逐渐淡出市场,而巨头之一的LG也选择了退出中国市场。除了传统行业老大苹果和三星的地位稳固外,国内众多厂商皆陷于焦灼之中,绞尽脑汁想要提升出货量排行。但可惜的是,众多厂商的动作却创新乏力,同质化严重的案例屡见不鲜。一个最明显的例子,iPhone发布“刘海屏”,许多厂商亦步亦趋,甚至模仿到了正面难辨的地步。中国手机厂商陷入鏖战,行业趋势多为盲目跟风,试图...

    2018-04-28
  • 从用户体验角度说说VR版综艺节目

    转载自913VR作者:赵丹上回我写了一些对于体育赛事VR直播的观点,今天我想说说VR版的综艺节目。最近我比较关注的两档综艺节目是《中国新歌声》和《盖世英雄》,一方面是因为我一直是《中国好声音》的拥趸,另一方面我很喜欢“潮”的东西,所以电音概念的《盖世英雄》自然很吸引我。值得注意的是,这两档节目的VR版都是由微鲸VR独家进行录制的,依托CMC丰富的娱乐资源,微鲸VR对于国内众多娱乐IP进行了VR版本的制作,今天我就主要结合这两档节目来说说...

    2018-04-07
  • MECC UED年终惊喜大放送

    时间是让人猝不及防的东西;岁月是一场有去无回的旅行。岁末年初,我们用一场部门小聚来辞旧迎新。有美食,有美景,更有大惊喜哦~首先要感谢在背后默默筹备了1周的工作人员,感谢组织为大家准备了这个充满惊喜的小聚会~感谢她们!👏👏👏👏👏这次我们年末小聚的地点是位于岭南天地——Loccy餐厅三楼那一天天空很高,风很清澈,从头到脚趾都快乐(就是有点冷)清新的绿植、简约的装饰、精致的餐具~最吸引人的还是这满满的礼物堆!现场准备了许多小道具供大家卖萌装逼...

    2018-02-24
  • 上海benhealth招聘实习生 150/天

    回复「简历」,送你优秀简历模板。岗位岗位实习生岗位职责参与公司移动端、小程序以及 PC 端 Web 产品的交互设计;与产品经理和开发人员共同完成产品开发。岗位要求1. 平面、视觉传达相关专业本科或以上学历;2. 熟悉 Axure 和 Sketch 等交互设计工具;3. 热衷网络文化,熟悉网络热点和主流 App;4. 良好的沟通学习能力,工作热情高,责任感强。薪资福利150 元/天工作地点上海简历投递投递邮箱:jun.pan@benhea...

    2018-04-08