用户界面
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 上的那个)
字体
CSS Font and Text Style Wizard
你可以在这里测试用不同的字体和样式来生成CSS源代码。
Em Calculator
转换字体大小到em的工具
text sizing - up the garden path
不同浏览器下字体表现的研究,共有264个截图。
表单
Accessible Form Builder
轻轻松松生成符合XHTML标准的表单。
CSS Form Code Maker
表单生成器
JotForm
所见即所得的表单生成器
korhoen typeviewer
帮你查看CSS的排版效果,帮你调整使之易读。
布局
CssCreator -> Page Layout:
this generator will create a CSS layout that has fixed width left and/or right columns with a dynamic width center column, all the same height with header and footer.
CSS HTML PHP Website Template Maker
一个PHP - HTML - CSS模板生成器,可以生成包括页头和页尾的两栏布局的模板。
Firdamatic
Firdamatic? 是一个无表格的布局生成器。
Free CSS Template Code Generator
生成三栏的布局
Layout-o-Matic
也是一个无表格的布局生成器。
QrONE CSS Designer
在线CSS生成器
Scriptomizers
一个CSS样式生成器
The Generator Form v2.90
1-3栏可定制的CSS页面生成器。
从人物角色开始。
你的主要角色的主要任务是什么?“搜索一套适合她的房子”?“浏览最新上市的汽车信息”?接着,她的次要任务是什么?“查看好友的更新”?然后,你的次要角色的主要任务是什么?“留意感兴趣的汽车促销信息”?……此时的任务分解不需要做得太细,只要做到心里有数就可以了。
接下来,把每一个任务点扩展成一个页面,想想用户在进行到这一步的时候,最需要看到、用到的是什么信息。比如,在搜索房屋的时候,主要角色最关心哪些属性?是房屋面积?位置?均价?装修?还是别的?
然后,再以这几个最关键的页面为出发点,把主要角色的次要任务叠加上去,然后是次要角色的主要任务(有点拗口),一个页面的信息架构就自然而然地出现了。
但是,这个过程会遗漏信息架构中一个很重要的部分——导航。根据Jesse James Garrett在《THE ELEMENTS OF USER
EXPERIENCE》一书中的定义,导航应该完成三个任务:
导航必须提供有意义的跳转链接;
导航必须要传达出各链接之间的重要级别和相互联系;
导航必须要传达出与用户当前所浏览页面的关系。