随着設備數量和屏幕尺寸的增加,響應式設計已成爲标準協議。 PC和移動Web設計的兼容性測試對于确保用戶無論其訪問方式如何都能導航并輕松訪問内容至關重要。
就像網頁設計領域的幾乎所有事物(wù)一(yī)樣,關于如何針對較小(xiǎo)的屏幕進行設計也有不同的想法。 但是,除了這些差異之外(wài),我(wǒ)(wǒ)們還應牢記一(yī)些響應式設計原則。
進行移動網頁設計時,高端網站制作公司會告訴您應注意的事項:
1.可讀性和可用性至上
每個人都希望他們的設計在每個屏幕上看起來都漂亮。 但是,在移動領域嘗試太花哨是危險的。 在台式機上看起來漂亮的高端布局或功能可能對電(diàn)話(huà)沒有意義。 在适當的地方,需要簡化。 如果事實證明某個特定元素在小(xiǎo)屏幕上太笨拙,您将不會後悔删除它或将其替換爲更有效的工(gōng)作。 就排版而言,移動網頁設計的大(dà)小(xiǎo)和對比度同樣重要(如果不是更多的話(huà))。 在閱讀長篇文章時,即使使用高質量的手機屏幕,凝視仍然有些無聊。 确保文本大(dà)小(xiǎo)正确,并設置行距和邊距以幫助提高可讀性。 結論是,桌面用戶在可用性方面所做的相同努力也應集中(zhōng)在使移動體(tǐ)驗成爲出色的體(tǐ)驗上。
2.使用可用的屏幕空間
多列布局無處不在,但是文本密集型列通常不适用于最小(xiǎo)的屏幕。 在這種情況下(xià),将多列簡單地轉換爲單列是有意義的。 但是,當我(wǒ)(wǒ)們談論平闆電(diàn)腦甚至手機水平放(fàng)置時,該欄仍然非常有效。 關鍵是值得花些功夫看看我(wǒ)(wǒ)們如何才能最好地利用現有的屏幕資(zī)源。 很多次,我(wǒ)(wǒ)們一(yī)直跳過這些中(zhōng)間分(fēn)辨率,而隻關注最小(xiǎo)和最大(dà)的視口解決方案。 例如,在同一(yī)視圖中(zhōng),以縱向放(fàng)置的平闆電(diàn)腦應不同于以手機放(fàng)置的手機。 實施此類策略的一(yī)種更簡單的方法是使用CSS Flexbox。 正确配置後,通常可以自動爲當前視口提供最佳布局。 您可能需要通過媒體(tǐ)查詢進行一(yī)些小(xiǎo)的調整,但是值得進行一(yī)些其他調整。
3.一(yī)切不必完全相同
容易陷入将單個設計元素放(fàng)置在與移動和桌面視口相同的相對位置的陷阱中(zhōng)。 盡管對一(yī)緻性的要求值得稱贊,但這種方法有時在較小(xiǎo)的屏幕上适得其反。 例如,許多網站在其标題中(zhōng)放(fàng)置了諸如搜索表單或社交媒體(tǐ)圖标之類的項目。 在較大(dà)的屏幕上,它運作良好,但通常會阻礙手機的主要内容。 在輔助頁面上尤其如此,用戶可能實際上隻是想閱讀頁面上的文本而不必擔心所有額外(wài)的垃圾。 除了将這些類型的項目粘貼到網站标題上之外(wài),還有許多選項。 您可能考慮将這些項目塞入一(yī)個按鈕,該按鈕根據用戶要求顯示它們。 或者它們可以成爲您實現的任何移動導航解決方案的一(yī)部分(fēn)。 同樣的事情可能适用于側邊欄之類的功能。 其他元素可能被完全隐藏。 同樣,媒體(tǐ)查詢(可能還有一(yī)些條件代碼)也可以将這些項目放(fàng)在移動設備上更合适的位置。 最好決定要去(qù)哪裏。
4.添加移動設備特定的功能
在考慮響應式設計策略時,您可以考慮添加一(yī)些技巧,以爲移動用戶帶來更高級别的便利。 這些項目通常不需要額外(wài)的努力即可實施。 但是它們可以大(dà)大(dà)提高可用性。 在支持觸摸功能的設備上浏覽可能會帶來台式機用戶不必面對的挑戰。 對于一(yī)個人來說,必須從更長的頁面向上滾動以返回主導航是移動設備上的主要挑戰。 您可以通過使用導航功能(在檢測到用戶向上滾動時自動顯示)來在某種程度上緩解這種情況。 另一(yī)種選擇是在每個頁面的底部都有一(yī)個很好的舊(jiù)“返回首頁”鏈接。 對于鼓勵電(diàn)話(huà)的企業,單擊“呼叫”按鈕可能是受歡迎的功能。 這可以采用傳統按鈕的形式,該按鈕的字面意思是“立即緻電(diàn)我(wǒ)(wǒ)們”,或提及整個站點超鏈接的電(diàn)話(huà)号碼。 本質上,您可以考慮幫助移動用戶與組織進行交互的所有措施。
5.移動問題
自适應設計是一(yī)個強大(dà)的工(gōng)具。 我(wǒ)(wǒ)們可以使用它在幾乎所有設備上爲用戶提供最佳體(tǐ)驗。 但是作爲設計師,我(wǒ)(wǒ)們必須充分(fēn)利用這些可能性。 首先,最重要的是确保移動用戶可以輕松浏覽和導航您的站點。 從那裏,做出有關外(wài)觀和工(gōng)作方法的最明智的設計決策。 如果您使用戶滿意,他們将更有可能再次回來(并告訴他們的朋友)。