一年过去了，设计师们正展望未来。 许多有希望的设计趋势必将在2017年爆发。去年，我介绍了2016年的顶级设计趋势 ，从那时起，我们已经看到了很多变化 。
因此，在这篇文章中，我选择了我注意到的2017年 最受欢迎的20大趋势 。 这些设计趋势可以应用于任何网站 ，因此在我们度过2017年及以后时，请密切注意这些技术。
1.“特色”徽章
新兴企业，博客，SaaS项目甚至小型企业现在都在其网站上使用“具有特色”徽章 。 这些徽章通常会链接到主流博客 （如HuffPo，Forbes，CNN，Fox和其他新闻媒体）上的文章。
目标是验证网站并与新访客建立信任 。 当某人看到权威出版物中提到该网站时，便更容易信任该网站。
实际上，许多顶级博客都对这种接触表示赞赏 ，因此它确实可以帮助涉及的每个人。 这些大型网站通常会在网上发布其徽标，但您也可以通过四处搜索来找到透明的PNG或SVG。
另外，建议您链接回到提及您网站的原始文章 。 这证明您确实在网站上被提及 ，而不仅仅是在提出申诉。
2.大胆的全大写导航链接
我已经看过数十个时尚的导航菜单，它们都依赖于这种相同的设计。 这些导航链接的字体和大小不同，但通常具有类似的功能 ，例如：
- 所有大写
- 粗体
- 均匀分布的
- 对准右角
Zazzle的主页就是一个很好的例子。 但是您可以在许多启动网站上找到它，因为这是共享易于阅读和浏览的链接的一种干净方法 。
我主要将这种趋势与企业和科技初创公司联系在一起，但在博客中也很普遍。
请记下下次您看到这种趋势，因为它无处不在。 我希望它在2017年之前保持良好的增长。
3.杂志式博客
博客在2000年代初期是一个小众概念。 如果您在2003年经营过一个博客，那将是一个可爱的小爱好。 在短短的十年中，这种趋势已经发生了根本性的变化。 现在，博客可以提供全职收入 ，而且它们开始看起来更像是数字杂志 。
回顾一下TechCrunch于2006年首次发布时的原始设计 。看起来像一个通用的WordPress博客吧？
现在查看2017年Techcrunch的当前主页：
它不仅看起来像一本杂志 ，而且功能像一 本杂志 。 TechCrunch每天发布数十个（如果不是数百个）新帖子。 它们是启动新闻的第一来源。
杂志风格的设计趋势有很大的不同。 主页使用大型故事栏目 ，每个帖子都有自己的缩略图 ，文章页面围绕标题 。
当您考虑时，TechCrunch并没有太大变化。 它仍然是“只是一个博客”。 但这就像杂志一样进行设计和管理 ，这与众不同。
4.视频背景
自动播放声音可能是网络上最令人讨厌的趋势。 但是令人惊讶的是， 自动播放视频（无声音）是一种快速增长的趋势。 您可以在数十个商务站点上发现这一点，视频背景占据了整个屏幕 。
正确应用后，我真的很喜欢这种技术。 只要视频与网站相关 且不妨碍内容 ，我认为在标题中使用该效果很酷。
5.幽灵按钮
随着极简主义进一步融入网页设计中，许多新趋势正在涌现。 这样的趋势之一是没有内部填充但具有外部边框的鬼按钮的出现。
在大多数情况下，这些按钮与其他按钮形成对比以引起注意。 您可以在Instantmojo主页上看到此内容，绿色图标注册按钮位于链接到实时演示的鬼按钮旁边 。
其他站点在站点范围内的按钮上采用了纯鬼设计样式 。 一个很好的例子是新的Bootstrap布局。
我认为鬼按钮在倾向于极简主义的网站上有效。 它们可能并不适合每个网站，但我确实看到它们的使用量逐年增加。
6.模态窗口选择加入
模态窗口超级烦人，我无法想象任何用户会喜欢它们。 但是，事实证明 ， 它们增加了注册人数 ，营销人员不能忽略有效的技术。
这就是为什么我认为模式选择加入窗口将在2017年继续攀升的原因。
它们不是我最喜欢的东西，并且我从未将它们添加到我的网站中。 但是，如果目标是增加注册人数，那么模态窗口是使事情进展的必经之路。
新插件甚至可以定位退出意图 ，每当用户尝试离开站点时都会触发模式 。 其他模式会在x秒后出现，或者在用户向下滚动足够远时设置为打开。
不管模式是如何触发的，如何设计的，或者您如何看待它们，我都认为它们将长期存在。
7.插图与矢量艺术
随着诸如Sketch和Affinity Designer之类的新矢量设计程序的出现，网络上掀起了一波新的插画家浪潮。 现在，图形设计和界面设计正不断与越来越多的跨学科设计师融合。
这意味着我们将在不久的将来看到更多自定义图标和全页插图 。
许多插画家都是执业的画家，因此我认为我们会看到用数字绘画软件制作的整页背景 ，它们像概念图一样详细渲染。
8.固定的滚动侧栏
第一波固定设计的重点是导航栏 。 这些都是太常见的，尤其是在响应式设计中，固定导航栏复制了本机移动应用程序的感觉 。
但是在2017年，我希望看到更多粘性元素- 粘性侧边栏 。
几乎每个主要博客都使用这种粘性的侧边栏。 它使内容始终可见，并增加了用户与侧边栏内容进行交互的可能性。
加上许多免费的jQuery插件 ，可以复制粘贴的侧边栏效果 。 在任何网站上进行设置都比以往任何时候都容易。
9.页内目录
最近的案例研究发现，在用户保留的排名和质量上， 长篇内容优于短篇 。 当然，这并不总是正确的，因为可以快速回答某些查询。
但是，随着网络上长篇幅内容的增多，很自然地会看到在文章中添加了更多目录 。 您会在冗长的评论网站或分解成所列项目的文章中看到这一点。
添加目录可以改善用户体验，并有助于将阅读内容分成较小的块。 目录还可以帮助您的网站排名更高 ！ 如果Google发现您的网页有价值，那么您可能会在搜索结果中获得跳转链接 。
确实，现在ToC相当稀缺。 但我预计这种趋势会在2017年及以后的几年里爆发。
10.明亮多彩的设计
我不确定这种趋势是否来自极简主义或对Google的材料设计的React。 但是我偶然发现了数十个网站，这些网站使用明亮的柔和色彩和其他鲜艳的色彩混合在一起，以创造出非常漂亮的外观。
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 Insider和Forbes）都已经具备此功能。 不幸的是，这既伤害了用户，也伤害了发布者，这都源于劣质的广告技术。
归根结底，在广告屏蔽辩论中您应归咎于谁或所处的位置都没有关系。 越来越多的人正在安装adblock插件，并且我期望更多的发布商会对此进行推迟 。
15.纯SVG图标
SVG图形已经渗透到网络中，但是它们每天都在增长。 我觉得2017 年对于网络上的SVG来说将是丰硕的一年 。
如果您知道如何搜索，则可以在Flaticon等网站上找到数千个免费的SVG图标集 。 但是您也可以将SVG 编码为HTML ，例如，通过在CodePen上使用此示例 。
因此，设计人员有使用SVG的方法，而开发人员也有使用SVG的方法。 全面的现代浏览器支持看起来不错 ，因此兼容性没有问题。 所需要的就是让足够多的设计人员认识到SVG的强大功能并开始使用它们！
16. Adobe XD
Adobe在2016年发布了Adobe XD的完整测试版，此后Swift发展。 目前，它同时支持Mac和Windows ，并且处于全面推出之前的测试阶段 。
您可能会嘲笑任何程序都会超越Sketch，但是出于某种原因，Adobe是创意作品的主要软件公司。 此外，在Adobe 希望为所有人提供支持的同时，Sketch仍仅支持 Mac。
我坚信，来年我们将阅读有关Adobe XD的更多内容。 它可能成为设计UI原型的必备软件—因此我们最终可以将Photoshop用作照片处理工具（按预期使用）。
随着新软件的兴起，还有许多教程和免费赠品GUI套件 。 您可以在Dribbble中找到许多Adobe XD免费赠品，以及两个针对XD的新免费赠品网站 Designmine和XD Guru 。
17.更多的汉堡包菜单
喜欢它还是讨厌它， 汉堡包就在这里 。 有许多可用性研究反对隐藏在菜单中的菜单 。 但是，由于屏幕很小，只有很多选择，因此目前没有更好的选择。
汉堡图标逐渐成为导航菜单的可识别符号 。 就像放大镜图标表示“搜索”一样，三栏式汉堡包图标很快将成为“菜单”的代名词。
对于大多数精通技术的人来说，这已经是正确的。 但是，随着时间的流逝，越来越多的人使用智能手机并开始浏览移动网络。 他们正在学习将该汉堡包与导航菜单联系在一起，而且看不到尽头。
18.产品功能图标
我在Treehouse上写过关于这种趋势的文章，但最近没有提及。 到2017年，这一趋势将是巨大的 。 这可能是在主页上共享产品功能的最常用方法。
首先列出产品的功能 。 该产品可以是从SaaS程序到WordPress主题甚至是物理项目的任何东西。
然后，您可以设计自定义图标或找到代表这些功能的图标集 。 最好避免使用诸如“可靠”或“快速”之类的通用功能 ，因为大多数人都希望使用这些功能。
而是列出真正重要的功能。 如果这是一个高级WP主题，则可能会列出它的响应能力，附带的小部件数量或菜单的工作方式。
这些功能图标的作用类似于视觉效果 ，有助于销售每个功能 。 文字本身很难消费，但视觉效果一目了然 。
19.折叠式CTA
传统上， 号召性用语是遍布整个网站的 。 但随着游客花费更少的时间在网站上 ，它的关键是有倍以上强大的CTA 权利 。
这些号召性用语可能是按钮，选择加入表格或其他输入，以促使人们采取某些行动，例如注册或阅读博客文章。
我无法告诉您如何设计CTA或如何针对转化进行优化。 但我可以说，这种趋势似乎正在将这些CTA放在首位，并且清晰可见 ，所有访客都可以看到。
20.内容范围较小
监视器已经变得如此之大，以至于大多数网站不得不设置最大宽度 。 句子宽度为2000px时，阅读句子要困难得多，而宽度仅为700px。
较小的内容更容易消费 ，并最终在内容密集的网站上创造更好的体验 。
我认为更多的设计师正在意识到这一点，并将逐渐减小其内容区域的大小 。 我希望最大宽度为750像素，但您可以缩小到600像素或更小。
较短的段落 ， 较少的句子和较小的内容区域将始终提高可读性 。 《纽约时报》等主要出版物可能会偏离其自身的结构准则。 但是对于简单的博客或商业网站，趋势是朝着内容更长，段落和内容区域更小的方向发展。
结语
在这篇文章中，我还没有涉及其他许多趋势，但是我认为这20个最有趣。 在我们迈向2017年的过程中，显而易见，哪些趋势正在爆炸，哪些趋势没有爆炸。
如果您对即将到来的设计趋势有其他想法或建议，请随时在下面发表评论。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
