UI設(shè)計(jì)師:教你以問(wèn)答形式“來(lái)“把玩”APP
作為APP狂熱分子,定期去App Store或者其他渠道找新鮮的產(chǎn)品來(lái)玩兒,已經(jīng)持續(xù)了很多年。但是光浮于表面的玩兒,還不夠。因?yàn)橹挥辛私猱a(chǎn)品背后的邏輯才能更全面的解讀為何會(huì)那么設(shè)計(jì)。
下面分享下我通過(guò)自問(wèn)自答的方式分析APP的方法,希望對(duì)你有幫助。
一、產(chǎn)品層面
分析一款app,首先從產(chǎn)品層面入手,因?yàn)楫a(chǎn)品定位決定著后續(xù)的交互設(shè)計(jì)、視覺(jué)設(shè)計(jì)、運(yùn)營(yíng)策略等等。通常可以從三個(gè)維度來(lái)分析產(chǎn)品定位:
1、干什么的(核心需求)
首先問(wèn)自己它是干什么用的,解決了用戶(hù)哪個(gè)痛點(diǎn)。嘗試對(duì)產(chǎn)品有綜合性和概括性的理解,然后用一句話(huà)來(lái)描述它。好的產(chǎn)品基本都可以用一句話(huà)講清楚。
2、給誰(shuí)用的(用戶(hù)群體)
只有充分了解用戶(hù)屬性,才能分析一款產(chǎn)品有沒(méi)有做出符合目標(biāo)用戶(hù)群體的設(shè)計(jì)。
下面是荔枝FM,用戶(hù)群體以文藝小清新,90后為主。因此,它在內(nèi)容層面:以清新,治愈型情感話(huà)題為主;視覺(jué)層面:更加文藝,清新,個(gè)性化;交互形式:更有趣味性。
同為音頻產(chǎn)品的喜馬拉雅,用戶(hù)年齡段區(qū)間比較廣。因此,內(nèi)容層面:大而全,包含PGC+UGC,目標(biāo)是打造聲音旗艦;交互和視覺(jué)層面:更普適性,中規(guī)中矩,不愿被風(fēng)格化。
因?yàn)檫@樣更能夠被大眾所接受。
所以,當(dāng)你在吐槽一個(gè)產(chǎn)品的設(shè)計(jì)不夠有逼格的時(shí)候,也要思考下,是否因?yàn)樗麄兊挠脩?hù)群體不適合那么做。就好比你把“快手”的設(shè)計(jì)搞的很“”instagram”,反而會(huì)讓用戶(hù)有距離感,會(huì)感覺(jué)產(chǎn)品不是服務(wù)于他們的,而流失。
3、什么時(shí)候用的(使用場(chǎng)景)
一個(gè)好的產(chǎn)品,會(huì)更多的從用戶(hù)的實(shí)際使用角度去出發(fā),將各種場(chǎng)景元素綜合起來(lái),在合適的場(chǎng)景滿(mǎn)足用戶(hù)的需求,提供良好的體驗(yàn)。
使用場(chǎng)景可以分兩個(gè)維度:時(shí)間和地點(diǎn)。
(1)時(shí)間
是否考慮用戶(hù)在什么時(shí)候會(huì)使用自己的產(chǎn)品,白天、晚上、下班的路上,還是晚上睡覺(jué)前。針對(duì)用戶(hù)時(shí)間來(lái)做設(shè)計(jì)的最普遍的例子就是夜間模式和自動(dòng)調(diào)節(jié)亮度的功能,在不同的時(shí)間段(光照強(qiáng)度),針對(duì)產(chǎn)品做出相應(yīng)的設(shè)計(jì),以得到最優(yōu)的用戶(hù)體驗(yàn);
(2)地點(diǎn)
用戶(hù)在不同地點(diǎn)會(huì)產(chǎn)生不同的需求,同時(shí),同樣的產(chǎn)品,在不同的地點(diǎn)帶給用戶(hù)的體驗(yàn)也是不一樣的,比如新聞資訊類(lèi)產(chǎn)品,用戶(hù)使用高峰期是早上上班路上,那么就要考慮用戶(hù)在公交或地鐵上的場(chǎng)景,當(dāng)它一手扶把手一手拿手機(jī),在大屏幕手機(jī)單手持握的狀態(tài)下,是不是可以用更多“滑動(dòng)”操作代替“點(diǎn)擊”。
二、交互層面
1、好找嗎(交互框架)
好找,指的是交互的框架布局是否合理和流暢,能否讓用戶(hù)在合適的場(chǎng)景快速找到解決問(wèn)題的辦法。
比如,抖音app,用戶(hù)來(lái)這主要就兩件事:
- 看別人的視頻
- 自己錄視頻
它在首屏就滿(mǎn)足了這兩個(gè)核心需求:
- 首頁(yè)默認(rèn)“推薦”的視頻自動(dòng)播放,滿(mǎn)足觀(guān)看視頻的用戶(hù)需求;
- 頁(yè)面底部中間的“加號(hào)”就是拍攝的入口,滿(mǎn)足錄制視頻的需求。
2、好用嗎(體驗(yàn)&反饋)
好用,指的是解決問(wèn)題是否高效,反饋是否符合用戶(hù)預(yù)期。同樣可以幫助用戶(hù)解決問(wèn)題, 肯定效率越高,用戶(hù)越愿意用。
還拿抖音舉例,如下圖:
- 圖1,上下滑動(dòng)切換視頻(高效),屏幕右側(cè)是互動(dòng)相關(guān)功能(方便單手操作)。
- 圖2,評(píng)論頁(yè)面,半屏展示而非全屏跳轉(zhuǎn)(更沉浸),避免打擾用戶(hù)觀(guān)看視頻。
- 圖3,當(dāng)你在看別人有趣視頻的場(chǎng)景下,想自己嘗試錄制,點(diǎn)擊圖1(標(biāo)注2),音樂(lè)封面,進(jìn)入圖3,可看更多達(dá)人錄制的同一音頻的視頻,同時(shí)點(diǎn)擊底部“使用”可快速進(jìn)入錄制頁(yè)面。
整個(gè)體驗(yàn)非常流暢、高效。一條龍的滿(mǎn)足你的“看”和“拍”的需求。(不過(guò)他們也是參考國(guó)外的musical.ly,有興趣的可以下載玩兒一下。)
再比如,instagram 里“關(guān)注”tab下的消息列表(圖1),如果你想更多了解給你點(diǎn)贊或者關(guān)注你的人的信息,除了點(diǎn)擊頭像進(jìn)入他的個(gè)人頁(yè)面以外,也可長(zhǎng)按列表,隨之彈出用戶(hù)的基本信息以及近期照片(圖2)??梢詼p少盲目跳轉(zhuǎn)頁(yè)面的成本,提升用戶(hù)操作效率。
3、有趣嗎
當(dāng)一個(gè)產(chǎn)品,在滿(mǎn)足了交互框架合理,且易用的情況下,那么在小的交互細(xì)節(jié)給一些有趣的彩蛋,會(huì)更吸引用戶(hù)。
比如,QQ會(huì)員中心里上拉刷新的小企鵝,會(huì)隨著你的手勢(shì)張嘴閉嘴(我不會(huì)告訴你我剛發(fā)現(xiàn)的時(shí)候上下上下的拉了好幾分鐘 )。
還有Snapchat里下拉刷新時(shí),上面的小人兒會(huì)吐著彩虹飛上去,背景顏色也會(huì)隨著變化(截了10幾張圖都沒(méi)截到有彩虹的 放棄了 你們自己去看吧)。
而且在未來(lái),“有趣”將占一個(gè)產(chǎn)品越來(lái)越大的比重,之前張小龍也說(shuō)過(guò):“有趣>功能>交互>界面”。所以,讓用戶(hù)用著開(kāi)心并樂(lè)于傳播很重要。
三、視覺(jué)層面
1、合適嗎(風(fēng)格定位)
好的視覺(jué)設(shè)計(jì),不是好不好看,而是符不符合自己的產(chǎn)品定位和目標(biāo)用戶(hù)特征的。就像不同職業(yè)、不同性格的人,穿衣風(fēng)格也不同。
(比如,碼農(nóng)在我們印象中是穿格子襯衣,背著雙肩包。但是,如果你看到一個(gè)紋著大花臂,扎著小臟辮,牛仔褲掉的露半個(gè)屁股的男生在拍代碼的一定會(huì)打亂你心中的秩序。)
舉個(gè)視覺(jué)風(fēng)格定位比較優(yōu)秀的例子,same,它是一款針對(duì)95后的,去中心化,興趣社交平臺(tái)。有豆瓣,貼吧,微博的一點(diǎn)影子,但是這些影子并沒(méi)有影響它成為一個(gè)有自己個(gè)性的產(chǎn)品。(最后一張圖是我在“證件照拍起來(lái)呀呼”頻道里 哈哈哈哈 也是夠了)
整體色調(diào)以藍(lán)、白為主,簡(jiǎn)潔輕快;icon也非常有趣味性,像藍(lán)色圓珠筆隨意繪制的感覺(jué),營(yíng)造輕松的氛圍。
2、擴(kuò)展性強(qiáng)嗎(品牌DNA)
視覺(jué)設(shè)計(jì)不僅局限在界面設(shè)計(jì),同時(shí)也能考慮核心元素在各個(gè)環(huán)節(jié)拓展性,給用戶(hù)傳遞整體的品牌理念(類(lèi)似平面設(shè)計(jì)里的VI設(shè)計(jì))。
比如藍(lán)色same小人兒,根據(jù)不同的頻道拓展不同的icon。
引導(dǎo)頁(yè)面設(shè)計(jì)風(fēng)格也跟界面ui和icon相呼應(yīng)的,加深用戶(hù)對(duì)品牌形象的認(rèn)知。
包括它們的運(yùn)營(yíng)設(shè)計(jì),也是以主形象“same小人兒”為演變對(duì)象,雖然沒(méi)有固執(zhí)統(tǒng)一成藍(lán)色線(xiàn)條,但不管運(yùn)用到哪里,一眼就能分辨出這是same的東西。
3、細(xì)節(jié)到位嗎(品質(zhì)感)
細(xì)節(jié)能夠體現(xiàn)一個(gè)產(chǎn)品的品質(zhì)感和情懷。因此,在體驗(yàn)一個(gè)APP的時(shí)候,模塊與模塊的間距、icon的處理、字體的運(yùn)用、按鈕圓角大小的考究,等等… ?同樣值得我們?nèi)プ屑?xì)分析和探索的。
下面這個(gè)APP叫Noodler,面條控必備。插畫(huà)風(fēng)格特別精良貌美,北歐風(fēng)格的面條圖鑒,細(xì)節(jié)處理的非常好。
總的來(lái)說(shuō),好的設(shè)計(jì)不單單是icon多么精美、界面樣式多么流行、配色多么好看。而是能夠做出符合自己產(chǎn)品氣質(zhì),且區(qū)別于競(jìng)品;讓人一下記住,且?guī)椭脩?hù)對(duì)品牌有正面認(rèn)知的作品。
總結(jié)
以上是我平常以問(wèn)答形式玩兒APP的方法,當(dāng)然也可以更加深入的去分析一個(gè)產(chǎn)品的戰(zhàn)略方向,商業(yè)策略等等…(看自己的能力和需求)。這樣做能夠讓你了解行業(yè)趨勢(shì)、提升產(chǎn)品思維、學(xué)習(xí)新的交互形式和視覺(jué)呈現(xiàn),對(duì)我們?nèi)粘9ぷ鲿?huì)有很大幫助。
總的來(lái)說(shuō),保持對(duì)新鮮事物的好奇心,并嘗試深入探究,這是身為設(shè)計(jì)師的你最應(yīng)該做的。
作者:@蘇大牙牙牙
來(lái)源:大牙的設(shè)計(jì)筆記
本文由 @蘇大牙?授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。
目前在學(xué)習(xí)中,這篇文章以新穎的問(wèn)答形式,明確的邏輯思路,從淺入深的介紹了APP中好的UI設(shè)計(jì)具備的特質(zhì),非常喜歡,手動(dòng)點(diǎn)贊~
非常有用~謝謝大佬分享~
有點(diǎn)用!