UI界面设计课件.ppt

UI界面设计目录一、UI界面设计相关知识”一、UI界面设计相关知识-1.UI界面设计的概念UI界面设计相关知识-1.UI界面设计的概念UI界面设计相关知识-1.UI界面设计的概念UI界面设计相关知识-1.UI界面设计的概念UI界面设计相关知识-1.UI界面设计的概念”UI界面设计相关知识-1.UI界面设计的概念问题一：界面设计=版式设计？所谓版式设计，就是在版面上，将有限的视觉元素进行有机的排列组合。界面设计的内容包括：图形、文字、色彩、编排，使界面起到美化效果的作用。需要研究用户需求，研究目标用户。问题二：界面设计=用户+界面？或者界面设计就是单单指界面美化设计？从字面上看，UI有用户与界面两个组成部分，但实际上还有还有用户与界面之间的交互关系。界面设计需要定位使用者、使用环境、使用方式。不仅仅是美化界面，还有需要研究用户、让界面变得更友好、更有趣、更易用、更舒适。前面讲到UI设计包括两方面——美化和交互。让大家更了解UI设计的重要性从美化的角度看：UI优化后:1更有时尚感、层次感2.从QQ图像就能知道是QQ的登入界面，更直观、形象。从交互的角度：未UI优化的界面：1.功能过于简单2.登入没有体现按钮的特点，而不会单击3.密码输入框也没有做掩密处理，被盗号的风险系数增加””UI界面设计相关知识UI界面设计相关知识-4.界面设计的工作流程UI界面设计相关知识-4.界面设计的流程线框原型、黑白原型稿产品原型界面设计”iOS系统规范iphone界面基本组成元素2.图标尺寸2021/5/24Iphone6图例2021/5/243.状态栏规范4.导航栏规范导航栏分类第二种：APP舵式导航目前流行一种标签导航的变体，个人把它称为“舵式导航”，因为它的样式很像轮船上用来指挥的船舵，两侧是其他操作按钮。当页面有处于同一层级的几大部分内容，同时又需要一个非常重要且频繁操作的入口，就可以采用这种APP导航模式。如下图葡萄社APP。第三种：APP抽屉式导航模式抽屉导航是讲菜单隐藏在当前页面后，点击入口即可像拉抽屉一样拉出菜单，这种导航的优点是节省页面展示空间，让用户将更多的注意力聚焦到当前页面。比较适合于不那么需要频繁切换内容的应用，例如对设置、关于等内容的隐藏。这种导航设计需要注意的是一定要提供菜单画出的过渡动画。自从path应用以来，这种抽屉式导航菜单非常受到大家的喜爱。第四种：APP宫格导航（比如九宫格）这种宫格导航是将主要入口全部聚合在页面，让用户做出选择。这样的组织方式无法让用户在第一时间看到内容，选择压力较大，采用这种导航的应用已经越来越少，往往用在二级页作为内容列表的一种图形化形式呈现，或是作为一系列工具入口的聚合。第五种：APP混合组合导航当用户需要聚焦内容，同时又需要一些快捷入口能够连接到某些页面时，就可以采用组合导航。组合导航上方用宫格的形式展现快捷入口，与标签导航不同的是，这些宫格入口之间不需要是平级的关系，也不必包含整个层级的内容，你可以将它理解为一种图形化的文字链。这种导航比较灵活，能适应架构的快速调整。第六种：列表式APP导航列表式APP导航是我们在APP设计种必不可少的一个信息承载模式。当然作为一个APP的导航也是非常方便的。不过目前来看，列表导航通常用于二级页，由于它与宫格导航一样，不会默认展示任何实质内容，所以通常app不会在首页使用它。这种导航结构清晰，易于理解，冷静高效，能够帮助用户快速的定位去到对应的页面。列表项目可以通过间距、标题等进行分组。第七种：tab导航用于二级页，本质和标签导航相同，当应用层级较多的情况下，可以采用tab导航，典型场景是用于改变的当前的视图，或对当前页面内容进行分类查看。第八种：大图轮播导航或是大图上面的导航设计当你的应用信息足够扁平，可以尝试轮播导航，如果应用得当，能够给人耳目一新的体验。这种导航能够最大程度的保证应用的页面简洁性，操作也是最方便的。但是缺点是不能够快速的定位对应的分页内容。5.搜索栏6.工具栏7.提示框8.分段控制框9.滑块11.布局标准控件点击添加文本点击添加文本点击添加文本点击添加文本点击添加文本点击添加文本点击添加文本4.常用屏幕尺寸点击添加文本UC浏览器界面二、UI界面设计的常用方法及原则二、UI界面设计的常用方法及原则-1.UI界面设计的原则二、UI界面设计的常用方法及原则-1.UI界面设计的原则二、UI界面设计的常用方法及原则-1.UI界面设计的原则3）、用户记忆负担最小化浏览信息比记忆更容易，在设计时一定要考虑到减轻用户的记忆负担。4）、用户界面的功能性界面最基本的性能是具有功能性与使用性，通过界面设计，让用户明白功能操作，并将产品本身的信息更加顺畅的传递给使用者，是功能界面存在的基础与价值用户界面一定要有基本的功能，设计者不能片面追求界面外观漂亮