前端经验

带过五年多的用户体验设计团队,从几个人到二十几个人。以前自己也做过技术,发现工程师和设计师其实是有很多相近的地方的,那就是都有追求。

带领团队,并不是管好人就行了(所谓的行政管理),更是要实现业务的成功,给团队定目标,定追求,然后与大家一起想办法达成。这五个设计原则就是在团队日益变大,项目越来越多,团队输出的质量参差不齐,团队成员也反馈疲于交付已经没有了设计师感觉的情况下总结的。试图给团队定个设计的调调,给团队一个精气神。

主要参考的是Dieter Rams的《好设计的十条原则》,苹果iOS的设计指南,当然,也有Google的十大设计原则,因为Rams的是工业设计原则,iOS的是一个操作系统平台的原则,Google的则是一个公司的设计哲学,如果照搬过来恐怕难服众(其实更重要的是都太多了,因为无论哪个都超过了7+-2个的记忆极限),所以我就尝试集大家之所长,给自己的团队找到一些原则,在此也分享给大家。

在开始介绍这五个设计原则之前,我们应该反思一下什么是不好的设计?你觉得设计不应该是怎样的?现在,到处充斥着直接抄袭而没有认真理解人家设计原因的设计,充斥着难以让人使用美其名曰高科技的设计,充斥着连基本的美学原理都违背了的设计,充斥着差不多可以了的设计,充斥着无法展现品牌,无差异性的设计…我想,有追求的设计师都应该会对这些现象说“不”,那么,什么样的设计应该是我们所追求的呢?

1

1、有用的

一个产品创造出来,一定首先是有用的,能够满足人们需要的,能够解决用户问题的,这不仅仅限于功能性的需求和问题,还应该包括人们心理,情感以及对美的需求。要做到这一点,首先就要理解用户的需求,这是非常艰难的一步,但是是想要做出好产品必须经历的。了解用户的需求决不仅仅是到大街上到处问人你需要什么,你觉得这样的产品如何…而是一个研究,思考,原型的过程,需要深入问题,了解趋势,判断人们的动机和价值观,挖掘出潜在的需求。往往一个好的产品出来之前,人们并没有想到还可以有这样的产品。这就是设计的乐趣:)

2

2、革新的

一个好的设计,一定也是革新的,这里的革新不是“微创新”,也不是“创造”,因为很多产品并没有太多机会让人从无到有的进行创造,但是是有机会去革新的,采用新的技术,新的材料,新的交互过程,让产品被使用起来能够更好的满足第一点“有用的”

3

3、优雅的

有人说,中国当下的网站和界面之所以设计的很俗,是因为中国人的品味就俗…但是我认为,人们的品位正是需要好的设计和产品来提升的。欧洲人的素质高是因为他们出身下来看到的,用到的到处都充斥着好的设计,建筑和产品,潜移默化了。所以,作为设计师,理应把优雅的设计作为追求,带给人们心灵上的美的享受,告别粗糙的,不雅的吧

4

4、直觉的

前面三条应该是很多设计都可以遵守的,比如工业设计,平面设计,服装设计…而对于交互设计来说,好的设计应该是让用户凭借自己的本能或者生活和专业经验就能够使用和操作的,这就要求必须是简单的,友好的,能够被用户快速理解的,事实上,正是这一点,让交互式的产品真正的和人们发生了对话…

5

5、极致的

好吧,最后一条就交给“极致”了,当我们做设计或者产品的时候,就要完稿了,就要上线了,最后再检查一下是否已经达到了极致?极致不是完美,而是在已经做的事情上做到最好,最佳,不放过一个细节,以最好的表现出设计和产品的状态展示给用户…比如一个像素,一个文字,一个颜色,一个操作延时…

6

这五条原则是几年来学习和思考的结果,可以作为设计团队的设计哲学和追求。

现在虽然离开团队了,但是这些原则将永远作为我自己做设计和产品时候的指南。

最后,再附上两个我个人认为非常好的话作为结束,一个是三星的总裁李健熙的话,正是这句话激励三星从一个代工厂变成现在一个一流的消费电子厂商。再一次说明,人,一定是需要追求的,“要做一流的产品,就要象一流的公司那样思考”。

“To Make a good product, we have to think like top-tier company employees. We have to be willing to make a tier-?one product。”

——Design Strategy at Samsung Electronics:Becoming a Top-Tier Company

最后一个是阿来西公司总裁阿尔伯特.阿来西说的,我没有找到英文版,不知道是否真的是原话,不过这个版本读起来已经很带劲了,不是么?“设计,必须是充满诗意的。”

“设计从来都不应该是因袭守旧或者根本不能鼓舞人心的,相反它应该能为工业带来创造性的发展。一项设计是否优秀,不能仅以技术、功能和市场来 评价,一项真正的设计必须有一种感觉上的漂移(MOVING),它必须能转换情 感,唤醒记忆,让人尖叫,充满反叛……它必须要非常感性,以至于让我们感觉好像过着一种只属于自己的、独一无二的生活,换句话说,它必须是充满诗意的。”

——Alberto Alessi(Alessi公司CEO)

[易迅网 banner 精彩设计集锦 20P]  [45个叹为观止的国外创意404错误页面设计]  [做设计就应该收藏这些网站,国外16个著名Photoshop教程网站]  [干货!网页设计灵感第一期 #001]

过去的2012年,Web 领域有众多新变化:HTML5 将在2014年成为推荐标准;W3C 任命了4位新编辑来管理 HTML5 规范并托管到 Github 上面;WHATWG 继续致力于活动的 HTML 标准(Living Standard)。

image

这一年,响应式设计和 Twitter Boostrap 引导了主流;微软发布了 IE10,Chrome 和 Firefox 都新发布了7个版本;这一年,众多优秀的网页设计作品涌现出来。这篇文章精心挑选了2012年排名前20的 HTML5 网站,相信这些优秀网站能够带给你惊喜。

你也许会喜欢: [开动大脑!20个顶尖的HTML5动画网站欣赏!]

Audio

音频在这一年有了显著的进展,随着越来越多的浏览器支持,未来我们就能够在浏览中听到美妙的声音了。

JAM with Chrome这个应用基于 HTML5 Audio 特性实现,可以和朋友进行在线合奏表演。

有各种各样的乐器可以选择,还可以调整声音模式和难易程度,真的非常强大!

年度盛宴全球排名前20的 HTML5 应用和网站作品集合

The Rational Keyboard这是一个神奇的网站,可以弹奏音乐的网站,赶紧来体验一下吧!

年度盛宴全球排名前20的 HTML5 应用和网站作品集合

BBC's Radiophonic Workshop recreations英国广播公司使用 HTML5 音频 API 创建的一个广播电台。

 年度盛宴全球排名前20的 HTML5 应用和网站作品集合

Canvas

Canvas 可以说是 HTML5 最强大的功能之一,给网页游戏的开发带来了革命性的变化。

X-Type基于 Impact JS 框架构建的一款射击游戏,效果非常绚丽!

年度盛宴全球排名前20的 HTML5 应用和网站作品集合

Subbania这是 Chrome Store 上面的一款游戏,功能比较简单。

年度盛宴全球排名前20的 HTML5 应用和网站作品集合

WebGL

这又是一个尖端领域,性能和稳定性正在稳步增加 。

HexGL相信很多人看到这个会觉得眼熟,不错!这是类似《反重力赛车》的一个 WebGL 应用。

年度盛宴全球排名前20的 HTML5 应用和网站作品集合

Cell Cycle

这是另一个基于 WebGL 的Web应用,用于设计有机的艺术品和珠宝首饰的 3D 打印。

年度盛宴全球排名前20的 HTML5 应用和网站作品集合

Google's arms trade visualisation

由 Google 开发,展示各个国家质检军火贸易的 WebGL 应用。

年度盛宴全球排名前20的 HTML5 应用和网站作品集合

WebRTC 和 getUserMedia

WebRTC 是一项在浏览器内部进行实时视频和音频通信的技术,提供了视频会议的核心技术,包括音视频的采集、编解码、网络传输、显示等功能,并且还支持跨平台。

Webcam Displacement

打开摄像头,你就能在这个网页中看到自己了。

年度盛宴全球排名前20的 HTML5 应用和网站作品集合

headtrackr

一个脸部和头部跟踪的应用,通过 webRTC/getUserMedia 标准来实现的。

年度盛宴全球排名前20的 HTML5 应用和网站作品集合

工具和应用

Brackets

Brackets 的核心目标是减少在开发过程中那些效率低下的重复性工作,例如浏览器刷新,修改元素的样式,搜索功能等等,Brackets 值得你试试。

年度盛宴全球排名前20的 HTML5 应用和网站作品集合

Codepen.io

非常强大的在线编辑器,比众所周知的 JSFiddle 还碉堡! 可以使用 Markdown, Haml, Slim, Less, Sass 和 CoffeeScript 在线编写。

年度盛宴全球排名前20的 HTML5 应用和网站作品集合

Prism

这是一个轻量的 JavaScript 代码高亮库,使用了 web workers 来改进性能。

年度盛宴全球排名前20的 HTML5 应用和网站作品集合

HTML5 Boilerplate

最流行的前端模板——HTML5 Boilerplate,相信前端开发人员都知道。

年度盛宴全球排名前20的 HTML5 应用和网站作品集合

学习资源

Responsive Images Community Group一个由开发者组成的工作小组,致力于实现基于标签的响应式图片。

年度盛宴全球排名前20的 HTML5 应用和网站作品集合

Khan Academy computer science course

这个网站提供了很多的计算机方面的教程,各个方面的都有。

年度盛宴全球排名前20的 HTML5 应用和网站作品集合

WebPlatform.org

这个网站整合了来自业界 Adobe、Facebook、Google、HP、Microsoft、Nokia、Mozilla 和 Opera 的文档资源,在 W3C 的领导下创建了一个标准化的 Web 开发文档分享仓库,方便开发人员编写符合标准且具备良好跨浏览器兼容性的 Web 应用。

年度盛宴全球排名前20的 HTML5 应用和网站作品集合

HTML5 作为开发标准

已经有很多前沿的公司采用 HTML5 来作为默认的开发标准,下面三个网站是其中的优秀案例。

Gov.uk

政府网站,提供所有的政府服务和信息的访问。即使是政府领域的一个项目,它的开发团队仍然决定使用 HTML5。

年度盛宴全球排名前20的 HTML5 应用和网站作品集合

BarackObama.com

这个网站可以说是奥巴马在总统竞选中获胜的秘密武器。基于 HTML5 Boilerplate 建立。

年度盛宴全球排名前20的 HTML5 应用和网站作品集合

Stripe

HTML5 同样也是这个网站的开发标准,使用 sessionStorage 缓存数据,用 postMessage 与服务端通信。

年度盛宴全球排名前20的 HTML5 应用和网站作品集合

image

拖了好久Resolution.im终于上线,目前收录了iPad及iPhone的相关信息并提供全尺寸PNG源文件。接下来会陆续添加主流Android机型。希望对各位移动设计师有用,以后查移动设备相关信息来这里就对拉。

传送门→http://resolution.im/  |  作者微博→@5key  

想让你的网页和海报看上去更有范更立体么?这套模版很不错,用法见配图!

image

ps:记得用这些包装的时候要点开智能对象,才能更人性化的编辑哟!收藏起来以后你肯定有用滴!

image

下载地址:

新浪微盘下载  |  来自禄's Blog

这个连小孩子都知道开发App的时代,编程是一项必学的技术,没必要拿着枯燥的书本在那里死啃,必须是即刻动手才能学得快。所以我们要来看看这些免费编程资源。

孩子都知道开发App你还在等什么?免费学习编程的10个好工具!

1. Code/Racer

Code/Racer是一个在线编程游戏,会强迫你快速编程,在编程游戏中,Code/Racer所属Treehouse团队拥有超过650个教学视屏,当你完成某个课程的话,就会获得相应的徽章。

孩子都知道开发App你还在等什么?免费学习编程的10个好工具!

2. MIT OpenCourseWare

因为它开放了课程内容,所以每个人都可以从这个机构学到东西。这对于背负着沉重贷款的学生来说是非常美好的一件事。

孩子都知道开发App你还在等什么?免费学习编程的10个好工具!

3. Udacity

Udacity相信当今的高端教育系统被破坏了,教育不再是某个时间段的事情,而是终生的事情,所以它的教学内容里面包括了大量的计算机科学,数学和物理在线课程。

孩子都知道开发App你还在等什么?免费学习编程的10个好工具!

4. Mozilla Developer Network

这是一个搜集Web开发的公资料网站,里面有专家、学生。MDN是一个Wiki式网站,所以任何人都可以编辑和修改它的页面。

孩子都知道开发App你还在等什么?免费学习编程的10个好工具!

5. The CodePlayer

这里有互动演示文稿告诉你人们是如何从头构建事情的,在你变成一个编程员后,你也可以把自己一步一步的学习的演示文稿传上去,告诉别人你是怎么学习编程的。

孩子都知道开发App你还在等什么?免费学习编程的10个好工具!

6. Coursera

这个顶级在线教育平台有各个大学的在线资源,来自62个大学的教授老师等。而且支持英语、西班牙语、法语、意大利语和中文。

孩子都知道开发App你还在等什么?免费学习编程的10个好工具!

7. Codeacademy

Codeacadem只专注编程教学,包括APIs, Ruby, Python, JavaScript, jQuery, PHP,Web基础语言等。

孩子都知道开发App你还在等什么?免费学习编程的10个好工具!

8. Khan Academy

从编程到微积分,计算机科学理论,在这里你可以同时成为专业编码师和专业数学家。

888.jpg

9. Learn Python the Hard Way

该网站提供免费的PDF,如果需要视频课程的话,你需要支付29美元。在这里学习的时候, 你不能复制粘贴,只能一个一个字符输入。

999.jpg

10.HTML5 Rocks

这里是学习HTML 5的一站式教学,都是在Google、Adobe等工作的人写的,然后学生们通过幻灯片、演示文稿和视频来学习。

孩子都知道开发App你还在等什么?免费学习编程的10个好工具!

image

两月前澳大利亚设计师 Fred Nerby 发布了这套 Facebook概念图 之后,他的官网浏览量超过了两千万。其实引起关注用不了两月之久,Nerby 发布 Facebook 设计 24 小时后,全球各地的公司便开始联系他,包括 Facebook。Nerby 无意透露他跟 Facebook 的谈话细节,唯一确定的是他没有选择去 Facebook 工作。

澳大利亚设计师 Fred Nerby 发布 Facebook概念图,相信很快人人就会改版!

澳大利亚设计师 Fred Nerby 发布 Facebook概念图,相信很快人人就会改版!

澳大利亚设计师 Fred Nerby 发布 Facebook概念图,相信很快人人就会改版!

澳大利亚设计师 Fred Nerby 发布 Facebook概念图,相信很快人人就会改版!

更多概念图请浏览 Nerby 设计师网站:http://nerby.com/project/facebook/

image

在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果。今天研究了一下,总算有所了解。在此总结一下:

先看下各个属性值的定义:

1、static:默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。

2、relative:生成相对定位的元素,通过top,bottom,left,right的设置相对于其正常位置进行定位。可通过z-index进行层次分级。

3、absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

4、fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

static与fixed的定位方式较好理解,在此不做分析。下面对应用的较多的relative和absolute进行分析:

1、relative。定位为relative的元素脱离正常的文本流中,但其在文本流中的位置依然存在。如图1:

搞清Position属性,CSS+DIV定位分析(relative,absolute,static,fixed) - 禄's Blog www.webexp.cn

黄色背景的层定位为relative,红色边框区域为其在正常流中的位置。在通过top、left对其定位后,从灰色背景层的位置可以看出其正常位置依然存在。

2、absolute。定位为absolute的层脱离正常文本流,但与relative的区别是其在正常流中的位置不在存在。如图2:

搞清Position属性,CSS+DIV定位分析(relative,absolute,static,fixed) - 禄's Blog www.webexp.cn

可以看到,在将黄色背景层定位为absolute后,灰色背景层自动补上。

3、relative与absolute的主要区别:

首先,是上面已经提到过的在正常流中的位置存在与否。

其次,relative定位的层总是相对于其最近的父元素,无论其父元素是何种定位方式。如图3:

图中,红色背景层为relative定位,其直接父元素绿色背景层为默认的static定位。红色背景层的位置为相对绿色背景层top、left个20元素。而如果红色背景层定位为absolute,则情形如图4:

搞清Position属性,CSS+DIV定位分析(relative,absolute,static,fixed) - 禄's Blog www.webexp.cn

可以看到,红色背景层依然定义top:20px;left:20px;但其相对的元素变为定位方式为absolute或relative的黄色背景层。因此,对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层,而这个父层并不一定是其直接父层。如果其父层中都未定义absolute或relative,则其将相对body进行定位,如图5:

搞清Position属性,CSS+DIV定位分析(relative,absolute,static,fixed) - 禄's Blog www.webexp.cn

除top、left、right、bottom定位外,margin属性值的定义也符合上述规则。

image

1、多花些时间

挑选合适的字体需要花费大量时间。但是不要一遍又一遍地让自己陷入对同一类型的字体挑选中。因为人们往往习惯于从自己熟悉的字体或者偏爱的字体开始。多花些时间去发现探索新的类型,这样你才能慢慢地发现自己对一种字体的细微差别的敏锐度,真正地让字体自己告诉你合适不合适。

2、不要使用过多的字体

如果你的一个页面里有十种不同的字体,那么你的排版一定会很难看。控制自己使用越少的字体,将会让你的页面脱颖而出。同时你也可以在字体的大小、重量和其它方面创造更多的对比变化。

3、不要盲目赶潮流

那些时尚网站的现代字体固然很精致,但是它并不是适合所有的页面。真正深入了解你的内容来设计会比你盲目地用许多最新的字体叠加,使你的版面看起来更加自然和谐。其实,字体也不光是网络才有。有时候,打开一本书或者一本杂志,看看那些经久不衰的经典字体,也会让你受益良多。

4、保持不同

当你选择字体,将他们放在一起时,确保他们的字体相互独立的而不是相互接近的。因为如果您选择两个相似的字体放在一起,会给大家一种错别字的感觉。

5、别忘了衬线字体

无衬线的字体看起来会很现代,同时很简洁干练,被许多设计师所采用。不过对于一些抒情性强的页面时,偶尔使用一些衬线字体,会让你的版面看起来更加有爱,更加经典。

6、保证清晰易读

为了让版面醒目突出,往往大部分设计师会忘记信息的明确传达。他们就会使用各种工具制作很炫目的图形,而把文字内容放的很小很不起眼。这恰恰犯了版式编排的大忌,因为你总不能让观众去猜测到底要传达什么信息吧!

7、建立层级次序

决定了哪些字体要用来做什么,对他们要怎么处理,依次遵守设立一个系统,这样就能很容易地让你来挑出来编排,也能让读者更容易地阅读。

8、让你的版面呼吸

确保你各个部分的内容都被合理地放置而不是混乱地堆在一起,多调整行距和字距,多使用项目符号。这样你的版式才会看起来舒服有序。

9、注意版权

不要认为你是从网上获得或者从朋友那里得到的字体,你就可以想怎么用就怎么用了。多想想它有没有版权信息,在你打印之前就确保你是否需要从原作者那里获得使用权。

10、小一点更好

更小一点,不是任何时候都适用,但要是想显得精致和高品位一些,小一点是没错的。不过前提是足可以辨认。平时在已经完成一个页面后,多推敲看看字体的字号能不能再小一点。有时候会起到出乎意料的效果!

之前为大家介绍过灵感的干货系列,46个为你带来灵感的游戏网站设计!这次为大家带来28个化妆品网站设计欣赏,希望能为大家在设计化妆品相关网站的时候带来灵感、创意!

image

NYX

28个化妆品网站欣赏-美丽将拯救世界

maxfactor

28个化妆品网站欣赏-美丽将拯救世界

Schwarzkopf

28个化妆品网站欣赏-美丽将拯救世界

Artistry

28个化妆品网站欣赏-美丽将拯救世界

Calvin Klein

28个化妆品网站欣赏-美丽将拯救世界

Caboodles

28个化妆品网站欣赏-美丽将拯救世界

Loreal

28个化妆品网站欣赏-美丽将拯救世界

Olay

28个化妆品网站欣赏-美丽将拯救世界

Maybelline

28个化妆品网站欣赏-美丽将拯救世界

Chanel

28个化妆品网站欣赏-美丽将拯救世界

Lancome

28个化妆品网站欣赏-美丽将拯救世界

Loreal USA

28个化妆品网站欣赏-美丽将拯救世界

Revlon

28个化妆品网站欣赏-美丽将拯救世界

benefit

28个化妆品网站欣赏-美丽将拯救世界

Smashbox

28个化妆品网站欣赏-美丽将拯救世界

Sephora

28个化妆品网站欣赏-美丽将拯救世界

garnierusa

28个化妆品网站欣赏-美丽将拯救世界

Mary Kay

28个化妆品网站欣赏-美丽将拯救世界

Stila Cosmetic

28个化妆品网站欣赏-美丽将拯救世界

Maybelline

28个化妆品网站欣赏-美丽将拯救世界

ELF

28个化妆品网站欣赏-美丽将拯救世界

Wella

28个化妆品网站欣赏-美丽将拯救世界

Esteelauder

28个化妆品网站欣赏-美丽将拯救世界

Clean and Clear

28个化妆品网站欣赏-美丽将拯救世界

Nivea

28个化妆品网站欣赏-美丽将拯救世界

BHcosmetics

28个化妆品网站欣赏-美丽将拯救世界

Tarte

28个化妆品网站欣赏-美丽将拯救世界

Inoa

28个化妆品网站欣赏-美丽将拯救世界

下面收集了32个超赞的最时尚的复古网站。陈旧的配色、50年代灵感的广告、稀烂的纸浆。在这些超赞的复古的网页设计中,得到启发!

Powered By Z-BlogPHP 1.5 Zero

Copyright webexp.cn Rights Reserved.

本站基于 阿里云服务器 + Ename域名 + Z-Blog 构建   |   站点地图   |   辽ICP备13003381号-4