用戶界面,真的需要有那么多留白嗎?
由于歐美發(fā)達(dá)國家互聯(lián)網(wǎng)產(chǎn)品界面都看起來簡潔,留白很多,所以使得我國很多視覺設(shè)計(jì)師在設(shè)計(jì)界面的時(shí)候都傾向于留白。然而,不假思索的留白真的是正確之選嗎?本文作者將會(huì)說明:留白是需要分場景的。
作為一個(gè)產(chǎn)品,我并不是很認(rèn)同當(dāng)今視覺設(shè)計(jì)界一些潮流,比如不假思索地留白。
留白、減少視覺壓力幾乎是如今的視覺設(shè)計(jì)師張口必談的話題。
無論做的是什么樣的界面,只要有足夠留白,界面里面就被稱之為高大上;而如果界面做得擁擠,就會(huì)被認(rèn)為器小,甚至被稱之為“美工”。
但是我想說的是,視覺設(shè)計(jì)師和美工的區(qū)別不在與此,而在于有沒有根據(jù)場景區(qū)別化設(shè)計(jì)的能力。
問題的來源
有一些看似簡單的視覺問題,會(huì)對產(chǎn)品造成非常大的影響。
我第一次深度意識到這個(gè)問題,是在上一家公司做互聯(lián)網(wǎng)招聘產(chǎn)品的產(chǎn)品經(jīng)理。當(dāng)時(shí),B端產(chǎn)品剛剛進(jìn)入風(fēng)口。傳統(tǒng)B端產(chǎn)品用戶體驗(yàn)差,界面難看,是一個(gè)很重要的改進(jìn)方向。公司也花了重金聘請高級視覺設(shè)計(jì)師。開始對一些界面做升級。
剛開始的時(shí)候,我們也非常贊同專業(yè)的人員做專業(yè)的事情,他們做出來的界面也非常賞心悅目,其中包括簡歷詳情頁。他們采用了大量的留白和圖形化標(biāo)識,使得界面非常清爽簡潔,幫助HR看簡歷的時(shí)候減少視覺壓力,大幅度提升舒適感。
但是,產(chǎn)品上線之后,情況非常糟糕——HR每日瀏覽的簡歷數(shù)量下降了近40%。
我們剛開始以為只是改版的磨合期,但是數(shù)據(jù)后來一直維持在低位,并且開始有HR陸陸續(xù)續(xù)向客戶經(jīng)理反饋現(xiàn)在看簡歷的時(shí)候非常不方便。
以前,簡歷第一屏的信息就足夠豐富了,HR掃一眼就能做出決策,然后繼續(xù)查看“下一份”。但是現(xiàn)在,總是需要上下滾動(dòng)屏幕,操作麻煩,而且思路不連貫。
那么是不是我們內(nèi)容的順序不對呢?把最重要的放到第一屏不就可以了嗎?
后來事實(shí)證明,這種區(qū)分主次的C端產(chǎn)品的思路在B端產(chǎn)品這里根本站不住腳。對于HR來說,除了項(xiàng)目經(jīng)驗(yàn)這項(xiàng)稍微不太重要外,其他的如教育背景、工作年限、工作公司等信息,都非常重要。具體重要性的排名,不同的HR有所不同,且同一個(gè)HR在不同時(shí)期也不同。經(jīng)過思考和權(quán)衡發(fā)現(xiàn),最好的解決辦法仍是讓這些項(xiàng)目都在一屏顯示,但是界面會(huì)非常擁擠。
做出綜合決策的時(shí)候,總是希望一眼能掃到所有的信息。后來,我開始不斷的推動(dòng)界面緊湊化改版,尤其是簡歷界面,數(shù)據(jù)效果和反饋越來越好。
但是視覺設(shè)計(jì)師總是抵觸的,因?yàn)榕c他們的認(rèn)知不相符,他們的觀念里仍然認(rèn)為:沒有足夠留白的視覺設(shè)計(jì)拿不出手。
除此之外,我還開始注意到,B端留白較多的松散界面導(dǎo)致很多的問題。比如列表管理頁,如果列表上下間距大,會(huì)使得批量操作、按時(shí)間找內(nèi)容、翻頁等操作非常麻煩;列表字段的間距大,會(huì)使得列表中字段太少,展示是信息不充分,總是需要頻繁點(diǎn)詳情頁查看。
為何留白總被視作無需置疑的真理?
視覺留白在視覺設(shè)計(jì)領(lǐng)域如此被深信不疑,有很重要的一個(gè)原因是歐美發(fā)達(dá)國家互聯(lián)網(wǎng)產(chǎn)品界面都看起來簡潔,留白很多;于是引導(dǎo)的審美潮流就成了這樣的。至于為什么歐美界面留白多,我之前的文章有分析(《為什么歐美國家的產(chǎn)品界面更簡潔,你們可能想多了》)
有人說留白是因?yàn)橐曈X負(fù)荷;我個(gè)人是有認(rèn)知心理學(xué)背景的,我可以很負(fù)責(zé)任的說,視覺負(fù)荷這個(gè)詞有被過度強(qiáng)調(diào)了。有人利用短時(shí)記憶理論“神奇的數(shù)字7”來說明界面上的區(qū)塊不應(yīng)該超過7個(gè),但是實(shí)際上,界面中的視覺信息并不需要存儲(chǔ)在短時(shí)記憶中,所以根本沒有這樣的短時(shí)記憶限制。
我作為一個(gè)產(chǎn)品,如果你視覺設(shè)計(jì)師做出來的界面的數(shù)據(jù)效果比我做的原型扔上去都要差,那么你做這個(gè)界面的意義何在?我最近幾年的工作經(jīng)歷都是做B端以及SAAS產(chǎn)品,碰到視覺設(shè)計(jì)師不合時(shí)宜的留白導(dǎo)致的問題實(shí)在是非常之多。
我并不是反對留白,只是認(rèn)為要分場景。無法區(qū)分場景而肆意留白的視覺設(shè)計(jì)師不是設(shè)計(jì)師,只是更美的美工。
如何識別場景
我們需要分清楚以下不同的維度:
- 信息管理界面與信息展示界面的不同;
- 主動(dòng)使用與被動(dòng)使用的不同;
- 用戶是否經(jīng)常使用界面,是否熟悉界面;
- B端產(chǎn)品和C端產(chǎn)品的不同。
信息管理界面與信息展示界面的不同
信息管理界面,就是需要用戶進(jìn)行操作的界面,比如增刪查改。
信息管理界面往往需要用戶對列表項(xiàng)進(jìn)行對比、識別,然后做出操作。這種界面,一定要保持緊湊,減少用戶頻繁上下滾動(dòng)界面,否則思路容易被打斷。
信息展示界面,往往是純粹瀏覽的頁面,所以從上到下滾動(dòng)查看也沒有什么問題,這種情況下可以適當(dāng)多留白。
主動(dòng)使用與被動(dòng)使用的不同
主動(dòng)使用者,要做一件事情時(shí),是目的明確的且對做這個(gè)任務(wù)的難度是有預(yù)期的,那么你優(yōu)先要考慮的是效率。
比如說電商后臺發(fā)布一個(gè)產(chǎn)品詳情或招聘網(wǎng)站發(fā)布一個(gè)職位,這些都是字段較多、比較復(fù)雜的表單。有的設(shè)計(jì)師擔(dān)心這么復(fù)雜的一個(gè)表單,會(huì)把用戶嚇跑,于是就加字段間的大留白,減少用戶的視覺壓力。
但是實(shí)際上用戶感受到的場景與設(shè)計(jì)師是不一樣的,用戶是一個(gè)主動(dòng)使用者,他本身就知道發(fā)布一個(gè)產(chǎn)品信息不是那么簡單的事情,那么你所能做的最好的事情,就是讓用戶能盡快的看到并填寫所有字段,而不是拉長頁面高度,增加用戶滾動(dòng)屏幕的操作。而且頁面拉的太長,會(huì)導(dǎo)致有些表單上下文之間的聯(lián)系中斷。
被動(dòng)使用者,往往是被一些模糊的場景吸引,然后想了解更多。比如說用戶對你的活動(dòng)感興趣,想要報(bào)名你的活動(dòng)。那么這種情況下,用戶往往是沒有預(yù)期的,如果你給用戶看到的界面或表單很密集的話,那么確確實(shí)實(shí)會(huì)把用戶嚇跑。這種時(shí)候,需要注意降低界面信息量,多留白。
用戶是否熟悉
所謂的視覺壓力,往往只會(huì)在初次時(shí)感受明顯,使用過幾次后,視覺壓力的副作用就會(huì)急劇下降,甚至被用戶忽略;但是操作的不方便確是實(shí)實(shí)在在的,而且副作用會(huì)隨著使用的熟練程度越來越明顯。
對于用戶可能會(huì)經(jīng)常使用的界面,應(yīng)該以效率優(yōu)先,尤其需要珍重界面第一屏的像素,不要隨意留白浪費(fèi)空間;比如上文中提到的HR篩選簡歷的頁面。
對于用戶不太可能經(jīng)常使用的界面,比如看過一兩次就不會(huì)再看的宣傳頁,應(yīng)該以視覺舒適度優(yōu)先;那么適當(dāng)?shù)牧舭拙褪荗K的。
B端產(chǎn)品和C端產(chǎn)品的不同
B端的產(chǎn)品,往往是管理信息界面,且是用戶主動(dòng)使用的有預(yù)期的,也是用戶經(jīng)常使用的,所以B端產(chǎn)品的界面,真的不需要你給他那么多留白。
而C端的產(chǎn)品往往不太一樣,需要時(shí)情況而定。C端界面一般留白會(huì)相對較多。
比如亞馬遜,C端買家的界面留白就比較多。但是B端賣家的管理界面密集程度也是超過你想象的。
QQ郵箱的例子
在所有的效率型產(chǎn)品中,我最喜歡的就是QQ郵箱界面。
QQ郵箱雖然起步晚,但是目前是國內(nèi)最成功的郵箱。
QQ郵箱堪稱是效率型產(chǎn)品的典范。
在很多視覺設(shè)計(jì)師看來QQ郵箱界面很糟糕,幾乎完全沒有留白,密密麻麻全是字。
但是,如果作為郵箱的重度用戶,QQ郵箱的體驗(yàn)是無與倫比的。QQ郵箱在1080高度的顯示器上,能在一頁顯示完整個(gè)列表。對于經(jīng)常要按時(shí)間找郵件的人,非常方便。哪怕在小一點(diǎn)的屏幕上,也只要稍微滾動(dòng)一下鼠標(biāo)滾輪,就能看全。
對于這種效率型的產(chǎn)品,留白幾乎沒有任何意義。
QQ郵箱的設(shè)計(jì),看起來好像也沒什么,不就是做得密密麻麻了嗎?但是要在整個(gè)設(shè)計(jì)行業(yè)人云亦云的大潮流之下,大家都說界面要大面積留白的情況下,果斷地不隨波逐流,做出一個(gè)真正用戶需要的界面,這才叫真正的設(shè)計(jì)!
反面的例子
比較遺憾的是,有的視覺設(shè)計(jì)師總是不太接受理性的東西。有的時(shí)候,產(chǎn)品和交互無論怎么要求界面緊湊,講再多的道理,視覺設(shè)計(jì)師仍然無動(dòng)于衷;畢竟有的時(shí)候,人云亦云的力量實(shí)在過于強(qiáng)大,他們體會(huì)不到用戶真實(shí)操作時(shí)候的感受,仍然把不假思索的留白當(dāng)做真理。
下圖是我們現(xiàn)在做的一個(gè)B端產(chǎn)品的列表管理頁(為了避免可能的問題,界面文字已經(jīng)模糊處理)。一個(gè)管理列表的界面,在1080高度的屏幕下,第一屏居然只能顯示4個(gè)列表項(xiàng),而在主流的768高度的屏幕下,第一屏只能顯示2個(gè)列表項(xiàng)。這哪是一個(gè)列表管理頁?我們的產(chǎn)品中的其他某些重要的界面,就有用戶直接提到過界面太松散,很不方便。這種過度留白,非常不符合場景。但是視覺比較強(qiáng)勢,而我沒有成功說服,我也有責(zé)任,后面只能慢慢改進(jìn)了。
總結(jié)
留白,作為很多視覺設(shè)計(jì)師不假思索的基本準(zhǔn)則,很多時(shí)候是不對的,需要根據(jù)具體的場景區(qū)分。
很多時(shí)候減少留白反而能對整體用戶體驗(yàn)有巨大的提升;效率型產(chǎn)品的視覺設(shè)計(jì)的思路不應(yīng)該是簡單的留白,而應(yīng)該是幫助用戶識別信息,提高操作效率。在這種思路下,視覺設(shè)計(jì)還有很多要做的。
本文由 @楓葉 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自Unsplash,基于CC0協(xié)議。
好!很久沒有發(fā)現(xiàn)新認(rèn)知的文章了。作者挺會(huì)講的阿,為什么說服不了UI?而且UI不應(yīng)該聽產(chǎn)品的嗎?產(chǎn)品說這不是項(xiàng)目需要的,UI應(yīng)該配合的卅,講道理~爭取領(lǐng)導(dǎo)的支持吧,這才是最重要的。
留白對于UI來講,所謂“美觀”是最后位的原因。更重要的是加快用戶理解和提高產(chǎn)品易用性,這個(gè)需要有核心依據(jù),不能簡單的把留白稱作“視覺設(shè)計(jì)師不假思索的決定”
很多設(shè)計(jì)師都很執(zhí)著于自己對美的理解上,我也有過那個(gè)階段,文章很有啟發(fā),同時(shí)字里行間也感受到了一種強(qiáng)烈的情緒~ ??
合理留白肯定是合理的,如果不留白,密密麻麻的當(dāng)然也不會(huì)賞心悅目
之前一直做C端產(chǎn)品,最近換工作開始做B端產(chǎn)品,非常同意你的觀點(diǎn),設(shè)計(jì)師應(yīng)該追求的不是美,是在實(shí)際場景中真正幫助用戶解決問題、實(shí)現(xiàn)公司目標(biāo),更高層次上說,設(shè)計(jì)師是服務(wù)提供者和服務(wù)實(shí)際使用者中間的橋梁,很多時(shí)候要站在他們的角度考慮問題,提出合理的解決方案,而不是把自以為的“高逼格”、“簡約”、“洋氣”的審美和交互強(qiáng)加給用戶。不關(guān)是界面的設(shè)計(jì),其實(shí)平面設(shè)計(jì)、產(chǎn)品設(shè)計(jì)也有同樣的問題。但是真正能夠理性思考產(chǎn)品目標(biāo)的設(shè)計(jì)師還是太少了,因?yàn)榇蟛糠值脑O(shè)計(jì)師其實(shí)骨子里是有完美主義和浪漫主義傾向的,這是設(shè)計(jì)師的優(yōu)勢,但是在不合適的情境下,可能變成需要克服的劣勢。
適度留白,不能泛濫
更多對“常識”和設(shè)計(jì)原則的反思。見最新文章《那些導(dǎo)致人云亦云的認(rèn)知陷阱》
就喜歡你這種臭不要臉的逆反思維,敢于直面所謂的“公理”和“習(xí)以為?!?,我剛做PM的時(shí)候,記得一個(gè)從企的老師,天天在客戶現(xiàn)場,回來說過一句話:“我們認(rèn)為很牛逼的,也許用戶壓根就不用,也許我們認(rèn)為很“幼稚的”恰恰就是用戶最想用的”。
這種所謂的公理還有很多錯(cuò)誤的地方。我后面還會(huì)有文章分析更多“錯(cuò)誤的‘公理’“。
我最喜歡的一句話:真正的的簡約不是刪繁就簡,而是在繁亂中建立自己的秩序。 很多不加思考的留白都只是刪繁就簡,反而忽略了產(chǎn)品的功能。 沒有單純的為了設(shè)計(jì)而設(shè)計(jì),每一次的設(shè)計(jì)都是以目標(biāo)/功能為基礎(chǔ)的。
嗯,講得很好?!罢嬲牡暮喖s不是刪繁就簡,而是在繁亂中建立自己的秩序?!北任业奈恼赂钊藛l(fā)。我要收藏了。
居然沒有贊這個(gè)表情
如果界面上的元素都需要查看,且效率是核心需求的話,確實(shí)應(yīng)該緊湊一點(diǎn)。如果只有部分內(nèi)容是核心,或效率不是核心需求,就可以留白,總結(jié)完畢 ?
道理都不難,關(guān)鍵是要有實(shí)際的例子和場景讓大家接受。
不要情緒化,我覺得作者寫的挺好的!不是反對留白而是要區(qū)分場景!
不錯(cuò)
支持一下
見過最難以理解的【留白】,是微博熱搜榜的頂部,既不算真正的留白烘托高逼格,又強(qiáng)行減少了首屏信息量
少即是多 這是永恒不變得真理,能用一句話說清楚得事情,當(dāng)然最好別用兩句話。產(chǎn)品與設(shè)計(jì)本身出發(fā)點(diǎn)不同,一個(gè)是重功能,一個(gè)是重體驗(yàn),關(guān)鍵看你所面對得用戶群體需要得是什么,產(chǎn)品功能得主次是什么。另外舉得兩個(gè)例子覺得不是很恰當(dāng),郵箱得使用場景是需要快速找出發(fā)件人與大概得標(biāo)題內(nèi)容,具體看內(nèi)容是需要點(diǎn)進(jìn)去。反面例子本身與郵箱需求不同,明顯是類似用戶管理得列表,這種需要把頭像和身份標(biāo)簽信息展示全,不能隱藏信息,省去二次點(diǎn)擊得操作。這本身是產(chǎn)品在表現(xiàn)層與架構(gòu)層就決定得事情,不是視覺設(shè)計(jì)師自己估計(jì)留白。
感謝分享,說的很在理,自己以前做UI的時(shí)候也糾結(jié)過,是視覺設(shè)計(jì)上的美觀還是用戶交互體驗(yàn)更重要?然后跟其他伙伴探討,不管是產(chǎn)品設(shè)計(jì)、還是Ui設(shè)計(jì)都要以用戶為主,根據(jù)使用場景來設(shè)計(jì)最佳的交互體驗(yàn);而視覺只是交互體驗(yàn)的一部分。
區(qū)分B/C場景增加減少留白問題基本認(rèn)同,但是最后舉的反例我覺得是有問題的。
有時(shí)候不僅要對場景,還要對著需求來調(diào)整。
從模糊的圖片來看,列表上的展示的內(nèi)容就有8大項(xiàng),打分和第三項(xiàng)內(nèi)容占據(jù)的幅度還比較多,分行情況是必然的,列表肯定要撐高。
列表信息保留問題,產(chǎn)品經(jīng)理肯定要想哪些舍和留,哪些是必須第一辨識,再交給設(shè)計(jì)師
我覺得還是欠缺溝通吧,設(shè)計(jì)師負(fù)責(zé)的畢竟是視覺工作,難以考慮周全用戶真正的使用場景,而一個(gè)產(chǎn)品的開發(fā)初期就應(yīng)該讓設(shè)計(jì)師介入,跟著調(diào)研,跟著做需求,而不但是將原型拍在設(shè)計(jì)師面前說一句“做吧”。設(shè)計(jì)師在沒有足夠信息的支持下往往會(huì)依據(jù)自己的經(jīng)驗(yàn)進(jìn)行設(shè)計(jì),事實(shí)證明不止設(shè)計(jì)師,很多行業(yè)的從業(yè)人員大都都是根據(jù)經(jīng)驗(yàn)進(jìn)行設(shè)計(jì)的。前期設(shè)計(jì)師的參與,后期數(shù)據(jù)足夠的溝通,設(shè)計(jì)師不可能還會(huì)固執(zhí)己見的。畢竟再視覺的設(shè)計(jì)師還是很重視用戶的體驗(yàn)的。
對的,你說的很好。也是我們團(tuán)隊(duì)需要改的,確實(shí)應(yīng)該讓設(shè)計(jì)師多參與業(yè)務(wù)流程。
這個(gè)還是得看場景把
不過看到這句話真的吃驚,
對于HR來說,除了項(xiàng)目經(jīng)驗(yàn)這項(xiàng)稍微不太重要外。原來HR眼里項(xiàng)目經(jīng)驗(yàn)是最不重要的
不用吃驚,初篩簡歷的時(shí)候,一般只有公司,教育,年薪等信息OK了,想深入了解你的時(shí)候,才會(huì)看項(xiàng)目經(jīng)驗(yàn)。這種篩選簡歷的情況往往是對于某些職位投遞量比較大的時(shí)候。如果本身就沒有多少簡歷,當(dāng)然會(huì)一個(gè)個(gè)都細(xì)看。
Gmail選擇列表排列“默認(rèn)”“標(biāo)準(zhǔn)”“密集”了解一下?不要單純的把上線效果不好歸結(jié)給【留白】的錯(cuò),設(shè)計(jì)師的錯(cuò),說服力不夠的錯(cuò)!!核心在于你們雙方對于問題的解決方案思索的不夠深入和細(xì)致,這是原罪!
PS:QQ郵箱真的好,那你簡歷里留QQ郵箱試試唄
別說,很多人簡歷里就是QQ有些。你仍然是刻板印象吧。
gmail的做法是一種方式,但是并不是所有的產(chǎn)品都有經(jīng)理做幾套前端界面。
別說,很多人簡歷里就是QQ郵箱,你先多調(diào)查一下在下結(jié)論吧~。另外,很多人不用QQ郵箱的原因在于覺得QQ郵箱不夠正式,而用QQ郵箱的人很多都是因?yàn)橛X得比別的郵箱好用。
gmail的做法是一種方式,但是并不是所有的公司都像谷歌那樣有精力做幾套前端界面。你可知如果一個(gè)B端后臺所有界面都做幾套標(biāo)準(zhǔn),設(shè)計(jì)和前端量大多少?產(chǎn)品經(jīng)理衡量成本的職責(zé)了解一下?
您加油喲!
您辛苦了呢!
補(bǔ)一句:我是交互,我不是在為誰遮掩,還請真的不要把鍋甩給留白,不論B端C端,錯(cuò)的不是留白而是背后不假思索的人
請看原文原話,“我不是反對留白,只是認(rèn)為要分場景”。本文的目的就在于此
間距大小,談的到場景?根本就是沒抓住需用用戶到底是要一目十行還是單行信息清晰明了好么?
做產(chǎn)品和功能的時(shí)候,很難的一點(diǎn)就是衡量成本加克制。谷歌郵箱全球有多少億用戶?他當(dāng)然是精準(zhǔn)化差異化設(shè)計(jì)。而一般的B端產(chǎn)品,幾十萬家企業(yè)客戶就已經(jīng)是非常成功的了。權(quán)衡成本也是產(chǎn)品經(jīng)理熱門的話題,很多文章討論。你卻說做幾套界面,你在開玩笑嗎?
為什么不能留QQ郵箱呢 只是一個(gè)工具 為何非得把它情緒化
因?yàn)閝q郵箱就只要你自己體驗(yàn)好吧,看到9、10位數(shù)字的人腦瓜疼
這位層主好敏感 還有我簡歷就是留qq郵箱啊 都什么年代了 竟然還有人覺得qq郵箱不正式 ?
加油喲
我們招聘收到的非常多優(yōu)秀的簡歷都是留的QQ郵箱,不要理會(huì)這位層主的偏見
你們兩都有點(diǎn)鉆牛角尖啦,無關(guān)對錯(cuò),每個(gè)人都有自己的經(jīng)歷,所有就有獨(dú)自的見解,和平交流互相學(xué)習(xí)更好!
有一樣的感覺。拿我做的一個(gè)項(xiàng)目中海報(bào)設(shè)計(jì)的例子。
作為產(chǎn)品我關(guān)注的是海報(bào)第一眼我能看到的信息,用戶能不能很快get到我想表達(dá)的東西。
站在設(shè)計(jì)角度,他更關(guān)注的是是不是好看。
場景最重要。數(shù)據(jù)說話。
其實(shí)任何事情都有兩面性,站在設(shè)計(jì)的角度是
一張海報(bào),首先我需要讓用戶注意,并且感興趣,愿意看,然后再讓用戶get到你表達(dá)得東西。
如果一張海報(bào)不好看,如果沒有引起用戶得關(guān)注,你表達(dá)得再清楚,再牛掰又有什么用呢。
現(xiàn)在得時(shí)代產(chǎn)品功能相差能差多少呢?大家都差不多,關(guān)鍵是誰能讓用戶體驗(yàn)更爽,誰就留下來了。
其實(shí)更準(zhǔn)確的是海報(bào)可以類比c端 而不是b端
說的還不錯(cuò)
謝分享,其實(shí)就用戶體驗(yàn)而言,我覺得更應(yīng)該把方便用戶使用而放在第一位,意見很中肯,留白需要分場景。
有道理,頂!