2021-10-17 資深UI設(shè)計(jì)者
版式設(shè)計(jì)是大部分設(shè)計(jì)師再熟悉不過的一個(gè)詞了,市面上很多文章都有普及過各種版式設(shè)計(jì)知識,比如:印刷中的版式設(shè)計(jì)、移動界面中的版式設(shè)計(jì)等等。但是在我做中臺規(guī)范時(shí)調(diào)研發(fā)現(xiàn)針對中臺系統(tǒng)文字規(guī)范內(nèi)容科普的知識較少,可能是中后臺設(shè)計(jì)在國內(nèi)還是處于初級階段吧。所以結(jié)合調(diào)研內(nèi)容到實(shí)際工作中的總結(jié)給大家分享關(guān)于Web端文字系統(tǒng)的相關(guān)內(nèi)容。
加拿大印刷術(shù)家羅伯特·布林赫斯特(Robert Bringhurst)在他撰寫的《印刷風(fēng)格的元素》一書中將印刷術(shù)定義為以持久的視覺形式賦予人類語言的技藝。在中臺界面文字排版的易讀性、美觀度是設(shè)計(jì)師的首要任務(wù),要創(chuàng)建閱讀性高和較美觀的中臺界面文字排版是設(shè)計(jì)師們必須學(xué)習(xí)的基礎(chǔ)知識之一。因?yàn)椴徽撛贏pp界面還是Web網(wǎng)頁設(shè)計(jì)中文字內(nèi)容總是能占到整個(gè)版面的80%~90%的區(qū)域,好的文字排版能夠大大提高用戶的使用效率。所以本篇文章將站在一個(gè)網(wǎng)頁設(shè)計(jì)師的角度分享Web端界面中文字系統(tǒng)的基礎(chǔ)知識,從基本網(wǎng)頁中的系統(tǒng)字體初識、字體排版基礎(chǔ)理論、國際化文字適配,希望大家能夠合理運(yùn)用在中臺界面的版式中。
1990年12月25日,英國計(jì)算機(jī)科學(xué)家蒂莫西·約翰·伯納斯-李爵士(Tim Berners-Lee)成功發(fā)明了萬維網(wǎng),并弄清了統(tǒng)一資源定位符(URL),其中超文本傳輸協(xié)議(HTTP)和超文本標(biāo)記語言(HTML)的概念后,他在Internet上發(fā)布了第一個(gè)網(wǎng)站。自從Internet發(fā)明以來,字體在Web上扮演著重要角色。1990年至今,網(wǎng)絡(luò)已經(jīng)徹底改變了我們的生活方式和工作方式。在最初的20年中,Web經(jīng)歷了許多變化,例如采用Web標(biāo)準(zhǔn),使用CSS進(jìn)行布局以及處理動態(tài)數(shù)據(jù)。雖然網(wǎng)絡(luò)從一開始就包含文本,但直到最近幾年它們才得到很好的應(yīng)用。
在1990年代中期,英國字型大師馬修·卡特(Matthew Carter)設(shè)計(jì)的Georgia和Verdana兩款字體廣泛用在基于屏幕的網(wǎng)頁中。為了使字體在當(dāng)時(shí)分辨率較低的屏幕上清晰易讀,馬修·卡特設(shè)計(jì)的這些字體具有X高度大、開孔寬敞的字體空間。由Microsoft專門針對網(wǎng)頁上的文本進(jìn)行處理,Georgia和Verdana首先在位圖中進(jìn)行設(shè)計(jì),以適配當(dāng)時(shí)網(wǎng)頁屏幕的分辨率,最后把文字轉(zhuǎn)換為輪廓字體,進(jìn)行文字圖形化。
1990年代到2000年代中期是網(wǎng)頁設(shè)計(jì)的一段過渡時(shí)期網(wǎng)頁更加圖形化,系統(tǒng)默認(rèn)自帶的字體如:Georgia、Verdana、Arial、Helvetica、Times New Roman已經(jīng)滿足不了設(shè)計(jì)師們的設(shè)計(jì)需求。設(shè)計(jì)師們必須使用Photoshop和Illustrator等相關(guān)工具將一些特殊字體的每一段文本切成圖偏提供給開發(fā)人員,但是這種方式有著很多弊端,問題主要集中于本文不可選擇、復(fù)制、翻譯甚至是不可搜索。其中newyorker.com可作為典型代表,其網(wǎng)站在使用Typekit(可提供其自定義字體庫)之前,為了讓網(wǎng)頁與原印刷出版物保持一致,便使用了切圖方式將特殊定制化文本進(jìn)行切圖處理,直到該該公司2010年11月開始使用Typekit自定義字體庫后才解決字體圖形化這種耗時(shí)耗力的方式。
在上面提到了在Jeff Veen還未創(chuàng)立字體服務(wù)Typekit之前,很多時(shí)候系統(tǒng)自帶的幾種字體滿足不了設(shè)計(jì)師需求,所以設(shè)計(jì)師們使用文本轉(zhuǎn)圖片的技術(shù)進(jìn)行處理。為了解決這些問題肖恩·英曼(Shaun Inman)2004年開發(fā)了SIFR,雖然SIFR解決了圖片切圖問題,但其中也還是有一些問題存在,比如,太過依賴Flash,并且設(shè)置SIFR還需要掌握大量的相關(guān)知識,門檻較高。2009年Simo Kinnunen又將技術(shù)改進(jìn)稱為Cufón,他使用canvas和VML快速替換文本,無需Flash或圖像。Cufón由兩部分組成:一個(gè)字體生成器(將字體轉(zhuǎn)換為專有格式)和一個(gè)用JavaScript編寫的渲染引擎。雖然文本圖片轉(zhuǎn)化技術(shù)一直在不斷完善中,但是歸根結(jié)底文本圖片轉(zhuǎn)化技術(shù)并不是網(wǎng)頁中的文字排版。
直到2009年Jeff Veen離開了Google并且同一年創(chuàng)立了字體在線服務(wù)Typekit,極大的豐富了設(shè)計(jì)們的字體選擇。2011年Adobe收購Typekit(也就是現(xiàn)在Adobe Fonts),并且Jeff Veen也因此成為Adobe產(chǎn)品的副總裁,負(fù)責(zé)Creative Cloud業(yè)務(wù),負(fù)責(zé)Adobe旗下幾乎所有產(chǎn)品的在線體驗(yàn)。
可變字體指的是一個(gè)字體默認(rèn)狀態(tài)進(jìn)行多個(gè)樣式擴(kuò)展,他是一種含有多種變化的單一字體:即所有字寬和粗細(xì)、甚至是斜體的變化都可以包含在一個(gè)單一、高效且可壓縮的字體文件中。比如說PingFang SC,如果在系統(tǒng)上使用,同時(shí)包含了六種字重:常規(guī)體、中等、細(xì)體、特粗體、特細(xì)體、粗體。
可變字體是由Adobe, Apple, Google, Microsoft四大巨頭在20016年9月聯(lián)合在波蘭華沙的ATypI會議上宣布的Variable Font的字體規(guī)格OpenType,OpenType特點(diǎn)在于可將多個(gè)字體打包成一個(gè)字體,并且不會增大字體文件包的大小。他解決了某單個(gè)字體文件可以獲取各種粗細(xì),寬度,高度,樣式和其他屬性的問題,具有靈活性??勺冏煮w為Web上的排版提供了一個(gè)跨時(shí)代的變化。目前排版軟件廠商、字體設(shè)計(jì)師、字體廠商都積極地大量投入可變自己提的研究和開發(fā)設(shè)計(jì),并且廣泛運(yùn)用在操作系統(tǒng)和印刷行業(yè)。
目前在主流的操作系統(tǒng)、瀏覽器、設(shè)計(jì)軟件都在不同程度上支持可變字體。像操作系統(tǒng),Mac os、iOS、Android、Wear OS、Fuchsia。瀏覽器Safari、Chrome、Edge、Firefox。設(shè)計(jì)界最為熟知的圖像編輯工具Photoshop、Illustrator、Sketch、Figma也已支持可變字體,設(shè)計(jì)師可以使用該設(shè)計(jì)工具進(jìn)行同款字體不同樣式的使用。
舉個(gè)比較比較典型的例子,在2019年9月小米推出了全新的 MIUI 11 系統(tǒng),并帶來了小米蘭亭Pro動態(tài)字體系統(tǒng),小米蘭亭Pro字體聯(lián)合方正字庫聯(lián)合開發(fā)。在 MIUI 11操作系統(tǒng)中,用戶可以通過系統(tǒng)設(shè)置進(jìn)入字體模塊,拖動相應(yīng)滑塊即可改變手機(jī)界面用字的字體大小和字重粗細(xì)。MIUI動態(tài)字體支持文字粗細(xì)無級調(diào)節(jié),每個(gè)人都可找到適合自己的字重,下圖是MIUI 11系統(tǒng)中可變字體的演示:
字體是體系化界面設(shè)計(jì)中最基本的構(gòu)成之一,選擇字體是一個(gè)具有創(chuàng)造性和情感的過程,因?yàn)椴煌淖煮w傳達(dá)出不同的情感。在制定用戶界面規(guī)范時(shí)科學(xué)的定義字體規(guī)范系統(tǒng),不僅能夠有效的表達(dá)出不同的設(shè)計(jì)風(fēng)格,還能通過定義字體的字族、字階、字重、字體顏色、字體行高,有效幫助設(shè)計(jì)師在設(shè)計(jì)界面時(shí)使用字體達(dá)到統(tǒng)一性和整體性,保證界面有良好的閱讀體驗(yàn)。首先,先為大分享一些非常實(shí)用的字體網(wǎng)站。
第一個(gè)我要推薦的是Adonbe旗下的Adobe Font,網(wǎng)站中有非常多優(yōu)秀的字體。但是網(wǎng)站字體需要收費(fèi),一般是按照使用量的形式進(jìn)行支付版權(quán)費(fèi),特點(diǎn)是可設(shè)置屬性進(jìn)行字體樣式實(shí)時(shí)預(yù)覽,并且字體比較全。
在Google Fonts,你可以免費(fèi)下載你喜歡的字體,并且按照你的需要在項(xiàng)目中使用。由于在系統(tǒng)中使用其他字體的唯一方法就是將字體文件導(dǎo)入到系統(tǒng)中,因此Google Fonts的下載功能非常有用。Google Fonts包含超過1400種不同的字體,其中包含最著名的:Open Sans和Roboto字體,他們是Android系統(tǒng)使用的默認(rèn)字體。
設(shè)計(jì)師在做設(shè)計(jì)時(shí)常常會遇到某些網(wǎng)站或海報(bào)使用的字體特別喜歡,但是苦惱無法獲取改字體的信息導(dǎo)致無法下載使用,求字體網(wǎng)解決了此痛點(diǎn)。你可以將喜歡的字體進(jìn)行截圖并上傳到網(wǎng)站進(jìn)行字體識別,確定后他會提供出字體下載鏈接或者字體信息,解決設(shè)計(jì)師們喜歡某個(gè)字體而找不到的煩惱。
字由也是我比較推薦的一個(gè)字體網(wǎng)站,個(gè)人用的也會比較多。官網(wǎng)將全部字體進(jìn)行整理分類方便用戶快捷尋找字體,并且有個(gè)分類是免費(fèi)商用字體庫,避免了常常困惑的設(shè)計(jì)師使用字體導(dǎo)致版權(quán)糾紛問題。此有網(wǎng)站有兩大亮點(diǎn),第一是此網(wǎng)站在設(shè)計(jì)師選用字體時(shí)有個(gè)實(shí)際運(yùn)用預(yù)覽效果,直觀的看到字體在實(shí)際使用效果,第二是網(wǎng)站提供客戶端下載,在客戶端中點(diǎn)擊下載以后可直接進(jìn)行在設(shè)計(jì)工具中直接使用。
在選用系統(tǒng)字體時(shí)需要考慮在不同系統(tǒng)的兼容性,大家都知道在不同的操作系統(tǒng)及不同的游覽器中默認(rèn)顯示的字體是不一樣的,并且相同字體在不同操作系統(tǒng)里面渲染的效果也不盡相同。在做字體規(guī)范時(shí)需要提供一套系統(tǒng)完整的字族,里面不僅需要包含系統(tǒng)默認(rèn)的界面字體,還需要一套有利于屏幕顯示的備用字體,方便維護(hù)不同系統(tǒng)及瀏覽器的實(shí)現(xiàn),保證在任何場景保持良好的閱讀性和可讀性,下面是我在做界面規(guī)范時(shí)與相關(guān)同學(xué)一起選取的界面字體。
第一部分:-apple-system是在以WebKit為內(nèi)核的瀏覽器,比如蘋果的Safari中調(diào)用蘋果系統(tǒng)macOS、iOS、watchOS、tvOS中默認(rèn)字體,目前一般情況下英文使用的是San Francisco,中文使用的是PingFang。BlinkMacSystemFont是在Chrome中調(diào)用蘋果系統(tǒng)的字體。
第二部分:主要是提供了Windows和MacOS下的字體。其中Segoe UI針對Windows and Windows Phone等系統(tǒng)。PingFang SC是蘋果為中國用戶打造了一款全新中文字體,整體樣式看上去更加簡潔,字族共6個(gè)字體:極細(xì)體、纖細(xì)體、細(xì)體、常規(guī)體、中黑體、中粗體。Hiragino Sans GB是是Hiragino KakuGothic的簡體中文版,由日本設(shè)計(jì)師為MacOS和iOS系統(tǒng)中內(nèi)置字體,簡體中文有常規(guī)體和粗體兩種,冬青黑體是一款清新的專業(yè)印刷字體,其小字在屏幕顯示時(shí)足夠清晰,擁有很多用戶的追捧。Microsoft YaHei是從Vista開始,微軟提供了這款新的字體,它是一款無襯線的黑體類字體,并且擁有Regular、Bold兩種粗細(xì)的字重,字重有效提高了字體的層級顯示效果。目前這款字體已經(jīng)成為Windows游覽器中最值得使用的中文字體。從Win8開始,微軟雅黑又加入了Light這款更細(xì)的字重,對于喜歡細(xì)字體的設(shè)計(jì)或開發(fā)人員又多了一個(gè)新的選擇。
第三部分:主要是系統(tǒng)備用兜底字體,Helvetica Neue在沒有El Capitan versions系統(tǒng)的電腦中是最流行的,所以作為兜底,sans-serif也是常見的兜底字體;
第四部分:主要是系統(tǒng)的emoji,在我們的規(guī)范中選用了'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' 針對在macOS和Windows顯示emoji。
在設(shè)計(jì)規(guī)范系統(tǒng)中字體是用戶體驗(yàn)相當(dāng)重要的一部分,因?yàn)椴徽撛贏pp界面還是Web網(wǎng)頁設(shè)計(jì)中,不同的系統(tǒng)分辨率、不同的顯示器尺寸、不同的DPI都會對最終展現(xiàn)的文字大小帶來影響,并且文字在內(nèi)容區(qū)總是能占到整個(gè)版面的80%~90%的區(qū)域,所以要根據(jù)用戶使用電腦的分辨率給予用戶一個(gè)比較合適的默認(rèn)字號。那么這個(gè)字號多大合適呢?是12px、13px、14px還是15px比較合適呢,所以我們回到這個(gè)老生常談的問題進(jìn)行分析。
在做規(guī)范時(shí)調(diào)研了在市面上各大較流行的網(wǎng)站,目前大部分文本類字體大小都采用了12px-14px范圍的文字大小。另外Windows自帶的點(diǎn)陣宋體從Vista開始只提供12px、14px、16px三個(gè)大小的點(diǎn)陣。所以,如果13px、15px、17px雖然每個(gè)字的空間大了1px但是點(diǎn)陣卻沒變,從視覺上會顯得略稀疏,可能導(dǎo)致顯示效果不佳。偶數(shù)字號的文字,比如12px的“中”字,去掉1像素的間距,填充了像素的實(shí)際寬是11px,文字的中豎線左右是平分的顯得均衡,具有美感。如下圖所示:
但是也有少部分網(wǎng)站使用基數(shù)作為文本大小,比如知乎正文使用15px,豆瓣首頁標(biāo)題下面的的簡介文字使用的13px大小,我簡單的分析了一下,知乎在改版之前文本類內(nèi)容用的13pt大小的可能是有用戶吐槽頁面文字太過于密集后來統(tǒng)一改成了15pt,知乎和花瓣頁面雖然使用的是基數(shù)但是整體效果還算不錯(cuò)。不過為了字體使用更加的“安全”還是推薦偶數(shù)作為文本規(guī)范。
還有些因素會比較推薦用偶數(shù),比如說從瀏覽器角度上看,因?yàn)槟承╇娔X的瀏覽器上如在IE6瀏覽器會把基數(shù)的字號自動渲染成偶數(shù)系。在一些畫圖軟件如Figma、Sketch、Photoshop等一些畫圖軟件在設(shè)置字體大小屬性時(shí)從12px以上都是采用偶數(shù)進(jìn)行快捷選擇,這也形成了一種常見的習(xí)慣。
在文字規(guī)范時(shí)也借鑒了設(shè)計(jì)界大佬AntDesign的規(guī)范,Ant Design 3.0 的時(shí)候,對主字號進(jìn)行了研究,飲用AntDesign的解釋“我們基于電腦顯示器閱讀距離(50 cm)以及最佳閱讀角度(0.3)對 Ant Design 的主字體進(jìn)行了一次升級,從原先的 12 上升至 14,以保證在多數(shù)常用顯示器上的用戶閱讀效率最佳?!?
同時(shí)我們也站在電腦屏幕分辨率也有過調(diào)研,在上一篇分享分享的系統(tǒng)布局中也提到了,目前大部分中臺系統(tǒng)中用戶使用的電腦屏幕主流分辨率分別為1440*900、1366*768、1920*1080、1280*800,因此在這些主流電腦分辨率中經(jīng)過實(shí)驗(yàn),14px小大的文字效果以及閱讀體驗(yàn)會比12px更加的舒適,并且內(nèi)容會更加的清晰。
總結(jié)以上幾點(diǎn)分析我們得出,在界面中使用偶數(shù)會比基數(shù)更加的美觀、安全,也比較利于設(shè)計(jì)師的使用習(xí)慣,并且在糾結(jié)使用12px還是14px字體大小的很長一段時(shí)間里我們經(jīng)過調(diào)研競品以及進(jìn)行不同屏幕分辨率下字號的實(shí)驗(yàn)最后確定我們字號使用14px正常文本大小,12px可作為輔助文字使用。
行寬是指一行字的長度,那么在用戶界面排版中我們使用多少行寬比較合適呢?引用Fusion Design的解釋“從生理結(jié)構(gòu)分析,人在閱讀文字的時(shí)候,理解并傳遞到大腦的信息是有限的。用戶在閱讀時(shí),目光左右上下巡視、掃描和閱讀,這意味著閱讀要求大量的眼球運(yùn)動。行寬越長,眼睛移動的距離太長太多。寬度較大,眼動位移較大,讀者閱讀換行時(shí)容易串行。行寬越短,眼睛閱讀折行的次數(shù)太多。行數(shù)較多,眼動跳躍次數(shù)多,讀者閱讀行時(shí)會感覺到文字不連續(xù)?!彼栽诓僮鹘缑嬷斜苊膺^長、行數(shù)較多的文字,閱讀是大腦活動中一種最復(fù)雜的過程,比如說在操作系統(tǒng)中界面操作較復(fù)雜,如果出現(xiàn)大段的文字用戶不僅要操作復(fù)雜的系統(tǒng),還需要進(jìn)行閱讀理解大大降低了用戶的使用效率。
加拿大印刷大師羅伯特·布林赫斯特(Robert Bringhurst)有一個(gè)算法是:行寬=字號x30,例如:設(shè)置字號為14px大小,那么我們建議其基礎(chǔ)行寬是420px左右。中文一個(gè)字體寬度是14px,那么建議一行建議30個(gè)文字。注:在文字寬度規(guī)范時(shí),為了考慮國際化的適配,避免多語言差異我們不以文字個(gè)數(shù)作為度量單位,而是以整個(gè)行寬來計(jì)算,比如說表單Title、Table。
行高是指在多行里面一行文字與另一行文字之間的的間距,每行文字占用空間的高度。我們定義行距(行高) = 字號 + 行間距,而不是單指字體高度,所以文字的高度不等于字號的高度,如:字號12px,行高為22px,根據(jù)Web頁面平均分配原則,行距就是從文字的頂端上移4px到文字底部下移4px的距離。如下圖所示:
在頁面布局分享有提過視覺層次,因?yàn)橐曈X層次是設(shè)計(jì)過程中的核心方法之一,對于中臺的UI設(shè)計(jì)師們而言,良好的理性思維相對比感性的視覺思維更加重要,因?yàn)樵赨I設(shè)計(jì)師設(shè)計(jì)界面時(shí)需要把界面中很多互不相關(guān)的元素有秩序的組織在一起,正確引導(dǎo)用戶操作與使用。那么什么是視覺層次呢?官方概括:視覺層次結(jié)構(gòu)致力于一種用戶能夠理解的方式呈現(xiàn)產(chǎn)品的內(nèi)容,以便用戶可以理解每個(gè)元素的重要性級別。它可以組織頁面內(nèi)容,以便大腦可以根據(jù)物理差異例如:大小,顏色,對比度,樣式等區(qū)分對象。
視覺層次中的“層次”其實(shí)講的是在設(shè)計(jì)用戶界面過程中設(shè)計(jì)師需要有在內(nèi)容上進(jìn)行取舍,保證用戶使用產(chǎn)品時(shí)能夠讓用戶強(qiáng)烈的感知內(nèi)容的主次,并且內(nèi)容和功能優(yōu)先級的高度進(jìn)行區(qū)分,有效的減少用戶在操作界面時(shí)對內(nèi)容需要就行二次過濾。比如說某個(gè)提示說明在頁面上最高,那么此提示在界面中一眼看過去需要最被突出和強(qiáng)調(diào)的。如果用戶界面看起來一團(tuán)“糊”,那么這個(gè)設(shè)計(jì)是失敗的,因?yàn)樗荒苡行У膸椭脩暨M(jìn)行內(nèi)容篩選,導(dǎo)致用戶還需要使用時(shí)花大量時(shí)間去閱讀操作。
視覺層次分為4個(gè)基礎(chǔ)部分,其中包含了大小對比、字重對比、位置對比、顏色對比。
同樣還是用蘋果官網(wǎng)作為案例,真心覺得官網(wǎng)設(shè)計(jì)太好了。蘋果的設(shè)計(jì)一直以來都是引領(lǐng)著設(shè)計(jì)趨勢,其設(shè)計(jì)被國內(nèi)外用戶所認(rèn)可,所以就以蘋果官網(wǎng)作為案例。其中,字重對比:蘋果官網(wǎng)在字重上給人眼前一亮的感覺,它采用Medium+Bold的字重使得標(biāo)題與詳情內(nèi)容產(chǎn)生強(qiáng)烈的大小對比,用戶進(jìn)入官網(wǎng)的第一眼便能了解核心內(nèi)容。顏色對比:在顏色上使用黑色背景承托產(chǎn)品和內(nèi)容,強(qiáng)烈的黑白對比增強(qiáng)了信息傳播中的識別度和對比度。圖文排版:在圖片與文字排版中使用了文字層和圖片層互相疊加的視覺效果,使得頁面層次感更加的豐富。如下圖:
格式塔原理或格式塔定律是感知場景組織的規(guī)則,人們感知由許多元素組成的復(fù)雜對象時(shí),會采用有意識或無意識的方法將這些元素安排到整個(gè)組織的系統(tǒng)中,而不只是單一的元素級。它適用于不同級別的感知,其中視覺部分是設(shè)計(jì)師設(shè)計(jì)界面時(shí)最能體現(xiàn)價(jià)值的部分。
格式塔(Gestalt)這個(gè)術(shù)語來自德語單詞Gestalt,中文翻譯為“形狀,形式”,格式塔心理學(xué)家?guī)鞝柼亍た品蚩ǎ↘urt Koffka)的一句話可以捕捉到這一運(yùn)動背后的基本思想:“整體不是元素基因的總和”。官網(wǎng)概括:“在心理現(xiàn)象中,人們對客觀對象的感受源于整體關(guān)系而非具體元素,也就是說知覺不是感覺元素的總和,而是一個(gè)統(tǒng)一的整體,部分之和不等于整體,因此整體不能分割”。格式塔理論中元素之知見的原則分別為臨近,相似,連續(xù),封閉和連接。在用戶打開界面進(jìn)行閱讀或者操作界面時(shí)視覺的第一感受是產(chǎn)品的整體效果,而并不會感知到一些較細(xì)節(jié)的元素。
在設(shè)計(jì)用戶界面時(shí)需要理解格式塔定律中5大定律,分別是接近、相似、閉合、連續(xù)、簡單,其中兩個(gè)最重要的定律分別是接近定律和相似定律,這兩個(gè)定律主要描述了我們感知事物的核心方式。
人類的大腦總是把一些細(xì)節(jié)復(fù)雜的元素分析歸類,將相對靠近或有相似的連接點(diǎn)的內(nèi)容作為一個(gè)整體,在我們的生活中有類似的在我們的現(xiàn)實(shí)的生活中有很多自然規(guī)律中遵守了格式塔原理的接近定律,比如說比如說每到秋天,北方的嚴(yán)寒氣候不再適合大雁生存,這時(shí)候大雁便會飛往較暖和的南方,當(dāng)人們看到天空正在南飛的大雁隊(duì)伍,它們組織鏈接得十分嚴(yán)密,并且群體在同一個(gè)方向移動,所以隊(duì)伍的形狀在我們的大腦中將它們視為一個(gè)群組的一部分,產(chǎn)生人字形或一字形的圖形。當(dāng)你看空中一些比較特殊的云朵比如像貓、像飛鳥等圖形,是因?yàn)榕钏傻臍怏w發(fā)生形變,形成了酷似動物或生活中熟悉的物體。這其實(shí)都是人類大腦通過潛意識進(jìn)行腦補(bǔ)和整理出來的畫面,如下圖中的元素彼此靠近的元素歸為一組,相反距離較遠(yuǎn)的元素被視為不同組。
其中在元素排布中也有一定的規(guī)律性,比如當(dāng)行向間距大于列間距時(shí),那么視覺的行排布的橫向關(guān)系密切形成整體。當(dāng)縱向間距大于列間距時(shí),那么視覺的列排布的縱向關(guān)系形成整體,如下圖所示:
以今日頭條和優(yōu)酷視頻作為案例,首先進(jìn)入到今日頭條首頁后映入眼簾的是無窮式的信息流。可以看出設(shè)計(jì)師使用接近原則對信息進(jìn)行分組、組織內(nèi)容和整理布局。卡片承載的內(nèi)容形成模塊,模塊與模塊之間的這里發(fā)揮著至關(guān)重的的作用,因?yàn)樗龑?dǎo)用戶眼睛朝向預(yù)期的方向,有效引導(dǎo)用戶使用。并且其排列方式是比較典型的縱向關(guān)系,可以看出行間距小于列間距,增強(qiáng)了縱向關(guān)系,有助于用戶閱讀和分類。把重要信息流的內(nèi)容模塊放置中間位置,其他次要內(nèi)容放置左右兩列。
優(yōu)酷視頻是個(gè)大型視頻分享平臺,進(jìn)入到首頁同樣是無窮式的視頻類信息流。我們可以看到產(chǎn)品排列方式與今日頭條正好相反,除了頂部導(dǎo)航以外內(nèi)容區(qū)的行間距大于列間距,增強(qiáng)了橫向關(guān)系并且以橫向關(guān)系密切形成了整體,屬于典型的橫向關(guān)系排列。其中視頻封面與下面的文本形成一個(gè)內(nèi)容小組,內(nèi)容小組與內(nèi)容小組形成一個(gè)大分類。由于產(chǎn)品視頻分類較多,所以從頁面排版上使用橫排關(guān)系將白色的空間增強(qiáng)了視覺層次感有效將視頻類型橫向區(qū)分,幫助用戶更快的找到相關(guān)類型的視頻內(nèi)容。
接下來再說下相似定律。人們大腦總是把一些相似視覺特征的元素被認(rèn)為是一類,與不具有相似視覺特征相比較具有相似特征的元素關(guān)聯(lián)性更強(qiáng)。在用戶界面排版中具有相似功能的元素在樣式上應(yīng)該保持一致,比如說在操作界面中Link的顏色為藍(lán)色,那么用戶在操作界面時(shí)默認(rèn)會把藍(lán)色的文字理解為可點(diǎn)擊Link。
設(shè)計(jì)師在設(shè)計(jì)界面過程中可以使用相似定律將元素進(jìn)行元素分組、元素組織、元素布局。但是需要強(qiáng)調(diào)界面中相同的元素(組件),如按鈕、下拉、標(biāo)題、正常文本等一些基礎(chǔ)組件需要使用相同的設(shè)計(jì)語言,保持一致的顏色、尺寸、布局等。本·施耐德曼在《Designing The User Interface》里說過:“在界面設(shè)計(jì)中,要采取一致的行動順序”。因?yàn)橛脩魰⒁曈X屬性相似的內(nèi)容分組,將最相關(guān)的內(nèi)容彼此靠近作為小組,小組與小組之間可組合成大組也就是我們在布局中提到的模塊,最后由模塊組合呈現(xiàn)出頁面形態(tài)。
西瓜視頻是個(gè)性化推薦短視頻平臺,從下圖中可以看到首頁分為影視和短視頻兩類,這也是西瓜視頻的兩大特色功能。設(shè)計(jì)師在設(shè)計(jì)界面時(shí)考慮到影視和短視頻這兩大類視頻需要在視覺感知上需要進(jìn)行區(qū)分,所以設(shè)計(jì)師運(yùn)用了相似定律進(jìn)行設(shè)計(jì),其中豎版視頻封面與下面的文本形成一種內(nèi)容小組,橫版視頻封面與下方內(nèi)容組合形成另一種內(nèi)容小組。以不同的形狀來告知用戶的功能類型差異。如下圖所示:
在網(wǎng)頁設(shè)計(jì)中不論是視覺層級還是格式塔定律,其實(shí)都是由我們?nèi)祟惖拇竽X神經(jīng)感知事物的規(guī)律總結(jié)而來,在生活中每個(gè)人潛意識都具備這種技能,因?yàn)槿藗兛偸窍矚g有規(guī)律的事物,規(guī)律可以讓事情變得更容易理解。同理在設(shè)計(jì)用戶界面時(shí)不僅僅是為了漂亮美觀,還需將界面中內(nèi)容有效的進(jìn)行梳理并傳達(dá)給用戶。
隨著公司業(yè)務(wù)不斷快速發(fā)展以及互聯(lián)網(wǎng)信息的快速交流與傳播,很多產(chǎn)品已經(jīng)突破地域的邊界走向了海外市場,并且個(gè)人也因?yàn)樵趯?shí)際項(xiàng)目中產(chǎn)品切換多語言時(shí)產(chǎn)生了各種各樣的體驗(yàn)問題,所以為了提高規(guī)范體驗(yàn)設(shè)計(jì)師們應(yīng)該提前自主探索和思考關(guān)于產(chǎn)品國際化的相關(guān)內(nèi)容。今天主要淺談文本適配問題。
在實(shí)際的工作中會遇到界面使用中文時(shí)布局非常的合理,但是一切換到其他語言時(shí)出現(xiàn)各種折行或者是遮擋的問題。主要原因是因?yàn)槲淖值拈L度會因語言不同而異,即使是使用同類字形的語言也是如此,比如說英文“New”翻譯成法語是“Nouvelle”,并且法語的感嘆號前面還需要留一個(gè)空格,字符數(shù)從4個(gè)變成了8個(gè)。所以設(shè)計(jì)師在做規(guī)范時(shí)一定要考慮預(yù)留出更大翻譯空間,以下是網(wǎng)上找的一些Bad case。
在多語言適配時(shí)我們發(fā)現(xiàn)很多書寫系統(tǒng),如阿希伯來語、拉伯語、波斯語、烏爾都語等,都是以右到左對齊方式進(jìn)行字符顯示,并且在相同的字體大小情況下,這些字體可能看起來比西伯來語字體要小,所以需要考慮調(diào)整行間距和對齊方式,使得不同字體在相同界面中都適用。并且使用這些語言的人口數(shù)量相當(dāng)大,特別是在波斯灣地區(qū)由于石油經(jīng)濟(jì)發(fā)展特別迅速。對于面對中東地區(qū)出海的產(chǎn)品,是不能回避的問題,所以要及時(shí)作出可配性方案。
在多語言適配時(shí)因?yàn)椴煌恼Z言可能在同一界面中需要設(shè)定不同的行高達(dá)到最佳效果,可以定義3種行高尺寸來做多語言適配,分別為大(l)、常規(guī)(lg)、小(s)。從下圖可以看出區(qū)別較大的是泰語和阿拉伯語的字型高度相差較大,可利用相對合理的行高尺寸進(jìn)行匹配,比如泰語字型較高可使用大(l)尺寸作為文本行高,阿拉伯語字型較低可使用小(s)尺寸作為文本行高。
設(shè)計(jì)師在設(shè)計(jì)界面時(shí)經(jīng)常遇到文本與組件的組合排版方式,但是其中會有比較多的“坑”,設(shè)計(jì)師們很容易不小心就陷入“坑”中。舉個(gè)例子,比如設(shè)計(jì)師們會為了更加美觀會把組件插入一段文本中間中進(jìn)行混合排版,這種組合方式有幾個(gè)比較大弊端。第一不同語種有不同語法順序,比如法語形容詞的后置,日語里動詞的后置。第二復(fù)數(shù)問題,在英語里面,每個(gè)名詞都有一個(gè)單數(shù)形式和一個(gè)復(fù)數(shù)形式,比如One picture復(fù)數(shù)是Two pictures。但在俄語里面,復(fù)數(shù)有三種可能的形式。在法語里面,有不少單詞變成復(fù)數(shù)之后拼寫也會改變。所以,如果用戶要在句子中間輸入數(shù)字這種設(shè)計(jì)就可能造成語法錯(cuò)誤。第三有些語言里面,單詞是區(qū)分陰陽性的。比如在法語里面,形容詞也是有陰陽性形式的。所以如果你在句子中間插入一個(gè)下拉菜單框,那么可能又會造成語法錯(cuò)誤。
產(chǎn)品國際化題材比較大涉及到的內(nèi)容也會比較廣,可能需要考慮的不僅限于文本適配,還需要考慮很多的因素比如說各國的文化差異、本地格式、地區(qū)標(biāo)準(zhǔn)等等,所以今天主要站在文字適配的角度給大家分享幾個(gè)做國際時(shí)需要關(guān)注的小點(diǎn)。
本篇文章主要是網(wǎng)頁中文字系統(tǒng)初識,網(wǎng)頁中的文字雖然看起來比較簡單但是每個(gè)內(nèi)容板塊拆分開都是值得深挖的。比如說文字結(jié)構(gòu)、如何結(jié)合印刷理論應(yīng)用到網(wǎng)頁排版中、解刨多語言適配等等吧。本片文章還是秉著啟發(fā)的態(tài)度與大家進(jìn)行網(wǎng)頁文字系統(tǒng)的探索,希望大家能夠可根據(jù)此篇文章結(jié)合工作中實(shí)際案例舉一反三,更深入地探索相關(guān)內(nèi)容。在這里再次強(qiáng)調(diào)一下產(chǎn)品國際化方面內(nèi)容,互聯(lián)網(wǎng)信息的快速交流與傳播使得人與人的連接越來越容易,很多產(chǎn)品進(jìn)入海外市場是必經(jīng)之路,大家可提前做好相關(guān)知識儲備,還是那句話也希望自己后續(xù)可以多歸納總結(jié)與大家展開探討分享。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼ben_lanlan,報(bào)下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com