axure页面交互(Axure交互设计)

这个作业是根据TIM登录界面截图画一个类似的原型。
以TIM登录界面为例。
一.分析
当我们只有这张截图的时候，如何用Axure做出和截图一样的原型界面？
首先，我们需要获得每个组件的长度、宽度和高度，以及相应的X轴和Y轴信息
其次，我们还需要知道每个组件中使用的颜色。
分析截图，我们把这个登录界面分为两部分，上半部分是“LOGO”部分，下半部分是“登录”部分。
二、UI设计步骤
将截图放入工作区，将X轴和Y轴设置为0，0。
1.在“徽标”部分标记组件的位置。如下所示：
将图片向右移动，并在标记区域添加一个符号。
1.1:背景区域：两个直角三角形和一个等边三角形(颜色选择器用于颜色选择)
1.2:LOGO、应用名称位置：根据标志线，添加LOGO、应用名称，(为什么右图的LOGO看起来是方形的，而左图是长方形的？因为右边的LOGO下面有一个勾，所以这个勾在标注的时候也要整体标注。)
2.在“登录”部分标记组件的位置。如下所示：
将图片向右移动，并在标记区域添加一个符号。由于登录部分有许多组件，我们需要分别查看它们。
头部：圆形，位于左侧，按X轴41px，周长81px；线上标记：圆形，位于左侧，x轴101px，周长12px；用户名和密码输入框：文本框，位于左侧，x轴133px，宽196px，高28px；所有图标宽26px，高26px；登录按钮：按钮(矩形)，与用户名和密码输入框对齐，31px高；好了，写下以上信息后，有了标记线，就基本可以准确的画出原型了，如下图：
第三，原型交互步骤
有了上面的原型，我们来做一个简单的交互。交互：用户点击“登录”跳转到登录界面，如下图：
这样，这个交互就简单了。我们只需要把登录界面转换成“动态面板”，点击登录就可以显示State2(登录界面)。为了使它稍微复杂一点，我们将用户名设置为“1234”，密码设置为“1234”，如下所示：
F5预览，可以。
备注：您可以根据自己的需要添加各种用例以供后续使用。
本文由@布兰妮斯皮尔斯原创发布。每个人都是产品经理。未经许可，禁止复制。
来自Unsplash的图像，基于CC0协议。