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