• 相關文章
  • 文字效果
  • 調色教學
  • 合成教學
  • 去背教學
  • 照片後製
  • 電腦繪圖
  • 設計教學
  • 動畫教學
  • 簽名製作
  • 其他教學
  • Illustrator
  • CorelDraw教學
  • 攝影教學
  • 3DMAX教學
  • AUTOCAD教學
  • MAYA教學
  • FireWorks教學
  • flash教學
  • 繪畫教學
  • PS作品欣賞
  • 包裝設計範例
  • LOGO設計範例
  • 封面設計範例
  • 名片設計範例
  • CG繪圖設計
  • 海報設計
  • 網頁設計範例
  • PS筆刷下載
  • PS濾鏡下載
  • PS動作下載
  • PS背景下載
  • PS樣式下載




  • 【 設計理論】詳細解析移動端設計開發經驗之設計篇




    詳細解析移動端設計開發經驗之設計篇

    這一次的教學是屬於設計理論領域中的設計理論的相關教學。

    文章出處是來自優設的設計理論類文章,寫教學的作者是佚名,感謝佚名提供設計理論的實作教學。

    教學大綱:

    不管你的最愛是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倍的文件就找不回來了,所以一定要選一個其它的地方哦。

    詳細解析移動端設計開發經驗之設計篇

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

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

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

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

    (2)安卓切圖。

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

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

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

    詳細解析移動端設計開發經驗之設計篇

    這個時候,祭出我們的神器-點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億美元的驚人價格收購。每天早八準時佔位瞧最優精選,靈感不斷精彩紛呈!

    詳細解析移動端設計開發經驗之設計篇

    — —

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