技巧分享:Axure后臺組件制作的全過程

9 評論 20129 瀏覽 144 收藏 14 分鐘

大家好,前一段時間我剛剛分享了一篇《打造高品質(zhì)Axure組件庫就是這么簡單》,意在分享給大家一個完整的打造axure組件的思維路徑。本文著重于整體制作的技巧思路分享,希望大家通過本文的閱讀能夠?qū)W到對自己有用的知識。

最終效果瀏覽:http://www.uedart.com/demo.html

一、組件構(gòu)建思路

1.1 確定模塊

確定制作大模塊類別,這邊我將WebKit后臺組件分為了以下9大模塊:

1.2 細化各個模塊內(nèi)容

根據(jù)1.1定義的9大模塊,對每個模塊進行模塊細分,這個結(jié)構(gòu)定義就將作為后續(xù)我們制作導(dǎo)航的依據(jù)。

1.3 按流程執(zhí)行制作

按照之前前端組件打造的流程依次進行以下流程的實施,接下去我將會著重對“框架制作”和“規(guī)范制定”的執(zhí)行做深入剖析,為大家打開組件制作的神秘面紗。

二、組件框架制作

如何使用Axure做自適應(yīng)的框架適配不同的顯示器屏幕,分為以下5個步驟給大家講解如何快速只做一個框架層。

2.1 框架界面布局

2.2.1 Axure 樹形頁面框架

按照1.2細化后的模塊內(nèi)容進行Axure整體頁面的樹形結(jié)構(gòu)整理,用來指導(dǎo)后續(xù)的制作以及為下面制作框架頁面的跳轉(zhuǎn)提供對應(yīng)的頁面。

2.2.2 展示框架界面布局

定義好框架界面布局指導(dǎo)后面的內(nèi)容制作。

框架布局結(jié)果展示:

內(nèi)容區(qū)頁面布局結(jié)果展示:

2.2 頂部導(dǎo)航母版制作

我們來討論一下關(guān)于頂部導(dǎo)航的制作方式。

幾個關(guān)鍵點:

  • 多頁面統(tǒng)一
  • 導(dǎo)航自適應(yīng)
  • 切換菜單

針對這幾個關(guān)鍵點我們分別采取的方法是:

2.2.1 多頁面統(tǒng)一

采用母版進行頂部導(dǎo)航的制作,這邊我采用的是母版套動態(tài)面板的組合形式以達到導(dǎo)航欄的自適應(yīng)長度變化。母版的好處是多頁面使用時,如果需要改動元素,只需要改動母版即可,其他頁面會統(tǒng)一進行變化,這一點和sketch軟件的組件功能有相似之處。

2.2.2 導(dǎo)航自適應(yīng)

采用動態(tài)面板的自適應(yīng)100%對導(dǎo)航的背景層做自適應(yīng)拉伸,這樣就可以保持導(dǎo)航的滿屏顯示。

uedart logo固定在左側(cè),切換菜單動態(tài)面板估計在右側(cè)。

2.2.3 切換菜單

制作選項組,實現(xiàn)此5個菜單的切換選中效果,只有一個觸發(fā)選中,并設(shè)置好所有子菜單的點擊事件:點擊觸發(fā)選中和點擊跳轉(zhuǎn)頁面。

然后選擇所有子菜單一起設(shè)置對應(yīng)的懸停與選中效果,這邊我采用的變化選項為:字體顏色、填充顏色、不透明度。

2.3 左側(cè)折疊導(dǎo)航制作

我們來討論一下關(guān)于側(cè)邊導(dǎo)航的制作方式。

幾個關(guān)鍵點:

  • 內(nèi)容滾動
  • 折疊菜單

2.3.1 內(nèi)容滾動

內(nèi)容垂直滾動這樣效果還是容易實現(xiàn)的,我們左側(cè)的折疊導(dǎo)航采用動態(tài)面板的形式來制作,控制固定的高度,當(dāng)動態(tài)面板里的內(nèi)容超過固定高度即可實現(xiàn)滾動效果。

2.3.2 折疊菜單

折疊菜單的制作稍微復(fù)雜一點,但當(dāng)我們將其拆解開來,你會發(fā)現(xiàn)其實一樣,制作起來也是非常的so easy。

  • 折疊菜單的兩種狀態(tài):展開、收起
  • 切換點擊內(nèi)容跳轉(zhuǎn)事件

(1)折疊菜單狀態(tài)的切換

這邊我們?nèi)匀徊捎玫氖莿討B(tài)面板的制作形式(會發(fā)現(xiàn)動態(tài)面板在Axure制作中是非常好用的),動態(tài)面板我們設(shè)置兩種狀態(tài)的切換:一種是折疊菜單展開的形體,一種是折疊菜單收起的形體。

細節(jié)處理:兩個動態(tài)面板直接留出1px的距離可以解決掉相關(guān)折疊動作操作后動態(tài)菜單移位問題。

(2)切換點擊跳轉(zhuǎn)

設(shè)置相關(guān)子菜單的選項組,這個在上面一步我們已經(jīng)進行了相關(guān)設(shè)置,并設(shè)置了第一個子菜單的選中,復(fù)制做第二個模塊的菜單時要講其他的選中狀態(tài)取消,側(cè)邊菜單選項組有且只能默認一個選中,如果預(yù)覽選中效果出不來,可能的原因就是設(shè)置了多個默認選中。

設(shè)置每個子菜單的點擊效果,這邊因為內(nèi)容區(qū)我們還沒有制作,我們可以等待內(nèi)容區(qū)搭建完成后進行此步的設(shè)置。

2.4 內(nèi)容區(qū)搭建

內(nèi)容區(qū)我們做的非常簡單,采用了一個內(nèi)聯(lián)框架來做后續(xù)內(nèi)容頁面的加載。

內(nèi)部的頁面主要分為:標(biāo)題欄、分割線、留白、主頁面區(qū)。

標(biāo)題欄、分割線的制作依然使用的是動態(tài)面板的制作思路,勾選100%寬度選項,即可實現(xiàn)適配不同網(wǎng)頁寬度。后續(xù)頁面按照制作好的標(biāo)準(zhǔn)頁面模板進行復(fù)制制作。

2.5 頁面結(jié)構(gòu)完善

以上4步我們已經(jīng)將組件框架的大部分內(nèi)容完成了,到達這一環(huán)節(jié)千萬不要掉以輕心,我們要整體檢查一次我們的模擬結(jié)果,我們會發(fā)現(xiàn)還有兩處細節(jié)沒有達成:

  1. 載入頁面后各導(dǎo)航的選中狀態(tài)處理
  2. 側(cè)邊導(dǎo)航已經(jīng)內(nèi)聯(lián)框架的自適應(yīng)

第1條的完善相對簡單一些,置于頁面后,設(shè)置頁面載入選項,進行相關(guān)選中與內(nèi)聯(lián)內(nèi)容區(qū)加載設(shè)置即可。

第2條的完善,我們將采用條件語句來進行判斷不同情況下的適配參數(shù)調(diào)整,我們一開始的布局頁面寬度是1440px,這里我們就采用瀏覽頁面加載的寬度與1440px的大小關(guān)系來進行設(shè)置,這樣可以適配大多數(shù)的筆記本與臺式機的瀏覽。

三、規(guī)范制作

3.1 顏色規(guī)范制作

在之前的一篇文章《不只是“設(shè)計”,產(chǎn)品思維賦予設(shè)計新動力!》我有寫到過關(guān)于情緒板提取色彩進行產(chǎn)品色彩定調(diào)的過程。

情緒板的提過程:關(guān)鍵詞提取、關(guān)鍵詞拓展、圖庫收集、顏色提取、顏色衍變。

UEDART的色彩主調(diào)也是通過這樣的方式來提取實現(xiàn)并根據(jù)具體的模塊加以排版的調(diào)整,形成了UEDART全套的色彩規(guī)劃模本。

3.2 字體規(guī)范制作

字體規(guī)范的制作,這個相對來說簡單一些,UI設(shè)計中都會有一套完整的字體使用規(guī)范,我們也可以借用UI設(shè)計的規(guī)范來進行復(fù)用,將我們的字體也進行規(guī)范化的調(diào)整。

3.3 其他元素規(guī)范制作

其他相關(guān)元素的規(guī)范制作:尺寸規(guī)范、分割線規(guī)范、標(biāo)注規(guī)范。

這里的規(guī)范主要是根據(jù)自己的所需自行定制自己想要的元素,并加以規(guī)范說明。

3.4 按鈕規(guī)范制作

按鈕的制作,將常用的按鈕歸類制作:

  • 按用途:焦點按鈕、普通按鈕、幽靈按鈕、禁用按鈕、功能按鈕、危險按鈕;
  • 按功能:操作按鈕、帶圖標(biāo)功能按鈕、下拉展開功能按鈕。

并制作相關(guān)懸停與選中效果,方便后面的復(fù)用。

3.5 圖標(biāo)規(guī)范制作

圖標(biāo)分為幾大類:常用圖標(biāo)、面性圖標(biāo)、線性圖標(biāo)、品牌圖標(biāo)、Ant圖標(biāo)。

這里為了方便后續(xù)使用,我采用了svg格式的圖標(biāo)類型進行制作,圖標(biāo)大小統(tǒng)一48px的大小進行排布。

為了后續(xù)圖標(biāo)庫能夠更好的應(yīng)用,特此做了圖標(biāo)對應(yīng)的Axure的rplib格式組件。

3.6 常用小部件制作

進行常用小部件的制作,輸入框、選擇器、選擇控件、數(shù)據(jù)驗證、滑塊選擇等,將此類小部件效果固化后,你會發(fā)現(xiàn)再去做其他頁面的構(gòu)建得心應(yīng)手。

3.7 其他頁面的搭建制作

按照一開始定下的頁面結(jié)構(gòu),加上定好的規(guī)范進行其他頁面的逐步制作,這個過程是相對耗時的,我們可以給自己定一個計劃,一天完成多少個頁面(低保真),后面再來逐步調(diào)整對應(yīng)的高保真效果,這樣做起來會快速很多

結(jié)語

希望大家通過本文的學(xué)習(xí),都能夠快速搭建并且制作出自己的組件規(guī)范,活學(xué)活用,將知識真正的掌握起來。筆者也會繼續(xù)努力前行,為大家分享更多更好的知識點。

相關(guān)閱讀

打造高品質(zhì)Axure組件庫,就是這么簡單!

不只是“設(shè)計”,產(chǎn)品思維賦予設(shè)計新動力!

 

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

題圖來自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. rplib有分享嘛

    來自上海 回復(fù)
  2. 看完一篇原型設(shè)計文章啦,感覺還是不太會?

    :mrgreen: 想從0基礎(chǔ)開始學(xué)習(xí)Axure么?推薦你找Axure實戰(zhàn)班的助教小可愛@CC-起點學(xué)院(微信:qidiancc520),回復(fù)關(guān)鍵詞:大禮包

    領(lǐng)取原型設(shè)計大禮包,多學(xué)多練,你也能成為原型設(shè)計高手哦!

    來自廣東 回復(fù)
  3. 這不是抄襲的ant design么???抄的還不完整…

    來自天津 回復(fù)
    1. 正解

      來自江蘇 回復(fù)
    2. 小廠都抄 都是拿來改改就用了

      來自廣東 回復(fù)
  4. rplib 怎么下載?

    來自廣東 回復(fù)
  5. 感謝分享

    來自廣東 回復(fù)
  6. 能不能求個分享,大佬 ??

    來自河南 回復(fù)
  7. 厲害,總結(jié)的很細致,謝謝分享

    來自北京 回復(fù)