建站指南：如何設(shè)計漂亮的網(wǎng)站？

上海網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)告訴你，如何設(shè)計漂亮的網(wǎng)站?一個網(wǎng)站是企業(yè)的門面，給訪問者的第一感覺很重要，同時，也為將來促成打下了一個基礎(chǔ)，上海網(wǎng)站建設(shè)公司以多年實踐經(jīng)驗告訴大家，網(wǎng)站不是一上來就是很多的漂亮圖片，嚴重影響客戶體驗，甚至還可能增加網(wǎng)站的加載速度，所以就需要美工設(shè)計出符合企業(yè)形象的網(wǎng)頁設(shè)計，切記不要使用模板一類的網(wǎng)頁，設(shè)計漂亮的網(wǎng)站同時還需要不斷優(yōu)化網(wǎng)站結(jié)構(gòu)、內(nèi)容信息，服務(wù)等網(wǎng)站建設(shè)基本的要素設(shè)計，最終目的是使得網(wǎng)站更便捷，讓用戶充滿信任，最終獲得一定的依賴。

1、設(shè)計漂亮的網(wǎng)站之登陸頁面設(shè)計

登陸頁面是網(wǎng)站的入口，就像我們的家、公司的門一樣。試想我們處在一個四周都是門的環(huán)境，我們會選擇推開哪一扇門?這一扇門哪些地方有吸引我們推開的魅力?我們能否準確找到這扇門的把手?其實這些問題同樣適用于登錄頁面，對于登錄頁面，是否有足夠的魅力讓用戶在登錄過程中不感到煩躁，是否能準確的區(qū)分所要填寫的信息，是否能準確找到登錄或注冊按鈕，這些元素的視覺層級與交互關(guān)系，直接影響著整個頁面的體驗。

一般來說，登陸頁面包括5個元素：：LOGO、登陸框、廣告圖、幫助中心、底部導(dǎo)航。在這五個元素中，logo是必不可少的，logo是企業(yè) 產(chǎn)品的品牌象征，而登陸框是是用戶進入這個頁面最終的意圖。Logo與登陸框已經(jīng)構(gòu)成了最簡單的登錄頁面。隨著用戶體驗的提升已經(jīng)情感化的設(shè)計，廣告圖、幫助中心與底部導(dǎo)航也逐步的體現(xiàn)在了登錄頁面。

譬如品牌類登陸頁面是由logo與登陸兩個組成，頁面的質(zhì)感就會比較強，操作性也比較強，用戶在這樣登陸頁面能夠很快的完成填寫和登陸，同時還能加深對品牌的了解，整個頁面也會呈現(xiàn)一種天然的不叫理性的設(shè)計，沒有任何的視覺干擾。如果硬要說是有干擾的話，可能干擾的對象就是設(shè)計師們，設(shè)計師對高質(zhì)感的設(shè)計都有很敏銳的觀察力，頁面中的設(shè)計細節(jié)(如漸變、陰影、高光等)可能會讓設(shè)計師短時間內(nèi)停下來觀察，隨后快速完成注冊。

還有就是，有趣味性的登陸頁面設(shè)計，當這種風(fēng)格的登錄頁面展現(xiàn)在用戶眼前時，用戶的第一視覺中心往往實在這個圖片上，其次才會看登錄框。但這些廣告圖又很好的傳達了產(chǎn)品的相關(guān)信息，如：品牌(是什么產(chǎn)品)、性質(zhì)(這個產(chǎn)品是用來做什么的)，或者傳達一種節(jié)日的氛圍(春節(jié)、國慶等)。雖然第一視覺中心不在登錄框上，但這些廣告圖又很好的詮釋了這個產(chǎn)品的涵義，加深了用戶對此產(chǎn)品的認識，同時，這些廣告圖趣味性比較強，雖然是廣告，但并不會讓用戶感到反感。還有一種相似的廣告圖，廣告本身與此產(chǎn)品關(guān)系并不大，這些圖的內(nèi)容更多的實在表現(xiàn)一種意境，一種情感，像是回憶、憧憬、幻想、童話等，能讓用戶進入一種意境中，產(chǎn)生共鳴。

再就是，情景類登陸頁面設(shè)計，這種全背景的登錄頁，用大背景圖來烘托出比較隨性的情境，在登錄框設(shè)計上，感覺比較輕松不拘束。比較適合用在個人空間、博客等產(chǎn)品中。

可以說，登陸頁面廣告圖的變化，很多時候都見證了產(chǎn)品品牌到產(chǎn)品理念的過渡變化，第一階段宣傳品牌的時候，大都以直白的產(chǎn)品特性為宣傳點，隨著產(chǎn)品的不斷運營，第二階段就是產(chǎn)品的趣味性包裝，使產(chǎn)品的特性多了一些寓意，在接下來的階段，則是不斷融入情感化的設(shè)計，事實上，情感上的文字可以使用戶加深對品牌的認知，甚至產(chǎn)生依賴，這時，公司品牌的目的也就是達到了。

2、設(shè)計漂亮的網(wǎng)站之頁面配色

因為一些行業(yè)網(wǎng)站內(nèi)容是嚴謹、高端的，涉及行業(yè)資訊、技術(shù)交流、企業(yè)的營銷理念等，在整個網(wǎng)站中則充滿了濃厚的商業(yè)氣息。

拿b2b行業(yè)來說，藍色、紅色、黃色是b2b行業(yè)的主要色調(diào)，往往都是配合著使用，當然了，在使用的過程中，往往還融入其他的顏色，或者是這三中顏色的漸變色。

忌諱使用如下幾種顏色為主色調(diào)：綠色，綠色更多的象征大自然、純潔、天然等含義，不符合B2B行業(yè)網(wǎng)站的嚴謹、商業(yè)兩個特點，可作為橙色、紅色等的搭配顏色，但是建議不能作為主色調(diào)，粉紅色，這種顏色更多表達的是女性化、溫馨的氛圍，就算是以女性產(chǎn)品為特色的行業(yè)，也不能使用，作為搭配顏色也盡量少用，畢竟與用戶需求相差太遠，黑色：黑色、灰色是頁面絕大部分文字可以采用的顏色，但是不能作為B2B行業(yè)網(wǎng)站的主色調(diào)。

頁面的標題欄和導(dǎo)航欄更多要方形的、規(guī)則的，作為企業(yè)網(wǎng)站、時尚類型的網(wǎng)站，或者為了表達時尚、活潑的主題，網(wǎng)站的設(shè)計可以比較活潑一些，多采用圓形或不規(guī)則的排版方式，但是作為B2B行業(yè)網(wǎng)站，就不能這樣設(shè)計，每個部分要具有明顯的區(qū)分，每個區(qū)域都是規(guī)則的，使用的圖片、背景都是嚴謹?shù)摹２荒馨褕D片斜放、用很大的橢圓形、用很大的圖標、用卡通的圖標、活潑的圖形等來設(shè)計網(wǎng)站的標題欄和導(dǎo)航欄。

整體風(fēng)格應(yīng)嚴謹、充滿商業(yè)氛圍，網(wǎng)站的整體風(fēng)格比用色、標題欄設(shè)計更加重要，某個搭配顏色比較活潑、時尚一些，并不會影響整體的風(fēng)格。某個圖片不規(guī)則，或者網(wǎng)頁里的內(nèi)容圖片不規(guī)則，也不會對整體的感覺產(chǎn)生多大影響。整體的頁面風(fēng)格不能花哨，要降低框架、背景等對閱讀內(nèi)容的影響，降低頁面的噪聲，整體風(fēng)格要淡雅，讓訪問的人靜下心來思考。

內(nèi)容和功能決定表現(xiàn)形式和界面設(shè)計，頁面設(shè)計是沒有一個固定標準的，很多時候不能用美丑來判斷，也不能用是否有創(chuàng)意來判斷，而應(yīng)該綜合分析這個頁面的訪問者，頁面內(nèi)容、功能。有時候一點創(chuàng)意都沒有，和其他很多網(wǎng)站都是類似的，才是最好的，因為就應(yīng)該是這樣的。任何設(shè)計、功能都是為訪問者、使用者服務(wù)的，設(shè)計者的分析能力遠比創(chuàng)意來的重要，任何一個頁面在設(shè)計之前，設(shè)計師都必須要靜下心來想想，這個頁面在表達什么內(nèi)容，或者說是一個什么樣的功能，根據(jù)內(nèi)容和功能再來確定應(yīng)該具有的表現(xiàn)形式。

要多使用習(xí)慣用法，不要輕易使用一種新用法，所謂習(xí)慣用法，是用戶經(jīng)常使用的網(wǎng)站，或者非常知名的網(wǎng)站用法，往往就是用戶的習(xí)慣，因為知名網(wǎng)站的用戶最多，用戶也是最認可的。相同的功能，或者說不會因為網(wǎng)站的不同而表達方式發(fā)生變化的功能，就可以用習(xí)慣用法。，比如當我們來到一個新網(wǎng)站的時候，常常需要了解這個網(wǎng)站的介紹、主辦方聯(lián)系方式等信息，習(xí)慣就是在網(wǎng)站底部找這些信息，絕大部分的網(wǎng)站底部都有一排的鏈接來表達，如果你設(shè)計網(wǎng)站時，希望很創(chuàng)新，把這些鏈接不放在底部，用戶就會覺得不習(xí)慣。對設(shè)計師來講，那怕這樣的熟悉讓你覺得相似而乏味，一點都沒有創(chuàng)新，你還是要這樣去用。但并不是說我們不需要創(chuàng)新，相反，在策劃、設(shè)計的工作中，需要大膽的創(chuàng)新。

3、設(shè)計漂亮的網(wǎng)站之網(wǎng)站導(dǎo)航

網(wǎng)站導(dǎo)航設(shè)計通常遵循三個原則，網(wǎng)站導(dǎo)航相信大家都不陌生，導(dǎo)航可以引導(dǎo)訪客對整個網(wǎng)站有一個直觀明了的第一印象，因此導(dǎo)航的設(shè)計至關(guān)重要，首先導(dǎo)航要有一定的簡潔明了，華麗精美的導(dǎo)航設(shè)計固然重要，但是過于繁雜的設(shè)計會讓用戶有一種找不到重要信息的錯覺。其次最好采用文字導(dǎo)航，因為畢竟有搜索引擎不能識別的代碼，所以網(wǎng)站導(dǎo)航還是要根據(jù)搜索引擎來設(shè)計。

1)首先確定信息架構(gòu)

規(guī)劃一個大型網(wǎng)站，規(guī)劃好內(nèi)容是進行導(dǎo)航設(shè)計之前的第一要務(wù)。而我們此處所說的信息架構(gòu)，是合理的組織信息的展現(xiàn)形式，支撐起網(wǎng)站內(nèi)容的骨架。信息架構(gòu)的主要任務(wù)是為信息與用戶認知之間構(gòu)建一座暢通的橋梁。從更高的位置來看待網(wǎng)站內(nèi)容有助于信息架構(gòu)的搭建。更重要的是，你得學(xué)會從用戶的角度來看待網(wǎng)站內(nèi)容。這也就意味著，有的時候你得站在正反兩個位置來看待同一個東西，不同視角下你會發(fā)現(xiàn)有的內(nèi)容的呈現(xiàn)方式非常反人類。你可以通過下面的問題來完善整個架構(gòu)：

·哪些頁面是這個網(wǎng)站必不可少的?

·從宏觀架構(gòu)上來看是否每個頁面都有其獨立的目的，它們的存在是否影響整體的連續(xù)性和可靠性?

·有哪些內(nèi)容是需要在將來持續(xù)提供并更新的?

·網(wǎng)站所需要涉及到的用戶群有哪些?(登錄用戶、訂閱用戶、廣告商等等)

·針對每種用戶，網(wǎng)站所要達成的目標是什么?

思考這些問題能夠幫助你更好的完善網(wǎng)站的信息架構(gòu)，為導(dǎo)航設(shè)計做好準備。

2)保持簡單

絕大多數(shù)的網(wǎng)站瀏覽者可能會一致的認同這一點：網(wǎng)站的導(dǎo)航區(qū)域要盡可能設(shè)計的簡單。的確，復(fù)雜而擁擠的導(dǎo)航欄設(shè)計會嚴重阻礙網(wǎng)站的整體可用性。然而，簡單的設(shè)計還是具有欺騙性的。用戶在隨后的操作中會發(fā)現(xiàn)復(fù)雜的信息被以一種看起來簡單的方式包裝了起來。這就是信息架構(gòu)的作用。

以微軟的首頁為例，網(wǎng)站的導(dǎo)航欄被劃分成四個項目，考慮到微軟龐大的產(chǎn)品線，這幾乎已經(jīng)被簡化到了極致。也正是因此，每個項目的下拉菜單都被巧妙地分割成為幾段，這樣一來，導(dǎo)航的層級就清晰了，用戶可以更快地找到他們想要的東西，而微軟也可以將復(fù)雜多樣的產(chǎn)品和服務(wù)，整合到一個看似簡單的導(dǎo)航欄里面。類似迷你站的子頁面中，導(dǎo)航欄也沿用了相同的設(shè)計。菜單的設(shè)置乍一看和首頁很相似，實際上設(shè)計者加入了更多細節(jié)，更有針對性的功能和服務(wù)。

總的來說，這樣的導(dǎo)航欄設(shè)計更加易用了，在保持一致的前提下，也具備更好的預(yù)測性?？紤]到微軟的產(chǎn)品體量，產(chǎn)品所需的頁面數(shù)，微軟官網(wǎng)的設(shè)計很明顯是耗費了大量時間迭代開發(fā)的產(chǎn)物，殊為不易。官網(wǎng)在這樣的組織架構(gòu)之下，不僅讓用戶的體驗更好了，而且對于微軟而言也更加便于管理內(nèi)容。這不僅保持簡單，也簡化了復(fù)雜。

3)謹慎選擇方向

傳統(tǒng)意義上的電腦屏幕方向是橫向的，這也使得縱向下拉菜單，在很長的一段時間里面成為了導(dǎo)航欄設(shè)計的主流方向。這樣的設(shè)計，平衡且少干擾，從設(shè)計的角度上來看是不錯的選擇。作為虛擬現(xiàn)實設(shè)備制造商的Oculus，將導(dǎo)航設(shè)計成為橫向的非常符合他們的設(shè)備的自然邏輯。但是橫向的導(dǎo)航并不一定符合所有的網(wǎng)站的需求，這也是為什么你會看到那么多縱向?qū)Ш降木W(wǎng)站，尤其是在電商領(lǐng)域。彩色的標簽被用來標識不同的品類，縱向的導(dǎo)航設(shè)計，與現(xiàn)實世界中的導(dǎo)購圖冊暗合。這樣的導(dǎo)航符合多品類，多內(nèi)容的信息架構(gòu)，橫向?qū)Ш接迷诖颂帟驗槠奉惡臀淖謨?nèi)容而產(chǎn)生混亂。

一個良好的垂直方向的導(dǎo)航，要設(shè)計好并非易事，尤其是當你的網(wǎng)站內(nèi)容非常多的時候。Jack Jones 的網(wǎng)站是一個很好的學(xué)習(xí)對象。網(wǎng)站導(dǎo)航中的小圖標擁有不錯的可讀性，簡單的形狀包含了可觀的信息，整齊而有力。每點擊一個類別，菜單展開，顯示子類，邏輯清晰。

新工藝新技術(shù)的不斷涌現(xiàn)，使得新的設(shè)計趨勢和新的挑戰(zhàn)源源不斷呈現(xiàn)在我們面前。響應(yīng)式網(wǎng)頁設(shè)計使得桌面上傳統(tǒng)的橫向?qū)Ш皆谝苿佣顺尸F(xiàn)的時候，更多是以縱向?qū)Ш降男问奖憩F(xiàn)出來。導(dǎo)航的設(shè)計不再被固定的方案所束縛，多種多樣的表現(xiàn)手法都可以產(chǎn)生不俗的效果。但是，設(shè)計和測試的迭代方法，最好還是圍繞著網(wǎng)站轉(zhuǎn)化率和統(tǒng)計數(shù)據(jù)來進行。

4、設(shè)計漂亮的網(wǎng)站之banner設(shè)計

網(wǎng)站banner有八個原則，我們在打開一個網(wǎng)站的時候通常先看到的是網(wǎng)站的banner圖，所以banner設(shè)計的首要任務(wù)當然是要在第一時間抓住用戶的眼球并吸引用戶繼續(xù)瀏覽。切記圖片模糊不清晰。

1)主題明確

要突出產(chǎn)品主題，讓用戶一眼就能識別廣告含義，減少過多的輔助干擾元素。切忌，banner被切割的太細碎，內(nèi)容繁多，沒有瀏覽重心。很多廣告主往往會認為傳達的信息越多，用戶越有興趣，其實并不然，什么都想說的廣告，就是什么都沒說好。

2)重點文字突出

用文字進一步的告訴用戶，是打折或還是新貨上市?如果我們大的買點就是”4.1″折起，那么毫無疑問，”4.1″折的字樣一定要大，要醒目，其余的則需要相應(yīng)的弱化。

3)符合閱讀習(xí)慣

閱讀視線要符合用戶從左到右、從上到下的瀏覽習(xí)慣。

4)用最短時間激起點擊欲望

用戶瀏覽網(wǎng)頁的集中注意力時間一般也就幾秒，所以不需要太多過場動畫，需第1時間進行產(chǎn)品的展示，命中主題。并配以鼓動人心的措辭口號引導(dǎo)用戶。

5)色彩不要過于要醒目

有些廣告主要求使用比較夸張的色彩來吸引訪問者眼球，希望由此提升Banner的關(guān)注度。實際上，”亮” 色雖然能吸引眼球，但往往會讓訪問者感覺刺眼、不友好甚至產(chǎn)生反感。所以，過度耀眼的色彩是不可取的。

6)產(chǎn)品數(shù)量不宜過多

很多廣告主總是想展示更多產(chǎn)品，少則4-5個，多則8-10個，結(jié)果使得整個Banner變成產(chǎn)品的堆砌。Banner的顯示尺寸非常有限，擺放太多產(chǎn)品，反而被淹沒，視覺效果大打折扣。所以，產(chǎn)品圖片不是越多越好，易于識別是關(guān)鍵。

7)信息數(shù)量要平衡

很多人總認為信息多就，覺得所有信息都很重要，都要求突出，結(jié)果其反。如果banner上滿是吸引點，那用戶只會被注意，所以在Banner的有限空間內(nèi)做好各種信息的平衡和協(xié)調(diào)非常重要。

8)留空

banner畫面中需要留空,留空可以使圖形和文字有呼吸的空間。

通過以上總結(jié)出，我們在設(shè)計制作Banner時，需要注意以下幾點

1.突出產(chǎn)品及其特征，采用有吸引力的宣傳用語，適當弱化公司名稱和標識;

2.圖片并非越多越好，突出重點是關(guān)鍵，必要的產(chǎn)品說明不能少

3.合理安排畫面內(nèi)容，做到主次對比鮮明

4.顏色不宜過度夸張，努力營造愉悅、舒服的感觀感受

5、設(shè)計漂亮的網(wǎng)站之頁面底部設(shè)計

其實網(wǎng)站頁面底部也就是頁腳設(shè)計也是非常重要的，它不僅可以使頁面平衡，還可以讓用戶更詳細的了解企業(yè)，一般企業(yè)網(wǎng)站底部會有聯(lián)系方式、人才招聘、友情鏈接等等，這些更有利于網(wǎng)站用戶的搜索。

能做到以上五點，就能設(shè)計出一個漂亮的網(wǎng)站，當然了，網(wǎng)站設(shè)計的技巧肯定不止這些，在進行網(wǎng)站設(shè)計的時候需要我們不斷深入的挖掘，同時，還要符合網(wǎng)站的實際情況。

文章名稱：建站指南：如何設(shè)計漂亮的網(wǎng)站？
本文鏈接：http://muchs.cn/news/169975.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計公司、移動網(wǎng)站建設(shè)、動態(tài)網(wǎng)站、手機網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、營銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)