通過實戰項目,從UI設計師角度認識產品原型

7 評論 15832 瀏覽 99 收藏 15 分鐘

本文作者將用自己做的一個項目(花語APP)來簡單講述產品經理在做原型時的思路與步驟,只是一個示例,旨在讓UI設計師理解產品經理做原型時的思路,enjoy~

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

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

本文章用我做的一個項目(花語APP)來簡單講述產品經理在做原型時的思路與步驟,只是一個示例,旨在讓UI設計師理解產品經理做原型時的思路,并未做得很詳盡。產品大牛請無視~感謝產品經理Gavin和阿魚給的意見。產品源自于需求,而需求是為了解決痛點而產生。花語app的項目背景如下:

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

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

一、產品定位

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

  1. 使用人群:植物愛好者或需要了解植物知識的人;
  2. 主要功能:識別植物;
  3. 產品特色:快速準確識別植物、種植知識分享。

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

二、用戶分析

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

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

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

三、需求采集

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

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

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

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

那么,競品應該如何尋找?

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

(1)形色app

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

(2)識花君小程序

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

四、需求分析

1. 功能

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

拍照識別、攻略、上傳壁紙、壁紙編輯、分享、收藏、下載、定位景點、鑒定、邀請、記錄、足跡、消息、發現、集郵

2. 內容

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

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

3. 優先級

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

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

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

五、信息結構圖

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

六、用例圖

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

七、流程圖

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

八、中保真原型圖

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

中保真原型圖:所謂中保真原型圖,是交互設計師或者UI設計師做出來的原型圖?;趯pp界面的初步構想,嚴格按照設定的間距,并且合理布局元件位置,做出來的原型圖比較接近高保真設計稿。

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

九、交付UI設計師

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

十、這是一個小彩蛋

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

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

2、我的本職是UI設計師,這是我其中一個練習項目。我認為UI設計師不僅僅是做界面,而是多維度了解整個產品的全貌,它從哪里來,總么實現,價值在哪里。只有理清楚這些,這個項目才是有意義的。

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

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

  • 花語app logo思路
  • 花語app界面展示
  • sketch設計稿規范、導出、切圖與命名
  • 花語app界面優化思路

5、我在寫文章的時候會花比較長的時間,文章的層級信息、配圖的展示方式等等,都需要思考清楚。畢竟這樣才能對得起你們的等待和支持。最近在公司接觸的后臺項目比較多,要重新定立規范,還有做全新的界面設計,以后等我熟悉并且理清楚后臺的邏輯,再寫這方面相關的文章。

 

作者:牙線小姐

來源:微信公眾號“牙線小姐(ID:Chord_Young)”

本文由 @牙線小姐 授權發布于人人都是產品經理,未經作者許可,禁止轉載。

題圖來自 Pexels,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 我是剛剛轉UI設計的,看了文章收獲很多,繼續等待花語app logo思路,花語app界面展示,sketch設計稿規范、導出、切圖與命名,花語app界面優化思路等方面

    來自北京 回復
    1. 謝謝你的支持~可以關注我的公眾號“牙線小姐”,文章寫好會第一時間發的~

      來自廣東 回復
  2. 配色挺舒服的,為啥原型里是中文,UI稿里是英文?

    來自上海 回復
    1. 那個UI稿只是示范,不是針對這個原型做的UI界面~UI界面我還在做呢,哈哈。

      來自廣東 回復
  3. 可以可以

    來自江蘇 回復
    1. 謝謝~~~~

      來自廣東 回復