-
1、请严格遵守设计规范进行皮肤的设计;
2、除最佳创意奖的评选外,皮肤的可实现性将作为重要评选标准;
3、所以看到这里请不要跳过,还请花3分钟仔细阅读以下规范。
(对设计规范有任何疑问的设计师请加官方交流QQ群:610305890)
1、所有按键的字符清晰可见,避免字符和背景图片混淆不清;
2、皮肤设计需要满足输入法的基本功能特性,每个按键要有明显的按下效果;
3、为降低用户下载皮肤流量成本,每个按键的设计尽量留有可拉伸区域,减小切图尺寸。
手机皮肤由候选栏+键盘大背景+九键键盘+二十六键键盘+上划弹泡等元素组合设计。
(设计模板源文件中含有下列标注图)
1、标注的按键尺寸为每个按键的最大尺寸;
2、设计的按键尺寸必须小于或等于标注尺寸;
九键键盘尺寸标注图
二十六键键盘尺寸标注图
错误示例,按键元素均超过按键尺寸范围
正确的符合尺寸规范的设计
1、候选栏(又名工具栏、候选条、候选区)
候选栏icon:
优先使用默认图标icon,可进行纯色填充,保证icon颜色明显,请勿做异形设计或添加任何其他特效(如描边、渐变等),不要替换图片,减少后续维护成本。
候选栏:
保持候选栏整体设计简洁,不宜有过多装饰物,否则影响候选字辨识;候选栏左侧不宜有任何主体形象,右侧主形象尺寸范围不超过220*200; 候选条不宜有圆角设计,上下也不宜有镂空及阴影设计,避免视觉区的透明图片被填色。
错误示例
候选条装饰过多,影响候选字辨识
正确示意图
1080分辨率
候选栏右侧形象过大
候选栏有镂空,透明区域被填色
2、键盘大背景
键盘大背景四角不能出现圆角或异形设计,保证视觉区没有透明区域。
键盘大背景尽量不要使用易拉伸变形的元素,因为iPhone 5和iPhone 6的键盘比例不一致,但使用同一张背景图。
九键和二十六键大背景可以支持使用两张背景图。
3、按键
每个按键的视觉区不宜太小,以免影响点击的视觉范围,同时尽量避免不必要的阴影和异形设计。
错误示例
按键过小,影响点击的视觉范围;前景字快溢出边缘。
按键的前景字不能超过按键背景视觉范围,也不要紧贴边缘,应在有效视觉区内显示正常。
4、按键背景(特别是功能键)
若为异形或设计复杂,前景(字体或贴图)要和背景风格保持一致,避免看不清楚。
①尽量将前景背景设计融合为一体,避免生硬;
②原则上不可隐藏默认键盘上的所有前景(字体或者贴图),若和背景设计为一体,需要明确表现该按键功能;
③例如删除键可以用【×】表示,但是不可以用【√】表示;且元素不能过小,尽量还原默认大小;
④字母键只能使用字体,不能使用前景贴图;功能键可以使用前景贴图,但是需要满足上述第③、④条;错误示例
按键前景贴图都隐藏,且没有明确表达按键功能
正确示例
按键前景贴图虽然被隐藏,但是背景设计中明确结合了功能属性
⑤点击/上划弹泡的背景不宜有过复杂的设计,需要保证不同长度的字符清晰显示。
错误示例
九键和二十六键的上划弹泡使用同一张背景图,但是九键会拉宽比例
上传作品需包含皮肤九键和二十六键布局效果图,其中二十六键效果图需包含按下效果和上划弹泡设计。
尺寸:1080*832
格式:JPG/PNG/GIF(为避免出现字体版权纠纷事宜,本次大赛推荐参赛者选用汉仪字体,参赛者可自由选取汉仪官网供下载的任意字体包用于皮肤的设计,下载字体请戳“汉仪字体下载”。)
1、同一用户名可上传多组不同参赛作品;
2、同一作品提交多次,以最终提交作品为准;
3、上传效果图请严格按照给定尺寸,否则无法上传成功;
4、请保证填写的个人信息准确无误,供主办方与您联系本次比赛事宜,不对第三方公开;
5、作品源文件请确保是PSD格式,该源文件将用于皮肤包制作,请千万不要合并图层;
6、对设计规范有任何疑问的设计师请加官方交流QQ群:610305890。
-
了解了皮肤的基本组成和设计规范后就要开始大开脑洞,构思皮肤主题啦!
当然,你可以从你擅长的设计风格着手。
手绘风
如果你擅长手绘插画风,你可以用你的画笔描绘一道亮丽的风景。
拟物风
如果你擅长写实风,对质感的刻画超拿手,你可以将任何一个实物搬到指尖。
宠物风
如果你是阿猫阿狗控,不妨为你家萌宠量身定制一款主题皮肤 。
美食风
如果你是吃货,不妨将你最爱的美食化身指尖皮肤,每次打字也会更有食欲。
美妆风
如果你是爱美的化妆品控,各个色号的口红、眼影、气垫主题统统都可以来一套。
游戏风
如果你是各类游戏控,把你最爱的游戏做成同款皮肤吧,还能配上各类游戏动效,更显生动。
中国风
如果你热爱山水中国风不妨作画一幅,渲染出雅致山水画。
脑洞风
如果你就爱玩点不一样的脑洞,不妨参照如下不走寻常路的皮肤,字符翻转、乱序、搞怪,按下动效,就能玩坏你的键盘。
二次元
各类可爱少女、卡通治愈系的萌物造起来。
如果你是潮人球鞋滑板控,你是数码控,你是各种未完待续的主题控…
如果你是全能王,能hold住任何画风,那么你只需要想想你的兴趣所在,
然后将它做成一款你想安利给任何人的皮肤就好啦~
不妨用你的画笔,将你所爱搬到指尖键盘上!更多脑洞,等你来开!
-
怎么让你的输入法皮肤动起来?
大多数输入法皮肤,都是安静地美好着,然而一些特定主题的皮肤加上动效后,更能锦上添花、烘托气氛。
开屏动效
了解了设计规范,选好了皮肤主题,那么来看看你的皮肤可以加哪些动效呢?
在调起键盘时可以添加开屏动效,开屏动效以GIF格式文件进行展示。你可以做任何关于你皮肤的动效,并生成GIF格式。
动效播放时间最好是保证在2秒以内呢~
如下图“星球大战”皮肤:
预览视频
预览视频是在皮肤启用页的状态下进行播放为AVC(h264)编码的MP4格式,可以配合音效,视频保证在10s以内。
如下图“彩虹键盘”皮肤:
按键联动按下特效
下图“功夫熊猫”皮肤实现的原理则是:
当点击中间按键后,剩下的熊猫都会看向中间的方向。当按下其中一个按键后,会带动其他按键背景换图片。
挂件动效
按下挂件动效:字母键、功能键可添加挂件动效,可以通过按下的动作引起一种或多种元素按照设定的轨迹出现。
如“彩蛋”皮肤,空格键按下会蹦出小兔子,字母键按下会蹦出糖果。
背景挂件动效
可以按照设定的时间和移动的轨迹让一种元素在大背景循环运动出现。
如“樱花春雨”皮肤大背景上的花瓣不时飘落,“蝙蝠侠大战超人”皮肤大背景上的云朵水平有右移。
讲了这么多现有技术支持的动效形式,期待有想法的你在可实现基础上能挖掘出更多创意动效玩法!
搜狗输入法官方QQ群:610305890
如有任何疑问请发邮件至Ime-open@sogou-inc.com