Wireframe是什麼？認識網站UI設計排版草圖與資訊架構

線框稿，一般稱為wireframe，它會用非常簡單的灰階顏色、線條、符號或框線，來表達網頁的排版架構。

例如這個Balsamiq 的例子：. 如圖所見，大多數的設計 ... Loading...首頁課程內容系列課程JavaScript全端開發課程學期一｜程式設計入門學期二｜掌握網頁開發學期三｜軟體工程師養成全年開課時間表最新消息非本科跨領域學程式最新課程DATA&AI公開課SQL14天入門課學習體驗成效Blog技術主題求職攻略數據入門文章首頁FAQ常見問題關於ALPHACamp加入我們舊生專屬福利馬上報名Web技術Wireframe是什麼？認識網站UI設計排版草圖與資訊架構Posted on 2020-06-08  by    byALPHACampWireframe(線框稿)主要目的是溝通網頁的架構、內容、功能、行為、資訊階層。

會用非常簡單的灰階顏色、線條、符號或框線，來表達網頁（或應用程式）的排版架構。

本文帶你學習以wireframe這個UI/UX呈現方式，研究如何透過wireframe，傳達各種不同的使用者介面UI與體驗組件，比如資訊架構和排版。

線框稿(Wireframe)什麼是Wireframe？線框稿，一般稱為wireframe，它會用非常簡單的灰階顏色、線條、符號或框線，來表達網頁的排版架構。

例如這個Balsamiq的例子：如圖所見，大多數的設計元素(如影片，圖像和文字)都被省略代換成符號或框線。

舉例來說，一個大方框表示以後要放置圖像，文字則替換成Loremipsum(一種虛擬的拉丁文假字)。

用這種低仿真(low-fidelityrendering，低階非還原真實細節)的方式來呈現網站的設計，讓你可以專心在網頁應用程式的內容排版，而不需擔心設計的細節，比如使用什麼字體、色系、圖形或圖片。

為什麼要製作Wireframe？Wireframe的主要目的是溝通：架構(頁面的不同部分如何組合在一起)內容(頁面上顯示的內容類型)功能(介面如何操作)行為(它如何與使用者互動)資訊階層(資訊的顯示和組織方式)在某種程度上，wireframe就像是建造房屋的藍圖。

藍圖顯示每個房間的位置、有多少空間，但它不會展現房子的真實樣貌。

然而，正如你通常不會在沒有藍圖的情況下建造房屋，我們通常也不會在沒有wireframe的情況下動手建立網頁應用程式(或網站)。

wireframe的目的是確認內容、排版、功能等等所有的頁面元素符合你的整體設計，根據wireframe，你可以在實際開發產品之前釐清關鍵行動並適當的配置資源。

現階段的重點不應該將焦點轉移到網頁應用程式的「外觀和感覺」上，而必須先考慮特定頁面上的內容應該位於何處，以及它的位置是否適合你的使用者。

你可能會問：「為什麼不在設計過程中釐清這些問題，而非得要特別製作一個wireframe？」事實上，在查看完整的設計時，很難進行這類型的評估，因為你可能會受到字體、圖像和顏色等設計元素干擾，分散掉主要目標的注意力。

使用wireframe，你就不會受到那些炫目設計的影響，可以專注在內容、排版與功能身上。

wireframe還能夠消除網站排版中的大量潛在問題，尤其是對HTML/CSS經驗不足的新手而言，花點時間製作wireframe，思考網站的排版，可以節省大量的時間。

如果寫到一半才回頭修正設計問題，可能會花費更多時間。

零基礎學會HTML/CSS/JavaScript，從程式設計入門開始使用Wireframe溝通資訊架構(InformationArchitecture,IA)資訊架構是描述網站內容架構的一套科學方法，你也可以說是一種藝術)。

你可以透過wireframe來檢查資訊資訊架構的呈現方式，一個結構良好的資訊架構，應該要讓使用者能不費力地在網頁上瀏覽複雜的資訊。

例如下圖，你可以看到線框的不同部分是如何組成的，以及每個區塊如何表示不同的資訊。

應用程式的資訊架構看起來像下圖的樣子。

請注意這些不同的資訊(例如標題、照片、內容)如何在網頁上排版、分類。

我們僅僅靠著框線就可以看出設計的功能，而使用者可以根據資訊的結構，直覺地操作網頁。

使用者介面(UserInterface,UI)Wireframe雖然是粗略的草圖，但並不意味著它們必須看起來凌亂。

wireframe會傳達網頁應用程式的架構、內容、功能，也可以提供你的使用者一個乾淨、易於理解的排版。

wireframe可以讓你好好思考真實呈現在用戶介面時，區塊之間的對齊，以及間距的問題。

這個階段你將有機會可以大幅改善網站的架構與設計順序，讓版面看起來不會過於擁擠。

在我們的應用程式中，如果要查看特定的一張資訊，頁面如下所示。

在這個階段思考元素的間距與對齊，例如：文字內容和圖片寬度一致，可以幫助使用者聚焦注意力。

對齊UI元件讓設計看起來更加簡潔，使用者也容易從對齊方式推斷這些單獨的資訊是相關聯的較短的行寬比長的行寬更容易閱讀。

字體排版(Typography)你還可以在wireframe上改變字體大小，來表達不同類型文字的重要性。

經驗法則是，文字越特殊，字體越大。

正如報紙會透過字體大小的變化(主標題與副標題)來傳達階層結構。

粗體、底線或斜體也是引起注意的方法。

在應用程式的wireframe設計中，我們將放大標題字型，來突顯標題，讓使用者知道這是一個重要的資訊。

拆解成wireframe的過程，可以幫助將網頁元素從頭到尾想過一遍，鼓勵大家將wireframe畫出來，多練習幾次後也有助於看到別人做得好看的網站，知道別人的網站如何架構，並完成一個好看的網站切版。

三分鐘小測驗，找到自己學習網頁開發的入口ALPHACampSeeAllPost開發模式Search熱門搜尋自學程式學習方法學習教練助教跨領域職涯軟體工程師前端全端AllCategoriesAC動態AC評價Web技術人物專訪程式學習自學能力資料科學軟體職涯FollowUs延伸閱讀更多好文章推薦給你！Web技術React教學，系統性學習React的步驟Web技術CSS教學：認識語法規則與基本功Web技術演算法(Algorithm)是什麼?演算法應用的例子與場景Web技術助教開講活動回顧：網頁開發必學技巧不藏私公開Web技術LeetCode解題的思考策略，刷題的4個階段Web技術什麼是Scrum？認識Scrum的做法與它的限制Web技術CSS學習與實作經驗分享，如何建立扎實基本功Web技術為什麼要用Docker？如何用Docker構築不同MongoDB架構？ALPHACamp的使命是「幫助人們發展有意義、有價值的職涯」。

自2014年以來，我們以新加坡和台灣為教學據點，培訓超過6500名學員。

校友遍及台灣、新加坡、中國、以及全球的科技新創。

JavaScript全端開發課程三學期系統化課程設計學期一：程式設計入門學期二：掌握網頁開發學期三：軟體工程師養成最新課程New數位職涯RPGDATA&AI公開課SQL14天入門課LearnMore非本科跨領域學程式理工科職涯升值挑戰學習體驗成效Blog技術主題職涯攻略常見問題關於ALPHACamp加入我們ContactUsEmail：[email protected]電話：+886-2-2546-9766（※防疫期間AC採遠距上班，如需聯繫請來信或FB私訊）地址：105台北市復興北路201號6樓之4獲取最新資訊業界經驗分享、職涯諮詢、學習技能提升！訂閱電子報ALPHACamp｜創新職涯的線上學校©2022AllRightsReserved