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

相关推荐

  • 在设计项目中,用好小图标的七个技巧

    图标是设计项目中几乎必不可少的一个组成部分,但是在图标的具体使用上,讲究并不少。

    2017-05-10
  • 用户体验至上 三星Pay与苹果Pay谁更胜一筹?

    文\孟永辉如今,移动支付市场早已过百家争鸣时代,深耕细作成为当下移动支付市场的主旋律,阿里和腾讯便是这主旋律的代表。虽然两大巨鳄占据移动支付市场大部分份额,但终端市场的支付竞争依然存在。苹果与腾讯就因为App端微信赞赏功能抽成的事情闹出矛盾,原因是两家公司对赞赏抽成的比例及支付渠道存在分歧。由此也不难看出,移动支付市场潜力巨大,想要成为移动支付大潮的弄潮儿,领略潮流之下的无限风光不仅需要强大的研发实力,还要有对市场运行趋势和规律的精准把...

    2018-03-30
  • 回顾交互设计的过去,并展望其未来

    你好,这是2017年的第13篇文章。除了电脑和手机,越来越多承载了新交互形式的产品涌现。语音、体感等更加自然的交互方式会不会成为主流?未来的产品形态和交互方式会走向何方?当NUI(自然用户界面)代替GUI时交互设计师和视觉设计师该何去何从?人机交互的未来在哪?这些问题都值得我们去思考……

    2017-05-04
  • 交互设计笔记整理

    PC与手机对比使用环境pc:固定位置,干扰少,注意力集中,输入方式强大。手机:任何地方,干扰多,注意力难集中,输入方式单一。交互媒介pc:操作精准快速,桌面大显示内容多,过大屏幕会有视觉盲点。手机:手指操作,精准度低、速度慢。使用特点pc:需处理复杂任务,多任务切换,讲究效率和强互动,没有电池流量问题。手机:适合处理简单任务,多任务切换困难,适合各种姿势使用,电池流量问题严重。web与APP界面对比web是书架,内容繁多,一目了然。更直...

    微信热点 2018-04-07
  • 信息港招聘3000多岗位......

    萧山之窗移动生活由此开始....关注2018萧山信息港小镇春季人才招聘200余家企业,3000多个信息经济岗位!3月31日信息港小镇将会举办一场盛大的春季人才招聘会。招聘会时间:2018年3月31日(周六)9:00—16:00招聘会地点:萧山经济技术开发区启迪路198号 信息港小镇B-C连廊除了微医集团、科大讯飞、华网信息、一知智科、网盛数新、华澜微、云集微店、湾区孵化器.....这些信息港小镇内的王牌企业,还有萧山经济技术开发区的部分...

    2018-03-26
  • 『旧时好文』别再吐槽12306了,有本事你来写架构

    在平时,12306也就是个正常的电商网站。但一到黄金周,12306就是一个全站所有商品都秒杀,所有SKU都是动态库存的变态。

    IxD案例 2016-08-29
  • 浅聊四个主流的页面间跳转动效

    最近一直在做交互规范总结的工作,在不断梳理页面间跳转逻辑的同时,发现页面间的逻辑关系并不能和页面间跳转的动效很好的结合上。虽然只是零点几秒 的切换动效,却能在一定程度上影响用户对于页面间逻辑的认知。为了输出详细的规范,花了大量时间把玩现在公司线上的产品以及国内外优秀的APP,尤其是苹 果、谷歌自己开发的APP。(如果某些方面在设计规范中并没有给出答案,就在原生APP中找答案吧!)

    2017-05-29
  • 面向友好用户体验的交互设计:刘老师课件精简版

    浏览网页、手机拍照上传朋友圈、用自动售卖机购买饮料,我们无时无刻地与周边的产品或服务发生着交互。使用过程中的每一个身心感受就是一次交互体验。随着信息科技的发展,各种新产品和交互方式层出不穷,人们也越…

    2015-11-22
  • “想要”之前是“需要”,用户体验设计的需求层次长啥样?【UXRen译#155】

    作者: Interaction Design Foundation |  翻译:代代子,校审:Duke   用户更倾向于选择那些能满足自己“需求”,而非迎合自己“欲望”的产品。美国心理学家亚伯拉罕·马斯洛提出的需求层次理论,详细阐述了人类的心理…

    交互专题 2017-08-07
  • 译文推荐:设计并非艺术

    “设计并非艺术”的观点让我有些困惑,与我一直以来的认知有些不同。我确实认同艺术是独立于现实目的而存在的创意表达方式,而另一方面,设计虽然有着明确的现实目标,但它不同样也是创意的展示形式吗?我目前很难完全认同你的观点,希望进行更多交流。

    2017-05-27