EDM设计的前提是：
1、友商联线将持续性的以邮件EDM的形式发给用户。
2、要考虑版式结构的延续性和扩展性。
3、要考虑邮件收发的速度性能。
4、品牌风格的传递。

根据这些前提，我们拟定了设计的基调：
1、框架必须简单，易于扩展。
2、图片精简再精简。装饰性设计集中在广告，及视觉引导的作用上。
3、要有联线的设计特色（这个做了3类风格供参选）

根据这些原则，我尝试做了很多种风格，最后聚焦在3种，方案一：是清爽有质感风格的设计；方案二：非常简洁大方的商务味道的设计；方案三：是有特色情感的风格设计。

最后我们联系了14位用户，请他们帮助调研。决策最终选用哪种方案。但因为时间紧迫，我们仅收到5个问卷反馈。

5份问卷的数据为：
1、无用户选择方案一；
2、设计风格和文字字体上，方案二均以4：1胜出；
3、阅读粘性上，方案二与方案三2：2。

虽然调研基础最少要12份，由于我们的时间有限，仅收到5份就开始总结，但方案二的优势还是很明显的。
最后，我们选定了方案二。 我总结了一下：

其实友商联线15期和14期，在风格设计上是近似的，都是商务风格，简洁大方，蓝色调子，右边为广告区域。视觉设计并没有新的改观和体验。
但内部同事反馈意见说，14期风格不好看，需要重新认真设计。回过头来，我们发现，单纯的设计回到了原点，提升和改进的其实是用户体验。So，不管需求还是规划提意见不能单单指：设计风格不好！更多要站在用户的角度去思考体验的改进！而设计师呢，不能仅仅只关注色调图片的装饰性效果，更多要关注视觉层面的交互设计体验（色彩、图片都是为内容服务的），要更多地多问问、多思考。

15期设计，修改的地方：
1、文字，用了14pix的字号，有助于阅读。
2、主要推送内容加了图片，目的是吸引用户的视觉，能快速聚焦到重要区域。
3、加了导航栏目，帮助用户快速进入其他链接内容。
4、加了hot、new小图标，有视觉引导提示性作用。
5、一级栏目、二级栏目标题，颜色做了区别，更加醒目。
6、加了友好的问候语。
7、规范了部分内容的文字描述。

随便聊聊哈，欢迎大家一起讨论：
1、一位同事跟我说：他尊重我们的设计
根据当时的工作情况，我理解为：他希望设计师自己要有自信心，要树立专业领域的权威性。如果自己像墙头草一样左右摇摆，那就别指望着别人能信任和信服你的设计。

设计师的自信心：是综合能力素质的体现，包含设计师自身的设计技能、审美能力、沟通能力、协作能力、理解能力等等；要有规范的流程、合理的制度做保障；同时，还应有良好的氛围滋润设计师们的成长。有很多因素影响着设计师的“自信心和权威性”。

2、另一位同事告诉大家：要尊重设计师的设计
根据当时的工作情况，我理解为：当设计风格出现争议时，不能判断谁对谁错时，我们选择尊重设计师的意见。

虽然，同样是尊重，但我却觉得，后面的这个“尊重”，是不妥当的，设计风格有争议，那是好事，交流讨论，才能更好地磨合，更出色地完成工作任务。这个时候，不是单单用“尊重”一词来解决问题，而应该是“有理有据”的交流讨论，确认问题，开展工作。我个人更希望这位同事能说：我同意设计师的意见！如果在大家心不甘情不愿的情况下，选择“尊重”解决问题，貌似在怜悯设计师可怜的自信心。这样的尊重，我们不要，我们要的是真正的“信服”。

导航的目的很简单：告诉你现在的位置，你可以怎样来，又可以到哪去。生活中最常见的导航是路标，当遇到错误或指向性不明确的路标，你一定会抓狂。偶本人就曾在某大型商场见到一幅消防逃生路线图，指引标注的甚为详细，可惜的是没有标注“您当前的位置”……

当然生活中的例子不是本文哼唧的重点，下面开始扯web网站中导航的应用。

介个是我们熟悉的浏览器和PS的导航。浏览器提供的“前进”“后退”功能能够让用户双向返回浏览过的页面。PS的导航器则清楚的标明了当前所在的位置。

图1：世界之窗浏览器

图2：Photoshop

在Web网站中，导航则被创造性的赋予了多种多样的表现形式。偶主要以友商网做个例子，继续瞎扯。

全站性导航

顾名思意，全站性导航是在网站的每一页都会出现的一种统一表现的全局性导航方式。通常出现在网页的顶端，直接链接到向用户展示的重要区域。另外有一种俗称“面包屑”的导航，虽然未必会出现在所有页面，但是它承担了告知用户所在页面的位置，以及由哪来到哪去的重要功能。（面包屑的由来详见格林童话《Hansel and Gretel》）

图3：友商网的全站导航和面包屑导航

区域性导航

区域性导航作为全站性导航的辅助，主要用于对本区域中信息做进一步的分类，让用户更方便查阅。需要强调的是，此类区域性导航需要设计得比较灵活，能够应对信息增加导致导航层级增加的问题。下图是友商课堂栏目的区域导航，已经无法满足下一级目录分类的需求了-_-||

图4：友商课堂的区域导航

内嵌式导航

内嵌式导航则更加灵活滴穿插在页面的各个部分，为区域不同却有关联的内容做牵线。在引导用户获得更多相关信息的同时，也可以增加网站的内链。友商网在4.0改版的设计中就大量使用了如下的内嵌式导航：

图5：友商网的内嵌式导航

辅助性导航

辅助性导航包括了网站地图（Sitemap），索引（Index）以及其他基本导航以外的导航方式。网站地图需要清晰的写明整个网站的目录结构，虽然几乎没有人去看，但是他的核心作用是指引搜索引擎的爬虫直接爬向网站上的重要页面。索引则多数出现于有海量信息的商务网站（如B2B类站点），他能让用户跳过所有的目录级，直观得看到全部的底层信息。

图6：Globalsources的索引导航

社会化导航

相比前面提到的导航类型，社会化导航则典型的拥有web2.0的灵魂。这类导航的开山鼻祖是amazon.com。当你购买一本书的时候，系统会根据其他用户购买的类似书籍或目录中的类似书籍，通过一套复杂的算法推荐给你相关的书籍，绝大多数情况下这本书是你需要或者感兴趣的，从而提高了销量。目前国内此类导航做的最优秀的非淘宝莫属。你浏览了商品，系统会“猜你喜欢”，推荐给你相关的商品信息；你收藏了商品，同样会推荐给你其他用户收藏的同类商品。研究一下这些推荐规则，不失为又一种网络推广的途径。另外一种值得一提的是云标签，实际上他是众多关键词的集合，不同的是他同样通过算法将热门的关键词以不同的颜色或字号加以区分，并且实时动态变化，告诉用户哪些信息最“热门”，引导用户去点击。

图7：淘宝的“猜你喜欢”

图8：淘宝的“同类收藏推荐”

图9：Flickr的“云标签”

网络上还有众多牛X创意的导航方式，大致都属于上述类型无法一一囊括举例。但目标都是一个，以更好的交互方式，友好得引导用户最大程度滴浏览站内信息，减少跳出率退出率，增加停留时间。相信随着思想和技术的深入，会有更好更强大的导航方式不断滴出现，让我们拭目以待……

接下来，我们该做什么？该怎么做？都想好了吗？都准备好了吗？

加油，友商网的兄弟姐妹们！！！

点击此处下载ppt：3G之变-友商网KDUED 

<>

当然操作录像的方法如果能结合问卷调查来使用，会对后期的分析工作有很大的帮助。以下简单谈几点这两种数据收集方法的注意事项：
1. 问卷设计完成后，先找人试答，发现问卷中是否存在问题。同样当你设计完某项功能后，找同事或内部客户试用，并进行录屏，也会发现不少问题。
2. 参与调查活动的用户未必具有代表性。需要客服或营销人员提供比较有代表性的用户名单，同时必须保证有足够的样本量。
3. 参与调查活动的用户来源和动机对结果有直接的影响。例如你对参与调查的用户有过高的利益回报， 会在一定程度影响他们的答案。
4. 用户操作录像最好能在用户自己的环境中进行，最大程度还原使用场景。例如就在用户的办公室，用他自己的电脑。避免环境变化对用户操作的影响。
5. 对于针对性较强的任务而进行的操作录像，应该给予用户一些预设场景或引导，帮助用户了解任务目的，更快进入状态。
6. 结合问卷中的信息来分析操作录像。如果问卷中用户就表示出了自己IT技能水平不高，那么在录像中的一些操作就未必代表你的设计有缺陷。
7. 在对用户进行录屏的整个过程中，尽量不要打扰用户的任何操作。即使是用户遇到问题，也让他自己尝试解决并且允许用户自己放弃操作。这样可以最大程度暴露出用户使用中的问题，留给我们去改进。

或许这是2008年KDUED的最后一篇文章。谨以此文纪念今年KDUED团队的进步，并感谢所有KDUED成员以及关心KDUED的人们对我的帮助。
祝大家2009年身体健康，万事顺意！

Jack角色如何应用？
1、将最终得到的人物角色介绍给同事和决策者，大家统一用户认识；
2、相关规划、需求、设计讨论，将角色应用其中，以用户的角度去讨论、决策问题；
3、根据角色确定一个界面是否能够满足用户目标，或者需要开发两个或以上的用户界面；
4、对哪一个功能比较有用进行设计决策；
5、在制定内容时，可以使用角色作为指南，这样以确保内容可以支持用户的目标以及回答他们共同的问题；
6、帮助我们进行用户分析活动，比如任务分析；
7、指导专家做可用性评估；
8、根据角色确定可用性测试场景和用例；
9、可以为产品的市场营销工作做出贡献。

其实最难的也就是最后一步：角色应用
如何让我们创建的人物角色发挥威力？需要我们不断去努力和实践。

而大家的进步，大家的付出，大家的成长，你，你们，都看到了吗？

新的一轮革命，友商网！我们要做的还有很多很多！

我们不能止步不前，我们要超越自己，超越应该超越的一切，这样的生活和工作才会有价值，不是吗？

一．基础数据

1. 年龄
2. 性别
3. 学历
4. 家庭情况
5. 职业
6. 工作岗位

二．个人性格

1. 性格类型
2. 思维方式
3. 其他…

三．地域及文化背景

1. 居住地
2. 工作地
3. 宗教信仰
4. 是否能将英语作为第二语言

四．个人兴趣爱好

1. 喜欢的颜色
2. 喜欢的休闲方式
3. 喜欢的电视节目
4. 喜欢的网站
5. 其他…

五．互联网应用

1. 互联网使用时间
2. 平均每天上网时间
3. 主要上网地点
4. 网络接入环境
5. 电脑操作系统
6. 习惯的电脑分辨率

另外可以根据实际情况，设计一些电脑使用、互联网使用问题，来判断用户的IT层次，例如：

1. 如何关闭电脑
2. 如何新建word文档
3. 如何保存网页中的内容
4. 使用什么工具处理图片
5. 其他…

以上内容及问题设计只是举例，具体问题可以针对调研群体的实际情况设计，包括问题类型是选择或是问答等都有很多技巧。此外这种问卷调查的方式比较单一，需要穿插使用其他调研方法才能得出可靠的数据，其他的调研方法以及需要回收多少有效的样本才能还原一个真实的模型等问题。这些会在以后的文章中谈到。

 
双面板Pattern
用来承载对象与对象内容的两个面板，用户选择【对象面板】后，【对象内容面板】会自动显示该对象的详细信息。

Microsoft Outlook2007
适用范围
邮件、歌曲库、图片库、主从数据记录、文件管理器等。
优点
1、对象与对象内容同时可视；
2、避免了页面切换和更多的鼠标点击操作，节省体力；
3、减轻用户记忆负担，用户不需要去记忆【对象内容】的存在位置；
4、支持上、下方向键的快速浏览，有效减少浏览时间。
如何使用
根据用户的视觉流动方向，可将【对象面板】与【对象内容面板】左右、上下排布。当用户选中【对象面板】时，【对象内容】面板及时刷新。
案例

如上图：在Web软件应用中，可将基础资料类（币别、部门、职员）数据的录入与查询整合为”双面板模式”，上面用做【数据输入区】，下面列表用做【数据展示区】。鼠标单击【数据展示区】即可在【数据输入区】完成数据修改。
此方案充分利了用双面板Pattern的优势，并进行了扩展。用户的反馈效果还是不错的！

————————————————————————————————-
画布+工具条Pattern
画布+带图标的工具条，通过画布旁的工具条来创建、修改画布对象。

适用范围
图形编辑、文字编辑
优点
1、 一张画纸和一支画笔，现实生活到软件界面的自然映射，符合用户心智模型；
2、 通过使用工具条可以对复杂的操作进行分类，方便用户使用。
如何使用
可根据用户习惯将工具条放置在画布上、左、右边，工具条一定要提供表意明确的图标（或增加文字描述）来帮助用户识别。
案例

如上图：在SnagIt9.0当中，将原有的工具条改为微软的Ribbon，并在界面底部增加了”捕捉库”操作区。在PhotoShop中进行多图切换时需要使用Ctrl+Tab快捷键，而在SnagIt9.0″捕捉库区域”既能看到多图的缩略，又能很方便的通过鼠标点击进行切换。这个在画布+工具条Pattern的基础上增加了 “捕捉区”的扩展，更加方便了用户进行多图的切换

通过上面两个案例，我们可以了解到界面设计中的Pattern是什么？我们该如何利用已有的Pattern去更好的设计界面？好的Pattern有很多，这里没法一一列举。有兴趣的话可以自己分析研究一下其他pattern。

任务：设计一个网站导航

目标：1、提供给用户方便的网页间跳转的方法
          2、能够表达出页面之间、页面与内容之间的关系

分析：人本能的具有空间感。想象一下你现在坐在家中的沙发上看电视，突然有访客，你起身会向哪个方向走去？高中时的挚友是坐在你的前面还是后面？——不用问大家都能会快的回答出来。
同样我们在设计网站导航的时候一定要清晰地告诉访问者“他们在那哪儿”和“他们能去哪儿”
用户需要知道他们在网站信息空间当前所处的位置，我们也希望能帮助用户建立网站空间感，通过我们设计的导航系统。(之所以称为导航系统，是因为仅仅靠某一种导航模式是无法完成目标的)

设计方案：提供一个完整的导航系统，其中包括全局导航、局部导航、辅助导航、上下文导航、远程导航

全局导航：
    从网站的最终页面到达其他页面的一组关键点，无论你想去哪里，都可以在全局导航中最终到达。

局部导航：
    提供一个页面的父、兄、子级别的通路，是用户在网站信息空间中到附近地点的通路。局部导航的设计好坏会直接影响到整个导航系统的质量。

辅助导航：
    提供了全局导航和局部导航不能快速到达的相关内容的快捷途径。用户转移浏览方向，而不需要从头开始。

上下文导航：
    用户在阅读文本的时候，恰恰是他们需要上下文辅助信息的时候。准确的理解用户的需求，在他们阅读的时候提供一些链接(例如：文字链接)，要比用户使用搜索和全局导航更高效。上下文导航的示意图与辅助导航类似，这里就不再画了。

友好导航：
    一些用户通常不会使用的链接，确实需要时又能快速有效的帮助用户。例如：联系信息、反馈表单和法律声明等。

远程导航：
    独立方式存在的导航。如，网站地图：简明的、单页网站整体结构展示。在用户被你的其他导航搞得晕头转向时，很多时候他会选择网站地图。

通过上面这些导航的设计，可以看出一个完整的导航系统设计是非常复杂的和严谨的。