中小型网站设计和维护中会遇到的7个秘诀

　　中小型网站设计和维护中会遇到的7个秘诀

　　很不错的一篇文章，总结了大网站在设计和维护中遇到的问题，并提出了相应的解决方案（建议）。 Dream觉得适合中小型网站同样适用。

　　项目范围和规模不同，带来的挑战也不同。作为一个独立的网页设计师，我最大的责任就是负责FlashDen。拥有数以千计的活跃用户聊天、上传和购物，网站 处理巨额资金和巨额流量。设计、重构、维护和开发团队的工作给了我一些有用的见解和技术，使事情变得更容易。而且，就在昨天，我们开始了网站最大的重构，这似乎是记录我最有用的7个技巧的好机会。

　　一、Maintainable 设计和代码

　　

　　我给出的第一个也是最重要的提示是设计网站以使其易于维护。很多时候，当你设计一个网站时，你可能会为了美观而牺牲一些东西。例如，您可能使用图片并且文本或样式可以处理它。或者您可能会故意使用没有缩放空间的菜单结构。当网站 变大时，这将成为一个非常糟糕的设计。两年前我构建 FlashDen 的第一个版本时，我使用了图片按钮。它们看起来很漂亮，但同时我被 100 多个不同的按钮图片库拖累，更不用说编辑图片了。然后在接下来的几个月里，当开发人员需要一个新按钮时，他们向我要一张新图片。不用说，我很快就学会了这一课。我们切换到一个单独的按钮类。虽然看起来不太好，但这种情况倒是让人放心多了。可维护性的另一方面是考虑站点将如何发展和变化。例如，当添加一个新页面时，它会去哪里？我一直想要一个水平导航栏，但经过一些尝试，我们限制了使用添加子列的垂直导航栏的使用，从而为页面添加了标签结构，以确保相关页面可以组合在一起。我不敢说这是世界上最好的导航栏，但是当新节点加入网站 时，它肯定会让我们不必重新设计。所以当你在设计一个大型网站时，尽量让它简单，你会为此感到高兴！

　　二、找出你的用户群和任务

　　

　　大型网站网站和小型网站最大的区别在于使用网站的不同用户类型的数量。例如，在 FlashDen 上，有买家、作者、访客、管理员和会员。每个用户组都有自己不同的目标和任务。有时他们的任务重叠，但他们非常不同。用户任务处于相反视图的最佳示例是在网页上。 网站 并不是每个用户组都无法连接到任何地方，在其他地方确保每个人都能拥有他们想要的东西非常重要。当然，你要小心，不要在服务另一个用户群的同时忽略一个用户群。在最新的 FlashDen 重新设计中，我工作的最大部分是主页。我做的第一件事就是列出自己每个用户组需要做的事情：

　　１、 买家 – 在 FlashDen 上购买文件的人

　　浏览项目、搜索、访问他们的个人主页、存款、学习使用网站（新买家）

　　２、Author – 在 FlashDen 上销售商品的人

　　与其他会员聊天，在首页展示其项目的功能，了解网站的消息，快速获得他们的投资组合和收益

　　３、新访客-潜在买家/作者/会员，刚到网站的人

　　快速了解网站是做什么的，开始教程，查看不同类别的文件和价格

　　４、会员——不是真正的买家或作者，但活跃于社区

　　与其他会员聊天、查看网站新闻、浏览文件

　　５、Admin/Reviewer-我们的员工，管理文件审批，主持论坛，参与大部分活动

　　快速审批文件、查看最新论坛主题、添加站点新闻

　　当您知道不同的用户群体想要做什么时，您就可以设计一个网页来解决他们的所有需求。毋庸置疑，这是一项艰巨的任务，随着用户组和任务的数量呈指数级增长。在这个网站的其他网页上，你经常会担心一些用户群体，但在首页上，它们都集中在一起。毫无疑问，主页是你设计网站 时最重要的任务。在解决不同的需求之前，您需要考虑您的用户群。为此，您需要了解网站 是您想要实现的目标。

　　三、understand网站target

　　

　　虽然每个用户群体自然会认为他们是最重要的，但您应该根据他们的优先级来判断网站想要实现的目标。例如，在 FlashDen 上，我们列出了替代方案的以下结论：

　　１、 这个网站的首要任务是为买家服务。服务买家可以带来持续收入，也可以服务作者群体。

　　２、让访问者更快地了解网站并成为会员也很重要。 FlashDen 还处于一个相对较新的市场，新的竞争者不断出现。如何将注册会员变成买家或作者很重要。

　　３、 Creators 是 Fl​​ashDen 的核心部分。它们也非常重要。与其他用户群体不同，他们是网站 的坚定支持者。

　　４、 注册会员不像创作者或购买者那么重要，但他们也在为周边社区做出贡献。

　　５、作为一名员工，管理员/审阅者相对来说是最不重要的。

　　因此，从上面可以得出网站服务用户需求的优先顺序：访问者>购买者>作者>会员>管理员。网站谁知道你在努力实现最终用户将任务线缝合在一起，并告诉您应该尝试在页面上放什么。了解您网站 的目的可以将您的任务放在一起，并可以告诉您应该在页面上放什么东西。在每个关键页面上，您必须能够区分和识别用户群体、任务和优先级。对于首页等重要页面，我在纸上精心设计，而一些小页面则是在脑海中思考。

　　四、设计、精炼、精炼、精炼...

　　

　　找到您的用户组、任务、网站goals、优先级等之后，就可以进行设计了！这是至关重要的一步，因为在实际操作中，这一步可以大大减少设计所需的返工量。每当我刚开始设计并没有真正分析第一网站时，我不可避免地要返工很多，甚至整个屏幕界面。很多设计师在这一点上喜欢使用线框，它可以简单地使用线条和框来勾勒出应该显示内容的位置。我个人更喜欢一开始使用Photoshop，因为我的速度不够快，无法详细查看细节的变化。我也认为详细的信息设计比在纸上展示更直观。简单地改变颜色和背景颜色可以使整个网页元素立即看起来更重要。一旦大致了解了哪些信息需要协同工作，就应该拿出一个工作设计，大致确认，然后再细化、细化、再细化。我经常会草拟5到6个相同的外观，然后尝试不同的类型、大小、图像、布局变化、背景等，看看你的感受。不管你认为第一个布局有多好，我可以保证，在经过几次版本升级之后，你会发现你原来的版本并没有你原先想象的那么好。有时您甚至会放弃整个设计并重新开始。如果你有一个好的基础，那么细化可以给你一个美丽的结果。

　　五、听听别人的意见，做出自己的最终想法

　　在任何大型工作中，您都会受到许多其他意见的影响。在开始使用 FlashDen 之前，我曾与各种网站design 公司合作。在此期间，我也不幸设计了一些大型保险公司和一些政府机构。我说不幸，因为当你来到这个客户面前，和涉及很多利益的人打交道时，同时你在许多当时真正的决策权还不清楚的情况下做出了错误的决定。这将导致无休止的会议，无休止的变化，并极大地混淆您的愿景。不管用户是谁，唯一真正重要的是听取他们的意见。在大多数情况下，他们比您更了解许多与业务相关的事情。我希望他们比你更了解用户，这些知识能够为你提供建设性的意见。获得与您合作的开发团队的意见同样重要。我们很幸运在 FlashDen，因为有两位在用户界面和可用性设计方面经验丰富的开发人员。通过他们的投入，以及其他团队成员，他们对最终产品提出了许多不同的想法。但最终，是您作为设计专家做出最终决定的时候了。如果您有一个难缠的客户，这可能会很棘手，因为这些客户通常认为他们应该做出最终决定。如果是这种情况，您需要找到一种方法向他们解释、灌输并表明您的选择将带来最大的好处。 ;有时硬着头皮接受客户的意见，作为项目中长期的建设性功能。

　　六、为未来而组织

　　

　　当您为大型网站code 进行设计时，考虑未来的变化非常重要。如何管理您的文件和文件夹将极大地影响您以后的工作。比如我们最近决定成立FlashDen的姐妹网站，专注于音乐，即AudioJungle。为简单起见，这个网站 将使用相同的 HTML，只需更改样式使其看起来像一个不同的网站。以下是一些需要记住的事项：

　　１、整理好文件夹结构

　　脚本、样式表、界面图片、图片内容等，都需要单独存放。如果你是一个小网站，你或许可以将这些东西混合在一起，但在大型网站中，找到你需要的东西变得更加重要。

　　２、 为您的文件使用规则和良好的命名约定

　　没有什么比按名称“gd_l3.jpg”查找图片更糟糕的了。你怎么做基本上是个人问题，但我认为使用通用命名的描述性文件名的前缀会更有帮助。例如：我可能会在头部的每张图片中添加前缀“header_”，在每个背景中添加前缀“bg_”。标题菜单中的背景可以称为“header_bg_menu.jpg”。

　　前缀有一个好处，当您的文件按名称排序时，它们会一起出现。

　　３、使用颠覆

　　这是我们开发者强加的，还好我们用了！ Subversion 可以跟踪对文件和存档的更改，同时防止覆盖同一项目中其他设计人员/开发人员的文件。它需要一些时间来适应，但即使开发人员没有理由使用它，在 HTML/CSS 设计中也值得使用它。不知道颠覆？赶紧用起来吧。

　　４、写的时候深入思考HTML和CSS怎么写

　　编写垃圾HTML和CSS代码很容易，清除它们以获得原创版本很难。 4 次重新设计后，我仍然使用很多相同的 CSS 文件，并且必须计划清理不再使用或导致布局定义混乱的 CSS 类。查看大量评论，甚至可能是多个样式表，并确保您拥有良好的命名风格！

　　５、尽早启动浏览器兼容工作

　　我对 FlashDen 的工作是一个误解，我们为此付出了巨大的代价。我最初的布局设计是在 IE7 上进行的，直到我们完成整个网站 才忽略了 IE6。之后我们又添加了IE浏览器条件公式、CSS Hack等解决方案。当你建立一个庞大的网站时，当页面上只有很少的元素时，你可以更轻松地处理浏览器兼容性，所以不要重复同样的错误！

　　七、确保您可以轻松扩展您的样式表

　　

　　网站 越大，设计者就越有可能看到或修改每个单独的页面。如果您是像我这样的大型 网站 上唯一的设计师，您可能不想在每个页面上重新定义它。所以，在样式表上多花点心思，可以通过默认属性让页面好看。

　　１、 确保为“input”、“strong”和其他元素定义默认样式。

　　这样的页面可以自动呈现。如果要指望别人做“强”之类的东西，难免会和其他页面不一样

　　２、创建可供开发者重复使用的元素

　　比如在FlashDen上，我们有一个名为“general_table”的CSS表格类，它可以保证填充数据时的良好样式。当我有机会设计网页样式时，我可以使用个性化的表格和数据突出显示类型，但很少有开发人员将页面做成*敏*感*词*样式来使用。

　　３、请确保您的网页布局具有良好的结构，即使它只收录文本。

　　总会有一些网页无法添加图片，看起来可能有点呆板。通过使用标题、工具栏等样式，可以确保它们也美观并具有一定的视觉风格。在大多数 FlashDen 示例中，我们的文本块总结如下：

　　标题

　　内容

　　默认情况下，文本被漂亮的边框和标题包围。这使得与开发人员协调工作变得容易，并且文本和性能有很好的分离，使其看起来更具可读性。我们还有一个只收录文本内容的侧边栏组件，但这可以使网页看起来更直观。经过设计师的设计，每个页面都基本优化了，但是可能没有那么健壮，看起来还是很专业、统一的。

　　更多