2014 UI设计趋势预测

作为一个合格的设计师,保持关注当下以及未来的设计趋势是非常有必要的。2013年已经接近尾声,是时候关注一下来年2014年的设计趋势。

扁平化

Digital_Menu_Bigger

扁平化将是今后UI设计的绝对主流。越来越多的网站,App都采用了扁平化的设计方式。微软是扁平化设计的最大倡导者;Google也将扁平化的设计方式应用在了Android以及自家所有的产品上;苹果发布了新款iOS 7系统,彻底转向了扁平化的设计方式。相比以往苹果所坚持的拟物化的设计风格,扁平化的设计能够强化内容,重新回归内容的本质,界面简洁清爽,制作起来更加容易等非常大的优势。

Continue reading

写给半路从事设计的人

作为一个半路从事设计的人来说,我很有发言权。大学毕业即开始从事设计工作,而在工作之前,我在大学学习的专业并非是设计专业,而且甚至和设计的相关性很远。那么,我借以我自己的亲身经验说说为什么从事设计,对半路从事设计的童鞋一些忠告。

为什么要从事设计?

在从事设计之前,我认为应当认真的问问自己,为什么要从事设计?其实这个问题不仅仅可以用在设计领域,对于其他的行业也同样适用。从事一个行业或者一个领域可以有很多的动机驱使,问问自己为什么要从事,是生活所迫,还是兴趣使然,还是一时头脑发热。从事设计并且认真对待,为什么从事这个问题非常重要,这个问题能够决定你今后的发展曲线。所以,在做决定之前,想想清楚,自己为什么决定从事设计。

兴趣是最大的动力

我认为,兴趣是对上一个问题的最佳答案。只有对设计产生浓厚的兴趣,才能驱使自己不断的前进。倘若你从事设计只是生活所迫选择一份还说得过去的职业的话,那么你很难在设计这条路上不断的提高自己。而兴趣可以驱使你不断的去学习,去研究,了解新奇的东西,新的设计风格,新的设计技术。如果只是当作谋生的工具,那就很可能只会满足于现状,仅仅是得过且过。

曾经有一种观点,不要把自己的兴趣变成自己的职业。我一直不认同这种观点,也一直没有理解为什么这么说。我认为,从事某一种职业必然是自己喜欢做感兴趣做的,只有对要做的事情充满兴趣才会使自己不断向前进。人一生中,有三分之一的时间在睡觉,另外还有三分之一的时间在工作。这么长的时间里,如果自己做的不是自己喜欢做的事情,那该是多大的一种无聊甚至折磨。

保持进步

活到老学到老,这句话永远都是正确的。如果你认为大学毕业这辈子再也可以不用读书学习了,那就大错特错。各行各业都是一样,包括设计在内,都是不断的发展变化的,只有学习,使自己进步,跟上时代发展的节奏,才能做到不落后于时代。每年有大量的新人涌入各行各业,如果不学习保持自己的竞争力,那么就印证了那句话——长江后浪推前浪,前浪死在沙滩上。

兼听则明

可以很骄傲的说,设计是一门艺术,但设计更是一个以服务大众为目标的手段。不同于让人看不懂摸不透的行为艺术,设计是为了提升大众的生活品质。所以,受众的目标群决定了大众对设计作品的评价有着很高的分量。设计师很容易有一种孤傲的自我认识,而容易固执己见。工作中,不仅仅同行设计师的意见很重要,工作中其他职位的同事的意见也很有用,他们凭借的直觉给予的意见,不同于设计师的主管感受,是很客观的。当然,他们没有相关的设计知识,所以针对这些意见,必须做出筛选,留下有帮助的信息。

我希望这几条建议对于半路从事设计的人来说能有帮助。设计并不是很简单的事情,同很多工作一样,也是需要花费很多心血的。慎重作出选择,一旦选择了就谨慎上路。

使用矢量而非位图来设计UI

自苹果发布iPhone一来,智能手机越发的功能强大,越来越多的人开始使用iPhone,Android等系统的智能手机。得益于此,App的发展也如日中天,因此UI设计的需求也越来越大。当下,几乎所有的App都是使用Photoshop设计,而Photoshop是一款传统的基于位图的图像处理软件。当然,Photoshop强大是无可估量的,对矢量的支持也越来越丰富。因此,对于使用Photoshop做设计的UI设计师而言,使用矢量而非位图来设计UI是效率最佳的方案。

为什么建议要使用矢量做设计而不是直接用位图,很大原因是因为UI设计根本上避免不了需要一再的修改,不仅在国内很普遍,就是在硅谷,设计稿通常也需要不断的修改才能达到最终令人满意的效果。那么,基于这一条理由就足够让设计师去采用一种便于日后修改起来简单快速的方法,所以矢量是非常有效的选择。

使用矢量设计UI的优点

可编辑性

刚才说过,矢量最大的特点就是可编辑性强,而这正也是使用矢量设计UI的最大动机。在UI设计中,经常牵涉到更改模块的尺寸,色彩,形状等属性。如果是使用传统的位图来绘制的话,在后期需改起来就会显得相当的麻烦,需要通过繁琐的步骤来增加或者删掉不必要的部位,而变换形状更是一项非常繁琐的操作。而对于使用矢量设计的元素来说,只需要调整相关的矢量节点就可以快速的完成这些通过位图做起来很麻烦的事情。

文件体积小

从技术层面上来看,位图通过记录每一个像素点的颜色值来形成最终的画面,而矢量则是通过一系列的数学公式来形成最终的画面。这种原理上的差异就导致了位图适合做照片相关的内容,而矢量适合制作画面简单的UI。所以,将原本用位图方式制作的UI转换为使用矢量制作,将会大大的减小文件的体积。

内存占用少

如果你的电脑配置不是太高,特别是内存并不是很大的话,那么矢量可以为了节省很大一笔内存。对于公司人来说,哪怕是设计部门,除非是大型的公司,一般都是较为普通配置一般的电脑,内存也就只是够用就好的水准。相比位图,或者是Photoshop中的智能对象而言,矢量可以占用较小的内存资源。

矢量的缺点

诚然,矢量在UI中有很多得天独厚的优势,但是矢量也并非没有劣势。

耗费CPU

由于矢量是由一系列数学公式记录的,这也是矢量的原理所决定,因此相比位图在操作的时候会消耗更大的CPU进行运算工作。当然,这种差异在只有一点点矢量的情况下是微乎其微的,但是当文档中有众多的矢量元素,或者元素的复杂程度很高的话,那么在操作的时候,CPU需要进行大量的运算,在性能上就能明显的感受上迟钝感了。

学习曲线陡峭

大多数的设计师对于在Photoshop中操作位图并没有太大的难度,但是操作矢量元素,特别是使用钢笔工具并不是那么得得心应手。相比位图,矢量的学习曲线更为陡峭,使用起来难度稍高,这也是为什么有不少设计师更倾向于使用位图而不是矢量做设计的一个原因。

如何用Photoshop制作iOS 7透明磨砂玻璃效果

半个月前,苹果发布了iOS 7系统正式版,于是伴随着扁平化界面一同而来的透明磨砂玻璃效果让所有支持iOS 7的设备的用户都能用上了。因此,我做了一套iOS 7的透明磨砂玻璃效果的UI。可是,没想到很多人对于怎么设计这个透明磨砂玻璃的特效甚是不解。这真是我始料不及,当iOS 7 Beta版本发布的时候我就分析了一下怎么在Photoshop中来设计这个界面,其实就是很简单的事情,很容易想通的。那既然有这么多的童鞋不太明白是怎么制作的,于是我决定写一篇文章大致讲解一下吧。

Flat UI Kit

准备

首先,你要挑选一张看着舒服的图片作为背景,图片好看心情才好。由于我写此篇文章的目的只是讲解透明磨砂玻璃效果的制作,其他一些基本且无关的操作因此忽略,因此需要有一定的Photoshop操作基础。
Continue reading

App设计中需要注意的多个要点

由于智能手机以及平板电脑的快速发展,App呈现爆炸性的增长。App设计没有网页设计那么自由,但还是有不小可以发挥的余地。相比网页设计,App在设计上有诸多的限制,需要注意的要点很多。

App风格与系统风格统一

App是运行于iOS或者Android这些系统中,系统有其自身的设计风格,不论是iOS 6以及之前版本的拟物化风格,还是iOS7的扁平化风格,还是Android的Holo风格,整个系统所有界面在设计风格上是整体统一的形成一个整体。因此,在设计App的时候需要将设计风格与系统风格统一起来这个因素考虑进去。若在扁平化风格的iOS 7系统上运行一个重度拟物风格设计的App,就好比在繁华的时代广场突然出现一栋明清小楼,经典虽经典,但是和这个大环境格格不入。这里并不是讨论扁平化设计和拟物设计哪个好(尽管我站在扁平化设计这一边),而是要与系统风格保持统一,形成整体。

flat vs skeuomorphism

如果在iOS 7扁平化风格的系统上运行右边重度拟物风格的App,那是多么一番精神分裂的景象。因此,如果扁平化就全部扁平化,若是拟物化就拟物化走到底。
Continue reading

拥抱扁平化的设计——我对iOS 7的看法

作为一个设计师,不能不对这次苹果的发布会加以关注,尤其这次是新发布的iOS 7自诞生以来最为重大的设计改版。我没有用过苹果的产品,更没有iPhone,不过作为一个设计师的修养,我还是保持相关行业保持相当高的关注。而且,不管怎么说,还做过iOS的App UI设计,多少有点经验。

iOS 7 Screenshot

拟物主义时过境迁

尽管当下拟物主义的设计方式仍然占据很重要的位置,但是不可否认的是,越来越多的网站,App采用了扁平化的设计风格。扁平化的设计是未来的设计趋势。拟物主义的设计方式解决了用户使用入门的问题,通过对实物的模拟,让用户能够产生对产品更为熟悉的感觉,操作方式如同操作真实的物品一样。但是经历了6年的发展,触屏操作的用户界面已经为用户所接受,越来越多的设备采用了全触摸的方式。因此,拟物主义的设计方式的功能使命已经达成。

扁平化设计的简洁与高效

扁平化设计并未像拟物主义设计受到太多的褒奖,其中一个很大的原因在于,扁平化的设计方式对于设计的要求更高,想要设计的好看并不是容易的事。扁平化的设计风格去除了多余的不必要的装饰,尽最大限度的展示内容,而要把设计做的好看则需要考虑色彩,形状,大小,比例,位置,纹理等各个方面,想要设计的好看反而不容易把握。而相比之下,拟物主义的设计风格虽然制作上难度更大,但是只要遵循现实中的物体则不会出太大的问题。将设计最大的简化之后,突出核心的内容,这也是用户最为关心的部分,最大化的利用可视区域。

苹果形象的重新定义

当下的苹果迫切的需要一种对自我形象的重新定义,提升在用户心中的形象。自从乔布斯去世之后,苹果并没有任何实质性的创新产品,每一年都是针对既有的产品线进行迭代式的更新。对于一个存在了6年的iOS系统来说,这种重新定义更为迫切。自从初代iPhone问世以来,iOS系统的设计几乎没有太大的变化,拟物主义主义的设计风格也逐渐落伍,苹果需要给用户一些不一样的新鲜血液。微软与Google已经充分的将扁平化的设计风格部署到了各个产品线中,其中尤其以微软最为彻底,虽然扁平化的设计风格中苹果是个后来者,但是现在改变还不算迟,不至于在设计上落后。如果说苹果抛弃拟物主义的设计风格之后没有了自己的特色,那我认为一味保留着时过境迁蹩脚且落伍的设计也能算是特色的话,这种特色不要也罢。

虽然这次iOS 7的图标广受诟病,但是这不能代表扁平化的设计风格的不好。前面已经说过扁平化的设计其实更难把握一些。目前iOS 7只是初次尝试扁平化的设计,而且还在测试阶段,相信后面的设计会有改进,变得更为成熟。至少,这样的扁平化的设计与iPhone简洁的外观设计风格很搭。

其实这次iOS 7的扁平化设计对于广大UI设计师更是意义非凡。长久以来,很多设计师在设计风格的选择上很大程度上受到客户审美的制约。优秀的设计师能够把握当下的设计趋势,而客户则不然,因此在给客户选择扁平化设计风格的时候会有相当大的阻力。而现在,苹果亲自将设计拍扁了,通过苹果在移动领域强大的影响力,对于设计师向客户推荐扁平化的设计方式是个很大的帮助。因此,拥抱扁平化的设计就是拥抱未来的设计趋势。

一些扁平化的设计作品

扁平化设计风格是未来的设计趋势,越来越多的网站与软件都采用了扁平化的设计方式。这其中尤其以微软贯彻的最为彻底。不仅微软在Windows 8,Windows Phone,Office 2013等软件全面采用了扁平化的设计风格,就连很多软件的iOS版本也逐渐的采用了扁平化的设计方式。

相比苹果为主导的拟物风格设计的方式来说,扁平化的设计方式在制作难度上大大降低,但是要想把设计做的好看,我认为扁平化反而比拟物风格更不好掌握。去除繁琐与不必要的装饰,达到简约的风格,仅保留有用的信息,对于排版,布局,配色,大小,比例等设计元素有着更高的要求,一不小心就容易设计的非常难看。

SoleilNeon从事设计工作多年,一直以来就非常喜欢简约风格的设计作品,在微软采用扁平化的设计风格之前,就有一些网站使用了扁平化的设计风格,甚是喜欢。因此,SoleilNeon的大部分的设计作品中也采用了扁平化的设计方式,这些是最近的一些设计作品,与大家共勉。

Flat

Continue reading

2013年设计趋势

这是个网络化的时代,每天有大量的网页被设计出来,有大量的App被开发出来。对用户而言,界面设计非常重要,用户使用的是界面,而非关注后台的代码。把握住当下的设计趋势,紧随潮流,甚至超越潮流,是非常必要的。针对2012年全世界的各类设计,我整理个2013年的若干设计趋势。把握住这几条,肯定会使你的设计提升至一个更高的层次。

更多扁平化的设计

design-trend-2013-flat

在微软使用扁平化的Metro界面之前,网络中就已经有小部分的网页使用了扁平化的设计,而微软在Windows 8和Windows Phone以及整个家族中使用扁平化的Metro设计使得这种风格更为流行。扁平化的设计将会在今后的设计中使用的更为广泛。扁平化的设计非常适合用作页面布局以及按钮等元素,这意味着设计与维护的简便,视觉上有更大的可视面积,触摸区域更为明确。

扁平化的设计意味着简洁与高效,更少的做不需要的装饰,将用户的注意力更多的专注于内容本身。当然,扁平化的设计在设计功底上有更高的要求,通常越是简单的东西其实是更难驾驭的,设计也是一样。扁平化的简洁使得装饰没有用武之地,更多需要考虑的是排版与布局,用色以及整体性的统一,这往往是不太好把握的。
Continue reading

两套简约UI设计工具包套件PSD源文件下载

UI设计是个工作量不小的活,各种元素都需要自己手动去设计。使用现成的UI设计工具包套件则能大大的简化设计中的工作量,大大加快速度提升效率。而且,使用UI设计工具包套件还能使设计中的各个元素的风格都能保持统一,保持了用户界面的一致性。

因此,SoleilNeon制作了两套UI设计工具包套件,包含PSD格式的Photoshop源文件。所有的图形都是由矢量形状绘制的,可以自由缩放而不必担心失真的问题,同样也可以根据自己的需要调整形状的路径生成自己需要的形状。

soft-ui
Continue reading

Photoshop快捷键壁纸设计作品

通常,我会让自己保持忙碌,在我没有项目可做的时候,我会自己给自己规划一些东西去做,以免让自己闲下来而导致对设计和技术的生疏,同时这也是增加作品数量的一个好方法。设计这个Photoshop快捷键壁纸的想法产生于洗澡的时候,也许是因为这时候头脑放松不受其他因素的牵挂,更有利于创意灵感的产生。

设计这系列Photoshop快捷键壁纸最初的想法是使用双色调的图标,但是当开始设计之后却发现效果并没有头脑中想象的那般令人满意,使用不同纯度等级的单色图标确实一个不错的选择。整体采用了扁平化的设计风格,看起来很简约,也非常高效。

最初只做了蓝色的版本,但一张显得有些单调而乏力,因此我决定做出不同色彩的版本,形成一个系列。最终,配上了不同的背景底纹,除了颜色的不同之外又有背景的不同,于是整个系列显得既风格统一,却又不至于单调乏味。

我将这个项目上传到了Behance站酷,如果你感兴趣的话,欢迎围观!

Photoshop Tools Keyboard Shortcuts Blue
Continue reading