search
[ 網頁設計教程 ] 頁面線框圖教學之模板的活字印刷術- 其他教程 - 骨子愛創意

[ 網頁設計教程 ] 頁面線框圖教學之模板的活字印刷術- 其他教程 - 骨子愛創意

教學主題: 頁面線框圖教程之模板的活字印刷術

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

今天的這個教學主題是: 頁面線框圖教程之模板的活字印刷術

這教學的重點為這幾點 [ 印刷,模板,教程,頁面,元素,進行,設計,內容,登錄,可以, ]

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

本文重點

使用《復用表》對比查看公共元素的情況,將它們分為三個類型:常駐、特定、偶然;根據典型頁面採樣的重複程度不斷的進行模板歸併,最終確定模板的數量;從最簡模板開始,使用加法原則完善整個模板系統;形成的整合項目的表現同一和訪問一致。

元素填充是一個快捷的過程。作為線框圖設計者,那些簡單項目完全可以一口氣把所有的頁面都進行填充;然而對於複雜的系列線框圖,更推薦先對模板進行整理和細化。模板是貫穿整個項目的信息紐帶,同時決定了最終效果的訪問風格;理解模板的概念並不難,甚至很多原型設計工具都提供了單獨的模板功能(比如Axure);模板系統如何建立、如何靈活應用,將是本章的話題。

進入論壇參與討論:http://www.missyuan.com/viewthread.php?tid=421098

逐張的設計線框圖,可以理解為是雕版印刷術;使用模板系統進行原型設計,就是活字印刷術。模板的精髓是復用元素,而模板之間的區別描繪了內容和功能的各個層面。

如果讀者已經閱讀過《畫地為牢的框架設計》,特別是對《項目的內容列表》和內容分塊有初步的認知,那麼就能夠更清晰的理解下文中的思路和方法。

確定模板數量




4個主要的內容區塊中,通常意義上說:除去內容(Content)的其他三個內容區塊就是模板,即那些頁面中有規律變化的部分。

根據《項目的頁面列表》,採擷那些重要的頁面,對它們的元素進行分類,將頁面識別(Page_ID)、導航系統(Navi)、交互工具(Tools)的使用情況記錄下來,形成一個《頁面元素復用表》(以下簡稱《復用表》),具體形式舉例如下。

頁面線框圖教學之模板的活字印刷術

在上面表格中不難發現:某些元素以一貫之的在頁面中存在;某些元素只在特定的頁面中存在;某些元素與頁面的主題關聯,時隱時現。表格中的頁面採樣越多,這種分析就越有效,根據每個人的經驗,有些頁面在意識中就是相似的,它們只需要“派個代表”參加對比就可以了。

確定模板數量的過程是這樣的:

步驟#1#

將《復用表》中排列相似的頁面歸併為使用一個模板,為這個模板命名。例如List02與Page01可以使用同一個模板T1

步驟#2#

標記已有模板的頁面,排除它們,在剩下的頁面中重複步驟#1#直到很難找到相似的頁面

步驟#3#




對於那些特殊的頁面或者沒有與其相似的頁面,不需要使用模板系統,通常稱為“獨立頁面”,例如Index首頁

步驟#4#

將每個模板也添加到《復用表》,列出每個模板的元素,按照步驟#1#將相似的模板進行合併

模板的數量應該盡量縮減,通常的網站設計,線框圖模板一般需要3~5個就可以了;如果模板數很多,那隻能證明你正在參與一個超級複雜的項目。

最簡模板




將以一貫之存在的那些元素集合在一起,就可以生成項目的最簡模板,最簡模板是所有模板的根源,即“模板的模板”。內容分塊中的頁面識別(Page_ID)類元素,基本都是最簡模板中的組成部分,導航也經常是通用的元素。

最簡模板很少能進行具體的應用,但是幾乎所有的模板都是從最簡模板衍化而來的;因此在設計最簡模板布局和填充元素的過程中,要特別注意對未來的延展性,要給其他模板預留足夠的屏幕空間。縱欄分隔和內容分區需要明顯的體現。

在《復用表》實例中,在所有頁面都出現的“公共元素”包括Logo&Slogan、頁面主視覺、導航、搜索、登錄註冊、底欄,於是可以得到如下的最簡模板設計。

頁面線框圖教學之模板的活字印刷術

從《復用表》推演出的最簡模板實例[圖片點擊可看全圖]




模板之間不是簡單的外觀區別

模板的表象是代表了一系列訪問風格外觀相似的網頁,而模板的本質是代表了信息架構相似的頁面邏輯。表現是本質的映射,因此在模板設計當中,雖然有同樣的元素,但是要依據模板的特性進行有區別的設計。

模板中相同元素的區別設計,是一種界面親和力的體現;即便相同的元素在不同的模板里也會擁有不同的權重和作用;雖然它們可能都被“放置在那裡”,但是擁有迥異的外觀;為了解釋這個問題,來簡單研討一下“Logo”和“登錄註冊”在不同模板中的表現。

Logo

品牌標識在不同的頁面往往具有不同的權重。一般的說,在首頁中品牌標識具有比較大的視覺意義;而在一些內容頁面中,品牌標誌僅僅作為一種站內的識別;因此在不同的模板中,Logo可能採用不同的形式進行體現。




頁面線框圖教學之模板的活字印刷術

突出品牌圖形的Logo通常放置在首頁或重要的分流頁面

頁面線框圖教學之模板的活字印刷術

簡化的Logo通常在內容閱讀頁面提醒用戶識別目前的網站




登錄註冊

一旦用戶進行了註冊,並且了解登錄之後的內容優勢,那麼他們往往會選擇自動記住登錄狀態或者主動去尋找它們;為首次進入的用戶提供明顯的登錄註冊提示非常重要;而對於經常訪問的用戶,只需要給登錄一個“方便的”位置就可以了;盡量把頁面中最重要的位置留給最重要的內容,而不是登錄註冊這樣的常用功能。

頁面線框圖教學之模板的活字印刷術

標準的登錄框非常搶眼,通常放置在分流頁面

頁面線框圖教學之模板的活字印刷術




簡單高效的登錄條佔用屏幕資源較少,一般設置的內頁的固定位置

逐個設計模板

如果生成最簡模板的過程是對頁面架構中的重複項目進行減法操作;那麼逐個設計模板的過程就是在最簡模板基礎上進行加法操作。

加法的過程,就是依據《復用表》中的分析結果,將模板元素中的元素進行填充的設計;推薦由最簡模板向那些複雜的模板逐漸的過渡;設計過程中,要給下一個模板留下設計的餘地和彈性;加法保持了模板的一致性,給用戶帶來了訪問便捷。

頁面線框圖教學之模板的活字印刷術




從最簡模板到複雜模板逐步加法的過程模擬

加法中,元素的排列順序不是固定的,新加入的元素可能排列在已有元素之前;因為這些新加入也許是“只在特定的頁面中存在”的元素;例如在List01產品列表頁應用的模板中加入“產品對比”這個功能元素時,就需要將其放在頁面重要的位置,而其他的元素可能需要相對後置。

本章小結

使用《復用表》對比查看公共元素的情況,將它們分為三個類型:常駐、特定、偶然;根據典型頁面採樣的重複程度不斷的進行模板歸併,最終確定模板的數量;從最簡模板開始,使用加法原則完善整個模板系統;形成的整合項目的表現同一和訪問一致。

在建立模板系統之後,按照《項目的頁面列表》進行模板之外的具體頁面設計,就能夠輕鬆的完成一套低保真線框圖。低保真模型已經可以對項目最終形態進行表達了,對低保真模型進行不斷的修改確認之後,可以逐漸的生成高保真線框圖;雖然高保真原型不是必須的,但是卻是非常有效的。




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

希望我們所介紹的 頁面線框圖教程之模板的活字印刷術 這教學會喜歡

文章標題: 骨子愛創意- 頁面線框圖教程之模板的活字印刷術–轉載請註明來源處

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

文章相關關鍵字為: 印刷,模板,教程,頁面,元素,進行,設計,內容,登錄,可以,

本文永久連結 :頁面線框圖教程之模板的活字印刷術

本文轉載自 :VIA

熱門推薦

本文由 愛創意 提供 原文連結

愛創意
寫了3813篇文章,獲得1次喜歡
留言回覆
回覆
精彩推薦