DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> 網頁制作心得:如何提高設計的效率
網頁制作心得:如何提高設計的效率
編輯:關於網頁技巧     

網頁制作poluoluo文章簡介:哪些方面影響了網頁設計效率?

當下的網站已經拋棄了以前那種什麼都放的設計形式,人們追求更多的效率,希望訪問者針對性更強,內容更專業,本文就是一篇介紹如何提高設計的效率,首先需要介紹一下什麼是效率!

(一)過度設計和應用泛濫

web1.0時代,由於客戶的願望和其本身提供的信息資源的匮乏,彌漫著“過度設計”。大型門戶更是如此,密密麻麻得首頁、2位數的頻道導航,造就了大型門戶網站在感官上的特性——雜亂。而更有跟風者,以模擬“雜亂”為手段,達成看上去就象大型門戶網站的用戶感受。

web2.0時代,SNS、插件應用、推薦、相關信息的泛濫,有形成另一個“應用泛濫”;而這些應用有時候不得不有,不捨得放棄,最終形成SNS門戶,比如上線時間不太久的“掏江湖”,也未能擺脫“應用泛濫”的窠臼。

垂直分類門戶,分類鏈接的利用率遠大於關鍵字搜索,就不得不充斥著密密麻麻的鏈接,早已老化的阿裡巴巴,就是如此。B2C商城,也是如此。

而一些另類的淘寶店主,卻因經營著本來就不多的東西,而把頁面做的簡單醒目。因為他們通過實踐,知道怎末做能帶來更多的銷量,也就達到效率。

(二)什麼叫經濟,就是花最小的投入,達到最大的效果。

對於網站設計來說,效率從以下幾方面處理:

(1)首頁

你看大多數網站的首頁,會看一屏往下的內容後,再點其他鏈接嗎?毋庸置疑,在越來越浮躁的時代,用戶操作越來越迅捷,打開首頁後請給我5秒鐘做出一個點擊鏈接的判斷和繼續往下訪問的理由,否則我將失卻耐心。

首頁超過1.5屏的內容,往往80%用戶不去關注,白白浪費帶寬。而你的首頁往往會超過3屏,也就是說,用戶下載你的首頁原本只需要一半的時間,你卻給了他另一半他根本不看的內容。中國的網絡遠遠處於垃圾階段,在中國才有迅雷、網游加速器這種東西的生存土壤。你的首頁的下載時間是多麼寶貴啊,你卻浪費了。

(2)圓角裝飾和直角裝飾

圓角裝飾看上去比較潤滑,是因為相比而言,直角是兩條成90度的線相交,在四維判斷上用戶要通過兩個方向來判斷,造成一種感官困擾。而圓角是兩條成90度的線的國過渡,視覺判斷上是一種緩和。對於女性來講,方向感更差,所以她們是不得不“喜愛”圓角這種平滑過渡的。

在把所有的裝飾圖片用CSS做成背景後,一次下載多次使用,提高了效率。在HTML5普及之前,仍舊是需要用圖片來形成圓角裝飾的,當然不排除用CSS、濾鏡、JS的一些hack技巧去模擬圓角,但這些都是“奇淫巧技”。

再說一下,工業設計的先驅——包豪斯,起源於二戰前的德國,後因戰爭轉移到美國而成為當今工業設計的發祥地。看看二戰德國的坦克跟當今先進的坦克在外形設計上時不分高下的。

IT其實是工業、也只有在工業設計成熟後,在能有IT的制作基礎。工業就講究一個直白,把多余的雜質去掉,直接調直一條線,這就提高了效率。而浏覽器的實現,也是這樣,它是基於“塊體”的,換句話說浏覽器的呈現是遵循縱橫鏈各坐標軸的,而圓角和斜線是不符合浏覽器的工業設計規則的。當然有插件和一些其他的矢量語言來彌補,但要想提高效率,就要遵循浏覽器的工業設計規則——塊體結構。

那麼扔掉圓角裝飾吧,即便是有了HTML5,也沒有比一個方框更有效率的渲染呈現方式了。去掉圓角,直接用CSS做個方框,效率多高啊。

(3)內容為王

什麼是一個好的網站設計呢?

把樣式表、裝飾圖片都去掉,剩下實體的可選中的文字、圖片、多媒體對象後,仍舊是一個很吸引人,這才是一個好站——內容為王。

反過來說,就是把原來的設計順序改一下,先把內容排好,然後組織規劃成一套有層級的浏覽體系——這就是極簡設計。這樣的話,你的每一頁,都省掉了無用的信息和裝飾,既提高了下載效率,又減少了用戶選擇上的困擾,還把你的主旨瞬間傳達給用戶。這是一舉多得的事。

看過很多設計,都是為了裝飾而裝飾。這裡空,就得加個圖片,布局沒占滿,就加個友情鏈接。欄目塊標題前是不加裝飾不罷休的,韓國棒子就這麼做,咱就給棒子學嗎?裝飾不是不可以加,總得說出個有價值的目的來吧,比如突出標題,完全可以用CSS來控制文字,干嘛要把文字做成圖片呢?比如注冊頁面空,是需要加個圖片來吸引新用戶的,這也說的過去。

總之,加裝飾,請給我個理由,需要嗎?不需要嗎?

對於網站來說,效率為王、功能為王、內容為王、用戶為王,而裝飾在王者面前就要屈尊。

還有很多雜事,比如同樣面積大小、同樣文件格式的亮調圖片,就比暗調圖片來的K數小,下載快,所以大圖片用白背景、網頁用亮調白紙黑字是永遠的主題——效率啊,效率。

要說的話,講三天講不完,就此打住。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved