項(xiàng)目10 移動端寶貝詳情頁設(shè)計(jì)

項(xiàng)目十移動端寶貝詳情頁設(shè)計(jì)網(wǎng)店美工項(xiàng)目實(shí)戰(zhàn)教程CONTENTS目錄玩具魔方移動端寶貝詳情頁設(shè)計(jì)10.1拓展手機(jī)殼移動端寶貝詳情頁設(shè)計(jì)10.2課后思考10.310.1.1設(shè)計(jì)理念10.110.1.2工具方法10.1.3實(shí)現(xiàn)過程玩具魔方移動端寶貝詳情頁設(shè)計(jì)移動端店鋪的詳情頁與PC端店鋪的商品詳情頁有著相同的設(shè)計(jì)思路，在借鑒PC端店鋪商品詳情頁設(shè)計(jì)方法的基礎(chǔ)上要注意迎合移動端的特點(diǎn)，控制好描述文字的大小與簡潔程度，避免過小、過密的文字使移動端買家不能很好的接收商品信息，造成流量的跳失。魔方作為一款益智玩具，詳情頁設(shè)計(jì)不僅要體現(xiàn)商品的構(gòu)造和特性，同時還要突出玩具色彩及易玩易學(xué)的優(yōu)勢，效果如圖所示：10.1玩具魔方移動端寶貝詳情頁設(shè)計(jì)10.1.1設(shè)計(jì)理念通過產(chǎn)品信息介紹商品的特質(zhì)、特性等基本功能，使買家可以快速了解產(chǎn)品。通過不同細(xì)節(jié)的展示突出商品的賣點(diǎn)與優(yōu)勢，引導(dǎo)買家購買商品。以買家利益為中心，告知并強(qiáng)調(diào)買家購買商品后會得到的利益，激發(fā)買家購買欲望。配合相關(guān)寶貝的推薦，可以提高用戶的轉(zhuǎn)化率。10.1.2工具方法添加參考線來實(shí)現(xiàn)多個對象的對齊和區(qū)域限定，使得頁面更整齊、更規(guī)范。利用“漸變疊加”、“投影”、“圖案疊加”等圖層樣式為對象增添效果。通過“矩形工具”、“直線工具”等繪制不同形狀，圖文結(jié)合，豐富頁面效果。10.1.3實(shí)現(xiàn)過程制作優(yōu)惠券區(qū)域：根據(jù)實(shí)際區(qū)域布局，在相應(yīng)位置建立水平參考線，繪制矩形，添加素材，輸入廣告語，配合矩形工具設(shè)計(jì)優(yōu)惠券。10.1.3實(shí)現(xiàn)過程制作產(chǎn)品展示區(qū)域：輸入賣點(diǎn)文字、添加圖層樣式，制作文字和魔方圖案水印，添加魔方素材圖片，調(diào)整位置和大小。10.1.3實(shí)現(xiàn)過程制作產(chǎn)品信息區(qū)域：添加產(chǎn)品參數(shù)信息，設(shè)置字體格式，配合矩形工具修飾，添加魔方素材。10.1.3實(shí)現(xiàn)過程制作產(chǎn)品細(xì)節(jié)展示區(qū)域：配合濾鏡效果制作背景，添加細(xì)節(jié)文案，添加細(xì)節(jié)展示圖片。10.1.3實(shí)現(xiàn)過程制作產(chǎn)品細(xì)節(jié)展示區(qū)域：繪制魔方簡筆畫，配合形狀工具展示魔方顏色，添加細(xì)節(jié)文案，添加細(xì)節(jié)展示圖片。10.1.3實(shí)現(xiàn)過程制作產(chǎn)品細(xì)節(jié)展示區(qū)域：添加細(xì)節(jié)文案，配合形狀工具，添加細(xì)節(jié)展示圖片。10.1.3實(shí)現(xiàn)過程制作產(chǎn)品細(xì)節(jié)展示區(qū)域：添加素材圖片，降低不透明度，添加廣告文案。10.1.3實(shí)現(xiàn)過程制作產(chǎn)品細(xì)節(jié)展示區(qū)域：配合形狀工具輸入細(xì)節(jié)文案，添加細(xì)節(jié)展示圖片，添加細(xì)節(jié)展示圖片。10.1.3實(shí)現(xiàn)過程制作產(chǎn)品細(xì)節(jié)展示區(qū)域：配合形狀工具鄭重承諾內(nèi)容，輸入相關(guān)文字，設(shè)置字體格式。10.1.3實(shí)現(xiàn)過程制作相關(guān)寶貝區(qū)域：添加展示圖片，輸入文案信息，制作點(diǎn)擊按鈕。10.2拓展手機(jī)殼移動端寶貝詳情頁設(shè)計(jì)10.2.1設(shè)計(jì)理念10.2.2實(shí)現(xiàn)過程10.2.1設(shè)計(jì)理念界面整體以黑灰色調(diào)為主，加以紅色點(diǎn)綴，突出了產(chǎn)品的現(xiàn)代時尚特點(diǎn)，選取符合主題的背景和廣告詞，達(dá)到和諧統(tǒng)一的效果。選取手機(jī)殼多角度細(xì)節(jié)展示，展現(xiàn)產(chǎn)品賣點(diǎn)。設(shè)計(jì)好評展示和相關(guān)寶貝鏈接，可以為店鋪提升轉(zhuǎn)化率，豐富頁面內(nèi)容。詳情頁效果如圖所示。8.2.1設(shè)計(jì)理念10.2.2實(shí)現(xiàn)過程在Photoshop中新建一個文檔，寬620像素，高7741像素，背景白色，為產(chǎn)品展示區(qū)域繪制黑色矩形底，使用畫筆工具制作高光效果，利用鋼筆工具繪制黑灰線條修飾背景。10.2.2實(shí)現(xiàn)過程置入產(chǎn)品圖片，添加文案信息，繪制形狀，并為其添加圖層樣式，達(dá)到廣告效果，在手機(jī)殼圖片下方，制作產(chǎn)品特性圖標(biāo)，利用橢圓工具繪制圓形輪廓，利用自定義形狀工具繪制特殊形狀。10.2.2實(shí)現(xiàn)過程制作產(chǎn)品信息區(qū)域，繪制參考線，參照參考線位置繪制黑色矩形底。同時置入手機(jī)殼素材圖片，輸入產(chǎn)品信息標(biāo)題，輸入相關(guān)產(chǎn)品參數(shù)信息，設(shè)置對應(yīng)字體格式。10.2.2實(shí)現(xiàn)過程制作細(xì)節(jié)展示圖片：繪制參考線，參照參考線繪制黑色矩形底，在上方繪制特性圖標(biāo)，突出產(chǎn)品特點(diǎn)，同時輸入文案內(nèi)容，設(shè)置相應(yīng)字體格式。10.2.2實(shí)現(xiàn)過程制作細(xì)節(jié)展示圖片：繪制參考線，參照參考線繪制黑色矩形底，在上方繪制特性圖標(biāo)，突出產(chǎn)品特點(diǎn)，同時輸入文案內(nèi)容，設(shè)置相應(yīng)字體格式。10.2.2實(shí)現(xiàn)過程制作細(xì)節(jié)展示圖片：繪制參考線，參照參考線繪制黑色矩形底，在上方繪制特性圖標(biāo)，突出產(chǎn)品特點(diǎn)，同時輸入文案內(nèi)容，設(shè)置相應(yīng)字體格式。10.2.2實(shí)現(xiàn)過程制作細(xì)節(jié)展示圖片：繪制參考線，參照參考線繪制黑色矩形底，在上方繪制特性圖標(biāo)，突出產(chǎn)品特點(diǎn)，同時輸入文案內(nèi)容，設(shè)置相應(yīng)字體格式。10.2.2實(shí)現(xiàn)過程制作細(xì)節(jié)展示圖片：繪制參考線，參照參考線繪制黑色矩形底，在上方繪制特性圖標(biāo)，突出產(chǎn)品特點(diǎn)，同時輸入文案內(nèi)容，設(shè)置相應(yīng)字體格式。10.2.2實(shí)現(xiàn)過程制作細(xì)節(jié)展示圖片：繪制參考線，參照參考線繪制黑色矩形底，在上方繪制特性圖標(biāo)，突出產(chǎn)品特點(diǎn)，同時輸入文案內(nèi)容，設(shè)置相應(yīng)字體格式。10.2.2實(shí)現(xiàn)過程添加黑色矩形底，繪制好評展示標(biāo)簽與分隔線條，置入好評截圖圖片，選取關(guān)鍵好評進(jìn)行矩形邊框標(biāo)注，制作好評展示。10.2.2實(shí)現(xiàn)過程制作購買推薦區(qū)域，繪制矩形底，利用畫筆工具添加高光效果，繪制矩形與線條，制作購買推薦標(biāo)題，置入產(chǎn)品素材圖片，輸入相關(guān)文案。10.3課后思考10.3.1思政思考10.3.2技能思考現(xiàn)在越來越多的買家選擇通過移動端店鋪進(jìn)行網(wǎng)購，喜歡使用手機(jī)購物的買家很多時候都是利用工作或?qū)W習(xí)的碎片時間瀏覽購買所需商品，因此在進(jìn)行移動端寶貝詳情頁設(shè)計(jì)時，盡量設(shè)計(jì)簡潔的界面迎合買家的需求，從一定意義上節(jié)約了買家的時間，提高了買家的工作效率。移動端的產(chǎn)品推薦或活動頁面鏈接必須保證精準(zhǔn)，以防嵌入不良鏈接，導(dǎo)致買家或店鋪遭受損失，保持移動端店鋪誠信尤為重要。10.3.1思政思考移動端產(chǎn)品詳情頁相比PC端可以使買