Mockplus实例之一看就会de五个交互功能

实例来源:豆瓣新加日记(https://www.douban.com/note/create)

先看看豆瓣新加日记的网页:

Mockplus实例之一看就会de五个交互功能

再看看已经制作好的原型预览页面:

Mockplus实例之一看就会de五个交互功能

在原型制作中有五个有特色的交互功能:

1 题目和正文切换时,边框颜色变深

这里需要交互,就拿“正文”部分说吧,准备一个形状组件和输入框组件,放好位置,输入框组件边框设置为白色,输入框三个字去掉,然后合并为组;然后再把这个组复制,设置为不可见,组1和组2需要设置交互,点击组1时,组1设置为隐藏,组2设置为显示;点击组2时,组2隐藏,组1显示。

Mockplus实例之一看就会de五个交互功能

2 使用弹出面板

上传图片和添加链接都需要使用弹出面板,弹出面板里面的内容跟上面的制作方法类似,就不再重复了,重点说一下怎样关闭弹出面板。

Mockplus实例之一看就会de五个交互功能

交互链接都设置好后,右上角的“X”和确定、取消三个按钮都设置为把弹出面板关闭掉,具体的请看下图:

Mockplus实例之一看就会de五个交互功能

交互的时候必须要和弹出面板交互,而不是和弹出来的弹窗交互。设置为“切换”,这里不能选择“关闭”,如果选择“关闭”后,演示的时候只能点击一次。

3 单选按钮组的切换

需要这样设计:

Mockplus实例之一看就会de五个交互功能

下面一排单选按钮全部设为不可见。

Mockplus实例之一看就会de五个交互功能

为了更明白交互过程,我把上面的组件分别叫:A和A1;B和B1;C和C1

交互过程是这样的:

点击A,A隐藏,A1显示,B和C显示,B1和C1隐藏;

点击B,B隐藏,B1显示,A和C显示,A1和C1隐藏;

点击C,C隐藏,C1显示,A和B显示,A1和B1隐藏;

所有交互完成后,这两排组件重合在一起,上面的一排在最上面一层。

4 鼠标经过,字体和背景变色

这个功能在以前的实例送有提到过:

改变背景颜色:

Mockplus实例之一看就会de五个交互功能

改变字体颜色:

Mockplus实例之一看就会de五个交互功能

这两步做好以后,就用“《豆瓣原创声明》”和弹出面板交互:

Mockplus实例之一看就会de五个交互功能

5 弹出面板悬浮,网页滚动

很多人都说Mockplus不能做悬浮,其实错了,可以做。针对这个实例,就特简单。

做好的原型预览后,弹出面板会跟着网页一起滚动,这里教大家一个方法:当前页面全部放入到一个很大的内容面板里面去,内容面板链接这个演示页面,这样,预览时弹出面板就不会和网页一起滚动了(可以看看上面的原型视频)。

Mockplus实例之一看就会de五个交互功能

原网页还有一个交互功能,只是Mockplus目前无法实现,这里就省略了。如果以后有这个功能,我会添加到相关实例中的。

文中有哪些不妥的地方,希望指正,谢谢。

待续。。。

原创文章,作者:yanz kontol,如若转载,请注明出处:https://www.iamue.com/16617/

(0)
yanz kontolyanz kontol
上一篇 2016-07-25
下一篇 2016-07-27

相关推荐

  • 腾讯2016年度7个创新功能,你最爱哪个?

    作者:腾讯   那么,在你眼里,创新是什么样的? 是对产品的颠覆式变革?是将原有技术植入新的领域?是新的产品和领域的开拓?抑或,只是某一个让你会心一笑的新功能? 在腾讯,每月都有微创新奖的评选,在内部开启…

    交互专题 2017-08-07
  • 从2种形式和4种附加价值,来浅谈APP启动页

    当应用程序被用户打开时,在程序启动过程中被用户所看到的过渡页面(或动画)都被我们统称为启动页。为了增强应用程序启动时的用户体验,您应该提供一个启动图像。启动图像与应用程序的首屏幕看起来非常相似。当用户在主屏幕上点击您的应用程序图标时,iPhone OS会立即显示这个启动图像。一旦准备就绪,您的应用程序就会显示它的首屏幕,来替换掉这个启动占位图像。
    ——摘自苹果官方对于iOS启动页的设计说明

    2017-05-05
  • 至纯至简|手机百度8.0设计总结

    8.0是手机百度发展过程中一个重要里程碑,它不仅延续了产品建立以来的要点,打破历史包袱,与时俱进地从体验和产品角度进行了创新,通过全新的整体交互框架与视觉风格,将搜索、语音搜索、FEED流信息获取、多垂类服务等进行了再设计。

    2017-05-12
  • 【用户体验】和路通X1真实详细评测——智能车时代的钥匙

    点击蓝字关注这个神奇的公众号~中国移动和路通智能后视镜的项目已经开展了一段时间,这期间收到了多位客户的体验反馈,今天,小编整理了一些产品体验测评分享给大家,从使用者的角度,让大家对中移动智能后视镜有更加深刻的了解!用户体验和路通X1真实详细评测——智能车时代的钥匙很荣幸从天津蜂享信息技术有限公司,购买了一台和路通X1智能后视镜,并进行装车体验。感谢中国移动对智能出行的重视与执着。目前智能后视镜的市场方兴未艾,市场上智能后视镜产品如雨后春...

    2018-02-05
  • 交互设计工作坊探秘 | WTM 2018 实录

    重构购票流程的信息架构假期将至,你打开再熟悉不过的订票网页,輸入出发日期、目的地、人数,选择了最合适时段的火车票,预定、付款,整个过程不超过 3 分钟。关闭网页后,你甚至不会记得支付后的画面到底显示了什么,因为这一切流畅的就像呼吸般的自然。4 月 14 日,我们邀请到了春秋航空的高级交互设计师——程琳琳,带领一群对交互设计有热情的伙伴们,以欧洲铁路局的项目为范本,一起重现购票流程的信息架构,让大家了解这流畅的购票交互设计是通过什么方法一...

    2018-04-28
  • UED设计流程与原则

    UED设计流程在各个公司之间可能存在不同,国内的设计师在知乎社区上讨论了各自公司(包括腾讯、百度等)的UED设计原则、流程等,其中的经验值得读者借鉴。 来自腾讯的交互设计师eviliu强调设计流程主要考虑两方面的问…

    交互设计 2015-04-20
  • 移动端搜索功能研究

    搜索功能无论在web端还是移动端,都是产品中十分重要的功能。文章主要从用户体验和产品功能、策略角度来分析,提出一些对应的设计方法。 搜索能够帮助用户快速精确找到想要的结果,其中两个重要目标是提高搜索结果…

    2016-10-28
  • 大数据应用的用户体验分析

    版权所有©德塔精要,转载请注明出处用户对产品或服务的认同是由用户体验的过程所决定的,一个具备良好用户体验的IT系统对内可以提高员工工作效率,对外可以提高客户满意度和忠诚度,最终为企业带来不菲的经济效益或社会效益。因此,组织的IT战略必须实现IT与业务的融合,面向客户和关注用户体验管理。但目前用户体验管理是当前IT业务运营的弱项,也许我们能够了解IT资源的每个细节,但却不知道用户感受怎么样,不利于IT系统的优化和完善。缺乏用户体验管理以及...

    2018-03-12
  • 案例分析|通过配色吸引用户注意力的四点技巧

    色彩在任何一种设计中都起着很重要的作用,相差不多的色彩却能给用户带来完全不同情感效果。因此,好好利用色彩与生俱来的魅力,就能让你的设计更出彩。

    2017-05-01
  • 交互设计的三个半原则

    一些设计的基本原则往往是通用的、甚至可以说放之四海皆准的,例如优先级、一致性、界面的隐喻等等,好的设计都需要考虑到这些问题,甚至再更广的范围内也同样适用,而不仅仅是交互设计范畴。一个设计师&产品经…

    2017-08-01