照片是記錄生活的方式之一，使用智能手機(jī)的人們可以拍成千上萬張照片，再也不用擔(dān)心錯(cuò)失美好瞬間了。手機(jī)APP為人們的攝影愛好提供了支持，提供諸如圖像編輯等各種功能。如今，修圖的需求是很高的，這也是為什么很多設(shè)計(jì)師都會(huì)接觸到這類項(xiàng)目的原因。

修圖APP的主要用戶群體就是年輕人，很多女孩都喜歡自拍并且通過特殊的效果和組件美化自拍照。

今天就來給大家分享一款針對(duì)年輕人的修圖軟件的設(shè)計(jì)過程。UI設(shè)計(jì)師Tania Bashkatova和平面設(shè)計(jì)師Yaroslava Yatsuba是這次任務(wù)的主要執(zhí)行人員。

任務(wù)

一款修圖APP的UI和UX設(shè)計(jì)。

流程

設(shè)計(jì)師接到的任務(wù)是為一款可以一鍵自拍、修圖的APP做UI、UX設(shè)計(jì)，APP名為Cuteen，針對(duì)15-35歲的女性群體，slogan為：

“遇見最美的自己”。

主要任務(wù)是為該APP的六個(gè)基本功能創(chuàng)建智能化的用戶體驗(yàn)，并進(jìn)行現(xiàn)代化、年輕化、女性化和趣味化的UI設(shè)計(jì)。此外，我們的團(tuán)隊(duì)決定創(chuàng)建一組自定義圖標(biāo)并在用戶界面中使用鮮艷的是色彩。

在創(chuàng)新流程開始之前，設(shè)計(jì)師們首先進(jìn)行了市場(chǎng)和用戶調(diào)研。這個(gè)過程能收集核心信息，從而創(chuàng)造出符合用戶期望的產(chǎn)品。

基于調(diào)研結(jié)果和頭腦風(fēng)暴，設(shè)計(jì)師的思想體現(xiàn)在基本的UX解決方案和風(fēng)格偏好上。

UX設(shè)計(jì)

之前的設(shè)計(jì)師的任務(wù)是以一種每個(gè)人都可以直觀地進(jìn)行編輯的方式組織和呈現(xiàn)所有功能。

為了使這個(gè)過程更有效率，設(shè)計(jì)者創(chuàng)建了線框圖來展示信息構(gòu)架的未來布局，線框圖是最簡(jiǎn)單最快速可視化展示APP屏幕和跳轉(zhuǎn)原理的方式，線框圖能夠幫助開發(fā)者和客戶清晰地理解APP的布局框架。

Cuteen APP需要得到有效展示的基本功能有六項(xiàng)，設(shè)計(jì)師們提供了兩種布局方案：

第一個(gè)包含屏幕頂部的圓形橫幅和品牌名稱，設(shè)計(jì)師設(shè)計(jì)了幾種基本功能圖標(biāo)以及CTA 照片按鈕的放置方式。

CTA按鈕必須顯眼，這樣用戶才會(huì)將其視為界面的主要交互元素。

該方案顯示了三種UI組件放置方式，第一種，“相機(jī)”按鈕與其他功能是分開展示的；后兩種不一樣，“相機(jī)”按鈕與其他功能是連接在一起的。

第二種方案的重點(diǎn)是功能展示，頂部橫幅被移除了，圖標(biāo)放置在屏幕的頂端，CTA按鈕放在中間的位置。

這種結(jié)構(gòu)使用戶能夠集中注意力，減少所有可能的干擾并使導(dǎo)航更直觀。此外，設(shè)計(jì)師還制作了一個(gè)顯示最近流行效果的原始Feed，用戶可以一鍵應(yīng)用最佳功能。

這兩個(gè)方案都有它們的優(yōu)點(diǎn)和好處，因此設(shè)計(jì)人員決定在UI設(shè)計(jì)階段再?zèng)Q定到底選用哪一種。

UI設(shè)計(jì)

UI設(shè)計(jì)的主要方法包括時(shí)尚和娛樂視覺風(fēng)格的結(jié)合，考慮到該APP面向年輕女性用戶，設(shè)計(jì)師決定使用明亮的色彩創(chuàng)建UI組件以及漸變效果。用于CTA按鈕和一些其他UI組件的中心顏色為粉紅色，粉色與與美麗，敏感和年輕女性氣質(zhì)密切相關(guān)，所以如果目標(biāo)是年輕女性的話，粉色是個(gè)好選擇。

六個(gè)功能圖標(biāo)使用了六種對(duì)比色，這樣一來每一種顏色都代表了一種特定的功能，用戶即使不去看圖標(biāo)下面的文字說明也能迅速明白每個(gè)圖標(biāo)是干嘛的。

此外，為了讓整個(gè)用戶界面看起來溫和愉悅，設(shè)計(jì)師使用白色背景將平衡帶入視覺構(gòu)圖。我們來看看一些效果圖：

經(jīng)過多次創(chuàng)造性探索之后，設(shè)計(jì)師選擇了上圖中沒有橫幅的第三種設(shè)計(jì)方案。在這種結(jié)構(gòu)中，交互區(qū)域非常明顯并且在邏輯上與其他區(qū)域是分離的。另外，第二個(gè)版本作為附加選項(xiàng)提供，用戶可以隨時(shí)隨地切換。在第二種版本的布局中，用戶注意力會(huì)集中在自定義圖標(biāo)上。

總而言之，CuteenAPP的用戶界面看起來明亮且充滿活力，并且擁有簡(jiǎn)單的交互系統(tǒng)、原始Feed和自定義圖標(biāo)集。

自定義圖標(biāo)設(shè)計(jì)

主要目的是設(shè)計(jì)一套原創(chuàng)圖標(biāo)，讓這款產(chǎn)品在競(jìng)爭(zhēng)對(duì)手中脫穎而出，平面設(shè)計(jì)師接受了這項(xiàng)有趣的挑戰(zhàn)。

為了節(jié)省時(shí)間并且充分發(fā)揮想象力，插圖畫家開始用手繪草圖。設(shè)計(jì)師提供了三套不同風(fēng)格的圖標(biāo)，并為每個(gè)功能提供了各種概念。下面是草圖：

設(shè)計(jì)師選擇了下圖中的第二種方案，手繪草圖轉(zhuǎn)換成了電子版的，所有的細(xì)節(jié)都得到了解決。自定義圖標(biāo)是APP可識(shí)別性的有效組成部分，而且，他們支持界面中基本文體解決方案的一致性。

設(shè)計(jì)師制作了兩種圖標(biāo)——完整的和簡(jiǎn)約的：

• 完整的圖標(biāo)使布局風(fēng)格多彩，看起來非常明亮；
• 簡(jiǎn)約的圖標(biāo)用于基本布局款。

使用閉合技術(shù)，設(shè)計(jì)師可以使圖標(biāo)看起來充滿活力，從而可以感受到凍結(jié)運(yùn)動(dòng)的感覺，這種技術(shù)是基于人眼傾向于看閉合形狀。

閉合適用于物體不完整，但用戶通過填充缺失部分將其視為完整形狀的情況，該技術(shù)與我們?cè)谠O(shè)計(jì)心理學(xué)中描述的格式塔原理相關(guān)。

總結(jié)一下，最小的細(xì)節(jié)往往決定著APP的設(shè)計(jì)是否強(qiáng)大，因此設(shè)計(jì)師應(yīng)該關(guān)注所有UI組件，包括圖標(biāo)和按鈕。