本节书摘来自华章出版社《iOS应用软件设计之道》一 书中的第2章,第2.8节,作者:(美)William Van Hecke ,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
2.8 绘制界面草图
最直接的草图就是字面上的界面:你实际在画大致iPad或iPhone尺寸的矩形,并填充以屏幕控件的大致形式。这有助于你看到每个屏幕的大体关系。每张草图都要解答一个问题。一张草图要能回答下列问题中的某些,但可能不会马上解答所有问题:
多少内容可以恰当地放到你拥有的空间里。
应该用什么样的标准元素:顶部工具栏、底部工具栏、页签栏等。
你想构建什么样的定制控件。
控件如何分组。
画面角落和边缘应该布置哪些控件到主要位置。
你有多少空间可用。
但草图不能解答下面这类问题:
实际的颜色、纹理等风格。
精确的尺寸。
确切的标签文字及说明性文字。
画界面草图的目的在于对特定画面外观有个初步的感觉。某页签会不会有太多的按钮?(苹果的《iOS人机界面指导原则》限制iPhone页签栏最多为5个按钮。)是否忘了提供回到前一屏幕的方法?草图只需要精确到能回答你的问题即可。所有具体的绘图都会在线框图阶段实现。你的架构草图更像是要列尽每个屏幕的所有内容,而其他草图则省略大部分的屏幕内容,只是关注于某个特定方面。
现在来看SnackLog的一些界面草图。原始提纲里的条目第一次将形状作为设计。在需求提纲里,我们想要迅速并且只需要一只手就可以输入购买记录。现在我们清楚可以达到的程度:拍照界面叠加输入价格的透明键盘,如图2.2右图所示。这个构思是在想出若干想法之后达到的,之所以选择这个方案,是因为它最好地实现了该类应用软件的需求。这个做法当然比那种乏味的只有两个输入栏、一个按钮的想法更好地体现了软件的思路。它独具特色,又有着显示数字键盘的界面,让人有种亲切感,因为用户熟悉iPhone的锁屏画面和Phone应用软件。
我们单独保存购买清单,是为了让输入过程尽可能地顺畅(参看其草图,图2.3)。为保持设计这种基于照片的性质,每次购买都以图片而不是标题的形式标识(除非用户手工输入了标题)。整体设计遵从大量iPhone应用软件的表格视图先例(例如Mail、Contacts、Music等)。这些先例都用垂直分组单元的形式来表现数据清单。这种表现形式很好,因为它令人熟悉,且容易实现。没有必要重复发明车轮,可以另辟蹊径来表达按日期顺序排列的一组条目集合。
![2b742319601c1da8c1e2d39941c99165c97de252](https://i-blog.csdnimg.cn/blog_migrate/5241a126c170549a7d393af9ba2706b5.png)