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

往期回顧：

1. 《有圖有案例！125個提升網頁可用性的優化小技巧（一）》
2. 《有圖有對比！125個提升網頁可用性的優化小技巧（二）》

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

盡可能少讓用戶做計算

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

△ 顯示剩余數量

在界面內體現用戶當前所處位置

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

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

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

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

簡化選擇類任務

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

△ 指明多數用戶選擇的選項

△ 提供常見搜索關鍵詞列表

△ 下拉分類菜單置于相應導航菜單內

使用常規的網頁設計界面

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

△ 使用常規的導航菜單

△ 把實用功能放在右上角

每次交互動作后提供反饋

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

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

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

最小化等待的負面效果

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

△ 加載動畫效果使用冷色調減少對用戶刺激

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

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

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

△ 實時統計顯示任務進展

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

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

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

△ 避免用戶點擊后就消失的行內標簽

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

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

盡量少用鋸齒狀視圖模式

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

△ 合并相同的數據字段幫助用戶進行對比

△ 讓表單標簽緊貼相應元素并對齊

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

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

△ 使用3D特性設計按鈕

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

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

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

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

大多數情況下，清晰明確勝過創意和術語

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

△ 出現外語時，提供翻譯按鈕

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

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

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

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

設計界面時盡量適應這種泛讀瀏覽方式。

△ 保持段落簡短，高亮關鍵詞組

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

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

△ 編寫獨立副標題（不要一篇文章就一個大標題）

△ 用視覺變化拆分文本

盡可能提高文本的可讀性

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

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

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

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

界面設計風格保持一致

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

△ 制定一份前端風格指引

制定一份穩定，總結界面各元素的設計規格說明

其他元素包括：

? 顏色

? 網格和布局

? 位置和定位

? 大小和形狀

? 標簽和語言

? 導航

? 表格

? 列表

? 鏈接

? 聲音和腔調

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

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

通過視覺平衡實現設計美感

美觀的設計更加好用 – 即美即好用效應原則（Kurosu & Kashimura, 1995）.

△ 使用數學原理構造設計

△ 使用對比性字體

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

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

未完待續…

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

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

原文地址：nickkolenda

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

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