中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

在設(shè)計和開發(fā)響應(yīng)式網(wǎng)站時,必須考慮一些重要的注意事項。

2022-08-23    分類: 響應(yīng)式網(wǎng)站

如今,互聯(lián)網(wǎng)流量的很大一部分來自功能不同的移動設(shè)備,因此至關(guān)重要的是,任何新網(wǎng)站都必須在盡可能多的設(shè)備上使用。設(shè)計和開發(fā)適用于多種屏幕和設(shè)備的網(wǎng)站的過程通常稱為“響應(yīng)式Web設(shè)計”,有時也稱為“自適應(yīng)設(shè)計”(在響應(yīng)式設(shè)計中也用于指代特定方法)。

今天,是否擁有一個響應(yīng)式網(wǎng)站的問題已不再相關(guān);答案是明確的“是!”,甚至Google也在那些不適合移動設(shè)備的網(wǎng)站之后放置了那些網(wǎng)站。真正的問題是如何執(zhí)行成功且有效的多設(shè)備策略,而又不會超出預(yù)算或錯過移動用戶體驗的重點。

任何有經(jīng)驗的網(wǎng)頁設(shè)計師都應(yīng)該精通使網(wǎng)站具有響應(yīng)能力的技術(shù)。為了幫助您找到最適合您項目的匹配項,我們準(zhǔn)備了一些問題和準(zhǔn)則。在設(shè)計和開發(fā)響應(yīng)式網(wǎng)站時,必須考慮一些重要的注意事項。

跨設(shè)備的內(nèi)容策略

自適應(yīng)設(shè)計不僅僅是將所有內(nèi)容都適合任何屏幕尺寸。設(shè)計人員必須考慮到每種設(shè)備的使用環(huán)境及其功能。

由于移動技術(shù)的革命,網(wǎng)頁設(shè)計師不得不考慮眾多不同的軟件和硬件平臺。

有時,*跳過移動設(shè)備上的某些副本,使用替代副本或其他圖像資產(chǎn),因為網(wǎng)站的導(dǎo)航需要在不同屏幕之間進(jìn)行更改。有時,應(yīng)僅在移動設(shè)備上啟用特定的內(nèi)容或功能,例如“單擊以致電給我們”按鈕,基于用戶的位置提供交互或顯示所使用的特定設(shè)備的“應(yīng)用程序下載”按鈕。

問:我們必須為不同的設(shè)備準(zhǔn)備不同的內(nèi)容或資產(chǎn)嗎?

有時是的。在某些情況下,需要進(jìn)行此類更改:

通常情況下,對于小縱向屏幕,必須對圖像進(jìn)行不同的裁切。寬高比的圖像非常適合桌面網(wǎng)站橫幅,但是在豎直的智能手機(jī)屏幕上幾乎無法使用。 如果大型演示視頻在計算機(jī)屏幕上很不錯,則可以用移動設(shè)備上的圖像和文本代替它,尤其是當(dāng)您希望來自移動互聯(lián)網(wǎng)連接速度較慢的設(shè)備的流量時。 對于用戶可能不會閱讀的小屏幕設(shè)備,某些副本可能必須省略(或重寫)。 某些號召性用語控件可能已更改為更適合該設(shè)備;例如,計算機(jī)上的“發(fā)送消息”可能會替換為手機(jī)上的“立即呼叫”。 在小屏幕上,*將復(fù)雜的圖形,圖表和長表保留為鏈接的獨立頁面,而不是將其包含在頁面的內(nèi)容流中。另一個想法是用不同的方式顯示相同的數(shù)據(jù),或僅顯示最重要的部分。 對于不同的屏幕尺寸,應(yīng)重新考慮導(dǎo)航,甚至應(yīng)單獨設(shè)計導(dǎo)航。這不一定與其可視化有關(guān),而是通常包括不同的結(jié)構(gòu),例如鏈接的平面列表而不是下拉菜單/下拉菜單,或者通過在特定設(shè)備上更復(fù)雜的菜單中顯示較少的深度。

不同屏幕上的布局優(yōu)化

雖然側(cè)面放置的計算機(jī)和較大的平板電腦提供了大量的水平空間來布置網(wǎng)站內(nèi)容,但屏幕越小,則用于并排放置的元素的空間就越小。這就是為什么智能手機(jī)上的網(wǎng)站通常設(shè)計為只有一列布局。這是設(shè)計響應(yīng)式網(wǎng)站時的主要問題之一:頁面布局何時以及如何更改。

問:如何確保內(nèi)容布局在不同設(shè)備上看起來不錯?您使用什么技術(shù)來實現(xiàn)這一目標(biāo)?

應(yīng)根據(jù)流行的設(shè)備尺寸,類型和環(huán)境定義一些“斷點”。這些是預(yù)定義的屏幕寬度(和較少的屏幕高度),其中頁面布局從例如三列更改為兩列,然后變?yōu)橐涣小.?dāng)前,*的寬度斷點是:

1920年及以后:電視屏幕和大型臺式機(jī)顯示器 1280至1920:對于絕大多數(shù)筆記本電腦,在橫向模式(水平放置)下,許多現(xiàn)代臺式機(jī)顯示器以及大型平板電腦(通常為10英寸及以上) 800至1280:適用于橫向模式的較小平板電腦以及較舊或較小的顯示器 480至800:適用于平板電腦(縱向)(垂直放置)和智能手機(jī)(橫向) 最多480:智能手機(jī)處于縱向模式

要@media在CSS代碼中使用基于屏幕大小的不同樣式,例如,僅在屏幕寬度大于480像素但小于800的設(shè)備上將段落的字體大小更改為14像素,將使用以下規(guī)則:

css @media (min-width: 480px) and (max-width: 799px) { font-size: 14px; }

另一個重要的考慮因素是將HTML代碼按照需要在移動設(shè)備上顯示的順序放置。通常,編寫干凈,結(jié)構(gòu)合理且語義正確的HTML代碼對于順利實施響應(yīng)式網(wǎng)站大有幫助。

與不同設(shè)備上的用戶界面交互

由于設(shè)備不僅屏幕大小不同,而且輸入方法也不同,因此請確保每個UI元素在每種設(shè)備類型的上下文中均按預(yù)期工作。這意味著下拉菜單對于計算機(jī)屏幕應(yīng)該是可以接受的,但是在智能手機(jī)和平板電腦上,用戶希望導(dǎo)航方法更類似于移動應(yīng)用程序上的導(dǎo)航方法。

問:如何確保UI正常工作并在不同設(shè)備上感覺自然?列舉一些不適用于特定設(shè)備的交互模式。

不同的設(shè)備具有不同的功能,用戶希望其設(shè)備上的網(wǎng)站能夠以與其設(shè)備上的應(yīng)用類似的方式運行。

臺式機(jī)和移動用戶界面之間最重要的區(qū)別是,臺式機(jī)通常由鼠標(biāo)或觸控板以及快速且易于使用的鍵盤控制,而移動設(shè)備依賴于無指針的觸摸屏以及帶有經(jīng)常使用起來很麻煩。另一個考慮因素是沒有指針的設(shè)備還缺少懸停狀態(tài),該狀態(tài)經(jīng)常用于觸發(fā)網(wǎng)頁上的某些操作。指針和觸摸屏這兩種輸入法也使不同的操作更容易(更自然)或更困難和更慢。例如,在屏幕上移動項目或在觸摸屏上拖動更容易(因此,在桌面上避免了拖動),而使用鼠標(biāo)指針單擊較小的控件則容易得多(因此,UI控件應(yīng)在觸摸屏上變大)。

基于屏幕尺寸的資產(chǎn)優(yōu)化

即使可以將相同的資產(chǎn)提供給不同的設(shè)備,也不意味著相同的圖像大小或視頻質(zhì)量將是*的。為了減少加載時間,尤其是在移動Internet連接上,Web設(shè)計人員應(yīng)注意它們?yōu)椴煌O(shè)備提供的資產(chǎn)。

例如,一張1920像素寬,400 KB的背景照片非常適合臺式機(jī),但在智能手機(jī)上會過分使用(明智的選擇),而下載速度較慢(明智的選擇文件大?。R虼?,*使用較小尺寸的圖像,如果用戶的屏幕足夠小,則可以使用該圖像。而且,您不希望用戶僅下載一個版本的用戶下載兩個版本。

問:無論屏幕大小如何,您是否提供相同的資產(chǎn)都重要嗎?圖像和背景在這方面有什么區(qū)別嗎?

至少對于較大的圖像文件而言,為移動設(shè)備和臺式機(jī)屏幕使用單獨的版本非常重要。可以向移動用戶提供同一圖像的較小副本,以減少加載時間。但是,對于移動設(shè)備,不應(yīng)大幅減小圖像尺寸(如果可行),因為它們的屏幕密度通常比臺式機(jī)顯示器高得多。應(yīng)根據(jù)具體情況做出決定,因為某些圖像的大小可以減小,而不會產(chǎn)生太大的視覺影響,而對于另一些圖像,保留其細(xì)節(jié)很重要。

從技術(shù)上講,背景圖像(在CSS中定義)和內(nèi)容圖像(在HTML中作為圖像文件包含)之間存在很大差異。可以輕松地在CSS中的不同媒體查詢中分別設(shè)置背景,因此只有在用戶屏幕與特定查詢匹配時才提供每個版本。其他的則不是從Web服務(wù)器下載的。對于HTML中的圖像,仍然沒有內(nèi)置的,有效的和受良好支持的方法來根據(jù)用戶屏幕大小提供不同的文件??梢允褂貌煌募夹g(shù)來實現(xiàn)此目的,例如通過使用模擬即將到來的<picture>元素的行為的polyfill腳本,或具有自己約定的其他腳本,或使用CSS背景顯示圖像。

通常,應(yīng)避免使用CSS方法,因為CSS圖像背景沒有任何語義含義,被視為修飾。此外,它缺乏可訪問性,因為無法用標(biāo)記具有的title和alt屬性來描述<img>。

本文標(biāo)題:在設(shè)計和開發(fā)響應(yīng)式網(wǎng)站時,必須考慮一些重要的注意事項。
網(wǎng)頁鏈接:http://m.rwnh.cn/news7/192557.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營銷seo公司;服務(wù)項目有響應(yīng)式網(wǎng)站

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

搜索引擎優(yōu)化
乌恰县| 开阳县| 永济市| 云梦县| 左贡县| 上饶县| 新余市| 资阳市| 台中市| 柳林县| 永嘉县| 太和县| 四平市| 肇东市| 保亭| 株洲市| 合阳县| 金乡县| 四川省| 文山县| 江孜县| 耿马| 华亭县| 泸州市| 扬州市| 枞阳县| 屏山县| 隆子县| 渝中区| 邯郸县| 阜康市| 隆化县| 凤城市| 德惠市| 皮山县| 高青县| 涡阳县| 大足县| 德钦县| 防城港市| 井陉县|