iOS Messages功能分析

iOS Messages功能分析

一、目标

二、界面组成

三、标题栏

1. 标题栏

2. 详细信息

四、消息列表

1. 普通状态

2. 全区域渐变色

3. 编辑状态

五、编辑栏

1. 普通状态

2. 第三方应用扩展

六、信息类型

1. 文本

2. 拍照

3. 录音

4. 第三方应用扩展

5. 照片

七、过程回顾

八、接下来

九、Finally


一、目标

梳理iOS Messages功能,为神马笔记实现聊天型笔记提供参考。

二、界面组成

iOS Messages功能分析_第1张图片

界面 描述
标题栏 标题栏显示当前参与对话的成员,并提供对话成员和对话的相关操作
信息列表区 展示各种对话内容,
包括文本、拍照、图片、图片集合、录音、地理位置、第三方应用扩展、……
编辑栏 创建各种对话内容,……

三、标题栏

1. 标题栏

状态 描述 截图
折叠 点击标题位置展开标题栏 iOS Messages功能分析_第2张图片
展开 点击标题位置折叠标题栏 iOS Messages功能分析_第3张图片

在一个单独对话中,标题栏提供了3项功能。

功能 描述
通话 拨打语音电话
FaceTime通话 拨打视频电话
信息 查看对话的详细信息

2. 详细信息

iOS Messages功能分析_第4张图片

四、消息列表

1. 普通状态

iOS Messages功能分析_第5张图片

消息列表区域除了显示每种不同的消息,还提供了以下功能。

功能 描述
对话时间 显示对话开始时间,规则:
1. 显示当天第一条消息开始时间
2. 与最近一条对话时间超过1个小时显示时间
消息时间 向右滑动列表将独立显示每条消息发送时间
渐变色 渐变色以整个区域为单位进行渐变,而不是以消息为单位渐变。
全区域的渐变色有效增强了对话的整体感。
气泡形状 消息背景气泡有2种形状,有尖角和没有尖角2种。
形状与上一条消息的发送时间有关,不同形状的气泡颜色凸显了对话的段落感。
规则:与最近一条对话时间少于2分钟,调整气泡状态。
消息集合 有些类型的消息可以组成一个集合显示,如图片、地理位置、……

2. 全区域渐变色

iOS Messages功能分析_第6张图片

3. 编辑状态

状态 描述 截图
弹出菜单 长按消息,弹出操作菜单 iOS Messages功能分析_第7张图片
编辑模式 标题栏:
1. 全部删除
2. 取消

底部栏:
1. 删除
2. 转发
iOS Messages功能分析_第8张图片
删除信息 底部栏"删除"按钮 iOS Messages功能分析_第9张图片
删除对话 标题栏的"全部删除" iOS Messages功能分析_第10张图片

五、编辑栏

1. 普通状态

iOS Messages功能分析_第11张图片

普通状态下的编辑栏,包括4个功能。

功能 描述
摄像头 启动摄像头功能,拍照、录制视频、……
第三方应用扩展 切换显示第三方应用扩展
文本消息 编辑文本消息
录音 启动麦克风尽心录音

2. 第三方应用扩展

iOS Messages功能分析_第12张图片

第三方消息扩展分成2个区域。

区域 描述
个人收藏 照片和商店为置顶应用,无法调整
更多应用 更多的第三方应用扩展

六、信息类型

1. 文本

  • 发送按钮

文本框输入内容后,"录音"变化为"发送"按钮。

  • 文本编辑框的几种状态
状态 描述 截图
短文本 从空文本开始输入 iOS Messages功能分析_第13张图片
长文本 文本超过长度,自动折叠 iOS Messages功能分析_第14张图片
短文本 从长文本开始删除,自动展开 iOS Messages功能分析_第15张图片
多行文本 超过1行,自动扩展高度 iOS Messages功能分析_第16张图片

2. 拍照

状态 描述 截图
拍照 拍照内容:
1. 慢动作
2. 视频
3. 照片
4.正方形
5. 全景
iOS Messages功能分析_第17张图片
拍照后 除了预览结果外,提供了以下操作:
1. 重拍
2. 编辑
3. 标记
4.发送
5. 完成
iOS Messages功能分析_第18张图片
完成 完成后,可以进行以下操作:
1. 继续拍照
2. 添加注释
3. 发送
iOS Messages功能分析_第19张图片
发送 拍照后直接发送照片 iOS Messages功能分析_第20张图片

3. 录音

状态 描述 截图
初始 已送达的语音消息需要手动保留。
否则将会自动删除。
提供的操作选项:
1. 扬声器或者听筒
2. 播放和停止
3. 显示播放进度
4. 显示录音时长
5. 保留录音
iOS Messages功能分析_第21张图片
点击 点击录音按钮出现的操作提示,使用长按以开始录音。 iOS Messages功能分析_第22张图片
录音 开始录音,通过滑动可以直接发送或者保持录音状态。 iOS Messages功能分析_第23张图片
完成 录音结束 iOS Messages功能分析_第24张图片

4. 第三方应用扩展

以Drafts和Bear体验第三方应用扩展。

状态 描述 截图
Drafts 显示Drafts内容 iOS Messages功能分析_第25张图片
Drafts 点击文本编辑款关闭Drafts iOS Messages功能分析_第26张图片
Bear 启动Bear iOS Messages功能分析_第27张图片
Bear 内容选择中 iOS Messages功能分析_第28张图片
Bear 发送后 iOS Messages功能分析_第29张图片

5. 照片

状态 描述 截图
照片 启动照片扩展 iOS Messages功能分析_第30张图片
选择 屏幕截图后,自动更新近期照片 iOS Messages功能分析_第31张图片
发送 发送后 iOS Messages功能分析_第32张图片

七、过程回顾

我们从一个空白内容的界面开始分析。将界面分成3部分功能。

  1. 标题栏
  2. 消息列表——展示及编辑内容
  3. 编辑栏——创建内容

之后对组成界面的3个部分进行深入分析。

最后,结束于各种消息类型。

从空到有,剖析了iOS Messages的功能。

在此感慨一下Apple公司的设计能力,真是不可思议。

八、接下来

复制iOS Messages的功能是绝对不可能做到的事情。

必须结合神马笔记的具体使用场景重新进行功能设计。

首个发布的聊天型笔记版本,将搭建整体框架并支持文本消息

九、Finally

~何以故~发阿耨多罗三藐三菩提心者~于法不说断灭相~

你可能感兴趣的:(神马笔记)