設(shè)計萌新第一次自己完整做的一個原型作品，這里截取個人中心界面的三次修改來分析如何使界面布局更有層次感。

V1.0

這是第一版，做的是一個社區(qū)電商的個人中心頁面，功能排布比較全面，主體采用網(wǎng)格式的布局，核心功能做成卡片式放在用戶名下面。整體排布中規(guī)中矩，符合現(xiàn)今大部分產(chǎn)品的排布方式，把占位符換成圖標來看也不會顯得單調(diào)，乍一看有微信的錢包界面的感覺。

但是，微信的錢包界面中各個功能之間沒有太強的主次之分，可以這樣排布。在個人中心界面中，購物車收藏夾這些明顯是主要的功能按鈕，需要突出顯示。我的訂單、我的購物這些功能是二級次要的內(nèi)容，我的服務(wù)等等是三級次要的內(nèi)容，不能把這些統(tǒng)一以一個層級展示，看起來沒有區(qū)分度，原型界面更是像一堆大餅攤在一起。

V2.0

第二版中，我的訂單和我的購物欄目沒變，把我的服務(wù)欄目拆分成我的信息和我的服務(wù)兩個欄目，同時換成了列表式的排列方式。層級上有一定的提升，但還是不夠。幫助、客服和設(shè)置這三個功能屬于非常邊緣的功能，放在這么顯眼的地方有點浪費空間。

V3.0

這是第三版。這一版中首先把幫助、設(shè)置、客服這三個功能都弱化了，設(shè)置放在右上角，幫助和客服放在頁面底部并用灰度圖標表示。同時把我的購物和我的信息欄目整合刪減，綁定銀行卡和綁定手機號整合到安全中心，積分和禮品卡整合到會員中心，把會員、優(yōu)惠券、安全中心、收貨地址重新整合成我的服務(wù)。

這樣一來整體界面的層次感就比較強，主要功能和次要功能之間的安排相對得當(dāng)，功能之間的關(guān)系也更清楚，方便用戶一下找到自己想用的功能，比最開始的攤大餅好很多。

總的來說，層次感的把控在界面布局中非常重要，在設(shè)計時一定要將功能的優(yōu)先級進行分類，做 到設(shè)計上區(qū)分輕重緩急，讓用戶能一下抓到重點。

謝謝觀看，歡迎拍磚。