苹果人机交互指南_苹果人机界面设计指南的10个见解

苹果人机交互指南

重点 (Top highlight)

I’ve been developing an IOS app for the past few months and have been constantly referring to Apple’s Human Interface Design Guidelines. I would consider it a must-read for any aspiring or current UI/UX designer.

在过去的几个月中,我一直在开发IOS应用程序,并一直在参考Apple的人机界面设计指南 。 对于任何有抱负的或当前的UI / UX设计师,我都会认为它是必读的。

It’s surprisingly approachable and easy to understand. It isn’t written with overly technical jargon and gets straight to the meat and potatoes of designing an interface for IOS.

这是令人惊奇地易于接近且易于理解的。 它不是用过分的技术术语写的,而是直接针对为IOS设计接口的内容。

This is a list of the most noteworthy takeaways from the design standards laid out in the guide.

这是指南中列出的最引人注目的设计标准清单。

I know most people just scroll through these articles and don’t actually read them so the images are purely here for comic relief — enjoy.

我知道大多数人只是浏览这些文章,而实际上并没有阅读它们,因此图像纯粹是在这里为漫画提供救济-尽情享受。

1.在各种光照条件下测试应用的配色方案 (1. Test your app’s color scheme under a variety of lighting conditions)

iPhones being looked at under a flashlight

“Lighting varies significantly both indoors and outdoors, based on room ambiance, time of day, the weather, and more. Colors you see on your computer won’t always look the same when your app is used in the real world. Always preview your app under multiple lighting conditions, including outdoors on a sunny day, to see how colors appear. If necessary, adjust colors to provide the best possible viewing experience in the majority of use cases.” — Apple Color Guidelines

根据室内环境,一天中的时间,天气等,照明在室内和室外的变化很大。 当您的应用程序在现实世界中使用时,您在计算机上看到的颜色并不总是相同。 始终在多种光照条件下(包括晴天在户外)预览应用程序,以查看颜色的显示方式。 如有必要,调整颜色以在大多数使用情况下提供最佳的观看体验。” — Apple颜色准则

A perfect example of this is the sleep cycle app. The app has a calming dark display making it easy on the eyes and perfect for someone setting the alarm before going to bed.

睡眠周期应用程序就是一个很好的例子。 该应用程序具有令人放松的深色显示屏,使您的眼睛轻松自如,非常适合在睡觉前设置闹钟的人。

In addition to color, I’d like to add that there are various contextual factors that influence a user’s behavior when interacting with an interface. Consider where the user is when using our app, how much time they have, and what their emotional state is.

除了颜色之外,我还要补充一点,当与界面进行交互时,还有各种上下文因素会影响用户的行为。 考虑用户在使用我们的应用程序时所处的位置,他们有多少时间以及他们的情绪状态。

You can see good and bad examples of this everywhere. Navigation apps have minimal reading or touching required, Kindle’s have no glare when reading outside, note-taking apps are available offline, and so on.

您到处都能看到好的和不好的例子。 导航应用程序所需的阅读或触摸操作最少,Kindle在户外阅读时不会刺眼,笔记应用程序可离线使用,等等。

If our app is meant to be used while jogging, then some constraints and considerations need to be taken into account in the design.

如果要在慢跑时使用我们的应用程序,则在设计中需要考虑一些约束和注意事项。

Shopify has a great article about designing with the user’s context in mind that I recommend for anyone interested in diving deeper into this topic.

Shopify上有一篇很棒的文章,它考虑了用户的上下文 ,我向有兴趣深入研究此主题的任何人推荐。

2.尽可能延迟登录 (2. Delay sign-in as long as possible)

Delaying sign in mockup

“People often abandon apps when they’re forced to sign in before doing anything useful. Give them a chance to fall in love with your app before making a commitment to it. In a shopping app, let people browse your merchandise immediately upon launch, and require sign-in only when they’re ready to make a purchase. In a media-streaming app, let people explore your content and see what you have to offer before signing in to play something.” — Apple Authentication Guidelines

“人们在做任何有用的事情之前被迫登录时经常会放弃应用程序。 在做出承诺之前,让他们有机会爱上您的应用。 在购物应用程序中,人们可以在发布后立即浏览您的商品,并且仅在准备购买时才需要登录。 在媒体流应用中,让人们浏览您的内容并查看您所提供的内容,然后再登录以播放某些内容。” — 苹果认证准则

Apple urges us to re-assess the entrance experience to our app. If possible, remove sign-in and sign-up altogether.

苹果公司敦促我们重新评估应用程序的入口体验。 如果可能,请完全删除登录和注册。

Unfortunately, the app I’m designing right now doesn’t allow me to completely remove sign-in. But I’ve moved the sign-up screen to the end of onboarding so the user can at least get a feel for the type of experience they can expect after they sign up.

不幸的是,我现在正在设计的应用程序不允许我完全删除登录。 但是我已经将注册屏幕移到了注册结束时,以便用户至少可以体会到他们在注册后可以期望的体验类型。

It’s also a good idea to introduce a variety of sign up options to make signing in seamless. The app I’m working on right now supports Password Autofill, Facebook login, Google login, Sign in with Apple, and default email + password.

引入各种注册选项以使无缝登录也是一个好主意。 我正在使用的应用程序现在支持密码自动填充 ,Facebook登录,Google登录,使用Apple登录以及默认的电子邮件和密码。

3.符合人们在“设置”中选择的外观模式 (3. Comply with the appearance mode people choose in Settings)

Image showing the appearance of an iphone

“If you offer an app-specific appearance mode option, you create more work for people because they have to adjust more than one setting. Worse, they may think your app is broken because it doesn’t respond to their systemwide appearance choice.” — Apple Dark Mode Guidelines

“如果提供特定于应用程序的外观模式选项,则会为人们创建更多工作,因为他们必须调整多个设置。 更糟糕的是,他们可能认为您的应用已损坏,因为它无法响应他们在系统范围内的外观选择。” — 苹果暗模式指南

4.尽快显示内容 (4. Show content as soon as possible)

Loading screen

Not to be confused with the splash screen, the launch screen is the screen that introduces the elements on the page. Design a launch screen that’s nearly identical to the first screen of your app.

不要与启动屏幕混淆,启动屏幕是用于介绍页面元素的屏幕。 设计一个与您的应用程序的第一个屏幕几乎相同的启动屏幕。

“If you include elements that look different when the app finishes launching, people can experience an unpleasant flash between the launch screen and the first screen of the app. Also, make sure that your launch screen matches the device’s current appearance mode; for guidance, see Dark Mode.” — Launch Screen Guidelines

“如果您添加的元素在应用程序完成启动时看起来不同,那么人们会在应用程序的启动屏幕和第一个屏幕之间体验到不愉快的闪烁。 另外,请确保您的启动屏幕与设备的当前外观模式匹配; 有关指导,请参阅黑暗模式 。” — 启动屏幕准则

“Don’t make people wait for content to load before seeing the screen they’re expecting. Show the screen immediately, and use placeholder text, graphics, or animations to identify where content isn’t available yet. Replace these placeholder elements as the content loads. Whenever possible, preload upcoming content in the background, such as while an animation is playing or the user is navigating a level or menu.” — Apple Loading Guidelines

“不要让人们在观看内容之前等待内容加载。 立即显示屏幕,并使用占位符文本,图形或动画来标识尚不可用的内容。 在内容加载时替换这些占位符元素。 只要有可能,就在后台预加载即将到来的内容,例如在播放动画或用户导航级别或菜单时。” — Apple加载准则

5.利用系统提供的文本,填充,字形和分隔符颜色 (5. Take advantage of the system-provided colors for text, fills, glyphs, and separators)

SF icons dialog

“iOS offers a range of system colors that automatically adapt to vibrancy and changes in accessibility settings like Increase Contrast and Reduce Transparency. The system colors look great individually and in combination, on both light and dark backgrounds, and in both light and dark modes.”

“ iOS提供了一系列系统颜色,这些颜色可以自动适应鲜艳度和可访问性设置的更改,例如增加对比度和降低透明度。 在浅色和深色背景以及浅色和深色模式下,系统颜色都可以单独使用或组合使用。

“Don’t hard-code system color values in your app. The color values provided are intended for reference during your app design process. The actual color values may fluctuate from release to release, based on a variety of environmental variables. Always use the API to apply system colors; for developer guidance, see UIColor.” — Apple Color Guidelines

“不要在您的应用中硬编码系统颜色值。 提供的颜色值仅供您在应用程序设计过程中参考。 实际的颜色值可能会根据各种环境变量而在释放之间波动。 始终使用API​​来应用系统颜色; 有关开发人员的指导,请参见UIColor 。” — Apple颜色准则

“SF Symbols provides a set of over 1,500 consistent, highly configurable symbols you can use in your app. Apple-designed SF Symbols to integrate seamlessly with the San Francisco system font, so the symbols automatically ensure optical vertical alignment with text for all weights and sizes. You can use SF Symbols in apps running in iOS 13 and later, watchOS 6 and later, and tvOS 13 and later.” — Apple SF Symbols

“ SF Symbols提供了一组1,500多个一致的,高度可配置的符号,您可以在应用程序中使用它们。 苹果设计的SF Symbols可与San Francisco系统字体无缝集成,因此,对于所有重量和大小,这些符号都能自动确保与文本的光学垂直对齐。 您可以在iOS 13和更高版本,watchOS 6和更高版本以及tvOS 13和更高版本中运行的应用程序中使用SF符号。” — Apple SF符号

If you’d like to learn how SF Symbols can be used, here’s a video.

如果您想学习如何使用SF符号,请观看以下视频。

6.使用熟悉的,易于理解的单词和短语 (6. Use familiar, understandable words and phrases)

A message from an iphone

“Technology can be intimidating. Avoid acronyms and technical jargon that people might not understand. Use what you know about your audience to determine whether certain words or phrases are appropriate. In general, apps that appeal to everyone should steer clear of highly technical language. Such language may be appropriate in apps that target a more advanced or technical crowd.”

“技术可能令人生畏。 避免使用人们可能不理解的首字母缩写词和技术术语。 使用对受众的了解来确定某些单词或短语是否合适。 通常,吸引所有人的应用程序应避免使用技术含量高的语言。 这种语言可能适合针对更高级或技术人群的应用。”

“Strive for an informal, friendly tone. An informal, approachable style echoes the way you speak with people over lunch. Use contractions occasionally, and you and your to address the user directly.” — Apple Terminology Guidelines

“争取非正式,友好的语气。 非正式,平易近人的风格呼应您午餐时与人交谈的方式。 偶尔使用收缩, 可以直接与用户联系。” — Apple术语准则

The most important thing here is to know your audience. If your app is being developed for the average Joe then avoid jargon. If it’s for a highly specialized group of architects then you may approach this differently.

这里最重要的是要了解您的听众。 如果您的应用是针对普通的Joe开发的,那么请避免使用行话。 如果是针对高度专业化的建筑师团队,那么您可能会采取不同的方法。

7.预计需要帮助 (7. Anticipate the need for help)

A help icon

“Proactively look for times when people might be stuck. A game, for example, could casually show useful tips when paused or when a character isn’t advancing. Let people replay tutorials in case they miss something the first time.” — Apple App Architecture Guidelines

“主动寻找人们可能被困住的时间。 例如,游戏在暂停或角色前进时会随意显示有用的提示。 如果人们第一次错过某些内容,可以让他们重播教程。” — Apple App体系结构准则

Adding quick tips, customer service chat, chatbots, FAQ, a help center, and so on will create a fail-safe for users who may get confused.

添加快速提示,客户服务聊天,聊天机器人,常见问题,帮助中心等,将为可能感到困惑的用户创建故障保护。

In the app I’m creating, I have a few instances where I include help icons to educate the user on what the actions mean. This keeps my interface clean but also provides an option to learn more if needed.

在我创建的应用程序中,有一些实例包含帮助图标,以教育用户有关操作的含义。 这样可以使我的界面保持整洁,但如果需要,还可以提供一个选项以了解更多信息。

8.必要时帮助人们避免信息丢失 (8. When necessary, help people avoid information loss)

Reduced memory loss image

“Regardless of whether people use a dismiss gesture or a button to close the view, if the action could result in the loss of user-generated content, present an action sheet that explains the situation and gives people ways to resolve it.” — Apple Modality Guidelines

“无论人们是使用解雇手势还是按钮来关闭视图,如果该操作可能导致用户生成的内容丢失,请出示说明情况并提供解决方法的操作表。” — 苹果模式指南

“Instill confidence that work is always preserved unless canceled or deleted. In general, don’t make people explicitly save files. Instead, save changes automatically at regular intervals, when opening and closing files, and when switching to another app. In some cases, such as while editing an existing file, save and cancel options may still make sense for the sake of confirming when the edits are actually captured.” — Apple File Handling Guidelines

“让人们放心,除非取消或删除工作,否则始终可以保留工作。 通常,不要让人们明确地保存文件。 相反,在打开和关闭文件以及切换到另一个应用程序时,应定期自动保存更改。 在某些情况下,例如在编辑现有文件时,为了确认何时真正捕获到编辑内容,保存和取消选项可能仍然有意义。” — Apple文件处理准则

9.通常,请使用标准手势 (9. As a general rule, use standard gestures)

Gestures for iphone

“People are familiar with the standard gestures and don’t appreciate being forced to learn different ways to do the same thing. In games and other immersive apps, custom gestures can be a fun part of the experience. In other apps, it’s best to use standard gestures so extra effort isn’t needed to discover or remember them.” — Apple Gesture Guidelines

人们熟悉标准手势,不喜欢被迫学习不同的方法来做同样的事情。 在游戏和其他身临其境的应用中,自定义手势可能是体验中有趣的一部分。 在其他应用程序中,最好使用标准手势,因此无需费力去发现或记住它们。” — Apple手势指南

10.不要在通知中包含敏感,个人或机密信息 (10. Don’t include sensitive, personal, or confidential information in a notification)

Notification on home screen

“You can’t predict what people will be doing when they receive a notification, so it’s essential to avoid including private information that could display on the device screen.” — Apple Notification Guidelines

“您无法预测人们在收到通知时会做什么,因此必须避免包含可能在设备屏幕上显示的私人信息。” — Apple通知准则

Image for post

👋 Let’s be friends! Follow me on Twitter and Dribbble and connect with me on LinkedIn. Don’t forget to follow me here on Medium as well for more design-related content.

be 让我们成为朋友! 在Twitter和Dribbble上关注我,并在LinkedIn上与我联系。 别忘了在Medium上关注我,以获取更多与设计相关的内容。

Image for post
UX Para Minas Pretas (UX For Black Women), a Brazilian organization focused on promoting equity of Black women in the tech industry through initiatives of action, empowerment, and knowledge sharing. Silence against systemic racism is not an option. Build the design community you believe in.UX Para Minas Pretas (UX For Black Women),这是一个巴西组织,致力于通过采取行动,赋权和知识共享的举措来促进科技行业中的黑人女性平等。 对系统性种族主义保持沉默是不可行的。 建立您相信的设计社区。

More articles from me…

我的其他文章...

翻译自: https://uxdesign.cc/10-insights-from-apples-human-interface-design-guidelines-176ab7d505ae

苹果人机交互指南

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/274356.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

也来学学插件式开发

上一家公司有用到插件式开发来做一个工具箱,类似于QQ电脑管家,有很多工具列表,点一下工具下载后就可以开始使用了。可惜在那家公司待的时候有点短,没有好好研究一下。现在有空,自己在网上找了些资料,也来试…

同态加法_我对同态的想法

同态加法Early February, I uploaded this shot onto Dribbble. Nothing fancy –– just two screens experimenting with “2月初,我将这张照片上传到Dribbble。 没什么幻想–只有两个屏幕在尝试“ Neumorphism,” or soft UI. Little did I know that this post…

php内核探索

引自:http://www.nowamagic.net/librarys/veda/detail/1285 SAPI:Server Application Programming Interface 服务器端应用编程端口。研究过PHP架构的同学应该知道这个东东的重要性,它提供了一个接口,使得PHP可以和其他应用进行交互数据。 本…

hp-ux锁定用户密码_UX设计101:用户研究-入门需要了解的一切

hp-ux锁定用户密码这是什么? (What is this?) This session is part of a learning curriculum that I designed to incrementally skill up and empower a team of Designers and Researchers whose skillset and ways of working needed to evolve to keep up wi…

extjs6 引入ux_关于UX以及如何摆脱UX的6种常见误解

extjs6 引入uxDo you ever browse social media, internet, or talk to colleagues and hear them say something UX related you disagree with so much that you just want to lecture them on the spot?您是否曾经浏览过社交媒体,互联网或与同事交谈&#xff0c…

Cocos2D-HTML5开源2D游戏引擎

http://www.programmer.com.cn/12198/ Cocos2D-HTML5是基于HTML5规范集的Cocos2D引擎的分支,于2012年5月发布。Cocos2D-HTML5的作者林顺将在本文中介绍Cocos2D-HTML5的框架、API、跨平台能力以及强大的性能。Cocos2D-HTML5是Cocos2D系列引擎随着互联网技术演进而产生…

illustrator下载_Illustrator笔工具练习

illustrator下载Adobe Illustrator is a fantastic vector creation tool and you can create a lot of things without ever using the Pen Tool. However, if you want to use Illustrator at its full potential, I personally believe that you need to master and become …

怎么更好练习数位板_如何设计更好的仪表板

怎么更好练习数位板重点 (Top highlight)Dashboard noun \ˈdash-ˌbȯrd\ A screen on the front of a usually horse-drawn vehicle to intercept water, mud, or snow.仪表盘 名词\ ˈdash-ˌbȯrd \\通常在马拉的车辆前部的屏幕,用来拦截水,泥或雪。…

学习正则表达式

deerchao的blog Be and aware of who you are. 正则表达式30分钟入门教程 来园子之前写的一篇正则表达式教程,部分翻译自codeproject的The 30 Minute Regex Tutorial。 由于评论里有过长的URL,所以本页排版比较混乱,推荐你到原处查看,看完了如果有问题,再到这里来提…

人物肖像速写_去哪儿? 优步肖像之旅

人物肖像速写In early 2018, the Uber brand team started a rebranding exercise, exploring a fresh take on what it means to be a global transportation and technology company. A new logo was developed in tandem with a bespoke sans-serif typeface called Uber Mo…

hp-ux锁定用户密码_我们如何简化925移动应用程序的用户入门— UX案例研究

hp-ux锁定用户密码Prologue: While this is fundamentally a showcase of our process in the hopes of helping others, it’s also a story about the realism of limitations when working with clients and how we ultimately were able to deliver a product the client w…

微信公众号无需二次登录_您无需两次解决问题-您需要一个设计系统

微信公众号无需二次登录重点 (Top highlight)The design system concept can be differently defined according to each person’s background. Designers may say that a design system is a style guide while developers may say it is UI standards, or specs, or even as…

视觉工程师面试指南_选择正确视觉效果的终极指南

视觉工程师面试指南When it comes to effective data visualization, the very first and also the most critical step is to select the right graph/visual for the data that you want to present. With a wide range of visualization software that is available offerin…

问题反馈模板_使用此模板可获得更好,更有价值的UX反馈

问题反馈模板Feedback is an important part of UX design. To improve the work you do you need to be able to give and receive feedback. Receiving valuable feedback is for a very large part up to you.反馈是UX设计的重要组成部分。 为了改进您的工作,您需…

iofd:文件描述符_文字很重要:谈论设计时18个有意义的描述符

iofd:文件描述符As designers, many of us think we’re just visual creatures. But creating visuals is only half of the job. The other half is verbal communication — actually talking about design. Whether we’re showcasing our own work, giving or receiving c…

保护程序猿滴眼睛-----修改VS 2008 编辑器颜色 (修改 chrome浏览器的背景色)

前几天更改了 chrome 的背景色后,虽然有些地方看起来不和谐,想百度的首页,显示出了大快的图片区域,但是,整体感觉这个颜色设置真的对眼睛有一定保护作用。。。 所以,再顺便修改一下 经常用的 vs2008 编辑器…

数据可视化 信息可视化_可视化哲学的黎明

数据可视化 信息可视化Note: this is the foreword of the book Data Visualization in Society (Amsterdam University Press, 2020)注意:这是《 社会中的数据可视化 》一书的前言 (阿姆斯特丹大学出版社,2020年) Geographer John Pickles once wrote …

HTTP 错误 404.2 - Not Found 由于 Web 服务器上的“ISAPI 和 CGI 限制”列表设置,无法提供您请求的页面...

详细错误:HTTP 错误 404.2 - Not Found. 由于 Web 服务器上的“ISAPI 和 CGI 限制”列表设置,无法提供您请求的页面. 出现环境:win7 IIS7.0 解决办法:IIS的根节点->右侧“ISAPI和CGI限制”->把禁止的DotNet版本项设置为允许…

重口味动漫_每种口味的图标样式

重口味动漫The icons are, without a doubt, one of the most used graphic elements today in the interface design of digital products. And to make this statement with some degree of certainty, we do not even need a very robust statistical analysis. Just rememb…

从头开始vue创建项目_我正在以设计师的身份开始一个被动的收入项目。 从头开始。...

从头开始vue创建项目Do you ever read an article on Medium (or elsewhere) about passive income, side projects and big money making blogs? When I read such an article it looks like it is easy to do yourself if you just put in the work. To see if that is the …