iOS Messages功能分析

iOS Messages功能分析

一、目标

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

二、界面组成

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

三、标题栏

1. 标题栏

状态 描述 截图
折叠 点击标题位置展开标题栏
展开 点击标题位置折叠标题栏

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

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

2. 详细信息

四、消息列表

1. 普通状态

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

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

2. 全区域渐变色

3. 编辑状态

状态 描述 截图
弹出菜单 长按消息,弹出操作菜单
编辑模式 标题栏:
1. 全部删除
2. 取消

底部栏:
1. 删除
2. 转发
删除信息 底部栏"删除"按钮
删除对话 标题栏的"全部删除"

五、编辑栏

1. 普通状态

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

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

2. 第三方应用扩展

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

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

六、信息类型

1. 文本

  • 发送按钮

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

  • 文本编辑框的几种状态
状态 描述 截图
短文本 从空文本开始输入
长文本 文本超过长度,自动折叠
短文本 从长文本开始删除,自动展开
多行文本 超过1行,自动扩展高度

2. 拍照

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

3. 录音

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

4. 第三方应用扩展

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

状态 描述 截图
Drafts 显示Drafts内容
Drafts 点击文本编辑款关闭Drafts
Bear 启动Bear
Bear 内容选择中
Bear 发送后

5. 照片

状态 描述 截图
照片 启动照片扩展
选择 屏幕截图后,自动更新近期照片
发送 发送后

七、过程回顾

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

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

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

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

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

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

八、接下来

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

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

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

九、Finally

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