如何讓你的界面設(shè)計(jì)更精致?

2022-5-5    博博

初級新人設(shè)計(jì)師與高級設(shè)計(jì)師的區(qū)別,除了對產(chǎn)品的理解和風(fēng)格的把握之外,其實(shí)更多的往往體現(xiàn)在界面設(shè)計(jì)中對頁面細(xì)節(jié)的處理上。

一個(gè)個(gè)看起來精致的頁面也是由這些UI設(shè)計(jì)細(xì)節(jié)組成的。對于頁面細(xì)節(jié)的處理也往往可以體現(xiàn)UI設(shè)計(jì)師的專業(yè)和嚴(yán)謹(jǐn)度,本文分享的這些設(shè)計(jì)細(xì)節(jié),不僅新人設(shè)計(jì)師常常會忽略,就連有經(jīng)驗(yàn)的設(shè)計(jì)師也時(shí)常會在這些細(xì)節(jié)上處理不當(dāng)。


文字細(xì)節(jié)


A.文字行距


在做段落文本時(shí),我們很少直接使用默認(rèn)的文本行距,為了保證閱讀的可讀性和舒適性,必須設(shè)置比默認(rèn)值更大的數(shù)值的行距。


具體的數(shù)值可以設(shè)置在字號的1.3~1.8倍之間,一般情況下,字號越小,需要的閱讀空間會略大一些,特別是在設(shè)計(jì)一些閱讀類需要閱讀大段文本的產(chǎn)品頁面時(shí),一定要加大行距來提高文本的可讀性和閱讀舒適性。



B.文字對比度


在界面設(shè)計(jì)中,應(yīng)該要保證任何文字的可閱讀性,它應(yīng)該有足夠的對比度,即使是提示性文字也要保證在任何類型的顯示器上都可見易讀。



間距和邊距


A.去掉多余的邊框和分割線


用大量而明顯的分割線和邊框?qū)⒛K分開,是UI設(shè)計(jì)新手常常犯的錯(cuò)誤,但在設(shè)計(jì)的同時(shí),可以停下來好好思考:用分割線分開一定是最好的方法嗎?有必要嗎?


有時(shí)用1px的邊框和分割線確實(shí)是合理的,但也有其他的方法來進(jìn)行信息的歸類和分割,比如利用陰影和更大的間距。



B.避免不均勻的邊距


在進(jìn)行卡片式設(shè)計(jì)時(shí)要注意內(nèi)容與卡片邊緣的邊距。如果你是以常用的從左上角到右下角的方式來布局內(nèi)容,那就讓頂部的邊距比左側(cè)的邊距稍大一點(diǎn),看起來會比四邊都相等的邊距更加舒適美觀。



投影


在物理現(xiàn)實(shí)中,物體的投影絕對不會是黑色的,物體的投影顏色始終會受到其所處在的環(huán)境的影響。


應(yīng)用在界面設(shè)計(jì)中,物體或是卡片的投影顏色應(yīng)考慮其背景和環(huán)境顏色來進(jìn)行結(jié)合設(shè)計(jì),即不應(yīng)選擇純灰色,而是選擇帶有背景色彩傾向的灰色,同時(shí)設(shè)置適當(dāng)?shù)耐该鞫群湍:?,來營造自然舒適的投影效果。



內(nèi)容填充


重復(fù)和隨意的示例文本和圖片放在設(shè)計(jì)圖中看起來會很不專業(yè),應(yīng)該避免交付這樣的設(shè)計(jì)稿,它會讓人覺得你對自己的設(shè)計(jì)是不專業(yè)不用心不愿意花時(shí)間的,同時(shí)也反應(yīng)了你對與自己的設(shè)計(jì)產(chǎn)出的重視程度。


此外,也已經(jīng)有一部分插件可以自己自動選擇填充內(nèi)容,為設(shè)計(jì)師節(jié)省了這些素材的填充時(shí)間,所以在交付設(shè)計(jì)稿時(shí),讓自己的設(shè)計(jì)稿盡量完整專業(yè),哪怕是為了演示效果,也應(yīng)該放上相應(yīng)的不同的內(nèi)容標(biāo)題、文本、圖片,讓整個(gè)設(shè)計(jì)看起來更加專業(yè)和完整。



以上提到的每一條規(guī)則都要結(jié)合具體的產(chǎn)品來進(jìn)行具體分析和設(shè)計(jì),但是可以適用在在大多數(shù)情況下,設(shè)計(jì)從來沒有一個(gè)標(biāo)準(zhǔn)答案,對于設(shè)計(jì)新手要訓(xùn)練的是,如何找到那個(gè)最合適當(dāng)前產(chǎn)品的設(shè)計(jì)方式,希望這篇分享能對你有幫助,感謝閱讀。


文章來源:站酷   作者:閃閃的星仔

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、
BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

分享本文至:

日歷

鏈接

個(gè)人資料

存檔