Axure原型设计:京东官网滚动界面

91运营社群招募中,勾搭小编微信号:yueyingzheng88入社群每周91公开课,91风暴,全员参与,实际案例实际分析问题答疑,你提问题我解答行业专场,互联网金融,电商,新媒体运营等专场各地分站交流资源及人脉共享其他的。。。。欢迎各行业互联网运营达人加入我们91运营大家庭,会运营的人都来这里了!导读:作者分享了自己制作京东官网滚动界面原型的具体操作过程,希望大家可以从中受到些启发。正文先上京东官网原图(也可以自己搜素京东官网查看)先...

91运营社群招募中,勾搭小编微信号:yueyingzheng88入社群

  • 每周91公开课,91风暴,全员参与,实际案例实际分析

  • 问题答疑,你提问题我解答

  • 行业专场,互联网金融,电商,新媒体运营等专场

  • 各地分站交流

  • 资源及人脉共享

  • 其他的。。。。

欢迎各行业互联网运营达人加入我们91运营大家庭,会运营的人都来这里了!

导读:作者分享了自己制作京东官网滚动界面原型的具体操作过程,希望大家可以从中受到些启发。

正文

先上京东官网原图(也可以自己搜素京东官网查看)

Axure原型设计:京东官网滚动界面

先分析一下这个界面,几张图片的滚动,中心位置偏下一个滚动条,由几个椭圆和一个圆角矩形构成。

图片滚动和椭圆颜色变化相对应,点击图片链接至对应活动网页。

1、滚动界面动画

我们先导入一张图片到工作区,鼠标右键选择“转化为创建动态面板”。

Axure原型设计:京东官网滚动界面

然后在页面面板也就是右下角面板会有一个动态面板的分栏,鼠标移动点击时会出现一个加号,也就是添加状态。

Axure原型设计:京东官网滚动界面

双击创建两个新的状态,在每个状态下添加一张图片,我这里就以3个状态为例。

Axure原型设计:京东官网滚动界面

单击动态面板在面板状态找到交互分栏里面的“载入时”事件,双击添加。

Axure原型设计:京东官网滚动界面

会弹出一个设置窗口,在原件栏中找到“设置面板状态”,双击添加参数设置如下:

Axure原型设计:京东官网滚动界面

点击确定按F5预览就会有一个简单的滚动效果。

2、制作画面中的3个白色椭圆与画面绑定

点击index(或者home)右下角页面那里主要是为了不在动态面板中建立椭圆。

然后在原件库找到椭圆形移动到工作栏调整合适的大小复制3个调整到合适的位置,顺手设置下圆形的边框改成无边框。

Axure原型设计:京东官网滚动界面

Axure原型设计:京东官网滚动界面

接下来就是重点了,我先讲一下原理。

我们要做的是让切换画面顺序跟3个椭圆的切换对应,对比京东官网可以看到切换到对应的图片,对应的按钮会变红。

首先来制作按钮变红事件,点击第一个按钮右键选择交互样式。

Axure原型设计:京东官网滚动界面

在弹出的交互设置中选择“选中”栏,勾选填充颜色选择红色

Axure原型设计:京东官网滚动界面

其他两个椭圆的设置与第一个一致。

加下来就是让第一张图与椭圆1绑定,也就是说切换到第一张图的同时椭圆1被选中变成红色。

选中动态面板,在属性中找到“状态改变时”的事件,双击添加,在设置中选择编辑条件选择state1

Axure原型设计:京东官网滚动界面

点击确定。

之后在元件动作分栏找到“选中“动作双击添加,参数设置如下:

Axure原型设计:京东官网滚动界面

椭圆1设置“true“是表示当切换到图片1时椭圆1被选中,前面我们已经设置了椭圆被选中时变成红色,所以这里椭圆1变成红色。接下来就是一样的设置,当然了case2把state换成state2,椭圆1和3的值等于”false“椭圆2的值为”true“。椭圆3也是一样的道理我就不上图了。

Axure原型设计:京东官网滚动界面

最难的部分已经结束了下面来制作鼠标移入图片时停止滚动的动作。

还是点击动态面板,在属性栏找到“鼠标移入时”事件双击添加事件在弹出的设置框添加动作“设置面板状态”在选择状态中下拉选择停止循环。

Axure原型设计:京东官网滚动界面

然后就是鼠标移出时图片继续滚动的事件,一样的找到“鼠标移出时”的事件(动态面板上添加)双击添加,参数与之前设置的滚动参数一致。

Axure原型设计:京东官网滚动界面

Axure原型设计:京东官网滚动界面

如果你按F5预览下画面可以看到我们已经很接近成品了。

接下来,我们要让鼠标移入椭圆1时画面切换到图片1。

这个事件应该添加在椭圆1上,单击椭圆1,在属性中找到“鼠标移入时”事件双击添加,在弹出的设置窗口选择“设置面板状态”,选择状态选择“state1”。

Axure原型设计:京东官网滚动界面

因为鼠标移入时画面停止滚动所以只需要选择state1(也就是图片1)即可。同样的椭圆2,椭圆3对应添加事件,选择状态为state2,state3即可。

3、为图片设置超链接

双击图片1在属性中找到“鼠标单击时”事件,双击添加,选择“链接”分栏找到“当前窗口”单击添加,设置如下:

Axure原型设计:京东官网滚动界面

在超链接中输入你想转到的网址,图片2、3操作与1一致,只是网址不同罢了。

最后就是添加一个圆角矩形在3个椭圆的下面作为底色,调整透明度以及圆角。个人认为加了这个圆角矩形之后感觉顺畅多了,下面是成品图,个人第一次写教程不喜轻喷。

Axure原型设计:京东官网滚动界面

附:源文件百度云链接:http://pan.baidu.com/s/1gfIeyzD 密码:o2o4

本文由 @红匏白脸 原创发布于人人都是产品经理。

据说,只有打赏的才是真粉丝哦,8块8请小编喝杯咖啡吧,长按二维码勾搭小编微信(yueyingzheng88)加入91运营社群,全年100多场免费公开课,定期问题答疑等着你,会运营的人都在这里了!

Axure原型设计:京东官网滚动界面

欢迎关注91运营网旗下垂直账号:


91产品:(微信ID:chanpin91)

致力于为产品新人、产品经理等广大产品爱好者打造一个全方位的学习交流平台,分享产品设计、交互设计、产品运营干货。    


91运营网:(微信ID:yunying-91)

专注于互联网产品运营干货,聚焦互联网产品策划,电子商务,网络营销,移动互联网,融资创业等领域经验分享。


原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/35582/

(0)
交互精选交互精选
上一篇 2018-03-04
下一篇 2018-03-04

相关推荐

  • 招聘 | 年薪百万不是梦,八爪鱼一大波高薪职位与伯乐奖在等你

    八爪鱼又开始招人啦如果你对大数据充满热情技术与才华兼并就赶快行动吧行业销售总监(政企)企)N15k-30k /深圳 / 经验3-5年 / 本科及以上 / 全职>>>岗位职责:基于公司的大数据产品、资源和技术,面向企业/政府等客户,提供数据采集软件、数据分析产品,数据服务,大数据解决方案等产品或服务;销售团队的人员招聘,管理及考核淘汰工作;完成客户需求的挖掘,商务谈判,项目回款工作;负责外部销售渠道和资源的对接,开发与维护;配合市场运营部...

    2018-03-15
  • 一文看清过去一年电商用户体验怎么样?

    导读:过去1年电商在对待消费者方面,有没有尽力?它们都干了哪些事?日前,电子商务研究中心发布的《2017年度中国电子商务用户体验与投诉监测报告》显示,2017年通过在线递交、电话、邮件、微信、微博等多种投诉渠道受理的投诉案件数同比增长48.02%,下半年受到电商各大节日影响增速加快。据电子商务消费纠纷调解平台监测数据显示,2017年零售电商类投诉占全部投诉60.59%,比例最高;生活服务电商紧随其后,占据13.47%;跨境电商投诉占比为...

    2018-03-28
  • 用户体验扩展:一个设计管理者的4步走框架

    用户体验不是一个有规则去衡量的工程,它是科学与艺术的一部分。所有的设计流程最终都会被打破,用户体验扩展的诀窍是创建一个灵活应对设计规模和时间推移直到完成的框架。基于我们的朋友Jason Culbertson(Airbnb设计经理)在Airbnb、GUSTO等公司的产品设计研究中,他在用户体验实践中创建了以下几个方面的框架:.方法&系统-UX领导人和他的团队保证核心标准的工具是什么?如何做一个系统化的设计,而不是碎片化的?.团队结构-随着...

    2018-03-02
  • 以服务设计视角推动设计赋能

    作者:阿里UED 周静&谢辉敏小编说:未来的设计都应该归纳服务设计的范畴,包括用户体验设计、交互设计等,比如新零售设计就是一套完整的服务设计体现,不要等服务设计成熟了再去设计,谁先先学习,谁就抢占了先机~~为未来充点电!本文较长,读完需要点耐心~~近两年随着UED团队的探索,沉淀出了业务协同、设计增值、设计驱动三个层次的价值模型,深入剖析了设计师价值实现的不同阶段与方式。同时越来越多的设计师也逐渐意识到了只有在协同业务的全流程中利用体验...

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

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

    2018-04-28
  • 如何用axure参与团队项目

    1、下载安装axure破解版,可以去axure.com下载。这里为了方便大家,分享个人的百度云盘资源,链接:https://pan.baidu.com/s/1o9qFOyY 密码:hodp2、下载File Zilla,File Zilla从百度上搜索即可下载,这里不需要多言,以下主要讲讲如何配置File Zilla。Ctrl+S创立本地站点,输入主机IP地址,协议默认是SFTP,输入团队用户&密码,点击连接,进入团队项目。3、在团队项目...

    2018-03-15
  • 【用户体验.春节特辑】我的记事(总第265期)

    亦可访问www.koushutianxia.com了解详情编家谱   修家史   留视频建祠堂   亲互动   传万代总第265期“我的记事”——家庭、个人故事随时记录,方便存储。直接点击主页面“我的记事”按钮,即可进入“我的记事”页面,随时随地添加、修改、记录个人及家庭资料和故事。同时点击方框内加号键,可以添加照片,点击完成上传。上传后可根据提示选“分享”键转发至微信、朋友圈、微博、QQ好友、QQ空间;选“删除”键进行删除记事内容;选...

    2018-02-16
  • 信息港招聘3000多岗位......

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

    2018-03-26
  • 交叉学科-交互设计春季周末班课程计划

    开课时间:本周末4.14日开课,可预约免费试听。请单独联系教务老师。联系方式:教务老师微信二维码上课地址:北京海淀区北四  环保福寺桥南  恒兴大厦10层E室

    2018-04-11
  • 基于用户体验的性能测试:模拟个别的用户延迟(续)

    本周免费下载杂志:《保健与生活》共计12本,请点击下行红色文字链接获取下载地址杂志推荐《保健与生活》3.       在TestStudio中生成时间延迟使用Rational TestStudio的VuC语言,有很多方法可以生成时间延迟。对于如何使用Think_avg及相关的命令和参数来实现,Rational的文档和培训资料已经做了详细的说明,这里不做深入讨论,只做简要介绍。这个方法只有在Think_avg命令不在计时器(Timer)里...

    2018-02-01