三、學會掌控用戶路徑

用戶從哪個頁面來？他最有可能點哪個鏈接或者按鈕？他使用了搜索框嗎？他下一頁去哪里？最后哪個頁面會被他打印輸出？

站在整個網(wǎng)站的角度出發(fā)，這些流程也許只是產(chǎn)品經(jīng)理需要把握的，設(shè)計師拿到UE圖只管一個接一個繪制頁面就行。其實不然，好的設(shè)計師往往能承擔一部分產(chǎn)品經(jīng)理的職責，設(shè)計出一個典型的用戶路徑，這對網(wǎng)站頁面流程有著很大的影響。

頁面和頁面之間有很多關(guān)聯(lián)，成片的超鏈接把流程頁面和外部頁面混亂地串在一起，區(qū)域A的文字鏈接要鏈到頁面2，區(qū)域B的圖片鏈接是指向頁面3，側(cè)邊的一個位置顯著的大按鈕其實是鏈接到網(wǎng)站X……頁面和頁面之間也是有繼承關(guān)系的，繼承的過程要讓用戶覺得理所當然，在視覺上實現(xiàn)平滑過渡，這就是設(shè)計師要考慮的具體問題。從一個頁面到另一個頁面的路徑組成里，哪些模塊要原樣保留，哪些控件要發(fā)生變化？頁面結(jié)構(gòu)是否可以變動，頁面色彩是否可以更換？這些都是需要參照用戶路徑進行設(shè)計的地方。把自己想象成為一個普通用戶，一頁一頁地點進來，你就能明白用戶需要的是什么樣的合理設(shè)計。在此我們可以參考如圖所示的網(wǎng)站設(shè)計流程圖。

四、初步實現(xiàn)UE產(chǎn)品模型，并審核

設(shè)計師需要以什么作為參考來進行頁面設(shè)計？所有的元素和流程都在腦子里，這個時候設(shè)計師需要稍加整理把它們簡要地畫出來，畫出線框和注釋就可以了。

我們可以把UE模型理解為設(shè)計草圖，在UE階段，設(shè)計師主要根據(jù)用戶路徑得來的線索，加上對用戶交互習慣的探索，進而整理出一個大概的模型框架。這個框架里，要明確畫出有幾個關(guān)鍵頁面，每個關(guān)鍵頁面的關(guān)鍵元素和模塊有哪些，這些關(guān)鍵元素和模塊哪些是必須以某種特定位置排列或者是務(wù)必要強調(diào)突出的。

其中，網(wǎng)站的首頁、最終頁面是最重要的兩級頁面，首頁會是用戶使用網(wǎng)站的第一站，在首頁的體驗好壞，直接決定著他的去留；而最終頁面是用戶想要獲得信息的具體頁面，他會在這個頁面停留最久，可能會進行仔細的閱讀，或是打印出這一頁備用。通常在繪制完UE模型之后，會有一個開發(fā)小組來討論并且審核這個模型，這時候就需要著重確定首頁和最終頁的大概模樣，每個討論參與者對此都很關(guān)心。UE模型的繪制我們可以參考如圖的某商城的UE圖。UE模型通過之后，傳統(tǒng)意義的設(shè)計終于派上用場，要進行具體的頁面設(shè)計了。

鏈接1

網(wǎng)站設(shè)計中可能存在的誤區(qū)〖EOF〗

• 誤區(qū)一：設(shè)計師就是美工。
  事實上，兩者幾乎完全不同，設(shè)計師存在主觀因素上的設(shè)計，而美工很有可能只是被動執(zhí)行。
• 誤區(qū)二：用什么做圖軟件對設(shè)計師來說很重要。
  其實設(shè)計師對做圖軟件沒有什么嚴格要求，很多學習繪圖軟件很久的人習慣用photoshop來畫頁面，而更多專職面向網(wǎng)頁設(shè)計的人習慣使用fireworks，因為其更偏網(wǎng)頁化的操作能帶來更高的效率。
• 誤區(qū)三：做平面設(shè)計和網(wǎng)頁設(shè)計其實是互通的。
  雖然都是設(shè)計，但兩者的很多設(shè)計規(guī)矩是不一樣的，我認為兩者最大的區(qū)別是思想上的區(qū)別：平面設(shè)計講究留白和視覺沖擊，而網(wǎng)頁設(shè)計則寸土寸金，頁面元素的整齊協(xié)調(diào)更是至關(guān)重要的。
• 誤區(qū)四：我改變不了領(lǐng)導(dǎo)和用戶的需求。
  設(shè)計師要做的只是提出自己對于設(shè)計上的看法，決定權(quán)仍然在于領(lǐng)導(dǎo)。
• 誤區(qū)五：我經(jīng)驗不足，提不了任何建議。
  對設(shè)計師來說，了解需求也是很重要的，不光是需要讀懂文檔，更需要真正明白大家在做的是一個什么樣的具體的東西，這樣在動手操作的時候，才不會手足無措或者是理解偏差。
• 誤區(qū)六：設(shè)計師直接出設(shè)計稿就行了，有問題就改。
  設(shè)計師需要先搭建出UE模型，UE只需要以簡單線框模式展現(xiàn)，效率高而且適合隨時調(diào)整修改，往往在這個階段需要修改的地方是很多的，如果直接就以設(shè)計稿來探討，每修改一處都是一個工程，毫無效率可言。
• 誤區(qū)七: 每個頁面都很重要，都要認真研究探討。
  其實大部分網(wǎng)站頁面都是一樣的框架，只是內(nèi)容顯示不同，同一個級別的頁面基本都是一致的，除了關(guān)鍵頁面之外，其他頁面用戶也許只是經(jīng)過一次，停留時間甚至可以忽略，論優(yōu)先級來說，同等效率下自然要保證關(guān)鍵頁面。

鏈接２

相關(guān)名詞

• MRD（Market Requirements Document），
  是指市場需求文檔。MRD文檔主要側(cè)重于市場機會的分析，得出類似于 “就當前市場情況而言，我們可以做什么”的結(jié)論；
• PRD（Product Requirements Document），
  是指產(chǎn)品需求文檔。PRD側(cè)重于整個產(chǎn)品的規(guī)劃，比 MRD文檔要細化一些；
• UI（User Interface）設(shè)計，
  用戶界面設(shè)計，用戶界面設(shè)計的三大原則是: 置界面于用戶的控制之下、減少用戶的記憶負擔、保持界面的一致性；
• UE（User Experience），
  用戶體驗，成形的用戶體驗可表示為框架化的頁面草圖，有些人習慣用紙筆畫UE，有些人習慣用word或其他行業(yè)軟件，總之能展現(xiàn)頁面概要示例即可。