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

主要內容

1. 基本原則
2. 導航
3. 操作
4. 數據錄入
5. 數據展示
6. 反饋

1. 基本原則

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

分享引導

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

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

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

對齊的文本框標題與提示

（3）一致性與標準化
用戶使用產品或外界產品后，會產生一定的使用預期；例如下拉可以刷新、點擊狀態欄或導航欄可以快速回到頂部。
這就要求開發者需要注意自己管理的多個產品的交互一致性，不能出現同樣的元素或組件表意、操作結果不同的情況出現；還要注意自己的產品與外界的交互規范達成統一、標準化。

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

加載中...

（2）階段展示
隱藏頁面內次要的內容，僅當用戶需要時向用戶展示

點擊“查看詳細配置參數”

展示詳細信息

（3）適時出現
系統應該僅在需要時執行必要的操作，例如盡量不要在用戶剛進入系統時要求用戶授權個人信息等隱私權限

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

2. 導航

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

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

點擊回到首頁

快速前往其他模塊

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

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

• 減少導航控件對頁面內容區域的占用
  微信瀏覽器自帶的導航已經占用了部分屏幕空間，當開發者不得不增加導航時，通過給自制導航欄背景增加透明度可以減少頁面空間的壓迫感。或者選擇微信官方推薦的底部標簽欄。

• 單頁 Web 程序

單頁 Web 應用（single page web application，SPA），就是只有一張
Web 頁面的應用，是加載單個 HTML 頁面并在用戶與應用程序交互時動態更新該頁面的 Web 應用程序。——百度百科

單頁 Web 程序的操作與內容展示都由 JavaScript 執行，與服務器的交互由 AJAX 執行，體驗上接近原生 APP 的體驗，流暢、快速響應。此技術可大大提升 Web 應用程序的使用體驗。

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

3. 操作

傳統 APP 通過導航欄放置針對當前頁面可進行操作的功能按鈕

作為“搜索”、“更多”功能載體的微信導航欄

作為“側拉菜單”、“下拉菜單”、“搜索”功能載體的微博國際版導航欄

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

• 新增

輕芒雜志

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

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

知曉程序”的懸浮按鈕

當你的產品的核心內容是發布內容時，你也可以將發布內容按鈕放置于底部 tab 欄，

用戶希望輸入的數據不多時，使用彈窗

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

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

行內操作按鈕觸發行動菜單

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

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

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

4. 數據輸入

• 盡量減少鍵盤錄入
  提供合理的默認值減少用戶輸入、選擇的次數

默認值——中國

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

單選框和復選框

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

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

“需多于 5 個字”

5. 數據展示

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

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

垂直列表

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

京東

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

“還沒有參與過 Live”

一部分頁面的數據來自用戶的手動添加，此時在空白頁除了告知用戶當前情況，還可以引導用戶進行添加數據操作，

6. 反饋

用戶使用產品時，希望知道系統做了什么，正在做什么以及即將做什么（系統狀態可見性）

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

正在提交

正在加載頁面內容

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

• toast
  toast 是一種較輕的反饋方式，可以用來描述用戶的操作結果或簡單地描述系統狀態。

描述操作結果

描述系統狀態

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

weui 給出的 dialog 文案說明建議

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

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

反例

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