PDF《搜狗输入法皮肤制作教程（提高版）》

搜狗 版权所有请勿转载 搜狗输入法皮肤制作教程(提高版) 前言:通过搜狗输入法皮肤教程(基础版 http://pinyin.

sogou.com/help.php?p=makeskin)的学习,相信广大作者对 搜狗皮肤的制作都有了一定了解,我们也惊喜的看到越来越多的作者加入了皮肤制作的行列.随着对优秀皮肤奖励 的增大,我们特撰写了此提高版教程,旨在帮助有一定设计基础的皮肤作者更快找到皮肤设计的精髓,设计出高质 量皮肤,进而获得更多奖励. 专题提纲: 1. 输入框及状态栏的细节设计 2. 风格与颜色的选择 3. 皮肤列表缩略图及预览图的设计,具体 4. 皮肤拉伸方法 说明: 1. 每个专题分为内容讲解、设计 Do&Don't 两部分,Do 部分表示官方建议或鼓励的设计方法,Don't 部分表示官方 不建议或不支持的设计方法,皮肤作者可根据实际情况设计皮肤 2. 本教程选取的所有图例具有优秀皮肤的普遍代表性,符合每个专题要求 3. 更多优秀皮肤请点击:http://pinyin.sogou.com/skins/skin_list.php?order=dl 搜狗 版权所有请勿转载 1. 输入框及状态栏的细节设计 (1) 输入框及状态栏形状选择: (2) 输入框布局:常见输入框布局有以下几种,不论是线条还是框形目的都是要对拼音串和候选项做上下的 区分,无分割图形的皮肤请注意行距 搜狗 版权所有请勿转载 (3) 状态栏布局 搜狗 版权所有请勿转载 状态栏与输入框合二为一: (4) 输入框、状态栏的装饰: (A) 主形象位置 搜狗 版权所有请勿转载 (B) 边框装饰: ? 无装饰:常用线条、色块等表现边界 ? 边框装饰:在边框内、外 、上进行艺术处理 搜狗 版权所有请勿转载 (C) 按钮装饰: 通过以下鼠标动作中导入不同图片、颜色、动画达到动态效果 (5) 分割线的设计: ? 无分割线:注意拼音串与候选项的距离 ? 直线分界:运用普通直接分界 搜狗 版权所有请勿转载 ? 色块分界:运用上下颜色对比达到分界目的 ? 其他效果: 皮肤细节设计 Do&Don't: Do: (1) 输入框背景及细节恰到好处,底纹背景或形象不遮盖拼音串和候选项,背景主干形象尽量放在输入框两侧, 不影响输入串显示,图例如下: 搜狗 版权所有请勿转载 (2) 状态栏追求变化,使用不规则状态栏(非条状),或通过按钮状态变化达到"动态"效果,图例如下: 状态栏"动态效果"的制作:一般选择"状态栏设置→系统菜单"按钮,在鼠标普通、悬浮、按下

3 个状 态导入不同图片,输入法即可根据鼠标状态变化进行图片切换,达到"动态"效果. 搜狗 版权所有请勿转载 (3) 重视质感、光泽、层次感,图例如下: (4) 输入法字体颜色与背景色有对比,便于用户输入(图例见上),配色可参考http://www.joedolson.com/color-contrast-tester.php?granularity=40&color=%23B8DF24&pass=on&pa rtial=on&type=wcag2 Don't : ? 输入框或状态栏单一色条状设计,无色彩、光泽、层次变化 ? 背景装饰影响正常输入 ? 字体与背景颜色类似 ? 输入串放在背景图片形象上 2. 风格及颜色选择 (1) 黑白手绘:选用铅笔效果的图片,描绘简单可爱的风格 搜狗 版权所有请勿转载 (2) 简约质感:以简单的线条和颜色追求视觉上的质感变化,如透明半透明 aero 效果、apple 风格等 (3) 华丽饱满:卡通类 搜狗 版权所有请勿转载 风格及颜色选择 Do&Don't: Do: (1) 简约型:注重细节,如边框、按钮等,追求"简约不简单",如下: (2) 华丽型:色彩饱满细节众多的同时考虑实际使用效果,参看第一点,图例如下: (3)颜色:加强配色的合理性,考虑用户的接受度(图例见上) Don't: 搜狗 版权所有请勿转载 ? 单色输入框或状态栏 ? 颜色过于绚丽影响输入