准备过程如下：

1.尽量以实际例子先把用户体验的概念能够普及一下

2.讲交互设计的通用原则（用了 注册表单、PC、手机上Map的设计）的例子来深入

3.最后以一个简历中的交互设计收尾 希望能给同学们一些实际的应用～

感想如下：

1.关于用户体验想讲出来就像量化一样，概念太大，只能讲一些基础的现象

2.学生的冲劲还是蛮大的，都拥有一番梦想，期待飞翔～

3.与社会现状差异还是蛮大的，对于企业而言应届毕业生确实有太多思想和能力太学术化及落后

晚上与老师和同学们一起聚餐，希望他们能够有好的发展：）

对于首屏估计大家都会关注，但设计稿发到不同的人 由于分辨率不同，体验效果其实也不同

正好内部在做新的设计稿也推荐给设计师看了一下 之前注意首屏并没有通过这样详细的统计分析来获得首屏高度

根据内部统计系统中的操作系统、浏览器分布和屏幕分辨率等数据，结合浏览器状态栏、任务栏等高度进行分析：

得出两条首屏线，分别为 580 和 710，对应不同的分辨率。

==

C 再从实际用户的角度出发，在某应用布点进行用户数据的收集，分析用户实际的分辨率和浏览器可见区域：

1. 分辨率

1) 1024×768, 1440×900, 1366×768, 1280×800 仍占了绝大多数
2) 分辨率总类非常多，除上面列出的之外，other 里包含了几十种分辨率
3) 800×600，1024×600 等 600 高度系列的已逐渐推出舞台

2. 用户可见区域高度

具体数据举例：

测试用户总数量为 261645)

1) viewport 高度低于等于 580 的有 116786 个人，占 44.64％
2) viewport 高度低于等于 720 的有 216227 个人，占 82.64％
3) viewport 高度低于等于 800 的有 241420 个人，占 92.27％
4) viewport 高度低于等于 900 的有 259174 个人，占 99.06％

==

接着，D 根据 C 的数据，生成浏览器可见区域的热区图

最后结论如下：

1. 根据 D 的热点图，可以看到如果首屏高于 600 像素会有很多用户看不完整。所以请设计师以 600 像素高为首屏进行设计。
2. 根据 C 的曲线图和 80/20 原则，首屏设为 710 像素可以照顾到 80% 的用户。所以前端开发可考虑把 710 像素视为首屏，对首屏的资源进行优先加载。

公司近期也在做edm方面的尝试 看到此文收获颇多 感谢ico同学的分享

EDM现在已经是电商营销的必备的环节，作为用户，每天都会收到好多EDM，吃喝玩乐样样都有。但反过来作为EDM策划者或者设计师，面对如此多的“竞争对手”，我们如何才能变得“独一无二”。(若你希望成为一个好的EDM营销人员，时刻收集EDM，一定要成为你的好习惯。)

1. 确定EDM的种类

EDM分很多种类，不同的EDM所要表达的东西都不一样，不全是进行销售，营销，也可能是别的。所以对于不同种类的EDM，需要调整到合适的方向。

通常我们把EDM分为以下四类：

纯文字类型：适用于对顾客进行通知和简单的互动反馈，文字内容又较易于格式化的，例如：注册确认，注册成功，订单成功，账单等

商品促销类型：如名字，适合用于商品销售，大多数电商临售网站都用这类型的模板，例如：6pm邮件，京东促销邮件

活动及功能上线类型：团购将这类型的EDM发挥了极致，差不多整个页面就是团购网站的缩小版，言归正传，这类型的EDM最适合一些需要强力push的活动。例如：淘宝商城1111活动

信息推送类型：定期将信息类推送给用户，比较适合此类型的EDM，例如：infoQ的信息推送等

• EDM分析上（设计事项，纯文字类型）
• EDM分析下（促销样式分析，活动及功能上线模式分析）
• 从一封营销邮件说起
• 关于系统邮件的设计
• 如何设计注册激活邮件

2. 开始编写代码

由于不在自家服务器上，EDM中的代码和普通网页是有区别的，代码编写和普通网页是有区别的，有如下几个地方可以注意一下

乱码：你没法知道所有用户的系统环境，因此使用utf8来避免乱码是非常重要的

绝对URL：若是相对URL,用户在打开页面是将看不到图片

图片Alt属性：大多数邮件服务器都屏蔽图片，所以在一片红叉的时候，你能够让用户看到图片原本的意义是很重要的。

图片压缩：打开的时间越短，用户看到的越快，还从服务器压力来说，对于图片的压缩也是需要的。

Table布局与内联样式：90%的服务对Table布局支持都很好，而DIV却无法得到很好的兼容，所以推荐使用table来制作，同时CSS也推荐使用内联样式来进行制作。

• CSS内联转化器
• 爱恨交加的HTML邮件

3.EDM的发送

请不要忽视这个最简单又最困难的环节，因为这关键到精心制作的EDM是否准确到用户手中，还是白白被扔到了“垃圾邮件”文件夹中。还有选择合适的发送时间也是一个勾引用户看EDM的好方法。

好的邮件标题：在打开邮件前，最先入眼的就是邮件标题，这个标题的好坏可以决定用户是否会打开这个邮件。在取名字的时候，重点+简洁有力的文字会是个不错的选择。

细分顾客：发送前，一定要好好定位您的客户，哪怕是老客户，针对不同类型的客户发送的EDM要有所区别，别一股脑儿的群发。

使用专用的发送邮件：邮件要专业，用户若看到了发件人是“tom02191@gmail.com”，绝对会降低您的第一印象，请选择个专业的邮件。

选择合适的发送时间：各大知名电子商务邮件，大部分集中在“11-13点”（京东，MasaMaso，Apple，Vancl等），和“7-9点”（新蛋，团购站等）2个时间段，这2个时间段恰恰是上班族打开电脑，或者疲倦想要休闲一下的时间，这样的话打开EDM和点击EDM的可能性就大大增加了。这样是不是比滥发EDM好呢？

• 电子邮件营销7个不能做的事
• HTML邮件的又一点思考

4.数据监测

邮件发送后，对邮件的后续的数据监测也是至关重要的，我们要知道邮件的到达率，打开率，点击率…..等各方面的数据，来判断这份EDM设计的好坏，也可以帮助到我们下次的设计。

监测的数据：对于数据，这篇文章说的很清楚《邮件营销的核心数据》

监测工具：Google Analytics，99click，等。

• 邮件营销的核心数据
• 一次利用Google Analytics追踪分析邮件营销的实例

转自:ico的ui设计-http://icojump.in/?p=1317

2010年11月22日，Axure公司释出了最新的Axure RP 6.0.0.2826测试版。

Axure RP 6是一次重大版本升级，全新的架构。
PC版本与Mac版本达到了风格统一。这次同时放出了它们的测试版。
PC版安装过程中会自动更新.NET Framework4.0。

Axure RP 6.0.0.2826备用下载：
英文PC版下载地址：http://u.115.com/file/f9d967ce12
汉化包下载地址：http://www.webppd.com/thread-2143-1-1.html
(先安装英文原型，再把汉化包文件覆盖到axure安装目录，英文原版与汉化包的版本要对应。)

英文Mac版下载地址：
http://maxure.s3.amazonaws.com/AxureRP-Pro-Beta-Setup.dmg

此次Axure RP 6 Beta版新增功能下面一一道来：

1. 可以设置页面背景图片、颜色以及相对于浏览器整体居中了。

2. 可以设置整体在线框边缘变为手绘风格的，以及是否彩色输出。

3. 因为是全新的架构，不再存在某些输入法中文无法输入的问题。

4. 可以设置文本行间距了，同时个性化字体可以输出到Html。

5. 更加易用的事件编辑器，再也不会像之前版本那样，编辑器窗口自动变大了。

6. 输出Html时可以选择用哪个浏览器打开。

7. 增加了栅格系统，自带960宽的12栅和16栅。
在菜单栏：Wireframe-Grid and Guides-Create Guides…中

8. 增加了页面和模块的搜索功能。

9. 增加了快速隐藏网格的快捷键。Ctrl+’

10. 新的测试版本不能再输出Word2000格式的文档了，只能是Word2007格式。

11. 兼容性，用Axure6可以打开以前所有版本制作的RP源文件，但是如果是Axure6制作的RP源文件，将无法使用像Axure5.6这样的低版本打开。

12. 取消了原来的状态栏，改为拖放组件时直接在右下角显示组件的位置和大小。

13. 没有了原来的收起工具面板，不知是为何考虑的。如果能有像Photoshop那样的Tab隐藏工具面板的快捷键就方便了。

14. 条件判断，判断组件或变量值时增加了包含与不包含，这下可以判断输入框是不是包含@符号，用于判断是不是邮箱地址了。同时还增加了一个不是数字或字母的判断，原来版本只有“是”数字或字母的判断。

15. 增加了针对变量或组件值的公式计算，貌似可以加减乘除运算了，还可以插入当前日期或页面名称。具体怎么使用还不熟悉。

16. 可以创建临时中间变量，方便记录各输入组件的值，而不是设置全局变量。

17. 增加了三个可用于条件判断的类型：
1. text on focused widget 是判断当前光标所在的组件内容值。
2. drag cursor 拖动鼠标的判断（目前我还不知道是干吗用的）。
3. widget rectangle 可以判断两个矩形组件是不是叠放在了一起（不知道有何实用性）。

18. 增加了一个可被赋值的类型：
1. text on focused widget 给当前光标所在组件的文本赋值。

19. 矩形右键多了个分配给某个组，不知干什么用的。（可能和未来拖拽有关）

20. 右键有了特殊性粘贴，但试了试并不清楚怎么用。

转载自
http://www.webppd.com/thread-2121-1-1.html

转来分享给大家

作者：丽君 来源腾讯ISD

分享较早前的一个小总结，关于在选择弹出窗口还是选择切换页面来承载信息时，可用用来判断的几个角度，合适初学者来读。

1.弹出窗口与切换页面的区别

1） 操作的连贯性 弹出窗口的速度会比打开一个页面的速度要快，响应更及时一些，点击后可以比较快的得到操作的反馈，而切换页面则经常会让用户等待一段时间。

实例一：个人中心中，查看好友照片的操作：

之前查看照片的操作页面会跳转到该好友的空间“相册”页面，而现在则更改进为弹出窗口，能够很快看到照片的放大图，关掉窗口后，又可以继续浏览其他好友的信息了。

2）操作的延续性 弹出窗口可以保留原页面上的内容，不至于页面被刷新掉；切换页面很有可能刷新，在以下两种情况下是尤其要避免的：用户在原界面上有输入的内容，用户需要根据原有界面的内容，来选择或判断新界面的内容。在这两种情况下最好首选弹出窗口。

实例一：Qzone写日志中插入图片：

用户在写日志的时候插入一张照片，如果这时候插入照片的界面是切换一个页面，用户可能就会担心之前的输入是否还在，而弹出窗口则可以在保留原页面已编辑的文字，在此之上出现一个小型的界面，显示可以插入的照片。

实例二，秀世界中我的储物箱，用户需要看到房间中的效果，来决定从“我的储物箱”中选择哪个物品放入房间里，用弹出窗口可以比较方便的解决这个问题:

实例三：一个相反的例子，欢乐卡片的应用，制从“我的首页”页面当中，制作卡片的时候需要哪些卡面是在“卡片全攻略”页面来说明的，因此用户在制作卡片的时候需要不断切换到“卡片全攻略”页面来查看需要合成的卡片，因此，在这样的情形下，采用弹出窗口的形式来表现卡片合成向导应该更合适一些。

3） 操作的自然过度 弹出窗口不容易让人迷路，知道自己身处何处；而页面切换了以后用户有时候会产生一下子不知道在哪里的迷惑；弹出窗口页面的内容往往只和当前的操作有关，而且是浮在原有页面上的，用户可以很自然的延续上一操作的结果而继续操作或是浏览下去，而切换的新页面中往往会包含新内容之外的信息： banner、导航、一些固定的栏目等等，用户不能立刻定位到自己想要关注的内容上，因此切换页面的设计应更加关注一致性和承前启后的关联性。

实例一：网吧达人的首页页面1中点击“常去的网吧”，进入页面2，因为两个页面的结构有所不同，很容易让用户觉得不知身处何处。

页面1：

页面2：

4） 承载的信息量 弹出窗口可承载的信息量有限，操作流程不宜过多。

5） 内容的推广 弹出窗口没有独立的连接地址，在页面推广上有所限制。

实例一：在做信用卡频道的活动列表时，最初的设计是点击活动信息的标题后，用弹出窗口来展示活动详情，然而因为活动页面需要在推广时有独立的地址便于用户能够从其他途径直接访问到活动详情页，因此改为采用切换页面的方式。

2. 弹出窗口与页面内展开的区别？

1）页面内展开能够即时的反馈用户的操作；容易给用户带来自然过度的体验；适合于对主要内容的扩充，更详细的、更近一步的内容，当用户没有看到这些内容并不会影响使用，而打开这些内容，用户可以看到更多、或是得到更丰富的功能。

实例一：个人中心的展开操作，通过页面内展开的形式显示评论信息，它并不是该好友动态的主要内容，因此作为附加信息收在了“详情”当中。

2）弹出窗口是用户点击按钮后，在页面上浮出一个层来显示进一步的内容，与页面内展开的形式不同的是，弹出层更适用于区域内的内容较为重要的时候使用，比如弹出层内包含一些操作、或重要提示。

实例二：编辑导航的界面中更改选择，下面的预览界面中会直接看到效果。

实例三：二次确认的提示应当采用弹出窗口：

纵向太深，用户会在一层一层挖掘后，感觉焦躁，同时也容易迷失。横向太宽，信息量多了，
用户会觉得复杂，找不到自己想要的东西。

交互设计的目的
为了产品有效易用，为了让客户对产品产生依赖，为了让客户使用产品愉悦。当客户想要设计或
者改进一个交互式系统，使用户与其交互的过程更加有效、易用，ETU 可以为其提供交互设计服
务，比如：
某个交互系统，用户通过它来进行日常的工作，通过执行一系列的步骤来完成某项任务。交互设
计可以系统变得简单易用，用户使用其工作的效率大大提高。某购物系统，流量很大，但是在生成订单的过程中，用户却大量流失。交互设计帮助该系统找到
用户流失，不能完成购买的原因，进行改进，让用户获得良好的购买体验。

某电子产品，技术先进，但其人机界面的设计可能由研发技术人员来完成，用户觉得产品的使用
方法比较费解。交互设计可以帮助其存在的可用性问题，帮助改进，让用户很容易学会使用它。

交互设计的价值
通过改进设计，使得产品的使用者可以很好的学习、快速有效的完成任务、访问到所需的信息、
购买到所需的产品，并且在使用的过程中获得独特的体验，情感上的满足。

交互设计的好坏会影响用户对产品的印象，同时也会影响用户对品牌的看法。好的交互设计会给
市场带来增值、会提高用户对品牌的忠诚度、会促进销量，从而使公司业务带来良性循环。

交互设计的开展时间
新产品研发过程中，新的用户界面的产生可以引入交互设计。
已有的产品，对产品的人机界面的交互部分需要改进，可以引入交互设计。

交互设计的方法
交互设计一般从标识需求开始，不管是新产品还是改进产品。在这之后，进行任务分析 /功能分
析, 提出满足需求的概念设计，提出候选设计方案，接着制作原型的交互式版本，并进行评估，
根据评估结果可能进行重新发掘需求、修改需求，也可能直接进入重设计。

交互设计中使用的方法包括角色设定，情景设定，故事版，认知走查，用户可用性测试，眼动仪
分析等等。

交互设计花费的时间
根据用户研究内容和项目大小作调整。

交互设计的文档
最终原型设计
UI 设计规格说明书

源地址：http://www.etucn.com/fw2.html

其实我们日常生活中很多事情，办起来过程很罗嗦，办事的工作人员说这是应该的，都这样做，可应该不应该，谁是评判标准呢？

交互设计一个很重要的目地就是让用户方便快捷的执行任务和完成工作。在互联网产品的交互设计中，尽可能的消除每一个附加工作，做到尽可能一次操作而完成任务。一次操作是个概念，并不是完成任务只能点击一次，而是减少用户操作次数。使之提高工作效率。

交互产品经常包括一些不必要的具有繁重工作量的交互，对于用户而言，这些就是附加工作，附加工作不直接实现目标，但对于实现目标是有用因素。附加工 作的问题是它们在消耗我们的精力，而不是直接实现我们的目标，如果能够消除附加任务，我们就能让用户更加又效率，更有生产率。并且能够改善软件的可用性。 作为一个交互设计者，你应该对附加工作的存在非常敏感，用户界面中附加工作的存在是造成用户不满的首要原因，因此每一个设计者都值得关注各种形式的交互附 加工作。（About face 3,第11章：消除附加工作）

那么，如何减少用户的附加工作，保证用户工作效率呢？

1，保证主操作以及用户常用功能的方便展现。
这是用户快速完成任务的核心。比如播放器需要突出播放按钮，而收起了快进功能。ps的滤镜里会第一个展示出你上次应用过的滤镜效果，方便再次应用等。

2，合适的关闭与隐藏新手培训工具
用户不会长期停留在新手状态，所以新手的任务对于中间用户和高级用户来说就是附加工作，需要关闭或者隐藏。

3，平衡好视觉装饰元素对用户操作的干扰
适度的装饰性元素会有助于创造特殊情绪和氛围，以及产品个性便于品牌记忆。但是过度的装饰会干扰用户工作效率，因为用户不得不分析、破解，以区分哪些是关键信息、操作功能等。

这点对从视觉转过来的交互设计师尤为重要，视觉设计在缺乏系统的用户交互行为认知的情况下，很容易使设计浮于表面，从而做到吸引用户眼球后又让用户不明白如何方便的应用，这也是产品设计和广告设计的根本区别。

4，不要轻易打断用户操作流
用户高效的使用工具会进入一种自然流的状态，这个时候需要一些努力才能打断，例如突然电话响了。错误消息对话框就是如此。一些打断是不可避免的，但另外一些则不是必要的。

5，改善导航
更好的利用导航将保证用户的任务操作，明晰导航里将详细讲述。

下面讲一个关于不要轻易打断用户操作例子：

在windows xp系统以前，用户点击关机后，会弹出一个提示窗口，一定要用户再次确认下关机，这对用户快速关机存在着强行的打扰，很多人甚至按机箱按钮强行关机（非常不好的做法）。

在vista之后，关机终于可以一键关机，并把以前弹出框里的功能收起（非常用功能），vista还是保留了两个按钮：关机和锁定，而且是图标显示，在win7中，只保留了关机，其他都收起，并且关机按钮使用文字，更加清晰了用户操作的思路。

提高用户的效率，就在这些常用操作上的改善，能不能快点？步骤再少点？再清晰点？直到用户说：爽了！

原文：http://ued.taobao.com/blog/2010/02/05/%E4%BA%A4%E4%BA%92%E8%AE%BE%E8%AE%A1%E5%AE%9E%E7%94%A8%E6%8C%87%E5%8D%97%E7%B3%BB%E5%88%979%E2%80%94%E4%B8%80%E6%AC%A1%E7%82%B9%E5%87%BB/

图1 

从右侧这家店的橱窗里，我们能迅速分清哪些是租房信息哪些是售房信息。因为店家很贴心的将房产信息进行归类，并且在视觉上做了一些划分，让我们对信息能一目了然。借这个小案例引出我们今天要分享的话题：深广度平衡。

1. 什么是深广度？

其实“深广度”本身并不是一个单一的概念。在网站的信息架构中，有一种组织结构叫做树形结构：网站首页视为链接层级中第一级，与其有从属关系的页面视为链接层级中的第二级，一般称其为二级页面。通过二级页面又可以继续得到第三级页面，依此类推可以得到一个完整的树形链接结构。这样一个完整的链接结构，我们称它为树形结构。 

在整个树形结构中，链接的层数被称为网页链接的【深度】（depth）。而在树形结构里，最底层页面包含的页面总数被称为网页链接的【广度】（breadth）。 

我们可以通过下面这张图来理解深度和广度的概念： 

图2 

2. 为什么深广度需要保持平衡？

我们回到开篇的小案例。左侧那店铺采用的是“只有内容链接的模型”（它们之间没有层级结构；链接没有模式可循；且没有某种导航方案将他们分离开）（注1）在这里每一条房产信息都可以看成一个内容链接，整个橱窗就像一张错综复杂的大网，让人头晕目眩。 

而右侧的店铺采用的是“结构化浏览模型”（只有一组链接，作为获取网站信息的途径；导航区域与布局中其他内容有视觉上的分隔；要到达另一区域的某个页面，必须沿着树向上导航，再沿着另一个分支向下）（注2）店家将信息进行了规整，在房产信息上增加了一个分类，并且对不同类型的信息使用了不同的颜色，高效的将租房信息和售房信息区分开来。 

一个网站的链接深度和广度最好有一个合适的均衡关系，深度过大的网站不利于用户快速获取信息，广度过大的网站则容易让用户在无数并列的超链接面前不知所措。 

图3 

图3的上图说明了又窄又深的层级系统，用户必须点击6次才能到达最底层的内容。对又宽又浅的层级系统而言（相对而言），用户必须从6个类别中选择，才能找到6个条目。就像图3的下图所示，用户会面临主菜单上太多选项，而当他们选了一个选项，却没看到什么内容时，就会产生不良的观感。（注3） 

我们再来看一张用户对于不同层级结构所需反应时间的图表（注4），图4： 

图4 

总共512项内容，组成了三种不同的分级方案，X轴是分级，Y轴是反应时间（秒）。可以很清晰看出，在过深和过广的分级方案上，用户所需要的反应时间都比较长。因此我们在组织网站信息的时候，需要仔细平衡深度和广度之间的关系。 

3. 如何保持深广度平衡？

我们在处理网站结构时，常常会使用按组分类的方法来组织信息。而信息的分类我们能使用时间序、主题或科目、地理、字母序、受众群体以及任务等方案。现在我们再来看看深广度平衡在web上的应用。 

图5 

这是某电脑公司的官方网站，他们的导航本身就是一个站点地图。他们将14项内容分级组成了一个两层的结构树，每个分支上都有3-4项内容。对于这样一个信息量不是很庞杂的网站来说，使用主题或科目的方案，将信息组成一个两层的结构树，就是一种深广度平衡的方式。 

再来看个案例，图6是某软件官方网站的一个下载区块，这个区块里密密麻麻罗列了N个下载链接。有不同的版本、有不同的下载工具、有不同的外站下载。这些链接在没有进行任何组织的情况下呈现给用户，体验是非常糟糕的。 

图6 

对于那些信息量很大很杂的网站来说，单纯的使用某一种按类分组的方案已经不太适用了。一般来说，广度比深度的效果更好。在深结构的各级别间选择，比起在广导航的各选项间扫视，要付出更多精力。眼睛比起鼠标点击（和页面载入）要快得多。虽然用户在深结构更容易迷失方向，甚至可能迷路，但也不要在广度上走得太远。任何时候都把所有链接展示出来会吓倒用户，让他难以选择。用户会点击看起来适合他们需要的第一个选项，或者干脆放弃，下图清晰的阐述了用户放弃率和深广度之间的关系： 

图7 

淘宝首页类目地图大概有300个类目，使用了三层结构将他们清晰得展示出来，每层类目都是4～12个之间，是一个深广度保持平衡的典型案例，图8： 

图8 

小结

对于不同类型，不同信息量的网站，在深广度平衡上应采用不同的策略和方式。本文仅以个人在工作中的经验来对深广度平衡的方法论进行一些实例化的分享。对这方面有兴趣的同学欢迎留言探讨。 

注1：摘录《Web导航设计》第1章 第一节 导航的需要（P6） 

注2：摘录《Web导航设计》第1章 第一节 导航的需要（P9） 

注3：摘录《Web信息架构》第5章 第四节 组织结构（P70） 

注4：摘录微软论文《Web page design: implications of memory, structure and scent for information retrieval》 

参考文献： 

《Web导航设计》 

《Web信息架构》

 原文：http://ued.taobao.com/blog/2010/01/30/the-practice-guidelines-of-interaction-design-the-balance-between-breadth-and-depth/

看到这篇文章感觉很亲切，为什么呢 因为昨天下午刚刚给公司视觉设计师讲了一下交互设计的重要性，并让他们更多的接触交互设计，理解交互设计的思想 才能更好的通过视觉表现传达给用户最好的体验

  视觉设计师就是把视觉传达给用户、给观众，我们是视觉信息的发送者，把准确的内容发送给我们针对的接受者，也就是把我们的情感，我们的认知，传达给我们的用户，这就是视觉设计师的工作。交互设计师的工作是让产品易用、有效的让人愉快的去使用产品,他们也致力于去了解用户的心里期望，从而设计出用户所需要的产品。其实交互设计师与视觉设计的目的都是一致的，都是让用户来喜欢上我们设计的产品。说回来，我的职业是一位视觉设计师。从一位艺术设计师到一位产品界面设计师。在职位转变的过程中，也慢慢开始接触交互设计这一块，也对交互产生一些理解，我觉得视觉设计师也应该略懂交互设计。

    我接触互联网也有4、5年了。做过几年的网页设计师，是否我们一定就没有去接触过交互呢？对于互联网，使用过Blog、论坛、管理后等等一些有交互行为的互联网产品，我自认自己是Web的一位高级用户了，下意识中其实也了解了很多互相网站的产品，只是我们没有把过往所看的，所接触到的综合起来而已。我相信在中国很多接触了互联网几年的网民们也有这种下意识。所以对于交互我们是有模糊的理解的，我们知道按钮是长得有立体，是可点的。还有那凹进去的是一个输入框，那些信息防阻我们去浏览的，我们都对这些控件在下意识中都有一定的认知。

    大家都知道WEB交互设计这个行业是一个新兴的行业，在前几年，在互联网上，我们都没有想过交互设计会成为一个职业,在中国，这个新兴的职业专家也是比较少的，从事这方面的人群也同样，但是随着公司意识到交互设计的重要，交互设计的待遇有可能会比现在的视觉设计师更为丰厚。从而令很多视觉设计师或者从事互联网行业的人都纷纷转到交互设计师这条职业线上。实际上，交互设计的工作在视觉设计的前期，在前期的投入和产出在交互设计上比视觉设计更容易去衡量。而那么视觉设计只是支持交互设计师的工作？把交互设计的原形视觉加工？我觉得视觉设计师不仅仅是图形设计师，因为视觉设计师也包括了产品界面设计的工作，整个产品的项目过程中，视觉设计师应该去参与用户调研、商业分析和MRD与PRD的评审会（并不是全部会议都参加，可以排除技术上的会议），因为视觉设计师他也要了解市场定位，了解用户使用产品的习惯与爱好，了解那些功能对我们做设计的时候是否有限制的，了解这些为我们的产品给他在视觉风格上准确的定位,在前期的工作会更让我们去熟悉产品。如果产品是新产品，或者是比较重要的项目，我们应该为我们的产品制定产品风格的关健词，情绪版,前提我们一定要明确我们的商业目的和使用人群，这样设计出来的产品我们都有根据有理由的。这同时也为了我们的设计负责任，为我们的用户负责任，当你的老板和PD在无理由之下说你的设计不“漂亮”的时候，你回答的时候心里有底的，因为背后有一套科学的设计方法在支持着你,在这点说回来也是对应了我们视觉设计不仅仅是图形设计，我们也应该去了解用户的心理需要，能用视觉元素，颜色，布局来传达给用户我们产品的一种情感，让用户在使用我们的产品的时候，会用视觉给用户留下深刻而愉快的印象。让设计师与用户之间产生共鸣，这也让视觉设计师很有成就感的一件事。

    在视觉设计师眼中对交互其实也是有一定模糊的理解的，在项目中，因为视觉设计师们都会接触到交互设计的原形，经过对交互设计师原形的理解，才很好把原形和交互的思想用视觉的手法去传达给我们的用户，比喻：一个页面那部份是需要突出，视觉设计师应该把视觉重量加重，我觉得一个时间做得比较久的视觉设计师其实他也有一种本能反应，就是在下意识中了解到使用产品的过程以及控件的设计，而在一些规模比较小的UED里，其实视觉设计师也是在做交互设计师的工作，这有一个很好的优势就是他们能很好的去理解交互所表达出的重点和思想。心里已有视觉上的模型。在这点，视觉设计师应该去了解基本的交互设计知识，去了解交互设计师的想法，使得视觉跟交互之间的配合更为紧密。而不是一拿到原形立刻”美化”，我们视觉设计师并不是美工，也不是用我们设计习惯或者自己觉得美的风格来套用我们的产品。我们是要为我们的产品解决视觉上的问题，解决正确性产品情感传达的问题，使产品更能达到预期所期待的效果。
    在这里我并不是说视觉设计师要去抢交互设计师的饭碗，交互设计师是专业的，我们要相信他们，作为视觉设计师应该也要去了解交互设计的想法，了解他们，才能把他们的想法准确用视觉传达给我们的用户，除了你本身专长技能之外，其它也略懂一些，对工作，对生活会更美好。

转自：http://www.thedaxiong.com/archives/13

小时候，童话故事都告诉我们，迷路可不是一件好事。那会伴随着困惑、沮丧、愤怒和恐惧。为了避免迷失方向，我们发明了各种导航工具，大到卫星定位系 统，小到指南针，人类在这一事情上，极具创意。

在网站上迷失方向，虽然不是什么生死攸关的事，但会带来许多负面影响，如：用户体验下降、任务不能完成，用户流失等。我们可以通过良好的导航系统来 避免这个情况发生。好的导航系统可以帮助人们找到在网站中的位置，并帮助他们制定更好的查询策略，增进对内容的理解。

在制定解决方案前，先了解他们为什么会迷路：

1、  当人们不能理解信息时，会产生迷惑

2、  人们在查询过程中迷失，不知道下一步该做什么

3、  人们可能会在网站中失去方向感，无法回到以前的页面，甚至是首页

图1

比如在图1的这个网站中游走，你容易陷入进退两难的境地。上图中，两个点击打开的页面，都没有导航信息，甚至没有任何离开当前页面的出口。

4、  人们在在信息系统中偏离了方向，分散了注意力。人们因众多的、喧宾夺主的信息而偏离了主要任务。关于这一点，可以参考交互指南之《突 出重点，一目了然》

图2

图2中的登录页面，可谓琳琅满目，信息的丰富程度毫不逊色于首页，难道设计者的目的，是希望用户放弃登录这个主要任务，去往“更重要”的地方吗？

你也许会想，让用户不要迷路，不是非常简单的事情吗，我只要在所有页面中放入全局导航，使他们能在网站的核心内容之间移动。然后放入面包屑，让他们 了解自己所处的位置，一切不就完事大吉了。

但事实上果真如此吗？全局导航也许能帮助用户了解你网站的核心内容，但在具体的任务中，比如图3中的淘宝全局导航，如果放入在挑选商品或支付的页面 中，恐怕非但不能指引用户，还会干扰到任务的完成。

图3

小心，别让自己陷入导航系统的过度设计中去。我们所要做的，是使用人物角色和场景作为参考，确定人物角色会选择的到达内容的最佳路线，而不是提供 所有线路，更不需要将网站的全部结构复制到每个页面当中，造成页面信息负担。好的导航系统让人们感知不到它的存在。就好象在观看体育比赛时，裁判会做出许 多正确的判定，而我们往往忽略他的存在，但一旦裁判员做出了一个错误的判决，就会引来场上观众的一片唏嘘。

那么，我们应该怎样做，才能保证用户不在网站中迷失呢？

首先，我们要帮助用户定向，也就是确定“当前位 置”。

即便GPS卫星定位系统如此强大，它都必须随时在地图上标明我们的“当前位置”，才能真正为我们导航。而与现实世界不同的是，在网络世界中没有南北 之分，也没有地理位置，我们必须利用导航系统的各种因素，来为用户创造可以判断当前位置的情景：

1、  重视网站的品牌信息

用户应该一直知道自己在浏览什么网站，将组织的名称、标识、和身份识别图放进网站的所有页面中，是达到此目的最显著的方法。

2、  细节创建情景

我们可以通过页面内标题、页面文字，向用户传递当前位置的信息。浏览器标题和URL也是用户进行判断的依据。当前导航选项的高亮状态，也是常用的方 式。

3、  面包屑

“面包屑”也是标明当前网站位置的好工具。此外，面包屑还能传递网站结构信息，以及记录用户的访问足迹。

4、  逃生舱模式

逃生舱模式也是帮助用户确定当前位置的一张底牌。也就是在网站的所有页面上设置统一的出口，无论什么时候，点击这里，都可以回到首页。大部分网站都 把逃生舱设置在网站LOGO上，已经成为惯例了。

其次，根据用户需求，确定导航模式。

用户的需求决定了我们应当放置何种导航链接。在不同类型的页面，用户所产生的问题不尽相同。我们需要预测这些问题，然后在设计导航的时候，也问自己 同样的问题。

一般情况下，用户会问：“我在哪里？”“我在这里能做什么？”“我还可以去哪里”；在电子商务网站，他们也许会问，我该如何找到想要的产品信息；具 体在某一产品，他们也许会问：“我该如何联系客服人员？”“我到哪里可以找到相关产品”。

我们所要做的，并不是想出所有可能发生的问题，相应的，我们也不可能把所有问题的答案都放入页面当中。这个时候，人物角色和场景，将发挥很重要的作 用。对于不同的页面，弄清楚每个用户角色要去哪里，放置他们最需要的导航。比如：你的人物角色需要随时从一个栏目跳转到另一个栏目吗？如果是的话，请保证 顶级栏目的链接一直可用。

一旦确定了用户想要到达的内容，就要思考达到这一目标所需要的最简单、最容易的方案。比如在图4中，也许你的人物角色需要的，只是一个“下一组”链 接。

图4

最后，通过压力测试检验页面的导航能力。

怎么样测试这个页面的导航能力呢?

（1） 随机从你的网站上选择一个页面；
（2） 把这个页面打印成黑白的，并把页面头部的浏览器地址栏和下面的版权及公司信息部份去掉；
（3） 假装你是第一次进入这个网站，并试图回答下面的问题(详见下列问题列表)；
（4） 在一张纸上写下你所想的和答案；

问题列表:

1、这个页面是写什么内容的？ 在页面的标题处画一个方形或在纸上写清楚；

2、这是个什么样的网站? 把网站的名字用圈圈起来，或者自己写在纸上；

3、这个网站主要的版块是什么? 用x标识；

4、这个页面中主要的版块是什么？ 用三角形围着x来标识；

5、我怎么样到达这个网站的首页？ 用H标识；

6、我怎么样才能到达网站的顶部呢? T来标识；

7、每一组链接分别代表什么? 把页面上的主要链接圈出来，并写下标识；

D:用来标识更多，详细介绍及这个版块的子页面等；

N:在同一版块的其它相邻页面；

S:在同一网站上但不相邻的页面；

O:离开这个网站的页面；

8、你是通过怎么样的路径到达这个页面的呢？ 请写出你到达这个页面的路径，选择1>选择2>选择3…

让你们团队的其它成员或熟悉你网站的朋友也与你做同一试验，大家象跳伞一样的进入网站中的任意一个页面，然后把回答记在纸上，你就可以看出导航存在 的问题。

转自：http://ued.taobao.com/blog/2010/01/22/the-practice-guidelines-of-interaction-design-avoid-getting-lost/