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

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