導語: 前端作為web專案開發流程中的一個環節，在實際開發程序中，必定要和ui/互動設計師進行溝通協調，以便保證設計稿能夠完全代碼化，并且是設計師希望的效果，所以，在這里我總結了一些前端開發需要注意的設計稿的一些東西，
目錄
- 設計稿為750px的原理
- 常用中文字體英文名稱
- 設計稿和代碼化的區別
設計稿為750px的原理
很多前端都不知道為什么設計稿的寬要750，這次我就解釋一下通用的說法，
- 手機像素其實是邏輯像素（pt），通常情況下，1pt=2px;
- 設計稿上面的單位一般都是物理像素（px），css一般使用的是px，所以沒有用pt;
- 750px已經是人類視覺可以接受的最大的解析度，再大也看不出效果；
- 一般是以iphone5（320px）或者iphone6（375px）為參考設備；
- 一般情況下的設計稿就是640/750，這樣就是最佳的解析度寬了；
常用中文字體英文名稱
下面是一些常用的設計稿字體英文名稱，
- 宋體 SimSun
- 黑體 SimHei
- 微軟雅黑 Microsoft YaHei
- 微軟正黑體 Microsoft JhengHei
- 新宋體 NSimSun
- 新細明體 PMingLiU
- 細明體 MingLiU
- 標楷體 DFKai-SB
- 仿宋 FangSong
- 楷體 KaiTi
- 仿宋_GB2312 FangSong_GB2312
- 楷體_GB2312 KaiTi_GB2312
- 宋體：SimSuncss中中文字體（font-family）的英文名稱
- Mac OS的一些：
- 華文細黑：STHeiti Light [STXihei]
- 華文黑體：STHeiti
- 華文楷體：STKaiti
- 華文宋體：STSong
- 華文仿宋：STFangsong
- 儷黑 Pro：LiHei Pro Medium
- 儷宋 Pro：LiSong Pro Light
- 標楷體：BiauKai
- 蘋果儷中黑：Apple LiGothic Medium
- 蘋果儷細宋：Apple LiSung Light
- Windows的一些：
- 新細明體：PMingLiU
- 細明體：MingLiU
- 標楷體：DFKai-SB
- 黑體：SimHei
- 新宋體：NSimSun
- 仿宋：FangSong
- 楷體：KaiTi
- 仿宋_GB2312：FangSong_GB2312
- 楷體_GB2312：KaiTi_GB2312
- 微軟正黑體：Microsoft JhengHei
- 微軟雅黑體：Microsoft YaHei
- 裝Office會生出來的一些：
- 隸書：LiSu
- 幼圓：YouYuan
- 華文細黑：STXihei
- 華文楷體：STKaiti
- 華文宋體：STSong
- 華文中宋：STZhongsong
- 華文仿宋：STFangsong
- 方正舒體：FZShuTi
- 方正姚體：FZYaoti
- 華文彩云：STCaiyun
- 華文琥珀：STHupo
- 華文隸書：STLiti
- 華文行楷：STXingkai
- 華文新魏：STXinwei
設計稿和代碼化的區別
一般情況下，前端開發對于設計稿的還原程度能夠達到95%以上就很不錯了，那么為什么會有些許的稍微的差別呢，
網頁設計師容易犯的錯誤
- 以原生APP的體驗對H5頁面進行設計
由于原生APP的體驗流暢，界面華麗，設計師往往會原生App體驗靠攏，盡量參照H5網站進行設計，不要和App作對比，
- 盡量使用計算機自帶字體
設計稿上面的字體要考慮到著作權和開發的問題，不能天馬行空，用一些非常漂亮的優美的字體展現，在編碼程序中需要開發下載設計稿的字體并上傳服務器，但是卻造成盜用著作權、性能降低、訪問緩慢等諸多現實問題；建議使用系統自帶字體，
- 設計稿展現的是最理想的狀態
設計稿展現很理想豐滿，但是現實很骨感，情況相當復雜，反應不出文本溢位，字體折行，解析度大小等問題，設計師在設計的時候一定要注意這些問題，設計圖是死的，現實是多變的，
前端開發工程師容易犯的錯誤
- 寫代碼之前先分析設計稿
三思而后行，拿到設計稿后不要匆匆地去做，寫代碼，避免返工重寫，磨刀不誤砍柴工，結構分析一定要先做，分析頁面整體布局，有哪些模塊，哪些是通用的，特效是什么，有哪些要和設計師再次確認的，沒有問題后再動手寫代碼，
- 仔細審閱設計稿，精確1px編碼
在做的程序中，一定要仔細查看內容，包括邊框太細沒看到，顏色太淡忽略掉等等問題，還有就是單位精確到1px范圍內，細節決定成敗，
- 要考慮動態內容溢位
內容溢位包括文字溢位，串列溢位，從介面獲取資料后內容溢位，拿到設計稿后，確認布局后，就要處理各種溢位問題了，
- 考慮增刪元素
要動態評估頁面，即便一些動態變動內容洗掉調也不影響頁面整體視覺，即便增加內容也不影響現有頁面內容排版布局，
- 考慮可維護性、可擴展性
代碼寫的程序中，一定要考慮可維護性，能自適應的盡量自適應，比如串列那里再加一個分類專案，可以放下，可以擴展內容，根據實際情況，不限高，不限寬度，以便后面好維護，
以上就是有關設計稿的前端這邊要注意的情況，
以上內容出自 Guan'Blog
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/308381.html
標籤：HTML5