網(wǎng)頁(yè)設(shè)計(jì)師必須知道的小技巧

網(wǎng)頁(yè)設(shè)計(jì)師必須知道的小技巧

      1. 將圖片保存成Web所用格式

      網(wǎng)頁(yè)設(shè)計(jì)師必須知道的小技巧，在網(wǎng)頁(yè)設(shè)計(jì)中，你必須確保你的圖像大小越小越好。當(dāng)然，當(dāng)你想要圖片完好顯示時(shí)可以拋棄這條原則。

      在Photoshop中創(chuàng)建圖像的完美方法便是平衡質(zhì)量與文件大小。

      網(wǎng)頁(yè)設(shè)計(jì)師經(jīng)常犯的一個(gè)錯(cuò)誤便是使用“另存為”命令，而不是使用“存儲(chǔ)為Web所用格式”。

      “存儲(chǔ)為Web所用格式”可以將圖像保存成基于網(wǎng)頁(yè)設(shè)計(jì)優(yōu)化過(guò)的格式，包括圖像質(zhì)量、圖像分辨率、瀏覽器兼容性和文件大小。

      這一命令會(huì)有一個(gè)對(duì)話框，你可以用來(lái)微調(diào)你的圖像。當(dāng)你調(diào)整圖像的設(shè)置時(shí)，它會(huì)顯示出文件的大小和圖像的質(zhì)量。

      2. 考慮使用Web安全色

      Web安全色在大多數(shù)瀏覽器和顯示器上都能夠正確顯示，這確保了你的網(wǎng)頁(yè)無(wú)論在哪里看起來(lái)都有相同的效果。

      下面是確保你使用的顏色為Web安全色的兩個(gè)簡(jiǎn)單方法。

      “只有Web顏色”選項(xiàng)

      在拾色器窗口的左下角勾選“只有Web顏色”選項(xiàng)。這將使窗口只顯示出Web安全色。

      在拾色器窗口中點(diǎn)擊小方塊，可以將任何顏色轉(zhuǎn)換成Web安全色。

      3. 考慮使用JPG的“逐行掃描”選項(xiàng)

      JPG文件格式是攝影和高分辨率圖像的理想選擇。根據(jù)你的目標(biāo)受眾，逐行掃描有時(shí)候是個(gè)不錯(cuò)的選擇。在網(wǎng)站加載時(shí)，這種格式的圖像會(huì)逐漸呈現(xiàn)(即使在現(xiàn)代寬帶連接的互聯(lián)網(wǎng)時(shí)代，這種等待時(shí)間的類(lèi)型已不是問(wèn)題了)。這使用戶(hù)在圖像完全加載之前便可快速預(yù)覽到，令人感覺(jué)網(wǎng)頁(yè)反應(yīng)更快。

      4. 將圖像保存成透明的PNG格式

      當(dāng)你需要透明的圖片時(shí)，PNG格式是你的最佳選擇。

      大部分主流瀏覽器均會(huì)支持透明的PNG格式，如果你不得不迎合IE6時(shí)，就需要注意了：PNG格式有些透明部分在IE6中會(huì)顯示成灰色。也有辦法來(lái)解決這個(gè)問(wèn)題(如IE PNG修復(fù) Javascript庫(kù))，但是實(shí)現(xiàn)起來(lái)會(huì)比較麻煩。

      5. 將動(dòng)態(tài)圖片保存成GIF格式

      GIF圖像格式雖然大多數(shù)情況下可以被PNG格式所取代，但有一點(diǎn)仍然很有用。雖然這種格式相對(duì)PNG和JPG來(lái)說(shuō)顯得粗糙，但GIF格式本身有個(gè)非常給力的功能，就是支持動(dòng)畫(huà)。

      雖然有一個(gè)擴(kuò)展名為APNG的PNG圖片格式(其代表了便攜網(wǎng)絡(luò)圖形動(dòng)畫(huà))，但很少有瀏覽器支持這種格式。

      如果你需要在PNG和GIF間選擇，通常PNG是個(gè)更好的選擇，除非你需要做成動(dòng)態(tài)圖片。

      6. 請(qǐng)注意“下載時(shí)間”這一信息

      確保一個(gè)站點(diǎn)快速加載并且看上去很漂亮，這是非常重要的。這也體現(xiàn)了保存和優(yōu)化圖片的重要性。如下圖所示，看看在文件保存選項(xiàng)中一個(gè)簡(jiǎn)單的改變可以對(duì)圖片大小產(chǎn)生怎樣的影響。

      比較好的方法就是：降低圖像質(zhì)量，直到你發(fā)現(xiàn)圖像顯示質(zhì)量明顯降低。

      當(dāng)你在優(yōu)化圖像時(shí)，要時(shí)刻關(guān)注“下載時(shí)間”，這將會(huì)顯示在“存儲(chǔ)為Web所用格式”對(duì)話窗口的左下角。

      (1)確定一個(gè)網(wǎng)站的界面設(shè)計(jì)和表現(xiàn)形式

      接到一個(gè)客戶(hù)的書(shū)面網(wǎng)站建設(shè)需求文檔，有的人馬上就開(kāi)始做網(wǎng)頁(yè)設(shè)計(jì)，根本不加任何思考，這樣往往不是客戶(hù)想要的作品，從而沒(méi)有輕重，事倍功半!

      做網(wǎng)頁(yè)設(shè)計(jì)，你需要和客戶(hù)溝通的東西很多：

      1、建站目的

      2、欄目分類(lèi)，欄目的表現(xiàn)形式和功能

      3、主色調(diào)，客戶(hù)的一些文章圖片資料

      4、按照行業(yè)和客戶(hù)要求，要著重體現(xiàn)的有哪些

      5、是否需要考慮后期的兼容性，可開(kāi)發(fā)性等等…

      當(dāng)你把這些內(nèi)容都了解清除了時(shí)候，你的大腦中就已經(jīng)給這個(gè)網(wǎng)站有個(gè)全面而形象的定位了，這時(shí)才是有的放矢去做網(wǎng)頁(yè)制作的時(shí)候了。

      (2)網(wǎng)頁(yè)制作需要做好一定的界面弱化

      一個(gè)好的界面設(shè)計(jì)它的界面時(shí)弱化的，它突出的是功能，著重體現(xiàn)的是網(wǎng)站業(yè)提供給使用者是主要什么。這就涉及到瀏覽順序、功能分區(qū)等等。

      要讓訪客在0.5內(nèi)就能把握網(wǎng)站的行業(yè)性質(zhì)，1秒內(nèi)就知道該從哪個(gè)地方開(kāi)始使用這個(gè)網(wǎng)站，能點(diǎn)一此的，絕不點(diǎn)第二次。當(dāng)然上面說(shuō)的是大多數(shù)功能性網(wǎng)站，對(duì)于宣戰(zhàn)展示性網(wǎng)站，諸如加特效的或Flash網(wǎng)站，可能就不得不花哨一些，但不能太過(guò)分。網(wǎng)站不是動(dòng)畫(huà)片，在效率越來(lái)越高，社會(huì)心理越來(lái)越浮躁的中國(guó)，人們的耐心越來(lái)越小，心理承受能力越來(lái)越低。效果可以體現(xiàn)意境，點(diǎn)到為止。

      (3)網(wǎng)頁(yè)制作學(xué)會(huì)模塊化和可修改性的布局

      模塊化不僅可以提高重用性，也能統(tǒng)一網(wǎng)站風(fēng)格，還可以降低程序開(kāi)發(fā)的強(qiáng)度。這里就設(shè)計(jì)一些尺寸、模數(shù)、寬容度、命名規(guī)范等等知識(shí)了，不再冗述。

      無(wú)論是架構(gòu)還是模塊或圖片，都要考慮可修改性強(qiáng)。舉個(gè)簡(jiǎn)單的例子，logo、按鈕等，很多人喜歡制作圖片，N個(gè)按鈕就是N張圖片。如果只做3-5類(lèi)按鈕的背景圖片，然后用在網(wǎng)頁(yè)代碼里打上文字，那么修改起來(lái)就簡(jiǎn)單了，讓程序員自己改字就可以了。然而網(wǎng)頁(yè)顯示的字體是帶有鋸齒的，一般即能清晰又保證美觀的字體字號(hào)有幾類(lèi)：

      宋體 12px | 宋體 12px 粗體 | 宋體 14px | 宋體 14px 粗體 | 黑體 20px | verdana 9px | Arial Black 12px+ |

      (4)優(yōu)先的分析能力而不是創(chuàng)意

      和某些ui設(shè)計(jì)培訓(xùn)機(jī)構(gòu)講的設(shè)計(jì)界動(dòng)輒就大談什么“創(chuàng)意”不同，我要說(shuō)的是，還沒(méi)有搞清目的意義內(nèi)容，還沒(méi)在技術(shù)制作上臻于完善的基礎(chǔ)上班，用創(chuàng)藝和特效來(lái)迷惑客戶(hù)和訪客是可恥的。一個(gè)網(wǎng)也設(shè)計(jì)者的分析能力遠(yuǎn)比創(chuàng)藝來(lái)的重要。

      (5)如何決策成本，兼顧還是拋棄

      CSS、XHTML、web2.0、Ajax等等山雨欲來(lái)，學(xué)習(xí)先進(jìn)技術(shù)固然是有好處的，但對(duì)于目前國(guó)內(nèi)普遍的低認(rèn)知水平，決定了客戶(hù)的需求和價(jià)格也是相當(dāng)?shù)偷�。之前，說(shuō)到經(jīng)濟(jì)決定網(wǎng)也設(shè)計(jì)，所以有的時(shí)候，是不允許你做出更多的兼顧的。

      注：尊重原創(chuàng)文章,轉(zhuǎn)載請(qǐng)注明出處和鏈接 http://m.universityresearchassociates.com/news-id-31796.html 違者必究！部分文章來(lái)源于網(wǎng)絡(luò)由培訓(xùn)無(wú)憂網(wǎng)編輯部人員整理發(fā)布,內(nèi)容真實(shí)性請(qǐng)自行核實(shí)或聯(lián)系我們，了解更多相關(guān)資訊請(qǐng)關(guān)注網(wǎng)頁(yè)制作頻道查看更多，了解相關(guān)專(zhuān)業(yè)課程信息您可在線咨詢(xún)也可免費(fèi)申請(qǐng)?jiān)囌n。關(guān)注官方微信了解更多：150 3333 6050