設計高易用性網站的8個實用小技巧（上）|數位時代 BusinessNext

設計網站最重要的當然是達成網站目標，而易用性好壞也大大影響網站目標的達成率！beBit將透過「設計高易用性網站的8個實用小技巧（上）」介紹網站製作的前6個易用性小技巧，下篇將介紹撰寫網頁文案及視覺動線的規劃，協助讀者理解高易用性網站的最基本原則。

吸引人的第一視覺區，留住使用者
「接近律」與「封閉律」讓使用者快速理解頁面元素
行動按鍵上的用字遣詞大大影響頁面轉換率
可以點的東西就要「看起來可以點」
重要資訊主動展開在頁面上，不要隨易使用頁籤隱藏內容
頁面底部與Footer比你想像的重要
網頁文案這樣寫，溝通更容易
如何掌控使用者在網站上的視線

重點一、吸引人的第一視覺區，留住使用者

第一視覺區是進入網站後的第一印象，許多網站的跳離率過高，與第一視覺區的設計有很大的關係！設計第一視覺區的基本要求就是「吸引使用者留在網站，繼續瀏覽」，其中四個重點為：(1) 僅保留精華資訊，以節省高度、(2) 設置頁面標題，協助使用者快速理解頁面內容 (3) 讓使用者理解頁面下方還有內容、(4) 運用圖片增加畫面吸引力。

以Amazon網站首頁為例，無論以1024 x 768或1280 x 800等解析度瀏覽網站，第一視覺區中滿足了上述四個元素，放置了最重要的資訊、圖片，並讓使用者感覺網頁下方還有內容，增加往下瀏覽的意願。

【圖一】Amazon首頁第一視覺區
enter image description here
（圖片來源：Amazon網站）

重點二、「接近律」與「封閉律」讓使用者快速理解頁面元素

(1) 接近律 (proximity)
簡單的說就是運用人類視覺會將鄰近的東西分成同一組的特性，所以在網站上如果想要將一群元素讓使用者視為同一群體，可以增加和其他元素之間的空間，並將同元素之間的距離拉近。

(2) 封閉律 (closure)
簡單的說就是運用線、圖或標題分割區域，讓看的人更能理解區域間的差別。

下圖二是beBit網站中的顧客與成果頁面。左方的網站圖片與右方的成效與說明放置位置接近，兩個案例間用灰色的線區隔，更明顯的做出案例間的區隔。

【圖二】beBit網站區隔元素的設計
enter image description here
（圖片來源：beBit網站）

重點三、行動按鍵上的用字遣詞大大影響頁面轉換率

網頁之間基本上是藉由連結移動，但是一般連結的點擊率10%已經算是高的，因此用字要讓使用者易於聯想，增加點擊意願。圖三是一個旅遊網站的例子，在首頁時，使用者想找飯店，而行動按鍵上若是用「訂房」兩字，使用者會誤以為是下直接訂單，因而不願意點擊，若改為「搜尋住宿」後，點擊率大大提升。

【圖三】在首頁想引導使用者搜尋住宿，就不要使用「訂房」兩字在行動按鍵上
enter image description here
資料來源：beBit

重點四、可以點的東西就是要「看起來可以點」

前面我們提到了，要讓使用者點擊內容本身就是一件不容易的事情，如果使用者在網頁上無法辨認出連結的話，即使準備了吸引人的內容也徒勞無功。雖然扁平化的設計隨著iOS7推出引起風潮，但從達成「讓使用者點下去」的目的來看，能點的東西「看起來可以點」更重要！

(1) 藍色或有底線的文字
在藍色文字下方加上底線是沿用到今天的基本手法。由於近年重視文字的易讀性及整體設計，不使用藍色底線的網頁也在增加，但從beBit至今觀察到的使用者行為，「藍色」或「底線」還是讓使用者辨認出連結的重要因素，因此請盡量保留其中元素之一。另外，在並非連結的文字使用「藍字」或「底線」的話，會讓人誤認為可以點擊，要盡量避免。

(2) 行動按鍵要有按壓感
關於行動按鍵的裝飾，具有「可以按下」的感覺十分重要。通常在前端加入符號，賦予按鈕網頁連結感（一般為箭頭或三角形），或在按鍵旁加入層次或陰影，或使用帶有圓角的矩形，便可以為按鍵加上按壓感。
【圖四】具有「按壓感」的行動按鍵
enter image description here

重點五、重要資訊主動展開在頁面上，不要隨易使用頁籤隱藏內容

許多網站喜歡用頁籤（Tab）的方式設計，但頁籤的致命處在使用者沒有強烈動機尋找資訊時，很容易忽略頁籤以致沒看到藏在頁籤中的重要內容。設計網站時要考慮使用者上網的心境，有些網站偏向功能型網站（如：網路銀行），有些網站是娛樂型網站（如：網購平台）。使用者造訪功能型網站時，尋找資訊的動機強烈，即便我們只放一個關鍵字，使用者也有意願找到那個關鍵字並點擊；但娛樂型網站不一樣，一般網購平台的首頁瀏覽情境都是打發時間，若使用頁籤等隱藏資訊的設計，這些被隱藏起來的內容很有可能就直接被忽略了！網頁設計師在思考頁面內容應該如何配置時，一定要一併考慮使用者造訪網站的積極性，才不會誤將重要內容的曝光度打折扣。

重點六、頁面底部與Footer遠比你想像的重要
當使用者的頁面拉到底下時，代表他已經看完一項內容，此時是他們心有餘力看其他內容的時機。為了延續瀏覽行為，頁面的底部是個可以利用的重要區域。因此，推薦商品或關聯性商品應該要放的地方是頁面底部而非頂部。另外，mega footer的運用也是延續瀏覽情境的好工具，蠻適合運用在網購平台這種瀏覽頁數越高越好的網站。許多網站設計師花了很多心思設計了每頁的內容，但卻忽略了在頁面底部建立與其他頁面的連結，導致使用者看完一頁內容後就打住，這真的很可惜！未來在設計你的網站時，也不要輕易忽視頁尾的區域！

【圖五】JAL網站的Mega footer，可延續瀏覽情境
enter image description here
（圖片來源：JAL網站）

本文出自beBit

這是一場以成長為名的轉型故事，主角是成軍超過 45 年的製鎖大廠—金泰工業。

走過近半個世紀的製鎖歲月，金泰深知，在數位浪潮席捲下，守成即是退步。尤其當物聯網趨勢興起，讓鎖具不再只是單純的硬體，而是結合系統與服務的智慧管理平台，金泰敏銳地看見這場轉變背後的全新市場路徑，進而在原有 B2B 製造基礎上，創立全新品牌「安捷鎖（ A Good Lock ）」，進軍 B2C 智慧門鎖市場，為公司開拓第二成長曲線。

為了支撐這條品牌升級之路，金泰經營管理層在智炬科技的輔導下，從經營思維、企業文化、商業模式到作業流程重新盤點，並導入叡揚資訊的雲端服務方案，逐步落實管理標準化、流程自動化與客戶資料整合。這場轉型不只是系統導入，更是一場由內部管理能力出發，支撐外部品牌成長的組織升級工程。

早期金泰以箱櫃檔片鎖及電源開關鎖為核心產品，透過代工製造模式服務企業客戶。隨著物聯網趨勢興起，開始跨足電子鎖領域，在產品中導入指紋辨識，感應刷卡，密碼與手機連動等電子模組，成功敲開智慧生活的大門。

金泰副總經理曾慧芳表示，金泰在切入消費市場的過程中觀察到，目前市面上的智慧門鎖大致可分為兩類：一類是價格較高的歐美進口品牌；另一類則是透過網購流入、缺乏售後保障的產品。無論是哪一類，主要都以新建大樓為應用場景，較難滿足既有住宅的實際需求。

「臺灣老公寓常見木門、鐵門等配置，門型與結構條件較為多元，市面上主流智慧鎖未必能直接適用；另一方面，更換整片門板對不少家庭而言也是一筆不小的支出。基於這樣的在地住宅條件，金泰將自身長期累積的鎖具製造與研發經驗，結合外部夥伴的電子模組與應用技術，投入更符合臺灣住宅條件的智慧門鎖開發。目標不是單純把智慧鎖賣進市場，而是讓既有住宅也能在不大幅更動門體結構的前提下，以更便利、可負擔的方式完成智慧升級。

在通路策略上，金泰也展現了不同於業界的佈局。相較於仰賴大型零售賣場、電商平台等模式，金泰選擇與遍佈各地的社區鎖匠合作。曾慧芳認為，社區鎖匠是消費者心中具備高度信任感的服務節點，且具備專業知識，不僅能販售產品，更能提供安裝與售後維修服務，成為串聯原廠與終端用戶的重要服務橋樑。

築起品牌夢，金泰以內部升級鋪路，迎戰全新商業模式

因應智慧鎖帶來的全新商業模式，金泰意識到，未來面對的已經不只是企業客戶，也包含鎖匠以及終端使用者。這代表團隊需要更完整的客戶管理、服務追蹤與互動機制，才能支撐從代工製造走向品牌經營的轉變。

金泰早在 2022 年前後，便開始透過智炬科技輔導與政府相關數位轉型資源對接，例如中企署 N 世代課程，產發署精實蹲點計畫，系統性盤點企業營運流程與員工賦能與接班轉型佈局，並以內部產出的數轉藍圖，於 2024 年通過產發署中小製造業接班傳承數位轉型主題式研發計畫案的規劃案為啟動數位轉型布局的起點。

金泰製造經理黃智政說明，過去內部雖已使用 Excel 與 ERP 輔助日常作業，但多數流程仍仰賴紙本、人工記錄與部門間轉傳。 ERP 主要協助處理訂單、生產與進銷存等內部管理需求，卻難以完整承接業務拜訪、客戶互動、售後服務、鎖匠通路與終端消費者資料等外部市場資訊。當資料分散在個人電腦、紙本紀錄或不同部門手中，不僅增加重複抄寫與管理負擔，也讓企業難以及時掌握市場變化與客戶需求。

以客戶經營為例，客戶與公司的往來紀錄，多半保存在業務個人的電腦或筆記本中，難以被整合，也不容易在團隊之間透明共享。因此，若遇到業務同仁外務或請假時，客戶只能被動等待，而當公司要推新產品、找新市場，或需要其他同仁協助一起服務客戶時，也很難快速掌握客戶全貌。

面對這樣的挑戰，金泰管理團隊先透過外部課程與企業參訪，建立對數位轉型的共識，再回頭審視自身的商業模式、核心價值與關鍵活動，梳理銷售前中後、採購、生管到包裝等各職能的工作流程，找出卡點，隨後再導入叡揚資訊 Vital CRM 客戶關係管理系統、 C.ai 對話式服務平台聊天機器人、 Vital BizForm 智慧表單等解決方案，重新設計更符合實際習慣的運作方式。

建立客戶統一視圖、決策效率提升 30% ，用數據揪出商機

協助金泰推動數位轉型的智炬科技總經理歐俋伶指出，當金泰從接單生產逐步走向計劃性生產，更需要即時掌握市場需求、客戶回饋與銷售趨勢，才能反過來驅動產品開發與營運決策。因此，規劃金泰選擇以 Vital CRM 作為核心工具，運用成熟穩定的雲端服務架構，快速建立客戶資料整合、商機追蹤與管理報表機制，而非一開始就投入高成本、高維護負擔的客製化系統開發。

金泰業務部經理楊順婷也認同表示， Vital CRM 不僅讓客戶資料從過去分散於個人手中，轉變為團隊共享的資產，更協助公司建立完善的代理人機制，確保客戶服務不中斷。更重要的是，隨著數據持續累積，管理層還能藉由 Vital CRM 中的 Insight 報表加速決策效率。

「 Insight 的可視化圖表，讓管理決策效率提升約 30% ，」黃智政說，過去若要掌握市場分布、客戶類型與商機變化，往往需要由人員跨表單、跨部門彙整資料，不僅耗時，也容易因資料格式不一而影響判讀。智炬科技在協助金泰進行職能別流程梳理時，進一步將銷售前端的詢價、報價、客戶需求與商機標籤，串聯到後端物管、廠務與組立包裝出貨等支援流程，讓市場資訊不再停留於業務個人經驗，而能成為跨部門共同判斷的依據。導入 Insight 後，管理層透過可視化圖表即時掌握關鍵指標，包含市場需求變化、熱門產品類型、報價密集度與潛在備料需求，並同步拉動資源體系的物管與廠務端的監控看板。如此一來，會議討論不再只是「等待資料整理」，而是能根據數據判斷下一步，提前協調備料、生產排程與交付節奏，讓售前商機、內部支援與客戶服務形成更即時的決策閉環。

此外， Vital CRM 也進一步擴大商機經營的可能性。過去從展會蒐集的名片，多半僅在特定產品推出時才會進行再行銷，如今透過多元標籤記錄客戶潛在需求，擴大再行銷的範圍與市場。同時，金泰也將客戶滿意度調查從傳統 Word 表單改為 Vital BizForm 線上表單，便利的填寫體驗不僅讓回收率提升 17% ，更藉助統計功能即時分析市場回饋。

跨入 B2C ：整合 C.ai 、 Vital BizForm 與 LINE ，優化服務流程

在 B2B 基礎上，金泰進一步將 Vital CRM 延伸應用至 B2C 場景，並結合 LINE 官方帳號、Vital BizForm 與 C.ai 對話式服務平台，打造從鎖匠通路到終端消費者的完整服務流程。

以鎖匠通路為例，考量合作鎖匠日常最熟悉的工具就是 LINE ，金泰運用 Vital BizForm 製作電子化訂單，並整合 LINE 官方帳號，讓鎖匠可直接查詢產品規格、取得安裝指引並完成下單。訂單資料再透過 C.ai 建置的聊天機器人回傳至 Vital CRM ，減少人工重複登打，也讓通路資料能被系統化紀錄並能與製造廠內備貨機制同步。

在消費者端，金泰同樣透過 LINE 建立服務入口，提供產品介紹、操作說明與保固申請功能。其中，保固卡同樣以 Vital BizForm 來設計，消費者線上填寫完成後， C.ai 會將相關資訊傳至 Vital CRM ，更會同步標註負責服務的鎖匠資訊，未來若產品需維護或有操作疑問，就能立即追溯最初負責的鎖匠，快速進入服務流程。

透過這樣的數位串接，所有互動資料皆回流至 Vital CRM ，形成完整的客戶輪廓，包括產品型號、安裝紀錄與服務歷程，不僅降低了客服負擔，更幫助鎖匠持續經營回頭客，讓客人獲得更完善的服務，創造三贏局面。

展望未來，金泰也計畫在既有數位基礎上，持續深化資料治理與知識管理能力，例如導入叡揚知識管理系統，將產品知識、安裝經驗、售後紀錄與市場回饋進一步沉澱為企業資產。對金泰而言，數位轉型的目的不只是提升內部效率，更是為品牌經營、通路共創與海外布局奠定基礎。未來，隨著「安捷鎖」持續深耕台灣並拓展國際市場，金泰也將從傳統製鎖廠，逐步走向結合製造實力、在地服務與智慧科技的安防品牌。

認識金泰工業

安捷鎖 AG LOCK | 守護您進出家門的優雅從容

免費試用

Vital CRM 客戶關係管理

Vital BizForm 智慧表單

C.ai 對話式服務平台聊天機器人