移动端屏幕越来越大，但用户对内容量的要求也水涨船高。如何在有限的屏幕内透出更多的内容，是设计师们研究的重点。

​

　　常用的内容拓展设计有：Y方向List滑动、Z方向3D Touch、入口式内容折叠等。今天想和大家聊的，是其中的“左右横滑”卡片式交互设计。

　　所谓的“左右横滑”交互英文名叫做“Horizontal Scrolling Lists”，最早可能起源于Windows Phone的横向内容滑动设计。用于在同一个页面的X轴方向拓展内容空间，“左右横滑”的交互方式被广泛应用于各类App中。

　　而当网站的图片过多时，为确保图片的可读性，图片的尺寸不能太小，纵向展示只能用较多的页面空间，也不利于视觉上的美观，因此，大部分手机网站建设者会使用横向滑动的设计方式。今天小编就给大家讲讲横向滑动的设计有哪些问题需要注意。

　　单页多维度的信息结构是“左右横滑”最适合的应用场景。传统的List适合纵向无限呈现单一属性的内容（比如朋友圈或知乎的回答），而对于App首页等多种信息聚合的页面，就适合横向开拓内容维度。

　　以最新版的Airbnb为例，它将首页分割为Banner、热门体验、体验、房源、旅游目的地精选等多个维度，每个维度单独占据一整行，并展现并列的内容。再看iOS App Store，也是将页面分为诸多维度，把不同的应用分类呈现。

　　横向滑动设计的内容以卡片式设计为主，利用卡片式设计多层次展示核心内容，有效整合内容的优势，让内容展示更清晰、有条理。

　　这里要注意卡片的尺寸，在保证内容的可读性情况下，设计一个合理的尺寸，使板块内容具有引导性，即一屏以内，卡片的可见数量是两个板，有一个卡片的内容是半隐藏的，以此引导用户左右滑动查看内容。这也能保证上下模块可预见性，引导用户纵向滑动浏览。

　　做内容的视觉引导，还要注意卡片内容文案的表达要简洁明了，要清晰告知用户内容。

　　手机网站建设使用横向滑动设计展示内容，还要注意内容的数量，适当即可，过多的内容展示难免会有重复，容易让用户觉得无聊，太少的内容不能满足用户强需求，也显得横向滑动设计很多余。

　　横向滑动设计在手机网站中的很多版块都能使用，但是一个页面内不能都是用这种设计，不然会显得单调、没有特色。

本页内容由塔灯网络科技有限公司通过网络收集编辑所得，所有资料仅供用户学习参考，本站不拥有所有权，如您认为本网页中由涉嫌抄袭的内容，请及时与我们联系，并提供相关证据，工作人员会在5工作日内联系您，一经查实，本站立刻删除侵权内容。本文链接:http://www.dengtar.com/4032.html