Emoji絵文字/えもじ——多終端適配!

jano

 

現如今,emoji表情已經走入我們每個人的社交生活中,大多數現代計算機系統已經兼容emoji表情。今天,我們講一下emoji表情在QQ空間中各個客戶端的展示方案。

Emoji的歷史

emoji,也叫繪文字(日語:絵文字/えもじ emoji)是日本在無線通信中所使用的視覺情感符號,由栗田穰崇(Shigetaka Kurita)創作,並在日本網絡及手機用戶中流行。

自蘋果公司發布的ios5輸入法中加入了emoji後,這種表情符號開始席捲全球,普遍應用於各種手機短信和社交網絡中。

蘋果輸入法不停的迭代emoji表情,在ios8.3中,加入了同性家庭、以及對不同膚色人種的職業展示:

ios9.1中,蘋果加入了很多新的有趣的表情:

ios10.0輸入法中,將大部分表情重新設計,同時加入了單親家庭的emoji:

同時,各個手機客戶端也都支持emoji,不過每個系統有各自不同的設計效果:

Emoji展示方案

怎麼樣讓emoji表情在每個客戶端都能展示,並且有展示的一致性呢?我們的方案是將emoji表情改成圖片的形式。

由於emoji在各個系統上的設計不盡相同,為了體驗的一致性,也為了更美的展示,我們將蘋果設計的emoji表情作為規範。

展示方案的邏輯如下:

(1)用戶在設備中輸入emoji

(2)獲取用戶輸入的unicode編碼(每一個emoji表情都是一個或幾個unicode編碼組成,跟文字一樣)

(3)生成unicode編碼對應的圖片URL

(4)前台根據URL以及手機分辨率,展示表情圖片

那麼emoji表情對應的unicode碼是什麼呢?

用手機掃描這個二維碼,在輸入框中輸入emoji表情,可以查看到對應的HTML實體,在這裡HTML實體可以近似看成unicode編碼。

可以看到一些emoji表情並不是由單一的unicode碼組成,而是有多個unicode碼通過連接符號組成。

比如這個表情,就是由一個原生的表情加上膚色組成。

Emoji畫像取得的方法

在ios8.3之前,我們要取得emoji圖片的方法有點複雜,首先需要登錄http://getemoji.com/,在mac上可以看到,網站上是原生的emoji表情

 

在這個頁面里,emoji表情的大小可以通過改變字體大小來實現。首先使用截屏軟件,將整個網站的emoji部分截下來,然後,修改背景色

再通過photoshop,把兩張圖片中像素相同的部分取出來,就可以得到一張鋪滿了圖標的沒有顏色背景的圖,最後再使用node將圖標截下來,就可以得到emoji表情圖標啦。

最新Emoji畫像取得的方法

在ios9.1之後,有一個全新的網站http://emojipedia.org/apple/ 可以在上面看到每個系統的高清表情圖片。

每一個子表情頁面,可以看到每個手機系統不同的設計,還有表情的最新unicode編碼。

我們遍歷每一個表情,下載圖片和對應的unicode編碼。

同時對所有表情的unicode編碼進行排序。因為空間的表情歷史版本眾多,所以取一個沒有用過的id段,從400,000開始累加。

這樣的話我們生成一個表情unicode編碼和圖片id的對應表:

這樣當用戶輸入emoji表情的時候,獲取到unicode編碼,再輸出它對應的圖片id,就可以在前端展示出來

例如:👧 這個unicode編碼對應從對應表可以查到它對應的圖片id是e400459

http://qzonestyle.gtimg.cn/qzone/em/e400459@2x.gif 生成這樣的url給前台展示,並且針對二倍屏(高清屏)有高清圖,對於pc有一倍圖。

Emoji表情展示方案結果

在對所有的emoji表情做了圖片轉換以後,用戶在iphone和安卓手機上輸入emoji時,都會展示出對應的圖片,避免了表情的404以及各個客戶端展示不一致的情況,同時在PC上也可以展示emoji表情。

QQ空間移動端展示效果:

QQ空間PC端展示效果:

 

 

 

目前,全民K歌和QQ音樂已經使用我們的emoji表情展示方案,其他團隊有興趣的話,可以一起維護,創造更好的用戶體驗! 

Tags: ,

jano
屋台食戟 - ISUX新年派對
上一遍
辦公應用的正確打開方式
下一遍
11,805
QQ空間 新浪微博 Facebook Google+

相關推薦

留下你的想法吧