線框圖 – 概述、好處和工具

世界正以飛速發展走向科技時代。對我們來說，一切資訊都可以在網際網路上獲取。今天我們將深入探討我們過去接觸過以及未來將會接觸到的數百萬個網站背後的技術。

在本文中，我們將討論什麼是線框圖，線框圖的各種好處是什麼，以及可以使用哪些不同的工具來製作線框圖。線框圖可以用筆和紙來繪製，但我們是一個精通技術的時代，我們更喜歡在螢幕上看到我們的視覺設計。

線框圖概述

線框圖是對網頁在網際網路上外觀的二維描述。它不是一個互動式儀表板，而是網頁或儀表板藍圖，例如內容的位置、影像和影片的位置、聯絡連結以及所有關鍵的超連結。

線框圖就像特定網站的佈局或視覺設計，它被進一步用於建立我們看到的由UI和UX設計師以及開發人員設計的互動式和色彩豐富的網頁。它還有助於我們理解或展示不同頁面之間的路徑以及網頁上的互動式元素。

在準備線框圖時：

• 不要使用顏色
• 不要使用不同的字型樣式。不過，使用不同的字型大小來區分H1、H2和正文內容是可以的。
• 不要使用影像。

上述要點用於網頁的最終輸出，但不適用於佈局。

在佈局中，我們通常有：

• 搜尋欄
• 麵包屑導航
• Logo
• 標題或不同字型大小
• 分享按鈕選項
• 聯絡資訊或“聯絡我們”按鈕
• 頁尾
• 表格

線框圖可以以兩種不同的方式準備。

• 低保真線框圖 – 這些線框圖易於準備，也花費較少的時間。它不包含對正文內容的詳細描述，而只是一些填充文字。它更抽象，並使用塊狀影像進行空間管理。

• 高保真線框圖 – 由於佈局中傳達的細節，它們更耗時。實際內容寫在需要的地方。它是詳細且相關的。它還解釋了網頁上互動式元素的行為。

線框圖的好處

• 它有助於對映抽象結構 – 線框圖是建立網站或網頁的第一步具體步驟。它幫助我們將我們擁有的抽象想法轉化為藍圖。它有助於消除相關各方的疑慮，並確保每個人都走在同一條道路上。它甚至使編輯更容易，因為現在相關各方可以輕鬆地指出不滿意的區域。

• 闡明介面的功能 – 並非參與專案的每個利益相關者都是技術專家或術語專家。高保真線框圖有助於利益相關者理解“谷歌地圖整合功能”、“呼叫轉接功能”、“立即購買超連結”、“產品或服務過濾”麵包屑導航等。它還有助於瞭解內容的外觀以及所有這些功能如何在單個網頁上放置。

• 專注於核心或可用性 – 透過從線框圖中去除顏色、影像和字型，現在不同的參與者可以看到設計的核心。核心可能包括網頁提供的便利性、導航系統、各種超連結或號召性用語按鈕。簡單來說，現在可以關注網頁介面對使用者來說有多麼容易使用。

• 有助於理解導航 – 透過線框圖，客戶可以瞭解特定網站或產品在導航、下拉菜單方面是否有幫助，以及是否需要麵包屑導航。否則，這些花哨的功能可能會成為使用者旅程中的障礙。高效的使用者旅程決定了快樂的使用者。

• 提高效率並降低成本 – 透過線框圖，客戶可以一次專注於一個問題，並且更改佈局比反覆修改最終產品更容易。現在，由於網站或產品的外觀和感覺，線框圖的整體良好功能不會有任何機會丟失。有了良好的線框圖，視覺設計師可以專注於他們的工作，開發人員專注於他們的工作，因為產品的功能和創意方面不會混合在一起。

• 有助於內容開發 – 內容開發者現在確切地知道內容將放在哪裡，它有多少空間，將使用什麼字型大小以及其他要點。這看起來可能是一件小事，但現在網站或產品的內容建立也將更符合SEO最佳化，並且更易於閱讀。早些時候，內容建立者可能會建立大型內容段落，然後設計師必須放置它們。此過程確保內容開發者為線框圖中的每個塊準備最佳內容。

不同的線框圖工具

雖然線框圖只需使用筆和紙就可以準備，因為它們只不過是介面外觀的佈局，但為了獲得整潔和更專業的視覺效果，人們使用不同的應用程式來準備它們。下面列出了一些常用的應用程式、它們的好處和缺點，以便使用者可以權衡利弊併為自己選擇最佳應用程式。

Adobe Photoshop

Balsamiq

Sketch應用程式

線框圖有助於將重點放在使用者及其使用者旅程上。線框圖易於建立，因為它們可以用筆和紙製作，最重要的是，它們可以從客戶、視覺設計師、內容建立者以及其他相關專業人員那裡獲得反饋。線框圖還有助於降低成本並提高客戶滿意度，因為客戶獲得了他們想要的東西。

在建立網站或產品介面之前應該建立線框圖，因為它確保將建立一個高效且具有創意的產品或網頁，而不僅僅是另一個低效的產品。

Akshaya Daga

更新於：2022年12月1日

瀏覽量：266

開啟您的職業生涯

完成課程獲得認證

開始