IOS10人机交互指南之《Tab Bars、Web View、Maps》

标签栏(Tab Bars)

a:标签栏一般由背景(背景可以是半透明的,也可以具有背景色调)、标签栏图标、标签栏文字组成。标签栏在同一设备上的所有屏幕方向上的高度都一样(例子:iPhone6标签栏的高度为98px,屏幕旋转90度后,高度还是98px)。在手机上标签栏的标签的个数一般在3-5个,在大屏(如ipad)上个数可以更多。
b: 标签栏会显示在屏幕的底部,主要是用于快速的切换应用的不同部分(用于导航,不能用于删除、添加等操作)。标签栏上各个标签在信息层级上属于同一层级。标签栏有在正常情况下有选中和位选中这两种状态。设计时需注意事项:
a:在标签栏功能不可用时,不要删除或者禁用选项卡。如果标签在某些情况下可用,但在其他情况下不可用,就会让应用程序的界面变得不稳定和不可预测。确保始终启用所有标签,并解释标签的内容无法使用的原因。例如,如果iOS设备上没有歌曲,音乐应用程序中的“我的音乐”标签会解释如何下载歌曲。
在这里有一个空状态的概念,或者叫零数据状态。例如上文的音乐的例子。就是一个空状态。还有一种状态就是错误状态,比如点开一个标签,由于系统或者是用户产生错误,这时我们就需要清楚的说出错误产生的缘由或者是说明解决问题的步骤来引导用户。
b:严格使用标签栏进行导航。标签栏的作用只是用于导航,不应该用于执行操作(注:这里有必要区分一下标签栏和工具栏:因为两种类型的栏都会显示在应用屏幕的底部。标签栏可让用户在应用程序的不同部分之间快速切换,例如“时钟”应用程序中的“报警”,“秒表”和“计时器”选项卡。工具栏包含用于执行与当前上下文相关的动作的按钮,诸如创建项目,删除项目,添加注释或拍摄照片)。
c:避免使用太多标签。受屏幕大小限制的原因,在手机端一般是显示3-5个标签。标签过多,容易引起误触。
d:始终在连接的视图中切换上下文。选择一个标签应该始终影响到直接附加到标签栏的视图(我的理解:如图2所示我点击照片影响的只是照片视图,而不是回忆视图)
e:可以使用标记来沟通。使用小红点、数字、或者感叹号来提醒,以指示新信息与该视图相关联。
 
WEB视图(Web View)
网络视图会直接在您的应用程序中加载并显示丰富的网络内容,例如嵌入式HTML和网站。例如,邮件使用Web视图在邮件中显示HTML内容。
适当时启用前进和后退导航。Web视图支持前进和后退导航,但默认情况下禁用此行为。如果用户使用您的网络视图访问多个网页,请启用前进和后退导航,并提供相应的控件以启动这些功能。
避免使用Web视图构建Web浏览器。使用网络视图让人们简单地访问网站而不离开您的应用程序的上下文是很好的,但Safari是人们在iOS上浏览网络的主要方式。尝试在您的应用程序中复制Safari的功能是不必要的和不鼓励的。
 
Maps
地图视图可让您在应用内显示地理数据,并支持内置Google地图应用提供的大部分功能。地图视图可以配置为显示标准地图,卫星图像或两者。它可以包括引脚和覆盖,并支持缩放和平移。如果您的应用支持路由(例如在运行跟踪应用中),则可以使用地图视图来显示路线。
一般来说,保持地图互动。人们习惯于使用手势与Google地图应用互动,并希望能够以类似的方式与您的地图进行互动。
使用预期的针脚颜色。引脚标识地图上的兴趣点。用户在地图应用中熟悉标准图钉颜色。避免在应用程序中重新定义这些颜色的含义。对目标使用红色,对起始位置使用绿色,对用户指定的位置使用紫色。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

返回主页看更多
狠狠的抽打博主 支付宝 扫一扫