通過實戰專案，從UI設計師角度認識產品原型

UI設計師應該瞭解原型圖是如何產生的。

【前言】

1、很多人誤解UI設計師做的只是畫圖示和“填色”，也有一些剛入行UI的朋友，拿著原型圖就開始做設計稿。其實UI設計師也叫做使用者體驗設計師，能做的也不僅僅是對互動稿的“填色”。一份設計稿的背後，包含了設計師對於使用者體驗的見解。

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

3、本文章用我做的一個專案（花語APP）來簡單講述產品經理在做原型時的思路與步驟，只是一個示例，旨在讓UI設計師理解產品經理做原型時的思路，並未做得很詳盡。產品大牛請無視～感謝產品經理Gavin和阿魚給的意見。產品源自於需求，而需求是為了解決痛點而產生。花語app的專案背景如下：

4、清楚了專案的背景以後，產品經理會開始一系列的分析。以下為產品原型的分析大綱：

【正文】

一、產品定位

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

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

二、使用者分析

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

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

三、需求採集

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

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

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

那麼競品應該如何尋找？

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

a、形色app

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

b、識花君小程式

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

四、需求分析

1、功能

經過以上的分析，花語app已經有比較清晰的定位和使用者群體，因此可以進行功能的頭腦風暴：

拍照識別、攻略、上傳桌布、桌布編輯、分享、、下載、定位景點、鑑定、邀請、記錄、足跡、訊息、發現、集郵

2、內容

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

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

3、優先順序

根據專案的資源，實現成本，需求的價值，定義這些需求實現的優先順序。優先順序的內容要儘可能放在使用者明顯使用的地方。

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

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

五、資訊結構圖

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

六、用例圖

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

七、流程圖

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

八、中保真原型圖

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

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

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

九、交付UI設計師

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

十、這是一個小彩蛋

感謝你看到了本文的最後。

1、有很多朋友向我諮詢，有時候回答得太空泛，沒有實際專案做示例，難以講述清楚整個流程。於是想到了用一個專案去講，或許能更好理解。

2、我的本職是UI設計師，這是我其中一個練習專案。我認為UI設計師不僅僅是做介面，而是多維度瞭解整個產品的全貌，它從哪裡來，總麼實現，價值在哪裡。只有理清楚這些，這個專案才是有意義的。

3、由於我不是專業的產品經理，也許寫的地方有疏漏，歡迎產品經理給我專業的良性的建議。

4、這只是一個開篇。綜合各位朋友們給我發的私信和問題，以這個專案為例，接下來我將會寫的文章包括但不限於以下：

a、花語app logo思路

b、花語app介面展示

c、sketch設計稿規範、匯出、切圖與命名

d、花語app介面優化思路

…

5、我在寫文章的時候會花比較長的時間，文章的層級資訊、配圖的展示方式等等，都需要思考清楚。畢竟這樣才能對得起你們的等待和支援。最近在公司接觸的後臺專案比較多，要重新定立規範，還有做全新的介面設計，以後等我熟悉並且理清楚後臺的邏輯，再寫這方面相關的文章。

作者：牙線姐姐