學習使用簡單的線框開始您的設計
Web線框是一個簡單的視覺指南，向您展示網頁的外觀。 它建議頁面的結構 ，而不使用任何圖形或文本。 網站線框將顯示整個網站結構 - 包括哪些網頁鏈接到哪裡。
網絡線框是開始設計工作的好方法。 儘管可以創建具有大量細節的複雜線框 ，但您的計劃可以從餐巾紙和筆開始。 製作好線框的關鍵是省去所有的視覺元素。 用框和線代表圖片和文字。
要包含在網頁線框中的東西：
- 主要圖形元素框
- 標題和副標題的放置
- 一個簡單的佈局結構
- 號召採取行動
- 文本塊
如何構建簡單的Web線框
使用任何方便的紙張創建網頁線框。 以下是我的做法：
- 繪製一個大矩形 - 這可以表示整個頁面或只是可見部分。 我通常從可見部分開始，然後將其展開以包含折疊下的元素。
- 草繪佈局 - 是2列，3列？
- 在標題圖形的框中添加 - 在列上繪製如果您希望它成為列上方的單個標題，或者將其添加到您想要的位置。
- 在你想要H1標題的地方寫上“標題”。
- 在你想要H2和低標題的地方寫上“Sub-Head”。 如果讓它們成比例，它會有所幫助 - h2小於h1，h3小於h2，等等。
- 為其他圖像添加框
- 添加導航。 如果您正在規劃標籤，只需繪製框，然後在頂部寫上“導航”。 或者在要導航的列中放置項目符號列表。 不要寫內容。 只需編寫“導航”或使用一條線來表示文本。
- 向頁面添加其他元素 - 標識它們與文本是什麼，但不要使用實際的內容文本。 例如，如果您要在右下角使用號召性用語按鈕，請在其中放置一個框，並將其標為“號召性用語”。 不要寫“立即購買！” 在那個盒子裡。
一旦你寫好了簡單的線框，並且不應該花15分鐘時間來繪製一個線框，然後將其展示給其他人。 詢問他們是否缺少任何東西以及其他反饋。 根據他們所說的話，你可以編寫另一個線框或保留你所擁有的線框。
為什麼紙張線框最適合初稿
雖然可以使用Visio等程序創建線框，但對於最初的頭腦風暴會議，您應該堅持寫論文。 紙張似乎不是永久性的，很多人會認為你在5分鐘內把它扔在一起，所以毫不猶豫地給你很好的反饋。 但是當你使用一個程序來創建完美的方格和顏色的花式線框時，你會冒著被捲入程序本身的風險，並花費數小時完善一些永遠不會上線的事情。
紙線框很容易做到。 如果你不喜歡它，你只需將紙折起來，扔回收再利用，然後拿一張新紙。