做手機 UI 如何根據手機解析度在 PS 建畫布?

比如小米2 手機 解析度為720x1280
屏幕像素密度:342ppi
在ps裡面建畫布時候信息如何填寫?
比如 像素多少乘多少? 屏幕密度(DPI)為多少?
製作圖標的時候(小米2為例子)建畫布應該為多少?(像素和 屏幕密度(DPI))

還有iphone4的APP的UI創建畫布信息如何填寫?(像素 和 屏幕密度(DPI) )
圖標畫布的像素 屏幕密度(DPI)


在做界面設計的時候,PS 文檔里的 DPI 怎麼設置跟每個一像素都沒有關係

更新:
其實很早以前在做印表機產品界面的時候還是用到過這邊的 DPI 設置,主要是 PS 有一個「Print Size」的功能,只要知道目標設備的 PPI (比如 iPhone 4/4S 的是 326)和自己做設計時用的顯示器的 PPI(比如我家的三星 971P 的 PPI 是 86 左右)的比值,再把這個比值乘以 72 作為文檔的 DPI,就能在選擇「Print Size」之後在你的顯示器上以目標設備的尺寸來顯示 PSD 文檔


但是其實非常不推薦這麼做,其一這樣做之後雖然能估計出界面的實際大小,但是縮放比例肯定不是整數倍,PS 里會有比較嚴重的鋸齒基本沒法看,另外一個就是目前已經有太多的工具可以實現在各平台的目標設備上實時查看設計文檔的效果。


在 PS 中 DPI 填寫正確的目標屏幕 PPI 的確有一個好處,就是計算出的物理尺寸是正確的,可以快速的在 PS 中顯示實際物理尺寸看下效果(比如圖標大小、文字大小是否合適),但是由於目標屏幕和當前屏幕 PPI 不同,所以顯示實際物理尺寸時像素不是 1:1 匹配的,效果並不好,還是建議在目標屏幕上預覽實際效果,也正因為此,大家才覺得在 PS 中設置 PPI 無所謂,因為發到目標屏幕後會自動像素匹配顯示。

PS 中的 DPI 主要是針對列印內容的,因為做列印內容時,標尺一般都使用物理尺寸(厘米、英寸等),所以需要填寫正確的列印設備 DPI 才能保證列印效果,大多數都是 300 。

之所以很多人說 72 ,那是早期所有 PC 顯示器的 PPI ,早期所有做網頁設計的都會設置 PS DPI 為 72 ,當然,他們還知道 Mac 是 96 ,MacBook Pro Retina 13寸是 227,15寸 是 220 。

所以,使用 PS 做 UI 時,DPI 不是必須準確的,但是做印刷品時必須準確。


你只需要建立匹配的解析度即可,dpi 是對屏幕而言,不是對像素而言。

PS:舉個不是很精確但是能說明問題的例子:iphone 4s 的解析度是960*640,假設有一張剛好是960*640大小的圖片,放在你的27寸顯示屏上看,會比放在你的 4s 里要大得多,就是因為顯示屏的 dpi 比手機的 dpi 小多了,顯示屏 dpi 一般都不高,因為人眼離顯示器相對人眼離手機屏幕的距離要大得多,高 dpi 雖然精細但是會導致文字圖片太小而閱讀吃力,現在的 retina macbook,就是高 dpi 的顯示器,蘋果通過技術手段解決了文字過小問題,但是,舉個例子,一個網站的圖片如果沒有經過針對 retina 屏幕的優化,就會被拉伸放大到非 retina 屏幕的圖片大小以保障閱讀性,當然是以拉伸圖片導致圖片模糊為代價。


感覺lz和我實習之前所遇到的問題是一樣的,最主要的問題是分不清dpi和ppi。

根據百度百科,dpi是列印解析度又叫做輸出解析度,英文是dot per inch,指在列印輸出時橫向和縱向兩個方向上每英寸最多能夠列印的點數。而ps中的解析度是指dpi,也就是輸出解析度,一般列印小張的點陣圖需要在ps中設置為dpi 250-300,才能列印出清晰的點陣圖。

而ppi叫做圖像解析度,指每英寸圖像內有多少個像素點,英文是pixels per inch。手機屏幕ppi就是根據這個計算出來的。而所有的電子設備,你設置成 72 dpi 就足夠了【具體原理無法解答.......這是某個ui設計群某個大大說的...】。

因為Android機非常多尺寸,最好先問問程序員哥哥做哪一款尺寸的。點九圖的確是可以拉伸不變形,但圖標不是的。最偷懶的畫布建立方法,我看到前任的設計師是叫程序員哥哥用豌豆莢截圖給他,然後連頂欄也不用找mock up,直接套用,基本的格局可以找到相似的app截圖,拉線什麼的他都省了。建立畫布像素就可以直接按照截圖的像素來建立,72dpi,不用管手機屏幕的ppi。

而關於iOS系統的就比較方便了,設備尺寸比較統一,最基本的如下:
iPhone 4/4s 640x960 像素
iPhone 5/5s 640x1136 像素
iPad 1/2/mini 768x1024 像素
New iPad 1536x2048 像素
↑ 怎麼調都是歪的強迫症大神們不要罵我!
還有最原始的版本是320x480,他們的ppi各不相同,比如iPad mini的是132ppi,New iPad就是264了,但是再強調一次,他們ps中的解析度設置都是72dpi

然後關於圖標做成多大,一般是由大的先開始做,1024x1024/512x512,再根據需要做成不同規格,有必要的話再添加細節。
記得好像在微博上還是在boxui上看過一個iOS設計規範的長圖片的,有空你可以去翻翻看。

最後就是和程序員哥哥聊天的時候,他語重心長地叫我去看一個電子書。

叫人機界面設計指南。

所以我就不多說Android上按鈕圖標之類的規範了,因為我做得毫無規範可言。


最後附上iOS7人機界面的譯版,英語不錯的請看原版:iOS7 人機界面設計指南
還有拖了幾百萬年都還沒看過的Android版:Android4.0-DesignGuildline-BaiduMUX資料.pdf-研究報告


我現在做還是按照標準的解析度480*800來做,不用考慮太多解析度和屏幕像素的問題,主要是在後期的切圖,切完的圖需要做成點九格式,這樣就可以在不同的手機解析度下通用了,點九可以無限拉伸而不失真,但像圖標或非常不規則的背景圖案就不行了,做的多大切出來就是多大,這個設計需要綜合考慮下。


請下載PS CC 2015


寶貝兒,市場上手機那麼多。照你的意思就是說,所有的尺寸都得做咯?解析度都是統一72.。。。畫布的大小做750就夠了,安卓和ios都能用


解析度是要對應的,實時測試很重要。


推薦閱讀:

如何評價一個平面設計師的好壞?
中外有哪些優質的、設計感強的抽象風電影海報?
設計如何做到「大氣」?
怎麼評價朱贏椿的《設計詩》?
有哪些有趣的小傢具?

TAG:Adobe Photoshop | 設計 | 手機 | 用戶界面設計 |