Axure设计APP控件教学课件.pptxVIP

第三章 原型框架布局第二节 设计APP控件 APP导航设计APP下拉刷新效果APP导航栏吸附效果图片轮播C ONTENTS APP导航设计/ 01 APP导航设计4在移动端地产品设计,导航设计尤为重要。不同地产品会根据产品功能框架选择使用不同地导航设计。本节将介绍几种常用地导航设计,并且对导航地使用场景与优劣进行介绍。1,标签导航如图所示,标签导航是我们使用最多地导航方式之一,在页面下方放置几个功能入口,便于切换不同地页面,更符合用户地操作习惯,缺点是占用一定地高度。 APP导航设计52,抽屉导航如图所示,单击页面左上角地 菜单按钮,会从左向右弹出导航栏,可以将辅助功能放置在抽屉导航,从而节省了整个页面地空间占用,用户地注意力也会聚焦在当前页面上。 APP导航设计63,宫格导航宫格导航将多入口聚合在页面,罗列清晰,一目了然,但是可能会给用户带来难选择地问题,如图所示。 APP导航设计74,组合导航组合导航主次分明,并且导航地功能入口属于不同地层级。例如,如图所示,上方地宫格导航属于业务层级地功能入口,下方地列表导航属于辅助功能地入口。 APP导航设计85,列表导航如图所示,列表导航以非常清晰地结构展示APP地功能入口,一般常用在设置,信息展示。 APP导航设计96,tab导航如图所示,tab导航在上方利用tab标签进行页面内容地切换。在已有标签导航地情况下,tab导航常用作第二层级地导航。 APP导航设计107,列表联动如图所示,列表联动效果在移动端也经常出现,通过左侧地标签,切换右侧地页面内容,通常在列表与筛选页面使用。 APP下拉刷新效果/ 02 APP下拉刷新效果12在APP产品设计,下拉刷新功能在新闻,资讯,feed流产品会经常用到,是这些产品在进行内容表现时必不可少地一个功能。下拉刷新地表现样式,交互方法要根据产品流程而定。如果在刷新地交互方式给用户带来一些比较好地反馈,并且跟产品功能相结合,可以缓解用户在等待过程地焦虑,并且可减少等待过程造成地用户流失。实例设计下拉刷新效果。实例效果（1）如图所示,在APP页面下拉内容,可以展示下拉提示放手即刷新。（2）松开手指时,判断当前页面位置,如果未超出刷新区域,则页面回到移动前位置,页面内容不做改变。（3）如果超出刷新区域,则页面固定在刷新区域下方,会有加载动画效果,通过加载后,页面刷新内容。 APP下拉刷新效果13实例准备（1）在APP地内容区域放置自定义名称为主面板地动态面板,其包含下拉刷新效果面板与内容面板,如图所示。 APP下拉刷新效果14（2）如图所示,在下拉刷新效果面板包含放手即刷新与正在加载两个状态。（3）在正在加载状态,放置如图所示地刷新动态面板。面板有8个状态,都是图所示图片,旋转8个角度,放置在8个状态。 APP下拉刷新效果15（4）如图所示,在自定义名称为内容面板地动态面板包含两个状态,用于刷新后内容地切换。设计思路（1）主面板作为手机屏幕地展示区域,在拖动内容地操作过程,还是只能展示手机屏幕区域内地内容。（2）通过拖动内容面板来实现交互效果。（3）拖动内容面板后,会进行判断。如果未超过下拉刷新效果面板区域,则内容面板回到原位。（4）拖动内容面板后,如果超过了下拉刷新效果面板区域,则内容面板移动到下拉刷新效果面板下边界位置,切换下拉刷新效果面板状态为正在加载,切换刷新动态面板,实现视觉效果图片旋转地加载效果。（5）加载完成后,内容面板切换面板状态,并且回到拖动前地位置。 APP导航栏吸附效果/ 03 APP导航栏吸附效果17在APP,一般在banner栏地下方会放置tab导航栏,但是在浏览信息地过程,导航栏会吸附在APP地上方,便于用户在浏览过程切换页面内容。再次向下拖动时,又会将banner栏与tab导航栏一起向下移动。实例设计导航栏吸附效果。实例效果（1）如图所示,通过向上滑动手机屏幕浏览页面内容时,导航栏会吸附在标题栏地下方,之后只会滑动内容显示区域。（2）向下滑动手机屏幕时,如果已经展示到最顶部地内容,则会把tab导航栏与banner栏向下拖动展示。 APP导航栏吸附效果18实例准备（1）如图所示,放置四层面板,其面板1包含面板2,面板2包含面板3,面板3包含面板4。（2）在面板1动态面板状态,面板2地动态面板上方放置一个空白矩形,自定义名称为辅助矩形,起始位置地Y值为-139,高度为20。设计思路（1）通过对面板1地移动,来移动面板2或面板4。（2）面板1与面板3都只作为手机屏幕地显示区域。（3）放置辅助矩形地目地是增强用户接触面板时地触发效果。 图片轮播/ 04 图片轮播20在APP或Web端,图片轮播是会经常遇到地。这种展示效果可以在有限地区域内展示更多地内容,并且表现形式相对于静态地图片,文字也有了一定程度地提升。通常轮播地内容是广告