SoberMa » 用户体验

基于黄金分割率的Twitter新版页面布局探究

SoberMa — Thu, 30 Sep 2010 08:32:32 +0000

用上新版的Twitter已经有一段时间了，个人在使用的过程之中感觉较之旧版在体验方面有了较好的提升。只是感觉比之前的版本好用，但是具体体现在什么地方，体现在哪些细节之上，还一下子真的说不出来。

刚刚在看Mashable上面最新发布的一篇文章，名字叫做New Twitter Design Based on the Golden Ratio [IMAGE]，中文简译应该是“Twitter新版设计遵循黄金分割率(图)”。新版Twitter的设计是基于黄金分割率的！真的是太有才了！

由于之前看过基于黄金分割率进行网页布局设计的相关文章，并曾构想并尝试过按照这样的定律去进行网页栅格化布局，因而对这一文章非常感兴趣。索性溯本求源，查找源头信息，一探新版Twitter设计背后的奥秘。

从毕达哥拉斯到达伦·阿罗诺夫斯基，黄金比例，这样一个被发现存在于艺术和建筑学每个角落的非理性数学常数，已经很久远了。而最近，它竟然成为了新版Twitter的设计依据。

顺着Mashable文章，找到了Twitter的Flickr页面，发现这样的图片和说法来自于Twitter的创意总监道格·伯曼(Doug Bowman)，然后通过Doug Bowman的Twitter帐号@stop发现了他的Flickr，并在里面找到了有关于新版Twitter设计的四张图片。

有关新版Twitter设计的四张图片及相应描述如下：

新版Twitter的比例

对于所有对新版Twitter页面设计比例好奇的人，应该知道的是，我们不是随随便便选择这样一个比例的。当然，这一比例仅适用于最窄的UI版本。如果您的浏览器窗口比较宽，我们将摆脱这样的比例，扩大您的个人信息面板，以便于提供更大的效用。但宽度最窄的地方，我们已经在开始使用这一明智的比例。

新版Twitter的比例 (内部)

这张图用来回应那些说上一张比例图包含内边距(padding)的人。。。

新版Twitter栅格图 (窄)

给那些对我们所使用的栅格系统感兴趣的人，这是一种奇数的栅格(15列，窄版的宽度是880px)。我们的前端web客户端团队在工作中坚持规范并做得尽善尽美。尽管有几个元素没有对齐或者偏离网格，但已经非常接近原版设计了。

新版Twitter栅格图 (宽)

给那些对我们所使用的栅格系统感兴趣的人，这是一种奇数的栅格(17列，宽版的宽度是1000px)。我们的前端web客户端团队在工作中坚持规范并做得尽善尽美。虽然信息面板的最右侧有了一丁点的偏移，但同样非常接近原版设计。

关于黄金分割率，如果您之前不是很了解，请移步Wikipedia的黄金分割词条。

PS.写完这篇文章的时候，发现标题为“Twitter新版页面比例遵从黄金分割定律(图)”的文章已经在各大网站疯狂转载了，而内容不用看也知道是千篇一律的，来源应该是Mashable的文章，而翻译，真的不敢苟同，明眼人一看就知道翻译此文的人根本不懂或者不用Twitter。国人的素质和浮躁啊，唉。。。

PPT分享：成为UX团队的一员

SoberMa — Tue, 28 Sep 2010 06:25:46 +0000

最近一直在看书，内容涉及项目管理、设计、前端、交互、可用性等各个方面，也算是利用闲暇时间给自己充充电吧。

这几天在看的是一本叫做《A Project Guide to UX Design》的书(中文译本《UX设计之道——以用户体验为中心的Web设计》)，其实这本书到手已经有一段时间了，刚到手的时候一直也有在看，只是由于前面讲的都是项目管理方面的内容，而且老外的讲解过于繁文缛节，再加上翻译的水平有限，看了没多少就给随手放到一边了。

前几天看完关于可用性测试方面的新书《Rocket Surgery Made Easy》(中文译本《妙手回春：网站可用性测试及优化指南》)之后，又把这本书翻了出来读，读到后来发现后面的章节其实写的蛮好的，内容涉及用户研究、人物角色、搜索引擎优化、网站地图、任务流程、线框图、原型制作、可用性测试等各个UX交互设计环节。相信细细研读下来，对于个人的UX修养来说还是有所帮助的。

今早在读线框图章节的时候，文中推荐了Leah Buley的《How to Be a UX Team of One》。到公司后特意找来这个PPT看，同时顺路到Leah Buley的Blog转了一圈，发现书中给出的Slide是2008年的，而Leah Buley在参加2009年SXSW嘉年华的时候有一个更新版的Slide，名字叫《Being a UX Team of One》。

虽说这样的一个Slide是英文的，但是结合里面的插画，细细揣摩还是能看明白的，推荐给致力成为UXer的每一个人。

如果您还不知道UX为何物，请移步用户体验到底是个什么玩意儿。

用户体验到底是个什么玩意儿

SoberMa — Sun, 30 May 2010 13:54:55 +0000

近来，“用户体验”这个词越来越多得出现在互联网从业者的谈资之中，也有越来越多的人以谈论用户体验为荣，以吹嘘用户体验为乐趣。而对于到底什么是用户体验，为什么要去做用户体验，怎么去做用户体验却仅仅一知半解或压根就不明白。大家一窝蜂地去为了做用户体验而做用户体验，而连最为基本的用户体验要素都不得而知。试想，这样的一种态度和行为方式真的会为用户得来好的，真正的，易用的，贴心的体验吗？

这几天看到摄氏度写的一篇《烂大街的用户体验》，还有白鸦写的的一篇《关于泛滥成灾的用户体验》。他们不约而同地用一种审慎的眼光去批判地看待用户体验。能有这样的文章，能听到不同的声音本身就是一件好事，不管是赞许，是反对还是批判地继承。

那么。到底什么是用户体验呢？如何去做用户体验？而又为什么要做用户体验呢？下面我借助Slideshare上面看到的一个PPT跟大家一起探讨。

什么是用户体验？

用户体验是英文User eXperience design的中文翻译，国内往往简称为UE或UX或UED，而国外常用的英文简写一般为UX。

设计不仅仅是它看起来像什么和感觉像什么。设计是如何工作。——史蒂夫乔布斯
Design is not just what it looks like and feels like. Design is how it works.—Steve Jobs

我们一起看看什么是好的设计，什么是伟大的设计，什么是疯狂的设计。

用户体验的5个关键元素

1、Learnability 易学
2、Efficiency 高效
3、Memorability 难忘
4、Errors 错误
5、Satisfaction 满意

我们通常会认为设计师应该是做装饰的，而我一直惊讶于设计往往有超越于设计学科的职责领域之外。好的设计是用来解决问题的。
I’ve been amazed at how often those outside the discipline of design assume that what designers do is decoration. Good design is problem solving.—Jeff Veen

我们所看到的，是视觉设计

我们看不到的，竟然足足有90%。而我们所能看到的，仅仅占10%。

我们看不到的90%的内容，主要包含：

SKELETON 骨架

Interface Design 界面设计
Navigation Design 导航设计
Information Design 信息设计

STRUCTURE 结构

Interaction Design 交互设计
Information Architecture 信息架构

SCOPE 范围

Functional Specs 功能规格
Content Requirement 内容要求

STRATEGY 策略

User needs 用户需求
Site Objectives 网站目标

设计是非常关键的，它应该是每个部门的每一个会议的议程之一。
Design is so critical it should be on the agenda of every meeting in every single department.—Tom Peters

如何做用户体验？

用户体验的一般流程是这样的：

用户体验的交付物一般有：

1、Assessments 评审
2、Interviews 调查
3、SiteMaps 网站地图
4、Flow Charts 流程图
5、Wireframes 线框图

为什么要做用户体验？

1、商业的成功总是由整体客户体验的质量所决定的。——弗雷斯特研究公司，2001
Business success is always defined by the quality of the overall customer experience.—Forrester Research, 2001
2、很难使用的网站会阻挠客户，丧失收入，进而削弱你的品牌。——弗雷斯特研究公司，1998
Websites that are hard to use frustrate customers, forfeit revenue and erode brands.—Forrester Research, 1998
3、良好的设计是用以区分我们和竞争对手的最为重要的途径。——三星集团CEO 尹钟龙，2004
Good design is the most important way to differentiate ourselves from our competitors.—Samsung CEO YunJong Yong, 2004
4、可以节省开支
内容来源于Bias & Mayhew在1994年所著《Cost-Justifying usability》和 Human Factors International机构2001的报告。

4.1、下图中列举了需求、开发和部署三个阶段的设计方案和时间变动成本曲线。需求阶段，每个改动需要8小时，而在部署阶段每个改动则需要32小时。
4.2、以全过程需要有20次更改为例，每小时的人力成本为$35。在需求阶段完成20次更改需要花费$5,600，而在部署阶段完成20次更改则需要花费$22,400。
4.3、整整节省了$16,800!

5、可以带来额外收入
内容来源于Jared M. Spool在2009年的博客文章《3亿美元的按钮》

5.1、我来这里不是想加入一个关系网。我只是想买点东西！
5.2、他们将会用市场营销信息来纠缠我，我肯定，我真的不想听到这些。
5.3、我在这里到底该用哪个e-mail地址呢？
5.4、这是更改之后的效果。按钮由“注册”改为了“继续”，同时增加了这样的描述文案：
您不用注册帐号也可以在本站购买。只要按“继续”按钮就可以去结帐。为了您以后能更方便地购买，您可以在结帐的同时创建一个帐号。
5.5、一个小小的改动，整整带来了$300,000,000（3亿）的额外收入！

结语：用户体验是一种态度，一种思想，一种应贯穿于每个项目从始至终每一个环节的一种方法。

SoberMa » 用户体验

基于黄金分割率的Twitter新版页面布局探究

相关日志

PPT分享：成为UX团队的一员

相关日志

用户体验到底是个什么玩意儿

什么是用户体验？

如何做用户体验？

为什么要做用户体验？

相关日志