header_v0.7.32

iOS 11 人机界面中文指南(一)

11天前发布

翻译文章 / UI / 教程
_蓝猫_ 翻译,如需商业用途或转载请与_蓝猫_联系,谢谢配合。

Human Interface Guidelines

写在前面:新的苹果规范昨天已经发出来了,于是连夜把整个规范都看了一遍。并计划一章一章的翻译。翻译的同时也参考了各位前辈@喵大神经的iOS10规范的翻译以及ISUX之前iOS 9规范的翻译,对其中一些名词理解并使用可能更通俗的说法进行翻译,如果有哪里不对的,还请各位轻喷,帮忙指出问题,我会及时更正的,谢谢。


首先先祭上苹果设计规范地址:https://developer.apple.com.zcool.cn.zcool.cn.zcool.cn/ios/human-interface-guidelines/overview/themes/


第一章 概论




一、iOS设计主题


身为一名移动应用设计师,意味着你有机会发布一款能够登上苹果应用商店榜首的非凡产品。为了做到这一点,你的产品必须在质量和功能上精益求精。


以下三大原则使iOS区别于其他平台:


清晰

纵观整个系统,任何字号的都是清晰易读的,图标精确清晰,微妙而恰当的修饰,一切设计由功能而驱动。留白、颜色、字体、图形以及其他界面元素能够巧妙地突出重点内容并传达可交互性。


遵从

流畅的动效和清新美观的界面有助于用户能够理解内容并与之交互,不会干扰到用户。当前内容占据整个屏幕时,半透明和模糊处理能够暗示用户其他更多的内容。尽量少地使用边框、渐变和阴影。使界面能够尽可能的轻量化,从而突出内容。


深度

清晰的视觉层和生动的动效表达了层次结构,赋予了活力,并有助于用户理解。易于发现的且可触发的界面元素能够提升体验愉悦感,让用户在成功触发相应功能或者获得更多内容的同时还能掌控当前位置的来龙去脉。当用户浏览内容时,流畅的过渡提供一种纵深感。


设计原则   


要想扩大影响力和传播范围,在思考你应用的一致性,你需要遵循以下几点原则:


整体美感

整体美感体现在一个应用的视觉外观和交互行为与其功能相结合的优良程度。举个栗子,一款协助用户完成任务的应用应该使用微妙且无干扰的图形、标准化的控件和可预知的交互行为使用户聚焦在任务本身。反而言之,一款沉浸式体验的应用,例如游戏,就需要吸引人的界面,在鼓励用户探索的同时带来无穷的乐趣和刺激。


一致性

一款内部统一的应用通过使用系统提供的界面元素、风格统一的图标、标准的字体样式和一致的措辞来实现相同的标准和规范。应用所包含的特性和交互方式是符合用户心理预期的。


易用性

在屏幕上可直接操作的内容能够促进用户参与并有助其理解。用户可以体验到通过旋转设备或者使用手势来控制屏幕上的内容。通过直接操作,他们可以即时看到自己的行为结果


反馈性

反馈认证交互行为,呈现结果,并告知用户。系统内置的iOS应用对每一个用户行为都提供了明确的感知反馈。可交互的元素被点击时会被高亮显示,进度指示器显示了需要长时间运行的操作的进度,动效和声音使用户对交互行为结果的预测更加清晰。


自然性

当一个应用的虚拟对象和行为方式与用户所熟悉的体验相似时——无论这种体验来源于现实生活亦或是数字世界,用户就能够更快速地学会使用这款应用。隐喻在iOS中能很好的应用是因为用户真实的接触屏幕并与之交互。他们可以通过移动分层视图来显示被遮挡的内容,可以通过拖拽和滑动来浏览内容,可以通过触发开关,移动滑块,滚动数值选择器,甚至通过轻扫来翻阅书籍和杂志。


用户控制

在整个iOS中,是用户——而不是应用——在控制。应用可以对用户进行操作建议,对可能造成严重后果的行为发出警告,但不应该替用户来做决定。好的应用会在用户主导和避免不必要的结果中找到平衡。为了让用户感觉到是他们在掌控,应用可以使用熟知且可预知的交互元素,确认破坏性的行为,即使在运行中,操作也能够被轻易取消。




二、iphone X


iPhone X 包括一个大的,高分辨率的,圆角无边框屏幕,它提供了一种前所未有的沉浸式,内容丰富的体验。



1.屏幕尺寸


在纵向方面,iPhone X上的显示宽度与4.7寸的iPhone 6, iPhone 7, 以及iPhone 8相一致。然而iPhone X的显示屏比4.7寸显示屏高145pt,为内容增加了大约20%的垂直显示空间。



竖屏尺寸 1125px × 2436px (375pt × 812pt @3x)


横屏尺寸 2436px × 1125px (812pt × 375pt @3x)


应用可以显示高分辨率图片。iPhone X拥有一个使用分辨率为@3x的高分辨率显示屏。对于其他平面矢量图形,最好提供独立分辨率的PDF文件。对于栅格化的位图,需要提供它的@2x和@3x分辨率版本。请参阅 Image Size and Resolution 和Custom Icons.


2.布局


当为iPhone X设计时,你必须确保布局铺满屏幕,且不被设备的圆角、传感器或用于访问主屏的指示器所遮盖。


大多数使用系统提供的标准UI元素(如导航条、表格和集合)的应用程序会自动适应设备的新外形。背景延伸到显示屏的边缘,并且UI控件会被适当地插入和定位。


iPhone X 也能容易地支持具有自适应布局的应用,尤其您的应用能够使用自适应布局并遵守安全区域和边距布局指南的话。


在iPhone X上预览您的应用。您可以使用Simulator(Xcode附带)来预览应用程序,并检查布局问题。不过,如果是广色域的图像等的一些功能最好还是在实际设备上预览。


提供全屏体验。确保背景延伸到显示器的边缘,并且垂直可滚动的布局(如表格和集合)一直延伸到底部。


插入必要内容以防止剪切。一般来说,内容应该是居中对称的,使其在任何方向看起来都很棒,不会被边角或设备传感器或者屏幕指示灯所遮挡。 为获得最佳效果,请使用标准的、系统提供的界面元素和自适应布局创建您的界面。 所有应用都应遵循UIKit定义的安全区域和布局边距,这些区域可以根据设备和上下文进行适当的填充。 安全区域还可以防止内容覆盖状态栏、导航栏、工具栏和标签栏。


注意状态栏的高度。在iPhone X上,状态栏比在其他iPhone上要高。如果您的应用中有内容置于固定位置的状态栏下方,您必须更新您的应用程序来根据用户的设备动态地定位内容。注意,iPhone X上的状态栏在录音和位置跟踪等后台任务活跃时不会改变高度。


如果您的应用程序目前隐藏状态栏,在iPhone X上,请重新考虑这一决定。IPhone X的显示高度为内容提供了比4.7寸iPhone更多的垂直显示空间,状态栏不会占据太多地有用空间,而且还可以给用户提供有用的信息。


在重复使用现有图稿时,请注意长宽比差异。iPhone X拥有区别于4.7寸iPhone的长宽比。因此,4.7寸iPhone的图片在iPhone X上全屏显示时出现被裁剪或横向有留白。同样,全屏iPhone X图稿在4.7寸iPhone上显示时也被裁剪或纵向有留白,确保重要的视觉内容保持在两种显示尺寸上。


避免在屏幕底部和角落里放置交互控件。用户在显示屏底部的滑动手势访问主屏幕和应用程序切换,这些手势可能会取消您在此区域中执行的自定义手势。屏幕上方的两个角落可能是用户难以舒适到达的区域。


不要屏蔽或使关键的显示功能特别醒目。请勿尝试通过在屏幕顶部和底部放置黑色区块来隐藏设备的圆角、传感器、或底部访问条。 不要使用像括号,边框,形状或引导文字等视觉装饰使这些区域更加醒目。


允许自动隐藏指示灯,以便轻松访问主屏幕。当启用自动隐藏时,如果用户没有持续触碰屏幕的几秒钟后,指示灯将熄灭。当用户再次触碰屏幕时,指示灯会重新出现。这种行为只适用于观看视频或照片幻灯片的被动观看体验。


请参阅Adaptivity and Layout。


3.色彩


使用更多的颜色来增强视觉体验。色域广的照片和视频显得更加逼真,色域广的可视化数据和显示器显得更有视觉冲击力。请参阅 Color Management。


4.手势


iPhone X的显示屏可以通过使用屏幕边缘的手势来访问主屏幕、应用切换、通知中心和控制中心。


避免干扰到系统屏幕边缘的手势。用户依靠这些手势在每个应用里操作。在极少数情况下,像游戏这类沉浸式应用可能需要自定义优先级高于系统手势的屏幕边缘手势——第一次滑动调用应用程序内特定的手势,而第二次滑动调用系统手势。这种交互(称为边缘保护)应该谨慎执行,因为它会使用户难以访问系统层面的操作,请参阅 Gestures。


5.额外的设计注意事项


(1)使用正确得当的认证方式。iPhone X支持人脸身份识别。如果你的应用集成了Apple Pay或者其他系统的身份认证功能,请不要在iPhone X上使用Touch ID,同样地,确保你的应用不会在支持Touch ID的设备上使用Face ID。请参阅 Authentication。


(2)不要提供与系统键盘相重复的功能。在iPhone X上,即使使用自定义键盘,Emoji/Globe按钮和听写按钮也会自动出现在键盘上。你的应用不能影响这些按钮。避免重复使用它们,以免造成混乱。请参阅 Custom Keyboards。


6.设计资源


可以在 https://developer.apple.com/design/resources/#ios-apps  下载iPhone X的Photoshop和Sketch界面设计模板。



三、iOS11更新内容



在iOS 11,你可以创造比以往更强大,更人性化的应用,


增强现实(AR)

通过增强真实感,应用可以提供完美融合了逼真虚拟场景和真实世界的沉浸式体验。


更醒目的导航

为了提高浏览和搜索时的清晰度和相关性,应用程序可以提供包含更大、粗体标题的导航栏。


更清晰的图标

填充好的形状和较厚的笔触重量使图标变小,同时改善了对比度。请参阅自定义图标和系统图标。



拖拽功能

拖拽功能允许用户使用一根手指将选定的照片、文本和其他内容从一个位置拖拽到另一个位置——甚至是iPad上的应用。


Face ID and Touch ID

你的应用可以集成系统的生物识别安全功能,提供令用户信任的安全熟悉的认证方式。


近场通信(NFC)

在支持的设备上运行的应用,可以通过现实世界中的电子标签来无线读取数据。


安全区域布局规范

遵循系统的安全区域,确保在布局中的恰当的设置内容,并防止与状态栏、导航栏、工具栏、选项卡重叠。


排版的变化

增加文本大小和字重有助于提高整个系统的可读性,除了标准的动态字体字号,系统还提供一套为需要使用辅助功能的用户而准备的更大的字号。


四、界面基本元素


大多数iOS应用使用了来自UIKit的组件来构建,这是一个定义了基本界面元素的编程框架。这个框架让各种应用在视觉上达到一致的同时还提供了高度的个性化。UIKit元素是灵活且常见的。他们具有可适配性,使你能在任何iOS设备上设计一个看起来很棒的应用,而且能够在系统发布新版本的时候自动更新,由UIKit提供的界面元素可以分为以下三种:


边栏

告知用户现在在应用内所处的位置,提供导航,而且还可能包含按钮或者其他用来触发功能和交流信息的元素。


视图

包含用户在应用内最关注的信息,如文本、图形、动画和交互元素。视图允许使用诸如滚动、插入、删除和排列等交互行为。


控件

触发功能和传递信息。控件包括按钮、开关、输入框和进度指示器。


除了定义了的iOS界面,UIKit还定义了你的应用能够采用的功能。通过这个框架,你的应用可以对屏幕上的手势做出应答,还可以实现包含一些例如绘图、无障碍使用和打印的功能。


iOS也和其他编程框架和技术紧密结合,例如Apple Pay , HealthKit, 和 ResearchKit,有助于你设计出一个强大且惊人的应用。


37

    文章信息

    • 文章标签

      iOS
    意见反馈
    没有新消息
    密码登录
    短信登录
    微信二维码登录

    提示文案

    提示文案

    提示失败
    提示成功