起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識app發布內容時，添加#話題#應注意的設計細節
筆者在體驗了幾個APP的“發布”功能，發現單是關于“添加話題”的設計細節就不少，下面結合具體例子說明。
“#”號并不陌生，比如在撥打客服電話時，會被要求輸入#加一串數字，或以#結束確認。
發微博時選擇話題也有用到“#”號。在微博中， #文本文本# 表示話題。比如輸入：我很#開心#。然后發送，就會發現#開心#變成了一個超鏈接按鈕。點擊這個鏈接，就會進入關于“開心”的話題，看到所有包含#開心#的微博，極大的方便了用戶查找同類或同話題微博。對平臺而言，也是構建內容推薦系統的一部分。
體驗了幾個APP的“發布”功能，發現單是關于“添加話題”的設計細節就不少，下面結合具體例子說明。
01 添加單個話題
上圖是Keep發布新動態和微視發布視頻的截圖。二者都屬于功能比較簡單的，都只能添加一個話題。他們都有獨立于文本內容區的點擊入口和顯示位置。Keep使用了通欄列表，而微視的尺寸更小、位置相對更隱蔽一些，當然這也和微視要兼顧其他功能有關。
在選擇話題頁，均有搜索功能，Keep還對話題進行了分類，增加了分類篩選功能，微視則是單純的話題列表。此外，微視也不支持用戶新建自定義話題。如過用戶要取消話題，都需要到選擇話題頁面進行取消，有點不方便。
02 添加多個話題
新浪微博和抖音可以放在一起進行比較。微博恐怕是國內較早一批做話題功能的產品，功能十分的全面，但我們也能夠發現抖音做的設計創新點。
1. 相同點
（1）都是多觸發入口：A.點擊“#”圖標按鈕；B.在文本區通過鍵盤輸入#；
（2）都能連續插入多個話題；
（3）話題屬于內容文本的一部分，會作為字符計入文本長度，顏色區別于正常文本，且可以移動光標通過鍵盤刪除或對已添加的話題進行直接編輯；
（4）支持用戶自定義話題；
（5）在話題列表都展示熱門和最近使用的話題；
2. 不同點
（1）#的數量不同：微博有2個#號，抖音只有1個#號；
（2）鍵盤輸入#后的交互效果不同：微博輸入#后跳轉話題列表頁面，抖音輸入#后停留在當前頁；
（3）話題頁顯示方式不同：微博是在新頁面打開，可進行分類篩選和搜索；抖音是根據用戶操作在當前頁擴展了一塊區域進行展示（漸進顯示原則）；
（4）直接輸入話題時，確認結束輸入的方式不同：微博輸入后一個“#”確認輸入完成，但仍會跳轉話題列表頁面，需要點擊取消返回發布頁（可以當做bug了）。抖音輸入空格后，即可確認輸入話題完畢。
03 發布完成后添加話題
脈脈的做法則是在發布成功后再彈出“添加主題”彈窗，基于推薦策略，讓用戶選擇要發布的主題。在用戶成功完成一項任務后的契機，讓用戶添加話題，概率可能更高一點。
04 PC端的處理方法思考
雖然移動優先，我們還是可以研究下PC端的處理方法，進行對比、開闊思路。因為話題的說法更適合C端用戶，這里主要調研了“添加標簽”這一功能，包括頭條號、微信公眾號、百家號等后臺產品。
1值得注意的設計點
（1）標簽確認方式：回車和空格（花瓣支持兩種，其他都是僅支持回車確認）
（2）標簽數量：一般是5個；
（3）標簽長度和超長處理
- 最大長度：一般是10-15不等；
- 超長顯示：彈性長度，完整顯示規定長度內的所有輸入內容；顯示“部分內容+…”。明顯完整顯示更好。
- 超長提示/處理：有彈窗提示（頭條號），也有在頁面內的輸入框下方區域進行提示（微信公眾號），還有的不提示直接刪除多余的內容（百家號）；
（4）刪除方式：A.鍵盤的BackSpace鍵(退格鍵)和Delete鍵(刪除鍵)；B.鼠標點擊“x”或整個標簽；
（5）修改已填入的標簽：目前均不支持對已填入的標簽進行修改，只能刪除后重新輸入，可以優化；
05 結語
體驗好壞的評價標準很多，但是和功能的多少并無直接關聯，適合的才是最好的，希望本文能在工作和設計時幫助到你。
#專欄作家#
張鵬濤TAO，人人都是產品經理專欄作家。關注電商、教育領域，擅長后臺產品設計、用戶體驗設計。
本文原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自 Unsplash，基于CC0協議
- 目前還沒評論，等你發揮！
