[ 平面理論教程 ] 詳細解析移動端設計開發經驗之設計篇- 其他教程 - 骨子愛創意

教學主題: 詳細解析移動端設計開發經驗之設計篇

大家好!! 小編今天來和大家分享關於 其他教程中的平面理論教程教學

今天的這個教學主題是: 詳細解析移動端設計開發經驗之設計篇

這教學的重點為這幾點 [ 經驗,設計,移動,解析,詳細,我們,可以,分辨率,這個,安卓 ]

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

本文重點

不管你的最愛是fireworks 還是photoshop還是illustrator或者是其它。都沒關係。打開你最喜歡的一個，開始我們客戶端的設計吧。

在這一篇文里，要給大家奉獻各種乾貨。相信作為設計師的我們，肯定會非常非常感興趣滴。想了很久，弄什麼地方入手呢? ok! 我們打開電腦，開始工作，那麼除了qq還有郵箱，那麼我們最愛的軟件，肯定是下邊這些啦：

好，不管你的最愛是fireworks 還是photoshop還是illustrator或者是其它。都沒關係。打開你最喜歡的一個，開始我們客戶端的設計吧。

一、開始我們的第一步

因為現在移動客戶端大行其道，相信會有很多從web轉過來的從事客戶端設計的同學，也許大家會覺得，我web頁面設計妥妥的，客戶端設計肯定沒有任何問題，你看你看，手機上的界面比那些複雜的web頁可簡單多了，不就是幾個條條框框幾個按鈕嗎? 小case! 這個時候，你身邊的ui設計師估計在心中默默的吐槽了，“哼哼哼，那你就來試試吧!” 好吧，不管霸王洗髮水可以讓成龍的頭髮有多飄逸，我們一定要試試，確定那個不是特效堆出來的。

打開熟悉的ps或fw，新建畫布。額，寬多少，高多少，分辨率多少啊?好，先從你身邊的手機開始吧。這裡以iphone為例，iphone5的分辨率是640-1136，iphone4的話，640-960。 自己的手機分辨率多少，就建個多少的畫布吧，分辨率保持軟件默認就好。

一張畫布建好了。好，我們現在可以開始設計了。在這裡，還要跟大家嘮叨一點。看看你手機的最上端，黑色的狀態欄(就是手機上顯示時間信號的東西了嗎?)，為了我們能在手機上預覽時剛好佔滿整個屏幕，所以這個條條在大部分情況下，需要包含到設計稿中。iphone下，這個條(Status Bar)的高度為40px。我們先畫一個高40的條放上去，然後呢，一堆的細節，按照下圖的高度先畫到畫布里吧(注意，下圖是3GS的分辨率哦，所以高度及寬度全部要乘以2)，這個對於大家實在是太簡單了，注意分辨率就可以了。這個時候你可以用之前介紹的神器 PS play在手機上預覽一下。 框架搞好，剩下的就可以開始設計了。

二、Web設計與客戶端設計的異同點

第一步絮叨了好多，但其實對大家來說這些其實是真心太簡單了對吧。對於如何設計，如何配色，相信各位專業的同學都不會有問題的，所以我們也不打算在這裡教大家如何來做這些了。 那麼，下邊主要探討下web設計和客戶端設計的異同點。

1、字體選用

字體是基礎。在網頁上，我們使用最多的可能是宋體，或者微軟雅黑。那麼，為了讓客戶端設計稿有較高的還原度，這裡雅黑或者神馬宋體就會弱爆了，這些字體並不適合手機屏幕來顯示。 這裡直接為大家推薦字體。

IOS： 請直接選用冬青黑體或者華文黑體即可，推薦使用冬青黑體，效果更好。

Android：Droid Sans Fallback(其實冬青黑或者華文黑也可以考慮啦)

手機上字體的顯示一般都會做字體的抗鋸齒處理，那我們在設計稿里也來做相應的設置吧(這裡我們不考慮極低分辨率使用像素字體顯示的情況)

至於字體使用多大號的，我們這裡沒有太嚴格規定，但有一點必須要做，設計完后，一定要導入手機上看真實效果具體感受一下，因為在電腦屏幕上和手機上看，感受是完全不一樣的，畢竟我們是來設計手機的應用。

2、細節為王

細節?對，在web端，由於我們的瀏覽介質是顯示器，加上顯示器分辨率及之前的設計習慣，所以有時候我們可以不用太注重一個像素的移位等等的問題，但對於手機，可就完全不一樣了，不知道各位同學有木有類似的感受，拿着設計web頁的趕腳做了一頁移動端設計稿，導入手機上之後發現這完全是慘不忍睹啊，欲哭無淚有木有。

所以，如果你是大大咧咧風格粗獷的設計師，那現在就要加倍細心了，你的粗心和粗狂的風格會在手機上成倍的放大放大再放大，比如發光比如投影比如字體一像素投影等等效果，這可不是時尚大氣國際化哦，這是丑。當然，這個感覺是需要一定時間才能找到的，唯一的捷徑就是多在手機上預覽效果圖，多研究其它應用的細節。有時間可以嘗試畫畫圖標，這是個細緻活。

3、簡單易用是主旨

由於手機屏幕的限制，雖然現在分辨率高和精度特別高的手機不少，但我自己的經驗，如果手機一個屏幕羅列太多的功能及操作以及元素，那這個設計及其可能是一個失敗的設計。某人說過，少即是多。其實，要做減法真的不容易。這個是我們設計思路的一個轉變的過程。

舉例:

比如，tab bar上的文字。 能寫兩個就不要寫四個。 我的賬戶，我們可以簡化成”賬戶”。

再比如。按鈕，我們能放兩個按鈕，絕不放三個或者四個(選擇恐懼症這個你懂的)，以下是反例。猶豫5秒，你還不知道要點哪個么?

再再比如:相對於web頁，我們不可能把所有內容都塞到手機的一屏，所以，主旨是一個屏幕中，我們需要讓使用者完成一項或者一類功能即可。更多的功能可以通過跳頁，彈層以及其他交互形式完成。

這裡再嘮叨一個小細節，ios開發中規定，按鈕(可點按區域)的高度最好不要小於44px。所以，最好不要做太小的按鈕，這樣使用者會抓狂的。

4、分辨率適配

誒，想到這個就頭疼啊頭疼。上邊我們做了個效果圖，沒錯按iphone分辨率來的。網頁要適配分辨率。手機還要適配，而且。非常麻煩啊有木有啊。我們來看下圖:主流手機分辨率統計(我們假設屏幕dpi是一樣的情況下。

為了方便觀察我們列表如下:

第一列為分辨率，第二列為寬高比，第三列為寬除以高的數字，第四列是備註啦(根據我們現有的測試機來統計的情況)

為什麼要統計個呢。我們可以回到本文開頭，這個情況下，我們是否在糾結，設計稿用哪種尺寸做呢?難道有這麼多分辨率我們就要做這麼多設計稿嗎?這是要逆天啊!!!恩，一想到這個問題就無比混亂。

好吧我們先把最好弄的iphone說完。 iphone有三種分辨率320-480，640-960，640-1136。分別對應3GS，ip4，ip5。 再往細了看，ip最終只有兩種，一種3gs一種ip4和ip5。 分析完感慨一下。apple多為廣大開發者設計者考慮啊。 ip4適配ip5簡直太簡單了，因為寬度是不變的啊。

所以，在做ios開發時，我們可以選一種較大分辨率來做設計稿640-960或640-1136就好(取決於你的測試機)，這樣從大分辨率縮小到小分辨率就很easy了。 直接縮小百分之50就好了，妥妥的。

至於剩下的(我們這裡只考慮安卓，wp等先忽略)，那就是廣大的安卓兄弟了，你會發現安卓的分辨率是多麼的獨特多麼的百花齊放啊(有沒有想哭的趕腳啊?) 有同學問了，我現在只要做安卓的應用，用哪個尺寸做設計稿捏? 額。 我這裡推薦480-800吧。 如果安卓和ip一起開發的，我建議使用ip的分辨率來做，這樣直接從640寬等比縮就可以了。

綜上，優先設計ip分辨率尺寸640-960或640-1136。宗旨是從大往小縮。(原因?設計師都懂，有一次同事問我，能不能把一張50-50的小的照片放大到5000-5000，我回復，去屎。。。。)

這裡有同學會問了，安卓的適配還是沒解決啊沒解決? 我們再看一下上表，分析下數字。 第三列，看比值。 從0。56-0。75 都有。 但。相同的比值呢? 0。56這個最多。 還有0。6 及0。66， 以及0。75 。 (魅族這種奇葩屏幕不多解釋，需要單獨適配。刨除smartbar后比值為0。63，小胖子一個)。這裡就要引出屏幕精度的問題了。 安卓的適配，最終可以歸納為適配四種精度，說白了，如果要達到完美的效果，需要做四套圖。

有安卓開發經驗的同學可能知道。這四種適配。看下圖。

*本表來自 《photoshop智能手機app界面設計》

根據實際開發經驗，有時候為了省事，我們可以只來做第三欄，就是highdensity這個尺寸的適配，但最終效果並不能保證所有手機都會滿意。這個需要你和程序員同學達成默契。告訴他我是按照high density做的圖哈。這個時候他們就不會把你切的圖扔到其他文件夾，導致實際效果圖片不是超大就是超小。

回想起我剛做安卓設計的時候，偷懶，按照640-960分辨率來作圖，切圖，直接給安卓開發工程師，這個時候工程師默認把圖片適配了high density。 結果就是，在手機里看所有的東西都大一號。 同樣的情況，如果用低分的圖適應高分的，整個程序就會一片模糊。

所以根據實際經驗來看，使用480-800這樣的分辨率來切圖和適配是比較合適的。 一方面，低分辨率的屏幕現在越來越少了，另一方面，其實效果並不會太過分。 可是，另一方面，extra high這樣的分辨率是當前這階段不能不再考慮的了。因為高分屏幕越來越多，1920-1080分辨率的手機也已經有了，為了保證效果，我們需要適配某些主流的分辨率和機型。 比如魅族mx2， note2 。 也就是說我們要提供部分特別影響視覺效果的圖來適配。舉例:閃屏圖片(不適配可能變模糊或者拉伸)，特別影響布局的圖片(不做適配布局會亂套)

總之，在開發成本和效率上，我們要做出一些兼顧。 因為所有圖片要切四套，適配成本及工作量就太大了，值不值得，各位自行考量，這裡只提供本人開發過程中的一些考慮因素。

總結:在安卓iphone同時開發的情況下(又是同一個團隊設計師又比較苦逼)，我們可以優先做出iphone的界面，因為640-960已經可以滿足安卓最高適配的要求啦。 (安卓後期與iphone不同的交互及表現形式可以單獨處理，想省事，直接套iPhone，請專業人士不要踢我。)

三、切圖

因為這篇文的主旨是告訴大家操作方法和思路，對於ui如何呈現，請大家多看看網上的優秀案例，這個設計的細節實在太多。所以這裡省略過去。各大素材網站有很多的ui素材可以參考。

設計過程中我們可以用流程篇中提到的神器來提高設計效率。這裡不多講。

設計稿完成並確認后，我們需要切圖，ohno!這又是一個及其瑣碎的工作。

1、如果你不知道某部分怎麼切，請務必在切圖前與工程師溝通。與他們進行詳細的商討，一般情況下他們很願意為你答疑解惑。(嗯嗯，嫁了吧!)

2、開切

相信大部分細節我們已經和工程師溝通過了。 這裡我們主要提幾個要點。

(1)iOS切圖相對容易，並且交互效果實現較簡單，這也是我最願意做ios切圖和開發的原因。 在切圖過程中需要切兩套圖來適配。建議先切一套大圖，適配ip4ip5或者高分屏ipad。 文件名自便，後邊加@2x字樣，圖片格式png。(當然某些圖jpg也可以，但png優勢明顯，所以都png吧)。

切完適配高分ip的圖后。就是一堆@2x這樣的png圖片啦。然後呢，教大家一個非常方便的做法來做縮小2倍的圖片。

這裡推薦firework這個神器。我們使用批處理工具。 選擇file>batch Process。

選擇所有@2x的圖片。 add到下面的框中。 next。

選擇scale 加入到右邊的框，然後選擇，scaleto Percentage 選50%，也就是縮小到原圖的一半。

然後將export同樣加入右側，選擇導出格式 png。 然後我們選 custom location 選一個其它文件夾。 主要不要選第一個啊，覆蓋了2倍的文件就找不回來了，所以一定要選一個其它的地方哦。

貼心提醒: 按Ctrl+Alt+Z和Ctrl+Shift+Z組合鍵分別為在歷史記錄中向後和向前 ( 或者可以
使用歷史面板中的菜單來使用這些命令 )。結合還原 ( Edit／Undo )命令使
用這些熱鍵可以自由地在歷史記錄和當前狀態中切 換。

然後選擇batch。 等進度到100%。一大波@2x的圖片就轉化成縮小2倍的圖了。分分鐘搞定!

最後修飾一下，將一倍圖文件名中的@2x用批量重命名工具去掉就好。 同樣分分鐘搞定! 這效率高吧!?

注意:在切圖時。切片大小必須為偶數 比如像素為100-80的切片。 不能使用101-81這樣的圖。否則轉換成一倍的時候，fireworks會很犯難的，而且在手機端會變虛或者錯位，後果嚴重。

那麼ios切圖就這麼完成了。

(2)安卓切圖。

安卓可以通過上表設置不同縮小比例來進行批出來完成。 這個參考ios切圖步驟。

另外一個比較特殊的是安卓的.9圖(點9圖)。 這是一種特殊的文件格式。 因為安卓分辨率很多。所以安卓需要一種特殊的圖片處理形式。

首先 我們效果圖的按鈕是這個樣子的。

貼心提醒: 使用選框工具( Marquee Tools )的時候，按住Shift鍵可以劃出 正方形和正圓
的選區；按住Alt鍵將從起始點為中心勾劃選區。

這個時候，祭出我們的神器-點9圖編輯器。其實就是兩個文件，mac及win平台通用哦。 前提是安卓java運行環境。(請網上自行尋找)

打開后是這樣，我們可以拖放一個文件進去。

打開后我們發現這個按鈕多出來一圈透明區域。 那我們先在上邊點一個點。 這個時候看右邊，發現按鈕橫向拉伸了，這個時候在左邊空白點一個點，發現圖縱向拉伸了。這就是安卓的圖片處理機制啦。很簡單的說。

總結:劃線區域即拉伸區域。 左:縱向拉伸; 右:橫向拉伸; 右和下:用處不太大，分別標識縱向和橫向的文字區域。

那我們保存這個按鈕。生成了一個以.9結尾的png圖像。最終結果如下。

這樣，我們就完成了一個點9圖的製作。關於點9圖，還有很多小細節。有興趣的同學可以搜一下網上的教程。

點9圖的作用在於橫向和縱向拉伸，減小圖片尺寸。就像網頁中的背景圖片的平鋪，有點類似。 大家可以感受下。

(3)APP圖標

這裡簡單說一下圖標，更多細節可以參考各自平台的設計手冊。

IOS:114-114px及512-512尺寸(後者App Store提交審核用)

Android:按72-72px做好了。 注意低密度機器圖標的適配。不同平台有區別。注意。

四、安卓與ios設計的異同及處理

前幾天空閑時間拿着安卓手機與ios，下載了同款應用程序若干。 分別對比了一下，感慨頗多。

1、前邊說過，ios及安卓同時開發，且工期有限人手有限的情況下。我們可以優先做ios效果圖。然後根據安卓及ios的不同分別做出適配。 當然，如果你願意，其實大部分ios應用和效果圖可以直接搬到安卓上。 但，這是最的一種方法。

2、考慮安卓及ios用戶使用習慣。 比如ios的用戶除了在刪除軟件的時候長按外，基本上不會有類似的操作，但安卓平台，長按這種手勢相當常用，這就要考慮適應不同用戶的使用習慣。 另外，大部分安卓有實體返回鍵，但ios沒有。諸如此類，很多。

3、ios對於動畫的實現相對簡單，各種炫酷效果可能不在話下，但如果一款程序要想完全移植到安卓平台，那幾乎是不可能的。請不要為難苦逼的安卓程序員為你做各種測推啊，圖片漸隱啊，動畫這種的東西了，即使他們能做出來，最後效果估計也會卡到死了。

我們可以參考下印象筆記的界面。 相對ios版本， 安卓版本的印象筆記採用了一種更保守的交互設計。

4、請拿出多1-2倍的時間來做安卓app的適配工作。如果你想給你的程序留一個好印象的話，建議先做iphone開發，打出知名度后，再進行安卓開發。因為他們的工作量和開發困難程度天壤之別。

5、熟悉各個平台下的默認控件。 比如多選框，開關，彈層等交互形式的異同，我還是建議各位拿同一款軟件在不同平台上的表現形式作比較。這樣收穫更大。

五、推薦書目

1、《photoshop智能手機app界面設計》-初學者可以學到很多基礎知識。

2、《iPhone4與iPad開發基礎教程》-如果使用mac系統，可以自己搭建一個開發環境，寫一個hello world。然後裝到手機上體驗下絕無僅有的成就感。(如果遇到一個這樣的射雞師，各位程序猿就娶了吧~)

3、 實踐-最好的老師。在各種項目中鍛煉自己。多看站酷，多看優設。提高審美。 多多嘗試各種優秀的app，相信我們會在移動客戶端的設計道路上一起進步的。加油。

4、 安卓及IOS官方UI設計手冊。

六、後記

剛開始只想寫一些設計經驗，沒想到越寫越多，行文也不如第一部分那麼生動有趣。 確實。設計過程中遇到的問題和訣竅，不是一篇簡單的文章可以講完的。 感謝大家能從頭到尾看完本文，經驗所限，文中的內容可能有不少錯誤和值得探討的地方，歡迎大家批評指正，讓我們一同在這個嶄新的設計領域努力吧!

最後附上Instagram概念設計

圖片分享應用Instagram由Kevin Systrom和Mike Krieger創建，2010年10月推出，截止2013年1月已擁有超過100萬註冊用戶。

2012年4月9日，社交網站巨頭facebook以10億美元的驚人價格收購。每天早八準時佔位瞧最優精選，靈感不斷精彩紛呈!

看完小編分享的教學之後 是不是對平面理論教程中的其他教程教學更熟悉了呢?

希望我們所介紹的 詳細解析移動端設計開發經驗之設計篇 這教學會喜歡

文章標題: 骨子愛創意- 詳細解析移動端設計開發經驗之設計篇–轉載請註明來源處

本教學分類為平面理論教程中的 其他教程相關教學

文章相關關鍵字為: 經驗,設計,移動,解析,詳細,我們,可以,分辨率,這個,安卓

本文永久連結 :詳細解析移動端設計開發經驗之設計篇

本文轉載自 :VIA