说到本期话题网站设计规范分享及探讨，对于这样的一个网站设计规范，在大互联网公司都有一套自己成熟的规范和流程。但相对于一些小的互联网公司，这方面比较欠缺或者没有。本期书友会我们请到了网易用户体验设计中心的两位高级设计师，杨烽亮和谢守熠为大家做这方面的分享。

特邀嘉宾分享环节：
1.《网易网站及相关产品设计规范》，网易用户体验设计中心 高级设计师 杨烽亮；

杨烽亮同学一开始就抛出为什么要做这样的一个规范的介绍，从不同的角度说明了网站统一设计规范对于产品、技术、运营的利弊。

• 统一整站的用户体验
• 更高效的合作分工
• 设计资源的复用性更容易

杨烽亮同学继续介绍到相关规范的内容，包括导航、页面布局、logo规格、字体格式大小、颜色、按钮、图片尺寸等等一整套的ui/vi内容。

后面提到了执行规范比制定规范难多了，除了来之内部的执行压力外、更多的是销售与网站规范的冲突。针对上诉的问题，其实从不同的角度换位思考,  所有的问题在规范的前提“有的放矢”去执行。

最后在互动提问过程中，大家都很有针对的提起问题，我们的杨烽亮同学很热心的为大家一一作答。由于本期嘉宾的ppt涉及到一个公司的部分隐私，不便于分享出来。如果想继续希望了解这方面的内容，请关注网易的杨烽亮同学。
2.《网易FLASH设计规范》，网易用户体验设计中心 高级设计师 谢守熠；

在这个话题的环节由于便技术一点，所以此时的活跃度比之前的要地点。但谢守熠同学做的ppt很漂亮，分享的思路很清晰。从flash 制作的技术角度介绍了规范的要点。

• flash制作的场景的要领
• flash多个独立动画路径定义
• xml数据的格式规范
• flash导出成avi/MPEG-4时的问题

与会嘉宾分享环节：

这次我们请来了很多业界的朋友，包括

周维亚老师  广州互联网协会秘书长

刘毅    讲师  广州美术学院

胡克    设计学院院长  广东轻工职业技术学院

刘再行  讲师  广东轻工职业技术学院

他们的参与让我们有了更多的支持，他们給了我们很多的建议，同时得到他们的认可也是我们没想到的。后续我们将把我们的“设计之旅”更多的同广州的大企业结合起来，在书友会主题不变的前提下，做的更开放。

最后我们和参与的同学更多的交流起来，倾听大家对书友会的建议。大家提了不少很好的建议，同时我们也很希望书友会这个平台給到大家的时候，也需要大家的回馈。借用周维亚老师说的这句话：“我在书友会是一个什么角色？我能为书友会做些什么？”。

最后大家的合影：

广州UCD书友会一直在反思自己的组织流程、组织形式，希望給大家带来很多惊喜，我来回顾下这次的书友会过程，由于现场进行过程中几个组织者出去开了下会，有些都没记录，更多的内容请看广州的同学们分享。

本期的书友主题我们在全国主题统一的前提下增加了附属话题，这些话题都是和我们的产品设计工作相关。如下，
特邀嘉宾分享环节：

1、《移动设备的交互和设计》，卓望数码 曾帆扬；
2、《iPad 的人机交互设计思想》,广州顺科软件服务有限公司首席执行官吴晓丹；
3、《旅行改变人生》，资深旅行专家、中国旅盟副总 黎晓阳；

《移动设备的交互和设计》
在这个话题中，我们邀请的是卓望数码的曾帆扬，首先作者介绍了一下卓望数码的用户体验中心，卓望数码的用户体验中心目前才建立一年，从规模和经验方面都在一步一步的成长中。

嘉宾曾帆扬开始了后续的话题介绍，主要以139说客客户端设计为例来介绍移动客户端的设计流程和问题。请看：

《iPad 的人机交互设计思想》
来自广州顺科软件服务有限公司首席执行官吴晓丹向大家介绍了iPad的人机交互设计思想，由于离开了下现场，没有认真的听完整。不过从大家反馈的情况来看，大家对都觉得吴晓丹介绍的非常不错。由于iPad是苹果公司最新推出的产品，大家能够接触的机会还比较少，所以从一定程度上很有吸引力。同时嘉宾的精彩介绍让大家重新认识到苹果设计产品的理念。

这里比较可惜的是暂时没有嘉宾的ppt，嘉宾可能需要周二的时候发过来，共享给到大家。

《旅行改变人生》

资深旅行专家、中国旅盟副总黎晓阳向大家介绍了旅游相关的知识，从不同的角度看待我们国内的旅游市场，阐述了旅游对改变我们生活的方方面面的重要性。更重要的是嘉宾把web2.0的思想植根于旅游产品中来介绍。最后引来了我们的米兜同学来介绍他的2009马来西亚之旅。

－－－－－－分隔线－－－－－－－－－－－－－－－－－－－－－－－

纵观我们整个书友会的里程，现在已经是第20期了，也就是说我们坚持了1年8个月了，我们期待第40场，第60场的到来。今年年底我们还将在去年书友会的基础上，更加专业、清晰、规范的运作我们今年的年会。期待到年底給大家分享到一个更精彩的ucd书友会。期待大家到时一起参与进来。

书友会第20期合影，这期人数明显回升，有40多人。

主题：邀请机制与模式 （最近大家应该都被Google Wave的邀请搞疯掉了，一个邀请拍到5000刀着实很夸张，欢迎加入探讨）
时间：10.18（周日）14:30-17:30
地址：广州市天河区科韵路16号广州信息港E栋 网易大厦 一楼

嘉宾：黄耀文（小马  网易游戏）

报名：点击报名（为了给大家提供更好的服务并预留座位，请认真填写，谢谢）

提纲：小马提供

1.话题的理解

*邀请机制是谁带来的？
*随便聊聊google wave的邀请

2.邀请的模式讨论

*邀请方式有哪些?
*哪些方式效果更好?
*成功的关键因素有哪些?
*价值何在？
*应用

3.案例分享

*Google gmail-把邀请当做病毒营销模式
*linked-把邀请体验做到极致
*新浪微博-禁注册的邀请机制社区
*白社会-方式多样化的邀请模式
*中国缘-一个自作聪明邀请模式

4.小结

4.1常用的邀请方式

*链接地址
*邮件
*IM（趋势）

4.2应用的前提条件

*产品创新独特，吸引人
*好的网站品牌，良好的口碑
*广大的用户基础，潜在用户群大

4.3本质及其目的

*关系营销
*吊胃口，增加吸引力，造成资源稀缺的感觉
*选择种子用户，为后期推广做基础

5.随便聊聊的话题覆盖

*大家都接受过哪些邀请？
*主动？被动？说说你的（索取）处理方式。
*如何处理这些，处理方式
*你是否会花钱去买一个邀请码，一个可接受的价钱范围
*对类邀请机制的广告的看法
*邀请机制在产品的各个阶段的意义和作用

1.现场调查：

您经常使用的IM群有哪些？
QQ、MSN、网易POPO、
淘宝旺旺、飞信、新浪UC
Gtalk   ……

.现场调查：
您经常使用的WEB群有哪些？

.你理解的群应该是……

2.群组功能
2.1 群组功能（IM客户端方面）
a.IM群的这些功能是否满足你的需求？
群文本聊天、群语音、群共享、
相关的群设置管理功能（群名片、群成员…）

b.如果IM群还有这些功能？
群广播（1对N发消息）、群演示……

2.2群组功能（IM WEB端方面）
a.IM群WEB上的这些功能是否满足你的需求？
群动态、群论坛、群相册、群邮件、群通讯录
相关的群设置管理功能（群名片、群成员…）

b.IM群 在WEB上还可以有哪些应用？

3.用户沟通

3.1群用户的身份？
固定的群–>固定的身份
临时的群–>临时的身份

如何设计好群身份？

3.2沟通

a.实效性方面—即时、离线

b.消息指向方面—点对点（1对1）、1对N（广播）、 Twitter 风格的对话模式、邮件通知方式（Gtalk）

c.消息保存方面—本地、服务器、邮件通知

4.如何保证用户个人信息的安全？

5.未来的群可以承载的东西？ ]]> http://www.xisoo.net/2009/07/15/ucd0/feed/ 4 http://www.xisoo.net/2009/05/20/0517/ http://www.xisoo.net/2009/05/20/0517/#comments Wed, 20 May 2009 11:29:21 +0000 bluesnail http://www.xisoo.net/?p=168 今天很高兴广东移动给我们提供了会场，同时也很高兴的认识到了上海易土的林汉城先生，同时也有机会邀请到淘宝ued的陈文锋（超群），你可能会问超群是什么意识，昵称？自己去想吧！这次的书友会还是按照之前的流程来走，不过今天大家很高兴参观了广东移动的用户体验实验室，非常专业有水准，让我们这些门外汉终于知道了一个专业的用户体验实验室的布局和设备是啥样，第一次看到了眼动仪。

开始正题，电子商务网站对于有过购物经历的人来说都不陌生，但你在网上有过购物经历不代表你对网购的模式和类型了解，所以这里我们的补充下业务知识，请看维基百科这里的介绍《电子商务经营模式》。

国内常规的网购代表性网站如下：

• 网络书店（当当、卓越、蔚蓝）
• 收藏和艺术品拍卖（孔夫子、赵涌）
• 综合销售平台（淘宝、eBay）
• 网络订餐（饭桶）
• ……

我们这次书友会针对以上类型的网购网站，拿出了当当、卓越、淘宝三个出来给现场的与会同学现场操作。由于网速的原因，这一流程进行不是很顺畅。不过给在场很多没有接触过和正在学习中的同学很深的体会，如果没有了网速，在好的产品也是摆设罢了。

购物流程探讨（以淘宝为例 c to c）

探讨淘宝的流程中大家更多的关注点在购物车、二次登录、支付方式、评价体系这四点，可以说这四点也是我们整个购物体验的生态支点。

1.购物车

大家可能注意到淘宝在原有的立即购买的功能上新推出了一个购物车，就是这样一个购物车带了了不少同学的关注。

我们来看看淘宝自己对购物车的说明：

我们大概了解到这些情况：

优点：

a)淘宝购物车是对淘宝整个产品体系的一个补充，不仅仅是一个功能的加减。
b)购买物品更加快捷，支付可一次性。

缺点

a)支付方式计算的复杂度提高
b)对评价体系有所影响
c)支持的购物范围有限制（只支持一口价的商品）

意外情况

这次书友会上阿锋同学提到了购物车在推出以后被很多的用户当成收藏夹来使用，这是大家没想到的，而且这样的情形是好是坏还需要时间和数据来说明。

2.二次登录

我们在像当当、卓越这样的B TO C网站上买东西的时候都有二次登录的体验，大家普遍的感觉不适。如果要解决这样的问题，估计很难。不在多说，都是体制问题造成的。

3.支付方式

我们最常见的支付方式可以分为电子支付、货到付款、邮局汇款、其他。其中最常见的付款方式是货到付款和电子支付。

货到付款多见于B TO C方面的交易，例如在当当、卓越网上的购书。

电子支付多见于C TO C方面的交易，例如在淘宝、拍拍、有啊等等。电子支付种类方面，目前比例最大的是支付宝，第三方支付已经在电子支付方面占据主要地位。其次是网上银行支付。值得注意的是，除了第三方支付和网银支付外，手机支付已初露头角。

电子支付平台主要有如下一些：支付宝、网上开户银行直接支付、信用卡支付、财付通、百付宝、手机支付、安付通、贝宝、云网支付、环迅支付等等。

4.评价体系

网购的评价体系是个很突出的问题，对于卖家尤为重要。目前这样的评价体系对于C TO C模式下的网购平台显得更为重要。一套完整合理的评价体系建立是需要多方面的推动，来制定一个游戏规则。前些日子，马云来广州布道了，广东电视台有录播。在这次广州举行首届网商交易大会上马云说了不少敏感话题，什么最近要招一批一流的心理学家、社会学家、经济学家来研究其产品，什么痛斥传统行业的陋习，什么淘宝上假货横溢等等，这些最终归结起来就是一个信用问题。而信用的好坏转化出来的结果就是评价，也就是我们常说的“口碑”。希望淘宝上无假货的梦想能够实现。

最后不得不说下移动的用户体验实验室，我想这是每个做产品的人都所希望拥有的。拍了不少照片，鉴于不方便的原因不能公布出来。

书友会实录可以看看我们胡晓同学的BLOG：用户体验提议“看上去很美”（广州第八期回顾）

1. 屏幕分辨率和布局的定义

1）分辨率
分辨率（Resolution） – 影象清晰度或浓度的度量标准。举例来说，分辨率代表垂直及水平显示的每英寸点（dpi）的数量。BitWare 可以用普通或标准（100 乘 200 dpi）及精细分辨率（200 乘 200 dpi）发送及接收传真文档。分辨率是一个表示平面图像精细程度的概念，通常它是以横向和纵向点的数量来衡量的，表示成水平点数×垂直点数的形式。在一个固定的平面内，分辨率越高，意 味着可使用的点数越多，图像越细致。分辨率有多种，在显示器上有表示显示精度的显示分辨率，在打印机上有表示打印精度的打印分辨率，在扫描仪上有表示扫描 精度的扫描分辨率。

这里大家更多的讨论的是我们日常的一些视觉感知，对CRT和LCD显示器有过多的讨论。

讨论到这里大家讨论到一个关键点，就是显示器都有自己的最佳分辨率，人们都喜欢大尺寸、高分辨率，但不是显示分辨率越高越好。我们还要考虑一个因素，就是人眼能否识别。例如，在14英寸最高分辨率为1024×768的显示器上800×600是人眼能识别的最高分辨率(我们暂时称为最佳分辨率)，在1024×768这个分辨率下显示器虽然可以精确的显示图像，但人眼已不能准确的识别屏幕信息了。在相同大小的屏幕上，分辨率越高，显示就越小。这就给我们在产品设计上需要更多的考虑到这个因素，例如整站的字号是否应该大点等等。

2）布局

网页中的布局严格意义上来说并没有一个统一的定义。

网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型。

关于第一屏

所谓第一屏，是指我们到达一个网站在不拖动滚动条时能够看到的部分。那么第一屏有多“大”呢？其实这是未知的。一般来讲，例如在1024*768的屏 幕显示模式(这也是最常用的)下，在IE安装后默认的状态(即工具栏地址栏等没有改变)下，IE窗口内能看到的部分为1002px*645px。一般来讲， 我们以这个大小为标准就行了。毕竟，在无法适合所有人的情况下，我们只能为大多数考虑了。

2. 现行主流使用的屏幕分辨率和布局与用户体验的关系

由于现在使用的显示器的尺寸越来越大，台式PC越来越多的使用19吋到22吋的显示器。我们自己使用的笔记本虽然尺寸在10吋到14.1吋居多，但分辨率基本都是在1280X800.主流的发展趋势是宽屏+高分辨率。可以说，电脑显示器发展到30寸可以算是终极尺寸了，再大就不适合当显示器用了。

宽屏液晶显示器的字体到底有多小？像素点和字体的大小是对应的，像素点小了，文字就会变小。宽屏面板的分辨率一般比同尺码的普屏面板高得多，所以宽屏的字体小得多，对视力也不好。

宽屏的字体到底有多小呢（以笔记本为例）？

像素高度(与字体大小成正比)：
15′普屏 0.298mm
15.4′（宽） 0.259mm
14.1′普屏 0.280mm
14.1′（宽） 0.237mm
13′（宽） 0.219mm
12′普屏 0.238mm
12′（宽）就不说了，那个字体小到不正常……

现在流行的网页布局（以门户为例），网页布局大多是采用“国”字型，宽960（也有采用950的）的固定版式。现在网页的布局设计变得越来越重要，访问者不愿意再看到只注重内容的站点。虽然内容很重要，但只有当网页布局和网页内容成功接合时，这种网页带给用户的体验才是最好的，为大家所喜欢。

网易的一位同学说到了网页布局中使用黄金分割率的原理。黄金分割率的概念大家都知道。下面我引用一段非常专业的解释：“黄金分割最早见于古希腊和古埃及。黄金分割又 称黄金率、中外比，即把一根线段分为长短不等的a、b两段，使其中长线段的比(即a+b)等于短线段b对长线段a的比，列式即为a:(a+b)=b:a， 其比值为0.6180339……这种比例在造型上比较悦目，因此，0.618又被称为黄金分割率。”大家也看清楚了什么叫黄金分割。

我们中国也有一种类似于这样的概念叫九宫格。这个也许就有一些朋友不清楚了，这是一种用以临写碑帖的一种界格纸。基本形是一个长方形等分九格。在这个九宫格中中间部分就产生了四个交叉点，这四个交叉点就是视觉中心点。

PConline的同学特别提到了最近比较流行的网页栅格系统设计，其中所提到的理论大家可以看下蓝色理想这里介绍的网页栅格系统设计，同时有兴趣的话可以去买这本书来看看《栅格系统与版式设计》。

3. 屏幕分辨率和布局与浏览器、显示终端的关系

屏幕分辨率和布局在不同的浏览器和显示终端下的表现是不同的，千鸟写的《排版自适应提升可访问性》大家可以看看，特别提到我们在实际设计操作中通常有三种情况：版面自适应、视觉自适应、内容自适应。所有的这一切都是为了适应现在显示器宽屏高分辨率的结果。更多的专题内容可以访问千鸟的《可访问性专题》。

特别近几年电子数码产品的软硬件设备飞速发展，PC、手持设备、电视等等显示终端都成为了我们浏览网页的目标终端。不同的终端对网页设计布局都有不同的要求。讨论到这里，3G.cn的同学特别提到了他们在手机上设计产品的一些见解。由于到这里的时候我开小差去了，没认真听，无法回忆记录下来，希望3G.cn的同学能写出来。我们的菜心同学提供了一些国外关于手机屏幕的资料：Mobile screen size trends 和 More on mobile screen size trends ，大家可以看看。

4. 屏幕分辨率和布局对前端开发，产品设计的影响

在我们充分的认识到屏幕分辨率和布局的矛与盾以后，就为我们以后的工作有了更多的指导意义。产品设计上需要从不同的角度去考虑适应不同屏幕分辨率下的网页呈现，同时对前端开发也是挑战，前端开发需要做大量的工作，从框架的规划到具体的页面实现都要考虑到这些。

5.总结

这次的ucd书友会虽然在下雨中进行，影响了讨论的效果，但来参与的同学们都很自觉的参与其中，很是欣慰。一位出差广州的PConline的同学对广州这边ucd书友会氛围的肯定，多少是对我们的组织工作的认可，他之前也在上海参加过ucd书友会。希望更多的交流和分享为大家的日常工作和学习带来便利。

这次大会有了更多的媒体关注，新浪科技、网易科技都作了专题报道，这可是第一次上门户啊。而且这次还有国外很多的媒体报道，特别是美国的techchurch。认识了不是自己订阅的BLOG作者。特别是“和菜头”，和我平常想象的不一样。

我原来的同事阿杰还特意从澳门过来参加，我们俩好好叙旧了一把

更多的报道，请看下面：

• 豆瓣

• Facebook

• friendfeed

• 新浪科技

• 网易科技

图片：

Flickr      Yupoo

搜索：

Google   百度

我拍的一点照片：

我以前的同事阿杰，特意从澳门过来的。

这个就是和菜头啦！

报名已经在15号开始了。

报名地址：　http://cnbloggercon.org/register/2008/

时间是2008年11月15日-16日

• 2008 会议动态群组：

• 豆瓣

• Facebook

• friendfeed

• 去年的照片： Flickr , 又拍