超实用!如何制作统一可复用iOS/Material Design元件库?(附源文件) - 优设网 - UISDC

超实用!如何制作统一可复用iOS/Material Design元件库?(附源文件)

2017/10/09 11716评论区

echo:文章对制作统一可复用的Axure元件库方法进行了相关的分享,希望对你有所受用。

阅读这篇文章你可以得到哪些?

  • iOS和Material Design(简称MD)元件库下载。
  • 通过源文件学习iOS和MD两大设计规范的组件控件体系。
  • 如何通过Axure元件库提高效率。

作者制作的元件库基本包含了两个系统的所有常用组件控件,适用于移动端绝大部分设计场景。同时所有元件都可再修改,方便大家使用。

下载地址:http://pan.baidu.com/s/1bpGqPcF

一. 统一可复用元件库价值

统一产品的用户体验:涉及到多个交互设计师/产品经理协同时,如果各个交互设计师/PM没有使用统一的元件时,会出现同一种类型不同的组件设计。视觉设计师最终没有强行统一,那么实现稿就会出现各式各样相似的组件。

提升工作效率:有了统一的axure元件库,交互设计师/PM可以快速根据元件库搭建界面,从整体的产品设计到开发流程环节提升效率,避免重复性工作。

提升设计综合能力:由于减少了做组件重复性劳动,交互设计师/PM 可以将更多时间和精力放在讨论业务、设计方法、设计思维、定义产品等综合能力方面。从而驱动业务产品创新。

二. 如何制作统一可复用的Axure元件库

打开Axure软件,在元件库面板中,点击快捷菜单按钮,选择「创建元件库」,如下图所示:

选择了「创建元件库」后,就会弹出一个界面,你需要选择一下元件库的保存路径。注意元件库的格式为:rplib。

在元件库创建页面中,操作跟平时使用Axure没什么区别,一个页面就是一种类型的元件,不要把所有元件都创建在一个页面里。

制作一套完整的MD和iOS元件库,需要熟知MD和iOS设计规范,然后综合我们的设计经验来制作一套全面和常用的元件。以下为元件库的部分内容:

MD的菜单(Menu)

MD的底部动作条(bottom sheets)和iOS的操作列表(action sheet)

iOS的Toast和MD的Snackbar

iOS的搜索栏和MD的搜索栏

iOS的警告对话框(Alert)和MD的对话框(Dialog)

MD的导航栏和iOS的导航栏

三. 如何使用统一可复用的Axure元件库

打开Axure软件,在元件库面板中,点击快捷菜单按钮,选择「载入元件库」,选择对应的元件库即可。

四. 通过源文件,学习iOS和MD两大设计规范的组件控件体系

通过iOS和MD的元件库的源文件的站点地图,即可掌握两大系统的组件控件目录体系,查看每个组件控件可以快速掌握两大设计规范的组件控件体系。

例如查看源文件的iOS的警告对话框(Alert)和MD的对话框(Dialog)的组件细节可快速掌握两大规范的两种组件的用法等。

欢迎关注作者的微信公众号:「UEDC」

「写给设计师的组件体系知识」


【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================明星栏目推荐================

优优教程网 UiiiUiii.com是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.uisdc.com

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/unified-material-design-component

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

界面设计 设计圈干货 排版布局 版式设计 职场 优设专访 优设大课堂 设计达人 设计师干货 web前端开发 配色 视觉设计 素材下载 AI教程 设计理论 设计流程 神器下载 字体下载 设计师专访 psd下载 海报设计 设计规范 设计趋势 用户体验设计 动效设计 logo设计 平面设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里