許多事，不懂珍惜已成舊事；許多人，不及用心已成舊人；許多經(jīng)驗，不總結(jié)就沒有沉淀。呵呵，前兩句很有詩意，是摘抄別人的。后一句濫竽充數(shù)，卻是自己想說的：項目總結(jié)是很有必要滴~。先附上新版微公益地址，點擊傳送門：http://gongyi.weibo.com

先回顧一下微公益改版項目的相關(guān)背景：
微公益改版在8月份正式立項，所有設(shè)計開發(fā)工作完成是在11月初，實際上前期準(zhǔn)備工作6月份就已開始。老版微公益是以個人求助產(chǎn)品為主，主要服務(wù)對象也是對個人求助項目感興趣的求助者、捐贈者及公益組織。但在微公益平臺上，還有一群愛心人士，他們自發(fā)熱衷于公益事件的收集、報道與傳播，這樣一批極具公益事業(yè)推動力量的人群卻在老版微公益平臺上沒有被很好的挖掘出來。如果有一套相應(yīng)的產(chǎn)品機制去很好地組織和引導(dǎo)這群愛心用戶，就能使微公益平臺成為一個能夠自生產(chǎn)與自傳播的閉環(huán)環(huán)境，而非強烈依賴人工運營和熱點事件。

“愛心團”就是新版微公益為解決這一問題打造的重點產(chǎn)品。微公益還新推出了轉(zhuǎn)發(fā)捐助和微拍賣兩個新產(chǎn)品，舊有產(chǎn)品框架已不能兼容。加上老版微公益信息結(jié)構(gòu)與界面設(shè)計也不盡人意，模塊堆砌、設(shè)計保守、擴展性不夠都是現(xiàn)實問題。再則，微公益產(chǎn)品的用戶活躍度偏低，除去產(chǎn)品輻射的用戶群基數(shù)較小這一產(chǎn)品本身特性不說，信息傳達、使用體驗也是重要的影響因素，因此新版需要著重考慮體驗優(yōu)化問題，如何優(yōu)化各環(huán)節(jié)流程、降低用戶參與門檻貫穿了整個改版思路。

從項目背景中可以總結(jié)出以下幾個項目特點及對應(yīng)的交互挑戰(zhàn)：

特點1：新版涉及多條產(chǎn)品線整合。個人求助、轉(zhuǎn)發(fā)捐助、微拍賣、愛心團，后面三個都是新產(chǎn)品
交互挑戰(zhàn)：不管產(chǎn)品架構(gòu)多龐大、功能分支有多少、邏輯判斷多復(fù)雜，最終呈現(xiàn)給用戶的界面始終要簡潔清晰、操作明確，各產(chǎn)品概念又能清楚傳達到位。因此做好頁面信息布局、頁面關(guān)系內(nèi)容間的操作引導(dǎo)很重要。

特點2：用戶角色眾多。與其他微博產(chǎn)品用戶構(gòu)成不同，雖然微公益受眾群體較小，但典型用戶角色卻不少，如果是一個完整的閉環(huán)，微公益需要的用戶包括：求助者-被救者-施助者–傳播者-公益組織/NGO -核實人-媒體-名人明星-商家企業(yè)。
交互挑戰(zhàn)：面對眾多角色，如何優(yōu)化操作流程適應(yīng)各角色的不同需求。

特點3：迫切需要提升產(chǎn)品用戶活躍度。
交互挑戰(zhàn)：做哪些體驗上的優(yōu)化，能夠增強用戶黏性。

特點4：期待全新的界面設(shè)計。
交互挑戰(zhàn)：怎樣的界面設(shè)計，能夠呈現(xiàn)耳目一新的微公益。

特點5：缺少原始的數(shù)據(jù)積累。正如前所說，本次改版后的微公益幾乎是全新的，新的產(chǎn)品、新的界面、新的操作、新的體驗，所以在用戶數(shù)據(jù)的積累方面比較欠缺。
交互挑戰(zhàn)：不管是新產(chǎn)品設(shè)計或是已有產(chǎn)品體驗優(yōu)化，都期望有具體的用戶行為數(shù)據(jù)作指導(dǎo)，能讓每一個方案都有理有據(jù)。在數(shù)據(jù)欠缺的情況下，我們幸運的得到了用研同事的幫助，前期的用戶訪談彌補了這一問題。

下面講述一些設(shè)計環(huán)節(jié)中的細節(jié)，總結(jié)一下處理上述挑戰(zhàn)時的嘗試與不足：

1. 產(chǎn)品概念直達用戶——微公益首頁全新架構(gòu)

1） 功能展示區(qū)
首頁架構(gòu)的首要任務(wù)是：將微公益下屬的幾個產(chǎn)品概念在第一時間清晰明確的傳達給用戶。個人求助是已有產(chǎn)品，用戶對微公益的印象也多停留在個人求助項目上，而轉(zhuǎn)發(fā)捐助、微拍賣、愛心團對用戶來說都是新概念。需求很明確：我們需要給到用戶A、B、C、D信息，而到了界面呈現(xiàn)上，體驗設(shè)計考慮更多的是:用戶怎樣接收A、B、C、D信息。最簡單的方式莫過于產(chǎn)品介紹：“微公益新推出XXX、XXX…產(chǎn)品，功能特性有XXXX，能幫助你解決XX問題，快來體驗吧…”

2） 項目推薦區(qū)

首頁的公益項目展示分兩部分，熱點推薦項目與一般項目，重點是熱點推薦板塊的設(shè)計。首先熱點項目必須在首屏有露出，所以我們盡量壓縮了Banner高度；其次，舊版微公益有個不好的問題是首頁顯示的項目長時間都沒有變化，用戶來看一看，沒新鮮勁兒就走了。原因在于項目推薦類別少，推薦形式單一，且設(shè)計樣式太占頁面空間，8個推薦項目就占據(jù)了首頁全部。在新版設(shè)計時我們考慮了三點改進：

i）熱點項目不在多，而在于精華集中，將熱點集中在首屏下方1/2區(qū)域，用戶好看好參與，如果意猶未盡，第二屏還有10個一般性項目展示，讓部分感興趣的用戶繼續(xù)深入閱覽。

ii）如何讓項目活起來？吸取舊版單一主題較少變化的缺點，這次我們?yōu)橛脩粼诤笈_準(zhǔn)備了8個推薦主題，前臺顯示4個，由運營定期更換，每個主題1個項目，這樣主題項目均可變，能夠大大提高項目更新頻率。

iii）4個主題項目可以一次性手動更換。在做“換一換”的交互時，之前的方案是針對每個主題項目單獨切換的，方案評審時發(fā)現(xiàn)單個換一換可能更適合商品類的展示操作，但在尋找公益項目場景下，用戶需要的是快速捕捉感興趣的項目，可能做批量更換更合適一些。

另外，關(guān)于項目圖片展示的大小問題，我們也有過一些折騰。最開始走的是現(xiàn)在較為流行的大圖設(shè)計風(fēng)格，想以圖片吸引用戶，嘗試后才知道，微公益并不適用，因為公益項目的圖片都太慘了，整個首頁像是彌漫在一片哀悼之中。針對公益項目的實際情況，我們縮小了求助類項目的圖片尺寸，對頁面進行了合適的圖文排版，但我們?nèi)匀槐Ａ袅宋⑴馁u項目大大的圖片設(shè)計，因為拍賣項目用的是明星圖片，特殊情況特殊處理吧。

3） 愛心墻

在首頁的末尾，我們有一個愛心板塊，用來顯示一直以來用心支持微公益的愛心用戶頭像，這是一個純感性的設(shè)計，只是想在眾多的功能與邏輯之外多一些情感氛圍，希望熱衷微公益的朋友們都有機會出現(xiàn)在此，頭像是由程序設(shè)定動態(tài)更換的哦~

4） 鎖屏背景
在現(xiàn)有的眾多微博產(chǎn)品設(shè)計形態(tài)中，首頁采用鎖屏背景是一次大膽的嘗試。頭圖+通欄導(dǎo)航+灰色背景是現(xiàn)在微博平臺下多數(shù)產(chǎn)品的頁面形式，當(dāng)然，我們認可這樣的設(shè)計形式，這是歷經(jīng)檢驗的“標(biāo)準(zhǔn)”模式，用戶接受也習(xí)慣。然而，我們想讓首頁有更多的承載內(nèi)容，但又不想頁面顯得那么笨重。

在前期調(diào)研時，我們找了一些較符合微公益產(chǎn)品氣質(zhì)的國外網(wǎng)站，借鑒了一些它們的設(shè)計風(fēng)格，其中鎖屏背景也是在那時想到的。如果有一個較輕的背景就固定在那里，瀏覽頁面時，頁面上的輕微透明的內(nèi)容模塊從背景上輕輕滑過，像浮萍一樣，這就是原始用鎖屏背景的想法，但不知道我們最終的界面是否達到了這個效果，我們期待用戶的反饋?；蛘邚氐资?，或者毫無感覺，或者有那么一絲新意，就請大家檢驗了。

2. 角色用戶各取所需——項目詳情頁功能區(qū)優(yōu)化

對詳情頁進行重點優(yōu)化的是頭部項目介紹區(qū)的內(nèi)容和操作引導(dǎo)。老版詳情頁的項目信息多且雜，幾乎占據(jù)了整個首屏，晃眼一看，很難抓取到關(guān)鍵信息。像救助對象、目標(biāo)金額等重點信息缺少突出。主要功能按鈕也淹沒在了一片文字描述中。新版詳情頁這塊第一是做了信息的排版整理，先抽離出重點信息與重要操作，單獨設(shè)計，包括求助需求的操作按鈕（需要多少捐款、是否需要衣物、需要多少名志愿者）。其次精簡次要信息：只保留了標(biāo)題、求助時間地點及項目核實情況，放置在項目圖片旁邊；然后再將一些零碎信息如求助類型用icon表示，能緩解文字造成的視覺疲勞。這樣，項目介紹區(qū)域在不失信息傳達的同時就干凈清爽多了。

該簡化的地方不能手下留情，相反，該強化的信息反而要花力氣豐富。之前對救助對象的描述較為簡略，只是幾段文字的堆砌，但在用研訪談中，我們了解到其實真正能打動用戶決定捐款的恰恰是對救助對象的細節(jié)描述，所以在新版中，我們單獨將這部分信息展示出來，并增加了版式設(shè)計及添加圖片，讓這部分文字信息更豐富，希望能做點努力幫助感動到用戶。

前文也提到微公益的用戶群角色較多，在詳情頁里，我們就遇到三種典型用戶：普通用戶、公益組織和核實人。之前的設(shè)計沒有對用戶做區(qū)分，統(tǒng)一提供捐款按鈕。但實際對于公益組織和核實人而言，這兩撥用戶有自己的使命，核實人以核實項目為主、公益組織以認領(lǐng)項目為主，雖然他們也有可能參與捐款，但畢竟不是主要需求，新版中我們對這三類用戶的任務(wù)流做了區(qū)分，普通用戶引導(dǎo)捐款/捐物/報志愿者；核實人引導(dǎo)去核實項目；公益組織引導(dǎo)認領(lǐng)此項目。并且對于一些特殊狀態(tài)還進行單獨的操作引導(dǎo)，如項目沒有啟動捐款時會引導(dǎo)用戶進行“愛心傳遞”轉(zhuǎn)發(fā)操作。

3. 簡潔但不簡單——項目列表信息簡化

微公益有三個項目列表頁，分別聚集了所有的個人求助項目、轉(zhuǎn)發(fā)捐助項目、微拍賣項目。對于列表信息，我們的優(yōu)化目標(biāo)是：幫助用戶更簡單、快速的瀏覽項目、閱讀項目及篩選項目。對于舊版來說，信息繁多，所有想給用戶看的信息都放出來了，一屏顯示不了3個項目，但并不是給出的信息越多，用戶就了解得越多，往往需要被用戶接受的重要信息已經(jīng)被淹沒了。

我們做的第一個優(yōu)化就是列表信息的精簡、整合和突出。我們果斷干掉了占3行的詳情信息，因為用戶來到列表頁的目的是快速尋找感興趣的項目，我們不鼓勵他在這里細看詳情描述，并且即使用了3行的空間也很難把一個項目說清楚的，所以還不如不說，把寶貴的界面資源留給重點需要突出的信息吧。

接下來我們做了信息的整合，大家看到，舊版中有5項單獨的信息（發(fā)起人、公益支持、救助對象等），這些信息確實很重要，但就這樣零碎的堆砌在一起，估計除了占地兒外，也難被用戶接收到，我們處理方式是，編寫了一句話的格式，將這些零散信息統(tǒng)統(tǒng)裝進去，發(fā)起人、公益支持、救助對象等信息就包裝在了一句文案里，如“@春苗助醫(yī)?發(fā)起，@童愛計劃?基金支持的救助”小山”行動，一起幫助小山度過難關(guān)! 查看詳情>>”，這樣稍微人性化點的語言應(yīng)該更能讓用戶接受吧。

第三個優(yōu)化點就是強化關(guān)鍵信息。試想，用戶來此尋找項目，除標(biāo)題、圖片外，還有什么是用戶最關(guān)心的呢，那就是項目需求：捐錢- 需要捐多少，已完成多少捐款，這個項目熱不熱，有多少網(wǎng)友參與？物資-需要什么物品？志愿者-需要多少人？這些信息我們重點在視覺上做了包裝，用醒目的icon類型，邊框修飾，明確告知用戶這個項目“目標(biāo)100000元，已完成25%”，相信用戶會一眼看到。

此外，除了信息的處理，左側(cè)導(dǎo)航還有個項目推薦的模塊“幫幫他”，我們讓這個模塊常駐界面上不隨滾動滑出界面，目的是讓熱推項目讓更多人關(guān)注到。

當(dāng)然，列表設(shè)計有不足的地方。同事在使用后發(fā)現(xiàn)一個不足點就是：列表中缺少項目狀態(tài)信息，如進行中或者是已結(jié)束。雖然我們在列表之上提供了一些維度的篩選條件，也包括時間狀態(tài)的篩選，但用戶可能會將注意力集中在列表中，而潛意識里忽略了上方的篩選條件，這也是信息精簡后需要配合一些篩選條件進行信息篩選的結(jié)果。這個問題我們會做優(yōu)化，可能會將時間狀態(tài)提出來置于列表中。

4. 讓愛輕松傳遞——個人求助、轉(zhuǎn)發(fā)捐助Feed優(yōu)化

微公益Feed是微公益項目對外傳播的重要途徑，有很大部分愛心用戶都是在主站Feed中參與公益行動的，因此，個人求助、轉(zhuǎn)發(fā)捐助Feed體驗也很重要。改版后的Feed，在縮略狀態(tài)下，按鈕的文案統(tǒng)一為“查看詳情”而非之前的“立即捐款”或其他，這個文案也有過反復(fù)的討論與修改。

由于主站Feed在縮略狀態(tài)下實際是張死圖，無法單獨識別按鈕狀態(tài)，所以我們就無法預(yù)期用戶點擊展開縮略圖的行為到底是要捐款還是僅僅要查看詳情，在此處一些偏向性太重的文案引導(dǎo)可能就會引起用戶的反感，比如“捐款”，再考慮到不論用戶是想看更多還是想捐款，都必須在展開后的狀態(tài)中完成操作，所以縮略狀態(tài)下的引導(dǎo)文案就不再糾結(jié)了，明確無誤的引導(dǎo)用戶點擊展開就是目的，所以叫做“查看詳情”。

對于展開后的狀態(tài)，我們同樣采用了項目列表信息優(yōu)化的方法對次要信息進行精簡及對重要信息進行突出，并且加強了微公益的品牌標(biāo)識，同樣對轉(zhuǎn)發(fā)捐助產(chǎn)品在右上角進行了品牌突出。在個人求助Feed的展開狀態(tài)，我們對用戶著重做了2個行為引導(dǎo)，因為之前只有1個“立即捐款”，那對于只想通過轉(zhuǎn)發(fā)行為獻愛心的用戶如何引導(dǎo)呢，所以要讓這兩種用戶各取所需，及提供了2個引導(dǎo)按鈕：“立即捐款”與“愛心轉(zhuǎn)發(fā)”。

對于展開狀態(tài)底部的推薦信息，原來的設(shè)計是一張大的項目圖片配上標(biāo)題參與人數(shù)顯示在底部，我們測試用戶的時候發(fā)現(xiàn)，用戶無法區(qū)分到底是哪個是展開后的項目，問題就在于附加信息太搶眼了，雖然我們的運營目標(biāo)是讓用戶多多看見公益項目，但卻起到了較大的干擾作用，我們果斷的將推薦項目弱化到最低，只顯示了一行次鏈接色的項目標(biāo)題，這樣有主有次信息才更重點和有層級。

5. 小設(shè)計大反響——微拍賣的快速誕生

微拍賣是微公益下的一個子產(chǎn)品，是將一批明星物品以競價方式在線拍賣，所得金額全部捐贈給公益項目或公益基金會，對于廣大網(wǎng)友來說，這是集愛心與娛樂為一體的公益產(chǎn)品形式，很受用戶歡迎。

微拍賣也是本次在項目總結(jié)中不得不說的一個段落，不僅產(chǎn)品本身充滿了設(shè)計的樂趣，而且設(shè)計過程非常之快卻收獲了很好的反響，并且在這個過程中，還得到用研同事在用戶數(shù)據(jù)分析上的給力支持，以及構(gòu)建同事的一些新穎的前端技術(shù)。總之，微拍賣的設(shè)計過程點滴都值得回憶。

1） 小巧結(jié)構(gòu)、快速設(shè)計
微拍賣是一個計劃外的產(chǎn)品，為了趕上8月中旬的時尚芭莎慈善晚會，從產(chǎn)品構(gòu)思到開發(fā)完成僅有一個月時間。開發(fā)周期如此緊張，所以在前期設(shè)計階段幾乎不可能有充裕的時間進行調(diào)研、分析、架構(gòu)，我們采用了最簡單的方法：產(chǎn)品、運營、交互花半天時間坐在一起，從信息結(jié)構(gòu)到出價流程到界面UE，再加上運營的一些策略計劃，一下午加一晚上的時間已經(jīng)全部搞定，省去了通常項目中反復(fù)的確認環(huán)節(jié)與繁瑣的交付流程，從需求方到設(shè)計方面對面，效率讓我們自己都很驚訝。

但是大家能看見，微拍賣整個產(chǎn)品的結(jié)構(gòu)也很簡單，幾乎沒有多余的頁面，只保留了必要的拍品聚合頁及拍品詳情頁外加一個排名頁面，主要任務(wù)流程就是用戶如何加價競價。正是采用了這樣小巧的結(jié)構(gòu)才保證了緊迫的項目排期能順利完成。此外，在制定微拍賣設(shè)計風(fēng)格的時候，咱們的UI?@卜酷塔兒?可是相當(dāng)給力的，初稿即獲得老大們的一致認可，一次通過，這在通常的項目中也是很少見的。

2） 主打明星瀑布流
做微拍賣比做其他的公益產(chǎn)品有個很爽的地方就是：明星圖片優(yōu)勢，比起那些凄慘的公益項目圖片，明星圖片簡直是完美的設(shè)計素材，吸引眼球不在話下，所以我們毫不吝嗇的呈現(xiàn)明星大圖，本來按實際來說拍賣物品就該顯示物品圖片，不過在真實的效果面前，這點邏輯也就不太重要了。在聚合頁里，我們采用了瀑布流設(shè)計，再結(jié)合明星真人照，整個首頁的效果就是星光璀璨，咋眼看去很以為是在拍賣明星呢~，第一眼能吸引用戶的目的也就達到了。

3） 新穎的CSS動畫效果
在做瀑布流首頁的時候，我們也得到了前端同學(xué)的給力支持，在解決頁面加載方式的問題上，我們與@young_春宇?同學(xué)討論是否可以尋求一些新的CSS即可實現(xiàn)的交互效果，最終實現(xiàn)了圖片擴散的形式進行頁面加載，視覺上更增添了幾分優(yōu)雅~

4） 詳情頁首屏設(shè)計
在拍品的詳情頁面，雖然需要展示的信息也很多，但為了保證拍品效果及出價操作的易
用性，我們還是保留了整個首屏的空間用于顯示拍品圖片及出價操作，為了增強體驗效果，對空間的使用毫不保留哈~

5） 用研數(shù)據(jù)支持
UDC用研部門的同事全程跟進了微拍賣的線上產(chǎn)品優(yōu)化，進行了用戶操作行為調(diào)研，用
于任務(wù)流優(yōu)化；以及在線使用人群的數(shù)據(jù)特征分析，用于用戶群體的定位及研究。期間，用研、交互、產(chǎn)品、運營一起進行過多次討論與溝通，在優(yōu)化出價流程上@讀書貧道?同學(xué)從訪談中提取了關(guān)鍵步驟的優(yōu)化建議：多數(shù)有心出價的用戶在需要填寫個人信息的狀態(tài)時猶豫甚至終止了出價行為，說明我們認為必要的字段填寫不在用戶的預(yù)期之內(nèi)，用戶不接受這樣的操作任務(wù)，提示我們應(yīng)該采取其他隱形措施收集想要的用戶信息，而不是直接使用這種容易干擾用戶且引發(fā)用戶疑慮的操作方式。

對于微拍賣用戶群體的數(shù)據(jù)特征@菁菁無悔?同學(xué)克服種種困難收集到用戶數(shù)據(jù)，并做了詳盡的數(shù)據(jù)分析，記得分析報告會結(jié)束時，公益的產(chǎn)品及運營人員真心的給予了熱烈的掌聲。

結(jié)語

總結(jié)就想到了這些，不過新版剛剛上線，總結(jié)不是結(jié)束，而是又一個開始，我們接下來會密切關(guān)注用戶反饋，發(fā)起上線后第一輪體驗優(yōu)化；并且將繼續(xù)與用研部門合作，將對整個微公益平臺提出布點需求，希望后續(xù)的設(shè)計有更充實的數(shù)據(jù)基礎(chǔ)。煩請各位大蝦們踴躍體驗微公益，提出想法和建議，我們一起將我們的愛心通過點滴設(shè)計傳遞出去，讓更多需要幫助的人得到救助~