UI设计 课件全套 刘田珦 项目1-6 UI界面基础 -网店 UI 设计

项目1-UI界面基础《UI界面》在此处输入所学内容思维导图学习目标

知识目标了解UI设计的概念。掌握UI设计的流程和软件。熟悉UI设计的原则。理解UI的配色设计。技能目标能够区分网页UI设计和软件UI设计的不同。能够熟练安装UI设计的软件。能够应用网页UI设计配色方法。

素养目标理解学习的重要性,同时树立正确的职业道德观。了解UI设计的相关概念,透过现象把握本质。学习情景1.2UI设计的流程和软件学习情景1.1UI设计介绍学习情景1.3UI的配色设计1.1.1UI设计的概念

UI是指用户界面,不仅包括用户和界面两个组成部分,还包括用户与界面之间的交互关系。UI设计是指对软件的人机交互、操作逻辑和界面美观度的整体设计。优秀的UI。在UI设计出现之前,人们对计算机的操作只能通过输入命令行的形式执行,命令行界面。学习情景1.1UI设计介绍1.1.2设计类别

设计有类别之分,其中与UI设计有关的概念有很多,要注意区分概念之间的不同。下面介绍UE、GUI、IxD、UED和ID之间的区别。1.UEUE(UserExperience)是指用户体验,它关注的是用户的行为习惯和心理感受。2.GUIGUI(GraphicalUserInterface)是指图形用户界面,它是采用图形方式显示的计算机操作用户界面。3.IxDIxD(InteractionDesign)是指交互设计,简单来讲,就是人和应用之间的互动过程。学习情景1.1UI设计介绍4.UEDUED(UserExperienceDesign)是指用户体验设计,它是以用户为中心、以用户需求为目标而进行的设计。5.IDID(IndustrialDesign)是指工业设计,它是以工学、美学、经济学为基础对工业产品进行的设计。学习情景1.1UI设计介绍1.1.3网页UI设计和软件UI设计网页UI设计和软件UI设计的主要区别在于,硬件设备提供的人机交互方式不同。现阶段不同平台的技术水平会影响网页UI的设计和软件UI的设计。网页UI设计与软件UI设计的区别如下。1.界面尺寸由于网页自身的特点决定了网页UI设计具有向下延展的特性,这就意味着网页UI设计并不受尺寸大小的约束。软件UI设计会对用户界面尺寸进行要求。2.侧重点网页UI设计的侧重点是“看”,即通过完美的视觉效果表现出网页中的内容和产品,给浏览者留下深刻的印象。软件UI设计的侧重点是“用”,即在软件界面视觉效果的基础上充分体现软件的易用性,使用户更便捷、更方便地使用软件。随着软件技术水平的不断提升,网页UI设计也越来越多地体现出“用”的功能。学习情景1.1UI设计介绍3.呈现内容在同一个界面中,PC端网页相比移动端软件可以更多地展现信息和内容。例如,在购物网站的网页中可以呈现很多信息版块,而在移动端的App应用软件中则相对比较简洁,呈现信息的方式也完全不同。4.开发方式网页与软件在界面的设计表现上会有一些相似之处,但是其开发的方式是完全不同的。网页开发语言通常主要使用HTML、CSS、JavaScript,而软件开发语言则更多使用C++、ASP.NET、PHP和Java等。UI设计的流程有需求分析、设计分析、调研验证、方案改进和用户验证。1.需求分析需求分析是指对产品的需求进行分析,设计者应该明确是什么人用(用户的年龄、性别、爱好、受教育程度等)、在什么地方用(移动设备、家庭多媒体等)、如何使用(鼠标、键盘、触摸屏、遥控器等)产品。任何一个元素的改变都会使设计做出相应的调整。2.设计分析设计分析是指对产品的设计提出方案,包括确定页面类型、明确设计目标、方案的具体落地等。例如,为学生制作学习软件界面,这类产品可以先通过分析以明确设计目标,从而吸引学生的学习兴趣。然后,需要在设计中着重体现学习的氛围,提出不同风格的设计方案,以备选用。3.调研验证调研验证是指对不同风格的设计方案进行用户反馈。在设计过程中确保不同的设计方案在同一水准,不能存在明显的差异。不同的设计方案完成后,开始进行调研验证,获取用户的反馈意见。通过对用户反馈意见的整理和总结,得出每套方案的优缺点,便于对最终的方案进行调整和改进。学习情景1.2UI设计介绍1.2.1UI设计的流程4.方案改进方案改进是指对已有的设计方案进行修改和调整。通过对用户的调研验证,可以得到目标用户认可的方案。设计者需要有针对性地对设计方案进行下一步修改,使所设计的产品能够满足客户的需求。5.用户验证用户验证是指产品推出后收集用户的真实反馈意见。改进后的软件界面设计方案将应用在所开发的软件中并推向市场,但是设计过程并没有结束,还需要用户反馈意见,设计者应该在软件产品上市后,多与用户交流,了解用户真实的使用感受,为以后的版本升级和改进积累经验。学习情景1.2UI设计介绍1.视觉创作类软件视觉创作类软件是用来进行平面创作的工具,可以进行UI中插画、图标、广告图等平面图形的设计与合成。视觉创作类软件主要有AdobePhotoshop和AdobeIllustrator,如图1-3所示。学习情景1.2UI设计介绍1.2.2UI设计的软件2.界面设计类软件不同于视觉创作类软件,界面设计类软件更注重高效的UI排版和展示,是设计界面的主要工具。界面设计类软件主要有AdobeXd和Sketch,如图1-4所示。学习情景1.2UI设计介绍图1-4界面设计类软件3.原型创作类软件原型创作类软件是专门用来绘制线框原型的工具,便于在原型文件中进行逻辑标注和连线。原型创作类软件主要有AxureRP和ProtoPie,如图1-5所示。学习情景1.2UI设计介绍4.交互动画类软件交互动画类软件是用于将静态的设计稿制作成交互动画的工具。交互动画类软件主要有AdobeAfterEffects、Flinto、Principle、Framer、Origami和Hype3,如图1-6所示。学习情景1.2UI设计介绍5.代码编程类软件代码编程类软件是用来编写代码文本并生成相关软件运行文件的工具。代码编程类软件主要有AdobeDreamweaver和SublimeText,如图1-7所示。学习情景1.2UI设计介绍6.切图标注类软件切图标注类软件是用来生成切图和标注文件,并完成团队协作的相关工具。切图标注类软件主要有蓝湖、Zeplin和PxCook,如图1-8所示。学习情景1.2UI设计介绍UI是用户与软件进行交互的平台,由于它在软件中具有重要的作用,所以UI设计需要遵循一定的原则。1.简洁原则2.记忆负担最小化原则3.一致性原则学习情景1.2UI设计介绍1.2.3UI设计的原则（1）应该避免显示有歧义的信息。（2）消除视觉附加工作。1.3.1色彩的基础认识1.色轮传统的三原色是红色、蓝色和黄色。色轮是在三原色的基础上多次叠加的效果,如图1-9所示。学习情景1.3UI的配色设计

2.色彩属性自然界中的色彩都是通过光谱产生的,色相用来表现红、蓝、绿等色彩;明度用来展现色彩的明亮度;纯度用来展现色彩的鲜艳程度;对比度用来展现黑白两部分的差异。(1)色相。色相是色彩的一种属性,指色彩的相貌,准确来说是按照波长来划分色彩。在可见光谱中,人的视觉能够感受到红、橙、黄、绿、青、蓝、紫等不同特征的色彩,色轮中存在着数万种色彩。学习情景1.3UI的配色设计

(2)明度。明度是指色彩光亮的程度,所有颜色都有不同的光亮度。亮色就称其为“明度高”;反之,就称其为“明度低”。在无彩色中,明度最高的是白色,中间的是灰色,最后随着灰度不断降低,得到黑色。(3)纯度与对比度。①纯度是指色彩的饱和度,或称为“色彩的纯净程度”,也可以称为“色彩的鲜艳度”。②对比度是指不同颜色之间的差异程度。学习情景1.3UI的配色设计

(4)可视性。色彩的可视性是指色彩在多长距离范围内能够看清楚,以及在一定时间内能够被辨识的程度。纯度越高的色彩可视性越强,对比度也越大。学习情景1.3UI的配色设计

3.基础配色(1)单色配色。单色配色是指选取单一的色彩,通过在单一色彩中加入白色或黑色,从而改变该色彩的明度进行配色的方法。使用单色配色的效果如图1-11所示。学习情景1.3UI的配色设计

(2)类似色配色。类似色也称邻近色,是指色轮中邻近的色彩,色相差别较小。在色轮中,凡夹角在60°范围之内的颜色都为类似色关系。类似色配色是一种比较容易的色彩搭配方法,使用类似色配色的效果如图1-12所示。学习情景1.3UI的配色设计

(3)补色配色。补色与类似色相反,是指色轮中相对的色彩,选择一种颜色,其在色轮中另一面所对立的色彩就是补色。补色配色可以表现出强烈、醒目、鲜明的效果。例如,蓝色是黄色的补色,它可以增强黄色的红色氛围。使用补色配色的效果如图1-13所示。学习情景1.3UI的配色设计

（4）邻近补色配色。邻近补色可由两种或三种颜色构成,选择一种颜色,在色轮的另一边找到它的补色,然后使用与该补色相邻的一种或两种颜色,即可构成邻近补色。使用邻近补色配色的效果如图1-14所示。学习情景1.3UI的配色设计

(5)无彩色系配色。无彩色系是指由黑色、白色及由黑白两色混合而成的各种深浅不同的灰色系列。其中黑色与白色是单纯的色彩,而由黑色、白色混合形成的灰色,却有着各种深浅的不同。无彩色系的颜色只有一种基本属性,即“明度”。使用无彩色系配色的效果如图1-15所示。学习情景1.3UI的配色设计

课堂案例1-1制作网页背景图【案例要求】本案例要求制作一个网页背景图,效果如图1-16所示。【案例分析】色彩的明度属性用来表现色彩的光亮程度,在本案例中主要使用明度低的基色,相关按钮也使用明度低的配色。通过合理的配色,使UI呈现出颜色和谐的效果。【实施步骤】步骤1新建画布。启动PhotoshopCC软件,新建画布,画布大小的设置如图1-17所示。设置“前景色”为RGB(12,12,12),选择“编辑”→“填充”选项,为画布填充前景色,如图1-18所示。步骤2添加素材“01”。将素材“01”拖入画布,添加素材后的效果如图1-19所示。在“图层”面板中,单击“添加图层蒙版”按钮,为该图层添加图层蒙版。选择“画笔工具”选项,在蒙版中进行涂抹,设置该图层的“混合模式”为颜色减淡,“填充”为90%,图层蒙版设置完成的效果如图1-20所示。步骤3调整背景。新建名称为“顶层”的图层组,选择“矩形工具”选项,设置“填充颜色”为RGB(19,19,18),在画布中绘制一个矩形,如图1-21所示。新建“图层2”,选择“画笔工具”选项,设置“前景色”为RGB(102,93,72),在画布合适的位置进行涂抹,涂抹后的图形如图1-22所示。步骤4创建剪贴蒙版。选择“图层”→“创建剪贴蒙版”选项,为“图层2”创建剪贴蒙版,设置该图层的“填充”为40%,创建剪贴蒙版效果如图1-23所示。步骤5添加文字。选择“横排文字工具”选项,先在“字符”面板中设置相关参数,“字符”面板的参数设置如图1-24所示,然后在画布合适的位置输入文字。使用相同的方法,完成其他文字内容的输入,其他文字输入完成的效果如图1-25所示。步骤6绘制矩形。选择“矩形工具”选项,设置“填充颜色”为RGB(136,122,90),在画布中绘制一个矩形,如图1-26所示。多次复制并粘贴绘制的矩形,先分别将得到的矩形调整到合适的大小和位置,然后将相关图层合并。步骤7保存图像为PSD格式。网页背景图效果参见图1-16。选择“文件”→“存储为”选项,打开“另存为”对话框,单击“保存类型”下拉列表,选择“Photoshop(∗.PSD;∗.PDD;∗.PSDT)”选项,单击“保存”按钮。1.3.2UI的色彩搭配及作用色调的一致性色调的一致性是指在整个界面系统中要采用统一的色调,即界面要有一个主色调。在如图1-27所示的软件系统界面中,每个版块的配色都是统一的。2.保守地使用色彩保守地使用色彩是指要考虑大多数用户的审美需求,根据产品所针对的用户不同,在界面设计的过程中使用不同的色彩搭配。使用柔和的中性色彩搭配效果如图1-28所示。3.符合视觉习惯色彩的选择应尽可能符合人们的视觉习惯,对于有很强针对性的软件,在进行软件界面的配色设计时,要充分考虑用户的喜好。例如,使用鲜艳的色彩设计儿童软件的界面如图1-29所示。明亮的红色、绿色和黄色适用于儿童软件界面的设计。在一般情况下,红色表示错误,黄色表示警告,绿色表示运行正常。4.使用不同色彩不同的色彩可以帮助用户加快对各类数据的识别,明亮的色彩可以有效地突出或吸引用户对重要区域的注意力。使用不同色彩区分界面中不同的功能区域如图1-30所示。5.用户拥有调整界面的配色方案设计者在设计界面的过程中,可以考虑设计出多种配色方案,以便用户在使用过程中自由选择,更好地满足用户的个性化需求。例如,金山毒霸软件的不同配色方案如图1-31所示。6.色彩搭配要便于阅读为确保界面的可读性,需要注意界面设计中色彩的搭配,较为有效的方法就是遵循色彩对比的原则。在浅色背景上使用深色文字,在深色的背景上使用浅色文字等。在一般情况下,在界面设计中动态对象应该使用比较鲜明的色彩,而静态对象则应该使用比较暗淡的色彩,这样能够做到层次分明,重点突出。合理地进行色彩搭配的效果如图1-32所示。7.控制色彩的使用数量在界面设计中不宜使用过多的色彩,建议在单个界面设计中最多使用不超过4种色彩进行搭配,整个系统中色彩的使用数量也应该控制在7种左右。控制色彩使用数量的界面如图1-33所示。课堂案例1-2制作网站首页【案例要求】本案例要求在“课堂案例1-1”的基础上增加菜单的制作,网站首页的整体效果如图1-34所示。【案例分析】在选择界面色彩时应注意色调的一致性,尽量使用统一的色彩,相似的内容使用相同的色彩。同时,保守地使用色彩,不使用突出的色彩。色彩的选择应符合用户视觉习惯,方便用户阅读。通过本案例的学习,学会合理地选择色彩,能够使所设计的界面色调统一。【实施步骤】见书P191.3.3网页UI设计配色方法在任何网页UI设计中,色彩都是最基本的元素。网页UI设计配色方法如下。突出主题色彩设计是指遵循科学与艺术的内在逻辑,对色彩进行富有鲜明创见性及理想化的组合过程,是理性与感性相结合的创造过程。2.划分视觉区域3.增强艺术性4.色彩的面积大小和形状5.色彩的位置6.色彩的渐变7.不同的配色选择8.网页文字配色课后拓展———制作数码产品网站页面导航【实训步骤】见书P29小结UI设计即用户界面设计,是指设计师通过使用颜色、图形、文字、布局等元素,来创建用户界面,使用户能够轻松地使用产品或服务。UI设计对各个行业都有一定的影响,如公益项目中的UI设计能够更好地传播公益。腾讯公司在腾讯“99公益日”活动中的公益设计是一朵小红花,这些小红花出现在多样化的场景中,充满了爱心,充满了温度。项目1-图标和按钮设计《UI界面》在此处输入所学内容思维导图学习目标知识目标了解图标和按钮的起源和分类。掌握图标的常用格式,以及图标和软件按钮的设计原则。掌握网页按钮的设计规则。技能目标能够对图标进行分类。能够制作软件图标和软件按钮。能够制作网页按钮。能够制作手机游戏界面中的按钮。素养目标通过解决相关问题,培养勤于实践的习惯。学习任务：学习情景2.2UI设计的流程和软件学习情景2.1UI设计介绍学习情景2.3UI的配色设计学习情景2.2图标设计学习情景2.1图标和按钮介绍学习情景2.3软件按钮设计学习情景2.4网页按钮的设计规则与作用学习情景2.5手机游戏按钮设计2.1.1图标和按钮的起源学习情景2.1图标和按钮介绍图标的使用和发展可以追溯到1970年符号学创建的初期。图标的广义概念是指人类使用符号来传达意义,包括文字、信号、密码、文明符号、图腾、手语等。而这里所说的图标是指计算机或智能手机屏幕上表示命令、程序的符号或图像,称为“图标”或“按钮”。1.图标

图标设计是方寸艺术,应该着重考虑视觉冲击力,需要在很小的范围内表现出软件的内涵。因此,很多设计师在设计图标时,使用简色就可以做出许多精美的图标。精美的软件图标设计如图2-1所示。2.按钮

软件按钮设计应该具备简洁明了的图示效果,能够让用户清楚地知道按钮的功能,并产生功能关联反应。群组内的按钮应该具备统一的设计风格,功能差异较大的按钮应该有所区别。设计风格统一的按钮如图2-2所示。2.1.2图标的分类图标作为界面中不可或缺的元素,在长久的发展中形成了一套自己的分类方法,下面是图标的5种分类。1.解释性图标解释性图标是用来解释和阐明特定功能,或者作为内容类别的视觉标记,如图2-3所示。2.交互性图标交互性图标在UI设计中不只是起到展示的作用,它们还会参与到用户交互中,是导航系统不可或缺的组成部分。交互性图标不仅可以被点击,并能随之响应,帮助用户执行特定的操作,还可以触发相应的功能,如图2-4所示。3.装饰性和娱乐性图标装饰性和娱乐性图标通常用于提升整个界面的美感和视觉体验,并不具备明显的功能性,但它们也很重要。这类图标迎合了目标受众的偏好与期望,具备特定的风格,能够提升整个设计的可靠性和可信度,如图2-5所示。5.字符图标字符图标“Glyphicon”一词源自排版领域,现在已经随着数字设计而逐步在数字设计领域扎根了,它源自希腊语,含义为“雕刻”。列举一些字符图标如图2-7所示。课堂案例2-1制作房屋图标【案例要求】本案例要求制作一个如图2-8所示的房屋图标,以便深入理解按钮和图标设计的内涵。本案例使用到的工具有“多边形工具”“矩形工具”“椭圆工具”和“圆角矩形工具”。【案例分析】按钮和图标是生活中各类实物的缩影,图标设计需要在小范围内展现软件内涵,按钮则要有简洁明了的效果。通过案例制作,深入理解按钮和图标设计的内涵。【实施步骤】步骤1打开素材。启动PhotoshopCC软件,打开素材“01”,打开背景图像如图2-9所示。步骤2绘制三角形。选择“多边形工具”选项,在选项栏中设置“工具模式”为形状、“填充颜色”为RGB(238,238,238)、“边”为3。在背景图层上绘制一个三角形,如图2-10所示。步骤3绘制圆角矩形。选择“圆角矩形工具”选项,在三角形下方绘制圆角矩形,如图2-11所示。步骤4调整三角形形状。选择“直接选择工具”选项,选中三角形,选择三角形最上方的锚点,将其向下移动,调整三角形大小。调整后的效果如图2-12所示。步骤5绘制烟囱。选择“矩形工具”选项,在三角形右侧位置绘制矩形,如图2-13所示。步骤6绘制房体。选择“矩形工具”选项,在屋顶下方绘制矩形。选择“圆角矩形工具”选项,在绘制的矩形下方绘制圆角矩形,如图2-14所示。步骤7绘制小门。首先选择“圆角矩形工具”选项,设置“填充颜色”为背景色,绘制圆角矩形;然后选择“矩形工具”选项,将“填充颜色”也设置为背景色,在圆角矩形下方绘制矩形;最后选择“椭圆工具”选项,设置“填充颜色”为RGB(238,238,238),在矩形中间靠右绘制椭圆。步骤8保存图像为PSD格式。房屋图标效果参见图2-8。选择“文件”→“存储为”选项,打开“另存为”对话框,单击“保存类型”下拉列表,选择“Photoshop(∗.PSD;∗.PDD;∗.PSDT)”选项,单击“保存”按钮。2.2.1图标的特征

图标是一种小型的可视控件,是软件界面设计中的指示牌,它以最便捷、最简单的方式指引浏览者获取其想要的信息资源。图标是具有明确指代含义的计算机图形。其中,操作系统桌面图标是软件或操作快捷方式的标识,界面中的图标是功能标识。图标在软件界面中无处不在,是软件界面设计中非常重要的设计元素。随着科技的发展和社会的进步,以及人们对美、时尚、趣味和质感的不断追求,图标设计呈现出百花齐放的局面,越来越多精致、新颖、富有创造力和人性化的图标涌入浏览者的视野。但是,图标设计不仅需要做到精美、有质感,更重要的是还应具有良好的可用性。好的图标设计应具有多样性、艺术性、准确性、实用性和持久性等特点。生活中常见的图标如图2-15所示。学习情景2.2图标设计

2.2.2图标的常用格式图标也称Icon,广泛应用于程序标志、数据标志、命令选择、模式信号、切换开关和状态指示等,图标有助于用户快速执行命令和打开程序文件。一个图标就是一套相似的图片,每一张图片有不同的格式。图标包含透明区域,在透明区域内可以透出图标下的背景。操作系统和显示设备的多样性导致了图标格式的多样性要求,常用的图标格式如表2-1所示。2.2.3图标的设计原则软件界面设计的未来方向是简洁、易用和高效,精美的扁平化图标设计往往起画龙点睛的作用,从而提升设计的视觉效果。现在,图标的设计越来越新颖、具有独创性,扁平化图标设计的核心思想是要尽可能地发挥图标的优点:比文字更直观漂亮,在该基础上尽可能用简洁、清晰、美观的图形表达出图标的意义。1.可识别性

可识别性是图标设计的首要原则,指设计的图标要能够准确地表达相应的操作,让浏览者一眼看到就能明白该图标要表达的意思。常见的道路交通指示图标如图2-16所示。2.差异性

差异性原则是图标设计的重要原则之一,同时也是容易被设计师忽略的一条原则。设计师应该高度重视差异性原则,因为只有图标之间存在差距,才能使被浏览者关注和记忆时,对设计内容留有印象。常见的具有差异性的各类图标如图2-17所示。3.协调性

任何图标或设计都不可能脱离环境而独立存在,图标最终要放在软件界面中才会起作用,因此,图标的设计要考虑图标所处的环境,做到与环境协调一致,这样的图标才能更好地为设计服务。某软件的文件管理界面图标如图2-19所示。4.视觉效果图标设计追求视觉效果,一定要在保证差异性、可识别性和协调性原则的基础上,考虑更高层次的要求———视觉效果,视觉效果出众的软件图标如图2-20所示。5.创新性随着时代的发展和人们审美的提高,图标的创新设计层出不穷,要想让浏览者注意到设计的内容,对图标设计者提出了更高的要求,极具创新效果的软件图标如图2-21所示。课堂案例2-2制作银行卡图标【案例要求】本案例制作的银行卡图标效果如图2-22所示。【案例分析】图标元素存在于任何应用软件界面中,形式多样的图标和合理的设计能够提升图标的美观性和实用性。本案例将使用“圆角矩形工具”“矩形工具”和“横排文字工具”等简单的工具制作美观的银行卡图标。【实施步骤】步骤1新建画布。启动PhotoshopCC软件,新建画布,画布大小的设置如图2-23所示。步骤2绘制圆角矩形。选择“圆角矩形工具”选项,绘制圆角矩形,在该图层的“属性”面板中设置“渐变颜色”为RGB(254,132,0)到RGB(249,177,23),“属性”面板的参数设置如图2-24所示。鼠标左键双击该图层,打开“图层样式”对话框,添加“投影”图层样式,投影效果的参数设置如图2-25所示。绘制的圆角矩形效果如图2-26所示。步骤3绘制矩形。选择“矩形工具”选项,绘制白色矩形,设置“填充”为60%,绘制矩形后的效果如图2-27所示。步骤4绘制圆角矩形。选择“圆角矩形工具”选项,绘制圆角矩形,设置“填充”为50%,圆角矩形效果如图2-28所示。使用相同的方法绘制另一个圆角矩形,效果如图2-29所示。步骤5添加文字。选择“横排文字工具”选项,输入“银行卡”。打开“字符”面板,在“字符”面板中设置字体、字号和间距等参数,“字符”面板的参数设置如图2-30所示。步骤6保存图像为PSD格式。银行卡图标效果参见图2-22。选择“文件”→“存储为”选项,打开“另存为”对话框,单击“保存类型”下拉列表,选择“Photoshop(∗.PSD;∗.PDD;∗.PSDT)”选项,单击“保存”按钮。2.3.1软件按钮的特征简单精致的软件按钮是在软件界面设计中比较常见,也是最常用到的设计,它必须在很小的范围内有序地排列字体和图标,并进行颜色的搭配等。在设计制作过程中,要考虑到用户的视觉感受,不需要过于花哨,设计应该简单明了,重点突出按钮的功能。学习情景2.3软件按钮设计按钮与图标非常类似,但又有所不同,图标着重表现图形的视觉效果,而按钮则着重表现其功能性。在按钮的设计中通常采用简单直观的图形,充分表现按钮的可识别性和实用性。某购物软件的按钮设计如图2-31所示。2.3.2软件按钮的设计原则软件按钮的设计遵循以下原则：1.形状易识别设计易识别的按钮有两个要求:一是按钮的颜色不能与软件UI背景相重合;二是按钮的形状要设计得简单易懂。形状易识别的按钮如图2-32所示。2.保持一致性设计师在设计各个软件UI构成元素时,需要遵守用户界面的一致性原则,即软件UI中的任意元素应与主题保持一致,按钮设计也不例外,与界面主题一致的按钮如图2-33所示。3.控制按钮数量

设计师应该优先考虑软件UI中的重要操作,并制作相应的按钮。仅有两个控制按钮的软件UI如图2-34所示。4.避免过度设计太复杂的按钮设计会使软件UI显得混乱和沉重,也不易被浏览者发现。如图2-35所示为两组软件按钮设计,左面一组是复杂的按钮设计,其展示效果较为杂乱;右面一组是简单的按钮设计,其展示效果简洁明了。5.使用对比色引导用户

不同按钮之间醒目的颜色对比,能够引导浏览者正确选择相应的按钮。设计师需要帮助用户识别正确、错误和不可用等行为。使用对比色引导用户的软件按钮如图2-36所示。6.告诉用户按钮的功能

想要浏览者正确判断按钮的功能,这就要求按钮拥有高度的可识别性。设计师可以在按钮上添加小图标,引导浏览者尽快发现它,同时了解按钮的功能并执行。显示功能的软件按钮如图2-37所示。课堂案例2-3制作软件按钮【案例要求】本案例制作的软件按钮效果如图2-38所示。【案例分析】

本案例的任务是设计制作软件按钮,按钮的设计风格应紧跟设计潮流,减少高光和阴影的使用,同时应遵循颜色对比、添加图标和避免过度设计等设计原则,使按钮看起来更加简单、时尚、具有吸引力。【实施步骤】

步骤1新建画布。启动PhotoshopCC软件,新建画布,画布大小的设置如图2-39所示。选择“渐变工具”选项,在选项栏中设置“渐变颜色”为RGB(208,213,218)到RGB(237,241,243),在画布中完成水平方向渐变颜色填充,渐变颜色填充后的效果如图2-40所示。步骤2绘制圆角矩形。选择“圆角矩形工具”选项,绘制圆角矩形,如图2-41所示。首先打开“图层样式”对话框,添加“描边”图层样式,描边效果的参数设置如图2-42所示,设置描边颜色为RGB(181,181,181);然后添加“渐变叠加”图层样式,渐变叠加效果的参数设置如图2-43所示,设置“渐变颜色”为RGB(23,133,192)到RGB(85,194,251);最后添加“投影”图层样式,投影效果的参数设置如图2-44所示。圆角矩形绘制完成的效果如图2-45所示。步骤3绘制形状。选择“圆角矩形工具”选项,设置半径为50px,创建形状,选择“直接选择工具”选项,选中圆角矩形左上角的锚点,调整到合适的位置,继续选择“直接选择工具”选项,选中圆角矩形右上角的锚点,调整到合适的位置。形状绘制完成的效果如图2-46所示。打开“图层样式”对话框,添加“描边”图层样式,描边效果的参数设置如图2-47所示,设置“填充类型”为“渐变”,“渐变颜色”为RGB(187,32,32)到RGB(230,89,89);添加“内发光”图层样式,内发光效果的参数设置如图2-48所示,“颜色”为RGB(255,255,190);添加“渐变叠加”图层样式,渐变叠加效果的参数设置如图2-49所示,设置“渐变颜色”为RGB(187,32,32)到RGB(230,89,89);添加“投影”图层样式,投影效果的参数设置如图2-50所示。形状绘制完成的最终效果如图2-51所示。步骤4绘制圆角矩形。选择“圆角矩形工具”选项,绘制圆角矩形,设置4个圆角值为4px、4px、12px、12px,圆角矩形的效果如图2-52所示。打开“图层样式”对话框,添加“渐变叠加”图层样式,渐变叠加效果的参数设置如图2-53所示,设置“渐变颜色”为RGB(187,32,32)到RGB(148,21,21)。设置渐变颜色后的效果如图2-54所示。步骤5添加字体。打开“字符”面板,设置字体、字号和间距等参数,“字符”面板的参数设置如图2-55所示。选择“横排文字工具”选项,在画布中添加文字内容,文字效果如图2-56所示。使用相同的方法绘制第二处文字,第二处文字的“字符”面板参数设置如图2-57所示,第二处文字效果如图2-58所示。步骤6保存图像为PSD格式。软件按钮效果参见图2-38。选择“文件”→“存储为”选项,打开“另存为”对话框,单击“保存类型”下拉列表,选择“Photoshop(∗.PSD;∗.PDD;∗.PSDT)”选项,单击“保存”按钮。2.4.1网页按钮的设计规则在网页里需要强调的链接会以按钮的形式出现,重量级按钮是促成浏览者完成页面功能的一个很重要的部分,所以对于其本身而言,应该具有吸引眼球的作用,建议从以下五个方面来思考。1.选择适当的配色2.按钮摆放位置3.按钮上的文字4.根据系统选择按钮的尺寸5.舒适的交互效果学习情景2.4网页按钮的设计规则与作用2.4.2常见的网页按钮类型按制作技术来分,网页按钮主要分为:1.静态图片按钮2.JavaScript翻转图片按钮3.Flash动画按钮目前,在网站中应用较多的是静态图片按钮和Flash动画按钮。2.4.3网页按钮的特征无论静态图片按钮还是动态按钮,网站中的按钮都具有如下3个特点。1.易用性2.可操作性3.动态效果2.4.4网页按钮的作用1.实现提交功能的按钮(1)系统标准按钮。(2)使用图片制作的按钮。2.实现链接功能的按钮课堂案例2-4制作网页中的“开始”按钮【案例要求】本案例制作的网页中的“开始”按钮效果如图2-70所示。【案例分析】

网页中的“开始”按钮是一个非常重要的元素,按钮的创意和美观对网页十分重要。设计出有特色的“开始”按钮,能够给用户带来视觉冲击。【实施步骤】

步骤1打开素材。启动PhotoshopCC软件,打开素材“01”,选择“圆角矩形工具”选项,在图层中绘制圆角矩形,如图2-71所示步骤2图层样式设置。鼠标左键双击圆角矩形图层,打开“图层样式”对话框,添加“描边”图层样式,描边效果的参数设置如图2-72所示,设置“填充类型”为渐变,“渐变颜色”为RGB(7,39,88)到RGB(254,254,254);添加“内阴影”图层样式,内阴影效果的参数设置如图2-73所示。添加“渐变叠加”图层样式,渐变叠加效果的参数设置如图2-74所示,设置“渐变颜色”为RGB(73,82,235)到RGB(254,254,254)。添加“投影”图层样式,投影效果的参数设置如图2-75所示。圆角矩形效果如图2-76所示。步骤3文字设置。首先选择“横排文字工具”选项,在圆角矩形中输入“开始”文字,然后在其选项栏中设置字体效果,如图2-77所示。添加字体后的效果如图2-78所示。步骤4文字图层样式设置。鼠标左键双击文字图层,打开“图层样式”对话框,添加“描边”图层样式,描边效果的参数设置如图2-79所示,设置“填充类型”为渐变,“渐变颜色”为RGB(90,156,221)到RGB(254,254,254)。添加“内阴影”图层样式,内阴影效果的参数设置如图2-80所示。添加“投影”图层样式,投影效果的参数设置如图2-81所示。步骤5保存图像为PSD格式。网页中的“开始”按钮效果参见图2-70。选择“文件”→“存储为”选项,打开“另存为”对话框,单击“保存类型”下拉列表,选择“Photoshop(∗.PSD;∗.PDD;∗.PSDT)”选项,单击“保存”按钮。2.5.1单选按钮的特征单选按钮通常只提供一个唯一的选项,如“开”和“关”、“是”与“否”等选项。单选按钮应该在动态效果上给予玩家相应的提示,例如,在未单击之前显示为空心圆,而单击之后则变为实心圆,并伴随着适当的音效,让玩家清楚地知道他的操作已得到了响应。游戏界面中的单选按钮设计效果如图2-82所示。学习情景2.5手机游戏按钮设计2.5.2滑块按钮的特征滑块按钮一般出现在有范围的选项中,如1~100的数值范围或是由低到高的抽象范围,因图2-83游戏界面中的滑块按钮设计效果为不可能为玩家提供每一个数值的选项,所以滑块是最合适的按钮方式。在有关卡设置的游戏中,按钮也作为一种对玩家的动态提示。这一动态效果也适用于游戏道具的激活状态。游戏界面中的关卡按钮设计效果如图2-84所示。2.5.3游戏按钮的视觉表现

在众多的游戏官网中,我们可以看到各式各样的游戏型按钮,相对于一般的商务型按钮来讲,游戏型按钮更加注重其质感上的表现,如金属、石头、玻璃、木头、塑胶等,通过质感的表现来表达游戏本身的特质。课堂案例2-5制作游戏按钮【案例要求】本案例制作的游戏按钮效果如图2-86所示。【案例分析】

游戏按钮的风格要与游戏界面的整体风格相统一,在游戏进行的过程中,当用户暂停了游戏,想要再次进行游戏时,可以选择继续、返回或列表。本案例要求制作游戏界面中的“继续”“返回”“列表”三个按钮。【实施步骤】

步骤1打开素材。启动PhotoshopCC软件,打开素材“01”,效果如图2-87所示。步骤2绘制圆形。选择“椭圆工具”选项,设置“填充颜色”为RGB(238,238,238),按住“Shift”键在画布中绘制正圆形,绘制正圆并填充颜色后的效果如图2-88所示。步骤3

图层样式设置。鼠标左键双击圆形的图层,打开“图层样式”对话框,添加“投影”图层样式,投影效果的参数设置如图2-89所示。圆形添加投影后的效果如图2-90所示。步骤4绘制内圆。使用相同的方法在白色圆形中绘制内圆,设置“填充颜色”为RGB(254,189,39),绘制内圆并填充颜色后的效果如图2-91所示。步骤5图层样式设置。鼠标左键双击内圆的图层,打开“图层样式”对话框,添加“内阴影”图层样式,内阴影效果的参数设置如图2-92所示,设置颜色为RGB(181,97,0)。添加“渐变叠加”图层样式,渐变叠加效果的参数设置如图2-93所示。添加“投影”图层样式,投影效果的参数设置如图2-94所示。内圆图层样式设置完成的效果如图2-95所示。步骤6绘制三角形。选择“多边形工具”选项,在选项栏中设置“填充颜色”为RGB(238,238,238)、“边”为3,在“路径选项”中勾选“平滑拐角”选项,如图2-96所示。在内圆中绘制三角形,三角形绘制完成的效果如图2-97所示步骤7绘制其他按钮图形。使用相同的方法,绘制“返回”按钮和“列表”按钮。保存图像为PSD格式。游戏按钮效果参见图2-86。选择“文件”→“存储为”选项,打开“另存为”对话框,单击“保存类型”下拉列表,选择“Photoshop(∗.PSD;∗.PDD;∗.PSDT)”选项,单击“保存”按钮。步骤8课后拓展———制作电源按钮

【实训步骤】(1)新建画布。启动PhotoshopCC软件,单击“新建”按钮,画布背景色选择黑色,新建空白画布。选择“渐变工具”选项,设置“渐变颜色”从RGB(49,54,60)到RGB(34,37,41),在画布中拖动鼠标填充径向渐变,添加径向渐变后的效果如图1所示。(2)绘制圆形。选择“椭圆工具”选项,设置“填充颜色”为RGB(39,44,51),按住“Shift”键在画布中绘制正圆形。鼠标左键双击圆形的图层,打开“图层样式”对话框,添加“渐变叠加”图层样式,渐变叠加效果的参数设置如图2所示,设置“渐变颜色”从RGB(77,83,89)到RGB(24,26,30)。正圆添加渐变后的效果如图3所示。(3)绘制第二个圆形。复制上一步的图层,得到第二个正圆形,按住快捷键“Ctrl+T”,同时拖动变换控制点进行缩放。为该图层添加图层样式,添加“渐变叠加”图层样式,渐变叠加效果的参数设置如图4所示,设置“渐变颜色”从RGB(0,1,1)到RGB(127,127,127)。添加“外发光”图层样式,外发光效果的参数设置如图5所示,设置“外发光颜色”从RGB(85,85,85)到RGB(255,255,255)。第二个正圆形绘制效果如图6所示。(4)绘制电源。首先选择“椭圆工具”选项,在第二个正圆形中绘制正圆形,设置“描边”为5px、“描边颜色”为RGB(202,202,202),设置描边后的效果如图7所示;其次选择“圆角矩形工具”选项,绘制圆角矩形;然后在“图层”面板中,单击“添加图层蒙版”按钮,为圆角矩形图层添加图层蒙版;最后选择“画笔工具”选项,在圆角矩形与正圆形交接处涂抹。用画笔涂抹后的效果如图8所示。(5)保存图像为PSD格式。选择“文件”→“存储为”选项,打开“另存为”对话框,单击“保存类型”下拉列表,选择“Photoshop(∗.PSD;∗.PDD;∗.PSDT)”选项,单击“保存”按钮。本章小结图标是生活中的基本元素,也是任何精心构建的界面系统的驱动力。图标在我们的数字生活中十分普遍,它可以帮助用户更好地理解产品的功能,是UI设计中重要的组成部分,也是营造产品用户体验的关键一环。党的二十大报告提出“创新是第一动力”。在UI设计的学习中,应具备创新精神与前卫意识,善于用敏锐的视角捕捉生活画面,用抽象思维表达客观世界,对形态的把握、情节的编排和情感的表达,应做到求新。项目3网页UI设计《UI界面》在此处输入所学内容思维导图学习目标

知识目标

了解网页UI设计类型。了解网页导航设计的目标。理解网页UI设计的基本要素。理解设计的方法。理解网页导航设计的原则。掌握常见的布局方式。技能目标能够制作Logo。能够制作网站导航。能够制作家具网页。素养目标网页UI设计需要想象力,在设计时应勤于思考,主动拓宽自己的视野,培养想象力,避免思维的局限性。学习情景3.2网页Logo与Logo设计学习情景3.1网页UI设计介绍学习情景3.3网页导航设计学习情景3.4网页布局设计3.1.1网页UI设计的发展随着网络的高速发展,网页浏览成为人们上网的主要形式之一,网页UI设计也得到了较大的发展。网页UI设计是通过页面的排版布局,营造整体的视觉风格效果,给浏览者进行有效信息传达的综合技术。随着网络的高速发展,网页浏览成为人们上网的主要形式之一,网页UI设计也得到了较大的发展。网页UI设计是通过页面的排版布局,营造整体的视觉风格效果,给浏览者进行有效信息传达的综合技术。学习情景3.1网页UI设计介绍3.1.2网页UI设计的基本要素1.自适应、简约的设计。自适应、简约的网页UI如图3-1所示。2.动态感、互动性和联系性。具有动态感、互动性和联系性的游戏网页UI如图3-2所示。3.简单、流畅的导航。简单、流畅的卡片式导航如图3-3所示。4.紧跟时代标准3.2.1网页Logo个成功的网页界面,应当在短时间内快速使访客明白公司的性质、业务以及优势。网页Logo的设计过程如图3-4所示。学习情景3.2网页Logo与Logo设计在如图3-5所示的黑马程序员网页上,品牌Logo突出显示在左上角,整体设计得不错,简单的主页,丰富的口号,没有不必要的动画或过分的装饰分散用户的注意力,消息清楚且切中要害。整体设计与应用程序的外观保持一致,使整个品牌具有连续性。3.2.2网页Logo设计的方法网页Logo的根本目的是使用户明白网页的主要内容。1.明确定位通过网页定位找到目标用户,再将定位策略作用于网页识别系统,以此确保每一个网页都符合产品的定位。通过确定的关键词来建立情绪板,情绪板旨在为设计提供解题思路,将概念与灵感可视化,作为前期准备用来与团队或客户沟通,将比较抽象的概念转化为可感知的视觉(比如柔软、温暖、光滑的线条感、低饱和度色彩等),有利于视觉的统一性。借助色彩建立情绪板如图3-6所示。2.提取表现元素基于情绪板,围绕Logo内核,进一步提取视觉表现元素,包括颜色、图形图像和文案等。(1)颜色。2)图形图像。如图3-7所示。同时,图形图像与文字相比,更具有形象、直观的特点,因此更具有视觉吸引力。(3)文案。以文案的形式设计茶饮网页Logo的效果如图3-8所示。课堂案例3-1制作“抖音”的Logo【案例要求】本案例制作的“抖音”Logo效果如图3-9所示。【案例分析】网页Logo应该在短时间内让用户明白其性质和业务,同时能够传达出该网页的目的。让用户有深刻印象的方法是使Logo中各元素的风格保持一致。本案例中网页Logo设计的关键元素可从颜色、图形图像和文案三方面进行。【实施步骤】步骤1新建画布。启动PhotoshopCC软件,新建画布,画布大小的设置如图3-10所示,设置“背景颜色”为黑色。步骤2绘制椭圆图形。选择“椭圆工具”选项,设置“填充”为无颜色、“描边”大小为30px,按住“Shift”键在画布中绘制椭圆图形,效果如图3-11所示。步骤3绘制矩形。新建图层,选择“矩形工具”选项,在图层中绘制矩形,如图3-12所示。步骤4将椭圆图层复制一份,并选择“矩形选框工具”选项,选取“椭圆1”图层的空心圆的四分之一,效果如图3-13所示。添加蒙版,隐藏其他图层,效果如图3-14所示。步骤5选择“移动工具”选项,将选取的部分移动到合适的位置,取消其他图层的隐藏,效果如图3-15所示。步骤6将“椭圆1”图层“栅格化”,选择“矩形选框工具”选项截取空心圆的一部分,按“Delete”键删除,按快捷键“Ctrl+D”取消选区,效果如图3-16所示。步骤7将图层“栅格化”,并合并三个图层,如图3-17所示。步骤8将合并后的图层复制一份,选择“油漆桶工具”选项,设置“填充颜色”为RGB(253,24,84),选择“移动工具”选项,调整到合适的位置,如图3-18所示。步骤9将合并后的图层再复制一份,选择“油漆桶工具”选项,设置“填充颜色”为RGB(88,255,255),选择“移动工具”选项,调整到合适的位置,并调整图层顺序,如图3-19所示。步骤10保存图像为PSD格式。“抖音”的Logo效果参见图3-9。选择“文件”→“存储为”选项,打开“另存为”对话框,单击“保存类型”下拉列表,选择“Photoshop(∗.PSD;∗.PDD;∗.PSDT)”选项,单击“保存”按钮3.3.1网页导航设计的目标1.实现界面之间的跳转2.展现界面的功能模块3.传达界面之间的关系学习情景3.3网页导航设计3.3.2网页导航设计的原则网页导航设计时应注意以下5个原则。(1)精心分类的链接。一个精心分类的链接体系能让用户毫不费力地找到对的内容,而无须在不同的类别中反复寻找。(2)间隙和强调。在导航栏的设计中,应注重清晰的显示和显眼的设计。最佳的导航栏位置通常是网站的顶部和左侧,因为依据视觉层次,这两个位置是最先被看到的。(3)一致性。在成功的网页导航设计中,保持一致性是最重要的原则之一。最重要的链接在每个页面中都会有显示,并且始终保持在相同的位置,行使着相同的作用。同一个链接在不同的页面中处于不同的位置会让人感到迷惑。(4)易懂性。直观易懂的短链接一方面可以节省空间,另一方面也更易于被用户了解。让用户始终关注重点,并保持内容简单易懂。(5)正确的组织结构。合理的链接组织是打造结构良好的菜单的基础。课堂案例3-2制作网站导航页本案例制作的网站导航页效果如图3-20所示。【案例分析】网页导航设计是为了实现界面之间的跳转,用户可以根据导航跳转到所需的界面。导航要展示功能模块的不同,使用户能够清楚地辨识。界面之间的层级关系要体现在网页导航中。网站导航页的设计应该遵循相关的原则,对链接进行分类,功能模块之间的间隙要清晰,整个导航的风格要一致,菜单之间的组织结构要正确有条理。【实施步骤】步骤1新建画布。启动PhotoshopCC软件,新建画布,画布大小的设置如图3-21所示。选择“渐变工具”选项,设置“渐变颜色”从RGB(244,180,188)到RGB(252,231,233),渐变效果的参数设置如图3-22所示。单击“线性渐变”选项,拖动鼠标在画布内径向拉伸,添加渐变后的效果如图3-23所示。步骤2添加素材。新建名称为“背景”的图层组,添加素材,将素材调整到合适的大小和位置,添加素材及调整素材位置后的效果如图3-24所示。步骤3新建图层,添加导航文字。选择“横排文字工具”选项,在“字符”面板上进行相关的设置,“字符”面板的参数设置如图3-25所示,在画布中输入相应的文字,添加文字后的效果如图3-26所示。步骤4绘制搜索框。选择“矩形选框工具”选项,对图形进行相应的设置,参数设置如图3-27所示,设置“不透明度”为70%,添加搜索框后的效果如图3-28所示。步骤5添加图标组。打开并添加图标素材,将图标素材调整到合适的大小和位置,添加图标后的效果如图3-29所示。步骤6绘制导航栏。选择“圆角矩形工具”选项,在选项栏中设置“半径”为20px,在画布中绘制圆角矩形,圆角矩形的参数设置如图3-30所示,绘制导航栏后的效果如图3-31所示。步骤7添加图层样式。鼠标左键双击“导航栏”图层右侧空白处,打开“图层样式”对话框,首先添加“描边”图层样式,描边效果的参数设置如图3-32所示;其次添加“渐变叠加”图层样式,渐变叠加效果的参数设置如图3-33所示,设置“渐变颜色”为RGB(0,156,249)到RGB(64,199,255);再次添加“内阴影”图层样式,内阴影效果的参数设置如图3-34所示;然后添加“光泽”图层样式,光泽效果的参数设置如图3-35所示,设置“光泽颜色”为RGB(241,205,205);最后添加“投影”图层样式,投影效果的参数设置如图3-36所示,导航栏效果如图3-37所示。步骤8添加导航文字。选择“横排文字工具”选项,在“字符”面板上进行相关设置,“字符”面板的参数设置如图3-38所示。在画布中输入相应的文字,添加文字后的效果如图3-39所示。步骤9保存图像为PSD格式。网站导航页效果参见图3-20。选择“文件”→“存储为”选项,打开“另存为”对话框,单击“保存类型”下拉列表,选择“Photoshop(∗.PSD;∗.PDD;∗.PSDT)”选项,单击“保存”按钮。3.4.1网页布局设计的原则网页布局设计的原则应包括协调、一致、流动、均衡和强调,另外,在进行网页布局设计的同时,需要考虑到网页页面的醒目性、创造性、造型性、可读性与明快性等因素。1.协调2.一致3.流动4.均衡5.强调学习情景3.4网页布局设计3.4.2常见的布局模式常见的布局模式有：1.一栏式布局。一栏式布局的网页如图3-40所示。2.两栏式布局(1)左窄右宽布局。如图3-41所示。(2)左宽右窄布局。左宽右窄布局的网页通常内容在左侧,导航在右侧,如图3-42所示。(3)左右均等布局。如图3-43所示。3.三栏式布局三栏式布局在内容的排版上更加紧凑,更加充分地利用网页有限的空间,尽可能多地展示信息内容,通常在信息量非常丰富的网页设计中大量使用。三栏式布局的网页如图3-44所示。4.卡片式布局卡片式布局的网页可以在页面上放置大量内容,同时又能保持每部分内容各不相同。卡片式布局主要有两种形式。(1)网页中每个卡片的尺寸相同,卡片的排列非常标准。排列标准的卡片式布局如图3-45所示。(2)使用不同尺寸的卡片组成页面的布局,卡片间没有固定的顺序。没有固定顺序的卡片式布局如图3-46所示。5.F形/Z形布局F形布局是指用户通常会沿着左侧垂直浏览而下,先去寻找文章中每个段落开头的兴趣点,这时,如果用户发现了自己喜欢的,就可以从这里开始水平线方向的阅读。F形布局的网页如图3-47所示。TheNielsenNorman机构曾对232名用户在上千个网站中的浏览习惯进行观察,总结出F模式的特点如下。(1)用户极少逐字阅读。(2)每个段落开始的两个字最为重要,这将决定内容是否能留住用户。(3)初始段落,副标题和要点都要保持醒目。课堂案例3-3制作家居网站首页【案例要求】本案例制作的家居网站首页效果如图3-49所示。【案例分析】相同类型的网站采用不同类型的布局模式会有不同的效果。一栏式布局的网页清晰简单,流畅均衡;两栏式布局的网页便于用户查找内容,内容丰富;三栏式布局的网页能够显示更多的信息;卡片式布局的网页排列整齐。灵活使用布局方式能够提升用户的体验。【实施步骤】步骤1新建画布。启动PhotoshopCC软件,新建画布,画布大小的设置如图3-50所示。步骤2绘制参考线。选择“视图”→“新建参考线版面”选项,绘制参考线,作为辅助,在“列数”和“行数”中分别输入9和5,新建参考线版面的参数设置如图3-51所示。步骤3绘制矩形。利用参考线绘制两个矩形确认画面比例,选择“矩形工具”选项,绘制矩形,分别设置“填充颜色”为RGB(248,248,248)、RGB(232,232,232),如图3-52所示。步骤4添加导航栏文字。选择“横排文字工具”选项,输入下列图片中的文字。设置“字体”为微软雅黑、“字号”为30点、“字体样式”为BOLD、“文字颜色”为RGB(0,0,0),单击图层缩略图,生成选区,在移动工具的情况下单击“垂直居中对齐”按钮和“水平分布”按钮,将文字垂直居中、水平分布在选区中,添加导航栏文字效果如图3-53所示。步骤5制作右侧搜索栏。首先选择“圆角矩形工具”选项,绘制圆角矩形,设置“宽度”为288px、“高度”为37px,并与文字对齐;其次选择“横排文字工具”选项,输入文字“沙发套装”,设置“字体”为微软雅黑、“字号”为20点、“文字颜色”为RGB(255,255,255)、字体为“加粗”显示;然后选择“椭圆工具”选项绘制搜索按钮,设置“宽度”为20px、“高度”为20px、“描边”为1px,禁填充;最后选择“直线工具”选项绘制直线,设置“角度”为45°、“描边”为1px,禁填充,效果如图3-54所示。步骤6添加素材“01”。将素材“01”拖动到适当的位置,添加素材后的效果如图3-55所示。步骤7添加文字。选择“矩形工具”选项,在左侧绘制矩形,图层命名为“矩形1”,设置“宽度”为288px、“高度”为37px、“描边”为3px、“颜色”为RGB(113,181,212),禁填充。选择“横排文字工具”选项,输入文字“北欧家具”“生活就应该化繁为简”,首先设置“北欧家具”,“字体”为方正姚体、“字号”为110点、“字符间距”为-100、“水平缩放”为120%、“字体颜色”为RGB(80,167,208);然后设置“生活就应该化繁为简”,“字体”为方正姚体、“字号”为30点、“字符间距”为-80、“水平缩放”为120%、“字体颜色”为RGB(80,167,208)。单击“矩形1”图层缩略图,生成选区,在移动工具的情况下单击“垂直居中”按钮,添加文字后的效果如图3-56所示。步骤8添加“立即选购”按钮。在“矩形1”图层下方,选择“圆角矩形工具”选项绘制图形,图层命名为“矩形2”,设置“宽度”为270px、“高度”为66px、“圆角半径”为60px。在“矩形2”图层中输入文字“立即选购”,设置“字体”为方正姚体、“字号”为30点、“字符间距”为-80、“水平缩放”为120%、“字体颜色”为RGB(0,0,0)。单击“矩形2”图层缩略图,生成选区,在移动工具的情况下单击“垂直居中”按钮和“水平居中”按钮,再单击“矩形1”图层缩略图,生成选区,在移动工具的情况下将“矩形2”和“矩形1”垂直居中,效果如图3-57所示。步骤9添加“切换”按钮。选择“椭圆工具”选项,在右下角绘制椭圆图形,设置“宽度”为53px、“高度”为53px、“圆角半径”为60px、“颜色”为RGB(160,160,160)。选择“直线工具”选项绘制小三角,复制椭圆和小三角,选中复制的椭圆和小三角图层,按快捷键“Ctrl+T”进入自由变换,选择“水平翻转”选项,移动到右侧合适位置,并设置右侧椭圆“颜色”为RGB(80,167,208),效果如图3-58所示。步骤10添加Logo。选择“椭圆工具”选项,在左上角绘制Logo,设置“宽度”为170px、“高度”为87px、“颜色”为RGB(80,167,208)。在椭圆图形中输入文字“北欧”,设置“字体”为方正姚体、“字号”为30点、“字符间距”为-80、“水平缩放”为120%、“字体颜色”为RGB(80,167,208)。文字“家具”设置同上,调整到合适的位置,添加Logo后的效果如图3-59所示。步骤11保存图像为PSD格式。家居网站首页效果参见图3-49。选择“文件”→“存储为”选项,打开“另存为”对话框,单击“保存类型”下拉列表,选择“Photoshop(∗.PSD;∗.PDD;∗.PSDT)”选项,单击“保存”按钮。课后拓展———制作手机宣传网页【理论能力】一个优秀的网站,通常具备丰富的内容、美观的网页效果和独特的风格,并且在这三个方面能够实现和谐统一。在对网页UI进行设计时,需要针对不同的场景,选择恰当的布局方式,还需要对主体的属性进行判断,选择更优的方案,尽可能地赋予设计灵魂。【实训步骤】(1)新建画布。启动PhotoshopCC软件,新建画布,画布大小的设置如图1所示。(2)绘制参考线。选择“视图”→“新建参考线版面”选项,绘制参考线,作为辅助,在“列数”和“行数”中都输入4,如图2所示。(3)设置前三行渐变工具颜色。第一个色标(位置0%),设置颜色为RGB(214,169,255);第二个色标(位置50%),设置颜色为RGB(63,187,254);第三个色标(位置100%),设置颜色为RGB(136,228,255)。利用参考线,使用“矩形选框工具”在上三行创建选区,创建新图层,再用“渐变工具”填充颜色,设置图层“不透明度”为80%,如图3所示。(4)设置最后一行渐变工具颜色。第一个色标(位置0%),设置颜色为RGB(225,225,244);第二个色标(位置50%),设置颜色为RGB(255,255,255);第三个色标(位置100%),设置颜色为RGB(225,225,244)。利用参考线,使用“矩形选框工具”在最后一行创建选区,创建新图层,再用“渐变工具”填充颜色,设置图层“不透明度”为80%,如图4所示。(5)绘制矩形工具,添加蒙版。选择“矩形工具”选项,绘制矩形工具,设置“宽度”为1350px、“高度”为1350px、“颜色”为RGB(0,0,0),按快捷键“Ctrl+T”进入自由变换,顺时针旋转45°放置到合适的位置,添加蒙版,用“画笔工具”把下方多余的地方擦除掉,如图5所示。(6)添加“手机”素材。使用“椭圆工具”在手机下面绘制一个椭圆,复制“手机”素材,按快捷键“Ctrl+T”进入自由变换,选择“垂直翻转”选项,调整到合适的位置,添加素材后的效果如图6所示。(7)涂抹倒影。新建图层,选择“画笔工具”选项,设置“画笔颜色”为RGB(101,204,254)、“混合模式”为颜色减淡,在倒影下涂抹,如图7所示。(8)绘制矩形工具。使用“矩形工具”选项进行绘制,设置“宽度”为80px、“高度”为30px、“颜色”为渐变颜色。设置渐变颜色:第一个色标(位置0%),设置颜色为RGB(194,188,255);第二个色标(位置50%),设置颜色为RGB(112,197,254);第三个色标(位置100%),设置颜色为RGB(132,222,254)。设置“渐变类型”为线性渐变、“角度”为0°,如图8所示。(9)添加文字。选择“横排文字工具”选项输入下列文字,“HUAWEIP30”:设置“字体”为方正姚体、“字号”为18点、“字符间距”为0、“水平缩放”为120%。“照亮你的美”:设置“字体”为微软雅黑、“字号”为24点、“字符间距”为200、“字体颜色”为RGB(0,0,0);“每一张自拍,都是大师手笔”:设置“字体”为微软雅黑、“字号”为10点、“字符间距”为0。添加文字后的效果如图9所示。(10)文字颜色设置。在“移动工具”状态下,单击“HUAWEIP30”文字图层,生成选区,新建图层,使用“渐变工具”填充颜色,设置渐变颜色:第一个色标(位置0%),设置颜色为RGB(194,188,255);第二个色标(位置50%),设置颜色为RGB(112,197,254);第三个色标(位置100%),设置颜色为RGB(194,188,255)。设置“渐变类型”为线性渐变,从左向右拉拽。“每一张自拍,都是大师手笔”设置同上,如图10所示。(11)绘制“立即抢购”按钮。选择“圆角矩形工具”选项绘制图形,设置“宽度”为195px、“高度”为46px、“圆角半径”为60px、“颜色”为渐变颜色。设置渐变颜色:第一个色标(位置0%),设置颜色为RGB(194,188,255);第二个色标(位置50%),设置颜色为RGB(112,197,254);第三个色标(位置100%),设置颜色为RGB(132,222,254)。设置“渐变类型”为线性渐变、角度为0°。选择“横排文字工具”选项输入“立即抢购”,设置“字体”为微软雅黑、“字号”为26点、“字符间距”为220、“字体颜色”为RGB(255,255,255)。在“移动工具”状态下,单击“圆角矩形缩略图”生成选区,让文字和圆角矩形水平居中对齐。最后选择“直线工具”选项绘制小三角,调整到合适的位置,如图11所示。(12)选中下列图层,在“移动工具”状态下,单击导航栏中的“左对齐”按钮和“垂直分布”按钮,“立即抢购”文字和“小三角”排序出错可重复步骤(1