网站内容布局的基本视觉表现方式

wxl452834144

wxl452834144

2016-02-17 04:03

生活已是百般艰难,为何不努力一点。下面图老师就给大家分享网站内容布局的基本视觉表现方式,希望可以让热爱学习的朋友们体会到设计的小小的乐趣。

一、线框图的好处:

让项目组成员在初期就可以对网站有个清晰明了的认知

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)

能激发设计师想象力,使其在创作过程中有更多发挥空间

给开发者提供一个清晰的架构,让他们知道他们需要编写的功能模块

让每个页面的跳转关系都变得清晰明了

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)

很容易的改变页面布局

二、绘制线框图的工具:

手绘:纸、笔

流程图或思维导图工具:Visio、Mindmap、MindManager

原型绘制软件:Balsamiq、Axure

图形软件:Photoshop、Illustrator

HTML工具:Dreamweaver

三、线框图实例:

1、简单纸面原型:这是Broad Reach Retail Partners网站的简单纸面原型

网站内容布局的基本视觉表现方式,PS教程,图老师教程网

2、低保真的HTML原型:没加任何风格的网站内容陈列

网站内容布局的基本视觉表现方式,PS教程,图老师教程网

3、低保真的布局原型:界面布局线框图,由Jesse Bennett-Chamberlain设计

网站内容布局的基本视觉表现方式,PS教程,图老师教程网

4、线框图原型:A preliminary mockup of a social conferencing tool built on Tiddlywiki for use at Le Web 3. The notes to accompany it are at tiddleleweb.tiddlyspot.com. Wireframe byPhil Hawksworth.

网站内容布局的基本视觉表现方式,PS教程,图老师教程网

5、线框图原型:This one is based on advanced use of a blog publishing system (WordPress). ByMattheiu Mingassson or Activeside Internet Strategies and Consulting.

网站内容布局的基本视觉表现方式,PS教程,图老师教程网

6、线框图:A wireframe for the Embrace Pet Community, by Jesse Bennett-Chamberlain of31Three.

网站内容布局的基本视觉表现方式,PS教程,图老师教程网

7、线框图: A wireframe with color and images. Author page wireframe by Bokhandel.

网站内容布局的基本视觉表现方式,PS教程,图老师教程网

8、线框图: 另一个带色彩的线框图. By Mattheiu Mingassson of Activeside Internet Strategies and Consulting.

网站内容布局的基本视觉表现方式,PS教程,图老师教程网

四、最佳范例要点:

简单设计

灰度模式展现:灰度有助于把注意力集中在产品功能层面和布局层面,如果直接加图片和颜色,容易让人陷入对色彩细节的判断中忽略掉功能层面更本质的东西。

线框图用网站地图串联起来

专注于理想结果

等同于真实分辨率尺寸

一开始就计划好内容和元素

五、要避免的问题:

内容太多,重点不突出

强调颜色和设计

过多的设计细节

另外,介绍一个专门讲线框图的网站:Wireframe Magazine

展开更多 50%)
分享

猜你喜欢

网站内容布局的基本视觉表现方式

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
网站内容布局的基本视觉表现方式

广告设计的表现方式

广告设计 设计
广告设计的表现方式

什么是极简主义 如何打造极简风格家居

家居设计 装修设计
什么是极简主义 如何打造极简风格家居

婴儿智力发展的表现方式

分娩
婴儿智力发展的表现方式

孩子的语言外在表现方式

孩子
孩子的语言外在表现方式

2017榻榻米书房设计装修效果图 榻榻米书房设计图片

榻榻米 书房 装修设计 书房设计 平面设计
2017榻榻米书房设计装修效果图 榻榻米书房设计图片

网站内容更新需要注意什么?

电脑 网络 网站设计
网站内容更新需要注意什么?

网站中的上一页和下一页表现方式

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
网站中的上一页和下一页表现方式

2017春夏女装风衣外套流行趋势

服装设计 平面设计 设计 服装搭配
2017春夏女装风衣外套流行趋势

网页设计中如何防止loading条?

网页设计中如何防止loading条?

不可在做的8种类型网站

不可在做的8种类型网站
下拉加载更多内容 ↓