1 / 16

第三章 美工知识

第三章 美工知识. 主讲：刘清梅. 目录. 网页整体设计. 线框图的概念及作用 如何设计制作线框 图 操作演示： 根据线框 图设计网页效果 图. 什么是线框图. 线框 图 —— 又 叫原型、框架 图 是 网站设计方案中的重要 组成部分， 可确定一个建立在基本概念结构上的 架构。 是 网站策划师、网络产品经理的最后交付文档 ，虽粗糙， 但可 呈现最直观有效的设计效果. 指出了视觉设计应该前进的方向. 网页整体设计中的 线框图. 线框图 通过安排和选择界面元素来 整合界面 设计 通过识别和定义核心导航系统来 整合导航 设计.

rene
Download Presentation

第三章 美工知识

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第三章 美工知识 主讲：刘清梅

  2. 目录 网页整体设计 • 线框图的概念及作用 • 如何设计制作线框图 • 操作演示：根据线框图设计网页效果图

  3. 什么是线框图 • 线框图——又叫原型、框架图 • 是网站设计方案中的重要组成部分，可确定一个建立在基本概念结构上的架构。 • 是网站策划师、网络产品经理的最后交付文档，虽粗糙，但可呈现最直观有效的设计效果 指出了视觉设计应该前进的方向

  4. 网页整体设计中的线框图 • 线框图 • 通过安排和选择界面元素来整合界面设计 • 通过识别和定义核心导航系统来整合导航设计 • 通过放置和排列信息组成部分的优先级来整合信息设计

  5. 网页整体设计中的线框图 • 线框图是承载内容的立体框架，可是一个独立页面，也可是一整套页面序列 • 中小型项目：只需要首页以及关键页的设计 • 复杂项目和大规模的团队协作：则需一系列相互关联的线框图，有时还包含交互设计部分

  6. 线框图 细节逼真程度？ • 根据执行团队的实际情况决定 • 细节越逼真执行越流畅，但给视觉设计师发挥空间越小 • 越粗略对团队配合的要求越高，视觉设计师发挥空间越大 推荐尽量做细。将问题解决在设计前期，可减少设计师自主发挥引起的又一轮论证。

  7. 线框图 • 依照与最终产品的接近度分类 低保真 高保真 通常包括：页面的基本布局，元素的大概位置，交互的基本形式，表单项等。

  8. 线框图 • 依照与最终产品的接近度分类 低保真 高保真 通常包括：精确到像素的页面布局，辅助设计元素的数量和位置，图片格式尺寸，屏幕划分，超级链接的标示，每个交互步骤的界面变化，表单项说明，具体文案等。

  9. 优点：高保真的原型，在提交的时候会更具说服力优点：高保真的原型，在提交的时候会更具说服力 缺点：需投入更多时间，设计变更投入时间更多。 更多情况下是商业建站的时候用到

  10. 用低保真还是用高保真？ • 三两人配合的微型项目（如中小企业网站）用低保真配合口头沟通即可解决实际问题 • 复杂项目，推荐 “低保真和高保真相结合”

  11. 如何设计制作线框图 • 什么时候开始设计线框图？需求分析之后 • 入手：基本布局 • 将所有的元素放置到对应的区块后，一个简单的线框图已经具有了雏形

  12. 如何设计制作线框图 • 绘制低保真线框图细节，并填充主题配色。

  13. 线框图设计工具 Axure 非常适合设计师的工具 能够创建线框图、设计流程图、进行交互设计、自动输出网站原型 拥有现成 的部件包括按钮，表单域，形状和动态元素

  14. 操作演示 • 操作演示一：线框图设计 • 操作演示二：把线框图形成PS页面效果图

  15. 谢 谢

More Related