所有分类
  • 所有分类
  • 未分类

从设计指南说起,详解iOS系统组件分类体系(上)

对于大部分入门设计师及中级设计师来说,脑海里没有一套属于自己的组件分类体系。一说组件,脑子里面只会蹦出弹窗、toast、操作列表等。难以形成自我知识体系,可能是只有用到才会想到某个组件。这样的话对于系统的学习视觉设计、交互设计或产品设计是不利的。

组件基于Material Design和iOS 设计指南。关于组件的中文翻译名字可能会有很多种,并没有一个权威准确的中文命名。但是设计师知道某个组件名是什么样子的就已经够了。

由于iOS 和 Material Design的组件体系有些不一样,所以关于组件的分类体系我会分iOS篇和Android篇来讲解,本篇文章为iOS 篇。

iOS 或 Material Design的设计指南,都是按照组件的属性来系统介绍。其实从设计者的使用场景来说,都是设计者设计产品时,根据具体的功能来调用组件。所以从功能来划分是更容易理解和记忆的。故组件分类可以按照两种维度来划分。一种是组件的属性来分(本篇文章是基于属性分类),另一种是控件组件的功能类别。

按照组件本身属性分类的思维导图:

从设计指南说起,详解iOS系统组件分类体系(上)

1.UI-bars (UI栏)

导航栏(navigation bar)

导航栏能够实现在应用不同信息层级结构间的导航,有时候也可用于管理当前屏幕内容。

从设计指南说起,详解iOS系统组件分类体系(上)

如图是系统导航的基础形式,其中Back为上一级的标题,Title为当前视图的标题,Edit代表操作控件。

iOS10规范中提及:一般来说,导航栏上应该不多于以下三种元素:当前视图的标题、返回按钮和一个针对当前的操作控件。

搜索栏(search bar)

搜索栏获取用户输入的文本,用以作为搜索的关键字(下图中显示的文本为占位符,非用户输入文本)。

从设计指南说起,详解iOS系统组件分类体系(上)

搜索栏可以包含以下元素:

从设计指南说起,详解iOS系统组件分类体系(上)

  • 占位符文本(Placeholder text)。占位符文本通常会写明控件的功能(比如上图里的 “Search”字样),或者提示用户输入的文本将在哪里搜索(如“Google”)。

  • 清除按钮(The Clear button)。大多数搜索栏都会提供清除按钮,方便用户一键清空输入内容。

状态栏(tatus bar)

状态栏展示了关于设备及其周围环境的重要信息

从设计指南说起,详解iOS系统组件分类体系(上)

状态栏包含以下特征:

  • 是透明的

  • 始终固定在整个屏幕的上边缘

标签栏(tab bar)

标签栏让用户在不同的子任务、视图和模式中进行切换。

从设计指南说起,详解iOS系统组件分类体系(上)

标签栏位于屏幕底部,并应该保证在应用内任何位置都可用。展示图标和文字内容,每一项均保持等宽。当用户选中某个标签时,该标签呈现适当的高亮状态。

标签栏可以包含以下特性:

  • 始终出现在屏幕的底部

  • 一个标签栏一次最多可承载5个标签(多于5个标签的时候,可以展示前4个标签和一个“更多”,并将其他的标签以列表形式收纳到“更多”里面)

  • 在横屏与竖屏情况下,高度均保持一致

一般而言,使用标签栏来组织整个应用层面的信息结构。标签栏非常适合用于应用的主界面中,因为它可以很好地扁平信息层级,并且同时提供多个触达同级信息类目与模式的入口。

工具栏(tool bar)

工具栏上放置着用于操作当前屏幕中各对象的控件

从设计指南说起,详解iOS系统组件分类体系(上)

工具栏可以包含以下特性:

  • 在iPhone上,工具栏始终位于屏幕底部,而在iPad上则有可能出现在顶部

范围栏(scope bar)

范围栏只有在与搜索栏一起时才会出现,它让用户可以定义搜索结果的范围。

从设计指南说起,详解iOS系统组件分类体系(上)

当搜索栏出现时,范围栏会出现在它的附近。范围栏的外观与你所指定的搜索栏的外观兼容。

当用户想在明确的分类范围内进行搜索时,使用范围栏是非常有用的。然而,更好的选择是优化您的搜索结果,让用户不需要使用范围栏对搜索结果进行筛选,便可以找到他们所需要的内容。

2.Ui-views(UI视图)

Ui-views又分内容视图和临时视图

临时视图:

警告对话框(alert

警告框传达应用或设备某种状态的重要信息,并且常常需要用户来进行操作。

规范中,对警告框包含的元素做出了如下规定:标题(必选)、描述信息(可选)、输入框(可选)、按钮(必选)。同时,警告框的样式都是磨砂效果的圆角白框,不可更改。如下图所示:

从设计指南说起,详解iOS系统组件分类体系(上)

警告框可以包含以下特性:

  • 必须包含标题,有时候会包含正文文本

  • 包含一个或多个按钮

操作列表(action sheet)

操作列表展示了与用户触发的操作直接相关的一系列选

从设计指南说起,详解iOS系统组件分类体系(上)

操作列表,是当用户激发一个操作的时候,出现的浮层。“使用操作列表让用户可以开始一个新任务或者对破坏性操作(例如:删除、退出登录等)进行二次确认。” 使用操作列表开始一个新任务,在苹果官方的邮件应用里有很多案例,比如下面这个。

从设计指南说起,详解iOS系统组件分类体系(上)

操作列表包含以下特性:

  • 由用户某个操作行为触发

  • 包含两个或以上的按钮

使用操作列表来:提供完成一项任务的不同方法。操作列表提供一系列在当前情景下可以完成当前任务的操作,而这样的形式不会永久占用页面UI的空间。

模态视图(modal view)

模态视图是一个以模态形式展现的视图,它为当前任务或当前工作流程提供独立的、自包含的(self-contained)功能。

从设计指南说起,详解iOS系统组件分类体系(上)

在iOS中,苹果使用“模态视图”来指那些在当前页插入的“浮层页面”。

模态视图可以包含以下特征:

  • 能占据整个屏幕,它也可能占据整个父视图(parent view)的区域,或者是屏幕的一部分

  • 包含完成当前任务所需的文字和控件

通常也会包含一个完成任务的按钮(点击后即可完成任务,当前模态视图也会消失),和一个取消按钮(点击后即放弃当前任务,同时当前模态视图消失)如图所示:

从设计指南说起,详解iOS系统组件分类体系(上)

当需要用户完成与app中的基础功能相关的、独立的任务的时候,可以使用模态视图。模态视图尤其适用于那些所需元素并非常驻在app主要UI中、又包含多个步骤的子任务。

内容视图:

浮出层(popover)

浮出层是当用户轻点某个控件或页面中的某一区域时浮出的,半透明的临时视图

从设计指南说起,详解iOS系统组件分类体系(上)

浮出层包含以下特征:

  • 是一个自包含的模态视图

  • 在横屏环境中,浮出层会包含一个箭头,指向其出处

  • 背景是半透明的,并且会模糊其背后的内容(遮罩背景)

  • 可以包含多种对象和视图,比如:表格,图片,地图,文本,网页或者自定义视图、导航栏,工具栏,和标签栏

  • 可以操作当前app视图中的对象的各种控件或对象(默认情况下, 浮出层中的表格视图,导航栏和工具栏的背景都是透明的,这样会让浮出层的毛玻璃效果展示出来)

网络视图(web view)

网络视图能直接在你的app中加载和呈现丰富的网络内容,比如嵌入的HTML和网站。比如,“邮件”就使用了网络视图来在信息中展示HTML内容。

网络视图包含以下特性:

  • 展示网络内容

  • 会自动处理页面中的内容,比如嵌入的HTML和网站。比如,“邮件”就使用了网络视图来在信息中展示HTML内容

原文始发于微信公众号(吴轶):从设计指南说起,详解iOS系统组件分类体系(上)

原文链接:http://www.uiya.cn/7566.html,转载请注明出处。

0
分享海报

评论0

没有账号? 注册  忘记密码?