網頁設計 ? 視覺設計 ? 如何提升UI視覺設計水平?入門設計師必看

如何提升UI視覺設計水平?入門設計師必看

發表于: 視覺設計. 評論
Sponsor

很多剛入行或培訓班出來的UI設計師,在視覺設計能力表演欠佳,設計達人增加推薦過大家使用30days或100days的練習,這是非常好的進階途徑,然后在練習的時候我們需要多思考一些與UI視覺設計有關的知識,今天我們將從「版,質,形,色,字」這5大視覺構成要素,這只是設計基本知識但卻是很重要,對提升視覺設計水平有很重要的作用,下面我們一起來學習。

如何提升UI視覺設計能力?入門設計師必看

頁面視覺構成幾大要素

在一個完整的頁面的視覺設計當中,我們可以把其幾個核心視覺點進行分解,單獨羅列。某些在多個頁面設計中,我們可以理解為幾大核心點,如『版,質,形,色,字』

1. 版 – 版式及厚度,版式間距會直接影響到頁面的張力及空間感;

2. 質 – 頁面風格,肌理維度,整個產品視覺調性;

3. 形 – 大面積區域的形狀,控件尺寸比例,icon形狀的統一性;

4. 色 – 顏色風格,頁面色相,彩度,明度整體風格統一性;

5. 字 – 字體的樣式,字體,字號,襯線,內容識別性。

像這些核心元素,我們可以進行進行刻意練習,來提升綜合的視覺基礎能力,不過首要,我們需要理解并進行梳理。

何為版?

版,在界面設計當中,版式會直接影響到用戶該頁面的理解能力,良好的信息傳達力離不開科學的組織布局。信息之間層級關系的羅列展示非常重要,適當的布局,能展示不同信息的差異化,提升用戶理解閱讀效率,而且視覺上也非常美觀大方。

因子一:親密性

這里我們可以通過一個很簡單的話術來表達,那就是『同類相近,異類相遠』,物以類聚,人以群分。信息聯系緊密的,間距相近,信息維度差異大的,間距要遠,這樣不但視覺上錯落有致,而且對于用戶理解信息,也是非常有效快速的。

如何提升UI視覺設計能力?入門設計師必看

因子二:節奏性

節奏性指的就是在同一個頁面內容中,間距呈有規則的變化。所以這也要求這間距的樣式不要太多,盡量使用倍數,比如1x、2x、3x、4x。比如現需設計一個讓用戶感受到輕松愉悅的頁面,可以使用較大的柵格間距比例,以12為基準,比如間距一律使用12、24、36、48。如果是信息較為緊密的,則可以使用8的倍數,如8、16、24、32等。當然,這也不是絕對值,具體使用情況,還得根據實際情況跟業務場景而定。

如何提升UI視覺設計能力?入門設計師必看

從手動量的尺寸來看,京東金融app的間距是以4為單位進行倍增,但用的則是較大的間距,如24、28、32、36、40、44。而Airbnb則是以12的單位進行縮放,如12、24、36、48、60的單位,不同的柵格比例,傳遞出來的心理暗示,也是不一樣的。所以間距通常沒有絕對的設定值,而是根據業務進行適當調整,有規律的進行變化組合。

因子三:頁面結構比例

關于頁面的節奏比例,大家可以多研究一下黃金比例。黃金比例是在界面設計當中用的較多的一個比例,此比例通過了自然界大數據的驗證。在實際項目中,使用黃比例的作品,往往更具有美感,令人賞心悅目。

如何提升UI視覺設計能力?入門設計師必看

除了黃金比例,其實還有著白銀鉑金等比例,這類比例也是具有著較多的美感的。相信很多同學不知道,這里也發出來讓各位同學知曉下。推薦使用黃金比例在線生成工具,用它可以計算出不同的黃金比例,很好用哦。

如何提升UI視覺設計能力?入門設計師必看

何為質?

質,是視覺語言組成的重要部分,頁面的風格特征,肌理虛實都靠它來表達。產品的質地風格應當與產品的整體形象保持一致,是多個頁面統一風格的重要組成元素。好的質感表現,不僅能幫助用戶認識及記住產品特征,更能讓產品迅速拉開與同類產品的區別,做到別具一格。這里簡單給大家介紹幾種常見的風格類型。

樣式一:大卡片、輕投影式

這種風格在iOS11后更是變的普及了起來,因為微投影能在很好的拉開層級提升空間感的同時,還能讓頁面變的更為細膩。像蘋果的Appstore跟大量其它產品,都使用了這類較為不錯的樣式。不過要注意的是,漸變樣式不能太過于厚重,頁面留白要大。另外卡片圓角及投影參數,之前有給小伙伴們提供過的,卡片圓角半徑≈卡片寬度的0.04%,陰影顏色=按鈕顏色的 Alpha50%,x=0,y=按鈕高度的20%,模糊值=按鈕高度的50%,擴展=按鈕高度的 -15%,高級又簡單,完美!

如何提升UI視覺設計能力?入門設計師必看

如何提升UI視覺設計能力?入門設計師必看

樣式二:高純度漸變

在近兩年,漸變風又開始變的流行起來,不過跟以前陰影較為厚重的漸變相比,新的漸變樣式,變得更為扁平更為輕量化了起來。在Dribbble流行起漸變風之后,國內各大應用也開始使用流行起來,如淘寶與京東金融、優酷、餓了么等主流應用開始紛紛效仿。同樣在漸變的配色方案中,不適合多類顏色同時漸變,漸變的兩個顏色在一個色系上進行微調即可。

如何提升UI視覺設計能力?入門設計師必看

優秀案例by?Ervin Halebic

式三:輕擬物

在經過扁平風的洗涮之后,擬物風仍保留了一席之地。目前輕擬物的視覺主流更多的是在扁平的基礎上,加些擬物的元素,在汽車終端、智能家居等物聯網系統尤為多見。但與傳統的擬物相比,現代的擬物風變的更為簡潔,主要層級信息變的更為突出

如何提升UI視覺設計能力?入門設計師必看

何為形

形,決定著整個產品線的調性,能直接將產品所蘊含的情感文化通過視覺表現傳達給給用戶。無論是按鈕的圓角比例,還是圖標的統一性,都是形的重要組成部分。而在UI界面設計中圖形更多的體現在圖標和按鈕上,這里可以嘗試這樣來提升形的統一感

要素一:統一的icon風格

在圖標設計中,首先要把控好圖標視覺語言的核心,以多個常見的線性圖標為例,其中就包括著:描邊線寬,圓角,斷點方式,點綴,顏色填充類型,圖標重心。像這些,都是需要進行統一規范化。如果你是剛入門的設計師,對圖標這塊不擅長,可以去圖標網站如iconfont上找相關圖標進行參考,再根據自己的想法進行替換,但基礎的風格樣式,都需要保持統一。

擴展閱讀《圖標設計師分享的ICON設計指南

如何提升UI視覺設計能力?入門設計師必看

要素二:統一的圖形元素

在界面設計中使用品牌圖形可以使用戶快速記錄品牌形象,讓產品快速搶占市場,提高用戶比。例如天貓,京東,QQ,網易云等優秀產品,在這塊就運用的非常完美。天貓使用替換貓頭的形象,而網易云,則提取了唱片的元素,整個圖標風格,都使用了多個圓潤的造型。

何為色

色,通常是人感官中留下的第一印象。想要合理的運用顏色,其實并不容易。其實在界面設計中,對于選擇配色方案,就好像比穿衣服一樣,顏色越多越花哨,跟傳統的空間設計一樣,在大部分界面設計中,一般使用幾種顏色就夠了,除非設計師擁有者非常高的配色駕馭能力,不其然整個頁面都會出現大量花哨,影響信息傳遞。下面,我們可以使用兩個小技巧,來幫助您提升配色的能力。

技巧一:

使用情緒板決定主色調。設計師通過在做界面設計時,都是感性的,常常難以支撐各樣的質疑。那么通過場景關鍵字,收集相應的圖片素材,使用情緒板來創造顏色,能更好地幫助設計師完成對產品情緒的理解,同時提高工作效率流程,并實現界面設計更符合用戶的預期,完成產品目標需求。設計出來的方案也更具有說服力,能更好的幫助設計師拿到產品視覺設計的替代權。

如何提升UI視覺設計能力?入門設計師必看

技巧二:六三一原則

所謂的六三一原則就是在空間設計中,通常主色調占60%,輔助色占30,突出色占10%。其實在界面設計中也是一樣的,設計稿中顏色不宜過多,不同色系最好不要超過三種。如果對色系不能很好理解的同學,我這邊給個辦法、就像當初學畫畫,瞇著眼睛看即可看出其主要色調。但如果一個大型圖案的個別色塊很大的話,同樣得視為一種色

如何提升UI視覺設計能力?入門設計師必看

何為字

字,字體的形狀及樣式會直接影響到信息傳遞的速度。所以根據不同的場景,使用不同的字體樣式也是極為重要的。因此對UI設計師而言,理解字體也是個必不可缺的技能。這里也給大家提供幾個小技巧,幫助大家提升對字體的理解能力。

技巧一:合理的使用字體樣式

在做界面設計時,永遠要把內容的適當性放在首位,其次再去考慮其他樣式。根據不同的業務模式,選擇不同的字體,可以讓頁面更容易達到用戶的心理預期。如襯線字與無襯線字,所傳遞出來的感覺也是存在截然不同的,一般而言,需要呈現的文字或小篇章文字中,使用無襯線字會更合適一些。而在一些長篇文章中,如在網頁設計中,最小的11號字體使用襯線體宋體,會比非襯線體的微軟雅黑更具有優勢。

如何提升UI視覺設計能力?入門設計師必看

技巧二:合理的使用字重

在單色環境中,使用不同的字重能更好的加強內容之間的呼應對比。減少過渡色階層級的使用,能使核心內容更為聚焦,減輕閱讀負擔。因此在界面設計中,使用較粗的字重來作為標題是較為合適的。在iOS11中,這樣的設計手法尤為多見。下圖我使用了不同的字重,很明顯,左邊的圖會更利于信息閱讀一些,因為層級的主次得到了很好的區分。因此大家在設計界面中,不妨把一些主標題加粗試試,或許有一些意想不到的效果。

如何提升UI視覺設計能力?入門設計師必看

技巧三:合理的控制字距及行高

標題的字距要緊密,正文大排字的字間距要稀疏一些。其他正文的行間距應該設置為字體大小的120%到150%之間。大家可以多進行一下嘗試,直到信息較容易識別閱讀為止。

如何提升UI視覺設計能力?入門設計師必看

總結

以上幾個大點,構成了一套較為完整的視覺語言。我們可以通過對以上這幾個點進行刻意練習,來熟練掌握這些基本知識。另外除了通過臨摹一些優秀的視覺作品,拿現有產品進行Redesign或者視覺改版都是一個較為不錯的選擇。提升自己的視覺設計水平,也并非一朝一夕之事,靠的也是不斷地積累,不斷學習。學習路上是很艱辛的,慶幸是生活在了一個知識共享的年代,通過前人的經驗,我們得到了快速的成長!喝水不忘挖井人,寫下這篇文章,希望也能幫助到正在不斷探索的設計師朋友。

作者:小學鴨
作者公眾號:UX小學

推薦:查看最受歡迎的 301 個設計網站 → http://hao.shejidaren.com
交流:結交更多有才華的設計師?請加入UI設計QQ群,與50000名設計師交流設計。
贊助商鏈接
贊助商鏈接
設計達人微信交流社區:shejidaren888
喜歡這篇文章嗎?歡迎分享到你的微博、QQ群,并關注我們的微博,謝謝支持。
版權:除非注明,本站文章均為原創文章,轉載請聯系我們授權,否則禁止轉載。

{ 發表評論 }