电商资讯

10种网页设计中经常用到的线框图欣赏

日期: 2018-08-01 14:47 访问量: 类型:
10种网页设计中经常用到的线框图欣赏
很多网页设计者在做web项目的第一步是对项目进行模块化从而提炼出线框图。这样做的好处是能精确的规划出网页的结构和导航、表单、内容等重要部分的位置。
每一个设计师都有他自己独特的模块化方法。像很多设计师是直接在纸上画,也有些设计师是直接用设计工具如 Balsamiq, Figma or Sketch在电脑中制作。无论哪种方式,结果都是不错的,尽管他们自认为做的一般,有时候还很粗糙,但对看的人来说确印象深刻。
下面我们来看看几位大神平时的线框图:
Brandon的线框图
1.Brandon的线框图 
Brandon 把网页模板打印在纸上,在这些纸上他用精准的线条构画出线框来尝试怎么把pc端的站点迁移到移动端。
Vando 的高保真线框图
2.Vando 的高保真线框图
Vando的高保真设计图主要使用标题文本和标线填充的虚拟文本在电脑中制作的,用简单的2D模拟代替实际的设备模型。
背景和视觉元素用填充的色块表示。
Janna Hagan的购物网站线框图
3.Janna Hagan的购物网站线框图
Janna Hagan的购物网站线框图使用了很多设计元素完成的,甚至引用了一些视觉效果。
Andre Picard
4.Andre Picard
Andre Picard的网页设计线框图是在一块白板上完成的,这种方式很容易编辑也容易及时获得周围同事的反馈。
Melody Rose的78个线框图
5.Melody Rose的78个线框图
在做这个web项目的时候,Melody Rose化身为用户使用一致的效果来定义不同的内容类型和元素,整个设计风格保持在三个灰色色调中。
Tim Knight草拟一个新web项目
6.Tim Knight草拟一个新web项目
Tim Knight的线框制作方法更是简单高效,这种方法在项目立项时或为一个客户确定想法时非常有用。
Lauren 的中保真形态学网站
7.Lauren 的中保真形态学网站
.Lauren为形态学设计的这个中保真线框图中解决的数据可视化是非常复杂的,他使用具有填充内容块的结构良好的模板和用于图像占位符的交叉矩形来完成这部分内容。
Alyoop
8.Alyoop
Alyoop做的身体日记是对数字表盘的简单模仿。这些图用了灰色的色块和图标占位符表示用户和内容信息,LOGO和pie形图用文字占表示出位置。
Dane Wesolko的快销网站线框图
9.Dane Wesolko的快销网站线框图
Dane的营销网站线框图是一个高保真的数字线框图,它表示出了大部分的内容布局和颜色,只差效果和一些图片的引入。
Ziya Fenn的新闻站线框图
10.Ziya Fenn的新闻站线框图
新闻站点虽然是一个中保真的线框图,但是做的确非常精致,许多排版元素和位置已被定义。他的嵌入式元素设计成的布局让人印象深刻。

淘宝网合作伙伴奖

商家后台金牌淘拍档

年度金服务合作伙伴