产品设计:iPhone物理按键背后的设计逻辑

众所周知,iphone自2007年发布以来,其卓越的颜值与体验一直是设计界的标杆。文章对iphone的设计细节进行了分析,让我们一起去探索大师级iphone设计细节之物理按键的变迁与设计逻辑吧。 从iphone历代手机按键变化看,其中最大的变化莫过于开关机键的位置变化。 从第一代iphone到第七代iphone5c和i…

众所周知,iphone自2007年发布以来,其卓越的颜值与体验一直是设计界的标杆。文章对iphone的设计细节进行了分析,让我们一起去探索大师级iphone设计细节之物理按键的变迁与设计逻辑吧。

从iphone历代手机按键变化看,其中最大的变化莫过于开关机键的位置变化。

产品设计:iPhone物理按键背后的设计逻辑

从第一代iphone到第七代iphone5c和iphone5s(包括后推出的iphoneSE),开关机键一直位于手机顶部,而从iphone6开始,开关机键便转移到右侧,这其中隐藏着怎样的设计原理呢?

还有为什么iphone的五个物理按键安排在不同的空间位置呢(暂不考虑取消Home键的iphone8之后的系列手机,下面不再赘述)?为什么设计师要把静音键和加减音量键设计成造型不同的按键?

让我们一起去看看吧~

(说明:由于本文花了较大篇幅论证,难免会有许多赘述,为了节省读者阅读时间,只需看结论的朋友可以直接略过正文查看文末小结。)

01 iPhone开关机键为什么由顶部改到右侧?

首先让我们看看历代iPhone机身尺寸。

由下表可以看出,从第一代iphone到第五代iphone4s,机身高度非常稳定,基本维持在115~115.5 mm。到了iphone5、iphone5c、iphone5s、iphoneSE,机身高度基本维持在124mm左右。到了第八代iphone6及后续手机(iphoneSE除外),手机高度均大于等于138.1mm。

相信聪明如你已经想到了,iPhone手机开关机按键的变化与iphone机身尺寸有关。

①当机身小于等于124.4mm时,开关机位于手机顶部;

②当机身大于等于138.1mm时,开关机位于手机右侧。

产品设计:iPhone物理按键背后的设计逻辑

由于手头设备有限,小编便只测试一下小尺寸的iphone4(115.2x 58.6x 9.3 mm)和大尺寸的iphonexs(143.6x 70.9x 7.7 mm)来说明吧。

①iPhone4的开关机按键测试:右手单手操作,当手指从滑动手机状态切换到关机按钮,食指可较容易按到顶部的开关机键;

产品设计:iPhone物理按键背后的设计逻辑

②iPhoneXS的开关机按键测试:右手单手操作,当手从操控手机屏幕切换到iphone4对应的顶部按钮位置时(xs开关机键实际在右侧),由于机身高度较高,需要将整个手上移,手指才能按到原顶部开关机键位置。从滑动屏幕到切换到原顶部开关机按钮,iphonexs相较iphone4更难触达。

产品设计:iPhone物理按键背后的设计逻辑

右手单手操作,右手大拇指从屏幕切换到实际右侧开关机键,只需大拇指从屏幕上移动到手机右侧面开关机键,按下按钮即可。通过对比,我们可以看到此时右侧的按钮相较于之前的顶部按钮更易操作,而且位置非常适合大拇指操作。

产品设计:iPhone物理按键背后的设计逻辑

结论:

①基于手的尺寸考虑,随着iphone机身尺寸增大,开关机按键也由顶部改变到右侧;

②为了方便用户从滑动屏幕到开关机的自由切换(开关机按键使用场景一般为滑动屏幕、关机或开机、滑动屏幕),按钮设置于右手(毕竟右撇子远大于左撇子)更易触达的顶部或右侧。

02 iPhone五个物理键位置为什么这样安排?
1. 使用频率与按键对应面位置的关系

①Home键 使用频率最高——位于手机A级面,即手机正面屏幕下方接近人操作位置,是人使用手机时最易触达的位置。(好吧,不妨脑洞大开想想如果放于屏幕上方会怎样?)注:一般CMF对A级面的标准比其他面(B级、C级面等)的工艺要求更严格,这也是为什么很多产品的分模线一般位于产品的侧面或底面。

②解锁开关机键 使用频率第二高——对应B级面,位于手机顶部或右侧面,右手操作时相较于左侧更易触达。

③静音、加减音量键使用频率第三高——位于手机左侧。右手操作时相较于右侧或顶部更难触达。

小结1:按键使用越频繁,对应操作位越易触达。

2. 为什么iphone把开关机键与声音控制键(三键)分别放置于不同的两个面上?

我们来对比一下华为手机。华为系列手机开关机键和音量键均位于手机右侧,右侧上方放置两个音量键,右侧下方为开关机键。(下图为P30)

产品设计:iPhone物理按键背后的设计逻辑

我们也同样发现小结1的规律,使用相对频繁的开关机键位于更接近右手触达的操作位——右侧面下方,音量键则位于离右手更远的右上方。

由于三个按键位于同侧,小编在使用多次后,每次使用时仍需思考哪个才是开关机键,哪个才是音量键。显然把这三个键统一放在右侧,手机整体可能更美观,但是体验感相对较差。

究其原因,三者仅有同侧位置区分,而这细微差距不足以产生条件反射。

小结2:通过对比发现,iPhone把这两类按键安排在不同的侧面,体验感更好,使我们不需思考就能条件反射地知道该按哪个键——异侧位置区分>同侧位置区分。

3. 静音开关键、加音量键、减音量键

由于三者同属声音控制键,所以我们很容易理解设计师把他们统一安排在手机左侧的原因。

但是问题来了,既然都同属声音控制键,为什么静音键不设计成和加减音量键一样的按钮呢?即按一下开,再按一下关?我们知道mac键盘上也是有静音键的(第一排右二)。

产品设计:iPhone物理按键背后的设计逻辑

这其实和刚刚我们分析华为手机右侧选按键的原理一样,如果三个按钮造型相同,区别太小,仅同侧物理位置区分,此时需要思考才能选对。

但同时我们又不能把三者分开,因为三者同属声音控制键,这时不同的造型便是设计师的最佳选择了。因为不同的造型可以使静音键更易区分(造型维度&位置维度)。

我们看到Mac键盘上的静音控制键除了位置区分,还有按键上的图标区分,键盘面是人眼极易触达的面,这时图标区分是有效的,但音量键则位于iPhone侧面,眼睛较难触达,所以此时图标区分就显得不那么奏效了。

那么问题又来了,既然这样,为什么加音量键和减音量键设计师要用一样的按键呢?

这是因为,音量的加减与物理空间的上下对应,使我们不需要想就知道上面是加,下面是减。还有就是如果都设计成不一样的键,iPhone 还是我们那个颜值爆表的她了吗?

小结3:

①静音键之所以与加减音量键同属一侧,是因为三者均为声音控制键,相同类型的按钮应安排在一起,方便用户查找。

②静音键之所以与加减音量键造型不同,是因为不同的造型可以使静音键更易区分(造型维度&位置维度),降低用户选择难度。

③加减音量键造型相同,且位于左侧上下位置。造型相同是基于颜值和加减音量键的心理等价性考虑。上下位置区分是因为加减音量与物理空间的上下对应,使我们不需思考就知道上面是加,下面是减。

03 总结

iPhone物理按键背后优秀的设计逻辑:

①基于手的人机尺寸考虑,随着iphone机身尺寸增大,开关机按键也由顶部改变到侧面;

②为了方便用户从滑动屏幕到开关机的自由切换(开关机按键使用场景一般为滑动屏幕、关机或开机、滑动屏幕),按钮设置于右手(毕竟右撇子远大于左撇子)更易触达的顶部或右侧。

③使用越频繁的按键,操作位置越易触达。

④把开机键与声音控制键安排在不同的侧面,体验感更好,使我们不需思考就能条件反射地知道该按哪个键——关于区分,我们讲到了位置区分、造型区分、图标区分,设计时我们需要根据具体情况灵活运用。

⑤静音键之所以与音量键同属一侧,是因为三者同属声音控制键,相同类型按键应放置在同一区域,方便用户查找。

⑥静音键之所以与加减音量键造型不同,是因为不同的造型可以使静音键更易区分(造型维度&位置维度)。

⑦加减音量键造型相同,且位于左侧上下位置。造型相同是基于颜值和加减音量键的心理等价性考虑。上下位置区分是因为加减音量与物理空间的上下对应,使我们不需思考就知道上面是加,下面是减。

⑧五个物理控制键的位置造型安排是基于体验和颜值的综合考虑。

欢迎吐槽~

版权声明:本文(即:原文链接:https://www.wenwenbk.com/wen/20270.html )内容由互联网用户自发投稿贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 630367839@qq.com 举报,一经查实,本站将立刻删除。

(0)
上一篇 2022-07-16 06:28:32
下一篇 2022-07-16 06:29:07

相关推荐

  • 深度分析30篇关于B站的报道后,我找到了出圈背后的“入圈”逻辑……

    不知道有没有人发现,“出圈”现象的背后是一个相对漫长的入圈过程,今天我们就以B站为模板分析一下“入圈”的逻辑。 2019年开始,出圈成了最热门的词汇之一,这个原本是明星粉丝圈形容明星火热程度的词开始被应用到了更多领域。从李佳琦、罗翔到新裤子乐队、刺猬乐队甚至是比特币,最近一段时间,出圈又和B站联系到了一起,跨年晚会、股…

    2022-07-11 运营管理
    25
  • 如何利用“恋爱思维”,提高产品留存?

    找对象除了天算的运气和缘分,也要靠自己的内在后天努力,适当小套路,可以让牵手成功率变高。那些找对象恋爱的小套路,同样适用于产品留存。那么怎么习得恋爱精髓,成功实现用户留存? 一、获取目标用户是基础,触达更多“目标对象” 牵手成功,首先要找到恋爱目标——你心水的小姐姐、小哥哥。首先找到接触优秀小哥哥、小姐姐的渠道;然后透…

  • 《延禧攻略》爆火背后的四大产品运营套路

    本文作者将用互联网视角,与我们回顾下《延禧攻略》爆火背后的这4大运营逻辑,enjoy~

    2022-07-13 运营管理
    25
  • B端产品在异常状态下的设计思考

    编辑导读:当产品出现异常状况时,例如网络异常、用户无权限等异常状态下,产品需要在界面对用户进行异常状态的反馈和引导,帮助用户快速获得帮助。本文作者以B端产品为例,分析其在异常状态下的产品设计,希望对你有帮助。 近期个人跟进的一个产品被用户提了意见:每次进入页面的时候,页面空白,什么信息都没有,跟故障了没有数据一样。 详…

    2022-07-07 运营管理
    25
  • 2020年,关于产品经理的一点思考

    本文主要是想自我剖析2020年从产品经理的角度上,应该“做什么”和“怎么做”。 John检验自己是否成长的两个关键指标: 年前定的目标是否达到?2019年初定了10条指标,完成了9条。最后一条是积极锻炼身体,显然是没有达到的。2020年接着做; 相比于一年前的自己,是否有所成长?如果发现一年前已经很优秀,那自己等于还是…

    2022-07-16
    23
  • 什么是好产品?让不同的产品角色来定义

    编辑导读:如何定义一款产品是好产品呢?不同的人心中有不同的答案。而本文作者认为应该从产品的利益相关者的角度出发,由他们来评价。如何理解呢?一起来文章里一探究竟吧。 18年毕业决定转行面试产品助理的时候,我遇上了许多面试官最喜欢问的问题之一:什么样的一款产品是好产品? 作为一个转行的新手玩家,我胡编乱造了一番后面试没过。…

    2022-07-14
    21
  • SaaS产品的业务调研避坑指南

    对于产品经理来讲,无论是c端产品还是SaaS产品,在接受一项新的产品/任务时,前期不仅需要了解业务,还需要再进一步了解业务需求,然而,这些全部都离不开产品调研,那么对于SaaS产品经理新人来讲该怎么去理解业务?怎么去做业务调研呢? 一、业务理解 大家在做C端产品需求的时候是怎么调研的,发调研问卷、邀约用户现场问答、电话…

    2022-07-11 工作
    26
  • 如何判断一个团队的产品文化到底靠不靠谱?

    编辑导语:每个互联网公司都有自己产品文化,本文作者围绕产品文化,为我们分析了什么在影响文化和价值观?如何识别团队的真正文化和价值观?产品文化是否靠谱看什么?并且指出了:如果你是leader,该如何打造自己想要的产品价值观和文化?让我们一起来阅读和思考吧。 说到互联网公司的团队文化,大概从阿里“六脉神剑”开始被定义,六脉…

    2022-07-09
    20
  • 如何设计出色的深色主题界面?

    文章分享了作者为应用设计深色主题的心得和经验,希望对您设计深色主题的界面有所帮助。 深色主题是应用界面设计的最新趋势。MacOS去年推出了深色主题模式后,Android和iOS也紧随其后,推出了各自的深色主题模式。 曾经罕见的深色主题现已受到大众的广泛期待。 如果设计得当,深色主题可以带来诸多好处,可以缓解视疲劳,弱光…

    2022-07-16 工作
    36
  • AI产品 :见微知著,剖析AR测量的过去、现在、未来

    导读:当你拿到一个需求,或者别人随口给你说了一个想法的时候,你需要顺着什么样的思路去深入了解呢?本文从AR测量产品入手,剖析思路的同时,也点名了AI产品目前的困境。希望AI产品随着业界的革新,能够迅速实用化、平民化,带来真正意义的价值。 01 背景 在智能手机产业不断革新的今天,手机摄像技术也迎来了全面的升级。基于RG…

    2022-07-08
    33