南京網站設計——用戶界麵,真的需要有那麽多留白嗎

2018/10/17

由於歐美發達國家互聯網產品界麵都看起來簡潔,留白很多,所以使得我國很多視覺設計師在設計界麵的時候都傾向於留白。然而,不假思索的留白真的是正確之選嗎?

本文作者將會說明:留白是需要分場景的。

作為一個產品,我並不是很認同當今視覺設計界一些潮流,比如不假思索地留白。

留白、減少視覺壓力幾乎是如今的視覺設計師張口必談的話題。

無論做的是什麽樣的界麵,隻要有足夠留白,界麵裏麵就被稱之為高大上;而如果界麵做得擁擠,就會被認為器小,甚至被稱之為“美工”。

但是我想說的是,視覺設計師和美工的區別不在與此,而在於有沒有根據場景區別化設計的能力。

問題的來源

有一些看似簡單的視覺問題,會對產品造成非常大的影響。

我第一次深度意識到這個問題,是在上一家公司做互聯網招聘產品的產品經理。當時,B端產品剛剛進入風口。傳統B端產品用戶體驗差,界麵難看,是一個很重要的改進方向。公司也花了重金聘請高級視覺設計師。開始對一些界麵做升級。

剛開始的時候,AG娱乐也非常讚同專業的人員做專業的事情,他們做出來的界麵也非常賞心悅目,其中包括簡曆詳情頁。他們采用了大量的留白和圖形化標識,使得界麵非常清爽簡潔,幫助HR看簡曆的時候減少視覺壓力,大幅度提升舒適感。

但是,產品上線之後,情況非常糟糕——HR每日瀏覽的簡曆數量下降了近40%。

AG娱乐剛開始以為隻是改版的磨合期,但是數據後來一直維持在低位,並且開始有HR陸陸續續向客戶經理反饋現在看簡曆的時候非常不方便。

以前,簡曆第一屏的信息就足夠豐富了,HR掃一眼就能做出決策,然後繼續查看“下一份”。但是現在,總是需要上下滾動屏幕,操作麻煩,而且思路不連貫。

那麽是不是AG娱乐內容的順序不對呢?把最重要的放到第一屏不就可以了嗎?

後來事實證明,這種區分主次的C端產品的思路在B端產品這裏根本站不住腳。對於HR來說,除了項目經驗這項稍微不太重要外,其他的如教育背景、工作年限、工作公司等信息,都非常重要。具體重要性的排名,不同的HR有所不同,且同一個HR在不同時期也不同。經過思考和權衡發現,最好的解決辦法仍是讓這些項目都在一屏顯示,但是界麵會非常擁擠。

做出綜合決策的時候,總是希望一眼能掃到所有的信息後來,我開始不斷的推動界麵緊湊化改版,尤其是簡曆界麵,數據效果和反饋越來越好。

但是視覺設計師總是抵觸的,因為與他們的認知不相符,他們的觀念裏仍然認為:沒有足夠留白的視覺設計拿不出手。

除此之外,我還開始注意到,B端留白較多的鬆散界麵導致很多的問題。比如列表管理頁,如果列表上下間距大,會使得批量操作、按時間找內容、翻頁等操作非常麻煩;列表字段的間距大,會使得列表中字段太少,展示是信息不充分,總是需要頻繁點詳情頁查看。

為何留白總被視作無需置疑的真理?

視覺留白在視覺設計領域如此被深信不疑,有很重要的一個原因是歐美發達國家互聯網產品界麵都看起來簡潔,留白很多;於是引導的審美潮流就成了這樣的。至於為什麽歐美界麵留白多,有人說留白是因為視覺負荷;我個人是有認知心理學背景的,我可以很負責任的說,視覺負荷這個詞有被過度強調了。有人利用短時記憶理論“神奇的數字7”來說明界麵上的區塊不應該超過 7 個,但是實際上,界麵中的視覺信息並不需要存儲在短時記憶中,所以根本沒有這樣的短時記憶限製。

我作為一個產品,如果你視覺設計師做出來的界麵的數據效果比我做的原型扔上去都要差,那麽你做這個界麵的意義何在?我最近幾年的工作經曆都是做B端以及SAAS產品,碰到視覺設計師不合時宜的留白導致的問題實在是非常之多。

我並不是反對留白,隻是認為要分場景。無法區分場景而肆意留白的視覺設計師不是設計師,隻是更美的美工。

如何識別場景

AG娱乐需要分清楚以下不同的維度:

信息管理界麵與信息展示界麵的不同;

主動使用與被動使用的不同;

用戶是否經常使用界麵,是否熟悉界麵;

B端產品和C端產品的不同。

信息管理界麵與信息展示界麵的不同

信息管理界麵,就是需要用戶進行操作的界麵,比如增刪查改。

信息管理界麵往往需要用戶對列表項進行對比、識別,然後做出操作。這種界麵,一定要保持緊湊,減少用戶頻繁上下滾動界麵,否則思路容易被打斷。

信息展示界麵,往往是純粹瀏覽的頁麵,所以從上到下滾動查看也沒有什麽問題,這種情況下可以適當多留白。

主動使用與被動使用的不同

主動使用者,要做一件事情時,是目的明確的且對做這個任務的難度是有預期的,那麽你優先要考慮的是效率。

比如說電商後台發布一個產品詳情或招聘網站發布一個職位,這些都是字段較多、比較複雜的表單。有的設計師擔心這麽複雜的一個表單,會把用戶嚇跑,於是就加字段間的大留白,減少用戶的視覺壓力。

但是實際上用戶感受到的場景與設計師是不一樣的,用戶是一個主動使用者,他本身就知道發布一個產品信息不是那麽簡單的事情,那麽你所能做的最好的事情,就是讓用戶能盡快的看到並填寫所有字段,而不是拉長頁麵高度,增加用戶滾動屏幕的操作。而且頁麵拉的太長,會導致有些表單上下文之間的聯係中斷。

被動使用者,往往是被一些模糊的場景吸引,然後想了解更多。比如說用戶對你的活動感興趣,想要報名你的活動。那麽這種情況下,用戶往往是沒有預期的,如果你給用戶看到的界麵或表單很密集的話,那麽確確實實會把用戶嚇跑。這種時候,需要注意降低界麵信息量,多留白。

用戶是否熟悉

所謂的視覺壓力,往往隻會在初次時感受明顯,使用過幾次後,視覺壓力的副作用就會急劇下降,甚至被用戶忽略;但是操作的不方便確是實實在在的,而且副作用會隨著使用的熟練程度越來越明顯。

對於用戶可能會經常使用的界麵,應該以效率優先,尤其需要珍重界麵第一屏的像素,不要隨意留白浪費空間;比如上文中提到的HR篩選簡曆的頁麵。

對於用戶不太可能經常使用的界麵,比如看過一兩次就不會再看的宣傳頁,應該以視覺舒適度優先;那麽適當的留白就是OK的。

B端產品和C端產品的不同

B端的產品,往往是管理信息界麵,且是用戶主動使用的有預期的,也是用戶經常使用的,所以B端產品的界麵,真的不需要你給他那麽多留白。

而C端的產品往往不太一樣,需要時情況而定。C端界麵一般留白會相對較多。

比如亞馬遜,C端買家的界麵留白就比較多。但是B端賣家的管理界麵密集程度也是超過你想象的。

QQ郵箱的例子

在所有的效率型產品中,我最喜歡的就是QQ郵箱界麵。

QQ郵箱雖然起步晚,但是目前是國內最成功的郵箱。

QQ郵箱堪稱是效率型產品的典範。

在很多視覺設計師看來QQ郵箱界麵很糟糕,幾乎完全沒有留白,密密麻麻全是字。

但是,如果作為郵箱的重度用戶,QQ郵箱的體驗是無與倫比的。QQ郵箱在 1080 高度的顯示器上,能在一頁顯示完整個列表。對於經常要按時間找郵件的人,非常方便。哪怕在小一點的屏幕上,也隻要稍微滾動一下鼠標滾輪,就能看全。

對於這種效率型的產品,留白幾乎沒有任何意義。

QQ郵箱的設計,看起來好像也沒什麽,不就是做得密密麻麻了嗎?但是要在整個設計行業人雲亦雲的大潮流之下,大家都說界麵要大麵積留白的情況下,果斷地不隨波逐流,做出一個真正用戶需要的界麵,這才叫真正的設計!

反麵的例子

比較遺憾的是,有的視覺設計師總是不太接受理性的東西。有的時候,產品和交互無論怎麽要求界麵緊湊,講再多的道理,視覺設計師仍然無動於衷;畢竟有的時候,人雲亦雲的力量實在過於強大,他們體會不到用戶真實操作時候的感受,仍然把不假思索的留白當做真理。

總結

留白,作為很多視覺設計師不假思索的基本準則,很多時候是不對的,需要根據具體的場景區分。

很多時候減少留白反而能對整體用戶體驗有巨大的提升;效率型產品的視覺設計的思路不應該是簡單的留白,而應該是幫助用戶識別信息,提高操作效率。在這種思路下,視覺設計還有很多要做的。

南京網站設計

 

 

返回列表 >>

相關主題

出錯了

Action:_after_view您所請求的方法不存在!


Action:_after_view您所請求的方法不存在!

您可以選擇 [ 重試 ] [ 返回 ] 或者 [ 回到首頁 ]