Axure教程:和我一路设想简书App

文章分类:设计前沿 发布时间:2018-08-08 原文作者:dede58.com 阅读( )

  本文通过还原简书App原型的过程,进行了大量的交互设想。本文也将会分享实现这些交互结果的设想思绪与方式,但愿可以或许协助到有需要的同窗,在原型设想的道路上更上一层楼。

  本文通过还原简书App原型的过程,进行了大量的交互设想。在原型制造过程中,几乎实现了最常见的交互结果,次要包罗:轮播图、换一批、table切换、滑动开关、分享、toast提醒、计数、清空、排序、置顶,还有各类函数、动态面板、中继器的矫捷使用,以及全局变量在跨页面场景下的利用。

  本文将会分享实现这些交互结果的设想思绪与方式,但愿可以或许协助到有需要的同窗,在原型设想的道路上更上一层楼。

  简书是一个优良的创作社区,在这里你能够率性地创作,一篇短文、一张照片、一首诗、一幅画……我们相信,每小我都是糊口中的艺术家,有着无限的缔造力。

  我们先来看一下简书的页面布局,App的底部包含了关心、发觉、动静、我的四个主版块,底部主导航两头插入了写作入口,各一级导航又包含了若干二级界面,下面的这张脑图大致梳理了页面布局。(结尾仅梳理到二级页面这一层级,本文的原型仅还原到二级界面。)

  对于常用的链接跳转、选中结果等一些很是根本的交互属性、交互动作的设置,不做细致申明。在正式起头设置交互动作前,需要提前绘制、摆放好相关的元件、做好界面结构等预备工作,这些根本需要的预备工作,在此也省略相关申明。

  下文内容次要聚焦于分享各类交互结果的设想思绪及方式,并附上相关的设置截图,设想思绪的描述挨次与交互结果逐个对应。

  结果1:顶部标签的切换结果,将顶部标签设置为一个组,并给每个标签设置选中形态。为标签设置鼠标单击事务,单击时,设置选中框(红色矩形)的尺寸,挪动选中框,将标签设置为选中形态,切换内容面板的形态。

  两头5个标签切换内容面板时,需要判断之前是哪些标签被选中的,以便确定动态面板切换时的滑动标的目的。

  值得留意的是:默认将最左侧的“全数关心”标签设置为选中,点击摆布两侧的标签时,需要在程度标的目的上挪动整行标签栏位置。

  结果2:将顶部导航及标签全选设置为动态面板,属性中设置固定到浏览器窗口,程度右边距和垂直上边距均为0,并勾选一直连结顶层。

  设想思绪:将顶部导航栏相关元素转换为动态面板,操纵动态面板的位置固定属性,从而实现导航栏的固定结果(属性设置配图参照上文)。

  banner图下的分类导航能够摆布滑动,为你保举版块能够摆布滑动查看更多保举作者。

  点击保举作者右侧的换一换,系统改换保举作者名单(交互的设置方式同上文搜刮页分歧,下文不再描述)。

  点击每一篇文章右侧的乐趣菜单,弹出乐趣弹框,能够点击选择不感乐趣,弹框封闭,后续系统将不在推送雷同文章。

  将分类导航、保举作者转换为动态面板,在属性当选择主动显示程度滚动条。为了在视觉上包管看不到这个程度滚动条,能够在滚动条上笼盖矩形框,矩形的填充和边框线均为白色。

  添加一个动态面板,为每个形态设置装备摆设分歧的保举作者,点击换一换按钮,切换动态面板形态。

  点击乐趣按钮,切换乐趣标签弹框的可见性;点击乐趣标签弹框,躲藏乐趣标签弹框。

  1)因为连载、专题页面均能够跳转至此,因而在加载页面时,需要先判断是从哪里跳转,这里就需要用到全局变量。

  2)点击标签或倒三角,逐步显示标签分类弹框,app设计弹框中对应的标签被选中;点击弹框中的标签,替代导航栏标签内容,挪动倒三角到固定坐标位置(程度挪动),躲藏弹出菜单,替代下方页面内容(可用动态面板存放页面内容)。

  动静页面的评论、喜好和赞、关心、投稿请求、赞扬和付费、其他提示、推送通知、查询等均为跳转,此处不做细致申明。各页面顶部的题目导航栏一直固定在页面顶部,此交互结果能够操纵动态面板的“固定到浏览器”属性来实现,相关设置参照上文。

  交互结果:点击各项右侧开关按钮,圆向另一侧滑润挪动,圆及下面开关布景的填充色均发生了变化。

  设想思绪:在设置交互事务之前,我们还需要做一些预备工作,需要对圆和开关布景设置一个选中结果,用来改换布景色。免打搅选中结果的布景色为红色,其他项选中结果的布景色均为灰色。将免打搅以下部门的页面设置为动态面板,面板次要用来显示免打搅开启和封闭形态的页面。

  此刻我们来设置开关的交互设想,即针对开关上的圆设置单击事务。我们来阐发下开关点击的交互结果,点击圆形开关时,改变圆和开关布景的选中形态,圆沿着布景条向另一侧滑动,免打搅设置相较于其他的开关多一个切换动态面板的形态。

  值得留意的是:需要将分享弹框转换为一个动态面板,固定在浏览器底部,且默认为躲藏形态,如许才可以或许包管分享弹框一直从页面底部向上滑动。

  我的版块包含了我的、设置、搜刮、小我核心、我的积分、编纂小我材料、积分商城、公开文章、关心、粉丝、私密文章、珍藏的文章、喜好的文章、已购内容、我的专题、我的文集、关心的专题/文集/连载、我的钱包、简书会员、浏览记实、协助与反馈共21个页面。

  起首预备为页面中所有的矩形框以及文字设置一套选中结果,包罗切换夜间模式的按钮及布景条。点击按钮时,按钮沿着布景条向另一侧挪动,同时将按钮、布景条以及页面中所有的矩形框、文字等均设置为选中结果(默认均为未选中);再次点击按钮,按钮向另一侧挪动,按钮、布景条以及页面中所有的矩形框、文字等均设置为未选中结果。

  将导航栏转换为动态面板,在固定属性中设置显示位置并勾选一直连结在顶层。

  为更多按钮设置鼠标单击事务,切换弹出菜单的可见性。点击“添加到桌面”,显示提醒消息“简书:已添加”,期待顷刻,提醒消息消逝;点击“分享用户”,显示分享弹框(将分享弹框设置为动态面板并躲藏)。

  为页面设置窗口滚动事务,当窗口在垂直标的目的滚动距离≤100时不显示顶部导航面板;100<滚动距离≤450,显示顶部导航动态面板的第一个形态,动画结果为逐步;滚动距离>450,显示顶部动态面板的第二个形态。(提前预备一个动态面板,用来作为页面滑动时的顶部导航,并设置两种形态)

  为动态、文章、更多3个标签设置鼠标单击事务,单击时将标签更改为选中形态,挪动标签下方的下划线,改换下方的页面内容(将列表内容转转为动态面板,面板的3个形态对应着3个标签的内容),同时同步更新顶部导航的选中形态与下划线挪动位置。

  轮播图:将轮播的几张图设置为一个动态面板,设置页面载入事务,向左滑动主动轮回切换动态面板的形态。

  更多菜单:将弹出菜单所有内容转换为一个动态面板,并固定在更多按钮下方,菜单点击后的弹框页面转换为一个动态面板。为更多按钮设置单击事务,切换弹出菜单的可见性;点击菜单,躲藏菜单弹框,显示对应的功能界面。将顶部导航栏转换为动态面板,设置浏览器固定属性(设置截图参照上文)。

  这里仅阐发第一个交过结果,为顶部标签导航设置鼠标单击事务,单击时,切换文章类型弹框的可见性;为弹框中的菜单设置鼠标单击事务,单击时,改变导航文本内容,切换页面显示内容,躲藏弹框。

  为顶部文章类型标签设置单击事务,切换文章类型弹框的可见性;为弹框中的菜单设置鼠标单击事务,单击时,改变导航标签内容,切换页面显示内容,躲藏弹框。

  预备好两个元件,即编纂模式按钮和布景框,在别离设置选中属性。点击编纂模式按钮,挪动按钮,切换编纂模式按钮和布景框的选中形态,显示提醒弹框,期待一段时间,提醒框消逝。

  交互结果:点击导航栏下方的标签分类时,被选中的标签文字颜色发生改变,下方的下划线跟从挪动,同时切换页面内容。

  设想思绪:给两个标签设置选中结果(默认选中左侧标签),并将它们设置为一组,为标签设置单击事务,单击标签时,标签被选中,程度挪动下划线,同时切换内容动态面板。

  点击右上角按钮,显示菜单弹框;点击复制,躲藏菜单弹框,页面地方提醒“简书:已复制到粘贴板”,期待顷刻,躲藏提醒文字;点击在浏览器中打开,显示打开体例对话框;点击分享,页面从底部向上滑动显示分享弹框,显示时设置灯箱结果。(交互设置截图参照上文的积分商城)

  添加一个动态面板用来存放会员权益、尊享会员权益的页面内容,点击会员、尊享会员,挪动下方的下划线,切换动态面板的页面形态。

  交互结果:点击今日,查看今日浏览的文章列表;点击更早,查看今日之前浏览的文章列表。

  设想思绪:起首将文章列表设置为动态面板,将今日与更早这两个导航设置为一个组,秒速赛车开奖直播并设置不异的选中结果。点击顶部导航时,选中导航,挪动红色下划线,切换动态面板形态。

  我的积分、编纂小我材料、关心、粉丝、珍藏的文章、喜好的文章、我的文集、我的钱包、协助与反馈、给简书等分等页面的交互结果大部门为跳转链接,故不再赘述。设置、搜刮等页面的交互结果较少,且设想思绪上文已做细致申明。

  交互结果:注释中输入内容时,页面顶部提醒输入了xx字,进行注释内容的计数。

  设想思绪:为注释设置文本改变事务,当文本改变时,操纵this.text.length实现计数功能;当文本内容为空时,则遏制计数为0。

  截止目前为止,关于简书原型大部门的交互设想思绪与方式都曾经分享竣事了,也感激可以或许耐心阅读到这里的同窗,但愿通过这篇大型的分析案例可以或许协助大师控制大部门交互结果的实现思绪与方式。