<![CDATA[叁石博客]]> http://www.30design.com/30designblog/ PJBlog3 2011-12-05T09:47:53+08:00 <![CDATA[常见优化Flash动画的方法集锦]]> 【三石】 http://www.30design.com/30designblog/ 30design@163.com 2011-12-05T09:47:53+08:00 2011-12-05T09:47:53+08:00   但是，如果制作的Flash电影文件较大，动辄几百k的话，常常会让网上浏览者在不断等待中失去耐心。对Flash电影进行优化就显得很有必要了，但前提是我们不能有损电影的播放质量。
  1．多使用符号（Symbol）。如果电影中的元素有使用一次以上者，则应考虑将其转换为符号。重复使用符号并不会使电影文件明显增大，因为电影文件只需储存一次符号的图形数据。
  2．尽量使用渐变动画。只要有可能，应尽量以“移动渐变”（Create Motion Tween）的方式产生动画效果，而少使用“逐帧渐变”（Frame－By－Frame）的方式产生动画。关键帧使用得越多，电影文件就会越大。
  3．多采用实线，少用虚线。限制特殊线条类型如短划线、虚线、波浪线等的数量。由于实线的线条构图最简单，因此使用实线将使文件更小。
  4．多用矢量图形，少用位图图像。矢量图可以任意缩放而不影响Flash的画质，位图图像一般只作为静态元素或背景图，Flash并不擅长处理位图图像的动作，应避免位图图像元素的动画。
  5．多用构图简单的矢量图形。矢量图形越复杂，CPU运算起来就越费力。可使用菜单命令Modify （修改）/Curves（曲线）/Optimize（优化），将矢量图形中不必要的线条删除，从而减小文件。
  6．导入的位图图像文件尽可能小一点，并以JPEG方式压缩。
  7．音效文件最好以MP3方式压缩。MP3是使声音最小化的格式，应尽量使用。
  8．限制字体和字体样式的数量。尽量不要使用太多不同的字体，使用的字体越多，电影文件就越大。尽可能使用Flash内定的字体。
  9．不要包含所有字体外形。如果包含文本域，则应考虑在Text Field Properties（文本域属性）对话框中选中Include Only Specified Font Outlines（只包括指定字体外形），而不要选择Include All Font Outlines （包括所有字体外形）。
  10．尽量不要将字体打散（菜单命令为Modify / Break Apart）。字体打散后就变成图形了，这样会使文件增大。
  11．尽量少使用过渡填充颜色。使用过渡填充颜色填充一个区域比使用纯色填充区域要多占50字节左右。
  12．尽量缩小动作区域。限制每个关键帧中发生变化的区域，一般应使动作发生在尽可能小的区域内。
  13．尽量避免在同一时间内安排多个对象同时产生动作。有动作的对象也不要与其它静态对象安排在同一图层里。应该将有动作的对象安排在各自专属的图层内，以便加速Flash动画的处理过程。
  14．用Load Movie命令减轻电影开始下载时的负担。若有必要，可以考虑将电影划分成多个子电影， 然后再通过主电影里的Load Movie、Unload Movie命令随时调用、卸载子电影。
  15．使用预先下载画面。如果有必要，可在电影一开始时加入预先下载画面（Preloader），以便后续电影画面能够平滑播放。较大的音效文件尤其需要预先下载。
  16．电影的长宽尺寸越小越好。尺寸越小，电影文件就越小。可通过菜单命令Modify（修改）/Movie（电影），调节电影的长宽尺寸。
  17．先制作小尺寸电影，然后再进行放大。为减小文件，可以考虑在Flash里将电影的尺寸设置小一些，然后导出迷你SWF电影。接着将菜单File（文件）/Publish Settings…（发布设置…）中HTML选项卡里的电影尺寸设置大一些，这样，在网页里就会呈现出尺寸较大的电影，而画质丝毫无损、依然优美。
  在进行上述修改时，不要忘记随时测试电影的播放质量、下载情况和查看电影文件的大小]]> http://www.30design.com/30designblog/default.asp?id=286 <![CDATA[点击button按钮打开跳转到新页面的VBS及JS代码]]> 【三石】 http://www.30design.com/30designblog/ 30design@163.com 2011-01-05T09:07:35+08:00 2011-01-05T09:07:35+08:00
复制内容到剪贴板程序代码 程序代码

VBS: onClick="window.open('30design.com" target="_blank">30design.com/" target="_blank" rel="external">http://www.30design.com" target="_blank">30design.com/');"
在新窗口打开：onClick="window.open('30design.com" target="_blank">30design.com/" target="_blank" rel="external">http://www.30design.com" target="_blank">30design.com/','_blank');"

JS:onClick="javascript:location.href='30design.com" target="_blank">30design.com/" target="_blank" rel="external">http://www.30design.com" target="_blank">30design.com/';"

onclick="location='URL'"

]]> http://www.30design.com/30designblog/default.asp?id=285 <![CDATA[转载：全面兼容IE6/IE7/IE8/FF的CSS HACK写法]]> 【三石】 http://www.30design.com/30designblog/ 30design@163.com 2011-01-04T17:35:05+08:00 2011-01-04T17:35:05+08:00 浏览器市场的混乱，给设计师造成很大的麻烦，设计的页面兼容完这个浏览器还得兼容那个浏览器，本来ie6跟ff之间的兼容是很容易解决的。加上个ie7会麻烦点，ie8的出现就更头疼了，原来hack ie7的方法又不能用了，怎么办呢？

第一种方法：
还好，微软提供了这样一个代码：

  1. <meta http-equiv="x-ua-compatible" content="ie=7" />
复制代码

把这段代码放到<head>里面，在ie8里面的页面解析起来就跟ie7一模一样的了，所以，基本上可以无视ie8，剩下的代码只需要这样写就可以了

  1. background:#ffc; /*   对firefox有效*/
  2. *background:#ccc; /* 对ie7有效 */
  3. _background:#000; /* 只对ie6有效 */
复制代码

解释一下吧：

firefox能解析第一段，后面的两个因为前面加了特殊符号“*”和“_”,firefox认不了，所以只认background:#ffc，看到的是黄色；

ie7前两短都能认，以最后的为准，所以最后解析是background:#ccc，看到的是灰色；

ie6三段都能认，而且“_”这个只有ie6能认，所以最后解析是_background:#000，看到的是黑色

阿门！已经是最简单和最好理解的写法了，如果你是google进来的，我可以很负责任的告诉你，这种方法是ok的，我测试过。

ie8的那段兼容7的代码我也测试过了，在我现在的windos 7 测试版所带的ie8是没问题的，以后ie8正式版出来还管不管用就不知道了。

ps：如果你发现按我这样写还是有问题的话，请查看一下你的html头，看看<head>之前的内容是不是这样的标准写法

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
复制代码

这个是现在比较规范的写法，如果你是用dreamweaver做页面的话，默认也是这种规范的，切记，非这种规范写法的，兼容性不能保证

第二种方法：
要求苛刻的朋友是不愿意在页面头部增加<meta http-equiv="x-ua-compatible" content="ie=7" />这样一句代码的，因为这样的结果是每个页面都得加。那么要想兼容这几个浏览器还真得想别的办法了。早些天本站发布了一篇《完美兼容ie6,ie7,ie8以及firefox的css透明滤镜》，可能当时测试的疏忽，IE8的兼容性没有解决好，好多朋友回复说用不了。今天抽出些时间，查阅大量资料，终于解决了这个问题了。
以下是兼容IE6/IE7/IE8/FF的写法，注意下面的顺序不可颠倒

  1. margin-bottom:40px; /*ff的属性*/
  2. margin-bottom:140px\9; /* IE6/7/8的属性 */
  3. color:red\0; /* IE8支持 */
  4. *margin-bottom:450px; /*IE6/7的属性*/
复制代码

下面以一个实例的形式表现，大家可以运行代码查看一下效果

  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6. <title></title>  
  7. <style type="text/css">  
  8. #abc {
  9. border:2px solid #00f;     /*ff的属性*/
  10. border:2px solid #090\9; /* IE6/7/8的属性 */
  11. border:2px solid #F90\0;     /* IE8支持 */
  12. _border:2px solid #f00;     /*IE6的属性*/
  13. }
  14. /*上下顺序不可以写错*/
  15. </style>  
  16. </head>  
  17. <body>  
  18. <div id="abc">  
  19.    <ul>  
  20. <li>FF下蓝边</li>  
  21. <li>IE6下红边</li>  
  22. <li>IE7下绿边</li>  
  23. <li>IE8下黄边</li>
  24.    </ul>  
  25. </div>  
  26. </body>  
  27. </html>
  28.  
  29. /**************************/

  30. CSS兼容IE6,IE7,FireFox之一

    关于CSS对各个浏览器兼容是个非常让人头疼的事情了, 网络上的教程遍地都是.今天在discuz.net上发现了一篇不错的东西，就转载过来和大家共享.可以当作CSS兼容IE6,IE7,FireFox典范了，值得去记录下。发现自己很久没有转载东西。

    注：IE都能识别*;标准浏览器(如Firefox,Opera,Netscape)不能识别*；IE6能识别*，但不能识别 !important,IE7能识别*，也能识别!important;FF不能识别*，但能识别!important;

    写两句代码来控制一个属性，区别Firefox与IE6：
    background:orange;*background:blue;

    //这一句代码写出来时，你用firefox或其它非IE浏览时，会发现，写了该代码的区域背景是橙色的，如果用IE浏览，却是蓝色的，这是因为IE都能识别*;标准浏览器(如Firefox,Opera,Netscape)不能识别*；

    写两句代码来控制一个属性，区别IE7与IE6：
    background:green !important;background:blue;

    //这一句代码写出来时，你用IE7浏览，会发现，写了该代码的区域背景是绿色的，如果用IE6浏览，却是蓝色的，这是因为IE7能识别!important*，一但识别了，就执行，忽略了后面的那一句，但IE6却不能识别!important，所以前面部分跳过，直接执行了后半部份。

    写两句代码来控制一个属性，区别Firefox与IE：
    background:orange; *background:green;

    //这一句代码写出来时，你用Firefox浏览，会发现背景是橙色的，而IE里却是绿色的，很简单，因为Firefox不能识别*，而IE6，IE7都可以识*

    写三句代码来控制一个属性，区别Firefox，IE7，IE6：
    background:orange;*background:green !important;*background:blue;

    //这一句会使在Firefox在，背景呈橙色，IE7中为绿色，IE6中为蓝色，道理和前面一样，Firefox不能识别*，所以后面两句都不执行，直接执行第一句，IE7当然也能执行第一行代码，但是因为第二句，他也能识别，所以就执行了第二句代码，把前面的效果给过滤了，而最后一句，IE7是不能识别的。IE6不能识别!imprtant，本来运行了第一句代码了，第二句不能识别，那就理所当然的执行了最后一句。

     

    注意事项：

    　　1、float的div一定要闭合。

    　　例如：(其中floatA、floatB的属性已经设置为float:left;)

    1. < #div id="floatA" >
    2. < #div id="floatB" >
    3. < #div id="NOTfloatC" >

    　　这里的NOTfloatC并不希望继续平移，而是希望往下排。
    　　这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。
    　　在

    1. < #div class="floatB">
    2. < #div class="NOTfloatC">

    　　之间加上

    1. < #div class="clear">

    　　这个div一定要注意声明位置，一定要放在最恰当的地方，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。
    　　并且将clear这种样式定义为为如下即可：

    1. .clear{clear:both;}

    　　此外，为了让高度能自动适应，要在wrapper里面加上overflow:hidden;
    　　当包含float的box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。
    　　例如某一个wrapper如下定义：

    1. .colwrapper{overflow:hidden;zoom:1;margin:5px auto;}

    　　2、margin加倍的问题。

    　　设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
    　　解决方案是在这个div里面加上display:inline;
    例如：

    1. < #div id="imfloat">

    　　相应的css为

    1. #IamFloat{
    2. float:left;
    3. margin:5px;/*IE下理解为10px*/
    4. display:inline;/*IE下再理解为5px*/}

    　　3、关于容器的包涵关系

    　　很多时候，尤其是容器内有平行布局，例如两、三个float的div时，宽度很容易出现问题。在IE中，外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素级的精度。

    　　4、关于高度的问题

    　　如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。（似乎有时候不会自动往下撑开，不知道具体怎么回事）

    　　5、最狠的手段 - !important;

    　　如果实在没有办法解决一些细节问题,可以用这个方法.FF对于”!important”会自动优先解析,然而IE则会忽略.如下
    .tabd1{
    background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/
    background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}
    　　值得注意的是，一定要将xxxx !important 这句放置在另一句之上，上面已经提过

    常见兼容问题：

    　　1.DOCTYPE 影响 CSS 处理

    　　2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行

    　　3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中

    　　4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width

    　　5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式

    　　6.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行

    　　7.cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以

    　　8.FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。

    　　9.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：
    div{margin:30px!important;margin:28px;}
    　　注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：
    div{maring:30px;margin:28px}
    　　重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;

    　　10.IE5 和IE6的BOX解释不一致
    　　IE5下
    div{width:300px;margin:0 10px 0 10px;}
    　　div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改
    div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
    　　关于这个/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持，如果有人理解的话，请告诉我一声，谢了！：）

    　　11.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义
    ul{margin:0;padding:0;}
    　　就能解决大部分问题

]]> http://www.30design.com/30designblog/default.asp?id=284 <![CDATA[如何写“完”UI设计说明书--转自：由爱涉及 *UI dESIGN]]> 【三石】 http://www.30design.com/30designblog/ 30design@163.com 2010-12-24T16:19:29+08:00 2010-12-24T16:19:29+08:00 我们中的大多数人都些过UI设计说明书（或UI规格说明书），论坛里也经常会有类似的讨论，对UI设计说明书的框架和结构我就不做过多的说明了。为什么有人写了上百页的UI设计说明书，别人还是看不懂，或者说忽略了细节呢？那今天我们重点讨论一下关于细节阐述和表达的一些经验，以免写出只有自己看得懂的UI设计说明书。

我先说说我总结的一些经验吧，希望大家积极讨论：

我们的目标是：（没有蛀牙，^_^ 玩笑！）
既要清晰描述用户界面原型中的细节和交互方式，又要方便项目组的其他开发人员、需求人员以及测试人员等角色交流察看的说明文档。

主要内容包括：
1. 产品的目标和成功标准，（例如一个全新的预言项目不可能要求用户满意度在90%以上，对升级产品要求就会高一些。）
2. 产品最终用户群及产品用途（了解用户的年龄、职业、产品的使用环境等都是非常必要的）
3. 首先满足基本功能。（例如DVD机的基本功能是播放影碟，可能还有播放CD的功能等等）
4. 主要功能（在产品的几十个功能中通过用户验证和项目组筛选，选取用户最常用到的功能，将其优化，以不同层次展现于界面上。）
5. 用户界面特性。（每一款界面都有自己的特性，比如触摸屏的操作界面与手机的操作界面就算功能完全一样，结构、布局等特点也不会相同的。）

几点注意事项
1. 必须紧贴需求，围绕功能点展开。
2. 描述语言简短精确（这样别人看的时候才不会烦）
3. 保持文本的易维护性，建议使用WORD的大纲视图编写，便于更改和查找。
4. 说明书一定要有版本管理，对每次更新内容要做详细说明。
5. 图标要与名称一同提交，并说明是什么类型，如桌面图标、列表中的图标、工具栏图标、按钮图标、属性框或提示信息框中的图标等等。
6. 注意纪录，包括项目组和用户以及合作伙伴，如果在解释某一特性时令两人以上会感到困惑，那这一部分就需要更清楚的阐述了。
7. 设计与实现同步，这个时最难的了，很多设计由于程序无法实现都被“卡”掉，早期程序也无法确定是否可以实现，伤脑筋！
8. 维护UI设计说明书时不要忘记维护原型，作为UI设计说明书的补充原型是很重要的。

UI设计中容易被忽略的地方
1. 支持错误提示和撤销操作
2. 简便的安装和卸载。
3. 必要的设置和帮助。
4. 异常处理、错误消息的描述和问题回应提示。
5. 除界面上有的图标和按钮外，还要有快节键、菜单访问键、右键菜单、是否支持从其它软件界面内托拽复制文件等操作的说明。
6. 域、菜单和按钮在什么情况下为不可点击状态。
7. 状态区，用来描述界面状态的区域，通常位于页面下方。（PS存储时状态区会显示进度条）
8. 剪贴板行为，用户在我们产品中拷贝的文字或图片的局部，是否可以贴入其他程序。
9. 指针的行为，说明超过多长时间的等待时应出现沙漏状态，在文本输入区光标应有改变、有链接的地方有变为小手等
10. 声音行为，警示音、按钮触发音等
11. 统一消息窗的弹出位置、背景色、大小、布局及特色
12. 菜单栏和下拉选项等程序动作的描述，是向下还是向右弹出等。
13. 动态状态描述，如果要求窗口渐隐或渐显，那就要说明渐隐或渐显过程的时间以及方式（半透明还是马赛克）等。]]> http://www.30design.com/30designblog/default.asp?id=283 <![CDATA[用户界面浅析--转自：由爱涉及 *UI dESIGN]]> 【三石】 http://www.30design.com/30designblog/ 30design@163.com 2010-12-24T16:12:51+08:00 2010-12-24T16:12:51+08:00 不知道“算盘”算不算最早的用户界面，用户界面走到今天真是千锤百炼，要做到易用就更是难上加难，目前我想做得是普及用户界面的基本知识，以便更多的设计师接受它、发扬它。我希望用户界面在我们手中可以展现出更多的光彩。 先从图形用户界面 GUI 开始吧！ 图形用户界面有时被称为WIMP，表现了它的四种特有属性，即窗口（Window）、图标（Icon）、菜单(Menu)、鼠标指针(Pointing Device)。它的特点是操作直观、提供指针支持及界面图形化。目前图形户界面虽然不能达到较好的易用性，但是针对特定任务我们精心设计，在效果和满意度上绝对优于非图形界面。 窗口，是交互的基础区域，主要包括标提栏、支持移动和大小缩放、菜单栏、工具栏以及操作区。通常是矩形，但是现在很多软件都把它做成不规则形，例如一些音乐的播放器，看上去会更有活力和个性。 图标，是用于标是一个对象的图形标志，使一个标题或功能可以有更直观的操作。我们制作的图标有很大一部分来源于术语符号，例如最小化、关闭等，初次接触的用户可能并不理解其含义，需要区记忆；另一部分图标则是来源于生活，比较象形的，比如喇叭就是调节音量，房子表示HOME，信封表示邮件等。我们在设计时应尽量避免创造新的符号，尽量使用象形的图形。 菜单，是供用户选择的动作命令。在一个软件中，所有的用户命令都应包含在菜单中。菜单通常要通过窗口来显示，常见类型有工具栏（包括图形工具栏）、下拉式、弹出式（右键菜单）和级联式（多层次的菜单）。 指针，是一个图形，用以对指点设备（鼠标或轨迹球）输入到系统的位置进行可是化描述。图形界面的指针常用的有系统的箭头、十字、文本输入I、等待沙漏等。 HUI手持设备用户界面手持设备（个人数字助理）用户界面主要分两大类，一种是真正的图形界面风格的外观和行为（现在比较通用，多个应用程序并存），另一种是图形界面子集（在没有窗口的情况下，同时只能显示一个对象，类似手机操作）。 手写笔在某种程度上比鼠标和键盘更好用。 手持设备用户界面的设计难点在于 1. 要求更加简化用户需求，更便于输入和交互操作 2. 克服显示区域过小的困难。 3. 方便随时查阅机器内的信息，特别是通讯录，记事本等软件的设计更要求良好的易用性。 4. 个人电脑和个人数字助理之间信息同步。 WUI 网页用户界面网页用户界面非常类似图形用户界面，它的特点主要体现在导航、链接和信息。 窗口，通常位于浏览器窗口内，拥有个性的浏览及操作方式。 菜单，比较不容易操作，实现起来也需要额外的编程工作，不如链接来的直接明了。 图标，除房子表示首页外几乎没有约定俗成的图标。 指针，手形的指针出现于柯点击的链接，鼠标双击的使用被忽略，有键的行为通常是受限制的。 基于网页的软件拉进了网页用户界和图形用户界面间的距离，常见的有C/S结构，即Client/Server(客户机/服务器)结构和B/S结构，即Browser/Server(浏览器/服务器)结构。 网页用户界面组件，浏览器提供了“前进”“后退”等基本导航功能，但作为独立软件链接、按钮和导航栏是必不可少的，另外别忘了title部分的标题，搜索功能业是相当必要的。 影响基于网页的软件的关键因素是：在复杂的信息结构中导航，使用户方便并快速的找到所需要的结果或方便快速的维护信息。其实也就是易用性因素。 UI在项目中的实现无论是那种类型的用户界面，在半小时内即可让用户掌握主要功能和软件特色的都属于优秀的用户界面，我们在设计时要注意简约、美观、高效和可指定性。 在某种程度上简约和高效是相互作用的，首先对任务要清晰明确，然后把步骤简至最少，多一些单选和多选，少一些填空，最后可以把主要功能做成向导，一步步引导用户完成。 美观就不用多说了，可指定性是不可忽略的一点，一定保证你的软件对用户来讲是可调整的。最初提供的是软件入门级特性，随着用户的使用它会发现很多新的设置，可以满足用户的好奇心和喜爱个性的心理，例如更换皮肤，可以编辑屏保或者给电话簿软件加一个封皮，给每个人加头像等等

]]> http://www.30design.com/30designblog/default.asp?id=282 <![CDATA[系统设计之信息架构和导航设计 范例《剑侠3》启动界面]]> 【三石】 http://www.30design.com/30designblog/ 30design@163.com 2010-12-24T16:08:46+08:00 2010-12-24T16:08:46+08:00 系统设计，分为五个步骤：
1.战略层：目标和用户需求 （细化后，划分主次、先后）
2.范围层：功能规格和内容需求 （列表并排序优先级、工作时间线）
3.结构层：交互设计与信息架构
4.框架层：界面设计、导航设计和信息设计
5.表现层：视觉设计 （包括设置UI字体、线条、装饰性图片，的类型、颜色、透明度等等）

（以上这几个步骤的详细说明，可参见《用户体验的要素》一书。阅读后可更快地理解本文内容。）

UI信息架构和导航，是游戏系统设计的中间两步。如上橙色文字所示。

涉及的游戏开发工作包括：
1. 界面和操作流说明（策划）：在纸面上展现游戏过程的大多数细节。
2. UI编程（程序员）：UI程序员根据这里所设计的UI层次结构，定义各控件DATA，进行UI编程。
3. UI资源设计和制作（美术）：美术根据这里所提出的资源需求，设计和制作美术图片。

一个系统，分为软件系统和信息系统这两个相关联的部分。软件系统，计算机专业教程里有详细说明，这里不多说了；信息系统，则涉及商业、软件、艺术等各个领域。下面简单介绍一下信息系统：

1. 人们处理事情做决策时，需要获取信息。凡是可感知到的，例如看到、听到、闻到、摸到、尝到的都包含信息。如果得不到信息，就难以做出有效决策。在游戏中，玩家需要根据信息决策行动，这是游戏具有挑战性的前提条件。因此信息非常重要。

2. 玩家仅在需要时才想了解信息，而且同一时间能够处理的信息有限。因此，需要将信息结构化、逐步展现，以便于玩家获得所需的。信息设计和功能设计通常是相结合的，玩家在使用功能时，必然需要获得相关的信息。信息例如，功能当前状态、功能使用后的系统响应情况如何等等这些。

3. 有些信息与游戏性、可用性都无关，但是与法律条文、营销策略等内容相关。例如，健康游戏公告、开发商LOGO。这些内容也是要显示的，因此要处理好各类信息的结构关系。这关系到界面布局和画面表现力的整体协调性。

4. 信息的表达方式有很多种，每种的表现力不同。举个例子，比如要表现一个美女的容貌~~信息表达方式就有视频、图片、文字等很多种，显然，视频的表现力比图片和文字都好，包含的信息也更多。不过成本也是最高的。在游戏设计时，要根据实际条件，权衡选择用哪种表现方式。

————————————————————————————————————————————

以《剑侠情缘3》启动界面为例，下图展示了其 信息架构和导航设计框架。
（小提示：下图较大，请在新窗口中打开图片，或另存到本地察看。）

图表说明：

图表中文字、线条、边框、填充色 样式均代表了不同含义。

文字颜色含义：
红色文字：表示一个界面大框的内容简述，如控件类型、位置是否固定、对齐方式等基本信息。
橙色文字：表示UI控件及相关信息。常用控件例如窗口、按钮、面板、文本框、单选框、复选框、列表、下拉菜单、多选菜单、滚动条（垂直/横向）、进度条、模型框 等等。
靛蓝色文字：表示用文本、颜色等方式传达信息。
紫色文字：表示图片、影片等信息。这些内容需求和美术工作量息息相关。
灰色文字：表示一项设置的具体内容项。

文字底色含义：
橙色底色文字：表示所属UI的自身功能。常用的是‘关闭’、‘隐藏’。
灰色底色文字：表示自定义分类，其文字不显示在UI中。
青色底色文字：表示还有很多同类内容，共用同样的设置。

线条颜色含义：
绿色虚线：表示不关闭当前页面的情况下，开启新页面。
绿色实线：表示关闭当前页面，并开启新页面。
粉红色虚线：表示内容内部状态的详细说明。
淡蓝色虚线：表示控件使用后的情况。 //在上图中未用到，将在后续文章中展示相关范例。
黄色实线：用在实线边框中，表示使用功能；用在虚线边框中，表示状态的转换。
黄色虚线：表示内容之间有影响。（例如，功能A处于状态1时，功能B无法使用。则用一条黄色虚线，从功能A指向功能B，并在B处用附注文字说明。）

边框形状含义：
实线边框：表示UI实体。
密虚线边框：表示信息集合，内部包括UI、文本等各种信息。
宽虚线边框：表示全自动、临时性显示的UI。（无须玩家操作，达到条件就会自动关闭）//在上图中未用到，将在后续文章中展示相关范例。

边框颜色含义：
黑色边框：表示最底层的UI。（非包含关系的两个黑色边框，表示并列显示；嵌套的黑色边框，表示同一层UI的一组部件，与外框内容同时显示。）
红色边框：表示第二层UI，激活后才显示。
（以此类推，更高层的UI用其他颜色。）

————————————————————————————————————————————

信息架构和导航，这部分内容看起来仍然是很抽象的。但这是视觉设计的基础，当完成了交互设计、UI信息架构和导航设计后，接下来的UI设计工作还有两步：

1. 界面布局：
界面布局就是确定各个界面元素的位置关系。例如大小变化方式、对齐方式等等。

2. 界面表现力设计：
界面表现力的设计分两种，一种是以功能为导向的设计，一种是以美观为导向的设计。

功能为导向的表现力设计例如：重要的信息用红色、闪光特效等，都是为了有效提醒玩家。还有一些包含了游戏信息。如按钮中的一部分用灰色表示，灰色面积随着时间逐渐减少，表示该按钮要等一段时间才能用。

美观为导向的表现力设计例如：觉得某功能按钮用标准控件方块不够美观，那么可以提出该按钮的图片需求；如果觉得标准的窗口不够美观，那么可以提出窗口修饰性纹案的需求。通常这些都直接与美术开发工作量相关。（补充说明：换皮游戏非常强调以美观为导向的表现力设计，而忽略功能为导向。）

————————————————————————————————————————————

完成以上这些工作之后，可以让UI美工做出效果图。如果策划和美术都比较满意，那么则正式开始制作。

当对每块内容进行界面布局和表现力设计后，UI框架就很直观了。如下图所示：
（小提示：下图较大，请在新窗口中打开图片，或另存到本地察看。）

系统设计之信息架构和导航设计 <wbr>范例《剑侠3》启动界面

————————————————————————————————————————————

剑网3团队一直在强化游戏UI的表现力设计，游戏启动界面的效果极其华丽。例如，窗口随机变色、按钮动画、UI底图都很精致。

本文中的UI信息架构和导航设计图中，对剑网3启动界面表现力设计需求整理上有一些遗漏。例如，遗漏了‘更新日志’窗口的底图——MM投怀送抱图~~~~如图所示：

系统设计之信息架构和导航设计 <wbr>范例《剑侠3》启动界面

对应的信息架构和导航图的部分是：

系统设计之信息架构和导航设计 <wbr>范例《剑侠3》启动界面

可见，这里没有提到UI底图需求，需要补上，修改后的‘更新日志’界面信息架构和导航图如下：

系统设计之信息架构和导航设计 <wbr>范例《剑侠3》启动界面

类似的遗漏还有，窗口右上角的 X 和 - 按钮，‘开始游戏’按钮上方的装饰图，这些都需要美工制作图片。虽然这些内容似乎无关紧要，可游戏画面的美观就是由这些细节构成的。在开发前期，主要关注的是游戏性设计，因此图片需求仅是预想，直到游戏开发到后期，并且美术团队有一定规模时，图表中这些图片才需要制作，并且，为了达到更细致的表现力，装饰性图片数量会不断增加。

当要进行图片制作时，就要制定开发计划了。届时还要标记优先级、开发进度、时间限制、责任人等信息，实现设计和制作的有效管理。

添加了任务信息后的‘更新日志’信息架构和导航图如下：

系统设计之信息架构和导航设计 <wbr>范例《剑侠3》启动界面

上图中，添加的任务信息包括：（以下均采用MindManager标准表示法）
图片开发计划是从7月7日-7月8日，用时是8小时；
数字9表示优先级很低；（UI底图这部分内容的优先级很低，一般是美术工作不紧张的时候才会做这些。）
中间的图标表示完成度，图中显示的是完成了35%；
蓝色旗标表示任务正在进行中；
‘R：’后面表示负责人，策划由孙韬负责，美术由宝儿负责；
附件有两个，一个是《图片规格需求说明》，一个是《图片配置说明》，点击即可打开查看。而且可继续添加各种格式附件，以便更细致地描述需求。

类似地，图表中其他主题内容也可以通过这样的方式进行管理。

 

—————————————————————————————————————————————

文尾补充说明：

首先声明，这项技术在任何一本书中都没有提到，完全属于原创。其根本设计思想，和其他图形化设计语言都是共通的。所不同的只是内容类型和表示方法。有一点可以确定，图形化描述绝对最直观的。

第二，不要指望一分钟就能看懂会用。任何新的技术，都需要一段学习和研究的过程。光是看表面而不深入研究，能有作者十分之一的收获就不错了。想在一分钟之内就能看懂？除非是很有经验很有悟性的人。要深入理解本文的方法，建议先读《用户体验的要素》、《designing interfaces》这两本书。（还有《don't make me think》也值得一读。）
要学习一套图形描述方法，自然要先学习各种图形的含义。比如UML，这是国际通用的图形化软件建模语言了，有哪个程序员不学它的表示法就能画出设计图的？再说了，没有专业知识的人能一下子就看得懂设计者画的图吗？所以希望大家能从专业的角度发表意见。

第三，这个图是图表完全展开后的图，原图表可以缩放至任何一个层级，使用者可以由浅入深、由整体到局部细节细致察看。而且，每一大项内容都是必不可少的，否则就是需求遗漏。

第四，有人说个人写的文档要服从团队文档格式。这话总体上是没错的，但是方法有目标之分，也有先进落后之分。
设计时需要的是适合设计延伸和管理的方法；执行时则要求内容全面、易懂，经常是面对面交流；文档备案时则要求内容全面、符合备案格式要求。
本文中的文档明显不是备案用的。所以不需要讨论文档格式的问题，而主要提供的是：描述UI需求结构和关系、和逐级细节量化的方法。

如果理解文中内容仍觉得困难，建议打开剑网3客户端，对照图表内容，一步步操作地看。算是上机实验吧O(∩_∩)O~

在后续文章中，也会以一些内容为例，详细说明各种图形和线条的用法。

]]> http://www.30design.com/30designblog/default.asp?id=281 <![CDATA[介绍一些基本的可用性原则和规则--转自：由爱涉及 *UI dESIGN]]> 【三石】 http://www.30design.com/30designblog/ 30design@163.com 2010-12-24T15:56:17+08:00 2010-12-24T15:56:17+08:00 首先用户体验师必须去学着了解产品背后的商业背景、读懂BRD,PRD,将产品规划中必须达到的目标和你认为有碍于用户体验的点抽取出来，去挖掘需求背后的目的。

其次UCD流程中一些影响到产品发展的关键点应该尽量去实行。

在概要阶段：用户体验师要把PD需求文档中抽象的功能转化为用户需求。通过选择通过做概念图、信息架构（建立层次逻辑关系）、建立用户场景（了解服务的人群，更好审视产品）等方法来定产品的大方向。

在详细设计阶段：设计有完善交互流程的原型demo（这个阶段如果条件允许可以进行低保真demo的可用性测试，把产品交互上一些问题尽早的暴露出来。）在原型评审后跟进视觉设计。在前端完成页面后，最好进行次高保真的可用性测试，确保不会在开发好后才发现产品有大问题。
 

由于很多项目时间紧急，可能都没法进行可用性测试，设计师首先要会审视自己的设计哦！

下面介绍一些基本的可用性原则和规则：

7±2 原则

由于人类大脑处理信息的能力有限，它会将复杂信息划分成块和小的单元。根据乔治A米勒（George A. Miller）的研究，人类短期记忆一般一次只能记住5-9个事物。这一事实经常被用来作为限制导航菜单选项到7个的论据；然而关于神奇的“7，加2或者减2”还是引起了激烈的讨论。因此目前还不清楚是否7±2原则能、可能或应该应用到web中。米勒的研究

2秒原则

一个松散的原则，即用户没有必要对某些系统响应等待2秒以上的时间，比如应用程序转换和开始的响应时间。选择2秒有点武断，但确是一个合理的数量级。可靠的原则就是：用户等待时间越少，用户体验越好。[可用性优先]

3次点击原则

根据这个原则，如果用户在3次点击中无法找到信息和完成网站功能时，用户就会停止使用这个网站。换句话说，这个原则强调明确的导航，逻辑架构和后续站点的层次结构。在大多数情况下，点击的次数是无关紧要的；真正重要的是，游客总是能知道他们现在在哪，他们去过哪，他们接着将会去哪。如果用户感觉他们对该系统如何运作有个充分的了解的话，甚至10次点击，用户都会觉得OK。

80/20原则（帕累托原则）

帕累托原则（也被称为重要少数法则和因素稀疏原则）指出，80%的效应来自20%的原因。这是商业中的基本经验法则（“80%的销售额来自20%的顾客”），但也可以应用于设计和可用性。举例来说，我们可以通过确定那些贡献80%利润的20 ％的用户、客户、活动、产品或程序，并最大限度地注意对他们适用，来显著提高效应。[帕累托原则在维基百科]

8个接口设计的金科玉律

作为接口设计研究的成果， Ben Shneiderman提出并收集了一些从经验中启发而来，适用于大多数交互系统的原则。这些原则适用于用户接口设计，也适用于网页设计。

  1. 争取保持一致性
  2. 为老用户提供可用的快捷方式
  3. 提供有益的反馈
  4. 设计结束功能的对话框
  5. 提供简单的错误处理
  6. 允许简单的逆转功能
  7. 提供控制感。支持内部控制点
  8. 减少短期记忆

费茨定律

由保罗费茨（Paul Fitts）发表于1954年，费茨定律模拟了人类活动，以目标距离和目标规模大小为函数，预测了迅速移动到目标区所需时间。该法通常应用到鼠标的移动，访客就必须从A点移动到B点。例如，这个规则对于如何放置内容区域，以更实用的方式，最大化内容可及性和提高内容点击率，是非常重要的。

倒金字塔

倒金字塔是一种在文章开头表达总结文字的写作风格。这种方式使用了新闻业中著名的“瀑布效应”，新闻作者试图让他们的读者即时知道他们的报道的主题。文章以总结开头，接着是关键点，最后那些次要的细节，如背景资料。由于网络用户需要即时的满足，这种倒金字塔写作风格，对于网络写作和更好的用户体验是非常重要的。就像尼尔森的支持

满意

网络用户不喜欢用最佳方式找到他们寻找的信息。他们对最合理和最健全的解决问题方案不感兴趣。相反，他们永远扫描他们认为“足够好”的quick’n'dirty解决方案。在网络中，这种方式准确地描述了用户的满意：用户使用一个“足够好”的方案解决问题——即时在长远看来一些替代方案能够更好地满足他们的要求。

]]> http://www.30design.com/30designblog/default.asp?id=280 <![CDATA[设计师应该具备的几点素质或者一些技能--转自：由爱涉及 *UI dESIGN]]> 【三石】 http://www.30design.com/30designblog/ 30design@163.com 2010-12-24T15:45:11+08:00 2010-12-24T15:45:11+08:00 其实在从美工到现在，并不是想象中的一帆风顺，其中的曲折和艰辛大家应该都有体会。我想分享一下我认为设计师应该具备的几点素质或者一些技能： 1 善于表达和沟通设计说白了是表达你的思路，好的设计的确不需要用语言解释（让用户去读懂），但在你的设计还没有成型的时候，你需要让团队其他的成员跟你有一样的方向和思路，以用户为中心的设计不光光是设计师的职责，而得先让团队所有成员都有一样的理念，大家心往一处去，力往一处使，将事半功倍。 2 了解你的团队是做好设计的基础设计的流程是死的，设计本身是活的，设计师必须了解自己的团队。我认为，设计师应该去了解各个领域的知识，这样对你深入去设计是有帮助的。在我成长的道路上，我学会了写html+css，包括了解了一些JS的实现原理和后台架构的一些原理等等，这样有助于你在设计的过程中，知道哪些功能要花费工程师多少时间，复杂程度，通过这些知识来决定你的设计，也就是说，你出手的设计必须是一个性价比最高的设计。 3 认清楚谁是你的用户以用户为中心首先要知道谁是你的用户，你的设计为谁服务。有些用户是“伪用户”，因为网络上充满着各种各样的“牛人”、“专家”，他们不了解你的团队，不了解这个行业，他们很多时候会出于好心告诉你应该这样、应该那样等等。他们所说的方向非常正确，就好象说“地球是圆的”“人总是要死的”一样，但设计师不要被这些言论迷惑了，你必须去分析哪些是你真正的用户、哪些是你的潜在用户。也许你以后的真正用户还没有听过你们的产品，所以坚持你该坚持的东西。正所谓“凡人之智,能见已然,不能见将然”，好的设计是需要时间去验证的。 4 你最好是个好战分子学会说“不”，你必须知道怎么拿着“用户为中心的设计”的旗帜去坚持你该坚持的东西，你必须清楚你所能妥协的底线，一旦这个度触及这个底线，你就必须去据理力争，如果你的团队是个优秀的团队，你的老板是个懂大局的老板，事后会理解你当初的“鲁莽”。 5 懂得控制你的节奏，去繁取简你会在勾画你的蓝图的时候，想的“很好很强大”，但切记，一个新产品的诞生，必须简洁到不能再简洁。请收敛你的那些天马行空的思路和创意，挑选出用户、市场最需要的设计去做。然后你得清楚的知道先有什么、后有什么，也就是产品开发的节奏。这样不会让你的团队疲于奔命。 6 在提出问题的时候，你应该先有解决方案发现问题是设计师的天性，但很多设计师将发现问题当成了终点，没了下文。当你发现问题的时候，先别着急提，优秀的设计师在提出问题的时候，心里面一定有更好、更优化的方案。 7 停止抱怨我经常都能听到一些设计师的抱怨，抱怨流程、抱怨他人不理解你的设计，我曾经也抱怨。但你会发现这样根本没有什么好处，尤其是在团队中抱怨，会让你的同事们失去战斗力，作为设计师，你必须去理解工程师、老板以及跟你配合的任何成员。你必须脑子清醒，学会反思，学会站在对立面去思考问题。

]]> http://www.30design.com/30designblog/default.asp?id=279 <![CDATA[一个好的互联网产品必须以用户为中心进行设计]]> 【三石】 http://www.30design.com/30designblog/ 30design@163.com 2010-12-24T15:38:57+08:00 2010-12-24T15:38:57+08:00 一个好的互联网产品必须以用户为中心进行设计，2010年公司UI部门不单是要完成目前的界面设计的工作，严控产品质量，优化工作效率；而且任务重心将是要加强公司的产品设计、可用性设计。这就需要在部门职责划分、工作流程、准则规范、人员结构等方面下大功夫。我们计划将从产品设计和信息架构着手，以规范性理论指导具体工作，在“业务架构”明确、“技术架构”稳定的前提下，深入到用户与产品的研究和实践中，在一些重点项目中进行用户分析研究、建立用户、产品、设计人员三方的沟通渠道，设计中跟踪并分析用户体验的质和量。工作目标就一个：以用户为中心设计产品、完善产品，使产品能够准确的把握用户。

 

    不过我们也会从公司现实情况来看，目前可能无法产生专门的UED部门，这就需要所有和产品设计和用户体验相关的部门人员：“放弃单打独斗，和更多的人一起为更好的产品和用户体验而努力，这是我们现在最该做的。”我深知在这其中将要面临的困难和各方压力，但是正确的路线我们必须去坚持，哪怕路上充满艰难险阻，一切为了产品，一切为了用户。引用马云一句话：“很多公司，都活不到五年，活到五年以上的公司没有这么一次疼痛，没有这么一次折腾这个公司是走不长的，今天我认为是支付宝开始正视自己问题的时候。”

 

    最后半抄袭白兄的一句话：“看来为这件事，至少值得我们也再干10年。”

]]> http://www.30design.com/30designblog/default.asp?id=278 <![CDATA[UCD工作流程及相关概念]]> 【三石】 http://www.30design.com/30designblog/ 30design@163.com 2010-12-24T15:20:40+08:00 2010-12-24T15:20:40+08:00 一、 UCD概念


（一） UCD普及发展
UCD概念普及是在web1.0门户类网站落后之后、企业不满足单纯网络宣传需求、B2C愈演愈烈的情况，大型交互应用网站有了市场后，而出现的。
虽然目前国内专业UCD还在普及探索阶段，但目前UCD的专业发展趋势明显，这是与互联网大型应用、复合型应用正在高速发展分不开的。
UCD的目的是改善用户体验，提高用户基数和用户粘度，维系优质的客户关系，为互联网企业赢利和持续发展奠定基础。

（二） UCD概念本质
UCD--以用户为中心设计，顾名思义，UCD概念本质就是"以用户角色为中心"，换位思考。如果我是用户，我会怎么做？我会有什么感受？
UCD是种思想，这就涉及User-Centered Designer自身思想的宽容度和能力及经验问题了。事实情况是，User-Centered Designer需要面对未知的行业和专业，这就要求必须有很强的学习能力，能在短时间内从错综的关系中，分析出几个唯一的关键点和主线来统领UCD。

（三） UCD团队概念
首先要明确大型项目的UCD是一个团队来完成的，而且需要跨部门跨专业来协调合作的。而对于中小型项目来说，由于工期短，比较依赖项目组成员的个人能力和融洽的协作关系。UCD不仅仅是文档整理工作，很大程度上要依赖团队会议研讨，这就需要调动大家的积极性、开拓精神和奉献、共享、互补精神。
因为UCD是跨部门跨专业的研讨工作，这就需要树立产品经理在研讨会议中的权威，以保证会议按时按质量完成。对于跨部门之间的工作协调，产品经理应本着人文精神去多方沟通，相互达成允许范围内的妥协和思想统一。

 

 

（四） UCD工作流程模型

  具体控件细节  表现   完成详细设计
│ ------------------------------------------------- ↑
阶段 5  │       Visual设计    │
│ ------------------------------------------------- │
阶段 4  │  接口设计 | 导航设计    │   信息设计     │
│ ------------------------------------------------- │
阶段 3  │  交互设计 | 信息架构    │
│ ------------------------------------------------- │
阶段 2  │  功能规格 | 内容需求    │
│ ------------------------------------------------- │
阶段 1  │        用户需求     │        项目目标    │
↓ ------------------------------------------------- │
  归纳总结摘要  底层   从概念入手


二、 大型项目UCD完整流程
（一） 基础调研
研究项目立项建议书
（1） 立项来源--为什么要出台这个项目？
（2） 用户领域--为谁而做？
（3） 项目团队--由那些人来做？
（4） 产品内容--做什么？

产出物：产品设计文档中的基础调研报告

（二） 产品分析
（1） 定位分析--在哪个范围，为哪些人，提供哪些服务？
（2） 用户分析--用户调研、用户群分类、主流用户群特性和习惯
（3） 价值分析--用户使用价值、产品赢利模式
（4） 功能列表--逻辑、组织和层级关系
（5） 分析总结--产品概念

产出物：产品设计文档中的用户分析、产品概述和功能列表

（三） 交互设计
（1） 概念模型图--用户使用产品的功能逻辑概念示意图
（2） 功能结构图--交互组件的功能结构关系图
（3） 关键场景图--分析典型用户执行关键功能达到其目标的使用场景，明确特殊功能元素布局
（4） 关键交互流程分析图--用户使用场景的关键操作过程（鼠标点击步骤和屏幕引导路径）

产出物：产品设计文档中的产品交互设计

（四） 原型设计
信息架构和界面原型设计--Visual制作一套完整的可模拟的产品原型

具体方式是以用户实际操作流程为主线，以主场景为中心，以用户自主理解为基础，以页面元素明确引导为方法，设计产品界面中应该包含的控件数量和类型、控件之间的逻辑和组织关系，考虑控件重用性，最后归类列表。
（非大型高额开发，不建议采用此耗时方式）

产出物：产品设计文档中的产品原型设计

（五） 详细设计和交互逻辑表述
（产品设计文档中的详细设计，是项目开发文档的基础，很大程度要要依赖项目经理领导项目组来完成，产品经理在此阶段起协调和辅助作用）

（1） 详细设计--交互表单控件、交互文本、信息提示等细节

（2） 控件和交互逻辑表述--对界面控件、控件组、窗口的属性和行为进行标准化定义，梳理完整的交互逻辑。具体可用状态迁移图或伪代码形式表示，当然对于中小型项目，可能会省略这部，具体交互逻辑在实际开发及白盒测试中即时完成。

产出物：产品设计文档中的详细设计

（六） 研发跟踪和设计维护
（1） 语言文档整理--设计通过评审之后，把产品中所有的交互文本整理成excel文档，预备研发工作。
（2） 研发跟踪维护--进入研发阶段后负责为研发工程师解释设计方案、问题修改、文档完善、Bug跟踪等。

产出物：产品语言文档，设计调整维护

 

三、 中小型项目简化流程
（一） 项目调研
（1） 立项主旨--为什么做？
（2） 用户分析--为谁而做？
（3） 功能列表--做那些？
（4） 产品概念--做的是什么？
（5） 开发成员--有哪些人来做？

产出物：产品设计文档中的调研报告

（二） 交互设计
（1） 功能结构图--交互组件的功能结构关系图
（2） 主场景框架--主场景元素布局、导航布局、功能分区
（3） 关键交互流程--用户操作步骤和引导路径

产出物：产品设计文档中的产品交互设计

（三） 详细设计
（1） 表单控件--分组分类列表
（2） 信息提示--统一模块化
（3） 交互逻辑--通用模块的属性和行为标准化定义

产出物：产品设计文档中的详细设计

（四） 研发跟踪
（1） 语言文档整理--交互文本字段文档
（2） 研发跟踪维护--进入研发阶段后负责为研发工程师解释设计方案、问题修改、文档完善、Bug跟踪等。

产出物：产品语言文档，设计调整维护

四、 UCD团队和部门协作

（一） 团队协作

（1） 团队精神基础--不能以个人言行损害团队和他人的利益。
（2） 积极主动性--在工作中应充分发挥自己的主观能动性，跨专业拓展自己。
（3） 奉献共享精神--帮助他人就是帮助团队，协助他人完成工作，就是减少自己的工作麻烦；奉献和共享自己的知识，先予后取，是以后顺利工作的基础。
（4） 互补性--在团队中明确自己定位，在高度互补的状态下，成为团队不可或缺的人。
（5） 妥协--坚持原则的基础上，做出必要的妥协是完成任务的保证。学会妥协就学会工作。

（二） 部门协作
（1） 明确工作原则--首先要明确自己的和对方的工作原则底线。
（2） 沟通--充分理解对方的工作，讲解自己的工作内容，让对方明确配合工作是利己利人的。
（3） 协调矛盾--明确双方工作职责，通过沟通来解决；对于暂时不能解决的问题。需要邮件备忘通知相关人员；对于需要解决的重要问题，通过沟通无法解决的情况下，需要想其上级即时反映，并跟踪问题的解决状态。
（4） 妥协（放弃和避免）----对于产品中不合适事宜的地方要通过沟通妥协来放弃，对产品中不好实现的地方要通过规避方法避免产生麻烦。对于暂时无法达成妥协的情况，要在明确告知对方重要性的基础上，邮件备忘通知相关人员。

]]> http://www.30design.com/30designblog/default.asp?id=277