网络和移动线框草图的20个鼓舞人心的例子



线框草图是最初的手绘设计过程,使用纸和笔/铅笔,描述网站设计的样子。为了帮助你获得灵感和有效的参考点,本文提供了20个令人印象深刻的网络和移动线框草图

但是首先,你可能想知道为什么你应该为你的网页设计创建一个线框草图。线框草图的有效性在于:

  • 你可以捕捉你的创意火花,流畅地勾勒出你的设计

基本上,创建线框草图可以减少所需的修改次数,从而节省时间,并且可以作为原型来完成设计,从而帮助您保持设计的正确性。

手绘线框草图

sketch are the visual cues such as the play button with the triangle and circle Hand-drawn Wireframe Sketches

这个草图的一个很好的触感是视觉提示——例如带有三角形和圆形的播放按钮——这使得原本被剥离的草图更加详细。您知道,矩形是一个媒体播放器,而不仅仅是一些稍后决定的内容。

sketch uses highlighted numbers and zoom-ins nicely Hand-drawn Wireframe Sketches

上面的草图使用了高亮显示的数字并进行了很好的放大,这使得整个草图更清晰、可读性更强。草图右侧的列包含每个元素的所有编号文本描述,放大的元素提供了更多细节,而不会弄乱主草图。

A complex and detailed sketch that uses illustrations nicely Hand-drawn Wireframe Sketches

一个复杂而详细的草图,通过显示矩形和正方形元素中包含的内容的示例,很好地使用了插图。它不仅仅依赖于文本或客户对其进行可视化。

concrete prototype of what the final design will look like Hand-drawn Wireframe Sketches

插图的另一个好用法。尽管草图是手工绘制的,但细节——标志,顶部生动的飞溅图像——给出了最终设计的具体原型。

The arrow-using descriptions on the sides effectively explain technical details Hand-drawn Wireframe Sketches

另一个实体示例。使用侧面描述的箭头有效地解释了技术细节,例如页面的宽度是浏览器窗口的宽度。

Using perpendicular lines that extend past the design reinforces the grid of the design

一个漂亮的网格设计草图。使用延伸过设计的垂直线加强了设计的网格,尤其是因为手绘草图可以使另一种立体设计看起来松散和浮动。

clean and crisp sketch that shows a fairly simple web page Hand-drawn Wireframe Sketches

一个简洁明了的草图,详细展示了一个相当简单的网页设计。

don't have to be an artist to draw effective wireframe Sketches

这种设计表明,你不必是艺术家就能绘制出有效的线框草图正方形都是扭曲的,元素中没有太多艺术细节,文本在某些地方是弯曲的。

尽管如此,您还是可以清楚地了解设计的外观以及每个元素是什么。归根结底,这是关于用草图创建线框,而不是最终的风格化设计。

Another example of a grid design Hand-drawn Wireframe Sketches

网格设计的另一个示例。虽然这些线并不笔直,或者没有加强网格设计的线,但元素之间的距离足够近,您可以理解这些表将彼此平行。

数字线框草图

 digital Wireframe A sketch of a mobile calendar

移动日历的草图。它不仅详细,而且明智地演示了在选择元素时弹出的窗口。通过这种方式,您可以看到设计的功能以及外观。

This homepage design gives you a clear idea of how the big elements - image, block of text - will look digital Wireframe Sketches

这个主页设计让你清楚地了解了大元素(图像、文本块)的外观,而不会浪费时间在“lorem ipsum”文本和示例图像上。

 digital Wireframe A grid design sketch that reinforces itself with vertical bars

网格设计草图,用垂直钢筋加固自身。您可以看到每个元素是如何排列的,以及它相对于其他元素的位置。

you don't need to be a digital artist wiz to create an effective wireframe sketch

这个备用的裸体草图表明,和手绘草图一样,创建有效的线框草图不需要成为数字艺术家wiz。一些正方形、矩形、线条和文本就足以展示设计的效果。

 digital Wireframe this time showing a design that's more complex

另一个备用的裸体草图示例,这一次显示了更复杂的设计。只要元素在它们需要的地方,就可以使用不同的灰色来区分元素,并且一些简单的文本描述每件事情的功能(当需要时),然后你就可以开始了。

homepage wireframe sketch of a social network digital

上一个草图(主/活动屏幕)中显示的社交网络的主页线框草图。

 digital Wireframe Color is effectively used in this e-commerce sketch

在这个电子商务草图中有效地使用了颜色。浅蓝色表示什么是按钮,草图中的其余矩形用于文本输入或选择器。

 digital Wireframe sketch almost-finalizes all the essential elements

这张草图几乎完成了所有基本元素(如按钮),同时没有在颜色、背景和其他造型上浪费时间。

Shades of grey are used effectively here Wireframe Sketches

这里有效地使用了灰度来区分图像和背景,文本块让您清楚地了解真实内容和网页的外观。

This sketch goes so far as to style the text, buttons, and other elements digital Wireframe

该草图甚至可以设计文本、按钮和其他元素的样式,同时不会在颜色、背景和示例图像上浪费时间。这表明,通过完成20%最重要的元素,而忽略80%不重要的元素的造型,您可以只需一个线框草图就可以获得几乎完整的设计图。

his wireframe sketch also focuses on styling only the 20% of essential elements

与上述草图一样,此线框草图也只关注20%的基本元素的样式,而忽略了其余元素。您可以非常清楚地了解最终网页的外观,而无需草图添加颜色、背景和其他元素。

您是否创建网络和移动线框草图?

交给你:你觉得线框绘制最有效的理由是什么?请在下面的评论部分自由分享。

来源:https://speckyboy.com/web-mobile-wireframe-sketch-examples/

0