全国服务热线:18980020603 成都热线:028-86633922
新闻中心网站专题联系我们
行业新闻 建站经验 网站建设资讯 手机网站资讯 微信网站建设资讯 APP开发资讯 商城网站资讯

成都手机网站建设:Axure移动端广泛应用的菜单吸附设计

发布人:桔子科技    发布时间:2017-09-12 07:23:36    分享到:
文章分享了制作移动端广泛应用的菜单吸附设计的一个操作过程,希望对大家有所帮助。

如今移动互联网时代愈演愈烈,微信、QQ等社交软件的大幅度应用,加之共享经济的推动,用户使用移动端(手机+pad)的频度越来越大,这就要求产品在满足用户需求的前提下,增强用户体验,让用户发
自内心的觉得这个产品好用、实用、方便操作…这样才能更大程度的留住用户。

\

下面是移动端广泛应用的菜单吸附设计,希望对大家有所帮助,PC端与移动端类似。

效果图预览:Axure 8.0:移动端菜单吸附

第一步:Axure内放置基本的控件

  1. 手机外壳:一张图片,可根据个人喜好选择一款手机的外壳,效果无影响,楼主比较喜欢iPhone6(因为很大),以下全部尺寸按照iphone6的尺寸进行设置,不再说明

  2. 屏幕动态面板:跟手机屏幕一样大小的动态面板,放在手机屏幕正中间,命名为“屏幕”,尺寸:376X667

第二步:设置“屏幕”中“内容”面板中的元素

在“屏幕”动态面板中的state1中放置一个内容动态面板和3条水平线作为界限,命名为“内容”“界限”“上限”“下限”

  1. 内容:动态面板,置于(0,0)位置,尺寸376X1050,高度必须超过屏幕高度,具体根据实际情况进行设置,可以尽可能高一些,效果明显;在该动态面板的state1中,顶端放置一张图片表示banner,中
    间放置5个矩形框表示菜单,文字随意设置,下方用占位符表示主要内容

  2. 界限:水平线,置于(0,-215)位置,尺寸376X1,表示向上拖动的最大边界

  3. 上限:水平线,置于(0,0)位置,尺寸376X1,表示原始位置

  4. 下限:水平线,置于(0,667)位置,尺寸376X1,表示向下拖动的最大边界

  5. 顶端菜单:将之前做好的菜单复制粘贴,置于(0,0)位置,初始状态设置为“隐藏”

第三步:为“内容”添加第一个交互用例

移动端操作基本为拖动、滑动

用例条件:“内容”接触到“界限”

操作:垂直拖动“内容”动态面板,使顶部边界小于等于“上限”的y轴位置,底部边界大于等于“下限”的y轴位置

执行动作:显示“顶端菜单”

条件设置:如果“内容”接触到“界限”

由于“上限”和“下限”的位置都已经固定,因此直接输入相应数值即可,如果存在参数或者变量,需点击“fx”设置相应条件

第四步:为“内容”添加第二个交互用例

用例条件:“内容”未接触到“界限”

操作:垂直拖动“内容”动态面板,使顶部边界小于等于“上限”的y轴位置,底部边界大于等于“下限”的y轴位置

执行动作:隐藏“顶端菜单”

至此,我们已经做完了菜单吸附交互,可以点击预览效果啦。

本文是成都网站建设公司、成都网站设计制作公司、成都APP开发公司、成都响应式网站建设、成都VR全景制作-桔子科技公司为您整理!
成都网站建设,成都网站设计,成都网站制作,成都网页设计,成都网站建设公司 ,成都网站设计公司,成都网站制作公司,成都网页设计公司,网站建设网站制作网站设计网页设计成都响应式网站建设、成都响应式网站制
作、成都响应式网站开发、成都全景制作、
成都VR全景制作成都手机网站建设,手机网站建设,成都APP开发,APP开发,成都建网站,成都做网站,成都商城网站建设,集团网站建设,网站建设,高端网站建设,品牌
网站建设,成都平台网站建设,成都响应式网站建设,
成都微信网站建设,成都微商城网站建设,成都微信营销,成都微信小程序开发、成都网站优化,成都网络公司。

下一篇:成都手机网站建设:手机网站中面包屑导航存在的必要性上一篇:成都手机网站建设:Android操作系统和iPhone的抉择

最新案例
手机/微网站
  1. [成都]微信网站建设:微信分销系统能为商铺带来哪些特色服务
  2. [成都]微信网站建设:如何通过微信公众号来推广产品
  3. [成都]微信网站建设:微信开发都有些什么功能
  4. [成都]手机网站:手机网站设计需要达到什么效果
  5. [成都]手机网站:手机网站响应式网站解决方案
  6. [成都]手机网站:手机网站响应式网站解决方案
网络营销
  1. APP开发: APP网页评分功能设计
  2. APP开发:手机APP开发前这4点必须要了解
  3. APP开发:为什么企业要做手机APP
  4. APP开发:你可以更好的留住APP用户
  5. APP开发:开发时间的长短主要由哪些因素决定
  6. APP开发:电子商务类APP开发的4点建议
img

7x24小时售后服务

img

5倍故障时长赔付

img

15天无理由退款

img

N对一管家服务

让我们的顾问联系您

  • 电话:4006-028-024 028-86633922

    邮箱:Service@orangeapp.cn

    成都市成华区崔家店路789号上城国际1-24-9号

qq sina