2017网页导航设计 第1篇
从矩形到三角形，从方形到圆形，几何图形已经越来越多地出现在网页设计当中。好的设计不会让这些几何图形在整体中过于突兀，而是尽量融入，为用户提供视觉引导，强化交互体验，提供行动召唤，或者让整个视觉更加有趣。
网页中几何元素的设计要如何设计好呢?技巧在于，尽量采用简单的设计。例如，你喜欢环状的元素，那么你可以将它作为一个固定的元素，在整个设计中使用，它可以承载图标，也可以用作团队成员头像外框。
几何元素的另外一种用法，是将多种图形做成拼贴式的背景装饰元素。几何元素尺寸较小的时候，可以使用明亮的色彩，让整个设计显得更加缤纷有趣。如果几何图形尺寸较大，就不能这么用了，而是要通过着色让他能和其他元素构成对比，又不能太过于突兀，比如Hive Boxx 这个页面的设计。
2017网页导航设计 第2篇
如果你一直在关注新的设计趋势，你会发现设计师一直在尝试寻求不同的导航模式。当然，截至目前，绝大多数的页面依然还是将导航挂着页面的顶部。
随着不同的尺寸比例屏幕、不同的设备的出现，新的导航模式拥有了存在的可能性。首先流行开来的是屏幕侧边导航设计和隐藏式的导航设计。
这种看似微小的变化，让网站的浏览方式和体验出现了翻天覆地的变化：它们让页面变得更加时尚，可以兼容不同的屏幕需求，甚至让整个网页布局都能进行全新的设计了。
隐藏式菜单设计并不是让导航完全隐藏，而是让整个屏幕都成了呼出菜单的控件，这样的设计已经被很多用户所理解并熟知，它在移动端上的应用已经相当的广泛。
2017网页导航设计 第3篇
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网页导航设计 第4篇
在过去的一年当中，大量的网站采用了白色和浅色的背景，采用深色背景设计的网站相对较少。
可是看多了也腻味。有一部分网站已经开始倒转整个配色，开始在自家的网站上探索深色系配色的美学。在配色上采用深色为主的设计，最需要注意的就是其中色彩的对比度和内容的可读性，只要把握好其中的关节，能够很好的吸引访客的注意力。
随着深色系配色而来的，还有越来越多的单色配色方案，更极端一些的，干脆就只在纯色的深色背景上搭配照片。这样的配色手法乍一看很单调，但是深色背景下，流行色会显得更加突出，也更容易鼓励访客与网站进行互动。
2017网页导航设计 第5篇
除开我们所熟知的Helvetica，占据我们屏幕首页的各种非衬线体字体还有很多。在过去几年中，高清大图的流行和跨平台设计大行其道，这两种客观需求之下让设计师惯于将加粗、易读的非衬线体和大图结合起来使用。
但是随着高清屏幕的流行与普及，非衬线字体一家独大的局面将会发生改变。
细节丰富，充满装饰性的非衬线体字体在现如今的屏幕上，已经不存在识别度的问题了，可读性强了很多。在如今高像素密度的屏幕上，拥有不同美学特征的非衬线体字体的全部特色，都能完整地呈现出来。
2017网页导航设计 第6篇
对，虚拟现实是目前最火热的趋势，并且它已经入侵到了网页设计领域了。
许多设计师已经开始在他们自己的网页中尝试设计类似虚拟现实的效果。从游戏到360度视频，设计师试图让用户无需VR眼镜而拥有环绕的真实视野。虽然技术上和VR几乎完全不沾边，但是它同样是追求真实的体验。
目前，这种设计还没有完善的规则，许多类VR的网页设计还是需要设计师动脑子想办法来实现，非常考验设计技巧。
2017网页导航设计 第7篇
有一些设计师已经开始这样做设计了，不过随后你会在网页设计中看到更多的超大字体的设计。字体尺寸拉大之后，搭配多样的样式、飞溅的色彩，这些尺寸超大的文字如今已经变得越来越重要了。
超大字体流行背后的逻辑是页面需要通过它们抓住用户的注意力，每个设计师都需要让特定的部分在整个设计中脱颖而出。拥挤的浏览器页面中，要怎样才能抓住用户的注意力呢?肯定是强视觉化的内容，这样一来，超大字体的流行就解释得通了。
2017网页导航设计 第8篇
网页设计和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交互时正在发生什么，已经发生了什么，以及将要发生什么。