修圖APP如今非常受歡迎，本文作者這次就來給大家分享一款針對年輕人的修圖軟件的設(shè)計過程。

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

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

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

任務(wù)

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

流程

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

“遇見最美的自己”。

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

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

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

UX設(shè)計

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

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

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

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

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

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

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

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

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

UI設(shè)計

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

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

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

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

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

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

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

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

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

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

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

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

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

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

作者：Tubik Studio

原文鏈接：https://uxplanet.org/case-study-cuteen-ui-and-ux-design-for-a-mobile-photo-editor-16bca220a8d0

翻譯：熊小熊，微信公眾號：集創(chuàng)堂

本文由 @熊小熊 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 unsplash，基于 CC0 協(xié)議