無論是手機(jī)網(wǎng)站界面設(shè)計(jì)還是傳統(tǒng)網(wǎng)站界面設(shè)計(jì), 網(wǎng)站都需要以內(nèi)容為中心。網(wǎng)站是用來給瀏覽者看信息的, 是向受眾提供某種信息或服務(wù), 因此網(wǎng)站設(shè)計(jì)首要考慮的就是用戶的需求。針對(duì)不同的用戶必然產(chǎn)生不同的設(shè)計(jì)方向。網(wǎng)站是以內(nèi)容為王道的設(shè)計(jì), 不是僅僅選個(gè)喜歡的字體、顏色、圖片就能做好的。網(wǎng)站頁面的各種構(gòu)成元素都應(yīng)該是為了更好地顯示內(nèi)容, 更好地與用戶交流而設(shè)計(jì)。一個(gè)成熟、專業(yè)的網(wǎng)站, 需要設(shè)計(jì)師對(duì)網(wǎng)站的風(fēng)格、功能模塊、內(nèi)容、交互等進(jìn)行整體策劃。

1、風(fēng)格
一個(gè)網(wǎng)站是根據(jù)這個(gè)企業(yè)的形象、性質(zhì)、內(nèi)容、功能等因素, 甚至對(duì)瀏覽者的預(yù)判綜合考慮得出的設(shè)計(jì)風(fēng)格。Window 8的風(fēng)格是一個(gè)單色塊, 配上簡(jiǎn)潔的文字或圖標(biāo), 去掉各種投影、水晶效果等特效, 凸顯以內(nèi)容為主。這種以內(nèi)容為主的簡(jiǎn)潔化設(shè)計(jì)風(fēng)格越來越流行。但是不見得所有的用戶或者所有的使用者都適用這種風(fēng)格。不同性質(zhì)的網(wǎng)站有不同的需求, 科技網(wǎng)站、藝術(shù)網(wǎng)站、音樂網(wǎng)站、商業(yè)網(wǎng)站等, 都會(huì)有一些不同的個(gè)性。設(shè)計(jì)師不能因?yàn)槟撤N風(fēng)格流行, 或喜歡某種風(fēng)格, 就想盡辦法在當(dāng)前的設(shè)計(jì)項(xiàng)目中體現(xiàn)出來, 最后這種風(fēng)格的視覺效果往往有點(diǎn)不倫不類。
2、版式
網(wǎng)站的版式設(shè)計(jì)是受內(nèi)容限制的。一個(gè)網(wǎng)站的內(nèi)容不是單一的, 越是綜合類網(wǎng)站, 內(nèi)容分類越是繁雜, 那么對(duì)于繁雜的內(nèi)容來講, 哪類內(nèi)容放在首頁?哪類內(nèi)容放在次要的頁面?甚至哪些內(nèi)容放在首頁的首屏?這些內(nèi)容的分布排列對(duì)網(wǎng)站設(shè)計(jì)起著重要的作用。繪制這些內(nèi)容邏輯分布的過程就是繪制線框圖。線框圖不僅僅是用來給設(shè)計(jì)師進(jìn)一步美化的依據(jù), 也是前端開發(fā)人員書寫瀏覽器程序的時(shí)候參考。一個(gè)懂網(wǎng)站設(shè)計(jì)的人, 從線框圖就能看出這個(gè)網(wǎng)站的根本。一個(gè)頁面的板式設(shè)計(jì)需要“從內(nèi)而外的矩形”。從前端技術(shù)的角度來分析, 網(wǎng)站設(shè)計(jì)其實(shí)就是在一個(gè)大的矩形 (顯示器) 上用HTML語言切割成各種小矩形。每一個(gè)矩形里面切割更精確的矩形用來實(shí)現(xiàn)各個(gè)內(nèi)容位置的擺放。從設(shè)計(jì)的角度來分析, 柵格系統(tǒng)設(shè)計(jì)、欄的概念都是方塊的設(shè)計(jì), 就像做拼圖一樣, 用各種方塊按著需求來進(jìn)行各種大小、位置的排列組合。哪怕是圓形的圖片, 其根本也是一個(gè)矩形, 只是圓周圍是透明的而已。所以一個(gè)網(wǎng)站的基礎(chǔ)版式分布, 就是規(guī)劃各種矩形的排列組合。
3、字體
網(wǎng)站的進(jìn)一步美化過程, 其實(shí)就是在線框圖的布局基礎(chǔ)上, 用顏色、字體、圖片等手段進(jìn)行畫面的裝飾過程。一個(gè)出色的網(wǎng)站一定有著出色的字體設(shè)計(jì)。出色的網(wǎng)頁設(shè)計(jì)師會(huì)用單純的字體樣式排列出非常適于閱讀, 又能體現(xiàn)出網(wǎng)站風(fēng)格的視覺效果。網(wǎng)站字體的選擇不能隨設(shè)計(jì)師喜好隨意運(yùn)用, 要考慮到當(dāng)不同的用戶打開該頁面的時(shí)候, 如果瀏覽者計(jì)算機(jī)上沒有安裝這種字體, 用戶瀏覽器默認(rèn)的字體是否能很好地顯示該內(nèi)容?所以, 網(wǎng)站字體都會(huì)選擇系統(tǒng)必然會(huì)有的常規(guī)字體。但像按鈕、欄目標(biāo)題等特殊部分, 由于不會(huì)經(jīng)常變動(dòng)更新, 可以選擇比較特別的字體, 但需要轉(zhuǎn)換成圖片, 前端開發(fā)人員以圖片的形式來運(yùn)用這個(gè)部分。一個(gè)網(wǎng)頁如果選擇宋體字, 字體大小不宜小于12像素, 因?yàn)樗误w字中橫過于細(xì), 太小會(huì)影響字體的顯示。因?yàn)椴簧僮煮w只專門處理了常用的幾個(gè)偶數(shù)字號(hào), 所以為了便于各個(gè)瀏覽器兼容, 顯示效果一致, 網(wǎng)頁字體大小的選擇一般是偶數(shù), 有些瀏覽器會(huì)默認(rèn)為靠近的偶數(shù)字號(hào)顯示。
4、圖片
一個(gè)優(yōu)質(zhì)的圖片能給產(chǎn)品或企業(yè)帶來好的印象?，F(xiàn)在很多網(wǎng)站首屏都是應(yīng)用越來越大的圖片, 并且通過手動(dòng)或自動(dòng)切換圖片顯示。這些圖片可能是一個(gè)優(yōu)秀的攝影作品, 也可能是一個(gè)優(yōu)秀的平面廣告等, 這些圖片都是精心設(shè)計(jì)過的, 擁有良好的品質(zhì)。為了讓用戶有更好的網(wǎng)站體驗(yàn), 很多圖片都是以小圖當(dāng)預(yù)覽圖, 點(diǎn)擊之后才顯示相應(yīng)的完整圖片, 這樣的好處是能在不確定用戶需要哪個(gè)圖片的時(shí)候盡量快速地讓用戶看到, 有利于網(wǎng)站的優(yōu)化體驗(yàn)和增加網(wǎng)站瀏覽速度, 有些網(wǎng)站圖片提供放大鏡效果, 當(dāng)鼠標(biāo)移動(dòng)進(jìn)入到圖片的區(qū)域時(shí)會(huì)展示相應(yīng)的局部大圖, 這種效果一般在淘寶等購(gòu)物網(wǎng)站較多, 便于用戶查看商品細(xì)節(jié)。另外, 現(xiàn)在很多以圖片為主的網(wǎng)站都以“瀑布流”的方式展示圖片, 這種效果在HTML5和Javascript技術(shù)普及后越來越多。
5、交互性
一致性的交互方式可以讓用戶更好理解整個(gè)網(wǎng)站的操作, 從而提升瀏覽效率, 不能到處都是不同的交互方式, 會(huì)帶給人凌亂的感覺。交互需要提供反饋。例如鼠標(biāo)移動(dòng)到一個(gè)新聞標(biāo)題鏈接按鈕的時(shí)候, 需要一定的反應(yīng)會(huì)帶來良好的操作體驗(yàn)。界面要始終保持和用戶的溝通。又如一個(gè)注冊(cè)頁面, 現(xiàn)在常見的交互方式是運(yùn)用AJAX技術(shù), 當(dāng)輸入完用戶名的時(shí)候會(huì)自動(dòng)和數(shù)據(jù)庫(kù)中的信息進(jìn)行比對(duì), 檢測(cè)是否有人注冊(cè), 然后在用戶輸入框旁邊直觀地顯示, 這帶給人以非常好的交互體驗(yàn)。網(wǎng)站交互設(shè)計(jì)還要方便使用。實(shí)現(xiàn)目標(biāo)功能的最少操作數(shù)、鼠標(biāo)最短距離移動(dòng)原則等。交互性的最根本的目的其實(shí)就是為了更好地讓用戶愉悅的體驗(yàn)網(wǎng)站。所以一切設(shè)計(jì)原則都是以此為標(biāo)準(zhǔn), 從技術(shù)和設(shè)計(jì)的角度去調(diào)整。