讓手勢(shì)設(shè)計(jì)帶你的產(chǎn)品體驗(yàn)“飛”……(二)

0 評(píng)論 10862 瀏覽 27 收藏 7 分鐘

前一篇《讓手勢(shì)設(shè)計(jì)帶你的產(chǎn)品體驗(yàn)“飛”……》我們總結(jié)了兩大類(lèi)比較常用的上下滑動(dòng)式動(dòng)畫(huà)交互,今天小Q接著介紹其他的幾類(lèi)手勢(shì)設(shè)計(jì)。

現(xiàn)如今的App設(shè)計(jì),真的就是集視覺(jué)、動(dòng)畫(huà)、交互和體驗(yàn)為一身的綜合體。除了交互設(shè)計(jì)本身,視覺(jué)設(shè)計(jì)的輔助也是能讓產(chǎn)品體驗(yàn)加分的一個(gè)重要因素。配色很漂亮,交互設(shè)計(jì)新穎,都可以在一定程度上激發(fā)我們的靈感。

對(duì)于善于發(fā)現(xiàn)驚喜和迷戀舒適度的用戶(hù)量來(lái)講,今后的產(chǎn)品設(shè)計(jì),一定是視覺(jué)和體驗(yàn)統(tǒng)一起來(lái)才能更好地占有市場(chǎng),設(shè)計(jì)才具備了商業(yè)價(jià)值。這也讓產(chǎn)品經(jīng)理感受到了新的挑戰(zhàn),理論不再占據(jù)所有的設(shè)計(jì)理念,真正用心大打磨的細(xì)節(jié),或者說(shuō)不再有細(xì)節(jié)問(wèn)題的產(chǎn)品,才會(huì)真的讓用戶(hù)喜愛(ài)?;ヂ?lián)網(wǎng)行業(yè),當(dāng)一個(gè)App設(shè)計(jì)出來(lái),沒(méi)有能力去吸引用戶(hù)或者留住用戶(hù),這個(gè)App的設(shè)計(jì)就是失敗的。

「運(yùn)」「用」自如

《用戶(hù)體驗(yàn)要素》這本書(shū)提到:

一個(gè)優(yōu)秀的設(shè)計(jì)師就是能夠?qū)⒔缑?、交互、體驗(yàn)融為一體去考慮,權(quán)衡布局、簡(jiǎn)化設(shè)計(jì)、清晰梳理判斷整體頁(yè)面結(jié)構(gòu)。

簡(jiǎn)單來(lái)說(shuō),產(chǎn)品體驗(yàn)是場(chǎng)景+用戶(hù)+任務(wù)過(guò)程產(chǎn)生的,牽扯到內(nèi)容、用戶(hù)界面、操作流程、功能設(shè)計(jì)、服務(wù)等多個(gè)方面的用戶(hù)使用感覺(jué)。

當(dāng)我們真的把“體驗(yàn)”這兩個(gè)字?jǐn)囁?,理解透徹了,運(yùn)用到產(chǎn)品本身才可能產(chǎn)生奇妙的化學(xué)反應(yīng)。

今天給大家舉兩個(gè)簡(jiǎn)單的案例:“QQ空間”和“去哪兒旅行”。這兩個(gè)App的首頁(yè)都用同一種交互體驗(yàn)+視覺(jué)表達(dá),把整個(gè)瀑布流的信息,通過(guò)頂部Bar的變色與手勢(shì)上下滑動(dòng)融會(huì)貫通。當(dāng)用戶(hù)的瀏覽區(qū)域色彩比較鮮明且多樣的時(shí)候,選擇白色作為Bar的底色,突出Bar的存在,讓用戶(hù)在滑動(dòng)瀏覽的過(guò)程中,不會(huì)丟失主要的目標(biāo)感和“軸”心,

相反,當(dāng)用戶(hù)的可視區(qū)域有大量的留白和邊界的時(shí)候,可以通過(guò)適當(dāng)?shù)淖兩蛘咄该鞫鹊奶幚恚岉敳緽ar的存在與內(nèi)容區(qū)分開(kāi)來(lái)。這樣的色彩運(yùn)用,就是完美的結(jié)合了交互體驗(yàn)與視覺(jué)體驗(yàn),讓用戶(hù)在彈指間的使用都顯得非常順滑而且自如。

變色

變色2

「操」「縱」自如

隨著產(chǎn)品差異化越來(lái)越小,人們對(duì)體驗(yàn)的要求也越來(lái)越高。除了變色以外,變形也是一種視覺(jué)+體驗(yàn)的創(chuàng)新。在不同的頂部區(qū)塊,產(chǎn)品設(shè)計(jì)需要表達(dá)給用戶(hù)的功能可以不同。那么,由于表達(dá)的不同,視覺(jué)設(shè)計(jì)也從單純的滿(mǎn)足產(chǎn)品需求上升到服務(wù)于用戶(hù)設(shè)計(jì)的高度,產(chǎn)品體驗(yàn)也更為廣闊的上升到創(chuàng)新體驗(yàn)。

譬如”天氣通”App,就把頂部居中的Title位置,結(jié)合操作界面的場(chǎng)景不同,做了功能的變化。當(dāng)用戶(hù)默認(rèn)進(jìn)入App時(shí),居中的Title位置有一個(gè)“+”引導(dǎo)用戶(hù)做城市的增減;當(dāng)用戶(hù)準(zhǔn)備向上滑動(dòng),查看更多信息時(shí),居中的Title位置就變成了一個(gè)展示天氣信息的信息欄,這個(gè)信息欄與底部的大面積天氣信息融為一體,從屬性上就會(huì)簡(jiǎn)化用戶(hù)的理解,同時(shí)這個(gè)小細(xì)節(jié)的把控讓用戶(hù)能感受到產(chǎn)品經(jīng)理的用心。

變色3

「應(yīng)」「付」自如

好的設(shè)計(jì)總是能帶來(lái)好的體驗(yàn),默默無(wú)聞地為用戶(hù)服務(wù)的!要做出好設(shè)計(jì),功能和視覺(jué)都要有,并且做到結(jié)合的唯一性才能走的更遠(yuǎn)。對(duì)于在使用你的產(chǎn)品的用戶(hù)身上,我們應(yīng)該細(xì)心的看到tm每一個(gè)階段的位移。如果你能猜透且能提前為用戶(hù)想到,那么用戶(hù)在使用你的產(chǎn)品時(shí)必然會(huì)更加賓至如歸。對(duì)于競(jìng)爭(zhēng)激烈的互聯(lián)網(wǎng)行業(yè),一款產(chǎn)品的誕生和發(fā)展,離不開(kāi)產(chǎn)品經(jīng)理的精心打磨,和費(fèi)心的思考。

“簡(jiǎn)書(shū)”就用最合理和近乎完美的體驗(yàn)。如下圖,我們可以看到,從1->2的切換,使用了顏色的漸變和處理,當(dāng)用戶(hù)把Banner區(qū)域全部滑動(dòng)至Bar的底部,離開(kāi)視覺(jué)區(qū)域后,右上角原本收起來(lái)的搜索框就自右向左的拉開(kāi)。整個(gè)拉伸的過(guò)程與用戶(hù)的向上滑動(dòng)形成一體,體驗(yàn)感非常好。

變色4

截至本文,小Q替大家細(xì)數(shù)了,利用上下的手勢(shì)滑動(dòng),優(yōu)化產(chǎn)品體驗(yàn)的案例。我們知道現(xiàn)如今,視覺(jué)與業(yè)務(wù)、交互、體驗(yàn)融為一體的設(shè)計(jì)趨勢(shì)也越來(lái)越深得人心。界面一旦被功能串起來(lái)變產(chǎn)生了交互,在交互的過(guò)程中也就產(chǎn)生了體驗(yàn)。

那么,對(duì)于一個(gè)好的產(chǎn)品經(jīng)理來(lái)講,除了業(yè)務(wù)方面的提升以外,在平時(shí)的工作中,不斷地加強(qiáng)視覺(jué)、交互、體驗(yàn)的綜合能力也是一個(gè)硬性素養(yǎng)咯,你說(shuō)是吧?

相關(guān)閱讀

《讓手勢(shì)設(shè)計(jì)帶你的產(chǎn)品體驗(yàn)“飛”……》

 

作者:Mandy權(quán),微信公眾號(hào):Q產(chǎn)品,一名快樂(lè)的產(chǎn)品經(jīng)理!

本文由 @Mandy權(quán) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!