结构化的内容优先：在不考虑平台和设备的前提下进行思考

发布：2021-12-13 13:33:34 浏览：2402

  有意识地忽略我们的最终目标，同时专注在我们在哪里和我们确实需要从哪里开始，这会给我们提供最大的灵活性。在互联网上最大的问题之一就是技术对决策的影响甚重。设备的性能决定了这些功能是否能实现。内容管理系统甚至在决定设计什么应用或者是为谁而设计之前就已经选择好了。就好比先声明了，“我们想用HTML5。"人们总是会关注技术，这是很自然的。毕竟技术具有很大的吸引力和乐趣。互联网技术就好像玩具、工具、某种材料，好像“所有人”都在使用它。我们看到很酷的demo,，, 然后思考他们都是用什么技术实现的，而不是让问题引导我们找到正确的技术方案。我们忘了这些demo只是出自制作demo的技术人员之手。如果你在一个重新设计的项目里，这才是真实世界，你必须得制作能够起作用的东西。酷炫当然很好，但前提是它能起代用并且解决问题。这里的关注点更多放在解决方案上而不是问题上。我们需要暂时变成悲观主义者，把注意力放到问题上，热切地关注它们，让它们孵化。对于那些商业价值与互联网技术紧密相关的产品，答案甚至会在洗澡的时候出现。

1. 内容清单

这有一种关于内容的思考方式可以帮助设计师(和他们的客户)关注那些对项目真正重要的事情。到底什么才是真正重要的事情呢?其实无论什么情况下，真正重要的都是网站或者应用程序的基础内容和基础功能。暂时忽略平台和浏览器，集中精力思考产品为什么是这样。我们把这种方式叫平台和设备无关的产品思考。因为那个时候我们还不需要关注这些事，我们还是来想想基础内容和功能点吧! 通常，提问可以帮助我们进行批判式的思考。1.为什么用户会在第一时间使用这个网站?想出好的理由... (没有说服自己)，想出更多的理由，然后打磨这些理由，- -定要是真实的理由。2.如果世界上只存在一种浏览器，并且仅支持HTML，缺省的样式、所有的功能都由服务器提供，那么最终你会提供怎么样的内容和功能?换句话说，用户会在这里看到什么，用到什么？回答上面的两个问题，我们把这个叫做内容清单。因为加入内容清单的每一部分内容和每一个功能都需要通过目的性测试，它必须有效支持你给出的第-个问题的答案。当你完成了(这需要花费一些时间，但是对于你的项目来说却是一个里程碑), 仔细阅读你给出的结果。它会对你说: " 我在这里"。在这一章里，我们将会对常见的Web设计开发流程作微妙(和不微妙)的改变，使之更加具有前瞻性。我们会认识到如何将这种新流程用到一个小项目中去。这个项目很小，目标并不复杂。它的目的只是大致说明如何将理论用于实践，而不仅仅是作为研究案例。你可以尝试着把这些技术部分或全部作用于你的项目，使用那些对你有用的，改变或者放弃那些没用的。我在这个案例中，和我一样可以收获到很多东西。

2. 一个案例：“3个小盒子“

我们正在制作- -个可以教开发者cCSS 自适应盒模型布局模块的网站，一个在多平台领域有很大发展潜力的比较新的布局模块。关键是让解释和例子做到傻瓜式的简单。因为大多数cCSs属性可以通过渲染文本和模块得到解释，让我们称之为我们网站的“三小盒子。”最终，我们可能扩大的课程，包括其他Css模块。‘三小盒子”，将包括理论和语法，以及一些练习，每一-个都建立在上述练习的理念上。用户将能够编写代码在页面编辑器，会有地方显示其结果代码。点击“ 运行"按钮将运行输入的代码。每个练习有两种文字内容的类型:理论和作业。理论解释语法和概念，作业是学生完成的练习。
让我们对内容清单进行头脑风暴:

1. Logo
2. 全局导航
3. 介绍文字（仅在主页上）
4. 代码编辑器（仅在课程页）
5. 结果区域（仅在课程页）
6. 进度栏（仅在课程页）
7. 理论文本（仅在课程页）
8. 练习文本（仅在课程页）
9. 课程导航（仅在课程页）
10. 登录形式（仅在主页上）

我们将有两种类型的页面
·主页（介绍性文字和注册表单）
·课程页
这么多了。 显然，这个网站是非常简单和不完整的， 但它足以作为一个例子。在这里我们省略了很多东西(个人资料页、对课程完成后统计信息等)。在一个大型网站中，内容量可能是巨大的并将可能被拆分为几个。但请记住，这不是一个功能规格说明书。我们不必列举每个项目内容的每一个细节。我们把内容拆分成具有价值的几个独立的大集合。我们通常会给每个项目的内容指派序号或ID。因为我们的例子很简单，我们通常会给每个项目的内容指派序号或ID。因为我们的例子很简单，我们文本文件就可以做到，不过你可以把它做成你喜欢的各种花哨样子。关于内容清单最棒的是，它从来没有失效过。任何情况都是这样。“客户可以大叫任何他们想要的，你可以把它记下来。我们可以足够快地发现什么起作用，什么不会。

3. 内容参考线框

我们中的许多人在Web设计项目(但愿是在内容清单之后)的第一步就是创建线框图。线框图，现在可以说主要是交互设计师在输出，已经从简单的图纸上的线框变成成熟的网页设计,比起最终设计只是缺少色彩图像和细节。原先，他们通过这些方法来设计模块位置、距离、层次结构以及需要优先的部分等。内容用粗线框来表示。一些设计师仍然使用这种方法，但是对于更多人来说，他们的目标已经改变了。
如今，线框图更多是用来作为一种交付件向客户展示网站看起来是什么样，以及它在“设计稿”完成前它到底是怎样运转的。事实上，这种类型的线框图就是设计稿;只不过它们是未完成的状态，同时把这样的相框图给客户看是有一定潜在危险的。如果说客户只喜欢其中的某些部分，一-些其他的细小的偏差(比如字体、颜色等)会把它们掩盖掉。另外如果说客户不喜欢这个设计，那么接下来就是更多的艰辛工作。这种很早之前的线框图更接近于现在传统图形设计师作的简图。很多的简图可以快速制作，允许对那些起作用的内容和不起作用的内容做足够的研究。视觉设计师只需要关注在哪些地方需要重点突出，哪些地方要注意协调统一就好了。这种类型的线框图对于他们而言是一种工具，而不是给顾客的交付件。不是说我们不需要这么早就把客户卷入进来，而是说我们首先得给这个过程提供一个模糊的蓝图，而不是直接让他们认可我们的工作。当客户和你一起走完设计流程， 认可设计方案当然不成问题。