案例研究|一款A(yù)PP的UX & UI設(shè)計(jì)全過(guò)程

7 評(píng)論 13955 瀏覽 60 收藏 9 分鐘

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

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

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

今天就來(lái)給大家分享一款針對(duì)年輕人的修圖軟件的設(shè)計(jì)過(guò)程。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為:

“遇見(jiàn)最美的自己”。

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

在創(chuàng)新流程開(kāi)始之前,設(shè)計(jì)師們首先進(jìn)行了市場(chǎng)和用戶調(diào)研。這個(gè)過(guò)程能收集核心信息,從而創(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è)過(guò)程更有效率,設(shè)計(jì)者創(chuàng)建了線框圖來(lái)展示信息構(gòu)架的未來(lái)布局,線框圖是最簡(jiǎn)單最快速可視化展示APP屏幕和跳轉(zhuǎn)原理的方式,線框圖能夠幫助開(kāi)發(fā)者和客戶清晰地理解APP的布局框架。

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

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

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

該方案顯示了三種UI組件放置方式,第一種,“相機(jī)”按鈕與其他功能是分開(kāi)展示的;后兩種不一樣,“相機(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í)尚和娛樂(lè)視覺(jué)風(fēng)格的結(jié)合,考慮到該APP面向年輕女性用戶,設(shè)計(jì)師決定使用明亮的色彩創(chuàng)建UI組件以及漸變效果。用于CTA按鈕和一些其他UI組件的中心顏色為粉紅色,粉色與與美麗,敏感和年輕女性氣質(zhì)密切相關(guān),所以如果目標(biāo)是年輕女性的話,粉色是個(gè)好選擇。

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

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

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

總而言之,CuteenAPP的用戶界面看起來(lái)明亮且充滿活力,并且擁有簡(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ā)揮想象力,插圖畫(huà)家開(kāi)始用手繪草圖。設(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)格多彩,看起來(lái)非常明亮;
  • 簡(jiǎn)約的圖標(biāo)用于基本布局款。

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

閉合適用于物體不完整,但用戶通過(guò)填充缺失部分將其視為完整形狀的情況,該技術(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)和按鈕。

 

作者:Tubik Studio

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

翻譯:熊小熊,微信公眾號(hào):集創(chuàng)堂

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

題圖來(lái)自 unsplash,基于 CC0 協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 我的微信號(hào):cisiyuan2014

    來(lái)自上海 回復(fù)
  2. 能轉(zhuǎn)載微信公眾號(hào)嗎

    回復(fù)
    1. 什么名稱,我給你開(kāi)白名單~

      來(lái)自上海 回復(fù)
    2. UI小設(shè)計(jì)的日常

      回復(fù)
    3. 不好意思才看到 已經(jīng)開(kāi)了白名單

      來(lái)自上海 回復(fù)
  3. 漂亮 我喜歡

    來(lái)自廣東 回復(fù)
    1. 謝謝 ??

      來(lái)自上海 回復(fù)