全方位科普:UI設(shè)計(jì)中的字體使用指南,初學(xué)者必備!

8 評(píng)論 16953 瀏覽 97 收藏 27 分鐘

字體作為基本語言,是設(shè)計(jì)師需要掌握的基本技能之一。這篇文章里面的案例花了作者大量時(shí)間進(jìn)行繪制&收集,希望能對(duì)各位讀者有所幫助。

一、 漢字使用的前世今生

在人類發(fā)展歷史過程中,文字作為信息傳播的載體,有著承上啟下的重要意義。而漢字,是世界上使用時(shí)間最久、空間最廣、人數(shù)最多的文字。從距今大約六千年前,就開始誕生了具有整齊規(guī)范、初步具有文字特征的圖形符號(hào)。

而到了后期,漢字分別經(jīng)歷了篆體、隸書、楷書等多元化的發(fā)展,百花齊放。而自從雕版印刷術(shù)的盛行之后,刻字用的雕刻刀所雕出來的字體因?yàn)闄M細(xì)豎粗,醒目易讀,得到了廣泛的運(yùn)用,由于活字印刷的時(shí)候首尾會(huì)有墨殘留,所以故意會(huì)留一部分裝飾來溢墨。

而到了后期,這個(gè)裝飾也得以保留下來,對(duì)這個(gè)字體進(jìn)行優(yōu)化過后,就是至今我們?nèi)栽趶V泛使用的宋體。在當(dāng)今,特別是在Windows系統(tǒng)中,宋體仍占有很大的一席之地。

后來人們又通過模仿宋體字體結(jié)構(gòu),對(duì)字體進(jìn)行了調(diào)整,改成了筆畫粗細(xì)一致,纖細(xì)狹長(zhǎng)的印刷字體,也就是今天我們稱之為“仿宋體”的字體。

與此同時(shí),“黑體”誕生了,因?yàn)樽煮w醒目大方,粗細(xì)一致,結(jié)構(gòu)醒目嚴(yán)密,字形端正,容易閱讀,所以也就是我們今天,在界面設(shè)計(jì)中,所用到的最多的字體?,F(xiàn)代漢字的黑體是在現(xiàn)代印刷術(shù)傳入東方后依據(jù)西文無襯線體中的黑體所創(chuàng)造的,所以按照西文的說法,也可以把黑體稱作為無襯線體,把宋體叫做為有襯線體。

到了現(xiàn)代,隨著互聯(lián)網(wǎng)的興起,LED屏幕中的字體也得到了較大的發(fā)展。

在早期時(shí)代中,顯示屏效果較差,分辨率低,屏幕顏色較少,而漢字筆畫較多,黑體小字體的清晰度較差,所以一般主要用于文章重要標(biāo)題。而宋體在為了匹配低分辨率下的像素柵格,對(duì)字體進(jìn)行了調(diào)整,調(diào)整后的字體能在低分辨率下的小點(diǎn)陣中得以良好的顯示,辨識(shí)度較高,在開啟了ClearType之后,字體的被識(shí)別性能得到良好的保證,所以在互聯(lián)網(wǎng)初期階段中,有襯線體在互聯(lián)網(wǎng)中一直處于霸主地位。

直到后面屏幕顯示效果的進(jìn)步,黑體才慢慢得以盛行,在屏幕分辨率較高的情況下,黑體已經(jīng)能得到較好的識(shí)別效果,因此已經(jīng)不需要原襯線體的功能,襯線體反而由于裝飾性元素過多,閱讀起來容易造成視覺疲勞。因此在屏幕密度較高的移動(dòng)端載體中,無襯線黑體成功替代有襯線體成為霸主地位。

修改后的黑體中宮更為開放,布白更為勻稱,顯示效果更為舒適,醒目利于閱讀,更利于視覺信息的傳達(dá),從而在屏幕中起著主導(dǎo)地位。幾大互聯(lián)網(wǎng)巨頭微軟雅黑及蘋果在此之后分別花重金打造了微軟雅黑及蘋方,用于自身的OS系統(tǒng)中。所以通過分析,可以看來,在將來界面設(shè)計(jì)中,字體樣式還是會(huì)以無襯線體為主,甚至可能會(huì)更進(jìn)一步簡(jiǎn)化字體的形狀。

?二、Android與iOS系統(tǒng)字體詳解

1.Android默認(rèn)字體-思源黑體/Robot

在Android設(shè)備中,Android始祖Google為了更好的追求視覺效果,提高用戶體驗(yàn),所以聯(lián)合了Adobe設(shè)計(jì)發(fā)布了思源黑體(Noto)來作為中文字體。

該字體字形較為平穩(wěn),利于閱讀,且有個(gè)7個(gè)不同的字重,充分滿足了不同場(chǎng)景下的設(shè)計(jì)需求,7個(gè)字重分別為:Thin、 Light、DemiLight、Regular、Medium、Bold 和 Black。而英文,則使用Robot來作為基礎(chǔ)字體,只有6個(gè)字重:分別為Thin、Light、Regular、Medium、Bold 和 Black,視覺語言與思源黑體Noto保持一致。

另外在Google的Material Design手冊(cè)中,官方還給出了標(biāo)準(zhǔn)的字號(hào)大小。在安卓的字體單位中,不再以px,pt作為單位而是統(tǒng)一的使用了sp,換算方式:

px = sp*ppi/160? ,sp = px / (ppi / 160)?

按照iPhone7的尺寸1334×750.密度326ppi 來換算,那么Android的1dp = 1 * 326/160 ≈ 2px

2.iOS默認(rèn)字體-蘋方/San Francisco

在iOS系統(tǒng)中,中文方面蘋果則加入了全新的蘋方字體,字形纖細(xì)中宮飽滿,利于閱讀,并且還提供6個(gè)字重供設(shè)計(jì)開發(fā)者使用。所以后面的設(shè)計(jì)趨勢(shì)中,字重的使用變的開始多元化了起來,使用Semibold中粗體、大字號(hào)作為界面的標(biāo)題變的更為流行起來,較為明顯的有 iOS 11 中的一些原生界面及一些知名APP。

而在英文方面,則使用了San Francisco 的字體,除了在iOS和Mac OS上,還單獨(dú)為Watch OS單獨(dú)對(duì)字體進(jìn)行了調(diào)整,命名為 San Francisco Compact。而每套字體下面又分為Text與Display兩種屬性,Text只有6個(gè)字重,而Display則有9個(gè)字重。

3.總結(jié)&結(jié)論

通過對(duì)比,我們可以發(fā)現(xiàn):其實(shí)Android與iOS字體字形方面差異化明顯不大,不用特意下載所有字體進(jìn)行單獨(dú)配置。那么在平常工作中,我們只需要按照一套標(biāo)準(zhǔn)的iOS設(shè)計(jì)稿輸出即可,在Android方面進(jìn)行自動(dòng)延展,最后走查確認(rèn)一下效果即可。

如果涉及到使用除Regular標(biāo)準(zhǔn)體之外的字體,那么除了顏色,還應(yīng)當(dāng)標(biāo)注相應(yīng)的字重字高等信息(如Font:Pingfang SC-Semibold,line:52px) ,而不應(yīng)當(dāng)只標(biāo)注一個(gè)加粗或者加細(xì)。當(dāng)然如果人力允許的情況下,我們也可以單獨(dú)為Android做一套界面及字體適配,提高Android端的視覺顯示效果。

三 、字體的基本屬性詳解

在平時(shí)項(xiàng)目中,為了讓頁面中的字體更加貼合業(yè)務(wù)場(chǎng)景,需要對(duì)字體的字距字高進(jìn)行調(diào)整。但很多同學(xué)在最后輸出標(biāo)注的時(shí)候,往往只標(biāo)注了字號(hào)及顏色,而其它參數(shù)都沒有進(jìn)行標(biāo)注或者標(biāo)注的不正確,在最后視覺還原審核的時(shí)候,字體往往偏差較大,花費(fèi)很多不必要的工作量去浪費(fèi)在了視覺走查上。

那么這里就給大家詳細(xì)介紹一些字體屬性及標(biāo)注方法,節(jié)約開發(fā)走查工作量,更好的還原視覺稿。

1.字體基礎(chǔ)結(jié)構(gòu)詳解

一般來說,為了保持字體的完整展示,字體設(shè)計(jì)師都會(huì)給字體預(yù)留一定的安全距離,設(shè)定合適的升部線及降部線距離,讓字體展示的更為平衡。這里我標(biāo)注了一個(gè)相應(yīng)的線稿:

所以由此圖可以看出:平時(shí)我們?cè)谠O(shè)計(jì)的時(shí)候,可能字體使用的28px,在使用工具量的時(shí)候,也確實(shí)是28px,但其實(shí)字體本身占用的距離是包含了升部及降部區(qū)域的,這樣就導(dǎo)致其占用空間大于28px,而變成了40px。所以我們?cè)跇?biāo)注的時(shí)候,應(yīng)當(dāng)按照包含升部降部的實(shí)際大小進(jìn)行標(biāo)注,這樣所還原的視覺效果,也是極為接近設(shè)計(jì)稿的。

所以我們?cè)谠O(shè)計(jì)輸出的時(shí)候,如果沒有調(diào)整line值,是可以直接借助sketch的標(biāo)注插件sketch measure,來實(shí)時(shí)導(dǎo)出相應(yīng)的參數(shù),這樣的參數(shù)是最接近開發(fā)效果的。如果沒有Mac的同學(xué),可以利用PS選中文字,那么選中的深色底就是字體本身的間距了。

下圖我做了兩個(gè)示例,來闡述正確的標(biāo)注方法,雖然標(biāo)注的時(shí)候會(huì)麻煩些,但往往在視覺還原的時(shí)候,往往能達(dá)到事半功倍的效果。

2.字體的行高行距參數(shù)詳解

那么在一些文字較多的頁面,為了讓閱讀更為順暢,我們往往需要對(duì)文字的字高字距進(jìn)行調(diào)整,那么我們先來看一下sketch及動(dòng)效編程軟件Origami中的可配置參數(shù)。

我們可以發(fā)現(xiàn),對(duì)于更改字距、字寬及端高,那么我沒只需要配置好Charater、line、paragraph三個(gè)值即可,那么我們先來理解一下這三個(gè)值的含義:

(1)Character:字間距

所謂的字間距,則是在兩個(gè)文字中間的距離,一般加在一個(gè)字符的后段。如字符『AK』,默認(rèn)Character為0,那么兩個(gè)字符中間的間距,則是為字體默認(rèn)所設(shè)定的安全距離。如果給Character設(shè)定一個(gè)值50,那么會(huì)自動(dòng)在A的后段加上50px,那么顯示效果則變成了『A K』

(2)line:行高

即UI Lable 中字段所占用的高度實(shí)際大小,剛剛有提到默認(rèn)字體會(huì)設(shè)定一個(gè)安全距離,那么在設(shè)備中字段所占用的line高度 = 字體像素大小+升降安全距離+擴(kuò)高值。每個(gè)字體都有相應(yīng)設(shè)定的line Auto比例,可以通過sketch選中字體后聽過line值來進(jìn)行查看。

另外剛剛提到,標(biāo)注間距的時(shí)候,務(wù)必得把line值包含在內(nèi),否則實(shí)現(xiàn)出來容易出現(xiàn)字體偏移位置不對(duì)等情況。

(3)Paragraph:行距

很多同學(xué)在調(diào)完這個(gè)參數(shù),發(fā)現(xiàn)跟調(diào)整line值差不多。但其實(shí) Paragraph 調(diào)整的是兩行中間的間距,不單獨(dú)調(diào)整單行字段的占用空間。

通過以上我們能了解字體在于實(shí)際設(shè)備中,是怎么樣的布局方式,所以我們標(biāo)注的時(shí)候,一定需要標(biāo)注的較為仔細(xì)。如果發(fā)現(xiàn)開發(fā)出來的字體樣式與設(shè)計(jì)稿不一致,那么我們只需要提供以上這幾個(gè)參數(shù)值即可。

如果在團(tuán)隊(duì)中還是靠手動(dòng)標(biāo)注的同學(xué),那么完整的標(biāo)注應(yīng)該為:Font-name;Font-size ;Font-color ;Font-line ;Font-character ;Font- Paragraph 。

如果沒有設(shè)定,不填即可,如:

  • Font-name:Pingfang SC -Semibold
  • Font-size :32px
  • Font-color :#333333
  • Font-line:Auto
  • Font-character:5
  • Font- Paragraph :0

四、科學(xué)的字號(hào)大小如何設(shè)定

現(xiàn)在目前市場(chǎng)中手機(jī)屏幕越來越大,分辨率也越來越高。那么我們?cè)谧鲈O(shè)計(jì)的時(shí)候,在字號(hào)運(yùn)用方面,難免會(huì)感到迷茫,文字是不是又點(diǎn)小了?或者大了顯得不精致?標(biāo)題跟正文沒啥區(qū)別?像這種問題可能經(jīng)常困擾著一些年輕的設(shè)計(jì)師。

其實(shí)在字號(hào)大小方面,確確實(shí)實(shí)有著一套計(jì)算法則及公式在內(nèi),今天這里給大家進(jìn)行一下科普。

當(dāng)我們?cè)诓榭匆恍┪矬w時(shí),測(cè)量視覺角度的方法為先量一下物體的的長(zhǎng)寬以及眼睛距離物體的距離,得出相應(yīng)的數(shù)學(xué)計(jì)算公式,其中:

θ=(arctan·h/2d)2,通過換算h=2d·tan(θ/2)

  • θ即視角度數(shù)
  • d為眼睛離物體的距離
  • h為物體高度

1.設(shè)計(jì)稿中最小的字號(hào)怎么來的?

關(guān)于人眼感光系統(tǒng),人眼上的一個(gè)像素相當(dāng)于0.3個(gè)角分。為何人的肉眼看不清遠(yuǎn)處的物體細(xì)節(jié)?或者看不清月亮上的環(huán)形山,那么是因?yàn)樵谀愕囊暰W(wǎng)膜上,月亮形成的圖像其實(shí)不過就是一個(gè)100個(gè)像素左右的圖片而已,所以環(huán)形山無法被肉眼觀察得清。

而根據(jù)科學(xué)研究發(fā)現(xiàn):

人眼對(duì)于信息物體的識(shí)別,在眼睛內(nèi)視角度數(shù)>0.3°,才能保文字信息體投射到視網(wǎng)膜中的分辨率足夠大,能夠被大腦所識(shí)別。

那么我們將數(shù)據(jù)可以套入進(jìn)公式計(jì)算,人眼距離手機(jī)的具體通常是30cm左右,那么也就是說,正常情況下,在手機(jī)距離眼睛30cm左右,使用視角計(jì)算公式,我們能識(shí)別到的最低的文字大小為h= 2*30·tan(0.3/2) ≈ 0.157cm ,因?yàn)槲覀兘?jīng)常使用iPhone8的尺寸1334×750作為設(shè)計(jì)稿。iPhone8的dpi為324,也就是一英寸上顯示324個(gè)像素,1英寸為2.54cm,那么0.157cm=324*(0.157/2.54cm)= 20px

所以也就是正常情況下我們?cè)谠O(shè)計(jì)稿中使用最小號(hào)的字號(hào)時(shí),一定不能低于20px。

2.字號(hào)使用原子理論

而我們?cè)谧鲈O(shè)計(jì)時(shí),字號(hào)的單位需遵循原子理論,也就是使用一個(gè)基數(shù)作為倍增,如2、4、6、8、10? 或者3、6、9、12。但其實(shí)我們?cè)谧鲆苿?dòng)端設(shè)計(jì)時(shí),單位需要遵循偶數(shù)原則,因?yàn)殚_發(fā)中的單位是以一倍圖的基數(shù)來進(jìn)行計(jì)算。那么其實(shí)在制定字體規(guī)范中,使用2為單位會(huì)導(dǎo)致字號(hào)過多,不易管理,且2號(hào)字體的差異化不大。

所以在字號(hào)方面我們使用4作為單位是比較合適的:一是適配后在@2x跟@3x不會(huì)出現(xiàn)半像素,二是使用4為單位,能滿足字體大小的均衡。那么我們則可以制定相應(yīng)的字體單位:

3.使用大字號(hào)作為標(biāo)題

隨著設(shè)計(jì)行業(yè)的發(fā)展,對(duì)于視覺的理解進(jìn)步,現(xiàn)在更多設(shè)計(jì)師更愿意使用大號(hào)字體,大間距,來區(qū)分頁面層級(jí)的信息。因?yàn)榇筇?hào)的字體閱讀起來更為舒適,能精準(zhǔn)快速的傳達(dá)信息,提升閱讀效率,降低視覺疲勞。

所以大家在平時(shí)項(xiàng)目中,也不妨大膽的使用一下大字號(hào)字體來作為主標(biāo)題,拉大頁面不同信息的層級(jí)關(guān)系。

五、合理配置字體拉開層級(jí)關(guān)系

在移動(dòng)端的界面設(shè)計(jì)中,除了前幾篇文章講的使用間距網(wǎng)格來拉開不同內(nèi)容的層級(jí)外,對(duì)字體樣式進(jìn)行適當(dāng)?shù)恼{(diào)整也是個(gè)很不錯(cuò)的選擇。通過調(diào)整字重、字色,能讓頁面的視覺邏輯變?yōu)楦拥那逦髁?,主次分明,降低因視覺給用戶帶來的干擾,提升頁面的可操作性。

那么我們?nèi)绾蝸碓O(shè)定這兩塊呢?

1.盡量減少頁面中的不同色相的顏色數(shù)量

在日常界面設(shè)計(jì)的需求中,有些較為重要的字段,可能業(yè)務(wù)方為了突出,第一時(shí)間,想到的就是把字體標(biāo)紅處理,或者添加各類各樣,五花八門的顏色。但其實(shí)往往這樣的設(shè)計(jì),在最后上線后的效果,反而容易適得其反,因?yàn)轭伾^多,而導(dǎo)致頁面缺乏重點(diǎn),視覺疲勞,反而增加了頁面的跳出率,難以取得想要的效果。

經(jīng)過調(diào)研顯示:頁面越干凈,越整潔,頁面的跳出率越低,而這套規(guī)則幾乎適用于所有的界面設(shè)計(jì)。

所以字體顏色這塊,顏色種類不宜過多。可以考慮通過使用同色系中的不同明度,來對(duì)不同層級(jí)字段進(jìn)行差異化處理。我們可以通過先確認(rèn)主色,再對(duì)主色進(jìn)行名都延展,來適配多場(chǎng)景的文字顏色。配置好相應(yīng)的色板之后,可以再根據(jù)頁面層級(jí)關(guān)系對(duì)文字顏色進(jìn)行合適的填充。

2.使用不同的字重來區(qū)分內(nèi)容

為了更好的拉開不同信息之間的層級(jí)關(guān)系,除了配置顏色外,通過配合,使用不同字重的字體來對(duì)內(nèi)容進(jìn)行區(qū)分也是個(gè)很好的選擇。

使用較粗的字重來作為主標(biāo)題使用,細(xì)字重作為輔助信息,能更好的在單色環(huán)境中增加內(nèi)容的呼應(yīng)及對(duì)比,減少頁面中字體過度色的使用,從而能夠讓頁面更加的整潔,內(nèi)容清晰明了,降低頁面的跳出率。

例如我們較重要的信息,可使用較粗的字重,弱信息則細(xì)字重。比如以下的余額寶及京東小金庫界面,雖然兩個(gè)界面在留白方面都留有較大余地,但京東金融在于對(duì)字重的設(shè)定更為嚴(yán)謹(jǐn),所以在于對(duì)層級(jí)關(guān)系的處理上京東要更勝一籌。

而不同的字重,給予用戶的感受也是截然不同的:較粗的字重往往傳達(dá)的感受比細(xì)體要更為莊重、踏實(shí)嚴(yán)謹(jǐn),而細(xì)體則顯的更為活潑、有趣,給人愉快的感覺。

剛剛提到了字重的使用必要性,那么我們?nèi)绾味x字重呢?

如果字重沒有進(jìn)行規(guī)范使用,那么整個(gè)頁面的視覺邏輯則會(huì)變的更為混亂,所以往往這個(gè)時(shí)候,我們需要設(shè)計(jì)一個(gè)文字規(guī)范,例如主標(biāo)題使用什么樣的字重,正文字重樣式。仔細(xì)敲定整個(gè)文字的使用規(guī)則,并將規(guī)范延展到整個(gè)產(chǎn)品的頁面設(shè)計(jì)中來,也是統(tǒng)一產(chǎn)品視覺語言的重要部分。

比如京東在價(jià)格字體方面,使用了獨(dú)立設(shè)計(jì)的一套品牌專有字體,而價(jià)格在電商中是一個(gè)極為重要的信息,通過統(tǒng)一字體,能很好的提升品牌歸屬感。

3.Sketch-Text Style提高協(xié)作效率

sketch在于對(duì)文字管理這塊,做了一個(gè) Text Style 樣式,通過Text Style,能很好的提高效率,規(guī)范頁面字號(hào)的大小。如果設(shè)計(jì)團(tuán)隊(duì)成員均使用Sketch作為主力使用工具,那么不妨嘗試配置一下這塊,提高團(tuán)隊(duì)協(xié)作效率。一方面可以統(tǒng)一規(guī)范頁面的字體樣式,另一方面免去了調(diào)整字體的時(shí)間,減少不必要的工作量。

六、字體運(yùn)用發(fā)展趨勢(shì)&總結(jié)

從iOS 11 更新就不難看出,目前界面風(fēng)格的趨勢(shì)都是偏向于更為簡(jiǎn)潔化,在一屏的內(nèi)容里做減法,這樣有利于降低閱讀負(fù)擔(dān),將重要的信息更好的展示。在這里,我分別對(duì)字體進(jìn)行了梳理,分析下來,近期的字體使用特征主要有如下三點(diǎn):

1.更大、更粗的標(biāo)題

大標(biāo)題能很好的吸引視線,第一時(shí)間抓住眼球,傳遞信息。拉大頁面空間的張力,降低視覺閱讀疲勞。

2.字重層級(jí)更為明顯

通過字重的差異化顯示,能更好的在單色環(huán)境中增加內(nèi)容的呼應(yīng)及對(duì)比,減少頁面中字體過度色的使用,從而能夠讓頁面更加的整潔,內(nèi)容清晰明了,降低頁面跳出率。

3.用字體明度做內(nèi)容上的信息區(qū)分

使用單一色相的不同明度作為字體及圖標(biāo)的顏色,能夠在區(qū)分信息層級(jí)的基礎(chǔ)上,能讓頁面顯得更為整潔,降低視覺干擾。

七、字體使用總結(jié)

互聯(lián)網(wǎng)在進(jìn)步,所以設(shè)計(jì)趨勢(shì)也是有著各種各樣不同的形式,而字體作為基本語言,是設(shè)計(jì)師需要掌握的基本技能之一。這篇文章里面的案例花了作者大量時(shí)間進(jìn)行繪制&收集,希望能對(duì)各位讀者有所幫助。

另外其實(shí)在工作中,也建議大家對(duì)自己的經(jīng)驗(yàn)進(jìn)行總結(jié),對(duì)關(guān)鍵信息進(jìn)行提煉加以沉淀,一方面能讓自己的知識(shí)更加牢固,另一方面也可以幫助后來者進(jìn)行成長(zhǎng)。

————–

第一次嘗試在人人都是產(chǎn)品經(jīng)理上發(fā)表專欄,內(nèi)心表示很忐忑。

閱文雖易,寫作不易!文章較長(zhǎng),非常感謝您的耐心閱讀。如果對(duì)文章感興趣,也可以在這里通過留下一個(gè)小贊或者留言來支持作者!后面會(huì)經(jīng)常給大家?guī)硪黄恼?,也可以通過訂閱作者的專欄,來獲得知識(shí)的傳遞,謝謝大家!

 

本文由 @A.kun阿坤 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自 pexels,基于CCO協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 請(qǐng)問“人眼對(duì)于信息物體的識(shí)別,在眼睛內(nèi)視角度數(shù)>0.3°,才能保文字信息體投射到視網(wǎng)膜中的分辨率足夠大,能夠被大腦所識(shí)別”這個(gè)中的0.3度有理論支撐嘛~(因?yàn)樽罱谧鲎煮w的相關(guān)研究,這里進(jìn)入瓶頸了,怎么都找不到其中的理論 ?? )看到可以回復(fù)一下嘛~

    來自北京 回復(fù)
  2. 多多更新哦 ?

    來自北京 回復(fù)
  3. 手動(dòng)點(diǎn)贊

    來自北京 回復(fù)
  4. 學(xué)習(xí)了~

    來自廣東 回復(fù)
  5. 很棒!

    來自廣東 回復(fù)
  6. 厲害!

    來自上海 回復(fù)
  7. 神作啊,學(xué)習(xí)了

    來自北京 回復(fù)
  8. 棒極了!

    來自北京 回復(fù)