本文通過實際案例展示，講解了項目中的產品知識運用與項目管理如何進行，如果管理好進度，把控好設計的方向，以及在設計精細度的提升上有哪些方面可以做突破，希望給予你一定的幫助。

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

本文內容較長，特此進行文章結構的梳理，方便大家快速了解文章的結構

前言：介紹設計師的能力圖與自我修養

第1部分：項目的準備工作

第2部分：如何進行項目管理

第3部分：推動項目的產出

第4部分：關于項目瀏覽框架的構建 如下

項目可交互瀏覽網址：http://vip.uedart.com/works/templatesRedesign/index.html

優秀設計師的能力圖譜與自我修養

1. 設計師的能力圖譜

注：能力圖譜內容出自EthankDesign

整個行業對設計師的要求越來越高，一個好的設計師的能力不只是單方面的，用人企業對設計師綜合素質的要求也在不斷的提升。這就對喜歡想往高尖端設計師發展的同學們提供了新的提升方向，不只是停留在之前單方面的“專業設計”能力的提升。

2. 設計師的自我修養

在上面我們講到能力圖譜，設計師需要多方面發展，提升自己的綜合素質，而這里的設計師的自我修養，則給大家提供了發展的幾個維度方向。

要成為一個優秀的設計師任重道遠，現在流行的一個詞語“斜桿青年”，多能力圖譜的設計師在未來的潛力是可以被預見的，不要被自己的想法與安逸束縛，應該跳出能力舒適圈尋求能力的新芽，發掘自身更加優秀的品質。居安思危，華為的”備胎計劃，給予了我新的啟示，沒有絕對安逸的工作環境，要想活得自在，必須有足夠“自律”的標準來要求自己不斷提升，以應對未來各種各樣的變化。

接下去就進入本文的正題，如何將產品知識與設計相結合，下面我們采用螞蟻金服產品的Redesign項目來做介紹，具體如何去實施一個設計項目。

以下項目設計內容是團隊的成果，在此致謝一起努力的小伙伴們（排名不分先后）

一、項目前的準備

1. 粗略體驗大致瀏覽

體驗螞蟻金服這款產品，大致瀏覽產品的主要模塊，初步了解這款產品的特性與主體功能。這個階段重在“漫無目的”，這樣的隨機感覺，有點像是小白用戶。

2. 分析產品結構

層層深入，了解螞蟻金服的產品結構，進行分解拆分流程。

以下是我進行使用后的產品結構整理與信息結構整理

注：由于展開內容比較多，這邊就不展開后面的節點了。

3. 落實到主流程里的細節體驗

這個階段更注重的是某個主要流程的實際體驗感，為了能夠體驗金融理財產品購買的完整流程，為此我還特意購買了螞蟻金服的一個金融產品。對的，有些時候體驗是要花費一些代價的，這個時候就要衡量好“花費價格”與“收獲價值”，前后總共花費了10元rmb，這就是一筆低花費高收獲的交易。

二、項目管理怎么做

1. 明確項目目標

• 提升產品信任感、品質感
• 重點提高產品智能化：重點設計 智能場景及其子頁面
• 在產品視覺設計中融入品牌基因，提升產品辨識度
• 對標一線團隊競品視覺設計精細度，同時差異化創新

2. 細化拆分任務

明確好項目目標，我們就有了一個非常明確的前進方向，這個時候在進行任務細化就更有方向感。按照設計前中后的大流程去把控整體項目的任務細化。

3. 規劃時間節點

細化拆分好任務，根據項目參與人員每個人的特色以及任務的截止時間，合理分配好任務，這邊我采用的是OmniPlan工具進行每個人的項目分配，可以直接輸出任務時間軸線圖與任務細分表。對于成員間的銜接關聯和每個任務的完成狀態都可以一目了然的觀察到。

注：前期設計前分配任務部分任務時間軸線圖

為了讓大家看的更加的一目了然，我這邊把設計前中后的時間節點圖繪制了出來，這樣就更加清晰的方便大家理解整個項目的走勢節點走勢。

三、推動項目的產出

根據規劃好的時間節點，推動各成員的設計產出提交，進行整合。在會議上進行探討，各成員提出自己的看法與作品中可能存在的問題，這樣有利于初始階段不至于完全走錯方向，導致后期的修改較大，盡量在前期多進行溝通，推動設計的方向與優化。

1. 設計前

設計前我們做了大量的產品相關的分析，這個階段就是以我們的目標為導向，進行產品的分析，得出有利于我們Redesign的指導依據。設計不是靠感覺，這個產品抄一抄，那個功能移動過來植入進去，就是產品。

我們在項目前已經對螞蟻財富這款產品有了初步的剖析，進行了結構分析以及產品的體驗，這樣有助于我們在本階段的其他層面信息的提取與分析。

我們總共進行以下幾方面的分析整合：

競品分析

我們通過艾瑞數據，提取到了螞蟻財富相關的基礎信息：

通過艾瑞&獵豹金融理財服務相關的產品排行，來進行相關競品產品的提?。?/p>

提取出相關產品進行分析對比：螞蟻財富、京東金融、小米金融、天天基金、陸金所、愛錢進：

進行競品內外環對比：

首頁分析

本項目優先對首頁進行改版，我們針對首頁各模塊進行分析：模塊中的不足之處、強光測試分析、一維分析。

情緒板

對螞蟻財富進行關鍵詞提?。褐悄?、精英、安全，并進行二級聯想最終得出以下關聯：

平時我們也可以多做一些這樣的頭腦風暴，有助于我們提高對事物的內在關聯的認知。

再通過關鍵詞從圖像庫中提取匹配的圖像，為最終產品的色彩取向定調。

4W場景

何為4w場景？

簡單來說就是“who 什么人”、“when 什么時間”、“where 什么地點”、“what 什么事情”。

串成一句話描述是“什么人在什么時間在什么地點做了什么事情”，這個就是所謂的4w場景。這里設計前的產品分析我們為什么要運用“4W場景”呢？

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

以下是針對螞蟻財富的4W場景分析：

用戶分析

通過前面艾瑞數據，我們得到了關于螞蟻財富用戶分步的相關數據

從數據中可以得出用戶社會特征

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

由此出發結合相關理財型資料的查閱與知識提取，結合分析將理財用戶分為6類

在財富測試階段，可以將用戶按不同類型區分開來，做定制化推薦，提高轉化率謹慎型穩健型平衡型積極型激進型小白用戶回到用戶定位說用戶需求，因為面向的是廣大有潛在理財需求但又不懂理財、不敢理財、對理財認知尚淺的用戶，這樣特征和屬性的用戶需求在哪呢？基本需求：簡單、安全地理財；所提供產品功能服務簡單易上手，并且在資金安全方面有所保障，能夠讓用戶本金和其應得其他利益不會因為平臺系統故障、公司倒閉等原因遭受不白損失。故而簡單和安全，是大眾理財最基本也是最起碼的需求。期望需求：有序平穩地使資產得到增值和保值，至少跑得贏通脹，雖然用戶可能并不知道是通脹。興奮需求：創新的結構化產品使得用戶資產在風險可控前提下獲得超出預期的回報；平臺提供更為完善的提高資金流動性、安全性、收益性等服務。其他更多智能、人工貼心服務。

聚類分析

結合用戶分析的結果，我們針對目標六大類用戶進行深入的分析，并且對這六類的典型用戶進行了聚類分析，從而剖析出更深層次的痛點。

用戶體驗地圖

根據理財產品購買的主流程“購買前-購買中-購買后”進行用戶體驗地圖的研究，從中發現當前螞蟻理財購物流程的可提升性，痛點與機會點。

信任建立

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

2. 加載動效可以像美團app一樣用特有的品牌化加載小動效，植入螞蟻財富螞蟻的形象

3. 底部首頁tab圖標

可以通過首頁圖標的品牌化設計，如淘寶，當滾動時，首頁圖標變成滾動到最上的圖標

4. 字體設計，底部螞蟻財富的字樣可以設計感更強一點，像京東金融一樣有自己的特色

5. 金剛區的圖標可以設計的有特色點，如咸魚

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

7. 智能理財助手采用螞蟻的形象，打造形象IP

右下角懸浮按鈕考慮設計成智能機器人（融入螞蟻形象IP）

智能場景

1. 定制化的推薦，通過財富測試，按用戶的類型來推薦不同種類的基金或理財產品

2. 智能理財助手，原app的理財助手在社區里，隱藏有點深，先把他以螞蟻的形象體現在首頁，讓用戶更快的接觸到他，了解他，提高理財便捷度

參考對象：眾安精靈、美團智能點餐

3. 截屏判斷出是要進行在線客服咨詢還是分享微信

2. 設計中

設計過程推動的步驟：

花瓣收集

這邊我就不做過多的贅述，簡單的說就是找參考設計

https://huaban.com/boards/50330818/（注：我收集的相關的理財產品的參考設計）

原型設計

前期我們做了大量的產品分析工作，為我們開展具體的產品重構頁面提供了強有力的支撐，進入到這個環節相對產品分析工作有了很大的不同，我們要具體的把前期做的所有分析產出的內容轉化成真實落地的產品，在這個過程勢必會遇到一個我們時常會遇到的問題點——“功能的取舍”

我們在原型的優化中做了幾次改版最終確定了我們設計制作頁面的方向

高保真設計

根據原型稿件，進行高保真設計。同樣的我們在設計的過程中也會遇到很多“諸如此類”的問題——黑金色系設計推翻重做、中途有參與者退出等等…

但是堅定的信念不動搖，沒有做不成的事情，我們的努力終將會化為成功的果實。通過3稿的優化，我們的稿件終于成型

3. 設計后

檢查自己的產出是一個好習慣。

對之前的產出進行視覺走查，看看是不是有被遺漏的設計點，根據交互自查表或視覺走查表進行頁面走查，做到有理有據，不要盲目走查。

當一切準備完畢，就可以進行整體的視覺包裝排版了。

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

四、項目框架構建

為了方便大家更便捷的預覽整個方案的內容，特此做了此可交互的內容預覽框架。

項目可交互瀏覽網址：http://vip.uedart.com/works/templatesRedesign/index.html

在此針對此框架的構架做一個簡單介紹

1. 修改框架結構目錄

之前發布過一個關于prd的產品需求框架，現用于本次的設計作品展示輸出

PRD架構預覽：http://www.uedart.com/demo.html

PRD構建文章：《 PRD文檔構建及使用流程》

本次的框架構建雛形來源于此文檔，活用現成已有的框架，能夠幫助我們節約不少重復的時間，這也是組件的核心意義。

關于組件的構建，我也寫過相關的文章《?打造高品質Axure組件庫，就是這么簡單！》，有興趣的同學可以去看一下。

根據項目產出的內容進行框架整理，并進行內容文本以及關聯鏈接的修正

2. 內容填充

到了這一步就相對簡單了，前期我們做了大量的收集、產品分析、設計產出。這一步要做的就是填鴨式的將我們每個環節里的內容進行填充，完善我們的整體框架。

3. 細節修飾

對內容較長的進行分類分頁展示，做分類的交互跳轉。對每頁的內容進行排版處理。做好每次更新的更新日志記錄。

總結

最后附上一張我的軟件體系構建，希望能給大家一些啟發，我依然還是那句話“軟件是幫助你實現的工具，真正的行動還是要落實到思維上的拓展”。

附言：

一分耕耘一分收獲，很多人在抱怨那個幸運的人不是我的時候，有沒有想過怎么成為幸運的人。我的朋友“南山設計”是一個很努力的人，借用他時常說的一句話“越努力越幸運”，像依然在自己堅持的道路上努力行走的設計師們致敬！

到此，產品思維賦予設計新動力的分享也就結束了，希望讀者們有所得。

本文由 @時光若刻 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議