谷歌 Web 开发最佳实践手册(0.0):创建网站内容和结构

【伯乐在线提示】:① 5月6日,谷歌开发者中心推出了一个 Web 开发最佳实践手册。伯乐在线资源频道摘编该资源后,已邀请一些关注 Web 开发的朋友参与翻译手册。② 由于译者朋友几乎都是已在职,都是在工作之余参与,每位的翻译进度会不一样(请理解),所以手册中文版不会按照英文版章节顺序发布。③ 手册中文版尚不完整,请不要转载,谢谢合作。

【导读】:内容是任何网站最重要的部分。因此,让设计服务于内容,而不是设计决定内容。在这篇指南中,首先确定我们需要的内容,然后根据内容来创建结构,接着以简单的线性布局展示网页。线性布局在宽窄视口(ViewPort)方面具有良好效果。(注:ViewPort,视口、视觉窗口,即显示区域)

本课内容:

  • 创建网页结构
  • 向网页添加内容
  • 总结

创建网页结构

确认我们的需求:

01  一块描述我们高级产品 — “CS256:移动Web开发”教程–的区域

02  一个表单,用于收集对我们产品感兴趣用户的信息

03  一段深入描述,以及视频

04  一些实际课程产品中的图片

05  一个数据表格,用来支持产品理念的信息

学习重点

  • 首先确定我们需要的内容
  • 勾画出信息架构(IA)的窄、宽视口
  • 创建内容页面的骨架图,无须样式化

我们还分别从窄视口和宽视口出发,列出了粗略的信息架构和布局。

这很容易转化成用于指导项目后续工作的网页框架的粗略部分。

查看完整示例

向网页添加内容

该网站的基本部分已经完成。我们清楚这部分及其要展示的内容,并且知道这部分在整个信息架构中的各自位置。现在,我们开始扩建网站。

注意

  • 之后添加样式

创建标题和表单

标题和注册申请表单是该页面的关键部分,必须快速呈现给用户。

添加标题仅需要几行简单的代码。

查看完整示例

我们还需要填充表单。表单简易,用于搜集用户的名字、电话、回他们电话的恰当时间。

所有的表单应该具有标签和placeholders(预期值的提示信息),以便于用户聚焦相应的元素,了解往其中应该填写的内容,还有利于协助工具理解表单结构。名称属性不仅用于把表单值传输到服务器,还用于浏览器针对用户如何自动填写表单问题上给出重要提示。

我们还添加了语义类型,使得用户能够更快、更简单地在移动设备上输入内容。例如,当输入电话号码时,拨号键盘应恰好呈现在用户眼前。

查看完整示例

相关信息

了解更多关于如何创建酷炫的表单:

创建视频和信息区域

内容的视频、信息区域稍微复杂一些,包括了一个我们产品功能的项目符号列表,还包含一个展示我们产品服务于用户的预留视频。

查看完整示例

视频通常以互动性较强的方式来描述内容,经常用来阐述一个产品或概念。

遵循最佳实践原则,你可以轻松地在你的网站整合视频:

    • 添加controls属性,方便人们播放视频
    • 添加poster图片,提供内容预览
    • 添加多个<source>元素,以支持多种视频格式
    • 当窗口无法播放视频时,添加带视频链接的文本,供人们下载视频

查看完整示例

相关信息

了解更多关于网站使用视频的最佳方式

创建图片区域

没有图片的网站会略显枯燥。有两种类型的图片:

    • 内容图片—嵌入文档的图片,用于传达其他内容信息
    • 样式图片—让网站看起来更漂亮的图片,包括背景图片、图案、渐变。我们将在下篇文章中讲述。

图片区域是内容图片的集合。这些图片出现在我们的产品中。

查看完整示例

内容图片对于传达网页的涵义有着至关重要的作用。想想报纸文章中使用的图片吧。

查看完整示例

图片设置成与屏幕宽度一样宽。这个设置在移动设备上行之有效,但在桌面程序中表现平平。我们将在响应式设计部分讲述这个问题。

相关信息

发现在内容中使用图片的最佳实践

添加数据列表部分

最后一部分是简单的表格,用于列出产品的详细统计数据。

表格仅限用于列表式资料,如信息矩阵。

查看完整示例

添加页脚

大部分网站需要一个页脚,用来展示诸如条款和条件、免责声明等内容,以及无须出现在页面的主导航或主内容区域的其他内容。

在我们的网站中,我们将链接到使用条款和条件、联系页面、以及我们的社交帐号。

查看完整示例

总结

我们已经创建好了网站的大纲,确定了全部的主要框架元素。我们确信所有相关内容已经准备妥当,以满足我们业务的需求。
Content

 

你会发现,网页现在看起来相当完美了,这是已经设计完的效果。内容是任何网站最重要的方面。我们需要确保拥有良好的信息架构和坚实的信息密度。这篇指南提供了优秀的创建网站基础。我们将在下一篇指南中为内容设计样式。

 

2 收藏 评论

关于作者:heloowird

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部