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

PAGE《网页美工设计》教案授课专业广告艺术设计专业授课教师 周国宝铜陵职业技术学院制PAGE1第二部分技能提升篇第七章网页UI设计制作标题第二节移动端网页UI设计制作第三讲移动端网页UI设计制作（下）课时2课时教学目标教学内容与过程为了更好的让用户了解应用程序到底有哪些特色和服务，我们将进行首页和详情页的界面设计。首先来了解首页和详情页的设计类型。列表型首页是指在一个页面上展示同一个级别的分类模块。模块由标题文案和图像组成，图像可以是照片或图标。列表型的首页更方便点击操作，上下滑动也可以查看更多的内容。通过底部标签切换的方式能够到达的页面都是一级页面。当首页分类为主要的几个功能时，可以采取图标型首页。例如剪辑修图类应用程序的功能图标在首页展示完整，将点击做到最简单。在遇到操作按钮、头像和文字等信息比较复杂的情况时，可以选择卡片型的首页展示方式。卡片形式能让分类中的按钮和信息紧密联系在一起，让用户一目了然，同时还有效地加强内容的点击性。综合型首页在电商类产品模块表现比较多，包括有图标形式也有卡片形式。特别注意分割线和背景颜色的区分不能太过明显，选择比淡的分割线和背景色来区分模块即可，因为要保证页面模块的整体性。详情页面是展示内容详细信息的页面，如图分别是商品详情页的设计、旅游资讯详情页的设计、小说阅读详情页的设计。不同的应用程序结合自身的定位，设计界面的布局。旅行应用程序主要是分享沿途旅游的美景和感悟，所以，首页采取卡片型，详情页采取全景图片，设计简约美观，现在让我们打开XD软件，制作旅行应用程序首页与详情页。我们首先设计旅游APP的主页面，结合参考线，左右边距为30px，状态栏为40px，导航栏为88px，标签栏为98px。在导航栏的下方结合88px的参数大小做分段式控件的参考线，中间是30px的间距，设定好参考线后，我们将素材置入到我们的界面当中进行布局。

背景是白色，电量信息我们选择黑色。复制，放大，粘贴，调整电量的位置。在下方将更多和搜索图标置入导航栏，复制，粘贴，调整位置。在导航栏的中央输入文字，主页面，将文字调整为苹方，36号字，加粗，填充为黑色，放在导航栏中央部分。下方输入，自然，生活，感悟。将生活和感悟字体填充为灰色，调整他们的间距，调整位置。运用直线段工具绘制直线段，选择大小为4px，填充颜色为灰蓝色，完成我们的文字分段控件。

主体部分为灰色，主次区分，置入我们的风景广告图片，调整位置。将风景卡片按界面参考线进行布局。注意间距是30，调整位置。最后我们将标签栏，放在图层的最上方，完成APP首页主页面的设计。接下来我们制作拍照界面，复制我们的状态栏导航栏，粘贴到拍照界面，复制文字，文字粘贴，将文字调整为上传照片，调整位置。将我们的照相图标选中，复制，粘贴到界面上方。复制文字，粘贴文字，替换文字，拍摄照片，调整文字的大小，选择为28，颜色为灰色。结合直线段工具，绘制一条分隔线，填充为灰色，大小为4，在下方输入文字，复制文字，粘贴文字，替换文字。然后将我们的多格图片，复制，粘贴，调整位置。最后将我们的标签栏复制，置于界面上方，调整颜色。替换照相机的色彩，这样我们就完成拍照页面的设计。

最后我们来做详情页面设计。

详情页是旅行图片分享的界面设计，我们选择图片进行复制，粘贴到我们的界面面版，对其进行调整。选择白色的电量栏，粘贴到我们的状态栏当中，调整它的位置。选择矩形工具，在界面上面做一个渐变遮罩，取消描边的填充，将整体的填充，变为线性渐变，选择深灰色，将白色不透明值拉到最低。将整体的不透明值降低一点。最后置入图标和文字，选择，复制，粘贴，调整他们的位置