本文作者與我們分享了一個案例：女性用戶的照片編輯軟件，如何設(shè)計UI？享受?

照片是記錄生活的重要手段。在今天的智能手機中，手機中有多少張照片？關(guān)鍵時刻的這些照片是每個攝影師無法復(fù)制的珍貴時刻。正因為如此，許多用戶對攝影和照片的編輯和美化具有無與倫比的熱情。今天的項目是設(shè)計一個照片編輯應(yīng)用程序。

照片編輯中的APP用戶類別現(xiàn)在非常廣泛，但在總體比例中，年輕人是主流，年輕女性更有可能對其負責(zé)。在今天的設(shè)計案例中，Tubik Studio的UI設(shè)計師Tania Bashkatova和平面設(shè)計師Yaroslava Yatsuba負責(zé)。

任務(wù)簡報

移動UI編輯APP UI和UX設(shè)計。

預(yù)處理過程

考慮到用戶最大的觀眾是年齡在15到35歲之間的女性用戶，設(shè)計師將為這些用戶創(chuàng)建自拍和照片編輯應(yīng)用程序。目前，該應(yīng)用程序暫時命名為Cuteen，而Slogan將設(shè)置為“Meet the most beautiful”。你“。

在為這個APP設(shè)計UX時，它需要滿足其最基本的六個功能，并且它可以保證現(xiàn)代，年輕，女性化和有趣的UI風(fēng)格設(shè)計。此外，我們的團隊決定創(chuàng)建一組用于UI的自定義圖標，并結(jié)合相對明亮的配色方案。

在開始設(shè)計之前，設(shè)計師對用戶和市場進行了研究。在此階段收集的信息反映了用戶的期望，對產(chǎn)品設(shè)計非常有用。該團隊根據(jù)研究結(jié)果進行了頭腦風(fēng)暴，設(shè)計師在整個UX設(shè)計和風(fēng)格偏好中反映了她的核心設(shè)計理念。

用戶體驗設(shè)計

設(shè)計師的首要任務(wù)是以直觀的方式呈現(xiàn)所有功能，確保每個用戶都能輕松進行圖片編輯。為了提高此過程的效率，設(shè)計人員首先創(chuàng)建了一個線框來組織整個界面的信息架構(gòu)。線框?qū)⒖梢暬⒖焖倏梢暬聊坏牟季趾涂梢曉兀╅_發(fā)人員和客戶進行可視化。

Cuteen這個應(yīng)用程序包含6個基本功能，需要以最有效的方式呈現(xiàn)。設(shè)計師提供兩種不同的布局選項。在第一個場景中，包括頂部圓形橫幅和品牌名稱，設(shè)計師設(shè)計了幾個圖標和相機按鈕的布局變體。相機按鈕是最高優(yōu)先級的交互元素，它應(yīng)具有行為召喚的特征，因此它應(yīng)該與背景的其他元素具有足夠的對比度。

在此方案中，有三種方法可以布置UI組件。第一種是將相機按鈕與功能分開，而另外兩種嘗試使按鈕和功能區(qū)在視覺上相關(guān)。

第二個選項側(cè)重于功能的呈現(xiàn)。橫幅被刪除，圖標位于屏幕頂部，而作為CTA元素的相機按鈕位于中間。這種結(jié)構(gòu)允許用戶更多地關(guān)注，減少可能的干擾，并使導(dǎo)航更直觀。此外，設(shè)計師還添加了一系列信息，顯示最近的流行效果，讓用戶無需過濾即可查看最新和最流行的效果。

這兩種解決方案各有優(yōu)缺點，因此設(shè)計人員決定在UI設(shè)計階段比較兩種布局方案的優(yōu)缺點。

UI設(shè)計

UI設(shè)計的主要策略是創(chuàng)造一種時尚和有趣的風(fēng)格?？紤]到這個應(yīng)用程序主要面向年輕女性用戶，設(shè)計師決定使用具有漸變效果的明亮配色方案。諸如照片按鈕之類的CTA元素使用亮粉色。這種配色方案和漂亮的設(shè)計策略非常適合女性用戶的氣質(zhì)和喜好。

使用六種對比色渲染六種不同的功能圖標。通過這種方式，不同的功能與不同的顏色相關(guān)聯(lián)，因此用戶可以快速識別它們，而無需在熟悉應(yīng)用程序時閱讀圖標標簽。此外，為了使整個界面看起來更舒適和愉悅，設(shè)計師使用白色背景使整個布局更加視覺平衡。

經(jīng)過多次探索，設(shè)計師選擇了第二個選項，即沒有Banner的選項。然后，設(shè)計人員將上圖中的三個變體開發(fā)為默認UI解決方案。這種結(jié)構(gòu)使交互區(qū)域更清晰，更符合邏輯。此外，第二種解決方案內(nèi)置了許多不同的樣式供用戶選擇和隨意切換。在此版本的設(shè)計中，用戶的注意力將集中在自定義圖標上。

總而言之，Cuteen的UI界面看起來明亮而充滿活力，具有直觀的交互系統(tǒng)，原始信息流和自定義圖標集。

自定義圖標設(shè)計

原始自定義圖標是此應(yīng)用的亮點之一。對于參與該項目的平面設(shè)計師來說，這是一個有趣的挑戰(zhàn)。

為了節(jié)省時間，構(gòu)思和完成工作，設(shè)計師選擇了手繪草圖。設(shè)計師提供三種不同風(fēng)格的圖標，并為每種功能提供各種概念設(shè)計。

最終，在UI設(shè)計師決定使用第二個設(shè)計之后，圖形設(shè)計師將草圖重新繪制為數(shù)字圖標，渲染所有細節(jié)，并且自定義圖標增強了整個UI界面的可識別性。此外，這些自定義圖標還支持自定義樣式，這使整個設(shè)計看起來多樣化和免費。

設(shè)計師創(chuàng)造了兩種不同風(fēng)格的圖標，第一種設(shè)計與多彩風(fēng)格兼容，可以看起來更亮。筆劃的相對簡單的圖標可以與基本布局更兼容。圖標的邊緣設(shè)計為封閉，遵循格式塔原則，并在視覺上由人補充。這種設(shè)計使圖標看起來充滿活力和趣味。

總而言之，這些小細節(jié)使整個APP強大而實用，設(shè)計師應(yīng)該專注于每個UI組件，包括圖標和按鈕。

原作者: Tubik Studio

譯者/編輯:陳子木

翻譯地址：https://www.uisdc.com/case-study-cuteen-uiux-design

本文由@陳子木授權(quán)，未經(jīng)作者許可，禁止轉(zhuǎn)載。

該地圖來自Unsplash，基于CC0協(xié)議

« 沒有產(chǎn)生強烈“化學(xué)反應(yīng)”的物聯(lián)網(wǎng)行業(yè)缺乏什么？ | 精通英語，列出。創(chuàng)始人：上市不是結(jié)束，而是一個新的起點 »