WEB网页设计规范
2019-02-13 10:33:55
陈志新
  • 访问次数: 536
  • 注册日期: 2016-11-23
  • 最后登录: 2019-04-23
  • 当前积分: 11346
  • 门派等级: 无门派

时时彩后一稳赚技巧: 一、网页尺寸 

2017我被时时彩害死了 www.z61ld.com.cn 制作网页时,我们选用的分辨率是72像素/英寸,使用的画布尺寸1920px*1080px。 

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

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

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

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

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


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

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


目前主流电脑屏幕尺寸有以下几种:



二、网页字体 

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

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

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

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

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

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

四、字体颜色 

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

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

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

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

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

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


五、首屏内容 

做网页设计时,你还要特别注意网页的首屏内容,在构图和内容呈现上,首屏??榈纳杓浦凉刂匾?。 

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

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

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

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



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

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

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

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

六、响应式布局设计 

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

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


对页面进行响应式的设计实现,需要对相同内容进行不同宽度的布局设计,有两种方式:桌面优先(从桌面端开始向下设计);移动优先(从移动端向上设计); 

无论基于哪种模式的设计,要兼容所有设备,布局响应时不可避免地需要对??椴季肿鲆恍┍浠ǖ币趁婵矶确⑸浠某叽绶段Ь褪橇俳绲愕母拍?。所以做响应式设计时我们需要知道每一个尺寸的宽度范围在多少时我们就可以制定出相对应清晰的一个临界点,制定了临界点之后就知道,当屏幕的宽度范围位于哪一个点的时候,我们的页面信息该如何展示。) 

我们通过JS获取设备的屏幕宽度,来改变网页的布局,这一过程我们可以称之为布局响应屏幕。 

常见的主要有如下几种方式: 

1、布局不变,即页面中整体??椴季植环⑸浠?,主要有:




2、布局改变,即页面中的整体??椴季址⑸浠?,主要有:


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


  • 生活的印记文章中国国家地理网 2019-04-23
  • 九个字带您感知十九大报告的民生温度 2019-04-23
  • [酷]比西方国家的预约排队制要高明多了! 2019-04-23
  • 爱美TV 带你种草林心如张俪同系列雅萌美容仪 2019-04-22
  • 五莲县政协举行庆改革开放40 周年书画展 2019-04-22
  • 全市公安机关打掉30个涉黑涉恶犯罪团伙 2019-04-21
  • 移植2胚怀5胎 一针减3化风险 十堰市人民医院再创生命奇迹 2019-04-21
  • 【互动话题】我为两会建言献策 2019-04-20
  • 青年创新前沿论坛在海淀创业园成功举办 2019-04-20
  • 苹果看好低价款iPhone X:配备LCD屏 2019-04-19
  • 一只浣熊都这么努力,你还有什么理由不上进! 2019-04-19
  • 彭湃:“农民运动大王”(为了民族复兴·英雄烈士谱) 2019-04-19
  • 买房先下手为强 西安这些不限购楼盘免去购房资格困扰 ——凤凰网房产西安 2019-04-18
  • 淮南老市政府大院已更新改造 未来将变身街边广场 2019-04-18
  • 证明“你爸是你爸”背后的甩锅逻辑 2019-04-17
  • 272| 199| 858| 686| 771| 692| 720| 275| 338| 185|