您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 設(shè)計(jì)理論 >> 瀏覽設(shè)計(jì)教程

創(chuàng)新工場(chǎng)吳卓浩分享:細(xì)節(jié)帶來(lái)的好體驗(yàn)

1)文字 
- 設(shè)置正確的font family以保證在不同操作系統(tǒng)中都能以最優(yōu)的字體顯示中文、字母、數(shù)字、標(biāo)點(diǎn)。 
- 針對(duì)以中文為主和以英文為主的內(nèi)容、字體大小不同的內(nèi)容,設(shè)置不同的行間距。 
- 在Windows、宋體為主的環(huán)境下,字體不要小于12px,不要使用斜體,避免使用粗體。 

2)內(nèi)容尺寸 
- 對(duì)于文字內(nèi)容為主的頁(yè)面,往往可以利用最小文字的尺寸(或接近這個(gè)尺寸)、并且能整除標(biāo)準(zhǔn)頁(yè)面寬度的尺寸,作為網(wǎng)格的單元尺寸。 
- 使用網(wǎng)格設(shè)計(jì)法規(guī)范內(nèi)容的尺寸,讓布局看起來(lái)整潔有序。 

- 設(shè)置內(nèi)容寬度是固定還是可以延展。可延展的內(nèi)容寬度能充分利用屏幕空間,但是過寬的內(nèi)容反而妨礙閱讀。 

3)對(duì)齊 
- 使用網(wǎng)格設(shè)計(jì)法規(guī)范內(nèi)容的對(duì)齊,讓布局看起來(lái)整潔有序。 
- 在橫向上不要使用過多的對(duì)齊基準(zhǔn)線。如果橫向有5、6個(gè)對(duì)其基準(zhǔn)線,幾乎等于沒有規(guī)范對(duì)齊。 
- 英文在左對(duì)齊或右對(duì)齊的時(shí)候、另一側(cè)參差不齊,居中對(duì)齊的時(shí)候兩側(cè)參差不齊,有一種美感。中文則往往更欣賞整體接近方塊化的布局,尤其是對(duì)于高密度內(nèi)容,需要慎用參差不齊的形式。 

4)間距 
- 間距單元尺寸的制定,由網(wǎng)格單元尺寸、字體單元尺寸共同決定。 

- 盡量少使用幾種不同的間距尺寸,間距類型過多讓布局顯得凌亂。 
- 間距是非常有效的形成內(nèi)容區(qū)塊的方式,并且微妙而不強(qiáng)烈。相比使用背景色、間隔線,用間距形成區(qū)塊往往更具品質(zhì)感。 

5)顏色 
- 主體顏色盡可能不超過3種(黑色和白色如果作為背景色和文字色,不包括在內(nèi)),主色、強(qiáng)調(diào)色、輔助色。 
- 在同一種顏色上,可以根據(jù)需要發(fā)展出同色系的輔助色。 
- 如果使用過淺的顏色,有可能在某些顯示器上看不見。同一顏色在不同的顯示設(shè)備上顯示效果往往不同,往往綠色的偏色尤其嚴(yán)重。 

實(shí)際工作中,常??梢园焉厦娴膬?nèi)容總結(jié)成“3”的原則:基于網(wǎng)格設(shè)計(jì)內(nèi)容布局的尺寸、對(duì)齊、間距,使用不超過3種字體大小、3個(gè)對(duì)齊基準(zhǔn)線、3種間距尺寸、3種顏色。

[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/di1923.html
網(wǎng)頁(yè)設(shè)計(jì)中的小技巧
用戶解讀設(shè)計(jì)的秘密:金字塔思維方式
圖趣網(wǎng)微信
建議反饋
×