亚洲另类97色波,四季久久免费一区二区三区四区,丰满蜜桃精品视频网,国产在线观看无码九色8X视频亚洲中文字幕久久精品无码喷水_国产精品无码一区二区

頁面跳轉(zhuǎn)方式,如何設(shè)計更合理?

2019-3-6    資深UI設(shè)計者

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

常見的頁面跳轉(zhuǎn)方式有直接跳轉(zhuǎn)、左右跳轉(zhuǎn)、上下跳轉(zhuǎn)等,再設(shè)計時需要考慮好其中的關(guān)聯(lián)性,給出最符合用戶心理預期的過渡方式,從而做出最合適的設(shè)計。

頁面跳轉(zhuǎn)在APP中屬于最常見,也是最基礎(chǔ)的一個交互細節(jié)點。

我們常見的跳轉(zhuǎn)方式:直接跳轉(zhuǎn)、左右跳轉(zhuǎn)、上下跳轉(zhuǎn)、翻轉(zhuǎn)、聯(lián)動;其它酷炫的效果我們看過很多,但是現(xiàn)實中能做到的又有幾個呢?

先講一下:視覺順序

首先我們看一下,我們的視覺順序「閱讀順序」是:左→右,上→下。因此延伸出目前APP最常見的兩種頁面跳轉(zhuǎn)方式:左右跳轉(zhuǎn),上下跳轉(zhuǎn)。

直接跳轉(zhuǎn)

最原始、最簡單的跳轉(zhuǎn)方式,web端常見,在APP中出現(xiàn)較少,標簽切換常見,這個比較簡單,沒什么講的。

常用于快速開發(fā),Android中常用。

實現(xiàn)難度:無;

維護成本:無。

左右跳轉(zhuǎn)

最常見的跳轉(zhuǎn)方式。(ios原生效果)

實現(xiàn)難度:簡單 ;

維護成本:低;

運用場景:夫級→子級→子子級,依次類推。

常用場景:

  1. 對應(yīng)功能的展開:常以導航形式的存在,如美團首頁的美食、電影、住店等分流入口。
  2. 對于內(nèi)容的展開:如聊天列表>聊天窗;文章列表>到文章詳情。
  3. 對于活動廣告的展開:banner圖廣告、彈窗廣告等,比較常見。

這里有個細節(jié)要注意,就是我們的返回鍵在左上角,也就養(yǎng)成了用戶一種習慣,左上角的鍵,與點擊之后的效果,往往就應(yīng)該是頁面從右側(cè)退出的樣子,與進入時反向的效果。

這也是為什么大部分APP不會把入口按鈕放在左上角的原因。

那么左上角這個位置,除了給返回鍵當做固有的位置外。還常常用于抽屜式導航,因為抽屜式導航的方向,與返回時的移動方向是一致的。常見抽屜式導航APP如:滴滴打車、摩拜單車等。

上下跳轉(zhuǎn)

相對于左右跳轉(zhuǎn),上下跳轉(zhuǎn)就比較難理解了。

實現(xiàn)難度:簡單 ;

維護成本:低。

這種跳轉(zhuǎn)方式也很常見,但是大部分人不清楚什么時候用,這里我們簡單分析下。

運用場景:

1. 對當前頁面創(chuàng)建新的條目時;

2. 獨立啟動的一個子內(nèi)容。(如小程序:微信/支付寶等)

比如我們在微信聊天頁,發(fā)起一個聊天的時候:

還有我們新添加群人員時,新建筆記本時,新建地址時等。

我們用微信聊天頁面在舉例:點擊+號離的內(nèi)容時:圖片、拍照、位置、紅包、收藏等,都是采用下到上的方式呈現(xiàn),因為這些創(chuàng)建都是對當前聊天窗口一次性產(chǎn)生內(nèi)容。(大家可以去感受一下這些細節(jié))

下面我們看下百度的設(shè)置>地址管理>添加地址左右>左右>上下

翻轉(zhuǎn)

實現(xiàn)難度:中等;

維護成本:低;

運用場景:完全切換內(nèi)容,換到一個全新的內(nèi)容集合里。

常見的有平安好醫(yī)生中間的按鈕,一級大姨媽APP中間的商城。

聯(lián)動性

實現(xiàn)難度:高 ;

維護成本:高;

運用場景:元素之間從上級到下級關(guān)聯(lián)性強。

如APP store 每日推薦到介紹頁。類似的還有Behance APP的作品展示。國內(nèi)APP很少有這種聯(lián)動效果,因為一旦頁面結(jié)構(gòu)改變,整個效果基本無法復用。

類似于這種強聯(lián)動,我們會在很多概念設(shè)計稿中看到,但是在實際的APP是很少見到的。因為開發(fā)成本/維護成本都很高。

搜索頁面打開

這里強調(diào)一下搜索頁面。搜索頁面的進入往往有兩種形式。一直是icon做入口,另一種是搜索框做入口。

icon做入口:更像是上下級關(guān)系,常用左右跳轉(zhuǎn)來實現(xiàn)。比如:抖音。

搜索框做入口:點擊就給與獲取光標的感知,所已做好做簡單的聯(lián)動過渡效果。比如:微信、云音樂。

其它方式

關(guān)于其它方式,基本上只有極個別的APP中可以看到。

其它的方式,要結(jié)合實際的情況來考究。一定要注意關(guān)聯(lián)性。比如微信新出的浮動展開效果,因為元素要浮動,為了更加貼合所以有了收縮的效果。

結(jié)語

形式上其實就是上下左右內(nèi)外??紤]好之間的關(guān)聯(lián)性,給出最符合用戶心理預期的過渡方式,就可以幫助我們找到最合適的設(shè)計。

藍藍設(shè)計www.teruid.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計  ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制  用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)。

分享本文至:

日歷

鏈接

個人資料

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

存檔