设为首页 - 加入收藏 黄冈站长网(0713Zz.Com)- 聚焦黄冈站长前沿资讯!
热搜: 荣耀6Plus 网站 Note
当前位置: 首页 > 运营中心 > 交互 > 正文

iOS交互设计基础之栏&临时视图(一) 交互设计 产品设计

发布时间:2016-10-31 00:37 所属栏目:[交互] 来源:产品壹佰
导读:副标题#e# 一、栏 1、状态栏 状态栏:展示了设备及其周围环境的重要信息 (1)状态栏是透明的 (2)避免滚动内容直接透过状态栏 2、导航栏 导航栏能够实现应用不同信息层级间的导航 (1)避免过多的控件填满你的导航栏 (2)确保你自定义的导航栏在你的应用
一、栏

1、状态栏

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

iOS交互设计基础之栏&临时视图(一) 交互设计 产品设计

(1)状态栏是透明的

(2)避免滚动内容直接透过状态栏

iOS交互设计基础之栏&临时视图(一) 交互设计 产品设计

2、导航栏

导航栏能够实现应用不同信息层级间的导航

iOS交互设计基础之栏&临时视图(一) 交互设计 产品设计

(1)避免过多的控件填满你的导航栏

iOS交互设计基础之栏&临时视图(一) 交互设计 产品设计

(2)确保你自定义的导航栏在你的应用的每个视图中都有一致的外观与体验

iOS交互设计基础之栏&临时视图(一) 交互设计 产品设计

注:微信读书导航栏

3、工具栏

工具栏中放置用户在当前情境下最常用的指令

iOS交互设计基础之栏&临时视图(一) 交互设计 产品设计

注:微信阅读书籍阅读界面工具栏

(1)尽量避免在工具栏中放置偶尔用到的指令

iOS交互设计基础之栏&临时视图(一) 交互设计 产品设计

(2)工具栏中的所有指令和操作是针对当前屏幕和视图的

iOS交互设计基础之栏&临时视图(一) 交互设计 产品设计

注:pmcaff中内容详情页工具栏,包含针对当前内容的功能按钮

几种常见的工具栏形式:

iOS交互设计基础之栏&临时视图(一) 交互设计 产品设计

注:淘宝购物车工具栏,用于编辑购物车中商品,位于标签栏之上

iOS交互设计基础之栏&临时视图(一) 交互设计 产品设计

注:知乎日报内容详情页工具栏,包含针对当前内容的功能按钮以及导航按钮,位于屏幕底部

iOS交互设计基础之栏&临时视图(一) 交互设计 产品设计

注:微博编辑消息页面的工具栏

工具栏常用在一下几种情境中:

(1)内容详情页中,放置针对当前内容的编辑操作按钮

(2)图文编辑页面中,放置编辑时用到的工具按钮

(3)针对列表项中的内容进行编辑,例如:购物车中的商品、

4、标签栏

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

iOS交互设计基础之栏&临时视图(一) 交互设计 产品设计

(1)标签栏最多一次可承载5个标签

iOS交互设计基础之栏&临时视图(一) 交互设计 产品设计

(2)标签栏常应用应用的的主界面中,来组织整个应用层面的信息结构,也就是我们常说的几种主导航方式之一

iOS交互设计基础之栏&临时视图(一) 交互设计 产品设计

(1)标签栏常用来作主导航方式来布置产品结构(2)标签栏标签超过5个后,视觉上略显拥挤,平行主任务过多,容易给用户造成困扰

iOS交互设计基础之栏&临时视图(一) 交互设计 产品设计

注:口袋记账当前版本标签栏

5、搜索栏

iOS交互设计基础之栏&临时视图(一) 交互设计 产品设计

注:Safari搜索栏

搜索栏中可出现一下可选元素:占位符文本(文案提示)、书签按钮、清除按钮等

iOS交互设计基础之栏&临时视图(一) 交互设计 产品设计

注:在行搜索框

iOS交互设计基础之栏&临时视图(一) 交互设计 产品设计

注:UC浏览器搜索栏

二、临时视图

1、警告框

警告框用于告知用户一些会影响到他们使用APP或设备的重要信息

iOS交互设计基础之栏&临时视图(一) 交互设计 产品设计

(1)严格限制app中警告框的个数,并且保证每一个保证框,都能提供重要的信息或者游泳的选项

iOS交互设计基础之栏&临时视图(一) 交互设计 产品设计

(2)警告框应简明扼要的告诉用户当前所处的情景,并且告诉用户他们可以做什么

iOS交互设计基础之栏&临时视图(一) 交互设计 产品设计

(3)尽可能地避免使用“你”、“你的”、“我”、“我的”等字眼出现

iOS交互设计基础之栏&临时视图(一) 交互设计 产品设计

(4)避免在文案中详细描述“该按那个按钮”而导致文本过长

2、操作列表

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

iOS交互设计基础之栏&临时视图(一) 交互设计 产品设计

注:下厨房上传作品操作列表

(1)提供完成一项任务的不同方法,这样多种操作方式不会永久的占用UI 的空间

iOS交互设计基础之栏&临时视图(一) 交互设计 产品设计

注:探探上传照片或者视频

(编辑:黄冈站长网 0713Zz.Com)

网友评论
推荐文章