苹果iOS界面设计指南中文翻译

5星 · 超过95%的资源 需积分: 0 926 下载量 150 浏览量 更新于2024-07-29 8 收藏 3.83MB PDF 举报
"iOS界面设计指南中文版" iOS界面设计指南是苹果公司为开发者和设计师提供的一份详尽的文档,旨在确保iOS应用遵循统一、直观且高效的用户界面设计原则,从而提供优秀的用户体验。这份中文版的指南对于中国的设计者和开发者来说是一份宝贵的参考资料,可以帮助他们更好地理解和遵循苹果的HIG(Human Interface Guidelines)。 ### 第1章 简介 #### 要旨概览 本章强调了设计iOS应用的基本理念,即遵循平台特性和交互设计的核心原则。苹果认为,伟大的iOS程序不仅需要功能强大,更要在界面设计上体现出简洁与一致,以便用户能够轻松上手。 #### 伟大的iOS程序应遵守平台和交互设计原则 这包括利用iOS设备的独特硬件特性,如触摸屏操作、多任务处理,以及与Apple生态系统的集成,如使用统一的导航模式、控件和图标。设计时要考虑设备的物理尺寸,确保在不同尺寸的屏幕上都能良好地呈现。 #### 伟大的程序起源于简明的定义 在开始设计之前,明确应用的目标和核心功能至关重要。设计师需要确定应用的主要任务,以及用户最可能进行的操作,以此为基础构建界面布局和交互流程。 #### 伟大的用户体验来源于关注细节 优秀的用户体验不仅体现在大的设计决策上,还在于对每一个细节的关注。这包括字体选择、颜色搭配、动画效果以及反馈机制,这些元素共同构成了用户与应用互动的整体感受。 ### 用户期待能在程序中使用苹果的技术 用户通常期望iOS应用能充分利用苹果提供的技术,例如Siri集成、3D Touch、Live Photos等。设计时需考虑如何自然地整合这些功能,提供无缝的用户体验。 ### 设计原则与实践 - **一致性**:保持设计的一致性可以使用户快速熟悉新应用,减少学习成本。这意味着在全系统范围内使用相似的界面元素和交互方式。 - **清晰度**:内容应清晰易读,避免过多的视觉干扰。文本和图像应具有足够的对比度,以提高可读性。 - **深度**:利用iOS的3D Touch和触摸反馈,增加界面的层次感和交互深度。 - **直觉性**:设计应直观,让用户不需阅读手册就能理解如何操作。 - **效率**:通过减少用户输入、简化流程和提供快捷方式,提高用户的操作效率。 - **容错性**:允许用户撤销操作,提供恢复路径,减少误操作带来的困扰。 - **吸引力**:虽然功能和易用性是关键,但美观的设计同样重要,它可以增强用户的满意度和忠诚度。 ### 控件与界面元素 - **导航**:iOS提供了多种导航模式,如导航栏、标签栏、页面控制器等,设计师应根据应用需求选择合适的导航方式。 - **表视图**:用于展示列表或表格数据,可以定制行和列的样式。 - **集合视图**:适用于显示大量项目,支持不同的布局模式,如网格布局、瀑布流等。 - **按钮**:用于触发操作,可以包含文字、图像或两者的组合。 - **开关**和**滑块**:用于切换状态或调整值。 - **提示和警告**:提供适时的信息和反馈,如警报视图、动作表和模态视图。 ### 设计流程 - **研究与规划**:理解用户需求,定义目标用户群体,进行竞品分析。 - **草图绘制**:快速绘制概念草图,探索不同的设计方案。 - **原型制作**:创建交互式原型,进行用户测试,收集反馈。 - **视觉设计**:确定色彩方案、图标、字体等视觉元素,确保设计的一致性和品牌识别度。 - **迭代**:根据测试结果不断优化设计,直至达到理想的效果。 通过遵循这些指导原则和最佳实践,设计师可以创造出符合苹果标准,同时又能满足用户需求的iOS应用界面。
2011-12-22 上传
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