手机横屏模式设计:用户关注的功能和流程

http://www.itjxue.com  2015-08-07 21:16  来源:未知  点击次数: 

做设计的过程,是思大于行的过程。一个有价值的设计,不是设计多么华丽、多么创新就有多么成功,那些优秀的设计师都会知道他为什么去做这样一款设计,他的设计本质价值是什么。互联网产品或者手机产品更是如此,设计师要知道你的产品要解决一个什么核心问题,然后再提出一个足够优雅的解决方案,这样才能解决用户的“痛点”问题,给予用户最贴心的设计。

在我刚开始做设计的时候,就很喜欢在一些细节之处增加复杂的动画效果,来彰显设计的标新立异,但是殊不知,每个动画都是有它的意义所在的,或者是减少操作的等待感,或者是让过渡变得平滑圆润,或者是提供有效的反馈,而我想增加的复杂动画,不过是为了设计而设计,这样增加开发成本又没有意义的设计,多半是被拍死在萌芽状态的。

至于横屏策略,我遭遇过设计上的bad case,在掌上百度Android版设计之初,完全没有考虑到横屏模式,首页4×4的快捷入口,如果到横屏模式只是简单的拉伸适配的话,横屏模式下的4×4导致了空间的浪费,且快捷入口的收起按钮已经在屏幕之外了。工程师到开发阶段,才来问我,于是最后江湖救急,横屏模式下采用重排而不是拉伸的策略,那么大概一行显示6个,3行就显示下了,不过由于快捷入口最多16个,第三行只能显示4个了,总之就是玩了一次不对称美,非常失败。之后的每次设计,都会在以竖屏为主的情况下,预先设想横屏方案,这里有一些经验跟大家分享。

一、用户切换到横屏的动机?

做这个设计之前,让我们想搞清楚用户的动机。用户为什么会翻转手机?如果是一个正在输入地址的用户,他横过屏幕,很可能是为了让程序展现出更大的输入空间,以便于更高效的完成输入任务;如果是一个正在阅读新闻的用户,他横过屏幕,很可能是为了在一屏内看到更大的字体,或者更多的内容,总之一定是为了让阅读体验变得更好;如果是一个正在玩游戏的用户,他横过屏幕,很可能是为了两只手来协同操作游戏内容,达到沉浸式游戏的使用状态;如果是一个正在看视频的用户,他横过屏幕,目的无非是以更符合比例的方式浏览视频,在有限的屏幕内看到更大的视频显示区域;如果是一个正在进行图片浏览的用户,他横过屏幕,目的一定是看到更大画幅的图片,体验更加专注的图片浏览模式;如果是一个正在录音的用户,那么他横过屏幕(或者翻转屏幕),很可能是为了离麦克风更近一些,让声音被更清晰的录制下来。不同的使用场景,用户对横屏模式的预期是有所差异的,如果你所提供的横屏模式,不能在特定情况下给予用户他所预期的体验,那么不如不要提供横屏模式。
那么,总结起来就是:
1. 游戏类——沉浸式体验
2. 阅读类——更大字体
3. 输入类——更方便的输入
4. 视频类——更合适的比例
5. 图片类——更大的画幅
6. 语音类——离麦克风更近

可以发现,用户在不同的使用情景、不同的应用类型下,对横屏的预期还是有所不同的,但是显而易见的是,横屏模式大部分情况要么是为了弥补竖屏的不足——字体小、键盘小、画幅比例不合适,要么是用户希望横屏模式下能提供更华丽更花哨的感官体验,总之从竖屏到横屏的征途,并非那么易如翻掌的。

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

1.IOS

IOS landscape1 换个角度看风景——手机产品设计之横屏模式

IOS landscape2 换个角度看风景——手机产品设计之横屏模式

拉伸适配:

  • 工具栏和导航栏会被压扁
  • 操作图标会被缩小
  • 列表项可显示更多文字
  • 地址栏控件自动隐藏
  • 输入法键盘和表单辅助按钮压扁

iPad landscape 换个角度看风景——手机产品设计之横屏模式

2.Android

Android landscape 换个角度看风景——手机产品设计之横屏模式

 

首屏界面:

  • 信息重新组织
  • 工具栏移动到屏幕右侧

Android landscape2 换个角度看风景——手机产品设计之横屏模式

启动界面(Dashboard)

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

  • Action bar简单拉伸适配
  • 快捷入口简单重排
  • 次要内容布局转移

3.S60v3

Symbian S60v3 landscape 换个角度看风景——手机产品设计之横屏模式

Symbian S60v3 landscape2 换个角度看风景——手机产品设计之横屏模式

Symbian S60v3 landscape3 换个角度看风景——手机产品设计之横屏模式

Symbian S60v3 landscape4 换个角度看风景——手机产品设计之横屏模式

 

布局重排:

  • 系统状态信息栏拆分成两行,居屏幕上下
  • 切换到横屏模式后,由于实体按键在屏幕右侧,所有跟实体按键相关的操作要迁移的屏幕右侧,产生对应关系
  • 次要信息由页面顶端迁移到底端
  • 如果是工具类应用,界面可以变成左右布局

4.S60v5

Symbian S60v5 landscape 换个角度看风景——手机产品设计之横屏模式

Symbian S60v5 landscape2 换个角度看风景——手机产品设计之横屏模式

Symbian S60v5 landscape3 换个角度看风景——手机产品设计之横屏模式

Symbian S60v5 landscape4 换个角度看风景——手机产品设计之横屏模式

简单重排:

  • V5的屏幕比较细长,横屏模式下的纵向空间显得格外宝贵,一般要重新设计
  • 带侧滑键盘的机型,和不带侧滑键盘的v5机型,在横屏策略上稍有不同
  • 带侧滑键盘机型,展开侧滑键盘,工具栏还在屏幕下方
  • 不带侧滑键盘的机型,横屏模式下,工具栏应该放在屏幕右侧

(责任编辑:IT教学网)

更多