導語：商務網(wǎng)站網(wǎng)頁前端界面設計探討一文來源于網(wǎng)友上傳，不代表本站觀點，若需要原創(chuàng)文章可咨詢客服老師，歡迎參考。

摘要：在商務網(wǎng)站的網(wǎng)頁前端界面設計過程中，作為設計師要設計出商家、客戶都滿意的商務網(wǎng)站，就應該遵循商務網(wǎng)頁設計的基本原則，就在網(wǎng)頁前端界面設計中的基本原則：對明確商務網(wǎng)站的目標和用戶需求、把握好網(wǎng)頁界面設計的一致性與變化性、色彩搭配的和諧性、掌控好網(wǎng)頁元素的調(diào)和性與對比性、用好字體原則、多媒體元素及網(wǎng)頁特效的合理應用等方面進行了探討。

關(guān)鍵詞：商務網(wǎng)站；網(wǎng)頁設計；基本原則；探討

在互聯(lián)網(wǎng)的世界里，映入瀏覽者眼簾的會有各式各樣的商務網(wǎng)站，對于商家而言，要達到商業(yè)目的，網(wǎng)頁就要有吸引瀏覽者眼球的網(wǎng)頁元素來呈現(xiàn)信息內(nèi)容，也就是通過網(wǎng)頁來展示商家的產(chǎn)品及成果信息，彰顯商家的內(nèi)涵，提升商家形象，重要的是通過電子商務活動能使商家的利潤增長。要使以上目的得以順利實現(xiàn)，網(wǎng)頁前端界面設計師就必須把握好商務網(wǎng)頁設計的基本原則。就商務網(wǎng)站的網(wǎng)頁前端界面設計的基本原則，展開探討。

1明確商務網(wǎng)站的目標和用戶需求

設計師必須明確建站目標和用戶需求，設計之初，設計師應具備網(wǎng)頁前端界面設計的技術(shù)積累，并有動態(tài)了解當前網(wǎng)站及網(wǎng)頁的新潮流、新技術(shù)的習慣，在此基礎(chǔ)上，應積極與業(yè)主（即商家）溝通，頃聽他們的訴求，結(jié)合目標用戶的需求、商家的特點、市場的情況、流行的因子等因素來綜合調(diào)研分析，并經(jīng)合作團隊的反復論證，做出切實可行的項目任務書。項目開展后，進行設計時，要有顧客就是上帝的理念，切忌單純以藝術(shù)角度為中心，而應以用戶為中心來進行網(wǎng)頁前端界面的設計規(guī)劃。其中，重點就是注重用戶需求，如潛在用戶想要什么，想用什么，他們的關(guān)注熱點在哪里，作為商家能提供什么的產(chǎn)品與服務，用怎樣的頁面形式來表現(xiàn)才能滿足要求等，這些因素在建站之初商家與設計師必須考慮清楚。只有明確了建站目標與用戶需求，就能夠準確地確定整個網(wǎng)站的主題，這樣，才能為網(wǎng)頁前端界面的設計的成功打下良好的基礎(chǔ)。

2把握好網(wǎng)頁界面設計的一致性與變化性

網(wǎng)頁前端界面設計就是網(wǎng)頁的頁面設計，講究布局與內(nèi)容編排。網(wǎng)頁頁面設計，就是用文字、圖形等網(wǎng)頁元素的組合構(gòu)成網(wǎng)頁，通過設計師的藝術(shù)表達，從而設計出優(yōu)秀的網(wǎng)頁。一個網(wǎng)站是由數(shù)十張乃至數(shù)百張網(wǎng)頁組成的，一致性就是秩序，遵守這個秩序就是通常說的要風格統(tǒng)一。但是如果每個網(wǎng)頁過分統(tǒng)一也會降低可讀性和吸引力，要使網(wǎng)站的網(wǎng)頁在保持整體風格一致的前提條件下有變化，設計師就要處理好網(wǎng)頁前端界面設計中的一致與變化的這對矛盾體，使之有機統(tǒng)一。關(guān)鍵就是要圍繞網(wǎng)站的主題，首先做好主頁的界面設計，保證主頁本身的鮮明突出、要點明確，主頁界面設計形成了風格特點，才能談其他頁面的一致性。在網(wǎng)站中主頁、分主頁及其他對應的頁面中，它們之間是有內(nèi)在聯(lián)系的，設計時必須要呈現(xiàn)出來，要在守好一致性的秩序，處理好各頁面的風格及內(nèi)容的內(nèi)在聯(lián)系的基礎(chǔ)上，才去藝術(shù)地、合適地活用變化性。比如，利用網(wǎng)頁特效的形式來進行在線營銷時，要想既叫好又叫座的話，即又要達到預期的營銷目的，又能呈現(xiàn)最佳的頁面視覺效果，就需要設計師的經(jīng)驗，要科學合理地、有藝術(shù)水準地去進行整體的規(guī)劃布局。如需要推介某件商品時，有商品的名稱、型號、功能，還有價格等參數(shù)，如何將這些枯燥的參數(shù)讓客戶能主動去了解，這時就要考量設計師的功力了，是采用簡潔的文本信息、華麗并有吸引力的圖像、多媒體表現(xiàn)手法，還是直接用網(wǎng)頁特效呈現(xiàn)，這些都需要設計師周到的考慮，目的就是要登錄網(wǎng)站的瀏覽者有舒服的視覺體驗，流暢的操作，來促成登錄瀏覽者購買行為的成功。整個網(wǎng)站的網(wǎng)頁前端界面的布局應該在做到主次分明，突出重點；導航清晰，瀏覽便利，布局合理，邏輯性強的前提下，做好相對保持一致且有合理的變化，即把握好一致性與變化性。另外，作為設計師，在頁面具體的規(guī)劃上，還要注意一些小細節(jié)，比如對于一個頁面寬度，尤其是主頁，左右不宜拖動，最好是一屏的寬度；而頁面高度，上下可以拖動，但不宜過長。

3色彩搭配的和諧性

關(guān)于色彩，其實早就有科學家證明了這點：人們對色彩是非常敏感的，人們會對不同的顏色會產(chǎn)生不同的生理反應。色彩在一定的條件下能刺激和吸引人的視覺。由于人的年齡、性別、學歷、社會閱歷、職業(yè)、社會地位、興趣愛好及習慣等的不同，就形成了人們千差萬別的審美情趣，作為設計師，進行網(wǎng)頁前端界面設計，就要根據(jù)要求的不同，創(chuàng)造出各具特色色彩搭配，來滿足各種不同人群的審美需求。當瀏覽者打開一個網(wǎng)站，瀏覽網(wǎng)頁的時候，往往不會是先看其他網(wǎng)頁元素，而在直覺上，首先關(guān)注的應該是色彩。作為網(wǎng)頁前端界面設計師，要從藝術(shù)的角度去重視色彩搭配，要了解色彩的特性，學會與色彩溝通，體會色彩的奧秘，人們常說，只有把創(chuàng)意融入色彩設計里，設計才有靈魂。一個設計，肯定包含3個元素：色彩、圖像、文字，其中最重要的就是是色彩。而一個好的頁面設計，肯定會有好的配色方案。配色方案即是色彩搭配，可根據(jù)網(wǎng)站的設計目標、主題、使用人群設計出不同的配色方案，配色方案的選擇往往是決定網(wǎng)站成敗的一個關(guān)鍵因素。作為設計師，通常通過不同顏色來呈現(xiàn)網(wǎng)站風格定位，表達情感和意圖。一般的配色原則是：整個網(wǎng)站的色系要保持一致；若商家有企業(yè)視覺形象識別系統(tǒng)（CIS），網(wǎng)站就應該使用商家原有CIS顏色，來體現(xiàn)商家的文化形象；盡量使用瀏覽器支持的216個Web安全顏色；遵循三色原則：除了黑色和白色以外，主要顏色不要超過3種；網(wǎng)頁元素應該選擇與網(wǎng)站主體相一致的色調(diào)；圖像的顏色應該盡可能少，減小圖片尺寸。

4掌控好網(wǎng)頁元素的調(diào)和性與對比性

網(wǎng)頁元素一般有：標志（Logo）、導航條、文本、圖像、表格、表單、超鏈接、多媒體元素等。這些元素通過網(wǎng)頁界面設計有機地組合在一起，構(gòu)成了網(wǎng)頁。使這些權(quán)重不同的網(wǎng)頁元素放在一起，讓它們和諧地融合，通過頁面布局組合成頁面，而頁面之間的風格也能一致協(xié)調(diào)，這就是人們常說的調(diào)和性。為了使不同的頁面中網(wǎng)頁元素搭配協(xié)調(diào)、架構(gòu)一致，就需要調(diào)和。頁面由網(wǎng)頁元素構(gòu)成，它們的重要性各不相同，一些元素之間是有關(guān)聯(lián)的，但有些是沒有關(guān)聯(lián)，如何讓對比性發(fā)揮作用，讓它們在頁面中有效地、自然地表達出來，這就需要設計師的用心。在一個頁面中，可以在某個區(qū)域利用二個或二個以上的頁面元素產(chǎn)生對比效果來吸引用戶，但如果所有頁面的元素都作同樣處理，頁面會變得單調(diào)無味。就像人們平時所說的，會審美疲勞，用戶瀏覽內(nèi)容時會很快跳轉(zhuǎn)他網(wǎng)站的頁面，留不住瀏覽者的訪問。所以作為設計師，在頁面設計時也要用好對比性。作為設計師，頁面引入元素時要充分考慮調(diào)和性與對比性原則，在進行網(wǎng)頁整體設計時，設計師要充分考慮商務網(wǎng)站的設計初衷，網(wǎng)頁元素在頁面布局中如何規(guī)劃，頁面間的設計如何體現(xiàn)它們之間的聯(lián)系，這些都很重要，是考量設計師的功力，網(wǎng)頁元素的合理使用，視覺的吸引，整體合理布局，設計師都要充分考慮，用心設計，比如，頁頁布局中，常見的網(wǎng)頁布局形式有：“廠”字型、“口”字型、對稱布局、“同”（或“國”）字型、POP布局、“三”字型等，使用哪種形式，設計師就要根據(jù)商家設計目標和用戶需求充分考慮，結(jié)合上述的調(diào)和性與對比性原則，進行合理的選擇與規(guī)劃。

5用好字體原則

網(wǎng)頁中最基本的頁面元素是文字，作為設計師，必須遵循好字體原則：正文英文字體：TimeNewRoman/Ar-ial；正文中文字體：宋體，12像素或14像素；特殊效果字體應放在圖像中，如帶有特效的標題上、廣告條等；段落行文本不宜過長，不要橫跨整個瀏覽器窗口；改變頁邊距、行邊距和顏色增加字體效果；字體在整個網(wǎng)站中保持一致性，同類型的數(shù)據(jù)或信息應使用同一種字體。

6多媒體元素及網(wǎng)頁特效的合理應用

在網(wǎng)頁前端界面設計中，設計師總喜歡在頁面中加入多媒體元素，如動畫、影片等，或直接應用網(wǎng)頁特效，以豐富動感和流媒體特有效果，來吸引住瀏覽者的注意力。隨著HTML5+CSS3的應用，網(wǎng)頁特效使用日益豐富，作為設計師，越來越喜歡使用最新的網(wǎng)頁特效，特別是在商務網(wǎng)站中的頁面應用越來越廣泛。現(xiàn)在一打開電子商務網(wǎng)站，各網(wǎng)站的頁面上呈現(xiàn)的都是網(wǎng)頁特效下的比拚，比誰的新，誰的酷，誰的實用。在頁面中無論加入網(wǎng)頁特效，還是加入多媒體元素，都要有個度，應用要合理，合適為度，要把握頁面中元素與頁面整體的動與靜。不宜應用過多，以免造成喧賓奪主。作為設計師，要合理地應用多媒體元素與網(wǎng)頁特效。

7結(jié)語

在商務網(wǎng)站的網(wǎng)頁前端界面設計過程中，設計師必須在不斷地學習中前行，在實踐中點點滴滴地積累經(jīng)驗，去研究、有意識地運用這些網(wǎng)頁前端界面設計的規(guī)律，不斷地完善商務網(wǎng)頁設計的基本原則，追求一種和諧的單純，把美的形式規(guī)律同網(wǎng)頁設計結(jié)合起來，才能設計出商家、客戶都滿意的商務網(wǎng)站。

參考文獻

[1]劉丹.網(wǎng)頁設計的原則與要求[J].鹽城:鹽城師范學院學報(人文社會科學版),2016,（5）：97-99.

[2]王玉芹.淺談網(wǎng)頁設計的基本原則[J].北京:中國科技投資,2013,(10):84.

[3]劉艷麗.網(wǎng)頁設計與制作實用教程[M].3版.北京：高等教育出版社,2015.

作者:周海 吳小瑩 單位:北海職業(yè)學院