詳解APP端嗶哩嗶哩所有的導航類型,及高保真原型實現(3)

更新:2017-11-01    編輯:以柔    來源:轉載    人氣:加載中...    字號:|

標簽:實現  導航  詳解  原型  哩所  哩嗶  百度搜索

但到這里還不夠,在顯示出抽屜狀態的情況下,點擊黑色背景,應該可以隱藏抽屜及黑色背景。這里我們需要首先判斷一下狀態再增加交互,“觸控板”為焦點時,點擊“黑色背景”,隱藏“黑色背景”,具體的操作如下圖所示,添加完成之后,就可以實現左滑右滑及點擊黑色背景的所有交互了。

詳解APP端嗶哩嗶哩所有的導航類型,及高保真原型實現

但是上述僅實現了左滑右滑觸發抽屜的事件,我們還應該想到,點擊bars button,同樣可以觸發抽屜和黑色背景的顯示及隱藏。這里我們需要考慮的一個細節是,我們設置的觸發板是一個透明的矩形,雖然不可見,但是仍然是一個元件,若bars button一直處于最上層,就會在觸發抽屜之后顯得很怪異,若觸控板一直處于最上層,就無法通過bars button觸發抽屜,所以增加bars button的同時,要考慮到高低層順序的切換。所以我們的思路是,首先讓bars button處于最上層,觸發抽屜之后把它置于底層,等抽屜隱藏之后,再把它提上最上層,最后完整的交互如下圖所示。

詳解APP端嗶哩嗶哩所有的導航類型,及高保真原型實現

四、九宮格導航

九宮格是一種最簡單直白的導航方式,把所有的具體導航類目平鋪在一個頁面中,這樣的做法優缺點有顯而易見,優點在于,不需要任何操作就可以看見所有的類目細節,并且可以占滿屏幕,非常直觀。但是缺點依然也是很明顯,我們一下子看見這么多類目,很難一下子就找到我們想要的那一個類,所以通常九宮格導航的做法,都是在一些次首要的導航中浮現,并且這些導航類目之間的聯系并不大,無法用體系關系把他們聯系到一起,平鋪直敘是最簡單粗暴,也可能是最好的展示法子。通常,九宮格導航并不會單純的文字或者icon的展示,都會是兩者結合起來的展示方式,目的就是能讓用戶更容易一點找到想要找的具體標簽。

原型實現

這塊的原型實現沒有什么特別要注意的,唯一想到的就是顏色的選取,之前也說過了技術,這里不再贅述。

五、懸浮導航

懸浮導航這種表現形式,顧名思義就是一直懸浮在固定的地方,這樣的交互方式,主要是想凸顯功能特性,比如APP通常會把自己最亮點的功能點做的最顯眼,而這個功能點要是在功能體系里面找起來又不是很方便,于是就做成了這種懸浮導航的交互,方便用戶的點擊。

原型實現

這里為了更好的演示懸浮的樣式,我自己改動了一下B站原型的設計,B站的交互是:點擊懸浮的直播button,顯示的是直播設置詳情頁(下圖左);我改了一下交互,主要是為了凸顯懸浮導航,點擊直播button,彈出兩種直播的入口(下圖右)。

詳解APP端嗶哩嗶哩所有的導航類型,及高保真原型實現

這個交互實現的思路是,點擊直播button,會彈出兩個入口,并且出現一個半透明的背景;當再次點擊直播button或者點擊黑色背景,隱藏黑色背景及兩個直播入口。

原型上的實現法子和抽屜導航的類似,這里就只說一下思路,如果實現不了,可以參見文末給的原型文檔。

評論列表(網友評論僅供網友表達個人看法,并不表明本站同意其觀點或證實其描述)

站點導航

您可能在找這些
黑龙江快乐十分走势图