基于情景的消隐

这是iOS上的Chrome，有着基于情景的消隐动效。

为何有的产品、服务特别受欢迎？

是因为这些产品、服务在内容、外观、设计、可用性、功能等方面具有无可匹敌的优势。其实，所有的这些层面都属于交互设计的细节，其中一个关键点便是动效。

本文将介绍几种常见的动效模式（用GIF图演示），分析一下为何这些简单的设计模式在实际应用中能够奏效。
当我们设计数码产品时，我们一般用PS或者Sketch这种设计软件来进行设计。

了解设计的人明白这样一个道理：设计不光只是视觉表达。设计也不应该是静态的。乔布斯说过这样一句话：

设计并非外观怎样，感觉如何。核心在于，它是怎样工作的。

影响用户对产品的体验与印象的因素有很多，交互在其中扮演着关键性角色。我们不能再简单的把用户界面当成一种静态界面而设计。我们应该顺应互联网动态的本质，打造更加动态的图形用户界面。
好了，废话不多说，我们来看看，什么叫做更智能的交互、更精致的动效。看看这些设计模式是怎样提高用户体验的。

动效滚动

超链接是互联网的双刃剑，当你点击链接时，你可以在互联网中任意遨游，随心所欲。

可是过度自由好吗？不见得，比方说你在浏览一款精美的产品页面，然后你点击了一下页面中的链接，突然导入了一款令人毛骨悚然的木偶商店页面。这就是超链接的弊端，有时候的页面转换太突然，缺少过度，让用户一时不能接受。

我们可以看看书籍的用户体验：故事发展一般是线性的，每一章都和上文有所联系。想要阅读第二章，必须先阅读第一章，以便大致了解书中的环境与人物关系。如果你”跳章”阅读，不可避免的会错过一些关键剧情，因此无法理解有些内容。

在网页设计中，同理，尤其是那种内容比较大，页面比较长得网站，这种情况经常无意识的发生：用户会错过之前的某些关键内容，而且又缺少提示，因此很难理解当前内容，通过添加动效滚动，可以修正这一问题。

一般来说，网页设计师都极少关注表单设计，这使得大多数表单看起来都差不多，普通至极，毫无特色。本文中的这些案例化腐朽为神奇，将枯燥的表单页面设计的多姿多彩。一起来看一下吧。

还记得那篇备受好评的《向左走、向右走？表单元素设计大揭密》吗？让很多网页设计师第一次认识到表单设计的一些魔鬼细节。那么今天再来看看实际中的一些新颖案例吧。本文收集了一大批优秀的联系表单设计，希望对你有所启发。

Contact Page from Café Evoke

Bold Contact Page from Mixd

Signup Form from Involvio Orientation

Sliding Contact Page from Whoa Nelly Catering

Submission Form from Dear Mum

Clean Contact Page from Mud

Minimal Contact Form from Eduardo Nunes

Dark Minimal Contact Form from group94

Clean Contact Form from Littlelines

Contact Form from Mostly Serious

想要提高Logo设计技巧吗？来看看这些的Logo设计资源网吧，你会找到很多灵感和借鉴之处。
网络中资源无穷无尽，我们可以在其中找到很多Logo设计的法门。但是，有时候”乱花渐欲迷人眼”，太多了反而不好进行选择，

因此，我们为您挑选了一些的Logo设计资源网站，希望对你有所帮助。

01. Logoed

Logoed的资源库很丰富，一定会让你大开眼界Logoed

是一个展示Logo设计的博客。这个网站已经有十年的历史了，有着丰富的Logo设计文章资料库。布局简洁，缩略图垂直排布，能方便用户进行浏览。

02. Logospire

如果你在苦苦寻找灵感， Logospire是个不错的选择，网格式布局非常简洁，导航易用。Logospire允许设计师在每一款设计的子页面进行评论、交流。细节丰富。

03. Brand New

Brand New提供了很多品牌标志设计的理念。也提供了很多Logo设计的趋势、建议以及案例展示。

04. Creattica

Creattica是个很不错的图库。尽管不是专门Logo的图库，但是有超过3000款以上的Logo设计展示。

05. Logo of the day

每日Logo灵感猎取 Logo of the day 是平面设计师 Jacob Cass2008年创立的网站，目的很简单，为设计师提供每日Logo设计灵感。

06. LogoLounge

内含超过175000例的Logo设计LogoLounge是很不错的资源网站，无论是做Logo研究、讨论还是灵感获取，都可以在这里找到你想要的东西。

07. LogoGala

想要得到Logo设计的深度观察？来LogoGala吧 LogoGala。设计师最喜欢的Logo设计博客之一，深度解释、展示Logo设计

08. LogoMoose

在LogoMoose上分析你的理念和创意。LogoMoose在线Logo设计社区，展示世界各地的优秀Logo设计作品。设计师可以在这里展示自己的作品并获得反馈。

09. Logo Design Love

由平面设计师David Airey创立Logo Design Love 致力于Logo和品牌标志设计，一般每周更新一到两次。而且布局很棒，很方便就能找到所需信息。

10. Logo Pond

在Logo Pond上找到当下网络上最棒的Logo设计.Logo Pond 理念分析与灵感收集的场所。

移动至上是当今的大背景。交互设计、网页设计都不得不顾虑手机的”感受”，移动互联网方向的创业如同雨后春笋般出现，而有关移动端的Logo怎么设计？看看这里吧。

转载蓝蓝设计(   www.lanlanwork.com  )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供有效的   BS界面设计 、 cs界面设计 、  ipad界面设计   、  包装设计 、  图标定制 、  用户体验 、交互设计、   网站建设 、平面设计服务

来源：http://www.uisdc.com/100-things-you-should-know-about-design

如果您想订阅本博客内容，每天自动发到您的邮箱中，   

曾经，CSS 画廊非常流行，网页设计师们会定期访问这些网站获取灵感。现在仍然可以方便迅速找到令人兴奋的东西（例如 Dribbble 和 Behance 对设计有很大的帮助）。

对于移动应用程序设计，存在类似的画廊，我相信他们会更加有用。这是因为如果不安装移动应用程序，灵感更难获得，也更需要时间和努力。这12个画廊有很多漂亮的应用程序用户界面，并进行了很好的分类。赶紧收藏吧！

优设好文：
强烈推荐！你应该到这里寻找网页设计灵感

Creattica – Mobile Interface

Creattica 是一个灵感画廊，展示最好的网站设计，标志设计，平面设计，摄影，作品。

Lovely UI

收集各种移动界面元素，启动画面，按钮，导航，通知等等各种组件的设计。

Inspired UI

设计精美的应用程序的集合，iphone, android, flat ui, mobile ui。

TappGala

TappGala，展示最佳的移动界面设计作品，赶紧收藏吧。

MobileMozaic

MobileMozaic 是一个在线画廊，iOS 应用设计来自世界各地的最好的选择。

评论(0) 浏览(3562)

一如往常，设计师们会对自己希望或者是预期见到的东西做一个原型设想，这些iPhone6概念就是其中的一个原型。不过，关于这些独特的设计有些东西不得不说。

那么新iPhone理念中与众不同的东西是什么呢？大家能注意的最瞩目的就是它在外观上像极了iPhone5，但是屏幕一直环绕到手机边缘。我个人认为这种设计非常简洁，但是从实用性的角度来说，在使用上这个设计未必会很好。不过这一点也恰恰是一直以来我所谈到的用户体验主张。

大家可以从下面的图片中看到，一些设计者把那个空间用于小按键的社交媒体，其他的空间则延续了他们界面的漂亮背景。这种手机边侧延伸非常符合审美，虽然让如此狭小细长尴尬的空间派上更大的用场实在难之又难。

效果图片

因为配色中温暖的红色基调，整个上面的界面非常丰富。顶上的背景极为有趣，很好的应用了不同颜色配搭撞击出来的效果。看到它，你便会被深深吸引。总的来说这个界面并没有太过的地方，因为除了一个简单的三角形标志，一个标题和一个订阅按钮再没有其他东西了。

这张图片展示的是不同寻常的twitter界面，但是它和ios7的设计风格保持一致。大家可以看到twitter app的功能是一样的，但是崭新的涂漆让它看上去像苹果自己的新设计一样。这张图片很不错，我尤为喜欢那些小巧的解说箭头，它们增添了些许设计触感。你是不是也这样觉得呢？

读取进度条设计的好坏直接影响着App的用户体验，因为它可以合理的疏导用户等待的焦虑情绪，通过一种有趣的美学体现程序运行的进度，这样用户就能稍微安心。

调查表明，用户需要进度指示器，尤其是当处理不同的应用程序时。因此，完全的理解进度指示条的趋势对我们来说至关重要。

进度条是多媒体播放器的基本组件，能够允许用户控制媒体播放的进度与流程，快进，或者快退。进度条的图形表现力非常重要，目的就是为了提高用户的趣味性，与此同时构造更好的人机交互界面。

在本文中，我们收集了一些美妙的手机App进度条案例，具有不同的风格和特性。下面我们来一起欣赏吧：）

Smart washer app UI by Hyelim Choi 具有强烈的模糊效果，为的是提炼背景的质感，轻微的透明感，白色的纯洁性，稍微加入了一点粉色，给整个App以热情、女性化的感觉。

dB-METER by Miguel Pires. 高亮的中心，临摹的仪表，非常好的打破了用户的无聊等待时间。精妙的线条韵律以及完美的细节处理让整个UI看起来很精致。

Charging Animation by Corey Lui看起来既整洁又引人注意，具有可爱的写实风格。 绿色的震动的动效用来阐明程序的进度，吸引了用户的注意力，分散了等待的焦虑。

iOS7 design practice by Muhammad Farhan 纯净的感觉，采用了Flat风格的设计，使用了平化的图像，精巧的色调，纤细的字体。硕大的圆环轨道条占据了整个界面的中央，让数据看起来非常的卓越不凡。

软件在提高专业人士办公效率的同时，也降低了许多创作型工作的门槛。比如由 FiftyThree 推出的Paper，它甚至可以帮助没有美术功底的人，通过 Paper 来有效且直观的沟通设计想法。

同 Paper 类似，由苹果及 IDEO 前包装设计师 Distler 推出的这款Context (只有 Mac 版) 也想提高设计师的工作效率，同时降低设计的门槛，让普通如你我的人过一把设计海报、书皮的瘾。

简单来说，通过 Context，你可以实时查看你所设计的图案在酒瓶、徽章、巨幅海报、各种不同材质纸张和现实背景下最终呈现的样子，且可 3D 查看。这样做的好处就是，设计师再也不用等样品制作出来，才能判断自己的方案是否真的可行了，即提率节省时间，也能节约成本 (演示视频如下)。

Context 背后同时使用了 3D、2.5D 和 2D 技术，帮助用户实时多方位、更直观的感受自己的作品。而相较一切需要从头开始的 Photoshop，Context 提供了很多表面材质和物件供用户任意搭配选择，节约了大量搭建背景的时间。

网页设计中，切图输出是指设计师将手边绘制完成的原始图稿转换成网页用的图片格式、并交由下一位人员网页排版的重要步骤。选择适合的图片格式不但可以将让设计得到合理的显示效果、甚至还可以有效的控制图档的档案大小，节省下载时间、有效的减少服务器的负担。

以设计师最常用的 Photoshop 以及 Illustrator 为例，都提供了「储存为网页用…」的功能。与默认的存盘模式不同，在这个模式中，软件提供了仿真图文件输出的质量调整、档案大小控制等针对网页图文件需求的选项：

相信许多人都知道网页设计中最常用的格式不外乎 JPG、GIF、PNG 等格式，但并非所有的人都知道他们之前的实际差别跟到底何时该选择何种格式。经常发生的情况是，选择 GIF 后的输出结果看起来变得很糟，于是 PNG （24）似乎突然间风行了起来，不论图档尺寸是不是因此多了好几倍。

JPEG

由于旧型计算机系统以及文件系统的限制，计算机档案文件名与扩展名被规定为 8.3 的格式，因此 JPEG 的附档名被缩写为 .JPG。JPEG可以说是人们最熟悉的图档格式了，相信在数字相机普及的现在，几乎每台数字相机、照相手机都可以（甚至只能）输出 JPEG 格式的图档。JPEG是一种很典型的使用破坏性压缩（lossy compression）的图档格式，也就是说使用者每次进行 JPEG 的存档动作后，图档的内容都会遭到破坏，这个特性在肉眼辨识下并不明显，但却可以有效的降低图档的档案大小。