移動(dòng)產(chǎn)品基礎(chǔ)模塊設(shè)計(jì)規(guī)范之表情(顏文字)鍵盤

0 評(píng)論 6106 瀏覽 14 收藏 12 分鐘

最近的工作中略有涉及一些表情鍵盤的相關(guān)工作——我們的產(chǎn)品在2.2.1版本新增了自定義表情鍵盤,在這個(gè)過(guò)程中,我略有一些思考和體會(huì),分享給大家!

一、表情類型的分類

1、從表情版權(quán)方面來(lái)看,有三種類型:第三方、自定義或者購(gòu)買

(1)第三方表情

第三方表情字符大多采用 Emoji 表情。繪文字(日語(yǔ):絵文字/えもじ emoji)是日本在無(wú)線通信中所使用的視覺(jué)情感符號(hào),最早由栗田穰崇(Shigetaka Kurita)創(chuàng)作,繪意指圖形,文字則是圖形的隱喻,可用來(lái)代表多種表情,如笑臉表示笑、蛋糕表示食物等。

并且 Emoji Unicode 編碼為 E63E 到 E757,而在 Shift-JIS 編碼則是從 F89F 到 F9FC。自蘋果公司發(fā)布的 iOS 5 輸入法中加入了 Emoji 后,這種表情符號(hào)開始席卷全球,目前 Emoji 已被大多數(shù)現(xiàn)代計(jì)算機(jī)系統(tǒng)所兼容的 Unicode 編碼采納,普遍應(yīng)用于各種手機(jī)短信和社交網(wǎng)絡(luò)中。

感興趣的話,大家可以通過(guò)這個(gè)網(wǎng)站,詳細(xì)了解 Emoji 的具體內(nèi)容。會(huì)有不少收獲的,比如 Emoji 針對(duì)不同的平臺(tái)、甚至是不同的產(chǎn)品訂制表情、供其使用。你還會(huì)發(fā)現(xiàn) Android 的表情竟然比 iOS 的多近 300 個(gè);不過(guò)這并不影響公共部分(約2100個(gè))的使用,其實(shí)大多數(shù)系統(tǒng)以及應(yīng)用都會(huì)選擇通用的近 200 個(gè)表情,作為常用表情。

(2)自定義表情

自定義表情,大多是企業(yè)針對(duì)產(chǎn)品,自行設(shè)計(jì)表情,供用戶使用(付費(fèi)使用),比較成功的是 Line 的模式。

(3)購(gòu)買版權(quán)

并不是自家公司設(shè)計(jì),而是向他人購(gòu)買版權(quán)后植入到產(chǎn)品中。具體說(shuō),微信中的這幾個(gè)表情就是微信向他人購(gòu)買的。直到現(xiàn)在還很火。

2、從表情的表現(xiàn)形式上來(lái)看,有兩種類型:靜態(tài)和動(dòng)態(tài)

很容易理解,就和字面意思一樣,分為動(dòng)靜兩種狀態(tài)。

相較靜態(tài)表情而言,動(dòng)態(tài)表情有更好的擴(kuò)展性和趣味性,更能促進(jìn)人與人之間的交流和溝通。

二、表情鍵盤的分類

顧名思義,與文字鍵盤類似,表情鍵盤就是能夠輸入表情,并發(fā)送給他人,促進(jìn)交流、溝通,也能表現(xiàn)自己的思想、心情等等。

根據(jù)我自己的觀察,我把表情鍵盤氛圍四種類型:系統(tǒng)鍵盤、第三方輸入法鍵盤、自定義鍵盤以及混合鍵盤。

1、系統(tǒng)鍵盤

你一定會(huì)用到系統(tǒng)鍵盤,比如 iPhone 的或者 Nexus 5 的。另外,Android 廠商也會(huì)自定義系統(tǒng)級(jí)的鍵盤,比如華為、小米等等。

2、第三方輸入法鍵盤

這個(gè)我用的比較少,用過(guò)的比如百度、搜狗的輸入法,中都會(huì)帶表情鍵盤。

3、自定義鍵盤

這種類型的產(chǎn)品很多,大多是應(yīng)用級(jí)的,比如下面(三中)提到的。嚴(yán)格意義上來(lái)說(shuō),第三方輸入法鍵盤也是在應(yīng)用級(jí)上的自定義鍵盤。

4、系統(tǒng)和自定義混合

這種類型,我目前看到的不多,只發(fā)現(xiàn)微信一家是這樣。微信應(yīng)該是獲取了系統(tǒng)的表情位置(或者是用戶的使用數(shù)據(jù)引起的),將其放到自定義的鍵盤上;并且,自定義鍵盤中包含微信自家的表情。

三、表情鍵盤產(chǎn)品解析

就像上面第二部分所描述的,我將表情鍵盤分為兩大類:系統(tǒng)級(jí)和應(yīng)用級(jí)。

1、系統(tǒng)級(jí)

iOS 下的 iPhone、iPad 等產(chǎn)品;Android 下的各種產(chǎn)品,Google 的產(chǎn)品、第三方手機(jī)廠商、Pad 生產(chǎn)商等等。

2、應(yīng)用級(jí)

應(yīng)用級(jí)別,各個(gè)應(yīng)用。比如:

  • 輸入法應(yīng)用,如百度輸入法、搜狗輸入法…
  • Facebook Messager、WhatsApp、Skype、Line、BearyChat…
  • 手機(jī)QQ、微信、微博、釘釘、荔枝fm…

四、如何規(guī)劃自定義表情鍵盤

  • 確定產(chǎn)品(功能)定義和定位;
  • 規(guī)劃產(chǎn)品(你懂的);
  • 開發(fā)評(píng)估(特別是字節(jié)、存儲(chǔ)相關(guān))
  • 找到符合定位的表情;
  • 設(shè)計(jì)階段(排版、輸入、展示等);
  • 實(shí)現(xiàn)階段(開發(fā));
  • 測(cè)試階段(針對(duì)以上進(jìn)行測(cè)試)。

以上是大致的過(guò)程,具體的規(guī)劃我接下來(lái)分開講一下。

1、確定產(chǎn)品(功能)定義和定位

首先,在早期版本中,我們的產(chǎn)品有提過(guò)在發(fā)布內(nèi)容描述以及評(píng)論中增加系統(tǒng)表情支持,但由于前任產(chǎn)品在這方面和開發(fā)溝通不暢,結(jié)果是沒(méi)有繼續(xù)往下推進(jìn)。處理的結(jié)果是,客戶端以及服務(wù)端對(duì)表情字符做了閹割處理——完全限制輸入。

然后,在2.2.1版本規(guī)劃前,我做了簡(jiǎn)單的測(cè)試。由于客戶端以及服務(wù)端限制有漏洞,我巧妙的避開了規(guī)則,發(fā)布了帶表情的內(nèi)容,效果還不錯(cuò),有很多用戶用表情字符跟進(jìn)評(píng)論。

最后,考慮到系統(tǒng)表情、第三方輸入法的使用體驗(yàn)不太順暢。另外,考慮到用戶常用表情的問(wèn)題。所以決定增加自定義表情鍵盤。

2、規(guī)劃產(chǎn)品(你懂的)

這部分基本上是我們常涉及到的內(nèi)容,比如競(jìng)品分析,主要是邏輯、交互、UI等方面的分析和規(guī)劃。和運(yùn)營(yíng)溝通過(guò)之后,我們暫時(shí)決定不對(duì)表情字符進(jìn)行分組。結(jié)合對(duì)其他產(chǎn)品中常用表情字符的分析,以及當(dāng)前產(chǎn)品運(yùn)營(yíng)提出的建議,這個(gè)版本選了81個(gè)在 iOS、Android 等平臺(tái)常用的表情。排版和布局的方案由設(shè)計(jì)師解決了。

3、開發(fā)評(píng)估

這里主要的問(wèn)題是字節(jié)、存儲(chǔ)相關(guān),涉及到產(chǎn)品對(duì)輸入字?jǐn)?shù)的要求;客戶端對(duì)文字、表情字符轉(zhuǎn)碼的要求(比如一個(gè)表情字符是多少個(gè)字節(jié)的問(wèn)題,這關(guān)系到客戶端輸入的限制);服務(wù)端的最大以及最小輸入限制;表情字符是在客戶端還是在服務(wù)端;表情字符之間的命名規(guī)則以及對(duì)應(yīng)方式等。

4、找到符合定位的表情

這部分試運(yùn)營(yíng)童鞋幫我解決的,我沒(méi)有他們感性,也沒(méi)有他們了解用戶,所以由他們協(xié)助是最好的。我提供了 Emoji 的官網(wǎng),他們來(lái)幫忙。

5、設(shè)計(jì)階段

這部分主要涉及排版、輸入、展示(輸出)等相關(guān)問(wèn)題。具體涉及到:自定義表情、系統(tǒng)表情、輸入文字之間的比例關(guān)系、對(duì)其關(guān)系,前面提到的針對(duì)適配的設(shè)計(jì);表情圖片的處理等。

重點(diǎn)提一個(gè)問(wèn)題,有些產(chǎn)品中,特別是在評(píng)論的時(shí)候,表情字符的出發(fā)控件是在輸入內(nèi)容的區(qū)域的,原因是實(shí)現(xiàn)系統(tǒng)輸入法和自定義輸入法之間的切換;當(dāng)然,也可以做到系統(tǒng)輸入法的上面,自定義表情鍵盤控件也在這一欄中,這是普遍的做法。早起網(wǎng)易客戶端的處理方式就是在輸入內(nèi)容區(qū)域的。

6、實(shí)現(xiàn)階段

到這部分,你會(huì)發(fā)現(xiàn),問(wèn)題已經(jīng)很少了。因?yàn)樵跍?zhǔn)備的階段,就基本上把該想到的問(wèn)題,都考慮到了。

7、測(cè)試階段

等著測(cè)試大大懟產(chǎn)品可開發(fā)就可以了,其實(shí),并不是。測(cè)試在沒(méi)有進(jìn)測(cè)試階段的時(shí)候,就已經(jīng)針對(duì)需求給出了自己的意見和建議,當(dāng)然,都是結(jié)合在前面的過(guò)程中的。

最后

規(guī)劃過(guò)程中需要注意的問(wèn)題,主要有:

1、是否需要分組

對(duì)比三中的產(chǎn)品,你對(duì)發(fā)現(xiàn)大多數(shù)都是有分組的,原因在于:一是表情多;二是減少用戶的認(rèn)知難度;三是方便操作。大家可以對(duì)比下微信表情思考一下,或許你還能想到更多。

2、如何布局與刪除表情

這涉及到表情在客戶端的適配問(wèn)題,特別是結(jié)合刪除控件。觀察中發(fā)現(xiàn),刪除控件多會(huì)在最后一排的最后一個(gè)表情位置,這會(huì)給表情布局帶來(lái)一定的開發(fā)難度。不過(guò)后來(lái)思考中認(rèn)識(shí)到,這個(gè)難度并不大,其實(shí)就是對(duì)表情進(jìn)行分頁(yè)控制,并且把刪除控件放到最后一個(gè)位置就可以了。但會(huì)增加開發(fā)在計(jì)算方面的工作量,體力活比較多。

3、翻頁(yè)展示位置

和上面2的問(wèn)題相關(guān),需要結(jié)合刪除控件一起思考。主要是在布局、UI等的問(wèn)題方面。

4、表情在本地還是客戶端

一般情況下,表情字符是會(huì)在客戶端的,即便是在線的表情,也是網(wǎng)絡(luò)獲取后存到本地的。數(shù)據(jù)庫(kù)中存下的只是這個(gè)表情的名稱或者對(duì)應(yīng)的編碼,從而為在另外的設(shè)備中進(jìn)行解碼查看提供找到本地表情的“鑰匙”。

5、表情編碼以及字符問(wèn)題

名稱或者編碼需要控制,盡量不要占太多位。本次規(guī)劃中,和開發(fā)溝通后,通過(guò)名稱(iOS 和 Android 命名規(guī)則相同)作為關(guān)聯(lián),每個(gè)表情字符占12位(按 utf8 即 4個(gè)漢字)。

6、表情命名問(wèn)題

命名后要考慮結(jié)合輸入漢字與系統(tǒng)表情的情況下,輸入框?qū)?yīng)的數(shù)據(jù)字段存儲(chǔ)能力(考慮客戶端以及服務(wù)端),比如客戶端的最大輸入限制,服務(wù)端最小輸入限制以及最大輸入限制。

這么考慮有兩個(gè)原因:

  1. 產(chǎn)品需求;
  2. 安全考慮。

推薦閱讀:《表情經(jīng)濟(jì)學(xué):表情的背后是什么?》

相關(guān)閱讀

移動(dòng)產(chǎn)品基礎(chǔ)模塊設(shè)計(jì)規(guī)范之注冊(cè)登錄

移動(dòng)產(chǎn)品基礎(chǔ)模塊設(shè)計(jì)規(guī)范之意見反饋

移動(dòng)產(chǎn)品基礎(chǔ)模塊設(shè)計(jì)規(guī)范之應(yīng)用緩存

移動(dòng)產(chǎn)品基礎(chǔ)模塊設(shè)計(jì)規(guī)范之應(yīng)用更新

 

題圖來(lái)自 攝圖網(wǎng),基于 CC0 協(xié)議

本文由人人都是產(chǎn)品經(jīng)理專欄作家@鄭幾塊??原創(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. 目前還沒(méi)評(píng)論,等你發(fā)揮!