產品管理流程及規范3:產品原型設計

11 評論 27867 瀏覽 208 收藏 17 分鐘

產品原型的規范化,目的是清楚表達產品設計理念和功能交互及執行邏輯,提高產品、研發、UI及業務部門之間的溝通效率。本文主要講解了產品原型設計的一些標準、規范及實際操作方式,方法,與大家分享。

01 制定產品原型設計規范的目的及意義

目的:產品原型的規范化,目的是清楚表達產品設計理念和功能交互及執行邏輯,提高產品、研發、UI及業務部門之間的溝通效率,避免信息不對稱和信息傳達的遺漏和缺失而導致的整個項目進度延期問題。

  1. 讓開發和設計團隊提高設計開發質量及工作效率。
  2. 統一設計規則,降低各方溝通成本。
  3. 進行模塊式的設計,降低開發成本和減少開發時間,加快產品迭代上線的速度。
  4. 改善交互設計的水平,提升用戶的使用體驗。

對于個人來說:規范性產品原型繪制能夠提高個人的職業水平,標準,統一性,團隊內部及協作單位的溝通成本也會降低,這能減少扯皮、反復溝通等問題,將更多時間放在產品的思考上,同時避免不必要的糾紛。

02 原型保真度比較

1. 評價維度

一般有五個維度來測量一個原型的真實(保真)程度。

a、視覺精煉層次

原型與最終產品看上去有多相似?一個低保真的原型也許就是一個手繪的草稿,而一個高保真原型就會是精確到像素,看上去和真實的產品沒什么區別。

b、功能的廣度

原型能夠包含多少的功能?一個低保真的原型聚焦于那些最重要的任務,而高保真原型會有更細節的任務

c、功能的深度

每一個功能能夠被多大程度地制作成原型?一個低保真的原型可以在頁面和頁面之間跳轉,并在已有典型數據的情況下,告訴你大概的用戶流程。一個高保真的原型可以讓你輸入數據,知道那些在進行不同的輸入時影響到輸出的區分。

d、交互的豐富性

原型中會有多少的交互?低保真原型也許會相當簡單,在用戶使用時沒有任何的反饋信息。高保真原型將會考慮動畫效果,表單驗證,和所有用戶與產品直接的細節交互。

e、數據模型的豐富性

你的原型中應用的數據有多豐富?低保真原型使用的是有限的,典型的數據設置,顯示最常見的用例。高保真原型會包括邊緣的情況,比如非常長的用戶名(應該減少用戶名的長度),無數據(提供默認人物頭像),第一次使用(使用空白狀態),或者極端大的數據量(使用翻頁或者過濾)。

產品原型設計根據還原度,也就是與最終成本的逼真度,大致分為低保真、中保真,高保真原型。我在過往中基本做到中保真,這也是絕大公司的要求。不同團隊及個人可能對保真度理解不一致,僅僅為個人觀點。

2. 保真度

?a、 低保真原型

表現軟件的重點功能和基本交互過程,使用簡易的線框進行處理,。好處是:制作成本低,速度快,修改也方便,在功能簡單及團隊溝通順暢時可以使用

b、?中度保真原型

中度保真的產品添加了更多細節,對軟件的交互進行了更細致的設計,比如照片處有對應內容照片,選項卡有具體內容,按鈕顏色做了區分,有動效模擬。在大部分情況下,中度保真原型已經足夠,既表現了軟件的功能特性和交互過程,界面有一定的細節,而且使用者已經能完整體驗到最終的產品,可以驗證產品的可行性,確保了不會在后面的開發過程中發現重大失誤。缺點是花費時間會多一些。

c.?高保真原型

幾乎完全按照最終產品來制作的原型,細節豐富,包括了產品的所有功能以及詳細的交互細節。制作高保真原型可以顯著降低溝通成本,原型更精準和精美。但是,保真度越高就意味著需要花更多的時間和開發精力,而且一旦有修改也會更加耗費時間。

d、各類保真度優劣總結

03 主流設計工具

  • 墨刀:設計界面原型及交互(目前階段使用),墨刀在線協作優勢更明顯,保密性上可以由公司統一購買賬號盡量避免使用私人賬號并在權限上做一定的限制;
  • Axure:的保密性更強,功能更強大,但是在線協作稍微差一點點。
  • Xmind:繪制功能結構圖(主要);
  • Visio:繪制用戶使用流程、系統業務流程、功能架構等;
  • Word:開發周期允許時撰寫PRD;
  • Excel:項目時間計劃管理、項目會議紀要輸出;

04 原型大綱

一個完整項目的產品原型需要有“大綱”,包含內容如下:

1.?產品的版本概況

a、?版本記錄

需明確記錄原型的增刪改內容及日期,

b、功能點列表

列出該原型圖的功能點,明確開發任務及優先級。對于分期開發,但原型已經出完的,標注不同功能開發的階段,“1期”、“2期”等。

2. 功能結構圖

a、使用xmind繪制,讓開發人員了解整個功能框架、信息架構,利于估算開發時間。

b、?功能結構圖中使用的功能及頁面名稱要和“功能清單列表”保持一致,

示例:

05 界面原型及邏輯說明

a、?原型界面設計

在繪制產品原型時,按思維導圖的產品規劃,先搭框架,制作主頁面菜單,菜單支持多個級別,各頁面的層級關系需要明確,但一般不要超過3級到4級,級數過多則意味著用戶的使用層級深,是不太好的方式。。

設置母版,對于產品中的通用性功能、模塊、建立統一的母版組建,為后期原型繪制提高便利性,如統一調用母版,統一修改母版。

b、邏輯交互說明

包含數據邏輯和操作交互,主要是面向開發人員和UI設計人員闡述。描述要有利于功能邏輯的實現”,比如說,以下兩種方式的準確性

i.?點擊購物車結算按鈕,跳轉到訂單支付頁面。

ii.?點擊購物車結算按鈕,需要判斷是否選中商品,所選中商品是否有貨,a、如果沒有選中商品,點擊之后則當頁彈窗提醒“您尚未選中商品”,b、如果有選中商品,則跳轉訂單支付頁面(對于不同情況下的點擊效果,需要做多個按鈕進行不同跳轉,),可進一步說明不同跳轉的切換效果,比如是左右滑動還是直接跳轉等。

對比以上兩種方式,則第二種更明確,這也會減少溝通成本。

c、?設計說明

如果對設計有特殊要求的也需要做說明,比如支付的一般此阿勇明亮飽和的色調,專業性則一般采取藍色,或者有設計可供參考的,配色等方面。但如果對于設計沒有較好感覺,或是專業知識的,建議盡量讓設計師處理,畢竟專業的事情留給專業的人來做嘛。

06 交互用例

給主要交互控件設置交互用例,這在墨刀中算是較為容易實現,比Axure要簡單,只需要連線即可,完善的交互能夠幫助開發清晰的理解需求。

07?原型詳細規范

1. 頁面層級樹及每個頁面命名的規則

a、在頁面層級樹的第一個頂級菜單設置并填寫【產品名稱】,下面可以添加更多層級;

b、版本號——采用子頁面進行管理,頁面名稱命名:版本號+【版本編號】如版本號V1.1.1;

c、修訂記錄——采用子頁面進行管理,管理當前版本產品原型設計的修訂記錄——文章前部分已經做了說明;

d、功能清單說明——采用子頁面進行管理,使用表格說明本次產品原型中需求的主要內容和功能;

e、正式原型部分:

i、產品頁面的層級,最高一般不超過4層;

ii、產品模塊,命名規則為“【序號】+【產品模塊名稱】”;

iii、產品功能級頁面,命名規則為“【序號】+【產品頁面名稱】”;

命名規則與文章章節目錄類似

2. 墨刀母版制作與引用

墨刀母版的制作請參考墨刀的母版制作 具體見網址:https://modao.kf5.com/hc/search/results/?type=kb&keyword=%E6%AF%8D%E7%89%88

復用元件/組件,必須使用母版設計,然后再統一添加到頁面上。在添加母版時,產品的背景,要求使用“位置鎖定”,防止在原型繪制的過程中,背景變動頻繁調整的情況;

  1. 頁面母版的名稱可自定義設置:“序號+自定義名稱”;
  2. 全局性的母版和局部使用母版,需要在命名規則上做區分,
  3. 盡可能將眾多頁面都會使用到的標題(如小程序的頭部)、元件(如日歷)以及交互組件放置在母版中;

3. 頁面位置和尺寸規范

a、?PC默認尺寸為墨刀的【網頁/電視】類別,APP/H5/小程序默認尺寸選擇iPhone6或者一個特定的尺寸,并在之后的原型沿用;

b、?APP的框架設計不區分Android與IOS,僅在交互用例的設計上進行區分;

08 流程制作規范

“流程頁面”設計并制作用戶對本功能的使用流程,一般使用泳道流程圖,泳道流程圖的畫法可以進行百度搜索,一般而言是二維方式,橫軸為角色,縱軸為流程進展,在流程旁邊,給出必要的文字備注說明,對流程進行進一步的闡述。

示例:

09 頁面說明

1. 交互設計及說明

需按照產品原型規范要求,需使用能更好表達原型的,使產品原型上的所有功能板塊,能夠

準備模擬用戶的操作情景,保證所有功能的動態面板交互、點擊效果、頁面跳轉鏈接等交互效果準確并正確。

并且為準確描述頁面的交互效果需求??稍陧撁媾赃呍黾印包c擊交互效果需求”的說明,來描述頁面中每一個功能的操作交互需求。

示例:

2. 頁面功能及邏輯的標注

為了方便開發人員查看和理解,在產品原型中對功能的實現邏輯或使用的限制條件等進行說明。對頁面的功能點進行編號,在對應編號進行說明備注

范例:

3. 頁面流程圖

項目整體頁面之間的交互流向邏輯,這個在墨刀上有一個工作流,可以點擊進入之后,選擇需要展示流向的頁面,之后可以選擇:a、每個頁面與頁面整體交互的方式;b、所有控件交互的流向兩種方式進行自動生成。第一種方式對于查看頁面的主交互方式更清晰

這是另一種頁面流程交互流的畫法,這是按照業務流程進行分拆,按一個業務流程從頭到尾,會走過哪些頁面。下圖即為示例,為訂單相關的流程交互,從最開始的進入APP或網站首頁》瀏覽商品》搜索》下單等,一直到最后支付成功,中間有異常流程也需要做說明。

以上即是“產品管理流程及規范3——產品原型設計”的內容,主要講解了產品原型設計的一些標準、規范及實際操作方式,方法。

下一篇文章將會講PRD文檔的撰寫規范、方法、如果喜歡文章,可以收藏,關注,作者水平有限,有錯誤之處,還請之處,互相探討。

 

本文由 @markzou 原創發布于人人都是產品經理,未經作者許可,禁止轉載。

題圖來自Unsplash,基于CC0協議。

專欄作家

Markzou,8年產品經驗,人人都是產品經理專欄作家。主要專注于本地生活、O2O、到家服務、新零售領域;曾任職于多家本地生活垂直領域頭部公司,具有豐富的本地生活行業經驗。

本文原創發布于人人都是產品經理,未經作者許可,禁止轉載。

題圖來自 Unsplash,基于 CC0 協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 請問下團隊無交互設計師崗位,作者也是將“交互設計及說明”與“頁面功能及邏輯的標注”分開描述的嘛

    來自廣東 回復
  2. 歡迎關注訂閱號:markzou的筆記

    來自四川 回復
  3. 真棒?。?!

    來自北京 回復
  4. 08 流程制作規范,里寫到“橫軸為角色,縱軸為流程進展”,是否寫錯了?橫軸為流程場景,縱軸為角色吧?

    來自湖北 回復
    1. 泳道圖一般是橫軸為角色,縱軸為流程進展,從上到下遞進

      來自中國 回復
    2. 哈哈哈,我理解錯了,我理解的是橫著排版字體的那個是橫軸,縱著排版字體的那個位縱軸

      來自湖北 回復
  5. 交互和標注有些亂了 尤其是出現交叉線

    來自廣東 回復
  6. 還是喜歡用axure 墨道做交互還是太簡單了

    來自湖北 回復
    1. 目前用墨刀,所以就以它舉例了

      來自四川 回復
  7. 不錯

    來自湖北 回復
  8. 感謝分享

    來自北京 回復