这些细节往往容易错过，因为他们不会影响网站的整体外观和感觉。问题是，这些细节往往会如影随形。而她恰恰是对用户体验忠诚度的体现。
下面列出10个关键元素，记住它，你将避免走回头路。
1、链接（link）
设置链接状态的不同风格，这是基础也是必须。你可能吃惊细节被忽略的次数。包括下面列举的页面上所有链接的状态。
Normal（常态）
这是链接的默认状态。鼠标还没有悬停、点击，或是转向向URL的时候，这个链接格式大部分的设计师会考虑到。
Visited（已访问）
这个链接是鼠标没有悬停或是点击，但是已经被用户访问过。
Active（活跃）
这是正在被用户点击的状态。绝大部分开发者会复制Hover（悬停）状态到这里。
Hover（悬停）
Hover状态是鼠标经过、并未点击。你忽略它了吗？
最常被忽略的情况是，链接的各种状态没有计划到网站的所有地方。比如很多网站针对浅色背景会有深色的主体（body），但是在页脚却恰恰相反。
在Full Moon BBQ，我们看到基本的红色链接在内容区域，基本的白色链接在下面的页脚处。非常小的细节，但是毫无疑问很重要。
2. 表单（Forms）
对于很多开发者，表单的配置是重要的，不可能被忽略的。然而，还有许多开发者在事后才想到。
上述后者认为表单仅是代表将用户转为客户的路径，并且没有适当的计划和设计，这些表单的实用性将大大降低。准备好这些元素是重要的，即使被看来要比颜色、图片、品牌等更小的紧迫性。
下面的2个元素，要做重点考量。
Form label（表单标签）
表单是收集用户数据的途径，而且用户是自愿提交个人数据的。准确的目的，适当的提醒用户，是聪明的做法。
Input fields and labels（输入域和标签）
其次，页面表单输入域的布局，标签样式及导向性。
当使用默认值，表单会看起来很糗。但是进行恰当的准备，网站会看起来会非常有效果。从好的规划开始，一起看看下面的例子吧。
Awesome 上的商业型表单很清晰。整个页面的目的和使命被充分考虑到。从标题和介绍，到每个域的布局，标签和控制风格，可以说是模板。
3. 按钮行为（Button behavior）
按钮可用户实现各种目的，贯穿整个网站。但是他们的各种状态，还是容易被忽略。
Default（默认）
按钮的默认状态，等待被点击。多数设计师记得住这个，忘记了其他。
Hover（悬停）
悬停状态，当用户鼠标经过按钮时的状态。该状态提示用户按钮是可触发的，这一点很有帮助。
Click（点击）
当用户点击按钮，状态来进行提示。这样的视觉提示可以帮助降低用户的困惑。
Disabled（失效）
按钮的失效状态，可能是最少被使用的。但是对于开发者却是很有帮助，除非你已经为按钮准备好了验证过程。
它非常像链接的各种状态，一定要考虑整站的按钮状态的运用。从弹出框（pop-up）、登陆框（log-in），到搜索域、报名表单等，所有的按钮需要有一致性的风格。
4. 表单验证（Form validation）
网站与用户的要求或错误的沟通形式，也是非常重要。下面的三个核心问题需要考虑。
Required fields(请求域)
所有的请求域应该被提示，一般会有星号标记。
Real-time validation（实时验证）
用户完成表单就会有验证，这种类型的验证要将各种数据处理信息尽快通知用户。你可以借助 jQuery验证插件:
Post-back validation（回发验证）
该类型验证发生在用户已经提交表单，与实时验证的风格可重复，但是另外一个选项是将所有问题归于一条信息，就像Moo：
5. 状态消息(错误、警告、确认等)
用户在网站上执行一些动作，一般需要一些类型的反馈。这很像提交表单后的场景。但是很多其他的事件也会发生。规划好你站点的消息机制，是良好的交互性的需要。
在Life Today上，我看到一些验证消息，可作为错误消息，风格符合全球各地。对颜色和图标进行少量更改，也可以用作警告，真是确认消息。
6. 拓展背景到更大的屏幕
依据网站风格的不同，背景元素可有更好的运用。绝大部分背景很简单，不需要更多的准备，但是也存在复杂的需要（梯度、图案和意象）。
考虑到大的显示器已经非常普及，大部分设计师仅规划960像素宽度，忽略了大量的显示器。如果你的背景复杂，你理当拓展至更大的屏幕。
下面是我创建的例子，木式背景可做更大的延伸。
7. HTML基本元素
HTML基本元素是基础，并且不能被忽略。但是在许多市场为导向的网站上，杂乱的布局，迥异的视觉风格，基本元素都被遗忘。
标准网页模板规划好，很重要，基本元素包括：段落，标题1至6，整齐的列表，列表数据，表单域，粗体文本，斜体文本。
我在很多网站工作过，总结样式如下，以助开发者。
8. 网站邮件（Website emails）
我从未见任何设计师规划网站邮件，它很容易被忽略是因为它不是网站核心焦点。然而邮件是提升和拓展服务的强大工具。
我的建议是在规划阶段，仔细查看站点内容。
邮件列表注册确认。
登记确认。
表单完成确认（比如一联系表单）
购买后的订单验证
如果你真想做好网站邮件，那么还要准备好邮件营销模板。
9. 页面拉伸
页面拉伸以适应内容的改变，很少用，但是也很重要。例子如下：
网站Full Moon BBQ有个紧凑的主页，每个元素都有特定的尺寸和位置。那么如果决定加长欢迎信息或者增加图片，将会发生什么？幸运的是，他们考虑了这一点。看明白了嘛？可以登录网站一试。
准备好多内容的布局的版本，你忽略了吗？
10. 动画：弹出框、工具提示、转换等
标准的HTML/CSS网站，动画和转换很容易被忽略。一旦忽略，效果会很不合适。
列举如下，请谨记。
Tooltips（工具提示）
当鼠标经过某元素时的提示。
Image rotators（图片旋转）
首页幻灯片至今仍很流行，对于转换与风格可有更多的选项。
Lightbox（灯箱）
规划的风格，不仅灯箱，还有转换。
每个动画元素都有明显的视觉风格，比如适合它本身。
为什么很在乎？
这里列出的大部分的元素，对于开发者比设计师更有用。如果你提前准备好这些元素，开发者会对设计师的工作另眼相看。如果你是开发者，同样做到这一点，那么老板对你也会是刮目相看。
记住并做到这些，意味着你至少享受到了web设计工作一半的乐趣。
扫一扫
1124
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
