產品經理方法論,產品原型圖製作設計,AppSo

【產品經理 PM|頁面原型圖製作】AppSo 頁面原型圖還原與設計

產品經理最常做的四種圖?「業務邏輯圖」、「業務流程圖」、「頁面流程圖」與「頁面原型圖」之間的關係與常見問題?

本文大綱

  • 產品經理最常做的四種圖?(業務邏輯圖、業務流程圖、頁面流程圖與頁面原型圖)
  • 四種圖之間的邏輯推導關係
  • 「頁面流程圖」&「頁面原型圖」繪製設計時的常見問題?
  • 原型設計常用工具?
  • 【實踐】原型圖訓練|AppSo 頁面原型圖還原

【頁面原型圖】知識背景

其實在台灣的我,一開始認為畫原型圖不是 UI/UX 的工作嗎?
然而,在對岸大陸反而普遍對於產品經理的第一印象(偏見)就是:「就是個畫原型圖的?」

關於這一點的衝突挺有趣的,不過,經過前幾天的「產品經理方法論的系列文」,想必大家對產品崗在不同的階段會做些什麼,有了一定的認識?

我們已經知道,產品這崗位,「不僅僅是要畫原型」,因為在畫原型之前,還有很多準備工作要先去完善。例如:用戶需求調研、產品功能調研、競品分析、業務流程梳理、頁面流程圖梳理……等等。

而這些事前準備工作做得好壞,
直接影響了產品原型設計階段的順利與否。

然而,這是產品經理的一個真實笑話。

產品經理最常做的四種圖?

平時產品經理撰寫產品文檔的過程中,最常做的四種圖是:業務邏輯圖、業務流程圖、頁面流程圖與產品原型圖,下面我們分別對這四種圖做個簡單介紹。

(1)業務邏輯圖

業務邏輯圖也叫核心業務邏輯,是從宏觀角度描述產品的基本業務是怎麼運轉的,主要對「所有參與角色」間的「信息傳遞」進行圖像流程化描述。

比如:摩拜單車商城業務的邏輯圖

(2)業務流程圖

主要是確認流程主要方向,確定用戶、數據流向。甚至從「暴力破解的層面」盡可能將流程設計的「異常判斷」梳理出來。

常見的業務流程圖分為「單泳道流程圖」與「多泳道流程圖」兩種,此外我們也經常將複雜的流程圖拆分為若干個子流程(副程式)。

比如:摩拜單車的業務流程圖。

(3)頁面流程圖

頁面流程一般是「建立在業務流程圖的基礎上」,就「流程的合理性」以及「用戶的走向確認頁面元素」和「頁面跳轉關係邏輯」。

另一方面,我們也可以將頁面流程圖看做是,頁面原型圖到「草圖」。

比如:某問捲髮布應用的頁面流程圖。

(4)頁面原型圖

透過中性客觀的描述方式,細化頁面及頁面元素,用注釋說明的方式進一步說明頁面元素、頁面之間的跳轉邏輯、設計要求、交互描述。

頁面原型圖是產品正式進入實際開發環節前,最後的、最標準的設計藍圖,也是各環節開發者主要參考的產品文檔之一,也是產品崗位跟開發、設計人員的主要溝通文件。

而「頁面原型圖」,就是我們這篇文的主題,最後會以一個產品(AppSo)作為實踐訓練。

四種圖之間的邏輯推導關係?

簡單說,從宏觀到具體,四種圖之間的推導關係是:

先找出「業務邏輯圖」,進一步梳理成「業務流程圖」,再加入頁面的跳轉邏輯繪製「頁面流程圖」,最後完整繪製出「頁面原型圖」。

總結來說,以上推導的過程是一個自然地、符合邏輯的推導過程,後者總能很好的還原到前者,而前者則成為後者進一步細化的依據和基礎。

切記,不可為了畫圖而畫圖,為了文檔而文檔,而破壞了四種圖之間本應有的內在邏輯關係。

「頁面流程圖」&「頁面原型圖」繪製設計時的常見問題?

1、頁面流程圖

頁面流程一般是在業務流程圖的基礎上,就流程的合理性以及用戶的走向確認頁面元素和頁面跳轉關係邏輯。

Q:「頁面流程圖的價值是什麼?」

A:「頁面流程圖是產品設計原型圖的草稿或者底稿,其在工作過程中位於梳理業務流程之後,以及設計產品原型圖之前。」

Q:「什麼人會去看頁面流程圖?」

A:「業務流程圖,著重從產品角度出發,梳理功能及相關邏輯,主要面向技術研發環節。而頁面流程圖著重從用戶角度出發,梳理頁面跳轉關係及相關的信息傳遞,主要面向UI(界面設計)、UX(交互設計)和PM(項目經理、負責人)。」

Q:「為什麼我的頁面流程圖總是被說:『不夠精準』?」

A:「頁面流程圖的設計是根據業務流程的邏輯。後者是前者的根源,如果你發現你的頁面流程圖和業務流程圖嚴重脫節,那就老老實實回到業務流程圖中好好修改吧。」

A:「明確頁面中的重點元素是否符合標準化。頁面的重點元素主要包括:梳理頁面的異常流程(一般通過浮層、彈層、彈窗等形式表現);元素標準化:提示或彈層(直角矩形)、流向(用實線或虛線表示主幹流和輔助流向),用來表現頁面和元素間的跳轉邏輯。」

可以再複習一下上一篇的「流程圖製作」:

2、頁面原型圖

通過中性描述的方式,細化頁面及頁面元素,用注釋的方式進一步說明頁面元素、頁面之間的跳轉邏輯、設計要求、交互描述。

原型圖又可以分為兩種:

(一)低保真原型圖:低保真又叫原型圖也稱作為交互原型圖,一般由產品經理、交互設計師相互完成,完整的 UCD 團隊(以用戶為中心的設計團隊),一般會先出低保真原型圖,然後再出高保真原型圖。

(二)高保真原型圖:高保真原型圖又叫視覺原型圖,幾乎完全按照實物來製作的原型就是高保真,原型中甚至包含產品的細節、真實的交互,也就是已經請介面設計師(UI)同仁來完成針對品牌識別的優化。

Q:「日常工作中我們要繪制哪種原型圖?」

A:「產品經理需要確保在日常工作中,各項各環節做的到位,而低保真原型圖就可以滿足大部分的工作需要。」

Q:「繪制原型圖的價值在哪裡?」

A:「原型圖的製作目的在於便於協調溝通,傳達設計理念和明確功能細節,而使用什麼工具或用什麼方式展示是次要問題。一般情況下,UI 設計師會根據低保真原型圖,來繪制最後的高保真原型圖或視覺效果圖。程式開發人員也會將原型圖作為他們開發程序的參考物之一。」

Q:「繪制原型圖的原則是什麼?」

A:「實用、易懂、清晰、嚴謹,這是原型設計學習和實踐過程中的幾個原則,先解決雪中送炭,再去想如何錦上添花。」

Q:「如何繪制原型圖?」

A:「回歸頁面流程圖,從頁面流程圖中提取必要的關鍵信息,並對異常判斷的不同提示、狀態從交互的角度進行詳細描述。這種描述包括圖形描述、邏輯指向和文字描述。」

A:「盡可能將重要元素在原型圖上進行展示,比如重要功能點、重要交互點、重要提示信息(含有提示信息的具體交互載體,如彈層、浮層等)」

A:「盡可能讓原型圖上的重要元素在視覺上符合常規效果,盡可能保持內容的真實性,不要過分誇大或者變形,以至於影響設計師的理解。」

A:「盡可能給每一個頁面編號,並通過樹狀結構給出架構目錄,方便閱讀者參考,事後快速檢索。」

原型設計常用工具?

  1. 初階草稿:紙和筆,快速定位和專注
  2. 二階草稿:黑白版,便利貼,適合團隊協同討論,確認共識
  3. 低保真原型圖:電腦軟體,Axure、Sketch、磨刀。
  4. 工具選擇的原則:對於原型而言,工具選擇本身並不重要,根據不同的工作情況和自己習慣來選擇就好了。一般來說,產品經理負責的原型並不需要做高保真、帶交互效果原型。能說清楚構成元素,調整邏輯的低保真原型就夠絕大多數工作場景使用了。

分享 Axure 原型基礎教程的網站,可以先看過【基礎教程部分】,其他就透過實際操作實踐多多練習即可:

【原型圖訓練|AppSo 頁面原型圖還原】

在上題中,大家已經梳理出來「AppSo」的頁面流程
作業要求:還原 AppSo 中涉及到的頁面流程與原型圖
tips:
1.還原頁面的所有要素,要求元素必須完整,圖片可以使用佔位符
2.自己可以提前整理個元件庫,為原型繪制時所需的icon做準備
3.在原型中要標注交互信息(即頁面跳轉的邏輯),若有數據信息也一並梳理出來
4.不要遺漏異常情況的提示/引導

AppSo 產品簡介

AppSo 是一款推薦資訊類的應用。用戶可以在平台上,發現其他用戶推薦的 App,進一步找到滿足自己需求的應用。

應用版本:v3.0.7
系統版本:ios12.2(iPhone X)
作圖工具:Axure RP 8

「發佈內容」頁面流程圖

「AppSo 發佈內容」頁面流程還原

原形圖目錄

雖然我認為我的頁面原型圖的邏輯層次已經挺清楚了,但還是把它精簡化,只剩下文字:一個主幹,分支為異常狀況的頁面。

「AppSo 發佈內容」頁面原型圖架構大綱

頁面原型圖還原

AppSo 頁面原型圖還原(by Axure)

謝謝,看到最後的你

若喜歡我在 Medium 的內容,可以拍個手(Claps)
也歡迎「分享」到社群網站給更多朋友。

除了 Medium 平台上的拍手,這邊也希望您拍一下,我會直接獲得對應獎勵的!
最近正在找下階段的職涯發展(2019 年八、九月可上工)
希望產業:遊戲、智能家居(AIOT)、To B 產品或服務
期望職位:產品、運營、商務&市場
公司規模:1000 人以上
有興趣的聊聊的朋友,歡迎 LinkedIn:www.linkedin.com/in/hou-raymond

轉載與邀稿合作

Email:raymond.hou.ch@gmail.com

高效能任性

「高性能任性」是專注於「個人成長」的部落格。每週一道思考題,希望能幫助你我做自己的主人,透過思考與討論,找到自己的原則與自由意志。世界並非黑即白,我們無法對一個問題給出標準答案,但可以給一個回答的角度、方法與模型,然後找出專屬自己的那一個灰色。【臉書社團】https://www.facebook.com/groups/ypointer/

侯智薰(Raymond CH Hou)

Written by

1994 ENFJ,北漂北京中|B2B 產品運營&社群&用戶增長、Podcast、寫手與講師|求學時經濟需自主,為生存養成自學能力與跨域思維;18 歲到印度旅行,踏上非典型職涯,帶著電腦到處工作,懷著任性熱愛生活|原則:堅持分享所在意的事|有趣合作:raymondhouch.com

高效能任性

「高性能任性」是專注於「個人成長」的部落格。每週一道思考題,希望能幫助你我做自己的主人,透過思考與討論,找到自己的原則與自由意志。世界並非黑即白,我們無法對一個問題給出標準答案,但可以給一個回答的角度、方法與模型,然後找出專屬自己的那一個灰色。【臉書社團】https://www.facebook.com/groups/ypointer/

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade