成人亚洲综合,日韩高清一区二区三区五区七区,三级网址日本,亚洲激情成人,av成人在线电影,亚洲免费成人在线,超清首页国产亚洲丝袜

王M爭(zhēng)：前段時(shí)間有一個(gè)朋友問(wèn)我有沒(méi)有看到過(guò)哪款產(chǎn)品是把搜索功能放在界面中間的，然后給我發(fā)了一張?jiān)蛨D。我第一眼看到這個(gè)原型圖就覺(jué)得界面的信息布局很亂，像是把兩三

王M爭(zhēng)：前段時(shí)間有一個(gè)朋友問(wèn)我有沒(méi)有看到過(guò)哪款產(chǎn)品是把搜索功能放在界面中間的，然后給我發(fā)了一張?jiān)蛨D。我第一眼看到這個(gè)原型圖就覺(jué)得界面的信息布局很亂，像是把兩三個(gè)頁(yè)面的內(nèi)容強(qiáng)行塞到一個(gè)頁(yè)面。

界面里信息太多不知道怎么布局，我相信這個(gè)問(wèn)題大家在日常工作也經(jīng)常會(huì)遇到。內(nèi)容獲取難度的降低，意味著內(nèi)容篩選難度的提高。產(chǎn)品不斷的迭代，功能越來(lái)越多。如何避免產(chǎn)品在界面布局上越來(lái)越臃腫？「極簡(jiǎn)主義」或許是這個(gè)問(wèn)題的答案。

什么是極簡(jiǎn)主義？從字面上理解：極致簡(jiǎn)約。設(shè)計(jì)上的簡(jiǎn)約可以分為兩種：內(nèi)容簡(jiǎn)約和形式簡(jiǎn)約。以上面的那個(gè)例子來(lái)說(shuō)，搜索功能是內(nèi)容，搜索框是搜索功能的展示形式。最近騰訊推出了新的產(chǎn)品：MOO音樂(lè)，所以文章正好借著這款產(chǎn)品來(lái)聊一聊界面布局中的極簡(jiǎn)主義。

文章目錄

內(nèi)容簡(jiǎn)約

形式簡(jiǎn)約

內(nèi)容簡(jiǎn)約

我們給一個(gè)頁(yè)面做簡(jiǎn)化，第一步應(yīng)該確定界面中每一個(gè)元素存在的必要性。界面中元素那么多，但并不是每一個(gè)元素都有存在的必要，存在不一定合理。弄清楚界面中每一個(gè)元素的實(shí)際作用，進(jìn)行評(píng)估，對(duì)于一些作用有限的純裝飾性元素，為了界面的簡(jiǎn)潔，我們可以刪除。

1. 旋轉(zhuǎn)唱片

幾款常用的音樂(lè)類(lèi)應(yīng)用播放界面的主體都是一個(gè)旋轉(zhuǎn)的唱片，而 MOO音樂(lè)直接去掉了這個(gè)唱片。為什么？因?yàn)檫@個(gè)「唱片」占據(jù)了界面大約一半的空間，導(dǎo)致切換歌曲、調(diào)整播放進(jìn)度、查看歌詞/歌手/專(zhuān)輯和分享這些常用功能必須在剩下的空間里排布，顯得很擁擠。

去除這個(gè)虛擬的「唱片」給我們帶來(lái)的不僅僅是視覺(jué)上的輕量感，更意味著易用性上提升。用戶在 MOO音樂(lè)中切換歌曲、調(diào)整播放進(jìn)度、返回上一級(jí)頁(yè)面等都可以通過(guò)滑動(dòng)手勢(shì)來(lái)完成。并且它是幾款音樂(lè)產(chǎn)品中，唯一一個(gè)支持上下滑動(dòng)切換歌曲的，網(wǎng)易云音樂(lè)是左右滑動(dòng)切換歌曲，而 QQ音樂(lè)直接不支持，用戶必須點(diǎn)擊才能切換歌曲。我在之前的文章《界面設(shè)計(jì)中，交互方式是選擇滑動(dòng)還是點(diǎn)擊呢？》也提到過(guò)，滑動(dòng)手勢(shì)比點(diǎn)擊更容易受到用戶的青睞。

當(dāng)然可能會(huì)有人反駁，你看網(wǎng)易云音樂(lè)也是有唱片，但是它還是支持滑動(dòng)的。脫離手指落點(diǎn)去談手勢(shì)都是耍流氓。網(wǎng)易云音樂(lè)中手指落點(diǎn)在唱片內(nèi)是切換歌曲，落點(diǎn)在唱片外是返回上一級(jí)頁(yè)面，落點(diǎn)稍有不慎就會(huì)造成誤操作。而 MOO音樂(lè)是上下滑動(dòng)切換歌曲，左滑動(dòng)返回上一界面。手指落點(diǎn)更模糊，用戶也就可以減少找位置的時(shí)間，用戶體驗(yàn)更好。

此外網(wǎng)易云音樂(lè)中用戶要播放/暫停歌曲必須點(diǎn)擊播放/暫停按鈕，而在 MOO音樂(lè)中只要點(diǎn)擊屏幕內(nèi)的任何位置就可以完成這一操作。為什么 MOO音樂(lè)可以這么任性？因?yàn)榭臻g大，不怕用戶會(huì)誤操作。

2. 去線化

去線化設(shè)計(jì)是極簡(jiǎn)主義的一大特征。在 MOO音樂(lè)中，我沒(méi)有找到一條分割線。要知道為什么 MOO音樂(lè)可以選擇去除分割線，我們首先要弄清楚分割線在界面布局中到底起什么作用。分割線主要是幫助用戶區(qū)分界面中不同級(jí)別和維度的內(nèi)容，完成信息層級(jí)的構(gòu)建。

分割線可以分為兩種：通欄分割線和非通欄分割線。通欄分割線顧名思義就是指分割線貫穿整個(gè)屏幕，而非通欄分割線一般會(huì)留有缺口。要了解兩者的區(qū)別，我們可以看虎撲，虎撲之前的版本就是通欄分割線，而最新的版本中改成了非通欄分割線。

通欄分割線因?yàn)椤阜指睢沽苏麄€(gè)屏幕，所以在內(nèi)容區(qū)分上更加的明顯，更能表現(xiàn)不同的模塊之間的獨(dú)立性。但是它的缺點(diǎn)在于線條的存在會(huì)阻礙用戶的瀏覽視線，影響信息的獲取效率。

可能會(huì)有人說(shuō)，既然線條的存在會(huì)影響信息的瀏覽效率，為什么只有 MOO音樂(lè)完全貫徹了去線化設(shè)計(jì)呢？我們?cè)倏匆粋€(gè)例子，我把微信朋友圈中的分割線給去掉，大家感受一下前后的區(qū)別。

我們可以發(fā)現(xiàn)去掉線條后，朋友圈的界面會(huì)稍顯雜亂。這是因?yàn)榕笥讶χ袃?nèi)容類(lèi)別有很多，你可以發(fā)純文字動(dòng)態(tài)、分享歌曲、視頻和文章。你上傳照片張數(shù)不一樣展示的效果也是不一樣的。

而 MOO音樂(lè)中的界面布局恪守著嚴(yán)格的規(guī)則，整個(gè)界面有規(guī)律可循。所以我們可以把分割線看成是一堵墻，它可以把雜亂無(wú)序的信息強(qiáng)行區(qū)分歸類(lèi)，而對(duì)于本來(lái)信息布局就很有條理的頁(yè)面來(lái)說(shuō)我們完全可以考慮去除分割線，直接使用間距來(lái)完成視覺(jué)區(qū)分。

不止是線條，我還發(fā)現(xiàn) MOO音樂(lè)中很少出現(xiàn)頁(yè)面標(biāo)題。標(biāo)題的作用是告訴用戶當(dāng)前正在瀏覽的是什么頁(yè)面，但是用戶根據(jù)內(nèi)容也能感知到這是一個(gè)什么頁(yè)面。標(biāo)題的作用不是很大，我們可以刪除。大家可能會(huì)說(shuō)，反正這里空著也是空著，加上線條和標(biāo)題應(yīng)該無(wú)傷大雅?？墒菢O簡(jiǎn)主義所追求的就是刪除這些可有可無(wú)的雞肋元素。

形式簡(jiǎn)約

如果我們無(wú)法刪減內(nèi)容量，那么我們就要思考「同樣的內(nèi)容我們是否可以尋求更為簡(jiǎn)潔的表現(xiàn)方式？」。例如同樣的歌曲播放條，MOO音樂(lè)做的比 QQ音樂(lè)要小，這樣對(duì)界面遮擋的更少。

但是這樣的簡(jiǎn)化更多是流于表面，怎么從更深層級(jí)進(jìn)行簡(jiǎn)化呢？這里我列舉出三個(gè)優(yōu)化點(diǎn)：臨時(shí)視圖、隱藏機(jī)制和功能性動(dòng)效。

1. 臨時(shí)視圖

我們都習(xí)慣于將頁(yè)面作為內(nèi)容的容器，導(dǎo)致頁(yè)面內(nèi)容過(guò)于臃腫。其實(shí)對(duì)于某些內(nèi)容，我們可以考慮使用一些臨時(shí)視圖來(lái)承載。

為什么大多數(shù)產(chǎn)品把搜索功能放在界面頂部而不是中間？因?yàn)橛脩羰褂盟阉鞴δ艿念l率很高，我們必須要保證它對(duì)用戶來(lái)說(shuō)是觸手可及的，可以很容易的被發(fā)現(xiàn)。所以我們會(huì)把搜索框放在界面頂部，如果我們想把搜索功能放在其他位置，必須解決一個(gè)問(wèn)題——如何在不依靠位置的前提下凸顯搜索功能的優(yōu)先級(jí)？

以鏈家中的「地圖找房」功能，這個(gè)搜索功能就出現(xiàn)在界面中間，它這里使用的是浮窗，并且加了陰影，拉近與用戶之間的「距離」。離用戶越近的元素，用戶也更容易感知，在界面布局中引入 Z軸的縱向維度。

2. 隱藏機(jī)制

隱藏機(jī)制所代表的是一種靈活的布局思路。界面中有那么多功能，但并不是每一個(gè)功能用戶都是全程需要的。如果我們可以感知到用戶在某些場(chǎng)景下對(duì)特定的功能訴求很低，那么我們就可以考慮隱藏這個(gè)功能。

在 MOO音樂(lè)中，當(dāng)用戶向上滑動(dòng)，頂部的搜索框是隱藏的；當(dāng)用戶向下滑動(dòng)，搜索框是展示的。為什么這樣處理呢？因?yàn)楫?dāng)用戶向上滑動(dòng)，說(shuō)明用戶在瀏覽今日推薦的音樂(lè)信息，對(duì)于搜索框的訴求不是很大。為了可以給用戶提供更多的瀏覽空間，我們考慮隱藏搜索框。但是當(dāng)用戶向下滑動(dòng)，最可能的場(chǎng)景是用戶對(duì)當(dāng)前推薦的歌曲不滿意，他需要回到頂部手動(dòng)搜索歌曲，那么這個(gè)時(shí)候再展示搜索框是很合適的。

3. 功能性動(dòng)效

功能性動(dòng)效的合理使用可以很好的緩解頁(yè)面布局的壓力。以喜馬拉雅FM 為例，身為產(chǎn)品方，為了提升用戶粘性，我肯定希望用戶去錄音上傳作品，所以我們將這個(gè)「錄音」按鈕做成大色塊的樣式，的確很醒目。但是這種處理方式使界面失衡，在改版后，使用動(dòng)效進(jìn)行引導(dǎo)。當(dāng)用戶首次進(jìn)入這個(gè)頁(yè)面，「我要錄音」按鈕會(huì)出現(xiàn)水波紋動(dòng)效，來(lái)吸引用戶注意力。

類(lèi)似的案例還有當(dāng)用戶點(diǎn)贊歌曲時(shí)，網(wǎng)易云音樂(lè)和 QQ音樂(lè)都會(huì)出現(xiàn)動(dòng)效引導(dǎo)用戶去分享歌曲。當(dāng)你點(diǎn)贊這首歌，我們可以默認(rèn)你很欣賞這首歌，那么何不把這首歌分享給你的朋友呢？抓住合適的時(shí)間做引導(dǎo)/誘導(dǎo)，用戶更容易去分享。如果我們不考慮這個(gè)場(chǎng)景，把分享按鈕做的特別醒目，對(duì)于不想分享的用戶來(lái)說(shuō)反而是一個(gè)干擾。

總結(jié)

這就是我對(duì)界面布局中的「極簡(jiǎn)主義」做的一個(gè)總結(jié)，歡迎留言討論。