皮肤介绍

手机皮肤由候选栏+拼音区+云候选区+键盘大背景+九键键盘+二十六键键盘+上划弹泡等元素组合设计;功能键前景文字部分支持自定义贴图,其中中英、分隔、大小写切换只可修改字体及颜色;字母键文字暂不支持自定义图片,但可以修改字体和颜色

图中为九键键盘示意:

尺寸标注


手机皮肤设计源文件下载


九键键盘标注图





二十六键键盘标注图





设计元素

一、拼音区、云候选区、候选区各一张设计图,以及相应位置的字体颜色

二、A-Z字母键、空格键、功能键各四张设计图,分别是九键和二十六键的正常状态和按下状态,以及字体颜色

三、快捷符号键四张设计图
分别是背景、正常状态、按下状态、前景框,及字体颜色。其中背景为最底一个图层、前景为最上面一个图层,为选作项

四、上划弹泡,一张设计图,以及字体颜色

五、键盘大背景,一张设计图,或可以根据设计进行纯色填充

注意事项

一、手机皮肤编辑器支持九段拉伸/平铺(除拼音区、候选区、云候选区,其他只支持拉伸),所以上述尺寸只做参考,在平铺和拉伸的区域可相对应的缩小设计尺寸

二、建议首先在1080下的分辨率下设计键盘布局,若设计按钮为圆角矩形等规则图形,可以按720的标注尺寸设计图片,然后使用编辑器时在1080分辨率下上传,再复制到其他两个分辨率

三、设计完成后,按照要求切出每张图片,保存为PNG格式

设计细则

三大原则

一、 所有按键的字体清晰可见,包括但不限于候选字、拼音串、云候选字、字母、数字、符号等,避免字体和背景图片混淆不清,要保证清晰的视觉体验
二、 皮肤设计需要满足输入法的基本功能特性,包括但不限于首选/非首选字体颜色有明显区分、每个按键要有明显的按下效果等
三、 为降低用户下载皮肤流量成本,每个按键的设计尽量留有可拉伸区域,减小切图尺寸

细则

区域1:候选区

一、 候选条icon颜色明显,在视觉区上下居中,不宜偏上或偏下,默认状态icon要完整展示,不能出现半个的现象

错误示例



正确示例



二、 第一个字符距离左侧边缘区域和默认皮肤保持一致,且在视觉区上下居中,避免过度占用左右两侧的空间

错误示例

拼音区、云候选超过了视觉显示区,导致看不清楚



第一个候选字距离左侧边缘太远,这里在编辑器的设置值应该为0



三、首选/非首选候选字字体颜色有明显区分,首选相对为高亮色

错误示例

首选/非首选字体颜色相近,没有高亮色



四、候选条icon使用默认icon灌色处理,不要替换图片,减少后续维护成本

 

Android和iOS平台在皮肤结构上有一些不同,分别要求如下:

Andriod

(一)、候选条整体设计简洁,不宜有过多装饰物,整体不要有过多的颜色变化,确保候选字清晰可见,不影响输入

错误示例

候选条设计过于冗余,有两个明显颜色过渡,导致看候选字会比较费劲



候选条装饰过多,红白两色很明显的颜色变化



正确示例

候选条设计简洁,候选字清晰可见



(二)、候选条左侧不能有任何主体形象,右侧主形象宽度不超过220像素,高度不超过200像素,确保键盘不过高;避免极小的右侧形象凸起,若非必要可缩小至候选区范围内;若特殊情况右侧形象较高,可将候选条整体上拉平铺,避免因异形造成左侧留白过大

错误示例

右侧形象过大





(三)、候选条不宜有圆角设计,上下也不宜有镂空及阴影设计,避免视觉区的透明图片被填色

错误示例

候选条为异形设计,透明区域被填色





(四)、拼音区、云候选区和候选条之间不要有间隙,避免上方悬空;也不能和候选条重叠,两个部分应无缝连接

错误示例

上下有间隙,上方悬空



拼音区、云候选和候选条重叠



(五)、拼音区和云候选区的高度和默认皮肤保持一致,不能调整字体大小;且背景图的最左和最右均贴边,不要有错位

错误示例

拼音区距离左侧有间隙



综合以上,正确示意图如下:(1080分辨率)



 

iOS

(一)、候选条整体设计简洁,不宜有过多装饰物,整体不要有过多的颜色变化,确保候选字清晰可见(示例同Andriod)

(二)、候选条左侧不能有任何主体形象,右侧主形象宽度不超过220像素,保证展示尽可能多的候选字;若高度超过候选字区域,必须保证云候选字体清晰可见

错误示例

右侧形象过大,遮挡云候选区域,致使不能看清区域内文字



(三)、若不能完全满足上文中背景图的设计要求,则需要单独配置默认状态和打字状态两张背景图,保证正常使用不受设计影响

(四)、候选区不能出现四角圆角设计,保证视觉区没有透明区域

区域2:键盘大背景

一、键盘大背景四角不能出现圆角或异形设计,保证视觉区没有透明区域




二、键盘大背景尽量不要使用易拉伸变形的元素,因为iPhone 5和iPhone 6的键盘比例不一致,但使用同一张背景图




错误示例

按键背景过于花哨



区域3:按键

一、每个按键的视觉区不宜太小,以免影响点击的视觉范围;同时尽量避免不必要的阴影和异形设计

错误示例

按键过小,影响点击的视觉范围;前景字快溢出边缘



二、按键的前景字不能超过按键背景视觉范围,也不要紧贴边缘,应在有效视觉区内显示正常

错误示例

数字偏上,正常应该在边框内



三、按键背景(特别是功能键)若为异形或设计复杂,前景(字体或贴图)要和背景风格保持一致,避免看不清楚;尽量将前景背景设计融合为一体,避免生硬

四、原则上不可隐藏默认键盘上的所有前景(字体或者贴图),若和背景设计为一体,需要明确表现该按键功能,例如删除键可以用【×】表示,但是不可以用【√】表示;且元素不能过小,尽量还原默认大小

五、字母键只能使用字体,不能使用前景贴图;功能键可以使用前景贴图,但是需要满足上述第3、4条

错误示例

按键前景贴图都隐藏,且没有明确表达按键功能



正确示例

按键前景贴图虽然被隐藏,但是背景设计中明确结合了功能属性



六、点击/上划弹泡的背景不宜有过复杂的设计,需要保证不同长度的字符清晰显示

错误示例

九键和二十六键的上划弹泡使用同一张背景图,但是九键会拉宽比例



区域4:其他界面

一、原则上,需要保证一款皮肤的所有界面显示正常,字符清晰可见且美观大方

二、实际中,必须保证符号界面、功能弹层、拼音串编辑状态、灵犀界面字符清晰可见且美观大方,不影响正常使用;手写、键盘调节功能下,不影响正常使用

区域5:按键音

一、若给皮肤配置按键音,则必须配置默认音,确保每个按键都有声音;但是长按删除需要配置成silence

二、每个按键的按键音不宜超过1s,特殊情况不宜超过2s(特殊情况指明星、影视剧等题材),并且只能配置在【重输】等不会连续点击的按键上

三、母键不宜配置过于嘈杂的音效,尽量使用通用音效

区域6:特效

一、一款皮肤不宜设计过多特效,尤其不应同时出现特效,以及要避免出现连续特效,以免影响性能

二、皮肤特效设计不能影响皮肤正常使用,应本着锦上添花原则,避免画蛇添足

特例

一、影视明星类皮肤,为吸引受众,较多使用人物形象作为大背景,且按键呈透明状的情况,所以画面较为花哨,字体很难做到全部清晰可见。在这种情况下,可放宽一定限度,保证字体基本可见,不影响正常使用即可

二、合作类皮肤,有部分会将LOGO放在空格键上,需要隐藏空格键前景字,但是因为空格键为常用按键,不太会误点,所以可以适当放宽限制可隐藏前景

正确示例

例如以下两款皮肤,空格键隐藏了前景图,按键字体不是特别清晰,但是尚未影响正常使用



三、合作类皮肤,有部分需要有强烈的形象露出需求,所以Andriod皮肤候选条右侧形象的限制可适当放宽,但不可超过300像素

商务合作 邮箱:Imemob_bd@sogou-inc.com     皮肤、表情、词库合作 邮箱:ImePOM-stickers@sogou-inc.com