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

控制用戶的焦點(diǎn)和注意力

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

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

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

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

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

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

使用單列布局

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

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

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

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

按照接近性將相似功能或菜單項(xiàng)分組顯示

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

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

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

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

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

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

刪除或弱化不必要的信息

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

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

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

去掉不必要的邊框

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

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

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

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

添加陰影以指示深度

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

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

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

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

顯示剩余數(shù)量

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

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

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

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

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

簡化選擇類任務(wù)

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

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

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

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

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

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

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

把實(shí)用功能放在右上角

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

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

重要的交互動(dòng)作后反饋提示成功消息

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

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

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

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

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

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

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

實(shí)時(shí)統(tǒng)計(jì)顯示任務(wù)進(jìn)展

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

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

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

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

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

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

盡量少用鋸齒狀視圖模式

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

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

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

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

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

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

為可拖拽元素添加點(diǎn)狀紋理

使用圖標(biāo)和符號(hào)傳達(dá)一個(gè)交互動(dòng)作的意圖

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

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

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

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

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

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

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

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

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

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

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

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

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

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

用視覺變化拆分文本

盡可能提高文本的可讀性

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

讓文本和背景具有鮮明對(duì)比

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

正文的主要部分采用左對(duì)齊

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

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

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

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

其他元素包括：

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

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

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

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

使用對(duì)比性字體

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

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

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

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

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

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

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

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

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

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

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

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

常用功能直接展示出來

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

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

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

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

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

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

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

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

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

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

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

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

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

讓用戶可以拖拽元素

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

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

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

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

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

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

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

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

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

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

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

按次序顯示或預(yù)覽下一個(gè)項(xiàng)目

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

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

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

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

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

進(jìn)度條從大于0%的地方開始

解決用戶的核心需求

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

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

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

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

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