模块三网页美工技术 单元5：网页线框图设计及页面效果图制作 一、线框图的概念及作用 线框图一又叫原型、据果图。它是网站设计方案中的重要组成都分，可确定一个建 立在基本概含结构上的架构。是网站策划师，网铬产品经理的最后交付文档，虽然有时它很 粗糙，但可以显现出最直观有效的设计效果。指出了视觉设计应该前进的方向。线胚图通过 安排和这择界面元素米整合界面设计：通过识别和定文核心导航系统米整合导航设计：通过 收置和排列信息组成部分的优先级米整合管思设计， 一个真面的信息架构代表的是内容的层次结构，而线框图则是承载页面内容的立体框 架，根据需要，线框图可能是一个独立页面成一整套页面序列：当针对中小型项目时，可能 只需要首页以及关键页面的设计：针对复杂项目和大线模的团队协作，则需要一系列相互关 联的线框图，并且包含交互设计部分，比如我们正在做的事情。 线框图的细节要通真到何种程度，要根据执行团队的实际情况米决定。一般米说，线 框图的细节越逼真，执行越流畅，但是给视觉设计师的发挥空间越小：相反，线框图越是粗 略，对团队配合的要求越高，视觉设计师发挥的空阿越大。就我们来说，我觉得还是尽量做 细的好，这样一来将更多问题解决在设计前期，二来也可以减少设计师白主发挥时引起的又 一轮论证，延长工期。 用两闲两用两闲州用闲闲气用年期用闲 纯用 图0305-1
模块三 网页美工技术 单元 5：网页线框图设计及页面效果图制作 一、线框图的概念及作用 线框图——又叫原型、框架图。它是网站设计方案中的重要组成部分，可确定一个建 立在基本概念结构上的架构。是网站策划师、网络产品经理的最后交付文档，虽然有时它很 粗糙，但可以呈现出最直观有效的设计效果。指出了视觉设计应该前进的方向。线框图通过 安排和选择界面元素来整合界面设计；通过识别和定义核心导航系统来整合导航设计；通过 放置和排列信息组成部分的优先级来整合信息设计。 一个页面的信息架构代表的是内容的层次结构，而线框图则是承载页面内容的立体框 架。根据需要，线框图可能是一个独立页面或一整套页面序列：当针对中小型项目时，可能 只需要首页以及关键页面的设计；针对复杂项目和大规模的团队协作，则需要一系列相互关 联的线框图，并且包含交互设计部分，比如我们正在做的事情。 线框图的细节要逼真到何种程度，要根据执行团队的实际情况来决定。一般来说，线 框图的细节越逼真，执行越流畅，但是给视觉设计师的发挥空间越小；相反，线框图越是粗 略，对团队配合的要求越高，视觉设计师发挥的空间越大。就我们来说，我觉得还是尽量做 细的好，这样一来将更多问题解决在设计前期，二来也可以减少设计师自主发挥时引起的又 一轮论证，延长工期。 图 0305-1
依照与最箕产品的接近程度，线根图分为低保真和高保真两类，如上图0305-1所示（左： 低保真。右：高保真) 低保真原型《线根图)通常包括：页面的基本布局。元素的大概位置，交互的基本形 式，表单项。 高保真原型（线框图）通常包括：精确到像素的页面布局，销助设计元素的数量和位 置，图片格式尺寸，屏幕划分，超级链接的标示，带时何轴的FASH关键镇，每个交互岁 骤的界而变化，表单项说明，具体文案。 高保真的原型，在提交的时候会更具说飘力。但缺点也同样明显，同样一个原型需要 投入更多的时间，一旦设计变更投入的时阿就更多：而且在项目前期，一般报难有充格的时 间做一个高保真的原型，所以在参个设计流程中的应用也有同限。题外话，能做高保真原 型的在我看来是高手了，应该去做设计师，酸线医图实在是大材小用了。 高保真原型更多情况下是商业建站的时候用到。如果只是用于内部沟通、检验交互问 思的话。视觉的保真度可以退而求其次，以交互的保真度作为主要维度。应该追求速度和数 量，尽可能在产品早期多会试，多个方案，以求发现新想法并降低项目后期风险。 对于三两个人配合的微型项目（比如中小企业网站）使用低保真原型配合口头沟通就 可以解决实际的同恶：对于复杂一线的项目。更推荐以《低保真和高保真模型湿搭》的根式 开展工作。 二、如何制作线框图 1分析估算屏幕。依瓜页面逻辑架构，页面中有多少元素，每种元素要占用多大的屏幕 面积，这是一个非常复杂的问题。引入一个标准屏哥的概念，即常用分辨率中最小克度 和高度尺寸的乘积。在这里可能有若干种不同的声音，在宽屏最示器越米越流行的今天，设 计多以-1024pix×768pix”作为标准屏幕尺寸. 设计低保真时只需要进行粗略的计算，但是如果有时间，还是裤荐将所有元素可能占 据的屏幕空阿一一列出。最简便的方法是，保存其他网站上类拟元素的截图，估算它们占用 的屏都而积。这个估算不必十分精准。 2内容分块。“使用纵栏分隔内容能够获得更灵话的页面设计”，看到这句话，椰些到 而架构师和前端开发人员都心领神会。众所周知，W中页面是一个在城向无限伸辰的巨大 创作介质，这就是为什么鼠标要设置中阿的滚轮。要是丰委指杠，Wb页面也可以向横向 钟展的。这样的网站的确有，们不符合用户的岗览习惯
依照与最终产品的接近程度，线框图分为低保真和高保真两类。如上图 0305-1 所示（左： 低保真，右：高保真） 低保真原型（线框图）通常包括：页面的基本布局，元素的大概位置，交互的基本形 式，表单项。 高保真原型（线框图）通常包括：精确到像素的页面布局，辅助设计元素的数量和位 置，图片格式尺寸，屏幕划分，超级链接的标示，带时间轴的 FLASH 关键帧，每个交互步 骤的界面变化，表单项说明，具体文案。 高保真的原型，在提交的时候会更具说服力。但缺点也同样明显，同样一个原型需要 投入更多的时间，一旦设计变更投入的时间就更多；而且在项目前期，一般很难有充裕的时 间做一个高保真的原型，所以在整个设计流程中的应用也有局限。 题外话，能做高保真原 型的在我看来是高手了，应该去做设计师，做线框图实在是大材小用了。 高保真原型更多情况下是商业建站的时候用到。如果只是用于内部沟通、检验交互问 题的话，视觉的保真度可以退而求其次，以交互的保真度作为主要维度。应该追求速度和数 量，尽可能在产品早期多尝试，多个方案，以求发现新想法并降低项目后期风险。 对于三两个人配合的微型项目（比如中小企业网站）使用低保真原型配合口头沟通就 可以解决实际的问题；对于复杂一些的项目，更推荐以《低保真和高保真模型混搭》的模式 开展工作。 二、如何制作线框图 1.分析估算屏幕。依照页面逻辑架构，页面中有多少元素，每种元素要占用多大的屏幕 面积，这是一个非常复杂的问题。 引入一个“标准屏幕”的概念，即常用分辨率中最小宽度 和高度尺寸的乘积。在这里可能有若干种不同的声音，在宽屏显示器越来越流行的今天，设 计多以“1024pix×768pix”作为标准屏幕尺寸。 设计低保真时只需要进行粗略的计算，但是如果有时间，还是推荐将所有元素可能占 据的屏幕空间一一列出。最简便的方法是，保存其他网站上类似元素的截图，估算它们占用 的屏幕面积。这个估算不必十分精准。 2.内容分块 。“使用纵栏分隔内容能够获得更灵活的页面设计”，看到这句话，那些页 面架构师和前端开发人员都心领神会。众所周知，Web 页面是一个在纵向无限伸展的巨大 创作介质，这就是为什么鼠标要设置中间的滚轮。要是非要抬杠，Web 页面也可以向横向 伸展的，这样的网站的确有，但不符合用户的浏览习惯
内容分块通常包含这样四个大分类： ·页面识别(PgD):包含商标，标语、页面标题、广告问、版权信息等 ·导航系统()，导航条，面色屑 ·交互工具(Toas):搜素、登录、功能区、友情链接等 ·内容(Comtent):内容的正文、列表、摘要 3.向内容分块填充元素。在完成分栏和内容区块划分的基础上，已经可以把页面逐辑框 架中的元素填充到线医图当中去了。推荐先以一个项目中最复染的页面进行填充，这样能够 对其他页面中的分栏不合理选行及时的调整。低保真核型是高保真核型的基础，干万不要一 次把细节描绘完美，向内容分块填充元素的过程就是低保真线框图描绘的过程，具体操作如 下： ·把每一个元素建立一个单独的组件，这个组件可以很简单的用一个方块表示 ·每个组件都要有一个独立的名字。虽然在线框图完成之后，这些个名字可以则去， 但是一定要进行命名 ·把元素按飄分类先放置到内容区块中 ·元素放置过程中以纵向“自上而下、从左到右的排从重要到普通”的权重 将所有的元素放置到对应的区块后，一个简单的线框图已经具有了雏形，如图03052 所示
内容分块通常包含这样四个大分类： • 页面识别（Page_ID）：包含商标、标语、页面标题、广告词、版权信息等 • 导航系统（Navi）：导航条、面包屑 • 交互工具（Tools）：搜索、登录、功能区、友情链接等 • 内容（Content）：内容的正文、列表、摘要 3.向内容分块填充元素。在完成分栏和内容区块划分的基础上，已经可以把页面逻辑框 架中的元素填充到线框图当中去了。推荐先以一个项目中最复杂的页面进行填充，这样能够 对其他页面中的分栏不合理进行及时的调整。低保真模型是高保真模型的基础，千万不要一 次把细节描绘完美，向内容分块填充元素的过程就是低保真线框图描绘的过程，具体操作如 下： • 把每一个元素建立一个单独的组件，这个组件可以很简单的用一个方块表示 • 每个组件都要有一个独立的名字，虽然在线框图完成之后，这些个名字可以删去， 但是一定要进行命名 • 把元素按照分类先放置到内容区块中 • 元素放置过程中以纵向 “自上而下、从左到右”的排列“从重要到普通”的权重 将所有的元素放置到对应的区块后，一个简单的线框图已经具有了雏形，如图 0305-2 所示
Logo区域 网站名称 形象广告展示：Banner区域 导航泉区域 面包屑区域 动态信息区域 在线反馈区域 友情链接区域 企业信息及版权区域 图0305-2 4.绘制细节，填充出主题配色， 如上面例子，绘制细节及填充主题配色后，效果如图0053所示
图 0305-2 4.绘制细节，填充出主题配色。 如上面例子，绘制细节及填充主题配色后，效果如图 0305-3 所示
网贴名称 首页 公司快讯 行业动态产品介绍 售后服务 在组客服 联系我们 面包端 公司动本标题 More. 请您反遗 志内容动志内容动志内容动心内容动志内 【2012101】 标超 第入文本 林内容动志内容的志内容城内宿动态内 【202修1】 内容 儒人文本 动志内客动态内客动志内客动志内客动志内 【20201】 动烧内名动态内容动态内容动选为名动态内 【202每1】 内窗动志内容动志内溶内宿动志内 【2021修1】 林内客动志内容态内容动本内容动态内 【20201】 动志内客动志内容动志内客动志内溶动志内 【202.101】 版反米有 图0305.-3 三、线框图工具介绍 制作线框图的工具有很多，cdar等呵做图形的款件均可，在这里给大家介绍 一款比较专业，好用的线框图工具AURE。如图03054所示
图 0305-3 三、线框图工具介绍 制作线框图的工具有很多，word Illustrator 等可做图形的软件均可，在这里给大家介绍 一款比较专业、好用的线框图工具 AXURE。 如图 0305-4 所示
+4+ ■ ··国性设置栏 ■F是 项目管理区 草a日 图0305-4 AXRE非常适合设计师的工具，拥有现成的部件包括按组。表单线，形状和动态元 素等，能够创建线框图、设计流程图、进行交互设计、自动输出网站原型。 四、把线框图形成P5S页面效果图 操作滴示：把线框图形成PS面效果图，具体效果如图03054所示。 运行线 紫梦， 科修年油速 产#物对 线行精 图0305-4
图 0305-4 AXURE 非常适合设计师的工具，拥有现成 的部件包括按钮，表单域，形状和动态元 素等，能够创建线框图、设计流程图、进行交互设计、自动输出网站原型。 四、把线框图形成 PS 页面效果图 操作演示：把线框图形成 PS 页面效果图，具体效果如图 0305-4 所示。 图 0305-4
综合运用的图知识点为：Lg如设计、按钮授计、字体设计、素材提取与利用蒙版技 术进行素材触合、图像截切等。 【课后小结】 本讲重点介绍了线框图的概念、作用及绘制方法。井演示了发挥设计师的空同想象能 力，将线框图在PS中设计成网页效果图
综合运用的 PS 知识点为：Logo 设计、按钮设计、字体设计、素材提取与利用蒙版技 术进行素材融合、图像裁切等。 【课后小结】 本讲重点介绍了线框图的概念、作用及绘制方法。并演示了发挥设计师的空间想象能 力，将线框图在 PS 中设计成网页效果图