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

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

1頁面平鋪

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

2導(dǎo)航欄

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

3LOGO

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

4BANNER(廣告條)類型

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

5按鈕

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

6圖片

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

7文字

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

8整體規(guī)劃

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

9功能易用性

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

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

10只重創(chuàng)新

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

11圖片做導(dǎo)航

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

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

12表格布局

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

13中轉(zhuǎn)頁面

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

14添加過多廣告

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

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

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

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

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

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

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

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

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

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

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

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

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

按字母順序

按可用性

按分類

按日期

按距離

按熱門程度

按價格

按相關(guān)性

按大小

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

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

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

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

18盡可能兼容各種輸入和極端個例

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

19盡可能兼容所有媒介

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

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

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

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

21圖像

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

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

22網(wǎng)格與留白

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

23配色，色環(huán)

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

24部件

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

29理解色彩無障礙性

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

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

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

30知道如何編寫代碼

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

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

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

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

32理解人是沒有耐性的

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

45盡可能少讓用戶做計算

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

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

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

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

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

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

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

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

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

49每次交互動作后提供反饋

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

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

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

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

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

52盡可能減少用戶對記憶的依賴

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

其他元素包括：

? 顏色

? 網(wǎng)格和布局

? 位置和定位

? 大小和形狀

? 標(biāo)簽和語言

? 導(dǎo)航

? 表格

? 列表

? 鏈接

? 聲音和腔調(diào)

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

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

61監(jiān)控典型錯誤信號

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

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

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

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

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

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

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

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

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

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

66分析用戶行為找出界面存在的問題

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

網(wǎng)站題目：66個網(wǎng)頁制作的技巧
網(wǎng)址分享：http://muchs.cn/news39/166389.html

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

廣告

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