admin管理员组文章数量:1532657
2024年1月5日发(作者：)
搜狗输入法皮肤制作教程（提高版）
前言：通过搜狗输入法皮肤教程（基础版/?p=makeskin）的学习，相信广大作者对搜狗皮肤的制作都有了一定了解，我们也惊喜的看到越来越多的作者加入了皮肤制作的行列。随着对优秀皮肤奖励的增大，我们特撰写了此提高版教程，旨在帮助有一定设计基础的皮肤作者更快找到皮肤设计的精髓，设计出高质量皮肤，进而获得更多奖励。
专题提纲：
1． 输入框及状态栏的细节设计
2． 风格与颜色的选择
3． 皮肤列表缩略图及预览图的设计，具体
4． 皮肤拉伸方法
说明：
1． 每个专题分为内容讲解、设计Do&Don’t两部分，Do部分表示官方建议或鼓励的设计方法，Don’t部分表示官方不建议或不支持的设计方法，皮肤作者可根据实际情况设计皮肤
2． 本教程选取的所有图例具有优秀皮肤的普遍代表性，符合每个专题要求
3． 更多优秀皮肤请点击：/skins/skin_?order=dl
搜狗 版权所有请勿转载
1． 输入框及状态栏的细节设计
（1） 输入框及状态栏形状选择：
直角圆角
自定义
（2） 输入框布局：常见输入框布局有以下几种，不论是线条还是框形目的都是要对拼音串和候选项做上下的区分，无分割图形的皮肤请注意行距
搜狗 版权所有请勿转载
布局1布局5布局2布局6布局3布局7布局4布局8
（3） 状态栏布局
搜狗 版权所有请勿转载
横向排列形按钮按钮按钮按钮按钮纵向排列形按钮按钮按钮内外环绕型按钮按钮按钮按钮上下重叠型按钮按钮按钮按钮自定义形状自定义
状态栏与输入框合二为一：（4） 输入框、状态栏的装饰：
（A） 主形象位置
搜狗 版权所有请勿转载
横跨形象无形象次形象主形象次形象次形象主形象主形象
（B） 边框装饰：
无装饰：常用线条、色块等表现边界
边框装饰：在边框内、外 、上进行艺术处理
搜狗 版权所有请勿转载
（C） 按钮装饰： 通过以下鼠标动作中导入不同图片、颜色、动画达到动态效果
（5） 分割线的设计：
无分割线：注意拼音串与候选项的距离
直线分界：运用普通直接分界
搜狗 版权所有请勿转载
色块分界：运用上下颜色对比达到分界目的
其他效果：
皮肤细节设计Do&Don’t：
Do：
（1） 输入框背景及细节恰到好处，底纹背景或形象不遮盖拼音串和候选项，背景主干形象尽量放在输入框两侧，不影响输入串显示，图例如下：
搜狗 版权所有请勿转载
（2） 状态栏追求变化，使用不规则状态栏（非条状），或通过按钮状态变化达到“动态”效果，图例如下：
状态栏“动态效果”的制作：一般选择“状态栏设置→系统菜单”按钮，在鼠标普通、悬浮、按下3个状态导入不同图片，输入法即可根据鼠标状态变化进行图片切换，达到“动态”效果。
搜狗 版权所有请勿转载
（3） 重视质感、光泽、层次感，图例如下：
（4） 输入法字体颜色与背景色有对比，便于用户输入（图例见上），配色可参考/?granularity=40&color=%23B8DF24&pass=on&partial=on&type=wcag2
Don't
：
输入框或状态栏单一色条状设计，无色彩、光泽、层次变化
背景装饰影响正常输入
字体与背景颜色类似
输入串放在背景图片形象上
2. 风格及颜色选择
（1） 黑白手绘：选用铅笔效果的图片，描绘简单可爱的风格
搜狗 版权所有请勿转载
（2） 简约质感：以简单的线条和颜色追求视觉上的质感变化，如透明半透明aero效果、apple风格等
（3） 华丽饱满：卡通类
搜狗 版权所有请勿转载
风格及颜色选择Do&Don’t:
Do：
（1） 简约型：注重细节，如边框、按钮等，追求“简约不简单”，如下：
（2） 华丽型：色彩饱满细节众多的同时考虑实际使用效果，参看第一点，图例如下：
（3）颜色：加强配色的合理性，考虑用户的接受度（图例见上）
Don't:
搜狗 版权所有请勿转载
单色输入框或状态栏
颜色过于绚丽影响输入
3 . 缩略图设计
Do
：
（1）在规定缩略图尺寸内，采用同题材背景烘托气氛，增加皮肤表现力，展示效果事半功倍 图片大小居中,带有相关宣传语
（2）以皮肤展示为主，配合背景缩略图，切勿喧宾夺主
图例如下：
/skins/view_?skin_id=139703
/skins/view_?skin_id=294923
/skins/view_?skin_id=280550
/skins/view_?skin_id=61283
/skins/view_?skin_id=4173
/skins/view_?skin_id=12501
/skins/view_?skin_id=7044
/skins/view_?skin_id=94709
Don't:
使用白色背景缩略图（可根据题材需要决定）
皮肤效果图过小，背景喧宾夺主
4． 皮肤输入框拉伸
Do：
（1） 满足输入框9个候选项拉伸需要，“距图片右”设置较大数值，避免输入串超出数据框或被形象遮盖
搜狗 版权所有请勿转载
（2）选择没有背景核心图像的区域拉伸，避免用户在输入长输入串时，形象拉伸变形
Don’t：
仅满足3-5个候选项的拉伸效果
选择在有图像的区域拉伸图片
搜狗 版权所有请勿转载
版权声明：本文标题：搜狗输入法编辑器操作指南 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/xitong/1704445515a91184.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论