5個技巧，辨別UI設計是否合理

摘要： 你是專案經理、產品經理、運營或互動設計師，否遇到過這樣的情境？看了UI同學的設計稿，覺得雖然滿足了需求，但是就會覺得哪裡彆扭，又不知該怎樣表達。 你是UI設計師，當去給需求討論設計稿時，兩個方選哪個產生糾結，你根據自己的設計感覺有所判斷，但又不知道怎麼給對方講清楚。 這時，你可能需要這...

你是專案經理、產品經理、運營或互動設計師，否遇到過這樣的情境？看了UI同學的設計稿，覺得雖然滿足了需求，但是就會覺得哪裡彆扭，又不知該怎樣表達。

你是UI設計師，當去給需求討論設計稿時，兩個方選哪個產生糾結，你根據自己的設計感覺有所判斷，但又不知道怎麼給對方講清楚。

這時，你可能需要這幾個原理。

因為U設計雖然是展示介面效果，但它並不是純感性、靠審美的，而是有理可依、能夠分析和辨別的。

這就是本文想說的：UI設計的最重要原則，不是美，而是科學。

緊接著，很多人可能要問：

“為什麼？”

在回答這個問題之前，請大家先思考另外一個問題：

“美是什麼？”

在這裡，你可以稍作停頓，先別往下看，給自己個答案之後，再繼續閱讀。

當然，我們不是做美學論述，你不必顧慮是否會打錯，更不必回答的專業而系統，只要把你的觀點或直覺的回答寫下來即可。

如果你還是不知道該寫出什麼答案，那我們構想幾個場景：

當你辛苦工作一天，忙的飯都沒吃，然後飢腸轆轆的回到家裡，桌子上是剛出鍋的你最愛吃的飯菜，愛人給了你一個溫暖的擁抱，跟TA一起坐下來品味這頓晚餐。從味蕾到心靈，是不是都是甜美的？

當你在冷風漸漸消去的春日週末去郊遊，看到植物園嬰黃嫩粉的花苞，映著水藍色的天空和幾朵淡淡的輕雲，你聞到暖陽的氣息和草木的香味兒。你覺得大自然，是不是美好的？

當你在記錄片裡看到支教的鄉村老師，為了更多的孩子能夠接受教育，而艱難度日的時候，你流下感動的眼淚。你覺得人性，是不是閃著純良美麗的光輝？

所以，此刻你知道”什麼是美“的答案了麼？

這些“高效率、滿足感、舒適的、愉悅的、安全的、感動的”等等享受的狀態，就是美。

讓你產生“美”的體驗的，是這些積極良好的狀態和體驗。我們常說，藝術來源於生活，這些產生美感的狀態，是在符合人和自然規律的狀態下才產生的，所以在設計中，所謂“美感”，並不是飄忽不定的玄學，而是有規可循、有理可依的科學。

下面就用幾個案例，來解釋一下為什麼UI設計是一種，創造美的科學。

第1個例子：乘電梯 - 關於空間感/呼吸感

大家都乘坐過電梯吧！回憶一下“擁擠的電梯”和“不擁擠的電梯”，各自會帶給你什麼感受？

左：擁擠的電梯：空間剩餘少，氧氣不足、活動不便，導致氣息不暢、情緒緊張、焦慮。

右：不擁擠的電梯：足夠且合適的空間，給人生理和心理上的舒適感。

從這兩個場景中，我們可以充分理解到“適度空間”對人感受的重要性。這一原理體現在藝術和設計中，也可以成為“空間感、呼吸感”。比如，中國水墨畫中的“留白”。

延伸到UI設計中的例子：按鈕文字與邊緣的間距留白處理：

一張圖小結一下：

第2個例子：尋找尾號為1102的記錄表 - 關於規律和秩序

如果是下圖，把表格混亂的灑落，在你在其中尋找，你會是什麼情緒和心理狀態呢？

如果換做這樣，將表格按序號由小到大排佈擺放好，讓你去找尾號1102那張呢？

看著這兩堆表格，你的情緒應該有著明顯的不同。合理的規律和秩序能夠提高效率、符合人正常的思維邏輯，能夠獲得更好的體驗，這一點也同樣體現在視覺藝術上，比如這張風景照片：

整片的草地，或者是凹凸的山巒，並不足以讓我們駐足或讚歎，但當草地有了光影明暗的起伏、山巒有了節奏和規律的線條，畫面才顯壯麗和神奇。看山的心情是平靜的，而看山川是澎湃的，群而又律，則成川。

引申到UI設計中，規律且一致的形狀，會在視覺心理上更能體現，或飽滿、或自在的美感：

一張圖小結一下：

第3個例子：宣佈考試內容 - 層次感/關係性

下週要考試，如果我搬出下圖中的所有書，告訴你：這些就是考試的內容，複習吧！

你的內心一定不要太奔潰呦~

先別忙著哭。如果我再告訴你：最下面的幾摞，是同類備選書籍，選或不選都隨你；中間幾摞呢，是擴充套件性讀物，不作為考試核心考點；上面的幾本呢，是可以帶入考場開卷翻看的；而最上面的一本，才是考試要考的核心內容。

是不是開心了點呢？

還有更開心的呢！我拿出上面那邊告訴你：這一本中，只有每章節的第一頁，劃紅線的，才是這本書裡的重點考點，其他的僅作為了解就好。

此刻，是不是豁然開朗~~~~~

如果把全部書搬出來，說都是參考書，大量資訊而沒有重點的狀態，會讓人產生：迷茫、不安、壓力和苦惱。

劃分書籍的參考重要和次要程度，能夠讓人獲得：輕鬆、自信、效率、愉快、掌控感等美好的感受。

中國的傳統紋樣圖案，就很好的利用了這一原理，複雜的線條依照主次來疏密有致的排布，花為主體葉為輔助，展現出一個圖案的層次性；多而雜的葉子中，通過捲曲方向和疏密程度分出主要葉片和次要葉片，讓圖案雖然密集豐富，卻也簡潔易讀。

延伸到UI介面設計中，主要體現在層級關係的區分和表達上：

小結一下：

第4個例子：購物 - 精緻感/細節性

關於購物，讓我們來個真假大比拼吧~

當你想買個名牌包包，讓你嫌棄仿品，欣賞正品的原因會是什麼呢？

正品的感受：細節感人、喜歡、踏實、品質、尊重、榮耀、滿足感或成就感。

仿品的感受：粗糙、嫌棄、湊合糊弄、欺騙、輕視，低質量、憤怒感或失落感。

同樣，在繪畫藝術中，要擁有打動人的感染力，細節的精緻刻畫是不二法寶：

延伸到UI設計中，細節的講究和門道，也是打動人的關鍵。

小結一下：

第5個例子：紅酒與禮服 - 歸屬感/匹配性

假設，你的男神或女神要給你斟上一杯紅酒，你會端起什麼樣的容器呢？

懂品味的你，應該是這個選擇：

如果你用這樣的容器裝紅酒。。。

Excuse me？該不會，左邊是醬油，右邊是中藥吧。。。

再腦補一個場景：

如果馬上召開運動會，你的夥伴穿這樣的著裝出場，你會作何感想？

如果，不是運動會，是去參加一個高階晚宴呢？

禮服搭配運動場：奇怪、滑稽、彆扭、蠢笨、愚蠢、不適的違和感。

禮服搭配高階晚宴：優雅、品味、自信、踏實、安心，自然和諧的歸屬和契合感。

這就是“得體和適合”帶給我們的感受，最好的可能不是美，但最得體的，會美。

視覺傳達設計中，也蘊含著這個原理。比如無印良品的海報設計，無論色彩、質感、構圖、還是字型設計，海報極簡、自然、家居、強調舒適感的風格，就體現出品牌的禪意和自然極簡主義的氣質和調性。

延伸到UI設計中，色彩樣式的情緒和大眾認知含義，要符合產品本身的屬性或使用者習慣，安全和工具屬性極高的支付寶，藍色更能產生放心和冷靜的情緒，讓人潛意識中知道它作為金融是安全的，它作為工具是高效率的。

如果換上淘寶橙，有差強人意了，儘管淘寶色是品牌血脈：

小結一下：

OK，通過舉例，大家是不是對“設計來源於生活”，有更直觀的理解了呢~~

總結一下，這些來自生活中的，能夠產生美感的原理，分別是：

√ 空間/留白    √ 規律/秩序    √ 層次/關係    √ 精緻/細節    √ 歸屬/匹配

以上”“這些體現在UI或視覺設計上的原理，都不是隨主觀評價或個人喜好創造出來的，而是由生活中的 客觀現象和生活規律而產生 的。這也就是為什麼，在本文起始，會倡導說”UI設計是一門科學“。

對於科學，一句話的參考定義是：科學是具體的事物及其客觀規則。而UI設計恰恰就是 圍繞著“產品介面”這個具體事物、按照“使用者的行為與心理”規則而展開的一項創造性活動 。所以，在 UI的本質是科學 。

科學主要內容是具體的世界觀與具體的方法。希望大家能夠理解這種設計觀，並能夠將其方法合理的運用，合理的創造美。

接下來的幾篇文章中，我將從“圖形與介面空間留白、UI介面層級分析、字型排版、圖形圖片處理、介面配色”幾個方面，詳細來講解，如何運用以上原則，科學的分析和設計UI介面。

感謝喜歡設計的小夥伴們持續關注~

通過本文，你掌握“因好用而好看”的設計思想了嗎？可以試著分析一下你手上的UI設計，它現在是科學的麼？有哪些可以改善的地方呢？

歡迎留下你的思考或建議，與大家一起進步。