2021-10-17 資深UI設(shè)計(jì)者
版式設(shè)計(jì)是大部分設(shè)計(jì)師再熟悉不過的一個(gè)詞了，市面上很多文章都有普及過各種版式設(shè)計(jì)知識(shí)，比如：印刷中的版式設(shè)計(jì)、移動(dòng)界面中的版式設(shè)計(jì)等等。但是在我做中臺(tái)規(guī)范時(shí)調(diào)研發(fā)現(xiàn)針對(duì)中臺(tái)系統(tǒng)文字規(guī)范內(nèi)容科普的知識(shí)較少，可能是中后臺(tái)設(shè)計(jì)在國(guó)內(nèi)還是處于初級(jí)階段吧。所以結(jié)合調(diào)研內(nèi)容到實(shí)際工作中的總結(jié)給大家分享關(guān)于Web端文字系統(tǒng)的相關(guān)內(nèi)容。
加拿大印刷術(shù)家羅伯特·布林赫斯特（Robert Bringhurst）在他撰寫的《印刷風(fēng)格的元素》一書中將印刷術(shù)定義為以持久的視覺形式賦予人類語言的技藝。在中臺(tái)界面文字排版的易讀性、美觀度是設(shè)計(jì)師的首要任務(wù)，要?jiǎng)?chuàng)建閱讀性高和較美觀的中臺(tái)界面文字排版是設(shè)計(jì)師們必須學(xué)習(xí)的基礎(chǔ)知識(shí)之一。因?yàn)椴徽撛贏pp界面還是Web網(wǎng)頁設(shè)計(jì)中文字內(nèi)容總是能占到整個(gè)版面的80%～90%的區(qū)域，好的文字排版能夠大大提高用戶的使用效率。所以本篇文章將站在一個(gè)網(wǎng)頁設(shè)計(jì)師的角度分享Web端界面中文字系統(tǒng)的基礎(chǔ)知識(shí)，從基本網(wǎng)頁中的系統(tǒng)字體初識(shí)、字體排版基礎(chǔ)理論、國(guó)際化文字適配，希望大家能夠合理運(yùn)用在中臺(tái)界面的版式中。
1990年12月25日，英國(guó)計(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)行布局以及處理動(dòng)態(tài)數(shù)據(jù)。雖然網(wǎng)絡(luò)從一開始就包含文本，但直到最近幾年它們才得到很好的應(yīng)用。
在1990年代中期，英國(guó)字型大師馬修·卡特（Matthew Carter）設(shè)計(jì)的Georgia和Verdana兩款字體廣泛用在基于屏幕的網(wǎng)頁中。為了使字體在當(dāng)時(shí)分辨率較低的屏幕上清晰易讀，馬修·卡特設(shè)計(jì)的這些字體具有X高度大、開孔寬敞的字體空間。由Microsoft專門針對(duì)網(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)知識(shí)，門檻較高。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收購(gòu)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會(huì)議上宣布的Variable Font的字體規(guī)格OpenType，OpenType特點(diǎn)在于可將多個(gè)字體打包成一個(gè)字體，并且不會(huì)增大字體文件包的大小。他解決了某單個(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動(dòng)態(tài)字體系統(tǒng)，小米蘭亭Pro字體聯(lián)合方正字庫聯(lián)合開發(fā)。在 MIUI 11操作系統(tǒng)中，用戶可以通過系統(tǒng)設(shè)置進(jìn)入字體模塊，拖動(dòng)相應(yīng)滑塊即可改變手機(jī)界面用字的字體大小和字重粗細(xì)。MIUI動(dòng)態(tài)字體支持文字粗細(xì)無級(jí)調(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í)常常會(huì)遇到某些網(wǎng)站或海報(bào)使用的字體特別喜歡，但是苦惱無法獲取改字體的信息導(dǎo)致無法下載使用，求字體網(wǎng)解決了此痛點(diǎn)。你可以將喜歡的字體進(jìn)行截圖并上傳到網(wǎng)站進(jìn)行字體識(shí)別，確定后他會(huì)提供出字體下載鏈接或者字體信息，解決設(shè)計(jì)師們喜歡某個(gè)字體而找不到的煩惱。
字由也是我比較推薦的一個(gè)字體網(wǎng)站，個(gè)人用的也會(huì)比較多。官網(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)，保證在任何場(chǎng)景保持良好的閱讀性和可讀性，下面是我在做界面規(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針對(duì)Windows and Windows Phone等系統(tǒng)。PingFang SC是蘋果為中國(guó)用戶打造了一款全新中文字體，整體樣式看上去更加簡(jiǎn)潔，字族共6個(gè)字體：極細(xì)體、纖細(xì)體、細(xì)體、常規(guī)體、中黑體、中粗體。Hiragino Sans GB是是Hiragino KakuGothic的簡(jiǎn)體中文版，由日本設(shè)計(jì)師為MacOS和iOS系統(tǒng)中內(nèi)置字體，簡(jiǎn)體中文有常規(guī)體和粗體兩種，冬青黑體是一款清新的專業(yè)印刷字體，其小字在屏幕顯示時(shí)足夠清晰，擁有很多用戶的追捧。Microsoft YaHei是從Vista開始，微軟提供了這款新的字體，它是一款無襯線的黑體類字體，并且擁有Regular、Bold兩種粗細(xì)的字重，字重有效提高了字體的層級(jí)顯示效果。目前這款字體已經(jīng)成為Windows游覽器中最值得使用的中文字體。從Win8開始，微軟雅黑又加入了Light這款更細(xì)的字重，對(duì)于喜歡細(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' 針對(duì)在macOS和Windows顯示emoji。
在設(shè)計(jì)規(guī)范系統(tǒng)中字體是用戶體驗(yàn)相當(dāng)重要的一部分，因?yàn)椴徽撛贏pp界面還是Web網(wǎng)頁設(shè)計(jì)中，不同的系統(tǒng)分辨率、不同的顯示器尺寸、不同的DPI都會(huì)對(duì)最終展現(xiàn)的文字大小帶來影響，并且文字在內(nèi)容區(qū)總是能占到整個(gè)版面的80%～90%的區(qū)域，所以要根據(jù)用戶使用電腦的分辨率給予用戶一個(gè)比較合適的默認(rèn)字號(hào)。那么這個(gè)字號(hào)多大合適呢？是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)陣卻沒變，從視覺上會(huì)顯得略稀疏，可能導(dǎo)致顯示效果不佳。偶數(shù)字號(hào)的文字，比如12px的“中”字，去掉1像素的間距，填充了像素的實(shí)際寬是11px，文字的中豎線左右是平分的顯得均衡，具有美感。如下圖所示：
但是也有少部分網(wǎng)站使用基數(shù)作為文本大小，比如知乎正文使用15px，豆瓣首頁標(biāo)題下面的的簡(jiǎn)介文字使用的13px大小，我簡(jiǎn)單的分析了一下，知乎在改版之前文本類內(nèi)容用的13pt大小的可能是有用戶吐槽頁面文字太過于密集后來統(tǒng)一改成了15pt，知乎和花瓣頁面雖然使用的是基數(shù)但是整體效果還算不錯(cuò)。不過為了字體使用更加的“安全”還是推薦偶數(shù)作為文本規(guī)范。
還有些因素會(huì)比較推薦用偶數(shù)，比如說從瀏覽器角度上看，因?yàn)槟承╇娔X的瀏覽器上如在IE6瀏覽器會(huì)把基數(shù)的字號(hào)自動(dòng)渲染成偶數(shù)系。在一些畫圖軟件如Figma、Sketch、Photoshop等一些畫圖軟件在設(shè)置字體大小屬性時(shí)從12px以上都是采用偶數(shù)進(jìn)行快捷選擇，這也形成了一種常見的習(xí)慣。
在文字規(guī)范時(shí)也借鑒了設(shè)計(jì)界大佬AntDesign的規(guī)范，Ant Design 3.0 的時(shí)候，對(duì)主字號(hào)進(jìn)行了研究，飲用AntDesign的解釋“我們基于電腦顯示器閱讀距離（50 cm）以及最佳閱讀角度（0.3）對(duì) Ant Design 的主字體進(jìn)行了一次升級(jí)，從原先的 12 上升至 14，以保證在多數(shù)常用顯示器上的用戶閱讀效率最佳?！?
同時(shí)我們也站在電腦屏幕分辨率也有過調(diào)研，在上一篇分享分享的系統(tǒng)布局中也提到了，目前大部分中臺(tái)系統(tǒng)中用戶使用的電腦屏幕主流分辨率分別為1440*900、1366*768、1920*1080、1280*800，因此在這些主流電腦分辨率中經(jīng)過實(shí)驗(yàn)，14px小大的文字效果以及閱讀體驗(yàn)會(huì)比12px更加的舒適，并且內(nèi)容會(huì)更加的清晰。
總結(jié)以上幾點(diǎn)分析我們得出，在界面中使用偶數(shù)會(huì)比基數(shù)更加的美觀、安全，也比較利于設(shè)計(jì)師的使用習(xí)慣，并且在糾結(jié)使用12px還是14px字體大小的很長(zhǎng)一段時(shí)間里我們經(jīng)過調(diào)研競(jìng)品以及進(jìn)行不同屏幕分辨率下字號(hào)的實(shí)驗(yàn)最后確定我們字號(hào)使用14px正常文本大小，12px可作為輔助文字使用。
行寬是指一行字的長(zhǎng)度，那么在用戶界面排版中我們使用多少行寬比較合適呢？引用Fusion Design的解釋“從生理結(jié)構(gòu)分析，人在閱讀文字的時(shí)候，理解并傳遞到大腦的信息是有限的。用戶在閱讀時(shí)，目光左右上下巡視、掃描和閱讀，這意味著閱讀要求大量的眼球運(yùn)動(dòng)。行寬越長(zhǎng)，眼睛移動(dòng)的距離太長(zhǎng)太多。寬度較大，眼動(dòng)位移較大，讀者閱讀換行時(shí)容易串行。行寬越短，眼睛閱讀折行的次數(shù)太多。行數(shù)較多，眼動(dòng)跳躍次數(shù)多，讀者閱讀行時(shí)會(huì)感覺到文字不連續(xù)。”所以在操作界面中避免過長(zhǎng)、行數(shù)較多的文字，閱讀是大腦活動(dòng)中一種最復(fù)雜的過程，比如說在操作系統(tǒng)中界面操作較復(fù)雜，如果出現(xiàn)大段的文字用戶不僅要操作復(fù)雜的系統(tǒng)，還需要進(jìn)行閱讀理解大大降低了用戶的使用效率。
加拿大印刷大師羅伯特·布林赫斯特（Robert Bringhurst）有一個(gè)算法是：行寬=字號(hào)x30，例如：設(shè)置字號(hào)為14px大小，那么我們建議其基礎(chǔ)行寬是420px左右。中文一個(gè)字體寬度是14px，那么建議一行建議30個(gè)文字。注：在文字寬度規(guī)范時(shí)，為了考慮國(guó)際化的適配，避免多語言差異我們不以文字個(gè)數(shù)作為度量單位，而是以整個(gè)行寬來計(jì)算，比如說表單Title、Table。
行高是指在多行里面一行文字與另一行文字之間的的間距，每行文字占用空間的高度。我們定義行距(行高) = 字號(hào) + 行間距，而不是單指字體高度，所以文字的高度不等于字號(hào)的高度，如：字號(hào)12px，行高為22px，根據(jù)Web頁面平均分配原則，行距就是從文字的頂端上移4px到文字底部下移4px的距離。如下圖所示：
在頁面布局分享有提過視覺層次，因?yàn)橐曈X層次是設(shè)計(jì)過程中的核心方法之一，對(duì)于中臺(tái)的UI設(shè)計(jì)師們而言，良好的理性思維相對(duì)比感性的視覺思維更加重要，因?yàn)樵赨I設(shè)計(jì)師設(shè)計(jì)界面時(shí)需要把界面中很多互不相關(guān)的元素有秩序的組織在一起，正確引導(dǎo)用戶操作與使用。那么什么是視覺層次呢？官方概括：視覺層次結(jié)構(gòu)致力于一種用戶能夠理解的方式呈現(xiàn)產(chǎn)品的內(nèi)容，以便用戶可以理解每個(gè)元素的重要性級(jí)別。它可以組織頁面內(nèi)容，以便大腦可以根據(jù)物理差異例如：大小，顏色，對(duì)比度，樣式等區(qū)分對(duì)象。
視覺層次中的“層次”其實(shí)講的是在設(shè)計(jì)用戶界面過程中設(shè)計(jì)師需要有在內(nèi)容上進(jìn)行取舍，保證用戶使用產(chǎn)品時(shí)能夠讓用戶強(qiáng)烈的感知內(nèi)容的主次，并且內(nèi)容和功能優(yōu)先級(jí)的高度進(jìn)行區(qū)分，有效的減少用戶在操作界面時(shí)對(duì)內(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ǔ)部分，其中包含了大小對(duì)比、字重對(duì)比、位置對(duì)比、顏色對(duì)比。
同樣還是用蘋果官網(wǎng)作為案例，真心覺得官網(wǎng)設(shè)計(jì)太好了。蘋果的設(shè)計(jì)一直以來都是引領(lǐng)著設(shè)計(jì)趨勢(shì)，其設(shè)計(jì)被國(guó)內(nèi)外用戶所認(rèn)可，所以就以蘋果官網(wǎng)作為案例。其中，字重對(duì)比：蘋果官網(wǎng)在字重上給人眼前一亮的感覺，它采用Medium+Bold的字重使得標(biāo)題與詳情內(nèi)容產(chǎn)生強(qiáng)烈的大小對(duì)比，用戶進(jìn)入官網(wǎng)的第一眼便能了解核心內(nèi)容。顏色對(duì)比：在顏色上使用黑色背景承托產(chǎn)品和內(nèi)容，強(qiáng)烈的黑白對(duì)比增強(qiáng)了信息傳播中的識(shí)別度和對(duì)比度。圖文排版：在圖片與文字排版中使用了文字層和圖片層互相疊加的視覺效果，使得頁面層次感更加的豐富。如下圖：
格式塔原理或格式塔定律是感知場(chǎng)景組織的規(guī)則，人們感知由許多元素組成的復(fù)雜對(duì)象時(shí)，會(huì)采用有意識(shí)或無意識(shí)的方法將這些元素安排到整個(gè)組織的系統(tǒng)中，而不只是單一的元素級(jí)。它適用于不同級(jí)別的感知，其中視覺部分是設(shè)計(jì)師設(shè)計(jì)界面時(shí)最能體現(xiàn)價(jià)值的部分。
格式塔（Gestalt）這個(gè)術(shù)語來自德語單詞Gestalt，中文翻譯為“形狀，形式”，格式塔心理學(xué)家?guī)鞝柼亍た品蚩ǎ↘urt Koffka）的一句話可以捕捉到這一運(yùn)動(dòng)背后的基本思想：“整體不是元素基因的總和”。官網(wǎng)概括：“在心理現(xiàn)象中，人們對(duì)客觀對(duì)象的感受源于整體關(guān)系而非具體元素，也就是說知覺不是感覺元素的總和，而是一個(gè)統(tǒng)一的整體，部分之和不等于整體，因此整體不能分割”。格式塔理論中元素之知見的原則分別為臨近，相似，連續(xù)，封閉和連接。在用戶打開界面進(jìn)行閱讀或者操作界面時(shí)視覺的第一感受是產(chǎn)品的整體效果，而并不會(huì)感知到一些較細(xì)節(jié)的元素。
在設(shè)計(jì)用戶界面時(shí)需要理解格式塔定律中5大定律，分別是接近、相似、閉合、連續(xù)、簡(jiǎn)單，其中兩個(gè)最重要的定律分別是接近定律和相似定律，這兩個(gè)定律主要描述了我們感知事物的核心方式。
人類的大腦總是把一些細(xì)節(jié)復(fù)雜的元素分析歸類，將相對(duì)靠近或有相似的連接點(diǎn)的內(nèi)容作為一個(gè)整體，在我們的生活中有類似的在我們的現(xiàn)實(shí)的生活中有很多自然規(guī)律中遵守了格式塔原理的接近定律，比如說比如說每到秋天，北方的嚴(yán)寒氣候不再適合大雁生存，這時(shí)候大雁便會(huì)飛往較暖和的南方，當(dāng)人們看到天空正在南飛的大雁隊(duì)伍，它們組織鏈接得十分嚴(yán)密，并且群體在同一個(gè)方向移動(dòng)，所以隊(duì)伍的形狀在我們的大腦中將它們視為一個(gè)群組的一部分，產(chǎn)生人字形或一字形的圖形。當(dāng)你看空中一些比較特殊的云朵比如像貓、像飛鳥等圖形，是因?yàn)榕钏傻臍怏w發(fā)生形變，形成了酷似動(dòng)物或生活中熟悉的物體。這其實(shí)都是人類大腦通過潛意識(shí)進(jìn)行腦補(bǔ)和整理出來的畫面，如下圖中的元素彼此靠近的元素歸為一組，相反距離較遠(yuǎn)的元素被視為不同組。
其中在元素排布中也有一定的規(guī)律性，比如當(dāng)行向間距大于列間距時(shí)，那么視覺的行排布的橫向關(guān)系密切形成整體。當(dāng)縱向間距大于列間距時(shí)，那么視覺的列排布的縱向關(guān)系形成整體，如下圖所示：
以今日頭條和優(yōu)酷視頻作為案例，首先進(jìn)入到今日頭條首頁后映入眼簾的是無窮式的信息流?？梢钥闯鲈O(shè)計(jì)師使用接近原則對(duì)信息進(jìn)行分組、組織內(nèi)容和整理布局?？ㄆ休d的內(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è)大型視頻分享平臺(tái)，進(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)會(huì)把藍(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ì)中，要采取一致的行動(dòng)順序”。因?yàn)橛脩魰?huì)將視覺屬性相似的內(nèi)容分組，將最相關(guān)的內(nèi)容彼此靠近作為小組，小組與小組之間可組合成大組也就是我們?cè)诓季种刑岬降哪K，最后由模塊組合呈現(xiàn)出頁面形態(tài)。
西瓜視頻是個(gè)性化推薦短視頻平臺(tái)，從下圖中可以看到首頁分為影視和短視頻兩類，這也是西瓜視頻的兩大特色功能。設(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ì)中不論是視覺層級(jí)還是格式塔定律，其實(shí)都是由我們?nèi)祟惖拇竽X神經(jīng)感知事物的規(guī)律總結(jié)而來，在生活中每個(gè)人潛意識(shí)都具備這種技能，因?yàn)槿藗兛偸窍矚g有規(guī)律的事物，規(guī)律可以讓事情變得更容易理解。同理在設(shè)計(jì)用戶界面時(shí)不僅僅是為了漂亮美觀，還需將界面中內(nèi)容有效的進(jìn)行梳理并傳達(dá)給用戶。
隨著公司業(yè)務(wù)不斷快速發(fā)展以及互聯(lián)網(wǎng)信息的快速交流與傳播，很多產(chǎn)品已經(jīng)突破地域的邊界走向了海外市場(chǎ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ó)際化的相關(guān)內(nèi)容。今天主要淺談文本適配問題。
在實(shí)際的工作中會(huì)遇到界面使用中文時(shí)布局非常的合理，但是一切換到其他語言時(shí)出現(xiàn)各種折行或者是遮擋的問題。主要原因是因?yàn)槲淖值拈L(zhǎng)度會(huì)因語言不同而異，即使是使用同類字形的語言也是如此，比如說英文“New”翻譯成法語是“Nouvelle”，并且法語的感嘆號(hào)前面還需要留一個(gè)空格，字符數(shù)從4個(gè)變成了8個(gè)。所以設(shè)計(jì)師在做規(guī)范時(shí)一定要考慮預(yù)留出更大翻譯空間，以下是網(wǎng)上找的一些Bad case。
在多語言適配時(shí)我們發(fā)現(xiàn)很多書寫系統(tǒng)，如阿希伯來語、拉伯語、波斯語、烏爾都語等，都是以右到左對(duì)齊方式進(jìn)行字符顯示，并且在相同的字體大小情況下，這些字體可能看起來比西伯來語字體要小，所以需要考慮調(diào)整行間距和對(duì)齊方式，使得不同字體在相同界面中都適用。并且使用這些語言的人口數(shù)量相當(dāng)大，特別是在波斯灣地區(qū)由于石油經(jīng)濟(jì)發(fā)展特別迅速。對(duì)于面對(duì)中東地區(qū)出海的產(chǎn)品，是不能回避的問題，所以要及時(shí)作出可配性方案。
在多語言適配時(shí)因?yàn)椴煌恼Z言可能在同一界面中需要設(shè)定不同的行高達(dá)到最佳效果，可以定義3種行高尺寸來做多語言適配，分別為大（l）、常規(guī)（lg）、?。╯）。從下圖可以看出區(qū)別較大的是泰語和阿拉伯語的字型高度相差較大，可利用相對(duì)合理的行高尺寸進(jìn)行匹配，比如泰語字型較高可使用大（l）尺寸作為文本行高，阿拉伯語字型較低可使用小（s）尺寸作為文本行高。
設(shè)計(jì)師在設(shè)計(jì)界面時(shí)經(jīng)常遇到文本與組件的組合排版方式，但是其中會(huì)有比較多的“坑”，設(shè)計(jì)師們很容易不小心就陷入“坑”中。舉個(gè)例子，比如設(shè)計(jì)師們會(huì)為了更加美觀會(huì)把組件插入一段文本中間中進(jìn)行混合排版，這種組合方式有幾個(gè)比較大弊端。第一不同語種有不同語法順序，比如法語形容詞的后置，日語里動(dòng)詞的后置。第二復(fù)數(shù)問題，在英語里面，每個(gè)名詞都有一個(gè)單數(shù)形式和一個(gè)復(fù)數(shù)形式，比如One picture復(fù)數(shù)是Two pictures。但在俄語里面，復(fù)數(shù)有三種可能的形式。在法語里面，有不少單詞變成復(fù)數(shù)之后拼寫也會(huì)改變。所以，如果用戶要在句子中間輸入數(shù)字這種設(shè)計(jì)就可能造成語法錯(cuò)誤。第三有些語言里面，單詞是區(qū)分陰陽性的。比如在法語里面，形容詞也是有陰陽性形式的。所以如果你在句子中間插入一個(gè)下拉菜單框，那么可能又會(huì)造成語法錯(cuò)誤。
產(chǎn)品國(guó)際化題材比較大涉及到的內(nèi)容也會(huì)比較廣，可能需要考慮的不僅限于文本適配，還需要考慮很多的因素比如說各國(guó)的文化差異、本地格式、地區(qū)標(biāo)準(zhǔn)等等，所以今天主要站在文字適配的角度給大家分享幾個(gè)做國(guó)際時(shí)需要關(guān)注的小點(diǎn)。
本篇文章主要是網(wǎng)頁中文字系統(tǒng)初識(shí)，網(wǎng)頁中的文字雖然看起來比較簡(jiǎn)單但是每個(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)品國(guó)際化方面內(nèi)容，互聯(lián)網(wǎng)信息的快速交流與傳播使得人與人的連接越來越容易，很多產(chǎn)品進(jìn)入海外市場(chǎng)是必經(jīng)之路，大家可提前做好相關(guān)知識(shí)儲(chǔ)備，還是那句話也希望自己后續(xù)可以多歸納總結(jié)與大家展開探討分享。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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://sillybuy.com