引用

官方文檔

一、概要

基于小程序輕快的特點磨隘， 設計指南建立在充分尊重用戶知情權和操作權的基礎之上 建立友好蒸其，高效如暖， 一致的用戶體驗 最大程度的適應和支持不同需求 1,友好禮貌翎朱，2, 明晰明確橄维，3, 便捷優(yōu)雅尺铣， 4,統(tǒng)一穩(wěn)定拴曲， 5,視覺規(guī)范 本文主要講解前面四個方面

設計指南二 視覺規(guī)范

二、友好禮貌

為了避免用戶在微信中凛忿， 注意力被周圍復雜環(huán)境干擾澈灼， 小程序在設計時， 注意減少無關的設計元素對用戶目標的干擾， 禮貌地向用戶展示程序提供的服務叁熔， 友好引導用戶進行操作

1委乌、重點突出

每個頁面都應該有明確的重點， 便于用戶每進入一個新頁面都能快速理解頁面內容 確定重點的前提下荣回， 盡量避免頁面上出現(xiàn)其他與 用戶的決策和操作無關的干擾因素

反例	標準
頁面的主題時查詢遭贸，添加了諸多與查詢不相關業(yè)務入口，與用戶目標無關心软，易造成用戶迷失	去掉任何和用戶目標不相關內容壕吹，明確頁面主題，在技術和頁面控件允許下提供有助于用戶決策和操作的幫助內容删铃，比如最近搜索詞等
操作沒有主次耳贬，讓用戶無從選擇	避免并列過多操作讓用戶選擇，在不得不并列多個操作時候猎唁，需要區(qū)分操作主次咒劲，減輕用戶選擇難度

2、流程明確

為了讓用戶流暢使用頁面诫隅，在用戶進行某一個操作流程時候腐魂， 避免出現(xiàn)用戶目標流程之外的內容打斷用戶
反例： 用戶本打算進行搜索， 在進入頁面時候卻被突然出現(xiàn)的模態(tài)抽獎打斷逐纬， 對于抽獎沒有興趣的用戶時非常不友好的干擾挤渔， 即便部分用戶參與抽獎， 離開主流程后可能忘記了原本的目標风题， 進而失去了對產(chǎn)品真正價值的利用和認識

二判导、清晰明確

一旦用戶進入小程序頁面，開發(fā)者有責任和義務明確告訴用戶 身在何處沛硅，可以往何處去眼刃，確保用戶在頁面中游刃有余地穿梭，不迷路 提供安全且愉悅地使用體驗

1摇肌、導航明確擂红， 來去自如

導航時確保用戶在瀏覽跳轉時候，不迷路地最關鍵因素 導航需要告訴用戶围小， 當前在哪昵骤，可以去哪，如何回去的問題 首先肯适，在微信系統(tǒng)內的所有小程序的全部頁面变秦，均會帶有微信導航欄 統(tǒng)一解決-當前在哪，如何回去的問題 在微信層級導航框舔，保持體驗一致蹦玫， 有助于用戶在微信內形成統(tǒng)一的體驗和交互認知 無需在各個小程序和其他微信頁面的切換中新增學習成本或者改變使用習慣

（1） 微信導航欄

微信導航欄赎婚，直接繼承于客戶端，出了導航欄顏色外樱溉， 開發(fā)者不能對其中內容進行自定義 開發(fā)者需要規(guī)定各個頁面的跳轉關系挣输，讓導航系統(tǒng)能夠以合理的方式工作 導航欄分為導航區(qū)域，標題區(qū)域和操作區(qū)域 導航區(qū)域控制頁面進程福贞， 目前導航欄分深淺兩種基本配色

（2）導航區(qū)ios撩嚼， android

ios	android
微信進入小程序的第一個頁面，導航區(qū)通常只有一個返回操作挖帘，返回到進入小程序前的微信頁面	導航區(qū)僅存在唯一操作-直接退出小程序绢馍，回到進入小程序前的微信或者系統(tǒng)桌面，安卓機自帶的硬件返回鍵執(zhí)行返回上一級頁面的操作
進入小程序后的次級界面肠套，導航區(qū)的操作為-返回和關閉舰涌， 返回，時返回上一級小程序界面或者微信界面你稚；關閉瓷耙，即在當前界面直接退出小程序，回到小程序前的微信頁面	次級界面也只有關閉操作刁赖，返回操作為安卓機硬件自帶返回鍵
	安卓導航存在一類特殊情況： 當用戶通過操作區(qū)的菜單將小程序添加到安卓桌面搁痛，小程序將失去關閉按鈕，從安卓桌面打開小程序時候宇弛，首頁不展示導航按鈕鸡典，僅僅展示小程序標題和操作區(qū)，小程序次級界面枪芒，導航區(qū)只有返回上一級頁面的操作

（3）導航欄自定義顏色規(guī)則

小程序導航欄支持基本的背景顏色自定義功能彻况，選擇的顏色需要在滿足可用性前提下，和諧搭配微信提供的兩套主導航欄圖標

標準	反例

（4）頁面內導航

開發(fā)者可以根據(jù)自身功能設計需要舅踪， 在頁面內添加自由導航 保持不同頁面中導航一致纽甘， 小程序受限于手機屏幕尺寸的限制，頁面中的導航將盡量簡單抽碌，僅為一般線性瀏覽的頁面建議僅使用微信導航欄即可

開發(fā)者選擇小程序頁面添加標簽分頁tab導航悍赢，標簽分頁欄可以固定在頁面頂部或者底部， 便于用戶在不同的分頁間做切換 標簽數(shù)量不少于2個货徙，最多不得超過5個左权，建議標簽數(shù)量不超過4個 一個頁面不應該出現(xiàn)一組以上的標簽分頁欄

小程序首頁可選擇微信提供的原生底部標簽分頁樣式，該樣式僅供小程序首頁使用 可以自定義圖標樣式痴颊，標簽文案赏迟，文案顏色

頂部標簽分頁欄顏色可以自定義，保持分頁欄標簽的可用性祷舀，可視性瀑梗，可操作性

標準	反例

2烹笔、減少等待裳扯， 反饋及時

頁面的過長時間等待會引起用戶的不良情緒抛丽，使用微信小程序項目提供的技術可以很大程度縮短等待時間， 當不可避免的出現(xiàn)了加載和等待的時候饰豺，需要予以及時的反饋舒緩用戶等待的不良情緒

（1）加載類型

加載類型	類型說明	樣式圖片
啟動頁加載	小程序啟動頁是小程序在微信內亿鲜，展現(xiàn)品牌特征的頁面之一, 將突出展示小程序品牌特征和加載狀態(tài),啟動頁除了品牌標志展示外，頁面上其他所有元素如加載進入的指示冤吨，均由微信統(tǒng)一提供不能更改蒿柳，無需開發(fā)
頁面下拉刷新加載	在微信小程序中，微信提供了標準頁面下拉刷新加載能力和樣式漩蟆，開發(fā)者不需要自行開發(fā)
頁面內加載反饋	開發(fā)者可以在小程序里自定義頁面內容的加載樣式垒探，建議不管是使用全部還是局部加載，自定義的加載樣式都應該：盡可能的簡潔怠李，使用間接地動畫告知用戶加載過程,可以使用微信提供的統(tǒng)一的頁面加載樣式
模態(tài)加載	模態(tài)的加載樣式將覆蓋整個頁面上圾叼，由于無法告知具體的加載位置和加載內容，可能引起用戶的焦慮捺癞，需要謹慎使用模態(tài)加載夷蚊，除了在某些全局操作下不要使用模態(tài)加載
局部加載反饋	局部加載反饋只在觸發(fā)加載頁面局部進行反饋，這樣的反饋機制更加有針對性髓介，頁面跳動小惕鼓，是微信推薦的反饋方式
加載反饋注意事項	如果加載時間過長，應該提供取消操作唐础，使用進度條顯示載入的進度, 載入的過程中箱歧，應該保持動畫效果，無動畫效果的加載容易讓人產(chǎn)生界面已經(jīng)卡死的錯覺, 不要在同一個頁面同時使用超過1個加載的動畫	...

（2）結果反饋

除了在用戶等待過程中需予以及時反饋外一膨，對操作的結果需要予以明確反饋叫胁，根據(jù)實際情況，可以選擇不同的結果反饋樣式汞幢，對于頁面局部的操作驼鹅，可以在操作區(qū)予以直接反饋，對于頁面級操作結果森篷，可使用彈出式提示输钩，模態(tài)對話框或者結果頁面顯示

類型	說明	樣式圖片
頁面局部操作結果反饋	對于頁面局部的操作，可以在操作區(qū)域中予以直接反饋, 例如點擊多選控件前后仲智，對于常用控件买乃，微信設計中心將提供控件庫，其中的控件都已經(jīng)提供完整操作反饋
頁面全局操作結果-彈出式提示toast	彈出式toast钓辆，適用于輕量級的成功提示剪验，1.5秒后自動消失肴焊，不打斷流程，對用戶影響較小功戚，適用于不需要強調的操作提醒娶眷，例如成功提示,該形式不適用于錯誤提示，因為錯誤提示需要明確告知用戶啸臀，因而不適合使用一閃而過的彈出式提示
頁面全局操作結果-模態(tài)對話框	對于需要用戶明確知曉的操作結果狀態(tài)届宠，通過模態(tài)對話框來提示, 可以附帶下一步操作作指引
頁面全局操作結果-結果頁	對于操作結果已經(jīng)是當前流程的終結的情況， 可以使用操作結果頁來反饋乘粒， 這種方式最為強烈和明確的告知用戶操作已經(jīng)完成豌注， 并可根據(jù)實際情況給出下一步操作的指引

3、異车破迹可控轧铁， 有路可退

在設計任何的任務和流程時， 異常狀態(tài)和流程往往容易被忽略旦棉， 而這些異常場景往往是用戶最為沮喪和需要幫助的時候齿风， 因此需要格外注意異常狀態(tài)的設計， 在出現(xiàn)異常時候他爸， 予以用戶必要的狀態(tài)提示聂宾， 使其有路可退； 要杜絕異常狀態(tài)下诊笤， 用戶莫名其妙又無處可去系谐，停滯在某一個頁面的情況 上文中所提到的模態(tài)對話框和結果頁面都可以作為異常狀態(tài)的提醒方式 除此之外，在表單頁面中尤其是表單項較多的頁面中讨跟，還應該指出出錯項目纪他， 以便用戶修改

類型	類型說明	樣式圖片
表單出錯	表單報錯，在表單頂部告知錯誤原因晾匠， 標識出錯誤字段提示用戶修改

三茶袒、便捷優(yōu)雅

從PC時代的物理鍵盤鼠標 到 移動端時代 手指， 雖然輸入設備極大精簡凉馆， 但是手指操作的準確性卻大大不如鍵盤鼠標精確薪寓， 為了適應這個變化， 需要開發(fā)者在設計過程中充分利用手機特征澜共， 讓用戶便捷優(yōu)雅的操作界面

1向叉、減少輸入

由于手機鍵盤區(qū)域小而且密集， 輸入困難同時還容易引起輸入錯誤嗦董， 因此在設計小程序頁面時候盡量減少 用戶輸入母谎， 利用現(xiàn)有的接口或者其他一些易于操作的選擇控件來改善用戶輸入的體驗
例如下圖中， 在添加銀行卡時候京革， 采用攝像頭識別接口幫助用戶輸入 開放的地理位置接口等 多種小程序接口奇唤， 充分利用這些接口將大大提高用戶輸入的效率和準確性幸斥， 進而優(yōu)化體驗

除了利用接口外， 在不得不讓用戶進行手動輸入時候咬扇， 應該盡量讓用戶選擇而不是鍵盤輸入 一方面甲葬， 回憶易于記憶， 在用戶有限的選項中做出選擇通常來說更加容易完全靠記憶輸入 另一方面冗栗，考慮到手機鍵盤密集的單鍵輸入容易造成輸入錯誤 下圖中演顾，在用戶搜索時候提供搜索歷史快捷選項供搀，將幫助用戶快速進行搜索隅居， 減少或者避免不必要的鍵盤輸入

2、避免誤操作

因為在手機上葛虐，通過手指觸摸屏幕來操控界面胎源， 手指的點擊精確度不如鼠標 在設計界面上需要點擊的控件時候，需要充分考慮到其熱區(qū)面積 避免由于可以點擊的區(qū)域過小屿脐，過于密集造成錯誤操作 當簡單的將原本在電腦屏幕上使用的界面不做任何適配直接移植到手機上涕蚤， 往往容易造成問題 由于手機屏幕分別率各不相同， 因此最適宜點擊像素尺寸不完全一致的诵， 換算成物理尺寸在7mm~9mm之間 在微信提供的標準組件庫中万栅， 各種控件元素均已經(jīng)考慮到了頁面點擊效果和不同屏幕的適配， 因此需要再次推薦使用或者模仿標準控件尺寸進行設計

3西疤、利用接口提升性能

微信設計中心已經(jīng)推出了一套網(wǎng)頁標準控件庫烦粒， 包括sketch設計控件庫和 photoshop 設計控件庫 后續(xù)將完善小程序組件， 這些控件都已經(jīng)充分考慮到移動端頁面的特點代赁， 能夠保證其在移動端頁面上的可用性和可操作性性能 同時微信開發(fā)團隊也在不斷完善和擴充小程序接口扰她， 提供微信公共庫， 利用這些資源不但能夠為用戶提供更加快捷的服務芭碍， 而且對頁面性能的提高有很大作用 無形之中提升了用戶體驗

四徒役、統(tǒng)一穩(wěn)定

除了以上所提到的種種原則， 建議接入微信的小程序還應該時刻注意不同頁面的統(tǒng)一性和延續(xù)性 在不同的頁面盡量使用一致的控件和交互方式 統(tǒng)一的頁面體驗和延續(xù)性的界面元素都將幫助窖壕， 使用最少的學習成本達到使用目標 減輕頁面跳動造成的不適感 小程序可以根據(jù)需要使用微信提供的統(tǒng)一標準控件忧勿， 達到統(tǒng)一穩(wěn)定的目標