目前,我們會(huì)發(fā)現(xiàn),手機(jī)已經(jīng)成了我們必不可少的工具,曾經(jīng)使用手機(jī)是為了方便聯(lián)絡(luò),只要實(shí)現(xiàn)通話和短信功能即可,現(xiàn)在,我們對(duì)手機(jī)的要求也越來越高。于是,手機(jī)開發(fā)者以及設(shè)計(jì)者會(huì)花盡心思的來進(jìn)行研發(fā),我們了解某些信息都來源于對(duì)網(wǎng)頁(yè)的瀏覽,那么手機(jī)站建設(shè)的時(shí)候,設(shè)計(jì)師對(duì)于文字排版是否有過仔細(xì)研究呢?究竟怎樣的的文字排版更加合理
1).字體選擇字體選擇常常被錯(cuò)誤對(duì)待,要么直接忽視,要么簡(jiǎn)單地從字體庫(kù)中任意挑選一款。實(shí)際上,不同類型的文本內(nèi)容需要使用不同的字體,字體可以表達(dá)內(nèi)心感覺和心理需求。試想,使用濃密生硬的字體在女性色彩的讀物內(nèi)容里,是不是顯得格格不入?
相反,您應(yīng)該選擇比較細(xì)膩和柔和的字體。生硬濃重的字體往往更具剛硬氣質(zhì)。
另一方面,過度花哨好看的字體在手機(jī)屏幕上可能很難辨認(rèn)。手機(jī)端的UI要求簡(jiǎn)單而干凈,使用同種風(fēng)格的字體是保持界面清爽的關(guān)鍵。避免單調(diào),您可以選擇一種輔助字體與主要字體形成對(duì)比。這種情況下,界面的字體數(shù)量要控制在 2 到 3 種,多則混亂。
2).字體大小手機(jī)屏幕有限,字體大小至關(guān)重要。如果您只是在手機(jī)屏幕上使用微小字體來解決,那就真是一個(gè)笑話了。雖然用戶可以縮放文本來改變字體大小,從而提升可讀性,但這絕不是設(shè)計(jì)師偷懶的借口。這多出的操作,本就違背用戶體驗(yàn)。字體過小看不清,還會(huì)損傷用戶的眼睛,花費(fèi)更多的時(shí)間閱讀;而較大的字體又會(huì)迅速吃掉屏幕,并破壞閱讀連貫性。
那怎樣是適當(dāng)?shù)淖煮w尺寸?
對(duì)于iOS,使用至少11sp的字體大小,而對(duì)于Android,請(qǐng)選擇14 sp為主文本。請(qǐng)注意,這是主文本通常使用的標(biāo)準(zhǔn),不是強(qiáng)行的標(biāo)準(zhǔn)。此外,在設(shè)計(jì)手機(jī)端字體大小時(shí),需要留意設(shè)計(jì)字體大小要比常規(guī)、使用在桌面端的略大一些。
3) .行間距行間距是一排文字和另一排文字之間的空間。手機(jī)屏幕較小,所以行間距通常比桌面版本小。設(shè)置行間距時(shí),需要在手機(jī)端設(shè)置比桌面端小的值。過寬或過窄的行間距都會(huì)破壞手機(jī)UI界面,降低可讀性。許多人認(rèn)為,1.4em是標(biāo)準(zhǔn)的行間距,但在手機(jī)屏幕上,仍然有顯得幾分緊密,用戶可能會(huì)感到文字仿佛在收緊。在設(shè)計(jì)上,標(biāo)準(zhǔn)的行間距應(yīng)該是字體大小的120%。另外, 如果文本
4). 字間距字間距是兩個(gè)文字之間的間距。這是手機(jī)排版中的一個(gè)很小的因素,但值得關(guān)注。您可能會(huì)認(rèn)為,在一個(gè)段落里,字距調(diào)整可能不是一個(gè)必要問題。但如果您足夠細(xì)心,您可能會(huì)注意到,這通常出現(xiàn)在英文文本中,大寫字母與小寫字母之間的空間和兩個(gè)小寫字母之間的空間不盡相同。這會(huì)造成一定的視覺失調(diào),破壞美感。
5).全文本字間距上面不是剛提了字距嗎?這里是否重復(fù)了呢?當(dāng)然不是,字距在兩個(gè)文字間和全文本的字間距并不是完全一樣的概念。這兩者往往可能會(huì)使設(shè)計(jì)師產(chǎn)生迷惑,但它們類似卻不同。這里的字間距是所有字符和文本的字間距。有效的字間距會(huì)使文本更易讀。通常,字體使用時(shí)可以適當(dāng)調(diào)整頁(yè)面字距,因此您不需要過多的關(guān)注。但如果您注意這一點(diǎn),也許會(huì)對(duì)設(shè)計(jì)大有裨益。通常,大文本需要更少的字距,而稀疏的文本要求更寬的字距。
6). 層次結(jié)構(gòu)層次結(jié)構(gòu)是強(qiáng)調(diào)整個(gè)文本的關(guān)鍵元素,并能產(chǎn)生對(duì)比度。但手機(jī)排版中的層次結(jié)構(gòu)比通常web界面層次簡(jiǎn)潔,通常Web界面擁有 3 個(gè)別。而手機(jī)屏幕的空間有限,所以很多設(shè)計(jì)師只應(yīng)用了 2 個(gè)層次:標(biāo)題和文本主題。標(biāo)題是抓住讀者眼球,而文本傳達(dá)可讀性。保留標(biāo)題和主題這兩個(gè)結(jié)構(gòu)層次,這也是手機(jī)設(shè)計(jì)的一個(gè)趨勢(shì)。這可以使手機(jī)UI簡(jiǎn)潔,并保持對(duì)比度和層次感。
7).功能性保持平衡美觀的UI是遠(yuǎn)遠(yuǎn)不夠的,功能也是同等重要的。手機(jī)文本設(shè)計(jì)還要產(chǎn)生實(shí)際的作用,比如滿足我們的一些操作,像購(gòu)買產(chǎn)品,下訂單或預(yù)訂機(jī)票。文本需要清晰指示用戶能做什?接下來可以做什么?確保用戶可以輕松地執(zhí)行操作。功能性文本需要突出,可點(diǎn)擊的元素應(yīng)該足夠大,以便用戶可以點(diǎn)擊它們。
8).字型和品牌同一款app或系統(tǒng),建議使用單個(gè)字型并演變幾種不同字體變體和不同尺寸?;旌蠋讉€(gè)不同的字型會(huì)使您的界面看起來分散和混亂。通常,品牌或應(yīng)用程序擁有自己的預(yù)設(shè)字型。蘋果使用San Francisco, 諾基亞使用Nokia Pure,Google Android使用Roboto。
蘋果根據(jù)產(chǎn)品功能選擇字體。例如, iOS7 使用了(Pro)Light,iOS9 使用SF-UI,而在iOS10 中,San Francisco的字體版本是SF UI Text 和 SF UI Display。
9).文本樣式盡可能使用內(nèi)置文本樣式。內(nèi)置的文字樣式可讓您以視覺上獨(dú)特的方式表達(dá)內(nèi)容,同時(shí)保持佳的易讀性。這些風(fēng)格基于系統(tǒng)字體,并且你可以利用關(guān)鍵的排版功能,例如動(dòng)態(tài)類型,可自動(dòng)調(diào)整每種字體大小的字距和行距。
10).響應(yīng)式設(shè)計(jì)手機(jī)設(shè)備有不同的尺寸。響應(yīng)式設(shè)計(jì)也已經(jīng)應(yīng)用于手機(jī)設(shè)計(jì)。響應(yīng)式排版成必將為這一趨勢(shì)的重要因素。上述所有元素,任何錯(cuò)誤使用可能會(huì)破壞整體手機(jī)UI設(shè)計(jì)。設(shè)計(jì)師需要考慮手機(jī)排版在不同設(shè)備上的外觀。
11).原型設(shè)計(jì)文版排版設(shè)計(jì)在很多設(shè)計(jì)范圍類都至關(guān)重要,原型設(shè)計(jì)中也是必不可少,的文本排版,能夠和其他元素組件共同服務(wù)于干凈的UI界面。但在原型設(shè)計(jì)中,文本不需要具備真正的意義。在 XCode 中調(diào)整代碼,在 Sketch 中修改設(shè)計(jì)都太慢太麻煩了,不妨試試國(guó)內(nèi)的原型設(shè)計(jì)工具M(jìn)ockplus,Mockplus 自帶了大量標(biāo)準(zhǔn)組件,你可以直接通過 Drag & Drop 的方式來快速布局你的頁(yè)面,文本組件有單行文本和多行文本的組件,并可對(duì)其進(jìn)行例如顏色,尺寸,對(duì)其方式,字體選擇等各種屬性設(shè)置,并且可以添加交互。新版本加入了文本數(shù)據(jù)填充功能,可對(duì)文本內(nèi)容進(jìn)行單個(gè)和批量填充,十分便捷。此外,你可以直接手機(jī)上直接查看,是否具有較高的可讀性
標(biāo)題名稱:成都手機(jī)網(wǎng)站建設(shè)的排版注重
URL標(biāo)題:http://jinyejixie.com/news/76486.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷seo公司;服務(wù)項(xiàng)目有網(wǎng)站建設(shè)、手機(jī)網(wǎng)站建設(shè)等
廣告
聲明:本網(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)