原型的最大目的，無非是將產(chǎn)品的要求理解以一種簡單明白的方式展現(xiàn)給開發(fā)或者設(shè)計伙伴。從而使得產(chǎn)品的構(gòu)想和實際產(chǎn)出能夠最大程度的接近。

Prd文檔+原型的模式，是執(zhí)行產(chǎn)品經(jīng)常做的一種需求告知的方式。

然而，很多時候（為避免一概而論，僅參考自身碰到的情境）開發(fā)及設(shè)計很少有效率能夠?qū)煞菸臋n同時關(guān)注并仔細揣摩解讀。其中會涉及到原型的點到prd的點對應(yīng)問題，萬一關(guān)聯(lián)錯誤或解讀錯誤，勢必會花很多時間去詢問理解。

因此，現(xiàn)在針對大部分的產(chǎn)品需求展現(xiàn)，我只需要通過原型+注解的方式來展示來避免關(guān)聯(lián)的不便。

那么，一般的1.0版本的原型需求是怎樣的呢？

如下圖（圖片源自網(wǎng)絡(luò)）：

沒錯，就是在原型的旁邊加線引出標注。

當然也有其他的一些方式如下圖（圖片源自網(wǎng)絡(luò)）：

就是需求都在一處，用序號點來關(guān)聯(lián)需求點和頁面點的方式。

本著個人愛折騰原則，我認為以上這些方式都不是我想要的原型注解方式。

那么，我想要的原型注解方式是怎樣的？

需求來了！

1. 我希望注解能固定在一個地方且第一時間能看到（這樣開發(fā)就不會忽略注解只看圖）
2. 我希望原型圖上的對應(yīng)需要注解的點和注解能夠迅速的關(guān)聯(lián)（比如我點這個點就可以立即看到注解）

基本上只要有這兩大需求能滿足就可以了。

那么，接下來就是各種試驗。

這里就有些尷尬了，試驗過程沒有截圖或者老版本的保存所以消失在異次元空間。

大致過程就是嘗試了各種方案，然后征求開發(fā)小伙伴和設(shè)計小伙伴的意見。

概念就像冰山理論，你只看到成品，卻不知道冰山下面掩埋多少尸體（默哀）

那么，最后是一個怎樣的東西呢？

來，放音樂（登登登登）~

其實，圖上的內(nèi)容大致分為兩塊：

第一塊：注解塊（文字說明填寫區(qū)）

第二塊：標注點（放置到需要標注的地方）

那么具體怎么用呢？

第一步：放標注控件

這里一開始我個人習慣，為了給控件留放置區(qū)域，我的所有頁面的定位數(shù)據(jù)都是這個。

然后拖入標注控件

拖入后定位

為什么定位的x是-94大家應(yīng)該可以理解（下載元件后嘗試即可）？

第二步：放標注點 寫注解 或 寫注解 放標注點

為什么是或？因為個人習慣不一樣 ，我自己比較習慣先寫注解，再放標注點。

放標注點比較簡單，只要把標注點拖放到需要注解的位置即可。

寫注解則需要雙擊注解動態(tài)面板進入后再填寫注解內(nèi)容，一塊注解塊對應(yīng)一個標注點（在圖形命名上也會對應(yīng)）。

做好后預(yù)覽一下你可以看到這樣的結(jié)果。

hover標注點，對應(yīng)注解塊會高亮，點擊標注點后，對應(yīng)注解塊會置頂展示。

hover注解塊，對應(yīng)標注點會閃爍，點擊注解塊，整體頁面會平移到標注點位置。

雙向的關(guān)聯(lián)對應(yīng)就是的需要注解點點和注解內(nèi)容直接關(guān)聯(lián)上，同時又不影響注解內(nèi)容直接第一時間被看到。

上一個用該標注做的社交圈子的demo點擊查看

小提示：

1. 有時候注解塊不夠大的時候，拉高度去調(diào)整就可以了，最好不要拖動整個塊調(diào)位置，建議拉上邊沿和下邊沿調(diào)整，下方空間不夠時，框選下方所有注解塊shift+↓下移，多下移一些都沒事，優(yōu)先保證余量夠。
2. 為什么只有一個標注點，因為其他標注點想用的時候只需要把隱藏去掉就可以顯示了

最后，再重復一句，原型不必要做的特別完美高保真。優(yōu)先保證說明的需求能完美傳達，其次才考慮制作室的內(nèi)容層次，排版布局是否整潔干凈。然后提高你自身做原型的效率，可以再考慮提前做好你自己經(jīng)常使用的原型控件，建議按自己的制作需要搭配，網(wǎng)上的控件太多，但其實簡單的幾個有需要的就夠了。

最后的最后，放下載鏈接：

帶標注控件-APP常用元件

帶標注控件-WEB后臺常用元件

按需提取，鼓勵提取后學習思考優(yōu)化后為己所用。

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