[ 網頁設計教程 ] 頁面線框圖教學之從本質到表象- 其他教程 - 骨子愛創意

教學主題: 頁面線框圖教程之從本質到表象

大家好!! 小編今天來和大家分享關於 其他教程中的網頁設計教程教學

今天的這個教學主題是: 頁面線框圖教程之從本質到表象

這教學的重點為這幾點 [ 表象,本質,教程,頁面,設計,邏輯,可以,模板,需要,執行, ]

希望你可以從這幾點中領悟到修圖的精華

本文重點

頁面線框圖（Wire frame）是網站設計方案中的重要組成部分，無論是I-Board 、Page-Layout、UI-Draft這些不同的稱呼，它們的本質都是一樣的，網站策劃師、網絡產品經理的最後交付文檔，通常的呈現設計是最直觀有效的。

頁面線框圖(Wire frame)是網站設計方案中的重要組成部分，無論是I-Board 、Page-Layout、UI-Draft這些不同的稱呼，它們的本質都是一樣的，網站策劃師、網絡產品經理的最後交付文檔，通常的呈現設計是最直觀有效的。單純從設計的角度，線框圖也可以看作一個視覺呈現過程，雖然如此，也不能把線框圖的設計當作簡單的視覺問題。如何看待線框圖，如何着手設計線框圖，如何把握線框圖的詳細程度，如何讓其他合作者看懂線框圖，就是本系列文章要解決的問題。

討論：http://www.missyuan.com/viewthread.php?tid=421094

線框圖的本質是信息架構的表象。根據需要，頁面線框圖可能是一個獨立頁面或一整套頁面序列：當針對中小型項目時，可能只需要首頁以及關鍵頁面的設計;針對複雜項目和大規模的團隊協作，則需要一系列相互關聯的線框圖，並且包含交互設計部分。

在《網頁線框圖教程》的第一篇文章中，主要幫助讀者了解線框圖之前的必要步驟：

確定頁面邏輯架構

低保真還是高保真

規範圖例與交付物

基本框架模板

確定頁面邏輯架構

在最近流行的一篇國外譯文中有一句話“線框圖是計劃中的第一步也是最重要的一步”，這是大錯特錯的。

線框圖肯定不是計劃中的第一步，在沒有確定頁面中“到底有什麼”之前，根本無從下手去設計;確定線框圖的藍圖不是靠設計者拍腦門，而是基於對內容分析之後的信息架構設計。

線框圖並非計劃中的必需步驟，更談不上什麼重要步驟。當與優秀的界面設計師、視覺設計師配合一些中小項目的時候，根本不需要什麼線框圖，而作為網站策劃師和產品經理只需要提供頁面邏輯框架就可以了。

所謂頁面邏輯框架，是在整個網站信息架構確立的基礎上，具體描述某個頁面：都包含什麼元素;這些元素的權重;頁面的大概形式。

頁面邏輯框架可以用邏輯表和邏輯圖兩種形式交付，可以單獨採用一種形式，也可以同時提交兩者。

例：Page[List02][Article_List][T1]的頁面邏輯表

例：Page[List02][Article_List][T1]的頁面邏輯圖

確定各個頁面的邏輯結構是進行頁面線框圖的設計前提，也是界面設計、視覺設計呈現的基礎;非常推薦在着手設計線框圖之前建立一個《項目的頁面列表》，記錄整個項目需要多少張線框圖的支持，每張線框圖的標號和使用模板的情況，如果時間充裕，甚至可以給每張線框圖一個簡潔的描述。

 

這個《項目的頁面列表》對衡量整個設計的工作量、把控進度和工作重點非常有幫助。

低保真還是高保真

線框圖的細節要逼真到何種程度，要根據執行團隊的實際情況來決定。一般來說，線框圖的細節越逼真，執行越流暢，但是給界面設計和視覺設計的發揮空間越小;相反，線框圖越是粗略，對團隊配合的要求越高，界面設計和視覺設計發揮的空間越大。

低保真原型(線框圖)通常包括：頁面的基本布局，元素的大概位置，交互的基本形式，表單項。

在低保真原型的基礎上，高保真原型(線框圖)通常包括;精確到像素的頁面布局，輔助設計元素的數量和位置，圖片格式尺寸，屏幕劃分，超級鏈接的標示，帶時間軸的FLASH關鍵幀，每個交互步驟的界面變化，表單項說明，具體文案。

對於三兩個人配合的微型項目(比如中小企業網站)使用低保真原型配合口頭溝通就可以解決實際的問題;對於複雜一些的項目，更推薦以《低保真和高保真模型混搭》的模式開展工作。

無論線框圖的細節要逼真到何種程度，一定要在線框圖開始設計之前明確，並且在《項目的頁面列表》中標註每一個頁面的逼真程度;明確交付物的細化程度，對保障工作進度和團隊配合是非常重要的。

規範圖例與交付物

一個團隊的效率來自每一位成員的專業技能和敬業精神，而每一個人力量的集合需要通過工作流程和規範體現。在你的工作中是否存在這樣的情況：交付的線框圖與最後的執行結果出入懸殊，根本不是你的設計初衷，造成不對等原因是 “執行部門看不懂你的設計”。此時，就需要流程和規範出場擺平問題了。

工作流程是對項目執行上下級關係的一種描述，即上級交付給下級何種結果時，下級可以開始自己的工作;當交付結果不符合要求時，下級變為上級，要求前一環節進行返工。

規範並不是某一個部門強制規定的(雖然的確可能存在這樣的情況)，而是工作流程的上下級默認的一種約定;非常建議把工作流程中上下級的約定整理成手冊，提供給所有的執行部門;如果整個執行團隊規模在20人以下，沒有必要單獨設立Workflow這樣的職位，但是確定質量監督人員是非常重要的。

一些常用的WireFrame圖例

無論手繪、紙面模型、Visio、Dream Weaver、Axure、PowerPoint甚至Word都可能成為線框圖設計工具，使用何種工具進行設計並不重要，然而這些文檔能否被其他執行部門理解，是另外一回事;各個執行環節的默認約定成為線框圖的圖例，是保證所有的設計被理解、被合理執行的前提。

基本框架模板

感謝模板給設計帶來的便捷!站在用戶的角度，需要在大致相同的瀏覽環境中學習網站的使用;站在界面設計的角度，應用模板能夠大大縮減設計與實現的時間;站在程序開發的角度，復用結構能夠提升整體的開發進度和系統效率;最後站在線框圖設計者自己的角度，合理的使用模板能夠縮減相當的工作量……全都受益，何樂不為。

在編寫《項目的頁面列表》的過程中，已經逐漸確立了大體的模版種類和應用範圍;構建線框圖的第一步就是針對那些常用的頁面模板進行設計。

一張頁面線框圖模板的實例，其中包含了可編輯部分[圖片點擊可看全圖]

模版可以包含Logo&Slogan、頁面導航麵包屑、廣告、常用功能、側邊欄和頁底版權欄;每個模板都包含一些可編輯的部分。在確立了模板之後，剩下的工作無非就是根據每個頁面邏輯架構的區別，設計那些可編輯的部分而已。

本章小結

在本章節中，確定了在開始設計線框圖之前，整個項目及參與團隊需要完成的工作。在了解一共有多少頁面，每個頁面都包含什麼內容，那些內容是可以復用的……這些問題之後，必須確認已經完成《項目的頁面列表》《線框圖圖例》《基本框架模版》這三個文檔，那麼就可以開始具體的線框圖設計。

看完小編分享的教學之後 是不是對網頁設計教程中的其他教程教學更熟悉了呢?

希望我們所介紹的 頁面線框圖教程之從本質到表象 這教學會喜歡

文章標題: 骨子愛創意- 頁面線框圖教程之從本質到表象–轉載請註明來源處

本教學分類為網頁設計教程中的 其他教程相關教學

文章相關關鍵字為: 表象,本質,教程,頁面,設計,邏輯,可以,模板,需要,執行,

本文永久連結 :頁面線框圖教程之從本質到表象

本文轉載自 :VIA