作者：肖睿 张敏 谢思
出版社：人民邮电出版社有限公司
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
边练边学：网页UI商业项目设计实战试读：
前言
Web端界面设计作为视觉设计领域中的重要组成部分，在视觉设计类课程教学中具有十分重要的地位，也是相关从业人员必须掌握的一门技能。
本书顺应互联网发展趋势，以当前视觉设计潮流为导向，选取了电子数码、教育、招聘、游戏、电商等领域的商业案例，详细讲解了不同类型Web端UI商业项目的设计思路、设计理论以及实际案例制作过程。
读者学习完本书后，不仅能掌握不同领域的网页UI设计规范以及设计方法，并且能按照企业的项目需求，熟练使用Photoshop等相关设计软件制作出符合市场需求、美观、大方的网页界面。
本书设计思路
全书共8章，各章内容简介如下。
第1章：讲解了网页的常见分类、构成元素以及网页开发的基本流程；全面讲解了网页设计的基本流程、网页布局的基本原则、网页配色的基本方法以及网页图片的应用原则；重点讲解了网页切片的编辑以及切片的常用技巧。
第2章：讲解了营销类企业网站在建站目标、页面内容、网站功能等方面与普通企业网站的区别；讲解了营销类企业网站的设计要点；以联想官方网站首页为例，分析了营销类企业网站首页UI设计的思路以及操作过程。
第3章：讲解了着陆页的概念、页面特征、页面结构、常见分类等理论知识；讲解了着陆页的展现形式、布局类型以及配色原理；以完胜教育着陆页为例，分析了企业网站着陆页UI设计的思路以及制作过程。
第4章：讲解了活动专题页与节日专题页在设计中需要注意的事项，专题页的常见结构以及常见风格；以搜猎网为例，讲解了招聘类网站专题页UI设计的思路以及制作过程。
第5章：讲解了企业网站改版的原因、原则以及流程等理论知识；以秦门争霸为例，讲解了游戏类官方网站改版的思路以及案例制作过程。
第6章：讲解了网页设计中常见的三类后台产品；以北大青鸟OA系统为例，全面讲解了企业网站信息管理后台UI设计的思路以及案例制作过程。
第7章：讲解了电商平台的常见功能以及基本结构等知识；以天猫商城为例，全面讲解了电商平台UI设计中的需求分析以及实现过程。
第8章：讲解了电商类店铺中常见的4种页面：首页、详情页、关联页以及列表页；以三星天猫旗舰店为例，展示了店铺装修的分析思路以及实际操作过程。
各章结构
学习目标：即读者应掌握的知识和技能，可以作为检验学习效果的标准。
本章简介：介绍本章内容的背景和本章重点内容。
技术内容：以案例为驱动剖析技能点，带领读者完成相应演示案例的制作。
本章作业：让读者灵活应用本章的学习内容，设计出同类型网页界面。
本书提供了便捷的学习体验，读者可以直接访问课工场官网教材专区下载书中所需的案例素材，也可扫描二维码观看书中配套的视频。
本书由课工场“互联网UI设计师”教研团队组织编写，参加编写的还有张敏、谢思、张玉珍、鹿建银、杨怡等院校老师。尽管编者在写作过程中力求准确、完善，但书中不妥或疏漏之处仍在所难免，殷切希望广大读者批评指正！关于引用作品的版权声明
为了方便读者学习，促进知识传播，使读者能够接触到更多优秀的作品，本书选用了一些知名网站和公司企业的相关内容作为学习案例。这些内容包括：企业Logo、宣传图片、手机App设计、网站设计等。为了尊重这些内容所有者的权利，特此声明，凡本书中涉及的版权、著作权、商标权等权益，均属于原作品版权人、著作权人、商标权人。
为了维护原作品相关权益人的权益，现对本书选用的主要作品和出处给予说明（排名不分先后）。
以上列表中并未全部列出本书所选用的作品。在此，我们衷心感谢所有原作品的相关版权权益人及所属公司对职业教育的大力支持！智慧教材使用方法扫一扫查看视频介绍
由课工场“大数据、云计算、全栈开发、互联网UI设计、互联网营销”等教研团队编写的系列教材，配合课工场App及在线平台的技术内容更新快、教学内容丰富、教学服务反馈及时等特点，结合二维码、在线社区、教材平台等多种信息化资源获取方式，形成独特的“互联网+”形态——智慧教材。
智慧教材为读者提供专业的学习路径规划和引导，读者还可体验在线视频学习指导，按如下步骤操作可以获取案例代码、作业素材及答案、项目源码、技术文档等教材配套资源。
1. 下载并安装课工场App。（1）方式一：访问网址www.ekgc.cn/app，根据手机系统选择对应课工场App安装，如图1所示。图1 课工场App（2）方式二：在手机应用商店中搜索“课工场”，下载并安装对应App，如图2和图3所示。图2 iPhone版手机应用下载图3 Android版手机应用下载
2. 登录课工场App，注册个人账号，使用课工场App扫描书中二维码，获取教材配套资源，依照图4～图6所示的步骤操作即可。图4 定位教材二维码图5 使用课工场App“扫一扫”扫描二维码 图6 使用课工场App免费观看教材配套视频
3. 获取专属的定制化扩展资源。（1）普通读者请访问www.ekgc.cn/bbs的“教材专区”版块，获取教材所需开发工具、教材中示例素材及代码、上机练习素材及源码、作业素材及参考答案、项目素材及参考答案等资源（注：图7所示网站会根据需求有所改版，仅供参考）。图7 从社区获取教材资源第1章 网页UI设计概述学习目标
► 了解网页的常见分类、网页UI（User Interface，用户界面）的构成元素，以及网站开发的基本流程等理论知识。
► 熟悉网页UI设计的基本流程，掌握网页布局、配色以及图像编辑的方法。
► 理解网页切片的对象、切片的方式以及切片的命名等理论知识。
► 掌握单个切片、连续切片以及透明背景切片的输出方法。
► 掌握网页切片的移动、复制、划分以及组合方式。本章简介
据《中国互联网发展报告2018》显示：截至2017年年底，我国网页数量达2664亿个，年增长率为10.3%。其中，静态网页数量为1969亿个，动态网页数量为695亿个。在当今这个信息爆炸的时代，网页数量呈几何级数增长的同时，网民对于网页界面的要求也在不断提高。
在满足网页基本功能需求的前提下，网页界面更需要在视觉表现方面给予网民舒适的阅读体验和友好的交互体验。为此，在网站开发建设与维护的过程中，需要优秀的网页UI设计师进行精心的视觉设计。本章将针对网页UI设计的相关理论进行详细的讲解，包括网页的类型和特点、网页布局的原则、网页的切片方法等内容。1.1 网页概述1.1.1 网页的常见分类参考视频：网页UI商业项目管理规范
网页按照页面布局方式、实现技术以及应用类型等的不同，可以分为不同的类别。按照页面布局方式划分，网页可分为垂直分布式网页、水平布局式网页、瀑布流式网页以及视差滚动式网页等类型。按照实现技术划分，网页可分为HTML类型的网页、Flash类型的网页以及综合运用类型的网页。最为常见的是按照应用类型划分，分为综合门户类网站网页、多媒体互动类网站网页、搜索引擎类网站网页、电子商务类网站网页、机构企业类网站网页以及推广展示类网站网页等。
1. 综合门户类网站网页
综合门户类网站是展示各类互联网信息资源并提供综合信息服务的网站。在全球范围内，比较著名的综合门户网站是谷歌与雅虎。我国综合门户网站的代表有：新浪网、网易、搜狐以及腾讯。综合门户网站通常把各种资讯汇集到一个平台上，采用统一的界面供用户浏览，涵盖的资讯包括新闻、财经、体育、论坛、免费邮箱、博客、影音资讯、网络社区、网络游戏等。图1-1所示为新浪网页面。图1-1 新浪网页面
2. 多媒体互动类网站网页
多媒体是指在计算机系统中组合两种及两种以上媒体元素的人机交互式信息交流和传播媒体。网页中常见的媒体元素包括文字、图像、照片、声音、动画、影片等。Web 2.0时代的网页摒弃了Web 1.0时代以信息发布为主的网页表现形式，更强调网页的互动性。多媒体互动类网站充分调动用户的能动性，为他们提供多种互动的功能。常见的多媒体互动类网站包括优酷网、土豆网、新浪博客、人人网以及各类微博。图1-2所示为优酷网页面，用户除了可以在线浏览视频以外，还可以在线发布和分享视频的内容。图1-2 优酷网页面
3. 搜索引擎类网站网页
搜索引擎类网站的工作原理是按照搜索词排名，通过索引数据库发现新网页并抓取文件。常见的搜索引擎类网站包括百度搜索、360搜索、必应搜索、谷歌搜索等。搜索引擎类网站的页面集合了较多网址，并按照一定标准对其进行分类。用户通过搜索引擎类网站，可以快速找到自己需要的内容，如图1-3所示。图1-3 360导航网页面
4. 电子商务类网站网页
电子商务类网站是供买卖双方通过互联网实现交易的网络平台。图1-4所示为天猫商城页面，消费者与商家通过电子商务网站可进行网上交易、在线支付等商务活动。图1-4 天猫商城页面
5. 机构企业类网站网页
机构企业类网站是指党政机关、企事业单位、社会团体的官方网站，主要展示机构企业的品牌形象、历史规模、产品活动并提供相应的服务。机构企业类网站数量非常庞大，诸如中国政府网、中国铁路官方网站、中国法学会官方网站、华为公司官方网站等都是。图1-5所示为中国铁路官方网站，用户可在线购票、查票、退票、查询路线等。图1-5 中国铁路官方网站页面
6. 推广展示类网站网页
推广展示类网站是为实现某种特定的营销目标而开发的网站，基于企业或个人营销推广目标进行站点规划，能帮助用户有效利用多种手段获得商业机会，提升产品销售业绩、品牌知名度或个人影响力。推广展示类网站主要包括名人政要的个人风采展示、产品服务的特色罗列两种类型。图1-6所示为小米商城网站，主要用来展示小米公司最新的产品。图1-6 小米商城页面1.1.2 网页UI的构成元素
网页通过文字、图像、声音、视频等多媒体元素向用户传递信息。网页UI设计师在进行界面设计时，要对其元素进行合理的布局和配置，帮助用户流畅地浏览界面内容、快速捕捉到必要的信息，并获得舒适的视觉体验。
一般而言，网页UI设计师需要解决文字元素的排版布局、图像元素的编辑处理、色彩元素的搭配设计以及交互控件的合理设定等核心问题。
1. 文字元素
文字是网页中最主要的元素，是网页中传达信息最基本的形式。网页中的文字，按照属性可以分为两种类型：活字与图形化文字。（1）活字。活字是网页编辑器中默认的网页字，可由前端工程师通过CSS样式表对其修饰、美化，用户可以通过鼠标选择和复制。活字在网页中主要应用于新闻小标题、栏目小标题、正文段落以及列表等区域。为了避免用户打开网页时，界面中的字体样式无法正常显示，活字字体一般选择系统安全字体。所谓系统安全字体，是指系统安装时自带的字体。常见的中文系统安全字体为宋体、黑体及微软雅黑，常见的英文系统安全字体为Arial和Times New Roman。如图1-7所示，网页中的活字字体为微软雅黑。图1-7 网页中的活字知识链接设计师在Photoshop中排版网页文字时，中文最小字号一般应大于12px，英文最小字号一般应大于10px。当文字字号较小，笔画边缘出现模糊现象时，设计师可将“消除锯齿方式”设置为“无”。如图1-8所示，设置为平滑类型的字体，所有笔画均出现模糊现象。设置为“无”的像素字体，横平竖直的笔画边缘并未出现模糊现象；撇、捺等无法与像素格对齐的笔画，其边缘通过像素点表示，当放大网页比例时，同样不会出现失真或模糊的现象。图1-8 平滑字体与像素字体网页文字参数设置：①字间距：默认值为0。②行间距：150%（18～24px）。③颜色：采用216种网页安全色。如果文字颜色为黑色系，为防止视觉疲劳并考虑颜色统一，设计师会选择#999999、#666666、#333333、#000000等颜色编码（其中#000000颜色最深）。如果文字为全黑色，为防止视觉疲劳，设计师通常会选择#333333颜色编码。④标题文字：在常规文字基础上可放大、加粗，常用字体采用偶数字号，分别为18px、24px、30px、36px。⑤大篇幅文章：字号可以使用12～14px，行间距140%（16～18px）。（2）图形化文字。图形化文字是网页UI设计师使用图像处理软件将文字转化成图形与符号，并将转化后的文字以图像格式输出，应用于网页UI设计中的字体类型。图形化文字在网页中主要应用于Logo、栏目的主标题、按钮、宣传图像等区域，如图1-9所示。图1-9 图形化文字
与图形化文字相比，网页中的活字占用空间相对较少，但使用活字可提高网页的加载速度，实现自动化更新，便于网站的维护，也便于搜索。
2. 图像元素
图像是网页的重要组成部分，与文字相比，图像能更形象、更全面地传达信息。网页中的图像分类方式有多种。按照编码格式，图像可划分为：JPEG、PNG、GIF、WBMP等；按照功能属性，图像可划分为：主视觉图像、背景图像、缩略图、图标、按钮等。如图1-10所示，在腾讯网汽车频道界面中，图像占据了页面中相当大的篇幅与比例，如果把这些图像全部变成文字，页面会显得非常乏味。图1-10 腾讯网汽车频道界面
3. 色彩元素
色彩作为装饰美化页面的重要手段，如同网页的“衣饰”，能影响到网页内容的传播效果。网页中的色彩主要是指文字内容的颜色、网页背景的颜色、按钮图标的颜色。网页中的色彩按照应用比例与应用场景，可分为主色、辅助色、背景色与点睛色四大类。如图1-11所示，页面中的主色调为浅黄色、辅助色为白色、背景色为深紫色、点晴色为粉红色。图1-11 网页的色彩元素知识扩展图像在页面中占据的视觉区域往往比较大，会在很大程度上影响页面的视觉效果。但是，图像中所携带的色彩并不属于网页设计中的四大主色调。
4. 交互控件
用户向网页输入指令，计算机经过处理后将结果输出并呈现给用户，这个流程就构成了人机交互的过程。网页中的交互元素是指链接起用户与网页，实现相互交流的控件。网页中常见的交互控件包括：按钮图标、超链接、表单、交互数据、交互动画以及其他定制化功能。
随着互联网的发展，网页的交互性也成为衡量一个网站是否新颖、是否具备个性化气质的标准。如图1-12所示，用户在花瓣网注册成功之后，首页就是通过用户自定义生成的，这些版面的选择体现了以用户为中心的服务理念。图1-12 花瓣网用户自定义首页1.1.3 网站开发的基本流程
在网页UI设计过程中，设计师需遵循一定的网站开发流程。网页UI设计师按照成熟的开发流程进行设计，一方面有助于提高设计效率与设计质量；另一方面，也有利于与开发团队中的其他成员进行有效的沟通合作。网站开发的基本流程如图1-13所示。图1-13 网站开发的基本流程
1. 前期——了解客户需求
网站开发前期的主要工作是进行客户需求分析。这部分工作一般由团队中的产品经理或网络营销师负责。但是，网页UI设计师为了拓展自身能力，更好地了解项目需求，可以尽早介入项目的前期工作。网页UI设计师通过了解客户需求，可以有效地提高与项目经理的合作效率，减少沟通的成本，避免信息传递过程中信息量的衰减，从而设计出更符合项目需求和客户需求的网页。
网站开发或改版的需求，通常是由企业客户方或市场部人员，通过会议、邮件、口头传达等方式提出。此阶段需要网页UI设计师重点了解的内容如下：
①网站开发或改版的目的；
②网站包含的所有功能需求；
③网站功能结构和内容信息；
④界面的视觉风格要求和其他特定要求；
⑤设计周期计划。
2. 中期——视觉设计与程序实现
网站开发中期的主要工作内容包括网站原型的制作、网站视觉设计以及前端的还原实现等。其中网站原型线框图由UE设计师或产品经理完成，图1-14所示为网站的原型线框图；网站视觉效果图由网页UI设计师设计，图1-15所示为网页视觉效果图。图1-14 网站原型线框图图1-15 网站视觉效果图
网页UI设计师在取得网站原型线框图后，需要准备一些素材，这些素材包括文字内容、图像、图形和图标、同行业类似项目的成功案例等。网页UI设计师充分准备素材可以大大提高后续环节的工作效率。
网页前端和后台开发工作一般由程序开发人员完成，部分企业的前端代码也直接由UI设计师完成，这类身兼数职的开发人员被称为网页UI设计开发工程师。网页UI设计开发工程师是具备良好视觉表现能力与扎实代码编写能力的复合型人才，是就业市场的紧缺型人才。
3. 后期——测试发布与维护更新
网站开发完毕后，开发人员还需要对网站进行测试才可以发布。网站上线后，在运营的过程中，开发人员需要根据用户的反馈进行及时的维护与更新。在网站测试的过程中，网页UI设计师需要配合开发人员测试网页功能的还原效果：检查页面效果是否美观、链接是否完好、不同浏览器的兼容性是否合理等。知识扩展（1）产品经理（Product Manager，PM）是驱动和影响设计、技术、测试、运营、市场等相关部门人员，推进产品开发，确保产品行驶在正确道路上的管理者。（2）UI（User Interface，用户界面）设计师是对产品的操作逻辑、人机交互、整体界面进行设计的执行人员。（3）UE（User Experience，用户体验）设计师是全面分析和体察用户在使用某个系统、某个产品时的感受，并对其进行设计的执行人员。（4）网络营销师：互联网兴起后产生的一个新型职业，其职责是将互联网技术与市场营销相结合，通过各种技术手段与营销推广方式，迅速提高网站访问量。1.2 网页UI设计相关理论
深入了解界面设计的基本流程、网页配色的基本原则、网页中图像的处理方法，是网页UI设计师设计出令客户满意的视觉效果的必备条件。1.2.1 网页UI设计的基本流程
网页UI设计师在了解网页中所有功能的基础上，开始对页面的视觉效果进行设计。网页UI设计师可以按照既定的设计流程开展设计工作，这样做不仅有利于提高设计的效率，而且能保证视觉效果图符合相应的设计规范和客户的目标要求。网页UI设计的基本流程如下。
1. 网页尺寸的设定
随着计算机屏幕尺寸不断加大，UI设计师需要考虑不同尺寸的屏幕适配问题，如果忽略了这方面的工作，会导致背景出现空白。如图1-16所示的是宽度为1024px的网页在宽度为1280px的屏幕中的显示效果，图像左侧与右侧有较大面积的区域由于没有平铺完整而出现一片空白，给人一种残缺的感觉。图1-16 不同屏幕分辨率下网页效果图
网页UI设计师在设置页面尺寸时，可参考当前各种计算机屏幕分辨率的市场占有率。据广告公司AdDuplex的统计数据显示：截至2017年，全球范围内最主流的PC屏幕分辨率是1366px×768px，市场占有率为33.3%。图1-17所示为AdDuplex发布的PC屏幕市场占有率数据。图1-17 2017年PC屏幕市场占有率
网页UI设计往往要考虑最大的屏幕分辨率以及最小的屏幕分辨率，避免出现页面显示不全或大面积空白的现象。目前，有高达3000px×2000px的屏幕分辨率，但是这类屏幕市场占有率不是很高。一般来说，屏幕分辨率相对较高，市场占有率也相对较高的屏幕分辨率是1920px×1080px。截至2017年，其市场占有率为20.6%。因此，网页UI设计师在进行界面设计时，可将页面的宽度设定为1920px。另外，目前市场上最小的屏幕分辨率为800px×600px，但采用该屏幕分辨率的计算机显示器已经基本被淘汰。综合考量最小屏幕分辨率的市场占有率与尺寸，建议网页UI设计师选择1024px×768px（被称为标准屏幕分辨率）的屏幕分辨率。
另外，网页UI设计师在新建文档时，还应注意网页页面精度、文档单位以及颜色模式等参数的设置。网页的页面精度为72像素/英寸，文档单位为像素，颜色模式为RGB。知识扩展设计师使用整屏图像时，需将图像居中显示，两边用纯色过渡。网页的高度一般是根据具体内容而定，首屏高度一般控制在750～1000px。纵向滚动一般根据项目需求定义，建议不超过3屏。
另外，设计师在制作网页时可以采用以下几种方法来规避由于屏幕宽度差异导致的页面背景缺失等问题。（1）设置背景颜色。使用纯色可以很好地适配过宽的屏幕尺寸。版心区域内的网页核心内容不变，背景采用纯色平铺，设计师只需要提供背景颜色的色值即可，如图1-18所示。图1-18 设置背景颜色（2）使用无缝连接的背景图像。使用可重复的无缝图案进行背景填充可增加页面质感，既能兼顾视觉表达，又能最大限度减小网页的体积。设计师只需要提供最小可循环的背景图像即可。
2. 使用参考线确定基本结构
在网页UI设计过程中，为了准确地划分区域，使用参考线辅助页面布局是必不可少的步骤。在具体的制作过程中，页面元素的布局要以参考线作为基准。设计师初次使用参考线前，需要设置标尺的单位为px。图1-19所示为使用参考线为网站布局。图1-19 使用参考线进行首页布局
部分页面中会有轮廓线或背景色贯穿于几个板块或者是整个页面的情况，这种设计方法被称为“破格”。如图1-20所示，第一阶段的课程表贯穿了蓝色与白色两个模块。网页UI设计师在设计之前，可以将页面的结构线使用参考线区分开来，便于在设计过程中准确定位。
试读结束[说明：试读内容隐藏了图片]