UI設(shè)計(jì)規(guī)范，對(duì)于剛?cè)胄械男氯?，可能覺(jué)得是一件很高大上又很讓人頭疼的事情。本文從新人的角度出發(fā)，總結(jié)一些設(shè)計(jì)規(guī)范要點(diǎn)，算是一次溫故總結(jié)的分享。
作為一名UI設(shè)計(jì)師，所以必須站在設(shè)計(jì)師的角度去把自己所學(xué)所了解的東西告訴大家。可能公司不同，大家設(shè)計(jì)習(xí)慣不盡相同，但是終究還是能有些幫助。依舊聲明：這里寫的只是我個(gè)人的使用習(xí)慣，只是一種工作方法，大家在具體工作中，一定要靈活運(yùn)用。另外，技術(shù)的更新是非常快的，我寫的這些可能某些東西和你們的工程師搭檔所用的方法不一樣了，所以，還是要靈活運(yùn)用。
下面尚略
上海網(wǎng)站設(shè)計(jì)公司首先帶領(lǐng)大家先了解一下本文大致分為哪幾個(gè)模塊：網(wǎng)頁(yè)設(shè)計(jì)尺寸、常用字體、字體間距舒適范圍、字體顏色設(shè)計(jì)技巧、其他注意事項(xiàng)。
一、網(wǎng)頁(yè)設(shè)計(jì)尺寸
制作網(wǎng)頁(yè)時(shí)我們選用的分辨率是72像素/英寸，使用的畫布尺寸1920px*1080px。但并不代表我們可以在整個(gè)畫布上作圖。
網(wǎng)頁(yè)的布局主要有兩種：左右型布局和居中型布局。布局的不一致，使可設(shè)計(jì)的空間也不相同。
左右結(jié)構(gòu)型
1、左右布局，靈活性強(qiáng)，UI的限制小；
2、左邊通欄為導(dǎo)航欄，寬度沒(méi)有具體的限時(shí)，可以根據(jù)實(shí)際情況進(jìn)行調(diào)整；
3、右側(cè)為內(nèi)容板塊范圍，是網(wǎng)站內(nèi)容展示區(qū)域。
居中型
4、居中布局，中間的黃色部分為有效的顯示區(qū)域，用于網(wǎng)站內(nèi)容的展示。
5、換句話說(shuō)，兩邊均為留白，沒(méi)有實(shí)際用途，只是為了適配而存在。
6、內(nèi)容限時(shí)區(qū)域在好控制在1000px-1200px。
二、常用字體
現(xiàn)在網(wǎng)頁(yè)的布局我們已經(jīng)了解了，那么接下來(lái)就是網(wǎng)頁(yè)中常用到的字體。
字體設(shè)計(jì)的總原則是：可辨識(shí)性和易讀性。
中文建議使用微軟雅黑字體，英文則建議使用arial 字體。常用的字體大小號(hào)有以下幾種：
1、12px是用于網(wǎng)頁(yè)的最小字體，適用于突出性的日期，版權(quán)等注釋性內(nèi)容。
2、14px則適用于非突出性的普通正文內(nèi)容。
3、16px或18px適用于突出性的標(biāo)題內(nèi)容。
4、網(wǎng)站的字體大小并沒(méi)有硬性規(guī)定具體的字號(hào)，根據(jù)實(shí)際情況可以酌情考慮，但是要有限適用偶數(shù)字號(hào)。
5、字體規(guī)格也不需要太多，最好適用三種混搭。如果需要更多層次的區(qū)別，可以改變字體顏色或加粗來(lái)體現(xiàn)。
三、字體間距舒適范圍
相鄰兩個(gè)文字的間距，其實(shí)不需要太過(guò)介意，除了特殊的需求之外，都可以使用默認(rèn)數(shù)值的間距。
1、行間距，推薦以字體大小的1.5-2倍作為參考；
2、段間距，推薦以字體大小的2-2.5倍作為參考。
3、當(dāng)選用14px字體時(shí)，行間距：21-28px; 段間距：8px-35px
四 、字體顏色設(shè)計(jì)技巧
1、主文字的顏色，建議使用公司品牌的VI顏色，可提高公司網(wǎng)站與公司VI之間的關(guān)聯(lián)，增加可辨識(shí)性和記憶性。
2、正文字體顏色，保險(xiǎn)起見(jiàn)，選用易讀性的深灰色，建議選用#333到#666之前的顏色。
3、輔助性的，注釋類的文字，則可以選用#999999之類的比較淺的顏色。
如果，你對(duì)顏色駕馭能力比較強(qiáng)，你也可以選擇偏公司VI顏色的深色，作為正文字體顏色或者輔助性文字的顏色。
例如公司的品牌是藍(lán)色，那么正文就可以選用偏藍(lán)色的深色。這樣處理之后，文字就有了環(huán)境色，網(wǎng)站整體將更加和諧。
深灰色 偏藍(lán)色
五、其他需要注意的事項(xiàng)
做網(wǎng)頁(yè)設(shè)計(jì)時(shí)，你還要特別注意網(wǎng)頁(yè)的首屏內(nèi)容，在構(gòu)圖和內(nèi)容呈現(xiàn)上，首屏模塊的設(shè)計(jì)至關(guān)重要。
1、除去任務(wù)欄，瀏覽器菜單欄以及狀態(tài)欄的高度，剩下的是首屏高度。
2、Window XP 的首屏高度平均值為580px, window 7 的首屏高度平均值是710px。
3、綜合考慮到 Window XP 已經(jīng)退出市場(chǎng)，在實(shí)際操作時(shí)，我們以710px作為依據(jù)。
如下圖，黃色區(qū)域是我們?cè)O(shè)計(jì)時(shí)要著重考慮的首屏范圍
另外，是關(guān)于圖片尺寸問(wèn)題。需要全屏顯示的圖片，寬度尺寸嚴(yán)格設(shè)計(jì)為1920px。但是值得注意的是，圖片內(nèi)容的有效范圍不能超過(guò)網(wǎng)頁(yè)內(nèi)容的有效范圍，控制在1200px以內(nèi)，以免遇到小屏設(shè)備時(shí)顯示不全，而造成信息遺漏。
說(shuō)到這里，網(wǎng)站設(shè)計(jì)規(guī)范部分的內(nèi)容就算是講完了，當(dāng)然上面的所有規(guī)范也只是規(guī)范，不要因?yàn)檫@些規(guī)范去限制自己的想法，規(guī)范是用來(lái)打破的，設(shè)計(jì)最重要的還是設(shè)計(jì)得美觀，設(shè)計(jì)的時(shí)候具體要給多大的數(shù)值，取決于設(shè)計(jì)師，規(guī)范是用來(lái)參考的。
Ps:如果想做一個(gè)好的UI設(shè)計(jì)師，一定要從規(guī)范入手。很多都是細(xì)節(jié)的東西，在于積累。