恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
控件基础知识
0.0°
2017-12-27 原创文章 经验/观点 举报 1179 6 3 0

这篇文章对于初中级设计师形成一套自己的组件体系有帮助,高级设计师请绕道。


对于做了几年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的不同信息层级结构间的导航,也可以用来进行当前页面的各类操作。

Image title

*返回回到上一级标题,关闭就是关闭当前的页面,“标题”展示当前的页面的标题,三个小点展示的是当前的页面操作按钮。



2.1.2 搜索 search bar

搜索栏获取用户输入的文本,用以作为搜索的关键字。

Image title

*搜索栏一般放置在用户比较容易找到的位置,能让用户快速发现(一般会放在navigation bar的下面)。搜索栏一开始会有预设文字,提示该搜索框可查找的相关内容范围。一个APP内会有多个搜索框。



2.1.3 状态栏 status bar

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

Image title

*状态栏一般位于在屏幕的最上方,显示设备的状态信息,包括网络状态、运营商、时间、电池电量等信息。



2.1.4 标签栏 tab bar

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

Image title

*标签栏位于屏幕底部,并应该保证在应用内任何位置都可用。当用户选中某个标签时,该标签呈现适当的高亮状态。标签栏经常用于APP的主界面中,因为它可以很好地扁平信息层级,而且用户一看就能找到APP重要的信息层级。



2.1.5 工具栏 tool bar

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

Image title

*工具栏的展现形式可以是文字,也可以是图标。一般而言,三个以下的按钮用文字,三个以上的按钮用图标。工具栏不是永久显示的。一般在滑动屏幕时或者键盘调出时,工具栏是不显示的。可以参考Safari.



2.1.6 范围栏 scope bar

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

Image title

*范围栏一般出现在搜索栏附近。范围栏的UI样式与其对应的搜索栏的是一个UI样式。用户通过搜索栏搜索的结果还是比较复杂的话,这种情况可以用范围栏来让用户更进一步进行搜索结果的筛选,省去一大部分的精力,当有多个筛选条件时,范围栏可以增加多个筛选项。



下一期的内容:UI-views



更新:2017-12-27

收藏

6人已收藏

一芳设计行

设计源于生活

  • 4

    作品

  • 15

    粉丝

  • 11

    关注

  • 排版四大原则
  • 有关UI元素的一些归纳与参考(二)
  • 有关UI元素的一些归纳与参考(一)
相关标签
设计经验分享ui

    猜你喜欢

      2017-12-27 原创文章 经验/观点 举报 1179 6 3 0

      控件基础知识

      0.0°

      你确定要举报控件基础知识

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年12月27日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      3
      6
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录