移动ui设计基础 教学课件

移动UI设计基础GRAPHICDESIGN01内容概括

02情景导入03学习任务CONTENTES目录情景导入Scenariointroductio01同学们，大家好，这节课，我们来学习一下移动ui设计。现在我们的生活出行基本都是依靠手机，而手机上的app功能强大，能满足我们绝大的需求，而“低头族”也是因为对手机上这些app的兴趣和依赖所形成的一种群体行为。而又是什么让我们对这些app产生兴趣和依赖呢？强大的功能是主要的原因，而如何使用这些功能则是依靠app界面的说明。app界面的美观性和实用性都影响着用户的使用率。而设计这些界面就是移动ui设计师的设计范畴。他们为软件硬件设计炫酷流畅的交互界面，让你体验人机合一的快感！情景导入01.视频：平面设计内容概括Scenariointroductio02z什么是ui设计01.大家知道什么是ui设计吗？UI，即UserInterface，泛指系统和用户之间交互的媒介，是实现信息内部形式与用户接受形式转换的关键。指对软件的人机交互、操作逻辑、界面美观的整体设计。Ui设计主要分为移动ui设计、pc端ui设计、游戏ui设计、其他ui设计。z什么是ui设计01.而移动ui设计则针对移动设备（手机、平板电脑、智能手表等）的界面设计。接下来我们就来学习一下移动ui设计。z移动ui设计原则02.我们仔细查看这些app的界面可以看到每个app都遵循着一些基本的设计原则。下面我们就通过生活中通用的“支付宝”界面来了解移动ui设计的基本原则，总体可分为以下几种：z移动ui设计原则02.1.视觉美观，是移动ui设计最基本的要求。app的美观性直接的影响用户的兴趣。2.一致性。支付宝存在多个界面，大到外观风格，小到组件、动效和交互行为，都保持一致。而一致性也是每个优秀的app都具备的特点3.突出主题。”支付宝“最主要的功能就是”支付功能“，同时拓展了很多便捷的生活小功能。而设计界面时不仅需要强调创意还要注重功能的表现，让表现形式为内容服务，才能突出主题z移动ui设计原则02.4.为用户考虑。符合用户操作习惯。我们在使用app时都有操作习惯，比如内容在上，操作在下，单手操作拇指的触摸范围等简化操作步骤。我们使用app是为了解决问题，所以在设计时要尽量减少无用的操作步骤，通过简洁的操作步骤提升用户体验。比如想要更换支付宝头像，只需要点击头像，在照片库选择图像即可。容错性反馈。优秀的app应确保用户的任何操作都具备可逆选项或危险提示。比如我们在使用支付宝的支付功能转取他人的钱财时都有一定的提示来提醒用户慎重转账，维护用户的利益。z移动ui设计原则02.5.快速加载。合理利用加载时间，加入进度条和当前操作提示，确保用户浏览顺畅，缩短加载时间z移动设备的三大操作系统03.目前市场上的手机操作系统主要有iOS（苹果）、andiron（安卓）、Windowsphone、blackberry(黑莓）、Symbian（塞班）和bada（三星），其中iOS、andiron和Windowsphone是最为热门的系统。z移动设备的三大操作系统03.iOS系统：是由苹果公司开发并应用于iPhone、iPodtouch、iPad等手持设备的操作系统。其界面设计方面，从早期的拟物风格，到iOS7之后秉承扁平风格，一直都在引领界面设计的流行趋势z移动设备的三大操作系统03.Android系统：是基于开放源代码的操作系统，它的平台提供给第三方一个宽泛、自由的环境，根据需要可以对界面进行调整和美化。国产手机，如华为、vivo等都是使用的Android系统z移动设备的三大操作系统03.Windowsphone系统，简称wp,是微软公司开发的一款移动操作系统。wp系统的桌面图标更加突出信息的展示，桌面上的大方块图标是它的招牌设计z如何学习移动ui设计04.软件产品依然属于工业产品范畴，因此同样需要考虑3w原则（who、where、why），即什么人使用（年龄层次、性别、爱好、教育程度）、用在什么地方（家庭、办公室、公共场所）、为什么使用（需求）。下面我们来欣赏一些图标，试着想象一下这些app的类型及其用户年龄。z如何学习移动ui设计04.

behance：

全球最大的综合性设计网站之一

站酷网：

是国内最大的综合型设计交流社区之一

Ui中国：是国内

最大的ui交流社区之一，具有很强的专业性

花瓣网：

提供了大量优质的图片素材设计交流网站移动ui设计师要善于发现美，积极主动地浏览国内外的优秀设计作品，提高自身审美，并且还要善于积累，养成收集灵感的习惯。我们可以多去浏览下面这些设计网站来学习和提高我们的设计水平z如何学习移动ui设计04.

阿里矢量图标：

提供了阿里旗下多款产品的图标下载服务，具有很强的学习指导意义图标宝：

拥有免费的图标搜索引擎和网页图标下载服务图标配色Kuler:

是由adobe公司建设和维护的网站，是最权威的色彩网站之一

WebGradients：

提供漂亮的渐变配色，并且还有更多格式选择学习任务Scenario