筆者在體驗(yàn)了幾個(gè)APP的“發(fā)布”功能，發(fā)現(xiàn)單是關(guān)于“添加話(huà)題”的設(shè)計(jì)細(xì)節(jié)就不少，下面結(jié)合具體例子說(shuō)明。

“#”號(hào)并不陌生，比如在撥打客服電話(huà)時(shí)，會(huì)被要求輸入#加一串?dāng)?shù)字，或以#結(jié)束確認(rèn)。

發(fā)微博時(shí)選擇話(huà)題也有用到“#”號(hào)。在微博中， #文本文本# 表示話(huà)題。比如輸入：我很#開(kāi)心#。然后發(fā)送，就會(huì)發(fā)現(xiàn)#開(kāi)心#變成了一個(gè)超鏈接按鈕。點(diǎn)擊這個(gè)鏈接，就會(huì)進(jìn)入關(guān)于“開(kāi)心”的話(huà)題，看到所有包含#開(kāi)心#的微博，極大的方便了用戶(hù)查找同類(lèi)或同話(huà)題微博。對(duì)平臺(tái)而言，也是構(gòu)建內(nèi)容推薦系統(tǒng)的一部分。

體驗(yàn)了幾個(gè)APP的“發(fā)布”功能，發(fā)現(xiàn)單是關(guān)于“添加話(huà)題”的設(shè)計(jì)細(xì)節(jié)就不少，下面結(jié)合具體例子說(shuō)明。

01 添加單個(gè)話(huà)題

上圖是Keep發(fā)布新動(dòng)態(tài)和微視發(fā)布視頻的截圖。二者都屬于功能比較簡(jiǎn)單的，都只能添加一個(gè)話(huà)題。他們都有獨(dú)立于文本內(nèi)容區(qū)的點(diǎn)擊入口和顯示位置。Keep使用了通欄列表，而微視的尺寸更小、位置相對(duì)更隱蔽一些，當(dāng)然這也和微視要兼顧其他功能有關(guān)。

在選擇話(huà)題頁(yè)，均有搜索功能，Keep還對(duì)話(huà)題進(jìn)行了分類(lèi)，增加了分類(lèi)篩選功能，微視則是單純的話(huà)題列表。此外，微視也不支持用戶(hù)新建自定義話(huà)題。如過(guò)用戶(hù)要取消話(huà)題，都需要到選擇話(huà)題頁(yè)面進(jìn)行取消，有點(diǎn)不方便。

02 添加多個(gè)話(huà)題

新浪微博和抖音可以放在一起進(jìn)行比較。微博恐怕是國(guó)內(nèi)較早一批做話(huà)題功能的產(chǎn)品，功能十分的全面，但我們也能夠發(fā)現(xiàn)抖音做的設(shè)計(jì)創(chuàng)新點(diǎn)。

1. 相同點(diǎn)

（1）都是多觸發(fā)入口：A.點(diǎn)擊“#”圖標(biāo)按鈕；B.在文本區(qū)通過(guò)鍵盤(pán)輸入#；

（2）都能連續(xù)插入多個(gè)話(huà)題；

（3）話(huà)題屬于內(nèi)容文本的一部分，會(huì)作為字符計(jì)入文本長(zhǎng)度，顏色區(qū)別于正常文本，且可以移動(dòng)光標(biāo)通過(guò)鍵盤(pán)刪除或?qū)σ烟砑拥脑?huà)題進(jìn)行直接編輯；

（4）支持用戶(hù)自定義話(huà)題；

（5）在話(huà)題列表都展示熱門(mén)和最近使用的話(huà)題；

2. 不同點(diǎn)

（1）#的數(shù)量不同：微博有2個(gè)#號(hào)，抖音只有1個(gè)#號(hào)；

（2）鍵盤(pán)輸入#后的交互效果不同：微博輸入#后跳轉(zhuǎn)話(huà)題列表頁(yè)面，抖音輸入#后停留在當(dāng)前頁(yè)；

（3）話(huà)題頁(yè)顯示方式不同：微博是在新頁(yè)面打開(kāi)，可進(jìn)行分類(lèi)篩選和搜索；抖音是根據(jù)用戶(hù)操作在當(dāng)前頁(yè)擴(kuò)展了一塊區(qū)域進(jìn)行展示（漸進(jìn)顯示原則）；

（4）直接輸入話(huà)題時(shí)，確認(rèn)結(jié)束輸入的方式不同：微博輸入后一個(gè)“#”確認(rèn)輸入完成，但仍會(huì)跳轉(zhuǎn)話(huà)題列表頁(yè)面，需要點(diǎn)擊取消返回發(fā)布頁(yè)（可以當(dāng)做bug了）。抖音輸入空格后，即可確認(rèn)輸入話(huà)題完畢。

03 發(fā)布完成后添加話(huà)題

脈脈的做法則是在發(fā)布成功后再?gòu)棾觥疤砑又黝}”彈窗，基于推薦策略，讓用戶(hù)選擇要發(fā)布的主題。在用戶(hù)成功完成一項(xiàng)任務(wù)后的契機(jī)，讓用戶(hù)添加話(huà)題，概率可能更高一點(diǎn)。

04 PC端的處理方法思考

雖然移動(dòng)優(yōu)先，我們還是可以研究下PC端的處理方法，進(jìn)行對(duì)比、開(kāi)闊思路。因?yàn)樵?huà)題的說(shuō)法更適合C端用戶(hù)，這里主要調(diào)研了“添加標(biāo)簽”這一功能，包括頭條號(hào)、微信公眾號(hào)、百家號(hào)等后臺(tái)產(chǎn)品。

1值得注意的設(shè)計(jì)點(diǎn)

（1）標(biāo)簽確認(rèn)方式：回車(chē)和空格（花瓣支持兩種，其他都是僅支持回車(chē)確認(rèn)）

（2）標(biāo)簽數(shù)量：一般是5個(gè)；

（3）標(biāo)簽長(zhǎng)度和超長(zhǎng)處理

• 最大長(zhǎng)度：一般是10-15不等；
• 超長(zhǎng)顯示：彈性長(zhǎng)度，完整顯示規(guī)定長(zhǎng)度內(nèi)的所有輸入內(nèi)容；顯示“部分內(nèi)容+…”。明顯完整顯示更好。
• 超長(zhǎng)提示/處理：有彈窗提示（頭條號(hào)），也有在頁(yè)面內(nèi)的輸入框下方區(qū)域進(jìn)行提示（微信公眾號(hào)），還有的不提示直接刪除多余的內(nèi)容（百家號(hào)）；

（4）刪除方式：A.鍵盤(pán)的BackSpace鍵(退格鍵)和Delete鍵(刪除鍵)；B.鼠標(biāo)點(diǎn)擊“x”或整個(gè)標(biāo)簽；

（5）修改已填入的標(biāo)簽：目前均不支持對(duì)已填入的標(biāo)簽進(jìn)行修改，只能刪除后重新輸入，可以?xún)?yōu)化；

05 結(jié)語(yǔ)

體驗(yàn)好壞的評(píng)價(jià)標(biāo)準(zhǔn)很多，但是和功能的多少并無(wú)直接關(guān)聯(lián)，適合的才是最好的，希望本文能在工作和設(shè)計(jì)時(shí)幫助到你。

#專(zhuān)欄作家#

張鵬濤TAO，人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家。關(guān)注電商、教育領(lǐng)域，擅長(zhǎng)后臺(tái)產(chǎn)品設(shè)計(jì)、用戶(hù)體驗(yàn)設(shè)計(jì)。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash，基于CC0協(xié)議