UI设计基础知识-IOS系统界面 已回复

会员ID:一个像素设计 男 31岁 时间:2016-10-11 15:14:14

整理:小政

IOS UI界面元素由三部分组成:栏、内容视图和临时视图

栏:状态栏、导航栏、标签栏和工具栏

内容视图:表格视图、文本视图和Web视图

临时视图:对话框和操作列表

下面尺寸都是按照iPhone6尺寸750*1334的规范来说明噢~

一、栏

1、状态栏(Status Bar)

ios上状态栏 就是指的最上面的40像素高的部分。状态栏分前后两部分,要分清这两个概念:

前景部分:就是指的显示电池、时间等部分;

背景部分:就是显示黑色、白色或者图片的背景部分;

2、导航栏(Navigation Bar)

状态栏下方的就是导航栏,一般情况中间显示当前界面内容标题,左侧和右侧可以是当前页面操作按钮,按钮可以是文字也可以是图标。随心情吧。

3、标签栏(Tab Bar)

位于界面最下方,全局导航,方便快速切换功能。手机上标签栏不得超过5个标签,最好是3-5个之间。有选择和未选择的视觉效果。

4、工具栏

工具栏位于界面最下方,包含对当前界面进行操作的相应功能按钮。工具栏和标签栏在一个视图中只能存在一个。

二、内容视图

内容视图包含应用显示的内容信息,分为表格视图、文本视图、Web视图、临时视图

1、表格视图

*平面型表格视图(Table View)展示一列不需要辅助信息就能辨认的界面。例如,通讯录界面。

*辅助说明型表格,用户需要额外利用辅助信息来区分的界面。

*内容强调型表格,展示强调当前页面的状态,一般左边主标题,右边副标题。

2、文本视图

能够显示多行文本区域,当内容太多也可以滚动查看。例如,备忘录的输入区。

3、Web视图

应用中嵌入h5页面,我们可以理解为一个容器中含有HTML内容。电商类应用一般都会潜入大量的H5页面。这样的做法是可以在服务器端快速的发布更新的内容,不用等待审核的时间。

三、临时视图

临时向客户提供重要信息,或者提供额外的功能和选项

*弹出框

系统向用户通知信息的重要形式,例如,用户想进一步操作,需要先对对话框做出响应的响应。

*操作列表

对于内容比较多,层次比较复杂的页面来说,可能需要通过功能区划分种类。例如,筛选分类,不同方式的排序。

今天我们大致的了解了一下iOS系统界面。下节我们说android系统界面。

这些基本的知识我们还是要大致的了解的。对今后会有帮助。

作者的微信,小伙伴可以加一下。

- 文章结束 -


本文版权归原作者所有

转载请注明原作者及出处授权发布

设计师应该是一个有灵魂的职业,

我们为世界的一切变得更美好而生。

设计师的灵魂在于创造力,

而创造力源自生活的方方面面。

www.ui28.cn

推荐一个超实用的设计师网址导航

点击左下方“阅读原文”即可进入


评论 ( 168 条评论)
科普问题免费提问
无需注册,10分钟内回答