藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

每一個扁平化界面設(shè)計，都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計

來源：http://www.shejidaren.com/app-interactive-design-by-ramotion.html

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

編者按：今天問題非常有代表性，該如何融合看似對立的簡約與細節(jié)？怎樣讓簡約的界面看起來不那么糙？來看@-eno-one- 老師分享的內(nèi)部培訓(xùn)教程，全文都是易懂的大白話，外行人也能看得明白，希望對同學(xué)們有幫助 >>>

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

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

聲明：

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

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

讓我們先來定義一下，在設(shè)計中，普通觀看者，會把什么當作為細節(jié)。

圖一：

圖二：

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

第一個問題：

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

第二個問題：

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

圖三：

圖四：

還是和之前一樣。請大家來回答我?guī)讉€問題。

第一個問題：

各位依然根據(jù)自己對于「細節(jié)」二字的理解，來選擇出你們認為更有細節(jié)的是哪張圖？

第二個問題：

請把你在前圖中，總結(jié)出的對于「細節(jié)」的原因，套用到現(xiàn)在這兩張圖中來，看看你所定義的產(chǎn)生「細節(jié)」的原因，是否依然存在？

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

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

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

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

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

而第二種反應(yīng)，是我們會立刻從畫面上轉(zhuǎn)移注意力，不再觀看了，因為沒有可以看的內(nèi)容。

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

圖五：

上圖，是一個按鈕。

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

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

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

圖六：

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

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

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

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

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

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

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

而第二張圖的細節(jié)感，來自于畫面的構(gòu)圖（中軸線式）。

這樣的構(gòu)圖方式使得本來色彩與物件雜亂的畫面，增添了一點規(guī)則感。而我們所認為的細節(jié)，其實就來自于規(guī)則感。

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

以上，是兩個基礎(chǔ)的測試環(huán)節(jié)。其實，我已經(jīng)把產(chǎn)生「細節(jié)」的兩大要素告訴各位了。

畫面中的裝飾元素進行規(guī)則規(guī)律的出現(xiàn)（擺放），是使得觀看者產(chǎn)生細節(jié)感的另一個原因。

回到本題。

簡潔的界面怎么樣讓用戶覺得很有細節(jié)？

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

我們還是來看圖例。

圖七：

圖八：

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

所以說，裝飾設(shè)計的細節(jié)，與簡潔之間是沒有關(guān)系的。

有些設(shè)計，之所以給人感覺既簡潔，也有細節(jié)。是因為設(shè)計元素在畫面中高度統(tǒng)一和諧。

由于問的是界面設(shè)計，所以，后面的列子，我就以界面設(shè)計來做舉例。

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

因為界面設(shè)計的太粗糙。我感覺將我的心情用那樣的界面應(yīng)用記錄下來，是對自己情緒的不負責(zé)任。

圖九：

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

可是，下載后的一些應(yīng)用。

圖十：

設(shè)計粗糙。粗糙來自于哪里？來自于元素的不和諧。低幼化的字體，將整個界面的設(shè)計分拉低。

簡潔，但具有細節(jié)的設(shè)計。是指所出現(xiàn)的元素和諧統(tǒng)一。

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

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

如何設(shè)計出簡潔，但又有細節(jié)感的界面？

第一步：學(xué)會做加法

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

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

這一部分的心得：

在我看來，買什么書來學(xué)，并不是最重要的。

重要的是，你帶著怎么樣的眼光來看待問題和學(xué)習(xí)。

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

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

1. 當你感覺閱讀比較順暢時，你應(yīng)該思考，到底是哪些方面讓你感覺順暢？是文字的行距還是文字的間距。

2. 當你感覺閱讀輕松時，你應(yīng)該思考，到底是哪些方面讓你感覺輕松？是字號的大小剛好，還是文字顏色選擇的復(fù)合你的習(xí)慣？

3. 當你對某則新聞內(nèi)容深信不疑時，你應(yīng)該思考，到底是文章的內(nèi)容有理有據(jù)，還是標題字體的選擇讓你覺得中規(guī)中矩的認可？

以下就不再一一列舉。只你帶著發(fā)現(xiàn)與思考的眼光去閱讀，哪怕新華字典都會是你學(xué)習(xí)版式設(shè)計的好老師。

帶著疑問去觀察，去學(xué)習(xí)，去記憶。將別人的變成自己的，在腦中，積累屬于你自己的素材庫。

第二步：學(xué)會做減法

學(xué)會發(fā)現(xiàn)問題，避免這些問題出現(xiàn)在自己的設(shè)計中，就是在做減法。

看得多了，腦子會亂。在學(xué)習(xí)的時候，除了知道要吸取什么，也要知道丟棄什么。

圖十一：

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

圖十二：

圖十三：

知道不能怎么做，與知道要怎么做，同樣重要！

簡潔的界面怎么樣讓用戶覺得很有細節(jié)？

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

2. 再通過尋找素材（裝飾設(shè)計手法）中的規(guī)律，去解決簡潔的問題。

素材（構(gòu)圖、色彩、圖形、字體等等）之間關(guān)系和諧統(tǒng)一了，設(shè)計便自然簡潔了！

掃一掃，案例分享帶回家（藍藍設(shè)計微信公眾平臺）