亚洲av无码成人专区片在线观看,亚洲av岛国动作片在线观看,少妇,喷水,亚洲av成人无遮挡网站在线观看,天堂网www资源在线

最近在做一款小說(shuō)APP-指間免費(fèi)小說(shuō)，進(jìn)行閱讀器設(shè)計(jì)時(shí)遇到了一些難題，查找調(diào)研了很多文章后進(jìn)行了思考和設(shè)計(jì)，完成后也算自己工作中一個(gè)小思考總結(jié)的經(jīng)歷，故記錄一下~

文中的引用在文末有署名，也有一些找不到鏈接的，知道作者后會(huì)加上，侵刪。

文末兩個(gè)實(shí)驗(yàn)是我們不經(jīng)常看到的信息，很有趣，請(qǐng)看到最后呦~

文字是整個(gè)APP中最核心的元素，是產(chǎn)品傳達(dá)給用戶的主要信息。小說(shuō)軟件內(nèi)的閱讀器中包含大量的文字信息，其中的易讀性和易識(shí)性如何呈現(xiàn)尤為重要。

頁(yè)面內(nèi)的文字字體該如何選擇，字號(hào)該如何設(shè)定，是否加粗，顏色又該如何設(shè)置呢。這些問(wèn)題不僅需要設(shè)計(jì)師在軟件上多次進(jìn)行嘗試，也需要尋找客觀理性的規(guī)范進(jìn)行調(diào)研整理，雙向作用，才能完成最終合理，優(yōu)雅的閱讀器頁(yè)面。

本文從日間和夜間兩種主要模式下的場(chǎng)景分析，來(lái)介紹文字在其中的設(shè)定標(biāo)準(zhǔn)。

日間閱讀

1. 文字角色

文字功用性是決定它們樣式的關(guān)鍵因素。在 我們常用的Word 或 PPT 中，含有樣式選擇列表，這就是文字角色最基本的體現(xiàn)。樣式包含標(biāo)題、二級(jí)標(biāo)題、三級(jí)標(biāo)題、正文、注釋等等。

<Keynote中的文字樣式表>

根據(jù)文字的等級(jí)權(quán)重來(lái)選擇其對(duì)應(yīng)的字體參數(shù)。指間閱讀器中，文字角色分布為書(shū)本標(biāo)題>正文>標(biāo)簽

2. 字號(hào)字號(hào)

是指文字在屏幕或印刷介質(zhì)上表現(xiàn)出來(lái)的大小。字體的8號(hào)或者12號(hào)既不是寬度也不是高度，是對(duì)文字大小的一個(gè)衡量單位。8和12代表字體的磅值，磅值越大字體越大。對(duì)用戶來(lái)說(shuō)，字號(hào)越大其閱讀速度越慢，信息的關(guān)注度也會(huì)增加。文字越小，閱讀則會(huì)變得更為快速。

在同一頁(yè)面中，字號(hào)的選擇總是盡量控制在 3-5 種之間，保持克制的原則。

經(jīng)過(guò)競(jìng)品比對(duì)及設(shè)計(jì)比稿，我們最終將閱讀器內(nèi)中文文字定為36號(hào)字，再根據(jù)裴波納契數(shù)列將標(biāo)題定為了48號(hào)字。

<指間閱讀字號(hào)表>

3. 字體字體

是文字的外在形式特征，是文字的風(fēng)格，是文字的外衣。對(duì)于小說(shuō)APP來(lái)說(shuō)，閱讀器內(nèi)文字主要有默認(rèn)字體和特殊字體之分。

3.1 默認(rèn)字體

默認(rèn)字體跟隨系統(tǒng)字體使用，Android系統(tǒng)內(nèi)的中文字體為谷歌公司開(kāi)發(fā)的思源黑體。系統(tǒng)字體具有端內(nèi)統(tǒng)一，易識(shí)別，兼容性好，開(kāi)源免費(fèi)等特點(diǎn)，能在不同場(chǎng)景下都保持良好的可讀性。

3.2 特殊字體

對(duì)于閱讀書(shū)籍的用戶來(lái)說(shuō)，不同風(fēng)格的特殊字體會(huì)帶來(lái)不同的閱讀體驗(yàn)。例如在閱讀武俠類小說(shuō)時(shí)，若使用方正顏宋，清刻本悅宋等襯線宋體，可以將閱讀人群代入一種身處飄渺江湖，少年俠客行的時(shí)代感；而對(duì)于喜歡青春校園，霸道總裁文的00后女生來(lái)說(shuō)，可愛(ài)俏皮的華康少女體，文鼎甜妞體便更好的貼近了她們現(xiàn)有的年齡和所處環(huán)境。具體有興趣的同學(xué)可以深入分析字體的特征。

閱讀類APP內(nèi)常用字體一般在5種以上，包含付費(fèi)特殊字體包。

<特殊字體使用>

4. 字重

字重是指字體的粗細(xì)程度。字重的選擇同樣基于秩序、穩(wěn)定、克制的原則。不同的字體包含不同種類的字重，一般根據(jù)文字的等級(jí)權(quán)重來(lái)使用。常規(guī)來(lái)說(shuō)字重和文字權(quán)重成正比關(guān)系，但這不是絕對(duì)，重點(diǎn)文字加重，非重點(diǎn)文案減輕，從頁(yè)面整體性考慮字重也是實(shí)際應(yīng)用的常見(jiàn)操作之一。頁(yè)面常使用字重有：常規(guī)（Regular）、中等（Medium）、粗體（Bold）。

<常見(jiàn)字重類型>

5. 字間距

字間距是字體應(yīng)用在所有字符上的間距。字間距至少應(yīng)為字體大小的0.16倍。注：不是特殊情況不建議調(diào)整固有字距，創(chuàng)作字體時(shí)設(shè)計(jì)師就納入了固有字距的考量，專業(yè)字體的固有間距就是最合理的，調(diào)整字間距會(huì)加長(zhǎng)開(kāi)發(fā)周期和難度。

6. 行高

行高是一行文本垂直方向的高度，文字內(nèi)容默認(rèn)處于這個(gè)高度的水平居中位置。

<字號(hào)與行高的關(guān)系>

不管是標(biāo)題、正文還是注釋，行高都不宜過(guò)高，過(guò)高會(huì)導(dǎo)致內(nèi)容不易閱讀，文字之間缺少整體性和連貫性。行高會(huì)影響閱讀的體驗(yàn)，西文的基本行高通常是字號(hào)的1.2em上下，而中文因?yàn)樽址軐?shí)且高度一致，所以行高需要更大，1.5em至 1.8em之間是一個(gè)比較好的視覺(jué)閱讀效果。在指間中，我們使用了60px的行高，約為字號(hào)的1.7em【行高=字號(hào)*1.7em】。這樣的倍數(shù)不會(huì)過(guò)于擁擠給人緊迫感，也不會(huì)過(guò)于寬松影響整體閱讀體驗(yàn)。

7. 行寬和邊距

因?yàn)閾碛写罅课淖智覠o(wú)圖的特性，閱讀器內(nèi)文字通常使用定寬模式，即確定一個(gè)固定的文本區(qū)域?qū)挾?，文字在區(qū)域?qū)挾葍?nèi)進(jìn)行自動(dòng)換行，直至顯示完成，這個(gè)寬度也與各手機(jī)屏幕尺寸大小成正比。新版閱讀器中行寬為612px，配合36號(hào)文字，每行可以展示17個(gè)字符。保證文本能填充滿整個(gè)文本范圍，避免字符顯示不全導(dǎo)致左右邊距不平衡。

<行寬612px，距離左右邊距各54px>

邊距也就是我們所理解的左右留白。傳統(tǒng)刊物中，傳統(tǒng)刊物印刷版面的邊距設(shè)定通常是按照1:1.2:1:1.7的比例來(lái)進(jìn)行設(shè)計(jì)。這樣在閱讀器設(shè)計(jì)時(shí)會(huì)留有一定的余地，不至于視覺(jué)占滿。當(dāng)文字過(guò)多時(shí)，合適的邊距留白會(huì)減輕純文字帶來(lái)的壓迫感，使文字與文字之間留有空隙，版面留有呼吸感。

8. 段間距

段間距就是段落與段落之間的距離。根據(jù)親密性的原則，段間距應(yīng)該大于行間距以提升文本的閱讀體驗(yàn)。且段落間距若設(shè)定狹窄的間距，會(huì)給讀者帶來(lái)視覺(jué)壓力。新版閱讀器中選用的段間距為48px。

9. 對(duì)齊模式

對(duì)齊模式，即文本的對(duì)齊方向，有居左，居中，居右三種對(duì)齊方式。根據(jù)閱讀習(xí)慣，文本信息一般采用居左對(duì)齊的方式。對(duì)于小說(shuō)文來(lái)說(shuō)，經(jīng)常會(huì)出現(xiàn)標(biāo)點(diǎn)多，文字少的情況，面對(duì)這樣一行文字，在閱讀器設(shè)計(jì)時(shí)常會(huì)使用兩端對(duì)齊的方法，增加文字的字間距，使文本的左右兩端看起來(lái)很平整，不出現(xiàn)強(qiáng)烈的凹凸感。

10. 句尾標(biāo)點(diǎn)排列

在現(xiàn)代漢語(yǔ)中，所有的點(diǎn)號(hào)，包括句號(hào)、問(wèn)號(hào)、嘆號(hào)、逗號(hào)、冒號(hào)、分號(hào)、頓號(hào)等，都不能放在行首；間隔號(hào)也不能放在行首——楊權(quán)編著《出版物標(biāo)點(diǎn)符號(hào)用法規(guī)范》這是中文排版中約定俗成的習(xí)慣。這種習(xí)慣導(dǎo)致在行尾遇到標(biāo)點(diǎn)時(shí)，我們必須選擇末尾標(biāo)點(diǎn)是突出去【標(biāo)點(diǎn)懸掛】還是占末尾最后一個(gè)字符位【標(biāo)點(diǎn)擠壓】的問(wèn)題。這兩種方式各有優(yōu)劣，我們?cè)谛掳嬷幸罁?jù)國(guó)家標(biāo)準(zhǔn)選擇了標(biāo)點(diǎn)擠壓的方法。

11. 頁(yè)面背景

研究發(fā)現(xiàn)，飽和度和亮度高的顏色容易受到視覺(jué)關(guān)注，這些顏色在吸引注意力方面比色調(diào)更為重要。明亮，飽和度高的背景色會(huì)吸引用戶的注意，但不會(huì)保持用戶的注意力。對(duì)于閱讀器來(lái)說(shuō)，文本內(nèi)容是整個(gè)頁(yè)面的重中之重，頁(yè)面背景僅是作為它的襯托出現(xiàn)，不搶文字的風(fēng)彩，不造成視覺(jué)干擾，使用戶更容易的閱讀就是頁(yè)面背景的主要設(shè)計(jì)目的。針對(duì)這個(gè)目的，新改版中我們決定使用一個(gè)明度低，飽和度低的顏色作為背景。顏色變暗需要減少白色，而淡化顏色需要增加灰色，這可以緩和顏色對(duì)眼睛的刺激。

從這幾個(gè)特性出發(fā)，經(jīng)過(guò)多種顏色的測(cè)試稿對(duì)比，我們選出#F7F7F7作為背景色值。

12. 文字顏色

WCAG 2.2 中將顏色對(duì)比等級(jí)分為3種：A級(jí)，AA級(jí)，AAA級(jí)，等級(jí)越高意味著顏色的對(duì)比度越高，呈現(xiàn)出來(lái)的視覺(jué)壓力越大：

A級(jí)：采用3:1的對(duì)比度，是普通觀察者可接受的最低對(duì)比度。字號(hào)大，字重高的文字在較低的對(duì)比度下也易于閱讀，這時(shí)就可以選擇3:1的對(duì)比度。

AA級(jí)： 采用4.5:1 的對(duì)比度，是普通視力損失的人可接受的最低對(duì)比度。這個(gè)數(shù)據(jù)來(lái)自80歲老人的典型視力。

AAA級(jí)：采用7:1的對(duì)比度，是嚴(yán)重視力損失的人可接受的最低對(duì)比度，超出這種視力損傷的用戶就需要借助輔助技術(shù)幫助其進(jìn)行信息識(shí)別了，所以不再考慮范圍內(nèi)。根據(jù)這3個(gè)顏色對(duì)比等級(jí)可得出：字色和背景色的對(duì)比度最低不小于4.5:1，最佳對(duì)比度不小于7:1。這樣可以保證最大的用戶群體對(duì)內(nèi)容進(jìn)行識(shí)別。

對(duì)比度可使用網(wǎng)站https://hexnaw.com/直接測(cè)試得出結(jié)論。通過(guò)已知背景色和多種文字色值進(jìn)行測(cè)試計(jì)算，我們最終選出了#222222作為文字顏色。它與背景色#F7F7F7的對(duì)比度為14.85，屬于AAA級(jí)。

<頁(yè)面背景色與文字顏色的對(duì)比度計(jì)算>

13. 最終定稿

根據(jù)一系列的資料整理及多稿嘗試，我們確定了最終稿。

<新版優(yōu)化參數(shù)>

夜間閱讀

1. 文字構(gòu)成

日常生活中，人們?cè)诎滋於噙M(jìn)行工作，學(xué)習(xí)，社交等行為方式，深度閱讀和長(zhǎng)時(shí)間閱讀往往在深夜發(fā)生。睡前和熄燈后是閱讀較為集中的時(shí)間段，若日間的APP版本仍在深夜使用，很容易因?yàn)轫?yè)面過(guò)于“閃耀”而造成眼睛舒適度的下降，影響閱讀行為。因此，合理的設(shè)計(jì)閱讀器夜間模式，提高夜間閱讀行為的舒適度是極為重要的。

相較于日間閱讀，夜間模式的頁(yè)面背景和它與字色的對(duì)比度是影響夜間閱讀舒適度的最大更改屬性，字號(hào)行距等參數(shù)應(yīng)和日間閱讀保持一致。

2. 字體顏色

新版夜間模式中，我們將閱讀器內(nèi)文字顏色設(shè)為了帶有透明度的白色，這是因?yàn)榭紤]到閱讀器里擁有多種多樣的頁(yè)面背景，將文字由純色變成帶透明度的的色值，也能更容易適配其他顏色的背景。

多稿測(cè)試后我們選出了正文45%#FFFFFF，輔助文字30%#FFFFFF的文字顏色。

3. 頁(yè)面背景

夜間背景色主要從亮度、彩度、護(hù)眼三個(gè)方面入手。

亮度：亮度是指單位面積的發(fā)光強(qiáng)度，單位是nit（尼特）：1nit=1cd/M2（坎德拉/平方米，光強(qiáng)單位，即亮度值）根據(jù)人眼細(xì)胞特性得出負(fù)責(zé)夜晚視覺(jué)的桿狀細(xì)胞的作用范圍是0.034cd/m2，所以我們屏幕亮度應(yīng)在0.034cd/m2左右較為合適【理想狀態(tài)，還和手機(jī)自身亮度，分辨率等參數(shù)相關(guān)】

亮度公式：0.299*R + 0.587*G + 0.114*B = 亮度市面上APP亮度位于0.034~34之間【騰訊動(dòng)漫數(shù)據(jù)】

彩度：就是顏色的鮮艷程度。夜間主要是人眼中的桿狀細(xì)胞起作用，桿狀細(xì)胞對(duì)光敏感，容易看到微弱的光，可辨識(shí)的顏色種類較少，且夜晚長(zhǎng)時(shí)間注視高飽和色彩會(huì)刺眼。所以夜晚頁(yè)面應(yīng)使用低彩度色值，并盡量減少端內(nèi)的顏色種類。

護(hù)眼：手機(jī)里的HEV藍(lán)光會(huì)對(duì)眼睛造成傷害，夜間人眼距離手機(jī)更近，閱讀時(shí)間更長(zhǎng)。護(hù)眼模式往往通過(guò)降低亮度來(lái)控制藍(lán)光，而藍(lán)黃為互補(bǔ)色，如果從色溫上降低藍(lán)色，則黃色增強(qiáng)，達(dá)到護(hù)眼效果。

根據(jù)以上依據(jù)得出，夜間模式的背景色應(yīng)采用亮度低，彩度低，偏黃色的背景色，經(jīng)過(guò)多種顏色的測(cè)試稿對(duì)比，我們選出#1D1C1B作為背景色值，它的亮度值為28.185。

4. 與文字的對(duì)比度

夜間模式的對(duì)比度應(yīng)降低，更柔和一些。

熱門且夜晚模式舒適度較高APP數(shù)據(jù)【騰訊動(dòng)漫研究所得】：文字與背景對(duì)比度3 : 1 ~ 5 : 1

新版中字色與背景色對(duì)比度為4.45：1

5. 最終定稿

<書(shū)封和內(nèi)頁(yè)>

外部因素對(duì)閱讀的影響

1. 環(huán)境光和屏幕光對(duì)閱讀舒適度的影響

游戲娛樂(lè)、信息查詢、閱讀學(xué)習(xí)、便捷支付等豐富的功能，使手機(jī)在辦公室、教室、商場(chǎng)、等各個(gè)場(chǎng)景中都有不可替代的作用。在大部分生活場(chǎng)景中，手機(jī)閱讀總時(shí)間已經(jīng)遠(yuǎn)遠(yuǎn)超過(guò)紙質(zhì)材料的閱讀時(shí)長(zhǎng)。研究發(fā)現(xiàn)合理的照明光環(huán)境可提高閱讀舒適性，保護(hù)視力 。天津大學(xué)對(duì)此進(jìn)行了人工照明環(huán)境下手機(jī)閱讀舒適型的相關(guān)實(shí)驗(yàn)。使用主觀評(píng)價(jià)實(shí)驗(yàn)的方法 ，以閱讀面照度、光源色溫、閱讀背景面反射系數(shù)等參數(shù)作為實(shí)驗(yàn)變量，使用不同屏幕亮度級(jí)別的手機(jī)進(jìn)行圖文閱讀，而后實(shí)驗(yàn)人群對(duì)當(dāng)前工況給出1～10分的舒適性主觀評(píng)價(jià)。

實(shí)驗(yàn)過(guò)程：搭建光環(huán)境實(shí)驗(yàn)艙用以模擬生活中常見(jiàn)的人工照明環(huán)境，【如辦公空間的閱讀面照度在300lx左右，色溫以5000~6500k的冷白光為主；咖啡廳等強(qiáng)調(diào)格調(diào)的餐飲店的月讀面照度只有50~100lx，色溫在2700~3300k；部分便利店的閱讀面照度將近1000lx；而臥室、宿舍等居住空間熄燈后全黑環(huán)境下手機(jī)閱讀面照度為0.1x】，使用三部相同型號(hào)，相同屏幕色溫手機(jī)，選擇12位18~45歲的青年作為被試對(duì)象參與實(shí)驗(yàn)。實(shí)驗(yàn)對(duì)象閱讀相同PDF文檔，對(duì)在不同環(huán)境光照下的閱讀體驗(yàn)舒適型打分，分值0~10，0為非常不舒適，10為非常舒適。

實(shí)驗(yàn)結(jié)論: 通過(guò)該主觀評(píng)價(jià)實(shí)驗(yàn)共得到11352次舒適性評(píng)價(jià)結(jié)果，通過(guò)四分位法去掉異常值，計(jì)算得出照度、色溫、手機(jī)屏幕亮度、桌面亮度、手機(jī)屏幕與桌面的亮度、對(duì)比度、桌面反射系數(shù)幾個(gè)因素的重要性系數(shù)分別是 0.1 4 、0.0 6 0、0 . 3 9 5、0 . 1 1 2、0 . 2 2 8、0 . 0 5 9。

實(shí)驗(yàn)得出：

• 手機(jī)屏幕亮度和亮度對(duì)比度對(duì)舒適性影響較大，光照度是影響閱讀舒適性的主要照明指標(biāo)，手機(jī)閱讀舒適性隨閱讀面光照度的不斷增加而先升高后下降。

• 
  

閱讀面反射系數(shù)對(duì)閱讀舒適性有一定影響，在光照度較高或手機(jī)屏幕亮度較高的情況下，背景面反射系數(shù)與舒適性成反比。

                                  <環(huán)境光和屏幕光對(duì)閱讀舒適度的影響實(shí)驗(yàn)>

2. 動(dòng)態(tài)顏色變化對(duì)閱讀舒適度的影響

通過(guò)實(shí)驗(yàn)不同文字顏色與背景顏色的變化對(duì)用戶的感受進(jìn)行測(cè)試，得出高對(duì)比度可以幫助用戶首先集中精力閱讀，這樣的對(duì)比值在視覺(jué)上很舒適。然而，如果使用者持續(xù)很長(zhǎng)時(shí)間，則會(huì)感到視力疲勞。因此，亮度對(duì)比度開(kāi)始在150秒后變化；因?yàn)橥ǔＴ谶@段時(shí)間后，人們更多的集中精力于當(dāng)前閱讀當(dāng)?shù)膬?nèi)容上。

建議：在180s以后，背景色進(jìn)行變化，從#F7F7F7變?yōu)?E3E3E3

<動(dòng)態(tài)顏色變化>

改版前后對(duì)比圖

參考文獻(xiàn)

· 武童瑤，王立雄，于 娟 ，全孝莉，毛希凱《人工照明環(huán)境下手機(jī)閱讀舒適性的主觀評(píng)價(jià)》http://qikan.cqvip.com/Qikan/Article/ReadIndex?id=7001050581

· 騰訊動(dòng)漫《夜間模式（感性設(shè)計(jì)的理性考量）》http://www.htnj110.cn/detail/384701.html

· 超人的電話亭《關(guān)于文字，UI設(shè)計(jì)師需要知道這些》http://www.htnj110.cn/detail/495805.html

· 等等《文字與背景間對(duì)比度的選擇》http://www.xueui.cn/experience/app-experience/selection-of-contrast-between-text-and-background.html

· W3C《Web內(nèi)容可訪問(wèn)性指南（WCAG）2.2》https://www.w3.org/TR/2020/WD-WCAG22-20200227/#section-headings

· 李中原，李爽爽《基于人因工程學(xué)的交通信息顯示屏設(shè)計(jì)方案研究》https://wenku.baidu.com/view/2121e3d5360cba1aa811da54

· Ant Design設(shè)計(jì)規(guī)范https://www.sohu.com/a/137871524_760150

· 25學(xué)堂《UI設(shè)計(jì)中的頁(yè)面背景色要怎么選？》https://www.25xt.com/appdesign/21755.html

· 其他相關(guān)文獻(xiàn)

Powered by Froala Editor