计算机美术基础 课件 学习单元5 UI设计

学习单元5UI设计职业教育数字媒体技术应用专业系列教材《计算机美术基础》单元概述UI其实是UserInterface（用户界面）的简称。在进行UI设计时软件的界面美观性和人机互动方式都是非常重要的设计原则。好的UI设计会给用户带来良好的操作体验，简洁明了的操作界面却能展示出图形设计的美观性。本单元主要学习图标的图形设计及APP界面设计理论及制作过程。学习目标掌握图标的基本知识，了解图标的设计原则，以及扁平化的设计思路，最后学习如何进行图标的实用性测试。目录01扁平化图标设计02App界面设计扁平化图标设计01项目描述下面是一个关于一组家庭教育服务平台的App图标设计任务:某市海北区家庭教育服务中心致力于通过科学的教育理念和方法，为新生代家长免费提供专业、系统、有效的家庭教育指导服务，提高家长的育儿技能，使孩子更健康成长，让家庭更幸福。App提供的信息与服务包括:家长须知、通知公告、教子有方、课程回放、家校风采、释疑解惑、意见反馈和活动报名8大部分。设计内容：家长须知、课程回放两个图标。任务1图标的图形设计任务分析在设计之前我们首先须要了解图标的设计原则和不同的设计风格，本次我们需要为一款教育类软件的APP设计图标，我们首先要做的是确定图标的图形风格，第二步是确定系列图标的配色。图标设计的原则与风格为了保证图标的可识别度，图标的设计不能太过于复杂，图标过多的颜色会干扰用户的理解力。可识别度设计一套图标时尽量做到与众不同，但又不能违背它的功能性，而一套设计里的每个图标也要尽可能减弱图标之间的相似性，因为太相似的图标会影响到用户的识别能力增加用户的理解时间。设计独特UI设计是要适应各种分辨率不同的设备。只有使用矢量图才能适应不同的尺寸，在设计时要做到网格对齐，不对齐的图标容易造成边线变虚以及整体效果的错位，假如有条件应该多使用布尔运算。清晰度图标的设计要能让用户易于理解,丰富的想象力将图标设计得过于个性，会让用户难以理解图标的含义。每个人的视觉感知能力存在差异，要设计所有人都能轻易理解图像所包含的意义才是成熟的设计，也是图标为了更有效快捷传递信息的目的。表达内容在同一个应用场景里的图标设计风格必需统一，其中包括配色的风格统一、整体大小的统一、纹理材质统一、线条组细及圆角大小也必需统一。在设计图标时需要融入到整体的设计之中，否则图标在整体效果中会表现出不和谐。风格统一性任务2扁平化图标绘制任务分析本次需要制作的图标共有8个分别是：活动报名、家校风采、家长须知、教子有方、课程回放、释疑解惑、通知公告、意见反馈。确定图标的功能后需要构思图标的内容，其中包括每个图标的配色，图标内的元素等，目的是为了能够清楚表达出每个图标的含义。我们本次选择了扁平化设计，因为在移动设备上扁平化的设计能够表现出界面美观、简洁、整齐，给用户带来良好的操作体验。所以无论是移动设备还是台式算计机最新的操作系统都已经全面使用扁平化设计。扁平化设计是尽可能去除繁杂的修饰手法，例如阴影、透视、纹理、渐变、羽化等传统设计手法。更着重把核心信息展示出来。在配色方面三原色是很少直接运用的，更多的设计师更倾向于使用大胆鲜艳的配色，多数会选用鲜亮的，饱和度高的颜色。也有一部分的设计师倾向于使用复古颜色配搭上白色的内容形成一个反差，这种设计风格会更加柔和。任务2扁平化图标绘制任务实施1.为了在设计和制作中能够做出整体风格统一的图形，我们可以先绘制一些参考线，如图所示。2.在设计前可以先分析本次设计的内容，然后决定图标中需要使用的物品图形，以及配色。3.在设计时还需要确认最终的文件输出格式、色彩模式、图标大小精度等情况。项目小结本项目在难点在于图标表现手法的构思，需要设计出能让用户快速理解的图标含义同时不失去图形美观性，在形状的构思方面和配色都是非常重要的，UI设计里太复杂的图形设计并不是好的选择，如何将图形简化提高用户理解速度是设计师思考的重点。App界面设02项目概述本项目是一个关于某市海北区家庭教育服务平台的App界面设计任务：海北区家庭教育服务中心致力于通过科学的教育理念和方法，为新生代家长免费提供专业、系统、有效的家庭教育指导服务，提高家长的育儿技能，使孩子更健康成长，让家庭更幸福。App提供的信息与服务包括：家长须知、通知公告、教子有方、课程回放、家校风采、释疑解惑、意见反馈和活动报名8大部分。设计内容：首页和登录界面。当我们接到一个App界面设计的任务，首先会根据它的性质和特点去确定整个界面的布局和区域划分。学习目标1.了解界面布局和区域划分2.掌握App界面设计与实施方法确定App界面的布局与整体风格01任务分析当我们收到一份APP界面设计任务时，我们首先要了解我们设计的APP是属于什么类型的，平台首页提供多少项信息或服务，需要设置多少个功能分区，还有就是这个APP主要是供哪些人使用的，使用者有没有特殊要求等等，接着就要有针对性地规划整个界面的布局、风格与用色。该任务是一个关于社区家庭教育平台APP界面的设计，通过八大项信息和服务，我们可以设计几个不同的基本布局供客户（这里指的是家庭教育平台，又称甲方）挑选，让所有的服务和信息最大限度地呈现给它的受众——家长们了解并使用。为了可以让网站的“信息和服务”本身作为核心被凸显出来，我们可以使用目前相当流行的扁平化设计，通过抽象、极简和符号化的图案，设计出简洁、干净的图标，使其对应的“信息和服务”一览无余，让家长们获得更好的操作体验。绘制App界面草图02相关设备的参数目前市面上的移动设备屏幕尺寸种类非常多，一般而言，按照手机端屏幕的横向的分辨率可以大致将之分为4类：低密度（LDPI）、中等密度（MDPI）、高密度（HDPI）和超高密度（XHDPI）,具体参数如图所示。手机屏幕大小与分辨率参考数值常规版式例如购物网站和一些门户网站的界面，大多有页头或搜索栏、导航栏、图片与资讯栏、页脚栏等等，界面功能划分清晰，规整，使用户容易识别，不足之处是由于大量使用而缺乏新意，不容易提高认知度和点击率。常规版式1常规版式2非常规版式对有要求的客户而言，设计一款非常规界面就显得很有必要了。但要注意的是，一般界面设计和前端开发由不同的人员负责，界面设计师在设计界面时，要多与前端开发人员商量讨论相关设计是否可行，使用是否便捷，导向是否清晰等等，否则就会影响整个App程序开发进度和用户体验了。界面草图App界面设计与实施03任务分析完成了App界面设计的构思和构图后，可以根据设计风格搜集和整理素材——适用的文案、字体、宣传照片和图标，包括平台的标志和导航按钮。界面中部划分为三大块，其中右下部为纯色色块，其余为配图，配图内容为家庭教育、亲子类等活动相关图片，文字选择简洁鲜明，个性比较温婉的字体，以突出界面的整体效果。App首页和登录页效果图任务实施过程新建文件，创建参考线创建参考线完成图片处理并添加图案效果处理图片添加图标和文字完成页眉页脚每个色块为一个图层创建背景色块调整图标大小并放到页面相应位置添加图标任务实施过程将首页主体部分设置高斯模糊制作登录页背景创建矩形并填充颜色添加输入框创建圆角矩形并调整不透明度制作半透明背景绘制图标及其投影绘制登录图标调整图标大小并放到页面相应位置添加文字和图标项目小结04项目小结App界面设计作为机构与目标客户沟通媒介的第一道视觉关卡，反映了机构自身的定位和理念，所以深入了解机构的发展理念和成长之路非常重要，这有赖设计师跟甲方的密切沟通联系，才能在众多的资讯中挑