字有道理,文字編排的細節(jié)

2021-3-22    ui設(shè)計分享達人

全文1萬4千字,講解文字編排有兩個層面的作用。其一,它做了一些傳遞信息的工作;其二,它自身在合理地編排下就會有韻律的美感。


      在通常版式設(shè)計中,一般是由文字、色彩、圖形三個要素組合而成的。通過這三個要素的有機搭配,從而給人視覺上造成一定的沖擊,激發(fā)人們的閱讀興趣。

     其次,文字組合編排是構(gòu)成版式設(shè)計中最主要的構(gòu)成要素,也是傳遞信息的重要的設(shè)計手法和策略。字體的選擇是否合適則會直接影響版式的效果,雖然能現(xiàn)在可供選擇的字體五花八門,但是所選擇的字體要能夠與版式的主題相吻合。除此之外,文字的字號也會影響閱讀,在排版時要注意文字信息的等級關(guān)系,做到有主有次。

   如果文字從發(fā)明出來的那一刻起,就是為了記錄和傳遞信息,那在版式中的文字就是通過設(shè)計設(shè)計手法來更好的傳遞信息。

    怎么去理解這句話呢?如果大家看過《王牌對王牌》這節(jié)目,里面有個游戲叫傳聲筒,里面的游戲規(guī)則是“每隊輪流參賽,每隊任選5名成員,每個成員用隔板隔開,第一人將對手所出題目,演繹給隊友,只能通過音效和動作表達,依次傳遞給下一位隊友,經(jīng)過三四個人傳遞后最后一名隊友,猜測題目上的信息。猜對得一分,最終積分高的一隊獲勝?!?

     這種形式像不像設(shè)計師的日常呢?老板或者領(lǐng)導有個“牛批卡拉斯”的想法,然后他在想法告訴運營總監(jiān)或者文策劃總監(jiān),然后在由下面的運營/策劃專員做成方案,最后在交給設(shè)計師做成圖片來傳遞老板那個“牛批卡拉斯”的想法。

    那么文字組合怎么去編排就成為將老板的想法完美的傳遞出來的關(guān)鍵要素,為了不南轅北轍,我們需要將文字編排的形成方案,并在實際的工作中通過不斷的實踐去完善,那讓我們一起來了解下文字組編排的技巧吧。

  一般的軟件里面都會有字體選擇器,我們需要找想要的字體的時候都是直接在里面去搜索,然后再去點擊使用,那么今天我來看看怎么通過觀察字體家族的特征來找到我們想要的字體吧。


1.11字體家族的縮寫


    家庭中的所有成員都有各不同的稱謂來辨別身份,在字體家族中也是如此,我們通過不同的前綴后綴的縮寫來區(qū)別字體的樣式。

例如:字體前面的LT代表的是萊諾字體公司,如果我們使用的字體前面或者后面帶有LT,那就說明這個款字體是由萊諾字體公司出版的。

   當然,我們?nèi)粘?吹阶煮w廠家也會有很多,例如常見的MS是微軟公司,MT是蒙納字體,ITC是國際字體公司等等,一般字體公司的名稱的縮寫為連著的大寫字母,所以我們看到字體中帶有2-3的大寫字母,我們可以默認他們是字體公司的名稱縮寫。

    那剛剛我們看到LT后面還有STD,那個是什么意思呢?STD是英文單詞“Standard”的縮寫,代表著這個字體只支持基礎(chǔ)的字符集,它的字體字符集相對會少點,與其相對應的“PRO”是英文單詞“Professional”,則是代表字符集比較多的后綴。

1.12字體家族系統(tǒng)


     既然字體家族的縮寫那么多,那我們怎么把它規(guī)整好方便記憶呢?方便我們通過不同的前綴后綴來區(qū)別字體的樣式。正常的我們講字體家族系統(tǒng)一分為三類,1.字體的寬窄,2.字體的造型,3.字體的字重。

1.13字體家族/字族的寬窄


     寬窄系統(tǒng):只有比較大的字體公司去做這類型字體,因為不常用,所以做的就比較少,漢字里面好像漢儀旗黑又寬窄系統(tǒng),那我們怎么去識別呢,以Ai為例子,如果我們在字體后綴發(fā)現(xiàn)帶Condensed,那么我們可以確定這個字體為窄體,以后如果我們在字體后綴發(fā)現(xiàn)帶Extended,那么這個字體則為寬體。如果設(shè)計中有特殊的需求,需要我們可以通過后綴去識別。

1.14字體家族/字族造型


造型系統(tǒng)是為給不同應用場景下字體做區(qū)分的,正常的分為:常規(guī)體,意大利斜體,空心體,裝飾花邊,老式數(shù)字。

常規(guī)題:常規(guī)體的后面一般帶Roman或者Regular,帶著著這個字體里面最常用也是最適中的字體。

意大利斜體:英文后綴一般帶Italic,這類型的字體一般是專人設(shè)計過的傾斜體,比軟件生成看起來更加舒適和諧。例如有的字體公司為了區(qū)分窄體的傾斜體,有的也會用這個單詞,oblique,但是意大利斜體(Italic)代表的是常規(guī)字的傾斜體。

空心體:英文后綴一般帶Outline,在一些大型的字庫公司設(shè)計的字體會有,他打出的字不是實心的,而是空心字類型的,常見會在比較粗的字體上會有,因為這個的字體變成空心字不容易破壞字體的負空間。

裝飾花邊:英文后綴一般帶Ornament,這種類型的字體一般比較少見,只要一個字體的字庫做到比較全的時候,才會考慮開發(fā)類似的字體。這個可以理解為字體類的素材,一般的應用場景比較少。

老式數(shù)字:英文后綴一般帶Oldstyle Figures,比較明顯的特征是高低不一樣,這類型的字體一般應用在小寫字母的編排中讓數(shù)字看起來更和諧。

標題專用字:英文后綴一般帶Titling,這類型的字體在放大后使用看起來比較精致,細節(jié)相對比較豐富,但是也有特殊的,例如Caslon字體的標題字用的是540的后綴。所以當找不到的時候我們可以通過細節(jié)去分辨。

1.15字體家族/字族的字重


  字重的選擇一般是根據(jù)當前的選擇的字體去跳兩個字重去選擇,這樣才會有對比。字重也是我們設(shè)計中常用的選字模式。

1.16字體家族的用途


    我們認識了字體家族對我們做設(shè)計有什么作用呢,一個字體家族越全面,我們做設(shè)計是可以選擇的范圍就越大,也就越方便,所以我們接到需求,需要選擇字體排版的時候,大致看下字體家族,就可以分辨出這款字體是否適合我們?nèi)ナ褂谩?

需要做好文字組合的編排的基礎(chǔ)是需要選擇合適的版面氣質(zhì)的字體和相對應的中英文混合編排。


2.10中文字體的編排


     中文字體屬于方塊字,具有字體的輪廓性,并且每個字符占據(jù)的空間都是相同的,限制較為嚴格,如段落開頭必須空兩格,豎排文字必須從右到左等規(guī)則。中文字體是一種非常規(guī)整的文字,因此靈活性相對較小,編排難度較大。

2.11西文字體的編排


     一般情況下,英文字體采用流線型方式,靈活性很強,能夠根據(jù)版面的需求靈活變化字體的形態(tài),以解決版面僵硬、呆板的問題,創(chuàng)造出豐富生動的版面效果。

2.12中西文混合編排


     在版式設(shè)計中,經(jīng)常會遇到中英文對照的情況。中文字體的象形、會意等特征和英文字體的簡單、圖形化的特征充分結(jié)合,展現(xiàn)兩種字體的優(yōu)勢。編排時應該注意中文字體與英文字體的設(shè)計創(chuàng)意與主次關(guān)系,做到層次明確,并且要注意字體的統(tǒng)一性,如果字體變化過多,很容易造成版面的混亂。

2.20西文的演化歷程


   我們在聊中西文的編排之前我們需要先了解下西文的歷史,就像我們在打王者榮耀一樣,要學習某個英雄,就先得了解英雄的技能,然后才是這些技能怎么去搭配使用,學習文字組編排也是一樣的道理。

      設(shè)計的目的一般是為零解決一些生活中的問題,字體的演化設(shè)計之路也是一樣的,都是通過外部能力能觸達的能力加上內(nèi)部的需求所達到的最優(yōu)的解決方案。現(xiàn)在我們將西文字體在歷史上的進程可以分為“文藝復興體” “古羅馬襯線體”“過程型襯線體”“粗襯線體”“無襯線體”。

2.21西文的基礎(chǔ)款字體


   我們可以大致簡單的把基礎(chǔ)款的字體分為兩種,一種是一種是襯線體和無襯線體,襯線體(Caslon,Baskeville,Bodoni,Didot,Garamond,),無襯線體(DIn,Helvetica),

  • 襯線體

Garamond是一個早期字體,有老式數(shù)字,雕刻感比較強,有傾斜體,

Baskeville修飾比Garamond要粗點,稍微有點厚重感,偏向優(yōu)雅,特征明顯,

Bodoni筆畫有明顯的過度,比較現(xiàn)代,

Didot比較常見,特征更明顯,現(xiàn)代感更加強,女性感強,多用品牌,雜志,簡化大膽。筆畫對比更加大,出現(xiàn)的比較晚

  • 無襯線體

Helvetica,特征,比較平穩(wěn),沒有特征,沒有華麗的裝飾,在國外特別受歡迎

DIN,和Helvetica區(qū)別:變化性特殊,切口有角度性的變化,更加簡單干凈。偏向美術(shù)字體數(shù)字的幾何形強,比較抓眼球

Futuer:菱角分明,幾何無襯線體,冰冷,升部比較高,比較高挑,多用于科技感比較足的設(shè)計中。

因為基礎(chǔ)款的字體很多字體公司都會去做,我們可以通過谷歌可商用字體庫去尋找免費字體尋找:http://www.googlefonts.net/


2.22中文的基礎(chǔ)款字體


中文的基礎(chǔ)款排版字體一般為黑體,宋體,圓體,楷體和一些風格多變的美術(shù)體。

  • 襯線體

最早是為適應印刷而出現(xiàn)的一種漢字字體,筆畫粗細有變化,而且一般是橫細豎粗,末端有裝飾部分,(即字腳,襯線),點,撇,捺,鉤等筆畫有尖端,屬于襯線字體,常用于書籍雜志報紙等正文排版,趙集,瘦金體。

思源宋體,前身是小塚明朝體改進的,筆畫特征比較相似,小塚明朝橫筆畫要細點,思源宋體橫筆畫要粗點。

  • 無襯線體

黑體,屏顯字體,無論放大還是縮小都能看的清晰,黑體可塑性比較強,常用于標題字的制作,小的可以作為內(nèi)文,黑體有稱作方體或者等線體,沒有襯線裝飾,字形端莊,筆畫橫平豎直,筆跡全部一樣粗細,結(jié)構(gòu)嚴謹醒目,筆畫粗壯有力,撇捺等筆畫不尖銳,使人易于閱讀。由于其醒目的特點,常用于標題,導語,標志等。

思源黑體:是最廣泛知道的字體,質(zhì)量高,7個字重,

漢儀旗黑:可以滿足所有的排版的需求,寬窄系統(tǒng)也有。


2.30無襯線體和襯線體的應用場景


     在我們?nèi)粘5脑O(shè)計工作中,襯線體和無襯線體該怎么選擇呢?我相信很多設(shè)計師都在這個問題上糾結(jié)過。我們來結(jié)合歷史來看看這個問題吧

2.31巴洛克時期和洛可可時期


     我們把時間倒退到歐洲17-18世紀,這個時期盛行一種藝術(shù)“巴洛克藝術(shù)”和“洛可可藝術(shù)”,巴洛克是一種更早期的宏大而華麗的藝術(shù)風格,后世有人將洛可可風格看作是巴洛克風格的晚期,即巴洛克的瓦解和頹廢階段。它產(chǎn)生在反宗教改革時期的意大利,發(fā)展于歐洲信奉天主教的大部分地區(qū),以后隨著天主教的傳播,其影響遠及拉美和亞洲國家。巴洛克作為一種在時間、空間上影響都頗為深遠的藝術(shù)風格,其興起與當時的宗教有著緊密的聯(lián)系。然而它不僅在繪畫方面,巴洛克藝術(shù)代表整個藝術(shù)領(lǐng)域,包括音樂、建筑、裝飾藝術(shù)等,內(nèi)涵也極為復雜。

     基本的特點是打破文藝復興時期的嚴肅、含蓄和均衡,崇尚豪華和氣派,注重強烈情感的表現(xiàn),氣氛熱烈緊張,具有刺人耳目、動人心魄的藝術(shù)效果。所以它代表那個時期最流行風格。同時我們可以看看那個時期所產(chǎn)生的字體,也是一樣浮夸,裝飾性明顯。

2.32現(xiàn)代主義設(shè)計風格


     我們在把時間撥20世紀德國,一所代表著現(xiàn)代主義設(shè)計風格的學校誕生了,包豪斯學院,德國魏瑪市的 “公立包豪斯學?!保⊿taatliches Bauhaus)的簡稱,后改稱“設(shè)計學院”(Hochschule für Gestaltung),習慣上仍沿稱“包豪斯”。在兩德統(tǒng)一后位于魏瑪?shù)脑O(shè)計學院更名為魏瑪包豪斯大學(Bauhaus-Universit?t Weimar)。它的成立標志著現(xiàn)代設(shè)計教育的誕生,對世界現(xiàn)代設(shè)計的發(fā)展產(chǎn)生了深遠的影響,包豪斯也是世界上第一所完全為發(fā)展現(xiàn)代設(shè)計教育而建立的學院。包豪斯風格成為了現(xiàn)代主義風格的代名詞。

    而包豪斯的設(shè)計理念:把簡單的問題把形成標準化,強調(diào)一些構(gòu)成上的東西,所以在這種觀念的影響下,就產(chǎn)生了一些非常好看的無襯線字體。

而在現(xiàn)代化風格的影響下,產(chǎn)生出了工業(yè)衍生品也非常簡約,現(xiàn)代。

2.33字體該怎么選擇


     做設(shè)計是一個入世學,所有的問題都需要結(jié)合現(xiàn)有的場景來看,我們上面聊完每個時期藝術(shù)熏陶下所產(chǎn)生的字體,那么我們結(jié)合實際情況來看下,我們和我們的父母都是在不同文化體系下所產(chǎn)生不同審美觀的人。左邊度圖是我們絕大數(shù)父母喜歡的裝修風格,像洛可可那時候一樣浮夸,而我們卻喜歡簡約的現(xiàn)代風格。

     那么字體也是一樣的,有襯線的字體屬于比較古典的氣質(zhì),簡約的無襯線字體則是比較現(xiàn)代的工業(yè)風。

2.34中西文襯線體的分類


     也不是所有的襯線字體都是比較古老的,而Didot這款字體因為它造型的特性,也會經(jīng)常出現(xiàn)在雜志封面和一些奢侈品的設(shè)計中。從時間的角度來講,最有歷史痕跡的是括弧線襯線又稱古典型襯線,其次是過渡型襯線到粗襯線,最現(xiàn)代的就是極細型襯線。

而中文的襯線體沒有明確的區(qū)分,但是我們可以根據(jù)字體特征按照西文的類目去區(qū)分。

2.35中西文無襯線體的分類


  那上面談到,不是所有的襯線體都代表古典或者歷史的厚重感,所以無襯線體也不是根據(jù)出現(xiàn)時間和之前的應用場景也是有區(qū)分的。


  西文的無襯線體分為傳統(tǒng)型無襯線,人文主義無襯線,和現(xiàn)代主義無襯線(幾何形無襯線),傳統(tǒng)型無襯線的G開口的地方都是水平的,開口的地方也比較小,看起來比較保守,母A它的筆畫是由粗到細,落差不是特別的大,字體造型也比較穩(wěn)重。人文主義無襯線它慢慢的開始出現(xiàn)一些傾斜的特征,這樣它的開口處可以做的更大一點,它的負空間也會更大一點,字母A為了讓它的負空間也就是字谷變的更大,它的筆畫粗細變的更大了,手寫的感覺會更多一點,現(xiàn)代主義無襯線體字母G它不僅開口要大,而且還有很多圓形切割的特點。幾何的特征會更濃厚一點,我們把這個特征稱為幾何型無襯線字體。

   中文的無襯線則分為傳統(tǒng)型無襯線,中間無襯線,現(xiàn)代型無襯線。在漢字的黑體里,分為2類字體,一類是有喇叭口的,一類是沒有喇叭口的,喇叭口的造型特征是在筆畫的轉(zhuǎn)折或筆畫造型豐富的地方會有一些向里面凹陷或微微凸起的造型特征,沒有喇叭口的字體特征是在任何筆畫造型都收拾的比較干凈利落。像傳統(tǒng)和中間型無襯線都是慢慢像現(xiàn)代型無襯線演化,喇叭口慢慢的演化成工業(yè)的切口風。

2.36怎么去選擇字體


   字體的選擇我們應該基于合適的主題,合適的用字場景以及使用平臺或者場景,這樣才可以選出合適的字體。

合適的主題:這點適用可以在運營設(shè)計或者平面設(shè)計中,我們接到的需要適用何種風格,例如國潮肯定會選用毛筆字這種張力比較強的字體,在例如比較有工匠精神的工藝品可以選用有手工感的宋體字。

合適的用字場景,看選用的字是用在標題還是還是正文,標題字可以選用張力比較強的字體,因為標題的文字需要醒目,可以直接傳遞版面需要表達的主題,而正文需要閱讀文本則選擇無個性的黑體比較合適。

適用的平臺,設(shè)計展現(xiàn)的平臺也是對字體選用的影響的關(guān)鍵因素之一,例如在iOS上選用蘋方字體,安卓上選用思源黑體,PC選用微軟雅黑都可以減輕開發(fā)打包的大小。

2.37中西文如何搭配


  我們?yōu)槭裁匆鲋形魑牡哪俏覀冊谥形魑拇钆涞臅r候應該怎么去搭配呢?下面是我總結(jié)的三個方向:

1.細節(jié)類似,細節(jié)類似我們可以觀察字體的細節(jié)進行搭配

2.時間相同,就是在某一個時間節(jié)點下同時產(chǎn)生的兩款字體。

3 .氣質(zhì)相同,這個是在漢字里面才有的,我們常見的字體除了宋體和黑體外,還有是書法字體或手寫體,這類型的字體在通常是不太好搭配字體的。

那要是原字體的西文不太好看,我們怎么去搭配呢?、

  • 外形類似

帶有這種轉(zhuǎn)角圓滑的裝飾線的宋體字我們一般是搭配古典型的襯線體,這樣搭配起來會更舒服,或者漢字的黑體搭配西文的無襯線體,因為它們特征是一樣的,然后就是中文的圓體也同樣會搭配一個西文的圓體,這些都是細節(jié)類似的搭配方法。

  • 時間相同

是看筆畫相似來匹配的,我們可以看到下面這個中文的筆畫特征是帶有喇叭口,這種類型的黑體很明顯是印刷工業(yè)時代的產(chǎn)物才會有的特征,而右邊的西文是粗襯線字體,也是帶有工業(yè)時期復古的感覺,而且產(chǎn)生的時間也是比較近似的,一個是20世紀左右產(chǎn)生的字體,一個是19世紀產(chǎn)生的字體,這兩款字體搭配在一起可以凸顯工業(yè)感,穩(wěn)重感,復古感都有,這也是時間匹配法。

  • 氣質(zhì)相同

    例如在中國像楷書字體的特征獨特,但是英文的字體沒有類似特征的字體,所以楷書和宋體在中國都可以列為書法體,在氣質(zhì)上是相同的,所以搭配在一起也是比較常見的。

另外我也總結(jié)了一些常用的字體搭配方法,放在下圖了,這些只是給大家平常搭配字體時候的一個參考依據(jù)。

     

    我們在日常的的設(shè)計工作中,無論是哪種設(shè)計,都會涉及文字組的編排,我們可以觀察到一般的文本分兩種組合,一種是標題文本+說明性文本。

標題文本主要放置版本需要傳遞的重要信息,說明性文本是輔助傳遞標題文本的含義。

3.10文字組編排的對比基礎(chǔ)


對比廣泛的存在于我們的生活中,對比的形式也是多種多樣的,例如身高的高矮對比,體重的胖瘦對比,速度的快慢對比等等。在設(shè)計領(lǐng)域內(nèi),對比是最常出現(xiàn)的形式。對于信息來說,適當?shù)膶Ρ瓤梢宰屝畔蛹壐忧逦髁?,同一層級的信息更加豐富。對于畫面整體來說,恰當?shù)膶Ρ瓤梢院芎玫闹圃斐鼋裹c(畫面主體)當我們需要突出某一個元素的時候,其他的元素相應的就要做出對比關(guān)系,才能保證主體的突出。

3.11字號對比

      字號對比是最快可以提現(xiàn)內(nèi)容層級關(guān)系的一個設(shè)計點,一個版面里面不會有太多的文字層級,一般保持在3-5個層級,大部分的軟件都會自己自帶的推薦字號,為什么最小的字號是6號,因為印刷里是可視的極限。

3.12設(shè)計中常用的字號對比


常見的字號比例有1:1.5,1:1.618,1:1.732,1:2等等。這些比例在正常使用能很快可以做出層級關(guān)系且不會有特別大的問題。例如1:1.618是黃金比例,也是很多植物生長的規(guī)律,符合人正常的審美感受。

3.13行距對比


行距比例如果沒設(shè)置合適,對閱讀會造成影響,很容易造成眼睛是視覺疲勞,看來不舒服且文本不容易閱讀。

當行距設(shè)置到合適的時候, 我們閱讀起來會比較舒服,也會提高閱讀效率。

行距的設(shè)定也可以套用固定的算法:字號*倍率=行距。

3.20行距對比的作用


    我們在日常的設(shè)計工作中,當行距調(diào)整到比較合適的大小的時候,版面會具備層次感 ,但超過一定限度也不太好。那行距的調(diào)整具體有哪些用途呢,1.平衡版面,2.閱讀效率

3.21平衡版面

     例如現(xiàn)在整個版面看起來比較輕盈,那么我們可以選擇一個比較大的行距,因為中間的空比較多,所以看起來并沒有那么重。例如我們現(xiàn)在的版面非常重,我們需要平衡他,那我們的行距就可以給近一點,讓文本塊在視覺上更重,這就是平衡的作用。

3.22閱讀效率


    行距的設(shè)定大小會影響我們閱讀的效率,例如行距比例小的,一般用在標題文本,因為標題的文本一般需要我們快速閱讀并了解清楚。

3.30字距的作用

字距大設(shè)定也對人的閱讀也會有影響,字據(jù)過大的時候像樹懶說話一樣慢,字據(jù)小的時候感覺說話比較快。

當字距是-800時候的感受,感覺想動漫里的樹懶一樣,說起話來慢吞吞的。

當字距是--100時候的感受,感覺像和人在吵架一樣,說話的語速比較急切。

在一般的平面設(shè)計中字據(jù)設(shè)定為正負40-70之間去選擇,但是在UI設(shè)計中,字距一般為0.


3.31中宮對字距對影響


   同時字距也會受到中宮的影響,在同字號的情況下,微軟雅黑會比其他字號大一號,中宮越大,字面也會越大,因為筆畫外擴,中宮大的字體,字面大,默認間距小

   中宮大的字體,字面大,默認間距小,他的字距可以給大點,中宮小的字體,字面小,默認間距大,他的字距可以給小點,


3.32文本性質(zhì)對字距對影響


例如平方字體,正常0間距做內(nèi)文會比較舒服,但是作為標題,調(diào)了之后會讀起來比較連貫。


3.33字體形狀對字距對影響


     無論是西文還是漢字,他的形狀都會不一樣,有圓形的,正方形的,三角形的等等,不同的形狀,負空間是不一樣的,不同的字號是需要微調(diào)字距的,我們需要軟件視覺來調(diào)整。

在AI中有個功能是基于視覺對齊,我們開啟便可以解決這個問題。


3.40欄寬的設(shè)定


    分欄的寬度,決定了一行的長度和字數(shù),當欄寬太長的時候,我們閱讀可以會比較吃力,總感覺一眼看不到頭。

      一行多少字合適呢?一般的是20-30字之間,極限是15-30之間比較合適,一行字太少和太長都會讓人很累,,這也是為什么有的書為啥讀不下去的原因。

這也是為什么很多娛樂消遣方便的書一頁的字很多,也是為為了提升閱讀的興趣。

     文字設(shè)計的成功與否,不僅在于字體自身的書寫,也在于其運用的排列組合是否得當,文字層級之間的關(guān)系,適用規(guī)則,欄距>行距>字距。


3.40字重平衡

   上面的舒服,因為粗細對比比較平衡,下面面的對比過度,什么時候下可以做強對比呢?做了字號對比,就不要做過大的字重對比,

  3.50/知句逗


    在現(xiàn)在的板式設(shè)計中,有一個被忽略的知識點,就是標點符號。標點符號在當今社會不僅僅是用來斷句,也是可以用來傳遞情感,例如下圖,同一句話因為加了不同的標段符號,所傳達的意思就完全不一樣了。

    所以標點符號的運用與文字組的編排在板式設(shè)計中同樣的重要,例如在聊天的時候,我們隨意的時候的問號在正式排版中,“!”和“?”的疊用不能超過3個。

   你一句話表達驚訝和疑問的時候,我們應該將問號放在前面感嘆號放在后面。

例如有書名號的文本段是不在需要用頓號去隔開的,如果當書名號后面有括號則是需要用標點符號去把他們分割開來的。

   當然還有就是逗號和不能在一段的前面等等,這些都只是給各位小伙伴一些拓展知識,有興趣的小伙伴如果想自己的板式更加規(guī)范可以自己去查閱相關(guān)資料。



     梳理信息層級有哪些作用呢?我們在自然界中會發(fā)現(xiàn)很多與階級有關(guān)的現(xiàn)場,例如狼群里,一般都會有頭狼,也叫狼王,主要是統(tǒng)領(lǐng)狼群的行動及群體意識,在企業(yè)中,老板作為一個公司的核心人物,一般正常的普通員工去離職,不會影響公司的正常運作,但是如果涉及到公司的老板不知下落或者企業(yè)的核心管理層離職,會對公司的股價和正常的業(yè)務流程造成很大的干擾。

     在我們?nèi)粘TO(shè)計中編排文字組也是一樣的,我們首先需要確定接到的需求哪些是重要且關(guān)鍵的信息,哪些是次要信息。當它的重要層級越高,他在版面中所扮演傳遞信息的角色就越重要,我們接下來便是通過設(shè)計手法,例如通過字距,筆畫粗細,顏色,以及字體等等來做出層級的區(qū)分。

那我我們一起來看看實際的案例吧!


4.10 梳理信息層級梳理的作用


    梳理信息層級有哪些作用呢?我們在自然界中會發(fā)現(xiàn)很多與階級有關(guān)的現(xiàn)場,例如狼群里,一般都會有頭狼,也叫狼王,主要是統(tǒng)領(lǐng)狼群的行動及群體意識,在公司中,老板

1.首先是它會便于傳遞信息的中心思想,有助于用戶快速理解,所以一般大標題文字很對都會做效果,有助于提升視覺的焦點,2.信息層級分明,主次有序的在版面中傳遞信息,3.降低視覺噪音:當版面中的文字信息案例主次有序的排列后,版面看起來比較和諧,所有的元素感覺是本應該就在那里的。

如果信息層級沒有梳理過的版面,則會閱讀起來非常的吃力卻效率低下。


4.11  閱讀中的節(jié)奏感與心理引導


      關(guān)于文字編排節(jié)奏感,很多人應該好奇了節(jié)奏不是音樂的范疇嗎?怎么文字編排也說有節(jié)奏嗎了?

      其實節(jié)奏感隨著地球開始有生命開始便存在了,因為太陽升起到落下是有著自己每天固定的節(jié)奏的,太陽升起人開始勞作,看著周圍的動物和植物都一天天有變化,感受著自己由青澀稚嫩到遲暮之年;這些有規(guī)則的事物形成的固有的節(jié)奏。

    在文字編排中也可以感受到這樣的節(jié)奏,例如,字體是直線還是曲線,垂直還是水平,傾斜還是正立,緊湊還是寬松,對稱還是不對稱……這些都體現(xiàn)著文字的節(jié)奏。段與段之間的留白多少,字間距的大小都是有規(guī)律可以尋找的,如果文字組合被有規(guī)律的設(shè)計、排版,那在設(shè)計稿中本身就具有了一種節(jié)奏感的吸引力。沒有節(jié)奏就不會有生命,也不會有任何創(chuàng)造。


4.12  什么是文字組的節(jié)奏感


    好聽的因為是因為音樂的節(jié)奏會有起有伏,有前奏有副歌有高潮部分,這樣的音樂才不會讓人覺得平淡,我們轉(zhuǎn)換到文字組編排也是一樣的道理,當我們把一些沒有節(jié)奏感的書籍拿出來看是會覺得很困的。

     如果我們加以設(shè)計的手法,把文字組合好好的排版一下,這是可以提升我們對內(nèi)容的閱讀興趣的。例如我們閱讀的雜志和一些資訊類的APP,他們對文字和圖片的排版就會很下心思。

       那我們怎么打造自己設(shè)計中的節(jié)奏感呢?那接下來我們聊聊怎么通過閱讀視線心理去引導用戶。首先是基礎(chǔ)的視覺邏輯,讓用戶漸入佳境,通過常規(guī)的的閱讀習慣,其實是根據(jù)大小、色彩、線的指向去引導用戶的視線節(jié)奏,其次是視線引導,根據(jù)用戶的常用邏輯打造版面中的節(jié)奏感。


4.20 視覺邏輯


    我們平時在看版面的時候的視線觀看邏輯是怎么確定的呢?1.根據(jù)日常的書寫邏輯:我們看圖習慣和我們?nèi)粘5臅鴮懥晳T是密不可分的,一般是從左至右,從上到下,所以我們很少會看到從右往左的排版和從下往上的排版,因為這樣的不符合人的邏輯,

    因為每個人都心理感受都不一樣,所以當視覺引導不一樣的時候,傳遞的感受也是不一樣的,文字組合的目的是為了增強其視覺傳達功能,賦予審美情感,誘導人們有興趣地進行閱讀。因此,在組合方式上就需要順應人們的心理感受。人們的一般閱讀順序是:水平方向上,視線一般是從左向右流動;垂直方向上,視線一般從上向下流動;大于45°斜度時,視線從上而下流動;小于45°時,視線從下向上流動。  


4.21  閱讀順序和文字的關(guān)系


  板式的閱讀順序有兩種:從左到右和從右到左。這是人們平時慣性的限制,就好像寫文章一樣,一旦決定了從左到右寫,就不會更改,板式也是如此,一旦決定了板式的閱讀順序,許多元素都會隨之被限制。

  • 橫排文字

正常我們?nèi)ラ喿x橫排文字就是先從左到右,從上到下的規(guī)律去閱讀。

  • 豎排文字

豎排文字的閱讀順序是從上到下,整體在從右上至左下。我們無論是橫排版還是豎排版,行距都是要大于字距的。






4.22  通過閱讀邏輯引導視覺


     版式設(shè)計的核心就是吸引人的視線。當我們在觀看某些東西時,大部分的人都有自己習以為常的觀看習慣。人們往往在一瞬間就會判斷出這是什么?這一現(xiàn)象導致的結(jié)果是人們會想起與所看到的東西相近的信息,并判斷畫面中信息的價值,我們將這種心理傾向稱之為視覺心理。視線的引導是建立在視線的移動之上的,在引導視線前,我們需要先建立焦點。

4.23  閱讀中的視覺聚焦


       視覺聚焦是在文字組編排中先建立視覺的突破口,然后就再去引導其他的內(nèi)容。設(shè)計師,有一個重要的瓶頸就是,無法在版面中快速的傳達主題的中心思想,明明什么信息都有,就是讓人抓不住重點。如何一秒吸引別人的注意力,快速get要表達的點?那就是需要在版面中埋下引導別人實現(xiàn)的點。

4.30  如何進行視線對比引導


引導方式可以根據(jù)版面現(xiàn)有的內(nèi)容做大小層次對比,顏色對比,空間對比及元素具有的特有指向性。

4.31  大小對比


   人們在日常生活中,通常會先注意到大的東西,在有較大的元素在版面中,我們的視線往往會向大的元素是聚集,從大到小,這樣一步一步的去看,在版面設(shè)計運用這樣的小技巧,我們閱讀起來相對來說比較順暢。特別是當兩件物體顏色或材質(zhì)相同的時候,視線往往會集中在大的物體上。根據(jù)這一原理,應該盡量放大希望吸引讀者注意的東西。


4.32  色彩對比


   通過有序的色彩的引導視線是版式設(shè)計中不可或缺的主要元素,同時也頻繁應用于視覺引導中。色彩的心理效果在視覺引導中的運用就是:人的目光首先會注意眾多色彩中不同的那一個。例如下圖中,當色彩是藍色的時候,是沒有焦點的,當出現(xiàn)別等顏色是特別吸引人的目光的。

然后在加上大小的對比之后,吸引我們眼球的肯定是下面這個大圓形。

如果在下面這個大圓形去改變顏色,這個便會更加大吸引人

其次是亮明度高的顏色比明度低的更吸引人的目光。

暖色調(diào)比冷色調(diào)會更加吸引人

4.33視覺吸引力的關(guān)系


   我們正常的瀏覽順序是從左至右,從上至下,那當我們怎么打破這個順序呢?首先是暖色>冷色,明度高>明度低的,元素大的>元素小的,那下圖我們?yōu)g覽順序應該是先看紅色,在上面開始看,其次是右邊和下方。


4.40視線的引導


引導是一種視覺的語言。一幅好的設(shè)計作品,用戶的視線一定是被控制在主體和興趣點上,而不是被其他與主題無關(guān)的雜物所吸引,只要用好視線的引導,才可以傳遞我們想傳遞的。


4.41 元素的指向性


    當版面中出現(xiàn)箭頭或者人臉等相關(guān)指向性的圖片或者元素出現(xiàn),是因為古希臘畢達哥拉斯學派和柏拉圖認為眼睛在捕捉物體時,視線、目光和力量會以物體為目標,從眼睛向物體方向傳送,把這一想法用設(shè)計原理來表示時。這時候的帶有指向性的圖片或者元素,便是視覺的切入點。


4.42 線的引導


線作為板式中的引導,也是非常常用的,它既可以作為引導視線的切入點,也可以填補畫面中的空白點。

線除了是直線,還可以是曲線,文字組成的線或者負空間形成的線,都是具有引導視線的作用。


4.43 向下一數(shù)字移動視線


   我們從小在學校學習了數(shù)字的大小順序,在在考試時,我們會順著考生號找座位,坐車時順著車票找座位。我們生活中還有很多地方會應用到編號。所以我們的目光會隨編號移動,是因為我們一直就有這樣的習慣。如果看到1,就自然會找2,看到A會去尋找B,視線就會這樣一直移動下去。

     設(shè)計離不開構(gòu)圖,構(gòu)圖通俗地講:就是為了表現(xiàn)畫面的主題思想,而對畫面上的人或物及其陪體、環(huán)境作出恰當?shù)?、合理的、舒適的安排,并運用藝術(shù)的技巧、技術(shù)手段強化或削弱畫面上某些部分,最終達到使主題形象突出,主體和陪體之間的布局多樣統(tǒng)一,畫面疏密有致,以及結(jié)構(gòu)均衡的藝術(shù)效果,使主題思想得到充分、完美的表現(xiàn)。

當我們把文字組編排好了,可以通過構(gòu)成形式將他們串聯(lián)起來,這才是好的排版,能快速想到版面的效果。


5.10 居中構(gòu)圖


     居中構(gòu)圖是最常見的構(gòu)圖,指的是將畫面的主要元素放置在版面的中軸線上,目的是快速吸引眼球,占據(jù)視覺焦點,突出主體。中心構(gòu)圖的版式簡潔、利落,給人以雅致的視覺感受。在突出主體的同時又能賦予畫面穩(wěn)定感,并使整體畫面具有一定的沖擊力,需要表現(xiàn)規(guī)整穩(wěn)定、醒目大方的版面時,可以使用居中構(gòu)圖。其次對稱構(gòu)圖是居中的一種特例。


5.11 對稱構(gòu)圖


       對稱的形態(tài)在視覺上有自然、安定、均勻、協(xié)調(diào)、整齊、典雅、莊重、完美的樸素美感,符合人眼的視覺習慣。平面構(gòu)圖中的對稱,可分為點對稱和軸對稱。在平面構(gòu)圖中應用對稱法則要避免由于過分的絕對對稱而產(chǎn)生單調(diào)、呆板的感覺。有時,在整體對稱的格局中加入一些不對稱的因素,反而能增加構(gòu)圖的生動性和美感,避免了單調(diào)和呆板。能夠突出主體,聚焦視線,當制作的圖片沒有太多文字,并且展示主體很明確的情況下,可以使用對稱構(gòu)圖,在電影海報中也是比較常見的。


5.12 傾斜構(gòu)圖


     斜線式構(gòu)圖又稱傾斜構(gòu)圖,是將文字或者主體物以傾斜的方式放置在版面當中。傾斜的角度產(chǎn)生勢能,給人以引導作用。優(yōu)化視覺層級,清晰的傳遞信息。讓比較呆板的畫面具有活力和生機,當制作的版面需要沖擊、不穩(wěn)定效果時,可以使用傾斜式構(gòu)圖,需要沖擊感和不穩(wěn)定感時可以嘗試,也可以做透視,讓他有近大遠小的空間感。


5.13 S/Z型構(gòu)圖


   曲線式構(gòu)圖指的是版面中重要元素呈曲線排布,其他元素填充剩余空間,曲線具有靈活的屬性。其中“S”形狀從前景向中景和后景延申,畫面構(gòu)成縱深方向的空間關(guān)系的視覺感,所以曲線構(gòu)圖的版面常常顯得充實、熱鬧、生動、空間感。具有曲線的優(yōu)美而富有活力和韻味,需要有力的表現(xiàn)場景的空間感和深度時,可以選擇S形構(gòu)圖,例如瑜伽海報。

要表現(xiàn)畫面的空間感和縱深感也可以用S型購物,這也是S型構(gòu)圖的特性,讓畫面更有空間感。


5.14 壓腳構(gòu)圖


    壓角式構(gòu)圖適用于標題字數(shù)較少的版式設(shè)計,標題作為絕對重要的元素放置四角,一眼就能被看到。要做好壓住四角的版式設(shè)計得進行網(wǎng)格構(gòu)架,控制好版面之間的比例。這種構(gòu)圖形式使得畫面更加穩(wěn)定,突出中心主體。


5.15 散點構(gòu)圖


    散點式構(gòu)圖是指主體數(shù)量較多,散落在畫面當中的構(gòu)圖方法。在應用散點式構(gòu)圖時應防止散亂,宜用隱性結(jié)構(gòu)線或結(jié)構(gòu)形將各個“點暗連起來,相互呼應形成聯(lián)系?!边m用于標題文字稍多的平面版式設(shè)計。文字排布時,拉開字的間距,在版式上化作為元素。標題文字的縱向距離要大于橫向距離,否則容易誤導閱讀順序。當文字信息比較多的時候,可以選擇散點構(gòu)圖。


5.16 三分法構(gòu)圖


    三分法是一條法則,同時也不是一條規(guī)則。 這個說法很拗口,我們來理解一下。 從本質(zhì)上講,它就是我們的眼睛自然感知圖像的方式,這些圖像被限制在一個邊界之內(nèi)(例如畫框)。 這些框架,都有一個固定的長度和寬度; 將這兩個屬性分別分成三個相等的部分,這會包含兩條水平和垂直穿過框架的等距線,形成四個線相交的點,并創(chuàng)建九個相等大小的框架,如下圖的九宮格。

     而當版面的主要元素分布在三分線或點上,多數(shù)人會感覺這個畫面會比較和諧舒服,這接近是一種天性和本能了。當然,你還可以舉例說很多不是三分構(gòu)圖的例子來反駁我,但這不重要,只要你要知道大部分遵循三分法構(gòu)圖的畫面看著都是比較舒服的事實就行了。


6.10 總結(jié)


    古時候的文人墨客的門檻是“知句逗”,我個人覺得設(shè)計要想入行設(shè)計的門檻便是最基本的文字組的編排,

我們的感覺,即我們的視覺和我們的美感,優(yōu)于幾何結(jié)構(gòu),當我們在處理黑白對比的平衡時,我們必須訴諸感,

在文字組的編排中,其中包含的技藝、功能和形式設(shè)計是絕對不能分開的。當我們作為設(shè)計師,做好每一處設(shè)計的細節(jié),也是對觀看版面用戶最基本的尊重吧!

文章來源:優(yōu)設(shè)   作者:Endings

藍藍設(shè)計m.sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務

分享本文至:

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://m.sillybuy.com

存檔