手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

頁面轉(zhuǎn)場: 忽略它可能會使設(shè)計師犯錯

2019-11-21    ui設(shè)計分享達人

頁面轉(zhuǎn)場有哪些類型?該注意什么細節(jié)呢?



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


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

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



Part1:頁面轉(zhuǎn)場的作用


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


1.加深用戶印象


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


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


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


3.突出重點用戶


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


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



Part2:頁面轉(zhuǎn)場類型


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


1.翻書/頁、折疊


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


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


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


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


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



3.拉伸、上下合并


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


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


4.扭曲、頁面融合


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


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


5.彈出、縮放


彈出:根據(jù)頁面的某個視覺元素,將其彈入到下一個頁面中去。適合突出某視覺元素,將其重點彈出展示。


縮放:將整個頁面自大而小或者自小而大進行縮放過渡,很適合大封面的轉(zhuǎn)場。


6.移入、淡化


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




Part3:轉(zhuǎn)場時應(yīng)該考慮的細節(jié)


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


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


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


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


2.進退方向


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




3.返回邏輯的不同


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


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


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

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


H5頁面:屏幕摳邊是關(guān)閉整個鏈接

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


4.更的返回方式


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



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



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


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


當退出朋友圈再重新進入時,是會停留在退出前的頁面位置,方便繼續(xù)瀏覽好友內(nèi)容。


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



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

轉(zhuǎn)自:站酷-和出此嚴



分享本文至:

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://www.88yangsc.com

存檔