FOR BTL · 東研信超 查看 PDF 版

為 39 年的 BTL,
拍一張會被記住的形象照。

官網是 BTL 走進國際客戶、認證單位、法人投資者眼中的那一刻,最先被記住的樣子。 我們把 BTL 39 年累積的檢測與認證專業,化作三種寫真風格,邀您慢慢看, 挑出最像 BTL 的那一張。

三種寫真風格,三種被世界記住的方式

我們不希望「風格」變成一份菜單,請您挑一個顏色就好。每一版背後,都是 BTL 想被世界看見的一種方式 — 挑哪一版,等於回答:BTL 想以什麼姿態,向客戶自我介紹

Version A 點擊開啟 →
A · Trust

把 39 年的份量穩穩交給對方

Solid & Trustworthy

面對董事會、法人投資者、政府監理機關時,陪您把資訊好好排列,讓每一份認證都被看見、被記住。穩定的版型、傳統的字體,給對方一份「值得託付」的閱讀感。

  • 多語系 Mega Menu — 國際客戶一進站就能讀到自己的語言,跨語言的第一句歡迎。
  • 利害關係人 Tab 切換 — 客戶 / 股東 / 員工 / 社會四類窗口一次看完,找得到聯絡人的安心感。
  • 世界紅色圖釘 — 不必讀文字也能看見 BTL 的跨國服務版圖,這家公司走得很遠。
  • 襯線字體(Georgia) — 把傳統檢測機構的公信力寫進每一行字,言之有重量。
  • 關於我們專區 — 影片+文字+「市場經歷/合作夥伴/技術數量」等數據化呈現,履歷自然攤開。

最適合在這些時候被看見 法人說明會的簡報連結、董事會報告的附件、政府標案投標文件中的官方網址。

Version B 點擊開啟 →
B · Signal

讓檢測的專業,看一眼就感覺得到

Minimal Tech Signal

把 BTL 最核心的「精準、數據、可靠」從文字裡帶出來。淺灰底搭上紅色訊號光點,讓訪客不必讀懂每個字,也能感覺到「這家公司,正在認真地工作」。

  • 紅色方塊=資料節點 — 像實驗室面板上的指示燈,在 Feature、Footer、Banner 處呼吸,品牌一直在線。
  • 波浪訊號線 — 讓 Banner 永遠像在「進行中的量測」,時間是流動的、有生命的。
  • 全球據點真實地理座標 — 上海・台北・桃園等地理位置以真實經緯度繪製,世界地圖上的真實位置。
  • 利害關係人卡片式 — 四類窗口在游標停留時亮起紅邊,找對人,不費力。

最適合在這些時候被看見 客戶官網的例行瀏覽、業務名片掃 QR 後的落地頁、面對品牌商 R&D / 法規工程師 / QA 等技術窗口時的自我介紹。

Version C 點擊開啟 →
C · Motion

為 BTL 站上國際舞台時亮燈

Full-Bleed Motion

當 BTL 要站上國際展會、歐美客戶第一次造訪時,這一版用滿版的光影、緩緩亮起的舞台燈,迎接每一位訪客。不只是一個網站,更像 BTL 為新客人準備的歡迎儀式。

  • Hero 螺旋 3D 動畫 — 緩緩轉動的相片牆,60 秒一輪,每次進站都像放映一支簡短的品牌短片。
  • 深色滿版設計 — 與歐美一線科技品牌同調的視覺語彙,國際舞台上的一席之地。
  • 全球據點脈動光核 — 上海・台北・桃園等地理位置以光的問候呈現,BTL 的能量正在世界各地同步運轉。
  • 利害關係人滿版分區 — 01–04 編號隨著捲動陪您閱讀,在大螢幕上也從容不迫。
  • 詳細頁 Banner 進場動畫 — 標題像聚光燈淡入後緩緩上升,懂得怎麼登場。

最適合在這些時候被看見 國際展會展示用的大螢幕、跨國客戶初次拜訪前的線上門面、品牌形象廣告的落地頁。

您挑選時,可能會在意的六件事

我們把 BTL 的董事會、行銷團隊、IT 同仁挑選時最常想知道的事情,整理成下面六列 — 三版各自如何回應這些在意。

Decision Criteria A · Trust B · Signal C · Motion
品牌想傳遞的氣質 39 年的穩重與託付 看得見的檢測專業 國際舞台的開場感
訪客一進站會說什麼 「這家公司很穩、值得託付」 「這家是做科技、做數據的」 「這是一家國際等級的公司」
最適合在這些時候被看見 法人說明會、董事會簡報 客戶例行瀏覽、業務名片 QR 國際展會、跨國客戶拜訪
利害關係人資訊呈現 Tab 切換・四類一次看完 卡片式・游標亮紅邊 滿版分區・編號陪同閱讀
設計感取向 古典・穩重 簡約・訊號 沉浸・滿版
往後維護的輕重 輕・純文字 / 圖片更新 中・訊號光點需對齊 中・動畫素材預先優化

不論挑哪一張寫真,這些細節我們都已經為 BTL 備好

三版走的是不同風格,但在資訊結構與品牌基底上,我們已經統一準備好了。 您安心挑風格就好 — 功能我們已經一併備齊。

不一定要三選一,BTL 可以這樣搭配

三版不是三選一的選擇題。對 BTL 這種同時面對「既有客戶+國際新客」的企業,混搭反而是常態。以下三種搭配方式給您參考:

Approach · 01

平穩升級

整站 A + 局部 B 點綴

適合先讓既有客戶與監理單位無痛過渡。整站以 A 的穩重為主,只在「關於我們」「全球據點」加入 B 的訊號光點。升級感最溫和,過渡風險最低。

Approach · 02

雙重款待

首頁 C + 內頁 A

首頁用 C 的滿版動畫迎接國際客戶與初次到訪的搜尋訪客;內頁(利害關係人 / 永續 / IR)保留 A 的 Tab 結構,讓法人與既有客戶找得到資訊。內外客戶各得其所。

Approach · 03

一氣呵成

整站 B + 首頁 Hero C

B 作整站基底(訊號感、精準感),首頁 Hero 疊上 C 的螺旋動畫。讓 BTL「檢測界的科技公司」這個形象一次到位,但不讓全站的動畫過重。

在 BTL 開口問之前,我們先說清楚

您可能會問的四個問題。

Q1選定一版後,之後還能再改嗎?

沒問題,可以調整 — 調整幅度越大,範圍越需要另行評估。版型定調後,細節微調(調色、換字、圖片替換、文案修改)屬於輕量調整;若涉及區塊新增、互動行為重寫或架構變動,會視範圍另行報價。

Q2會不會風格太強烈,或太保守?

我們也想過這件事 — 所以三版刻意推到三個方向的盡頭,讓您先看到「最完整的樣貌」,再往中間挑。任何一版都保留調整的空間(例如 C 版可關閉粒子、B 版的訊號線可只出現在 Banner);實際能調到什麼程度、會不會影響整體一致性,會在確認 BTL 的使用情境與素材後再具體討論。

Q3混搭的整合成本高嗎?

這部分主要看您想搭配的範圍 — 依想混搭的範圍而定。如果只是把其中一版的某幾個區塊(例如首頁的 Hero、某個內頁的 Banner)換成另一版的風格,通常可以在原版本上直接疊加調整,不用重做。若範圍大到整站的動畫、字體、主色、手機與桌機的排版都要一起調整,就會需要額外時間。建議您直接告訴我們「哪幾頁想用哪一版」,會依實際範圍提供估算。

Q4這些版本能直接上線嗎?

這份提案目前還是視覺/互動原型,前端 HTML/CSS/JS 已完成,尚不能直接上線。正式上線前仍需另行規劃後台資料串接、網址與伺服器部署。另外,SEO、網站分析埋點、可存取性(A11y)等項目並非 BTL 現有官網既有功能,本提案範圍內不含;如 BTL 有意一併導入,會於後續另行評估範圍、時程與成本。

三種樣子,都是 BTL

不論您挑哪一張,都是 BTL — 我們會依您選定的樣子,繼續陪您把它完成。