輕量化設(shè)計(jì)總結(jié)

2020-11-22    ui設(shè)計(jì)分享達(dá)人

「輕量化」是近兩年來設(shè)計(jì)圈一個(gè)比較火的話題,什么是輕量化?從字面意思上來看「輕量」的反義詞就是臃腫、拖沓,反映到產(chǎn)品設(shè)計(jì)中就是界面內(nèi)容過載,操作步驟繁瑣。如果非要用一個(gè)字來定義,那就是“多”,內(nèi)容多,步驟多。


我們需要清楚,“多”來自于用戶的主觀感受,我們無法給出一個(gè)具體的數(shù)據(jù)指標(biāo)來判定到底是不是“多”。用戶會在什么時(shí)候覺得多呢?日常生活經(jīng)驗(yàn)告訴我,當(dāng)對方覺得你沒用的時(shí)候,你就會顯得多余。如果這個(gè)界面中的每一個(gè)功能對于用戶來說都是高頻操作,那么用戶是不會嫌多的。所以「輕量化設(shè)計(jì)」的主要思路可以歸納為:在用戶不需要你的時(shí)候不要出來瞎得瑟。


場景


問題來了:用戶什么時(shí)候需要我?首先我們應(yīng)該從功能層面入手,因?yàn)楫a(chǎn)品是一個(gè)個(gè)功能的組合體。頁面內(nèi)容臃腫問題的源頭是功能過載,在這個(gè)問題上,很多設(shè)計(jì)師吐槽自己扮演的是一個(gè)背鍋俠的角色。其實(shí)我也不想在這個(gè)頁面里塞這么多東西,但是這些功能我們必須展示給用戶啊,要不然用戶都不知道還有這個(gè)功能。


要解決這個(gè)問題,我們需要引入「場景」的概念。什么是場景?我們可以將場景理解為「外部環(huán)境」。


外部環(huán)境影響用戶的感知,感知決定了用戶的行為。只有身處于特定的場景,用戶的行為才會被觸發(fā)。在有網(wǎng)場景下,用戶啟動網(wǎng)易云音樂,進(jìn)入的是首頁。在無網(wǎng)場景下,用戶進(jìn)入的是我的音樂。因?yàn)橛芯W(wǎng),用戶“聽新歌”行為的可能性更大,無網(wǎng)聽已經(jīng)下載好的歌曲。


功能也是一樣,用戶需要這個(gè)功能,但并不是每一個(gè)場景都需要這個(gè)功能。有些比較冷門的功能,用戶只有在特定的場景才會想起使用,那么我們就可以只在那個(gè)特定的場景中展示該功能。


我們看一下兩款競品的歌曲播放界面,我們可以很明顯的發(fā)現(xiàn),酷我音樂的界面更加簡潔明了。當(dāng)然你可能會說,那是因?yàn)榭峁芬魳方o用戶提供了更多的功能。

undefined

其實(shí)并沒有,兩款產(chǎn)品提供的功能都是一樣多的。只是酷我音樂做了場景化區(qū)分,以K歌功能為例,酷我音樂的處理方案是:當(dāng)用戶點(diǎn)擊查看歌詞的時(shí)候才會展示“K歌”的話筒圖標(biāo),因?yàn)楫?dāng)用戶查看歌詞的時(shí)候,提醒引導(dǎo)用戶去K歌更加合適。


undefined

這個(gè)方案的確可以簡化界面元素,但是也帶來了另一個(gè)問題:如果用戶不查看歌詞,那就不知道原來還有k歌功能,無法給K歌功能做到有效的引流。的確如此,沒有一個(gè)完美的設(shè)計(jì)方案,任何一個(gè)設(shè)計(jì)方案都無法做到可以兼顧各方的利益。設(shè)計(jì)師的作用就是盡可能去發(fā)現(xiàn)和解決界面中最主要的矛盾點(diǎn),而不是所有的矛盾點(diǎn)。


我們再來看一個(gè)歌曲播放界面的例子,現(xiàn)在很多產(chǎn)品都提供了AI電臺功能,所謂AI電臺就是根據(jù)你的聽歌記錄,分析你的喜愛,據(jù)此來給播放你可能感興趣的歌曲。我們之前聽歌需要手動搜索相關(guān)信息,在搜索結(jié)果(歌曲、專輯、歌單等)里查找。AI電臺的出現(xiàn)大大節(jié)省了用戶的操作步驟,那么我們來思考一個(gè)問題:與常規(guī)的場景相比,在AI電臺里播放的歌曲,界面上我們應(yīng)該做哪些改動?


undefined

AI電臺模式最大的區(qū)別就是隨機(jī)性。因?yàn)檫@歌是根據(jù)你的喜好隨機(jī)推薦的,你不知道會聽到這首歌,也不知道這首歌后面有哪些歌。這個(gè)就導(dǎo)致了播放模式這個(gè)功能很雞肋,蝦米音樂的AI電臺就沒有提供切換播放模式功能。


1 列表循環(huán) :我都不知道列表里有哪些歌曲,怎么循環(huán)?


2 隨機(jī)播放 :現(xiàn)在不就是隨機(jī)播放嗎?


3 單曲循環(huán):這是唯一一個(gè)用戶有需求的場景;


其實(shí)AI電臺推薦的歌曲也是有歌單的,用戶點(diǎn)擊播放列表圖標(biāo)就可以看到。這里提供了切換歌曲模式的功能,讓用戶看到了播放列表才可以選擇歌曲模式。


undefined


入口


當(dāng)我們確定了功能的最適用場景,我們接下來的任務(wù)就是如何合理的設(shè)計(jì)功能的入口。


1)入口分類


不同的層級的功能,在界面中的展示方式是不一樣的。這里我們可以分為三類:常態(tài)類、更多類和隱藏類。


比較重要的功能一般都在界面中有常態(tài)的入口,而優(yōu)先級比較低的功能,我們會選擇使用臨時(shí)視圖來承載,入口放到“更多”類按鈕里,用戶需要點(diǎn)擊才能查看。


undefined

優(yōu)先級的功能在界面中沒有實(shí)體的入口,需要用戶的手勢來觸發(fā)。例如,在抖音中,用戶長按視頻可以喚起三個(gè)功能:保存、收藏不敢興趣。這三個(gè)功能抖音做的如此隱蔽,就是希望用戶不去使用。


undefined

1 保存:為什么保存到手機(jī)看?來抖音看吧


2 收藏:既然喜歡這個(gè)視頻,為什么只收藏不轉(zhuǎn)發(fā)一下,讓更多人看到


3 不感興趣:emmmm


2)入口分類


哪怕是同一個(gè)功能,位于不同的場景,我們也要對入口樣式做出調(diào)整。例如,在音頻類產(chǎn)品中,為了方便用戶在不同的場景都可以快速的進(jìn)入播放界面,會在界面底部加上播放條。


undefined

但是我們也可以發(fā)現(xiàn)上圖中企鵝FM播放條的空間利用率很低,有大面積的留白。那么到了二級頁面,我們可以嘗試修改播放條的樣式,減少對界面內(nèi)容的遮擋。


undefined

類似的處理方式還有淘寶,當(dāng)用戶在首頁下滑一屏左右,那么底部欄原首頁圖標(biāo)變成了火箭,用戶點(diǎn)擊火箭可以直接返回至頂部,不用額外新增一個(gè)浮動按鈕作為入口。


undefined


總結(jié)


以上就是我個(gè)人對于「輕量化」設(shè)計(jì)的簡單思考和總結(jié),如果您有不同的意見或者看法,歡迎留言或者加群討論。

轉(zhuǎn)自-站酷

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制  用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

分享本文至:

日歷

鏈接

個(gè)人資料

存檔