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

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

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

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

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

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

第一：用戶

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

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

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

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

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

第四：成本

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

頁面制作和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)容可訪問性）可是大部分的讀者和推廣者還是更多的在結(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稿的一部分，可以說是將UI稿分成了結(jié)構(gòu)和表現(xiàn)兩個(gè)部分。

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

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

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