UI界面设计课件PPT文件格式下载.ppt

UI界面设计课件PPT文件格式下载.ppt

《UI界面设计课件PPT文件格式下载.ppt》由会员分享，可在线阅读，更多相关《UI界面设计课件PPT文件格式下载.ppt（141页珍藏版）》请在冰豆网上搜索。

,UI界面设计相关知识-1.UI界面设计的概念,一、什么是UI界面设计？

界面设计即UserInterfaceDesign（用户界面设计）的简称，是指对软件的人机交互、操作逻辑、界面美观的整体设计。

人机交互,操作逻辑,界面美观,问题一：

界面设计=版式设计？

所谓版式设计，就是在版面上，将有限的视觉元素进行有机的排列组合。

界面设计的内容包括：

图形、文字、色彩、编排，使界面起到美化效果的作用。

需要研究用户需求，研究目标用户。

问题二：

界面设计=用户+界面？

或者界面设计就是单单指界面美化设计？

从字面上看，UI有用户与界面两个组成部分，但实际上还有还有用户与界面之间的交互关系。

界面设计需要定位使用者、使用环境、使用方式。

不仅仅是美化界面，还有需要研究用户、让界面变得更友好、更有趣、更易用、更舒适。

UI,用户,界面,=,+,交互,=,版式,考虑用户的心理需求，研究目标用户,前面讲到UI设计包括两方面美化和交互。

让大家更了解UI设计的重要性从美化的角度看：

UI优化后:

1更有时尚感、层次感2.从QQ图像就能知道是QQ的登入界面，更直观、形象。

从交互的角度：

未UI优化的界面：

1.功能过于简单2.登入没有体现按钮的特点，而不会单击3.密码输入框也没有做掩密处理，被盗号的风险系数增加,”,“,ui设计是做什么的？

UI设计从工作内容上来说分为3个方向。

它主要是由UI研究的3个因素决定的，其分别是研究界面，研究人与界面的关系，研究人。

1.研究界面-图形设计师国内目前大部分UI工作者都是从事这个行业。

也有人称之为美工，但实际上不是单纯意义上的美术工人，而是软件产品的产品外形设计师。

这些设计师大多是美术院校毕业的，其中大部分是有美术设计教育背景，例如工业外形设计，装潢设计，信息多媒体设计等。

2.研究人与界面的关系-交互设计师在图形界面产生之前，长期以来UI设计师就是指交互设计师。

交互设计师的工作内容就是设计软件的操作流程，树状结构，软件的结构与操作规范（spec）等。

一个软件产品在编码之前需要作的就是交互设计，并且确立交互模型，交互规范。

交互设计师一般都是软件工程师背景居多。

2.UI设计师,”,“,3.研究人-用户测试/研究工程师。

任何的产品为了保证质量都需要测试，软件的编码需要测试，自然UI设计也需要被测试。

这个测试和编码没有任何关系，主要是测试交互设计的合理性以及图形设计的美观性。

测试方法一般都是采用焦点小组，用目标用户问卷的形式来衡量UI设计的合理性。

这个职位很重要，如果没有这个职位，UI设计的好坏只能凭借设计师的经验或者领导的审美来评判，这样就会给企业带来严重的风险性。

用户研究工程师一般是心理学人文学背景比较合适。

综上所述UI设计师就是：

软件图形设计师、交互设计师和用户研究工程师。

UI界面设计相关知识,3.界面设计涉及的范围及学科界面设计是一种结合美学、计算机科学、心理学、行为学、人机工程学、信息学以及市场学等的综合性学科，强调人机环境三者作为一个系统进行总体设计。

UI界面设计相关知识-4.界面设计的工作流程,4.界面设计的工作流程：

产品制作人，写产品计划书。

用户体验研究员，作调查分析。

信息建构师，设计产品架构。

交互设计师，作出互动流程。

视觉设计师，作出页面视觉设计。

前台工程师，前台开发。

后台工程师，后台开发。

用户体验研究员，做用户测试确保质量。

UI界面设计相关知识-4.界面设计的流程,线框原型、黑白原型稿,产品原型,界面设计,”,“,UI界面设计相关知识-5.UI界面设计的规范,手机界面设计规范,iOS系统规范,iphone界面基本组成元素,状态栏（statusbar）：

就是我们经常说的信号、运营商、电量等显示手机状态的区域，其高度为：

40px导航栏（navigation）：

显示当前界面的名称，包含相应的功能或者页面间的跳转按钮，其高度为：

88px主菜单栏（submenu，tab）（标签栏）：

类似于页面的主菜单，提供整个应用的分类内容的快速跳转，其高度为：

98px内容区域（content）：

展示应用提供的相应内容，整个应用中布局变更最为频繁，其高度为：

734px。

内部设计1、所有能点击的图片不得小于44px（Retina需要88px）2、单独存在的部件必须是双数尺寸3、充分考虑每个控制按钮在4中状态下的样式，如图,点击添加文本,点击添加文本,点击添加文本,点击添加文本,1.iOS界面尺寸,i（pixelsperinch）即每英寸像素，也叫像素密度。

2.图标尺寸,Iphone6图例,3.状态栏规范,用户依赖于状态栏的重要信息，如信号，时间和电池。

文本和图标可以是白色或黑色，但背景可以被设计成任何颜色，并与导航栏合并。

pt（point）是印刷业上长使用的单位，磅的意思，是一种固定的长度单位，可以用测量设备测量的单位。

pt=px*3/41pt=1/72英寸,4.导航栏规范,导航栏是用于屏幕的快速信息。

左边部分可用于配置文件，菜单按钮，而右边的部分是一般用于动作按钮，如添加，编辑，完成。

请注意，如果您使用这些系统图标，您不需要为它们单独设计。

导航栏分类,第一种：

app标签导航标签导航位于页面底部，通常包含5个标签是比较合适的数量。

这种导航是非常常见的，如果你的应用需要用户频繁的在不同分页切换，可以采用这种导航。

它的缺点是会占用一定高度的空间。

如微信最新版的APP界面设计图。

第二种：

APP舵式导航目前流行一种标签导航的变体，个人把它称为“舵式导航”，因为它的样式很像轮船上用来指挥的船舵，两侧是其他操作按钮。

当页面有处于同一层级的几大部分内容，同时又需要一个非常重要且频繁操作的入口，就可以采用这种APP导航模式。

如下图葡萄社APP。

第三种：

APP抽屉式导航模式抽屉导航是讲菜单隐藏在当前页面后，点击入口即可像拉抽屉一样拉出菜单，这种导航的优点是节省页面展示空间，让用户将更多的注意力聚焦到当前页面。

比较适合于不那么需要频繁切换内容的应用，例如对设置、关于等内容的隐藏。

这种导航设计需要注意的是一定要提供菜单画出的过渡动画。

自从path应用以来，这种抽屉式导航菜单非常受到大家的喜爱。

第四种：

APP宫格导航（比如九宫格）这种宫格导航是将主要入口全部聚合在页面，让用户做出选择。

这样的组织方式无法让用户在第一时间看到内容，选择压力较大，采用这种导航的应用已经越来越少，往往用在二级页作为内容列表的一种图形化形式呈现，或是作为一系列工具入口的聚合。

第五种：

APP混合组合导航当用户需要聚焦内容，同时又需要一些快捷入口能够连接到某些页面时，就可以采用组合导航。

组合导航上方用宫格的形式展现快捷入口，与标签导航不同的是，这些宫格入口之间不需要是平级的关系，也不必包含整个层级的内容，你可以将它理解为一种图形化的文字链。

这种导航比较灵活，能适应架构的快速调整。

第六种：

列表式APP导航列表式APP导航是我们在APP设计种必不可少的一个信息承载模式。

当然作为一个APP的导航也是非常方便的。

不过目前来看，列表导航通常用于二级页，由于它与宫格导航一样，不会默认展示任何实质内容，所以通常app不会在首页使用它。

这种导航结构清晰，易于理解，冷静高效，能够帮助用户快速的定位去到对应的页面。

列表项目可以通过间距、标题等进行分组。

第七种：

tab导航用于二级页，本质和标签导航相同，当应用层级较多的情况下，可以采用tab导航，典型场景是用于改变的当前的视图，或对当前页面内容进行分类查看。

第八种：

大图轮播导航或是大图上面的导航设计当你的应用信息足够扁平，可以尝试轮播导航，如果应用得当，能够给人耳目一新的体验。

这种导航能够最大程度的保证应用的页面简洁性，操作也是最方便的。

但是缺点是不能够快速的定位对应的分页内容。

5.搜索栏,6.工具栏,Stepper控件,7.提示框,提示对话框是用于输送关键信息和提示快速操作。

提示应保持最少文字，退出一定是明显。

8.分段控制框,9.滑块,10.开关,11.布局标准控件,ios1334x750pxIphone6/6s,点击添加文本,点击添加文本,点击添加文本,点击添加文本,12.图标网格,Apple使用黄金分割在它们的一些图标上。

这让图标保持良好的比例，同时确保了美感。

虽然这是一个很好的规范，但它不是严格要求。

甚至Apple在很多图标上也省略了它。

点击添加文本,点击添加文本,点击添加文本,点击添加文本,13.标准色,点击添加文本,点击添加文本,点击添加文本,点击添加文本,14.字体大小、规格,一般的规范是按钮用44pt、小文字用12pt、正文文本用17pt和标题用20pt+。

IOS9中文字体：

苹方/PingFangSCIOS8中文字体：

常州华文的黑体-简，在macosx系统中选择黑体-简IOS英文、数字：

Helvetial,点击添加文本,点击添加文本,点击添加文本,点击添加文本,15.间距和对齐方式,一般的规范最低要求8pt空白或边距。

这将有足够留白空间，使得布局更容易扫描和文本更具可读性。

而且在此基础上，UI元素应对齐，文本应该有相同的基线位置。

点击添加文本,点击添加文本,点击添加文本,点击添加文本,Android系统界面规范,点击添加文本,点击添加文本,点击添加文本,点击添加文本,1.Android界面尺寸,点击添加文本,点击添加文本,点击添加文本,点击添加文本,2.界面尺寸（1280x720px）,状态栏高度：

50px导航栏高度：

96px标签栏高度：

96pxAndroid最近出的手机都几乎去掉了实体键，把功能键移到了屏幕中，当然高度也是和标签栏一样的：

96px内容区域高度为：

1038px（1280-50-96-96=1038）,3.常用尺寸,一般把48dp作为可触碰UI原件的标准，48dp=72px=9mm，这是一个用户手指能够准确舒适触碰的最小尺寸。

Android界面默认菜单栏的高度是：

72px；

Android界面每个元素之间最小的间距是：

12px；

Android界面默认btn的高度是：

60pxpx=ppi/160*dp,4.常用屏幕尺寸,240x320ldpi（低等屏幕）320x480mdpi（中等屏幕）480x800hdpi（高清屏幕）720x1280xhdpi（超高清屏幕）相