`
oywl2008
  • 浏览: 990185 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

两大设计模式 塑造高可读性的网页布局

 
阅读更多

【编者按】网页设计中,视觉层级的组织十分重要,它可帮助用户快速抓取所需关键内容,获得愉悦体验。目光追踪定位技术可帮助实现这一点,其可帮助设计师更好地懂得如何设计既高效又有审美趣味的网站。Jerry Cao在Webdesigner Depot上发表了《How Eye Scanning Impacts Visual Hierarchy In  UX Design》一文,详细介绍了F-模式、Z-模式,并分析了iZettle、DropBox、Evernote等知名网站如何利用这两种模式完美搭建页面布局的。CSDN对该文章进行了翻译,内容如下。

欢迎加入CSDN用户体验交流群:190426269,进行行业探讨。
从希腊的花瓶到意大利的教堂,艺术在几千年的历史长河中,熏陶了我们对“美”的理解,伴随着最近“目光追踪定位技术”的发展,让我们知道了人是如何以一个动态的视角去感知这个世界的。更让人兴奋的是,这项技术帮助我们更好地懂得如何设计既高效又有审美趣味的网站。

网页设计(作为一种视觉艺术)与传统艺术形式遵循着一样的规则。本文中,我们将简要概述视觉组织的重要性,然后说明“目光跟踪定位技术”是怎样改变Web界面布局的。

创建好的视觉组织结构

毫无疑问,一个网站的视觉效果影响着它能否成功,找出这个原因很重要。作家及雅虎的高级产品责人Luke Wroblewski在他的论文《Communicating with Visual Hierarchy》中提到一个Web界面的视觉呈现要点应包括以下几部分:

很自然流畅的向导

优秀的界面能引导用户很自然地进入下一操作,而不会给用户带来霸道而专横的感觉。你也许会认为企业所做的一切都是商业行为,但毫无疑问Uber是一个流畅到让人难以置信的结构化网站。关键点在于顶部的滚动设计,紧随其后的是一个有趣的滑块来提供不同的汽车选项,然后按照某种逻辑关系帮你顺利地找到所在城市的座驾。



与用户进行交流

通过拼接不同的信息碎片,不用任何的交流信息来说明,UI就可以在用户头脑中形成一个信息链。看看流行的设计网站Abduzeedo是怎么设计的:头部是占一大块区域的分类信息,特色内容在中间部分,细小分类则在页脚部分。



产生情感共鸣

不要错误地把你的网站仅仅当做一个呆板的工具。网站也能与用户建立情感上的联系,如果你不这样做,你的竞争可是会的。事实上,如果你做出一个有积极情感的网站,用户更容易原谅你界面上的缺陷。MailChimp就是一个完美的例子,它的界面使用起来令人心情愉悦,使用起来更是一种享受。



人的视觉具有倾向性

有时,似乎你的眼睛也有他们自己的思想。经过多年的进化,眼睛有了发现我们认为重要的对象和动作的能力,不管是某个人以性感的身姿穿过马路或是可爱的卡通熊的蜂蜜广告都能吸引我们的注意。当然在每个人心中所谓的“重要性”是不一样的,因人而异,唯一不变的是他们的行为倾向。通常在浏览一个网页时大部分人的行为倾向是一样的。

所谓“行为倾向”有两个,我们将详细讨论。99Designs作家Alex Bigman的文章《6 principles of visual hierarchy for designers》展示了那些有从左往右阅读习惯的用户群,当设计一个网站布局时有两个非常通用和有效的设计模式。

第一是F-模式,常用于文本(当然也可以用于其它用途)。第二是Z-模式,可用于任何视觉布局。我们将在下面分别解释他们各自的优点和缺点。
F-模式

F-模式的页面往往包含大量文本,比如博客、新闻资讯、文章等站点页面。

当面对成段的大量文字信息的时候,大多数读者会纵向地先浏览每段左边的文本,特别是在段落开始的几个句子中寻找关键词或者他们的兴趣点。最终读者找到他们喜欢的东西,再开始正常地横向阅读。最终的结果是看起来像字母F或E。

Nielson Norman团队中的Jakob Nielson发起了一个基于232人浏览成千上万个网站可读性研究。通过他的研究,他记录了他认为的“F-模式”的实际意义:

用户很少会认真地读文本的每一个字;
前两个段落是最重要的,它应该包含你的要点;
在段落的开始、副标题和关键位置中放入吸引人的关键词。
当然,左上角是最重要的,因为这是所有有从左往右阅读习惯的人群阅读开始的地方。用户通常会水平地通读头部,所以这是一个很好地放置导航条或(和)“用户行为号召”的地方。然后用户从左侧纵向浏览下来,直到遇到感兴趣的内容。最终,用户的目光结束在页面的右侧,这是一个放置“用户行为号召”或广告的地方。只是不要让侧边栏遮挡住内容。

但F型并不是一个定式——没有事实说明它是最好的,但更像是由大部分用户的行为习惯而总结出来的一些松散的规律。请牢记这一点,因为F-模式在开始几行后就失去了它的有效性。

Kickstarter使用一张卡片来展示特色项目,这使得用户不会在浏览完开始的500像素后就变得视觉疲劳。

另一方面,iZettle在主页上采用了一种更传统、遵循F-模式的方法。不管怎样,它通过在背景图片的上层叠加主文本(使用iZettle来增长您的业务)和“用户行为号召”来设法避免过于模板化的外观。我们认为这是适应这种阅读模式最基本简洁的方法。



Z-模式

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

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

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

背景:保持背景在它应该处于的位置:隐蔽在内容之下。不让它分散读者的注意力。
要点1:作为第一个要点,将Logo放置在固定位置。
要点2:虽然主要的用户号召应该放在后面,这对二级用户号召来说是一个好位置,可强调或突出导航条(一个漂亮的图形或图像滑块将有助于分割页面的顶部和底部,鼓励读者按照Z模式所期待的方式来浏览)。
要点3:选取最佳位置来吸引读者对其它链接的注意,或者吸引读者的目光到网站的最终目标:要点4。
要点4——作为“终点”,这是一个完美的放置主要用户号召的地方。
首先你需要做的是把页面上的元素按照重要性进行排序。然后,从结果中挑选出适当的“热点”就会变得很简单。

此外,Z-模式可以重复和扩展到整个页面。我们来看看Evernote是如何按“之”字型向下放置他们的“用户号召”和卖点的。



DropBox没有使用任何背景图片,很简单地实现了这种“曲折”的模式。相反的,更多功能型的设计内置在了布局中,比如用户号召“浏览更多”,当用户浏览整个网页时,它帮助用户链接进入每一板块的细节部分。这也有助于通知读者点击到下一个相关页面,而不需要先去通读页面所有内容。



设计趋势预测

一个优秀的界面设计应该像一个无形的手在左右用户思考的速度。从F-模式和Z-模式设计趋势获得的最重要的一点就是:你应该将你认为最重要的内容很自然地展现给读者,而不是让他们感觉到在强迫他们看。

能敏锐地把握细节,对任何页面布局来说都是一个优势。这些模式可以让用户感觉是为他们提供一些相关建议,而不是强迫他们接受。(责编:陈秋歌)

 

http://www.iteye.com/news/30361

 

 

 

分享到:
评论

相关推荐

    两大设计模式塑造高可读性的网页布局

    网页设计(作为一种视觉艺术)与传统艺术形式遵循着一样的规则。本文中,我们将简要概述视觉组织的重要性,然后说明“目光跟踪定位技术”是怎样改变Web界面布局的。毫无疑问,一个网站的视觉效果影响着它能否成功,...

    重学java的设计模式

    设计模式,让代码更优化,拓展性更高,可读性更好,让你更好地理解设计模式

    Android 常用设计模式

    它有助于提高开发速度,并且使用设计模式模板更快地开发原型解决方案可以提高编码效率、可维护性和代码可读性。 设计模式的类型: 以下是不同类型的设计模式: 创意设计模式 结构设计模式 行为设计模式。 1. 创造...

    Head First设计模式(中文,无水印,完整版)

    第12章介绍如何将两个以上的设计模式结合起来成为新的设计模式(例如著名的MVC模式),作者称其为复合设计模式(这是作者自创的名称,并非四人组的标准名词),第13章介绍如何进一步学习设计模式,如何发觉新的设计...

    JAVA23种设计模式及快捷记忆

    工厂模式、抽象工厂模式、单例模式、建造者模式、原型模式、适配器模式、装饰者模式、代理模式、外观模式、桥接模式、组合模式、享元模式、策略模式、模板方法模式、观察者模式、迭代器模式、责任链模式、命令模式、...

    Head First 设计模式(中文完整版+附书源码)part1

    第12章介绍如何将两个以上的设计模式结合起来成为新的设计模式(例如著名的MVC模式),作者称其为复合设计模式(这是作者自创的名称,并非四人组的标准名词),第13章介绍如何进一步学习设计模式,如何发觉新的设计...

    设计模式笔记(包含所有设计模式)个人总结提炼笔记

    设计模式提供了一套通用的解决方案,可以帮助开发人员更好地组织和设计代码,提高代码的可读性、可维护性和可扩展性。 设计模式可以分为三类:创建型模式、结构型模式和行为型模式。 1. 创建型模式:创建型模式关注...

    UML类图及、7大设计原则、23种设计模式

    设计模式(Design Pattern)是前辈们对代码开发经验的总结,是解决特定问题的一系列套路。它不是 语法规定,而是一套用来提高代码可复用性、可维护性、可读性、稳健性以及安全性的解决方案

    个人精简总结笔记_设计模式.pdf

    设计模式,个人笔记摘要。 设计模式是一套被人反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。它描述了在软件设计中一些不断发生的问题,以及这些该问题的解决方案。换句话说,它是特定解决问题的一...

    Head First设计模式(高清中文版)

    《O'Reilly:Head First设计模式(中文版)》趋近完美,因为它在提供专业知识的同时,仍然具有相当高的可读性。  本书共有14章,每章都介绍了几个设计模式,完整地涵盖了四人组版本全部23个设计模式。

    《HeadFirst设计模式》学习伴侣

    你不想重新发明轮子(或者更差的是,漏气的轮子),所以你从设计模式中寻求协助——设计模式是过去人们面对同样的软件设计问题所学来的经验。有了设计模式,你就可以利用他人实践经验的精华,省下的时间可以用在……...

    Java 实现的面向对象软件设计模式

    在程序设计中 引入设计模式可以提高代码的可读性和程序运行时的可靠性,使程序设计得到规范和统一。 设计模式代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发...

    Java 设计模式详解超详细(含示例代码)

    设计模式的目标是提高代码的可重用性、可维护性和可读性,同时减少设计和实现中的复杂性。 Java设计模式可以分为创建型模式、结构型模式和行为型模式三类。创建型模式涉及对象的创建,包括单例模式、工厂模式、原型...

    Head First设计模式(中文)

    第12章介绍如何将两个以上的设计模式结合起来成为新的设计模式(例如著名的MVC模式),作者称其为复合设计模式(这是作者自创的名称,并非四人组的标准名词),第13章介绍如何进一步学习设计模式,如何发觉新的设计...

    使CRON表达式具有人类可读性

    ⏰️使CRON表达式具有人类可读性

    IOS设计模式

    1、 IOS设计模式的六大设计原则之单一职责原则(SRP,Single Responsibility Principle) 定义  就一个类而言,应该仅有一个引起它变化的原因。 定义解读  这是六大原则中最简单的一种,通俗点说,就是不存在多个...

    常用的Javascript设计模式.pdf

    JavaScript设计模式的作用——提高代码的重用性,可读性,使代码更容易的维护和扩展。

    设计模式最全学习文档.one

    关于设计模式的教程,解析 设计模式(Design Pattern)是前辈们对代码开发经验的总结,是解决特定问题的一系列套路。它不是语法规定,而是一套用来提高代码可复用性、可维护性、可读性、稳健性以及安全性的解决方案...

    非母语英语人士的可读性指标:阅读速度和理解力

    通过提出一个简单的分析模型,本文提出了一项评估非母语英语学生的阅读速度和阅读理解的调查。 为此,使用了各种可读性软件来估计给定文本的平均成绩... 这种以线性形式对可读性进行建模的方法极大地简化了可读性分析。

    C#设计模式(带源码)

    本书介绍了c#设计模式.其中c#是Microsoft公司推出的新一代软件开发环境Microsoft核心语言,它的出现代表了...本书主要讲述的是,如何使 用最常见的设计模式编写c#程序,以提高程序的可读性、可重用性和可维护性。

Global site tag (gtag.js) - Google Analytics