设计一个Web网站(如提供邮箱服务、社区服务等),需要考虑五个层次,并按顺序依次实现。五个层次分别为:
l 战略层:明确公司与用户对于网站的期望和目标;
l 范围层:将战略层确定的目标转化为网站提供的功能和内容;
l 结构层:设计网站架构图,将分散的功能和内容组成一个整体;
l 框架层:将抽象的架构图转化为详细的线框图,确定界面外观、导航信息及信息要素的布局;
l 表现层:按照“低保真”的线框图设计出最终的Web网站。
以下我将逐一讲解每层的工作目标、工作内容及输出物:
一、战略层:
1、 工作目标:
l 确定网站目标:我们要从这个网站得到什么?
l 确定用户需求:我们的用户要从这个网站得到什么?
2、 工作内容:
l 确定网站目标
l 商业目标:替公司赚钱还是替公司省钱?要赚多少钱?
l 品牌识别:将品牌形象具体而明确地写进目标,将会提高呈现出积极的品牌形象的机会;
l 成功标准:将战略或商业目标进行量化。如通过衡量每一个注册用户单月的访问次数表明了该网站对核心用户的价值。
l 确定用户需求
l 用户细分:可以按照人口统计学标准,价值观标准和用户对技术及网站本身观点划分用户;
l 用户研究:使用问卷调查、用户访谈、焦点小组等方法收集、分析用户观点和需求。并可通过创建虚拟人物角色来将分散的资料关联起来。帮助你确保在整个设计过程期间把用户始终放在心里。
3、 输出物:市场需求文档(MRD)、用户研究报告、竞争对手分析报告等
二、范围层:
1、 工作目标:确定网站的功能需求或功能规格
2、 工作内容:
l 收集需求:从用户处收集需求,各部门聚集采用头脑风暴收集需求;从竞争对手处获得启发;使用用户场景来描述需求;
l 确定需求优先级:需要去评估这些需求是否能满足我们的战略目标(无论是网站目标还是用户需求)。另外,还要确定实现这些需求的可行性有多大?
3、 输出物:产品需求文档(PRD)、产品功能规格文档等
三、结构层:
1、 工作目标:设计网站架构图,将分散的功能和内容组成一个整体
2、 工作内容:进行交互设计、搭建信息架构
3、 输出物:网站架构图。如下图所示:
四、框架层:
1、 工作目标:将抽象的架构图转化为详细的线框图,确定界面外观、导航信息及信息要素的布局。
2、 工作内容:进行详细的界面、导航设计及信息摆放布局。可以使用Visio或者Axure RP来完成线框图的设计。
3、 输出物:线框图。如下图所示:
五、表现层
1、 工作目标:按照“低保真”的线框图设计出最终的Web网站
2、 工作内容:遵照突出重点、保持一致性的原则以及统一的配色排版方案设计出最终的Web网站
3、 输出物:最终Web网站
当前, 针对网页的设计没有较为明确的设计规范和准则, 因此, 在实际网页设计上就会出现各类差异。为了保证网页简洁性要求, 在对网页进行命名时要确保网页名称要简洁, 一个完整的网页通常是由很多链接相互组合链接而成的, 因此, 为了满足网页便捷和有效性的要求, 这就需要网页设计者在对网页进行命名时要尽量取简单好记且具有一定代表性的名称。
简洁的名称不仅能够有利于网页管理者对于网页的管理, 同时也方便用户的搜索检验。在网页视觉要求上, 一般来说, 合理的视觉效果对于网页用户来说也具有更多的吸引力。
为了达到网站间接性的要求, 一般网页设计者需要合理应用颜色反差效果, 其包括图片、颜色以及字体的反差等等。除了充分利用反差效果之外, 合理的布局和排版也必不可少, 一般针对网页的布局和设计上可以采用适量的图标来增强网页的图像感, 页面的长度也要保证在合理范围内, 当然, 网页的风格也要一致, 通过文字, 图片, 背景, 标题和注释的相互配合才能建设出符合用户需求的间接网页。
网站测试 网站发布前要进行细致周密的测试,以保证正常浏览和使用。主要测试内容: 1、文字、图片是否有错误。 2、程序及数据库测试。 3、链接是否有错误。