移動(dòng)產(chǎn)品設(shè)計(jì)基礎(chǔ)教材課件

移動(dòng)產(chǎn)品設(shè)計(jì)基礎(chǔ)移動(dòng)產(chǎn)品設(shè)計(jì)基礎(chǔ)移動(dòng)產(chǎn)品設(shè)計(jì)基礎(chǔ)一、移動(dòng)產(chǎn)品特性二、尺寸與分辨率

三、界面布局四、字體五、圖標(biāo)六、切圖七、總結(jié)

CONTENTS目錄移動(dòng)產(chǎn)品設(shè)計(jì)基礎(chǔ)一、移動(dòng)產(chǎn)品特性CONTENTS目錄移動(dòng)產(chǎn)品設(shè)計(jì)基礎(chǔ)移動(dòng)產(chǎn)品特性移動(dòng)產(chǎn)品設(shè)計(jì)基礎(chǔ)移動(dòng)產(chǎn)品特性移動(dòng)產(chǎn)品特性移動(dòng)產(chǎn)品的種類常用的移動(dòng)產(chǎn)品按尺寸分有手機(jī)和平板電腦等，按平臺(tái)分有iOS,Android,Windows，Windowsphone等.這里我們主要講iPhone、iPad、Android手機(jī)app的設(shè)計(jì)基礎(chǔ)知識(shí)。什么是安卓：Android是一種基于Linux的自由及開(kāi)放源代碼的操作系統(tǒng)，主要使用于便攜設(shè)備，如智能手機(jī)和平板電腦。Android操作系統(tǒng)最初由AndyRubin開(kāi)發(fā)，主要支持手機(jī)。2005年由Google收購(gòu)注資，并組建開(kāi)放手機(jī)聯(lián)盟開(kāi)發(fā)改良隨后，逐漸擴(kuò)展到平板電腦及其他領(lǐng)域上。2008年10月第一部Android智能手機(jī)發(fā)布。什么是iOS：蘋(píng)果iOS是由蘋(píng)果公司開(kāi)發(fā)的手持設(shè)備操作系統(tǒng)。蘋(píng)果公司最早于2007年1月9日的Macworld大會(huì)上公布這個(gè)系統(tǒng)，最初是設(shè)計(jì)給iPhone使用的，后來(lái)陸續(xù)套用到iPodtouch、iPad以及AppleTV等蘋(píng)果產(chǎn)品上。注意：寫(xiě)法是iPhone、iPad、iPod、iOS。移動(dòng)產(chǎn)品特性移動(dòng)產(chǎn)品的種類常用的移動(dòng)產(chǎn)品按尺寸分有手機(jī)和平板移動(dòng)產(chǎn)品特性移動(dòng)產(chǎn)品的種類MetroUI是一種界面展示技術(shù)，和蘋(píng)果的iOS、谷歌的Android界面最大的區(qū)別在于：后兩種都是以應(yīng)用為主要呈現(xiàn)對(duì)象，而Metro界面強(qiáng)調(diào)的是信息本身，而不是冗余的界面元素。顯示下一個(gè)界面的部分元素的功能上的作用主要是提示用戶“這兒有更多信息”。同時(shí)在視覺(jué)效果方面，這有助于形成一種身臨其境的感覺(jué)。WindowsPhone是微軟發(fā)布的一款手機(jī)操作系統(tǒng)，它將微軟旗下的XboxLive游戲、Zune音樂(lè)與獨(dú)特的視頻體驗(yàn)整合至手機(jī)中。2010年10月11日晚上9點(diǎn)30分，微軟公司正式發(fā)布了智能手機(jī)操作系統(tǒng)WindowsPhone。移動(dòng)產(chǎn)品特性移動(dòng)產(chǎn)品的種類MetroUI是一種界面展示技術(shù)移動(dòng)產(chǎn)品特性移動(dòng)產(chǎn)品使用特點(diǎn)移動(dòng)設(shè)備的方便攜帶，也同時(shí)帶來(lái)了它瀏覽時(shí)間的碎片化。以智能手機(jī)為例：我們通常在短暫的時(shí)間里，完成一件任務(wù)或者是進(jìn)行一個(gè)娛樂(lè)事件，比如：散步、坐公交、睡前、午后閑暇、旅行的時(shí)候，開(kāi)始拍照、分享、做筆記、玩游戲、購(gòu)物，等等。在平均短短5-30分鐘的時(shí)間里，思路常常被打斷，手機(jī)常常被拿起放下，高效和輕交互，就成為了移動(dòng)設(shè)計(jì)的特點(diǎn)。而對(duì)于平板電腦而言，它的使用時(shí)間一般為在家中較為安靜，舒適的環(huán)境空間下，使用時(shí)間也較為固定。移動(dòng)產(chǎn)品特性移動(dòng)產(chǎn)品使用特點(diǎn)移動(dòng)設(shè)備的方便攜帶，也同時(shí)帶來(lái)了移動(dòng)產(chǎn)品特性手勢(shì)對(duì)比移動(dòng)產(chǎn)品特性手勢(shì)對(duì)比移動(dòng)產(chǎn)品設(shè)計(jì)基礎(chǔ)尺寸與分辨率移動(dòng)產(chǎn)品設(shè)計(jì)基礎(chǔ)尺寸與分辨率尺寸與分辨率移動(dòng)產(chǎn)品使用特點(diǎn)屏幕尺寸：

通常是指屏幕的物理尺寸，是屏幕的對(duì)角線長(zhǎng)度。比如2.8英寸,3.7英寸。分辨率：

是指屏幕上擁有的像素的總數(shù)。通常使用“寬度×長(zhǎng)度”來(lái)表達(dá)。雖然大部分情況下分辨率都被表示為“寬度×長(zhǎng)度”，但分辨率并不意味著屏幕的比例。尺寸與分辨率移動(dòng)產(chǎn)品使用特點(diǎn)屏幕尺寸：

通常是指屏幕的物理尺尺寸與分辨率移動(dòng)產(chǎn)品使用特點(diǎn)Apple為了防止在交流過(guò)程中（尤其對(duì)于編程實(shí)現(xiàn)）分辨率對(duì)思維的迷惑，統(tǒng)一使用點(diǎn)（Point）對(duì)界面元素的大小進(jìn)行描述，例如：

iPhone/iPod

Touch界面描述

320點(diǎn)

x

480點(diǎn)iPhone/iPad界面描述

768點(diǎn)

x

1024點(diǎn)換算關(guān)系

普屏

1點(diǎn)（1pt)

=

1像素

Retina屏

1點(diǎn)(1pt)

=

2像素

這樣，不管我們是在為普屏還是Retina屏進(jìn)行設(shè)計(jì)與開(kāi)發(fā)，我們都可以清楚地，并且統(tǒng)一地使用點(diǎn)對(duì)界面元素的大小進(jìn)行描述了。

尺寸與分辨率移動(dòng)產(chǎn)品使用特點(diǎn)Apple為了防止在交流過(guò)程中（尺寸與分辨率iPhoneiPhone：

第一代的iPhone屏幕尺寸為3.5英寸，分辨率為320*480，屏幕密度為165PPI，而從iPhone4開(kāi)始屏幕密度增加了兩倍，分辨率達(dá)到640*960。而到現(xiàn)在iphone5的分辨率則為640*1136。

在設(shè)計(jì)iPhone的應(yīng)用程序界面時(shí)，設(shè)計(jì)師要以640*960的基準(zhǔn)進(jìn)行設(shè)計(jì)，然后制作一套縮小兩倍的圖片資源。(未縮的我們叫兩倍圖，縮了的叫一倍圖）因?yàn)樗衖Phone都使用了相同的尺寸，所以最終能在兩種分辨率上顯示的物理大小完全相同。由于iphone5只是高度發(fā)生變化，在適配時(shí)一般保持設(shè)計(jì)控件大小不變，只是內(nèi)容露出增多。但對(duì)于一些滿屏設(shè)計(jì)的界面則需要考慮是否需要另外設(shè)計(jì)一份頁(yè)面640*1136（如app背景圖，啟動(dòng)圖等等）尺寸與分辨率iPhoneiPhone：

第一代的iPhone尺寸與分辨率iPhone320px480pxiPhone-iPhone3GSiPhone4-iPhone4SiPhone5640px960px640px1136px尺寸與分辨率iPhone320px480pxiPhone-i尺寸與分辨率iPadiPad：

第一代的iPad屏幕尺寸為9.7英寸，分辨率為1024*768，屏幕密度為132PPI。全新的iPad屏幕密度同樣提升了兩倍，分辨率達(dá)到2048*1536。最近新出的iPadmini屏幕尺寸為7.9英寸，分辨率為1024*768。

在設(shè)計(jì)iPad的應(yīng)用程序時(shí)，設(shè)計(jì)師要以2048*1536的基準(zhǔn)進(jìn)行設(shè)計(jì)，然后制作一套縮小兩倍的圖片資源。(未縮的我們叫兩倍圖，縮了的叫一倍圖）iPadmini由于和iPad比例一樣，不需要另外設(shè)計(jì)，直接可以使用相應(yīng)的一倍圖適配到設(shè)備中。尺寸與分辨率iPadiPad：

第一代的iPad屏幕尺寸為9尺寸與分辨率iPad768px1024pxiPad1-iPad2iPad3-iPad4iPadmini1536px2048px768px1024px尺寸與分辨率iPad768px1024pxiPad1-iPa尺寸與分辨率AndroidAndroid設(shè)備：

Android設(shè)備的屏幕相對(duì)復(fù)雜一些，因?yàn)樗鼈冇懈鞣N尺寸和分辨率。

為了讓各種分辨率的屏幕顯示合適的大小以方便用戶閱讀或者操作，同時(shí)又能滿足Android設(shè)備多樣性的需求。于是，Android官方通過(guò)對(duì)各種屏幕進(jìn)行密度等級(jí)劃分，最后分為“低密度（LDPI）”、“中密度（MDPI）”、“高密度（HDPI）”、“超高密度（XHDPI）”這四個(gè)規(guī)格，并同時(shí)將“中密度”定義為基準(zhǔn)線。這樣，在設(shè)計(jì)Android應(yīng)用程序的界面時(shí)，我們就可以一視同仁把中密度的屏幕作為基準(zhǔn)進(jìn)行設(shè)計(jì)，然后給其它密度的屏幕提供相應(yīng)的圖片資源。最后通過(guò)系統(tǒng)的適配性自動(dòng)處理，一樣使得相同的內(nèi)容在各種屏幕上可以顯示比較接近的大小。在太平洋，一般我們?cè)O(shè)計(jì)為480*800的尺寸。尺寸與分辨率AndroidAndroid設(shè)備：

Androi移動(dòng)產(chǎn)品設(shè)計(jì)基礎(chǔ)界面布局移動(dòng)產(chǎn)品設(shè)計(jì)基礎(chǔ)界面布局界面布局iPhoneiPhone：

界面布局iPhoneiPhone：

界面布局iPhoneiPhone：

界面布局iPhoneiPhone：

界面布局iPadiPad：

狀態(tài)欄高20pt導(dǎo)航欄高44pt導(dǎo)航欄圖標(biāo)≤20pt*20pt導(dǎo)航欄按鈕48pt*64pt標(biāo)簽欄高49pt標(biāo)簽欄圖標(biāo)≤30pt*30pt界面布局iPadiPad：

狀態(tài)欄高20pt導(dǎo)航欄高44pt界面布局狀態(tài)欄(statusbar）

規(guī)范里的話：狀態(tài)欄是展示關(guān)于設(shè)備的重要信息，包括信號(hào)強(qiáng)弱、網(wǎng)絡(luò)連接情況、電池情況等。實(shí)際應(yīng)用上：一般而言所有界面都需要狀態(tài)欄，除非是游戲等沉浸式的app，和某些全屏顯示圖片的界面。320pt*20pt界面布局狀態(tài)欄(statusbar）

規(guī)范里的話：320界面布局導(dǎo)航欄（navigationbar)

規(guī)范里的話：導(dǎo)航欄展示在頂部狀態(tài)欄的下方在一個(gè)應(yīng)用的不同視覺(jué)中進(jìn)行導(dǎo)航提供對(duì)當(dāng)前視圖內(nèi)容進(jìn)行管理的空間導(dǎo)航欄可以僅僅以橫向居中方式顯示當(dāng)前視圖的標(biāo)題當(dāng)用戶進(jìn)入其他視圖時(shí)，導(dǎo)航欄的標(biāo)題應(yīng)該更改為當(dāng)前位置的標(biāo)題，并且應(yīng)該提供包含上一位置的后退按鈕。除了后退按鈕外，導(dǎo)航欄可以在標(biāo)題右側(cè)包含第二個(gè)按鈕，如編輯，添加。320pt*44pt按鈕可以是文字或圖標(biāo)界面布局導(dǎo)航欄（navigationbar)

規(guī)范里的話：界面布局導(dǎo)航欄（navigationbar)

實(shí)際應(yīng)用上：頂部狀態(tài)欄下不一定就是導(dǎo)航欄，可以沒(méi)有，也可以是搜索欄等等。導(dǎo)航欄大于44pt，頁(yè)面標(biāo)題左對(duì)齊界面布局導(dǎo)航欄（navigationbar)

實(shí)際應(yīng)用上：界面布局導(dǎo)航欄（navigationbar)

實(shí)際應(yīng)用上：不同的元素組合成導(dǎo)航欄界面布局導(dǎo)航欄（navigationbar)

實(shí)際應(yīng)用上：界面布局導(dǎo)航欄（navigationbar)

實(shí)際應(yīng)用上：頁(yè)面標(biāo)題和按鈕一樣可點(diǎn)擊界面布局導(dǎo)航欄（navigationbar)

實(shí)際應(yīng)用上：界面布局標(biāo)簽欄（tabbar)

規(guī)范里的話：標(biāo)簽欄顯示在屏幕的下方邊緣標(biāo)簽欄向用戶提供了再應(yīng)用的不同模式或不同視圖間切換的能力。標(biāo)簽欄顯示圖標(biāo)和文本，每一個(gè)標(biāo)簽欄元素等寬地顯示標(biāo)簽欄被選擇的標(biāo)簽需要有一個(gè)當(dāng)前的高亮狀態(tài)無(wú)論橫屏豎屏都不改變其高度標(biāo)簽不超過(guò)5個(gè)時(shí)，可以在標(biāo)簽欄中等寬地展示當(dāng)標(biāo)簽超過(guò)5個(gè)時(shí)，系統(tǒng)會(huì)展示其中4個(gè)并展示一個(gè)“更多”的標(biāo)簽可以在卡片欄上顯示一個(gè)提醒標(biāo)記320pt*49pt界面布局標(biāo)簽欄（tabbar)

規(guī)范里的話：320pt*4界面布局標(biāo)簽欄（tabbar)

實(shí)際應(yīng)用上：并不是所有的首頁(yè)都有標(biāo)簽欄。當(dāng)圖標(biāo)意義足夠明確，可以不使用文字；當(dāng)標(biāo)簽意義過(guò)于抽象，可以全部只使用文字界面布局標(biāo)簽欄（tabbar)

實(shí)際應(yīng)用上：當(dāng)圖標(biāo)意義足夠界面布局標(biāo)簽欄（tabbar)

實(shí)際應(yīng)用上：形狀上不一定就是長(zhǎng)方形，不一定所有標(biāo)簽都等寬。界面布局標(biāo)簽欄（tabbar)

實(shí)際應(yīng)用上：界面布局工具欄（toolbar)

規(guī)范里的話：工具欄顯示在屏幕下方邊緣包含用于針對(duì)當(dāng)前頁(yè)面內(nèi)容執(zhí)行動(dòng)作的按鈕在工具欄上相應(yīng)的元素等寬的進(jìn)行排列工具欄中提供不超過(guò)5個(gè)元素是較為合適的，推薦用戶點(diǎn)擊區(qū)域?yàn)?4pt*44pt設(shè)備手持方向從豎向變?yōu)闄M向時(shí)，會(huì)自動(dòng)改變工具欄的高度320pt*44pt界面布局工具欄（toolbar)

規(guī)范里的話：320pt*界面布局工具欄（toolbar)

實(shí)際應(yīng)用上：家居雜志和太平洋電腦網(wǎng)客戶端內(nèi)頁(yè)工具欄展示界面布局工具欄（toolbar)

實(shí)際應(yīng)用上：界面布局點(diǎn)擊區(qū)域

規(guī)范里的話：在設(shè)計(jì)任何可點(diǎn)擊的部件時(shí)，設(shè)計(jì)師應(yīng)該首先考慮設(shè)計(jì)區(qū)域是否易于讓用戶點(diǎn)擊，因此在設(shè)計(jì)規(guī)范里，任何可點(diǎn)擊的部件，大小都不應(yīng)小于44*44pt。因此，按鈕不應(yīng)小于44*44pt;app的banner廣告圖高度也不應(yīng)小于44pt；列表的高度也不應(yīng)小于44pt等等。界面布局點(diǎn)擊區(qū)域

界面布局設(shè)計(jì)區(qū)域

由于在設(shè)計(jì)中，設(shè)計(jì)師是按照retina屏幕分辨率去設(shè)計(jì)的，在設(shè)計(jì)的最后輸出一倍圖的時(shí)候我們需要將兩倍縮小成一倍圖，因此，在兩倍圖的設(shè)計(jì)中，必須保證每一個(gè)單獨(dú)存在的個(gè)體的大小是雙數(shù)像素，如148px*248px。這樣才能使在縮小到一倍圖的時(shí)候不會(huì)出現(xiàn)13.5*17.5像素的情況（大家都知道世界上是沒(méi)有半個(gè)像素的存在的，像素不齊便會(huì)出現(xiàn)虛擬像素，圖像會(huì)模糊）界面布局設(shè)計(jì)區(qū)域

界面布局其他控件

IOS的控件還有很多很多，以上列舉的是比較常見(jiàn)到的，是做每一個(gè)app都會(huì)設(shè)計(jì)到的。另外還有鍵盤(pán)，提示框，時(shí)間和日期選擇器，選擇器，進(jìn)度顯示器，搜索欄，滑動(dòng)調(diào)節(jié)器等等。這些一般可以直接使用系統(tǒng)提供的樣式，不需要另外設(shè)計(jì)（當(dāng)有需求的時(shí)候也可以設(shè)計(jì)，不過(guò)由于其操作比較復(fù)雜，很多時(shí)候另外設(shè)計(jì)實(shí)現(xiàn)得還不如直接系統(tǒng)自帶的）界面布局其他控件

移動(dòng)產(chǎn)品設(shè)計(jì)基礎(chǔ)字體移動(dòng)產(chǎn)品設(shè)計(jì)基礎(chǔ)字體字體iOS里的默認(rèn)字體

在ios中默認(rèn)字體分為三類：第一種：STHeiti-Light.ttc和STHeiti-Medium.ttc代表的是中文字體第二種：_H_Helvetica.ttc和_H_HelveticaNeue.ttc代表的是英文以及數(shù)字字體第三種：LockClock.ttf代表的是鎖屏?xí)r間字體字體iOS里的默認(rèn)字體

字體iOS里的中文字體

蘋(píng)果默認(rèn)的中文字體是HeitiSC（黑體-簡(jiǎn)，黑體-簡(jiǎn)的英文名稱為HeitiSC。Heiti為黑體的拼音，SC代表簡(jiǎn)體中文（SimplifiedChinese）），是MacOSXSnowLeopard（版本10.6）包含的簡(jiǎn)體中文字型，也是iPhoneOS3.0（版本4.0后改名為iOS）及iPodnano第五代以來(lái)的預(yù)設(shè)簡(jiǎn)體中文字型。當(dāng)我們?cè)谟肞C設(shè)計(jì)的時(shí)候，比較接近這種字體的是方正黑體簡(jiǎn)體。iOS里面的中文字體是比較少的，看上去都差不多，總結(jié)起來(lái)就是黑體，粗黑體和斜黑體三種。iOS里的英文/數(shù)字字體相對(duì)中文而言，iOS里的英文和數(shù)字的字體樣式就比較多了，在設(shè)計(jì)的時(shí)候可以挑選合適界面的英文字體使用，但需要注意該字體是否在各個(gè)版本的系統(tǒng)能夠通用。字體iOS里的中文字體

iOS里的英文/數(shù)字字體字體

字體

字體實(shí)際應(yīng)用

中文應(yīng)用在界面上面時(shí)，一般我們用方正黑體簡(jiǎn)體做設(shè)計(jì)。而且不能帶有任何的設(shè)計(jì)效果和樣式（只能是純色，可以帶有陰影，由技術(shù)來(lái)實(shí)現(xiàn)）但也有例外，例如是寫(xiě)在圖片上的文字；一些比較特殊的不會(huì)更改的詞句這時(shí)可以用其他字體和使用樣式，由切圖來(lái)實(shí)現(xiàn)。字體實(shí)際應(yīng)用

字體

我們?cè)谠O(shè)計(jì)時(shí)，重要的視覺(jué)部分可以做文字的樣式（前提是這部分不會(huì)改變）例如首頁(yè)的標(biāo)題，底部標(biāo)簽欄的文字（它們一般都是固定不會(huì)更改的）改變的文字切圖實(shí)現(xiàn)。但二級(jí)頁(yè)面及之后的標(biāo)題就會(huì)由技術(shù)來(lái)實(shí)現(xiàn)了。個(gè)人經(jīng)驗(yàn)一般字體最小不小于24px，標(biāo)題等可到38px-44px。字體

移動(dòng)產(chǎn)品設(shè)計(jì)基礎(chǔ)圖標(biāo)移動(dòng)產(chǎn)品設(shè)計(jì)基礎(chǔ)圖標(biāo)圖標(biāo)導(dǎo)航欄和工具欄的標(biāo)準(zhǔn)按鈕圖標(biāo)

圖標(biāo)導(dǎo)航欄和工具欄的標(biāo)準(zhǔn)按鈕圖標(biāo)

圖標(biāo)導(dǎo)航欄和工具欄的標(biāo)準(zhǔn)按鈕圖標(biāo)

圖標(biāo)導(dǎo)航欄和工具欄的標(biāo)準(zhǔn)按鈕圖標(biāo)

圖標(biāo)標(biāo)簽欄的標(biāo)準(zhǔn)按鈕圖標(biāo)

圖標(biāo)標(biāo)簽欄的標(biāo)準(zhǔn)按鈕圖標(biāo)

圖標(biāo)Appicon設(shè)計(jì)尺寸

我們一般設(shè)計(jì)最大尺寸的1024px*1024px,再縮小為各個(gè)尺寸的圖標(biāo)。iPhoneapp圖標(biāo)iPadapp圖標(biāo)圖標(biāo)Appicon設(shè)計(jì)尺寸

我們一般設(shè)計(jì)最大尺寸的102圖標(biāo)

圖標(biāo)

圖標(biāo)

圖標(biāo)

圖標(biāo)

輸出：iOS會(huì)為圖標(biāo)自動(dòng)生成圓角帶高光帶投影（也可設(shè)置不生成高光），所以提交的時(shí)候提交直角圖標(biāo)即可，直接輸PNG：1024px*1024px（不要使用alpha透明度）圖標(biāo)

輸出：iOS會(huì)為圖標(biāo)自動(dòng)生成圓角帶高光帶投影（也可設(shè)置移動(dòng)產(chǎn)品設(shè)計(jì)基礎(chǔ)切圖移動(dòng)產(chǎn)品設(shè)計(jì)基礎(chǔ)切圖切圖

圖形用戶界面中的圖形有兩種實(shí)現(xiàn)方式，一種是用代碼畫(huà)出來(lái)，另一種則是使用圖片。在直接使用之前，有一個(gè)PSD到png的切圖過(guò)程。方法2.新建透明圖層，拖進(jìn)該部件方法1.直接在psd上切圖。1.切2.輸出切好后選擇：“儲(chǔ)存為Web和設(shè)備所用格式”圖片格式png24，保持透明度切圖

圖形用戶界面中的圖形有兩種實(shí)現(xiàn)方式，一種是用代碼畫(huà)出來(lái)切圖

在縮小為一倍圖進(jìn)行切圖的時(shí)候，如果該元素使用的像素不是雙數(shù)，或者坐標(biāo)不在雙數(shù)坐標(biāo)上時(shí)，就會(huì)出現(xiàn)虛擬像素，此時(shí)需要進(jìn)一步調(diào)整。切圖

在縮小為一倍圖進(jìn)行切圖的時(shí)候，如果該元素使用的像素不是切圖

一般相同關(guān)系和層級(jí)排列的圖標(biāo)或元素，不管它們各自的尺寸是多少，都切成相同大小的切片(alt拖動(dòng)即可復(fù)制當(dāng)前切片）。除切片外，另外一個(gè)需要輸出的是顏色。一般給程序員RGB值和顏色代碼兩個(gè)數(shù)值。切圖

一般相同關(guān)系和層級(jí)排列的圖標(biāo)或元素，不管它們各自的尺寸切圖

在太平洋，移動(dòng)產(chǎn)品的切圖是由我們?cè)O(shè)計(jì)這邊完成的（安卓除外）流程：設(shè)計(jì)師發(fā)出設(shè)計(jì)稿給程序員查看——程序員根據(jù)設(shè)計(jì)稿編寫(xiě)輸出切圖文檔（文檔包括頁(yè)面鏈點(diǎn)（名稱）、該切圖截圖、命名方法、切圖尺寸大小、相關(guān)備注）——設(shè)計(jì)師根據(jù)文檔進(jìn)行切圖，最后打包發(fā)給程序員。切圖時(shí)一般需要切一倍圖和兩倍圖，兩倍圖是在相應(yīng)的一倍圖命名后加@2x。因?yàn)閍pp在實(shí)際運(yùn)行時(shí)，如果發(fā)現(xiàn)當(dāng)前的設(shè)備是Retina屏，會(huì)自動(dòng)尋找圖片"pic@2x.png"

，自動(dòng)加載針對(duì)Retina屏的圖片素材.切圖

在太平洋，移動(dòng)產(chǎn)品的切圖是由我們?cè)O(shè)計(jì)這邊完成的（安卓除切圖

文檔里面若沒(méi)有特別標(biāo)明改切圖的尺寸，則完全按照設(shè)計(jì)稿元素的實(shí)際尺寸進(jìn)行切圖。對(duì)于點(diǎn)擊元素不足44pt*44pt的情況，一般切圖時(shí)需要切上旁邊的空白像素以滿足此標(biāo)準(zhǔn)。查看文檔時(shí)需要留意程序員是否漏掉某些按鈕或點(diǎn)擊區(qū)域的選中狀態(tài)、按下?tīng)顟B(tài)或不可點(diǎn)擊狀態(tài)。一般按鈕上的文字不切出，由程序?qū)崿F(xiàn)。切圖

文檔里面若沒(méi)有特別標(biāo)明改切圖的尺寸，則完全按照設(shè)計(jì)稿元移動(dòng)產(chǎn)品設(shè)計(jì)基礎(chǔ)總結(jié)移動(dòng)產(chǎn)品設(shè)計(jì)基礎(chǔ)總結(jié)總結(jié)

app設(shè)計(jì)和網(wǎng)站設(shè)計(jì)，專題設(shè)計(jì)很不一樣，因?yàn)椴僮骱惋@示空間比較小，所以必須要有一定的規(guī)范和約束去統(tǒng)一用戶的體驗(yàn)。但是在實(shí)際設(shè)計(jì)和開(kāi)發(fā)上，我們可以盡量圍繞規(guī)范做出創(chuàng)新，帶來(lái)新的體驗(yàn)和新鮮感。設(shè)計(jì)稿出來(lái)之后，一定要放在相應(yīng)的移動(dòng)設(shè)備上看效果，電腦屏幕和設(shè)備屏幕畢竟是有區(qū)別的。有興趣深入了解的同學(xué)可以閱讀以下三本官方提供的規(guī)范。做移動(dòng)端app最重要的是了解規(guī)范，了解規(guī)范之后，再多看其他做得好的應(yīng)用，多體驗(yàn)，就有利于讓我們?cè)O(shè)計(jì)出好的app?？偨Y(jié)

app設(shè)計(jì)和網(wǎng)站設(shè)計(jì)，專題設(shè)計(jì)很不一樣，因?yàn)椴僮骱惋@示總結(jié)

各種移動(dòng)界面展示總結(jié)

各種移動(dòng)界面展示總結(jié)

另外有一個(gè)網(wǎng)站不錯(cuò)，強(qiáng)大的設(shè)計(jì)網(wǎng)址集合總結(jié)

另外有一個(gè)網(wǎng)站不錯(cuò)，強(qiáng)大的設(shè)計(jì)網(wǎng)址集合總結(jié)

最后附上ipad和iphoneGUIpsd?？偨Y(jié)

最后附上ipad和iphoneGUIpsd。總結(jié)

PPT看完，信息量有點(diǎn)大，附上個(gè)人整理的移動(dòng)端app設(shè)計(jì)指南信息圖一張~日后大家做移動(dòng)端設(shè)計(jì)時(shí)可以對(duì)照著參考。總結(jié)

PPT看完，信息量有點(diǎn)大，附上個(gè)人整理的移動(dòng)端app設(shè)移動(dòng)產(chǎn)品設(shè)計(jì)基礎(chǔ)教材課件移動(dòng)產(chǎn)品設(shè)計(jì)基礎(chǔ)移動(dòng)產(chǎn)品設(shè)計(jì)基礎(chǔ)移動(dòng)產(chǎn)品設(shè)計(jì)基礎(chǔ)一、移動(dòng)產(chǎn)品特性二、尺寸與分辨率

三、界面布局四、字體五、圖標(biāo)六、切圖七、總結(jié)

CONTENTS目錄移動(dòng)產(chǎn)品設(shè)計(jì)基礎(chǔ)一、移動(dòng)產(chǎn)品特性CONTENTS目錄移動(dòng)產(chǎn)品設(shè)計(jì)基礎(chǔ)移動(dòng)產(chǎn)品特性移動(dòng)產(chǎn)品設(shè)計(jì)基礎(chǔ)移動(dòng)產(chǎn)品特性移動(dòng)產(chǎn)品特性移動(dòng)產(chǎn)品的種類常用的移動(dòng)產(chǎn)品按尺寸分有手機(jī)和平板電腦等，按平臺(tái)分有iOS,Android,Windows，Windowsphone等.這里我們主要講iPhone、iPad、Android手機(jī)app的設(shè)計(jì)基礎(chǔ)知識(shí)。什么是安卓：Android是一種基于Linux的自由及開(kāi)放源代碼的操作系統(tǒng)，主要使用于便攜設(shè)備，如智能手機(jī)和平板電腦。Android操作系統(tǒng)最初由AndyRubin開(kāi)發(fā)，主要支持手機(jī)。2005年由Google收購(gòu)注資，并組建開(kāi)放手機(jī)聯(lián)盟開(kāi)發(fā)改良隨后，逐漸擴(kuò)展到平板電腦及其他領(lǐng)域上。2008年10月第一部Android智能手機(jī)發(fā)布。什么是iOS：蘋(píng)果iOS是由蘋(píng)果公司開(kāi)發(fā)的手持設(shè)備操作系統(tǒng)。蘋(píng)果公司最早于2007年1月9日的Macworld大會(huì)上公布這個(gè)系統(tǒng)，最初是設(shè)計(jì)給iPhone使用的，后來(lái)陸續(xù)套用到iPodtouch、iPad以及AppleTV等蘋(píng)果產(chǎn)品上。注意：寫(xiě)法是iPhone、iPad、iPod、iOS。移動(dòng)產(chǎn)品特性移動(dòng)產(chǎn)品的種類常用的移動(dòng)產(chǎn)品按尺寸分有手機(jī)和平板移動(dòng)產(chǎn)品特性移動(dòng)產(chǎn)品的種類MetroUI是一種界面展示技術(shù)，和蘋(píng)果的iOS、谷歌的Android界面最大的區(qū)別在于：后兩種都是以應(yīng)用為主要呈現(xiàn)對(duì)象，而Metro界面強(qiáng)調(diào)的是信息本身，而不是冗余的界面元素。顯示下一個(gè)界面的部分元素的功能上的作用主要是提示用戶“這兒有更多信息”。同時(shí)在視覺(jué)效果方面，這有助于形成一種身臨其境的感覺(jué)。WindowsPhone是微軟發(fā)布的一款手機(jī)操作系統(tǒng)，它將微軟旗下的XboxLive游戲、Zune音樂(lè)與獨(dú)特的視頻體驗(yàn)整合至手機(jī)中。2010年10月11日晚上9點(diǎn)30分，微軟公司正式發(fā)布了智能手機(jī)操作系統(tǒng)WindowsPhone。移動(dòng)產(chǎn)品特性移動(dòng)產(chǎn)品的種類MetroUI是一種界面展示技術(shù)移動(dòng)產(chǎn)品特性移動(dòng)產(chǎn)品使用特點(diǎn)移動(dòng)設(shè)備的方便攜帶，也同時(shí)帶來(lái)了它瀏覽時(shí)間的碎片化。以智能手機(jī)為例：我們通常在短暫的時(shí)間里，完成一件任務(wù)或者是進(jìn)行一個(gè)娛樂(lè)事件，比如：散步、坐公交、睡前、午后閑暇、旅行的時(shí)候，開(kāi)始拍照、分享、做筆記、玩游戲、購(gòu)物，等等。在平均短短5-30分鐘的時(shí)間里，思路常常被打斷，手機(jī)常常被拿起放下，高效和輕交互，就成為了移動(dòng)設(shè)計(jì)的特點(diǎn)。而對(duì)于平板電腦而言，它的使用時(shí)間一般為在家中較為安靜，舒適的環(huán)境空間下，使用時(shí)間也較為固定。移動(dòng)產(chǎn)品特性移動(dòng)產(chǎn)品使用特點(diǎn)移動(dòng)設(shè)備的方便攜帶，也同時(shí)帶來(lái)了移動(dòng)產(chǎn)品特性手勢(shì)對(duì)比移動(dòng)產(chǎn)品特性手勢(shì)對(duì)比移動(dòng)產(chǎn)品設(shè)計(jì)基礎(chǔ)尺寸與分辨率移動(dòng)產(chǎn)品設(shè)計(jì)基礎(chǔ)尺寸與分辨率尺寸與分辨率移動(dòng)產(chǎn)品使用特點(diǎn)屏幕尺寸：

通常是指屏幕的物理尺寸，是屏幕的對(duì)角線長(zhǎng)度。比如2.8英寸,3.7英寸。分辨率：

是指屏幕上擁有的像素的總數(shù)。通常使用“寬度×長(zhǎng)度”來(lái)表達(dá)。雖然大部分情況下分辨率都被表示為“寬度×長(zhǎng)度”，但分辨率并不意味著屏幕的比例。尺寸與分辨率移動(dòng)產(chǎn)品使用特點(diǎn)屏幕尺寸：

通常是指屏幕的物理尺尺寸與分辨率移動(dòng)產(chǎn)品使用特點(diǎn)Apple為了防止在交流過(guò)程中（尤其對(duì)于編程實(shí)現(xiàn)）分辨率對(duì)思維的迷惑，統(tǒng)一使用點(diǎn)（Point）對(duì)界面元素的大小進(jìn)行描述，例如：

iPhone/iPod

Touch界面描述

320點(diǎn)

x

480點(diǎn)iPhone/iPad界面描述

768點(diǎn)

x

1024點(diǎn)換算關(guān)系

普屏

1點(diǎn)（1pt)

=

1像素

Retina屏

1點(diǎn)(1pt)

=

2像素

這樣，不管我們是在為普屏還是Retina屏進(jìn)行設(shè)計(jì)與開(kāi)發(fā)，我們都可以清楚地，并且統(tǒng)一地使用點(diǎn)對(duì)界面元素的大小進(jìn)行描述了。

尺寸與分辨率移動(dòng)產(chǎn)品使用特點(diǎn)Apple為了防止在交流過(guò)程中（尺寸與分辨率iPhoneiPhone：

第一代的iPhone屏幕尺寸為3.5英寸，分辨率為320*480，屏幕密度為165PPI，而從iPhone4開(kāi)始屏幕密度增加了兩倍，分辨率達(dá)到640*960。而到現(xiàn)在iphone5的分辨率則為640*1136。

在設(shè)計(jì)iPhone的應(yīng)用程序界面時(shí)，設(shè)計(jì)師要以640*960的基準(zhǔn)進(jìn)行設(shè)計(jì)，然后制作一套縮小兩倍的圖片資源。(未縮的我們叫兩倍圖，縮了的叫一倍圖）因?yàn)樗衖Phone都使用了相同的尺寸，所以最終能在兩種分辨率上顯示的物理大小完全相同。由于iphone5只是高度發(fā)生變化，在適配時(shí)一般保持設(shè)計(jì)控件大小不變，只是內(nèi)容露出增多。但對(duì)于一些滿屏設(shè)計(jì)的界面則需要考慮是否需要另外設(shè)計(jì)一份頁(yè)面640*1136（如app背景圖，啟動(dòng)圖等等）尺寸與分辨率iPhoneiPhone：

第一代的iPhone尺寸與分辨率iPhone320px480pxiPhone-iPhone3GSiPhone4-iPhone4SiPhone5640px960px640px1136px尺寸與分辨率iPhone320px480pxiPhone-i尺寸與分辨率iPadiPad：

第一代的iPad屏幕尺寸為9.7英寸，分辨率為1024*768，屏幕密度為132PPI。全新的iPad屏幕密度同樣提升了兩倍，分辨率達(dá)到2048*1536。最近新出的iPadmini屏幕尺寸為7.9英寸，分辨率為1024*768。

在設(shè)計(jì)iPad的應(yīng)用程序時(shí)，設(shè)計(jì)師要以2048*1536的基準(zhǔn)進(jìn)行設(shè)計(jì)，然后制作一套縮小兩倍的圖片資源。(未縮的我們叫兩倍圖，縮了的叫一倍圖）iPadmini由于和iPad比例一樣，不需要另外設(shè)計(jì)，直接可以使用相應(yīng)的一倍圖適配到設(shè)備中。尺寸與分辨率iPadiPad：

第一代的iPad屏幕尺寸為9尺寸與分辨率iPad768px1024pxiPad1-iPad2iPad3-iPad4iPadmini1536px2048px768px1024px尺寸與分辨率iPad768px1024pxiPad1-iPa尺寸與分辨率AndroidAndroid設(shè)備：

Android設(shè)備的屏幕相對(duì)復(fù)雜一些，因?yàn)樗鼈冇懈鞣N尺寸和分辨率。

為了讓各種分辨率的屏幕顯示合適的大小以方便用戶閱讀或者操作，同時(shí)又能滿足Android設(shè)備多樣性的需求。于是，Android官方通過(guò)對(duì)各種屏幕進(jìn)行密度等級(jí)劃分，最后分為“低密度（LDPI）”、“中密度（MDPI）”、“高密度（HDPI）”、“超高密度（XHDPI）”這四個(gè)規(guī)格，并同時(shí)將“中密度”定義為基準(zhǔn)線。這樣，在設(shè)計(jì)Android應(yīng)用程序的界面時(shí)，我們就可以一視同仁把中密度的屏幕作為基準(zhǔn)進(jìn)行設(shè)計(jì)，然后給其它密度的屏幕提供相應(yīng)的圖片資源。最后通過(guò)系統(tǒng)的適配性自動(dòng)處理，一樣使得相同的內(nèi)容在各種屏幕上可以顯示比較接近的大小。在太平洋，一般我們?cè)O(shè)計(jì)為480*800的尺寸。尺寸與分辨率AndroidAndroid設(shè)備：

Androi移動(dòng)產(chǎn)品設(shè)計(jì)基礎(chǔ)界面布局移動(dòng)產(chǎn)品設(shè)計(jì)基礎(chǔ)界面布局界面布局iPhoneiPhone：

界面布局iPhoneiPhone：

界面布局iPhoneiPhone：

界面布局iPhoneiPhone：

界面布局iPadiPad：

狀態(tài)欄高20pt導(dǎo)航欄高44pt導(dǎo)航欄圖標(biāo)≤20pt*20pt導(dǎo)航欄按鈕48pt*64pt標(biāo)簽欄高49pt標(biāo)簽欄圖標(biāo)≤30pt*30pt界面布局iPadiPad：

狀態(tài)欄高20pt導(dǎo)航欄高44pt界面布局狀態(tài)欄(statusbar）

規(guī)范里的話：狀態(tài)欄是展示關(guān)于設(shè)備的重要信息，包括信號(hào)強(qiáng)弱、網(wǎng)絡(luò)連接情況、電池情況等。實(shí)際應(yīng)用上：一般而言所有界面都需要狀態(tài)欄，除非是游戲等沉浸式的app，和某些全屏顯示圖片的界面。320pt*20pt界面布局狀態(tài)欄(statusbar）

規(guī)范里的話：320界面布局導(dǎo)航欄（navigationbar)

規(guī)范里的話：導(dǎo)航欄展示在頂部狀態(tài)欄的下方在一個(gè)應(yīng)用的不同視覺(jué)中進(jìn)行導(dǎo)航提供對(duì)當(dāng)前視圖內(nèi)容進(jìn)行管理的空間導(dǎo)航欄可以僅僅以橫向居中方式顯示當(dāng)前視圖的標(biāo)題當(dāng)用戶進(jìn)入其他視圖時(shí)，導(dǎo)航欄的標(biāo)題應(yīng)該更改為當(dāng)前位置的標(biāo)題，并且應(yīng)該提供包含上一位置的后退按鈕。除了后退按鈕外，導(dǎo)航欄可以在標(biāo)題右側(cè)包含第二個(gè)按鈕，如編輯，添加。320pt*44pt按鈕可以是文字或圖標(biāo)界面布局導(dǎo)航欄（navigationbar)

規(guī)范里的話：界面布局導(dǎo)航欄（navigationbar)

實(shí)際應(yīng)用上：頂部狀態(tài)欄下不一定就是導(dǎo)航欄，可以沒(méi)有，也可以是搜索欄等等。導(dǎo)航欄大于44pt，頁(yè)面標(biāo)題左對(duì)齊界面布局導(dǎo)航欄（navigationbar)

實(shí)際應(yīng)用上：界面布局導(dǎo)航欄（navigationbar)

實(shí)際應(yīng)用上：不同的元素組合成導(dǎo)航欄界面布局導(dǎo)航欄（navigationbar)

實(shí)際應(yīng)用上：界面布局導(dǎo)航欄（navigationbar)

實(shí)際應(yīng)用上：頁(yè)面標(biāo)題和按鈕一樣可點(diǎn)擊界面布局導(dǎo)航欄（navigationbar)

實(shí)際應(yīng)用上：界面布局標(biāo)簽欄（tabbar)

規(guī)范里的話：標(biāo)簽欄顯示在屏幕的下方邊緣標(biāo)簽欄向用戶提供了再應(yīng)用的不同模式或不同視圖間切換的能力。標(biāo)簽欄顯示圖標(biāo)和文本，每一個(gè)標(biāo)簽欄元素等寬地顯示標(biāo)簽欄被選擇的標(biāo)簽需要有一個(gè)當(dāng)前的高亮狀態(tài)無(wú)論橫屏豎屏都不改變其高度標(biāo)簽不超過(guò)5個(gè)時(shí)，可以在標(biāo)簽欄中等寬地展示當(dāng)標(biāo)簽超過(guò)5個(gè)時(shí)，系統(tǒng)會(huì)展示其中4個(gè)并展示一個(gè)“更多”的標(biāo)簽可以在卡片欄上顯示一個(gè)提醒標(biāo)記320pt*49pt界面布局標(biāo)簽欄（tabbar)

規(guī)范里的話：320pt*4界面布局標(biāo)簽欄（tabbar)

實(shí)際應(yīng)用上：并不是所有的首頁(yè)都有標(biāo)簽欄。當(dāng)圖標(biāo)意義足夠明確，可以不使用文字；當(dāng)標(biāo)簽意義過(guò)于抽象，可以全部只使用文字界面布局標(biāo)簽欄（tabbar)

實(shí)際應(yīng)用上：當(dāng)圖標(biāo)意義足夠界面布局標(biāo)簽欄（tabbar)

實(shí)際應(yīng)用上：形狀上不一定就是長(zhǎng)方形，不一定所有標(biāo)簽都等寬。界面布局標(biāo)簽欄（tabbar)

實(shí)際應(yīng)用上：界面布局工具欄（toolbar)

規(guī)范里的話：工具欄顯示在屏幕下方邊緣包含用于針對(duì)當(dāng)前頁(yè)面內(nèi)容執(zhí)行動(dòng)作的按鈕在工具欄上相應(yīng)的元素等寬的進(jìn)行排列工具欄中提供不超過(guò)5個(gè)元素是較為合適的，推薦用戶點(diǎn)擊區(qū)域?yàn)?4pt*44pt設(shè)備手持方向從豎向變?yōu)闄M向時(shí)，會(huì)自動(dòng)改變工具欄的高度320pt*44pt界面布局工具欄（toolbar)

規(guī)范里的話：320pt*界面布局工具欄（toolbar)

實(shí)際應(yīng)用上：家居雜志和太平洋電腦網(wǎng)客戶端內(nèi)頁(yè)工具欄展示界面布局工具欄（toolbar)

實(shí)際應(yīng)用上：界面布局點(diǎn)擊區(qū)域

規(guī)范里的話：在設(shè)計(jì)任何可點(diǎn)擊的部件時(shí)，設(shè)計(jì)師應(yīng)該首先考慮設(shè)計(jì)區(qū)域是否易于讓用戶點(diǎn)擊，因此在設(shè)計(jì)規(guī)范里，任何可點(diǎn)擊的部件，大小都不應(yīng)小于44*44pt。因此，按鈕不應(yīng)小于44*44pt;app的banner廣告圖高度也不應(yīng)小于44pt；列表的高度也不應(yīng)小于44pt等等。界面布局點(diǎn)擊區(qū)域

界面布局設(shè)計(jì)區(qū)域

由于在設(shè)計(jì)中，設(shè)計(jì)師是按照retina屏幕分辨率去設(shè)計(jì)的，在設(shè)計(jì)的最后輸出一倍圖的時(shí)候我們需要將兩倍縮小成一倍圖，因此，在兩倍圖的設(shè)計(jì)中，必須保證每一個(gè)單獨(dú)存在的個(gè)體的大小是雙數(shù)像素，如148px*248px。這樣才能使在縮小到一倍圖的時(shí)候不會(huì)出現(xiàn)13.5*17.5像素的情況（大家都知道世界上是沒(méi)有半個(gè)像素的存在的，像素不齊便會(huì)出現(xiàn)虛擬像素，圖像會(huì)模糊）界面布局設(shè)計(jì)區(qū)域

界面布局其他控件

IOS的控件還有很多很多，以上列舉的是比較常見(jiàn)到的，是做每一個(gè)app都會(huì)設(shè)計(jì)到的。另外還有鍵盤(pán)，提示框，時(shí)間和日期選擇器，選擇器，進(jìn)度顯示器，搜索欄，滑動(dòng)調(diào)節(jié)器等等。這些一般可以直接使用系統(tǒng)提供的樣式，不需要另外設(shè)計(jì)（當(dāng)有需求的時(shí)候也可以設(shè)計(jì)，不過(guò)由于其操作比較復(fù)雜，很多時(shí)候另外設(shè)計(jì)實(shí)現(xiàn)得還不如直接系統(tǒng)自帶的）界面布局其他控件

移動(dòng)產(chǎn)品設(shè)計(jì)基礎(chǔ)字體移動(dòng)產(chǎn)品設(shè)計(jì)基礎(chǔ)字體字體iOS里的默認(rèn)字體

在ios中默認(rèn)字體分為三類：第一種：STHeiti-Light.ttc和STHeiti-Medium.ttc代表的是中文字體第二種：_H_Helvetica.ttc和_H_HelveticaNeue.ttc代表的是英文以及數(shù)字字體第三種：LockClock.ttf代表的是鎖屏?xí)r間字體字體iOS里的默認(rèn)字體

字體iOS里的中文字體

蘋(píng)果默認(rèn)的中文字體是HeitiSC（黑體-簡(jiǎn)，黑體-簡(jiǎn)的英文名稱為HeitiSC。Heiti為黑體的拼音，SC代表簡(jiǎn)體中文（SimplifiedChinese）），是MacOSXSnowLeopard（版本10.6）包含的簡(jiǎn)體中文字型，也是iPhoneOS3.0（版本4.0后改名為iOS）及iPodnano第五代以來(lái)的預(yù)設(shè)簡(jiǎn)體中文字型。當(dāng)我們?cè)谟肞C設(shè)計(jì)的時(shí)候，比較接近這種字體的是方正黑體簡(jiǎn)體。iOS里面的中文字體是比較少的，看上去都差不多，總結(jié)起來(lái)就是黑體，粗黑體和斜黑體三種。iOS里的英文/數(shù)字字體相對(duì)中文而言，iOS里的英文和數(shù)字的字體樣式就比較多了，在設(shè)計(jì)的時(shí)候可以挑選合適界面的英文字體使用，但需要注意該字體是否在各個(gè)版本的系統(tǒng)能夠通用。字體iOS里的中文字體

iOS里的英文/數(shù)字字體字體

字體

字體實(shí)際應(yīng)用

中文應(yīng)用在界面上面時(shí)，一般我們用方正黑體簡(jiǎn)體做設(shè)計(jì)。而且不能帶有任何的設(shè)計(jì)效果和樣式（只能是純色，可以帶有陰影，由技術(shù)來(lái)實(shí)現(xiàn)）但也有例外，例如是寫(xiě)在圖片上的文字；一些比較特殊的不會(huì)更改的詞句這時(shí)可以用其他字體和使用樣式，由切圖來(lái)實(shí)現(xiàn)。字體實(shí)際應(yīng)用

字體

我們?cè)谠O(shè)計(jì)時(shí)，重要的視覺(jué)部分可以做文字的樣式（前提是這部分不會(huì)改變）例如首頁(yè)的標(biāo)題，底部標(biāo)簽欄的文字（它們一般都是固定不會(huì)更改的）改變的文字切圖實(shí)現(xiàn)。但二級(jí)頁(yè)面及之后的標(biāo)題就會(huì)由技術(shù)來(lái)實(shí)現(xiàn)了。個(gè)人經(jīng)驗(yàn)一般字體最小不小于24px，標(biāo)題等可到38px-44px。字體

移動(dòng)產(chǎn)品設(shè)計(jì)基礎(chǔ)圖標(biāo)移動(dòng)產(chǎn)品設(shè)計(jì)基礎(chǔ)圖標(biāo)圖標(biāo)導(dǎo)航欄和工具欄的標(biāo)準(zhǔn)按鈕圖標(biāo)

圖標(biāo)導(dǎo)航欄和工具欄的標(biāo)準(zhǔn)按鈕圖標(biāo)

圖標(biāo)導(dǎo)航欄和工具欄的標(biāo)準(zhǔn)按鈕圖標(biāo)

圖標(biāo)導(dǎo)航欄和工具欄的標(biāo)準(zhǔn)按鈕圖標(biāo)

圖標(biāo)標(biāo)簽欄的標(biāo)準(zhǔn)按鈕圖標(biāo)

圖標(biāo)標(biāo)簽欄的標(biāo)準(zhǔn)按鈕圖標(biāo)

圖標(biāo)Appicon設(shè)計(jì)尺寸

我們一般設(shè)計(jì)最大尺寸的1024px*1024px,再縮小為各個(gè)尺寸的圖標(biāo)。iPhoneapp圖標(biāo)iPadapp