IT培訓-高端面授IT培訓機構
          云和教育:云和數據集團高端IT職業教育品牌
          • 國家級
            全民數字素養與技能培訓基地
          • 河南省
            第一批產教融合型企業建設培育單位
          • 鄭州市
            數字技能人才(碼農)培養評價聯盟

          關于UI設計的這10個小技巧,你可能還不知道!

          • 發布時間:
            2019-08-08
          • 版權所有:
            云和教育
          • 分享:

          UI作為現在互聯網設計的熱門行業,飽受大家關注。今天這篇文章就和大家分享一些UI設計小技巧,這些小技巧簡單易懂卻非常實用,希望能給大家帶來幫助。

          01、表現層級關系

          配圖1 UI設計的這10個小技巧,.jpg

          表現層級關系時,不是只用顏色,使用顏色和字重來表現也有不同的效果。

          我們在對界面進行板式設計的時候,最常犯的一個錯誤就是過于依賴字體大小來控制層次結構。一個界面設計的好不好,最關鍵的點就是是否能夠清晰明了,讓人一看就能知道哪些是重要信息。

          大小只是我們突出信息的一種方法,我們還可以把它加粗和加深顏色來讓他更突出。顏色上來看,我們一般有三個層次,標題最深,正文第二,其他輔助字體標識最淺。

          02、不要在彩色背景上用灰色文字

          配圖2 UI設計的這10個小技巧,.jpg

          灰色是不帶有任何色彩傾向的顏色,在彩色背景上運用會顯的很難看,也會顯得非常業余。在彩色背景上使用文字一般可以使用,調整文字透明度的方式改變顏色,將白色的透明度降低,把背景的顏色透出來一些,效果比直接用灰色文字要好很多。

          03、無邊框設計

          配圖3 UI設計的這10個小技巧,.jpg

          當我們需要分隔兩個元素的時候,用過度的邊框會讓頁面變得復雜,使用更少的邊框可以增加設計界面的透氣感,也是我們常說的呼吸感。

          在分隔元素上也有一些竅門,比如使用陰影,使用陰影可以在視覺上分隔兩個元素,柔和的陰影也不會影響注意力。或者使用不同的底色也可以達到很好的效果。還有將不同元素的間距加大,可以讓人在視覺上感覺這兩個元素不是一類。

          04、注意留白

          配圖4 UI設計的這10個小技巧,.jpg

          好的設計,是在最少的元素下還能第一時間突出重點信息。極簡是種趨勢,你要減少不必要的元素,或者簡化元素。

          不要想著把畫面撐滿就是好的設計,有時候,適當的留白,給用戶呼吸的空間更重要。

          05、文案使用

          配圖5 UI設計的這10個小技巧,.jpg

          如果經常用第一種方式給客戶看稿件,那么你很難通過。做方案時,文案符合標題或者產品主旨才行。

          其次就是上下間距一般是20-28,一般用24就夠。千萬不要全部放無關的文案,很拉低你的設計水準。

          06、閱讀習慣

          配圖6 UI設計的這10個小技巧,.jpg

          人的正常習慣閱讀順序是從上而下,從左到右,所以在做某些需求的時候,需要考慮閱讀習慣這個概念,要讓用戶最快的時間獲取到文字信息。

          07、統一間距

          配圖7 UI設計的這10個小技巧,.jpg

          間距的統一性,是排版中時刻要注意的。等距等比是保證界面干凈整齊的一個關鍵要素切記,要么處處一致,要么全都不一致。

          08、統一色調

          配圖8 UI設計的這10個小技巧,.jpg

          顏色的合理運用,是至關重要的。一個APP或者一個界面盡量保證一個主色調,一個輔色調即可,

          不要出現干擾或者與主色調無關的顏色,這樣會導致用戶質疑你到底是不是一款產品。

          09、鏈接體驗需改善

          配圖9 UI設計的這10個小技巧,.jpg

          網頁中文章里的關鍵字通常都標有下劃線,提示用戶這個文字是可以點擊的,但是可點擊區域不會超過字符的寬、高范圍。設計類似這種帶有超鏈接的可點擊區域的時候,都可以通過一些小技巧來提高可用性,比如:增加間隔,有些情況下甚至可以把鏈接轉換為塊元素。

          10、恰當的使用光影效果

          配圖10 UI設計的這10個小技巧,.jpg

          目前蘋果的設計是非常受大家的歡迎,我們無非看到有個很有個性的效果,那就是他們的手機,ios產品都有一個光影的效果。讓我們看起來更加逼真,更加實際。很有立體感,所以,當我們設計的元素比較少的時候,不妨加入一些光影的效果,有助于我們的設計更加立體。

          UI設計有許多的小技巧,這些技巧可以讓我們離一個優秀的UI設計師越來越近。同時,別忘了多看、多練習哦~