• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >axure > Axure教程 | 聊一聊原型组件化设计——从淘宝购物车按钮说起

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

作者: @Axure原型设计工场  字体:[增加 减小] 来源:互联网 时间:2017-06-14

本文主要包含淘宝购物车,淘宝购物车营销在哪里,淘宝购物车营销,返利 淘宝 购物车,淘宝购物车打不开等相关知识, @Axure原型设计工场 希望在学习及工作中可以帮助到您

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

gpouwuv

一、为什么要设计组件

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

1、一次设计,重复使用

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

淘宝橙色按钮的样式

2、协作与共享

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

二、组件库设计要点

1、样式和交互

把要设计的组件的样式和交互统一设计好,例如按钮的高度、宽度、背景颜色、鼠标经过时的样式,鼠标点击后的事件处理。

交互样式设计

2、组件库的分类:常用、业务分类、图标

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

建立文件夹和导入后的效果

3、组合形状:便于选择

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

组件编组和选择

4、给组件中的形状命名:尽量不要使用中文

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

给形状命名

三、组件库的导入

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

导入组件库

四、实践:从交互式按钮开始

1、新建组件库

打开axure,从组件库的下拉菜单中选择创建组件库

导入组件库

2、拖动矩形到设计区域并调整大小

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

拖动矩形到设计区域

3、设置边框、填充颜色和文字颜色

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

设置边框、填充颜色和文字颜色

4、设置交互样式

右键选择形状,从弹出菜单中选择设置交互样式:

设置交互样式

设置鼠标经过时,背景填充色加深

设置鼠标经过时的按钮样式

5、测试一下

可以F5预览一下效果,试试鼠标经过时是否和淘宝的按钮样式一致。

6、加载组件库,实际测试一下

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

加载我的组件库

小结

关于组件库的设计,及简单实践的内容到这里结束了。

通过组件化设计,可以极大地提高原型设计的效率,并且有利于协作哦!

您可能想查找下面的文章:

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

相关文章

  • 2017-06-13Axure教程:移动端原型如何适配不同分辨率的手机?
  • 2017-06-13Axure 8.0 实例 | 模拟一个上传图片的原型
  • 2017-06-14五分钟教你快速上手Axure交互设计
  • 2017-06-13Axure教程:实现倒计时获取验证码效果
  • 2017-06-13Axure实例:制作一个通用的移动端内容滚动区
  • 2017-06-14Axure8.0小案例:手把手教你画挖掘机
  • 2017-06-14用Axure 实现“打飞机”,骚年,来一发(上)
  • 2017-06-14用Axure8.0制作简单的登录窗口
  • 2017-06-14Axure7.0教程(六)math函数的使用(1)动态面板环状移动
  • 2017-06-13Axure教程:原型设计之水泡导航栏

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Axure教程 | 知乎注册与登录原型
    • Axure教程:动态面板实现广告循环播放
    • Axure教程:原型实战之模拟拼图效果(变量、动态面板、参数…全面实战应用)
    • Axure基础教程—文本框用法
    • Axure教程:原型设计之播放控制条
    • Axure教程:原型设计之侧滑菜单
    • Axure教程:如何制作炫酷高效的元件库?
    • Axure教程:滑动鼠标页面自动切换(一)
    • Axure教程|原型设计之抽屉列表
    • Axure教程|购物车商品增减删除练习

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有