11月 30 2009

创建非正式场景,发现产品的不足

无意中在网上看到了这样篇文章,是来之这里《创建非正式场景指南》,是基于《软件工程:基于项目的面向对象研究方法》第2章先介绍”鼠标点击游戏”的场景,后引入面向对象技术的几个概念,讲述软件开发过程模型、面向对象建模方法以及面向对象系统的良好属性。

看完后我觉得对于做产品的人也是如此,我们可以通过穷举法来发现或想象和制作很多的用户使用场景。但能这样的场景不一定是真切和正式的,但对于指导我们的产品策划设计工作还是有不少的益处的。

原文的内容如下:

2.1.1 创建非正式场景指南

尽管我们称这部分软件开发过程是非正式的,但仍然有一些指南可用于建立这些非正式场景,以获得最大效益。这些指南如下:

1)一个软件系统应该是由一些较小的非正式场景构成,而不是一个大的非正式场景。

2)一个非正式场景应关注系统的一个相关方面。例如,用户登录系统、服务器处理用户提交的时间卡、一次用户查询、用户领取工资等。

3)每个非正式场景应该尽可能详细地指出具体值。学生们不应该写”用户通过鼠标点击,消除了相应格子内的小球”,而应该说”王卉观察己方对应的蓝色 小球,找到两个相邻小球,在其中一个小球的位置点击鼠标,消去小球,又在剩余时间片内,消去了暂不构成威胁的三个小球,其中由于点击位置失误,消去了一个 对手方的红色小球”。后一种说法包含了管理用户在一个时间片内消去小球操作的潜在复杂性,而前一种说法则没有。

4)在非正式场景中,应该描述系统将要处理的几类用户错误,但不应该试图穷举覆盖所有可能的错误。

5)在表示每个非正式场景中,实现细节应该省略。例如,每个非正式场景都不应该提到链表或其他数据结构。

6)每个场景都应该描述场景初始化前的系统状态。例如,用户点击鼠标非正式场景应描述用户点击前游戏面板的状态。

7)每个场景应在指明下一个场景时才结束。

创建非正式场景的常见问题是太抽象而不够具体。用抽象术语刻画系统使用的问题在于抽象描述不如详细讨论情形所体现的系统复杂性来得明显。创建非正式场景的目的是帮助开发人员获得对待开发项目的深入理解。

要点2-1   创建非正式场景

(1)非正式场景要短;

(2)非正式场景应指明一个活动;

(3)非正式场景应指出具体值;

(4)非正式场景可以指明几类用户错误;

(5)应忽略实现细节;

(6)应该描述初始化之前的系统状态;

(7)应指出下一个场景。

2.1.2 非正式场景示例:用户一个时间片内的鼠标点击

当前系统状态

系统状态由每个玩家在游戏面板上不同颜色小球的分布构成。游戏中有两个玩家,王卉和王艳,每人分配一种小球颜色,王卉对应蓝色,王艳对应红色,游戏 面板格子中存在5个不相邻的蓝色小球和5个不相邻的红色小球。游戏开始时根据难度设置,随机生成3个蓝色小球和3个红色小球。其中一个蓝色小球恰好与原有 蓝色小球相邻。

非正式场景

接下来王卉和王艳开始寻找己方的相邻小球,王卉找到一对相邻蓝色小球,通过鼠标点击消除其中一个,又在剩余时间内消除了两个蓝色小球。然后,由于点 击失误,消除了一个红色小球。同时,王艳没有找到相邻的红色小球,就随意消除了两个未相邻的红色小球。这时时间片结束,系统判断双方均无剩余相邻小球,该 轮次结束。

下一场景

下一场景是系统新生成两种颜色的小球各3个,双方进入下一时间片的比赛。

进一步分析班组项目的游戏,考虑许多不同的非正式场景。在你的项目开发小组成员中分解这些场景。你们每个人应利用前面小节所讲的原则进行非正式场景描述。这项任务对于小组中每个人快速进入项目开发是很有用的,这项任务应尽早开展。

10月 16 2009

广州UCD书友会10月主题:关于邀请机制和模式

主题邀请机制与模式 (最近大家应该都被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.随便聊聊的话题覆盖

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

09月 08 2009

广州9月UCD书友会主题:微博的传播与交互

每次参加广州UCD书友会会发现一个问题,就是大家对每期的话题没有深入的做功课。很多的时候互动 不足,变成了听与教。为了更好的交流和互通,需要大家更多的去学习了解相关的内容。组织者和大家一样都是抱着来学习交流的目的聚集而来。这次的话题建议大 家使用新浪微博来直播,分享我们现场的资讯。
1.微博定义
微博客(Micro-blogging,Microlog,微部落格、微网志、微型网志),即微型博客,是新兴起的一类开放互联网社交(半实时半广播)服务。

2.微博简介
1)微博的功能特性
没有准确的定义,但是具有以下特点:

  • 一种新的沟通方式,双向沟通
  • 一种新的内容载体
  • 是即时的
  • 是开放的,并且包含显式社交元素
  • 蕴含一种隐式联合模式
2)微博的产品特性

  • 语言的碎片化
  • 半实时半广播
  • 自媒体草根性
  • 个体化私语化

3)微博的高级功能
@(注:回复)、RT(注:Retweet 回推、转发)、DM(注:Direct Messages 私信)、#号标签(注:话题)、搜索

3.微博服务商有哪些
国内的微博网站包括:Follow5、饭否、做啥、叽歪、嘀咕、贫嘴、Fexion网、同学、滔滔、我烧叨叨、MySpace聚友9911、蟹爪、相闻、爱唠叨、微可、easytalk、新浪微博、139说客等.
国外的微博客网站包括:Twitter、yahoo meme、Plurk、jaiku、tumblelog、Thumbcast、Twingr、Sideblog 、Yammer 、Juick.

4.微博的传播
目前,微博规定用户发帖字数不超过140,用户利用微博传递观点、新闻和各种思想,每条信息(称之为“tweet”)被视为是微型的博客帖子,因此,微博的这种传播理念称之为微博服务。微博用户可选择其它用户进行跟随或实时接受他们的信息。
1)传播渠道
包括短信、即时通讯软件、电子邮件、MP3或网页
2)传播内容形式
包括文本、图片、音视频、链接
3)传播平台
包括手机端、网页、PC客户端
4)传播方式
大众传播、人际传播、组织传播、群体传播

5.微博的交互
1)产品层面
A、便捷的消息发布。 B、快速的回复、评论、转贴。 C、多样化的即时信息整合–话题。 D、更低成本的信息交互沟通。

2)技术层面
A.跨平台。B.跨终端。C.搜索

6.微博与新浪

  • 用户群体契合度可以更高
  • 多种服务可供用户选择自动更新到自己的首页。
  • 更优秀的保持用户在线时长的工具,更有效的提升新闻在用户群体中的传播速度,并从中获得积极的反作用。
  • 更优秀的上网起始页,让用户通过微博获得更多不同类型的更新信息。

参考资料
1.百度百科 http://baike.baidu.com
2.互动百科
3.维基百科 http://zh.wikipedia.org
4.胡志龙博客 http://blog.sina.com.cn
5.译言 http://www.yeeyan.com/articles/tag/即时网络
6.摩耶尔_新浪博客 http://blog.sina.com.cn/s/blog_4c1f6c970100fg9l.html~type=v5_one&label=rela_prevarticle

08月 13 2009

用户体验管理体系培训小结

用户体验管理体系培训小结的一点会议记录,先记录下来,有时间细细写!

SNS基本原理
1.六度理论
2.150法则

可用性投资回报率(roi)的衡量举例
指标:
满意度
成功率
效率
易学性

用户体制建设体系
A.启动阶段
1.起始计划
2.领导会议
3.普及
4.项目启动

B.执行阶段
基础建设
1.ucd机制(培训机制)
2.ucd方法
3.ucd标准(按通用,按渠道,按产品)涉及到后面的团体建设
4.用户数据中心

团队建设
1.组织架构
2.人员选拔
3.专业训练

C.优化阶段
1.渠道细分
2.成功优化
3.示范项目
4.后续推广与持续支持

典型用户体验服务类型
A.产品创新
1.用户定位
2.新产品创新

B.用户体验评估
1.可用性测试
2.专家评估

C.用户研究与分析
1.竞争与趋势
2.用户行为习惯

D.用户界面设计

F.ux机制流程

用户体验成熟度
1.产品组织架构
2.内部教育与培训
3.人员 10%原则

用户体验成熟度不同阶段
八个阶段

几个名词 :可用性   以用户体验为中心的设计  用户体验  人因素  人机交互

任务分析的价值

用户体验维度
A.针对网站
1.主页
2.导航
3.载入速度
4.交互

B.针对软件

用户体验短期策略
1.用户体验评估(可用性测试,专家评估,信息架构优化)
2.发现问题
3.改进建议
4.产品修改
5.查看产品改进
6.短期产品质量保证

用户体验中期策略
1.运用传统的市场方法和策略
2.用户研究(需求和差距,当前使用和习惯,使用痛点与障碍,用户态度,使用激励,驱动人、因素)
3.头脑风暴、并行设计、概念评估与选择
4.系统设计

用户体验长期策略
1.建立长期的用户体验流程、机制
2.优化流程
3.创新流程

08月 07 2009

第一期广州技术沙龙预告

主题

1. 选好业务和技术,单枪匹马做游戏 (赖勇浩)

2. 分布式key/value store漫谈(Tim Yang 杨卫华)

全部演讲稿将在会后公开。

时间:2009/08/08 14:00进场,14:30开始

地点:广州市天河路208号粤海天河城大厦39F 新浪公司

活动指南

已经报名的同学请检查确认邮件(周二8/3之前会全部发出)。凭名片(报名的姓名)或身份证件在粤海天河城大厦大堂领取门禁卡,然后到39F前台签到。

交通:地铁1号线,3号线体育西路C出口,公交线路体育中心站。

地图:地图一:谷歌地图, 地图二:三维地图

活动相关文章:
第一期广州技术沙龙预告 http://timyang.net/tech/guangzhou-salon-guid/

欢迎大家的参与!!
预祝:第一期广州技术沙龙圆满成功!

07月 15 2009

广州UCD书友会第十期提纲–群组功能和用户沟通

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.未来的群可以承载的东西?

07月 07 2009

产品人员应该向测试人员学习

产品人员应该向测试人员学习,为什么这样说了?因为我们很多工作都是通过测试人员来完成的。学习他们的细致、学习他们的严谨、学习他们怎么去流程化你的产品需求、学习他们从多角度多思维方式去完善你的产品工作。

1.细致

我们都知道产品中很多的细节需要我们去一一用心去做的,小到一个按钮的变化状态、文案的描述,大到一个页面信息架构。我们有时在自己的产品规划中或多或少的有遗漏或者做不到位,很多情况下都是测试人员在帮助我们完善工作。测试人员是我们第一批用户,可能这样的用户不是很大众,但一定是很专业的用户。新产品都是从他们那里测试,最终交付上线。

测试人员列出的每一条测试用例都是为产品服务的。举个修改姓名的输入框的输入校验提示,以及文案,再到保存的提醒方式。

l1

上面的信息要素如下:
1.注释文案:请使用真是中文姓名,字数需要2-6个汉字之间。
2.姓名输入框
3.保存按钮

可是这样的信息要素在测试人员的眼里可是几十条测试用例。上面3个信息要素都是要测试到的。
第一,注释文案要验证是否合理,有误错别字等等。

第二,姓名输入框的验证,这可是个大工程了。我们看看测试用例如何写的,如下:
测试输入序列:

1.    在内容框内输入超短数据时(1个字符或1个汉字),验证是否可以正常提交
2.    在内容框内输入超长数据时(Y个字符,Y/2个汉字),验证是否可以正常提交(Y=12)
3.    内容输入框,验证数据位数为如下情况,结果是否正确
1)    Y-2、Y-1、Y个半角字符,可以正常提交
2)    Y+1个半、全角字符,不可正常提交
3)    Y个全角字符,不可正常提交
4)    Y-2 开头或结尾处 + 一个半角字符,可以正常提交
5)    Y-2 开头或结尾处 + 一个全角空格/字符,可以正常提交
6)    Y-2 开头或结尾处 + 一个半角空格 + 1个半角字符,可以正常提交
7)    Y-2 开头或结尾处 + 一个半角空格 + 1个全角字符,不可正常提交
8)    Y-2 开头或结尾处 + 一个全角空格 + 1个半角字符,不可正常提交
9)    Y-1开头或结尾处 + 一个半角字符,可正常提交
10)    Y-1开头或结尾处 + 一个全角字符,不可正常提交
11)    Y-1开头或结尾处 + 一个半角空格,可以正常提交
12)    Y-1开头或结尾处 + 一个全角空格,不可正常提交
13)    Y-1开头或结尾处 + 一个半角空格 + 一个半角字符,不可正常提交
14)    Y-1开头或结尾处 + 一个半角空格 + 一个全角字符,不可正常提交
15)    Y开头或结尾处 + 任意一个字符,均不可正常提交
……

第三,保存的提交校验,是用模态提示还是非模态提示,提交完成后的校验提示文案,信息提示输出的一致性等等。

从上我们可以看出,功能虽小,但需要我们产品考虑和执行的内容点还是很多的。

2.严谨

做产品的最忌讳的就是你策划出来的东西逻辑不严谨、流程乱,怎么看都很业余。产品人经常需要做很多功能流程图、逻辑图、思维图。在做这些东西的时候是否想到了能像测试人员那样,针对每一个产品流程好好想清楚,自己测试下可执行性,再写到设计文档中。在评审的时候能很好的通过,减少工作的重复性。也让大家对你刮目相看。

3.流程化

产品流程化的东西在互联网上有一大把的介绍,但真正能去执行的少之又少。这样的产品流程能够适应一个公司、一个部门的也需要管理人员来规范。现实中项目一来,很多该走的流程其实都变的不可实现了。对于这样的情况我们可以参考下测试人员执行测试的流程,先冒烟,就像我们整理产品需求一样。冒烟测试通过了,才进行后续的产品功能流程细节测试。产品也是如此,连最起码的需求都通不过,何来的产品设计。

4.角度与思维

产品人很多时候对自己的产品理解缺乏角度,也许这和产品的一些定向思维有关。可是测试人员想的更多的是一个测试方案、测试用例怎样多角度去验证产品的基本需求。

在产品设计的过程中,大部分人会认为只要拥有严谨的思维、熟悉产品潮流和先进的交互技术就可以了,其实这些都还不够.产品创意角度、创意思维、产品创造力的应用,才是一个产品人员的能力体现。我国著名的诗人苏东坡有一首名诗是这样写的:“横看成岭侧成峰,远近高低各不同,不识庐山真面目,只缘身在此山中。”从这首诗中我们了解到,如果要全面地 看清楚庐山,仅仅从一个角度去看是远远不够的,因为你每变换一个角度,庐山的面目就变换一次,所以要想看清庐山的全貌,必须从很多角度去看。产品人员从现在开始就应该去放松你的大脑,释放你的心灵,摆脱你的传统思维,激发你的创造力。

07月 07 2009

新浪桌面同事产品博客集

新浪桌面同事产品博客集

indigo的数字镜像   走在前端和高端之间的人

http://www.indigos.cn/

Chenn’s blog,对产品和技术都很执着

http://chenn.cn/

Denver’s blog  很有历史韵味的产品人

http://www.denver.hk/

L & Magic & Egg’s Blog  很拉风的广州三人组合 ,C THE WORLD,一看就知道是搞技术

http://www.ctheworld.cn/

Lerroystory   走在前端与设计之间,爱好摄影

http://www.lerroystory.com/

MiShine   对什么都很惊奇的设计师,画ICON是他的最爱

http://hi.baidu.com/ipooo

爱杰西西   爱生活,爱工作 很爱学习的产品人

http://blog.sina.com.cn/yijuan1128

Shade Lin’s blog  前端牛人

http://shade.grovelab.com/

草刚淳  混迹于UI设计界

http://www.hi-cat.com/kinsen/

Tim’s blog, 关于后端架构设计,Java编程,数据库,设计模式等,技术牛人

http://timyang.net/

bluesnail’blog 关注产品流行、关注用户

http://www.xisoo.net

河利的BLOG   专注WEB开发

http://www.christieheli.com/

Heat space    热爱摄影,专注WEB开发
http://heatspace.cn/

05月 20 2009

电子商务网站的购物流程设计(简述)

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

04月 19 2009

屏幕分辨率和布局简述

广州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 trendsMore on mobile screen size trends ,大家可以看看。

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

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

5.总结

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

RSS