《触动人心——设计优秀的IPHONE应用》

一句话描述这本书:iPhone应用设计指南

这本书总共330多页,内容很干,这本书需要快速看,慢慢体会。以下是以书中章节为点进行的总结性摘录。很长,大家可以先选自己感兴趣的部分来看。

书籍章节概述

虽然是2011年出版,但对于一个交互设计新人而言,是很受用的。整本书介绍了iPhone应用在使用过程中的各个关系点,包括手势动作、操作热区、尺寸、控件、视觉、横屏、信息互通等。初入交互设计领域,这本书对于认识iOS交互设计规范很有帮助。以下按照书籍章节的顺序,重温内容,拿出来与君共勉。

第一章~第三章     移动应用手指操作与屏幕尺寸

第一章总概括说明了我们使用手机想要的与感知到的iPhone应用的状况。我们在使用一款应用仅仅依靠我们的手指,应用的表达应该是简单易用的。

第二章iPhone应用在产生之前应该有几点是明确的,为什么要做手机版?应用的主要功能、次要功能是什么,用户的使用心态是怎样的,明白应用设计的五要素人物、事件、时间、地点、起因。注意应用的功能要有主次,并且不是任何功能都要放在应用里的。明白用户在移动时使用你的应用的三种心态:想完成微任务、了解周遭发生的事、打发无聊的时间。

【现在手机基本与电脑相当,人们使用手机不仅仅是在移动状态下使用,但是我们要明白自己的应用是在什么场景下使用的】

第三章讲述了手指触摸屏幕决定了屏幕上内容的尺寸。大拇指在屏幕上操作的有效区域决定了我们要把不常用的按钮或者防误触的按钮放在拇指常点击区域外。在触屏设备中,每个按钮和控件都要契合。标准iPhone控件中,竖屏时,虚拟键盘的按钮、标准列表的列表项、屏幕顶部的导航栏等等,高度都是44像素。44像素被推荐为是一个点击目标可点且易点的最小值。所有点击目标的最小尺寸是44*30像素。底部标签栏的标签数量限制是5个。要注意如果要在工具栏或者工具栏旁边放置点击目标的话,要保证目标够大,这样才能防止误触。书中举了计算器设计的变更历史。优秀的iPhone应用采用了如下的点击指南:重要信息放顶部,重要操作放底部(这样你的操作不会干扰你的视线);尽量让一屏显示完,避免滚动条(减少用户脑力与体力的消耗);尽量减少屏幕上的元素(减少用户的操作与理解负担);把高级工具盒操作隐藏,减少边框界面(为主流用户设计),触发点要有清楚的标识,可以放在正关注内容的旁边。

第四章、第五章     组织布局与标准控件

第四章讲确定好了应用的功能,首先要做的第一件事确定整体的组织布局与页面框架。首先是大局层面上的布局设计。明白组成应用的多张页面之间是如何串联的,这是设计者最基本的决策之一。苹果的导航模型有三种,分别是平铺页面、标签栏、树形结构。平铺结构类似于连续的N张启动页,在页面下方有几个小圆点做导航指示;标签栏就是tab bars,是切换选择操作的理想方案;树形结构就是类似于手风琴排列,可各个点击查看详情的导航形式。树形结构导航的排列方式也可以更换为宫格式的排布方式,典型的例子比如苹果应用“照片”中“相簿”内容的呈现方式。

这个应用中各个页面的组织结果应该是让用户能预料到应用中的导航路径,最理想的情况下,这个路径可能是唯一的。尽量保证每一个页面只有一个途径进入,每个页面中应该只做一件事情,完成一项任务或查看一种内容元素。在纸上画出应用的故事板,帮助确认是否选择了合适的导航模型,导航模型是否适于你所在站点的所有页面。组织好页面和任务优先级,了解每个页面上大概有什么操作,页面上的工具和内容的大致比例。

第五章讲页面框架设计中需要用到的标准控件。标准控件的首要好处就是司空见惯,用户不需要再学习新的知识就能认识并使用页面上控件之下承载的功能。相似性与一致性会增加设计的可靠性。

导航栏:常见的一般是左侧是一个后退按钮,中间是页面标题,右侧区域为空白。页面标题是在提示用户,告诉他们在应用中的位置,帮助用户保持方向感。尽量别在应用的首屏把LOGO放在中间,用户启动你应用的时候,他们知道你是谁。右侧区域任凭喜好添加按钮或控件,可以是文字按钮、自定义图标或是其他。右上角是拇指操作的偏僻区域,在这个区域里,可以放上不常用但是有需求的控件,或者是怕用户误点击的控件。导航栏还有其他的形式:添加提示文字,点击隐藏导航栏。尽量保持导航栏干净。对于工具性的控件则有另外一个地方可以放置——工具栏。

工具栏:页面上的工具箱,用来编辑、操作、分享内容,只针对当前页面上的内容,提供管理内容的命令。在工具栏中能用的图标在导航栏中也能用。

搜索栏:特殊的文本输入框外加一个玻璃放大镜图标;旁边还有一个清楚文本的“取消”按钮;还可以有可选的书签按钮,用来显示用户保存过内容或搜索结果。点击搜索栏,键盘会自动滑入视图中。可以在搜索栏内添加提示文字。搜索结果的展示最标准的方式是列表,或者表格视图展示。

表格视图:只有一列,有多行。表格视图常见的功能有作为树状应用分类和内容的导航;显示一张可选项的列表;快速浏览、索引一张长列表;罗列、分组内容详情。其中的标准图标有三种,渐进指示器、详情渐进按钮、勾形标记(或者使用开关控件)。表格视图还也会把文字输入框放到单元格中。有时候还会在左侧放上图片或者图标。图标的目的是辅助用户辨识,图片的目的是为了让用户更易于扫描列表项。标准单元格高度也是固定的44px。

表格视图中专门介绍两种表格视图表现时的辅助形式:索引列表和分组列表。索引列表展示分类多、内容冗长的列表非常理想。一般是给两屏以上的列表添加索引。典型的是通讯录按照字母顺序索引,可以按照你的想法使用任何标题。分组列表是与屏幕边缘相离,并用圆角边框包裹;用来展示设置项、功能菜单和不同组别的内容,它不适合冗长的内容。每个分组列表可以添加标题或页头,也可以添加页脚。页脚直接显示在组下方。

编辑工具:标准配置中,删除一个列表项目需要三步,点击“编辑”-选择控件(多选状态下有复选框)-点击“删除”。表格视图还有一种方式是左滑删除法,即左滑就能显示“删除”按钮。【防御设计】

四种文本容器:标签、文本视图、网页视图、文字输入框。

编辑文本:文本视图可编辑,比如备忘录等,可进行多行编辑。

修订勘误:iPhone自带自动纠错功能;还有自动首字母大写功能。

文本输入框:文本输入框则只能输入单行文本。标准文本输入框可以添加图片、按钮或者在输入框左边/右边可以添加文字。取消按钮用于清除输入框内的文字,当输入框内没有内容时,“取消”按钮就不会出现,输入文字后,取消按钮就会出现。一般输入文本之前,输入框里会有灰色不显眼的占位文本。常见的文本输入框有两种方式,一是在本页就地编辑所有文字,另一种是显示所有值,然后每项值都新开一张页面,分别编辑。

键盘:iOS中有8中键盘,分别是默认键盘、数字和标点符号、URL、邮箱地址、数字键盘、电话拨号键盘、姓名电话键盘。除了选择合适的键盘布局外,我们可以为每个输入框弹出的键盘自定义return按键标签,有几个标准的按键标签是搜索、完成、返回、发送……

多选控件:拨选器、列表、动作选单。拨选器能同时进行多维度的选择,可选项应该有明显的顺序,按字母排序或按大小排序。列表可以在每个可选项上做标记,进行多选操作。动作选单是从屏幕底部弹上来的,并列出相关命令。动作选单上的按钮可以显示用来编辑、操作、分享当前页面内容的现象。动作选单的最下方还有一个取消按钮,这个位置比其他按钮更容易点击,并能保持出现在相同位置。具有破坏性的操作也应特殊对待(一般是删除按钮),用有警示意义的红色按钮,并放在表单的最上面,使其显眼,远离拇指热区,减少误点。最好动作选单里面的按钮数限制在5个以内,包括“取消”按钮。

按钮:按钮最基本的样式是圆角矩形按钮,其应该包含正常状态、按压状态、点击后状态、禁用状态。

开关:两个设置项,开与关。

分段控件radio buttons:可以提供多个选项选择。分段控件是有用的二级导航。一般有两个尺寸:一个放在工具栏和标签栏内,是30px;另一个放在界面上,是44px。

滑动条:方便在最大值和最小值之间调解,也可用来在长文档中导航,快速浏览。一般如音量控制,放大镜放大倍数控制。

设置页面:苹果的建议是把所有的设置都从你的应用里面挖出来,然后统一放到内置的“设置”应用中。一般有三类设置:内容设置,账户设置,隐私设置。

第六章     视觉风格建立

第六章讨论了怎样树立视觉风格。章节中主要为围绕当时的拟物化风格做了说明,所以具体的设计中讨论了质感、灯光等角度的注意事项,在此不做赘述。确定自己应用的视觉风格,首先要确定自己的个性基调,并在页面视觉设计、图标设计中运用。使用隐喻手法并注意用好标准控件。

第七章~第十章        不易察觉的页面、手势、横屏、信息互换

第七章围绕第一印象很重要,说明icon、启动页、退出后重启、首页设计中注意的一些事项。应用的图标是应用的名片,在此,作者讨论了icon设计要不同。应用的名字,好记的名字是口口相传的关键。应用打开时候的落地页设计,主要是缓解用户感觉启动缓慢的问题。然后是用户时常会退出应用后会再打开,这个时候一般是接着用户的上次操作继续进行。当应用重启时,要尽量让用户感觉你是在恢复暂停。当用户初次来到你应用的首页时,要让用户知道你的应用怎样使用,从哪里开始。首页设计的几个通用原则:不说工程师说的话,考虑设计成主面板,多做“速览测试”。

第八章介绍了手势的发现及使用。手势来源于经验,最基本的点击就像是鼠标点击一样。应用使用手势发现中,可以去观察大家是怎样使用你的应用的,再观察其相应的手势,包括尝试后没有成功的手势,还有周而复始耗时的操作。如果使用了新手势,那也要为这个新手势所实现的功能提供备选方案。可以去扩充手势,帮助用户发现自定义手势。可以在手势操作上增加难度,或者使用点击组合,以防止意外误点击的发生。给每一次的点击和操作提供视觉反馈,或者加上一点声效。

第九章主要介绍了从竖屏到横屏转换的注意事项以及横屏设计中尺寸的问题。横屏更容易创造沉浸式体验。大家转到横屏的原因,一般是容易阅读和容易打字。首先要考虑的点是你的应用值不值得做成横屏。接着,横屏时候页面内容应当如何做恰当的变化。一般视频、游戏有必要设置横屏。在编程横屏时,导航栏与工具栏的高度会变成32px,其图标大小应该是20*20。注意从竖屏转成横屏时候的动画效果以及转换后页面内容的位置要让用户能找到。要做就把所有页面都做有横屏。

第十章主要介绍了警示、打断与更新时候告知用户的形式,如警告、消息推送、主屏幕标记、等待时候等,要注意其中的礼貌性问题。 警告使用的场景:应用不能进行下去时,或出现问题时,通过在警告框中添加按钮提供其他方案;或者需要用户授权时。在页面上给用户提供反馈的入口。消息推送要计划好什么时候该推送什么通知,什么时候不该发出。推送的消息,要提供详细的内容控制,确保有安静的时候,推送声音可选。主屏幕标记下的内容应该不妨碍用户的正常使用。短时间等待使用菊花转,它可以在状态栏上,可以在页面上,长时间等待时需要使用进度条或者其他分散注意力的方式,比如娱乐项目、预载内容等。

第十一章讲了应用与应用之间的信息互通与切换的策略。一般,iPhone自带的应用通讯录、照片和日历是共享的,其他应用有权限读取、添加、编辑。把控制权叫个其他应用,就像是登录时,我们会用第三方账号进行登录。我们的应用是用户手中工具的一部分。我们可以在网页视图、地图视图、邮件撰写视图中包含有其他应用中的链接或者什么。注意不要过多地在应用中来回切换,不要在任务进行到一半的时候让用户去其他应用。

整本书就是这样子,用了很多辅助案例说明不同场景、控件的使用战略。在读完整本书后,我去看了看iOS官方的规范说明,全英文,所以粗览了一下。我对于标准控件及其使用的认识拓宽了很多,对空间的认识是一名交互设计师最基本的知识了吧。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,383评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,522评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,852评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,621评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,741评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,929评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,076评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,803评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,265评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,582评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,716评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,395评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,039评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,027评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,488评论 2 361
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,612评论 2 350

推荐阅读更多精彩内容