小莫

小編:作為一名UI設計師,除了分析并梳理產品需求的能力,視覺基礎力,更是會直接影響到該設計師Level的幾大點之一。視覺基礎能力,是可以通過刻意練習,來進行提升的。在這里,我從幾個維度來進行總結,希望能對剛入門的設計師朋友有所幫助。

 

?視覺5大要素?

在一個完整的頁面的視覺設計當中,我們可以它理解為幾大核心點,如「版、質、形、色、字」

  • -版式及柵格,版式間距會直接影響到頁面的張力及空間感
  • -頁面風格、肌理維度,整個產品視覺調性
  • -大面積區域的形狀,控件尺寸比例,icon形狀的統一性
  • -顏色風格,頁面色相、彩度、明度整體風格統一性
  • -字體的樣式,字體、字號、襯線,內容識別性

 

什么是版??

版,在界面設計當中,版式會直接影響到用戶對該頁面的理解能力,良好的信息傳達力離不開科學的組織布局。

1.親密性

可以通過一個很簡單的話術來表達,那就是「同類相近,異類相遠」,信息聯系緊密的,間距相近,不同性質間距要遠。

2.節奏性

一個頁面內容中,間距不要太多,盡量使用倍數,比如1x、2x、3x、4x。以12為基準,比如間距一律使用12、24、36、48。如果是信息較為緊密的,則可以使用8的倍數,如8、16、24、32等。當然,這也不是絕對值,具體使用情況,還得根據實際情況跟業務屬性而定。

▲?通過分析,京東金融app的間距是以4為單位進行倍增,但用的則是較大的間距,如24、28、32、36、40、44。

Airbnb則是以12的單位進行縮放,如12、24、36、48、60的單位,不同的柵格比例傳遞的情感也是不一樣的。因此間距沒有絕對的設定值,而是根據業務進行適當調整。

 

3.黃金比例

黃金比例是在UI設計當中用的較多的一個比例,此比例通過了自然界大數據的驗證在實際項目中,使用黃比例的作品,往往更具有美感,令人賞心悅目

除了黃金比例,其實還有著白銀鉑金等比例,這類比例也是具有著較多的美感的。相信很多同學不知道,這里也發出來讓各位同學知曉下。網址可自行百度:黃金比例在線生成。

 

?什么是質??

質,是頁面的風格特征,產品的風格應當與產品的整體形象保持一致,?好的質感表現,不僅幫用戶記住產品,更能讓產品拉開與同類產品的區別,做到別具一格。這里簡單給大家介紹幾種常見的風格類型。

 

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

這種風格在iOS11后更是變的普及了起來,因為微投影能在很好的拉開層級提升空間感的同時,還能讓頁面變的更為細膩。像Appstore跟大量產品,都使用了這類較為不錯的樣式。不過要注意的是,漸變樣式不能太過于厚重,頁面留白要大

 

樣式2:高純度漸變,彌散投影

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

樣式3:輕擬物

輕擬物的視覺主流更多的是在扁平的基礎上加些擬物的元素,在汽車終端、智能家居等物聯網系統尤為多見。

但與傳統的擬物相比,現代的擬物風變的更為簡潔,主要層級信息變的更為突出。通過視覺明暗,來拉開不同信息的層級關系。

 

什么是形??

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

1.圖標風格

在圖標設計中,首先要把控好icon視覺語言的核心,以較為常見的線性圖標為例,其中就包括著:描邊線寬、圓角、斷點方式、點綴、顏色填充類型、圖標重心。像這些,都是需要進行統一規范化。

如果你是剛入門的設計師,對圖標這塊不擅長,可以去圖標網站如iconfont上找相關圖標進行參考,再根據自己的想法進行繪制。

2.統一的圖形元素

圖形也是一個重要的元素,決定著一個企業的品牌形象。在界面設計中使用品牌圖形能讓用戶牢記品牌形象,讓產品快速搶占市場,提高用戶比。如天貓、京東、QQ、網易云等優秀產品,在這塊就運用的非常巧妙。

▲?網易云,提取了唱片的元素,整個圖標風格,都使用了較為圓潤的造型。

 

什么是色??

色,往往是人感官中留下的第一印象。合理的運用顏色,其實并不容易。其實在界面設計中,對于選擇配色方案,就好像比穿衣服一樣,顏色越多越花哨,整個檔次感覺越low。

跟傳統的空間設計一樣,在大部分界面設計中,一般使用三種顏色就夠了,除非設計師擁有者非常高的配色駕馭能力,不其然整個頁面都會顯得較為花哨,影響信息傳遞。下面,我們可以使用兩個小技巧,來幫助你提升配色的能力。

 

技巧一:使用情緒板決定主色調

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

 

技巧二:六三一原則

所謂的六三一原則就是在空間設計中,通常主色調占60%,輔助色占30%,突出色占10%。其實在界面設計中也是一樣的,設計稿中顏色不宜過多,不同色系最好不要超過三種。

如果對色系不能很好理解的同學,我這邊給個辦法,就像當初學畫畫,瞇著眼睛看即可看出其主要色調。但如果一個大型圖案的個別色塊很大的話,同樣得視為一種色。

何為字??

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

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

界面設計時,永遠要把內容的可讀性放在首位,其次再去考慮其它樣式。根據不同的業務模式,選擇不同的字體,可以讓頁面更容易達到用戶的心理預期。如襯線字與無襯線字,傳遞出來的感受是有著較大區別的,一般而言,需要強調的文字或者小篇文字中,使用無襯線字會更合適一些。而在一些長篇文章中,使用襯線體則會更容易閱讀。如在網頁設計中,最小的11號字體使用襯線體宋體,會比非襯線體的微軟雅黑更具有優勢。

技巧2:合理的使用字重

在單色環境中,使用不同的字重能更好的加強內容之間的呼應對比。減少過渡色階層級的使用,能使核心內容更為聚焦,減輕閱讀負擔。因此在界面設計中,使用較粗的字重來作為標題是較為合適的。在iOS11中,這樣的設計手法尤為多見。

▲?上圖很明顯,左邊的圖會更利于信息閱讀,因為層級的主次得到了很好的區分。

因此大家在設計界面中,不妨把一些主標題加粗試試,或許有一些意想不到的效果。

 

技巧3:合理的控制字距

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

 

總結?

以上幾個大點,構成了一套較為完整的視覺語言。我們可以通過對以上這幾個點進行刻意練習,來熟練掌握這些基本知識。另外除了通過臨摹一些優秀的視覺作品,拿現有產品進行Redesign或者視覺改版都是一個較為不錯的選擇。提升自己的視覺設計水平,也并非一朝一夕之事,靠的也是不斷地積累,不斷學習。

–END–
原文地址:我們的設計日記(公眾號)
作者:阿坤

轉載請注明:學UI網 » 從什么時候開始,你覺得自己設計沒進步了?

登錄收藏
 
你可能喜歡的:
如何光明正大的抄襲如何光明正大的抄襲
從C端到B端,我的產品設計之路從C端到B端,我的產品設計之路
學UI設計必須掌握的知識體系和職業規劃學UI設計必須掌握的知識體系和職業規劃
如何以自傳形式進行職業規劃?如何以自傳形式進行職業規劃?
利用增長思維,打造個人增長體系利用增長思維,打造個人增長體系
復雜需求的加減設計法復雜需求的加減設計法
當你設計時,你應該思考些什么當你設計時,你應該思考些什么
十二的產品體驗日記-01期十二的產品體驗日記-01期
設計師的自我管理心得設計師的自我管理心得
互聯網賬號注銷互聯網賬號注銷
?
陕西快乐10分