編輯導語：蘋果能夠在眾多手機市場中脫穎而出，它靠的是什么吸引了我們？靠的是它的設(shè)計，無論是從外觀設(shè)計還是內(nèi)部的技術(shù)設(shè)計，都有著它獨特的一面。作者就其設(shè)計進行了分析，總結(jié)了一些被我們忽略的設(shè)計細節(jié)，我們一起來看看吧。

蘋果的設(shè)計不僅運用了新的技術(shù)，同時在設(shè)計創(chuàng)新上、設(shè)計包容性上都有很值得設(shè)計師學習的地方，無論設(shè)計還是商業(yè)上都是很多公司的最佳參考，今天來看看蘋果那些被我們忽略的設(shè)計細節(jié)。

一、會講故事

比如在介紹iPad的時候，會從很多場景出發(fā)。每個場景都是你日常創(chuàng)造的時刻，比如繪畫等場景。

這樣有創(chuàng)意的場景，能讓你在數(shù)字環(huán)境下，感受到科技帶來的魅力。

在介紹iPad繪畫的時候，通過一直筆的滑動效果，繪制出一條線，然后描繪出一幅美麗的插畫。插畫的設(shè)計也非常的美麗。

讓你能感受到科技帶來的魅力，能讓你隨時隨地進行設(shè)計創(chuàng)造。通過這樣講故事的設(shè)計，帶入感的場景也彰顯了蘋果致力于為每個藝術(shù)家創(chuàng)造工具的使命。

蘋果產(chǎn)品介紹的頁面，不會很赤裸裸賣產(chǎn)品、賣參數(shù)，而是結(jié)合很多場景去講故事，去描述生活中的場景，讓你感知到科技帶來的生活改變。

在蘋果安全頁面，蘋果會根據(jù)你平時使用產(chǎn)品安全場景出發(fā)，來告訴你蘋果是如何保護你的安全隱私數(shù)據(jù)。

蘋果會根據(jù)你平時使用場景，通過動畫的方式去講解你平時會出現(xiàn)隱私的問題，然后告訴你解決方式，讓你對蘋果的安全問題非常信賴。

二、卡片彈窗的運用

蘋果最新的iOS14中，主屏幕上有很多的小組件，通過這些小組件你能更好的了解信息內(nèi)容。

蘋果目前都在推崇這種小組件的運用方式。因為隨著內(nèi)容信息越來越多，有效獲取信息非常重要。

如果你要顯示更多內(nèi)容，展示更多的文字，這種提示卡片就能很輕松的將每個功能單獨展示出來。讓用戶看起來更加直觀和清晰。

蘋果在官方設(shè)計中，也運用了大量的提示卡信息設(shè)計，通過點擊提示卡能查看更詳細的信息，通過這樣的交互方式，用戶可以清晰地理解每個產(chǎn)品模塊的詳細內(nèi)容。

提示卡片能很好地解決文字信息內(nèi)容過多，用戶閱讀困難問題，通過點擊右下角的+號，能展示出這個功能詳細說明，每個卡?的內(nèi)容?常詳細。

▲打開卡片之前

通過巧妙的彈窗設(shè)計，讓用戶清晰的感知內(nèi)容。也更能體現(xiàn)出蘋果設(shè)計的官方感，和極致體驗。

▲打開卡片之后

同時彈窗效果還支持模糊效果，蘋果官網(wǎng)對彈窗的圖形模糊效果，像在手機上體驗一樣極致。

提示彈窗效果應該是未來的一大趨勢，他能很好的解決頁面過長的問題，通過卡片設(shè)計能讓每個卡片模塊單獨的展示，而不用增加新的頁面。如果今天你在設(shè)計一個網(wǎng)站，不妨考慮下試試這種效果。

三、走心的文案

如果說杜蕾斯的文案是“文案鬼才”，那么蘋果的文案就是“走心鬼才”，蘋果的文案通常很短，短而強大。

在很多科技網(wǎng)站里面。你可能看見的很多產(chǎn)品都在強調(diào)自己多厲害的技術(shù)，跑分領(lǐng)先了多少。

但是蘋果很少這樣去寫，他們一般用一個非常修飾性的短語，比如iPad的文案「下一臺電腦何必是電腦」以及「健康的未來，現(xiàn)在戴上」等等。出來后就是一個經(jīng)典的流行語。

同時蘋果的文案會根據(jù)每個國家的特點進行再設(shè)計，而不是簡單粗暴的直接翻譯，這也是蘋果設(shè)計走心的地方。

四、響應式設(shè)計

蘋果的響應式設(shè)計也是教科書一樣的存在，無論你在什么設(shè)備下打開蘋果??，都會根據(jù)你的設(shè)備進??適應設(shè)計。

iPad的場景是1024X768，會根據(jù)這個寬度自動撐滿整個屏幕設(shè)計。

iPhone的情況下，會對菜單進行折疊處理，符合移動端的使用情況，同時和PC體驗也保持一致。

在iPhone界面的設(shè)計，在PC上能完整的看見各個類型的蘋果手機介紹，非常全面！

在手機上會進行功能導航滑動展示，最大程度上保留了PC上操作習慣，也比較符合用戶心智。

對于文本的處理，PC上通過左右結(jié)構(gòu)進行處理，一目了然能看全所有信息。

移動端因為屏幕比較小，所以采用上下結(jié)構(gòu)排列，符合移動端用戶操作習慣。

PC端圖文排列方式，左文右圖，在移動端就變成了上圖下文。

作為全球最大的電商官網(wǎng)，蘋果的每一處細節(jié)都是用心推敲的，并且高度統(tǒng)一體驗一致。

五、通過字重建立層級

字體的設(shè)計的基礎(chǔ)，特別在WEB端字體的顯示，是一個非常棘手的設(shè)計問題，但是蘋果好像解決了這個問題，它在全球每個國家使用SF字體都是特別的統(tǒng)一。

蘋果的字體一般采用大的粗體設(shè)計，大的粗體基本是在頁面每一個地方，但是蘋果大而粗的字體不會覺得簡陋或者粗糙。因為它運用了對比。

蘋果粗的字體會搭配小的字體，并且字重也是正常的，這樣會形成鮮明的對比。同時大的字體，也會配上超清大圖，以及局部放大的圖片，通過這樣的巧妙設(shè)計，你不會覺得設(shè)計粗糙，反而給人一種大氣奔放的感受。

這樣的設(shè)計，你一眼就看見了標題以及副標題的設(shè)計，非常清晰可見。

蘋果的文字設(shè)計，沒有太多華麗的技巧，就是簡單的通過字體大小，字重對比，有序的排列讓內(nèi)容信息結(jié)構(gòu)井井有條。

蘋果今年也開始嘗試用黑色和灰色搭配，來強調(diào)層次，這是蘋果今年的一個新的嘗試。這種設(shè)計也逐步演變成設(shè)計行業(yè)的一個趨勢。

在參數(shù)設(shè)計的地方，也是采用了類似處理方式，通過文字深淺對比，來突出設(shè)計層級和參數(shù)。

六、最后

雖然現(xiàn)在我們都是移動端設(shè)計為主，使用PC的場景降低了很多，但是網(wǎng)站是我們?nèi)粘９ぷ髦薪?jīng)常使用的場景。

這也是互聯(lián)網(wǎng)開啟的大門，網(wǎng)站的設(shè)計比移動端空間更大，蘋果的每一次官網(wǎng)的更新，都是技術(shù)成熟的體驗，以及新的革命開始，到時候我們一起來迎接蘋果帶給我們新的開始。

#專欄作家#

Sky，微信公眾號：我們的設(shè)計日記（ID：helloskys），人人都是產(chǎn)品經(jīng)理專欄作家。原支付寶體驗設(shè)計專家，阿里巴巴天貓設(shè)計專家；10年知名互聯(lián)網(wǎng)公司設(shè)計經(jīng)驗，對于產(chǎn)品從0到1、品牌定位、金融產(chǎn)品、設(shè)計規(guī)范、運營規(guī)范、大促等有豐富實戰(zhàn)經(jīng)驗。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自?Unsplash，基于 CC0 協(xié)議