本文授權轉自:體驗進階(ID:Advanced_UX)
我經常在一些小公司的軟件或者設計師作品集上看到這種成堆的圖標入口。
這種設計看起來不像是 UI,倒像是遙控器。可就算是遙控器,人家的按鈕也是有不同大小、形狀和排列方式的。這種毫無設計感的圖標陣列,用戶體驗連遙控器都不如。
倒不是說這種圖標入口不能用。很多大廠App也用圖標入口,但是都很克制,像淘寶這樣的電商現在縮到只剩一行了。
也就是支付寶這種不太在意用戶體驗的金融類 app 才敢排到三行以上。
但有些設計呢,首頁整版都是這種App入口。就會讓人懷疑這個設計師是不是不了解這些功能入口的優先級,才把它們如此平均地排列出來。
可能設計師接到的需求是這樣的:“你給我做一個首頁,要有這些功能,我跟你列出來了就按著這個來做吧。”
設計師問:“這些功能都是干嘛的?最重要的是哪些?”
對方說:“你不用知道那么多,快點出方案吧。每個客戶的需求都不一樣,很難說哪個是最重要的。”
這樣一來,唯一的解決辦法就是把這些入口全部列出來平鋪在首頁。這樣用戶不管需要哪個功能,總能找到入口。
但是這顯然不是最優的設計方式。
因為用戶極少會平均地使用產品的所有功能,通常是主要圍著幾個少數功能反復用,其余大部分功能都是很長時間才用一次,甚至從來都用不到一次——這就是二八法則。例如大部分用微信就是聊天和付款、用營業廳 app 就是查余額和交話費、用銀行 app 就是查存款和轉賬。
因此,更合理的設計方法不是將所有功能入口都平鋪展示,而是重點展示幾個常用功能,方便用戶一進來就能用到。而對于那些不常用的功能,藏得深點也沒問題,反而減少視線干擾。
前提是你得要對用戶場景分析透徹,可以確切的知道哪幾個功能是大部分用戶經常用到的。否則如果你把用戶不常用的功能重點突出,把常用的功能藏起來,那樣反而更糟!
假設你真能分析清楚用戶場景, 知道核心用戶場景是啥,對應什么核心功能,那么接下來該怎么設計方案呢?原本的圖標陣列可以怎么改?
我總結了三種方式,給大家參考。
1. 頁面展示:導航設計
如果核心功能只有一個(也就是說大部分用戶常用功能只有一個),那就可以把這個功能做成一整頁,然后通過導航的方式切換其它功能。
資訊類的產品,很多都會這樣設計。像是微信、小紅書、抖音等。主要功能就在首頁攤開,用戶一進來就可以用,不需要點擊任何入口。
2. 模塊展示:卡片設計
如果核心功能沒那么多信息量,不用鋪開一整頁,那可以做成一個卡片模塊。
或者需要強化的功能不止一個,不能單獨占一頁,也可以做成幾個卡片模塊。
很多工具類的產品都是這樣設計的,例如 12306 的火車票搜索模塊:
以及我之前夸過的豐巢快遞模塊:
這種卡片的好處是,用戶不需要點擊進入下級頁面就能開始使用功能,哪怕只是閱讀了解一些信息。而圖標入口對用戶而言,沒有辦法提供任何幫助,必須點進去進入下級頁面才能使用。
3. 按鈕展示:按鈕強化
如果核心功能不方便直接展示出來,那就只能展示入口。但是為了強調這個核心功能入口,必須通過尺寸、樣式、布局等方式,將其做得更顯眼一些。這樣用戶才能一眼看到核心功能入口,不至于在一堆圖標或按鈕中找半天浪費時間。
像是美圖秀秀,就把圖片美化和相機入口做得特別大:
有道詞典的 AI 翻譯和同步傳譯,也是類似的樣式:
閑魚的“賣閑置”按鈕,也是在底導航很突出:
強調的入口越少越好,最好在 3 個以內,這樣才不會給用戶選擇壓力。
別看只是調整一兩個入口,體現不出什么設計水平或工作量。只要這兩個入口是大部分用戶的常用功能,或者業務想推廣的亮點功能,這設計對用戶或業務都是切實的價值——對用戶來說是更方便節約時間,對業務來說是增加轉化率。
其實大部分人的問題
還是不懂用戶場景
每次遇到那種“缺乏亮點”的方案,我都會問:“用戶為什么來這里,最正常用的功能是什么?”
然后,設計師果然就支支吾吾答不上來了。
接下來,我就想辦法引導對方告訴我其它已知背景信息,然后幫助推測出用戶的核心場景。一旦核心場景明確了,方案就可以圍繞核心場景來設計,知道哪里該突出、哪里該弱化。然后,很快方案就能從“缺乏亮點”變得“樣式獨特”或者“價值明確”。
這里面的問題,一方面是意識——很多設計師以為自己知道用戶是誰就算分析完用戶了,但到了具體頁面就模糊了。
另一方面,是對用戶行為模式不熟悉——用戶帶著一個很明確的目的來這個頁面后,會有怎樣的行為?是把整個頁面掃描一遍,還是光憑直覺亂點?
至于預判用戶行為后具體要怎樣設計,這里也有問題,但卡在這里的少一些。
在科技浪潮奔涌向前的當下,人工智能正深刻重塑我們的生活與工作。人機之間的關系,也從簡單交互邁向深度協作。想知道如何在這一趨勢下把握體驗設計的新方向嗎?2025 年 10 月將在北京舉辦的 IXDC 國際體驗設計大會聚焦 “人機共生:人工智能時代人機協作新范式” ,作為全球領先的用戶體驗創新盛會,它將匯聚前沿理念與實踐。一起來關注這場盛會,探索人機協作的無限可能。
文章轉載:體驗進階,版權歸原作者所有
原文鏈接:https://mp.weixin.qq.com/s/oM89UEoqqyaR0YinfSBF5w
版權聲明:“IXDC”所推送的文章,除非確實無法確認,我們都會注明作者和來源,本公眾號對轉載、分享的內容、陳述、觀點判斷保持中立,不對所包含內容的準確性、可靠性或完善性提供任何明或暗示的保證,僅供讀者參考。部分文章推送時未能與原作者取得聯系,若涉及內容或作品等版權問題,煩請原作者聯系我們,給出內容所在的網址并提供相關證明資料,我們會核查后立即更正或者刪除有關內容!本公眾號不承擔任何責任,并擁有對此聲明的最終解釋權。
聯系微信:18802086168
聯系電話:18802086168
編排 | 黃春燕
終審 | 蘇 菁
點這里,學習更多設計知識!
特別聲明:以上內容(如有圖片或視頻亦包括在內)為自媒體平臺“網易號”用戶上傳并發布,本平臺僅提供信息存儲服務。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.