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

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

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

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

《用戶體驗(yàn)要素》這本書提到：

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

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

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

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

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

「操」「縱」自如

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

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

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

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

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

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

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

相關(guān)閱讀

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

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

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