前端代码优化

文件越大，用来下载和显示页面的时间就越长。请记住：文件总体积，指的是构成Web页面的所有文件，包括：HTML、外部CSS、外部JavaScript、图像、声音以及视频在内的文件的大小。在这些文件中，HTML、CSS、以及JavaScript文件只是文本文件，因此，常常相当紧凑。而图像、声音，以及视频文件通常都很大，存在下载问题。

公共网站的页面大小，从每页小于20K到每页大于100K（包括页面的所有图形文件）。究竟应该有多大，即使是所谓的专家在这个问题上，也普遍存在着分歧。如果你的网站需要专业品质的图形，那么就不可能遵守“20K定律”。但是，如果目标受众的Internet连接速度慢，或者目标受众的耐性有限，你就不得不放弃那令人难以抗拒的漂亮图像，转而遵守关于“20K定律”的限制。怎么样为有限的文件体积做事先的规划呢？

• 把大部分的CSS和JavaScript文件放入外部文件。只在网站第一次引用这些文件时，才进行下载。之后，网站上任何页面都可以重复使用这些文件，而无需再次下载。
• 重复使用不同页面的图形、音频和视频。因为这些文件也是在第一次时，才进行下载。
• 不要使用不必要的图形、动画或声音。无论是出于实用性的考虑，还是为了增强网站的吸引力，每个文件都应该有清楚的存在于网站上的理由。一个用于导航，大尺寸、具有吸引力的图像映射，同时具备了实用和美观两种用途，就像待售产品的照片一样。另一方面，应该去掉那些只起到填充空白作用的图形。
• 在可能的情况下，使用小尺寸图像，而不是大尺寸图像。因为在其他因素相同的条件下，与大尺寸图像相比，小尺寸图像的下载速度更快。例如：你可能使用一个平铺（重复）显示在背景上的小尺寸图像，代替单个的大尺寸背景图像。
• 尽量减少特殊导航按钮，每个按钮都具有独特的措辞和翻转效果，则需要下载100个不同的图像。相反地，50个文本链接（具有CSS提供的翻转效果），只需很小的下载代价。

做为技术出身的交互设计师，可以不断探索新的技术带来的变革(例如：html5)。无论何时，页面打开速度是给用户的第一印象，也是提升用户对网站满意度的重要因素，并且前端代码的优化将会给用户带来舒适地操作体验！

用户体验原则制定

在设计前我们要遵从一种通用性的用户体验设计原则，在设计后我们要能总结归纳出只适合此产品的用户体验规则。

设计前设计思路：

1. 以用户为中心的设计：设计必须是满足用户需求的、可行的，其次才是可产生商业价值的。
2. 操作入口明确：任何一个产品都要有明确、合理的入口。
3. 不歧视特殊人群：色盲、肢体残疾人士可以完成基本操作。
4. 任务可被完成：任务在无外界影响下可以被完成。
5. 问题可被解决：用户在任务中出现的问题，在无外界影响下可以被解决。
6. 简洁自然，清晰易懂：用简洁、自然、用户可理解的形式表达信息。
7. 突出重点，一目了然：用户的第一关注，将是设计中要表达的重点信息。
8. 导航明晰、有效：导航明确清晰、有效，分类彼此独立、完全穷尽。
9. 避免迷路：任何位置都能明确“我在那里？这里有什么？从这里能去哪里？”。
10. 深广度平衡：单个页面上可见菜单项的数目与层级结构中级别的数目平衡。
11. 习惯延续，必要延伸：用户的操作习惯必须延续，在用户可接受的范围之内适当延伸与引导。
12. 符合用户心智模型：用户对功能的预期与实际操作的结果保持一致。
13. 操作一致性：相同类型的命令或操作产生同样的效果。
14. 及时、有效、友好：第一时间针对用户的操作作出有效、友好的反应。
15. 避免出错：针对用户可能出现的错误，通过系统来避免错误的发生。
16. 一次点击：尽可能减少完成任务所需要的操作次数。
17. 别让我思考：用户的第一反应所产生的操作正确、有效。
18. 最小记忆负担：避免用户需要记忆5条以上的数据。
19. 最简化：帮助信息精简，准确描述，段落不超过3段，句子不超过30字。
20. 适时帮助：当用户需要帮助的时候才提供帮助。
21. 二倍、一个：方案设计数量增加两倍或减少到单位数量时，仍可适用该设计方案。
22. 以简化繁：尽量使用简单、原生的交互方式解决复杂的用户交互行为。
23. 符合栅格：页面布局符合栅格系统标准。
24. 符合标准设计模式：交互控件符合DPL设计模式标准。

设计后体验原则：

1. 启发式交互：让创新的界面具有教学功能。
2. 速度第一：页面打开速度的重要意义已经超过了某些页面的普通功能。
3. 即时有效：控件的反馈应该是即时的，而不是让用户去无限等待。
4. 少即是多：操作起来足够的简单快速，页面功能也很强大。
5. 个性化操作：满足交易型用户的口味，也可以同时满足浏览型用户的操作习惯。
6. 可发现性：让一切应该在那时间看到的元素，一目了然吧。
7. 简洁性：应用程序足够的干净，什么时候该出现，什么时候该消失，不给用户带来困扰。
8. 差异化：这里的差异化指的是让用户能很容易辩识相同纬度的元素之间的差异，例如相关搜索的展示方式。

其实，在设计前，我们会参考大量的通用性设计原则；在设计后，我们才会发现：对于项目有针对意义的原则也就很少的几条。这个时候需要靠设计师自己的逻辑归纳能力，把最重要最迫切的用户体验设计原则抽象出来。

出处：蓝色理想
责任编辑：bluehearts

上一页 电子商务搜索LIST页面用户体验设计 [3] 下一页 电子商务搜索LIST页面用户体验设计 [5]