四川少BBB搡BBB爽爽爽_四川女人毛多水多A片_四川BBBBBB搡BBBBB_四LLL少妇BBBB槡BBBB_私密直播全婐APP免费魅影_爽到喷水(H)

400-611-9921

當前位置:首頁 > 新聞資訊 > 建站知識
移動優(yōu)先的設計

2015-11-25

2622

創(chuàng)建跨設備的響應式設計

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

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

在Sketch中建模(原型-譯者注):

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

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

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

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

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

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

以點觸為標準的設計

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

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

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

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

文字尺寸和比例

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

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

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

支持SVG

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

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

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

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

使用網頁套件(Webkit)來創(chuàng)建動效

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

當車啟動時,在底部我使用網頁套件過渡效果(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中有開發(fā)工具、iOS模擬器和Safari,你可以直接檢查HTML和CSS元素。這樣對于調試功能、性能測試和即刻應用樣式的檢查有巨大的幫助。想了解更多信息,請點擊這里(英文網頁-譯者注)。

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

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

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

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

后記

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


關注我們:在查找公眾號中搜索:zomsky1688,或者掃描下方二維碼快速關注。
廣州市縱天信息科技有限公司公眾號
本文來自廣州品牌網站建設網站設計制作公司-縱天
關鍵詞:移動網站建設,高端網站建設,企業(yè)網站建設,廣州響應式網站

免費咨詢熱線

400-611-9921

020-29860991

聯系方式

地址1:廣州市天河區(qū)珠江新城邦華環(huán)球廣場16F

業(yè)務 QQ:  3561401262

E-mail:  sales@zomsky.com

微信咨詢
官方微信
微信咨詢
在線咨詢
TOP

立即與縱天項目顧問通話

400-611-9921

您也可以咨詢我們的在線客服或預約資深顧問

信息保護中,請放心填寫
關閉
免費獲取方案
色达县| 长岭县| 邮箱| 宁陵县| 吴旗县| 秦皇岛市| 桂林市| 山丹县| 江山市| 微山县| 普兰店市| 大余县| 营山县| 勐海县| 佛学| 军事| 宝坻区| 马公市| 井陉县| 沙湾县| 行唐县| 合作市| 广宁县| 祁东县| 桂阳县| 宜城市| 曲周县| 阿坝| 六盘水市| 平昌县| 仁布县| 青铜峡市| 襄城县| 海城市| 望都县| 疏勒县| 六安市| 珲春市| 定兴县| 白朗县| 新泰市|