青青子衿, 悠悠我心, 但为君故, 沉吟至今
« Twitter不是Google杀手百度360之争的背后 »

苹果iPad视觉设计分析

  大部分的用户都并非对体验与设计有深入研究,而是从“看着舒服、用着好用”的角度来衡量一款产品,据笔者观察一些网页设计与数码设计,发现两者之间有着异曲同工之妙,他们对用户的研究、设计发展趋势几乎是共通的,例如苹果著名的COVERFLOW,和网站设计首页焦点图展示的效果。因此,我们常提的CROSSOVER思维可以用上了,互联网与传统数码的视觉设计与交互体验可互为灵感参考。

  前言

  为什么蓝魔的设计感觉“山寨”,而苹果的设计却被无数人追捧为“艺术品”?

  为什么很多国产品牌模仿国际品牌,作品仍然缺乏吸引力?

  笔者认为,很大的原因是因为他们都缺少自己的设计理念。好的设计应该有自己的理念,如QQ概念版的设计理念是“生命力空间感时间感”,所有的设计都应该围绕理念进行,所有的模仿都应该建立在理念基础上,这是设计的灵魂。苹果的理念是简约质感;Google是技术派,看似简单却有对用户行为深刻的理解;索爱手机的UI追求精致时尚;韩系品牌大都走柔和可爱风。好的品牌都有自己的独有风格和深入理解,不管如何模仿借鉴,精髓仍在。

苹果iPad视觉设计分析

  关键词一:圆角阴影高光

  圆角、阴影、高光广泛应用于苹果产品设计和互联网设计中,这三种元素的加入,可以增加图标的“质感”。

  仔细观察一下IPAD的图标,是否很明显的体现了这三种设计元素?圆角处理,月牙型的高光像从上而下打光,字体上淡灰色的阴影(是为了防止白色字体在白色背景上看不清楚,苹果考虑很细致)。不仅是产品,苹果的LOGO设计都没有脱离这三种元素。

iPad

  我们再看看Google的chrome浏览器,圆角、阴影、高光的效果仍在(图标圆角处理、图标边缘阴影以突出立体感、鼠标移至某一图标时的高光效果)。

chrome浏览器

  关键词二:空间感

  空间感并非一个空泛的概念,而是处处体现在设计中。它的一个典型表现方式,就是打破平面感,用立体与三维方式来展现。空间感的设计一是可以增加炫酷和华丽,二是可以用于凸显重要内容。

  空间感的典型运用之一:苹果cover flow专辑封面展现方式

苹果cover flow专辑封面

  空间感运用于网站设计上,OPPO官网改版时焦点图类似cover flow效果。

OPPO官网改版时焦点图

  有了空间感的思维之后,发现常规的设计可以有非常多的突破!那就是,把每一个界面都想象成一个实实在在的物体,任我们翻转把玩!例如打破常规的图片展示,我们可以把图片翻过来,在背面写备注;使用多点触摸把图片抓到叠在一起;用便签纸的立体形式展示备忘录,随意贴在桌面的任何地方等等。

  关键词三:半透明

  半透明的设计元素是个人的一个偏好,尤其当用于菜单与边框设计时,半透明可增加灵动、深邃和通透感,别有风韵!另外,半透明也可用于当一些菜单弹出,却不想挡住背景,可把菜单设计成半透明的感觉,既美观又不干扰视觉。

植物大战僵尸

  仔细观察一下IPAD的设计,很多地方都用了半透明的元素,包括首先进入时“移动滑块来解锁”的界面边框,以及进入后的主界面边框。

  半透明元素在网站设计中也广泛沿用,比如著名的twitter。

twitter

  另一个用到半透明元素的网站。

半透明元素

  关键词四:拟物化生命力

  提起拟物化,大家首先想到的肯定是IPAD的IBOOKS书本表现方式,如同真书般惟妙惟肖,也赢得了很多用户的口碑。拟物化使用好了,可以增加亲切感,减少数码产品的冰冷感,因为用户对生活中的事物才是最熟悉的。同时,拟物化的使用,往往可以在第一眼打动用户,就是我们俗称的“惊艳”。

iBooks

  微软courier的拟物化,让数码脱离了机器冰冷的感觉。

微软courier的拟物化

  除了IBOOKS之外,三星P3里的小插件,飞舞的蝴蝶、散落花瓣的花朵、饼干人、电灯调节亮度等,其实也是试图通过生活中的事物,来增加用户的好感。

三星P3

  在网站设计中,也不难发现一些生命力的元素,如twitter的小鸟,可爱生动。

twitter

  关键词五:动态效果

  很难想象如果没有动态效果的使用,设计将会变成怎样。动态效果将会让设计更加绚丽、好玩、生动。

  仔细观察一下苹果,我深深被它界面过渡的动态效果所吸引,华丽又不失自然。例如照片删除时唰的回到垃圾桶的效果,还有书本翻页的过渡效果。

过渡效果

  灰常多人都在玩的植物大战僵尸,每种下一棵植物,它都会轻轻摇摆,是不是很可爱呢?这也是一种动态效果。

  我承认喜欢索爱的原因就是因为它的UI符合我的胃口。除了图标设计精致之外,图标周围有动态变幻的小元素,就像跳舞的精灵。

索爱

索爱

  很多网站也用动态效果来表现,如菜单在鼠标移上去时的动作反馈,不仅绚丽动感,也是给用户操作信心。

动态效果

  关键词六:拟物音效

  这里需要再提一下植物大战僵尸,仔细观察这个游戏,会发现它也闪耀着智慧的光芒,从视觉设计的生动感、每个植物与僵尸角色的设计、情节布局的环环相扣、甚至是音效的配合都有很多值得学习的地方。

  植物大战僵尸中大量使用了拟物音效,种植物时与草地摩擦的声音、子弹打到僵尸身上的响声、僵尸来临时的恐怖音效、脑子被吃掉时的哀嚎。拟物音效让这个游戏更加生动,不会苍白平淡。

植物大战僵尸

  再观察一下IPAD,翻阅图书时纸张的摩擦声、翻阅报纸时报纸的摩擦声,这个小细节让我感觉很兴奋。更加认定这个品牌是在用心做产品。

  音效的使用可以让用户更有身临其境的感觉,尤其是模拟真实的音效。

  以上是这几天的不完全观察,IPAD设计值得学习的地方还有很多,例如提示与暗示的巧妙使用、皮套的贴心设计等。笔者认为IPAD作为电脑的补充,是非常成功的一款产品(平板电脑完全替代电脑是不可能的)。至少,苹果在如今传统数码新品类发展的瓶颈时期,开拓了符合人类使用习惯的新思路,单从这点值得很多中国品牌学习。

  来源:读者微薇投稿,原文链接



  除非注明,月光博客文章均为原创,转载请以链接形式标明本文地址

  本文地址:http://www.williamlong.info/archives/2298.html
  • 文章排行:
  • 2.seagull
  • 国内醉心于做某一些的企业太少了。
  • 2010/8/20 21:39:47   支持(12)反对(6) 回复
  • 3.素材天下
  • 太好看了 现在还 没钱买啊 ……
  • 2010/8/20 20:58:58   支持(11)反对(6) 回复
  • 4.协石
  • 感觉它们只是商业成功而已。你就简单地把它们归功于设计。
    asakura20005 于 2010-8-21 9:12:06 回复
    没有设计,单凭商业营销,你认为苹果会有今天的地位?两者都很重要,而苹果两者都做得非常好。
  • 2010/8/21 5:29:25   支持(7)反对(2) 回复
  • 7.微薇
  • 第一次投稿,谢谢月光的肯定,谢谢大家:)
  • 2010/8/22 17:56:12   支持(6)反对(2) 回复
  • 8.coolicer
  • 写得很好,不愧是名博。哈哈。
  • 2010/8/22 10:40:11   支持(10)反对(7) 回复
  • 10.as
  • 文章早前在威锋网看过,昨天还在想呢
  • 2010/8/22 1:43:36   支持(7)反对(5) 回复
  • 11.雷人
  • 都是有钱人买的起ipad,才能谈功能。
  • 2010/8/20 22:02:09   支持(8)反对(7) 回复
  • 12.modest
  • 国内山寨的机子主要是在质量和运用上不行。总感觉是个玩具。其实呢,没用过还真不能评价
  • 2010/8/20 22:59:42   支持(7)反对(6) 回复
  • 13.啊
  • 看着ipad,想着iphone... 几时能来个对4代的点评~
  • 2010/8/21 1:01:13   支持(7)反对(6) 回复
  • 14.骊山居家
  • 几时才能买一个啊!希望网上赚的钱能支持我买一个!
  • 2010/8/21 21:05:31   支持(7)反对(6) 回复
  • 15.双鸭山
  • 一直自己想拥有一部,可是,好贵啊,唉,羡慕别人都在使用着
  • 2010/8/22 8:50:27   支持(5)反对(4) 回复
  • 18.4ssss
  • 倒数第二个图片里是什么网站呢?想去看看哪
  • 2010/8/20 21:51:16   支持(6)反对(6) 回复
  • 21.WingST
  • 作者是个大美女+大才女哦,写得不错,感叹一下~
  • 2010/8/24 8:54:19   支持(8)反对(8) 回复
  • 22.蓝色思想者
  • 这么多效果需要消耗多少电能?

    如果全世界的Windows XP的用户把界面的各种效果都关闭,能节省多少电力?我想是很可观的。

    当然,开不开效果是个人的权利。
    七 于 2010-8-24 13:18:05 回复
    你怎么不说全世界人都不用电脑那得省多少电
  • 2010/8/22 8:51:18   支持(5)反对(6) 回复
  • 24.izhuna
  • 苹果的弄的东西就是好看,不过苹果的产品就是太贵了,奢侈品。
  • 2010/8/20 22:02:42   支持(5)反对(7) 回复
  • 26.CC
  • 作者是个完完全全的设计白痴,分析了一大篇都没说到点子上。
    什么半透明,拟物化,动画,都是扯淡。苹果的HIG已经明确地说“这叫做隐喻!”是隐喻!

    作者有空多看看apple4us和ifanr吧,别人才是专业的苹果用户

    walt 于 2010-8-30 8:47:07 回复
    “隐喻”谁都会说,但什么是隐喻,怎么做到隐喻,这才是文章的中心。你说是我告诉你孝敬父母重要,还是告诉你怎么孝敬父母重要?我也常去apple4us,为有你这种随便骂别人白痴的人感到可耻啊。
  • 2010/8/25 22:12:06   支持(4)反对(6) 回复
  • 27.favorite3rd
  • 咳!来学习学习嘛,不用那么紧张
  • 2010/8/29 16:36:27   支持(7)反对(9) 回复
  • 32.miccoy
  • 那就拜托以上说人家白痴的人,写出一篇不白痴的文章,写出一篇说到点子上的文章来。我们好学习学习。
  • 2010/8/27 17:25:03   支持(4)反对(7) 回复
  • 33.yeeshao
  • 目前设计和用户体验领域的几位小有影响的老师提到过,假若设计和用户体验离开了使用者和情境,就无所谓好坏。苹果的设计一直是存在争议的,上面很多评论中也体现了,可以说是“见仁见智”的。我在我们的产品线中借鉴苹果的设计理念时,99%会被产品经理毙掉,因为“简约质感”的致命弱点是传达的信息密度太小。换句话说,我觉得至少在目前,商务信息领域苹果的设计通常是不受待见的,它更适合在个人领域发挥作用。本篇blog其实并没有过分的倾向性,相对来说还是比较客观的,但,最关键的一点,我觉得,谈设计谈体验,还是说清楚受众和情境比较好,否则就会引起不必要的争论,甚至误导他人
  • 2010/8/25 9:15:24   支持(4)反对(8) 回复
  • 34.素材天下
  • 渴望山寨版快点出来,好歹也比我的破手机好点。。
  • 2010/8/20 23:27:32   支持(3)反对(8) 回复
  • 35.Justin
  • 从最开始twitter没墙时候,恩我就觉得那小鸟非常非常....邪恶阿,总有一种很黄很暴力的感觉.....可能是我太阴暗?
  • 2010/8/21 11:59:08   支持(3)反对(8) 回复
  • 37.ggf
  • 谁写的这篇文章?
    要么是设计的门外汉,要么不是个好的设计师。

    好设计/坏设计(山寨)的分别在于有无圆角高光透明(你列的那些条)??国外多少好ui设计里flat那种怎么算?

    国内做的不好恰恰是因为他们乱用元素造成不统一。看到人家国外好的一个icon就抄过来,一飘眼看见个好的panel也抄。自己脑子就没整个概念,一盘子杂碎。
    拜托,国内民众审美已经很弱了,瞧切了吧唧的儿童读物的那个眼色儿,国内设计师就别再拆台了。
  • 2010/8/25 21:42:35   支持(3)反对(8) 回复

发表评论:

 请勿发送垃圾信息、广告、推广信息或链接,这样的信息将会被直接删除。

订阅博客

  • 订阅我的博客:订阅我的博客
  • 关注新浪微博:关注新浪微博
  • 关注腾讯微博:关注腾讯微博
  • 关注认证空间:关注QQ空间
  • 通过电子邮件订阅
  • 通过QQ邮件订阅

站内搜索

热文排行


月度排行

本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享. 转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议.
This site is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 License.