一、畫板尺寸

1、設計基準尺寸

      因為網頁尺寸與用戶屏幕相關，而用戶屏幕的種類難以統計。所以我們的設計稿只能主要顧及主流用戶的分辨率，其他分辨率用適配的方式來解決。

      做網站時建議按主流的分辨率1920*1080px來設計。所以我們通常設計網站時的網站寬度為1920px，每個屏幕的高度約為900px。為什么是900px呢？因為1080還要減去瀏覽器頭部和底部高度，大約就是900px了。

2、安全區域寬度

      以1920px寬度作為設計標準，在整個頁面中，網頁的安全區域則為1200px。換句話說，我們只要保證網頁的實際內容展示區域控制在1200px這個范圍內，就能保證整個頁面在不同尺寸的瀏覽器訪問時能夠完整的顯示出所有的內容。

二、視覺規范

1、文字規范

      PC系統默認中文字：微軟雅黑（僅僅作為屏幕輸出，不能用在banner，否則會侵權）。

      Mac系統默認中文：蘋方系列；英文可以使用：Arial、DIN。

      正文字體≥12px即可，目前很多網站字體已經14px起步。可根據實際效果進行選擇，但盡量使用偶數。

2、圖片規范

      網站設計中的圖片常用寬高多為4:3、16:9、1:1等比例。具體圖片大小沒有固定要求，但整數和偶數為佳，主要是考慮到一些適配的問題。

      應該遵循品牌VI規范體系，需要注意不同狀態的用色規范（默認、懸停、按下 、成功反饋、警示反饋、錯誤反饋），顏色不宜過多，控制在3種以內，文字色彩盡量避免純黑色。

4、按鈕規范

      可分為線型按鈕、面型按鈕、文字按鈕、圖標按鈕、文字+圖標按鈕。按鈕的狀態一般有默認、按下、懸停、禁用。按鈕大小可遵循8點柵格原則。

5、圖標規范

      圖標設計取整數制作，完成后輸出SVG格式，上傳到阿里巴巴矢量圖標庫，方便前端調用。注意不同形狀圖標視覺的大小統一（橢圓、方、圓、長方、三角），可遵循8點柵格原則。

6、表單規范

      系統表單設計中，注意輸入框樣式統一，一般有默認、選中、輸入、禁用、校驗錯誤等，另外還有單選、多選、下拉等組件。可遵循8點柵格原則。

7、彈窗規范

      分模態彈窗和非模態彈窗，他們最大的區別在于是否強制用戶交互，是否打斷用戶當前操作流程。彈窗大小可根據顯示的內容、邊距來設計，位置保持全居中。非模態彈窗，需要考慮自動消失的提示時間。可遵循8點柵格原則。

      在系統中很多控件需要設計師來優化設計，保證控件的統一風格，也方便后期迭代。在實際工作中為了節省開發時間，前端也會提供封裝好的控件讓我們來選擇，我們要協助前端規范好控件的樣式。可遵循8點柵格原則。

三、自適應與響應式網站

      我們看到有些網站使用電腦端或者手機端甚至 iPad 去瀏覽時體驗都非常好。這就需要我們為了用戶體驗而進行網站的自適應或響應式布局了。響應式與自適應的原理是相似的，都是通過代碼檢測設備屏幕寬度，根據不同的設備加載不同的 css。

1、自適應網站

      自適應網站的設計稿是一致的，但是設計稿需要考慮屏幕變小時的變化方式。比如一個網站的內容有5個區塊和4個間距，那么如果寬度縮小成900時需要如何變化，這就是自適應布局。比如站酷網、Dribbble 等網站都采用了自適應布局。

2、響應式網站

      響應式網站則需要設計不同版本的設計稿，然后根據不同的設備提供不同的 CSS 樣式。比如判定你設備的寬度是750px，那么網站就知道你使用了手機來訪問，就會給你導入一份手機才有的樣式；如果是電腦的寬度就給你導入電腦的 CSS 樣式。對于設計師來說，自適應需要考慮網站在不同設備寬度下的整除與排版；響應式則需要設計電腦、平板、手機等至少三套設計稿（但這三套設計稿的內容是一致的）。

3、適配的規范

      手機方面：適配手機頁面時，我們一般以 iPhone 為畫布標準。原因是 iPhone 相對顯示比較清晰，并且要求較高。而且用戶占有量也很高。在適配時我們一般以750*1334px尺寸為主，然后將網站導航改變為手機 APP 常常使用的漢堡包+抽屜式導航的形式。同時網站里的按鈕也需要變為手機 APP 中我們看到的左右幾乎滿屏的按鈕，并且每個按鈕要大于88px，方便手指的點擊。字體方面，我們要把網站的字體全部改為蘋方字體，英文則需要使用 SF-UI 代替，并且字號設置為24px以上。也就是將網站改變成一個類 APP 的手機網頁，這樣才可以保證手機用戶體驗良好。如果用戶使用安卓手機，那么前端代碼則會基于設計稿的設計適度加大圖片與間距來適應安卓屏幕。

      iPad：iPad的尺寸為1024*768、2048*1536px等，無論怎么變基本與電腦屏幕尺寸類似。所以在 iPad 上瀏覽網頁是基本舒適的。因此，很多網站并沒有專門為 iPad 做適配，如果我們希望 iPad 用戶用的更爽，可以從文字大小（24px以上）、按鈕大小（88px左右以及以上）、交互形式（抽屜式導航、導航不隨屏幕滾動）等方式入手。

      本文由培訓無憂網長沙牛耳教育課程顧問老師整理發布，希望能夠對想參加長沙網頁美工設計培訓的學生有所幫助。更多課程信息可關注培訓無憂網電腦IT培訓或添加老師微信：15033336050

      注：尊重原創文章,轉載請注明出處和鏈接 http://www.hebeijilong.cn/news-id-10880.html 違者必究！部分文章來源于網絡由培訓無憂網編輯部人員整理發布,內容真實性請自行核實或聯系我們，了解更多相關資訊請關注網頁制作頻道查看更多，了解相關專業課程信息您可在線咨詢也可免費申請試課。關注官方微信了解更多：150 3333 6050