存档
这是一篇译文，其中涉及了不少比较专业的概念，我将用一系列文章来介绍这些概念，这些文章对于网页设计进行了更加深入的探讨，也许在我们看来有些学究气了，但是通过这种探讨，我们从中应该看到一些好的方法论和更多的用户体验关怀。 Progressive Enhancement（逐步增强）开发模式正逐步成为基于标准设计的最佳实践。从简洁，语义化的HTML标记开始，通过Javascript和CSS层层渐进式增强，我们试图为任何受众创建可用的体验，对于那些功能不那么强大的设备和浏览器能获得一个相对简单但是功能完整的用户体验，而其他那些功能齐备的则将获得剩下的附加特性和体验。 这是就是PE（Progressive Enhancement 以下缩写为PE）的基本理论。但是在实践过程中，这些增强仍然被推送给了绝大多数设备，其中包括大量不支持这些特性的对象，比如较低版本的浏览器或者是功能受限的移动客户端。这些设备一开始的确获得简单但功能完整的页面，但随后被“增强”到了乱糟糟的页面。这显然是和PE理论背道而驰的。 那我们应该怎么做增强以确保所有的设备和浏览器获得正确的效果呢？测试，这时候我们需要的是通过逐级测试来确保这点。 兼容性测试 不久之前，我们发现可以使用很简单的Javascript代码来测试目标设备对于CSS的支持情况。让我们从一个很简单的盒模型测试开始，我们插入一个对象到当前Document中，然后设置一些样式属性，然后通过Javascript来校验是否被正确支持了。 function boxmodel(){ var newDiv = document.createElement(‘div’); document.body.appendChild(newDiv); newDiv.style.width = ’20px’; newDiv.style.padding = ’10px’; var divWidth = newDiv.offsetWidth; document.body.removeChild(newDiv); return divWidth == 40; } 通过上面的TestCase，我们能很快的检查目标设备是否正确支持盒模型，然后我们也能采取对应的增强方式。 有了上面的这个主意，我们能类似的写出如下测试用例： float clear position overflow line-height 当然仅通过CSS测试并不能覆盖到所有情况，幸运的是，我们还能通过Javascript测试来做其他兼容性测试。（译注，这可能是大家比较熟悉的浏览器检测了）。 document.createElement() document.getElementById() xmlHttpRequest() window.onresize() window.print() 通过上述测试，我们可以知道是否可以正确显示客户的应用。 我和我在Filament Group的同事开发了testUserDevice.js，来完整上述所有的测试。 利用这些测试结果 整合testUserDevice.js到一个页面上是相当简单的，讲JS文件包含进来，然后调用testUserDevice.init()方法就可以了。 为了更好的阐述这些概念，我们来看一个具体的例子，这是一个有一定复杂度的表单页面，让我们从最基本的HTML开始。 DEMO1 [...]
众所周知，所有的浏览器都有一些关于CSS功能的额外扩展，例如（-ms-interpolation-mode），这些通常来自于那些未在CSS标准中明确完整的定义的特性和功能或者是在标准中已经完整定义但浏览器只是部分支持。CSS2.1标准中规定，以上这些不完全合乎标准的特性都必须使用一个供应商前缀(Vendor Prefix ‘-ms-’ for Microsoft, ‘-moz-’ for Mozilla, ‘-o-’ for Opera)。 下面介绍一下IE8下的这些额外扩展，当然我们的目的不是把那些IE Only的特性带入下一代的页面中，而是能够在浏览器支持的前提下，运用一些属于CSS3的特性，丰富一下创作思路。 Property Type W3C Status -ms-accelerator Extension -ms-background-position-x CSS3 Working Draft -ms-background-position-y CSS3 Working Draft -ms-behavior Extension -ms-block-progression CSS3 Editor’s Draft -ms-filter Extension -ms-ime-mode Extension -ms-layout-grid CSS3 Editor’s Draft -ms-layout-grid-char CSS3 Editor’s Draft -ms-layout-grid-line CSS3 Editor’s Draft -ms-layout-grid-mode CSS3 Editor’s Draft -ms-layout-grid-type CSS3 [...]
2008年8月28号，微软发布了IE8 beta2，相比三月份主要面向开发人员的Beta 1增加了大量新功能，涉及易用性、安全性、兼容性、管理性等各个方面，以及一些独特的工具。 先来介绍一下对于最终用户的新功能吧，也许是我们对ie一直以来的低要求导致了这次发布的新功能真的有点让我震了一下，真的很棒。 网站切片(Web Slices)：开发人员可以将网页的一部分标记为网站切片，让用户随时很方便地监视相关信息，点击收藏夹栏即可看到丰富的网站切片内容，开发人员也可籍此和用户建立紧密联系。 非常酷的新功能，我不知道firefox下是否已经有类似的插件了，我的生活浏览器一直是遨游，firefox只是用来工作，也许孤陋寡闻了，但是这个功能真的让我觉得会让网站开发有了新的触角。对于很多内容性的，比方说ebay或者淘宝这样的网络销售，甚至于起点这样的在线阅读网站，这种内容的预览和随时更新，远比RSS阅读器来的自然。 ————————————————- 增强的搜索框：搜索框会在用户在键入关键词的时候实时提供搜索建议，包括图片，另外搜索框现在还会提供来自用户收藏夹和浏览历史的搜索结果。 有点类似划词搜索那样，我相信随着未来网络硬件基础的不断提升，这种无孔不入的网络内容聚合将掀起又一轮网络变革。 ========================================================== 其实本意是去看看ie8对于网页设计师来说有什么新的变化的，没想到几个新功能真的是让我忍不住把赞美之词给了它们。言归正传，让我看看ie8在工作上会不会给我们一些震撼。 早在今年3月份，ie8 beta1就给开发者带了不小的期待，比如这个极像Firebug的内置调试器（上帝是派你来拯救我们的吗？）。 这样的界面恐怕不用多说什么，大家肯定看了之后有种终于盼到了的感觉。这个产品的到来将终结Firefox在设计师和开发人员中无可替代的局面。 具体有哪些改动让我们来看一下，因为内容较多，这里仅列出提纲（翻译自微软网站 http://www.microsoft.com/windows/internet-explorer/beta/readiness/developers.aspx） 注：目前下列链接仍为微软网站，等我再过一下翻译更换链接 Developer Checklist: 兼容性: 使用IE8来浏览您的网站。 如果您的网页和原来在IE7中的表现不同，您可以启用兼容模式。 更多内容，参考此处 [兼容性Compatibility] 。 如果开启兼容模式后，您的网站和在IE7下的表现和行为都完全一致的话，那您可以将IE7 meta tag加到您的网页上去。Emulate IE7 meta tag. 另外，您可以使用各种方法来校验用户的浏览器工作模式 Versioning and Internet Explorer Modes. 如果您的网页仍然存在问题，那请使用这些测试工具帮助您找到问题 testing tools. Ajax开发: 阅读更好的Ajax开发 Better AJAX Development. 阅读原生JSON支持，这也是我坚信将取代xml的传输协议 Native JSON Support. 顺手转一位大大3月份的汇总小结 IE8 (下文中的 IE8 暂时仅代表IE8 beta1) 中增加了 CSS3 中的子串匹配的属性选择器（substring matching attribute [...]
原文出处：http://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples/ 版权声明：本文版权归原作者所有 译介仅供国内读者参考 BANG421388A95514C2DCE6B44914XIANGUO 对于一个网站来说，导航栏菜单应该是最为重要的一个元素。由于网页没有什么可供用户作为定位的东西，所以全站一致的导航栏就成了少数可以给用户带来方向，引导他们浏览整个网站的元素之一。用户很依赖它，所以设计师绝对不能在这个地方马虎了事。 还是那句老话，最好的往往是最简单的，当然简单的东西绝对不代表就是乏味的。去年，我们就曾经就导航栏写过一篇文章 modern approaches of navigation design 。现在让我们看看这方面的设计的最新趋势吧。 下面就让我们来看看，最新的导航栏设计趋势，实例和一些非常炫的设计。 1.会“说话”的导航栏 （Speaking navigation） 对于导航栏来说，最重要的任务莫过于非常清楚的引领用户访问站点的每个模块。但是通常来说，很难用1-2个关键字来准确描述这个模块的具体内容和功能，特别是在水平导航栏布局下。这就是为什么通常导航栏不会简单地将关键字一个个排列起来来展示所拥有的选项（“沉默”导航栏 silent navigation），设计师多数会选择使用比较具体的描述来表达该选项的内容或者功能。 过去的几个月里，我们发现这种趋势越来越流行。 为了让信息变得更加容易接受，通常使用相同高度宽度的块状显示，大图标的使用也越来越普遍，当然评判导航栏好坏最主要的还是网页的整体布局和设计。鼠标悬停效果的设计使用，能让你的网页变得更加亲切。
原文出处：http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/ 版权声明：本文版权归原作者所有 译文仅供国内读者参考 决定一个网站成败有时候并不是样式设计，而是可用性和易用性。对于一个页面的访问者来说，他所做的只是点击然后决定下一步要做的事情，因此以用户为中心的设计思路已经成为了业界定义成功设计的事实标准。当然，如果没有任何提供给用户的功能，这个标准也不复存在了。 我们不打算深入探讨关于可用性的实践细节（比如搜索框应该放置在页面的什么位置）因为已经有相当多的文章就此做了深入的阐述，我们将重点介绍一些核心法则、启示，合理的使用这些法则，能使你的网站更加成熟，展示的内容更容易让用户理解。 请注意： 你可能对这两篇我们之前的文章感兴趣 10 Usability Nightmares 和 30 Usability Issues 。 我们会在后续的文章中继续讨论关于可用性的问题，您可以订阅我们的网站 subscribe to our RSS-feed 。 为了能够正确的使用这些法则，首先我们需要知道用户是如何和页面进行交互的，用户是如何思考的以及用户的常见行为是怎样的。 用户如何思考？ 基本上，一个网站的用户习惯和一个商店的顾客用户习惯没什么区别。用户快速地浏览每个新页面，从页面文字中找出第一个使他们感兴趣的或者和他们正在寻找的东西类似的链接并点击。因此，事实上页面的大部分内容，用户根本没有注意过。 用户总是在那些看上去可能的链接中寻找他们感兴趣并能点击的链接，然后点击。如果内容不是他们想要的，他们会立刻点击“后退”按钮并继续搜寻他们想要的内容。 用户偏好质量和可靠性 如果一个页面提供给用户以高质量的内容，用户将能够接受页面上的广告和站点的设计。这就是为什么有些站点内容质量很高，但是设计的很糟糕，依然有着很高的流量的原因。内容远比支持它的设计来的重要。切记。 用户并不会细读，他们是浏览 分析一个站点，用户始终在寻找一些锚记（译注 fixed point 内容节点）来作为页面内容的导航员。 （图1 图上的热点标示了用户的阅读集中在句子的前半部分） 网站用户是急切并强烈要求迅速满足需求的 非常简单的法则：如果一个站点不能满足用户的期望，那这个网站的设计师就是不称职，这个公司也将失去很多挣钱的机会。认知负载越高，直观导向越少，用户越是会放弃该站点来选择另一个网站来代替。 用户并不会做最佳的选择 用户不会为了搜索他们想要的东西而去寻找最快速的方法。他们不会从上至下的一段段看下去来寻找他们想要的东西。取而代之的是能够满足他们需求的第一个选择。当他们看到第一个看上去能够满足他们需求的链接，他们就会在第一时间点击。所以，从全部内容中找出最优的链接耗时太多，也太累，寻找满足需求的看上去更有效率。[video] (图2 图3 这两幅图片展示了线性阅读在网页浏览中是不适用的) 用户跟从的是他们的直觉 大多数情况下，用户不会认真去看设计师提供的内容，根据Steve Krug(Don’t make me think 作者)的说法，主要原因是用户根本不在乎这些。 用户希望拥有对浏览器的控制 用户希望能够控制他们的浏览器，并且信赖从始至终提供一直内容展现形式的网站。比如，他们不希望自动弹出的窗口，和随时能够通过“后退”按钮回到他们先前浏览过的网页，所以，一个非常重要的准则就是“不要在新窗口打开网页”。（译注：这点上，中国的用户的操作习惯恰恰相反，比如谷歌就不得不改成在新窗口打开，另外，在web标准中<a>标记的target属性是被废弃的，也是基于这个原因。） 1. [...]
The concept of floats is probably one of the most unintuitive concepts in CSS. Floats are often misunderstood and blamed for floating all the context around it, causing readability and usability problems. However, the reason for these problems isn’t the theory itself, but the way the theory is interpreted – by developers and browsers. Float（浮动）概念也许是CSS中最让人迷惑的一个概念吧。Float经常被错误理解，而且因为将上下文元素全部浮动导致的可读性、可用性问题备受责难。然而，这些问题的根源并不在于理论本身，而是开发人员以及浏览器对理论的解读造成的。 [...]
