2023-01-05 分類: 網(wǎng)站制作
公司在設(shè)計(jì)手機(jī)網(wǎng)頁時(shí),會(huì)告訴你需要注意的事項(xiàng):
1.可讀性和可用性是最重要的
每個(gè)人都希望自己的網(wǎng)站制作在設(shè)計(jì)每個(gè)屏幕上都很漂亮。然而,在移動(dòng)領(lǐng)域嘗試過于花哨是危險(xiǎn)的。在臺(tái)式機(jī)上看起來很漂亮的高端布局或功能對(duì)手機(jī)來說可能沒有意義。在適當(dāng)?shù)那闆r下,它需要簡(jiǎn)化。如果事實(shí)證明某個(gè)元素在小屏幕上過于笨拙,你不會(huì)后悔刪除它或者用更有效的工作來代替它。就排版而言,移動(dòng)網(wǎng)頁設(shè)計(jì)的大小和對(duì)比度同樣重要(如果不是更重要的話)??撮L(zhǎng)文章的時(shí)候,即使用高質(zhì)量的手機(jī)屏幕,盯著看還是有些枯燥。確保文本大小正確,并設(shè)置行距和邊距以幫助提高可讀性??傊烂嬗脩粼诳捎眯苑矫嫠龅呐σ矐?yīng)該專注于讓移動(dòng)體驗(yàn)成為一種偉大的體驗(yàn)。
2.使用可用的屏幕空間
多欄布局無處不在,但是文本密集的欄通常不適合最小的屏幕。在這種情況下,簡(jiǎn)單地將多列轉(zhuǎn)換成單列是有意義的。不過這個(gè)欄目在我們談到平板電腦甚至手機(jī)橫放的時(shí)候還是很有效果的。關(guān)鍵是,值得花點(diǎn)時(shí)間來看看我們?nèi)绾未笙薅鹊乩矛F(xiàn)有的屏幕資源。很多時(shí)候,我們已經(jīng)跳過這些中間分辨率,只關(guān)注最小和大的視口解決方案。例如,在同一視圖中,縱向放置的平板電腦應(yīng)該與移動(dòng)電話中放置的手機(jī)不同。實(shí)現(xiàn)這種策略的一個(gè)更簡(jiǎn)單的方法是使用CSS Flexbox。配置正確后,通??梢宰詣?dòng)為當(dāng)前視口提供好布局。你可能需要通過媒體查詢做一些小的調(diào)整,但是做一些其他的調(diào)整還是值得的。
3.一切不必完全相同
很容易陷入將單個(gè)設(shè)計(jì)元素放置在與移動(dòng)和桌面視口相同的相對(duì)位置的陷阱。雖然一致性的要求值得稱贊,但這種方法有時(shí)會(huì)在較小的屏幕上適得其反。例如,許多網(wǎng)站在標(biāo)題中放置了搜索表單或社交媒體圖標(biāo)等項(xiàng)目。在更大的屏幕上,效果很好,但通常會(huì)遮擋手機(jī)的主要內(nèi)容。在輔助頁面上尤其如此,用戶實(shí)際上可能只想閱讀頁面上的文本,而不用擔(dān)心所有額外的垃圾。除了在網(wǎng)站標(biāo)題上粘貼這些類型的項(xiàng)目之外,還有許多選項(xiàng)。您可以考慮將這些項(xiàng)目填充到一個(gè)按鈕中,根據(jù)用戶的要求顯示它們?;蛘咚鼈兛梢允悄鷮?shí)施的任何移動(dòng)導(dǎo)航解決方案的一部分。同樣的事情可能適用于側(cè)邊欄等功能。其他元素可能完全隱藏。類似地,媒體查詢(可能還有一些條件代碼)也可以將這些項(xiàng)目放在移動(dòng)設(shè)備上更合適的位置。決定你好去哪里。
4.添加特定于移動(dòng)設(shè)備的功能
在考慮響應(yīng)式設(shè)計(jì)策略時(shí),可以考慮加入一些技巧,為移動(dòng)用戶帶來更高層次的便利。這些項(xiàng)目通常不需要額外的努力就可以實(shí)現(xiàn)。但是它們可以極大地提高可用性。在支持觸摸的設(shè)備上瀏覽可能會(huì)帶來桌面用戶不必面對(duì)的挑戰(zhàn)。對(duì)于一個(gè)人來說,必須從一個(gè)較長(zhǎng)的頁面向上滾動(dòng)以返回到主導(dǎo)航是移動(dòng)設(shè)備上的主要挑戰(zhàn)。您可以通過使用導(dǎo)航功能(當(dāng)檢測(cè)到用戶向上滾動(dòng)時(shí)自動(dòng)顯示)在一定程度上緩解這種情況。另一個(gè)選擇是在每一頁的底部有一個(gè)很好的“回到家”的鏈接。對(duì)于鼓勵(lì)打電話的企業(yè)來說,點(diǎn)擊“呼叫”按鈕可能是一個(gè)受歡迎的功能。這可以采取傳統(tǒng)按鈕的形式,字面意思是“現(xiàn)在給我們打電話”,或者是提到整個(gè)網(wǎng)站超鏈接的電話號(hào)碼。本質(zhì)上,您可以考慮所有措施來幫助移動(dòng)用戶與組織進(jìn)行交互。
5.流動(dòng)性問題
分享文章:網(wǎng)站制作如何讓手機(jī)網(wǎng)頁好看又實(shí)用?
網(wǎng)頁地址:http://aaarwkj.com/news26/228426.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷seo公司;服務(wù)項(xiàng)目有網(wǎng)站制作等
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容