今天完成的事情：
1.与师兄交流以后, 自己又看了半天,下午才对滚动视图的概念有了新的理解:
网页的内容分为页头,页尾,以及滚动视图,
任务二里面调研了网页的设计方式,画了页头页尾的原型,,而任务四要解决的就是网页的内容部分,即滑动鼠标滚轮,进行页面上下滚动,从而查看网页内容,之前陷入了轮播图的误区,误以为只有在网页内滑动/点击鼠标可以进行切换的才属于滚动视图
2.网页轮播图的分析结果个人觉得不好使用列表,今天重写了一遍,加入了优缺点及适用场景
明天计划的事情：
先不写app的调研了,调的人脑阔疼,明天把web的原型画出来,如果还有时间的话
遇到的问题：
收获：
类型 | 名称 | 内容分类 | 排列方式 | 布局方式 | 备注 | 结果分析 |
视频类 | 爱奇艺 | 24 | 向下排列 | 自定义栅格+文本列表 | 使用自定义栅格显示图片卡片,使用文本列表显示榜单及资讯内容 | 视频类网站 |
| 百度 | 22 | 向下排列 | 自定义栅格+文本列表 | 使用自定义栅格显示图片卡片,使用文本列表显示榜单及资讯内容 | |
轮播图:
banner图1/2≤长≤1,1/3≤宽3/4;
长多大于1/2,宽多小于1/2,页面内容越丰富,banner图占比越小;
位置在页头下面,左侧或正中间;
banner图数量在3-10之间;
轮播间隔在3s-6s之间,多为五秒;
banner图数量越多,轮播间隔越小;
指示器:
指示器多为圆点,当前位置颜色多与应用底色相同；
多位于banner图内正下方;
交互动作多为鼠标移入指示器区域,指示器变色或放大,方便用户点击;
视频及阅读类网站指示器多为文本类型;
视频类网站的列表形指示器位于banner图右侧;
切换方式:
切换方式共有四种:自动轮播,箭头按钮,点击选择,滑动切换;
自动轮播为必有的切换方式;
点击选择及滑动切换可以直接到达指定页面, 指示器一般较小,用户点击选择速率较低,而滑动切换较为灵活,也会造成选择错误,两者在不同的方向增加了用户的使用成本,各有利弊;
鼠标移入轮播图,左右两侧箭头按钮出现;
箭头按钮每次只可切换到相邻页面,无法直接到达指定页面,所以部分网站不设置箭头按钮;
箭头按钮多在页面内部左右两侧,鼠标划入banner图浮现,有圆形,半圆形,方形等,不一而足;
其他:
直播类网站多采用首页直播视频+图片列表的形式,需手动点击切换;
部分网站指示器即箭头按钮位于轮播图外, 优点是便于辨认与点击,缺点是占据了额外的空间, 多应用于首页内容较少,banner图较大的网站.
.png)
返回列表
评论