之前CTO對產品文檔提出了新的要求，這是我們在要求下的新嘗試，給各位分享。
在剛入職眼前這一份工作的時候，CTO就對產品組提出了新的要求：
“以後不用再另外輸出產品文檔，直接在原型上標註就可以了，而且以後要輸出動態原型。”
先介紹一下我本人的情況，產品經驗2年，對於Axure的交互設計有一定實踐經驗。但從來沒有想過把動態的原型與產品說明結合來表達需求。對於CTO的決定，我想了一下，大概是出於以下三點原因：
- 太多文件數量不利於產品檔案管理。原先產品資料至少會分成產品文檔與產品原型兩個文件，每次產品經理對產品資料進行更新後，則至少要對文件進行兩次的上傳。東西一多，就容易亂。
- 打開多個文件，切換窗口使用的效率低。比方說，原先在產品文檔與原型分開的時候，開發人員往往需要打開原型文件的瀏覽器窗口與產品文檔Word窗口進行切換查看。每一次查看功能點的時候老是要重新鎖定需求說明的位置，又累又浪費時間。
- 靜態原型的表達效率不高。雖然靜態原型也可以直接增加產品文檔註釋，但其在產品資料的交互、邏輯表達能力上較弱，開發、設計、測試等同事在利用上容易造成理解偏差。
實際上，我要做的事情不是消滅產品文檔，而是將產品文檔與動態原型進行最大限度的結合。而經過思考，有下面幾個問題需要解決。（以下內容皆是以Axure RP工具為載體進行說明。）
第一個問題
那麼多需求點，怎樣在一個頁面上富有條例地展示出所有的產品資料？
依據我以前的經驗，Axure RP中的“內部框架”（Inner Frame）將會起到非常大的作用。
但是，如果本次的產品需求出現了多條不相關的邏輯線（例如，A邏輯線條的功能點的分佈是從購物車頁到訂單確認頁，而B邏輯線條的功能點分佈是從個人中心頁到個人信息修改頁），又該如何處理呢？
有兩種解決辦法：
- 多放幾個內部框架，以同時展現不同的邏輯線。
- 製作一個遙控臺，在一個內部框架中對多條邏輯線進行切換（靈感來自類似遙控器對電視節目的切換、大學寫論文時通過目錄對內容的定位）。
我選擇了第二種。
在多個項目的實踐過程中，我發現邏輯線數量眾多是很常見的情況；在第一種方式下，會需要放置非常多的內部框架，太多太亂。而第二種解決辦法下，只會存在控制檯與一個內部框架，簡潔明瞭。
另外，控制檯還能發揮類似“目錄” 的作用。我將每一個邏輯線條的初始頁面與控制檯上的按鈕建立聯繫，並且邏輯線條下的頁面也會我被分別整理到文件夾中，這實際是在對產品進行重新梳理的過程。
對於開發、設計師來說，可以一目瞭然地看到本次項目的邏輯線條，理清產品結構思路，更容易富有條理地利用產品資料。
第二個問題
一個頁面可能會有數十個功能點，怎樣收納這些功能點，又不會超出內部框架的範圍呢？
首先，我個人會將每一個功能點基本分成5個角度記性描述，包括：
- 功能序號
- 優先級
- 展示：文案、功能樣式描述
- 交互：功能相關的交互描述
- 邏輯：功能涉及到的內在邏輯描述
- 數據：功能涉及到的數據收集需求
當然，上述的六點不是必須的，在實際情況中可以選用。例如給公司內部人員使用的產品一般都是不需要記錄使用數據的。
在解決方案上，我使用了大量的Axure RP中“隱藏/展示”的交互效果，以及矩形工具、連線功能。
基本思路是：
優先並始終展示功能序號與優先級，通過點擊功能序號與優先級，再將原本隱藏的展示、交互、邏輯、數據幾個維度進行切換顯示。
圍繞上述4個可能帶有大量文字說明的維度，我又添加了矩形工具，在幾個矩形中填寫說明文案，當使用者點擊某個維度的時候，可切換矩形的顯示情況。
當然，還需要連線工具將矩形與對應的維度進行連線，其中線段也要進行對應的切換顯示處理。
通過這樣的方式，就能很好地對頁面上的功能點進行收納，就算是在移動端頁面上收納數十個功能點也是綽綽有餘的。
另外，為了提高標註的效率，可以將標註的整體進行粘貼複製，再修改上面的文案；如此可以保留其中的交互，而不需要重新對標註進行交互設計。
第三個問題
如何告訴產品經理的協同夥伴原型上哪裡可以進行交互操作？
我的做法是，在Sketch上繪製了一個特殊圖標，這個圖標將表明該處可以進行交互操作，例如點擊、左右拖動之類的。
下方“菱形圓圈”的圖標就是我自己設計的提示圖案：
第四個問題
如何修正標註的字體？
由於在不同的瀏覽器下，默認展示的最小字體不同，所以有的時候會發現本來在原型上設置好的字體突然在瀏覽器中變大了許多，甚至會超出矩形的範圍。
此時只要對瀏覽器進行設置，將最小顯示字體進行修改即可。我個人一般改成6號字，或“特小”。
通過本次的探索，我基本達到了領導的要求，之後會繼續深入，爭取給大家分享更多心得想法。
也歡迎大家一同指教，多多給我提意見。
題圖來自 Unsplash ，基於 CC0 協議
閱讀更多 人人都是產品經理 的文章
