画出初稿后,我用移动端交互设计好帮手POP拍照添加交互效果,进行使用模拟。
虽然不会开发,但是用POP模拟出来的感觉跟真的APP一样一样的哈~
模拟的过程中,发现了不少画图时没有注意的细节,发现了不少应该加以优化的地方。
这些需要优化的地方,虽然有部分利用POP和Axure都不容易添加效果,但是通过模拟中对页面的每个元素的交互的思考添加和实际感知,还是获益匪浅。
真正每个地方都点一次,才知道原来还有那么多细节在原先的设计中没有考虑到o(︶︿︶)o
现在列举下面几点作为例子:
- 统计tab下总账户、平台、交易三层次的展开和收起的交互。
- 切换tab时各页面显示保持惯性,显示不变。
- 各tab下左上角头像点击后,在未登录态下应进入登录页面,登录态下进入帐号信息页面。
- 更多tab下的数据同步,进行同步前应该判断是否处于登录态,只有处于登录态才可以同步,否则需引导用户进行注册或登录。
- 首页tab待处理部分,点击后跳转到日历模式的明细tab,并且定位到最早一条待处理的明细。
- 通过滚动轴选择选项的方式,一定要一个“确定”按钮来确定结果,而不能以滚动到的位置作为最终结果。
总的交互原则是:
- 应用的四个tab之间与记账下的四种类型之间可以通过左右滑动切换页面,点击具体选项或左右滑动切换的交互都是左右滑动来展示新页面
- 除此之外的所有页面则采用模态视图,统一用向上滑出,向下收起的交互方式。
- 输入框作为非全页面的控件,其出现与消失与其展示的位置一致,也是向上滑出向下收起。
上述有好几点最终我还是没能在POP或之后的Axure中添加成功。
但我发现了不足之处,心中知道最终的效果应该是怎样滴,只不过我POP和Axure的能力还不够而已(┬_┬)
POP应用在国内分享的时候不太好用,经常打不开哎。
POP原型链接:https://popapp.in/w/projects/54450e272a46de671346e45c/preview
总之,由于POP会自适应你的手机屏幕的大小,操作又简单,所以还是很好的设计利器滴~~
我晒POP的时候,同事还推荐了flinto,试了下也很不错,之后可以哪次练练兵~~
由于POP的分享不便,我还是抽了一天的时间做了下Axure原型,但是还是比较粗糙,省略了不少地方的交互细节。
比如,Axure7.0虽然可以在动态视图上添加左右滑动的效果,但是不同动态视图之间会有影响,所以我在Axure的原型里把左右滑动都省去了。
如果有疑问,请回到前面看总的交互原则。
Axure原型链接:http://jfz6ce.axshare.com,密码是123456
正式工作的话,最好再找几个用户试验下你的原型,尽早发现问题,在原型上改终归比改开发要成本低得多~~