用户体验及美工设计软件包招标文件(正式).docVIP

第三部分 采购项目内容 一、采购项目要求 互联网交通安全综合服务平台（以下简称互联网服务平台）用户体验与美工设计内容包括WEB页面、手机APP和PDA等多种形式的视觉设计、交互式设计和页面设计。其中，WEB页面包括PC浏览器和移动终端浏览器两套设计。 视觉设计要求 网站主体风格应清新、明快、简洁，操作引导性强。界面设计有创意，使用web安全色，对页面进行合理排版，合理使用图片和图标，合理使用动画和视频，充分体现交通安全信息社会化服务的独特风格和创意。 1.1视觉设计需传达以下四部分内容： （1）传达“信息”。将产品上的信息/数据视觉化，以容易识别、理解的方式表达出来。比如信息的优先级，通过视觉对比让用户知道优先看什么。 （2）传达“行为”。交互的理念通过视觉传达，将行为、状态通过视觉暗示给用户。一个操作的线索，操作的过程，操作的结果都需要视觉来交待。 （3）传达“品牌”。视觉设计形成一种氛围，与公安交警社会化服务品牌建立联系。既是一种宣传，也加深了用户对品牌的认知度。 （4）传达“美感”。文字、图片、动画视频协调统一,让整个网页充满了活力，带给人舒适和谐的美感。 1.2视觉设计各元素详细要求： （1）Logo。符合logo设计基础示器效果清晰 （2）文字。文字要有张力、视觉冲击力，根据内容的重要性、信息的状态设计相应的字体、字号、粗细 （3）内容图片尺寸样式图片位置大小对比 （4）icon。图标体现品牌表达准确合理醒目，方便识别、理解、操作、记忆。 button可点击统一的样式大小厚度可按质感色彩区别不可点击 （6）背景图片营造氛围效果，统一， （7）图文排版主图次文，图文节奏，空隙，模块化。 当前状态形状变色（反色、对比色、明度纯度区别色）链进链出后指定内容提示。 交互控件样式合理准确，表现动作过程，创意。 oading。表现前后内容关联，。 ）正面反馈成功、出错、提示、无结果文案图形帮助用户打消数据操作技能方面的疑虑。用户注册、登录、更新状态等与数据内容产生互动的交互环节 （12）动画效果合理。 适应屏根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整 （14）Demo设计样稿内容 （15）页面元素基调一致复用节奏感。 阅读内容与背景的对比阅读（视力）的舒适度。 用户界面设计 2.1布局设计 布局设计主要对页面元素进行合理的规划布局，提供一套类似bootstrap的栅格系统和流式栅格系统，能列偏移和列嵌套。 2.2响应式设计 响应式设计是一种网页设计的技术做法，该设计可使网站在多种浏览设备（）上，同时减少缩放、平移和滚动网站加载时间过长小屏幕设备删减内容 2.3界面元素设计 用户界面元素包含form、table、按钮、图片、下拉菜单、按钮组、按钮下拉菜单，导航、导航条、面包屑、分页、标签与徽章、排版、警告框、进度条、输入提示、工具提示、弹出提示、弹出层、模态对话框、树型菜单、下拉树型菜单、图片轮播、tab等，其中form表单分水平和垂直两种，均采用div+css展示，form元素包括input、textarea，select，chekbox，radio等。 交互式设计要求 交互式设计应以用户为中心，为用户提供简单、易用、有吸引力、有创意且值得信赖的个性化平台应用。 （1）界面视觉统一，与网站主体风格一致，页面清晰简洁，元素布局合理。? （2）适量定义快捷键，减少鼠标操作，提高操作效率。 （3）使用正确反馈，始终保持沟通，随时提示用户的行为利用已成惯例的UI模型，用户熟悉 （5）运用视觉等级让用户把注意力放在最重要的地方层级清晰降低外观复杂性。 复杂任务分解为若干简单步骤 （8）优化页面加载速度，提高用户体验。 （9）兼容性设计。设计页面至少兼容IE6—IE10、CHROME、FIREFOX、OPERA等浏览器。 产品设计内容与交付方式 根据上述互联网服务平台功能列表，提供页面和交互程序设计，并编写html页面和特效。具体如下： （1）所有的图形界面设计图（PSD）和图标打包在一起，做上清楚的标注，给开发人员还需要对PSD进行切图，存成PNG，方便开发人员直接使用。 Axure RP Pro、VISIO构造产品原型，至少三稿待选。 （3）交互式设计页面，基于CSS、DIV构造交互式页面的DEMO，至少三稿待选。 （4）提供全套WEB UI组件封装和源代码，至少三稿待选。 （5）提供JAVASCRIPT组件开发支持工作、模板使用说明及相关培训。 （6）提供功能页面、登录、注册页面、系统功能页、后台主页等部分html页面和相应的css文件，支持换肤功能，至少三稿待选。 （7）支持4S店系统网页改版，大概30个页面，包括登录页面、首页面、机动车登记页面、查询页面等，至少三稿待选。 （8）提供a