搜索
第1章移动UI设计快速入门讲课人：•了解UI设计的基本概念、分类、常用工具及设计原则•了解移动设备的三大操作系统•掌握移动UI设计的配色技巧，以及文字和图片的使用方法•了解移动UI设计的学习方法学习目的目录/CONTENTS概述操作系统色彩搭配文字运用图片运用UI设计概述011.1UI设计概述什么是UI设计UI，即UserInterface的简称泛指系统和用户之间交互的媒介。实现信息内部形式与用户接受形式转换的关键。用户界面（UserInterface）用户界面设计师是负责界面外观的关键所在。03交互设计（InteractionDesign）研究产品交流过程中用户的心理模式和行为模式，设计出合理的交互方式。02用户研究（UserStudy）•研究如何提高产品的可用性•发掘用户的潜在需求，为技术创新提供新思路。011.1.1什么是UI设计1.1UI设计概述1.1.2UI设计的分类◔移动UI设计：针对移动设备（手机、平板电脑、智能手表等）的界面设计。01移动UI设计02PC端UI设计03游戏UI设计04其它UI设计1.1UI设计概述◔PC端UI设计：是针对电脑的界面设计。相对于移动UI设计，PC端屏幕尺寸大，设计规范较少，因此界面的视觉效果更为突出。可分为两大类：一是网页设计；二是应用软件的界面设计。1.1UI设计概述◔游戏UI设计：是指游戏界面设计。按平台分类，常见的游戏类型包括手游、端游和掌机游戏等。入门要求较高，要求设计师有较高的美术基础和审美能力。◔其他UI设计：载体通常是一些小众或目前正处于发展阶段的智能设备，如车载设备、VR（虚拟现实技术）设备、AR（增强现实技术）设备等1.1UI设计概述Photoshop主要用于平面设计、网页设计、绘画、数码照片处理等方面。Illustrator广泛应用于印刷出版、专业插画、多媒体图像处理和互联网页面制作等。AxureRP主要负责UI设计过程中，应用软件或Web网站的线框图、流程图、原型及规格说明文档等的设计与制作。AfterEffects常用于视频特技的设计和制作。1.1.3UI设计常用工具1.1UI设计概述1.1.4移动UI设计原则视觉美观是移动UI设计最基本的要求。一致性是每个优秀APP都具备的特点。一个APP中往往存在多个界面，大到外观风格，小到组件、动效和交互行为，都应保持一致。0102视觉美观一致性1.1UI设计概述1.1.4移动UI设计原则1）表现形式要符合主题需要设计界面时，只是追求花哨的表现形式，容易过于强调创意而忽略主要内容；只追求功能和内容，容易采用平淡无奇的表现形式，都会使界面苍白无力。只有二者有机结合，让表现形式为内容服务，才能突出主题。2）确保元素必要性设计界面时，要确保每个元素都有存在的意义，不要单纯为展示设计理念和新技术添加一些毫无意义的元素，这会使用户感到莫名其妙，弱化主题效果。03突出主题1.1UI设计概述1.1.4移动UI设计原则1）符合用户操作习惯无论是单手操作还是双手操作，用户的操作习惯都是有章可循的，掌握用户的操作习惯，并将其用于界面设计中，能给用户更好的操作体验。◔拇指热区：拇指热区是指用户在单手操作时，拇指的触摸范围，该范围分为易操作区、伸展区和不易操作区。04为用户考虑1.1UI设计概述1.1.4移动UI设计原则◔内容在上，操作在下：这一原则让使用者在操作过程中手指始终处于界面下方，不会出现手指遮挡内容的情况，如左下图所示。设计师应根据按钮功能对按钮位置进行合理安排，避免用户因不小心碰触而增加操作步骤，如右下图所示。04为用户考虑1.1UI设计概述1.1.4移动UI设计原则2）简化操作步骤用户使用APP是为了解决问题，设计师应把握这点，尽量减少无用的操作步骤，通过简洁的操作流程提升用户体验。例如，想在微信中更换头像，只需点击头像，在照片库中选择图像即可。3）容错性反馈优秀的APP应确保用户的任何操作都具备可逆选项或危险提示。当用户做出删除、调整、不恰当或错误操作时，应当有危险提示介入。04为用户考虑1.1UI设计概述1.1.4移动UI设计原则1）优化图片在不影响功能和美观的前提下，能用代码实现的效果就尽量不用图片。在保证质量的前提下尽量压缩图片，以确保用户浏览顺畅，缩短加载时间。2）提供进度条或等待动画合理利用功能较多的APP启动时的加载时间，加入进度条和当前操作状态提示，如右图所示。05快速加载移动设备操作系统021.2移动设备的三大操作系统目前市场上的手机操作系统主要有iOS（苹果）、Android（安卓）、WindowsPhone、BlackBerry（黑莓）、Symbian（塞班）和Bada（三星），其中iOS、Android和WindowsPhone是最为热门的操作系统。1.2.1iOS系统iOS系统是由苹果公司开发并应用于iPhone、iPodtouch、iPad等手持设备的操作系统。其界面设计方面，从早期的拟物风格，到iOS7之后秉承的扁平风格，一直都在引领界面设计的流行趋势。1.2移动设备的三大操作系统1.2.2Android系统1.2.3Windowsphone系统Windowsphone系统（简称WP）是微软公司开发的一款移动操作系统。WP系统的桌面图标更加突出信息的展示，桌面上的大方块图标是它的招牌设计（活动瓷片）。Android是基于开放源代码的操作系统，它的平台提供给第三方一个宽泛、自由的环境，厂商、开发者和用户具有较高的操作权限，根据需要可以对界面进行调整或美化。国产手机，如华为、VIVO等都是使用的Android系统。移动UI设计色彩的搭配031.3移动UI设计色彩搭配界面由各种色彩搭配而成，色彩所占的比例决定了色彩的级别，一般界面的色彩可分为主色、辅助色和点睛色3个级别。它们的作用不同，应用位置也各有讲究。如图所示。主色：决定界面色彩基调，能直接影响视觉传达效果和用户情绪，通常占界面视觉比例的75%左右，一般用在Logo和导航栏。辅助色：可以是一种或多种色彩，用于辅助主色，使界面更加完整。通常占界面视觉比例的20%左右，一般用在各种控件、图标和插图上。点睛色：是界面中最为醒目的色彩，通常占界面视觉比例的5%左右，一般应用在提示性图标位置。1.3.1色彩级别点睛色主色辅助色1.3移动UI设计色彩搭配1.3.2色彩的象征意义◔黑色：黑色象征深沉、庄重、严肃、高雅、权威。常用于奢侈品或具有权威特点的APP中，国家地理APP就采用了黑色作为界面主色，如右图。注意：在西方，黑色也有邪恶和死亡的意味，因此涉及医疗健康的APP中要尽量避免使用黑色。◔白色：白色象征纯洁、神圣、干净、高雅、婚礼，在一些文艺范、高雅范的APP中，常使用白色作为界面的主色。注意：避免界面中白色面积过大会给人疏离、冷漠的感觉。把握好留白的面积，凸显界面的格调，如左图。1.3移动UI设计色彩搭配1.3.2色彩的象征意义◔灰色：灰色象征平凡、诚恳、考究、成熟、悲伤。灰色有多个层次：较浅的灰色具有沉静、平和之感，常用于金融业APP；金属灰、碳灰、暗灰则能给人智能和科技的感觉，常用于影音娱乐类APP，如左图所示。◔红色：红色象征喜悦、热情、自信、浪漫，也有危险、愤怒、血腥的意味，在一些需要烘托热烈气氛的APP中可以使用红色作为主色，如右图所示。PS：红色可作为点睛色出现在提示危险、警告的按钮或图标中。1.3移动UI设计色彩搭配1.3.2色彩的象征意义◔橙色：橙色是接近阳光的色彩，象征着温暖、亲切、能量、热情、财富。当APP符合这些特性时，橙色就成为设计师的首选，如左下图所示。◔黄色：同橙色相比，黄色明度更高，更为醒目。黄色象征光辉、明亮、尊贵、权力、活力，当应用于界面中时，能传递给用户温暖和乐观的感觉，如右下图所示。注意：黄色是一种比较难处理的色彩，当明度较低的时候，界面会显得很脏。1.3移动UI设计色彩搭配1.3.2色彩的象征意义◔绿色：绿色象征健康、自然、清新、希望、安全，是所有色彩中最能让人放松的色彩，它对人的精神有镇静和恢复的功效，应用于界面时会给人安全、可信赖的感觉，如右图所示。PS：绿色也有通过、确定的意思，因此APP中常用绿色作为确定按钮的色彩。1.3移动UI设计色彩搭配1.3.2色彩的象征意义◔蓝色：蓝色是UI设计中应用最多的色彩之一，它能让人联想到天空、海洋、宇宙等事物，给人静谧、深邃、理智、信赖、科技等心理感觉。常被用于社交、生活服务等多个领域，如左下图所示。◔紫色：紫色是极佳的刺激色，象征神秘、高贵、优雅、浪漫、妖艳，在设计中，红色与深紫色搭配可以给人一种既神秘又温暖的感觉，而粉色与浅紫色搭配能给人一种浪漫优雅的感觉。注意：紫色不是APP中经常用到的色彩，但运用得当，会起到十分惊艳的效果，如右下图所示。1.3移动UI设计色彩搭配1.3.3配色技巧1．同类色搭配色环上相距0°的色彩为同类色，如蓝与浅蓝，红与粉红等。同类色搭配视觉效果统一、清新、含蓄，如下图所示。1.3移动UI设计色彩搭配1.3.3配色技巧2．互补色搭配色环中相对的两种色彩互为补色，互补色对比强烈，能传达能量、活力、兴奋等意。选择适合APP风格的色彩，控制补色的明度、纯度和使用比例，可使界面产生明显的对比和视觉冲击，如下图所示。1.3移动UI设计色彩搭配1.3.3配色技巧3．邻近色搭配色环上处于90°之间的两种色彩为邻近色，如红与黄，绿与蓝等。采用邻近色搭配效果柔和、文静、和谐，但处理不当也会产生单调、模糊的感觉，此时可通过调节色彩的明度和纯度来增强视觉效果，如下图所示。1.3移动UI设计色彩搭配1.3.3配色技巧4．同色调搭配同色调搭配是指明度和纯度相同，色相不同的色彩组合方式。如支付宝界面中的图标，虽然色相不同，但组合在一起不会显得混乱，反而非常和谐，如下图所示。1.3移动UI设计色彩搭配1.3.3配色技巧5．参考竞品配色方案竞品是竞争对手的产品，在APP设计初期，产品经理和设计师会对市面上的竞品进行分析，竞品配色是分析的重要环节，设计师可在该环节初步确定界面的配色方向。如需要做一个快餐类的APP，在设计之初就可以选择竞品进行分析，参考竞品的色彩搭配，如右图所示。1.3移动UI设计色彩搭配1.3.3配色技巧在iOS人机界面指南中，苹果公司给出了8种颜色，这8种颜色是通过反复试验挑选出的，无论是单独使用还是组合使用，无论是在亮的背景还是在暗的背景中，它们的效果都非常突出，如下图所示。6．参考iOS人机界面指南配色方案1.3移动UI设计色彩搭配1.3.4配色注意事项大面积的纯色会使用户产生视觉疲劳，对于需要长时间观看的界面内容，应避免使用大面积纯色。看看手机中的微信界面，从导航栏到图标都没有使用纯色，如右图所示。界面中的灰色通常是作为背景用于凸显主体文字，应用时应尽量避免40%～70%的灰色。从右图中可明显看出，60%灰色背景上的文字识别度较低。关于纯色：关于灰色：移动UI设计中文字运用041.4移动UI设计中文字的运用1.4.1衬线体与非衬线体1．衬线体衬线体在笔画的始末位置有额外的装饰，且粗细会因笔画的不同而有所区别，强调笔画的走势及前后联系，这使得前后文有更好的连续性，更适合作为正文字体。字形方正、横细竖粗、撇如刀、捺如扫、点如瓜子等特点，它是通用的印刷体。0102宋体Garamond字体兼具美观性和易读性，被誉为“衬线之王”，适合长时间阅读。1.4移动UI设计中文字的运用1.4.1衬线体与非衬线体2．非衬线体非衬线体笔画粗细基本一致，适合用于标题类需要醒目但又不被长时间阅读的文字，其特点是方正、朴素、简洁、明确、黑白均匀。字体字形干净、清晰，易于辨认，是很多数字印刷机和操作系统中不可缺少的字体。0102黑体也称等线体，具有横竖粗细一致、方头方尾的特点，文字浑厚有力、朴素大方。Arial1.4移动UI设计中文字的运用1.4.2文字规范1．iOS系统字体iOS8系统使用的中文字体是华文黑体，英文和数字字体是HelveticaNeue；在系统升级至iOS9后，中文字体改为了苹方，英文和数字字体改为了SanFrancisco。苹方