title: Web 设计 category: page slug: web-design sortorder: 0410 toc: False sidebartitle: Web 设计 meta: Web 设计能为你的 Python Web 应用创造超凡的用户体验。到 Full Stack Python 上了解更多 Web 设计的知识。 authors: haiiiiiyun.github.io updated: 2016-06-18 10:30

Web 设计

Web 设计就是使用 CSS 和 JavaScript 来创造 Web 应用的风格和用户交互界面。

为什么说 Web 设计很重要？

你不会喜欢使用看起来像下面这样的 Web 应用吧？

没有 CSS 和 JavaScript 的 HTML 页面。

创建具有自有风格和交互性的 Web 页面，以便用户能更加容易完成他们的工作是现代 Web 应用创建过程的主要任务。

响应式设计

将内容和显示规则分离，使得设备能根据诸如屏幕大小和设备类型等不同的因素呈现不同的输出内容。基于不同的屏幕参数来显示不同的内容的技术，通常被叫作 响应式设计。响应特性是通过在 CSS 中使用 媒体查询功能 实现的。

例如，移动设备没有足够的空间将导航栏显示在页面的侧边，因而它通常将导航栏下推，显示在主要内容之下。 Bootstrap 上的 Blog 例子 演示了这个效果，当你改变浏览器的宽度时，导航栏会重新定位。

设计相关资源

  • Web 设计仓库 是一个一站式服务的网站，上面有博客、播客、灵感、教程和工具等与 Web 设计有关的各种链接。

  • 前端指南 是一篇讲述 HTML、CSS 和 JS 最佳实践的文章。

  • 如何使用颜色 这篇精彩的文章来自一位专业设计师，讲述他对颜色的理解以及如何使用颜色来实现他的设计中的某个特定效果。

  • Bootstrapping 设计 这本书是我迄今为止读到的有关学习设计的最清晰简洁的资源了。特别推荐给那些感觉自己没有设计才能但又需要学习设计的人。

  • 学习设计原理 就如何根据特定的规则如轴、对称性、层次和节律等来思考设计给出了清晰的讲解。

  • Kuler 是一款来自 Adobe 的辅助取色器，能帮助你在设计中选取颜色。

  • 如果你想了解浏览器的工作原理，这里是 关于如何创建浏览器引擎的系列文章，它会向你展示了如何创建一个简单的渲染引擎。