008 注重視覺(jué)效果

雖然小程序的功能是吸引用戶的主要因素，但是，如果一個(gè)小程序只有功能，卻不注重視覺(jué)效果，仍有可能造成用戶的大量流失。因此，為了增強(qiáng)小程序的視覺(jué)效果，微信從字體、列表、表單、圖標(biāo)和按鈕這5個(gè)方面制定了規(guī)范。

1.字體

從字體來(lái)看，“微信公眾平臺(tái)|小程序”的“微信小程序設(shè)計(jì)指南”界面對(duì)字號(hào)和字體顏色分別制定了規(guī)范。首先，對(duì)于頁(yè)面中各內(nèi)容的字號(hào)，微信給出了統(tǒng)一的規(guī)范，具體如圖1-28所示。

除了字號(hào)之外，微信官方還對(duì)字體顏色表示的意義及使用標(biāo)準(zhǔn)制定了規(guī)范，并明確指出：“主內(nèi)容Black黑色，次要內(nèi)容Grey灰色；時(shí)間戳與表單缺省值Light灰色；大段的說(shuō)明內(nèi)容而且屬于主要內(nèi)容用Semi黑。藍(lán)色為鏈接用色，綠色為完成字樣色，紅色為出錯(cuò)用色，Press與Disable狀態(tài)分別降低透明度至原來(lái)的20%與10%。”具體字體顏色規(guī)范內(nèi)容如圖1-29、圖1-30所示。

其實(shí)，即使是完全相同的內(nèi)容，如果手機(jī)系統(tǒng)不同，其選擇的字體也可能會(huì)出現(xiàn)一些差異。這是因?yàn)椴煌到y(tǒng)對(duì)字體的要求不同，所以，為了讓小程序相關(guān)內(nèi)容與系統(tǒng)字體一致，運(yùn)營(yíng)者需要根據(jù)系統(tǒng)對(duì)字體進(jìn)行具體的選擇。比如，同樣是導(dǎo)航欄的中文字體，在iOS系統(tǒng)中，需要選擇蘋方或PingFang SC字體。而在Android系統(tǒng)中，卻要選擇思源黑體。

2.列表

作為頁(yè)面內(nèi)容的重要組成部分，列表的呈現(xiàn)效果也會(huì)直接影響到用戶的視覺(jué)感受。所以，為了統(tǒng)一列表格式，讓用戶獲得較好的視覺(jué)感受，“微信公眾平臺(tái)|小程序”的“微信小程序設(shè)計(jì)指南”界面制定了圖1-31所示的列表視覺(jué)規(guī)范。

3.表單

表單由表單標(biāo)簽、表單域和表單按鈕組成，而表單域包含了文本框、多密碼框、隱藏域、復(fù)選框、單選框和下拉選擇框等諸多內(nèi)容，因此，為了統(tǒng)一表單格式，微信小程序制定了圖1-32所示的表單視覺(jué)規(guī)范。

4.圖標(biāo)

在微信小程序中，最為常見(jiàn)的圖標(biāo)主要有3類：一是表示完成的圖標(biāo)，二是表示錯(cuò)誤提示或警示的圖標(biāo)，三是表示提醒的圖標(biāo)。為了統(tǒng)一圖標(biāo)，讓用戶更快獲知圖標(biāo)代表的意義，“微信小程序設(shè)計(jì)指南”界面針對(duì)上述3種圖標(biāo)制定了使用規(guī)則，具體如圖1-33所示。

5.按鈕

根據(jù)高度的不同，微信小程序中常見(jiàn)的按鈕可分為大按鈕、中按鈕和小按鈕3種。其中，大按鈕的固定高度為94px（47pt），它表示的是當(dāng)前頁(yè)面的即時(shí)操作，因此它必須是有效且能夠滿足用戶實(shí)際需求的按鈕。大按鈕的具體使用原則如圖1-34所示。需要特別注意的是，一個(gè)頁(yè)面中只能出現(xiàn)一次主操作按鈕。

中按鈕的固定高度為70px（35pt），它表示的是重要程度不高或者不鼓勵(lì)用戶操作的按鈕。當(dāng)然，如果使用大按鈕會(huì)擾亂用戶瀏覽信息，也可用中按鈕代替。中按鈕的具體使用原則如圖1-35所示。

小按鈕的固定高度為60px（30pt），它表示的是頁(yè)面中某項(xiàng)內(nèi)容的操作或選擇。與大按鈕不同，小按鈕可以重復(fù)出現(xiàn)。小按鈕的具體使用原則如圖1-36所示。

除了上述3種按鈕之外，微信小程序中還可能出現(xiàn)兩類按鈕：一類是表示按鈕已經(jīng)失效，還有一類是表示按鈕正在加載。“微信小程序設(shè)計(jì)指南”界面對(duì)這兩類按鈕的使用原則進(jìn)行了相關(guān)的規(guī)定，具體如圖1-37所示。