網(wǎng)站設(shè)計并非受限于某種固定風格或必須包含系統(tǒng)級導航欄和工具欄的制式要求,這給予了設(shè)計師極大的靈活性。然而,這種靈活性有時也會讓設(shè)計師感到無所適從。因此,在設(shè)計網(wǎng)站之前,與前端開發(fā)人員充分溝通,明確所使用的尺寸、字體、交互方式等至關(guān)重要,這樣可以避免后期出現(xiàn)不必要的誤會。
由于網(wǎng)頁尺寸與用戶所使用的屏幕大小密切相關(guān),而用戶屏幕的種類繁多且難以一一統(tǒng)計,我們的設(shè)計稿主要需考慮主流用戶的分辨率,其他分辨率則通過適配方式解決。最新版Photoshop的Web預設(shè)尺寸為我們提供了寶貴的參考,如常見尺寸(1366x768px)、大網(wǎng)頁(1920x1080px)等。在進行網(wǎng)站設(shè)計時,建議以主流的分辨率如1920x1080px為基礎(chǔ),因此網(wǎng)站寬度通常設(shè)定為1920px,而屏幕高度則大約為900px,這是因為1080px需要減去瀏覽器頭部和底部的空間。內(nèi)容安全區(qū)域則一般設(shè)定為1200px(或1000px / 1400px),這樣的尺寸設(shè)計相對標準。當然,在設(shè)計網(wǎng)頁前,務(wù)必告知前端開發(fā)人員相關(guān)設(shè)計尺寸,因為他們在適配方式和后續(xù)配合方面擁有更多話語權(quán)。
網(wǎng)站上的文字通常由前端工程師在代碼中重新編寫。這些文字在瀏覽器上的渲染效果受到系統(tǒng)和瀏覽器的影響。例如,在蘋果電腦和Windows系統(tǒng)電腦上看到的文字效果可能會有所不同。鑒于Windows系統(tǒng)的用戶占據(jù)主流地位,即使我們使用蘋果電腦進行網(wǎng)頁設(shè)計,也應(yīng)確保網(wǎng)頁在Windows系統(tǒng)上的顯示效果與我們的設(shè)計稿一致。否則,即使我們完成了精美的設(shè)計稿,程序員也可能無法將其還原成我們期望的樣子。
字號大小的選擇同樣重要。網(wǎng)頁的顯示區(qū)域限制了文字不能過大,一般來說,網(wǎng)站設(shè)計中的文字大小應(yīng)控制在12-20像素之間。字號不能小于12px,因為更小的字號無法清晰顯示中文的復雜筆畫。同時,由于奇數(shù)字號的文字表現(xiàn)和適配效果較差,我們應(yīng)選擇偶數(shù)字號進行設(shè)計。總結(jié)來說,文字推薦使用宋體、大小為12px、渲染方式選擇無。對于稍大一些的字體,推薦使用微軟雅黑、大小為14-20px、渲染方式選擇Windows Lcd或銳利。此外,英文和數(shù)字應(yīng)使用Arial字體,渲染方式選擇無。