设计规范阅读说明

1、请严格遵守设计规范进行皮肤的设计；

2、除最受用户喜爱奖的评选外，皮肤的可实现性将作为重要评选标准；

3、所以看到这里请不要跳过，还请花3分钟仔细阅读以下规范。

（对设计大赛有任何疑问，请加大赛官方交流QQ群：878086798，加群时备注：设计大赛）

设计三大原则

1、所有按键的字符清晰可见，避免字符和背景图片混淆不清；

2、皮肤设计需要满足输入法的基本功能特性，每个按键要有明显的按下效果；

3、为降低用户下载皮肤流量成本，每个按键的设计尽量留有可拉伸区域，减小切图尺寸。

皮肤介绍

手机皮肤由候选栏+键盘大背景+九键键盘+二十六键键盘+上划弹泡等元素组合设计。

尺寸标注

1、标注的按键尺寸为每个按键的最大尺寸；

2、设计的按键尺寸必须小于或等于标注尺寸；

九键键盘尺寸标注图

二十六键键盘尺寸标注图

错误示例，按键元素均超过按键尺寸范

正确的符合尺寸规范的设计

设计元素

1、候选栏（又名工具栏、候选条、候选区）

正确的符合尺寸规范的设计

候选栏icon：

优先使用默认图标icon，可进行纯色填充，保证icon颜色明显，请勿做异形设计或添加任何其他特效（如描边、渐变等），不要替换图片，减少后续维护成本。

候选栏：

保持候选栏整体设计简洁，不宜有过多装饰物，否则影响候选字辨识；候选栏左侧不宜有任何主体形象，右侧主形象尺寸范围不超过220*200； 候选条不宜有圆角设计，上下也不宜有镂空及阴影设计，避免视觉区的透明图片被填色。

错误示例：候选条装饰过多，影响候选字辨识

错误示例：候选栏右侧形象过大

错误示例：候选栏有镂空，透明区域被填色

正确示例

2、键盘大背景

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

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

九键和二十六键大背景可以支持使用两张背景图。

3、按键

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

错误示例：按键过小，影响点击的视觉范围；前景字快溢出边缘。

错误示例：按键的前景字不能超过按键背景视觉范围，也不要紧贴
边缘，应在有效视觉区内显示正。

4、按键背景（特别是功能键）

若为异形或设计复杂，前景（字体或贴图）要和背景风格保持一致，避免看不清楚。

①尽量将前景背景设计融合为一体，避免生硬；

②原则上不可隐藏默认键盘上的所有前景（字体或者贴图），若和背景设计为一体，需要明确表现该按键功能；

③例如删除键可以用【×】表示，但是不可以用【√】表示；且元素不能过小，尽量还原默认大小；

④字母键只能使用字体，不能使用前景贴图；功能键可以使用前景贴图，但是需要满足上述第③、④条；

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

错误示例：按键前景贴图都隐藏，且没有明确表达按键功能

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

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

设计规范阅读说明

上传作品需包含皮肤九键和二十六键布局效果图，其中二十六键效果图需包含按下效果和上划弹泡设计。

尺寸：1080*832

格式：JPG/PNG/GIF

（为避免出现字体版权纠纷事宜，本次大赛推荐参赛者选用汉仪字体，参赛者可自由选取汉仪官网供下载的任意字体包用于皮肤的设计，下载字体请戳“ 汉仪字体下载” 。）

上传作品须知

1、同一用户名可上传多组不同主题作品；

2、同一作品提交多次，以最终提交作品为准；

3、上传效果图请严格按照给定尺寸，否则无法上传成功，效果图尺寸并非皮肤尺寸；

4、请保证填写的个人信息准确无误，供主办方与您联系本次比赛事宜，不对第三方公开；

5、作品源文件请确保是PSD格式，该源文件将用于皮肤包制作，请千万不要合并图层；

6、对大赛规则或设计要求有任何疑问请联系QQ群工作人员，QQ群号878086798，加群请备注“设计大赛”。

更多皮肤制作流程请戳 下载模板

怎么让你的输入法皮肤动起来？

大多数输入法皮肤，都是安静地美好着，然而一些特定主题的皮肤加上动效后，更能锦上添花、烘托气氛。

开屏动效

了解了设计规范，选好了皮肤主题，那么来看看你的皮肤可以加哪些动效呢？

在调起键盘时可以添加开屏动效，开屏动效以GIF格式文件进行展示。你可以做任何关于你皮肤的动效，并生成GIF格式。

动效播放时间最好是保证在2秒以内呢~

如下图“星球大战”皮肤：

预览视频

预览视频是在皮肤启用页的状态下进行播放为AVC（h264）编码的MP4格式，可以配合音效，视频保证在10s以内。

如下图“彩虹键盘”皮肤：

按键联动按下特效

下图“功夫熊猫”皮肤实现的原理则是：

当点击中间按键后，剩下的熊猫都会看向中间的方向。当按下其中一个按键后，会带动其他按键背景换图片。

挂件动效

按下挂件动效：字母键、功能键可添加挂件动效，可以通过按下的动作引起一种或多种元素按照设定的轨迹出现。

如“彩蛋”皮肤，空格键按下会蹦出小兔子，字母键按下会蹦出糖果。

背景挂件动效

可以按照设定的时间和移动的轨迹让一种元素在大背景循环运动出现。

如“樱花春雨”皮肤大背景上的花瓣不时飘落，“蝙蝠侠大战超人”皮肤大背景上的云朵水平有右移。

讲了这么多现有技术支持的动效形式，期待有想法的你在可实现基础上能挖掘出更多创意动效玩法！

Ps：本次大赛提交的作品包含9键和26键两张设计图，格式可以为GIF哦~

本次大赛共有四种设计风格供大家选择：

1、极简主义

简约、大气的皮肤往往能让人眼前一亮，但如何制作一款简单而又能拿捏好细节的皮肤就是你的关键点哦。无论是的色彩的搭配还是按键质感的处理都需要好好思考一下呢

扫码使用皮肤

扫码使用皮肤

扫码使用皮肤

2、静物风景

世人常说唯有美食与爱不可辜负，而手机皮肤也需要唯美的一面，当时间静止、画面停滞，人们眼前留下的是怎样一番的场景呢？享受生活的你一定能够细心发现

扫码使用皮肤

扫码使用皮肤

扫码使用皮肤

3、卡通动漫

俏皮可爱、脑洞大开、天真烂漫是卡通类皮肤的特殊属性，功能键和主题的搭配也很考验设计师的整体布局观哦

扫码使用皮肤

扫码使用皮肤

扫码使用皮肤

4、时尚炫酷

机械的装置沉稳不变，而闪亮的霓虹灯犹如精彩人生的绚丽节奏，前卫、炫酷是制作皮肤的潮流指标，皮肤设计的最强王者，等你来战！

扫码使用皮肤

扫码使用皮肤

扫码使用皮肤

为方便大家制作皮肤，特地为大家准备了皮肤制作视频供大家学习、参考

戳下方链接即可学习：

大咖经验分享： https://www.bilibili.com/video/av33898901

皮肤设计规范： https://www.bilibili.com/video/av34992004