垃圾還是經(jīng)典(轉載)
我也是江西人，我建的網(wǎng)頁(yè)設計交流群，有興趣可以進(jìn)群一起交流學(xué)習：182380358
?。ㄒ唬├€是經(jīng)典 網(wǎng)頁(yè)技術(shù)更新很快，一個(gè)網(wǎng)站的界面設計壽命僅僅2-3年而已。不管是垃圾還是精品，都沒(méi)有所謂的經(jīng)典。經(jīng)典只存在于是哪個(gè)首次成功創(chuàng )新性的應用。一個(gè)閉門(mén)造車(chē)者做出的東西，是遠遠趕不上綜合借鑒者的。網(wǎng)頁(yè)設計不同于其他藝術(shù)，在模仿加創(chuàng )新的網(wǎng)頁(yè)設計領(lǐng)域當中，即便是完全自己設計的，也是沿用了人們已經(jīng)認同的大部分用戶(hù)習慣，而且這種沿襲的痕跡是非常的明顯！還有哪個(gè)設計者敢腆著(zhù)臉說(shuō)，這都是我自己的原創(chuàng )設計？對于業(yè)界來(lái)說(shuō)，經(jīng)典只是個(gè)理念和象征！
?。ǘ﹪鴥染W(wǎng)頁(yè)設計環(huán)境 不可否認，國內網(wǎng)頁(yè)設計環(huán)境目前還停留在初級的認知階段，也就是說(shuō)，絕大多數人不知道網(wǎng)絡(luò )的真正的可用之處，你去做一個(gè)業(yè)務(wù)的時(shí)候，不得不去做大量的說(shuō)服教育工作。以乙方的身份去說(shuō)服甲方，以專(zhuān)業(yè)角度去教育非專(zhuān)業(yè)認識，結果是可想而知的。也正是這種全體社會(huì )普遍的低認知水平，導致了大量網(wǎng)絡(luò )垃圾的產(chǎn)生。
?。ㄈ┦裁词呛玫木W(wǎng)頁(yè)設計 ?。?）內容和功能決定表現形式和界面設計 常常拿到的任務(wù)是一張小紙條，上面兩句話(huà)，叫你去做一個(gè)網(wǎng)站設計。有的人看看紙條就去設計頁(yè)面了，憑兩句話(huà)，你就可以為客戶(hù)做一個(gè)頁(yè)面設計，以我7、8年的設計經(jīng)驗，我都不敢去做，你真是我的偶像阿！ 做網(wǎng)頁(yè)設計，你需要了解客戶(hù)的東西很多： 1、建站目的。 2、欄目規劃及每個(gè)欄目的表現形式及功能要求。 3、主色、客戶(hù)性別喜好、聯(lián)系方式、舊版網(wǎng)址、偏好網(wǎng)址。 4、根據行業(yè)和客戶(hù)要求，那些要著(zhù)重表現。 5、是否分期建設、考慮后期的兼容性。 6、客戶(hù)是否有強烈的建站欲望。 7、你是否能在精神意識上控制住客戶(hù)。 8、面對你未接觸的技術(shù)知識，你有底嗎？ 9. 網(wǎng)站類(lèi)型。 等等... 當你把這些內容都了解清楚了時(shí)候，你的大腦中就已經(jīng)給這個(gè)網(wǎng)站有個(gè)全面而形象的定位了，這時(shí)才是有的放矢去做界面設計的時(shí)候了。 ?。?）界面弱化 一個(gè)好的界面設計它的界面是弱化的，它突出的是功能，著(zhù)重體現的是網(wǎng)站業(yè)提供給使用者主要是什么。這就涉及到瀏覽順序、功能分區等等。 要讓訪(fǎng)客在0.5秒內就能把握網(wǎng)站的行業(yè)性質(zhì)，1秒內就知道該從哪個(gè)地方開(kāi)始使用這個(gè)網(wǎng)站，能點(diǎn)一次的，絕不點(diǎn)第二次。當然上面說(shuō)的是大多數功能性網(wǎng)站，對于宣傳展示性網(wǎng)站，諸如加特效的或Flash網(wǎng)站，可能就不得不花哨一些，但不能太過(guò)分。網(wǎng)站不是動(dòng)畫(huà)片，在效率越來(lái)越高，社會(huì )心理越來(lái)越浮躁的中國，人們的耐心越來(lái)越小，心理承受能力越來(lái)越低。效果可以體現意境，點(diǎn)到為止。 ?。?）模塊化和可修改性強 模塊化不僅可以提高重用性，也能統一網(wǎng)站風(fēng)格，還可以降低程序開(kāi)發(fā)的強度。這里就涉及一些尺寸、模數、寬容度、命名規范等等知識了，不再冗述。 無(wú)論是架構還是模塊或圖片，都要考慮可修改性強。舉個(gè)簡(jiǎn)單的例子，logo、按鈕等，很多人喜歡制作圖片，N個(gè)按鈕就是N張圖片。如果只做3-5類(lèi)按鈕的背景圖片，然后用在網(wǎng)頁(yè)代碼里打上文字，那么修改起來(lái)就簡(jiǎn)單了，讓程序員自己改字就可以了。然而網(wǎng)頁(yè)顯示的字體是帶有鋸齒的，一般既能清晰又保證美觀(guān)的字體字號有幾類(lèi)： 宋體12px | 宋體 12px 粗體 | 宋體 14px | 宋體 14px 粗體 | 黑體 20px | verdana 9px | Arial Black 12px+ | ?。?）創(chuàng )意是可恥的，分析能力遠比創(chuàng )意來(lái)的重要 設計界動(dòng)輒就大談什么“創(chuàng )意”，我要說(shuō)的是，還沒(méi)有搞清目的意義內容，還沒(méi)在技術(shù)制作上臻于完善的基礎上，用創(chuàng )意和特效來(lái)迷惑客戶(hù)和訪(fǎng)客是可恥的。一個(gè)網(wǎng)頁(yè)設計者的分析能力遠比創(chuàng )意來(lái)的重要。
?。ㄋ模┙Y尾，送上思洋廣州的一些經(jīng)驗
?。ㄒ唬┚W(wǎng)頁(yè)配色基本概念 ?。?）白紙黑字是永遠的主題，誰(shuí)都說(shuō)不出不好來(lái)。 ?。?）網(wǎng)頁(yè)最常用流行色 ·藍色——藍天白云，沉靜整潔的顏色。 ·綠色——綠白相間，雅致而有生氣。 ·橙色——活潑熱烈，標準商業(yè)色調。 ·暗紅——寧重、嚴肅、高貴，需要配黑和灰來(lái)壓制刺激的紅色。 ?。?）顏色的忌諱 ·忌臟——背景與文字內容對比不強烈，灰暗的背景令人沮喪！ ·忌純——艷麗的純色對人的刺激太強烈抗議，缺乏內涵。 ·忌跳——再好看的顏色，也不能脫離整體。脫離群眾是自取其辱！ ·忌花——要有一種主色貫穿其中，主色并不是面積最大的顏色，而是最重要，最能揭示和反映主題的顏色，就象領(lǐng)導者一樣，雖然在人數上居少數，但起決定作用。 ·忌粉——顏色淺固然顯的干凈，但如果對比過(guò)弱，整得蒼白無(wú)力了，就象病夫一樣無(wú)可救藥。 ·藍色忌純，綠色忌黃，紅色忌艷。 ?。?）幾種固定搭配 ·藍白橙——藍為主調。白底，藍標題欄，橙色按鈕或ICON做點(diǎn)綴。 ·綠白蘭——綠為主調。白底，綠標題欄，蘭色或橙色按鈕或ICON做點(diǎn)綴。 ·橙白紅——橙為主調。白底，橙標題欄，暗紅或桔紅色按鈕或ICON做點(diǎn)綴。 ·暗紅黑——暗紅主調。黑或灰底，暗紅標題欄，文字內容背景為淺灰色。
?。ǘ┚W(wǎng)頁(yè)設計理念 ?。?）內容決定形式 先把內容充實(shí)上，再分區塊，再定色調，再處理細節。 ?。?）先整體，后局部，最后回歸到整體。 全局考慮，把能填上的都填上，占位置。然后定基調，分模塊設計。最后調整不滿(mǎn)意的幾個(gè)局部細節。 ?。?）功能決定設計方向 ·看網(wǎng)站的用途，決定設計思路.商業(yè)性的就要突出贏(yíng)利目的；政府型的就要突出形象和權威性的文章；教育性的，就要突出師資和課程。 關(guān)于網(wǎng)頁(yè)標題設計的原則 在設計網(wǎng)頁(yè)標題時(shí)，應注意同時(shí)兼顧對用戶(hù)的注意力，以及對搜索引擎檢索的需要。這一原則在實(shí)際操作中可通過(guò)三個(gè)方面來(lái)體現，這三個(gè)方面也可以被認為是網(wǎng)頁(yè)標題設計的一般規律： ?。?）網(wǎng)頁(yè)標題不宜過(guò)短或者多長(cháng)。一般來(lái)說(shuō)6－10個(gè)漢字比較理想，最好不好超過(guò)30個(gè)漢字。網(wǎng)頁(yè)標題字數過(guò)少可能包含不了有效關(guān)鍵詞，字數過(guò)多不僅搜索引擎無(wú)法正確識別標題中的核心關(guān)鍵詞，而且也讓用戶(hù)難以對網(wǎng)頁(yè)標題（尤其是首頁(yè)標題，代表了網(wǎng)站名稱(chēng)）形成深刻印象，也不便于其他網(wǎng)站鏈接。 ?。?）網(wǎng)頁(yè)標題應概括網(wǎng)頁(yè)的核心內容。當用戶(hù)通過(guò)搜索引擎檢索時(shí)，在檢索結果頁(yè)面中的內容一般是網(wǎng)頁(yè)標題（加鏈接）和網(wǎng)頁(yè)摘要信息，要引起用戶(hù)的關(guān)注，網(wǎng)頁(yè)標題發(fā)揮了很大的作用，如果網(wǎng)頁(yè)標題和頁(yè)面摘要信息有較大的相關(guān)性，摘要信息對網(wǎng)頁(yè)標題將發(fā)揮進(jìn)一步的補充作用，從而引起用戶(hù)對該網(wǎng)頁(yè)信息點(diǎn)擊行為的發(fā)生（也就意味著(zhù)搜索引擎推廣發(fā)揮了作用）。另外，當網(wǎng)頁(yè)標題被其他網(wǎng)站或者本網(wǎng)站其他欄目/網(wǎng)頁(yè)鏈接時(shí)，一個(gè)概括了網(wǎng)頁(yè)核心內容的標題有助于用戶(hù)判斷是否點(diǎn)擊該網(wǎng)頁(yè)標題鏈接。 ?。?）網(wǎng)頁(yè)標題中應含有豐富的關(guān)鍵詞?？紤]到搜索引擎營(yíng)銷(xiāo)的特點(diǎn)，搜索引擎對網(wǎng)頁(yè)標題中所包含的關(guān)鍵詞具有較高的權重，盡量讓網(wǎng)頁(yè)標題中含有用戶(hù)檢索所使用的關(guān)鍵詞。以網(wǎng)站首頁(yè)設計為例，一般來(lái)說(shuō)首頁(yè)標題就是網(wǎng)站的名稱(chēng)或者公司名稱(chēng)，但是考慮到有些名稱(chēng)中可能無(wú)法包含公司/網(wǎng)站的核心業(yè)務(wù)，也就是說(shuō)沒(méi)有核心關(guān)鍵詞，這時(shí)通常采用“核心關(guān)鍵詞+公司名/品排名”的方式來(lái)作為網(wǎng)站首頁(yè)標題。本文開(kāi)頭所列舉的某網(wǎng)絡(luò )營(yíng)銷(xiāo)服務(wù)商網(wǎng)站首頁(yè)標題實(shí)例，其實(shí)也是采用這種方式來(lái)設計網(wǎng)頁(yè)標題，只不過(guò)由于羅列了太多的“核心關(guān)鍵詞”，反而沒(méi)有了核心。 上述幾個(gè)方面其實(shí)都考慮了搜索引擎檢索網(wǎng)頁(yè)的特點(diǎn)，也就是說(shuō)，網(wǎng)頁(yè)標題設計都將有利于搜索引擎檢索作為重要因素，即使如此，作者仍然建議，與網(wǎng)頁(yè)內容寫(xiě)作一樣，網(wǎng)頁(yè)標題寫(xiě)作首先是給用戶(hù)看的，在這個(gè)前提之上考慮對搜索引擎檢索才有意義?？梢?jiàn)網(wǎng)頁(yè)標題設計并不是一件隨意的事情，尤其對網(wǎng)站首頁(yè)標題設計，不可不慎重。 做美工看起來(lái)并不是一件容易的事情。首先，要對整個(gè)站點(diǎn)和企業(yè)有個(gè)大致的了解。例如：某些企業(yè)喜歡藍色的主調，你不可能去做個(gè)紅色的主調，這樣完全違背客戶(hù)的主要意愿，如果百度的標志改成五顏六色的，相信大家也不會(huì )認可的。站長(cháng)的職責是規劃網(wǎng)站結構。同樣也需要有一定的審美觀(guān)。下面介紹了幾款常用的繪圖工具和基本知識。 1.源文件psd，ai，cdr的區別 psd文件就是用photoshop創(chuàng )建的，當然也必須用photoshop打開(kāi)； ai文件是Illustrator的。他們都是Adobe公司的。ai文件同樣也可以用photoshop打開(kāi)，但打開(kāi)后會(huì )載入在同一層內。 cdr文件是CorelDRAW的。 2.關(guān)于CMYK和RGB顏色模式 CMYK是Cyan（青）、Magenta（品紅）、Yellow（黃）、Black（黑），這是印刷上使用比較普遍的色彩模式。 R、G、B就是Red、Green、Blue（紅，綠，藍）三種顏色，RGB模式就是由這三種顏色為基色進(jìn)行疊加而模擬出大自然色彩的色彩組合模式。我們日常用的彩色電腦顯示器、彩色電視機等的色彩都使用這種模式。 3.矢量圖 矢量圖與位圖最大的區別是,它不受分辨率的影響。因此在印刷時(shí),可以任意放大或縮小圖形而不會(huì )影響出圖的清晰度 。 矢量圖：是根據幾何特性來(lái)繪制圖形，矢量可以是一個(gè)點(diǎn)或一條線(xiàn)，矢量圖只能靠軟件生成，文件占用內在空間較小，因為這種類(lèi)型的圖像文件包含獨立的分離圖像，可以自由無(wú)限制的重新組合。它的特點(diǎn)是放大后圖像不會(huì )失真，和分辨率無(wú)關(guān)，文件占用空間較小，適用于圖形設計、文字設計和一些標志設計、版式設計等。 ai cdr均為矢量圖。 4.圖片文件jpg，gif，png，bmp的區別 bmp：是未經(jīng)過(guò)壓縮的用點(diǎn)陣來(lái)表示的真彩圖片,占用磁盤(pán)空間較大 gif：是經(jīng)過(guò)壓縮的,只能表示256種顏色,占用磁盤(pán)空間小,常用來(lái)演示色彩單一的成塊的卡通圖案,GIF還有一種可以表示連續的動(dòng)畫(huà)。 png：是fireworks的圖片格式 jpg：也是有損壓縮格式但是它表示的顏色比較豐富,一般用來(lái)顯示真彩的照片或圖案。 5.名片的尺寸問(wèn)題 名片的標準尺寸：90mmX54mm。但是加上出血上下左右各2mm，所以在設計時(shí) 制作尺寸必須設定為：94 x 58mm。 6.源文件的提供問(wèn)題 作為設計者和客戶(hù)（這里指各站長(cháng)），如果事先沒(méi)有明文協(xié)議的話(huà) 設計者有權不提供源文件。 7.什么是logo，ci，vi VI是Visual Identity的縮寫(xiě)，中文譯為“企業(yè)視覺(jué)識別”。VI是CI計劃的靜態(tài)識別符號，是企業(yè)理念視覺(jué)化傳達的載體，因此它項目最多，效果最為直接。VI作為視覺(jué)識別，它是外在表現，固然需要具有美感，但VI必須是MI的體現，直接反映企業(yè)的理念。因此VI設計包含這樣一些原則：即充分傳達企業(yè)理念、人性原則、民族性原則、簡(jiǎn)潔抽象及動(dòng)態(tài)原則、員工參與原則、法律原則、藝術(shù)性原則和個(gè)性原則。 CI是Corporate Identity的縮寫(xiě)，中文譯為“企業(yè)形象”。CI計劃，是指企業(yè)有目的、有計劃、戰略性地創(chuàng )造出所希望的自身形象，由此提高企業(yè)的社會(huì )知名度，最終得到自己最適合的經(jīng)營(yíng)環(huán)境。 而logo只是網(wǎng)站或企業(yè)一個(gè)標志。
