旗下產(chǎn)業(yè): A產(chǎn)業(yè)/?A實習(xí)/?A計劃
全國統(tǒng)一咨詢熱線:010-5367 2995
首頁 > 熱門文章 > UI設(shè)計 > 提升UI設(shè)計效果的方法

提升UI設(shè)計效果的方法

時間:2020-08-05來源:m.lb577.com點擊量:作者:Sissi
時間:2020-08-05點擊量:作者:Sissi



  在創(chuàng)建漂亮而高效的UI設(shè)計的時候,你需要花費不少的時間來打磨細(xì)節(jié),并且在此過程中進行不斷的調(diào)整,讓你的客戶、用戶以及你自己感到滿足。很多小技巧能夠恰到好處地提升界面的設(shè)計視覺效果、用戶體驗。今天AAA教育郭老師就針對提升UI設(shè)計效果的方法進行簡單的說明。
 

  在創(chuàng)建漂亮而高效的 UI 的時候,你需要花費不少的時間來打磨細(xì)節(jié),并且在此過程中進行不斷的調(diào)整,讓你的客戶、用戶以及你自己感到滿足。
 

  我在做設(shè)計的過程中,發(fā)掘了不少實用的、有效的細(xì)節(jié)調(diào)整的技巧,可以快速地將整個設(shè)計稿的視覺效果提升一個檔次。
 

  在這篇提升UI設(shè)計效果的方法文章當(dāng)中, 我將這些技巧梳理了出來,希望能夠給你一些幫助。
 

  1.讓元素看起來更清晰

提升UI設(shè)計效果的方法
 

  其實并不復(fù)雜,就是在通常不會用陰影的元素邊緣增加「多個投影」或者使用非常微妙的邊框(比陰影要稍微暗一點),可以讓這個元素看起來更加清晰,并且避免了彌散投影帶來的那種拖泥帶水的感覺。
 

  2.只使用一個字體族做設(shè)計

提升UI設(shè)計效果的方法
 

  其實并不復(fù)雜,就是在通常不會用陰影的元素邊緣增加「多個投影」或者使用非常微雖然使用字體組合可以創(chuàng)造視覺風(fēng)格和樣式上的對比,但是實際上僅用一個字體族所制作的效果是完全沒問題的妙的邊框(比陰影要稍微暗一點),可以讓這個元素看起來更加清晰,并且避免了彌散投影帶來的那種拖泥帶水的感覺。
 

  3.長篇福文本最好在20pt浮動

提升UI設(shè)計效果的方法
 

  對于長篇幅的文本內(nèi)容,項目說明以及需要用戶閱讀一段時間的內(nèi)容,最好在正文當(dāng)中,采用 20 pt 的文本參數(shù)。
 

  當(dāng)然,考慮到使用場景、字體本身的樣式差異,20pt 這一參數(shù)并非是定死的,而是可以根據(jù)實際效果進行靈活調(diào)整。在過去的10年間,依然有很多網(wǎng)站遵循傳統(tǒng)采用 18pt 的字號,閱讀體驗相當(dāng)糟糕。
 

  4.提供可選的新用戶引導(dǎo)

提升UI設(shè)計效果的方法
 

  在用戶首次安裝 APP 或進入網(wǎng)站的時候,通常是會提供給用戶以一個新用戶教程以引導(dǎo)用戶熟悉產(chǎn)品和交互。
 

  但是!并不是每個用戶都有看完教程的必要,在界面中提供「跳過」選項,讓用戶擁有選擇的權(quán)利,同時,這個「跳過」按鈕盡量在界面的底部,畢竟在這個大屏當(dāng)?shù)赖臅r代,手指最便捷的交互區(qū)域主要集中在屏幕底部。
 

  5.為陰影統(tǒng)一光源

提升UI設(shè)計效果的方法
 

  這可以算是一個統(tǒng)一體驗的進階技巧了,當(dāng) UI 界面元素的光源不統(tǒng)一的時候,可能會有一部分用戶能夠感知到并覺得奇怪。但是如果光源統(tǒng)一,能夠給 APP 的體驗帶來強烈的一致感。
 

  6.用疊加圖層改善對比度

提升UI設(shè)計效果的方法
 

  文本和背景之間的對比度并不一定理想,這個時候你可以額外增加一個色彩疊加層,不過這個疊加圖層盡量不要使用純色,而是要用一定的漸變(從下往上或者從上往下)來變化,一方面優(yōu)化了元素之間的對比度,還能確保自然舒適。
 

  7.克制的使用居中對齊文本

提升UI設(shè)計效果的方法
 

  居中對齊式的文本排版并非不能用,而是要克制地使用。盡量只在標(biāo)題和少量的小塊文本當(dāng)中使用居中的文本排版,對于其他的內(nèi)容,請還是遵循普世的左對齊排版。
 

  8.大膽的使用留白

提升UI設(shè)計效果的方法
 

  留白是排版設(shè)計的時候,最重要的元素。請不要吝嗇,不要過度追求信息的飽和度,盡量讓界面有呼吸感,在這個信息過載的時代,盡量給用戶以舒適通透的體驗。讓行高至少為文本高度的 1.5倍,基于親近原則,合理地將元素分組的前提之下,讓元素與元素、組與組之間,不要過于密集。
 

  9.加深淺色背景上的文本

提升UI設(shè)計效果的方法
 

  現(xiàn)在的設(shè)計師同學(xué)應(yīng)該很清楚不要在淺色和白色背景上使用純黑的文本了,大家通常會使用灰色或者使用透明度來控制文本的深淺,不過很多時候為了展示需要,很多同學(xué)用的灰色文本,可讀性并不強。
 

  為了改善實際的體驗和效果,保證文本內(nèi)容的可訪問性,適當(dāng)加深文本的灰色,在保證色彩對比度以及和其他文本的層次感的前提下,達(dá)到優(yōu)秀的視覺體驗。
 

  總結(jié)
 

  想要讓 UI 界面的體驗更加優(yōu)秀,其實在很多時候都需要在細(xì)節(jié)上打磨即可。類似這樣的方法有很多,后面我還會繼續(xù)補充。因此,您現(xiàn)在已經(jīng)了解了與UI設(shè)計師的工作相關(guān)的主要技能。如果您想了解更多信息,請訪問AAA教育,包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。

 

預(yù)約申請免費試聽課

填寫下面表單即可預(yù)約申請免費試聽!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費! 怕學(xué)不會?助教全程陪讀,隨時解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!

?2007-2021/北京漫動者教育科技有限公司版權(quán)所有
備案號:京ICP備12034770號

老師想和你聊一聊

?2007-2021/ m.lb577.com 北京漫動者教育科技有限公司 備案號: 京ICP備12034770號 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc

京公網(wǎng)安備 11010802035704號

網(wǎng)站地圖