現(xiàn)有的系統(tǒng)組件不夠好用，加之我們能利用axure基本功能來實(shí)現(xiàn)更好用的組件，因此，就有了重寫系列教程。

寫在前面

1. 什么是重寫？

為了更好發(fā)揮產(chǎn)品原型在系統(tǒng)設(shè)計(jì)階段指引、展示等需求，通過種種方式對(duì)原生組件進(jìn)行優(yōu)化/改造/替換，在保證原有功能基礎(chǔ)上，實(shí)現(xiàn)更多可自定義的功能。

2. 為什么要進(jìn)行重寫？

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

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

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

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

總而言之，就是現(xiàn)有的系統(tǒng)組件不夠好用，加之我們能利用axure基本功能來實(shí)現(xiàn)更好用的組件，因此，就有了重寫系列教程。

第一部分我們主要將從最基礎(chǔ)的“文本框”開始講起，之后我們?cè)俾財(cái)U(kuò)展到“下拉列表”“樹狀菜單”等高級(jí)應(yīng)用。

一、文本框

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

功能分析

（1）基礎(chǔ)功能

文字增刪改查。

（2）視覺功能

獲得焦點(diǎn)時(shí)邊框高亮，失去焦點(diǎn)時(shí)邊框還原。

重寫理由

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

重寫原理

實(shí)現(xiàn)步驟

二、下拉列表

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

功能分析

（1）基礎(chǔ)功能

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

（2）視覺功能

折疊時(shí)點(diǎn)擊展開，展開時(shí)點(diǎn)擊折疊，及過程中的其他樣式效果。

重寫理由

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

由于本教程需要用到傳說中的“動(dòng)態(tài)面板”，因此順道將動(dòng)態(tài)面板放在前面講一講。

問：什么是動(dòng)態(tài)面板？

答：動(dòng)態(tài)面板就是PPT！

一個(gè)動(dòng)態(tài)面板里面有多個(gè)狀態(tài)，每個(gè)狀態(tài)就可以看成是一張PPT頁面，完成狀態(tài)編輯后，我們通過動(dòng)作綁定來觸發(fā)PPT的播放，即動(dòng)態(tài)面板狀態(tài)的切換，我們來看下面這個(gè)演示：

是的，動(dòng)態(tài)面板就是這么神奇，也是這么簡單！話不多說，我們進(jìn)入教程環(huán)節(jié)。

完成！

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

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

題圖來自 Pexels，基于 CC0 協(xié)議