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

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

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

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

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

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

iPhone-UI-尺寸參考

 

 

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

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

android的分辨率和IOS類似,它有四個(gè)像素密度,android提供120DPI(低密度),160DPI(中密度),240DPI(高密度)和320DPI(超高密度),所有用戶界面都是基于四個(gè)密度之一的尺寸來(lái)設(shè)計(jì)的。要支持所有4個(gè)密度,是很悲劇的。如果一開(kāi)始是以160DPI來(lái)設(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ù)/打印橫向(豎向)分辨率=打印的橫向(豎向)尺寸。

針對(duì)特定的圖像而言,圖像的像素?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ì)、長(zhǎng)投影設(shè)計(jì)等。

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

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

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

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

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

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

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

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

如指南針的模擬

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)手勢(shì)。比較直觀的操作。

 

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

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

1、國(guó)外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、國(guó)外免費(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ì)教程

2、用戶體驗(yàn)設(shè)計(jì)之《用戶界面設(shè)計(jì)的20條準(zhǔn)則》

3、用戶體驗(yàn)設(shè)計(jì)之以用戶為中心的13種設(shè)計(jì)方法

4、關(guān)于APP Ui界面設(shè)計(jì)的那幾本書(shū)籍

5、淺談APP界面設(shè)計(jì)中的視覺(jué)引導(dǎo)和啟發(fā)式設(shè)計(jì)

6、移動(dòng)APP界面設(shè)計(jì)尺寸講解(新手入門篇)的課程視頻

7、如何使用iPhone和iPad的設(shè)計(jì)模板_APP設(shè)計(jì)新手教程【二】

8、如何設(shè)計(jì)精美的iOS應(yīng)用程序_APP設(shè)計(jì)新手教程

9、移動(dòng)APP產(chǎn)品設(shè)計(jì)和用戶體驗(yàn)設(shè)計(jì)文檔規(guī)范下載

 

還有更多iPhone和Android界面設(shè)計(jì)知識(shí)盡在25學(xué)堂。

APP設(shè)計(jì)群號(hào):229139408 ? 同時(shí)也可以掃一掃APP設(shè)計(jì)學(xué)堂的微信,在網(wǎng)站頂部!

每天更新,
全站高品質(zhì)素材免費(fèi)下載!