【設(shè)計(jì)-經(jīng)驗(yàn)】小程序設(shè)計(jì)簡(jiǎn)明指南

時(shí)間：2023-09-06 17:24:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-06 17:24:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

【設(shè)計(jì)-經(jīng)驗(yàn)】小程序設(shè)計(jì)簡(jiǎn)明指南：

前言

這篇是公司做內(nèi)部分享小程序設(shè)計(jì)經(jīng)驗(yàn)總結(jié)，在此分享出來(lái)主要是跟大家一起交流，希望可以共同交流，提升小程序設(shè)計(jì)水平。

閱讀官方說(shuō)明

• 基礎(chǔ)樣式庫(kù)：WeUI
• 設(shè)計(jì)指南：微信小程序設(shè)計(jì)指南
• 控件庫(kù)：WeUI Kit
• 組件：微信小程序開發(fā)文檔

小程序：WeUI、小程序示例 （小程序入口：搜索）

微信小程序設(shè)計(jì)簡(jiǎn)版指南

1. 友好禮貌

重點(diǎn)突出

避免并列過(guò)多操作讓用戶選擇，在不得不并列多個(gè)操作時(shí)，需區(qū)分操作主次，減輕用戶的選擇難度。




2. 清晰明確

導(dǎo)航區(qū)（iOS）

微信進(jìn)入小程序的第一個(gè)頁(yè)面，導(dǎo)航區(qū)通常只有一個(gè)操作——“返回”，即返回進(jìn)入小程序前的微信頁(yè)面。 進(jìn)入小程序后的次級(jí)頁(yè)面，導(dǎo)航區(qū)的操作為——“返回” 和“關(guān)閉”。 “返回”，即返回上一級(jí)小程序界面或微信界面?！瓣P(guān)閉”，即在當(dāng)前界面直接退出小程序，回到進(jìn)入小程序前的微信頁(yè)面。




導(dǎo)航區(qū)（Android）
導(dǎo)航區(qū)僅存在唯一操作——直接退出小程序，回到進(jìn)入小程序前的微信或系統(tǒng)桌面，安卓手機(jī)自帶的硬件返回鍵執(zhí)行返回上一級(jí)頁(yè)面的操作。

這里主要講解 Android 和 iOS 的差異化，設(shè)計(jì)小程序時(shí)可以不用考慮。




導(dǎo)航區(qū)（顏色）
導(dǎo)航區(qū)顏色支持自定義，選擇與提供的頂欄顏色相和諧搭配的背景色。




標(biāo)簽分頁(yè)（Tab）導(dǎo)航

標(biāo)簽數(shù)量不得少于2個(gè)，最多不得超過(guò)5個(gè)，為確保點(diǎn)擊區(qū)域，建議標(biāo)簽數(shù)量不超過(guò)4項(xiàng)。




啟動(dòng)頁(yè)加載

啟動(dòng)頁(yè)除品牌標(biāo)志（Logo）展示外，頁(yè)面上的其他所有元素如加載進(jìn)度指示，均由微信統(tǒng)一提供且不能更改，無(wú)需開發(fā)者開發(fā)。




下拉刷新加載

在微信小程序內(nèi)，微信提供標(biāo)準(zhǔn)的頁(yè)面下拉刷新加載能力和樣式，開發(fā)者無(wú)需自行開發(fā)。




3. 清晰明確減少輸入

由于手機(jī)鍵盤區(qū)域小且密集，輸入困難的同時(shí)還易引起輸入錯(cuò)誤，因此在設(shè)計(jì)小程序頁(yè)面時(shí)因盡量減少用戶輸入，利用現(xiàn)有接口或其他一些易于操作的選擇控件來(lái)改善用戶輸入的體驗(yàn)。

例如下圖中，在添加銀行卡時(shí)，采用攝像頭識(shí)別接口來(lái)幫助用戶輸入。除此之外微信團(tuán)隊(duì)還對(duì)外開放例如地理位置接口等多種微信小程序接口 ，充分利用這些接口將大大提高用戶輸入的效率和準(zhǔn)確性，進(jìn)而優(yōu)化體驗(yàn)。




除了利用接口外，在不得不讓用戶進(jìn)行手動(dòng)輸入時(shí)，應(yīng)盡量讓用戶做選擇而不是鍵盤輸入。一方面，回憶易于記憶，讓用戶在有限的選項(xiàng)中做選擇通常來(lái)說(shuō)是容易于完全靠記憶輸入；另一方面，仍然是考慮到手機(jī)鍵盤密集的單鍵輸入極易造成輸入錯(cuò)誤。 例如圖中，在用戶搜索時(shí)提供搜索歷史快捷選項(xiàng)將幫助用戶快速進(jìn)行搜索，而減少或避免不必要是鍵盤輸入。




4. 視覺(jué)規(guī)范字體規(guī)范

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







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




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

設(shè)計(jì)流程

1.界面尺寸
iPhone6:750x1334px，這里主要是官方的控件是@2x，所以相對(duì)來(lái)說(shuō)用750x1334尺寸會(huì)更加快捷。如果用@1x圖設(shè)計(jì)也是可以的，只是相對(duì)麻煩很多。




2.字體iOS

一般設(shè)計(jì)稿就只需要做 iOS 版本即可，如果遇到安卓的彈窗設(shè)計(jì)可以采用安卓的字體來(lái)設(shè)計(jì)，當(dāng)然并非絕對(duì)的，不過(guò)大部分設(shè)計(jì)師都只做 iOS 版本，Android 版本只需適配好即可。

iOS

中文字體：PingFang SC

英文字體：SF

Android
中文字體：Source HanSans CN
英文字體：Roboto




3.導(dǎo)航欄
調(diào)用 WeUI 基礎(chǔ)控件庫(kù)導(dǎo)航欄，如果想跟線上導(dǎo)航欄效果保持一致，可以通過(guò)截圖或者自己重新優(yōu)化微信導(dǎo)航欄。




4.鍵盤

官方并未給出鍵盤控件，可以通過(guò)查閱開發(fā)的組件來(lái)得知小程序鍵盤種類，可以在用到的時(shí)候通過(guò)截圖放入視覺(jué)稿交付開發(fā)即可。




5.按鈕

大家要注意小程序按鈕有內(nèi)描邊，而且內(nèi)描邊是有不透明度的，如果你沒(méi)仔細(xì)看小程序的官方按鈕，自己重新做的話，很有可能忘記給透明度（前端開發(fā)很容易忽略這一點(diǎn)，導(dǎo)致最后的效果是給了雙重描邊。所以個(gè)人建議是能用小程序控件就用控件，防止到時(shí)候頁(yè)面按鈕不統(tǒng)一。開發(fā)一般就直接調(diào)用控件了，很容易忽略這些細(xì)節(jié)，而且你有時(shí)候走查的時(shí)候也不一定會(huì)注意到這些細(xì)節(jié)，與其浪費(fèi)大量的時(shí)間走查，不如在開始做的時(shí)候就按照小程序的官方規(guī)范來(lái)做，只是在按鈕的顏色上做修改，其他圓角，大小，描邊都盡量保持不變）




6.小程序圖標(biāo)

如果你重新設(shè)計(jì)小程序，需要給圖標(biāo)，圖標(biāo)給方形：144x144px 。

經(jīng)驗(yàn)總結(jié)

1. 小程序注重輕量與便捷，設(shè)計(jì)過(guò)程中鼓勵(lì)使用原生控件，多關(guān)注微信發(fā)布的 API 和組件接口，在設(shè)計(jì)小程序相關(guān)場(chǎng)景時(shí)，避免過(guò)度設(shè)計(jì)，加快開發(fā)進(jìn)度。

2. 如果要做一些特殊的控件，最好先詢問(wèn)開發(fā)是否可實(shí)現(xiàn)，防止浪費(fèi)大量的設(shè)計(jì)精力。

3. 提供已經(jīng)壓縮的 PNG 圖，提供一套切圖即可。（ @2x 或者 @3x ）

4. 底部導(dǎo)航欄如果是開發(fā)自己寫，在切換頁(yè)面時(shí)，會(huì)出現(xiàn)閃動(dòng)（不建議自己定義底部導(dǎo)航欄）

5. 設(shè)計(jì)按鈕時(shí)，盡量統(tǒng)一按鈕尺寸，按照常用按鈕、線性按鈕、小按鈕三種規(guī)格來(lái)設(shè)計(jì)。

6. 注意分割線1px，開發(fā)很容易寫成2px，記得走查時(shí)注意分割線粗細(xì)。

7.多跟同事（設(shè)計(jì)、前端）交流，互相分享你們的經(jīng)驗(yàn)，這樣才能進(jìn)步的更快。