提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
这篇文章对于初中级设计师形成一套自己的组件体系有帮助,高级设计师请绕道。
对于做了几年UI设计的你,在设计页面的时候是否有一套自己的思路很重要,这篇文章就是针对UI设计的组件层面来做一个归纳,希望对正在读这篇文章的你有所帮助。
在设计移动端页面的时候,除了静态的页面,还有各种交互的过程也是我们UI设计必须要考虑到的问题(公司有专门的交互设计师除外)。交互过程就涉及到各种组件。
一、组件分类
(这里我们只讲ios组件)
1.1 UI-bars
导航栏 navigation bar,
搜索 search bar,
状态栏 status bar,
标签栏 tab bar,
工具栏 tool bar,
范围栏 scope bar。
1.2 UI-views
临时视图:
警告对话框 alert,
操作列表 action sheet,
模态视图 modal view;
内容视图:
浮出层 popover,
网络视图 web view,
滚动视图 scroll view,
分栏视图控制器 split view controller,
表格视图 table view,
文本视图 text view,
页面视图控制器 page view controller,
地图视图 map view,
图片视图 image view,
容器视图控制器 container view controller,
集合视图 collection view,
活动视图控制器 activity view controller,
活动 activity;
二、组件详细介绍
2.1 UI-bars
2.1.1 导航栏 navigation bar
导航栏能够实现在APP的不同信息层级结构间的导航,也可以用来进行当前页面的各类操作。
*返回回到上一级标题,关闭就是关闭当前的页面,“标题”展示当前的页面的标题,三个小点展示的是当前的页面操作按钮。
2.1.2 搜索 search bar
搜索栏获取用户输入的文本,用以作为搜索的关键字。
*搜索栏一般放置在用户比较容易找到的位置,能让用户快速发现(一般会放在navigation bar的下面)。搜索栏一开始会有预设文字,提示该搜索框可查找的相关内容范围。一个APP内会有多个搜索框。
2.1.3 状态栏 status bar
状态栏展示了关于设备及其周围环境的重要信息。
*状态栏一般位于在屏幕的最上方,显示设备的状态信息,包括网络状态、运营商、时间、电池电量等信息。
2.1.4 标签栏 tab bar
标签栏让用户在APP内的不同子任务、视图和模式中进行切换。
*标签栏位于屏幕底部,并应该保证在应用内任何位置都可用。当用户选中某个标签时,该标签呈现适当的高亮状态。标签栏经常用于APP的主界面中,因为它可以很好地扁平信息层级,而且用户一看就能找到APP重要的信息层级。
2.1.5 工具栏 tool bar
工具栏上放置着用于操作当前屏幕中各对象的控件
*工具栏的展现形式可以是文字,也可以是图标。一般而言,三个以下的按钮用文字,三个以上的按钮用图标。工具栏不是永久显示的。一般在滑动屏幕时或者键盘调出时,工具栏是不显示的。可以参考Safari.
2.1.6 范围栏 scope bar
范围栏只有在与搜索栏一起时才会出现,它让用户可以定义搜索结果的范围。
*范围栏一般出现在搜索栏附近。范围栏的UI样式与其对应的搜索栏的是一个UI样式。用户通过搜索栏搜索的结果还是比较复杂的话,这种情况可以用范围栏来让用户更进一步进行搜索结果的筛选,省去一大部分的精力,当有多个筛选条件时,范围栏可以增加多个筛选项。
下一期的内容:UI-views
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册