2017年web前端职位_2017年值得关注的20个上升的Web设计趋势

一年过去了,设计师们正展望未来。 许多有希望的设计趋势必将在2017年爆发。去年,我介绍了2016年的顶级设计趋势 ,从那时起,我们已经看到了很多变化

因此,在这篇文章中,我选择了我注意到的2017年 最受欢迎的20大趋势 。 这些设计趋势可以应用于任何网站 ,因此在我们度过2017年及以后时,请密切注意这些技术。

1.“特色”徽章

新兴企业,博客,SaaS项目甚至小型企业现在都在其网站上使用“具有特色”徽章 。 这些徽章通常会链接到主流博客 (如HuffPo,Forbes,CNN,Fox和其他新闻媒体)上的文章。

这里徽章

目标是验证网站并与新访客建立信任 。 当某人看到权威出版物中提到该网站时,便更容易信任该网站。

实际上,许多顶级博客都对这种接触表示赞赏 ,因此它确实可以帮助涉及的每个人。 这些大型网站通常会在网上发布其徽标,但您也可以通过四处搜索来找到透明的PNG或SVG。

陪伴网站

另外,建议您链接回到提及您网站的原始文章 。 这证明您确实在网站上被提及 ,而不仅仅是在提出申诉。

2.大胆的全大写导航链接

我已经看过数十个时尚的导航菜单,它们都依赖于这种相同的设计。 这些导航链接的字体和大小不同,但通常具有类似的功能 ,例如:

  • 所有大写
  • 粗体
  • 均匀分布的
  • 对准右角

Zazzle的主页就是一个很好的例子。 但是您可以在许多启动网站上找到它因为这是共享易于阅读和浏览的链接的一种干净方法

赞兹导航

我主要将这种趋势与企业和科技初创公司联系在一起,但在博客中也很普遍。

请记下下次您看到这种趋势,因为它无处不在。 我希望它在2017年之前保持良好的增长。

3.杂志式博客

博客在2000年代初期是一个小众概念。 如果您在2003年经营过一个博客,那将是一个可爱的小爱好。 在短短的十年中,这种趋势已经发生了根本性的变化。 现在,博客可以提供全职收入 ,而且它们开始看起来更像是数字杂志

回顾一下TechCrunch于2006年首次发布时的原始设计 。看起来像一个通用的WordPress博客吧?

大约在2006年的Techcrunch

现在查看2017年Techcrunch的当前主页:

techcrunch 2017主页

它不仅看起来像一本杂志 ,而且功能像一 本杂志 。 TechCrunch每天发布数十个(如果不是数百个)新帖子。 它们是启动新闻的第一来源。

杂志风格的设计趋势有很大的不同。 主页使用大型故事栏目 ,每个帖子都有自己的缩略图 ,文章页面围绕标题

当您考虑时,TechCrunch并没有太大变化。 它仍然是“只是一个博客”。 但这就像杂志一样进行设计和管理 ,这与众不同。

4.视频背景

自动播放声音可能是网络上最令人讨厌的趋势。 但是令人惊讶的是, 自动播放视频(无声音)是一种快速增长的趋势。 您可以在数十个商务站点上发现这一点,视频背景占据了整个屏幕

Invision主页

正确应用后,我真的很喜欢这种技术。 只要视频与网站相关 且不妨碍内容 ,我认为在标题中使用该效果很酷。

5.幽灵按钮

随着极简主义进一步融入网页设计中,许多新趋势正在涌现。 这样的趋势之一是没有内部填充但具有外部边框鬼按钮的出现。

instamojo主页

在大多数情况下,这些按钮与其他按钮形成对比以引起注意。 您可以在Instantmojo主页上看到此内容,绿色图标注册按钮位于链接到实时演示的鬼按钮旁边

其他站点在站点范围内的按钮上采用了纯鬼设计样式 。 一个很好的例子是新的Bootstrap布局。

我认为鬼按钮在倾向于极简主义的网站上有效。 它们可能并不适合每个网站,但我确实看到它们的使用量逐年增加。

6.模态窗口选择加入

模态窗口超级烦人,我无法想象任何用户会喜欢它们。 但是,事实证明它们增加了注册人数 ,营销人员不能忽略有效的技术。

这就是为什么我认为模式选择加入窗口将在2017年继续攀升的原因。

它们不是我最喜欢的东西,并且我从未将它们添加到我的网站中。 但是,如果目标是增加注册人数,那么模态窗口是使事情进展的必经之路。

tnw模态窗口

新插件甚至可以定位退出意图 ,每当用户尝试离开站点时都会触发模式 。 其他模式会在x秒后出现,或者在用户向下滚动足够远时设置为打开。

不管模式是如何触发的,如何设计的,或者您如何看待它们,我都认为它们将长期存在。

7.插图与矢量艺术

随着诸如Sketch和Affinity Designer之类的新矢量设计程序的出现,网络上掀起了一波新的插画家浪潮。 现在,图形设计和界面设计正不断与越来越多的跨学科设计师融合。

这意味着我们将在不久的将来看到更多自定义图标全页插图

可重复的插图

许多插画家都是执业的画家,因此我认为我们会看到用数字绘画软件制作的整页背景 ,它们像概念图一样详细渲染。

8.固定的滚动侧栏

第一波固定设计的重点是导航栏 。 这些都是太常见的,尤其是在响应式设计中,固定导航栏复制了本机移动应用程序的感觉

但是在2017年,我希望看到更多粘性元素- 粘性侧边栏

好莱坞记者侧栏

几乎每个主要博客都使用这种粘性的侧边栏。 它使内容始终可见,并增加了用户与侧边栏内容进行交互的可能性。

加上许多免费的jQuery插件 ,可以复制粘贴的侧边栏效果 。 在任何网站上进行设置都比以往任何时候都容易。

9.页内目录

最近的案例研究发现,在用户保留的排名和质量上, 长篇内容优于短篇 。 当然,这并不总是正确的,因为可以快速回答某些查询。

但是,随着网络上长篇幅内容的增多,很自然地会看到在文章中添加了更多目录 。 您会在冗长的评论网站或分解成所列项目的文章中看到这一点。

sweethome目录

添加目录可以改善用户体验,并有助于将阅读内容分成较小的块。 目录还可以帮助您的网站排名更高 ! 如果Google发现您的网页有价值,那么您可能在搜索结果中获得跳转链接

确实,现在ToC相当稀缺。 但我预计这种趋势会在2017年及以后的几年里爆发。

10.明亮多彩的设计

我不确定这种趋势是否来自极简主义或对Google的材料设计的React。 但是我偶然发现了数十个网站,这些网站使用明亮的柔和色彩和其他鲜艳的色彩混合在一起,以创造出非常漂亮的外观。

Rentberry主页

Rentberry主页是一个很好的例子,它也使用 大量的渐变。 甚至在下面都有前面提到的“精选”徽章! 一个站点上有两种趋势。

您会注意到,颜色不会渗透到整个页面上 ,并且会被其他白色和灰色阴影所屏蔽。

条纹彩色页

我已经看到足够多的这些充满活力的配色方案 ,以至于它们正在不断增加。

11.滚动动画

Web设计人员了解滚动顶及其可怕程度。 但是,这并不是我所说的“滚动动画”的意思。 我已经看到许多网站,当您滚动浏览页面的特定部分时,这些内容现在会在内容中显示动画

陷阱应用

这种趋势主要局限在希望在设计中花些力气的初创首页和SaaS公司

我不能说这是否是一个特别有用的趋势。 它确实吸引了人们的眼球,但我认为它所提供的功能远不止是美学。 不过,这种趋势似乎正在Swift蔓延,而如果很少使用,它可能确实很整洁。

12.单页应用程序(SPA)

单页应用程序是纯粹使用Ajax调用构建的网站。 JavaScript 从服务器提取内容动态加载它 ,因此页面永远不会刷新

常见的例子是Gmail和Facebook等网站。 但是随着更多的JS技术的发展 ,我注意到越来越多的SPA一直在开发。 哎呀,甚至CodePen都可以被认为是SPA。

借助React和Aurelia等强大的前端库,在2017年从头开始创建SPA将变得更加容易。

13.可切换的搜索栏

过去,无论是在侧边栏还是在导航中,搜索字段始终在网页上的某个位置可见。 但是最近我注意到更多的搜索字段默认隐藏的 ,必须切换到视图中

日本时报搜索

当然,这是一种节省页面空间同时仍保持搜索功能可访问性的方便趋势。 如果不确定在新设计中将搜索表单放置在何处,则可以考虑使用链接到导航中放大镜图标的切换字段。

14. Adblock消息

无可否认, 广告拦截正在上升 。 唯一的问题是出版商将如何应对这一趋势。 有些网站会 Time.com之的广告空间中礼貌地添加消息 。 在Hongkiat上,您会注意到内部广告填补了进一步链接到网站的空白

秃

我看到的一种严重趋势是adblock内容块 。 这是一种“阻止广告拦截器”的技术 。 许多大型网站(例如Business InsiderForbes)都已经具备此功能。 不幸的是,这既伤害了用户,也伤害了发布者,这都源于劣质的广告技术。

归根结底,在广告屏蔽辩论中您应归咎于谁或所处的位置都没有关系。 越来越多的人正在安装adblock插件,并且我期望更多的发布商会对此进行推迟

15.纯SVG图标

SVG图形已经渗透到网络中,但是它们每天都在增长。 我觉得2017 年对于网络上的SVG来说将是丰硕的一年

如果您知道如何搜索,则可以在Flaticon等网站上找到数千个免费的SVG图标集 。 但是您也可以将SVG 编码为HTML ,例如,通过在CodePen上使用此示例

codepen svg动画图标

因此,设计人员有使用SVG的方法,而开发人员也有使用SVG的方法。 全面的现代浏览器支持看起来不错 ,因此兼容性没有问题。 所需要的就是让足够多的设计人员认识到SVG的强大功能并开始使用它们!

16. Adob​​e XD

Adobe在2016年发布了Adobe XD的完整测试版,此后Swift发展。 目前,它同时支持Mac和Windows ,并且处于全面推出之前的测试阶段

您可能会嘲笑任何程序都会超越Sketch,但是出于某种原因,Adobe是创意作品的主要软件公司。 此外,在Adobe 希望为所有人提供支持的同时,Sketch仍仅支持 Mac。

我坚信,来年我们将阅读有关Adobe XD的更多内容。 它可能成为设计UI原型的必备软件—因此我们最终可以将Photoshop用作照片处理工具(按预期使用)。

随着新软件的兴起,还有许多教程和免费赠品GUI套件 。 您可以在Dribbble中找到许多Adobe XD免费赠品以及两个针对XD的新免费赠品网站 DesignmineXD Guru

17.更多的汉堡包菜单

喜欢它还是讨厌它, 汉堡包就在这里 。 有许多可用性研究反对隐藏在菜单中的菜单 。 但是,由于屏幕很小,只有很多选择,因此目前没有更好的选择。

汉堡图标逐渐成为导航菜单的可识别符号 。 就像放大镜图标表示“搜索”一样,三栏式汉堡包图标很快将成为“菜单”的代名词。

对于大多数精通技术的人来说,这已经是正确的。 但是,随着时间的流逝,越来越多的人使用智能手机并开始浏览移动网络。 他们正在学习将该汉堡包与导航菜单联系在一起,而且看不到尽头。

18.产品功能图标

在Treehouse上写过关于这种趋势的文章但最近没有提及。 到2017年,这一趋势将是巨大的 。 这可能是在主页上共享产品功能的最常用方法。

特色图标可按

首先列出产品的功能 。 该产品可以是从SaaS程序到WordPress主题甚至是物理项目的任何东西。

然后,您可以设计自定义图标找到代表这些功能的图标集 。 最好避免使用诸如“可靠”或“快速”之类的通用功能 ,因为大多数人都希望使用这些功能。

而是列出真正重要的功能。 如果这是一个高级WP主题,则可能会列出它的响应能力,附带的小部件数量或菜单的工作方式。

inferno.js主页

这些功能图标的作用类似于视觉效果 ,有助于销售每个功能 。 文字本身很难消费,但视觉效果一目了然

19.折叠式CTA

传统上, 号召性用语是遍布整个网站的 。 但随着游客花费更少的时间在网站上 ,它的关键是有倍以上强大的CTA 权利

这些号召性用语可能是按钮,选择加入表格或其他输入,以促使人们采取某些行动,例如注册或阅读博客文章。

加里·韦纳楚克主页

我无法告诉您如何设计CTA或如何针对转化进行优化。 但我可以说,这种趋势似乎正在将这些CTA放在首位,并且清晰可见 ,所有访客都可以看到。

20.内容范围较小

监视器已经变得如此之大,以至于大多数网站不得不设置最大宽度 。 句子宽度为2000px时,阅读句子要困难得多,而宽度仅为700px。

较小的内容更容易消费 ,并最终在内容密集的网站上创造更好的体验

我认为更多的设计师正在意识到这一点,并将逐渐减小其内容区域的大小 。 我希望最大宽度为750像素,但您可以缩小到600像素或更小。

wpbeginner博客

较短的段落较少的句子较小的内容区域将始终提高可读性 。 《纽约时报》等主要出版物可能会偏离其自身的结构准则。 但是对于简单的博客或商业网站,趋势是朝着内容更长,段落和内容区域更小的方向发展。

结语

在这篇文章中,我还没有涉及其他许多趋势,但是我认为这20个最有趣。 在我们迈向2017年的过程中,显而易见,哪些趋势正在爆炸,哪些趋势没有爆炸。

如果您对即将到来的设计趋势有其他想法或建议,请随时在下面发表评论。


翻译自: https://www.hongkiat.com/blog/web-design-trend-2017/

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值