交互方式

移动端的交互方式

移动端内容组织的特点,移动端与PC端交互方式的区别,移动端的事件

2018-09-06侠课岛    初级拔高       

前端/前端/响应式网站基础入门 23     0     4719

移动端内容组织的特点

因为移动端的宽高并不像PC浏览器那样固定,移动设备的物理大小也很受限,所以其内容的组织形式形成了自己的特点,其大致可以分为:列表,网格,轮播,卡片四种形式

列表

列表的形式非常常见,其通常会和标签栏一起使用,切换不同的标签呈现不同类别的列表,在移动端的交互中,列表的数据可以利用上拉加载以及下拉刷新来实时更新,单击列表项则多为进入该条目下的详情页

****流式布局****淘宝列表

上图是淘宝的商品列表,这种形式可以比较直观的向我们展示当前内容的关键信息

网格

网格是将图标,略缩图等内容组织成规则的行列形式,点击后进入的下一级,内容通常为类目细节内容视图,网格可以很好的在有限的界面中组织数量较多的类目.

淘宝网格

上图是淘宝的首页截图,利用网格,淘宝将不同类别的入口排列在首页中,并根据不同类别的重要性以及特点,将网格的尺寸做了适当的划分,使得不同入口有一个较合理的排列.这种方式在国内很多应用中均有运用.

轮播

轮播是一个在固定区域内,通过轮播显示切换的一个提示工具,大部分的轮播都是在固定的时间从头到尾将显示内容依次展示,不同的产品设计师会根据其交互特点设计其独有的显示方式.

淘宝banner

上图是淘宝的banner,大部分的公司都会利用banner来做一些内容推荐或者商业广告的展示,通常采用的是图片的形式,每一项都是独立的内容,采用自动播放的形式自动切换到下一张.

卡片

卡片是随着移动端的发展,一种新型的交互方法,其本质是列表的升级改良,里面可以包含媒体文本,网页链接以及交互动作

淘宝卡片

上图是淘宝的精选卡片,其中封装了各类信息、图片以及交互控件,右下角可以点赞.像是微博等应用的卡片还可以实时播放视频及音频.

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

23

本课评分:
  •     非常好
难易程度:
  •     适中的
|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?