創建跨設備的響應式設計

如今25%的網站流量來自于手機。如果你不建立個響應式網站，你將損失1/4的用戶。好消息是借助Sketch、Web Inspectors和CSS3等工具，你將很容易的完成設計。你僅僅需要知道如何開始和如何使用。

最近，我為Carshare.hk, Ripplechat.io 和 Canvaspod.io做移動設計。在此文中，我將帶你一起體會我的工作流程。

在Sketch中建模（原型－譯者注）：

如果你的設計可以很好的適應iPhone的屏幕，那么它將可以在其他大部分的設備上看起來很棒。由于我的目標用戶是全年齡段的人群，他們喜歡更大的字體和圖片。適合在舒適的距離來閱讀。這便是我們追求的目標。我們的目標是建立響應式的專注內容的網站。

在Sketch中，我建立2個相鄰的畫板，一個針對iPhone設計，另一個針對iPad設計（也適應更高的分辨率）

對于移動端，我們設計了寬度為640px，0.5比例顯示（Vewport）。我們試圖在實現好的用戶體驗的前提下盡量避免出現視覺差異。你不必設計兩個不同的網站，而是創建一個適應不同設備寬度的設計。

針對Hero內容，在手機端將其居中對齊；但在桌面端，將其居左對齊。同樣，汽車的數量將根據瀏覽器的寬度動態的增減。最后，在移動端標題略大。

移動端的上下滾動是很有趣的，但我們不能在內容很少時仍然過度使用滾動功能。這就是為什么我將圖標設計的小一些、文字更緊湊一些的原因。如果我在這里僅僅放三個大圓，那么閱讀同樣的內容將需要滾動三次。

內容需要在任何地方都看起來非常一致。不要有改變。

以點觸為標準的設計

如果你有一些設計iOS應用的經驗，你應該熟悉最小尺寸：文字（24px，閱讀尺寸：32px）、按鈕（44px至88px）和導航欄（72px至98px）。這些尺寸與安卓設備是一致的。

當調整寬度小于720px時，應選擇60px的按鈕使標題過渡到更大尺寸更舒適。

尺寸、對齊、菜單中元素的數量以及按鈕應與設備的寬度相適應。

如果你知道比例，你可以定位中基準（middle ground）以適應移動端和桌面端。例如局部標題。

文字尺寸和比例

某種程度上來講，大即好。但更重要的是，在比例上與內容和諧。如果主體的文字設置為24px，那么確保網站的其他部分與它一致。雖然這些沒有硬性的規定，但行間距應該為字體的1.2至1.4倍。設置尺寸、文字粗細和色彩范圍都應基于優先級。上述這些要素很多都取決于直覺和專業素養。

標題通常是正文的1.5至2倍大小，但文字更細——否則將過度吸引用戶的注意力。

一行應該有45至90個字母（英文字母－譯者注）。請閱讀《排版微指南》（英文網頁－譯者注）以獲取更多信息。

支持SVG

SVG是一種獨立文件格式。它可以在設備間無縫的兼容任意像素密度的顯示。

在Sketch中，你可以將文件以SVG格式輸出。非常的實用。

SVG同樣使用起來難以置信的簡單——就像img一樣。（詳見下圖）

SVG可以用于IE9以上版本、Firefox、Safari和Chrome瀏覽器。但是如果你一定需要兼容一些老瀏覽器，請點擊《如何支持圖片》（英文網頁－譯者注）

使用網頁套件（Webkit）來創建動效

展現形式非常重要——它直接影響用戶體驗。如果它運行緩慢，人們不會感激于你設計了副標題。因為他們只會糾結于運行得如此之慢。

當車啟動時，在底部我使用網頁套件過渡效果（Webkit-transform）來替代使用jQuery動效。展現形式的效果是顯著的。此外，在移動端的Safari和Chrome上表現出色。

為了達到視差效果，我為三個不同的元素賦予不同的速度。我使用網頁套件過渡效果（Webkit-transform）來代替CSS頂部位置。滾動起來更順滑正是得益于此。

設置視圖（Viewport）

我們需要告訴iOS和安卓設備我們是以0.5比例來設計的。因此以640px寬度顯示時可以好呈現。對于iPad，我們將比例設為1。

iOS 智能橫幅（Smart Banner）

如果你擁有一部iPhone，你可以用一段代碼將你的網站和你的應用鏈接起來并在你的網站頂部呈現你的應用。

當人們用他們的iPhone或者iPad訪問你的網站，他們將看到一個漂亮的橫幅，它鏈接到App Store。

使用iOS模擬器

如果你學習了一些Xcode，你可以使用一個簡潔的工具來預覽你的網站在iPhone和iPad上的效果。

在Safari中檢查元素

如果你的iPhone中有開發工具、iOS模擬器和Safari，你可以直接檢查HTML和CSS元素。這樣對于調試功能、性能測試和即刻應用樣式的檢查有巨大的幫助。想了解更多信息，請點擊這里（英文網頁－譯者注）。

這里我可以檢查iPhone中的Safari瀏覽器。

在安卓系統的Chrome檢查

有一半的移動端用戶來自安卓設備。為了檢查在安卓系統的Chrome瀏覽器中各元素的表現，你需要遵循下面的《幫助指南》（英文網頁－譯者注）。

我花費了一點時間來找到它：菜單 > 工具 > 檢查設備（Hamburger Menu > Tools > Inspect Devices）

后記

建立一個真正跨瀏覽器和設備的響應式網站絕非易事。這就是為什么我們需要高效的完成工作同時避免將過多的時間浪費在一些令我們抓狂的事情上。就像我們學著放棄IE6一樣，我們試圖摒棄一些老的設備使用更小的解決方案。

文章標題：移動優先的設計
網頁地址：http://m.2m8n56k.cn/news17/166767.html

成都網站建設公司_創新互聯，為您提供微信小程序、Google、虛擬主機、網站維護、建站公司、定制開發

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯