輸入#號(hào)交互,還能變出什么花兒來(lái)?

4 評(píng)論 10022 瀏覽 24 收藏 3 分鐘

最近做了動(dòng)態(tài)話題功能,發(fā)現(xiàn)小小一個(gè)“輸入#號(hào)”的動(dòng)作也有很多細(xì)節(jié)。

在手動(dòng)輸入#號(hào)創(chuàng)建一個(gè)話題的時(shí)候,需要一邊輸入一邊給出話題實(shí)時(shí)搜索建議。PC上常見(jiàn)的交互是在輸入的位置再疊加一個(gè)小浮層,這樣既不影響用戶繼續(xù)打字,也方便查看點(diǎn)選。

640-17

但到了手機(jī)上,鍵盤的彈出已經(jīng)占據(jù)了大半壁江山,此時(shí)若在輸入的位置再貼一塊膏藥,輸入空間就更顯局促,感覺(jué)不夠優(yōu)雅。

所以在手機(jī)上的常見(jiàn)交互是,輸入#號(hào)的同時(shí)就跳轉(zhuǎn)到一個(gè)新頁(yè)面,在新頁(yè)面上你可以繼續(xù)輸入或者選擇下面的搜索結(jié)果。

weibo#

這種輸入體驗(yàn)顯然沒(méi)有PC端那么自然,因?yàn)樗鼘儆跊](méi)有預(yù)期的跳轉(zhuǎn)——#號(hào)看上去和鍵盤上的其他符號(hào)沒(méi)有區(qū)別,可偏偏點(diǎn)擊它的時(shí)候就跳到了一個(gè)新界面,有種被迫停一下的感覺(jué)。

發(fā)現(xiàn)還是有一些敢于吃螃蟹的設(shè)計(jì),果斷地將PC端的交互沿用到了手機(jī)端,比如twitter:

輸入#號(hào)后,在鍵盤之上即刻出現(xiàn)一個(gè)半浮層。你可以在當(dāng)前界面繼續(xù)打字,或者選擇半浮層中的搜索結(jié)果。當(dāng)你想查看更多向上滾動(dòng)時(shí),才會(huì)推入一個(gè)新頁(yè)面。

twitter#

雖然輸入空間看上去變得更局促,但能明顯體驗(yàn)到這種減少跳轉(zhuǎn)的設(shè)計(jì)所帶來(lái)的輸入流暢度提升!

移動(dòng)設(shè)備由于屏幕較小,當(dāng)一屏內(nèi)無(wú)法同時(shí)承載多種任務(wù)的交互界面時(shí),出于“本能”設(shè)計(jì)師通常會(huì)將一些任務(wù)新開(kāi)一個(gè)界面去完成,好讓單個(gè)頁(yè)面“看上去更簡(jiǎn)單”。

然而看上去簡(jiǎn)單和用起來(lái)簡(jiǎn)單并不能劃等號(hào)。

 

俞靜(微信公眾號(hào):聽(tīng)音樂(lè)做設(shè)計(jì)),現(xiàn)任網(wǎng)易云音樂(lè)交互負(fù)責(zé)人。

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 微信和QQ的@不也類似嗎?

    回復(fù)
  2. 其實(shí)我更關(guān)注的是,手機(jī)打字的動(dòng)態(tài)圖是如何實(shí)現(xiàn)的?用的什么軟件?

    回復(fù)
    1. 部分手機(jī)(據(jù)我所知有錘子和華為)自帶錄制屏幕的功能,APP的話拍大師就可以用。

      來(lái)自重慶 回復(fù)
  3. 完全不知道還有#鍵這個(gè)功能 ?

    來(lái)自上海 回復(fù)