【林克威專欄】做電商網站必懂的線框圖(Wireframe)是什麽？

做電商網站必懂的線框圖(Wireframe)是什麽？

繪製電商網站的線框圖(Wireframe)是開發設計電商網站的第一步。也是電商網站視覺外觀進行初步表達的一種形式。它是電商網站建設項目進行中的藍圖，用來傳達策劃和設計思想，用來表現網頁的布局和核心元素。更深層次地講，線框圖(Wireframe)對於決定使用者怎樣跟界面交互有十分重要的作用。

什麽是線框圖(Wireframe)？

線框圖(Wireframe)是一個低擬真度來呈現產品設計的表示法，在開發流程中使用它目的有以下三點:

• 呈現產品頁面上主要的資訊
• 呈現資訊在頁面上的排版與架構
• 可視覺化，便於描述使用者如何與產品互動

線框圖(Wireframe)就像是建築師的藍圖，明確且清楚的定義你想要蓋的房子要怎麼蓋。

電商網站線框圖(Wireframe)通俗來講就是電商網站框架的草圖，是電商網站設計師將客戶需求圖形化的一種展現形式。線框圖(Wireframe)是低保真的設計圖，用於表達：

內容大綱（什麽東西）
訊息結構（在哪）
使用者的交互行為描述（怎麽操作）

線框圖(Wireframe)是什麽樣子？

根據不同的表達和溝通需要，線框圖(Wireframe)可以從複雜到簡單。線框圖(Wireframe)設計很重要，可以讓設計師把注意力集中在規劃排版和界面的交互上，而不受顏色、字體選擇甚至內容的幹擾。

為什麽需要使用線框圖(Wireframe)？

在項目設計初始階段，需要關注電商網站的功能、訊息架構、使用者體驗、使用者交互流程、可用性等因素，線框圖(Wireframe)在此發揮巨大作用。電商網站建設公司能夠使用線框圖(Wireframe)表達電商網站的核心功能和訊息布局，以及使用者交互和增強使用者體驗，並與委托方進行溝通。

線框圖(Wireframe)常常用來作項目方案說明，它是與客戶進行設計溝通的工具。這種拋開視覺表現的骨架能夠幫助雙方明確電商網站核心部分，建站客戶因此能夠了解電商網站設計公司的主要策劃思想並參與到項目討論中。

不僅僅是大型電商網站在設計階段需要投入時間和精力制作線框圖(Wireframe)，對於中小企業建設電商網站項目線框圖(Wireframe)在網頁設計中的重要性也是不容忽視的，如果省去線框圖(Wireframe)繪製將可能造成後期大量修改，延誤交付時間。

建站客戶應如何審核線框圖(Wireframe)？

當客戶審核線框設計時，請注意：訊息架構：從上到下查看訊息架構流程和線框上顯示內容的優先級。

內容策略：在線框圖(Wireframe)階段，會採用有意義文字描述板塊標題，但對細節局部的圖文是采用框線代替圖片及替代文字占位表示。

頁面布局：頁面布局是否滿足您的需要？如果是的，請確保再次詢問該布局是否仍然有意義。通過審核線框圖(Wireframe)可以拾起遺漏，使方案更加完整。

功能性：查看電商網站功能性元素是否放置在合適的位置。比如行動號召按鈕是否放置在訪問者的主要視線範圍內？社群媒體分享按鈕是否使用順手（把社群媒體按鈕放在螢幕左側肯定沒有放在右側好用）？

使用者交互：站在訪問者角度考慮如何更便捷地使用電商網站。導覽連結的結構是否複雜？訪問者需要點擊多少次才能聯繫到電商網站管理員？產品詳情是否埋藏太深？電商網站是否看起來簡單明了？

以上都是需要在一開始審核線框圖(Wireframe)就可以明確定義清楚，讓網站可以變得更完整。

當然還有一些小建議，當你進行線框圖(Wireframe)的製作時，可以先規劃一些共用的圖片與圖素。在原型階段當下就可以針對元素來做設計，確保這個電商網站的元素是符合你的要求，審核與確定線框圖(Wireframe)做完後，需與關係人與團隊成員討論，在得到回饋後進行修改。在利用繪圖軟體工具來提升線框圖(Wireframe)繪製的效率。

原文來自：林克威的電商老闆創業誌
更多科學與科技新聞都可以直接上 明日科學網站 www.tomorrowsci.com