怎麼樣讓用戶覺得簡潔的界面有細節？

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

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

　　聲明：

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

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

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

　　圖一：

　　圖二：

　　在看完以上對比後，我先來問幾個問題。

　　第一個問題：

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

　　第二個問題：

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

　　圖三：

　　圖四：

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

　　第一個問題：

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

　　第二個問題：

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

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

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

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

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

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

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

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

　　圖五：

　　上圖，是一個按鈕。

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

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

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

　　圖六：

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

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

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

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

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

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

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

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

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

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

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

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

　　回到本題。

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

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

　　我們還是來看圖例。

　　圖七：

　　圖八：

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

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

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

　　由於問的是界面設計，所以，後面的列子，我就以界面設計來做舉例。

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

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

　　圖九：

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

　　可是，下載後的一些應用。

　　圖十：

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

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

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

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

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

　　第一步：學會做加法

　　積累屬於你自己的素材庫。

　　我有屬於自己的素材庫，那就是我的腦子。 我平時看得很多。不同於看過就算了的過眼浮略。我每次看到覺得不錯的設計，我一定會反復的問自己，為什麼我會覺得這個設計不錯?是配色打動了我?字體選擇的很好?構圖