移動端網(wǎng)頁設(shè)計時尺寸、響應(yīng)式等問題在設(shè)計開始時怎么考慮？

時間：2024-02-14 22:10:01 | 來源：網(wǎng)站運營

時間：2024-02-14 22:10:01 來源：網(wǎng)站運營

移動端網(wǎng)頁設(shè)計時尺寸、響應(yīng)式等問題在設(shè)計開始時怎么考慮？：謝邀，以前回答過類似的問題，由于具體設(shè)計的風格會影響到尺寸的選擇，所以請根據(jù)具體的需要來做尺寸選擇。




由于移動端的web和APP的設(shè)計規(guī)范不一樣，web統(tǒng)一按照72dpi分辨率設(shè)計，具體移動端小屏幕的設(shè)計尺寸的寬度斷點按照320px還是640px還是750px（我的PSD設(shè)計稿一般是按照750寬度，iphone6的尺寸，但是是按照72dpi來設(shè)計，前端一般能輕易支持320寬的小屏幕），要讓你的設(shè)計能夠被前端采納，總之， 你的設(shè)計要能滿足前端開發(fā)的需要，更多時候的響應(yīng)式，前端可以直接在你的大分辨率下解決。（你的設(shè)計要盡量遵從前端標準，要盡可能滿足前端開發(fā)的需要）




當然你現(xiàn)在需要考慮retina屏幕，設(shè)計盡量用矢量，如果是照片，請考慮@2x的圖片切圖。（讓然大部分中國的web沒那么高要求，retina的適應(yīng)很多時候用戶都不會去要求）


根據(jù)比較新的數(shù)據(jù)整理收集，適應(yīng)于2014~2015+，自己經(jīng)過多次實踐整理和調(diào)整后的一些數(shù)據(jù)，非嚴格數(shù)據(jù)，僅供參考使用。

設(shè)計規(guī)范需要學(xué)習(xí)，設(shè)計時需要作為一個參考，根據(jù)具體的設(shè)計，目標用戶，訪問設(shè)備等去約束自己的設(shè)計，有了規(guī)范才能將設(shè)計的細節(jié)價值體現(xiàn)出來，才能更好的符合W3C的標準。當然題主只是問了尺寸的相關(guān)東西，web設(shè)計還有很多必須掌握而且有難度的規(guī)范，比如中英文字體，色彩等。

規(guī)范并不是命令，不是說你必須按照這些數(shù)值來設(shè)計，而是作為一個參考更好的擬定自己設(shè)計時的數(shù)值。




▇ 常見的分辨率 ▇




▇ 設(shè)計稿（photoshop文件）常用分辨率參照，自己整理的常用的數(shù)值 ▇




▇ 前端切圖常用分辨率參照，自己整理的常用的數(shù)值 ▇







▇ 常用智能手機分辨率和CSS寬度高度規(guī)范 ▇










▇ web在各種分辨率下的安全寬度和首屏高度參考（W3C數(shù)據(jù)）▇







自己以前的一套web設(shè)計得公開課，對響應(yīng)式等分辨率做了詳細的一些操作和總結(jié)。有需要可以參考一下

===============分割線===============

補充：2022年了，也許大家會認為2016年的答案，可能易經(jīng)過時了。其實并不是，設(shè)計的東西，都脫離不了基礎(chǔ)，設(shè)計的東西，無非就是工具的演變和效率提升(比如Figma)。本質(zhì)上的基礎(chǔ)是不會變的。所以不論我提供的的視頻教程還是參考資料，都是不限年限的，并沒有實時性，它們并不會過期。設(shè)計并不等于設(shè)計軟件，軟件運用只是工具。代碼的時效性稍微會強一些（編程語言的基礎(chǔ)、數(shù)據(jù)結(jié)構(gòu)等知識并不會過時，但是框架，代碼規(guī)范和風格等等很容易過時）

如果你覺得2016年的教程已經(jīng)過時了，你大可以直接跳過Photoshop做設(shè)計稿，直接學(xué)Figma在線工具去做一套界面，它提供了非常便捷豐富的設(shè)計組件，快速高效。當你脫離了這種生產(chǎn)工具的時候，你會發(fā)現(xiàn)Photoshop你啥也不會，更別說去思考一個設(shè)計，去實現(xiàn)一個設(shè)計?？赡苡靡粡埣埞P去繪制設(shè)計稿，都會成為阻礙。

就目前2022年來說，大多時候web做一套1920的稿件，再做一套移動端的稿件，比如1334x750(72dpi)的就足夠用了（前端可以將它縮小一半作為常規(guī)尺寸參考，同時使用設(shè)計稿尺寸滿足Retina的要求，WEB是需要前端來輸出的，設(shè)計稿尺寸并不能決定實際項目的尺寸，但是設(shè)計稿換算成72dpi的像素參考是需要前端使用的數(shù)值），要學(xué)會節(jié)約時間提高效率，一味追求多種尺寸的不同布局的設(shè)計，是浪費，做好適配性就可以。APP的建議做大一點，比如按照iPhone X或12的標準去做，APP要考慮3x甚至4x的圖片，這個只要和你的開發(fā)伙伴交流一下確定下尺寸就可以了。而且現(xiàn)在大量常規(guī)的App，是可以直接使用figma這種工具快速成型的，而無需考慮尺寸。比較復(fù)雜的界面設(shè)計，還是需要Photoshop能手細化圖形。

至于APP的設(shè)計，APP的切圖規(guī)則和web是不一樣的，你可以去找APP相關(guān)的規(guī)范。web現(xiàn)在幾乎不需要切圖，前端熟練的話直接代碼成型，取設(shè)計稿里面的素材圖片就行，字體大小可以看看設(shè)計稿數(shù)值。有時候一個1920的web稿件就夠用了，無需花時間再給一個移動設(shè)計稿，當然前端如果不懂設(shè)計，那還是需要提供一個移動搞給他。

最后，如果做的App是混合開發(fā)技術(shù)或者漸進式 Web 應(yīng)用(PWA)，不是純原生，按照web標準做稿就可以,現(xiàn)在做APP成本越來越低，大部分公司都會選擇成本低周期短的方式去開發(fā)（大金主無所謂，幾百萬開發(fā)一個原生的都很正常）。

總之，參考資料需要你根據(jù)實際工作經(jīng)驗靈活判斷選擇，完全可以只提供1~2個尺寸作為自己的標準稿件，我這兩個參考尺寸也是國外項目大多數(shù)稿件的web交付尺寸。當然如果你要求很細，時間很多，你大可以做四五種不同尺寸不同布局的設(shè)計稿，當然我覺得完全沒有必要，PC端一種布局，移動端一種布局就可以了，開發(fā)用代碼能力去做好適配性即可。我自己做開發(fā)的話，如果稿件不復(fù)雜，我只需要設(shè)計師提供一個1920的給我即可，移動端根據(jù)自己的經(jīng)驗直接代碼響應(yīng)或者自適應(yīng)化。如果內(nèi)容復(fù)雜，還是需要提供一個移動端的界面給我參考，節(jié)約代碼輸出時間。