雷火平台-中国知名电竞赛事平台

聯(lián)系我們 face+ 關(guān)于 服務(wù) 案例
首頁(yè) 案例 服務(wù) 關(guān)于 face+

蘋果ui設(shè)計(jì)風(fēng)格流行什么?蘋果設(shè)計(jì)風(fēng)格20年設(shè)計(jì)變遷史

Time: 2020-01-02

蘋果屬于一種高端的品牌,因此在做蘋果ui設(shè)計(jì)的時(shí)候,對(duì)于風(fēng)格的選取就要格外注意了,那么蘋果ui設(shè)計(jì)風(fēng)格流行什么?蘋果設(shè)計(jì)風(fēng)格20年設(shè)計(jì)變遷史是怎樣的呢?今天就來介紹下。


蘋果ui設(shè)計(jì)風(fēng)格流行什么?

  雖然目前流行的幾大設(shè)計(jì)風(fēng)格已逐漸變得不再火熱(如蘋果的圓角邊框玻璃、谷歌的層級(jí)、微軟的方塊…),但ui界面設(shè)計(jì)的發(fā)展之路才剛開始。

  在這個(gè)新趨勢(shì)中,界面上的內(nèi)容模塊逐漸變得重要了起來,相對(duì)的,形式感的元素變的不再重要。

  去形式化是一張不太清晰的輪廓圖,在發(fā)展變化中一些新的設(shè)計(jì)風(fēng)格逐漸清晰起來,例如——無邊框界面設(shè)計(jì)。

  或許你慢慢注意到,今年來越來越多的網(wǎng)站和應(yīng)用,尤其是那些注重設(shè)計(jì)的,都有這樣的趨勢(shì)。曾經(jīng)用來劃分區(qū)域的邊框和邊線逐漸消失,然而在干凈的界面上,通過距離分割,各區(qū)域的差別依舊清晰可辨。

  蘋果ui設(shè)計(jì)風(fēng)格 新一代蘋果手機(jī)UI設(shè)計(jì),將重回舊版擬物化風(fēng)格!

  一眼看上去最直觀的的差別應(yīng)該就是圖標(biāo)的不同了,iOS6的圖標(biāo)看起來更有立體感,整體的畫面在今天看來更帶有年代感也更加的經(jīng)典,其次在過渡動(dòng)畫上也有所不同。iOS11的圖標(biāo)陰影等處理比較少,所以圖標(biāo)整體看上去比較扁平,立體感不強(qiáng)。這也是由于兩者的設(shè)計(jì)理念不同所導(dǎo)致的,沒有好壞之分,只能表明你更喜歡哪一種風(fēng)格。

  iOS設(shè)計(jì)理念的改變,在一定程度上也表明iPhone可能已經(jīng)在開發(fā)增強(qiáng)現(xiàn)實(shí)設(shè)備的操作系統(tǒng),之后的UI設(shè)計(jì)會(huì)更加趨向于介于扁平化與擬物化的"擬真化"圖標(biāo)的立體感更加明顯。以iPhone對(duì)UI的設(shè)計(jì)能力與思路,相信新的UI的設(shè)計(jì)也一定能迎合大眾的審美觀念。


1.jpg

(圖片來自網(wǎng)絡(luò))


  蘋果ui設(shè)計(jì)風(fēng)格發(fā)展史上的風(fēng)格

  說起UI風(fēng)格要從2007年1月9史蒂夫·喬布斯發(fā)布第一代iPhone使用的iOS開始,當(dāng)時(shí)可能人們都比較樸實(shí),所以設(shè)計(jì)的UI風(fēng)格大都和實(shí)物相似,也就是常說的擬物化風(fēng)格。類似的在一代iPhone發(fā)布后,2008年9月發(fā)布的Android第一版也采用此風(fēng)格。

  在幾年的發(fā)展及進(jìn)化后終于有了巨大改變。2013年9月18日蘋果發(fā)布了iOS7,與之前不同的是,iOS7采用了扁平化的視覺設(shè)計(jì),讓iPhone的UI更加具有“蘋果味”。當(dāng)然,不甘落后的Android也在2014年6月26日發(fā)布了Android5.0,這次Android在UI方面也有著巨大的改變,采用的就是至今流行Materia Design設(shè)計(jì)語言。另外,iOS和Android此次改版的UI風(fēng)格一直沿用至今。

  最后不得不說一下和上述兩大系統(tǒng)不大一樣并且頗具獨(dú)特風(fēng)格的 Windows Phone,該系統(tǒng)由微軟于2010年10月21日發(fā)布,到至今Windows10 Mobile所采用UI風(fēng)格都是Metro Design,和Windows8及Windows10一致,不過Windows10開始采用了新的設(shè)計(jì)語言:Fluent Design


2.jpg

(圖片來自網(wǎng)絡(luò))


  從蘋果官網(wǎng)設(shè)計(jì)風(fēng)格細(xì)看20年設(shè)計(jì)變遷史

  1997年:變革開始

  1997年時(shí)的蘋果主頁(yè)看起來就和一份彩色報(bào)紙一樣。這是令人振奮的一年,喬布斯重回公司,去掉冗余的產(chǎn)品線,Mac OS X開始進(jìn)入醞釀階段。這時(shí)候蘋果官網(wǎng)的視覺設(shè)計(jì)受限于時(shí)代,同時(shí)也受到當(dāng)時(shí)的Mac OS 8的設(shè)計(jì)語言的影響??纯碝ac OS 8的設(shè)計(jì),你就明白了:

  1998年:“喬納森式”設(shè)計(jì)發(fā)軔

  1998年時(shí),蘋果對(duì)自己的官網(wǎng)進(jìn)行了大幅精簡(jiǎn),并在主頁(yè)用大量空間突出了全新iMac的廣告。此時(shí)蘋果主打的iMac產(chǎn)品為iMac G3,也就是電影《喬布斯》結(jié)尾處喬納森手稿上的那臺(tái)線條流暢,充滿浪漫主義氣息的半透明外殼的一體機(jī)。在這張網(wǎng)頁(yè)截圖中,我們可以看左下角充滿濃郁90年代風(fēng)格的電腦主機(jī)和筆記本,和iMac G3形成鮮明的對(duì)比,所以人們將蘋果由此開始的這個(gè)階段戲稱為蘋果的“浪漫主義時(shí)期”。簡(jiǎn)潔與浪漫匯聚于此,我們?cè)谶@張98年的網(wǎng)頁(yè)上看到了喬布斯追求的簡(jiǎn)潔與艾維早期設(shè)計(jì)中的浪漫與精致。

  不同于喬納森之前設(shè)計(jì)的Newton系列掌上電腦的90年代工業(yè)風(fēng),從iMac G3開始,這個(gè)英國(guó)人開始把他內(nèi)心的另一面呈現(xiàn)在產(chǎn)品上。

  1999年:你好,色彩

  1999年,蘋果在官網(wǎng)上力推當(dāng)時(shí)最新推出的iBook系列筆記本電腦。今天,我們將這款線條柔和色彩活潑的筆記本親切的稱為“貝殼機(jī)”,蘋果的臺(tái)式機(jī)和筆記本產(chǎn)品線全部更新?lián)Q代,在喬布斯和喬納森的主導(dǎo)下,蘋果幾乎全部產(chǎn)品線(高端的Powerbook系列筆記本除外)都開始在工業(yè)設(shè)計(jì)上融入多彩的元素,使用晶瑩剔透的高品質(zhì)工程塑料來制作外殼。在99年的這張網(wǎng)頁(yè)截圖上,我們可以看到底部中央的AirPort和左側(cè)的高端工作站 Mac Pro G3 也使用了同樣的設(shè)計(jì)語言。

  而于此同時(shí),Mac OS 9也在同年推出,設(shè)計(jì)上延續(xù)了Mac OS 8,但是你可以在用色和字體上看出,這一次的升級(jí)在視覺上更加現(xiàn)代了,圖標(biāo)和UI控件的細(xì)節(jié)打磨得更加細(xì)膩了。當(dāng)然,這種改變是離不開硬件風(fēng)格改變的影響的。

  但是別忘了,蘋果是出名的講究軟硬件一體化設(shè)計(jì)的公司,Mac OS 9的溫吞升級(jí)的背后正醞釀著一次革命性的改變。OS X 要來了。


3.jpg

(圖片來自網(wǎng)絡(luò))


  2000年:Aqua與擬物化元年

  2000年時(shí),蘋果在自己的官網(wǎng)主頁(yè)設(shè)計(jì)了一個(gè)頂部導(dǎo)航欄,而這一設(shè)計(jì)一直沿用到了現(xiàn)在。更令人難忘的是頂部導(dǎo)航欄所制作出的水滴質(zhì)感,也許我們今天看并沒有太深的感受,但是這種名為Aqua(拉丁語,水)的設(shè)計(jì)風(fēng)格,是整個(gè)UI設(shè)計(jì)發(fā)展史上的一個(gè)重要里程碑。這一切要從Mac OS X的開發(fā)說起。

  Mac OS X DP2,也就是第二個(gè)開發(fā)預(yù)覽版

  Mac OS X的開發(fā)是艱難的。喬布斯帶來的NeXT公司的操作系統(tǒng)團(tuán)隊(duì)和蘋果本身的開發(fā)者加在一起有150人之多,他們?cè)趩滩妓够貧w之后就走到了一起,傾盡全力,結(jié)合NeXT的NextStep操作系統(tǒng)的內(nèi)核和Mac OS的設(shè)計(jì),打造下一代的系統(tǒng)。在喬布斯的暴君式的咆哮和無數(shù)次的打回重做之后,開發(fā)團(tuán)隊(duì)終于在Mac OS X第三個(gè)開發(fā)版上作出了革命性的設(shè)計(jì):

  Mac OS X DP3

  魯賓斯坦曾回憶,Aqua的設(shè)計(jì)語言是從窗口右側(cè)的滾動(dòng)條開始的。在喬布斯否定50多次之后,湛藍(lán)色水滴式的滾動(dòng)條第一次讓他難得地點(diǎn)頭稱贊。從這一刻開始,蘋果在UI設(shè)計(jì)上開始從打磨水滴質(zhì)感開始“抄現(xiàn)實(shí)”,擬物化設(shè)計(jì)之路也由此展開。沒有設(shè)計(jì)師不知道“擬物化”,但是千萬別忘了,這一切是從一個(gè)滾動(dòng)條開始的。(不可否認(rèn),廣泛意義上的擬物化在幾千年前就有了,但是旗幟鮮明地將其以設(shè)計(jì)語言的形式呈現(xiàn)在UI設(shè)計(jì)上,并影響全世界的,是Aqua,是Skeuomorph)

  2001年:繼往開來,Apple Store與 Mac OS X

  2001年對(duì)于蘋果而言是重要的。隨著Mac OS X的正式發(fā)布,標(biāo)志性的Aqua設(shè)計(jì)風(fēng)格也影響了蘋果的Logo設(shè)計(jì),蘋果終于在自己的官網(wǎng)的去掉了以往一直使用的巨型“APPLE”文字,并將左上角的紅色蘋果Logo更換成了藍(lán)色。喬布斯治下的皮克斯通過幾部動(dòng)畫電影獲得了巨大的成功,影響世界的蘋果商店也開始開門迎客,Max OS X開始正式發(fā)布,這三件事情對(duì)于喬布斯和蘋果而言,都意味著光明的未來。最重要的是,4年漫長(zhǎng)的馬拉松之后,蘋果電腦的軟件和硬件在設(shè)計(jì)上在這一刻融合于一體。

  隨著G4世代的產(chǎn)品發(fā)布,蘋果的“浪漫主義時(shí)期”走向終點(diǎn),更富于現(xiàn)代主義特色的白色開始替代彩色,蘋果悄然進(jìn)化。


4.jpg

(圖片來自網(wǎng)絡(luò))


  2002年:劍指?jìng)鹘y(tǒng)音樂產(chǎn)業(yè)的iPod與iTunes

  而在2002年,蘋果的產(chǎn)品設(shè)計(jì)開始大規(guī)模地使用白色和銀色。當(dāng)年主推的iPod就是前白后銀的工業(yè)設(shè)計(jì),它于2001年10月23日正式發(fā)布。這也就難怪,官網(wǎng)首頁(yè)上的藍(lán)色蘋果Logo被更換成了銀色。網(wǎng)頁(yè)左下角的iMac G4就是著名的“臺(tái)燈”,工業(yè)設(shè)計(jì)的靈感來源于喬布斯家后院的向日葵,屏幕后背的金屬軸定位感極強(qiáng),柔和的曲線和金屬臂結(jié)合在一起,現(xiàn)代感極強(qiáng)。無獨(dú)有偶,初代iPod也將轉(zhuǎn)輪設(shè)計(jì)成機(jī)械結(jié)構(gòu),初代的iTunes的UI也使用了金屬拉絲的紋理來點(diǎn)綴。蘋果的“現(xiàn)代主義”設(shè)計(jì),在2002年基本成型。

  Pod + iTunes 讓數(shù)字音樂給傳統(tǒng)音樂產(chǎn)業(yè)送終,而2002年的這個(gè)網(wǎng)頁(yè)又何嘗不是開啟戰(zhàn)役的沖鋒號(hào)呢?

  2005年:Shuffle,Nano,數(shù)字音樂組合技

  在此之后,蘋果一直在官網(wǎng)最顯著的位置以巨大的空間著重推薦自己的最新產(chǎn)品。圖中便是2005年時(shí)候的蘋果官網(wǎng)截圖,這正式當(dāng)時(shí)主推的產(chǎn)品iPod Nano。在這一年,蘋果在年初發(fā)布了低端的iPod Shuffle,年底則發(fā)布了中端的iPod Nano,配合經(jīng)典的iPod,正式布局完成。

  這個(gè)階段,蘋果在網(wǎng)頁(yè)設(shè)計(jì)上不再拘泥于白色背景+產(chǎn)品圖的經(jīng)典搭配,更具有包容性。難道不是么?不信看網(wǎng)頁(yè)底部,那款Motorola E1就是蘋果與Moto合作的產(chǎn)物——“iTunes手機(jī)”,在蘋果的開拓史上,也算是獨(dú)一無二了。

  2007年:重新定義手機(jī)的iPhone

  在2007年中期,蘋果再次對(duì)官網(wǎng)的頂部導(dǎo)航欄進(jìn)行了重新設(shè)計(jì),而當(dāng)年的主角毫無疑問是橫空出世的iPhone。我們都很清楚這款產(chǎn)品的意義有多重大。極具代表性的圓角矩形圖標(biāo),將擬物化設(shè)計(jì)推向整個(gè)世界。這個(gè)內(nèi)部代號(hào)為“Purple”的智能手機(jī)催生了Android,也為摩托羅拉、Nokia和黑莓的沒落埋下了伏筆。

  iPhone有多經(jīng)典?看看iPhone 6和iPhone 6 Plus 你就明白。


5.jpg

(圖片來自網(wǎng)絡(luò))


  2010年:穩(wěn)定積累

  2011年:一個(gè)時(shí)代的結(jié)束

  2011年時(shí),蘋果對(duì)頂部導(dǎo)航欄采用了更加深色的基調(diào),搜索欄也變得更加簡(jiǎn)單。這是在這一年,喬布斯也走到了人生的盡頭。iPhone的工業(yè)設(shè)計(jì)和下一代的iOS設(shè)計(jì)也開始在蘋果內(nèi)部立項(xiàng)研發(fā)。一個(gè)時(shí)代結(jié)束了,改變也即將發(fā)生。

  2014年:不止于平,豈止于大!

  iOS7發(fā)布之后,“蘋果式扁平”也運(yùn)用到了網(wǎng)頁(yè)設(shè)計(jì)上。單頁(yè)設(shè)計(jì)、動(dòng)態(tài)加載、視差滾動(dòng)等各種新技術(shù)都能蘋果官網(wǎng)上找得到。所以,“蘋果式”的扁平化設(shè)計(jì),并不是看起來這么簡(jiǎn)單。iPhone 6 Plus 和 Apple Watch 一大一小也像全世界宣告蘋果在設(shè)計(jì)上的不拘一格。

  通過以上的內(nèi)容,大家已經(jīng)了解了蘋果ui設(shè)計(jì)風(fēng)格流行的情況了,在選擇蘋果ui設(shè)計(jì)風(fēng)格的時(shí)候,還需要和用戶群體的特征結(jié)合起來,這樣才能吸引用戶的注意力。


合作咨詢

上海(總部)

上海市浦東新區(qū)郭守敬路498號(hào)22號(hào)樓
021-61057328
service@faceui.com

辦公地址地圖

北京

北京市東城區(qū)后永康17號(hào)A座
010-64015620
service@faceui.com

辦公地址地圖

成都

四川省成都市錦江區(qū)東大街牛王廟段100號(hào)
028-62790929
service@faceui.com

辦公地址地圖
首頁(yè) | 案例 | 服務(wù) | 關(guān)于 | face+ | 智見

Copyright ? 2009-2022 FaceUI design. All rights reserved


滬ICP備13044459號(hào)-5

上海辦公地點(diǎn)地圖
北京辦公地點(diǎn)地圖
深圳辦公地點(diǎn)地圖
在微信中搜索faceui
或保存二維碼在微信中打開