非設(shè)計(jì)師談設(shè)計(jì)(一):胖胡斐談Apple改版
設(shè)計(jì)是一件好像人人都能看懂的東西,所以常有設(shè)計(jì)師抱怨“老板指手劃腳”、“客戶不懂裝懂”。我們認(rèn)為,設(shè)計(jì)是一門綜合性極強(qiáng)的學(xué)科。可以說,它就是人人都能看懂,只不過,大家都是從自己的角度來看。設(shè)計(jì)師說“用戶體驗(yàn)”說“視覺”說“風(fēng)格”,客戶、老板說“商業(yè)”說“運(yùn)營”說“營銷”,開發(fā)工程師說“技術(shù)”說“實(shí)現(xiàn)”。這些都是設(shè)計(jì)師要了解,要傾聽,要理解的現(xiàn)實(shí),一個只考慮“用戶體驗(yàn)”的設(shè)計(jì)不會是一個好設(shè)計(jì),除非這個設(shè)計(jì)的目的就是為了展示“用戶體驗(yàn)”。對絕大多數(shù)的商業(yè)設(shè)計(jì)來說,“用戶”、“商業(yè)”、“技術(shù)”的完美結(jié)合,才能產(chǎn)生出完美的設(shè)計(jì)。
從這個角度考慮,我們決定在這個blog上陸續(xù)載一些非設(shè)計(jì)師談設(shè)計(jì)的文章。當(dāng)然,我們會先從淘寶的牛同事們開始(窩邊草容易吃^_^)。第一期是我們Super可愛的胖胡斐,他是淘寶資深的營銷專家,投廣告無數(shù)、做活動無數(shù),對設(shè)計(jì)如何支持商業(yè)目標(biāo)有獨(dú)道的經(jīng)驗(yàn)和見解,被譽(yù)為“淘寶設(shè)計(jì)部之外最牛B的設(shè)計(jì)師”。
胡斐這篇談Apple改版的文章分了兩部分,前半部分純談設(shè)計(jì),后半部分從營銷談設(shè)計(jì)。希望設(shè)計(jì)師們從一個非設(shè)計(jì)師的眼中,可以看到對設(shè)計(jì)不一樣的理解——
我從來不否認(rèn)apple在我眼里就是神,因?yàn)樗墙谈讣壍钠放?,喜歡apple帶著信仰的。就像我前兩天會翻來覆去看iPhone的電視廣告,沒有想到一個產(chǎn)品可以做成這樣,沒有想到一個產(chǎn)品廣告可以用單純的產(chǎn)品把消費(fèi)者利益說的這么清楚。iPhone電視廣告看這里。
今天說的,是apple網(wǎng)站改版了。準(zhǔn)確說是今天早上發(fā)現(xiàn)的,具體什么時候改的我都不清楚,一周前訪問的時候還沒有改(后來確認(rèn)是北京時間12日,和WWDC2007一起改的)。我習(xí)慣經(jīng)常上一下apple.com,因?yàn)榭傆泻芏嘀档脤W(xué)習(xí)的地方,比如表達(dá)產(chǎn)品賣點(diǎn)的方式,比如產(chǎn)品照片拍攝的角度,比如網(wǎng)頁布局的安排,等等。apple網(wǎng)站和taobao內(nèi)容比起來可能是幾萬分之一,幾乎是靜態(tài)的,但是人家的訪問量一直是TOP100以內(nèi)。很多人把a(bǔ)pple.com像apple的產(chǎn)品一樣當(dāng)成藝術(shù)品來欣賞。
先看首頁,改動最大的就是這里,簡單說,變成了黑色,也就是Leopard的風(fēng)格。我拿現(xiàn)在的apple.com.cn網(wǎng)站來比較(基本上這個就是原先apple.com的中文版)??瓷先ジ崃税??乍看上去也就是變了顏色,其實(shí)改動非常大。
- 首先,頁面變胖了。淘寶前段時間變胖的時候我們的UED還有過一篇文章記錄。以前apple實(shí)際寬度是適合800像素的,現(xiàn)在完全是全屏1024寬,更寬敞??梢苑鸥鄸|西。
- 導(dǎo)航重新組織重新設(shè)計(jì)了,這是最大的變動。這不光是重新設(shè)計(jì)了,最重要的是重新組織了導(dǎo)航。我們看下面,以前是2級導(dǎo)航,選了一層之后還有另一層需要選?,F(xiàn)在不用。第一層,apple按照主打產(chǎn)品分類,也就是在用戶心中,提到apple,會聯(lián)想到的產(chǎn)品:Mac、iPod、iPhone…非常簡單非常直觀。
做了一年的活動,和大少爺總結(jié)起來,“把信息進(jìn)行分類”應(yīng)該是最重要的環(huán)節(jié)了。幫助用戶更快更方便的找到自己想要的東西,這才是設(shè)計(jì)。 - 導(dǎo)航上增加了search。這個早就該有啦。Mac風(fēng)格的搜索欄很簡單。
- 一直都覺得apple的首頁很好看,簡單畫了一個首頁的iBoard(詮釋的dalson臺灣GG跟我說的詞,一般我說頁面Layout和視覺路線)。我們會發(fā)現(xiàn),它具備了好的平面設(shè)計(jì)、好的網(wǎng)頁設(shè)計(jì)所必須的關(guān)鍵條件。
只有一條視覺路線:我們說好的網(wǎng)頁能夠引導(dǎo)用戶的視線,用戶不會不知道往哪里看,不會不知道什么時候該不該拉滾動條。同時,讓用戶花最多的時間在最重要的信息上,理解為在重要元素上的視覺路線最長。
只有一個視覺中心:apple網(wǎng)站的視覺中心太明顯了,就是中間的大圖,經(jīng)常會換,永遠(yuǎn)是推他們目前最重要的產(chǎn)品。
接下來,我們看內(nèi)容頁面。就點(diǎn)首頁的Mac電腦進(jìn)去,我們分別看到內(nèi)容同樣的界面。我印象里面白色版本的Mac主頁已經(jīng)是變胖后的了。變胖之后,分欄的方式改成了平均分,以前是左7右3的。記得承志說過,網(wǎng)頁作成1024寬的,分列就特別重要,分成4列的話,用戶會找不到東西。所以163、sina改版變胖后用了3列。我們發(fā)現(xiàn)apple現(xiàn)在是2列,大家可以體會一下拉著滾動條從上往下拉的時候,眼睛是不需要左右晃的,不像3列或者4列的,這樣就會讓用戶比較輕松。
在內(nèi)容頁面發(fā)現(xiàn)一個重要變化。頁面下面都放上了導(dǎo)航區(qū),像下面這樣的。包括了所有的相關(guān)內(nèi)容導(dǎo)航。這樣有些網(wǎng)站也做過,像flickr。可好幾十行文字放到一起還能這樣漂亮還真不容易。注意到他的信息分類了么?在這里Mac又分成了硬件(Macs)、軟件(Mac OS X)、網(wǎng)絡(luò)服務(wù)(.Mac)、應(yīng)用程序(Applications)、附件(Acceseries),之后每一項(xiàng)又分出來??瓷先ビ悬c(diǎn)象我們的類目,但是更加清晰。不能讓用戶迷路,可能是設(shè)計(jì)時最重要的考慮。
(看過評論之后加的這段,感謝mimiqiao):最早在網(wǎng)易上看到一篇文章,說到了這種Tabbed Breadcrumb Navigation(看這里),又找到了原文。Yahoo就是這么做的,但我肯定apple這個更精華。
原文介紹的:Tabbed Breadcrumb Navigation,原文看這,中文評論看這里。
接著點(diǎn),看到Store也做了小改動。變寬之后的頁面分成三個大列,分別是產(chǎn)品導(dǎo)航、產(chǎn)品價(jià)格和圖片、店鋪信息。這是一個品牌的產(chǎn)品售賣頁面,它不可能做成促銷感很強(qiáng)的,但是我實(shí)在沒想太明白,這么大量的留白,像做平面稿一樣的做這個頁面好像很難直接促成銷售,不過apple也不指望這個地方銷售。
iPod+iTunes這個頁面變化太大,變得漂亮極了。除了cool我真的沒什么語言來形容這個頁面。值得注意的是產(chǎn)品出現(xiàn)了橫向的滾動條,看到?jīng)]?第一次看到橫向的,是在一個俄羅斯網(wǎng)站,但遠(yuǎn)沒有這感覺。曾經(jīng)有人說過一個忌諱,就是不要讓用戶向下拉同時還要向右拉,那是很shit的事情。說實(shí)話apple有點(diǎn)大膽,這種橫向的滾動條并不是用戶習(xí)慣的操作工具。用戶不知道,他們會覺得無所謂,知道了,要么覺得好cool,要么覺得垃圾。所以,如果我們的設(shè)計(jì)沒有達(dá)到apple這種水品,這樣冒險(xiǎn)的事情要多想想嘍。
另一個地方,iPod Shuffle II 的首頁,其實(shí)老版本的也有,就有一個很有魅力的地方。又會說到營銷上產(chǎn)品的“魅力屬性”,就是說有一種產(chǎn)品屬性,如果沒有,用戶不覺得不應(yīng)該,但是如果有了,用戶會覺得相當(dāng)體貼,更進(jìn)一步,如果原來有后來又沒了,用戶會覺得你極其SB的。就像下面這個,每次刷新會隨機(jī)出現(xiàn)一種顏色的Shuffle,右上角可以選擇顏色,超級大的圖片會顯示你的Shuffle,然后下面的buy now和產(chǎn)品包裝圖片也會跟著變成你選的顏色。很好玩,也會再次徹底愛上apple。
換一個角度說這個事兒。上面是設(shè)計(jì),下面說這件事兒看到apple的品牌管理和整合營銷傳播。
Apple是當(dāng)之無愧的“快品牌”(《快品牌》是本書,詳情,購買),從2001年第一臺iPod上市,apple就開始了它嚴(yán)格到BT的品牌管理。所有接觸過apple公司的人都知道,apple專賣店里面的每一張單頁都是從美國直接郵寄的,中國和任何一個駐外公司沒有資格印制或者散發(fā)任何自制資料。這也就是我們看到任何一個地方的apple專賣店都是一樣的,任何一款產(chǎn)品的單頁都是一樣的。這就是我們說的“傳播的一致性”。對于apple這樣的快品牌,這樣曾經(jīng)在199x年“沒落”了的品牌,迅速發(fā)展過程中必須要做的就是嚴(yán)格保持傳播的一致性。apple要做到,在任何地方,看到任何一個局部,都可以讓消費(fèi)者明確認(rèn)出(recognize)這就是apple。百年老品牌要如此,高速成長品牌更要如此,否則會在成長起來之后失去根基。
要保持一致,所以我們看到iPod做了5代變化并不大,所以我們看到Mac電腦無論怎么變都是“Simple”,所以我們看到apple的鼠標(biāo)無論如何都是看上去只有一個鍵……因?yàn)閍pple必須保證它的品牌精髓滲透到每一個產(chǎn)品的每一個地方。iPod也是一個品牌,方框中間有個圈圈的基本造型永遠(yuǎn)都不會變,因?yàn)樵谙M(fèi)者心中,這就是iPod,任何一個人用鉛筆10秒鐘內(nèi)能畫出的iPod就是這個樣子,在傳播的時候,一致比創(chuàng)新更加重要。
要保持傳播的一致,所以apple必須在每一個接觸點(diǎn)上都保持傳播的一致。接觸點(diǎn)是IMC(Intergrated Marketing Communication整合營銷傳播)中一個重要概念,就是品牌能夠和消費(fèi)者建立溝通的地方。同一時間,在不同接觸點(diǎn)上保持傳播信息的一致非常重要。所以,apple在WWDC2007推出Leopard的同時,將apple網(wǎng)站改版了,就改成了Leopard的樣子。正因?yàn)榫W(wǎng)站是和消費(fèi)者溝通的重要接觸點(diǎn)。WWDC可以同時跟3000多個工程師溝通,但是和全世界數(shù)億喜歡apple的人溝通,只能通過網(wǎng)站和專賣店。因此,當(dāng)apple把Aqua風(fēng)格的Mac放進(jìn)歷史的時候,也是把Aqua的網(wǎng)站改版的時候了。這告訴消費(fèi)者兩件事:1. Leopard是apple最重要的產(chǎn)品,我們所有的形象都在因它而變。2. 是時候和你的Aqua說再見了。換句話說,網(wǎng)站改版,對apple來說傳播意義要遠(yuǎn)大于實(shí)際意義。
有個不一致的,就是看到主導(dǎo)航的內(nèi)容變化太大,很多人也在猜測是不是apple的組織結(jié)構(gòu)也在發(fā)生變化。這無所謂,關(guān)鍵是,這是從消費(fèi)者的角度出發(fā)的分類方式,原先的更加傾向于產(chǎn)品分類。這也同時傳播給消費(fèi)者一種信息:你想到的全部的apple就這些東西:Store、iPod+iTunes、iPhone、Mac…至少,我以前想看Mac電腦一定要從二級分類的硬件產(chǎn)品里面再點(diǎn)一下才能看到,現(xiàn)在不用了,因?yàn)槲腋蓡嵋P(guān)心Mac在apple眼里是硬件還是軟件?也就是說,改版,讓apple和消費(fèi)者的溝通更加順暢,距離更加近了。
到這吧,事情實(shí)在太多,本來想分享一組廣告的。下次。
【轉(zhuǎn)載自:TaoBaoUED】 PS:我發(fā)表轉(zhuǎn)載的時候,添加圖片老是失敗呢?難道我人品不好?糾結(jié)……
- 目前還沒評論,等你發(fā)揮!