《网页美工设计》教案-第1讲 移动端网页UI设计制作（上）教案

PAGE《网页美工设计》教案授课专业广告艺术设计专业授课教师 周国宝铜陵职业技术学院制PAGE1第二部分技能提升篇第七章网页UI设计制作标题第二节移动端网页UI设计制作第一讲移动端网页UI设计制作（上）课时2课时教学目标教学内容与过程移动端UI设计，指的是手机端用户。UI设计不仅让应用程序界面设计变得有个性，有品位，还要让应用程序的操作变得舒适，简单，自由，充分的体现了应用程序的定位和特点。苹果手机屏幕尺寸各有不同，我们通常选择常规尺寸750*1334像素大小进行设计，它是2倍率的尺寸，在进行单位换算时是1pt等于2个像素值。再此屏幕规格下，其界面的状态栏高度40像素，导航栏高度88像素，标签栏高度98像素。我们可以通过该尺寸适配其他的屏幕大小。手机界面的状态栏用于显示信号、时间、电量等信息位于整个应用程序界面的顶部。可改变底色使其与应用程序整体风格统一导航栏起着导航作用，一般会显示标题、搜索框、分段式控件等位于状态栏下方。它也可以调整底色使其与应用程序整体风格统一标签栏让用户在不同的子任务、视图和模式中切换，位于应用程序界面最底部。值得注意的是标签栏上的图标一般为3-5个，超过5个，第五个用更多来表示界面应用图标，采用圆角矩形,最大尺寸是1024X1024px，方便系统自动适配到其他各个应用场景。为了高保真，其他图标可以设计为144x144px、120x120px、80X80px、58X58px界面的功能图标尺寸在导航栏和工具栏可以使用同样的尺寸44px，建议不小于这个尺寸；在标签栏上的图标是50px或64px建议不超过96X64px。独立出现在应用界面中的按钮，如果是线框图标，描边宽度最小是2px。苹果手机系统默认字体为苹方，在设计时也可以使用黑体简等字体代替；遵循2倍率的大小，字体换算也是1pt等于2个像素。例如提示框字体，标题和重要提示选择34px大小的字体，注释字体选择26px或者28px。导航栏字体标题可以在34px或36px大小，两侧的文字可以稍小点选择32px，这样的界面视觉上有主次关系，更好识别。其他栏和搜索框的字体可以适当调整，调整时需注意字体的双数字号，保证文字识别度。界面左右边距是最小为20px，结合界面内容也可调整到30px-40px。通常的双行文字为120px或130px，单行文字可以是导航栏与标签栏高度98px或88px。文字内容多可以乘以倍数增加列高。间距最小为10px，可保证页面的一致性。不同风格的安卓Android界面，界面设计规范是基本不变的。安卓专用长度单位为DP，以原始尺寸160DPI屏幕为标注，则1DP=1PX，常用的屏幕适配尺寸为：（超高密度屏幕320dpi）是2倍图：1dp换算为2px屏幕尺寸为720x1280px，（超超高密度屏幕480dpi）是3倍图：1dp换算为3px屏幕尺寸为1080x1920px，不同风格的安卓Android界面，它的长度单位为DP，以原始尺寸160DPI屏幕为标注，则1DP=1PX，我们常用的屏幕适配尺寸为：超高密度屏幕320dpi是2倍图，1dp换算为2px屏幕尺寸为720pxx1280px，超超高密度屏幕480dpi是3倍图，1dp换算为3px屏幕尺寸为1080x1920px，在720x1280px屏幕下，状态栏高度为50px导航栏、标签栏高度为96px1080*1920px屏幕下，状态栏高度为75px导航栏、标签栏高度为144px现今Android控件高度都可以支持自定义，所以安卓系统的栏框尺寸数值也可以进行适当的调整。Android手机图标尺寸以720x1280px界面为例，小图标常见的尺寸为24px、

32px，48px等，

记住2的倍数比较好。安卓系统字体除了本身的系统字体，在设计时可以使用微软雅黑、方正兰亭等，相较于苹果手机，安卓手机支持内嵌字体更显灵活，安卓专用的字体单位为sp，适配的原则和屏幕适配原则一致，在2倍率屏幕尺寸下1sp换算为2px；3倍率1sp换算为3px；结合8dp原则栅格系统，以160DPI屏幕为标注，界面上的间距和边距最小单位是8dp，以8dp的倍数增加大小。因此720x1280px界面的间距是16px边距最小是32px，720x1280px界面的间距是24px边距最小是48px，合理掌握间距和边距尺寸，才能更好的对界面的布局进行设计。接下来，打开xd制作出不同的系统界面，XD软件没有单位，只专注元素间的关系，我们可以直接在面板上设定苹果手机的适配尺寸，宽度为750高度为1334，点击确定，这样我们制作出了苹果手机2倍率的屏幕尺寸了。右侧是可以调整画板尺寸的大小，放大我们的画板，结合参考线，找出状态栏、导航栏、标签栏。在界面的上方鼠标左击拖拽，40是我们的状态栏，88是我们的导航栏，98是我们的标签栏。画板的左侧，鼠标左击拉出边距20，右侧边距20，这样我们就完成了苹果手机的基本布局。点击画板工具，任意绘制一个画板，我们来制作安卓手机屏幕尺寸。宽度为720高度为1280，回