Group items tagged

希腊Web 设计师Christos Chiotis 发表在 CssGlobe 的一篇文章，讲述了黄金分割率在 CSS 中的应用。黄金分割率是一个应用广泛的数学常数，大约为 1.6180339887。黄金分割率用在 Web 设计中，可以为设计带来更多视觉上的和谐。在一个简单的两栏式页面布局中，使用两个容器，第一个容器用来显示主要内容，第二个容器显示侧条。比如，页面宽度为 960 px，使用黄金分割率，主内容容器的宽度应该为 960 / 1.62 = 593 px，而侧条的宽度为 960-593=367 px。

在 Web 排版与布局中可以使用以下基本 CSS 设置line-height = font-size * 1.62paragraph margin = paragraph line-height * 1.62 / 2header’s margin-top = headers line-height * 1.62

用户界面 I Like Your Color 输入URL然后它会抓出其中的颜色并用16进制表示。 CSS Multi-element Rollover Generator 使用CSS和一个图片创建出一个翻转按钮的样式。 CSS Rounded Box Generator Ruthsarian Layouts 6个CSS页面布局模板，包括颜色、标题等。 Bluerobot Layout Reservoir 2栏和3栏的CSS布局框架 Glish CSS Layout techniques 2、3、 4栏的CSS布局框架 The Layout-o-matic 输入页宽、栏数和padding，它会自动生成CSS和HTML的布局框架。 Little Boxes w3cn.org上提供的那些布局模板 Open Source Web Design 各种免费的完整页面模板 Web Builders’ Toolkit 更多的模版资源 Iconico Online CSS Scrollbar Color Changer List-u-Like 一个CSS菜单生成器：轻松创建采用li并兼容各种浏览器的导航菜单。 Nifty Corners: 无需图片的圆角矩形 Round Corner Stone/Icon (rcsi) V1.0 增强的圆角矩形 Xylescope 无需下载其他站点就能轻松分析其CSS代码。 W3C Core Styles Checkliste zur Webseitengestaltung Testseite zur Zeilenbreite

易用性检查 Accessibility Valet Demonstrator Bobby Online Service Cynthia Says OCAWA Web Accessibility Expert Torquemada 使用工具对页面进行一个完整的易用性分析方法测试，以快速辨别页面中哪些部分存在错误。 UI Site check 一个站点检查工具，只需要输入你的网址，便可以列出几十个验证器和易用性工具。 WAVE 3.5 Accessibility Tool 可以提供你页面上的易用性细节和错误方面的有用信息。他会用红黄绿蓝等几种图标来表示需要改进的页面部分。这些图标代表了你页面上有关结构、内容、可用性和易用性方面的问题细节。你可以清楚地看到当前页面上哪些位置存在问题。 Web-based Site Usability Checker WebXACT Quality & Accessibility Check 一个免费的在线服务，让你对单个页面进行质量、易用性和保密性问题的测试。 Will the browser apply the rule(s)? TAW - Test accessibilidad web

整理和优化 CSS Formatter and Optimiser 能让你选择你的CSS更易读还是更小。 CSS Compressor 使用这个工具可以压缩你的CSS使之提高载入速度和节约带宽。 Online CSS Compressor 多种途径来清理并压缩你的CSS，牺牲了可读性来获得相当程度的优化和尺寸的减少。 CSS Compressor CSS Syntax Checker for BBEdit and TextWrangler CSSTidy CSSTidy 是一个开源的CSS解释器和优化工具 CSS Tweak ~ Web Based CSS Tweaker! CSS Tweak 会优化你的CSS以减少文件大小和下载时间。 Clean CSS - Optmize and Format your CSS Format CSS Online 自动格式化你的CSS使之便于阅读和编辑 Online CSS Optimizer CSS Optimizer 优化并减少CSS的文件尺寸 Online CSS Optimiser/Optimizer 这个工具用于优化CSS代码。 Tabifier 使HTML和CSS代码变漂亮。 Webucator 有一个CSS参考手册，你还可以在上面测试你的CSS代码 CSS Centricle CSS hack浏览器兼容一览表 （就是w3cn.org 上的那个）

反 Box 式布局 单页布局 多栏布局  巨型插图与多变背景 更多留白 社会网络元素 讲解式导航菜单 Status elements (Flickr, Twitter et al) 动态 Tab  超大搜索框 Category visuals 作者头像图标 （这也算？-译者） 图标和视觉引导 Tag 索引 (取代 Tag 云) 插图风格 水彩风格 手写风格 怀旧风格 有机纹理或照片背景 证章风格 价格标签风格  条带风格

1，界面上的文字应该做到：清楚而准确的向用户传达信息。其实这是内容优化的最基本要求，本应该是所有产品都可以做到的。但往往是越熟练的人越容易在这里出现问题。常见表现：过份的向非专业用户展示专业词汇、信息提示本身误导了用户。 比如，某视频网站突然蹦出来一个“bps超出，链接失败。”（查了资料我才明白bps大概是每秒链接数的意思）比如，有些网站用户没有注册也去登录的时候反馈提示为“密码错误”。其实直接提示没有此用户，然后给个链接“注册此用户”，你会发现转化率相当高，注册量有了用户也方便了。

3，整个产品不同位置的文字应该统一。大家都讲普通话，不能一会中国话一会外国文。这是一个最简单的问题，却是大部分网站都未能避免的问题。（特别是在中文网站，大概是因为中文说法太多了）比如，作一个IM软件，一开始是“添加好友”，接下来“联系人列表”，然后又是“不在线的朋友”；一开始是“注册用户名”、然后是“登录ID”、还有“您的账户”、“管理帐号”、

2，界面上的文字应该便于用户阅读并快速理解其含义。最常见的问题表现是：语言过于罗嗦、信息排列混乱。 比如，某门户网站在注册blog的时，“您的登录名”旁边这么写辅助说明：“4-16个字符（包括4、16），英文小写、汉字、数字、下划线，不支持空格，不支持全角英文，不支持纯数字，不能使用下划线开头和结尾。”。（大致推算了一下，一个IQ小于200的普通用户如果认真读完并完整理解这句话的意思需要近1分钟时间）比如，另一门户的blog和他旗下的校友录网站，东边一个下划线、西边一个icon加文字、南边一个按钮加文字、北边一个红色、中间还有一个红色加粗。我进去之后真不知道什么地方可以点什么地方不可以点，什么地方能点什么地方不能点…再比如，某电子邮件服务在注册的时候这样排列：“用户名:___、密码:___、密码强度：[][][]、重复密码：___”。吓的我还以为可以自定义密码强度。。。

团队创建的框架包含5个样式文件： reset.css —处理重置 type.css —处理排版 grid.css —处理布局 widgets.css —处理小零件（widgets），如tab菜单、下拉菜单、以及“更多”按钮 base.css —包含所有的其他样式表文件，以便我们只需要在(X)HTML引用base.css即可使用整个CSS框架 然后，我们把框架存放在一个单独的地方，使每一个站点都引入这个框架。当然，每一个网站也需要有特有样式表，特有样式对框架进行了必要的补充

几乎每个我参与的项目中，我必须声明的几个CSS问题： “大量重置”浏览器默认风格，比如，设置所有元素的margin和padding为0，去掉框架（framesets）和图片（images）的border，等等。 以基线对齐。这包括诸如设定块级元素的margins相同的(或多个)基准行高，如段落（paragraph）、头（header）、以及列表（list）。 创建表单（Form）的基本样式。 创建几个常用的CSS 类，例如，.hide(把display置为none，即隐藏元素)、.mute(设定为一个较小的字体和较亮的颜色)。 还有更有趣的事情，许多网站设计师发现自己不断重复使用着相同的基本结构，为什么不动它整理成自己的，在某种程度上可以非常灵活的用于多个网站? Yahoo这样做了，这就是YUI。当我们为的劳伦斯日报网站（the Journal-World）建立CSS框架的时候，我先看看Yahoo是怎么做的。我们很肯定那不是我们想要的，但作为一个很好的例子，给我们提供了很多思考和如何建构自己框架的想法。我们解决了16个单元格的问题，它具有足够的灵活性使我们的每一个网站都可以应用，即使每个网站看上去与下一个版本有些差异。另外大多数网站共用widgets ，象下拉菜单、导航菜单、按钮等，这些也是主要的需要抽象提取的对象。除此之外,你可能有共同的内容名称，如图片列表的缩略图，你可以规范对CSS命名，如“thumbnail-list”，让所有显示缩略图的都使用这个CSS类。 另外要做的可能是抽取hack（如兼容那些旧浏览器)加入自己的扩展的样式模块。我自己尝试过，但发现hack过于专有而不能抽取到通用框架里。

一套包含工具、函数库、约定，以及尝试从常用任务中抽象出可以复用的通用模块，目标是使设计师和开发人员把重点放在任务项目所特有的方面，避免重复开发。通常的讲，框架就是上面提到的JavaScript框架和Web应用框架。

　　步骤一：数据调查          数据可以带来什么？对于各页面及路径的pv(产品),uv(用户)的总结，可以得到产品使用情况的一个大致概貌。　 　　 缺乏什么？不了解用户，不了解过程。 　　步骤二：用户访谈 　　有什么好处？产品和用户之间的联系，就像一个黑匣子。对用户的访谈，就是一个试图打开黑匣子的过程。 　　打开了黑匣子，我们就可以改造他们之间的路径。从而使两者无缝融合。就像是研究dna，对结构的研究可以重塑基因。反映到产品上，就是我们可以以用户的心理模型去创造产品，或者是用富于创造的产品去影响用户。 　　步骤三：产品分析 　　即使了解用户，是否能提出有效的解决方案呢？此时，对于相关产品的研究就会作出帮助。如果说对用户的需求，可以对产品有纵深的认识。那么对产品的分析，有利于横向去加深去产品的理解。为什么做同一个功能，会产生出两种不同的产品？差异表现在大体，也体现在细节，通过不断的比较，会发现产品各功能间，产品和用户间千丝万缕的联系。 　　步骤四：产品定位 　　定位本应在一个产品做出之前决定，可为什么我会在此阶段提出这个步骤呢？事实上，因前面工作的铺垫。只有了解了用户，了解了相关产品后，定位才会更加明确。最初时，时时需要一个定位，却感觉模糊，在此刻，就清楚许多。能否改变，看造化了~~ 　　步骤五：功能确认 　　基于对用户和产品的分析，此时会提出一些新的功能。从产品长远的发展，对用户使用的引导，以及易用性综合考虑，慎审地推出每一项功能。 　　步骤六：信息架构 　　产品的印象开始在脑海里浮现。此时，将信息注入到产品结构中去。导航，管理等是很重要的几项，需要格外小心。另外，不同的页面有不同的信息，以及页面与页面间的信息跳转，甚至是产品间的跳转，每条信息都需要经过审核。如果对产品没有帮助，或者对用户是负担，都不要向里加。 　　步骤七：页面原型 　　就个人而言，在页面原型阶段，除了用visio来画结构图，还是不自觉得要用ps去协助找感觉，这个过程，对自己而言也是一个迭代的过程。当然，之前那些阶段，使整个产品的结构都在脑海里快成型了，这个只需要把它落实到纸上。 　　原型的确认，需要坚持。如果是你自己做了这个过程，而且每一点都是经过思考的。那么就去说服来自各方的反对。事实上，你要相信，人们相信思考的价值，只要你付出了，就有回报，最怕没有付出天天在那里抱怨。 　　步骤八：视觉设计 　　不必多说了。可能会比较多，icon，字体，区域的划分，模块的统一，css的定义，风格的设定~~~所有的一切，都要体现前面工作所得到的东西。 　　步骤清晰，但其实中间的过程可能更有意思。

GTD综述和介绍： 什么是"GTD" GTD中的关键词 为什么GTD这么受欢迎? 你为什么需要GTD？ 5分钟向你介绍什么是GTD 开始GTD时你需要知道什么 GTD初学者须知五条 几个中文GTD在线网站 学习GTD后的十个改变 6个步骤Getting Things Done 一百步掌握GTD GTD知识深入： GTD：5条你需要明白的道理 GTD中容易遇见的错误（第一部分） GTD中容易遇见的错误（第二部分） GTD：收集的技巧 收件箱管理——清空你的收件箱 为什么下一步行动这么重要？ 设置每天最重要的任务 同强动力的任务改善你的工作效率 放置大石头的艺术：让你的效率翻倍 如何建立有强行动性的任务清单 为什么你的任务清单如此糟糕 GTD：怎样不完成所有的任务 GTD：培养每周回顾的好习惯 每周回顾：GTD和实现目标的关键 如何在一小时内完成每周回顾 简化David Allen复杂的GTD配置 GTD资源下载： Getting Things Done中文版下载《尽管去做——无压工作的艺术》 Getting Things Done FAST - Workbook 中文版下载 GTD相关有声资料整理收集 GTD FAST配套音频下载 《褪墨优秀文章选摘第一期》下载 GTD工具介绍（软件）： ThinkingRock:最好的GTD软件 - 综合介绍 ThinkingRock:最好的GTD软件2 - 使用说明 ThinkingRock推出新版本——支持中文 ThinkingRock Hacks:调整字体大小 ThinkingRock Hacks:让Report输出中文 Thinkingrock Hacks:设置周期性任务 GTD移动工具（PDA）： MyLife Organized不完全应用手册（上） MyLife Organized不完全应用手册（中） MyLife Organized不完全应用手册（下） Pocket Informant不完全应用手册（上） Pocket Informant不完全应用手册（下） 非电子类GTD工具： 理想的笔记本：Moleskine Moleskine的GTD应用 漂亮简单的纸质管理工具：Hipster PDA GTD应用延伸： 学生版GTD：如何成为一个A学生（上） 学生版GTD：如何成为一个A学生（下） 博客版GTD：无压博客的艺术 运用GTD来整理衣柜 时间管理实践总结（软件应用篇） 时间管理实践总结（硬件工具篇） 简单做（ZTD）系列： 更简单，更具行动力的终极高效系统：Zen To Done(简易做) 简单做(ZTD)习惯培养1——收集 简单做(ZTD)习惯培养2——处理 简单做(ZTD)习惯培养3——计划 简单做(ZTD)习惯培养4——执行 简单做(ZTD)习惯培养5——信任的系统 简单做(ZTD)习惯培养6——管理 简单做(ZTD)习惯培养7——回顾 简单做(ZTD)习惯培养8——简化 简单做(ZTD)习惯培养9——常规 简单做(ZTD)习惯培养10——激情 如何培养简单做(ZTD)中的十个好习惯 简单做(ZTD)的十个好习惯总结

（1）网站栏目结构合理，栏目设置不要过于复杂；（2）网站导航清晰且全站统一，通过任何一个网页可以逐级返回上一级栏目直到首页；（3）网页布局设计合理，网站设计符合用户浏览习惯；（4）重要文字信息尽可能出现在网页靠前位置；（5）字体清晰，CSS风格协调一致；（6）最多3次点击可到达产品详细内容页面；（7）通过网站任何一个网页不超过3次点击可达到站内其他任何一个网页；（8）遵照搜索引擎为管理员提供的网站优化指南，通过网站结构和内容等基本要素的优化为搜索引擎检索信息提供方便，不采用任何被搜索引擎视为垃圾信息的方法和欺骗搜索引擎的方式；（9）网站首页、栏目首页及产品内容页面均有一定的文字信息量；（10）每个网页有独立的、可概括说明该网页核心内容的网页标题；（11）每个网页有独立的、与该网页内容相关的META标签设计；（12）每个网页有独立的URL；（13）产品内容页面URL尽可能简短且体现出产品属性；（14）产品/企业新闻详细内容页面是独立网页不是弹出窗口；（15）对于产品品种多的企业网站，要有合理的产品分页方式；（16）网站内容保持适当的更新周期。

1—logo：基本logo特征，符合logo设计基础（平面设计通用）显示器效果：清晰度，最小尺寸（因显示器分辨率而带来的，等同线下平面设计的印刷效果）2—文字：内容等级决定字体、字号大小、粗细；状态决定颜色（默认或者根据网站特殊统一）3—广告、内容图片：尺寸样式的定位，同一页面的和谐性，图片的优化，位置的节奏，大小对比。4—icon：品牌性，表达准确合理，设计手法（依据品牌性），一致性，作用：吸引，醒目，方便识别、理解、操作、记忆。5—可点击（button)：区别（不可点击），根据人的生活经验：厚度，可按，质感（实体联想），色彩（品牌性、统一性、对比性）；统一的样式大小（依据里面文字的内边距统一）6—背景图片：氛围效果营造，同产品的统一性，优化（品质大小，色彩信息，实现方案），7—图文排版：主图次文，图文节奏，空隙，模块化。8—当前状态：放大（形状），变色（反色、对比色、明度纯度区别色），链进链出后指定内容提示。9—交互控件：样式合理准确性（人对系统默认的认知和生活常规认知），状态（视觉表现样式和动作过程优化），创意。10—loading：内容关联性（loading前后的内容关联），无聊等待的乐趣，体积、面积优化，创意。11—用户反馈_ 成功、出错、提示、无结果：文案（明确、合理、人性化、创意），图形（明确、醒目、色彩的心理认知准确度）。12—动画效果：过程合理（模拟真实环境的合理化），连续，节奏感，用户日常动作表现，音效配合，创意。13—首尾设计：首（品牌宣传、自身特点、明确内容、气氛表达、创意。尾：呼应、节奏（与首），创意。14—适应屏设计（全屏设计）：最大最小屏幕的考虑（文字、图片的位置、折行效果）15—固定尺寸的栅格设计：合理的单元格（考虑黄金分割），单元格面积节奏，边距统一性16—demo设计样稿：对内容最多最少的考虑。17—页面：品牌性，基调元素一致性，复用性，节奏感、面积感，视觉第一吸引，引导浏览，点线面关系，素描原理（运用素描的基本规律来做页面）。18—阅读：背景对阅读（视力）的舒适度，内容与背景的对比舒适度

IE Tab浏览器兼容是所有Web开发者都要考虑的问题,IE Tab能够让您再Firefox中以IE的渲染方式来呈现页面,并且可以方便的在两者之间切换。

Style Sheet Chooser IIStyle Sheet Chooser II 允许浏览者或开发者迅速的在为同一页面编写的不同样式之间来回的切换,甚至能够保证被选择样式应用到该站点的全部页面上. Style Sheet Chooser II 会覆盖Firefox内置的样式表切换器[style-sheet-switcher].你可以用多种方式来调用它:a. 通过"查看"[View]->"页面样式"[Page Style]下面的选项;b. 通过工具栏[Toolbar]的一键切换;c. 通过状态栏[Status Bar]的图标按钮;小提示: 是否在状态栏和工具栏中显示图标,可以在扩展偏好[Extension Preference]中设置

CSSViewer一款小巧的CSS属性查看器,随着鼠标的移动显示当前所指示元素的CSS样式信息,其中包括了所有从父级元素继承而来,用户自定义以及浏览器自定义的样式信息. 同Style Sheet Chooser II 一样,你也可以通过在工具栏添加该扩展的图标按钮来激活/禁用该扩展。