Apple 的設計哲學 · 網頁篇

2021-01-19 互動設計學堂

昨天的彩蛋答案在今天第二篇推文中,不要錯過哦~

下面是今天的設計小思考。


設計小思考

APP使用第三方社交帳號登錄時,不同的登錄方式用戶數據往往並不互通,所以可能會出現登錄後發現不是預期的帳號,再退出重登的狀況。

為了消除用戶「我以前是用什麼登錄的」這樣的困惑,你準備如何設計呢?

我們明天會在推文中解答,如果你有好的解決方案也可以留言告訴我們哦~


當然,你也可以現在就得到答案!

那就是在「挖藕」星球(下載知識星球APP,搜索「挖藕」進入)中搜索「第三方登錄」就可以得到更為巧妙的設計方案。「挖藕」裡全都是這種巧妙的設計方案。



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. 視差

第三是視差帶來的層次感。
蘋果奉行包浩斯的無裝飾和極簡的理念。當然,它不是那種附庸的美觀及外表的光鮮,而是將複雜難懂的技術以簡潔的形式傳達給用戶。

在信息層次方面,Apple 的編排設計由淺入深,猶如抽絲剝繭。很好的利用了視差滾動,傳達圖片與文字之間「層」的概念。這種深度感可以增加用戶的理解和樂趣。


2. 視覺張力

不僅如此,樣式上富有視覺張力。或擴張、或收縮、或吸引、或排斥之感覺,呈現刺激與震撼。舉兩個例子:


A13晶片的擴張力


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 的本土化團隊用了完全不對仗但押韻、奇怪的排比、雙關、重複等修辭手法。雖然語感很差,但基本上能明白字面意思。

其實這樣做的目的就是為了創造一種陌生感、一種獨特的語言風格,來凸品牌氣質。舉幾個例子:


4. 儀式感

最後一點。生活要有儀式感,蘋果官網也有儀式感。

國際婦女節專題

在一些特殊的日子裡,例如三八節當天,友商選擇打廣告促銷。而蘋果推出了國際婦女節專題,致敬女性的偉大,這一做法頗具人文情懷。
不過話又說回來,感動歸感動,還是參與友商的打折活動香。

本文首發自公眾號:洋爺(ID:yangye365)

感謝閱讀!


看完文章,你還沒想到彩蛋中的答案,那還是不要想了,乖乖的來知識星球APP的「挖藕」吧。在挖藕搜「第三方登錄」就可以得到更為巧妙的設計方案。

注意:是知識星球APP的「挖藕」星球,挖藕不是APP哦!

相關焦點

  • Apple 的設計哲學 · 聲音篇
    在《Apple 的設計哲學 · 交互篇》和《Apple 的設計哲學 · UI 篇》中,我們談到了 Apple 在交互、UI 層面雕刻細節,創造出一系列禮遇般的產品體驗
  • 網頁版Apple Music已經完成測試 可以直接在網頁瀏覽器中播放音樂
    4月17日消息,網頁版Apple Music已經完成測試,現在可以通過 music.apple.com 進行訪問,訪問之前的beta.music.apple.com地址會自動轉到新的music.apple.com地址。
  • 完成測試,網頁版蘋果 Apple Music 正式推出!
    IT之家4月17日消息 去年9月,蘋果公司推出了網頁版的Apple Music,為用戶提供了類似於Mac版Apple Music應用的體驗。從今天起,網頁版Apple Music已經完成測試,現在可以通過 music.apple.com 進行訪問,訪問之前的beta.music.apple.com地址會自動轉到新的music.apple.com地址。使用你的Apple ID登錄到網頁版Apple Music,會自動同步 Apple Music 訂閱。
  • 一盤大棋,Apple Music網頁和安卓客戶端體驗
    另外一方面,只靠蘋果設備卻也是遠遠不足的,所以蘋果也就有了Apple Music網頁版,甚至試用網頁版的過程中,趴趴還發現蘋果竟然開發了Apple Music安卓應用...不得不感慨一句,蘋果你真的變了...
  • Apple美區帳號註冊
    電腦網頁註冊國區ID,填好支付方式(無)手機登錄註冊好的ID,成功下載一個App電腦打開Apple ID網頁,編輯付款方式,切換國家為美國手機登錄成功切換地區的ID,成功下載一個App以上即為操作流程,有很多注意事項小文在接下來的圖文教程給大家說明
  • 2020-2021網頁動畫設計流行趨勢,學會就能霸屏
    網頁動畫設計早已不是什麼新鮮事,作為基礎的互動設計效果,它在網頁設計中的地位越發重要。於是,在這篇文章裡,我們將討論一下近兩年網頁動畫設計的流行趨勢。動畫往往更能激發情緒,它是用戶品味你網站設計的必要調料。
  • Apple Watch Series 7直角邊設計欣賞
    2018 款 iPad Pro 採用全新的直角邊設計,今年發布的 iPhone 12 系列也是這種設計語言,那麼 Apple Watch 呢?設計師  Wilson Nicklaus 分享了幾張 Apple Watch Series 7 的概念設計,採用的就是類似 iPhone 12 的直角邊設計。
  • 網頁設計中的滾動
    網頁設計中的滾動,滾動似乎是網站的一個非常基本的功能。儘管網站具有基本功能,但您網站上的滾動既可以使用戶受益,也可以吸引用戶,從而將他們推向競爭對手的網站。網頁設計複雜性要求簡單網站比以往任何時候都更加健壯和內容豐富,因此網頁設計師們構想出了一種新的方法,可以在不使用戶淹沒的情況下用信息填充屏幕
  • 如何創建網頁設計風格指南?
    如果您的網站需要經常更新,或者很多人都需要維護或更新,那麼最好使用網頁設計風格指南。這有助於確保與您的網站打交道的每個人都在同一標準下,並了解如何使所有內容保持一致。但是,到底什麼是網頁設計風格指南?這意味著什麼?以及如何為自己創建一個?這些是我們旨在在此處回答的問題。什麼是網頁設計風格指南?
  • 臺灣網站設計案例賞析:怎麼設計美觀網頁
    雖然網站設計的風格千差萬別,但同一文化地區的網站設計有趨同趨勢。但趨同不是完全相同,一些臺灣地區企業網站,其設計風格和大陸略有不同,但也有很多值得參考的地方。下面就從幾個臺灣網站設計案例來給大家分析一下,怎麼做好臺灣網站建設。
  • Apple官方iPhone套絕配 超美Apple桌布
    雖然Apple最近推出的iPhone智能電池殼被所有人指責醜陋,但原版Apple官方外殼卻是簡約又漂亮的設計,尤其是皮套就更加能令iPhone增色不少。  如果你也是用Apple iPhone皮套,這一系列桌布就能配合成為一個完整的設計。有外殼的幾種顏色,上面還有細緻的皮紋。
  • 網頁設計要求設計中的色彩理論
    顏色是設計的基本要素之一。 無論設計是用於促銷,品牌推廣,營銷,照舊僅僅彌補空白 - 選擇精確的顏色是吸引合適受眾的關鍵。顏色理解取決於很多事物,並且活著界上幾乎每個國家都有不同的詮釋,由於來自不同文化的人將不同的情感與顏色聯繫起來。
  • 【圖文】寶應縣網頁設計諮詢電話
    寶應縣網頁設計諮詢電話3、購買網站主機主機對網站的影響是非常大的,現在市場上有很多雲伺服器和虛擬主機,一定要選擇口碑好的產品。網站主機有進口的也有國內的,進口的主機使用效果更好,但是價格會比較貴,大家可以根據實際選擇。4、網站製作網站製作有兩種方法,你可以找模板來建站,也可以用網站建設系統來建站。但是一定不要選擇廉價的質量不好的建站系統,否則製作出來的網站可能會存在比較多的問題。
  • 使網頁設計更加現代化的10種方法
    因此,網頁設計必須成為網站管理計劃的動態組成部分,以確保您始終了解有效的方法和無效的方法。網頁設計的結構方式可以幫助您講故事,出售產品和/或甚至結識訪問者。這完全取決於您在網頁設計中使用的元素,而使用過時的方法將無濟於事。因此您需要確保您的網頁設計保持最新。為了幫助您,本期網頁製作機構Angle匯總了十大方法來使您的網頁設計更加現代化。
  • 詳細介紹:你都知道哪些網頁設計風格?
    網頁設計是根據企業希望向瀏覽者傳遞信息(包括產品、服務、理念、文化),進行網站功能策劃,然後進行頁面設計美化工作,所以說網頁是企業對外地窗口,而對於這樣地宣傳載體,網頁設計風格是非常重要地。下面詳細介紹下網頁設計風格。
  • 劉亮週:設計是解決問題的哲學
    30餘載沉澱的設計,是他對生活哲學最好的詮釋。 而是因人而異的個性化創造,是生活哲學不同層面相對應的空間設計表達。設計是場景概念,材質、家具、飾品只為設計服務。
  • 「apple of love」是愛情之果?又錯了!……
    apple of love 「apple of love」的真實意思是「西紅柿」! Love apple(an apple of love)不是"愛情蘋果",實際上它是西紅柿的古稱.它的來源有兩種說法: 01
  • 以用戶為中心的網頁設計帶來巨大收益
    面向您的客戶進行網頁設計能夠更直接達到您的商業目標。以往的網頁設計是以僱主(甲方)的喜好作為審核設計是否成功標準,然而這一現象正在發生改變。因為網頁是給到您的用戶使用的,只有深入了解您的客戶需求,結合您的商業目標,提供恰當的信息和洞悉訪客的設計美學,才能夠提升將訪客轉化為客戶的能力。 以用戶為中心的設計,簡稱UCD。是以一種積極的態度來解決網頁設計中與用戶如何進行交互的方法。UCD要求設計師去了解網頁用戶,然後從他們的角度進行設計。「以用戶為中心的設計」既是我們的思維方式,也是工作方式。
  • 15個2012年網頁設計的趨勢分析
    那麼今天我們就給2012年的網頁設計趨勢有一個分析和美好的猜想,希望能和大家一起在新的一年裡有一個更清晰的思路去創意和想像,去啟發更多的可能。1。讓界面互動設計更加靈動更好的從用戶角度分析使用習慣,做出更人性的界面選擇對元素的快速反映和預想一些例子可能包括側飛出菜單,下拉框,彈出窗口。
  • 消失」的設計:蘋果的設計哲學(內有福利)
    這是H5資訊站的第: