“效率”一直以來是被很多職業(yè)人強(qiáng)調(diào)的一詞，我們都知道工作效率的重要性，也一直在尋找能夠提高效率的方法。本文作者通過實(shí)踐經(jīng)驗(yàn)，給各位設(shè)計(jì)師們提供了一些提高設(shè)計(jì)效率的點(diǎn)子。

最近剛做完一個(gè)項(xiàng)目，我發(fā)現(xiàn)我的設(shè)計(jì)效率相比之前竟然提升了30%以上，在以前做界面時(shí)總是會糾結(jié)采用什么樣式，什么布局。而現(xiàn)在在看了原型之后就大概知道我要怎么做了，沒有了以前做頁面時(shí)的糾結(jié)，效率自然提升了。

我想著主要是因?yàn)槠綍r(shí)長期的分析總結(jié)的結(jié)果，我能夠很明確的知道什么時(shí)候該用什么交互方式，什么時(shí)候該用什么樣式。因此今天想拿“個(gè)人中心頁面從思考到設(shè)計(jì)全過程”和大家分享一下。在設(shè)計(jì)前我們需要想兩個(gè)問題：

• 個(gè)人中心是什么？
• 個(gè)人中心設(shè)計(jì)的目的？

一、個(gè)人中心是什么

個(gè)人中心是APP中所有功能點(diǎn)的集合入口，在這里可以查看個(gè)人資料、個(gè)人相關(guān)信息、以及其他相關(guān)功能界面等。

在應(yīng)用中一般有兩種界面我們需要分清楚，那就是個(gè)人中心和個(gè)人主頁的區(qū)別，個(gè)人中心是個(gè)人信息和功能的集合入口，我們通常叫“我的”，只有用戶自己能看到；而個(gè)人主頁展示我發(fā)布的動態(tài)等，其他人可以看到。而今天我們要分析功能較為復(fù)雜的個(gè)人中心頁面。

二、個(gè)人中心設(shè)計(jì)的目的

1. 個(gè)人信息的展示（讓用戶進(jìn)來就知道這是我的個(gè)人中心，而不是張三或李四的）。
2. 功能入口設(shè)計(jì)（功能入口可是個(gè)人中心頁面主模塊，清晰的展現(xiàn)方式可以幫助用戶高效實(shí)用）。
3. 突出核心功能入口（突出核心功能入口，比如電商APP中我的訂單是用戶常用入口，因此該模塊需要將其突出設(shè)計(jì)，拉開和其他功能入口的差異，幫助用戶快速操作）。

1. 個(gè)人信息區(qū)

個(gè)人信息區(qū)相當(dāng)于是一個(gè)定位，用戶進(jìn)來首先需要看到的個(gè)人信息，其優(yōu)先級最高，因此常常放在界面的開頭。

由于該界面的主要作用是強(qiáng)調(diào)功能入口和突出重要功能，因此不會使用大量的面積來對頭部進(jìn)行設(shè)計(jì)。

同時(shí)用很小的區(qū)域來展示頭像信息，因此在個(gè)人中心中我們常常采用頭像和信息左右擺放的方式進(jìn)行設(shè)計(jì)，這樣可以讓空間展示效果最小，同時(shí)效果更好。

在設(shè)計(jì)時(shí)，個(gè)人信息區(qū)雖然受限于空間，但是由于功能區(qū)“太素”，因此這部分設(shè)計(jì)往往我們對其背景進(jìn)行設(shè)計(jì)，起到視覺引導(dǎo)的作用，同時(shí)讓整個(gè)界面更有層次感。

背景我們可以加底紋、漸變、扁平化背景等。當(dāng)然，并不是所有個(gè)人信息都要設(shè)計(jì)這么緊湊，如果各種中心功能入口較少，為了版面更加豐富，視覺效果更好，我們可以將這塊區(qū)域設(shè)計(jì)得高一點(diǎn)。

在設(shè)計(jì)時(shí)，我們可以采用類似京東金融的卡片式設(shè)計(jì)，也可以采用日日煮的色塊方式，也可以采用螞蟻短租的大圖背景方式。具體采用哪種方式從你的產(chǎn)品整體設(shè)計(jì)風(fēng)格來定即可。

2. 功能入口設(shè)計(jì)

個(gè)人中心其核心模塊其實(shí)就是功能入口，因此清晰、有層次的布局尤為重要，功能入口我大概統(tǒng)計(jì)了有2種表現(xiàn)形式：列表式、宮格式。

2.1 列表式

列表式是最常見的展現(xiàn)方式，其優(yōu)勢是層次展現(xiàn)清晰，靈活性高，方便信息后期擴(kuò)展。其展現(xiàn)方式往往是圖標(biāo)+文字，圖標(biāo)主要根據(jù)產(chǎn)品整體圖標(biāo)風(fēng)格而定，這里就不在贅述。

其缺點(diǎn)是，如果同級過多時(shí)，容易產(chǎn)生疲勞；視覺樣式弱，視覺區(qū)分層級較差；只能通過排列順序、顏色來區(qū)分各入口重要程度。

使用場景：多用于工具類和閱讀類的APP中，不適合電商類功能模塊較為復(fù)雜的APP中。

另外在列表設(shè)計(jì)中，我們還可以根據(jù)業(yè)務(wù)分類進(jìn)行列表分組，以方便用戶瀏覽查看。

比如上圖支付寶將賬單、總資產(chǎn)、余額、余額寶、銀行卡我的資產(chǎn)部分分為一組；芝麻信用、保險(xiǎn)服務(wù)、花唄等功能入口分為一組；其他幾個(gè)例如微信、得到、搜狐新聞、網(wǎng)易新聞、百度閱讀從上圖可以看到，都是將相關(guān)聯(lián)的分為一組。

這么做的目的其實(shí)就是增加界面層次，讓用戶更快速的找到需要的信息或入口。

2.2 宮格式

宮格式也就是將頁面劃分為若干相同的區(qū)塊，相關(guān)聯(lián)的可分為一個(gè)區(qū)塊。

其優(yōu)勢是可以強(qiáng)化功能操作；頁面視覺效果更好。其缺點(diǎn)是在層次上不如列表式清晰簡潔，會增加用戶使用成本；另外不利于后期擴(kuò)展，會出現(xiàn)一行只有一個(gè)功能入口的情況。

使用場景：由于其視覺效果好，可以強(qiáng)化功能操作，因此我們看到很多電商、外賣、團(tuán)購、短視頻等都采用該展現(xiàn)形式，同時(shí)對于一些功能入口較少的APP，采用宮格式也可以讓整個(gè)界面效果更豐富。

從上面的案列可以看出，宮格式設(shè)計(jì)圖標(biāo)占比較重，因此在設(shè)計(jì)時(shí)，圖標(biāo)是設(shè)計(jì)的重點(diǎn)，我們可以采用線性圖標(biāo)、線+面、面型圖標(biāo)進(jìn)行設(shè)計(jì)，其設(shè)計(jì)風(fēng)格同樣根據(jù)整體規(guī)范的設(shè)計(jì)風(fēng)格而定。

比如百度外賣采用了較為簡潔的粗線性圖標(biāo)設(shè)計(jì)，和底部的面型圖標(biāo)拉開差距，提升界面細(xì)節(jié)表現(xiàn)力。而YY的設(shè)計(jì)風(fēng)格就是線+面，讓整個(gè)界面顯得活潑。

三、突出核心功能入口

每個(gè)界面都有它的核心功能，不會出現(xiàn)整個(gè)界面都是核心的情況，這樣就和沒有核心是一個(gè)意思。

尤其是當(dāng)個(gè)人中心功能入口較多，同時(shí)還要加入運(yùn)營等功能入口，如果我們單獨(dú)采用列表形式，會讓整個(gè)界面過長，雖然層次清晰，但是視覺效果差，容易導(dǎo)致視覺疲勞。同時(shí)也不容易突出核心功能入口，那么我們可以怎么做呢？

1. 宮格+列表對比

將功能入口分為不同的模塊，然后采用宮格式+列表式的組合方式來進(jìn)行對比，能夠很好的突出宮格里的內(nèi)容。同時(shí)可以采用差異化圖標(biāo)、分塊、以及差異化的顏色等來強(qiáng)調(diào)核心功能入口。

• 以京東金融為例，它的功能區(qū)布局方式就是將核心功能區(qū)簽到、每日打卡、日歷、任務(wù)等能夠促進(jìn)用戶粘性的模塊以宮格式展現(xiàn)，同時(shí)用差異化的圖標(biāo)進(jìn)行強(qiáng)調(diào)。
• 以百度錢包為例，他把用戶經(jīng)常用的交易記錄、卡卷包、選擇銀行卡用宮格式布局，其他資產(chǎn)入口則是采用列表展現(xiàn)。
• 以大眾點(diǎn)評為例，它將收藏、待點(diǎn)評、榜單、最新瀏覽、好友、訂單模塊、卡券、積分、錢包等信息采用宮格式表現(xiàn)，其中對于大眾點(diǎn)評最突出的功能就是收藏、待點(diǎn)評、榜單、最新瀏覽、好友這五大信息。因此圖標(biāo)做了差異化的漸變設(shè)計(jì)，拉開和其他內(nèi)容的差距。最后將一些不重要的會員等級、每日福利等信息用列表形式展現(xiàn)。

2. 差異化圖標(biāo)

采用差異化圖標(biāo)，也就是和原有的圖標(biāo)風(fēng)格、大小等存在大的差異，這樣即使同樣的結(jié)構(gòu)也能讓核心功能入口脫穎而出。

以百度糯米為例，你是不是第一眼就被惠看球、吃大餐、訂球場、特價(jià)房4個(gè)特殊的足球圖標(biāo)吸引。

以蘇寧為例，新人特權(quán)采用瓷磚塊的形式，同時(shí)圖標(biāo)和其他功能圖標(biāo)形成差異，也很容易就將新人特權(quán)這一模塊進(jìn)行突出了。

3. 利用圖片進(jìn)行突出

圖片相比于圖標(biāo)、文字是最容易引起用戶點(diǎn)擊的。因此如果你想特別突出你的功能入口，那么不妨試試采用圖片的形式突出。

以天貓為例，我分別將其第一二屏截圖，我們可以看到天貓的個(gè)人中心信息量較大，整體采用了宮格式+圖片列表式+宮格式。

從上圖我們可以看出，雖然我的訂單是用戶較為常用的功能，置于個(gè)人信息區(qū)下方，同時(shí)也在整個(gè)界面的黃金分割位置上，同時(shí)圖標(biāo)采用紅色和我的收藏的圖標(biāo)進(jìn)行差異化處理。但是作為電商類APP，用戶留存和轉(zhuǎn)化才是關(guān)鍵，因此積分兌紅包、三單有禮、天貓超市卡等采用了banner圖片的方式來進(jìn)行突出，用更多看得見的優(yōu)惠來留住用戶繼續(xù)操作。

四、總結(jié)

以上通過對個(gè)人中心的分析，大概講解了我們在做頁面時(shí)的思考過程，在設(shè)計(jì)前，我們需要問自己兩個(gè)問題，這個(gè)頁面是什么？這個(gè)頁面為什么這么做？也就是設(shè)計(jì)的目的是什么。

搞懂了這兩個(gè)問題最后我們就要分析怎么做？我們可以根據(jù)設(shè)計(jì)目的進(jìn)行一一分析，比如個(gè)人中心頁面我的目的是個(gè)人信息區(qū)的展示、功能入口設(shè)計(jì)、突出核心功能入口三個(gè)方面。

那么我們就從這三個(gè)目的在進(jìn)行分析該怎么做？比如個(gè)人信息區(qū)由于其優(yōu)先級最高，而重要性低，因此常常置于頁面頂部，但是設(shè)計(jì)占比需盡可能小，從而將界面空間留給重要性高的功能入口區(qū)。

通過分析頭像和信息采用左右結(jié)構(gòu)最小，這樣我們就能夠確定該如何布局了。而風(fēng)格和我們產(chǎn)品的整體風(fēng)格一致這個(gè)就很容易搞定了。

然后是功能區(qū)展示，往往有兩種展現(xiàn)形式列表和網(wǎng)格，列表其表現(xiàn)層次清晰但是視覺表現(xiàn)較差，往往用于工具類、閱讀類產(chǎn)品；宮格式由于其視覺表現(xiàn)好、但層次表現(xiàn)差，往往用于功能入口較少的情況。

最后對于突出核心功能入口我們可以采用列表+宮格對比，圖標(biāo)的差異化對比，圖片的差異化對比等方式。

以上就是本周我對于界面的分析的思考，希望對你有幫助。

參考鏈接：http://www.ui.cn/detail/225387.html《會員中心如何設(shè)計(jì)，用戶才會買單？》

作者：風(fēng)箏KK，公眾號：海鹽社

本文由 @ 風(fēng)箏KK 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議