不用抄APP，爆款小程序的設計就看這10個點了！

  從2017年小程序問世以來，便一路攻城掠地，因其“無需下載，觸手可及、用完即走”的特點，使得大批互聯網企業嫁接到這個生態當中，可以說大大地方便了我們的生活。

  各式各樣的小程序

  在小程序設計的過程中，很多設計師朋友可能對其原理和規則有一定的認知偏差，特別是在初期的設計工作中，會產生微信小程序UI和APP的UI有何區別這樣的疑惑。

  其實小程序和APP的設計規范區別不大，而打造一個“爆款”的小程序就需要深刻的認知了，話不多說，看數藝君給大家帶來的干貨。

  小程序UI：打造“爆款”小程序的設計規則

  小程序的UI設計直接影響其呈現的效果，而小程序的呈現效果又直接與用戶體驗甚至是用戶的留存緊密相關。可以說，“爆款”小程序的打造，離不開UI的設計。

  01

  界面元素設計保持一致

  界面元素保持一致不僅是小程序UI的設計原則，更是所有移動UI都應遵循的準則，這種設計形式可以極大地減少用戶的學習成本，他們在切換不同的界面時，不需要學習新的操作。例如，在“星巴克用星說”這個小程序中，每個界面中的相同元素的顏色、按鈕、大小、形狀等都是基本一致的，如圖所示。

  界面元素保持一致

  當然，在一些特定的情況下，適當地打破常規的設計也是可以的，可以用來強調一些重點信息。

  02、

  功能設計滿足用戶需求

  對于用戶而言，一款應用的價值很大程度上取決于功能的實用性。因此，功能越實用的小程序，越能得到用戶的青睞。雖然在運營者選擇領域之后，小程序的功能基本上已經確定了，但是，如果用戶是初次使用小程序，那么，他對于小程序實用性的感知基本上來自于小程序的UI設計。

  所以，運營者在設計小程序UI時，應盡可能地體現其功能的實用性。這一點對于工具類小程序尤其重要。當然，大部分工具類小程序也特別注意這個問題。

  以“車來了精準實時公交”（簡稱為“車來了”）小程序為例，用戶進入該小程序之后，便可看到如圖展示的默認界面。在該界面中，用戶可直接查看附近的公交站點和經過該站點的線路，甚至可以看到某一線路到達站點的最短時間。而點擊某一線路之后，還可查看該線路路經的站點，距離最近的3趟公交到達站點的時間，除此之外，用戶還可點擊下方的“換向”按鈕，查看該公交的反向實時情況，具體如圖所示。

  “車來了”小程序的界面功能

  查看線路信息

  用戶搭乘公交比較關心的問題主要包括 ：附近的站點、經歷某站點的線路、線路經過的站點、某線路距離某站點的距離以及到達該站點需要的時間，而這些內容“車來了”小程序頁面中都有體現。因此，用戶用該小程序查看公交實時情況時便會覺得非常實用。

  03、

  頭像設計要體現特色

  頭像是小程序的門面，它的設置對小程序的推廣運營至關重要。小程序頭像的設置和小程序名稱的填寫相同，都是在“填寫小程序信息”界面。運營者只需在該界面找到“小程序頭像”，并選擇能夠體現小程序功能特色的圖片即可，具體如圖所示。

  小程序頭像設置

  04

  用卡片流突出信息本身

  卡片流是小程序UI常用的一種界面元素布局形式，將主要功能或信息采用卡片的形式突顯出來，可以更好地展現主題。例如，“微信公開課”的“課程”界面就是采用卡片流的設計，每一節課就是一張小卡片，并通過不同的寬度來突出重點信息，如圖所示。

  用卡片流突出信息本身

  卡片流的排版方式可以將主要信息從界面中突出顯示出來，可以通過為卡片元素添加陰影和漸變等效果讓界面富有層次。

  05

  考慮小程序的流暢性

  考慮小程序的流暢性，即用戶在使用小程序的過程中，應該不被突如其來的無關內容所打斷。例如，有的小程序為了增強對用戶的吸引力，會在用戶的操作過程中彈出圖所示的抽獎活動頁面。

  不合理的抽獎頁面

  雖然運營者這么做是給用戶發福利，但是，面對突然出現的抽獎頁面，許多用戶并不會因為獲得抽獎機會而欣喜，相反，卻可能因為操作被打斷而對該頁面產生反感，甚至是對小程序產生反感。

  因此，為了使用戶獲得流暢的操作體驗，運營者應減少抽獎、廣告和提醒類信息，但是，需要特別說明的是，如果提醒信息是與小程序的服務內容直接相關且不可跳過的，那么，此信息對于用戶來說便是必要的信息，即使可能暫時打斷用戶操作，也必須進行設置。

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

  必要的設置提醒

  06

  適當構圖提高設計效率

  在設計小程序UI時，需要對界面中的各個元素進行恰當地擺放，使畫面看上去更有沖擊力和美感，這就是構圖。構圖起初是繪畫中的專有術語，后來廣泛應用于攝影和平面設計等視覺藝術領域。一個成功的小程序UI作品，大多是擁有嚴謹構圖的，能夠使作品重點突出，有條有理，富有美感，賞心悅目，而且適當的構圖形式還能夠提高設計效率。

  如下圖所示，“未來便利店”小程序的構圖非常簡潔，采用中央構圖 + 圓形構圖的形式，突出了“結算開門”的主要功能。“i 麥當勞”小程序采用六宮格的構圖形式來安排功能元素。在設計小程序UI的過程中，設計者需要對界面元素進行適當構圖處理，讓界面更加富有藝術感和美感，更加吸引用戶的眼球。

  中央構圖+圓形構圖

  六宮格構圖

  07

  使用空間和組塊更干凈

  為了讓用戶快速獲知頁面中的信息，在設計小程序UI 時可以使用空間和組塊有意識地突出重點內容，讓界面看上去更加干凈整潔。例如，OPPO的小程序界面就采用了3個分組，包括“首頁”“商城”和“我的”，用來區分不同的功能模塊，主次分明，如圖所示。

  使用分組讓小程序UI更干凈

  08

  創造更有意思的微交互

  小程序UI同樣要注意交互設計，滿足用戶的互動需求，可以設計一些有意思的微交互形式，如抽獎、小游戲或者用動畫給予反饋，不但可以培養用戶習慣，還能結合相應主題來實現更多的功能。例如，“跳一跳”就是一個非常有意思的小游戲，玩法非常簡單，讓整個小程序的用戶體驗得到了極大的提升，如圖所示。

  “跳一跳”小游戲界面

  09

  精簡配色反映品牌特性

  把小程序UI的配色設計好，讓界面更好看一點，更漂亮一點，這樣就會在視覺上吸引用戶，給小程序帶來更多的流量。小程序的配色首先要精簡，然后盡可能地反映品牌特性。對于進入小程序的用戶來說，他們首先會被界面中的圖片色彩所吸引，然后根據色彩的走向對畫面的主次進行逐一地了解。

  下圖為“頭腦王者”小程序界面，使用差異較大的對比配色來對畫面進行分割，使其色相之間產生較大的差異，讓畫面色彩豐富，具有感官刺激性，更容易吸引用戶的眼球，使其產生濃厚的興趣。

  “頭腦王者”小程序界面的對比配色

  下圖所示為“紅包店”小程序的界面，畫面中的狀態欄、標題欄、導航欄及紅包圖形元素等都使用紅色進行搭配，通過明度的變化使其產生強烈的差異，這類配色方式保持了色相上的一致性，所以色彩在整體效果上很容易達到調和。

  調和配色

  10

  縮短用戶流程優化體驗

  當我們需要在小程序界面中呈現多個服務項目時，建議列出相關的推薦項目，供用戶快速選擇，以免用戶面臨多個選擇時無法快速做出決定。例如，“餓了么”小程序“外賣”界面中，就會針對每個商家的熱銷美食，自動在首頁推薦3種不同的美食，并添加了非常形象的圖片展示，幫助用戶快速做出選擇，當然，也許這些推薦無法滿足所有的用戶需求，此時用戶還可以點擊商家名稱查看更多的美食來選擇，如圖所示。

  首頁中的推薦選擇

  商家詳情頁中的更多選擇

  除此之外，我們還可以使用一些比較貼切的默認值來減少用戶的操作，幫助用戶節省寶貴的時間。例如，很多注冊和登錄等表單元素就是采用了這種做法，設計者會在表單中添加一些適當的默認值或者預先填充好的表單字段，可以將用戶的工作量大幅減少，如圖所示。

  使用默認值減少用戶操作