快捷搜索:
当前位置: www.bf66.com > 互联网 > 正文

设计优秀的IPHONE应用,了解手中的设备

时间:2019-06-18 20:37来源:互联网
不知道在 iOS原生的通讯录中,你会不会遇到没有合适联系人的标签的情况呢?你是否想给联系人自定义标签呢?在iOS 7 中,给联系人添加自定义标签其实非常简单。 一句话描述这本书

不知道在 iOS 原生的通讯录中,你会不会遇到没有合适联系人的标签的情况呢?你是否想给联系人自定义标签呢?在 iOS 7 中,给联系人添加自定义标签其实非常简单。

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

前不久小编推荐了一款安卓上非常炫酷的「通讯录」Drupe,可以在手机任意界面快速唤出联系人列表,并且快速实现通讯、短信、邮件等动作,无需在多个应用间频繁退出、切换。今天要给大家介绍一款同样简化了这些动作,拥有同样便捷性,且横跨 iOS 和 Android 双系统的插件「通讯录」- Veer。

不知道在 iOS 原生的通讯录中,你会不会遇到没有合适联系人的标签的情况呢?你是否想给联系人自定义标签呢?在 iOS 7 中,给联系人添加自定义标签其实非常简单,具体如下图:

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

「Veer Contacts Widget 」for Android
Veer 在安卓系统上是一款能够快速唤出常用联系人列表的插件应用,可以安置在屏幕两侧的任意位置,长按插件图标并拖动即可。在「side handle」中可以设置是否可视,或者关闭插件,在「home screen icon」中选择是否使用桌面图标启动插件。

互联网 1

互联网 2

Screenshot_20160129-093453

打开通讯录应用,点击右上角的“+”,点击“添加电话”一栏,输入联系人电话

书籍章节概述

「left-handed layouts」为左手布局模式,用户可免费添加 5 个联系人和 5 个动作,可以从电话、短信、Whatsapp、Email、Navigate 和浏览器共 7 个动作中免费添加 5 个,要添加微信、Hangouts、Viber 和 Skype 等 14 个动作,或者添加更多常用联系人,需要内购。

互联网 3

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

Screenshot_20160129-173105

点击电话号码前的“住宅”栏,进入“标签”页面

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

在添加的常用联系人中,可以长按向右滑动删除联系人,或者点击联系人头像前的 6 个点图标并上下拖动调整联系人顺序。另外,可以在联系人详情中添加相关动作的关联信息,还可以自定义联系人头像,使用通讯录照片,或者选择头像背景色,插件中选择一个联系人之后,整个插件的色彩会和联系人头像背景色统一,呈渐变效果。在动作详情中,可以为每个动作设置优先选项。

互联网 4

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

Screenshot_20160129-173739

互联网 5

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

「Veer Launcher」 for iOS
Veer 在 iOS平台上是作为通知小部件存在的,虽不能从屏幕边缘用手势唤出,但由于是出现在下拉通知栏中,也相当于实现了在任意界面唤出的目的。而且步骤非常简单,在通知中心小部件中点击联系人头像,选择动作,即可实现目的。iOS 版的 Veer 非常简洁,相比Android版而言,iOS版的动作中没有微信的选项,但同样可以免费添加 5 个联系人和 4 个动作,可以从电话、iMessage、Email、Whatsapp、Maps、FaceTime(Video)call 和 Safari 共 8 个动作中免费添加 4 个,如果需要添加Facebook Messenger、Skype 和 Twitter等其它 10 个动作,需要内购。

点击页面底部的“添加自定义标签”栏,输入你的自定义标签名称

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

互联网,screen322x5702

互联网 6

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

另外,在设置中心还有更多关于小部件的自定义选项。「Fast action」,用户可以设置一个固定快捷动作,这样的话点击联系人头像就能直接实现固定动作,不用再作选择。 「Enable animations」,用户可以关闭通知中心小部件中点击联系人头像,切换至动作选择目录时的动态效果。「Show contact images」,用户可以选择是否显示出联系人头像。另外还有轻模式和现实无效电话的选项,轻模式可以让小部件更快速,但会关闭某些次要的特色功能,不怎么必要,因为应用本身就已经够「轻」了。

点击右上角“完成”,你就可以看到联系电话前的标签更改成自己定义的标签了

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

mmexport14540853641406

在 Mac 中,用户同样也可以在通讯录应用中,给联系人添加自定义的标签,方便用户辨认。

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

总的来说,Veer 根据 iOS 和 Android 系统的不同特征,分别设计了同样简洁适用的插件应用,的确为日常操作提供了便利性,只要同步那些社交工具的资料到通讯录,就能快捷使用。但它毕竟是国外的,本土化做得并不好,除了 Android 系统有微信接口外,其它的国内社交应用都没有,也只能期待将来得到改善或者有更优秀的跨平台作品出现。

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

应用信息:适用于 iPhone & iPad 设备 iOS 8.0 及更高系统版本,大小为 9.4 MB;适用于安卓设备 Android 4.0 及 以上系统版本,大小为 3.7 MB

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

本文由爱屁屁原创,撰稿作者:Cher
获取下载地址:传送门→
爱屁屁,取自 APP(application)谐音,专注于移动 APPS(应用/游戏)个性化评测,旨在令您生活的每一天与怦然心动的高品质应用相遇。更多新鲜应用推荐可移步官网:http://www.appnz.com/ 关注微信公众号:爱屁屁(ID:AppKeji)不定时发放兑换码等福利!

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

Paste_Image.png

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

第六章     视觉风格建立

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

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

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

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

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

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

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

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

编辑:互联网 本文来源:设计优秀的IPHONE应用,了解手中的设备

关键词: www.bf66.com