這一系列文章都是筆者初次承擔(dān)網(wǎng)站項(xiàng)目的總結(jié)報(bào)告，其中的想法絕對(duì)不適用經(jīng)驗(yàn)豐富的設(shè)計(jì)師和F2E绝编。
線框圖
作為F2E,當(dāng)我們（雖然這篇文章的輸出文檔理應(yīng)是設(shè)計(jì)師完成僻澎，但是通常小團(tuán)隊(duì)里，設(shè)計(jì)師和前端往往是一個(gè)人）與產(chǎn)品經(jīng)理探討完網(wǎng)站層次結(jié)構(gòu)和呈現(xiàn)內(nèi)容后十饥，就要開始繪制粗糙的線框圖窟勃。
線框圖是最初產(chǎn)品定位的一個(gè)文檔，通潮僚埽可以使用鉛筆直接繪制在白紙上拳恋，能夠表達(dá)出對(duì)網(wǎng)站結(jié)構(gòu)和內(nèi)容清晰認(rèn)識(shí)，以及網(wǎng)站內(nèi)的交互邏輯砸捏。
與此同時(shí)谬运，網(wǎng)絡(luò)上也有很多能夠?qū)崟r(shí)共享的原型稿（精致的線框圖也可以認(rèn)為是原型稿了）設(shè)計(jì)工具，可以幫助F2E 在web網(wǎng)頁上輕松完成線框圖的繪制工作垦藏，也可能得到一個(gè)共享鏈接梆暖，方便團(tuán)隊(duì)內(nèi)其他成員對(duì)你的初期構(gòu)思給出建議。
筆者的線框圖實(shí)在是太糟糕了掂骏，所以從網(wǎng)絡(luò)上摘取一張比較精致的線框圖轰驳。從這張圖里大致能看出網(wǎng)頁內(nèi)容的布局結(jié)構(gòu)和大部分交互邏輯
設(shè)計(jì)稿
粗糙的線框圖完成后，就可以開始設(shè)計(jì)稿了弟灼。
筆者認(rèn)為設(shè)計(jì)稿階段级解，輸出的最重要的是網(wǎng)頁靜態(tài)樣式，這是網(wǎng)頁最初呈現(xiàn)給訪問站點(diǎn)人的樣式田绑。所以勤哗，團(tuán)隊(duì)擁有一個(gè)逼格滿滿的設(shè)計(jì)師小伙伴是非常重要的，不然只能讓F2E(這里指筆者)這樣在設(shè)計(jì)和代碼邊緣的來成為設(shè)計(jì)師掩驱，雖然團(tuán)隊(duì)省錢芒划，但設(shè)計(jì)時(shí)肯定各種心塞！除了網(wǎng)頁設(shè)計(jì)稿（其中包含各種標(biāo)注和切圖文件欧穴，這都屬于輸出文檔）外民逼，還要記錄下布局中各級(jí)標(biāo)題，文本涮帘，鏈接拼苍，圖片文字等部分的字體和字號(hào)。當(dāng)然调缨，以及總體網(wǎng)站使用的配色方案都要記錄下來映屋，這是設(shè)計(jì)稿附加的輸出文檔苟鸯。
參數(shù)標(biāo)注筆者建議使用像素廚房這類工具來完成，因?yàn)楣P者使用PS做設(shè)計(jì)稿時(shí)棚点，各種比例，間距參數(shù)都是在反復(fù)調(diào)整后才得出的湾蔓，而PS內(nèi)的參考線數(shù)據(jù)必須使用查看工具才能知道瘫析，而這種方式遠(yuǎn)不如使用像素廚房這類標(biāo)注工具高效。
還有默责，在切圖時(shí)應(yīng)該也可以獲得各種尺寸贬循，間距的數(shù)據(jù)，由于筆者的網(wǎng)站沒有做切圖桃序，故此杖虾，沒有太多好的建議。
這是一款來自365.com的免費(fèi)商業(yè)主題媒熊，讀者可以從這個(gè)網(wǎng)站獲得psd的文件奇适。
仿真稿
提到仿真稿，其實(shí)一般小型的網(wǎng)站都是不需要這個(gè)仿真稿的芦鳍。因?yàn)榫W(wǎng)站不大嚷往，所以其中的交互也就不會(huì)很復(fù)雜。但是柠衅，這個(gè)仿真稿也同樣很有用皮仁，并且仿真精度越高，越能模擬網(wǎng)站最終上線時(shí)的樣子菲宴，這在后期開發(fā)中同樣可以避免很多問題贷祈，因?yàn)閮H僅依靠設(shè)計(jì)稿的靜態(tài)文件，在后期開發(fā)中再一步步思考添加交互喝峦，這可是是一件很辛（ku）苦(bi)的事势誊。而且，如果F2E們要實(shí)時(shí)向項(xiàng)目主管匯報(bào)愈犹，那么擁有一份高精度的仿真稿键科，也是可以最大程度展示你的想法，避免后期程序?qū)懲赇鲈酰鞴芨鞣N不滿勋颖，各種修改。當(dāng)然勋锤，這份輸出文檔饭玲，最好是由設(shè)計(jì)師和F2E共同完成。
筆者推薦使用Axure來完成仿真稿叁执。網(wǎng)上有各種文章介紹Axure,也有專門的社區(qū)網(wǎng)站來提供全面的教程茄厘。
最后來個(gè)總結(jié)：這部分屬于網(wǎng)站開發(fā)的第一階段矮冬，最終輸出文檔是線框圖、設(shè)計(jì)稿（包括字體次哈、字號(hào)規(guī)范文檔胎署，配色方案，部件間距）窑滞、仿真稿琼牧。
