全國服務熱線:18623131115

您當前的位置:電商學院 > 建站策劃

· 知己科技支招/網站網頁設計參考標準

首先帶領大家先了解一下本文大致分為哪幾個模塊:網頁設計尺寸、網站建設常用字體、網站建設字體間距舒適范圍、網站建設字體顏色設計技巧、其他注意事項。
 
一、網頁設計尺寸
制作網頁時我們選用的分辨率是72像素/英寸,使用的畫布尺寸1920px*1080px。但并不代表我們可以在整個畫布上作圖。網站
網頁的布局主要有兩種:左右型布局和居中型布局。布局的不一致,使可設計的空間也不相同。
 
左右結構型
1、左右布局,靈活性強,網站建設、網頁設計、的限制小;
2、左邊通欄為導航欄,寬度沒有具體的限時,可以根據實際情況進行調整;
3、右側為內容板塊范圍,是網站內容展示區域。
 
居中型
4、居中布局,中間的黃色部分為有效的顯示區域,用于網站內容的展示。
5、換句話說,兩邊均為留白,沒有實際用途,只是為了適配而存在。
6、內容限時區域在好控制在1000px-1200px。注重網絡推廣的一定要著重注意網站架構布局開始,
 
二、常用字體
現在網頁的布局我們已經了解了,那么接下來就是網頁中常用到的字體。
字體設計的總原則是:可辨識性和易讀性。
中文建議使用微軟雅黑字體,英文則建議使用arial 字體。常用的字體大小號有以下幾種:
 
1、12px是用于網頁的最小字體,適用于突出性的日期,版權等注釋性內容。
2、14px則適用于非突出性的普通正文內容。
3、16px或18px適用于突出性的標題內容。
4、網站的字體大小并沒有硬性規定具體的字號,根據實際情況可以酌情考慮,但是要有限適用偶數字號。
5、字體規格也不需要太多,最好適用三種混搭。如果需要更多
6、層次的區別,可以改變字體顏色或加粗來體現。
三、字體間距舒適范圍
相鄰兩個文字的間距,其實不需要太過介意,除了特殊的需求之外,都可以使用默認數值的間距。
1、行間距,推薦以字體大小的1.5-2倍作為參考;
2、段間距,推薦以字體大小的2-2.5倍作為參考。
3、當選用14px字體時,行間距:21-28px; 段間距:8px-35px
四 、字體顏色設計技巧
1、主文字的顏色,建議使用公司品牌的VI顏色,可提高公司網站與公司VI之間的關聯,增加可辨識性和記憶性。
2、正文字體顏色,保險起見,選用易讀性的深灰色,建議選用#333到#666之前的顏色。
3、輔助性的,注釋類的文字,則可以選用#999999之類的比較淺的顏色。
如果,你對顏色駕馭能力比較強,你也可以選擇偏公司VI顏色的深色,作為正文字體顏色或者輔助性文字的顏色。
例如公司的品牌是藍色,那么正文就可以選用偏藍色的深色。這樣處理之后,文字就有了環境色,網站整體將更加和諧。
 
深灰色 偏藍色
五、其他需要注意的事項
做網頁設計時,你還要特別注意網頁的首屏內容,在構圖和內容呈現上,首屏模塊的設計至關重要。
1、除去任務欄,瀏覽器菜單欄以及狀態欄的高度,剩下的是首屏高度。
2、Window XP 的首屏高度平均值為580px, window 7 的首屏高度平均值是710px。
3、綜合考慮到 Window XP 已經退出市場,在實際操作時,我們以710px作為依據。
如下圖,黃色區域是我們設計時要著重考慮的首屏范圍
 
另外,是關于圖片尺寸問題。需要全屏顯示的圖片,寬度尺寸嚴格設計為1920px。但是值得注意的是,圖片內容的有效范圍不能超過網頁內容的有效范圍,控制在1200px以內,以免遇到小屏設備時顯示不全,而造成信息遺漏。
說到這里,網站設計規范部分的內容就算是講完了,當然上面的所有規范也只是規范,不要因為這些規范去限制自己的想法,規范是用來打破的,設計最重要的還是設計得美觀,設計的時候具體要給多大的數值,取決于設計師,規范是用來參考的。
Ps:如果想做一個好的UI設計師,一定要從規范入手。很多都是細節的東西,在于積累。

^
TOP

  • 戰略伙伴/Partners

    央視網?? 百度?? 重慶郵電大學?? 阿里云??

    聯系我們/Contact US

    客 服 郵 箱:[email protected]
    重 慶 知 己:重慶市南岸區南坪珊瑚大廈21樓,客服專線:023-62808101 18623131115

  • 關注我們/Follow us

    微信二維碼

    新浪微博二維碼

Copyright ? 2015 重慶知己科技有限公司 版權所有

img

全網營銷獲取
立即獲取

24小時熱線

189-0835-7818
186-2313-1115

img
新利真人21点