2023年从竖屏设计思维转向横屏设计思维_第1页
2023年从竖屏设计思维转向横屏设计思维_第2页
2023年从竖屏设计思维转向横屏设计思维_第3页
2023年从竖屏设计思维转向横屏设计思维_第4页
全文预览已结束

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

从竖屏设计思维转向横屏设计思维本文2694字，阅读时间约10分钟。

竖屏收银台和竖屏设计思维下的横屏收银台

某新闻产品（iPad端）

②横向拉伸

页面中的元素大小不变，通过横向相对拉伸，增加元素的显示宽度或拉伸横向间距以达到填满横向空间的目的，适合阅读类场景，拉伸后单行可以显示更多文字。

某系统应用商店（iPad端）

2）分栏布局

竖屏状态下纵向空间富有，页面布局通常是上下结构，而横屏状态下纵向空间紧急，这就使得原本可以在首屏曝光的内容无法在首屏展现。这时候可以将上下结构变为更合适横屏的左右结构布局，左右分栏的宽度也可以随着不同内容的重要性而自定义。

分栏布局是横屏设计中比较常用的模式，适合众多场景，特殊是底部内容优先级较高需在首屏展现的状况，在横屏设计下可优先考虑此模式。背景引例中竖屏嬉戏联运收银台迁移到横屏下就是使用了分栏布局。

vivo嬉戏联运收银台（手机端）

3）差异布局

差异布局展现了和竖屏模式完全不同的布局方式，采纳了较为特殊、更适合横屏状态的布局结构，比如音乐产品的CoverFlow展现、金融产品的数据图表展现、嬉戏产品的横向卷轴关卡展现等等。

这种设计模式的门槛较高较少采纳，适合只有横屏场景的产品或特定横屏场景（图表、日历等）为其特别设计，需要考虑实际场景的适用性。

某日历产品（手机端）

某邮箱产品（iPad端）

某视频产品（iPad端）

2）主次组合

在主次组合中，左屏为主要内容，右屏为次要内容。比如用户可以在左屏看文章详情、视频内容，在右屏进行评论的消费和互动；又比如用户可以在左屏看商品或应用详情，右屏看相关商品或应用评论，帮助购买和下载决策。

这种设计模式下可以同时扫瞄主次内容，右屏内容依靠于左屏内容，并起到帮助左屏内容的作用。

某视频产品（iPad端）

3）并列组合

在某些情景下，用户需要对比两个同类型页面。竖屏模式下跨页面对比步骤极为简单且不直观，用户的记忆成本大，而横屏双页面模式下，用户可以同时扫瞄两个内容详情，适用于不同商品对比的场景，更加高效直观。

某购物产品（手机端折叠屏）

四、总结

综上所述，横屏设计场景下有两大类横屏设计模式，包括横屏单页面设计模式（拉伸布局、分栏布局、差异布局）和横屏双页面设计模式（父子组合、主次组合、并列组合），不同类型及其适用场景和增益效果如下表所示：在实际运用中需要留意辨别横屏场景，具备横屏设计意识，从竖屏设计思维向横屏设计思维转变。

横屏设计模式的使用步骤建议如下：

依据设备大小来找到合适的横屏设计模式大类，一般来说双页面模式比单页面模式更适合大屏设备，可以更好地发挥横屏优势；依据不同大类下横屏设

人人文库> 全部分类> 应用文书 > 资格认证

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论