根據產品層級的深度和廣度,選擇適合的導航模式,是產品設計中的關鍵一環。導航其實只有寄種,但大家一定不能被現有的導航模式所束縛,未來會有新的導航模式,新的操作手勢…,設計的心應該是自由的,若你羽翼未豐,就在規則的天空中飛行,可能不會出彩但不至于犯錯;若你已成雄鷹,便可自由飛翔,突破規則,甚至建立自己的規則。
平鋪式導航
當你的信息足夠扁平,可以嘗試平鋪式導航。這種導航方式很容易帶來高大上的視覺體驗,最大程度的保證了頁面的簡潔性和內容的完整性,且一般都會結合滑動切換的手勢,操作起來也非常方便。PChouse是一個家居雜志的APP,雜志休閑隨意的特質,非常適合平鋪式導航,最大限度的保持了圖片的完整性。(如下圖)
但缺點是用戶只能切換的相鄰頁面,很難跳轉到非相鄰的頁面,很容易迷失位置,因此平鋪式導航都會添加幾個小點來指示當前位置。如墨跡天氣中切換城市的操作就運用了平鋪式導航,優點是可以在一個頁面完整展示當前城市的情況,快速切換到其他城市。但如果你設置的城市比較多,就很難快速定位到某個城市,但所幸手勢操作切換方便,且正常情況下,用戶最多只會設置2-3個頁面,不會造成太大的負擔。
淘寶中的店鋪推薦也使用了平鋪式導航,推薦店鋪雖然有40個之多,但用數字表達出了明確位置的同時,也加入了手勢切換,增加了易用性和趣味性。
總結:
輪播式導航比較適用于足夠扁平化的內容和隨意瀏覽的閱讀模式
需要注意的是:無法跳轉至費相鄰頁面,如果入口間需要反復跳轉,則不適合這種模式
宮格式導航
這種導航模式非常常見,但是卻不常用。
常見是因為,無論你用的是Android還是iOS,每天一打開手機,宮格式導航就會對你說hello了(就是下圖啦)
每一個APP都是一個宮格,這些宮格聚集在中心頁面,用戶只能在中心頁面進入其中一個宮格,如果想要進入另一個宮格,必須要先回到中心頁面,再進入另一個宮格。每個宮格相互獨立,它們的信息間也沒有任何交集,無法跳轉互通。因為這種特質,宮格式導航被廣泛應用于各平臺系統的中心頁面,這就是為什么說他常見。
但是為什么不常用呢,大家可以翻一下手機里的APP,看看哪個APP的主導航用了宮格式導航?你可能只能找到一個最常用的,尤其是愛自拍的親們-美圖秀秀(如下圖)
經常使用美圖秀秀的人都會有一個共同的煩惱,例如我拍了一張圖片,我需要美圖一下,我的心理模型是這樣的:進入美圖秀秀-打開一張圖片-先祛斑祛痘、放大眼睛、瘦個臉-最后加上特效(自然/甜美可人/粉嫩系)-保存圖片。
但是美圖秀秀給我的實際模型卻是這樣的:進入美圖秀秀-打開一張圖片-進入人像美容-祛斑祛痘、放大眼睛、瘦個臉-保存圖片-再進入美化圖片-加個特效-再次保存。這樣做的結果是流程復雜,而且我多存了一張沒用的照片,還要到照片里進行刪除。
這就是宮格式導航的缺陷,信息互斥,無法相互通達,只能給用戶帶來了更多的操作步驟。
總價一下:
宮格式導航適合入口相互獨立互斥,且不需要交叉使用的信息歸類
一旦入口需要有所交集,必然導致更多的操作負累,這個時候只能根據產品特性做出權衡,如果不適合,建議果斷拒絕這種方式。
懸浮icon導航
懸浮icon導航,是將導航頁面分層,無論你到達APP的哪個頁面,懸浮icon永遠懸浮在上面,你依靠懸浮層隨時可以去想要去的地方,同時,為了讓懸浮icon不遮擋某個頁面的操作,通常懸浮的icon都可以在屏幕邊緣自由移動。
iOS系統就運用了這種導航模式-Assistive Touch, Assistive Touch是在iOS5出現之后搭載的新的輔助功能,知乎上很多人吐槽這個懸浮方塊非常礙事,還有很多人說這是因為home鍵質量不佳而且官方并沒有明確提出有效的解決方案,所以AssistiveTouch是曲線救國,此處應有笑聲…我最早的一部4S用了2年,摔碎屏2次,home鍵都依然堅挺,撇開home鍵不談,單說懸浮icon在大屏幕時代發揮的作用,當你單手持握手機,拇指在手機中部瀏覽,你想回到主屏幕,但是手指卻難以到達屏幕底部,懸浮方塊在這個時候就能為你提供快捷操作。
而且你可以在AssistiveTouch里自定義頂層菜單,我比較喜歡里面的屏幕快照功能,不用按住電源鍵和home鍵就能截屏的感覺棒棒噠!
Assistive Touch從iOS5一直活到iOS9,真不是一個雞肋的功能,關鍵看你怎么用。
在Android的Material Design中,同樣提出了懸浮icon的設計概念。
盡管現在很難看到懸浮icon作為導航的設計,但我相信隨著大屏的發展,懸浮式icon一定會越來越廣泛的使用
總結:
懸浮式icon是一個非常便捷的操作入口,也適應大屏幕時代。
但需要注意的是
l 懸浮式icon會遮擋某些頁面的操作,在設計的時候應該考慮進去,比如無論在那個頁面永遠為懸浮icon留有位置。
l 在某些信息層級繁多且復雜的APP,讓用戶自主決定是否需要調出懸浮式icon,或者讓用戶自定義菜單會更加符合用戶的心理預期。
文章轉載請保留網址:http://aberdeenanguscattle.com/news/solutions/1552.html