星期python 星期三怎么画_星期python


星期python 星期三怎么画_移动端日历插件_02


咱们先看下Axure画出的原型效果,然后再对该组件进行详细讲解。


星期python 星期三怎么画_移动端日历插件_03


一、组件介绍


星期python 星期三怎么画_移动端日历插件_04


二、实际案例


星期python 星期三怎么画_移动端_05


三、画出无交互原型

1、先画星期几。从默认元件库拖动“中继器”到工作区合适位置,命名为“星期几”。


星期python 星期三怎么画_星期python_06


双击进入中继器内部,点击矩形修改边框为0,尺寸修改为53*30,字色修改为#AAAAAA。


星期python 星期三怎么画_侧边栏_07


点击空白区域,右侧边栏切换到“样式”,在Column0列中依次输入“日、一、二、三、四、五、六”。


星期python 星期三怎么画_边距_08


点击空白区域,右侧边栏切换到“样式”,边距左侧2,右侧2。布局切换成水平,勾选网格排布,每行项目数量修改为7。


星期python 星期三怎么画_边距_09


2、再画日历。从默认元件库拖动“中继器”到工作区合适位置,命名为“日历”。


星期python 星期三怎么画_边距_10


双击进入中继器内部,点击矩形修改边框为0,尺寸修改为53*53,命名为“日期”。


星期python 星期三怎么画_移动端日历插件_11


点击空白区域,右侧边栏切换到“样式”,在Column0列中依次输入“1、2、3、4……”。注意还需要在前面添加5个空白行。


星期python 星期三怎么画_侧边栏_12


点击空白区域,右侧边栏切换到“样式”,边距左侧2,右侧2。布局切换成水平,勾选网格排布,每行项目数量修改为7。


星期python 星期三怎么画_边距_13


3、点击“预览”按钮,然后在浏览器中查看原型效果。


星期python 星期三怎么画_边距_14


Tips:设置中继器的边距左侧和右侧,是为了方便让中继器的整体宽度撑满屏幕375px。

四、画出有交互原型

4、双击中继器“日历”进入内部,点击“日期”按钮,右侧边栏切换到“交互”,点击“新建交互”按钮,添加事件“单击时”,添加动作“打开链接”,链接到“聊天详情”,点击“完成”按钮(提前新建相应的详情页面)


星期python 星期三怎么画_星期python_15


5、点击“预览”按钮,然后在浏览器中查看原型效果。


星期python 星期三怎么画_侧边栏_16


五、课后作业

画出该组件的常见交互样式,添加到自己的Axure元件库,方便后续画移动端原型的时候使用。


星期python 星期三怎么画_移动端日历插件_17