首页
/
每日頭條
/
生活
/
導航欄組件實例講解
導航欄組件實例講解
更新时间:2024-05-01 04:12:46

清晰易懂的導航欄是提升有效轉化的第一步,如何設計一款實用的導航欄呢?

導航欄組件實例講解(導航欄設計有發現)1

我有個興趣,就是定期不定量地去試用新産品,但最近我越來越困惑了,因為越來越多的産品讓人難以理解,有些簡直到了無所适從的程度。

尤其體現在産品的導航欄上面,根本起不到導航的作用,不信你看看下面的導航欄:

導航欄組件實例講解(導航欄設計有發現)2

假如我是一名新用戶,想看看最近的産品投資的熱點新聞,誰能告訴我究竟應該從哪個入口進去獲取有效信息?

你知道導航欄是能被推導出來的嗎?

在這一輪的科技變革浪潮裡,與其說是技術進步,其實更多是整個社會接口界面層的變化,中後台的業務效率提升仍處在萌芽階段。

引用王興先生的一段感慨:

這裡面長出來的很多公司,表面上是科技公司,實際上都是廣義上的中介公司:趁着社會接口界面洗牌的時候,搶先占據了一些中介點。

社會接口界面層的變化,着實提升了現代人與其他對象建立聯系的效率,這裡所說的對象大緻能分為下面四個方面:

  • 人與資訊;
  • 人與商品;
  • 人與服務;
  • 人與人;
  • ……

目前市面上基于互聯網技術的産品,本質上都在處理着人與各種對象之間林林總總的關系。

這是“人 X”的模式,在這裡我用“X”來代表這段關系中的另一半,盡管在未來會有更多的X,但唯一不變的是人這一部分,畢竟産品是給人用的。

針對上述的這部分關系,這些産品普遍都在引導用戶:建立一段關系 → 消費這段關系。

這個時候,産品的主流程應該圍繞着上述方向做有針對性地引導,很顯然這本應是導航欄以及一切引導模塊的職責。

所以根據産品的主流程,導航欄是可以被推導出來的,而且是能根據用戶和對象建立關系的場景推導出來的。

而那些讓人費解到無地自容的導航欄,簡直就是天然的“新用戶殺手”,有些更是堪比“障礙欄”根本沒有導航作用。

如何根據業務流程設計導航欄的模塊?

在「人 X」這種模式下,用戶的操作行為從源頭上就會分為三類:

  • 與“X”建立關系;
  • 消費與“X”的關系;
  • 自我管理。

下面是我自己常用的一套方法論,分享給大家:

Step1:與“X”建立關系

“X”是這段關系裡面的另一個對象,無論是内容資訊、商品、服務還是人來充當這個對象,這一步都可以分為以下兩種方式:

獲取對象

「模塊例子:發現、探索、活動、話題」

導航欄組件實例講解(導航欄設計有發現)3

這裡的獲取指的是用戶通過産品的推薦功能,最終獲取到對象,也就是說這部分用戶有獲取信息、獲取服務的需求,但是并不知道哪種信息或者哪種服務适合他。

這種模塊的功能大部分以推薦為主,模塊内容的周轉率要求很高,隻有在高周轉率高密度的内容推薦下,用戶才能不斷發現新事物。(不僅僅指資訊)

所以這個模塊的周轉率是用戶留存和用戶活躍的關鍵,相比之下,其餘模塊的更新速度相對比較固定,在沒有新對象獲取的情況下,用戶是不會持續使用的。

通常情況下在重視留存的産品裡,用戶需求都是需要被持續滿足的,更期待的聊天、更火爆的新聞、更劃算的商品、更有趣的活動,這都是用戶持續使用的根本原因。

如果一個産品的用戶留存總是很低,大概率就是這一步沒有做好。

在以前,這都是強運營手段的結果,現在基本都是依靠算法來支撐。随着科技的進步,通過推薦獲取對象的方式,将會越來越普及。

詳情可見之前的文章:《為什麼未來更多優質的内容隻會通過「推薦」獲得,而非「搜索」?》

尋找對象

「模塊例子:書架、通訊錄、産品、商城」

導航欄組件實例講解(導航欄設計有發現)4

這裡的尋找對應的是搜索,在前面的文章中也有說過,這是個高級行為,隻有用戶很清晰自己需要什麼,以及這個東西在哪裡時,才會去使用搜索行為。

這一點尤其體現在老用戶身上。

諸如書架、通訊錄、産品、商品這些列表類型的模塊都是起着分類作用,這個模塊主要以搜索為主,内容信息大多以庫的形式展示出來,這裡是産品對象數量瓶頸的體現。

上面兩種方式,基本是目前互聯網産品裡最常用的兩種建立關系的方法,它們所對應的業務場景各有不同,但卻部分重合。

因為新用戶會逐漸成為老用戶,老用戶又會被推薦建立新的關系,新老交替的場景切換,導緻這兩個模塊常常并列存在,互相促進。

另外部分UGC的産品,可能會選擇在導航欄中添加發布入口,這也是建立關系的一種途徑。

Step2:消費與“X”的關系

用戶之所以會和新的對象建立關系,是因為這段關系有消費價值。

例如:

  • 用戶會關注某個健身教練,希望平時也能跟着教練的課程一起鍛煉;
  • 用戶會收藏某個特價商品,希望在合适的時候把它買下來;

隻有這段關系有消費價值,才算是真正滿足了用戶需求,如果一段關系隻停留在建立的階段,一直沒有消費的入口,這就是一段無意義的流程。

就好比如在使用陌陌的時候,你不斷地添加陌生人作為好友,但卻從來沒和他們聊過天,從消費關系的角度來看,這并不構成真正意義上的陌生人社交,因為這隻是一個匹配的過程罷了。

所以必須存在一個模塊,專門是為了消費與“X”的關系:

消費關系

「模塊例子:聊天列表、購物車、關注、消息、動态」

導航欄組件實例講解(導航欄設計有發現)5

Step3:自我管理

「模塊例子:我的」

導航欄組件實例講解(導航欄設計有發現)6

顯然,這個模塊的職責就是承擔起一切關于産品賬戶、個性設定、産品交互痕迹的管理。

管理行為包括常見的:删除、編輯、查詢,這裡是用戶擁有自主度最高的地方,也是用戶歸屬感最強的區域。

基本上以上這些就是導航欄設計的底層邏輯。

我們常常會發現,很多産品在導航欄中同時出現:資訊、精選、發現等這種tab,導緻用戶短時間内根本無從下手,并不知道應該看哪一個。

這是在同一個業務步驟上,出現多個同質化模塊的錯誤做法,往往這樣子隻會瓜分原本就不多的用戶注意力,分發了源頭的頂級流量。

所以你會發現,在很多産品當中,首頁和發現就是個異常雞肋的存在:

  • 你的産品真的需要有一個首頁嗎?
  • 用戶與對象建立關系的過程當中,真的需要一個首頁來嫁接嗎?
  • 首頁在這裡到底起了什麼作用?

畢竟每多一個步驟,都能帶來不必要的流失。

雅格布的結論

在單一業務場景的産品裡面,最忌諱的就是使用同質化的導航模塊,而一條清晰易懂的導航欄是提升有效轉化的第一步。

不同類型的産品導航欄在不同的設計步驟上隻是有所側重,但絕不重複,甚至不應在文案設計上設置過多的理解障礙。

産品導航欄的設計步驟:

  • Step1:與“X”建立關系;
  • Step2:消費與“X”的關系;
  • Step3:自我管理。

#專欄作家#

雅格布,雅格布(ID:jacoblab),人人都是産品經理專欄作家。策略型産品經理,擅長需求挖掘以及産品增長,重點關注金融、遊戲和社區領域,并對此類産品從0到1有啟發性的實戰思考。

本文原創發布于人人都是産品經理。未經許可,禁止轉載。

題圖來自Unsplash,基于CC0協議。

,
Comments
Welcome to tft每日頭條 comments! Please keep conversations courteous and on-topic. To fosterproductive and respectful conversations, you may see comments from our Community Managers.
Sign up to post
Sort by
Show More Comments
推荐阅读
茂陵劉郎秋風客夜聞馬嘶曉無迹劉郎指誰
茂陵劉郎秋風客夜聞馬嘶曉無迹劉郎指誰
茂陵劉郎秋風客夜聞馬嘶曉無迹劉郎指誰?詩句“茂陵劉郎秋風客,夜聞馬嘶曉無迹”中的劉郎是指漢武帝劉徹詩句出自我國唐朝時期著名詩人李賀所作的《金銅仙人辭漢歌》,其中“茂陵”指的就是漢武帝的陵墓所以能夠得出“劉郎”就是漢武帝的結論這首詩的寫作時間...
2024-05-01
打印機顯示e5怎麼解決
打印機顯示e5怎麼解決
打印機顯示e5怎麼解決?打印機顯示e5可以通過按恢複鍵5秒鐘以上解決,要是不能識别就隻好更換墨盒了,這些問題你随便執行一個打印任務,電腦都會提示下一步怎麼操作,按照電腦操作提示即可,我來為大家科普一下關于打印機顯示e5怎麼解決?下面希望有你...
2024-05-01
st圖像的斜率代表什麼
st圖像的斜率代表什麼
我讀大學的《電路分析》課時,老師講了一句話:各種元器件的伏安特性曲線就是它們的身份證。我進入職場幾十年了,我的職場生涯告訴我,這句話是絕對真理。我們看下圖:圖1:電阻的伏安特性曲線圖1是電阻的伏安特性曲線,它的特征是一條經過原點的單調上升的...
2024-05-01
平行四邊形有幾條高
平行四邊形有幾條高
平行四邊形有幾條高?平行四邊形有無數條高随便畫一個平行四邊形,從任意一條邊上的任意一點畫出來一條垂線都是它的高,從幾何學上來看這條高線是沒有數量限制的,所以平行四邊形有無數條高,下面我們就來說一說關于平行四邊形有幾條高?我們一起去了解并探讨...
2024-05-01
魔獸世界燃燒的遠征前夕怎麼更新
魔獸世界燃燒的遠征前夕怎麼更新
魔獸世界燃燒的遠征前夕怎麼更新?我們首先要打開戰網,這樣就可以在搞定戰網更新,下面我們就來說一說關于魔獸世界燃燒的遠征前夕怎麼更新?我們一起去了解并探讨一下這個問題吧!魔獸世界燃燒的遠征前夕怎麼更新我們首先要打開戰網,這樣就可以在搞定戰網更...
2024-05-01
Copyright 2023-2024 - www.tftnews.com All Rights Reserved