網站(zhàn)建設

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

1、風格

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

2、版式

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

3、字體(tǐ)

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

4、圖片

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

5、交互性

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