玉溪网站设计中self是什么意思,从设计指南说起

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

对于大多数入门和中级设计师来说,脑海中没有只有自己的组件分类体系。 说到组件,脑海里只出现了弹夹、toast、操作清单等。 自我知识体系很难形成,如果不使用的话,可能会想到什么组件。 这样的话,不利于学习视觉设计、交互设计和产品设计。

组件基于材质设计和iOS的设计指南。 组件的中文译名可能有很多种,但没有权威的准确中文姓名。 但是,设计师只要知道某个组件的名称是什么样的就足够了。

由于iOS和Material Design的组件体系略有不同,因此分iOS篇和Android篇对组件的分类体系进行说明。 本报道为iOS篇。

iOS或Material Design的设计指南是根据组件的属性进行系统介绍的。 其实从设计者的使用场景来说,都是设计者在设计产品时,根据具体的功能调用组件。 所以,从功能上分开更容易理解,更容易记住。 因此,组件的分类可以分为两个维度。 一个是按照组件的属性进行分类(本文根据属性进行分类),另一个是控制组件的功能类别),在下一篇文章中进行介绍)。

按组件本身属性列出的思维导图:

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

1.UI-bars (UI栏)

导航栏(navigation bar)

导航栏允许您在不同的信息层之间移动,有时还可以管理当前的屏幕内容。

图为系统导航的基本格式,其中Back表示高级标题,Title表示当前视图的标题,Edit表示操作控件。

根据iOS10规范,导航栏通常必须包含以下三个元素:当前视图的标题、后退按钮和当前操作控件。

搜索栏(search bar)

搜索栏获取用户输入的文本作为搜索关键字。 (下图中的文本是占位符,不是用户输入的文本。

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

占位符文本(占位符文本)。 占位符文本通常像上图中的“Search”一样注明控件的功能,或者注明提示用户输入的文本将在哪里查找。 就像“谷歌”一样。 “清除”按钮。 大多数搜索栏都有清除按钮,用户可以通过单击来清除输入内容。

状态栏(tatus bar)

状态栏显示有关设备及其周边环境的重要信息

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

状态栏具有以下特征:

是透明的,总是固定在整个屏幕的上端

标签栏(tab bar)

标签栏中,可以切换子任务、视图和模式。

标签栏必须位于屏幕的底部,以便可以在APP应用程序中的任何地方使用。 显示图标和文字的内容,使各个项目保持等宽。 用户选择选项卡后,该选项卡将适当突出显示。

选项卡栏可以包含以下属性:

总是显示在画面底部的标签栏一次最多可以放置5个标签。 如果有5个以上的标签,可以显示前4个标签和1个“更多”,将其他标签以列表形式放入“更多”中。 横向画面和纵向画面的高度相同。 一般来说,使用标签栏来组织整个APP的信息结构。 标签栏提供了多个条目,以便适当地展开信息级别并同时访问类和模式,因此非常适合APP的主界面。

工具栏(tool bar)

工具栏包含用于操作当前屏幕中每个对象的控件

工具栏具有以下属性:

在iPhone上,工具栏始终位于屏幕的底部,而在iPad上,工具栏可能显示在顶部

范围栏(scope bar)

范围栏仅在与搜索栏一起时显示,用户可以定义搜索结果的范围。

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

显示搜索栏时,范围栏会显示在附近。 范围栏的外观与指定搜索栏的外观兼容。

如果用户想要在明确的分类范围内进行搜索,范围栏会很有用。 但是,建议您优化搜索结果,以便用户无需使用范围栏过滤搜索结果即可找到所需的内容。

2.Ui-views(UI视图)

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

临时视图:

警告对话框(alert)

警报框传达APP或设备所在状态的重要信息,并且经常需要用户进行操作。

规格中对警告框中包含的要素规定了标题(必需)、说明信息)、输入框)、必需)。 此外,警告框的样式为磨砂圆白框,无法更改。 如下图所示。

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

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

标题必须包括在内。 在某些情况下,正文文本可能包含一个或多个按钮

操作列表(action sheet)

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

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

操作列表是指用户开始操作时出现的浮层。 “操作列表允许用户启动新任务,并重申破坏性操作,如删除和终止登录。 ”使用操作列表开始新的任务。 苹果官方的邮件APP有以下许多情况。

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

操作列表具有以下特性:

由用户的操作行为触发的操作列表包含多个按钮。 操作列表提供了完成单个任务的各种方法。 操作列表显示一系列操作,在当前场景中可以完成当前任务,并且不会永久占用页面UI的空间。

模态视图(modal view)

模式视图是为当前任务或当前工作流提供独立、自包含功能的模式视图。

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

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

模式视图可以包含以下特性:

可以占据整个画面。 它还可能占据父视图的整个区域。 或者,屏幕的一部分通常包含完成当前任务所需的文本和控件。 通常,完成任务的按钮(单击后任务完成,当前模式视图也消失)和取消按钮应如图所示。

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

如果用户需要完成与app基本功能相关的独立任务,则可以使用模式视图。 模式视图特别适用于所需元素不驻留在app的主要UI中且包含多个步骤的子任务。

内容视图:

浮出层(popover)

浮动层是用户点击控件或页面中的区域时浮动的半透明临时视图

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

拉伸层具有以下特征:

是自我完善的模式视图。 在横向屏幕环境中,漂浮层会显示一个箭头,表示来源背景是半透明的。 此外,背景模糊的内容(遮罩背景)包括当前app视图中对象的各种控件,如表、图像、地图、文本、网页、自定义视图、导航栏、工具栏和选项卡栏

网络视图(web view)

网页视图可以将丰富的网页内容(如嵌入的HTML和网站)直接加载到APP上进行查看。 例如,“邮件”使用网络视图在信息中显示HTML的内容。

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

网络视图具有以下特性:

显示网页内容时,会自动处理页面中的内容,例如嵌入的HTML和网站。 例如,“邮件”使用网络视图在信息中显示HTML的内容

滚动视图(scroll view)

滚动视图中,可以轻松浏览超出滚动视图边界的图像。 (下图中知道的放大界面图像既超过了长度也超过了宽度。

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

滚动视图具有以下特征:

没有预先定义的外观

滑块条在显示后立即显示,或者在用户进行操作时显示

当用户在视图中拖动内容时,内容会滚动。 当用户轻轻扫描屏幕时,内容会快速滚动——,直到用户再次触摸屏幕或内容到达底部。

通过滚动显示,可以在固定的空间中浏览大视图或大视图。

适当支持缩放操作。 如果缩放对当前内容有用,用户可以通过捏放或双击来缩放当前视图。 如果支持缩放操作,则还必须根据用户当前的任务设置在当前方案中允许缩放的最大值和最小值。

在页面模式滚动视图中,请考虑使用“页面控制”。 如果要显示分页符、分页符或分页符内容,可以使用页面控件来通知用户当前内容总共有多少块,以及当前内容的读取次数是多少。

分栏视图控制器(split view controller)

列显示控制器是管理两个相邻显示控制器的显示的全屏控制器。

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

在iOS 7之前的版本中,拆分视图控制器仅适用于iPad。

各列视图控制器具有以下特性:

在水平屏幕环境中并排显示两个窗格时,主窗格将显示在详细信息窗格的上方。 如果不需要,也可以隐藏主窗格,特别是在垂直屏幕上。

表格视图(table view)

表视图将数据显示为可滚动的单列多行。

表格视图可以包含以下属性:

如果用户希望以单列格式查看数据,以便于分段和分组,则可以单击以选择行,或者使用控件添加、删除、多选、显示详细信息,或者展开另一个表格视图的iOS以定义两种表格样式。

泰林。 平铺表格分为多个制表符段落,表格的右侧可能会显示垂直的表格索引。 每行开头可以有页眉,末尾可以有页脚。

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

分组(分组)。 的行显示为组,可以有页眉和页脚。 表格视图中的组至少包含一个列表,每个组至少包含一个内容。 与平铺类型不同,分组表没有索引。

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

文本视图(text view)

文本视图允许您接收和显示多行文本

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

文本视图可以包含以下属性:

是可以定义为任意高度的矩形。 如果内容超出了视图的边框,则文本视图支持滚动,可以自定义字体、颜色和对齐方式。 默认情况下,文本视图显示为左对齐的黑色系统字体。 当用户在文本视图中单击时,将调用键盘。 键盘的配置和类型取决于用户的系统语言设置

页面视图控制器(page view controller)

页面视图控制器通过“滚动”或“翻页”两种方法处理一个或多个页面的内容。 下图显示了iOS仿真器的翻页样式

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

页面视图控制器具有以下特性:

带有滚动条的页面视图控制器没有默认外观。 具有翻页效果的控制器可以在两个页面的中心添加“书脊”(book spine )效果,并可以基于指定的过渡模拟页面切换时的动画。

Focus on the strength of the pithy专注极简的力量

PITHY CONTACT

一家没有销售的玉溪网站建设公司
我们特立独行

img/mail.png联系我们

PITHY CALL

如果您对我们的服务有什么疑问
欢迎来电咨询

电话
18868949445
img/top.svg
网站声明 | 隐私政策 | 网站地图 © 2018 MFweb. All rights reserved. Designed by玉溪网站制作玉溪网站设计公司玉溪网站建设公司