移动平台UI交互设计与开发课件第4章photoshop——手机锁屏界面设计.ppt

第4章photoshop——手机锁屏界面设计 移动平台UI交互设计与开发 知识技能目标： ※ 了解手机锁屏界面设计原则 ※ 掌握使用photoshop工具设计手机锁屏界面的思路 ※ 完成可爱小黄鸭手机锁屏界面 ※ 完成魔幻方块手机锁屏界面 ※ 完成幸福有点萌手机锁屏界面 ※ 完成甜蜜恋人手机锁屏界面 目录： 4.1 手机锁屏界面的基础知识 4.2 手机锁屏界面全真项目赏析 4.3可爱小黄鸭锁屏界面设计 4.4魔幻方块锁屏界面设计 4.5幸福有点萌锁屏界面设计 4.6甜蜜恋人锁屏界面设计 4.7 知识与技能梳理 4.1 手机锁屏界面的基础知识 4.1 手机锁屏界面的基础知识 目前大多数手机锁屏界面除了可以改变锁屏界面的壁纸、解锁方式，已有的锁屏应用大多数是围绕与变换各种滑屏解锁的视觉表现形式而展开设计。而作为人机交互的第一道关口，锁屏界面的设计已不仅仅只是华丽或简单的风格配上简单的解锁。 一般来说，锁屏分为三种形态：原始状态、充电状态以及触发状态。彼此之间的关系网如图所示： 4.1.1 手机锁屏界面设计标准 设计锁屏界面时设计者的首先考虑因素都是以人为本。其主要具有如下特性：1、交互性：信息传递准确，手机锁屏界面操作手感舒适。2、艺术性：强烈的视觉效果，鲜明、生动。3、创意性：界面中展现出众的想象力，独创性，能够引起用户的心灵共鸣。4、可用性：是否能在一般性的智能手机上运行顺畅。 4.1.2 手机锁屏界面可用性原则 手机锁屏界面的可用性原则： 1、尽量避免不要让用户觉得这个界面是为了设计而设计，减少其操作的等待感。 2、每一个锁屏动画界面都应有其所在的意义，切勿为了追求华丽视觉而一味的添加一些不必要的效果。 3、要求在一般性的智能手机上运行顺畅。 4.1.3 手机锁屏界面的情感化设计 产品设计中的趣味性、愉悦度，这些都是针对用户情感化设计的领域功能，它们很重要，一个主题缺少了情感的作用，很难产生一些东西，像：快乐、愉悦、悲伤、美 花、大海···这些都是很普通的名词，但将它们富有诗意的组合在一起，就会让用户有不同的感觉。 交互设计的本质是对用户行为的一种设计，直达内心的设计能够影响用户自身的情感，从而导致用户的行为。因而界面设计之初设计者首要考虑的不仅仅是用户，而是对自身理性的考量，如图所示，传达了一种心心相印的情感元素。 4.2 手机锁屏界面全真项目赏析 4.2 手机锁屏界面全真项目赏析 Iphone手机锁屏界面最常见的一种，配合一张个性的DIY壁纸图片，简约而明了，其风格不繁琐，也不会带来操作上的等待感，较为实用，如图所示。 千机解锁是一款个性、有趣的解锁软件，同时包含通过它，可以随意更换解锁界面，摆脱以往千遍一律、索然无趣的屏幕解锁，拥有真正属于自己的解锁风格。如图分别为解纽扣、萝莉女仆、两情相悦主题的解锁界面： 4.2 手机锁屏界面全真项目赏析 4.3 可爱小黄鸭锁屏界面 4.3可爱小黄鸭锁屏界面设计 项目创设 近年来，手机的人机交互界面（UI）给手机市场提供新的卖点，被认为是新的产业动力。而视觉作为人机交互的第一步，因而无论是华丽还是简洁的风格，都力求足够吸引人眼球。 设计思路 在设计比较大型项目时，为了更好地管理和操作多而繁琐的图层，就需要读者更好并熟练地掌握利用“组”来对图层进行管理。本案例使用毛线球从左边滚动到右边篮子中实现界面的解锁功能。 4.4 魔幻方块锁屏界面 4.4魔幻方块锁屏界面设计 项目创设 随着信息技术的不断发展，手机已经成为人们手中不可或缺的电子产品，每个人的手机里也都会存储一些重要信息，而锁屏界面作为人机交互的第一道关口，对手机里面的信息起到很好的保护作用。同时富有创意的屏幕解锁会给用户带来很多别样的乐趣。 设计思路 案例主要采用图层样式、渐变工具、自定形状工具以及一些不透明度的调整来设计界面。本案例使用从左到右滑动小锁方式实现解锁功能。 4.5 幸福有点萌锁屏界面 4.5手机解锁界面制作——幸福有点萌 项目创设 随着手机行业的快速发展，手机UI界面越来越受人们的重视，对于女性用户，设计者在设计时应追求可爱、温暖、幸福的视觉效果，并由此来表现主题，使人与手机界面更加和谐。 设计思路 案例主要使用PHOTOSHOP中的图层操作、图层样式的设置、钢笔工具、文字工具和动画效果的创建来设计一款个性化锁屏界面。采用三个背景图层的转场特效以及一系列小动画效果的综合设计实现解锁功能。 4.6 甜蜜恋人锁屏界面 4.6手机解锁界面制作——甜蜜恋人 项目创设 “甜蜜恋人”手机解锁界面通过