《iOS Human Interface Guidelines》——Designing for iOS

iOS包含了下面这些主旨:

  • 遵守:UI帮助人们对内容进行理解和交互,而不是与其竞争。
  • 清晰:文本在每个尺寸都很清晰,图标是清晰且明白易懂的,装饰是巧妙而合适的,并且专注于使用的设计。
  • 深度:有层次感的视觉和合适的手势带来了活力,而且提升了人们的愉悦感和理解深度



无论你是在重新设计一个旧的app还是在创建一个新的app,考虑以下这些方法来处理工作:
  • 首先,透过app的UI看到其核心功能并且确定它们的关联性。
  • 然后,使用iOS的设计主旨使其充满于UI和用户体验。小心的添加细节和装饰,不要毫无理由地添加。
  • 最后,确保你设计出的UI可以适应各种各样的设备和风格,这样你的用户可以在尽可能多的环境下享受你的app。

贯穿这个过程,准备好去打破常规、质疑设想,专注于内容和功能驱动每一个设计。



服从内容

尽管一个清新的、漂亮的UI和流动的手势被iOS体验所强调,但用户的内容才是它的核心。

这里是一些确保你的设计能够提升功能以及服从用户的内容的方法。



利用全屏的优势。天气app是这个方法的一个很好的例子:这个显示某个地区当前的天气的漂亮的、全屏的描述界面,包括那些显示每小时的天气信息的空间立即传达了最重要的信息。



重新考虑物理的、真实的视觉指示物。刃角、梯度和阴影效果有时会导致过重的UI元素,这会与内容竞争甚至压过内容。相反地,专注于内容,让UI扮演一个支持内容的角色。



用半透明的UI元素暗示其后面的内容。半透明元素——比如控制中心——提供了环境帮助用户看到有更多的内容是可获得的,并且可以给出一个短暂的信号。在iOS中,一个半透明的元素只在内容直接在其后方时变得模糊——给出一种透过米纸看的印象——它不会将屏幕的其余部分模糊化。



指示清晰

指示清晰是另一个确保内容在你的app中占首要地位的方法。这里有一些方法可以使最重要的内容和功能变得清晰和易于交互。



使用大量的负空间。负空间可以使重要的内容和功能更加的明显和易于理解。负空间还会传达一种宁静的感觉,使app看上去更加的专注和有效。



用颜色简化UI。一个关键的颜色——比如便签中的黄色——强调了重要的信息并且不易察觉地指示了交互。它也给app带来一个持续的视觉主题。内置的app使用了一系列纯净的系统颜色,使其在各种色彩下以及黑暗或明亮的背景下都看起来不错。



使用系统字体来确保清晰。动态类型的San Francisco(一种iOS系统字体)可以自动地调整字母间距和行高,这样文本会易于阅读,在每个尺寸下都很好看。无论你使用San Francisco还是自定义的字体,确保使用动态类型,这样你的app可以在用户选择了不同的文本尺寸时做出响应。



采取没有边界的按钮。在默认情况下,所有的按钮都是无边界的。在内容区域,一个无边界的按钮通过上下文、颜色和一个呼唤操作的标题来表明交互。当它起作用时,一个内容区域的按钮可以展示一个稀薄的边界或者有颜色的背景来使其有差异。



通过深度来传达

iOS通常在清晰的层级下展示内容来传达层级和位置,这可以帮助用户理解屏幕上各个物体的关系。



在一个支持3D Touch的设备上,轻按(peek)、重按(pop)和快速的响应动作使用户可以进入重要的功能或信息查看而不从运行环境中离开。



通过使用半透明的背景和在主屏幕上浮动出现,文件夹将自己的内容和屏幕上其余部分区分开来了。



提醒事件像所展示的那样在层级中显示了清单。当用户操作一个清单时,其余清单会一起收拢到屏幕的底部去。



日历在用户从年、月、日之间移动时通过增强的过渡效果给用户一种层次和深度的感觉。在这里展示的滚动年份视图中,用户可以直接看到今天的日期,还可以执行其他的日历任务。



当用户选择了一个月份,年份视图会放大推进然后显示月份视图。今天的日期依然高亮,年份则在返回按钮上显示,所以用户可以清楚的知道他们在哪个视图,从哪个视图来到这个视图的,以及如何回到原来的视图。



当用户选择一个日期时会发生相似的过渡效果:月份视图会裂开,将当前一周的日期推到屏幕顶部,然后显示所选中日期的小时视图。通过每个过渡效果,日历加强了年份、月份和日期之间的层次关系。



  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 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、付费专栏及课程。

余额充值