响应性设计中的”金发女孩”方法

标签: 响应性设计 产品设计 | 发表时间:2011-09-08 21:40 | 作者:P迪 Ben
出处:http://www.alibuybuy.com

转载请注明来自Seemeloo西米露

译者注:金发女孩(Goldilocks)指的是大家耳熟能详的故事——三只熊。金发女孩闯进了三只熊在森林里的小木屋。女孩坐了三把椅子、喝过三碗汤,睡了三张床。前两个不是太大,就是太小,不是太烫,就是太凉,总是在第三次,也恰好是最后一次才找到“刚刚好”的那个。这个故事包含了许多“最恰当”的意味。作者用“金发女孩”应该指的是将复杂的设备情况简化为三种情况:太大、太小、刚好,并且这种方法是“刚好”适合所有设备的。

这是一篇关于“方法”大于“技术”的文章,作者提出了一种“通用性”设计的思路,并且给出了比较具体的实现方案——先基于可读性做设计,再根据“太大”、“太小”、“刚刚好”三种情况分别处理。至于如何用现有技术来实现,能不能实现,以及响应性设计本身存在的性能问题并不在文章的讨论范围内。

既然作者提出的是新思路,那么旧的思路是什么?如果你想了解,可以看看这个网站:http://stuffandnonsense.co.uk/projects/320andup/

=============翻译开始的分割线=============

原文地址:http://www.designbyfront.com/workinprogress/article/the-goldilocks-approach-to-responsive-design
作者:Chris Armstrong

移动浏览器的数量增长得非常快,全世界已有超过4亿的移动设备。我们不能再假设网站只在一个拥有中等分辨率的桌面监视器中被浏览。或许我们从来就不该这样假设。

问题的答案就是由Ethan Marcotte提出的响应性网页设计(Resposive Web Design)。我们只开发一个适应所有设备的网站,而不是为每个设备开发单独的网站。然而,目前针对响应性设计的方法,仍然是基于一些流行的设备,因此,也很可能会随着这些流行设备一起被淘汰。

如果我们能创造一种真正通用的、独立于设备的设计呢?无论你使用那种设备浏览,这种设计看起来就像是刚刚好为这个设备而做的。在New Adventures中,Mark Boulton谈到了为内容而设计,而不是画布(designing from the content out, rather than the canvas in),我们很认同他的说法。或许要创造在所有设备中通用的设计的唯一方法,就是把设备统统忘掉。

试试这个在线例子

现行惯例

响应性设计的现行方法是把设计与设备绑定。它根据最常见的设备尺寸来使用像素宽度,但我们不认为这种方法足够好。它导致了设计要基于两个非常容易变化的因素:

  • 设备分辨率;以及
  • 像素

设备分辨率

有成千上万种设备和可能的环境,我们无法全部支持。所以我们就选择一些流行的设备,并基于它们的分辨率做设计,忽略市场上其他的产品。随着技术发展,分辨率的提高,我们的网站看起来将会很过时,就像现在看到的600×400的网站一样。

像素

像素的大小不是固定的——至少显示出来的大小不是。在iPhone上,16像素的文字可能只有Macbook上的60%那么大。以像素为尺度的设计在不同的设备中会产生不一致的效果,并可能对可读性和可用性产生负面影响。

设备并不重要

那么,我们要如何才能像Mark Boulton建议的那样,根据内容做设计?在实践中,这表示从内容的最常见形式——段落元素开始,然后逐步完善整个布局。

我们常常倾向于先设置body的文字尺寸。但制造商和用户已经为浏览器设置了适合阅读的默认尺寸,我们认为没有太好的理由,你不应该改动它。

然而,如果你的整个设计是基于这个基本的文字尺寸(即设计中使用em作为单位),随着基本文字尺寸的增加或者减小,你的设计也会发生相应的变化。使用em令你的设计独立于分辨率。

接下来,用max-width设置段落的行宽,尽可能保证可读性(一行66个字符)。不同的字体之间会有区别,但一般来说,30em左右的效果通常不错。这个设置的是你的单栏布局的宽度,让它刚好适合阅读。

“金发女孩”方法

现在,不管使用什么设备来观察你的设计,可用的空间可能是更大、更小,或者刚刚好。你可以用media queries来充分利用它们。

太大


如果有比单栏的宽度大很多的宽度,你可以考虑使用一个多栏的排版。例如,如果单栏的宽度是28em(此外左右各有1em的外边距),屏幕的宽度超过45em,你有足够的空间切换到三栏布局——栏宽13.5em,1em的间距,主容器占两栏(这样保留了阅读的最优宽度)。

太小


如果空间小于最优阅读宽度,你需要尽量利用所有的空间。例如:

  • 将外边距减少为原来的一半(但不要去掉它);同时/或者
  • 将悬挂的标点设为行内(这样它不会被截断)。

刚刚好

如果空间刚好适合你的单栏,你就没什么好担心的。你的工作完成了,去喝杯茶吧。

我们并不是说单栏布局对每个网站来说都是最好的布局。我们不知道用户会看到哪一种排版,所以我们需要让网站在单栏和多栏状态看起来都一样好。然而,在实践中,我们发现这样有助于做好单栏的状态,再将其他更大或更小的情况处理好。

优点

我们认为“金发女孩”方法是有很多优点的。

使用目前流行的方法,即使你只需要为苹果的设备设计(很幸运哦),也需要考虑五种状态:
1 iMac(大显示器)
2 Macbook(小一点的显示器)
3 iPad(平板,可能是横放的或者竖放的)
4 iPhone4(Retina屏幕,译者注:640×960)
5 iPhone(非Retina屏,译者注:320×480)

Edenspiekermann网站看起来使用了这种方法,并且工作得很好,但不是一个可放大的解决方案。而使用金发女孩方法,你只需要考虑三种状态
1 太小的屏幕
2 太大的屏幕
3 刚刚好的屏幕

不需要考虑设备的分辨率,你的布局在所有的设备和环境中都能工作,甚至还未出现的设备。如果一个用户的基本字体尺寸是80像素(不管处于何种原因),这种方法应该仍然会为可用的空间提供合适的布局。这就是设备独立的。

最终,技术会变化,但人体在过去的几千年里一直相当的稳定。为人(的阅读)设计,而不是为技术(设备尺寸和分辨率)设计,你的布局不会很快就过时的。

从此,设计师们过着幸福的生活……:)

 


© 推荐 for 互联网的那点事, 2011. | Permalink | One comment | Add to del.icio.us
Post tags:

你可能也喜欢:

11套精美免费图标集设计素材推荐下载 (@iplaysoft)

商业名片设计软件 – iBizCard绿色版 (@portablesoft)

移动设备手势设计初探

理解响应网页设计元素

五招加速网页响应时间
无觅

Feed enhanced by Better Feed from Ozh

相关 [设计 金发 女孩] 推荐:

响应性设计中的”金发女孩”方法

- Ben - 互联网的那点事...
转载请注明来自Seemeloo西米露. 译者注:金发女孩(Goldilocks)指的是大家耳熟能详的故事——三只熊. 金发女孩闯进了三只熊在森林里的小木屋. 女孩坐了三把椅子、喝过三碗汤,睡了三张床. 前两个不是太大,就是太小,不是太烫,就是太凉,总是在第三次,也恰好是最后一次才找到“刚刚好”的那个.

野生的法国女孩

- 深蓝 - FeedzShare
来自: 杨晖的博客-TV2.0的实验田 - FeedzShare  中文热文榜|最新 - FeedzShare  blog.sina.com.cn - FeedzShare  . 发布时间:2010年11月05日,  已有 5 人推荐.   她叫TIPPI,是個法國小女孩,1990年生於非洲的纳米比亞,從小跟隨拍攝野生動物的父母在叢林中長大,這本攝影集記錄了她和動物間的故事.

那女孩儿真酷

- Zifei Tong - 一个人是一座岛
 最近在看内田树大叔的《当心村上春树》,其中有一篇,内田大叔以家务事先来做比喻,他说家务事“与西西弗的苦恼相似. 无论如何打扫,没太弄都仍然有垃圾源源不断的产生出来. 不会有什么特别的成就感,也没有人付给你报酬,更不会得到社会的尊敬. 然后内田大叔说,村上春树作品里的人,都是这样的人,他们是这个世界的哨兵,”在悬崖的边上,以厘米为单位,每天将人类世界一点点的推离悬崖,这就是哨兵的工作.

女孩最在乎什么?

- menzi - 佳人
不是你的多金、帅气、浪漫,而是一辈子的陪伴. 1、并不在乎你有没有钱,在乎的是你会不会发奋努力改变现状. 2、并不在乎与你生活在一起会遇到困难,在乎的是你会不会迎难而上,不逃避. 3、并不在乎你长得有多帅,在乎的是你能不能给她足够的安全感. 4、并不在乎你跟你的异性朋友有多好,在乎的是你能不能一心一意对她好.

一个 Home School 的女孩

- stephanie - vieplivee 随笔
她的数学功底也许不是最好,但最终成绩却是最好的一个,这结果在我看来倒一点也不奇怪. 她经常问问题,课上举手问,课下会找我给我看她记在本本上的疑问点,一个一个快速地过——她说这是因为心中问题太多,不想课上占用别人的时间. 的确,那些疑问点都是很简单的小事情,我可以在五分钟内轻松地全部答掉. 然后她看上去一脸安心的样子离开教室.

男孩女孩的46个阴暗面

- gi - 河蟹娱乐
女人,本性就是奴性,本身就是宠物心态,就是要依赖人,不管多漂亮的外表多强女人本性都是如此,男人的人格和生活是独立的. 女人就非要依赖别人,如果没有依赖的人,她们就开始这个那个了,又多愁善感了,看见飞花落雪就开始落泪了,看一些脑残的韩剧开始哭了,为啥我身边没个这样的男人呢. 根本的就是,没男的搭理她们,她们认为自己很可怜.

冷漫画:女孩的底线。[3P]

- Norbert - 犯贱志
点此继续查看《冷漫画:女孩的底线. 漫画:这个男的目光好“长远”啊. 再有趣的事情,如果成为家常菜,应该也会变得无趣了吧. 内涵的邪恶漫画:修复过的瓶盖,是没气的. 史上最似艺人,他们是失散多年的兄弟. 地铁狂人,基情四射,这个世界肿么了. 春哥的初恋终于曝光了,这一身情侣装,真是羡煞旁人. “假如香烟能让你舒爽,我的嘴也能.

女孩的成年礼酷刑

- fuckgfw - 译言-每日精品译文推荐
来源A Rite of Torture for Girls - NYTimescom. 通常遭受人类折磨的对象往往是让他们害怕或鄙视之人,然而,在我们这个摩登世界,最常见的酷刑之一竟是母亲施加于自己心肝宝贝女儿的,其普遍程度甚至超过水刑或电击. 这就是女性生殖器致残术 --- 通常美其名曰女性割礼 --- 它盛行于广袤的非洲与亚洲地区.

没有事业的女孩子很惨

- thelONE - ShiningRay的Blog
转自 豆瓣 女性意识与女性的成长小组. 今天行政又推荐了一个素质不错的刘小姐,到我办公室面试. 我扫了一眼她的简历,就看透她了,不过还是让她叙述了一下:她一直做售楼员,4年换了3个项目,中间休息了一年,现年28岁,来到我们公司,希望继续在项目上干接待客户的工作. 我们公司招聘的人员,归纳起来有三类:一类是物业顾问,是所谓行销的;一类是项目销售,是坐销的;第三类是行政文员类.

婊科技:賣哀呸的小女孩

- 酿泉 - 癮科科討論區 - 婊科技
今年哀呸2(iPad 2)比1代上市時間早上許多,也正式掀起平板電腦的熱潮,在路上已經常看到有人拿著平板電腦 "滑來滑去" (ㄌㄨ來ㄌㄨ去)也已非罕事,稍微理解宮崎駿大師的感受(詳情看這裡). 本次主題發想由知名網路動畫 "賣火柴小女孩" 而來,作者是 "蘭堂血多",為我們向血多大大致敬之作,不過此動畫系列已在去年底完結,動畫內容相當有趣,沒看過的科科們可以看看.