快好知 kuaihz订阅观点

 

用Axure制作Material Design的APP原型(附元件库下载)

做Material Design风格的原型,首先是你对它的设计风格喜欢并且热爱,这里就不解释什么是Material Design了。如果对设计规范不了解,也可以先看一下Material Design的设计规范中文版。熟读,最好是烂熟于心。

原型目的,也可以说要解决的问题:

降低与设计方面沟通成本。

需求阶段能让开发预知技术难度。

提高原型可读性和可操作性。

元件

好的元件库能让原型制作的效率事半功倍,最好用的元件库是自己做的元件库。当然,如果懒得做也可以用我的(文末有下载)。

图里展示的是一些常用的元件。样式、尺寸和交互效果已经设置好了属于那种改改文字就可以用的傻瓜式元件库,即使完全不了解Material Design的设计规范也能比划个差不多。

举个栗子,从这里随手拉出来几个元件就能拼成一个页面。

经过Markman标注之后,对照设计规范来看更清晰。

我自己手里的项目也是用这个元件库来画的,这里就不展示了。

制作技巧

1. 网格设置中,把间距设定为8px。Material Design中,8px是比较常见的距离和尺寸单位。这样在拖动或放大元件时,方便控制元件的间距和尺寸。

2. 母版的运用:可以将一些全局功能,比如搜索、抽屉栏、设置按钮、做成母版。哪个页面需要就直接把做好的母版拖进去。比如这个搜索:

[点击前]

 

[点击后]

这个搜索的母版范围是整个页面。这样的话,原型制作完毕,哪个页面需要搜索,直接把搜索母版拖进去。再更新原型文档时,注意设置好面板层级顺序。当然也有其他方法,比如点击了搜索按钮直接进入全新的搜索页面,这需要由产品的交互来确定。

3. 有意识的控制一个页面中动态面板的是用数量。一个页面中的动态面板不要太多,过多的动态面板会使原型制作效率降低,对原型的更新和再次维护的难度也在增加。

4. 统一交互的动效时间。在我的原型中,有两个固定动效时间300ms和500ms。300ms作为短动效时间,如列表的展开收起,snackbars的显示/隐藏等。500ms作为长动效,用在提示框的显示/隐藏等。合理的动效能让原型更完整,合理的动效时间能让原型更优雅。这是加分项,没有也无所谓。

这篇就先这样,之后如果想到什么再补充。

对了,我不是交互设计师,如果有不足之处欢迎批评指正。

元件库:http://www.pmdaniu.com/rplib/detail/849

更新:在 GitHub 上也提交了,感兴趣咱们可以一起更新呀

https://github.com/wangye1989/Material_Design_Axure_Library

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:原型  原型词条  元件  元件词条  Material  Material词条  制作  制作词条  Design  Design词条  
原型

 PRD1.0分享:全面通用的移动...

花了大概1年整理出一份全面通用的移动端产品需求文档,包含了我多年产品经验以及对业务的理解,对技术原理的涉及。命名为浪子PRD1.0,请查看全文后再直达源网址。这...(展开)

原型

 Axure的这些实用技巧,你都知...

在评估一位产品新人的原型时,发现对方竟然不知道Axure的很多实用技巧,导致很多效果都是用极其复杂或者笨拙的方式实现。Axure是产品经理的必备工具之一,熟练使...(展开)

原型

 Axure教程:如何制作3D动效...

早几期文章,我说没有我做不出的交互,于是有同学加我微信,说老师你能实现这个3D效果吗?我本来想怼她一顿,这是平面软件,但是一气之下我就把她说的3D效果做出来了。...(展开)