第11章_UI设计 (1).第11章_ui设计.pptVIP

4、网页设计基本原则网页UI设计的整体性包括内容上和形式上两方面，网页的内容主要是指logo、文字、图像和动画等，形式是指整体版式和不同内容的布局方式。整体性11.4【综合案例38】知识点讲解11.4【综合案例38】婚纱摄影网站首页钟表图标设计知识点讲解移动端页面适配案例知识点11.5【综合案例39】移动端页面适配11.5【综合案例39】知识点讲解1、移动端界面基本组成元素iOS系统元素/机型iPhone4/4s5/5s/5c/SE/6/6s/7iPhone6Plus/6sPlus/7Plus状态栏高度40像素60像素导航栏高度88像素132像素标签栏高度98像素146像素工具栏高度88像素146像素界面元素位置分布界面基本组成元素参数1、移动端界面基本组成元素11.5【综合案例39】知识点讲解状态栏用来呈现运营商、网络信号、时间、电量等信息。状态栏位于整个App界面的顶部，并始终固定在整个屏幕的上方。状态栏状态栏1、移动端界面基本组成元素11.5【综合案例39】知识点讲解导航栏通常显示当前界面的名称，通常包含常用的功能或者页面的跳转按钮等。导航栏（NavigationBar）通常位于状态栏的正下方导航栏导航栏1、移动端界面基本组成元素11.5【综合案例39】知识点讲解在iOS系统中，在分辨率750×1334像素的情况下，内容区域高度为1108像素。内容区域位于导航栏的正下方。内容区域内容区1、移动端界面基本组成元素11.5【综合案例39】知识点讲解标签栏上一般会有三到五个小图标，这些小图标通常包含两种状态，一是选中状态，二是未选中状态。让用户在不同的视图中进行快速切换。标签栏（TabBar）也被称为菜单栏。通常位于界面的底部。标签栏标签栏1、移动端界面基本组成元素11.5【综合案例39】知识点讲解工具栏（ToolBar）里提供一系列让用户对当前视图内容进行操作的工具。工具栏通常用于二级页面,位于屏幕底部，工具栏和标签栏在同一个视图中只能存在一个工具栏工具栏1、移动端界面基本组成元素11.5【综合案例39】知识点讲解Android系统1、移动端界面基本组成元素11.5【综合案例39】知识点讲解1、移动端界面基本组成元素11.5【综合案例39】知识点讲解状态栏用来呈现运营商、网络信号、时间、电量等信息。状态栏通常位于界面的顶部，具有通知的功用，当应用程序有新的通知，向下滑动即可打开查看通知或进行一些常用的设置。状态栏状态栏1、移动端界面基本组成元素11.5【综合案例39】知识点讲解标题栏通常位于状态栏下方标题栏标题栏1、移动端界面基本组成元素11.5【综合案例39】知识点讲解标签栏上一般会有三到五个小图标，这些小图标通常包含两种状态，一是选中状态，二是未选中状态。让用户在不同的视图中进行快速切换。标签栏（TabBar）也被称为菜单栏。通常位于标题栏下方。标签栏标签栏1、移动端界面基本组成元素11.5【综合案例39】知识点讲解标签栏上一般会有三到五个小图标，这些小图标通常包含两种状态，一是选中状态，二是未选中状态。让用户在不同的视图中进行快速切换。在Android系统中，底部导航栏通常位于状态栏下方，和iOS系统中的标签栏类似底部导航栏底部导航栏1、移动端界面基本组成元素11.5【综合案例39】知识点讲解Ios文本规范在iOS8系统中，英文和数字字体为“HelveticaNeue”，它是比较典型的扁平风格字体，中文字体为HeitiSC（中文名称叫黑体-简）。而在iOS9系统中，苹果为新版本设计了全新的英文字体“SanFrancisco”和中文字体“苹方”。字体对比效果2、移动端UI文本规范11.5【综合案例39】知识点讲解Android文本规范在Android4.0系统中，中文字体为“DroidSansFallback”，英文字体为“Roboto”。在Android5.0系统中，中文字体改为“思源”。通常在用Photoshop软件设计界面时会用“方正兰亭黑”字体代替“思源”字体完成效果图的设计。字体对比效果2、移动端UI文本规范11.5【综合案例39】知识点讲解在实际界面设计中，文本通常使用偶数字号，例如22px、24px、28px、32px、36px等。Android系统的界面标题字号一般为18sp，文章或图片的标题一般为16sp，文本字体一般为14sp，注释的最小字体一般为12sp。2、移动端UI文本规范11.5【综合案例39】知识点讲解11.5【综合案例39】移动端页面适配***