做小程式就是不隨波逐流，不隨波逐流，主要是抓住小程式的特點。小程式頁面，主要結合產品功能，使用者定位，提供資訊匹配和簡單交易功能，從而達到良好的推廣引流。

1、頁面設計要有層次感

小程式提供的核心價值，或能吸引使用者興趣的地方，需要讓使用者一眼就看到，深思熟慮並突出。其他輔助值閉環功能幫助使用者以最自然的姿態完成剩餘的操作。清晰的優先順序。

與其他招聘產品相比，本產品的特點是識別潛在的中小企業，並基於LBS定位推薦周邊企業。在1的設計中，知名團隊、知名風投、近期融資等標籤都有一定的隱蔽性，需要使用者去探索去注意。因此，在修訂版2中，使用者感興趣的標籤作為一個層次的入口，強調。

2. 長形式處理

表單內容過多過長會使使用者產生心理排斥，增加放棄的可能性。因此，在設計長表單時，可以改變設計風格(不要太多)來減少無聊感，可以清楚地劃分塊，減少跳躍性，可以用動作代替輸入。

3.平的頁面層次結構

不能跳躍來減少跳躍，跳躍新頁面會增加使用者適應新頁面元素的成本，同時小程式頁面層次太多，會讓使用者感到繁瑣焦慮。

4. 清晰的佈局和簡單的空白

先進的小程式首頁，會給使用者白色的、簡潔精緻的頁面，符合現代人的審美。例如“線上”小程式模板。

另外，小程式是輕量級的應用程式，所以不要使它們的頁面太複雜。保持簡單明瞭。確保他們告訴使用者他們在哪裡，他們可以去哪裡。同時，應該有清晰的底部導航，這樣使用者才能快速找到他們需要的資訊。導航標籤應該不少於2，不多於5。

5. 統一的風格

小程式的整體色彩風格應該與你的品牌主題相一致，讓客戶能夠記住。比如美妝類的小程式，最好使用一些暖色，粉色會更合適；客房服務類的小程式，最好使用乾淨新鮮的顏色，如綠色、藍色；數碼電子產品，不太適合花哨，最好使用黑色或白色。

以上是小程式頁面設計時要注意的內容。小程式在設計過程中一定要注意使用者的實際體驗，所以一定要簡潔明瞭，不要太繁瑣，讓使用者使用起來舒適，給他們一個良好的使用體驗。

頁面中圖示作為必不可少的元素，它直接影響著使用者的第一感覺！“好的”圖示需要保持粗細、大小、風格和修飾元素必須一致！

以微信的【美團外賣】小程式為例，我們在選擇吃的型別和購買的方式時，這些選擇的圖示都統一形狀為圓形，顏色方面每個選項都是單一的漸變色，而且最裡面的一層有標誌的icon都是灰白色主，總的來講各個選項的圖示風格是很統一整體的！

頁面內容的排版通常以“切割”方式進行劃分，在切割時為了給使用者良好的視覺體驗，設計師要根據內容的具體使用場景，選擇正確的“線切割”、“面切割”和“留白切割”方式進行排版！

進入美團外賣小程式的介面首頁，我們發現它採用的是“留白切割”方式進行排版，透過這種切割方式，它在每段的內容都有所不同，比如上圖中，第一段圖片中“鮮汁道龍蝦飯店”是其每日熱門飯菜店面的推薦，然後第二段“神價格”是不同型別食譜非常優惠的飯菜資訊，再看第三段“附近商家”這個功能為使用者推送快速飲食的選擇！每段的功能內容在圖片的底部加了一層底灰色，實現立體效果！

綜上，透過圖示的統一風格樣式處理和內容選項分段，讓小程式頁面不再看的生硬！當然如果想最佳化的更好，我們也需要配合專案相關的程式開發人員進行【動態效果】的處理，比如介面功能選擇後，頁面重新載入的很多內容時，透過緩衝的方式動畫效果過度，增強使用者操作體驗！

做小程式就是不隨波逐流，不隨波逐流，主要是抓住小程式的特點。小程式頁面，主要結合產品功能，使用者定位，提供資訊匹配和簡單交易功能，從而達到良好的推廣引流。

1、頁面設計要有層次感

2. 長形式處理

3.平的頁面層次結構

4. 清晰的佈局和簡單的空白

1. 友好禮貌

重點突出

避免並列過多操作讓使用者選擇，在不得不併列多個操作時，需區分操作主次，減輕使用者的選擇難度。

2. 清晰明確

導航區（iOS）

微信進入小程式的第一個頁面，導航區通常只有一個操作——“返回”，即返回進入小程式前的微信頁面。 進入小程式後的次級頁面，導航區的操作為——“返回” 和“關閉”。 “返回”，即返回上一級小程式介面或微信介面。“關閉”，即在當前介面直接退出小程式，回到進入小程式前的微信頁面。

這裡主要講解 Android 和 iOS 的差異化，設計小程式時可以不用考慮。

導航區（顏色） 導航區顏色支援自定義，選擇與提供的頂欄顏色相和諧搭配的背景色。

標籤分頁（Tab）導航

啟動頁載入

下拉重新整理載入

3. 清晰明確減少輸入

由於手機鍵盤區域小且密集，輸入困難的同時還易引起輸入錯誤，因此在設計小程式頁面時因儘量減少使用者輸入，利用現有介面或其他一些易於操作的選擇控制元件來改善使用者輸入的體驗。

除了利用介面外，在不得不讓使用者進行手動輸入時，應儘量讓使用者做選擇而不是鍵盤輸入。一方面，回憶易於記憶，讓使用者在有限的選項中做選擇通常來說是容易於完全靠記憶輸入；另一方面，仍然是考慮到手機鍵盤密集的單鍵輸入極易造成輸入錯誤。 例如圖中，在使用者搜尋時提供搜尋歷史快捷選項將幫助使用者快速進行搜尋，而減少或避免不必要是鍵盤輸入。

4. 視覺規範字體規範

藍色為連結用色，綠色為完成字樣色，紅色為出錯用色 Press 與 Disable 狀態分別降低透明度為20%與10%。

主內容 Black 黑色，次要內容 Grey 灰色；時間戳與表單預設值 Light 灰色；大段的說明內容而且屬於主要內容用 Semi 黑。

設計流程

1.介面尺寸 iPhone6:750x1334px，這裡主要是官方的控制元件是@2x，所以相對來說用750x1334尺寸會更加快捷。如果用@1x圖設計也是可以的，只是相對麻煩很多。

2.字型iOS

一般設計稿就只需要做 iOS 版本即可，如果遇到安卓的彈窗設計可以採用安卓的字型來設計，當然並非絕對的，不過大部分設計師都只做 iOS 版本，Android 版本只需適配好即可。

iOS

中文字型：PingFang SC

英文字型：SF

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

4.鍵盤

官方並未給出鍵盤控制元件，可以透過查閱開發的元件來得知小程式鍵盤種類，可以在用到的時候透過截圖放入視覺稿交付開發即可。

大家要注意小程式按鈕有內描邊，而且內描邊是有不透明度的，如果你沒仔細看小程式的官方按鈕，自己重新做的話，很有可能忘記給透明度（前端開發很容易忽略這一點，導致最後的效果是給了雙重描邊。所以個人建議是能用小程式控制元件就用控制元件，防止到時候頁面按鈕不統一。開發一般就直接呼叫控制元件了，很容易忽略這些細節，而且你有時候走查的時候也不一定會注意到這些細節，與其浪費大量的時間走查，不如在開始做的時候就按照小程式的官方規範來做，只是在按鈕的顏色上做修改，其他圓角，大小，描邊都儘量保持不變）

6.小程式圖示

如果你重新設計小程式，需要給圖示，圖示給方形：144x144px 。

經驗總結

2. 如果要做一些特殊的控制元件，最好先詢問開發是否可實現，防止浪費大量的設計精力。

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

4. 底部導航欄如果是開發自己寫，在切換頁面時，會出現閃動（不建議自己定義底部導航欄）

6. 注意分割線1px，開發很容易寫成2px，記得走查時注意分割線粗細。

7.多跟同事（設計、前端）交流，互相分享你們的經驗，這樣才能進步的更快。

1.頁面要有好的圖示！

頁面中圖示作為必不可少的元素，它直接影響著使用者的第一感覺！“好的”圖示需要保持粗細、大小、風格和修飾元素必須一致！以微信的【美團外賣】小程式為例，我們在選擇吃的型別和購買的方式時，這些選擇的圖示都統一形狀為圓形，顏色方面每個選項都是單一的漸變色，而且最裡面的一層有標誌的icon都是灰白色主，總的來講各個選項的圖示風格是很統一整體的！

2.排版內容要規劃好！

頁面內容的排版通常以“切割”方式進行劃分，在切割時為了給使用者良好的視覺體驗，設計師要根據內容的具體使用場景，選擇正確的“線切割”、“面切割”和“留白切割”方式進行排版！

進入美團外賣小程式的介面首頁，我們發現它採用的是“留白切割”方式進行排版，透過這種切割方式，它在每段的內容都有所不同，比如上圖中，第一段圖片中“鮮汁道龍蝦飯店”是其每日熱門飯菜店面的推薦，然後第二段“神價格”是不同型別食譜非常優惠的飯菜資訊，再看第三段“附近商家”這個功能為使用者推送快速飲食的選擇！每段的功能內容在圖片的底部加了一層底灰色，實現立體效果！

綜上，透過圖示的統一風格樣式處理和內容選項分段，讓小程式頁面不再看的生硬！當然如果想最佳化的更好，我們也需要配合專案相關的程式開發人員進行【動態效果】的處理，比如介面功能選擇後，頁面重新載入的很多內容時，透過緩衝的方式動畫效果過度，增強使用者操作體驗！