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







目录
相关文章
|
2月前
|
开发框架 前端开发 JavaScript
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发一
本文介绍了方舟开发框架(ArkUI)及其两种开发范式:基于ArkTS的声明式开发范式和类Web开发范式。ArkUI是用于构建HarmonyOS应用界面的UI框架,提供极简UI语法和基础设施。声明式开发范式使用ArkTS语言,以组件、动画和状态管理为核心,适合复杂团队协作;类Web开发范式采用HML、CSS、JavaScript三段式开发,适用于简单界面应用,贴近Web开发者习惯。文中还概述了两者的架构和基础能力,帮助开发者选择合适的范式进行高效开发。
84 15
|
2月前
|
编解码 前端开发 Java
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发三
本文介绍了基于声明式UI范式的图形绘制与动画效果实现方法,涵盖绘制图形、添加动画效果及常见组件说明三部分内容。在绘制图形部分,详细讲解了如何通过Circle组件为食物成分表添加圆形标签,以及使用Path组件结合SVG命令绘制自定义图形(如应用Logo)。动画效果部分则展示了如何利用animateTo实现闪屏动画,包括渐出、放大效果,并设置页面跳转;同时介绍了页面间共享元素转场动画的实现方式。最后,文章列举了声明式开发范式中的各类组件及其功能,帮助开发者快速上手构建复杂交互页面。
80 11
|
2月前
|
存储 开发框架 API
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发二
本文详细介绍了基于声明式UI开发的健康饮食应用的设计与实现过程。内容涵盖从基础环境搭建到复杂功能实现的全流程,包括创建简单视图、构建布局(如Stack、Flex)、数据模型设计、列表与网格布局构建,以及页面跳转和数据传递等核心功能。 本文通过实际案例深入浅出地解析了声明式UI开发的关键技术和最佳实践,为开发者提供了宝贵的参考。
73 14
|
1月前
|
JavaScript 前端开发 UED
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发四
本文介绍了Web组件开发与性能优化的相关内容。在Web组件开发部分,涵盖创建组件、设置样式与属性、添加事件和方法以及场景示例,如动态播放视频。性能提升方面,推荐使用数据懒加载、条件渲染替代显隐控制、Column/Row替代Flex、设置List组件宽高及调整cachedCount减少滑动白块等方法,以优化应用性能与用户体验。
119 56
|
1月前
|
JavaScript 前端开发 开发者
09.HarmonyOS Next数据驱动UI开发:ForEach与动态渲染完全指南(上)
在现代前端开发中,数据驱动UI已成为主流开发范式。HarmonyOS Next的ArkTS语言和声明式UI框架完美支持这一理念,使开发者能够以更高效、更直观的方式构建复杂应用。
58 1
|
1月前
|
编解码 UED 开发者
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发之常见布局
本文主要介绍了自适应布局与响应式布局的相关内容。自适应布局部分涵盖线性布局、层叠布局、弹性布局和网格布局,详细说明了各布局的特性及使用方法,例如线性布局中的排列、拉伸与缩放,弹性布局的方向、换行与对齐方式等。响应式布局则重点讲解了栅格系统和媒体查询,阐述如何通过栅格组件和媒体查询条件实现不同设备上的适配效果。这些技术帮助开发者灵活应对多尺寸屏幕的设计需求,提升用户体验。
138 55
|
3月前
|
人工智能 物联网 编译器
【01】优雅草星云物联网AI智控系统从0开发鸿蒙端适配完成流程-初始化鸿蒙编译器deveco studio项目结构-UI设计图切片下载-优雅草卓伊凡
【01】优雅草星云物联网AI智控系统从0开发鸿蒙端适配完成流程-初始化鸿蒙编译器deveco studio项目结构-UI设计图切片下载-优雅草卓伊凡
106 11
【01】优雅草星云物联网AI智控系统从0开发鸿蒙端适配完成流程-初始化鸿蒙编译器deveco studio项目结构-UI设计图切片下载-优雅草卓伊凡
|
4月前
|
关系型数据库 MySQL 数据库
基于Flink CDC 开发,支持Web-UI的实时KingBase 连接器,三大模式无缝切换,效率翻倍!
TIS 是一款基于Web-UI的开源大数据集成工具,通过与人大金仓Kingbase的深度整合,提供高效、灵活的实时数据集成方案。它支持增量数据监听和实时写入,兼容MySQL、PostgreSQL和Oracle模式,无需编写复杂脚本,操作简单直观,特别适合非专业开发人员使用。TIS率先实现了Kingbase CDC连接器的整合,成为业界首个开箱即用的Kingbase CDC数据同步解决方案,助力企业数字化转型。
611 5
基于Flink CDC 开发,支持Web-UI的实时KingBase 连接器,三大模式无缝切换,效率翻倍!
|
4月前
|
开发框架 缓存 自然语言处理
HarmonyOS ArkTS声明式UI开发实战教程
本文深入探讨了ArkTS作为HarmonyOS生态中新一代声明式UI开发框架的优势与应用。首先对比了声明式与命令式开发的区别,展示了ArkTS如何通过直观高效的代码提升可维护性。接着分析了其核心三要素:数据驱动、组件化和状态管理,并通过具体案例解析布局体系、交互组件开发技巧及复杂状态管理方案。最后,通过构建完整TODO应用实战,结合调试优化指南,帮助开发者掌握声明式UI设计精髓,感受ArkTS的独特魅力。文章鼓励读者通过“破坏性实验”建立声明式编程思维,共同推动HarmonyOS生态发展。
220 3
|
4月前
|
Android开发 UED iOS开发
Harmony os next~UI开发与ArkUI框架
鸿蒙OS的UI开发基于ArkUI框架,采用声明式编程,简化开发流程。五大核心组件(Text、Button、List、Grid、Flex)助力高效布局,支持数据绑定与动态更新。事件响应机制灵敏,适合构建交互丰富的应用。实战技巧包括规范命名、样式复用和调试方法。掌握这些,轻松开发鸿蒙应用。下期预告:分布式开发,记得带上烤冷面!
158 0

热门文章

最新文章