20個細節改進你的線框圖

不對需求進行規劃，直接讓你的程式員進如開發流程，這種做法絕大多數情況下帶來的隻能是項目的失敗。而線框圖就是一種很好地能清晰表達出項目需求的工具，它能讓腦中的想法通過按鈕、線段和其他形式表達出來。

1.明确目的

理想很豐滿，現實很骨感。對于真正有過項目經驗的人，想像中的東西落實起來并非一帆風順，困難、阻礙、磕磕碰碰總是免不了的。

使用線框圖的好處之一就是可以高效地分析表達出你的需求，之後我們就可以把精力投入到開發編碼中去；第二，對需求和應用更好的了解和規劃，好記性不如爛筆頭，而且更能引導你完成後續的思考；第三，和其他設計文檔一樣，可以作為項目整體情況的一個參考。

2.線框圖首要是有用，好不好看在其次

盡量避免摻入視覺元素，隻把必須的功能按鈕和結構設計出來就可以。好不好看是設計團隊應該考慮的事情。

3.跟着感覺走

你不需要對設計或者程式有多麼了解，如果你是一個網絡使用者或者使用過這類産品，你完全就可以憑借自己之前的使用經驗來制作自己的線框圖。

4.誰來承擔責任？

必須有專門的人承擔制作線框圖的工作。按需求制作線框圖并根據回報進行修改。這個人是誰并不重要，隻要他可以把對産品的需求用線框圖表達出來就可以，這個工作甚至有時候是有客戶自己來完成的。

5.讓每個人都要參與其中

的确，少一點人線框圖做起來會快一些。不過還是建議制作線框圖的團隊中需要包含至少1-2名設計人員，他們會對你的線框圖布局和頁面需要哪些元素提出很好的建議，另外設計人員往往也是最了解使用者需求和最早發現産品潛在問題的人員。

6.為線框圖設立一個完成時間

如果你想這塊的工作效率高點，那就下達一個完成時間，否則拖拖拉拉隻會讓你的項目一拖再拖。

7.簡潔、簡潔、再簡潔

加入你的線框圖隻需要2個輸入框、1個按鈕。ok，那就這些東西，不要多也不要少。

8.我們不是要去“畫”線框圖

作為某種程度上來描述功能的一個工具，展示樣式是否美觀并不重要。千萬不要讓自己陷入“如何讓我的線框圖看上去更漂亮一些”這樣的窘境中。更不劃算的是，當你覺得在頁面中加入了一點藍色使得它看上去舒服了那麼一點，結果你卻發現之後的讨論會議上你不得不拿出半小時來跟設計團隊讨論這裡使用藍色究竟有些什麼價值，他們可不會認為你隻是為了好看就随手加了個藍色上去的。記住，設計的活兒就留給設計去做。

9.記住UI不是UX

使用者體驗這個概念現在很風行，但是對線框圖來說，它是一個用來展示功能和資訊結構的工具（或者說界面），并不是終端使用者要接觸到的東西。是以線上框圖中請避免參雜像ajax這樣的特性。

10.也要考慮使用者的體驗

如果你的注冊流程需要三個頁面才能完成，恐怕這個線框圖也就失去了傳遞給設計團隊、開發團隊的必要了。是以，盡管我們在設計線框圖的時候可以抛棄視覺元素、但是也不要忘記功能和結構上如何能貼近使用者的需求，避免引起使用者的反感。

11.不要想當然

你可能會覺得登入頁面毫無疑問是網站必須有的，是以交給設計們去做吧，我的線框圖就沒必要做那麼詳細了。抛棄這種想法吧，保證你的線框圖擁有了網站所需的每一個頁面，隻要是涉及功能、流程方面的，一個頁面都不可以少。

12.做好歸類和排序

例如在内容上，我們可以把站點劃分成資訊、産品和個人賬戶等不同類别，這裡我們建議盡可能選擇友善以後查找參考的樣式對你的線框圖做分類管理，當然也不應該忘記按照網站本身架構對對應線框圖的目錄管理。

13.對頁面進行編号

很多時候一個功能的流程并不是線性的，而是會給根據使用者的不同選擇拓展為多個分支流程，對照不同流程制作出的線框圖最好也能有一個對應的頁碼編号或者類似标簽一樣的東西，設計人員和開發人員可以一目了然你要做的究竟是什麼事情。

14.找出重複的頁面

例如使用者可以從不同的入口進入自己的個人首頁，這種重複的頁面需要被重新整理出來，告訴後面的團隊，這會大大節省開發的時間成本。

15.讓你的線框圖一看就懂

找一個完全對項目或需求沒有了解的人來，如果在你向他示範完一遍你的線框圖後他能明白相應的功能或需求。那說明你的線框圖已經達到了制作的目的。記住，你最後傳遞的文檔應該能讓幾乎所有人都看懂。

16.廣告位也是必不可少的

和其他元素一樣，頁面的廣告位同樣也是功能和結構的一部分，這不是設計團隊的工作，在傳遞給他們之前，廣告位就應該被設計好。

17.用自己的内網釋出

和開發一樣，線框圖也盡量釋出在内網上溝通，這也是處于安全的考慮。

18.知道該什麼時候停下來

確定參與項目的各個小組都有機會加入對線框圖的回報中來。對于出現的反對或者修改意見，給出的建議是在通過大家的決議後再針對設計文檔進行修改，而不是拍腦袋決定。

19.好的工具會讓你事半功倍

通過紙、筆來手動繪制線框圖，通過Balsamiq或者Axure在電腦上繪制，都可以可以參考的途徑。

20.動手之前先考慮可能和其他功能的關聯

我們在開發一個新元件、新功能的時候不可避免會遭遇到跟已有産品的交叉，有些會用到現有産品的相應功能，有些會對現在的模式結構帶來影響。在動手繪制線框圖以前，盡可能把這些交叉的方面理清楚。