• banner1
  • banner2
  • banner3
当前位置:主页 > 产品案例 >

Axure 原型设计:从一个简单的H5活动页面窥探 Axure 设计中的“

来源:http://www.shlhuojia.com 责任编辑:ag88环亚娱乐 更新日期:2019-02-02 11:15

  Axure 原型设计:从一个简单的H5活动页面,窥探 Axure 设计中的“支纷节解”

  产品小白专属,10周线上特训,测、练、实战,22位导师全程带班,11项求职服务,保障就业!了解详情

  本文作者将与我们分享:如何用Axure将H5活动页面制作出来,在此并不谈论这个页面交互上的合理性。enjoy~

  近日,开发了一个H5的活动页面,当时只简单的画了个线框图,凯发k8。活动上线以后,不玩游戏且单身的我,由于下班后闲来无聊(你看,为了防止眼高手低的键盘侠喷“研究Axure有啥意义”,逻辑严密的本产品经理加了多少限定条件),便又花了点时间做了个高保真的原型,如下(为避广告嫌疑,替换了所有的图片和文本):

  如各位所见,确乎是个比较简单的页面,但无数比我这做的还简单,甚至简陋的页面,都有人拿出来写了文章,而且大部分写作套路都是上来就第一步第二步第三步,看过之后等自己想要重复,就仿佛进入了北京的雾,只好求“大神”发个源文件,以供后面学习(抄袭),很好的印证了“听过很多道理,却依旧过不好这一生”,甚至抄都抄不好这一生,虽然我十分羞愧,因为我也没抄好,不对,是过好这前半生,但最终我还是没能免俗,也来学学别人一步两步的整点套路。

  当然,本文不谈论这个页面交互上的合理性,纯从怎么样用Axure将它制作出来来展开分析。

  于是,情不自禁的将手指在屏幕上往上一拖,又是一个页面,底部的箭头依然在抖啊抖,继续拖

  拖了几页以后,底部的箭头没了,但由于之前拖出了惯性,没刹住车,所以还是下意识往上拖了一下,或者是及时刹住了车,看到了页面上的引诱点击的区域,就去点了下,于是页面就弹出了一个窗口,上面写了一段话,和一个硕大的分享按钮

  于是被文字信息所继续诱惑,暗想都滑了这么多页了,索性再去分享一下,就下意识去点分享图片上的分享按钮,众所周知的是微信里是不支持直接点击分享的,必须通过微信自带的分享按钮进行分享,但由于担心有的用户还不知,于是又一个蒙层提示用户得去通过微信右上角的按钮然后再去分享,至于最终用户是否分享,就看缘分了

  因为有拖动,所以第一想到的就是使用动态面板;由于拖动结束或者过程中,页面会发生改变,所以应该是动态面板里会有多个状态;然后不同的页面分属不同的状态,在拖动相关的事件里去添加设置面板状态的相关动作

  说明需要整一个东西用来控制可见的范围,比如把拖动的那个动态面板嵌套在固定尺寸的动态面板里

  结合前面的分析,可以采用在动态面板的最后一个状态里,做一些特殊的处理,比如向上拖动结束时的事件会添加出现弹窗的动作

  结合前面的分析,说明在动态面板的最后一个状态里,要设置点击事件,并添加出现弹窗的动作

  说明向上拖动结束时,弹窗应该要隐藏,或者是将动态面板的状态切换为某个初始状态

  在弹窗上面点击分享,会出现一个灰色蒙层,再次点击灰色蒙层,蒙层会消失。

  动画效果可以拆分为箭头出现,箭头上移,箭头隐藏整个过程,然后一直循环,如何循环呢,这个需要加以思考

  到上面为止,可以说基本上思路和操作方法已经很明确了,基本上盘子里切好的每块肉,都可以一口送嘴里去了,那就可以着手在Axure里进行编写了,接下来,我省略掉部分非关键步骤,给大家看下具体应该怎么去实现,去实现的时候要注意对照着上面的分析去思考下应该怎么实现,而不是只要想着照抄步骤,毕竟再权威的人说的都不一定对,别人说的也不一定好,甚至大家可以自己想出更好的方案:

  根据之前的分析,蒙层的逻辑是建立在弹窗出现的逻辑之上的,而且蒙层只有显示和隐藏这两种状态,鉴于上面一步弹窗的设计,那蒙层就比较好处理了,首先要注意图层的顺序,就是蒙层需要在弹窗的上方,然后只需要在弹窗状态的情况下,根据不同的情况去设置蒙层的显示和隐藏即可(对分享按钮设置点击事件,添加蒙层的显示动作,对蒙层本身设置点击事件,添加蒙层的隐藏动作)。

  当箭头处于位于动态面板下方状态时,则让箭头变为处于动态面板上方的状态,同时用一个动画来切换状态,这样就有一种箭头从下方往上移动的效果,移动完成以后,将箭头隐藏;而当箭头处于位于动态面板上方状态时,则让箭头变为处于动态面板下方的状态,这样的线的逻辑,但如果只这样设置的滑,预览的时候会发现箭头依然没有动,这是因为我们没有对动作进行触发,所以需要再添加一个事件

  至此,整个页面的逻辑就算完成了,可能有的人看了之后,还觉得有的地方不太明白,建议大家再回过头去看下,其实核心的思想就是将页面逻辑拆分,拆分到每个元件、事件、动作都是你熟悉的,就可以了,所以这里也可以看出来,对于一些基本的原件、事件、动作,还是需要有一定的掌握,不然就会导致即使你将页面拆分到很小的一个一个逻辑,但是依然没有办法下手去进行整合的情况。

  人人都是产品经理(是以产品经理、运营为核心的学习、ag88环亚娱乐交流、分享平台,集媒体、培训、招聘、社群为一体,新闻速读环亚娱乐ag88!全方位服务产品人和运营人,成立8年举办在线+期,线+场,产品经理大会、运营大会20+场,覆盖北上广深杭成都等15个城市,在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监,安普生物:关于补发涉及重大诉讼!他们在这里分享知识、招聘人才,与你一起成长。

Copyright © 2013 ag88环亚娱乐_www.ag88.com_ag88环亚国际娱乐_环亚娱乐ag88真人版 All Rights Reserved 网站地图