玩運彩練小喂

簡述微信小程序的介面設計規範

騰訊在201719日正式發佈微信小程序,關於這套產品的目的與來龍去脈,早有專文完整介紹,在此不贅述。

簡單講,微信相當於台灣人普遍使用的line,而微信小程序,是架構在微信內部的小型APP,但用戶無需另外安裝,只需要先安裝微信當進入點;再者小程序是HTML5的血統,非原生APP。若以蘋果的app store來比喻,微信相當於app store,小程序就是app store當中的APP。微信多達8億用戶在使用微信聊天時,隨時能進入小程序的天地,也可以把小程序分享到對話群組中。

以下不談這套產品的策略,只專注於小程序的介面設計規範。

大體看來,規範的大原則與其他大廠的定義相去不遠,講求突出重點、去除干擾、流程清楚、導航一致、減少手動輸入等等,這些常見原則已經是開發者心照不宣的默契。

3navigation.iOS_
iOS導航區

第一個特別之處是導航區,iOS版在小程序的次級頁面增加了“關閉“按鈕。最左方”返回”的作用與我們的認知相同:回到上一畫面。而“關閉”則是直接關掉小程序,回到最上層的微信,當再次開啟同一個小程序,會回到最後按下關閉的畫面。首先這樣的設定異於iOS的介面常模,在僅有圖示的情況下,用戶難免要經過前幾次試用,才能明辨這兩個按鈕的功能差異,若無法明辨,代表有一個按鈕是多餘。再者,多了一個按鈕,將擠壓標題的伸展空間。最後,也是我認為最重要的問題點,兩兩相依的按鈕,出現在4.7吋以上的iphone手機,單手點擊時需要更多注意力,才不會誤觸錯誤的按鈕。

也許因為我目前試用過的小程序,層級都很簡單,次級頁面的關閉按鈕,相較之下顯得多餘。

3navigation.android
Android導航區

Android的導覽列比iOS更單純,直接剔除左上方的回上層虛擬按鍵,企圖以手機上的常駐返回鍵取代之。

我認同這樣的規劃,能精簡畫面,同時虛擬與常駐按鈕的功能涇渭分明,足以減輕用戶的認知負擔。關於常用的返回前頁,Android系統預設兩種途徑:APP介面內的虛擬按鈕“回上層”(up)與手機上的常駐按鈕“返回”(back)。兩者很相似,功能屬性有所重疊,但又不完全一樣,這正是麻煩的地方。回上層僅在該APP中起作用,最多回到APP的頂層頁面,同時按鈕消失;常駐的返回”,規則複雜許多,且有前後文關係,持續按不僅僅回到前頁,還可能切換到先前使用的APP,或者回到手機主畫面,一切端看用戶的操作歷程。光是這點就很容易造成用戶混淆,若按下常駐的返回按鈕,卻帶出非預期的結果,搞不清楚背後運作規則的使用者,可能會避免再次點擊,改用虛擬按鈕。

現在,小程序剔除虛擬按鈕“回上層”,習慣點擊左上方回前頁的使用者,看來得重新適應了。

再來,小程序明確區分各種等待狀態,分別是:啟動頁加載、頁面下拉更新加載、頁面下拉更新加載、頁面中加載、模態加載、局部加載。不僅以圖例清楚說明,也交待了各種介面適用的情境。這點倒是闡述的比Google和Apple清楚。

4miniapploading
啟動頁加載:進入小程序首先看到的畫面,加載提示顯示當前狀態,其擺放位置巧妙突顯了品牌
4loading
模態加載覆蓋全頁,未明確告知載入位置與內容,可能引起用戶焦慮

操作回饋的部分也是:局部操作回饋、彈出式回饋、模態對話框、結果頁。後三項屬於頁面級的操作回饋,但適用情況仍有所差異。

5global.toast_
彈出式提示,自動消失、不打斷流程、影響較小,適用於不需強調的操作提醒,比如:成功提示。
5global.result
結果頁,用於操作結果,是當前流程的最後一步。最明確告知用戶已經完成,也可提供下一步的指引

接著是字體規範。文中提到常用字號最小至11pt,並建議使用在說明文本,例如版權訊息等不需要用戶關注的信息。關於這點,我先前在公司內部曾做過簡易的字級測試,14pt的閱讀舒適度已經偏低,建議需要閱讀的內文,字級至少要設定16pt以上。當然如果已經確認是非關鍵但又必須出現的訊息,大膽使用小字級,配合弱化的色系,邊疆地帶的位置,也比較不會造成畫面的紊亂。

8Font

不過常用字級包含了17、13、11pt三個奇數值,在應用上不免造成困擾。怎麼說呢?

9List

10Input

比如表單輸入欄位使用17pt的文字,標題部分容許最多五個字,最大寬度便成了85px,與旁邊輸入文字相距5px,兩種慣用尺寸都是奇數。但輸入欄位之間的間隔是20px,小標題距離底下輸入欄位8px。一下奇數一下偶數,不如material design的物件尺寸都是4的倍數簡單易記。

其實無論是常用字級還是尺寸定義,沿用常用數值即可,真的不需要標新立異。


大致上,小程序的介面設計規範可以說是material design的精簡版,基本上極簡風介面發展到當前,各家提出的靜態樣式越來越接近,差異已經不大。下一波走勢,會是在流程上的創新與無接縫的過場,強化更順暢、更沉浸式的使用體驗。

只要先熟悉material design定義的內容,再接觸微信小程序,消化的時間不會太多。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *