當前位置:首頁 » 軟體設計 » 移動端設計圖

移動端設計圖

發布時間: 2021-03-01 00:14:37

㈠ HTML5移動網頁的設計稿尺寸應該是多少

HTML5的移動端網來頁設計稿,通常情況下源,內容區為750px或960px或者1080px的,一般不小於750px像素大小(寬度)
設計稿可以比750px大,但是絕對不能比750px小,這個主要是由於當前手機的解析度相對較高(iPhone 6是375物理像素,但實際像素為其兩倍,也就是750,這個750就是這么來的)
如果設計圖稿過小,前端在實現圖稿的時候裡面的圖片大小在高解析度的情況下會顯得模糊不清,所以這也是為何要「大」解析度
此外需要注意的是,要保證頁面的基準字體大小,在320px的設計稿當中,最小字體不宜小於12像素,其他像素的設計稿當中,等比例換算即可(12/320px*設計稿像素值)

㈡ 移動端設計稿是1242怎麼切圖

還有個兼容性差不多已經沒有問題的單位vw
vw : 1/100th of the width of the viewport.
用法同rem,並且不用設定html的font-size

㈢ 前端工程師遇到要做移動端頁面的時候,給了我一張設計圖,怎麼去切圖,那麼多的手機要適配

用photoshop,然後安裝一個叫cutterman的插件,專門切圖的,適配多種解析度

㈣ html5,設計稿640×2000,我直接切就行了吧~這樣就算2倍圖了吧,移動端製作sprite合並圖是和PC端一樣的嗎

基本上移動端背景圖不會考慮sprite技術的 ,因為解析度太多了,不好計算background-position,都是單獨的圖片

㈤ 做移動端的設計 以什麼尺寸來設計

IOS篇
1、尺寸及解析度
iPhone 界面尺寸:320x480、640x960、640x1136
iPad 界面尺寸:1024x768、2048x1536
(以上單位都是像素哦,至於解析度一般網頁UI和移動UI基本上都只要 72 ppi)
當然,在設計的時候並不是每個尺寸都要做一套,尺寸按自己的手機尺寸來設計,比較方便預覽效果,一般用 640x960 或者 640x1136 的尺寸設計。
P.S. 作圖的時候確保都是用形狀工具(快捷鍵:U)畫的,這樣更方便後期的切圖或尺寸變更~
2、界面基本組成元素
iPhone的APP界面一般由四個元素組成,分別是:狀態欄、導航欄、主菜單欄以及中間的內容區域
這里取用 640x960 的尺寸設計,那我們就說說在這個尺寸下這些元素的尺寸:
狀態欄:就是我們經常說的信號、運營商、電量等顯示手機狀態的區域,其高度為:40 px
導航欄:顯示當前界面的名稱,包含相應的功能或者頁面間跳轉的按鈕,其高度為:88 px
主菜單欄:類似於頁面的主菜單,提供整個應用的分類內容的快速跳轉,其高度為:98 px
內容區域:展示應用提供的相應內容,整個應用中布局變更最為頻繁的,其高度為:734 px

iPhone/iPod Touch
第一代、第二代、第三代

iPhone4/iPhone4s

iPhone5/iPhone5C/iPhone5s
至於我們經常說的 iPhone5/5s 的 640x11136 的尺寸,其實就是中間的內容區域高度增加到:910 px
P.S. 在最新的 iOS7 的風格中,蘋果已經開始慢慢弱化狀態欄的存在,將狀態欄和導航欄合在了一起,但是再怎麼變化,尺寸高度也還是沒有變化的,只不過大家再設計 iOS7 風格的界面的時候多多注意一下~

3、字體大小
iPhone 上的字體英文為: HelveticaNeue 至於中文,Mac下用的是黑體-簡,Win下則為華文黑體。
下圖是網路用戶體驗做過的一個小調查,可以看出用戶可接受的文字大小,像素為單位,也就是大家在PS里的文字像素大小。

P.S. 多留心下一些大公司的數據研究,你會發現很多你根本沒考慮到的問題

Android篇
1、尺寸及解析度
Android 界面尺寸:480x800、720x1280、1080x1920... (單位:像素)
Android 比 iPhone 的尺寸多了很多套,建議取用 720x1280 這個尺寸,這個尺寸 720x1280中顯示完美,在 1080x1920 中看起來也比較清晰;切圖後的圖片文件大小也適中,應用的內存消耗也不會過高。

㈥ 前端兼容pc,移動端,平板要幾套設計圖

3套紫薯補丁

㈦ 手機端網頁設計尺寸多少

要根據不同手機不同的屏幕解析度來規定尺寸。

一般做效果圖主流都是做480*800來測試,iphone4(或s)就用640*960,但這個都只是效果圖,真正開發還需要切圖用點9來做屏幕適配。

常見手機顯示屏解析度:96x65,96x96,128x96,128x128,160x128,160x160,176x144,220x176,240x176,320x240,640x480,800x480

蘋果4:960×640 像素,3.5英寸

三星:480×800 解析度

小米:480×854 4英寸TFT屏幕

android手機屏幕尺寸

1280×800 854×480 640×480 480×800 432×240 400×240 320×480 320×512 320×240

(7)移動端設計圖擴展閱讀:

手機ui設計是手機軟體的人機交互、操作邏輯、界面美觀的整體設計。置身於手機操作系統中人機交互的窗口,設計界面必須基於手機的物理特性和軟體的應用特性進行合理的設計,界面設計師首先應對手機的系統性能有所了解。手機UI設計一直被業界稱為產品的「臉面」,好的UI設計不僅是讓軟體變得有個性有品味,還要讓軟體的操作變得舒適、簡單、自由,充分體現軟體的定位和特點。

隨著手機移動設備不斷普及,對手機設備的軟體需求越來越多,手機移動操作系統廠商正在不約而同地建立手機設備應用程序市場,如Apple的App Store、Google的Android Market、Microsoft的Windows Phone 7 Marketplace,給手機的終端用戶帶來巨量的應用軟體。這些軟體良莠不齊,界面各異,手機的終端用戶在眾多的應用使用中,最終會選擇界面視覺效果良好,且具有良好體驗的應用留在自己的手機上長期使用。

㈧ 移動端psd圖可以直接進行pc端設計嗎

psd文件屬於ps專用格式,只有ps軟體才能打開帶圖層的圖像,部分看圖,美化等軟體,只能打開圖像不會顯示圖層。甚至圖片打不開。

㈨ 移動端1000px的設計圖怎麼排版

IOS篇1、尺寸及解析度iPhone界面尺寸:、640x960、640x1136iPad界面尺寸:1024x768、2048x1536(以上單位都是像素哦,至於解析度一般網頁UI和移動UI基本上都只要72ppi)當然,在設計的時候並不是每個尺寸都要做一套,尺寸按自己的手機尺寸來設計,比較方便預覽效果,一般用640x960或者640x1136的尺寸設計。P.S.作圖的時候確保都是用形狀工具(快捷鍵:U)畫的,這樣更方便後期的切圖或尺寸變更~2、界面基本組成元素iPhone的APP界面一般由四個元素組成,分別是:狀態欄、導航欄、主菜單欄以及中間的內容區域這里取用640x960的尺寸設計,那我們就說說在這個尺寸下這些元素的尺寸:狀態欄:就是我們經常說的信號、運營商、電量等顯示手機狀態的區域,其高度為:40px導航欄:顯示當前界面的名稱,包含相應的功能或者頁面間跳轉的按鈕,其高度為:88px主菜單欄:類似於頁面的主菜單,提供整個應用的分類內容的快速跳轉,其高度為:98px內容區域:展示應用提供的相應內容,整個應用中布局變更最為頻繁的,其高度為:734pxiPhone/iPodTouch第一代、第二代、第三代iPhone4/iPhone4siPhone5/iPhone5C/iPhone5s至於我們經常說的iPhone5/5s的640x11136的尺寸,其實就是中間的內容區域高度增加到:910pxP.S.在最新的iOS7的風格中,蘋果已經開始慢慢弱化狀態欄的存在,將狀態欄和導航欄合在了一起,但是再怎麼變化,尺寸高度也還是沒有變化的,只不過大家再設計iOS7風格的界面的時候多多注意一下~3、字體大小iPhone上的字體英文為:HelveticaNeue至於中文,Mac下用的是黑體-簡,Win下則為華文黑體。下圖是網路用戶體驗做過的一個小調查,可以看出用戶可接受的文字大小,像素為單位,也就是大家在PS里的文字像素大小。P.S.多留心下一些大公司的數據研究,你會發現很多你根本沒考慮到的問題Android篇1、尺寸及解析度Android界面尺寸:480x800、720x1280、1080x1920(單位:像素)Android比iPhone的尺寸多了很多套,建議取用720x1280這個尺寸,這個尺寸720x1280中顯示完美,在1080x1920中看起來也比較清晰;切圖後的圖片文件大小也適中,應用的內存消耗也不會過高。

熱點內容
美發店認證 發布:2021-03-16 21:43:38 瀏覽:443
物業糾紛原因 發布:2021-03-16 21:42:46 瀏覽:474
全國著名不孕不育醫院 發布:2021-03-16 21:42:24 瀏覽:679
知名明星確診 發布:2021-03-16 21:42:04 瀏覽:14
ipad大專有用嗎 發布:2021-03-16 21:40:58 瀏覽:670
公務員協議班值得嗎 發布:2021-03-16 21:40:00 瀏覽:21
知名書店品牌 發布:2021-03-16 21:39:09 瀏覽:949
q雷授權碼在哪裡買 發布:2021-03-16 21:38:44 瀏覽:852
圖書天貓轉讓 發布:2021-03-16 21:38:26 瀏覽:707
寶寶水杯品牌 發布:2021-03-16 21:35:56 瀏覽:837