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

相关推荐

  • 曝光HR简历筛选逻辑:关键词

    yooooooooooo!这里是周一很不想上班的校花~春招还在如火如荼的进行着,也不知道大家现在有没有拿到offer呢,有的就先恭喜啦,没有的也别着急,心态放平,慢慢来嘛。今天这篇文章,HR现身说法讲述平日筛选简历的真实准则。适合有过实习经历、学习经验的同学优化简历。只需多下一点功夫,简历过筛率大大提高!文 | 撕兄很多人很疑惑,HR到底是如何查找简历,筛选简历,判断简历匹配度的。大部分情况下,只要你能懂得HR是如何查看简历,判断匹配度...

    2018-04-08
  • UED内功心法口诀篇

    本文约5000字,阅读需15分钟本篇思想可能给你带来的价值何为UED?在产品定义阶段,它是一种关乎如何解决问题的思维模式,在产品迭代期,它又是一种关乎如何思辨方案真实体验水平的科学验证。更具体一点,到底是什么样的思维模式和科学验证,近一年的时间我们通过大量案例逐渐将其解构出来,并将导图成“UED内功心法”,期望能够帮助交互设计师在具体实操过程中有的放矢,更有针对性地发挥设计的价值。心法口诀第一式:目标用户锁定招式1:找出契合业务的目标族...

    2018-02-02
  • 提升用户体验 抢占用户心智

    马云提出的新营销是连接线上线下的全新核心载体,超越单纯线上或者线下的全网营销概念。但华帝李洋认为,线上和线下只是连接用户的媒介,核心仍然是用户体验。抢占用户的心智,提升用户认知,是“新零售”的前提。打造新型厂商关系 构建全新服务体系在产品端,最初的模式是线上采用完全与线下独立的产品线,无论价格、卖点、功能配置都与线下产品区隔,线上和线下营销团队完全独立,各说各话。但随着时间的推移和互联网的蓬勃发展,这种割裂式的操作手法已经成为过去式。企...

    2018-03-29
  • 用户为王时代,美的如何开创用户体验新模式

    4月23日,美的联手京东推出了巅峰24小时AR新玩法,不仅福利多多,还将家电焕新的概念融入到趣味游戏中,打造了良好的用户体验,赢得了众多用户认可。随着大数据、云计算、社交商务、移动技术等新技术的发展,用户对个性化的产品和服务的需求更加强烈,并期望企业去了解他们真实的需求和提供卓越的服务体验。在此变化下,美的坚持以用户为中心的理念,推进实施关注用户实际需求的创新模式,通过用户体验实证推动产品销售和企业发展。产品研发融合需求从以前的设计师主...

    2018-04-23
  • 电视交互设计的一些事 | 设计基础15

    两年前,我总结过《Apple Watch交互的一些事》,简单的分享了下手表小屏幕的交互设计。而在过去一年多的时间里,我有幸参与了电视端大屏幕的项目,在不断的尝试、探索和设计中,也收获了一些关于电视端的设计经验,因此将这些“电视交互设计的一些事”分享出来,共同探讨电视端的设计。✨硬件+远距离操控——基本交互基于桌面资料研究以及设计经验,总结了基本交互主要包含以下几个关键内容:遥控器输入、导航和菜单、信息展现、控件摆放和焦点状态。一、 遥控...

    2018-01-30
  • 《用户体验可视化指南》视频讲书(6)

    《用户体验可视化指南》书中第2章的第2部分从伦敦地铁地图,看体验地图的元素、范围和根据目标的取舍。点击视频观看(大约10分钟,推荐室内安静、有wifi环境下播放)兰静同学听后分享从这里开始讲绘制共线图前的5个思考点:视角、范围、焦点、结构和用途。蓉姐在这节视频中主要讲解了视角和范围这2点。1、视角有2个决定因素,目标用户和想要绘制的体验类型。a. 每类目标用户,在产品互动的关键触点上,应该是有明显差异的。哪些企业的主目标用户,哪些是次级...

    2018-04-10
  • 关于用户体验

    产品不被喜欢的原因是漏了什么?答案是用户体验。如果你是一个产品经理,是否有深刻思考过这个问题呢?有人会说思考过,但似乎没什么用,产品还是不被喜欢。那是用户体验不重要,还是我们思考的不够呢?答案是后者。首先我们提出本篇要解决的核心问题:如何让产品被喜欢?(说明一下,这个产品可以是某种实物性的产品,也可以是一种服务性的产品。)这个问题提出后,很多人的脑海中会蹦出质量好、外观精致、用的舒服、服务周到等,但想到这些的人,一定还会有一个感受,就是...

    2018-04-09
  • 設計者說 | 交互设计总监+创始人+设计师导师 潘翔的多维思考

    设计者说  |  设计发声平台| 第 53位设计师 |▲ 专访:设计总监+企业管理者+资深导师 三位一体经验分享今天的嘉宾经历过很多次转型——工业设计出身;毕业做交互设计;创业做用户体验设计;当然他也是一只梨的导师之一:潘翔尚器设计联合创始人资深交互设计师同济大学硕士曾任职于designeaffairs一只梨交互设计资深导师几次转型都成功是潘翔最厉害的地方。每换一次角色就会让他的思考和经历叠加一层全新维度。在他身上,同时有资深设计师的专...

    2018-03-26
  • 用户体验,比一切事情都大

    一直想写一篇与用户体验相关的文章,因为这里面用很多误区,很多朋友认为用户体验很简单,只要高层强调和重视、把页面设计的好看就可以了。其实,用户体验是一门相当专业的跨学科综合科学。大概从2005年开始,笔者自己很有幸成为国内第一批的用户体验践行者,我们是国内第一批UCD(User Central Design)成员。当时,国际上流行的用户体验是一个五层框架模型,从底层到顶层分别是:战略、范围、结构、框架和表现。我非常清楚的记得我的第一个用户...

    2018-02-28
  • 华润创业、建信融通、便利蜂等4家名企春招

    求职奶爸华南最活跃的大学生求职平台旗下公号求职奶爸、校园宣讲会V、名企校招实习,50W+粉丝企业合作请加 QQ 3527488757 或微信 naibabd01(添加请备注公司名称)学生求职请加创始人微信 qiuzhinaiba101全国 | 华润创业全国 | 建信融通全国 | 便利蜂广州 | 卡宾服饰华润创业/ 公司介绍 /华润(集团)有限公司是一家在香港注册和运营的多元化控股企业集团,其前身是 1938 年于香港成立的联和行,194...

    2018-04-08