iOS 8人机交互指南学习笔记(1)

翻译《iOS 8人机交互指南》到现在已经有 10 篇了,还有 3 篇就完成了对交互设计基础(UI Design Basics)部分的翻译。这一过程中,明显感觉翻译得越来越得心应手。看来万事在于练习,练习中才有成长。

边翻译边学习,有很多的感受。比如,觉得“ iOS 8 人机交互指南”这个名字起得很好。“指南”,一语道破这份文档的精髓。它真正是不仅教人知其然,还引导人理解知其所以然。不像我看到的一些手机 ROM 的交互规范文档,只是生硬地规定这个、规定那个,iOS 的文档真真是会解释几乎每一个设计的来龙去脉,让大家体会其精华所在。了解了设计的原因,才能更加融会贯通地使用这些交互设计。不是所有的交互规范都能成为交互指南,但私以为还是要努力向指南的方向发展。因为 ROM 的交互设计实在太复杂,总有暂时考虑不到的细节,想要涵盖所有的方面是不可能的,所以更重要的是要传达一种设计的思路,大家循着统一的思路去琢磨,更容易达成整个 ROM 的风格一致。

整个 iOS 8 的思路其实就是更加凸显内容和功能。所谓的扁平化只是表象而已,iOS 8 真正想做的是去掉不必要的装饰,从而让内容获得用户的更多关注。这种去繁化简不仅是手机 ROM 的设计风格转变,也是整个设计领域追求风格的潮流。比如我今天刚看的一篇微信公众号文章《从万科 logo 升级看 logo 设计发展趋势》,讲的就是 logo 设计的发展趋势,同样是追求更加简洁清晰的风格。

除此之外,还通过文字的调节、层次的展现、自然的动效,来让内容得以更好地表达。可以说,iOS 8 中所有的交互设计都是充分展示内容的手段。而对于第三方的 app 而言,也要尽可能遵循 iOS 8 的统一设计,这样整个手机才会保持一致的风貌。

在阐述了整体设计思路之后,iOS 8 人机交互指南开始围绕这一思路进行设计上的具体描述。

比如横屏竖屏。就我个人而言,在手机上,除了看视频、电子书时会横竖屏切换,其余的 app 中,很少会想到要进行切换。但是看 HIG (iOS 8 人机交互指南的简称)时,上面提到开发者要尽可能在横竖屏上都满足用户。当时我就觉得很奇怪,这样有必要么?于是我把 iPhone 上当前安装的 app 逐个试用了一下,看看它们对横竖屏的支持情况。

结果发现,大部分同时支持横屏竖屏的都是 iOS 系统自带的 app,其他少部分是地图类、浏览器类、相机类、视频类、阅读类的 app。

(1)系统自带 app :整个应用都支持横屏和竖屏。这里又分两种情况,一种是功能内容相同,仅切换布局,如短信、通讯录、iBook、相机;另一种是通过横屏竖屏来显示不同的功能内容,例如计算器、股票、日历。

短信-竖屏
短信-横屏
计算器-竖屏
计算器-横屏

(2)浏览器类 app 和地图类 app :整个应用都支持横屏和竖屏。比如 QQ 浏览器、safiri 浏览器、UC 浏览器、系统自带地图、百度地图等。

QQ浏览器-竖屏
QQ浏览器-横屏
地图-竖屏
地图-横屏

(3)视频类 app、阅读类 app :这类 app 是在播放或者阅读界面支持横竖屏切换,但应用本身并不支持横竖屏切换。例如优酷视频、多看阅读等。

优酷视频-竖屏
优酷视频-横屏
多看阅读-竖屏
多看阅读-横屏

这里要提一个特别的 app,就是虾米音乐。虾米音乐播放音乐时如果切换为横屏,会变成一个卡带的样子,非常有意思,带给人一种不曾期待的惊喜。

虾米音乐-竖屏
虾米音乐-横屏

手机现在已经成为人们极为依赖的一款智能设备,也包含了越来越丰富的内容。如果说它有什么缺点的话,可能首当其冲的就是屏幕不够大。现在手机往大屏方向发展,可是再大又能大到什么程度呢?再大就是平板乃至电脑了。而且大到一定程度,便携的优点便不再了。所以据说三星致力于发展投影技术试图解决屏幕不够大的问题,还有现在比较时髦的跨设备多屏互联、积木手机等,应该都是以解决手机屏幕不够用为目标的。有点跑题了,其实我想说的是,也许在目前的情况下,通过横竖屏的切换也许是一种解决手机屏幕不够用的思路。把一些不常用但有用的功能巧妙地隐藏在横屏界面,这样既能方便地调起、又不至于干扰最常用功能的使用,比如上面提到的计算器和虾米音乐都是很棒的例子。

除了横竖屏切换,HIG 中对启动界面这个事儿也是非常强调。这里要解释几个概念,因为我发现很多人和我一样很困惑。HIG 这里的启动界面,指的是 splash screen,也就是每次启动应用时一闪而过的那个界面。比如简书 app 的启动界面。这些启动界面主要是为了给 app 启动并展示内容预留充足的时间,有点像舞台表演前大幕拉下的感觉,等待万事俱备了再启幕。有时这些启动界面甚至被用来做广告,比如新浪微博的启动页面。。。

简书启动界面

还有一种新手引导(onboarding experience),它的形式有多种。比如首次安装 app 后启动,会有 3-4 页界面展示 app 具有的特色功能,有时还会捎带介绍使用方法,我特别喜欢收集这些新手引导页面,大家感兴趣的可以看看我在花瓣里的收集,已经有 700+ 幅了。还有就是在 app 界面蒙上黑色蒙版,有小提示说明如何使用,这叫做 onscreen overlays,例如下面的花瓣 app。

花瓣 app 新手引导

无论启动界面还是新手引导,它们都算是一种启动体验(startup experience)。对于启动界面,HIG 认为应该尽可能避免,不过还是提供了加载文件(launch file or image)。而对于 Android 的规范,Google 则提倡根本不应该显示单独的图片,而应该显示 app 的框架。以知乎和知乎日报为例,对比如下图(很好玩的是同一家公司的产品,刚好一个正例一个反例,下面用的是 iOS 的截图,Android 版的截图也是类似的):

知乎-启动页面
知乎-页面
知乎日报-启动页面
知乎日报-页面

不过就个人的喜好,我并不喜欢 app 框架这种方式,因为有种卡住了、死机了的感觉。还是显示图片更赏心悦目,图片带内涵的就更有意思的了(@_@),哦不,我是说像知乎日报这样高大上的图片我最喜欢了(^_^)。

而新手引导嘛,虽然对于很多产品和交互而言,可能很喜欢这种风格,也依赖这种方式来传达很多讯息。但 HIG 却认为这是一种不好的体验。因为用户对于这些内容通常快速划过,根本不会认真查看,反而觉得很麻烦。而且真正好的设计应该是让用户不怎么学习就能迅速上手的,而不是要阅读什么指南和教程才会用。如果确实有必要,才再用户刚好要用到的时候出现提示,而不是一开始就想把所有的东西全都教给用户。这里要提到一下微信,它的漂流瓶功能就很好地实践了这一点。当你点“捡一个”,然后有段时间没有操作时,微信便猜测用户可能遇到问题了,这时会出现文字提示“打开瓶子”,这样子对用户而言的“及时雨”,才是真正有用处的提示。另外,无论自认为新手引导制作得多么精彩绝伦,也一定要提供“跳过”按钮,让用户可以尽快开始对 app 的使用。

新手引导就是给 app 打了一个大大的广告。广告过后,总该让用户一睹为快了吧?可是,偏偏有很多 app 还为用户设置一道拦路虎,那就是登录。个人使用 app 过程中,我最烦这种,这也是 HIG 所反对的。因为用户对你还一无所知呢,凭什么让用户费时费力还泄露个人信息地登录呢?这真是眼睁睁地逼用户转身离开啊。这里,一般产品人员都会采用三种方式来处理:一是提供游客模式,让用户随便逛逛,喜欢了再注册;二是让用户通过微信、微博等第三方登录;三是尽可能把登录界面做得简单有趣,比如只输入一个手机号就能立即登录等。三种方法各有优劣,基本思路都是用最简单的方式让用户登录开始使用和了解 app,稍后再通过做任务等各种鼓励方式让用户把注册信息补全。

就像淘宝买东西时买家的评价特别重要一样,app 的打分和评价也对吸引其他新用户有重要意义。所以 app 的开发者无所不用其极地吸引用户打分。各种卖萌撒娇地邀请用户评分,不评分就是“残忍地拒绝”。第一次见到这种话术时会觉得好玩,但看多了就索然无味了,既然曾经对一个 app “残忍过”,那就不在乎对其他 app 再多“残忍”几次。而且,评分的时间点要选好,不要用户还没怎么用过 app 呢就让用户评分,用户还没完全熟悉 app,打的分和给出的评价都不够有说服力。另外,看淘宝就知道了,好评一般是默认好评,差评才有用户会码很多字。除此之外,要吐槽的就是 App Store 的评分流程太繁琐了,因为我真的有一次想要支持一下某款 app,结果发现给个评价打个分太难了,所以最终半途而废。因此,针对这个问题,除非 App Store 让评分更加容易,不然这点很难有很大改进。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 197,814评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,124评论 2 375
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 144,814评论 0 327
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,924评论 1 268
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,815评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,562评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,944评论 3 388
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,582评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,859评论 1 293
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,881评论 2 314
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,700评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,493评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,943评论 3 300
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,115评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,413评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,978评论 2 343
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,182评论 2 339

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,965评论 4 60
  • Swift版本点击这里欢迎加入QQ群交流: 594119878最新更新日期:18-09-17 About A cu...
    ylgwhyh阅读 25,226评论 7 249
  • 踩着地上的浅水溅湿了裤脚 雨啪嗒嗒打在伞上 自成一派的节奏 自娱自乐的心情 似乎整个城市都变得低声细语 路上的行人...
    C_zhaoxia阅读 233评论 0 1
  • 据说因为夜华,赵又廷涨了好多粉,除了赵又廷的演技,自然跟夜华这个人物设定有很大关系,因为夜华不仅仅深情,而且高智商...
    元元阅读 307评论 2 1