網站建設

無論是(shì)手機網站界面設計還是(shì)傳統網站界面設計, 網站都需要(yào / yāo)以(yǐ)内容爲(wéi / wèi)中心。網站是(shì)用來(lái)給浏覽者看信息的(de), 是(shì)向受衆提供某種信息或服務, 因此網站設計首要(yào / yāo)考慮的(de)就(jiù)是(shì)用戶的(de)需求。針對不(bù)同的(de)用戶必然産生不(bù)同的(de)設計方向。網站是(shì)以(yǐ)内容爲(wéi / wèi)王道(dào)的(de)設計, 不(bù)是(shì)僅僅選個(gè)喜歡的(de)字體、顔色、圖片就(jiù)能做好的(de)。網站頁面的(de)各種構成元素都應該是(shì)爲(wéi / wèi)了(le／liǎo)更好地(dì / de)顯示内容, 更好地(dì / de)與用戶交流而(ér)設計。一(yī / yì ／yí)個(gè)成熟、專業的(de)網站, 需要(yào / yāo)設計師對網站的(de)風格、功能模塊、内容、交互等進行整體策劃。

1、風格

一(yī / yì ／yí)個(gè)網站是(shì)根據這(zhè)個(gè)企業的(de)形象、性質、内容、功能等因素, 甚至對浏覽者的(de)預判綜合考慮得出(chū)的(de)設計風格。Window 8的(de)風格是(shì)一(yī / yì ／yí)個(gè)單色塊, 配上(shàng)簡潔的(de)文字或圖标, 去掉各種投影、水晶效果等特效, 凸顯以(yǐ)内容爲(wéi / wèi)主。這(zhè)種以(yǐ)内容爲(wéi / wèi)主的(de)簡潔化設計風格越來(lái)越流行。但是(shì)不(bù)見得所有的(de)用戶或者所有的(de)使用者都适用這(zhè)種風格。不(bù)同性質的(de)網站有不(bù)同的(de)需求, 科技網站、藝術網站、音樂網站、商業網站等, 都會有一(yī / yì ／yí)些不(bù)同的(de)個(gè)性。設計師不(bù)能因爲(wéi / wèi)某種風格流行, 或喜歡某種風格, 就(jiù)想盡辦法在(zài)當前的(de)設計項目中體現出(chū)來(lái), 最後這(zhè)種風格的(de)視覺效果往往有點不(bù)倫不(bù)類。

2、版式

網站的(de)版式設計是(shì)受内容限制的(de)。一(yī / yì ／yí)個(gè)網站的(de)内容不(bù)是(shì)單一(yī / yì ／yí)的(de), 越是(shì)綜合類網站, 内容分類越是(shì)繁雜, 那麽對于(yú)繁雜的(de)内容來(lái)講, 哪類内容放在(zài)首頁?哪類内容放在(zài)次要(yào / yāo)的(de)頁面?甚至哪些内容放在(zài)首頁的(de)首屏?這(zhè)些内容的(de)分布排列對網站設計起着重要(yào / yāo)的(de)作用。繪制這(zhè)些内容邏輯分布的(de)過程就(jiù)是(shì)繪制線框圖。線框圖不(bù)僅僅是(shì)用來(lái)給設計師進一(yī / yì ／yí)步美化的(de)依據, 也(yě)是(shì)前端開發人(rén)員書寫浏覽器程序的(de)時(shí)候參考。一(yī / yì ／yí)個(gè)懂網站設計的(de)人(rén), 從線框圖就(jiù)能看出(chū)這(zhè)個(gè)網站的(de)根本。一(yī / yì ／yí)個(gè)頁面的(de)闆式設計需要(yào / yāo)“從内而(ér)外的(de)矩形”。從前端技術的(de)角度來(lái)分析, 網站設計其實就(jiù)是(shì)在(zài)一(yī / yì ／yí)個(gè)大(dà)的(de)矩形 (顯示器) 上(shàng)用HTML語言切割成各種小矩形。每一(yī / yì ／yí)個(gè)矩形裏面切割更精确的(de)矩形用來(lái)實現各個(gè)内容位置的(de)擺放。從設計的(de)角度來(lái)分析, 栅格系統設計、欄的(de)概念都是(shì)方塊的(de)設計, 就(jiù)像做拼圖一(yī / yì ／yí)樣, 用各種方塊按着需求來(lái)進行各種大(dà)小、位置的(de)排列組合。哪怕是(shì)圓形的(de)圖片, 其根本也(yě)是(shì)一(yī / yì ／yí)個(gè)矩形, 隻是(shì)圓周圍是(shì)透明的(de)而(ér)已。所以(yǐ)一(yī / yì ／yí)個(gè)網站的(de)基礎版式分布, 就(jiù)是(shì)規劃各種矩形的(de)排列組合。

3、字體

網站的(de)進一(yī / yì ／yí)步美化過程, 其實就(jiù)是(shì)在(zài)線框圖的(de)布局基礎上(shàng), 用顔色、字體、圖片等手段進行畫面的(de)裝飾過程。一(yī / yì ／yí)個(gè)出(chū)色的(de)網站一(yī / yì ／yí)定有着出(chū)色的(de)字體設計。出(chū)色的(de)網頁設計師會用單純的(de)字體樣式排列出(chū)非常适于(yú)閱讀, 又能體現出(chū)網站風格的(de)視覺效果。網站字體的(de)選擇不(bù)能随設計師喜好随意運用, 要(yào / yāo)考慮到(dào)當不(bù)同的(de)用戶打開該頁面的(de)時(shí)候, 如果浏覽者計算機上(shàng)沒有安裝這(zhè)種字體, 用戶浏覽器默認的(de)字體是(shì)否能很好地(dì / de)顯示該内容?所以(yǐ), 網站字體都會選擇系統必然會有的(de)常規字體。但像按鈕、欄目标題等特殊部分, 由于(yú)不(bù)會經常變動更新, 可以(yǐ)選擇比較特别的(de)字體, 但需要(yào / yāo)轉換成圖片, 前端開發人(rén)員以(yǐ)圖片的(de)形式來(lái)運用這(zhè)個(gè)部分。一(yī / yì ／yí)個(gè)網頁如果選擇宋體字, 字體大(dà)小不(bù)宜小于(yú)12像素, 因爲(wéi / wèi)宋體字中橫過于(yú)細, 太小會影響字體的(de)顯示。因爲(wéi / wèi)不(bù)少字體隻專門處理了(le／liǎo)常用的(de)幾個(gè)偶數字号, 所以(yǐ)爲(wéi / wèi)了(le／liǎo)便于(yú)各個(gè)浏覽器兼容, 顯示效果一(yī / yì ／yí)緻, 網頁字體大(dà)小的(de)選擇一(yī / yì ／yí)般是(shì)偶數, 有些浏覽器會默認爲(wéi / wèi)靠近的(de)偶數字号顯示。

4、圖片

一(yī / yì ／yí)個(gè)優質的(de)圖片能給産品或企業帶來(lái)好的(de)印象。現在(zài)很多網站首屏都是(shì)應用越來(lái)越大(dà)的(de)圖片, 并且通過手動或自動切換圖片顯示。這(zhè)些圖片可能是(shì)一(yī / yì ／yí)個(gè)優秀的(de)攝影作品, 也(yě)可能是(shì)一(yī / yì ／yí)個(gè)優秀的(de)平面廣告等, 這(zhè)些圖片都是(shì)精心設計過的(de), 擁有良好的(de)品質。爲(wéi / wèi)了(le／liǎo)讓用戶有更好的(de)網站體驗, 很多圖片都是(shì)以(yǐ)小圖當預覽圖, 點擊之(zhī)後才顯示相應的(de)完整圖片, 這(zhè)樣的(de)好處是(shì)能在(zài)不(bù)确定用戶需要(yào / yāo)哪個(gè)圖片的(de)時(shí)候盡量快速地(dì / de)讓用戶看到(dào), 有利于(yú)網站的(de)優化體驗和(hé / huò)增加網站浏覽速度, 有些網站圖片提供放大(dà)鏡效果, 當鼠标移動進入到(dào)圖片的(de)區域時(shí)會展示相應的(de)局部大(dà)圖, 這(zhè)種效果一(yī / yì ／yí)般在(zài)淘寶等購物網站較多, 便于(yú)用戶查看商品細節。另外, 現在(zài)很多以(yǐ)圖片爲(wéi / wèi)主的(de)網站都以(yǐ)“瀑布流”的(de)方式展示圖片, 這(zhè)種效果在(zài)HTML5和(hé / huò)Javascript技術普及後越來(lái)越多。

5、交互性

一(yī / yì ／yí)緻性的(de)交互方式可以(yǐ)讓用戶更好理解整個(gè)網站的(de)操作, 從而(ér)提升浏覽效率, 不(bù)能到(dào)處都是(shì)不(bù)同的(de)交互方式, 會帶給人(rén)淩亂的(de)感覺。交互需要(yào / yāo)提供反饋。例如鼠标移動到(dào)一(yī / yì ／yí)個(gè)新聞标題鏈接按鈕的(de)時(shí)候, 需要(yào / yāo)一(yī / yì ／yí)定的(de)反應會帶來(lái)良好的(de)操作體驗。界面要(yào / yāo)始終保持和(hé / huò)用戶的(de)溝通。又如一(yī / yì ／yí)個(gè)注冊頁面, 現在(zài)常見的(de)交互方式是(shì)運用AJAX技術, 當輸入完用戶名的(de)時(shí)候會自動和(hé / huò)數據庫中的(de)信息進行比對, 檢測是(shì)否有人(rén)注冊, 然後在(zài)用戶輸入框旁邊直觀地(dì / de)顯示, 這(zhè)帶給人(rén)以(yǐ)非常好的(de)交互體驗。網站交互設計還要(yào / yāo)方便使用。實現目标功能的(de)最少操作數、鼠标最短距離移動原則等。交互性的(de)最根本的(de)目的(de)其實就(jiù)是(shì)爲(wéi / wèi)了(le／liǎo)更好地(dì / de)讓用戶愉悅的(de)體驗網站。所以(yǐ)一(yī / yì ／yí)切設計原則都是(shì)以(yǐ)此爲(wéi / wèi)标準, 從技術和(hé / huò)設計的(de)角度去調整。