项目十二　手机APP整体界面UI设计电子课件 网页图片与移动界面（WebApp)的UI设计.ppt

《项目十二　手机APP整体界面UI设计电子课件 网页图片与移动界面（WebApp)的UI设计.ppt》由会员分享，可在线阅读，更多相关《项目十二　手机APP整体界面UI设计电子课件 网页图片与移动界面（WebApp)的UI设计.ppt（16页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、项目十二手机APP整体界面UI设计电子课件网页图片与移动界面（WebApp)的UI设计网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计项目十二手机目十二手机APP整体界面整体界面UI设计主讲：XXX时间：2020.X网网页图片与移片与移动界面界面(Web/App)的的UI设计网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计u掌握掌握UI整体界面布局整体界面布局规划方法；划方法；u熟悉熟悉创意思路剖析方法；意思路剖析方法；u掌握配色方案的的掌握配色方案的的设计流程；流程；u学会定学会定义组件件风格，灵活运用格

2、，灵活运用软件知件知识和技和技能能进行制作。行制作。教学目教学目标 网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计12.1.1任任务引入引入前面章节已经学习了UI设计的各个部件制作方法，最终目的是要能够对作手机APP整体界面如图所示UI的设计和制作。12.1 网站网站APP设计网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计12.1.2知知识引入引入1.1.界面布局界面布局规划划2.2.创意思路剖析意思路剖析从界面布局，我们确定该应用程序的界面主要以矩形为基础元素，在创作中通过矩形对界面进行分割和布局。在

3、本案例中最大的亮点就是“食客推荐界面的设计榜”设计，使用了数据视图化的方式来进行直观表现，通过图表、线条和文字的自由表现来传递界面中的信息，给人眼前一亮的感觉。12.1 网站网站APP设计网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计3.确定配色方案确定配色方案在色彩研究过程中，发现橙色会让人联想到酸酸甜甜的感觉，有助于刺激味觉，引发人们的食欲，表现出积极滑块的情绪。再对橙色进行进一步了解，橙色是较为鲜艳夺目的，常给人带来亲切和温暖的感觉，也是秋季的色彩，意味着丰收。12.1 网站网站APP设计网网页图页图片与移片与移动动界面界面(Web/App)

4、(Web/App)的的UIUI设计设计4.定定义组件件风格格本任务在设计的过程中，使用了扁平化的设计理念，及适合在Andriod系统中使用，也适合在iOS系统中使用。在文字和图标的设计上，也都使用了较为圆润的图形外观，显得温和而自然，通过暖色系橙色的搭配，让界面元素显得欢快、愉悦，容易被用户接受。12.1.3 任任务实现-美食网站美食网站APP设计1.任任务分析分析本任务的制作主要用形状工具对手机界面进行布局，利用所需素材完成网站App的设计，并且通过图层蒙版来对美食图像的显示进行控制。12.1 网站网站APP设计网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UI

5、UI设计设计2.任任务操作操作(1)(1)进入界面制作入界面制作(2)主主页界面界面(3)美食分美食分类12.1 网站网站APP设计网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计12.2.1任任务引入引入前面章节已经学习了UI设计的各个部件制作方法，最终目的是要能够对作手机APP整体界面（如图）的UI的设计和制作。现在进一步制作完整的APP设计。12.2网站网站APP制作制作-流量流量银行行APP设计网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计12.2.2知知识引入引入1.界面布局界面布局规划划银行A

6、PP基本上就是指银行的手机客户端，大部分称之为手机银行，也有极个别其他的银行应用程序。本案例中是以手机使用的流量作为销售商品设计的流量银行APP应用程序，它的主要功能与以货币为主的银行APP相似，会记录一些支出、收入等账单信息，帮助用户掌握流量的使用、销售等数据，根据界面中的功能，我们先来对界面的布局进行规划。12.2网站网站APP制作制作-流量流量银行行APP设计导航栏自由安排界面内容图标栏网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计2.创意思路剖析意思路剖析根据流量APP应用程序的内容的限制，在设计本案例的过程中，要考虑一些特殊的信息的表现。

7、12.2网站网站APP制作制作-流量流量银行行APP设计应用程序中包含了多种功能，为了让这些功能清晰地在一个界面中进行展示，需要考虑主页的设计参考手机系统界面的设计方式，将功能以图标的形式表现使用九宫格的方式将功能图标排列在一个界面中网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计3.确定配色方案确定配色方案流量银行是以移动数据流量为销售内容的，因此为了突显出该销售渠道的公平、公正等特点，在进行创作和设计之前，我们观察到很多银行卡的颜色都是以绿色为主的。绿色是自然界中最常见的颜色，象征和平、青春与繁荣，代表着生机与希望，与该应用程序的思想与理念相互一

8、致，因此在配色方案的确定上使用了明度适中、纯度较高的草绿色来作为界面的主色调。12.2网站网站APP制作制作-流量流量银行行APP设计网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计4.定定义组件件风格格以扁平化的设计理念为主，利用线条感极强的风格来对界面中的图标、标签栏、单选按钮等进行创作，制作出大气、简约、直观的界面效果，接下来就对界面中的控件进行分析。12.2网站网站APP制作制作-流量流量银行行APP设计网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计12.2.3 任任务实现1.任任务分析分析本任务的制作主要使用了形状工具、图层样式等工具对界面进行布局，通过文字工具实现界面内容的设计与界面完善。2.任任务操作操作（1）应用程序界面12.2网站网站APP制作制作-流量流量银行行APP设计网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计要求：要求：结合所学知识，设计一款企业数字金融平台APP，风格格调如下图所示。课后练习课后练习-数字金融平台APP的制作网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计感谢各位主讲：XXX