網站的移動端一般設計多寬

1、在移動端設計稿為1080p的時候,用rem布局。怎麼計算寬度和字體大小？

原文鏈接：http://caibaojian.com/rem-and-px.html

1rem等於多少px呢？·
1rem等於html根元素設定的font-size的px值，假如我們在css裡面設定下面的css。
//code from http://caibaojian.com/rem-and-px.html
html{font-size:14px}

那麼後面的CSS裡面的rem值則是以這個14來換算，例如設定一個div寬度為3rem,高度為2.5rem.則它換算成px為width:42px.height:35px，同理，假如一個設計稿為寬度42px,高度為35px，則換成成rem，則是42/14=3rem，35/14=2.5rem。
如果css裡面沒有設定html的font-size，則默認瀏覽器以1rem=16px來換算。

來源：前端開發博客
這是我查看資料分享過來的，具體對不對要看題主測試之後的結果

2、移動端設計稿是750 實現的時候尺寸是多大

750是像素、PC端是1920、移動端實現也是750

3、手機端網頁設計尺寸多少

iPhone手機網頁的設計尺寸

iPhone5尺寸是640x1136px解析度是326PPI
iPhone4和iPhone4S尺寸是640x960px解析度是326PPI
iPhone和iPodTouch第一代、第二代、第三代尺寸是320x480px解析度是163PPI

安卓網頁的設計尺寸

320dp：一個普通的手機屏幕（240X320，320×480，480X800）
480dp：一個中間平板電腦像（480×800）
600dp：7寸平板電腦（600×1024）
720dp：10寸平板電腦（720×1280，800×1280）

ipad網頁的設計尺寸

iPad第三代第四代尺寸是2048x1536px解析度是264PPI
iPad第一代第二代尺寸是1024x768px解析度是132PPI
iPad Mini尺寸是1024x768px解析度是163PPI

4、移動app設計時，按鈕做多大尺寸

小按鈕比大按鈕更難於操控。當設計移動界面時，最好把可點擊目標的尺寸做大一點，這樣更利於用戶點擊。但這個「大」究竟需要多「大」，才能方便大多數用戶呢？絲路教育小編相信很多移動開發者也非常想知道這個問題的答案，最後都在各平台的UI設計規范中找到了答案。

移動平台設計指導規范告訴了我們什麼？

在蘋果的《iPhone人機界面設計規范》中指出，最小的點擊目標尺寸是44 x 44像素。微軟的《Windows手機用戶界面設計和交互指南》中建議使用34 x 34像素的尺寸，最小也要26 x 26 像素。諾基亞開發指南中建議，目標尺寸應該不小於1cm x 1cm或者28 x 28 像素。

盡管這些指導規范給我們列舉了各平台下可點擊目標的尺寸標准，但是彼此的標准並不一致，更無法和人類手指的實際尺寸相一致，他們的建議尺寸比手指的平均尺寸要小，這會影響觸摸屏下對於點擊目標的精準度。

小的點擊目標會導致大問題

可點擊目標尺寸太小，對於用戶體驗來說就非常糟糕，因為如果要更精確的觸控。用戶需要調整手指的操作方式，從指心操作，變為指尖操作，這樣才能操作尺寸較小的目標。使用指心操作通常會整個覆蓋操作對象，讓用戶無法分辨他們所要操作的目標，也無法收到操作過程中的視覺反饋，也就無法知曉，他們的操作是否有效。當用戶不得不用指尖進行操作時，又出現了一個新問題，這種操作方式非常的慢，而且很吃力，體驗很差。

問題不僅這些，目標的尺寸過小還會導致失誤的觸摸操作。因為尺寸小，所以容易擁擠在一起，用戶容易觸碰到附近的目標，導致運行結果非用戶所願。手指太大，目標尺寸太小，一根手指的寬度大概能覆蓋兩個目標的寬度。如果不按壓到錯誤的位置，就會導致錯誤的操作。食指容易出錯，但是拇指更容易出錯。因為拇指更大、更笨拙。有時候用戶會傾斜拇指，使用拇指的側邊進行操作，但是目標尺寸過小，依然失誤頻繁。

在移動用戶的日常操作中，拇指的使用非常頻繁。有時用戶無法騰開兩只手操作，只能用一隻手握住手機，用拇指和食指操作。在這種場景下，用戶的操作精度有限，就需要提高目標尺寸來避免操作錯誤，這就是所謂的友好的觸控體驗。

食指操作下的平均像素寬度

MIT觸摸實驗室的做了一項研究，以手指指尖作為調查，分析其感覺機能。研究發現，成年人的食指寬度一般是1.6——2 cm。轉換成像素就是45——57 px，這比那些指導書上建議的寬度都要寬。

45——57 px的目標尺寸非常夠用，用戶可以將整個手指緊貼在目標上。在操作的過程中，用戶也能看到目標的邊緣。這樣用戶與控制對象之間的反饋與信息傳達變的非常清晰，用戶也能知曉他們的操作是否有效。因為尺寸大，定位更快，拖移也更方便。費茨法則中提到過，目標越小，操作耗時就越長。小目標減慢了用戶的操作速度，因為需要用戶集中精力去精準定位。手指大小的目標則不一樣，這種目標給予用戶足夠的空間操作，容錯率也很高。

拇指操作情況下的像素寬度

也有很多用戶用拇指敲擊屏幕上的目標。拇指比食指要寬，平均寬度大概在2.5cm，轉換成像素是72 px。

72像素的實際使用效果很棒，更容易定位、操作的舒適感更好。同樣可以看到操作目標的邊緣。這意味著用戶不用費力的調整手指，使用指尖去操作了。也不用傾斜拇指，用拇指側面點擊目標。

在《小型觸摸設備上單手操作研究：關於拇指操作的目標尺寸》這篇文章中發現，目標尺寸的增加會降低失誤操作的次數。更多的空間提供了更高的容錯率和更精確的操作，同時因為大型的尺寸，目標的表現力也變強。

另外一篇《移動端觸摸設計：關於目標選擇的關鍵》中也表達了同樣的看法。

手指大小的目標尺寸很理想，但也有特殊情況

將目標尺寸的大小，設置為跟手指大小相近，其中的好處不再贅述。但並不是適合所有的設計場景。在移動設備上，空間有限。這就意味著，如果每個目標的大小都很大，那麼屏幕空間根本不夠，就需要不斷的翻頁，這在體驗上很糟糕。你需要測量屏幕尺寸，然後計算比例，搞清楚「在這種尺寸的屏幕上，合適的、最大的目標尺寸是多少？」倘若你按照手指大小進行尺寸調整，整個界面的比例很糟糕；再次按照比例調整後，最大的目標尺寸效果也不假，那麼就只能使用指導規范上的建議尺寸了。

對於平板設備來說，情況就沒有手機那麼復雜，因為平板的空間更多。不用害怕沒有空間去放置點擊目標，空間足夠，你可以非常悠然的通過提高尺寸來提高操作適用性。手機是最麻煩的，點擊目標的尺寸非常不好拿捏。但正是因為手機的空間有限，容易操作失誤，所以才需要設置真實手指大小的目標尺寸。設計師的挑戰就在於，要想辦法，讓屏幕上大多數的目標，尺寸都跟手指大小一致。但也有好處，這迫使設計師設計時更注重功能性、風格更加極簡。

為游戲應用設計拇指大小的點擊對象

我們無法推測的問題是，用戶使用你的應用時，是用食指操作更多？還是用拇指更多？因此，針對這一點，我們要非常細致的做調研，然後設置合理的目標尺寸。 然而，如果你的應用是一款游戲的話，大多數用戶會使用拇指。這就是為什麼很多游戲應用中，一些控制項的尺寸一般有拇指那麼大，這樣用戶就能更穩固的雙手持握，更精準的操作。

結論

通過調整目標尺寸的大小，結合實際的應用情況，能夠有效的提高移動端的適用性，同時提高用戶體驗。不管你的應用是游戲還是別的什麼。觸摸屏上的目標就是用來讓用戶點擊的。如果用戶需要去想「我該怎樣去點擊，才能完成精確的操作」，需要再交互前思考方法，需要調整操作方法，使用多種方法才能完成交互。這說明這款產品的交互設計是糟糕的。在這篇文章里，我拋出了個人的一些觀點，在觸摸即將成為操作方式的一統時代，如何打造友好的觸控體驗？這是我們將要面臨的問題。期待更多的想法，以及更規范的標准。

感謝閱讀！

看完這篇絲路提醒你只要記住2點，食指點擊目標尺寸是44 x 44像素，拇指是72 x72像素。所以在畫界面的時候，要注意這2個尺寸。

小技巧：在導出ICON的時候，假如你的ICON實際尺寸是32×32，那麼你可以導出50x50PNG透明背景的ICON，重點是加了透明區域。這樣就更方便點擊了。

5、移動端美工畫布設計尺寸多少合適

網頁尺寸：
淘寶是990（950）寬*任意高，要是自己或者企業的話，這個你隨便定，一般寬度是在950-1200之間
手機尺寸：
淘寶620（480）寬*任意高，要是自己或者用其他軟體的話請參考軟體的要求。

6、移動端web在設計時寬度尺寸是多少合適？

首先說現象，大家都知道移動端設備屏幕尺寸非常多，碎片化嚴重。尤其是Android，你會聽到很多種解析度：480x800, 480x854, 540x960, 720x1280, 1080x1920，而且還有傳說中的2K屏。近年來iPhone的碎片化也加劇了：640x960, 640x1136, 750x1334, 1242x2208。
不要被這些尺寸嚇倒。實際上大部分的app和移動端網頁，在各種尺寸的屏幕上都能正常顯示。說明尺寸的問題一定有解決方法，而且有規律可循。
像素密度
要知道，屏幕是由很多像素點組成的。之前提到那麼多種解析度，都是手機屏幕的實際像素尺寸。比如480x800的屏幕，就是由800行、480列的像素點組成的。每個點發出不同顏色的光，構成我們所看到的畫面。而手機屏幕的物理尺寸，和像素尺寸是不成比例的。最典型的例子，iPhone 3gs的屏幕像素是320x480，iPhone 4s的屏幕像素是640x960。剛好兩倍，然而兩款手機都是3.5英寸的。

7、移動端網頁設計的原則有哪些?

1、菜單簡潔明了

在移動端網頁設計中，因屏幕大小有限，無法設置過多內容，並且在移動設備或平板電腦中用戶會厭煩滾動大型的菜單欄或點擊數量眾多的子菜單，因而菜單欄應簡潔明了，有簡練的產品、服務概述，這樣會縮小用戶的查找范圍，對進一步信息進行點擊或利用搜索功能篩選。

2、表單簡短貼心

移動端網頁設計時應考慮到用戶時間，表單應簡短貼心，在表單中諸如電話號碼、卡片類型和發卡機構是可選項，用戶可根據自身情況選擇填寫即可，以此來建立用戶對網站的信任。比如表單只是用戶用來訂閱電子報，僅需登記用戶姓名和郵箱即可;若是支付表單，應省略不必要欄位，以此來增加網站安全度。

3、簡化表單欄位

設計表單時應考慮到表單欄位數，減少用戶輸入字數;也要盡量將表單做的清晰明了，使必填項和可選項一目瞭然。而表單欄位可以採用多種類型，如下拉式、復選框式以及日歷式。同時在用戶輸入支付信息、物流信息以及預訂行程時，這些類型的欄位都能派的上用場，以及便於回頭用戶更便捷地應用自動填寫功能，縮短購物過程，並為不願注冊賬號的新用戶提供訪客支付選項。

4、通過行為召喚組件(CTAs)吸引用戶眼球

行為召喚組件在移動網頁中尤為重要，在設計移動網頁時，盡可能將行為召喚組件放在最顯眼的黃金位置，相比電腦端用戶，會讓移動端用戶訪問網站目的更加明確。同時在理想情況下，可以將行為召喚組件放置在頁眉上方，用突出的顏色或字體顯示，在合理范圍內讓它們更加醒目，並清晰地表達其內容。

5、提供用戶所需的搜索結果

在設計時，應設置搜索功能，在搜索時在第一頁就顯示出用戶所需的搜索結果，在搜索完成後，為用戶再提供一些篩選條件，如價格、相關度、暢銷商品等，以便用戶篩選出最適合的結果。因為一些移動用戶在訪問網頁時目的十分明確，很少在模糊菜單或一頁又一頁的商品間徘徊。

關於移動端網頁設計的原則有哪些，環球青藤小編就和您分享到這里了。如果您對網站設計、頁面排版、圖像處理方面比較感興趣，希望分享的這篇文章能夠對您有所幫助。如若您還想了解更多關於平面設計的素材及技巧等內容，可以點擊本站的其他文章進行學習。

8、移動端web在設計時寬度尺寸是多少合適

基本上都是640吧，高度由於是專題，可以不受限制的

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

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 中看起來也比較清晰；切圖後的圖片文件大小也適中，應用的內存消耗也不會過高。