起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識用一個案例，告訴你如何把工作效率提高30%！
“效率”一直以來是被很多職業人強調的一詞，我們都知道工作效率的重要性，也一直在尋找能夠提高效率的方法。本文作者通過實踐經驗，給各位設計師們提供了一些提高設計效率的點子。
最近剛做完一個項目，我發現我的設計效率相比之前竟然提升了30%以上，在以前做界面時總是會糾結采用什么樣式，什么布局。而現在在看了原型之后就大概知道我要怎么做了，沒有了以前做頁面時的糾結，效率自然提升了。
我想著主要是因為平時長期的分析總結的結果，我能夠很明確的知道什么時候該用什么交互方式，什么時候該用什么樣式。因此今天想拿“個人中心頁面從思考到設計全過程”和大家分享一下。在設計前我們需要想兩個問題：
- 個人中心是什么？
- 個人中心設計的目的？
一、個人中心是什么
個人中心是APP中所有功能點的集合入口，在這里可以查看個人資料、個人相關信息、以及其他相關功能界面等。
在應用中一般有兩種界面我們需要分清楚，那就是個人中心和個人主頁的區別，個人中心是個人信息和功能的集合入口，我們通常叫“我的”，只有用戶自己能看到；而個人主頁展示我發布的動態等，其他人可以看到。而今天我們要分析功能較為復雜的個人中心頁面。
二、個人中心設計的目的
- 個人信息的展示（讓用戶進來就知道這是我的個人中心，而不是張三或李四的）。
- 功能入口設計（功能入口可是個人中心頁面主模塊，清晰的展現方式可以幫助用戶高效實用）。
- 突出核心功能入口（突出核心功能入口，比如電商APP中我的訂單是用戶常用入口，因此該模塊需要將其突出設計，拉開和其他功能入口的差異，幫助用戶快速操作）。
1. 個人信息區
個人信息區相當于是一個定位，用戶進來首先需要看到的個人信息，其優先級最高，因此常常放在界面的開頭。
由于該界面的主要作用是強調功能入口和突出重要功能，因此不會使用大量的面積來對頭部進行設計。
同時用很小的區域來展示頭像信息，因此在個人中心中我們常常采用頭像和信息左右擺放的方式進行設計，這樣可以讓空間展示效果最小，同時效果更好。
在設計時，個人信息區雖然受限于空間，但是由于功能區“太素”，因此這部分設計往往我們對其背景進行設計，起到視覺引導的作用，同時讓整個界面更有層次感。
背景我們可以加底紋、漸變、扁平化背景等。當然，并不是所有個人信息都要設計這么緊湊，如果各種中心功能入口較少，為了版面更加豐富，視覺效果更好，我們可以將這塊區域設計得高一點。
在設計時，我們可以采用類似京東金融的卡片式設計，也可以采用日日煮的色塊方式，也可以采用螞蟻短租的大圖背景方式。具體采用哪種方式從你的產品整體設計風格來定即可。
2. 功能入口設計
個人中心其核心模塊其實就是功能入口，因此清晰、有層次的布局尤為重要，功能入口我大概統計了有2種表現形式：列表式、宮格式。
2.1 列表式
列表式是最常見的展現方式，其優勢是層次展現清晰，靈活性高，方便信息后期擴展。其展現方式往往是圖標+文字，圖標主要根據產品整體圖標風格而定，這里就不在贅述。
其缺點是，如果同級過多時，容易產生疲勞；視覺樣式弱，視覺區分層級較差；只能通過排列順序、顏色來區分各入口重要程度。
使用場景：多用于工具類和閱讀類的APP中，不適合電商類功能模塊較為復雜的APP中。
另外在列表設計中，我們還可以根據業務分類進行列表分組，以方便用戶瀏覽查看。
比如上圖支付寶將賬單、總資產、余額、余額寶、銀行卡我的資產部分分為一組；芝麻信用、保險服務、花唄等功能入口分為一組；其他幾個例如微信、得到、搜狐新聞、網易新聞、百度閱讀從上圖可以看到，都是將相關聯的分為一組。
這么做的目的其實就是增加界面層次，讓用戶更快速的找到需要的信息或入口。
2.2 宮格式
宮格式也就是將頁面劃分為若干相同的區塊，相關聯的可分為一個區塊。
其優勢是可以強化功能操作；頁面視覺效果更好。其缺點是在層次上不如列表式清晰簡潔，會增加用戶使用成本；另外不利于后期擴展，會出現一行只有一個功能入口的情況。
使用場景：由于其視覺效果好，可以強化功能操作，因此我們看到很多電商、外賣、團購、短視頻等都采用該展現形式，同時對于一些功能入口較少的APP，采用宮格式也可以讓整個界面效果更豐富。
從上面的案列可以看出，宮格式設計圖標占比較重，因此在設計時，圖標是設計的重點，我們可以采用線性圖標、線+面、面型圖標進行設計，其設計風格同樣根據整體規范的設計風格而定。
比如百度外賣采用了較為簡潔的粗線性圖標設計，和底部的面型圖標拉開差距，提升界面細節表現力。而YY的設計風格就是線+面，讓整個界面顯得活潑。
三、突出核心功能入口
每個界面都有它的核心功能，不會出現整個界面都是核心的情況，這樣就和沒有核心是一個意思。
尤其是當個人中心功能入口較多，同時還要加入運營等功能入口，如果我們單獨采用列表形式，會讓整個界面過長，雖然層次清晰，但是視覺效果差，容易導致視覺疲勞。同時也不容易突出核心功能入口，那么我們可以怎么做呢？
1. 宮格+列表對比
將功能入口分為不同的模塊，然后采用宮格式+列表式的組合方式來進行對比，能夠很好的突出宮格里的內容。同時可以采用差異化圖標、分塊、以及差異化的顏色等來強調核心功能入口。
- 以京東金融為例，它的功能區布局方式就是將核心功能區簽到、每日打卡、日歷、任務等能夠促進用戶粘性的模塊以宮格式展現，同時用差異化的圖標進行強調。
- 以百度錢包為例，他把用戶經常用的交易記錄、卡卷包、選擇銀行卡用宮格式布局，其他資產入口則是采用列表展現。
- 以大眾點評為例，它將收藏、待點評、榜單、最新瀏覽、好友、訂單模塊、卡券、積分、錢包等信息采用宮格式表現，其中對于大眾點評最突出的功能就是收藏、待點評、榜單、最新瀏覽、好友這五大信息。因此圖標做了差異化的漸變設計，拉開和其他內容的差距。最后將一些不重要的會員等級、每日福利等信息用列表形式展現。
2. 差異化圖標
采用差異化圖標，也就是和原有的圖標風格、大小等存在大的差異，這樣即使同樣的結構也能讓核心功能入口脫穎而出。
以百度糯米為例，你是不是第一眼就被惠看球、吃大餐、訂球場、特價房4個特殊的足球圖標吸引。
以蘇寧為例，新人特權采用瓷磚塊的形式，同時圖標和其他功能圖標形成差異，也很容易就將新人特權這一模塊進行突出了。
3. 利用圖片進行突出
圖片相比于圖標、文字是最容易引起用戶點擊的。因此如果你想特別突出你的功能入口，那么不妨試試采用圖片的形式突出。
以天貓為例，我分別將其第一二屏截圖，我們可以看到天貓的個人中心信息量較大，整體采用了宮格式+圖片列表式+宮格式。
從上圖我們可以看出，雖然我的訂單是用戶較為常用的功能，置于個人信息區下方，同時也在整個界面的黃金分割位置上，同時圖標采用紅色和我的收藏的圖標進行差異化處理。但是作為電商類APP，用戶留存和轉化才是關鍵，因此積分兌紅包、三單有禮、天貓超市卡等采用了banner圖片的方式來進行突出，用更多看得見的優惠來留住用戶繼續操作。
四、總結
以上通過對個人中心的分析，大概講解了我們在做頁面時的思考過程，在設計前，我們需要問自己兩個問題，這個頁面是什么？這個頁面為什么這么做？也就是設計的目的是什么。
搞懂了這兩個問題最后我們就要分析怎么做？我們可以根據設計目的進行一一分析，比如個人中心頁面我的目的是個人信息區的展示、功能入口設計、突出核心功能入口三個方面。
那么我們就從這三個目的在進行分析該怎么做？比如個人信息區由于其優先級最高，而重要性低，因此常常置于頁面頂部，但是設計占比需盡可能小，從而將界面空間留給重要性高的功能入口區。
通過分析頭像和信息采用左右結構最小，這樣我們就能夠確定該如何布局了。而風格和我們產品的整體風格一致這個就很容易搞定了。
然后是功能區展示，往往有兩種展現形式列表和網格，列表其表現層次清晰但是視覺表現較差，往往用于工具類、閱讀類產品；宮格式由于其視覺表現好、但層次表現差，往往用于功能入口較少的情況。
最后對于突出核心功能入口我們可以采用列表+宮格對比，圖標的差異化對比，圖片的差異化對比等方式。
以上就是本周我對于界面的分析的思考，希望對你有幫助。
參考鏈接：http://www.ui.cn/detail/225387.html《會員中心如何設計，用戶才會買單？》
作者：風箏KK，公眾號：海鹽社
本文由 @ 風箏KK 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
可以
可以
可以
可以
可以