存档
最近每天沉醉在那堆垃圾代码中改着无穷无尽的Defect，也算是为了对岸几百万移动用户的福祉做出应有的贡献了。 非常有名的CSS Framework – Blueprint在更换了项目leader之后，最近发布了一个新的版本，Blueprint(Css Framework) version0.8。新的leader将这一版本称为新的里程碑版本。并且看的出来，作者对于1.0的正式release有着很高的期待。 简单介绍一下Blueprint这个CSS Framework，翻译自Blueprint的Quick Start Tutorial，如果需要原文在官方网站上都有。我只是节选了一些： 源文件: blueprint/src/reset.css: 基本已经总结出最佳实践的reset.css，为页面元素重置默认值。 blueprint/src/grid.css: 之前我也介绍960gs这个Framework，grid原型设计现在是很流行的原型设计方法了，Blueprint也提供了很多方便的class来帮助你快速建立grid布局。 blueprint/src/typography.css: 关于排版的css，包含了一些非常精妙的文字排版样式。 blueprint/src/forms.css: 包含了一些表单样式。 blueprint/src/print.css: 很多时候我们没有考虑到用户的打印样式，很多无用的图片，广告都是用户所不希望打印，所以需要重新设置打印样式。 blueprint/src/ie.css: 包含了ie6和ie7的许多css hack。 再来简单看看到底该如何使用grid.css，之前写[960是个神奇的数字 - 960 Grid System介绍]，就有人问到底该如何使用960gs这样的框架，还有人说其实我也讲不出该如何使用。我看下来，可能是很多人对原型辅助css的期望过高了，他并不会帮我们做什么事情，只是帮助我们更好的去做一些事情，来看下例子： <div class=”container showgrid”> <div class=”span-24″> 头部页眉 </div> <div class=”span-4″> 左边侧栏 </div> <div class=”span-16″> <div class=”span-8″> 居中行1-1 </div> <div class=”span-4″> 居中行1-2 </div> <div class=”span-4 last”> 居中行1-3 </div> [...]
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/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. [...]
