从Ant Design组件库看Axure与交互设计 获赏10金币 基础教程

东方夜明 普通用户 2019-10-30 2269


从Ant Design组件库看Axure与交互设计

想法的来源

最近在忙一个项目,前端UI框架想采用Ant Design,我从官网的Axure资源去搭建我的项目。
需要我去做的工作有:熟悉Ant Design的框架组件以及设计思维;梳理业务逻辑;用官网Axure元件库搭建高保真项目原型。
这个熟悉Ant Desgin过程中,受益匪浅,下面把我的一些思考分享出来。
分享内容包括:用Axure去搭建Ant Design基本教程;对Ant Design中的一些组件交互的思考。

Ant Desgin组件库的简单介绍

组件是什么?
如果你经常浏览各种网站,就会发现不管网页的主题是什么,通常都会使用一些重复出现的构件,比如日历、表格、表单、菜单、卡片、导航栏等等。这些构件的功能和外观都很类似,只是在一些细节的地方,根据需要做了定制。它们就叫做组件,一张完整的网页,可以看做是不同功能的组件的集合。

而Ant Design组件库是把常用的组件都封装好,让开发者在网页开发时,用不同的组件像搭积木那样组合起来,用更简单的方式去开发。

组件案例分析

在网页开发中,如果说哪个组件最常见,那无疑是“Button按钮”了,下面以此为例进行说明。

Button按钮案例

分段器按钮的交互效果


交互分析

从上面GIF动图中,我们看到Ant Design的分段器按钮交互极为细腻,交互动作包括:未选中按钮的鼠标悬停、未选中按钮的鼠标按下、选中、获取焦点、选中按钮的鼠标悬停、选中按钮的鼠标按下、以及禁用。

交互样式整理



Axure中的具体操作

方法1

1、从元件库中拖入矩形,并设置好矩形的填充颜色、字体颜色、线段颜色。



2、右键矩形,选择交互样式,弹窗。



3、分别设置鼠标悬停、鼠标按下、选中、禁用、获取焦点的矩形样式。

4、注意:此种方法无法实现分段器按钮的的交互效果。如果要实现可借用动态面板的状态切换来实现(见方法2)。

方法2

1、从元件库中拖入5个矩形(1至5号矩形),分别设置好不同的交互样式,并分别让如同1个动态面板的5个状态中。
动态面板状态以及按钮交互样式分别为:


2、1号矩形设置交互事件如下图:


2号至5号矩形交互事件设置同1个(设置假交互样式,目的让鼠标悬停会变成小手),如下图:


3、设置整个状态面板的交互事件如下图:


4、完成查看交互效果,如下图:

思考

在做高保证原型时,我的思路是先做好所有需要用到的高保真元件,然后再用这些高保真元件去组合成交互原型。
对于分段器按钮的思考,框架组件中有个细节引起了我的注意:一般情况的按钮最多设置鼠标悬停、鼠标按下、选中、禁用、获取焦点等交互样式。而框架中的分段器按钮,在选中之后,然后鼠标再悬停,按下,也会有不同的交互样式变化。
在网页设计中,对于按钮,鼠标悬停的样式变化是让我们知道这个按钮是可以点击的,鼠标按下是让我们知道这个按钮当前是被我们按下了。
而一般的系统都不会设置在按钮选中后,还有鼠标悬停和鼠标按下的交互变化。
Ant Design组件库中的分段器按钮做到了这点,足见设计团队的用心。 这是值得我们学习的。


登录后回复
打赏排行 用户名 打赏金额
第1名 沈十三 10金币
最新回复 (1)
  • 沈十三 管理员 2019-10-30
    0 引用 2
    感谢分享,获得10金币奖励!
返回
发新帖
AxureShop
AxureShop
AxureShop