微啦網 首頁 > 學霸

頁面轉場設計,有哪些類型和作用?

2019-10-29 22:30 weila

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

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

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

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

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

Part1:頁面轉場的作用

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

展開全文

1. 加深用戶印象

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

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

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

3. 突出重點用戶

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

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

Part2:頁面轉場類型

說完頁面轉場的作用后,下面就是你可能感興趣的內容:頁面轉場到底有哪些類型?(以移動端頁面轉場為例,PC端亦可復用該類型)

1. 翻書/頁、折疊

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

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

2. 3D翻轉、立體旋轉

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

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

3. 拉伸、上下合并

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



浙江体彩20选5跨度走势图