首页

11月份免费新鲜的27款UI组件下载

蓝蓝

设计师们还没更新模板吗?这是优设10月份搜寻的UI模板,总共有27款,大多数为扁平化设计,都是免费且的,希望这些收集能给你正在进行的项目一点帮助 : )

同样精心收集,希望对你有帮助 : )
52款新鲜免费的优质界面PSD下载
50个超赞的免费设计师工具资源下载

Apple Product Line Wire Frame PSD by Rubayath

Apple Product Line Wire Frame PSD by Rubayath in 27 Fresh UI Kits for October 2013

 

Chrome UI Kit v.2 by Todd Hamilton

Chrome UI Kit v.2 by Todd Hamilton in 27 Fresh UI Kits for October 2013

超实用!Photoshop亮度调节脚本

蓝蓝

我们在设计的时候,往往会微调一下颜色的明暗度,又或者去一些在线配色工具网站上准确调节明亮度,但这样是比较麻烦的,这里设计达人网找到一个非常好用的Photoshop亮度调节脚本,使用的时候只需要按下Photoshop快捷键就能调整颜色的明与暗,节省了很多设计时间。

darken-and-lighten-color-ps-script

 

如何使用亮度调节脚本

首先在Photoshop工具栏的前景色面板上选择需要的颜色,然后运行对应脚本来实现颜色的明暗变化。

color-shot

8个获取手机应用程序设计灵感的网站

蓝蓝

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

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

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

Creattica – Mobile Interface

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

Creattica - Mobile Interface

Lovely UI

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

lovely_ui

你的App该变身了!iOS7设计指南

蓝蓝

@ 十萬個為什麼 :苹果的新iOS我们已经上手好几周了,准备好为它而设计吗?

如果你已经有一个运行于此平台的App,你可能打算为新iOS而设计,或者在旧版上做一些必要调整,不论哪种,你都希望为新界面而设计,确保你的App与用户在苹果设备上的体验相吻合。
那么如何做到这点?

扁平,更加扁平

ios7

苹果的iOS7秉承着扁平的设计理念,尽管它不是完全的扁平化,那么就秉着”较扁平”来规划设计你APP或移动站点。

所有的那些曾经辉煌的拟物化风格图标与效果,一去不复返了。如今的潮流是单色块、多色文字和大量留白,

苹果为iOS7制订的设计准则鼓励简洁设计与易用性。但是设计准则并没有着重介绍我们即将讨论的关于扁平化设计的规范。我们能在这些新设计的APP(包括苹果自身样式)中看出一些与扁平设计特征相违背的东西,

比如说颜色,iOS7包含了相当一部分柔和色调和半透明效果。扁平设计通常使用明亮、高对比度的颜色。
你所见到的按键和按钮也没有设计成扁平样式。例如键盘,每个字母都包含在一个带阴影效果的按钮中。这些微妙的效果是新界面的显著特征。

重视字体

一组惊艳的后台管理界面设计欣赏

蓝蓝

蓝蓝设计其实在最早做设计的时候,就是设计银行的客户关系管理系统以及电商网站的后台管理界面

做那种界面的时候,和设计网页的感觉不一样。因为得考虑的不只是美观,更多应该在操作体验及视觉舒适度上下足功夫。

这种界面会成为管理员长时间驻留的地方,会有很多数据表格。如果我们的配色太鲜艳或者太暗沉,都会让使用者遭受眼球上的磨难。

而且一些按钮和操作焦点没有做好区分和规范,那都会是致命的。

关于界面中的交互,这里蓝蓝设计送上前辈们留下的一句金句,非常经典,也很好记:

1、操作前可以预知;
2、操作中有反馈;
3、操作后可撤销;

不管怎么样,这三句话,你可以牢牢记住。这是只可意会不可言传的。等到你钻研达到一定程度了,自然就会明白咯。

而视觉方面的注意事项,其实大家都知道,依然是不要超过三个颜色。这点大家虽然都知道,可是在实际设计的过程中,会不知不觉的用多一些颜色出来,而且还潜意识说服自己:“这个加上也不错,干脆就用上吧。”整套设计稿出来,全局观察的时候,结果就有些混乱,干扰到数据的主视觉区域了。

好吧!今天就为大家带来speckyboy上收集整理的一些dribbble上的精华作品。我相信,这些作品惊艳到你甚至临摹不过来,不信可以试试哟:)

Device Dashboard

mobile ipad device admin dashboard photo

让网站更生动!那些在网页中完美运用视频元素的案例

蓝蓝

视频有着不算短的历史:最早是电影,然后是电视,现在出现在我们随身携带的手机、平板上。网页中也很早便出现了视频。最开始的时候是Flash格式的视频和动效。而现在除了Flash之外,我们还有HTML5和其它选择。说简单也简单,只需要在网页中嵌入几段代码,就能实现视频效果。但实际上,视频要想用的出彩,并不容易。

视频的进化

过去的网页设计,如果想要加入视频,同时还保证整体美感,不是很容易。我们来和现在做个对比。

过去:因为优美的网页设计必然需要高清高质的视频,若想拍摄好的视频,那么需要昂贵的硬件支持。
现在:相机设备越来越平易近人,手机拍照效果也越来越好,拍摄高清视频不是什么难事。

过去:若想在网页中添加动画片的,需要懂一点Flash知识或者动作脚本知识,或者干脆雇人。
现在:数不清的软件和工具,能够帮助你实现目标。

我们再来想想YouTube,创立于2005年。YouTube是广受大众欢迎的视频网站,在其中用户可以上传自己拍摄的视频片段。现在,即便是一些公司,也利用YouTube来发布产品预告。

我的看法是,YouTube催进了互联网视频的进化。他们让视频病毒式的传播于互联网中。YouTube的理念前无古人:任何人都可以发布视频、分享喜爱的视频,不论视频拍摄者水平的高低、经验的多寡。更平易近人。

现在的互联网视频

时至今日,我们的技术越来越先进,手段越来越丰富,我们甚至可以抛弃Flash.HTML5技术可轻松实现视频播放。技术越先进,我们的设计便越方便,可设计的空间也越大,用户体验也自然更好。

那么,在网页设计中加入视频的好处是什么呢?

视频元素有哪些用处?

视频的使用方法有很多,均能够提高用户的浏览体验。一图胜千言?没错,那么只要播放流畅、加载迅速,那么视频的传达能力完全可以超越图像,从而提高整体设计水品。

不过设计前还是要理性思考一番:添加视频,利大于弊,还是弊大于利?

倘若是视频可以更好的传达想要传达的信息,更好的传递品牌、产品、服务的信息,那么便采用。

倘若添加视频后,同时引入了一些不利于浏览的元素,这时候便该谨慎取舍了。

10个增强Web字体排版的jquery插件

蓝蓝

虽然Web字体版式技术在各种定制化字体解决方案(比如@font-face, Google Fonts)的支持下一路蓬勃发展,但是在我们在设计和桌面app开发中仍然对其缺少精准的控制和把握。还好有一系列的强大功能jquery插件帮助我们解决这个问题。这篇文章详细介绍了近10个最流行的Web字体版式插件,它们允许我们润色字体版式并创造出更多超级酷的效果。
不得不说,网站本身也创意十足,个性满满哟:)

Lettering.js

Lettering.js example

Lettering.js 是最简单最流行的网络版式插件之一。通过分拆每个文本,并将每个字母放在定制好的<span>中,该插件能够让你精准的操控标题版式。使用它小心的调整你的字距或者添加各式各样的CSS,从而让每个单词都有超级赞的效果。

 FitText.js

FitText.js example

交互式网站设计很好用,它允许内容根据用户的查看终端的大小自动调整。自然地你的web文本随着查看它的浏览器或者终端大小变窄而自动收缩,但是某些情况下会使题目和标题变得有点难看,尤其是由于文本自动缩进或者多出新的一行等情况。这就是FitText.js插件的功能,它能够使你的标题像一张回应式图片一样调整大小,单词不会出现跑到新的一行的情况。

想学响应式设计?来看史上最全的响应式设计资源库

蓝蓝

想学响应式设计?来看史上最全的响应式设计资源库

响应式设计起源:Ethan Marcotte在2010年写了一篇响应式的文章,宣扬这种新式的网页设计思想,经过3年的发展,响应式设计得到了众多设计师的认可。

本文的目的在于为大家集中推荐一些最有价值的响应式设计资源。包含了CSS框架、在线工具、准备阶段的工具等等。

推荐阅读:
《不要落伍!来和小伙伴一起学习响应式网页设计》
《来试试响应式设计!25例优秀的响应式网页设计赏析》
《年终特典!当下最热门的网页设计趋势总结》

CSS 响应式框架

这一部分主要介绍了一些的CSS响应式框架,更轻量,而且兼容性也不差。(Foundation,Skeleton是较为老式的CSS响应式框架)

Girder
Girder 使用了Sass silent classes (占位符,输出时不会体现)在HTML中组织内容,标记能够额外处理一些表象类(presentational classes ),比如 “unit_1of4″, “small-2″, “grid4″.

responsive-design-1

不要落伍!来和小伙伴一起学习响应式网页设计

蓝蓝

响应式设计现在已经成为网页设计师学习的焦点。优设哥发现群内有很多相关的讨论了,这说明我们平时接触该类案例越来越多。
你会渐渐发现,我们身边越来越多的企业和客户关注到响应式网站,作为勤奋的设计师,我们怎么能不对它进行了解呢?

响应式网页设计考虑到多平台、多种屏幕尺寸的情况,能够优化多种设备的网络浏览体验。
当你不知道用户使用什么设备,不知道用户的屏幕尺寸时,若想达到较优布局,可以采用响应式设计
在进行响应式设计时,要专门针对内容进行设计,优先考虑在不同环境下内容的适应性。

相关推荐:
《年终特典!当下最热门的网页设计趋势总结》
《学点新技能!玩转响应式图标设计》
《经验分享:响应式排版中的基础知识》

响应式网页设计

过去,上网需要一台电脑,一个猫。
现在呢,手机、平板、电视都可以上网。

实现响应式设计的几种常见方法

Responsive Web Design, 由Ethan Marcotte编写, A Book Apart出版,对响应式设计的原则进行了详尽的阐述。

多种设备均能支持联网,有利有弊:

好消息是,我们可以随时随地登入互联网。
坏消息是,设计师的工作量成倍的增加了,而且用户变得越来越挑剔,越来越不耐心。
在这种大环境下,响应式设计变成了主流。

响应式设计所带来的挑战

进行响应式设计,挑战有很多。
首先,设备种类、屏幕尺寸多种多样。小、中、大各种各样。其次,倘若你是开发者,你会明白从技术角度上,响应式设计实现起来也不容易。

15个华丽丽的模糊大背景网页设计

蓝蓝

推荐:网页设计趋势案例:15个华丽丽的模糊大背景网页设计
现在大模糊背景图像在网页设计中越来越受欢迎,
高斯模糊的加入不仅创建了一个朦胧弥漫的效果,
具备高端观赏性的同时,
它还可以强制性引导用户关注主要信息内容,大大提升了信息的易读性。
一起来欣赏这15个网站吧:)

HappyTables

View the website

Tiny Factory

View the website

Do

View the website

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档