《iOS应用开发指南——使用HTML5、CSS3和JavaScript》——1.4节法宝就是转变

简介:

本节书摘来自异步社区《iOS应用开发指南——使用HTML5、CSS3和JavaScript》一书中的第1章,第1.4节法宝就是转变,作者 【美】Kristofer Layon,更多章节内容可以访问云栖社区“异步社区”公众号查看

1.4 法宝就是转变
iOS应用开发指南——使用HTML5、CSS3和JavaScript
所以这里有iOS设备另一个关键的不同点:我们的原生应用程序的内容传递形式,这是我们需要设计的重点。

如果你不确信的话,对比一下其他硬件的屏幕表面区域的尺寸。

iPhone、iPod touch和iPad有一个方面非常相似:它们几乎只剩下屏幕。从正面观察,3种设备大约95%的区域是屏幕,而笔记本电脑的屏幕占的比例比50%还少一点点(图1.3)。这是重要的区别。即使笔记本电脑的屏幕上显示了一个迷人的网页,很显然它仍然是笔记本电脑,不是吗?键盘、触摸板,手腕区域,以及屏幕周围的区域不会消失。它们仍然影响着我们的体验,使我们远离内容。


344502d1f78bb078b233becfd905dfe13079ae6a

图1.3 即使笔记本电脑大部分是键盘,触摸板和边框。屏幕也少于整个表面的50%

但是一旦你在iOS设备上运行应用程序,因为它的多点触摸,和以屏幕为主导的设计,整个设备就发生了巨大的转变。这一点在有的应用程序里表现得更明显。让我们考虑一下iPhone运行电话应用程序的时候是怎么变成电话的。硬件几乎消失:突然,我们有了一个发光的电话拨号盘和内置的联系人名单。地图也是一样:设备里不是有一幅真正的地图,而是应用程序让设备变成了一幅地图。

理解这个转变效果对我们为这些设备设计的方法是至关重要的。我们需要额外注意怎么样设计用户界面(UI)。当我们需要设计自定义的UI元件时,这些元件用以直接支持我们设计的应用程序的交互需要,这个时候我们需要尊重原生的Apple iOS控件的习惯用法。而且,某些时候,UI元件不仅仅是功能性,商标可能也是个因素。

理解在这种情况下设计思想的重要性是必不可少的。原因是,我认为无论在原生的Apple 用户界面控件还是特定内容或者商标这样细节上的标识缺失并不同于在班级提交一篇论文时,从一篇出类拔萃的论文降格为一篇良好的论文。

遗憾的是,这个错误的观点在其他场合远远比这个更被人挑剔:标识的缺失,在任何情况下,都将让一个优秀的应用程序显得不那么优秀。它很容易成为一个极度不可信任的,甚至成为一个令人讨厌的应用程序。

“哦,哇,这开始听起来令人费解。”你可能会这样想。一个设计良好的应用程序应该可以无缝地融入到用户的日常生活中,无论用户身处何处;只要合适,便应该搭载原生的苹果iOS用户接口;并且只要合适就加入特定内容或者商标的UI细节。可什么是合适的法宝啊?我们要如何专注于内容和用户界面,才足够把这件事情办成呢?

答案是,当然,根本就没有一个简单的公式。但好在,网站设计师已经在响应客户端和顾客需求方面有经验,并且运用协作的方法来进行娴熟的设计。要把这一宝贵的经验应用到iOS应用程序设计中,你需要熟悉原生的用户界面标准、细节和建议:定义你的项目需求(无论是你自己的项目或者是客户和雇主的);并确定用最好的方法为iOS设备设计。

本书将会继续这个模式,告诉你如何把你的设计经验和Web技巧应用在iOS应用程序的设计上,并且给你介绍一些技术,让你做好这些项目,而不需要自己编写Objective-C代码。

相关文章
|
1月前
|
开发框架 前端开发 Android开发
Flutter 与原生模块(Android 和 iOS)之间的通信机制,包括方法调用、事件传递等,分析了通信的必要性、主要方式、数据传递、性能优化及错误处理,并通过实际案例展示了其应用效果,展望了未来的发展趋势
本文深入探讨了 Flutter 与原生模块(Android 和 iOS)之间的通信机制,包括方法调用、事件传递等,分析了通信的必要性、主要方式、数据传递、性能优化及错误处理,并通过实际案例展示了其应用效果,展望了未来的发展趋势。这对于实现高效的跨平台移动应用开发具有重要指导意义。
160 4
|
9天前
|
JavaScript 前端开发
页面滚动触发css3动画js插件
delighters.js是一款页面滚动触发css3动画js插件。该js插件可以在页面向下滚动时,为进入浏览器视口的元素制作各种炫酷的CSS3动画效果。
37 13
|
18天前
纸屑飘落生日蛋糕场景js+css3动画特效
纸屑飘落生日蛋糕CSS3动画特效是一款js+css3制作的全屏纸屑飘落,生日蛋糕点亮庆祝动画特效。
35 3
|
18天前
|
Web App开发 移动开发 HTML5
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码。画面中心是悬浮于空的梅花鹿,其四周由白色线段组成了一个6边形将中心的梅花鹿包裹其中。四周漂浮的白雪随着多边形的转动而同步旋转。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
59 2
|
1月前
|
安全 Swift iOS开发
Swift 与 UIKit 在 iOS 应用界面开发中的关键技术和实践方法
本文深入探讨了 Swift 与 UIKit 在 iOS 应用界面开发中的关键技术和实践方法。Swift 以其简洁、高效和类型安全的特点,结合 UIKit 丰富的组件和功能,为开发者提供了强大的工具。文章从 Swift 的语法优势、类型安全、编程模型以及与 UIKit 的集成,到 UIKit 的主要组件和功能,再到构建界面的实践技巧和实际案例分析,全面介绍了如何利用这些技术创建高质量的用户界面。
33 2
|
1月前
|
前端开发 JavaScript
如何在 JavaScript 中访问和修改 CSS 变量?
【10月更文挑战第28天】通过以上方法,可以在JavaScript中灵活地访问和修改CSS变量,从而实现根据用户交互、页面状态等动态地改变页面样式,为网页添加更多的交互性和动态效果。在实际应用中,可以根据具体的需求和场景选择合适的方法来操作CSS变量。
|
1月前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
优化CSS和JavaScript加载
|
1月前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
Next.js和Nuxt.js在优化CSS和JavaScript加载方面提供了多种策略和工具。Next.js通过代码拆分、图片优化和特定的CSS/JavaScript优化措施提升性能;Nuxt.js则通过代码分割、懒加载、预渲染静态页面、Webpack配置和服务端缓存来实现优化。两者均能有效提高应用性能。
|
1月前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
141 1
|
1月前
|
JSON 前端开发 API
探索iOS开发之旅:打造你的第一个天气应用
【10月更文挑战第36天】在这篇文章中,我们将踏上一段激动人心的旅程,一起构建属于我们自己的iOS天气应用。通过这个实战项目,你将学习到如何从零开始搭建一个iOS应用,掌握基本的用户界面设计、网络请求处理以及数据解析等核心技能。无论你是编程新手还是希望扩展你的iOS开发技能,这个项目都将为你提供宝贵的实践经验。准备好了吗?让我们开始吧!