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

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

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

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

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

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

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

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

拉伸适配:

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

首屏界面:

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

启动界面(Dashboard)

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

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

布局重排:

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

简单重排:

V5的屏幕比较细长,横屏模式下的纵向空间显得格外宝贵,一般要重新设计带侧滑键盘的机型,和不带侧滑键盘的v5机型,在横屏策略上稍有不同带侧滑键盘机型,展开侧滑键盘,工具栏还在屏幕下方不带侧滑键盘的机型,横屏模式下,工具栏应该放在屏幕右侧
三、一些基本的策略1.游戏类的
游戏类的,如果是横屏模式下用户的游戏体验
最好,不妨在游戏启动时,就直接切换到横屏。强制横屏,不需要tips提醒用户,只要用横向的启动画面引导当用户看到Splash是横向的时候,自然会知道要把屏幕翻转了如果默认横屏的话,最好把有实体按键的那一边放在右手侧,这样方便用户用它熟悉的那只手进行操作

2.视频类的

视频类的,可以当用户在点播放之后,以一个合适的引导动画效果,切换到横屏模式当然如果用户已经锁定为不要旋转屏幕了,还是不要强制横屏的好横屏模式下,如果是为了帮助用户关注到内容本身的应用,是可以把导航栏和工具栏设置为透明的,或者让导航栏和工具栏可以自动隐藏当然,如果用户需要的时候,单击一下空白处,又可以以唤起操作栏3.图片类的
图片类的,如果是那种相册集,可以明确的知道横屏模式是最适合浏览的那么可以在进入幻灯片模式之后,自动切换到横屏,可以默认全屏,只给出关键的操作图标小部分用户视图翻转屏幕,切换回竖屏模式,这部分用户,我们应该给他提供一个锁屏功能4.阅读类的
阅读类的,用户需要看到更大的字体,尽可能的提升阅读体验为了把干扰降到最低,导航栏和工具栏是可以自动隐藏的,当用户需要的时候,再次轻触屏幕唤起导航栏和工具栏尽量不要蛮横的遮住系统的状态栏,如果一定要全屏模式,可以在自己的界面内部给出系统状态——电量、信号和时间

5.工具类的

可以有自己独立的UI界面,横屏沿用竖屏的设计风格,只是布局进行调整注意结构的可识别性,横屏的结构要有利于双手操作,竖屏有利于单手操作6.其他类的

必要的时候,可以重新设计但要注意,最好避免重新载入内容,因为那样会让你的横屏切换效率降低

四、设计策略1. 手机产品跨平台横屏模式设计原则无论什么方向,都保持对主任务的关注注意你的动画效果有时候需要重新设计从竖屏开始导航栏和工具栏会被压扁四面兼顾要做就要做全别丢了之前的位置

2.平板产品跨平台横屏模式设计原则要在所有方向下都能运行,尽力满足用户需求考虑改变展示辅助信息和功能的方式避免随意改变布局如果可能的话,应该尽量避免重组信息,重排文字为每一种方向提供独特的启动图片

老外把竖屏模式叫做肖像模式,横屏模式叫做风景模式,虽然肖像模式和风景模式在布局上略有差异,但是界面的聚焦点一定是在用户关注的功能和流程上,elya关于横屏策略这些粗浅的研究仅供抛砖引玉之用,希望对你能有所帮助。

源地址:http://elya.cc/mobile/955.html

时间: 2024-08-18 06:42:52

换个角度看风景:手机产品设计之横屏模式的相关文章

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

文章描述:换个角度看风景--手机产品设计之横屏模式. 做设计的过程,是思大于行的过程.一个有价值的设计,不是设计多么华丽.多么创新就有多么成功,那些优秀的设计师都会知道他为什么去做这样一款设计,他的设计本质价值是什么.互联网产品或者手机产品更是如此,设计师要知道你的产品要解决一个什么核心问题,然后再提出一个足够优雅的解决方案,这样才能解决用户的"痛点"问题,给予用户最贴心的设计. 在我刚开始做设计的时候,就很喜欢在一些细节之处增加复杂的动画效果,来彰显设计的标新立异,但是殊不知,每个动

换个角度看AJAX的七宗罪

ajax 我觉得以上说的7宗罪是站在门户网站的角度来说的,如果换个角度,比如做企业服务应用软件b/s版(特别是用asp.net做的),我反而认为是7个优点. 罪之一:对搜索引擎的支持不好.(企业服务应用软件b/s版是用企业用,不需要理会搜索引擎) 罪之四:破坏了Web的原有标准.(能用就行,这么学究干嘛) 罪之五:缺少一个没有标准之争.没有back和history的浏览器(企业服务应用软件b/s版客户端(特别是用asp.net做的)基本都是IE) ------------------------

换个角度看革命 对创业的若干启发

我的挚友袁君,在大学里教授"毛泽东MZD思想".我们无话不谈,无话不欢,只是一旦谈起MAO来,我们的冲突就很激烈,立即鸡同鸭讲地争论起来,彼此谁也说服不了谁. 后来,他为了教育我,换了一个角度,说:MAO当年革命的时候,跟你现在创业的情况很类似,你不妨以一个创业者的角度来看MAO,尤其是49年前的MAO.这倒的确是个有意思的角度,于是按照他的要求,买了本<毛泽东传>(-1949).还没等来得及看,就参加了新闻办组织的"红色故土行之广西百色行"活动.几乎所

photoshop怎么把普通风景图设计成超赞的参展作品

          photoshop怎么把普通风景图设计成超赞的参展作品 分类: PS入门教程

Photoshop合成坐在竹筏上看风景的美丽新娘

  本教程主要使用Photoshop合成坐在竹筏上看风景的美丽新娘,婚纱照的拍摄一般分为室内和外景两种,外景美观自然,但价钱也比较贵,而且如果是外地的外景更是价格不菲,相信很多已婚的朋友家里一定有不少拍婚纱时留下的毛片,即室内拍摄但又没有帮你进行处理的照片,其实不要太复杂的步骤就能自己进行处理,效果不一定比影楼的差,有兴趣的朋友一起来学习一下吧. 效果图 原图一 原图二 1.如果要进行外景合成,一般要先找一张漂亮的外景图,可以上百度的图片搜索,非常多,这里选用一张武夷山的竹排图作为背景,先在ph

从前轻后重看产品的设计原则

本文作者Kant,分享了从前轻后重看产品的设计原则.产品中国摘录如下: 我做产品,最喜欢前轻后重.这是我最喜欢的原则,如果它可以算作原则的话.它是一条相当普适的原则,从各个角度去理解,都有意义. 流程体验上的前轻后重 前轻后重最让用户感知到的,是流程体验上的前轻后重.它是体现在用户解决需求,完成任务的过程中的. 举个例子,在比较完善的淘宝开店系统内,开店的步骤如下: 选择开哪种店 填详细信息 上传验证材料 在线考试 填写店铺和商品信息. 用户在一步一步地完成任务的过程中,先只是做出轻量的选择(选

ios-在WeeApp中的横屏模式

问题描述 在WeeApp中的横屏模式 需要横屏模式下,在widget中心做一个标签. [[UIDevice currentDevice] beginGeneratingDeviceOrientationNotifications]; if (([[UIDevice currentDevice] orientation] == UIDeviceOrientationLandscapeLeft) || ([[UIDevice currentDevice] orientation] == UIDevi

微信横屏模式在哪开启?微信横屏模式设置方法

1.我们在手机登录微信 之后我们点击"我"--"设置"--"通用"打开进入,细节如下图所示; 2.然后你会看到有一个开启横屏模式的按钮,开启为绿色即可,如下图所示. 这样设置好了微信就会显示出横屏效果了.

手机产品设计方向

伴随着手机系统越来越多越来越杂,以及不断的推出新的手机系统,对于手机产品设计来说都将会是新的挑战,是一套多用,还是设计多套?K-JAVA是否将死亡?WindowsPhone7能够带来多少惊艳?Android和iPhone的战争谁是胜者--但有一点可以确定,手机产品设计的方向将迎来新的起点. 首先认清手机用户,为手机用户单独设计的产品:必须面对手机用户进行推广和销售,实现自身价值.其推广.下载.注册.使用.消费必须全部在手机端完成.3G让手机网速的提升,iPhone的wifi功能的添加,Andri