創(chuàng)新工場吳卓浩分享:細節(jié)帶來的好體驗

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

2）內容尺寸 
- 對于文字內容為主的頁面，往往可以利用最小文字的尺寸（或接近這個尺寸）、并且能整除標準頁面寬度的尺寸，作為網格的單元尺寸。 
- 使用網格設計法規(guī)范內容的尺寸，讓布局看起來整潔有序。 

- 設置內容寬度是固定還是可以延展?？裳诱沟膬热輰挾饶艹浞掷闷聊豢臻g，但是過寬的內容反而妨礙閱讀。 

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

4）間距 
- 間距單元尺寸的制定，由網格單元尺寸、字體單元尺寸共同決定。 

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

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

實際工作中，常?？梢园焉厦娴膬热菘偨Y成“3”的原則：基于網格設計內容布局的尺寸、對齊、間距，使用不超過3種字體大小、3個對齊基準線、3種間距尺寸、3種顏色。