网页设计 通用规范_网页设计 通用规范要求

网页设计已成为企业品牌形象和用户沟通的重要载体。如何打造一个符合用户需求、易于访问、美观大方的网页，是每一个设计师都应关注的问题。本文将从网页设计的通用规范出发，探讨如何构建优质用户体验的关键要素。

一、界面布局与视觉传达

1. 规范布局：遵循一定的网页布局规范，使页面结构清晰、层次分明。常见布局方式有“F型布局”、“T型布局”等，设计师应根据内容特点和用户习惯进行选择。

2. 优化色彩搭配：色彩搭配应遵循色彩心理学原理，符合目标受众的审美需求。避免使用过于刺眼的颜色，保持色彩之间的协调性，提升页面整体美观度。

3. 突出重点信息：利用字体、字号、颜色、图片等视觉元素，将页面重点信息突出显示，引导用户快速获取所需信息。

二、导航与交互设计

1. 清晰导航：确保网页导航结构清晰、简洁，方便用户快速找到所需内容。导航栏设计应遵循以下原则：

a. 保持一致性：网页导航应保持一致性，便于用户快速熟悉。

b. 逻辑性：根据内容特点，将相关导航项归为一类，提高用户体验。

c. 可见性：确保导航栏在页面中的可见性，避免用户迷失方向。

2. 交互设计：合理运用交互元素，如按钮、链接、图片等，提高页面动态效果，增强用户参与感。

三、内容呈现与信息架构

1. 内容质量：确保网页内容真实、有价值，符合用户需求。避免发布虚假信息、低质量内容，以免损害企业信誉。

2. 优化信息架构：合理划分页面结构，使信息呈现具有层次感，方便用户快速找到所需信息。以下是一些常见的信息架构：

a. 树状结构：适用于信息量大、层次清晰的页面。

b. 平铺结构：适用于内容单一、结构简单的页面。

c. 混合结构：结合树状结构和平铺结构，提高页面可读性。

四、响应式设计

随着移动设备的普及，响应式设计已成为网页设计的必然趋势。以下是一些响应式设计的要点：

1. 灵活的布局：根据不同设备屏幕尺寸，调整页面布局，保证内容在不同设备上均可正常显示。

2. 简洁的代码：优化代码结构，提高页面加载速度，降低设备资源消耗。

3. 优化图片：根据不同设备分辨率，调整图片大小，减少页面加载时间。

五、权威资料引用

根据权威机构发布的《网页设计通用规范》，以下为一些具体的设计要点：

1. 页面标题：使用简洁明了的标题，体现页面内容，提高搜索引擎优化（SEO）效果。

2. 链接规范：遵循HTML链接规范，确保链接有效性，提高用户体验。

3. 文字规范：遵循《中华人民共和国国家标准 GB/T 15834-2011 标点符号用法》，规范文字排版。

网页设计通用规范是构建优质用户体验的关键要素。设计师应从界面布局、导航交互、内容呈现、响应式设计等方面入手，不断提升网页设计质量。借鉴权威资料，确保设计规范性与实用性，为用户提供更优质的服务。

网页设计之字体设计规范

网页设计常用字号 最好用偶数字号

1、Header导航文字12号或14号；

2、Menu导航文字14—18号；

3、Sidebar文字12号或14号，

4、一级菜单使用14号、二级菜单使用12号或一级菜单使用12号加粗、二级菜单使用12号。

5、Footer文字12号或14号

6、正文：大标题文字24—32号；标题文字16或18号；正文文字12号或14号。

7、标题文字字号，18px，20px，24px，28px，32px， 尽可能使用双数。

8、按钮文字：比如登录、注册页面按钮或其他按钮，文字14—16号，可根据实际情况调整大小或加粗。

9、同一层级的字号搭配应该保持一致。比如，同一层级的版块中标题文字和内容文字大小的一致性。

在苹果官网中，产品展示文字以64号和32号搭配，文字内容简短有力，可读性强，同时非常具有视觉冲击力，突出显示了品牌特征。

字体排版规范

一、最佳易读性规范

1.行宽

传统图书排版每行最佳字符数是55—75，实际在网页上每行字符75—85更流行。中文在14号字体时，建议35—45个文字

2.行高

网页设计中，文字间距一般根据字体大小选1—1.5倍作为行间距，1.5—2倍作为段间距比如12号字体，行间距是12px—18px，段落间距则是18px—24px。另外，行高/段落之间的空白=0.754。行间距正好是段落间距的75%是非常常见的。

3.行对齐

通常情况下，建议在页面上只使用一种文本对齐，尽量避免两端对齐

4.文字留白

在排版文字时，在版面需要留出空余空间，留白面积从小到大应该遵循的顺序是：字间距、行间距、段间距。此外，在排版内容区之前，需要根据页面实际情况给页面四周留出余白。

5、CRAP原则（carp）

对比（Contrast）、重复（Repetition）、对齐（Alignment）、亲密性（Proximity）

字体选择

字体：中文：宋体，微软雅黑，方正系列（无状态）

字号：网页中正文／导航字号在12px－18px之间

英文可以偏小一些 10px－16px，再小识别性就不是特别好了，中规中矩，经典通用。

中易宋体

Win最常见的字体，小字体点阵，大字体TrueType，但是大字体并不好看，所以最好别做标题。

微软雅黑

大段的微软雅黑字体排列略显厚重，如果是在网页上长时间浏览，会让人的眼睛产生不适。相比而言，衬线字体装饰性强，具有易读性，所以宋体更适合知乎网站这种大段文字网站，微软雅黑给人的感受包括平和、干净、简单、平静、专业。

华文细黑

Mac下的默认中文。

英文

Helvetica:

被评为设计师最爱的字体，Realist风格，简洁现代的线条，非常受到追捧。在Mac下面被认为是最佳的网页字体，在Windows下由于Hinting的'原因显示很糟糕。

Arial:

Helvetica的「克隆」，和Helvetica非常像，细节上比如R和G有小小差别。如果字号太小，文字太多，看起来会有些累眼。Win和Mac显示都正常

Lucida Family:

Lucida Grande是Mac OS UI的标准字体，属于humanist风格，稍微活泼一点。Mac下的显示要比Win下好。

Verdana:

专门为了屏显而设计的字体，humanist风格，在小字号下仍可以清楚显示，但是字体细节缺失严重，最好别做标题。

Tahoma:

也是humanist风格，字体和Verdana有点像，但是略窄一些，counter略小，曾经是Windows的标准字体，Mac 10.5之后默认也有安装。

Verdana：

是一套无衬线字体，由于它在小字上仍有结构清晰端整、阅读辨识容易等高品质的表现，因而在1996年推出后即迅速成为许多领域所爱用的标准字型之一。

Georgia:

基本上适合正文屏显的衬线字体，非Georgia莫属了。笔画粗重，衬线明线，轮廓较大，小字体显示也很清晰，同时细节还算OK。

有些偏艺术类的网站的大字会使用lobster。更艺术的网站就搜索free font，或者font freebie吧

Trebuchet、Georgia、Times New Roman、Arial、Lucida等字体在26px或更大像素时效果是比较好的，非常适合作为正文的标题。

网页banner字体

网页banner的字体选用方法是要根据banner的主题，去挑选字体，因为字体本身也是有性格的

第一类，稳定型（协调，齐全，稳定，高质）

微软雅黑、冬青黑体、宋体、华文细黑、方正正中黑、方正兰亭系列

第二类，刚硬，锐利，清晰，强烈

造字工坊力黑体、造字工坊版黑体、造字工坊劲黑体、张海山锐线体、华康俪金黑、蒙纳超刚黑体（更适用大气，热烈，权威，声明等主题）

第三类，轻松，手写，可爱，童趣，亲切

方正经黑、华康海报、汉仪小麦、方正稚艺、新蒂下午茶、汉仪歪歪体、新蒂小丸子（适用于，游戏娱乐活动海报，h5广告页面，儿童／女性主题）

第四类，灵动，清新，秀雅，精致，古韵

方正清刻本悦宋简体、方正宋刻本秀楷体、方正宋刻本、秀楷体、汉仪全唐诗、简康熙字典体、祥南行书体、造字工房、刻宋（适用于复古，典雅，传统，品质，灵动等主题）

特殊字体或艺术字体的设置。

如果你需要用一种特殊的字体来体现你的风格，那么特殊字体或艺术字体最好以图片的方式置入网页。需要用这种字体的地方用图片代替，以保证所有人看到的页面是同一效果。

web端及移动端原型设计规范

1. 端口类型：

目前需设计的端口主要有：web端（即网页）、移动端（APP、小程序等移动设备）、IPAD（IPAD是一种移动设备，但也有自己特定的尺寸）、智能设备（例如智能电视、智能手表等等）。

由于我更多接触的是web端和小程序端口，后面会以这两个为主。

2. 网页端：

目前市面上显示器屏幕尺寸为19-21寸，屏幕分辨率大概在1280px*800px—1440px*900px之间，前端工程师在写页面时，宽度一般设为1180px—1220px（当然，这个宽度也不是绝对固定的）。

因此在做产品设计时，设计web端产品，宽度会设为1400px作为容器，位于容器上方再画一个1200px的矩形，内容区域的容器。（PS：内容区域的矩形需与底部容器左右间隔10px，作为留白）可能有人会问，为什么要划出一块内容区域？

3. 内容区域的上方容器：

首先，我们要知道，容器决定产品的边界。按照市面上显示器的分辨率，前端页面可展示的内容区域，平均宽度在1200px，预留出来的空白部分，是为显示器较大的人群考虑的：屏幕越大，可展示的区域也越大，超过产品本身内容可展示区域的话，会自动留白。

另一方面，为保证开发团队宽答的成员可查看完整的原型图，我们需考虑下他们电脑屏幕的分辨率可能为1280*800px。

稍稍总结下，就是跟随大多数人的屏幕尺寸大小，以及方便开发团队查看。

4. 移动端：

常见的移动端多是手机，基本上整个手机都是屏幕既是容器也是内容可视区。常用字体14px，最小字体一般是12px（你懂的，手机屏幕小，字体太小用户也很难看清的）。

上图是我个人画线框图的习惯，并不是标准，只是提供个参考给大家。各个区域的底色，也只是为了便于自己区分，实际上底色并没有什么特别多的要求。至于字体，一般都是使用14px的字体。

5. 个人习惯与规范：

产品在原型设计上还是有很多规范的，只不过我就职的企业并没有太多要求，但基本也算通用了，具体情况还是看看自己企业内部有没有什么特别的要求。

上述的设计规范仅限于个人习惯，也是非常基础的部分。如果有别的见解也可以一起分享。像容器内，各类原件的一些规范，后续也会慢慢整理出来。

什么是UI设计,什么是UX设计

UI设计与UX的说明如下：

UI设计中的“UI”代表“用户界面”。用户界面是应用程序的图像布局。 它由用户点击的按钮，阅读的文本，图像，滑块，文本输入框， 以及其他所有用户可以与之交互的项目组成。 这包括页面布局，过渡，界面动画和每一个微小的交互细节。任何类型的视觉元素，交互细节或动画都必须经过精心设计。

“UX”代表“用户体验”。用户对应用程序的体验取决于他们如何与程序进行交互。 体验是否是流畅而直观，还是复杂而困惑。浏览应用程序时是否感觉符合逻辑，还是完全摸不着规律。在与应用程序交互时是否让人们感觉到他们有效地完成了他们想要实现的任务，还是说感觉过程很艰难。用户体验取决于用户在与UI设计者所创建的用户界面元素进行交互时的难易程度。

想要了解更多关于ui与ux的相关信息推荐选择Pixso协同设计。Pixso自带组件变体、自动布局等专业设计工具，支持UI/UX设计和原型播放，一体化完成高保真产品设计，直接拖拽使用自带的设计资源库，还可以将项目中常用的图标、自制组件一键保存，共享至团队资源库，省去大量重复劳动，形成统一视觉规范。