旅游網(wǎng)站設(shè)計(jì)課件完整版電子教案

1、1網(wǎng)站的概念網(wǎng)頁與網(wǎng)站網(wǎng)站是指在因特網(wǎng)上根據(jù)一定的規(guī)則，使用HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用）等工具制作的用于展示特定內(nèi)容相關(guān)網(wǎng)頁的集合。簡(jiǎn)單地說，網(wǎng)站是一種溝通工具，人們可以通過網(wǎng)站來發(fā)布自己想要公開的資訊，或者利用網(wǎng)站來提供相關(guān)的網(wǎng)絡(luò)服務(wù)。人們可以通過網(wǎng)頁瀏覽器來訪問網(wǎng)站，獲取自己需要的資訊或者享受網(wǎng)絡(luò)服務(wù)。網(wǎng)頁是構(gòu)成網(wǎng)站的基本元素，是承載各種網(wǎng)站應(yīng)用的平臺(tái)。通俗地說，您的網(wǎng)站就是由網(wǎng)頁組成的。網(wǎng)站設(shè)計(jì)WEB DESIGN01前期調(diào)研2網(wǎng)站設(shè)計(jì)流程02邏輯架構(gòu)03功能布局04視覺設(shè)計(jì)05前端開發(fā)06后臺(tái)建設(shè)07網(wǎng)站測(cè)試08運(yùn)營推廣網(wǎng)站設(shè)計(jì)WEB DESIGN013前期調(diào)研網(wǎng)站調(diào)研的目

2、的：（一）前期調(diào)研：為了解市場(chǎng)需求，確定網(wǎng)站功能定位而調(diào)研。（二）中期調(diào)研：調(diào)查研究現(xiàn)有同類網(wǎng)站，為網(wǎng)站用戶界面的設(shè)計(jì)而調(diào)研。（三）后期調(diào)研：調(diào)查研究現(xiàn)有同類網(wǎng)站和用戶反饋，為網(wǎng)站改版，提升用戶體驗(yàn)而調(diào)研?？傮w目的：通過網(wǎng)站調(diào)研，網(wǎng)站策劃者才能客觀地判斷用戶的真正需求，從而對(duì)網(wǎng)站進(jìn)行有針對(duì)性的策劃使其符合當(dāng)今互聯(lián)網(wǎng)潮流，能夠更好地為網(wǎng)址功能策劃指明方向。網(wǎng)站設(shè)計(jì)WEB DESIGN024邏輯架構(gòu)網(wǎng)站架構(gòu)設(shè)計(jì)是網(wǎng)站設(shè)計(jì)的重要組成部分。在網(wǎng)站調(diào)研完成之后，網(wǎng)站的目標(biāo)及內(nèi)容主題等有關(guān)問題已經(jīng)確定。架構(gòu)設(shè)計(jì)要做的事情就是如何將內(nèi)容劃分為清晰合理的層次體系，比如欄目的劃分及其關(guān)系、網(wǎng)頁的層次及其關(guān)系、鏈

3、接的路徑設(shè)置、功能在網(wǎng)頁上的分配等等，以上這些都僅僅是前臺(tái)結(jié)構(gòu)設(shè)計(jì)，而前臺(tái)結(jié)構(gòu)設(shè)計(jì)的實(shí)現(xiàn)需要強(qiáng)大的后臺(tái)支撐，后臺(tái)也應(yīng)有良好的結(jié)構(gòu)設(shè)計(jì)以保證前臺(tái)結(jié)構(gòu)設(shè)計(jì)的實(shí)現(xiàn)。網(wǎng)站設(shè)計(jì)WEB DESIGN5邏輯架構(gòu)網(wǎng)站設(shè)計(jì)WEB DESIGN6扁平架構(gòu)扁平結(jié)構(gòu)的網(wǎng)站就是指所有的網(wǎng)頁都在根目錄下。多用于建設(shè)一些中小型企業(yè)網(wǎng)站。優(yōu)點(diǎn)：有利于搜索引擎抓取。缺點(diǎn)：內(nèi)容雜亂，用戶體驗(yàn)不好。網(wǎng)站設(shè)計(jì)WEB DESIGN7樹狀架構(gòu)樹形結(jié)構(gòu)的網(wǎng)站就是網(wǎng)站根目錄下有多個(gè)分類，就是給網(wǎng)站設(shè)立欄目或者頻道。樹形結(jié)構(gòu)的網(wǎng)站一般適合類別多，內(nèi)容量大的網(wǎng)站，像資訊站，電子商務(wù)網(wǎng)站等等。優(yōu)點(diǎn)：分類詳細(xì)，用戶體驗(yàn)好。缺點(diǎn)：分類越深，不利于搜索

4、引擎抓取內(nèi)容。網(wǎng)站設(shè)計(jì)WEB DESIGN038功能布局網(wǎng)頁結(jié)構(gòu)即網(wǎng)頁內(nèi)容的布局。創(chuàng)建網(wǎng)頁結(jié)構(gòu)實(shí)際上就是對(duì)網(wǎng)頁內(nèi)容的布局進(jìn)行規(guī)劃，網(wǎng)頁結(jié)構(gòu)的創(chuàng)建是頁面優(yōu)化的重要環(huán)節(jié)之一，會(huì)直接影響頁面的用戶體驗(yàn)及相關(guān)性，而且還在一定程度上影響網(wǎng)站的整體結(jié)構(gòu)及頁面被收錄的數(shù)量。網(wǎng)頁組成元素編輯從頁面結(jié)構(gòu)的角度上看，網(wǎng)頁主要由導(dǎo)航欄、欄目、及正文內(nèi)容這三大要素組成。網(wǎng)頁結(jié)構(gòu)的創(chuàng)建、網(wǎng)頁內(nèi)容布局的規(guī)劃實(shí)際也是圍繞這三大組成要素展開的。網(wǎng)站設(shè)計(jì)WEB DESIGN9功能布局網(wǎng)站設(shè)計(jì)WEB DESIGN0410視覺設(shè)計(jì)網(wǎng)頁設(shè)計(jì)的工作目標(biāo)，是以之前制定的頁面布局低保真原型的基礎(chǔ)上通過使用更合理的顏色、字體、圖片、樣式進(jìn)行

5、頁面設(shè)計(jì)美化，在功能限定的情況下，盡可能給予用戶完美的視覺體驗(yàn)來制作網(wǎng)頁高保真原型效果圖（圖1-5）。高級(jí)的網(wǎng)頁設(shè)計(jì)甚至?xí)紤]到通過聲光、交互等來實(shí)現(xiàn)更好的視聽感受。網(wǎng)頁設(shè)計(jì)主要以Adobe產(chǎn)品為主，常見的工具包括PS、AI等是圖像處理與圖像設(shè)計(jì)工具，本教材也會(huì)在之后的章節(jié)中重點(diǎn)介紹此部分內(nèi)容。網(wǎng)站設(shè)計(jì)WEB DESIGN11視覺設(shè)計(jì)網(wǎng)站設(shè)計(jì)WEB DESIGN0512前端開發(fā)（一）使用html語言+css樣式并結(jié)合Javascript負(fù)責(zé)產(chǎn)品的前端開發(fā)和頁面制作；（二）熟悉W3C標(biāo)準(zhǔn)和各主流瀏覽器在前端開發(fā)中的差異，提供針對(duì)不同瀏覽器的前端頁面解決方案；（三）負(fù)責(zé)相關(guān)產(chǎn)品的需求以及前端程序的

6、實(shí)現(xiàn)，提供合理的前端架構(gòu)；（四）與產(chǎn)品、后臺(tái)開發(fā)人員保持良好溝通，能快速理解、消化各方需求，并落實(shí)為具體的開發(fā)工作；（五）了解服務(wù)器端的相關(guān)工作，在交互體驗(yàn)、產(chǎn)品設(shè)計(jì)等方面有自己的見解。網(wǎng)站設(shè)計(jì)WEB DESIGN0613后臺(tái)建設(shè)網(wǎng)站后臺(tái)功能，是一種用來管理網(wǎng)站的管理員才能進(jìn)入的系統(tǒng)。旅游網(wǎng)站后臺(tái)的大致（類似）功能：（一）系統(tǒng)管理：管理員管理，可以新增管理員及修改管理員密碼；數(shù)據(jù)庫備份，為保證數(shù)據(jù)安全，本系統(tǒng)采用了數(shù)據(jù)庫備份功能；上傳文件管理，管理增加產(chǎn)品時(shí)上傳的圖片及其他文件；（二）企業(yè)信息：可設(shè)置修改企業(yè)的各類信息及介紹；（三）產(chǎn)品管理：產(chǎn)品類別新增修改管理，產(chǎn)品添加修改以及產(chǎn)品的審核；（

7、四）下載中心：可分類增加各種文件，如驅(qū)動(dòng)和技術(shù)文檔等文件的下載；（五）訂單管理：查看訂單的詳細(xì)信息及訂單處理；網(wǎng)站設(shè)計(jì)WEB DESIGN0614后臺(tái)建設(shè)（六）會(huì)員管理：查看修改刪除會(huì)員資料，及鎖定解鎖功能可在線給會(huì)員發(fā)信；（七）新聞管理：能分大類和小類新聞，不再受新聞欄目的限制；（八）留言管理：管理信息反饋及注冊(cè)會(huì)員的留言，注冊(cè)會(huì)員的留言可在線回復(fù)，未注冊(cè)會(huì)員可使用在線發(fā)信功能給于答復(fù)；（九）營銷網(wǎng)絡(luò)：修改營銷網(wǎng)絡(luò)欄目的信息；（十）調(diào)查管理：發(fā)布修改新調(diào)查；（十一）全新模版功能：在線編輯修改模版；（十二）全新掛接數(shù)據(jù)庫：在線表編輯，添加數(shù)據(jù)表，編輯數(shù)據(jù)庫，加添編輯文件掛接網(wǎng)站等等；（十三）系

8、統(tǒng)日志功能：每一步操作都有記錄，系統(tǒng)更安全；網(wǎng)站設(shè)計(jì)WEB DESIGN0715網(wǎng)站測(cè)試網(wǎng)站測(cè)試是指的當(dāng)一個(gè)網(wǎng)站制作完上傳到服務(wù)器之后針對(duì)網(wǎng)站的各項(xiàng)性能情況的一項(xiàng)檢測(cè)工作。它與軟件測(cè)試有一定的區(qū)別，其除了要求外觀的一致性以外，還要求其在各個(gè)瀏覽器下的兼容性。以及在不同環(huán)境下的顯示差異。網(wǎng)站設(shè)計(jì)WEB DESIGN0816運(yùn)營推廣網(wǎng)站運(yùn)營是指一切為了提升網(wǎng)站服務(wù)于用戶的效率，而從事與網(wǎng)站后期運(yùn)作、經(jīng)營有關(guān)的行為工作；范疇通常包括網(wǎng)站內(nèi)容更新維護(hù)、網(wǎng)站服務(wù)器維護(hù)、網(wǎng)站流程優(yōu)化、數(shù)據(jù)挖掘分析、用戶研究管理、網(wǎng)站營銷策劃等，網(wǎng)站運(yùn)營常用的指標(biāo)：PV、IP、注冊(cè)用戶、在線用戶、網(wǎng)站跳出率、轉(zhuǎn)化率、付費(fèi)用

9、戶、在線時(shí)長、購買頻次、ARPU值。網(wǎng)站設(shè)計(jì)WEB DESIGN0817運(yùn)營推廣網(wǎng)站推廣就是以互聯(lián)網(wǎng)為基礎(chǔ)，借助平臺(tái)和網(wǎng)絡(luò)媒體的交互性來輔助營銷目標(biāo)實(shí)現(xiàn)的一種新型的市場(chǎng)營銷方式。當(dāng)前傳播常見的推廣方式主要是在各大網(wǎng)站推廣服務(wù)商中通過買廣告之類等等方式來實(shí)現(xiàn)，免費(fèi)網(wǎng)站推廣包括：SEO優(yōu)化網(wǎng)站內(nèi)容或構(gòu)架提升網(wǎng)站在搜索引擎的排名，在論壇、微博、博客、微信、QQ空間等平臺(tái)發(fā)布信息，在其他熱門平臺(tái)發(fā)布網(wǎng)站外部鏈接等。網(wǎng)站設(shè)計(jì)WEB DESIGN02網(wǎng)站設(shè)計(jì)WEB DESIGN18旅游網(wǎng)站分類特點(diǎn)01綜合門戶類02特定產(chǎn)品類03社交攻略類19網(wǎng)店經(jīng)營中的視覺營銷視覺營銷VISUAL MARKETING20

10、旅游網(wǎng)站分類與特點(diǎn)旅游網(wǎng)站是指以網(wǎng)絡(luò)為主體，以旅游信息庫、電子化商務(wù)銀行為基礎(chǔ)，利用最先進(jìn)的電子手段運(yùn)作旅游業(yè)及其分銷系統(tǒng)的商務(wù)體系。旅游電子商務(wù)就為廣大旅游業(yè)同行提供了一個(gè)互聯(lián)網(wǎng)的平臺(tái)。旅游網(wǎng)站利用先進(jìn)的計(jì)算機(jī)網(wǎng)絡(luò)及通信技術(shù)和電子商務(wù)的基礎(chǔ)環(huán)境，整合旅游企業(yè)的內(nèi)部和外部的資源，擴(kuò)大旅游信息的傳播和推廣，實(shí)現(xiàn)旅游產(chǎn)品的在線發(fā)布和銷售，為旅游者與旅游企業(yè)之間提供一個(gè)知識(shí)共享，增進(jìn)交流的平臺(tái)并且形成了交互平臺(tái)的網(wǎng)絡(luò)化運(yùn)營模式。網(wǎng)站設(shè)計(jì)WEB DESIGN0121綜合門戶類綜合門戶類旅游網(wǎng)站比較常見，例如“攜程網(wǎng)”、“途牛網(wǎng)”、“驢媽媽”、“飛豬網(wǎng)”等等。此類網(wǎng)站包含了和旅行相關(guān)的消費(fèi)者所需的一切旅

11、游類產(chǎn)品例如“線路類產(chǎn)品”、“票務(wù)類產(chǎn)品”、“交通類產(chǎn)品”、“酒店類產(chǎn)品”，因此此類旅游網(wǎng)站整個(gè)邏輯架構(gòu)根據(jù)網(wǎng)站的功能和產(chǎn)品分類來設(shè)定，比較龐大與復(fù)雜，網(wǎng)站首頁內(nèi)容豐富，分類也非常清晰，因此此類首頁常以根據(jù)產(chǎn)品類型的不同進(jìn)行“模塊化”布局，在頁面主屏區(qū)域也常設(shè)置有不同類型產(chǎn)品的搜索區(qū)域，讓目的性比較強(qiáng)的用戶可以直接通過關(guān)鍵詞的搜索尋找到所需產(chǎn)品，而對(duì)一些目的性比較弱的用戶也可以在首頁不同類型產(chǎn)品的模塊區(qū)域中推送的產(chǎn)品中瀏覽自己所感興趣的產(chǎn)品。網(wǎng)站設(shè)計(jì)WEB DESIGN22綜合門戶類網(wǎng)站設(shè)計(jì)WEB DESIGN0223特定產(chǎn)品類 特定產(chǎn)品類旅游網(wǎng)站和綜合門戶類所提供的“一站式”服務(wù)不同，它只提

12、供某一類型的旅游產(chǎn)品，比如“民宿類網(wǎng)站”：Airbnb，Booking繽客，自在客等。此類旅游網(wǎng)站由于提供產(chǎn)品類別比較單一，因此網(wǎng)站的架構(gòu)相對(duì)“綜合門戶類”的旅游網(wǎng)站來說稍稍簡(jiǎn)單。由于此類網(wǎng)站用戶的目的性較強(qiáng)，因此在首頁的設(shè)計(jì)上布局也比較簡(jiǎn)潔，常以搜索框?yàn)橹鳎o以一些熱門產(chǎn)品或者分類產(chǎn)品的推送。網(wǎng)站設(shè)計(jì)WEB DESIGN24特定產(chǎn)品類網(wǎng)站設(shè)計(jì)WEB DESIGN0325社交攻略類 與“綜合門戶類”、“特定產(chǎn)品類”完全不同的是社交攻略類旅游網(wǎng)站的功能主要用戶完成某次旅行之后可以在網(wǎng)站平臺(tái)上發(fā)布自己的游記攻略，而對(duì)于一些計(jì)劃旅行與在途中的用戶則能查看這些游記攻略，“螞蜂窩”是此類網(wǎng)站中比較有代表

13、性的。由于網(wǎng)站內(nèi)容由用戶發(fā)布的體驗(yàn)為主，因此此類網(wǎng)站也帶有非常強(qiáng)的社交功能，該類型網(wǎng)站首頁主要一定的分類來推送的游記攻略為主。網(wǎng)站設(shè)計(jì)WEB DESIGN26社交攻略類網(wǎng)站設(shè)計(jì)WEB DESIGN827201旅游電商網(wǎng)站視覺設(shè)計(jì)管理學(xué)院旅游管理專業(yè)旅游網(wǎng)站設(shè)計(jì)01設(shè)計(jì)思維DESIGN THINKING28網(wǎng)站設(shè)計(jì)師的設(shè)計(jì)思維29設(shè)計(jì)思維思維不僅要求設(shè)計(jì)師有較高的審美品位和扎實(shí)的視覺形象表現(xiàn)技法，而且要求設(shè)計(jì)師能通過審美與技術(shù)來實(shí)現(xiàn)商家的目的并且滿足用戶的需求，從而通過分析思考研究來做設(shè)計(jì)。視覺設(shè)計(jì)最重要的四個(gè)關(guān)鍵原則是：對(duì)齊，對(duì)比，空間 ，重復(fù)。通過掌握這四種基本原則來快速掌握頁面的視覺設(shè)計(jì)。

14、設(shè)計(jì)思維DESIGN THINKING1.1對(duì)齊1.2對(duì)比1.3重復(fù)30設(shè)計(jì)思維設(shè)計(jì)思維DESIGN THINKING1.4親密1.131對(duì)齊所有的元素不能在頁面上隨意的放置，頁面之間的元素與元素之間需要有一些視覺上的聯(lián)接，按照對(duì)齊的規(guī)律建立一種清晰的架構(gòu)來提升頁面的可讀性。設(shè)計(jì)思維DESIGN THINKING32對(duì)齊設(shè)計(jì)思維DESIGN THINKING1.133對(duì)齊對(duì)齊的根本目的是讓頁面統(tǒng)一富有條理，而且元素之間彼此相關(guān)，這需要在各個(gè)元素之間存在某些視覺紐帶。即使對(duì)齊的元素，物理距離離得非常遠(yuǎn)，但是在用戶的眼中，會(huì)形成一條隱藏著的線把它們連在一塊。在使用對(duì)齊這個(gè)原則的時(shí)候，一定要秉承一個(gè)

15、原則，頁面上只使用一種文本對(duì)齊方式，盡量少用居中對(duì)齊這種方式，因?yàn)榫又袑?duì)齊，對(duì)于畫面的整體把控能力要有一定要求。設(shè)計(jì)思維DESIGN THINKING1.234對(duì)比頁面上的所有元素要在整體風(fēng)格統(tǒng)一的基礎(chǔ)上需要有一些對(duì)比，不應(yīng)該太過相似，例如字體顏色大小，形狀空間等方面讓他們需要有一些截然不同的處理方法，這樣才能引人注目，讓作品吸引用戶的眼球。設(shè)計(jì)思維DESIGN THINKING1.235對(duì)比對(duì)比原則包含的表現(xiàn)方式很多，比如說虛實(shí)對(duì)比，空間對(duì)比，形狀對(duì)比，字體對(duì)比，大小對(duì)比，空間對(duì)比，色彩對(duì)比等。對(duì)比不僅會(huì)讓畫面更加美觀，而且也會(huì)增加頁面的可讀性。只要你強(qiáng)調(diào)的部分吸引用戶，用戶會(huì)下意識(shí)的往下觀

16、看，只要將重點(diǎn)提煉出來，就能使整個(gè)版面信息組織分明，富有層級(jí)和組織性，在視覺上吸引用戶往下瀏覽。設(shè)計(jì)思維DESIGN THINKING36對(duì)比設(shè)計(jì)思維DESIGN THINKING1.337重復(fù)根據(jù)格式塔心理學(xué)，在頁面中需要有相同屬性的元素在整個(gè)作品中重復(fù)出現(xiàn)，可以重復(fù)色彩，形狀，材質(zhì)空間關(guān)系，字體大小等等，這樣可以形成一些規(guī)律，讓用戶可以在潛意識(shí)的過程中去找到獲取信息的方式與規(guī)律。設(shè)計(jì)思維DESIGN THINKING38重復(fù)設(shè)計(jì)思維DESIGN THINKING1.339重復(fù)重復(fù)原則不僅僅表現(xiàn)在字體上，頁面中任何一個(gè)元素都可以成為設(shè)計(jì)中重復(fù)的對(duì)象。比如字體，字號(hào)，顏色，形狀甚至是版式。重復(fù)

17、的目的就是統(tǒng)一增強(qiáng)視覺效果，不要低估頁面視覺效果的威力，如果一個(gè)作品看上去非常有趣往往也更易于閱讀。重復(fù)可以將頁面中的每個(gè)元素連接在一起從而提高整個(gè)作品的統(tǒng)一性。否則這些元素只是彼此孤立的單元重復(fù)，這不僅對(duì)于單頁的作品很有用，對(duì)于多頁的設(shè)計(jì)更顯重要。設(shè)計(jì)思維DESIGN THINKING1.440親密在頁面中彼此相關(guān)的一些元素應(yīng)該靠在一起成為一個(gè)組合，如果多個(gè)元素之間存在一些相關(guān)性，他們就可以成為一個(gè)視覺單元，而不是多個(gè)單一的個(gè)體組成頁面，這樣有助于將信息進(jìn)行歸類，減少混亂，為用戶提供清晰的邏輯架構(gòu)。設(shè)計(jì)思維DESIGN THINKING41親密設(shè)計(jì)思維DESIGN THINKING1.442

18、親密通過親密性原則，將一定性質(zhì)的元素分為一組，就會(huì)讓頁面無論是視覺感官還是閱讀層級(jí)來看，都更富有條理性，也是印證了那句話“物以類聚人以群分”。親密性的第一步是對(duì)元素進(jìn)行歸類整合，使畫面中所需要出現(xiàn)的元素按照某種邏輯結(jié)構(gòu)去進(jìn)行劃分，對(duì)于同一組合內(nèi)的元素，在物理位置上賦予其更近的距離而不同組合之間的物理位置要更遠(yuǎn)，這也是頁面留白設(shè)計(jì)的一個(gè)核心。設(shè)計(jì)的親密性將頁面展示的信息一直往下延伸，讓顧客看到是會(huì)覺得應(yīng)該按照這個(gè)軌跡去看下去。設(shè)計(jì)思維DESIGN THINKING02版式原理LAYOUT DESIGN43旅游網(wǎng)站版式設(shè)計(jì)原理2.144版面構(gòu)圖原理版面構(gòu)圖會(huì)受到色彩，圖片，文案等元素的影響，接下來

19、介紹一些構(gòu)圖原理，讓大家了解版面構(gòu)圖的法則：版式原理LAYOUT DESIGN45讓雜亂的圖片井然有序版式原理LAYOUT DESIGN任何元素亂放都不會(huì)好看，需要利用網(wǎng)格系統(tǒng)將版面整齊呈現(xiàn)，將頁面進(jìn)行等分。但我們應(yīng)該在普遍中尋找一些變化，讓畫面在統(tǒng)一中變得親切有趣。46讓瑣碎的元素變得更有條理版式原理LAYOUT DESIGN可以通過為畫面添加色塊的方式讓畫面變得更整齊，也更簡(jiǎn)潔。通過不同產(chǎn)品添加不同的色塊，既能區(qū)分出產(chǎn)品，又不缺乏一定的統(tǒng)一感。也可以通過一個(gè)形狀元素作為底紋，對(duì)產(chǎn)品進(jìn)行有效的整理，分類添加畫面的趣味性。47按閱讀順序引導(dǎo)視線移動(dòng)方向版式原理LAYOUT DESIGN在進(jìn)行版

20、式設(shè)計(jì)時(shí)，對(duì)于用戶視線的移動(dòng)方向是非常重要的，想辦法在頁面中加入能夠順暢地引導(dǎo)用戶都實(shí)現(xiàn)移動(dòng)的元素，就可以有效的引導(dǎo)用戶。48插圖令人印象深刻版式原理LAYOUT DESIGN插圖是讓畫面更生動(dòng)形象的表現(xiàn)圖片與圖形元素，但是如果頁面中只有插圖，會(huì)讓人覺得過于活潑，不嚴(yán)謹(jǐn)。插圖元素再加上攝影圖片之后，可以緩解過于幼稚的氣氛，可以讓畫面顯得更加有藝術(shù)感親切感。49同一個(gè)元素間的間隔版式原理LAYOUT DESIGN間隔是非常重要的版面構(gòu)成要素，每個(gè)元素之間的間隔類型不能太多，應(yīng)該統(tǒng)一起來才能設(shè)計(jì)出秩序井然的頁面效果。即使一些產(chǎn)品底圖和產(chǎn)品本身元素都不一樣，但產(chǎn)品與產(chǎn)品之間的間隔是相同的，這樣看起來

21、畫面依舊顯得非常整齊。03圖片構(gòu)成原理PICTURE COMPOSITION50旅游網(wǎng)站圖片構(gòu)成原理 2.251版面構(gòu)圖原理在版式設(shè)計(jì)中，圖片要如何安排才是最好的呢，考慮內(nèi)容和意圖是圖片構(gòu)成的最重要的問題，下面我們來介紹如何根據(jù)需要對(duì)于頁面中的圖片元素進(jìn)行版式上的處理。圖片構(gòu)成原理PICTURE COMPOSITION圖片構(gòu)成原理PICTURE COMPOSITION52根據(jù)圖片大小調(diào)整頁面效果在頁面中圖版率是指版面相對(duì)于文字、圖(圖片和照片)所占據(jù)的面積比。圖版率低,減少閱讀興趣；圖版率高,增強(qiáng)閱讀活力。在設(shè)計(jì)中應(yīng)該將重點(diǎn)圖片最大化突出主體畫面內(nèi)容，同時(shí)版面效果也更加突出。圖片構(gòu)成原理PIC

22、TURE COMPOSITION53通過留白突出頁面設(shè)計(jì)感版面中的留白越多，會(huì)產(chǎn)生高質(zhì)感的印象。決定留白位置，重點(diǎn)在于不能讓版面應(yīng)留白而顯得凌亂。版面中的留白并非是單純的空白，它也能夠凸顯元素與內(nèi)文元素之間的存在感，進(jìn)而表現(xiàn)出版面中的重點(diǎn)元素，具有非常重要的功能性。圖片構(gòu)成原理PICTURE COMPOSITION54凸顯圖片中的拍攝主題若要想將多張圖片元素收納在同一個(gè)頁面上，或是想要突出顯示圖片中的拍攝主體，最重樣的辦法就是將主體部分扣出并去掉背景，圖片元素由于背景圖去掉以后就能在有限的空間中放入大量信息，此方法是排版中不可缺少的技巧之一。圖片構(gòu)成原理PICTURE COMPOSITION5

23、5整理多圖的頁面當(dāng)要表現(xiàn)出不同類型的分類信息，或者需要將多張圖片元素進(jìn)行組合將元素放進(jìn)相同形狀的圖形元素中，這樣既不會(huì)使版面混亂，又可以很好地表現(xiàn)出分類情況。圖片構(gòu)成原理PICTURE COMPOSITION56曲線和手繪增加畫面活躍感想要畫面不那么生硬，表現(xiàn)出活躍有趣的氣氛，可以將畫面中的線條變?yōu)樘摼€，無論什么曲線，組成什么形狀都可以使畫面增加活躍感。與其用硬邦邦的直線，可以用一種曲線的方法，使畫面變得柔和有趣。也可以在畫面中添加手繪元素，打造出比較隨性自在的感覺。圖片構(gòu)成原理PICTURE COMPOSITION57賦予版面節(jié)奏感如果總是將圖片擺放的一模一樣，或總是把圖片放在一條直線上，往

24、往會(huì)讓人覺得非常單調(diào)，如果將圖片對(duì)角放置或大小不一創(chuàng)造出不同比例，就能自然地引導(dǎo)觀眾的閱讀順序，同時(shí)也可以賦予版面動(dòng)感使單調(diào)的版面增加一些變化，變得豐富起來，設(shè)計(jì)的最高境界就是在統(tǒng)一中尋求一些變化。圖片構(gòu)成原理PICTURE COMPOSITION58傳達(dá)連續(xù)性的畫面當(dāng)一組圖片具有連續(xù)性或者是關(guān)聯(lián)性的時(shí)候，可以通過添加線條或者是地圖的方式把它們連接在一起，表現(xiàn)出圖形與圖形元素之間親密關(guān)系，同時(shí)也可以為用戶起到閱讀順序的指示作用。圖片構(gòu)成原理PICTURE COMPOSITION59自然地引導(dǎo)閱讀視線最有效的吸引用戶視線的方式就是被攝人物的視線使用人物圖片，人物視線方向影響版面的視覺順序。圖片構(gòu)

25、成原理PICTURE COMPOSITION60將圖片放到足夠大在設(shè)計(jì)的時(shí)候，可以將主要的內(nèi)容近距離放大，將不重要的內(nèi)容遠(yuǎn)距離縮小，拍攝主體的距離和構(gòu)圖將很大程度影響圖片質(zhì)量所呈現(xiàn)的心理印象。在特寫的構(gòu)圖里由于拍攝主體的距離較近，會(huì)給人親切的感覺，喚起主觀的情感意識(shí)，特別是人物臉部特寫；反之，如果是遠(yuǎn)景，構(gòu)圖則表現(xiàn)的是空間和場(chǎng)景狀況。圖片構(gòu)成原理PICTURE COMPOSITION61用圖片代替文字解釋有時(shí)候使用圖片去表達(dá)內(nèi)容比直接用文字描述要直觀很多。圖片構(gòu)成原理PICTURE COMPOSITION62用輔助元素添加圖片表現(xiàn)力當(dāng)需要使用圖片表現(xiàn)某種功能時(shí)，除了用文字直接描述，也可以添加輔

26、助圖標(biāo)元素，比圖片更有表現(xiàn)力。圖片構(gòu)成原理PICTURE COMPOSITION63圖片與文字的恰當(dāng)配合圖片與文字的組合就像嘴巴和石頭一樣是分不開的，往往需要進(jìn)行緊密配合，要注意的是，說明圖片的文字不能離圖片太遠(yuǎn)，應(yīng)保持文字和圖片的相關(guān)性，在圖片上插入文字的時(shí)候，最好采用不會(huì)影響文字可辨識(shí)度的顏色，最好是白色或者是黑色或者將文字放置在不會(huì)影響辨識(shí)度的畫面顏色上。2.364圖文解說原理文字和圖片相比，人們當(dāng)然愿意接受視覺化的圖像元素，因此用戶很難理解單純文字元素中包含的信息。這時(shí)候往往可以通過文字視覺化的處理方式，把它變的易于理解和獲取。那些文字元素表現(xiàn)時(shí)顯得非常長的說明，一旦轉(zhuǎn)化成視覺化的表現(xiàn)

27、方式也會(huì)變得清晰明白讓人家一看就明白其中的意思。通過對(duì)插圖的應(yīng)用，可以讓生硬的文字信息看起來非常直觀，為了這個(gè)目的，我們應(yīng)該采取些什么方式把這些信息整理出來，并進(jìn)行圖像化的表現(xiàn)方式呢?圖文解說原理PICTURE ©65配合內(nèi)容區(qū)別使用圖表為了使數(shù)據(jù)變得更加清晰易懂，可以將其轉(zhuǎn)化為視覺性的圖表，在對(duì)數(shù)值進(jìn)行圖表表現(xiàn)時(shí)，最重要的是決定使用什么樣的圖表，選擇合適的圖表能表現(xiàn)出需要的主題圖表，包括并列圖表流程圖表對(duì)比圖表等。圖文解說原理PICTURE ©66配合內(nèi)容區(qū)別使用圖表為了使數(shù)據(jù)變得更加清晰易懂，可以將其轉(zhuǎn)化為視覺性的圖表，在對(duì)數(shù)值進(jìn)行圖表表現(xiàn)時(shí)，最重要的是決定使用什么樣的圖表

28、，選擇合適的圖表能表現(xiàn)出需要的主題圖表，包括并列圖表流程圖表對(duì)比圖表等。圖文解說原理PICTURE ©67配合內(nèi)容區(qū)別使用圖表為了使數(shù)據(jù)變得更加清晰易懂，可以將其轉(zhuǎn)化為視覺性的圖表，在對(duì)數(shù)值進(jìn)行圖表表現(xiàn)時(shí)，最重要的是決定使用什么樣的圖表，選擇合適的圖表能表現(xiàn)出需要的主題圖表，包括并列圖表流程圖表對(duì)比圖表等。圖文解說原理PICTURE ©68便于比較的表格制作對(duì)于包括了相同范疇的內(nèi)容文本，最好將它們整理成表格的形式，這樣很容易地展示各項(xiàng)內(nèi)容，也便于各項(xiàng)內(nèi)容的對(duì)照和比較等，需要對(duì)各項(xiàng)內(nèi)容數(shù)值進(jìn)行比較時(shí)，相比單純的文字排列方式而言，縱橫表制成表格的方式更便于用戶了解其中的內(nèi)容。注意設(shè)

29、計(jì)表格的時(shí)候要注意，表頭部分的顏色一般要比表格中的其他顏色更加明顯，來突出標(biāo)題的作用。圖文解說原理PICTURE ©2.469文字組合原理字體是對(duì)畫面的效果產(chǎn)生重大影響的要素，如果選擇不當(dāng)，往往會(huì)導(dǎo)致于主旨偏離的結(jié)果，很多時(shí)候文字看起來會(huì)非常習(xí)慣，需要掌握字體的屬性，并且理解文字需要表達(dá)的意思并加以變化，這樣就能很好地處理文字之間的關(guān)系。文字組合原理LAYOUT OF COPY70選擇效果相稱的字體設(shè)計(jì)中不同的字體有不同的形態(tài)，需要仔細(xì)體會(huì)各種字體的風(fēng)格特點(diǎn)，而我們常用的到的只有兩種字體，宋體和黑體。宋體是襯線體，手寫體的感覺更精致，多用于閱讀量大又希望讀者平均閱讀的地方。也可以用于大

30、標(biāo)題會(huì)產(chǎn)生味道不同的高雅趣味。黑體是無襯線字體的代表，筆畫粗細(xì)一致，常用于表現(xiàn)時(shí)尚和流行或者是力量較強(qiáng)的效果，會(huì)給人帶來較為強(qiáng)烈的印象。圖文解說原理PICTURE ©71文字的統(tǒng)一和突出在頁面中，很多時(shí)候會(huì)包括很多功能相同的文字內(nèi)容。在這種情況下，對(duì)每種一樣功能的文字都設(shè)定相同的字體是一條基本理論，這樣能保證畫面的一致性。對(duì)于表現(xiàn)內(nèi)容都不同，我們要明確的表現(xiàn)出標(biāo)題與其他內(nèi)容的區(qū)別，可以通過加粗加大字體使用不同顏色拉開標(biāo)題與正文之間的距離為文字加邊框等方式來處理。圖文解說原理PICTURE ©72文字對(duì)齊和距離文字對(duì)齊是指將相關(guān)聯(lián)的文字和文字進(jìn)行對(duì)齊，才能突出顯示出文字組合的統(tǒng)一

31、感和整體感。合理的控制好文字之間的距離，對(duì)于字體距離來講，所占面積較小的字體字間距看起來會(huì)比較大，而相反的所占面積比較大的字體字間距看起來會(huì)比較小，所以要根據(jù)所選字體大小來決定字間距。對(duì)于行距的安排來講，一般閱讀量較多的內(nèi)容要保持約為文字大小的1.5到2倍，行的長度越短則行距可越小，隨著行長的拉長，行距位置也最好擴(kuò)大，如果閱讀量低的文字組合，最好將行距或字間距顯示的稍微近一點(diǎn)，這樣統(tǒng)一感更強(qiáng)。圖文解說原理PICTURE ©73突出文案效果當(dāng)文字放置的圖片，底圖較為復(fù)雜的時(shí)候，可以在網(wǎng)頁下方添加白色或者是黑色底圖，這樣就算再亂的背景也將文案部分突出顯示。圖文解說原理PICTURE &CO

32、PY74強(qiáng)調(diào)文字閱讀順序當(dāng)有大量的內(nèi)容需要顯示時(shí)無論是以圖文結(jié)合的方式，還是純文字的方式顯示，都可以先將內(nèi)容進(jìn)行分類整理，再在每一個(gè)分類內(nèi)容前加上數(shù)字序號(hào)或者是英文字母序號(hào)進(jìn)行標(biāo)識(shí)，這樣讀者安照序號(hào)來看的時(shí)候會(huì)主動(dòng)地瀏覽下一個(gè)內(nèi)容。圖文解說原理PICTURE ©03色彩搭配原理COLOUR DESIGN75旅游網(wǎng)頁設(shè)計(jì)色彩搭配原理3.176 選擇基本配色我們經(jīng)常會(huì)對(duì)通過色彩來對(duì)事物的狀態(tài)，情形和感覺作出判斷，它被譽(yù)為可以刺激感官激發(fā)情感的元素，圍繞某個(gè)主題確定基本色，然后再考慮其他必要的補(bǔ)充要素，在配色中能快速把握整體的基調(diào)，也能更好地控制產(chǎn)品的主題思想。色彩搭配原理COLOUR DE

33、SIGN3.277 決定主題顏色色彩搭配原理COLOUR DESIGN78與季節(jié)對(duì)應(yīng)的色彩通過色彩表現(xiàn)，季節(jié)是重點(diǎn)在于色調(diào)，確定正確的色調(diào)之后，才能進(jìn)行恰當(dāng)?shù)呐渖?，如通過柔和的光線，春季的櫻花等，表現(xiàn)春天的氣息。色彩搭配原理COLOUR DESIGN79與季節(jié)對(duì)應(yīng)的色彩通過高純度的色調(diào)和高反差的配色，表現(xiàn)出夏天蒼翠的樹木，也可以變通過藍(lán)色來表現(xiàn)藍(lán)天大海。色彩搭配原理COLOUR DESIGN80與季節(jié)對(duì)應(yīng)的色彩通過果實(shí)紅葉的紅色緝查色和深沉的色調(diào)表現(xiàn)秋季的美。色彩搭配原理COLOUR DESIGN81與季節(jié)對(duì)應(yīng)的色彩通過低純度的藍(lán)色系配色，表現(xiàn)冬日的冷寂。色彩搭配原理COLOUR DESIGN

34、82與地域文化匹配的色彩具體色彩所代表的具體含義，并不是全世界通用的文化傳統(tǒng)和風(fēng)土人情而已，各個(gè)國家地域的文化會(huì)通過國旗服飾，菜肴，建筑風(fēng)景等特定的顏色，給人鮮明而深刻印象，應(yīng)盡量掌握國家的文化特色的配色。色彩搭配原理COLOUR DESIGN83與年齡對(duì)應(yīng)的色彩體現(xiàn)成人的配色往往以黑白灰為主，純度較低的灰色也在其中，會(huì)給人一種瀟灑，極致時(shí)尚的感覺。成人群體中女性應(yīng)以紅紫色相為中心，男性應(yīng)以冷色的，藍(lán)色色相為中心，年紀(jì)越大的人越喜歡純度較低的自然色彩，既時(shí)尚而不失沉穩(wěn)。色彩搭配原理COLOUR DESIGN84與年齡對(duì)應(yīng)的色彩兒童的色彩對(duì)于明度純度較高的配色較為符合，營造快樂明朗的兒童形象，體

35、現(xiàn)兒童的配色，以淺色為主，表現(xiàn)快樂時(shí)用一些明快的顏色。色彩搭配原理COLOUR DESIGN85與檔次匹配的顏色色彩是在第一印象中很具吸引力的要素，應(yīng)掌握貴重廉價(jià)的不同印象的配色方法，一般來講正式的場(chǎng)合中運(yùn)用深色調(diào)體現(xiàn)高檔感；單純?nèi)A麗明快的色彩組合，可以給人便宜實(shí)惠的印象。色彩搭配原理COLOUR DESIGN886201旅游電商網(wǎng)站主圖設(shè)計(jì)管理學(xué)院旅游管理專業(yè)旅游網(wǎng)站設(shè)計(jì)01主圖設(shè)計(jì)MAIN PAGE DESIGN87主圖的重要性88主圖的重要性一張優(yōu)質(zhì)的主圖可以節(jié)省一大筆的推廣費(fèi)用，這也是很多店鋪在沒有做推廣費(fèi)用的情況下，依然能吸引到很多流量主要原因。主圖設(shè)計(jì)MAIN PAGE DESIG

36、N01品牌logo02圖片元素03文案元素89主圖的設(shè)計(jì)要素主圖設(shè)計(jì)MAIN PAGE DESIGN02主圖設(shè)計(jì)MAIN PAGE DESIGN90主圖設(shè)計(jì)技巧主圖設(shè)計(jì)技巧圖片元素1.產(chǎn)品的詳情頁面代表性:很直觀的識(shí)別該產(chǎn)品的種類和信息2.產(chǎn)品搜索結(jié)果頁面吸引眼球同類產(chǎn)品中需要脫穎而出,激發(fā)用戶點(diǎn)擊查看該產(chǎn)品的詳情頁面品牌LOGO1.品牌視覺形象的核心對(duì)品牌認(rèn)知和聯(lián)想符號(hào)2.位于主圖左上角位置3.沿用該品牌的標(biāo)準(zhǔn)色4.過小導(dǎo)致識(shí)別度低 過大占用了過多面積5.添加色塊以致更醒目主圖文案1.產(chǎn)品名稱信息層級(jí)高強(qiáng)烈:字體大 字號(hào)粗2.促銷性關(guān)鍵詞信息層級(jí)低稍弱:字體小 字號(hào)細(xì)892201旅游電商網(wǎng)站

37、詳情頁設(shè)計(jì)管理學(xué)院旅游管理專業(yè)旅游網(wǎng)站設(shè)計(jì)93詳情頁的重要性 產(chǎn)品詳情頁是提高產(chǎn)品轉(zhuǎn)化率的入口，激發(fā)用戶的消費(fèi)欲望。樹立用戶對(duì)于產(chǎn)品的信任感。打消用戶的顧慮，促使用戶下單。優(yōu)化產(chǎn)品詳情頁，對(duì)于轉(zhuǎn)化率有提升的作用，但是起決定性作用的還是產(chǎn)品本身。詳情頁設(shè)計(jì)MAIN PAGE DESIGN下半部分客戶信任最終行為消費(fèi)者下單詳情頁構(gòu)成50%100%94上半部分產(chǎn)品價(jià)值50%+=詳情頁構(gòu)成95上半部分產(chǎn)品價(jià)值下半部分客戶信任詳情頁6大元素詳情頁96色彩字體文案版式圖片氛圍詳情頁的賣點(diǎn)挖掘97根據(jù)市場(chǎng)調(diào)研以及對(duì)于產(chǎn)品進(jìn)行系統(tǒng)的分析，總結(jié)羅列出用戶在意的問題，同類產(chǎn)品的優(yōu)缺點(diǎn)，根據(jù)產(chǎn)品及市場(chǎng)調(diào)研，確定本店

38、的消費(fèi)群體以及自身產(chǎn)品的定位，針對(duì)消費(fèi)群體挖掘出本店的產(chǎn)品賣點(diǎn)，挖掘自身與眾不同的賣點(diǎn)。票務(wù)類產(chǎn)品詳情頁設(shè)計(jì)內(nèi)容跟團(tuán)出行類98特別說明 產(chǎn)品亮點(diǎn)項(xiàng)目特色 預(yù)定流程 門票基本信息景點(diǎn)介紹 景點(diǎn)地圖 費(fèi)用說明 特別注意 快遞退換貨證明 保障承諾 評(píng)價(jià)展示酒店類產(chǎn)品酒店預(yù)定 酒店圖片酒店介紹 酒店設(shè)施 交通及周邊住客評(píng)價(jià)交通類產(chǎn)品優(yōu)惠信息 詳情描述費(fèi)用說明 預(yù)定須知（列車補(bǔ)充：取票信息使用范圍有效期限）（境外交通補(bǔ)充：簽證辦理） 退改規(guī)則 溫馨提示 評(píng)價(jià)展示優(yōu)惠推薦 使用時(shí)間行程簡(jiǎn)介行程亮點(diǎn)酒店說明美食說明表演說明 同類比較達(dá)人推薦保障承諾溫馨提示行程詳解風(fēng)景展示費(fèi)用包含費(fèi)用不含行程描述預(yù)定須知 退

39、改規(guī)則自由行類產(chǎn)品詳情頁設(shè)計(jì)內(nèi)容99優(yōu)惠信息 相關(guān)線路 推薦詳情描述 確認(rèn)流程說明 參考航班/交通團(tuán)期介紹 特色亮點(diǎn) 簽證類產(chǎn)品受理范圍 所需材料 相關(guān)旅游鏈接 優(yōu)惠信息 線路推薦 審核流程 購買須知 當(dāng)季活動(dòng) 辦理流程介紹 酒店介紹 景點(diǎn)推薦 費(fèi)用說明 費(fèi)用包含 費(fèi)用不含預(yù)定須知 退改規(guī)則 評(píng)價(jià)展示續(xù)簽流程資料清單 取簽并返還資料 簽證頁說明 常見問題 溫馨提示預(yù)訂須知 拒簽說明8100201旅游電商網(wǎng)站店鋪首頁設(shè)計(jì)管理學(xué)院旅游管理專業(yè)旅游網(wǎng)站設(shè)計(jì)旅游電商網(wǎng)站首頁結(jié)構(gòu)101店鋪的首頁就像一個(gè)購物場(chǎng)所，把產(chǎn)品放在地上賣和放在專柜里賣，客單價(jià)會(huì)相差很多，我們需要根據(jù)自己的產(chǎn)品特征有條不紊地展示產(chǎn)

40、品，給用戶一個(gè)合理舒適的購物場(chǎng)所，接受到有效的首頁推薦。01首頁02詳情頁03活動(dòng)頁102旅游電商網(wǎng)站頁面構(gòu)成103店鋪形象展示商品導(dǎo)航推薦活動(dòng)店鋪品牌形象展示品牌logo 品牌主色品牌視覺元素引導(dǎo)目的明確的用戶尋找商品合理的產(chǎn)品分類合理的產(chǎn)品展示激發(fā)潛在用戶購買欲望新品推薦促銷打折首頁頁面構(gòu)成01店鋪首頁構(gòu)成要素104店招要素店招要素105店招就相當(dāng)于一個(gè)店鋪的招牌，起到宣傳傳遞店鋪信息的作用。位于店鋪頁面上方，是首頁第一個(gè)需要設(shè)計(jì)的區(qū)域，經(jīng)常與導(dǎo)航連接起來。整個(gè)店頭高度為150像素，店招占了120像素，導(dǎo)航占了30像素。店招的信息傳達(dá)品牌信息通過產(chǎn)品名稱，店鋪名稱，品牌色，品牌標(biāo)志的表現(xiàn)。

41、1產(chǎn)品定位價(jià)格與產(chǎn)品定位息息相關(guān)，高價(jià)產(chǎn)品通過打造有價(jià)值的視覺傳遞，去淡化價(jià)格信息；低價(jià)產(chǎn)品以促銷手段，強(qiáng)調(diào)低價(jià)來吸引用戶。對(duì)有代表性的產(chǎn)品進(jìn)行特別展示。2產(chǎn)品信息對(duì)有代表性的產(chǎn)品進(jìn)行特別展示。3106店招的吸引力107 logo是一個(gè)店鋪的最重要的視覺形象，品牌專營店一般都會(huì)使用商品原有的logo，也會(huì)專門為網(wǎng)店重新設(shè)計(jì)一個(gè)與品牌相符的logo，以達(dá)到繼續(xù)利用品牌效應(yīng)的效果。02店鋪首頁構(gòu)成要素108導(dǎo)航要素導(dǎo)航要素109導(dǎo)航的作用是將產(chǎn)品進(jìn)行分類列出方便客戶尋找通常將品牌故事、會(huì)員制度等比較有利于店鋪塑造品牌形象的信息設(shè)計(jì)在其中，也可以將活動(dòng)頁面，收藏店鋪等信息設(shè)計(jì)進(jìn)去。110顯性導(dǎo)航半隱

42、性導(dǎo)航顯性導(dǎo)航導(dǎo)航的類型隱性導(dǎo)航111隱性導(dǎo)航所占的空間位置小，可以節(jié)約導(dǎo)航空間，相對(duì)于不容易被發(fā)現(xiàn)，通常以所有分類和全店產(chǎn)品為標(biāo)題。半隱性導(dǎo)航112半隱性導(dǎo)航多用于產(chǎn)品分類之多，而且可以分出幾個(gè)主要的分類，這種分類方式能夠展現(xiàn)店鋪內(nèi)商品的主要構(gòu)成，從功能上來講，半隱性導(dǎo)航具有提示性和導(dǎo)購性。從設(shè)計(jì)來講，半隱性導(dǎo)航的標(biāo)題和背景都要自己設(shè)計(jì)，有一定難度，但設(shè)計(jì)師應(yīng)該在統(tǒng)一視覺風(fēng)格的基礎(chǔ)上讓字和背景的反差要對(duì)比強(qiáng)烈，才能讓人一目了然，半隱性導(dǎo)航通常放在店招的下方。顯性導(dǎo)航113 頁頭上的導(dǎo)航應(yīng)該展示主要內(nèi)容，放置于店招下方，而顯性導(dǎo)航，主要分類信息大而全，往往會(huì)占據(jù)非常大的頁面位置，一邊出現(xiàn)在首頁

43、活動(dòng)區(qū)的下方，或者是頁面上方顯性導(dǎo)航會(huì)給客戶展示全面的標(biāo)題，方便用戶快速進(jìn)入所需要的產(chǎn)品類目，找到自己感興趣的產(chǎn)品，提供方便快捷的購物體驗(yàn)，同時(shí)又對(duì)流量進(jìn)行有效的分流和引導(dǎo)，從視覺設(shè)計(jì)上應(yīng)該注意圖文結(jié)合，添加一些比較直觀的圖標(biāo)元素讓用戶對(duì)于店鋪的相關(guān)信息也有一定程度的了解。 03店鋪首頁構(gòu)成要素114首焦要素首焦要素115首焦負(fù)責(zé)宣傳最新產(chǎn)品，詳情頁，店內(nèi)活動(dòng)推廣頁的重要任務(wù)，首焦是店鋪首頁的靈魂。首焦尺寸 116 在設(shè)計(jì)首焦同時(shí)應(yīng)該盡量在第一屏就將重要信息展示完整，這叫一屏論。 根據(jù)當(dāng)下主流電腦分辨率1680像素x900像素來分析。 瀏覽器自身高度150像素，頁頭100像素，店鋪頁頭150像

44、素，讓這些高度加起來有400像素，那么用900像素的高度減去400像素。 首焦還剩500像素，也就是說應(yīng)該將首焦最有吸引力的文案在這500像素以內(nèi)展現(xiàn)出來，而首焦的高度可設(shè)置為600像素，這樣能使首焦的圖像展示完整，引導(dǎo)用戶繼續(xù)向下瀏覽。首焦信息傳達(dá) 117 新產(chǎn)品上架：?jiǎn)纹沸麄?，無論是品牌型店鋪還是營銷型店鋪，都應(yīng)該圍繞新產(chǎn)品的賣點(diǎn)入手，只是強(qiáng)調(diào)的重點(diǎn)可能會(huì)不一樣，一個(gè)在于產(chǎn)品的品質(zhì)與產(chǎn)品的細(xì)節(jié)，一個(gè)在性價(jià)比。 對(duì)于營銷型的店鋪來講，特色就是打折力度大大部分時(shí)間首焦的內(nèi)容是以促銷為主，而且用多個(gè)活動(dòng)信息進(jìn)行表現(xiàn)，營造熱賣的氛圍，刺激用戶下單。首焦類型118兩列式三列式上下式文字+背景兩列式首

45、焦119三列式首焦120上下式首焦121文字+背景首焦12204店鋪首頁構(gòu)成要素123頁尾要素頁尾要素124各位賣家總以為頁頭很重要，往往忽視了店鋪頁尾的設(shè)計(jì)。 頁尾是一個(gè)公共固定區(qū)，設(shè)置好會(huì)出現(xiàn)在店鋪的每一個(gè)頁面。頁尾其實(shí)就是一個(gè)自定義區(qū)，沒有預(yù)售的模塊，需要賣家自行填充相關(guān)圖文或代碼。頁尾服務(wù)信息 125因?yàn)橥ǔｍ撐矊?duì)于買家對(duì)整個(gè)店鋪有個(gè)總結(jié)性的作用。在頁尾添加了很多可能讓用戶感興趣的，店鋪需要的內(nèi)容，更好地補(bǔ)充了頁面的完整性和功能性。頁尾服務(wù)信息 126一般在頁面最底端提供店鋪的品牌介紹，加深品牌塑造。加上物流售后信息讓用戶放心購買。發(fā)貨須知買家必讀可減少因發(fā)貨引起的差評(píng)率05店鋪首頁構(gòu)

46、成要素127產(chǎn)品分類旅游電商店鋪產(chǎn)品分類 128產(chǎn)品的分類也屬于顯性導(dǎo)航在設(shè)計(jì)店鋪的產(chǎn)品分類展示時(shí)，我們應(yīng)該清楚認(rèn)識(shí)到每個(gè)類目的標(biāo)題是否合適，與產(chǎn)品匹配度是否精確，這樣才能有效引導(dǎo)客戶點(diǎn)擊。如果不能設(shè)計(jì)出特別形象的圖標(biāo)代替標(biāo)題的功能，或者放在標(biāo)題旁邊，應(yīng)該避免使用圖標(biāo)，因?yàn)楫吘刮淖值木_度是最高的。旅游電商店鋪產(chǎn)品分類 129產(chǎn)品的分類也屬于顯性導(dǎo)航在設(shè)計(jì)店鋪的產(chǎn)品分類展示時(shí)，我們應(yīng)該清楚認(rèn)識(shí)到每個(gè)類目的標(biāo)題是否合適，與產(chǎn)品匹配度是否精確，這樣才能有效引導(dǎo)客戶點(diǎn)擊。如果不能設(shè)計(jì)出特別形象的圖標(biāo)代替標(biāo)題的功能，或者放在標(biāo)題旁邊，應(yīng)該避免使用圖標(biāo)，因?yàn)楫吘刮淖值木_度是最高的。分類的交互效果 13

47、0使用交互效果會(huì)讓用戶體驗(yàn)感有所提升當(dāng)用戶將鼠標(biāo)指向想要點(diǎn)擊的文字鏈接時(shí)，鏈接有視覺上的變化，如進(jìn)行了變色或有了陰影等有別于其他文字鏈接的視覺效果，那么用戶體驗(yàn)是最好的。這樣有利于用戶知道自己指向了哪里，又能更明確地將目標(biāo)展示出來。06店鋪首頁構(gòu)成要素131產(chǎn)品展示網(wǎng)店的產(chǎn)品展示132通過不同的視覺呈現(xiàn)方式，可以將產(chǎn)品最美妙的一面展示給用戶。從而提升銷售額產(chǎn)品的陳列方式，能營造出不同的銷售氛圍，從而影響用戶的消費(fèi)心理，我們應(yīng)從以下幾個(gè)方面去設(shè)計(jì)產(chǎn)品的陳列。產(chǎn)品整潔 133整潔干凈，是產(chǎn)品進(jìn)行陳列必須遵循的原則，大多的產(chǎn)品堆砌展示會(huì)讓用戶不想瀏覽下去。那么產(chǎn)品展示可以按照分類展示為多個(gè)模塊，但最

48、好將產(chǎn)品展示的其中一個(gè)模塊控制在1.5屏以內(nèi)，再展示下一個(gè)模塊，這樣才能避免使用戶產(chǎn)生視覺疲勞，也會(huì)避免擾亂用戶的視覺。產(chǎn)品整潔 134在產(chǎn)品展示中，將有代表性的產(chǎn)品陳列是最基本的陳列方式，也是在新品銷售前最主要的陳列方式。展示是應(yīng)該有一定的規(guī)律性將背景簡(jiǎn)化突出產(chǎn)品，避免過多的裝飾和文案，也可以將類似的產(chǎn)品放置到詳情頁中進(jìn)行關(guān)聯(lián)產(chǎn)品的展示。爆款突出 135當(dāng)新品銷售一段時(shí)間后，會(huì)出現(xiàn)銷售量比較好的產(chǎn)品，那么證明這款產(chǎn)品是值得買家喜歡的，在設(shè)計(jì)時(shí)就可以將此類產(chǎn)品突出展示。因此在同一個(gè)模塊中可以將陳列方式稍作調(diào)整，設(shè)計(jì)出有主次之分的展示模塊，表示其是熱賣產(chǎn)品。 爆款突出 136 突出展示的方法就是

49、在設(shè)計(jì)模塊時(shí)將熱賣產(chǎn)品放大展示，或者將熱賣產(chǎn)品的展示區(qū)域放大。這樣也有利于引導(dǎo)用戶關(guān)注更為突出的產(chǎn)品，促使用戶先瀏覽突出的產(chǎn)品，促進(jìn)爆款打造。整體統(tǒng)一 137無論在什么產(chǎn)品的展示中，整齊和統(tǒng)一都能讓用戶賞心悅目，而且展示過程中可以將同屬性的產(chǎn)品進(jìn)行歸類展示。注意不要將不同類型的產(chǎn)品放在同一模塊中，這樣就可以產(chǎn)生磁石效應(yīng)。將對(duì)于某類產(chǎn)品有消費(fèi)需求的用戶匯集在一個(gè)指定的區(qū)域，使用產(chǎn)品不同的特征去吸引不同的用戶，不僅是在產(chǎn)品屬性上要統(tǒng)一，在展示位的圖標(biāo)和裝飾元素上應(yīng)該也要統(tǒng)一。整體統(tǒng)一 138只需要避免參數(shù)價(jià)格明顯不同的元素相對(duì)于整齊統(tǒng)一的陳列展示方式，有創(chuàng)意有變化的陳列方式會(huì)更人讓人眼前一亮，如使

50、用產(chǎn)品擺出各種造型和圖案外輪廓時(shí)，都是不錯(cuò)的選擇。陳列搭配 139 產(chǎn)品搭配是通過將有關(guān)的產(chǎn)品放在一起進(jìn)行展示，從而提升關(guān)聯(lián)率，增加客單價(jià)。交通類產(chǎn)品可以搭配展示酒店類產(chǎn)品，自主線路類產(chǎn)品可以搭配門票類產(chǎn)品。陳列搭配 140 搭配展示不僅可以在首頁進(jìn)行顯示，也可以在詳情頁進(jìn)行顯示，通過主動(dòng)的產(chǎn)品推薦搭配，更方便用戶挑選產(chǎn)品。對(duì)于很多不確定的消費(fèi)，主動(dòng)的關(guān)聯(lián)搭配就顯得非常重要，通過將產(chǎn)品搭配展示，能激發(fā)用戶的其他消費(fèi)需求。陳列搭配 141排列有序 142產(chǎn)品排列最重要的是根據(jù)店鋪運(yùn)營的方向。從主營產(chǎn)品出發(fā)，根據(jù)產(chǎn)品銷售情況，將暢銷的產(chǎn)品放置有利的位置.將常規(guī)產(chǎn)品常規(guī)陳列，還需要綜合考慮店鋪的發(fā)展

51、規(guī)劃店鋪的產(chǎn)品特征等情況，對(duì)產(chǎn)品品類進(jìn)行排序。 排列有序 143 產(chǎn)品展示應(yīng)將同品類或同屬性的產(chǎn)品放置在一起合理的品類展示，能將顧客的思路理清也可以根據(jù)產(chǎn)品價(jià)格展示。先展示產(chǎn)品價(jià)格高的，再展示產(chǎn)品價(jià)格低的，這樣價(jià)格低的產(chǎn)品更容易銷售，因?yàn)楦邇r(jià)產(chǎn)品在用戶心中留下高價(jià)印象。所以在瀏覽到低價(jià)產(chǎn)品時(shí)，會(huì)覺得下面的產(chǎn)品很便宜，也更容易接受，從而影響買家的消費(fèi)心理。8144201旅游網(wǎng)站店鋪推廣圖設(shè)計(jì)管理學(xué)院旅游管理專業(yè)旅游網(wǎng)站設(shè)計(jì)01旅游網(wǎng)站推廣圖設(shè)計(jì)145直通車廣告搜索推廣圖146搜索推廣包括關(guān)鍵詞搜索、類目搜索、淘寶客搜索、熱賣產(chǎn)品搜索，最常用的是關(guān)鍵詞搜索。搜索推廣圖147在首頁搜索框搜索關(guān)鍵詞，

52、點(diǎn)擊搜索按鈕出進(jìn)入搜索結(jié)果頁。類目搜索則是通過類目導(dǎo)航進(jìn)入，選擇進(jìn)入頁面展現(xiàn)位置，均為頁面的右側(cè)和下方位置。 定向推廣148門戶類的網(wǎng)站，有龐大的數(shù)據(jù)庫可以通過網(wǎng)頁內(nèi)容、人群行為習(xí)慣、人群基本屬性的定向分析不同買家在各種瀏覽器路徑下的不同興趣和需求。將這些內(nèi)容涉及到數(shù)據(jù)庫，將這些數(shù)據(jù)應(yīng)用在定向推廣中，幫助賣家鎖定潛在目標(biāo)用戶。02旅游網(wǎng)站推廣圖設(shè)計(jì)149鉆展廣告活動(dòng)推廣150 直通車用戶可以通過自主報(bào)名的方式，在一個(gè)特定展示為特定的時(shí)間集中展示，如首頁頻道頁等等或能獲得大量流量的主營頁面。鉆展廣告位151 鉆展展位是為了對(duì)廣告有更高需求的賣家量身量身定制的。選了最優(yōu)質(zhì)的展示位置。通過競(jìng)價(jià)排序，

53、按照展現(xiàn)時(shí)間與時(shí)段計(jì)費(fèi)。性價(jià)比高，更適用于店鋪品牌的推廣。鉆展廣告位152 鉆展廣告位分布于首頁最多，一整塊分成多個(gè)小塊，均為首頁廣告位，包括焦點(diǎn)圖和banner。 鉆展廣告位使用最多、最常見的就是以上區(qū)，除了在首頁底部，小圖也是鉆展廣告位，除了這些鉆展廣告位還包括垂直頻道焦點(diǎn)圖、收藏家底部的小圖和通欄等。03旅游網(wǎng)站推廣圖設(shè)計(jì)153推廣圖設(shè)計(jì)準(zhǔn)則推廣圖主題清晰154做設(shè)計(jì)的整個(gè)過程就是一次陳述因此設(shè)計(jì)師需要有一個(gè)清晰的主題，并且圍繞這個(gè)主題展開，比如產(chǎn)品價(jià)格折扣活動(dòng)等。 推廣圖主題清晰155第一層第二層信息需要被閱讀，第三層之后的信息起著暗示和輔助作用，而且這些信息的每一場(chǎng)表現(xiàn)程度應(yīng)該逐漸減

54、弱，不該每一層都非常突出，最好在整個(gè)廣告中只突出一個(gè)重點(diǎn)，那就是第一層的主題。針對(duì)人群明確156 因?yàn)楫a(chǎn)品的不同，所以面向的購物人群也不同，不同人群的審美標(biāo)準(zhǔn)和興趣愛好都不同，所以在設(shè)計(jì)推廣圖當(dāng)中，應(yīng)該根據(jù)人群的審美和喜好來設(shè)計(jì)圖片風(fēng)格。157主題的表現(xiàn)形式色彩用色不超過三種面積比6:3:1統(tǒng)一中有變化158主題的表現(xiàn)形式字體字體的選擇和產(chǎn)品購物人群特征相匹配排列方式應(yīng)該和文案靠在一起，使瀏覽者將所有文案一次性看完進(jìn)行適當(dāng)?shù)牧舭子糜谕怀鲲@示需要表現(xiàn)的內(nèi)容 159主題的表現(xiàn)形式標(biāo)簽標(biāo)簽用于將作品表現(xiàn)出各種營銷氣氛，如熱賣、促銷等一些信息，通過標(biāo)簽表現(xiàn)后顯得更加強(qiáng)化。根據(jù)不同產(chǎn)品和設(shè)計(jì)風(fēng)格，標(biāo)簽的

55、樣式也會(huì)有所不同160主題的表現(xiàn)形式引導(dǎo) 引導(dǎo)就是通過畫面中的某些元素，引導(dǎo)用戶去點(diǎn)擊或者是瀏覽，如果是在畫面中添加點(diǎn)擊按鈕，用戶可能會(huì)因?yàn)槠綍r(shí)的操作習(xí)慣對(duì)他進(jìn)行點(diǎn)擊，如果在畫面中設(shè)計(jì)出引導(dǎo)事件移動(dòng)的箭頭或者是線條，用戶也會(huì)跟著這個(gè)箭頭或線條的方向去看，從而達(dá)到引導(dǎo)用戶瀏覽主題內(nèi)容的目的。04旅游網(wǎng)站推廣圖設(shè)計(jì)161推廣圖設(shè)計(jì)要點(diǎn)推廣圖設(shè)計(jì)要點(diǎn)價(jià)格差異化 銷量差異化 創(chuàng)意差異化 折扣差異化 品質(zhì)差異化 推廣圖設(shè)計(jì)要點(diǎn) 162推廣圖設(shè)計(jì)分類新品爆款打造產(chǎn)品屬性不同，設(shè)計(jì)方式也不同，根據(jù)產(chǎn)品的價(jià)格等屬性來設(shè)計(jì)圖片，對(duì)于單品推廣圖的設(shè)計(jì)，可選擇店鋪中最具人氣的某款產(chǎn)品來提升點(diǎn)擊率最具人氣的產(chǎn)品，可以

56、促進(jìn)更多目標(biāo)用戶進(jìn)入店鋪。樹立品牌形象 店鋪推廣圖，綜合推廣頁面中的商品特征來考慮，可以是全店商品推廣，某一類商品推廣，對(duì)于成熟的店鋪有一定的運(yùn)營能力，正在進(jìn)行官方活動(dòng)或者店鋪活動(dòng)可以進(jìn)行店鋪推廣設(shè)計(jì)，店鋪推廣圖對(duì)于追求品牌個(gè)性的店鋪，可以樹立品牌為方向進(jìn)行設(shè)計(jì)。單品推廣圖 1店鋪推廣圖21638164201旅游電商網(wǎng)站視覺營銷管理學(xué)院旅游管理專業(yè)旅游網(wǎng)站設(shè)計(jì)01視覺營銷VISUAL MARKETING165什么是視覺營銷？166視覺營銷視覺營銷是在平面設(shè)計(jì)的基礎(chǔ)上，與人們的購物心理、消費(fèi)行為學(xué)、瀏覽習(xí)慣、生活習(xí)慣相結(jié)合，設(shè)計(jì)出更利于顧客對(duì)圖片進(jìn)行點(diǎn)擊、心里認(rèn)可、信任等網(wǎng)上購物環(huán)境，一步步，堅(jiān)

57、定顧客的購買欲望，達(dá)到最終下單促成交易的目的。從表面上看，一個(gè)旅游電子商務(wù)網(wǎng)站店鋪的定位與視覺的關(guān)聯(lián)度并不大，但實(shí)際上，視覺作為輔助銷售的表現(xiàn)形式逐漸表現(xiàn)出更多的營銷屬性。在某種程度上，店鋪的定位決定著視覺的表現(xiàn)形式及其方向。視覺營銷VISUAL MARKETING167視覺營銷VISUAL MARKETING168視覺營銷VISUAL MARKETING169視覺營銷VISUAL MARKETING170視覺營銷VISUAL MARKETING171視覺營銷本章就對(duì)這些影響用戶購買行為的視覺營銷進(jìn)行介紹。用戶在購買旅游類產(chǎn)品時(shí)時(shí)理性和感性思維同時(shí)存在，在判斷產(chǎn)品客觀屬性例如：交通類產(chǎn)品的時(shí)間

58、地點(diǎn)，酒店類產(chǎn)品的房間類型，旅游路線類產(chǎn)品的時(shí)間安排和路線景點(diǎn)等是理性思維，而在判斷旅行主題等人文屬性方面則是感性思維。在競(jìng)爭(zhēng)激烈的市場(chǎng)環(huán)境里，理解和滿足顧客的感性要求與熱切希望，激發(fā)顧客的購買行為，是視覺營銷成功的核心要素。視覺營銷VISUAL MARKETING1.1消費(fèi)者定位1.2品牌口號(hào)1.3視覺展示172網(wǎng)店經(jīng)營中的視覺營銷視覺營銷VISUAL MARKETING1.1173消費(fèi)者定位消費(fèi)者的定位對(duì)于設(shè)計(jì)而言非常重要，他們的喜好往往是視覺傳達(dá)的指引方向和判斷標(biāo)準(zhǔn)。如果在消費(fèi)者的定位尚不十分清晰，就會(huì)導(dǎo)致店鋪風(fēng)格不突出，進(jìn)而無法給潛在消費(fèi)者留下深刻印象。視覺營銷VISUAL MARKE

59、TING174消費(fèi)者定位視覺營銷VISUAL MARKETING1.1175消費(fèi)者定位例如，酒店類產(chǎn)品的用戶群體仍然有很多細(xì)分，店家如果不針對(duì)特定消費(fèi)人群做視覺、做描述，就無法與消費(fèi)者形成共鳴，自然也無法在視覺上找到契合的手段加以表現(xiàn)。如以上三個(gè)酒店類產(chǎn)品就對(duì)如高端商務(wù)人士、小資中產(chǎn)階級(jí)、文藝小青年這三種不同的群體的需求與特點(diǎn)進(jìn)行了不同的設(shè)計(jì)。視覺營銷VISUAL MARKETING176品牌口號(hào)視覺營銷VISUAL MARKETING品牌口號(hào)無需太花哨，只需要告訴消費(fèi)者專注做什么，即只是給消費(fèi)者留下深刻印象即可。這樣，哪怕消費(fèi)者沒當(dāng)時(shí)沒有購買任何產(chǎn)品，但當(dāng)他以后想購買此類產(chǎn)品時(shí)，就會(huì)馬上想起

60、瀏覽過的店鋪進(jìn)而進(jìn)行搜索式點(diǎn)開收藏網(wǎng)頁。如“攜程外幣兌換”產(chǎn)品宣傳頁面就以該產(chǎn)品的品牌口號(hào)作為主要的元素，簡(jiǎn)短的八個(gè)字，朗朗上口讓人很容易記住該產(chǎn)品的特點(diǎn)。1.2177品牌口號(hào)作為一個(gè)自由品牌，有一個(gè)清晰的品牌，定位的同時(shí)最好能提煉出品牌的廣告語，用以更好的地詮釋品牌。優(yōu)秀的廣告語不僅能清晰地表述產(chǎn)品屬性，而且更能在第一時(shí)間拉近品牌與消費(fèi)者之間的距離，快速形成共鳴，強(qiáng)化品牌識(shí)別。視覺營銷VISUAL MARKETING1.3178重復(fù)根據(jù)格式塔心理學(xué)，在頁面中需要有相同屬性的元素在整個(gè)作品中重復(fù)出現(xiàn)，可以重復(fù)色彩，形狀，材質(zhì)空間關(guān)系，字體大小等等，這樣可以形成一些規(guī)律，讓用戶可以在潛意識(shí)的過程