隨著設(she)備數量(liang)和屏(ping)幕尺寸的增加，響應式設(she)計(ji)已成為(wei)標準協議。 PC和移動(dong)Web設(she)計(ji)的兼容性測試(shi)對于確保用戶無論(lun)其訪問方式如何(he)都能(neng)導航并(bing)輕松訪問內容至關重要(yao)。
就像(xiang)網頁設(she)計領(ling)域的幾乎所有事物(wu)一(yi)(yi)樣，關于(yu)如何針(zhen)對較小的屏幕進行設(she)計也有不同的想(xiang)法。 但是(shi)，除了這些差異之外，我(wo)們還應牢記一(yi)(yi)些響應式設(she)計原則。
1.可(ke)讀性和可(ke)用(yong)性至(zhi)上
每個人(ren)都(dou)希望他(ta)們的(de)設(she)計(ji)在(zai)(zai)每個屏幕上看起(qi)(qi)來(lai)都(dou)漂(piao)亮。 但(dan)是(shi)，在(zai)(zai)移(yi)動領域(yu)嘗(chang)試太花哨是(shi)危險(xian)的(de)。 在(zai)(zai)臺式機上看起(qi)(qi)來(lai)漂(piao)亮的(de)高(gao)端布(bu)局或功能(neng)可(ke)能(neng)對電話沒有意義。 在(zai)(zai)適當的(de)地方，需要(yao)簡化。 如(ru)果事實證明某個特定元素在(zai)(zai)小屏幕上太笨拙，您(nin)將不會后悔刪除它或將其替換為(wei)更有效的(de)工(gong)作(zuo)。 就排版而言，移(yi)動網(wang)頁設(she)計(ji)的(de)大小和(he)對比度同樣重要(yao)（如(ru)果不是(shi)更多的(de)話）。 在(zai)(zai)閱讀長篇文(wen)章時，即使使用高(gao)質量的(de)手機屏幕，凝視仍(reng)然有些無(wu)聊。 確保文(wen)本大小正確，并(bing)設(she)置(zhi)行距(ju)和(he)邊距(ju)以(yi)幫助(zhu)提(ti)高(gao)可(ke)讀性。 結論是(shi)，桌面用戶在(zai)(zai)可(ke)用性方面所做的(de)相同努力也應集中在(zai)(zai)使移(yi)動體驗成(cheng)為(wei)出色的(de)體驗上。
2.使(shi)用可用的屏(ping)幕空間
多列布局(ju)無處不(bu)(bu)(bu)在，但是(shi)文本(ben)密集型列通(tong)常不(bu)(bu)(bu)適(shi)用于最(zui)小的(de)屏(ping)幕。 在這(zhe)(zhe)種情(qing)況下，將多列簡單地(di)轉換(huan)為單列是(shi)有(you)意義的(de)。 但是(shi)，當我們(men)談論(lun)平(ping)(ping)板電腦甚(shen)至手機水平(ping)(ping)放(fang)置(zhi)(zhi)時，該欄仍然非(fei)常有(you)效。 關(guan)鍵是(shi)值得(de)花些(xie)(xie)功夫看看我們(men)如何才(cai)能最(zui)好地(di)利(li)用現有(you)的(de)屏(ping)幕資(zi)源。 很多次，我們(men)一(yi)直(zhi)跳過這(zhe)(zhe)些(xie)(xie)中間分辨率(lv)，而只(zhi)關(guan)注最(zui)小和最(zui)大的(de)視口解(jie)決方(fang)案。 例(li)如，在同(tong)一(yi)視圖中，以縱向放(fang)置(zhi)(zhi)的(de)平(ping)(ping)板電腦應不(bu)(bu)(bu)同(tong)于以手機放(fang)置(zhi)(zhi)的(de)手機。 實施此類策略(lve)的(de)一(yi)種更簡單的(de)方(fang)法(fa)是(shi)使用CSS Flexbox。 正(zheng)確(que)配(pei)置(zhi)(zhi)后，通(tong)常可以自動為當前視口提(ti)供最(zui)佳布局(ju)。 您可能需要通(tong)過媒體查詢進行一(yi)些(xie)(xie)小的(de)調(diao)整，但是(shi)值得(de)進行一(yi)些(xie)(xie)其他調(diao)整。
3.一切(qie)不(bu)必完(wan)全相同
容易陷入(ru)將(jiang)(jiang)單個設(she)(she)計元素放置在(zai)(zai)與移動(dong)和(he)桌面(mian)視(shi)口相(xiang)同的(de)(de)(de)相(xiang)對(dui)位置的(de)(de)(de)陷阱中(zhong)。 盡管對(dui)一(yi)(yi)致性的(de)(de)(de)要(yao)(yao)求值得稱贊，但這(zhe)(zhe)種(zhong)方法有(you)(you)時(shi)在(zai)(zai)較小的(de)(de)(de)屏幕上(shang)適得其(qi)(qi)反。 例如(ru)，許(xu)多網站在(zai)(zai)其(qi)(qi)標(biao)題中(zhong)放置了諸如(ru)搜索表單或(huo)社交媒體圖標(biao)之(zhi)類(lei)的(de)(de)(de)項(xiang)目(mu)(mu)。 在(zai)(zai)較大的(de)(de)(de)屏幕上(shang)，它(ta)運作良(liang)好(hao)，但通常(chang)會(hui)阻礙(ai)手機的(de)(de)(de)主(zhu)要(yao)(yao)內容。 在(zai)(zai)輔助頁面(mian)上(shang)尤其(qi)(qi)如(ru)此(ci)，用(yong)戶可(ke)能實際上(shang)只是想閱讀頁面(mian)上(shang)的(de)(de)(de)文(wen)本而不必擔心所(suo)有(you)(you)額(e)外的(de)(de)(de)垃(la)圾。 除(chu)了將(jiang)(jiang)這(zhe)(zhe)些(xie)類(lei)型的(de)(de)(de)項(xiang)目(mu)(mu)粘貼到網站標(biao)題上(shang)之(zhi)外，還有(you)(you)許(xu)多選項(xiang)。 您(nin)可(ke)能考慮將(jiang)(jiang)這(zhe)(zhe)些(xie)項(xiang)目(mu)(mu)塞(sai)入(ru)一(yi)(yi)個按鈕，該按鈕根據(ju)用(yong)戶要(yao)(yao)求顯示它(ta)們(men)。 或(huo)者它(ta)們(men)可(ke)以成為您(nin)實現的(de)(de)(de)任何移動(dong)導航解決(jue)方案(an)的(de)(de)(de)一(yi)(yi)部(bu)分。 同樣的(de)(de)(de)事情可(ke)能適用(yong)于側邊欄之(zhi)類(lei)的(de)(de)(de)功能。 其(qi)(qi)他(ta)元素可(ke)能被完全隱藏。 同樣，媒體查詢(xun)（可(ke)能還有(you)(you)一(yi)(yi)些(xie)條(tiao)件代碼(ma)）也可(ke)以將(jiang)(jiang)這(zhe)(zhe)些(xie)項(xiang)目(mu)(mu)放在(zai)(zai)移動(dong)設(she)(she)備上(shang)更合適的(de)(de)(de)位置。 最好(hao)決(jue)定要(yao)(yao)去哪(na)里。
4.添加移動設(she)備特定的功能
在(zai)考(kao)慮響應式設計(ji)策略時(shi)，您可以考(kao)慮添(tian)加一(yi)些技巧(qiao)，以為(wei)移動(dong)用(yong)(yong)戶(hu)(hu)帶(dai)來更(geng)高級別的(de)(de)便利。 這些項目通常不(bu)需要(yao)額(e)外的(de)(de)努力即可實施。 但(dan)是它們可以大大提高可用(yong)(yong)性。 在(zai)支持觸摸(mo)功能(neng)的(de)(de)設備(bei)上(shang)瀏覽可能(neng)會帶(dai)來臺式機用(yong)(yong)戶(hu)(hu)不(bu)必面(mian)對(dui)的(de)(de)挑戰。 對(dui)于一(yi)個人來說，必須從(cong)更(geng)長(chang)的(de)(de)頁面(mian)向上(shang)滾(gun)動(dong)以返回(hui)主(zhu)導航是移動(dong)設備(bei)上(shang)的(de)(de)主(zhu)要(yao)挑戰。 您可以通過使用(yong)(yong)導航功能(neng)（在(zai)檢測到用(yong)(yong)戶(hu)(hu)向上(shang)滾(gun)動(dong)時(shi)自動(dong)顯(xian)示）來在(zai)某種程度上(shang)緩解這種情況。 另一(yi)種選(xuan)擇是在(zai)每(mei)個頁面(mian)的(de)(de)底部都有一(yi)個很好的(de)(de)舊“返回(hui)首頁”鏈接。 對(dui)于鼓勵電(dian)(dian)(dian)話的(de)(de)企業，單擊(ji)“呼(hu)叫(jiao)”按(an)鈕(niu)可能(neng)是受歡(huan)迎的(de)(de)功能(neng)。 這可以采用(yong)(yong)傳統按(an)鈕(niu)的(de)(de)形式，該按(an)鈕(niu)的(de)(de)字面(mian)意思是“立即致(zhi)電(dian)(dian)(dian)我(wo)們”，或提及整個站點超鏈接的(de)(de)電(dian)(dian)(dian)話號碼。 本質上(shang)，您可以考(kao)慮幫助(zhu)移動(dong)用(yong)(yong)戶(hu)(hu)與組織進行交互的(de)(de)所有措施。
5.移(yi)動(dong)問(wen)題
自適應設(she)計(ji)(ji)是(shi)(shi)一(yi)個(ge)強大的(de)工具。 我們可以使用(yong)它在(zai)幾乎(hu)所有(you)設(she)備(bei)上為(wei)用(yong)戶(hu)提供(gong)最(zui)(zui)佳(jia)體驗。 但(dan)是(shi)(shi)作(zuo)為(wei)設(she)計(ji)(ji)師(shi)，我們必須充(chong)分利用(yong)這些(xie)可能性。 首先，最(zui)(zui)重要的(de)是(shi)(shi)確保移動用(yong)戶(hu)可以輕松(song)瀏覽和導航您的(de)站點。 從那里，做出(chu)有(you)關外觀和工作(zuo)方法(fa)的(de)最(zui)(zui)明智的(de)設(she)計(ji)(ji)決(jue)策。 如(ru)果您使用(yong)戶(hu)滿意，他們將更有(you)可能再次回來(lai)。
蘇公網安備32030302000492號
