网页设计师必须了解的网页设计流行趋势

几乎所有的设计项目当中,设计师几乎都需要借助设计来尽量抓住用户的注意力。一些能够更好、更快抓住用户注意力的设计技巧就成了设计师最喜爱的东西。进入5月之后,会发现正在流行的几个设计趋势都呈现出这样的特点,无论是时髦小巧的导航,还是有趣的图层裁剪效果。接下来,我们就看看5月流行的3中设计趋势。

1. 时髦小巧的导航设计

之前流行过大型的导航设计,随后汉堡图标又大行其道。可能对于汉堡菜单的隐藏式设计不够明显,传统的导航设计又逐步回归,不过在风格上

,倒是呈现出时髦而小巧的特点。这种导航在细节和体验上更加考究,更重要的是,小巧的布局和信息量的控制使得它一目了然,如果想要更多的导航信息则需要点击「更多」按钮。

这种导航设计的优点在于,它为下面的主要内容留下了足够的空间和焦点,又确保了导航本身的功能性。

而缺陷也同样明显,由于导航设计得过于小巧,可能会让部分用户感到困惑。就目前来看,这种导航适合单页式的网站或者是访问量相对没有那么大、个性十足的网页,结构复杂的网站就不适合这样的设计趋势了。

下面的三个网站不同程度地运用了这一设计趋势:

Geex Arts在页面的右侧加入了一个黑色的垂直条,用一个小的暂停按钮和小巧的动态图片来吸引你切换页面。小巧的导航被置于页面底部。

IC Creative这个网站采取了一个相对折中的方案,采用了侧边栏导航,而其中包含了 LOGO、汉堡图标和搜索按钮,这样保证了菜单的显著,也保持了整个设计的简约性。当你点开汉堡图标的时候,会发现这里面真的隐藏着大量的链接,甚至包含了文章推荐。

Weekend Creative Agency的导航栏同样置于侧边栏,不过是在左侧,所有的链接都摆在明面上,但是从名称到样式都非常的简约小巧。

2. 有趣的图层剪切效果

学会通过图层控制来营造充满视觉吸引力的设计,会让你在设计的时候如虎添翼。通过控制不同图层的元素互动,可以创造令人着迷的视觉效果。

值得庆幸的是,以往令人挠头的各种设计效果,现如今对于网页前端而言已经是小菜一碟了。越来越成熟的前端技术让图层的控制和管理更加得心应手。最近,最为流行的图层相关的技术,是图层剪切的效果,这种效果指的是将部分元素切除为前景中的元素腾出位置。

这种图层剪切效果几乎适用于任何类型的网站和设计,被裁剪的部分可以是任意大小、位置的,而使用这一效果的诀窍在于控制元素之间的协同,前景的元素要和背景的元素之间完美地配合起来。

被裁剪的部分应该和整个设计的信息传达息息相关,和设计目标保持一致。比如,它应该能够辅助导航,引导视觉,帮助用户获取信息,促进功能,帮助用户理解信息。

Tilted Chair这个网站中,设计师将标题中切割出空间,放上了一只眼睛,非常引人注意。

RJ Investments这个网站在图片元素中切割出空白区域,来展示文本,放置行为召唤元素。

DTO Films这个网站采用了另外一种方式,设计师在背景中裁剪出一个区域,并且以明亮的色彩填补其中,再叠加上超大的标题文本,错落地排布,搭配上动效,营造出有趣的视觉体验。

3. 快速剪辑的视频

设计师一直在借助视频来呈现设计,讲述故事。不过,在视频内容的呈现上,千变万化,目前最流行的做法,是使用快速剪辑或者加速之后的视频,来快速地呈现丰富的内容。毫无疑问,这样的方式不仅贴合了如今用户注意力集中时间短的现状,而且更好地保持用户的参与度。

快节奏的视频剪辑,好处在于更加快速的信息展现。用户在浏览的时候能够很快弄明白视频要呈现的内容,整个视频的循环速度也更快,也能够更好的促进用户和网站的交互。

下面的三个网站都使用了快速剪辑的视频元素。

Dept Agency当中,设计师不仅让视频的剪辑切换更快,而且还使用了快进的方式加速,快速剪辑的视频当中,每以小段都包含了一个关键词,用户几乎不需要滚动页面就可以在快速展现的视频中了解到很多内容。

Plae这个网站同样采用了视频背景,视频是由几段视频组合起来的,每一段视频的前半部分是常速播放,后半部分是加速播放,不过总体上都很短,也就几秒钟。这种剪辑让访客可以清晰地观察到场景,又能快速获取信息,页面整体上布局并不会随着视频变化,CTA 按钮和文本位置不变,用户也可以便捷地同网页交互。

Meskie Granie Music Festival这个网站使用不同速度播放视频,并且通过快速叠加为用户创造出独特的风格体验。

结语

许多设计趋势相互之间可以搭配,而许多设计师也确实将它们合理地结合到一起,创造出吸引人的体验。仔细研究一下,应该会给你不少启发。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,734评论 6 505
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,931评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,133评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,532评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,585评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,462评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,262评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,153评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,587评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,792评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,919评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,635评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,237评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,855评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,983评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,048评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,864评论 2 354

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,103评论 4 62
  • a (an) art. 一(个、件……) abandon v.抛弃,舍弃,放弃 ability n. 能力;才能 ...
    隔壁老石阅读 402评论 0 0
  • 文|小眠宝 01 迄今为止,我最喜欢的一本书是毛姆的《月亮与六便士》。 大学时期一口气读完之后,这本书就深深地影响...
    小眠宝阅读 815评论 2 1
  • 夏, 雨, 泥泞了道路 洒落了遍地 枯黄的枝叶 洁白的油桐花 曾经的年少轻狂,如今已两鬓染霜,虽已步入半百之年,爱...
    cathycjh408阅读 755评论 0 46
  • 妈说 等我老了 不要着急 可能到时候我糊涂了 什么也记不清 妈说 我也有曾经 我曾经看着你 不吵不闹 让我开心 妈...
    不俗小七阅读 613评论 2 25