网页系统设计规范 第1篇
我们在设计字体时，需要考虑字体显示是否准确，比如英文字母的时候，最好是用 Web 安全字体，比如（Arial、Verdana、Times Roma 等）
颜色选择：设计网页时，网站需要品牌的主色调以及辅助的色调，通过这种方式排除品牌其他颜色的干扰。颜色可以分为主色、次色和点缀色等。
颜色层次：使用不同的颜色层次来区分重要信息和次要信息。例如，主色用于标题和重要按钮，次色用于次要按钮和链接。
颜色一致性：在设计过程中，我们要不断地自定义颜色规范，确保在整个网站中使用一致的颜色，然后在相同类型的组件（按钮、链接、标题等）应使用一致的颜色，保持视觉的一致性原则，避免用户产生质疑。
网页 UI 设计不仅仅是关于美学，更是关于功能性和用户体验的优化，一份全新的网页 UI 设计规范会促使你在设计中注重细节，更会引导你成为专业的设计师。好啦，以上就是我为大家整理的最新的网页 UI 设计规范，感兴趣的伙伴可以收藏起来！
网页系统设计规范 第2篇
1、网页设计是什么？
网页设计也被称为 Web Design、网站设计、Website design、WUI 等。它的本质就是网站的图形界面设计。
一个产品的设计规范应该有：字体规范、主体色规范、图表规范、图片规范等。
3、网站种类
网站的分类按对象来划分可以分为 To C端和 To B端两种。To C端就是面向用户和消费者，例如、企业网站、产品网站、电商网站、移动端H5 等，均是面向用户的产品。以用户为中心考虑体验设计。
To B端作为一个需求量很大的类别，比如电商后台、Dashboard、企业级OA、网站统计后台等这些面向商家和专业人士的网站就是 To B 类网站项目了。To B 类项目最重要的是效率，因为说白了我们在设计使用者工作的工具，我们在设计时必须首先要使用者可以高效工作使用。
每个企业都需要有一个网站来对外展示自己的能力、介绍自己的产品等。企业网站设计时通常会有网站首页、公司介绍、产品中心、公司团队、在线商城、联系我们等这几个模块，企业网站会展示很多诸如公司环境、团队成员、企业文化等实际的照片，配合一些资料进行设计。企业网站通常也追求所谓「高端」、「大气」、「上档次」的风格，也就是为了达到让消费者认同品牌这个要求。
产品网站
从苹果公司的 iPhone 介绍页到小米手机8的介绍页，我们会发现一种新鲜的产品营销模式，就是产品网站。设计这类网站的内容主要是该产品的工艺、技术、设计、特点、构造、使用场景等。这样的产品页希望可以让用户有沉浸感，所以一般来说都是使用全屏布局，产品设计必须精致、有品质感。
网页系统设计规范 第3篇
针对前面所讲的ios 系统的常用机型，几乎一种逻辑尺寸为375pt乘667pt 就可以完成设计的适配。而相对来说，ipone X 的适配处理稍微多一些细节。异形的 iPhone X 的屏幕部分的高度增加了145pt，如下图所示。
空间里利用率角度思考，与 IOS 界面的整体效果保持一致的感觉。如下图所示，竖版和横版。
而具体的适配方法要从这两块非安全区域去用心思考。由于顶部的非安全区域内不可以出现状态栏之外的内容，因此从前的状态条由20pt加长到44pt, 则意味着增加了 24 pt 。这时候导航栏的尺寸保持不变，只需整体向下移动24pt 。 这时候导航栏的尺寸保持不变，只需整体向下移动 24pt 即可。同时，状态栏背景的颜色需要与导航栏背景的颜色保持一致。
当界面顶部带有图片背景时，最简单的处理方式将顶部图片元素的高度增加 24pt。如果有 Banner 贯穿到顶部，一般有以下两种处理方式。
第一种方式是为 iPhone X 单独做一套 Banner 尺寸，拉长 24pt，并且顶部 24pt 不可放置有效的阅读消息，设计两套图，一种是正常的 IPONE 6、7、8 等尺寸，一种是 ipone X 的尺寸 下需要的设计广告图。如下图所示。
第二种方式是显示导航栏，并且 Banner 不再贯穿到 顶部显示，而是移动到导航栏下方。
显示效果缺少沉浸式的设计体验感。
说完刘海区域的适配方式之后，再来说一下底部非安全区域的适配方式。置于屏幕底部的 Home Indicator 集成了原有实体 Home 键退出与切换系统应用的功能。在适配过程中，可以更换此区域内背景的颜色、透明度与高度。底部的33pt 的非安全区域内禁止出现可操作按钮。
第1种情况，当界面底部有按钮，按钮依附在底部 34pt 的非安全区域的上方即可，非安全区域的背景色一般与操作按钮的背景色保持一致。如下图所示。
第2种情况，当界面底部没有按钮，只需让列表正常显示就可以了，无须遮挡，如下图所示。
第3种情况：在广告引导页等呈现全屏样式时，需要做两套设计稿的间距和大小的设计适配，保证好的视觉内容的展示，背景色延伸的方法就好。
界面设计中的间距思考
界面所留出的固定边距是最基础的栅格系统。如下图所示。
界面的分割规范应用在品类区的功能图标，四等分的设计，符合栅格系统的设计。规范的设计，有利于开发对设计稿的还原设计。
栅格系统中的8px 的原则
8px 原则，就是界面设计中所有元素的长度除以宽度和间距都可以被 8 整除。这里的 8px 是基于@2x 倍图格式下的切图使用的。以320dp乘480dp为@1x 逻辑尺寸，安卓系统屏幕下的部分适配尺寸。