国家级智库网站设计及开发

这是一则网站改版设计和开发工作。根据客户要求,设计在网站原有布局上展开,以保证网站用户使用习惯延续性。 工作重点在于视觉风格现代化和前端代码的全新开发。

国家级智库网站设计开发-页面设计合集

该网站的用户均为长期付费用户,高度熟悉旧网站的结构和布局。据此,客户要求不能对网站内容结构和网页视觉布局做大调整。本次改版的设计工作重点放在视觉设计优化用户体验改进上。

同时,由于一些特殊原因,网站的服务器端程序不会进行改版开发,导致前端交互体验设计受限于旧版网站已有功能。许多现代网站的基本动态元素/功能,如范围检索、文章自动分类、标签式页面、录入内容校验、模式登录界面等,均无法通过服务器端程序解决。这个特殊情况,在网站的设计和开发过程中,制造了诸多困扰。据此,网站开发阶段的主要工作,在于通过网站前端技术实现或模拟实现这些基础功能,从而帮助客户在合理的开销之下,构建出尽可能符合现代标准的网站。

需求沟通阶段

工作室对旧版网站进行了考察、研究和分析,结合客户需求,提出了网站改版提案。这个阶段的提案,主要着眼用户交互流程相关的问题,具体包括页面元素的布局、用户交互的引导、互动功能上的改进等。

工作室对网站首页进行了全新设计,放弃旧版中将行业新闻直接作为首页的做法,改为向用户提供各类最新报告的索引列表。这样可以让用户快速获得对其所订阅行业整体面貌的概览,也能够提高网站的搜索引擎排名

提案以灰盒模型和文字描述的方式展示。

国家级智库网站设计开发-布局设计合集
中经网中国行业报告网布局阶段

视觉设计阶段

在客户确定页面布局、交互功能等需求后,工作室开始进行视觉设计。

考虑客户自身特点及网站用户分布,视觉风格改进的幅度保持在稳妥的区域内,即在视觉上有创新和变化,但不致让用户觉得过于前卫而丧失联系感。同时,根据网站使用统计数据,与客户商议后,网站改用响应式设计,在不给小屏幕用户制造挫败感的前提下,为宽屏用户提供更好地浏览体验,为网站更好适应未来技术发展打下基础。

在视觉设计阶段,交互体验设计被进一步细化。

通用区域中,为了方便新老用户快速检索内容,新设计明确告知用户网站内容的分类及分类标准,并在视觉上予以区分。

文章列表页中,检索模块被重新设计并突出。受第三方的服务器端技术支持所限,美哉工作室无法在本次改版中对检索体验进行彻底改造。在这种不利条件下,我们通过对前端技术的充分运用,依然对分类检索的流程进行了大幅优化。

文章目录页,工作室添加了全部展开/折叠的功能,并为阅读按钮添加了Flash插件预判功能。

工作室还对网站的登录环节进行了交互体验的优化:一方面增加快速登录模块的视觉面积,以使用户更容易操作——对于仅提供付费信息服务的网站来说,这是非常重要的交互环节。另一方面,修改了超出访问权限的提醒和报错的措辞强度,降低用户误操作的挫败感并提供有效操作指导

国家级智库网站设计开发-网页设计展示合集
中经网中国行业报告网视觉阶段

Header题图为一张以中国领土海报高度为原始数据的3D柱状图模型渲染图。图片使用带有光线和半透明质感的视觉风格渲染生成。主题图为网站带来细腻感和深度感,平衡扁平化设计风格的生硬感,照顾网站用户群体的审美倾向。

国家级智库网站设计开发-头图设计:中国地图、3D柱状图
中经网中国行业报告网视觉阶段-头图

工作室还设计了全套行业icon图标,采用与网站一致的视觉风格和配色。

国家级智库网站设计开发-行业图标设计:综合、金融业、交通业、能源业、材料业、制造业、消费业、服务业、新产业
中经网中国行业报告网视觉阶段-行业图标icons

由于设计师了解网站前端开发技术,在设计阶段,即可同时考量开发工作的可执行性,确保经客户确认的设计稿可以完全实现。

网站静态页面开发阶段

该网站据上次改版时间较长,旧版代码未采用HTML5标准,并存在诸多语法错误和不规范的处理。由于旧版错误过多,工作室对网站前端代码进行了全新编写

前端代码,是指服务器接收到本地并渲染呈现给网站用户的文件。在动态网站中,这些文件由服务器端的程序根据用户操作而生成。在动态网站开发工作流程中,它们往往是开发服务器端程序的基础。此项目的合作流程是,美哉工作室交付静态页面开发代码,即前端代码,交由第三方服务器端程序提供商,即旧版网站开发者,进行后台开发。

下面的视频展示了前端代码的开发成果。

下面两张图片是W3C官方验证服务对于工作室开发代码的验证结果:服合规范、无错误。W3C理事会,即万维网联盟(World Wide Web Consortium),是万维网的主要国际标准组织,其主要工作是制定并维护万维网的技术标准。 符合规范的前端代码,可以提高浏览器渲染速度(使用户可以更快速地打开网页),并提高网站的搜索引擎排名。

国家级智库网站设计开发-美哉编写的HTML和CSS代码的W3C验证结果:完美通过
中经网中国行业报告网静态页验证结果

工作室还为客户撰写了说明文档,和提供给后台开发商的技术交接文档。下图为说明文档缩略图。

国家级智库网站设计开发-说明文件部分页面展示
中经网中国行业报告网交接说明

前端代码交付后,工作室跟进解决了后台录入内容校验、旧版网站插件错误等问题,并协助客户与第三方沟通解决技术问题,消除了第三方代码不规范带来的部分隐患。

回到
顶部