添加#話題#應注意的設計細節

看到“#”並不陌生,比如在撥打客服電話時,會被要求輸入#加一串數字,或以#結束。發微博時選擇話題也有用到,在微博中, #文本文本# 表示話題。比如輸入:我很#開心#。然後發送,你會發現#開心#變成了一個超鏈接按鈕。點擊這個按鈕,你就會進入關於“開心”的話題,看到所有包含#開心#的微博。極大的方便了用戶查找同類或同話題微博。

體驗了幾個APP,發現“添加話題”裡面的設計細節真是不少,下面結合例子說明。


添加#話題#應注意的設計細節


微視和Keep

添加#話題#應注意的設計細節

微視發佈視頻和Keep發佈新動態屬於功能較簡單的,都只能添加一個話題。他們都有獨立的觸發入口和顯示位置,但微視的尺寸更小、位置相對更隱蔽一些,當然這也和微視要兼顧其他功能有關。

在選擇話題頁,均有搜索功能,Keep因為話題較多,增加了分類篩選功能,微視則沒有。此外,微視也不支持用戶新建/自定義話題。如要取消話題,二者都需要到選擇話題頁面進行取消。

新浪微博和抖音

新浪微博恐怕是國內較早一批做話題功能的,功能明顯更全面。但我們也很容易發現抖音的設計創新點。

添加#話題#應注意的設計細節

相同點:

(1)都是多觸發入口:點擊“#按鈕”,以及鍵盤輸入#均可觸發;

(2)都能插入多個話題;

(3)話題屬於內容文本的一部分,作為字符計入文本長度,顏色區別於正常文本,且可以通過鍵盤刪除或移動光標對已添加的話題進行直接編輯;

(4)支持用戶自定義話題;

(5)在話題列表都展示熱門和最近使用的話題;

不同點:

(1)#的數量不同:微博有2個#號,抖音只有1個#號;

(2)鍵盤輸入#後的交互效果不同:微博輸入#後跳轉話題列表頁面,抖音輸入#後停留在當前頁;

(3)話題頁顯示方式不同:微博是在新頁面打開,可進行分類篩選和搜索;抖音是根據用戶操作在當前頁擴展了一塊區域進行展示(漸進顯示原則);

(4)直接輸入話題時,確認結束輸入的方式不同:微博輸入後一個“#”確認輸入完成,但仍會跳轉話題列表頁面,需要點擊取消返回發佈頁(可以當做bug了)。抖音輸入空格後,即可確認輸入話題完畢。


脈脈

脈脈的做法則是在發佈成功後再彈出“添加主題”彈窗,基於推薦策略,讓用戶選擇要發佈的主題。

添加#話題#應注意的設計細節


PC端的處理方法

雖然移動至上,我們也可以研究下PC端的處理方法進行對比。這裡主要調研了“添加標籤”這一功能。

添加#話題#應注意的設計細節

幾個設計注意點:

(1)標籤確認方式:回車和空格(花瓣支持兩種,其他都是僅支持回車)

(2)標籤數量:一般是5個;

(3)標籤長度和超長處理:

最大長度一般是10-15不等;

超長顯示:彈性長度,顯示規定長度內的所有輸入內容;顯示部分內容+...;

超長提示/處理:有彈窗提示(頭條號),也有在頁面內輸入框附件進行提示(微信公眾號),還可以直接刪除多餘的內容(百家號);

(4)刪除方式:鍵盤的BackSpace鍵(退格鍵)和Delete鍵(刪除鍵),鼠標點擊“x”或整個標籤;

(5)修改已填入的標籤:目前均不支持對已填入的標籤進行修改;


結語

體驗好壞的評價標準和功能的多少無直接關聯,適合的才是最好的,希望本文能幫助到你。


分享到:


相關文章: