推薦：設(shè)計(jì)師決勝商界的十大金科玉律
《NewWebPick》電子雜志邀請(qǐng)全球500強(qiáng)企業(yè)中的企業(yè)領(lǐng)袖及資深市場(chǎng)總監(jiān)，對(duì)設(shè)計(jì)師在商界中如何更好的服務(wù)客戶，做出了以下十條忠告，希望做為設(shè)計(jì)師的您，通過(guò)這

原文：http://www.jluvip.com/blog/article.asp?id=377

自己現(xiàn)在的崗位是頁(yè)面制作，由于種種歷史的原因，頁(yè)面制作這個(gè)崗位不怎么被人重視，覺(jué)得這份工作很簡(jiǎn)單，沒(méi)什么難度。或者很低級(jí)，沒(méi)有自己的想法，只是把設(shè)計(jì)稿變成了網(wǎng)頁(yè)。不涉及編程，不涉及設(shè)計(jì)，沒(méi)有自己的想法，很可能在某些公司被開(kāi)發(fā)或者設(shè)計(jì)人員兼任著。

到底頁(yè)面制作這個(gè)崗位在做什么？能做什么？做到了什么？憑自己的想法和經(jīng)歷，整理了一下，見(jiàn)下圖：

應(yīng)要求附上源文件：
Click Here To Download

我是從四個(gè)方面去考慮的：

第一：用戶

面對(duì)用戶，我需要做的當(dāng)然是完全的還原ui稿給用戶，也就是把UI稿做成網(wǎng)頁(yè)呈現(xiàn)給用戶。而準(zhǔn)確的說(shuō)是呈現(xiàn)交互和視覺(jué)感受，交互邏輯，信息構(gòu)建和視覺(jué)設(shè)計(jì)，這個(gè)的重要性最高，也是必須完成的。呈現(xiàn)的平臺(tái)就是可以解析網(wǎng)頁(yè)的軟件，需要呈現(xiàn)的平臺(tái)是存在產(chǎn)品用戶的那部分平臺(tái)，更多的是Windows下的IE5.5,IE6.0,IE7.0,少量的Firefox，Opera，后兩個(gè)瀏覽器沒(méi)有限定版本，因?yàn)樗麄兛梢院茌p易更新。支持到最新版本即可。
其次是附加的用戶體驗(yàn)，網(wǎng)頁(yè)的打開(kāi)速度很重要，如何減少文件和圖片的字節(jié)，如何根據(jù)流量去批量加載文件，整合css文件和圖片，降低http連接數(shù)，網(wǎng)頁(yè)內(nèi)容是文本呈現(xiàn)（看似很白癡的一點(diǎn)，可是有些網(wǎng)頁(yè)真的把正常網(wǎng)頁(yè)能呈現(xiàn)的文字放在圖片中）。鏈接的動(dòng)態(tài)表現(xiàn)形式，鼠標(biāo)劃過(guò)，點(diǎn)擊后的等效果（UI稿不會(huì)有的），表單的可用和易用，如焦點(diǎn)，表單字體顏色，大小，下拉表單的分組等，優(yōu)先顯示重要內(nèi)容，也就是html中寫(xiě)在前面。需要長(zhǎng)時(shí)間閱讀的文字可支持縮放。再就是一些對(duì)于我不是很重要的部分，想親和力，可轉(zhuǎn)化為pdf格式，有需要打印的可打印，異狀處理，像圖片沒(méi)加載有信息提示，樣式?jīng)]加載的內(nèi)容可讀性等等

第二：信息數(shù)據(jù)

海量的網(wǎng)站和網(wǎng)頁(yè)，誕生了信息的檢索和篩選工具，那就是搜索引擎，而且搜索引擎已經(jīng)成為用戶上網(wǎng)找資源的一個(gè)必用工具，面向搜索引擎的要害字排名優(yōu)化是很有必要的，IBM技術(shù)文檔的數(shù)據(jù)說(shuō)明大概有30%的訪問(wèn)量是來(lái)自搜索引擎的。
搜索引擎排名優(yōu)化的要害是內(nèi)容，也就是上面提到的信息構(gòu)建，如何提供有價(jià)值的而且易于訪問(wèn)的內(nèi)容。手段是HTML編碼——搜索引擎信息數(shù)據(jù)的來(lái)源，爬蟲(chóng)可以輕松的獲取html中重要的信息數(shù)據(jù)，如<title>，<meta>部分的描述，要害字，標(biāo)題<hx>，加重強(qiáng)調(diào)<strong>，而且網(wǎng)頁(yè)前200單詞中要害詞出現(xiàn)的頻率對(duì)這個(gè)要害詞的排名的影響很大。
頁(yè)面制作人員這個(gè)方面需要做的事情就是合理的使用html標(biāo)記，遵循標(biāo)記的語(yǔ)義，將表現(xiàn)元素和結(jié)構(gòu)分離，提煉title和meta部分的內(nèi)容，將重要內(nèi)容放在代碼的前面，給用背景呈現(xiàn)的重要信息提供隱藏的替代文字，防止JS輸出重要內(nèi)容（如導(dǎo)航）。假如有SEO人員，剩下的就交給他們了，假如沒(méi)有自己適當(dāng)?shù)某袚?dān)。

第三：開(kāi)發(fā)者或者是開(kāi)發(fā)流程

你的網(wǎng)頁(yè)是要交給開(kāi)發(fā)的，開(kāi)發(fā)根據(jù)產(chǎn)品的功能進(jìn)行開(kāi)發(fā)，包括一部分的前臺(tái)腳本。你的網(wǎng)頁(yè)是否方便開(kāi)發(fā)人員加程序（表單驗(yàn)證，分頁(yè)的數(shù)據(jù)等），這也是需要思考和做到的，還有非凡表現(xiàn)方式的處理，如鼠標(biāo)劃過(guò)事件相應(yīng)，tab切換，下拉菜單，浮出層，拖拽等動(dòng)態(tài)交互效果。非凡的字符處理（如非凡字符換行，防止長(zhǎng)字符撐大容器的截字處理）。
面對(duì)產(chǎn)品需求的臨時(shí)變更，版本迭代的變更，也要做到可以輕易的應(yīng)對(duì)和維護(hù)，開(kāi)發(fā)模式和效率上需要思考代碼的復(fù)用和多人協(xié)同開(kāi)發(fā)。

第四：成本

流量和服務(wù)器是成本，你可以做到部分的降低這些成本，減少文件的字節(jié)，減少連接數(shù)和并發(fā)連接數(shù)。

頁(yè)面制作和web標(biāo)準(zhǔn)

雖然《網(wǎng)站重構(gòu)——designing with web standards》提到web標(biāo)準(zhǔn)涉及結(jié)構(gòu)，表現(xiàn)，行為的分離，WAI（網(wǎng)站內(nèi)容可訪問(wèn)性）可是大部分的讀者和推廣者還是更多的在結(jié)構(gòu)和表現(xiàn)上面學(xué)習(xí)和實(shí)踐著，我也在圖上用關(guān)聯(lián)線段標(biāo)明了結(jié)構(gòu)，表現(xiàn)與以上四點(diǎn)的一些關(guān)系，結(jié)構(gòu)更多的是面向信息數(shù)據(jù)的，表現(xiàn)更多的是面向還原UI稿的，當(dāng)然不是很準(zhǔn)確，本身結(jié)構(gòu)也是UI稿的一部分，可以說(shuō)是將UI稿分成了結(jié)構(gòu)和表現(xiàn)兩個(gè)部分。

以上四個(gè)方面開(kāi)看，這個(gè)崗位不是傳統(tǒng)認(rèn)為的那么簡(jiǎn)單和可替代性，從語(yǔ)言的角度要求必須熟練把握兩種語(yǔ)言html和css，以及當(dāng)前的瀏覽器版本，瀏覽器類型和設(shè)備對(duì)這兩種語(yǔ)言的兼容性。其次是性能優(yōu)化的方法和SEO的知識(shí)，再次是開(kāi)發(fā)效率的提升。假如有哪位開(kāi)發(fā)或者UI想兼職它，我也不介意，可能您的能力的確夠強(qiáng)。
而我期待的是這樣一個(gè)崗位，web前臺(tái)開(kāi)發(fā)，網(wǎng)頁(yè)制作和前臺(tái)Javascript腳本開(kāi)發(fā)。第一更有挑戰(zhàn)性，第二時(shí)代的要求，富客戶端的要求，前臺(tái)腳本越來(lái)越重要，越來(lái)越復(fù)雜。第三，崗位更具不可替代性。

有不準(zhǔn)確和遺漏的地方，歡迎您回復(fù)指正和補(bǔ)充。

分享：向前一步是設(shè)計(jì)
臭魚(yú)的blog：www.chouyu.com.cn這是一個(gè)對(duì)頁(yè)面操作權(quán)限進(jìn)行設(shè)置的功能。讓我試著解釋一下這個(gè)設(shè)置功能：區(qū)分兩類人：所有成員和部分特權(quán)成員。操作分為：