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