Photoshop+PxCook+Cutterman网页UI设计教程
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人

1.2 网页UI的分类

网页的类型多种多样,用户可以根据使用设备的不同,也可以根据网页布局结构的不同,还可以根据内容和功能的不同来划分网页。

1. 根据使用设备的不同来划分

随着科技的飞速发展,电子设备的种类日益增多。在这些设备上浏览网页,受地点、操作方式和设备是否方便携带等因素的影响,可以大致将网页划分为PC端网页和移动端网页两种类型。

1)PC端网页

PC端网页是指用户使用台式计算机在浏览器上打开的各种网页,如图1-2所示。

图1-2 PC端网页

提示

PC端网页和移动端网页最大的区别就是它们的屏幕尺寸不同。在正常情况下,计算机屏幕尺寸要比手机屏幕尺寸大得多,所以在网页UI设计上就会有所不同,移动端网页的页面相对来说要窄一些,而PC端网页的页面相对来说要宽一些。

2)移动端网页

移动端网页就是用户使用手机和平板电脑等设备浏览的网页或者访问的App界面,如图1-3所示。

图1-3 移动端网页

提示

PC端网页展现的是非常全面且详细的信息,它的特点就是面面俱到;而移动端网页则是精简功能模块后的网页,它一般展现的是网页的核心信息,它的特点是针对性和目的性强、传输数据量小、访问速度快,同时它也具备画面清晰、版式简约、排版整齐、视觉冲击力强等优势。用户可以将移动端网页看成PC端网页的简约版。

2. 根据网页布局结构的不同来划分

根据网页布局结构的不同,用户可以将网页划分为国字型、拐角型、标题正文型、左右框架型、上下框架型、封面型和变化型等。

提示

网页根据布局结构的不同也有多种划分方式,这里只进行简单描述,便于刚刚接触网页UI设计的用户对网页有一个初步的了解,具体的网页布局结构内容将会在第2章中进行详细讲解,感兴趣的读者可以跳转到第2章继续阅读。

3. 根据内容和功能的不同来划分

用户可以根据内容和功能的不同,将网页划分为个人网站、门户网站、企业网站、功能网站、娱乐网站和机构网站等。下面对这些网站进行简单的介绍。

1)个人网站

个人网站是指个人或团体因某种兴趣,并拥有某种专业技术,为浏览者提供某种服务或者向浏览者展示自己的作品和技术而制作的具有独立空间和域名的网站。个人网站主页如图1-4所示。

图1-4 个人网站主页

提示

个人网站也是一种通信工具,就像布告栏一样,人们可以通过网站来发布自己想要公开的资讯或者技术,也可以利用网站为网民提供相关的网络服务。

2)门户网站

门户网站是指提供某类互联网信息资源并提供相关信息服务的综合性应用系统。在全球范围内,著名的门户网站是Google和Yahoo,而在国内,比较著名的门户网站则是新浪、网易、搜狐、腾讯、百度、新华网、人民网、凤凰网等。图1-5所示为门户网站页面。

图1-5 门户网站页面

提示

门户网站最初只提供搜索引擎、目录等服务。如今,门户网站也分为搜索引擎式门户网站、综合性门户网站和地方生活门户网站等。搜索引擎式门户网站的主要功能是提供强大的搜索引擎和其他各种网络服务,这类网站在国内比较少见。综合性门户网站是以新闻、供求、产品、展会、行业导航和招聘为主的集成式网站。地方生活门户网站是当下流行的网站类型之一,主要以本地资讯为主。

3)企业网站

企业网站是企业在互联网上进行网络营销和形象宣传的平台,相当于企业的网络名片。企业网站除了可以宣传企业的良好形象,还可以辅助企业的产品销售,即企业可以通过网络销售产品或者提供服务。企业也可以利用网站进行企业文化宣传、新品发布、企业招聘等。图1-6所示为企业网站页面。

图1-6 企业网站页面

提示

企业网站在设计时应该注重浏览者的视觉体验,并加强用户服务,完善企业的网络业务,最好能够吸引潜在用户的关注。

4)功能网站

功能网站主要用来展示专业的产品信息,一般的商业网站、行业网站和专业网站都可以归纳到功能网站中。图1-7所示为功能网站页面。

图1-7 功能网站页面

提示

功能网站展示的是实用性内容。优秀的网页不仅能够从外观上给浏览者留下深刻的印象,而且能够使浏览者全面、快速地了解相关的产品信息。

5)娱乐网站

娱乐网站的主要功能是丰富大众的业余生活,浏览者可以利用该网站追剧、听歌、听广播、看电影和玩游戏等。土豆网、QQ音乐、4399小游戏和斗鱼TV等可以归纳为娱乐网站。图1-8所示为娱乐网站页面。

图1-8 娱乐网站页面

6)机构网站

机构网站一般是为服务大众而存在的,有了这些页面,大众可以更快地了解一些消息和实时信息。机构网站如中华人民共和国工业和信息化部、中国高等教育学生信息网(学信网)等。图1-9所示为机构网站页面。

图1-9 机构网站页面