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