网站内容与功能设计(网站的本质就是形式主义，内容、功能、表现这是什么？)

　　网站内容与功能设计(网站的本质就是形式主义，内容、功能、表现这是什么？)

　　网站的本质是形式主义，即网站内容、功能和性能三要素。低保真原型在基础内容层面解决问题，而高保真线框规划网站>功能和性能；内容是网站最基本也是最重要的核心，所以高保真原型必须建立在低保真原型的基础上，本末倒置直接规划细节是错误的行为的页面。

　　区分“交互”部分

　　在讨论内容的形式主义时，不是简单区分哪些是图片、哪些是文字、哪些是flash*敏*感*词*……而是对用户可以交互的内容进行扩展和变换；我们在这里谈论的交互是人和机器。万维网最常见的交互是鼠标响应和键盘响应。

　　使用颜色标记不同类型的页面元素非常有效，例如：

　　使用颜色区分页面的“交互”部分

　　区分链接文本和非链接文本是非常重要的工作，在低保真原型中你可能会完全忽略它们，而高保真线框必须区分哪些文本是可点击的，哪些是纯浏览文本；对于标题级别的文字，应使用较大的字体，并以浅色背景进行识别；那些没有链接的文本段落可以由多个带有第一行缩进的灰色背景表示（在实际页面中不需要缩进）。如果时间充裕，更推荐页面的段落部分用真实的文字填充。

　　区分标题、链接文本、文本段落

　　区分交互形式可以看作是对线框图例的补充；这个补充可能会根据不同的网站需求，甚至提供一些非常独特的传说，比如在规划一个房地产sns社区的时候。在此过程中，您甚至可以添加图标图例。这样做的好处不仅是对其他设计和实现人员的提示和便利，还可以使高保真原型更“可读”，更接近最终的页面结果。

　　房地产 sns网站 线框中的图标图例

　　无处不在的网格系统

　　网格系统在网页设计中已经被广泛采用，网络中已经有很多介绍性的文章，具体应用可以参考960.gs的相关代码；不要以为网格系统只对视觉设计师有帮助，对高保真线框的设计也能有很大的帮助；visio、axure等原型制作软件提供强大的指引线和网格对齐支持，让您轻松实现线框网格。

　　在高保真线框中构建网格系统

　　带有网格系统的高保真原型是最接近真实页面的设计（甚至可以认为选择合理的网格系统是构建高保真线框的第一步），具有以下三个优点：

　　优势一：通过网格控制屏幕资源

　　内容形式主义的核心是屏幕资源的规划。网格系统的建立可以有效把握页面的整体和局部大小，提高原型的真实性和适应性。

　　比如在基于60像素的网格系统中，可以兼容标准的屏幕尺寸（800px×600px），网站的整个页面样式提供了强大的缩放功能。

　　可适应 800*600 标准屏幕分辨率的线框网格

　　优势二：轻松实现全站图片尺寸规划

　　将那些有内容意义的图片（不是装饰性的图片）放给没有经验的视觉设计师往往是灾难性的，这也是很多看起来很漂亮的设计与实际效果相差如此之大的主要原因；既然已经决定进行高保真原型设计，就需要在视觉设计层面介入工作；内容图片随着内容频繁变化，更接近交互设计的范畴。在某些时候，视觉设计应该合理地让位。

　　根据网格系统的参考宽度，通常需要规划2~3个常用的纵横比，根据页面需要规划大小；这一系列图片的大小应该在高保真线框开始之前确定。之后，它就可以用于内容填充了。

　　具有两种固定比率和一种可扩展比率的站点范围图像大小规划

　　优势三：线框的块级复用

　　网页设计的灵活性来自于规划中的块级重用。通常，一些相关的内容元素可以组成一个“内容块”。在页面的*敏*感*词*中，这些块可能是div、ol、ul、dl级别的标记语言；因为网页是垂直延伸的，所以线框的高保真设计中，块级内容的宽度主要是按照网格系统来规划的；共同宽度确定后，很容易实现“大位移”，减少设计工作量，提高团队设计。执行效率（视觉设计师也欢迎这种规划）。

　　可根据网格系统灵活组合的“积木”内容块

　　图片还是文字？

　　使用图片或文字作为内容形式时，应该引用一个流行词汇——纠结

　　曾经有人断言，万维网已经进入读图时代。在“眼球经济”的影响下，网站的每一个内容元素都渴望得到用户的充分关注。越来越多的网页界面使用图片作为内容交流的形式。这也带来了访问速度慢和搜索引擎优化困难；何时使用图片以及如何匹配图文是高保真线框图的重要组成部分。

　　使用图片的优缺点分析

　　优点：直觉，吸引注意力

　　缺点：文件量增加，需要专门的搜索优化，屏幕资源比较大

　　使用文本的优缺点分析

　　优点：占用屏幕资源少，导入速度快，可读性强

　　缺点：繁琐，难以区分

　　合理的内容形式设计，根据不同的需求和屏幕资源，灵活运用图文搭配，有效传达信息。

　　静止图像（小）

　　指示性内容，通常附有文字

　　静止图像（大）

　　页面的主要视觉，需要突出细节的视觉内容

　　动态图片（多媒体）

　　广告，需要特别注意的链接，不宜过多

　　链接文本

　　仅句子内容单元，关键词

　　描述性文本

　　一大段文字，点击前必须向用户解释

　　标题

　　重要的关键词，重要的话题

　　使用图文搭配形式化内容，在一定意义上决定了内容元素和块所占用的屏幕资源，从一个方面体现了它们之间的强弱关系；在完善合理的页面逻辑结构的基础上，根据页面元素之间的权重进行高保真线框设计是非常容易的。

　　6种形式的相同页面元素

　　块内容变形

　　块级内容由元素级内容组成。

　　元素级内容形式化解决后，块级内容可以按照网格系统进行多样化整合，可以让页面线框图像像积木一样简单；相同的块级元素通常占据不同的页面。不同的权重，意味着屏幕资源的变化（影响这个变化的主要因素是宽度），所以需要在集成网站中赋予相同的块级元素不同的形式。

　　以最常见的内容块“同主题链接列表”为例，解决不同屏幕资源分配下的变形问题；所谓“同主题的链接列表”，可能是一系列文章，也可能是围绕某个主题的一系列关键词，总之，是同层次的相关内容节点；这些兄弟节点所属的主题以页面标题的形式反映。

　　简单的

　　图形列表

　　一栏展开

　　两列混搭

　　两栏文字

　　最小图形

　　以上六种扩展形式只是从一个内容块派生出来的；为了形成高度的块级重用，每个内容块都必须进行类似的扩展；就像很多重复性的工作一样，设计师只要通过一个案例积累常见的块级内容形式，就不用为每个项目都那么辛苦了。在高保真线框的设计层面，其实就是对这些形式的合理运用。

　　为了适应同一内容块的不同形式，设计开发者往往会在内容发布过程中做出相应的改进，例如手动或自动截取不同长度的标题和链接文本等。