2024年web网站设计准则 篇1
WEB端
必备元素：logo、menu（导航）、banner（动效【flash、H5】）、内容区（新闻、企业简介、产品展示...）、版权信息（版权所有、联系方式）
可选元素：搜索、电话、在线客服、流量统计...
用户体验习惯：左：浏览区域、列表区域
右：功能区域、内容区域
字体：最小12px，最黑#333333
字体12 px、14px、16px效果选择无，其他字号则用锐利、犀利、浑厚等
标题部分字体：14px~24px（尽可能采用雅黑）
正文部分字体：12px、14px（雅黑或者宋体），字行距一般为1.5~2倍之间。
尺寸规范：在分辨率1024px*768px的情况下，满屏宽度为1003px，通常定义可视范围为920px~1000px之间。常见：宽960px、980px、1000px，一屏高度650px。
UI方面
iOS
iphone字体、字号标准
字体：中文：苹方 ； 英文：旧金山
字号：正文最小24px ； 常驻栏icon20px
Andriod
字体：中文：思源黑体 ； 英文：roboto
字号：注释最小：24px ； 文本：28px ； 文章标题或图标名称：32px ； 导航标题：36px（在这里为720px*1280px的尺寸下设计规范，注：1sp=2px）
界面尺寸
图标尺寸
以上内容希望可以帮到你！
2024年web网站设计准则 篇2
零基础自学前端的过程中看书是必不可少的，多看书能帮助你打牢基础、稳固根基，有很多人问我前端工程师需要看一些什么书?尤其是零基础自学前端的新手，今天我就整理了一份书单推荐给大家。
1、《Web前端开发最佳实践》
本书主要讲解了html、css、JavaScript以及移动端开发的最佳实践方案，能够对缺乏良好指导的开发者产生很大的帮助。通过阅读本书我们可以掌握如何编写高可读性、高维护性、高性能的html、css以及JavaScript。
作者简介：党建，资深Web前端开发工程师。精通HTML、CSS、JavaScript等前端技术，对ASP.NET、Node.js等Web开发技术也有深入的研究。
2、《css那些事儿》
本书通过页面中的文字、图片、表格、表单等常见元素的处理及各种页面布局方式的使用，使读者能深入了解到如何在页面中更好地运用css布局。尤其是在页面布局的部分中，全面分析了多种布局方式，着重分解了两列等高和三列等高的几种方式，并相应说明了等高布局的优缺点。
作者简介：林小志，蓝色理想经典论坛标准版荣誉版主。多年网站设计和网站重构经验，对CSS、XHTML等前台技术有着深厚的功底。
3、《css权威指南》
本书通过诸多示例，详细讲解了如何做到仅在一处建立样式表就能创建或修改整个网站的外观，以及如何得到html力不能及的更丰富的表现效果。同时展示了如何遵循css最新规范(css2和css2.1)将层叠样式表的方方面面应用于实践。
作者简介：Eric A. Meyer是国际公认的 HTML、CSS和Web标准领域的专家，是Complex Spiral Consulting公司的创始人，还是微格式运动的发起人之一，以及设计领域系列会议An Event Apart的创始人之一。
Estelle Weyl是开放Web布道师和社区工程师，从1999年起就开始开发符合标准且具有可访问性的网站。
4、《CSS禅意花园》
全书分为两个主要部分。第1章为第一部分，讨论网站“CSS禅意花园”及其最基本的主题，包含正确的标记结构和灵活性规划等。第二部分包括6章，每章剖析“CSS禅意花园”收录的6件设计作品，每章介绍的作品围绕一个主要的设计概念展开，如文字的使用等。通过探索36件设计作品面临的挑战和解决的问题，读者将洞悉主要的Web设计原则以及它们运用的CSS布局技巧，理解CSS设计的精髓，恰当地处理图形和字体来创建界面优美、性能优良且具有强大生命力的网站。
作者简介：Dave Shea是一位图像设计师，“CSS禅意花园”网站的创始人和耕耘者，该网站获得了很多奖项，其中包括SouthWest Interactive会议授予的“Best of Show”。
5、《JavaScript高级程序设计第三版》
全书从JavaScript 语言实现的各个组成部分——语言核心、DOM、BOM、事件模型讲起，深入浅出地探讨了面向对象编程、Ajax 与Comet 服务器端通信，html5 表单、媒体、Canvas(包括WebGL)及Web Workers、地理定位、跨文档传递消息、客户端存储(包括IndexedDB)等新API，还介绍了离线应用和与维护、性能、部署相关的最佳开发实践。
作者简介：Nicholas C. Zaka丰富的Web开发和界面设计经验，曾经参与许多大公司的Web解决方案开发。
6、《锋利的jquery》
本书循序渐进地对jQuery的各种函数和方法调用进行了介绍，读者可以系统地掌握jQuery的DOM操作、事件监听和动画、表单操作、AJAX以及插件方面等知识点，并结合每个章节后面的案例演示进行练习，达到掌握核心知识点的目的。为使读者更好地进行开发实践，《锋利的jQuery》的最后一章将前7章讲解的知识点和效果进行了整合，打造出一个非常有个性的网站，并从案例研究、网站材料、网站结构、网站样式和网站脚本等方面指导读者参与到项目建设中来。
作者简介：单东林，曾经拥有一个著名的网站cssrain.cn，后来因不可抗拒力而关闭。通过本书继续为国内前端开发做贡献。
7、《Head First JavaScript》
本书语言和版式活泼，内容讲解深入浅出，是难得的JavaScript入门书。本书内容涵盖JavaScript的基本知识以及对象、函数和浏览器文档对象模型等高阶主题。书中配备了大量有趣的实例、图示和练习，让读者轻轻松松掌握JavaScript。
作者简介：Eric Freeman 计算机科学家，在耶鲁大学攻读博士学位期间，一直与行业翘楚David Gelernter一起从事研究工作。曾任迪士尼公司Disney Online & Disney.com首席技术官，目前将全部精力都投入到他与Elisabeth创建的创业公司WickedlySmart。 Elisabeth Robson 软件工程师、作者、培训师。
8、《JavaScript设计模式》
内容本书共有两部分。第一部分给出了实现具体设计模式所需要的面向对象特性的基础知识，主要包括接口、封装和信息隐藏、继承、单体模式等内容。第二部分则专注于各种具体的设计模式及其在JavaScript语言中的应用，主要介绍了工厂模式、桥接模式、组合模式、门面模式等几种常见的模式。为了让每一章中的示例都尽可能地贴近实际应用，书中同时列举了一些JavaScript 程序员最常见的任务，然后运用设计模式使其解决方案变得更模块化、更高效并且更易维护，其中较为理论化的例子则用于阐明某些要点。
本书适合各层次的Web 前端开发人员阅读和参考，也适合有C++/Java/C# 背景的服务器端程序员学习。
作者简介：Addy Osmani，谷歌Chrome团队的开发项目工程师，对JavaScript应用程序架构有着强烈的爱好。他创建了比较流行的项目，如TodoMVC，并对Modernizr和jQuery等其他开源项目也做出很大贡献。
以上书籍对于零基础入门前端来说足够了，如果有问题或者想讨论技术问题可私聊我。
2024年web网站设计准则 篇3
第一、先进、网站设计解析
所谓网站设计，就是设计者将网站的相关主题和策划内容，有效结合自身的艺术手法来进行表现，从而对访问者的注意起到极为有效的吸引力，让访问者获得一定的视觉愉悦感，从而达到网站所要传达的目的。
第二、网站设计的基本原则
一个网站在被打开的瞬间，是否能够有效达到网站设计者的目的，是否能够立刻引起访问者的共鸣和兴趣，是否能够传达网站的中心内容等，这些实际存在的问题都会对网站的运营和效果产生巨大的影响。在设计网站的过程中，总是会存在一定的设计原则。掌握这些原则对于设计网站来说具有非常重要的作用。
1、明确网站的内容
在设计一个网站的较初阶段中，要*先对网站所要表达的内容进行明确，其中包括了网站的相关功能、所面对的访问人群等等，整个网站的设计工作都应当以这些内容为主导，这样才能设计不会偏离主方向。
2、有效抓住用户
设想一下，如果用户在进入网站的时候速度过于缓慢，操作较为繁杂的话，这样的网站设计无疑是不成功的例子，所以，在设计网站的时候，有效抓住用户是网站得以顺利运营的基础条件，千万不要让用户对网站失望。
3、优化网站内容
网站所展示的内容是网站运营的核心，即便网站在其他方面的设计更加贴心，但是如果网站的内容空洞乏味，访问者要花费更多时间才能获得自己想要的内容，那这样的网站也不是成功的网站。所以，对网站内容进行有效的优化，提升访问者对网站的满意度，是非常重要的。
4、加速度下载
盯着屏幕等待页面的下载，相信这是人们较痛苦的事情。进行网站设计的时候，快速下载是设计者们不可忽略的重要事项之一，一般说来，优质网站的网页加载时间应当控制在15秒之内。
5、网站升级
对于网站的运行情况，应当时刻进行注意，当网站被更多人访问的时候，运行缓慢的情况往往会影响用户的直接体验，所以，为了能够保持网站访问者的数量，对于网站的升级一定要提前做好准备和规划。
网站的设计是网站得以有效运营并且获得良好效果的基础，掌握设计基本原则，才能在设计的过程中更好的去运用技巧，通过有效的多方融合，充分发挥网站的诸多功能，让网站获得成功。
2024年web网站设计准则 篇4
优秀网页设计的 5条原则：
1. 建站目的是基础
网站的消息传递和号召性用语 (CTA) 是支持其目标的关键。建站的目的可以很简单，如促进购买、讲述公司故事或提供教程。您应该能够用一两句话捕捉您网站的意图——想想使命宣言。
站点设计不是您应该在进行过程中弥补的东西。目的将为您提供清晰的计划并指导设计和内容创建。即兴发挥并不是实用的设计理念。
巩固网站目的的一部分是了解它是为谁服务的——您的受众是谁，他们需要什么信息，以及您的网站将如何提供这些信息？了解您的受众的人口统计数据和痛点将帮助您为您的网站找到正确的方向
2.视觉效果让人们参与其中
每个设计元素都应该反映和传达品牌的身份。照片、插图和其他图形平衡了文本并分解了网页，让眼睛从阅读中得到休息。
令人兴奋的英雄形象给人留下良好的第一印象。动画过渡和滚动触发的效果让人们移动，并将导航从无意识的必需品转变为交互式体验。无论品牌的风格如何，视觉效果都应该为设计增添活力，而不仅仅是占用空间。软件公司、快餐车和会计师都可以在保持品牌形象的同时，利用网站的图形发挥创意。
您的视觉效果应该是高质量的并且看起来不错——使用尺寸和分辨率合适的清晰、色彩平衡的照片和图形。糟糕的视觉效果会毁掉一个伟大的设计。
PithyMfweb使用可动的云朵吸引你的注意力
3.和谐
布局的每个重要元素都应该协同工作——一直到它的 HTML 和 CSS。如果对比色的超大按钮没有充分的理由不符合要求，它就会感觉不对。不协调会分散和中断用户体验。当感觉有些不对劲时，很难看到整体的伟大。同样，糟糕的用户体验会导致网站访问者跳出——损害您在 Google 中排名的机会。
一个好的设计师会让事情变得用户友好，并且知道什么字体、视觉效果和导航类型会吸引注意力。他们对如何将它们组合在一起有一个愿景。新设计师常常试图将尽可能多的兴奋塞进布局中。但是当太多的元素需要我们注意时，我们就会失去焦点。
熟练的网页设计师会考虑每个元素的重量，并且知道何时使用约束。他们知道如何创建易于导航的页面设计。这种和谐感也延伸到品牌标识上。从站点的声音和语气到调色板的一切都应该是一致的。NUA Bikes使用灰色调色板、充足的空白和稀疏的文本来将我们的注意力集中在他们的自行车上。
NUA Bikes使用灰色调色板、充足的空白和稀疏的文本来将我们的注意力集中在他们的自行车上。
4.组织统一
内容应具有逻辑性、流动性并适合层次结构。你的内容应该引导你的观众得出一个不可避免的结论，每篇文章都建立在它之前的内容之上。每句话都应该更清楚地说明您的品牌和目的，让读者在阅读时期待接下来会发生什么。
标头标签应用于构建内容并帮助网络爬虫对您的网站进行网络搜索排名。如果在开始设计之前您没有所有最终确定的内容，至少使用标题来帮助构建您正在构建的内容。
还应组织视觉元素。用补充书面内容的图像和图形定义部分。
Blue Apron井井有条的网站设计使阅读他们的食品包订阅变得简单而诱人。
5. 留白创造平衡
留白、按钮和其他视觉设计元素有助于图像和内容的突出，并使版面不至于凌乱。留白，也被称为负空间，是任何功利性设计的一个重要方面。没有它，信息传递就会变成一个不明确的圆球。
丹·马查多 (Dan Machado) 的在线作品集使用了大量的空白和粗线条。
这五个指导原则几乎适用于您将访问的所有网站。例外总是有的但了解规则可以更容易地改变它们而不会破坏您的设计。
2024年web网站设计准则 篇5
我认为有这些指导原则：
1. 系统状态的可见性。应始终通过易于理解和高度可见的状态通知用户系统操作，这些状态在合理的时间内出现在屏幕上。
2. 系统与现实世界的匹配。设计师应该努力反映用户在UI设计工作中在现实世界中发现的语言和概念。以逻辑顺序呈现信息，并依靠用户从现实世界中获得的期望。这将减少认知压力并使系统更易于使用。
3. 用户控制和自由。为用户提供可以执行后退步骤的数字空间，包括撤消和重做以前的操作。
4. 一致性和标准。界面设计人员应确保在类似平台上维护图形元素和术语。例如，表示一个类别或概念的图标在不同屏幕上使用时不应表示不同的概念。
5. 防止错误。设计系统将潜在的错误降至最低。如果消除或标记可能导致错误的操作，则可以实现此目的。
6. 承认而非召回。用户浏览界面时，在显示内维护与任务相关的信息。人的注意力是有限的，我们只能在短期记忆中同时保持五个项目。我们总是发现识别某些东西比回忆它更容易！
7. 灵活性和使用效率。随着使用的增加，需要更少的交互和更快的导航。这可以通过缩写，功能键，隐藏命令和宏设施来实现。用户应该能够定制或定制界面以满足他们的需求，因此可以通过更方便的方式实现频繁的操作。
8. 美学和简约的设计。将杂乱程度降至最低。所有不必要的信息都竞争用户有限的注意力范围，这可能会阻止用户对相关信息的记忆检索。将显示减少到必要的组件，使导航清晰可见，明确无误。
9. 帮助用户识别，诊断并从错误中恢复。设计师应该假设用户无法理解技术术语。因此，错误消息几乎总是用简单的语言表达，以确保在翻译中不会丢失任何内容。
10. 帮助和文档。理想情况下，我们希望用户无需借助文档即可浏览系统。但是，根据解决方案的类型，可能仍需要文档。当用户需要帮助时，请确保其易于定位，特定于手头的任务和措辞，以指导他们完成解决方案的必要步骤。