云南网站建设 TEL:13608843679 专业的系统开发 您的不二之选 
实战 专业 快速 高效 

对网页设计师来说,iPhone X 意味着什么?可怜的设计师又要焦虑了

咨询电话:13608843679
点击统计:80  发布时间:2018-10-25 06:12:30
发布会谢幕了,媒体们也发完了新闻稿,朋友圈也热闹过了,接下来的工作该轮到设计师了。iPhone X 11月才发货,但你也许已经接到设计任务了。在这之前,让我们先来看看这个iPhoneX,对UI设计师的日常工作有什么影响。

新增的虚拟 Home 指示条——你不得不考虑的设计元素之一

iPhone X 迈向了全面屏,移除了原本在手机底部的实体Home键,取而代之的是一条 134x 5pt 的虚拟Home指示条。
「底端上划」成为了全局性的系统操作,它可以让你返回桌面(原本的单击Home键),或者切换应用程序(原本双击Home 键)。我将这个虚拟Home指示条的特性总结为以下五点:

特性一:如影随形

苹果在新的开发文档中指出,这个 Home 指示条是「至关重要的系统元素」,除了在某种特殊条件下,这个指示条将永远伴随着你的 App,成为强制的设计元素出现在屏幕中。这就意味着,在你的 App 设计中你将不得不为它保留位置,并考虑好周围元素与它的兼容关系。




特性二:黑白条

这个虚拟 Home 指示条只有亮/暗两种模式,它会自动根据周围背景,选择将自己变身成白色或是黑色,从而尽可能地和周围背景有所区分。




特性三:全面屏



iOS 自带的通讯录是一个典型的带有底部导航栏的 App,对比 iPhone 8 和 iPhone X,你会发现在 iPhone X 上,底部导航栏并不在真正的「底部」,它是悬浮在虚拟 Home 条上方的。对拥有底部导航栏的 App 而言,iPhone X 这个全面屏的「下巴」并非可用区域,它并不真的「全面」。


但同时,Apple 的设计则例中也指出,如果 App 的底部是可滚动的内容(比如一个长列表视图),那么官方给出的建议是:放心大胆地霸占整个屏幕吧!发现文字和 Home 指示条重叠了?没关系!这是官方推荐的正确做法!事实上,用户依然可以点选下方的列表条目。这种情况下,全面屏才是真的「全面」了。



特性四:底部上划

美国著名的股票交易软件 Robinhood 就使用了类似的交互。在买入/卖出股票这样的关键操作里,它使用了「底部上划」。尽管不是严格意义上的「底端上划」,但虚拟 Home 指示条的介入无疑增加了误操的机率。在 iPhone X 设计时,类似这样涉及到屏幕底部上下滑动的交互都需要更谨慎的思考、更严格的测试。



当然,iPhone X 并没有强制禁止这种交互操作。它给开发者们留了一条路:「在万不得已必须要这样做的情况下」,开发者可以开启「边缘保护」功能(Edge Protection)。开启后,次底端上划将只是唤醒 Home 指示条,再次上划才会激活原有功能。




特性五:自动隐身

在播放视频时,开发者可以开启虚拟 Home 条「自动隐藏」功能从而获得沉浸式体验。开启后,视频播放时虚拟 Home 条将自动消失;单击屏幕后就又会出现。




「安全区」——这词儿怎么听起来有点耳熟?

看着新的 iOS 设计规范文档,一个陌生又熟悉的词浮现在我的脑海中——出血(Bleed)!!!




在平面印刷设计中,为了顾及之后纸张裁切过程中可能出现的误差,设计师会在画布四周留出的一点边缘空间,这一圈额外的空间就叫做「出血」。同时,设计师一般也会设置一个「安全区」,确保设计稿中的重要内容都出现在安全区内。

对数字化时代下的 UI 设计师来说,我们本可以永远把「出血」和「安全区」的概念永远抛之脑后,因为屏幕不用裁切!全世界也许 99.99% 的手机屏都是规整的矩形,我们的安全区就是整块矩形屏(安卓系统底部的虚拟按键可以近似理解为屏幕外,设计时可以忽略)。然而 iPhone X 这个妖蛾子的出现,又迫使我们重新找回那个久远的记忆……

让我们来看看苹果定义的 iPhone X 设计「安全区」吧:



手机纵向持握状态下,安全区是从屏幕顶端往下 40 pt 开始计算的,要注意的是,它并不是和「齐刘海」完全齐平的,而是要再往下一点。「下巴」位置上,从下往上推 34 pt 以上的部分开始才被视为安全区。

纵向持握状态下的安全区设计还比较容易理解,但到了横向持握状态,安全区的概念就有点反直觉了:




横向状态下(假设是逆时针旋转 90 度),原本的「刘海」部分到了左侧,「出血」部分实际占用面积不变,而尽管虚拟 Home 条挪到了下方的长边上,屏幕右边虽然没有任何系统及元素,但苹果依然建议将其设置为与左侧「刘海」相对称的「出血」。也就是说,在横向状态下,你的安全区是个半岛,只有上方是连接到屏幕边缘的。这又是为什么呢?为什么苹果官方不建议设计师充分利用右边的空白面积呢?为什么非要左右对称地设置「出血」呢?尤其考虑到对于很多手机游戏来说,任何一点屏幕空间都是宝贵的,血条,金钱,操作键,小地图,大地图等等,太多元素逼着设计师充分利用每一寸空间了。

苹果官方给出的解释是,由于你无法预测用户在横向持握下会把「刘海」放在左边还是右边,如果安全区不是横向居中放置的,会造成界面中元素与手机边缘的相对位置不固定。他们认为,用户在使用手机时(尤其是玩游戏的时候)高度依赖手部的肌肉记忆,不对称设计尽管空间利用率更高,但与用户的肌肉记忆相背,由此导致的失败操作容易让用户沮丧。因此,苹果向广大设计师们高声疾呼:请把按键全都放到安全区里来吧!




尺寸大了,比例变了,这意味着……



在 iPhone X 之前,尽管 iPhone SE,7 和 7 Plus 的屏幕尺寸大小不同,但都是 16:9 的屏幕。而 iPhone X 差不多是个 13:6 的屏幕(812 x 375 pt)。屏幕的绝对尺寸也变大了,从 4.7 寸增大到 5.8 寸——这些对设计来说意味着什么呢?



「拇指盲区」更大了

乔布斯曾说,手持设备理想的屏幕尺寸应该是 4 寸。然而随着乔老爷子英年早逝,苹果在「越来越大」的路上越走越远(据说很大一部分原因是为了顺应亚洲市场的需求)。iPhone 如今已经增大到了惊人的 5.8 寸。

一般人大拇指大概 2.5 - 2.7 寸长,iPhone 7/8 Plus 是 5. 5 寸,日常生活中我注意到,广大 Plus 用户已经发展出了一套独特的手部微调动作,来让自己的拇指够到左上角的「返回」键(为人类的适应力感到惊叹!)。尽管如此,这么大的屏幕已经超越了绝大多数普通用户的拇指覆盖范围。




无论是在通勤地铁上,还是走在路上一手拿奶茶,另一手拿手机,在很多情境下单手操作是无法避免的。苹果在 iPhone 7/7 Plus 中设计了两次轻触 Home 键将屏幕整体下移的精彩交互。




然而,随着 iPhone X 移除了实体 Home 键的,这个精彩的交互设计也随之消失了。虽然很多人已经习惯了直接在 iPhone 上的左滑返回,但以下两个因素阻碍了它成为事实标准的返回操作:

1)该交互方式的可见性为零,可发现性较低

2)App 自带的横滑操作可能造成交互冲突。比如:邮件类 app 中的归档操作,列表控件中的删除操作,「走马灯」控件(Carousel)的横向滚动等等。

也许现在是时候重新思考左上角的返回键了。在这里提供一个特殊的应用例子仅作抛砖之用:



在 5.8 寸的 iPhone X 上,左上角的「拇指盲区」变得更大了。而基于 F 型流动视线设计的很多 App,通常都会将它们重要的功能入口置于左上角(用户先看到的内容原本正好处于拇指舒适区的边缘)。而到了 iPhone X 上,视线优先和拇指舒适就未必重合了——iPhone X 给设计师出了一道难题。

注意全屏图

如果你的 App 中用到了全屏背景图,比如启动画面(Splash screen),你需要注意不同屏幕比例的适配问题,确保图片被切割后依然保留主体部分。如果你的启动画面里有人物模特,尤其需要注意屏幕比例变化造成的切割位置的变化(半身人像如果正好切到手肘的位置会显得很奇怪)。当然,有资源给两种屏幕比例做适配素材的同学可以忽略这一条。




矢量图形 PDF 是你的朋友

iPhone X 的屏幕分辨率达到 1125px × 2436px(458 PPI)。更高屏幕画质意味着位图素材的尺寸也要相应变大。这种情况下,尽可能多地使用 PDF 矢量图形可以在更大程度上为 App 瘦身,节省流量。




对设计师的好消息……

看到这里,作为设计师的你也许会觉得:这 iPhone X 就是个大坑!是的,我看完新的设计文档确实也有这种感觉……

对设计师来说,有没有什么好消息呢?

有(且可能仅有这一条)—— 那就是大家再也不用考虑打电话,WIFI 热点分享等特殊状态下的设计啦!因为 iPhone X 用状态栏时间的背景颜色来统一表示这些特殊状态(不再有高度变化),喜大普奔!





总 结

几天后,当你在设计软件里新建出个形状诡异的 iPhone X 画布,请记得:

新增的虚拟 Home 指示条,将成为你不得不考虑的设计元素之一。

全面屏 iPhone 更大,也更瘦长了。但对你来说,你要时刻牢记一个陌生又熟悉的词——「安全区」,尤其是在横向持握状态下。

你尽可能多地使用矢量图形了吗?你的 App 安装包变大了多少?全屏图片被奇怪地切割了吗?你放在左上角的主功能键是否超出了拇指舒适区?有空的时候,不妨想一想,「返回」操作是否还有别的可能?

每年夏末的苹果发布会落幕,媒体离场,段子手退散,舞台上留下的只有无数设计师、产品经理和开发者们。他们默默工作,以确保几周之后,用户可以在新 iPhone 上正常、愉悦地使用他们的产品。




转载自:沙漠风
关键词: app

信息推荐

云南网站建设,云南商城开发,云南微信开发,云南APP开发,昆明网站建设,昆明商城开发,昆明微信开发,昆明APP开发

● 怎么自己制作网页 步骤是什么点击统计:56 发布时间:2018-10-12 23:11:34

  现在在网上自己制作网页,比起以前来说已经是相当轻松了,不仅能够借助各种工具,如果遇到任何困难也可以网上求助,那么自己制作网站的基本步骤是怎样的呢?  一、主题确立  既然是想自己制作一个网站,那么在开始之前心中应该就对网站内容的主题有一个大概的方向。确立网站主题比较重要的,网站主题的选取决定着网页制作的内容方向的把握,主题只要是感兴趣的就行。确定核心的网站主题有利于网站建设,把握一个方向,将其做深做透做精。  二、素材收集  现在互联网普及程度高,网络是现代人信息的主要来源,几乎人

● 如何做好学校网站建设方案 需从这些方面出发点击统计:58 发布时间:2018-10-08 09:27:08

  在这个信息大爆炸的时代,网站建设已经成为了各个行业进行形象展示、报道公布、业务发展的重要途径。毕竟没有谁愿意与时代脱节,这是传统纸媒无法取代的。所以说,学校网站建设方案刻不容缓!  一、明确学校网站的职能与建设意义  学校网站是学校对外的一个平台,就好比我们人类的脸庞一样的重要,只有建立好自己学校的独特风格,才有可能吸引更多的生源,从而获得更大的教育发展。所以,这也是学校网站建设方案里的第一要素。与此同时,学校网站建设更多的是为师生提供交流互动的机会,突破传统课堂的制约。即使天南地

● 外贸网站建设如何做?需考虑什么要点!点击统计:58 发布时间:2018-10-02 06:09:43

  许多外贸企业或个人外贸网站没了解,便盲目来搭建外贸网站,是有可能会存在一些问题的,还会造成花费许多精力和时间来推广网站,也没能吸引到更多客户,又或者留住客户,达成交易。对此,外贸网站建设时都需要考虑什么要点?  1、专业、可信的美观设计  走出JS与Flash误区,做外贸网站需参考一些国际的大型外贸网站,良好以大气、简约为主,简约但不简单。在页面设计上,还需考虑到各类不同浏览器的兼容性,IE浏览器属于使用者比较多的一个浏览器,清晰的结构、站内搜索系统,这能够让网友很易就找到需要的信

● 农业网站定制开发解决方案点击统计:58 发布时间:2018-08-30 13:04:37

随着社会的不断进步,生活水平的不断提高,城镇化的快速发展,城镇景观园艺需求也越来越大。据了解,我国城市园林绿化固定资产投资额从2003年的321.9亿元增加到2015年的2075亿元,可见农业园林景观市场需求量大,前景广阔,但是农业园林景观市场竞争也越来越激烈。相关农业企业为寻求更大的市场,在互联网的推动下,纷纷通过农业网站定制开发、网站建设等方式布局互联网市场,并取得了不错的成绩。

个性化与多样化服务并存,促进成交转化

● 美容网站建设与网站定制开发解决方案点击统计:58 发布时间:2018-08-30 12:58:03

多样化服务提高竞争优势


人均收入提高,生活水平提高,美容成为大众消费项目,市场越来越大,同样竞争也越来越大,美容企业通过美容网站建设与网站定制开发为用户提供预约到店服务外,还可为用户提供技师上门服务,提高行业竞争优势。

● 如何有效的利用百度百科推广网站点击统计:58 发布时间:2014-06-10 09:10:12

百度自身产品的权重是不言而喻的,很多站长都在挤破头去做百度的产品,从百度知道、百度百科、百度文库到百度经验可以说是没有一个没尝试过。可是又有多少是坚持下来的呢,
很多在一开始经常失败的时候就中途放弃了。其实这就跟我们平时在生活中遇到的挫折、困难是一样,要总结经验跟教训,坚持到最后才能看到结果。
  说说我个人的一个百科经历吧,一开始做的时候没有一个是成功的,只要你在词条上面添加一个链接就不会通过。尝试了一个星期之后就放弃了,觉得百度的产品不是那么好做的,与其浪费时间在百科上面还不如做一些别的

● 如何学做网站 简单几步教会你点击统计:59 发布时间:2018-11-03 00:18:22

  网站是很多人都会使用的工具,但是做网站对于大部分人来说就不是容易的事了,在这里,把学做网站变轻松,变简单,这就是一个让小白也可以制作属于自己的网站的教程,赶紧来学吧。  1、确定网站的主题  学做网站迈出的第一步就是确定网站的主题,一个网站的主题是一个网站的核心,所有网站的后续工作都是根据这个主题进行展开的。你可以选择自身喜爱的内容作为网站的主题,例如你可以选择美食作为主题,建立美食网站。  2、注册域名  在确定网站的主题之后,需要寻找网站的主页空间,并且对此注册相应的域名。其中

● 响应式网站影响SEO吗
点击统计:59 发布时间:2018-11-02 02:18:21

谓“响应式网页设计(Responsive Web Design)”也就是自适应,就是可以自动识别屏幕宽度、并做出相应调整的网页设计。目前这种设计已经出现在越来越多的国内网站上,目前Google已经明确表明鼓励响应式网页设计。通常在浏览网页时,手机上和电脑上无法显示同一个网页,这也导致许多网页设计会自动转到特定的链接上,如上图所示,无论在PC端还是移动端,网页的显示其实都是一个版本,会随着屏幕的大小网页而改变。下面是一些例子:响应式网页设计与SEO 经验心得响应式网页设计与SEO 经验心得 使用自

● 确定网站主题的原则有哪些点击统计:59 发布时间:2018-10-26 22:59:29

  随着目前网站数量越来越多,网站建设的需求量也在变得越来越大,在人们进行网站建设的过程当中的一个非常重要的方面就是网站主题确定问题。网站主题主要就是指一个网站所为用户们所展示的内容,在确定主题的过程当中,有很多的原则是需要大家来进行遵守的。那么,究竟确定网站主题的原则都有哪些呢?  一、主题简短而且精辟  目前的这个互联网发达的时代,各个方面的竞争都是非常的激烈的,一个网站要想在这样的压力之下取得更大的优势,那么就一定要确定号一个网站选择的主题,因此大家一定要做好网站定位的工作,一定

● 网站制作中常会忽略什么小细节点击统计:59 发布时间:2018-10-20 12:30:27

  可能一些人会觉得这网站制作是极其简单、容易的事情,可真到实际操作时,可能你就不会这么说了,对于网站制作中很容易因为不重视一些小细节,从而导致一些问题的出现。对此,小编将具体讲讲网站制作时,大家常会忽略的小细节,进而更好来认识到这些小细节,使得制作网站也会很成功、顺利。  一、各个页面间的衔接问题  某些站长在网站制作中,常会把网站内部的各个页面的衔接问题给忽略掉,造成客户在浏览某个页面时,根本无法找到返回或其他有关页面的衔接,带来大大的不便。这样的结果,这会让搜索引擎收录网站内容时
返回首页
返回首页
拨打电话
拨打电话
短信咨询
短信咨询