在這一篇文里，要給大家奉獻(xiàn)各種干貨。相信作為設(shè)計(jì)師的我們，肯定會(huì)非常非常感興趣滴。想了很久，弄什么地方入手呢? ok! 我們打開電腦，開始工作，那么除了qq還有郵箱，那么我們最愛的軟件，肯定是下邊這些啦:好，不管你的最愛是fireworks 還是photoshop還是illustrator或者是其它。都沒關(guān)系。打開你最喜歡的一個(gè)，開始我們客戶端的設(shè)計(jì)吧。 ? 一、開始我們的第一步 因?yàn)楝F(xiàn)在移動(dòng)客戶端大行其道，相信會(huì)有很多從web轉(zhuǎn)過來的從事客戶端設(shè)計(jì)的同學(xué)，也許大家會(huì)覺得，我web頁面設(shè)計(jì)妥妥的，客戶端設(shè)計(jì)肯定沒有任何問題，你看你看，手機(jī)上的界面比那些復(fù)雜的web頁可簡(jiǎn)單多了，不就是幾個(gè)條條框框幾個(gè)按鈕嗎? 小case! 這個(gè)時(shí)候，你身邊的ui設(shè)計(jì)師估計(jì)在心中默默的吐槽了，“哼哼哼，那你就來試試吧！” 好吧，不管霸王洗發(fā)水可以讓成龍的頭發(fā)有多飄逸，我們一定要試試，確定那個(gè)不是特效堆出來的。 ? 打開熟悉的ps或fw，新建畫布。額，寬多少，高多少，分辨率多少??？好，先從你身邊的手機(jī)開始吧。這里以iphone為例，iphone5的分辨率是640-1136，iphone4的話，640-960。 ?自己的手機(jī)分辨率多少，就建個(gè)多少的畫布吧，分辨率保持軟件默認(rèn)就好。一張畫布建好了。好，我們現(xiàn)在可以開始設(shè)計(jì)了。在這里，還要跟大家嘮叨一點(diǎn)。看看你手機(jī)的最上端，黑色的狀態(tài)欄（就是手機(jī)上顯示時(shí)間信號(hào)的東西了嗎？），為了我們能在手機(jī)上預(yù)覽時(shí)剛好占滿整個(gè)屏幕，所以這個(gè)條條在大部分情況下，需要包含到設(shè)計(jì)稿中。iphone下，這個(gè)條（Status Bar）的高度為40px。 ? 我們先畫一個(gè)高40的條放上去，然后呢，一堆的細(xì)節(jié)，按照下圖的高度先畫到畫布里吧（注意，下圖是3GS的分辨率哦，所以高度及寬度全部要乘以2），這個(gè)對(duì)于大家實(shí)在是太簡(jiǎn)單了，注意分辨率就可以了。這個(gè)時(shí)候你可以用之前介紹的神器 PS play在手機(jī)上預(yù)覽一下。 框架搞好，剩下的就可以開始設(shè)計(jì)了。? 二、Web設(shè)計(jì)與客戶端設(shè)計(jì)的異同點(diǎn) 第一步絮叨了好多，但其實(shí)對(duì)大家來說這些其實(shí)是真心太簡(jiǎn)單了對(duì)吧。對(duì)于如何設(shè)計(jì)，如何配色，相信各位專業(yè)的同學(xué)都不會(huì)有問題的，所以我們也不打算在這里教大家如何來做這些了。 那么，下邊主要探討下web設(shè)計(jì)和客戶端設(shè)計(jì)的異同點(diǎn)。 ? 1、字體選用 字體是基礎(chǔ)。在網(wǎng)頁上，我們使用最多的可能是宋體，或者微軟雅黑。那么，為了讓客戶端設(shè)計(jì)稿有較高的還原度，這里雅黑或者神馬宋體就會(huì)弱爆了，這些字體并不適合手機(jī)屏幕來顯示。 這里直接為大家推薦字體。 ? iOS： 請(qǐng)直接選用冬青黑體或者華文黑體即可，推薦使用冬青黑體，效果更好。 ? Android：Droid Sans Fallback（其實(shí)冬青黑或者華文黑也可以考慮啦） ? 手機(jī)上字體的顯示一般都會(huì)做字體的抗鋸齒處理，那我們?cè)谠O(shè)計(jì)稿里也來做相應(yīng)的設(shè)置吧（這里我們不考慮極低分辨率使用像素字體顯示的情況）。 ? 至于字體使用多大號(hào)的，我們這里沒有太嚴(yán)格規(guī)定，但有一點(diǎn)必須要做，設(shè)計(jì)完后，一定要導(dǎo)入手機(jī)上看真實(shí)效果具體感受一下，因?yàn)樵陔娔X屏幕上和手機(jī)上看，感受是完全不一樣的，畢竟我們是來設(shè)計(jì)手機(jī)的應(yīng)用。 ? 2、細(xì)節(jié)為王 細(xì)節(jié)？對(duì)，在web端，由于我們的瀏覽介質(zhì)是顯示器，加上顯示器分辨率及之前的設(shè)計(jì)習(xí)慣，所以有時(shí)候我們可以不用太注重一個(gè)像素的移位等等的問題，但對(duì)于手機(jī)，可就完全不一樣了，不知道各位同學(xué)有木有類似的感受，拿著設(shè)計(jì)web頁的趕腳做了一頁移動(dòng)端設(shè)計(jì)稿，導(dǎo)入手機(jī)上之后發(fā)現(xiàn)這完全是慘不忍睹啊，欲哭無淚有木有。 ? 所以，如果你是大大咧咧風(fēng)格粗獷的設(shè)計(jì)師，那現(xiàn)在就要加倍細(xì)心了，你的粗心和粗狂的風(fēng)格會(huì)在手機(jī)上成倍的放大放大再放大，比如發(fā)光比如投影比如字體一像素投影等等效果，這可不是時(shí)尚大氣國(guó)際化哦，這是丑。當(dāng)然，這個(gè)感覺是需要一定時(shí)間才能找到的，唯一的捷徑就是多在手機(jī)上預(yù)覽效果圖，多研究其它應(yīng)用的細(xì)節(jié)。有時(shí)間可以嘗試畫畫圖標(biāo)，這是個(gè)細(xì)致活。 ? 3、簡(jiǎn)單易用是主旨 由于手機(jī)屏幕的限制，雖然現(xiàn)在分辨率高和精度特別高的手機(jī)不少，但我自己的經(jīng)驗(yàn)，如果手機(jī)一個(gè)屏幕羅列太多的功能及操作以及元素，那這個(gè)設(shè)計(jì)及其可能是一個(gè)失敗的設(shè)計(jì)。某人說過，少即是多。其實(shí)，要做減法真的不容易。這個(gè)是我們?cè)O(shè)計(jì)思路的一個(gè)轉(zhuǎn)變的過程。 ? 舉例: 比如，tab bar上的文字。 能寫兩個(gè)就不要寫四個(gè)。 我的賬戶，我們可以簡(jiǎn)化成"賬戶"。 ? 再比如。按鈕，我們能放兩個(gè)按鈕，絕不放三個(gè)或者四個(gè)(選擇恐懼癥這個(gè)你懂的)，以下是反例。猶豫5秒，你還不知道要點(diǎn)哪個(gè)么?再再比如:相對(duì)于web頁，我們不可能把所有內(nèi)容都塞到手機(jī)的一屏，所以，主旨是一個(gè)屏幕中，我們需要讓使用者完成一項(xiàng)或者一類功能即可。更多的功能可以通過跳頁，彈層以及其他交互形式完成。 ? 這里再嘮叨一個(gè)小細(xì)節(jié)，ios開發(fā)中規(guī)定，按鈕(可點(diǎn)按區(qū)域)的高度最好不要小于44px。所以，最好不要做太小的按鈕，這樣使用者會(huì)抓狂的。 ? 4、分辨率適配 誒，想到這個(gè)就頭疼啊頭疼。上邊我們做了個(gè)效果圖，沒錯(cuò)按iphone分辨率來的。網(wǎng)頁要適配分辨率。手機(jī)還要適配，而且。非常麻煩啊有木有啊。我們來看下圖:主流手機(jī)分辨率統(tǒng)計(jì)(我們假設(shè)屏幕dpi是一樣的情況下。)為了方便觀察我們列表如下： 第一列為分辨率，第二列為寬高比，第三列為寬除以高的數(shù)字，第四列是備注啦(根據(jù)我們現(xiàn)有的測(cè)試機(jī)來統(tǒng)計(jì)的情況)為什么要統(tǒng)計(jì)個(gè)呢。我們可以回到本文開頭，這個(gè)情況下，我們是否在糾結(jié)，設(shè)計(jì)稿用哪種尺寸做呢?難道有這么多分辨率我們就要做這么多設(shè)計(jì)稿嗎?這是要逆天啊!!!恩，一想到這個(gè)問題就無比混亂。 ? 好吧我們先把最好弄的iphone說完。 iphone有三種分辨率320-480，640-960，640-1136。分別對(duì)應(yīng)3GS，ip4，ip5。 再往細(xì)了看，ip最終只有兩種，一種3gs一種ip4和ip5。 分析完感慨一下。apple多為廣大開發(fā)者設(shè)計(jì)者考慮啊。 ip4適配ip5簡(jiǎn)直太簡(jiǎn)單了，因?yàn)閷挾仁遣蛔兊陌　? 所以，在做ios開發(fā)時(shí)，我們可以選一種較大分辨率來做設(shè)計(jì)稿640-960或640-1136就好(取決于你的測(cè)試機(jī))，這樣從大分辨率縮小到小分辨率就很easy了。 直接縮小百分之50就好了，妥妥的。 ? 至于剩下的(我們這里只考慮安卓，wp等先忽略)，那就是廣大的安卓兄弟了，你會(huì)發(fā)現(xiàn)安卓的分辨率是多么的獨(dú)特多么的百花齊放啊(有沒有想哭的趕腳啊?) 有同學(xué)問了，我現(xiàn)在只要做安卓的應(yīng)用，用哪個(gè)尺寸做設(shè)計(jì)稿捏? 額。 我這里推薦480-800吧。 如果安卓和ip一起開發(fā)的，我建議使用ip的分辨率來做，這樣直接從640寬等比縮就可以了。 ? 綜上，優(yōu)先設(shè)計(jì)ip分辨率尺寸640-960或640-1136。宗旨是從大往小縮。(原因?設(shè)計(jì)師都懂，有一次同事問我，能不能把一張50-50的小的照片放大到5000-5000，我回復(fù)，去...) ? 這里有同學(xué)會(huì)問了，安卓的適配還是沒解決啊沒解決? 我們?cè)倏匆幌律媳?，分析下?shù)字。 第三列，看比值。 從0.56-0.75 都有。 但相同的比值呢? 0.56這個(gè)最多。還有0.6及0.66，以及0.75。(魅族這種奇葩屏幕不多解釋，需要單獨(dú)適配。刨除smartbar后比值為0.63，小胖子一個(gè))。這里就要引出屏幕精度的問題了。安卓的適配，最終可以歸納為適配四種精度，說白了，如果要達(dá)到完美的效果，需要做四套圖。 ? 有安卓開發(fā)經(jīng)驗(yàn)的同學(xué)可能知道。這四種適配?？聪聢D。*本表來自 《photoshop智能手機(jī)app界面設(shè)計(jì)》 ? 根據(jù)實(shí)際開發(fā)經(jīng)驗(yàn)，有時(shí)候?yàn)榱耸∈?，我們可以只來做第三欄，就是highdensity這個(gè)尺寸的適配，但最終效果并不能保證所有手機(jī)都會(huì)滿意。這個(gè)需要你和程序員同學(xué)達(dá)成默契。告訴他我是按照high density做的圖哈。這個(gè)時(shí)候他們就不會(huì)把你切的圖扔到其他文件夾，導(dǎo)致實(shí)際效果圖片不是超大就是超小。 ?? 回想起我剛做安卓設(shè)計(jì)的時(shí)候，偷懶，按照640-960分辨率來作圖，切圖，直接給安卓開發(fā)工程師，這個(gè)時(shí)候工程師默認(rèn)把圖片適配了high density。 結(jié)果就是，在手機(jī)里看所有的東西都大一號(hào)。 同樣的情況，如果用低分的圖適應(yīng)高分的，整個(gè)程序就會(huì)一片模糊。 ? 所以根據(jù)實(shí)際經(jīng)驗(yàn)來看，使用480-800這樣的分辨率來切圖和適配是比較合適的。 一方面，低分辨率的屏幕現(xiàn)在越來越少了，另一方面，其實(shí)效果并不會(huì)太過分。 可是，另一方面，extra high這樣的分辨率是當(dāng)前這階段不能不再考慮的了。因?yàn)楦叻制聊辉絹碓蕉啵?920-1080分辨率的手機(jī)也已經(jīng)有了，為了保證效果，我們需要適配某些主流的分辨率和機(jī)型。 比如魅族mx2， note2 。 也就是說我們要提供部分特別影響視覺效果的圖來適配。舉例:閃屏圖片(不適配可能變模糊或者拉伸)，特別影響布局的圖片(不做適配布局會(huì)亂套)。 ? 總之，在開發(fā)成本和效率上，我們要做出一些兼顧。 因?yàn)樗袌D片要切四套，適配成本及工作量就太大了，值不值得，各位自行考量，這里只提供本人開發(fā)過程中的一些考慮因素。 ? 總結(jié)：在安卓iphone同時(shí)開發(fā)的情況下(又是同一個(gè)團(tuán)隊(duì)設(shè)計(jì)師又比較苦逼)，我們可以優(yōu)先做出iPhone的界面，因?yàn)?40-960已經(jīng)可以滿足安卓最高適配的要求啦。 (安卓后期與iPhone不同的交互及表現(xiàn)形式可以單獨(dú)處理，想省事，直接套iPhone，請(qǐng)專業(yè)人士不要踢我。) ? 三、切圖 因?yàn)檫@篇文的主旨是告訴大家操作方法和思路，對(duì)于ui如何呈現(xiàn)，請(qǐng)大家多看看網(wǎng)上的優(yōu)秀案例，這個(gè)設(shè)計(jì)的細(xì)節(jié)實(shí)在太多。所以這里省略過去。 各大素材網(wǎng)站有很多的ui素材可以參考。 ? 設(shè)計(jì)過程中我們可以用流程篇中提到的神器來提高設(shè)計(jì)效率。這里不多講。 ? 設(shè)計(jì)稿完成并確認(rèn)后，我們需要切圖，ohno!這又是一個(gè)及其瑣碎的工作。 ? 1、如果你不知道某部分怎么切，請(qǐng)務(wù)必在切圖前與工程師溝通。與他們進(jìn)行詳細(xì)的商討，一般情況下他們很愿意為你答疑解惑。(嗯嗯，嫁了吧!) 2、開切 ? 相信大部分細(xì)節(jié)我們已經(jīng)和工程師溝通過了。 這里我們主要提幾個(gè)要點(diǎn)。 ? (1)iOS切圖相對(duì)容易，并且交互效果實(shí)現(xiàn)較簡(jiǎn)單，這也是我最愿意做ios切圖和開發(fā)的原因。 ?在切圖過程中需要切兩套圖來適配。建議先切一套大圖，適配ip4ip5或者高分屏ipad。 文件名自便，后邊加@2x字樣，圖片格式png。(當(dāng)然某些圖jpg也可以，但png優(yōu)勢(shì)明顯，所以都png吧)。 ? 切完適配高分ip的圖后。就是一堆@2x這樣的png圖片啦。然后呢，教大家一個(gè)非常方便的做法來做縮小2倍的圖片。? 這里推薦firework這個(gè)神器。我們使用批處理工具。選擇file>batch Process。選擇所有@2x的圖片>add到下面的框>next。? 選擇scale 加入到右邊的框，然后選擇，scaleto Percentage 選50%，也就是縮小到原圖的一半。? 然后將export同樣加入右側(cè)，選擇導(dǎo)出格式 png。然后我們選 custom location 選一個(gè)其它文件夾主要不要選第一個(gè)啊，覆蓋了2倍的文件就找不回來了，所以一定要選一個(gè)其它的地方哦。? 然后選擇batch，等進(jìn)度到100%，一大波@2x的圖片就轉(zhuǎn)化成縮小2倍的圖了，分分鐘搞定! ? 最后修飾一下，將一倍圖文件名中的@2x用批量重命名工具去掉就好。同樣分分鐘搞定! 這效率高吧!? ? 注意:在切圖時(shí)。切片大小必須為偶數(shù) 比如像素為100-80的切片。不能使用101-81這樣的圖。否則轉(zhuǎn)換成一倍的時(shí)候，fireworks會(huì)很犯難的，而且在手機(jī)端會(huì)變虛或者錯(cuò)位，后果嚴(yán)重。 ? 那么iOS切圖就這么完成了。 ? (2)安卓切圖 安卓可以通過上表設(shè)置不同縮小比例來進(jìn)行批出來完成。 這個(gè)參考iOS切圖步驟。 ? 另外一個(gè)比較特殊的是安卓的.9圖(點(diǎn)9圖)。 這是一種特殊的文件格式。 因?yàn)榘沧糠直媛屎芏?。所以安卓需要一種特殊的圖片處理形式。 ? 首先 我們效果圖的按鈕是這個(gè)樣子的。這個(gè)時(shí)候，祭出我們的神器-點(diǎn)9圖編輯器。其實(shí)就是兩個(gè)文件，mac及win平臺(tái)通用哦。前提是安卓java運(yùn)行環(huán)境。(請(qǐng)網(wǎng)上自行尋找)打開后是這樣，我們可以拖放一個(gè)文件進(jìn)去。打開后我們發(fā)現(xiàn)這個(gè)按鈕多出來一圈透明區(qū)域。那我們先在上邊點(diǎn)一個(gè)點(diǎn)。這個(gè)時(shí)候看右邊，發(fā)現(xiàn)按鈕橫向拉伸了，這個(gè)時(shí)候在左邊空白點(diǎn)一個(gè)點(diǎn)，發(fā)現(xiàn)圖縱向拉伸了。這就是安卓的圖片處理機(jī)制啦。很簡(jiǎn)單的說。 ? 總結(jié):劃線區(qū)域即拉伸區(qū)域。 左:縱向拉伸; ?右:橫向拉伸; ?右和下:用處不太大，分別標(biāo)識(shí)縱向和橫向的文字區(qū)域。 ? 那我們保存這個(gè)按鈕。生成了一個(gè)以.9結(jié)尾的png圖像。最終結(jié)果如下。這樣，我們就完成了一個(gè)點(diǎn)9圖的制作。關(guān)于點(diǎn)9圖，還有很多小細(xì)節(jié)。有興趣的同學(xué)可以搜一下網(wǎng)上的教程。 ? 點(diǎn)9圖的作用在于橫向和縱向拉伸，減小圖片尺寸。就像網(wǎng)頁中的背景圖片的平鋪，有點(diǎn)類似。 大家可以感受下。 ? (3)APP圖標(biāo) 這里簡(jiǎn)單說一下圖標(biāo)，更多細(xì)節(jié)可以參考各自平臺(tái)的設(shè)計(jì)手冊(cè)。 ? iOS:114-114px及512-512尺寸(后者App Store提交審核用) ? Android:按72-72px做好了。 注意低密度機(jī)器圖標(biāo)的適配。不同平臺(tái)有區(qū)別。注意。 ? 四、安卓與ios設(shè)計(jì)的異同及處理 前幾天空閑時(shí)間拿著安卓手機(jī)與iOS,下載了同款應(yīng)用程序若干。分別對(duì)比了一下,感慨頗多。 ? 1、前邊說過，ios及安卓同時(shí)開發(fā)，且工期有限人手有限的情況下，我們可以優(yōu)先做ios效果圖。然后根據(jù)安卓及iOS的不同分別做出適配。當(dāng)然，如果你愿意，其實(shí)大部分iOS應(yīng)用和效果圖可以直接搬到安卓上。但這是最