android横屏ui,换个角度看风景 手机产品UI设计之横屏模式(2)

二、各个平台的横屏差异?

1.iOS

1885c9849e9fa173175ecafc692cd91f.png8600a935c85951cc991a4eadba231231.png

拉伸适配:

工具栏和导航栏会被压扁

操作图标会被缩小

列表项可显示更多文字

地址栏控件自动隐藏

输入法键盘和表单辅助按钮压扁

abf5a39f6030713123cdfa47d0f79a9d.png

2.Android

93d482b5208ca89d23c0d2784a2ec632.png

首屏界面:

信息重新组织

工具栏移动到屏幕右侧

a1d607c6fb0c9069a19b1c1d3cbb62b0.png

启动界面(Dashboard)

一个简单介绍应用程序的界面,显示主要功能和内容更新(A quick intro to an app, revealing capabilities and proactively highlighting new content)

Action bar简单拉伸适配

快捷入口简单重排

次要内容布局转移

3.S60v3

9e5b63aa170a0b876a17f69f15c2f809.pngef684935aa2fca3c3f1565dd83da3eac.pngc3a47755067e43fe53e21311cc4146a9.png88b7a920871fc24f6d7a00a705d9c210.png

布局重排:

系统状态信息栏拆分成两行,居屏幕上下

切换到横屏模式后,由于实体按键在屏幕右侧,所有跟实体按键相关的操作要迁移的屏幕右侧,产生对应关系

次要信息由页面顶端迁移到底端

如果是工具类应用,界面可以变成左右布局

4.S60v5

fccdc6ea1a9a18c2518cb877af88c1bd.pngd3524973d83957caec0f4a6d076fe93d.png0954ae053a2656b533d6cfae9b8ef983.png6df32f005c467bb7ce29e6020b29b391.png

简单重排:

V5的屏幕比较细长,横屏模式下的纵向空间显得格外宝贵,一般要重新设计

带侧滑键盘的机型,和不带侧滑键盘的v5机型,在横屏策略上稍有不同

带侧滑键盘机型,展开侧滑键盘,工具栏还在屏幕下方

不带侧滑键盘的机型,横屏模式下,工具栏应该放在屏幕右侧

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值