• 未分類
  • 平面理論教程
  • Flash教程
  • 其他作品
  • 標誌設計
  • 海報招貼
  • 包裝設計
  • 畫冊設計
  • 網頁設計
  • 名片設計
  • PS作品
  • CG設計
  • MAYA教程
  • Illustrator教程
  • AutoCAD教程
  • 3DMAX教程
  • Painter教程
  • 繪畫教程
  • FireWorks教程
  • 攝影教程
  • 工業設計
  • 網頁設計教程
  • 其他資訊
  • 摺紙大全




  • [ 平面理論教程 ] 寫給設計師的移動頁面適配小知識—- 設計教程




    教學主題: 寫給設計師的移動頁面適配小知識

    大家好!! 小編今天來和大家分享關於 設計教程中的平面理論教程教學

    今天的這個教學主題是: 寫給設計師的移動頁面適配小知識

    這教學的重點為這幾點 [ 知識,頁面,移動,設計師,寫給,設計,方案,設備,開發,尺寸 ]

    希望你可以從這幾點中領悟到修圖的精華

    本文重點

    話說從設計稿到前端頁面實現,是產品流程中非常重要的一環,這個階段決定了設計師設計的設計稿能否完美地變成真正的產品雛形。廢話不多說,本文主要介紹以下三塊內容:移動設備尺寸;前端適配方案;設計師與前端如何對接。

    話說從設計稿到前端頁面實現,是產品流程中非常重要的一環,這個階段決定了設計師設計的設計稿能否完美地變成真正的產品雛形。廢話不多說,本文主要介紹以下三塊內容:移動設備尺寸;前端適配方案;設計師與前端如何對接。

    移動設備尺寸

    網上專門講解移動設備尺寸的文章很多,事實上,移動設備種類之多簡直是噩夢一般。所以,實際在設計或者開發過程中,往往只是選擇幾種設備作為基準來進行設計和開發,而對於其他情況,則採用一些 適配策略 覆蓋。

    寫給設計師的移動頁面適配小知識

    目前主流的,是以 iPhone4 的 640x960px 或者 iPhone6 plus 的 1242x2208px 為基準設計,其他設備均採取適配策略。我們先假定設計稿是按 640x960px 的規範輸出,先來看看前端的常用適配方案。

    前端適配方案

    前端的適配方案大致分為四種:1,根據 meta 按比例縮放;2,根據頁面寬度百分比適應;3,基於媒體查詢的響應式方案;4,REM縮放方案。

    1,根據 meta 按比例縮放

    這種方案的實現更偏技術,大致原理是根據 設備的分辨率及像素比 等信息,計算出頁面的縮放(scale)數值,來進行等比縮放。最終的效果就是基於 640x960px 的設計稿再進行等比縮放,這種實現比較適合某些圖片較多的活動頁面開發,可以使用設計稿上的絕對像素值進行開發,即設計稿上是 200px 則 CSS 代碼中的數值也是 200px。

    當然,這種方案也有致命的缺點,即腳本計算的結果很難覆蓋全部設備,對於一些計算不準確,或者分辨率像素比未知的設備,很容易整個頁面異常放大或縮小,直接暴露嚴重 BUG。綜上,這種縮放方案可以總結出以下基本特徵:

    效果:按設計稿等比縮放

    場景:圖片較多的活動頁面開發

    優點:可以直接按照設計稿像素值開發

    缺點:許多設備無法覆蓋,不斷填坑

    2,根據頁面寬度百分比適應

    曾經很長的一段時間,我們都採用百分比適配方案。例如微信購物入口中的京東購物,目前仍然採用這種方案。

    這種方案的主要表現就是,在比基準設備(如 640x960px)寬的設備上,頁面元素的 橫向寬度 是按百分比自適應的,但是 高度不會變化。所以,無論遇到什麼設備,只需要在寬度上進行兼容即可滿足,而文本圖片等內容,也可以按照寬度自適應,儘可能充分利用屏幕空間。

    而開發時,由於 iPhone 以及許多 Android 機都具有高分辨率屏幕,比如 iPhone4S 的 Retina 屏幕實際像素點是物理像素的 兩倍。所以,我們開發時要在 640x960px 的設計稿尺寸的基礎上除以 2,比如設計稿上的高度是 200px,則 CSS 中就是 height:100px;

    關於 Retina 屏幕的基本知識,建議大家自己查找資料,我只挑重點。

    效果:按設計稿尺寸除以2,元素寬度使用百分比實現

    場景:平台型頁面,頁面布局不是很複雜

    優點:可以適應幾乎所有設備

    缺點:橫向拉寬會使布局比例失調,且複雜結構百分比實現有難度

    3,基於媒體查詢的響應式方案

    響應式設計,曾經乃至現在都是非常時髦的概念,不過在實際應用中,響應式設計還是有其相對狹隘的應用場景。一般除了一些創新的小公司,或者某些專題網站之外,很少會用一套代碼來適配所有終端。比如 PC,Mobile,Pad 甚至 iWatch 等,全都用一套代碼來適配顯然是不科學的。

    目前普遍的觀點是,響應式設計更適合專題頁面,或者沒有資源來針對各個終端進行單獨開發的團隊來使用。

    寫給設計師的移動頁面適配小知識

    響應式設計主要遵循 Mobile First,要針對不同設備給出不同設計方案,並設置合適的 斷點,結合百分比方案,來在不同的設備顯示不同的布局。

    效果:不同設備表現可能截然不同

    場景:專題網站,小團隊低成本開發

    優點:不通設備可以發揮更多的想象力

    缺點:要出多套設計,且內容可能需要取捨

    4,REM縮放方案

    REM 方案的原理跟 meta 方案非常相似,只不過是更加粗暴地根據設備的寬度來調整縮放。與 meta 方案不同的是,REM 方案並不是縮放整個頁面,而是頁面上所有的尺寸都是與根元素(html)的字體大小相關的,我們只是根據不同設備來調整根元素字體大小,則所有尺寸隨之變化。

    效果:按照設計稿等比縮放

    場景:活動頁面及部分平台頁面

    優點:開發方便,適應性好

    缺點:等比縮放超大會顯得不精緻,腳本計算晚頁面可能跳動

    設計師與前端如何對接

    了解了上面的一些適配方案之後,作為設計師同學就要首先確定,我的設計稿在不同的設備上到底需要怎樣的表現?假設遇到了更寬的設備,是橫向拉寬?還是等比縮放?還是再設計一個截然不同的布局?

    這些前提基本確定了該設計稿會如何實現,當然你所設計的頁面可能是平台的一部分,那麼就要遵循平台既有的縮放規則,否則可能會有一些不匹配的問題。比如 meta 不同的兩個頁面來回切換會產生瞬間放大的 BUG 等。

    確定好大致的適配方向,你還要選擇是基於 640 還是基於 1242 的尺寸進行開發,有人提到 iPhone6 的 750,這裡我們可以按照 640 拉寬的情況統一對待。

    不過要注意的是,Sketch 中默認 750 的畫布,可不是按照 640 拉寬來構思的,所以如果要在 Sketch 中基於默認畫布開發,要考慮到放在 640 的機型上 icon 會稍大的情況。

    寫給設計師的移動頁面適配小知識

    如果按照 640 寬度進行設計,實際上我們潛在約定了這是個類似 iPhone4/4S 的 2 倍像素比的設計稿。那麼,無論採用何種適配方案,我們輸出的 icon 等都是 相當於兩倍尺寸的。而在前端開發過程中,如果採用 meta 方案,則 CSS 中使用實際尺寸。

    而如果是百分比方案等,則在樣式中設置設計稿 1/2 的尺寸(對應設備的物理像素),但 icon 圖片本身還是設計稿的尺寸,只是在 Retina 屏幕上需要更多的像素,所以用代碼將其展示時在設備上的物理尺寸壓縮到了 1/2。

    寫給設計師的移動頁面適配小知識

    關於物理像素,CSS像素,像素密度等內容,足夠再寫上 10086 個字了。作為設計師,只 需要知道大概的計算方式,以及基本的適配方案 就可以了。

    最後,也是最重要的,你的團隊一定要有 設計規範,並且有與之對應的 開發規範,這樣才能真正的實現無縫對接。

    看完小編分享的教學之後 是不是對平面理論教程中的設計教程教學更熟悉了呢?

    希望我們所介紹的 寫給設計師的移動頁面適配小知識 這教學會喜歡

    文章標題: 骨子愛創意- 寫給設計師的移動頁面適配小知識–轉載請註明來源處

    本教學分類為平面理論教程中的 設計教程相關教學

    文章相關關鍵字為: 知識,頁面,移動,設計師,寫給,設計,方案,設備,開發,尺寸

    本文永久連結 :寫給設計師的移動頁面適配小知識

    本文轉載自 :VIA