这一篇讲述如何画出微博客网站的原型，从专业分工的角度这一环节叫交互设计。既然讲到这里了，我也顺便讲一下我对这方面的一些理解。先推荐大家多看几本《Web信息架构设计大型网站》、《人机交互》、《用户体验的要素》。因为这一层面不太需要商业的sense，也不需要懂多少技术，只要满足用户的浏览需求、交互需求就可以了。

一、充分考虑应用场景

 
一般我们讲到产品设计的时候，经常提“场景”这个词，是的因为产品经理在产品设计的时候，充分的考虑到由于场景的不一样，以及影响的包含用户行为和用户诉求的容器不一样，而导致的信息构架或交互方式也为之更改。主要一个宗旨是：结合场景以更好的符合用户的习惯。那说到底，产品设计、原型设计的创新，是基于应用场景的创新，交互方式的优化，也是基于应用场景的改良。

 
去年我在《谈交互设计需注意的规范与创新》一文中也零散的讲到了场景一说，有兴趣的朋友可以看一下：http://www.kuliqiang.com/?p=437 原文。

二、建立一个合理的信息构架

 
信息构架，可以组织信息和设计信息环境、信息空间和信息体系结构，以满足需求者的信息需求，信息构架也成为了信息序化和优化的思想和工具，以帮助人们在异质的信息空间中管理和获取信息。

 
无论产品设计者还是专业的交互设计师，一般采用：概念设计→整理信息结构→设计信息界面（包括：组织系统、标签系统、导航系统、搜索系统）→最后展现信息架构。

三、充分的情感化设计（很重要的说）

 
和重视产品的功能的实用性设计，不一样，用户在访问你的站点时候，可能你的站点的风格、提醒方式、入口的摆放，明显操作区域的设计，就会让用户产生：“愉悦“、”烦感“、“易懂“、”容易记忆“等很多感觉，所以我们可以通过对用户的分析试图将一些情感化的元素最后传达给用户。

 
因为：情感是非常重要的，我们不应该忽略它。情感是与价值上的判断相关的，而认知则与理解相关紧密相连；细化一下，情感化设计，可以：感官(Visceral)、行为(Behavioral)和反思(Reflective)三个层面去影响用户的感观。

日常我们在设计产品的时候，通常为把对商业需求的处理设计整合到业务构架中去，把情感化设计和、场景的融合整合到信息构架中去，因为通常这些要素是通过一些语音、交互的效果、布局的形式得到体现的。所以信息构架占了产品设计一块比较多的时间。OK,既然很多功能结构的东西通过mind-manager输出了，那我们可以开始进行网站的原型设计了。

一、首先，对前台进行概念设计。

 
产品经理的概念设计，确切的说是：产品经理或产品设计者站在定性的角度，把产品需求的要素打散、逻辑重组、定向抽取，最后通过点、圈、线、框体有机组合。有一点像用例的行为图，也有一点像逻辑示意图。

 
概念设计的产物，可以在直观的Demo图出来前，在逻辑层面上进行快速的梳理和调整。把握用户需求，挖掘用户使用需求，满足用户使用需求，此外还可预留用户私有或共有的场景，进行交互场景交互方式的低成本创新。
如下图（一个简单的概念图）：

二、其次：对信息结构布局，画线框图。

 
线框图最后是要成为前台开发遵循的布局标准。所以这一步很考验产品设计者的功底，一个合理的sitemap、一个合理的全局导航、搜索和帮助反馈入口、标签tag的处理，以及很多信息单元体的组织布局。

 
最后用户可以很方便的在网页载体上，方便的浏览、方便的操作。这里值得一提的是：一个好的线框图设计的时候，基本上上线后流量的引入、流向的数值会和产品设计者的预判断想符合，而不仅仅是觉得别人的网站推荐区域放在左上焦点图的位置，我也这么设计。通常在几个作品上线后得到的数据反馈
如下图（一个基本的线框图）：

三、最后填充线框，并对交互细节的设计。

 
大体的线框图画好后，产品设计者就开始对交互的细节进行考虑。因为作为一个产物，交互的风格、样式、甚至tips的文本规范都得要一起考虑，这样才会形成统一的输出给用户。此外前端的web层在业务交互，提醒反馈上，也要考虑系统的实现性能，以及业务的特性。这两点也在一定程度上制约了交互的方式。

 
如我们在微博客网站交互设计的时候，很多对消息通道的到达提醒都采用了页面无刷新的提醒方式，这样很多Ajax、jQuery的表现方式是不是可以考虑；另外在发布微博客文本框的设计上，由于微博客的业务字段长度为140个字，那么自然而然剩余输入字数、超出字数的可视化反馈是不是可以给予考虑，自然文本框的大体宽高和布局也就可以在交互细节层面确定下来了。
如下图（一个表单的设计图）：

好的，我们继续往下，开始画线框图了，把几个重要的模板页面拎出来归类，技巧：很多结构相同的组成一个axure的模块页面就可以反复用了。刷刷刷，没多少的功夫基本上把需要做的微博客页面的站点地图给弄出来了，然后基本框架的模板页页弄出来了。差不多万事具备了吧。O(∩_∩)O哈哈~

如下图（一个axure源文件的页面类型）：

如下图（一个axure全局框架模板）有了这个保证你2天画一整套原型一点问题都没有：

本文作者: 费杰　

发表日期: 2010-04-05

文章链接: 手把手教你设计微博客网站【6】

关 键 词 : SNS, 微博客