移動網頁設計原則
現在的互聯網,是一個用戶體驗至上的時代,大多數公司都會把如何提高產品的易用性放在首要位置,那麼移動網頁設計應該遵循哪些原則呢,一起來看看!
1. 簡約而不簡單
Win8和iOS7的出現,將互聯網行業中很多產品設計帶回到原點,或許更是另一個新的起點。Win8的Metro UI、iOS7中圖標的扁平化設計、一直崇尚簡約的豆瓣網、還有頂着時代工匠稱號的老羅所設計的錘子ROM,無一不體現着簡約的風格。
言歸正傳,回到我們圖片優化的主題上。在產品設計和UI設計階段,除了內容圖片,其他的圖片都是起修飾的作用。也就是對於傳遞信息來說並非本質性的。所以最大的優化就是不要圖片。在進入到研發階段之前,就要確認設計,設計本身是否需要用到那麼多的圖片,還是說可以做到更簡潔!
2. 樣式代替圖片
Chrome,FF等瀏覽器廠商爲互聯網的發展做了這麼多貢獻,爲什麼我們還要讓那些不兼容CSS3的瀏覽器阻礙互聯網的發展呢。因此,讓我們直接使用CSS樣式代替圖片來實現修飾效果!例如:半透明、圓角、陰影、高光、漸變等。這些效果主流的.瀏覽器都能夠完美支持,而對於那些低端瀏覽器,我們並不會完全拋棄他們,“漸進增強”則是一個很好的解決方案。至於什麼是漸進增強,這裏不再用過多篇幅去解釋,如果感興趣可以參考CSS“漸進增強”在web製作中常見應用舉例。
3. 選擇最合適的圖片
我們常見的圖片格式有JPEG、GIF、PNG。
基本上,內容圖片多爲照片之類或圖片構成較複雜的情況,適用於JPEG。如網站中的Banner圖、輪播圖、大尺寸背景圖等。
修飾圖片通常更適合用無損壓縮的PNG。而我們主要用到的PNG圖片又分爲PNG-8和PNG-24兩種,PNG-8格式不支持半透明,也是IE6兼容的圖片存儲方式。如果對圖片質量要求較高的半透明或全透明背景,保存成PNG-24更合適。有時候會遇到在IE6下應用PNG-24圖片的情況,關於IE6下PNG Alpha透明的解決方案可以參考IE6中PNG Alpha透明。我在項目中常用的方法是AlphaImageLoader篩選器。
GIF基本上除了GIF動畫外不要使用。
除了這些格式之外,Chrome、新版Opera、Android 4+支持WebP格式,IE 9+、IE mobile 10+支持JPEG XR。這兩個新格式都支持無損和有損壓縮,都具有更良好的壓縮比。當然這需要爲不同的瀏覽器返回不同的圖片,增加了開發成本,也增加存儲成本。不過你省了流量或者相同流量下改善了圖片質量,提升了用戶體驗。這就需要根據項目需求進行取捨了。
4. 常用的圖片優化技巧
CSS Sprites,將同類型的圖標或按鈕等背景圖合到一張大圖中,減少頁面請求。
Icon Font,將圖標做成字體文件。優點是圖標支持多個尺寸,兼容所有瀏覽器,減少頁面請求等。美中不足的是隻支持純色的icon。
SVG,對於絕大多數圖案、圖標等,矢量圖更小,且可縮放而無需生成多套圖。現在主流瀏覽器都支持SVG了,所以可放心使用!
圖片壓縮工具,可以在圖片上線前使用壓縮工具進行壓縮,獲得更高的壓縮比。我常用的壓縮工具爲Yahoo的。
-
委託設計協議書參考
篇一:委託設計協議書甲方:乙方:爲了加強企業間的合作關係,促進企業間的共同發展,甲乙雙方本着誠實守信、互惠互利的原則,經友好協商,依據《中華人民共和國合同法》和有關法規的規定,乙方接受甲方的委託,就委託設計事項,雙方經協商一致,簽訂本合同,信守執行。成如下協議:第一...
-
計算機仿真技術在橋樑工程中的應用論文
摘要:以某個辦公設備批發中心爲背景,從實際工作出發,通過對公司日常工作的詳細調查,蒐集了大量的資料,在分析目前本單位的商品銷售、庫存等問題的基礎上,從系統結構的組織、功能的實現、技術的要求及可行性等多方面進行考慮,結合管理信息系統開發的概念、結構及系統...
-
小班體育遊戲活動設計《過小橋,送水果》
活動目標:1、培養幼兒敢於嘗試及克服困難的良好品質。2、發展幼兒的平衡能力及動作的.協調性。3、幼兒學習頭頂沙袋走各種類型的橋。活動準備:1、音樂:小熊翻過山2、沙包若干、平衡木2根活動進程:一、導入1、聽音樂做熱身活動。2、出示沙包,引出遊戲。二、展開1、讓...
-
網頁設計的6條配色原則
網站的配色對內容而言就像衣服對於人的重要性,對此你必須制定一套完美的並且合身的衣服。下面小編爲大家整理了網頁設計的6條配色原則,希望能幫到大家!1、需要配色的是畫布,而不是你的圖片一個在網頁設計中最根本的原則是,無論你花了多少時間創造了一個輝煌的設計,...