產(chǎn)品管理流程及規(guī)范3:產(chǎn)品原型設(shè)計(jì)

11 評(píng)論 27575 瀏覽 208 收藏 17 分鐘

產(chǎn)品原型的規(guī)范化,目的是清楚表達(dá)產(chǎn)品設(shè)計(jì)理念和功能交互及執(zhí)行邏輯,提高產(chǎn)品、研發(fā)、UI及業(yè)務(wù)部門(mén)之間的溝通效率。本文主要講解了產(chǎn)品原型設(shè)計(jì)的一些標(biāo)準(zhǔn)、規(guī)范及實(shí)際操作方式,方法,與大家分享。

01 制定產(chǎn)品原型設(shè)計(jì)規(guī)范的目的及意義

目的:產(chǎn)品原型的規(guī)范化,目的是清楚表達(dá)產(chǎn)品設(shè)計(jì)理念和功能交互及執(zhí)行邏輯,提高產(chǎn)品、研發(fā)、UI及業(yè)務(wù)部門(mén)之間的溝通效率,避免信息不對(duì)稱(chēng)和信息傳達(dá)的遺漏和缺失而導(dǎo)致的整個(gè)項(xiàng)目進(jìn)度延期問(wèn)題。

  1. 讓開(kāi)發(fā)和設(shè)計(jì)團(tuán)隊(duì)提高設(shè)計(jì)開(kāi)發(fā)質(zhì)量及工作效率。
  2. 統(tǒng)一設(shè)計(jì)規(guī)則,降低各方溝通成本。
  3. 進(jìn)行模塊式的設(shè)計(jì),降低開(kāi)發(fā)成本和減少開(kāi)發(fā)時(shí)間,加快產(chǎn)品迭代上線(xiàn)的速度。
  4. 改善交互設(shè)計(jì)的水平,提升用戶(hù)的使用體驗(yàn)。

對(duì)于個(gè)人來(lái)說(shuō):規(guī)范性產(chǎn)品原型繪制能夠提高個(gè)人的職業(yè)水平,標(biāo)準(zhǔn),統(tǒng)一性,團(tuán)隊(duì)內(nèi)部及協(xié)作單位的溝通成本也會(huì)降低,這能減少扯皮、反復(fù)溝通等問(wèn)題,將更多時(shí)間放在產(chǎn)品的思考上,同時(shí)避免不必要的糾紛。

02 原型保真度比較

1. 評(píng)價(jià)維度

一般有五個(gè)維度來(lái)測(cè)量一個(gè)原型的真實(shí)(保真)程度。

a、視覺(jué)精煉層次

原型與最終產(chǎn)品看上去有多相似?一個(gè)低保真的原型也許就是一個(gè)手繪的草稿,而一個(gè)高保真原型就會(huì)是精確到像素,看上去和真實(shí)的產(chǎn)品沒(méi)什么區(qū)別。

b、功能的廣度

原型能夠包含多少的功能?一個(gè)低保真的原型聚焦于那些最重要的任務(wù),而高保真原型會(huì)有更細(xì)節(jié)的任務(wù)

c、功能的深度

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

d、交互的豐富性

原型中會(huì)有多少的交互?低保真原型也許會(huì)相當(dāng)簡(jiǎn)單,在用戶(hù)使用時(shí)沒(méi)有任何的反饋信息。高保真原型將會(huì)考慮動(dòng)畫(huà)效果,表單驗(yàn)證,和所有用戶(hù)與產(chǎn)品直接的細(xì)節(jié)交互。

e、數(shù)據(jù)模型的豐富性

你的原型中應(yīng)用的數(shù)據(jù)有多豐富?低保真原型使用的是有限的,典型的數(shù)據(jù)設(shè)置,顯示最常見(jiàn)的用例。高保真原型會(huì)包括邊緣的情況,比如非常長(zhǎng)的用戶(hù)名(應(yīng)該減少用戶(hù)名的長(zhǎng)度),無(wú)數(shù)據(jù)(提供默認(rèn)人物頭像),第一次使用(使用空白狀態(tài)),或者極端大的數(shù)據(jù)量(使用翻頁(yè)或者過(guò)濾)。

產(chǎn)品原型設(shè)計(jì)根據(jù)還原度,也就是與最終成本的逼真度,大致分為低保真、中保真,高保真原型。我在過(guò)往中基本做到中保真,這也是絕大公司的要求。不同團(tuán)隊(duì)及個(gè)人可能對(duì)保真度理解不一致,僅僅為個(gè)人觀點(diǎn)。

2. 保真度

?a、 低保真原型

表現(xiàn)軟件的重點(diǎn)功能和基本交互過(guò)程,使用簡(jiǎn)易的線(xiàn)框進(jìn)行處理,。好處是:制作成本低,速度快,修改也方便,在功能簡(jiǎn)單及團(tuán)隊(duì)溝通順暢時(shí)可以使用

b、?中度保真原型

中度保真的產(chǎn)品添加了更多細(xì)節(jié),對(duì)軟件的交互進(jìn)行了更細(xì)致的設(shè)計(jì),比如照片處有對(duì)應(yīng)內(nèi)容照片,選項(xiàng)卡有具體內(nèi)容,按鈕顏色做了區(qū)分,有動(dòng)效模擬。在大部分情況下,中度保真原型已經(jīng)足夠,既表現(xiàn)了軟件的功能特性和交互過(guò)程,界面有一定的細(xì)節(jié),而且使用者已經(jīng)能完整體驗(yàn)到最終的產(chǎn)品,可以驗(yàn)證產(chǎn)品的可行性,確保了不會(huì)在后面的開(kāi)發(fā)過(guò)程中發(fā)現(xiàn)重大失誤。缺點(diǎn)是花費(fèi)時(shí)間會(huì)多一些。

c.?高保真原型

幾乎完全按照最終產(chǎn)品來(lái)制作的原型,細(xì)節(jié)豐富,包括了產(chǎn)品的所有功能以及詳細(xì)的交互細(xì)節(jié)。制作高保真原型可以顯著降低溝通成本,原型更精準(zhǔn)和精美。但是,保真度越高就意味著需要花更多的時(shí)間和開(kāi)發(fā)精力,而且一旦有修改也會(huì)更加耗費(fèi)時(shí)間。

d、各類(lèi)保真度優(yōu)劣總結(jié)

03 主流設(shè)計(jì)工具

  • 墨刀:設(shè)計(jì)界面原型及交互(目前階段使用),墨刀在線(xiàn)協(xié)作優(yōu)勢(shì)更明顯,保密性上可以由公司統(tǒng)一購(gòu)買(mǎi)賬號(hào)盡量避免使用私人賬號(hào)并在權(quán)限上做一定的限制;
  • Axure:的保密性更強(qiáng),功能更強(qiáng)大,但是在線(xiàn)協(xié)作稍微差一點(diǎn)點(diǎn)。
  • Xmind:繪制功能結(jié)構(gòu)圖(主要);
  • Visio:繪制用戶(hù)使用流程、系統(tǒng)業(yè)務(wù)流程、功能架構(gòu)等;
  • Word:開(kāi)發(fā)周期允許時(shí)撰寫(xiě)PRD;
  • Excel:項(xiàng)目時(shí)間計(jì)劃管理、項(xiàng)目會(huì)議紀(jì)要輸出;

04 原型大綱

一個(gè)完整項(xiàng)目的產(chǎn)品原型需要有“大綱”,包含內(nèi)容如下:

1.?產(chǎn)品的版本概況

a、?版本記錄

需明確記錄原型的增刪改內(nèi)容及日期,

b、功能點(diǎn)列表

列出該原型圖的功能點(diǎn),明確開(kāi)發(fā)任務(wù)及優(yōu)先級(jí)。對(duì)于分期開(kāi)發(fā),但原型已經(jīng)出完的,標(biāo)注不同功能開(kāi)發(fā)的階段,“1期”、“2期”等。

2. 功能結(jié)構(gòu)圖

a、使用xmind繪制,讓開(kāi)發(fā)人員了解整個(gè)功能框架、信息架構(gòu),利于估算開(kāi)發(fā)時(shí)間。

b、?功能結(jié)構(gòu)圖中使用的功能及頁(yè)面名稱(chēng)要和“功能清單列表”保持一致,

示例:

05 界面原型及邏輯說(shuō)明

a、?原型界面設(shè)計(jì)

在繪制產(chǎn)品原型時(shí),按思維導(dǎo)圖的產(chǎn)品規(guī)劃,先搭框架,制作主頁(yè)面菜單,菜單支持多個(gè)級(jí)別,各頁(yè)面的層級(jí)關(guān)系需要明確,但一般不要超過(guò)3級(jí)到4級(jí),級(jí)數(shù)過(guò)多則意味著用戶(hù)的使用層級(jí)深,是不太好的方式。。

設(shè)置母版,對(duì)于產(chǎn)品中的通用性功能、模塊、建立統(tǒng)一的母版組建,為后期原型繪制提高便利性,如統(tǒng)一調(diào)用母版,統(tǒng)一修改母版。

b、邏輯交互說(shuō)明

包含數(shù)據(jù)邏輯和操作交互,主要是面向開(kāi)發(fā)人員和UI設(shè)計(jì)人員闡述。描述要有利于功能邏輯的實(shí)現(xiàn)”,比如說(shuō),以下兩種方式的準(zhǔn)確性

i.?點(diǎn)擊購(gòu)物車(chē)結(jié)算按鈕,跳轉(zhuǎn)到訂單支付頁(yè)面。

ii.?點(diǎn)擊購(gòu)物車(chē)結(jié)算按鈕,需要判斷是否選中商品,所選中商品是否有貨,a、如果沒(méi)有選中商品,點(diǎn)擊之后則當(dāng)頁(yè)彈窗提醒“您尚未選中商品”,b、如果有選中商品,則跳轉(zhuǎn)訂單支付頁(yè)面(對(duì)于不同情況下的點(diǎn)擊效果,需要做多個(gè)按鈕進(jìn)行不同跳轉(zhuǎn),),可進(jìn)一步說(shuō)明不同跳轉(zhuǎn)的切換效果,比如是左右滑動(dòng)還是直接跳轉(zhuǎn)等。

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

c、?設(shè)計(jì)說(shuō)明

如果對(duì)設(shè)計(jì)有特殊要求的也需要做說(shuō)明,比如支付的一般此阿勇明亮飽和的色調(diào),專(zhuān)業(yè)性則一般采取藍(lán)色,或者有設(shè)計(jì)可供參考的,配色等方面。但如果對(duì)于設(shè)計(jì)沒(méi)有較好感覺(jué),或是專(zhuān)業(yè)知識(shí)的,建議盡量讓設(shè)計(jì)師處理,畢竟專(zhuān)業(yè)的事情留給專(zhuān)業(yè)的人來(lái)做嘛。

06 交互用例

給主要交互控件設(shè)置交互用例,這在墨刀中算是較為容易實(shí)現(xiàn),比Axure要簡(jiǎn)單,只需要連線(xiàn)即可,完善的交互能夠幫助開(kāi)發(fā)清晰的理解需求。

07?原型詳細(xì)規(guī)范

1. 頁(yè)面層級(jí)樹(shù)及每個(gè)頁(yè)面命名的規(guī)則

a、在頁(yè)面層級(jí)樹(shù)的第一個(gè)頂級(jí)菜單設(shè)置并填寫(xiě)【產(chǎn)品名稱(chēng)】,下面可以添加更多層級(jí);

b、版本號(hào)——采用子頁(yè)面進(jìn)行管理,頁(yè)面名稱(chēng)命名:版本號(hào)+【版本編號(hào)】如版本號(hào)V1.1.1;

c、修訂記錄——采用子頁(yè)面進(jìn)行管理,管理當(dāng)前版本產(chǎn)品原型設(shè)計(jì)的修訂記錄——文章前部分已經(jīng)做了說(shuō)明;

d、功能清單說(shuō)明——采用子頁(yè)面進(jìn)行管理,使用表格說(shuō)明本次產(chǎn)品原型中需求的主要內(nèi)容和功能;

e、正式原型部分:

i、產(chǎn)品頁(yè)面的層級(jí),最高一般不超過(guò)4層;

ii、產(chǎn)品模塊,命名規(guī)則為“【序號(hào)】+【產(chǎn)品模塊名稱(chēng)】”;

iii、產(chǎn)品功能級(jí)頁(yè)面,命名規(guī)則為“【序號(hào)】+【產(chǎn)品頁(yè)面名稱(chēng)】”;

命名規(guī)則與文章章節(jié)目錄類(lèi)似

2. 墨刀母版制作與引用

墨刀母版的制作請(qǐng)參考墨刀的母版制作 具體見(jiàn)網(wǎng)址:https://modao.kf5.com/hc/search/results/?type=kb&keyword=%E6%AF%8D%E7%89%88

復(fù)用元件/組件,必須使用母版設(shè)計(jì),然后再統(tǒng)一添加到頁(yè)面上。在添加母版時(shí),產(chǎn)品的背景,要求使用“位置鎖定”,防止在原型繪制的過(guò)程中,背景變動(dòng)頻繁調(diào)整的情況;

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

3. 頁(yè)面位置和尺寸規(guī)范

a、?PC默認(rèn)尺寸為墨刀的【網(wǎng)頁(yè)/電視】類(lèi)別,APP/H5/小程序默認(rèn)尺寸選擇iPhone6或者一個(gè)特定的尺寸,并在之后的原型沿用;

b、?APP的框架設(shè)計(jì)不區(qū)分Android與IOS,僅在交互用例的設(shè)計(jì)上進(jìn)行區(qū)分;

08 流程制作規(guī)范

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

示例:

09 頁(yè)面說(shuō)明

1. 交互設(shè)計(jì)及說(shuō)明

需按照產(chǎn)品原型規(guī)范要求,需使用能更好表達(dá)原型的,使產(chǎn)品原型上的所有功能板塊,能夠

準(zhǔn)備模擬用戶(hù)的操作情景,保證所有功能的動(dòng)態(tài)面板交互、點(diǎn)擊效果、頁(yè)面跳轉(zhuǎn)鏈接等交互效果準(zhǔn)確并正確。

并且為準(zhǔn)確描述頁(yè)面的交互效果需求??稍陧?yè)面旁邊增加“點(diǎn)擊交互效果需求”的說(shuō)明,來(lái)描述頁(yè)面中每一個(gè)功能的操作交互需求。

示例:

2. 頁(yè)面功能及邏輯的標(biāo)注

為了方便開(kāi)發(fā)人員查看和理解,在產(chǎn)品原型中對(duì)功能的實(shí)現(xiàn)邏輯或使用的限制條件等進(jìn)行說(shuō)明。對(duì)頁(yè)面的功能點(diǎn)進(jìn)行編號(hào),在對(duì)應(yīng)編號(hào)進(jìn)行說(shuō)明備注

范例:

3. 頁(yè)面流程圖

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

這是另一種頁(yè)面流程交互流的畫(huà)法,這是按照業(yè)務(wù)流程進(jìn)行分拆,按一個(gè)業(yè)務(wù)流程從頭到尾,會(huì)走過(guò)哪些頁(yè)面。下圖即為示例,為訂單相關(guān)的流程交互,從最開(kāi)始的進(jìn)入APP或網(wǎng)站首頁(yè)》瀏覽商品》搜索》下單等,一直到最后支付成功,中間有異常流程也需要做說(shuō)明。

以上即是“產(chǎn)品管理流程及規(guī)范3——產(chǎn)品原型設(shè)計(jì)”的內(nèi)容,主要講解了產(chǎn)品原型設(shè)計(jì)的一些標(biāo)準(zhǔn)、規(guī)范及實(shí)際操作方式,方法。

下一篇文章將會(huì)講PRD文檔的撰寫(xiě)規(guī)范、方法、如果喜歡文章,可以收藏,關(guān)注,作者水平有限,有錯(cuò)誤之處,還請(qǐng)之處,互相探討。

 

本文由 @markzou 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash,基于CC0協(xié)議。

專(zhuān)欄作家

Markzou,8年產(chǎn)品經(jīng)驗(yàn),人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家。主要專(zhuān)注于本地生活、O2O、到家服務(wù)、新零售領(lǐng)域;曾任職于多家本地生活垂直領(lǐng)域頭部公司,具有豐富的本地生活行業(yè)經(jīng)驗(yàn)。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash,基于 CC0 協(xié)議

該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 請(qǐng)問(wèn)下團(tuán)隊(duì)無(wú)交互設(shè)計(jì)師崗位,作者也是將“交互設(shè)計(jì)及說(shuō)明”與“頁(yè)面功能及邏輯的標(biāo)注”分開(kāi)描述的嘛

    來(lái)自廣東 回復(fù)
  2. 歡迎關(guān)注訂閱號(hào):markzou的筆記

    來(lái)自四川 回復(fù)
  3. 真棒?。?!

    來(lái)自北京 回復(fù)
  4. 08 流程制作規(guī)范,里寫(xiě)到“橫軸為角色,縱軸為流程進(jìn)展”,是否寫(xiě)錯(cuò)了?橫軸為流程場(chǎng)景,縱軸為角色吧?

    來(lái)自湖北 回復(fù)
    1. 泳道圖一般是橫軸為角色,縱軸為流程進(jìn)展,從上到下遞進(jìn)

      來(lái)自中國(guó) 回復(fù)
    2. 哈哈哈,我理解錯(cuò)了,我理解的是橫著排版字體的那個(gè)是橫軸,縱著排版字體的那個(gè)位縱軸

      來(lái)自湖北 回復(fù)
  5. 交互和標(biāo)注有些亂了 尤其是出現(xiàn)交叉線(xiàn)

    來(lái)自廣東 回復(fù)
  6. 還是喜歡用axure 墨道做交互還是太簡(jiǎn)單了

    來(lái)自湖北 回復(fù)
    1. 目前用墨刀,所以就以它舉例了

      來(lái)自四川 回復(fù)
  7. 不錯(cuò)

    來(lái)自湖北 回復(fù)
  8. 感謝分享

    來(lái)自北京 回復(fù)