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







目录
相关文章
|
17天前
「Mac畅玩鸿蒙与硬件41」UI互动应用篇18 - 多滑块联动控制器
本篇将带你实现一个多滑块联动的控制器应用。用户可以通过拖动多个滑块,动态控制不同参数(如红绿蓝三色值),并实时显示最终结果。我们将以动态颜色调节为例,展示如何结合状态管理和交互逻辑,打造一个高级的滑块控制器应用。
157 78
|
2天前
「Mac畅玩鸿蒙与硬件47」UI互动应用篇24 - 虚拟音乐控制台
本篇将带你实现一个虚拟音乐控制台。用户可以通过界面控制音乐的播放、暂停、切换歌曲,并查看当前播放的歌曲信息。页面还支持调整音量和动态显示播放进度,是音乐播放器界面开发的基础功能示例。
130 80
|
7天前
|
数据处理
「Mac畅玩鸿蒙与硬件45」UI互动应用篇22 - 评分统计工具
本篇将带你实现一个评分统计工具,用户可以对多个选项进行评分。应用会实时更新每个选项的评分结果,并统计平均分。这一功能适合用于问卷调查或评分统计的场景。
122 65
|
18天前
|
UED
「Mac畅玩鸿蒙与硬件40」UI互动应用篇17 - 照片墙布局
本篇将带你实现一个简单的照片墙布局应用,通过展示多张图片组成照片墙效果,用户可以点击图片查看其状态变化。
131 67
|
6天前
「Mac畅玩鸿蒙与硬件46」UI互动应用篇23 - 自定义天气预报组件
本篇将带你实现一个自定义天气预报组件。用户可以通过选择不同城市来获取相应的天气信息,页面会显示当前城市的天气图标、温度及天气描述。这一功能适合用于动态展示天气信息的小型应用。
95 38
|
10天前
|
iOS开发 开发者 MacOS
深入探索iOS开发中的SwiftUI框架
【10月更文挑战第21天】 本文将带领读者深入了解Apple最新推出的SwiftUI框架,这一革命性的用户界面构建工具为iOS开发者提供了一种声明式、高效且直观的方式来创建复杂的用户界面。通过分析SwiftUI的核心概念、主要特性以及在实际项目中的应用示例,我们将展示如何利用SwiftUI简化UI代码,提高开发效率,并保持应用程序的高性能和响应性。无论你是iOS开发的新手还是有经验的开发者,本文都将为你提供宝贵的见解和实用的指导。
93 66
|
8天前
|
存储 索引
「Mac畅玩鸿蒙与硬件44」UI互动应用篇21 - 随机励志语录生成器
本篇将带你实现一个随机励志语录生成器应用。用户点击按钮后,界面会随机显示一条预设的励志语录。该应用展示了如何结合数组操作、状态管理和动态更新界面内容的功能,是一个轻量级的互动应用示例。
76 21
「Mac畅玩鸿蒙与硬件44」UI互动应用篇21 - 随机励志语录生成器
|
23天前
|
存储 UED
「Mac畅玩鸿蒙与硬件37」UI互动应用篇14 - 随机颜色变化器
本篇将带你实现一个随机颜色变化器应用。用户点击“随机颜色”按钮后,界面背景会随机变化为淡色系颜色,同时显示当前的颜色代码,页面还会展示一只猫咪图片作为装饰,提升趣味性。
83 36
|
20天前
「Mac畅玩鸿蒙与硬件38」UI互动应用篇15 - 猜数字增强版
本篇将带你实现一个升级版的数字猜谜游戏。相比基础版,新增了计分和历史记录功能,用户可以在每次猜测后查看自己的得分和猜测历史。此功能展示了状态管理的进阶用法以及如何保存和显示历史数据。
80 31
|
15天前
「Mac畅玩鸿蒙与硬件43」UI互动应用篇20 - 闪烁按钮效果
本篇将带你实现一个带有闪烁动画的按钮交互效果。通过动态改变按钮颜色,用户可以在视觉上感受到按钮的闪烁效果,提升界面互动体验。
78 19

热门文章

最新文章