歡迎來到上海仝薪網絡科技有限公司官網,上海網站建設公司上海網站制作公司微信網站上海競價托管公司
咨詢,就免費贈送域名與服務器,咨詢熱線:13761675098當前位置: 競價外包 > 建站知識 > 手機網站知識 >
聯系我們
電話咨詢:13761675098
E-mail:[email protected]
地址: 上海市金園一路1118弄

手機網站版式設計 如何將文字的排版做好

作者/整理:seo 來源:互聯網 2019-01-28

  當一個網站建設好后,發現網站的流量越來越少,其實究其原因,還是因為在照顧好了用戶后,卻沒有照顧決定網站流量的搜索引擎。今天,我們談談如何在保證用戶體驗的情況下,對手機網站版式設計中文字的排版做好。

  一部手機,電量充足,網絡通暢,就足以讓我們打發一天的時光,盡情沉浸在手機時代的繽紛世界里。這個信息資源無窮盡的手機網絡世界,是設計師和開發者們在不停的探索中一路一步精心打造。如何進一步美化這個世界,優化用戶體驗?如何在手機有限的屏幕上呈現清晰的UI和UX?這里太多因素需要考慮,文本排版設計就是其中不可或缺的一部分。

  首先,有必要了解一下基礎知識。

  一、什么是文本排版?

  “文本排版,“又稱“文字設計”,是一種涉及對字體、字號、縮進、行間距、字符間距進行設計、安排等方法來進行排版的一種工藝。在數碼技術普及之前,文本排版是一項專業的工作,數碼時代的來臨使字體排印不像從前僅由排字印刷方面的技術工人完成,而更被圖形藝術家、藝術指導、文書人員甚至兒童廣泛使用。”

  二、為什么文本版排版在手機端設計中很重要?

  手機端設計比網頁設計要求更精致細膩,這個方寸之間的屏幕上,每個元素的選擇都更加謹慎,不僅美觀,更要實用。用戶對手機端文本排版設計的體驗要求也更高,于設計師而言,讓用戶能滿足于手機的文本排版設計是極具挑戰性的。

  想象一下,一個完全沒有任何文字的手機網頁是怎樣的呢?不現實吧。同樣,在手機界面上隨意的放置文本元素,會有意義嗎?能實現有效的UI和UX嗎?雖然圖片和視頻極具動態也豐富多彩,但用戶仍然需要通過文本獲取信息。這不僅僅是一種習慣,文字本身也能傳達其它元素無法傳達的信息。優秀的手機排版設計,不會讓用戶產生視疲勞,而應該讓用戶能輕松獲取信息,實現人機有效互動。

  那么,文本排版設計的奧秘究竟有哪些呢?如何通過文本排版設計實現完美UI呢?

  通常,文本排版設計包括但不限于以下元素。另外,需謹記:手機設計日新月異,手機文本排版設計當然也在與時俱進。我們既要尊重現有規則,但也要保持創新和探索。

  以iPhone的文本排版設計為例。在最新的iOS 11中,做出了以下更新:

  1)增加文本大小和權重:提高可讀性。

  2)提供較大字號和標準動態尺寸字號,適用于具有輔助性功能需求的用戶。

  接下來,講解如何設計優秀的手機端文本排版:

  1. 字體

  1)字體選擇

  字體選擇常常被錯誤對待,要么直接忽視,要么簡單地從字體庫中任意挑選一款。實際上,不同類型的文本內容需要使用不同的字體,字體可以表達內心感覺和心理需求。試想,使用濃密生硬的字體在女性色彩的讀物內容里,是不是顯得格格不入?相反,你應該選擇比較細膩和柔和的字體。生硬濃重的字體往往更具剛硬氣質。

  另一方面,過度花哨好看的字體在手機屏幕上可能很難辨認。手機端的UI要求簡單而干凈,使用同種風格的字體是保持界面清爽的關鍵。避免單調,您可以選擇一種輔助字體與主要字體形成對比。這種情況下,界面的字體數量要控制在2到3種,多則混亂。

  2)字體大小

  手機屏幕有限,字體大小至關重要。如果你只是在手機屏幕上使用微小字體來解決,那就真是一個笑話了。雖然用戶可以縮放文本來改變字體大小,從而提升可讀性,但這絕不是設計師偷懶的借口。這多出的操作,本就違背用戶體驗。字體過小看不清,還會損傷用戶的眼睛,花費更多的時間閱讀;而較大的字體又會迅速吃掉屏幕,并破壞閱讀連貫性。

  那怎樣是適當的字體尺寸?

  對于iOS,使用至少11sp的字體大小,而對于Android,請選擇14 sp為主文本。請注意,這是主文本通常使用的標準,不是強行的唯一標準。此外,在設計手機端字體大小時,需要留意設計字體大小要比常規、使用在桌面端的略大一些。

  2. 間距

  1) 行間距

  行間距是一排文字和另一排文字之間的空間。手機屏幕較小,所以行間距通常比桌面版本小。設置行間距時,需要在手機端設置比桌面端小的值。過寬或過窄的行間距都會破壞手機UI界面,降低可讀性。許多人認為,1.4em是標準的行間距,但在手機屏幕上,仍然有顯得幾分緊密,用戶可能會感到文字仿佛在收緊。在設計上,標準的行間距應該是字體大小的120%。另外, 如果文本的長度越短,那么它對行間距寬度的要求也會降低。

  2) 字間距

  字間距是兩個文字之間的間距。這是手機排版中的一個很小的因素,但值得關注。你可能會認為,在一個段落里,字距調整可能不是一個必要問題。但如果您足夠細心,您可能會注意到,這通常出現在英文文本中,大寫字母與小寫字母之間的空間和兩個小寫字母之間的空間不盡相同。這會造成一定的視覺失調,破壞美感。

  3) 全文本字間距

  上面不是剛提了字距嗎?這里是否重復了呢?當然不是,字距在兩個文字間和全文本的字間距并不是完全一樣的概念。這兩者往往可能會使設計師產生迷惑,但它們類似卻不同。這里的字間距是所有字符和文本的字間距。有效的字間距會使文本更易讀。通常,字體使用時可以適當調整頁面字距,因此你不需要過多的關注。但如果你注意這一點,也許會對設計大有裨益。通常,大文本需要更少的字距,而稀疏的文本要求更寬的字距。

  3. 行長

  行長也是手機排版中的一個重要尺度要求。文本行的長度可能會影響整個排版。桌面屏幕的行長勢必會超出手機屏幕邊框。在手機排版中,每行上的字符數量,字體大小和行長度都緊密相連,互相影響和牽制。合理的布局這些要素是可讀性的關鍵。通常,一行保留30-40個字符數時比較合理的選擇。

  4. 留白

  留白在設計中無處不在。留白可以帶來自由和放松的感覺。手機排版留白主要包含:行間距,邊距,段落空間。手機排版中的適當空間可以幫助用戶更好閱讀文本,提升界面美感。設計師可以考慮從頁面10%到20%的范圍開始留白。但不要留白區域太大,手機屏幕有限。

  5. 層次結構

  層次結構是強調整個文本的關鍵元素,并能產生對比度。但手機排版中的層次結構比通常web界面層次簡潔,通常Web界面擁有3個級別。而手機屏幕的空間有限,所以很多設計師只應用了2個層次:標題和文本主題。標題是抓住讀者眼球,而文本傳達可讀性。保留標題和主題這兩個結構層次,這也是手機設計的一個趨勢。這可以使手機UI簡潔,并保持對比度和層次感。

  6. 對比度

  在手機屏幕上,文本數量遠遠小于Web界面,于是同等設置的對比值,在手機界面上會放大。手機文本排版設計的對比度問題,最大的原則就是削弱對比。如果你在小屏幕上使用環境光度和短字體,不但沒有幫到用戶,還會讓他們產生頭疼暈眩的感覺。顏色選擇對對比度影響很大,更糟的例子,紅色文字與綠色背景。此外,字體大小也是對比度的一大考慮。當設置層次結構時,不要太過火,標題的字體大小不能太大于文本主體。最后,留白和文本部分也可以形成一種微弱的對比。

  7. 功能性

  保持平衡美觀的UI是遠遠不夠的,功能也是同等重要的。手機文本設計還要產生實際的作用,比如滿足我們的一些操作,像購買產品,下訂單或預訂機票。文本需要清晰指示用戶能做什么?接下來可以做什么?確保用戶可以輕松地執行操作。功能性文本需要突出,可點擊的元素應該足夠大,以便用戶可以點擊它們。

  8. 對齊

  通常,文本對齊方式有4種:左,右,中或兩端對齊。哪一種在手機排版中更好?

  關鍵是要保持舒適清晰的邊距。左中右三種方式都可以保留邊距,而兩端對齊在左右兩側都沒有邊距。此外,兩端對齊文本會導致不一致的字間距,最壞的情況還會導致一行中的幾個單詞緊緊湊在一起。對于文本主體而言,兩端對齊是不明智的選擇。

  左側對齊是其余3種對齊方式里的最佳選擇。它可能產生右邊緣邊距,留下空間,左對齊可以使用戶的目光從一行文字連貫到下一行文字,提供一個整齊的初始點。

  然而,有些設計師認為混合對齊方式可以更好的實現和諧的UI。看上面的界面:

  文本主體內容多,使用左側對齊;而標題或短行文本,居中對齊也是很好的選擇。

  9. 文本樣式

  盡可能使用內置文本樣式。內置的文字樣式可讓您以視覺上獨特的方式表達內容,同時保持最佳的易讀性。這些風格基于系統字體,并且你可以利用關鍵的排版功能,例如動態類型,可自動調整每種字體大小的字距和行距。

  10. 原型設計

  文版排版設計在很多設計范圍類都至關重要,原型設計中也是必不可少,優秀的文本排版,能夠和其他元素組件共同服務于干凈的UI界面。

  但在原型設計中,文本不需要具備真正的意義。在 XCode 中調整代碼,在 Sketch 中修改設計都太慢太麻煩了,不妨試試國內最優秀的原型設計工具Mockplus,Mockplus 自帶了大量標準組件,你可以直接通過 Drag & Drop 的方式來快速布局你的頁面,文本組件有單行文本和多行文本的組件,并可對其進行例如顏色,尺寸,對其方式,字體選擇等各種屬性設置,并且可以添加交互。

  新版本加入了文本數據填充功能,可對文本內容進行單個和批量填充,十分便捷。此外,你可以直接手機上直接查看,是否具有較高的可讀性。

   11. 字型和品牌

  同一款app或系統,建議使用單個字型并演變幾種不同字體變體和不同尺寸。混合幾個不同的字型會使您的界面看起來分散和混亂。通常,品牌或應用程序擁有自己的預設字型。蘋果使用San Francisco, 諾基亞使用Nokia Pure,Google Android使用Roboto。。

  蘋果根據產品功能選擇字體。例如, iOS 7使用了(Pro)Light,iOS 9使用SF-UI,而在iOS 10中,San Francisco的字體版本是SF UI Text 和 SF UI Display。

   12. 響應式設計

  手機設備有不同的尺寸。響應式設計也已經應用于手機設計。響應式排版成必將為這一趨勢的重要因素。上述所有元素,任何錯誤使用可能會破壞整體手機UI設計。設計師需要考慮手機排版在不同設備上的外觀。

    以上是針對手機網站版式設計,如何將中文字的排版做好的詳細內容,希望對您有所幫助,更多詳情請關注上海仝薪網絡

重庆时时彩官方网站app