瑤瑤

辽宁35选7开奖哪个台 www.duulp.com 前不久做了一個微信小程序的項目,總結了一些小程序的設計規范,如果對小程序不夠了解就開始設計,設計完程序小哥肯定就要暴走了~,為了挽留程序小哥,我吐血整理了這篇設計規范,還給大家準備了新版小程序控件(一定要看到底哦~)。

本篇綱要:

  1. 小程序尺寸
  2. 官方小程序菜單
  3. 標題導航欄設計(Title bar)
  4. 標簽分頁導航設計(Tab bar)
  5. 內容設計
  6. 加載樣式
  7. 全局操作反饋

 

一、小程序尺寸

小程序開發尺寸是rpx(responsive pixel),可以實現一稿適配所有屏幕尺寸,小程序編譯后,rpx會做一次px換算?;凰閌且?75個物理像素為基準,也就是在一個寬度為375物理像素的屏幕下,1rpx = 1px。這里了解就行,設計稿尺寸375px或750px都沒問題。

 

二、官方小程序菜單

a.????全局性的,不可自定義,位置固定

官方小程序菜單位于所有界面(包括小程序內嵌的網頁和插件),且位置固定,開發者不可對其內容進行自定義,只能選擇深淺兩種配色方案,設計時要預留出該位置區域,若要在小程序菜單附近放置可交互元素,要注意與小程序菜單不沖突,可識別,易操作。

 

b.????常見的三種狀態

小程序菜單常見的三種狀態:全局菜單、調用錄音、獲取地理位置。

 

三、標題導航欄設計(Title bar)

標題導航樣式設計時要與微信小程序菜單樣式保持一定差異性,便于區分。另外標題導航的背景可以自定義背景顏色或圖片(這里注意給開發小哥時需要把圖切出來),還可以設置不透明度,是不是很帥。

二級頁面要設計有返回鍵,要讓用戶知道自己在哪,怎么回去。如果頁面層級太多有個一鍵返回首頁按鈕在體驗上會友好很多,如知乎二級頁面。

 

四、標簽分頁導航設計(Tab bar)

標簽分頁導航分為:頂部標簽導航和底部標簽導航,官方建議標簽數量為2-5個。不過對頂部導航來說關系不大可以根據具體項目需要來設計,底部導航最好還是按照規范來。

a.????頂部標簽導航

頂部標簽導航可以自定義顏色和樣式,可以點擊也支持沿X軸滑動,也就是說點擊不是頂部標簽欄唯一的交互方式。

 

b.????底部標簽導航

底部標簽導航提供了四種不同圖形的設計規范,滿足了圓形、方形、高矩形和寬矩形四種形狀類型。根據規范設計可以更方便進行視覺修正,保持圖標的統一性。數量上3-4個最常見?;蛘咧苯尤サ艫撞勘昵┑己?,如微信讀書、36氪。

 

五、內容設計

內容部分和app設計差不多,app設計規范在這里也適用。

要點:

a.????小程序彈窗優先級并不是最高的

官方小程序菜單的層級優先級是最高的。即使在app中優先級最高的彈窗到這里層級也得在小程序菜單之下,即便沉浸式體驗也不例外。而且標題欄和底部標簽欄優先級也是在彈窗之上的。

 

b.????視頻位置

小程序內視頻是固定位置浮動的,滑動頁面視頻不會沿Y軸移動,如優酷視頻。不過也有技術比較厲害的突破了這一限制支持視頻Y軸滑動,如騰訊視頻、愛奇藝。測試了六款主流視頻app,全都是固定位置。所以,實在不好搞就不要難為程序小哥了。

 

六、加載樣式

要點:

  1. 若載入時間較長,應提供取消操作,并使用進度條顯示載入的進度。
  2. 載入過程中,應保持動畫效果 ; 無動畫效果的加載很容易讓人產生該界面已經卡死的錯覺。
  3. 不要在同一個頁面同時使用超過1個加載動畫。
  4. 模態的加載樣式將覆蓋整個頁面的,由于無法明確告知具體加載的位置或內容將可能引起用戶的焦慮感,應謹慎使用。
  5. “頁面內加載反饋”可以自定義,其余加載樣式微信提供統一標準,無需自行開發。

 

七、全局操作結果反饋

 

要點:

  1. 圖標型彈出提示適用于輕量級的成功提示,1.5秒后自動消失,并不打斷流程,對用戶影響較小,適用于不需要強調的操作提醒,例如成功提示。
  2. 文字型彈出提示適用于需要輕量化地用文字解釋當前狀態或提醒不嚴重的錯誤。1.5秒后自動消失,不打斷流程,對用戶影響較小。
  3. 對于需要用戶明確知曉的操作結果狀態可通過模態對話框來提示,并可附帶下一步操作指引。
  4. 對于操作結果已經是當前流程的終結的情況,可使用操作結果頁來反饋。

 

全文總結

a.????不可修改部分:

  1. 官方小程序菜單(含有三種狀態)
  2. 小程序加載樣式(除“頁面內加載反饋”)

b.????可修改部分概要

  1. 標題導航欄(Title bar)可以自定義背景,二級頁面要有返回鍵
  2. 標簽分頁導航(Tab bar):頂部標簽導航交互方式不唯一,底部標簽導航個數控制在2-5個,或可完全去除。
  3. 官方小程序菜單層級優先級最高,標題欄和標簽欄優先級高于彈窗。
  4. 視頻位置固定,可更改,但技術要求較高。
  5. 頁面內加載反饋可自定義。

熟悉了這些設計規范,相信你對小程序設計已經胸有成竹了。為了幫助小伙伴們提高設計效率,給大家整理了新版微信小程序控件,后臺回復”小程序“即可獲得,覺得貼心的話就關注一下吧~

另外有興趣一起探討設計知識的小伙伴可以加我的個人微信號,添加時注明來意~

 

原文地址:UI設計進階(公眾號)

作者:阿倩

轉載請注明:辽宁35选7开奖哪个台 » 微信小程序設計規范總結(內附資源)

登錄收藏
 
你可能喜歡的:
?設計沉思錄|助力推客沉淀的小程序?設計沉思錄|助力推客沉淀的小程序
海報小程序設計如何聯動社群營銷海報小程序設計如何聯動社群營銷
小程序設計規范和常見設計誤區小程序設計規范和常見設計誤區
微商產品小程序-零售商城&代理中心微商產品小程序-零售商城&代理中心
從產品角度,看小程序的設計(附小程序資源)從產品角度,看小程序的設計(附小程序資源)
小程序設計規范及經驗分享(附小程序控件+設計規范)小程序設計規范及經驗分享(附小程序控件+設計規范)
U享會|小程序專?。ㄏ攏釩咐治黽吧杓菩枳⒁獾摹翱印?/span>
U享會|小程序專?。ㄉ希?-小程序業態及裂變分析U享會|小程序專?。ㄉ希?#8211;小程序業態及裂變分析
【To G設計賦能】重塑政務服務體驗設計初探—粵省事小程序設計總結【To G設計賦能】重塑政務服務體驗設計初探—粵省事小程序設計總結
設計師進階筆記 | 為什么那么多企業都在做小程序設計師進階筆記 | 為什么那么多企業都在做小程序
?