设为首页 加入收藏

TOP

非官方的iOS设计指南 (二)
2014-11-23 22:08:04 来源: 作者: 【 】 浏览:15
Tags:非官方 iOS 设计 指南
索栏默认有两种风格:突出的和最小化的。两种类型的搜索栏在功能上是一样的。


1.只要用户没有输入文本,搜索栏中会展示占位符文本,而书签icon则可用来访问最近或者保存的搜索。


2.键入搜索项目后,占位符消失,一个清晰的删除按钮会出现在搜索栏的右侧。


搜索栏可以利用一个提示--一个短句来介绍搜索的上下文环境。比如"键入某个城市、邮政编码或者机场"


66.jpg


不使用提示和使用提示两种风格


67.jpg


最小化搜索栏类型


想要提供对检索词条的更多控制,可用scope bar(范围栏)限制搜索栏,scope bar会使用和搜索栏一样的风格,当搜索结果有清晰的定义类别时,这种方法比较有用。比如,在一款音乐类app中,搜索结果可以按照专辑和歌曲再次过滤。


标签栏


用户可使用标签栏在app的单个视图间快速导航,并且标签栏也只能用于这个目的。标签栏通常出现在屏幕的底部。默认情况下,标签栏是略透明的,并且向导航栏一样使用系统的模糊效果。


68.jpg


标签栏包含固定的最大数量的tabs,一旦标签数量超过其可容纳的最大数量,后边的标签将会展示在隐藏的"More-tab"列表中,并且有一个选项可重排标签顺序。


虽然iPhone上最多可展示5个标签,但是在iPad上最多可展示7个标签。


为了提醒用户视图上的新信息,有时候需要在标签栏按钮上使用标记数量。如果一个视图被临时禁用,那么相关的标签按钮不应当完全被隐藏,相反应当淡出视觉范围以表示其禁用状态。


表视图(Table View)


表视图以单列或者多列形式展示少数或者多个列表风格的信息,并有能将内容分组的选项。根据你展示的数据类型,通常可使用两种基本的表视图风格:


无格式的


69.jpg


无格式表视图包含的几行内容的顶部可以有页眉,最后一行后边可以有页脚。可以在屏幕右边缘展示垂直导航,以便在表中进行导航,这种情况适合展示以某种方式储存的大数据集的时候,比如按照字母降序排列。


分组样式


70.jpg


分组表视图允许用户对内容进行分组。每个分组可以有页眉(最佳用法是描述类组的上下文环境)和页脚(适用于帮助文本等)。一个分组的表视图至少需要包含一个类组,并且每个类组至少要包含一行内容。


对于以上两种表视图类型,可用几种风格来展示数据,以方便用户快速扫描、阅读和适当调整内容。


默认


71.jpg


默认的表视图有一个居左对齐的可选图片和标题。


带有副标题


72.jpg


在每行标题下展示小字号的副标题,适用于进一步的解释说明或者简短描述。


带有数值


带数值表类型可展示与行标题相关的特定数值。类似默认的类型,每行都有一个居左对齐的图片和标题。在该类型中,数值居右对齐,通常使用比标题淡一点的文本颜色。


73.jpg


模态视图、弹出视图以及提醒(警示)视图


iOS提供了多种风格的临时视图,可以某种方式在既定的情况下展示、编辑或者操作数据。虽然每种临时视图因某个非常特定的目的而存在,但外观上却大有不同,不过所有临时视图都有一个相同的地方:在展示时,它就是当前视图上最上方的图层,下方的内容被一个黑色的背景所覆盖。


活动视图(ACTIVITY VIEW)


活动视图用以展示特定的任务。这些任务可以是系统默认的任务,比如通过可用选项分享内容,或者是完全自定义的活动。当为自定义任务按钮设计icon时,你应当遵从活跃状态和栏按钮icon的一些设计指南--纯色填充、无任何效果、以及在一个透明背景上。


QQ截图20141117143200.jpg


活动(ACTIONS)


活动页面用来执行可用操作列表中的单项操作,并且强迫用户确认或者取消某个活动。


QQ截图20141117143238.jpg


在竖屏模式下(以及尺寸比较小的横屏模式下),actions以按钮列表形式滑入,并呆在屏幕的底部。这种情况下,活动列表应该有一个取消按钮来关闭视图和执行任何列表中的action。


当有足够可用的空间时(比如iPad上),活动列表可在视觉上转为弹出视图。不过此时不一定非得有一个关闭按钮,用户点击弹出视图外的任何地方都能关闭弹出视图。


提醒视图


提醒视图的目的是用来通知用户一些关键性的信息,并有选择地迫使用户做出选择。


提醒视图通常包含一个标题文本(最好不要超过一行)、一个(纯信息提醒,比如"OK")或者两个按钮(要求用户做出决定,比如"Send"或"Cancel")。


QQ截图20141117143313.jpg


你可以在提醒视图中添加消息文本,如果需要的话则可添加两个文本域,其中之一可以是蒙版的输入区,适合密码或者PINs之类的敏感信息。


编辑菜单(EDIT MENU)


用户可使用编辑菜单执行复制、粘贴以及剪切等操作。虽然你能控制用户可以选择哪个操作,但是编辑菜单的视觉外观是设定好的,不能重新配置,除非你设计一个完全自定义的编辑菜单。


74.jpg


弹出视图(Popovers)


当某项特定操作要求多个用户输入才能继续进行时弹出视图就非常有用了。在水平方向上,弹出视图可通过箭头指向展示下方相关的控件(比如按钮)。弹出控件的背景透明度稍有降低,可展示其下方的模糊内容,像iOS 7以后其他很多UI元素一样。


QQ截图20141117143433.jpg


弹出视图是一种非常强大的临时视图,可包含类似导航栏、表视图、地图或者web视图等对象。随着弹出视图所包含内容和元素的增加,其窗口也能滚动展示。


模态视图


模态视图适用于需要多个命令和用户输入的情况,位于屏幕上所有内容的最上方。典型的模态视图通常提供:


1.描述任务的标题。


2.关闭模特视图的按钮,没有保存或执行任何其他操作。


3.保存或者提交任何已输入内容的按钮。


4.模态窗口主体中提供大量用户可输入的元素。


有三种可用的模态视图类型:


1.全屏模式:覆盖整个屏幕


2.页表模式:竖屏模式下,模态视图覆盖屏幕上的部分内容,仅在半透明的暗色背景上展示部分父视图的内容。横屏模式下,模态视图会像全屏模态视图那样展示。


3.表格页面模式:竖屏模式下,模态视图出现在屏幕的中间。模态视图范围之外,父视图内容展示在半透明背景之下。当需要展示键盘时,模态视图的位置会自动调整。横屏模式下类似全屏模态视图。


控件(Controls)


iOS为基本上任何类型的输入需求提供了各种各样的控件。以下列出的是最常用的控件,但想要看详细的完整的可用控件列表,请在 iOS Developer Library 中查看。


按钮


最常用的控件可能是按钮。iOS 7以来,默认的按钮设计看起来更像一个纯文本链接。按钮控件支持高度自定义。按钮可以有几种不同的状态,可以使用视觉语言传达:默认、突出、选择以及禁用等。


选择器(PICKERS)


选择器用来在一个可用值列表中选择某个值,和Web上的下拉选框功能类似。选择器的扩展版本是日期选择器,允许用户滚动日期和时间列表来选择一个月、日以及具体时间。


ios-picker.jpg


左:表视图中的日期选择器,右:选择器作为键盘


除了背景色外,不可能更改其视觉风格或者尺寸。很多时候,选择器位于屏幕的底部,像键盘一样展示,但不能用在其他地方。


分段控件(SEGMENT CONTROLS)


分段控件包含一组至少两个以上的分段,可用来过滤内容或者为清晰分类的内容创建标签。


75.jpg


不带icon与带icon的分段控件


每个分段可包含一个文本标签或者一个图片(icon),但不能同时包含两者。另外,不建议在一个分段控件中混合使用不同的分段风格,比如文本和图片。每个分段的宽度会基于分段的数量自动调整(两个分段各占50%,5个分段各占20%)。


滑杆(SLIDERS)


滑杆控件允许用户从允许值范围中选择一个特定的值。由于使用滑杆选择一个值的操作非常流畅,并且无需额外的步骤,所以建议在选择预估值的时候使用滑杆,而不是选择精确的值。比如滑杆可以很好地用来设置音量,用户可以听到和看到音量

首页 上一页 1 2 3 下一页 尾页 2/3/3
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
分享到: 
上一篇 联发科入股金士顿,持股6.74% 下一篇 支付宝宣布成立澳大利亚子公司A..

评论

帐  号: 密码: (新用户注册)
验 证 码:
表  情:
内  容: