區塊 | 元素 | List01
產品列表頁 |
List02
資訊列表頁 |
Page01
資訊最終頁 |
Index
首頁 |
Colum02
欄目頁 |
---|---|---|---|---|---|---|
頁面識別 |
LogoSlogan |
have |
have |
have |
have |
have |
導航系統 |
導航 |
have |
have |
have |
have |
have |
面包屑 |
have |
have |
have |
have |
||
快速入口 |
have |
|||||
交互工具 |
搜索 |
have |
have |
have |
have |
have |
登錄注冊 |
have |
have |
have |
have |
have |
|
對比功能 |
have |
have |
||||
產品推薦 |
have |
have |
have |
|||
收藏 |
have |
|||||
關聯內容 |
have |
|||||
訪問歷史 |
have |
have |
have |
在上面表格中不難發現:某些元素以一貫之的在頁面中存在;某些元素只在特定的頁面中存在;某些元素與頁面的主題關聯,時隱時現。表格中的頁面采樣越多,這種分析就越有效,根據每個人的經驗,有些頁面在意識中就是相似的,它們只需要“派個代表”參加對比就可以了。
確定模板數量的過程是這樣的:
模板的數量應該盡量縮減,通常的網站設計,線框圖模板一般需要3~5個就可以了;如果模板數很多,那只能證明你正在參與一個超級復雜的項目。
將以一貫之存在的那些元素集合在一起,就可以生成項目的最簡模板,最簡模板是所有模板的根源,即“模板的模板”。內容分塊中的頁面識別(Page_ID)類元素,基本都是最簡模板中的組成部分,導航也經常是通用的元素。
最簡模板很少能進行具體的應用,但是幾乎所有的模板都是從最簡模板衍化而來的;因此在設計最簡模板布局和填充元素的過程中,要特別注意對未來的延展性,要給其他模板預留足夠的屏幕空間。縱欄分隔和內容分區需要明顯的體現。
在《復用表》實例中,在所有頁面都出現的“公共元素”包括LogoSlogan、頁面主視覺、導航、搜索、登錄注冊、底欄,于是可以得到如下的最簡模板設計。
從《復用表》推演出的最簡模板實例[圖片點擊可看全圖]
模板的表象是代表了一系列訪問風格外觀相似的網頁,而模板的本質是代表了信息架構相似的頁面邏輯。表現是本質的映射,因此在模板設計當中,雖然有同樣的元素,但是要依據模板的特性進行有區別的設計。
模板中相同元素的區別設計,是一種界面親和力的體現;即便相同的元素在不同的模板里也會擁有不同的權重和作用;雖然它們可能都被“放置在那里”,但是擁有迥異的外觀;為了解釋這個問題,來簡單研討一下“Logo”和“登錄注冊”在不同模板中的表現。
品牌標識在不同的頁面往往具有不同的權重。一般的說,在首頁中品牌標識具有比較大的視覺意義;而在一些內容頁面中,品牌標志僅僅作為一種站內的識別;因此在不同的模板中,Logo可能采用不同的形式進行體現。
突出品牌圖形的Logo通常放置在首頁或重要的分流頁面
簡化的Logo通常在內容閱讀頁面提醒用戶識別目前的網站
一旦用戶進行了注冊,并且了解登錄之后的內容優勢,那么他們往往會選擇自動記住登錄狀態或者主動去尋找它們;為首次進入的用戶提供明顯的登錄注冊提示非常重要;而對于經常訪問的用戶,只需要給登錄一個“方便的”位置就可以了;盡量把頁面中最重要的位置留給最重要的內容,而不是登錄注冊這樣的常用功能。
標準的登錄框非常搶眼,通常放置在分流頁面
簡單高效的登錄條占用屏幕資源較少,一般設置的內頁的固定位置
如果生成最簡模板的過程是對頁面架構中的重復項目進行減法操作;那么逐個設計模板的過程就是在最簡模板基礎上進行加法操作。
加法的過程,就是依據《復用表》中的分析結果,將模板元素中的元素進行填充的設計;推薦由最簡模板向那些復雜的模板逐漸的過渡;設計過程中,要給下一個模板留下設計的余地和彈性;加法保持了模板的一致性,給用戶帶來了訪問便捷。
從最簡模板到復雜模板逐步加法的過程模擬
加法中,元素的排列順序不是固定的,新加入的元素可能排列在已有元素之前;因為這些新加入也許是“只在特定的頁面中存在”的元素;例如在List01產品列表頁應用的模板中加入“產品對比”這個功能元素時,就需要將其放在頁面重要的位置,而其他的元素可能需要相對后置。
使用《復用表》對比查看公共元素的情況,將它們分為三個類型:常駐、特定、偶然;根據典型頁面采樣的重復程度不斷的進行模板歸并,最終確定模板的數量;從最簡模板開始,使用加法原則完善整個模板系統;形成的整合項目的表現同一和訪問一致。
在建立模板系統之后,按照《項目的頁面列表》進行模板之外的具體頁面設計,就能夠輕松的完成一套低保真線框圖。低保真模型已經可以對項目最終形態進行表達了,對低保真模型進行不斷的修改確認之后,可以逐漸的生成高保真線框圖;雖然高保真原型不是必須的,但是卻是非常有效的。
下一篇:國美應邀出席中消協投訴和解大會