編者按：這個(gè)系列的教程有125個(gè)實(shí)用的網(wǎng)頁(yè)優(yōu)化技巧，每一個(gè)技巧都有案例對(duì)比，保證簡(jiǎn)單易懂。今天@企業(yè)官網(wǎng)設(shè)計(jì)精選 翻譯了第二部分 —— 在網(wǎng)頁(yè)設(shè)計(jì)中幫助用戶實(shí)現(xiàn)目標(biāo)，一起來(lái)漲姿勢(shì)！

第一期回顧：《有圖有案例！125個(gè)提升網(wǎng)頁(yè)可用性的優(yōu)化小技巧（一）》

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

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

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

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

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

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

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

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

△ 常用功能直接展示出來(lái)

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

△ 把常見(jiàn)答案放在下拉列表的頭部

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

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

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

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

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

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

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

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

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

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

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

△ 讓用戶可以拖拽元素

△ 讓用戶直接編輯數(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)頁(yè)面的一致性

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

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

解決用戶的核心需求

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

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

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

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

未完待續(xù)…

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

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

原文地址：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"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量112萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com