小公尺手機字型大小如何調整

時間 2021-10-15 17:18:00

1樓:大腳印

蘋果手機如何調整字型大小

2樓:

隨著「理想的行寬」的普及化,引出了一些諸如「大螢幕時加大字型尺寸和小螢幕時縮小字型」等的建議,同時乙個好的行寬確實提高了閱讀體驗,但它只是好版式的一種衡量規則而已,另一種衡量規則是保證一種舒適的字型大小。

人們如何閱讀

人們用三種方式閱讀

在2023年,nielsen norman小組釋放了一張眼部追蹤研究的熱成像圖,人們閱讀最多的區域是紅色的,稍少一點的是黃色的,觀察區域最少的是藍色的,正如下圖你可以看到的,紅色和黃色區域形成了三個f狀圖形的變化,這些變化並不奇怪,因為人們是用三種不同的方式在閱讀。

人們隨意閱讀,掃一眼文字,閱讀單詞和句子,這兒和那兒,以便獲得一些內容的意思,下面的這個熱力圖顯示了某人隨意閱讀乙個產品(頁面)時眼睛的移動方式,這個讀者花時間尋找產品**,閱讀最前面的幾個句子,然後掃瞄彈出的列表。

nielsen norman 小組2006研究出的隨意閱讀時的f狀圖形

人們同樣也帶著目的掃瞄,從乙個區塊跳到另乙個區塊,尋找一些特別的資訊片段,他們可能只是讀到了乙個詞或者他們掃瞄螢幕時乙個詞的幾個首要特徵。

下面的這個熱力圖顯示了某人在google上有目的的搜尋時眼睛的移動情況,這個人閱讀最先的兩個結果時比較慢,然後,他們的眼睛從乙個區域跳到了另乙個,尋找搜尋條目,所以,我們看不到順著左邊的文字邊緣有很強的縱向痕跡。

nielsen norman 小組2006研究出的目標性掃瞄時的f狀圖形

nielsen norman 小組2006研究出的黏定了的閱讀方式時的f狀圖形

閱讀是乙個很複雜的過程

我們知道人們用三種不同的方式閱讀,但是讓我們看得更仔細一些,人們如何閱讀,f狀圖形是如何成型的。

我們知道人們. 不會. 讀. 每乙個. 分開的. 單詞,相反的,他們使用他們的中心視覺去聚焦在乙個單詞上,同時使用他們的次要視覺去發現下乙個要聚焦的點。

人們不會分開的閱讀每乙個單詞

人們使用他們的中心視覺和次要視覺去閱讀

我們同樣知道人們不凝視在每乙個單詞上,而是趨向於略過單詞(他們的眼睛帶來的小跳動,被稱為「掃視」)然後看完餘下的,這個行為在隨意閱讀和有目標性的掃瞄時格外明顯。

人們略過單詞然後完成餘下的

行寬f狀的閱讀圖形是橫豎運動之間的不斷拉鋸的結果

行寬和閱讀

印刷業者已經撰寫眼部橫豎之間移動的關係差不多乙個世紀了,在2023年,jan tschichold拋棄了文字居中(布局),進而提倡文字左對齊。他辯稱,在眼鏡完成每條橫線折回之後,通過為眼睛通過提供乙個持續的左部(縱向)邊緣,將會有助於閱讀者閱讀。

理想的行寬:45至75個字元

我們有多個規則未來促進乙個橫向的閱讀行為,其中之一是用合理的辦法設定乙個文字(數量?),正如james craig 在他的書《設計與型別》中寫的一樣

如果隨意的閱讀者厭倦了閱讀很長的橫線,那麼他們更喜歡瞟一眼文字的左邊,如果乙個黏定的閱讀者讀乙個長行很累時,他們更有可能無意間讀同一行文字兩次(這種現象被稱為「加倍」)。

65個字元(羅馬字母的2.5倍)通常被稱為完美的行寬。從這個數字衍生出了所有的設計師應該努力的理想範圍:

每行列印45至75個字元(包括空格和標點符號)。許多**設計者(包括我)直接將該規則應用到web上。然而,我發現,我們可以在網頁中可行地擴大範圍為每行45至85個字元(包括空格和標點符號)。

行寬和網頁樣式

但其實,乙個好的行寬方法僅僅只是需要乙個易於閱讀的文字的規則而已。

字型大小和閱讀

對於文字易讀而言,乙個好的,舒適的字型大小設定是必要的。這個是老生常談了,但鑑於有響應**大量使用的文字不是太小就是太大,為了能達到乙個理想的大小尺度,忍耐下對這些規則的重複敘述。

靜態網頁和字型大小

響應式web結構的乙個好處就是文字易讀性,手持裝置上的人不需要手指縮放來讀取。如果乙個結構是靜態的(就像下面顯示的兩列頁面),那麼就沒什麼可能做到乙個理想的行寬,文字太小了,在手機等小裝置上讀不到。

左:主列有乙個很合適的行寬(45至85個字元被高亮為黃色)。但是,由於沒有乙個響應結構,文字太小,無法做到在乙個小裝置上不需要縮放而被讀取。

小裝置和字型大小

當設計乙個響應式**時,首先得有乙個舒適的字型大小和乙個理想的行寬來幫助決策斷點。但當每次一到那種時候(一如既往),理想的布局就不見了。

手持裝置上的文字看起來比大型裝置要小。這是ok的,因為人們持有小裝置閱讀時往往靠得更近。目前流行的高招是進一步縮小手持裝置的字型尺寸,在實踐中,盡可能易讀的同時保持乙個舒適的字型大小,可能行寬上不太理想,但閱讀體驗更為舒適。

如果手持裝置上的小文字鼓勵讀者用手指縮放,響應結構將不會有任何幫助!

大型裝置和字型大小

在設計乙個響應式**時,請記住,行寬和字型大小不僅影響使用手持裝置的人,大多數人仍然使用大裝置,如膝上型電腦和台式電腦。

一些簡單的響應結構將文字儲存在單列中,該列隨著裝置的大小和收縮。這可以是乙個優雅的,恰當的解決方案--除非字型大小(而不是列的寬度)是用來維持理想行寬。

我們已經學會了不要把文字設定得太小,但是太大的文字同樣帶來乙個問題,當樣式變得太大,讀者的眼睛試圖按照他們通常的模式閱讀,但大字型占用了更多的橫向空間,它干擾了讀者們通過他們的中心視覺和跳讀模式建立起來的水平閱讀方式。

當樣式變得太大,讀者試圖按照他們通常的水平節奏。這迫使他們閱讀部分單詞而不是整個單詞,並放慢和調整他們的閱讀模式。

當前流行的建議是通過增加大裝置的字型大小來維持這個行寬值。例如,下面的一列結構有乙個理想的行寬。但要在大裝置上實現這一理想的行寬,我們不得不將文章文字設定為19畫素的verdana字型,22畫素的georgia字型,並採用超級大的26畫素的georgia 字型!

在上面的布局中,細節顯示文字大小為100%。這個頁面上的文字對於閱讀來說太大了!簡單的單列響應結構應使用大裝置上的較窄的列,保持字型小一些會更容易閱讀。

在實踐中,盡量保持乙個舒適的字型大小,並簡單地縮小列的寬度反而更好,看看a list apart (編:乙個網頁設計站點)在乙個手持裝置和膝上型電腦上看到的會發生什麼變化。

在手持裝置上分開的列表是完全可讀的。但在膝上型電腦上,文字變得太大而不能舒適閱讀。較短的行寬和較小的字型大小有助於人們遵循通常的水平節奏閱讀。

到目前為止,我們的重點一直是字型大小和行寬在響應式網頁結構之間的關係。但行的高度也影響人們閱讀。

行高影響水平運動

因為讀者基於水平和垂直來掃瞄內容,文字線感覺就像一條水平線,而不是像編織物。

過緊的線條高度會破壞水平的眼球運動,並慫恿眼球掃視左下角。它同樣會迫使人們重讀此列文字。另一方面,太高的線條高度會使文字的線條在視覺上「飄離」彼此。

線條間不再像乙個有凝聚力的單元,導致垂直掃視變得更加困難。

雖然沒有乙個完美的行高,但其中乙個很好的經驗法則是將行高設定為字型大小的150%左右。

雖然沒有乙個完美的行高,但其中乙個很好的經驗法則是將行高設定為字型大小的150%左右。

底部:當行高度過鬆時,文字視覺上相互飄離。

行高和字型大小

設定行高是乙個複雜的變數平衡(字型家族,行寬,字型大小,語言)。建立響應式頁面結構時最重要的變數是--意外!--字型大小。

左:在iphone 上,設定為150%的行高有點太緊。

右:在完全相同的文字下,稍微寬鬆的行高促進了眼球水平運動,從而幫助讀者識別字形。

認真研究,打破規則

當我們設計乙個響應式的結構時,在乙個大裝置上進行測試是比較容易的,我們可以快速改變桌面瀏覽器的大小。但是,在台式電腦或膝上型電腦瀏覽器上的設計意味著,我們花了我們的大部分時間在乙個手臂這麼長的文字上,而我們不會花很多時間研究下如何在小裝置上呈現文字。

如果你使用行寬來發掘頁面上的斷點,那麼你可能會較在意頁面樣式和閱讀行為,這是乙個很好的開始。多花些時間關注較小的裝置,根據需要平衡行寬、線條高度和字型大小,看看你的樣式是否真正的在工作。

記住,所有的規則都注定要被打破。你看,jan tschichold打破了自己的規則然後在他的大部分職業生涯中使用的文字居中的樣式。或許在某個時候,會為舒適的字型大小犧牲行寬,乙個優秀的字型大小(不要太小)應該是可閱讀的;乙個優秀的字型大小(不要太大)促進眼球水平運動;乙個優秀的字型大小與合適的行高將幫助你的讀者找到他們正在尋找的東西。

手機字型大小如何進行調整?手機如何調字型大小

如果您使用的是華為手機,可以按照以下方法操作 1 字型大小與粗細。進入設定 顯示和亮度 字型大小與粗細 拖移滑塊調整字型大小或字型粗細。2 放大或縮小螢幕內容。顯示大小可等比放大或縮小應用內顯示的內容 如文字 等 進入設定 顯示和亮度 顯示大小 拖移滑塊調整顯示大小。哈嘍,各位小夥伴,今天給大家分享...

小公尺手機的字型如何改,小公尺手機怎麼改字型大小

1 開啟手機的設定,下滑找到顯示選項。2 點選顯示後,下滑找到字型設定點選進入,然後根據需求調整字型大小即可。小公尺 miui 字型大小設定方法 進入 設定 顯示 字型大小 然後拖動字型大小滑塊即可調整系統字型大小。您好!很高興你選擇使用問一問諮詢專案!感謝你對我們的信任!在這裡我攜手廣大的問一問,...

手機怎麼改微信字型大小,怎麼調整微信字型大小

2 點選設定。點選設定,進入設定介面點選通用。3 點選字型大小。點選字型大小,進入介面點選或者滑動下方的按鈕,設定自己想要的字型大小。4 點選完成。點選右上方的完成即可。怎麼調整微信字型大小 以在oppo手機a5安卓系統操作為例,可以通過設定進入到通用介面來調整。在通用介面點選字型大小,然後選擇需要...