首页

如何写一份交互说明文档

蓝蓝设计的小编

离开交互圈已经有段时间了。但由于博客还在,还是能够偶尔收到一些邮件,上周有位同学问我:我在求职,我看到很多招聘说明上需要交互设计师编写界面交互设计文档 ,请问界面交互设计文档是什么文档?怎么编写呢


这让我想起来2009年自己在项目里也大力推行过交互说明文档(在下文中,简称为DRD),格式倒没什么限制,交互设计师自己写到界面上也行,单独文档成文也行,总之就是让交互设计师能够将界面承载不了的信息通过文档沉淀下来,降低项目里的沟通成本和风险。今天整理电脑, 翻出以前的PPT,分享之。

这将涉及到几个问题:
一. 什么是交互说明文档(DRD)?

 
所谓DRD即是用来承载交互说明,并交付给前端、测试以及开发工程师参考的文档。

 
在项目中,交互设计师的主要产出物可能依次是:site map,page flow,wireframes。有的大型项目前期,交互设计师有可能还会产出用户需求分析文档(与PD产出的市场需求文档不一样的是,URD更多侧重于对目标用户的需求分析)。

 
DRD则很少有人专门撰写。如果需要对交互设计进行说明,聪明的交互设计师往往会直接标注在线框图里,或者在项目中不断和前端工程师和开发工程师口口相传,反复验收,不断迭代修改来确保所有的交互设计意图最终得以呈现。

二. 为什么要写?

 
DRD非项目必需环节,一般情况下也不会为交互设计师专门留出相应的时间预估。没有这份文档,项目也会继续,但是可能项目会为此承担不必要的沟通成本和时间成本。严重的话,项目的质量也会受到影响。所以写与不写,交互设计师需要做把握,时间被统一包含在“线框图”环节内——如果你要写,请在评估时预留1-2天的时间。

 
那么,结合我过去的经历,谈一下此文档的必要性。

 
下图是一个产品开发项目基本的流程。


 
敏捷开发意味着很多不同角色的流程需要并行操作。如果等到产品经理的FRD已经全部敲定,交互设计师再开始去画线框图,固然会减少沟通成本和返工风险,但是同时意味着交互设计师的很多想法不被采纳。如果产品经理再强一些,他甚至会在FRD里连原始的DEMO也一并绘制出来了,功能性的需求和界面交互的需求有时无法区分太清楚——比如他会在FRD里直接要求每页条目40条,超过40条即分页。而交互设计师可能会认为像蘑菇街那样不断装载出足够长的页面会更亲和……所以,我们希望是和产品经理同时开始工作,在术业有专攻的时候相互补充。

 
同样,开发工程师也希望及早介入需求,在FRD并未确认的时候就了解需求,进而将商业需求和功能需求转化为开发工程师看得明白的开发需求清单(这个清单,大部分叫做UC,即USE CASE),当这份清单由工程师需求分析师——在过去,这个角色被叫简称为RA,但是目前已经取消此专门的职位,而是由开发工程师代表担纲此环节工作,为了便于描述,在此文里,我仍然将做这件事情的人称为RA——交付给具体的执行工程师后,执行工程师基本上可以当作一条条的checklist开始工作,而不必再思考商业逻辑和需求。同样,测试工程师也需要编写具体的文档去指导很多测试人员在开发后测试,这也是基于UC和FRD去撰写的。


 

字体的排版设计

蓝蓝设计的小编

作为设计师的我们,每天都在与字体打交道,我们常常希望能很好的使用他们,为设计加油添彩。我们常常纳闷,电脑里这么多的字体,要用哪一个?文字有这么多,怎样排版才能表达内心深处的思想?

常常说,艺术是相通的。将文字排版与音乐结合起来,用视觉化的音乐和文字排版相结合,会让我们的字体排版更容易组合,更能体现我们的设计情感。

将普通的文字赋予音乐的艺术形式,将文字排版赋予听觉的美感和视觉的美妙,更容易传递信息,表达其深层次的涵义。

当音乐响起时,电脑播放器里变化雀跃的频谱图,音响喇叭发生震动产生的声波,跳动的五线谱和乐器发生引起的变化图(A-01),都是我们体现情感的视觉化形式。

《前沿视点》——2013年最值得关注的网页设计流行趋势

蓝蓝设计的小编

 在过去的几年里,我们看到建设网站的方式发生了巨大的变化。随着浏览器对 HTML5/CSS3 Web 标准的支持的不断增强,越来越多的用户已经转移到移动平台。在 设计界,有很多独特的想法,每隔一段时间就发生变化!

   在这篇文章中,我想介绍一些我们已经看到正不断变化的趋势。其中, 许多设计理念已经存在了很长一段时间。 但是,我认为在2013年里,这些独特的想法将会更加的蓬勃发展。 网上提供了很多可以免费下载的开源项目和用户界面 ,这样设计人员可以专注于自己的领域。

移动优先的设计

  响应设计的理念并不仅仅只网站能够缩放到更小的尺寸, 设计师的意识形态也应该发生改变 。这里向大家推荐  DesignShack  上的一篇文章,其中谈到了这个想法。

  往往更容易规划最重要的界面元素,让他们排布成为一个移动的布局。 如果这些元素不合适这样,你将不得不删除一些。 同时,你可以规划布局将如何应对的窗口变大。 您将有空间包含一个侧边栏,也可能是2个,以及许多其它的页面元素。

 

谈谈构建单页布局网站的创意技术——附优秀案例

蓝蓝设计的小编

可能是因为实现这种效果比较复杂,视差滚动的概念对于很多设计师来说仍然是相当陌生。我看到过众多优秀的例子,例如像 Pixel Stadium 这样的杰出代表,这个网站易于浏览,纹理也是让人眼花缭乱。

 

像素体育场网站的布局设计界面

 

  当你向下滚动页面的时候,顶部导航栏会出现并锁定到窗口, 这使得用户可以快速跳过或转换页面到不同的部分。 布局是完全响应式设计的,会自适应浏览器窗口的宽度! 这一切都说明,单页的布局可能会非常好看,也很灵活。

20套华丽的应用程序图标,带给你不一样的视觉体验

蓝蓝设计的小编

在这篇文章中,我已经收集了20个华丽的图标集,适用于几乎任何类型的设计。这些图标有一个干净的和描述性的外观,同时遵循良好的设计原则,相信你会喜欢。

Delicious Berries

17. icons

33 Free Social Media Icons

4. icons

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档