当前位置:
首页 > 教材教辅 > 中职/高职 > 边练边学:网页UI商业项目设计实战pdf/doc/txt格式电子书下载

边练边学:网页UI商业项目设计实战pdf/doc/txt格式电子书下载

本站仅展示书籍部分内容

如有任何咨询

请加微信10090337咨询

边练边学:网页UI商业项目设计实战pdf/doc/txt格式电子书下载

书名:边练边学:网页UI商业项目设计实战pdf/doc/txt格式电子书下载

推荐语:

作者:肖睿,张敏,谢思

出版社:人民邮电出版社有限公司

出版时间:2019-07-01

书籍编号:30512837

ISBN:9787115511942

正文语种:中文

字数:101433

版次:1

所属分类:教材教辅-中职/高职

全书内容:

边练边学:网页UI商业项目设计实战pdf/doc/txt格式电子书下载







内容提要


本书详细讲解了不同类型Web端UI商业项目的设计理论、设计思路以及实际案例制作过程。全书共8章,具体包括网页UI设计概述、营销类网站首页UI设计、教育类网站着陆页UI设计、招聘类网站专题页UI设计、游戏类网站改版UI设计、企业网站信息管理后台UI设计、平台类商城UI设计以及电商类店铺首页UI设计。


全书采用案例驱动的方式,让读者掌握不同行业、不同类型网站的设计规范和设计方法,并能够按照企业需求制作完整的企业网站。本书适合作为相关设计专业的教材,也适合作为UI设计爱好者和Web端界面设计人员的参考用书。

序言


丛书设计


互联网产业在我国经济结构的转型升级过程中发挥着重要的作用。当前,方兴未艾的互联网产业在我国有着十分广阔的发展前景和巨大的市场机会,这意味着行业需要大量的与市场需求匹配的高素质人才。


在新一代信息技术浪潮的推动下,各行各业对UI设计人才的需求迅速增加。许多刚刚走出校门的应届毕业生和有着多年工作经验的传统设计人员,由于缺乏对移动端App、新媒体行业的理解,缺乏互联网思维和前端开发技术等,导致他们所掌握的知识和技能满足不了行业、企业的要求,因此很难找到理想的UI设计师工作。基于这种行业现状,课工场作为IT职业教育的先行者,推出了“互联网UI设计师系列”教材。


本丛书提供了集基础理论、创意设计、项目实战、就业项目实训于一体的教学体系,内容既包含UI设计师必备的基础知识,也增加了许多行业新知识和新技能的介绍,旨在培养专业型、实用型、技术型人才,在提升读者专业技能的同时,增强他们的就业竞争力。


丛书特点


1. 以企业需求为导向,以提升就业竞争力为核心目标


满足企业对人才的技能需求,提升读者的就业竞争力是本丛书的核心编写原则。课工场“互联网UI设计师”教研团队对企业的平面UI设计师、移动UI设计师、网页UI设计师等人才需求进行了大量实质性的调研,将岗位实用技能融入教学内容中,从而实现教学内容与企业需求的契合。


2. 科学、合理的教学体系,关注读者成长路径,培养读者实践能力


实用的教学内容结合科学的教学体系、先进的教学方法才能达到好的教学效果。本丛书为了使读者能够目的明确、条理清晰地学习,秉承了以学习者为中心的教育思想,循序渐进地培养读者的专业基础、实践技能、创意设计能力,并使其能制作和完成实际项目。


本丛书改变了传统教材以理论讲授为重的写法,从实例出发,以实践为主线,突出实战经验和技巧传授,以大量操作案例覆盖技能点的方式进行讲解;对读者而言,容易理解,便于掌握,能有效提升实用技能。


3. 教学内容新颖、实用,创意设计与项目实操并行


本丛书既讲解了互联网UI设计师所必备的专业知识和技能(如Photoshop、Illustrator、After Effects、Cinema 4D、Axure、PxCook等工具的应用,网站配色与布局、移动端UI设计规范等),也介绍了行业的前沿知识与理念(如网络营销基本常识、符合SEO标准的网站设计、登录页设计优化、电商网站设计、店铺装修设计、用户体验与交互设计)。一方面通过基本功训练和优秀作品赏析,使读者能够具备一定的创意思维;另一方面提供了涵盖电商、金融、教育、旅游、游戏等诸多行业的商业项目,使读者在项目实操中了解流程和规范,提升业务能力,发挥自己的创意才能。


4. 可拓展的互联网知识库和学习社区


读者可配合使用课工场App进行二维码扫描,观看配套视频的理论讲解和案例操作等。同时,课工场官网开辟教材专区,提供配套素材下载。此外,课工场也为读者提供了体系化的学习路径、丰富的在线学习资源以及活跃的学习交流社区,欢迎广大读者进入学习。


读者对象


► 高校学生


► 初入UI设计行业的新人


► 希望提升自己,紧跟时代步伐的传统美工人员


致谢


本丛书由课工场“互联网UI设计师”教研团队组织编写。课工场是北京大学旗下专注于互联网人才培养的高端教育品牌。作为国内互联网人才教育生态系统的构建者,课工场依托北京大学优质的教育资源,重构职业教育生态体系,以读者为本,以企业为基,为读者提供高端、实用的教学内容。在此,感谢每一位参与互联网UI设计师课程开发的工作人员,感谢所有关注和支持互联网UI设计师课程的人员。


感谢您阅读本丛书,希望本丛书能成为您踏上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设计、网站设计等。为了尊重这些内容所有者的权利,特此声明,凡本书中涉及的版权、著作权、商标权等权益,均属于原作品版权人、著作权人、商标权人。


为了维护原作品相关权益人的权益,现对本书选用的主要作品和出处给予说明(排名不分先后)。

51194-00-009-1

以上列表中并未全部列出本书所选用的作品。在此,我们衷心感谢所有原作品的相关版权权益人及所属公司对职业教育的大力支持!

智慧教材使用方法

51194-00-010-1

扫一扫查看视频介绍

由课工场“大数据、云计算、全栈开发、互联网UI设计、互联网营销”等教研团队编写的系列教材,配合课工场App及在线平台的技术内容更新快、教学内容丰富、教学服务反馈及时等特点,结合二维码、在线社区、教材平台等多种信息化资源获取方式,形成独特的“互联网+”形态——智慧教材。


智慧教材为读者提供专业的学习路径规划和引导,读者还可体验在线视频学习指导,按如下步骤操作可以获取案例代码、作业素材及答案、项目源码、技术文档等教材配套资源。


1. 下载并安装课工场App。


(1)方式一:访问网址www.ekgc.cn/app,根据手机系统选择对应课工场App安装,如图1所示。

51194-00-010-2

图1 课工场App

(2)方式二:在手机应用商店中搜索“课工场”,下载并安装对应App,如图2和图3所示。

51194-00-011-1

图2 iPhone版手机应用下载

51194-00-011-2

图3 Android版手机应用下载

2. 登录课工场App,注册个人账号,使用课工场App扫描书中二维码,获取教材配套资源,依照图4~图6所示的步骤操作即可。

51194-00-011-3

图4 定位教材二维码

51194-00-012-1

图5 使用课工场App“扫一扫”扫描二维码 

51194-00-012-2

图6 使用课工场App免费观看教材配套视频

3. 获取专属的定制化扩展资源。


(1)普通读者请访问www.ekgc.cn/bbs的“教材专区”版块,获取教材所需开发工具、教材中示例素材及代码、上机练习素材及源码、作业素材及参考答案、项目素材及参考答案等资源(注:图7所示网站会根据需求有所改版,仅供参考)。

51194-00-012-3

图7 从社区获取教材资源

第1章 网页UI设计概述


学习目标


► 了解网页的常见分类、网页UI(User Interface,用户界面)的构成元素,以及网站开发的基本流程等理论知识。


► 熟悉网页UI设计的基本流程,掌握网页布局、配色以及图像编辑的方法。


► 理解网页切片的对象、切片的方式以及切片的命名等理论知识。


► 掌握单个切片、连续切片以及透明背景切片的输出方法。


► 掌握网页切片的移动、复制、划分以及组合方式。


本章简介


据《中国互联网发展报告2018》显示:截至2017年年底,我国网页数量达2664亿个,年增长率为10.3%。其中,静态网页数量为1969亿个,动态网页数量为695亿个。在当今这个信息爆炸的时代,网页数量呈几何级数增长的同时,网民对于网页界面的要求也在不断提高。


在满足网页基本功能需求的前提下,网页界面更需要在视觉表现方面给予网民舒适的阅读体验和友好的交互体验。为此,在网站开发建设与维护的过程中,需要优秀的网页UI设计师进行精心的视觉设计。本章将针对网页UI设计的相关理论进行详细的讲解,包括网页的类型和特点、网页布局的原则、网页的切片方法等内容。


1.1 网页概述


1.1.1 网页的常见分类

51194-00-019-1

参考视频:网页UI商业项目管理规范

网页按照页面布局方式、实现技术以及应用类型等的不同,可以分为不同的类别。按照页面布局方式划分,网页可分为垂直分布式网页、水平布局式网页、瀑布流式网页以及视差滚动式网页等类型。按照实现技术划分,网页可分为HTML类型的网页、Flash类型的网页以及综合运用类型的网页。最为常见的是按照应用类型划分,分为综合门户类网站网页、多媒体互动类网站网页、搜索引擎类网站网页、电子商务类网站网页、机构企业类网站网页以及推广展示类网站网页等。


1. 综合门户类网站网页


综合门户类网站是展示各类互联网信息资源并提供综合信息服务的网站。在全球范围内,比较著名的综合门户网站是谷歌与雅虎。我国综合门户网站的代表有:新浪网、网易、搜狐以及腾讯。综合门户网站通常把各种资讯汇集到一个平台上,采用统一的界面供用户浏览,涵盖的资讯包括新闻、财经、体育、论坛、免费邮箱、博客、影音资讯、网络社区、网络游戏等。图1-1所示为新浪网页面。

51194-00-019-2

图1-1 新浪网页面

2. 多媒体互动类网站网页


多媒体是指在计算机系统中组合两种及两种以上媒体元素的人机交互式信息交流和传播媒体。网页中常见的媒体元素包括文字、图像、照片、声音、动画、影片等。Web 2.0时代的网页摒弃了Web 1.0时代以信息发布为主的网页表现形式,更强调网页的互动性。多媒体互动类网站充分调动用户的能动性,为他们提供多种互动的功能。常见的多媒体互动类网站包括优酷网、土豆网、新浪博客、人人网以及各类微博。图1-2所示为优酷网页面,用户除了可以在线浏览视频以外,还可以在线发布和分享视频的内容。

51194-00-020-1

图1-2 优酷网页面

3. 搜索引擎类网站网页


搜索引擎类网站的工作原理是按照搜索词排名,通过索引数据库发现新网页并抓取文件。常见的搜索引擎类网站包括百度搜索、360搜索、必应搜索、谷歌搜索等。搜索引擎类网站的页面集合了较多网址,并按照一定标准对其进行分类。用户通过搜索引擎类网站,可以快速找到自己需要的内容,如图1-3所示。

51194-00-020-2

图1-3 360导航网页面

4. 电子商务类网站网页


电子商务类网站是供买卖双方通过互联网实现交易的网络平台。图1-4所示为天猫商城页面,消费者与商家通过电子商务网站可进行网上交易、在线支付等商务活动。

51194-00-021-1

图1-4 天猫商城页面

5. 机构企业类网站网页


机构企业类网站是指党政机关、企事业单位、社会团体的官方网站,主要展示机构企业的品牌形象、历史规模、产品活动并提供相应的服务。机构企业类网站数量非常庞大,诸如中国政府网、中国铁路官方网站、中国法学会官方网站、华为公司官方网站等都是。图1-5所示为中国铁路官方网站,用户可在线购票、查票、退票、查询路线等。

51194-00-021-2

图1-5 中国铁路官方网站页面

6. 推广展示类网站网页


推广展示类网站是为实现某种特定的营销目标而开发的网站,基于企业或个人营销推广目标进行站点规划,能帮助用户有效利用多种手段获得商业机会,提升产品销售业绩、品牌知名度或个人影响力。推广展示类网站主要包括名人政要的个人风采展示、产品服务的特色罗列两种类型。图1-6所示为小米商城网站,主要用来展示小米公司最新的产品。

51194-00-022-1

图1-6 小米商城页面

1.1.2 网页UI的构成元素


网页通过文字、图像、声音、视频等多媒体元素向用户传递信息。网页UI设计师在进行界面设计时,要对其元素进行合理的布局和配置,帮助用户流畅地浏览界面内容、快速捕捉到必要的信息,并获得舒适的视觉体验。


一般而言,网页UI设计师需要解决文字元素的排版布局、图像元素的编辑处理、色彩元素的搭配设计以及交互控件的合理设定等核心问题。


1. 文字元素


文字是网页中最主要的元素,是网页中传达信息最基本的形式。网页中的文字,按照属性可以分为两种类型:活字与图形化文字。


(1)活字。活字是网页编辑器中默认的网页字,可由前端工程师通过CSS样式表对其修饰、美化,用户可以通过鼠标选择和复制。活字在网页中主要应用于新闻小标题、栏目小标题、正文段落以及列表等区域。为了避免用户打开网页时,界面中的字体样式无法正常显示,活字字体一般选择系统安全字体。所谓系统安全字体,是指系统安装时自带的字体。常见的中文系统安全字体为宋体、黑体及微软雅黑,常见的英文系统安全字体为Arial和Times New Roman。如图1-7所示,网页中的活字字体为微软雅黑。

51194-00-022-2

图1-7 网页中的活字

知识链接


设计师在Photoshop中排版网页文字时,中文最小字号一般应大于12px,英文最小字号一般应大于10px。当文字字号较小,笔画边缘出现模糊现象时,设计师可将“消除锯齿方式”设置为“无”。如图1-8所示,设置为平滑类型的字体,所有笔画均出现模糊现象。设置为“无”的像素字体,横平竖直的笔画边缘并未出现模糊现象;撇、捺等无法与像素格对齐的笔画,其边缘通过像素点表示,当放大网页比例时,同样不会出现失真或模糊的现象。

51194-00-023-1

图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所示。

51194-00-023-2

图1-9 图形化文字

与图形化文字相比,网页中的活字占用空间相对较少,但使用活字可提高网页的加载速度,实现自动化更新,便于网站的维护,也便于搜索。


2. 图像元素


图像是网页的重要组成部分,与文字相比,图像能更形象、更全面地传达信息。网页中的图像分类方式有多种。按照编码格式,图像可划分为:JPEG、PNG、GIF、WBMP等;按照功能属性,图像可划分为:主视觉图像、背景图像、缩略图、图标、按钮等。如图1-10所示,在腾讯网汽车频道界面中,图像占据了页面中相当大的篇幅与比例,如果把这些图像全部变成文字,页面会显得非常乏味。

51194-00-024-1

图1-10 腾讯网汽车频道界面

3. 色彩元素


色彩作为装饰美化页面的重要手段,如同网页的“衣饰”,能影响到网页内容的传播效果。网页中的色彩主要是指文字内容的颜色、网页背景的颜色、按钮图标的颜色。网页中的色彩按照应用比例与应用场景,可分为主色、辅助色、背景色与点睛色四大类。如图1-11所示,页面中的主色调为浅黄色、辅助色为白色、背景色为深紫色、点晴色为粉红色。

51194-00-024-2

图1-11 网页的色彩元素

知识扩展


图像在页面中占据的视觉区域往往比较大,会在很大程度上影响页面的视觉效果。但是,图像中所携带的色彩并不属于网页设计中的四大主色调。

4. 交互控件


用户向网页输入指令,计算机经过处理后将结果输出并呈现给用户,这个流程就构成了人机交互的过程。网页中的交互元素是指链接起用户与网页,实现相互交流的控件。网页中常见的交互控件包括:按钮图标、超链接、表单、交互数据、交互动画以及其他定制化功能。


随着互联网的发展,网页的交互性也成为衡量一个网站是否新颖、是否具备个性化气质的标准。如图1-12所示,用户在花瓣网注册成功之后,首页就是通过用户自定义生成的,这些版面的选择体现了以用户为中心的服务理念。

51194-00-025-1

图1-12 花瓣网用户自定义首页

1.1.3 网站开发的基本流程


在网页UI设计过程中,设计师需遵循一定的网站开发流程。网页UI设计师按照成熟的开发流程进行设计,一方面有助于提高设计效率与设计质量;另一方面,也有利于与开发团队中的其他成员进行有效的沟通合作。网站开发的基本流程如图1-13所示。

51194-00-026-1

图1-13 网站开发的基本流程

1. 前期——了解客户需求


网站开发前期的主要工作是进行客户需求分析。这部分工作一般由团队中的产品经理或网络营销师负责。但是,网页UI设计师为了拓展自身能力,更好地了解项目需求,可以尽早介入项目的前期工作。网页UI设计师通过了解客户需求,可以有效地提高与项目经理的合作效率,减少沟通的成本,避免信息传递过程中信息量的衰减,从而设计出更符合项目需求和客户需求的网页。


网站开发或改版的需求,通常是由企业客户方或市场部人员,通过会议、邮件、口头传达等方式提出。此阶段需要网页UI设计师重点了解的内容如下:


①网站开发或改版的目的;


②网站包含的所有功能需求;


③网站功能结构和内容信息;


④界面的视觉风格要求和其他特定要求;


⑤设计周期计划。


2. 中期——视觉设计与程序实现


网站开发中期的主要工作内容包括网站原型的制作、网站视觉设计以及前端的还原实现等。其中网站原型线框图由UE设计师或产品经理完成,图1-14所示为网站的原型线框图;网站视觉效果图由网页UI设计师设计,图1-15所示为网页视觉效果图。

51194-00-026-2

图1-14 网站原型线框图

51194-00-027-1

图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的屏幕中的显示效果,图像左侧与右侧有较大面积的区域由于没有平铺完整而出现一片空白,给人一种残缺的感觉。

51194-00-028-1

图1-16 不同屏幕分辨率下网页效果图

网页UI设计师在设置页面尺寸时,可参考当前各种计算机屏幕分辨率的市场占有率。据广告公司AdDuplex的统计数据显示:截至2017年,全球范围内最主流的PC屏幕分辨率是1366px×768px,市场占有率为33.3%。图1-17所示为AdDuplex发布的PC屏幕市场占有率数据。

51194-00-029-1

图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)设置背景颜色。使用

....

本站仅展示书籍部分内容

如有任何咨询

请加微信10090337咨询

本站仅展示书籍部分内容
如有任何咨询

请加微信10090337咨询

再显示