9年網站建設經驗,寧波地區著名的網站建設公司!24小時咨詢熱線:137 3217 3747
   寧波總部  |  臺州  |  溫州  |  紹興
您的位置南粤36选7: >> 網站建設 >> 寧波網站建設 網絡營銷  |   寧波網站建設  |   網站優化  |   寧波網頁設計  |   我們觀點  |  
一點手機網站設計的經驗之談
作者://www.aeipo.com  來源:寧波網絡公司/寧波網站建設——三樂設計  發布時間:2013-10-29  閱讀次數:4243 【關閉本頁】

一般制作手機頁面設計根據手機屏幕分辨率來做效果圖

如:主流都是做480*800來測試,iphone4(或s)就用640*960 但這個都只是效果圖

真正開發切圖要用到點9來做屏幕

下載點9軟件 點9軟件_draw9patch


  用戶手中看到的產品界面,并非設計師嘔心瀝血創作的效果圖,而是一個個單獨的切圖經由開發同學技術實現。切圖作為設計師與開發者之間的橋梁,它的作用很關鍵,合適的切圖、精準的位置可以最大限度的還原效果圖的設計,精妙的切圖更會有事半功倍的效果哦!

  我們經?;嶙鲆桓鏊壯啤暗憔擰鋇那型?,什么是“點九”呢?“點九”是Android平臺處理圖片的一種特殊的形式,由于文件的擴展名為:“.9.png”,所以被稱為“點九”?!暗憔擰幣彩怯捎贏ndroid平臺多種分辨率需適配的需求下,發展出來的一種獨特的技術。它可以將圖片橫向和縱向隨意進行拉伸,而保留像素精細度、漸變質感和圓角的原大小,實現多分辨率下的完美顯示效果,同時減少不必要的圖片資源,可謂切圖利器。

  “點九”的制作工具為“draw9patch”,具體制作步驟這里不多講了,插播小貼士第一條:舍棄這個制作工具吧,減少繁瑣的步驟,不要再每張圖片都拖到工具里畫啦!直接用ps+鉛筆就可以畫哦。

  “點九”的學問當然很大,但Android切圖不僅需要清楚“點九”的方法,還有其他各種小技巧。下面為大家分享我在工作中總結的幾個關于切圖的心得。

  (一)站在開發的角度來切圖

  了解技術實現方式,就像了解一位開發同學,更多的了解,會讓工作更加順暢。

  如為下圖按鈕做“點九”圖,一部分同學可能會這樣做:



  這是一張高度不變左右拉伸的“點九”圖片,內容顯示區域為整個按鈕范圍。按鈕效果圖上看,文字是垂直居中顯示的,開發同學拿到這張“點九”圖片,就會在代碼里寫上center的屬性,此屬性就是設定讓文字在按鈕的垂直居中位置。說到這,有沒有察覺出問題呢?先讓我們看一下實現出來的效果怎么樣。



  擁有像素眼的設計師們,立刻會察覺文字偏下了。然后找開發同學調整文字的位置,“把文字向上n個像素吧,沒有居中”等等,這是很經常發生的對話,開發同學會增加代碼微調文字的位置以達到效果圖效果。事情圓滿解決了嗎?不然。其實是我們錯了。

  當我們了解開發同學實現方法后,我們可以試試用逆推法驗證這張“點九”圖片是否還有進一步精確的可能。



  如上圖,設計效果圖中紅色區域是文字排版區域,是理想化的位置,1和2的高度是相等的;而實現效果圖中3和4的高度是相等的。問題出現了!在我們畫點九的時候,把投影的高度也畫進去了,所以視覺上文字就偏下了。

  我們通常的畫法應該是:


  1. 在高度不拉伸的情況下,在空白區域點一像素的點。

  這是與開發同學之間約定俗成的習慣,憑著默契就知道此按鈕高度不進行拉伸,而且就是被拉伸了,拉伸的是空白區域,視覺上也不會造成影響。

  對比如圖所示:



  2. 內容顯示區域的高度要避開投影區域,這樣可以保證文字視覺的居中。

  “點九”圖片的內容顯示區域,我喜歡稱為內容排版區域。在切圖的過程中,還會發現不同的情景,要時刻想著你要的結果,通過對此區域的仔細處理,可以更好的為圖片上所承載的內容做排版。這樣開發同學只要通過一些簡單的屬性設定,就可以實現效果圖上精確的布局。同時減少不必要的開發,精簡代碼,提高產品的性能,積少成多,帶給用戶更好的體驗感受。

  (二)選擇更優的切圖方式

  當我們遇到異形或較為復雜的切圖時,往往需要拋開固有的思維程式,去找到更適合的切圖方式。舉例如為下圖浮層切圖的時候,我們還可以用我們的利器“點九”么?



  首先分析一下此浮層的幾個特點:一是半透明漸變有厚度又有投影的效果;二是有三角異形,而且位置不固定。在切圖的時候先走了一下小彎路,用固有思維把浮層分成了上下兩個部分,下面方形做成“點九”,上面三角形單獨一個切圖,用拼接的方式去實現。這是符合開發同學的原子拆分設計模式的,把會變化的部分取出并封裝起來,讓其他部分不受到影響。所以開發同學很快做好了實現,但效果不盡人意。我們其實可以預想得到,因為有投影效果上下拼接一定有重疊,這樣拼接處就會有一條明顯的線。

  那怎么辦呢?經過設計師的進一步思考,終于找到了一種更適合的切圖方式:



  左右分割成兩個“點九”圖片,這樣即能保證連接處的效果,又能靈活三角指向的位置。思考好如何切圖的同時也要跟技術同學溝通能否實現,衡量實現的成本。最后值得高興的是,實現出來的效果­跟設計效果圖沒有任何出入。

  (三)盡可能的減小資源的大小

  切圖的時候盡可能減小資源的大小,為產品安裝包瘦身。

  1.“點九”圖片拉伸1個像素與拉伸10個像素效果上是沒有區別的,所以盡量縮小圖片的尺寸。

  (在上面的例子當中,為了保持看得清楚,沒有縮小到最小情況,在實際工作中可以稍加注意。)

  2.當我們遇到有紋理的背景或有紋理的按鈕時,切圖原則為:找到紋理的規律,用最小的切圖去平鋪,可以想象中圖案疊加的原理。

  第一種紋理背景,如輸入法多媒體中隨寫輸入的界面,不同的信紙,我們就用了盡可能最小的切圖去平鋪而實現的。如下圖:



  這是我們輸入法中信紙的切圖,遵循用最小切圖的原則,按照不同紋理的規律調整到最小的切圖,所以可以看出不同紋理的切圖尺寸是不一樣的。

  第二種有紋理的按鈕,我們一般會這樣處理:



  我們的目標是把按鈕分成三段,保留左右圓角部分,找到中間紋理可復用平鋪的部分,同事確保中間紋理可以與左右兩張圖無縫連接,這樣按鈕的長度就變成可控的了,可以適用于不同的場景。

  首先找到紋理的規律,這里的斜線紋理只需切寬為3px的圖即可;然后用紋理圖片去嘗試左右圓角部分,連接到圓角部分的紋理就成功咯。遇到其他類型紋理切圖時,思路是可以復用的。

  3.適當壓縮圖片質量,在單色或沒有過多效果時可存儲為png8位或索引模式。

  這里就不做舉例了。

  小結

  設計師在提供設計規范后愁苦實現效果不盡如人意的同時,可以盡可能的利用一些切圖手段,幫助你的設計達到零差別的呈現,同時也幫助開發同學減少了很多不必要的開發負擔,對于產品本身也有提高運行速度等很多不言而喻的好處。讓設計師同學與我們親愛的開發同學成為更貼心更默契的合作伙伴吧!

  以上為工作中關于Android切圖的一點小經驗,如有錯誤或不足的地方請大家指正,同時歡迎大家分享更多的切圖經驗與技巧。

責任編輯:南粤36选7      

上一篇:手機網站綁定微信接口代碼asp版,php版  [2013-12-04] 下一篇:淘寶店鋪設計之導航CSS代碼使用修改技巧  [2013-08-08]

  相關文章
  網頁設計師,程序員都能用到的js判斷文本,單… [2012-12-12]   寧波某獵頭網站策劃方案 [2012-12-17]
  網站建設中JS單選,多選框,文本框控制 [2012-12-19]   三樂設計網絡公司管理員淺談服務器.NET偽靜… [2013-03-25]
  淘寶店鋪設計之導航CSS代碼使用修改技巧 [2013-08-08]   手機網站綁定微信接口代碼asp版,php版 [2013-12-04]
  微信接口完整代碼php版 [2013-12-04]   程序員考慮的WampServer修改默認web根目錄實… [2013-12-06]
  網絡營銷  
  設計當中的OPP卡頭袋的設計…
  2014年1月21日大量網站域名…
  2014年1月百度更新新版首頁…
  寧波網站建設淺談微信5.0正…
  微信公眾平臺開發api消息接…
  360搜索之360百科服務啟用…
  雅虎新版主頁支持主流各大…
  寧波網站建設  
  程序員考慮的WampServer修…
  微信接口完整代碼php版
  手機網站綁定微信接口代碼…
  一點手機網站設計的經驗之…
  淘寶店鋪設計之導航CSS代碼…
  三樂設計網絡公司管理員淺…
  網站建設中JS單選,多選框…
  網站優化  
  淺談寧波網站建設中的微信…
  優化網站必須設計404錯誤頁…
  揭秘最新百度更新規律
  SEO排名步驟
  體驗SEO內部優化結構的方法…
  揭秘網站天天被收錄的3大招…
  企業網站中適合應用h1,h2,…
  寧波網頁設計  
  怎么解決手機網站微信內置…
  手機網站建設時如何判斷微…
  設計師的福音快速瀏覽全球…
  寧波某家俬網上商城網站設…
  浙江大學寧波理工學院文明…
  工商銀行滿意度有獎調查問…
  清潔機器人iRobot網站設計…
{ganrao}