iPhone界面設(shè)計(jì)

iPhone和Android界面設(shè)計(jì)知識(shí)大匯總【APP設(shè)計(jì)專題】

3019

iPhoneui界面設(shè)計(jì)的宗旨-簡單為主，APP用戶體驗(yàn)設(shè)計(jì)之上

我們做設(shè)計(jì)的或是交互的，現(xiàn)在都是以用戶為主的iPhoneui界面設(shè)計(jì)，一定要走得人性化一點(diǎn)，才能引起用戶的共鳴。才能贏得更多的用戶的喜愛。

APP用戶體驗(yàn)設(shè)計(jì)之一：iPhone UI 設(shè)計(jì)尺寸規(guī)范

25學(xué)堂跟大家分享一個(gè)非常詳細(xì)的iPhone UI 尺寸參考圖，方便 iPhone 開發(fā)新手和界面設(shè)計(jì)新手使用！下面的iPhone UI 尺寸圖由SegmentFault參照iPhone 人機(jī)界面設(shè)計(jì)指南整理而出！

在這里，25學(xué)堂再次感謝SegmentFault的辛勤制作。

iPhone和Android界面設(shè)計(jì)知識(shí)-分辨率

分辨率是屏幕物理像素的綜合，一般用屏寬像素?cái)?shù)以屏高像素?cái)?shù)來表示，比如480px*800px，320px*480px等，像素是顯示屏規(guī)范中的最小單位。

android的分辨率和IOS類似，它有四個(gè)像素密度，android提供120DPI（低密度）,160DPI（中密度）,240DPI（高密度）和320DPI（超高密度），所有用戶界面都是基于四個(gè)密度之一的尺寸來設(shè)計(jì)的。要支持所有4個(gè)密度，是很悲劇的。如果一開始是以160DPI來設(shè)計(jì)，那么你就需要擴(kuò)展這些密度到100%、150%和200%。

AndroidDPI設(shè)計(jì)知識(shí)詳解：

ppi(pixels per inch)：圖像的采樣率（在圖像中，每英寸所包含的像素?cái)?shù)目）

dpi(dots per inch)：打印分辨率（每英寸所能打印的點(diǎn)數(shù)，即打印精度）

打印尺寸、圖像的像素?cái)?shù)與打印分辨率之間的關(guān)系可以利用下列的計(jì)算公式加以表示：

圖像的橫向（豎向）像素?cái)?shù)=打印橫向（豎向）分辨率×打印的橫向（豎向）尺寸，

圖像的橫向（豎向）像素?cái)?shù)/打印橫向（豎向）分辨率=打印的橫向（豎向）尺寸。

針對特定的圖像而言，圖像的像素?cái)?shù)是固定的，所以，打印分辨率和打印尺寸便呈現(xiàn)反比的關(guān)系。

一款成功的APP是如何設(shè)計(jì)的? ? ?需要注意哪些細(xì)節(jié)或注意的原則

設(shè)計(jì)步驟

1、App用戶體驗(yàn)設(shè)計(jì)—從名稱確定-圖標(biāo)制作-色彩輔助，圖標(biāo)設(shè)計(jì)技巧可以為扁平化設(shè)計(jì)、長投影設(shè)計(jì)等。

有興趣可以看看：設(shè)計(jì)成功APP游戲圖標(biāo)的4項(xiàng)原則

2、App用戶體驗(yàn)設(shè)計(jì)—界面擬物化或是扁平化設(shè)計(jì)，布局使用卡片式設(shè)計(jì)等。

視覺層：界面設(shè)計(jì)的現(xiàn)實(shí)模擬

flava為了傳達(dá)出記錄生活的語義

使用了日志本式紋理的封面。

行為層：功能和操作行為的現(xiàn)實(shí)模擬

如閱讀體驗(yàn)中的翻頁

運(yùn)勱過程中的加速和緩沖

如指南針的模擬

3、App用戶體驗(yàn)設(shè)計(jì)-界面設(shè)計(jì)布局決定應(yīng)用結(jié)構(gòu)

4、App用戶體驗(yàn)設(shè)計(jì)—盡量圖形化 ? 輕功能，重交換體驗(yàn)

操作入口隨需要呈現(xiàn)，利用手機(jī)特點(diǎn)使用多點(diǎn)手勢。比較直觀的操作。

?第三部分：APP界面設(shè)計(jì)素材的分享和積累

收藏一些經(jīng)典的APP設(shè)計(jì)素材對于設(shè)計(jì)師來說，是很重要的一項(xiàng)工作，每天吸收一點(diǎn)每天模仿一點(diǎn)，才能提高自己的設(shè)計(jì)能力和設(shè)計(jì)視野。下面這些是25學(xué)堂在2013年收集和分享的一些好的APP設(shè)計(jì)素材。希望大家可以用得上。

1、國外30個(gè)優(yōu)秀移動(dòng)APP UI界面設(shè)計(jì)的靈感分享

2、44個(gè)美麗有趣的Flat圖標(biāo)素材包免費(fèi)下載

3、18個(gè)精美的APP界面設(shè)計(jì)模板|APPpsd素材免費(fèi)下載

4、6個(gè)優(yōu)秀的App界面設(shè)計(jì)PSD素材網(wǎng)站推薦

5、經(jīng)典Appui設(shè)計(jì)的資源包和免費(fèi)設(shè)計(jì)插件大放送

6、一組3D立體透視效果APP界面展示及7個(gè)常用透視技巧介紹

7、48個(gè)UI設(shè)計(jì)資源酷站分享與資料下載

8、國外免費(fèi)高品質(zhì)Photoshop資源網(wǎng)站

9、48個(gè)免費(fèi)扁平化設(shè)計(jì)APP圖標(biāo)素材包（附PSD源文件）

第四部分：iPhone和Android ui界面設(shè)計(jì)教程分享

作為一名APP界面設(shè)計(jì)新手，我想了解一些相關(guān)的視頻教程是很有必要的。

1、iOS APP圖標(biāo)設(shè)計(jì)參考圖表大全|APP設(shè)計(jì)教程