《iOS应用软件设计之道》—— 2.8 绘制界面草图

简介:

本节书摘来自华章出版社《iOS应用软件设计之道》一 书中的第2章,第2.8节,作者:(美)William Van Hecke ,更多章节内容可以访问云栖社区“华章计算机”公众号查看。

2.8 绘制界面草图

最直接的草图就是字面上的界面:你实际在画大致iPad或iPhone尺寸的矩形,并填充以屏幕控件的大致形式。这有助于你看到每个屏幕的大体关系。每张草图都要解答一个问题。一张草图要能回答下列问题中的某些,但可能不会马上解答所有问题:
多少内容可以恰当地放到你拥有的空间里。
应该用什么样的标准元素:顶部工具栏、底部工具栏、页签栏等。
你想构建什么样的定制控件。
控件如何分组。
画面角落和边缘应该布置哪些控件到主要位置。
你有多少空间可用。
但草图不能解答下面这类问题:
实际的颜色、纹理等风格。
精确的尺寸。
确切的标签文字及说明性文字。
画界面草图的目的在于对特定画面外观有个初步的感觉。某页签会不会有太多的按钮?(苹果的《iOS人机界面指导原则》限制iPhone页签栏最多为5个按钮。)是否忘了提供回到前一屏幕的方法?草图只需要精确到能回答你的问题即可。所有具体的绘图都会在线框图阶段实现。你的架构草图更像是要列尽每个屏幕的所有内容,而其他草图则省略大部分的屏幕内容,只是关注于某个特定方面。
现在来看SnackLog的一些界面草图。原始提纲里的条目第一次将形状作为设计。在需求提纲里,我们想要迅速并且只需要一只手就可以输入购买记录。现在我们清楚可以达到的程度:拍照界面叠加输入价格的透明键盘,如图2.2右图所示。这个构思是在想出若干想法之后达到的,之所以选择这个方案,是因为它最好地实现了该类应用软件的需求。这个做法当然比那种乏味的只有两个输入栏、一个按钮的想法更好地体现了软件的思路。它独具特色,又有着显示数字键盘的界面,让人有种亲切感,因为用户熟悉iPhone的锁屏画面和Phone应用软件。
screenshot

我们单独保存购买清单,是为了让输入过程尽可能地顺畅(参看其草图,图2.3)。为保持设计这种基于照片的性质,每次购买都以图片而不是标题的形式标识(除非用户手工输入了标题)。整体设计遵从大量iPhone应用软件的表格视图先例(例如Mail、Contacts、Music等)。这些先例都用垂直分组单元的形式来表现数据清单。这种表现形式很好,因为它令人熟悉,且容易实现。没有必要重复发明车轮,可以另辟蹊径来表达按日期顺序排列的一组条目集合。

2b742319601c1da8c1e2d39941c99165c97de252
相关文章
|
2月前
|
安全 Swift iOS开发
Swift 与 UIKit 在 iOS 应用界面开发中的关键技术和实践方法
本文深入探讨了 Swift 与 UIKit 在 iOS 应用界面开发中的关键技术和实践方法。Swift 以其简洁、高效和类型安全的特点,结合 UIKit 丰富的组件和功能,为开发者提供了强大的工具。文章从 Swift 的语法优势、类型安全、编程模型以及与 UIKit 的集成,到 UIKit 的主要组件和功能,再到构建界面的实践技巧和实际案例分析,全面介绍了如何利用这些技术创建高质量的用户界面。
34 2
|
5月前
|
Android开发 iOS开发 C#
Xamarin.Forms:从零开始的快速入门指南——打造你的首个跨平台移动应用,轻松学会用C#和XAML构建iOS与Android通用界面的每一个步骤
【8月更文挑战第31天】Xamarin.Forms 是一个强大的框架,让开发者通过单一共享代码库构建跨平台移动应用,支持 iOS、Android 和 Windows。使用 C# 和 XAML,它简化了多平台开发流程并保持一致的用户体验。本指南通过创建一个简单的 “HelloXamarin” 应用演示了 Xamarin.Forms 的基本功能和工作原理。
125 0
|
7月前
|
编解码 安全 Android开发
探索iOS与Android开发的差异:从界面到性能
【6月更文挑战第10天】在移动应用开发的广阔天地中,iOS和Android两大平台各占山头,它们在设计理念、用户体验、性能优化等方面展现出独特的魅力。本文将深入探讨这两大系统在开发过程中的主要差异,从用户界面设计到性能调优,揭示各自背后的技术逻辑与创新策略,为开发者提供全面的视角和实用的开发指南。
|
8月前
|
安全 Swift iOS开发
【Swift 开发专栏】Swift 与 UIKit:构建 iOS 应用界面
【4月更文挑战第30天】本文探讨了Swift和UIKit在构建iOS应用界面的关键技术和实践方法。Swift的简洁语法、类型安全和高效编程模型,加上与UIKit的紧密集成,使开发者能便捷地创建用户界面。UIKit提供视图、控制器、布局、动画和事件处理等功能,支持灵活的界面设计。实践中,遵循设计原则,合理组织视图层次,运用布局和动画,以及实现响应式设计,能提升界面质量和用户体验。文章通过登录、列表和详情界面的实际案例展示了Swift与UIKit的结合应用。
326 1
|
缓存 iOS开发
iOS小技能:解决TableVIew刷新数据带来的界面跳动问题
iOS小技能:解决TableVIew刷新数据带来的界面跳动问题
1756 0
iOS小技能:解决TableVIew刷新数据带来的界面跳动问题
|
iOS开发
iOS开发-聊天气泡的绘制和聊天消息列表
iOS开发-聊天气泡的绘制和聊天消息列表
262 0
iOS开发-聊天气泡的绘制和聊天消息列表
|
iOS开发
ios调用系统应用界面显示如何显示中文
在iOS里面,跳转到系统相簿界面,通讯录界面等后标题显示的英文,关键是手机已经设置显示中文了。
74 0
|
JavaScript API Android开发
Android,iOS打开手机QQ与指定用户聊天界面
Android,iOS打开手机QQ与指定用户聊天界面
247 0
|
Swift iOS开发 容器
iOS 仿支付宝银行卡界面(支持Swift/OC)
在有支付相关的APP中,都有对应的钱包,虽然现在的支付宝,微信支付很流行,但是都是需要绑定自己的银行卡,那么这个银行卡的卡包页面该怎么实现呢?在网上找了许久也没有找到合适的,那就索性自己造轮子。
394 0
|
JSON 搜索推荐 Serverless
iOS绘制物理按钮 - 透明圆角渐变边框
iOS绘制物理按钮 - 透明圆角渐变边框
410 0