- 相關(guān)推薦
Web網(wǎng)頁(yè)設(shè)計(jì)標(biāo)準(zhǔn)之常見問題
引導(dǎo)語(yǔ):網(wǎng)頁(yè)的設(shè)計(jì)需要考慮的問題比較多就,例如移動(dòng)端與pc短的兼容性等,以下是小編整理的Web網(wǎng)頁(yè)設(shè)計(jì)標(biāo)準(zhǔn)之常見問題,歡迎參考閱讀!
Q:網(wǎng)頁(yè)設(shè)計(jì)的尺寸是多少?
制作網(wǎng)頁(yè)時(shí),我們選用的分辨率是 72像素/英寸,使用的畫布尺寸1920*1080px。
但是并不代表我們可以在整個(gè)畫布上作圖。
網(wǎng)頁(yè)的布局主要有兩種,左右型布局 和 居中型布局。布局的不一致,使得可設(shè)計(jì)的空間也不相同。
左右布局,靈活性強(qiáng), UI 的限制。
左邊通欄為導(dǎo)航欄,寬度沒有具體的限制,可根據(jù)實(shí)際情況調(diào)整;
右側(cè)為內(nèi)容版塊范圍,是網(wǎng)站內(nèi)容的展示區(qū)域。
居中布局, 中間的黃色部分為有效的顯示局域,用于網(wǎng)站內(nèi)容的展示;
換句話說,兩邊均為留白,沒有實(shí)際用途,只是為了適配而存在;
內(nèi)容顯示的區(qū)域,最好控制在 1000-1200px。
Q:選擇什么樣的字體?
字體設(shè)計(jì)的總原則是:可辨識(shí)性和易讀性。
中文建議使用 微軟雅黑 字體,英文則建議使用 arial無襯線字體,常用的字體字號(hào)大小有以下幾種:
12px 是應(yīng)用于網(wǎng)頁(yè)的最小字體,適用于非突出性的日期,版權(quán)等注釋性內(nèi)容。
14px 則適用于非突出性的普通正文內(nèi)容。
16px 或者 18px 適用于突出性的標(biāo)題內(nèi)容。
網(wǎng)站的字體大小并沒有硬性規(guī)定具體的字號(hào),根據(jù)實(shí)際情況可以酌情考慮,但是要 優(yōu)先使用偶數(shù)字號(hào)。
字體規(guī)格也不需要太多,最好使用三種混搭。
如果需要更多層次的區(qū)別,可以用改變字體顏色或者加粗的方式來實(shí)現(xiàn)。
Q:字體間距舒適范圍是多少?
相鄰兩個(gè)文字的間距,其實(shí)不需要太過介意,除了特殊的需求之外,都可以使用默認(rèn)數(shù)值的間距。
行間距,推薦以 字體大小的1.5—2倍 作為參考;
段間距,推薦以 字體大小的2—2.5倍 作為參考。
即,當(dāng)選用14px 的字體時(shí),行間距:21—28px;段間距:8px—35px。
Q:字體顏色設(shè)計(jì)技巧?
主文字顏色,建議使用 公司品牌的VI顏色,可提高公司網(wǎng)站與公司VI之間的關(guān)聯(lián),增加可辨識(shí)性和記憶性。
正文字體顏色,保險(xiǎn)起見,選用易讀性的深灰色,建議選用 #333333到#666666 之間的顏色。
輔助性的,注釋類的文字,則可以選用#999999之類的比較淺的顏色。
如果,你對(duì)顏色駕馭能力比較強(qiáng),你也可以選用 偏公司VI顏色的深色,作為正文字體顏色或者輔助性文字顏色。
例如公司的品牌色是藍(lán)色,那么,正文字體就可以選用偏藍(lán)的深色。
這樣處理之后,文字就帶有了環(huán)境色,網(wǎng)站整體色調(diào)將更加和諧。
Q:其他需要注意的事項(xiàng)有哪些?
做網(wǎng)頁(yè)設(shè)計(jì)時(shí),你還要特別 注意網(wǎng)頁(yè)的首屏內(nèi)容,在構(gòu)圖和內(nèi)容呈現(xiàn)上,首屏模塊的設(shè)計(jì)至關(guān)重要。
除去任務(wù)欄,瀏覽器菜單欄以及狀態(tài)欄的高度,剩下的是首屏的高度。
Window XP的首屏高度平均值是580px,Window 7的首屏高度平均值是710px。
綜合考慮到Window XP已經(jīng)逐漸退出市場(chǎng),在實(shí)際操作時(shí),我們 以710px 作為依據(jù)。
如下圖所示,黃色的區(qū)域則是我們?cè)O(shè)計(jì)時(shí)需要著重考慮的首屏范圍。
另外,是關(guān)于圖片尺寸的問題。
需要全屏顯示的圖片,寬度尺寸嚴(yán)格設(shè)計(jì)為1920px。
但是值得注意的是,圖片內(nèi)容的有效范圍不能超過網(wǎng)頁(yè)內(nèi)容的有效范圍,即 控制在1200px以內(nèi)。
避免遇到小屏幕設(shè)備時(shí),內(nèi)容顯示不全,而造成信息的遺漏的情況。
【W(wǎng)eb網(wǎng)頁(yè)設(shè)計(jì)標(biāo)準(zhǔn)之常見問題】相關(guān)文章:
網(wǎng)頁(yè)設(shè)計(jì)標(biāo)準(zhǔn)的尺寸08-23
網(wǎng)頁(yè)設(shè)計(jì)標(biāo)準(zhǔn)尺寸是多少07-03
web網(wǎng)頁(yè)設(shè)計(jì)和排版09-25
網(wǎng)頁(yè)設(shè)計(jì)中常見問題分析及建議08-30
網(wǎng)頁(yè)設(shè)計(jì)之色彩搭配的技巧06-13
分析網(wǎng)頁(yè)設(shè)計(jì)常見問題及解決方法09-01
Dreamweaver網(wǎng)頁(yè)制作之CSS布局規(guī)則09-06
網(wǎng)頁(yè)設(shè)計(jì)師面試時(shí)的常見問題08-20
網(wǎng)頁(yè)設(shè)計(jì)之字體設(shè)計(jì)規(guī)范06-20
網(wǎng)頁(yè)設(shè)計(jì)之5個(gè)設(shè)計(jì)風(fēng)格的主流趨勢(shì)10-23