Board logo

标题: 来,看看什么才叫护法 [打印本页]

作者: 阿毛    时间: 2013-6-12 20:08     标题: 来,看看什么才叫护法

posted by wap, platform: iPhone

**编者按:本文为百度软件研究院UI设计师李小阳(新浪微博@ M李小阳)的投稿,虽然 iOS 7的界面设计引来不少吐槽口水,但李的观点是“苹果的缺点一般都不会出现在大方向上,即便有缺点也只是在某些个别的零件上。”看下面:

这篇文章我将站在一个设计师的角度谈 iOS 7 的界面设计。

在谈 iOS 7 的界面之前,我先说说我对“扁平化”的认识。 iOS 7 发布之前大家都在猜测苹果会不会把界面改成“扁平化”风格?什么是“扁平化”的界面设计风格?去掉材质机理去掉投影渐变,整个界面看起来扁扁的平平的就是“扁平化”的设计风格吗?如果是这样理解“扁平化”三个字的话,那大家怎么理解“知识扁平化”这个词?

我认为“扁平化”的界面设计风格,真正意义上指的是界面设计上信息层级的扁平化,而不单纯只是视觉效果的扁和平。WP 系统的“扁平化”设计把很多信息变得模块化,并且压缩信息展示层级,很多原本藏的比较深的信息可以在首界面上直观呈现。

如果只是扁扁平平的视觉设计风格的话,我们压根不需要把界面设计孤立出来看。广告界的平面设计,书籍装帧的封面设计等等,在很久很久以前就已经实现所谓的“扁平化”了。况且我们最开始用的电子产品,在显示器还是马赛克的时候,那不就是最平的“扁平化”吗?实际这种极简式的点线面构成式的现代主义设计风格起源于建筑设计,并早已经在广告设计,服装设计,工业设计等领域普及了。

所以“扁平化”在界面设计界压根就是一个可有可无或早已有之的概念,完全没必要大肆渲染,只是IT 界的设计一直比其他领域的设计理念落后很多。

接下来我们谈 iOS 7 的界面设计。不深入细节去讨论,只讲视觉风格和直观感受。界面设计说白了就是显示在屏幕上的平面设计,没有必要把 IT 界的设计孤立出来看。

从图形结构上来说。iOS 7 界面在图形设计上变得更加灵巧灵动了,因为在图形大小和字体粗细的配合上,苹果拉大了节奏的跳跃,大到纯的 app 色块,小到使用了 Helvetica Neue UltraLight Italic 这种纤细的字体,形与形之间反差拉大之后,会呈现更加丰富的视觉体验。所以你会发现,新的 iOS 界面不再那么呆板了,变得有些个性和活泼。

从颜色搭配上来说。苹果在自己的硬件产品和宣传广告上一直都是用色大胆的,这一次苹果把对颜色的大胆用到了界面上。为了容易形容这种配色方案,我们从时尚和服装设计行业借鉴一个词就是“糖果色”。我不能说这样的配色是绝对的好看或者是潮流,但是有一点可以肯定,这样炫丽的配色在屏幕上带来了一种全新的视觉感受,并且充满了未来感和工业感,让人容易联想到在科幻电影中的未来产品。

从设计语言上来说,iOS 7 的界面设计向着“完美极简”的方向出发,但同时兼顾了当下的时代潮流,运用了简单的图形化语言而舍弃了之前很多拟物化的材质和肌理——不过,苹果并没有仿效 WP 系统极度理性地抛弃所有装饰的设计风格,而是把拟物化设计中比较出彩的部分比较吸引眼球的部分保留了下来,比如风雨雷电的模拟,还有半透明玻璃的效果。有人就说,天气模拟和玻璃效果安卓早就做了很多了。这一点不可否认,安卓是一个比较开放的平台,安卓的界面五花八门千千万万种,自然是把能使的招数全使了,但是安卓最可怜的地方就是永远没办法把一个东西做到极致。说白了就是看起来不错,但是不会让人爱的死去活来。

从图形动效上来说。iOS 7 唯一一个比较惊艳的地方就是利用陀螺仪技术可以让 app 在壁纸前产生裸眼 3D 的效果。其他的就是一些界面转场动画,跟别的操作系统没什么特别的不同。

总体来说 ,iOS 7 的界面是一个非常聪明和优秀的设计。在iOS 领先扛起拟物化设计大旗之后,发现图形化现代设计风格才是未来的王道。

但是 iOS 7 一下转型到 WP 系统那样极致的图形语言,就很难与 WP 的设计做出区别和个性。而苹果又为了不与安卓的风格太过接近,在设计中大胆的使用了荧光色。这样的配色很难模仿,因为苹果的软硬件是捆绑的,通过软硬件配合使得颜色显示以很好地管理苹果产品上的颜色呈现,既达到艳丽时尚又不至于太过刺眼。而安卓和 WP 的硬件就良莠不齐,太过大胆的颜色想在不同硬件上都有完美呈现就非常难做到了。

那 iOS 7 的界面设计上有没有缺点呢?这一定是有的,我们也已经看到了各种吐槽。但我之所以佩服苹果的设计,是因为苹果的缺点一般都不会出现在大方向上,即便有缺点也只是在某些个别的零件上,比如某些细节的 icon 设计的难看等等,无伤大雅。

有很多朋友都反映 icon 设计的太丑了,这个真没法辩论,能体会到其中的美的人自然能体会到,体会不到的可能也没办法通过一种解释让其领会。如果你发现你不喜欢苹果的设计,有些时候不妨换一个角度来想,你也许压根就没有被苹果归类到他们的核心目标用户群中,苹果也从来不去迎合所有的用户。

最后有一个期待。苹果把 iOS 7 的界面做成了这样的水准之后,很多第三方 app 看上去就非常的土,与系统平台格格不入。这是对所有 iOS 开发者的一个考验,接下来会有大量针对 iOS 7 平台的新设计涌现,只能拭目以待。
作者: 阿毛    时间: 2013-6-12 20:09

posted by wap, platform: iPhone

神了!

有很多朋友都反映 icon 设计的太丑了,这个真没法辩论,能体会到其中的美的人自然能体会到,体会不到的可能也没办法通过一种解释让其领会。如果你发现你不喜欢苹果的设计,有些时候不妨换一个角度来想,你也许压根就没有被苹果归类到他们的核心目标用户群中,苹果也从来不去迎合所有的用户。

百度的设计师!

神了!
作者: 超越梦想    时间: 2013-6-12 20:11

posted by wap, platform: iPhone

真果粉
作者: DarthVadar    时间: 2013-6-12 20:16

posted by wap, platform: iPhone

其实他心里想说的是
有很多朋友都反映 百度设计的太丑了,这个真没法辩论,能体会到其中的美的人自然能体会到,体会不到的可能也没办法通过一种解释让其领会。
作者: ggttww    时间: 2013-6-12 20:53

其实我觉得蛮漂亮
作者: ihcraxz    时间: 2013-6-12 20:58

有理有据,令人幸福
作者: migiry    时间: 2013-6-12 21:04

posted by wap, platform: Safari

第一次看这界面丑爆了
用了一天,我就觉得这界面还凑合
如果国内的软件界面都改了的话,形成一个整体的风格,不知道以后会怎么样
作者: raica    时间: 2013-6-12 21:45

别人是ui设计师 自然是专业看法。ios7这个设计。的确是开辟了一个新时代。极简,耐看,整体。实体ui确实老土过时了。如果你说ios7丑。那就请打开自己的手机看看。看看自己的界面被自己整成啥样了
作者: 烏鴉    时间: 2013-6-12 21:53

ios的视觉设计能力只是比众猴好一点点的话,显然是拉低了苹果对自己自己一贯的高标准要求啊。
改肯定是没有错的,但整体美感的高度不如从前是吐槽的重点。囧尼还是多花点时间改好apple自己图标,做好ios系统的设计指南。
作者: wpang    时间: 2013-6-12 21:55

新ui包括图标就是配色有点儿gay而已,其他没问题,app里边儿、动画都透着精致机灵劲儿,要说这渐变糖果色彩虹旗其实是要拿出来配七色葫芦娃的5s和廉价版的,到时候你们不顺眼就是不客观,ive使出吃奶的劲儿妇科自己imac g3+g4的路数,加上那个craig要啥给啥的geek病,整个发布会就感觉他们这帮人被教主爆菊好些年终于可以不憋着大胆的放屁了
作者: sarion    时间: 2013-6-12 21:57

图标是真丑,其他其实还好,你说图标都能做到Clear那种级别的也行啊,现在的简直是高中生设计的233max
作者: 橙七七    时间: 2013-6-12 21:58

裸眼3D都出来了
作者: 阿毛    时间: 2013-6-12 21:59

posted by wap, platform: iPhone

icon是硬伤啊…再洗也没用…
作者: sigmaxion    时间: 2013-6-12 22:26

客观地说,普通用户根本不可能没事就啥也不干,干瞪眼盯着界面图标发布半天愣。
估计叽叽歪歪都是相轻相贱的冤家同行。

作者: 阿毛    时间: 2013-6-12 22:48

posted by wap, platform: iPhone

半秒即吐…
作者: witheredleaf    时间: 2013-6-12 22:49

你们喷beta版有意思吗,不过这作者也真是神了,不想喷
作者: 阿毛    时间: 2013-6-12 22:56

posted by wap, platform: iPhone

发布的就是这样,什么理由不能喷?

锤子发布也是demo为啥能喷?
作者: 俗人    时间: 2013-6-12 23:05

posted by wap, platform: SONY (Xperia S)

就是好就是好,是不是这个道理
作者: ak497    时间: 2013-6-12 23:33

posted by wap, platform: Safari

三棒卫生巾照样有棒粉舔,ios7被护法又有什么稀奇.
作者: lastescaper    时间: 2013-6-12 23:36

有理有据,令人信服
作者: enix7501    时间: 2013-6-13 08:58

posted by wap, platform: iOS

喷了,这作者的屁话用一句话总结就是:懂得艺术和欣赏的自然懂,不懂的那是你自己的问题
作者: clark99    时间: 2013-6-13 09:07

posted by wap, platform: SONY (Xperia Z)
引用:
原帖由 @橙七七  于 2013-6-12 21:58 发表
裸眼3D都出来了
你还别说,就壁纸来说还真的有点裸眼3D效果
作者: springer    时间: 2013-6-13 09:12

和别的比得出7丑的结论暂不作讨论,完全可能,可是和6比可以得出7丑的同学我真的就败了…………
作者: 阿毛    时间: 2013-6-13 09:42

posted by wap, platform: iPhone
引用:
原帖由 @springer  于 2013-6-13 09:12 发表
和别的比得出7丑的结论暂不作讨论,完全可能,可是和6比可以得出7丑的同学我真的就败了…………
你怎么可能败,我觉得你已经不败了。
作者: springer    时间: 2013-6-13 09:44

引用:
原帖由 阿毛 于 2013-6-13 09:42 发表
posted by wap, platform: iPhone

你怎么可能败,我觉得你已经不败了。
如果我的表述除了丑、喷、护法这些要素别无他物,并且没有超过20个汉字的语句出现,只用短句表达简单观点无论述,这样才能接近不败的境界………………
作者: Crusher    时间: 2013-6-13 09:47

posted by wap, platform: iPhone

洗脑营销如此可怕
作者: 阿毛    时间: 2013-6-13 09:58

posted by wap, platform: iPhone
引用:
原帖由 @springer  于 2013-6-13 09:44 发表
如果我的表述除了丑、喷、护法这些要素别无他物,并且没有超过20个汉字的语句出现,只用短句表达简单观点无论述,这样才能接近不败的境界………………
你看,你都搭上奔驰了,怎么还可能败?

言之有物的东西你们必然会选择性无视的,写来干嘛,喷了。
作者: springer    时间: 2013-6-13 10:34

引用:
原帖由 阿毛 于 2013-6-13 09:58 发表
posted by wap, platform: iPhone

你看,你都搭上奔驰了,怎么还可能败?

言之有物的东西你们必然会选择性无视的,写来干嘛,喷了。
??奔驰是什么典故?
作者: zhaolinjia    时间: 2013-6-13 10:46

posted by wap, platform: iPhone

不这样怎么博眼球?怎么出名?阿毛你要理解人家
作者: lue    时间: 2013-6-13 22:33

细节还蛮好看的,不过图标暴丑……
作者: linkyw    时间: 2013-6-14 08:24

引用:
原帖由 clark99 于 2013-6-13 09:07 发表
posted by wap, platform: SONY (Xperia Z)

你还别说,就壁纸来说还真的有点裸眼3D效果
这都算裸眼3D的话,那任天堂在DSi上就实现掌机的裸眼3D了
作者: Oldman    时间: 2013-6-14 08:38

posted by wap, platform: Android
引用:
原帖由 @springer  于 2013-6-13 10:34 发表
??奔驰是什么典故?
同样的设计,打上苹果logo 就是奔驰,其他就是拖拉机。
作者: LTFYH    时间: 2013-6-14 11:47

posted by wap, platform: Android

看到没,ios7又开辟了一个新的时代
作者: pspgo    时间: 2013-6-14 13:58

posted by wap, platform: GALAXY NOTE II

很显然,我没被苹果列入他的核心用户群。难过地哭了……
作者: kintama    时间: 2013-6-14 22:43

posted by wap, platform: Android

奔驰来啦
作者: kintama    时间: 2013-6-14 22:45

posted by wap, platform: Android

上图是拖拉机,下图是奔驰
http://jonyiveredesignsthings.tumblr.com
作者: littlezoo    时间: 2013-6-14 22:54

引用:
原帖由 kintama 于 2013-6-14 22:45 发表
posted by wap, platform: Android

上图是拖拉机,下图是奔驰
http://jonyiveredesignsthings.tumblr.com
这几张图喷了。。。






作者: 狂奔的牛牛    时间: 2013-6-14 22:57

概括一下:

懂的自然懂,不懂的请滚开。
作者: JSRF    时间: 2013-6-14 23:34

引用:
原帖由 kintama 于 2013-6-14 22:45 发表
posted by wap, platform: Android

上图是拖拉机,下图是奔驰
http://jonyiveredesignsthings.tumblr.com
看吐了。。。
作者: tobewind    时间: 2013-6-15 00:14

[attach]543776[/attach]




欢迎光临 TGFC Lifestyle (http://bbs.tgfcer.com/) Powered by Discuz! 6.0.0