規(guī)劃標(biāo)準(zhǔn)，關(guān)于剛?cè)胄械男氯?，可能覺(jué)得是一件很巨大上又很讓人頭疼的工作。本文從新人的視點(diǎn)動(dòng)身，總結(jié)一些規(guī)劃標(biāo)準(zhǔn)要點(diǎn)，算是一次溫故總結(jié)的共享。
我自身是一名UI規(guī)劃師，所以我站在規(guī)劃師的視點(diǎn)去把自己所學(xué)所了解的東西通知咱們?？赡芄静煌?，咱們規(guī)劃習(xí)氣不盡相同，可是畢竟仍是能有些協(xié)助。依舊聲明：這兒寫的僅僅我個(gè)人的運(yùn)用習(xí)氣，僅僅一種工作辦法，咱們?cè)谠敿?xì)工作中，一定要靈活運(yùn)用。另外，技能的更新是非?？斓?，我寫的這些可能某些東西和你們的工程師伙伴所用的辦法不一樣了，所以，仍是要靈活運(yùn)用。
首先帶領(lǐng)咱們先了解一下本文大致分為哪幾個(gè)模塊：網(wǎng)頁(yè)規(guī)劃尺度、常用字體、字體距離舒適規(guī)模、字體色彩規(guī)劃技巧、其他留意事項(xiàng)。
一、網(wǎng)頁(yè)規(guī)劃尺度
制作網(wǎng)頁(yè)時(shí)咱們選用的分辨率是72像素/英寸，運(yùn)用的畫布尺度1920px*1080px。但并不代表咱們能夠在整個(gè)畫布上作圖。
網(wǎng)頁(yè)的布局主要有兩種：左右型布局和居中型布局。布局的不一致，使可規(guī)劃的空間也不相同。
左右結(jié)構(gòu)型
1、左右布局，靈活性強(qiáng)，UI的約束??；
2、左面通欄為導(dǎo)航欄，寬度沒(méi)有詳細(xì)的限時(shí)，能夠根據(jù)實(shí)際情況進(jìn)行調(diào)整；
3、右側(cè)為內(nèi)容板塊規(guī)模，是網(wǎng)站內(nèi)容展現(xiàn)區(qū)域。
居中型
4、居中布局，中間的黃色部分為有用的顯現(xiàn)區(qū)域，用于網(wǎng)站內(nèi)容的展現(xiàn)。
5、換句話說(shuō)，兩邊均為留白，沒(méi)有實(shí)際用處，僅僅為了適配而存在。
6、內(nèi)容限時(shí)區(qū)域在好控制在1000px-1200px。
二、常用字體
現(xiàn)在網(wǎng)頁(yè)的布局咱們現(xiàn)已了解了，那么接下來(lái)就是網(wǎng)頁(yè)中常用到的字體。
字體規(guī)劃的總原則是：可辨識(shí)性和易讀性。
中文主張運(yùn)用微軟雅黑字體，英文則主張運(yùn)用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ī)定詳細(xì)的字號(hào)，根據(jù)實(shí)際情況能夠酌情考慮，可是要有限適用偶數(shù)字號(hào)。
5、字體標(biāo)準(zhǔn)也不需求太多，最好適用三種混搭。假如需求更多
6、層次的區(qū)別，能夠改動(dòng)字體色彩或加粗來(lái)表現(xiàn)。
三、字體距離舒適規(guī)模
相鄰兩個(gè)文字的距離，其實(shí)不需求太過(guò)介懷，除了特別的需求之外，都能夠運(yùn)用默許數(shù)值的距離。
1、行距離，引薦以字體大小的1.5-2倍作為參閱；
2、段距離，引薦以字體大小的2-2.5倍作為參閱。
3、當(dāng)選用14px字體時(shí)，行距離：21-28px;段距離：8px-35px
四、字體色彩規(guī)劃技巧
1、主文字的色彩，主張運(yùn)用公司品牌的VI色彩，可進(jìn)步公司網(wǎng)站與公司VI之間的相關(guān)，添加可辨識(shí)性和記憶性。
2、正文字體色彩，穩(wěn)妥起見(jiàn)，選用易讀性的深灰色，主張選用#333到#666之前的色彩。
3、輔助性的，注釋類的文字，則能夠選用#999999之類的比較淺的色彩。
假如，你對(duì)色彩駕馭能力比較強(qiáng)，你也能夠選擇偏公司VI色彩的深色，作為正文字體色彩或許輔助性文字的色彩。
例如公司的品牌是藍(lán)色，那么正文就能夠選用偏藍(lán)色的深色。這樣處理之后，文字就有了環(huán)境色，網(wǎng)站全體將更加調(diào)和。
深灰色偏藍(lán)色
五、其他需求留意的事項(xiàng)
做網(wǎng)頁(yè)規(guī)劃時(shí)，你還要特別留意網(wǎng)頁(yè)的首屏內(nèi)容，在構(gòu)圖和內(nèi)容出現(xiàn)上，首屏模塊的規(guī)劃至關(guān)重要。
1、除掉任務(wù)欄，瀏覽器菜單欄以及狀態(tài)欄的高度，剩余的是首屏高度。
2、WindowXP的首屏高度平均值為580px,window7的首屏高度平均值是710px。
3、歸納考慮到WindowXP現(xiàn)已退出商場(chǎng)，在實(shí)際操作時(shí)，咱們以710px作為根據(jù)。
如下圖，黃色區(qū)域是咱們規(guī)劃時(shí)要著重考慮的首屏規(guī)模
另外，是關(guān)于圖片尺度問(wèn)題。需求全屏顯現(xiàn)的圖片，寬度尺度嚴(yán)厲規(guī)劃為1920px。可是值得留意的是，圖片內(nèi)容的有用規(guī)模不能超過(guò)網(wǎng)頁(yè)內(nèi)容的有用規(guī)模，控制在1200px以內(nèi)，以免遇到小屏設(shè)備時(shí)顯現(xiàn)不全，而形成信息遺失。
提到這兒，網(wǎng)站規(guī)劃標(biāo)準(zhǔn)部分的內(nèi)容就算是講完了，當(dāng)然上面的一切標(biāo)準(zhǔn)也僅僅標(biāo)準(zhǔn)，不要由于這些標(biāo)準(zhǔn)去約束自己的主意，標(biāo)準(zhǔn)是用來(lái)打破的，規(guī)劃最重要的仍是規(guī)劃得漂亮，規(guī)劃的時(shí)候詳細(xì)要給多大的數(shù)值，取決于規(guī)劃師，標(biāo)準(zhǔn)是用來(lái)參閱的。
