編者按：這個系列的教程有125個實用的網(wǎng)頁優(yōu)化技巧，每一個技巧都有案例闡述，保證簡單易懂。今天@企業(yè)官網(wǎng)設(shè)計精選 翻譯了第三部分 —— 在網(wǎng)頁設(shè)計中如何少讓用戶費腦筋，保持操作流暢。一起來收！

往期回顧：

1. 《有圖有案例！125個提升網(wǎng)頁可用性的優(yōu)化小技巧（一）》
2. 《有圖有對比！125個提升網(wǎng)頁可用性的優(yōu)化小技巧（二）》

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

盡可能少讓用戶做計算

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

△ 顯示剩余數(shù)量

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

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

△ 在導航菜單上突出當前所選

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

△ 在頁面標題前面部分放置描述性或有用的信息

簡化選擇類任務(wù)

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

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

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

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

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

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

△ 使用常規(guī)的導航菜單

△ 把實用功能放在右上角

每次交互動作后提供反饋

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

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

△ 顯示當前鼠標停留在哪個項目上

最小化等待的負面效果

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

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

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

△ 長時間等待時保持用戶活躍度（別人他們干等）

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

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

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

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

△ 讓表單標簽保持一直可見

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

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

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

盡量少用鋸齒狀視圖模式

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

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

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

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

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

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

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

△ 使用圖標和符號傳達一個交互動作的意圖

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

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

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

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

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

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

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

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

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

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

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

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

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

△ 編寫?yīng)毩⒏睒祟}（不要一篇文章就一個大標題）

△ 用視覺變化拆分文本

盡可能提高文本的可讀性

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

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

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

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

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

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

△ 制定一份前端風格指引

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

其他元素包括：

? 顏色

? 網(wǎng)格和布局

? 位置和定位

? 大小和形狀

? 標簽和語言

? 導航

? 表格

? 列表

? 鏈接

? 聲音和腔調(diào)

需要靈感參考？看看Mailchimp的風格指引（http://ux.mailchimp.com/patterns）

△ 導航菜單保持在相同位置

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

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

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

△ 使用對比性字體

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

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

未完待續(xù)…

「技多不壓身的設(shè)計師才有高薪資！」

1. 平面設(shè)計：《超贊！設(shè)計師完全自學指南》
2. 交互設(shè)計：《交互設(shè)計師修煉指南！教你從零開始成為優(yōu)秀交互設(shè)計師》
3. UI設(shè)計：《超實用新手指南！零基礎(chǔ)如何自學UI設(shè)計？》
4. 前端開發(fā)：《天貓高手來教你！零基礎(chǔ)如何系統(tǒng)地學習前端開發(fā)？》
5. 摳圖技巧：《從菜鳥到高手！PHOTOSHOP摳圖全方位攻略》
6. 配色方案：《色彩搭配速成！3個實用方法幫你全面搞定配色》
7. DPI指南：《基礎(chǔ)知識學起來！為設(shè)計師量身打造的DPI指南》
8. 交互設(shè)計自學路徑圖：《零基礎(chǔ)入門！給非科班生的自學路徑圖之交互設(shè)計篇》

原文地址：nickkolenda

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學習平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量112萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導航：http://hao.uisdc.com