您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設(shè)計(jì)教程 >> 設(shè)計(jì)理論 >> 瀏覽設(shè)計(jì)教程

一個(gè)針對(duì)女性用戶的照片編輯軟件,要如何設(shè)計(jì)UI?

照片是記錄生活的緊張手段,在智能手機(jī)如此普及的今天,誰的手機(jī)里面又沒有幾百上千張照片呢?這些記錄關(guān)鍵時(shí)刻的圖片,對(duì)于每個(gè)拍攝者而言都是不可復(fù)制的寶貴瞬間。也正是因此,很多用戶對(duì)于攝影和照片的編輯美化處理,都有著無與倫比的熱情。今天的項(xiàng)目,是設(shè)計(jì)一個(gè)照片編輯 APP。

如今照片編輯類的 APP 用戶受眾特別很是廣泛,但是在團(tuán)體比例當(dāng)中,年輕人是主體,而年輕女性在其中的占比更大。在今天的這個(gè)設(shè)計(jì)案例當(dāng)中,是由 Tubik Studio 的 UI 設(shè)計(jì)師 Tania Bashkatova 和平面設(shè)計(jì)師 Yaroslava Yatsuba 所負(fù)責(zé)的。

義務(wù)簡述

移動(dòng)端圖片編輯 APP 的 UI 和 UX 設(shè)計(jì)。

預(yù)處理流程

考慮到用戶最大的受眾是15~35歲之間的女性用戶,設(shè)計(jì)師將會(huì)針對(duì)這些用戶制作自拍和照片編輯 APP,目前這款 APP  臨時(shí)定名為 Cuteen,而 Slogan 則定為「遇見最鮮艷的你」。

在針對(duì)這個(gè) APP 進(jìn)行 UX 設(shè)計(jì)的時(shí)候,必要知足它最基本的六個(gè)特性,在風(fēng)格上能夠保證當(dāng)代化、年輕化、女性化、趣味化的 UI 設(shè)計(jì)。此外,我們團(tuán)隊(duì)還決定創(chuàng)建一組自定義圖標(biāo)用到 UI 當(dāng)中,并且結(jié)合相對(duì)美麗的配色方案。

在開始脫手設(shè)計(jì)之前,設(shè)計(jì)師針對(duì)用戶和市場進(jìn)行了調(diào)研。這個(gè)階段搜集的信息能夠反映出用戶的期待,對(duì)于產(chǎn)品的設(shè)計(jì)特別很是有效。團(tuán)隊(duì)基于研究成果進(jìn)行頭腦風(fēng)暴,設(shè)計(jì)師則將她的核心設(shè)計(jì)思想表現(xiàn)在整個(gè) UX 設(shè)計(jì)方案和風(fēng)格偏好上。

UX 設(shè)計(jì)

設(shè)計(jì)師的首要義務(wù)是將所有的功能以直觀的情勢顯現(xiàn)出來,確保每個(gè)用戶都能夠進(jìn)行便捷的圖片編輯。為了使這個(gè)過程的服從更高,設(shè)計(jì)師先創(chuàng)建了線框圖來整頓整個(gè)界面的信息架構(gòu)。線框圖將會(huì)將屏幕的布局和可視化的元素視覺化的、快速地呈現(xiàn)出來,讓開發(fā)者和客戶都可以直觀地了解。

Cuteen 這個(gè) APP 包含6個(gè)基本的功能,這些功能必要以最有用的體例呈現(xiàn)。設(shè)計(jì)師提供了兩種不同的布局方案。第一個(gè)方案當(dāng)中,包含了頂部的圓形 Banner 和品牌名稱,設(shè)計(jì)師設(shè)計(jì)了包含基本功能的圖標(biāo)和拍照按鈕的若干布局變種。其中拍照按鈕作為優(yōu)先級(jí)最高的交互元素,它應(yīng)該有舉動(dòng)召喚的特點(diǎn),所以它和背景其他元素應(yīng)該有著充足的對(duì)比。

這種方案中的 UI 組件的布局體例有三種,第一個(gè)是將拍照按鈕和功能區(qū)分開,而另外兩種方案則盡量讓這個(gè)按鈕和功能區(qū)之間在視覺上產(chǎn)生關(guān)聯(lián)。

第二個(gè)方案則專注于功能的展示。Banner 被刪除了,圖標(biāo)被放置在屏幕的頂端,作為 CTA 元素的拍照按鈕被置于中心。這種結(jié)構(gòu)讓用戶更能夠集中細(xì)致力,削減可能存在的干擾,并且讓導(dǎo)航更加直觀。此外,設(shè)計(jì)師還增長了一個(gè)表現(xiàn)最近流行結(jié)果的信息流,用戶可以無需篩選就能看到最新最流行的殊效。

這兩個(gè)方案各有優(yōu)劣,因此設(shè)計(jì)師決定在 UI 設(shè)計(jì)階段比較兩種布局方案的優(yōu)劣。

UI 設(shè)計(jì)

UI 設(shè)計(jì)的重要策略是創(chuàng)造時(shí)尚和富有娛樂性的風(fēng)格。考慮到這款應(yīng)用重要面對(duì)的是年輕的女性用戶,因此設(shè)計(jì)師決定采用通亮的配色方案搭配漸變的結(jié)果。而諸如拍照按鈕如許的 CTA 元素則使用通亮的粉紅色。如許的配色和鮮艷的設(shè)計(jì)策略,與女性用戶的氣質(zhì)和偏好特別很是契合。

至于六個(gè)不同功能的圖標(biāo)則使用六種對(duì)比色來呈現(xiàn)。通過這種體例,讓不同的功能和不同的色彩產(chǎn)生關(guān)聯(lián),如許一來,用戶在漸漸認(rèn)識(shí)應(yīng)用的過程中,可以在不用閱讀圖標(biāo)標(biāo)簽的前提下快速識(shí)別它們。此外,為了讓整個(gè)界面看起來更加舒適宜人,設(shè)計(jì)師使用了白色的背景,讓整個(gè)布局在視覺上更加平衡。

經(jīng)過多次的探索之后,設(shè)計(jì)師選擇了第二個(gè)方案,也就是沒有 Banner 的這個(gè)方案。隨后設(shè)計(jì)師還開發(fā)出了上圖中的三個(gè)變體,作為默認(rèn)的 UI 解決方案。這種結(jié)構(gòu)讓交互區(qū)域更為明晰,而且邏輯清晰。另外,第二個(gè)方案內(nèi)置了很多不同的風(fēng)格樣式供用戶選擇,隨意切換。在這個(gè)版本的設(shè)計(jì)當(dāng)中,用戶的細(xì)致力會(huì)集中在自定義的圖標(biāo)上。

總而言之,Cuteen 的 UI 界面看起來是通亮而充滿活力的,有著直觀的交互體系,原創(chuàng)的信息流和自定義的圖標(biāo)集。

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

原創(chuàng)的自定義圖標(biāo)是這個(gè) APP 的亮點(diǎn)之一。對(duì)于參與這個(gè)項(xiàng)目的平面設(shè)計(jì)師而言,是個(gè)風(fēng)趣的挑釁。

為了節(jié)省時(shí)間來構(gòu)思并完成作品,設(shè)計(jì)師選擇了手繪草圖。設(shè)計(jì)師提供了三套不同風(fēng)格的圖標(biāo),并且為每個(gè)功能提供了各種各樣的概念設(shè)計(jì)。

最終,UI 設(shè)計(jì)師決定使用第二個(gè)設(shè)計(jì)方案之后,平面設(shè)計(jì)師將草圖重新繪制為數(shù)字化的圖標(biāo),所有的細(xì)節(jié)都得到了呈現(xiàn),自定義圖標(biāo)提拔了整個(gè) UI 界面的可識(shí)別性。另外,這些自定義圖標(biāo)同樣支持自定義風(fēng)格,這也使得整個(gè)設(shè)計(jì)顯得多樣而自由。

設(shè)計(jì)師制作了兩種不同風(fēng)格的圖標(biāo),第一種的設(shè)計(jì)是為了兼容多彩的風(fēng)格,它可以看起來更加通亮。而筆觸相對(duì)簡約的圖標(biāo)則可以更好的兼容基本的布局。圖標(biāo)的邊緣被設(shè)計(jì)得不閉合,這遵循的是格式塔原理,人會(huì)在視覺上補(bǔ)全。如許的設(shè)計(jì)讓圖標(biāo)顯得充滿活力而風(fēng)趣。

總而言之,這些微小的細(xì)節(jié)會(huì)讓整個(gè) APP 顯得壯大而實(shí)用,設(shè)計(jì)人員應(yīng)該關(guān)注每一個(gè) UI 組件,包括圖標(biāo)和按鈕。


[教程作者:互聯(lián)網(wǎng)]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://pkvc.cn/tutorial/di4011.html
如何將品牌基因融入到產(chǎn)品設(shè)計(jì)中?這是高級(jí)設(shè)計(jì)師的方法! ... ... ...
反饋機(jī)制如許設(shè)計(jì),才能不讓用戶討厭
圖趣網(wǎng)微信
建議反饋
×