網(wǎng)站設(shè)計(jì)前怎樣制作網(wǎng)站原型圖？那么什么是網(wǎng)站原型圖呢？可以理解為是網(wǎng)站界面的草圖或者框架結(jié)構(gòu)，按照原型圖制作的粗糙程度劃分為高保真原型圖和低保真原型圖，有些高保真原型圖看上去跟真的網(wǎng)頁(yè)一樣，還有各種動(dòng)畫效果，非常棒。但博納網(wǎng)絡(luò)認(rèn)為，原型圖還是沒必要做的太精細(xì)，不然就失去了原型圖的意義，因?yàn)榫W(wǎng)站原型圖的最大作用就是試錯(cuò)成本低，通過(guò)低成本的試錯(cuò)功能增加網(wǎng)站真實(shí)設(shè)計(jì)圖的通過(guò)率，那么回歸主題，網(wǎng)站設(shè)計(jì)前怎樣制作網(wǎng)站原型圖？
一、確定頁(yè)面尺寸
瀏覽網(wǎng)頁(yè)的平臺(tái)主要分為桌面端（PC端）和移動(dòng)端，其中桌面端設(shè)備包括臺(tái)式計(jì)算機(jī)、筆記本電腦，而移動(dòng)端設(shè)備包括智能手機(jī)、平板電腦等，兩種設(shè)備主要特征對(duì)比（見圖1）如下。
圖一 兩種設(shè)備主要特征對(duì)比 從交互的角度而言，桌面端與移動(dòng)端的區(qū)別可以概括為以下3點(diǎn)。
1.操作方式不同
桌面端主要的交互為鼠標(biāo)單擊事件，其交互動(dòng)作簡(jiǎn)單，大多為不同頁(yè)面的切換與跳轉(zhuǎn)，交互通道以視覺為主，偶爾會(huì)有聽覺輔助。移動(dòng)端的交互為與人的身體接觸的方式，主要交互通道為觸覺上的單擊、雙擊、長(zhǎng)時(shí)間按、滑動(dòng)等，這是兩者交互的本質(zhì)區(qū)別。
2.使用場(chǎng)景不同
桌面端的使用場(chǎng)景一般較為固定，室內(nèi)或辦公室，電腦移動(dòng)的概率較小。移動(dòng)端則可在很多場(chǎng)景下使用，比如坐地鐵、坐公交車、吃飯、睡覺等，因此移動(dòng)端要考慮的交互更多。
3.網(wǎng)絡(luò)環(huán)境不同
桌面端的網(wǎng)絡(luò)較為穩(wěn)定，可以是無(wú)線也可以有線，出現(xiàn)異常情況的概率相對(duì)較小。移動(dòng)端很多時(shí)間處于無(wú)線數(shù)據(jù)網(wǎng)絡(luò)狀態(tài)下，網(wǎng)絡(luò)狀況隨著地點(diǎn)不同有所變化。
二、頁(yè)面設(shè)計(jì)的優(yōu)先級(jí)
項(xiàng)目無(wú)論是從小屏幕入手過(guò)渡到大屏幕（移動(dòng)端優(yōu)先），還是從大屏幕入手過(guò)渡到小屏幕（桌面端優(yōu)先），其區(qū)別并不大。但是隨著移動(dòng)端設(shè)備的用量超越桌面端，移動(dòng)端的網(wǎng)頁(yè)瀏覽無(wú)疑已經(jīng)成為用戶獲取信息的主要渠道，移動(dòng)端優(yōu)先的設(shè)計(jì)自然應(yīng)該成為常態(tài)。相對(duì)于桌面端設(shè)計(jì)優(yōu)先，率先設(shè)計(jì)適配移動(dòng)端的網(wǎng)頁(yè)更能令開發(fā)設(shè)計(jì)人員清晰梳理功能的優(yōu)先級(jí)，從而降低整套網(wǎng)頁(yè)設(shè)計(jì)的復(fù)雜性。
三、線框圖設(shè)計(jì)
網(wǎng)站線框圖（見圖2）是低等保真的設(shè)計(jì)圖，它既是設(shè)計(jì)圖的核心，也是原型設(shè)計(jì)的前身，其承載著產(chǎn)品所有重要的部分。線框圖主要用于產(chǎn)品開發(fā)初期的功能展示與討論，因此圖內(nèi)應(yīng)當(dāng)明確表達(dá)出頁(yè)面功能內(nèi)容和頁(yè)面間的信息架構(gòu)及用戶交互界面的主視覺和描述。
圖2 網(wǎng)站線框圖 繪制的線框圖可以是手繪效果圖，也可以是電子稿，但無(wú)論是哪一種表現(xiàn)形式都不用在意細(xì)枝末節(jié)，只需要使用線條、方框和灰階色彩填充（不同灰階標(biāo)明不同層次）就可以完成。
有的設(shè)計(jì)師喜歡提高線框圖的保真度并快速展示頁(yè)面間的關(guān)系，讓各靜態(tài)的線框圖呈現(xiàn)出可以單擊交互的狀態(tài)，這種線框圖叫作交互式線框圖（見圖3）。它可以運(yùn)用如Axure（見圖4）、UXPin Balsamiq等交互軟件去完成，即便你不會(huì)代碼也能輕松實(shí)現(xiàn)線框圖的簡(jiǎn)單交互效果。
圖3 交互式線框圖
圖4 Axure界面
四、原型設(shè)計(jì)
網(wǎng)站原型是中等保真的設(shè)計(jì)圖，要求比線框圖和可交互式線框圖要高，它要求盡可能真實(shí)地模擬用戶和界面之間的交互。如當(dāng)一個(gè)按鈕被按下的時(shí)候，相應(yīng)的操作必須被執(zhí)行，對(duì)應(yīng)頁(yè)面也必須出現(xiàn)，盡可能地模仿完整的產(chǎn)品體驗(yàn)。
在視覺上，主色調(diào)和主視覺必須到位，重點(diǎn)內(nèi)容理應(yīng)呈現(xiàn)出來(lái)，信息分類和版式設(shè)計(jì)也應(yīng)該在合理范疇以內(nèi)，單擊相應(yīng)的元素之后，原型也應(yīng)出現(xiàn)對(duì)應(yīng)的交互回饋。
原型應(yīng)該盡可能模擬最終產(chǎn)品，就算長(zhǎng)得不是一模一樣，交互應(yīng)該精心模塊化，盡量在體驗(yàn)上和最終產(chǎn)品保持一致。
