編者按：這個(gè)系列的教程有125個(gè)實(shí)用的網(wǎng)頁(yè)優(yōu)化技巧，每一個(gè)技巧都有案例闡述，保證簡(jiǎn)單易懂。今天@企業(yè)官網(wǎng)設(shè)計(jì)精選?翻譯了第四部分 —— 在網(wǎng)頁(yè)設(shè)計(jì)中兼顧所有用戶和場(chǎng)景的3個(gè)技巧。一起來(lái)收！

往期回顧：

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

盡可能兼顧不同用戶的知識(shí)和技能水平

用戶可能是新手、專家或介于兩者之間，要根據(jù)用戶情況設(shè)計(jì)界面。

△ 使用適當(dāng)?shù)男氯艘龑?dǎo)（四種主要的新人引導(dǎo)策略）

這四種用法剛好可以用一個(gè)2*2的矩陣來(lái)表示。根據(jù)下方圖示選擇最適合你界面的方式：

△?為新手用戶添加提示而不干擾專家用戶

△?使用卡片分類構(gòu)建信息架構(gòu)

若你想了解用戶如何確定或概念化菜單分類，使用開放式卡片分類；

若你想了解用戶如何將現(xiàn)有元素歸類到預(yù)制分類，使用封閉式卡片分類；

盡可能適應(yīng)用戶的操作流程

用戶會(huì)有不同的需求，根據(jù)不同操作流程調(diào)整界面設(shè)計(jì)。

△?讓用戶控制數(shù)據(jù)的呈現(xiàn)方式

△?讓用戶控制數(shù)據(jù)的排序方式

其他排序標(biāo)準(zhǔn)包括：

• 按字母順序
• 按可用性
• 按分類
• 按日期
• 按距離
• 按熱門程度
• 按價(jià)格
• 按相關(guān)性
• 按大小

△?讓用戶控制數(shù)據(jù)顯示的數(shù)量

△?構(gòu)建用戶畫像以區(qū)分具體操作流程

△?讓用戶通過(guò)新標(biāo)簽頁(yè)打開頁(yè)面

很多用戶習(xí)慣先打開頁(yè)面，后續(xù)再去瀏覽。

盡可能提高網(wǎng)頁(yè)的可及性

讓殘疾人群也可以訪問(wèn)使用你的界面。這不僅是好的做法，還可以避免法律后果（看你做的是什么產(chǎn)品）

△?在HTML5中使用語(yǔ)義標(biāo)簽

△?使用多種提示來(lái)溝通反饋信息

大約8%的男性是色盲（Chan, Goh, & Tan, 2014）。不要單獨(dú)通過(guò)顏色來(lái)傳達(dá)信息，提供多種提示。

盡可能兼容各種輸入和極端個(gè)例

應(yīng)該允許用戶輸入各種信息而無(wú)后顧之憂。

△?解決自動(dòng)生成信息帶來(lái)的不好結(jié)果

（譯者注：上圖客戶旅游目的地是奧斯威辛，通過(guò)模板消息“<目的地名稱>玩得開心”，會(huì)生成“奧斯威辛玩得開心”的提示，但奧斯威辛集中營(yíng)是個(gè)負(fù)面的聯(lián)想，“奧斯威辛集中營(yíng)玩得開心”，會(huì)讓用戶不爽。保險(xiǎn)起見，改成提示“旅途愉快”）

△?使用支持多種輸入格式的表單元素

△?顯示能解決搜索者需求的結(jié)果

△?使用能處理錯(cuò)別字、同義詞或變體詞的搜索

盡可能兼容所有媒介

界面需要在各種環(huán)境都能運(yùn)作（如不同設(shè)備、瀏覽器等）

△?根據(jù)用戶瀏覽器定制不同的操作指引

△?在小型設(shè)備上使用單窗口深入的方式

未完待續(xù)…

友情宣傳下，阿里UED 新開了個(gè)公眾號(hào)，已經(jīng)發(fā)了不少干貨，歡迎關(guān)注喲：

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

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

原文地址：nickkolenda