頁面跳轉(zhuǎn)在 APP 中屬于最常見，也是最基礎(chǔ)的一個(gè)交互細(xì)節(jié)點(diǎn)。我們常見的跳轉(zhuǎn)方式有直接跳轉(zhuǎn)、左右跳轉(zhuǎn)、上下跳轉(zhuǎn)、翻轉(zhuǎn)、聯(lián)動(dòng)。
其它酷炫的效果我們看過很多，但是現(xiàn)實(shí)中能做到的又有幾個(gè)呢？在設(shè)計(jì)時(shí)需要考慮好其中的關(guān)聯(lián)性，給出最符合用戶心理預(yù)期的過渡方式，從而做出最合適的設(shè)計(jì)。
首先看一下，我們的視覺「閱讀順序」是：左→右，上→下。因此延伸出目前 APP 最常見的兩種頁面跳轉(zhuǎn)方式：左右跳轉(zhuǎn)，上下跳轉(zhuǎn)。
直接跳轉(zhuǎn)是最原始、最簡(jiǎn)單的跳轉(zhuǎn)方式，web端常見，在APP中出現(xiàn)較少，標(biāo)簽切換常見。
常用于快速開發(fā)，Android中常用。
最常見的跳轉(zhuǎn)方式。（ios原生效果）
常用場(chǎng)景：
這里有個(gè)細(xì)節(jié)要注意，就是我們的返回鍵在左上角，也就養(yǎng)成了用戶一種習(xí)慣，左上角的鍵，與點(diǎn)擊之后的效果，往往就應(yīng)該是頁面從右側(cè)退出，與進(jìn)入時(shí)反向的效果。
這也是為什么大部分 APP 不會(huì)把入口按鈕放在左上角的原因。
那么左上角這個(gè)位置，除了給返回鍵當(dāng)做固有的位置外。還常常用于抽屜式導(dǎo)航，因?yàn)槌閷鲜綄?dǎo)航的方向，與返回時(shí)的移動(dòng)方向是一致的。常見抽屜式導(dǎo)航的 APP 如：滴滴打車、摩拜單車等。
相對(duì)于左右跳轉(zhuǎn)，上下跳轉(zhuǎn)就比較難理解了。
這種跳轉(zhuǎn)方式也很常見，但是大部分人不清楚什么時(shí)候用，這里我們簡(jiǎn)單分析下。
運(yùn)用場(chǎng)景：
比如我們?cè)谖⑿帕奶祉?，發(fā)起一個(gè)聊天的時(shí)候：
還有新添加群人員，新建筆記本，新建地址時(shí)等。
我們用微信聊天頁面舉例：點(diǎn)擊＋號(hào)離的內(nèi)容時(shí)，圖片、拍照、位置、紅包、收藏等，都是采用下到上的方式呈現(xiàn)，因?yàn)檫@些創(chuàng)建都是對(duì)當(dāng)前聊天窗口一次性產(chǎn)生內(nèi)容。
下面我們看下百度的設(shè)置>地址管理>添加地址：左右>左右>上下。
常見的有平安好醫(yī)生中間的按鈕，大姨媽APP中間的商城。
如 APP store 每日推薦到介紹頁。類似的還有 Behance APP 的作品展示。國(guó)內(nèi)APP 很少有這種聯(lián)動(dòng)效果，因?yàn)橐坏╉撁娼Y(jié)構(gòu)改變，整個(gè)效果基本無法復(fù)用。
類似于這種強(qiáng)聯(lián)動(dòng)，我們會(huì)在很多概念設(shè)計(jì)稿中看到，但是在實(shí)際的 APP 是很少見到的。因?yàn)殚_發(fā)成本/維護(hù)成本都很高。
搜索頁面打開
這里強(qiáng)調(diào)一下搜索頁面。搜索頁面的進(jìn)入往往有兩種形式。一種是 icon 做入口，另一種是搜索框做入口。
icon做入口：更像是上下級(jí)關(guān)系，常用左右跳轉(zhuǎn)來實(shí)現(xiàn)。比如：抖音。
搜索框做入口：點(diǎn)擊就獲取光標(biāo)的感知，是一個(gè)簡(jiǎn)單的聯(lián)動(dòng)過渡效果。比如：微信、云音樂。
關(guān)于其它方式，基本上只有極個(gè)別的 APP 中可以看到。
其它的方式，要結(jié)合實(shí)際的情況來考究。一定要注意關(guān)聯(lián)性。比如微信新出的浮動(dòng)展開效果，因?yàn)樵匾?dòng)，為了更加貼合所以有了收縮的效果。
頁面跳轉(zhuǎn)形式上其實(shí)就是上下左右內(nèi)外?？紤]好之間的關(guān)聯(lián)性，給出最符合用戶心理預(yù)期的過渡方式，就可以幫助我們找到最合適的設(shè)計(jì)。
微信公眾賬號(hào)
在線客服1號(hào)