《20xx网页设计尺寸规范》由会员分享，可在线阅读，更多相关《20xx网页设计尺寸规范（13页珍藏版）》请在金锄头文库上搜索。
1、20XX网页设计尺寸规范篇一：20XX最值得关注的16个网页设计趋势20XX最值得关注的16个网页设计趋势设计趋势每年都在改变，出于各种原因，有的设计趋势在演进中逐渐消失，有的则在大家的熟练运用过程中渐入佳境，甚至逐步褪变成为主流。作为一个专注于网页和平面设计的设计机构，我们对于所有相关的技术和设计趋势都极度敏感。通过过去一年的观察，我们可以总结出下面16大设计趋势。1.可用性设计20XX年，设计的大方向将继续向着用户倾斜。用户体验在整个设计中的权重将继续加大。如果你的设计在可用性上不足的话，再炫酷也不会有人问津。 如果不能专注地做好用户体验设计，在即将到来的20XX年，你是无法持久地吸引用户
2、的。无论是谷歌在算法上的变更，还是用户行为数据的变迁，都指向同一个方向：你的网站必须加载得更快，也必须更加易用。对于电商网站而言，加载速度的影响会更为明显，因为加载速度每延迟一秒，就意味着27%的销量流失掉了。其他的网站也类似，只不过产生的影响不尽相同。2.响应式设计时至今日，响应式网页设计不再是一个可选项，而是必选项了。移动端无疑已经是真正意义上的“第一屏”了。不同类型不同尺寸的屏幕让设计师们面临的界面是真正意义上的“碎片化”的屏幕选项，所以响应式不得不为之。对，你必须得让你的设计可用，这样一来，你就必须让所有屏幕都可以正常显示。值得注意的是，作为目前的一项铁律，如果你的网站用手机打开而无法
3、正常浏览的话，通常意味着你需要修改和调整了。在即将到来的20XX年，响应式是必须品，不存在某个尺寸或格式能够搞定所有问题，并且变得响应式的将不仅仅是网页本身，还有LOGO、Banner等所有相关元素。最值得学习的案例就是Netflix了，全面响应式的设计，让你彻底告别拉伸和马赛克。设计入侵网页设计领域网页设计早就应该向APP设计学习了，它应该更加高效，更低干扰，应该能提供定制化的用户体验。随着网络的膨胀和网络空间的饱和度的增加，设计和策划人员也开始在网页的个性化浏览上下功夫，添加更多具备“排他性”的特性。你要学会移除非必须的信息，让用户可以尽可能快地同你的网页内容进行交互。4.更智能的菜单有些
4、用户已经开始厌倦汉堡菜单和导航图标，但是这种情况仅仅只是开始，因为菜单正在进化为越来越智能。采用隐藏式导航的网页正在逐步增多，这也许很快会成为一种常态。这一设计出现的理由是，这样的设计可以让用户更少被非关键信息所干扰。但是，即使我们看不到菜单的存在，但是经验告诉我们，菜单一定是存在的，因此我们无需为此担心因为当我们需要它的时候，菜单会在合适的地方出现。专家还预测，未来的菜单可能是多方向滚动的，不过就目前而言，这并没有明确的标准，未来会有各种可能性。5. 模块和模块化文本没人会喜欢翻看文章的时候，发现导语又臭又长，是吧？那么在网页上，最好的呈现方式是提供一份简短版本的导语，然后设计前来救场：提供
5、一套模块化的布局方案。模块化设计之下，每个部分都会划分成为独立的区块，便于操作。但是这一的设计并不会显得单调，相反，它更加难于预测，它可能会将内容以更让人感兴趣、更适宜于探索的方式呈现出来。就像读杂志一样，用户的实现会从一个内容区块跳转到另外一个区块，从一种类型跳转到另外一种类型。6. 无限滚动和模块化设计这也是网页设计最近开始流行的一种玩法，模块化滚动页面设计。网页被划分成许多独立的模块，每个模块内的滚动交互独立于其他的模块。听起来太过复杂？这倒不然，实际上你可能会在某些网站中看到过类似的状况，侧边栏的滚动速度和页面正文的滚动速度不同。当然，在模块化滚动的页面中，这种状况会更加明显，特性也更
6、加显著。脑补一下，两栏式页面，两列内容单独滚动，就像下面这个案例：当然，这一切始于无限滚动这一页面设计技术，最典型的就是Pinterest、Facebook和Twitter。模块化无限滚动也是基于一个相同的假设：向下滚动总是更容易的操作，用户不用停下来点击翻页。这也难怪越来越多的用户沉迷于这种交互模式。7. Material Design实际上Material Design 的推出可以追溯到20XX年，但是它的流行真正开始于20XX年。如果你仔细观察过各个领域的设计风格的改变，你会发现 Material Design 开始大规模地出现在网页、APP甚至艺术作品当中，我们可以预见到 20XX年
7、Material Design 设计风格的爆发式流行。8. 扁平化设计严格意义上来说，Material Design 算是扁平化设计中的一个分支，它有着典型的“纸”的隐喻。广泛意义上的扁平化设计依然非常流行，甚至可以说是非常受欢迎。篇二：网页设计复习大纲20XX闭卷考试一、 单项选择题（2）二、 判断题（55）三、 简答题程序填空题（3题，15分）四、 程序填空题（52=10）五、 编程题（1题，10分）HTML（3040分）1. html基本概念标签语法 不区分大小写 html基本结构2. 文字：特殊文字（空格、换行）、标题字.3. 段落： 4. 水平线：5. 超链接： 、书签6. 图片：地
8、址：相对地址 （以当前目录为起点） img/ 、./img/ 绝对地址file/.7. 列表：8. 表格：合并单元格9. 表单： 项目1/10. div11. .12. html注释:CSS（3040分）1. CSS基本语法定义css : 选择器样式名:值;引用css: 1)行内 2)内部 p3)外部链接CSS优先级概念: 重叠；冲突时优先级高的有效（后执行的）2. CSS选择器：标签、类、ID、包含、a:link、a:visited 、E:hover body#id1.class1#top a3. 文字：color font-size font-family font-weight text
9、-decoration text-indent line-height4. 背景相关属性：background-color（ .2. 变量定义 var abc=10; str=”ddddd”3. 数据类型 p1974. 函数定义、调用 function fname fname ;5. 运算符、条件控制、循环控制6. 数组的定义、访问方式Var arrays= 10, 20 ,30 ;arrays0=7. window对象：open（） close（） alert8. 了解BOM、DOM：location/screen/navigator/history作用，DOM树结构获得页面元素、修改元素属
10、性的方法9. document对象P245：obj=getElementById getElementsByTagName。10. 能看懂对象节点属性（parentNode、childNodes、firstChild、lastChild、previousSibling、nextSibling），节点的集中操作（创建新节点、节点的插入、节点的删除和替换）代码11. 修改元素样式：=” .”=”12. 访问表单及表单元素13. 理解事件、事件处理程序 onclick=” 。” onmousexxx / onkeyxx14. javascript注释重点：制作表格、表单的使用、div浮动布局、网页中
11、图片的使用（ background）注意：程序代码上下文篇三：网页设计规范标准字体字号：中文网页一般文字正文都采用宋体12号（12px）字体，因为这个字体是系统对于浏览器特别优化过的字体。虽然12px-20px的宋体字都还能看，但是宋体12px是最漂亮的，也是最普遍应用的。黑体一般是14号，因为一般很少用黑体做正文，主要都是标题或者是关键字。黑体14px是优化过的字体。英文网页一般用11px字号，个人最喜欢的字体是tahoma与verdana这两种！特别是verdana，是最经典，最好用的字体！网页标准宽度：1、在下，宽度为显示器分辨率减21，比如1024的宽度-21就变成1003；800宽-
12、21=779。但值得注意的是无论你的网页多高都会有右侧的滚动条框。2、在Firefox下，宽度的分率辨减19。比如 1024的宽度-19就变成10053、在Opear下，宽度的分率辨减23。比如1024的宽度-23就变成 1001（注：Firefox或Opear在内容少于浏览器高度时不显示右侧滚动条。）所以如果是1024的分辨率，你的网页不如设成1000安全一点。如果是800的分辨率一般都设成770。这些需要明白并且牢记,不然很可能做出来不符合浏览器要求,不过一般我们都回设定的再稍微小一点,应为有些浏览器加了插件或者其他的东西宽度会有变化所以800的分辨率一般设定760左右,1024的设定99
13、0左右。在这个显示器百花齐放的时代，网页设计师往往需要考虑不同客户端的浏览体验。文字大小，是用户体验中的一个重要部分。不同的分辨率，不同的显示器尺寸，不同的DPI，乃至不同的浏览器设置，都会对最终展现的文字大小带来影响。虽然现在很多浏览器已经可以方便地缩放页面，但用户每次光临都要重新缩放，总归麻烦，何况还有许多用户不知道如何缩放页面。最好还是根据用户的分辨率给用户一个比较体贴的默认字号，那这个字号多大合适呢？12px？14px？15px？16px？还是压根就不应该使用px这个单位呢？问题的根源，在于屏幕上的一切字号单位（px，pt，em）都是相对单位，单凭它们并不能确定文字的实际大小。何况人对
14、文字大小的根本感知在于眼睛的视角，这不仅取决于文字的物理尺寸，还取决于它到人眼的距离。物理尺寸首先假定一个我们希望达到的文字物理尺寸，例如设定为17寸1280 * 1024显示器上的16px，计算可得它的高度约是，我们计划让网页文字在大部分显示器上都比较接近这个大小，那么在不同分辨率下应该显示成多大的字号呢？第一步：统计用户主要的分辨率和对应的屏幕大小。要在物理尺寸和分辨率之间换算，首先要统计分辨率和对应的屏幕尺寸。用户分辨率的分布情况可以从网站的统计日志里获得。由于每个分辨率设置可能对应好几个不同尺寸的屏幕，而屏幕尺寸又无法通过网页获得，只好对现在的显示器市场进行统计分析：针对某一分辨率，统计可能的屏幕尺寸范围，从最小到最大，相对主流的是多大（或使用该范围的中间值作为主流尺寸）。如下图所示电脑显示器市场（产品种类繁多，难免挂一漏万，数据仅供参考）第二步：计算每个分辨率主流屏幕尺寸的物理宽度现在的显示器长宽比不仅有4：3的标准屏，16：10的宽屏，还有更多不规则比例，为了在不同长宽比的显示器之间进行比较，统一使用横向分辨率来统计。用主流尺寸和长宽比
