提升设计品质的8个布局方案[译]
作者：笨活儿 来源：笨活儿 发布时间：2010-03-18 16:06:00
网页设计中，内容组织恐怕是最至关重要、最影响设计品质的方面了。如何将信息组织到好的布局中，是一个网站的基础，并且应该在考虑外观之前就决定好。没有好的布局，网页信息流就不能正确传递，所有东西都不能建立起合理的联系。
在这篇文章中，我们将讨论八个布局解决方案/技巧，这些方案和技巧将有助于你创建整洁有序的内容布局。这八个技巧包括：滑门(sliders)、标签式、渐进布局(progressive layouts)、结构网格、模态窗口(modal window)、翻转元素、手风琴效果(accordions)以及超大下拉菜单(mega drop-down-menus)。
1. 滑动样式与传送带(Sliders and Carousels)
滑门(Sliders)，也可称为传送带(carousels)，是一种有序的、交互性强、十分平滑地展示内容的方式。滑门样式是一个非常流行的技巧，大家都觉得它很好用，能让你在固定的区块内填充上大量内容。没有滑门的帮助，这些内容可能就要分开放到页面中的各个地方。而大多数时候，你在使用页面空间时总是捉襟见肘。或者，有些内容是你希望“用户要求”后才出现。这有助于让用户一次只关注一个内容区块，也符合他们自己的便利需求。
滑门样式的实例
导航区提供缩略图与图标
运用滑门和幻灯样式时，最好在导航区提供图标或缩略图，以便使导航更加简单直观。缩略图和图标给用户指出明路，向他们解释当前所在位置，以及有哪些浏览选项可供选择（比如说幻灯片的导航可以是水平的，也可以是垂直的）。另外，还能方便他们快速选择特定滑门页。
Coda网站的滑门顶部设计了标签卡，他们使用的是“滑动门+标签卡”的混合样式。这个主意绝顶聪明，因为通过看缩略图，用户就能快速得知特定滑门页的内容。而且，这些图标也提供了强大的、令人印象深刻的、干净整洁的视觉支持。除了图标和标签你也可以在标题前加上小图片， 或者只用数字也行。
用于展示产品的滑门样式
与上面的例子对应，滑门不仅能用于大容量信息的组织，也能为用户浏览大量产品条目提供方便。 SourceBits (见下图)使用了多层滑门（一个水平的，一个垂直的），用唱片封面作为导航条目。
水平滑门两端都有大的圆形箭头图标，实时反映左右导航的可用性。滑动的时候有平滑的动画，用起来非常舒服。同时，你也能看到，各个元素间距都精心设计过，这有助于内容组织，也提升了可用性。鼠标滑过时，每个条目还有漂亮的聚光灯效果。
垂直滑动的内容以及超大的水平“点击条”
接下来看看 QuickSnapper 的滑门。这是一个完美融入页面整体布局的十分好用的垂直滑门。滑门内容中有大量截屏图，内容被有序地组织起来。这个滑门最赞的地方就是上下方的按钮导航。按钮宽及整个滑门，大的按钮让“推拉”滑门更加容易。
还有，这些按钮的:active和:focus效果也很漂亮。
滑门脚本
你可以参考下面的脚本、技巧和教程制作你自己的滑门：
0
投稿猜你喜欢
- Python的全局变量：int string， list， dic(map) 如果存在global就能够修改它的值。而不管这个global是
按照惯例，年底的淘宝的确是到了“需要改版的时候”。这次新版的淘宝首页上线，乍看并没有多少夺人眼球的地方，但仔细揣摩其中的细节，还是发现了不少- SQL Server 客户端配置工具用于配置客户端的工具(除基于DOS操作系统的客户端工具以外)，以便使它们可以成功地和SQL Server
- 从视频中提取音频安装 moviepypip install moviepy相关代码：audio_file = work_path +
- 目录一 项目描述1.1 背景1.2 实现设计1.2.1 之前的方法1.2.2 优化后的方法二.实现详情2.1 编辑Python可执行文件2.
- 前言最近有朋友在做投票的项目，里面有用到一个倒计时的组件，还想要个动画效果。cv * 浸染多年的我，首先想到的是直接找个现有的组件。通过一通搜
- 本文实例讲述了Python面向对象中类（class）的简单理解与用法。分享给大家供大家参考，具体如下：我们先来创建一个简单的类class F
- 在 Go 语言中，struct 是一种常见的数据类型，它可以用来表示复杂的数据结构。在 struct 中，我们可以定义多个字段，每个字段可以
- 实例代码如下def demo(): print("开始执行...") while 1: &nbs
- Python是静态作用域语言，但是它自身是一个动态语言。在Python中变量的作用域是由变量在代码中的位置决定的，与C语言有些相似，但不是完
- 介绍也许大多数人都有在Excel中使用数据透视表的经历，其实Pandas也提供了一个类似的功能，名为pivot_table。虽然pivot_
- 在教材实例编写雷达图时出现ValueError，具体如下：ValueError: The number of FixedLocator lo
- 设计页面时，经常会从一个页面打开一个子窗口以供浏览者查看。通常，这种子窗口中的内容一经浏览者看过，对于浏览者而言就不再需要，而他们常常会忘记
- php简介当前网络技术发展日新月异，各种基于服务端创建 * 站的脚本语言更是层出不穷。其中PHP以其简单、易用、可移植性强等特点，在众多的动
- 前言本文的内容主要是介绍了MYSQL每隔10分钟进行分组统计的实现方法，在画用户登录、操作情况在一天内的分布图时会非常有用，之前我只知道用「
- 本文实例讲述了MySQL游标概念与用法。分享给大家供大家参考，具体如下：1、游标的概念（Cursor）一条sql，对应N条资源，取出资源的接
- 一、CNN简介1. 神经网络基础输入层（Input layer），众多神经元（Neuron）接受大量非线形输入讯息。输入的讯息称为输入向量。
- 熵值法也称熵权法，是学术研究，及实际应用中的一种常用且有效的编制指标的方法。1.简单理解 信息熵机器学习中的决策树算法是对信息熵的一种典型的
- <?php/** * 发送文件 * * @author: legend(legendsky@hotmai
- axios form-data格式 传输数据和文件form-data是在post请求下的一种传输方式，数据会在Form Data中传输，他的
