PhotoshopCCUI设计案例教程（全彩慕课版）教学教案第4章.docx

《PhotoshopCCUI设计案例教程（全彩慕课版）教学教案第4章.docx》由会员分享，可在线阅读，更多相关《PhotoshopCCUI设计案例教程（全彩慕课版）教学教案第4章.docx（98页珍藏版）》请在优知文库上搜索。

1、教案编号：4课题：第4章网页界面设计课时：16课时授课类型：讲授+实训教学目标： 了解网页界面设计的基础知识 掌握网页界面设计的规范 认识网页常用界面类型教学重点：页界面设计的规范、网页常用界面的绘制方法教学难点：网页常用界面的绘制方法本章技能点：家居类网站-首页的绘制方法、家居类网站-产品列表页的绘制方法、家居类网站-产品详情页的绘制方法本章教学技巧：1 .知识讲解2 .案例实训教学过程：（一）课前准备1 .授课前准备准备好教学用具和教学设备2 .板书课题：第4章网页界面设计项目目标： 了解网页界面设计的基础知识 掌握网页界面设计的规范 认识网页常用界面类型3 .课程引入通过“EasyLif

2、e家居电商网站”案例效果展示引入网页界面设计的概念首页产品列表页OHLeOSO产品详情页(二)课程内容4.1 网页界面设计基础知识网页界面设计的基础知识包括了网页界面设计的概念、网页界面设计的流程以及网页界面设计的原则。4.1.1 网页界面设计的概念网页界面设计(WebUIdesign,WUI),主要是根据企业希望向用户传递的信息进行网站功能策划，然后进行页面设计美化的工作。网页界面设计涵盖了制作和维护网站的许多不同的技能和学科，包含了信息架构设计、网页图形设计、用户界面设计、用户体验设计，以及品牌标识设计和Banner设计等，如图所示。意大利设计师Giorgio Sannino创作的网页4.

3、1.2 网页界面设计的流程网页界面的设计流程可以按照网站策划、交互设计、交互自查、界面设计、界面测试、设计验证的步骤来进行，如图所示。网页设计流程设计验证1 .网站策划网页界面的设计是根据品牌的调性、网站的定位而进行的，不同主题的网页，设计风格也会有区别，如图所示。因此我们要先分析需求及功能，了解用户特征,再进行相关竞品的调研，明确设计方向。不同风格网页展示2 .交互设计交互设计是对整个网站设计进行初步构思和确定的环节。一般需要进行架构设计、流程图设计、低保真原型设计、线框图设计等具体H作，如图所示。为了方便后续的界面设计工作，低保真原型和线框图的设计与制作应直接在视觉设计软件Photosho

4、p或Sketch中进行。H0fwp09Vt*IrI英国视觉设计师FiIippoChiUmient。创作的网站低保真原型设计图3 .交互自查交互设计完成之后，进行交互自查是整个网页设计流程非常重要的一个阶段。可以在进行界面设计之前检查出是否有遗漏缺失的细节问题，具体可以参考APP界面设计中的交互自查。4 .界面设计线框图审查通过，就可以进入界面的视觉设计阶段了，这个阶段的设计图就是产品最终呈现给用户的界面。界面设计要求设计规范，图片、文字内容真实，并运用AXUre、PrinCiPIe等软件或直接运用代码语言制作成可交互的高保真原型，以便后续的界面测试，如图所示。5.界面测试荷兰设计师Dennis

5、SnelIenberg创作的网站界面界面测试阶段是让具有代表性的用户进行典型操作，设计人员和开发人员在此阶段共同观察、记录。在测试中可以对设计的细节进行相关的调整，如图所示。设计验证是最后一个阶段，是为网站进行优化的重要支撑。在网站正式上线后,通过用户的数据反馈进行记录，验证前期的设计，并继续优化，如图所示。数据分析产品GrowingIO针对网页进行的用户数据分析，设计师可根据相关数据进行前期的验证及产品优化4.1.3网页设计的原则网页设计的原则可以分为直截了当、简化交互、足不出户、提供邀请、巧用过渡、即时反应六大原则。1 .直截了当直截了当即“所见即所得的直接操作原则。例如，让用户不要为了编

6、辑内容而打开另一个页面,直接在页面内实现编辑，如图所示。IIIMI-mUMNIm MNMm-HII-llll 1111:1111:1111直截了当的操作2 .简化交互充分理解用户的意图，令用户操作简便，不为用户造成麻烦。通过使用页面内容中的操作工具，令操作和内容更好的融合，从而简化交互，如图所示。51Iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii36IlllllHillllMlllinnillllllHlllllllllllllHlIllllllllllllllllllllllllllNllllllllllinil

7、llllllIIIIII状态2HHl川川W川HIH川川Il川川IHiHw川川IHH川川IIiiiimiiiimiiiiimiiiiiiiniiiiiiiiiiiiiiiiIlllllllllllllHllllllllllllllllllllinillllllllllllllIlllliuillllMllllMllllllNllllllllllIIIIllIlllllllllllliaillllllllllllllllllllliailllllllllllll将交互操作和信息内容进行了更好的融合。在状态1中信息内容左侧设计了一个可单击的控件，当鼠标悬停时，变成了状态2,此时鼠标“指针”变为“手型

8、”，底色也发生了变化，提醒用户进行单击。当用户单击后，变成了状态3,此时和未点击前的状态有了明显的不同3 .足不出户任何页面频繁刷新和跳转都会引起盲视，打断用户心流（英语：Flow,是一种将个人精神力完全投注在某种活动上的感觉工适当地运用覆盖层、嵌入层，虚寸以页面以及流程处理等方法，如图所示。IINimiiiminiuniNlllinillIHIIIIHhumniii1111三BillIlllIHlMNlllIlllHUM图MiiiibiiiiiiiiiiiiiiuiiiiiiiiiiminiMQIiiiiniiiiiaiiiiHiiiiiininiiiiiuiihmMMIIIMMMIMNII

9、nilllIIIIIHIH列表嵌入层：通过点击左侧的展开控件，用于查看某条列表项的详情信息，以此保证用户不必跳转页面，打断心流4 .提供邀请邀请是用于引导用户进入下一个交互层次的暗示和提醒。例如拖放行内编辑上下文工具等一大堆交互需要处理时，都面临容易被用户忽视的问题。所以向用户提供预期功能邀请、引导操作邀请以及白板式邀请等邀请是顺利完成人机交互的关键，如图所示。3）、,二制，湛动Ifl白板式邀请：在没有活动时，通过醒目的按钮邀请用户创建活动5 .巧用过渡在界面中，适当的加入一些翻转、传送带以及滑入滑出等过渡效果，如图所示，能让界面生动有趣，同时也能向用户揭示界面元素间的关系。滑入滑出示例6 .

10、即时反应即时反应是用户进行了操作或者内部数据发生了变化，系统立即给出对应的反馈，如自动完成、实时建议、实时搜索等工具经过适当组合，如图所示，就能为用户带来高度灵敏的界面。ElIiiiiiiiiniiiiiiiiinihiIiininiiiii缘巨人Iiiiiiiiiiiiiiiiiniiiniiiiiiiihi绿巨人IlllllllllllllllimiHllllMllIIIIIHI实时搜索：随着用户输入，实时显示搜索结果7 .2网页界面设计的规范网页界面设计的基础规范可以通过设计尺寸及单位、界面结构、布局、字体及图标5个方面进行详尽的剖析。4.2.1网页设计尺寸及单位1 .相关单位(1)英寸

11、英寸(inch,in)是英式的长度单位，一般1英寸:2.54厘米。许多显示设备经常用英寸来表示大小。目前主流的台式机显示器尺寸一般为21.5、24、27、32英寸，目前主流的笔记本电脑尺寸一般为13.3、14、15.6英寸，如图所示。27英寸的iMac（左）15.6英寸的MaCBOOkPro（右）(2)像素像素(pixel,px)是组成屏幕画面最小的点。把屏幕中的图像无限放大,会发现图像是由一个个小点组成的，这些小点就是像素。使用PholoShoP软件设计界面的网页设计师使用的单位都是PX,如图所示。文修(关闭)在Photoshop中设置网页界面的单位(3)分辨率分辨率(resolution)

12、即屏幕中像素的数量，它等于画面水平方向的像素值X画面垂直方向的像素值。屏幕尺寸一样的情况下,分辨率越高，显示效果就越精细和细腻，如14英寸屏幕的分辨率是1366px768px,也有的是1920px1080px,如图4-16所示。1920PXXlO80px的显示效果会比1366px768px的好。1366px768px(左)1920px1080px(右)2 .设计尺寸(1)页面宽度网页中常见的尺寸及使用分布比例如下所示。在进行界面设计时，结合市场占有率以及为了能够适应宽度至少为1920px的屏幕，都是以1920px1080px为基准进行设计的。使用Photoshop推荐创建宽度为1920px尺寸

13、的画布，高度根据网页的要求设定即可。屏幕分辨率(SCREENRESOLUTION)统计MSKA(P*)M*dA8(ox)候用分比例192010019.22%136676811.50%1538645.38%3606404.68%109004.67%14409004.52%10247683.71%13607683.19%128010243.04%12807202.82%只要设计出1920px宽度PC端的设计稿,我们就可以通过前端实现响应式设计，适配移动设备，满足用户浏览需求了。遇三口电商类网站等t徽复杂的功能性网站，需要单独设计移动端网页。此时宽度以iPhone66s78为基准,设为750px,方

14、便所有移动设备的适配。(2)安全宽度安全宽度即内容安全区域，是一个承载页面元素的固定宽度值，目的是确保网页在不同计算机的分辨率下都可以正常显示页面中的元素。在宽度为1920px的设计尺寸中，常用安全宽度如下所示。宽度为1920px的设计中的安全宽度常用平台海宝天猫京东Bootstrap3.xBootstrap4.x安全宽度950px990px990px1170px1200px其中BootStraP是前端的开发框架，因此除淘宝、天猫和京东等平台具有固定的安全宽度以外，其他网站在1920px的网页尺寸上设置的安全宽度通常采用Bootstrap4.x的安全宽度1200px(3)首屏高度当用户打开电脑或移动设备的浏览器时，在不滚动屏幕的情况下，第一眼看到的画面就是首屏高度。通常首屏以上的页面关注度为80.3%,首屏以下的页面关注度仅有19.7%,因此首屏对网站设计有着极大的重要性。首屏高度需要去掉浏览器菜单栏以及状态栏的高度，如下所示。常用浏览器的状态栏、菜单栏高度34K三菜蛆栏市UHfr8t（S内）。Chromeatea22gc(海规限)60xISpx8%.“而M