原型設計，要不要做這么復雜？我的答案是“需要做就做！”

入行以來，前前后后主導了幾個項目的后臺系統，由于每次都是從0到1開始設計，所以需要設計后臺系統的菜單；而菜單的修改伴隨著整個原型的迭代過程，經常為了維持頁面的統一性或者模擬更真實的交互效果，需要花不短的時間修改。

在制作菜單的過程中，嘗試過很多種方式，包括使用母版，動態面板，中繼器等，慢慢的總結了一些經驗，經歷了幾次的優化后，最終得到了一套合理的解決方案，而這個優化歷史也可以分為幾段：

1. 無效率的菜單設計
2. 使用母版增加你的工作效率
3. 使用動態面板實現點擊交互效果
4. 使用中繼器制作手風琴菜單

第一階段：無效率的菜單設計

平面化的菜單設計，每個頁面單獨設計對應的菜單，即每個頁面的菜單是分開的，不同菜單頁面之間沒有關聯性，這種方法比較簡單直接，但是每一個頁面都需要重新畫一次菜單，尤其是需要調整菜單內各個頁面之間的排序或增加新頁面的時候，為了一個頁面的變動需要重新把所有的頁面的菜單改過來，最終的導致花了很多不必要的時間在原型的修改上。

第二階段：使用母版增加你的工作效率

認識到原來的工作方式十分低效之后（關鍵是影響工作完成的進度），我開始思考有什么方式可以優化這方面的工作效率，所以開始引入母版，將一個菜單放在母版的設計中，這樣的話在設計不同的頁面的時候直接將母版拖到對應的頁面中，最后如果需要涉及菜單的修改的時候，就直接修改母版即可。

由于在不同的頁面，菜單的展示樣式是不一樣的，需要高亮的菜單欄也是不一樣的，如下圖，當你打開京東“配送服務查詢”頁面的時候，高亮對應的二級菜單欄，且對應的一級菜單欄“配送方式”會展開，但是當你打開“訂單查詢”頁面時，高亮訂單查詢頁面并展開一級菜單欄“訂單百事通”；因此，我最開始使用母版的時候，只是單純的利用母版來進行復制粘貼的效率，每次都是將母版拖到對應的頁面，在脫離母版后對菜單進行修改，但是這個方式依舊是低效率的。

第三階段：使用動態面板實現點擊交互效果

經歷了前面兩次嘗試之后，我發現除了需要使用母版來讓菜單變得可以復用，還需要讓菜單可以交互并應用于不同的頁面，以達到真實的模仿頁面點擊效果的目的；所以開始使用動態面板來制作我的菜單，了解動態面板的都知道，動態面板的主要作用是通過不同的觸發條件來切換不同的顯示狀態，所以只需要先布局好一級菜單欄，然后在一級菜單欄的基礎上添加交互效果，控制動態面板顯示不同的二級菜單欄。

具體做法如下：

1. 添加一個母版并進行命名，在母版中布局好一級菜單欄，和二級菜單欄，并給菜單欄命名：一級菜單欄分別命名為“yjcd1″，“yjcd2″，“yjcd2″…，添加一個動態面板，該動態面板命名為“erjicd”，為該動態面板添加面板，將二級子菜單分別放入不同的面板，并給每個面板進行命名，如下圖：

2. 設置交互效果，交互效果最終需要實現點擊每個一級菜單欄，對應的動態面板分別顯示對應的二級菜單欄，所以需要引入一個全局變量“ejcd”，點擊不同的一級菜單欄，會設置為不同的全局變量值，最終在頁面加載的時候，先根據全局變量值判斷動態面板需要怎么顯示，如下圖：

添加全局變量：

3. 設置點擊一級菜單欄的交互效果：

• 交互效果1：設置值于ejcd==”1″目的是修改全局變量，使在點擊二級子菜單的時候，跳轉新頁面，新頁面加載的時候根據全局變量顯示不同的二級菜單欄；
• 交互效果2：設置erjicd為商品的目的是修改當前頁面的二級子菜單狀態，使得點擊不同的一級子菜單均可以在本頁面切換查看不同的二級子菜單目錄）。

4. 設置頁面加載效果，每次跳轉到新頁面時，根據全局變量”ejcd”分別顯示不同的二級子菜單目錄：

5. 最后，為不同的二級子菜單添加跳轉交互即可：

第四階段：使用中繼器制作手風琴菜單

1. 添加一級菜單欄

先整理菜單結構，添加多個矩形對應一級菜單欄；添加一個動態面板（命名為二級菜單），目的是點擊一級菜單欄的時候，通過顯示/隱藏該動態面板來控制是否展示二級菜單欄（具體怎么篩選二級菜單欄，下面再說）

2. 定義中繼器元件中數據集（二級菜單欄）

在動態面板中添加一個中繼器元件，用來顯示二級菜單欄，中繼器元件的主要作用就是通過修改/新增/刪除中繼器的參數可以達到修改/新增/刪除二級子菜單的目的，同時點擊一級菜單欄時保證可以以一定的邏輯展示對應的二級子菜單。

在中繼器元件中添加列“name”作為二級菜單欄名稱；添加列“sjid”將二級菜單和一級菜單欄聯系在一起（用數據庫的思維可以理解為對應一級菜單欄的外鍵）；將一級菜單欄進行編號，如：商品管理對應1，銷售管理對應2…；將二級菜單欄名稱和一級菜單欄編號分別添加到中繼器的數據集中，如下圖所示：

3. 根據二級菜單欄名稱跳轉對應的頁面

在點擊二級菜單欄需要做的交互動作肯定是跳轉到對應的頁面，而中繼器中只有一個矩形，所以需要根據某個條件進行判斷點擊這個矩形之后到底應該要跳轉去哪里；另外在二級菜單中也需要顯示對應的二級菜單欄名稱。

為了實現顯示二級菜單欄的名稱，添加交互動作，即中繼器每次加載時，需要設置矩形的文字為對應的二級菜單欄名字，這里可以使用函數[[item.name]]；如下圖：

為了實現點擊二級菜單欄跳轉對應的頁面，可以設置點擊的時候根據矩形內顯示文字進行判斷需要調轉的頁面；

另外，由于點擊之后跳轉到新的頁面了，如果想讓進入該頁面的時候直接將對應的一級菜單欄下面的二級菜單欄全部展示出來，可以設置一個全局變量（如這里設置全局變量為”ejcdqjbl”），那么在加載新頁面的時候就可以根據這個全局變量來控制二級菜單欄的展示；如下圖所示：

4. 實現二級菜單列表展開收起的效果

為了實現點擊一級菜單欄可以切換二級菜單列表的展開和收起的效果，可以給一級菜單欄添加交互效果。

需要實現該效果的邏輯為：點擊一次菜單欄，如果對應的二級菜單列表已展開，那么就收起這個二級菜單列表；如果對應的二級菜單列表未展開，那么則先需要關閉其他的二級菜單列表，再展開對應的二級菜單列表。

# 判斷當前的二級菜單是否展開：需判斷動態面板的頂部是否和該一級菜單矩形有交集（用局部變量LVAR1來代替動態面板名稱，方便函數的使用，[[LVAR1.top]]函數作用是定義原件頂部坐標；而[[This.bottom]]函數的作用是定義元件底部坐標）；同時需要判斷二級菜單對應的動態面板是否可見。

# 如果上一步判斷為否的話，那么可以直接隱藏二級菜單對應的動態面板，并顯示該一級菜單對應的二級菜單列表；

根據以上邏輯，那么如何控制打開的是該一級菜單對應的二級菜單列表，以及如何控制該二級菜單列表顯示的位置就成為主要問題

所以先隱藏二級菜單動態面板：

再清除之前對中繼器數據的篩選，再添加新的對中繼器篩選的條件；同樣也可以添加局部變量，將中繼器元件定義為局部變量LVAR1，根據該二級菜單欄的name篩選對應sjid的中繼器元件。

設置動態面板顯示的尺寸：寬度可以設置一個固定的值，而高度的值則可以設置為需要顯示的二級菜單欄數量*對應元件的高度

設置二級菜單動態面板的位置：移動動態面板至一級菜單欄的底部的位置[[LVAR1.left]]，并和一級菜單欄的左邊對齊[[LVAR1.bottom]]；如下圖所示

最后顯示二級菜單動態面板，整體交互動作圖下圖所示：

5. 頁面加載時能自動展開對應的二級菜單列表

之前設置二級菜單欄元件的交互動作的時候，也添加了一個全局變量，用于頁面加載時二級菜單列表的展示；

這里的交互及引用的函數基本和上面的差不多，但是在添加對中繼器中的二級菜單欄篩選的時候，需要將全部變量ejcdqjbl的值賦給局部變量LVAR1，這個時候函數[[TargetItem.fid==LVAR1]]就會根據局部變量LVAR1的值對中繼器進行篩選。

小結

文中中繼器的效果最終其實也可以用動態面板來組合實現，這個其實之前有嘗試過，但是由于制作比較繁瑣而且不容易維護，所以果斷放棄了這種做法。

另外，在摸索如何設計菜單的過程中，也在一些社交群里面咨詢同道，得到的統一的回復：“原型不重要，道理講清楚就行…”；個人覺得這些話還是被濫用了，一棍子打死了想去完善原型設計技巧的人而不看人家這樣做的原因

至于我的原因比較簡單：

1. 給領導出一個能交互的原型，模擬真實的操作效果；
2. 之前每次新做一個后臺都需要重新畫菜單，中間遇到要對菜單進行調整還需要花很多時間；最終這兩個問題以一個較小的代價得以完美的解決。

總而言之，原型設計要不要做這么復雜，我的答案是“需要做就做！”

本文由 @?不橈 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Pexels ，基于 CC0 協議