第三课实操与配色讲解

十八期GUI实战

主讲老师：香香

网页设计上课时间：晚上8：00--10:00教学监督热线：新同学上课须知GUI网页实战精通VIP课堂：时光课堂上课时间：周四至周六20:00—22:00专业科目解答入学四部曲：作业要求：日期+GUI实战第X节+qq昵称提交文件PSD+JPG各一份本期会讲到的案例：APP图标的设计、原型图绘制、主题图标设计、APP界面设计0102030405教学监督热线：学习纪律1.每周四至周六，晚8:00点到10点上课，课中将会有老师进行考勤。2.上课时公频上不允许刷屏，闲聊等任何影响其他同学学习情况发生。3.不得在交流群，公屏等地方恶意攻击同学，吵架等。4.作业群用于老师发布重要通知以及批改作业答疑等。请密切注意作业群消息！不要屏蔽作业群。5.作业每三天提交一次给解答老师，周一作业解答课。6.作业超三次未交，直接拒绝批准从本班毕业，后期将不会发放毕业证，请务必完成每日布置作业。（如有特殊情况，请及时和老师讲）7.不得迟到，早退，旷课等。8.如有要事不能来上课，需提前向老师请假。9.不能来上课，只能看视频学习的同学，作业一定要按时交上来。教学监督热线：香香老师：2006年毕业于湖南师范大学美术学院，毕业的这11年中，我从事过网页设计，WUI设计，手游UI设计，GUI设计等工作。2006年-2008年土豆网的资深网页设计师2008年-2012年深圳市邮政局做网页设计主管2012年-2015年深圳动漫公司担任GUI设计总监

教学监督热线：CONTENTS目录01第一课UI设计的前景和相关概念第二课项目流程及布尔运算与实操0203第三课布尔实操与配色讲解第四节APP图标设计与安卓设计规范04第五课线性主题图标实操05第六课线性主题图标实操06教学监督热线：CONTENTS目录07第七课ios图标规范与ios主题界面第八课ios主题图标实操0809第九课拟物化图标实操（上）第十课拟物化图标实操（下）10第十一课ios、Android系统界面11第十二课APP建立规范以及布局规范12教学监督热线：CONTENTS目录13第十三课设计组件规范以及APP导航设计第十四课APP应用需求思维引导分析1415第十五课APP应用原型图框架（上）第十六课APP应用原型图框架（中）16第十一课APP应用原型图框架（下）17第十二课产品图片排版构图18教学监督热线：CONTENTS目录19第十九课APP引导页设计第二十课APP应用界面设计（上）2021第二一课APP应用界面设计（中）第二二课APP应用界面设计（下）22第二三课IOS、Andrioad系统适配、界面切图（标注、点九图）23第二四课学员作业点评，指导与修改操作24教学监督热线：03布尔实操与配色讲解香香老师的QQ交流群：614458443教学监督热线：教学监督热线：CONTENTS目录一，回顾上节课的主要内容二、APP的设计风格

1，扁平化（FlatDesign）

2，极简风格

3，MaterialDesign（谷歌APP设计风格）三、色彩常识及色彩搭配技巧

教学监督热线：二、APP的设计风格APP设计风格一：扁平化（FlatDesign）去除冗余、厚重和繁杂的装饰效果。而具体表现在去掉了多余的透视、纹理、渐变以及能做出3D效果的元素，这样可以让“信息”本身重新作为核心被凸显出来。同时在设计元素上，则强调了抽象、极简和符号化。更少的按钮和选项，这样使得UI界面变得更加干净整齐，使用起来格外简洁，从而带给用户更加良好的操作体验。优点a、界面美观、简约大方、条理清晰b、设计元素上强调抽象、极简、符号化，去除冗余的装饰效果突显App的文字图片等信息内容。c、完美兼容pc网站、安卓、ios等不同系统的平台和不同屏幕分辨率的设备，适应性强。缺点

a

、降低用户体验，b、缺乏直观，有些图标的意思会表达不清晰。

c、传达的感情不丰富。二、APP的设计风格教学监督热线：扁平化设计五大原则①、拒绝特效顾名思义，扁平化设计仅仅采用二维元素。所有元素都不加修饰——阴影、斜面、突起、渐变这样会带来深度变化的设计都是不应该的。从图片框到按钮，再到导航栏都干脆有力，需要极力避免羽化、阴影这样的特效。现实主义、3D、拟物化更是扁平化设计的大敌。二、APP的设计风格教学监督热线：②、仅使用简单的元素扁平设计中使用到很多简单的UI元素，比如按钮和图标。设计师更常用矩形、圆形、方形等简单的形状。元素独立。正角、直角、圆弧都非常常见。UI元素应该在保持高可用性的前提下尽可能的简单，保证应用或网站直观、易用，无需引导。为了同时达到简单但直观的效果，你可以尝试为按钮填充深色，以鼓励用户点击。记住，简单的元素并不意味着设计起来很简单，恰恰相反，扁平化设计理念的复杂度可以与任何其他设计风格相提并论。教学监督热线：二、APP的设计风格③、注重排版因为扁平化设计要求元素更简单，排版的重要性就更为突出了。字体的大小应该匹配整体设计，高度美化的字体会与极简设计原则相冲突。字形上可以应该使用粗体，文案要求精简、干练，最终保证产品在视觉上和措辞上的一致性。字体选择上可以使用简单的无衬线字体，通过字体大小和比重来区分元素。同时你也可以使用新奇的字体作为点缀，但一定要记得不能过火。排版的目的在于帮助用户理解设计。标签按钮等其它元素更注重增强易用性和交互性。二、APP的设计风格教学监督热线：④、注重色彩色彩的使用对于扁平化设计来说非常重要。你可能已经发现了，扁平化设计的网站、应用色彩明显要更加鲜艳、明亮。此外扁平化设计的项目也拥有更多的色调。一般的网站很少会使用3种以上的色调，但是在扁平化设计中，平均会使用6-8种颜色。扁平化设计的色调偏通常更有活力——色彩更纯。其主要、次要颜色通常都是非常大众化的颜色，然后再配以几种其它颜色。扁平化设计的另一个趋势在于复古颜色的使用——浅澄色、紫色、绿色、蓝色——都极为流行。二、APP的设计风格教学监督热线：⑤、极简主义扁平化设计生而简单，整体上趋近极简主义设计理念。设计中应该驱除任何无关元素，尽可能地仅使用简单的颜色与文本。如果一定需要视觉元素，你可以添加简单的图形。二、APP的设计风格教学监督热线：APP设计风格二：极简风格APP的极简设计风格如下：

界面：简洁整齐大方，回归自然，尊重自然规律，依据形态自然体现。明快而富视觉冲击力的个性图形，用色单纯洗练，删繁就简，以少胜多，视觉中心点明确。大面积的留白，使图、文、底主次分明，更具有强烈的视觉冲击力。交互：核心在于以人为本，更加重视用户自然的感受。通过交互来设计出用户希望出现的界面效果。下面的案例看的出来极简风格有三大特点：用色极简、造型极简、版面内容极简。

二、APP的设计风格教学监督热线：APP设计风格三：MaterialDesign设计MaterialDesign设计风格是兴起于谷歌安卓系统的5.1以后的。也是谷歌安卓手机操作系统的风格。也是谷歌推出了全新的设计语言MaterialDesign。MaterialDesign设计代表是卡片化设计风格。如今MaterialDesign将会慢慢成为全平台设计规范和APP设计风格的趋势。三、色彩常识及色彩搭配技巧教学监督热线：1、色彩常识PS为用户提供五种常用的配色模式，分别是灰度，RGB，CMYK，HSB与Web安全三、色彩常识及色彩搭配技巧教学监督热线：三、色彩常识及色彩搭配技巧教学监督热线：三、色彩常识及色彩搭配技巧教学监督热线：三、色彩常识及色彩搭配技巧教学监督热线：三、色彩常识及色彩搭配技巧教学监督热线：互补色：色轮中，相距180°的色彩为互补色。在配色系统中，互补色是对比最强烈，但视觉冲击力最弱小的配色模式。对比强烈是因为色相的差异巨大，冲击力弱小是因为两个互补色相调和将使色相消失，产生无彩色灰，互补色的这个消色特点使得这种配色可以降低视觉疲劳。临近色：色轮中，凡在夹角60º或相距三到四个色块之间的颜色都是邻近色。在配色系统中，邻近色配色属于中对比度的配色模式，色调相对一致，视觉冲击力一般，适合表现情感相对统一的题材...对比色（分裂补色）：色轮中，任何一个色彩对面90°夹角中的色组是该色彩的对比色，在配色系统中，对比色的配色效果与互补色类似...三、色彩常识及色彩搭配技巧教学监督热线：三、色彩常识及色彩搭配技巧教学监督热线：教学监督热线：三、色彩常识及色彩搭配技巧教学监督热线：三、色彩常识及色彩搭配技巧教学监督热线：2、色彩搭配技巧在设计APP的时候，有了好的框架和页面设计，而色彩把握不准，则会导致整个设计失败。色彩，是最先也是最持久地给浏览者以网站形象的因素。色彩和谐的重要性，在设计中是至关重要的。APP设计色彩搭配五原则：①确定主体色的原则，先确定好一个主题色，然后再选择辅助色，如果画面还不够惹眼，可以来点点睛色，这几种颜色要遵循主次关系，确定主题色的原则是最稳定的处理色彩原则。②相近色的配色原则，选择色彩相近的颜色，怎么搭配都不会突兀，初学者在配色的过程中最好不超过四种颜色，色彩大师就不一样了。③同色系（同色相）搭配原则，明度或纯度不同的几种同一色系的颜色在一起搭配容易让人觉得和谐平静，这样的搭配不一定让人觉得醒目，但是一定不会让人觉得难看，这是初学者最好把握的色彩搭配原则。④色彩均衡的原则，它是万能的配色原则。当多种颜色同时存在同一个页面的时候一定要注意协调统一。比如说在设计中运用了大块比较亮的颜色，就可以用和此亮色协调的小块深色压一下，点缀一下，然后这个页面看上去就感觉平衡稳重。⑤黑白灰运用原则，黑白灰的搭配最能看出一个设计师的配色修养，如果黑白灰用得好，这个设计师的配色基本是OK的了。尤其是字体上的黑白灰用得好，会让人觉得这个设计典雅、端庄、精致。其中有一条字体配色准则就是，不到万不得已字体不用纯黑色，用各种深灰浅灰，遇到使用纯度很高的颜色，比如纯蓝，纯黄等，这样的搭配，视觉感觉比较兴奋。在这些大色块里面搭配点黑白灰，顿时就高大上了。教学监督热线：三、色彩常识及色彩搭配技巧教学监督热线：主体色系的原则，临近色，黑白灰，色彩均衡主体色系的原则，临近色，同色系，黑白灰二、色彩常识及色彩搭配技巧教学监督热线：黑白灰，后面这个是主色系原则中夹杂了黑白灰原则三、色彩常识及色彩搭配技巧教学监督热线：配色网站：

三、课堂作业以及功课预习第三堂课随堂作业：作业规范命名：日期-UI实战第一课-网名，如：08.05-GUI实战第一课-香香作业提交内容：临摹图中的猫猫,用布尔运算画出微信的logo要求：1，形状看上去和原图一模一样。