設計新手提高UI美學設計的7種實用方法


你曾經(jīng)是否有過被別人說設計無細節(jié),無品質(zhì)感等這樣的經(jīng)歷,其實每個人都會有這個過程,只是或長或短的時間而已。

設計細節(jié)不只體現(xiàn)一個設計師的能力水平,還體現(xiàn)他對產(chǎn)品的理解,對生活的認知。今天的思路能讓你在做設計時候,多注意細節(jié),提高美感!

今日分享大綱:

1,使用圖標 / 圖形

2,融入3D元素

3,使用高清圖片

4,運用網(wǎng)格

5,注意版式

6,一致性

7,注意顏色


1.使用圖標

添加圖標或者圖形可以使界面中元素的功能更加清晰直觀,同時易于全球化設計和用戶對功能的快速識別記憶。

如上圖案例,左側添加圖標,右側純文字設計。左側美觀度提升,同時更加利于用戶去使用與記憶功能。

IBM設計圖,上下可對比,第一張圖,去掉圖形目前看著也能用,第二張圖增加圖形,畫面顯得飽滿一些,功能都通過圖標示意出來,直觀易觸達。

當然需要注意的點,切勿過度使用,造成畫面花哨。


2.融入3D元素

3D設計不用多說,是當下比較火熱的設計手法,它在平面包裝、電商領域、動態(tài)視頻、UI設計等涉及范圍廣,設計新穎,刺激大眾感官。

 韓國UI

騰訊視頻

騰訊視頻將異常狀態(tài)3D化設計展示


3.使用高清圖片

圖片在設計中起著重要作用,包括我們概念方案中的情緒圖,或者在產(chǎn)品設計中使用圖片,都可以更加生動體現(xiàn)產(chǎn)品性格特征。

圖片使用3大要點:有意境,簡單干凈,高清大圖

左側app:29cm,右側app:Vsco

來源:NIO Lifea

電商設計領域更是廣泛攝影圖

給大家推薦高清攝影圖網(wǎng)站:網(wǎng)站不在于多而在于精

1,https://unsplash.com/

2,https://www.pexels.com/


4.運用網(wǎng)格

網(wǎng)格可以讓界面更加有層次與節(jié)奏,一致性更強。網(wǎng)格已經(jīng)在平面雜志設計中多年使用歷史,同樣在UI設計中運用它,一樣可以做出優(yōu)質(zhì)設計。

雜志化產(chǎn)品視覺特征打造已是趨勢,如果還不熟悉網(wǎng)格的運用,可以搜索下我之前寫的一些關于網(wǎng)格的文章。


5.注意版式

這里說的版式也包括字體類型,版式中需要注意文字排版間距,字體行間距,對比度,層次結構,這些都是導致UI細節(jié)不完善的原因之一,也是我們最容易掌握的。

左側設計中,輸入框里面信息基本看不清,層級不明顯;右側層次凸顯同時,信息能清晰識別到。

左側排版無層級,右側版式更加直觀清晰,對比度明顯。


6.一致性

一致性是一個老生常談話題,但它確實是保證產(chǎn)品系統(tǒng)性,品牌性不可獲取的條件,比如系統(tǒng)中圖標樣式一致、排版網(wǎng)格一致、插畫元素一致、符號一致等。

下面展示一款韓國APP在這方面做得具有代表性:

實際線上的產(chǎn)品在一致性方面做得比較到位,一致性的運用,能使產(chǎn)品更加風格化,記憶特征明顯,區(qū)分競品,美學體驗到達極致。


7.注意顏色

界面設計中,色彩是一切的靈魂,因為色彩,可以讓我們對該品牌記憶深刻。


8.感悟

文中今天說了7種比較實用,同時大家易于掌握的方法與思路,幫助大家開竅。當然也需要靈活運用,每次在做界面設計的注意下這些細節(jié),多思考,堅持下來,成為一個能做出好設計的設計師。

除了上面7種實用方法,還有其他類型的方法,比如微交互、情感化插圖、UI品牌系統(tǒng)化、定義統(tǒng)一的具有DNA特征的品牌、功能場景感塑造。對于基礎薄弱的伙伴可以先從上面7種入手。


每天更新,
全站高品質(zhì)素材免費下載!