• 观察行业视觉 用我们专业的角度 讲出你们的心声.
  • NEWS CENTER ·
    新闻中心
    关注资讯 关注前沿
    当前位置:首页 > 新闻中心 > 网站设计

    苏州网站设计网页设计规范

    发表日期:2018/6/14 11:08:02  文章编辑:  浏览次数:43  标签:苏州WEB网页设计规范

    一 、网页尺寸

    制作网页时,我们选用的分辨率是72像素/英寸,使用的画布尺寸1920px*1080px。

    但是并不代表我们可以在整个画布上作图。

    网页的布局主要有两种,左右型布局和居中型布局。布局的不一致,使得可设计的空间也不相同。

    1、左右布局,灵活性强, UI的限制小;

    左边通栏为导航栏,宽度没有具体的限制,可根据实际情况调整;

    右侧为内容版块范围,是网站内容的展示区域。

    2、居中布局,中间的黄色部分为有效的显示局域,用于网站内容的展示;

    换句话说,两边均为留白,没有实际用途,只是为了适配而存在;

    一般网站内容显示的区域为996px;国内网站大部分还是以1000个像素为界限,因超过1000像素适合在大屏幕上浏览,小屏幕会显得拥挤。所以网站宽度在1000像素以内可以保证大部分用户舒适的浏览网页。

    二、网页字体

    字体设计的总原则是:可辨识性和易读性。

    网页的文字设计是系统默认的字体:宋体、微软黑体、苹果系统黑体,英文则建议使用arial无衬线字体

    常用的字号大小有以下几种:

    12px是应用于网页的最小字体,适用于非突出性的日期,版权等注释性内容。

    14px 则适用于非突出性的普通正文内容。

    16px、18px或者20px 适用于突出性的标题内容。

    三、字体间距

    相邻两个文字的间距,其实不需要太过介意,除了特殊的需求之外,都可以使用默认数值的间距。

    行间距,推荐以 字体大小的1.5—2倍 作为参考;

    段间距,推荐以 字体大小的2—2.5倍 作为参考。

    即,当选用14px 的字体时,行间距:21—28px;段间距:28px—35px。

    四、字体颜色

    主文字颜色,建议使用 公司品牌的VI颜色,可提高公司网站与公司VI之间的关联,增加可辨识性和记忆性。

    正文字体颜色,保险起见,选用易读性的深灰色,建议选用 #333333到#666666 之间的颜色。

    辅助性的,注释类的文字,则可以选用#999999之类的比较浅的颜色。

    如果,你对颜色驾驭能力比较强,你也可以选用 偏公司VI颜色的深色,作为正文字体颜色或者辅助性文字颜色。

    例如公司的品牌色是蓝色,那么,正文字体就可以选用偏蓝的深色。

    这样处理之后,文字就带有了环境色,网站整体色调将更加和谐。

    五、首屏内容

    网页设计时,你还要特别注意网页的首屏内容,在构图和内容呈现上,首屏模块的设计至关重要。

    除去任务栏,浏览器菜单栏以及状态栏的高度,剩下的是首屏的高度。

    Window XP的首屏高度平均值是580px,Window 7的首屏高度平均值是710px。

    综合考虑到Window XP已经逐渐退出市场,在实际操作时,我们 以710px 作为依据。

    如下图所示,蓝色区域则是我们设计时需要着重考虑的首屏范围。

    另外,是关于图片尺寸的问题。

    需要全屏显示的图片,宽度尺寸严格设计为1920px。

    但是值得注意的是,图片内容的有效范围不能超过网页内容的有效范围,即控制在1200px以内。

    避免遇到小屏幕设备时,内容显示不全,而造成信息的遗漏的情况。

    六、响应式布局设计

    响应式设计指的是不同设备、屏幕、分辨率、操作方式(鼠标、键盘、触摸),保证信息在不同环境下表现一致,保证可交互可操作。

    由于页面的宽度发生了变化,进而信息展现也改变了就是响应式设计。直到最后在手机屏幕上的显示图片信息变成了一列。

    很多时候,单一方式的布局响应无法满足理想效果,需要结合多种组合方式,但原则上尽可能时保持简单轻巧,而且同一临界点内(发生布局改变的临界点称之为临界点)保持统一逻辑。否则页面实现得太过复杂,也会影响整体体验和页面性能。苏州网站网页设计规范。

    相关新闻
    • 电话:189 1543 4568
    • 传真:189 1543 4568
    • 手机:189 6217 7230
    • 网址:www.chimaxnet.com
    • 苏州市工业园区东兴路199号联发大厦223室