家电网站设计网页设计课程报告.doc

南京工业大学网页设计课程设计报告个人工作报告学院： 经济与管理工程 专业： 电子商务 学号： XX 姓名： XX 成绩： 2015年07月第一部分 工作日记2015-06-29 星期一 今天是课程设计的第一天，首先老师给我们布置了任务，发送了网页课程设计任务书以及指导书，讲解了相关的网页设计规则以及小组与个人报告的相关要求，随后完成的主要的任务是小组的划分以及组员的分工。我们的小组成员有朱青、陈凯雯、我、邓琦、赵金从。小组完成分工以后，征求了大家的意见，我们确定了小组的行业为家电业，原因是家电在我们日常生活中比较容易接触到，相对来说应该较好分析设计。2015-06-30 星期二 在昨天完成分工计划的基础上，首先我进行了家电行业背景的分析，我们在网络上自选了两个行业网站，由于我们选择的是家电业，谈到家电业，很自然地会想到海尔以及惠而浦。任务要求我们从网站的目标定位、版面的总体设计和栏目设置、提供的内容信息是否准确、网页的制作结构、色彩和导航、交互设计是否合理方便等方面对两个家电网站进行评析比较。我负责的主要是网页的制作结构以及网页内容的评析比较，在比较两个网站的网页制作结构的时候，由于对这个概念的理解不够到位，导致分析遇到困难，最后在进行搜索理解了以后，完成了两个网站这方面的分析。最后，我对两个网站的所有内容进行整理总结。2015-07-01 星期三今天的主要任务是参考昨天对所选的两个网站的分析比较的各个方面，确定小组虚拟网站的设计方案，包括网站名称、logo、信息架构、CSS方案、色彩方案、JavaScript方案等。经过讨论，我们把网站名称定为惠家，之所以取名为惠家是因为公司网站遵循人性化的设计原理，注重营造家的氛围，给用户提供舒适优惠的购物环境以及用户体验。公司的logo也设计成家的形状，与公司名称相契合。最后确定了网站的需求分析。今天的任务还不是很繁重，重头戏还是在明天。2015-07-02 星期四今天我们组经过讨论，构建了网站的大致结构框架、栏目的设置、确定了网站的布局设计、色彩方案。我组的色彩主要以红色为主，穿插各种图片。栏目主要分为首页、公司简介、产品展示、新闻资讯、联系我们五个。我主要负责产品中心的子页设计以及网站最终的子页链接和整理。产品中心主要有生活家电、厨房家电以及空调冰箱洗衣机三种分类，点击格证分类可以连接到相应的产品页面。接下来便是方案的具体实施，首先把我需要的图片告诉负责的同学，由他们进行收集以及PS。根据他们所找到的图片等作为子页面设计的素材，接下来利用dreamweaver进行子页面的制作。我主要遵循渐进增强模型，首先我要大致架构子页面的结构，结构相对于主页要简洁，主要是用来展示内容。2015-07-03 星期五今天的任务还是继续设计网页，我主要设计了产品展示的五个页面，一个是产品展示的主页面，还有三个二级页面，最后一个是三级页面。主要的格式基本上是相同的，主要是做一些链接、文字以及图片的编辑插入等等。在进行产品页面设计插入横幅的时候，在我插入后，由于后来下面的CSS设计不合理，导致网页显示的时候错位，所以在设计时要注意统一协调。由于网页比较多，今天只完成了产品展示的一级页面与部分二级页面。主要是在进行横幅滚动设置的时候由于不熟悉而浪费了时间。2015-07-06 星期一今天我继续对剩下的几个页面进行设计，由于几个页面的格式结构基本相同，所以不需要什么大的改动，一般只要改一下图片就好了。对于产品中心的商品，我又设计了第三级页面，主要是点击其中的产品可以跳转到关于产品的介绍。在产品介绍下方，我也设计了相关同类产品的链接。今天相对来说遇到的问题都不是很大，基本上是些粗心大意的小问题，很容易进行修改。最后我又在在每一个产品列表下方或页面的左方放了联系我们的信息，这也是为用户的想法考虑。2015-07-07 星期二今天我对自己设计的各个产品展示页面进行浏览检查，判断每一个链接是否链接到正确的地址，产品信息是否正确、页面显示是否合理舒适。最后把大家做好的每一个网站整理到一个文件夹，把图片、CSS、JavaScript等文件整理好，进行整个网站的效果查看，对于不足的地方进行修改。接下来我开始按照老师的相关要求对课程设计小组报告进行书写。2015-07-08 星期三 今天任务主要是撰写小组报告，主要要三个部分的内容：小组分工与工作计划；小组任务报告；课程设计总结。报告主要书写小组完成的主要工作及感受，工作概括介绍和特色介绍两大部分。另外，我根据小组报告只做了明天汇报的PPT，主要包括三个部分内容：标杆网站分析；网站设计方案；网站展示分析。除此以外还有个人报告的书写，包括个人每日工作日记以及读书日记，还有小结。日记每天都有写，只要整理一下就可以，主要是小结，包括本次课程设计的收获、建议等等。2015-07-09 星期四 今天主要是小组PPT汇报，对制作的网站进行介绍。第二部分 读书笔记2015-06-29 星期一 今天开始阅读Web信息架构：设计大型网站这本书，这本书主要讲述了什么是信息架构、信息架构的基本原理、信息架构的开发流程、实践与组织以及案例研究。首先我了解了什么是信息架构，笔者认为信息架构是共享信息环境的结构化设计，是网站和企业网络的组织系统、标签系统、搜索系统以及导航系统的组合，它创建信息产品和体验的艺术和科学，以提供可用性和可寻性，它是一种新兴的实践性学科群体，目的是把设计和建筑学的原理带进数字领域中。信息架构没有单一的定义，每个人的理解都会有偏差，设计结构决定信息单元之间的关系。例如图形设计、软件开发以及可用性工程等都不算是信息架构。信息架构十分复杂，且不容易理解，笔者认为信息架构是协助别人了解用户需求和行为的复杂本质，作为信息架构师必须找出人群和构成知识网络的内容两者间的互动关系，清楚表达技术的关键理念。2015-06-30 星期二 今天我阅读了第二章以及第三章，第二章主要讲了信息架构师的重要性以及技术要求，还阐述了信息生态对信息架构实践的影响。信息架构师从事的是高度的抽象性以及模糊性的工作，信息架构要求要与实际情境相吻合，网站要与企业网络的词汇与结构会变成你的生意和你的顾客与员工之间对话演进的重要组件。人们会通过词汇和结构对你的产品和服务产生看法，从而在员工与顾客之间实现互动。信息架构在信息生态中将用户、内容和情境以独特的方式结合起来而被建造出来的。 第三章的内容主要讲解了用户的需求以及行为，过于简单的信息模型难以了解用户的想法，无法得知用户和信息架构交互时发生的各类事件。注重了解用户的需求可以使信息架构的工作更加方便，同时也会获取到想要的用户数据。2015-07-01 星期三 今天进入本书的第二部分：信息架构的基本原理。主要阅读了第四章以及第五章。信息架构主要有组织系统、标签系统、导航系统以及搜索系统组成。信息的发布与组织越来越频繁使得信息组织面临的挑战也越来越值得重视。 模糊性、异质性、不同观点的差异性以及政治文化等使得信息组织工作变得相当复杂。信息结构会定义用户浏览时的主要方式，不同的组织结构都有优缺点，需要以互补的方式使用。例如等级系统一般作为信息架构设计流程的起始步骤，等级系统使用户可以很容易快速的了解网站大致内容。自上而下的设计方式使得用户可以先了解主要内容再进行其他内容搜索。另外，要学会使用超文本以及标签来解决内容条目之间缺乏结构且创造性的关系，这是建立凝聚性组织系统应具备的能力。2015-07-02 星期四 今天主要阅读了第六章，对标签系统有了大致的了解。本章主要讲了标签的命名、各式标签以及设计标签。例如在网站中经常看到“联系我们”的标签，它不用将所有的信息展开，由用户决定是否进入。设计标签应尽可能的与用户的观点一致且反映出实质内容。不专业的标签代表性不够且浪费金钱，无法给用户产生好的印象，所以要以用户为中心。标签主要用于情境式链接、标题、导航系统选项以及索引术语等。情境式链接主要是指向其他网页，导航系统选项主要是代表导航系统。设计标签的时候要讲究通用的原则，尽量窄化范围，开发一致的标签系统。标签可以参考自己的网站、类似网站或竞争对手的网站、受控词表及叙词表。当需要从头制作标签系统的时候，最重要的来源是内容和网站的客户。内容要展示用户的需求，直接或间接来自客户的意愿对于设计很重要。2015-07-03 星期五 今天阅读的内容是信息架构的导航系统。本章主要介绍了导航系统的种类、特点以及方法。导航系统由几个基本元素或者子系统组成。导航系统可以帮助用户了解在哪里以及去哪里的问题，主要有全站、区域和情境式导航系统，一般在网页内自行整合。笔者讲述的导航系统的最让我能感知的特点是没有浏览的超链接与浏览过的显示不同的颜色。导航系统的风格明确一致，展现信息等级结构，还可以指出用户当前的位置，方便的导航会使用户感到舒适。导航系统设计就是要在移动的灵活性与提供太多选项之间取得平衡。因此，各种导航元素要有效的整合，以实现彼此互补。网站地图、索引、指南以及搜索等辅助性导航系统也十分重要，它们是确保网站可用性和可寻性的关键因素。2015-07-06 星期一今天阅读的内容是第八章，主要讲述的是搜索系统。众所周知，搜索功能在我们的网站建设中占据很大的地位。当你的网站有许多信息需要用户浏览时，搜索功能就必不可少了。搜索一般是IT专家的职责，但是搜索最终面向的是用户，信息架构师的责任是替用户发言，他们比IT专家更了解用户，所以选择和实施最适合用户的搜索引擎对信息架构来说有相当的难度。选择搜索区域以及选择内容做索引都至关重要。选择合适的搜索算法也十分重要，例如模式匹配，它们会比对用户的查询字符串与网站文件全文的索引，以寻找符合的文本字符串。除了算法，查询辅助工具也会影响搜索结果，例如拼音检查工具、语音工具、词干搜索工具、自然语言处理工具以及受控词表和叙词表等。设计搜索界面也很重要，搜索的专业水准和动机、信息需求类型、被搜索的信息种类以及被搜索的信息数量等都可以影响正确搜索界面的设计。另外，高级搜索功能会给需要的用户带来更好的体验。2015-07-07 星期二 今天主要阅读第九章，讲述叙词表、受控词表以及元数据。主要内容包括元数据和受控词表的概念、技术行话、叙词表的实例以及种类、语义关系、复合式等级体系、分面分类法。元数据是一种用于定义的数据，能够提供其他被某种应用软件或环境所管理的数据的相关信息或者说明。受控词表是任何一组自然语言的子集。本章举了关于PubMed的叙词表实例，是美国国家医学图书馆提供的服务叙词表的类型主要有三种：经典式叙词表、索引式叙词表以及搜索式叙词表。语义关系主要有等价、等级、相关三种。复合式等级在处理大型信息系统的时候是不可避免的，随着文件数目的增长，就要使用更高层次的复合术语以增加专指度。分面分类法是根据文件和物体都具有多维度或分面得特征建立起来的。2015-07-08 星期三 今天进入到本书的第三部分：流程与方法论，我阅读了第十章关于这一内容的研究。这一部分主要讲了流程概括、框架、情境、内容、参与者的定义以及相关研究。信息架构开发的流程一般是研究、策略、设计、实施、管理。三圈图一般用于组织对研究流程的探索。在一切开始之前，首先要对目标有清楚的了解，了解目标、预算、计划、技术基础架构、人力资源和公司文化等。关于内容首先要找到内容，然后进行内容收集与分析，接下来进行内容映射。用户对于网站建设很重要，通过网页信息、访客信息、搜索日志分析等观察用户使用网站的方法以及遇到的问题。一般用问卷、情境式调查以及焦点小组来进行参与者的定义与招募。要设计任何复杂的网站，首先应该从研究开始，才能导致信息架构策略的形成。通过研究，我们可以把目标集中在了解商业目标、用户以及信息生态，开发坚实的策略。2015-07-09 星期四 今天主要阅读了第十一章：策略。昨天讲完了研究之后，接下来自然就开始制定策略了。本章主要讲了什么是信息架构策略、从研究到策略的过渡、开发策略、产品与成果、策略报告、项目计划以及演示。信息架构策略是研究与设计之间的桥梁，信息架构策略强调自上而下或自下而上，可以提供坚实的方向和必要的视野，让你有信心能偶进入设计和实施的阶段，简化讨论。从研究转向策略，就是把焦点转向流程和产品之间的平衡。由于书本内容太多，暂时只能理解到这里，我还是会继续读下去的。第三部分 个人小结一、工作本次网站课程设计我主要负责的有三个部分：1、 标杆网站内容以及网页制作结构评析从网站的内容来说，海尔的信息内容比较丰富，分为若干个子栏目：海尔简介、海尔产业、企业文化、海尔在全球、海尔研发、海尔大学、投资者关系、公益事业等这些信息完全可以让一个对该公司一无所知的人看了以后，会对海尔有一个详细的了解。在产品信息上，它列出了所有系列和各种型号的产品，对产品有着详细的介绍，而且有的还配有图片资料、视频文件。另外用户的服务信息范围广泛，包括产品知识、下载中心、在线报修、视频指南、服务政策、用户感言、星级服务，其中“服务与支持”、“联系我们”等都建立了企业与客户经常性联系的渠道，体现了真诚为客户服务，为客户解决问题，尽可能满足客户的要求和需求的理念。惠而浦的网站内容更多的侧重在对产品的介绍，更注重的是用户购买产品的便捷性。信息内容方面没有海尔的广泛，主要介绍了相关技术、优势等。从网站的制作结构来看，海尔与惠而浦基本上都属于是三级结构的网站，其中海尔的链接结构如表所示：表1 海尔结构2、 网站的产