版权申明:本文出自“设计师布丁”原创,感谢“设计师布丁”的原创文章分享!
FEVTE编注:更多平面设计理论学习请访问飞特网平面设计理论知识栏目,地址:https://www.fevte.com/plan/shejililun/
在了解网页设计规范之前,我们先简单了解网站的分类,网站的分类按对象划分可分为 To C端和 To B端两种:
To C端是面向用户和消费者,所以设计上一定要可以吸引人,并且以用户为中心考虑体验设计。
To B 端是面向商家和专业人士,因而TO B与 TO C端在设计上是大相径庭的, To B 类网页最重要的是效率而不是体验。
因互联网的发展,现今对网页设计的要求也提高了,所以有个自己的设计规范会使设计简洁而高效。根据本大宝贝的设计细节,相信你很快就能与大神比拟了,哈哈哈哈,开个小玩笑,下面咱们就从尺寸、字体、图片、颜色等方面来开展深入探索喽!其实设计规范就是把主要页面的元素固定成统一元素即可。具体来说一个产品的设计规范应该有:字体规范、主体色规范、图表规范、图片规范等不同分类。今天我们就先来了解to c设计规范,后期会出TO B的设计规范 !
一、网页尺寸
1.网页的布局主要有两种:左右布局和居中布局。布局不一样使设计的空间也不相同。
⑴、左右布局,灵活性强,UI限制小;左右通栏为导航栏,宽度没具体限制,可根据实际情况调整;右侧为内容板块范围,是网站内容展示区域。
⑵、居中布局,中间的深色部分为有效的显示局域,用于网站内容的展示;两边留白没实际用图,只是为适配而存在
2.当前最流行的分辨率是1920px*1080px的,所以建议创建网页尺寸为1920px*1080px,页面中心区域常设置为1200px(或1000px -1400px区间),以这个尺寸来设计相对标准。每个屏幕的高度约为900px。为什么是900px呢?因为1080还要减去浏览器头部和底部高度,大约就是900px了。
2.文字
网页中字体也是有使用规范的,合适的字体大小才能展现出最完美的效果(1920px*1080px分辨率下)
那些漂亮的网页设计,它们都是用的什么字体的?
网页设计字体的选择可以根据企业调性去挑选字体的,因为字体本身也是有性格的,为了方便大家使用,我把网页设计中经常用到的字体,希望能给新手一些指导,有自己的一套用字方法,那当然是极好的
说完字体咱们该说字体的字重、字号、行高、字间距、行间距、段间距了、字体颜色。
字号:
正文:12px-18px之间
12px是应用于网页的最小字体,适用于非突出性的日期,版权等注释性内容。
14px 则适用于非突出性的普通正文内容。
英文可偏小些 :10px-16px
导航栏字体:一般在14px-18px区间,最大不超过18px,禁用加粗
整站文字:12px-36px区间
某一个网页的规范:
网站的字体大小并没有硬性规定具体的字号,根据实际情况可以酌情考虑,但是要使用偶数字号。
1、字体规格也不需要太多,最多使用三种混搭,当一个页面中使用的字体超过 3 种时,会给用户带来"不专业"、"没有权威性"、"没有层次结构"之类的感觉。
2、层次的区别,可以改变字体颜色或加粗来体现。
3、字体优先使用各操作系统默认的字体。字体选择有版权、笔画严谨、清晰可读、经典。
字体间距
相邻两个文字的间距,其实不需要太过介意,除了特殊的需求之外,都可以使用默认数值的间距。
行间距,推荐以 字体大小的1.5-2倍 作为参考;
段间距,推荐以 字体大小的2-2.5倍 作为参考。
即,当用14px 的字体时,行间距:21px-28px;段间距:28px-35px。
字体颜色
主文字颜色,建议使用 公司品牌的VI颜色,可提高公司网站与公司VI之间的关联,增加可辨识性和记忆性。
正文字体颜色,建议选用 #333333到#666666 之间的颜色。
辅助性的,注释类的文字,则可以选用#999999之类的比较浅的颜色。
如果,你对颜色驾驭能力比较强,你也可以选用 偏公司VI颜色的深色,作为正文字体颜色或者辅助性文字颜色。
例如公司的品牌色是蓝色,那么,正文字体就可以选用偏蓝的深色。
这样处理之后,文字就带有了环境色,网站整体色调将更加和谐。
以上皆是个人拙见,有不同意见的我们可以相互交流(*^▽^*)
飞特游客
委托设计