三、學(xué)會掌控用戶路徑

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

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

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

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

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

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

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

鏈接1

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

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

鏈接２

相關(guān)名詞

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