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

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

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

注:由于嗶哩嗶哩的用戶脾氣從整體上說更偏向于活潑,所以B站在具體的細節上的設計也考慮到了用戶的調性,并不是一沉不變的。單從導航這一種設計上看,就出現了多達 8 種設計方式。幾乎覆蓋了所有現網上出現過的導航類型,讓用戶可以更好的玩兒自己的APP。我們可以在領會導航種類的同時,更深一層次的思考,哪種導航類型更適合哪種應用處景。

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

首先列舉一下嗶哩嗶哩應用過的導航種類,如下圖所示:

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

接下來,我們就具體的看看每一個導航,及其原型實現。

一、標簽導航

標簽導航又稱為底部導航,在APP中的最底部,這種導航非常常見。微信、微博、支付寶等常用APP都采納這種導航的形式。標簽導航形式的優點非常明顯,標簽導航位置顯而易見,容易讓用戶察覺到它的存在。而且標簽導航,每個標簽之間切換頻率很高,標簽之間的點擊或者滾動切換,便于用戶操作。一般用于非常首要的導航中。

原型實現

寫在前面一點,原型用得到所有元部件,都并非截取的B站APP的截圖,都可以在FontAwesome圖標字體Axure部件庫中找到。這個元件庫的icon可以任意的改動樣式和顏色,很強大很方便。

我們從頭開始畫原型,要先理清全部APP的樣式架構方式,底部的四個導航是全部APP里面最大的分類,所以整體被分成了四部分:home、category、dynamic、news。在交互上由于同時存在頂部導航,所以這四個導航之間只是通過點擊button切換,沒有左右滑動的實現。這個標簽導航沒有交互方式上的難度,但不證明原型就可以隨便畫畫了事。

高保真原型不僅僅要實現高保真的實現具體的交互,樣式上的也要高保真實現。所以在樣式上有很多的細節值得我們注意,比如說APP的外邊框,我們最好選擇330px*584px;每個icon每個模塊的布局和大小,都要遵從原APP的布局,可以借助網格線功能;每個icon和模塊的填色問題,這里有一個筆者經常用的小技術分享給大家。QQ或者微信的截圖,熱鍵截圖之后,對于鼠標所在的像素點,截圖功能自帶RGB顏色展示,我們可以通過這種方式獲取icon或者模塊的顏色。只不過這里的RGB是十進制的,Axure中是十六進制,在線轉換一下就好了。我們遵照剛才的原則,先搭好如下四個頁面,如下圖所示:

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

四個頁面之間的相互跳轉,我們可以通過動態面板實現,也可以通過四個page實現,這里我選擇的是四個page,原因是page更方便之后的更改,實戰當中,萬一自己給自己企圖的需求變了呢(詼諧臉)。如果你認為page的方式跳轉延遲看著不舒服,可以都做好了最后變成動態面板。具體的實現法子我想大家都可以自己動手實現,這里就不贅述了。

二、頂部導航

頂部導航的應用處景和底部導航的很相像,從樣式上看,頂部導航和底部導航一樣顯而易見,容易讓用戶發現。從功能上說,都是從整體上對自有功能的一個大致的分類,所以底部導航和頂部導航二者的地位都非常首要。唯一的差別就在于二者的位置差異產生的其他衍生的微小差異。底部導航的button,由于用戶的手持手機的習性,可以更容易的觸碰到,所以交互上頂部導航由于手指不容易點到相應的button,更多的采納的是左滑右滑的切換。

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

站點導航

您可能在找這些
四川快乐12电视软件 2020年辽宁35选7 街机捕鱼大亨 河北燕赵20选5走势图 号码的码组 三中三公式规律阵图 东方6 1中3 1多少钱 九游棋牌娱乐平台 航天信息股票最新消 微乐麻将怀疑开挂怎么查 盛大娱乐齐天大圣捕鱼