添加到百度首頁
添加收藏 RSS 網站地圖 舊版網站
  • 全部
  • 網頁特效
  • 建站教程
  • 設計分享
當前位置:首頁 > 設計分享 >

移動端產品UI設計切圖知識必備

時間:2013-12-03      來源:互聯網     

  目前,移動端的UI設計已經引領網頁設計的發展,但是它不像網頁設計那么純粹,還需要設計師們精心的揣摩其中的內涵。那么,在移動端UI設計產品時,一個完整的項目有幾個至關重要的點,這篇文章,我們就來詳細的講解一下其中的一個,移動端UI設計的切圖。

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

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

  使用Photoshop繪制點九的方法:

  確定切圖后直接改變圖片的畫布大小,手動將上下左右各增加1px,使用鉛筆工具,手動繪制拉伸區域,色值必須為黑色(#000000)。存儲為web所用格式,選擇png-24,儲存時手動將后綴名改為.9.png。不過這種方法的缺點是不能實時預覽,判斷并測試拉伸區域的準確性。

  使用此方法需要注意以下2點:

  1、手繪的黑線拉伸區必須是#000000,透明度100%,并且圖像四邊不能出現半透明像素;

  2、你的.9.png必須繪有拉伸區域的黑線。

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

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

  一、從開發的角度來切圖

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

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

移動端產品UI設計切圖知識必備
 

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

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

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

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

移動端產品UI設計切圖知識必備

 

移動端產品UI設計切圖知識必備
 

  我們通常的畫法應該是:

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

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

  對比如圖所示:
 

移動端產品UI設計切圖知識必備
 

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

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

  二、選擇更優的切圖方式

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

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

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

移動端產品UI設計切圖知識必備
 

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

  三、盡可能的減小資源的大小

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

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

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

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

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

移動端產品UI設計切圖知識必備
 

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

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

移動端產品UI設計切圖知識必備
 

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

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

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

  小結

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

  以上就是關于移動產品UI設計的切圖常識設計分享,希望對設計師們在UI切圖時給予一定的幫助。更多的網頁設計知識詳見:www.wiwgwy.live

web前端視頻教程
標簽 網頁設計
相關文章
web前端視頻教程


最新更新

網頁特效

web前端視頻教程
彩票中奖指 陕西十一选五手机助手 山东11选5任选2技巧 股票融资和质押 葡京赌场 喜乐彩票网址 血色黑金 赚钱 qq分分彩官网走势图 中国福利彩票双色球开奖公告 复式在线过滤工具 扑克牌100种玩法大全 006期波叔特码 11月8日七星彩走势图 如何买股票指数 南京有中彩票大奖的吗 在线棋牌游戏排行榜 福彩赚钱吗