2017最佳网页设计 第1篇
网页设计和UI设计的趋势是变化非常快的，有的时候我们很难跟得上这不断变化的趋势和发展。 随着2016年接近尾声，我们挑选了我们认为您应该在2017年UI设计的10个最重要的趋势。
Immersive, full-screen video 沉浸式的全屏视频
Long form content and scrolling 长篇幅滚动翻页网页
Gradients and vivid colours 渐变和鲜艳的颜色
Illustrations 插画
Breaking the grid 突破网格
Parallax 视差
More cards! 卡片
Micro-interactions 微互动
Typography 字体排版
Experimental Navs 导航栏实验
01. Immersive, full-screen video 沉浸式的全屏视频
Campos Coffee的网站使用简单的排版结合动态全屏视频制作了一个简单但有力的内容
古语有云：“一幅画顶一千字”，这个说法在现在依然是有效的。在UI设计的世界，图像画面仍然是一个很好的方式来快速抓住用户的注意力。 视觉被认为是所有人类感觉中最强的，并且大的单幅图像能够以更有效、简洁、快速地方式总结语音的讯息和音调。
图像长期以来一直是UI和网页设计的主要内容，它的成功逐渐为视频铺平了道路。 我们看到视频在数字设计中被越来越多的使用到。 传统摄影是静态的，视频是动态的。 视频是吸引用户眼球和讲故事的绝佳手段。
传统的图像不会很快消失，但有一件事是肯定的 ----2017年及以后的网页和UI设计将会充满内容丰富、互动更强的全屏视频作为讲故事的主要手段
荷兰航空公司KLM的杂志iFly50依赖于更加风格化的方法，使用双重曝光视频来吸引用户，吸引人们继续浏览网页
视频和大的、美观的全屏图像是吸引用户和快速确立网页基调的有效方式。 这两种形式在其应用中是高度通用的，特别适合作为背景排版使用的。
02. Long form content and scrolling 长篇幅滚动翻页网页
National Geographic的网站是主页页面的内容是一个很好的例子，因为它几乎涵盖了这篇文章中提到的每一点
滚动的网页绝不是一种新的方式，也绝对不是一个基本功能的“趋势” 用于浏览Web和应用程序。然而，我们越来越多地看到的是更多在桌面设备和更大屏幕的设备上使用了长篇幅滚动网页来进行信息展现。
在过去几年中，由于用户觉得在较小屏幕设备上滑动翻页更便于查找内容，更多的设计人员开始在较大屏幕上使用长篇幅滚动网页的界面。
这允许用户可以以更流畅的动作来非常快速地浏览大量的信息，而不会因为要切换页面而被干扰。 它是一个能够广泛适用的方式，可以用在所有设备和内容媒体上，不管是长篇新闻和新闻故事，还是登陆页面和交互体验，它都可以适用
国家地理杂志将地图，视频，图像和动画结合在一起，创造了一种单一，流畅，身临其境且丰富多彩的浏览体验，
瀑布流网页是一个非常好的网页浏览方式，它以线性的方式引导用户浏览网页内容。 它是一个广泛适用的方式，非常适合创建沉浸式、无缝、长篇幅的内容。不管用户使用的是什么设备，它都可以让用户有一个流畅的体验。
03. Gradients and vivid colours 渐变和鲜艳的颜色
Spotify是大品牌尝试大胆使用颜色和渐变的一个很好的例子
2013年，扁平化迅速在各类设计中流行开来，扁平化让设计师们在设计中使用更多的冷色调和删除多余的元素。 尽管它本身有一些缺点，但平面设计是一门实用哲学，扁平化今天仍然具有价值。
扁平化要求简化UI中的核心功能性元素，从而获得更简洁高效的用户体验。
使用扁平化是为了获得更好的用户体验，但是扁平化的迅速流行造成很多设计师设计出的网页都极其相似的现象。 来自世界各地的品牌和设计师们都跟风涌入扁平化的浪潮中，导致很多设计都缺乏个性，非常相似。
2016年，扁平化的趋势又逐渐显现，更多的品牌和设计师开始强调更加个性的扁平化，尝试鲜亮的颜色和渐变，不再像以前一样一味的强调简单和冷色调。 渐变和鲜艳的颜色越来越多在传统的UI和网页设计中，最近备受争议Instagram，在品牌的重新设计中就用到了鲜艳的颜色和渐变。 无论这是否符合你的品味，我们都应期望看到更多的使用渐变和鲜亮的颜色将推动UI和网页更具个性！
Spotify不断变化的渐变创造了一种友好和有趣的美学
鲜亮的颜色和渐变能够将更多的能量、温暖和活力注入到一个产品中，使其脱颖而出。 大胆的去尝试使用不同的颜色，但一定要确保他们和你想要表达的内容和谐一致，不能冲突。 但是这样做之前一定要深思熟虑，避免给人们造成眼睛不适的感觉。
Dropbox是具有强烈插画风格品牌的很好的一个例子。 这种粗犷、手绘的风格让人觉得轻松愉悦，增加了人们对他们产品的信任感。
插画能够给人一种别具一格的感觉，这是普通图片很难实现的。 更能贴合品牌特质的定制插画能够使公司更加细致的创建一个真正贴合他们的个性和语调的视觉语言 - 有助于给用户和客户灌输可靠和信任的感觉。
插画也拥有很多表现形式。 一些品牌可能选择用平滑的线条插画，这种插画能够表现出一种锐利和高雅的感觉；而其他品牌可能选择更粗糙潦草的手绘风格，这种风格的插画给用户一种有趣和俏皮的感觉。 插画给创意提供更多的途径，当插画与摄影和排版结合时，更是如此。
PayPlan的清新、温和的说插画风格加上他们的审美帮助他们将品牌定位为友好和关怀，吸引用户的需求。
插画定制可以创造个性和可靠性，这两点对于创造和客户长期有效的连接是至关重要的。 插画在APP上是可以广泛适用的，并且与本文讨论的其他UI设计流行趋势可以完美结合的。
05. Breaking the grid 突破网格
Red Collar Digital的网页是突破网格限制的UI的一个很好的例子
网格长期以来一直是设计师的神器，给那些需要确保一致性、平衡、节奏和顺序的设计提供了基础。 它是用户体验设计中的一个重要工具，因为他们为用户提供了最熟悉的UI体验，使他们能够以一种自然的方式直观地浏览网站或APP。
然而，与网格同样需要重视的一点是：它也限制性的和刚性的制约了设计者的创造性选择。 为了创造突破传统的数字体验，许多网页和UI设计师正在通过“打破网格”来试验布局。
通过远离网格和刚性的基线结构，设计师正在创建更有趣和实验性的网站，APP和界面。 它开辟了一个全新的创新道路，允许设计师通过使用分层、深度、运动和明显的焦点实现真正的表达。
像Like Red Collar Digital，建筑师Sergey Makhno 用两层排版、图像甚至视频创造了一个更宽松和自由流动的的体验
打破网格提供了更多的创新选择。 它的灵活性可以产生流动性和自由度，这是在用网格设计时很难有的。 然而，在你这样做的时候一定要考虑周全。 所有的界面首先必须是用户友好的，这一点是毋庸置疑的，否则可能会使一些用户非常困惑！ 如果是响应式设计你还需要考虑如何在让它在较小的屏幕上能够发挥作用。
Epicurrence的网站选择非常明显的视差，创造一个快速移动和沉浸式的体验，反映其推广的事件
将视差与突破网格和滚动翻页结合起来时非常好的做法，这样在传统的排版中很少见。 简而言之，视差是一种背景移动速度比前景更慢的效果，当用户滚动时给出深度和动态感。 这不是一个新的方法，但正在被很多品牌尝试。
Bang＆Olufsen，高档音响产品制造商，选择更微妙、更精致的视差，体现他们的时尚和高端的品牌身份
视差必须谨慎使用，因为它可以很容易变得让客户难以忍受。 但是，当谨慎使用时，它提供了一种很棒的动态感受，以帮助向上滚动切换内容并吸引住用户。 将它与图像、文字和不太严谨的布局结合使用，可以创建流畅的分层内容。
上面的例子显示了如何实现卡以在较大屏幕UI上工作，从可滚动菜单卡到分层定价模型的选项。
卡片的模式不是一个新突破性的趋势，但对于UI设计，它们是一个功能性很强的设计方式。在移动UI设计方面的成功以及被融入到 Google’s Material Design 中 ，卡片一直在网页设计中获得突出地位。
据Google称，2015年，移动设备超越台式机成为浏览网页最流行的平台，因此越来越多的设计师正在模糊移动和桌面UI之间的界限，创造更加无缝的用户体验。
卡片形式是一种广泛适用的UI设计方法，可以在各种平台上适用，从较小屏幕的设备一直到较大的。他们是一个很棒的方式在屏幕上同时组织和显示大量的数据，允许用户快速筛选可用的信息并选择查看。 Facebook，Twitter，Netflix和Pinterest都是强大的数字平台，它们都选择了使用卡片的形式。
卡片提供了一个有效的解决方案，允许用户快速浏览可用的内容并迅速找到他们需要的信息
卡片是组织短片短信息的好方法，它们的灵活性在组织和消费内容的较小屏幕上是无价的。 卡片是一种可以显示文字、图像、视频和其间所有内容的解决方案，可以从最小的屏幕设备扩展到最大屏幕的设备。 卡片提供无尽的适用性，允许设计师翻转、旋转、堆叠和过滤他们的所有方式的UX功能 - 更多的功能将通过微交互来解释。
上图是如何实现微交互以显示菜单UI中的状态变化的一个很好的例子
通常小屏幕上的动画形式的微交互在UI和UX设计中起着至关重要的作用，尤其是在移动端和小屏幕设备上。
从用户体验的角度来看，微交互不仅是小的、有趣的屏幕上的动画或转换，同时也是对于用户及其动作的视觉反馈的形式。微交互让用户知道与UI交互时正在发生什么，已经发生了什么，以及将要发生什么。
2017最佳网页设计 第2篇
UI界面的设计趋势是不断变化的。随着时间的推移也在不断的成长，进化。虽然有些趋势还有待检验，但我们还是需要不断的去学习新的技术。
优秀的UI设计是包含了简洁和易用性这两点。这也是每个设计师的职责。但是相反的，如果用户在使用时完全摸不着头脑，对UI设计来说就非常失败了。
设计趋势变化的理由需要考虑各种各样的因素。例如2015年推动设计变化的原因是硬件的变化、移动终端的响应能力增强。
在已经发布的众多应用中，有人气的功能将迅速转变为必需品。此外当今社会90%的年轻人，都在通过移动终端进行着基本操作。
那么，让我们来一起看看2017年的设计流行趋势吧。
隐藏菜单
Touch ID的完全支配
模糊背景
代替传统设备的穿戴式终端
卡片化设计将会变得更常见
娱乐与个性化
纸质化设计
精挑细选的配色
隐藏菜单（英: Invisible Menu）并不是什么特别的新发现。长久以来他都被隐藏在幕后，现在设计师们终于将他们展现在了台前，让我们尽情期待吧。
不要被充满屏幕的画面所蒙骗。虽然移动设备的桌面不亚于台式机，但我们也可以为了节约用户的空间来将一些功能隐藏。
需要使用的功能有很多，我们可以利用滑动菜单栏，将必要的功能显示，不必要的功能隐藏起来。越来越多的导航菜单都在做减法，让显示的功能尽可能的变少，只有特定的需要使用的选项还保留在上面。
Touch ID 初登场时，仅仅被用于解锁。2015年时Apple 在Apple Pay 上展现了他革命性的使用方法，才让这种功能的重要作用的来龙去脉变得明显。
在那年年末，iOS8上的第三方应用（如Dropbox 或 Amazon 等等），纷纷表示接受Touch ID的指纹认证功能。
手动输入密码，事实上已经成为过去。在网络飞速发展的现在我们需要更加简单快捷的途径。虽然这一技术已经进化，我想在接下来的一年，这一技术也将会得到更加飞速的发展。
虽然在移动终端屏幕的尺寸会变小，但是设计师的关注点永远是不会变的。事实上设计师会将更好的图片导入其中，使内容更加显眼，读起来也会更加轻松。具有魅力的可访问内容，也会让你网站的转换率变得更好。
在2017年不能被忘记的移动终端中，可穿戴设备可是必不可少的。时尚与UI设计两位可是不错的搭档，他们的合作使得市场不断受益。
AppleWatch 有Android 等等其他的竞争对手，更会不断的发布更好的长评。未来可以说马上就要来临了。
卡片式设计，对于在移动终端上查看网页十分友好这点已被证实。实际上，越来越多的手机网页已经开始逐渐尝试使用这种方法。
将内容分割、调整内容放置在合适的地方、与相关联的信息放在一起表示等等这样的想法用卡片式设计是十分方便的。另外，在使用卡片型设计时，用户只能选择特定的动作，所以设计师可以专注于你觉得必要的内容上进行设计。
由于卡片式设计，用户可以上传属于自己的多媒体（例如Twitter 的动画或图片等等），可以为你的网站创造更多的流量。
正如之前所说，文化是界面设计变更的重要因素。接下来让我们来看一些具体的例子吧。
一个新的APP，将保守的要素用大胆的配色，有趣的面板和俏皮的附件所取代，将会表现出更具有娱乐性的效果。不管是这里还是那里，都利用了有趣的信息或独特的对话框。
这也意味着这个APP成了一位表演者，APP更加个性化，一如友人般的存在。
虽然个人软件通信已经是老物了，但现在也是打到了前所未有的完美状态。让我们来看看 Microsoft 的OFFICE助手工具 Clippy 吧。Clippy 比助手和朋友更加麻烦，但他现在已经成了在互联网上流行的一个有趣的故事了。
在如今科技高速发展的现代，我们需要一个能够恰当的安排我们的工作、时间或需求的软件。太过复杂的技术在我们的日程表上可是没有位置的。
纸质化设计是2014年在Google 上发表的较为新颖的视觉语言。一经发布便马上在互联网上流传开来，对于移动终端设计来说是革命性的发现。
在今天很多优秀的APP或网页设计都利用了简约的效果来表现出纸质化设计。（合理的层次感与适当的分割，以及精挑细选的动效等等。）同时纸质化设计，与常年被使用的卡片化设计也有着密不可分的关系。
「少即是多（英: Less is more）」这个概念，已经独占鳌头。所以设计师无论何时都必须保持简洁，尤其是在于颜色打交道的时候。让我们来看看这款时尚的APP设计吧。你瞧，无论是哪一种颜色，都采用了极简的设计方法。
与华丽强烈的颜色不同，适当的柔和配色也许并没有引起足够的重视。但这并不是说有必要变更你的品牌颜色。保持优雅专业的氛围，让我们再来使用你所选择的颜色。
2017最佳网页设计 第3篇
自适应网页设计兴起之后，“汉堡包菜单”大行其道。它确实是针对移动设备浏览的可行方案，但仍然有缺陷：
不够直观，可发现性低；
妨碍用户参与；
效率较低（对用户、设计师、开发来说都是）...
我们期待接下来的一年中出现更多实验性导航设计灵感。
以下几种菜单设计趋势作为抛砖引玉：
2017最佳网页设计 第4篇
在Retina屏上完美显示的图片场景，在手机上可能看起来完全不是那么回事。面对诸多的显示屏幕，以及各种各样的长宽比，设计师如何处理这个“自适应的宇宙”？大多数情况下，他们选择裁剪。
怎样才能在裁剪中保留设计的本意，不过分丢失信息呢？你需要：数字美术指导。
设计的本质是提供解决问题的方法，而美术指导关注引发对的情感，让用户能够与他们所看到、所经历的事物产生关联和共鸣。在网页设计的过程中引入美术指导的思想，就不会拘泥于将所要传达的内容看作一张静止的图片，而是将它作为一个能传达故事的主题。
基于这样的考虑，一些网站已经选择无视长宽比。例如，Google Arts & Culture支持的网站：The Hidden World of the National Parks（国家公园里的隐秘世界），这个网站用全屏vedio作为背景，同时也作为网站的主要内容呈现，它能不断延伸覆盖任何尺寸的浏览器。
2017最佳网页设计 第5篇
运动能吸引注意，这是人类进化的结果。但突发性的大动作只会让带来惊吓和警惕。相反，轻微流畅的运动能给人生机勃勃之感。
在为网页设计动效时，要记住这二者的差别。
比如我们常见的“waypoints”（滚动监听触发插件），当页面滚动到某个元素时，触发某种动画，从而精准地让用户注意到我们想让他们重点关注的地方。
这些轻巧的互动不仅仅为用户体验加分，而且能赋予一个网站独特的个性魅力。
:bulb:
接下来这一年
能为我们留下深刻印象的网站的...
会是哪一家公司呢？
Designup拭目以待
| 到Designup 用可靠设计师
2017最佳网页设计 第6篇
之前，Material Deaign的出现，在扁平化设计的基础上加入阴影和斜度，为平面图标增加了三维立体的视感。
网页设计的2017年，是进一步重回现实的一年。但这里所说的并非拟真设计（skeuomorphism），而是让有形的、可触碰的真实世界与电子世界无缝对接，创造没有界限的体验——
现实中的物体将保留它们的真实细节，完整进入到数字环境中，但又不再受限于现实规则——小物件可以在屏幕上变得巨大，并与数字元素发生互动。
在Beoplay的网页上，耳机被突出放大，远超出真实尺寸，同时与象征声音的动态线条结合产生互动。
现实与屏幕的界限被模糊之后，用户与屏幕上的图像更容易产生情感联结。
2017最佳网页设计 第7篇
过去两年中，灰色大规模劫持了我们的网站。从前的白色网页背景变成了淡灰色；黑色文本变成了暗灰色；在Material Design中，用浅灰表示纵深的阴影。
2017，是时候让更多的颜色回来了。可以预见的是，复古色调将受到追捧。
无论你最终决定用蓝色还是橙色，可以再试着给它加上一个“滤镜”，为用户制造一种温暖、怀旧的感觉，提升网站的整体氛围与质感。