网页板块设计线框图（网页板块结构）
本文目录一览：
- 1、绘制线框原型图的10个要点,做与不做
- 2、几种常见网页布局设计?
- 3、帮你奠定设计项目基础的线框图五步法
- 4、网站交互设计:线框图,原型和视觉稿的区别
- 5、交互设计中原型图和线框图
- 6、用Axure画线框图详细步骤(以手机音乐播放器为例)
绘制线框原型图的10个要点,做与不做
当你准备绘制线框图时，直接使用你最喜欢的电脑软件工具绘制，这看来是没有什么问题的。
绘制线框图重点就是要快，明确表达自己的设计想法，它不是美术作品，无需过多的视觉效果。黑白灰则是它的经典用色。什么时候使用线框图 线框图（Wireframe）是软件或者网站设计过程中非常重要的一个环节。
当然，千万要控制好度，不要设计得太过细致。线框图本质上还是界面的框架，其中的控件是占位符，不用做的那么精确。当然，在打磨线框图细节的过程中，也别忘了用户流程的设计。
没有时间就不要做酷炫的交互了，因为没用，没人看。甚至可以不用做交互，只需要有逻辑的把页面画全就好了。
几种常见网页布局设计?
国字型布局，一些大型网站更倾向于这种布局类型，即最上面是网站的标题和横幅广告条，接下来是网站的主要内容，中间是主要部分，左右分出两小条内容，这种结构是我们在网上见过的差不多最多的一种结构类型。
综合框架类型：其实就是左右框架类型和上下框架类型的结合体。封面型：这种类型基本上是出现在一些网站的首页，多是精美平面结合小动画，再加几个简单链接或仅是一个“进入”链接或无任何提示。
网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型，下面分别论述。
设计无边框 无边框设计在近几年比较常用的一种布局设计，在设计的时候，用间距代替页面中的分割线，边框。
常见的网页布局形式：T字型、口型、三字型、对称对比布局、pop布局，三字型网页多见于政府网站。“三”型布局具有简洁明快的艺术效果，适合于艺术类、收藏类、展示类网站。
帮你奠定设计项目基础的线框图五步法
1、线框图的设计并没有一种固定的形态，你可以在图片编辑器中完成，也可以通过专门的线框图工具来制作，甚至可以直接在纸上绘制。接下来，我们看看各种不同方式的优劣。·纸：最基本的线框图和草图也相去不远。
2、根据图纸要求，以已放制的控制线为基准，放制 家具 、洁具等造型线。
3、研究透彻了行业、用户、场景，排好了需求，就需要进行设计师在项目过程中的核心环节了：产出方案。产出方案我们可以分为3个主要步骤： 建立信息架构+任务流程+详细交互方案 。
4、当你准备绘制线框图时，直接使用你最喜欢的电脑软件工具绘制，这看来是没有什么问题的。
网站交互设计:线框图,原型和视觉稿的区别
1、首先，他们都是网站的界面和交互方面的模型，但完成度各不相同。线框图 —— 更多侧重呈现网页界面的主体结构，极易只要的页面跳转和逻辑关系。一目了然的了解网页设计的大致情况。
2、原型（Prototype），常常和线框图混淆，是中等保真的设计图，代表最终产品，模拟交互设计。原型当允许用户：从界面上，体验内容与交互 像最终产品一样，测试主要交互 视觉稿（Mockup）是高保真的静态设计图。
3、而原型图，相对线框图，呈现了更多的细节或交互。我们所看到的的往往是一页页呈现的网页或app设计。根据细节的呈现程度以及提供资源的质量，分为低、中、高三种。
4、以图的形式展现更加直观；原型图的产品最初的构想图，一般是产品经理绘制，内容比较粗糙；设计效果图，一般是由设计师出图，根据产品经理的原型图，进行设计后的很形象、美观的图‘；框架结构图，指的是整个软件的架构。
5、线框图是一种低保真且静态的呈现方式，设计师通常使用纸笔来表达自己的想法。只要能明确表达内容大纲，信息结构，布局，用户界面的视觉以及交互行为描述即可。就像建筑蓝图一样，蓝图也就是施工方案，详细描述改如何建造建筑。
6、视觉设计只要是指用户界面设计，包括了对网站风格、图形图像、颜色基调等视觉层面的设计，团队中的VI设计、美工、用户界面设计师可担任这一角色。
交互设计中原型图和线框图
1、线框图是一种低保真且静态的呈现方式，设计师通常使用纸笔来表达自己的想法。只要能明确表达内容大纲，信息结构，布局，用户界面的视觉以及交互行为描述即可。就像建筑蓝图一样，蓝图也就是施工方案，详细描述改如何建造建筑。
2、直白点呢，线框图更多是在设计初级，直接快速勾画的网页或软件产品的主体结构、用户流程或者页面跳转关系等， 方便设计师或团队能够快速决定产品的宏观设计方向，从而尽快开始细节设计。
3、交互设计：简单说是指人机交互接触时产生的效果；网站是一个门类设计的总称；线框：就网站设计而言是网站设计的基本布局，架构的表面现象；原型：是包括交互、线框在内的产品雏形。
用Axure画线框图详细步骤(以手机音乐播放器为例)
1、主菜单和工具栏：位于界面的最顶部，在这里新建、新建元件库，还可以对创建好的原型，进行保存等操作。站点地图面板：位于左上方，站点地图面板的作用是给设计人员提供了一个清晰的产品设计思路。
2、Actions。交互是由事件触发的，事件是用来执行动作的；交互设计的目的把静态的元素变成动态的，以提升产品的用户体验。交互是Axure中的构建模块，用来把静态的线框图转换为可交互的HTML原型。
3、页面的添加、删除和重命名 点击面板工具栏上的“AddChildPage”按钮可以添加一个页面。点击“DeletePage”按钮可以删除一个页面。右键单击选择“RenamePage”菜单项可对页面进行重命名。
4、Axure可以对图片进行切图操作。母版自定义触发事。动态面板多层嵌套。自定义格式刷和注释字段。
5、原型：用线条、图形描绘出的产品框架，也称线框图。 原型设计在整个产品流程中处于最重要的位置，有着承上启下的作用。
6、具体步骤如下：①首先在打开的axure rp 8的主界面的左下角找到并点击选择inline Frame，使用鼠标按住不放。②使用鼠标将inline Frame选项图标，拖动到创建的主界面中，可以看到如下图标。
