前端之設計稿二三事

導語: 前端做爲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