• 未分類
  • 平面理論教程
  • Flash教程
  • 其他作品
  • 標誌設計
  • 海報招貼
  • 包裝設計
  • 畫冊設計
  • 網頁設計
  • 名片設計
  • PS作品
  • CG設計
  • MAYA教程
  • Illustrator教程
  • AutoCAD教程
  • 3DMAX教程
  • Painter教程
  • 繪畫教程
  • FireWorks教程
  • 攝影教程
  • 工業設計
  • 網頁設計教程
  • 其他資訊
  • 摺紙大全




  • [ 網頁設計教程 ] 由黃鑽等級圖標處理引發的思考—- 其他教程




    教學主題: 由黃鑽等級圖標處理引發的思考

    大家好!! 小編今天來和大家分享關於 其他教程中的網頁設計教程教學

    今天的這個教學主題是: 由黃鑽等級圖標處理引發的思考

    這教學的重點為這幾點 [ 引發,思考,處理,圖標,等級,方式,圖片,應用,定義,代碼, ]

    希望你可以從這幾點中領悟到修圖的精華

    本文重點

    最近在處理Qzone黃鑽圖標更新時,想起近期對業務圖標進行優化所遇到的一些問題,把思緒收拾起來和大家一共探討,歡迎多方聲音。

    由黃鑽等級圖標處理引發的思考

    最近在處理Qzone黃鑽圖標更新時,想起近期對業務圖標進行優化所遇到的一些問題,把思緒收拾起來和大家一共探討,歡迎多方聲音。

    在實際工作中,圖標類的應用非常廣泛,如同數組般的等級圖標更顯其特殊性。下面要共同探討的兩個方向,以什麼方式實現及怎麼更好在貼近項目實際更好地實現並供應用。

    假設:業務的用戶等級共有10個,加上大小2種視覺尺寸的圖標,還有“過期未續費用戶”的表現,共有38個圖標需要入庫供調用(如下圖)。

    由黃鑽等級圖標處理引發的思考

    在項目的CSS框架研發中,會有幾個key作為考慮:請求數、代碼量、兼容性、圖片文件大小、是否可並為組件模塊且方便邏輯性實現。

    眾多不同等級的圖標在不同方式的廣泛應用時,是否會產生過多的文件請求;

    等級圖標的代碼在實現上是否會使用過多的代碼,且頁面上真實應用的只是少量代碼,從而造成代碼臃腫;

    (x)html+css輸出的圖標應用到頁面中,是否和頁面上其它元素兼容,否則將為達到兼容目標而增加一系列代碼;

    如果各圖標合併后,權衡項目應用的實際情況,圖象文件是否會過大而消耗帶寬;

    圖標的HTML固定,className命名中的某個數字命為作為變量,通過修改變量來達到表現效果。

    回顧之前的出現的處理方式,可以歸總為三種:

    前景圖的插入

    這應是最原始的處理方式了,將眾多單個等級的圖片有序命名存放到一個目錄,由前端頁面應用,通過修改文件名的方式更換不同的等級顯示。在實際的用戶列表頁面中,因為不同的用戶通屬不同的等級,那麼,就會顯示不販等級圖標,如上面假設,就會同時產生38個請求。且在項目的維護上,極易存在瓶頸。假設根據需目需要對圖標文件更換存放目錄或更改其尺寸大小,那麼需要大面積對所有應用過的開發 template文件排查處理(更改URL,寬高定義,文件名等),很多情況難以維繫在可控範圍。

    透明圖+背景的實現

    這是Qzone項目中使用最多的一種方式,在項目的訪問速度體驗優化及圖標實際應用中起到不可磨滅的作用,該方式後期也陸續為國內外其它網站使用。其具體實現方式是,保存一張1*1像素的透明圖片,並將其設置長時間cache,因其display屬性的特殊性,圖片在頁面布局上得心應手,且解決了多請求的問題,同時解決圖片合併區域擴展維護的問題。但是,一旦在客戶端cache文件隊列中被擠掉,cache失敗,該方式容易讓這張透明的前景替位圖產生洪水式的請求, 造成服務器壓力和大流量。且《img /》容易繼承項目中其它定義。在圖標與文字的垂直對齊上各瀏覽器的渲染解析不一樣,從而增加一些兼容代碼。

    也有衍生出來空src的處理方式,如《img src=”“ class=”app_icon” alt=”圖示” width=”463″ height=”197″ src=”/uploads/allimg/091118/2329112N6-2.png” />

    內容標籤+背景

    這裡說的是帶文字等內容的標籤加入黃鑽等級圖標背景來實現,如《span》我是黃鑽7級用戶《/span》,給span的左邊定義一個圖標,把文字向右移動一定的位置。大夥在實踐中驗證,這種在語義上和實現上,可以說是完美的了。但是,不方便項目代碼的規劃和管理,特別像等級圖片這類的可以歸入庫的代碼及應用方式。同時,標題的大小區域為不可控,在後續的維護中,更會不定期更改其區域大小,那麼,就在圖片的合併上存在瓶頸,難以確定一個圖片該預留多大的透明區域,使之不影響到其它場景的圖片應用,也可能會因為後期的維護處理不當,影響到其它標籤區域的背景顯示異常,造成不良的用戶體驗。

    由黃鑽等級圖標處理引發的思考

    標籤載體+背景

    結合前幾點所述,用一個標籤作為圖片的載體,再給它定義背景等屬性,顯示出相應的圖標。它既可以免除用圖片處理產生的流量和請求及服務器壓力,又減去合併圖片時所考慮的預留空間尺寸。一般標籤不具img的特殊屬性,既能成塊狀顯示出圖標,又能和文字等共處一行內,那麼在選取的這個標籤要在樣式上定義得較少,不易繼承樣式影響表現,破壞頁面的兼容和庫文件的管理維護。

    在實際項目中,選用了strong作為圖標的替代標籤:

    由黃鑽等級圖標處理引發的思考

    回顧完各種處理方式后,一起來了解一下實現上的細節,分析一下文章第一張圖所示,共有38個圖標,且都是圖形化,原始想法是,把38個圖合併成一個文件。但細心看,這38個圖片,有好多的相同的圖形,經過整理后,得到下面這張圖:

    由黃鑽等級圖標處理引發的思考

    除四個圖標載體外,數字都是相同的,因為這裡使用的是第四種處理方式,那麼在圖標的合併上,不用給各小圖片塊預留過多的透明區域。

    雪碧圖處理好以後,就可以着手寫代碼來實現效果了。

    <strong class="gb_vip_1"><span><span>lv1</span></span></strong>

    <strong class="gb_vip_2"><span><span>lv2</span></span></strong>

    討論:http://www.missyuan.com/viewthread.php?tid=430364

    為了讓標籤具有img的特有屬性,給strong定義display:-moz-inline-stack;display:inline-block;

    因各瀏覽器兼容性的原因,需要定義了兩個屬性,這裡不禁一定要問了,為什麼不選用-moz-inline-box呢?這裡選用-moz-inline-stack而非-moz-inline-box的原因是:

    使用-moz-inline-stack可以解決Firefox2不支持inline-block的問題,但是所有的Firefox版本對於屬性為-moz-inline-stack的Element,它的First child element會繼承該Element的寬度和高度,但是再下一級的Element不會再繼承該屬性。

    這裡說說一下與本圖標應用無關的話題,在實際應用中-moz-inline-box會存在元素間的對齊等問題,在處理自適應寬的《button》就能遇到。雖然Firefox有一個私有屬性-moz-box-align來幫助解決Element水平對齊問題,但未能預見的問題依舊不少,而相對來說-moz-inline-stack的表現更像inline-block,這點可以在Firefox3中驗證出來。僅管如此,-moz-inline-stack使用時也會有一個bug,如果一個moz-inline-stack的Element外層Element是inline屬性就會使Firefox中其包含的鏈接不可點(和IE6的filter+position:absolute出現的BUG一樣),這個可以藉助position:relative;來解決。

    設置完display屬性后,我們就給圖標定義寬高。實際的圖標處理中,完成這兩步基本就OK了。但是這個圖標應用較為特殊,因為它是兩個背景合成一個圖標的(載體+等級數),如下圖:

    由黃鑽等級圖標處理引發的思考

    下面是兩個載體的拼合示意:

    由黃鑽等級圖標處理引發的思考

    所以在結構上加多了兩個span,一個是給等級數字的背景載體,另一個是隱藏圖標替換文字。

    代碼寫完后,發現代碼量相當的驚人,因為只在最外層定義不同的className,那麼,就意味着,我們要對眾多個類及其裡面的標題定義:

    .gb_vip_1 span,

    .gb_vip_2 span,

    .gb_vip_3 span,

    .gb_vip_4 span,

    .gb_vip_5 span,

    .gb_vip_6 span,

    .gb_vip_7 span

    這樣代碼就相當臃腫,於是,改變className的定義方式,給各個等級圖標最外層容器定義相同的命名,給裡面數字的載體定義區別顯示的命名(帶數字的命名是方便邏輯實現):

    <strong class="gb_vip_icon"><span class="lv1"><spanclass="gb_vip_none">lv1</span></span></strong>

    <strong class="gb_vip_icon"><span class="lv2"><spanclass="gb_vip_none">lv2</span></span></strong>

    以上所述的供討論和參考,期盼大夥一些其它的想法和分享。

    看完小編分享的教學之後 是不是對網頁設計教程中的其他教程教學更熟悉了呢?

    希望我們所介紹的 由黃鑽等級圖標處理引發的思考 這教學會喜歡

    文章標題: 骨子愛創意- 由黃鑽等級圖標處理引發的思考–轉載請註明來源處

    本教學分類為網頁設計教程中的 其他教程相關教學

    文章相關關鍵字為: 引發,思考,處理,圖標,等級,方式,圖片,應用,定義,代碼,

    本文永久連結 :由黃鑽等級圖標處理引發的思考

    本文轉載自 :VIA