• <strong id="c8cpx"></strong>

    <progress id="c8cpx"><track id="c8cpx"></track></progress>
    <dd id="c8cpx"></dd>

    <em id="c8cpx"><ruby id="c8cpx"><u id="c8cpx"></u></ruby></em>
  • <dd id="c8cpx"><track id="c8cpx"></track></dd>

    所在位置:首頁 > 設計資訊 > 企業VI設計 > 國外vi系統設計公司-如何設計產品頁面形象和VI視覺

    國外vi系統設計公司-如何設計產品頁面形象和VI視覺

    產品頁面是專門用于銷售特定產品或服務的網站的一部分。與主頁(主要是信息性的)等其他網頁不同,產品頁面的作用是告知和說服——這意味著它會理想地引導客戶點擊“添加到購物車”按鈕。這也是產品頁面設計成為挑戰的原因,考慮到漂亮的設計并不總是轉化為高轉化率的設計。

     

    審美選擇必須比平時更具戰略性,才能將產品從屏幕上移到客戶手中。為了使這更容易,國外vi系統設計公司整理了這份產品頁面設計的終極指南。

     

      

    產品頁面的目標

    基本而言,制作產品頁面是為了促成購買。但是為了實現這一總體目標,產品頁面必須完成幾件事。


    國外vi系統設計公司-如何設計產品頁面形象和VI視覺-探鳴設計.png 


    它應該解釋什么是出售的。產品頁面必須向訪問者展示產品的外觀、功能以及成本。

    它應該建立信任。首次購買是一種信念的飛躍,尤其是當產品在線時,因此產品頁面必須預見并消除訪問者的疑慮。

    它應該創造一種體驗。產品頁面將使用引人注目的媒體和副本,讓客戶感覺數字化的東西真實。

    它應該是直觀的。產品頁面必須完成上述所有目標,而不會用信息轟炸用戶。

     


    產品頁面的目標和買家的目標


    實際上,產品頁面的目標應該與買家的目標一致??蛻粼诖隧撁嫔鲜且驗樗麄冊噲D滿足需求。

     

    假設產品是解決方案,那么產品頁面的工作就是說服訪問者這是真的。如果產品不是,這也應立即明確。

     

    當然,所有這些都需要了解買家的需求。您必須首先了解產品的營銷對象以及他們習慣與之交互的產品類型和網頁。

     

    廣泛的人口統計、調查、訪談和心理概況都是目標受眾研究的標準技術。然后,國外vi系統設計公司必須將他們對購買者的了解轉化為設計中的心理學原理。

      

    產品頁面的內容


    產品頁面的基本內容圍繞“折疊”或屏幕截斷頁面其余部分的點構建。

     

    因為用戶必須滾動才能查看首屏下方的內容——換句話說,他們必須做出主動選擇才能繼續瀏覽——最初的“首屏”部分是保存最重要信息的地方。所以讓我們從那里開始:

     

    標頭:這包含品牌徽標和導航菜單選項。這在大多數網頁上是相當標準的,因此不必特別大。許多品牌即使在桌面上也選擇最小化版本的導航,例如漢堡包圖標。

     

    產品描述:這包含產品名稱、價格、價值主張,有時還包含評論快照(例如星級)。從本質上講,這可以識別產品并簡要說明訪問者應該購買它的原因。

     

    產品圖片和媒體:這包含主要的產品圖片,通常在輪播中,供訪客循環瀏覽各個角度。這還包括查看選項,例如不同的顏色或型號。

     

    號召性用語(CTA)按鈕:這是指向購買頁面的按鈕。CTA 附近包括購買選項,例如數量或尺寸。


    國外vi系統設計案例.jpg 

     

    國外vi系統設計公司將列出的其余內容項不一定非要放在首屏以下,但不如上述內容那么重要。

     

    支持信息:這將包括有關產品的更詳細的工作原理信息,例如重量和尺寸、常見問題解答,甚至產品特定部件的故障。

     

    同行認可:這包括任何著名品牌或過去使用過該產品的人的推薦、評論和列表。

    支持圖形:這些是輔助滾動的非必要圖像,例如有助于頁面更具交互性和活力的插圖/動畫。它們通常與網站的一般品牌相關。

     

    推薦產品:這會顯示訪問者可以考慮的其他產品列表。如果訪問者最終對這個產品不感興趣,推薦的產品可以讓他們有機會繼續瀏覽其他產品頁面,而不是簡單地離開網站。

     


    不同類型的產品如何影響產品頁面內容


    產品頁面的內容可能因產品/服務的性質而異。最常見的區別發生在物理產品和數字產品(或可見和不可見)之間。

     

    實體產品在數字空間中具有固有的劣勢,其頁面內容的目標是替代實體店。他們可以通過將更多資源投入媒體、詳細的產品規格或突出運輸/退貨政策來實現這一目標。

     

    與此同時,依賴非視覺感官的蠟燭或葡萄酒等實體產品往往在其頁面策略中模仿數字產品——即強調有說服力的描述。但是因為他們依賴個人品味,所以這個領域的趨勢是在產品頁面之前使用入職測驗。

     

    這些向訪問者(有趣但具有戰略意義)詢問有關他們偏好的問題,以營造一種他們最終看到的產品頁面已經為他們策劃的感覺。

     

    數碼產品或服務可能無法顯示圖像,因為產品無法拍照。服務也可能經常是新奇或陌生的,需要花費更多時間來確定品牌是誰以及他們提供什么。出于這個原因,定價通常被保留到最后。未完全了解報價的列出的價格可能會嚇跑訪問者。

     

    另一方面,實體產品在這方面可以更直接——一件 T 恤就是一件 T 恤,你要么認為它看起來足夠好買,要么不買。

     

     

    產品頁面設計最佳實踐


    現在國外vi系統設計公司已經了解了產品頁面如何工作的基礎知識,我們將介紹一些設計技巧并查看一些示例。

     

     

    1.使用合適的產品頁面設計軟件

     

    設計過程通常會從簡要或必要功能列表開始。然后,大多數設計師將過渡到紙筆草圖,以產生有關元素如何組合在一起的想法。這被稱為線框- 頁面結構的簡化骨架表示。一旦你縮小了這些范圍,你必須轉向軟件。

     

    Sketch 和 Figma 等原型應用程序可以創建更復雜的模型,讓您更準確地表示頁面的外觀。與此同時,InvisionApp 創建了交互式原型,從而加快了測試過程。

     

     原型應用程序的好處是它們允許設計師在早期只關注用戶體驗。它們也往往導致較少的原創設計。雖然這通常更可?。繕耸菬o縫購物體驗),但如果您想制作更具創意的設計、紋理或動畫,則需要Photoshop 和 After Effects 等軟件。

     

    形象和VI視覺設計.jpg

     

    2.使用基于模板的布局方法

     

    考慮到電子商務網站將有多種產品(如果不是數百種),為每個單獨的項目定制產品頁面是不可行的。大多數設計師的目標是模板布局,使添加新產品頁面像復制和粘貼內容一樣容易。一種方法是為所有產品頁面使用一個模板,或者為不同的產品類別使用稍微不同的模板。

     

    基于模板的設計需要規劃:營銷人員和文案必須為每種產品提供一致數量的圖像、功能列表、問答、推薦等。同時,產品頁面模板不必總是100% 相同。例如,如果產品之間的顏色會有所不同,則可以改變產品頁面的配色方案以匹配。

     

     

    如今,許多產品頁面甚至在不同公司都有相當標準的布局。例如,電子商務網站傾向于在左側顯示圖像,右側顯示產品描述、自定義選項和CTA。下面是規格和優勢列表,然后是常見問題解答和評論/推薦。

     

     

    像這樣無處不在的布局的優勢在于它的熟悉度:大多數訪問者會直觀地知道在哪里可以找到他們正在尋找的信息。它的直截了當對于品牌無法控制產品圖像和副本的買家/賣家平臺(如 Ebay)來說尤其理想。

     

    但是有一些方法可以防止這種布局變得乏味。在圖中的國外vi系統設計公司設計中,產品頁面元素的總體定位是標準的,但圖像的比例和純色背景都出乎意料。

     

     

    3. 設計時要考慮到網站的其他部分

     

    當然,產品頁面不是孤立設計的:它們必須與網站的其余部分集成。像這樣的一致性不僅對于品牌推廣很重要,而且因為不一致的產品頁面在潛意識中對潛在購買者來說似乎不太值得信賴。

     

    將產品頁面限制在現有品牌中也可能給國外vi系統設計公司帶來挑戰。假設一個品牌團隊出于一些不相關的原因決定對所有圖像使用黑白濾鏡——現在如果產品頁面強調商品的顏色,它就會脫離品牌。這就是為什么優先考慮在線購物的電子商務企業應該從產品頁面設計開始網頁設計過程。


    一分鐘了解探鳴設計公司
    好設計直接找總監談
    聊思路,理方向,談費用,聽聽總監建議再做決定
    相關案例
    Relevant cases
    點擊查看更多案例

    總監微信

    復制成功

    業務咨詢 何先生

    業務咨詢 何先生

    孕妇喷水秘 网站_97人人人操人人干_日本丰满少妇高潮呻吟_日本丰满少妇高潮呻吟
  • <strong id="c8cpx"></strong>

    <progress id="c8cpx"><track id="c8cpx"></track></progress>
    <dd id="c8cpx"></dd>

    <em id="c8cpx"><ruby id="c8cpx"><u id="c8cpx"></u></ruby></em>
  • <dd id="c8cpx"><track id="c8cpx"></track></dd>