Axure教程:如何充分利用元件庫快速搭建原型

0 評論 1067 瀏覽 1 收藏 10 分鐘

本文將深入探討如何創建并有效利用個人化的Axure元件庫,以及它如何在不同場景下提高工作效率。我們將通過具體的步驟指導和實際案例,展示制作和管理元件庫的技巧,以及如何通過元件庫解決常見的工作難題。

Q&A環節

Q:什么是元件庫?

A:Axure 元件庫是我們設計產品時必備的工具,那么在日常使用中我們經常會用到一些常用的元素,如果每次都重新制作非常麻煩,最簡單的方法就是講做好的內容做成元件,方便下次直接使用。

Q:有沒有通用標準的元件庫?

A:沒有,最好的元件庫是根據自己實際設計制作屬于自己的元件庫,舉個例子:專做saas的PM,經常用到后臺的一些元件庫(輸入框、選擇器、進度條等)整理好屬于自己常用的,下次做需求要添加某某條件篩選,拖出來改下就行了。

Q:又如何制作屬于自己的元件庫呢?

A:下面的教程基本就是闡述一些如何制作自己的元件庫,并提高工作效率的方式與教程。

一、先從制作元件庫說起

先從RP文件里找到元件庫,在右上角操作地方,創建元件庫(同時你也能載入做好的元件庫),輸入名稱并保存,此刻axure會自動創建rplib文件并打開,如下圖所示

下一步就把你想要并常用的內容放在當前頁面,這樣就形成了一組元件庫

這里特別提醒下:

  • 選擇的元件庫可包含任意交互與動態面板,如果制作元件庫用了交互拖出來是附帶交互效果的
  • 每個元件庫放置的位置做好是(0,0)
  • 對當前元件庫進行刪除修改都行,保存后重新載入下元件庫立馬生效

最后就是要把元件庫做好歸類與名稱設置

為了方便并快速查詢想要的元件庫,做好歸類與名稱的設置是特別重要的,原因是因為:元件庫基本都是縮略圖,看不清楚內容,另外有效的歸類方便管理不同內容的元件庫并快速找到,最終通過名稱來識別。

舉個例子先說下步驟:

  1. 在元件庫創建分組文件夾(文件夾是唯一元件庫區分歸類的):num(數據歸類)
  2. 在當前建立元件文件:Num_表頭樣式A

最后再強調下:元件庫沒有二級分類,只有一級分類,為了方便自己管理元件庫,可在文件夾的上一級再創建文件夾去管理,且不會影響其他分組。

這個基本就是制作自己元件庫的流程了。

二、再用幾個場景描述元件庫的必要性

下面我用幾個場景來描述如何快速使用元件庫制作Web端,且效率會起碼提高一倍

場景A:開發與產品互懟需求的業務場景

開發:你這個原型沒標注篩選哪些內容,你叫我們怎么做;

PM:我標注了,在下面有說明篩選哪些內容;

開發:。。。好吧,我沒有注意滑下去看需求內容。

這個場景誰都沒有什么錯誤,開發可能沒注意,產品可能沒標注箭頭提示做好說明,Web制作的原型基本都是全屏的,每次上下滾動來回看特別耗時,且容易忽略細節問題,如果做交互那更費時間,產品也就想表達自己的意思就可以。

但如果你經常做后臺選擇器相關的內容,提前把帶有交互的元件庫樣板上去,只要修改下文案,就輕松解決了問題,且開發也明白你想要做怎么樣的選擇器。

場景B:UI與產品互懟需求的業務場景

UI:你這個icon到底是想出彈窗,還是跳轉二級頁面,還有你一級菜單有哪些內容,二級菜單有哪些內容,怎么歸類

PM:我這個icon跳轉我在下面標注了是彈窗,跳轉是跳到下個index頁面內容,一級菜單按照我做的業務流程梳理那些就可以,你看下我的xmind

說句實話,如果你有精力吧所有交互做出來,那基本也不要那些UI、UE佬了,在就是很多公司基本做后臺的UI只給設計規范,很多表單設計,開發基本都是照著原型直接懟出來的,所以給到PM的壓力也大,既要考慮表單樣式和規范,又要考慮點擊跳轉交互邏輯,如果搞不好甚至可能把自己玩自閉。

但如果你有屬于自己的元件庫,以后不管表單樣式還是交互跳轉,都是固定統一的,直接拖出來使用就可以。即做到樣式統一,又可以規范交互跳轉,這可能也就是元件庫最大的魅力所在了吧。

三、最后歸根結底還是要找到屬于自己的元件庫

希望大家也能養成自己做自己元件庫的好習慣,因為重復的事情重復做等于浪費時間,日常工作中我們經常要用的那幾個,有必要的話可以放入自己的元件庫,久而久之,打造屬于自己的元件庫

帶有交互的元件庫是特別有必要的,等你用起來的時候你會覺得,真香。

1. 【交互元件庫】移動端元件庫 框架 數據表單

軟件版本:Axure8、Axure9、Axure10(通用)支持墨刀導入HTML文件

Axure移動端元件庫演示預覽地址:https://b3b0ax.axshare.com

Axure電腦端元件庫演示預覽地址:https://wui06c.axshare.com

元件庫圖片示例:

以上就是如何在Axure里充分利用元件庫快速搭建原型的介紹,希望能幫到您,感謝大家的閱讀,謝謝!

本文由 @PM_墨兮 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!