本文是一篇關(guān)于84個網(wǎng)站設(shè)計實用小技巧，希望能給大家有所幫助。

控制用戶的焦點和注意力

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

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

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

通過視覺的層次引導(dǎo)用戶

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

避免在構(gòu)圖中補漏留白

使用單列布局

重疊設(shè)計元素，強調(diào)連續(xù)性

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

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

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

按照接近性將相似功能或菜單項分組顯示

標(biāo)題位置與對應(yīng)章節(jié)內(nèi)容更靠近

限制標(biāo)題與章節(jié)內(nèi)容在同一界限內(nèi)

在不干擾用戶的前提下呈現(xiàn)界面變化

有一些界面變化會發(fā)生在用戶使用期間，這些變化要做到明顯但不干擾用戶。

用明顯的動畫呈現(xiàn)界面變化

將出錯的元素區(qū)分顯示出來，錯誤提醒信息放置在表單頂部

刪除或弱化不必要的信息

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

彈出或模態(tài)窗口背景模糊處理

在所有圖像中最大限度地提高數(shù)據(jù)墨水比率(讓數(shù)據(jù)更凸顯)

去掉不必要的邊框

刪除冗余或不言自明的說明

隱藏不常用但必要的設(shè)置、功能和信息

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

通過首屏延伸頁面下方信息元素

添加陰影以指示深度

用文字或圖形表示有更多內(nèi)容

除了引導(dǎo)用戶，還要減少他們的認(rèn)知流程，以保持流暢狀態(tài)。

盡可能少讓用戶做計算

千萬別把計算這種事情丟給用戶，讓計算機來處理。

顯示剩余數(shù)量

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

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

在導(dǎo)航菜單上突出當(dāng)前所選

在復(fù)雜的界面中提供面包屑導(dǎo)航或步驟圖示

在頁面標(biāo)題前面部分放置描述性或有用的信息

簡化選擇類任務(wù)

做選擇需要費腦筋，簡化這類任務(wù)讓用戶少費神

指明多數(shù)用戶選擇的選項

提供常見搜索關(guān)鍵詞列表

下拉分類菜單置于相應(yīng)導(dǎo)航菜單內(nèi)

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

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

使用常規(guī)的導(dǎo)航菜單

把實用功能放在右上角

每次交互動作后提供反饋

用戶跟界面進行互動后，需獲得實時反饋。操作成功還是失敗了?發(fā)生了什么變化?

重要的交互動作后反饋提示成功消息

顯示當(dāng)前鼠標(biāo)停留在哪個項目上

最小化等待的負面效果

消滅所有不必要的等待。如果確實要用戶等，則最小化該負面效果。

加載動畫效果使用冷色調(diào)減少對用戶刺激

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

長時間等待時保持用戶活躍度(別人他們干等)

防止用戶上傳不支持的文件

實時統(tǒng)計顯示任務(wù)進展

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

別讓用戶去記住任何東西，將相關(guān)信息顯示出來

讓表單標(biāo)簽保持一直可見

避免用戶點擊后就消失的行內(nèi)標(biāo)簽

占位文本放到表單元素的外邊

為可移動輸入添加復(fù)制按鈕(Add Copy Buttons to Movable Input )

盡量少用鋸齒狀視圖模式

減少用戶眼睛來回移動的次數(shù)，讓各項補充數(shù)據(jù)保持接近。

合并相同的數(shù)據(jù)字段幫助用戶進行對比

讓表單標(biāo)簽緊貼相應(yīng)元素并對齊

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

用戶需要識別哪些元素是可交互的(并且知道如何交互)。

使用3D特性設(shè)計按鈕

為可拖拽元素添加點狀紋理

使用圖標(biāo)和符號傳達一個交互動作的意圖

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

用常見的文字和符合來溝通

大多數(shù)情況下，清晰明確勝過創(chuàng)意和術(shù)語

講用戶懂的語言，不講程序語言

出現(xiàn)外語時，提供翻譯按鈕

顏色的選擇要與語義保持一致

當(dāng)顏色跟語義不一致時，會增加用戶處理信息的困擾。如meetup.com上使用紅色確認(rèn)出席，準(zhǔn)確應(yīng)該是用綠色。

盡可能提高界面的可瀏覽性

多數(shù)用戶采用瀏覽掃讀的方式處理內(nèi)容，我們需要接受這種行為。

設(shè)計界面時盡量適應(yīng)這種泛讀瀏覽方式。

保持段落簡短，高亮關(guān)鍵詞組

把重要信息放在列表的開頭

給表格添加交替的行條紋背景

編寫?yīng)毩⒏睒?biāo)題(不要一篇文章就一個大標(biāo)題)

用視覺變化拆分文本

盡可能提高文本的可讀性

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

讓文本和背景具有鮮明對比

背景上顯示文本需要注意，可能需要做一些疊加或模糊處理。(以作者照片為例…)

正文的主要部分采用左對齊

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

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

制定一份前端風(fēng)格指引

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

其他元素包括：

導(dǎo)航菜單保持在相同位置

通過視覺平衡實現(xiàn)設(shè)計美感

美觀的設(shè)計更加好用 – 即美即好用效應(yīng)原則(Kurosu & Kashimura, 1995).

使用數(shù)學(xué)原理構(gòu)造設(shè)計

使用對比性字體

挑選搭配字體時，有人喜歡使用相似的字體，但這種方式是錯的，很多時候相似的看上去并不對。

相反，應(yīng)該精心挑選對比鮮明的字體，新手設(shè)計師可以選擇serif vs sans-serif(英文字體)，如上圖

引導(dǎo)用戶前往最終目標(biāo)

在吸引用戶注意力后，下一步就是幫助他們實現(xiàn)目標(biāo)

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

預(yù)測用戶的意圖，讓他們盡可能接近目標(biāo)。

篩選出或跳至用戶正在搜索的條目

將用戶常選項目列為默認(rèn)選項

產(chǎn)品列表頁上把重要數(shù)據(jù)信息展示出來

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

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

鼠標(biāo)懸停時顯示有用信息

常用功能直接展示出來

用儀表面板方式展現(xiàn)主要數(shù)據(jù)和狀態(tài)

把常見答案放在下拉列表的頭部

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

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

在機器驅(qū)動的任務(wù)中顯示當(dāng)前進度和剩余時間

如上傳文件是系統(tǒng)在處理，用戶不知道內(nèi)部運作情況，通過顯示進度條可以讓用戶知道進展。

復(fù)雜或冗長的交互狀態(tài)要及時反饋呈現(xiàn)

按次序顯示操作步驟總數(shù)

顯示類目下的條目數(shù)

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

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

用戶可通過用戶名或電子郵件登錄系統(tǒng)

為重復(fù)操作類功能提供鍵盤快捷鍵

讓用戶可以拖拽元素

讓用戶直接編輯數(shù)據(jù)信息

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

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

描述清楚你需要用戶輸入什么

實時顯示密碼要求并反饋輸入狀態(tài)

為表單元素預(yù)填通用參數(shù)

顯示表單的必填和選填信息

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

在用戶進行交互操作之前，他們應(yīng)該了解預(yù)期結(jié)果是什么

使用描述性按鈕標(biāo)簽

根據(jù)當(dāng)前的輸入，顯示結(jié)果預(yù)覽

按次序顯示或預(yù)覽下一個項目

使用智能菜單項明確操作內(nèi)容

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

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

保證鏈接與目標(biāo)頁面的一致性

為新加入用戶提供速效指引環(huán)節(jié)(如迅速建立人脈)

進度條從大于0%的地方開始

解決用戶的核心需求

很多時候，我們只解決了用戶的表層需求。深入下去，探究為何用戶需要某些功能或信息，然后解決他們的底層需求

顯示當(dāng)前時間辦公室處于開放還是關(guān)閉狀態(tài)

顯示事件的新近狀態(tài)

如最近發(fā)表的評論，顯示為幾天之前而不是具體日期，用戶可明確感知是新評論。

以上就是《【經(jīng)典】84個網(wǎng)站設(shè)計實用小技巧》內(nèi)容了，更多精彩內(nèi)容，點擊《網(wǎng)站設(shè)計中不要忽視哪些問題》，了解更多。