《交互界面设计》课件-1.1 UI基础知识

UI设计UIdesignUI设计UIdesign1.1UI基础知识学习目的1.了解UI设计的基本概念2.了解UI设计发展与展望UI设计的基本概念1.1.1什么是UI设计什么是UI设计？UI即UserInterface的简称泛指系统和用户之间交互的媒介。实现信息内部形式与用户接受形式转换的关键。1.用户研究（UserStudy）研究如何提高产品的可用性；发掘用户的潜在需求，为技术创新提供新思路。2.交互设计（InteractionDesign）研究产品交流过程中用户的心理模式和行为模式，设计出合理的交互方式。3.用户界面（UserInterface）用户界面设计师是负责界面外观的关键所在。1.1.2UI设计的分类1.移动UI设计2.PC端UI设计3.游戏UI设计4.其它UI设计1.1.2UI设计的分类01移动UI设计移动UI设计：针对移动设备（手机、平板电脑、智能手表等）的界面设计。此处二维动画：体现UI设计的分类，分为四类，依次展现每类，展现过程中加入图片（图片位于5-7页PPT）1.1.2UI设计的分类02

PC端UI设计PC端UI设计：是针对电脑的界面设计。相对于移动UI设计，PC端屏幕尺寸大，设计规范较少，因此界面的视觉效果更为突出。可分为两大类一是网页设计；二是应用软件的界面设计。此处二维动画：体现UI设计的分类，分为四类，依次展现每类，展现过程中加入图片（图片位于5-7页PPT）1.1.2UI设计的分类03游戏UI设计游戏UI设计：是指游戏界面设计。按平台分类，常见的游戏类型包括手游、端游和掌机游戏等。入门要求较高，要求设计师有较高的美术基础和审美能力。此处二维动画：体现UI设计的分类，分为四类，依次展现每类，展现过程中加入图片（图片位于5-7页PPT）1.1.2UI设计的分类04其他UI设计其他UI设计：载体通常是一些小众或目前正处于发展阶段的智能设备，如车载设备、VR（虚拟现实技术）设备、AR（增强现实技术）设备等。此处二维动画：体现UI设计的分类，分为四类，依次展现每类，展现过程中加入图片（图片位于5-7页PPT）1.1.3移动UI设计原则视觉美观是移动UI设计最基本的要求。1.视觉美观一致性是每个优秀APP都具备的特点。一个APP中往往存在多个界面，大到外观风格，小到组件、动效和交互行为，都应保持一致。2.一致性1.1.3移动UI设计原则3.突出主题1）表现形式要符合主题需要设计界面时，只是追求花哨的表现形式，容易过于强调创意而忽略主要内容；只追求功能和内容，容易采用平淡无奇的表现形式，都会使界面苍白无力。只有二者有机结合，让表现形式为内容服务，才能突出主题。2）确保元素必要性设计界面时，要确保每个元素都有存在的意义，不要单纯为展示设计理念和新技术添加一些毫无意义的元素，这会使用户感到莫名其妙，弱化主题效果。1.1.3移动UI设计原则4.为用户考虑1）符合用户操作习惯无论是单手操作还是双手操作，用户的操作习惯都是有章可循的，掌握用户的操作习惯，并将其用于界面设计中，能给用户更好的操作体验。拇指热区拇指热区是指用户在单手操作时，拇指的触摸范围，该范围分为易操作区、伸展区和不易操作区。1.1.3移动UI设计原则4.为用户考虑1）符合用户操作习惯无论是单手操作还是双手操作，用户的操作习惯都是有章可循的，掌握用户的操作习惯，并将其用于界面设计中，能给用户更好的操作体验。内容在上，操作在下这一原则让使用者在操作过程中手指始终处于界面下方，不会出现手指遮挡内容的情况，如图所示。设计师应根据按钮功能对按钮位置进行合理安排，避免用户因不小心碰触而增加操作步骤，如图所示。1.1.3移动UI设计原则4.为用户考虑2）简化操作步骤用户使用APP是为了解决问题，设计师应把握这点，尽量减少无用的操作步骤，通过简洁的操作流程提升用户体验。例如，想在微信中更换头像，只需点击头像，在照片库中选择图像即可。3）容错性反馈优秀的APP应确保用户的任何操作都具备可逆选项或危险提示。当用户做出删除、调整、不恰当或错误操作时，应当有危险提示介入。1.1.3移动UI设计原则5.快速加载1）优化图片在不影响功能和美观的前提下，能用代码实现的效果就尽量不用图片。在保证质量的前提下尽量压缩图片，以确保用户浏览顺畅，缩短加载时间。2）提供进度条或等待动画合理利用功能较多的APP启动时的加载时间，加入进度条和当前操作状态提示，如右图所示。UI设计的发展与展望1.1.4UI设计的发展与展望将来，UI界面设计会更加注重产品功能性，在对界面操作化繁为简的同时，将产品品牌精神与设计风格完美结合，界面的操作会贴近人们的生活习惯和使用习惯，更加智能化，以便于给人们的操作带来更大的便利。UI设计行业未来发展的三个趋势：倡导简约主义结合品牌精神创造四维世界1.1.4UI设计的发展与展望01倡导简约主义移动界面较小的屏幕迫使设计者必须把那些花俏的修饰和多余的内容去掉，优先保证对业务和客户体验影响的功能的呈现。1.1.4UI设计的发展与展望02结合品牌精神

UI设计在一定程度上掌握着整个产品效果的灵魂和精髓，因此，在简化流程追求简约风的同时也得实际结合产品的品牌精神，将其融入产品中，让设计成为一个活的品牌代表，张扬个性设计的同时，将品牌植入人们的视野里。1.1.4UI设计的发展与展望03创造四维世界设计产品不断更新换代的过程中，UI设计师开始意识到，数字世界跟现实本来就有差异，应该是用户直接操作屏幕或者对象，因此没有必要再坚持把现实生活中的对象按照原样照搬进数字空间里面，他们要达成的目标是一个用户无论走到哪里都可见的四维世界。UI设计UIdesign1.2UI设计流程学习目的1.掌握UI设计的设计流程UI设计的流程1.2UI设计流程UI设计是一个承上启下的角色这一点都不为过，在如今这个视觉体验传到的社会里，UI设计角色愈来愈重。UI设计制作，一般都要经过“需求分析—设计制作—方案修改—测试改进”四个阶段。1.2UI设计流程UI设计不光要研究产品的外形、图形界面，还要研究产品的交互设计，并且确立交互模型、交互规范，同时要测试交互设计的合理性及图形设计的美观性等。也就是说，UI设计包括了界面设计、交互设计与用户研究3个部分。因此，UI设计师的基本工作流程可以分为以下几个阶段。01需求分析阶段UI设计测试改进阶段方案修改阶段需求分析阶段设计制作阶段测试反馈修改完善Who界面设计WhereWhy交互设计1.2UI设计流程在UI设计开始之前，设计人员需要先分析设计需求，整理思路，然后才能开展有针对性的设计。分析需求可以从以下3个方面入手。01需求分析阶段市场需求用户需求产品需求1.2UI设计流程需求分析完成后，即可对UI设计内容进行视觉定位，一般可从以下3个方面入手。01需求分析阶段色彩与字体的选择设计风格界面布局和构图1.2UI设计流程在需求分析的基础上，我们进入设计制作阶段。设计包括界面设计和交互设计，且要形成设计方案。界面设计当然以美观为主，要有创新，在同类产品中能够脱颖而出。02设计制作阶段1.2UI设计流程界面设计包括启动界面、主界面、详情界面等代表性界面的设计。交互设计要分析产品必需的功能、内容，根据需要制作低保真模型或高保真模型，也可通过原型工具来规划流程。如果有条件的话，可以在设计时，多设计出几套不同风格的方案用于备选。02设计制作阶段1.2UI设计流程02设计制作阶段原型图是设计人员对产品的最初设想，主要对产品内容和结构进行粗略的布局。当明确视觉定位后，设计人员即可进行原型图的绘制，下图所示为两种不同类型原型图效果。1.2UI设计流程03绘制效果图1.搜集素材图片、视频和音效的搜集文字类信息的搜集网上搜集、实物拍摄和绘制。文字类信息主要是根据产品的特性、功能来进行收集。1.2UI设计流程03绘制效果图2.进行UI设计设计人员可先根据原型图的要求绘制主要形状，并按照设计要求添加或绘制素材，进行界面的制作即可。右图所示为使用Photoshop进行UI设计的效果。1.2UI设计流程03绘制效果图3.标注与切图一般来说，设计人员都会使用一些专业的标注工具来提升工作效率，如MarkMan（马克鳗）、PxCook（像素大厨）等工具，而切图工具则可直接选择Photoshop。下图所示为使用PxCook进行标注的效果。1.2UI设计流程04方案修改阶段设计方案提交给客户后，需要与客户进行沟通，根据客户的需求来修改设计。04方案修改阶段在设计方案通过并交付以后，就可以将产品推向市场了。但设计并没有结束，还需要跟踪了解用户的测试与反馈。UI设计UIdesign1.3UI设计规范学习目的1.掌握UI设计规范的原则2.掌握UI设计规范的内容3.了解不同系统的UI设计规范UI设计规范的原则1.3.1UI设计规范的原则没有规矩，不成方圆，UI设计也不例外。设计师不能单凭个人的主观经验做设计，要想提升用户体验、高效且顺畅地完成设计任务，就需要遵守一些设计原则。很多时候，设计原则是为了解决统一性和效率问题，避免开发过程中重复、烦琐的低效工作。1.3.1UI设计规范的原则UI设计规范的一致性原则表现在产品界面的各个方面，如在设计布局界面时，需要使标题字体、内容字体、链接字体等保持一致；在进行交互设计时，界面中的交互组件、交互流程、用户行为、交互样式、界面元素等应保持一致。一致性高效性与准确性建立通用的设计细节规范必不可少，这不仅能够降低设计人员的沟通成本，提高设计的准确性，还遵循了UI设计规范的高效性和准确性原则。UI设计规范的内容1.3.2UI设计规范的内容01图标设计规范图标是具有高度概括性的、用于传达视觉信息的小尺寸图像，常与文本搭配使用。图标不仅能传达出丰富的信息，还能提升整个界面美感和信息可识别性。同时，有的图标还具有交互性和功能性，用户点击这些图标会执行特定的操作，触发相应的功能。1.3.2UI设计规范的内容02色彩使用规范色彩使用规范主要是确定产品UI设计中所能使用的色彩种类。如图所示为界面中文字的色彩使用规范示例。1.3.2UI设计规范的内容03字体和行间距的设计规范

UI设计中对不同字号下的行间距要求也会有不同，一般来说，行间距的大小为字号的1~1.5倍，当然设计人员可根据实际需要标注出产品界面中不同文字内容对应的行间距大小。1.3.2UI设计规范的内容04按钮设计规范设计人员应将按钮的设计规范进行文字说明，包括将按钮尺寸大小、按钮圆角大小、描边大小，以及按钮中的文字大小等标识清楚。此外，按钮的视觉体现主要包括默认、点击和禁用3种状态。1.3.2UI设计规范的内容05图片设计规范图片也是UI设计中的重要组成部分之一，设计人员可按照用途对其进行分类，并遵循一定的设计规范，包括图片的比例与尺寸规范等。1.3.2UI设计规范的内容06组件设计规划UI设计中的组件包括以下内容。下拉列

表框文本输入框进度条提示框分割线弹出面板搜索框单选项和复选框不同系统的UI设计规范1.3.3iOS系统的UI设计规范01界面尺寸规范与框架要了解界面尺寸规范首先需要对iOS设备的分辨率和框架有所了解，其中iOS移动设备界面中常见的分辨率和框架主要有4种，如图所示。1.3.3iOS系统的UI设计规范02控件规范

iOS系统中的界面控件以下内容。这些控件都有一定的设计规范，下面进行详细介绍。导航栏选项卡开关搜索栏标签栏提示框1.3.4Android系统的UI设计规范01界面尺寸规范与框架

Android系统界面的尺寸大小一般包括320px×480px、426px×800px、720px×1280px、1080px×1920px，其中状态栏高度为72px，Android系统界面的尺寸规范并不明确，设计人员可根据需要进行调整。Android系统界面框架包括状态栏、导航栏、主菜单栏、内容区域4个部分。1.3.4Android系统的UI设计规范02Android系统中的单位换算与iOS系统不同的是，Android系统的开发通常会使用dp作为单位，而一般的UI设计图则以px为单位。因此在Android系统中需要进行单位的换算，这可以通过程序人员在后期代码中实现。1.3.4Android系统的UI设计规范03控件规范

Android系统中的控件与iOS系统中的控件有很多相似之处，不同的是Android系统中的UI设计更加多样化，自定义控件很多。下面主要讲解与iOS系统不同的控件的设计规范。ABCD顶部标签栏单行列表框卡片全局导航栏1.3.4Android系统的UI设计规范04Windows系统的界面尺寸规范由于Windows系统也在不断的升级改版，其界面尺寸有很多，常见的界面尺寸主要包括如图所示的8种主要尺寸。1.3.4Android系统的UI设计规范05控件规范与Android系统和iOS系统一样，Windows系统中的控件也需要制定相应的设计规范。导航栏Logo图标状态栏滚动条图标与图片UI设计UIdesign1.4UI设计的文字与排版学习目的1.了解UI设计常用字体类型2.了解UI设计中的字体规范3.了解UI设计的文字排版技巧UI设计常用字体类型1.4.1UI设计常用字体类型字体是UI设计中不可或缺的一部分，是决定设计效果的关键。不同的字体在界面中渲染的氛围不同，正确地选择和使用字体不但能美化界面效果，还能使信息展现更加直观，并吸引用户继续浏览。宋体黑体书法体手写体楷体艺术体1.4.1UI设计常用字体类型01衬线体衬线体在笔画的始末位置有额外的装饰，且粗细会因笔画的不同而有所区别，强调笔画的走势及前后联系，这使得前后文有更好的连续性，更适合作为正文字体。1.宋体字形方正、横细竖粗、撇如刀、捺如扫、点如瓜子等特点，它是通用的印刷体。2.Garamond字体兼具美观性和易读性，被誉为“衬线之王”，适合长时间阅读。此处动画：体现衬线体的笔画特点（图片位于本页）1.4.1UI设计常用字体类型02非衬线体非衬线体笔画粗细基本一致，适合用于标题类需要醒目但又不被长时间阅读的文字，其特点是方正、朴素、简洁、明确、黑白均匀。1.黑体也称等线体，具有横竖粗细一致、方头方尾的特点，文字浑厚有力、朴素大方。2.Arial字体字形干净、清晰，易于辨认，是很多数字印刷机和操作系统中不可缺少的字体。此处动画：体现非衬线体的笔画特点（图片位于本页）UI设计中的字体规范1.4.2系统默认字体规范iOS系统的默认字体规范Android系统的默认字体规范从iOS9系统开始中文的默认字体为“苹方”，英文的默认字体为“SanFrancisco”，字形纤细饱满，便于阅读。

Android系统中中文的默认字体为“思源黑体”，英文的默认字体为“Roboto”，字形线条粗细适中、端正大方。1.4.3常见的字号规范App界面的常见字号网页界面的常见字号App界面中的导航栏字号和标题字号为36~40px，正文字号为32~34px，副文字号为24~28px，最小字号不低于20px。网页界面中的字号并没有强制规定，常见的字号为12~30px。1.4.4常见的字体色彩规范

UI设计中的字体规范除了大小规范外，还有色彩规范。一般来说，界面中的色彩不宜过多，可先选择一种主色，然后在主色基础上进行色彩的透明度变换，如图所示。1.4.5常见的字体色彩规范无论是网页界面还是App界面设计，文字在界面中所占比例都较大。因此掌握UI设计中的字体排版对设计人员来说非常关键，不同的字体排版可以给界面带来意想不到的效果。绕图型字体排版齐头齐尾型字体排版齐头散尾型字体排版自由型字体排版1.4.6文字规范iOS8系统使用的中文字体是华文黑体，英文和数字字体是HelveticaNeue；在系统升级至iOS9后，中文字体改为了苹方，英文和数字字体改为了SanFrancisco。01iOS系统字体苹方字体提供了Bold（粗体）、Extralight（特细）、Light（细体）、Medium（中等）、Regular（常规）6种粗细效果。设计师在制作界面时可选用Regular（常规）和Bold（粗体）来表示字体的普通和加粗状态，效果如图。1.4.6文字规范在Android设备上，系统默认的中文字体为思源黑体，英文字体为Roboto，但国内手机大都是第三方厂商定制而成，对默认的系统字体有所改变。02Android系统字体1.4.6文字规范03系统字号文字所在的位置不同，使用的字号也有所差别。iOS系统的设计中用px标注字号，而Android系统使用sp标注，其中1sp=2px。系统字号的大小和对应的位置：36px：用于顶部导航栏的栏目名称。30px：用于标题文字和大按钮文字。28px：用于主要文字，正文或小按钮文字。24px：用于辅助文字。22px：用于底部标签栏文字。18px：用于提示性文字。

在实际设计中，设计师设计文字时需要将字号设置为偶数，这样可以方便后期开发和适配。小技巧UI设计的文字排版1.4.7UI设计的文字排版1.避免同一界面使用过多的字体在同一界面中使用过多的字体会让内容显得混乱，重点不够清晰，让用户的阅读体验大打折扣。湖北省博物馆——掌上智慧博物馆APP1.4.7UI设计的文字排版1.避免同一界面使用过多的字体此处制作二维动画，图片依次播放课程思政：通过掌上智慧博物馆APP线上展厅，语音讲解，导览地图，可以随时了解该博物馆详细的展览资讯。全方位了解我国文物详情，体验文化，自我学习，希望通过博物馆的文化学习、体验、感受，激发青少年的爱国之心，让同学们保持家国情怀，心里装着国家和民族，关注时代、关注社会，汲取养分、丰富思想。1.4.7UI设计的文字排版1.避免同一界面使用过多的字体课程思政：通过掌上智慧博物馆APP线上展厅，语音讲解，导览地图，可以随时了解该博物馆详细的展览资讯。全方位了解我国文物详情，体验文化，自我学习，希望通过博物馆的文化学习、体验、感受，激发青少年的爱国之心，让同学们保持家国情怀，心里装着国家和民族，关注时代、关注社会，汲取养分、丰富思想。1.4.7UI设计的文字排版2.字体设计要有层级感在UI设计中，文字不仅可以起到解读、引导的作用，而且能起到平衡版面的作用。每一个界面都需要有自己的视觉中心和主要展示内容，层级感高的字体设计可以使界面更加精简，用户操作起来也会感到更加流畅、简洁。同袍汉服UI设计课程思政：宣扬汉服文化的同时又可以供汉服爱好者交流、互动、灌水且购买汉服的APP平台。1.4.7UI设计的文字排版3.字体设计动静结合字体的动静结合在UI设计中的应用也比较广泛，可以是正常字体和倾斜字体的结合，富有个性的字体和形态差距大的字体的结合，也可以是旋转字体与其他正常字体的结合等。字体动静结合，一般在跟儿童有关的界面中比较常见，有时也会出现在一些运动类界面当中。儿童UI设计-最爱我的汉克狗UI设计UIdesign1.5UI设计中图片与排版学习目的1.了解UI设计的图片类别与格式2.了解UI设计的图片比例3.掌握UI设计的图片与排版UI设计的图片类别与格式1.5.1UI设计的图片类别与格式一、UI设计的图片类别1.位图位图也称栅格图像，我们用数码相机拍摄的照片、扫描仪扫描的图片，及在计算机中抓取的图像都属于位图。

位图的特点是可以表现色彩的细微过渡，产生逼真的效果，但同时也会占用较多的存储空间。正常显示位图放大600%的位图

从图可以看出位图是由紧密排列的像素组成的，在Photoshop中处理的图像一般是位图。1.5.1UI设计的图片类别与格式一、UI设计的图片类别2.矢量图矢量图是图形软件通过数学的向量方式进行计算得到的图形，它与分辨率无关，可任意缩放、旋转，而不影响图像的清晰度和光滑度。从右图可以看出，图形依然光滑、清晰。因此，设计师常用矢量软件制作图标、Logo等需要经常缩放的图形。正常显示矢量图放大600%的矢量图1.5.1UI设计的图片类别与格式二、图片的格式图片是UI设计中很常见的元素，根据图片的用途将其可分为多种格式。PSDGIFJPG/JPEGPNGAI1.5.1UI设计的图片类别与格式二、图片的格式1.PSD

PSD是Adobe公司的图形设计软件Photoshop的专用格式。PSD文件可以存储成RGB或CMYK模式，还能够自定义颜色数并加以存储，还可以保存Photoshop的图层、通道、路径等信息，是唯一能够支持全部图像色彩模式的格式。

PSD格式文件很少为其它软件和工具所支持，在图像制作完成后，通常需要转化为一些比较通用的图像格式，以便于输出到其它软件中继续编辑。1.5.1UI设计的图片类别与格式二、图片的格式2.GIF

对于灰度图像表现最佳；采用改进的LZW压缩算法处理图像数据；调色板数据有通用调色板和局部调色板之分，有不同的颜色取值；

最多存储256色。GIF比较适用于色彩较少的图片，比如卡通造型、公司标志等等。1.5.1UI设计的图片类别与格式二、图片的格式3.JPEGJPEG格式也称JPG格式，支持CMYK、RGB、灰度等多种颜色模式，多用于网页素材图像。它采用有损压缩的算法，从而使文件体积更小，下载时间更短。JPEG格式适合色彩丰富，尺寸较大的图片。1.5.1UI设计的图片类别与格式二、图片的格式4.PNGPNG格式采用无损压缩，支持透明背景显示，iOS系统和Android系统都使用PNG格式作为控件和图标的标准格式。它是目前界面设计的主流图片格式。PNG8适合作为颜色简单，尺寸较小的图片格式；PNG24适合作为APP中各种自定义的控件图标等。1.5.1UI设计的图片类别与格式二、图片的格式5.AIAI格式文件是一种矢量图形文件，适用于Adobe公司的Illustrator软件的输出格式，与PSD格式文件相同，AI文件也是一种分层文件，用户可以对图形内所存在的层进行操作，所不同的是AI格式文件是基于矢量输出，可在任何尺寸大小下按最高分辨率输出，而PSD文件是基于位图输出。与AI格式类似基于矢量输出的格式还有EPS、WMF、CDR等。UI设计的图片比例1.5.2UI设计的图片比例01图片的使用规范了解图片的格式后，设计人员还需要掌握图片的使用规范，包括图片的比例与尺寸规范。图片的比例图片的尺寸规范在UI设计中，对于图片的比例没有严格的规定，设计人员可根据需要进行调整。App个人中心界面的用户头像大小多为144px×144px和120px×120px个人资料界面的用户头像大小多为96px×96px消息列表界面的用户头像大小多为80px×80px帖子详情页界面的用户头像大小多为44px×44px和60px×60px。1.5.2UI设计的图片比例02常见图片长宽比例1:1是比较常见的图片设计比例，相同的长宽比例将构图变得简单而规范，常用于产品、头像、特写等展示模块。1