贵州新闻
当前位置: 主页 > 汽车频道 >

Axure教程 聊一聊原型组件化设计——从淘宝购物车按钮说起

时间:2019-11-06 14:49:56

  Axure教程 聊一聊原型组件化设计——从淘宝购物车按钮说起

     axure提供的组件库,给原型设计人员带了极大的方便。问题是axure本身提供的是最常用、最基础的一些组件,对于一些复杂的组件,或者比较个性化的组件,例如幻灯片效果的图片轮询,日期组件等,设计人员也是经常用到的。还有专门针对特定系哈尔滨哪家医院治疗癫痫比较正规统的组件,例如andr哈尔滨都有哪些治疗癫痫的医院oid UI,iOS UI。所以我们常常会需要自己来自定义一些组件,好在axure已经为设计人员想到了这一点,你可以创建自己的组件库,设计自己的组件,这样就可以复用了。

     组件就像积木一样,当设计好时,我们就可以使用它来搭自己想要的造型了,一些基础的,重复性的工作不必再花更多的时间来做。

     举个简单的例子,我们需要提供一下类似淘宝那样的橙色按钮,肯定不希望每次都来设置它的样式,最好是axure能提供现成的就更好了。那我们就把它做成组件呗,把交互样式设计好,大家都可以用,统一了规范,是不是带来了更高的效率了?

     对于多人协作的场景来说,统一规范是必须的,但又不能每个人都设计淘宝的按钮吧,可能导致每个人设计的按钮大小、颜色都不一致。所以只需要一个人设计好,大家复用就OK了。

     把要设计的组件的样式和交互统一武汉治疗癫痫大概要多少费用设计好,例如按钮的高度、宽度、背景颜色、鼠标经过时的样式,鼠标点击后的事件处理。

     如果我们设计的部件比较多的时候,我们可以给组件分类,在设计时建不同的文件夹,后期导入组件库时就会根据这个文件夹分类,方便使用。

     由于我们自定义组件时,经常是会组合使用多个形状的,在后期使用时,从组件库拖到设计区域时,如果不提前编组的话,组件的每个形状可以单独选择,不利于整体选择。

     我们在给组件中的形状需要命名时(不是每个都要命名,只给需要的命名,如果使用中文命名,在导出html页面后,如果上传到你的服务器来查看时,可能会不能正常显示。

     设计好的组件就可以使用了,有两种方式,第一种是将设计的组件库源文件放到axure的应用目录里,一般在“我的文档/Axure/Libraries”,直接放里面,重新打开axure就会自动加载了。另外一种方式是在axure里,使用导入菜单来导入,如下图:

     从axure默认的的组件库中,拖一个矩形到设计区域,注意放在设计区域的左上角位置,然后调整矩形到合适的高度和宽度

     对于淘宝这种橙色按钮,是一种扁平化的样式,所以我们去掉形状的边框,设置背景填充色为淘宝的橙色,文字颜色为白色,设置好字体大小,圆角半径为1。

     保存组件库,新建一个axure设计页面,在组件库的下载菜单里加载刚刚设计的组件库,拖动按钮到设计区域上,测试一下。

     人人都是产品经理(是以产品经理、运营为核心的学习、交流、分享平台,集媒体、培训、招聘、社群为一体,全方位服务产品人和运营人,武汉治疗癫痫哪个医院最好成立8年举办在线+期,线+场,产品经理大会、运营大会20+场,覆盖北上广深杭成都等15个城市,在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监,他们在这里分享知识、招聘人才,与你一起成长。

------分隔线----------------------------