一套新的UI设计作品

前段时间因为小孩生病住院,打乱了我好几项计划,设计和摄影安排好的计划也被耽搁了。所以这套作品来自工作中的任务。

这不是一个新的App,但确是一个全部重来的全新设计。原先的App界面简直不忍直视,因为是行业专用的产品,对界面设计要求不高,所以原先的界面基本就是程序员自己弄的。

我这次的任务就是在原有的功能需求上,联系运维相关的人员,因为没有产品经理,沟通相关的需求。也挺无语的,领导组织我们开完会说明App要重新改版之后,需求交由一个运维人员整理。等了接近一周时间,告诉我终于需求整理好了,碰个面去沟通一下。碰面之后,我问有文档么,被告知,没有,就直接口述就好了。我当场就懵逼了。

最后不得不让运维人员在纸上写了几个关键字和关键点。然后我在电脑上装了个安卓虚拟机,一边看着这关键字文档,一边根据原有App上的页面内容自己分析需求。所以这套UI设计页面不算很多,但是却非常的费时间。

要是在这么一直无规范的状态工作下去的我会暴走的。

如果你感兴趣的的话,可以帮我去站酷上攒点人气,我会非常感激的!

简约风格的天气网页和APP UI设计

在迷上日剧《朝5晚9》之前收到一个国外的设计作品的启发,决定做一个我心目中的简约风格的天气应用。

欧美简约的风格是我一直所坚持的,有时候甚至会走向极简风格的设计。而功能上,根据二八定理,80%的用户只会用到20%的功能。所以对于一个本身就是瞄一眼的天气应用来说,功能上就该精简,全方面的详细信息不是我想提供的。

原本计划一周就该完成的。没想到做到中途注意力被朝5晚9吸引走了,于是又多花了一个礼拜。自控力不足,还需要修炼。一共有三种不同的状态,还有个GIF动画特效,不过是在太大了,感兴趣愿意捧个场的小伙伴可以去我的站酷看看,帮我刷点人气,良辰在此谢过。

Continue reading

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