设计网站后台的流程

网上有很多网站后台设计流程，但我比较赞同的一种做法是：

一、网站规划阶段

这个阶段主要是对网站的功能、目标受众、内容、栏目进行规划。这期间会经常性地和有关领导进行沟通。首先，自己一定要对网站的整体规划清清楚楚，然后要吸收别人的建议。吸收别人的建议的过程，可以认认真真地做，也可以走过场，但是有这个过程以后，别人才不会对你的规划说三道四。

至于领导的意愿，和你的规划靠得上边的，你一定要让领导明白，他们的设想已经在你的规划中被考虑进去了。

项目的大致进度，要在这个阶段结束的时候确定下来。

二、后台模块划分、网站模板、网站设计和版面设计

这个阶段，程序员要和美工兵分两路分头行动。

后台模块划分如果做好了，后面的效率会高一些。这个过程不能省。

版面设计，美工既要考虑网站整体规划，又要考虑大家的建议，尤其是不能忽视领导们的观点(虽然大多数情况下领导的美术细胞少得可怜)。在这个大前提下，再兼顾美观、合理。一个好的美工，不仅仅能做出漂亮的页面，还要能迎合一下客户或者公司领导的意愿，而且能和程序员进行沟通。

在这个阶段，程序员和项目经理(项目负责人)要拿出一个可 *** 作的模块划分方案，而美工要确定网站的版面框架、美术风格，做出网站首页和二级页面。

实际上，在第一个阶段(网站规划阶段)，美工就应该开始思考网站的风格了。在第二个阶段，则需要把比较抽象的初级设想变成具体的页面。基本上，首页定了，整个网站的页面就定了一大半了。

在这个阶段结束的时候，要将项目的进度计划进一步具体化。

三、数据库设计

这项工作很重要。但是程序员应该知道怎样去做。而且数据库设计是和一个人的理论水平、实际经验息息相关的，不是几句话能说明白的。大的、复杂的站点，数据库规划可能要用一周左右的时间，小的、简单的站点，数据库设计也需要2到3天。

在这个阶段，美工最好别闲着，继续完成页面设计。要知道下一个阶段，程序员可就要用到美工的页面了。最好别出现这样的情况：程序员要用到某个页面，而美工还没有把那个页面确定下来。

四、后台程序编码

这个阶段，程序员要紧张工作，会比较辛苦的。

程序员需要遵守的三个原则：

1、团队合作

2、保证进度

3、保证质量。

美工这个时候要辅助程序员做页面。这个阶段美工可能比较闲，但是一定要称职。

项目经理该和客户或者领导沟通的时候，一定要沟通。

五、除错、改进、页面美化

上面说的虽然是多人合作开发网站的过程，不过觉得这个思想是很不错的，如果一个人做的话，那就各种都一起来了，首先不要急，得理清各个头绪，其实本人觉得无所谓说先做前台或者是后台，最重要的是自己一定要将各方面都处理得协调，一个网站只要做得事半功倍那就行了，得不同问题用不同的方法解决才是。可能有的网站需要先做前台好，有的网站先做后台好，等等。以上是本人关于做网站的一点拙见。

常见类型

·输入框

·步进器/微调器

·滑块

允许用户输入和编辑文本的区域。

外观

单行文本框，用于输入少量的文本：

多行文本，用于输入长字符串，多行文本区域显示：

富文本，允许使用附加的格式、内联图像/链接等文本输入。

最佳用法

·容错格式，允许用户输入多种格式，并智能的处理从而满足程序的数据要求。例如电话输入，允许用户输入空格和 —，系统后台自动清理数据以满足格式要求，而不是报错提示。

·对于简短、固定的单行输入可采用结构化格式，通过潜在的限制使输入的字符数量、类型不易出错，并使用户能够直观的看到输入格式。例如yhk号、身份z、时间等信息。

·掩码，对于重要的私人信息或数据应该给予掩码保护。例如密码、电话及身份z等信息，也分为全部掩码及部分掩码。对于密码输入可提供 「查看」 *** 作，以便用户确认。

·对于搜索 *** 作的文本框，可提供清空快捷 *** 作，从而方便用户快速更换关键词。（ Q：由于电脑鼠标的灵活性，此时清空是否有必要？ ）

·帮助文字用于为填写提供更多的上下文背景或指导。常见的形式有：默认显示，键入显示，悬停或点击显示。

·若输入区域设置了字符或字数限制，应给予一定的提示说明，当用户输入不规范的字符或超出字数限制时应给予清除（ Q：清除是否是一个好选择？ ）。例如记数器，在用户输入每个字符时动态更新。

·输入验证分为 主动验证 和 被动验证 两种：

主动验证在用户输入的过程中就进行了验证。例如只接受数字的输入框，在输入字符或特殊符号时会被主动清除，且给予提示说明，告知用户信息的输入要求或规则。

被动验证在键出（失去焦点）时或命令 *** 作（例如提交）后才进行验证 *** 作。

对于错误提示最好的方式是放在控件旁边进行提示，这样用户可快速进行定位更正。关于错误提示文本，应该给予用户解决问题的方法和指导而不是仅仅告诉用户发生了错误（例如密码错误，而是提示请输入6位以上字符），下图是常见错误提示位置：

用户与输入框交互时，请提供良好的视觉反馈，且输入框本身状态提供良好的能供性（常规有：默认、悬停、键入和禁用；验证状态有：提醒、报错和成功）。

·对于多行文本可根据需求提供改变区域的 *** 作，以显示更多内容。分为手动和自动两种，具体选择需要根据空间布局，内容要求进行决择，手动给予用户更大的自由度，自动则在根据内容实际所需。

拖拽控件：只改变高度和高度宽度均可调整两种。在外观和功能上是均有区别，请正确使用请勿混用，以提供符合预期及认知的模式，且设定最大范围。

输入框自动增长（根据输入内容进行高度变化），只可改变输入框高度，请设定最大高度。

以微小的浮动改变数值，步进器包括一个输入区域、增加和减少按钮。

外观

最佳用法

·步进器用于需要微调数字值的情况，且输入值有大小范围的限制及字符 限制 需求。

·步进器默认始终包含一个值， 默认值 为一般用户普遍设置的、你希望用户选择最佳值或较为安全的数值（例如最小值）。

·允许通过点击增加/减少按钮，键入数字，使用键盘快捷键（上/下，页面上/下） 改变数值 。

·为步进器设置 最大和最小值 。达到最大/最小值时，增加/减少按钮和上/下键盘将被禁用。

·用户与步进器交互时，请提供良好的 视觉反馈 。增加/减少按给予默认、悬停、选中和禁用状态，输入区域给予默认、键入和报错状态。

·设置输入区域的 字符限制 。一般为0-9和-，+字符，若不允许负值，那就只可输入0-9。当输入不规范的字符时清除或显示最小值，输入的值超过最大值则显示为最大值，并显示工具提示说明输入范围。

从一个范围值中进行滑动选择的控件。通常由一条水平线（水平或垂直）、可移动手柄和标签（有滑块标签、范围标签、值标签）组成。

 外观

单滑块，选择单一的值：

双滑块，用于选择值的范围：

分段式，不允许选择任意值，默认贴靠分段的值：

垂直和水平，根据值的特点及页面情况更加合适的布局：

图标数值文本

带有输入框，可输入文本字段，输入数据与滑块同步

最佳用法

·当用户设置 连续值 （如音量或亮度）或一系列 离散值 （如屏幕分辨率设置）时，可使用滑块。

·滑块是一种有界的选择或输入控件，其范围和选择数值的位置均得到了可视化的呈现。根据具体的使用情景我们将滑块细分为：单滑块（单值）、双滑块（可选择范围）、分段式滑块（非范围内的任意值）和带输入框滑块（和输入控件保持同步），以及相应的水平或垂直方向。对于书写及阅读习惯从左向右的人群而言，值的范围一般为左小右大，上大下小。

·如果你不允许滑块选取任意值，请使用 分段的步骤点 。

·如果滑块可编辑，当鼠标悬停在手柄上时，手柄高亮显示，并出现手型光标。

·允许用户使用拖拽和点击改变手柄的位置。

·在某些情况下，滑块直接充当为 命令控件 ，在用户选择时或选择后， *** 作结果即时生效。 例如音量控件。

·当滑块上没有其实时显示滑块值的地方时，请使用值标签显示滑块的当前值。

---