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