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

简介:

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

1.4 法宝就是转变

所以这里有iOS设备另一个关键的不同点:我们的原生应用程序的内容传递形式,这是我们需要设计的重点。

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

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


1da549344d43d1ea47fac8fad19e95c4ca99c352

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

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

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

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

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

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

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

相关文章
|
21天前
|
搜索推荐 定位技术 UED
HTML定位技术:种类、特点与应用
HTML定位技术:种类、特点与应用
|
21天前
|
编解码 前端开发 UED
解密CSS单位:px、em、vh的区别与应用
解密CSS单位:px、em、vh的区别与应用
29 0
|
6天前
|
存储 JavaScript 数据可视化
vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化
vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化
28 1
|
2天前
|
缓存 移动开发 前端开发
【专栏:HTML与CSS前端技术趋势篇】HTML与CSS在PWA(Progressive Web Apps)中的应用
【4月更文挑战第30天】PWA(Progressive Web Apps)结合现代Web技术,提供接近原生应用的体验。HTML在PWA中构建页面结构和内容,响应式设计、语义化标签、Manifest文件和离线页面的创建都离不开HTML。CSS则用于定制主题样式、实现动画效果、响应式布局和管理字体图标。两者协同工作,保证PWA在不同设备和网络环境下的快速、可靠和一致性体验。随着前端技术进步,HTML与CSS在PWA中的应用将更广泛。
|
2天前
|
前端开发 JavaScript 搜索推荐
【专栏:HTML 与 CSS 前端技术趋势篇】HTML 与 CSS 在 Web 组件化中的应用
【4月更文挑战第30天】本文探讨了HTML和CSS在Web组件化中的应用及其在前端趋势中的重要性。组件化提高了代码复用、维护性和扩展性。HTML提供组件结构,语义化标签增进可读性,支持用户交互;CSS实现样式封装、布局控制和主题定制。案例展示了导航栏、卡片和模态框组件的创建。响应式设计、动态样式、CSS预处理器和Web组件标准等趋势影响HTML/CSS在组件化中的应用。面对兼容性、代码复杂度和性能优化挑战,需采取相应策略。未来,持续发掘HTML和CSS潜力,推动组件化开发创新,提升Web应用体验。
|
2天前
|
移动开发 前端开发 JavaScript
【专栏:HTML与CSS实战项目篇】使用HTML5与CSS3制作一个动态表单验证页面
【4月更文挑战第30天】本文介绍了使用HTML5和CSS3创建动态表单验证页面的方法。首先,简述HTML5用于构建网页内容,CSS3用于描述样式。接着,分四步展示实现过程:1) 设计包含输入框和提示信息的表单结构;2) 使用CSS3创建样式,增强视觉效果;3) 使用JavaScript监听输入事件,动态验证表单并显示错误信息;4) 测试和调试确保跨平台兼容性。通过学习,开发者能掌握创建带验证功能的表单,提升用户体验。
|
2天前
|
编解码 前端开发 UED
【专栏:HTML与CSS实践篇】HTML与CSS在电商网站中的应用
【4月更文挑战第30天】本文探讨了HTML和CSS在电商网站中的关键作用。HTML作为基础结构,定义网页内容和布局,用于页面布局、内容展示和表单处理;而CSS则负责样式设计和美化,包括响应式设计、交互效果和模块化,两者结合创建出功能齐全、视觉吸引力强的在线购物环境,提升用户体验。
|
10天前
|
移动开发 JavaScript HTML5
input | pattern | oninvalid | setCustomValidity | html5原生js表单校验
input | pattern | oninvalid | setCustomValidity | html5原生js表单校验
13 0
|
13天前
|
存储 监控 前端开发
局域网管理软件的前端设计与实现:HTML/CSS在网络拓扑展示中的应用
本文探讨了局域网管理软件的前端设计,强调了HTML/CSS在网络拓扑展示中的作用。通过HTML/CSS创建设备节点和绘制连线,实现清晰的网络设备连接展示。此外,利用JavaScript定时收集监控数据,并通过HTTP请求自动提交到网站,便于管理员进行数据分析,提升了局域网管理效率。
53 3
|
17天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
22 1