從2017年小程序問世以來，便一路攻城掠地，因其“無需下載，觸手可及、用完即走”的特點(diǎn)，使得大批互聯(lián)網(wǎng)企業(yè)嫁接到這個(gè)生態(tài)當(dāng)中，可以說大大地方便了我們的生活。

  各式各樣的小程序

  在小程序設(shè)計(jì)的過程中，很多設(shè)計(jì)師朋友可能對其原理和規(guī)則有一定的認(rèn)知偏差，特別是在初期的設(shè)計(jì)工作中，會(huì)產(chǎn)生微信小程序UI和APP的UI有何區(qū)別這樣的疑惑。

  其實(shí)小程序和APP的設(shè)計(jì)規(guī)范區(qū)別不大，而打造一個(gè)“爆款”的小程序就需要深刻的認(rèn)知了，話不多說，看數(shù)藝君給大家?guī)淼母韶洝?/p>

  小程序UI：打造“爆款”小程序的設(shè)計(jì)規(guī)則

  小程序的UI設(shè)計(jì)直接影響其呈現(xiàn)的效果，而小程序的呈現(xiàn)效果又直接與用戶體驗(yàn)甚至是用戶的留存緊密相關(guān)?？梢哉f，“爆款”小程序的打造，離不開UI的設(shè)計(jì)。

  01

  界面元素設(shè)計(jì)保持一致

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

  界面元素保持一致

  當(dāng)然，在一些特定的情況下，適當(dāng)?shù)卮蚱瞥Ｒ?guī)的設(shè)計(jì)也是可以的，可以用來強(qiáng)調(diào)一些重點(diǎn)信息。

  02、

  功能設(shè)計(jì)滿足用戶需求

  對于用戶而言，一款應(yīng)用的價(jià)值很大程度上取決于功能的實(shí)用性。因此，功能越實(shí)用的小程序，越能得到用戶的青睞。雖然在運(yùn)營者選擇領(lǐng)域之后，小程序的功能基本上已經(jīng)確定了，但是，如果用戶是初次使用小程序，那么，他對于小程序?qū)嵱眯缘母兄旧蟻碜杂谛〕绦虻腢I設(shè)計(jì)。

  所以，運(yùn)營者在設(shè)計(jì)小程序UI時(shí)，應(yīng)盡可能地體現(xiàn)其功能的實(shí)用性。這一點(diǎn)對于工具類小程序尤其重要。當(dāng)然，大部分工具類小程序也特別注意這個(gè)問題。

  以“車來了精準(zhǔn)實(shí)時(shí)公交”（簡稱為“車來了”）小程序?yàn)槔脩暨M(jìn)入該小程序之后，便可看到如圖展示的默認(rèn)界面。在該界面中，用戶可直接查看附近的公交站點(diǎn)和經(jīng)過該站點(diǎn)的線路，甚至可以看到某一線路到達(dá)站點(diǎn)的最短時(shí)間。而點(diǎn)擊某一線路之后，還可查看該線路路經(jīng)的站點(diǎn)，距離最近的3趟公交到達(dá)站點(diǎn)的時(shí)間，除此之外，用戶還可點(diǎn)擊下方的“換向”按鈕，查看該公交的反向?qū)崟r(shí)情況，具體如圖所示。

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

  查看線路信息

  用戶搭乘公交比較關(guān)心的問題主要包括 ：附近的站點(diǎn)、經(jīng)歷某站點(diǎn)的線路、線路經(jīng)過的站點(diǎn)、某線路距離某站點(diǎn)的距離以及到達(dá)該站點(diǎn)需要的時(shí)間，而這些內(nèi)容“車來了”小程序頁面中都有體現(xiàn)。因此，用戶用該小程序查看公交實(shí)時(shí)情況時(shí)便會(huì)覺得非常實(shí)用。

  03、

  頭像設(shè)計(jì)要體現(xiàn)特色

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

  小程序頭像設(shè)置

  04

  用卡片流突出信息本身

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

  用卡片流突出信息本身

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

  05

  考慮小程序的流暢性

  考慮小程序的流暢性，即用戶在使用小程序的過程中，應(yīng)該不被突如其來的無關(guān)內(nèi)容所打斷。例如，有的小程序?yàn)榱嗽鰪?qiáng)對用戶的吸引力，會(huì)在用戶的操作過程中彈出圖所示的抽獎(jiǎng)活動(dòng)頁面。

  不合理的抽獎(jiǎng)頁面

  雖然運(yùn)營者這么做是給用戶發(fā)福利，但是，面對突然出現(xiàn)的抽獎(jiǎng)頁面，許多用戶并不會(huì)因?yàn)楂@得抽獎(jiǎng)機(jī)會(huì)而欣喜，相反，卻可能因?yàn)椴僮鞅淮驍喽鴮υ擁撁娈a(chǎn)生反感，甚至是對小程序產(chǎn)生反感。

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

  例如，當(dāng)用戶進(jìn)入“孕期提醒”這個(gè)小程序之后，頁面中會(huì)跳出下圖所示的“請?jiān)O(shè)置預(yù)產(chǎn)期”提醒。因?yàn)樵撔〕绦蛑械膬?nèi)容都是根據(jù)懷孕的時(shí)間提供的，不同的懷孕時(shí)間，呈現(xiàn)的內(nèi)容可能有較大的差異。所以，為了讓用戶獲得更加準(zhǔn)確的信息，設(shè)置預(yù)產(chǎn)期這一步是不可或缺的。因此，此時(shí)的設(shè)置提醒便具有了必要性。

  必要的設(shè)置提醒

  06

  適當(dāng)構(gòu)圖提高設(shè)計(jì)效率

  在設(shè)計(jì)小程序UI時(shí)，需要對界面中的各個(gè)元素進(jìn)行恰當(dāng)?shù)財(cái)[放，使畫面看上去更有沖擊力和美感，這就是構(gòu)圖。構(gòu)圖起初是繪畫中的專有術(shù)語，后來廣泛應(yīng)用于攝影和平面設(shè)計(jì)等視覺藝術(shù)領(lǐng)域。一個(gè)成功的小程序UI作品，大多是擁有嚴(yán)謹(jǐn)構(gòu)圖的，能夠使作品重點(diǎn)突出，有條有理，富有美感，賞心悅目，而且適當(dāng)?shù)臉?gòu)圖形式還能夠提高設(shè)計(jì)效率。

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

  中央構(gòu)圖+圓形構(gòu)圖

  六宮格構(gòu)圖

  07

  使用空間和組塊更干凈

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

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

  08

  創(chuàng)造更有意思的微交互

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

  “跳一跳”小游戲界面

  09

  精簡配色反映品牌特性

  把小程序UI的配色設(shè)計(jì)好，讓界面更好看一點(diǎn)，更漂亮一點(diǎn)，這樣就會(huì)在視覺上吸引用戶，給小程序帶來更多的流量。小程序的配色首先要精簡，然后盡可能地反映品牌特性。對于進(jìn)入小程序的用戶來說，他們首先會(huì)被界面中的圖片色彩所吸引，然后根據(jù)色彩的走向?qū)Ξ嬅娴闹鞔芜M(jìn)行逐一地了解。

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

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

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

  調(diào)和配色

  10

  縮短用戶流程優(yōu)化體驗(yàn)

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

  首頁中的推薦選擇

  商家詳情頁中的更多選擇

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

  使用默認(rèn)值減少用戶操作