Amazon_Guideline.ppt

1、How to do design in A,Amazon Joyo Design Manager Oliver Hao 2006-9-1,amazon confidential,2,如何在亞馬遜作設(shè)計(jì)？,設(shè)計(jì)師的使命 設(shè)計(jì)師的核心能力 品牌規(guī)范 圖形設(shè)計(jì)規(guī)范 模版 模塊 元素 設(shè)計(jì)規(guī)范 項(xiàng)目設(shè)計(jì)流程及檢查點(diǎn) 設(shè)計(jì)部確認(rèn)步驟,amazon confidential,3,如何在亞馬遜作設(shè)計(jì)？,設(shè)計(jì)師的使命 設(shè)計(jì)師的核心能力 品牌規(guī)范 圖形設(shè)計(jì)規(guī)范 模版 模塊 元素 設(shè)計(jì)規(guī)范 項(xiàng)目設(shè)計(jì)流程及檢查點(diǎn) 設(shè)計(jì)部確認(rèn)步驟,amazon confidential,4,設(shè)計(jì)師的使命,“設(shè)計(jì)產(chǎn)出創(chuàng)造性的、直觀的、

2、吸引力的用戶界面，締造世界級(jí)的用戶體驗(yàn)并建立強(qiáng)大、富有價(jià)值的品牌” 為實(shí)現(xiàn)此目標(biāo)： 和業(yè)務(wù)部門、網(wǎng)站部、技術(shù)團(tuán)隊(duì)并肩協(xié)作，創(chuàng)造一致的、可擴(kuò)展的、高質(zhì)的用戶體驗(yàn)； 和客服、易用性部門及數(shù)據(jù)部門通力合作，用數(shù)據(jù)支持設(shè)計(jì)決策； 著眼于全球開展工作； 通過梳理設(shè)計(jì)流程，實(shí)施自動(dòng)化解決方案來減少成本 前瞻性的探索，提供方案給決策者,amazon confidential,5,如何在亞馬遜作設(shè)計(jì)？,設(shè)計(jì)師的使命 設(shè)計(jì)師的核心能力 品牌規(guī)范 圖形設(shè)計(jì)規(guī)范 模版 模塊 元素 設(shè)計(jì)規(guī)范 項(xiàng)目設(shè)計(jì)流程及檢查點(diǎn) 設(shè)計(jì)部確認(rèn)步驟,amazon confidential,6,設(shè)計(jì)師的核心能力_,技術(shù)技能及應(yīng)用能力 高效

3、的溝通及文案能力 時(shí)間管理 和業(yè)務(wù)部門的協(xié)作能力 解決問題及風(fēng)險(xiǎn)管理能力 靈活把握原則 態(tài)度,amazon confidential,7,設(shè)計(jì)師的核心能力_1,技術(shù)、技能及應(yīng)用 優(yōu)秀的圖形設(shè)計(jì)技能 優(yōu)秀的用戶界面設(shè)計(jì)技能 可根據(jù)意圖做出合理的設(shè)計(jì)判斷 設(shè)計(jì)表現(xiàn)積極 可作準(zhǔn)確地設(shè)計(jì)產(chǎn)出 精通PhotoShop, Illustrator or Freehand, Microsoft Office, Dreamweaver, HTML 對(duì)亞馬遜網(wǎng)站有深刻理解認(rèn)識(shí),amazon confidential,8,設(shè)計(jì)師的核心能力_2,高效的溝通及文案能力 懂得聆聽溝通對(duì)象 采取最適當(dāng)?shù)臏贤ǚ绞?和其他部門

4、主動(dòng)分享信息 和經(jīng)理、團(tuán)隊(duì)內(nèi)外成員保持溝通 從復(fù)雜信息中提煉要點(diǎn) 主動(dòng)在 發(fā)布文檔 清晰簡(jiǎn)練的郵件溝通 對(duì)郵件及時(shí)反饋（24小時(shí)內(nèi)）,amazon confidential,9,設(shè)計(jì)師的核心能力_3,時(shí)間管理 對(duì)項(xiàng)目難度可作快速準(zhǔn)確的評(píng)估 設(shè)計(jì)階段合理分配時(shí)間 在重疊項(xiàng)目中與各團(tuán)隊(duì)（專業(yè)人員）通力協(xié)作 確保設(shè)計(jì)流程可滿足項(xiàng)目進(jìn)度,amazon confidential,10,設(shè)計(jì)師的核心能力_4,和業(yè)務(wù)部門的協(xié)作能力 在項(xiàng)目計(jì)劃前期積極參與意見 理解業(yè)務(wù)和技術(shù)間的平衡 和amazon合作伙伴的協(xié)作能力 通過為業(yè)務(wù)部門提供主要難題的解決方案來執(zhí)行流程 懂得何時(shí)說“不”（不說或常說都不對(duì)，重要的是

5、有合理的理由） 遵守約定（可達(dá)成的）協(xié)助發(fā)布內(nèi)容？,amazon confidential,11,設(shè)計(jì)師的核心能力_5,解決問題及風(fēng)險(xiǎn)管理能力 提供解決方案勝于抱怨 可預(yù)測(cè)問題并系統(tǒng)的搞定他們 流程導(dǎo)向；根據(jù)項(xiàng)目的類型、維護(hù)等因素來改進(jìn)現(xiàn)有流程 可平衡項(xiàng)目需求的可測(cè)量性 調(diào)整期望值的能力 識(shí)別風(fēng)險(xiǎn)，可排定處理優(yōu)先級(jí),amazon confidential,12,設(shè)計(jì)師的核心能力_6,靈活把握原則 知道何時(shí)主動(dòng)，何時(shí)服從其他部門指揮 在無(wú)法達(dá)成共識(shí)前，清晰、邏輯地考慮（試圖克服自己的障礙） 如無(wú)法達(dá)成共識(shí)，沿著合適的匯報(bào)關(guān)系恰如其分的反映,amazon confidential,13,設(shè)計(jì)師的核

6、心能力_7,態(tài)度 與他人良好合作（分享工作和資源） 重視設(shè)計(jì)同事和其他團(tuán)隊(duì) 專業(yè)、幽默感、厚臉皮、耐心、可變通 在眾多小項(xiàng)目中發(fā)揮穩(wěn)定，避免三分鐘熱度,amazon confidential,14,有問題么？ Have a break,amazon confidential,15,如何在亞馬遜作設(shè)計(jì)？,設(shè)計(jì)師的使命 設(shè)計(jì)師的核心能力_ 品牌規(guī)范 圖形設(shè)計(jì)規(guī)范 模版 模塊 元素 設(shè)計(jì)規(guī)范 項(xiàng)目設(shè)計(jì)流程及檢查點(diǎn) 設(shè)計(jì)部確認(rèn)步驟,amazon confidential,16,品牌的意義,為何amazon需要有力的、統(tǒng)一的品牌？ 人們?cè)敢夂拖矚g的人做生意，并愿意將他介紹給他人，他是生活的一部分。 我們

7、有越來越多的產(chǎn)品分類和合作者，聲音嘈雜，樹立一個(gè)統(tǒng)一的品牌非常重要。 線上購(gòu)買的市場(chǎng)成長(zhǎng)迅速，只有確定的、單一的品牌易于記憶。,amazon confidential,17,品牌的定位1,amazon品牌的定位： 目標(biāo)：日常的購(gòu)買，使更多人更頻繁地購(gòu)買 品牌承諾：用最簡(jiǎn)便的流程、最優(yōu)惠的價(jià)格得到你想要的商品 證明： 便捷：1鍵購(gòu)買、易于使用 選擇：商品的廣度和深度 價(jià)格：免運(yùn)費(fèi)、 資訊：review 個(gè)性化推薦 ,amazon confidential,18,品牌的定位2,amazon品牌的定位： 品牌特征： 先驅(qū)的、值得信賴的、尊重（客戶）的、智能的 亞馬遜尊重您的智慧，重視您的時(shí)間 品牌個(gè)

8、性： 平易近人的、聰明的、熱心的、機(jī)智幽默的、謙遜的,amazon confidential,19,品牌的傳遞,在線部分的品牌傳遞元素： Logo 圓角 基本色 字體 價(jià)格表現(xiàn)形式 傳統(tǒng)產(chǎn)品圖片 Button 插圖,amazon confidential,20,有問題么？,amazon confidential,21,如何在亞馬遜作設(shè)計(jì)？,設(shè)計(jì)師的使命 設(shè)計(jì)師的核心能力_ 品牌規(guī)范 圖形設(shè)計(jì)規(guī)范 模版 模塊 元素 設(shè)計(jì)規(guī)范 項(xiàng)目設(shè)計(jì)流程及檢查點(diǎn) 設(shè)計(jì)部確認(rèn)步驟,amazon confidential,22,圖形設(shè)計(jì)規(guī)范,色彩 文字圖形設(shè)計(jì) 插圖 TCP 60 x60 和 90 x90 site

9、 skin (stripe)彩條 節(jié)日,amazon confidential,23,圖形設(shè)計(jì)規(guī)范：色彩,基本色 Gateway Yellow Orange Cream 附加色 Navy Mist Olive Butter Squash Celery Dk. orange Red Ocean Md. blue,amazon confidential,24,圖形設(shè)計(jì)規(guī)范：文字圖形設(shè)計(jì),字體 基本：helevetica neu 次級(jí)：bliss Banner Banner中的文字須清晰易讀 色彩使用可稍弱，以減少對(duì)推廣、產(chǎn)品的沖擊 促銷信息應(yīng)使用orange，以醒目突出,amazon confid

10、ential,25,圖形設(shè)計(jì)規(guī)范：插圖1,作為點(diǎn)睛之筆的插圖可增加推廣設(shè)計(jì)的價(jià)值，使主題明確，視覺醒目 在大尺寸中（如TCG, skin）,可與圖形文字混合使用 在小尺寸中(promo box, 或stripe line),可與推廣細(xì)節(jié)描述文本字并排 充分考慮對(duì)象，扁平，清爽并且便于縮放把重點(diǎn)放在可識(shí)別的條目上，切忌用來講故事， 使用色塊，避免使用線條圖形,amazon confidential,26,圖形設(shè)計(jì)規(guī)范：插圖2,最理想做法： 簡(jiǎn)單的對(duì)象，或者不超過2-3個(gè)的組合； 不超過3個(gè)色盤色+白色（避免使用黑色） 使用扁平色塊 可以這樣： 如有幫助，結(jié)合一些透視效果，但最好還是扁平風(fēng)格或剪影

11、 在大尺寸中可有更多細(xì)節(jié)，但細(xì)節(jié)還要是要適可而止，以便于只接縮小應(yīng)用 要避免： 描邊或復(fù)雜線圖，一個(gè)竅門是使用色塊留白來形成線 使用漸變 陰影效果（如必要可極淺地使用）,amazon confidential,27,圖形設(shè)計(jì)規(guī)范：TCG_1,基本規(guī)范： 保持視覺一致性 節(jié)省不必要的容量，圖片成本 保證特色產(chǎn)品目錄的出現(xiàn) 規(guī)格： Shallowwidth380px | height100px | weight 7k Deepwidth380px | height160px | weight15k Note Max height for gateway 125px,amazon confident

12、ial,28,圖形設(shè)計(jì)規(guī)范：TCG_2,指導(dǎo)規(guī)范（上）： 避免使用邊框。站點(diǎn)頁(yè)面里已經(jīng)大量使用邊線、圓角，大量邊角會(huì)造成笨重、斑駁的邊界留白。無(wú)邊界的圖形看起來更自然并更容易安排在不同的白色空間。 文字要醒目突出，在主要信息上使用亮色或熱烈的顏色，和使用在第二層次的信息上的緩和色調(diào)保持和諧。 主要字體： Helevetica Neue Bold / Light 如含有“行動(dòng)”鏈接，使用hex# 003399鏈接色并加下劃線，使用非鋸齒文字；也可作成small tan button*； Store banner最好是單獨(dú)的居左的圖形，TCG則應(yīng)該居中；,amazon confidential,2

13、9,圖形設(shè)計(jì)規(guī)范：TCG_3,指導(dǎo)規(guī)范（下）： 嚴(yán)格限制使用動(dòng)畫 動(dòng)畫效果只用于亞馬遜即大幅的讓利行動(dòng)或倒計(jì)時(shí)信息 須site VP批準(zhǔn) 動(dòng)畫只能播放一次 請(qǐng)時(shí)刻記住“品牌規(guī)范”,amazon confidential,30,圖形設(shè)計(jì)規(guī)范：TCG_4,創(chuàng)作大綱 由于TCG位置是頁(yè)面最有價(jià)值、最突出的資源；設(shè)計(jì)師、產(chǎn)品線、編輯應(yīng)通力協(xié)作： 這個(gè)TCG的目標(biāo)是什么？換句話說：期待它實(shí)現(xiàn)什么？ 怎樣衡量它成功與否或?qū)⑷绾魏饬浚?你想傳達(dá)什么信息或情緒（如精品？浪漫？換季？） 這個(gè)資訊能保持多久？更新的頻率？如果只是短時(shí)間有效，有何方法能延長(zhǎng)其周期，或可否使用tcg下方的位置來做短期推廣？ 這個(gè)TCG

14、設(shè)計(jì)是否適用于其他頻道（或使用其他頁(yè)面位置）？如果能，就預(yù)先考慮，并確定更靈活適用的設(shè)計(jì)和措辭，這樣便于用戶在任何頁(yè)面或位置都能認(rèn)出該信息； 如果需要表現(xiàn)生活方式的圖像，是否有圖片預(yù)算？,amazon confidential,31,圖形設(shè)計(jì)規(guī)范：TCG_5,案例分析（上）： 如信息精煉，可使用最標(biāo)準(zhǔn)的TCG，如信息較多，可使用一張90 x90圖片加html文本文字 使用asin圖片結(jié)合折扣圖形增加畫面趣味性（投放周期短）,amazon confidential,32,圖形設(shè)計(jì)規(guī)范：TCG_6,案例分析（中）： 無(wú)邊線的圖形，結(jié)合無(wú)限制自然形成的邊界使畫面更有趣味，并使不同分辨率下的顯示更靈活

15、 TCG可結(jié)合背景圖形使用，可增加趣味性并襯托商品和信息，使設(shè)計(jì)更整體 如需要使用lifestyle照片營(yíng)造氣氛或構(gòu)建場(chǎng)景，需增加邊線或幾何邊緣來裁切照片，如必須使用邊線，請(qǐng)盡量淺淡或用漸隱方式,amazon confidential,33,圖形設(shè)計(jì)規(guī)范：TCG_7,案例分析（下）： 聯(lián)合促銷 TCG 用于支持聯(lián)合銷售的asin或極暢銷的asin 跨店促銷TCG 跨店促銷可能出現(xiàn)在多個(gè)頻道或不同位置，作此類設(shè)計(jì)請(qǐng)記住使用靈活性的設(shè)計(jì)方式和一致的措辭，以確定用戶在不同頻道或位置看到明白這是同一個(gè)促銷 如有返款信息（如右圖），TCG高度可被增加到180px,amazon confidential,

16、34,圖形設(shè)計(jì)規(guī)范：60 x60 和 90 x90,設(shè)計(jì)規(guī)范： 60用于左右欄的promo box中，90用于中欄中的廣告語(yǔ)邊 圖形設(shè)計(jì)不必要包含現(xiàn)有推廣中的所有信息，用吸引人的方式只點(diǎn)主題或有價(jià)值信息即可，在其標(biāo)題和廣告語(yǔ)再來展開描述 盡量保持至少有一個(gè)asin出現(xiàn)在頁(yè)面上,amazon confidential,35,圖形設(shè)計(jì)規(guī)范：60 x60 和 90 x90,案例分析（上）： 文字圖形 適合小特惠，或緊急制作情況 可立刻從圖片服務(wù)器找到已設(shè)計(jì)并上傳完成的圖片，編輯可任選 單頁(yè)中保持最多3個(gè)且不得臨近使用 底紋圖案 適合裝飾點(diǎn)綴：點(diǎn)睛之筆來突出asin信息，或提亮一個(gè)小型推廣 圖案簡(jiǎn)單抽

17、象，可適用于多種樣式和色彩 單頁(yè)中保持最多3個(gè)且不得臨近使用 須專門提出設(shè)計(jì)需求,amazon confidential,36,圖形設(shè)計(jì)規(guī)范：60 x60 和 90 x90,案例分析（下）： Asin面板（90only） 適用于給asin圖片打個(gè)特別推廣信息標(biāo)簽 此形式不可取代折扣，折扣標(biāo)簽為系統(tǒng)自動(dòng)生成 標(biāo)簽中最多2行文字 須專門提設(shè)計(jì)需求 產(chǎn)品特性 適用于大規(guī)格推廣，需精心設(shè)計(jì) 可包含asin圖片，也可使用插圖 須專門提設(shè)計(jì)需求,amazon confidential,37,圖形設(shè)計(jì)規(guī)范：skin (stripe),規(guī)范 尺寸：590最寬 x 40最高 (圖片裁切) 容量：最大4k.,am

18、azon confidential,38,圖形設(shè)計(jì)規(guī)范：skin (stripe),案例分析（上）： 文字 一行簡(jiǎn)要文字，最多2行文字 強(qiáng)調(diào)促銷或目錄名，或折扣幅度等信息 默認(rèn)字體：helvetica neue. 插圖 最好使用扁平風(fēng)格 Button或鏈接 行動(dòng)button或鏈接，文字避免法務(wù)風(fēng)險(xiǎn) 使用small tan button 用可理解的信息作鏈接,amazon confidential,39,圖形設(shè)計(jì)規(guī)范：skin (stripe),案例分析（下）： 特性 合作skin 常用來作合作、贊助的推廣或最暢銷產(chǎn)品 產(chǎn)品線推廣 適合hard line 可用作新店開張，用作合作、贊助的推廣或最

19、暢銷產(chǎn)品 動(dòng)畫？ No！ 取決于文件容量、表現(xiàn)效果，和可維護(hù)性,amazon confidential,40,圖形設(shè)計(jì)規(guī)范：節(jié)日,節(jié)日主題可作為全場(chǎng)主題 唯一主題、統(tǒng)一設(shè)計(jì)、統(tǒng)一風(fēng)格 案例：,amazon confidential,41,amazon confidential,42,有問題么？,amazon confidential,43,如何在亞馬遜作設(shè)計(jì)？,設(shè)計(jì)師的使命 設(shè)計(jì)師的核心能力 品牌規(guī)范 圖形設(shè)計(jì)規(guī)范 模版 模塊 元素 設(shè)計(jì)規(guī)范 項(xiàng)目設(shè)計(jì)流程及檢查點(diǎn) 設(shè)計(jì)部確認(rèn)步驟,amazon confidential,44,模版 模塊 元素 設(shè)計(jì)規(guī)范,Amazon站點(diǎn)構(gòu)成基本原理： 元素包括

20、： 色彩 文字 圖形 模塊構(gòu)成： 元素+元素+元素 模版構(gòu)成： 模塊+模塊+模塊,amazon confidential,45,元素,Html 文字 色彩 Icon Button Banner 非產(chǎn)品圖片（參見圖形設(shè)計(jì)規(guī)范） 產(chǎn)品圖片 導(dǎo)航 折扣標(biāo)簽規(guī)則 標(biāo)志的tagline用法 Skin的用法（參見圖形設(shè)計(jì)規(guī)范）,amazon confidential,46,元素：1.html文字,amazon confidential,47,元素：2.色彩,amazon confidential,48,元素：3.icon,amazon confidential,49,元素：4.button,文件命名：“b

21、utton-text-sm-sec.gif” 尺寸 lg ：大執(zhí)行該頁(yè)面最重要?jiǎng)幼?md ：中 重要。一頁(yè)中可多處使用 sm ：小 不太重要。 rd ：圓 如Go button 優(yōu)先級(jí) Pri：主要（金色） Sec：次要（淺棕色） 特例：如一鍵，預(yù)訂等,amazon confidential,50,元素：4.button,amazon confidential,51,元素：5.Store Banner,構(gòu)成 第一行：店名（頻道名） 第二行（可選）：折扣或精選產(chǎn)品信息。 靜態(tài)方式。闡述當(dāng)前的價(jià)值點(diǎn)，作為亞馬遜品牌價(jià)值的具體延展 尺寸 兩行文字最高50px，一行文字最高35px; 最大寬度根據(jù)頻道情況決定 字體 第一行：Helvetica Neue Bold* /