- 1、本文档共23页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
提升设计品质的8种布局方案
网页设计中,内容组织恐怕是最至关重要、最影响设计品质的方面了。如何将信息组织到好的布局中,是一个网站的基础,并且应该在考虑外观之前就决定好。没有好的布局,网页信息流就不能正确传递,所有东西都不能建立起合理的联系。
在这篇文章中,我们将讨论八个布局解决方案/技巧,这些方案和技巧将有助于你创建整洁有序的内容布局。这八个技巧包括滑门(sliders)、标签式、渐进布局(progressivelayouts)、结构网格、模态窗口(modalwindow)、翻转元素、手风琴效果(accordions)以及超大下拉菜单(megadrop-down-menus)。
1.滑动样式与传送带(SlidersandCarousels)
滑门(Sliders),也可称为传送带(carousels),是一种有序的、交互性强、十分平滑地展示内容的方式。滑门样式是一个非常流行的技巧,大家都觉得它很好用,能让你在固定的区块内填充上大量内容。没有滑门的帮助,这些内容可能就要分开放到页面中的各个地方。而大多数时候,你在使用页面空间时总是捉襟见肘。或者,有些内容是你希望“用户要求”后才出现。这有助于让用户一次只关注一个内容区块,也符合他们自己的便利需求。
滑门样式的实例
导航区提供缩略图与图标
运用滑门和幻灯样式时,最好在导航区提供图标或缩略图,以便使导航更加简单直观。缩略图和图标给用户指出明路,向他们解释当前所在位置,以及有哪些浏览选项可供选择(比如说幻灯片的导航可以是水平的,也可以是垂直的)。另外,还能方便他们快速选择特定滑门页。
Coda网站的滑门顶部设计了标签卡,他们使用的是“滑动门+标签卡”的混合样式。这个主意绝顶聪明,因为通过看缩略图,用户就能快速得知特定滑门页的内容。而且,这些图标也提供了强大的、令人印象深刻的、干净整洁的视觉支持。除了图标和标签你也可以在标题前加上小图片,或者只用数字也行。
用于展示产品的滑门样式
与上面的例子对应,滑门不仅能用于大容量信息的组织,也能为用户浏览大量产品条目提供方便。SourceBits(见下图)使用了多层滑门(一个水平的,一个垂直的),用唱片封面作为导航条目。
水平滑门两端都有大的圆形箭头图标,实时反映左右导航的可用性。滑动的时候有平滑的动画,用起来非常舒服。同时,你也能看到,各个元素间距都精心设计过,这有助于内容组织,也提升了可用性。鼠标滑过时,每个条目还有漂亮的聚光灯效果。
垂直滑动的内容以及超大的水平“点击条”
接下来看看QuickSnapper的滑门。这是一个完美融入页面整体布局的十分好用的垂直滑门。滑门内容中有大量截屏图,内容被有序地组织起来。这个滑门最赞的地方就是上下方的按钮导航。按钮宽及整个滑门,大的按钮让“推拉”滑门更加容易。
还有,这些按钮的:active和:focus效果也很漂亮。
滑门脚本
你可以参考下面的脚本、技巧和教程制作你自己的滑门:
SlickAccessibleSlideshowusingjQuery
Coda-Slider1.1.1
jquery.scrollable1.0.2
CreateanAmazonBooksWidgetwithjQueryandXML
AgileCarousel
EasyImageorContentSlider
SliderGallery
CodaSliderEffect
iCarousel
2.标签卡导航元素
本质上标签卡导航和滑门效果是差不多的技巧。它们都能帮你把一大片内容放到一小块区域里。标签卡导航很常见,但也有很多不常见的运用方式。我们这里关注的是在一个页面内部的标签卡,而不是用于在不同页面之间跳转的标签样式主导航。标签卡很明显地将内容划分到不同区块,最终又把他们融合到占地面积很小的一个区块中。
标签卡的样式范例
出众的背景,大的可点击区域,明显的分割
第一个例子来自MacPro网站的“Performance”部分,其标签元素的组织非常值得学习。这些标签卡上的文字都十分易读,可点击区域很大,各标签视觉上的区分也很明显,这正是大部分用户期待的样式啊。你也应该能注意到,当前标签卡上还有着十分微妙的渐变背景,与主内容区块很好地融合在了一起。未激活的标签背景则略暗,主内容区块在其上有微弱的投影,这种做法加强了深度感和立体效果。十分简单而有效的技巧。
按钮区分的简洁标签卡
以下是另一个利用标签卡紧凑地展示信息的实例。根据Atebits的布局结构,介绍性内容的空间被挤压,不太适合做成多区块样式。所以他们介绍内容的三大部分被组织到了标签
您可能关注的文档
- 声现象测试题.doc
- 电焊机的安装搬运安全技术交底.doc
- 语文课堂教学设计方案.doc
- 中考英语宾语从句.doc
- 初三数学讲义(5)相似专题1.doc
- 混凝土缺陷整改方案.docx
- 测定铀的实验方法(核工业部).doc
- 电光强度调制器.doc
- 《牛津小学英语》6B Unit 4 单元教材分析.docx
- 满分写作周周赢 PPTMonday 满分范文晨诵.pptx
- 《根鸟》读书笔记好词好句.docx
- 《楚门的世界》善良的人值得被善待.docx
- 《楚门的世界》经典台词 总有一句能治愈你.docx
- 《桂林山水》教学反思.docx
- 狗儿爷涅盘(北京人艺经典话剧).pdf
- 2024年01月广东中山市教育和体育局直属学校(中山市特殊教育学校)招考聘用教职员39人笔试笔试历年典型考题及考点研判与答案解析.docx
- 2024年01月广东广州市天河区天河南街道社区卫生服务中心招考聘用编外校医笔试笔试历年典型考题及考点研判与答案解析.docx
- 2024年01月广东佛山南海区西樵镇西樵派出所招考聘用警务辅助人员笔试笔试历年典型考题及考点研判与答案解析.docx
- 2024年01月广东深圳市光明区马田小学嘉域幼儿园招考聘用工作人员笔试笔试历年典型考题及考点研判与答案解析.docx
- 广告营销:数字营销创投项目计划书.pptx
文档评论(0)