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