2.2　個性設計是建立在官方規則要求基礎上的

對于小程序的頁面設計，微信官方提出了一些要求，如圖2-3所示，其為“微信小程序設計指南”的部分內容。有需要的小程序自媒體電商運營者可以前往“微信小程序設計指南”的“設計”版塊查看。小程序自媒體電商運營者可以將其視為設計自身小程序電商平臺的官方規則，即便是打造個性電商平臺，也需要以這些規則為基礎。

2.2.1　操作要暢通無阻

【內容導讀】

暢通無阻的操作體驗，即用戶在使用微信小程序的過程中，不應該被突如其來的無關內容所打斷。

【技巧解讀】

要做到操作的暢通無阻并不容易，因為有的運營者經常會好心做壞事。比如，有的小程序自媒體運營者為了增強對用戶的吸引力，會在用戶的操作過程中彈出如圖2-4所示的抽獎活動頁面。

雖然運營者這么做是為了給用戶發福利，但是，面對突然出現的抽獎頁面，許多用戶并不會因為獲得抽獎機會而欣喜，相反，可能因為操作被打斷而對該頁面，甚至對小程序產生反感。因此，為了使用戶獲得暢通無阻的操作體驗，運營者應減少抽獎、廣告和提醒類信息。

【溫馨提示】

需要特別說明的是，如果提醒信息與小程序的服務內容直接相關且不可跳過，那么，此信息對于用戶來說便是必要的信息，即使可能暫時打斷用戶的操作，也必須進行設置。

比如，當用戶進入“孕期提醒”這個小程序之后，頁面中會跳出如圖2-5所示的“請設置預產期”提醒。因為該小程序中的內容都是根據懷孕的時間提供的，不同的懷孕時間，呈現的內容可能會有較大的差異。所以，為了讓用戶獲得更加準確的信息，設置預產期這一步是不可或缺的。因此，此時的設置提醒便具有了必要性。

2.2.2　導航要清晰明確

【內容導讀】

對于用戶，特別是對于初次進入小程序自媒體電商平臺的用戶來說，導航欄起到的是地圖的作用，而明確的頁面導航則可讓用戶迅速找到自己需要的內容，減少不必要的搜索時間，增強小程序的便利性。

【技巧解讀】

在筆者看來，小程序自媒體電商平臺中的導航欄主要有三個作用：一是告訴用戶其所處的位置；二是給用戶提供返回渠道；三是對用戶的操作進行引導。其中，操作引導既是對用戶最具實用價值的內容，也是運營者可以充分利用的部分。如果運營者需要達到某一目的，便可以通過導航欄的一步步引導來實現。

比如，在電商購物類小程序中，自媒體電商運營者為了讓用戶快速完成購物，可以通過明確的導航讓用戶快速找到自己需要的產品，此時，如果再提供便利的購買途徑，那么，在其引導之下，用戶通常更容易下單完成購買。

以“拼多多”小程序為例，如圖2-6所示為該小程序的“首頁”界面。可以看到，在“首頁”界面，用戶可以對包括“男裝”“年貨”“手機”等類別的商品進行選擇。

而在首頁選擇“男裝”界面，進入該界面之后，導航欄下方又出現了“男裝”“男褲”“休閑褲”等下一級的導航欄，如圖2-7所示。

如果用戶選擇“男褲”選項，頁面將轉至如圖2-8所示的“男褲”界面。另外，點擊某一商品之后，即可進入如圖2-9所示的“商品詳情”界面。而在該界面中又為用戶提供了購買途徑。用戶只需點擊頁面下方的“單獨購買”按鈕，或“一鍵開團”按鈕，便可對產品進行購買。

【溫馨提示】

大部分用戶并不會對隨處可見的導航欄感到厭煩，相反，還會覺得運營者在設計小程序時充分考慮到自己的感受，因為導航欄很好地充當了地圖的作用，使當前頁面中可以查詢的內容變得一目了然。

2.2.3　重點要突出顯示

【內容導讀】

每個微信小程序的頁面中都有一個主題，小程序自媒體電商運營者需要做的就是將主題內容作為重點進行突出顯示。在重點呈現的同時，讓用戶更好地把握頁面中相對重要的內容。

【技巧解讀】

如圖2-10所示為部分小程序查詢頁面的內容，在該頁面中，運營者分別在頁面上、下方放置了兩個廣告，而“查詢”按鈕下方的詞條大小一致顯得沒有重點，這種查詢設置顯然是錯誤的。

既然有錯誤的設置，就有正確的示范。那么，正確的查詢頁面該怎么設置呢？筆者認為，可以從兩個方面進行考慮。

首先，與查詢無關的內容，如廣告信息，應該全部去掉。其次，在提供搜索詞條時可考慮用戶的使用習慣，將“最近搜索”的詞條用不同大小的字體有差別地顯示，具體如圖2-11所示。

【溫馨提示】

雖然小程序中可以放置廣告，但是，小程序自媒體電商運營者最好還是盡量少在頁面中放置廣告，因為廣告在頁面中會顯得很突兀。而且在大多數情況下，廣告都是不招人待見的，畢竟用戶使用小程序不是為了看廣告。

2.2.4　主次操作要分清

【內容導讀】

小程序自媒體電商運營者在進行操作選擇設置時，需要做到主次分明，幫用戶分清主要操作和次要操作，而不能同時提供多種分不清主次的操作，讓用戶陷入難以選擇的處境。

【技巧解讀】

圖2-12所示為錯誤的操作選擇設置，之所以說它是錯誤的設置，就是因為該頁面給用戶提供了“操作一”“操作二”“操作三”。這3個操作的選擇，除了文字略有差異之外，其他內容完全相同，可以說是完全看不出主次的。在這種情況下，用戶該怎么選擇呢？

對此，運營者不妨直接將操作名稱命名為“主要操作”“次要操作”，并給其配備不同的背景色，如圖2-13所示。這樣一來，主次有別，用戶自然也就不用再因選擇而為難了。

【溫馨提示】

讓操作主次清晰主要有兩種方法，一種是直接寫明，另一種則是減少選擇項。所以，如果在不好分別設置操作的情況下，小程序自媒體電商運營者還可以適當減少操作的選擇項。如果實在要讓用戶選擇，可以分幾次進行。

2.2.5　頁面規范要遵守

【內容導讀】

雖然小程序的功能是吸引用戶的主要因素，但是，小程序自媒體電商運營者需要明白一點，很多人都是“顏值控”。如果一個小程序自媒體電商平臺只有功能，卻不注重視覺效果，有的用戶在看了一眼之后，可能會覺得設計太low了而選擇離開。這樣一來，勢必會造成用戶的大量流失。

【技巧解讀】

因此，為了增強微信小程序電商平臺的視覺效果，微信從字體、列表、表單、按鈕和圖標這五方面制定了規范。

1．字體

從字體來看，“微信公眾平臺|小程序”的“微信小程序設計指南”界面對字號和字體顏色分別制定了規范。首先，對于頁面中各內容的字號，微信制定了統一的規范，具體如圖2-14所示。

除了字體之外，微信官方還對字體顏色表示的意義及使用標準制定了規范，并明確指出：“主內容Black黑色，次要內容Grey灰色；時間戳與表單缺省值Light灰色；大段的說明內容而且屬于主要內容用Semi黑。藍色為鏈接用色，綠色為完成字樣色，紅色為出錯用色。Press與Disable狀態分別是降低透明度20%與10%。”具體字體顏色規范內容如圖2-15、圖2-16所示。

其實，即便是完全相同的內容，如果手機系統不同，其選擇的字體也可能會出現一些差異。比如，同樣是導航欄的中文字體，在iOS系統中，需要選擇蘋方或PingFang SC字體。而在Android系統中，需要選擇思源黑體。

這是因為不同系統對字體的要求不同，所以為了讓小程序相關內容與系統字體一致，微信小程序電商運營者需要根據系統對字體進行具體的選擇。

2．列表

作為頁面內容的重要組成部分，列表的呈現效果也直接影響用戶的視覺感受。所以，為了統一列表格式，讓用戶獲得較好的視覺感受，“微信公眾平臺|小程序”的“微信小程序設計指南”界面制定了如圖2-17所示的列表視覺規范。

3．表單

表單由表單標簽、表單域和表單按鈕組成，而表單域包含了文本框、多密碼框、隱藏域、復選框、單選框和下拉選擇框等諸多內容，因此，為了統一表單格式，微信小程序制定了如圖2-18所示的表單視覺規范。

4．按鈕

根據高度的不同，微信小程序中的按鈕可分為大按鈕、中按鈕和小按鈕三種。其中，大按鈕的固定高度為94px（47pt），它表示的是當前頁面的即時操作，因此它必須是有效且能夠滿足用戶實際需求的按鈕。大按鈕的使用原則如圖2-19所示。需要特別注意的是，一個頁面中只能出現一次主操作按鈕。

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

小按鈕的固定高度為60px（30pt），它表示的是微信小程序頁面中某項內容的操作或選擇。與大按鈕不同，小按鈕可以重復出現。小按鈕的使用原則如圖2-21所示。

除了上述3種按鈕之外，微信小程序中還可能出現兩類按鈕，一類是表示按鈕已經失效，另一類是表示按鈕正在加載。“微信小程序設計指南”界面對這兩類按鈕的使用原則進行了相關的規定，具體如圖2-22所示。

5．圖標

在微信小程序中，最為常見的圖標主要有3類：一是表示完成的圖標；二是表示錯誤提示或警示的圖標；三是表示提醒的圖標。為了統一圖標，讓用戶更快地獲知圖標代表的意義，“微信小程序設計指南”界面針對上述3種圖標制定了使用規則，具體如圖2-23所示。

【溫馨提示】

設計規范不僅可以增加小程序的頁面效果，還可以提高小程序審核通過率。當運營者按照微信官方給出的設計規則設計小程序時，審核人員會覺得運營者遵循了規則，這樣給審核人員留下的印象自然會好一些。

2.2.6　異常情況要解決

【內容導讀】

當用戶操作不當時，微信小程序頁面可能會出現一些異常情況。雖然這不是小程序自身的過錯，但是異常仍是一個必須解決的問題。因此，自媒體電商運營者在設計小程序頁面時，必須要做好對異常問題的處理。具體來說，解決異常需要做好兩個方面的內容：一是告知異常，二是提供解決方案。

【技巧解讀】

圖2-24為微信官網給出的表單報錯示例，可以看到在示例的圖片中，明確指出顯示“卡號格式不正確”。經過這一處理，用戶便能清楚地獲知具體異常情況，并找出對應的解決方案。

除了表單報錯之外，運營者還可以通過提示對話框的設置幫用戶解決異常。如圖2-25所示為某小程序中的提示對話框，在該對話框中，明確指出“支付密碼有誤”，與此同時還提供了解決的方案，即“重試”。這樣一來，用戶在看到該對話框之后便可自行解決異常情況，而不至于因為無法進行下一步而感到無助。

【溫馨提示】

因為遇到異常情況之后，用戶多少會感到有些無助，如果小程序自媒體運營者不能為用戶提供解決方案，那么，用戶很可能會由于無法正常使用某些功能而退出，甚至是刪除小程序。所以，在設計小程序頁面時，自媒體運營者一定要充分考慮可能出現的異常情況，并提供解決方案。