淺析當(dāng)今網(wǎng)頁制作中的關(guān)鍵事項(xiàng)

（上海理工大學(xué)公共實(shí)驗(yàn)中心200093）

互聯(lián)網(wǎng)時(shí)代下的設(shè)計(jì)日新月異，相對(duì)設(shè)計(jì)學(xué)這門學(xué)科，網(wǎng)頁的設(shè)計(jì)應(yīng)用占有了一席之地。網(wǎng)站設(shè)計(jì)得好，是要讓頁面容易被人識(shí)別，便于使用和被搜索，那么網(wǎng)頁設(shè)計(jì)有何講究，有什么值得注意的設(shè)計(jì)要素呢？隨著時(shí)代發(fā)展，這將是一個(gè)值得我們不斷深入的話題。

一、頁面尺寸設(shè)置

網(wǎng)頁的設(shè)計(jì)，首先應(yīng)從尺寸開始。所謂尺寸，是頁面的高度與寬度，設(shè)計(jì)者可根據(jù)實(shí)際的使用環(huán)境，將其分為不同載體。尺寸一般使用分辨率來表示，一像素單位為px，px值設(shè)置為72px用于電子屏幕顯示，在印刷品上我們?cè)O(shè)置為300px，配合計(jì)量單位。目前根據(jù)載體的不同，尺寸也被區(qū)分為了電腦屏幕尺寸，手機(jī)尺寸等，列如：電腦屏幕側(cè)重于大面積的展示體驗(yàn)，手機(jī)則是小屏幕的便捷顯示，由于在小屏幕上觀看大尺寸頁面，頁面字體會(huì)顯得稀小，所以通常需設(shè)計(jì)兩種尺寸。雖然目前流行的html5簡化了這些操作，但如果想通用兩種不同尺寸，也需要留意許多細(xì)節(jié)。

確定設(shè)計(jì)頁面的寬度是較為容易的，但由于頁面缺少自適應(yīng)能力，無法根據(jù)屏幕的大小來進(jìn)行縮放，這樣無法全顯核心區(qū)域的內(nèi)容。根據(jù)市面上一般電腦的寬度，最小在1200像素左右，文字的區(qū)域被控制在1000到1200px區(qū)間內(nèi)，延伸寬度為大屏幕做準(zhǔn)備。如果無左右延伸區(qū)域，在大面積的顯示上將會(huì)顯示得十分緊湊。關(guān)于頁面高度的設(shè)置，基于內(nèi)容多或少而定，通常不應(yīng)超過3屏。頁面過長一是不便于瀏覽者觀看，二是會(huì)導(dǎo)致頁面加載緩慢，影響使用體驗(yàn)。因此高度在3000px內(nèi)更利于瀏覽。

二、設(shè)計(jì)色彩色調(diào)

對(duì)于設(shè)計(jì)者來說，色彩是至關(guān)重要的一個(gè)環(huán)節(jié)，每個(gè)頁面都應(yīng)具有獨(dú)特的風(fēng)格，風(fēng)格屬于調(diào)性，做設(shè)計(jì)首先要決定調(diào)性，這是最關(guān)鍵的第一步。色彩應(yīng)用給人視覺第一官感，這便是視覺傳達(dá)的“首輪效應(yīng)”，這種視覺上的沖擊力強(qiáng)弱，另一層面上看作為指向性體現(xiàn)，主題的體現(xiàn)。在《視覺錘》中的比喻，語言是釘子，視覺是錘子，好的釘子要想打入用戶心中，就要用視覺的錘子，通過觀察者的眼睛，敲進(jìn)心里，鎖定心智。雖然聽上去尤為激烈，但在實(shí)際應(yīng)用中卻鑿實(shí)有效。

色彩與色調(diào)，本無好壞，搭配與協(xié)調(diào)中應(yīng)符合視覺的呈現(xiàn)形式，符合形式美法則。形式美法則是人類在創(chuàng)造美的過程與形式中總結(jié)的經(jīng)驗(yàn)及抽象概括。包括了對(duì)稱均衡、單純齊一、調(diào)和對(duì)比及多樣統(tǒng)一。另外，在三大構(gòu)成中，平面構(gòu)成、色彩構(gòu)成和立體構(gòu)成，其中平面構(gòu)成和色彩構(gòu)成也可常運(yùn)用在頁面設(shè)計(jì)中。如何選擇合適的色彩？首先要看所涉及的行業(yè)屬性，其次看所要求表現(xiàn)的情緒基調(diào)，最后合理搭配，謹(jǐn)慎選擇配色。設(shè)計(jì)需要符合“科學(xué)法則”及“形式美法則”，看似雜亂無章的規(guī)劃，假如觀者覺得上心，覺得舒適，那么這個(gè)頁面也就符合了“形式美法則”。

關(guān)于配色（色相）問題，不同的行業(yè)也有著一套不同的標(biāo)準(zhǔn)，類似電商促銷時(shí)，用紅色黃色為主基調(diào)，給人沖動(dòng)感、激情感，讓人產(chǎn)生消費(fèi)沖動(dòng)。金融類的網(wǎng)頁選用藍(lán)色、橙色，因?yàn)樗{(lán)色給觀者信任感，橙色給人親和力。色彩還要考慮另外兩個(gè)指標(biāo)，明度和純度，也就是明亮度與飽和度。在明度上，色彩愈加明亮就愈加給人情緒感，在純度上純度越高，越刺激情緒。而色相則分為冷暖色，冷色系和暖色系的區(qū)分，一般用在區(qū)別邊界比較明顯的環(huán)境下，與網(wǎng)頁的作用屬性相匹配。這些色彩知識(shí)，作為一個(gè)設(shè)計(jì)師要爛熟于心，看似簡單的設(shè)計(jì)用色，都需美學(xué)原理來支撐。

三、版面設(shè)計(jì)和文字設(shè)計(jì)

網(wǎng)頁版面的設(shè)計(jì)必須要有有效的傳達(dá)方法。舉個(gè)例子，人類眼球結(jié)構(gòu)中，視覺有效部分占有比列非常小，這促使了人類在一定的時(shí)間限定內(nèi)所接受的信息量是非常有限的。我們?cè)陂喿x瀏覽的時(shí)候，視覺習(xí)慣上的流動(dòng)性，容易被視覺元素影響，因此在版面設(shè)計(jì)的過程中，利用這種因素，可引導(dǎo)用戶進(jìn)行瀏覽網(wǎng)頁上的信息。完善的排版設(shè)計(jì)，要有豐富有條理的特點(diǎn)，布局要有調(diào)理但不失合理性，采用適當(dāng)?shù)姆绞絹砼帕?，使網(wǎng)頁的布局具有突出的協(xié)調(diào)性。對(duì)于細(xì)節(jié)的描述和介紹，這個(gè)部分不能過于搶鏡，處在次要位置屬于合理。

在網(wǎng)頁中的文字主要功能是傳遞各類信息，并非僅僅是裝飾，為了提高視覺信息的傳遞效率，在進(jìn)行網(wǎng)頁文字的設(shè)計(jì)時(shí)，將文字整體的編輯效果加入，給用戶清晰的視效體驗(yàn)，避免網(wǎng)頁中出現(xiàn)雜亂失序的現(xiàn)象，使用戶在瀏覽是能夠更迅速的接收信息，感知信息。

說到文字設(shè)計(jì)不得不提字體，絕大多數(shù)的網(wǎng)頁字體都是系統(tǒng)固有的，但在一些元素中需要注意字體的“性格”。字體分為襯線體、無襯線體、書法體、以及裝飾體。在網(wǎng)頁設(shè)計(jì)中設(shè)計(jì)者使用裝飾體居多，裝飾體在表現(xiàn)力上的呈現(xiàn)效果最突出，字體多數(shù)為粗體字。針對(duì)這類字體的合并、切割、扭曲等操作，可以更加容易變現(xiàn)主題信息，當(dāng)然，主題信息的剛烈或親和，就需要通過頁面的策劃和文案來判定了。

四、頁面按鈕

頁面中的按鈕，設(shè)計(jì)者一般使用PNG圖片，嵌入頁面內(nèi)，按鈕有著鮮明的區(qū)分性質(zhì)，不同功能的目標(biāo)明確。按鈕的位置也應(yīng)注意，在banner部分的按鈕起到導(dǎo)航區(qū)域的作用，可將按鈕放置于細(xì)則頂部，這就像用戶決定的觸發(fā)點(diǎn)，用戶需要的是一目明了的體驗(yàn)，選擇按鈕時(shí)間越長，按鈕的作用就越淡化，甚至于用戶找不到正確的引導(dǎo)。所以設(shè)計(jì)者要在適當(dāng)?shù)奈恢梅胖谜_的按鈕，讓網(wǎng)頁的各項(xiàng)功能更加便捷。

五、結(jié)語

綜上所述，本文對(duì)網(wǎng)頁設(shè)計(jì)要素進(jìn)行了簡要解析，一個(gè)優(yōu)秀的網(wǎng)頁設(shè)計(jì)應(yīng)該具備三個(gè)標(biāo)準(zhǔn)：功能性、信息傳遞的有效性、審美性。本文著重探究頁面尺寸、色彩色調(diào)、版面、文字、按鈕的設(shè)計(jì)上對(duì)當(dāng)今網(wǎng)頁設(shè)計(jì)中的主要因素進(jìn)行了探究。時(shí)至今日，網(wǎng)頁設(shè)計(jì)早已從最開始簡單的信息呈現(xiàn)發(fā)展至今圖形化風(fēng)格，在進(jìn)行網(wǎng)頁設(shè)計(jì)的時(shí)候我們要利用這些重要的操作要素和設(shè)計(jì)潮流，融入受眾的需求和審美特點(diǎn)，這些正是網(wǎng)頁設(shè)計(jì)師們應(yīng)要去追求的。