我的頁(yè)面就是大多數(shù)應(yīng)用底部導(dǎo)航中的最后一個(gè)選項(xiàng)，是個(gè)人中心的板塊，用于管理你的賬號(hào)信息、數(shù)據(jù)、服務(wù)，以及實(shí)現(xiàn)對(duì)應(yīng)用本身的相關(guān)設(shè)置。
我的頁(yè)面通常在具有賬戶系統(tǒng)的應(yīng)用中才會(huì)使用，如果沒(méi)有賬戶系統(tǒng)的基礎(chǔ)應(yīng)用（如天氣、日歷工具）就沒(méi)有使用它的必要。
而還有兩個(gè)類似的頁(yè)面類型很容易和我的頁(yè)面搞混，一個(gè)是用戶個(gè)人主頁(yè)，一個(gè)是系統(tǒng)設(shè)置頁(yè)面，在這里我們做個(gè)簡(jiǎn)單的區(qū)分。
用戶個(gè)人主頁(yè)是用戶在應(yīng)用內(nèi)的公共空間展示的頁(yè)面，比如你在社區(qū)里發(fā)個(gè)動(dòng)態(tài)，其它用戶點(diǎn)擊你頭像進(jìn)入的這個(gè)頁(yè)面叫個(gè)人主頁(yè)，而不是我的頁(yè)面。一個(gè)應(yīng)用內(nèi)可以既有個(gè)人主頁(yè)也有我的頁(yè)面。
而設(shè)置頁(yè)通常有更強(qiáng)的指向性，即圍繞在特定方向進(jìn)行功能設(shè)置的頁(yè)面，有用戶資料設(shè)置，也有系統(tǒng)/應(yīng)用設(shè)置頁(yè)面。在沒(méi)有賬戶系統(tǒng)的應(yīng)用中，往往只有系統(tǒng)設(shè)置頁(yè)面，而有賬戶系統(tǒng)的應(yīng)用，也可能既有我的頁(yè)面也有賬戶、應(yīng)用設(shè)置頁(yè)面。
了解完它的定義，下一步就是認(rèn)識(shí)它的設(shè)計(jì)趨勢(shì)。很多人可能認(rèn)為我的頁(yè)面只是一個(gè)簡(jiǎn)單的基礎(chǔ)頁(yè)面，不需要投入太多的設(shè)計(jì)精力，實(shí)際上這是一種誤區(qū)，我的頁(yè)面的設(shè)計(jì)權(quán)重在今天并不低，而且它有往更復(fù)雜方向演進(jìn)的趨勢(shì)。
如果從邏輯理論推理，我的頁(yè)面就是一個(gè)基礎(chǔ)支撐型功能頁(yè)面，它的作用就是讓用戶可以找到自己在應(yīng)用內(nèi)添加和生成的數(shù)據(jù)，或進(jìn)行一些基礎(chǔ)的設(shè)置。
單說(shuō)它對(duì)比首頁(yè)、頻道、商品列表等頁(yè)面來(lái)說(shuō)肯定是沒(méi)有太多分量的。但是，分量不夠不代表它的訪問(wèn)量就低…越是會(huì)產(chǎn)生用戶數(shù)據(jù)和記錄的應(yīng)用中，我的頁(yè)面訪問(wèn)的占比也就越大。
比如電商中你要看訂單、社區(qū)里你要看帖子、健身工具里要看健康指數(shù)等等。我的頁(yè)面訪問(wèn)量往往是一個(gè)應(yīng)用內(nèi)單一頁(yè)面訪問(wèn)量的前幾名。
既然有訪問(wèn)量，放在今天的市場(chǎng)環(huán)境當(dāng)然是要打主意的。也就是它不能只是個(gè)功能頁(yè)面，還要承載更多的運(yùn)營(yíng)需求和引流曝光。
運(yùn)營(yíng)需求最容易理解，就是要在這個(gè)頁(yè)面中放運(yùn)營(yíng)相關(guān)的活動(dòng)展示。甚至有些應(yīng)用中在進(jìn)入我的頁(yè)面以后還會(huì)有獨(dú)立的彈窗（比如你又有20W貸款到賬了），給用戶一點(diǎn)小小的“驚喜”。
至于引流和曝光上面，最常見(jiàn)的目標(biāo)有兩個(gè)，一個(gè)是會(huì)員，另一個(gè)是信息流。會(huì)員是很多應(yīng)用中的重要?jiǎng)?chuàng)收手段，且它和個(gè)人信息是高度相關(guān)的，所以會(huì)非常重視會(huì)員模塊的露出，吸引用戶查看和點(diǎn)擊。另一個(gè)信息流則和應(yīng)用類型有關(guān)，電商類會(huì)推商品信息流，社交類會(huì)推動(dòng)態(tài)信息流，讓用戶即使在我的頁(yè)面，也可能一不注意，就開(kāi)始刷起來(lái)。
了解完我的頁(yè)面的重要性，下面就要知道我們應(yīng)該如何來(lái)完成它的頁(yè)面設(shè)計(jì)了。
我的頁(yè)面的布局并不算復(fù)雜，常見(jiàn)的模塊包含用戶信息、會(huì)員模塊、快速入口、選項(xiàng)列表、信息流等。
頂部用戶信息模塊，就是放用戶基本信息的模塊。在以前的設(shè)計(jì)中還會(huì)有較強(qiáng)的個(gè)性化展示空間，比如預(yù)留區(qū)域展示頭像、背景等，但在今天這種設(shè)計(jì)越來(lái)越少見(jiàn)了，一方面是沒(méi)必要，另一方面是要騰空間來(lái)放更多別的東西。
而用戶個(gè)人信息包含賬戶名、昵稱、ID、等級(jí)等基本信息，還包括一些和會(huì)員關(guān)系極大的基本數(shù)據(jù)，比如關(guān)注量、粉絲數(shù)、點(diǎn)贊量，具體放什么由產(chǎn)品決定。
接著就是會(huì)員模塊，會(huì)員和用戶有很強(qiáng)的關(guān)聯(lián)性，所以這兩個(gè)模塊往往是連在一起，或是嵌套關(guān)系。會(huì)員模塊會(huì)展示用戶當(dāng)前的會(huì)員等級(jí)，往往也會(huì)突出會(huì)員的權(quán)益，吸引用戶開(kāi)通會(huì)員，或提醒已開(kāi)通會(huì)員的用戶有什么權(quán)益。
然后就是快速入口的模塊，主要羅列應(yīng)用內(nèi)最關(guān)鍵、常用的幾個(gè)功能選項(xiàng)，比如訂單、收藏、記錄、物流等等。如果應(yīng)用的重要功能多，可能就會(huì)包含多行的快速入口，甚至可以左右滾動(dòng)。
而部分應(yīng)用為了防止多行快速入口的枯燥，會(huì)將快速入口“瓷片區(qū)”化，展示下級(jí)內(nèi)容或添加更多的視覺(jué)元素進(jìn)來(lái)，比如淘寶的我的頁(yè)面入口設(shè)計(jì)。
再往下往往就是次要功能或系統(tǒng)設(shè)置的列表了，傳統(tǒng)的應(yīng)用會(huì)使用單列設(shè)計(jì)，而選項(xiàng)太多的應(yīng)用可能就會(huì)使用多列設(shè)計(jì)。
如果設(shè)置的選項(xiàng)都是很細(xì)節(jié)的內(nèi)容，且下方還有信息流的話，那么往往會(huì)把這些選項(xiàng)置入到下級(jí)頁(yè)面去，比如增加設(shè)置頁(yè)面，通過(guò)點(diǎn)擊進(jìn)入設(shè)置頁(yè)面查看和操作。
最下方的信息流也是比較有意思的一個(gè)模塊，雖然它的組件樣式肯定是前面列表頁(yè)已經(jīng)確定了的，但它的擺放位置非常重要，那就是 —— 一定要在首屏中露出。
信息流這種東西，就是只有露出了才有威力，可能展露出來(lái)的半張圖就可以讓用戶忍不住下滑去探索，陷入多巴胺（資本主義）的陷阱。如果第一屏看不到放第二屏，那正常用戶根本不會(huì)閑著沒(méi)事在我的頁(yè)面刷信息流……
我的頁(yè)面的重要設(shè)計(jì)目標(biāo)，就是盡可能將關(guān)鍵的功能、入口置入到首屏中，設(shè)計(jì)師需要根據(jù)具體包含的模塊去做規(guī)劃，才能輸出讓團(tuán)隊(duì)滿意的結(jié)果。
最后就是關(guān)于我的頁(yè)面的視覺(jué)設(shè)計(jì)方案了。而基于上面對(duì)框架的認(rèn)識(shí)，我們可以肯定的是我的頁(yè)面的主要視覺(jué)重心會(huì)集中在上半?yún)^(qū)，而下半?yún)^(qū)的選項(xiàng)列表與信息流都只需要基礎(chǔ)的樣式即可。
首先頁(yè)面頂部的背景，除了使用純色外，更多會(huì)添加漸變或紋理圖片，而早年喜歡使用用戶頭像做高斯模糊的做法現(xiàn)在已經(jīng)被拋棄了。
這類背景制作起來(lái)很簡(jiǎn)單，就是漸變色或彌散的應(yīng)用，或是找外部素材即可。之所以要讓背景有顏色，最重要的原因就是——創(chuàng)建“氛圍”。
因?yàn)槲业捻?yè)面往往要添加運(yùn)營(yíng)性質(zhì)的內(nèi)容或強(qiáng)調(diào)會(huì)員模塊，這些東西一定在視覺(jué)上非常突出，如果沒(méi)有添加背景的氛圍做緩和，就是平地起驚雷的“干拔”，這不會(huì)產(chǎn)生太好的視覺(jué)效果。比如下面幾個(gè)案例就是有背景和無(wú)背景的對(duì)比。
然后就是會(huì)員卡片的設(shè)計(jì)了，這就是個(gè)老大難題，因?yàn)闀?huì)員卡片本身要突出“華貴”的屬性，所以設(shè)計(jì)上自然也就喜歡用有質(zhì)感的風(fēng)格，比如有鏡面反光的卡片，或是使用3D質(zhì)感的圖標(biāo)元素等等。
只要沒(méi)有別的運(yùn)營(yíng)元素，會(huì)員卡片就應(yīng)該是這個(gè)頁(yè)面最突出的模塊，雖然具體怎么設(shè)計(jì)要靠設(shè)計(jì)師自己發(fā)揮，但它通常都會(huì)有一個(gè)高飽和度或低明度的填充色。
再往下到快速入口區(qū)域，個(gè)人主頁(yè)的快速入口和主頁(yè)的快速入口雖然是同一種組件類型，但它們?cè)谝粋€(gè)應(yīng)用內(nèi)的權(quán)重卻不是一個(gè)等級(jí)。
我的頁(yè)面中的快速入口可以只用工具圖標(biāo)，也可以用裝飾圖標(biāo)，但裝飾圖標(biāo)的視覺(jué)復(fù)雜度一定要有所控制，只需要考慮最簡(jiǎn)單的裝飾圖標(biāo)類型即可。
這里還有個(gè)很有趣的細(xì)節(jié)，那就是如果我的頁(yè)面添加了那種運(yùn)營(yíng)性質(zhì)的快速入口模塊，那么基礎(chǔ)功能的快速入口就會(huì)用最基礎(chǔ)的線性和面性圖標(biāo)，為運(yùn)營(yíng)讓路。
再往下如果放設(shè)置列表，就單列和多列之分，只有頁(yè)面空間大下方?jīng)]有別的內(nèi)容適合放單列，只要有信息流或是選項(xiàng)太多，就會(huì)使用多列的設(shè)計(jì)節(jié)省空間。這部分的設(shè)計(jì)圖標(biāo)就可以往簡(jiǎn)潔的做，才不會(huì)讓界面看起來(lái)太浮夸和復(fù)雜。
最后一點(diǎn)就是我的頁(yè)面內(nèi)的運(yùn)營(yíng)模塊，不管是快速入口還是輪播圖、膠囊類廣告，它們都是具有很強(qiáng)“破壞力”的元素，突兀才是它們的宿命（和會(huì)員卡片不一樣），而不是在視覺(jué)上融入甚至消失在當(dāng)前的頁(yè)面中。
在正式項(xiàng)目中你可以加，但在作品集輸出過(guò)程中就建議移除這些突兀的運(yùn)營(yíng)模塊，才能獲得更好的我的頁(yè)面的視覺(jué)展示效果。
以上就是對(duì)我的頁(yè)面設(shè)計(jì)思路的全部介紹。
轉(zhuǎn)載自：https://www.uisdc.com/designing-me-page
