一、網(wǎng)頁寬度及內(nèi)容范圍寬度

a)  解決PC端不同分辨率問題常見方法是把網(wǎng)頁的內(nèi)容范圍設(shè)計在 1200px、1000px、990px和800px，這種方法會出現(xiàn)四套設(shè)計稿，給設(shè)計師帶來較大的工作量，根據(jù)權(quán)威性的百度統(tǒng)計數(shù)據(jù)可以看出近24個月國內(nèi)主流的顯示屏分辨為：1920*1080和1366*768這兩種，就是說只需要適應(yīng)最大分辨率和最小分辨率就能滿足大部分用戶的需求；

i.  常規(guī)下拉式長頁面

1.  屏幕分辨率：1920*1080、1440*900、1600*900、1280*800和1366*768

    正文：寬度1200px （保持與畫布呈水平居中）

    一屏：高度900px

2.  屏幕分辨率：1024*768

    正文：寬度990px （保持與畫布呈水平居中）

    一屏：高度900px

b)  還有其他分辨率前面數(shù)字比后面少的都是移動訪問PC網(wǎng)站的產(chǎn)生的流量（例如：360*640），當(dāng)移動端訪問PC端時，為了適配移動端，我們采取的方法是把PC端網(wǎng)頁按比例縮放至網(wǎng)頁寬度等于設(shè)備寬度、或縮放至內(nèi)容區(qū)域?qū)挾?，視情況而定；

                                             

二、板塊設(shè)計

a)  版塊風(fēng)格：

    板塊可以具有自己獨(dú)立的風(fēng)格，建議所有版塊上的保持控件風(fēng)格統(tǒng)一，功能一致，以便提高重用性；

b)  頭部、腳部設(shè)計

i.  頭部：

    高度：不能超過屏幕高度的五分一；

    風(fēng)格：各版塊保持統(tǒng)一頭部，一個網(wǎng)站最多不要超過過三種不同的頭部；

ii. 腳部：

    高度：不能超過屏幕高度的五分一；

    風(fēng)格：各版塊保持統(tǒng)一腳部，一個網(wǎng)站只能一種腳部（顏色可以例外）；

三、文字

a)  推廣設(shè)計（專題）：

    推廣設(shè)計的風(fēng)格多種多樣，需要根據(jù)需求選擇字體來營造氛圍，推廣設(shè)計的字體往往是做在圖片上，不需要考慮用戶的設(shè)備中有沒有包含該字體。

b)  產(chǎn)品設(shè)計：

    產(chǎn)品設(shè)計的字體，很少會做在圖上，大多數(shù)字體由前端工程師來實(shí)現(xiàn)，設(shè)計師一般會選擇用戶設(shè)備里自帶的字體來進(jìn)行設(shè)計。

c)  網(wǎng)頁文本字使用規(guī)范：

i.  中文字體：

文本字一律采用14px字體，黑體一般很少做正文，主要用做標(biāo)題、重點(diǎn)突出文字。建議使用14px + 20px字體的混合搭配，避免大面積使用加粗字體，字體請使用系統(tǒng)自帶字體。

ii. 英文字體：

英文字體從9px開始就能清晰顯示，選擇空間大。10px、11px、12px、13px都是常見的字體大小，字體請使用系統(tǒng)自帶字體。例：Tahoma、Arial、Verdana

例：

四、控件

    例如：

a)  按鈕：

i.  控件系統(tǒng)：按鈕的樣式統(tǒng)一

ii.  解決開發(fā)效率、代碼冗余問題

 

五、動畫

    例如：

a)  火柴人 每個關(guān)節(jié)獨(dú)立成一個圖層，前端能做出更生動的動畫

b)  背景圖按元素需分層清晰，以京東的專題頁的banner為例；

    

六、設(shè)計稿輸出

a)  設(shè)計稿目錄結(jié)構(gòu)：

    JPEG：文件夾下存放每一個頁面的定稿

    PSD：文件夾下存放PSD源文件

b)  PSD文件命名：

    PSD文件要統(tǒng)一命名，最終確認(rèn)、廢棄的稿件要分別標(biāo)記。

命名準(zhǔn)則：版塊名稱 + 內(nèi)容頁面 + 制作日期 + ABCD表示第幾稿（PSD源文件、JPEG輸出稿統(tǒng)一使用）

例如：環(huán)?；厥?20170224-A

      環(huán)?；厥?20170224-B

      環(huán)保回收-一鍵回收 20170224-A

      環(huán)?；厥?一鍵回收 20170225-最終確認(rèn)

      以此類推……

c)  參考線：最終提交給切圖技術(shù)的源文件中，只能保留有效的參考線。（作用是確保設(shè)計、開發(fā)、動畫能夠準(zhǔn)確無誤的制作以及位置不出錯。）

d)  PSD分組、細(xì)化：

    頁面PSD里，每個版塊對應(yīng)一個組，多余沒用的圖層能刪就刪。每個版塊的標(biāo)題、圖片、作品、按鈕、文字等都用組別歸類命名好。

●  整個頁面PSD組別分類

●  單個組別的圖層細(xì)化

e)  導(dǎo)航、選項(xiàng)卡按鈕分組：

一般的按鈕有三種狀態(tài)：默認(rèn)、經(jīng)過、點(diǎn)擊后

如果按鈕有點(diǎn)擊效果，請把點(diǎn)擊前和點(diǎn)擊后的效果都做出來，以分組的形式歸類好，命名標(biāo)示清楚；

分組方法一：每個組分別為一個整體的切換效果。（通用類型、少按鈕狀態(tài)）

 

 

 

 

 

分組方法二：將點(diǎn)擊前、點(diǎn)擊后的效果單獨(dú)抽離分組。（適用于簡單、多按鈕狀態(tài)）

七、 其他

 

*以上信息來源于網(wǎng)絡(luò)