隨著設(shè)備的數(shù)量和屏幕尺寸的增加，移動(dòng)網(wǎng)站設(shè)計(jì)已成為標(biāo)準(zhǔn)協(xié)議。為網(wǎng)站設(shè)計(jì)和測試至關(guān)重要，以確保用戶可以導(dǎo)航并輕松訪問內(nèi)容，而無論他們?nèi)绾卧L問內(nèi)容。就像網(wǎng)頁設(shè)計(jì)空間中的幾乎所有內(nèi)容一樣，對于應(yīng)該如何針對較小的屏幕進(jìn)行設(shè)計(jì)，也存在著不同的理念。但是除了這些差異之外，還有一些我們都應(yīng)該牢記的移動(dòng)網(wǎng)站設(shè)計(jì)原則。下面就跟隨著專業(yè)的建站公司一起看看如何設(shè)計(jì)好移動(dòng)手機(jī)網(wǎng)站。
1、可讀性和可用性至上
每個(gè)人都希望他們的設(shè)計(jì)在每個(gè)屏幕上看起來都漂亮。但是在移動(dòng)網(wǎng)站設(shè)計(jì)領(lǐng)域嘗試過于花哨有危險(xiǎn)。在臺式機(jī)上看起來很漂亮的高端布局或功能可能對電話沒有意義。在適當(dāng)?shù)牡胤剑虑樾枰喕?。如果事?shí)證明某個(gè)特定元素在小屏幕上太笨拙，刪除它或?qū)⑵涮鎿Q為更有效地完成工作不會(huì)有任何恥辱。在排版方面，手機(jī)的尺寸和對比度同樣重要(如果不是更多的話)。閱讀長篇文章時(shí)，即使是高質(zhì)量的移動(dòng)屏幕，凝視仍然有些乏味。確保文本大小合適，并設(shè)置行距和邊距以幫助提高可讀性。得出的結(jié)論是，桌面用戶在可用性方面所做的相同努力也應(yīng)致力于使移動(dòng)體驗(yàn)成為一種出色的體驗(yàn)。
2、利用可用的屏幕空間
多列布局無處不在，但是文本密集的列通常不適用于最小的屏幕。在這種情況下，將多列簡單地轉(zhuǎn)換為單列是有意義的。但是，當(dāng)我們談?wù)撈桨咫娔X甚至手機(jī)橫向放置時(shí)，專欄仍然會(huì)非常有效。關(guān)鍵是值得付出額外的努力，看看我們?nèi)绾巫詈玫乩梦覀儸F(xiàn)有的屏幕資源。如此多次，我們一直跳過這些介于中間的分辨率，而只專注于最小和最大視口的解決方案。例如，在同一視圖中，以縱向放置的平板電腦應(yīng)該與以電話放置的手機(jī)有所不同。實(shí)施這種策略的一種較簡單的方法是使用CSS Flexbox。正確配置后，通?？梢院芎玫刈詣?dòng)為當(dāng)前視口提供最佳布局。你可能需要通過媒體查詢進(jìn)行一些細(xì)微的調(diào)整，但是值得進(jìn)行一些額外的調(diào)整。
3、一切都不必完全相同
很容易陷入將單個(gè)設(shè)計(jì)元素放置在移動(dòng)和桌面視口相同的相對位置的陷阱中。盡管對一致性的要求值得稱贊，但這種方法有時(shí)在較小的屏幕上確實(shí)適得其反。例如，許多網(wǎng)站在其標(biāo)題中放置了諸如搜索表單或社交媒體圖標(biāo)之類的項(xiàng)目。在較大的屏幕上，效果很好，但通常會(huì)妨礙電話上的主要內(nèi)容。在輔助頁面上尤其如此，用戶可能實(shí)際上只是想閱讀頁面的文本，而不必?fù)?dān)心所有多余的垃圾。除了將這些類型的項(xiàng)目粘貼在網(wǎng)站標(biāo)題上之外，還有多種選擇。你可能會(huì)考慮將這些項(xiàng)目隱藏在按用戶要求顯示它們的按鈕中。它們可以成為你實(shí)施的任何移動(dòng)導(dǎo)航解決方案的一部分。同樣的事情也可能適用于邊欄之類的功能。其他元素可能會(huì)完全隱藏。同樣媒體查詢(可能還有一些條件代碼)可以將這些項(xiàng)目放在移動(dòng)設(shè)備上更合適的位置。對應(yīng)該去哪里應(yīng)該做出最好的判斷。
4、添加特定于移動(dòng)設(shè)備的功能
在考慮移動(dòng)網(wǎng)站設(shè)計(jì)策略時(shí)，你可能會(huì)考慮添加一些小技巧，從而為移動(dòng)用戶帶來更高級別的便利。這些項(xiàng)目通常不需要花費(fèi)額外的精力來實(shí)施。但是它們可以大大提高可用性。在支持觸摸功能的設(shè)備上瀏覽可能會(huì)帶來一些臺式機(jī)用戶不必面對的挑戰(zhàn)。對于一個(gè)人來說，必須從較長的頁面向上滾動(dòng)才能返回到主導(dǎo)航是移動(dòng)設(shè)備上的主要難題。你可以通過使用在檢測到用戶正在向上滾動(dòng)時(shí)自動(dòng)顯示的導(dǎo)航來在某種程度上緩解這種情況。另一種選擇是在每個(gè)頁面的底部都有一個(gè)很好的舊“返回首頁”鏈接。對于鼓勵(lì)撥打電話的企業(yè)，點(diǎn)擊通話按鈕可能是受歡迎的功能。這可以采用傳統(tǒng)按鈕的形式，該按鈕的字面意思是“立即致電我們”，或者通過在整個(gè)站點(diǎn)上超鏈接電話號碼的任何提及。本質(zhì)上講，你可以采取的一切措施來幫助移動(dòng)用戶與你的組織進(jìn)行互動(dòng)都是值得考慮的。
移動(dòng)網(wǎng)站設(shè)計(jì)是功能強(qiáng)大的工具。我們可以使用它在幾乎任何設(shè)備上為用戶提供最佳體驗(yàn)(也許不是您父親的舊翻蓋手機(jī)，但是我們離題了)。但是，作為設(shè)計(jì)師，我們要充分利用各種可能性。首先，最重要的是確保移動(dòng)用戶可以輕松瀏覽和導(dǎo)航你的站點(diǎn)。從那里，就外觀和工作方式做出最明智的設(shè)計(jì)決策。