web网页设计主题（如何设计一个网站需要什么）

本文目录

• 如何设计一个网站需要什么
• 网页设计的设计思路怎么写
• 网页建设制作的要点有哪些
• web端交互设计页面布局对比分析2018-04-07

如何设计一个网站需要什么

设计流程：

主题明确：

在目标明确的基础上，完成网站的构思创意即总体设计方案。对网站的整体风格和特色作出定位，规划网站的组织结构。

Web站点应针对所服务对象（机构或人）的不同而具有不同的形式。有些站点只提供简洁文本信息；有些则采用多媒体表现手法，提供华丽的图像、闪烁的灯光、复杂的页面布置，甚至可以下载声音和录像片段。好的Web站点把图形表现手法和有效的组织与通信结合起来。

为了做到主题鲜明突出，要点明确，应该使配色和图片围绕预定的主题；调动一切手段充分表现网站点的个性和情趣，办出网站的特点。

充分利用已有信息，如客户手册．公共关系文档．技术手册和数据库等。

设计思路：

1、简洁实用：这是非常重要的，网络特殊环境下，尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，所以要去掉所有的冗余的东西。

2、使用方便：同第一个是相一致的，满足使用者的要求，网页做得越适合使用，就越显示出其功能美

3、整体性好：一个网站强调的就是一个整体，只有围绕一个统一的目标所做的设计才是成功的。

4、网站形象突出：一个符合美的标准的网页是能够使网站的形象得到最大限度的提升的。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。当然雅俗共赏是人人都追求的。

5、交互式强：发挥网络的优势，是每个使用者都参与到其中来，这样的设计才能算成功的设计。这样的网页才算真正的美的设计。

版式设计：

网页设计作为一种视觉语言，特别讲究编排和布局，虽然主页的设计不等同于平面设计，但它们有许多相近之处。

版式设计通过文字图形的空间组合，表达出和谐与美。

多页面站点页面的编排设计要求把页面之间的有机联系反映出来，特别要求处理好页面之间和页面内的秩序与内容的关系。为了达到最佳的视觉表现效果，反复推敲整体布局的合理性，使浏览者有一个流畅的视觉体验。

色彩作用：

色彩是艺术表现的要素之一。在网页设计中，设计师根据和谐、均衡和重点突出的原则，将不同的色彩进行组合．搭配来构成美丽的页面。 根据色彩对人们心理的影响，合理地加以运用。如果企业有CIS（企业形象识别系统），应按照其中的VI进行色彩运用。

形式内容：

为了将丰富的意义和多样的形式组织成统一的页面结构，形式语言必须符合页面的内容，体现内容的丰富含义。

灵活运用对比与调和、对称与平衡、节奏与韵律以及留白等手段，通过空间、文字、图形之间的相互关系建立整体的均衡状态，产生和谐的美感。

三维空间的构成：

网络上的三维空间是一个假想空间，这种空间关系需借助动静变化．图像的比例关系等空间因素表现出来。 在页面中，图片、文字位置前后叠压，或页面位置变化所产生的视觉效果都各不相同。

通过图片、文字前后叠压所构成的空间层次不太适合网页设计，根据现有浏览器的特点，网页设计适合比较规范、简明的页面，尽管这种叠压排列能产生强节奏的空间层次，视觉效果强烈。

网页上常见的是页面上、下、左、右、中位置所产生的空间关系，以及疏密的位置关系所产生的空间层次，这两种位置关系使产生的空间层次富有弹性，同时也让人产生轻松或紧迫的心理感受。

虚拟现实：

人们已不满足于HTML（标准通用标记语言下的一个应用）编制的二维Web页面，三维世界的诱惑开始吸引更多的人，虚拟现实要在Web网上展示其迷人的风采，于是VRML语言出现了。

VRML是一种面向对象的语言，它类似Web超级链接所使用的HTML语言，也是一种基于文本的语言，并可以运行在多种平台之上，只不过能够更多地为虚拟现实环境服务。

多媒体：

网络资源的优势之一是多媒体功能。要吸引浏览者注意力，网页的内容可以用三维动画、FLASH等来表现。但要由于网络宽带的限制，在使用多媒体的形式表现网页的内容时不得不考虑客户端的传输速度。

便于使用：

如果人们看不懂或很难看懂您的网站，那么，他如何了解你的企业信息和服务项目呢？使用一些醒目的标题或文字来突出您的产品与服务。

并且即使您拥有最棒的产品，如果客户从您的网站上看不清楚您在介绍什么或不清楚如何受益的话，他们是不会喜欢您的网站的，这对于网页设计而言是失败的。

导向清晰：

网页设计中导航使用超文本链接或图片链接，使人们能够在您的网站上自由前进或后退，而不必让他们使用浏览器上的前进或后退。我们在所有的图片上使用“ALT”标识符注明图片名称或解释，以便那些不愿意自动加载图片的观众能够了解图片的含义。

快速下载时间：

很多的浏览者不会进入需要等待5分钟下载时间才能进入的网站，在互联网上30秒的等待时间与我们平常10分钟等待时间的感觉相同。因此，建议在网页设计中尽量避免使用过多的图片及体积过大的图片。主要页面的容量应确保普通浏览者页面等待时间不超过10秒。

非图形内容：

在必要时适当使用动态“Gif”图片，为减少动画容量，应用巧妙设计的Java动画可以用很小的容量使图形或文字产生动态的效果。但是，由于在互联网浏览的大多是一些寻找信息的人们，仍然建议您要确定您的网站将为他们提供的是有价值的内容，而不是过度的装饰。

反馈与沟通：

让客户明确您所能提供的产品或服务并让他们非常方便地订购是您获得成功的重要因素。如果客户在您的网站上产生了购买产品或服务的欲望，您是否能够让他们尽快实现吗？是在线还是离线？

因此，如果是产品或服务介绍网站，应该有留言、电话、在线咨询等功能或信息呈现。

在企业的Web站点上，要认真回复用户的电子邮件和传统的联系方式如信件．电话垂询和传真，做到有问必答。最好将用户的用意进行分类，如售前一般了解．售后服务等，由相关部门处理，使网站访问者感受到企业的真实存在并由此产生信任感。

测试改进：

测试实际上是模拟用户询问网站的过程，用以发现问题并改进网页设计。应该与用户共同安排网站测试。

内容更新：

企业Web站点建立后，要不断更新网页内容。站点信息的不断更新，让浏览者了解企业的发展动态和网上职务等，同时也会帮助企业建立良好的形象。

注意不要许诺你实现不了的东西，在你真正有能力处理回复之前，不要恳求用户输入信息或罗列一大堆自己不能及时答复的电话号码。 如果要求访问者自愿提供其个人信息，应公布并认真履行个人隐私保承诺。

网页设计（web design，又称为Web UI design，WUI design，WUI），是根据企业希望向浏览者传递的信息（包括产品、服务、理念、文化），进行网站功能策划，然后进行的页面设计美化工作。

作为企业对外宣传物料的其中一种，精美的网页设计，对于提升企业的互联网品牌形象至关重要。

网页设计一般分为三种大类：功能型网页设计（服务网站&B/S软件用户端）、形象型网页设计（品牌形象站）、信息型网页设计（门户站）。设计网页的目的不同，应选择不同的网页策划与设计方案。

网页设计的工作目标，是通过使用更合理的颜色、字体、图片、样式进行页面设计美化，在功能限定的情况下，尽可能给予用户完美的视觉体验。高级的网页设计甚至会考虑到通过声光、交互等来实现更好的视听感受。

网页设计主要以Adobe产品为主，常见的工具包括FW、PS、FL、DW、CDR、AI等，其中DW是代码工具，其他是图形图像和FL动画工具。还有最近几年Adobe新出的EdgeReflow、EdgeCode、Muse。

标题设计：

在设计网页标题时，应注意同时兼顾对用户的注意力，以及对搜索引擎检索的需要。这一原则在实际操作中可通过三个方面来体现，这三个方面也可以被认为是网页标题设计的一般规律：

1、网页标题不宜过短或者过长

一般来说6-10个汉字比较理想，最好不要超过30个汉字。网页标题字数过少可能包含不了有效关键词，字数过多不仅搜索引擎无法正确识别标题中的核心关键词，而且也让用户难以对网页标题（尤其是首页标题，代表了网站名称）形成深刻印象，也不便于其他网站链接。

2、网页标题应概括网页的核心内容

当用户通过搜索引擎检索时，在检索结果页面中的内容一般是网页标题（加链接）和网页摘要信息，要引起用户的关注，网页标题发挥了很大的作用。

如果网页标题和页面摘要信息有较大的相关性，摘要信息对网页标题将发挥进一步的补充作用，从而引起用户对该网页信息点击行为的发生（也就意味着搜索引擎推广发挥了作用）。

另外，当网页标题被其他网站或者本网站其他栏目/网页链接时，一个概括了网页核心内容的标题有助于用户判断是否点击该网页标题链接。

3、网页标题中应含有丰富的关键词

考虑到搜索引擎营销的特点，搜索引擎对网页标题中所包含的关键词具有较高的权重，尽量让网页标题中含有用户检索所使用的关键词。

以网站首页设计为例，一般来说首页标题就是网站的名称或者公司名称，但是考虑到有些名称中可能无法包含公司/网站的核心业务，也就是说没有核心关键词，这时通常采用“核心关键词公司名/品排名”的方式来作为网站首页标题。

开头所列举的某网络营销服务商网站首页标题实例，其实也是采用这种方式来设计网页标题，只不过由于罗列了太多的“核心关键词”，反而没有了核心。

做美工看起来并不是一件容易的事情。首先，要对整个站点和企业有个大致的了解。例如：某些企业喜欢蓝色的主调，你不可能去做个红色的主调，这样完全违背客户的主要意愿，如果百度的标志改成五颜六色的，相信大家也不会认可的。

站长的职责是规划网站结构。同样也需要有一定的审美观。

网页设计的设计思路怎么写

一、确定网站主题

网站主题就是你建立的网站所要包含的主要内容，一个网站必须要有一个明确的主题。必须要找准一个自己最感兴趣内容，做深、做透，办出自己的特色，这样才能给用户留下深刻的印象。

网站的主题无定则，只要是你感兴趣的，任何内容都可以，但主题要鲜明，在你的主题范围内内容做到大而全、精而深。

二、搜集材料

明确了网站的主题以后，你就要围绕主题开始搜集材料了。要想让自己的网站有血有肉，能够吸引住用户，你就要尽量搜集材料，搜集得材料越多，以后制作网站就越容易。

三、规划网站

一个网站设计得成功与否，很大程度上决定于设计者的规划水平，规划网站就像设计师设计大楼一样，图纸设计好了，才能建成一座漂亮的楼房。

网站规划包含的内容很多，如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等，你只有在制作网页之前把这些方面都考虑到了，才能在制作时驾轻就熟，胸有成竹。也只有如此制作出来的网页才能有个性、有特色，具有吸引力。

四、网站建设网站做的好不好，就要看前端制作人员和程序员的能力了，有许多的公司用的都是刚刚毕业的学生，做的一般都会有些许的问题，这里就要好好的选择一个公司了。

五、上传测试网站制作完毕，最后要发布到Web服务器上，才能够让全世界的朋友观看，你可以很方便地把网站发布到自己申请的主页存放服务器上。

六、推广宣传网页做好之后，还要不断地进行宣传，这样才能让更多的朋友认识它，提高网站的访问率和知名度。推广的方法有很多，例如到搜索引擎上注册、与别的网站交换链接、加入广告链等。

七、维护更新

网站要注意经常维护更新内容，保持内容的新鲜，不要一做好就放在那儿不变了，只有不断地给它补充新的内容，才能够吸引住浏览者。

网页建设制作的要点有哪些

1、网页建设制作的要点——确定主题的颜色和布局

为了使营销企业的网站有兴趣浏览，需要在网站前期对网站的主题色彩和布局进行规划。有些人这样做了很长时间，甚至主题的颜色和布局都还没有确定。建议在设计网站时对市场用户进行调查。

2、网页建设制作的要点——确定页面字体

不要在你的网站上使用太多的字体。一般来说，微软的Yahei是文章页面的默认字体。另外，12px-16px更适合电脑网页，14PX-18px更适合移动终端。字体大小取决于用户组的年龄。例如，如果您正在为老年人制作保健产品，您可以调整字体大小以使其更容易导航。

3、网页建设制作的要点——确定页面的内容

每个人都去一个网页寻找他们需要的东西。当内容恰好是用户想要的，他就会更加信任网站。在这一点上，营销是更好的。但是，如果页面的内容不能满足用户的需求，跳出率就会很高，用户就会抱怨。

4、网页建设制作的要点——把源代码写在页面上

在web页面构建的基本要素中，如果您想更快地加载页面，编写标准的页面代码当然是非常重要的。专业程序员编写的代码可以加快网页加载速度，更不用说提高搜索引擎的抓取能力了。

5、网页建设制作的要点——页面关键词布局

专业网站建设公司会在网页上放置关键词，方便企业日后推广。百度搜索引擎将收集站点、页面标题和描述推送给用户的搜索关键词。

网页建设制作的要点并不像你想象的那么简单，因为现在网页制作技术越来越先进，出现了许多新的功能。例如，一个网页必须以三维形式呈现，用户可以360度观看产品。环球网校将会持续更新平面设计的相关资讯及技巧，也可以点击本站其他文章进行学习。

web端交互设计页面布局对比分析2018-04-07

页面布局

页面布局大致可分为网页（web）、软件、手机三类，其中web和软件有较大相似性，不作区分。软件界面布局依功能而决定，布局复杂。因为定义种类的标准和方式不同，页面布局类型分类较多，先总结比较常用和普遍的布局方式，以其他方式做补充。
页面布局的定义 

页面布局是指，在设计页面的过程将页面各要素通过合理、有效、统一的规则进行排版，产生很好的传播信息的视觉效果。一般来说，都会基于下原则进行页面布局设计：

（1）对比：是防止页面元素过于单一或没有差异性。假如空间、大小、形状、字体、线条、颜色等设计元素都要各不相同，那么就要制造较大的差别，要让页面引人注目。

（2）重复：可W重复颜色、形状、线宽、字体、大小和图片等等。既能够増加条理性，也可増强页面的统一性。

（3）对齐：在页面上，不同元素不能孤立存在，而应当构建特殊的视觉关联效果，从外观上给予用户更为清爽、稽巧和情绪化的体验。

（4）亲密性：页面上的元素不应当孤立的存在，彼此之间存在亲密性，形成一个视觉单元。这样可有助于信息的架构，减少信息组织的混乱。

网页布局类型

网页版式的基本类型主要有骨骼型、国字型、拐角型、框架型、满版型、分割型、中轴型、曲线型、倾斜型、对称型、焦点型、自由型等12种。

1. “国”字型布局

也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列两小条内容，中间是主要部分，与左右一起列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。

口字型、同字型、回字型都可归属于此类，是一些大型网站所喜欢的类型，即最上面是网站的标题、导航以及横幅广告条，接下来就是网站的主要内容，左右分列一些小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种布局的优点是充分利用版面，信息量大，缺点是页面拥挤，不够灵活。这种结构是我们在网上见到的差不多最多的一种结构类型，常用于门户网站的设计。
2.拐角型 匡型布局或T型布局可归于此类，在匡型布局中，常见的类型有上面是标题与导航，左侧是展示图片的类型和最上面是标题及广告，右侧是导航链接的类型。这种版式在韩国的网站中常见。T布局就是指页面顶部为横条网站标志与广告条，下方左面为主菜单，右面显示内容的布局，因为菜单背景色彩较深，整体效果类似英文字母T，所以称之为T形布局。这种布局的优点是页面结构清晰，主次分明，是初学者最容易上手的布局方法。缺点是规矩呆板，如果在细节色彩上不注意，则很容易让人感觉枯燥无味。

2.1“匡”字型布局
这种结构与上一种其实只是形式上的区别，它去掉了“国”字形布局的最右边的部分，给主内容区释放了更多空间。这种布局上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。
2.2.T型布局

“T”结构布局形式。所谓“T”结构，就是指页面顶部为横条网站标志+广告条，下方左面为主菜单，右面显示内容的布局，整体效果类似英文字母“T”，所以称之为“T，形布局。这是网页设计中用得最广泛的一种布局方式。这种布局的优点是页面结构清晰，主次分明，是初学者最容易上手的布局方法。缺点是规矩呆板，如果不注意细节色彩，很容易让人”看之无味“
3. “三”字型布局

是一种简洁明快的网页布局，在国外用的比较多，国内比较少见。这种布局的特点是在页面上由横向两条色块将网页整体分割为三部分，色块中大多放置广告条与更新和版权提示。
4. “川”字型布局

整个页面在垂直方向分为三列，网站的内容按栏目分布在这三列中，最大限度地突出主页的索引功能。
5， 封面型布局 （满版型/海报型/POP型）

POP布局属于此类。就是指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心，页面以图像充满整版。主要以图像为诉求点，将少量文字压置于图像之上。满版型给人以舒展、大方的感觉，视觉传达效果直观而强烈，缺点就是速度慢。随着当今网络带宽不断变大，这种版式在商业网站设计尤其是网络广告中比较常见。

这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。
6. Flash布局

这种布局是指整个网页就是一个Flash动画，它本身就是动态的，画面一般比较绚丽、有趣，是一种比较新潮的布局方式。其实这种布局与封面型结构是类似的，不同的是由于Flash强大的功能，页面所表达的信息更丰富。其视觉效果及听觉效果如果处理得当，会是一种非常有魅力的布局
7. 标题文本型布局

标题文本型布局是指页面内容以文本为主，这种类型页面最上面往往是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这一类。
8. 框架型布局 ,

采用框架布局结构，常见的有左右框架型、上下框架型和综合框架型。由于兼容性和美观等因素，这种布局目前专业设计人员采用的已不多，不过在一些大型论坛上还是比较受青睐的，有些企业网站也有应用。

框架型版式常用于功能型网站，例如邮箱、论坛、博客等。1）左右框架型这是一种左右分别为两页的框架结构，一般左面是导航链接，有时最上面会有一个小块标题或标志，右面是正文。我们见到的大部分的大型论坛都是这种结构，一些企业网站也喜欢采用。这种类型结构非常清晰，一目了然。
2）上下框架型与左右框架类似，区别仅仅在于这是一种上下分为两页的框架。
3）综合框架型这是上述两种结构的结合，是一种相对复杂的下型框架结构，较为常见的类似于“拐角型”结构的，只是采用了框架结构。常见的邮箱网站的版式都是综合框架型。
9. 顶部大图Banner+简单的栅格
无论屏幕多大，这种布局都能够为用户展示充足的内容，供用户浏览和探索。虽然这种布局随着屏幕、设备而有所差异，有的设计师会倾向于设计成固定宽或者横跨整个页面的布局，但是总体的模式都大同小异。

·导航栏·顶部大图，图片上叠有文字标题·2~4个分栏，承载不同类别的信息，有的会有图标·主要的内容区域·页脚

这种布局设计干净清爽，有足够强的视觉表现力，并且常常采用的响应式设计，断点也很好控制。顶部大面积的轮播图或者Banner 也有许多插件或者应用来帮你实现。
原理：这种布局中，每个元素都各司其职，并且整个流程是富有逻辑的，顶部大图足以营造氛围，给予用户特定的体验，下面的次一级元素能够做的很好的支撑。

相关趋势：越来越多这类网页开始采用色彩丰富的插画式的图标，而扁平化的设计和这种布局页面有着天然的契合。

10. 单页设计，单栏布局
单页式设计这几年非常火，它非常适宜于展现极简的内容，或者专注呈现一个主题。当网站的主题集中，内容也比较固定的时候，无需复杂的布局来呈现，单页单列式的布局足以应付一切。

·导航·主要内容区域，文字+图片为主·页脚

采用这种布局模式的时候，空间的控制至关重要，相当考验设计师设计留白和布局平衡的功力。元素和元素之间的疏密关系是需要设计师反复推敲的，如果空间控制不合理会给用户一种混乱的感觉，如果过于紧密则会产生局促感。

原理：单页式设计适合于小网站或者小型项目的展示，它可以用来制造一个简单的介绍页面，让简单的内容显得不那么单调，强化内容的形式感和重量感。对于内容简单的博客网站而言，单页式设计也是不错的选择。

相关趋势：和单页设计结合最紧密的应该是动效设计和视差滚动，他们可以让单页式设计更加生动有趣，淡化单调的设计，赋予页面更强的生命力。

11 、自定义栅格
方块元素被用来组织排列他的作品。这是组织排列任意数量内容的简单途径，让事物保持简洁。
到处都是方块，移动鼠标时还有个有趣的动画效果。不过除了组织内容之外，你会发现方块元素也成为了设计风格的一部分。它是这种风格关键的决定性元素。
那些被整齐分割出来的网页布局从来都没有过时过。无论是分割得细碎的网页区域还是大块的页面区块，大多都需要借助一套干净整齐的栅格来支撑。在此基础上，内容按部就班地被置于不同的区块中，被精心地组织展示出来。

在设计师的作品集页面中，你可以发现各种各样自定义的栅格布局。自定义栅格展示内容的优势在于，它可以同时呈现大量的视觉化的内容，看起来足够丰富又不会落于下乘。下面这个图库的效果看起来就相当震撼。

在栅格中填充色彩，还可以用来承载文字内容。不同的区块之间不一定非要用线条进行分割，可供选择的方案有很多，不过千万要控制好栅格尺寸和间距。控制不好的细节，整个设计的平衡感可能会被破坏。

原理：栅格的优势在于它的组织性，对于用户而言，它具有规律性和可预期性。一个漂亮的栅格系统能够让用户更快找到需要的内容，在视觉上也更加协调自然。

相关趋势：栅格很容易被人视为卡片这样的元素，可以为其加入翻转等各式各样的动效，呈现出更多的信息和视觉层次。

12. 经典的F式布局

传统的布局方式，依赖布置视觉线索，“控制”用户的视觉路径，相较之下，F式布局更加自然，更加友好。F式布局符合用户的浏览习惯，更自然。符合“从上到下，从左到右”的阅读模式。
研究表明，用户在浏览网页的时候，习惯于沿着F式的阅读轨迹来浏览信息，也就是说，用户喜欢从左到右阅读，然后向下移动，再继续从左到右阅读。

这种F式的阅读模式对应的网页布局就是F式布局，最关键的信息靠左显示，从上到下尽量保持在一条线上。

·页头和导航·靠左的一栏相对较宽，展示主要的内容·靠右常为侧边栏，展示相关链接等内容·页脚

原理：人的行为很容易受到习惯的影响，而研究也证实了人思考、行为确实是模式化的。从左到右，自上而下，人们大多习惯了这种行为模式。F式的布局模式拥有良好的适用性，便于用户理解和交互。

相关趋势：F式布局中侧边玩法很多，有的设计师会将导航与之结合，或者在页面顶部加上大图Banner。

13 、极简分层
极简化的设计一直都在流行，它的流行不是没有原因的。开放式的空间让用户感觉更加轻松，也使得其中展现的内容更容易被聚焦。如果极简化的页面中加入不多的几个并列的内容层，可以让信息更有层次，也使得极简的页面拥有了细节。

这种设计并不复杂，但是让页面更加有趣了，它可以适配更多不同类型的项目了。这也解释了为什么用户如此的喜爱类似Apple 官网这样的设计。
原理：极简化的页面中加入简单的几个分层，让页面有了视觉焦点，尤其是当设计者想要引导用户关注到某个关键的内容的时候，这种页面布局很很容易实现这一点。

相关趋势：微妙的阴影和渐变常常被用在这样的页面当中，强化元素之间的层次感。虽然这些设计手法一度“过时”，但是现在大有卷土重来之势，而Material Design 这样的设计风格就是它们的冲锋号。

14. Z-模式

Z-模式是最简单、最通用的模式,普遍用于任何基于文本的网页。读者首先横向的浏览顶部，接着回到左边，然后再横向地浏览整个底部。

理解通用的Z-模式很重要，因为它解决了网站的核心需求：层次结构、品牌化和用户行为号召。它的美在于既简单又具有“用户号召”型网站的理想布局。当然，对于更复杂的或包含大量内容的网站，Z-模式可能过于简单。

考虑一下Z-模式是否适合你的网站？下面有一些最佳实践可以更好的优化该模式：

背景：保持背景在它应该处于的位置：隐蔽在内容之下。不让它分散读者的注意力。

要点1：作为第一个要点，将Logo放置在固定位置。

要点2：虽然主要的用户号召应该放在后面，这对二级用户号召来说是一个好位置，可强调或突出导航条（一个漂亮的图形或图像滑块将有助于分割页面的顶部和底部，鼓励读者按照Z模式所期待的方式来浏览）。

要点3：选取最佳位置来吸引读者对其它链接的注意，或者吸引读者的目光到网站的最终目标：要点4。

要点4——作为“终点”，这是一个完美的放置主要用户号召的地方。

首先你需要做的是把页面上的元素按照重要性进行排序。然后，从结果中挑选出适当的“热点”就会变得很简单。

此外，Z-模式可以重复和扩展到整个页面。我们来看看Evernote是如何按“之”字型向下放置他们的“用户号召”和卖点的。
DropBox没有使用任何背景图片，很简单地实现了这种“曲折”的模式。相反的，更多功能型的设计内置在了布局中，比如用户号召“浏览更多”，当用户浏览整个网页时，它帮助用户链接进入每一板块的细节部分。这也有助于通知读者点击到下一个相关页面，而不需要先去通读页面所有内容。
15.分割屏幕

在这类中，我们精选的网站都用了垂直分隔线来分割屏幕。可能这么做有很多原因，通过研究大量此类案例，我发现主要有两点。

原因之一，有时候在一套设计中，的确存在两个同等重要的主体元素。网页设计的通常方法，是按照重要性给内容排序。然后重要性会体现在设计的层次和结构上。但是假如你就是要推广两样东西呢？这种方式，可以让你突出两者，并让用户迅速在其中做出选择。

原因之二，有时你要表现出一种重要的两重性。以Eight and Four网站为例。他们在此要表达的是，他们的核心竞争力来自植根数字领域，还有多才多艺的员工。这两点成就了他们。通过屏幕分割来表现这一点，是种令人愉快的方式。
16. 去界面化

网页设计中的主要元素之一，就是容器元素：方块、边框、形状和所有类型的容器，用于将内容从页面中分离开。想象一个古板的页头，元素刚好容纳其中，与内容分隔开。如今的一项普遍趋势，就是去除所有这些额外的界面元素。

这是种极简主义的方式，但它更进一步，带来一些有趣的转变。
17. 基于模块或网格

接下来这些排版方式，建立在模块化或类似网格的结构上。在这些设计中，每个模块都力图根据屏幕尺寸伸缩调整。实际上这并不是什么新的方式，不过响应式网页设计让它变得更加有用。它暗示了一种自适应布局模式，可以像搭积木一样，由各种模块组件创建而成。
这个案例更加激进。当然，它也包含了模块化的方式，让他们能够根据需要轻松增减内容。但此处还有一个重要的设计元素在发挥作用，之前的案例是没有的。模块通过尺寸变化，来反映其重要程度和在各层级中的地位。这类模块化的布局方式存在一种风险，它使每样东西尺寸都相同，这意味着无法强调任何事物。相反，这个案例还是清晰地突出了主要元素。

18. 一屏以内

最后，还有一些网站采用这样的方式，让设计完全在一屏内展现。这是响应式设计的一个分支，因为它会适应屏幕尺寸。不过在这个绝佳案例中，整个设计的适应方式完完全全吻合屏幕，没有产生滚动条。没有滚动，意味着内容必须极度聚焦，而且要建立清晰的内容层次。我发现这些网站的聚焦能力和清晰程度，令人耳目一新。