作為一名UI設計師，除了要具備分析並梳理產品需求的能力，視覺基礎力，更是會直接影響到該設計師水平的幾大點之一。那麼其實視覺基礎能力，是可以通過刻意練習，來進行提升的。很多設計師朋友盲目的對Dribbble跟Behance的上的優秀作品進行臨摹，缺乏思考，發現最後還是難以進步。在這裡，我對UI視覺表現層分別從幾個維度來進行了一下總結，分享一下這幾年來得到的一些經驗，希望能對剛入門的設計師朋友有所幫助。
01 . 頁面視覺構成幾大要素
在一個完整的頁面的視覺設計當中，我們可以把其幾個核心視覺點進行拆分，單獨羅列。比如在一系列頁面設計中，我們可以它理解為幾大核心點，如『版，質，形，色，字』
- 版 - 版和格柵，版式間距會直接影響到頁面的張力及空間感
- 質 - 頁面風格，肌理維度，整個產品視覺調性
- 形 - 大面積區域的形狀，控件尺寸比例，圖形形狀的統一性
- 色 - 顏色風格，頁面色相，彩度，明度整體風格統一性
- 字 - 字體的樣式，字體，字號，襯線，內容識別性
像這些核心元素，我們可以對其進行刻意練習，來提升綜合的視覺基礎能力，不過首先，我們需要對其理解並進行梳理。
02 . 何為版？
版，在界面設計當中，版式會直接影響到用戶對該頁面的理解能力，良好的信息傳達力離不開科學的組織布局。信息之間層級關係的羅列展示非常重要，恰當的佈局，能直接通過視覺力來暗喻信息之間的層級關係。作為頁面核心骨架，是我們最需要進行練習的內容點。
重點一：親密性
這裡我們可以通過一個很簡單的話術來表達，那就是「同類相近，異類相遠」，信息聯繫緊密的，間距相近，不同性質間距要遠。畢竟搞基才是真愛。
重點二：節奏性
節奏型指的就是在同一個頁面內容中，間距的樣式不要太多，另外間距儘量使用倍數，比如1X，2X，3X，4X。比如現需設計一個讓用戶感受到輕鬆愉悅的頁面，可以使用較大的柵格間距比例，以12為基準，比如間距一律使用12,24,36,48。如果是信息較為緊密的，則可以使用8的倍數，如8,16,24,32等當然。 ，這也不是絕對值，具體使用情況，還得根據實際情況跟業務屬性而定。
從手動量的尺寸來看，京東金融應用程序的間距是以4為單位進行倍增，但用的則是較大的間距，如24,28,32,36,40,44。而製作的Airbnb則是以12的單位進行縮放，如12,24,36,48,60的單位，不同的柵格比例傳遞的情感也是不一樣的。因此間距沒有絕對的設定值，而是根據業務進行適當調整。
重點三：黃金比例
黃金比例是在UI設計當中用的較多的一個比例，此比例通過了自然界各大數據的驗證，天衣無縫。在實際項目中，使用黃比例的作品，往往更具有美感，令人賞心悅目。
除了黃金比例，其實還有著白銀鉑金等比例，這類比例也是具有著較多的美感的相信很多同學不知道，這裡也發出來讓各位同學知曉下網址可自行百度：。黃金比例在線生成。
03 . 何為質？
質，是視覺語言組成的重要部分，頁面的風格特徵，肌理虛實都靠它來表達。產品的質地風格應當與產品的整體形象保持一致，是多個頁面統一風格的重要組成元素好的質感。表現，不僅能幫助用戶認識及記住產品特徵，更能讓產品迅速拉開與同類產品的區別，做到別具一格。這裡簡單給大家介紹幾種常見的風格類型。
樣式一：大卡片，輕投影式
這種風格在iOS11後更是變的普及了起來，因為微投影能在很好的拉開層級提升空間感的同時，還能讓頁面變的更為細膩。像蘋果的Appstore跟大量其它產品，都使用了這類較為不錯的樣式。不過要注意的是，漸變樣式不能太過於厚重，頁面留白要大。
樣式二：高純度漸變，彌散投影
在近兩年，漸變風又開始變的流行起來，不過跟以前陰影較為厚重的漸變相比，新的漸變樣式，變得更為扁平更為輕量化了起來。在Dribbble流行起漸變風之後，國內各大應用也開始使用流行起來，如淘寶與京東金融、優酷、餓了麼等主流應用開始紛紛效仿。同樣在漸變的配色方案中，不適合多類顏色同時漸變，漸變的兩個顏色在一個色系上進行微調即可。
樣式三：輕擬物
在經過扁平風的洗涮之後，擬物風仍保留了一席之地。目前輕擬物的視覺主流更多的是在扁平的基礎上，加些擬物的元素，在汽車終端、智能家居等物聯網系統尤為多見。但與傳統的擬物相比，現代的擬物風變的更為簡潔，主要層級信息變的更為突出。通過視覺明暗，來拉開不同信息的層級關係。
04 . 何為形？
形，決定著整個產品線的調性，能直接將產品所蘊含的情感文化通過視覺表現傳達給給用戶。無論是按鈕的圓角比例，還是圖標的統一性，都是形的重要組成部分。而在UI界面設計中圖形更多的體現在圖標及按鈕上，這裡可以嘗試這樣來提升形的統一感。
要素一：統一的icon風格
在圖標設計中，首先要把控好icon視覺語言的核心，以較為常見的線性圖標為例，其中就包括著 ：描邊線寬、圓角、斷點方式、點綴、顏色填充類型、圖標重心。像這些，都是需要進行統一規範化。如果你是剛入門的設計師，對圖標這塊不擅長，可以去圖標網站如iconfont上找相關圖標進行參考，再根據自己的想法進行繪製。這裡的繪製教程可以參考我之前的一期 ，UI中國搜索《圖標中的那些小技巧》即可找到。
要素二：統一的圖形元素
圖形也是一個尤為重要的元素，直接決定著一個企業的品牌形象。在界面設計中使用品牌圖形能讓用戶牢記品牌形象，讓產品快速搶佔市場，提高用戶比。如天貓、京東、QQ、網易雲等優秀產品,在這塊就運用的非常巧妙。天貓使用了大量貓頭的形象，而網易雲，則提取了唱片的元素，整個圖標風格，都使用了較為圓潤的造型。
05 . 何為色？
色，往往是人感官中留下的第一印象。想要合理的運用顏色，其實並不容易。其實在界面設計中，對於選擇配色方案，就好像比穿衣服一樣，顏色越多越花哨，整個檔次感覺越low。跟傳統的空間設計一樣，在大部分界面設計中，一般使用三種顏色就夠了，除非設計師擁有者非常高的配色駕馭能力，不其然整個頁面都會顯得較為花哨，影響信息傳遞。下面，我們可以使用兩個小技巧，來幫助你提升配色的能力。
技巧一：使用情緒板決定主色調
設計師往往在做界面設計時，都是感性的，往往難以支撐各樣的質疑。那麼通過場景關鍵詞，收集相應的圖片素材，使用情緒板來創建顏色，能更好幫助設計師完成對產品情緒的理解，同時提高工作效率流程，並且能讓界面設計更符合用戶的預期，完成產品目標需求。設計出來的方案也更具有說服力，能更好的幫助設計師拿到產品視覺設計的主導權。
技巧二：六三一原則
所謂的六三一原則就是在空間設計中，通常主色調佔60%，輔助色佔30，突出色佔10%。其實在界面設計中也是一樣的，設計稿中顏色不宜過多，不同色系最好不要超過三種。如果對色系不能很好理解的同學，我這邊給個辦法、就像當初學畫畫，眯著眼睛看即可看出其主要色調。但如果一個大型圖案的個別色塊很大的話，同樣得視為一種色。
06 . 何為字？
字，字體的形狀及樣式會直接影響到信息傳遞的速度。所以根據不同的場景，使用不同的字體樣式也是極為重要的。因此對UI設計師而言，理解字體也是個必不可缺的技能。這裡也給大家提供幾個小技巧，幫助大家提升對字體的理解能力。
技巧一：合理的使用字體樣式
在做界面設計時，永遠要把內容的可讀性放在首位，其次再去考慮其它樣式。根據不同的業務模式，選擇不同的字體，可以讓頁面更容易達到用戶的心理預期。如襯線字與無襯線字，所傳遞出來的感受也是有著較大區別的，一般而言，需要強調的文字或者小篇文字中，使用無襯線字會更合適一些。而在一些長篇文章中，使用襯線體則會更容易閱讀。如在網頁設計中，最小的11號字體使用襯線體宋體，會比非襯線體的微軟雅黑更具有優勢。
技巧二：合理的使用字重
在單色環境中，使用不同的字重能更好的加強內容之間的呼應對比。減少過渡色階層級的使用，能使核心內容更為聚焦，減輕閱讀負擔。因此在界面設計中，使用較粗的字重來作為標題是較為合適的。在iOS11中，這樣的設計手法尤為多見。下圖我使用了不同的字重，很明顯，左邊的圖會更利於信息閱讀一些，因為層級的主次得到了很好的區分。因此大家在設計界面中，不妨把一些主標題加粗試試，或許有一些意想不到的效果。
技巧三：合理的控制字距
字距跟行距會直接影響到大排文字的閱讀性。標題的字間距要緊密，正文大排文字的字間距要稀疏一些。另外正文的行間距應該設置為字體大小的120%到150%之間。大家可以多進行一下嘗試，直到信息較容易識別閱讀為止。
總結
以上幾個大點，構成了一套較為完整的視覺語言。我們可以通過對以上這幾個點進行刻意練習，來熟練掌握這些基本知識。另外除了通過臨摹一些優秀的視覺作品，拿現有產品進行Redesign或者視覺改版都是一個較為不錯的選擇。提升自己的視覺設計水平，也並非一朝一夕之事，靠的也是不斷地積累，不斷學習。
學習路上是很艱辛的，慶幸是生活在了一個知識共享的年代，通過前人的經驗，我們得到了快速的成長！喝水不忘挖井人，這篇文章希望能幫助到正在不斷探索的設計師朋友。
以上靈感素材來自愛集網
覺得沒看夠的話，請點擊下方“瞭解更多”，更多靈感圖片訪問愛集網，配色、排版、文案一應俱全
閱讀更多 小熊去哪了1582 的文章
