发表于: 2019-07-30 21:44:39

1 634


今天完成的事情:

任务四验收标准

深度思考

明天计划的事情:

任务五开始调研

存在问题:暂时无

收获:

草船云滚动视图模块验收标准

轮播图:

1. 5秒向右自动切换

2. 左右翻页键点击翻页。

3. 点击轮播点翻页。

4. 轮播图显示哪个页面时,对应轮播点底色颜色加深,显示当前轮播图的位置。

5. 鼠标移动到轮播图范围内,轮播点底色颜色加深,停止自动切换。

 

列表数据

页面显示列表数据,点击图片或者文字跳转至相关内容页面。

 

 

京东金融滚动视图模块验收标准

轮播图

1.3秒向右自动切换

2.左右滑动进行翻页。

3.滑动到哪个页面时,对应轮播点底色颜色加深,提示用户当前页面。

4.点击当前轮播图跳转到相关内容的页面。

 

列表数据

页面显示列表数据,点击文字链接跳转至相关内容页面。

 

导航

点击各个导航入口,跳转至相关内容页面

 

上拉加载

上拉手机屏幕,页尾出现旋转环形图标和“加载中”字样,加载后,页尾数据列表不断加载,首页内容向上褪去,更多内容不断占据屏幕空间。

 

下拉更新

下拉手机屏幕,屏幕顶部出现旋转环形图标,松手更新后,列表数据信息更新

 

一.轮播图有几种表现形式,适合什么场景,有哪些切换方式?

1. 大图平铺

优点:视觉效果好,重点突出,页面大气。

缺点:1)复杂的大图导致网站性能低,加载速度慢。

2)轮播图上相关关键词的搜索能力降低。

3)使用的Flash无法被任何搜索引擎抓取。

场景:需要通过轮播图推送重要信息,轮播图更吸睛,更大气。

例如:爱奇艺,企业网站

 

2. 多个图片组成,每张小图都可点击跳转。

优点:展示信息多,用户可根据自己需求点击。

缺点:视觉效果不好,画面混乱

场景:展示图片数量较多,且信息重要等级差不多,需要在同一页面一块展示时。

例如:腾讯视频、360视频

 

3. 旋转木马式轮播图

优点:重点突出,吸引用户了解其他内容,转化率高

缺点:占用空间较大,加载速度会慢一些,且轮播图色调和背景主题不一致时会产生违和感

场景:展示图片数量不多,需要通过轮播图突出宣传重点,提高整体信息的转化率。

例如:QQ音乐

 

轮播图的切换方式

1、自动切换

优点:用户未进行操作时也可以提供轮播信息

缺点:可能会打断用户的浏览

场景:不用用户操作,也可以通过切换展示较多的宣传信息

案例:淘宝、新浪新闻、百度视频

2、翻页切换

优点:用户使用更加方便,不翻页时可自动隐藏,不会遮挡图片

缺点:只能一张一张进行切换,用户不能直观看到图片总数

场景:用户可以根据自己的需要自行切换图片

案例:淘宝、新浪新闻、百度视频

3、轮播点(圆点、长条、数字)切换

优点:可以跳转切换,可以直观看到一共有多少张图片

缺点:点击面积太小,容易误触

场景:用户可以根据自己的需要自行切换图片的同时可以看到图片的总数量和当前图片的排序

案例:爱奇艺、携程、网易严选、途牛

4、标签(导航)切换

优点:有简洁的提示信息,分类清晰,不会误触,可以跳转切换

缺点:美观性较差,侵占轮播图的空间

场景:用户可以根据提示信息自行切换图片

案例:爱奇艺、网易新闻

二.如何恰当地使用大图设计?

1. 先确定和优先考虑网站的目标。

2. 确定你所设计的每一个元素是否与网站的建设相符合。

3. 根据目标的重要性分配视觉的轻重级

4. 挑选的图片应该与品牌效应相结合。

5. 选择引人注目的图片是为了起到吸引的作用。

6. 在更新你的网站时要精心挑选设计模式。

三.思考页面希望给用户传达内容的优先级和希望达到的效果。

1、找到最需要触达给用户的内容,将次要内容放在次级位置展示

2、让它成为内容的一部分

3、砍掉不重要的推广图,直接展示内容



返回列表 返回列表
评论

    分享到