2020-11-22 ui設(shè)計(jì)分享達(dá)人
「輕量化」是近兩年來(lái)設(shè)計(jì)圈一個(gè)比較火的話(huà)題，什么是輕量化？從字面意思上來(lái)看「輕量」的反義詞就是臃腫、拖沓，反映到產(chǎn)品設(shè)計(jì)中就是界面內(nèi)容過(guò)載，操作步驟繁瑣。如果非要用一個(gè)字來(lái)定義，那就是“多”，內(nèi)容多，步驟多。
我們需要清楚，“多”來(lái)自于用戶(hù)的主觀感受，我們無(wú)法給出一個(gè)具體的數(shù)據(jù)指標(biāo)來(lái)判定到底是不是“多”。用戶(hù)會(huì)在什么時(shí)候覺(jué)得多呢？日常生活經(jīng)驗(yàn)告訴我，當(dāng)對(duì)方覺(jué)得你沒(méi)用的時(shí)候，你就會(huì)顯得多余。如果這個(gè)界面中的每一個(gè)功能對(duì)于用戶(hù)來(lái)說(shuō)都是高頻操作，那么用戶(hù)是不會(huì)嫌多的。所以「輕量化設(shè)計(jì)」的主要思路可以歸納為：在用戶(hù)不需要你的時(shí)候不要出來(lái)瞎得瑟。
場(chǎng)景
問(wèn)題來(lái)了：用戶(hù)什么時(shí)候需要我？首先我們應(yīng)該從功能層面入手，因?yàn)楫a(chǎn)品是一個(gè)個(gè)功能的組合體。頁(yè)面內(nèi)容臃腫問(wèn)題的源頭是功能過(guò)載，在這個(gè)問(wèn)題上，很多設(shè)計(jì)師吐槽自己扮演的是一個(gè)背鍋俠的角色。其實(shí)我也不想在這個(gè)頁(yè)面里塞這么多東西，但是這些功能我們必須展示給用戶(hù)啊，要不然用戶(hù)都不知道還有這個(gè)功能。
要解決這個(gè)問(wèn)題，我們需要引入「場(chǎng)景」的概念。什么是場(chǎng)景？我們可以將場(chǎng)景理解為「外部環(huán)境」。
外部環(huán)境影響用戶(hù)的感知，感知決定了用戶(hù)的行為。只有身處于特定的場(chǎng)景，用戶(hù)的行為才會(huì)被觸發(fā)。在有網(wǎng)場(chǎng)景下，用戶(hù)啟動(dòng)網(wǎng)易云音樂(lè)，進(jìn)入的是首頁(yè)。在無(wú)網(wǎng)場(chǎng)景下，用戶(hù)進(jìn)入的是我的音樂(lè)。因?yàn)橛芯W(wǎng)，用戶(hù)“聽(tīng)新歌”行為的可能性更大，無(wú)網(wǎng)聽(tīng)已經(jīng)下載好的歌曲。
功能也是一樣，用戶(hù)需要這個(gè)功能，但并不是每一個(gè)場(chǎng)景都需要這個(gè)功能。有些比較冷門(mén)的功能，用戶(hù)只有在特定的場(chǎng)景才會(huì)想起使用，那么我們就可以只在那個(gè)特定的場(chǎng)景中展示該功能。
我們看一下兩款競(jìng)品的歌曲播放界面，我們可以很明顯的發(fā)現(xiàn)，酷我音樂(lè)的界面更加簡(jiǎn)潔明了。當(dāng)然你可能會(huì)說(shuō)，那是因?yàn)榭峁芬魳?lè)給用戶(hù)提供了更多的功能。
其實(shí)并沒(méi)有，兩款產(chǎn)品提供的功能都是一樣多的。只是酷我音樂(lè)做了場(chǎng)景化區(qū)分，以K歌功能為例，酷我音樂(lè)的處理方案是：當(dāng)用戶(hù)點(diǎn)擊查看歌詞的時(shí)候才會(huì)展示“K歌”的話(huà)筒圖標(biāo)，因?yàn)楫?dāng)用戶(hù)查看歌詞的時(shí)候，提醒引導(dǎo)用戶(hù)去K歌更加合適。
這個(gè)方案的確可以簡(jiǎn)化界面元素，但是也帶來(lái)了另一個(gè)問(wèn)題：如果用戶(hù)不查看歌詞，那就不知道原來(lái)還有k歌功能，無(wú)法給K歌功能做到有效的引流。的確如此，沒(méi)有一個(gè)完美的設(shè)計(jì)方案，任何一個(gè)設(shè)計(jì)方案都無(wú)法做到可以兼顧各方的利益。設(shè)計(jì)師的作用就是盡可能去發(fā)現(xiàn)和解決界面中最主要的矛盾點(diǎn)，而不是所有的矛盾點(diǎn)。
我們?cè)賮?lái)看一個(gè)歌曲播放界面的例子，現(xiàn)在很多產(chǎn)品都提供了AI電臺(tái)功能，所謂AI電臺(tái)就是根據(jù)你的聽(tīng)歌記錄，分析你的喜愛(ài)，據(jù)此來(lái)給播放你可能感興趣的歌曲。我們之前聽(tīng)歌需要手動(dòng)搜索相關(guān)信息，在搜索結(jié)果（歌曲、專(zhuān)輯、歌單等）里查找。AI電臺(tái)的出現(xiàn)大大節(jié)省了用戶(hù)的操作步驟，那么我們來(lái)思考一個(gè)問(wèn)題：與常規(guī)的場(chǎng)景相比，在AI電臺(tái)里播放的歌曲，界面上我們應(yīng)該做哪些改動(dòng)？
AI電臺(tái)模式最大的區(qū)別就是隨機(jī)性。因?yàn)檫@歌是根據(jù)你的喜好隨機(jī)推薦的，你不知道會(huì)聽(tīng)到這首歌，也不知道這首歌后面有哪些歌。這個(gè)就導(dǎo)致了播放模式這個(gè)功能很雞肋，蝦米音樂(lè)的AI電臺(tái)就沒(méi)有提供切換播放模式功能。
1 列表循環(huán) ：我都不知道列表里有哪些歌曲，怎么循環(huán)？
2 隨機(jī)播放 ：現(xiàn)在不就是隨機(jī)播放嗎？
3 單曲循環(huán)：這是唯一一個(gè)用戶(hù)有需求的場(chǎng)景；
其實(shí)AI電臺(tái)推薦的歌曲也是有歌單的，用戶(hù)點(diǎn)擊播放列表圖標(biāo)就可以看到。這里提供了切換歌曲模式的功能，讓用戶(hù)看到了播放列表才可以選擇歌曲模式。
入口
當(dāng)我們確定了功能的最適用場(chǎng)景，我們接下來(lái)的任務(wù)就是如何合理的設(shè)計(jì)功能的入口。
1）入口分類(lèi)
不同的層級(jí)的功能，在界面中的展示方式是不一樣的。這里我們可以分為三類(lèi)：常態(tài)類(lèi)、更多類(lèi)和隱藏類(lèi)。
比較重要的功能一般都在界面中有常態(tài)的入口，而優(yōu)先級(jí)比較低的功能，我們會(huì)選擇使用臨時(shí)視圖來(lái)承載，入口放到“更多”類(lèi)按鈕里，用戶(hù)需要點(diǎn)擊才能查看。
優(yōu)先級(jí)的功能在界面中沒(méi)有實(shí)體的入口，需要用戶(hù)的手勢(shì)來(lái)觸發(fā)。例如，在抖音中，用戶(hù)長(zhǎng)按視頻可以喚起三個(gè)功能：保存、收藏和不敢興趣。這三個(gè)功能抖音做的如此隱蔽，就是希望用戶(hù)不去使用。
1 保存：為什么保存到手機(jī)看？來(lái)抖音看吧
2 收藏：既然喜歡這個(gè)視頻，為什么只收藏不轉(zhuǎn)發(fā)一下，讓更多人看到
3 不感興趣：emmmm
2）入口分類(lèi)
哪怕是同一個(gè)功能，位于不同的場(chǎng)景，我們也要對(duì)入口樣式做出調(diào)整。例如，在音頻類(lèi)產(chǎn)品中，為了方便用戶(hù)在不同的場(chǎng)景都可以快速的進(jìn)入播放界面，會(huì)在界面底部加上播放條。
但是我們也可以發(fā)現(xiàn)上圖中企鵝FM播放條的空間利用率很低，有大面積的留白。那么到了二級(jí)頁(yè)面，我們可以嘗試修改播放條的樣式，減少對(duì)界面內(nèi)容的遮擋。
類(lèi)似的處理方式還有淘寶，當(dāng)用戶(hù)在首頁(yè)下滑一屏左右，那么底部欄原首頁(yè)圖標(biāo)變成了火箭，用戶(hù)點(diǎn)擊火箭可以直接返回至頂部，不用額外新增一個(gè)浮動(dòng)按鈕作為入口。
總結(jié)
以上就是我個(gè)人對(duì)于「輕量化」設(shè)計(jì)的簡(jiǎn)單思考和總結(jié)，如果您有不同的意見(jiàn)或者看法，歡迎留言或者加群討論。
轉(zhuǎn)自-站酷
藍(lán)藍(lán)設(shè)計(jì)( www.gyxygd.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.gyxygd.cn