上海網(wǎng)站建設專家海淘科技與您一起去了解66個網(wǎng)頁制作的技巧，網(wǎng)站的頁面多種多樣，風格各異，網(wǎng)頁的質量直接影響著網(wǎng)站的效果。網(wǎng)頁設計的過程中，需要注意哪些方面的事項，有哪幾方面影響著網(wǎng)頁的設計效果呢?

1頁面平鋪

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

2導航欄

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

3LOGO

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

4BANNER(廣告條)類型

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

5按鈕

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

6圖片

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

7文字

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

8整體規(guī)劃

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

9功能易用性

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

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

10只重創(chuàng)新

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

11圖片做導航

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

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

12表格布局

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

13中轉頁面

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

14添加過多廣告

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

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

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

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

使用適當?shù)男氯艘龑?四種主要的新人引導策略)

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

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

使用卡片分類構建信息架構

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

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

16盡可能適應用戶的操作流程

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

其他排序標準包括：

按字母順序

按可用性

按分類

按日期

按距離

按熱門程度

按價格

按相關性

按大小

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

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

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

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

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

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

19盡可能兼容所有媒介

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

20排字藝術，字體

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

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

21圖像

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

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

22網(wǎng)格與留白

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

23配色，色環(huán)

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

24部件

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

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

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

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

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

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

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

1.是否真的需要這個設計么?

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

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

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

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

27導航(條/欄)是最重要的設計

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

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

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

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

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

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

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

29理解色彩無障礙性

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

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

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

30知道如何編寫代碼

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

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

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

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

32理解人是沒有耐性的

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

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

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

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

34使設計有靈活性和可維護性

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

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

35在界面中突出強調(diào)一個聚焦點

每個界面都應該有一個清晰的起點。用戶應該從哪里看起?要設計清楚。

 在頁面標題部分添加視覺對比

通過視覺的層次引導用戶，通過界面引導控制用戶體驗。他們應該從哪里先看起，第二和第三步又看哪里?設計要建立層次結構。

1. 避免在構圖中補漏留白
2. 使用單列布局
3. 重疊設計元素，強調(diào)連續(xù)性

36使用格式塔原則進行布局設計

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

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

1. 按照接近性將相似功能或菜單項分組顯示
2. 標題位置與對應章節(jié)內(nèi)容更靠近
3. 限制標題與章節(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. 隱藏不常用但必要的設置、功能和信息

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

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

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

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

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

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

如果你怕這樣頁面會雜亂，也可以設計成鼠標懸停時顯示

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

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

通過傳達所有相關信息減少不確定性。

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

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

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

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

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

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

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

43反饋顯示交互動作的預期結果

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

44當用戶取得進展時，給予獎勵或肯定

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

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

45盡可能少讓用戶做計算

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

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

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

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

47簡化選擇類任務

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

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

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

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

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

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

50最小化等待的負面效果

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

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

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

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

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

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

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

54反饋顯示哪些項目是可點擊或交互的

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

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

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

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

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

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

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

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

58界面設計風格保持一致

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

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

其他元素包括：

? 顏色

? 網(wǎng)格和布局

? 位置和定位

? 大小和形狀

? 標簽和語言

? 導航

? 表格

? 列表

? 鏈接

? 聲音和腔調(diào)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

以上就是“66個網(wǎng)頁制作的技巧”內(nèi)容了，更多企業(yè)官方網(wǎng)站建設請關注海淘科技。