2022-5-6 博博
一個(gè)個(gè)看起來(lái)精致的頁(yè)面也是由這些UI設(shè)計(jì)細(xì)節(jié)組成的。對(duì)于頁(yè)面細(xì)節(jié)的處理也往往可以體現(xiàn)UI設(shè)計(jì)師的專(zhuān)業(yè)和嚴(yán)謹(jǐn)度，本文分享的這些設(shè)計(jì)細(xì)節(jié)，不僅新人設(shè)計(jì)師常常會(huì)忽略，就連有經(jīng)驗(yàn)的設(shè)計(jì)師也時(shí)常會(huì)在這些細(xì)節(jié)上處理不當(dāng)。
文字細(xì)節(jié)
A．文字行距
在做段落文本時(shí)，我們很少直接使用默認(rèn)的文本行距，為了保證閱讀的可讀性和舒適性，必須設(shè)置比默認(rèn)值更大的數(shù)值的行距。
具體的數(shù)值可以設(shè)置在字號(hào)的1.3～1.8倍之間，一般情況下，字號(hào)越小，需要的閱讀空間會(huì)略大一些，特別是在設(shè)計(jì)一些閱讀類(lèi)需要閱讀大段文本的產(chǎn)品頁(yè)面時(shí)，一定要加大行距來(lái)提高文本的可讀性和閱讀舒適性。
B．文字對(duì)比度
在界面設(shè)計(jì)中，應(yīng)該要保證任何文字的可閱讀性，它應(yīng)該有足夠的對(duì)比度，即使是提示性文字也要保證在任何類(lèi)型的顯示器上都可見(jiàn)易讀。
間距和邊距
A．去掉多余的邊框和分割線
用大量而明顯的分割線和邊框?qū)⒛K分開(kāi)，是UI設(shè)計(jì)新手常常犯的錯(cuò)誤，但在設(shè)計(jì)的同時(shí)，可以停下來(lái)好好思考：用分割線分開(kāi)一定是最好的方法嗎？有必要嗎？
有時(shí)用1px的邊框和分割線確實(shí)是合理的，但也有其他的方法來(lái)進(jìn)行信息的歸類(lèi)和分割，比如利用陰影和更大的間距。
B．避免不均勻的邊距
在進(jìn)行卡片式設(shè)計(jì)時(shí)要注意內(nèi)容與卡片邊緣的邊距。如果你是以常用的從左上角到右下角的方式來(lái)布局內(nèi)容，那就讓頂部的邊距比左側(cè)的邊距稍大一點(diǎn)，看起來(lái)會(huì)比四邊都相等的邊距更加舒適美觀。
投影
在物理現(xiàn)實(shí)中，物體的投影絕對(duì)不會(huì)是黑色的，物體的投影顏色始終會(huì)受到其所處在的環(huán)境的影響。
應(yīng)用在界面設(shè)計(jì)中，物體或是卡片的投影顏色應(yīng)考慮其背景和環(huán)境顏色來(lái)進(jìn)行結(jié)合設(shè)計(jì)，即不應(yīng)選擇純灰色，而是選擇帶有背景色彩傾向的灰色，同時(shí)設(shè)置適當(dāng)?shù)耐该鞫群湍：担瑏?lái)營(yíng)造自然舒適的投影效果。
內(nèi)容填充
重復(fù)和隨意的示例文本和圖片放在設(shè)計(jì)圖中看起來(lái)會(huì)很不專(zhuān)業(yè)，應(yīng)該避免交付這樣的設(shè)計(jì)稿，它會(huì)讓人覺(jué)得你對(duì)自己的設(shè)計(jì)是不專(zhuān)業(yè)不用心不愿意花時(shí)間的，同時(shí)也反應(yīng)了你對(duì)與自己的設(shè)計(jì)產(chǎn)出的重視程度。
此外，也已經(jīng)有一部分插件可以自己自動(dòng)選擇填充內(nèi)容，為設(shè)計(jì)師節(jié)省了這些素材的填充時(shí)間，所以在交付設(shè)計(jì)稿時(shí)，讓自己的設(shè)計(jì)稿盡量完整專(zhuān)業(yè)，哪怕是為了演示效果，也應(yīng)該放上相應(yīng)的不同的內(nèi)容標(biāo)題、文本、圖片，讓整個(gè)設(shè)計(jì)看起來(lái)更加專(zhuān)業(yè)和完整。
以上提到的每一條規(guī)則都要結(jié)合具體的產(chǎn)品來(lái)進(jìn)行具體分析和設(shè)計(jì)，但是可以適用在在大多數(shù)情況下，設(shè)計(jì)從來(lái)沒(méi)有一個(gè)標(biāo)準(zhǔn)答案，對(duì)于設(shè)計(jì)新手要訓(xùn)練的是，如何找到那個(gè)最合適當(dāng)前產(chǎn)品的設(shè)計(jì)方式，希望這篇分享能對(duì)你有幫助，感謝閱讀。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.dzxscac.cn