微信小程序開發(fā)中字體、表單、按鈕、圖標規(guī)范化設置，相信大家也看了小程序開發(fā)前面的幾期一些介紹都是智企云多年的開發(fā)經(jīng)驗為大家所作的講解，到了這里，我使用的這個小程序可以說是功能適應、設計合理、外觀友好、邏輯清晰了，這種小程序才能抓住用戶的心，才能讓用戶對它產(chǎn)生依賴。不過當一個事物已經(jīng)完備的時候，你就要“精益求精”了。下面小程序開發(fā)公司智企云講述一下小程序設計中一些基本元素的使用規(guī)范介紹：

　　一、字體

　　(1)字體大小

　　微信內(nèi)字體的使用與所運行的系統(tǒng)字體保持一致，常用字號為20, 18, 17, 16,14 13, 11(pt)，使用場景具體如下：

　　(2)字體顏色

　　主內(nèi)容 Black 黑色，次要內(nèi)容 Grey 灰色;時間戳與表單缺省值 Light 灰色;大段的說明內(nèi)容而且屬于主要內(nèi)容用 Semi 黑。

　　藍色為鏈接用色，綠色為完成字樣色，紅色為出錯用色 Press 與 Disable 狀態(tài)分別降低透明度為20%與10%。

　　2、表單

　　下圖是表單的一些設計規(guī)范，主要是關于設計尺寸方面：

　　3、按鈕

　　(1)大按鈕

　　對當前頁面整體的即時操作，用于鼓勵用戶操作的按鈕，必須有效且滿足用戶需求。

　　按鈕高度固定為95px(47pt)。圓角大小固定為10px(5pt)。

　　注意：主操作按鈕在一個頁面內(nèi)只能出現(xiàn)一次

　　(2)中按鈕

　　該按鈕一般用在：頁面層級中的重要程度不高或者不鼓勵用戶操作，亦或者如果用大按鈕會擾亂信息瀏覽的情況。

　　中按鈕寬度最小360px(180pt)。文本兩邊的間距最小60px(30pt)，最大不限制，不夠則拉伸按鈕寬度。按鈕高度固定為70px(35pt)，圓角大小固定為8px(4pt)。

　　(3)小按鈕

　　主要用在僅對頁面某項內(nèi)容的操作/選擇，小按鈕是可重復使用的。

　　小按鈕寬度最小120px(60pt)。按鈕內(nèi)距離文字間距最小30px(15pt)，不夠則拉伸按鈕寬度。按鈕高度固定為60px(30pt)，圓角大小固定為6px(3pt)。

　　(4)失效按鈕

　　表明該操作已經(jīng)失效，按鈕上文本必須有提示文案。

　　(5)按鈕Loading

　　該操作需要請求服務器，無法馬上反饋操作時，Loading的圖標可以出現(xiàn)在按鈕上。

　　4、圖標

　　(1)一般圖標

　　用于結果頁面狀態(tài)提示，根據(jù)結果的情況選擇對應的圖標(icon)，圖標尺寸一般是100*100px。

　　(2)Titlebar按鈕

　　Titlebar顧名思義是標題欄按鈕，微信提供深淺兩種配色的按鈕選擇，從而能更好的適配不同頁面風格，但是開發(fā)小程序時要注意保持Titlebar各元素有足夠的辨識性。例如錄音、地理位置樣式如下：

　　Android系統(tǒng)和iOS系統(tǒng)的設計規(guī)范分別如下圖所示：

　　以上就是長沙小程序開發(fā)公司智企云經(jīng)過多年的開發(fā)經(jīng)驗為我們總結一套微信小程序開發(fā)中字體、表單、按鈕、圖標規(guī)范化設置的介紹，是具有實戰(zhàn)性的，經(jīng)過以上學習，你已具備設計優(yōu)質(zhì)小程序的能力了。理論的作用只是指導，UP主在此建議讀者們學完了“教你使用開發(fā)工具”和“教你設計優(yōu)質(zhì)程序”之后，去學習“官方文檔”-->“教你寫代碼”，開始動手開發(fā)自己的小程序吧。當然如果你對js、wxss、wxml有過比較深入的學習，在此長沙小程序開發(fā)公司智企云是長沙本土有名的開發(fā)公司也是定期分享一些實戰(zhàn)類的開發(fā)分享，供用戶們一起學習，如果你也有小程序開發(fā)方面的需求，不妨與我們?nèi)〉寐?lián)系，我們會為你提供專業(yè)的行業(yè)解決方案，為您微信出好的微信小程序產(chǎn)品！