移動產品基礎模塊設計規範之表情（顏文字）鍵盤

05-06

最近的工作中，略有涉及一些表情鍵盤的相關工作。我們的產品在2.2.1版本的時候新增了自定義表情鍵盤，在這個過程中，略有一些思考和體會，分享給大家！

一、表情類型的分類

1、從表情版權方面來看，有三種類型：第三方、自定義或者購買

（1）第三方表情

第三方表情字元大多採用 Emoji 表情。繪文字（日語：絵文字/えもじ emoji）是日本在無線通信中所使用的視覺情感符號，最早由栗田穰崇（Shigetaka Kurita）創作，繪意指圖形，文字則是圖形的隱喻，可用來代表多種表情，如笑臉表示笑、蛋糕表示食物等。

並且 Emoji Unicode 編碼為 E63E 到 E757，而在 Shift-JIS 編碼則是從 F89F 到 F9FC。自蘋果公司發布的 iOS 5 輸入法中加入了 Emoji 後，這種表情符號開始席捲全球，目前 Emoji 已被大多數現代計算機系統所兼容的 Unicode 編碼採納，普遍應用於各種手機簡訊和社交網路中。

感興趣的話，大家可以通過這個網站，詳細了解 Emoji 的具體內容。會有不少收穫的，比如 Emoji 針對不同的平台、甚至是不同的產品訂製表情、供其使用。你還會發現 Android 的表情竟然比 iOS 的多近 300 個；不過這並不影響公共部分（約2100個）的使用，其實大多數系統以及應用都會選擇通用的近 200 個表情，作為常用表情。

（2）自定義表情

自定義表情，大多是企業針對產品，自行設計表情，供用戶使用（付費使用），比較成功的是 Line 的模式。

（3）購買版權

並不是自家公司設計，而是向他人購買版權後植入到產品中。具體說，微信中的這幾個表情就是微信向他人購買的。直到現在還很火。

2、從表情的表現形式上來看，有兩種類型：靜態和動態

很容易理解，就和字面意思一樣，分為動靜兩種狀態。

相較靜態表情而言，動態表情有更好的擴展性和趣味性，更能促進人與人之間的交流和溝通。

二、表情鍵盤的分類

顧名思義，與文字鍵盤類似，表情鍵盤就是能夠輸入表情，並發送給他人，促進交流、溝通，也能表現自己的思想、心情等等。

根據我自己的觀察，我把表情鍵盤氛圍四種類型：系統鍵盤、第三方輸入法鍵盤、自定義鍵盤以及混合鍵盤。

1、系統鍵盤

你一定會用到系統鍵盤，比如 iPhone 的或者 Nexus 5 的。另外，Android 廠商也會自定義系統級的鍵盤，比如華為、小米等等。

2、第三方輸入法鍵盤

這個我用的比較少，用過的比如百度、搜狗的輸入法，中都會帶表情鍵盤。

3、自定義鍵盤

這種類型的產品很多，大多是應用級的，比如下面（三中）提到的。嚴格意義上來說，第三方輸入法鍵盤也是在應用級上的自定義鍵盤。

4、系統和自定義混合

這種類型，我目前看到的不多，只發現微信一家是這樣。微信應該是獲取了系統的表情位置（或者是用戶的使用數據引起的），將其放到自定義的鍵盤上；並且，自定義鍵盤中包含微信自家的表情。

三、表情鍵盤產品解析

就像上面第二部分所描述的，我將表情鍵盤分為兩大類：系統級和應用級。

1、系統級

iOS 下的 iPhone、iPad 等產品；Android 下的各種產品，Google 的產品、第三方手機廠商、Pad 生產商等等。

2、應用級

應用級別，各個應用。比如：

輸入法應用，如百度輸入法、搜狗輸入法…
Facebook Messager、WhatsApp、Skype、Line、BearyChat…
手機QQ、微信、微博、釘釘、荔枝fm…

四、如何規劃自定義表情鍵盤

確定產品（功能）定義和定位；
規劃產品（你懂的）；
開發評估（特別是位元組、存儲相關）
找到符合定位的表情；
設計階段（排版、輸入、展示等）；
實現階段（開發）；
測試階段（針對以上進行測試）。

以上是大致的過程，具體的規劃我接下來分開講一下。

1、確定產品（功能）定義和定位

首先，在早期版本中，我們的產品有提過在發布內容描述以及評論中增加系統表情支持，但由於前任產品在這方面和開發溝通不暢，結果是沒有繼續往下推進。處理的結果是，客戶端以及服務端對錶情字元做了閹割處理——完全限制輸入。

然後，在2.2.1版本規劃前，我做了簡單的測試。由於客戶端以及服務端限制有漏洞，我巧妙的避開了規則，發布了帶表情的內容，效果還不錯，有很多用戶用表情字元跟進評論。

最後，考慮到系統表情、第三方輸入法的使用體驗不太順暢。另外，考慮到用戶常用表情的問題。所以決定增加自定義表情鍵盤。

2、規劃產品（你懂的）

這部分基本上是我們常涉及到的內容，比如競品分析，主要是邏輯、交互、UI等方面的分析和規劃。和運營溝通過之後，我們暫時決定不對錶情字元進行分組。結合對其他產品中常用表情字元的分析，以及當前產品運營提出的建議，這個版本選了81個在 iOS、Android 等平台常用的表情。排版和布局的方案由設計師解決了。

3、開發評估

這裡主要的問題是位元組、存儲相關，涉及到產品對輸入字數的要求；客戶端對文字、表情字元轉碼的要求（比如一個表情字元是多少個位元組的問題，這關係到客戶端輸入的限制）；服務端的最大以及最小輸入限制；表情字元是在客戶端還是在服務端；表情字元之間的命名規則以及對應方式等。

4、找到符合定位的表情

這部分試運營童鞋幫我解決的，我沒有他們感性，也沒有他們了解用戶，所以由他們協助是最好的。我提供了 Emoji 的官網，他們來幫忙。

5、設計階段

這部分主要涉及排版、輸入、展示（輸出）等相關問題。具體涉及到：自定義表情、系統表情、輸入文字之間的比例關係、對其關係，前面提到的針對適配的設計；表情圖片的處理等。

重點提一個問題，有些產品中，特別是在評論的時候，表情字元的出發控制項是在輸入內容的區域的，原因是實現系統輸入法和自定義輸入法之間的切換；當然，也可以做到系統輸入法的上面，自定義表情鍵盤控制項也在這一欄中，這是普遍的做法。早起網易客戶端的處理方式就是在輸入內容區域的。

6、實現階段

到這部分，你會發現，問題已經很少了。因為在準備的階段，就基本上把該想到的問題，都考慮到了。

7、測試階段

等著測試大大懟產品可開發就可以了，其實，並不是。測試在沒有進測試階段的時候，就已經針對需求給出了自己的意見和建議，當然，都是結合在前面的過程中的。

最後

規划過程中需要注意的問題，主要有：

1、是否需要分組

對比三中的產品，你對發現大多數都是有分組的，原因在於：一是表情多；二是減少用戶的認知難度；三是方便操作。大家可以對比下微信表情思考一下，或許你還能想到更多。

2、如何布局與刪除表情

這涉及到表情在客戶端的適配問題，特別是結合刪除控制項。觀察中發現，刪除控制項多會在最後一排的最後一個表情位置，這會給表情布局帶來一定的開發難度。不過後來思考中認識到，這個難度並不大，其實就是對錶情進行分頁控制，並且把刪除控制項放到最後一個位置就可以了。但會增加開發在計算方面的工作量，體力活比較多。

3、翻頁展示位置

和上面2的問題相關，需要結合刪除控制項一起思考。主要是在布局、UI等的問題方面。

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

一般情況下，表情字元是會在客戶端的，即便是在線的表情，也是網路獲取後存到本地的。資料庫中存下的只是這個表情的名稱或者對應的編碼，從而為在另外的設備中進行解碼查看提供找到本地表情的「鑰匙」。

5、表情編碼以及字元問題

名稱或者編碼需要控制，盡量不要佔太多位。本次規劃中，和開發溝通後，通過名稱（iOS 和 Android 命名規則相同）作為關聯，每個表情字元佔12位（按 utf8 即 4個漢字）。

6、表情命名問題

命名後要考慮結合輸入漢字與系統表情的情況下，輸入框對應的數據欄位存儲能力（考慮客戶端以及服務端），比如客戶端的最大輸入限制，服務端最小輸入限制以及最大輸入限制。

這麼考慮有兩個原因：

產品需求；
安全考慮。

推薦閱讀

表情經濟學：表情的背後是什麼？

http://www.geekpark.net/topics/189564