恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
附源文件| 如何制作统一可复用iOS/MD元件库
0.0°
2017-11-10 原创文章 规范/资料 举报 6681 323 355 10

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

1.iOS和Material Design(简称MD)元件库下载

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

3.如何通过Axure元件库提高效率


文章大纲:

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

2.iOS和MD元件库使用范围及下载地址

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

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

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


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

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


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


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


2.iOS和MD元件库使用范围及下载地址

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


由于我制作的元件库是将一个组件多种类型全部罗列出来(保证组件的全面完整性),设计团队为了统一性可定义某种使用场景用某种组件中的某一类。

Image title

Image title

1.百度网盘:https://pan.baidu.com/s/1jIACRHW    提取码 8des


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


3.如何制作移动端统一可复用的axure元件库

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

Image title


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

Image title


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

Image title


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

MD的菜单(Menu)

Image title

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

Image title

Image title


iOS 的toast和MD的snackbar

Image title

Image title

iOS 的搜索栏和MD的搜索栏

Image title

Image title

ios版本的导航栏和Android的导航栏

Image title

Image title

ios版本的对话框和安卓版的对话框

Image title


Image title

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

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


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

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


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







更新:2017-11-10

收藏

323人已收藏

UEDC

欢迎大家关注交流

  • 7

    作品

  • 301

    粉丝

  • 19

    关注

  • APP设计中,6组常见组件的区别与用法
  • 以手机淘宝为例,看原型图易缺失的交互场景
  • 我在ITUX做交互设计的经验感悟
  • 案例讲解 | 移动端的长表单应该如何设计?

    猜你喜欢

      2017-11-10 原创文章 规范/资料 举报 6681 323 355 10

      附源文件| 如何制作统一可复用iOS/MD元件库

      0.0°

      你确定要举报附源文件| 如何制作统一可复用iOS/MD元件库

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年11月09日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      355
      323
      10

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录