iOS交互设计基础之内容视图(三)

1、活动

每个活动表示一个系统提供的或自定义的服务——通过访问活动视图来作用于某些特定的内容

(1)活动是一种可定制对象,代表着某个可以让用户在APP中执行操作的服务

(2)用户通过点击活动视图中的某样图标来启动某项活动

注:腾讯新闻

2、活动视图控制器

活动视图控制器是一个临时视图,当中罗列了一系列可以针对页面特定内容的系统服务和定制服务

(1)显示了让用户可以针对当前内容执行操作的一系列的可配置服务

注:堆糖中针对文章内容的活动视图

(2)根据所处的场景不同,可能出现在操作列表浮出层

注:MONO文章分享,活动视图出现在浮出层中

(3)使用活动视图控制器来为用户提供一些列针对当前内容的服务。这些服务可以系统自带的,例如:复制、转发到邮件等,也可以是自定义的

注:小红书

(4)确保活动视图控制器中的操作是针对当前内容的

注:赶集网app

3、集合视图

集合视图用户管理一些列有序的项,并以一种自定义的视图来呈现它们

注:京东-商品展示


(1)由于集合视图的布局不是一个严格的线性布局,因此适合用来展示一些尺寸不一致的项

注:秒嗨

(2)表格视图更适合的时候,不要使用集合视图

4、图片视图

图片视图用来展示一张单独的图片或者一系列动态图片

注:朋友圈查看照片

(1)确保图片视图中的每一张图片相同的尺寸或比例。如果你的图片尺寸不一致,图片视图会逐一对它们进行调整

(2)可以检测图片本身及父视图的属性,并决定这个图片是否应该被拉伸、缩放、调整到适合屏幕的大小

5、页面视图

页面视图控制器通过滚动或翻页两种方式来处理长度超过一页的内容


(1)带滚动条的页面视图没有默认的外观

(2)可以根据指定的转场来模拟出页面转换时的动画(例如在线书籍阅读类产品中左右或者上下翻页浏览信息的效果)

(3)一般使用页面视图展示线性的内容(故事的文本或文章的内容等),或者是可以被自然分成块的内容(比如日历)

注:简书文章阅读页面 & 腾讯新闻资讯详情页面

(4)可以设计一种自定义的方式可以让用户以非线性的方式来获取内容(比如说书籍的目、字典等)

注:微信读书_书籍目录,点击目录可以直接到达目的页面

6、浮出层

浮出层是当用户轻点某个控件或页面中的某一区域时浮出的,半透明的临时视图

注:新浪微博

(1)浮出层是一个包自含的模态视图

注:支付宝

(2)可以包含多种对象和视图,比如:表格、图片、文本、导航栏、工具栏,可以操作当前APP视图中对象各种控件或对象

注:脉脉-发布动态

(3)让浮出层中的箭头尽可能指向期出处

注:微信

注意:

(1)不要在浮出层上面再展示一个模态视图

(2)确保同一时间内同一屏幕上只有一个浮出层

注:收趣云书签

7、滚动视图

使用滚动视图允许用户在固定的空间内浏览大尺寸或大量的视图(例:尺寸超越滚动视图边界的图片)

(1)适当地支持缩放操作,如果放大和缩小对于当前内容是有用的话,可以支持用户通过捏合或者双击来对当前视图进行缩放

(2)页模式滚动视图中,可以考虑使用页面控件

(3)一般来说一次只展示一个滚动视图

8、表格视图

表格视图以一个可滚动的单列多行的形式来展示数据

(1)用户可以通过点击来选中某行,或通过控件来添加、移除、多选、查看详情或展开另一个表格视图

注:京东商城

(2)表格视图的类型:

平铺型(表格右侧可以出现垂直的表格索引)

注:微信通讯录

分组型

(3)表格视图的扩展功能

(4)表格视图布局样式

注:default样式
注:subtitled样式
注:value1样式
注:value2样式

(5)用户选择列表项时,始终给与反馈,当用户点击可选的列表时,被点击的列表项都会短暂的高亮一下。

9、文本视图

文本视图可以接受和展示多行文本

注:氢气球_写游记

(1)文本视图是一个可定义为任何高度的矩形

注:猫眼电影_写影评

(2)当内容太多,超出视图的边框时,文本视图支持滚动

注:Instagram编辑照片说明

(3)支持用户编辑,当用户轻击文本视图内部时,可以唤起软键盘(可根据文本类型的差别唤起不同的软键盘)

注:新浪微博

注:本篇是“iOS交互设计基础系列”最后一篇,关于“栏&临时视图&控件”相关内容可翻看前两篇

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

iOS交互设计基础之控件(二) - 简书

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

推荐阅读更多精彩内容