一款寵物類(lèi)APP界面設(shè)計(jì)

郜林

摘 要：在APP界面的設(shè)計(jì)當(dāng)中，要綜合考慮界面的排布、配色、文字與圖標(biāo)的使用等問(wèn)題。在解決這些事項(xiàng)上，要考慮針對(duì)目標(biāo)用戶(hù)的性格特征、使用習(xí)慣、交互特征等，也要橫向?qū)Ρ痊F(xiàn)今市面中其他APP的界面與功能。因此，寵物類(lèi)APP界面設(shè)計(jì)不僅僅停留于平面的排布，也需要像設(shè)計(jì)其他寵物產(chǎn)品一樣，對(duì)用戶(hù)和市場(chǎng)進(jìn)行充分分析與貼合。

關(guān)鍵詞：UI設(shè)計(jì);寵物;APP

1 用戶(hù)分析

隨著人口結(jié)構(gòu)的變革，空巢青年和晚婚晚育人群增多，年輕人成為養(yǎng)寵人群的主體。與中老年人不同，相較于頁(yè)面的實(shí)用性，年輕人更在意頁(yè)面的美觀性，他們多喜歡現(xiàn)代化的圖片與字體以及新潮的元素。而由于“飼養(yǎng)寵物”這一特點(diǎn)，養(yǎng)寵群體多富有愛(ài)心、有耐心也更加體貼。因此，寵物APP針對(duì)用戶(hù)的關(guān)鍵詞為年輕化與愛(ài)心。

2 現(xiàn)有APP分析

目前市場(chǎng)中有關(guān)寵物的APP以寵物社交軟件為主，APP內(nèi)主要內(nèi)容集中在寵物的數(shù)據(jù)記錄與視頻、照片的分享。用戶(hù)可以通過(guò)APP分享自己與寵物在一起的文字、圖片與視頻，記錄寵物的衣食住行、健康情況等，以此留存寵物成長(zhǎng)的數(shù)據(jù)，也可與他人一同分享養(yǎng)寵樂(lè)趣達(dá)到以寵會(huì)友的目的。

在視覺(jué)方面，大部分寵物APP的底部設(shè)有導(dǎo)航欄，以衣食住行、健康、購(gòu)物等分為幾大特色功能類(lèi)別。頁(yè)面的色彩設(shè)計(jì)以紅色、黃色、粉色等暖色調(diào)為主，與寵物帶給人“可愛(ài)”的意象與“家”的心理暗示。整個(gè)APP的logo多為寵物剪影，將寵物的主題直接在圖標(biāo)中呈現(xiàn)，而內(nèi)部的icon以扁平化為主，容易貼合各種風(fēng)格的界面。

優(yōu)點(diǎn)：

a.將購(gòu)物、交友等多項(xiàng)寵物相關(guān)功能進(jìn)行集成，滿(mǎn)足用戶(hù)各方面需求。

b.寵物社區(qū)的形式既利于用戶(hù)尋找伙伴又便于APP發(fā)展新用戶(hù)。

c.視頻、圖片等呈現(xiàn)形式多樣，有較強(qiáng)吸引力。

缺點(diǎn)：

a.功能過(guò)于繁雜，缺乏主次，用戶(hù)無(wú)法根據(jù)所需功能挑選針對(duì)APP。

b.Icon較為夸張，過(guò)于貼合寵物特征，缺乏現(xiàn)代感，不易吸引人。

c.字體過(guò)于古板或過(guò)于夸張，不適宜寵物主題或養(yǎng)寵人年輕、新潮的特點(diǎn)。

3 設(shè)計(jì)實(shí)踐

3.1 色彩

在顏色的設(shè)計(jì)上，筆者選擇了飽和度適中的橙色作為主色，顏色較為溫暖，在“熱情”的紅色和“溫柔”的黃色中取中，貼合了寵物帶給人“家”的感受。同時(shí)，橙色貼近很多寵物毛色，是“寵物”這一意象的代表色。在顏色的透明度方面，筆者選擇了100%、60%和30%三種不透明度的顏色組成色階，在不同場(chǎng)合下使用，以達(dá)到界面清晰、色彩調(diào)和的效果。

除了主色的橙色之外，筆者在界面中還運(yùn)用了高明度的藍(lán)色作為輔助色。橙色與藍(lán)色本為對(duì)比色，但在高明度的調(diào)節(jié)下對(duì)比減弱，使整個(gè)畫(huà)面較為清新跳脫，在溫柔之中有一絲可愛(ài)。

3.2 文字

在字體的使用上，筆者選用了蘋(píng)方字體，字體為無(wú)襯線(xiàn)體，拐角較為圓潤(rùn)，字體較為現(xiàn)代且溫柔雅致，不會(huì)為用戶(hù)帶來(lái)跳脫的感覺(jué)，和界面的主題風(fēng)格相合，可以構(gòu)成較為溫婉的界面。且蘋(píng)方字體可選擇的粗細(xì)種類(lèi)較多，可以適應(yīng)主標(biāo)題、副標(biāo)題、小標(biāo)題、正文等多個(gè)場(chǎng)景使用。

3.3 Icon

在icon的設(shè)計(jì)中，筆者采用了較為扁平化的設(shè)計(jì)，整體造型較為圓潤(rùn)大方，現(xiàn)代感強(qiáng)，較現(xiàn)有寵物APP更符合當(dāng)下年輕人的審美。在未被點(diǎn)擊時(shí)，icon為空心灰色線(xiàn)條，點(diǎn)擊后則為實(shí)心橙色標(biāo)記，可以很容易分清icon的點(diǎn)擊情況，主次清晰，美觀性強(qiáng)。

3.4 排布

在界面的排布上，筆者沿襲了現(xiàn)有APP在主界面下端設(shè)有導(dǎo)航欄的設(shè)計(jì)，這種設(shè)計(jì)可以既清晰又直觀地展示出APP的全部功能，又與先進(jìn)大多數(shù)APP邏輯相似，減輕了使用者學(xué)習(xí)的困難。

在導(dǎo)航欄的中心有一個(gè)較大的主圖標(biāo)，圖標(biāo)周?chē)胁灰?guī)則的橢圓形小圖標(biāo)輔助使用，小圖標(biāo)與大圖標(biāo)聯(lián)合組成一個(gè)爪子的形狀，既有趣又與寵物主題相契合，可以吸引寵物主人使用。

4 小結(jié)

寵物APP在設(shè)計(jì)中要遵循用戶(hù)年輕、有愛(ài)心的特征，也要吸取現(xiàn)有APP利用視頻、圖片交流的優(yōu)點(diǎn)，同時(shí)改進(jìn)其不適宜的視覺(jué)表現(xiàn)，這樣才能設(shè)計(jì)出符合現(xiàn)今市場(chǎng)與用戶(hù)需求的APP界面。