案例分析|一次消滅產(chǎn)品文檔的實(shí)踐探索

15 評(píng)論 10651 瀏覽 46 收藏 9 分鐘

之前CTO對(duì)產(chǎn)品文檔提出了新的要求,這是我們?cè)谝笙碌男聡L試,給各位分享。

在剛?cè)肼氀矍斑@一份工作的時(shí)候,CTO就對(duì)產(chǎn)品組提出了新的要求:

“以后不用再另外輸出產(chǎn)品文檔,直接在原型上標(biāo)注就可以了,而且以后要輸出動(dòng)態(tài)原型?!?/p>

先介紹一下我本人的情況,產(chǎn)品經(jīng)驗(yàn)2年,對(duì)于Axure的交互設(shè)計(jì)有一定實(shí)踐經(jīng)驗(yàn)。但從來(lái)沒(méi)有想過(guò)把動(dòng)態(tài)的原型與產(chǎn)品說(shuō)明結(jié)合來(lái)表達(dá)需求。對(duì)于CTO的決定,我想了一下,大概是出于以下三點(diǎn)原因:

  1. 太多文件數(shù)量不利于產(chǎn)品檔案管理。原先產(chǎn)品資料至少會(huì)分成產(chǎn)品文檔與產(chǎn)品原型兩個(gè)文件,每次產(chǎn)品經(jīng)理對(duì)產(chǎn)品資料進(jìn)行更新后,則至少要對(duì)文件進(jìn)行兩次的上傳。東西一多,就容易亂。
  2. 打開(kāi)多個(gè)文件,切換窗口使用的效率低。比方說(shuō),原先在產(chǎn)品文檔與原型分開(kāi)的時(shí)候,開(kāi)發(fā)人員往往需要打開(kāi)原型文件的瀏覽器窗口與產(chǎn)品文檔Word窗口進(jìn)行切換查看。每一次查看功能點(diǎn)的時(shí)候老是要重新鎖定需求說(shuō)明的位置,又累又浪費(fèi)時(shí)間。
  3. 靜態(tài)原型的表達(dá)效率不高。雖然靜態(tài)原型也可以直接增加產(chǎn)品文檔注釋,但其在產(chǎn)品資料的交互、邏輯表達(dá)能力上較弱,開(kāi)發(fā)、設(shè)計(jì)、測(cè)試等同事在利用上容易造成理解偏差。

實(shí)際上,我要做的事情不是消滅產(chǎn)品文檔,而是將產(chǎn)品文檔與動(dòng)態(tài)原型進(jìn)行最大限度的結(jié)合。而經(jīng)過(guò)思考,有下面幾個(gè)問(wèn)題需要解決。(以下內(nèi)容皆是以Axure RP工具為載體進(jìn)行說(shuō)明。)

第一個(gè)問(wèn)題

那么多需求點(diǎn),怎樣在一個(gè)頁(yè)面上富有條例地展示出所有的產(chǎn)品資料?

依據(jù)我以前的經(jīng)驗(yàn),Axure RP中的“內(nèi)部框架”(Inner Frame)將會(huì)起到非常大的作用。

對(duì)Axure RP交互熟悉的產(chǎn)品朋友們,應(yīng)該能熟練地使用“內(nèi)部框架”功能來(lái)表達(dá)一整條產(chǎn)品邏輯線——只要先對(duì)所有子頁(yè)面進(jìn)行編輯后,確定鏈接打開(kāi)的對(duì)象即可。

但是,如果本次的產(chǎn)品需求出現(xiàn)了多條不相關(guān)的邏輯線(例如,A邏輯線條的功能點(diǎn)的分布是從購(gòu)物車頁(yè)到訂單確認(rèn)頁(yè),而B邏輯線條的功能點(diǎn)分布是從個(gè)人中心頁(yè)到個(gè)人信息修改頁(yè)),又該如何處理呢?

有兩種解決辦法:

  1. 多放幾個(gè)內(nèi)部框架,以同時(shí)展現(xiàn)不同的邏輯線。
  2. 制作一個(gè)遙控臺(tái),在一個(gè)內(nèi)部框架中對(duì)多條邏輯線進(jìn)行切換(靈感來(lái)自類似遙控器對(duì)電視節(jié)目的切換、大學(xué)寫論文時(shí)通過(guò)目錄對(duì)內(nèi)容的定位)。

我選擇了第二種。

在多個(gè)項(xiàng)目的實(shí)踐過(guò)程中,我發(fā)現(xiàn)邏輯線數(shù)量眾多是很常見(jiàn)的情況;在第一種方式下,會(huì)需要放置非常多的內(nèi)部框架,太多太亂。而第二種解決辦法下,只會(huì)存在控制臺(tái)與一個(gè)內(nèi)部框架,簡(jiǎn)潔明了。

另外,控制臺(tái)還能發(fā)揮類似“目錄” 的作用。我將每一個(gè)邏輯線條的初始頁(yè)面與控制臺(tái)上的按鈕建立聯(lián)系,并且邏輯線條下的頁(yè)面也會(huì)我被分別整理到文件夾中,這實(shí)際是在對(duì)產(chǎn)品進(jìn)行重新梳理的過(guò)程。

對(duì)于開(kāi)發(fā)、設(shè)計(jì)師來(lái)說(shuō),可以一目了然地看到本次項(xiàng)目的邏輯線條,理清產(chǎn)品結(jié)構(gòu)思路,更容易富有條理地利用產(chǎn)品資料。

第二個(gè)問(wèn)題

一個(gè)頁(yè)面可能會(huì)有數(shù)十個(gè)功能點(diǎn),怎樣收納這些功能點(diǎn),又不會(huì)超出內(nèi)部框架的范圍呢?

首先,我個(gè)人會(huì)將每一個(gè)功能點(diǎn)基本分成5個(gè)角度記性描述,包括:

  1. 功能序號(hào)
  2. 優(yōu)先級(jí)
  3. 展示:文案、功能樣式描述
  4. 交互:功能相關(guān)的交互描述
  5. 邏輯:功能涉及到的內(nèi)在邏輯描述
  6. 數(shù)據(jù):功能涉及到的數(shù)據(jù)收集需求

當(dāng)然,上述的六點(diǎn)不是必須的,在實(shí)際情況中可以選用。例如給公司內(nèi)部人員使用的產(chǎn)品一般都是不需要記錄使用數(shù)據(jù)的。

在解決方案上,我使用了大量的Axure RP中“隱藏/展示”的交互效果,以及矩形工具、連線功能。

基本思路是:

優(yōu)先并始終展示功能序號(hào)與優(yōu)先級(jí),通過(guò)點(diǎn)擊功能序號(hào)與優(yōu)先級(jí),再將原本隱藏的展示、交互、邏輯、數(shù)據(jù)幾個(gè)維度進(jìn)行切換顯示。

圍繞上述4個(gè)可能帶有大量文字說(shuō)明的維度,我又添加了矩形工具,在幾個(gè)矩形中填寫說(shuō)明文案,當(dāng)使用者點(diǎn)擊某個(gè)維度的時(shí)候,可切換矩形的顯示情況。

當(dāng)然,還需要連線工具將矩形與對(duì)應(yīng)的維度進(jìn)行連線,其中線段也要進(jìn)行對(duì)應(yīng)的切換顯示處理。

通過(guò)這樣的方式,就能很好地對(duì)頁(yè)面上的功能點(diǎn)進(jìn)行收納,就算是在移動(dòng)端頁(yè)面上收納數(shù)十個(gè)功能點(diǎn)也是綽綽有余的。

另外,為了提高標(biāo)注的效率,可以將標(biāo)注的整體進(jìn)行粘貼復(fù)制,再修改上面的文案;如此可以保留其中的交互,而不需要重新對(duì)標(biāo)注進(jìn)行交互設(shè)計(jì)。

主要是因?yàn)锳xure RP的母版工具不夠靈活,沒(méi)有對(duì)單個(gè)母版的個(gè)性化編輯功能,否則效率可以更高。

第三個(gè)問(wèn)題

如何告訴產(chǎn)品經(jīng)理的協(xié)同伙伴原型上哪里可以進(jìn)行交互操作?

我的做法是,在Sketch上繪制了一個(gè)特殊圖標(biāo),這個(gè)圖標(biāo)將表明該處可以進(jìn)行交互操作,例如點(diǎn)擊、左右拖動(dòng)之類的。

下方“菱形圓圈”的圖標(biāo)就是我自己設(shè)計(jì)的提示圖案:

第四個(gè)問(wèn)題

如何修正標(biāo)注的字體?

由于在不同的瀏覽器下,默認(rèn)展示的最小字體不同,所以有的時(shí)候會(huì)發(fā)現(xiàn)本來(lái)在原型上設(shè)置好的字體突然在瀏覽器中變大了許多,甚至?xí)鼍匦蔚姆秶?/p>

此時(shí)只要對(duì)瀏覽器進(jìn)行設(shè)置,將最小顯示字體進(jìn)行修改即可。我個(gè)人一般改成6號(hào)字,或“特小”。

通過(guò)本次的探索,我基本達(dá)到了領(lǐng)導(dǎo)的要求,之后會(huì)繼續(xù)深入,爭(zhēng)取給大家分享更多心得想法。

也歡迎大家一同指教,多多給我提意見(jiàn)。

 

作者:Dougee,努力中的東方小狼狗

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

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 點(diǎn)子相當(dāng)好,就是會(huì)把產(chǎn)品累死!

    來(lái)自廣東 回復(fù)
    1. 復(fù)制粘貼其實(shí)還好,交互都不用重新做,往里面改內(nèi)容就可以

      回復(fù)
  2. 原型的預(yù)覽文件就有高亮功能判斷有交互的菜單,你加標(biāo)志明顯是多此一舉啊。

    回復(fù)
    1. 但生成的html文件木有耶

      回復(fù)
    2. html有的,左側(cè)欄的右上角圖標(biāo)了解一下,打開(kāi)新大門。

      來(lái)自四川 回復(fù)
  3. 有這些時(shí)間,不如放在對(duì)需求的整理上和重新發(fā)現(xiàn)上

    來(lái)自廣東 回復(fù)
    1. 我個(gè)人是覺(jué)得不矛盾,需求的整理與重新發(fā)現(xiàn)當(dāng)然是更重要的工作,可以另外寫一篇文章分享。本文介紹的方式,也不會(huì)太影響時(shí)間,還可以增加協(xié)同伙伴的效率。

      來(lái)自廣東 回復(fù)
  4. 說(shuō)明里可以自定義字段,可對(duì)不能描述進(jìn)行定義

    來(lái)自福建 回復(fù)
    1. 可以,這個(gè)可以按需要增加

      回復(fù)
    2. 不難描述有哪些情況啊,我想想感覺(jué)自己沒(méi)有想明白

      回復(fù)
  5. 你讓交互同學(xué)怎么活??? ?

    來(lái)自浙江 回復(fù)
    1. 哎我們公司比較小,所以交互的活都是產(chǎn)品經(jīng)理來(lái)干~直接原型就體現(xiàn)出來(lái)了,不過(guò)產(chǎn)品原型做的時(shí)間就會(huì)長(zhǎng)些。

      來(lái)自廣東 回復(fù)
    2. 小團(tuán)隊(duì)不是應(yīng)該更注重效率嗎,把原型文檔搞那么復(fù)雜沒(méi)啥意義還費(fèi)時(shí)間,復(fù)雜的當(dāng)面溝通效率更高。我們公司的開(kāi)發(fā)都懶的看文檔,都是產(chǎn)品會(huì)議的時(shí)候討論,做的時(shí)候當(dāng)面溝通!

      來(lái)自浙江 回復(fù)
    3. 我們這邊項(xiàng)目比較多,開(kāi)發(fā)天天來(lái)找,給他們一直解釋中間就不能規(guī)劃新的項(xiàng)目。產(chǎn)品做細(xì)點(diǎn),是能節(jié)約很多時(shí)間的。

      回復(fù)