關於輸入法皮膚實現的一些構想

我曾經在 Windows 平臺下製作過 QQ 輸入法、搜狗輸入法和極點五筆的皮膚,然而尚無 Linux 系統下相關工作的經驗。
接觸 Linux 系統的時候,也接觸到它的輸入法。據我目前所知,Linux 下支援皮膚的輸入法大概只有 Fcitx(IBus 算是支援配色方案,而非皮膚)。此外不開源的小小輸入法(Yong 輸入法)也支持皮膚(小小輸入法似乎並非輸入法框架)。
最近查看過 Fcitx 輸入法的皮膚文件格式,其形式和 Windows 平臺下衆多輸入法的結構相似。基本結構均是:單個文件夾作爲單個皮膚文件的集合,內含基本元素的圖片和文本配置文件。這種結構給輸入法皮膚製作帶來一些麻煩。其中難點是確定部分元素的座標和調試皮膚的整體效果。爲此 Windows 平臺下商業公司開發的輸入法均同時附帶相應的輸入法皮膚製作程序。此外,Fcitx 皮膚的基本元素圖片由位圖構成,現實使用中在放大的條件下某些現實結果可能會失真。
爲此我想到使用 SVG 矢量圖作爲輸入法皮膚的圖形格式。目前 Gnome3 對於 SVG 圖片的支持已經很完善,面板圖標等等均可以用 SVG 格式的圖片;KDE 的情況我不詳,不過按道理支援度應該相差不大。
可惜我對於技術細節一竅不通,不清楚目前的開發環境對 SVG 圖片開放編程接口的情況,因此這裏僅對 SVG 格式的圖片製作輸入法皮膚提出自己的一些構想(OR 幻想)。
言歸正傳,下面詳述該構想。

輸入法界面簡介
一般地,輸入法程序和用戶的內容交互界面粗分爲:
**1、系統托盤 **
**2、輸入狀態欄 **
**3、候選結果欄 **

** 系統托盤 **
即是在狀態欄(指示面板)上顯示的小圖標,指示當前的輸入法程序爲何。一般輸入法的托盤是不隨輸入狀態更換的,只有更換輸入法(一般是指輸入法引擎)才會改變。要注意的是,切換成英文輸入和切換到輸入法的英文輸入狀態是不同的,前者會切換輸入法和改變托盤圖標,後者不會切換輸入法和改變托盤圖標而只會改變輸入法狀態欄的中英文輸入指示器。
因此對於單個輸入法引擎,系統托盤由一個圖片組成即可。一般托盤圖標的設計不輸入輸入法皮膚的範疇,但不排外一些輸入法支持更換皮膚同時更換托盤圖標的功能,因此在這裏列出。

** 輸入狀態欄 **
狀態欄伴隨着輸入法的切換,主要用來指示輸入法在當前輸入窗口所處的狀態;同時可以包含其他的交互功能。基本界面元素包含背景和指示器等。

背景
背景圖一般只有一個,功能主要是用於組織指示器的排列。不規則的背景圖和不規則的指示器排布可以提供華麗的顯示效果,例如以花藤爲背景配上其他相關圖片(如花朵)作爲指示器能將背景和指示器完美融合爲一體。但這種方案工作效率往往比較低,因此在建議即使使用不規則圖片作爲背景,指示器最好按照線性排列;否則將十分考驗作者能將兩者調和的設計功底。

中文輸入法一般輸提供以下幾組輸入狀態的指示:
中文、英文
大寫、小寫
全角、半角
中文標點、英文標點
傳統漢字、簡化漢字
字符集
小補充:日本輸入法、韓文輸入法會包含其他特有的指示狀態。以日本語輸入法爲例,會包含和平假名、片假名等相關的指示狀態。日本著名的 ATOK 輸入法的狀態欄甚至指示當下輸入爲日本國各地方言中的何種;別國對文化多樣性的尊重實非我國可比,此爲題外話。

中文輸入法一般會顯示輸入狀態以外的功能交互:
軟鍵盤
設置菜單
搜索直達
帳號登錄(商業公司提供的詞庫同步需要)
這些指示器或者交互接口的圖標,還可分爲多種狀態,諸如光標移入,點擊中,點擊結束,光標移開(正常狀態)。

其他
諸如部分輸入法支持在狀態欄右擊會調出菜單。

** 候選結果欄 **
候選結果欄在輸入時顯示輸入法引擎根據用戶的輸入內容所反饋的結果,包含正常輸入、反查(如用注音反查倉頡碼、拼音反查五筆)等具體情況。一些輸入法還支持 Tips 顯示,甚至能夠根據輸入上下文智能提示用戶操作。候選欄的基本界面元素一般包括背景圖、其他視覺元素、交互接口按鈕。

背景圖
首先我們來看候選項的排列顯示情況。一般分爲橫排、豎排和表格式排布;當然技術上可以實現不規則的排布(如環形),但我們應該詛咒這種設計。當然,具體細節還可以在分類,此處不予討論。

其他視覺元素
常見的由輸入法的 Logo,還有編碼和候選文字的分割線。但這些都不是必需的。

交互接口
常見的由前翻頁、後翻頁按鈕。

** 補充 **
以上只是輸入法界面的基本部分。事實上,這些成分不是一成不變的。有的輸入法甚至會把狀態欄和候選欄融合在一起,提供一個簡約的解決方案,比如臺灣的嘸蝦米輸入法。

實現原理
介紹完了輸入法和用戶交互界面的基本情況,下面來講述一下用 SVG 格式的圖片實現以上三個基本部分的原理。
SVG 屬於矢量圖,其支持的圖層、羣組等等特性,十分適合實現上面介紹的輸入法的元素組成的基本界面。
圖層最重要的是可以實現層次化的結構,每個圖層都可以擁有自己的名稱並可以建立子圖層。我們用一個關於狀態欄的實際例子來說明。例如我們可以建立以下的圖層模型:
.background
.indicator
----.lingua
--------.chinese
---------------- <mouse_away
---------------- <mouse_on
---------------- <click_on
---------------- <click_over
--------<english
--------<captial
----.punctuation
----------------<east
----------------<west
----.shape
----------------<half
----------------<full
----.character_set
----------------<big5
----------------<gb2312
----------------<gbk
----------------<gb18030
----------------<unicode
----------------<ascii
----.han
----------------<traditional
----------------<simplified
.action
----<softkeyboard
----<preference

其中< 前綴意思是說該層的子層尚未打開,前綴. 意思相反,… 是省略號。以上只是一個初步的模型,甚不完善。其中一些結構可以移除,比如顯示鼠標動作狀態;各元素可以根據用戶喜好設計,甚至可以根據其他配置文件顯示或者隱藏;一些結構可以重新設計,比如將 indicator 和 action 合併等等。

優點和缺點
優點:
1、對比原來的格式,SVG 格式的圖片使得輸入法皮膚設計中的圖片數量減少,基本上各大板塊只需要設計一個圖(但需要設計的元素數量不變);
2、方便參照背景組織各個基本元素,不需要使用第三方工具來獲取元素的座標參數,大大降低皮膚製作的難度;
3、在不載入輸入法的條件下,也能簡單調試輸入法皮膚;
4、SVG 圖片屬於矢量圖,放大不會變形;
5、SVG 由 W3C 制定,是一個開放標準,目前已經得到廣泛的應用。
缺點:
1、增加編程難度;
2、圖像渲染可能會消耗系統資源;
3、其他問題。

補充
1、Yong 是一個跨平臺的輸入法(目前支持 Windows、Linux 和安卓平臺),如果你需要在不改變皮膚文件的條件下保持 Windows 和 Linux 平臺下相同,可以考慮使用 Yong 輸入法。
2、我一直認爲輸入法皮膚應以簡約爲主,過於花哨就顯得不是那麼必要;因此,使用盒子模型加上良好的文本配色設置就能作出不錯的輸入法外觀。
3、由於本人知識有限,使用大量口水詞彙而非專業的術語。希望大家包涵。

一般而言想法是让人不感兴趣的,除非交代码出来。

纯粹的想法被实现一般只有两种可能,15 分钟以内就能实现的,和实在重要性很高的。

我实际感兴趣的只有以后用 qml 写皮肤,其他没什么兴趣。

个人觉得每个 idea 可能都非常有意思,但是如果 coding 的那个人和你想的有出入,或者你想的是人类的想法并没有编程思想,也只能停留在想法上面。(我对老 K 的 fcitx 的想法太多了)

所以一定要动手做,至少要在实际中明白现有实现方法的不足和弱点,才能脱离闭门造车班门弄斧(总之就是不要报不存在的 bug,这样会让写 code 的人反感),才能让 coding 的人接受你的观点。

比如这是你的批评:

  1. 元素坐标和整体效果 fcitx-config-kde4 中有工具辅助。所以这是不存在的「难点」。
  2. fcitx 采用九宫格的皮肤模式,即四个角,四条边,中间一大块。放大算法如果你的坐标配置正确,只会缩放中间一大块(不管纯色还是渐变),视觉影响非常之小,因为荧幕像素本身就不高。

比如你对输入法皮肤的看法:

  1. Windows/Linux/ 安卓平台的图形渲染后端均不相同,所以不改变皮肤文件、输入法非常轻量的条件下,结论只能有一个,这个皮肤引擎功能非常有限。

  2. fcitx 已经是盒子模型加上良好的文本配色了。

比如你对 svg 的认识,作为 fcitx 御用美工和最早在实际工作中产生「我们要支持 svg」的人对你的想法的看法如下:

  1. 目前除了 Linux 所有操作系统的壁纸均不支持 svg,为什么?

第一因为太 lag。输入法一定一定不能 lag。
第二,svg 只适用于打印、固定缩放(比如 48x48 缩放到 256x256,如果你从 2560x1440 缩放到 1024x768,那么也是 svg 不能胜任的),而输入面板的大小是不能确定的,也就是说即使上了 svg,引入的问题会比解决的问题更多。

  1. 你所谓的图层设计方法。

首先,不实际。造汽车不能把所有东西都画在一张图纸上。这很无聊地增加了设计难度。

其次,svg 的图层是工作用的,你要把最终产品(比如某个 icon)放在图层上,可以,但是 svg 所谓的「精确坐标」不能「实时」自动调整图层在另一个图层上的位置。也就是说那样需要程序去和 svg 交互,动态调整图层坐标,那第一会增加复杂度,第二在算法上就把一个输入法变成一个画图程序了。但不那么做,最终出来的图还是固定的。你的想法解决了缩放问题,但仍然没有解决图案缩放后会跑的问题。

第三,你把人人都会做的 png 变成了少数人会做的 svg,增加了学习成本。

总结一下,您应该是:

  1. 没实际操作过,用 windows 思想领导 linux 实现。
  2. 对 fcitx 的实现方法和您的目标实现 svg 都没有系统的了解。
  3. 您想到了一个开发者们老早想过的问题,而且想的不是很深入透彻。

支持楼主动手为 fcitx 开发漂亮的皮肤,哪怕是把 sogou 的皮肤移植过来

Sent from my MI-ONE Plus using Tapatalk 2

我也是这么想的