广州UCD书友会第21期在台风“康森”过后的18号（周日）举行，这次万万没想到的是参与的人数又一次刷新了广州书友会的历史。因为话题的原因，本期来参与的人数明显上升不少，来了差不多50多号人，因为会议室只能坐下40位，所以后来的同学只能站着。

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

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

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

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

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

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

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

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

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

与会嘉宾分享环节：

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

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

刘毅    讲师  广州美术学院

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

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

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

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

最后大家的合影：

UCD书友会 · 广州2010年6月话题详情（总第20期）在网易大厦办完以后，对于我们几个组织者都有了很大的鼓舞。现场参与的人的反馈也很好，某些同学觉得我们的内容质量、话题形式、互动环节都比以前有了很大的提高。同时嘉宾的演讲也很精彩。

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

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

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

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

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

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

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

《旅行改变人生》

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

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

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

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

上周，在阿乐老师的组织下，我们YY组员们参加了为期一周的产品知识培训，获益良多。虽然本次培训并不能真正把大家的知识面升级至产品经理级，不过对我们日后的运营工作有很大的帮助。

培训中，阿乐老师以最基本的产品设计知识开篇，带我们游历了一遍产品设计相关的关键字意义，让我们明白什么是“人因素”，什么是“用户体验”，什么是UCD，什么是UED,ID,PM,VD等等等等。另外，从肖sir的ppt中我也了解到，本来这次培训是为各位美女特意准备的，我们组两男生是沾了各位mm的光，顿然感恩。

从第二天开始，肖sir循序渐进地对产品人、产品设计工具和产品设计产出物作出用心良苦的解释，并在每一part中都加入了实例进行配合演示，让我们置身于产品设计的知识汪洋。从产品人介绍中，我了解到产品人不只是空泛的做产品的人这个概念，而是合理地分为ID,UR,WD,PD等各个职能岗位，确保产品设计的合理流程实现；从产品设计工具中，我了解到那些工具不是我们轻易能驾驭的，完毕；最后，从产品设计产出物这一课中，我们接触了产品设计过程中的各种文档，它们个个功能详尽，五花八门，看得我们眼花缭乱，然而国江大师最后的一句话使我们心情舒畅：在我们工作中，这些文档是简单很多的，很多东西都不需要的！Orz

产品和运营在日常工作中有很多交叉的地方，可谓相辅相成。产品做出来了，我们对其进行运营；运营中我们再向产品提出新需求，他们又设计新的产品，这是一个产品不断优化的过程，实现最终优秀的用户体验，这是产品和运营工作的共同目的，需要产品同学运营同学的良好沟通和默契合作，这就要求我们相互了解，而这正是这次培训目的。

最后，我要感谢肖sir的指导，还要感谢党和国家，谢谢。

今天很高兴广东移动给我们提供了会场，同时也很高兴的认识到了上海易土的林汉城先生，同时也有机会邀请到淘宝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：用户体验提议“看上去很美”（广州第八期回顾）

广州4.18书友会主题的内容提纲自己参与撰写，同时还参与组织和主持。通过这次的深入参与，我发现胡晓同学能坚持下来多不容易，先赞下。由于天公不作美，原定的以春游踏青小组讨论的形式无法实行，只能30号人一起参与，其中的各种不适大家可以看看胡晓同学的踏青归来（UCD广州书友会第七期回顾）的描述，下面开始我们的主题。

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书友会。希望更多的交流和分享为大家的日常工作和学习带来便利。