你真的理解設(shè)計(jì)中的Less和More了嗎?

文章開始之前,先讓你看一個(gè)經(jīng)典的案例,一張GIF圖告訴你什么叫做 less is more

你真的理解設(shè)計(jì)中的Less和More了嗎?

xidea :Less is More是很多設(shè)計(jì)師的口頭禪,它最早是由建筑大師Ludwig Mies van der Rohe提出,是一種提倡簡(jiǎn)單,反對(duì)過度裝飾的設(shè)計(jì)理念。在此基礎(chǔ)上,不斷的有設(shè)計(jì)師對(duì)這個(gè)思想加以改進(jìn)和新的解讀,現(xiàn)在它已經(jīng)成為了設(shè)計(jì)界的一個(gè)基本理論和準(zhǔn)則。該理論的擁護(hù)者認(rèn)為,使用簡(jiǎn)約的設(shè)計(jì),去除不必要的細(xì)節(jié),可以讓產(chǎn)品和用戶獲得更大的收益,產(chǎn)生更好的效果。

在傳統(tǒng)行業(yè),有很多關(guān)于Less is More的成功案例。

1979年,索尼發(fā)現(xiàn)大部分用戶對(duì)于播放的需求遠(yuǎn)遠(yuǎn)大于錄音,所以他們?nèi)サ袅藗鹘y(tǒng)錄音機(jī)的錄音功能,甚至去掉了當(dāng)時(shí)認(rèn)為必不可少的外置揚(yáng)聲器。然后把剩下的部分做到一個(gè)小盒子內(nèi),并配以立體聲耳機(jī)。這就是風(fēng)靡全球的Walkman隨身聽。

你真的理解設(shè)計(jì)中的Less和More了嗎?

1984年,IBM在鼠標(biāo)和軌跡球的基礎(chǔ)上,精簡(jiǎn)結(jié)構(gòu),發(fā)明了TrackPoint(小紅帽),在移動(dòng)設(shè)備上有效的替代了鼠標(biāo)的功能,并解決了軌跡球占用空間過大等缺點(diǎn)。現(xiàn)在TrackPoint已經(jīng)成為了Thinkpad筆記本的標(biāo)志,并且類似的設(shè)計(jì)被應(yīng)用在很多其他品牌的筆記本電腦上。

你真的理解設(shè)計(jì)中的Less和More了嗎?

2007年,蘋果精簡(jiǎn)了手機(jī)的按鍵,甚至砍掉了整個(gè)實(shí)體鍵盤,推出了iPhone。在全世界范圍內(nèi)引領(lǐng)了一場(chǎng)智能手機(jī)的革命。

你真的理解設(shè)計(jì)中的Less和More了嗎?

上面這些都是Less的思想帶來的巨大成功。但是在實(shí)際的設(shè)計(jì)工作中,有時(shí)我們會(huì)因?yàn)閷?duì)于這個(gè)思想理解不夠深刻,而犯下一些錯(cuò)誤。所以,具體的設(shè)計(jì)究竟是該Less還是該More,還是應(yīng)該根據(jù)實(shí)際情況來決定。比如下面這些例子:

一、百度商業(yè)產(chǎn)品的某處細(xì)節(jié)

在百度推廣的鳳巢這個(gè)系統(tǒng)中,一個(gè)賬戶有如下的基本結(jié)構(gòu):賬戶 > 推廣計(jì)劃 > 推廣單元 > 關(guān)鍵詞。如圖:

你真的理解設(shè)計(jì)中的Less和More了嗎?

也即:一個(gè)賬戶中,可以有多個(gè)"推廣計(jì)劃";某推廣計(jì)劃中,可以有多個(gè)"推廣單元";某推廣單元中,可以有多個(gè)"關(guān)鍵詞"。現(xiàn)在PM需要上一個(gè)新功能,他提供了這樣的一個(gè)草圖:

你真的理解設(shè)計(jì)中的Less和More了嗎?

PM解釋說:"我需要一個(gè)定位器??梢宰層脩暨x擇定位到「全賬戶」、某「推廣計(jì)劃」、某「推廣單元」或者某「關(guān)鍵詞」。簡(jiǎn)單畫了一下,本著'少即是多'的原則,我把它們組合在了一起。"

我看了以后很困惑,問到:"如果我想定位到全賬戶,該如何操作?"
PM回答說:"全賬戶的話,就什么都不選,直接點(diǎn)「查看」即可。"
我:"暈…"

這是一個(gè)比較典型的,精簡(jiǎn)了界面上的內(nèi)容,但卻損失了用戶體驗(yàn)的例子。雖然這樣的設(shè)計(jì)是最簡(jiǎn)潔最省空間的,但是卻沒能表達(dá)清楚這里的功能。后來經(jīng)過討論,將其改為了類似下面這種:

你真的理解設(shè)計(jì)中的Less和More了嗎?

也即,在原有的下拉框和輸入框之前,加上了4個(gè)選項(xiàng)。這4個(gè)選項(xiàng),分別對(duì)應(yīng)著可以做分析的4個(gè)不同層級(jí),只有選定了層級(jí)之后,才會(huì)在下方出現(xiàn)該層級(jí)下面的具體選擇控件。這樣的改動(dòng),將用戶的任務(wù)分成了兩個(gè)步驟:1、選擇自己要分析哪個(gè)層級(jí)。2、選擇具體的分析對(duì)象。雖然流程變長(zhǎng)了,點(diǎn)擊次數(shù)變多了,界面上的元素也變得更加復(fù)雜了,但是收益很明顯,那就是整個(gè)流程變得更加簡(jiǎn)單順暢了,用戶幾乎無需任何思考即可上手操作。所以界面元素上的More反而提升了實(shí)際的用戶體驗(yàn)。就像是《Don't make me think》這本書中的一句話:"點(diǎn)擊多少次都沒關(guān)系,只要每次點(diǎn)擊都是無需思考,明確無誤的選擇。"

二、網(wǎng)頁上的斜體字

在很多英文網(wǎng)頁上,設(shè)計(jì)師會(huì)選擇將一些文字變成斜體。對(duì)于英文來說,在一些特定的字體下,斜體字會(huì)比較美觀,同時(shí)這種效果在一些特定的場(chǎng)合也承擔(dān)著一定的特殊含義。比如在維基百科中,斜體字經(jīng)常會(huì)用來寫書名或者注釋類內(nèi)容,如圖:

你真的理解設(shè)計(jì)中的Less和More了嗎?

在上面的截圖中"This article is about the line of …"這一行內(nèi)容,是注釋的性質(zhì),并非介紹iPhone的正文,所以維基百科使用了斜體字。合理的使用這些樣式,可以提高讀者的閱讀效率,也可以提升美觀程度。

但是就斜體字本身而言,我認(rèn)為它并不是很適合中文網(wǎng)頁。理由很簡(jiǎn)單,在中文網(wǎng)頁比較通用的12px字號(hào)下,斜體漢字的識(shí)別性會(huì)變差。例如,下圖是某航空公司網(wǎng)站上,同一功能控件的兩種不同語言的對(duì)比截圖(為了讓問題更明顯,我選擇了繁體中文):

你真的理解設(shè)計(jì)中的Less和More了嗎?

從截圖中我們可以清楚的看到,左側(cè)的英文版,在Arial字體作用下,斜體字表現(xiàn)得不錯(cuò)??吹们?,又美觀。但是右側(cè)就比較悲劇了。中文的12px宋體字,加了斜體樣式后,識(shí)別度嚴(yán)重下降(這就有點(diǎn)兒像Ludwig Mies van der Rohe所說的"過度裝飾")。特別是一些比劃比較多的漢字,會(huì)出現(xiàn)疊在一起的情況。

顯然,在這個(gè)例子中,設(shè)計(jì)中文版的時(shí)候,應(yīng)該更Less一些,去掉斜體樣式體驗(yàn)會(huì)更好。

三、播放按鈕和電話按鍵

在很多電子產(chǎn)品上,設(shè)計(jì)師使用一個(gè)向右的三角符號(hào)來代表播放鍵。這已經(jīng)是一個(gè)行業(yè)標(biāo)準(zhǔn),我們見到這種符號(hào),就會(huì)很自然的產(chǎn)生正確的認(rèn)知。所以當(dāng)再次設(shè)計(jì)類似功能的時(shí)候,我們可以直接沿用這個(gè)符號(hào):

你真的理解設(shè)計(jì)中的Less和More了嗎?

在上圖所示的3個(gè)完全不同的播放軟件中,我們能夠輕易的找到代表播放功能的那個(gè)按鈕,并不需要在圖形下面注明"播放"2個(gè)字。這樣即節(jié)省了空間,也傳達(dá)出了我們對(duì)于功能的定義。這里的Less達(dá)到了More的效果。

但是,這是否意味著,在為一個(gè)產(chǎn)品設(shè)計(jì)按鍵的時(shí)候,都可以沿用這種只提供圖形不提供文字的Less方式呢?答案一定是否定的。比如:

你真的理解設(shè)計(jì)中的Less和More了嗎?

這是某品牌電話機(jī)上面的按鍵,有誰能猜出數(shù)字鍵上方的3個(gè)按鍵的具體含義?特別是第1個(gè)和第3個(gè),可能除了這個(gè)產(chǎn)品的設(shè)計(jì)者之外,大部分用戶都無法在第一時(shí)間得出準(zhǔn)確的結(jié)論。對(duì)于具體使用該產(chǎn)品的用戶來說,他們面臨的不僅僅是功能上的困惑,更重要的,是他們?cè)诓僮鬟@個(gè)產(chǎn)品的時(shí)候,對(duì)于按下這些按鍵以后會(huì)發(fā)生什么,將毫無預(yù)期。如果沒有預(yù)期,很多用戶就會(huì)選擇根本不去嘗試,那么即使這個(gè)功能本身很有用,也難以成功推廣。

如果我們的Less是建立在表達(dá)不清楚的代價(jià)之上,那就偏離了Less原本的初衷。在這樣的細(xì)節(jié)上,我認(rèn)為還是考慮在按鈕下面標(biāo)上文字吧,或者,直接把圖形替換成文字來表達(dá)。

總結(jié)

1、簡(jiǎn)約的設(shè)計(jì)在很多時(shí)候可以讓產(chǎn)品使用起來更加流暢和高效,可以讓用戶體驗(yàn)更好。
2、但有時(shí)我們對(duì)于Less is More這句話的理解還不夠透徹。它的原意是反對(duì)"過度裝飾",而不是一味的"簡(jiǎn)單"。
3、Less不僅僅是UI上的簡(jiǎn)單,更重要的,是流程、認(rèn)知層面的簡(jiǎn)單易用。如果為了精簡(jiǎn)UI而搞亂了流程,就得不償失了。
4、更核心的原則,還是那句經(jīng)典的Don't make me think。

原文地址:ued.baidu.com
作者:xidea

 
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個(gè)分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
設(shè)計(jì)講座:每月邀請(qǐng)國(guó)內(nèi)互聯(lián)網(wǎng)公司設(shè)計(jì)前輩及行業(yè)總監(jiān)在群內(nèi)及YY語音(YY頻道:156982)分享實(shí)戰(zhàn)經(jīng)驗(yàn)。
設(shè)計(jì)微博:擁有粉絲量49萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ,歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航:全球頂尖設(shè)計(jì)網(wǎng)站推薦,設(shè)計(jì)師必備導(dǎo)航:http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎?
添加 優(yōu)秀網(wǎng)頁設(shè)計(jì) 微信號(hào):【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加:

你真的理解設(shè)計(jì)中的Less和More了嗎?
 

收藏
點(diǎn)贊 1

復(fù)制本文鏈接 文章為作者獨(dú)立觀點(diǎn)不代表優(yōu)設(shè)網(wǎng)立場(chǎng),未經(jīng)允許不得轉(zhuǎn)載。