换个角度看风景：手机产品设计之横屏模式指南.pdfVIP

换个角度看风景 ：手机产品设计之横屏模式 做设计的过程 ，是思大于行的过程。一个 价值的设计 ，不是设计多么华丽、多么创新就 多么 成功 ，那些优秀的设计师都会知道他为什么去做这样一款设计 ，他的设计本质价值是什么。互联网 产品或者手机产品更是如此 ，设计师要知道你的产品要解决一个什么核心问题 ，然后再提出一个足 够优雅的解决方案 ，这样才能解决用户的“痛点”问题 ，给予用户最贴心的设计。 在我刚开始做设计的时候 ，就很喜欢在一些细节之处增加复杂的动画效果 ，来彰显设计的标新立异 ，但是殊不知 ，每个动画都是 它的意义所在的 ，或者是减少操作的等待感 ，或者是让过渡变得平 滑圆润 ，或者是提供 效的反馈 ，而我想增加的复杂动画 ，不过是为了设计而设计 ，这样增加开发 成本又没 意义的设计 ，多半是被拍死在萌芽状态的。 至于横屏策略 ，我遭遇过设计上的bad case ，在掌上百度A ndro id版设计之初 ，完全没 考虑到横屏 模式 ，首页4 ×4 的快捷入口 ，如果到横屏模式只是简单的拉伸适配的话 ，横屏模式下的4 ×4导致了空 间的浪费 ，且快捷入口的收起按钮已经在屏幕之外了。工程师到开发阶段 ，才来问我 ，于是最后江 湖救急 ，横屏模式下采用重拍而不是拉伸的策略 ，那么大概一行显示6个 ，3行就显示下了 ，不过由 于快捷入口最多16个 ，第三行只能显示4个了 ，总之就是玩了一次不对称美 ，非常失败。之后的每 次设计 ，都会在以竖屏为主的情况下 ，预先设想横屏方案 ，这里 一些经验跟大家分享。 一、用户切换到横屏的动机 ？ 做这个设计之前 ，让我们想搞清楚用户的动机。用户为什么会翻转手机 ？如果是一个正在输入地址 的用户 ，他横过屏幕 ，很可能是为了让程序展现出更大的输入空间 ，以便于更高效的完成输入任务 ；如果是一个正在阅读新闻的用户 ，他横过屏幕 ，很可能是为了在一屏内看到更大的字体 ，或者更 多的内容 ，总之一定是为了让阅读体验变得更好 ；如果是一个正在玩游戏的用户 ，他横过屏幕 ，很 可能是为了两只手来协同操作游戏内容 ，达到沉浸式游戏的使用状态 ；如果是一个正在看视频的 用户 ，他横过屏幕 ，目的无非是以更符合比例的方式浏览视频 ，在 限的屏幕内看到更大的视频现 实区域 ；如果是一个正在进行幻灯片浏览的用户 ，他横过屏幕 ，目的一定是看到更大画幅的图片 ， 体验更加专注的图片浏览模式 ；如果是一个正在录音的用户 ，那么他横过屏幕 （或者翻转屏幕 ）， 很可能是为了离麦克风更近一些 ，让声音被更清晰的录制下来。不同的使用场景 ，用户对横屏模式 的预期是 所差异的 ，如果你所提供的横屏模式 ，不能在特定情况下给予用户他所预期的体验 ，那 么不如不要提供横屏模式。 那么 ，总结起来就是 ： 1. 游戏类——沉浸式体验 2. 阅读类——更大字体 3. 输入类——更方便的输入 4 . 视频类——更合适的比例 5. 图片类——更大的画幅 6. 语音类——离麦克风更近 可以发现 ，用户在不同的使用情景、不同的应用类型下 ，对横屏的预期还是 所不同的 ，但是显而 易见的是 ，横屏模式大部分情况要么是为了弥补竖屏的不足——字体小、键盘小、画幅比例不合适 ，要么是用户希望横屏模式下能提供更华丽更花哨的感官体验 ，总之从竖屏到横屏的征途 ，并非那 么易如翻掌的。 二、各个平台的横屏差异 ？ 1.IO S 拉伸适配 ： 工具栏和导航栏会被压扁 操作图标会被缩小 列表项可显示更多文字 地址栏控件自动隐藏 输入法键盘和表单辅助按钮压扁 iPad landscape 换个角度看风景——手机产品设计之横屏模式 2.A ndro id 首屏界面 ： 信息重新组织 工具栏移动到屏幕右侧 A ndro id landscape2 换个角度看风景——手机产品设计之横屏模式 启动界面 （Dashboard ） 一个简单介绍应用程序的界面 ，显示主要功能和内容更新 （A uick int ro t o an app, revealing capabilit ies and proact ively highlight ing new co nt ent ） A ct io n bar简单拉伸适配 快捷入口简单重排 次要内容布局转移 3.S60v3 Symbian S60v3 landscape4 换个角度看风景——手机产品设计之横屏模式 布局重排 ： 系统状态信息栏拆分成两行 ，居屏幕上下 切换到横