【与iOS开发息息相关的知识】1、iOS应用UI设计入门

简介: 几乎所有体验过iPhone、iPad的用户都会为iOS系统精巧的设计、流畅的运行和丰富的应用选择所叹服,因此无论其所为的“市场份额”被Android抢占了多少,亦无论有多少人对iOS7的新界面在不停吐槽,iPhone系列在消费者眼中依然是高端智能手机无可争议的代表作。

几乎所有体验过iPhone、iPad的用户都会为iOS系统精巧的设计、流畅的运行和丰富的应用选择所叹服,因此无论其所为的“市场份额”被Android抢占了多少,亦无论有多少人对iOS7的新界面在不停吐槽,iPhone系列在消费者眼中依然是高端智能手机无可争议的代表作。虽然自iOS系统诞生的第一天起,直到今天乃至未来都不存在开源的可能性,但也正是这种限制性保证了其生态系统的牢固、稳定,同时发布平台Appstore严格的审核制度也保证了iOS平台应用更高的平均质量。作为直接与用户交互的窗口,高水平的UI设计直接影响了用户体验的优劣,其重要性不亚于功能代码的实现。应用的交互设计是一项比较复杂的工作,需要考虑产品目标人群的定位、功能实现的逻辑、界面的美化等多方面因素,而今天我们单单就如何对界面进行基本的设计开始研究,以求在完成功能的开发至于,尽量多了解界面设计的知识,使得开发出来的应用不至于永远都是光秃秃的一块白板上面罗列着一些控件。

1、关于分辨率

对于这个概念,自己竟然曾经模糊了很久。一般来说所谓分辨率可以理解为显示界面上水平和垂直两个方向可以显示的点的个数。但是由于Renita的出现,“Resolution”的概念变得比以往想象的更加复杂。在iPhone 3GS及其以前的产品中没有采用Renita屏幕,因此,屏幕上每一个点“Point”仅显示一个像素“Pixel”,二者可以说是等价的,其分辨率为320×480。自iPhone 4引入Renita屏幕后,屏幕可现实的像素值在水平和垂直方向翻倍,一个点“Point”可以显示4个像素“Pixel”。自此,点分辨率和像素分辨率的定义就出现了偏差,iPhone 4、iPhone 4S的点分辨率和像素分辨率分别为320×480、640×960,iPhone 5、iPhone 5S、iPhone 5C的点分辨率和像素分辨率分别为320×568、640×1136。包括iPad系列在内的各个iOS设备的分辨率列在下表。

产品

Renita

点分辨率

像素分辨率

iPhone,iPhone 3G,iPhone 3GS

 

320×480

320×480

iPhone 4,iPhone 4S

320×480

640×960

iPhone 5, iPhone 5S, iPhone 5c

320×568

640×1136

iPad, iPad 2, iPad Mini

 

1024×768

1024×768

New iPad, iPad 4, iPad Air, iPad Mini2

1024×768

2048×1536

在进行界面设计的时候,要考虑的是点分辨率(或者称为逻辑分辨率)而不是像素分辨率(或者称为显示分辨率)。比如在设定某个控件在iPhone界面中的位置的时候,屏幕的宽度始终应该按照320个点计算,而不是区分是否是Renita屏幕而区分是640或者320。


2、使用Storyboard

从设计过程来看,storyboard比手写UI和xib文件提供了更加直观的界面切换的逻辑表达方式。在界面跳转过程中,segue提供了更加方便、直观的界面切换和参数传递方法。同时,界面和代码也可以更好地结合起来,方便在出现bug时及时进行调试和排错。目前看来,storyboard唯一的不足之处是相比手写UI,使用storyboard的应用在运行过程中占用的内存空间略大。不过相比手写UI节省下来的开发时间,这个代价是完全值得的。


3、界面设计的一些问题

界面布局:必须始终记住,UI的核心架构永远比周边的装饰更加重要。如果不能让用户第一时间找到想要点击的按钮的位置,那么周边装饰只会起到更多的副作用。我们应该在思考关键控件在屏幕上什么位置上花费更多的时间。

层级:现在很多应用都采用了导航、工具栏等结构,这些结构的优点是可以很清晰地表示应用各个节目之间的相互关系,比如递进、并列等。各个界面之间结构的混乱是应用设计的大忌。

控件尺寸和位置:通常在设计iOS界面的时候,我们都需要尽量在狭小的屏幕上安放尽可能多的控件,这可能就会造成控件尺寸被设计得越来越小。但是过小的尺寸将会影响点击的精确度。通常控件的尺寸至少应该设计成与指尖相近的大小,苹果默认是44×44点矩阵,如果更小的话,则需要一个更大的感应区。由于相同的原因,必须仔细安排屏幕上各个控件的位置,尽可能充分地利用屏幕控件,尽量避免小尺寸的空间堆积在一起,这样极易造成误操作,影响用户体验。


4、应用界面的适应性

相比Android,iOS应用在碎片化的问题上麻烦要少得多。但是,多种设备屏幕尺寸不同的问题依然存在,上文的列表中就已经有所体现。为了解决这个问题,我们开发的应用普遍应当事先自动布局功能(Autolayout)。


5、交互方式的设计

推荐一本书《About Face 3》(Allan Cooper著),中文翻译《交互设计精髓》,可谓设计方面的经典之作。

在UI的设计中,手指滑动屏幕来控制同鼠标点击不同,前者可以通过点击、滑动、多指操作等实现更多更丰富的功能。所以,传统界面设计中常用的按键组可以更多地被这些多重定义的操作取代,有利于减少控件的个数,使得界面更加简洁。此外,在界面与用户进行交互时,即使给予用户足够而何时的反馈非常重要,这可以告诉用户他现在在干什么,可以得到什么好处。这样有利于培养用户的熟练度和成就感,增强用户的粘性。







目录
相关文章
|
20天前
|
前端开发 编解码 数据格式
浅谈响应式编程在企业级前端应用 UI 开发中的实践
浅谈响应式编程在企业级前端应用 UI 开发中的实践
20 0
浅谈响应式编程在企业级前端应用 UI 开发中的实践
|
1月前
|
API 数据安全/隐私保护 iOS开发
利用uni-app 开发的iOS app 发布到App Store全流程
利用uni-app 开发的iOS app 发布到App Store全流程
84 3
|
1月前
|
移动开发 前端开发 数据安全/隐私保护
iOS代码混淆-从入门到放弃
iOS代码混淆-从入门到放弃
19 0
|
1月前
|
Web App开发 数据采集 前端开发
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
15 0
|
1月前
|
XML 存储 数据格式
SAP UI5 控件 customData 属性的应用介绍
SAP UI5 控件 customData 属性的应用介绍
31 0
|
2月前
|
iOS开发 开发者
苹果iOS App Store上架操作流程详解:从开发者账号到应用发布
很多开发者在开发完iOS APP、进行内测后,下一步就面临上架App Store,不过也有很多同学对APP上架App Store的流程不太了解,下面我们来说一下iOS APP上架App Store的具体流程,如有未涉及到的部分,大家可以及时咨询,共同探讨。
|
2天前
|
存储 编解码 JSON
利用SwiftUI构建高效iOS天气应用
【4月更文挑战第21天】 在本文中,我们将深入探讨如何运用SwiftUI框架打造一个响应迅速且用户友好的iOS天气应用程序。我们将重点放在利用SwiftUI的声明式语法简化界面开发,并通过结合Core Location和Networking APIs实现实时天气数据的获取与展示。文章将详细阐述整个开发过程,包括API集成、数据模型设计、用户界面布局以及动态适配不同屏幕尺寸的策略。
|
6天前
|
API 定位技术 iOS开发
IOS开发基础知识:什么是 Cocoa Touch?它在 iOS 开发中的作用是什么?
【4月更文挑战第18天】**Cocoa Touch** 是iOS和Mac OS X应用的核心框架,包含面向对象库、运行时系统和触摸优化工具。它提供Mac验证的开发模式,强调触控接口和性能,涵盖3D图形、音频、网络及设备访问API,如相机和GPS。是构建高效iOS应用的基础,对开发者至关重要。
9 0
|
16天前
|
XML 开发工具 Android开发
构建高效的安卓应用:使用Jetpack Compose优化UI开发
【4月更文挑战第7天】 随着Android开发不断进化,开发者面临着提高应用性能与简化UI构建流程的双重挑战。本文将探讨如何使用Jetpack Compose这一现代UI工具包来优化安卓应用的开发流程,并提升用户界面的流畅性与一致性。通过介绍Jetpack Compose的核心概念、与传统方法的区别以及实际集成步骤,我们旨在提供一种高效且可靠的解决方案,以帮助开发者构建响应迅速且用户体验优良的安卓应用。
|
21天前
|
开发工具 Swift iOS开发
利用SwiftUI构建动态用户界面:iOS开发新范式
【4月更文挑战第3天】 随着苹果不断推进其软件开发工具的边界,SwiftUI作为一种新兴的编程框架,已经逐渐成为iOS开发者的新宠。不同于传统的UIKit,SwiftUI通过声明式语法和强大的功能组合,为创建动态且响应式的用户界面提供了一种更加简洁高效的方式。本文将深入探讨如何利用SwiftUI技术构建具有高度自定义能力和响应性的用户界面,并展示其在现代iOS应用开发中的优势和潜力。