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

一、栏

1、状态栏

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

(1)状态栏是透明的

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

2、导航栏

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

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

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

注:微信读书导航栏

3、工具栏

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

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

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

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

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

几种常见的工具栏形式:

注:淘宝购物车工具栏,用于编辑购物车中商品,位于标签栏之上
注:知乎日报内容详情页工具栏,包含针对当前内容的功能按钮以及导航按钮,位于屏幕底部
注:微博编辑消息页面的工具栏

工具栏常用在以下几种情景中:

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

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

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


4、标签栏

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

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

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

PS:

(1)标签栏常被用作主导航方式来布置产品结构

(2)标签栏标签超过5个时,视觉上略显拥挤,平行主任务过多,容易给用户到来困扰

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

5、搜索栏


注:Safari搜索栏

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

注:在行搜索框
注:UC浏览器搜索栏

二、临时视图

1、警告框

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

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

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

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

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

2、操作列表

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

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

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

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

(2)在完成一项可能有风险的操作前获得用户的确认

注:腾讯新闻删除评论

(3)避免让用户滚动操作列表

3、模态视图

模态视图为当前的任务或当前工作流程提供了一种独立的功能,为用户提供了一种不脱离主任务的方式去完成一个任务或者获得信息

注:腾讯微云添加笔记

(1)模态视图通常会包含一个完成按钮和一个取消按钮(可根据实际功能/情景来进行调整)

注:简书编辑文章

(2)能占据整个屏幕,也可能占据屏幕的一部分

(3)选择一个适当的动画来展示模态视图

垂直出现:模态视图从底部边缘滑入屏幕,也同样从屏幕底部滑出

弹出:当前视图从右往左水平滑动,显示模态视图,离开模态视图时,原先的父视图从左滑回屏幕右边

总结:

(1)模态模型就行是导航模型中死胡同,它暂时覆盖应用正常的操作页面,让你去完成和父页面内容相关的一些任务

(2)通常模态视图都是由屏幕底部滑出,覆盖原有页面

(3)模态视图通常被用来添加或编辑内容

(4)模态视图属于正常流程上的一个临时支路

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,802评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,109评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,683评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,458评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,452评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,505评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,901评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,550评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,763评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,556评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,629评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,330评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,898评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,897评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,140评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,807评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,339评论 2 342

推荐阅读更多精彩内容