POST TIME:2018-12-03 17:34
排版設計是ui設計師的基本功。但或許是因為它太基本了,很多時候很多設計師都會直接忽略它的存在,導致最后的實現(xiàn)效果不夠抱負。或許就是這些細節(jié)導致手中的產(chǎn)品看起來總是差那么一點點。尤其是對于一些注重閱讀體驗的頁面來說,每一個細節(jié)都可能成為致命傷。
藝術是無依據(jù)可循的,但是文字排版卻是有依據(jù)可循的。下面就排版中的字體樣式、留白大小、對齊方式、色彩對比度四個要素來簡單談一談如何科學提高移動端文本的易讀性,,提升設計質(zhì)感。(找到設計依據(jù)之后,面對產(chǎn)品經(jīng)理的質(zhì)疑也更有懟回去的底氣了哈哈哈)
大前提:明確設計目標所有的設計都必需在這個前提之下進行。以下提到的數(shù)值只是一個參考,更重要的是你想通過頁面?zhèn)鬟f給用戶的信息,明確設計目標,以此對你的設計進行調(diào)整。不然,設計的意義便不存在了。
字體大小通過字體大小去凸顯內(nèi)容、區(qū)分層級是一種設計趨勢,同時也是ios11 的設計思路之一。那么,如何去選擇字體的大小能達到比較好的效果呢?
material design對方塊字主標題和內(nèi)容文字的大小別離定為24sp和15sp,24/15=1.6,接近黃金比例;airbnb的主標題和內(nèi)容文字的比例同樣接近黃金比例。
實際上黃金比例的字號對比在移動端是一個適合突出主題的比例,是一個“美”的比例,但并不必然是一種適合閱讀的比例。一個以閱讀為主的頁面在字號選擇上可能需要較小的比例,若是你在字號的選擇上缺乏信心,也可以用一些工具進行輔助選擇,好比Modular Scale(Adobe的排版負責人Tim Brown創(chuàng)建的工具),其中囊括了歷史上最令人滿意的幾種比例關系,通過這個比例進行匹配至少可以保證不出錯。
文字留白“留白”即在版面中留出空余的空間,處理好留白能使文本視覺流平順,提升閱讀舒適性。對于一篇文章而言,留白從小到大別離有文字中的空白、文字與文字之間的空白、行與行之間的空白、段與段之間的空白,留白面積的大小也要遵循這個挨次。
行間距的設定:行間距的設定直接影響了視線從前一行末尾移動到下一行開頭的難易。行間距過高導致視線分散,容易游離;行間距過小則容易影響視線的移動,讓人找不到正在閱讀哪一行。遍及認可的做法是將行高設置為1.5em-2.0em。在這個基礎之上,字體樣式、大小、行寬還會對行間距的設定有必然的影響。