精选国外简洁大气的单色网页设计欣赏,浅谈如

2019-09-24 21:54栏目:生活达人
TAG:

365体育比分直播,365在线网投,丝带效果的网页设计在国内的大多数网站中并不多见,因为丝带元素的运用总会给人一种比较轻松,甚至女性化的感觉,所以使用范围很狭隘,设计师也不敢轻易尝试。

来看看高手是怎么做的,今天搜集了一组值得同学们借鉴学习的图文混排优秀案例,为了同学们能有所收获,案例都附有到位的分析,几乎每个案例都有特别的排版技巧,对提升版式设计能力很有帮助,来学习咯。

也许你会认为单色的网页设计太过单调,那么,就让AnyForWeb用下面的案例打消你的疑虑。网页不会因为色彩而无聊,用户会通过色彩看到设计师的心。

但AnyForWeb认为,网页中的丝带效果并不只是清新文艺系的专利,柔美的丝带线条也能释放出一种特别的张力。直接上图!

从过去到现在,设计师们总是对方位性的问题格外敏感,可能还有些轻微的强迫症。比如有的网页设计师特别偏好黄金比例的使用,从而忽视了用户的视觉感官体验。

1.你能想象一个网站的页面只由纯色块和最普通线条组成吗?第一个案例让你大开眼界。这样的设计在技术上也许新手设计师就能轻易完成,设计想法也并不出跳,最简易的两者组合在一起,却表现出了令人意想不到的视觉效果。

1.第一个案例利用杂技表演的演出场景为网页营造出一种独特的平衡感,这类型的画面很容易让浏览者找不到视觉重点。要解决这个问题其实也很简单,只要有一个颜色与页面环境相符的色块,就会让整个网页的逻辑关系更清楚。而中规中矩的色块又难免显得呆板,如果这时用丝带效果来代替呢?网页一秒钟变生动!

其实,所有的法则或规律都需要设计师们的弹性使用,生搬硬套可能只会适得其反。以下是AnyForWeb为大家搜集的值得借鉴的图文混排案例,供大家评论欣赏。

365体育比分直播 1

365体育比分直播 2

Nature House

  1. 365体育在线网址,Design Week Portland的网页首屏也采用了单色的设计手法,页面中只有大色块,以及比较复古字体的文字。这个案例提示我们,如果要用不那么中规中矩的字体,背景尽量要选择单一或模糊的图片。

2.这个案例的背景用了比较写实的纹理背景,因此,如果用比较常见的布局方式,比如将丝带效果放在页面上中部会表现得很突兀。设计师很巧妙的把丝带的位置分别放在左上角和中下方,两者的呼应形成了礼物的包装方式,让整体看起来更融合。

第一个案例是图文交错的一种新形式。案例图片中的每一个字母或是小图片都会随着鼠标的悬停产生效果,由图变字,这样的设计不仅让图文之间的搭配变得更加生动,也增加了用户浏览时的趣味性。

365体育比分直播 3

365体育比分直播 4

365体育比分直播 5

3.下面这个案例从严格意义上来说并不属于单一色的网页设计,只能称之为背景单一色系。背景使用了高清的仿真图片,涂鸦风格的文字覆盖在背景上方,让整个界面看起来更加自由不羁,多了一些城市街头的感觉。

3.将丝带效果贯穿于logo设计中是一种比较常见的使用方式。这一现象证明了,丝带效果可以起到突出重点的作用。但其中值得注意的是,丝带色块的色彩一定要和logo,以及整体色彩协调。

The Tech Beach

365体育比分直播 6

365体育比分直播 7

The Tech Beach的网站背景利用了Metro的设计风格,担心太规整?所以设计师将透明度较高的泼墨形状色块放在页面中间位置,文字重点和logo浮在色块上方。这样的图文搭配模式能让用户很自然的领会浏览时的先后顺序。

4.大面积使用透明度极低的色块作为网页背景,会让界面显得更加自然清新。手绘风的可爱字体设计让网站加入了一些天真和童趣,与纯色背景相得益彰。网站整体的颜色搭配也十分流畅。

4.Autoffsets的整体风格表现的出奇的一致。从清新童趣的背景到亮丽的色彩,再到折纸风格的板块设计,所有的元素都展现了网站活泼的一面。这个案例中的折纸设计虽然也是相对较硬的线条,但看起来还是俏皮不少。

365体育比分直播 8

365体育比分直播 9

365体育比分直播 10

Anyi Lu

5.灰白色系的背景让网页中心的TheSecret Door变得更加神秘,把页面气氛渲染到更深入的层次,增强了浏览者的点击欲望。单色背景在这个案例中的主要作用在于烘托网站所要表达的心情和氛围。

5.这又是一个用丝带效果体现平衡感的案例,但与第一个案例不同的是,该网页中的丝带效果运用了分段的形式来实现,包括标题下方的黄色小丝带,更是起到了引导用户阅读浏览的重要作用。

Anyi Lu的巧妙之处在于留白部分。案例网页中的留白在中间的位置,看似文字和图片被一分为二了,但从心理角度上来说,这样做其实更加能激发用户连结图和字之间联系的好奇心、在单色底色的映衬下,幽灵按钮的设计也变得很抢眼,更有利于用户点击。

365体育比分直播 11

365体育比分直播 12

365体育比分直播 13

6.这个案例也并不算是一种典型的单色网页,但也许能为设计师们带来一些灵感。背景来源于天空,良好的前端效果让我们仿佛惬意的置身于云层之上,带来一种前所未有、朦朦胧胧的独特美感。

6.这个网站的风格比较复古,并且使用了较多的圆形元素设计。几何元素丰富的页面一旦处理不当会显得很繁复,页面重点就会变得很难抓,用户在浏览的时候会感到很困惑,所以丝带效果的又一功能被展现了,它能让内容更醒目和灵动。

Moon Camp

365体育比分直播 14

365体育比分直播 15

Moon Camp彻底把文字和图片混合在一起。这种做法成功与否不仅取决于整体页面的布局,色彩的搭配也是个很关键的因素。网页色调属于昏暗系,所以设计师选择了星空色作为字体的颜色,与网站风格吻合,文字的不规则排列也让网站多了一份神秘感。

7.这是一个经过改良和创新后的丝带效果设计。设计师将丝带的灵感融入Metro和网格布局中,让网页条理清晰的同时又充满设计感。

365体育比分直播 16

365体育比分直播 17

Zizzi Ristorante

8.这是一个扁平化的网站,贯穿整体的线索除了背景色彩以外,还有丝带效果的设计,从首屏到最后一屏,每一个页面中都包含了同色系的丝带设计,让页面更有感染力。

Zizzi Ristorante的网站第一眼可能会觉得有些凌乱,但用户的视线最终还是会聚集到枚红色框内的内容上。单从布局上来说,这个网站并没有什么过人之处,但仔细一看,我们不难发现其实网站中图片的占比很少,按照常规的做法,页面会变得很单调,因此,设计师最后用一些色块或是图形巧妙地化解了这个不足,无形中完成了图片与文字之间的完美合作。

365体育比分直播 18

365体育比分直播 19

9.谁说丝带效果只能可爱?这个案例就看起来比较严肃。在粗大字体的上方或下方可以利用丝带设计来展现网页的华丽和隆重,也让用户更容易接受。

LUKE BEARD

365体育比分直播 20

LUKE BEARD的网站几乎没有什么布局可言,左边文字右边图片,仅此而已,但一些小设计让整个页面变得精致起来。图片中人物的视线向文字流去,沿着视觉流向来排布信息是很多国外网站惯用的布局手法。图片会引导用户去看文字内容,两者之间形成一种默契的逻辑关系。

10.用户引导是用户体验中很重要的一个部分,用柔和的丝带来替代原本冷冰冰的箭头标识能让页面变得更加生动有趣。

365体育比分直播 21

365体育比分直播 22

ZULU & ZEPHYR

丝带效果的运用也可以很广泛,一曲一直、角度变换、色彩搭配、摆放位置,一些些细微的变化都足以让网页产生不一样的效果,动手试试吧!

ZULU & ZEPHYR的网站运用的是对比布局法。大海和天空在色彩上形成了一种对比,起到了互相烘托并且增强效果的作用。他们之间的对比让页面中央的文字引起了用户的注意。用图来衬托文字,让画面充满了产生了一种别样的韵律。

365体育比分直播 23

Tomas Jasovsky

Tomas Jasovsky网站中的图文看起来似乎置身于两个图层中,也许若隐若现的内容才是设计师想表达的重点。

365体育比分直播 24

M-Power Yoga

M-Power Yoga的网站图片为用户带来了一种垂直和水平的双向平衡感,这样的图片能让用户更加心平气和的认真阅读页面中的文字。

365体育比分直播 25

Segno

Segno的网站无论从图片内容或是色调上都充满了神秘感。对称的设计也显得比较讨巧,文字在页面居中的位置,给了用户最佳的浏览体验。

365体育比分直播 26

在网页设计中,文字内容和图片的比重占了很大一部分,但差不多的信息量,呈现在网页上的效果却会大相径庭。如何将这些内容和元素安置在最合适的位置,也许是这其中很主要的原因。

版权声明:本文由365在线网投发布于生活达人,转载请注明出处:精选国外简洁大气的单色网页设计欣赏,浅谈如