簡潔的界面怎樣讓用戶覺得很有細節?

>>>  創業先鋒 眾人拾柴火焰高  >>> 簡體     傳統


來源:知乎日報

作者:eno-one   新浪微博 [ -eno-one- ]


正好,前段時間公司的內部培訓就講到這方面。我將內容整理一下,來答你。


之所以決定將這個問題作為公司內訓的原因,因為發現一些同事們的設計粗糙,缺乏細節。而所謂設計的細節,又是一種很難用理性文字來表述清楚的東西。所以,我花了好幾天時間去觀察同事們做的東西,總結其中常犯的通病。本答案內容,我會盡量用最易懂的大白話來回答。外行人也能看得明白,就是我的目的。所以,希望下面的內容對你有幫助。


聲明:

1. 粗略回答此題,此答案目的在于授予漁之技,而非展示魚之貌,因此請閱讀重點。所以,也請各路語言潔癖咬文嚼字美學鑒賞黨慎入;


2. 本答案僅就一般規律進行總結,旨在傳授個人經驗于行業新人。如果你自認是行業老鳥或高手,請慎入。另外,請不要拿個例來進行反駁推翻。


3. 重點部分已加粗。


讓我們先來定義一下,在設計中,普通觀看者,會把什么當作為細節。


圖一:

圖二:

在看完以上對比后,我先來問幾個問題。


第一個問題:

各位可以根據自己對于「細節」二字的理解,從以上兩張圖中,選擇出你認為更有「細節」的一圖。


第二個問題:

不管你選擇的是哪一個,請你說出你認為該圖有「細節」的緣由。 先不急著給「細節」二字下結論,讓我們再來看看另一組對比。而這次的對比,會復雜一些。


圖三:

圖四:

還是和之前一樣。請大家來回答我幾個問題。


第一個問題:

各位依然根據自己對于「細節」二字的理解,來選擇出你們認為更有細節的是哪張圖?


第二個問題:

請把你在前圖中,總結出的對于「細節」的原因,套用到現在這兩張圖中來,看看你所定義的產生「細節」的原因,是否依然存在?


現在,我就來將大家看到前面幾張圖時的心理活動進行一個還原。

在這樣兩張對比中,大多數人會認為第二個「我」字更有細節。這里的細節感來自于畫面中的裝飾性元素(投影)。


一張圖,我們的視覺能夠在上面停留的點或者時間,相對來說越多越久,我們的心理感受便會認為這張圖越有細節。


就拿上面兩張圖來說,第一張圖,我們在看過之后,大約僅零點一秒不到的時間,就可以反應出,圖中只有一個漢字而已。而這時候,我們的視覺與大腦會立刻做出后面兩種反應中的一個。


第一種反應,我們會立刻在畫面中去尋找可以供我們觀看的第二個元素。如果找不到,那么我們就會立刻將注意力從畫面上轉移。


而第二種反應,是我們會立刻從畫面上轉移注意力,不再觀看了,因為沒有可以看的內容。


接下來,我還是通過圖例的方式,來讓大家感受一下裝飾性元素對于細節感的影響。


圖五:

上圖,是一個按鈕。


是一個沒有任何設計裝飾的按鈕,這個按鈕以最直白的漢字為表現形式。


而接下來,大家看到的圖六,是增加了起伏、投影、亞克力質感等多種裝飾性手法的按鈕。


大家可以自己感受一下,哪一個會讓我們感覺更有細節。


圖六:

還是讓我們結合之前所說的,視覺停留時間的問題。


第一個按鈕,我們看到之后,大腦會立刻做出反應,這是兩個漢字而已,接下來,我們會開始主動尋找第二個視覺停留點。這時候,我們會注意到灰色的底色,再接下來,我們有可能會注意到深灰色的文字。但是,當我們把這一切全部都觀察結束后,當我們無法再從畫面中找到可供觀看的點時,我們便會轉移視線。


而第二個擬物設計的按鈕。我們第一眼會看到文字,接下來看到的是灰色底色,再接下來看到的是凸起的按鈕,倒角弧邊,模仿亞克力質感的光影關系,文字下方的疊加投影等等。由于有更多的裝飾性元素,所以,我們的視線會比第一張圖停留時間更長,我們也會認為第二張圖更有細節。 以上,是產生細節感的第一個原因。


我們視覺的停留時間,決定了我們是否會認為畫面更具有細節。而增加畫面的裝飾元素,是增強細節的一個手段之一。


接下來,開始分析我們在前面看到的第二組對比圖。




這兩組對比圖,都是畫面復雜且雜亂的。結合我們上面所說,畫面里的內容都是豐富的。這些豐富的內容,不管是不是來自于人為的設計,都可以使得我們的視覺在畫面中停留很長時間。


但是,我相信會有很多人會認為第二副更細節感。


而第二張圖的細節感,來自于畫面的構圖(中軸線式)。


這樣的構圖方式使得本來色彩與物件雜亂的畫面,增添了一點規則感。而我們所認為的細節,其實就來自于規則感。


第一張圖,雖然畫面中有很多內容可供觀看,但是,這些內容,無論是擺放的位置,還是色調,都是雜亂的。所以,即便有很多內容可供觀看,雜亂的布局會影響觀看者的情緒,使得觀看者不愿多看下去了。 而第二張圖。雖也是雜亂的色彩與物件,但是,由于有了中軸線式的對稱構圖。可以人為的,使得觀看者的視覺疲勞降低。先看整體,再看左邊,接著再看右邊。人的視覺活動被構圖形式引導。所以,細節感便來自于此。


以上,是兩個基礎的測試環節。其實,我已經把產生「細節」的兩大要素告訴各位了。


畫面中的裝飾元素進行規則規律的出現(擺放),是使得觀看者產生細節感的另一個原因。


回到本題。

簡潔的界面怎么樣讓用戶覺得很有細節?


在前面,我提到過,裝飾性元素會讓畫面有細節感。但是,這些裝飾元素的堆砌,與簡潔其實并不沖突。


我們還是來看圖例。

圖七:

圖八:


上面兩組對比。如果僅僅從所謂的「簡潔」的角度出發來看,明顯是第一張圖更加簡潔。但是,我們不會認為第一張圖比第二張圖更有細節。

所以說,裝飾設計的細節,與簡潔之間是沒有關系的。


有些設計,之所以給人感覺既簡潔,也有細節。是因為設計元素在畫面中高度統一和諧。


由于問題問的是界面設計,所以,后面的列子,我就以界面設計來做舉例。


上個月,我很想找一款用來寫日記的 APP。找了很久很久,也看到不少用戶推薦的應用。可是下載完,打開后,我就不想再開第二次。


因為界面設計的太粗糙。我感覺將我的心情用那樣的界面應用記錄下來,是對自己情緒的不負責任。


圖九:

我需要的 APP 其實很簡單,簡潔,易用,可以多平臺同步。能夠插入圖片與音頻視頻。


可是,下載后的一些應用。

圖十:


設計粗糙。粗糙來自于哪里?來自于元素的不和諧。低幼化的字體,將整個界面的設計分拉低。


簡潔,但具有細節的設計。是指所出現的元素和諧統一。


即便是裝飾性的設計,也是符合整個畫面基調,不會出現違和感的元素(色彩、字體、圖形等)。


上面的圖十,即便簡潔,但是卻有一種山寨感,就是因為元素(文字的字體)與畫面風格不統一。商務感的灰色背景與虛線,卻搭配上了低幼感的字體。

如何設計出簡潔,但又有細節感的界面?

第一步:學會做加法


積累屬于你自己的素材庫

我有屬于自己的素材庫,那就是我的腦子。 我平時看得很多。不同于看過就算了的過眼浮略。我每次看到覺得不錯的設計,我一定會反復的問自己,為什么我會覺得這個設計不錯?是配色打動了我?字體選擇的很好?構圖很好?模特很漂亮?總之,我會不斷的問自己很多問題,直到清楚究竟。然后,再將我覺得不錯這部分記憶下來。存入我腦中的素材庫里。 時間久了,我腦子里光是標題文字的處理形式,毫不夸張的說,起碼有成千上萬種。再將這些設計處理方式任意進行組合排列,我都可以演變出數百萬種新的裝飾手法。


這一部分的心得,我在問題:學排版有什么推薦的書籍或者其他途徑嗎?下,曾有過回答。


在我看來,買什么書來學,并不是最重要的。


重要的是,你帶著怎么樣的眼光來看待問題和學習。


有一天,我與一個做廣告工程的朋友在路上行走,我們同時觀察到路邊的一個車站廣告牌。他在乎的是,那個鋼結構廣告牌的結構原理;而我則看上了畫面中大美女的奇尺大乳!


因此,我的建議是,隨手拿起你購買的報紙,帶著思考與疑問去閱讀。


1. 當你感覺閱讀比較順暢時,你應該思考,到底是哪些方面讓你感覺順暢?是文字的行距還是文字的間距。


2. 當你感覺閱讀輕松時,你應該思考,到底是哪些方面讓你感覺輕松?是字號的大小剛好,還是文字顏色選擇的符合你的習慣?


3. 當你對某則新聞內容深信不疑時,你應該思考,到底是文章的內容有理有據,還是標題字體的選擇讓你覺得中規中矩的認可?


以下就不再一一列舉。只你帶著發現與思考的眼光去閱讀,哪怕新華字典都會是你學習版式設計的好老師。


帶著疑問去觀察,去學習,去記憶。將別人的變成自己的,在腦中,積累屬于你自己的素材庫。


第二步:學會做減法

學會發現問題,避免這些問題出現在自己的設計中,就是在做減法。


看得多了,腦子會亂。在學習的時候,除了知道要吸取什么,也要知道丟棄什么。


圖十一:

一個字體,圓圓潤潤,可以用在輕快年輕化的設計上,這是我們必須知道的。 但同時,我們也必須知道,它是不能用在嚴謹與特別正式的商務場合里。


圖十二:

圖十三:


知道不能怎么做,與知道要怎么做,同樣重要!


簡潔的界面怎么樣讓用戶覺得很有細節?


1. 先積累屬于你自己的素材庫,這樣你可以解決缺乏細節的問題。


2. 再通過尋找素材(裝飾設計手法)中的規律,去解決簡潔的問題。


素材(構圖、色彩、圖形、字體等等)之間關系和諧統一了,設計便自然簡潔了!


希望我的回答對你有幫助。


互聯網er的早讀課 2015-08-23 08:45:37

[新一篇] 22條日常技巧助程序員提高工作效率、節約時間【0224】

[舊一篇] 設計必讀 文案排版的9個妙招
回頂部
寫評論


評論集


暫無評論。

稱謂:

内容:

驗證:


返回列表