第一章 初识移动端界面设计（课件）-高二《移动端UI设计》同步精品课件（电工版2022）

移动端UI设计 1 初识移动端界面设计 2 色彩在移动的界面中的应用 3 移动端界面设计要素 7 综合案例 6 界面的设计与制作 5 移动端界面图标与组件设计 目 录 4 移动端界面版式设计 1 初识移动端界面设计 本章将对移动端界面设计进行初步的阐述，包括移动端界面设计的概述、主流平台与设计规范，使读者较清晰地了解移动端界面的设计工作。 1 1.1 移动端界面设计的特点 随着科技的发展，移动设备已经成为用户体验移动网络的重要媒介。软件的界面作为软件与用户交互的最直接的层面，界面设计的视觉呈现效果直接决定着用户对软件的第一印象。好的界面设计能够引导用户自己完成相应的操作，起到良好的向导作用。现代移动设备的便携性与轻便性，也决定着移动界面应具备自己的特点。 移动端界面设计的核心问题之一就是让用户更好更快地进行操作，便于使用。移动端具有便携性、计算能力有限性等特点，因此，移动端界面设计应该遵循易识别、易操作、降低用户认知负担的设计原则。 初识移动端界面设计 1.1移动端界面设计的概述 随着科技的进步与发展，信息化、智能化产品已经深入到我们日常生活与工作中的各个领域。用户界面（User Interface）这一概念也成了新兴的设计方向。用户界面通常是指屏幕上显示的软件界面。移动端用户界面则是指使用者和可移动的信息或智能产品沟通时的媒介，是用户与产品交互的最直接层面。以手机为例，包括手机平台界面、各类App程序界面。 1.1.1移动端界面设计的范畴 视觉设计 交互文档 确定产品方向 …… 交互设计 界面设计 前端编程 …… 前端编程 后端编程、测试…… App开发流程简图 1.1.2移动设备界面的设计原则 设计原则是对相关设计的指导与限定。在移动端界面设计中，主要包括交互原则、视觉设计原则、格式塔心理学完形原理等。 1．交互原则，主要包括“以用户为中心原则”、尼尔森可用性原则。“以用户为中心”的设计强调“设计一个有效的界面，都必须始于分析一个人想要做什么，而不是关于屏幕应该显示什么的观念。”尼尔森提出的可用性测试原则是对界面设计提出了具体的要求，其内容包括：系统可见性原则、系统与真实世界匹配、用户控制度和自由度、一致性和标准化、防错措施、减少记忆负担、灵活高效的使用、美观而简约的设计、帮助用户识别诊断和恢复，提供人性化帮助等。 2．格式塔心理学原理，主要包括接近性原则、相似原则、连续原则、封闭原则、对称原则、主体与背景原则、共同命运原则，对界面版式布局和信息组织起指导作用。 3．视觉设计原则，主要包括色彩搭配、图形语义等方面的基本规律。 对于移动端设备界面的设计，特别是手机交互界面的设计，既要考虑到手机的移动性和便携性，同时要考虑到手机界面的局限性，用户使用手机时空间的限制，在同一界面浏览的时间不会太久，所以界面设计要体现简洁、易理解、使用户一目了然、提高操作效率的设计原则。对于用户常用的几个操作界面，要尽量简化，使用户操作更加方便快捷，要遵循易用性、易理解性、高效、人性化、情感化的设计原则，简单归纳以下七点。 1 初识移动端界面设计 ① 视觉效果很重要。 任何一个设计都需要考虑视觉效果，人们大都喜欢美的东西，愿意在安静中享受这种美的感觉，视觉化元素就要体现出美的东西，因此，许多移动端都会添加动画功能，或者一种情感交互功能，目的是给人们在视觉上体现出不同画面感和兴趣感，提高关注度。 ② 以简洁为主。 通常手机网站在用户下载和浏览时要比PC端网站的速度慢，页面内容过于复杂，会耗掉用户等待网站加载的耐心，尤其是导航栏要简短清晰，能够快速地指引用户浏览网站的深层信息（图1-7）。对于网站内容来说，简洁突出重点即可。 ③ 避免使用弹出窗口。 无论是出于方便用户联系网站客服，还是做些小广告的目的，都要尽可能避免弹出窗口的应用，添加这些窗口，必然会影响用户体验，阻碍用户浏览网站的视线，进而占用用户流量，引起用户反感而放弃对网站的继续访问。 ④ 手机网站图片要适配设置。 从手机端浏览网站毕竟不如PC端灵活自如，虽然网站设计技术可以解决网站适应屏幕的问题，网站图片也不例外，但为了使用户查看网页中的图片更加清晰，可采用整站缩放的模式（图1-8），而不是用户选择单张图片的缩放模式，当然，手机网站使用的图片应该力求精准。 1 初识移动端界面设计 ⑤ 网站操作简单化。 对于新页面的打开方式，最好采用当前页面显示的方式来设计，以免新窗口造成网站资源占用的负担，设置让用户快速找到页面出口进行跳转，避免不断进行返回操作。 ⑥ 设置交互式的互动行为。 用户在移动客户端都喜欢进行留言，分享内容。现在比较流行的微信公众号，往往一篇帖子都会有几千人的持续浏览、点赞或者分享内容，粉