UI設(shè)計(jì)中個(gè)人頁(yè)面設(shè)計(jì)攻略

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

　　我想著主要是因?yàn)槠綍r(shí)長(zhǎng)期的分析總結(jié)的結(jié)果，我能夠很明確的知道什么時(shí)候該用什么交互方式，什么時(shí)候該用什么樣式。因此今天AAA教育郭老師就針對(duì)UI設(shè)計(jì)中個(gè)人頁(yè)面設(shè)計(jì)攻略進(jìn)行簡(jiǎn)單的說(shuō)明。
 

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

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

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

 

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

　　1、個(gè)人信息的展示(讓用戶(hù)進(jìn)來(lái)就知道這是我的個(gè)人中心，而不是張三或李四的。
 

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

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

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

　　個(gè)人信息區(qū)相當(dāng)于是一個(gè)定位，用戶(hù)進(jìn)來(lái)首先需要看到的個(gè)人信息，其優(yōu)先級(jí)最高，因此常常放在界面的開(kāi)頭。由于該界面的主要作用是強(qiáng)調(diào)功能入口和突出重要功能，因此不會(huì)使用大量的面積來(lái)對(duì)頭部進(jìn)行設(shè)計(jì)。
 

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

 

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

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

 

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

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

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

　　1、列表式
 

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

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

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

 

　　2、宮格式
 

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

　　使用場(chǎng)景:由于其視覺(jué)效果好，可以強(qiáng)化功能操作，因此我們看到很多電商、外賣(mài)、團(tuán)購(gòu)、短視頻等都采用該展現(xiàn)形式，同時(shí)對(duì)于一些功能入口較少的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)格而定。
 

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

　　三、突出核心功能入口
 

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

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

　　宮格+列表對(duì)比
 

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

 

　　差異化圖標(biāo)
 

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

 

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

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

 

　　總結(jié)
 

　　以上通過(guò)對(duì)個(gè)人中心的分析，大概講解了我們?cè)谧鲰?yè)面時(shí)的思考過(guò)程,以上就是本周我對(duì)于界面的分析的思考希望對(duì)你有幫助。因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息，請(qǐng)?jiān)L問(wèn)AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。