本文通過(guò)實(shí)際案例展示，講解了項(xiàng)目中的產(chǎn)品知識(shí)運(yùn)用與項(xiàng)目管理如何進(jìn)行，如果管理好進(jìn)度，把控好設(shè)計(jì)的方向，以及在設(shè)計(jì)精細(xì)度的提升上有哪些方面可以做突破，希望給予你一定的幫助。

前言：致謝本次參與小組項(xiàng)目的同學(xué)們，一起的努力完成了本次展示的示例項(xiàng)目螞蟻財(cái)富Redesign，有努力有汗水有收獲。本文采用案例講解實(shí)際項(xiàng)目中的產(chǎn)品知識(shí)運(yùn)用與項(xiàng)目管理如何進(jìn)行，如果管理好進(jìn)度，把控好設(shè)計(jì)的方向，以及在設(shè)計(jì)精細(xì)度的提升上有哪些方面可以做突破，希望給予你一定的幫助。

本文內(nèi)容較長(zhǎng)，特此進(jìn)行文章結(jié)構(gòu)的梳理，方便大家快速了解文章的結(jié)構(gòu)

前言：介紹設(shè)計(jì)師的能力圖與自我修養(yǎng)

第1部分：項(xiàng)目的準(zhǔn)備工作

第2部分：如何進(jìn)行項(xiàng)目管理

第3部分：推動(dòng)項(xiàng)目的產(chǎn)出

第4部分：關(guān)于項(xiàng)目瀏覽框架的構(gòu)建 如下

項(xiàng)目可交互瀏覽網(wǎng)址：http://vip.uedart.com/works/templatesRedesign/index.html

優(yōu)秀設(shè)計(jì)師的能力圖譜與自我修養(yǎng)

1. 設(shè)計(jì)師的能力圖譜

注：能力圖譜內(nèi)容出自EthankDesign

整個(gè)行業(yè)對(duì)設(shè)計(jì)師的要求越來(lái)越高，一個(gè)好的設(shè)計(jì)師的能力不只是單方面的，用人企業(yè)對(duì)設(shè)計(jì)師綜合素質(zhì)的要求也在不斷的提升。這就對(duì)喜歡想往高尖端設(shè)計(jì)師發(fā)展的同學(xué)們提供了新的提升方向，不只是停留在之前單方面的“專(zhuān)業(yè)設(shè)計(jì)”能力的提升。

2. 設(shè)計(jì)師的自我修養(yǎng)

在上面我們講到能力圖譜，設(shè)計(jì)師需要多方面發(fā)展，提升自己的綜合素質(zhì)，而這里的設(shè)計(jì)師的自我修養(yǎng)，則給大家提供了發(fā)展的幾個(gè)維度方向。

要成為一個(gè)優(yōu)秀的設(shè)計(jì)師任重道遠(yuǎn)，現(xiàn)在流行的一個(gè)詞語(yǔ)“斜桿青年”，多能力圖譜的設(shè)計(jì)師在未來(lái)的潛力是可以被預(yù)見(jiàn)的，不要被自己的想法與安逸束縛，應(yīng)該跳出能力舒適圈尋求能力的新芽，發(fā)掘自身更加優(yōu)秀的品質(zhì)。居安思危，華為的”備胎計(jì)劃，給予了我新的啟示，沒(méi)有絕對(duì)安逸的工作環(huán)境，要想活得自在，必須有足夠“自律”的標(biāo)準(zhǔn)來(lái)要求自己不斷提升，以應(yīng)對(duì)未來(lái)各種各樣的變化。

接下去就進(jìn)入本文的正題，如何將產(chǎn)品知識(shí)與設(shè)計(jì)相結(jié)合，下面我們采用螞蟻金服產(chǎn)品的Redesign項(xiàng)目來(lái)做介紹，具體如何去實(shí)施一個(gè)設(shè)計(jì)項(xiàng)目。

以下項(xiàng)目設(shè)計(jì)內(nèi)容是團(tuán)隊(duì)的成果，在此致謝一起努力的小伙伴們（排名不分先后）

一、項(xiàng)目前的準(zhǔn)備

1. 粗略體驗(yàn)大致瀏覽

體驗(yàn)螞蟻金服這款產(chǎn)品，大致瀏覽產(chǎn)品的主要模塊，初步了解這款產(chǎn)品的特性與主體功能。這個(gè)階段重在“漫無(wú)目的”，這樣的隨機(jī)感覺(jué)，有點(diǎn)像是小白用戶。

2. 分析產(chǎn)品結(jié)構(gòu)

層層深入，了解螞蟻金服的產(chǎn)品結(jié)構(gòu)，進(jìn)行分解拆分流程。

以下是我進(jìn)行使用后的產(chǎn)品結(jié)構(gòu)整理與信息結(jié)構(gòu)整理

注：由于展開(kāi)內(nèi)容比較多，這邊就不展開(kāi)后面的節(jié)點(diǎn)了。

3. 落實(shí)到主流程里的細(xì)節(jié)體驗(yàn)

這個(gè)階段更注重的是某個(gè)主要流程的實(shí)際體驗(yàn)感，為了能夠體驗(yàn)金融理財(cái)產(chǎn)品購(gòu)買(mǎi)的完整流程，為此我還特意購(gòu)買(mǎi)了螞蟻金服的一個(gè)金融產(chǎn)品。對(duì)的，有些時(shí)候體驗(yàn)是要花費(fèi)一些代價(jià)的，這個(gè)時(shí)候就要衡量好“花費(fèi)價(jià)格”與“收獲價(jià)值”，前后總共花費(fèi)了10元rmb，這就是一筆低花費(fèi)高收獲的交易。

二、項(xiàng)目管理怎么做

1. 明確項(xiàng)目目標(biāo)

• 提升產(chǎn)品信任感、品質(zhì)感
• 重點(diǎn)提高產(chǎn)品智能化：重點(diǎn)設(shè)計(jì) 智能場(chǎng)景及其子頁(yè)面
• 在產(chǎn)品視覺(jué)設(shè)計(jì)中融入品牌基因，提升產(chǎn)品辨識(shí)度
• 對(duì)標(biāo)一線團(tuán)隊(duì)競(jìng)品視覺(jué)設(shè)計(jì)精細(xì)度，同時(shí)差異化創(chuàng)新

2. 細(xì)化拆分任務(wù)

明確好項(xiàng)目目標(biāo)，我們就有了一個(gè)非常明確的前進(jìn)方向，這個(gè)時(shí)候在進(jìn)行任務(wù)細(xì)化就更有方向感。按照設(shè)計(jì)前中后的大流程去把控整體項(xiàng)目的任務(wù)細(xì)化。

3. 規(guī)劃時(shí)間節(jié)點(diǎn)

細(xì)化拆分好任務(wù)，根據(jù)項(xiàng)目參與人員每個(gè)人的特色以及任務(wù)的截止時(shí)間，合理分配好任務(wù)，這邊我采用的是OmniPlan工具進(jìn)行每個(gè)人的項(xiàng)目分配，可以直接輸出任務(wù)時(shí)間軸線圖與任務(wù)細(xì)分表。對(duì)于成員間的銜接關(guān)聯(lián)和每個(gè)任務(wù)的完成狀態(tài)都可以一目了然的觀察到。

注：前期設(shè)計(jì)前分配任務(wù)部分任務(wù)時(shí)間軸線圖

為了讓大家看的更加的一目了然，我這邊把設(shè)計(jì)前中后的時(shí)間節(jié)點(diǎn)圖繪制了出來(lái)，這樣就更加清晰的方便大家理解整個(gè)項(xiàng)目的走勢(shì)節(jié)點(diǎn)走勢(shì)。

三、推動(dòng)項(xiàng)目的產(chǎn)出

根據(jù)規(guī)劃好的時(shí)間節(jié)點(diǎn)，推動(dòng)各成員的設(shè)計(jì)產(chǎn)出提交，進(jìn)行整合。在會(huì)議上進(jìn)行探討，各成員提出自己的看法與作品中可能存在的問(wèn)題，這樣有利于初始階段不至于完全走錯(cuò)方向，導(dǎo)致后期的修改較大，盡量在前期多進(jìn)行溝通，推動(dòng)設(shè)計(jì)的方向與優(yōu)化。

1. 設(shè)計(jì)前

設(shè)計(jì)前我們做了大量的產(chǎn)品相關(guān)的分析，這個(gè)階段就是以我們的目標(biāo)為導(dǎo)向，進(jìn)行產(chǎn)品的分析，得出有利于我們Redesign的指導(dǎo)依據(jù)。設(shè)計(jì)不是靠感覺(jué)，這個(gè)產(chǎn)品抄一抄，那個(gè)功能移動(dòng)過(guò)來(lái)植入進(jìn)去，就是產(chǎn)品。

我們?cè)陧?xiàng)目前已經(jīng)對(duì)螞蟻財(cái)富這款產(chǎn)品有了初步的剖析，進(jìn)行了結(jié)構(gòu)分析以及產(chǎn)品的體驗(yàn)，這樣有助于我們?cè)诒倦A段的其他層面信息的提取與分析。

我們總共進(jìn)行以下幾方面的分析整合：

競(jìng)品分析

我們通過(guò)艾瑞數(shù)據(jù)，提取到了螞蟻財(cái)富相關(guān)的基礎(chǔ)信息：

通過(guò)艾瑞&獵豹金融理財(cái)服務(wù)相關(guān)的產(chǎn)品排行，來(lái)進(jìn)行相關(guān)競(jìng)品產(chǎn)品的提?。?/p>

提取出相關(guān)產(chǎn)品進(jìn)行分析對(duì)比：螞蟻財(cái)富、京東金融、小米金融、天天基金、陸金所、愛(ài)錢(qián)進(jìn)：

進(jìn)行競(jìng)品內(nèi)外環(huán)對(duì)比：

首頁(yè)分析

本項(xiàng)目?jī)?yōu)先對(duì)首頁(yè)進(jìn)行改版，我們針對(duì)首頁(yè)各模塊進(jìn)行分析：模塊中的不足之處、強(qiáng)光測(cè)試分析、一維分析。

情緒板

對(duì)螞蟻財(cái)富進(jìn)行關(guān)鍵詞提?。褐悄堋⒕?、安全，并進(jìn)行二級(jí)聯(lián)想最終得出以下關(guān)聯(lián)：

平時(shí)我們也可以多做一些這樣的頭腦風(fēng)暴，有助于我們提高對(duì)事物的內(nèi)在關(guān)聯(lián)的認(rèn)知。

再通過(guò)關(guān)鍵詞從圖像庫(kù)中提取匹配的圖像，為最終產(chǎn)品的色彩取向定調(diào)。

4W場(chǎng)景

何為4w場(chǎng)景？

簡(jiǎn)單來(lái)說(shuō)就是“who 什么人”、“when 什么時(shí)間”、“where 什么地點(diǎn)”、“what 什么事情”。

串成一句話描述是“什么人在什么時(shí)間在什么地點(diǎn)做了什么事情”，這個(gè)就是所謂的4w場(chǎng)景。這里設(shè)計(jì)前的產(chǎn)品分析我們?yōu)槭裁匆\(yùn)用“4W場(chǎng)景”呢？

4W場(chǎng)景的分析有助于我們了解用戶真實(shí)的使用場(chǎng)景，從而為了滿足用戶當(dāng)前場(chǎng)景下的使用，我們的產(chǎn)品有什么樣的提升空間，從而提升用戶體驗(yàn)感。而不像以往做產(chǎn)品的經(jīng)常這樣做自己公司的產(chǎn)品功能，某某競(jìng)品做了個(gè)什么樣的新功能就“抄過(guò)來(lái)”，不知其所以然，很難設(shè)身處地的為用戶去思考又怎么能做好的產(chǎn)品和好的用戶體驗(yàn)。一樣的設(shè)計(jì)師在拿到需求的時(shí)候除了要明白自己設(shè)計(jì)的功能外，還用思考用戶是在什么的場(chǎng)景下使用這樣的功能，那我們的設(shè)計(jì)才更有依據(jù)，更加能說(shuō)服產(chǎn)品采納此設(shè)計(jì)方案。

以下是針對(duì)螞蟻財(cái)富的4W場(chǎng)景分析：

用戶分析

通過(guò)前面艾瑞數(shù)據(jù)，我們得到了關(guān)于螞蟻財(cái)富用戶分步的相關(guān)數(shù)據(jù)

從數(shù)據(jù)中可以得出用戶社會(huì)特征

1. 螞蟻財(cái)富使用人群：男性占比大于女性
2. 年齡段：31-35歲人群占比最多
3. 北上廣等一線大城市的人群較多，這一類(lèi)人群學(xué)識(shí)和收入都比較偏高

由此出發(fā)結(jié)合相關(guān)理財(cái)型資料的查閱與知識(shí)提取，結(jié)合分析將理財(cái)用戶分為6類(lèi)

在財(cái)富測(cè)試階段，可以將用戶按不同類(lèi)型區(qū)分開(kāi)來(lái)，做定制化推薦，提高轉(zhuǎn)化率謹(jǐn)慎型穩(wěn)健型平衡型積極型激進(jìn)型小白用戶回到用戶定位說(shuō)用戶需求，因?yàn)槊嫦虻氖菑V大有潛在理財(cái)需求但又不懂理財(cái)、不敢理財(cái)、對(duì)理財(cái)認(rèn)知尚淺的用戶，這樣特征和屬性的用戶需求在哪呢？基本需求：簡(jiǎn)單、安全地理財(cái)；所提供產(chǎn)品功能服務(wù)簡(jiǎn)單易上手，并且在資金安全方面有所保障，能夠讓用戶本金和其應(yīng)得其他利益不會(huì)因?yàn)槠脚_(tái)系統(tǒng)故障、公司倒閉等原因遭受不白損失。故而簡(jiǎn)單和安全，是大眾理財(cái)最基本也是最起碼的需求。期望需求：有序平穩(wěn)地使資產(chǎn)得到增值和保值，至少跑得贏通脹，雖然用戶可能并不知道是通脹。興奮需求：創(chuàng)新的結(jié)構(gòu)化產(chǎn)品使得用戶資產(chǎn)在風(fēng)險(xiǎn)可控前提下獲得超出預(yù)期的回報(bào)；平臺(tái)提供更為完善的提高資金流動(dòng)性、安全性、收益性等服務(wù)。其他更多智能、人工貼心服務(wù)。

聚類(lèi)分析

結(jié)合用戶分析的結(jié)果，我們針對(duì)目標(biāo)六大類(lèi)用戶進(jìn)行深入的分析，并且對(duì)這六類(lèi)的典型用戶進(jìn)行了聚類(lèi)分析，從而剖析出更深層次的痛點(diǎn)。

用戶體驗(yàn)地圖

根據(jù)理財(cái)產(chǎn)品購(gòu)買(mǎi)的主流程“購(gòu)買(mǎi)前-購(gòu)買(mǎi)中-購(gòu)買(mǎi)后”進(jìn)行用戶體驗(yàn)地圖的研究，從中發(fā)現(xiàn)當(dāng)前螞蟻理財(cái)購(gòu)物流程的可提升性，痛點(diǎn)與機(jī)會(huì)點(diǎn)。

信任建立

1. “精選基金”可以改為螞蟻精選，建立螞蟻財(cái)富的信任感

2. 加載動(dòng)效可以像美團(tuán)app一樣用特有的品牌化加載小動(dòng)效，植入螞蟻財(cái)富螞蟻的形象

3. 底部首頁(yè)tab圖標(biāo)

可以通過(guò)首頁(yè)圖標(biāo)的品牌化設(shè)計(jì)，如淘寶，當(dāng)滾動(dòng)時(shí)，首頁(yè)圖標(biāo)變成滾動(dòng)到最上的圖標(biāo)

4. 字體設(shè)計(jì)，底部螞蟻財(cái)富的字樣可以設(shè)計(jì)感更強(qiáng)一點(diǎn)，像京東金融一樣有自己的特色

5. 金剛區(qū)的圖標(biāo)可以設(shè)計(jì)的有特色點(diǎn)，如咸魚(yú)

6. 品牌色建立，前面根據(jù)情緒板采用黑金色更加符合理財(cái)金融，但是除此之外考慮到原有品牌的調(diào)性（及阿里新系產(chǎn)品）我們后期將黑金改完了原有的藍(lán)色系

7. 智能理財(cái)助手采用螞蟻的形象，打造形象IP

右下角懸浮按鈕考慮設(shè)計(jì)成智能機(jī)器人（融入螞蟻形象IP）

智能場(chǎng)景

1. 定制化的推薦，通過(guò)財(cái)富測(cè)試，按用戶的類(lèi)型來(lái)推薦不同種類(lèi)的基金或理財(cái)產(chǎn)品

2. 智能理財(cái)助手，原app的理財(cái)助手在社區(qū)里，隱藏有點(diǎn)深，先把他以螞蟻的形象體現(xiàn)在首頁(yè)，讓用戶更快的接觸到他，了解他，提高理財(cái)便捷度

參考對(duì)象：眾安精靈、美團(tuán)智能點(diǎn)餐

3. 截屏判斷出是要進(jìn)行在線客服咨詢(xún)還是分享微信

2. 設(shè)計(jì)中

設(shè)計(jì)過(guò)程推動(dòng)的步驟：

花瓣收集

這邊我就不做過(guò)多的贅述，簡(jiǎn)單的說(shuō)就是找參考設(shè)計(jì)

https://huaban.com/boards/50330818/（注：我收集的相關(guān)的理財(cái)產(chǎn)品的參考設(shè)計(jì)）

原型設(shè)計(jì)

前期我們做了大量的產(chǎn)品分析工作，為我們開(kāi)展具體的產(chǎn)品重構(gòu)頁(yè)面提供了強(qiáng)有力的支撐，進(jìn)入到這個(gè)環(huán)節(jié)相對(duì)產(chǎn)品分析工作有了很大的不同，我們要具體的把前期做的所有分析產(chǎn)出的內(nèi)容轉(zhuǎn)化成真實(shí)落地的產(chǎn)品，在這個(gè)過(guò)程勢(shì)必會(huì)遇到一個(gè)我們時(shí)常會(huì)遇到的問(wèn)題點(diǎn)——“功能的取舍”

我們?cè)谠偷膬?yōu)化中做了幾次改版最終確定了我們?cè)O(shè)計(jì)制作頁(yè)面的方向

高保真設(shè)計(jì)

根據(jù)原型稿件，進(jìn)行高保真設(shè)計(jì)。同樣的我們?cè)谠O(shè)計(jì)的過(guò)程中也會(huì)遇到很多“諸如此類(lèi)”的問(wèn)題——黑金色系設(shè)計(jì)推翻重做、中途有參與者退出等等…

但是堅(jiān)定的信念不動(dòng)搖，沒(méi)有做不成的事情，我們的努力終將會(huì)化為成功的果實(shí)。通過(guò)3稿的優(yōu)化，我們的稿件終于成型

3. 設(shè)計(jì)后

檢查自己的產(chǎn)出是一個(gè)好習(xí)慣。

對(duì)之前的產(chǎn)出進(jìn)行視覺(jué)走查，看看是不是有被遺漏的設(shè)計(jì)點(diǎn)，根據(jù)交互自查表或視覺(jué)走查表進(jìn)行頁(yè)面走查，做到有理有據(jù)，不要盲目走查。

當(dāng)一切準(zhǔn)備完畢，就可以進(jìn)行整體的視覺(jué)包裝排版了。

包裝形勢(shì)可參考：https://www.zcool.com.cn/work/ZMzU2MDUxNDQ=.html

四、項(xiàng)目框架構(gòu)建

為了方便大家更便捷的預(yù)覽整個(gè)方案的內(nèi)容，特此做了此可交互的內(nèi)容預(yù)覽框架。

項(xiàng)目可交互瀏覽網(wǎng)址：http://vip.uedart.com/works/templatesRedesign/index.html

在此針對(duì)此框架的構(gòu)架做一個(gè)簡(jiǎn)單介紹

1. 修改框架結(jié)構(gòu)目錄

之前發(fā)布過(guò)一個(gè)關(guān)于prd的產(chǎn)品需求框架，現(xiàn)用于本次的設(shè)計(jì)作品展示輸出

PRD架構(gòu)預(yù)覽：http://www.uedart.com/demo.html

PRD構(gòu)建文章：《 PRD文檔構(gòu)建及使用流程》

本次的框架構(gòu)建雛形來(lái)源于此文檔，活用現(xiàn)成已有的框架，能夠幫助我們節(jié)約不少重復(fù)的時(shí)間，這也是組件的核心意義。

關(guān)于組件的構(gòu)建，我也寫(xiě)過(guò)相關(guān)的文章《?打造高品質(zhì)Axure組件庫(kù)，就是這么簡(jiǎn)單！》，有興趣的同學(xué)可以去看一下。

根據(jù)項(xiàng)目產(chǎn)出的內(nèi)容進(jìn)行框架整理，并進(jìn)行內(nèi)容文本以及關(guān)聯(lián)鏈接的修正

2. 內(nèi)容填充

到了這一步就相對(duì)簡(jiǎn)單了，前期我們做了大量的收集、產(chǎn)品分析、設(shè)計(jì)產(chǎn)出。這一步要做的就是填鴨式的將我們每個(gè)環(huán)節(jié)里的內(nèi)容進(jìn)行填充，完善我們的整體框架。

3. 細(xì)節(jié)修飾

對(duì)內(nèi)容較長(zhǎng)的進(jìn)行分類(lèi)分頁(yè)展示，做分類(lèi)的交互跳轉(zhuǎn)。對(duì)每頁(yè)的內(nèi)容進(jìn)行排版處理。做好每次更新的更新日志記錄。

總結(jié)

最后附上一張我的軟件體系構(gòu)建，希望能給大家一些啟發(fā)，我依然還是那句話“軟件是幫助你實(shí)現(xiàn)的工具，真正的行動(dòng)還是要落實(shí)到思維上的拓展”。

附言：

一分耕耘一分收獲，很多人在抱怨那個(gè)幸運(yùn)的人不是我的時(shí)候，有沒(méi)有想過(guò)怎么成為幸運(yùn)的人。我的朋友“南山設(shè)計(jì)”是一個(gè)很努力的人，借用他時(shí)常說(shuō)的一句話“越努力越幸運(yùn)”，像依然在自己堅(jiān)持的道路上努力行走的設(shè)計(jì)師們致敬！

到此，產(chǎn)品思維賦予設(shè)計(jì)新動(dòng)力的分享也就結(jié)束了，希望讀者們有所得。

本文由 @時(shí)光若刻 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議