精品国产一区二区三区无码a,影音先锋色成人资源网站

搜索

APP

起點課堂會員權(quán)益

職業(yè)體系課特權(quán)

線下行業(yè)大會特權(quán)

個人IP打造特權(quán)

30+門專項技能課

1300+專題課程

12場職場軟技能直播

12場求職輔導直播

12場專業(yè)技能直播

會員專屬社群

榮耀標識

發(fā)布

注冊 | 登錄

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

鄭幾塊Yechiel

2017-07-25

0 評論 5839 瀏覽 14 收藏

12 分鐘

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

一、表情類型的分類

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

（1）第三方表情

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

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

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

（2）自定義表情

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

（3）購買版權(quán)

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

2、從表情的表現(xiàn)形式上來看，有兩種類型：靜態(tài)和動態(tài)

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

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

二、表情鍵盤的分類

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

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

1、系統(tǒng)鍵盤

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

2、第三方輸入法鍵盤

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

3、自定義鍵盤

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

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

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

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

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

1、系統(tǒng)級

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

2、應(yīng)用級

應(yīng)用級別，各個應(yīng)用。比如：

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

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

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

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

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

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

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

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

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

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

3、開發(fā)評估

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

4、找到符合定位的表情

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

5、設(shè)計階段

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

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

6、實現(xiàn)階段

到這部分，你會發(fā)現(xiàn)，問題已經(jīng)很少了。因為在準備的階段，就基本上把該想到的問題，都考慮到了。

7、測試階段

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

最后

規(guī)劃過程中需要注意的問題，主要有：

1、是否需要分組

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

2、如何布局與刪除表情

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