您現在的位置是:電腦技術吧?>? 故障問題 ??>??頁面跳轉,頁面升級跳轉??>??正文詳情

頁面跳轉,頁面升級跳轉

酈修潔2019-11-18 12:20:32 人圍觀
簡介頁面訪問跳轉緊急大通知最近,我一直在做交互規范總結的工作。在梳理頁面跳轉的邏輯時,發現頁面之間的邏輯關系并不能很好地結合頁面跳轉的動態效果。雖然只有幾秒鐘的切換效

最近一直在做交互規范總結的工作,在不斷梳理頁面間跳轉邏輯的同時,發現頁面間的邏輯關系并不能和頁面間跳轉的動效很好的結合上。

雖然只是零點幾秒的切換動效,卻能在一定程度上影響用戶對于頁面間邏輯的認知。

為了輸出詳細的規范,花了大量時間把玩現在公司線上的產品以及國內外優秀的APP,尤其是蘋果、谷歌自己開發的APP。

(如果某些方面在設計規范中并沒有給出答案,就在原生APP中找答案吧!)  轉場動效也是在APP中應用最多的動效,連接兩個頁面。

通過合理的動效讓戶能更清楚我從哪里來,現在在哪,怎么回去等一系列問題。

初次接觸產品,恰當的動效使產品頁面間的邏輯關系與用戶自身建立起來的認知模型相吻合,操作后的反饋符合用戶的心理預期。

(這種認知與預期一部分來自長時間使用電子設備的使用習慣,一部分來自對現實世界的物理環境認知)。

  我將現在主流的轉場動畫分為四類,并結合了一些使用場景和例子。

  彈出  場景:  多出現于信息內容頁面,用戶將絕大部分注意力集中在內容信息本身上。

當信息不足或者展現形式上不符合自身要求,臨時調用工具對該頁面內容進行添加、編輯等操作。

在臨時頁面停留時間短暫,只想快速操作后重新回到信息內容本身上面。

  例子:  社交類APP如Tweeter發表推文;工具類APP如Evernote中新建筆記;基本大部分蘋果原生APP頂部的工具調出都采用這種方式  下面并不完全屬于頁面間的切換,但是使用場景很相似且歸到一類。

  當功能較多時有可能需要多個按鈕而又不好將如此多的臨時調用工具堆在頁面上,則通過一個按鈕觸發顯示一系列功能或者一系列次要內容導航,同時主要的信息內容頁面并不離開用戶視線,始終提醒用戶你來的這里的初衷。

  App主要功能還是都集中在一個頁面上,側面彈出調出其他頁面的導航入口,但這些次要頁面也都屬于臨時調出。

  例子:  Facebook中的快速和聯系人通訊 ;與地圖關系很大的APP如Uber Google地圖 。

(但Linkedin為了盡可能把feed流的空間擴大而將導航隱藏在側滑出的邊欄中用著很不方便,作為職場社交,所關注人發表的信息只是APP功能的一部分,發現人與工作也是相對重要的功能,所以頁面間需要頻繁切換。

而這樣的導航設計讓用戶在切換選項過程中付出了很大的成本,久之則不愿意再麻煩的去切換,慢慢APP喪失掉了原本屬于職場社交的一部分重要功能。

)  側滑  場景:  當頁面見存在父集子集的時候,也是最常見到的一種轉場動效。

基本看到這樣的動效,用戶就會在頭腦中形成樹的模型哪些內容在屬性上相似,量級相同,以及不同層級間的關系。

  漸變放大  場景:  頁面post了很多同等級信息,就如同貼滿了信息、照片的墻面,用戶有時需要近距離看看上面都是什么內容,在快速瀏覽和具體查看之間輕松切換。

漸變放大的切換動效與左右滑動切換的動效最大的區別是,前者大多用在張貼顯示信息的面板中,后者主要用于羅列信息的表單中。

在張貼信息的面板中左右切換進入詳情總會給人一種不符合心理預期的感覺,違背了人們在物理世界中形成的習慣認知。

  例子:  Guardian的新聞流 ,Snapchat中的興趣發現 社交feed流中的照片 蘋果原生app Photo中的照片流  其他  還有很多其他的切換動畫,它們大多是高度模仿物理現實世界的樣式。

比如iBook里電子書翻頁就是在模仿現實世界中翻書的效果,還有Flipboard文章切換的樣式真的是flip的感覺。

  產品中的動畫不僅僅局限于轉場之間的動效,還有控件,頁面元素的動畫。

產品的動畫的樣式,持續時間和幅度都會在一定程度上影響用戶的使用體驗。

把握好這種體驗更要好好學習心理學方面的內容,覺得這是個越研究越有趣的領域!

版權聲明:本文由 酈修潔 整理編輯。

原標題:跳轉,頁面緊急跳轉

轉載注明出處:http://www.dn9ww09s.icu/fault/13499.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • snapchat全濾鏡怎么找,snapchat怎么編輯圖片加濾鏡

    snapchat全濾鏡怎么找,snapchat怎么編輯圖片加濾鏡 相關圖片snapchat變臉濾鏡Snapchat是一款照片分享應用程序,它最大的特點是閱讀后燃燒。最近,許多用戶不知道如何向snapchat添加過濾器。snapchat如何提高分數?現在,是超snapchat調出更多特效...

  • 3d怎么旋轉,3d怎么旋轉物體

    3d怎么旋轉,3d怎么旋轉物體 相關圖片可以用3d旋轉工具的對象是本教程的重點是編碼,版本為3.0。只要你做一個旋轉的三維球,圖形組件的生產將不會被解釋。請參考包括math2在內的相關教程。As//image containe3d旋轉相冊...

  • dwcs5序列號,dwcs5永久序列號

    dwcs5序列號,dwcs5永久序列號 相關圖片dw怎么查序列號Dreamweaver是一款功能強大的網頁設計和制作軟件。最新版本的Dreamweaver產品需要激活才能正常使用,Dreamweaver CS5也不例外。小編dw安裝序列號...

  • locallapstore怎么用,iapcrazy怎么用

    locallapstore怎么用,iapcrazy怎么用 相關圖片locallapstore支持在locallapstore出現之前,小編一直認為內部購買和破解是Android的專利。Locallapstore是iPhone的一個插件,它使iPhone像Alocallapstore插件...

  • html返回上一頁代碼,html返回首頁代碼

    html返回上一頁代碼,html返回首頁代碼 相關圖片html返回上超鏈接返回上一頁代碼:a href=?onclick=javascript:history。后退(-1);返回上一頁/AA-ref=35; onclick=ja返回代碼...

  • 好壓壓縮后沒變小,2345好壓怎么壓縮rar格式

    好壓壓縮后沒變小,2345好壓怎么壓縮rar格式 相關圖片2345好壓無法創建文件我相信你的很多文件通常都是幾十億字節。此時,使用2345良好的壓縮可以解決這個問題。那么怎樣才能將2345個好的壓力降到最低呢?現在,超人軟件編輯將為您介...

  • 的光澤,什么的光澤

    的光澤,什么的光澤 相關圖片光澤資訊昨天,一種新的膠囊被研究。這種膠囊可以增強熒光燈在制作圖形時的光感能力。這不是欺騙。如果你不相信這一點,你應該首先考慮視角問題。不過,這個膠囊比上次用藍色...

  • 作業幫怎么關注其他人,作業幫王歡老師資料

    作業幫怎么關注其他人,作業幫王歡老師資料 相關圖片作業幫怎么給老師好評作為一種學習輔助軟件,家庭作業幫助最大的特點是有老師可以幫助學生。那么,家庭作業如何幫助關注老師呢?家庭作業如何幫助提問?下面,超人軟件編輯就...

  • superoneclick,superclick

    superoneclick,superclick 相關圖片super?neAndroid用戶最常做的事情之一就是在手機上建立根目錄。常用的根工具有Su、kingroot、一鍵根等等,而superneclick對于不多的人來說是一個很好oneclick是什么...

  • 自動生成html,html自動生成編號

    自動生成html,html自動生成編號 相關圖片html自動生成價格代碼如下:!--DOCTYPE指定文檔類型,HTM--!DOCTYPE HTML頭!--設置字符集,UTF-8--meta charset=UTF-8 styl前端頁面自動生成...

熱評文章

  • 金山詞霸無法屏幕取詞,金山詞霸屏幕取詞不顯示翻譯

    金山詞霸無法屏幕取詞,金山詞霸屏幕取詞不顯示翻譯 相關圖片金山詞霸如何取詞金山詞霸以其專業的翻譯能力深受人們的喜愛。最近,金山詞霸的很多用戶都說不知道金山詞霸是如何在屏幕上選詞的?金山詞霸如何導入生詞?接下來,超人軟件編...

  • 平面轉三維,從后期轉平面

    平面轉三維,從后期轉平面 相關圖片如何自學ui設計樂天 衛理公會教徒@斯圖:有時候當你做UI的時候,你真的看到了天賦。你知道很多不是設計專業的設計師。經過半年的自學,你開始工作了。在不到一年的時間里,這是...

  • quik如何添加文字,quik保存不了

    quik如何添加文字,quik保存不了 相關圖片quik為什么只有幾秒Quik是一款非常好的視頻制作軟件,相信有很多小伙伴都想用自己的音樂作為背景音樂。那么Quik如何添加背景音樂呢?現在,超人軟件編輯也想介紹一下如何使用Quik...

  • 2019哈羅單車收費標準,哈羅單車app下載

    2019哈羅單車收費標準,哈羅單車app下載 相關圖片哈羅單車怎么加盟自從哈羅單車與永安行合并之后,路上的哈羅單車越來越多了,用戶的騎行也越來越方便。那么哈羅單車怎么收費?支付寶怎么免押金騎哈羅單車呢?下面,就跟著超人軟...

  • 全屏,怎么全屏

    全屏,怎么全屏 相關圖片電腦全屏截圖HTML5全屏(full screen)API詳細介紹了越來越多的真實web應用程序,JavaScript變得越來越強大。全屏API是一種新的JavaScrip全屏輸入...

  • wpsppt圖片自動播放設置,wps演示文稿如何自動播放

    wpsppt圖片自動播放設置,wps演示文稿如何自動播放 相關圖片wps怎樣設置幻燈片放映時間WPS演示憑借其強大的功能受到很多小伙伴的喜愛,所以很多人都說不知道如何設置WPS幻燈片的自動播放?如何刪除或替換WPS幻燈片?現在,超人軟件小編將為...

  • 網頁打印技巧,網頁制作技巧

    網頁打印技巧,網頁制作技巧 相關圖片實用的在線網頁版工具技巧了解CSS層疊樣式表(CSS)是一組控制網頁內容外觀的格式規則。當使用CSS格式化頁面時,內容和演示文稿是相互獨立的。頁面內容(HTML代碼)位于自己的HTM...

  • 心悅會員首次激活在哪,心悅v1在哪開通

    心悅會員首次激活在哪,心悅v1在哪開通 相關圖片手機上qq心悅會員圖標新悅會員是指騰訊游戲2011年推出的高端服務俱樂部會員,可享受優質的私人服務特權和尊貴的游戲特權。因為新悅會員可以享受很多游戲特權和優惠,很多玩家都...

  • 什么是兼容性問題,怎么處理兼容性問題

    什么是兼容性問題,怎么處理兼容性問題 相關圖片此程序存在兼容性問題過去,在制作網頁時,只考慮IE6和FF的兼容性。公司改變了,要求也很高。FF和IE 678應該完全兼容。當單獨遇到hackeie8的時候。當然,使用注釋非常方便如何解決軟...

  • 錘子m1,錘子m1參數

    錘子m1,錘子m1參數 相關圖片錘子M1是一款由hammer technology推出的智能手機。最近,很多M1的用戶表示,他們不知道如何檢查M1的功耗以及如何打開開發者選項。接下來,超人軟件將為錘子m1l拆機...

關注微信

变脸官网查询