微信小程序官方設計指南

時間：2016-10-22 16:24:00

概要

基於(yu) 微信小程序輕快的特點，我們(men) 擬定了小程序界麵設計指南和建議。設計指南建立在充分尊重用戶知情權與(yu) 操作權的基礎之上。旨在微信生態體(ti) 係內(nei) ，建立友好、高效、一致的用戶體(ti) 驗，同時最大程度適應和支持不同需求，實現用戶與(yu) 小程序服務方的共贏。

友好禮貌

為(wei) 了避免用戶在微信中使用小程序服務時，注意力被周圍複雜環境幹擾，小程序在設計時應該注意減少無關(guan) 的設計元素對用戶目標的幹擾，禮貌地向用戶展示程序提供的服務，友好地引導用戶進行操作。

重點突出

每個(ge) 頁麵都應有明確的重點，以便於(yu) 用戶每進入一個(ge) 新頁麵的時候都能快速地理解頁麵內(nei) 容，在確定了重點的前提下，應盡量避免頁麵上出現其他幹擾項影響用戶的決(jue) 策和操作。

反例示意

此頁麵的主題是查詢，卻添加了諸多與(yu) 查詢不相關(guan) 的業(ye) 務入口，與(yu) 用戶的預期不符，易造成用戶的迷失。

糾正示意

去掉任何與(yu) 用戶目標不相關(guan) 的內(nei) 容，明確頁麵主題，在技術和頁麵控件允許的前提下提供有助於(yu) 用戶目標的幫助內(nei) 容，比如最近搜索詞，常用搜索詞等。

反例示意

操作沒有主次，讓用戶無從(cong) 選擇

糾正示意

首先要避免並列過多操作讓用戶選擇，在不得不並列多個(ge) 操作時，需區分操作主次，減輕用戶的選擇難度。

流程明確

為(wei) 了讓用戶順暢地使用頁麵，在用戶進行某一個(ge) 操作流程時，應避免出現用戶目標流程之外的內(nei) 容而打斷用戶。

反例示意

用戶本打算進行搜索，在進入頁麵時卻被突如其來的抽獎彈窗所打斷；對於(yu) 抽獎沒有興(xing) 趣的用戶是非常不友好的幹擾；而即便有部分用戶確實被“誘人”的抽獎活動所吸引，離開主流程去抽獎之後可能就遺忘了原本的目標，進而失去了對產(chan) 品真正價(jia) 值的利用和認識。

清晰明確

一旦用戶進入我們(men) 的小程序頁麵，我們(men) 就有責任和義(yi) 務清晰明確地告知用戶身在何處、又可以往何處去，確保用戶在頁麵中遊刃有餘(yu) 地穿梭而不迷路，這樣才能為(wei) 用戶提供安全的愉悅的使用體(ti) 驗。

導航明確，來去自如

導航是確保用戶在網頁中瀏覽跳轉時不迷路的最關(guan) 鍵因素。導航需要告訴用戶，我在哪，我可以去哪，如何回去等問題。首先在微信係統內(nei) 的所有小程序的全部頁麵，均會(hui) 自帶微信提供的導航欄，統一解決(jue) 我在哪，如何回去的問題。在微信層級導航保持體(ti) 驗一致，有助於(yu) 用戶在微信內(nei) 形成統一的體(ti) 驗和交互認知，無需在各小程序和微信切換中新增學習(xi) 成本或改變使用習(xi) 慣。

微信導航欄

微信導航欄，直接繼承於(yu) 客戶端，除導航欄顏色之外，開發者無需亦不可對其中的內(nei) 容進行自定義(yi) 。但開發者需要規定小程序各個(ge) 頁麵的跳轉關(guan) 係，讓導航係統能夠以合理的方式工作。

微信導航欄分為(wei) 導航區域、標題區域以及操作區域。其中導航區控製程序頁麵進程。目前導航欄分深淺兩(liang) 種基本配色。

導航區（ioses）

導航區通常隻有一個(ge) 操作，即返回上一級界麵。

導航區（androids）

同ioses一樣，導航區也隻有一個(ge) 返回上一級頁麵的操作，而點擊安卓手機自帶的硬件返回鍵也起到相同作用。

微信導航欄自定義顏色規則（ioses和androids）

小程序導航欄支持基本的背景顏色自定義(yi) 功能，選擇的顏色需要在滿足可用性前提下，和諧搭配微信提供的兩(liang) 套主導航欄圖標。建議參考以下選色效果：

選色方案示例

頁麵內導航

開發者可根據自身功能設計需要在頁麵內(nei) 添加自有導航。並保持不同頁麵間導航一致。但是受限於(yu) 手機屏幕尺寸的限製，小程序頁麵的導航應盡量簡單，若僅(jin) 為(wei) 一般線性瀏覽的頁麵建議僅(jin) 使用微信導航欄即可。

開發者可選擇小程序頁麵添加標簽分頁（Tab）導航。標簽分頁欄可固定在頁麵頂部或者底部，便於(yu) 用戶在不同的分頁間做切換。標簽數量不得少於(yu) 2個(ge) ，最多不得超過5個(ge) ，為(wei) 確保點擊區域，建議標簽數量不超過4項。一個(ge) 頁麵也不應出現一組以上的標簽分頁欄。

其中小程序首頁可選擇微信提供的原生底部標簽分頁樣式，該樣式僅(jin) 供小程序首頁使用。開發時可自定義(yi) 圖標樣式、標簽文案以及文案顏色等，具體(ti) 設置項可參考開發文檔。

頂部標簽分頁欄顏色可自定義(yi) 。在自定義(yi) 顏色選擇中，務必注意保持分頁欄標簽的可用性、可視性和可操作性。

減少等待，反饋及時

頁麵的過長時間的等待會(hui) 引起用戶的不良情緒，使用微信小程序項目提供的技術已能很大程度縮短等待時間。即便如此，當不可避免的出現了加載和等待的時候，需要予以及時的反饋以舒緩用戶等待的不良情緒。

啟動頁加載

小程序啟動頁是小程序在微信內(nei) 容一定程度上展現品牌特征的頁麵之一。本頁麵將突出展示小程序品牌特征和加載狀態。啟動頁除品牌標誌（Logo）展示外，頁麵上的其他所有元素如加載進度指示，均由微信統一提供且不能更改，無需開發者開發。

頁麵下拉刷新加載

在微信小程序內(nei) ，微信提供標準的頁麵下拉刷新加載能力和樣式。

開發者可自定義(yi) 需要通過下拉交互完成刷新的頁麵，此類交互微信將提供標準能力和樣式。在樣式上，刷新圖標與(yu) 下拉標示配色已捆綁，分為(wei) 深淺兩(liang) 套方案，開發者在使用時，應注意頭部文字、下拉標識與(yu) 刷新圖標的和諧統一。當用戶在該類頁麵做出下拉交互時，出現微信小程序頁麵標準加載動畫。開發者無需自行開發樣式

深淺兩套下拉樣式

微信下拉提示用於(yu) 給用戶明確的小程序歸屬者，防止造假與(yu) 作弊。此處標示提供深淺兩(liang) 套方案，文字顏色不可自定義(yi) ，開發者在自定義(yi) 背景色時，應注意保證下拉標示的辨識度。ioses和androids配色方案相同如下展示。

微信下拉標示錯誤使用案例

請避免以下錯誤使用情況，確保信息的可見性和頁麵的可用性

頁麵內加載反饋

開發者可在小程序裏自定義(yi) 頁麵內(nei) 容的加載樣式。建議不管是使用在局部還是全體(ti) ，自定義(yi) 加載樣式都應該盡可能簡潔，並使用簡單動畫告知用戶加載過程。開發者也可以使用微信提供的，統一的頁麵加載樣式，如圖中例所示。

模態加載

模態的加載樣式將覆蓋整個(ge) 頁麵的，由於(yu) 無法明確告知具體(ti) 加載的位置或內(nei) 容將可能引起用戶的焦慮感，因此應謹慎使用。除了在某些全局性操作下不要使用模態的菊花。

局部加載反饋

即隻在觸發加載的頁麵局部進行反饋，這樣的反饋機製更加有針對性，頁麵改動小，是微信推薦的反饋方式。例如：

加載反饋注意事項

若載入時間較長,應提供取消操作,並使用進度條顯示載入的進度。
載入過程中,應保持動畫效果 ; 無動畫效果的加載很容易讓人產生該界麵已經卡死的錯覺。
不要在同一個頁麵同時使用超過1個加載動畫。

結果反饋

除了在用戶等待的過程中需予以及時反饋外，對操作的結果也需要予以明確反饋。根據實際情況，可選擇不同的結果反饋樣式。對於(yu) 頁麵局部的操作，可在操作區域予以直接反饋，對於(yu) 頁麵級操作結果，可使用彈出式提示（Toast）、模態對話框或結果頁麵展示。

頁麵局部操作結果反饋

對於(yu) 頁麵局部的操作，可在操作區域予以直接反饋，例如點擊多選控件前後如下圖。對於(yu) 常用控件，微信設計中心將提供控件庫，其中的控件將提供完整操作反饋。

頁麵全局操作結果——彈出式提示（Toast）

彈出式提示（Toast）適用於(yu) 輕量級的成功提示，1.5秒後自動消失，並不打斷流程，對用戶影響較小，適用於(yu) 不需要強調成功狀態的操作提醒。特別注意該形式不適用於(yu) 錯誤提醒。

頁麵全局操作結果——模態對話框

對於(yu) 需要用戶明確知曉的操作結果狀態可通過模態對話框來提示，並可附帶下一步操作指引。

頁麵全局操作結果—結果頁

對於(yu) 操作結果已經是當前流程的終結的情況，可使用操作結果頁來反饋。這種方式最為(wei) 強烈和明確的告知用戶操作已經完成，並可根據實際情況給出下一步操作的指引。

異常可控，有路可退

在設計任何的任務和流程時，異常狀態和流程往往容易被忽略，而這些異常場景往往是用戶最為(wei) 沮喪(sang) 和需要幫助的時候，因此需要格外注意異常狀態的設計，在出現異常時予以用戶必要的狀態提示，並告知解決(jue) 方案，使其有路可退。

要杜絕異常狀態下，用戶莫名其妙又無處可去，卡在某一個(ge) 頁麵的情況。2.2中所提到的彈窗和結果頁麵都可作為(wei) 異常狀態的提醒方式。除此之外，在表單頁麵中尤其是表單項較多的頁麵中，還應明確指出出錯項目，以便用戶修改。

異常狀態——表單出錯

表單報錯，在表單頂部告知錯誤原因，並標識出錯誤字段提示用戶修改

便捷優雅

從(cong) PC時代的物理鍵盤鼠標到移動端時代手指，雖然輸入設備極大精簡，但是手指操作的準確性卻大大不如鍵盤鼠標精確。為(wei) 了適應這個(ge) 變化，需要開發者在設計過程中充分利用手機特性，讓用戶便捷優(you) 雅的操控界麵。

減少輸入

由於(yu) 手機鍵盤區域小且密集，輸入困難的同時還易引起輸入錯誤，因此在設計小程序頁麵時因盡量減少用戶輸入，利用現有接口或其他一些易於(yu) 操作的選擇控件來改善用戶輸入的體(ti) 驗。

減少輸入，巧用接口

例如下圖中，在添加銀行卡時，采用攝像頭識別接口來幫助用戶輸入。除此之外微信團隊還對外開放例如地理位置接口等多種微信小程序接口，充分利用這些接口將大大提高用戶輸入的效率和準確性，進而優(you) 化體(ti) 驗。

除了利用接口外，在不得不讓用戶進行手動輸入時，應盡量讓用戶做選擇而不是鍵盤輸入。一方麵，回憶易於(yu) 記憶，讓用戶在有限的選項中做選擇通常來說是容易於(yu) 完全靠記憶輸入；另一方麵，仍然是考慮到手機鍵盤密集的單鍵輸入極易造成輸入錯誤。例如圖中，在用戶搜索時提供搜索曆史快捷選項將幫助用戶快速進行搜索，而減少或避免不必要是鍵盤輸入。

避免誤操作

因為(wei) 在手機上我們(men) 通過手指觸摸屏幕來操控界麵，手指的點擊精確度遠不如鼠標，因此在設計頁麵上需點擊的控件時，需要充分考慮到其熱區麵積，避免由於(yu) 可點擊區域過小或過於(yu) 密集而造成誤操作。當簡單的將原本在電腦屏幕上使用的界麵不做任何適配直接移植到手機上時，往往就容易出現這樣的問題。由於(yu) 手機屏幕分辨率各不相同，因此最適宜點擊像素尺寸也不完全一致，但換算成物理尺寸後大致是在7mm-9mm之間。在微信提供的標準組件庫中，各種控件元素均已考慮到了頁麵點擊效果以及不同屏幕的適配，因此再次推薦使用或模仿標準控件尺寸進行設計。

利用接口提升性能

微信設計中心已推出了一套網頁標準控件庫，包括sketch設計控件庫和Photoshop設計控件庫，後續還將完善小程序組件，這些控件都已充分考慮了移動端頁麵的特點，能夠保證其在移動端頁麵上的可用性和操作性能；同時微信開發團隊也在不斷完善和擴充微信小程序接口，並提供微信公共庫，利用這些資源不但能夠為(wei) 用戶提供更加快捷的服務，而且對頁麵性能的提高有極大作用，無形之中提升了用戶體(ti) 驗。