APP中添加標籤設計

標籤：ui設計

app設計在視頻/圖片/文字發布過程中添加標籤設計總結

標籤，主要是給與使用者上傳的內容添加標籤，這類標籤主要有一下幾點作用：

1.便於找到相似標籤好友，提高產品社交屬性；

2.便于歸類內容，便於使用者和後台進行資料抓取；

3.便於運營相關活動，提升產品互動性；

標籤主要是在視頻或照片拍攝/編輯結束後，在發布頁出現的功能，發佈頁面具有的通用功能包括：封面（針對視頻而言），圖片縮圖，標題，描述，地點，標籤，@他人，隱私許可權，分享/同步到 幾項資訊，其中按照產品定位的權重及應用本身的屬性特質，幾點內容在呈現樣式上會有一些顯著的差異，如in和nice兩款圖片美化應用與微博：

此次設計過程中，類似in的發布過程，主要對標籤設計進行總結。

1.首先是入口，在頁面中需要留出添加標籤的位置，同時，考慮到使用者可能重複添加標籤，或者有些應用的添加標籤機制是單次添加，不支援多次添加，因此標籤地區要有可多次添加的隱喻，或者帶出較強的添加指向性，：

2.添加過程

添加標籤頁面，往往需要使用者的額輸入操作，因此普遍做法是跳轉到下一級頁面，承載更多的使用者操作。

在添加標籤頁面中，可放置如下功能或內容：

其中，按照不同的產品需求，可能衍生出各種設計樣式，如：

（1）只可單次添加一個標籤，添加後自動返回，如微博和in；

該設計樣式不支援在當前頁面連續添加或刪除操作，因此僅保留搜尋方塊即可。當前的添加標籤操作是單向的，不會有反覆添加、修改的問題，因此 路徑的流暢性 是影響體驗的主要問題，即使用者搜尋過程中可添加新標籤，或者從搜尋sug列表中選取推薦的標籤時，要保持資訊呈現清晰，不要放置過多分散使用者注意力的冗餘資訊，例如當使用者搜尋時，搜尋sug列表是層級最高的，常用標籤、推薦標籤等內容全部被隱藏掉，以便使用者可快速定位選擇，選擇成功後立即跳出該頁面返回上一級頁面，再次添加新的內容而不會有反覆操作的厭煩感。

其實這裡還可細分的是是否支援使用者添加新標籤。不支援使用者自訂標籤是一個輕量化的互動樣式。如果不支援使用者自己添加新的標籤，直接將焦點定位到搜尋方塊，同時呼出IME是一個更為直觀的方法，不給使用者其他的操作選擇，如果輸入結果不支援或無結果時，則無法添加標籤。

（2）可添加多個標籤

該樣式的添加標籤頁面，承載的功能更多，後台涉及到的介面與單次添加相比也是工作量直線上升的，因此在前端的互動設計中需要考慮到壓面資訊的權重，以及標籤的具體添加、刪除，甚至排序等互動操作的實現方式。

由於可添加多個標籤，在完成所有標籤前當前頁面是不跳轉的，因此需要在使用者每完成一個標籤輸入後，都有確定的操作給後台反饋，告知這是一個新的標籤（或者完成後給出統一的反饋，具體技術機制瞭解不全面），同時前端呈現具體的標籤樣式，與基本的輸入常值內容區別開來。

如足跡的添加標籤頁面，允許使用者建立和添加新的標籤。當前頁面可同時添加多個標籤，支援刪除操作。由於輸入焦點僅可定位在搜尋方塊中，所以標籤上需要有明確的X的角標提示使用者當前標籤是可刪除的；

可手動添加標籤更加直接的應用是啪啪。標籤輸入地區與搜尋方塊進行了整合，及使用者在該地區輸入內容後，輸入地區下方出現搜尋sug列表，同時使用者的輸入內容已經呈現在標籤地區中，根據初始頁面的文案提示，若sug列表裡無使用者中意的標籤，使用者可點擊IME中的逗號將其作為新標籤添加，同時焦點下移，使用者可立即進行下一標籤的輸入操作。但是從頁面可發現，期標籤地區無表示刪除的角標，因此只可支援通過鍵盤上的刪除鍵進行刪除標籤操作。但是不知是否由於技術原因，點擊鍵盤刪除標籤時，第一次點擊是標籤高亮顯示，再次點擊才可刪除標籤，如果是有意這樣設計的，個人感覺倒是有些畫蛇添足了。

當然，還可以使用不跳轉二級頁面的形式，僅在當前頁面顯示添加標籤內容，這種設計形式較為輕量化，適用於僅支援添加，不支援輸入的形式，同時標籤內容需要後台給出。

APP中添加標籤設計