美妝商城網(wǎng)頁設(shè)計TOC\o"1-3"\h\u29001一、前言 320912二、網(wǎng)頁設(shè)計要點分析 326195（一）首頁設(shè)計要點 3156361.首頁的目標(biāo) 362152.設(shè)計的要點 320476（二）商品詳情頁設(shè)計要點 3219871.詳情頁的目標(biāo) 4251602.設(shè)計要點 413116三、總體設(shè)計 411430（一）設(shè)計原理 420363（二）客戶使用研究 532161（三）界面設(shè)計方案 58829四、詳細(xì)設(shè)計及成果展示 63136（一）網(wǎng)頁設(shè)計的設(shè)計要素 6217291.頁面文字設(shè)計 6318542.頁面圖像設(shè)計 620253.頁面色彩搭配設(shè)計 630064.頁面板式設(shè)計 718271（二）功能設(shè)計 7208171.用戶模塊 716482.商家模塊 845793.商品模塊 10174164.購物車模塊 1129005致謝 136866參考文獻(xiàn) 14一、前言隨著社會和經(jīng)濟(jì)的不斷發(fā)展，人們的物質(zhì)生活也在不斷改善。在這個特別是網(wǎng)絡(luò)和信息技術(shù)的時代，網(wǎng)絡(luò)技術(shù)已經(jīng)滲透到各個行業(yè)，包括社會和經(jīng)濟(jì)部門。越來越多的人在網(wǎng)上購物，這也給商業(yè)網(wǎng)上購物中心和市場帶來了商機。目前，商業(yè)銷售已不再局限于實際操作，更多關(guān)注的是中心的網(wǎng)上銷售能力。但是現(xiàn)再網(wǎng)絡(luò)上并沒有單獨針對化妝品銷售的專業(yè)網(wǎng)站，大多數(shù)都是依托京東、天貓、淘寶等購物平臺的個人或企業(yè)商家。基于此，筆者設(shè)計出一個專門用來銷售化妝品業(yè)務(wù)的美妝商城網(wǎng)頁，幫助用戶更快地選擇自己的化妝品。二、網(wǎng)頁設(shè)計要點分析（一）首頁設(shè)計要點在網(wǎng)站里，首頁一般是絕大多數(shù)訪客瀏覽網(wǎng)站的起點，一個展示良好的首頁效果能給人一種強大的視覺沖擊感，只有這樣才能留住用戶。通過調(diào)查數(shù)據(jù)分析，在導(dǎo)致用戶離開網(wǎng)站的原因，首頁的好壞是一個很重要的因素。1.首頁的目標(biāo)該網(wǎng)站的主要目標(biāo)是吸引用戶，讓用戶進(jìn)一步有想熟悉了解的欲望。也就是說首頁的目的就是吸引用戶別讓他離開。網(wǎng)上商城的客戶，尤其是第一次點擊進(jìn)入商城的訪客，他是不會立即就去選購商品的，他會在網(wǎng)頁的各個地方都點擊一下，等到用戶了解商城的具體流程之后才會考慮購買的問題，如果一個用戶點擊進(jìn)來還沒有怎么瀏覽就退出的網(wǎng)站，那么一定是這個網(wǎng)站的首頁做的沒有吸引力。2.設(shè)計的要點網(wǎng)頁設(shè)計必須在適當(dāng)?shù)奈恢茫驗檫@是產(chǎn)品資訊顯示的重要頁面，會對使用者的體驗產(chǎn)生很大的影響。當(dāng)客戶第一次購物時，網(wǎng)站的整體互動可讓客戶快速、模糊地評估線上商店。如果網(wǎng)站設(shè)計的視覺效果吸引了客戶并對其進(jìn)行了初步評估，則下一步將驗證客戶是否找到了正確的在線商店，以及是否擁有所需的產(chǎn)品。[1]這取決于哪些信息顯示在主頁上以及如何顯示。根據(jù)顧客的購物體驗，首頁的設(shè)計一般包含五個要素：店鋪招租、促銷模塊、分類導(dǎo)航、商品陳列和環(huán)形瀏覽。（二）商品詳情頁設(shè)計要點詳細(xì)的頁面就像是一個導(dǎo)購指標(biāo)，將產(chǎn)品詳細(xì)資料逐一展示給客戶，讓購買者了解產(chǎn)品的內(nèi)容并加以使用，讓購買者擁有最直覺的視覺感受。輸入文字和影像是制作細(xì)部頁面的必要元素。長篇大論還不如圖文并茂給消費者最直接的體驗感，精彩的文案設(shè)計和適當(dāng)?shù)囊曈X設(shè)計是許多商店的秘決，可讓您快速存取人心。[2]1.詳情頁的目標(biāo)如何讓用戶點擊購買這是詳情頁的終極目標(biāo)，但是如何突破用戶最后的購買底線，起到一個加速用戶購買欲望的作用，這就要看網(wǎng)站的詳情頁面做的是否符合用戶的心理預(yù)期了，詳情頁的目標(biāo)是讓顧客了解產(chǎn)品和選擇產(chǎn)品，最終達(dá)到一個購買并且支付的目的。2.設(shè)計要點本一個清晰有用的詳情頁設(shè)計對于在搜索需要的產(chǎn)品的顧客來說是真正的朋友，它可以使顧客了解產(chǎn)品變得更加輕松。不同于線下的實體店購買商品，用戶在選擇商品的時候是可以進(jìn)行身體觸摸和感受的，用戶可以通過嘗試去試一試產(chǎn)品的效果，從而來確認(rèn)這個商品是否符合自己的購買需求。但是我們在網(wǎng)頁展示商品的時候只有一張張的圖片，沒有實際商品給用戶接觸。因此顧客對圖像質(zhì)量的要求也越來越高，因為清晰的畫質(zhì)會更有吸引力。三、總體設(shè)計（一）設(shè)計原理通過對比網(wǎng)上一些其他設(shè)計比較好的網(wǎng)站，我們根據(jù)其整體的設(shè)計我們利用Photoshop完成對美妝網(wǎng)上商城頁面的布局制作。美妝商城美妝商城熱門品牌功效官方直售會員專享護(hù)膚彩妝香水男士線上專柜圖3-1美妝商城總體設(shè)計圖（二）客戶使用研究當(dāng)一個客戶點擊進(jìn)入網(wǎng)站的首頁的時候，他只能夠通過鼠標(biāo)點擊網(wǎng)站上所呈現(xiàn)的圖片去瀏覽，當(dāng)他真正想要去購買商品的時候，用戶就需要去注冊一個屬于自己的賬號了，因此，我們在對頁面進(jìn)行排版的時候要注意其注冊按鈕是否明顯，各個網(wǎng)頁之間的交互是否符合用戶的需求，這些都要是要去研究的，只要這樣我們設(shè)計出來的網(wǎng)頁才能符合用戶的使用需求。（三）界面設(shè)計方案當(dāng)設(shè)計原則可以概括為三個要點：用戶控制界面，保持界面的一致性，減輕用戶的記憶負(fù)擔(dān)時，而本次美妝商城的頁面設(shè)計堅持秉承了重在人機交互性的特點，旨在做出簡約大氣，讓用戶有良好的體驗的界面。事實上，消費者一般只對網(wǎng)站的某些部分感興趣，這種興趣會延續(xù)一段時間。這在設(shè)計網(wǎng)站時尤為重要。更吸引人的是能夠根據(jù)不同用戶的喜好顯示定制的頁面，并顯示用戶感興趣的內(nèi)容，這為用戶節(jié)省了大量的搜索時間。除了頁面布局等因素外，網(wǎng)頁的色彩也尤為重要，這是一個網(wǎng)站的靈魂，一個好的網(wǎng)站完全可以通過其色彩構(gòu)成突出主題并吸引住用戶。那么什么樣的色彩是合理的昵?第一點，網(wǎng)頁設(shè)計的顏色必須是溫和的，盡量避免太亮或太暗，給用戶舒適的觀看體驗。第二點，網(wǎng)頁色彩旨在滿足設(shè)計的需求，盡可能根據(jù)網(wǎng)頁內(nèi)容的主題提供相應(yīng)的顏色配置。第三點，盡量設(shè)計互補和諧的顏色，這樣既不會讓用戶感到視覺疲勞又可以很好的通過顏色的轉(zhuǎn)換進(jìn)行網(wǎng)頁內(nèi)容的過渡。四、詳細(xì)設(shè)計及成果展示（一）網(wǎng)頁設(shè)計的設(shè)計要素1.頁面文字設(shè)計這些標(biāo)記文字必須看起來自然流暢。網(wǎng)站的每個部分都是為了銷售產(chǎn)品，網(wǎng)頁的主要文字應(yīng)與廣告表格中的文字相同，在主要文字的周圍還應(yīng)該留有一些空位做一些簡單的其他的介紹。文字的顏色也不能五顏六色，這會讓用戶在瀏覽的時候感覺到不舒服。在文字中使用一致的字體使用可提高文字的可讀性。通常使用一般字體適合消費者瀏覽。特殊字體更適合標(biāo)題，不太適合文本，如果字體類型很復(fù)雜，很難閱讀，這也會讓客戶很快感到疲勞，厭煩了就會離開頁面觀覽。除了字體選擇重要之外，文本也很重要。因此，設(shè)置字體顏色時，不同的瀏覽器和監(jiān)視器對顏色顯示有不同的效果。2.頁面圖像設(shè)計圖像是網(wǎng)上購物中非常重要的一部分，其視覺效果比文字強得多。它能立即引起顧客的注意，并告訴他們關(guān)于你產(chǎn)品的基本信息。在多媒體信息里，它比文本更有用。網(wǎng)上商店的優(yōu)秀圖片是增加頁面數(shù)量和促進(jìn)購買的關(guān)鍵。圖像應(yīng)該有助于文本傳達(dá)視覺信息，并促進(jìn)其理解。因為圖像可以直接、具體地展示高質(zhì)量、高質(zhì)量的內(nèi)容，使平凡的事物成為具有較強創(chuàng)造力的、有吸引力的形象。[3]布局元素在創(chuàng)造獨特的視覺風(fēng)格和吸引視覺注意力方面發(fā)揮著重要作用。它有兩個功能：設(shè)置和管理視覺效果。3.頁面色彩搭配設(shè)計網(wǎng)絡(luò)上色彩豐富，怎么才能知道哪些顏色放在一起會好看呢？可以看看其他設(shè)計人員在印刷品和網(wǎng)上使用的顏色。倘若有一些顏色組合很引人注目，可以把這些例保存下來。如果別人使用這些顏色組合的效果不錯，你使用這些顏色時看上去也會很棒。顏色的不斷變化會影響人們的情緒，不同的顏色會有自己的情緒。因此，顏色因素在模型設(shè)計中也非常重要。不同的顏色對人的感覺有不同的影響，不同的產(chǎn)品和品牌也會有它適合的顏色。好的色彩設(shè)計可以給顧客以強烈的視覺沖擊力，能引發(fā)情感共鳴。4.頁面板式設(shè)計設(shè)計一個網(wǎng)站就像傳統(tǒng)的報紙和雜志，報紙或期刊可考慮在網(wǎng)站上放置頁面。網(wǎng)站設(shè)計的成功不僅僅取決于文字、圖像和顏色的組合和選擇。同時也決定于其版式的排布是否得當(dāng)。如果在網(wǎng)站的頁面展示上，文字和圖片的搭配不當(dāng)，胡亂的排列在一起，就會影響到頁面整體布局的美感，這都是不利于網(wǎng)站的推廣的。為了構(gòu)成生動的頁面視覺效果，網(wǎng)店的版式布局要有一定的平衡性，要掌握好節(jié)奏。（二）功能設(shè)計一個完整的網(wǎng)站不僅僅只有文字、圖像頁面的展示，更重要的是他要完成這個網(wǎng)站的主要功能，本次美妝網(wǎng)上商城的頁面設(shè)計分為四個模塊：1.用戶模塊用戶是這個網(wǎng)站的主要使用者之一，因此我們在設(shè)計這個模塊的時候要考慮好用戶主要的實現(xiàn)功能。（1）用戶注冊功能，如圖4-1所示：圖4-1用戶注冊（2）用戶登錄功能，如圖4-2所示：圖4-2用戶登錄（3）用戶信息展示，如圖4-3所示：圖4-3用戶信息2.商家模塊商家是這個網(wǎng)頁另一個使用者，因此在設(shè)計的時候也是需要考慮到其主要的實現(xiàn)功能的。下面是商家的部分功能展示：（1）商家入駐，如圖4-4所示：圖4-4商家入駐信息（2）商家發(fā)布新產(chǎn)品介紹，如圖4-5所示：圖4-5商家發(fā)布新產(chǎn)品介紹圖（3）商家在售物品清單展示，如圖4-6所示：圖4-6商家在售物品清單3.商品模塊商品模塊主要用來展示商品的出售信息，以及在商品詳情頁對商品的主要功能做一個介紹，用來幫助用戶更快的了解商品。如圖4-7、圖4-8為商品的展示效果圖：圖4-7產(chǎn)品列表圖4-8商品詳情介紹4.購物車模塊此模塊的主要功能是用來存放用戶要購買的商品的，方便用戶的選擇和對商品的結(jié)算。購物車功能展示如圖4-9：圖4-9購物車參考文獻(xiàn)朱怡潔.淺析不同風(fēng)格女性美妝產(chǎn)品的網(wǎng)頁色彩設(shè)計[J].明日風(fēng)尚,2018,000(011):P.15-15.周少波.基于SSH框架的美妝商城的設(shè)計與實現(xiàn)[J].電腦知識與技術(shù),2017(31):292-294.迪姝雅.2019-2020年美圖美妝傳播方案設(shè)計[D].2019.姜皓.面向中年女性的美妝APP體驗設(shè)計研究[D].2018.李木耳.美妝界的喬布斯愛上設(shè)計愛上你[J].健康之友,2015.陳夢圓.微商基于微信平臺的傳播內(nèi)容與運作研究——以廣州、深圳美妝類微商為例[D].2016.紀(jì)竹燕.傳統(tǒng)國貨化妝品網(wǎng)店視覺設(shè)計研究[D].2016.王周娟.網(wǎng)