花渡皮肤设计流程

花渡·故事-----花渡香犹在，设计苦自知（浅谈花渡皮肤设计流程）每款花渡的皮肤从构思、设计到效果图设计、制作、调参数直至完工，都不是轻轻松松就设计完成的，凝聚了作者的心情、心思、时间和创意，希望所有购买商业版花渡皮肤的客户能够体谅作者的辛苦，在您用漂亮的花渡皮肤打字的时候，避免共享就是对作者最大的支持和继续设计的动力。简单写写设计花渡系列皮肤的过程。第一步：主题构思不管是原创设计，还是动漫类皮肤的设计，每款皮肤作品都不应该独立存在，应该有一个可以清晰表达的主题，没有任何主题的皮肤，即使设计的再华丽也如行尸走肉，作品如能承载体现设计者内心只所感所悟所想，就可以称得上是上佳作品。花渡的每款皮肤，都有一个特定的主题，从花渡系列皮肤的名字上可以看出一些来，其实每款皮肤背后都有一个设计故事，不过由于设计师的文笔太差，逻辑感太乱，每每设计完成皆不敢下笔：（，最后只能图个省事，做效果图了事。在此自我反省认真检讨一下。主题构思完成之后，就需要从素材库中找到合适的符合主题的素材，找不到的话，需要自己设计，这个过程比较痛苦，可能素材都很漂亮，但凡不符合主题的素材再漂亮也不要用：）第二步：花渡竖排设计找到花渡素材之后，开始设计，花渡皮肤一般从竖排输入框作为设计起点，因为竖排的输入框设计空间最大，相对也最容易展开创意。搜狗皮肤的设计布局符合UI设计中用到的九宫格（九宫格中的九个区域只是虚拟的九个区，不见得非要均等分成九个区），九宫格中左上，右上，左下，右下四个角落加上竖排输入框的整体背景，是设计的重点。所有花渡输入框（横排，竖排以及分窗口）在设计上有个原则，九宫格的横向中间一排，和竖向中间一列的五个区块在皮肤使用中会被上下左右拉伸或者平铺，务必要考虑拉伸平铺变形之后的背景图案保持完整且不影响文字的辨识度。在这点上，有些花渡作品设计的还不够好，有待提高。输入框是为用户打字服务的，所以实用性是要放在第一位的，美观第二位，在输入文字的过程中，竖排输入框左上角和左下两个区块非常重要。a.左上角是紧邻文字输入区域的部分，这里的设计一定要简洁，不要影响文字输入。4.2版本的皮肤编辑器害可以设置输入焦点坐标，能够提高输入的可用性。b.左下角显示候选文字的最后几个字和上下页的三角按钮，注意这里的设计务必要考虑背景是否会影响文字和上下页的辨识度。c.右上角和右下角在设计力度上可以大一些，不过也要兼顾实用性，文字最右边到皮肤右边界的距离是否恰当也会影响美观和实用性，用皮肤编辑器调整时需要反复的调整测试。设计完成竖排皮肤，理想状态是可以只是任意大小字体的自定义设置。花渡的竖排输入框一般会支持14号字~42号字体，常用的是16号字、18号字。16号大小的字用的最多，从实际使用上来看，17寸1024*768分辨率的电脑屏幕使用14和15号更加协调一点，16号字稍微大一点点，对于现在普遍应用的宽屏显示器，16号刚刚好。用户不喜欢的话可以通过自定义修改字体大小。第三步：花渡横排设计竖排设计好之后，接下来设计横排输入框，从竖排的设计图直接切换到横排也需要好好琢磨一下，怎样才能更好体现同一个主题。横排设计同样分九宫格，设计的原则和竖排有些不同，从理想状态考虑九宫格的设计，设计完成的横排输入框可以支持任意字体大小的自定义设置，但是由于横排输入框面积太小，可设计的空间有限，类似花渡这种类型的设计若想达到这个理想状态太难了，目前只有花渡·镜台横排支持字体自定义大小，可以到30几号字大小都没有问题，随着字体增大，皮肤的整体美观性同时在下降，协调性也在降低。花渡皮肤重点考虑左右拉伸平铺变形，上下拉伸平铺变形暂时不考虑。a.左上角部分和竖排一样，要注意实用性。b.左下角由于没有翻页的按钮可以多考虑一些美观性，c.左上+中左+左下三个区可以考虑合成一个整体来设计。d.中上+中间+中下三个区域需要能够拉伸平铺之后保持图像的完整一体，不能影响整体的设计美。e.右上+中右+右下三个区同理可以考虑合成一个整体来设计。第四步：花渡分窗口的设计这步来说相对容易一些，就是操作上有点麻烦，需要不断的切图，输出......。第五步：花渡状态栏背景设计状态栏虽小，但确是皮肤设计的难点所在，状态栏一般情况下会始终在桌面上显示，设计的不好，即使横排和竖排输入框设计的再漂亮，也不能算是一款完美的皮肤。状态栏的外形基本上分两种，一种是中规中矩的矩形，另外一种就是创意无限的异型.青菜萝卜各有所爱：），不少人喜好矩形，而另外又有很多用户对异型情有独钟，这就看设计师自己的喜好了，两全的方式就是各设计一种，分成两个皮肤。第六步：花渡状态栏按钮设计按钮要根据上一步的状态栏背景来设计，如何让两者相互搭配焕然天成对设计师来说是一个很难的考验，按钮的三个状态（普通状态，鼠标滑过，鼠标点击）也要很好的考虑清楚，省力的方法就是三个状态使用同一张图片：）按钮的个数要设计师自己根据状态栏背景图片的大小来确定留下哪些，舍弃哪些：a.务必保留的按钮：中英文按钮、全半角按钮，中英文标点符号按钮b.建议保留的按钮：软键盘按钮、简繁体按钮。c.其他按钮：设置按钮（花渡的很多皮肤舍弃了设置按钮，通过状态栏点击鼠标右键可以很方便调用出设置菜单来）、搜狗搜索按钮、搜狗登录按钮。d.全双拼按钮：这个按钮比较特殊，在拼音输入法里用来切换全拼和双拼，对于双拼用户没有这个按钮的话很不方便，不容易判断使全拼还是双拼状态。由于搜狗五笔输入法也可以使用搜狗拼音输入法的几万种皮肤，而在搜狗五笔输入法的状态栏上，这个按钮是要被屏蔽掉的。所以在设计全双拼切换按钮的时候，如果照顾双拼用户保留这个按钮，务必要考虑清楚当这款皮肤被搜狗五笔用户使用的时候，你所放置的全双拼按钮是空（透明）的，如果按钮位置是空（透明）的，是否会影响状态栏的整体美观和平衡感。第七步：花渡皮肤零件导入皮肤编辑器车间搜狗公司提供的输入法皮肤编辑器就是组装车间，前几步设计完成的图片就是皮肤的各种零件，现在我们来看看有多少种零件需要组装：a.竖排背景图片：同窗口1张，分窗口2张b.横排背景图片：同窗口1张，分窗口2张c.状态栏背景图片：1张d.状态栏按钮图片：根据按钮数量和状态不同，7张（三个按钮，按钮状态合一）~48张（全按钮，按钮状态齐全）第八步：花渡调整组装零件导入之后是非常关键的一步“调整组装”，搜狗的皮肤编辑器提供了最大限度的调整参数，可以通过可视化的方式进行设置。详细调整的方法不说了，简单谈几个注意的要点。a.平铺还是拉伸这两种变形方式是用户在输入文字的时候根据候选字数变化而变化，大致的选择原则如下：背景如果是可连续的图案，选择平铺方式。如果是渐变或单一色彩，选择平铺。特殊情况下是图案不可连续该怎么办，这时候就要多测试，看哪个效果在使用中好取哪个。2.输入焦点坐标设置默认打开编辑器时是0，0坐标，对于所有花渡的皮肤来说，如果用默认值的话，在输入文字的时候，输入区域距离首选字都有段距离。设置输入法焦点坐标的原则就是尽可能的让首选字靠近输入区域的文字焦点位置，同时又不要让皮肤遮盖输入焦点。3.分割线的取舍用来区分拼音串和候选字符串的分割线，商业版花渡全部都舍弃了分割线的设计，分割线虽然有助于拼音和汉字的区分，但同时也会破坏皮肤的整体感，不愧是“分割线”：）。没有必须留或必须舍的建议，完全看设计师的喜好。4.透明色的取舍早期搜狗输入法皮肤不支持PNG，图片必须处理成windows系统图片格式BMP。使用BMP图片设计皮肤必须要指定那种色彩为透明色。现在已经支持PNG图形格式，花渡系列皮肤全部采用PNG，直接在图形处理软件中设置好透明区域，在编辑器中也就无需指定透明色了。5.字体大小和类型搜狗输入法皮肤编辑器默认是中文宋体16号字英文字体Arial，这个设置在XP系统和Vista系统下使用都不会有问题，标准字体，很ok。字号的问题在上面已经表述过了。这里讲讲字体类型。如果大家都是用标准的宋体字，岂不是太单调了，字体应该更加丰富多彩一些，设计师可以指定不同的中文字体和英文字体。推荐设计师使用下面的字体让输入法皮肤靓丽起来。a.雅黑字体（vista字体专用）；b.浪漫雅园字体；c.华康少女字体；d.方正兰亭纤黑字体；e.其他任何漂亮的字体。6.色彩搭配文字和背景在一起使用时，要保持文字的可识别程度和长时间使用的舒适度，对比过亮过暗的话，长时间使用都会导致眼疲劳。如何找到最佳色彩的搭配，一靠色彩的天赋，二靠积累，多看色彩类的设计作品，多浏览配色网站（比如adobe公司的kuler配色站）的示例，慢慢的，从中会找到色彩搭配的灵感：）第九步：导出皮肤文件通过皮肤编辑器，导出搜狗输入法的皮肤安装文件，分别设置不同字体（两种字体宋体和雅黑）字号（两种字号16和18）这步方法简单，过程繁琐，设置不同字体字号时，很多细节参数需要进行微调以保证搭配的协调性。最后一一导出四款皮肤：a.宋体16号---》xp系统使用b.宋体18号---》xp系统使用c.雅黑16号---》vista系统使用d.雅黑18号---》vista系统使用