讓頁面布局變得簡單

前段時間有一個朋友微信問我有沒有看到過哪款產品把搜索功能放在界面中間的，然后給我發了一張原型圖。

我第一眼看到這個原型圖就覺得界面的信息布局很亂，像是把兩三個頁面的內容強行塞到一個頁面。界面里信息太多不知道怎么布局，我相信這個問題大家在日常工作也經常會遇到。內容獲取難度的降低，意味著內容篩選難度的提高。產品不斷的迭代，功能越來越多。如何使產品避免在界面布局上越來越臃腫？——“極簡主義”或許是這個問題的答案。

什么是極簡主義？從字面上理解：極致簡約。設計上的簡約可以分為兩種：內容簡約和形式簡約。以上面的那個例子來說，搜索功能是內容，搜索框是搜索功能的展示形式。最近騰訊推出了新的產品：moo音樂，所以我這篇文章正好借著分析這款產品來聊一聊界面布局中的極簡主義。

內容簡約

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

1）旋轉唱片幾款常用的音樂類應用播放界面的主體都是一個旋轉的唱片，而moo音樂直接去掉了這個唱片。為什么？因為這個“唱片”占據了界面大約一半的空間，導致切換歌曲、調整播放進度、查看歌詞/歌手/專輯和分享這些常用功能必須在剩下的空間里排布，顯得很擁擠。

去除這個虛擬的“唱片”給我們帶來不僅僅是視覺上的輕量感，更意味著易用性上提升。用戶在moo音樂中切換歌曲、調整播放進度、返回上一級頁面等都可以通過滑動手勢來完成。并且它是幾款音樂產品中，唯一一個支持上下滑動切換歌曲的，網易云音樂是左右滑動切換歌曲，而qq音樂直接不支持，用戶必須點擊才能切換歌曲。我在之前的文章用戶體驗之點擊和滑動也提到過，滑動手勢比點擊更容易受到用戶的青睞。

當然可能會有人反駁，你看網易云音樂也是有唱片，但是它還是支持滑動的。脫離手指落點去談手勢都是耍流氓。網易云音樂中手指落點在唱片內是切換歌曲，落點在唱片外是返回上一級頁面，落點稍有不慎就會造成誤操作。而moo音樂是上下滑動切換歌曲，左滑動返回上一界面。手指落點更模糊，用戶也就可以減少找位置的時間，用戶體驗更好。

此外網易云音樂中用戶要播放/暫停歌曲必須點擊播放/暫停按鈕，而moo音樂中你只要點擊屏幕中任何位置就可以完成這一操作。為什么moo音樂可以這么任性？因為空間大，不怕用戶會誤操作。

2）去線化

去線化設計是極簡主義的一大特征。在moo音樂中，我沒有找到一條分割線。要知道為什么moo音樂可以選擇去除分割線，我們首先要弄清楚分割線在界面布局中到底起什么作用。分割線主要是幫助用戶區分界面中不同級別和維度的內容，完成信息層級的構建。分割線可以分為兩種：通欄分割線和非通欄分割線。

通欄分割線顧名思義就是指分割線貫穿整個屏幕，而非通欄分割線一般會留有缺口。要了解這倆的區別，我們可以看虎撲，虎撲之前的版本就是通欄分割線，而最新的版本中改成了非通欄分割線。

本文標題：讓頁面布局變得簡單
分享URL：http://m.kartarina.com/news/106548.html

成都網站建設公司_創新互聯，為您提供網站建設、網站設計公司、全網營銷推廣、軟件開發、定制開發、響應式網站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯