Add tag design in app

Source: Internet
Author: User
Tags delete key

App design add tag design summary during video/image/Text Publishing


tags, mainly to the user upload content to add tags, such tags mainly have a few functions:


1. Easy to find similar tag friends, improve product social properties;


2. Easy to categorize content, easy for users and background data capture;


3. Facilitate the operation of related activities, improve product interactivity;


The label is mainly after the video or photo shoot/edit, the features that appear on the publishing page, the general features of the publishing page include: Cover (for video), picture thumbnail, title, description, location, tag, @ Others, privacy rights, share/sync to several information, Among them, according to the weight of the product positioning and the characteristics of the application itself, some of the content in the presentation style will have some significant differences, such as in and nice two image beautification applications and Weibo:


This design process, similar to in the release process, mainly to the label design summary.


1. First is the entrance, in the page need to set aside the location of tagging, while, considering that the user may repeatedly add tags, or some of the application's tagging mechanism is a single add, does not support multiple additions, so the label area to have multiple added metaphors, or to bring a strong added directivity:


2. Adding a process


Adding a label page often requires a user's input, so the common practice is to jump to the next level of page, hosting more user actions.


In the tagging page, you can place the following features or content:


Among them, according to different product requirements, may derive a variety of design styles, such as:


(1) can only add a single label, added after the automatic return, such as micro-blog and in;


This design style does not support continuous add or delete operations on the current page, so just keep the search box. The current tagging operation is one-way, there will be no repeated additions, modifications to the problem, so the smoothness of the path is the main problem affecting the experience, that is, users can add new tags in the search process, or select the recommended tags from the search sug list, to keep the information clear, do not place too much distracting users redundant information , for example, when the user searches, the search Sug list is the highest level, common tags, recommended tags and other content is hidden so that the user can quickly locate the selection, choose to jump out of the page immediately after the success to return to the previous page, add new content again without the boredom of repeated operation.


In fact, this can also be broken down is whether to support users to add new tags. User-defined labels that are not supported are a lightweight interactive style. If you do not support the user to add a new label, direct focus to the search box, while the outbound input method is a more intuitive way, not to give the user other actions to choose, if the input results are not supported or no results, you cannot add tags.


(2) Multiple tags can be added


The style of the tagging page, more features, the background involved in the interface with a single addition is also the workload straight up, so in the front-end of the interaction design needs to take into account the weight of the pressure surface information, as well as the specific addition, deletion, and even sequencing of the implementation of interactive operations.


Because you can add more than one label, the current page does not jump before the completion of all the labels, it is necessary that after each user completes a label input, there is a definite action to the background feedback, tell this is a new label (or after the completion of a unified feedback, specific technical mechanisms to understand not comprehensive), while the front-end rendering specific label style differs from the basic input text content.


such as the tagging page of footsteps, allows the user to create and add new tags. The current page can add multiple tabs at the same time to support the delete operation. Since the input focus can only be located in the search box, the label needs to have a clear X's corner to indicate that the user's current tag is removable;


A more straightforward application that can be manually labeled is snapped. The label input area is integrated with the search box, and after the user enters the content in the area, the Search Sug list appears below the input area, and the user's input content has been rendered in the label area, according to the initial page of the text hint, if the SUG list does not have user favorite label, Users can click the comma in the input method to add it as a new label, while the focus is moved down, the user can immediately proceed to the next label input action. However, from the page can be found that the period label area does not represent the deletion of the corner mark, so only support through the keyboard delete key to delete the label operation. But I do not know whether for technical reasons, click on the keyboard to delete the label, the first click is the label highlighting, click again to delete the label, if it is intentionally designed, the personal feeling is a little superfluous.


Of course, you can also use the form of non-jump level two page, only the current page display add tag content, this design form is more lightweight, applicable to only support the addition, not support the form of input, while the label content needs to be given in the background.


Add tag design in app

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.