小程序設計規範 UI設計師必知知識

您的位置 > 首頁>新聞中心>UI新聞

前幾天,你們的朋友圈是不是已被微信小程序刷爆了,針對小程序的出現,大家的讨論各異,作為UI設計師的我們,肯定更關心的是怎麼能夠切入設計微信小程序界面,小編就簡單來跟大家探讨下小程序設計的規範。


在小程序界面設計指南中建議在充分尊重用戶知情權和操作權的基礎之上,希望在微信的生态體系内,建立友好、高校和一緻的用戶體驗,能夠同時大程度上适應和支持不同需求,更好的實現了與小程序服務方的共赢。


一、友好,在這裡主要是為了避免用戶在微信中使用小程序服務時,注意力被周圍複雜的環境所幹擾,小程序在設計時應該注意減少無關的設計元素對用戶目标的幹擾,友好的向用戶展示程序提供的服務,引導用戶進行操作。


1.重點突出,每個頁面中都應該有明确的重點,以便于用戶每進入一個新頁面的時候能快速理解頁面内容,應該盡量避免頁面上出現其它與用戶的決策和操作無關的幹擾因素。


例:頁面的主題是查詢,卻添加了諸多與查詢不相關的業務入口,與用戶的目标完全無關,容易造成對用戶的迷失。此外還有顯著的錯誤是操作沒有主次,用戶很迷茫,不知該從何選擇。


2.流程明确,為了确保讓用戶順暢使用頁面,在用戶進行某個流程過程中,應當盡量避免出現用戶目标流程之外的内容打斷用戶。


例:導航明确,導航可以說是确保用戶在網頁中浏覽跳轉時不迷路的關鍵因素。可以去哪,如何回去等問題都是需要考慮的因素。所以在這裡有五點建議:


a.微信導航欄,要直接繼承于客戶端,除導航欄顔色之外,開發者無需對其中的内容進行自定義。


b.導航區(iOS),微信進入小程序的第1個頁面,導航區通常隻有一個操作——“返回”,即返回進入小程序前的微信頁面。 進入小程序後的次級頁面,導航區的操作為——“返回” 和“關閉”。


c.導航區(Android),導航區僅存在唯1操作——直接退出小程序,回到進入小程序前的微信或系統桌面,安卓手機自帶的硬件返回鍵執行返回上一級頁面的操作。


可别忘了,安卓導航存在一類特殊情況:當用戶通過操作區的菜單将小程序添加至安卓桌面,并從安卓桌面打開小程序時,小程序的首頁,不展示導航按鈕,僅展示小程序标題和操作區。小程序次級頁面,導航區隻有返回上一級頁面的操作,而點擊安卓手機自帶的硬件返回鍵也起到相同作用。


d.微信導航欄的自定義顔色,小程序導航欄支持基本的背景顔色自定義功能,選擇的顔色需要在滿足可用性前提下,和諧搭配微信提供的兩套主導航欄圖标。


e.開發者可根據自身功能設計需要在頁面内添加自由導航,并保持不同頁面之間的導航要一緻。其中小程序首頁可選擇微信提供的原生底部标簽分頁樣式,該樣式僅供小程序首頁使用。開發時可自定義圖标樣式、标簽文案以及文案顔色等,具體設置項如圖标尺寸等參考可參考開發文檔和WeUI基礎控件庫。


二、反饋及時,頁面的過長時間等待會引起用戶的不良嗜好,所以使用微信小程序項目提供的技術能夠在很大程度上縮短等待時間。但如果出現了加載和等待,需要及時的反饋來舒緩用戶的不良情緒。


1.啟動頁加載,小程序啟動頁是小程序在微信内一定程度上展現品牌特征的頁面之一。本頁面将突出展示小程序品牌特征和加載狀态。啟動頁除品牌标志(Logo)展示外,頁面上的其他所有元素如加載進度指示,均由微信統一提供且不能更改,無需開發者開發。


2.頁面下拉刷新加載,在微信小程序内,微信所提供的頁面下拉刷新加載能力和樣式,開發者無需再進行開發。


3.頁面内加載反饋,開發者可在小程序裡自定義頁面内容的加載樣式。建議不管是使用在局部還是全局加載,自定義加載樣式都應該盡可能簡潔,并使用簡單動畫告知用戶加載過程。


4.模态加載,模态的加載樣式将會覆蓋整個頁面,由于無法明确告知具體加載的位置或者是内容将會引起用戶的焦慮感。


5.局部加載反饋,隻在觸發加載的頁面局部進行反饋,這樣的反饋機制更具有針對性,頁面跳動小,是微信推薦的一種反饋方式。


在這一步驟中應當注意,若出現了載入時間較長,應當提供取消操作,并使用進度條來顯示載入的進度。在載入過程中應當保持動畫效果,如果是無動畫效果很容易給人造成界面卡死的錯覺。


6.結果反饋,除了在用戶等待的過程中需給予及時反饋時,對操作結果也應該給予明确反饋。


7.頁面局部操作結果反饋,對于頁面局部的操作,可在操作區域予以直接反饋,對于常用控件,微信設計中心将提供控件庫,其中的控件都已提供完整操作反饋。


8.頁面全局操作結果反饋—彈出式提示,彈出式提示應用于輕量級的成功提示,1.5秒後自動消失,對用戶影響較小,應該特别注意該形式不适用于錯誤提示,因為錯誤提示是明确告知用戶,并不适合使用一閃而過的彈出式提示。


9.頁面全局操作結果—模态對話框 ,對于需要用戶明确知曉的操作結果狀态可通過模态對話框來提示,并可附帶下一步操作指引。


10.頁面全局操作結果—結果頁 ,對于操作結果已經是當前流程的終結的情況,可使用操作結果頁來反饋。這種方式為強烈和明确的告知用戶操作已經完成,并可根據實際情況給出下一步操作的指引。


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


三、便捷優雅,從PC時代的物理鍵盤鼠标到移動端時代手指,雖然輸入設備極大精簡,但手指操作的準确性卻遠不如鍵盤鼠标精準。為了适應這個變化,需要開發者在設計過程中充分利用手機特性,讓用戶便捷優雅的操控界面。


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


2.避免誤操作,我們通過手指觸摸屏幕來操控界面,手指的點擊精 确度遠不如鼠标,因此在設計頁面上需點擊的控件時,需要充分考慮到其熱區面積,避免由于可點擊區域過小或過于密集而造成誤操作。但由于手機屏幕分辨率不相同,如果隻是簡單的将原本在電腦屏幕上使用界面不做任何适配直接移植到手機上,很容易出現問題,因此推薦使用或模仿标準控件尺寸來進行設計。


3.利用接口來提升性能,微信設計中心已推出了一套網頁标準控件庫,包括 sketch設計控件庫 和 Photoshop設計控件庫。利用這些資源不但能夠為用戶提供更加快捷的服務,而且對頁面性能的提高有極大作用,無形之中提升了用戶體驗。


四、視覺規範,這一點在小程序設計中也至關重要。


1.字體規範,微信内字體的使用與所運行的系統字體保持一緻,常用字号為20, 18, 17, 16,14 13, 11(pt)。


2.字體顔色,主内容 Black 黑色,次要内容 Grey 灰色;時間戳與表單缺省值 Light 灰色;大段的說明内容而且屬于主要内容用 Semi 黑。


3.列表視覺規範、表單輸入視覺規範、按鈕使用原則、圖标使用原則這幾點知識,UI設計師在小程序設計中同樣需要注意。


新聞中心

NEWS

掃一掃打開手機網站

服務熱線

0791-87689800

IT職業教育校企合作卓越品牌-博航IT教育

地址:江西省南昌市青山湖區青山湖大道珉軒智能大廈4樓401

電話:0791-87689800

郵箱:1510364130@qq.com

版權所有@博航教育科技集團

贛ICP備:贛ICP備17009380号-1


0791-87689800