寫在前面的話兒
本文內(nèi)容均為個(gè)人理解與思考抖韩，暫無數(shù)據(jù)、用研支持疫铜，未經(jīng)用戶測試茂浮，不一定正確。如有錯(cuò)誤壳咕，歡迎指正啊励稳，非常感謝～
? 我個(gè)人的經(jīng)驗(yàn)及能力還很有限，正在努力學(xué)習(xí)中～
? 此次改版探索囱井，暫無用研驹尼、數(shù)據(jù)支撐；只是初步嘗試庞呕，并非最終版設(shè)計(jì)新翎。
? 我覺得大部分交互方案都是在特定階段程帕、特定情境下最優(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è)模塊目前存在的問題，優(yōu)化信息架構(gòu)弹谁，調(diào)整視覺層級(jí)關(guān)系乾巧，幫助用戶聚焦核心業(yè)務(wù)，快速高效愉悅地完成相應(yīng)任務(wù)预愤。
頁面定位
在對(duì)個(gè)人中心進(jìn)行分析沟于、改版前，我們需要先明確主要頁面的頁面定位植康，頁面定位是我們明確頁面存在的問題社裆、分析頁面的信息優(yōu)先級(jí)及核心行為的前提。
這次改版涉及的主要一級(jí)頁面是「個(gè)人中心」和「個(gè)人主頁」向图。
凡是有用戶體系的應(yīng)用，基本都有「個(gè)人中心」标沪；大部分帶社交屬性的應(yīng)用都有「個(gè)人主頁」榄攀，一些偏工具類的應(yīng)用則不一定有「個(gè)人主頁」，這個(gè)得看具體產(chǎn)品設(shè)計(jì)金句。
個(gè)人中心
僅用戶本人可見檩赢，偏平臺(tái)屬性，重在管理违寞。主要承載個(gè)人相關(guān)的功能入口與平臺(tái)相關(guān)設(shè)置贞瞒。個(gè)人主頁
用戶本人和其他用戶均可訪問查看，偏用戶個(gè)人屬性趁曼，重在塑造用戶形象军浆。
“我“ 看到的 “我” 的主頁和其他用戶看到的 “我” 的主頁略有不同，前者主要是預(yù)覽作用挡闰，確定向其他用戶展示哪些個(gè)人信息與內(nèi)容乒融，同時(shí)對(duì) UGC 內(nèi)容進(jìn)行管理掰盘。后者主要是查看用戶信息及發(fā)布過的內(nèi)容，了解用戶赞季，同時(shí)可進(jìn)行「關(guān)注」愧捕、「舉報(bào)」、「屏蔽」等互動(dòng)操作申钩。
按當(dāng)前線上版本的設(shè)計(jì)次绘，「個(gè)人中心」主要分為 4 個(gè)區(qū)域，由上至下分別為個(gè)人信息撒遣，功能入口邮偎，廣告橫幅，有車幣商城愉舔；「個(gè)人主頁」主要分為 2 個(gè)區(qū)域钢猛，由上至下分別為個(gè)人信息和帖子列表。
問題分析
本文先分析轩缤、優(yōu)化比較復(fù)雜的「個(gè)人中心」頁面命迈。進(jìn)行問題分析之前，我們可以先試著完成以下任務(wù)：1）打開有車以后 APP 的個(gè)人頁面火的，找到「我的成就勛章」和「每日打卡活動(dòng)」壶愤；2）把所有入口都點(diǎn)一遍，并查看相應(yīng)頁面內(nèi)容馏鹤，返回個(gè)人頁面征椒，再次找到「我的成就勛章」和「每日打卡活動(dòng)」。你是否能順利湃累、快速地完成以上兩個(gè)任務(wù)勃救？
現(xiàn)在我們來看一下目前個(gè)人中心頁面存在的問題：
1. 頂部的個(gè)人信息區(qū)域可點(diǎn)擊元素較多，布局比較擁擠治力，點(diǎn)擊區(qū)域小蒙秒，操作比較困難，易導(dǎo)致誤觸宵统。
2. 功能入口不唯一晕讲，且相同功能的入口分布散亂，沒有清晰的邏輯聯(lián)系马澈，易造成用戶困惑瓢省。
例如，可能出現(xiàn)以下場景痊班，用戶點(diǎn)擊「LV.15」進(jìn)入「任務(wù)中心」之后返回個(gè)人中心勤婚，再點(diǎn)擊「新手上路」也進(jìn)入了「任務(wù)中心」。因?yàn)椴环嫌脩粜睦眍A(yù)期（點(diǎn)擊不同的入口進(jìn)入不同的頁面）涤伐，用戶可能感到困惑蛔六，「咦荆永，我剛剛是不是點(diǎn)錯(cuò)了，怎么又到這個(gè)頁面了」国章。
入口和相應(yīng)功能如果沒有唯一的對(duì)應(yīng)關(guān)系具钥，用戶就會(huì)摸不清相應(yīng)的功能入口。
關(guān)于入口唯一：我是這么覺得的液兽，在同一頁面骂删，功能入口需要盡可能保證唯一，避免造成理解困難四啰、導(dǎo)航不清晰宁玫，操作路徑復(fù)雜。如果入口重復(fù)柑晒，需保證這些入口之間具有簡單有效欧瘪、易于理解的聯(lián)系。
3. 功能入口分類標(biāo)準(zhǔn)不夠清晰與合理匙赞，不利于用戶理解與學(xué)習(xí)佛掖。
例如，「車主認(rèn)證」涌庭、「我的獎(jiǎng)品」和「兌換記錄」為什么分為同一模塊芥被？「消息中心」、「問題反饋」和「提現(xiàn)」之間的邏輯聯(lián)系是什么坐榆？
另外拴魄，如果信息分類邏輯復(fù)雜，也會(huì)增加用戶的判斷成本席镀。
這個(gè)頁面就像我們物理世界中的導(dǎo)視系統(tǒng)匹中。我們想在某商場買一件連衣裙，看到商場導(dǎo)視圖上標(biāo)著第一層是珠寶豪诲、第二層是服裝顶捷、第三層是飲食，第二層又分為 A 區(qū)女裝跛溉、B 區(qū)男裝、C 區(qū)童裝扮授，我們就可以快速找到女裝區(qū)芳室。如果沒有這樣的分類，每一層都有女裝店刹勃，女裝店旁邊有可能是珠寶店堪侯、小吃店，那我們買到合適的連衣裙的效率就很低荔仁。
4. 功能入口未區(qū)分主次伍宦，主次任務(wù)不清晰芽死。
功能入口較多的情況下，采用宮格的形式平鋪展示所有功能入口次洼，會(huì)導(dǎo)致層級(jí)不夠清晰簡潔关贵，無法突出核心功能入口，也不利于擴(kuò)展卖毁。另外揖曾，用戶在瀏覽時(shí)需要跳躍著閱讀圖標(biāo)下方的文字，入口過多時(shí)亥啦，會(huì)降低效率炭剪。
5. 信息表達(dá)不明確，無法預(yù)知操作結(jié)果翔脱。
例如奴拦，用戶無法預(yù)知點(diǎn)擊「未認(rèn)證」會(huì)發(fā)生什么，也不清楚「新手上路」是什么届吁。用戶可能需要經(jīng)過試錯(cuò)才明確這些信息的含義错妖。
「新手上路」其實(shí)是成就勛章，如果做成勛章樣式瓷产，用戶就能理解它是個(gè)成就勛章站玄，但因?yàn)椤窵v.15」「未認(rèn)證」「新手上路」這三個(gè)元素都是一個(gè)背景色塊加文字的視覺形式，單靠文本的話就只有「Lv.15」比較好理解濒旦，因?yàn)椤窵v」本身就是大家都熟悉的「等級(jí)」株旷，其他兩個(gè)沒有什么通用的含義。
入口名稱和目標(biāo)頁面標(biāo)題不一致尔邓，例如晾剖，點(diǎn)擊「兌換記錄」進(jìn)入「我的訂單」頁面。
6. 問題總結(jié)
哐哐一頓煞有其事的分析之后梯嗽，我們可以總結(jié)如下：
目前個(gè)人中心頁面存在的主要問題是齿尽，信息架構(gòu)不夠清晰合理，用戶很難在有限的時(shí)間里灯节，快速找到需要的信息或功能入口循头，增加了用戶使用成本。我們可以通過對(duì)信息進(jìn)行梳理炎疆、歸納分類和組織卡骂，化繁為簡，建立良好的信息層級(jí)形入，幫助用戶快速理解全跨、獲取信息。
優(yōu)化方案
頁面內(nèi)容分析
1 - 主頁入口和編輯個(gè)人資料
大部分帶社交屬性的應(yīng)用都有個(gè)人主頁亿遂，從個(gè)人中心點(diǎn)擊進(jìn)入個(gè)人主頁是常見操作浓若，符合用戶既有習(xí)慣渺杉，入口不需要做得這么顯眼。
如上文所提挪钓，個(gè)人主頁主要是展示給其他用戶看的是越，對(duì) “我” 自己而言，有「預(yù)覽」的作用诵原。所以英妓，一般「編輯個(gè)人資料」操作都會(huì)放在「個(gè)人主頁」，用戶修改資料后返回「個(gè)人主頁」可直接看到效果绍赛。
并且蔓纠，用戶自己進(jìn)入個(gè)人主頁和編輯個(gè)人資料都屬于頻次相對(duì)較低的操作，可適當(dāng)降低信息層級(jí)吗蚌。
2 - 簽到腿倚、等級(jí)、主成就（成就勛章）蚯妇、有車幣敷燎、任務(wù)中心
作為帶動(dòng)促活、留存等的常見手段箩言，這幾個(gè)都屬于用戶激勵(lì)體系硬贯，相對(duì)來說都比較重要。這里先確定個(gè)人中心頁面的信息結(jié)構(gòu)陨收，暫時(shí)先不討論具體頁面內(nèi)容饭豹。
這幾個(gè)里頭，用戶最關(guān)心的是「有車幣」务漩，幾乎所有行為都是圍繞「有車幣」進(jìn)行的拄衰，可能會(huì)有挺多用戶進(jìn)入這個(gè)頁面是為了查看自己當(dāng)前有多少有車幣（沒有數(shù)據(jù)，純靠瞎猜）饵骨。但是現(xiàn)在的「有車幣」縮在「有車幣商城」旁邊翘悉，極不顯眼，而且如果不是放在這里居触，單靠這個(gè)金幣圖標(biāo)很難表達(dá)出「有車幣數(shù)量」這個(gè)信息妖混，不如使用文本更直接有效。
這幾個(gè)里頭轮洋，最沒有靈魂的就是「成就勛章」了制市，幾乎感受不到勛章帶來的榮譽(yù)感。目前砖瞧，我的想法是去掉「主成就」息堂，僅在用戶個(gè)人主頁展示勛章墻嚷狞，給用戶「累積」的成就感块促，“點(diǎn)亮越多勛章看起來越湃傺撸”。
因此竭翠，將「成就勛章」入口移到「個(gè)人主頁」振坚，其他入口均保留。
3 - 口碑斋扰、車主認(rèn)證
如果用戶沒有買過車渡八，怎么激勵(lì)都不會(huì)發(fā)口碑、不會(huì)認(rèn)證車主传货。
而一般情況下屎鳍，一個(gè)用戶可能就 1~2 輛車，并不會(huì)頻繁發(fā)布问裕、修改口碑逮壁，一旦認(rèn)證過車輛也不需要再認(rèn)證了（如果審核不通過需要重新提交資料，可通過系統(tǒng)消息引導(dǎo)用戶進(jìn)入認(rèn)證頁面）粮宛。這兩個(gè)入口都是使用過一兩次之后窥淆，就不需要再使用了，作為一級(jí)頁面的常駐入口有點(diǎn)浪費(fèi)頁面空間巍杈。
因此忧饭，這兩個(gè)入口可從個(gè)人中心首頁移除。
4 - 收藏筷畦、我感興趣的
「我感興趣的」和「收藏」都是點(diǎn)擊收藏按鈕收藏的內(nèi)容词裤。因此，僅保留「收藏」入口汁咏。
5 - 草稿
草稿對(duì)內(nèi)容型用戶來說是比較重要的亚斋，但使用頻次應(yīng)該不高。
6 - 消息中心
消息中心是用戶及時(shí)互動(dòng)的入口攘滩，同時(shí)還可承載產(chǎn)品宣發(fā)的功能帅刊，對(duì)內(nèi)容、社交類應(yīng)用來說都是很重要的漂问。因此赖瞒，可適當(dāng)提高此入口的層級(jí)。
7 - 提現(xiàn)蚤假、我的獎(jiǎng)品
這兩個(gè)分別是實(shí)物獎(jiǎng)勵(lì)（現(xiàn)金）和虛擬獎(jiǎng)勵(lì)（有車幣）栏饮，可以歸入 “我的獎(jiǎng)品“，屬于活動(dòng)運(yùn)營入口磷仰。從產(chǎn)品策略來說袍嬉，相對(duì)比較重要，主要用于收集此頁面的閑散流量。
8 - 兌換記錄伺通、有車幣商城
「兌換記錄」其實(shí)是「我的訂單」箍土，在有車幣商城中也有相應(yīng)入口。
首先罐监，同一個(gè)入口用不同的文案吴藻，使用過程難免產(chǎn)生困惑。第二弓柱，「兌換記錄」是隨著「進(jìn)入有車幣商城消費(fèi)有車幣」這個(gè)行為產(chǎn)生的沟堡，如果放在有車幣商城里，邏輯上比較成立矢空。
「兌換記錄」現(xiàn)在放在個(gè)人中心首頁航罗，可能是因?yàn)橛脩羰褂妙l率比較高，把它提出來作為快捷入口屁药，減少點(diǎn)擊次數(shù)伤哺，降低操作成本。但是在個(gè)人中心首頁一堆互不相干的入口中尋找「兌換記錄」者祖，帶來的認(rèn)知負(fù)荷可能更高立莉。
因此四濒，僅保留有車幣商城中的入口削解。
有車幣商城暫不涉及營收，只是作為有車幣消費(fèi)的載體雾袱，激勵(lì)用戶賺取有車幣械巡，從而提高用戶活躍度和留存刹淌。可以把它和有車幣聯(lián)系起來讥耗，但有車幣層級(jí)更高有勾，更突出有車幣。
9 - 問題反饋
從后臺(tái)數(shù)據(jù)來看古程，目前大部分的反饋是商城售后相關(guān)的問題蔼卡，運(yùn)營人員回復(fù)也很及時(shí)，都是即時(shí)提供相應(yīng)解決方案挣磨，此入口實(shí)際主要承載的是「在線客服」的功能雇逞。
關(guān)于產(chǎn)品使用問題的反饋比較少，運(yùn)營人員回復(fù)內(nèi)容均為「感謝反饋」茁裙、「已反饋給相關(guān)部門」塘砸、「請?zhí)砑有≈治⑿拧沟龋@些解決方法在「使用幫助」中都可以找到晤锥。
目前的設(shè)計(jì)結(jié)合用戶的使用場景掉蔬，可能導(dǎo)致用戶操作路徑不順暢廊宪、操作效率低下。例如女轿，用戶進(jìn)入商城后產(chǎn)生了關(guān)于訂單的問題挤忙，此時(shí)，若想進(jìn)行反饋谈喳，就需要返回個(gè)人中心，找到「問題反饋」進(jìn)行反饋戈泼。若收到運(yùn)營人員的回復(fù)婿禽，查看回復(fù)的地方又是在「消息中心」里。經(jīng)過溝通大猛，想再次查看訂單扭倾，確認(rèn)問題是否解決，又得回到個(gè)人中心挽绩，再次進(jìn)入商城膛壹，找到我的訂單。
因此唉堪，將商城客服獨(dú)立出來模聋，放到商城，用戶在查看訂單唠亚、瀏覽商品的過程中可直接進(jìn)行咨詢链方。另外，將「問題反饋」與「使用幫助」結(jié)合起來灶搜，放在個(gè)人中心首頁祟蚀，并增加「熱門問題」。這樣割卖，既可減輕運(yùn)營工作量前酿，也可給用戶提供及時(shí)幫助，提升使用體驗(yàn)鹏溯。
10 - 增加「我的車友圈」入口
根據(jù)整體產(chǎn)品的具體功能架構(gòu)罢维，在個(gè)人中心頁面增加「我的車友圈」入口。
層級(jí)梳理
經(jīng)過以上的分析丙挽，我們基本確定了頁面中所有信息言津、功能之間的邏輯聯(lián)系。現(xiàn)在取试，我們按從下到上的卡片分類方法悬槽，對(duì)所有內(nèi)容進(jìn)行分組，并確定信息層級(jí)瞬浓。（單機(jī)版的卡片分類法哈哈初婆。）
確定布局
根據(jù)以上分析結(jié)果，我們可以畫出基本的界面布局，如下圖所示磅叛。相比原來的界面屑咳，新的界面看起來更簡潔了，信息層級(jí)也更清晰弊琴，但依然存在一些問題兆龙。例如，核心功能入口的布局不利于擴(kuò)展敲董，「我的消息」把整個(gè)界面攔腰截?cái)嗔俗匣剩感（有車以后 IP 形象）」的視覺吸引度太強(qiáng)，「簽到」操作的可見性較弱腋寨。
所以聪铺，我們需要再梳理、調(diào)整一下頁面的布局萄窜。
- 個(gè)人信息區(qū)域優(yōu)先級(jí)最高铃剔，相當(dāng)于路標(biāo)，用戶進(jìn)入個(gè)人中心之后需要知道「這是我的個(gè)人中心」查刻，同時(shí)遵循已成型的用戶習(xí)慣键兜，所以放在頂部。但頭像穗泵，昵稱這些信息又相對(duì)沒那么重要蝶押，因此，可采用左右排版火欧，節(jié)省頁面空間棋电。
- 功能入口整體采用「宮格 + 列表」的布局形式，既可以突出核心功能入口苇侵、區(qū)分主次任務(wù)赶盔，也有利于擴(kuò)展。
- 整個(gè)頁面的布局基本遵循 F 型瀏覽模式榆浓，順應(yīng)用戶的自然視覺習(xí)慣于未。
- 重要、使用頻次較高的功能入口盡量保持在「拇指的自然操作區(qū)域」內(nèi)或接近此區(qū)域陡鹃，以便用戶操作烘浦。
經(jīng)過調(diào)整，我們就得到了以下的效果圖（視覺效果圖僅供參考）萍鲸。
最后闷叉，補(bǔ)充一些界面細(xì)節(jié)。同時(shí)脊阴，由于此次改版中握侧，頁面內(nèi)容結(jié)構(gòu)的改動(dòng)調(diào)整較大蚯瞧，所以增加了新功能提示，告知用戶重要的功能入口調(diào)整品擎，引導(dǎo)用戶嘗試埋合、熟悉新的界面結(jié)構(gòu)，避免造成困惑萄传。
改版前后對(duì)比
思考總結(jié)
個(gè)人中心頁面這次改版主要針對(duì)功能框架進(jìn)行整合甚颂，調(diào)整信息結(jié)構(gòu)，優(yōu)化界面布局秀菱，保證核心功能突出振诬，次要功能入口統(tǒng)一，讓信息層級(jí)更加清晰答朋，使產(chǎn)品功能得到合理曝光，同時(shí)保證用戶可快速找到他們想要的內(nèi)容棠笑。
在改版設(shè)計(jì)前梦碗，需要先明確頁面定位，即這個(gè)頁面是什么蓖救，承載什么功能洪规，為什么這么做，然后再圍繞設(shè)計(jì)目的進(jìn)行問題分析循捺，多次嘗試斩例，得出解決方案。整個(gè)設(shè)計(jì)過程从橘，都離不開對(duì)用戶目的和行為的思考念赶。
此外，像這種頁面內(nèi)容結(jié)構(gòu)有重大調(diào)整的改版恰力，在版本更新后叉谜，需考慮使用合適的引導(dǎo)方式引導(dǎo)用戶嘗試、熟悉新的界面結(jié)構(gòu)踩萎，降低學(xué)習(xí)成本停局。
附，此次改版中香府，我整理的完整的個(gè)人中心模塊信息結(jié)構(gòu)：
改版后的視覺效果圖中董栽，核心功能入口圖標(biāo)來自 UncleMonkey 的設(shè)計(jì)，底部標(biāo)簽欄的圖標(biāo)來自王老中醫(yī)的設(shè)計(jì)企孩，感謝我的同事兒～
此次改版過程中锭碳，我在網(wǎng)上查閱及參考了以下文章，非常感謝這些作者～
合理勿璃、清新 —— 百度糯米個(gè)人中心設(shè)計(jì)思考（作者：百度 UXC）
從逛商場學(xué)習(xí)交互設(shè)計(jì)：信息架構(gòu)梳理如何從小白到精通工禾？（作者：Mr湯進(jìn)er）
個(gè)人中心頁面從思考到設(shè)計(jì)全過程（作者：海鹽社?風(fēng)箏KK）
從個(gè)人中心出發(fā)运提，聊聊個(gè)人主頁設(shè)計(jì)前的思考（作者：ME網(wǎng)易移動(dòng)設(shè)計(jì)?Arale！）
