如何製作可復用iOS/Material Design元件庫?(附源文件)

2021-02-23 UI設計達人

轉自：UEDC（ID：uxecho）

作者：Echo

文章大綱：

1.統一可復用元件庫價值

2.iOS和MD元件庫使用範圍及下載地址

3.如何製作統一可復用的Axure元件庫

4.如何使用統一可復用的Axure元件庫

5.通過源文件，學習iOS和MD兩大設計規範的組件控制項體系

1.統一可復用元件庫價值

1.統一產品的用戶體驗：涉及到多個互動設計師/PM協同時，如果各個互動設計師/PM沒有使用統一的元件時，會出現同一種類型不同的組件設計。視覺設計師最終沒有強行統一，那麼實現稿就會出現各個各樣相似的組件。

2.提升工作效率：有了統一的axure元件庫，互動設計師/PM可以快速根據元件庫搭建界面，從整體的產品設計到開發流程環節提升效率，避免重新性工作。

3.提升設計綜合能力：由於減少了做組件重複性勞動，互動設計師/PM 可以將更多時間和精力放在討論業務、設計方法、設計思維、定義產品等綜合能力方面。從而驅動業務產品創新。


2.iOS和MD元件庫使用範圍及下載地址

作者製作的元件庫基本包含了兩個系統的所有常用組件控制項，適用於移動端絕大部分設計場景。同時所有元件都可再修改，方便大家使用。

由於我製作的元件庫是將一個組件多種類型全部羅列出來（保證組件的全面完整性），設計團隊為了統一性可定義某種使用場景用某種組件中的某一類。

下載方式

1.百度網盤：https://pan.baidu.com/s/1jIACRHW    提取碼 8des

2.微云：https://share.weiyun.com/f8bad9b61f5b042bc2820da6f173020c    提取碼 4UnbpN

3.進入公眾號聯繫作者索要


3.如何製作統一可復用的Axure元件庫

打開Axure軟體，在元件庫面板中，點擊快捷菜單按鈕，選擇「創建元件庫」，如下圖所示：

2. 選擇了「創建元件庫」後，就會彈出一個界面，你需要選擇一下元件庫的保存路徑。注意元件庫的格式為：rplib

3. 在元件庫創建頁面中，操作跟平時使用Axure沒什麼區別，一個頁面就是一種類型的元件，不要把所有元件都創建在一個頁面裡。

4.製作一套元整的MD和iOS元件庫，需要熟知MD和iOS設計規範，然後綜合設計經驗來製作一套全面和可復用的元件。以下為元件庫的部分內容：

MD的菜單(Menu)


MD的底部動作條(bottom sheets)和iOS的操作列表(action sheet）


iOS 的toast和MD的snackbar

iOS 的搜索欄和MD的搜索欄


iOS的警告對話框(alert)和MD的對話框(dialog）


MD的導航欄和iOS 的導航欄


4.如何使用統一可復用的Axure元件庫

打開Axure軟體，在元件庫面板中，點擊快捷菜單按鈕，選擇「載入元件庫」，選擇對應的元件庫即可。

5.通過源文件，學習iOS和MD兩大設計規範的組件控制項體系

通過iOS和MD的元件庫的源文件的站點地圖，即可掌握兩大系統的組件控制項目錄體系，查看每個組件控制項樣式可快速掌握兩大設計規範的組件控制項使用方法。

例如查看源文件的iOS的警告對話框(alert)和MD的對話框(dialog）的組件細節可快速掌握兩大規範的兩種組件的用法等。

關注『UI設計達人』

看更多精選UI設計文章

↓↓↓

相關焦點

  • 附源文件 | 如何製作可復用iOS/Material Design元件庫?
    1.iOS和Material Design(簡稱MD)元件庫下載2.通過源文件學習iOS和MD兩大設計規範的組件控制項體系3.如何通過Axure元件庫提高效率文章大綱：1.統一可復用元件庫價值2.iOS和MD元件庫使用範圍及下載地址3.如何製作統一可復用的Axure元件庫4.如何使用統一可復用的Axure元件庫
  • 20個非常棒的Material Design設計概念案例
    自從去年google在android新版本Lollipop提出的material design概念後，在世界各地瘋狂地掀起一陣material design熱。Material design不僅看起來令人驚嘆，也是一個前所未有的設計理念。不僅對設計師的影響深大，對開發人員亦是。現在普遍流行的應用程式都採用這種新的設計理念，並且android端上的APP也是採用material design這種設計理念。對於那些還尚未採用這種設計理念的App，這裡我提一些自己的概念。
  • 中繼器&三角函數繪製高復用折線圖
    本文將講解如何通過中繼器與三角繪製一個折線，並實現高復用（做簡單的改變即可適應於不同的需求，如改變數值直接改變折線的樣子，文末附源文件下載。）原型界面：中繼器對應的數值：最終html效果:現在我們就來看看如何實現呢？
  • design_電子產品世界
    微波頻段的2+1頻分復用(FD)的多工器實例進行驗證，實現311.32 MHz收發間隔、28 MHz信號帶寬的三工收發，且仿真與測試結果較為吻合，設計方法合理、有效。150個流行的功率IC和元件的時域仿真模型組成。
  • material2 發布 7.0.1,Angular 的 Material Design 風格框架
    Angular 的 Material Design 風格框架 material2 發布了 7.0.1 版本，這主要是一個 bug 修復版本：Bug 修復
  • 手機端iOS&Android模態界面對比【2019新版】
    ，「模態界面」簡單的判斷方法為：在主界面基礎上出現的界面，且必須操作（包括關閉、取消等）後才可返回主界面。>背景在APP中顯示在所有內容的最下面，展示上下文和可操作內容。官方地址：https://material.io/design/components/menus.html4.模態底部層（Modal bottom sheet）
  • 同事要源文件該不該給?
    本文從源文件流失的隱患、如何處理這類問題、後期如何完善項目文件管理等幾個維度進行分析，希望可以帶給你更多幫助。 一、源文件流失的隱患 在之前遇到一個學員來給我反饋一個問題，就是她在項目中的作品被另一個離職後的同事整理髮布到設計平臺上用於應聘，應該怎麼處理。
  • 如何用Axure快速製作APP交互原型
    其中，作為一個專業的快速原型設計工具，Axure RP無疑在產品人心中擁有一個難以撼動的地位。但就要PS一樣，雖然足夠專業，但同樣也會存在使用靈活性的一些問題。今天我們就談談，如何用Axure快速製作APP交互原型，不對，更準確的說法應該是：如何用Axure快速製作一份有水準的APP交互原型。作為一名優秀的產品人不僅要保證效率，也要保證質量才行。
  • AD PCB模塊復用
    https://www.cnblogs.com/brianblog/在畫圖的時候如果遇到PCB中有多個模塊原理圖是一模一樣的時候，我們便會想能不能偷點懶，只畫一個模塊，其他的直接復用一下呢？答案是可以的。接下來介紹AD中是如何實現這一操作的。
  • 想要製作自定義的ADS設計套件嗎?先來看看ADS原理圖元件庫的製作過程
    該庫結構可用於任何技術或工藝，以打包和分發可重用的元件集。利用本文提供的信息，任何人都可以創建用於ADS的設計套件。所以，設計套件可以是Foundry提供的PDK，也可以是設計公司或系統集成商自己開發的Design Kit。
  • 利用Symbol 建立一套設計規範組件庫?
    △ 圖片來自Sketch手冊將一組風格元素保存為 Layer Style，這些元素便可復用在文檔中的任何圖層。圖標規範中，可根據圖標尺寸、業務場景、圖標功能等進行層級區分，筆者根據圖標尺寸來區分層級（暫不考慮最小可交互區域）：在製作圖標規範時，需要根據設計師自身情況作出相應調整。
  • 淺談可移植激勵規範(PSS)復用策略
    然而，即使是像Java和C++這樣擁有強大的面向對象特性的程式語言，都不能直接保證我們能得到高質量的可復用的代碼，PSS本身的語言特性也同樣需要工程師按照一定規範使用才能達到高效復用的目的。如果我們正確的使用這些特性，實現設計IP和測試目的的復用，能夠顯著減少其所消耗的時間成本。
  • ios描述文件怎麼刪除?刪除iOS12公測版描述文件的方法
    通過ios描述文件來升級相應的系統版本，是許多蘋果手機用戶都會選擇的系統升級方式，不過，在升級最新系統之後，需要把手機中原有系統的ios描述文件刪除掉，那麼，ios描述文件怎麼刪除？我們就以最近發布的iOS12公測版描述文件為例子進行講解，下面，給大家帶來刪除iOS12公測版描述文件的方法！
  • Axure元件庫(中篇):以項目案例證明,3個嵌入策略搭建產品總監的...
    人治就是耳提面命的監督他們，每天做培訓、講道理、管任務；法治就是通過制度和工具，讓產品經理可自我成長；本專題採用一個「Axure元件庫」作為抓手，構建一個法治管理體系，幫助產品負責人用一種潛移默化的管理動作去帶領產品經理；從而降低管理成本，提升管理效率。
  • 每日學習:數字IC物理設計流程和庫文件的準備
    2.10流片（Tapeout）在所有的檢查和驗證都準確無誤的情況下，把最終的版圖GDSII文件傳遞給流片廠進行掩膜版製造。在現在的晶片行業，多數採用Fabless模式，即晶片設計與晶片製作是獨立開來的，foundry專注於晶片的生產製造，而fabless專注於晶片的設計。
  • 9個非常實用的CSS圖標庫
    1、Iconfont阿里巴巴矢量圖標庫，Iconfont-國內功能很強大且圖標內容很豐富的矢量圖標庫,提供矢量圖標下載、在線存儲、格式轉換等功能。阿里巴巴體驗團隊傾力打造,設計和前端開發的便捷工具。Iconfont平臺為用戶提供在線圖標搜索、圖標分撿下載、在線儲存、矢量格式轉換、個人圖標庫管理及項目圖標管理等基礎功能。
  • Material Design控制項使用(二)
    本篇接著之前的Material Design控制項總結(一)往下學習support design包下其餘控制項,如果對Material
  • iOS 14如何升級?iOS 14描述文件下載升級指南
    [PConline 技巧]iOS 14要如何升級？蘋果發布了最新的iOS 14，不過目前iOS 14仍處於beta階段，需要用描述文件才可以升級。那麼iOS 14的描述文件要怎麼下載？要怎麼用描述文件升級到iOS 14？這就來為大家介紹一下吧。
  • mbeb可穿戴設備參考設計--資料全開源
    應用編程採用「mbed Wearable Reference Design mbed（可穿戴參考設計）」硬體抽象API，並實施到一個可支持的目標上並自動適配到目標平臺。這種方式使軟體應用在mbed所支持的硬體特徵上的優勢得以凸顯。這些靈活性讓你能僅僅在JSON文件中修改一行，就能快速建立新的硬體外設原型。