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