β

【产品体验】nice ,给照片打标签

青溪·札记 223 阅读

摘要:#图片社交系列# 上一篇分析了黄油相机的发照片功能,本篇分析一下nice如何发照片打标签。

上周有点忙,参加了新公司新部门的第一次团建活动,搬家到公司附近。每天早上可以在家吃早饭,看看书再出门上班,从容了不少。

好了,闲话少叙,开始本周nice的体验吧。

一、任务和流程

用户的任务/目标:发布一张照片

nice“发照片”的主流程:

配图

默认进入相册胶卷界面,可切换至拍照界面。拍完一张照片或者在相册选择一张照片,均可进入截图界面,后续的流程保持一致。

界面效果如下:

配图

二、分解用户任务

1、点击“发照片”

与上一篇分析的黄油相机一样,nice也采用的是Tab标签导航,“发照片”图标位于Tab导航中间,非常明显。用户切换至任何一个Tab界面,均可点击此图标开始发照片。

2、从相册选择照片

子任务:

1)选择相册文件夹
默认为相册胶卷,点击顶部的下拉菜单可展开全部文件夹,如下图2;重新点击顶部的菜单、或者点击底部半透明区域,可收起下拉菜单

2)选择拍照图标
不管切换至哪个相册文件夹,第一个方格都显示相机图标;点击此区域,即可进入拍照界面

3)放弃发照片
点击左上角的“X”关闭图标,即可退出发照片的流程

4)选择一张照片
可进入到下一步的截图界面

配图

3、拍一张照片

子任务:

1)切换回到相册胶卷界面
点击左下角的照片缩略图即可

2)切换摄像头
顶部中间的图标,可在前置、后置摄像头之间切换

3)切换闪光灯模式
右上角的图标,默认关闭模式,可切换为自动、开启

4)放弃发照片
点击左上角的“X”关闭图标,即可退出发照片的流程

5)拍摄一张照片
有个细节是进入拍照界面时有个快门打开的效果,所以在拍照之后有个快门关闭的效果;待快门关闭,即可进入到下一步的截图界面;

配图

4、截图

子任务:
1)调整、裁切图片可视范围
单手指拖拽即可移动图片,移动过程中4个边界会自动吸附图片,也就是说画布上必须被图片填满

2)修改画布比
默认为下图1的正方形视图,点击右下角的图标,可切换至长方形视图

3)旋转图片
点击左下角的图标,可沿顺时针方向旋转图片

4)返回上一步
点击左上角的箭头,可直接返回上一步——相册界面或拍照界面

5)进入下一步
点击右上角的按钮,可进入编辑照片界面

配图

5、编辑照片

子任务:

1)浏览滤镜
在图1界面,点击“滤镜”,进入图2界面,在底部的滤镜列表左右滑动即可翻页浏览滤镜;点击左下角的向左箭头即可返回图1界面

2)使用/更换滤镜
方式1:在图1、2界面均可左右滑动来切换滤镜查看效果,界面上会有气泡提示滤镜的名称;
方式2:图2界面浏览滤镜的过程中,可点击任一滤镜来切换。

配图

3)浏览贴纸
贴纸有两类,一类是单个的,一类是系列的;第一类贴纸,点击直接弹窗;第二类贴纸,点击会展示此系列的所有贴纸,如下图4的浮层,同样可左右滑动浏览贴纸

4)使用/替换贴纸
如果界面上没有使用贴纸,则弹窗的按钮为“使用”,如下图3;如果已使用了贴纸,则弹窗按钮为“替换当前贴纸”,如图5;在弹窗界面点击左上角的“关闭”或者四周的空白区域,弹窗即可消失;

有个不足是,弹窗内的介绍文字太多时iPhone 4S的关闭按钮会超过界面边界。

配图

5)使用锁定的贴纸
点击该锁定的贴纸,弹窗显示贴纸的介绍信息,如图2;点击朋友圈“发送”后自动跳转回nice,界面显示图3的效果,即新贴纸已被使用;如果分享的贴纸是一个系列,则默认使用第一个贴纸,用户在底部列表区域点击该贴纸即可显示此系列的所有贴纸,如图4。

配图

6)调整贴纸位置、方向、大小
点击贴纸上的拉伸图标,可旋转、拉伸来调整贴纸的方向、大小;有个细节是当贴纸被缩小到一定尺寸时会显示虚线边框,如图2,此时拉伸、删除图标的距离固定不再缩小,好处是当贴纸被缩放的很小时仍然很容易点击这两个图标;当手指点击在边框范围内时可任意移动贴纸在界面内的位置。

7)删除贴纸
点击贴纸上的删除图标,弹窗询问是否删除贴纸

配图

6、标记标签

子任务:

1)选择标签类型
进入标记标签界面时,显示下图1的提示“点击图片,添加标签”。当用户点击界面任一区域时,提示消失;点击区域在图片范围内时,显示图3的效果,即三种标签类型,可选择其中一项进入对应的流程开始添加标签。
当用户没有添加标签时,“下一步”按钮时不可用状态,说明“标记标签”这一步时必须的步骤

2)改变标签方向
当用户第一次成功添加了标签后,界面上显示下图3的提示,高数用户如何改变标签方向、如何删除标签。
根据提示的方式,点击图片上的标签,即可水平翻转标签。

3)删除标签
长按标签,显示图5所示的弹窗,询问用户是否删除此标签。

配图

4)添加标签
如下图1,默认推荐一些标签(不知推荐维度是什么,当地标签、近期热门?)
输入关键词后,效果如图2,显示匹配关键词找到的用户已使用的标签,也可直接添加关键词作为标签;选择一个标签,即可进入图3的界面,并成功添加标签。

配图

5)添加地点
如下图1,可显示历史记录、定位当前位置、大众点评提供的推荐数据;
用户输入关键词后,如图2,如果点击“搜索地点”会直接在此界面显示搜索结果,无结果的提示如图3;
在图2、3界面,点击“添加地点”即可添加地点标签,并进入图4的界面。

配图

6)添加人物
如果有历史人物标签,则如图1所示显示;
搜索框中输入关键词,如图2所示,提示用户“添加标签后,快去@TA吧”,给用户一个预期后续有@TA的流程;
在图2界面,点击“添加标签:那”,即可回到图3界面将“那”添加为标签,在此界面一闪而过后进入图4开始@TA的流程。用户可搜索/选择一个用户,也可“跳过”此步骤再回到如图5的界面。

配图

7、分享照片和同步

子任务:

1)@好友

2)给照片配上文字

文字内容超过输入框高度时,用户可滑动查看,文字区域的右侧出现滚动条

3)同步到社交平台

点击变为可用状态,尽管我还没有绑定。点击发送后也仍然没有相应的界面让我绑定、同步到朋友圈

4)发送照片

进度条表示正在上传,如下图1;
网速较慢时,标题栏下方显示醒目的提示,如图2,点击可进入新页面介绍如何开启网络设置;
如果一段时间后仍然没有上传成功,则提示上传失败,如下图3;
在图3界面,点击刷新继续显示进度条开始上传;点击删除,弹窗询问是否删除,点击“删除”则界面顶部的上传区域隐藏。

配图

三、总结

1、拍照、从相册选择照片,后续的流程保持统一
2、选择贴纸、标记标签,是nice的特色功能,交互上做的也不错,值得好好研究下。

全篇完

欢迎关注我的微信公众号:青溪札记(qingxizhaji)
一枚交互设计师,正在这里分享产品体验记录、交互设计思考心得、阅读笔记、生活乱弹。

二维码

作者:青溪·札记
关注 产品设计、知识管理、阅读
原文地址:【产品体验】nice ,给照片打标签, 感谢原作者分享。

发表评论