怎么去写网站的交互设计文档

2009-12-27 23:05:13 来自: zhkzyth(做只蜗牛爬啊爬)

卡在这里了~书没看多少，但要开始去架构一个新的网站，忽然不知道如何下手。
在用户体验那本书里，我大概了解了一个产品的生产流程。简单版的话，我的理解：
1.从用研组那里拿到用户模型等信息
↓
2.挖掘需求
↓
3.确定功能
↓
4.信息架构
↓
5.交互设计
↓
6.原型设计（demo）
↓
7.视觉、code~
对于我来说，让我困惑的是，交互设计应该描述哪些东西。我知道不同的产品有不同的设计维度，文档也不会一样。
那就拿最普通的网站来说吧，设计文档又要包括哪些内容呢？
目前我所知道的是，页面之间的跳转......
好吧，有没人愿意写下一点看法呢？或者更好的是，有哪些书和网站会涉及这方面的？
写得有点多，希望有人会回复~~

2009-12-30 11:11:24 ╃魔ポ方块╃

楼主说的是呀，这方面的书籍现在很多，但是一个统一的规范和标准已经商业流程确实很少的。这主要是包括不同领域的交互设计的区别很大，各个公司也都有自己的商业流程。个人觉得交互设计主要考虑用户和产品的需求，并合理的找到权衡点就可以了。
第一部分：角色与产品
lz提到交互设计是在信息架构和原型设计之间，从你的出发点考虑我觉得首先你要权衡用户和产品。这里的用户指的是“角色”，这个角色可以是一个经过充分用户需求调研后的“完美角色”（这个是用所有受众用户的理想角色，他的行为方式是你交互设计的第一步，在第二部分你可以根据这个角色设计一套可操纵的规范）。这个“产品”就是在需求阶段技术与商业目标2个维度所考虑的产品（当然也是一套可操纵的标准，这个可操纵性的界定取决与项目组人员与组成，换句话说就是后面进一步完成交互设计之后项目成员的分工。如是否有前端设计师后前实现你的交互设计等）。
个人觉得以上就是“交互设计”的第一步，也是交互设计文档中的第一步。
第二部分：交互的规范
这一部分基本是通用的交互设计规范，这里包括：
1）导航通用规范（全局导航，角色导航，图形映射导航。。。根据项目不同来分别撰写）
2）搜索的通用规范（全局索引。。。根据项目不同来分别撰写吧）
（lz可能发现这些部分和你前面的信息架构部分是分别对应的，在交互设计里面对“行为方式”“事件”“跳转”“错误提醒”进行描述）
3）分类通用规范
4）标签的通用规范
5）帮助的通用规范
6）表单录入的及时提醒与验证
7）登陆与注册，用户身份规范
8）后台管理端的相关交互规范（这里就不展开说了，lz自己可以根据需要进行撰写）
第三部分：对象的交互描述
这主要是对页面，产品中的具体对象交互方式进行具体描述（当然这部分可以在第二部分中撰写，如果项目表达，涉及到的对象比较多，可以在第三部分撰写。换句话说，这部分是全部产品涉及到的对象的交互设计）
这里lz可以做个table里面，列包括
对象编号（和信息架构对应吧），对象描述，事件，错误提醒等

最后关于楼主所说的交互文档仅仅能想到的是“页面之间的跳转”这个是很狭窄的概念，应该包括“事件”这个重要的内容，举个例子，你不能仅仅描述导航的页面跳转的指向（这个其实是信息架构工作呀），交互设计应该做的是“鼠标悬浮事件”“click事件”“激活事件”等，换句话说，用户接触到导航会发生什么事情你都要在交互文档中描述。

本人不是强力的交互设计人员，对概念也不是很透彻，只是把平时的个人工作总结给lz，不慎完整。希望大家能够提提不同意见。。。

回应删除举报广告
2010-03-04 15:38:47 [已注销]

看得迷惑

回应删除举报广告
2010-03-04 16:33:20 Ricko (www.imadou.com 日风摄影师)

交互设计可大可小的

小到一个连接是不是要 —"_blank"

大到模块与模块的衔接和系统功能开发

至于要做什么，看你公司多大的规模和人力

翻过来说，硬要划清职责的话，可以这么理解

视界或者ui设计师只管ps立面设计demo页面，其他一概不管。
然后你拿这个页面去跟老板导解释和介绍功能，要说的话和脑中思考的问题就是交互要完成的一部分

回应删除举报广告
2010-03-07 00:38:02 uitony (5→10)

虽然我的文档水平也很一般，还是发表一下我的小看法：

1 文档只是团队沟通方式的其中之一。
2 文档其实不能代替思考，而是呈现思考的结果。精美的文档也可能呈现一个错误的结论。
3 好的文档是代表一种工作态度。
4 文档细致程度最好跟团队人数多少成正相关。
5 设计规范这种东西不要过早进入文档。
6 没有最好只有最合适，不要迷恋大公司那些精美而细致的文档，也许并不适合你的团队。
7 很多人的短板也许不在文档，如果说以后大学有产品设计这个专业，文档应该是最后一课。

http://uitony.com/?p=115

回应删除举报广告
2010-03-07 01:21:35 微. (苏州的房子很漂亮。)

前面说得有点混乱，我想可能LZ想问的也是包含两个方面。

首先区分一下，一个是交付物，指作为这个环节的负责人（交互设计师），完成这个环节之后需要提交什么类型的文档。交付物主要用于不同环节之间的沟通，也会作为文档备份。
另外一个方面是文档包含的具体内容，会有哪些方面涉及。
2L提及的是一些比较细致的包含的内容。

在网站设计中，交互设计环节比较重要的交付物包括概念图，信息架构蓝图，网站地图，原型稿等，具体的内容可以参考《设计沟通十器》。

不同的交付物是面对不同的人传达不同的信息，例如：
概念图用来向战略层（例如经理）诠释你如何理解这个产品的大概念；
信息架构蓝图，网站地图帮助开发人员理解整个系统的结构：比如有什么信息需要存储，会有多少页面，可能还会包含流程等...
原型稿（也就是平时说的交互设计稿）用来向视觉设计师展示页面内容，也用来斟酌交互方式等，是最多人会涉及，所以使用最多的交付物文档....

因为涉及项目的不同，所以并不是每次都会涉及到同样的文档。
比如如果只是对一个功能优化，很可能只需要提供原形稿，然后视觉设计就可以继续进行了。

至于文档包含内容，涉及什么就会有什么，根据项目大小，也会区分细致程度。
如果是做搜索，那当然会有搜索的首页，结果页等。
如果是做搜索框的优化，那么你的交互稿可能会注明MouseOver的搜索按钮状态等等，也可能做文字说明。

回应删除举报广告
2010-03-07 01:29:50 微. (苏州的房子很漂亮。)

回到LZ提到的“页面之间的跳转”。可以举个小实例：
假如你做一个网站的登陆流程：

1. 在信息架构层面，你需要提供一个［流程图］，描述有几个页面，页面之间如何跳转，可能会出现哪些错误流程等。

2. 进一步，你可能会将这个流程图进行扩展，变成有点类似网站地图一样的，不止描述有几个页面，如何跳转，在页面上还会注明这个页面会出现哪些信息，比如可能把注册需要填写的内容分到两个页面里完成。这也可以成为一份文档。

3. 然后，你需要将每个页面的图画出来，包括页面里有什么输入筐，按钮等。这个是原型图（demo），不过在这个阶段，是低精度的，主要是看布局排版与内容。

4. 如果有复杂的交互，比如点击按钮之后在页面中展开一个额外的层，那么你需要对此做细致描述。

5. 最后，很多人会提到规范。如果你是做一个崭新的产品，可能你会要求以后所有涉及登陆的地方采用同样的设计。那么，你需要将它固化下来，说明各个部分是什么，成为规范文档，供其他设计者使用。

回应删除举报广告
2010-03-08 20:00:12 ╃魔ポ方块╃

同意Tony的说法
“5 设计规范这种东西不要过早进入文档。 ”

毕竟规范是为了建立符合自己公司和产品的业务流程标准，目的是统一协作和高效！
只要牢牢记住这点我想就会摸索出较好的实施策略！

回应删除举报广告
2010-03-13 14:50:53 西风瘦马 (世上本无事，庸人自扰之)

我的理解吧：设计规范主要的作用就是为了保证产品的一致性。

产品刚开始时候不需要，一个人做设计的时候不需要，但是产品基本定型的时候，团队合作的时候，没这份文档，比较难以做下去

另外即使有些规范可能很烂，但是后入者除了遵守，有时候真的无能为力。这个就是所谓的设计师的权力问题

回应删除举报广告
2010-03-16 11:22:00 [已注销]

哈哈多看理论然后将这些观点适当的运用到你的设计中最后写的时候复合公司的最实际的情况

回应删除举报广告
2010-03-17 17:49:40 zhkzyth (做只蜗牛爬啊爬)

好久没回豆瓣，看到大虾的回复，感激ing.......其实，我之前只是想拿些网站做分析的练习，不知道文档应该写哪些内容。不过现在想来，我太纠结于形式了。
同意tony和ricko的说法，文档需要根据实际需要。
微，我之后写的一些小文档就是按照你那个模式的，一些大的地方相同，然后细节各有各的差异。
我目前还是个学生，之前的学习花了太多时间在文档的规范这里，其实觉得没有太大的必要。整天理论，满脑子框架，并没有深入去理解各种概念本身，缺乏思考和咀嚼。比如单单一个布局，也有很多学问在里面......
再次谢谢各位大虾的回复，凡事越辩越明......=)

回应删除举报广告
2010-03-19 11:05:45 josie-zhang (简单生活，简单爱)

mark先

回应删除举报广告
2010-03-19 11:20:25 V (据贵国相关法规，该签名未予显示)

可以参考一下此书《设计沟通十器》
http://www.douban.com/subject/3348282/

回应删除举报广告
2010-03-19 12:22:55 xavier (房中介都早些死吧)

其实最最重要的是你自己的维度观念！！

回应删除举报广告
2010-03-20 16:52:58 zhkzyth (做只蜗牛爬啊爬)

@xavier:维度观怎么理解呢？

@V :这本是<communication design>的中文版？

回应删除举报广告
2010-03-29 11:52:23 majunbo (2012到了)

mark

回应删除举报广告
2010-03-29 12:55:40 柚子 (人不-折腾-枉少年)

应该写在产品文档里？

回应删除举报广告
2010-03-29 17:08:39 哉崽

我们没有专门的交互设计职位，一般都是产品经理做这些事情
画基本的原型，相关人员过一下，没问题就写成需求文档。
需求文档也很简单，按优先级，WORK三级标题基本就够了。
当问文档中结合截图，对交互细节做说明。
有些复杂的交互和流程，可能会适当补充流程图。

回应删除举报广告
2010-04-20 09:46:02 丹丹 (6月寻找。。。)

晕乎乎的。。。

回应删除举报广告
2010-05-14 13:39:29 蚂蚁 (蚂蚁用户体验设计)

其实文档就是一个形式，一种对待产品的态度，关键是自己和团队对整体的需求把握.

回应删除举报广告
2010-05-16 18:47:35 fallout

我不写文档的，通常是做出一个原型设计，再配合流程图就开讲了。技术也不喜欢看文档，写代码的思维严谨，就喜欢看流程图。如果只是网页交互设计，有时候流程图也可以省了，这方面我比较懒，呵呵，但精力会用在原型设计上，通常会连美工的设计活也包了，直观的效果是最能表达你设计思路的。（仅个人观点，供参考）

回应删除举报广告
2010-05-18 18:11:12 blues

有个东西叫prototype,还有个东西叫User Case, 还有种东西叫思维导图- -
文档只能配合来使用

回应删除举报广告
2010-05-19 18:19:58 落叶飞花

交互设计的文档基本上是整合在产品设计文档中的，关于交互的细节我一般是跟在界面前端设计后面来说明。

回应删除举报广告
2010-06-02 18:17:38 保护音乐版权

1.从用研组那里拿到用户模型等信息
↓
2.挖掘需求
↓
3.确定功能
↓
4.信息架构
↓
5.交互设计
↓
6.原型设计（demo）
↓
7.视觉、code~

--------------------------
深有体会

回应删除举报广告
2010-07-12 16:38:43 静狼 (还要签名做啥)

我们的交互设计需要完善

回应删除举报广告
2010-08-04 10:38:03 青璇 (过早退出是一切失败的根源)

如果没有用研组，那就比较麻烦了
因为信息很容易就变得不全面
在不全面的信息上设计的方案也会偏离轨道

回应删除举报广告
2010-08-04 10:56:53 V (据贵国相关法规，该签名未予显示)

@zhkzyth :这本是<communication design>的中文版？

是的

回应删除举报广告
2010-11-04 19:13:55 Momous

最近也在纠结这个问题，的确不知从何处着手

回应删除举报广告
2010-12-16 22:08:49 Xisun (且行且远且纵歌)

mark.

回应删除举报广告
2010-12-16 22:16:29 乡村名媛米大婶 (可怜之人必有可恨之处~)

mark先

回应删除举报广告
2010-12-16 22:30:08 初一

m

回应删除举报广告
2010-12-30 23:36:41 阿尔卑斯 ([ www.uxren.com ])

do only in need

回应删除举报广告
2010-12-31 13:00:25 陈大黑 (把握自己喜欢的)

我觉得不能因为文档而去写文档，更多是要考虑文档的背后作用，当你明白了文档的作用目的，自然就知道怎么下手了。再者，在某方面来说文档是一种沟通的工具，我们更应注重提高效率，降低沟通成本，反正条条大路通罗马，达到目的就好了。

回应删除举报广告
2010-12-31 13:02:51 陈大黑 (把握自己喜欢的)

我也是个菜鸟的说，很同意@蚂蚁的说法。

回应删除举报广告
2010-12-31 13:20:36 V (据贵国相关法规，该签名未予显示)

现在越来越多的开发团队引入了敏捷式开发流程，所以“文档”（传统意义的）的重要性应该下降了很多。

communication design （中文版《设计沟通十器》）的作者出了第二版，加入了一些的思考和方法论调整，推荐一读。

另外，还推荐看看Bill Buxton的 Sketching User Experience 一书。Bill强调用素描的方式，敏捷和低成本的把产品设计描绘出来，讲述用户如何去体验产品，设计团队在达成一致的产品共识和远景后，再进入产品真正的开发阶段（coding、视觉设计等）。这也算是一种交互产品文档吧。

回应删除举报广告
2010-12-31 14:08:05 HARUKA (在产品设计的路上越走越远！)

我比较同意大黑的说法。
不要因为文档而去写文档。在工作领域，文档是作为一种指导性材料在团队合作的过程中可以起到很好的沟通作用。
比如你要设计一个网站，这个网站前台是什么样的，后台是什么样的，都有什么功能，有没有什么关键的名词定义约定。网站的主要功能是什么？用户群是哪些？要实现什么样的目的？
其实后面的交互过程是在前期这些名词性和给网站定性的概念明确之后，做出相应的模型就可以清楚的告诉设计师和开发人员你想要干什么，想要什么样的效果。

在我的实际工作过程中，发现形象化的给设计师展示你想想中的网站基本样子，以及为技术开发人员明确功能定义能让建设过程中沟通工作变得更容易。

回应删除举报广告
2011-08-24 12:07:34 minyu (借到好多书啊~~好满足~~哇咔咔~~)

我只不过上网查查交互文档怎么写而已~~然后见到如此多熟人~~大黑一语惊醒梦中人~~

回应删除举报广告
2011-10-29 15:25:21 冷眼神 (性冷淡！！！)

mark

回应删除举报广告
2011-10-31 09:50:53 木偶在倾听 (asUCD.com 探寻产品的灵魂)

任何文档都只是一种手段，交互设计体现在整个产品研发过程中，从需求分析、功能定位、信息构架、概念原型、界面设计、前端页面脚本、程序、系统架构等都会和交互相关。个人认为，不要为了交互文档而写文档，去琢磨这个文档应该怎样写。而应该从产品内部需求出发，用一种手段让团队成员充分理解产品。着中手段可能是一张草图、一组PPT、一篇文档、一张表格、或一次会议……都是可以的。
个人观点仅供参考 www.asucd.com

回应删除举报广告
2012-02-12 21:22:20 光怪陆离 (我悄悄的在这里就算了。)

MARK

回应删除举报广告