易捷网络专注企业网站建设
11年企业网站建设经验、响应式网站建设,兼容PC、手机、平板全
终端,给你更佳的浏览体验...

Apple官网的网页设计哲学

来源:网站建设行业资讯网
添加时间:2021-12-08

一、沉浸与交互式体验

每当有新产品发布时,我们都会被它的 Landing page 所吸引。不管是 AirPods Pro 也好,和前段时间发布的 iPad Pro 也一样。

这背后是 Apple 基于 webGL 技术,创造的一种沉浸与交互式产品体验。

1. 连续性

我们在产品介绍页可以看到,苹果使用了大量的滚动 scroll 来体现连续性。

一方面,滚动作为大多数 Web 用户zui自然的操作,学习成本极低。

另一方面,在冗长的页面下,滚动能让产品特性保持更自然的转场衔接。

2. 趣味性

另外,采用了大量的动画式转换(animated transition),即操作时展示的动态效果,以此来增加趣味性。

伴随着丰富的、若隐显现的章节文案,就像电影的旁白一样,娓娓道来。

通过滚动的方式增加交互性,这是明智之举。试想一下,如果只放置已渲染的演示视频,那么用户的操作会受到限制,只能在视频中前进或后退,毫无乐趣可言。

二、言之有序

1. 秩序感

说到言之有序,我们看 iPad 的页面介绍。四款产品,分别是:iPad Pro、iPad Air、iPad、iPad mini。

拍摄角度的秩序感,可谓妙不可言。

iPad Pro 的拍摄角度接近于正侧面。iPad Air 是四分之三侧面。iPad 是正面。iPad mini 是俯视。

如此一来,即显得有序,也不会导致视觉疲劳。

2. 设计语言

其次,官网与 iOS 保持协同的设计语言,给用户呈现了一致的感官体验。

从 iOS 11 开始,苹果就采用了 Large Title 大标题的字体风格。字重也从 Regular + Light 的组合,转向的 Medium + Bold ,以此增强信息传播中的识别力。

HomePod

另外,高斯模糊的标题栏背景、产品的投影等设计语言也保持系统一贯的风格。我们可以很清晰的看到 Web 设计的同步转变。

三、层次

1. 视差

第三是视差带来的层次感。

苹果奉行包豪斯的无装饰和极简的理念。当然,它不是那种附庸的美观及外表的光鲜,而是将复杂难懂的技术以简洁的形式传达给用户。

在信息层次方面,Apple 的编排设计由浅入深,犹如抽丝剥茧。很好的利用了视差滚动,传达图片与文字之间「层」的概念。这种深度感可以增加用户的理解和乐趣。

2. 视觉张力

不仅如此,样式上富有视觉张力。或扩张、或收缩、或吸引、或排斥之感觉,呈现刺激与震撼。举两个例子:

扩张力:整个画面以 A13芯片 为视觉中心点,元素和布局围绕这个视觉中心点向外扩张。采用发散式的视觉引导,视觉张力就出现了,让人感觉巍峨壮观。

排斥力:通过元素的大小对比,可以形成一定强度的视觉排斥力。Pro级摄像头 辅以大特写,传达空间意识。视觉上被其构图、美感触动。

四、高级感

再聊聊苹果的高级感是怎么来的?

1. 视觉降噪

我们都知道,高饱和度的色彩,会影响人的情绪波动。相反,低饱和度的配色,对人眼的刺激较弱,会有一种冷静且克制的高级感。

回过头来看苹果官网的大部分页面,除了产品界面色彩 和 按钮蓝 之外,其他的文字、背景、控件一律采用黑白灰色系,以此营造高级感。

甚至是 iPhone 11 Pro 新出的暗夜绿,也是高级灰中加了一点点绿而已。

换言之,减少使用颜色的数量,降低色彩的饱和度都能削减色彩对人的情绪,起到提升产品高级感的效果。

除此之外,恰当的留白可以更加突出产品内容,让重要的信息更准确的传达。并且能营造出广阔的空间感,让画面得到延伸,呈现一种意境美。

所以我们做设计时应当多做减法,避免无意义的视觉元素堆砌,反而能让你的设计更有高级的气质。

这又印证了现代主义建筑大师密斯·凡德罗的那句话:Less Is More。

2. 配图

当然,只有留白是不够的。既然是做宣传,那么一份高分辨率、精致的配图就显得尤为重要。

苹果官网大部分的产品都是采用实拍+后期修图,而非渲染图。目的就是为了反映真实产品的质感、以及材质光影效果,这一点能看到苹果对于品质的极致追求。

不仅如此,苹果产品圣经《Designed by Apple in California》,以及壁纸同样是由摄影师拍摄完成。有兴趣的同学可以看下面这个幕后制作视频,相当硬核。

3. 苹果式文案

做过英文 Web 的设计师都知道,英文往往比中文更好设计,相同的布局英文出来的效果也更好看。

这不是崇洋媚外,心理学有个词叫做「母语羞涩」。简单来说就是,中文对于我们来说,太常见了会让人产生一种廉价感(实际上是羞涩感)的心理感受。

老外也一样,你可以看到美国企业:苹果、麦当劳、星巴克都是使用图形 Logo,而日本企业不用母语,而是用英文,比如 SONY、TOYOTA、Canon。

回到苹果官网,我们看到一部分文案是英文产品名称,这个不会感觉羞涩。

那中文部分怎么办呢?比较有意思的是,Apple 的本土化团队用了完全不对仗但押韵、奇怪的排比、双关、重复等修辞手法。虽然语感很差,但基本上能明白字面意思。

其实这样做的目的就是为了创造一种陌生感、一种独特的语言风格,来凸品牌气质。举几个例子:

重复:比如说 iPad Pro「你的下一台电脑,何必是电脑。」

双关:比如说 AppleWatch 的「它会时时关心你的心。」

排比:比如说 iMac的「从极速,到神速,任你提速。」

押韵:比如说 配件 的「可重复充电,又可圈可点。」

对比:比如说 iPad mini 的「身量小,能量大。」

4. 仪式感

zui后一点。生活要有仪式感,苹果官网也有仪式感。

网站建设计最新案例赏析:


广州波士特实验室设备网站制作首页设计效果图
广州波士特实验室设备
东莞纳普电子科技网站制作首页设计效果图
东莞纳普电子科技
东莞五源企业形象设计网站制作首页设计效果图
东莞五源企业形象设计
东莞莲泉净水设备网站制作首页设计效果图
东莞莲泉净水设备
广州飞进信息科技网站制作首页设计效果图
广州飞进信息科技
上海傲秀展览展示网站制作首页设计效果图
上海傲秀展览展示
河南赛唯家具网站制作首页设计效果图
河南赛唯家具
深圳捷益达电子网站制作首页设计效果图
深圳捷益达电子
深圳华测实验室技术网站制作首页设计效果图
深圳华测实验室技术
西安天星塔钟工程网站制作首页设计效果图
西安天星塔钟工程
 

网站建设行业资讯推荐阅读:


b2c网站制作公司建设流程有哪些b2c网站分为哪些类型如何让网站代码产生更好的优化效果企业网站建设外链注意事项企业建立独立商城网站有哪些优势建网站在哪些选择上会疑问网站设计中怎么做好搜索引擎排名手机网站制作外包费用大概要多少深圳福田网站制作哪家好,网站怎么建设才能吸引客户网站建设中有哪些你必须要注意的深圳网站设计的重要性-做好以下几点可以让你的企业网站转化率直线攀升!网站建设基础SEO网站关键词优化五个关键!网站常见的攻击方式和防护方法制作一个网站的页面布局品牌网站建设需要注意哪些事项如何选择靠谱的网站建设公司广州网站建设公司说说手机网站设计的问题响应式网站建设的优势有哪些深圳建设一个网站要多少钱商家如何入驻百度小程序深圳福田网站设计哪家专业,中小企业网站设计要注意哪些网站主题应如何定位网站建设无难事,小技巧来助攻做网站建设的价格受什么因素影响关于网站建设怎么做的详解网站建设前需要思考的方面企业打造超级IP商业表达逻辑是什么-深圳网站设计分享品牌网站建设:如何让网站更加美观呢DEDECMS迁移修改data目录移动网站建设必备的基本常识易捷网站建设公司讲述新网站优化的11步个性化的网站页面制作技巧浅析在网页设计中如何让按钮激发用户点击欲望有哪些网站建设的规则是你需要知道的深圳市人行金银礼品店企业官方网站建设的要素网页设计能给用户体验带来哪些影响什么是W3C验证对于自媒体而言,微信公众号的价值在哪里深圳网站建设可用性形式的表单百度网站排名变化的因素营销型网站建设趋势企业营销型网站建设应遵循8个原则专业企业网站是怎样开发的浅谈搜索引擎什么时候才能识别视频与音频文件做个旅行社网站大概要多少钱解析自媒体容易走入的三个误区深圳网站建设常用的数据库有哪些网站建设和移动应用领域互动设计的先驱者移动端网站建设和PC端网站建设要如何区别对待电商平台具备的鲜明特征有什么深圳网站建设之如何建设一个营销型网站自定义菜单接口向未认证订阅号开放网站开发该选择哪种编程语言手机网页应该怎么设计网站建设价格因素虽然关键,这些您更应该看看深圳网站制作推广,网站站内优化有哪些内容和站外优化的区别是什么手机网站如何增加客户体验度和提高运维可行性iis7.5500-内部服务器错误还在为12306验证码烦恼吗搜狗搜索来帮你!手机网站和微信网站有什么差别
企业网站建设行业信息服务发布平台!
(www.fantodo.com)版权所有
QQ在线咨询