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

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

一、會(huì)講故事

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

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

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

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

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

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

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

二、卡片彈窗的運(yùn)用

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

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

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

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

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

▲打開卡片之前

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

▲打開卡片之后

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

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

三、走心的文案

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

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

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

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

四、響應(yīng)式設(shè)計(jì)

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

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

iPhone的情況下，會(huì)對(duì)菜單進(jìn)行折疊處理，符合移動(dòng)端的使用情況，同時(shí)和PC體驗(yàn)也保持一致。

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

在手機(jī)上會(huì)進(jìn)行功能導(dǎo)航滑動(dòng)展示，最大程度上保留了PC上操作習(xí)慣，也比較符合用戶心智。

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

移動(dòng)端因?yàn)槠聊槐容^小，所以采用上下結(jié)構(gòu)排列，符合移動(dòng)端用戶操作習(xí)慣。

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

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

五、通過字重建立層級(jí)

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

蘋果的字體一般采用大的粗體設(shè)計(jì)，大的粗體基本是在頁面每一個(gè)地方，但是蘋果大而粗的字體不會(huì)覺得簡陋或者粗糙。因?yàn)樗\(yùn)用了對(duì)比。

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

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

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

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

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

六、最后

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

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

#專欄作家#

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

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

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