Web網(wǎng)站界面設(shè)計(jì)規(guī)范的五大層次最近由于有很多的新網(wǎng)站要去策劃設(shè)計(jì)，所以看了大量的關(guān)于網(wǎng)站策劃、交互設(shè)計(jì)和用戶(hù)體驗(yàn)的書(shū)籍。使我也系統(tǒng)地了解一些產(chǎn)品設(shè)計(jì)的相關(guān)理論及方法，深受啟發(fā)。這里我將結(jié)合WEB設(shè)計(jì)的精華，再加上自己以往積累的經(jīng)驗(yàn)，總結(jié)一下Web網(wǎng)站的設(shè)計(jì)流程。今天我給大家分享的是以用戶(hù)為中心的WEB設(shè)計(jì)的五個(gè)層次，即：戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層和表現(xiàn)層。關(guān)于這五個(gè)層面，馬海祥的個(gè)人理解是：這五個(gè)層面適合大部分的軟件開(kāi)發(fā)項(xiàng)目。做任何一個(gè)產(chǎn)品，產(chǎn)品的戰(zhàn)略，產(chǎn)品規(guī)格，范圍，優(yōu)先級(jí)，需求分析也就是交互設(shè)計(jì)缺一不可。對(duì)沒(méi)有界面的產(chǎn)品來(lái)說(shuō)，把這么多工作認(rèn)真的做完，產(chǎn)品的設(shè)計(jì)工作也就基本完工了。如果是有界面的產(chǎn)品，再需要做的工作就是界面設(shè)計(jì)和視覺(jué)設(shè)計(jì)了。這五個(gè)層間也恰恰就是管理中的對(duì)核心職能的定義。在這里也強(qiáng)調(diào)了各個(gè)層級(jí)的先后順序以及層級(jí)之間的重疊性。一、戰(zhàn)略層戰(zhàn)略層主要是明確公司與用戶(hù)對(duì)于網(wǎng)站的期望和目標(biāo)。1、工作目標(biāo)(1)、確定網(wǎng)站目標(biāo)：我們要從這個(gè)網(wǎng)站得到什么？(2)、確定用戶(hù)需求：我們的用戶(hù)要從這個(gè)網(wǎng)站得到什么？2、工作內(nèi)容(1)、確定網(wǎng)站目標(biāo)a、商業(yè)目標(biāo)：替公司賺錢(qián)還是替公司省錢(qián)？要賺多少錢(qián)？b、品牌識(shí)別：將品牌形象具體而明確地寫(xiě)進(jìn)目標(biāo)，將會(huì)提高呈現(xiàn)出積極的品牌形象的機(jī)會(huì)；c、成功標(biāo)準(zhǔn)：將戰(zhàn)略或商業(yè)目標(biāo)進(jìn)行量化。如通過(guò)衡量每一個(gè)注冊(cè)用戶(hù)單月的訪問(wèn)次

數(shù)表明了該網(wǎng)站對(duì)核心用戶(hù)的價(jià)值。(2)、確定用戶(hù)需求a、用戶(hù)細(xì)分：可以按照人口統(tǒng)計(jì)學(xué)標(biāo)準(zhǔn)，價(jià)值觀標(biāo)準(zhǔn)和用戶(hù)對(duì)技術(shù)及網(wǎng)站本身觀點(diǎn)劃分用戶(hù)；b、用戶(hù)研究：使用問(wèn)卷調(diào)查、用戶(hù)訪談、焦點(diǎn)小組等方法收集、分析用戶(hù)觀點(diǎn)和需求。并可通過(guò)創(chuàng)建虛擬人物角色來(lái)將分散的資料關(guān)聯(lián)起來(lái)。幫助你確保在整個(gè)設(shè)計(jì)過(guò)程期間把用戶(hù)始終放在心里。3、輸出物市場(chǎng)需求文檔(MRD)、用戶(hù)研究報(bào)告、競(jìng)爭(zhēng)對(duì)手分析報(bào)告等。關(guān)于這點(diǎn)我也曾在馬海祥博客的《如何利用SEO的思維模式來(lái)分析競(jìng)爭(zhēng)對(duì)手》一文中做過(guò)詳細(xì)的介紹，有興趣的博友可以查看一下。二、范圍層范圍層主要是將戰(zhàn)略層確定的目標(biāo)轉(zhuǎn)化為網(wǎng)站提供的功能和內(nèi)容。1、工作目標(biāo)確定網(wǎng)站的功能需求或功能規(guī)格。2、工作內(nèi)容(1)、收集需求：從用戶(hù)處收集需求，各部門(mén)聚集采用頭腦風(fēng)暴收集需求；從競(jìng)爭(zhēng)對(duì)手處獲得啟發(fā)；使用用戶(hù)場(chǎng)景來(lái)描述需求；(2)、確定需求優(yōu)先級(jí)：需要去評(píng)估這些需求是否能滿(mǎn)足我們的戰(zhàn)略目標(biāo)(無(wú)論是網(wǎng)站目標(biāo)還是用戶(hù)需求)。另外，還要確定實(shí)現(xiàn)這些需求的可行性有多大？3、輸出物網(wǎng)站產(chǎn)品需求文檔(PRD)、產(chǎn)品功能規(guī)格文檔等。對(duì)此大家可以通過(guò)馬海祥博客的《

網(wǎng)站設(shè)計(jì)的重要因素及注意事項(xiàng)》一文來(lái)具體了解，在此我就不詳細(xì)的說(shuō)了。三、結(jié)構(gòu)層結(jié)構(gòu)層主要是設(shè)計(jì)網(wǎng)站架構(gòu)圖，將分散的功能和內(nèi)容組成一個(gè)整體。1、工作目標(biāo)設(shè)計(jì)網(wǎng)站架構(gòu)圖，將分散的功能和內(nèi)容組成一個(gè)整體。2、工作內(nèi)容進(jìn)行交互設(shè)計(jì)、搭建信息架構(gòu)。3、輸出物這個(gè)主要指網(wǎng)站架構(gòu)圖。如下圖所示:EmMgfF^V血&H?！?黑:.黨”i『皿睚E『4"『■Adwd-t:WfEWIMr4>n^lw''lrw?b.Miifau?如mMfcWWWIHcfiQrUAdSensamulw.Adi&m?.EmMgfF^V血&H?！?黑:.黨”i『皿睚E『4"『■Adwd-t:WfEWIMr4>n^lw''lrw?b.Miifau?如mMfcWWWIHcfiQrUAdSensamulw.Adi&m?.sunisfvT口in?x?篁1?翼口立WfrbPubh4內(nèi)PartnerCruiiManMni號(hào)」*|;.手町哥.Uhitr?rWKtf尋f'dM?U7u^iv-gatwjMKJMiAg(CaHarwh、UJ而Tm…大一?￡■麻翁陽(yáng)由早1年JUlwdfAACtt'WiWNYELf-U二r-u* C.皿?M 講"也Ad.Fiy月'Wif："J'11'I.點(diǎn)Ux岫吊胸成JW94—>M毅fEigzn叫g(shù)gA&3FFApr劃TiAdWords■Se+EFi'Or^學(xué)EkH.R聶HTlLemK*WFfJH￡A'-^/i用、imiw.<Rrtsrnw6PT5審wmUirlFri"i?d■ 甯ah神，向隴山L-CFM1HWC*Drcdtty^fjrrn^nF等EFC二?翼?〃UEF%,M河1ItemE國(guó)2lUm3■.蠟MSCtwmpA\毛■心￥rdftaKhsWWWE汨h卸V-H—H-?54ftr8|B，vV?S力陽(yáng)口gcnGoogleAdWords-AdSense四、框架層框架層主要是將抽象的架構(gòu)圖轉(zhuǎn)化為詳細(xì)的線框圖，確定界面外觀、導(dǎo)航信息及信息要素的布局。1、工作目標(biāo)將抽象的架構(gòu)圖轉(zhuǎn)化為詳細(xì)的線框圖，確定界面外觀、導(dǎo)航信息及信息要素的布局。2、工作內(nèi)容進(jìn)行詳細(xì)的界面、導(dǎo)航設(shè)計(jì)及信息擺放布局?？梢允褂肰isio或者AxureRP來(lái)完成線框圖的設(shè)計(jì)。3、輸出物一般是線框圖，比如：郵箱產(chǎn)品寫(xiě)信頁(yè)面線框圖。如下圖所示：五、表現(xiàn)層表現(xiàn)層主要是按照“低保真”的線框圖設(shè)計(jì)出最終的Web網(wǎng)站。1、工作目標(biāo)按照“低保真”的線框圖設(shè)計(jì)出最終的Web網(wǎng)站。2、工作內(nèi)容遵照突出重點(diǎn)、保持一致性的原則以及統(tǒng)一的配色排版方案設(shè)計(jì)出最終的Web網(wǎng)站。3、輸出物最終的Web網(wǎng)站。六、總結(jié)工作流程從管理的意義上來(lái)看，我們可以為任何一項(xiàng)工作定義一套工作流程。1、找準(zhǔn)客戶(hù)。2、提煉客戶(hù)需求。3、總結(jié)核心職能。4、確定工作崗位。5、定義工作流程。馬海祥博客點(diǎn)評(píng)：即使對(duì)于非WEB設(shè)計(jì)人員來(lái)說(shuō)，交互設(shè)計(jì)也不陌生。其實(shí)需求分析過(guò)程也是交