Axure 組件重寫系列(一)

4 評論 13944 瀏覽 81 收藏 6 分鐘

現有的系統組件不夠好用,加之我們能利用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 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 感謝分享。哈哈哈~不過總下拉框的箭頭有點怪怪的 ??

    來自江蘇 回復
  2. 你這個頭像就值得我們稱道,這個文章的教程也很好,哈哈不過要是有人能做好了控件分享上了就更好了~

    來自江蘇 回復
    1. 謝謝,后續會繼續整理哦

      回復