由于依托微信龐大的用戶群體，加以 web 產(chǎn)品靈活、適合快速開發(fā)驗證 以及 微信提供了功能豐富的 SDK；基于微信客戶端的 web 產(chǎn)品越來越受開發(fā)者的歡迎。
接下來，筆者將從交互設(shè)計角度分享自己近段時間來的心得，歡迎交流 :-)

主要內(nèi)容

1. 基本原則
2. 導(dǎo)航
3. 操作
4. 數(shù)據(jù)錄入
5. 數(shù)據(jù)展示
6. 反饋

1. 基本原則

• 符合預(yù)期
  用戶在使用產(chǎn)品時往往會事先形成自己的預(yù)期（例如購買商品時提交支付密碼即可完成支付）如果產(chǎn)品沒有按照用戶的預(yù)期進行工作就可能帶來不好的體驗，所以在產(chǎn)品設(shè)計前應(yīng)該研究用戶的心智模型在產(chǎn)品設(shè)計中設(shè)計出符合用戶預(yù)期的體驗。
  （1） 功能可見
  “可操作的對象在用戶看來是可操作的，反之亦然”
  在扁平化設(shè)計趨于主流的今天，功能可見性顯得尤為重要

分享引導(dǎo)

除了有強引導(dǎo)性的頁面主按鈕之外，一些弱文字鏈的功能可見性也不容忽視

使用"可點擊色"暗示文字鏈可點擊

（2）視覺流暢
整齊劃一的布局使頁面元素出現(xiàn)的位置符合用戶預(yù)期從而創(chuàng)造較好的瀏覽體驗

對齊的文本框標(biāo)題與提示

（3）一致性與標(biāo)準(zhǔn)化
用戶使用產(chǎn)品或外界產(chǎn)品后，會產(chǎn)生一定的使用預(yù)期；例如下拉可以刷新、點擊狀態(tài)欄或?qū)Ш綑诳梢钥焖倩氐巾敳俊?br> 這就要求開發(fā)者需要注意自己管理的多個產(chǎn)品的交互一致性，不能出現(xiàn)同樣的元素或組件表意、操作結(jié)果不同的情況出現(xiàn)；還要注意自己的產(chǎn)品與外界的交互規(guī)范達成統(tǒng)一、標(biāo)準(zhǔn)化。

• 減少打擾
  系統(tǒng)與用戶交互應(yīng)該在保證任務(wù)達成的前提下盡可能的降低甚至消除對用戶的打擾
  （1）局部反饋
  相比模態(tài)彈窗這類高阻斷的全局反饋形式，局部反饋僅在反饋對象上或用戶的關(guān)注點上進行反饋，可以減少對用戶的打擾更清晰的表述系統(tǒng)當(dāng)前的狀態(tài)。

加載中...

（2）階段展示
隱藏頁面內(nèi)次要的內(nèi)容，僅當(dāng)用戶需要時向用戶展示

點擊“查看詳細(xì)配置參數(shù)”

展示詳細(xì)信息

（3）適時出現(xiàn)
系統(tǒng)應(yīng)該僅在需要時執(zhí)行必要的操作，例如盡量不要在用戶剛進入系統(tǒng)時要求用戶授權(quán)個人信息等隱私權(quán)限

點擊“微信登錄”后彈出提示窗

2. 導(dǎo)航

開發(fā)者無需也無能力自定義微信瀏覽器自帶的導(dǎo)航欄（除頁面標(biāo)題外）
傳統(tǒng) app 能搭載在導(dǎo)航欄上的功能按鈕（主要是對頁面進行操作）將無法通過微信瀏覽器導(dǎo)航欄搭載，
所以在基于微信平臺進行設(shè)計時，首先要解決應(yīng)用導(dǎo)航和對頁面進行操作的問題。

• 快速回到首頁
  由于 H5 頁面的性能限制，在面臨了多層級跳轉(zhuǎn)時，頻繁的頁面加載會使用戶感到煩躁
  當(dāng)前頁面距離產(chǎn)品首屏 >= 2 個層級時,需要提供快速返回產(chǎn)品首屏的功能

點擊回到首頁

快速前往其他模塊

• 使用 js 頁面層和彈出框，減少頁面跳轉(zhuǎn)
  這不但提高效率給用戶帶來了更好的體驗，同時也能提高產(chǎn)品的業(yè)務(wù)達成率減少流失

使用彈出框的方式幫助用戶進行輸入，減少頁面跳轉(zhuǎn)

• 減少導(dǎo)航控件對頁面內(nèi)容區(qū)域的占用
  微信瀏覽器自帶的導(dǎo)航已經(jīng)占用了部分屏幕空間，當(dāng)開發(fā)者不得不增加導(dǎo)航時，通過給自制導(dǎo)航欄背景增加透明度可以減少頁面空間的壓迫感?；蛘哌x擇微信官方推薦的底部標(biāo)簽欄。

• 單頁 Web 程序

單頁 Web 應(yīng)用（single page web application，SPA），就是只有一張
Web 頁面的應(yīng)用，是加載單個 HTML 頁面并在用戶與應(yīng)用程序交互時動態(tài)更新該頁面的 Web 應(yīng)用程序?！俣劝倏?/p>

單頁 Web 程序的操作與內(nèi)容展示都由 JavaScript 執(zhí)行，與服務(wù)器的交互由 AJAX 執(zhí)行，體驗上接近原生 APP 的體驗，流暢、快速響應(yīng)。此技術(shù)可大大提升 Web 應(yīng)用程序的使用體驗。

體驗接近原生 APP 的「知乎Live」Web APP

3. 操作

傳統(tǒng) APP 通過導(dǎo)航欄放置針對當(dāng)前頁面可進行操作的功能按鈕

作為“搜索”、“更多”功能載體的微信導(dǎo)航欄

作為“側(cè)拉菜單”、“下拉菜單”、“搜索”功能載體的微博國際版導(dǎo)航欄

受微信瀏覽器導(dǎo)航欄自定義許可范圍的限制，我們需要考慮對當(dāng)前頁進行操作的載
體，以及如何平衡載體與頁面內(nèi)容顯示空間之間的占用屏幕位置的矛盾

• 新增

輕芒雜志

點擊圖中的“新增”按鈕后，會在按鈕之后、最新的數(shù)據(jù)之前增加一條新的數(shù)據(jù)，此種方式上下文更有邏輯關(guān)系，與其他內(nèi)容一體性更強。當(dāng)所需要添加的內(nèi)容較為私人時，可以考慮這樣的設(shè)計形式。此種方式占用空間大，不適合數(shù)據(jù)數(shù)量多的場景(例如論壇發(fā)帖)

當(dāng)前頁面的核心任務(wù)以瀏覽為主并且發(fā)布的內(nèi)容公開時，頁面主操作按鈕可以參考谷歌的設(shè)計規(guī)范使用懸浮按鈕，至于右下角）
懸浮按鈕對用戶的行動召喚力更強

知曉程序”的懸浮按鈕

當(dāng)你的產(chǎn)品的核心內(nèi)容是發(fā)布內(nèi)容時，你也可以將發(fā)布內(nèi)容按鈕放置于底部 tab 欄，

用戶希望輸入的數(shù)據(jù)不多時，使用彈窗

使用彈出框的方式幫助用戶進行輸入，減少頁面跳轉(zhuǎn)

• 編輯和刪除
  一般使用 2 種處理方式
  （1）通過點擊行內(nèi)操作按鈕顯示對數(shù)據(jù)項的編輯、刪除等操作

行內(nèi)操作按鈕觸發(fā)行動菜單

（2）通過編輯欄放置“編輯”按鈕，點擊“編輯”后進入編輯態(tài)，此時編輯欄上顯示“刪除”等操作按鈕

刪除按鈕需要使用警告色(一般為紅色)引起用戶注意以防止誤操作

• 搜索欄
  放置于頁面頂部，方便用戶快速找到目標(biāo)

4. 數(shù)據(jù)輸入

• 盡量減少鍵盤錄入
  提供合理的默認(rèn)值減少用戶輸入、選擇的次數(shù)

默認(rèn)值——中國

使用選項或滑塊代替鍵盤錄入

單選框和復(fù)選框

善用JSSDK
使用微信提供的 JSSDK 獲取用戶個人信息、地址、定位等數(shù)據(jù)減少鍵盤錄入

• 提供格式說明
  提供準(zhǔn)確的格式說明幫助用戶完成錄入操作

“需多于 5 個字”

5. 數(shù)據(jù)展示

移動設(shè)備的使用場景復(fù)雜且極其不穩(wěn)定,用戶使用移動設(shè)備的時間較為碎片化,用戶在移動設(shè)備上瀏覽內(nèi)容的方式是"掃"而不是"閱讀

• 垂直列表
  便于用戶逐條瀏覽

垂直列表

• 橫向列表
  支持左右滑動查看，節(jié)約屏幕空間，便于圖片展示與比較

京東

• 突出重點信息，刪除或弱化次要信息
• 空白頁的設(shè)計
  產(chǎn)品在首次被使用時往往會出現(xiàn)無數(shù)據(jù)的情況，此時需要注意空白頁的設(shè)計；空白頁需要告知用戶當(dāng)前的情況“當(dāng)前頁面無數(shù)據(jù)”，并且告知用戶什么時候當(dāng)前頁面才會出現(xiàn)數(shù)據(jù)以幫助用戶在需要時回到當(dāng)前頁面查看數(shù)據(jù)

“還沒有參與過 Live”

一部分頁面的數(shù)據(jù)來自用戶的手動添加，此時在空白頁除了告知用戶當(dāng)前情況，還可以引導(dǎo)用戶進行添加數(shù)據(jù)操作，

6. 反饋

用戶使用產(chǎn)品時，希望知道系統(tǒng)做了什么，正在做什么以及即將做什么（系統(tǒng)狀態(tài)可見性）

局部反饋
在需要進行反饋時，局部反饋是一個不錯的解決方案,他回答了用戶對于"系統(tǒng)正在做什么"的疑問

正在提交

正在加載頁面內(nèi)容

局部反饋是一種清晰、簡潔、易懂、有邏輯的反饋方式，它只在用戶的關(guān)注點進行工作，通常是用戶進行某種操作之后進行的反饋，所以局部反饋更多地用于系統(tǒng)的加載狀態(tài)，也就是「系統(tǒng)正在做什么」

• toast
  toast 是一種較輕的反饋方式，可以用來描述用戶的操作結(jié)果或簡單地描述系統(tǒng)狀態(tài)。

描述操作結(jié)果

描述系統(tǒng)狀態(tài)

• dialog
  dialog 是一種強阻斷的反饋方式。
  在用戶進行重要的操作時可以用來描述“系統(tǒng)即將做什么” ，比如常見的刪除操作告訴用戶即將刪除重要資料幫助用戶進行二次確認(rèn)以防止誤操作。
  在用戶使用產(chǎn)品遇到問重要題時也可以使用 dialog 向用戶反饋「系統(tǒng)做了什么」，比如「網(wǎng)絡(luò)連接中斷」、「 密碼不正確」等
  dialog 也經(jīng)常用來反饋系統(tǒng)的當(dāng)前狀態(tài)提供提示和指引、詢問用戶系統(tǒng)該如何工作。
  dialog 是一種強阻斷的反饋形式，需要謹(jǐn)慎運用

weui 給出的 dialog 文案說明建議

好的反饋形式往往是在清晰反饋信息給用戶的同時最大限度的降低對用戶的打擾和負(fù)擔(dān)
局部反饋 < toast < dialog （按打擾程度進行排序）
防止過度反饋,當(dāng)操作結(jié)果在頁面可見時(例如成功添加一條信息或刪除一條信息，頁面自然會新增或減少一條信息),則無需再進行反饋。

比起用戶操作后給予提示，更優(yōu)雅的方式是:灰化或隱藏不可操作的對象

反例

參考資料
螞蟻設(shè)計
《簡約至上 交互式設(shè)計 4 步驟》