网页界面设计规范

网页界面设计规范

在设计Web界面时,首先要了解PC端的设计规范,才能规范设计,使其更符合Web UI设计的特点。本节将详细讲解网页设计中PC屏幕分辨率、网页设计尺寸、网页设计命名约定、字体布局这四个方面。

1、电脑屏幕分辨率

PC端的屏幕分辨率是指电脑的屏幕分辨率,如图1-1中红框所示。目前流行的屏幕分辨率分为1024×768像素、1366×768像素、1440×900像素和1920×1080像素。设计网页时要考虑电脑屏幕分辨率下浏览器的有效查看区域。

计算机屏幕分辨率

图 1-1 电脑屏幕分辨率

2、网页设计维度

网页设计尺寸是指设计界面时的宽度和高度。大小一般设计为宽度为1920像素,高度可根据内容进行调整,如图1-2所示。但是考虑到屏幕分辨率为1024×768像素游戏ui切图命名规范,浏览器中有效可见区域的宽度为1000像素,所以将版本中心的宽度设置为1000像素。

网页设计尺寸大小

图 1-2 网页设计尺寸

3、网页设计命名约定

作为一个完整的页面,往往包含很多部分,比如logo、导航、banner、内容正文、版权等。在设计界面时,按照规定的准则命名图层或图层组合地图场景,有利于快速查找和修改页面效果,还可以大大提高图像裁剪和后期制作的工作效率。表1-3列出了PC端网页UI设计常用的英文名称和词语。

图1-3 Web UI设计命名常用词

4、网页设计中的字体布局

在 Web 界面中,排版是一种感知和直观的行为。设计师可以根据字体大小来表达设计想要表达的情感。需要注意的是,字体大小的选择取决于整个网页界面的效果和用户的体验。此外,还要考虑大多数用户计算机中的基本字体类型。因此,文本内容中最好使用基本字体,如“Calibur”、“Microsoft Yahei”等字体,数字和字母使用“Arial”等字体。在网页界面设计中游戏ui切图命名规范,字体大小和常用颜色如表 1-4 和表 1-5 所示。

字体选择

图 1-4 字体选择

图 1-5 常用颜色