ios,設計規範

2023-01-09 22:33:08 字數 4785 閱讀 2016

篇一:ios介面設計尺寸規範

一、尺寸及解析度

iphone介面尺寸:320*480、640*960、640*1136、750*1334、1080*1920等。

ipad介面尺寸:1024*768、2048*1536等。

單位:畫素72dpi,在設計的時候並不是每個尺寸都要做一套,尺寸按自己的手機來設計,比較方便預覽效果,一般用640*960或者640*1136的尺寸來設計。ps

:作圖的時候確保都是用形狀工具(快捷鍵:u)畫的,這樣更方便後期的切圖或者尺寸變更。

二、介面基本組成元素

iphone的app介面一般由四個元素組成,分別是:狀態列、導航欄、主選單欄、內容區域。

640*960的尺寸設計下這些元素的尺寸。

狀態列:就是我們經常說的訊號、運營商、電量等顯示手機狀態的區域,其高度為:40px

導航欄:顯示當前介面的名稱,包含相應的功能或者頁面間的跳轉按鈕,其高度為:88px

主選單欄:類似於頁面的主選單,提供整個應用的分類內容的快速跳轉,其高度為:98px

內容區域:展示應用提供的相應內容,整個應用中布局變更最為頻繁,其高度為:734px

[下圖說明:]

至於我們經常說的iphone5/5s的640*1136的尺寸,其實就是中間的內容區域高度增加到910px。

ps:在最新的ios7的風格中,蘋果已經開始慢慢弱化狀態列的存在,將狀態列和導航欄合在了一起,但是再怎麼變,尺寸高度也還是沒有變的,只不過大家在設計ios7風格的介面的時候多多注意下~

三、字型大小

heitisc(黑體-簡,黑體-簡的英文名稱為heiti

sc。heiti為黑體的拼音,sc代表簡體中文(simplifiedchinese)),是macosxsnowleopard(版本10.6)包含的簡體中文本型,也是iphoneos

3.0(版本4.0後改名為ios)及ipodnano第五代以來的預設簡體中文本型。

黑體-簡系為黑體,取代華文黑體成為macosxsnow

leopard的預設簡體中文本型。在過去,華文黑體是macos

x的預設簡體中文本型,因此以前並沒有黑體-簡。

黑體-簡是全新的字型,與黑體-繁同以華文黑體為基礎開發,成為macosxsnowleopard與iphoneos

3.0(版本4.0後改名為ios)之後內建並同時為預設的簡體中文本型。

雖與華文黑體為兩套字型,但差異微小,僅排列上有差距,筆畫的差距也十分微小。包含「細體」與「中黑」,黑體-簡與黑體-繁皆使用.ttc(truetype

collection)格式,可以在單一檔案包含多套字型。其中,黑體-簡與黑體-繁的細體在/system/library/fonts/黑體-簡與黑體-繁的中黑在/library/fonts/

在ios中預設字型分為三類:

第一種:和代表的是中文字型

第二種:_h_和_h_代表的是英文以及數字字型第三種:代表的是鎖屏時間字型

iphone上的字型英文為:helveticaneue

。至於中文mac下用的是黑體,win下則為華文黑體。

下圖是百度使用者體驗做過的乙個小調查,可以看出使用者可接受的文字大小。

其實還有個更簡單的方法就是找你覺得好的app應用,手機截圖後放進ps自己比對調節字型大小咯。

我的**——34px,我的、淘歌、發現——30px,muxx——34px,本地**——30px,泡沫、鄧紫棋——24px

總之,方法是自己找到的,想辦法解決問題,自己實踐,比別人告訴你印象更深刻不是麼?

一、尺寸及解析度android

介面尺寸:480*800、720*1280、1080*1920。[單位:畫素]

android比iphone的寸尺多了很多套,建議取用720*1280這個尺寸,這個尺寸720*1280中顯示完美,在1080*1920中看起來比較清晰,切圖後的**檔案大小也適中,應用的記憶體消耗也不會過高。

二、介面基本組成元素

android的app介面和iphone的基本相同:狀態列、導航欄、主選單、內容區域。android中我們取用的720*1280的尺寸設計,那我們就說說在這個尺寸下這些元素的尺寸。

篇二:ios設計規範

一款app的設計稿從設計到切圖

第一部分專案立項階段

在專案設計之初,就該進行專案歸檔整理,一般是是「專案名稱+版本序列」

第二部分photoshop

ios的各種解析度。

1.640*960iphone4時代的尺寸,我最開始用這個尺寸設計,還是擬物的時代呢(基本上現在應該沒人用這個尺寸設計了吧);

2.640*1136iphone5/5s/5c,一更新,咱們設計也得跟著與時俱進(應該還有人用這個設計尺寸),進入扁平的時代了;

3.750*1334iphone6目前是我做設計稿的設計尺寸,iphone的尺寸,向下可以適配iphone4,iphone5,向上可以適配iphone6plus;我記得iphone6

推出後,我問我的設計總監(從業12年)應該用什麼尺寸設計,他是就用iphone6的尺寸吧,好適配,切出來就是@2x了,上下都能照顧到。

所以,我推薦做設計稿的時候使用iphone6的尺寸進行設計。iphone6的尺寸其實相比於以前的5來說很多地方並沒有變化,只是高度也就是內容顯示區域發生了變化。下面是iphone6的空白文件,我建立了參考線。

▼裡面已經設定好了參考線,文件建立之初就設定好參考線是個很好的工作習慣我希望更多的設計師可以養成更完美的工作習慣。上下的參考線很容易設定,因為是根據iphone自身系統設定的,左右的參考線我習慣設定為24px,也就是顯示內容距離邊框的距離。這不是絕對的,究竟是設定為左右30px還是24px比較好,通過對國內國外各種app的對比,覺得24px更適合一些,不寬不窄,這個完全是設計師個人的設計習慣,所以不要當成什麼規範,

第三部分標註下面講標註的問題,頁面怎麼標,標**,可能我涉及不到所有型別頁面,但舉一反五足夠了;切片輸出以及切片命名我們下期再說(如果有錯誤,請一定要及時幫我指出,我不想誤人子弟)。標註是重中之重,工程師能不能完整的還原設計稿,很大一部分取決於標註;如果不清楚你該怎麼標,別怕丟人(我知道有些設計師,特別是剛接觸工作的設計師並不敢張嘴去問),一定要和工程師溝通!包括怎麼標,怎麼切。

每個工程師實現效果的方法不同,我在這裡所說的,是我的標註習慣,也就是我們工程師的開發習慣,但應該適用於大部分的設計師和工程師。不需要每一張效果圖都進行標註,你標註的頁面能保證工程師開發每個頁面的時候都能順利進行即可;當然,這要看跟你配合的工程師的習慣,比如我現在搭檔的兩位ios工程師,一位要求我全都要標註,另一位要求我標註代表性頁面就好(記得標註之前一定要溝通清楚)。

篇三:ios和android的app介面設計規範

ios和android的app介面設計規範

字數876閱讀96439評論36喜歡344

記錄一下ios和andoird的介面設計規範,方便進行標準的產品設計,並與設計師順暢溝通

ios篇

介面尺寸

裝置狀態列高度導航欄高度標籤欄高度60px40px40px40px40px20px20px

132px88px88px88px88px44px44px

147px98px98px98px98px49px49px

1242×2208px

ipad3/4/air/air2/mini22048×1536px

paste_

圖示尺寸

裝置appstore程式應用

主螢幕spotlight工具欄和

標籤欄搜尋導航欄

72*72px50*50px72*72px50*50px

字型iphone上的字型英文為:helveticaneue至於中文,mac下用的是黑體-簡,win下則為華文黑體,所有字型要用雙數字號。

百度使用者體驗部做過乙個小調查,對於app字型大小的調查結論如下:

paste_

顏色值ios顏色值取rgb各顏色的值比如某個色值,給予ios開發的色值為r:12g:34b:56給出的值就是12,34,56(有時也要根據開發的習慣,有時也用十六進製制)

內部設計

1、所有能點選的**不得小於44px(retina需要88px)2、單獨存在的部件必須是雙數尺寸3、兩倍圖以@2x作為命名字尾

4、充分考慮每個控制按鈕在4中狀態下的樣式,如圖

paste_

android篇

介面尺寸

狀態列高度:50px導航欄高度:96px標籤欄高度:96px

android最近出的手機都幾乎去掉了實體鍵,把功能鍵移到了螢幕中,當然高度也是和標籤欄一樣的:96px

內容區域高度為:1038px(1280-50-96-96=1038)

圖表尺寸

螢幕大小

320×480px

480×800px/480×854px/540×960px720×1280px1080×1920px

啟**標

操作欄圖上下文圖系統通知圖示

最細筆畫

標標(白色)

不小於2

px不小於3px不小於2dp不小於6px

96×96px48×48px72×

72px

pxps:android設計規範中,使用的單位是dp,dp在安卓機上不同的密度轉換後的px是不一樣的

字型android上的字型為:droidsansfallback,是谷歌自己的字型,與微軟雅黑很像。android的字型大小調查結論是:

paste_

顏色值android顏色值取值為十六進製制的值比如一綠色的值,給開發的值為#5bc43e

那麼,為了滿足自己的工作需要,我們談談ui設計師需要什麼技能。在視覺設計方面1)平面構成2)色彩構成3)版式設計4)心理學5)美術繪畫6)設計意識在互動設計方面1)了解使用者體驗設計、可用性原則;2)資訊挖掘、使用者調研、資料分析;3)良好的邏輯能力;4)心理學;5)互動設計原則、不同平台的規範;6)產品視覺感;7)溝通能力。

醫院設計規範

第一節一般規定 第3.1.1條主體建築的平面布置和結構形式,應為今後發展 改造和靈活分隔創造條件。第3.1.2條建築物出入口 一 門診 急診,住院應分別設定出入口。二 在門診 急診和住院主要入口處,必須有機動車停靠的平台及雨棚。如設坡道時,坡度不得大於1 10。第3.1.3條醫院的分割槽和醫療用房應...

醫院設計規範

綜合醫院建築設計規範2014 第一章總則 第1.0.1條為使綜合醫院建築設計符合安全 衛生 使用功能等方面的基本要求,特制訂本規範。第1.0.2條本規範適用於城鎮新建 改建和擴建的綜合醫院建築設計,其它專科醫院可參照執行。第1.0.3條同時具備下列條件者為 綜合醫院 一 設定包括大內科 大外科等三科...

彈簧設計規範

一 彈簧的功能 彈簧是一種彈性元件,由於材料的彈性和彈簧的結構特點,它具有多次重複地隨外栽荷的大小而做相應的彈性變形,解除安裝後立即恢復原狀的特性。很多機械正是利用彈簧的這一特點來滿足特殊要求的。其主要功能有 減振和緩衝,如車輛的懸掛彈簧,各種緩衝器和彈性聯軸器中的彈簧等。測力,如測力器和彈簧秤的彈...