UI视频教程之游戏UI设计过程

2024-11-15

UI视频教程之游戏UI设计过程（共4篇）

1.UI视频教程之游戏UI设计过程篇一

???

随着移动界面设计的飞速发展，流行的设计风格也在不断变化，一个好的UI设计会给用户带来深刻的记忆、好用易用的体验。从UI设计的版式、信息层级、图片、色彩等视觉方面的运用，直接影响到用户对App的最初感觉，而在这些内容中，色彩的搭配方案是至关重要的，产品整体的定位、风格调性都需要通过颜色，给用户带来感官上的刺激，从而产生共鸣。色彩是移动设计最重要的因素之一，并且有自己的流行趋势。色彩是第一印象的所在，具有关键的作用。

一、色彩基本概念

色谱

把一条连续彩虹中的“可视光”分解成从蓝到红的色谱

色环

通过把两种或两种以上的颜色混合在一起，就可以得到一种特殊的颜色。从本质上讲，色环就是色谱可以看到的颜色所形成的线性连续环。

三原色

三原色是能够按照一些数量规定合成其他任何一种颜色的基色。

三原色：红、绿、蓝

色彩三原色：红、黄、蓝

色光三原色：红、绿、蓝

喷墨打印机的墨盒。四种墨色：蓝绿（青）色、红紫（洋红）色、黄色和黑色。

颜色的不同是由于电脑用的是正色，而打印机用的是负色。显示器发出的是彩色光，而纸上的墨则吸收灯光发出的颜色。

邻近色

邻近色是已给出的颜色之外的任何一种颜色。如果从橙色开始，它的两种邻近色应该选择红和黄。

用邻近色的颜色主题可以实现色彩的融洽与融合。

互补色

互补色是色环中的直接位置相对的颜色。如果想使色彩强烈突出的话，选择互补色。

分离补色

分离补色由两到三种颜色组成。选择一种颜色，它的补色在色环的另一面。可以使用补色那一边的一种或多种颜色。邻近色作为背景，补色作为文本色。在这种方式下，背景色之间完全地融合在一起，不会招来人们特别明显的注意，并且能够使文字突出出来。

组色

组色是色环上距离相等的任意三种颜色。组色被用作一个色彩主题时，会对浏览者造成紧张的情绪。因为三种颜色形成对比。

在UI设计中，如果界面中颜色比较多，可以调整色彩的明度及饱和度，或者运用黑色、白色、灰色等颜色作为过渡，降低页面色彩的冲击感。

二、色彩搭配技巧

不同的色彩——不同的心理感受----色彩同主题相适合

红色---热情，活力

绿色---宁静，希望

橙色---轻快，时尚

黄色---明度高

蓝色---凉爽，清新，专业

白色---洁白，纯真

黑色---深沉

灰色---中庸

三、色彩与心理

暖色

暖色由红色调组成。比如红色、橙色和黄色。它们给选择的颜色赋予温暖、舒适和活力，也产生了一种色彩向浏览者显示或移动，并从页面中突出出来的可视化效果。

暖色调会让人产生的心理效应包括：

1、温度感暖色会让人觉得温度较高

2、空间感暖色会产生膨胀效应，会有向外突出的感觉

3、暖色更容易唤起食欲

4、暖色在较为饱和时，会给人刺激的感觉，有提神的作用，但是如果较为柔和，反而会具有让人感觉安心的作用

冷色

冷色来自于蓝色色调，

比如蓝色、青色和绿色。

冷色调会让人产生的心理效应包括：

1、温度感冷色会让人觉得温度较低，较为凉爽

2、空间感冷色会产生收缩效应，会有后退的感觉

3、冷色会让人更冷静，身心放松，具有催眠的效应

UI设计中，不同行业的App会对色彩有不同的要求

食品行业多用红色、橙色等暖色，更能唤起食欲。黄绿色与紫色会抑制食欲。

巧用颜色的识别性设计UI

所谓颜色的识别性，是指在众多颜色中，容易与其它颜色区别开的性质。重要的功能，颜色辨识度要高。

诱目性的运用

所谓颜色的诱目性，是指颜色引起人们注意的程度。诱目性越高的颜色越容易引起人们注意。彩色比无彩目性高，饱和度高的颜色比饱和度低的诱目性高，暖色比冷目性高。诱目性最高的是红色。将希望用户点击的内容使用诱目性更高的颜色，是一种聪明的设计

合理使用颜色

我们在设计UI时，也许会希望使用更新颖的配色，但是要合理。例如，绿色代表着安全、通行、准许的意思，可以让人感到轻松，缓解压力，所以绿色通常用于开始按钮和下载按钮，还有成功提示页面。灰色的按钮一般情况下，都会代表着禁用状态，因此尽量不要将可以正常点击的按钮设计为纯灰色背景，会让用户产生困惑。

四、配色与行业

在实际进行UI配色选择时，应该根据App的行业分类，客户的需求等进行选择。不同的颜色会给人不同的感觉，冷色调会给人专业的感觉，暖色调则更适合营销等。

游戏界面配色：

游戏界面多选用鲜艳、饱和度高的色彩，这样的配色娱乐感较强，可以给人轻松欢快的感觉。

娱乐类App界面配色：

娱乐类App界面颜色较为多样，与具体内容有关。深灰色的背景色运用较多，因为搭配较为方便，而且可以给人一种高端大气上档次的赶脚。

购物类App界面配色

暖色调较为吸引注意力，而且能刺激人们的购买欲望，因此购物类App多采用暖色调。

新闻类App界面配色

新闻类App的配色也较为多样，但有一个共性是，因为新闻类App界面上的文字图片都比较多，因此多采用白色或浅灰色背景，给人一种较为干净整洁的感觉。下图最后一个App是一个国外的新闻类App，采用了黑色背景。各位看官们可以自行揣摩其中的奥妙。

商业类App界面配色：

商业类App的配色由于其行业不同，也会有不同的选择。很多公司的App会选择自己公司VI形象的颜色作为App配色，这样的配色效果更具有企业的整体性。

五、小结

UI设计中色彩使用的技巧：

黑白灰最适合配颜色

调整颜色的饱和度和明度，可以让颜色给人全新的感受

用一个色系中的色彩是最安全的方式

不要将所有颜色都用到，尽量控制在三种色彩以内。

冷色调适合作为背景，暖色调适合作为前景

2.QQ输入法皮肤UI设计教程篇二

以上是这个皮肤的简短描述，附上地址 skin.py.qq.com/fcgi-bin/showdetail?skinid=4293197210

关于这个皮肤设计，主要是为了参与近期举行的QQ拼音皮肤全民大赛。要不是这个比赛逼着我，或许我也憋不出这么一个东西出来。

至于说创作灵感，其实我这个设计是没有什么灵感的，主要还是在于观察实物吧。我觉得我还是有点拿来主义，看到好的东西就拿来用。这次的设计我有临摹过不少的实物，并且参考了各种各样的造型。

个人觉得这次设计的一个困难之处在于：如何把5个按钮的各个状态融合到整个设计当中，而不是呆板地加在里面，

这个是一个相当考想法和创意的活儿。我在介绍里面也有讲到：

此皮肤根据一锅汤的外形联想而设计，枸杞、冬菇、汤匙、叶子分别对应着中/英文标点、全角/半角、打开工具箱以及用户登录四个按钮，左上方的红色按钮是中英文输入法的切换。

这些地方其实我是有一个思维的过程的。起初我确实是打算把按钮独立出来，加在整个锅的上方、下方或者是外边的某处，但是始终觉得汤里面没有东西似乎很不好，也显得汤纯粹是摆设，所以就在想能不能在汤里面加一点元素。于是就有了蘑菇、枸杞、大勺子还有那些漂浮着的小东西。进而发现把按钮融入进去其实是很好的主意(其实我之前就想过了，但是怕难以达到预期效果)，所以还是尝试了一下，也就成了现在的这个样子。

至于这个设计稿的制作过程，我就不详细讲解了，主要的技术还是那么多，大家都会。

我可能就把一些简单的步骤罗列一下吧。

大概就是这么多，当然了当中还有不少细节需要注意，各个小物件的制作也是需要比较小心的。我的一些心得就是，最好找到实物来临摹，当然自己的临摹能力就很重要了。这样颜色和质感上都能真实许多。

3.UI视频教程之游戏UI设计过程篇三

《ai ei ui》第一课时教学设计

义乌市开发区小学宋春芳

教材分析

《ai ei ui》是义务教材教育课程标准实验教科书语文一年级上册拼音部分第9课，是复韵母教学的起始课，以游戏为主线 “活”化课堂教学－－《ai ei ui》第一课时教学设计。因此，复韵母的字母组成和发音是本课的教学重点和难点，在教学中应突出对学生学习汉语拼音兴趣的培养。

设计理念

《语文课程标准》提出，在语文教学中要重视突出学生的主体地位，改变学生的学习方式，改变以教师为中心的教学模式。因此，把课堂教学作为培养学生的创新精神和实践能力的主渠道，应使课堂教学成为学生创新学习的过程，让学生成为学习的主人，学生自始至终感受到成功的愉悦，从而增强他们的学习兴趣。

汉语拼音是帮助学生认读汉字、普通话的重要工具，但学习起来有些枯燥乏味，易引起学生厌学情绪。《语文课程标准》中的“实施建议”指出：“汉语拼音教学尽可能有趣味性，宜以活动和游戏为主。”因此，本堂课的设计，我就让游戏贯穿整个课堂为孩子们营造了良好的乐学氛围，从而激活了孩子们的思维，使孩子们在会心的笑声中动手动脑，合作探究。

教学流程

一、创设情境，复习导入。

1、歌曲导入（伴随着《郊游》的音乐声，学生自由做动作）。

师：小朋友，我们今天到拼音乐园去秋游，好吗？

[良好的开端是成功的一半。一开始就将学生带入有声有色的拼音乐园学习，激起了学生学习拼音的兴趣。]

师：瞧！拼音乐园里有好多气球。

（黑板上贴有不同颜色的气球，背面写有学过的单韵母。）

2、生摘气球。

师：你们喜欢漂亮的气球吗？你喜欢哪个就把它摘下来，不过气球背后有一个小秘密，你得把它说给大家听，说准确了，就把这个气球送给你。

师：这些气球中的字母合起来有一个总称叫什么？（单韵母）

谁知道单韵母有哪些特征？

3、揭示课题。

师：看老师变魔术（移动还剩在黑板上的两个气球）让气球“i”往上飞，飞到“a”的后边就组成了复韵母ai。今天，我们就来学习第9课ai ei ui

[这样安排复习导入，体现了灵活性、层次性、多样有趣的形式，使学生拾级而上。]

二、自主探究，学习新知。

1、学习复韵母ai，小学一年级语文教案《以游戏为主线 “活”化课堂教学－－《ai ei ui》第一课时教学设计》

（1）学生尝试念ai。

老师观察后分别请出一位发音正确的学生和一位发音不正确的学生上来念ai，让全班同学观察、区别、评价。

（2）教师边评价、边示范，讲清发音要领。

（3）在语言环境中进行四声练习。请同学们看书中的图，你发现了什么？

如：姐姐高，弟弟矮 ai ai ai

（4）指导书写ai。

请同学们观察一下ai的家在哪儿？师范写一个，生试写两个。

[这部分内容，学生通过观察、发现、评价、练习学会了ai，充分发挥了学生自主学习的精神，又提高了学生的评价能力。]

2、课间休息。

师：同学们刚才大家学得很认真，老师奖励你们一个游戏。

同桌板手腕比赛（老师喊加油）。

[这环节安排既调节了课堂气氛，愉悦了学生的身心，又为下面的学习作了铺垫。]

3、学习复韵母ei。

（1）师：刚才听到小朋友们憋足劲，都发出了“哎—”的长长声音，声音短一点就是今天学习第二个韵母ei。

（2）看图，谁说说怎么利用图记住“ei“的音、形。

（3）在语言环境中进行四声练习。

（4）书写指导。

[从游戏引入，再通过看图、编顺口溜等方法来学ei，学生学起来兴趣盎然、易懂、易记。]

4、小组合作，学会ui。

（1）同桌或小组合作看课文插图、编小故事、做游戏学习ui的音形。

（2）反馈。

a、指名看图说话，小女孩围围巾，“ui”的字形象围巾，“ui”的读音就是“围巾”的“围”的读音。

b、两个小朋友上来打电话。

如：甲：“ui，你好，王小伟，我是薇薇。” 乙：“你好，薇薇！有什么事吗？”

甲：“我今天学会了三个复韵母ai、ei、ui。”

„„

[这部分内容，充分发挥了学生合作探究的精神，在观察图画中，在游戏中学会了韵母ui。]

---------------------------

三、巩固练习。

课前师生共同用硬纸片做好若干个花盘，（班内学生分成几个合作小组就做几个花盘）若干个写好音节的花瓣，平均分给每个小组。

1、师：拼音乐园里的东西真多，刚才各小组都分到了一个大花盘和4个写有音节的花瓣，有梅花、有喇叭花、有杜丹花„„如果小组内同学都练会了，就可以把四个花瓣逐一贴到花盘上，全贴完了，就可以把大花盘贴到大花园里，（手指教室后面的学习园地）。让我们的花园变得更美丽。

4.UI设计UI图标设计初阶要先型篇四

UI最重要组建之一就是图标，随着扁平化设计的发展趋势，越来越注重图标的简洁与寓意表达，平面图标已占主导地位，每位设计师所处的阶段所关注的要点是不一样的，我把图标设计分为2个阶段–初阶与高阶，这样分是为了有步骤性的学习和进阶的加强，当然，能人的话一步到位，对于新人来讲会较难，需要实际工作中辅导与自己经验总结。我不会华丽高大尚的语言，但是我可以分享一些实实在在的基础方法，也是这几年会给带的学生反复必讲的入门辅导，有自己成熟方法表达的设计师可忽略这里，这里先说初阶的设计关键要点。

【一】概念类别

扁平化图标大部分无非就是剪影表现，而这里为什么重点是讲图标的形状设计，而非色彩，因为一切先有形才考虑下一步。形不好再怎么营造整体风格都白费力，好比建筑造型与装修的关系，而色彩等营造的风格都可另起文章分析。图标造型表现上无非就是典型的2种：面与线。运用这两种基础元素去造型也可以进行多种组合不同的表现。组合造型一般有单体造型、多个元素组合造型，线与面之间的独立与结合的变化。

l 简化的微写实图标

这类通常是彩色一体表现，造型和组合上较写实，不是纯剪影，是写实过渡来的简化，又接近剪影，扁平简化设计，这里主要是利用面和颜色来进行造型的设计。质感风格上也有6种(已有人分析)，大概是纯平面、折叠、轻质感、折纸风、长投影、微立体。这种相对剪影的好画很多，也更加容易塑造风格，更多是在色彩上有得发挥和考究，用在界面里也是最为突出的。最近还非常流行用色块来进行二维、三维的装饰表达，叫所谓的“低面建模”,感兴趣的去搜一下。

上面提到的元素组合，比如下图这个图标目前是2个元素–信封加信纸，如果还要再加什么功能状态示意，最多在右上角加个很小的消息提醒。因为元素越多越复杂，所表达的含义也就越多，同时也会影响造型的调动。不管多少个元素总有一个最重要的对象，其他为辅助图形，在塑形大小复杂度上有区别。

1.1本文半原创图例

l. 剪影的正负形图标

这类通常是单色表现，当然也有综合彩色的。其更加简洁抽象，言简意赅，高度提炼精华，讲究表象意境，具有理解的门槛。所以这才是最难设计的一关。非常考究设计的理性与感性之间在功能传达上的逻辑思维。也是UI界所谓现代极简主义的代表，注意，没把握好就会变得很“空虚”，把握好了就是时尚的feel啦~

负形图标是以线绘制的图形，高度的轮廓概括，就跟画骨骼一样的要求精准到位，也叫线形图标。负形剪影是所有图标中最讲究也最难表达型的一种风格，如果画不好就很容易俗气和简陋。

正形图标是以面绘制的图形，也有和线综合表现情况，自己根据需要进行创造变化吧。通常与负形图标之间做当前状态的转换，手机tab上最常见，如ios7。

优点：简洁清新优雅;极具现代感(虽然远古时代就有高度概括的符号表达，这里指的范围是互联网上的全新应用);具有设计与涵义综合的拓展性;还可以完成一些抽象词汇的图形传达。

1.2本文原创图例

图标为上传到云端的之意，这里的主对象是云，所以箭头和云的比例是不同的，上传箭头是辅助图形。了解界定多元素之间的主次关系，就能够把握一个整体的造型走向。典型的基础表现就是上面两种，然后在实际绘制中根据自己的喜好和设计来进行融合，可以得出更加丰富的表现。

【二】设计技法要点1、关键节点绘制法

拟物化设计就是尽可能的绘制繁琐细节，追求丰富和相似度。而剪影图标则是相反，以简练为绘制手段。但是细节就没有吗，不是的，而是更加谨慎认真的注重每一笔，且越来越优雅。这里举例剪影图标绘制方法技巧，3步骤可以搞定，看似又简单又难，简单的是只是绘制参照物轮廓，保留基础识别性，步骤很少;难的是这调整的过程与产品环境的融合性，易用性，还有你自己的创意想法。说简单点就是去繁择简并经过思考改造过的设计过程。而最基本的最需要犀利眼神抓准的是造型的关键节点，雏形出来后再根据想法调整。

l.提炼精华勾勒轮廓

通常在绘制已有参照物的基础上去设计一个图标，可以根据你喜欢的造型参照物去进行分析，先抓取到参照物的关键节点，几何绘制出来一个相似的基本图形。

2.调整线锋优雅得体

基础雏形出来后就开始加入自己的想法调整线锋，线条走向决定造型。这个时候就得要调多几个版本了。设计师的处女座精细和纠结情结就在这里洒汗了，不断调整对比，挑选出一个最优再进行下一步。

3.增特有细节出风格

最后一步的塑形，就是画龙点睛!造型的特点就在这一步去完成，

2.1 本文原创图例

对于新老设计师来说，这样的方法都是比较可取好用的，交互设计师也可以这样快速入门哦亲!尤其是第一步骤，能否非常快速的出雏形。下面是其他案例的设计方法欣赏，跟我上面总结的一样道理。

2.2图例来源于Digial Art

2.3图例来源于iconwerk

2、精致的基础要素

精致即精细极致。看似简单的图标其实并不是随便了事，但知道了这些基本要素你就可以完成一个合格的图标了。好的图标是谨慎认真的注重每一笔每一像素每一矢量锚点的，尽可能的往精美优雅的方向努力吧骚年~

1.犀利清晰

需要锻炼厉害的眼睛，使出你的火眼金星捕捉每个像素之差，像素满格才能清晰的呈现，细分出来通常会遇到以下3种情况，这也是最影响图标基本质量的问题点。

1)轮廓发虚

图标一定要用矢量绘制，但是新手很容易犯的第一个错误就是图标模糊的问题，也不清楚为何会这样。其实就是矢量边缘模糊产生的问题，也是个人绘制的不良习惯造成。避免这个问题，必须在100%画布上绘制图形，而且不能直接推动图标放大缩小，即使这样改变大小了也要放大画布调整路径的锚点，反复查看及校正是否对齐1px网格，而不是0.1~0.9px，正是不满1px格才会生产虚线。而圆形的绘制保证十字架4个边缘点对准就可以了。

2.4本文原创图例

2)斜形发虚

斜线也是会有模糊与精致之分的，不仔细对比其实是比较难看到问题，可能很多人都会碰到图形进行倾斜效果时是有锯齿的，那就是角度的处理问题了，自己进行多角度对比下试试，会发现哪一个角度最清晰。也可以将图层进行双层叠加，会非常犀利哦~

2.5本文原创图例

3)像素不够或多余

看下来都是像素发虚与清晰的原因都是一样的，下面这个例子是箭头在小尺寸情况下可点阵矢量像素绘制，如果是大尺寸(如上面最大的箭头示例)可以直接钢笔绘制。

2.6本文原创图例

总结一下上面的处理方法，坚持最少发虚原则：

2.7本文原创图例

2. 比例协调

图形内部结构要注意元素构成之间的比例，有黄金比例分割也有感性的平衡方法。严谨的图标比例可参照苹果IOS图标规范案例，打好内部统一结构线进行图形绘制和比例分配。

2.8来自苹果图标及来自Seevi Kargwal图例