Axure 組件重寫系列（一）

現有的系統組件不夠好用，加之我們能利用axure基本功能來實現更好用的組件，因此，就有了重寫系列教程。

寫在前面

1. 什麽是重寫？

為了更好發揮產品原型在系統設計階段指引、展示等需求，通過種種方式對原生組件進行優化/改造/替換，在保證原有功能基礎上，實現更多可自定義的功能。

2. 為什麽要進行重寫？

（1）原生組件較低的可編輯性

對於大部分新系統來說，設計初期建立一套風格美觀、交互完整的原型稿無論是對於系統展示，或是對後期系統叠代來說都有著一定分量的意義，axure提供的大部分滿足基礎功能的系統組件，往往只有較少的可配置項目，這顯然無法滿足我們的需求。比如說“下拉列表”，axure提供的可編輯樣式，寥寥的只有長寬及位置xy。

（2）原生組件較高的視覺差異性

同樣的一個原生組件，在不同瀏覽器中的形狀、樣式可能不盡相同（這與不同瀏覽器對基礎組件的渲染策略有關），比如再拿“下拉列表”說，同樣的樣式（雖然基本沒樣式可調…）在chrome和Firefox中，視覺差異竟然如此巨大。

總而言之，就是現有的系統組件不夠好用，加之我們能利用axure基本功能來實現更好用的組件，因此，就有了重寫系列教程。

第一部分我們主要將從最基礎的“文本框”開始講起，之後我們再慢慢地擴展到“下拉列表”“樹狀菜單”等高級應用。

一、文本框

先來看看原生文本框的效果：

功能分析

（1）基礎功能

文字增刪改查。

（2）視覺功能

獲得焦點時邊框高亮，失去焦點時邊框還原。

重寫理由

axure給我們可編輯的屬性中，只有文字、及文本框填充顏色，至於邊框顏色及高亮時的邊框顏色則無法修改，然而有幸的是axure很友好地提供了“隱藏邊框”這一功能，某種程度上極大方便我們對文本框的重寫，先來看看我們的目標效果：

重寫原理

實現步驟

二、下拉列表

我們來看看原生下拉列表的效果

功能分析

（1）基礎功能

下拉選中文字並將文字顯示到下拉父菜單中。

（2）視覺功能

折疊時點擊展開，展開時點擊折疊，及過程中的其他樣式效果。

重寫理由

前面也提到了，axure給我們編輯的空間只有基礎數據，至於樣式和交互，還須由我們自己來定義~話不多說，先看我們的效果圖：

由於本教程需要用到傳說中的“動態面板”，因此順道將動態面板放在前面講一講。

問：什麽是動態面板？

答：動態面板就是PPT！

一個動態面板裏面有多個狀態，每個狀態就可以看成是一張PPT頁面，完成狀態編輯後，我們通過動作綁定來觸發PPT的播放，即動態面板狀態的切換，我們來看下面這個演示：

是的，動態面板就是這麽神奇，也是這麽簡單！話不多說，我們進入教程環節。

完成！

是不是覺得對“子菜單”的批量交互配置有些繁瑣，也有些不好維護？沒關系，下一節，我們引入axure的大殺器“中繼器”，讓下拉列表的重寫秒變簡單！盡請期待~

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

題圖來自 Pexels，基於 CC0 協議

文章來源：