中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

為什么要有頁面轉場？有哪些轉場類型？要注意哪些細節？本文來一一給大家解答~

不知各位產品經理、UE/UI設計師在設計產品時，除了考慮交互說明、功能狀態、頁面邏輯等之外，是否會關注頁面跳轉間的“轉場效果”？？？

可能有人會覺得：“不就普通的界面左移和右移，需要講這個嗎？” 但是如果我問：“為什么要有頁面轉場？有哪些轉場類型？要注意哪些細節？” 你能一五一十地回答出來么？

畢竟頁面間的轉場過渡，是用戶體驗我們產品最直接的感知形式，也是人機交互中最重要的傳達要素。另外市面上還沒有系統性介紹’頁面轉場’的文章，所以今天就寫下這方面的干貨，希望能給你帶來一些收獲。

Part1：頁面轉場的作用

頁面轉場最基礎的作用，無疑是拉通頁面與頁面間的使用流程，使產品的信息內容、功能交互等有一個承接點。但除了這個打底作用外，頁面轉場還可以體現出多個方面的作用。

1. 加深用戶印象

一些新奇獨特、區別于競品的轉場效果，完全可以加深用戶對自己產品的印象，留下特定的產品記憶點。如《紅板報》的‘折頁’效果就很讓人記憶尤新，進一步提升了產品的競爭力。

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

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

3. 突出重點用戶

產品里的重點用戶（如vip用戶、平臺作家）都是需要特別照顧的對象。界面設計時除了在背景色、視覺元素不同于普通用戶外，特殊的頁面轉場也能給帶來一種‘專門定制’的感知。

像《人人都是產品經理》APP，在打開普通頁面和專欄作家的文章時，前者是普通的‘左移’，后者則‘上下開啟’，給讀者一種‘開啟知識寶庫’的進場感受。

Part2：頁面轉場類型

說完頁面轉場的作用后，下面就是你可能感興趣的內容：頁面轉場到底有哪些類型？（以移動端頁面轉場為例，PC端亦可復用該類型）

1. 翻書/頁、折疊

翻書/頁：指模仿現實生活中書本和紙張的切換效果，是一種擬物化的轉場方式。常用于雜志、小說、日記等產品中。

折疊：根據水平或者垂直線為中心點，將頁面的另一部分進行翻折，適合各種帶有“日歷”功能的轉場。

2. 3D翻轉、立體旋轉

3D翻轉：將二維的頁面以3D形式（類似魔方）進行切換。適合體現產品功能的“空間感”。

立體旋轉：根據水平或者垂直線為中心點，將整個頁面進行立體旋轉。適合體現另一個“頁面空間”的效果，用于容納更多的信息內容。

3. 拉伸、上下合并

拉伸：根據水平或者垂直線為中心點，將頁面進行拉長消失處理，可分為’內拉‘與’外拉‘兩種方式。

上下合并：將即將進場的頁面分為上下兩部分進場，使頁面更有層次感。適合給用戶營造一種“打開新世界/新天地”的交互認知。

4. 扭曲、頁面融合

扭曲：根據水平或者垂直線為中心點，將整個頁面進行旋轉、壓縮等處理，適合給用戶傳達一種“異次元、空間傳送”的效果。

頁面融合：根據頁面的某個視覺元素，通過變形、變色、縮放、位移等方式過渡到另外一個頁面中去。這種轉場是最能體現兩個頁面之間的‘關聯性’，也是過渡效果最和諧的方式之一。

5. 彈出、縮放

彈出：根據頁面的某個視覺元素，將其彈入到下一個頁面中去。適合突出某視覺元素，將其重點彈出展示。

縮放：將整個頁面自大而小或者自小而大進行縮放過渡，很適合大封面的轉場。

6. 移入、淡化

這是我們最常見、最普通的轉場方式了，大部分的產品使用這兩種轉場方式。移入有“上下左右”4個進入方向，而一直使用“左移進入、右移退出”的轉場，最能體現產品功能的使用流程。

Part3：轉場時應該考慮的細節

各種效果只是提供一種選擇而已，根據自己的產品特性、想要傳達的交互理念等選擇合適的方式即可。而在一些轉場過程中的細節點，是交互設計師不能忽略的事項。

1. 頁面間的關聯性

頁面之間都是通過“入口信息”和“頁面標題”建立關聯的，為了增加用戶轉場后的代入感、避免產生認知錯誤（覺得進錯頁面），可以考慮用相同的背景色、視覺元素等加強頁面間的關聯。

比如之前QQ游戲中心，將前頁的背景圖沿用到后頁中，讓后頁的游戲描述更有代入感，用戶第一時間就覺得“來對地方了～”

2. 進退方向

頁面的進入和退出盡量是成反方向的，即頁面從右加載邊移入，退出時則從左邊移出。否則混亂無序地進退方向，會使用戶的操作流和視覺流感到不適。

3. 返回邏輯的不同

用戶習以為常的頁面返回習慣，一是點擊左上角‘返回/關閉’圖標、二是屏幕扣邊（叫法不同，即按住屏幕最左邊位置向右滑到，iOS與Android均可實現該方式）。因“返回/關閉”圖標在視覺上帶有明確的指向性，用戶知道點擊后到底是“返回”還是“關閉”。但不同頁面類型的屏幕摳邊，對應的含義和邏輯卻是各不相同的。

原生頁面：屏幕摳邊是返回上一級頁面

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

H5頁面：屏幕摳邊是關閉整個鏈接

無論在H5里操作了多少內容/頁面，屏幕摳邊都會關閉整個H5鏈接，再次進入時只能重新加載頁面，操作記錄都會被清空。

4. 更高效的返回方式

除了點擊“返回/關閉”圖標、屏幕摳邊外，可以根據自己產品的頁面形態，考慮是否有更高效的退出形式。比如《下廚房》的食物詳情頁里，采取“下滑“的形式返回上級頁面。

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

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

頁面間的跳轉和退出，勢必會對當前頁面內容和狀態產生影響。當用戶想要離開時，不同的產品都會選擇不同的退出策略。舉個特別典型的例子：微信朋友圈。

當退出朋友圈再重新進入時，是會停留在退出前的頁面位置，方便繼續瀏覽好友內容。而退出朋友圈后，入口處提示有好友新動態時，再次進入朋友圈則回到頂部初始位置，以保證可以第一時間獲取好友動態，滿足用戶日常的社交需求。

每日故宮在這一方面的處理也很用心：無論用戶在詳情頁里進行了什么操作（屏幕伸縮或滑動位置），退出頁面時都會清除用戶的操作痕跡，還原到文物的初始狀態，給人帶來一種“保護文物、細心嚴謹”的心理感受。

結尾

好了，關于“頁面轉場”的話題就先寫到這，各位根據自己的產品特性、想要傳達的交互理念等選擇合適的方式即可。

下面是總結筆記：

作者：和出此嚴，微信ID：elffzh，公眾號：和出此嚴

本文由 @和出此嚴 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash, 基于CC0協議