年底最后一个月是总结头一年，思考和展望下一年的月份。经过2017年一整年的沉淀和总结，在最近的这些设计作品，重设计甚至小幅度的设计改版中，窥见一些即将在2018年流行开来的设计趋势。在网页设计上，这些设计趋势将会深刻地影响着设计师们接下来的设计方向。 1、不对称网格 完美对称的时代已经过去了。虽然分屏设计在2017年流行得一塌糊涂，但是这一趋势在逐步的沉淀和演进之下，开始有了新的变化。 均匀的对称式布局并没有非对称式的分屏设计有表现力，这促使不对称网格开始逐渐流行开来。 为了使得不对称的设计更为有效，设计师需要一些…
设计趋势这种东西，往根上说是潮流，是因缘际会之下成为一个时间段内的流行风潮，大多独特，但是它并不一定符合你的喜好。 在过去的一个月当中，所流行起来的三个设计趋势，相互关联，且都涉及到文本和标题在页面设计中的运用。到底哪个更符合你的口味，而哪些又能够更常久地流行？这恐怕就需要你自己来判断了。 1、带有下划线的文本和元素 很意外地发现大家最近争先恐后地使用下划线这种元素。当然，能够在各式各样设计元素中灵活运用的下划线，自然不是设计工具默认的下划线效果或者文本链接下的那种文本下划线。 下划线原本运用在文本当中，用来强调内…
我们常常探索规则，规则让设计充满可预期性。我们也常常想打破规则，这可能是出于设计者叛逆的天性，也符合让特定风格或者元素脱颖而出的设计需求。刚刚过去的9月当中，设计师们打破规则的特质，通过网页设计作品体现得淋漓尽致。这些以破坏规则为特质的设计作品，实际上也遵循着某种潜在的规律：尽量只打破一个规则，来创造出意外和戏剧化的效果。 1、无视边界的文本元素 在很长的一段时间当中，设计师会让每一个元素都井井有条地置于各自的区间当中。但是现在，设计师开始让元素走出边界。 横跨多区块的元素看起来似乎有点过于自由，但是在实际的设计作…
搜索框是我们最常用到的UI控件之一，它几乎存在于所有的网站和APP当中。许多人认为搜索框不需要设计，因为它似乎就是由两个最简单的元素构成的。在以内容为导向的网站中，搜索框的重要性会相对更明显，用户需要快速又无痛地找到他们想要的内容。而对于设计相对负责的网站而言，这个需求尤其明显。搜索框的可用性设计，是整个设计的关键。 今天的文章我们来聊聊搜索框的设计，如何让用户尽量节省时间，搜到他们想要的内容。 1、使用放大镜图标 时至今日，搜索的概念和放大镜图标之间的关系已经深入人心，根深蒂固了。在日常最常用、最易于识别的几个图…
现如今，栅格已经几乎是所有网页设计的基础。这些隐形的线条创造出空间的节奏感和视觉的流畅感，他们是让网页变得更加和谐的基础。 但是，栅格存在的目的是帮你创造好的设计，当你开始逐渐适应栅格的存在，千万不要被它束缚住。你并没有必要100%地受限于栅格，偶尔打破栅格的设计可能会让你的设计更加抓人眼球。不过，想要打破栅格又保持网页的协调，是有技巧的，并非任何“破格”的设计都是好的。今天，我们来聊聊这个。 了解栅格系统 想要打破栅格，那么你首先得深入理解栅格系统。无论你使用的是哪种样式的栅格，它都是你的网页设计过程中的“基础设…
编者按：这篇文章的作者是是 EventCreate 的联合创始人和网页设计师 MARK BUSHY，他对于活动类网站有着多年的设计经验和独到的想法~ 我特别喜欢设计活动类网站。这类网站通常有着明显的时效性，存在的时间一般不会太长，而网站在界面上不会使用复杂的UI设计。但是与此同时，这类网站非常适合探索新的导航模式、不一样的布局以及有趣的动效和全新的技术。它们并不复杂，但是有着全然不同的可能性；看起来简单，然而常常拿来做新技术和新思路的载体。 接下来所推荐的10个活动网站都是此中翘楚，它们创意爆棚，设计精美，还适时的…
Sublime Text很多人或多或少都用过，可能很多人会发现。在Sublime Text无法直接打开浏览器，没有像DW那样的快捷键。有的只是右键打开默认的浏览器。而有时候又需要打开不同的浏览器。 这时候主角登场了——SideBarEnhancements。 SideBarEnhancements是一个可以自定义打开方式快捷键的工具包。他可以定义不同的快捷键打开不同的浏览器。接下来，我们先安装它。 在Sublime Text按下ctrl+shift+P打开命令面板，输入pcip，第一个就是安装控制包的选项了。 搜索…
今天分享一个元素周期运动表，这个并不是化学元素，你可以理解为「元素运动规律」，因为这个元素表是由一些常用动效组成，并且每个动效的实现都有一个理论依据，而不是凭空想象出来。动效有弯曲、偏移、流动线、噪波、回旋路径、极坐标、音频波浪、对称旋转、连接、遮罩消除等效果。对到交互设计师，想了解动态设计原理，建议收藏此表。 网站名称：Periodic Table Motion 网站地址：http://foxcodex.html.xdomain.jp/ 进入网站后，我们点击每个动画都有尽介绍！ 下面来看看这些元素动效 GIF 截…
插件描述：pagepiling.js是一个可以创建类似窗帘滚动网站的jQuery插件。它是灵活的，旧的浏览器和触摸设备兼容。您可以在原来的滚动的网站的基础上使用这个插件创建一个。 下载链接：https://github.com/alvarotrigo/pagePiling.js Demo演示：http://alvarotrigo.com/pagePiling/ 使用 正如您所看到的示例文件,您将需要包括jquery.pagepiling的JavaScript文件。js(或jquery.pagepili…
让我们先谈谈什么是动画,然后再讲如何能成功地用于网页设计。 首先,你应该知道,动画是图像按照序列高速切换的运动错觉效果, 这种效果是一种光学运动的产生的视觉暂留现象。最常见的就是电影和视频。 如今,动画是网页设计的重要组成部分, 有助于改善用户和网站的交互体验。 设计师虽然可以尽可能多的使用动画效果 ,但他们必须牢记,一个站点没有任何动效可能会显得无聊,但是过多的使用也会变的杂乱无章。如果网页设计师希望能够熟练地使用动效,我们应该把握好度。 下面是40个非常绚丽动画的网站，各种不同形式的交互动画，让我们知道哪一个是…
失败的网页设计各不相同，但是优秀的网页设计则有着共通的特点。你需要思考人们想要的是什么，什么东西能够触动他们，让他们欲罢不能，无法忘怀。 听起来似乎很简单，不是吗？取悦用户的关键在于像用户一样思考。并不是每一次创新、每一次重塑、每一种新技术都能让用户愉悦，那些真正易于理解、便于使用、降低难度的技术、设计手法和抓人的视觉元素，才是一切的关键。下面总结的7项秘诀，会让你的网页脱颖而出的。 1、定制化 定制化，或者说个性化，是今天网页设计中最典型的趋势之一。用户希望浏览网页的时候获得更加私人的浏览体验，无论是玩页游还是购…
网格卡片式网页布局,从Pintrest,Facebook和Twitter开始流行,在网页设计中迅速成长,几乎变成了所有网站设计的首选。整洁的组织信息,简练的小盒子,给网站一个干净、简约的外观。 然而,网格卡片式网页布局不仅仅是美观,而且非常实用,因为这种类型的界面可以适应各种设备工作。 Atlason Baubauhaus Pierrick Calvez Protest Yvan Rodic Rodgers Townsend Thomas Robin Fakultät Gestaltung Heydays Post…
来自 Medium 的设计师在这篇文章中预测了2016年最值得关注的设计趋势，而老牌设计博客Designmodo 对此也有自己的看法。新的技术和新的设计趋势会在2016年逐一涌现，但是总体上来说，它依然会沿着2015的大趋势来逐步演变。可以预见到的是，2016年会有更多的网站使用视频背景，更多基于Material Design 风格的界面设计，幻灯片式的界面切换也会继续火热下去。 Designmodo 对2016年预测的设计趋势有11种，其中许多确实和Medium “所见略同”。两相印证，应该能让你看的更明白。 垂…
一个精心设计的网页头部很容易吸引受众的注意力,这应该是网页设计主要目标。 一旦你引起别人的注意,同时也抓住他们的兴趣和好奇心,他们就有可能在你网站上停留更多的时间，甚至再次回来浏览。 当然，如果没有一个合适的标题,也难以做到这一点。所以设计一个有趣的header，是我们的首要任务之一。 The Everywhereist Trent Walton Premium Pixels I am a food blog Keiko Lynn Five o’clock cocktails Floret Flowers Home…
点击标题查看下载链接 Minimal Loop Preloaders Recycle Preloader Morph Shape Preloader Bold Preloader Modern Flat Preloader Little Gears Preloader Infinite Preloader Download Cloud Preloader Loader flash of light &nb…
CSS3动画属性并不是很多，但重点其实是你怎样去运用它，从简单的hover状态或复杂的小动画，都可以巧妙的用CSS3动画属性来实现。 今天主要是和大家分享一个比较有创意、实用的CSS天气图标动画，静态的天气图标看上去是很呆板，若加上动画，看起来会更加真实生动，以下例子就是很好的参考案例。 下面我们来做一个会下雨的天气图标实例，过程其实很简单哦。 STEP1: 整体HTML架构 <div class="icon rainy"> <div class="cloud"></div> &…
