- 7
- 0
- 约2.18千字
- 约 12页
- 2021-07-21 发布于湖北
- 举报
换个角度看风景:手机产品设计之横屏模式
做设计的过程,是思大于行的过程。一个有价值的设计,不是设计多么华丽、多么创新就有多么
成功,那些优秀的设计师都会知道他为什么去做这样一款设计,他的设计本质价值是什么。互联网
产品或者手机产品更是如此,设计师要知道你的产品要解决一个什么核心问题,然后再提出一个足
够优雅的解决方案,这样才能解决用户的 痛点“ ”问题,给予用户最贴心的设计。
在我刚开始做设计的时候,就很喜欢在一些细节之处增加复杂的动画效果,来彰显设计的标新立异
,但是殊不知,每个动画都是有它的意义所在的,或者是减少操作的等待感,或者是让过渡变得平
滑圆润,或者是提供有效的反馈,而我想增加的复杂动画,不过是为了设计而设计,这样增加开发
成本又没有意义的设计,多半是被拍死在萌芽状态的。
至于横屏策略,我遭遇过设计上的 bad case ,在掌上百度 Android 版设计之初,完全没有考虑到横屏
模式,首页 4 ×4的快捷入口,如果到横屏模式只是简单的拉伸适配的话,横屏模式下的 4 ×4导致了空
间的浪费,且快捷入口的收起按钮已经在屏幕之外了。工程师到开发阶段,才来问我,于是最后江
湖救急,横屏模式下采用重拍而不是拉伸的策略,那么大概一行显示 6个, 3 行就显示下了,不过由
于快捷入口最多 16个,第三行只能显示 4个了,总之就是玩了一次不对称美,非常失败。之后的每
次设计,都会在以竖屏为主的情况下,预先设想横屏方案,这里有一些经验跟大家分享。
一、用户切换到横屏的动机?
做这个设计之前,让我们想搞清楚用户的动机。用户为什么会翻转手机?如果是一个正在输入地址
的用户,他横过屏幕,很可能是为了让程序展现出更大的输入空间,以便于更高效的完成输入任务
;如果是一个正在阅读新闻的用户,他横过屏幕,很可能是为了在一屏内看到更大的字体,或者更
多的内容,总之一定是为了让阅读体验变得更好;如果是一个正在玩游戏的用户,他横过屏幕,很
可能是为了两只手来协同操作游戏内容,达到沉浸式游戏的使用状态;如果是一个正在看视频的
用户,他横过屏幕,目的无非是以更符合比例的方式浏览视频,在有限的屏幕内看到更大的视频现
实区域;如果是一个正在进行幻灯片浏览的用户,他横过屏幕,目的一定是看到更大画幅的图片,
体验更加专注的图片浏览模式;如果是一个正在录音的用户,那么他横过屏幕(或者翻转屏幕),
很可能是为了离麦克风更近一些,让声音被更清晰的录制下来。不同的使用场景,用户对横屏模式
的预期是有所差异的,如果你所提供的横屏模式,不能在特定情况下给予用户他所预期的体验,那
么不如不要提供横屏模式。
那么,总结起来就是:
1. 游戏类 —— 沉浸式体验
2. 阅读类 —— 更大字体
3. 输入类 —— 更方便的输入
4. 视频类 —— 更合适的比例
5. 图片类 —— 更大的画幅
6. 语音类 —— 离麦克风更近
可以发现,用户在不同的使用情景、不同的应用类型下,对横屏的预期还是有所不同的,但是显而
易见的是,横屏模式大部分情况要么是为了弥补竖屏的不足 —— 字体小、键盘小、画幅比例不合适
,要么是用户希望横屏模式下能提供更华丽更花哨的感官体验,总之从竖屏到横屏的征途,并非那
么易如翻掌的。
二、各个平台的横屏差异?
1.IOS
拉伸适配:
iPad landscape 换个角度看风景 —— 手机产品设计之横屏模式
首屏界面:
Android landscape2 换个角度看风景 —— 手机产品设计之横屏模式
启动界面( Dashboard )
一个简单介绍应用程序的界面,显示主要功能和内容更新( A quick intro to an app, revealing
capabilities and proactively highlighting new content )
Symbian S60v3 landscape4 换个角度看风景 —— 手机产品设计之横屏模式
布局重排:
Symbian S60v5 landscape3 换个角度看风景 —— 手机产品设计之横屏模式
简单重排:
三、一些基本的策略
2.视频类的
5.工具类的
四 、设计策略
老外把竖屏模式叫做肖像模式,横屏模式叫做风景模式,虽然肖像模式和风景模式在布局
您可能关注的文档
最近下载
- 平凡的世界读书分享.ppt VIP
- 药物化学习题仉文升主编).pdf VIP
- 2025年山东济南高三一模数学试卷及答案.pdf VIP
- 2025年辽宁省委党校在职研究生招生考试(政治理论)历年参考题库含答案详解.docx VIP
- 保险双录标准话术.pptx
- 2025年辽宁省委党校在职研究生招生考试(法学)历年参考题库含答案详解.docx VIP
- 江苏省南通市2025年中考语文试卷(附答案解析).doc VIP
- 《人工智能在机械设计制造及其自动化中的实践》8900字.docx VIP
- 普传(POWTRAN)变频器PI500变频器使用说明书.pdf
- 最新部编版一年级数学下册教案(全册)表格式二次备课.doc VIP
原创力文档

文档评论(0)