Axure教程:默认版块和我一起设计简书App

发布时间:2018-9-11 16:27

35 0 0

洛杉矶娱乐城

用户头衔:新手上路

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

大佬,曾经打赏了,求发一份原型参考参考,很是感激您(曾经发了很多多少遍的评论 不晓得为什么老是不见了)
预备好两个元件,即编纂模式按钮和布景框,正在别离设置选中属性。点击编纂模式按钮,挪动按钮,切换编纂模式按钮和布景框的选中形态,显示提醒弹框,期待一段时间,提醒框消逝。

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

我们先来看一下简书的页面布局,App的底部包含了关心、发觉、动静、我的四个从版块,底部从导航两头插入了写做入口,各一级导航又包含了若干二级界面,下面的这张脑图大致梳理了页面布局。(结尾仅梳理到二级页面这一层级,本文的原型仅还原到二级界面。)
两头5个标签切换内容面板时,需要判断之前是哪些标签被选中的,以便确定动态面板切换时的滑动标的目的。
截止目前为止,关于简书原型大部门的交互设想思绪取方式都曾经分享竣事了,也感激可以或许耐心阅读到这里的同窗,但愿通过这篇大型的分析案例可以或许帮帮大师控制大部门交互结果的实现思绪取方式。
交互结果:点击各项左侧开关按钮,圆向另一侧滑润挪动,圆及下面开关布景的填充色均发生了变化。
为动态、更多3个标签设置鼠标单击事务,单击时将标签更改为选中形态,挪动标签下方的下划线,改换下方的页面内容(将列表内容转转为动态面板,面板的3个形态对应着3个标签的内容),同时同步更新顶部导航的选中形态取下划线挪动位置。
我的积分、编纂小我材料、关心、粉丝、珍藏的文章、喜好的文章、我的文集、我的钱包、帮帮取反馈、给简书等分等页面的交互结果大部门为跳转链接,故不再赘述。设置、搜刮等页面的交互结果较少,且设想思绪上文已做细致申明。
本文通过还原简书App原型的过程,进行了大量的交互设想。本文也将会分享实现这些交互结果的设想思绪取方式,但愿可以或许帮帮到有需要的同窗,正在原型设想的道路上更上一层楼。
为更多按钮设置鼠标单击事务,切换弹出菜单的可见性。点击“添加到桌面”,显示提醒消息“简书:已添加”,期待顷刻,提醒消息消逝;点击“分享用户”,显示分享弹框(将分享弹框设置为动态面板并躲藏)。
结果2:将顶部导航及标签全选设置为动态面板,属性中设置固定到浏览器窗口,程度左边距和垂曲上边距均为0,并勾选一直连结顶层。


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

为顶部文章类型标签设置单击事务,切换文章类型弹框的可见性;为弹框中的菜单设置鼠标单击事务,单击时,改变导航标签内容,切换页面显示内容,躲藏弹框。
点击乐趣按钮,切换乐趣标签弹框的可见性;点击乐趣标签弹框,躲藏乐趣标签弹框。
起首预备为页面中所有的矩形框以及文字设置一套选中结果,包罗切换夜间模式的按钮及布景条。点击按钮时,按钮沿着布景条向另一侧挪动,同时将按钮、布景条以及页面中所有的矩形框、文字等均设置为选中结果(默认均为未选中);再次点击按钮,按钮向另一侧挪动,按钮、布景条以及页面中所有的矩形框、文字等均设置为未选中结果。
更多菜单:将弹出菜单所有内容转换为一个动态面板,并固定正在更多按钮下方,菜单点击后的弹框页面转换为一个动态面板。为更多按钮设置单击事务,切换弹出菜单的可见性;点击菜单,躲藏菜单弹框,显示对应的功能界面。将顶部导航栏转换为动态面板,设置浏览器固定属性(设置截图参照上文)。

我的版块包含了我的、设置、搜刮、小我核心、我的积分、编纂小我材料、积分商城、公开文章、关心、粉丝、私密文章、珍藏的文章、喜好的文章、已购内容、我的专题、我的文集、关心的专题/文集/连载、我的钱包、简书会员、浏览记实、帮帮取反馈共21个页面。
当全局变量OnLoadVariable为2时,顶部标签的值为“只看专题”。

设想思绪:为注释设置文本改变事务,当文本改变时,操纵this.text.length实现计数功能;当文本内容为空时,则遏制计数为0。
设想思绪:正在设置交互事务之前,我们还需要做一些预备工做,需要对圆和开关布景设置一个选中结果,用来改换布景色。免打搅选中结果的布景色为红色,其他项选中结果的布景色均为灰色。将免打搅以下部门的页面设置为动态面板,面板次要用来显示免打搅开启和封闭形态的页面。

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

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

本文通过还原简书App原型的过程,进行了大量的交互设想。正在原型制做过程中,几乎实现了最常见的交互结果,次要包罗:轮播图、换一批、table切换、滑动开关、分享、toast提醒、计数、清空、排序、置顶,还有各类函数、动态面板、中继器的矫捷使用,以及全局变量正在跨页面场景下的利用。
本文由  拼搏的80后 原创发布于人人都是产物司理。未经许可,禁止转载
1)因为连载、专题页面均能够跳转至此,因而正在加载页面时,需要先判断是从哪里跳转,这里就需要用到全局变量。
对于常用的链接跳转、选中结果等一些很是根本的交互属性、交互动做的设置,不做细致申明。正在正式起头设置交互动做前,需要提前绘制、摆放好相关的元件、做好界面结构等预备工做,这些根本需要的预备工做,正在此也省略相关申明。
轮播图:将轮播的几张图设置为一个动态面板,设置页面载入事务,向左滑动从动轮回切换动态面板的形态。

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

值得留意的是:默认将最左侧的“全数关心”标签设置为选中,点击摆布两侧的标签时,需要正在程度标的目的上挪动整行标签栏位置。
动静页面的评论、喜好和赞、投稿请求、赞扬和付费、其他提示、推送通知、查询等均为跳转,此处不做细致申明。各页面顶部的题目导航栏一直固定正在页面顶部,此交互结果能够操纵动态面板的“固定到浏览器”属性来实现,相关设置参照上文。
这里仅阐发第一个交过结果,为顶部标签导航设置鼠标单击事务,单击时,切换文章类型弹框的可见性;为弹框中的菜单设置鼠标单击事务,单击时,改变导航文本内容,切换页面显示内容,躲藏弹框。
点击左上角按钮,显示菜单弹框;点击复制,躲藏菜单弹框,页面地方提醒“简书:已复制到粘贴板”,期待顷刻,躲藏提醒文字;点击正在浏览器中打开,显示打开体例对话框;点击分享,页面从底部向上滑动显示分享弹框,显示时设置灯箱结果。(交互设置截图参照上文的积分商城)
banner图下的分类导航能够摆布滑动,为你保举版块能够摆布滑动查看更多保举做者。
2)点击标签或倒三角,逐步显示标签分类弹框,弹框中对应的标签被选中;点击弹框中的标签,替代导航栏标签内容,挪动倒三角到固定坐标位置(程度挪动),躲藏弹出菜单,替代下方页面内容(可用动态面板存放页面内容)。
关心的连载/专题页面载入时,当全局变量OnLoadVariable为1时,顶部标签的值为“只看连载”;

简书是一个优良的创做社区,正在这里你能够率性地创做,一篇短文、一张照片、一首诗、一幅画……我们相信,每小我都是糊口中的艺术家,有着无限的创制力。
值得留意的是:需要将分享弹框转换为一个动态面板,固定正在浏览器底部,且默认为躲藏形态,如许才可以或许包管分享弹框一直从页面底部向上滑动。
交互结果:注释中输入内容时,页面顶部提醒输入了xx字,进行注释内容的计数。

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

添加一个动态面板,为每个形态设置装备摆设分歧的保举做者,点击换一换按钮,切换动态面板形态。
正在专题页面,点击我关心的专题时,全局变量OnLoadVariable为2。
设想思绪:给两个标签设置选中结果(默认选中左侧标签),并将它们设置为一组,为标签设置单击事务,单击标签时,标签被选中,程度挪动下划线,同时切换内容动态面板。

结果1:顶部标签的切换结果,将顶部标签设置为一个组,并给每个标签设置选中形态。为标签设置鼠标单击事务,单击时,设置选中框(红色矩形)的尺寸,挪动选中框,将标签设置为选中形态,切换内容面板的形态。
人人都是产物司理(是以产物司理、运营为焦点的进修、交换、分享平台,集媒体、培训、聘请、社群为一体,成立8年举办正在线+期,线+场,产物司理大会、运营大会20+场,笼盖北上海广深杭成都等15个城市,外行业有较高的影响力和出名度。平台堆积了浩繁BAT美团京东滴滴360小米网易等出名互联网公司产物总监和运营总监,他们正在这里分享学问、聘请人才,取你一路成长。
本文将会分享实现这些交互结果的设想思绪取方式,但愿可以或许帮帮到有需要的同窗,正在原型设想的道路上更上一层楼。
设想思绪:起首将文章列表设置为动态面板,将今日取更早这两个导航设置为一个组,并设置不异的选中结果。点击顶部导航时,选中导航,挪动红色下划线,切换动态面板形态。
添加一个动态面板用来存放会员权益、卑享会员权益的页面内容,点击会员、卑享会员,挪动下方的下划线,切换动态面板的页面形态。
假设正在连载页面中,点击我关心的连载时,全局变量OnLoadVariable为1;
将导航栏转换为动态面板,正在固定属性中设置显示位置并勾选一直连结正在顶层。
现正在我们来设置开关的交互设想,即针对开关上的圆设置单击事务。我们来阐发下开关点击的交互结果,点击圆形开关时,改变圆和开关布景的选中形态,圆沿着布景条向另一侧滑动,免打搅设置相较于其他的开关多一个切换动态面板的形态。
B Color Smilies

:D 获取中...

Powered by 护民图库 X3.4© 2001-2018FH7.COM

网站内容仅供用于学习和交流,请遵循相关法律法规

QQ在线咨询|Archiver|手机版|小黑屋|河池论坛