視覺(jué)設計 ? 網(wǎng)頁(yè)設計尺寸規范(簡(jiǎn)易版)

網(wǎng)頁(yè)設計尺寸規范(簡(jiǎn)易版)

發(fā)表于: 視覺(jué)設計. 評論
Sponsor

網(wǎng)頁(yè)設計的規范其實(shí)沒(méi)有那么復雜,很多教程長(cháng)篇大論,看完就往,本文濃縮成精華方便查看,如果有不懂的,可以留言提問(wèn)哦。本文從尺寸、布局到字體、顏色提供有效的設計規范,以及響應式和柵格布局的運用,為網(wǎng)頁(yè)設計師提供實(shí)用的指導參考。

以下是網(wǎng)頁(yè)設計尺寸規范:

  1. 網(wǎng)頁(yè)尺寸
    • 分辨率:72像素/英寸
    • 推薦分辨率:1920px * 1080px
    • 內容區的寬度:建議在1000-1200px以?xún)龋?200px較常見(jiàn)
    • 一屏幕的高度:一屏高度約為900pxx(加上瀏覽器本身與插件和底部工具條等距離)
  1. 網(wǎng)頁(yè)布局
    • 左右布局:左側為導航欄,右側為內容展示區域
    • 居中布局:中間為有效顯示區域,兩側為留白
  1. 網(wǎng)頁(yè)字體
    • 總原則:可辨識性和易讀性,通常使用非襯線(xiàn)字體
    • 中文字體:宋體、微軟黑體、蘋(píng)果系統黑體
    • 英文字體:Times New Roman、Arial、Comic Sans MS等
    • 字體大?。?2px為最小字體,適用于注釋?zhuān)?4px適用于正文;16px、18px、20px、26px或30px適用于標題
    • 字體間距:行間距推薦為字體大小的1.5-2倍,段間距為2-2.5倍
  1. 顏色
    • 主字體顏色:建議使用品牌VI顏色
    • 正文字體顏色:易讀性深灰色,如#333、#666
    • 輔助性文字:較淺顏色,如#999
  1. 響應式布局
    • 保證不同設備和環(huán)境下信息表現一致,可交互可操作
  1. 柵格布局
    • 以8像素為單位,間距為8、16、24、32等8的倍數進(jìn)行設計,以適應不同屏幕和分辨率

最后,該網(wǎng)頁(yè)指出設計規范是參考,并不會(huì )限制設計師的創(chuàng )意。

如果您需要更詳細的信息或有其他問(wèn)題,請告知。

推薦:查看最受歡迎的 301 個(gè)設計網(wǎng)站 → http://hao.shejidaren.com
交流:為設計新人提供的設計交流群,請加入UI設計交流群,分享經(jīng)驗、接單、求職、聊設計。
贊助商鏈接
贊助商鏈接
設計達人微信交流社區:shejidaren888
喜歡這篇文章嗎?歡迎分享到你的微博、QQ群,并關(guān)注我們的微博,謝謝支持。
版權:除非注明,本站文章均為原創(chuàng )文章,轉載請聯(lián)系我們授權,否則禁止轉載。

{ 發(fā)表評論 }