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 協議
感謝分享。哈哈哈~不過總下拉框的箭頭有點怪怪的 ??
你這個頭像就值得我們稱道,這個文章的教程也很好,哈哈不過要是有人能做好了控件分享上了就更好了~
謝謝,后續會繼續整理哦