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