苹果网页设计思路 第1篇
第三是视差带来的层次感。
苹果奉行包豪斯的无装饰和极简的理念。当然，它不是那种附庸的美观及外表的光鲜，而是将复杂难懂的技术以简洁的形式传达给用户。
Mac Pro 视差滚动
在信息层次方面，Apple 的编排设计由浅入深，犹如抽丝剥茧。很好的利用了视差滚动，传达图片与文字之间「层」的概念。这种深度感可以增加用户的理解和乐趣。
苹果网页设计思路 第2篇
其次，官网与 iOS 保持协同的设计语言，给用户呈现了一致的感官体验。
从 iOS 11 开始，苹果就采用了 Large Title 大标题的字体风格。字重也从 Regular + Light 的组合，转向的 Medium + Bold ，以此增强信息传播中的识别力。
HomePod
另外，高斯模糊的标题栏背景、产品的投影等设计语言也保持系统一贯的风格。我们可以很清晰的看到 Web 设计的同步转变。
苹果网页设计思路 第3篇
▲苹果的官网因为经常更新产品，所以为了保证产品上新的灵活性，采用比较简单的上图下文的布局，这样的布局好处是当你发布新产品时候能快速响应。
▲苹果产品页面的布局分割非常清晰，模块感非常强，要么通过色彩进行分割，要么通过大的留白来区分产品。
▲基本不会出现非常复杂的布局，都是采用上图下文，或者左图右文，右图左文的方式。
苹果网页设计思路 第4篇
我们都知道，高饱和度的色彩，会影响人的情绪波动。相反，低饱和度的配色，对人眼的刺激较弱，会有一种冷静且克制的高级感。
iMac Pro 高级感
回过头来看苹果官网的大部分页面，除了产品界面色彩 和 按钮蓝 之外，其他的文字、背景、控件一律采用黑白灰色系，以此营造高级感。
甚至是 iPhone 11 Pro 新出的暗夜绿，也是高级灰中加了一点点绿而已。
换言之，减少使用颜色的数量，降低色彩的饱和度都能削减色彩对人的情绪，起到提升产品高级感的效果。
iPad 留白
除此之外，恰当的留白可以更加突出产品内容，让重要的信息更准确的传达。并且能营造出广阔的空间感，让画面得到延伸，呈现一种意境美。
所以我们做设计时应当多做减法，避免无意义的视觉元素堆砌，反而能让你的设计更有高级的气质。
这又印证了现代主义建筑大师密斯·凡德罗的那句话：Less Is More。
苹果网页设计思路 第5篇
▲PC和手机不同，屏幕足够的大，因此你可以选择非常高清有调性的图片来烘托你的产品。清晰的图片能让你感觉到整个产品的质感，给人留下非常强的印象。
▲清晰到人物脸上一个斑点，手上的一个细纹，都很好的展示在你面前，这种高清的大图为产品增添了很多光彩，体现了屏幕的高分辨率。
▲苹果的图片选择，非常强调环境和人物状态，需要体现出苹果对自然环保意识，体现出苹果的价值观，科技让人们生活更加美好。
▲同时还会关爱残疾人士，会考虑这些用户的使用感受，这样的设计让我印象非常深刻。
▲苹果的产品照片不仅很漂亮，很清晰，同时使用场景明确，比如这个视频。为了凸显拍摄和剪辑很高清，支持4K 视频。以及超广角摄像头取景范围。
▲这个照片则是凸显苹果的全新超广角摄像头，你可以捕捉一望无际的壮丽风景，也可以在和全家人外出度假时，拍张一家老小和所在美景同框的全家福
▲在人物的选择上，苹果很好的诠释了苹果的基调。同时如果文字放在图片上，苹果会处理图片四周的环境，使得中心的位置更清晰。将用户的视觉注意力引导到文字上面。
▲并且照片和文字很好的融为一体，比如上图，将背景虚化处理，只把人物的脸变的更清晰。很好的和文字「人像，好上相」融为了一体。
▲同时苹果的照片会考虑不同肤色人群，模特的选择会考虑全球各个地区的特点。确保符合当地情况的同时，也都是充满了活力和朝气的。
苹果网页设计思路 第6篇
▲在苹果WWDC的页面设计中，每当你刷新这个页面展示的emoji表情都会不一样。
▲包括电脑后面的贴纸都会有变化，苹果将这种设计细节运用到了很多产品设计，比如iPhone上的时钟会动态变化。日期也会变化等等。
▲还有动态的效果，比如air发布时候的海报设计，动态的LOGO以及苹果pencil的笔触效果，这些感动的细节，都体现着苹果对于设计的追求。
▲包括每次发布会的海报，都隐藏着苹果发布产品的几大奥秘，比如这个海报，有媒体说代表着苹果会发布4款iPhone,屏幕一个比一个大
▲9月15的发布会海报，通过这种动态的LOGO推出了新款的iPad,产品和海报隐喻的非常到位
苹果的历届发布会，都是很花心思在设计里面，巧妙的将创意和产品进行结合。
苹果网页设计思路 第7篇
另外，采用了大量的动画式转换（animated transition），即操作时展示的动态效果，以此来增加趣味性。
伴随着丰富的、若隐显现的章节文案，就像电影的旁白一样，娓娓道来。
通过滚动的方式增加交互性，这是明智之举。试想一下，如果只放置已渲染的演示视频，那么用户的操作会受到限制，只能在视频中前进或后退，毫无乐趣可言。
AirPods 的趣味性
苹果网页设计思路 第8篇
最后一点。生活要有仪式感，苹果官网也有仪式感。
国际妇女节专题
在一些特殊的日子里，例如三八节当天，友商选择打广告促销。而苹果推出了国际妇女节专题，致敬女性的伟大，这一做法颇具人文情怀。
不过话又说回来，感动归感动，还是参与友商的打折活动香。
结语：每一个优秀的设计都离不开设计师们辛勤的努力，他们用独特创意为我们呈现了一幅幅视觉的盛宴。看完这篇文章你有没有受到启发和感染呢？想必我们都会努力在以后的自我创作的过程中创作出更好的作品。
苹果网页设计思路 第9篇
说到言之有序，我们看 iPad 的页面介绍。四款产品，分别是：iPad Pro、iPad Air、iPad、iPad mini。
拍摄角度的秩序感，可谓妙不可言。
iPad 的秩序感
iPad Pro 的拍摄角度接近于正侧面。
iPad Air 是四分之三侧面。
iPad 是正面。
iPad mini 是俯视。
如此一来，即显得有序，也不会导致视觉疲劳。
苹果网页设计思路 第10篇
▲苹果的产品介绍，因为有大量的文字，很容易让用户忽略掉重点信息，所以苹果在设计时候，经常使用可视化表达方式，将重点的信息通过图形，或者信息可视化图标，让用户更好的感知到产品关键参数。
▲同时苹果会使用比较字重粗切大的字体，这样信息对比会更加强烈。
▲同时很多页面会采用这种图表，对比的方式去排版，这种大胆的设计也让用户更好的与旧产品进行对比，更好做设计决策。
▲这种可视化的设计，让页面展示清晰的同时，也能增加用户购买的转化。
▲同时图形化的表达，也比文字能更好的传递内容信息本身。再结合苹果的高质量产品图片，你会觉得整个产品充满了魅力。
苹果在官网的投资资源是巨大的，苹果官网也是全世界最大的电商网站。他的访问速度和效果也是全世界最流畅的，即使是这么多国家的支持，他们也可以做到千人千面精细化的管理；可以说是互联网「网页教科书」的存在。如果你也做网页，没有灵感一定要多去刷刷苹果的网站。
原文来自微信公众号：Sky
苹果网页设计思路 第11篇
当然，只有留白是不够的。既然是做宣传，那么一份高分辨率、精致的配图就显得尤为重要。
苹果官网大部分的产品都是采用实拍+后期修图，而非渲染图。目的就是为了反映真实产品的质感、以及材质光影效果，这一点能看到苹果对于品质的极致追求。
Designed by Apple in California
不仅如此，苹果产品圣经《Designed by Apple in California》，以及壁纸同样是由摄影师拍摄完成。有兴趣的同学可以看下面这个幕后制作视频，相当硬核。
苹果网页设计思路 第12篇
做过英文 Web 的设计师都知道，英文往往比中文更好设计，相同的布局英文出来的效果也更好看。
这不是崇洋媚外，心理学有个词叫做「母语羞涩」。简单来说就是，中文对于我们来说，太常见了会让人产生一种廉价感（实际上是羞涩感）的心理感受。
老外也一样，你可以看到美国企业：苹果、麦当劳、星巴克都是使用图形 Logo，而日本企业不用母语，而是用英文，比如 SONY、TOYOTA、Canon。
你的下一台电脑，何必是电脑。
回到苹果官网，我们看到一部分文案是英文产品名称，这个不会感觉羞涩。
那中文部分怎么办呢？比较有意思的是，Apple 的本土化团队用了完全不对仗但押韵、奇怪的排比、双关、重复等修辞手法。虽然语感很差，但基本上能明白字面意思。
其实这样做的目的就是为了创造一种陌生感、一种独特的语言风格，来凸品牌气质。举几个例子：
重复：比如说 iPad Pro「你的下一台电脑，何必是电脑。」
双关：比如说 AppleWatch 的「它会时时关心你的心。」
排比：比如说 iMac的「从极速，到神速，任你提速。」
押韵：比如说 配件 的「可重复充电，又可圈可点。」
对比：比如说 iPad mini 的「身量小，能量大。」