前言：说起Apple的官网，即使没有使用苹果的电子产品，我想很多设计师也进去了解过，他们不一定是去买产品，而是去找设计灵感！Apple的官网估计有不少网站已经在模仿，然而它的设计精髓真的那么容易复制吗？来看看今天为你分享的文章：一探Apple官网的网页设计哲学，看看它到底有何魅力！
Apple 致力于让每件产品都赏心悦目，与其说官网是产品展示平台，倒不如说它是苹果产品分支的延续。
我相信，从 Apple.com 找设计灵感是每一位设计师都做过的事。那它到底有何魅力？跟我来一探究竟吧。
一、沉浸与交互式体验
每当有新产品发布时，我们都会被它的 Landing page 所吸引。不管是 AirPods Pro 也好，和前段时间发布的 iPad Pro 也一样。
这背后是 Apple 基于 webGL 技术，创造的一种沉浸与交互式产品体验。
1. 连续性
我们在产品介绍页可以看到，苹果使用了大量的滚动 scroll 来体现连续性。
一方面，滚动作为大多数 Web 用户最自然的操作，学习成本极低。
另一方面，在冗长的页面下，滚动能让产品特性保持更自然的转场衔接。
iPad Pro 的连续性
2. 趣味性
另外，采用了大量的动画式转换（animated transition），即操作时展示的动态效果，以此来增加趣味性。
伴随着丰富的、若隐显现的章节文案，就像电影的旁白一样，娓娓道来。
通过滚动的方式增加交互性，这是明智之举。试想一下，如果只放置已渲染的演示视频，那么用户的操作会受到限制，只能在视频中前进或后退，毫无乐趣可言。
AirPods 的趣味性
二、言之有序
1. 秩序感
说到言之有序，我们看 iPad 的页面介绍。四款产品，分别是：iPad Pro、iPad Air、iPad、iPad mini。
拍摄角度的秩序感，可谓妙不可言。
iPad 的秩序感
iPad Pro 的拍摄角度接近于正侧面。
iPad Air 是四分之三侧面。
iPad 是正面。
iPad mini 是俯视。
如此一来，即显得有序，也不会导致视觉疲劳。
2. 设计语言
其次，官网与 iOS 保持协同的设计语言，给用户呈现了一致的感官体验。
从 iOS 11 开始，苹果就采用了 Large Title 大标题的字体风格。字重也从 Regular Light 的组合，转向的 Medium Bold ，以此增强信息传播中的识别力。
HomePod
另外，高斯模糊的标题栏背景、产品的投影等设计语言也保持系统一贯的风格。我们可以很清晰的看到 Web 设计的同步转变。
三、层次
1. 视差
第三是视差带来的层次感。
苹果奉行包豪斯的无装饰和极简的理念。当然，它不是那种附庸的美观及外表的光鲜，而是将复杂难懂的技术以简洁的形式传达给用户。
Mac Pro 视差滚动
在信息层次方面，Apple 的编排设计由浅入深，犹如抽丝剥茧。很好的利用了视差滚动，传达图片与文字之间「层」的概念。这种深度感可以增加用户的理解和乐趣。
2. 视觉张力
不仅如此，样式上富有视觉张力。或扩张、或收缩、或吸引、或排斥之感觉，呈现刺激与震撼。举两个例子：
A13芯片的扩张力
扩张力：整个画面以 A13芯片 为视觉中心点，元素和布局围绕这个视觉中心点向外扩张。采用发散式的视觉引导，视觉张力就出现了，让人感觉巍峨壮观。
Pro级摄像头的排斥力
排斥力：通过元素的大小对比，可以形成一定强度的视觉排斥力。Pro级摄像头 辅以大特写，传达空间意识。视觉上被其构图、美感触动。
四、高级感
再聊聊苹果的高级感是怎么来的？
1. 视觉降噪
我们都知道，高饱和度的色彩，会影响人的情绪波动。相反，低饱和度的配色，对人眼的刺激较弱，会有一种冷静且克制的高级感。
iMac Pro 高级感
回过头来看苹果官网的大部分页面，除了产品界面色彩 和 按钮蓝 之外，其他的文字、背景、控件一律采用黑白灰色系，以此营造高级感。
甚至是 iPhone 11 Pro 新出的暗夜绿，也是高级灰中加了一点点绿而已。
换言之，减少使用颜色的数量，降低色彩的饱和度都能削减色彩对人的情绪，起到提升产品高级感的效果。
iPad 留白
除此之外，恰当的留白可以更加突出产品内容，让重要的信息更准确的传达。并且能营造出广阔的空间感，让画面得到延伸，呈现一种意境美。
所以我们做设计时应当多做减法，避免无意义的视觉元素堆砌，反而能让你的设计更有高级的气质。
这又印证了现代主义建筑大师密斯·凡德罗的那句话：Less Is More。
2. 配图
当然，只有留白是不够的。既然是做宣传，那么一份高分辨率、精致的配图就显得尤为重要。
苹果官网大部分的产品都是采用实拍 后期修图，而非渲染图。目的就是为了反映真实产品的质感、以及材质光影效果，这一点能看到苹果对于品质的极致追求。
Designed by Apple in California
不仅如此，苹果产品圣经《Designed by Apple in California》，以及壁纸同样是由摄影师拍摄完成。有兴趣的同学可以看下面这个幕后制作视频，相当硬核。
点击查看视频：苹果壁纸制作幕后
3. 苹果式文案
做过英文 Web 的设计师都知道，英文往往比中文更好设计，相同的布局英文出来的效果也更好看。
这不是崇洋媚外，心理学有个词叫做「母语羞涩」。简单来说就是，中文对于我们来说，太常见了会让人产生一种廉价感（实际上是羞涩感）的心理感受。
老外也一样，你可以看到美国企业：苹果、麦当劳、星巴克都是使用图形 Logo，而日本企业不用母语，而是用英文，比如 SONY、TOYOTA、Canon。
你的下一台电脑，何必是电脑。
回到苹果官网，我们看到一部分文案是英文产品名称，这个不会感觉羞涩。
那中文部分怎么办呢？比较有意思的是，Apple 的本土化团队用了完全不对仗但押韵、奇怪的排比、双关、重复等修辞手法。虽然语感很差，但基本上能明白字面意思。
其实这样做的目的就是为了创造一种陌生感、一种独特的语言风格，来凸品牌气质。举几个例子：
重复：比如说 iPad Pro「你的下一台电脑，何必是电脑。」
双关：比如说 AppleWatch 的「它会时时关心你的心。」
排比：比如说 iMac的「从极速，到神速，任你提速。」
押韵：比如说 配件 的「可重复充电，又可圈可点。」
对比：比如说 iPad mini 的「身量小，能量大。」
4. 仪式感
最后一点。生活要有仪式感，苹果官网也有仪式感。
国际妇女节专题
在一些特殊的日子里，例如三八节当天，友商选择打广告促销。而苹果推出了国际妇女节专题，致敬女性的伟大，这一做法颇具人文情怀。
不过话又说回来，感动归感动，还是参与友商的打折活动香。
结语：每一个优秀的设计都离不开设计师们辛勤的努力，他们用独特创意为我们呈现了一幅幅视觉的盛宴。看完这篇文章你有没有受到启发和感染呢？想必我们都会努力在以后的自我创作的过程中创作出更好的作品。
内容出处：，
声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/surface/10043.html
微信扫一扫
支付宝扫一扫
相关推荐
-
前端开发之网页设计Sketch插件
在前端开发中，一个好的设计师的设计稿对于我们在前端开发中会减少很多琐事，一以下推荐几款Sketch 插件 都是为网页设计师所准备，覆盖了不同的设计和开发需求。希望对你们有所帮助！！…
-
用DW8制作网页中常用的过渡效果
光标在代码窗口的最上一行的最前边，是合适的位置之一，对于不熟悉代码者来说，这样简单、易操作。但有些网页刚打开时光标也不在代码窗口的最上一行的最前边，那要通过边框的滚动条找到代码的第一行，然后在最前边点击鼠标，把光标定位在代码窗口的最上一行的最前边。
-
网站交互设计的Web端表单项目需求分析
一、项目背景1.1 背景 CRM 用户在使用「客户」轻应用的时候，反映我们预设给他们的表单字段不能满足他们的需求。比如，一些用户希望能录入客户的传真号码，而我们没有提供此字段。 …
-
网站制作中用于打印的页面设计
在网站的一些应用中需要提供用户直接打印页面的功能，最明显的就是电子优惠券，商家根据网站提供的模板输入内容，然后生成优惠券页面，用户打印这个页面即是优惠券。当然最优的做法是根据这个页面生成一个图片文件，用户下载这个图片再去打印，打印的效果就不会受浏览器的设置而受影响打印出来的效果。
-
每个设计师都应该掌握的10大配色技巧
配色这件事怎么聊都聊不完，不是么?选对色彩，是每个设计师的基本功，说来简单，但是千变万化，看似复杂，然则有迹可循。似乎每个设计项目在配色上，都多少会有些争议，团队讨论的时候谁都可以…
-
全球网站设计师博客精彩赏析
在全球互联网上有上百万的博客，所以如何让你的博客设计得独特就成了一个巨大的挑战。每个设计师都试图使他的网站设计与别人的不同，希望它是唯一的。这一方面取决于博客内容，另一方也许是更重要的是，他们需要独特的足以吸引游客的博客设计。做视觉的应该都知道著名的deviantart，它是全球优秀视觉设计师聚集的社区，上面也有丰盛的设计资源。
-
移动端网站页面开发注意事项
了解移动端页面与PC端页面开发的区别，学习移动端页面的开发流程。 移动端与PC端页面布局区别 视口 视口是移动设备上用来显示网页的区域，一般会比移动设备可视区域大，宽度可能是980…
-
电商网站购物车是否应该前置登录流程的思考
本文讲的是在电商网站购物流程中，用户将商品加入购物车时是否需要登录的一点思考。利用自己一点浅薄的电商产品经验，对电商产品设计中的一些内容与模块进行思考总结与输出。 互联网产品设计原…
-
正确认识网页的视觉设计
视觉设计，冒似很艺术，跟艺术相关的职业，给大多数人的印象是做美化工作的，他们比其他人更懂得搭配颜色，PS图片等等诸如花匠般的工作。把它归结为美化，单就这个形容词看来自然变得不那么重要，在很多时候，被认为是个不重要的职能。
-
10个屌炸天的设计网址导航带你嗨翻科技设计界
今天，小编为你精选了10个屌炸天的典藏版设计网址导航，每个导航里面都包含上百个无敌的超炫酷站！包含着前端技术、界面设计、酷站图库、神器推荐、字库资源、设计工具、配色方案、网站模板、…
