小編推薦：越來(lái)越多的手機(jī)訪(fǎng)問(wèn)使得很多網(wǎng)站開(kāi)始考慮專(zhuān)門(mén)做一版手機(jī)版，耗費(fèi)了不少人力不說(shuō)還要考慮和電腦版的視覺(jué)統(tǒng)一，于是有人提出了跨屏設(shè)計(jì)，今天小編給大家推薦的是國(guó)外研究人士撰寫(xiě)的以移動(dòng)優(yōu)先原則制作跨屏頁(yè)面的方法，共從業(yè)者參考~

創(chuàng)建跨設(shè)備的響應(yīng)式設(shè)計(jì)

如今25%的網(wǎng)站流量來(lái)自于手機(jī)。如果你不建立個(gè)響應(yīng)式網(wǎng)站，你將損失1/4的用戶(hù)。好消息是借助Sketch、Web Inspectors和CSS3等工具，你將很容易的完成設(shè)計(jì)。你僅僅需要知道如何開(kāi)始和如何使用。

最近，我為Carshare.hk,?Ripplechat.io?和?Canvaspod.io做移動(dòng)設(shè)計(jì)。在此文中，我將帶你一起體會(huì)我的工作流程。

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

如果你的設(shè)計(jì)可以很好的適應(yīng)iPhone的屏幕，那么它將可以在其他大部分的設(shè)備上看起來(lái)很棒。由于我的目標(biāo)用戶(hù)是全年齡段的人群，他們喜歡更大的字體和圖片。適合在舒適的距離來(lái)閱讀。這便是我們追求的目標(biāo)。我們的目標(biāo)是建立響應(yīng)式的專(zhuān)注內(nèi)容的網(wǎng)站。

在Sketch中，我建立2個(gè)相鄰的畫(huà)板，一個(gè)針對(duì)iPhone設(shè)計(jì)，另一個(gè)針對(duì)iPad設(shè)計(jì)（也適應(yīng)更高的分辨率）

對(duì)于移動(dòng)端，我們?cè)O(shè)計(jì)了寬度為640px，0.5比例顯示（Vewport）。我們?cè)噲D在實(shí)現(xiàn)完美的用戶(hù)體驗(yàn)的前提下盡量避免出現(xiàn)視覺(jué)差異。你不必設(shè)計(jì)兩個(gè)不同的網(wǎng)站，而是創(chuàng)建一個(gè)適應(yīng)不同設(shè)備寬度的設(shè)計(jì)。

針對(duì)Hero內(nèi)容，在手機(jī)端將其居中對(duì)齊；但在桌面端，將其居左對(duì)齊。同樣，汽車(chē)的數(shù)量將根據(jù)瀏覽器的寬度動(dòng)態(tài)的增減。最后，在移動(dòng)端標(biāo)題略大。

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

內(nèi)容需要在任何地方都看起來(lái)非常一致。不要有改變。

以點(diǎn)觸為標(biāo)準(zhǔn)的設(shè)計(jì)

如果你有一些設(shè)計(jì)iOS應(yīng)用的經(jīng)驗(yàn)，你應(yīng)該熟悉最小尺寸：文字（24px，最佳閱讀尺寸：32px）、按鈕（44px至88px）和導(dǎo)航欄（72px至98px）。這些尺寸與安卓設(shè)備是一致的。

當(dāng)調(diào)整寬度小于720px時(shí)，應(yīng)選擇60px的按鈕使標(biāo)題過(guò)渡到更大尺寸更舒適。

尺寸、對(duì)齊、菜單中元素的數(shù)量以及按鈕應(yīng)與設(shè)備的寬度相適應(yīng)。

如果你知道比例，你可以定位中基準(zhǔn)（middle ground）以適應(yīng)移動(dòng)端和桌面端。例如局部標(biāo)題。

文字尺寸和比例

某種程度上來(lái)講，大即好。但更重要的是，在比例上與內(nèi)容和諧。如果主體的文字設(shè)置為24px，那么確保網(wǎng)站的其他部分與它一致。雖然這些沒(méi)有硬性的規(guī)定，但行間距應(yīng)該為字體的1.2至1.4倍。設(shè)置尺寸、文字粗細(xì)和色彩范圍都應(yīng)基于優(yōu)先級(jí)。上述這些要素很多都取決于直覺(jué)和專(zhuān)業(yè)素養(yǎng)。

標(biāo)題通常是正文的1.5至2倍大小，但文字更細(xì)——否則將過(guò)度吸引用戶(hù)的注意力。

一行應(yīng)該有45至90個(gè)字母（英文字母－譯者注）。請(qǐng)閱讀《排版微指南》（英文網(wǎng)頁(yè)－譯者注）以獲取更多信息。

支持SVG

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

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

SVG同樣使用起來(lái)難以置信的簡(jiǎn)單——就像img一樣。（詳見(jiàn)下圖）

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

使用網(wǎng)頁(yè)套件（Webkit）來(lái)創(chuàng)建動(dòng)效

展現(xiàn)形式非常重要——它直接影響用戶(hù)體驗(yàn)。如果它運(yùn)行緩慢，人們不會(huì)感激于你設(shè)計(jì)了副標(biāo)題。因?yàn)樗麄冎粫?huì)糾結(jié)于運(yùn)行得如此之慢。

當(dāng)車(chē)啟動(dòng)時(shí)，在底部我使用網(wǎng)頁(yè)套件過(guò)渡效果（Webkit-transform）來(lái)替代使用jQuery動(dòng)效。展現(xiàn)形式的效果是顯著的。此外，在移動(dòng)端的Safari和Chrome上表現(xiàn)出色。

為了達(dá)到視差效果，我為三個(gè)不同的元素賦予不同的速度。我使用網(wǎng)頁(yè)套件過(guò)渡效果（Webkit-transform）來(lái)代替CSS頂部位置。滾動(dòng)起來(lái)更順滑正是得益于此。

設(shè)置視圖（Viewport）

我們需要告訴iOS和安卓設(shè)備我們是以0.5比例來(lái)設(shè)計(jì)的。因此以640px寬度顯示時(shí)可以完美呈現(xiàn)。對(duì)于iPad，我們將比例設(shè)為1。

iOS 智能橫幅（Smart Banner）

如果你擁有一部iPhone，你可以用一段代碼將你的網(wǎng)站和你的應(yīng)用鏈接起來(lái)并在你的網(wǎng)站頂部呈現(xiàn)你的應(yīng)用。

當(dāng)人們用他們的iPhone或者iPad訪(fǎng)問(wèn)你的網(wǎng)站，他們將看到一個(gè)漂亮的橫幅，它鏈接到App Store。

使用iOS模擬器

如果你學(xué)習(xí)了一些Xcode，你可以使用一個(gè)簡(jiǎn)潔的工具來(lái)預(yù)覽你的網(wǎng)站在iPhone和iPad上的效果。

在Safari中檢查元素

如果你的iPhone中有開(kāi)發(fā)工具、iOS模擬器和Safari，你可以直接檢查HTML和CSS元素。這樣對(duì)于調(diào)試功能、性能測(cè)試和即刻應(yīng)用樣式的檢查有巨大的幫助。想了解更多信息，請(qǐng)點(diǎn)擊這里（英文網(wǎng)頁(yè)－譯者注）。

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

在安卓系統(tǒng)的Chrome檢查

有一半的移動(dòng)端用戶(hù)來(lái)自安卓設(shè)備。為了檢查在安卓系統(tǒng)的Chrome瀏覽器中各元素的表現(xiàn)，你需要遵循下面的《幫助指南》（英文網(wǎng)頁(yè)－譯者注）。

我花費(fèi)了一點(diǎn)時(shí)間來(lái)找到它：菜單 > 工具 > 檢查設(shè)備（Hamburger Menu > Tools > Inspect Devices）

后記

建立一個(gè)真正跨瀏覽器和設(shè)備的響應(yīng)式網(wǎng)站絕非易事。這就是為什么我們需要高效的完成工作同時(shí)避免將過(guò)多的時(shí)間浪費(fèi)在一些令我們抓狂的事情上。就像我們學(xué)著放棄IE6一樣，我們?cè)噲D摒棄一些老的設(shè)備使用更小的解決方案。

來(lái)源：ui中國(guó)?

英文原址：Meng To