大家都知道，所謂UI設計，其實也就是user interface design，即用戶界面設計。這個界面可以是手機界面，網站界面，軟件界面，智能設備界面等一切人機交互可視化媒介。
那簡單來說，UI設計師的職責就是設計供人機交互使用的圖形化用戶界面，那這些界面其實也就是一張一張的視覺頁面圖。
那今天要說的，其實也就是這些UI視覺頁面構成的5大要素。
那UI視覺頁面構成的五大要素是什麼呢？
可以用五個字概括分別是：版、質、形、色、字
那我們一個一個來看。
/ 1 /
版
版，其實就是頁面的版式和格柵，頁面中版式的間距會直接影響到頁面的張力和空間感，也會影響到用戶對該頁面的理解能力，科學的頁面佈局能直接通過視覺來傳達信息之間的層級關係，也是頁面的核心骨架，是我們需要進行練習的重要內容點。
那具體版式運用存在三個重點，分別是親密性，節奏性和黃金比例。
我們逐個結合案例來分析。
首先是版式的親密性
從以上兩張圖片上可以清晰的看見版式間親密性的運用，我們可以用一句很簡單的話來表達，就是“同類相近，異類相遠”，信息聯繫緊密的，間距近，不同性質的內容間距遠。這樣才讓用戶清晰快速的理解頁面內容，和邏輯。
其次是節奏性
節奏性指的是在同一個頁面內容中，間距的樣式不要太多，另外間距儘量使用倍數，比如10的倍數，8的倍數或是12的倍數。當然這也不是絕對值，可以根據實際情況來設計，但始終要遵循統一的規範和設定。
從以上兩張圖片可以看見，用有規律有節奏性的進行元素之間的間距佈局，其可讀性和美觀性明顯大於雜亂無章的間距佈局。
第三是黃金比例
黃金比例在UI的設計中是運用的較多的一個比例，當然在傳統的繪畫也好，傳統平面設計也好也都有比較廣泛的運用，在實際項目中，使用黃金比例的作品往往讓設計更具有平衡感和美感，令人賞心悅目。
這張圖是國家地理網站頁面的一個截圖，就是採用了黃金分割的原理對網站頁面進行了佈局。
/ 2 /
質
質，其實指的就是頁面風格和頁面的肌理維度，也是視覺語言的重要組成部分。一個產品的質感風格應該與產品的整體形象保持一致，具有良好的產品風格不僅能幫助用戶認識和記住產品特徵，更能讓產品在同類產品中脫引而出。
這裡簡單給大家介紹幾種常見的風格類型。
第一種，大卡片，輕投影式
這種風格在ios11之後就流行了起來，因為輕投影可以很好的拉開頁面層級並提升頁面空間感，還能讓頁面的質感變得更加細膩。但是這種風格需要注意的就是投影一定不能過於厚重，且頁面的留白空間要相對較大，過於厚重的投影會導致頁面變髒，變重。
這種風格的典型運用就是現在ios11系統的appstore頁面。
樣式二：高純度漸變和彌散陰影
近兩年，漸變風又開始變得流行起來，但是和以往不同的是，輕量化的漸變形式取代了從前厚重的漸變形式。而漸變的配色也偏向於單色不同深淺的顏色進行漸變。進一步提升了頁面的質感和空間感。
具體像淘寶、餓了麼都是非常典型的設計案例
樣式三:輕擬物
經過扁平風的洗刷之後，擬物風仍然保留了一席之地。但是不同於以往超寫實的擬物風格，目前的擬物風更多實在扁平的基礎之上增加一些擬物的元素，風格較之前更為簡潔，這種風格的運用在汽車終端或是智能家居系統中尤為多見。
/ 3 /
形
形指的是頁面中大面積區域的形狀，空間形態和元素比例。形，能直接將產品蘊含的情感文化通過視覺傳達給用戶。在UI的界面設計中，圖形更多的體現在圖標及按鈕上。
形的設計要素有兩個方面：
1）統一的icon風格
在UI的圖形設計中，icon的設計佔很大的比重，而icon的設計重點在於統一和規範化。
無論你設計的是什麼風格的icon，都必須遵從這一點。我們可以看一下這張示例圖片。
左圖用了同樣的設計元素和設計規範設計的一整套icon，其整潔和美觀程度是明顯大於右圖設計風格不統一的icon的。
2）統一的圖形元素
圖形也是一個很重要的元素，它直接決定著一個企業的品牌形象。
在界面界面中使用品牌圖形能讓用戶牢記品牌形象，讓產品快速搶佔市場，提高用戶比。
像是網易雲音樂的唱片圖形，天貓商城的貓頭圖形等，就是很優秀的設計案例。
讓產品具有很強的品牌感和辨識度。
/ 4 /
色
色具體是指產品配色的色相、彩度、明度和整體的風格
顏色往往是產品給人的感官留下的第一印象。想要合理的運用顏色並不簡單，對於選擇配色方案，我們遵從的配色原則是界面設計中，一般使用的不同色系的顏色不超過三種，不然頁面容易顯得太花哨，也會影響產品信息的傳遞。
在這邊我給大家介紹的具體配色原則是“六三一配色原則”
也就是主色調佔頁面面積的60%，輔助色佔30%，突出色佔10%。這是一個通用的設計配色比例。具體的大家看下圖
一副是室內設計的配色案例，一副是宜家網站網頁的配色案例，都遵從了這個631原則。在視覺上得到了不錯的效果。
/ 5 /
字
字在頁面構成中，具體指的是字體的樣式和內容的識別性。
字的形狀和樣式會直接影響到信息傳遞的速度。所以根據不同的場景，使用不同的字體樣式也是極為重要的，因此對於ui設計師而言，理解字體也是個不可或缺的技能。
這裡也給大家提供幾個小技巧，幫助大家提升對字體的理解能力。
技巧一：合理使用字體樣式
我們在做界面設計時，應該永遠把內容的可讀性放在首位，其次再去考慮它的樣式，根據不同的產品需要選擇不同的字體。
比如字體一般分為襯線字體和非襯線字體，它們所傳遞出來的感受也有著較大的區別，一般而言，需要強調的文字或是小篇文字中，使用無襯線字會更合適一些。而在一些長篇文章中，使用襯線體則會更容易閱讀。就像在網頁設計中，最小的11號字體，使用襯線體宋體就會比非襯線體的微軟雅黑更易於辨認和傳達信息。
技巧二：合理的使用字重
在單色的環境中，使用不同的字重可以更好的加強內容之間的呼應和對比，減輕閱讀負擔。這一點在ios系統的設計中尤為明顯。如下圖
我們想象一下，即使這張圖去掉彩色變成了一張黑白的界面圖，我們都可以從字重中迅速的分清頁面各部分的層級關係，準確的向用戶傳達這個頁面所要傳達的信息和內容。
技巧三：合理控制字距
字距和行距會直接影響到大排文字的閱讀性。標題的字距要緊密，而正文或是整段文字的字間距要稀疏一些。另外正文的行間距應該設置為字體大小的120%-150%之間。這一點，大家可以在設計的過程中多嘗試，尋找適合用戶閱讀的比例。
那以上幾個大點構成了一套較為完整的視覺語言。我們可以通過對以上這幾個點進行針對性練習，來熟練掌握這些基本知識。另外除了通過臨摹一些優秀的視覺作品，拿現有產品進行Redesign或者視覺改版都是一個較為不錯的選擇。提升自己的視覺設計水平，也並非一朝一夕之事，靠的也是不斷地積累，不斷學習。
閱讀更多 匯眾教育 的文章
