66個(gè)網(wǎng)頁(yè)制作的技巧

上海網(wǎng)站建設(shè)專家創(chuàng)新互聯(lián)與您一起去了解66個(gè)網(wǎng)頁(yè)制作的技巧，網(wǎng)站的頁(yè)面多種多樣，風(fēng)格各異，網(wǎng)頁(yè)的質(zhì)量直接影響著網(wǎng)站的效果。網(wǎng)頁(yè)設(shè)計(jì)的過(guò)程中，需要注意哪些方面的事項(xiàng)，有哪幾方面影響著網(wǎng)頁(yè)的設(shè)計(jì)效果呢?

1頁(yè)面平鋪

把頁(yè)面平鋪開，主要的物件有：導(dǎo)航欄、LOGO、Banner、按鈕、圖片、文字。

2導(dǎo)航欄

導(dǎo)航欄如果設(shè)計(jì)得恰到好處，是會(huì)給網(wǎng)頁(yè)本身增色很多。導(dǎo)航欄有一排、兩排、多排、圖片導(dǎo)航和Frame框架快捷導(dǎo)航等等各種情況的設(shè)計(jì)。有時(shí)候是橫排，有時(shí)候則是豎排。另外還有一些動(dòng)態(tài)的導(dǎo)航欄，如很精彩的Flash導(dǎo)航。

3LOGO

LOGO并不是每個(gè)網(wǎng)站多要有的，他是網(wǎng)站為了給大家一個(gè)比較直觀的信息的表達(dá)工具。LOGO的位置通常在頁(yè)面的左上角。這個(gè)地方最明顯和直觀，可以第一時(shí)間給人于默化的效果;網(wǎng)站的LOGO，一般以靜態(tài)的居多，也有動(dòng)態(tài)的，但是LOGO的特點(diǎn)都是在表達(dá)網(wǎng)站的信息，是一個(gè)網(wǎng)站的直接的表現(xiàn)窗口。

4BANNER(廣告條)類型

Banner設(shè)計(jì)注意點(diǎn)：Banner有動(dòng)態(tài)和靜態(tài)兩種。在瀏覽網(wǎng)頁(yè)的過(guò)程中，雖然閃爍的圖案會(huì)產(chǎn)生瞬間記憶刺激，引起注意，但這種記憶往往為壓迫性的，久之易產(chǎn)生負(fù)面效應(yīng)，從而模糊記憶。而穩(wěn)定的畫面不易引發(fā)特殊的關(guān)注，但如果有良好的界面引導(dǎo)和內(nèi)容，可產(chǎn)生良性的記憶，持久而牢固。設(shè)計(jì)要點(diǎn)：Banner的文字不能太多，用一兩句話來(lái)表達(dá)即可;廣告語(yǔ)要朗朗上口，可以第一時(shí)間的讓人捕獲表達(dá)的重點(diǎn);圖形無(wú)須太繁雜，文字盡量使用黑體等粗壯的字體，否則在視覺上很容易被網(wǎng)頁(yè)其他內(nèi)容淹沒(méi);圖形盡量選擇顏色數(shù)少，能夠說(shuō)明問(wèn)題的事物;如果選擇顏色很復(fù)雜的物體，要考慮一下在低顏色數(shù)情況下，是否會(huì)有明顯的色斑;盡量不要使用彩虹色、暈邊等復(fù)雜的特技圖形效果，這樣做會(huì)大大增加圖形所占據(jù)的顏色數(shù)，增大體積。

5按鈕

按鈕設(shè)計(jì)要點(diǎn)：設(shè)計(jì)按鈕要同頁(yè)面的整體協(xié)調(diào)，不能太搶眼;有的頁(yè)面很單調(diào)，還要依靠花哨的按鈕來(lái)提一下;選用的字體，選用的插圖，或插圖及字體搭配，都要考慮字跡清楚，色彩簡(jiǎn)單一些，不要超過(guò)四種;很長(zhǎng)的按鈕可能就是框架的分界，盡量要纖細(xì)一些，否則頁(yè)面會(huì)顯臃腫。

6圖片

為了美化頁(yè)面，圖片是任何一個(gè)頁(yè)面都要用到的，圖片的運(yùn)用要合理。圖片運(yùn)用要點(diǎn)：圖形的主體最好清晰可見;圖形的含義最好簡(jiǎn)單明了;圖片內(nèi)所含文字應(yīng)該清晰容易辨認(rèn);背景與主體明度對(duì)比比例應(yīng)為3∶1到5∶1之間為宜;淡色系列的背景有助于整體和諧;淡色材質(zhì)背景好，能與主題分離之淺色標(biāo)志或文字背景亦可。

7文字

文字也是設(shè)計(jì)的。設(shè)計(jì)要點(diǎn)：每一行文字的長(zhǎng)度最好20到30個(gè)中文字(40到60個(gè)英文字母);行距與字距已由軟件內(nèi)定。設(shè)計(jì)時(shí)注意段落與段落間空行及首行縮排方式以輔助閱讀;標(biāo)題以H1到H3字號(hào)為佳，內(nèi)文Font size=3到4級(jí)為佳;同版面字型最好在三種以內(nèi);文字的顏色最好也是三種以內(nèi);文字在顏色上要與背景區(qū)別;內(nèi)文的排列向左對(duì)齊并與左邊界保持適當(dāng)距離。可以用表格填入文字以達(dá)此效果;表格或清單內(nèi)的字運(yùn)用相同字型與字體大小，以利辨別。

8整體規(guī)劃

有共性，才有統(tǒng)一，有細(xì)節(jié)區(qū)別，就有層次;防止設(shè)計(jì)與實(shí)現(xiàn)過(guò)程中的偏差;設(shè)計(jì)的各部分，要配合整體風(fēng)格;不僅頁(yè)面上各項(xiàng)設(shè)計(jì)要統(tǒng)一，而且網(wǎng)站的各級(jí)別頁(yè)面也要統(tǒng)一;信息不要太過(guò)集中，以免文字編排太緊密;不要有太多分散注意力的點(diǎn)。動(dòng)態(tài)閃爍要適中;頁(yè)面留白部分，要根據(jù)平面設(shè)計(jì)原理來(lái)設(shè)計(jì)，注意分欄式結(jié)構(gòu)不宜留白;還要考慮到瀏覽器上部占用的屏幕空間，防止圖片截?cái)嗟仍斐梢曈X效果不好;首頁(yè)設(shè)計(jì)圖片+導(dǎo)航，這是一種比較強(qiáng)的網(wǎng)站表達(dá)，可以根據(jù)時(shí)間的變化更改圖片。

9功能易用性

導(dǎo)航欄應(yīng)最先調(diào)入，以便訪客快速前往所需信息空間;頁(yè)面長(zhǎng)度要短，使得用戶在信息空間內(nèi)可迅速移動(dòng);導(dǎo)航設(shè)計(jì)方向要一致。支持導(dǎo)航的層次按鈕應(yīng)當(dāng)從上到下或從左到右，但不要兩者都用，不要混用方向。

網(wǎng)頁(yè)設(shè)計(jì)要減少這些設(shè)計(jì)行為，網(wǎng)頁(yè)設(shè)計(jì)時(shí)，可以有個(gè)性、有特色、有創(chuàng)新，但有一些規(guī)范性的規(guī)則還是要遵守的，否則不利于蜘蛛抓取，也不討用戶喜歡。哪些設(shè)計(jì)行為是設(shè)計(jì)網(wǎng)頁(yè)時(shí)避免出現(xiàn)的呢?又會(huì)帶來(lái)哪些影響?下面就介紹這些在網(wǎng)頁(yè)設(shè)計(jì)的過(guò)程中要減少的設(shè)計(jì)，相信大家看了就會(huì)明白。

10只重創(chuàng)新

現(xiàn)在對(duì)網(wǎng)站的要求越來(lái)越高，很多站長(zhǎng)就認(rèn)為創(chuàng)新重要，傳統(tǒng)的都落后了，不值得提倡了。對(duì)此，專業(yè)人士表示，在設(shè)計(jì)網(wǎng)頁(yè)過(guò)程中，不能忘記原則，不能認(rèn)為新的就是創(chuàng)新，大眾喜歡的創(chuàng)新才是真正的創(chuàng)新。那些稀奇古怪看起來(lái)不錯(cuò)的字體、圖片，往往會(huì)影響用戶的點(diǎn)擊和閱讀量。

11圖片做導(dǎo)航

根據(jù)網(wǎng)站的優(yōu)化原則，越簡(jiǎn)單的設(shè)計(jì)越好，而文字導(dǎo)航要比圖片導(dǎo)航好的多，當(dāng)然圖片確實(shí)比文字漂亮，但是對(duì)于用戶來(lái)講，文字還是圖片沒(méi)有區(qū)別，而對(duì)于蜘蛛來(lái)說(shuō)，文字更利于它們抓取，利于網(wǎng)站排名。

刻意追求個(gè)性化，增加網(wǎng)頁(yè)本身的搜索難度，不僅僅是為難蜘蛛，也是為難用戶，所以最好用文字導(dǎo)航，同時(shí)少用下拉菜單，避免用戶查詢之時(shí)感到混亂。

12表格布局

現(xiàn)在的表格布局已經(jīng)非常落后，而且代碼冗余，對(duì)優(yōu)化極為不利。不僅如此，頁(yè)面樣式也沒(méi)有那么自由，最好還是用CSS，既簡(jiǎn)單，又方便，最重要的是不影響網(wǎng)站打開速度。

13中轉(zhuǎn)頁(yè)面

不少站長(zhǎng)為了增加頁(yè)面的點(diǎn)擊率或者是用戶停留的時(shí)間，會(huì)采用繼續(xù)瀏覽，請(qǐng)點(diǎn)擊某某處的頁(yè)面，這樣的做法看起來(lái)是對(duì)站長(zhǎng)有利，但是時(shí)間長(zhǎng)了，其實(shí)好處并不大。尤其是為了獲取更多的用戶資源，不僅路徑復(fù)雜，同時(shí)步驟也多，會(huì)讓用戶反感。

14添加過(guò)多廣告

廣告可以添加，但是盡量要少。為什么呢?我們從用戶的角度出發(fā)可以了解到，誰(shuí)瀏覽網(wǎng)頁(yè)的時(shí)候蹦出一條條的廣告，都會(huì)覺得非常反感，不僅阻礙用戶閱讀，同時(shí)也會(huì)降低用戶的好感度。所以，最好不要添加。如果想要廣告，最好是平面的，不要用浮動(dòng)的。

以上這些行為就是在網(wǎng)頁(yè)設(shè)計(jì)中要減少的，做了反而不利于網(wǎng)站的發(fā)展。

15盡可能兼顧不同用戶的知識(shí)和技能水平

用戶可能是新手、專家或介于兩者之間，要根據(jù)用戶情況設(shè)計(jì)界面。

使用適當(dāng)?shù)男氯艘龑?dǎo)(四種主要的新人引導(dǎo)策略)

這四種用法剛好可以用一個(gè)2*2的矩陣來(lái)表示。根據(jù)下方圖示選擇最適合你界面的方式：

為新手用戶添加提示而不干擾專家用戶

使用卡片分類構(gòu)建信息架構(gòu)

若你想了解用戶如何確定或概念化菜單分類，使用開放式卡片分類;

若你想了解用戶如何將現(xiàn)有元素歸類到預(yù)制分類，使用封閉式卡片分類;

16盡可能適應(yīng)用戶的操作流程

用戶會(huì)有不同的需求，根據(jù)不同操作流程調(diào)整界面設(shè)計(jì)。讓用戶控制數(shù)據(jù)的呈現(xiàn)方式，讓用戶控制數(shù)據(jù)的排序方式

其他排序標(biāo)準(zhǔn)包括：

按字母順序

按可用性

按分類

按日期

按距離

按熱門程度

按價(jià)格

按相關(guān)性

按大小

讓用戶控制數(shù)據(jù)顯示的數(shù)量，構(gòu)建用戶畫像以區(qū)分具體操作流程，讓用戶通過(guò)新標(biāo)簽頁(yè)打開頁(yè)面

17很多用戶習(xí)慣先打開頁(yè)面，后續(xù)再去瀏覽

盡可能提高網(wǎng)頁(yè)的可及性，讓殘疾人群也可以訪問(wèn)使用你的界面。這不僅是好的做法，還可以避免法律后果(看你做的是什么產(chǎn)品)

在HTML5中使用語(yǔ)義標(biāo)簽，使用多種提示來(lái)溝通反饋信息，大約8%的男性是色盲(Chan, Goh, & Tan, 2014)。不要單獨(dú)通過(guò)顏色來(lái)傳達(dá)信息，提供多種提示。

18盡可能兼容各種輸入和極端個(gè)例

應(yīng)該允許用戶輸入各種信息而無(wú)后顧之憂。解決自動(dòng)生成信息帶來(lái)的不好結(jié)果，使用支持多種輸入格式的表單元素，顯示能解決搜索者需求的結(jié)果，使用能處理錯(cuò)別字、同義詞或變體詞的搜索

19盡可能兼容所有媒介

界面需要在各種環(huán)境都能運(yùn)作(如不同設(shè)備、瀏覽器等)，根據(jù)用戶瀏覽器定制不同的操作指引，在小型設(shè)備上使用單窗口深入的方式

20排字藝術(shù)，字體

1. 排字藝術(shù)，是可以將復(fù)數(shù)的商品或設(shè)計(jì)變得具有統(tǒng)一感的關(guān)鍵
2. 在全部的風(fēng)格指南中，包含了字體所有的詳細(xì)說(shuō)明。
3. 為了使設(shè)計(jì)保持簡(jiǎn)潔，限制可用字體的數(shù)量和大小是很有必要的
4. 一般的，從最多兩種字體開始是一個(gè)非常不錯(cuò)的選擇。
5. 一種用作標(biāo)題，另一種用于正文。在大部分情況下，除此之外再也不需要其他字體

此外，該參考什么樣的排榜樣式，其他的設(shè)計(jì)師或開發(fā)者使用的是細(xì)體字或者是斜體字?使用什么樣的風(fēng)格會(huì)讓人易于理解?這些都是需要考慮的問(wèn)題。

21圖像

不用語(yǔ)言，而是用圖片展現(xiàn)出來(lái)吧。

1. 因?yàn)閳D像是動(dòng)態(tài)的，所以這對(duì)設(shè)計(jì)師來(lái)說(shuō)是非常有幫助的工具
2. 一目了然的傳遞信息，表現(xiàn)出在這之中你所包含的感情。
3. 為了傳遞出商品的信息或概念，其他設(shè)計(jì)師是怎樣利用圖片的，將這些方法詳細(xì)記述在風(fēng)格指南中是非常不錯(cuò)的方法

22網(wǎng)格與留白

1. 一個(gè)良好的設(shè)計(jì)，會(huì)留出與內(nèi)容相同的空白空間
2. 在風(fēng)格指南中，讓我們來(lái)添加一些反應(yīng)了這種效果的項(xiàng)目吧
3. 為了方便每次使用，你建立一個(gè)網(wǎng)格是非常重要的
4. 欄數(shù)或列數(shù)用來(lái)描述還剩下多少空間是非常不錯(cuò)的方法

23配色，色環(huán)

1. 配色是風(fēng)格指南中必須的一項(xiàng)要素。創(chuàng)建出視覺上的層次感，讓用戶的情感與之產(chǎn)生共鳴
2. 項(xiàng)目的配色，設(shè)計(jì)師需要不斷的嘗試使之更容易工作
3. 如果在研究配色上花了大量的時(shí)間，設(shè)計(jì)師應(yīng)該去參考風(fēng)格指南，將注意力集中于設(shè)計(jì)作品的內(nèi)容上
4. 通過(guò)使用相同的配色方案，可以為商品添加統(tǒng)一與親近熟悉的感覺

24部件

1. 許多設(shè)計(jì)師和開發(fā)人員，將UI部件作為一個(gè)整體來(lái)考慮。各個(gè)UI部件都是獨(dú)立的。
2. 通過(guò)使用這種方法，設(shè)計(jì)師可以重復(fù)利用組件，你可以完成復(fù)數(shù)的具有一致性的設(shè)計(jì)
3. 還可以利用有組織的UI組件，來(lái)使新設(shè)計(jì)的完成時(shí)間大大縮短
4. 考慮部件使用的地方，這對(duì)開發(fā)人員來(lái)說(shuō)也是非常有幫助的
5. 從開發(fā)人員的角度來(lái)看，這些組建就如同樂(lè)高積木，可以很輕松的拼接在一起

25優(yōu)化圖片，獲得更好的頁(yè)面加載速度

學(xué)習(xí)如何通過(guò)選擇正確的格式，來(lái)優(yōu)化網(wǎng)頁(yè)圖片，并確保文件大小在可行的范圍你是足夠小的。雖然現(xiàn)在人們已經(jīng)都在使用寬帶，但仍然有人是撥號(hào)上網(wǎng)。此外，雖然移動(dòng)裝置技術(shù)的普及，但移動(dòng)裝置卻不一定支持像寬頻一樣的速度，圖片文件的大小可能還是會(huì)延長(zhǎng)網(wǎng)頁(yè)的加載時(shí)間，有可能把用戶趕走的。

這里有個(gè)選擇適合的文件格式的技巧：如果圖片是單色，那最好保存成PNG或者GIF格式;如果是連續(xù)性的色調(diào)(如照片)則最好保存成 JPG格式。

有很多的工具可以幫助你進(jìn)一步優(yōu)化你的圖片，降低他們的文件大小?？梢詤⒖歼@個(gè)工具列表來(lái)幫助優(yōu)化你的圖片。盡量把圖片數(shù)量減到最低，并且靈活使用圖片，并且盡可能地減小文件大小。如此一來(lái)，將可以大大的減少頁(yè)面的讀取時(shí)間和改善網(wǎng)頁(yè)的性能。

26保持干凈和簡(jiǎn)單(即：簡(jiǎn)潔)

一個(gè)好的網(wǎng)頁(yè)設(shè)計(jì)不光只是看起來(lái)好看而已，還要是用戶友好型的。通常來(lái)說(shuō)，一個(gè)干凈、簡(jiǎn)單的網(wǎng)頁(yè)設(shè)計(jì)最終會(huì)成為一個(gè)可用性高的網(wǎng)頁(yè)設(shè)計(jì)，因?yàn)樗谂c用戶的交互中不會(huì)使其產(chǎn)生混淆。當(dāng)頁(yè)面上有太多的網(wǎng)站功能和組件時(shí)，將會(huì)分散網(wǎng)站用戶的注意力而失去原本瀏覽網(wǎng)站的目的。確保每個(gè)頁(yè)面元素都有其目的，然后問(wèn)自己以下問(wèn)題：

1.是否真的需要這個(gè)設(shè)計(jì)么?

2.這是什么組件是做什么用，它如何協(xié)助用戶瀏覽?

3.如果我突然刪除這個(gè)組件，大多數(shù)人會(huì)希望它“回來(lái)”嗎 ?

4.如何把這些元素和目標(biāo)、消息和網(wǎng)站的宗旨互相結(jié)合?

此外，盡管它可能是一個(gè)超酷的新概念或界面設(shè)計(jì)模式，但你還是要確保對(duì)你的用戶而言該設(shè)計(jì)仍然是方便和直觀的。人們習(xí)慣于通用性的交互模式、網(wǎng)站功能、和網(wǎng)絡(luò)接口，如果你的設(shè)計(jì)的確很獨(dú)特，確保它不是太模糊和晦澀。 要有創(chuàng)意，但還要保持簡(jiǎn)單。

27導(dǎo)航(條/欄)是最重要的設(shè)計(jì)

一個(gè)網(wǎng)站最重要的部分就是整個(gè)網(wǎng)站的導(dǎo)航。沒(méi)有它，無(wú)論在哪個(gè)頁(yè)面中，用戶都會(huì)發(fā)生卡在這個(gè)頁(yè)面離不開的狀況。有了這明顯的實(shí)際方向，我們將討論一些建構(gòu)網(wǎng)站導(dǎo)航時(shí)重要的點(diǎn)。

首先，在網(wǎng)站的導(dǎo)航結(jié)構(gòu)上，投入足夠的時(shí)間和很多規(guī)劃是非常重要的。雖然這是常識(shí)，但仍然有很多設(shè)計(jì)師想當(dāng)然地設(shè)計(jì)網(wǎng)站導(dǎo)航。擺放位置、風(fēng)格、所用技術(shù)(javascript或CSS)、可用性和網(wǎng)頁(yè)易讀性，這些是你制作導(dǎo)航設(shè)計(jì)時(shí)需要考慮的。在沒(méi)有CSS的狀況下，你的導(dǎo)航設(shè)計(jì)應(yīng)該也是可用的，這是基于文字基礎(chǔ)的瀏覽器相容性。你可以盡量去嘲笑文字基礎(chǔ)的瀏覽器，但它們?cè)诤芏嗟囊苿?dòng)設(shè)備上還是流行的。也許更為重要的是，對(duì)屏幕用戶來(lái)說(shuō)(99.99%的情況下)，沒(méi)有CSS的導(dǎo)航功能照樣可用訪問(wèn)。在沒(méi)有客戶端技術(shù)情況下(如JavaScript或Flash)，導(dǎo)航功能應(yīng)該容易進(jìn)入和使用的。用戶可能因安全性或公司政策而沒(méi)有開啟或安裝。

所以，制定一個(gè)導(dǎo)航系統(tǒng)可以放置的良好位置是必須的，例如放在一個(gè)顯眼可見的地方。一個(gè)好的導(dǎo)航功能，只要網(wǎng)頁(yè)載入就出現(xiàn)，而不需要鼠標(biāo)再向下滾動(dòng)。這是為什么頁(yè)面要保持干凈和簡(jiǎn)單的重要作用，一個(gè)復(fù)雜且非常規(guī)的設(shè)計(jì)可能會(huì)讓用戶困惑。哪怕只有一瞬間，用戶也必定不會(huì)納悶：“網(wǎng)站導(dǎo)航在哪里?”

最后，對(duì)網(wǎng)站建立階層結(jié)構(gòu)，多層次的管理。確保它在父層與子層之間易于導(dǎo)航。此外，不管在哪一個(gè)網(wǎng)頁(yè)當(dāng)中，也應(yīng)該能很容易到達(dá)高層的頁(yè)面(例如網(wǎng)站首頁(yè))。最主要的目標(biāo)就是你的網(wǎng)站導(dǎo)航，盡可能減少操作(動(dòng)作)，努力而讓用戶到達(dá)他想要瀏覽的內(nèi)容。

28明智和有條理地使用字體

雖然有成千上萬(wàn)的字體，但你真的能用的只是一小部分(至少要等到主要的瀏覽器完全支持CSS3)。 所以堅(jiān)持使用網(wǎng)頁(yè)安全字體。如果你不喜歡網(wǎng)頁(yè)安全字體，可以考慮利用sIFR或Cufon逐步增強(qiáng)的網(wǎng)頁(yè)設(shè)計(jì)。保持字體的一致性，確認(rèn)標(biāo)題和段落的內(nèi)容看起來(lái)有所不同。使用空白、調(diào)整行高、字體大小和字母間距屬性，使用戶輕松愉快地閱讀和掃描內(nèi)容。

也許一個(gè)網(wǎng)頁(yè)設(shè)計(jì)師常常犯的錯(cuò)誤就是使用不對(duì)的字體大小。因?yàn)槲覀兿氡M可能的將內(nèi)容都塞在一個(gè)網(wǎng)頁(yè)中呈現(xiàn)，所以我們有時(shí)設(shè)置字體大小而讓用戶感覺到不舒服。如果可能的話，盡量保持字體大小12像素以上，特別是對(duì)段落內(nèi)容。雖然很多沒(méi)有遇到因?yàn)樽煮w太小而造成閱讀上的困難，但是想想老人家、近視眼和其他類似視覺障礙的族群吧。

29理解色彩無(wú)障礙性

說(shuō)完字體后，我們還需要指出使用正確顏色的重要性。例如，黑色文字在白色背景，如果使用高對(duì)比度，橙色背景上的紅色文字會(huì)令你的眼睛感到緊張。

此外，使用一些對(duì)特殊形式色盲的用戶友好的顏色(檢查工具名為Vischeck，可以測(cè)試某些類型的色盲)。

有些色彩組合只適合運(yùn)用在前景色的部分，而不適合做背景色。舉個(gè)例子來(lái)說(shuō)，深藍(lán)色的文字搭配粉紅色的背景與粉紅色的文字搭配深藍(lán)色的背景，都是使用兩種一樣的顏色，但用在不同的部分則影響了它的可讀性和閱讀的舒適度。重要的是，不僅要使用良好的色彩組合，而且要把它用在頁(yè)面中的合適元素上。

30知道如何編寫代碼

隨著各種所見即所得的網(wǎng)頁(yè)編輯器充斥市場(chǎng)，網(wǎng)頁(yè)設(shè)計(jì)已經(jīng)成為簡(jiǎn)單的1-2-3步驟就能設(shè)計(jì)好一個(gè)網(wǎng)站。然而，大多數(shù)網(wǎng)頁(yè)編輯器摻雜了不必要的代碼，使你的HTML結(jié)構(gòu)設(shè)計(jì)不當(dāng)，難以維護(hù)和更新，導(dǎo)致網(wǎng)頁(yè)膨脹。

通過(guò)自己編寫的網(wǎng)頁(yè)代碼，能得到簡(jiǎn)潔的代碼，能夠愉快方便地閱讀和維護(hù)。你可以自豪地說(shuō)是自己寫出來(lái)的代碼。但知道如何使用所見即所得的IDE或預(yù)覽功能并不會(huì)妨礙學(xué)習(xí) HTML和CSS。你要知道發(fā)生了什么事情，才能創(chuàng)造有效并高度優(yōu)化的網(wǎng)頁(yè)設(shè)計(jì)。

31不要忘記搜索引擎優(yōu)化

在設(shè)計(jì)網(wǎng)站時(shí)，一個(gè)好的網(wǎng)頁(yè)設(shè)計(jì)師應(yīng)該永遠(yuǎn)牢記基本的SEO概念。例如，網(wǎng)頁(yè)內(nèi)容結(jié)構(gòu)、用文字表示標(biāo)題(即網(wǎng)頁(yè)的標(biāo)題和標(biāo)志)。此時(shí)，以前學(xué)習(xí)的如何合理編碼的能力就派上用場(chǎng)。認(rèn)識(shí)正確、語(yǔ)義和基于標(biāo)準(zhǔn)的HTML/CSS 后，你會(huì)很快認(rèn)識(shí)到Div比表格布局好得多，不僅更為準(zhǔn)確地展現(xiàn)內(nèi)容，而且對(duì)搜索引擎排名也有幫助。另外，知道用CSS更換背景、文字和圖片也是一個(gè)好主意。

32理解人是沒(méi)有耐性的

普通人用幾秒鐘就決定是否要閱讀更多網(wǎng)頁(yè)內(nèi)容或到另一個(gè)網(wǎng)站。因此，作為一個(gè)網(wǎng)頁(yè)設(shè)計(jì)師，要有個(gè)好方法，能在這珍貴的幾秒鐘鼓勵(lì)用戶選擇前者(看更多內(nèi)容)。

要知道，如果用戶在網(wǎng)頁(yè)頭部看不到感興趣的內(nèi)容，沒(méi)有多少人會(huì)向下滾動(dòng)，去查看整個(gè)網(wǎng)頁(yè)的內(nèi)容。所以，在網(wǎng)頁(yè)頭部很容易看到的地方放置網(wǎng)站上的重要元素，但也不要過(guò)度擁擠在上半部分網(wǎng)頁(yè)，否則會(huì)嚇到用戶，而不會(huì)往下繼續(xù)看內(nèi)容。記住上半部分網(wǎng)頁(yè)設(shè)計(jì)的賣點(diǎn)：視其為推銷員，使人們有購(gòu)買想法，即他們想在你的網(wǎng)站上看到什么。

33了解(并意識(shí)到)瀏覽器的兼容性

當(dāng)一個(gè)網(wǎng)頁(yè)設(shè)計(jì)師必須要知道的一件事，就是你的工作環(huán)境(瀏覽器)是挑剔和難以預(yù)料的。如果你的網(wǎng)頁(yè)設(shè)計(jì)只能運(yùn)行在的幾種網(wǎng)頁(yè)瀏覽器，那是不夠的，你需要盡可能多瀏覽器下測(cè)試。這里有一款工具Browsershots，可以測(cè)試瀏覽器兼容性。

34使設(shè)計(jì)有靈活性和可維護(hù)性

一個(gè)好的網(wǎng)頁(yè)設(shè)計(jì)師可以確保以后可以很容易更新或修改網(wǎng)站。設(shè)計(jì)一個(gè)有可塑性、易于維護(hù)的網(wǎng)站，是一個(gè)偉大網(wǎng)頁(yè)設(shè)計(jì)師的標(biāo)志。讓你的工作盡可能從結(jié)構(gòu)化轉(zhuǎn)向模塊化。

網(wǎng)頁(yè)設(shè)計(jì)這個(gè)行業(yè)是動(dòng)態(tài)的，而且還很“年輕”。事情往往在短暫中變化。牢記這種思想，將推動(dòng)建立更加靈活的網(wǎng)頁(yè)設(shè)計(jì)。

35在界面中突出強(qiáng)調(diào)一個(gè)聚焦點(diǎn)

每個(gè)界面都應(yīng)該有一個(gè)清晰的起點(diǎn)。用戶應(yīng)該從哪里看起?要設(shè)計(jì)清楚。

在頁(yè)面標(biāo)題部分添加視覺對(duì)比

通過(guò)視覺的層次引導(dǎo)用戶，通過(guò)界面引導(dǎo)控制用戶體驗(yàn)。他們應(yīng)該從哪里先看起，第二和第三步又看哪里?設(shè)計(jì)要建立層次結(jié)構(gòu)。

1. 避免在構(gòu)圖中補(bǔ)漏留白
2. 使用單列布局
3. 重疊設(shè)計(jì)元素，強(qiáng)調(diào)連續(xù)性

36使用格式塔原則進(jìn)行布局設(shè)計(jì)

根據(jù)格式塔心理學(xué)，人會(huì)通過(guò)簡(jiǎn)化感知克服混亂。所以我們將事物分組，將元素分類，我們看“整體”。

這些原則包括：相似，接近，閉合，連接，連續(xù)和圖形/背景。

1. 按照接近性將相似功能或菜單項(xiàng)分組顯示
2. 標(biāo)題位置與對(duì)應(yīng)章節(jié)內(nèi)容更靠近
3. 限制標(biāo)題與章節(jié)內(nèi)容在同一界限內(nèi)
4. 在不干擾用戶的前提下呈現(xiàn)界面變化
5. 有一些界面變化會(huì)發(fā)生在用戶使用期間，這些變化要做到明顯但不干擾用戶。
6. 用明顯的動(dòng)畫呈現(xiàn)界面變化
7. 將出錯(cuò)的元素區(qū)分顯示出來(lái)，錯(cuò)誤提醒信息放置在表單頂部

37刪除或弱化不必要的信息

人的注意力是有限的。不必要的元素會(huì)消耗這些注意力。因此，保持用戶專注在重要信息和功能上。

1. 彈出或模態(tài)窗口背景模糊處理
2. 在所有圖像中大限度地提高數(shù)據(jù)墨水比率(讓數(shù)據(jù)更凸顯)
3. 去掉不必要的邊框
4. 刪除冗余或不言自明的說(shuō)明
5. 隱藏不常用但必要的設(shè)置、功能和信息

38提示首屏以下是否還有內(nèi)容

現(xiàn)在大多數(shù)瀏覽器在頁(yè)面處于非活動(dòng)狀態(tài)時(shí)隱藏滾動(dòng)條，你需要“滾動(dòng)提示”告知用戶首屏以下是否還有內(nèi)容

1. 通過(guò)首屏延伸頁(yè)面下方信息元素
2. 添加陰影以指示深度
3. 用文字或圖形表示有更多內(nèi)容

39讓常用功能和重要數(shù)據(jù)信息更接近用戶

1. 預(yù)測(cè)用戶的意圖，讓他們盡可能接近目標(biāo)。
2. 篩選出或跳至用戶正在搜索的條目
3. 將用戶常選項(xiàng)目列為默認(rèn)選項(xiàng)
4. 產(chǎn)品列表頁(yè)上把重要數(shù)據(jù)信息展示出來(lái)

很多時(shí)候用戶需要像踩彈簧高蹺杖一樣，點(diǎn)擊一個(gè)產(chǎn)品，查看信息，返回上一頁(yè)，再反復(fù)操作以查看其他產(chǎn)品。這種設(shè)計(jì)的可用性差。應(yīng)把重要信息直接放在主要頁(yè)面，減少用戶反復(fù)操作的次數(shù)。

如果你怕這樣頁(yè)面會(huì)雜亂，也可以設(shè)計(jì)成鼠標(biāo)懸停時(shí)顯示

1. 鼠標(biāo)懸停時(shí)顯示有用信息
2. 常用功能直接展示出來(lái)
3. 用儀表面板方式展現(xiàn)主要數(shù)據(jù)和狀態(tài)
4. 把常見答案放在下拉列表的頭部

40交互狀態(tài)的及時(shí)反饋呈現(xiàn)

通過(guò)傳達(dá)所有相關(guān)信息減少不確定性。

1. 在機(jī)器驅(qū)動(dòng)的任務(wù)中顯示當(dāng)前進(jìn)度和剩余時(shí)間
2. 如上傳文件是系統(tǒng)在處理，用戶不知道內(nèi)部運(yùn)作情況，通過(guò)顯示進(jìn)度條可以讓用戶知道進(jìn)展。
3. 復(fù)雜或冗長(zhǎng)的交互狀態(tài)要及時(shí)反饋呈現(xiàn)
4. 按次序顯示操作步驟總數(shù)
5. 顯示類目下的條目數(shù)

41同一任務(wù)，可為客戶提供多種完成方式

用戶喜歡的操作方式不一樣。為同一目標(biāo)提供不同路徑，讓用戶選擇最符合他們自己的方式。

1. 用戶可通過(guò)用戶名或電子郵件登錄系統(tǒng)
2. 為重復(fù)操作類功能提供鍵盤快捷鍵
3. 讓用戶可以拖拽元素
4. 讓用戶直接編輯數(shù)據(jù)信息

42反饋呈現(xiàn)交互動(dòng)作的限制條件或參數(shù)要求

為每一個(gè)交互動(dòng)作做好準(zhǔn)備。用戶需要什么?他們?nèi)绾卫^續(xù)?

1. 描述清楚你需要用戶輸入什么
2. 實(shí)時(shí)顯示密碼要求并反饋輸入狀態(tài)
3. 為表單元素預(yù)填通用參數(shù)
4. 顯示表單的必填和選填信息

43反饋顯示交互動(dòng)作的預(yù)期結(jié)果

1. 在用戶進(jìn)行交互操作之前，他們應(yīng)該了解預(yù)期結(jié)果是什么
2. 使用描述性按鈕標(biāo)簽
3. 根據(jù)當(dāng)前的輸入，顯示結(jié)果預(yù)覽
4. 按次序顯示或預(yù)覽下一個(gè)項(xiàng)目
5. 使用智能菜單項(xiàng)明確操作內(nèi)容

44當(dāng)用戶取得進(jìn)展時(shí)，給予獎(jiǎng)勵(lì)或肯定

用戶取得進(jìn)展了嗎?他們的交互成功了嗎?讓用戶知道，同時(shí)引導(dǎo)他們繼續(xù)。

1. 保證鏈接與目標(biāo)頁(yè)面的一致性
2. 為新加入用戶提供速效指引環(huán)節(jié)(如迅速建立人脈)
3. 進(jìn)度條從大于0%的地方開始

45盡可能少讓用戶做計(jì)算

1. 千萬(wàn)別把計(jì)算這種事情丟給用戶，讓計(jì)算機(jī)來(lái)處理。
2. 顯示剩余數(shù)量

46在界面內(nèi)體現(xiàn)用戶當(dāng)前所處位置

界面就像機(jī)場(chǎng)，如果沒(méi)有“你在這里”的標(biāo)記，用戶會(huì)迷路，因此記得提供標(biāo)記。

1. 在導(dǎo)航菜單上突出當(dāng)前所選
2. 在復(fù)雜的界面中提供面包屑導(dǎo)航或步驟圖示
3. 在頁(yè)面標(biāo)題前面部分放置描述性或有用的信息

47簡(jiǎn)化選擇類任務(wù)

1. 做選擇需要費(fèi)腦筋，簡(jiǎn)化這類任務(wù)讓用戶少費(fèi)神
2. 指明多數(shù)用戶選擇的選項(xiàng)
3. 提供常見搜索關(guān)鍵詞列表
4. 下拉分類菜單置于相應(yīng)導(dǎo)航菜單內(nèi)

48使用常規(guī)的網(wǎng)頁(yè)設(shè)計(jì)界面

創(chuàng)新很好，但不要跟常規(guī)的設(shè)計(jì)方式偏離太遠(yuǎn)。用戶習(xí)慣于某些布局、結(jié)構(gòu)。常規(guī)設(shè)計(jì)之所以流行，是因?yàn)樗麄兇_實(shí)可行。

1. 使用常規(guī)的導(dǎo)航菜單
2. 把實(shí)用功能放在右上角

49每次交互動(dòng)作后提供反饋

1. 用戶跟界面進(jìn)行互動(dòng)后，需獲得實(shí)時(shí)反饋。操作成功還是失敗了?發(fā)生了什么變化?
2. 重要的交互動(dòng)作后反饋提示成功消息
3. 顯示當(dāng)前鼠標(biāo)停留在哪個(gè)項(xiàng)目上

50最小化等待的負(fù)面效果

1. 消滅所有不必要的等待。如果確實(shí)要用戶等，則最小化該負(fù)面效果。
2. 加載動(dòng)畫效果使用冷色調(diào)減少對(duì)用戶刺激

51藍(lán)色減少刺激(提高放松程度)，藍(lán)色加載元素可讓用戶覺得加載更快(Gorn et al., 2004)

1. 長(zhǎng)時(shí)間等待時(shí)保持用戶活躍度(別人他們干等)
2. 防止用戶上傳不支持的文件
3. 實(shí)時(shí)統(tǒng)計(jì)顯示任務(wù)進(jìn)展

52盡可能減少用戶對(duì)記憶的依賴

1. 別讓用戶去記住任何東西，將相關(guān)信息顯示出來(lái)
2. 讓表單標(biāo)簽保持一直可見
3. 避免用戶點(diǎn)擊后就消失的行內(nèi)標(biāo)簽
4. 占位文本放到表單元素的外邊
5. 為可移動(dòng)輸入添加復(fù)制按鈕 ( Add Copy Buttons to Movable Input )

53盡量少用鋸齒狀視圖模式

1. 減少用戶眼睛來(lái)回移動(dòng)的次數(shù)，讓各項(xiàng)補(bǔ)充數(shù)據(jù)保持接近。
2. 合并相同的數(shù)據(jù)字段幫助用戶進(jìn)行對(duì)比
3. 讓表單標(biāo)簽緊貼相應(yīng)元素并對(duì)齊

54反饋顯示哪些項(xiàng)目是可點(diǎn)擊或交互的

1. 用戶需要識(shí)別哪些元素是可交互的(并且知道如何交互)。
2. 使用3D特性設(shè)計(jì)按鈕
3. 為可拖拽元素添加點(diǎn)狀紋理
4. 使用圖標(biāo)和符號(hào)傳達(dá)一個(gè)交互動(dòng)作的意圖

55你可以通過(guò)PowerPoint 或 Keynote的各種形狀制作大部分圖標(biāo)

1. 用常見的文字和符合來(lái)溝通
2. 大多數(shù)情況下，清晰明確勝過(guò)創(chuàng)意和術(shù)語(yǔ)
3. 講用戶懂的語(yǔ)言，不講程序語(yǔ)言
4. 出現(xiàn)外語(yǔ)時(shí)，提供翻譯按鈕
5. 顏色的選擇要與語(yǔ)義保持一致

56當(dāng)顏色跟語(yǔ)義不一致時(shí)，會(huì)增加用戶處理信息的困擾

1. 盡可能提高界面的可瀏覽性
2. 多數(shù)用戶采用瀏覽掃讀的方式處理內(nèi)容，我們需要接受這種行為。
3. 設(shè)計(jì)界面時(shí)盡量適應(yīng)這種泛讀瀏覽方式。
4. 保持段落簡(jiǎn)短，高亮關(guān)鍵詞組
5. 把重要信息放在列表的開頭
6. 給表格添加交替的行條紋背景
7. 編寫?yīng)毩⒏睒?biāo)題(不要一篇文章就一個(gè)大標(biāo)題)
8. 用視覺變化拆分文本

57盡可能提高文本的可讀性

很明顯，文本需要讓人易懂，有些技巧能讓文本更具可讀性。

1. 讓文本和背景具有鮮明對(duì)比
2. 背景上顯示文本需要注意，可能需要做一些疊加或模糊處理。(以作者照片為例…)
3. 正文的主要部分采用左對(duì)齊

58界面設(shè)計(jì)風(fēng)格保持一致

1. 風(fēng)格不統(tǒng)一的話用戶需要花更多時(shí)間學(xué)習(xí)界面。保持統(tǒng)一的布局和外觀可以簡(jiǎn)化學(xué)習(xí)過(guò)程。
2. 制定一份前端風(fēng)格指引

59制定一份穩(wěn)定，總結(jié)界面各元素的設(shè)計(jì)規(guī)格說(shuō)明

其他元素包括：

? 顏色

? 網(wǎng)格和布局

? 位置和定位

? 大小和形狀

? 標(biāo)簽和語(yǔ)言

? 導(dǎo)航

? 表格

? 列表

? 鏈接

? 聲音和腔調(diào)

60防止錯(cuò)誤產(chǎn)生

1. 設(shè)計(jì)界面時(shí)，不要急著出方案，要盡力設(shè)計(jì)“無(wú)錯(cuò)可犯”的界面。
2. 按鈕在用戶點(diǎn)擊后進(jìn)行去除、禁用或替換處理
3. 別跟用戶說(shuō)只能提交一次?？梢远啻吸c(diǎn)擊的，用戶就可能點(diǎn)多次。用戶點(diǎn)擊后禁用按鈕，才能真正避免多次提交。
4. 只提供可以接受的輸入選項(xiàng)
5. 在表單元素中使用勾選啟用、勾選可見的設(shè)計(jì)方式
6. 文本輸入框結(jié)構(gòu)跟輸入格式要求保持一致

61監(jiān)控典型錯(cuò)誤信號(hào)

界面上有哪些常見錯(cuò)誤產(chǎn)生?找出這些錯(cuò)誤的信號(hào)，做好這些信號(hào)的監(jiān)控。

1. 搜尋與用戶意圖矛盾的用詞
2. 若用戶已購(gòu)買過(guò)該產(chǎn)品，提醒他們
3. 對(duì)功能強(qiáng)大的按鈕要區(qū)分開以避免誤操作
4. 用戶會(huì)走神，這無(wú)法避免。設(shè)計(jì)時(shí)要從視覺上明顯區(qū)分開那些功能強(qiáng)大的按鈕，盡量減少誤操作的可能性。
5. 通過(guò)間隔和顏色區(qū)分強(qiáng)大功能按鈕
6. 為重大且不可逆的操作添加約束條件
7. 提供便利的方法恢復(fù)或退出操作
8. 總是給用戶提供選擇返回上一步操作或安全/可識(shí)別的區(qū)域
9. 使用恢復(fù)操作而不是確認(rèn)操作
10. 為各頁(yè)面或功能提供“逃生艙”(退出操作)
11. 為彈出窗口或模態(tài)窗口提供關(guān)閉按鈕

62盡量減少用戶離開一個(gè)系列操作步驟的負(fù)面影響

1. 允許用戶以原來(lái)的數(shù)據(jù)返回到相應(yīng)步驟頁(yè)面
2. 保存用戶提交的數(shù)據(jù)
3. 讓用戶回到原來(lái)的操作步驟頁(yè)面(別讓用戶又從頭開始)

63加大可移動(dòng)路徑或可點(diǎn)擊區(qū)域

1. 用戶并非完人，他們會(huì)誤操作，因此要提供有彈性或包容性的設(shè)計(jì)。
2. 為小按鈕添加一個(gè)透明邊框(加大按鈕的點(diǎn)擊區(qū)域)
3. 為彈框或下拉菜單添加一點(diǎn)小小的延遲
4. 給整個(gè)菜單選項(xiàng)容器添加超鏈接(不要僅限文字區(qū)域)
5. 給主菜單、列表項(xiàng)和輔助圖標(biāo)都加上超鏈接

64用戶經(jīng)常點(diǎn)到不能點(diǎn)擊的地方。不要試圖矯正這些錯(cuò)誤，相反地，為這些常見區(qū)域添加點(diǎn)擊功能

1. 提供有用和支持性的出錯(cuò)提示
2. 不要給出“發(fā)生錯(cuò)誤”這種提示。解釋出錯(cuò)原因，最好能給出解決方案。
3. 解釋驗(yàn)證出錯(cuò)的原因
4. 對(duì)于復(fù)雜出錯(cuò)提示要提供相關(guān)文檔或幫助鏈接
5. 避免在出錯(cuò)信息中寫“你”

65記錄用戶的最近幾次操作

1. 在界面上提醒用戶最近幾次操作
2. 顯示用戶最近幾次搜索
3. 已訪問(wèn)鏈接用不同的顏色區(qū)分
4. 指出哪些項(xiàng)目用戶已經(jīng)看過(guò)

66分析用戶行為找出界面存在的問(wèn)題

1. 持續(xù)迭代改進(jìn)界面設(shè)計(jì)，可以從下面這些小技巧開始
2. 在適當(dāng)位置收集客戶的反饋信息
3. 添加404錯(cuò)誤次數(shù)上升的預(yù)警設(shè)置
4. 找出那些用戶反復(fù)訪問(wèn)的頁(yè)面
5. 如果一個(gè)頁(yè)面瀏覽數(shù)太多(而獨(dú)立客戶數(shù)少)，就需要仔細(xì)檢查頁(yè)面是否有問(wèn)題導(dǎo)致用戶反復(fù)訪問(wèn)。

網(wǎng)站題目：66個(gè)網(wǎng)頁(yè)制作的技巧
網(wǎng)址分享：http://www.bm7419.com/news39/166389.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、網(wǎng)站設(shè)計(jì)、全網(wǎng)營(yíng)銷推廣、微信公眾號(hào)、企業(yè)網(wǎng)站制作、營(yíng)銷型網(wǎng)站建設(shè)

廣告

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