超實(shí)用!聊聊標(biāo)簽式導(dǎo)航的設(shè)計(jì)思路(附設(shè)計(jì)師做筆記方法)

1 評論 15665 瀏覽 92 收藏 12 分鐘

現(xiàn)在文章基本上都不深入,只是點(diǎn)到某個知識,跟大家說個理論的東西,然后羅列出所有導(dǎo)航的形式。讀者看了之后跟沒看是一樣的,遇到問題還是沒法解決,只知道有這類導(dǎo)航存在而已。今天這篇詳細(xì)地講了關(guān)于標(biāo)簽類導(dǎo)航的幾個知識點(diǎn),希望可以幫助大家在工作中更好的運(yùn)用。

有人說導(dǎo)航僅僅就是方便用戶操作的小東西而已,沒那么神奇。是的,對于小眾的產(chǎn)品來說,確實(shí)沒那么神,因?yàn)樯衲阋部床怀鰜?。去看看Facebook為什么把抽屜式導(dǎo)航改成標(biāo)簽導(dǎo)航,就知道導(dǎo)航對一個App的影響有多大了。

導(dǎo)航分很多類別,如標(biāo)簽導(dǎo)航、抽屜式導(dǎo)航、九宮格導(dǎo)航、混合組合導(dǎo)航、列表式導(dǎo)航、Tab導(dǎo)航、平鋪導(dǎo)航等等。之前在我的讀書筆記中也有提到過三類導(dǎo)航:平鋪類、標(biāo)簽類、列表類。

現(xiàn)在用到更多的導(dǎo)航其實(shí)是標(biāo)簽導(dǎo)航,它隨處可見,相信目前大部分的App用的導(dǎo)航都是標(biāo)簽形式的。所以,是不是知道今天要說啥了?嗯,就是標(biāo)簽導(dǎo)航。

理清產(chǎn)品框架

相信很多設(shè)計(jì)師在設(shè)計(jì)導(dǎo)航時,一上來就開始YY自己的導(dǎo)航要放什么,因?yàn)檫@個時候他已經(jīng)被標(biāo)簽形式的導(dǎo)航洗腦了,認(rèn)為自己的App就應(yīng)該用標(biāo)簽導(dǎo)航。然后繼續(xù)YY產(chǎn)品的功能,自己理出個最適合的,放上去就好了。

其實(shí)不然。做好一個導(dǎo)航要考慮的問題其實(shí)非常多,還要考慮產(chǎn)品后期發(fā)展的延展性。必須定好整個產(chǎn)品的框架,把最核心的功能放在第一層頁面,再根據(jù)產(chǎn)品的深度來設(shè)計(jì)導(dǎo)航的模式。

我們作為交互設(shè)計(jì)師,需要把握產(chǎn)品的整體架構(gòu),這不僅僅是產(chǎn)品經(jīng)理的工作。所以在前期我們要付出很多努力,才能把一個產(chǎn)品的線框圖畫好。

標(biāo)簽導(dǎo)航的優(yōu)劣勢

先來看個圖:

zrf20160730 (3)

不要看上面的列表,就看下面的標(biāo)簽。是不是特別熟悉?很多App都是用這類標(biāo)簽式導(dǎo)航來引導(dǎo)用戶切換功能。

那它的優(yōu)勢是什么呢?

1. 簡單高效,操作方便

下面的四個功能可以快速切換,用戶在使用的過程中不會迷失方向,且簡單清晰,層級明確。

2. 更好的用戶體驗(yàn)

試想一下,一般在使用App時,用戶更多的會怎么使用手機(jī)?雙手還是單手呢?肯定都有。所以單手使用手機(jī)的用戶碰到的App是標(biāo)簽導(dǎo)航時,可以更方便的操作,不需要一定得使用另一只手。而某些導(dǎo)航如果不用兩只手是沒辦法操作的。

3. 快速了解App主要功能

一般來說,用戶第一次使用產(chǎn)品,會關(guān)注這個App有什么功能,它能幫助自己完成什么任務(wù)。所以標(biāo)簽導(dǎo)航可以很好地幫助用戶了解產(chǎn)品的主要功能,讓用戶看到的第一眼就知道自己能做什么。

然后再來看看劣勢:

1. 功能不能過多

有些產(chǎn)品功能過多,但是卻又都是必要的,不能做刪減。而一旦超過五個,就不適合用標(biāo)簽導(dǎo)航。因?yàn)闃?biāo)簽導(dǎo)航不適合做滑動,所以功能多了可點(diǎn)擊區(qū)域(熱區(qū))就變小了,操作上會有一定影響。

2. 占用一定屏幕尺寸

標(biāo)簽導(dǎo)航占用了屏幕下方不少的位置,所以有些App就不適合用標(biāo)簽導(dǎo)航,比如閱讀類的App。先不說一屏內(nèi)少了很多字展示,就說在滑動的時候不小心點(diǎn)到了其他功能是不是很煩?

標(biāo)簽導(dǎo)航的延展

有的人會問,如果我的產(chǎn)品很想用標(biāo)簽導(dǎo)航,但是又超過了5個功能,那有辦法解決么?看個圖:

zrf20160730 (1)

當(dāng)你的主功能超過5個又一定要使用標(biāo)簽導(dǎo)航的話,那知乎的這個解決方案很適合你(最右邊的功能是“更多”)。

還有一類情況是:主功能是標(biāo)簽導(dǎo)航,次要功能也是標(biāo)簽導(dǎo)航。有沒有聽著很亂?繼續(xù)看圖:

zrf20160730 (2)

主功能是“新聞”,次要功能是頂部的“要聞”、“NBA”等等,如果在某個主功能中,你的次要功能很多,就可以使用這類方式來解決這個問題。還有很多類似的,標(biāo)簽導(dǎo)航能解決不少問題,但是前面說過,一定要注意規(guī)劃,理清產(chǎn)品框架,不要一上來就隨便定個導(dǎo)航形式。

小結(jié)

今天詳細(xì)的講了關(guān)于標(biāo)簽類導(dǎo)航的幾個知識點(diǎn),希望可以幫助大家在工作中更好的運(yùn)用。最近出的文章大多是偏向交互、產(chǎn)品的??赡苡行┤顺跞脒@個行業(yè), 平時還涉及不到這類工作,所以下周我會出一篇文章,教大家如何學(xué)習(xí)(可能誰都會),就說說我自己是怎么走到現(xiàn)在的吧,雖然現(xiàn)在也就這樣。嗯,來一篇不是雞 湯的雞湯文。

這是本期內(nèi)容,謝謝大家的支持!

附加福利:教你做一個設(shè)計(jì)類筆記+制定目標(biāo)

最近發(fā)現(xiàn)自己成長太慢,而且太忙,白天要上班,晚上要學(xué)習(xí)到兩點(diǎn)左右才睡覺,所以今天抽出一點(diǎn)時間來解答一下最近很多人問我的問題。

“怎么去做一個設(shè)計(jì)類的筆記以及制定自己的目標(biāo)”

而我今天要說的內(nèi)容,適用于任何工作當(dāng)中。怎么理解,就看你自己了。

今天我就從我自己一直以來的一個習(xí)慣,告訴大家我是怎么做筆記以及制定任務(wù)的。

做筆記我一般使用一個軟件,叫做“印象筆記”,相信大家都知道這個軟件,當(dāng)然你也可以選擇其他軟件,像有道云筆記等都是差不多的。

無論是工作內(nèi)容、書本學(xué)習(xí)筆記,或者是偶爾看到好的文章,我都會用到它。

1. 先給大家介紹怎么做一個學(xué)系列的筆記

首先,我先給大家看一下我一部分筆記的界面:

lm20160730 (1)

我的每一個筆記本都是由小的筆記本相互疊加形成一個大的筆記本(有點(diǎn)繞口,不過你自己用了就知道了)。

當(dāng)你在網(wǎng)上,或者是在買來的書籍中,看到想要摘錄的內(nèi)容時,你可以這樣做:

lm20160730 (3)

記錄下內(nèi)容,還要用自己的話做一次總結(jié),然后去思考核心的部分。

我這個筆記的內(nèi)容是直接摘錄了這個案例的原話,然后用自己的話再一次進(jìn)行了總結(jié)。這樣也可以更好的回憶當(dāng)初為什么會有這樣的總結(jié)。

工作筆記也是一樣,因?yàn)槲业墓ぷ鲀?nèi)容不便于公布,所以這邊就不放圖片了。

其實(shí)原理也是一樣。

你可以選擇按照月份或者星期來記錄你的工作內(nèi)容,如這周你需要設(shè)計(jì)一個界面或者一套原型,你需要用到的文案,以及你是怎么構(gòu)思的,還有就是設(shè)計(jì)時用到的元素截圖,設(shè)計(jì)完的終稿截圖。形成一篇關(guān)于你這一個需求的工作內(nèi)容筆記。

如果是原型,就可以記錄交互的問題,哪些地方可以更好地優(yōu)化,還能形成項(xiàng)目的進(jìn)程管理,方便日后查看。

2. 下面我來告訴你怎么制定目標(biāo)

還是先看一下我的界面,我將這個筆記本稱為短期任務(wù)。

這是我五月三十號開始到六月九號的任務(wù)目標(biāo)

lm20160730 (2)

當(dāng)你制定完這些目標(biāo),就要每天安排時間去完成,爭取在這個周期內(nèi)完成你的任務(wù)。

然后在任務(wù)全部打完勾的情況下(也就是完成),寫一篇總結(jié),記錄在你的任務(wù)下面就行,告訴自己這周學(xué)到什么,學(xué)會回顧。

當(dāng)然,這是工作之外的,你還要記錄你工作中要完成的目標(biāo)。

比如,公司要求這周你要拿出一張海報(bào)或界面,當(dāng)中遇到了一個你沒有接觸過的內(nèi)容,此刻你沒有思路,這時候你就要去搜集這方面的資料,所有搜集到的信息都進(jìn)行整合,然后整進(jìn)筆記,到最后你完成這個海報(bào)時,你就知道你完成它的過程中,又學(xué)到了哪些知識。

當(dāng)你晚上躺下時,可以打開手機(jī)端看看,回顧下最近的筆記,對你的成長會很有幫助。

這是我多年來養(yǎng)成的一個習(xí)慣,從大二開始,一直堅(jiān)持到現(xiàn)在。以前用的比較少,現(xiàn)在工作了反而用的多了。

很多東西我都是靠自學(xué)完成的,想要在自學(xué)中成長更快,做筆記是少不了的。

可能還有一些我說的不太清楚,相信每個人都有自己的想法,希望我的這篇文章能幫助到你。

 

作者:呆呆,微信公眾號:udai-bl,交互設(shè)計(jì)師一枚,喜歡關(guān)注互聯(lián)網(wǎng)各類產(chǎn)品,超愛閱讀各類書籍,有好書一定要推薦我哦~

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 請教產(chǎn)品方面如何學(xué)習(xí),不知道學(xué)什么,怎么辦,好迷茫新人

    來自北京 回復(fù)