目录

//交互设计//

「设计之下」---交互设计：交互设计师是做什么的？上线的产品中那一块是交互设计师的产物呢？

·项目启动

1.1「设计之下」---交互设计：项目启动之从想法到项目，什么是项目？

1.2「设计之下」---交互设计：什么是项目启动会？什么时候开项目启动会？

·解析需求

2.1「设计之下」交互设计--解析需求之交互设计的“五要素”，阅读产品文档

2.2「设计之下」交互设计--解析需求之交互模型

2.3「设计之下」交互设计--解析需求之功能系统

2.4「设计之下」交互设计--解析需求之信息架构

2.5「设计之下」交互设计--解析需求之工具与方法及小结

·原型设计

3.1「设计之下」交互设计--原型设计之概念设计

3.2「设计之下」交互设计--原型设计之低保真原型

3.2.1「设计之下」交互设计--原型设计之绘制低保真原型

3.2.2「设计之下」交互设计--原型设计之低保真原型的其他样式

--高保真原型--

在前一个阶段中已通过低保真原型进一步明确了需求并确认了设计方案,接下来就进入了交互文档的撰写阶段。交互文档与产品文档插入的简易线框图不同,交互文档几乎包含所有的画面的线框图和说明,在比例和布局上也非常接近真实比例。交互文档是交互设计阶段最主要的“工作成果”,是将产品需求视觉化的第一个过程,更是交互设计师思考和探索成果的载体。

3.3.1交互文档面面观

1.看起来“很单调”

交互文档应该是黑白的,以线框为主辅以一些灰度色块(图1-3-15),在非常需要的时候才可添加少量的颜色(例如强调评论列表中的人名是可以点击时)。

为什么不需要色彩呢?因为交互文档并不是视觉设计稿,添加颜色和效果的文档对视觉设计师而言并没有实际参考价值,最后实际的视觉效果和交互文档中所用的可能毫无关联。反而交互文档中不必要的视觉细节会让观看的人不自觉地从视觉的层面上进行思考。这样会给观看的人增加额外的认知负担,更糟糕的是可能在评审的时候引出“节外生枝”的讨论,比如:为啥这个头部是蓝色的?我觉得红色的比较适合咱们产品!

2.内容“很复杂”

首先文档应该有一个封面,上面有标题、版本号、各环节的直接负责人、更新记录和日期等信息(图1-3-16)。封面不仅能让文档看起来更规范、更专业,还能让阅读者一开始就能对文档有个初步的了解,也方便工作的交接。

由于交互文档都是分成一页一页的(除非你的产品逻辑简单到一页就可以说清楚),为了便于阅读就需要有一个目录。目录不只是要能用眼晴看,还需要能够支持方便地点击跳转到相应页面。一些软件导出某些格式可以自动生成可点击的目录,如 Axture和 Visio。目录中每页的名字通常就是这页的主要内容,可能是产品中的画面或者功能的名字,例如“首页、新闻正文页、评论列表、发表评论”等(图1-3-17)

文档中最重要的是应该尽量包含所有功能和任务的相关画面,包括无内容和失败时的特殊画面。每个画面需要有什么元素都要一一体现出来,如导航、标题、按、文案、图标等。各元素的比例也应尽量与实际比例相近,比如屏幕的长宽比和各种标准控件的大小比例。字号也最好不要用得太随心所欲,如果实际一行只能显示20个字,文档中却用很小的字号挤下50个字,如此大的差距会严重影响交互设计阶段的页面布局。越接近真实比例的线框图越可以帮助交互设计师对之后的视觉效果有个预估,避免到了视觉设计阶段遇到问题再返工。

现在在网上能找到各种软件可用的线框图模板,这些模板都是根据各个平台上各元素的真实比例来绘制的,巧用素材模板或者自己制作模板都能够在撰写文档的时候节省不少精力(图1-3-18)。

交互文档中与线框图一样重要的另一个内容就是说明文字。说明文字通过箭头或线段指向具体的对象,比如搜狐新闻直播间里的音频控件点击后会呈现什么状态、在播放一条音频时点击其他音频需要停止正在播放的音频吗?这些交互细节都需要用文字辅助说明(图1-3-19)。画面之间的跳转关系更离不开箭头和文字的帮助,一个个单独的页面通过跳转相互连接后才能构成功能。详细而准确的说明文字和跳转箭头都能帮助视觉设计师和开发人员对你的交互设计有统一的理解。

在添加注释文字时注意尽量简明扼要,大段的文字会让人失去阅读欲望。如果不得已需要较多的文字才能说清楚意思时,应该注意分成一个个条目并适当空行,这样能让文字看起来更清爽有条理。

3.元素“很统一”

好看”虽然不是写交互文档时特别追求的,但却是影响文档本身的“用户体验”的主要因素。这里的(好看并不是说线框图要多么的精美,而是指文档本身的规范和整洁。

首先文档的每一页应该尽量一样大,忽大忽小的页面需要阅读者经常调整屏幕显示比例,也很容易漏看一些内容。设定合适的页面尺寸不论是对于投影展示还是打印时都能获得很好的效果,比如搜狐新闻客户端的交互文档就是横向A4尺寸的。

文档中的一个个线框图是互相关联的,有时候设计师总想尽量把相关联的线框图放在一个页面中,觉得这样会更加直观。而实际上一页能展示的内容却是有限的,如果在同一页中堆太多线框就会挤压说明文字的空间,以后再要添加或者修改内容都会非常困难。拥挤的画面也会増加阅读时的理解难度,所以为了保持文档的易读性而多分出几个页面是非常有必要的(图1-3-20)。

文档中的说明文字各式各样,有的是对整个页面的总体逻辑说明,有的是对某个线框图的说明,还有的是对一个很小的元素的说明。这些说明都应该有相对固定的位置,比如整体说明就在页面顶端,对线框图的整体说明就在那个线框的上方,对于单个元素的说明在右侧。如果用心合理地安排这些说明的位置,不论是自己还是阅读者都能慢慢地形成习惯,那么撰写和阅读的效率也都能够得到提高。

文档中带有指向性的箭头和线段也有自己的使用规范,比如箭头有圆点的那端放在哪就表示点击此处,箭头尖指向的是点击后跳转的页面。而只有一头是圆点的直线表示对某处进行说明。箭头和线段的形状、颜色、弯曲方式也都应统一,如果有的拐直角,有的穿过其他画面,有的又拉成一条斜线,整个文档就会乱得一塌糊涂了(图1-3-21)。

对于交互设计师来说,80%的时间都用于思考和确认,只有20%的时间是真正在写文档的,而文档却是那80%时间成果的载体。只有让文档更严谨、更细致才能够让阅读者更好地了解你的想法和思考,避免因误解产生疑问,这样反而能节省更多时间。

//术心//是一个专业做设计分享的公号，每天晚上10:00-10:30，给各位分享设计经验、解决设计问题、了解设计资讯、分享设计教程，为你捋直设计之路