為何一個設計的細節(jié)點會使人在感覺上的差異那么大呢？為什么優(yōu)秀的作品都叫做“別人的設計”？本文將為告訴你問題的答案。

很多時候總會常常覺得，為什么自己做的界面看起來總是沒有別人的漂亮，為什么同樣的風格設計，同樣差不多的設計時間，同樣的設計軟件，但出來的效果總是比別人差一點？到底是哪里出了問題？

這種問題往往會在一些剛?cè)胄械脑O計師身上出現(xiàn)（當然也有一些工作數(shù)年的設計師），其實出現(xiàn)這些問題并不是因為你的能力太差或者說什么審美出現(xiàn)問題，很大的原因就在于你沒有關(guān)注設計細節(jié)！

那么什么是設計細節(jié)，設計細節(jié)又包括什么？為什么說設計上的細節(jié)會讓我們之間的設計效果看上去會有明顯的差異呢？接下來讓我們一同來探討一下。

說到設計細節(jié)，我這里借用一下來自Robin Williams編寫的《寫給大家看的設計書》上所提到的“4大基本原則”，這“4大基本原則”包含了我認為在設計細節(jié)上最關(guān)鍵的四個部分：對比（Contrast）、重復（Repetition）、對齊（Alignment）、親密性（Proximity）。

幾乎每一個優(yōu)秀的設計都一定會包含這“4大基本原則”，那么我們應該如何在設計上去運用這些原則，去幫助我們提升設計的質(zhì)量，接下來我們結(jié)合實際項目去逐一的分析。

對比（Contrast）

什么是對比呢？相信很多設計師馬上會想到關(guān)于設計界面上的字體大小、顏色深淺、圖形大小、線條寬細等等這些元素的比較。而這些不同元素的比較就是在界面上建立一種有組織的層次結(jié)構(gòu)，讓界面上的元素避免太過相似，從而達到吸引眼球的效果，這就是對比。

當然，對比不單單只是用作在界面上吸引用戶的眼球。他還是設計細節(jié)上非常重要的一步環(huán)節(jié)，適當?shù)倪\用對比，可以讓設計界面上的不同層級更加清晰，通過元素對比在頁面上指引讀者，并且制造焦點。

讓我們來看看下面這個視覺案例，對比對于界面的細節(jié)提升有多到的幫助。

如圖1-1上所顯示，上面的“關(guān)注話題”按鈕的各種狀態(tài)，你能分辨得出都什么樣的狀態(tài)嗎？

如圖1-1

很明顯上面的“關(guān)注話題”按鈕的狀態(tài)樣式都是一樣的，按鈕元素樣式設計上并沒有建立一種層次結(jié)構(gòu)，導致用戶無法快速通過當前樣式快速判斷當前到底是一種怎么樣的狀態(tài)。另外“關(guān)注話題”與“已關(guān)注”的樣式設計上也過于相似，這樣也會明顯降低用戶對于按鈕狀態(tài)切換的感知，不利于用戶的體驗感受。

那么我們應該如去適當運用對比，讓體驗更加優(yōu)秀呢？我們再來看看圖1-2所顯示，同樣還是“關(guān)注話題”的按鈕狀態(tài)切換，這次你應該能快速分辨出按鈕的當前狀態(tài)含義。從左到右分別是“未關(guān)注狀態(tài)、鼠標選中狀態(tài)，鼠標點擊狀態(tài)、已選中狀態(tài)”。

我們這次通過讓按鈕在不同狀態(tài)下，通過按鈕填充的顏色，文字的顏色，描邊的顏色等元素的比較，達到區(qū)分不同按鈕狀態(tài)的目的，讓用戶可以快速通過當前元素對比辨別出當前的按鈕狀態(tài)，提升按鈕之間的交互體驗，這就是我們通常所講的設計細節(jié)中的對比關(guān)系。

如圖1-2

我們再來看下一個例子，如圖1-3這是金蝶云社區(qū)的一條回答卡片，卡片里包含了回答者姓名、職位、贊同次數(shù)、回答內(nèi)容、編輯日期。雖然說信息的組織上沒有問題，但是卻不利于用戶通過快速瀏覽卡片獲取相關(guān)信息。這是因為卡片上設計的信息缺少對比，他們所用的字體和顏色幾乎一樣，這樣所有的信息層級都會粘在一起，不利于區(qū)分。

我們再來對比一下圖1-4，明顯信息展示上都有了醒目的對比，根據(jù)信息不同的層級，改變其字體的大小和顏色，有助于突出對比效果，用戶瀏覽時也可以更快通過字體的對比變化，快速獲取需要的信息。所以運用對比可以讓卡片信息更加清晰，表達更加清楚。

如圖1-3

如圖1-4

當然對比在設計上的運用除了上面提到的兩種案例之外，還有更多的方式，包括形狀、顏色、大小、空間等。但無論是哪種方式，最終的目的都是為了讓設計上的信息層級更加利于用戶理解，讓信息有更強的可讀性，也讓界面有更強的對比性。

重復（Repetition）

看到標題，相信很多設計師都會覺得好奇，重復是什么意思？難道是要重復使用同一種元素設計？我們來看看《寫給大家看的設計書》上Robin對于重復原則的說明：設計的某些方面需要在整個作品中重復。重復元素可以是一種字體、一條粗線、某個項目符號、顏色、設計要素、某種格式、空間關(guān)系等。用戶能看到的任何方面都可以作為重復元素。

看到這里，我們大概可以理解為重復指的是界面設計上的“一致性”。此“一致性”可以讓界面上不同的信息元素通過視覺表現(xiàn)成為一體，保證了設計樣式的統(tǒng)一，也同時加強了用戶瀏覽時的記憶。當然不是所有的元素都能隨便重復使用，我們需要讓這些元素建立一種連續(xù)性，讓他們在界面上更像一群整體。

接下來我們還是通過兩個案例來進一步分析探索重復在于界面設計上的運用方式。

我們先來看第一個案例，如圖2-1顯示，案例設計為金蝶云社區(qū)中的提問卡片，雖然這三張卡片都為同一類型卡片并且信息展示層級也相同，但是從視覺上明顯的會讓用戶覺得這三張卡片并不統(tǒng)一，原因出在哪里？其實就出現(xiàn)在三張卡片并沒有保持界面設計上的“一致性”，如“提問作者“以及”提問內(nèi)容“。字體的大小以及字體的粗細都各不相同，所以這三張卡片同為提問卡片，但是里面的元素并沒有建立一種連續(xù)性，那么用戶就無法感受到卡片的一致性。

如圖2-1

所以為了保證卡片視覺上的“一致性”，我們必須要讓卡片的信息元素重復，例如圖2-2所顯示，這次明顯可以感受到卡片在設計上的統(tǒng)一性，原因就在于每張卡片里相對應的元素設計樣式都是重復相同的。從設計上來說，重復的元素設計可以保持界面上的“一致性”，從而幫助用戶在瀏覽時快速分辨相同模塊內(nèi)容，增強閱讀簡易性。

如圖2-2

除了上述案例提到的文字元素的重復原則，我們還能重復其他的設計元素來讓我們的界面保持“一致性”，如圖2-3，除了文字元素設計樣式的重復使用，還包括了按鈕元素的設計、標題與內(nèi)容分割線的元素設計，以及插畫元素的風格設計。其實這些元素的重復都讓我們的界面設計更加統(tǒng)一。

如圖2-3

在設計上，我們除了可以對單張頁面上的設計元素使用重復原則，也可以使用在多張頁面上，讓他們連在一起，從而達到增強整個作品的統(tǒng)一性。但使用重復原則時必須要有個控制的范圍，不然過多對某種元素重復使用，會使得頁面整體缺少對比性，反而讓頁面在感覺上會不舒服。

對齊（Alignment）

說到對齊相信很多設計師都不會陌生，因為他算是我們設計里面最基礎的原則了，但往往也是我們剛?cè)胄械脑O計師們最用容易出問題的地方，尤其是在頁面空間設計的把控上，很多設計師在設計一個界面時，往往只會考慮把需要展示的文字、圖片、圖標等元素網(wǎng)上一堆就完事了，完全沒有考慮頁面空間上的排版布局，從而給人一種雜亂無章的感覺，這也是往往出現(xiàn)最多的問題。因為很多設計師在做設計的時候根本沒有思考，只會追尋美感來做，這樣連基本設計原則都沒有的界面，只能說是一種畫，而不是設計。

我們再次借用《寫給大家看的設計書》上Robin對于對齊原則的說明：任何元素都不能在頁面上隨意安放。每一項都應當與頁面上的某個內(nèi)容存在某種視覺聯(lián)系，對齊原則要求特別小心，再不能像從前那樣，只要頁面上剛好有空間就把元素隨意“扔”到那里。

讓我們來看看如圖3-1的這個案例，這是一篇社區(qū)上的話題文章，我們可以出設計師在對文章排版的時候，直接就把文章里所有的內(nèi)容已居中的格式來展現(xiàn)，這種局中的排版格式第一眼給人一種很業(yè)余的水平，而且整體的空間感會顯得比較凌亂，無法突出重要信息。

如圖3-1

讓我們來試試讓整篇文章采取左對齊試試，如圖3-2顯示，明顯感覺到文章空間排版更加的整齊，尤其對文章中標題、作者、內(nèi)容有更好的層級表現(xiàn)關(guān)系，才能突出你想要用戶第一眼想注重到的信息。所以我們在設計這類型的文章排版時，盡量讓內(nèi)容元素對齊排版，這樣頁面統(tǒng)一而且有條理。

如圖3-2

除了上面所述關(guān)于界面整體的元素對齊原則，還有一種情況，是我們新手設計師常常容易發(fā)生的，就是細節(jié)上的對齊。我們來看看如圖3-3顯示，乍一看上去好像沒什么問題，但仔細一看就能發(fā)現(xiàn)里面標題與數(shù)字并沒有對齊，這就使得卡片看上并沒那么精致，也是新手經(jīng)常會出現(xiàn)的問題，給到用戶一種非常不用心設計的感受。但其實要解決也是非常簡單，只要我們把標題和數(shù)字居中對齊再看看，如圖3-4，是不是立馬讓卡片精致了許多，內(nèi)容更加的工整，馬上跟圖3-3拉開了檔次，這就是為什么你的設計總是別人差那么一點，原因其實非常簡單，細節(jié)決定一切。

如圖3-3

如圖3-4

無論是整體的元素對齊還是細節(jié)上的對齊，只要運用得當都能讓你的界面質(zhì)量提升一個檔次，對齊的根本目的就是使頁面統(tǒng)一而且有條理，所以，請牢記對齊原則，一定能讓你的界面更加的精美。當然我們也要注意，對齊盡可能的保持統(tǒng)一，不要一個左對齊，一個右對齊，反而得不償失。

親密性（Proximity）

最后就是我們的親密性原則，關(guān)于親密性相信很多設計師在剛開始學設計的時候都會出現(xiàn)過這樣的現(xiàn)象，在設計中，整個界面被填充的滿滿的，生怕一絲的空白會讓領導覺得你沒有認真做設計，各種元素被放的密密麻麻的，一看就知道有多親密，但，這是我們想要的親密性嗎？不是的，親密性原則不是指你把元素放的有多滿，而是指將相關(guān)有聯(lián)系的信息以及元素組織在一起，增強他們的關(guān)聯(lián)性。

同樣我們借用《寫給大家看的設計書》上Robin對于親密性原則的說明：將相關(guān)的元素組織在一起，移動這些元素，使它們的物理位置互相靠近，這樣一來，相關(guān)的項將被看作凝聚為一體的一個組，而不再是一堆彼此無關(guān)的片段。

所以說親密性不是指得你的元素再見面上放得有多滿，而是指要把有相關(guān)聯(lián)系信息的元素靠近放在一起，讓用戶能馬上了解頁面的組織和內(nèi)容。

我們來看看以下這個例子，如圖4-1顯示，大家能快速的辨別出“在線客服”對應的是哪個圖標呢？相信很多用戶都會錯誤的把“重新注冊”的圖標當成了“在線客服”，因為這個頁面原本相關(guān)聯(lián)系的元素并沒有被靠近的移動在一起，這樣一來他們之間的聯(lián)系就直接被斷開了，而并無關(guān)聯(lián)的元素又因為被錯誤的聯(lián)系在一起，導致用戶直接就會理解錯誤，所以一定要正確的使用親密性原則，把相關(guān)聯(lián)系信息的元素組合放一起，這樣用戶才會聯(lián)想他們之間的關(guān)系。例如圖4-2顯示，當我們把相關(guān)聯(lián)系的元素信息組合放在一起后，明顯的他們的關(guān)系層級一下子就清晰了，用戶也能很輕松的快速辨別相對應的圖標是哪一個，這就是我們應該需要注意的親密性原則。

如圖4-1

如圖4-2

那是不是只有相關(guān)聯(lián)系的元素組合在一起才叫親密性原則？當然也不是，親密性不單單指的是是相關(guān)元素都要靠近，有些時候，也需要給它們一些空間。我們再來看多一個案例，如圖4-3顯示，這張“課程信息“界面，乍一看感覺整體設計并沒有太大的問題，但總覺在設計細節(jié)上差那么一點感覺，尤其是“課程描述” 、“ 適用人群”和“配套課件”之間的信息過于貼近，這樣我們就無法分辨出它們之間的關(guān)系，用戶也就無法快速理解界面里面的信息內(nèi)容，其實問題就出現(xiàn)在信息與信息之間缺少必要的空白，這樣相關(guān)聯(lián)系的信息就無法展示他們的親密性，從而沒辦法組織他們的關(guān)聯(lián)性。

如圖4-3

其實我們只需要在相關(guān)聯(lián)的信息旁給一些空白空間，如圖4-4顯示，讓真正相關(guān)聯(lián)的信息組合在一起，形成一段一段的組合，讓有聯(lián)系的信息具有更近的親密性，這樣我們就很很輕松直觀的分辨出界面每一段的信息內(nèi)容了，視覺上也更加的美觀。

如圖4-4

親密性的根本目的是實現(xiàn)組織性，所以我們在界面設計時要靈活運用親密性原則，組合關(guān)聯(lián)信息這樣信息才更有條理性和組織性，用戶瀏覽界面時才更容易讀區(qū)信息也更容易理解。

相信看到這里，各位應該能明白為什么你的設計總是比別人差那么一點，原因就在于你自己對于設計細節(jié)的追求，而對于剛?cè)胄胁痪玫脑O計新手，非常建議閱讀來自Robin Williams編寫的《寫給大家看的設計書》，尤其對于“4大基本原則”會有更詳細的解說，最后希望大家能夠更多的關(guān)注設計細節(jié)，提升升級能力。

本文由 @DC群 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議