免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

總結小程序界面設計指南

2022-08-09    分類： 網站建設

這一期文章主講小程序設計規范，這是我通過閱讀官方文檔后歸納總結的，需要詳細了解的小伙伴可以去看官方設計指南，文末有鏈接。

文章大綱
01 用戶體驗要點
02 字體規范
03 控件規范
04 頁面加載
05 頁面狀態
總結 資源
01
—
用戶體驗要點
輕量、簡潔、目標明確
減少無關的設計元素對用戶目標的干擾，每個頁面都應該有明確的重點，便于用戶每進入一個新頁面時都能快速地理解頁面內容。
清晰明確地告知用戶身在何處、又可以往何處去，確保用戶在頁面中游刃有余地穿梭而不迷路，這樣才能為用戶提供安全且愉悅的使用體驗。
反例示意：
此頁面的主題是查詢，卻添加了與查詢不相關的業務入口，與用戶的目標無關，易造成用戶的迷失。
糾正示意：
去掉與用戶目標不相關的內容，提供有助于用戶決策和操作的幫助內容，比如最近搜索詞等。
反例示意：
操作沒有主次，讓用戶無從選擇。
糾正示意：
避免并列過多操作讓用戶選擇，在不得不并列多個操作時，需區分操作主次，減輕用戶的選擇難度。
反例示意：
用戶本打算進行搜索，在進入頁面時卻被模態抽獎框打斷，對于抽獎沒有興趣的用戶是非常不友好的干擾，而即便有部分用戶確實被“誘人”的抽獎活動所吸引，離開主流程去抽獎之后可能就遺忘了原本的目標，進而失去了對產品真正價值的利用和認識。
減少輸入
由于手機鍵盤區域小且密集，輸入困難的同時還易引起輸入錯誤，因此在設計小程序頁面時應盡量減少用戶輸入，利用現有接口或其他一些易于操作的選擇控件來改善用戶輸入的體驗。
例如下圖中，在添加銀行卡時，采用攝像頭識別接口來幫助用戶輸入。除此之外微信團隊還對外開放例如地理位置接口等多種微信小程序接口，充分利用這些接口將大大提高用戶輸入的效率和準確性，進而優化體驗。
除了利用接口外，在不得不讓用戶進行手動輸入時，應盡量讓用戶做選擇而不是鍵盤輸入。原因是回憶易于記憶，通常來說讓用戶在選項中做選擇比完全靠記憶輸入容易。
例如圖中，在用戶搜索時，提供搜索歷史快捷選項來幫助用戶快速進行搜索，從而減少或避免不必要的鍵盤輸入。
避免誤操作
設計的頁面上有需要點擊的控件時，要充分考慮其熱區面積，避免造成誤操作。由于手機屏幕分辨率各不相同，因此最適宜點擊像素尺寸也不完全一致，但換算成物理尺寸后大致是在7mm-9mm之間。在微信提供的標準組件庫中，各種控件元素均已考慮到了頁面點擊效果以及不同屏幕的適配，因此推薦使用或模仿標準控件尺寸進行設計。
統一穩定
還應該時刻注意不同頁面間的統一性和延續性，在不同的頁面盡量使用一致的控件和交互方式。比如按鈕，tab選項卡，彈出框等。
02
—
字體規范
字號
小程序界面使用的字體和微信內字體保持一致，常用字號為(單位pt)：20，18， 17，16，14，13，11。具體使用場景如下：
顏色
主內容 Black 黑色，次要內容 Grey 灰色；時間戳與表單缺省值 Light 灰色；大段的說明且屬于主要內容用 Semi 黑。
藍色為鏈接用色；綠色為完成字樣色；紅色為出錯用色。Press 與 Disable 狀態分別降低透明度為20%與10%。
03
—
控件規范
導航欄
所有小程序的全部頁面，均會自帶微信提供的導航欄，它直接繼承于客戶端，也就是和微信一樣。除導航欄顏色之外，開發者不可對其中的內容樣式自定義。
微信導航欄分為導航區域、標題區域以及操作區域。其中導航區控制頁面跳轉，目前導航欄分深淺兩種基本配色。
iOS導航欄
微信進入小程序的一個頁面，導航區只有一個操作“返回”，即返回進入小程序前的微信頁面。進入小程序后的次級頁面，導航區的操作為“返回” 和“關閉”。 “返回”，即返回上一級界面，“關閉”，即直接退出小程序。
Android導航欄
導航區僅存在唯一操作“關閉”，即直接退出小程序。安卓手機自帶的硬件返回鍵執行“返回”上一級頁面的操作。
安卓導航存在一類特殊情況：當用戶通過操作區的菜單將小程序添加至安卓桌面，剛打開小程序的首頁時,不展示導航區，僅展示標題和操作區。在小程序的次級頁面，導航區只有“返回”操作，而點擊安卓手機自帶的硬件返回鍵也起到相同作用。
背景色規則
小程序導航欄支持背景顏色自定義，選擇的顏色需要滿足微信提供的兩套主導航欄圖標的可用性。即深色導航能夠看清白色文本，淺色導航能夠看清黑色文本。
導航標簽
可以給小程序添加兩種樣式的導航：頂部TAB標簽+底部標簽。
保持不同頁面間導航樣式統一。
標簽數量不得少于2個，最多不得超過5個，為確保點擊區域，建議標簽數量不超過4項。
小程序首頁可選擇微信提供的原生底部標簽樣式，該樣式僅供小程序首頁使用。可自定義圖標樣式、標簽文案以及文案顏色等，具體設置項如圖標尺寸等可參考開發文檔和WeUI基礎控件庫。
列表
表單輸入
按鈕
圖標
04
—
頁面加載
當不可避免的出現了加載和等待的時候，需要給予及時的反饋以舒緩用戶等待的不良情緒。
加載反饋注意事項
若載入時間較長,應提供取消操作,并使用進度條顯示載入的進度。
載入過程中,應保持動畫效果 。無動畫效果的加載很容易讓人產生該界面已經卡死的錯覺。
不要在同一個頁面同時使用超過1個加載動畫。
結果反饋
對于頁面局部的操作，可在操作區域予以直接反饋，對于頁面級操作結果，可使用彈出式提示（Toast）、模態對話框或結果頁面展示。
啟動頁加載
小程序啟動頁突出展示小程序品牌特征和加載狀態。啟動頁除品牌標志（Logo）展示外，頁面上的其他所有元素如加載進度指示，均由微信統一提供且不能更改，無需自行開發。
頁面下拉刷新加載
在微信小程序內，微信提供標準的頁面下拉刷新加載樣式，無需自行開發。
頁面內加載反饋
開發者可在小程序里自定義頁面內容的加載樣式。建議不管是使用局部還是全局加載，自定義加載樣式都應該盡可能簡潔，并使用簡單動畫告知用戶加載過程。開發者也可以使用微信提供的，統一的頁面加載樣式，如圖中例所示。
模態加載
模態的加載樣式將覆蓋整個頁面，由于無法明確告知具體加載的位置或內容，將可能引起用戶的焦慮感，因此應謹慎使用，除了在某些全局性操作下不要使用模態的加載。
局部加載反饋
即只在觸發加載的頁面局部進行反饋，這樣的反饋機制更加有針對性，頁面跳動小，是微信推薦的反饋方式。
05
—
頁面狀態
狀態反饋
頁面局部操作結果反饋
對于頁面局部的操作，可在操作區域予以直接反饋。例如，點擊多選控件前后狀態如下圖。對于常用控件，微信設計中心將提供控件庫，其中的控件都已提供完整操作反饋。
頁面全局操作結果——彈出式提示（Toast）
彈出式提示（Toast）適用于輕量級的成功提示，1.5秒后自動消失，并不打斷流程，對用戶影響較小，適用于不需要強調的操作提醒，例如成功提示。特別注意該形式不適用于錯誤提示，因為錯誤提示需明確告知用戶，因而不適合使用一閃而過的彈出式提示。
頁面全局操作結果——模態對話框
對于需要用戶明確知曉的操作結果狀態，可通過模態對話框來提示，并可附帶下一步操作指引。
頁面全局操作結果—結果頁
對于操作結果已經是當前流程的終結的情況，可使用操作結果頁來反饋。這種方式最為強烈和明確的告知用戶操作已經完成，并可根據實際情況給出下一步操作的指引。
異常狀態
表單出錯
表單報錯，在表單頂部告知錯誤原因，并標識出錯誤字段提示用戶修改。
總結
這篇文章是我閱讀官方文檔之后，重新總結+梳理出的五個要點：用戶體驗、字體、控件、加載、狀態。小程序給我的感受是它無論從設計還是開發都始終秉承著輕量、簡潔的原則，這也是小程序越來越受歡迎的原因。
小程序設計規范官方文檔：https://mp.weixin.qq.com/debug/wxadoc/design/?t=2017118

網站標題：總結小程序界面設計指南
分享網址：http://m.newbst.com/news47/187997.html

成都網站建設公司_創新互聯，為您提供靜態網站、全網營銷推廣、小程序開發、網站建設、網站導航、關鍵詞優化

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯

成都做網站