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