不管是APP，還是小程序，用戶的體驗(yàn)都非常重要。因?yàn)橛脩艨床欢a，也不需要懂業(yè)務(wù)邏輯，獲得用戶肯定的方式就是讓用戶覺(jué)得我們的軟件很精美，很有辨識(shí)度。市面上90%以上的小程序和APP界面設(shè)計(jì)都很普通，沒(méi)有辨識(shí)度。今天成都小火軟件就從專業(yè)的UI設(shè)計(jì)角度，討論怎樣設(shè)計(jì)高質(zhì)量的APP和小程序。

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

界面元素保持一致不僅是小程序UI的設(shè)計(jì)原則，更是所有移動(dòng)UI都應(yīng)遵循的準(zhǔn)則，這種設(shè)計(jì)形式可以極大地減少用戶的學(xué)習(xí)成本，他們?cè)谇袚Q不同的界面時(shí)，不需要學(xué)習(xí)新的操作。例如，在“星巴克用星說(shuō)”這個(gè)小程序中，每個(gè)界面中的相同元素的顏色、按鈕、大小、形狀等都是基本一致的。當(dāng)然，在一些特定的情況下，適當(dāng)?shù)卮蚱瞥Ｒ?guī)的設(shè)計(jì)也是可以的，可以用來(lái)強(qiáng)調(diào)一些重點(diǎn)信息。

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

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

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

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

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

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

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

04、用卡片流突出信息本身

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

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

05、考慮小程序的流暢性

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

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

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

例如，當(dāng)用戶進(jìn)入“孕期提醒”這個(gè)小程序之后，頁(yè)面中會(huì)跳出下圖所示的“請(qǐng)?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è)置提醒便具有了必要性。

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

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

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

07、使用空間和組塊更干凈

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

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

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

09、精簡(jiǎn)配色反映品牌特性

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

使用差異較大的對(duì)比配色來(lái)對(duì)畫(huà)面進(jìn)行分割，使其色相之間產(chǎn)生較大的差異，讓畫(huà)面色彩豐富，具有感官刺激性，更容易吸引用戶的眼球，使其產(chǎn)生濃厚的興趣。
比如“紅包店”小程序的界面，畫(huà)面中的狀態(tài)欄、標(biāo)題欄、導(dǎo)航欄及紅包圖形元素等都使用紅色進(jìn)行搭配，通過(guò)明度的變化使其產(chǎn)生強(qiáng)烈的差異，這類配色方式保持了色相上的一致性，所以色彩在整體效果上很容易達(dá)到調(diào)和。

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

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

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

上面10點(diǎn)是制作一個(gè)高質(zhì)量APP和小程序的主要方法，在我們實(shí)際的開(kāi)發(fā)過(guò)程中，我們也要結(jié)合甲方的審美，給到甲方專業(yè)的，符合用戶優(yōu)質(zhì)體驗(yàn)的UI設(shè)計(jì)解決方案。至于無(wú)需客戶關(guān)心的軟件代碼，業(yè)務(wù)邏輯等，需要找專業(yè)的軟件公司，比如成都小火軟件公司，進(jìn)行專業(yè)的咨詢。

本文鏈接地址：http://cndaixiao.net/archives/xiaochengxukaifa/1240，轉(zhuǎn)載請(qǐng)注明出處！