交互设计从来都不容易。它包括了用户行为的深度分析，和一丝不苟的规划。随着新技术和交互设计模式的出现，事情并不会变容易。 艳丽的图片、顺畅的鼠标悬停效果和意外的动画，不再那么容易引起用户注意了。但难题却没有解决——如何创造令人愉快的用户体验，让用户面带笑容完成转化？如果你对常见的设计陷阱有所警觉，就能更少犯错。 为了方便——可能也为了让你知道你不是独自一人——以下总结了最常见的交互设计误区。 1. 铺天盖地的创新 网页设计师都非常有创造力。我们希望通过作品来表达自我。我们总是在寻求创新的设计方法来脱颖而出。但是，当涉…
视差效果已经在经典的视频游戏中出现有很多年，但它现在成为了网页设计的主流趋势。这个很酷的效果是现在常见的网页滚动一部分。它使用多个背景，以看起来不同速度移动来创造深度的感觉（创建一个3d效应）和一个有趣的浏览体验。 术语来自“parallaxis”，意思是“改变”。近距离的物体比远处的物体时，在不同位置观察到的视差较大，所以视差滚动可用于确定距离。 我们收集了30例视差滚动效果的网站，呈献给大家惊人效果 Melanie F. 点击访问网站 The Boat 点击访问网站 Giampiero Bodino 点击访问网…
Sans-Serif Typefaces Adam.CG Pro Download Font Aileron Download Font Archive Download Font Arkhip Download Font Bakersfield Download Font Bebas-Tam Download Font Big John / Slim Joe. . Download Font …
虽然早期的GIF动画不论是从技术层面还是从应用范畴来看，都和界面设计并无特别直接的关系，但是近几年，动画图标开始在界面设计中大量运用，并有流行开来的趋势。 坦率的讲，让图标动起来，或者通过动态图表达一些有趣的场景并非什么新鲜的东西，但是它们在很长的一段时间里都玩儿的比较简单，居于次席，或者纯是 拿来搞笑。但是现在不一样了，通过精巧的后期处理，这些动态的图标成为了界面上令人流连忘返的重要组成部分，成为了提升用户体验不可或缺的元素。如此一 来，Gif图所构建的动画图标开始“大规模入侵”网页设计和UI设计领域就不是什么难…
现如今，扁平化设计比起最开始的风格已经没有那么“平”了，更丰富的细节，更清晰的层次，更优秀的视觉体验使得它和初期有了相当大的差别。于是Ryan Allen 在为 Dapper Gentlemen 撰文的时候将现在的扁平化设计称为“Flat Design 2.0”，这篇文章中，他阐述了最初的扁平风和今天的扁平化设计的差别，甚至还简单分析了一下这种演进的原因。 扁平化设计依然占据主流，从某种程度上而言，是因为它同响应式设计有着极高的契合度，这也是在过去几年间的逐步变化而造就的结果。 正如同 Ryan Allen在插画中…
随着扁平化和现代设计风格的逐步流行和沉淀，线性图标也迎来了它的黄金时期。现在你会在越来越多的地方发现它的身影，从传统的控制面板、导航栏和社交媒体插件，到功能性的列表界面，它无处不在。 同时，线性图标的形态也是多样的。从简约而微妙的小巧图标，到复杂大胆的响应式的版本，线性图标为设计师提供了从直观简单到繁复华丽的全方位的解决方案，可以说它们是丰富多态设计美学的重要呈现形式。线性图标还是界面信息传达和用户体验优化的重要组成部分，其细腻而自然的设计、强大的个性化空间，开始成为网站从普通走上卓越的必备品。 今天搜集的案例中，…
编者按：银河系漫游指南中说过，时间只是个幻觉。但是一百年的时间里，这个世界变化了太多，幻觉一词似乎太过于轻浮。那么一百年时间里，美国顶尖杂志的封面设计会有着怎样的改变呢？时间又是如何在这里留下痕迹的呢？看看这些好不容易搜集起来的封面设计，除了设计，或许你还能收获几许思考。 Cosmopolitan 最初的Cosmopolitan封面设计上常见的是着装保守的妇女，这也和百年前的整体风气息息相关。随后，露出的皮肤越来越多，当暴露已经不足以承载纸后的性感，封面女郎们的摆出的姿势也越来越性感了。 （在新标签页中打开看大图）…
生活中许多东西都是瞬息万变的，不变的东西并不多，躲不过的死亡，和雷打不动晚七点新闻联播。在如此复杂多变的时代，要如何做好用户体验设计呢？作为一个用户体验设计师，多年一来我实践了无数想法，试图寻找关于用户体验设计的终极答案。 想来复杂，但说起来也简单。在这些年的探索过程中，我最大的感受是，用户体验设计师的工作本质上是深入用户的大脑去寻找答案。我们需要了解大量的用户大脑中对于设计的真实看法，剖析肢解这些信息，整理出潜在的问题，和他们所面临的困惑。 在设计过程中、之前和之后都要持续不断地做用户体验设计，这是一个永无止境的…
Slides – 是一个简单的，容易定制和风格化，的jQuery幻灯片插件。 Slides提供褪色或幻灯片过渡效果，图像淡入淡出，图像预压，自动生成分页，循环，自动播放的自定义等很多选项。 用Slides插件，你可以随机播放幻灯片，设定那一套您想要开始幻灯片。它附带充分的说明和示例。 DEMO地址：http://slidesjs.com/ 官网地址：http://slidesjs.com/ 下载地址：http://slidesjs.com/downloads/slides.zip 基本的HTML结构 …
当涉及到图像编辑或照片增强，Adobe PS软件通常是首选。然而，软件本身学习和掌起来比较麻烦。当然，并不是所有的设计爱好者都是设计师。 接下来，我们呢给大家分享一下免费的名片psd，方便大家设计下载。 你可以找到大量的免费设计网上的东西。寻找免费的PSD设计模板也不是很难，但是很难找到设计元素，体现了创新和设计趋势的融合。 你可以在网上找到大量的免费的设计作品。寻找免费的设计psd模板不难，难得是找到能给你设计灵感的元素。 免费名片设计psd Business Card …
今天带给大家一篇自己翻译的文章，3个简单的hover动效效果，初次翻译有不对的地方大家多多见谅。 现代网络中，很多技术形式可以实现有趣的动效，但最简单优雅的通常是CSS，特别是新增加的CSS3。 过去，我们不得不依靠JavaScript实现动效，但由于跨浏览器支持CSS3不断地升级，现在我们可以不通过任何脚本实现。但是很悲催，仍然有浏览器（IE9以下）不支持CSS3，所有你需要一个旧版的浏览器或设置渐进性效果来解决兼容性问题。 今天我们来看一个炫酷的悬停效果--图片和文字标题的隐藏、显示切换动效。 如果你需要示例代…
做网站是系统工程。首页的内容要层次分明，导航要结构清晰，子页面要排版均衡，相对而言自由度稍高一点的，应该是404页面了。虽然404本身就是一个告知用户内容访问出错的错误代码，但是富有创意的设计师会充分利用机会，展现网站的独特气质；重视用户体验的设计师，则会充分考虑此刻用户的心情，竭尽全力引导用户去对的页面。 所以，404页面可以做的很简单，但也可以创意十足。今天的酷站推荐，就推荐50个创意爆棚的404页面，每个页面配以相应的技巧说明，希望能给你帮助。 01. 有趣的设计 这是一个有趣的404页面，用陨石坑来表现40…
CodePen 是一个在线的前端代码编辑和展示网站，能够编写代码并即时预览效果。你在上面可以在线分享自己的 Web 作品，也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果。 今天这篇文章为大家挑选了15个超炫的 CSS 动画效果的例子，这些 Demo 可以说都是艺术品。（为保证最佳的效果，请在 Chrome、Firefox 和 Safari 等现代浏览器中浏览） 1. JavaScript Mickey Watch Apple watch like Mickey watch …
我们将向大家展示下网页动画的现状地图，并收集了一些具有多变表现力的类库、框架和插件。 图1：网络动画地图 下图分为三个区域，第一部分是一些容易理解的动画类库，撇开已经达到期望的通用动画方法外，还从简单的方法和函数到时间控制都提供了大家所希望的工具。我 们从JavaScript类库中分离了用CSS3过渡的动画元素，也挑选出了能够和SVG，WebGL或者HTML5 Canvas相连接的动画类库。 图2：工具列表 第二部分是专为文档模型中像滚动动画，视差，CSS sprite，3…
网站的快速发展，网页设计方面的作用功不可没，如果你是一名网站的设计师，不要浪费时间在那些无用的网站上。这里有众多灵感创意类网站启发你的创意 和新想法。引人注目的网站设计在一个在线销售与营销网站中扮演着重要的角色。今天的一周灵感酷站推荐，我们收集了一些色彩丰富的漂亮网站，你能够从中学到 很多。 01. Door Tokyo 02. Diagnosite 03. Air France 04. Tannbach Modul 05. Jsconfar 06. BMW 07. Paranormal Dragitivity 0…
是时候为网页设计师的来一组便捷的辅助工具了。日新月异的网页技术革新催生了大量的设计与开发工具，HTML5/CSS3几乎成了设网页设计师的必修课，而强大的JS也为网页提供了更多的可能性。尤其是HTML5，作为一门极为有用且实用的标记语言，它赋予网页设计师创造更优秀网页的可能。 这也是为什么，身为网页设计师的你需要不停地了解最新的技术趋势和新兴工具，这些全新的库、框架、插件和技术能让你的网页如虎添翼。 HTML5使得设计师和开发者在各个不同领域都比之前更强大了。快速，漂亮，安全，响应式，这些特性使使得设计师和开发者可以…
随着近些年CSS与CSS3的发展，有些东西我们可以纯用CSS去实现，取代那些需要使用背景图片的老技术。在这篇教程中，我们将创建扁平化的面包屑导航链接，不再需要使用之前流行的“推拉门式的背景图片”。 我们将面包屑链接设计成类似雪佛龙的样式，表达向下获取内容的意思。过去我们用背景图片实现这一效果，现在我们将在边框border属性的帮助下，纯用CSS实现相同的效果。 第一步 1 2 3 4 5 <div id="crumbs"> <ul> <li><a href="…
承接上文《玩转HTML5移动页面（动效篇）》，上次说的是让页面动起来的一些小技巧。 而页面动起来的根基是功能可用的页面，因此有必要分享一些优化细节的技巧和方向，熟悉掌握一些方法论还是会对页面开发大大提高效率的，并且也能防止疏忽缺漏。 ====前方高能==== （1） 动画雪碧图 涉及的动画十分多，用的元素也十分多，请务必使用雪碧图（Sprite）！ 网上的工具有一些可以帮助你生成雪碧图的工具，例如CssGaga，GoPng等等，自动化构建工具Grunt和Gulp也提供了相应插件。 特别地，如果单张雪碧图面积实在太大…
