每人每天仅限5票，快给你心仪的作品鼓励的一票。
投票
0.0°
百度了那么多WEB设计规范，还是不会设计？戳这里，不求人，网站设计规范尽在你手......
最近在设计群里，看到有人问WEB的设计规范，起初是有点好奇的--现在啥不会不都是先找度娘来一波，不会了再问人？带着不解的心理茜茜自己百度了一波后，才发现原来很多《WEB规范》都比较杂且迭代很慢，尤其现在流行移动端的设计，WEB端的规范似乎被冷落，但是不管怎么流行移动端，WEB端的设计也是不可小视的。今天茜茜就整理一下，这几年自己设计网页的经验，算不上是什么规范，一个经验总结吧~
网页的设计比较灵活，由于布局不同，会产生很多种设计方法。但最基本的都离不开这几点：网页尺寸大小、页面构成、常用字体、字号大小、配色、图片比例的统一、事件状态等。
目前我最常用的画布大小就是1920*1080px，可设计内容区域宽为1170px，高不限制、我这个主要是为了做响应式的（分了12栏，左右各留白30px，栏宽65px，间距30px），适用于前端哥哥使用的Bootstrap框架。大家做的话，可与前端工程师沟通，根据不同的情况，画布可以保持不变，可视内容区域宽在960-1200px就行了。当然有一些网站的可设计内容也会超过1200px，所以如果没有特殊要求的话，就按照常规的来就好了。有一个小细节需要特别注意的哦，设计网页时PS画布里的的1像素就等于网页上的1像素。所以，当按Ctrl+1看到的画布大小跟在浏览器上展示的差不多，如果你的画布是1920px,那网页的第一屏内容高度差不多是1080px。
一般网页都由导航（header）、内容区域(content)、页脚(footer)构成。常见的导航方式有水平导航、垂直导航、文件树导航、手风琴导航、其他导航。但不管是哪种导航，常见的元素包含：品牌LOGO、菜单、搜索框、注册登录、联系方式、语言切换等，不同的网站需求不同，可自行选择。页脚一般包含：版权声明、使用协议、帮助中心、关于我们、友情链接、联系方式、二维码等。主内容区包含：轮播图、其他内容（需要根据产品需求与文案内容来定），可随意设计，主要是网站内容不同，适合自己公司的就行，没有太多规范。
字体分中、英文两大类，一般网站中常用的中文字体：微软雅黑、宋体、苹方、兰亭黑；英文字体：Arial、Sans-serif、Tahoma、Helvetica 。大家可以免费使用的字体种类比较多，中英文各选择一种即可，切记不要太杂，茜茜常用的是微软雅黑+Arial。当然，你要是觉得这些都不好看，前端哥哥也是可以自定义字体的（自定义字体的话需提供字体安装包给他们哦），前提是你用的字体最好是买过版权的，否则会吃官司的哟~（题外话，俺们公司就被某正给告了）
这个也是大家比较关心的一个话题了吧，目前浏览器上系统能识别的字号最小为12px，小于12px以下是没有用的，茜茜亲测过哟。一般正文标题字号大小，茜茜会控制在14-18px之间（这是常规网站的，针对不同用户，字体可以适当修改哦），如果我导航栏的字体用了16px，正文字体标题也会用16px，正文字号则是14px。一个原则，导航栏与正文标题字号保持一致，正文字号比正文标题字号小2个像素，字号大小最好是整数哦，理不清的看下图：
WEB端配色需要跟同款产品移动端的配色保持一致性，一般也是分为主色、辅助色、基础色。这里我就不多讲啦，之前在讲移动端设计规范的时候说过，详情戳这里哟http://mp.weixin.qq.com/s/TsZMAOAelTJDZfEMKSW_og
同一元素的图片在不同终端，或者是在同一终端的不同位置上都要遵循一个原则，元素图片的比例要保持一致，不然后期运营起来，图片是会变形的。拿《UI中国》举个列子，例如在WEB端首页看到的作品或文章封面图的图片大小是280*210px（紫色框框里的图，红色框框里的图则为轮播图的尺寸），而我们上传作品或文章的封面图大小是560*210px，这就刚好是2倍的关系，到了其他页面封面图片的大小一定得按着这个比例或者接近此比例且最大尺寸不能超过560*210px，否则图片会失真，在设计《UI中国》移动端时，作品或者文章封面图的图片大小也得保持一致。
什么叫做事件？就是用户在浏览器中触发元素的一个动作，比如当用户点击元素时启动的那一瞬间，就是发生了一个动作，产生了一种事件。目前WEB端常用的几种鼠标事件分别是默认、悬浮、点击，演变成我们设计的产物就是同一个元素会有正常状态（默认状态）、移入状态、选中状态、禁止状态，如下图所示：
好啦，关于设计WEB端所需要注意的事项，茜茜今天就说到这里了。以上都是个人工作小结，不同的产品也应该根据具体情况去分析的哦。如果大家还有其他地方不明白的，可以写留言也可以关注我的公众号去后台留言哟！
全部评论：6条
-
-
-
-
-
-
-
茜茜公主
2017-11-15 17:22@羽翔hj:
不好意思啦，这几天比较忙，没上网站。首先感谢你的补充哟，不过针对你的第一点，我解释下哈，根据百度统计流量研究院（http://tongji.baidu.com/data/screen）的统计，1920*1080在网页端占比是比较大的，且不说这个是不是主流，我们做设计的也会定一个画布，这个也是我的一个个人习惯，程序哥哥会帮忙做适配；2补充的挺好的，我应该注明一下，字体包应该给程序的；3的补充可能比较偏程序，我们设计做出来的话，应该只会关注原始状态（程序里default）、移入状态（hover）、选中状态这种。嘿嘿，欢迎多交流交流哟，不管做什么，人与人之间的沟通是比较重要的。 -
羽翔hj
2017-11-14 11:481、PS中所看到的高度并非是浏览器中首屏高度，因为不同浏览器导航栏等占用不同，而1920*1080目前还并非是主流； 2、字体并非啥都可以用，得要求用户电脑上安装该字体，否则需提供字体包，或在frontfamily中多设置几种备用字体； 3、鼠标触发点击等事件其实一般有四种，分别为默认default，悬浮hover，点击click，离开remove； 以上是我做的一点补充，有不对的地方还望海涵咯！O(∩_∩)O~~
更多作品
发表评论