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、规范了部分内容的文字描述。

要做好一个HTML邮件，说简单，还真不怎么复杂，说它复杂，其实也不难。-_-!!

以前写过类似的[ 关于HTML邮件的总结 ]，最近又犯愁，就再唠叨几句。

简单的是：技术实现要求不是太高，只要做好xhtml页面就能使用邮件发送服务来发送。

难的是：如要做到兼容国内几乎所有邮箱，兼容Gmail，Yahoo mail，outlook等，却也有点难度。因为各大邮箱对css，HTML标签的支持程度各不相同，有的会在邮件主体的外层使用一些干扰的样式，有的对图片的支持也不清不楚，邮件客户端就更是千奇百怪。

要想做好最大的兼容性，建议：

1.用table进行布局，想要布局不乱，尽量用他，很多时候web标准在这里行不通，想用float？到了人家的邮箱里，就不一定浮的起来了。。

2.少用图片作为背景，因为outlook 2007和某些web 邮箱是不支持背景图片的。

3.图片给出alt属性，防止图片无法显示时，出现红叉叉。

其他的，请参考上面给出的总结，业界也有不少关于这个话题的好帖子，可以搜索一下。

现在，再谈谈如何在HTML邮件上做一点点用研，提高它的回报率。

首先，有一条是必须的：你所发出的邮件对用户来说，是确实有意义的，而不是在糟蹋广大劳动人民的智慧。

1. 它面向的用户群体主要是某站点的会员，包括购买了产品的用户和没有购买产品的用户，没有购买产品的用户又包含活跃会员与普通用户，往下还可以细分。与用户的沟通，或者说互动，有很多的途径，HTML邮件就是其中之一，[ 虽然我极不推荐用这个古老而收效甚微的方法，其他的方式，往后再聊聊] ，它以精准而著称，如果接受者不是我们的有效目标受众，不但浪费了资源，更违背了HTML邮件或者叫EDM的宗旨及意义。这一点是首先要明确的。

2. 我们来看看这个小用研的重点在哪？先模拟一下用户打开邮件的整个过程：

A、B、C三个点可以说都是关键点，因为这三个点是一个用户真正做决定的点，但是，其中的A是一个EDM能否产生真正应用价值的，是否有存活在这个世界上的时间点。这个地方需要考虑的是标题的创新包装，所以A是这三个点中，最重要的。
B点是视觉风格–>内容的天地，也是用户是否会深入了解该邮件的过程。
C点是真正对用户产生价值的地方，是能否给用户带来效益的地方，也是站点与用户能否双赢的时间段。这一次的用户调研，将主要在这三个点设计调研点。

剩下的，就是控制好样本量和选取合适的调研方法，可以是问卷，访谈，Focus group，可用性实验室等，最简单的，就是问卷和访谈。访谈，可以是真实的面对面的，也可以是通过语音。我们此次的调研主要采用的就是上面提到的前两种，效果还算理想。

]]> http://www.kdued.com/2009/04/html-mail-2/feed/ 3 http://www.kdued.com/2009/04/china-mobile-g3-flash-website/ http://www.kdued.com/2009/04/china-mobile-g3-flash-website/#comments Sun, 26 Apr 2009 18:39:22 +0000 admin http://www.kdued.com/?p=912 在看到7yue博客——“换手来用”的思考 有这么一句话：RIA是一个更趋向于“体验”设计的领域，不仅仅包括“开发人员”，还包括“设计人员”，这些设计师又包括UI设计，交互设计，图形设计，色彩设计，特效设计……一大堆五花八门的设计分支，这个分支可不是“开发人员”玩的转的。偶觉得基本列举了RIA的一些特性。

作为业界最热门的话题：3G，如何让人们了解3G，认识3G，宣传3G，营销3G，中国移动的策划肯定是花了很多心思的，最后，选择了Flash作为载体。最终的制作出来效果也非常棒，形式与内容结合俱佳，细节丰富，与其他两个运营商的区别一下就显现出来，下面就让我们一一来解读这个RIA应用（http://www.chinamobile.com/events/g3/g3book/）。

1、技术实现：Flash +Photoshop +Actionscipt3。之所以用Flash而非Flex，从网站的显示对象来讲，基本是复杂动画和自定义的界面，而不是数据的交互，这方面是Flash的强项。

2、UI设计：场景放在云端，整个意境体现了无线的空中穿梭感觉。处处是LOGO的变幻应用（G3气球），强化突出品牌。表格设计，滚动条设计及图片框等常用的UI组件样式都经过了特制，与整个背景和风格融为一体。美中不足的是视频的播放控制用了Flash的内置控制条，与整个网站风格不符并且高度显得太高了，如也能自行定义，则完美了。

·图片展示

不足：

1、采用了过多的位图

2、资源耗费过高，CPU大概维持在90%左右

3、由于采用了Flash制作的表格样式等，扩展性不强，例如用户如果想要看到更多产品上网本的具体参数，就不能够及时更新，而这是比较关注的用户体验特性。

开心网注册也一段时间了，之前也领了宠物狗。但是上的很少，因为没有什么有粘度的特性功能吸引我，只是偶尔上去看看宠物而已。

之前开心网的宠物邮件提醒功能还算不错，火候拿捏得也差不多刚刚合适。可是现在发来的邮件提醒：让人看了后会反胃。

我很想去看看我的宠物狗，但是看到“这些邮件”我打消了此念头。真不知道设计这邮件提醒的人是怎么想的。

发泄归发泄，总得有点实质性的建议：
1、突破一下传统，不使用文字交流
2、增加宠物的心情表现(生病、不开心、想家…)，别老是饿呀饿的
3、邮件中使用宠物的生活照：回忆总是是美好的，也是最让人留恋的
4、……能脑暴出来一堆

于是来到5G首页，糟了用户名忘记了。
1、先随便输一个常用的试一下吧（输入用户名和密码 点登陆）

2、哇，输验证码（心里暗喜：记性不错呀，竟然能输对）

3、输入验证码后（对不起登录失败，请重新登陆。晕）

4、没用户名找回功能???
5、算了，点忘记密码吧试下：第一步：输入用户名

6、提示”您的账户资料中没有完整的Email地址，不能使用取回密码功能，如有疑问请与管理员联系。” 　得此路不通 ！

打住打住，冷静冷静，整理下思路：
是我忘记用户名的错吗?还是我笨不会找？还是@#￥￥#%
害得我大中午没睡觉，发帖泄愤。

小结：
多简单的一事：你就不能发邮件时，把亲爱的朋友换成我的用户名吗？ 一句亲爱的要了我的命了。

Top Sites顶级网站效果

Cover Flow效果(苹果系统中非常典型的交互：炫)

页签类似Chrom在最上方

Histort搜索

号称150项特性，在这里没法一一列举了。有兴趣的朋友可以去这里下载。目前是Beta版还有些不稳定
–for Windows XP 或 Vista下载

小结：只有先吸引用户，才可能让用户爱上你。

举一反三：你的女友吸引你吗？不吸引？那赶紧换人吧！ ————纯属瞎掰 ^_^

点击查看大图

图中的小人代表用户：“How do get a date?” 我该如何获得想到内容。
用户并不关心网站的信息架构是什么样的，他只是上网、做事、然后离开。只有当用户受困于我们设计的网站时，他才会去研究网站蹩脚的架构，因为只有这样他才能够做完该做的事情。但是很多时候用户并不愿意花太多的时间浪费在我们的网站架构研究上。原因很简单：“因为有更多、更好的同类网站在向用户招手！”

因此我们需要投入大量成本和资源来设计出好的信息架构，让用户很轻松就能完成要做的事情。
so:好的信息结构需要由专业的信息架构师来设计，信息架构设计是互联网产品设计流程中非常重要的一个环节。

关于信息架构的知识，可以从下面的途径去详细了解。
1、《Web信息架构》目前好像已出到第三版，封面还是那只北极熊(很出名的熊哦!)
2、白鸦：浅析facebook的信息架构 http://uicom.net/blog/?p=762
3、千鸟：网站的信息架构 http://blog.rexsong.com/?p=348
信息架构与可用性 http://blog.rexsong.com/?p=509

三个设计方案如下：
在我看来：其实只是一种方案的三种不同风格而已。因为没有实际方案的手册，所以不好做过多评价。

提出自己的问题：
风向标式：如何避让我们免头晕？
直板式：如何带给我更多有用的信息？
路名牌：目前步行基本不知道走的是什么路？
……

来看看其他路牌的案例：
伦敦路牌：
2005年伦敦运输代表发现，目前众多的行人标志系统，在伦敦中部的作用并不大，往往造成混乱，并没有一个相应的过分依赖围地图，以帮助人们浏览地上。他们通过对伦敦全国所有地区的信息协调，因人制宜的对不同行业需求的人，有针对性的做相应的改动，为的就是让他们的交通畅通无阻！

从图中看出，他们除对对地图的改动外，其外在形式也在改变，而且相当的时尚，一点都没有影响市容的问题！

上海浦东新路牌：

一批具有夜间发光功能的新型道路指示牌近日在浦东陆家嘴地区“上岗”，与普通的路牌相比，新路牌显得大而醒目，高度也更为合理，同时在路牌的表面安装了一层发光膜，路灯越暗，路牌显得越亮，新路牌还明确地标明了该路段所包含的门牌号码范围

说了这么多，其实就是希望深圳这次的路牌设计，不仅要在外观上有设计之都特有的风格，
更希望能在可用性方面有质的突破。目前深圳市规划局的网站上http://www.szplan.gov.cn/main/csbs/index.html还真没看出些东东来，拭目以待吧……

沙龙之后，我想就应该考虑更多的是进行实践了。
谨以此帖，纪念不寻常的2008年。

PPT下载  《RIA及技术与用户体验》

恩恩，谁那天拍了靓照的，赶快放上来showshow:)))