设计师从未思考过的网页设计问题

【 tulaoshi.com - 平面设计 】

这绝对是一篇发人深省的好文章，推荐设计师们好好读一下。

相对于改造已具规格的网站，为智能手机重新设计网页就比较轻松。不仅如此，让人尴尬的是，在CSS获得大众认可多年后，当时缺乏远见这个问题，现在仍旧折磨着我们这些编写HTML的苦逼孩子们。

将旧的网站转换成互动设计是件很令人头疼的事情，不是因为屏幕尺寸的不同，而是因为大部分HTML文件都是在对屏幕尺寸的粗略估计下编写的。在苹果于2007年中推出iPhone之前，设计师至少可以依赖屏幕700像素的宽度(如果他们忽略可访问性)。像导航栏、两栏或三栏布局、鼠标悬停效果这样的常规布局已经完全适应了以鼠标为基础的宽屏配置了。设计师们已经按照大家的预期将左上角的logo做成可点击的了。

移动设备以两种方式动摇了大家的旧习惯。现在，我们不仅拥有小屏幕的iPhone、安卓机、电子阅读器、iPad还有其他很多令郎满目的移动设备，并且我们也要求网页去适应这些千奇百怪的设备。你想在xBox上使用CNN?可以!你想在多媒体电视机上使用Smashing杂志?就算现在没有，也快上市了。

为未来可能发生的情况设计网页，网页的布局和结构都会受到影响。我们不能控制这些电子信息将会在什么样的设备被查看。 无论多少适用于XXX设备这样的标签，也无法阻止人们将我们编写与绘制的内容进行阅读和混合。网页没必要使用12或16栏的格子，网页也不需要进行严格的分层。但是，要达到这样的境界，就必须直面使用这些布局的文物。

手机也有内容问题

假设你被一家大型企业雇佣。调查数据显示很多客户喜欢通过智能手机来浏览你的网站。这家大企业便计划要重新设计他们已有的网站。你的团队(或者你与你的合伙人)采取手机优先的策略。但是在你们开始绘制图标、布局网格、填充HTML5之前，有一个事实已经严重威胁到这个再设计项目的运行。网站的内容不只是在小屏幕上格式混乱，它在任何宽度小于960像素的浏览器上都是混乱的。

大图片在缩小时细节会丢失。

布局超过两栏的文字或者嵌套列在窄屏上都会被压缩变形。

更大范围的字体尺寸不合适。

各种异常情况交织成了复杂的问题。所见即所得编辑器会在独立的页面上增加自带的格式和布局，一段时间后，人们就会根据自己的方式来更新网站。

图：网站上变化多端的内容很难在手机的显示屏上完全显示。

一个网站拥有的页面越多，就越容易产生不同的版本。一个解决方案是不能适应所有的变化的，特别是某些针对特殊屏幕的。我们可以将不合适的页面在移动设备上分成多个页面来显示，但这也不是没有代价的。

图：将长篇内容分成多个页面后会增加获取信息的难度。

如果设计师选择多页布局而不是长条形布局，那么传统的结构则会使信息变得更难被获取。

作为一个产业，网页设计也曾遇到过类似的挑战。练习过表格布局的设计师们应该还记得之后改成可变动编码时是多令人头痛。今天，我们的想法可以超越现有的移动设备。互动设计缩小了不同实用案例的差距。但是设计师不仅可以做到应对现有的问题，他们还可以提前设想未来可能出现的问题。

如果问题是如何使内容变得适应移动设备?，就没意义了。若问题是如何使内容变得有弹性?，这样我们就一次强调了多种问题。理想的解决方案需要满足几条要求。

1. 不要为了一个新的媒介而牺牲网页内容。

我们不希望提供的网站是原网站内容缩水后的版本。

2. 注意它的实用性。

我们不希望只是单纯的缩减布局。所有内容，包括文字、图片、导航、列表，都必须易于使用。

3. 预防(或者至少最小化)类似问题的再次发生。

20年前人们还在怀疑网页存在的必要性。5年前人们还对移动版网页表示疑惑。他们明天又会有什么样的问题呢?

图：为大尺寸屏幕设计的布局往往不能轻易的移植到移动设备上。

人气值、优先级与重要性

有什么内容是值得保留的?后退一步什么是内容?

传统意义上，内容就是网页所包含的信息。但是传统也说设计师可以依赖800像素的屏幕宽度。

若想使电子信息足够灵活到可以适应移动设备(并且无论接下来将要补充什么内容)，这个网站就需要焦点。要聚焦一个网站，我们就必须找到这个网站上最至关重要的信息。

至关重要是个从各方面来说非常主观的对内容实用性的测量。它也许会采取文字、图片或影像的形式。也可能涵盖许多页面或者只是寥寥几句话。然而，这个关键的内容，却是一个网站存在的意义。内容并不填满整个网站，网站是指设计师展示内容的舞台。

然而，关键内容不是受欢迎的代名词，虽然两者有联系。人气值是大众对关键内容本身的评判。与之不同的优先级，就是网站所有者对网站内容主次的考虑。网站所有者也许认为某些信息很重要，但是如果终端用户不需要它，那它就不是关键。

图：这个虚拟银行网站图表显示了两个可疑的内容，就是员工名单和卡拉OK视频。每个柱形都显示了优先级与人气值对整体重要性的影响。

影响重要性的因素有：

时效性

网站上的信息的重要性会因为时间变化而变化吗?(比如，季节性活动，最新消息，历史上的今天，截止日期)

距离

这些信息会受到地理位置的影响吗?(例如，当地的促销，自然灾害，城市或地区性政策变更，演唱会)

范围

谁会受到这些信息的影响呢?(例如，朋友圈，特殊利益，业余爱好者，一般群众，退伍军人，新人)

规模

这条信息有多大?(例如，宽度，高度，持续时间，密度)

如果一家银行的年会视频被广泛传播，视频中的一位CEO暴露了TA唱K不着调的天赋，那视频可能会火起来，尽管那位CEO不受欢迎。但是银行也许会因为经费问题优选考虑其他内容(CEO自然会这样考虑)。类似的，一些博客喜欢将他们最新的内容置顶，但是也许过去的一些具有创意的帖子比最新的帖子更受人关注。

一些网站比如新闻网站或者博客会将关键内容放在首页。但是很多首页并不需要呈现关键内容。首页可以使用固定的内容对网站进行介绍，和帮助人们挑选网站上他们需要的内容。

内容的重要性也许会很主观，但是主次关系却不是。底线就是保存重要的信息;决定信息是否是关键信息或是人气信息;根据内容保存或者移除一些信息。

抛出网页和信息块

当电脑刚刚开始使用图形用户界面，软件工程师通过桌面这个比喻，帮助人们从实体办公转换到电子文档办公。文件夹图标代表了一组文件;文档图标仍然有一个书签样的折角(尽管它已经不被需要了)。垃圾桶样子的回收站图标也一直伴随着我们。

同样地，网页也在模仿书本或者杂志的页面。但是这样的类比不适用于现在的网站，更不必说为移动设备设计的网站。一个网页并不是信息最小的单位。相反，网站是大量信息媒体的集合，并且这些信息会被分散到不同的屏幕上(或者段落、板块、视角时间会告诉我们哪种模式更受欢迎)。

图：内容板块的整理会根据需求而变化。

内容板块也许会视情况被整理成一个或者更多页面。有些甚至在多个页面上出现;比如说导航。互动设计会处理不同元素，使得他们能够适应不同媒介。内容区块这个概念又更进一步。因为每个HTML文档(以前成为页面)可能都包含了很多区块，网页设计师可以将移动设备有限的屏幕尺寸作为一种优势。

无论是不是移动设备，网站都可能被组织成不同阶层或者其他格式。但是区块这个概念，相对与页面来说，更强调页面间的结构。由于小尺寸的屏幕一次只能呈现一个页面的某些部分，这其实可以减少混乱的状况。当出现分区空挡视觉停顿人们就会迅速的滑过这个页面。

图：内容可以通过一些间距空挡或者视觉停顿来进行分区。

没有人说过宽屏网站不能组织有空隙的视觉效果。但是移动设备有限的浏览区域使得它们更容易集中注意力。

图：一个以移动设备为标准的结构，相对于在桌面屏幕上呈现的内容，可能不需要太多分屏来显示。

传统的阶层分支是从主页(整体预览)到子页面(具体信息)。但是每个页面都是独立的。一个以移动设备为基础的结构，无论如何，更倾向于使用高挑的分层结构。6个移动设备的屏幕能提供8个桌面屏幕一样复杂的内容。

向前进

我们无法预测将来什么样的技术革新会将现在的移动设计淘汰，但是我们可以向前合理的卖出几步来减少将来转变时可能带来的麻烦。记住，我们的目标不是重新发明你已有的东西，而是以新的眼光来看待它。

删除网站的首页

(当然要在做好备份的情况下。)想要找到网站真实的介绍页面，没有什么比删除一个网站假定的介绍页面更有帮助的了。在哪个页面你会找到介绍网站用途的内容?它可以被替换或者融合到首页里去?

练习重建

当你重新设计一个单独的网页时，尝试将它放入不同的环境中并且不仅仅是网页浏览器。当这个网页被放到邮件中会怎样?当它被大声读出来时有意义吗?它可以被导出到另一个网站内容管理系统吗?它可以被复制粘贴到word文档中吗?可以打印可以传真吗?不要忽略这些荒谬的假设情景，几年前，人们还觉得为320像素的宽屏做设计可笑呢。

考虑不同的元数据

比如说，标题，可能会被用作为独立的链接。拿网页标题来说。尽管关于我们是所有视觉设计都需要的，但它在谷歌的结果页面里就会显得很不足。关于Acme公司对产品质量的承诺不止是一个标题：它也可以是一个拥有足够信息来决定这个网页是否值得浏览的链接。

找出关键内容

在每个网页上，找到能总结这么页面上内容的关键句。如果没用，这个页面就需要被重新编写，或者分解到别的页面去，或者消除掉。例如，你现在阅读的这个网页有两个可能的总结：第一段和第四段的第一个句子。

在使用说明中放入解释和替代方案

有时候某些信息是为特定的一些媒介创作的。一个视频可能在某个特定的尺寸下视觉效果最后，一个长篇的文档可能需要分成不同的章节。但是无法保证其他人不会将这个视频在其他环境下播放，又或者那篇长长的文章总是被放在Kindle上阅读。使用说明上写请在这样的环境下浏览内容。建议中就展示这就是我刚才说的意思。和class=alignright是对建议的解释。style=float:right和table width=300″则是使用说明。换一个说法，你最后一次将写入HTML而不是在分开的CSS文件中使用font属性是什么时候?

不同的媒介都有它自己的特性，而设计师就要将这些特性转化为可利用的优势(比如一个网站的超链接，一个视频的动态和路径，一个Flash的互动动画，一本点子书的书签，一本有形账面的可分享性)，在不同平台上迁移的耗费会增加我们对某个平台的特殊标准。

在过去的时间里，网页设计师都根据当时的显示器来进行网页的布置。这导致今天我想移动网页转移的困难。我们要吸取过去的教训，为将来可能发生的变化做准备。