观思行

观思行

带着目的读书

带着目的读书,这对于博览群书的人来说,应该是自然而然的习惯,但对于我这菜鸟,则是刚刚才明白的道理。

在此之前,先想到了一个问题:“在看别人的文章时,是否要以一套思维框架去结合理解?如果有,会否先入为主歪曲了作者的原意;如果没有,会否没法将其转化为自己的知识?”

于是我援用了在做设计时,遇到此类问题是如何处理的。例如我做了一个评论列表,和其他同类设计,我是这样评价自己和对方的设计:将两者放在一起对比,以设计目的为准则去分别对照其中的设计元素,看哪个更符合目的。这样既能发现别人的优点,也能明白自己的问题所在。这方法其实就是“A/B testing”,一种在线产品设计的方法。

回到原本问题,在看别人文章,如果带着目的、用到“A/B testing”,思考是否能达成某个目的。如此阅读过程中,则不是以“我”作为评判标准,是以客观目的,并通过目的来验证对方的观点。

到最后,有人可能会认为我并没有直接回答上面的问题。在编辑上文时,我认识到两个观点其实不在两个维度上 —— 接收信息和处理信息。接收信息时客观、全盘地接收,就不存在歪曲原意的情况;处理信息时将其分解,并以一个思维框架组合。后者的框架是动态的,不是死的,框架本身限制你处理信息的能力,而新的信息也会刷新框架。

举个例子,你的大脑承载着一个操作系统,从外部给它输入一段代码A,则操作系统可以利用这代码执行其他操作。如果操作系统不能理解该代码,那就需要打补丁升级,就是从其他外部接收代码,以理解A。

综上,读书应分两步:接收和处理。接收时保真,处理时以客观目的评判,将有用的汲取以更新框架。补充:此两步应快速迭代进行。

为了什么而工作

这周我就要到我的新公司去报到,开始另一页的职业生涯。从去年11月底,公司解散到现在2月底,我有充足的时间找工作——虽然年前不太顺利;也有充足的时间做一些项目——最主要学会了建站;也有充足的时间去给上一家公司的职业生涯做一个总结,但是我迟迟没能梳理。

还有三天就要报到了,在偶然的情况下我重新翻阅了@wing酱 的微博,她的见识与成就,无论是在一年前还是现在,都让我汗颜。既然是重新翻阅,我看到了之前看过的微博,以下的一篇文章,我还有印象:《我的助理辞职了!——给不听话的下属看看》(http://wangpai.2345.cn/thread.php?fid=13&pid=234033)。我记得故事情节,可惜已经忘记了其中的道理。如今再次阅读,我有点惋惜自己当时没有开窍(其实现在也还没),但知道了如何给上一家公司的职业生涯做总结。

我在上一家网络公司任职2年9个月,从视觉设计师到项目主管,到最后几个月的产品经理。最终,公司因为产品没法盈利被迫解散,我也承认这是一个失败的产品,我是一个失败的产品设计师。近三年时间,自己究竟有何成长,离自己目标是否有所接近,我都不太敢问自己。埋怨和逃避没有意义,我暂且以两条线总结一下这段时期的经过。

产品
公司的产品,可总结为:
第一阶段,做民宿预订的电商网站,结合淘宝店,欲将淘宝客户引流至官网;之后通过与艺龙、携程等酒店代理做酒店集成,扩展业务;开发酒店管理系统,供民宿店家使用,以将房态及时更新到官网。
第二阶段,考虑民宿产品的提成费较低,且市场被艺龙、携程占据,公司打算发展旅游资讯;第一阶段的酒店集成与酒店管理系统,被叫停开发,保留淘宝店的业务;网站中增加旅游频道及相关页面;开发手机APP,用以显示官网上的资讯。
第三阶段,欲将资讯碎片化,以类似微博的方式呈现,网站做了大改版,进入了长期试验的时期;网站和手机APP中,加入社区的功能,如评论、转发、推荐等;通过内容积聚人气,往社区发展;除了美食,还尝试性地加入投资、闲聊等话题。


本人亦可根据产品的三个阶段总结:
第一阶段,我负责网站改版和淘宝装修的视觉设计。期间我给网站梳理流程和制作线框图,开始在项目中尝试交互设计。开始接触用户底层心理,二进制的代码训练、维特根斯坦的逻辑哲学论、混沌理论、语言文字的进修。
第二阶段,设计资讯相关页和手机APP的界面。由于项目的未知因素增加,在这时期我接受了更多做项目的技巧与知识:用户行为分析、需求方案、沟通要领、鬼谷子、象棋、围棋。
第三阶段,全站页面和APP的改版。此阶段后期我担任管理职责,接触了一些管理的工作与知识:需求管理、编辑工作单、会议组织、项目进度控制、企业和行业分析、斯隆自传。

可以说,产品与我的发展道路,一样杂乱无章,毫无目标和规划,随波逐流。三年过去,产品停止开发,已是无可改变的结局。而我能否从失败中走出来,在于我是否将过去经验沉淀,正如上文资料所说:

“从22岁大学毕业在26岁之间这四年,重要的不是你做了什么,重要的是你在工作中养成了怎么样的良好的工作习惯。这个良好的工作习惯,指的是:认真,踏实的工作作风,以及是否学会了如何用最快的时间接受新的事物,发现新事物的内在规律,比别人更短时间内掌握这些规律并且处理好它们。具备了以上的要素,你就成长为一个被人信任的工作的人。”

我是否已经养成“良好的工作习惯”?我只能说我过去都在搞表面功夫,远没有形成自己的理解。如今我如同一个早产儿结束了我的第四年,在第五年开始了新的工作,前路只会更加坎坷不平——即便新工作看上去不错——唯有兢兢业业、如履薄冰,才能不重蹈覆辙。

最后以一段别人话来给这总结一点希望:“和一个创业者交流,突然觉得创业就像打RPG游戏,不停打怪才能升级,不要抱怨创业路上怪太多,没有怪就没有你的成功;另外对于每一关末Boss级别的怪,要有远见,打不过死了,还得重来;还有如果你选的游戏大小怪水平都很低,最后你的级别也低,而人生重新选游戏的机会很少;当然最重要的是玩的开心!”——@郭振炜。

人生何尝不是。


写于深圳,2014-02-25,3:00

后记:

在和朋友谈工作的时候,我将此文分享给她,我也从中梳理了自己的目标:
1. 提升自己的素质
2. 锻炼自己的专业技能
3. 通过专业技能,去获得一份好工作;或者搞点生意;或者认识更深刻的知识

因为我认为,大道相通,一件事理解到极致,就接近抽象的道理;然后可以反过来用这些道理去学习、处理其他事。

之前我一直在犹豫是要做设计还是管理;是上班还是做生意。现在我想清楚了,只要我的专业到达足够的层次,我就能更好地理解管理、战略,也才有资历去开公司。


写于深圳,2014-03-04,1:40

如何处理非重复性工作

最近工作中经常接触到新问题,不能仅靠自己的专业知识去解决。此时教练又跳出来指导,于是我梳理了以下内容。

搞非重复性的工作,一般来说是只知道目标,而缺乏解决思路。以下介绍的,是以目标导向的、处理事情的思路。所谓“目标”是虚的,实际上它是一系列可操作事情的缩写,即达成该目标需要符合什么必要条件(有时候还要考虑充分条件)。

达成条件A,需要条件B;达成条件B,需要条件C;…以此类推,直到条件是你现在所能满足的。那么,原本未知路径逐渐有了轮廓。这样的一个过程可以概括为以下列表:

1. 任务(做事的基本单位,是用来完成的)
    a. 完成任务需达成的检查清单(checklist_total)
        1) 检查点_1(checkpoint_1)
            a) CP1-检查清单_1(CP1-checklist_1)
            b) CP1-检查清单_2(CP1-checklist_2)
            c) CP1-检查清单_3(CP1-checklist_3)
        2) 检查点_2(checkpoint_2)
        3) 检查点_3(checkpoint_3)
        4) …
    b. 每个检查清单、每个检查点都有截止时间(deadline)

此处抛一下书包,以上类似树杈或叶脉的结构,被称为分形,它可不断地细分下去。理论上是能适用于各种问题的处理清单。

不过,处理非重复性的工作,除了需要有清晰的计划去安排实施,还需要有个前提,即全面地看问题,下回我们讲一下如何做到这个前提。

littlebigdetails:

Google Maps for iPhone - Double-tap to zoom with one finger
/via carlsednaoui
More info


如何用一根手指做到放大缩小的操作。

littlebigdetails:

Google Maps for iPhone - Double-tap to zoom with one finger

/via carlsednaoui

More info

如何用一根手指做到放大缩小的操作。

designcube:

Toshi cabinets by Luca Nichetto


对比三张图的家私陈列效果:
第一张,家私组合为中间高两边低的整体,水平视角给人以四平八稳的感觉。
第二张,同样组合为中间高两边低的整体,两点透视画面富有张力,加之开门增加动态感觉。
第三张,则分成两组陈列,一远一近,一深一浅,透视的角度也不相同,对比有致,同样加之开门增加动态感觉。
designcube:

Toshi cabinets by Luca Nichetto


对比三张图的家私陈列效果:
第一张,家私组合为中间高两边低的整体,水平视角给人以四平八稳的感觉。
第二张,同样组合为中间高两边低的整体,两点透视画面富有张力,加之开门增加动态感觉。
第三张,则分成两组陈列,一远一近,一深一浅,透视的角度也不相同,对比有致,同样加之开门增加动态感觉。
designcube:

Toshi cabinets by Luca Nichetto


对比三张图的家私陈列效果:
第一张,家私组合为中间高两边低的整体,水平视角给人以四平八稳的感觉。
第二张,同样组合为中间高两边低的整体,两点透视画面富有张力,加之开门增加动态感觉。
第三张,则分成两组陈列,一远一近,一深一浅,透视的角度也不相同,对比有致,同样加之开门增加动态感觉。

designcube:

Toshi cabinets by Luca Nichetto

对比三张图的家私陈列效果:

第一张,家私组合为中间高两边低的整体,水平视角给人以四平八稳的感觉。

第二张,同样组合为中间高两边低的整体,两点透视画面富有张力,加之开门增加动态感觉。

第三张,则分成两组陈列,一远一近,一深一浅,透视的角度也不相同,对比有致,同样加之开门增加动态感觉。

(via monolithos)

littlebigdetails:

iA Writer - When selecting a chunk of text, the stats at the bottom change to reflect the selection, and appear selected themselves.


大设计明察秋毫

littlebigdetails:

iA Writer - When selecting a chunk of text, the stats at the bottom change to reflect the selection, and appear selected themselves.

大设计明察秋毫

用文字做设计

"Since copywriting is interface design. You can do an awful lot of great design in a text editor. Don’t worry about how things will go, or how they will fit. Worry about explaining it clearly and then build the rest of the interface around that explaination." — by Jason Fried

内容大致是:由于文案写作是界面设计。你可以通过文本编辑器制作大量优秀的设计。别担心元素(个人认为比译作”事物“更为贴切)如何摆放,或者如何搭配。考虑如何将话说清楚,然后再对话语所在的界面进行构建。

第一句话的观点很有意思,将文案写作等同于界面设计,读下来脑中有种突然被人点亮一盏灯的感觉。界面设计主要上是提供人机交互方案的过程,考虑的是如何让两个脑袋(包括人脑和电脑)顺利沟通;而文案写作业同样是为了提供人与人交互的方案——文字能尽量清晰表达你的思想,则是好文案;反之则是坏文案。后面的两句话则是说如何用文字来做设计,方法和写作一样:1. 把话说清楚,2. 用什么修饰手法说。

 

然后问题来了:

1. 文案写作是界面设计,这句话表达的逻辑关系正确吗?除了界面设计,其他设计(如平面设计、工业设计、空间设计)是否与文案写作有和前者一样的关系?

2. 第二句说到”别担心元素如何摆放或搭配“,而要考虑”对话语所在的界面进行构建“,这二者的区别是在哪里?

背景资料:

Jason Fried 是37signals的联合创始人,《ReWork》的作者之一(有什么是他自己做的呢…)。37signals在软件界颇具名声,BaseCamp、Highrise等产品体现出它对”简单、专一的软件“的追求,公司还衍生出Web创业公司的经典著作《Getting Real》、《ReWork》。

[转]中村勇吾,网络互动力学

via http://amagzin.com/2009/11/tha-jp/

SCR Project 研发的 DROPCLOCK,Helvetica 字体所呈现的时间缓慢落入水中

大约读完《佐藤可士和的超整理术》,惊诧广告界的顶尖人物,居然是志同道合的整理癖。不同的是佐藤兄比我做得更加极致、到位,无法企及。在 UNIQLO 诸多成功的营销案例背后,佐藤可士和定当是最先被提及的。而在这之后,应当还须多加片山正通和中村勇吾俩君。若再补上现已贵为全球首富的柳井正,就刚好凑成了已经休刊的《TITLE》杂志于 2006 年 9 月刊载的 “こんな会社で働きたい!” 特别专辑。这其中,佐藤可士和的创意案例众多,风头正盛;片山正通也因设计 BEAMS、Bape、UT 及 UNIQLO 纽约的旗舰店而名噪一时;总是穴居幕后的中村勇吾,则是网络互动力学的教授级人物,特别在移动互联网正将崛起的今天,不得不多提几句。

几年前开始,UNIQLO 的品牌威慑力即透过在网路上的强有力渗透,而超越了地域的局限。从佐藤可士和的 Art Direction/ CI,至中村勇吾的 Web Production,UNIQLO 对于 Branding/ Creativity 的重视为其在全球奠定胜局推波助澜。以嵌入 Blog 的形式热推的 UNIQLOCK、UNIQLO Calendar,及 UNIQLO Jump、UT Inspired 的企划等均由Projector inc. 呈现,而包括 UNIQLO.com、UNIQLO SOHO NY Teaser、UT LOOP!、UT Zoom! 等以 Flash 建构的 Web Design,均出自中村勇吾和他的 Tha ltd.

看起来,这些似乎还只是较为寻常的体验,其实不然。如 UT LOOP! 虽与 UNIQLOCK 均是利用 Flash Streaming 的优势,但 UT LOOP! 更多地运用了影音互动,亦可将自己创作的 LOOP! 形成 Widget,再置于 Blog 内,形式、功能更加完善。

早年,中村勇吾主修建筑设计,那时即受 MIT Lab 的 John Maeda 早期作品影响,且对 John Maeda 所提出的 Reactive 概念记忆深刻。此后的 1997-1999 年间,当时网络先驱 Dextro、Lia、Antirom 和 Daniel Brown 的一些创作,真正推动中村开始即由网路去做一些事情,这些也最终成为他网络互动力学的真正起点。

如今,他已赶超众多前辈,世界级 ActionScript 大师的地位不可撼动。他参与制作的专案,无论在设计、功能都甚是惊艳,使用介面也是亲切非常。几年来,摘得 Cannes Lions、OneShow、Clio Award、NY ADC 等多项大奖。倘若抛开商业需求,中村勇吾正在进行的尝试也是我们闻所未闻的。他试图于网路上创造一个能够以偶然性呈现丰富面貌的单一结构体,引入建筑经验中的空间、力学等概念,从视觉呈现、听觉感受及人们的诸多体验,丰富网路艺术的多媒体性。在网路艺术的层面,中村从当代的角度淋漓尽致地呈现了我们所生存的年代。因此,他的作品亦被 Centre Georges Pompidou、Design Museum London 等馆藏。

极其简便的图像书签网站 ffffound!,允许用户标记、共享网络上的图像;FontPark 可利用各种文字做图形编排,还可进行评分;SCR 以屏幕为媒体,尝试将互动与屏幕媒体商业化;日本的个人图片库 fotologue.jp 在功能上堪比 Flickr,而全站基于 Flash 的形式则较之 Flickr 美观许多;中村勇吾与北村慧太共同完成的创意搜索引擎 Amaztype,以美国、加拿大、日本和英国的 Amazon 为资源,且搜索到的结果会叠加排列成所键入的 Keyword 形状,且其顺序、大小直接反映畅销度;而中村自己的网站 yugop.com,则毫无商业市场的约束,以优异的程式严谨地推进网路互动,向人们展示着意想不到的最新技术与理念……除此,佐藤可士和片山正通 等人的 Web Design,也都是拜托中村来完成。

中村勇吾从不拘泥于具体的风格与分类,更多地将自由、灵活、有趣的创造投入界面环境的持续研究,并赋予网路互动新的表达方式。在他完成的各个 Web 项目中,我们也切实地在网路上获得了更加鼓舞人心的互动。

[转]Tumblr首席設計師Peter Vidani 專訪:「推出」真實的自我?

彼得‧維達尼(Peter Vidani)是微型部落格Tumblr的首席設計師;從我的Tumblr首頁(Dashboard)上的圖示,到整個網站的美學設計全都由他一手包辦。身為一個網路愛好者,彼得非常了解如何使一個網站,變得有如超級病毒般地具感染力。

維達尼簡短地和知名科技部落格團隊The Verge談到如何創造具獨特性的網站,為何圖片分享這項功能如此重要?以及BMW的設計缺失為何?現在,你隨時都能在Tumblr上見到他

今天做了些什麼事呢?去了哪些地方?

我才剛到公司,正坐在辦公桌前。今天不知怎地,在F站我搭上了每天早晨乘坐的C路公車(或:電車等其它交通工具)。我在西4街下車並轉車,我問車長是否有經過23街,她說有。但正當我想上車時,她卻將車門關了。現在我剛從辦公室的廚房裡拿了杯咖啡,還有汽泡礦泉水。我想,現在我已經回答完你的第一個問題。

對Tumblr的用戶而言,為何圖片分享這個功能如此重要?

Tumblr與各種圖檔的完美結合,使用戶得以捕捉並保留生命最美好的剎那,也方便他們於腦海中回想這些時刻。

Tumblr在網路上迅速竄紅,是因為它不僅僅是一個部落格平台,更可以是人們建立生活的地方。難道未來個人首頁趨勢,會是依時間來記載自己所有的生活嗎?或者更準確地說,我們在網路上所分享的一切,就是自己的代言人?

人們在網路上分享的各種東西,用來彰顯自己的身份,似乎已經是一種趨勢。但是沒有人能夠保證,這股圍繞在網頁上打轉的新風潮能持續多久。而分享的資訊真能代表真實的自我嗎?

這可是個大問題!因為在真實生活中,我們可以說,這是我穿的衣服、這是我想談的事、這是我最近完成的工作等。但在網路上這會讓時間軸變得更混亂,不過也和我們當初的想法相去不遠。我不相信有哪個人可以創造新的方式來顯示身份,但我們可以逐漸改進來更接近真實的生活。

你能想像以文字、圖片、引述、連結、對話之外的不同形式來增加發文內容嗎?這些就是我們能在網路上交流的唯一形式?

讓讀者瀏覽到一片空白的網頁是很嚇人的,如果是我來寫的話,不是長篇大論,就是一片空白。Tumblr上的推文設定,有許多種類可供選擇,相當容易令人引起聯想。就好像有人在問:「在你的部落格及首頁上說一些關於你朋友說的趣事如何?或是你拍的照片?」 Tumblr提供多種類型的推文設計,我認為正是因為這些設定具有聯想性,才使它們能順利運作。

為用戶提供了許多的主題和選項,但大多數的Tumblr忠實用戶只是透過現成的首頁來瀏覽,而不使用自訂選項。這會讓首頁減少了更多不同主題套版的使用率嗎?

我認為這兩者之間不會互相影響,到目前為止,主題套版的使用率也仍未出現下滑。身為一位Tumblr的愛用者,我熱愛使用一個好的主題,而主題也能表現出使用者的是個什麼樣的人。不論是抽象簡約、色彩豐富、使用全版照片,或是頁面有許多小推文暗藏其中,各種主題所展現出的不同風格,就是推主給人的第一印象。

你的頁面呈現方式非常美麗,我通常在按下「追蹤」之前,都會先回溯部落格的前幾頁。

Tumblr 的轉發功能正快速地流行起來,(以任何狀態、名稱和形式)幾乎橫掃了每一個社群網站。轉發文章對你有什麼樣的意義呢?它是否有害於使用者內容的創造力呢?是不是不應該過度使用?

我認為你可以隨心所欲地使用,又有何不可?我很開心看到其他網站也跟著使用轉發功能,原創者也一起跟隨。轉發功能是構成使用Tumblr的基本條件,它讓好的原創內容傳遞到許多人的手裡。

我看過你去年的採訪,你在Tumblr上表示要解決程式問題。最近修復了哪些部份呢?

現在最令人興奮的部份是Tumblr iPad 版本的瀏覽介面,在介面架構和美學呈現上有機會能夠以新穎的方式來展現。而這些花在iPad上面的苦工,未來也會移植回網站介面上,當然首頁也大幅翻新了一番。

如今已能用類別來搜尋主題,設計師也擁有更多的發揮空間。使用者可以上傳檔案較大的照片並配合文字,另外,能夠快速轉發也是其中一項特點,而這是我很喜歡的功能。另有許多其他大工程會在這個暑假執行,當然我也樂在其中。

Tumblr上的哪些部落格是你最熱切關注的?

那些較熱門的新聞更迭不斷,因此我只能根據最近的情況來回答。目前我相當關注「令人絕望的畫面」(Screenshots of Despair)。我能列出一些我喜歡的多元部落格嗎?像是Sexpigeon,、Officials Say、IWDRM、Subtilitas、 lulinternet及其他我現在有在追蹤的部落格。

Tumblr在可見的未來將朝哪方面發展?似乎已經有段時間都使用同樣的設計

廣義上來說,我們希望每個設備都能為用戶提供完整的體驗。如此一來,我們便能隨時隨地都享有最好的使用服務。在風格上,我認為每台設備在視覺上稍有差異也無傷大雅。就像Android和iPhone,我們應該融入和重用在其他應用程式和操作系統的部分。

過去的科技中,哪些影響你的工作最深?

科幻電影、汽車、雜誌、時尚等那些現在依然流行的東西。從前,從事網路界面和應用程式的工作都是有點奇怪的事。因為那些東西太過新穎,沒人能保證這麼做是不是對的。

目前,市場上最令你感到興奮的科技為何?三年內它又會變得如何?

汽車,但在三年內還不會有所不同。在未來的30年,我希望汽車能變得讓我們認不出來。會在紅綠燈前蹦蹦跳跳。不用加裝什麼零件設備,只用輕飄飄藍紫色的光線來操作。我對車的內裝在30年後會變得如何比較感興趣,因為在這30年內,設計當然會變得比之前更好。

大家都知道,全新的BMW的介面曾被認為跟iPad在同水平上發展,這代表BMW的車內部電子技術太落伍了!除了車的外觀、引擎、品質之外,車內螢幕介面設計都還停留在上個世紀。我想設計這介面的設計師應該早點清醒,和其他設計師一樣,活在現代。

當你開始思索新產品,你如何實現你的想法,並優先達成哪些目標?

首先,我會先隨意和別人討論,並立即畫在紙上。這一點對我來說很重要,因為這能快速地幫助我排除所有設計上的缺失,也能讓我不被電腦影響而分心。等到我開始在Photoshop上設計時,我也不必擔心最終產品會有問題。最後我得依賴許多人完成最終展示工作。因為我們都會在線上聊天室,所以我也能很方便地在上頭先展示給幾個人看。然後,我努力地完成這些步驟。

你最近讀過最好的一本書是什麼?它如何影響了你?

沙丘(Dune)。它讓我覺得其它的科幻小說真是太無趣了!

什麼樣的應用程式(不論在手機或電腦上)在你一整天的工作裡是最不可或缺的?

電腦上我用:OSX LionPhotoshopSafari、電子郵件(Mail)、HipChat、Spotify、Dropbox、Trello(網路版)、Snap、ColorSnapper和LiveView。

手機上我用:地圖、相機、維基百科Wikipanion、天氣、訊息、電子郵件、Tumblr、Safari、iBooks電子書、Foursquare和LiveView。

我想沒人會對這些有興趣。

原文來源:The Verge

src:

 http://nccc.cool3c.com/article/61059

http://www.theverge.com/2012/6/25/3094321/peter-vidani-interview-tumblr-5-minutes-on-the-verge

信息组织与可读性

曾经听说过别人抱怨,百度的搜索结果页设计得很土鳖,和谷歌相比是一眼立判高下。当时我稍微对比二者,发现在样式上二者相差无几,却说不上为什么可以感受到好坏优劣。究竟是什么“东西”,影响了具有大致相同式样的两个页面的显示效果?今天我打算拿它们俩再加上bing,就页面设计上,对比三个主流搜索引擎的搜索结果页的可读性。

首先,在firefox浏览器下,我对三个搜素引擎的搜索结果页缩小显示(“ctrl+-”按5次);然后按一个较合适的大小(200x360 px)截取下来。如下图所示,从左至右分别为:google,baidu,bing。可知,google与baidu的列表区域占比相近,bing的占比最大。

image

一、内容与顺序(单条搜索结果)

google一般有四行。
1.标题链接;
2.来源网址、快照、翻译;
3.两行内容预览;
4.辅助信息(偶尔出现)

baidu一般有五行。
1.标题链接;
2.辅助信息(经常出现);
3.两行内容预览;
4.来源网址、快照

bing一般有四、五行。
1.标题链接;
2.辅助信息(有时出现);
3.两行内容预览;
4.来源网址、快照

image

baidu与bing的内容安排类似,辅助信息经常出现使得baidu平均单条结果的高度比bing得要稍微高点。而google的单条结果内容较少,辅助信息偶尔出现,而且与baidu和bing不同,google把更醒目的来源网址一行放在标题下,是单条结果的焦点更往上移。这点差别是影响google可读性的因素之一,我会在下文仔细阐述。

二、间距(单条搜索结果、多条搜索结果)

google
li.g line-height:1.2,  margin-bottom:20px 
  div.vsc
    h3.r font-size:medium,  line-height:1.2 
    div.s line-height:1.2
    div.f.kv margin-bottom:1px,  line-height:1.2 
    span.st line-height:1.24

baidu
tbody border-spacing:2px
  tr border-spacing:2px
    td.f line-height:115%, font-size:100%, border-spacing:2px
    h3.t font-size:medium, line-height:115%, border-spacing:2px
      font font-size:small, line-height:115%, border-spacing:2px
      font font-size:small, line-height:115%, border-spacing:2px
     br font-size:small, line-height:115%, border-spacing:2px

bing
li.sa_wr padding-bottom:1.08em
  div.sa_cc
  div.sb_tlst margin-bottom:0.05em
    h3 line-height:1.5em, font-size:123%
    p line-height:1.4em

上面的代码分别是三个搜索引擎中单条搜索结果的样式。这部分内容,google和bing都是在<div>下对单条搜索<li>的间距的调整,google是margin-bottom:20px,bing使用padding-bottom:1.08em,稍有出入。而baidu则竟然是使用<table>和<br>来排版。

对比三者,google在多条搜索结果之间的间距为最大,单条搜索结果的内容安排集中在上半部,焦点集中;而baidu的多条之间的间距最小,单条搜索结果的内容多、且标题链接和来源链接分设在头尾使焦点分散。至于bing的间距控制上和google差不多,但内容排序不集中、单行文字过多。

通过对比可得,google的搜索条目,在排版上更具有层次——各条目之间的距离大于条目内信息的距离。

“网页设计即是排版”,这句话即使放在如今讲究富交互的设计趋势,也不会过时。