線框圖的價值體現在產品迭代的每一個階段,產品經理、設計師、工程師、信息架構師、商業分析師等每一個角色都可以用它來溝通和交流想法。它是整個產品的設計藍圖。
線框圖的作用
線框圖,字面意思理解為由線條和圖形組成的設計圖,實際上確實如此。但怎么畫、如何畫、畫成什么樣的精細度卻是它的精髓所在。線框圖的應用場景很多,一般我們會使用它作為一種快速草圖,既可以用一些軟件進行繪制,也可以用身邊的紙筆。有人會說這和原型有什么區別,我的看法是它們之間并沒有明確的界限。不同的團隊、不同的迭代流程和交流范圍都會影響方案的最終形態,在實際中應該靈活選擇最合適的風格來適應工作需求。
產品立場:
- 快速表達產品概念
- 將產品的設計邏輯和信息表現形式完整聯系起來
- 通過可視化的形式傳遞整個產品的架構,包括內容的布局、信息的組織方式、接口的功能及同用戶交互的行為體現等等。
角色立場
- 交互設計師和信息架構師用來表現視圖和頁面之間的用戶流。
- 平面設計師利用線框圖推進視覺設計。
- 開發者通過線框圖能夠了解產品的功能,判斷哪些部分需要何種代碼實現。
- 對于后臺開發人員,低保真的線框圖能夠表達清楚整個產品的結構和功能即可。對于前端工程師,最好使用高保真的線框圖來表達清楚產品的細節。
每個特定角色的關注點都不同,產品內部的相關者需要確保設計滿足需求,以適合整個產品的全局實現。作為產品的早期畫像,線框圖也直接影響著最終的產品形態。
線框圖的表現形式
你在線框圖上添加的每一個元素、功能或者是動作都會影響相關人員或是用戶對產品概念的最終理解。所以制作線框圖,準確表達我們需要傳遞的想法才是最終目的,工具或者定義都不要過分糾結。
工具
使用任何工具都不是問題,只要能夠達到你的期望效果。有時候也需要根據不同階段選擇最適合的表現形式,來達到事半功倍的效果。
手繪草圖:交互設計師必練的基本功,在產品原始的概念階段,這個時候,很可能只有一個產品的大體架構或者流程,建議用紙筆即可,一方面實現快速,也便于修改。有人可能覺得紙筆沒什么技術含量,但是如果你從來沒有用過或者很少的話,你會發現,明明頭腦里有很多想法,卻完全不知道怎么畫出來,我自己就有這樣的體會,當時找了一些手繪的草圖來學習,看著很簡單,結果自己畫出來真的很丑。
軟件:Axure、Balsamiq等是我認為比較實用的交互工具,雖然現在各種交互軟件層出不窮,但是我仍然覺得axure是很強大的一款工具,如果你能夠把它用穿。當然各種交互動畫的實現不在我們討論的范圍之內。另外,設計師同樣可以用PS、AI、Sketch等繪圖軟件來實現。
類型(保真度)
這里討論的保真度包括了我們常說的低(高)保真原型,在實際工作中你會發現,當我們對線框圖進行不同程度的加工之后,它的形態往往就變成了我們所謂的原型。
無論采用何種設計形式,開始階段一定要確定好框架和流程,保證全局無誤。否則如果邊做邊想或者做到一半再去修改,會平添很多不必要的工作量,先有骨骼,再有皮囊在這里是一樣的道理。
簡圖:最簡單的一種線框圖,提供了一些基本必要信息,布局、信息層次等。你也可以添加不同尺寸的文本來體現信息的主次關系。也可以算作設計的架構形式。
灰度模型:灰度模型主要為后面的圖像設計做鋪墊,通過灰度的深淺來體現信息的主次關系,這種形式比較適合表現用戶流,可以只用色塊完成,也可以根據偏好適當細化增加文本內容。
文本高保真:字體顏色內容等方面都進行了細化,所以一般不需要過多的解釋,也比較適合推進視覺設計。
顏色高保真:在視覺設計之前令線框圖更細膩,利用顏色能夠更好的強調主次以及用戶行為等,但是不要花費大量精力在顏色的選擇上,首先你不一定能用對,其次會令相關人員產生不必要的困惑,使用比較通用的顏色即可。
- 交互高保真:讓靜態的線框圖動起來,表現更多視覺無法體現的細節:彈窗、縮放、滾動、點擊等等,這種形態一般就是我們常說的原型。
添加細節
如何添加細節,需要精細到何種程度,同樣需要根據實際情況進行考量。
基礎型:如果你是產品原型的主要負責人(小公司比較常見的狀態),那么能夠確保自己理解無誤、沒有遺漏即可,可以適當省略一些比較直觀的細節;如果設計師是個經驗豐富的人,而你又希望他有一定的自由發揮空間的話,也可以同樣處理;此外,如果你為自己的線框圖或是原型圖準備了相近的說明文檔,線框圖做的簡單一些也無妨。
注釋型:圖形的表現形式畢竟有限,有些細節需要我們做一些輔助說明。比如一些交互細節,像點擊、縮放、輸入數據,文本、跳轉鏈接、圖片的尺寸變化以及一些復雜的動畫形式、速度等等,只要表述不明的地方,最好都能附上輔助說明。Axure可以實現大部分的簡單交互,甚至邏輯判斷,但是這些實現對于一般的普通用戶來說往往比較耗時,同時,即使你實現了,相關人員可能根本沒有注意到,此時,最好再附上說明,例如:“點擊后出現XXX彈窗”。
線框圖和原型的概念很相近,原型讓線框圖能夠動起來,能夠直觀的體驗到多個線框圖之間的交互過程,幫助開發人員或者用戶快速理解產品,對于設計人員來說,精細化的靜態頁面則更有助于他們實現預想中的產品設計。
總之,制作線框圖最重要的一點就是千萬不要糾結用什么工具什么軟件,用自己最順手的就好,如何設計,如何準確的表達出我們的想法才是我們需要修煉的內功。
部分圖片來源于google
內容參考:uxpin_the_guide_to_wireframing.pdf
如果你也熱愛設計,歡迎通過公眾號與我交流