基于品牌基因淺談蘋果官網(wǎng)界面設(shè)計(jì)的借鑒意義

（江南大學(xué)設(shè)計(jì)學(xué)院214122）

當(dāng)下中國很大比例的互聯(lián)網(wǎng)產(chǎn)品發(fā)展主流仍是快速市場戰(zhàn)略，這種戰(zhàn)略的首要著眼點(diǎn)為經(jīng)濟(jì)利益。這些產(chǎn)品常常會(huì)忽視用戶體驗(yàn)，同時(shí)也呈現(xiàn)出不清晰的品牌形象。用戶對(duì)品牌的關(guān)注度之高，品牌對(duì)一個(gè)企業(yè)的現(xiàn)實(shí)意義，都是對(duì)企業(yè)旗下的互聯(lián)網(wǎng)產(chǎn)品的設(shè)計(jì)提出的重大挑戰(zhàn)。企業(yè)想要?jiǎng)?chuàng)造出一個(gè)用戶滿意度高的知名品牌極其困難?；ヂ?lián)網(wǎng)產(chǎn)品的更新迭代周期更加短暫，很多企業(yè)為了產(chǎn)品能夠搶占市場份額，不惜犧牲用戶體驗(yàn)，各種可用性問題即便在產(chǎn)品上市時(shí)也沒有真正解決。產(chǎn)品在迭代時(shí)，推倒重新設(shè)計(jì)，極大浪費(fèi)了人力物力，時(shí)間成本也很高。這樣做忽略了歷代的產(chǎn)品的成熟用戶群，品牌基因毫無連續(xù)性，用戶會(huì)因?yàn)槔Щ蠖y以接受，甚至弄不清楚使用中的產(chǎn)品到底屬于哪個(gè)品牌。幫助中國的互聯(lián)網(wǎng)企業(yè)在其產(chǎn)品界面設(shè)計(jì)中構(gòu)建特色鮮明的品牌基因體系顯然具備深遠(yuǎn)的現(xiàn)實(shí)意義。

一、品牌基因的構(gòu)建對(duì)互聯(lián)網(wǎng)產(chǎn)品的現(xiàn)實(shí)意義

品牌基因是產(chǎn)品信息與品牌文化的集合，是品牌的核心價(jià)值，規(guī)定了品牌結(jié)構(gòu)的基本特征及其自動(dòng)生成的機(jī)制，在適合的外界環(huán)境條件下，自動(dòng)生成特定品牌。因此，意識(shí)到品牌建設(shè)的重要性但卻僅僅將著眼點(diǎn)放在提高品牌知名度等非產(chǎn)品層面上是遠(yuǎn)遠(yuǎn)不夠的。目前中國很多互聯(lián)網(wǎng)產(chǎn)品在其產(chǎn)品設(shè)計(jì)層面上，缺乏品牌辨識(shí)度，用戶很難識(shí)別出該產(chǎn)品是哪一家公司旗下產(chǎn)品，這樣一來也就很難形成統(tǒng)一的、高效的品牌忠誠度。所以良好的用戶體驗(yàn)不僅僅是產(chǎn)品好用、易用，同時(shí)也包括產(chǎn)品在品牌上的一個(gè)共識(shí)，是用戶在每一代產(chǎn)品更新?lián)Q代時(shí)，也能清晰的辨認(rèn)出產(chǎn)品的品牌和每一代帶給用戶的新體驗(yàn)，讓品牌榮譽(yù)感和忠誠度持續(xù)下去。

二、蘋果官方網(wǎng)站界面迭代設(shè)計(jì)分析

按照品牌基因表達(dá)方式，可以將品牌基因分為顯性基因和隱性基因。顯性產(chǎn)品品牌基因通常可以通過人們的視覺感知系統(tǒng)進(jìn)行感知，如產(chǎn)品的外觀形態(tài)、布局、色彩等。隱性產(chǎn)品品牌基因往往不能通過人們的視覺感知系統(tǒng)進(jìn)行感知，但卻能夠通過語言或行為進(jìn)行描述和表達(dá)，如品牌核心價(jià)值觀。顯性品牌基因是品牌核心價(jià)值觀的直接體現(xiàn)，是品牌基因中能夠最直觀被產(chǎn)品受眾所識(shí)別、感受的部分。因此一款互聯(lián)網(wǎng)產(chǎn)品需要展現(xiàn)給消費(fèi)者其獨(dú)有的品牌基因時(shí)，產(chǎn)品的界面便是最好的媒介。蘋果官網(wǎng)的界面設(shè)計(jì)以其鮮明的特征、一貫延續(xù)的設(shè)計(jì)語言，雖作為一個(gè)獨(dú)立產(chǎn)品，但將自己完美融入了蘋果龐大的產(chǎn)品系中，這便是蘋果始終貫徹將自己優(yōu)秀的品牌基因注入到各個(gè)產(chǎn)品的歷代設(shè)計(jì)之中的具體表現(xiàn)。

在Mac OS X之前，蘋果官方網(wǎng)站一直使用著類似于報(bào)紙雜志的設(shè)計(jì)風(fēng)格。2000年Mac OS X這一UI設(shè)計(jì)史上重要的里程碑得以開發(fā)，一些設(shè)計(jì)布局直至進(jìn)入仍能看到其影響。2000年，蘋果在官網(wǎng)主頁的界面設(shè)計(jì)了一個(gè)一直沿用至今的頂部導(dǎo)航欄。名為Aqua的水滴質(zhì)感成為了頂部導(dǎo)航欄的視覺設(shè)計(jì)語言，這種設(shè)計(jì)風(fēng)格對(duì)UI產(chǎn)生了非常深遠(yuǎn)的影響，開創(chuàng)了之后很長一段時(shí)間的UI擬物化設(shè)計(jì)浪潮。界面不同功能板塊的劃分不再是以前理性刻板的直角分割，引入了大量圓角矩形的設(shè)計(jì)，使界面看上去更加親切活潑，大大減少了科技與日常生活的距離感。這一代的官網(wǎng)主頁界面的主要品牌標(biāo)示視覺元素為巨型“APPLE”文字加上頂部導(dǎo)航欄最左側(cè)的水滴質(zhì)感的紅色蘋果LOGO，產(chǎn)品展示開始使用白色背景加大幅產(chǎn)品照片的形式，整體視覺語言簡潔、趨于統(tǒng)一。

2001年，為了進(jìn)一步統(tǒng)一官網(wǎng)界面的視覺語言，主頁品牌標(biāo)示進(jìn)行了延續(xù)性升級(jí)。升級(jí)后頂部導(dǎo)航欄的LOGO更加符合“水滴”設(shè)計(jì)語義，更改為藍(lán)色，同時(shí)去掉了之前一直使用的巨型“APPLE”文字，使得頁面白色背景部分更加整體，減少了畫面的割裂感。除此以外，其它的設(shè)計(jì)元素均沿用了上一年的版本。

2002年，如當(dāng)年力推的iPod，蘋果系列產(chǎn)品的工業(yè)設(shè)計(jì)均開始大規(guī)模使用白色和銀色。為了匹配整體設(shè)計(jì)風(fēng)格，官網(wǎng)首頁上的藍(lán)色蘋果LOGO更換成了銀色。忠于材質(zhì)本來的顏色質(zhì)感，蘋果“現(xiàn)代主義”設(shè)計(jì)風(fēng)格在這一年基本成型。

2005年后，蘋果官網(wǎng)首頁界面的整體布局設(shè)計(jì)成型，一直在最顯著位置以巨大的空間著重推薦自己的最新產(chǎn)品。在這個(gè)階段，頁面信息重要層級(jí)的區(qū)分非常明顯，信息易讀性很強(qiáng)，用戶體驗(yàn)進(jìn)一步加強(qiáng)。同時(shí)為了頁面往后迭代的可延展性，蘋果在網(wǎng)頁視覺設(shè)計(jì)上不在拘泥于白色背景加產(chǎn)品圖的經(jīng)典形式，從而有了更豐富、更具有趣味的視覺元素。

2007年中期，蘋果重新設(shè)計(jì)了官網(wǎng)頂部導(dǎo)航欄，之前版本中導(dǎo)航欄各個(gè)Tab之間的明顯視覺分割被淡化，轉(zhuǎn)而利用格式塔原理，用Tab之間的距離來進(jìn)行分隔。減少明顯視覺分割帶來的結(jié)果是界面視覺更加整體。同年橫空出世的iPhone從硬件到軟件同樣使用了統(tǒng)一的圓角矩形設(shè)計(jì)，擬物化設(shè)計(jì)在iPhone的設(shè)計(jì)語言中發(fā)揮得淋漓盡致。

自2010年之后，蘋果官網(wǎng)的設(shè)計(jì)方案趨于穩(wěn)定，2014年iOS7發(fā)布之后，蘋果式的扁平化風(fēng)格也用到了官網(wǎng)設(shè)計(jì)之中，整個(gè)界面顯得更加簡潔精致，富有未來感，單頁設(shè)計(jì)、動(dòng)態(tài)加載、視差滾動(dòng)等一些新的交互技術(shù)都會(huì)在官網(wǎng)上體現(xiàn)出來。

三、從蘋果官方網(wǎng)站界面迭代看蘋果的設(shè)計(jì)基因

蘋果公司的核心價(jià)值觀為“一切始于簡潔”。簡潔、透明、直白，意味著更低的學(xué)習(xí)、使用成本?？傤I(lǐng)全局的頂部導(dǎo)航欄、極少的交互層級(jí)、明確的信息重要級(jí)、簡單明了的信息分區(qū)、通俗易懂的文案、巨幅清晰的產(chǎn)品圖片、單屏極少的信息、最簡單的點(diǎn)擊交互操作、統(tǒng)一的圓角矩形設(shè)計(jì)元素……這些在蘋果官網(wǎng)界面中一直踐行的設(shè)計(jì)語言，無一不在提升著用戶的使用體驗(yàn)，也無一不體現(xiàn)著蘋果的核心價(jià)值觀，更是蘋果品牌基因的最顯性表現(xiàn)。

四、結(jié)語

從蘋果官網(wǎng)的設(shè)計(jì)脈絡(luò)中，我們不難看出一個(gè)優(yōu)秀的軟件產(chǎn)品品牌基因形成的過程。第一，始終圍繞用戶體驗(yàn)進(jìn)行設(shè)計(jì)，設(shè)計(jì)是為人的設(shè)計(jì)，讓使用者能用、易用、樂用始終是互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)的第一要義；第二，明確、統(tǒng)一、整體、可拓展性強(qiáng)的設(shè)計(jì)語言；第三，在迭代過程中，一旦確定符合公司核心價(jià)值觀的設(shè)計(jì)語言，盡量不要有突變性的改動(dòng)，不要增加用戶學(xué)習(xí)負(fù)擔(dān)；第四，盡量少的交互層級(jí)；第五，清晰簡潔的信息架構(gòu)；第六，合理適度的情感化設(shè)計(jì)，純技術(shù)與大眾的距離過于遙遠(yuǎn)，情感化設(shè)計(jì)能夠拉近用戶與互聯(lián)網(wǎng)產(chǎn)品之間的距離，同時(shí)也能使用戶對(duì)于品牌更加親切。蘋果公司的設(shè)計(jì)所體現(xiàn)的這些優(yōu)秀品牌基因，對(duì)于中國的互聯(lián)網(wǎng)產(chǎn)品建立自己的品牌基因，極具借鑒意義。