如何科學提高文本易讀性?

更新:2017-10-26    編輯:懷絲    來源:轉載    人氣:加載中...    字號:|

標簽:如何  文本  提高  科學  易讀性  百度搜索

如何科學提高文本易讀性?

排版設計是ui設計師的基本功。但或許是因為它太基本了,很多時候很多設計師都會直接漠視它的存在,導致最后的實現效果不夠理想。或許就是這些細節導致手中的產品看起來總是差那么一點點。尤其是對于一些重視導語體驗的頁面來說,每一個細節都可能成為致命傷。

藝術是無依據可循的,但是文字排版卻是有依據可循的。下面就排版中的字體樣式、留白大小、對齊方式、色彩比較度四個要素來簡單談一談如何科學提高移動文本易讀性,提升設計質感。(找到設計依據之后,面對產品經理的質疑也更有懟回去的底氣了哈哈哈)

大前提:明確設計目標

所有的設計都必須在這個前提之下進行。以下提到的數值只是一個參考,更首要的是你想通過頁面傳遞給用戶的信息,明確設計目標,以此對你的設計進行調劑。否則,設計的意義便不存在了。

字體大小

通過字體大小去凸顯內容、區分層級是一種設計趨勢,同時也是ios11 的設計思路之一。那么,如何去選擇字體的大小能達到對比好的效果呢?

material design對方塊字主標題和內容文字的大小分辨定為24sp和15sp,24/15=1.6,接近黃金比例;airbnb的主標題和內容文字的比例同樣接近黃金比例。

如何科學提高文本易讀性?

實際上黃金比例的字號比較在移動端是一個適合突出主題的比例,是一個“美”的比例,但并不一定是一種適合導語的比例。一個以導語為主的頁面在字號選擇上可能需要較小的比例,若是你在字號的選擇上短缺信心,也可以用一些工具進行輔助選擇,比如Modular Scale(Adobe的排版負責人Tim Brown創建的工具),其中囊括潦攀歷史上最令人滿意的幾種比例關系,通過這個比例進行匹配至少可以保證不出錯。

如何科學提高文本易讀性?

文字留白

“留白”即在版面中留出空余的空間,處理好留白能使文本視覺流平順,提升導語舒適性。對于一篇文章而言,留白從小到大分辨有文字中的空白、文字與文字之間的空白、行與行之間的空白、段與段之間的空白,留白面積的大小也要遵守這個順序。

行間距的設定:行間距的設定直接影響了視線從前一行末尾移動到下一行開頭的難易。行間距過高導致視線分散,容易游離;行間距過小則容易影響視線的移動,讓人找不到正在導語哪一行。普遍認可的做法是將行高設置為1.5em-2.0em。在這個根基之上,字體樣式、大小、行寬還會對行間距的設定有一定的影響。

如何科學提高文本易讀性?

評論列表(網友評論僅供網友表達個人看法,并不表明本站同意其觀點或證實其描述)

站點導航

您可能在找這些
黑龙江快乐十分走势图