APP中添加标签设计

app设计在视频/图片/文字发布过程中添加标签设计总结

标签,主要是给与用户上传的内容添加标签,这类标签主要有一下几点作用:

1.便于找到相似标签好友,提高产品社交属性;

2.便于归类内容,便于用户和后台进行数据抓取;

3.便于运营相关活动,提升产品互动性;

标签主要是在视频或照片拍摄/编辑结束后,在发布页出现的功能,发布页面具有的通用功能包括:封面(针对视频而言),图片缩略图,标题,描述,地点,标签,@他人,隐私权限,分享/同步到 几项信息,其中按照产品定位的权重及应用本身的属性特质,几点内容在呈现样式上会有一些显著的差异,如in和nice两款图片美化应用与微博:

此次设计过程中,类似in的发布过程,主要对标签设计进行总结。

1.首先是入口,在页面中需要留出添加标签的位置,同时,考虑到用户可能重复添加标签,或者有些应用的添加标签机制是单次添加,不支持多次添加,因此标签区域要有可多次添加的隐喻,或者带出较强的添加指向性,如图所示:

2.添加过程

添加标签页面,往往需要用户的额输入操作,因此普遍做法是跳转到下一级页面,承载更多的用户操作。

在添加标签页面中,可放置如下功能或内容:

其中,按照不同的产品需求,可能衍生出各种设计样式,如:

(1)只可单次添加一个标签,添加后自动返回,如微博和in;

该设计样式不支持在当前页面连续添加或删除操作,因此仅保留搜索框即可。当前的添加标签操作是单向的,不会有反复添加、修改的问题,因此 路径的流畅性 是影响体验的主要问题,即用户搜索过程中可添加新标签,或者从搜索sug列表中选取推荐的标签时,要保持信息呈现清晰,不要放置过多分散用户注意力的冗余信息,例如当用户搜索时,搜索sug列表是层级最高的,常用标签、推荐标签等内容全部被隐藏掉,以便用户可快速定位选择,选择成功后立即跳出该页面返回上一级页面,再次添加新的内容而不会有反复操作的厌烦感。

其实这里还可细分的是是否支持用户添加新标签。不支持用户自定义标签是一个轻量化的交互样式。如果不支持用户自己添加新的标签,直接将焦点定位到搜索框,同时呼出输入法是一个更为直观的方法,不给用户其他的操作选择,如果输入结果不支持或无结果时,则无法添加标签。

(2)可添加多个标签

该样式的添加标签页面,承载的功能更多,后台涉及到的接口与单次添加相比也是工作量直线上升的,因此在前端的交互设计中需要考虑到压面信息的权重,以及标签的具体添加、删除,甚至排序等交互操作的实现方式。

由于可添加多个标签,在完成所有标签前当前页面是不跳转的,因此需要在用户每完成一个标签输入后,都有确定的操作给后台反馈,告知这是一个新的标签(或者完成后给出统一的反馈,具体技术机制了解不全面),同时前端呈现具体的标签样式,与基本的输入文本内容区别开来。

如足迹的添加标签页面,允许用户创建和添加新的标签。当前页面可同时添加多个标签,支持删除操作。由于输入焦点仅可定位在搜索框中,所以标签上需要有明确的X的角标提示用户当前标签是可删除的;

可手动添加标签更加直接的应用是啪啪。标签输入区域与搜索框进行了整合,及用户在该区域输入内容后,输入区域下方出现搜索sug列表,同时用户的输入内容已经呈现在标签区域中,根据初始页面的文案提示,若sug列表里无用户中意的标签,用户可点击输入法中的逗号将其作为新标签添加,同时焦点下移,用户可立即进行下一标签的输入操作。但是从页面可发现,期标签区域无表示删除的角标,因此只可支持通过键盘上的删除键进行删除标签操作。但是不知是否由于技术原因,点击键盘删除标签时,第一次点击是标签高亮显示,再次点击才可删除标签,如果是有意这样设计的,个人感觉倒是有些画蛇添足了。

当然,还可以使用不跳转二级页面的形式,仅在当前页面显示添加标签内容,这种设计形式较为轻量化,适用于仅支持添加,不支持输入的形式,同时标签内容需要后台给出。

时间: 2024-08-05 11:31:07

APP中添加标签设计的相关文章

在iOS App 中添加启动画面

你可以认为你需要为启动画面编写代码,然而Apple 让你可以非常简单地在Xcode中完成.不需要编写代码,你仅需要在Xcode中进行一些配置. 1.什么是启动画面(Splash Screen)? 启动画面是你在启动App的时候看到的第一个界面,通常,启动画面是覆盖整个屏幕的一张图片,在主屏幕装在完后隐藏. 启动画面的主要目的是让用户知道你的App正在装载,并且对用户介绍你的品牌.启动画面对哪些需要较长时间启动的Apps尤其重要.一般而言,启动画面是为了给用户更好的体验. 2.在你的App中添加启

在App中添加微信分享功能

随着微信平台运用越来越普遍,在app中往往需要将看到的消息发送给微信好友,分享到朋友圈,因此就需要添加微信分享的功能.我们可以通过微信的开发者平台上的相关文档来实现这个简单的功能. 1.在微信开发者平台注册应用程序的id,通过审核后可以获得一个appid 2.有了appID后下载最新的微信终端sdk文件,SDK文件包括 libWeChatSDK.a,WXApi.h,WXApiObject.h 这三个.资料下载页面: https://open.weixin.qq.com/cgi-bin/showd

ThinkPHP框架下,jq实现在div中添加标签并且div的大小会随之变化

php初学者,有什么不对的还请指正. 首先是在html页面中用jq实现添加标签:divAchivePersonnal是select所在的div的外层div,divselectAchivePersonnal是select的最近一层div,info内是字符串拼接,jq标签插入用append方法.接下来是调整css样式,使div会随着标签增加而加大,这里要用一个css属性overflow(亲自查),这里直接在divselectAchivePersonnal使用时不会达到你想要的效果,所以至少要有两个嵌

在APP中添加背景音乐

我说的这种方法是利用Android中的service来开启,也就是进去的时候就播放出,退出就停止. 首先,在AndroidManifest中的application节点下添加: <activity            android:name=".MainActivity"            android:label="@string/app_name" >            <intent-filter>            

ZYNQ原理图中添加RTL设计模块

前言 已有的RTL模块怎么添加到原理图中? 流程 (1)添加文件到设计中. (2)右键文件添加到block design中. (3)连线即可. 以上. 原文地址:https://www.cnblogs.com/kingstacker/p/10768138.html

在App中添加数据统计功能(友盟)

1.首先在友盟平台添加新应用中,申请一个新应用,然后得到一个appkey. 2.下载ios平台的sdk文件,将以下两个文件拖入工程中.   (1)libMobClickLibrary.a   (2)MobClick.h 3.添加类库: TARGETS-->Build Phases-->Link Binary With Libraries--> + -->libz.dylib (Xcode7请选择libz.tbd) 如过使用cocopod添加,可用:(pod 'UMengAnalyt

关于iOS APP中网络层的设计

在iOS开发中,请求网络数据,处理获得的数据是很常见的功能,但是很少有资料会讨论关于网络的处理应该放在MVC中得哪个层中. 我在网上Google了一番,记下了几个觉得比较不错的链接.现记录如下: http://stackoverflow.com/questions/4810289/best-architecture-for-an-ios-application-that-makes-many-network-requests?lq=1 这个答案提供了一个实际的设计 http://akosma.c

怎么样用CAD快速看图软件添加标签

同PDF文件一样,CAD文件也需要自己的看图软件,但CAD文件却要比PDF文件复杂的多,在CAD快速看图软件中,我们该怎么样添加标签呢?本期教大家CAD快速看图软件添加标签方法. 1.想要给CAD添加标签,我们需要先下载安装一款CAD编辑工具,这里可以在浏览器中搜素迅捷CAD编辑器,请到安装的网站下载,这里可选择官网下载软件http://cad.xjpdf.com/. 2.然后打开下载好的迅捷CAD编辑器,打开软件后,在电脑中打开要查看的CAD文件,将文件用鼠标拖拽到软件界面,此时软件已经自动切

NGUI使用教程(2) 使用NGUI创建2D场景并且添加标签和按钮

1.创建2D场景 要使用NGUI创建2D场景,首先咱们必须新建一个项目,并且导入NGUI作为这个项目的插件,相信如果看过上一篇教程都知道怎么导入NGUI了,这里就不赘述,如果有疑问的可以去看上一篇教程.这里我已经导入成功了.在菜单中可以看到NGUI的菜单 在工程面板中可以看到有NGUI的文件夹 接下来咱们可以点击菜单中的[NGUI]-->[Create]-->[2D UI],创建成功后在Hierarchy面板中可以看到多了一个UI Root 点开UI Root可以看到UI Root底下有一个C