寫(xiě)在前面的話兒
本文內(nèi)容均為個(gè)人理解與思考，暫無(wú)數(shù)據(jù)、用研支持，未經(jīng)用戶測(cè)試，不一定正確。如有錯(cuò)誤，歡迎指正啊，非常感謝～
? 我個(gè)人的經(jīng)驗(yàn)及能力還很有限，正在努力學(xué)習(xí)中～
? 此次改版探索，暫無(wú)用研、數(shù)據(jù)支撐；只是初步嘗試，并非最終版設(shè)計(jì)。
? 我覺(jué)得大部分交互方案都是在特定階段、特定情境下最優(yōu)，都可以不斷優(yōu)化、不斷完善。
我個(gè)人理解的有車以后 APP：一個(gè)集工具、內(nèi)容消費(fèi)和社交互動(dòng)為一體的復(fù)合型產(chǎn)品，多元的產(chǎn)品用例對(duì)應(yīng)多元的用戶需求，譬如選車工具、資訊獲取、內(nèi)容產(chǎn)出、社交互動(dòng)等等。
背景和目標(biāo)
配合有車以后 APP 4.0 UI 改版，對(duì)個(gè)人中心模塊進(jìn)行優(yōu)化。針對(duì)這個(gè)模塊目前存在的問(wèn)題，優(yōu)化信息架構(gòu)，調(diào)整視覺(jué)層級(jí)關(guān)系，幫助用戶聚焦核心業(yè)務(wù)，快速高效愉悅地完成相應(yīng)任務(wù)。
頁(yè)面定位
在對(duì)個(gè)人中心進(jìn)行分析、改版前，我們需要先明確主要頁(yè)面的頁(yè)面定位，頁(yè)面定位是我們明確頁(yè)面存在的問(wèn)題、分析頁(yè)面的信息優(yōu)先級(jí)及核心行為的前提。
這次改版涉及的主要一級(jí)頁(yè)面是「?jìng)€(gè)人中心」和「?jìng)€(gè)人主頁(yè)」。
凡是有用戶體系的應(yīng)用，基本都有「?jìng)€(gè)人中心」；大部分帶社交屬性的應(yīng)用都有「?jìng)€(gè)人主頁(yè)」，一些偏工具類的應(yīng)用則不一定有「?jìng)€(gè)人主頁(yè)」，這個(gè)得看具體產(chǎn)品設(shè)計(jì)。
個(gè)人中心
僅用戶本人可見(jiàn)，偏平臺(tái)屬性，重在管理。主要承載個(gè)人相關(guān)的功能入口與平臺(tái)相關(guān)設(shè)置。個(gè)人主頁(yè)
用戶本人和其他用戶均可訪問(wèn)查看，偏用戶個(gè)人屬性，重在塑造用戶形象。
“我“ 看到的 “我” 的主頁(yè)和其他用戶看到的 “我” 的主頁(yè)略有不同，前者主要是預(yù)覽作用，確定向其他用戶展示哪些個(gè)人信息與內(nèi)容，同時(shí)對(duì) UGC 內(nèi)容進(jìn)行管理。后者主要是查看用戶信息及發(fā)布過(guò)的內(nèi)容，了解用戶，同時(shí)可進(jìn)行「關(guān)注」、「舉報(bào)」、「屏蔽」等互動(dòng)操作。
按當(dāng)前線上版本的設(shè)計(jì)，「?jìng)€(gè)人中心」主要分為 4 個(gè)區(qū)域，由上至下分別為個(gè)人信息，功能入口，廣告橫幅，有車幣商城；「?jìng)€(gè)人主頁(yè)」主要分為 2 個(gè)區(qū)域，由上至下分別為個(gè)人信息和帖子列表。
問(wèn)題分析
本文先分析、優(yōu)化比較復(fù)雜的「?jìng)€(gè)人中心」頁(yè)面。進(jìn)行問(wèn)題分析之前，我們可以先試著完成以下任務(wù)：1）打開(kāi)有車以后 APP 的個(gè)人頁(yè)面，找到「我的成就勛章」和「每日打卡活動(dòng)」；2）把所有入口都點(diǎn)一遍，并查看相應(yīng)頁(yè)面內(nèi)容，返回個(gè)人頁(yè)面，再次找到「我的成就勛章」和「每日打卡活動(dòng)」。你是否能順利、快速地完成以上兩個(gè)任務(wù)？
現(xiàn)在我們來(lái)看一下目前個(gè)人中心頁(yè)面存在的問(wèn)題：
1. 頂部的個(gè)人信息區(qū)域可點(diǎn)擊元素較多，布局比較擁擠，點(diǎn)擊區(qū)域小，操作比較困難，易導(dǎo)致誤觸。
2. 功能入口不唯一，且相同功能的入口分布散亂，沒(méi)有清晰的邏輯聯(lián)系，易造成用戶困惑。
例如，可能出現(xiàn)以下場(chǎng)景，用戶點(diǎn)擊「LV.15」進(jìn)入「任務(wù)中心」之后返回個(gè)人中心，再點(diǎn)擊「新手上路」也進(jìn)入了「任務(wù)中心」。因?yàn)椴环嫌脩粜睦眍A(yù)期（點(diǎn)擊不同的入口進(jìn)入不同的頁(yè)面），用戶可能感到困惑，「咦，我剛剛是不是點(diǎn)錯(cuò)了，怎么又到這個(gè)頁(yè)面了」。
入口和相應(yīng)功能如果沒(méi)有唯一的對(duì)應(yīng)關(guān)系，用戶就會(huì)摸不清相應(yīng)的功能入口。
關(guān)于入口唯一：我是這么覺(jué)得的，在同一頁(yè)面，功能入口需要盡可能保證唯一，避免造成理解困難、導(dǎo)航不清晰，操作路徑復(fù)雜。如果入口重復(fù)，需保證這些入口之間具有簡(jiǎn)單有效、易于理解的聯(lián)系。
3. 功能入口分類標(biāo)準(zhǔn)不夠清晰與合理，不利于用戶理解與學(xué)習(xí)。
例如，「車主認(rèn)證」、「我的獎(jiǎng)品」和「兌換記錄」為什么分為同一模塊？「消息中心」、「問(wèn)題反饋」和「提現(xiàn)」之間的邏輯聯(lián)系是什么？
另外，如果信息分類邏輯復(fù)雜，也會(huì)增加用戶的判斷成本。
這個(gè)頁(yè)面就像我們物理世界中的導(dǎo)視系統(tǒng)。我們想在某商場(chǎng)買(mǎi)一件連衣裙，看到商場(chǎng)導(dǎo)視圖上標(biāo)著第一層是珠寶、第二層是服裝、第三層是飲食，第二層又分為 A 區(qū)女裝、B 區(qū)男裝、C 區(qū)童裝，我們就可以快速找到女裝區(qū)。如果沒(méi)有這樣的分類，每一層都有女裝店，女裝店旁邊有可能是珠寶店、小吃店，那我們買(mǎi)到合適的連衣裙的效率就很低。
4. 功能入口未區(qū)分主次，主次任務(wù)不清晰。
功能入口較多的情況下，采用宮格的形式平鋪展示所有功能入口，會(huì)導(dǎo)致層級(jí)不夠清晰簡(jiǎn)潔，無(wú)法突出核心功能入口，也不利于擴(kuò)展。另外，用戶在瀏覽時(shí)需要跳躍著閱讀圖標(biāo)下方的文字，入口過(guò)多時(shí)，會(huì)降低效率。
5. 信息表達(dá)不明確，無(wú)法預(yù)知操作結(jié)果。
例如，用戶無(wú)法預(yù)知點(diǎn)擊「未認(rèn)證」會(huì)發(fā)生什么，也不清楚「新手上路」是什么。用戶可能需要經(jīng)過(guò)試錯(cuò)才明確這些信息的含義。
「新手上路」其實(shí)是成就勛章，如果做成勛章樣式，用戶就能理解它是個(gè)成就勛章，但因?yàn)椤窵v.15」「未認(rèn)證」「新手上路」這三個(gè)元素都是一個(gè)背景色塊加文字的視覺(jué)形式，單靠文本的話就只有「Lv.15」比較好理解，因?yàn)椤窵v」本身就是大家都熟悉的「等級(jí)」，其他兩個(gè)沒(méi)有什么通用的含義。
入口名稱和目標(biāo)頁(yè)面標(biāo)題不一致，例如，點(diǎn)擊「兌換記錄」進(jìn)入「我的訂單」頁(yè)面。
6. 問(wèn)題總結(jié)
哐哐一頓煞有其事的分析之后，我們可以總結(jié)如下：
目前個(gè)人中心頁(yè)面存在的主要問(wèn)題是，信息架構(gòu)不夠清晰合理，用戶很難在有限的時(shí)間里，快速找到需要的信息或功能入口，增加了用戶使用成本。我們可以通過(guò)對(duì)信息進(jìn)行梳理、歸納分類和組織，化繁為簡(jiǎn)，建立良好的信息層級(jí)，幫助用戶快速理解、獲取信息。
優(yōu)化方案
頁(yè)面內(nèi)容分析
1 - 主頁(yè)入口和編輯個(gè)人資料
大部分帶社交屬性的應(yīng)用都有個(gè)人主頁(yè)，從個(gè)人中心點(diǎn)擊進(jìn)入個(gè)人主頁(yè)是常見(jiàn)操作，符合用戶既有習(xí)慣，入口不需要做得這么顯眼。
如上文所提，個(gè)人主頁(yè)主要是展示給其他用戶看的，對(duì) “我” 自己而言，有「預(yù)覽」的作用。所以，一般「編輯個(gè)人資料」操作都會(huì)放在「?jìng)€(gè)人主頁(yè)」，用戶修改資料后返回「?jìng)€(gè)人主頁(yè)」可直接看到效果。
并且，用戶自己進(jìn)入個(gè)人主頁(yè)和編輯個(gè)人資料都屬于頻次相對(duì)較低的操作，可適當(dāng)降低信息層級(jí)。
2 - 簽到、等級(jí)、主成就（成就勛章）、有車幣、任務(wù)中心
作為帶動(dòng)促活、留存等的常見(jiàn)手段，這幾個(gè)都屬于用戶激勵(lì)體系，相對(duì)來(lái)說(shuō)都比較重要。這里先確定個(gè)人中心頁(yè)面的信息結(jié)構(gòu)，暫時(shí)先不討論具體頁(yè)面內(nèi)容。
這幾個(gè)里頭，用戶最關(guān)心的是「有車幣」，幾乎所有行為都是圍繞「有車幣」進(jìn)行的，可能會(huì)有挺多用戶進(jìn)入這個(gè)頁(yè)面是為了查看自己當(dāng)前有多少有車幣（沒(méi)有數(shù)據(jù)，純靠瞎猜）。但是現(xiàn)在的「有車幣」縮在「有車幣商城」旁邊，極不顯眼，而且如果不是放在這里，單靠這個(gè)金幣圖標(biāo)很難表達(dá)出「有車幣數(shù)量」這個(gè)信息，不如使用文本更直接有效。
這幾個(gè)里頭，最沒(méi)有靈魂的就是「成就勛章」了，幾乎感受不到勛章帶來(lái)的榮譽(yù)感。目前，我的想法是去掉「主成就」，僅在用戶個(gè)人主頁(yè)展示勛章墻，給用戶「累積」的成就感，“點(diǎn)亮越多勛章看起來(lái)越?！?。
因此，將「成就勛章」入口移到「?jìng)€(gè)人主頁(yè)」，其他入口均保留。
3 - 口碑、車主認(rèn)證
如果用戶沒(méi)有買(mǎi)過(guò)車，怎么激勵(lì)都不會(huì)發(fā)口碑、不會(huì)認(rèn)證車主。
而一般情況下，一個(gè)用戶可能就 1~2 輛車，并不會(huì)頻繁發(fā)布、修改口碑，一旦認(rèn)證過(guò)車輛也不需要再認(rèn)證了（如果審核不通過(guò)需要重新提交資料，可通過(guò)系統(tǒng)消息引導(dǎo)用戶進(jìn)入認(rèn)證頁(yè)面）。這兩個(gè)入口都是使用過(guò)一兩次之后，就不需要再使用了，作為一級(jí)頁(yè)面的常駐入口有點(diǎn)浪費(fèi)頁(yè)面空間。
因此，這兩個(gè)入口可從個(gè)人中心首頁(yè)移除。
4 - 收藏、我感興趣的
「我感興趣的」和「收藏」都是點(diǎn)擊收藏按鈕收藏的內(nèi)容。因此，僅保留「收藏」入口。
5 - 草稿
草稿對(duì)內(nèi)容型用戶來(lái)說(shuō)是比較重要的，但使用頻次應(yīng)該不高。
6 - 消息中心
消息中心是用戶及時(shí)互動(dòng)的入口，同時(shí)還可承載產(chǎn)品宣發(fā)的功能，對(duì)內(nèi)容、社交類應(yīng)用來(lái)說(shuō)都是很重要的。因此，可適當(dāng)提高此入口的層級(jí)。
7 - 提現(xiàn)、我的獎(jiǎng)品
這兩個(gè)分別是實(shí)物獎(jiǎng)勵(lì)（現(xiàn)金）和虛擬獎(jiǎng)勵(lì)（有車幣），可以歸入 “我的獎(jiǎng)品“，屬于活動(dòng)運(yùn)營(yíng)入口。從產(chǎn)品策略來(lái)說(shuō)，相對(duì)比較重要，主要用于收集此頁(yè)面的閑散流量。
8 - 兌換記錄、有車幣商城
「兌換記錄」其實(shí)是「我的訂單」，在有車幣商城中也有相應(yīng)入口。
首先，同一個(gè)入口用不同的文案，使用過(guò)程難免產(chǎn)生困惑。第二，「兌換記錄」是隨著「進(jìn)入有車幣商城消費(fèi)有車幣」這個(gè)行為產(chǎn)生的，如果放在有車幣商城里，邏輯上比較成立。
「兌換記錄」現(xiàn)在放在個(gè)人中心首頁(yè)，可能是因?yàn)橛脩羰褂妙l率比較高，把它提出來(lái)作為快捷入口，減少點(diǎn)擊次數(shù)，降低操作成本。但是在個(gè)人中心首頁(yè)一堆互不相干的入口中尋找「兌換記錄」，帶來(lái)的認(rèn)知負(fù)荷可能更高。
因此，僅保留有車幣商城中的入口。
有車幣商城暫不涉及營(yíng)收，只是作為有車幣消費(fèi)的載體，激勵(lì)用戶賺取有車幣，從而提高用戶活躍度和留存?？梢园阉陀熊噹怕?lián)系起來(lái)，但有車幣層級(jí)更高，更突出有車幣。
9 - 問(wèn)題反饋
從后臺(tái)數(shù)據(jù)來(lái)看，目前大部分的反饋是商城售后相關(guān)的問(wèn)題，運(yùn)營(yíng)人員回復(fù)也很及時(shí)，都是即時(shí)提供相應(yīng)解決方案，此入口實(shí)際主要承載的是「在線客服」的功能。
關(guān)于產(chǎn)品使用問(wèn)題的反饋比較少，運(yùn)營(yíng)人員回復(fù)內(nèi)容均為「感謝反饋」、「已反饋給相關(guān)部門(mén)」、「請(qǐng)?zhí)砑有≈治⑿拧沟?，這些解決方法在「使用幫助」中都可以找到。
目前的設(shè)計(jì)結(jié)合用戶的使用場(chǎng)景，可能導(dǎo)致用戶操作路徑不順暢、操作效率低下。例如，用戶進(jìn)入商城后產(chǎn)生了關(guān)于訂單的問(wèn)題，此時(shí)，若想進(jìn)行反饋，就需要返回個(gè)人中心，找到「問(wèn)題反饋」進(jìn)行反饋。若收到運(yùn)營(yíng)人員的回復(fù)，查看回復(fù)的地方又是在「消息中心」里。經(jīng)過(guò)溝通，想再次查看訂單，確認(rèn)問(wèn)題是否解決，又得回到個(gè)人中心，再次進(jìn)入商城，找到我的訂單。
因此，將商城客服獨(dú)立出來(lái)，放到商城，用戶在查看訂單、瀏覽商品的過(guò)程中可直接進(jìn)行咨詢。另外，將「問(wèn)題反饋」與「使用幫助」結(jié)合起來(lái)，放在個(gè)人中心首頁(yè)，并增加「熱門(mén)問(wèn)題」。這樣，既可減輕運(yùn)營(yíng)工作量，也可給用戶提供及時(shí)幫助，提升使用體驗(yàn)。
10 - 增加「我的車友圈」入口
根據(jù)整體產(chǎn)品的具體功能架構(gòu)，在個(gè)人中心頁(yè)面增加「我的車友圈」入口。
層級(jí)梳理
經(jīng)過(guò)以上的分析，我們基本確定了頁(yè)面中所有信息、功能之間的邏輯聯(lián)系?，F(xiàn)在，我們按從下到上的卡片分類方法，對(duì)所有內(nèi)容進(jìn)行分組，并確定信息層級(jí)。（單機(jī)版的卡片分類法哈哈。）
確定布局
根據(jù)以上分析結(jié)果，我們可以畫(huà)出基本的界面布局，如下圖所示。相比原來(lái)的界面，新的界面看起來(lái)更簡(jiǎn)潔了，信息層級(jí)也更清晰，但依然存在一些問(wèn)題。例如，核心功能入口的布局不利于擴(kuò)展，「我的消息」把整個(gè)界面攔腰截?cái)嗔?，「小Q（有車以后 IP 形象）」的視覺(jué)吸引度太強(qiáng)，「簽到」操作的可見(jiàn)性較弱。
所以，我們需要再梳理、調(diào)整一下頁(yè)面的布局。
- 個(gè)人信息區(qū)域優(yōu)先級(jí)最高，相當(dāng)于路標(biāo)，用戶進(jìn)入個(gè)人中心之后需要知道「這是我的個(gè)人中心」，同時(shí)遵循已成型的用戶習(xí)慣，所以放在頂部。但頭像，昵稱這些信息又相對(duì)沒(méi)那么重要，因此，可采用左右排版，節(jié)省頁(yè)面空間。
- 功能入口整體采用「宮格 + 列表」的布局形式，既可以突出核心功能入口、區(qū)分主次任務(wù)，也有利于擴(kuò)展。
- 整個(gè)頁(yè)面的布局基本遵循 F 型瀏覽模式，順應(yīng)用戶的自然視覺(jué)習(xí)慣。
- 重要、使用頻次較高的功能入口盡量保持在「拇指的自然操作區(qū)域」內(nèi)或接近此區(qū)域，以便用戶操作。
經(jīng)過(guò)調(diào)整，我們就得到了以下的效果圖（視覺(jué)效果圖僅供參考）。
最后，補(bǔ)充一些界面細(xì)節(jié)。同時(shí)，由于此次改版中，頁(yè)面內(nèi)容結(jié)構(gòu)的改動(dòng)調(diào)整較大，所以增加了新功能提示，告知用戶重要的功能入口調(diào)整，引導(dǎo)用戶嘗試、熟悉新的界面結(jié)構(gòu)，避免造成困惑。
改版前后對(duì)比
思考總結(jié)
個(gè)人中心頁(yè)面這次改版主要針對(duì)功能框架進(jìn)行整合，調(diào)整信息結(jié)構(gòu)，優(yōu)化界面布局，保證核心功能突出，次要功能入口統(tǒng)一，讓信息層級(jí)更加清晰，使產(chǎn)品功能得到合理曝光，同時(shí)保證用戶可快速找到他們想要的內(nèi)容。
在改版設(shè)計(jì)前，需要先明確頁(yè)面定位，即這個(gè)頁(yè)面是什么，承載什么功能，為什么這么做，然后再圍繞設(shè)計(jì)目的進(jìn)行問(wèn)題分析，多次嘗試，得出解決方案。整個(gè)設(shè)計(jì)過(guò)程，都離不開(kāi)對(duì)用戶目的和行為的思考。
此外，像這種頁(yè)面內(nèi)容結(jié)構(gòu)有重大調(diào)整的改版，在版本更新后，需考慮使用合適的引導(dǎo)方式引導(dǎo)用戶嘗試、熟悉新的界面結(jié)構(gòu)，降低學(xué)習(xí)成本。
附，此次改版中，我整理的完整的個(gè)人中心模塊信息結(jié)構(gòu)：
改版后的視覺(jué)效果圖中，核心功能入口圖標(biāo)來(lái)自 UncleMonkey 的設(shè)計(jì)，底部標(biāo)簽欄的圖標(biāo)來(lái)自王老中醫(yī)的設(shè)計(jì)，感謝我的同事兒～
此次改版過(guò)程中，我在網(wǎng)上查閱及參考了以下文章，非常感謝這些作者～
合理、清新 —— 百度糯米個(gè)人中心設(shè)計(jì)思考（作者：百度 UXC）
從逛商場(chǎng)學(xué)習(xí)交互設(shè)計(jì)：信息架構(gòu)梳理如何從小白到精通？（作者：Mr湯進(jìn)er）
個(gè)人中心頁(yè)面從思考到設(shè)計(jì)全過(guò)程（作者：海鹽社?風(fēng)箏KK）
從個(gè)人中心出發(fā)，聊聊個(gè)人主頁(yè)設(shè)計(jì)前的思考（作者：ME網(wǎng)易移動(dòng)設(shè)計(jì)?Arale?。?/a>
