UI設計中個人頁面設計攻略

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

　　我想著主要是因為平時長期的分析總結的結果，我能夠很明確的知道什么時候該用什么交互方式，什么時候該用什么樣式。因此今天AAA教育郭老師就針對UI設計中個人頁面設計攻略進行簡單的說明。
 

　　一、個人中心是什么?
 

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

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

 

　　二、個人中心設計的目的
 

　　1、個人信息的展示(讓用戶進來就知道這是我的個人中心，而不是張三或李四的。
 

　　2、功能入口設計(功能入口可是個人中心頁面主模塊，清晰的展現(xiàn)方式可以幫助用戶高效實用
 

　　3、突出核心功能入口(突出核心功能入口，比如電商APP中我的訂單是用戶常用入口，因此該模塊需要將其突出設計，拉開和其他功能入口的差異，幫助用戶快速操作。
 

　　個人信息區(qū)
 

　　個人信息區(qū)相當于是一個定位，用戶進來首先需要看到的個人信息，其優(yōu)先級最高，因此常常放在界面的開頭。由于該界面的主要作用是強調功能入口和突出重要功能，因此不會使用大量的面積來對頭部進行設計。
 

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

 

　　在設計時，個人信息區(qū)雖然受限于空間，但是由于功能區(qū)“太素”，因此這部分設計往往我們對其背景進行設計，起到視覺引導的作用，同時讓整個界面更有層次感。背景我們可以加底紋、漸變、扁平化背景等。
 

　　當然，并不是所有個人信息都要設計這么緊湊，如果各種中心功能入口較少，為了版面更加豐富，視覺效果更好，我們可以將這塊區(qū)域設計得高一點。

 

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

　　功能入口設計
 

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

　　1、列表式
 

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

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

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

 

　　2、宮格式
 

　　宮格式也就是將頁面劃分為若干相同的區(qū)塊，相關聯(lián)的可分為一一個區(qū)塊，其優(yōu)勢是可以強化功能操作;頁面視覺效果更好。其缺點是在層次上不如列表式清晰簡潔，會增加用戶使用成本;另外不利于后期擴展，會出現(xiàn)了一行只有一個功能入口的情況。
 

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

 

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

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

　　三、突出核心功能入口
 

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

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

　　宮格+列表對比
 

　　將功能入口分為不同的模塊，然后采用宮格式+列表式的組合方式來進行對比，能夠很好的突出宮格里的內容。同時可以采用差異化圖標、分塊、以及差異化的顏色等來強調核心功能入口。

 

　　差異化圖標
 

　　采用差異化圖標，也就是和原有的圖標風格、大小等存在大的差異，這樣即使同樣的結構也能讓核心功能入口脫穎而出。

 

　　利用圖片進行突出
 

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

 

　　總結
 

　　以上通過對個人中心的分析，大概講解了我們在做頁面時的思考過程,以上就是本周我對于界面的分析的思考希望對你有幫助。因此，您現(xiàn)在已經(jīng)了解了與UI設計師的工作相關的主要技能。如果您想了解更多信息，請訪問AAA教育，包含有關在該領域工作的更多相關文章。