UI设计实战课程 网页界面设计工作流程.ppt

文档介绍：开讲啦!网页设计工作流程一、网页设计工作流程分析二、遵循Web标准的网页设计工作流程三、:仔细研究需要在网页中的展现的内容,梳理其中的逻辑关系,分清层次,以及重要程度。:根据内容分析的成果,搭建出合理的HTML结构,保证在没有任何CSS样式的情况下,在浏览器保持高可读性。:根据网页的结构,绘制出原型线框图,对页面进行合理的分区的布局,原型线框图是设计负责人与客户交流的最佳媒介。:在确定的原型线框图基础上,使用美工软件,设计出具有良好视觉效果的页面设计方法。:使用HTML和CSS对页面进行布局。:使用CSS并配合美工设计元素,完成由设计方法到网页的转化。:为网页增添交互效果,如鼠标指针经过时的一些特效等。网页设计工作流程分析遵循Web标准的网页设计工作流程要先想清楚这个网站的内容是什么?通过一个网页要传达给访问者什么信息?这些信息中哪些是最重要的?哪些是相对比较重要的?以及哪些是次要的。这些信息应该如何组织呢?我们可以参考一些网上商店的网站,比如下图所示的是卓越亚马逊网上商店的首页,读者在研究一些成功网站的时候,不要仅仅关注这些网站的设计风格和技术细节,更要从更深的角度观察它们,这样才能更好地掌握核心的东西。例如从图中可以看到,这个页面尽管内容非常多,但简单来说,就分为两大类——“分类链接”和“推荐商品链接”。一、策划根据客户需求,明确设计任务。在设计一个网站之前,先要对其有足够的了解,弄清楚网页设计的任务。下面以一个旅游的网站为例,讲解其设计流程。此网站客户是主打中国国内市场,主要业务是斐济旅游。根据主题,对网站进行定位,分析。抓住要点进行规划。旅游网站设计流程案例二、草图、原型图根据前期准备开始设计草图,确定出需要在首页展示的信息。(一)(二),都应该先有一个构思的过程,对网站的完整功能和内容作一个全面的分析。制作出线框图,这个过程专业上称为“原型设计”,例如,在具体制作页面之前,我们就可以先设计一个如图所示的网页原型线框图。三、效果图在与客户讨论,确定了原型以后,可以进行实际的页面方案设计了,将整个网站的主色调定位蓝色,符合海景旅游的特征。首页凸显大Banner。依次对网页的各个部分进行布局设置,如页头、中间部分、页脚等等。在细节上,没有过多的复杂设计,简单的蓝色渐变,点缀几个纯色块,符合设计定位。完成后就可以提交了,然后和客户进行讨论,最终定稿。这样一个主页设计基本结束,剩下就是前端,程序的开发了。这只是网页设计的大概流程,每个公司的大小规模不同,流程也会一定差别,仅供大家共同学****和参考!