Apple 网站历年设计

Web前端54.1K阅读模式

Apple 网站历年设计-图片1

我从来都认为参巧是学习设计其中一个最有效的方式,故推出“优秀设计赏系列”,把我从各大网站学到的小事情记录下来,与大家分享。

Apple.com 在本年年中时,WWDC 2007 其间进行了改版。 这次改版是 Apple 在近 10 年少有的一次大改版,甚至可说是唯一一次风格上的改版。 让我们回顾一下 Apple.com 的首页这十年间 (1997 ~ 2007) 的数次网站改版,并从中了解一下 Apple Designer 的设计哲学。

Apple 网站历年设计-图片2

1997 年 Apple.com 首次上线。当年的网页设计平庸,无可圈点之处。但一年之后的改版,也是 Steven Jobs 回归 Apple 之后的一年,Apple 对网站进行大改。 这次改版在风格上完全自成一格,并首次采用了 Tabs 形式的目录。 Apple.com 沿用这种版式和风格了近十年,直接今年的改版方有较大改变。

Apple 网站历年设计-图片3

2000 年时苹果推出了 “ i ” 战略,网站亦随之改版 (见上图)。 代表 “回到首页” 的苹果改成红色,呵呵。 其实用 Logo 代替 “回到首页” 字样的设计在网络上也实属少见,只能说 Apple 的 Logo 深入民心,推广有度。 Headlines 和 Search button 的 Style 亦改变了。 网站的 Design 和 Style 这时渐渐定形,不过谁也没想过这个设计会一用就十年。这是个好习惯,因为每次更改 Design Style 都代表用户需要重新习惯和学习一次,更改太频繁也会令用户无所适从。

另外,留意一下目录上的 iReview 被删掉了。 iReview 是一个搜寻项目,在 2001 年三月砍掉。 而 iTools 是 iLife 和 iWork 的前身。 iCards 好像还存在,不过已经被边缘化了。

Apple 网站历年设计-图片4

2002 年的小改版。 虽说版面没有大改,但风格上还是有不少改变的。 你会觉得网站的设计感觉会比旧版清爽。 为什么呢? 细节! 让我把细节放大给大家看看吧。 下面这个是旧版的目录设计:

Apple 网站历年设计-图片5

请细心留意旧设计的高光的大小﹑背景的渐变和文字的阴形。 和新版的目录设计相比:

Apple 网站历年设计-图片6

新版的渐变大小更大了,渐变色也浅色了。文字的阴形也被删去。所以看上去感觉清新了。这种设计风格一用用了 6 年,没有任何改变,直至今年 6 月的改版。

除了设计风格上的改变,不得不提的是内容架构的改变。 Apple 网站目录上的项目会因时势而经常改变。 例如上图的 Swith 之后便被 iPod 所取代。可见 Apple 是把目录当成它的 “广告板” 。把流量导入到重点推广的项目中,真是一个聪明的做法。 但这个做法也有不少缺点。传统来说,目录应该放同一个性质的东西。 如果目录放了 iPod ,你就应该把 iPhone﹑ iMac﹑ iBook 都放上去。 但苹果的做法是,只放重点推广的项目,例如这时期 Switch 重要,就放 Switch 上去,把 iBook 踢下来。这样会令旧用户大为困扰: 我的 iBook 呢? 这时他们只能到 Store 中去找了。而且 Store 既然包含了 iPod,为什么又要把 iPod 放到主目录上? 两者有分别吗? Apple 除了把目录当成广告板外,它也以同一种方法对待 Apple.com 的首页。这种大胆的做法,有得有失,各位读者要自行判断了。

Apple 网站历年设计-图片7

上图是最新 (2007年) 的设计,直至今年,网站的整体风格方有较大改变。 网站不再使用以往的 Tabs 式目录,也不再用以往那种带有“胶”质感的设计,改而代之的是一条带有钢铁质感的目录条。 这种风格刚好配合几个月之后推出的 “钢之 iMac” 的风格。 另外,目条有另一个好处,就是网站内页的设计风格和颜色都可以有较多自由。见下图:

Apple 网站历年设计-图片8
“钢之 iMac” 介绍页面

你会发觉内页设计的自由是如此之大,大到足以由黑底白字变成白底黑字。这完全受惠于以灰色 - 百搭色作配色的目录条。

本站文章大部分始于原创,用于个人学习记录,可能对您有所帮助,仅供参考!

weinxin
我的微信
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
 
知更鸟
评论  5  访客  3  作者  2
    • 爱新奇 - 爱新鲜设计 爱奇特创意
      爱新奇 - 爱新鲜设计 爱奇特创意 4

      其实早期的苹果网站也不怎么样
      看不出尖端设计的影子

      • 小屁人
        小屁人 6

        设计是一个、代码也是很重要的!

          • 知更鸟
            知更鸟

            @ 小屁人 设计是关键,苹果网站没什么代码,基本是一个静态页面

          • svcoo
            svcoo 4

            感觉简单就是美

          匿名

          发表评论

          匿名网友
          :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

          拖动滑块以完成验证