e-commerce

品牌網站設計，如何引人入勝？

在這個數位化的時代，消費者對於品牌的接觸點已逐漸從現實生活中轉移至社群網路，不論何種屬性的產業終究需要透過數位轉型接觸更多的人，「網站」也逐漸成為品牌與消費者之間的重要橋樑。它可以用以展示品牌形象，也可以透過一連串的數位體驗傳達品牌的服務、甚至有許多因應數位時代而生的新型產業，網站即是產品本身，也就是SaaS (Software as a Service) 軟體即服務的類型。

網站看似是一頁頁平面的展現，在設計與規劃上卻像是建造一棟大樓。當消費者踏入這座虛擬的大門時，網站設計師的工作便是在傳達品牌內容的同時，讓大家盡可能保持愉快地持續探索，稍有不好的體驗都可能流失掉潛在的機會。這次 thinkers 將會以品牌企劃與視覺設計的角度，分析如何建構出引人入勝的客製化網站。

Case Study 01

一切的起點：訴說引人入勝的故事

品牌轉化成網站之前，需要先確認它的角色與任務、梳理龐雜的品牌資產，再以數位的思維將企劃導入於網站中。訴說可與目標族群產生共鳴的語言、展示他們感興趣的內容，是落實視覺設計之前的重要前置任務。

霹靂布袋戲近年來逐漸從傳統野台轉型為以偶戲為核心的影視娛樂品牌，經過品牌重塑後的新形象thinkers也全面落實於改版後的官網中。除了需要以更酷更潮的視覺表現吸引年輕族群的注意力，也需要兼顧老影迷時常回來關心新角色和劇集進度的需求，是一個形象與功能都必須同時考量的網站改版任務。

一進入網站，可以看到扇形舞台中演繹著霹靂經典角色的劇集片段，素還真充滿魅力的回眸姿態、葉小釵的一個肅殺眼神、一頁書揮動拂塵的瞬間、一場緊張的正邪對決，都能夠牽動影迷們的情緒、勾起那些曾經著迷於布袋戲的記憶。透過鮮明的色彩與武打動作吸引年輕人的目光，帶出「玩轉新意」的全新形象，以霹靂三大台柱角色「素還真、葉小釵、一頁書」與四大思想流派「儒、道、釋、邪魔」作為引領觀者進入霹靂廣大世界觀的入口。

霹靂布袋戲：http://www.pili.com.tw

Case Study 02

指引消費者的方向：打造一個舒服好逛的虛擬空間

當概念與內容安排妥當之後，便需思考如何在頁面之間打造流暢的動線與瀏覽體驗。如同空間中需要一套清楚的指標系統，順利地引導消費者找到資訊而不迷失方向往往是決定轉換率好壞的重要階段。

耕耘線上學習課程多年的品牌－王可樂日語，在重新打造品牌形象的同時也大幅優化了官網與線上學習系統。我們以「最台灣的教學、最好懂的日語」為王可樂日語形塑了核心概念，網站訴求親切可愛、舒服易懂，透過五個重點特色串連起品牌所提供的服務與優勢，將課程教材的販售數位化、整合社群學習資源、建構完整的會員學習系統。學員只需要在家打開網站，從認識品牌服務內容、購買線上課程到進入系統中學習，過程中無需與任何人接觸、也無需面臨被推銷的壓力，透過幾個簡單的點擊即可隨時隨地、輕鬆自主地學習日語。在疫情的時代裡，解決消費者的痛點，將實體的服務成功地數位轉型，打造一個舒服又好用的線上服務，也讓品牌創造一波新的成長與機會。

王可樂日語：https://colanekojp.com.tw/

Case Study 03

流連忘返的場所：除了好用更要好看

一個網站是否能依循品牌的調性風格，以數位的思維將設計元素融入於網站中，從線下到線上感受到品牌的一致性，是非常重要的環節。一個具有靈魂的網站，細微至一個icon、一個按鈕、一個轉場效果，大至整個網站的圖像、色彩、字體、文案語調都需要被考慮。製作符合品牌調性的自產素材：攝影、插畫、圖像、影片甚至一段音效，都能夠讓使用者留下更加深刻的印象。

中華汽車的新品牌「oloo」，推出了共享電動滑板車與電動機車的服務，未來將逐步自校園擴展至各大城市。在這個追求方便的時代裡，成為短中程距離的懶惰最佳解方。作為傳達新品牌形象的重要入口，我們將oloo的官方網站延續了品牌詼諧有趣的調性；運用了大量的載具影像、角色插畫與品牌pattern，將視覺元素與數位體驗融合一體。透過與使用者互動的設計巧思，oloo的當家IP：暴龍「傻大」與他的好夥伴三角龍「小星」、恐龍蛋「嚕當」活靈活現地在網站中帶領大家熟識品牌與載具功能。

Case Study 04

更加活靈活現！吸引眼球的動態效果

當企劃概念、使用者體驗與視覺設計三者都被仔細考慮後，一個網站已大致能滿足品牌想傳達給使用者的訊息。然而在網路技術不斷進步的時代，許多設計師會透過「動態效果」達到更加細緻深刻的呈現。適當的運用動態效果，可以增強消費者對品牌的記憶與好感；反之，過於誇張複雜也會有增加使用者跳出率、大幅影響速度效能的反效果。如何適切的拿捏以替網站錦上添花，是設計時的一大考驗。

SMEM（瑞士電子樂器博物館）旨在成為世界上第一個電子樂器平台，博物館中展示了Klemens Niklaus Trenkle 在過去35年中所收藏的大量合成器、風琴、鍵盤、效果器和錄音設備。這個網站令人印象深刻的部分在於將「不同廠牌的電子設備發出的聲響與節奏頻率視覺化」，即使沒有親自彈奏，仍能夠透過「律動的文字＋背景音效」的動態效果來暸解各設備之間的差異與特色。

SMEM Online Project : https://www.smemmusic.ch/

Case Study 05

令人著迷的沉浸式體驗：走入如夢似幻的場景

網路讓時間、距離不再是一個屏障，近年來愈來愈多品牌將線下的實體活動轉化為沉浸式的數位體驗，世界各地的人們都能在線上共同參與品牌的盛會，不僅縮短了與消費之間者的距離也提升了對於品牌的黏著度與忠誠感。

義大利的VOUGE在線上推出了 “LIFE IN VOGUE” 的數位版展覽，網站以翻開一本立體書作為開端，帶領觀眾如同搭電梯一般，按下樓層的按鈕就能透過精緻的虛擬實境體驗一層一層參觀Vogue，一虧米蘭總部的神秘面紗。從一樓的主任辦公室、藝術總監的夏季涼亭到頂樓的空中花園，每個場景都打造的如夢似幻毫不馬虎，彷彿躍進了一個大型的藝術作品之中，許多能夠引發思考的資料與物件散落於場景中。這是一場視覺表現與內容深度兼具的線上展覽，也在消費者心中留下美好深刻的沉浸式體驗。

LIFE IN VOGUE 線上展： https://lifeinvogue.vogue.it/

Conclusion

「網站」不只是數位應用的載體，更是網路世界「品牌的門面」。thinkers這次為大家整理了上述幾種精心設計、極具巧思的品牌網站設計類型，不論在視覺表現或是企劃內容上的規劃，都需經過縝密的構思與溝通才能完成。依照品牌需求與欲達成的目的，來決定合適的設計手法與表現方式，將創意與想法注入數位的框架之中，為品牌帶來更深刻的記憶點，而這也是客製化網站和低單價的套版網站最大的差異所在。

客製化品牌網站更能有效的傳遞品牌理念，與吸引消費者或目標客群更深入的與品牌連結。think品牌顧問也持續在品牌之路上，結合應用數位的載體，協助品牌主們達成更完整的品牌目標。

Back to insights

More we thought

design

品牌字體帶領品牌走向新高度

作為一個品牌方，不單單只是商品買賣，更是要在消費者的心中建構對其的認知，而在認知建構的媒介當中「文字」尤為重要。文字在社會上被廣泛認為是文明社會的標誌，因文字系統的建立讓整個世界在溝通上更加明確與提升效率，在日常溝通上、書信撰寫、文章閱讀等都參與其中，故以品牌方在對消費者溝通傳遞時，不管圖片影像多好看，勢必會有文字的撰寫從旁補述其中的亮點，抑或是詳細描述內容等。我們可透過文字的詞意做理念傳達使之清楚理解，更以文字的視覺做繪畫設計使之記憶深刻，在詞意與視覺的相輔相成上，才可達到溝通效益的最大化。敘述至此若僅以文字詞意所描述，那想必就犯了上述所講的問題，忽略了視覺面的重要性，故我們就以Nike作為舉例，並配合下圖繼續探討。