app發(fā)布內(nèi)容時(shí)-添加#話題#應(yīng)注意的設(shè)計(jì)細(xì)節(jié)

5/5app發(fā)布內(nèi)容時(shí)，添加#話題#應(yīng)注意的設(shè)計(jì)細(xì)節(jié)筆者在體驗(yàn)了幾個(gè)APP的“發(fā)布”功能，發(fā)現(xiàn)單是關(guān)于“添加話題”的設(shè)計(jì)細(xì)節(jié)就不少，下面結(jié)合具體例子說明。“#”號并不陌生，比如在撥打客服電話時(shí)，會被要求輸入#加一串?dāng)?shù)字，或以#結(jié)束確認(rèn)。發(fā)微博時(shí)選擇話題也有用到“#”號。在微博中，#文本文本#表示話題。比如輸入：我很#開心#。然后發(fā)送，就會發(fā)現(xiàn)#開心#變成了一個(gè)超鏈接按鈕。點(diǎn)擊這個(gè)鏈接，就會進(jìn)入關(guān)于“開心”的話題，看到所有包含#開心#的微博，極大的方便了用戶查找同類或同話題微博。對平臺而言，也是構(gòu)建內(nèi)容推薦系統(tǒng)的一部分。體驗(yàn)了幾個(gè)APP的“發(fā)布”功能，發(fā)現(xiàn)單是關(guān)于“添加話題”的設(shè)計(jì)細(xì)節(jié)就不少，下面結(jié)合具體例子說明。01添加單個(gè)話題上圖是Keep發(fā)布新動(dòng)態(tài)和微視發(fā)布視頻的截圖。二者都屬于功能比較簡單的，都只能添加一個(gè)話題。他們都有獨(dú)立于文本內(nèi)容區(qū)的點(diǎn)擊入口和顯示位置。Keep使用了通欄列表，而微視的尺寸更小、位置相對更隱蔽一些，當(dāng)然這也和微視要兼顧其他功能有關(guān)。在選擇話題頁，均有搜索功能，Keep還對話題進(jìn)行了分類，增加了分類篩選功能，微視則是單純的話題列表。此外，微視也不支持用戶新建自定義話題。如過用戶要取消話題，都需要到選擇話題頁面進(jìn)行取消，有點(diǎn)不方便。02添加多個(gè)話題新浪微博和抖音可以放在一起進(jìn)行比較。微博恐怕是國內(nèi)較早一批做話題功能的產(chǎn)品，功能十分的全面，但我們也能夠發(fā)現(xiàn)抖音做的設(shè)計(jì)創(chuàng)新點(diǎn)。1.相同點(diǎn)（1）都是多觸發(fā)入口：A.點(diǎn)擊“#”圖標(biāo)按鈕；B.在文本區(qū)通過鍵盤輸入#；（2）都能連續(xù)插入多個(gè)話題；（3）話題屬于內(nèi)容文本的一部分，會作為字符計(jì)入文本長度，顏色區(qū)別于正常文本，且可以移動(dòng)光標(biāo)通過鍵盤刪除或?qū)σ烟砑拥脑掝}進(jìn)行直接編輯；（4）支持用戶自定義話題；（5）在話題列表都展示熱門和最近使用的話題；2.不同點(diǎn)（1）#的數(shù)量不同：微博有2個(gè)#號，抖音只有1個(gè)#號；（2）鍵盤輸入#后的交互效果不同：微博輸入#后跳轉(zhuǎn)話題列表頁面，抖音輸入#后停留在當(dāng)前頁；（3）話題頁顯示方式不同：微博是在新頁面打開，可進(jìn)行分類篩選和搜索；抖音是根據(jù)用戶操作在當(dāng)前頁擴(kuò)展了一塊區(qū)域進(jìn)行展示（漸進(jìn)顯示原則）；（4）直接輸入話題時(shí)，確認(rèn)結(jié)束輸入的方式不同：微博輸入后一個(gè)“#”確認(rèn)輸入完成，但仍會跳轉(zhuǎn)話題列表頁面，需要點(diǎn)擊取消返回發(fā)布頁（可以當(dāng)做bug了）。抖音輸入空格后，即可確認(rèn)輸入話題完畢。03發(fā)布完成后添加話題脈脈的做法則是在發(fā)布成功后再彈出“添加主題”彈窗，基于推薦策略，讓用戶選擇要發(fā)布的主題。在用戶成功完成一項(xiàng)任務(wù)后的契機(jī)，讓用戶添加話題，概率可能更高一點(diǎn)。04PC端的處理方法思考雖然移動(dòng)優(yōu)先，我們還是可以研究下PC端的處理方法，進(jìn)行對比、開闊思路。因?yàn)樵掝}的說法更適合C端用戶，這里主要調(diào)研了“添加標(biāo)簽”這一功能，包括頭條號、微信公眾號、百家號等后臺產(chǎn)品。1值得注意的設(shè)計(jì)點(diǎn)（1）標(biāo)簽確認(rèn)方式：回車和空格（花瓣支持兩種，其他都是僅支持回車確認(rèn)）（2）標(biāo)簽數(shù)量：一般是5個(gè)；（3）標(biāo)簽長度和超長處理最大長度：一般是10-15不等；超長顯示：彈性長度，完整顯示規(guī)定長度內(nèi)的所有輸入內(nèi)容；顯示“部分內(nèi)容+”。明顯完整顯示更好。超長提示/處理：有彈窗提示（頭條號），也有在頁面內(nèi)的輸入框下方區(qū)域進(jìn)行提示（微信公眾號），還有的不提示直接刪除多余的內(nèi)容（百家號）；（4）刪除方式：A.鍵盤的BackSpace鍵(退格鍵)和Delete鍵(刪除鍵)；B.鼠標(biāo)點(diǎn)擊“x”或整個(gè)標(biāo)簽；（5）修改已填入的標(biāo)簽：目前均不支持對已填入的標(biāo)簽