不知各位產(chǎn)品經(jīng)理、UE/UI設(shè)計(jì)師在設(shè)計(jì)產(chǎn)品時(shí)，除了考慮交互說(shuō)明、功能狀態(tài)、頁(yè)面邏輯等之外，是否會(huì)關(guān)注 頁(yè)面跳轉(zhuǎn)間的“轉(zhuǎn)場(chǎng)效果”？？？

可能有人會(huì)覺(jué)得：“不就普通的界面左移和右移，需要講這個(gè)嗎？”  但是如果我問(wèn)：“為什么要有頁(yè)面轉(zhuǎn)場(chǎng)？有哪些轉(zhuǎn)場(chǎng)類型？要注意哪些細(xì)節(jié)？” 你能一五一十地回答出來(lái)么？

畢竟頁(yè)面間的轉(zhuǎn)場(chǎng)過(guò)渡，是用戶體驗(yàn)我們產(chǎn)品最直接的感知形式，也是人機(jī)交互中最重要的傳達(dá)要素。另外市面上還沒(méi)有系統(tǒng)性介紹'頁(yè)面轉(zhuǎn)場(chǎng)'的文章，所以今天就寫(xiě)下這方面的干貨，希望能給你帶來(lái)一些收獲。

Part1：頁(yè)面轉(zhuǎn)場(chǎng)的作用

頁(yè)面轉(zhuǎn)場(chǎng)最基礎(chǔ)的作用，無(wú)疑是拉通頁(yè)面與頁(yè)面間的使用流程，使產(chǎn)品的信息內(nèi)容、功能交互等有一個(gè)承接點(diǎn)。但除了這個(gè)打底作用外，頁(yè)面轉(zhuǎn)場(chǎng)還可以體現(xiàn)出多個(gè)方面的作用：

1.加深用戶印象

一些新奇獨(dú)特、區(qū)別于競(jìng)品的轉(zhuǎn)場(chǎng)效果，完全可以加深用戶對(duì)自己產(chǎn)品的印象，留下特定的產(chǎn)品記憶點(diǎn)。如《紅板報(bào)》的‘折頁(yè)’效果就很讓人記憶尤新，進(jìn)一步提升了產(chǎn)品的競(jìng)爭(zhēng)力。

2.更有儀式感、增加代入感

就如《每日故宮》在查看文物時(shí)，會(huì)緩慢放大封面、退出局部元素。營(yíng)造一種‘神秘感、即將探索’的氛圍，很符合該產(chǎn)品獨(dú)有的特色。另外一些日志產(chǎn)品，會(huì)利用“翻書(shū)”的轉(zhuǎn)場(chǎng)效果來(lái)加強(qiáng)用戶的代入感、趣味性。

3.突出重點(diǎn)用戶

產(chǎn)品里的重點(diǎn)用戶（如vip用戶、平臺(tái)作家）都是需要特別照顧的對(duì)象。界面設(shè)計(jì)時(shí)除了在背景色、視覺(jué)元素不同于普通用戶外，特殊的頁(yè)面轉(zhuǎn)場(chǎng)也能給帶來(lái)一種‘專門定制’的感知。

像《人人都是產(chǎn)品經(jīng)理》APP，在打開(kāi)普通頁(yè)面和專欄作家的文章時(shí)，前者是普通的‘左移’，后者則‘上下開(kāi)啟’，給讀者一種‘開(kāi)啟知識(shí)寶庫(kù)’的進(jìn)場(chǎng)感受。

Part2：頁(yè)面轉(zhuǎn)場(chǎng)類型

說(shuō)完頁(yè)面轉(zhuǎn)場(chǎng)的作用后，下面就是你可能感興趣的內(nèi)容：頁(yè)面轉(zhuǎn)場(chǎng)到底有哪些類型？（以移動(dòng)端頁(yè)面轉(zhuǎn)場(chǎng)為例，PC端亦可復(fù)用該類型）

1.翻書(shū)/頁(yè)、折疊

翻書(shū)/頁(yè)：指模仿現(xiàn)實(shí)生活中書(shū)本和紙張的切換效果，是一種擬物化的轉(zhuǎn)場(chǎng)方式。常用于雜志、小說(shuō)、日記等產(chǎn)品中。

折疊：根據(jù)水平或者垂直線為中心點(diǎn)，將頁(yè)面的另一部分進(jìn)行翻折。適合各種帶有“日歷”功能的轉(zhuǎn)場(chǎng)。

2.3D翻轉(zhuǎn)、立體旋轉(zhuǎn)

3D翻轉(zhuǎn)：將二維的頁(yè)面以3D形式（類似魔方）進(jìn)行切換。適合體現(xiàn)產(chǎn)品功能的“空間感”。

立體旋轉(zhuǎn)：根據(jù)水平或者垂直線為中心點(diǎn)，將整個(gè)頁(yè)面進(jìn)行立體旋轉(zhuǎn)。適合體現(xiàn)另一個(gè)“頁(yè)面空間”的效果，用于容納更多的信息內(nèi)容。

3.拉伸、上下合并

拉伸：根據(jù)水平或者垂直線為中心點(diǎn)，將頁(yè)面進(jìn)行拉長(zhǎng)消失處理，可分為’內(nèi)拉‘與’外拉‘兩種方式。

上下合并：將即將進(jìn)場(chǎng)的頁(yè)面分為上下兩部分進(jìn)場(chǎng)，使頁(yè)面更有層次感。適合給用戶營(yíng)造一種“打開(kāi)新世界/新天地”的交互認(rèn)知。

4.扭曲、頁(yè)面融合

扭曲：根據(jù)水平或者垂直線為中心點(diǎn)，將整個(gè)頁(yè)面進(jìn)行旋轉(zhuǎn)、壓縮等處理，適合給用戶傳達(dá)一種’異次元、空間傳送‘的效果。

頁(yè)面融合：根據(jù)頁(yè)面的某個(gè)視覺(jué)元素，通過(guò)變形、變色、縮放、位移等方式過(guò)渡到另外一個(gè)頁(yè)面中去。這種轉(zhuǎn)場(chǎng)是最能體現(xiàn)兩個(gè)頁(yè)面之間的‘關(guān)聯(lián)性’，也是過(guò)渡效果最和諧的方式之一。

5.彈出、縮放

彈出：根據(jù)頁(yè)面的某個(gè)視覺(jué)元素，將其彈入到下一個(gè)頁(yè)面中去。適合突出某視覺(jué)元素，將其重點(diǎn)彈出展示。

縮放：將整個(gè)頁(yè)面自大而小或者自小而大進(jìn)行縮放過(guò)渡，很適合大封面的轉(zhuǎn)場(chǎng)。

6.移入、淡化

這是我們最常見(jiàn)、最普通的轉(zhuǎn)場(chǎng)方式了，大部分的產(chǎn)品使用這兩種轉(zhuǎn)場(chǎng)方式。移入有’上下左右‘4個(gè)進(jìn)入方向，而一直使用’左移進(jìn)入、右移退出‘的轉(zhuǎn)場(chǎng)，最能體現(xiàn)產(chǎn)品功能的使用流程。

Part3：轉(zhuǎn)場(chǎng)時(shí)應(yīng)該考慮的細(xì)節(jié)

各種效果只是提供一種選擇而已，根據(jù)自己的產(chǎn)品特性、想要傳達(dá)的交互理念等選擇合適的方式即可。而在一些轉(zhuǎn)場(chǎng)過(guò)程中的細(xì)節(jié)點(diǎn)，是交互設(shè)計(jì)師不能忽略的事項(xiàng)。

1.頁(yè)面間的關(guān)聯(lián)性

頁(yè)面之間都是通過(guò)’入口信息‘和’頁(yè)面標(biāo)題‘建立關(guān)聯(lián)的，為了增加用戶轉(zhuǎn)場(chǎng)后的代入感、避免產(chǎn)生認(rèn)知錯(cuò)誤（覺(jué)得進(jìn)錯(cuò)頁(yè)面），可以考慮用相同的背景色、視覺(jué)元素等加強(qiáng)頁(yè)面間的關(guān)聯(lián)。

比如之前QQ游戲中心，將前頁(yè)的背景圖沿用到后頁(yè)中，讓后頁(yè)的游戲描述更有代入感，用戶第一時(shí)間就覺(jué)得'來(lái)對(duì)地方了～'

2.進(jìn)退方向

頁(yè)面的進(jìn)入和退出盡量是成反方向的，即頁(yè)面從右加載邊移入，退出時(shí)則從左邊移出。否則混亂無(wú)序地進(jìn)退方向，會(huì)使用戶的操作流和視覺(jué)流感到不適。

3.返回邏輯的不同

用戶習(xí)以為常的頁(yè)面返回習(xí)慣，一是點(diǎn)擊左上角‘返回/關(guān)閉’圖標(biāo)、二是屏幕扣邊（叫法不同，即按住屏幕最左邊位置向右滑到，iOS與Android均可實(shí)現(xiàn)該方式）。因“返回/關(guān)閉”圖標(biāo)在視覺(jué)上帶有明確的指向性，用戶知道點(diǎn)擊后到底是“返回”還是“關(guān)閉”。

但不同頁(yè)面類型的屏幕摳邊，對(duì)應(yīng)的含義和邏輯卻是各不相同的：

原生頁(yè)面：屏幕摳邊是返回上一級(jí)頁(yè)面

就如朋友朋友圈一樣，原生頁(yè)面在屏幕摳邊后是可以回到退出前的頁(yè)面位置、狀態(tài)，亦可以重新加載頁(yè)面。

H5頁(yè)面：屏幕摳邊是關(guān)閉整個(gè)鏈接

無(wú)論在H5里操作了多少內(nèi)容/頁(yè)面，屏幕摳邊都會(huì)關(guān)閉整個(gè)H5鏈接，再次進(jìn)入時(shí)只能重新加載頁(yè)面，操作記錄都會(huì)被清空。

4.更的返回方式

除了點(diǎn)擊“返回/關(guān)閉”圖標(biāo)、屏幕摳邊外，可以根據(jù)自己產(chǎn)品的頁(yè)面形態(tài)，考慮是否有更的退出形式。比如《下廚房》的食物詳情頁(yè)里，采取“下滑“的形式返回上級(jí)頁(yè)面。

原因在于：該詳情頁(yè)是以大圖+文字的結(jié)構(gòu)描述食物，而大圖的展示區(qū)域很接近于手指的“黃金操作區(qū)”。相對(duì)于將手指移動(dòng)到屏幕左上角點(diǎn)擊返回、或者移到最左邊摳邊返回，“下滑”可以在最短距離內(nèi)、最快速地讓用戶返回首頁(yè)瀏覽其他內(nèi)容。

5.是否保存/清除用戶操作

頁(yè)面間的跳轉(zhuǎn)和退出，勢(shì)必會(huì)對(duì)當(dāng)前頁(yè)面內(nèi)容和狀態(tài)產(chǎn)生影響。當(dāng)用戶想要離開(kāi)時(shí)，不同的產(chǎn)品都會(huì)選擇不同的退出策略。舉個(gè)特別典型的例子：微信朋友圈。

當(dāng)退出朋友圈再重新進(jìn)入時(shí)，是會(huì)停留在退出前的頁(yè)面位置，方便繼續(xù)瀏覽好友內(nèi)容。

而退出朋友圈后，入口處提示有好友新動(dòng)態(tài)時(shí)，再次進(jìn)入朋友圈則回到頂部初始位置，以保證可以第一時(shí)間獲取好友動(dòng)態(tài)，滿足用戶日常的社交需求。

每日故宮在這一方面的處理也很用心：無(wú)論用戶在詳情頁(yè)里進(jìn)行了什么操作（屏幕伸縮或滑動(dòng)位置），退出頁(yè)面時(shí)都會(huì)清除用戶的操作痕跡，還原到文物的初始狀態(tài)，給人帶來(lái)一種“保護(hù)文物、細(xì)心嚴(yán)謹(jǐn)”的心理感受。

轉(zhuǎn)自：站酷-和出此嚴(yán)