很多人誤解 UI設計師做的只是畫圖標和「填色」，也有一些剛入行 UI 的朋友，拿著原型圖就開始做設計稿。其實 UI設計師也叫做用戶體驗設計師，能做的也不僅僅是對交互稿的「填色」。一份設計稿的背后，包含了設計師對于用戶體驗的見解。

設計師拿到原型就開始做設計稿，這樣效率不高，而且會有很多遺漏。但是原型上的文字非常多，對于設計師來說要理清思路非常吃力。在這之前，設計師應該知道產品經理是如何做出一份 PRD 文檔的。下圖為產品經理用 axure 做的常見的原型文檔。

本文章用我做的一個項目（花語APP）來簡單講述產品經理在做原型時的思路與步驟，只是一個示例，旨在讓 UI設計師理解產品經理做原型時的思路，并未做得很詳盡。產品源自于需求，而需求是為了解決痛點而產生。花語 app 的項目背景如下：

清楚了項目的背景以后，產品經理會開始一系列的分析。以下為產品原型的分析大綱：

• 產品定位
• 用戶分析
• 需求采集
• 需求分析
• 信息結構圖
• 用例圖
• 流程圖
• 中保真原型圖

一、產品定位

首先要對 app 進行定位，需要從使用的人群、主要功能、產品特色三個方面去思考。

• 使用人群：植物愛好者或需要了解植物知識的人
• 主要功能：識別植物
• 產品特色：快速準確識別植物、種植知識分享

通過以上分析，花語 app 產品的定位是：基于精準識別植物功能的具有社交屬性的工具型 app。

二、用戶分析

用戶需求分析，即分析：誰、在什么環境下、解決什么問題。

在花語 app 這個項目中，針對用戶的需求分析是：用戶想在 app 上用識別功能準確識別不知名植物。

• 目標客戶：22-35歲白領，植物愛好者
• 使用場景：路上遇到不知名的植物
• 用戶目標：識別出植物的相關屬性

三、需求采集

需求采集的方式有很多種，常見的有以下幾種：

• 用戶調研：可以通過問卷調查、用戶訪談、信息采集、焦點小組等方式進行用戶調研，根據實際用戶的需求點進行原型的設計
• 競品分析：分析有代表性的同類產品的功能架構，在分析過程中總結競品的優劣，找到自己產品的亮點
• 用戶反饋：產品上線后，分析用戶的反饋
• 產品數據：瀏覽數據，瀏覽痕跡，點擊痕跡，瀏覽順序和時長，轉化率

以上的需求采集方式中，如果是公司內部的項目，有明確的需求方或者使用部門，可以通過用戶調研的方式進行采集。

由于花語 app 是概念 app，也是從0到1的項目，在這里我使用了競品分析的方法。競品分析不是盲目抄競品，而是通過分析競品不同的層級關系. 理清楚整個 app 的流程，找到該競品的優點和缺點，從而歸納出不同于競品的特色功能。如果知其然而不知所以然，做出來的產品只是競品的復制。在這個行業里面最不缺的就是 app，沒有特點亮點的產品，無法在眾多 app 中生存。除了分析現有競品的特點外，還需要具有前瞻性：提供競品所不能提供的功能亮點。

那么競品應該如何尋找？

在 app store 上搜索植物識別的 app，下載好評率比較高的幾個，使用后發現比較好用的是「形色」，還有產品經理阿魚向我推薦的「識花君」小程序，其中的一個功能亮點讓我找到了靈感，因此鎖定這兩個競品進行分析。下圖為形色和識花君的信息結構圖。

1. 形色 app

在分析形色 app 的信息結構過程中，我以用戶的角色體驗時，產生了困惑。在形色里面，文章的歸類不明確，比如我需要找某種植物的養護方法，在「花間」這個欄目里面，沒有搜索功能，只有「虹越養護」這個類目，要找到某種植物的養護方法只能靠瀏覽。而在「遇見」欄目里面，雖然有搜索，但是搜索結果里面的推送并沒有包含養護這一欄。因此啟發了我在做花語 app 的時候，更多地考慮到如何為用戶推送有用精準的信息。

2. 識花君小程序

識花君是一個小程序，因此是輕量級的，只有很簡單核心的一個功能：識別植物。很有趣的是，當在識花君里面識別出某種植物，或者在某個城市識別的時候，會收到一張卡，植物卡上面是植物的圖片、城市卡上面是城市小插畫。這一點讓我感到非常的有趣，也讓我想起了 walkup，一個計步軟件，有大量精美的矢量插畫。這一點啟發了我，可以在花語加上一個「集郵」的功能，識別出一種新植物的時候就解鎖相對應的植物郵票，定位在一個新城市的時候就解鎖相對應的城市郵票。這些郵票還可以下載下來作為壁紙使用。（這個有趣的功能需要 UI設計師或者插畫設計師付出大量的時間來完成，因為植物是千萬種的，這不是一個容易完成的任務。）

四、需求分析

1. 功能

經過以上的分析，花語 app 已經有比較清晰的定位和用戶群體，因此可以進行功能的頭腦風暴：拍照識別、攻略、上傳壁紙、壁紙編輯、分享、收藏、下載、定位景點、鑒定、邀請、記錄、足跡、消息、發現、集郵。

2. 內容

基本功能構想完畢后，把所有包含的內容進行歸納整理，篩除不合理的需求，挖掘用戶的目標，找到用戶真實的需求，匹配產品的定位。

經過反復的推敲與思量，花語 app 的核心功能在于拍照識別，壁紙編輯只是在滿足基礎需求之上所附加的非必要功能，如果加上壁紙編輯，整個 app 會顯得非常累贅，因此把壁紙編輯這個功能篩除。而商業模式部分，則通過用戶的搜索結果，為用戶提供附近的花店，也可以接受花店的入駐。

3. 優先級

根據項目的資源，實現成本，需求的價值，定義這些需求實現的優先級。優先級的內容要盡可能放在用戶明顯使用的地方。

在馬斯洛需求層次理論中，人類需求像階梯一樣從低到高按層次分為五種，分別是：生理需求、安全需求、社交需求、尊重需求和自我實現需求。

按照馬斯洛原理，對功能進行分級，缺一不可的 app 核心功能是根基，應該放在用戶最容易操作到的地方。而不重要的功能則考慮放到層級比較深的地方。

五、信息結構圖

通過以上需求的整理，做出信息結構圖。下圖為花語 app 的信息結構圖：

六、用例圖

通過信息架構圖，分析 app 里面的參與者（角色），做用例圖。用例圖是指由參與者、用例，邊界以及它們之間的關系構成的描述系統功能的視圖。以下為花語 app 的簡單用例圖。

七、流程圖

流程圖是產品設計的基本，可以保證產品的使用邏輯合理，在 app 中，流程圖也叫業務流程圖。花語 app 中的流程圖可以分為很多模塊，現以主要的識別功能的流程圖作例子。

八、中保真原型圖

低保真原型圖：一般產品經理做的原型圖叫低保真原型圖，也叫線框圖，給 UI設計師以及開發看，其中的文字描述比較多，要列明所有的狀態以及跳轉到什么頁面。

中保真原型圖：所謂中保真原型圖，是交互設計師或者 UI設計師做出來的原型圖。基于對 app 界面的初步構想，嚴格按照設定的間距，并且合理布局元件位置，做出來的原型圖比較接近高保真設計稿。

下圖為幾張花語 app 的中保真原型圖。

九、交付UI設計師

當原型圖通過了需求評審需求方確認以后，會交付到 UI設計師的手上，進行界面設計。下圖為我的日常界面練習，也就是俗稱的「高保真設計稿」。

結語

有很多朋友向我咨詢，有時候回答得太空泛，沒有實際項目做示例，難以講述清楚整個流程。于是想到了用一個項目去講，或許能更好理解。我的本職是 UI設計師，這是我其中一個練習項目。我認為 UI設計師不僅僅是做界面，而是多維度了解整個產品的全貌，它從哪里來，怎么實現，價值在哪里。只有理清楚這些，這個項目才是有意義的。

歡迎關注作者微信公眾號：「牙線小姐」

圖片素材作者：Gal Shir

「從0到1的產品設計流程」

• 《超全面！從0到1正確開啟UX項目的方式》
• 《一個完善的產品設計流程是怎樣的？聽聽美團設計師怎么說》
• 《在大公司，APP的設計流程和時間分配是怎樣的？》

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備： http://hao.uisdc.com