先看看效果圖：

教程步驟—

01 構(gòu)思草圖

首先要仔細(xì)了解輸入法的組成部分：候選欄+拼音區(qū)+云候選區(qū)+鍵盤大背景+9鍵鍵盤+26鍵鍵盤+上劃彈泡等。

剛開始著手設(shè)計(jì)的時(shí)候，建議從整體入手，大致規(guī)劃好各個(gè)部分的設(shè)計(jì)元素的擺放位置等，盡管這樣的工作無法得到立竿見影的成效，但這的確是筆者經(jīng)過慘痛的教訓(xùn)后得到的寶貴經(jīng)驗(yàn)。一開始把整體的設(shè)計(jì)布局確定好了，之后就算有改動(dòng)的地方，通常也只是小改，否則…

一句話，天才第一步，構(gòu)思皮膚整體布局。

本次參賽作品選用了深受部分程序員喜愛的ikbc 1系鍵盤Poker作為擬物原型，畢竟是擬物風(fēng)格的輸入法皮膚，所以設(shè)計(jì)過程中遵循了“盡可能像”的設(shè)計(jì)原則。

此圖為實(shí)體鍵盤官網(wǎng)宣傳圖。

這款鍵盤的特點(diǎn)“60%鍵位”“小巧”，即精簡(jiǎn)了鍵盤，用戶不需要上下左右移動(dòng)手腕，即可保持較高的的輸入效率。所以在皮膚的設(shè)計(jì)中，為了體現(xiàn)這種簡(jiǎn)潔的設(shè)計(jì)思想，未在工具欄、候選欄、云候選區(qū)或拼音區(qū)區(qū)域做任何設(shè)計(jì)，簡(jiǎn)單就好。

而在主體鍵盤部分的設(shè)計(jì)中，以質(zhì)感設(shè)計(jì)優(yōu)先，鍵槽體現(xiàn)為輔的宗旨著手后續(xù)工作。

02 鍵帽部分

鍵帽部分千萬注意不要脫離切圖尺寸而獨(dú)立設(shè)計(jì)!

切圖模板可從搜狗輸入法皮膚比賽詳情頁(yè)獲取

26鍵和9鍵布局的鍵帽大小差異較大，先獨(dú)立設(shè)計(jì)而后進(jìn)行拉伸復(fù)制很有可能導(dǎo)致邊緣圓角(如果有的話)變形，出現(xiàn)鋸齒或過渡不自然等情況。故而強(qiáng)烈建議帶圓角的鍵帽，直接基于26或9鍵的切圖尺寸的框架內(nèi)進(jìn)行設(shè)計(jì)。

本次參賽作品的設(shè)計(jì)較為簡(jiǎn)單，使用圖層樣式表達(dá)出實(shí)體鍵盤質(zhì)感即可，不需要進(jìn)行其他的效果制作。故而質(zhì)感在表現(xiàn)時(shí)，相對(duì)須設(shè)計(jì)地較為精致耐看一些，否則可能會(huì)顯得較為單調(diào)。同理，盡管實(shí)體鍵盤的配色基本為黑白灰，但在實(shí)際的質(zhì)感表現(xiàn)時(shí)，一定注意，灰度的層次感要相對(duì)拉開。此外，其實(shí)仔細(xì)觀察，實(shí)體鍵盤在不同鍵位上的鍵帽上手指敲擊處的斜度處理也有所不同，故而在本次參賽作品中筆者也有所還原(9鍵中較為明顯)，不過由于時(shí)間緊迫，未來得及做出上下傾斜的感覺，實(shí)屬遺憾。

一句話，如果本身設(shè)計(jì)元素就不算太多的話，那么剩下的部分可能更需要精致，需要更多細(xì)節(jié)，這樣才能更耐看一些。

如下為圖層樣式的拆解，以9鍵布局為例，其余鍵帽差別不大(調(diào)整圖層樣式時(shí)，無需死摳數(shù)據(jù)，主要通過最終的視覺效果來選擇圖層樣式的應(yīng)用程度。此外，圖層樣式的添加每一步都有確切的目的，不要為所欲為。)

(此處正是之前提到的錯(cuò)誤的脫離切圖尺寸制作的鍵帽，若將其轉(zhuǎn)化為智能對(duì)象，并進(jìn)行拉伸，邊緣圓角很有可能出現(xiàn)變形等其他問題。不提倡脫離切圖尺寸進(jìn)行制作，不過此處僅作圖層樣式設(shè)置的講解，影響不大。)

不要死摳數(shù)據(jù)，根據(jù)需求情況及最終效果進(jìn)行反復(fù)調(diào)整。

(注意!未標(biāo)明色值的顏色要么為因?yàn)橹貜?fù)所以略去的顏色，要么就是純黑純白(通過不透明度參數(shù)的調(diào)整實(shí)際所需的陰影顏色等))

漸變疊加做鍵帽底部四面的顏色

兩層內(nèi)陰影加一層內(nèi)發(fā)光做出厚度，特別強(qiáng)調(diào)下部邊緣的厚度

鍵帽的頂部同理，相似的方法根據(jù)不同的光影情況給予略微不同的參數(shù)不斷調(diào)整即可。不過此處的漸變疊加是用于做

鍵帽頂部本身的彎曲度，漸變不宜選區(qū)差異過大的顏色，否則會(huì)變形。

添加上一個(gè)較為柔和的投影做出鍵帽的頂部與底部的上下層級(jí)關(guān)系的感覺，可以不必太深，之后還可以通過強(qiáng)化某一立面暗影的方式凸顯鍵帽深度。

單獨(dú)使用投影+蒙版的方式刻畫或強(qiáng)化前后立面的深度。注意參數(shù)的調(diào)整，使得陰影更加真實(shí)(后立面深度也可不進(jìn)行單獨(dú)強(qiáng)化，這取決于光源的選取，實(shí)際作品中為對(duì)比更為強(qiáng)烈，未對(duì)后立面進(jìn)行單獨(dú)強(qiáng)化)

最后做出整體鍵帽在鍵盤或鍵槽上的陰影(如果切圖要求能滿足的話)

至此，一個(gè)鍵帽就完工了，其余部分大體不過形狀位置或大小或圖層樣式參數(shù)的調(diào)整，此處就不贅述了

03 鍵槽部分

鍵槽部分結(jié)合鍵帽部分共同進(jìn)行尺寸調(diào)整

鍵槽部分的把控既麻煩又簡(jiǎn)單。簡(jiǎn)單指鍵槽的表現(xiàn)和放置;麻煩指鍵槽的尺寸大小的把握和鍵帽和鍵槽如何進(jìn)行較為和諧的結(jié)合，這兩者并不矛盾。

9鍵布局部分筆者選取了大鍵槽結(jié)合字母鍵的結(jié)合方式，一方面可以潛意識(shí)地將使用者的視線集中在字母鍵上，減少其他鍵位在打字時(shí)的干擾;同理，右部的功能鍵區(qū)采用長(zhǎng)鍵槽;而左部的標(biāo)點(diǎn)符號(hào)區(qū)因?yàn)殒I帽與鍵帽之間間距較大，所以沒有采用相同的策略，而是單獨(dú)為每一個(gè)標(biāo)點(diǎn)符號(hào)設(shè)置鍵槽，而若采用長(zhǎng)鍵槽，可能會(huì)因?yàn)殚g距部分的鍵槽而使得空間組織顯得過于疏松。

26鍵布局中的主體鍵盤部分也因?yàn)殚g距較大的原因，沒有使用大鍵槽，其余部分就較為簡(jiǎn)單了，一個(gè)個(gè)安排下來即可。

鍵槽只需要一個(gè)制造深度的圖層樣式即可。

04 前景字符部分

在比賽規(guī)則框架下盡量匹配實(shí)體鍵盤字符風(fēng)格。

實(shí)體鍵盤中字體的選用是偏幾何風(fēng)格的，故而在皮膚的字體選用中也應(yīng)盡可能匹配原字體風(fēng)格(比賽要求限制，此處選用漢儀旗黑而非實(shí)體鍵盤的字體或類似字體)，部分符號(hào)作了微小的改動(dòng)以匹配風(fēng)格，比如將一些圓潤(rùn)的轉(zhuǎn)折部分去掉了。

05 其他部分

長(zhǎng)按氣泡及按下效果清晰明確，不會(huì)造成誤解即可。

按下效果制作很簡(jiǎn)單，調(diào)整頂部形狀位置，略微調(diào)整圖層樣式的參數(shù)即可效果展示

最終效果—

第一版后第一次大改的版本(第一版找不到了..)

最終版9鍵

最終版26鍵