公司新聞
在現(xiàn)如今的多屏互動(dòng)的時(shí)代,響應(yīng)式網(wǎng)站設(shè)計(jì)在日常生活當(dāng)中扮演的角色越來(lái)越重要,而衡量一個(gè)響應(yīng)式網(wǎng)站是不是優(yōu)秀的,全看它是不是有靈活精巧的布局,網(wǎng)站的布局的合理與否直接影響到網(wǎng)站的響應(yīng)后效果,那么做好響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)要注意什么呢?
1.精心挑選字體將為你贏得靈活而高效的排版
自從客戶端字體(Font Face)被引入網(wǎng)頁(yè)設(shè)計(jì)中之后,網(wǎng)頁(yè)設(shè)計(jì)師們便擁有了將不同字體用于自己設(shè)計(jì)中的自由。此前,他們只能使用特定的,與網(wǎng)頁(yè)安全兼容的字體
與之形成對(duì)比的是angelfire 網(wǎng)站,這個(gè)站點(diǎn)使用了多種不同的字體,看起來(lái)混亂,不專業(yè)。
2. 突出顯示標(biāo)題
網(wǎng)頁(yè)排版的一個(gè)特點(diǎn)就是標(biāo)題在版式中占據(jù)突出位置。別致的標(biāo)題能吸引用戶在你的網(wǎng)站停留更久。為了實(shí)現(xiàn)這一點(diǎn),你可以利用字形(glyphs)和連字(ligatures)技巧創(chuàng)造外觀更獨(dú)特的標(biāo)題。
連字指的是看起來(lái)似乎是連接在一起的字母。例如,單詞“fish”中的f和i在某種字體里可能聯(lián)成一體(fi)。通過(guò)瀏覽器的字體設(shè)置功能或借助“文本渲染——優(yōu)化清晰度”(Text Rendering- OptimiseLegibility)特性, 你可以輕松地實(shí)現(xiàn)連字效果。火狐瀏覽器已經(jīng)設(shè)置了默認(rèn)的連字符。在某些字體中使用特定的連字組合效果能為你的網(wǎng)頁(yè)版式增加美感和風(fēng)格。在網(wǎng)頁(yè)排版軟件的Text, Type 或Open Type目錄中,一般都可以開(kāi)啟或關(guān)閉連字效果。當(dāng)合適的字母相鄰出現(xiàn)時(shí),這些軟件會(huì)自動(dòng)為它們?cè)O(shè)置連字效果。請(qǐng)注意這個(gè)網(wǎng)站中優(yōu)雅的連字。這些優(yōu)美的字體如果用于網(wǎng)頁(yè)標(biāo)題中的話,無(wú)疑會(huì)為訪客帶來(lái)更為卓越的用戶體驗(yàn)。
3.合理搭配不同大小和顏色的字體
正如下面的圖片所傳遞的信息一樣,我們?cè)诰W(wǎng)頁(yè)設(shè)計(jì)中必須選擇能在桌面端和移動(dòng)設(shè)備屏幕上都清晰顯示的字體。一款字體在印刷品中與在數(shù)碼設(shè)備中顯示的效果是不同的。因此我們必須理解font family屬性,風(fēng)格和效果。根據(jù)W3C對(duì)于CSS字體的規(guī)定,Serif, Sans-Serif, Monospace, Fantasy 和Cursive等字體都具有font family屬性。第二,應(yīng)根據(jù)網(wǎng)站的主題或分類來(lái)選擇字體。這樣才能確保你的網(wǎng)頁(yè)能引起目標(biāo)受眾的共鳴,達(dá)到想要的效果。襯線字體同樣能用于提升文本的閱讀效果,強(qiáng)化要傳達(dá)的信息。這里的問(wèn)題是,襯線字體的特性決定了它只能在高解析度的屏幕上正常顯示,在低解析度的屏幕上可能會(huì)導(dǎo)致糟糕的結(jié)果。因此建議你在短標(biāo)題中使用藝術(shù)字體,在正文中采用更簡(jiǎn)潔的字體。
4. 在響應(yīng)式排版中,調(diào)節(jié)行寬十分重要
必須對(duì)網(wǎng)頁(yè)中的行寬(line length )進(jìn)行調(diào)節(jié),因?yàn)樽煮w的行寬與排版的響應(yīng)程度息息相關(guān)。響應(yīng)式設(shè)計(jì)也包括在不同尺寸的屏幕上字體所發(fā)生的自適應(yīng)式改變。所以調(diào)整字體的行寬是必須的。理想的行寬為每行文本中字符數(shù)量在45-47之間,包含空格和標(biāo)點(diǎn)。 長(zhǎng)的限度我45-85個(gè)字符。這是對(duì)人們的閱讀習(xí)慣和眼動(dòng)規(guī)律做出研究后得出的結(jié)論。根據(jù)這一結(jié)論,有專家建議網(wǎng)頁(yè)內(nèi)容采用左對(duì)齊的排版方式,因?yàn)槿说囊暰€在閱讀時(shí)一般會(huì)按照從左至右的方式在水平方向上運(yùn)動(dòng)。
網(wǎng)站suite 將沒(méi)行文本的字符數(shù)限定為75個(gè)。正如你能看到的,頁(yè)面中的文本看起來(lái)十分優(yōu)美,能讓用戶懷著興趣一直讀下去。嗨創(chuàng)免費(fèi)自助建站平臺(tái),用精湛的專業(yè)技術(shù)讓客戶更便捷, 重要的是!嗨創(chuàng)免費(fèi)為大家開(kāi)放建站,無(wú)需花費(fèi)高額的資金就可以得到您滿意的、用戶體驗(yàn)性極強(qiáng)的響應(yīng)式網(wǎng)站,也可以根據(jù)自身行業(yè)以及企業(yè)需求自主建立更適合您的響應(yīng)式網(wǎng)站。
5、不要優(yōu)先為桌面版設(shè)計(jì)
開(kāi)發(fā)者通常會(huì)犯的一個(gè)常見(jiàn)錯(cuò)誤,他們?cè)O(shè)計(jì)網(wǎng)站時(shí)優(yōu)先考慮桌面版,因?yàn)樵谶@些人眼中,將基于桌面版的網(wǎng)站轉(zhuǎn)變?yōu)獒槍?duì)其他設(shè)備的響應(yīng)式web設(shè)計(jì)是件很輕松愉 快的事情。但是,這個(gè)發(fā)生在計(jì)劃規(guī)劃階段的錯(cuò)誤本身會(huì)變成一個(gè)非常巨大的問(wèn)題。甚至?xí)斐煞倒ぃ?dāng)然,大量的錯(cuò)誤也會(huì)蔓延出來(lái)。
6、不應(yīng)隱藏內(nèi)容
響應(yīng)式設(shè)計(jì)通常會(huì)有更少的空間展示圖片和內(nèi)容,但是這并不意味著你的內(nèi)容應(yīng)當(dāng)被忽略。你不得不采取一種方式重新安排內(nèi)容,使其能夠保證易讀性。這個(gè)比較容 易實(shí)現(xiàn),可以通過(guò)創(chuàng)建導(dǎo)航鏈接并且使用錨,是用戶在一個(gè)頁(yè)面中能看到他們一直在尋找的內(nèi)容。那些通過(guò)CSS布局控制內(nèi)容隱藏的應(yīng)當(dāng)明白,這些內(nèi)容依然會(huì)被 加載,因此,你通過(guò)為用戶提供完整的觀看體驗(yàn)也沒(méi)什么大不了。簡(jiǎn)單而言,用戶不應(yīng)該由于他們所使用的設(shè)備而遭受開(kāi)發(fā)者的“懲罰”。
版權(quán)所有 武漢峻奇網(wǎng)絡(luò)科技有限公司 鄂ICP備11007104號(hào)-1
鄂公網(wǎng)安備 42010602002739號(hào)