最近剛做完一個(gè)項(xiàng)目，我發(fā)現(xiàn)我的設(shè)計(jì)效率相比之前竟然提升了30%以上，在以前做界面時(shí)總是會(huì)糾結(jié)采用什么樣式，什么布局。而現(xiàn)在再看了原型之后就大概知道我要怎么做了，沒有了以前做頁面時(shí)的糾結(jié)，效率自然提升了。
我想著主要是因?yàn)槠綍r(shí)長(zhǎng)期的分析總結(jié)的結(jié)果，我能夠很明確的知道什么時(shí)候該用什么交互方式，什么時(shí)候該用什么樣式。因此今天我就針對(duì)UI設(shè)計(jì)中個(gè)人頁面設(shè)計(jì)攻略進(jìn)行簡(jiǎn)單的說明。
一、個(gè)人中心是什么?
個(gè)人中心是App中所有功能點(diǎn)的集合入口，在這里可以查看個(gè)人資料、個(gè)人相關(guān)信息、以及其他相關(guān)功能界面等。
在應(yīng)用中一般有兩種界面我們需要分清楚，那就是個(gè)人中心和個(gè)人主頁的區(qū)別，個(gè)人中心是個(gè)人信息和功能的集合入口，我們通常叫“我的”，只有用戶自己能看到;而個(gè)人主頁展示我發(fā)布的動(dòng)態(tài)等，其他人可以看到。而今天我們要分析功能較為復(fù)雜的個(gè)人中心頁面。
二、個(gè)人中心設(shè)計(jì)的目的
1、個(gè)人信息的展示(讓用戶進(jìn)來就知道這是我的個(gè)人中心，而不是張三或李四的。
2、功能入口設(shè)計(jì)(功能入口可是個(gè)人中心頁面主模塊，清晰的展現(xiàn)方式可以幫助用戶高效實(shí)用
3、突出核心功能入口(突出核心功能入口，比如電商APP中我的訂單是用戶常用入口，因此該模塊需要將其突出設(shè)計(jì)，拉開和其他功能入口的差異，幫助用戶快速操作。
個(gè)人信息區(qū)
個(gè)人信息區(qū)相當(dāng)于是一個(gè)定位，用戶進(jìn)來首先需要看到的個(gè)人信息，其優(yōu)先級(jí)最高，因此常常放在界面的開頭。由于該界面的主要作用是強(qiáng)調(diào)功能入口和突出重要功能，因此不會(huì)使用大量的面積來對(duì)頭部進(jìn)行設(shè)計(jì)。
同時(shí)用很小的區(qū)域來展示頭像信息，因此在個(gè)人中心中我們常常采用頭像和信息左右擺放的方式進(jìn)行設(shè)計(jì)，這樣可以讓空間展示效果最小，同時(shí)效果更好。
在設(shè)計(jì)時(shí)，個(gè)人信息區(qū)雖然受限于空間，但是由于功能區(qū)“太素”，因此這部分設(shè)計(jì)往往我們對(duì)其背景進(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)格來定即可。
功能入口設(shè)計(jì)
個(gè)人中心其核心模塊其實(shí)就是功能入口，因此清晰、有層次的布局尤為重要，功能入口我大概統(tǒng)計(jì)了有2種表現(xiàn)形式:列表式、宮格式。
1、列表式
列表式是最常見的展現(xiàn)方式，UI設(shè)計(jì)中個(gè)人頁面設(shè)計(jì)攻略https://www.aaa-cg.com.cn/ui/2592.html?gpf其優(yōu)勢(shì)是層次展現(xiàn)清晰，靈活性高，方便信息后期擴(kuò)展。其展現(xiàn)方式往往是圖標(biāo)+文字，圖標(biāo)主要根據(jù)產(chǎn)品整體圖標(biāo)風(fēng)格而定，這里就不在贅述。
其缺點(diǎn)是，如果同級(jí)過多時(shí)，容易產(chǎn)生疲勞;視覺樣式弱，視覺區(qū)分層級(jí)較差;只能通過排列順序、顏色來區(qū)分各入口重要程度。
使用場(chǎng)景:多用于工具類和閱讀類的APP中，不適合電商類功能模塊較為復(fù)雜的APP中。
2、宮格式
宮格式也就是將頁面劃分為若干相同的區(qū)塊，相關(guān)聯(lián)的可分為一一個(gè)區(qū)塊，其優(yōu)勢(shì)是可以強(qiáng)化功能操作;頁面視覺效果更好。其缺點(diǎn)是在層次上不如列表式清晰簡(jiǎn)潔，會(huì)增加用戶使用成本;另外不利于后期擴(kuò)展，會(huì)出現(xiàn)了一行只有一個(gè)功能入口的情況。
使用場(chǎng)景:由于其視覺效果好，可以強(qiáng)化功能操作，因此我們看到很多電商、外賣、團(tuán)購、短視頻等都采用該展現(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)格而定。
比如百度外賣采用了較為簡(jiǎn)潔的粗線性圖標(biāo)設(shè)計(jì)，和底部的面型圖標(biāo)拉開差距，提升界面細(xì)節(jié)表現(xiàn)力。而YY的設(shè)計(jì)風(fēng)格就是線+面，讓整個(gè)界面顯得活潑。
三、突出核心功能入口
每個(gè)界面都有它的核心功能，不會(huì)出現(xiàn)整個(gè)界面都是核心的情況，這樣就和沒有核心是一個(gè)意思。
尤其是當(dāng)個(gè)人中心功能入口較多，同時(shí)還要加入運(yùn)營等功能入口，如果我們單獨(dú)采用列表形式，會(huì)讓整個(gè)界面過長(zhǎng)，雖然層次清晰，但是視覺效果差，容易導(dǎo)致視覺疲勞。同時(shí)也不容易突出核心功能入口，那么我們可以怎么做呢?
宮格+列表對(duì)比
將功能入口分為不同的模塊，然后采用宮格式+列表式的組合方式來進(jìn)行對(duì)比，能夠很好的突出宮格里的內(nèi)容。同時(shí)可以采用差異化圖標(biāo)、分塊、以及差異化的顏色等來強(qiáng)調(diào)核心功能入口。
差異化圖標(biāo)
采用差異化圖標(biāo)，也就是和原有的圖標(biāo)風(fēng)格、大小等存在大的差異，這樣即使同樣的結(jié)構(gòu)也能讓核心功能入口脫穎而出。
利用圖片進(jìn)行突出
圖片相比于圖標(biāo)、文字是最容易引起用戶點(diǎn)擊的。因此如果你想特別突出你的功能入口，那么不妨試試采用圖片的形式突出。
總結(jié)
以上通過對(duì)個(gè)人中心的分析，大概講解了我們?cè)谧鲰撁鏁r(shí)的思考過程,以上就是本周我對(duì)于界面的分析的思考希望對(duì)你有幫助。因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息，請(qǐng)給我點(diǎn)個(gè)關(guān)注，我會(huì)繼續(xù)發(fā)包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。
