苹果人机交互指南_苹果人机界面设计指南的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 让我们成为朋友!TwitterDribbble上关注我,并在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

苹果人机交互指南

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Introduction Introduction 9 At a Glance 9 Great iOS Apps Embrace the Platform and HI Design Principles 9 Great App Design Begins with Some Clear Definitions 10 A Great User Experience Is Rooted in Your Attention to Detail 10 People Expect to Find iOS Technologies in the Apps They Use 10 All Apps Need at Least Some Custom Artwork 11 Chapter 1 Platform Characteristics 13 The Display Is Paramount, Regardless of Its Size 13 Device Orientation Can Change 14 Apps Respond to Gestures, Not Clicks 14 People Interact with One App at a Time 15 Preferences Are Available in Settings 16 Onscreen User Help Is Minimal 16 Most iOS Apps Have a Single Window 17 Two Types of Software Run in iOS 17 Safari on iOS Provides the Web Interface 18 Chapter 2 Human Interface Principles 21 Aesthetic Integrity 21 Consistency 21 Direct Manipulation 22 Feedback 22 Metaphors 22 User Control 23 Chapter 3 App Design Strategies 25 Create an Application Definition Statement 25 1. List All the Features You Think Users Might Like 25 2. Determine Who Your Users Are 26 3. Filter the Feature List Through the Audience Definition 26 4. Don’t Stop There 26 Design the App for the Device 27 Embrace iOS UI Paradigms 27 Ensure that Universal Apps Run Well on Both iPhone and iPad 28 Reconsider Web-Based Designs 28 Tailor Customization to the Task 29 Prototype and Iterate 31 Chapter 4 Case Studies: Transitioning to iOS 33 From Mail on the Desktop to Mail on iPhone 33 From Keynote on the Desktop to Keynote on iPad 35 From Mail on iPhone to Mail on iPad 38 From a Desktop Browser to Safari on iOS 41 Chapter 5 User Experience Guidelines 47 Focus on the Primary Task 47 Elevate the Content that People Care About 48 Think Top Down 48 Give People a Logical Path to Follow 48 Make Usage Easy and Obvious 49 Use User-Centric Terminology 50 Minimize the Effort Required for User Input 50 Downplay File-Handling Operations 50 Enable Collaboration and Connectedness 51 De-emphasize Settings 52 Brand Appropriately 53 Make Search Quick and Rewarding 53 Entice and Inform with a Well-Written Description 54 Be Succinct 55 Use UI Elements Consistently 55 Consider Adding Physicality and Realism 56 Delight People with Stunning Graphics 57 Handle Orientation Changes 58 Make Targets Fingertip-Size 60 Use Subtle Animation to Communicate 61 Support Gestures Appropriately 62 Ask People to Save Only When Necessary 63 Make Modal Tasks Occasional and Simple 63 Start Instantly 64 Always Be Prepared to Stop 65 Don’t Quit Programmatically 65 If Necessary, Display a License Agreement or Disclaimer 65 For iPad: Enhance Interactivity (Don’t Just Add Features) 66 For iPad: Reduce Full-Screen Transitions 66 For iPad: Restrain Your Information Hierarchy 67 For iPad: Consider Using Popovers for Some Modal Tasks 69 For iPad: Migrate Toolbar Content to the Top 70 Chapter 6 iOS Technology Usage Guidelines 73 iCloud Storage 73 Multitasking 74 Notification Center 76 Printing 80 iAd Rich Media Ads 81 Quick Look Document Preview 87 Sound 88 Understand User Expectations 88 Define the Audio Behavior of Your App 89 Manage Audio Interruptions 93 Handle Media Remote Control Events, if Appropriate 94 VoiceOver and Accessibility 95 Edit Menu 96 Undo and Redo 98 Keyboards and Input Views 99 Location Services 99 Chapter 7 iOS UI Element Usage Guidelines 101 Bars 101 The Status Bar 101 Navigation Bar 102 Toolbar 105 Tab Bar 106 Content Views 108 Popover (iPad Only) 108 Split View (iPad Only) 111 Table View 113 Text View 121 Web View 122 Container View Controller 123 Alerts, Action Sheets, and Modal Views 123 Alert 123 Action Sheet 127 Modal View 130 Controls 133 Activity Indicator 133 Date and Time Picker 133 Detail Disclosure Button 134 Info Button 135 Label 135 Network Activity Indicator 136 Page Indicator 136 Picker 137 5 2011-10-12 | . 2011 Apple Inc. All Rights Reserved. CONTENTS Progress View 138 Rounded Rectangle Button 139 Scope Bar 139 Search Bar 140 Segmented Control 141 Slider 142 Stepper 143 Switch 143 Text Field 144 System-Provided Buttons and Icons 145 Standard Buttons for Use in Toolbars and Navigation Bars 145 Standard Icons for Use in Tab Bars 148 Standard Buttons for Use in Table Rows and Other UI Elements 149 Chapter 8 Custom Icon and Image Creation Guidelines 151 Tips for Designing Great Icons and Images 152 Tips for Creating Great Artwork for the Retina Display 153 Tips for Creating Resizable Images 154 Application Icons 155 Launch Images 157 Small Icons 159 Document Icons 160 Document Icon Specifications for iPhone 160 Document Icon Specifications for iPad 161 Web Clip Icons 163 Icons for Navigation Bars, Toolbars, and Tab Bars 164 Newsstand Icons 166 Document Revision History 169

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值