<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          十個UI設計小套路

          seo達人

          十個UI設計小套路


          前兩天一個從事UI設計的朋友問了我一個這樣的問題:我從事UI設計一年多, UI設計上的一些基本知識差不多已經掌握,但是想更進一步的提升下自己,讓自己的作品更加有優秀,但不知道從哪里入手?胡老師有沒有什么好的建議。今天給大家分享十個UI設計套路!

          1 盡量使用單列而不是多列布局

          單列布局能夠讓對全局有更好的掌控。同時用戶也可以一目了然內容。而多列而已則會有分散用戶注意力的風險使你的主旨無法很好表達。最好的做法是用一個有邏輯的敘述來引導用戶并且在文末給出你的操作按鈕。



          2 放出禮品往往更具誘惑力

          給用戶一份精美小禮品這樣的友好舉動再好不過了。具體來講,送出禮品也是之有效的獲得客戶忠誠度的戰術,這是建立在人們互惠準則上的。而這樣做所帶來的好處也是顯而易見的,會讓你在往后的活動進展(不管是推銷,產品更新還是再次搞活動)中更加順利。



          3 合并重復的功能而使界面簡潔

          在整個產品開發期間我們會有意無意地創建很多模塊,版面或者元素,而它們的功能可能有些是重疊的。此種情況表明界面已經過度設計了。時刻警惕這些冗余的功能模塊,它無用且降低了電腦性能。此外,界面上模塊越多,用戶的學習成本就越大。所以請考慮重構你的界面使它足夠精簡。

          4 客戶的評價好過自吹自擂

          在獲得項目機會或提高項目轉化率時客戶的好評是一種極為有效的手段。當潛在客戶看到其他人對你的服務給予好評時,項目機會會大增。所以試著提供一些含金量高的證據證明這些好評是真實可信的。



          5 頻繁展示你的主旨來加深印象

          多次重復主旨口號這種方法適用于界面很長或者分頁的情況。首先你肯定不想滿屏刷出相同的信息,這樣會讓人生厭。但當頁面足夠長的時候這些重復就顯示自然多了并且也不顯得擁擠。所在在頁面頂部放一個按鈕然后在頁面底部再適當放個突出的按鈕的做法沒有什么不妥。這樣當用戶到達頁面底部在思考接下來該做什么的時候,你提供的按鈕就可以獲得一個潛在的合同或者即使用戶不需要你的服務這個按鈕也可以起到過濾的作用。



          6 將選項與按鈕區分開來

          諸如顏色,層次及模塊間的對比這些視覺上的設計可以很好地幫助用戶使用產品:他時刻知道當前所處的頁面以及可以轉到哪些頁面。要傳達這樣一個好的界面,你就需要將可點擊的元素(比如連接,按鈕),可選擇的元素(比如單選多選框)以及普通的文字明顯區分開來。在下圖的例子中,我將點擊操作的元素設置為藍色,選中的當前元素為黑色。這樣適當的設計可以讓用戶很方面地在產品的各模塊間切換。但千萬不要把這三種元素設計得混亂不堪。



          7 給出推薦而不是讓用戶來選擇

          當展示許多項服務時,給出一個重磅的推薦項是個不錯的做法,盡管推薦的設置無法滿足所有用戶。這么做是有理論依據的,一些研究已經揭示了這么一種現象:當面臨的選擇越多時,用戶就越難做出決定。所以你可以高亮某個選項來幫助用戶做出選擇。

          8 給出撤銷操作來代替確定操作

          假設你剛點擊了一個連接或者按鈕,撤銷操作可以讓操作流暢自然,這也符合人類的本能。而每次操作都彈一個確定框則好像是在質問用戶你明白不明白這個操作會產生什么后果。我還是更習慣假設用戶每次操作都是正確的,其實只有極少數情況下才會發生誤操作。所以,為了防止誤操作而設計的確認窗口其實是不人性化的,用戶每次操作都需要進行毫無意義的確定。所以請考慮在你的產品里實現撤銷操作來增加用戶的操作友好度吧。



          9 指出產品適用人群而不是做成全年齡

          你是想把產品做成大眾化的呢還是有精確的適用人群?在產品定位上你需要更精確些。通過不斷了解目標客戶的需求及標準,你能把產品做得更好得到更多與客戶交流的機會,并且讓客戶覺得你很專業,在這方面是獨家提供的優質服務。把產品定位得精確的風險就是可能縮小了目標潛在客戶的范圍,也使自身變得不那么全能。但這種做得更專業的精神卻反過來會贏得信任,權威。





          10 試著直接果斷而不要唯唯諾諾

          你可以通過不確定而顫抖的聲音來表達傳遞自己的意思,當然也可以通過很自信的方式表達。如果你在界面中的表述用語多以問號結束,比如"也許","可能","感興趣?" 或者"想要試試么?",那么你完全還可以把語氣變得更堅定一些。不過萬事無絕對,或許適當放松措詞讓用戶有自行思考的余地也是可以的。








          文章來源:知乎


          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

                                                                      微信圖片_20210513163802.png

           

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

           

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務








          UI設計切圖規范

          seo達人

          UI設計切圖規范


          移動UI設計切圖是UI設計師最重要的設計輸出物,切圖資源輸出是否規范直接影響到工程師對設計效果的還原度。設計師的切圖輸出物是是體現一個設計師專業水準的重要標準,同時也是設計師表達自己對設計態度的最有力的語言。合適、精準的切圖可以最大限度的還原設計圖,起到事半功倍的效果。如何輸出具有全局把控和細節專注的高段位切圖,應該是所有設計師一直需要追求的能力。

          設計切圖的原則

          設計切圖輸出的目的是跟下游的工程師團隊協同工作,那么在團隊協作過程中首先應該保證切圖輸出能夠滿足工程師設計效果圖的高保真還原的需求。其次切圖輸出應該盡可能的降低工程師的開發工作量,避免因切圖輸出而導致的不必要的工作量。最后輸出的切圖應當盡可能的壓縮大小,以降低APP的總大小,提升用戶使用時的加載速度。所以切圖輸出應當做到切圖精準、便與協同和壓縮大小。

          1.切圖資源尺寸必須為雙數

          眾所周知智能手機的屏幕大小都是雙數值,比如iphone 7的屏幕分辨率是750*1334px。切圖資源尺寸必須為雙數是為了保證切圖資源在工程師開發時是高清顯示。因為1px是智能手機能夠識別的最小單位,換句話說就是1像素不能在智能手機被分為兩份。所以如果是單數切圖的話手機系統就會自動拉伸切圖從而導致切圖元素邊緣模糊,進而造成開發出來的APP界面效果與原設計效果差距甚遠。



          2.圖標切圖輸出應根據標準尺寸輸出并且考慮到手機適配

          在切圖資源輸出中圖標切圖輸出是至關重要的部分。因為在開發中由于各機型的屏幕分辨率不同,需要針對一些大屏機型進行適配。為了適配大分辨率手機圖標在切圖的時候需要輸出@2x和@3x的切圖,其中@2x的切圖可以滿足雙平臺大部分機型的適配要求,@3x是用來適配iphone手機的各種plus版本的手機(后邊會有文章專門講解關于適配的問題)。@3x是@2x尺寸的1.5倍,例如一個圖標切圖@2x尺寸是44px,那么@3x尺寸是66px。




          3.為了提升APP使用速度,盡量降低圖片文件大小

          在切圖資源輸出中圖標切圖輸出是很重要的部分,比如新手引導頁、啟動頁面、默認圖、廣告圖等。圖片切圖一般情況下文件大小都是相對較大,不利于用戶在使用app過程中加載頁面。因此圖片切圖要盡量壓縮圖片文件的大小。



          4.可點擊部件應當注意其點擊區域不小于88px

          44px的點擊區域數值是在iphone 3 (320×480px)普通顯示屏下制定出來的,在手機分辨率大幅提升的現在,這個數據自然要與時俱進。在iphone11 (750*1334px)的 顯示屏下44px點擊區域就變為了88px。但無論是320*480px尺寸下的44px還是在750*1334px尺寸下的88px,換算成物理尺寸后大致是在7mm-9mm之間。早在人機工程學的研究中曾得出結論,認為人類舒適的觸擊范圍需在7-9mm的大小。所以在ios官方的空間尺寸也經常出現88px的數值,比如菜單欄的高度便是88px。



          5.可點擊部件要把相關狀態都切圖輸出,比如正常狀態、點擊狀態。

          在切圖過程中不僅要輸出正常狀態的切圖,更要注意不要遺漏其他狀態的切圖。這個也是設計師經常會出現的失誤,比如在按鈕切圖的過程中可能會忽略點擊切圖的狀態。所以設計師在做設計圖是最好盡量把頁面中會出現的各種狀態展示出來,避免后期切圖的時候遺漏狀態。



          切圖輸出類型

          1.桌面圖標切圖輸出

          app的桌面圖標會被運用在很多不同的地方展示,比如手機桌面、APP store、手機的設置列表,所以app桌面圖標需要很多個不同尺寸的切圖輸出。兩個平臺對相應桌面圖標設計輸出尺寸也不盡相同,在輸出的時候要把雙平臺的這些尺寸全部輸出切圖。桌面圖標切圖只需要提供直角的圖標切圖即可,手機系統會自動生成圓角效果。



          2.系統圖標切圖輸出

          一套圖適配雙平臺:

          ios平臺和安卓平臺公用44*44px切圖素材,即可實現一套切圖適配兩個平臺的開發。




          適配大屏幕:

          為了適配iphone 6plus、iphone 7plus單獨切一套比原有44*44px切圖大1.5倍的切圖,即66*66px大小的切圖。(UI設計的適配問題會在后邊單獨的文章中詳細講解)


          3.圖片類切圖輸出

          圖片類切圖主要是指啟動頁、新手引導頁、默認提示、廣告圖等需要完整切圖的圖片。同一類型的圖片切圖一般要保持同樣的大小尺寸以便于工程師開發使用。另外一般這些切圖的文件較大在切圖過程中需要控制切圖文件的大小。(后邊文章會詳細講解如何壓縮切圖大小的方法)

          全屏切圖類



          局部切圖類



          4.可拉伸元素切圖輸出

          可拉伸元素一般是指按鈕、輸入框等切圖過程中可以對切圖進行瘦身壓縮的元素。這些元素通過瘦身壓縮可以極大地見效圖片的大小提升用戶在使用app中的加載速度。在ios中這種切圖方式叫做平鋪切圖,在安卓中這種切圖方式叫做點九切圖法。

          橫向拉伸切圖




          豎向拉伸切圖





          文章來源:知乎


          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

                                                                      微信圖片_20210513163802.png

           

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

           

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務






          UI設計的10大發展趨勢

          seo達人





          最近,我花了一些時間觀察UI設計的發展方向。我偶然發現了一些非常有創意的趨勢,我認為這些趨勢將在不久的將來將重新塑造UI設計。


          以下是根據我的觀察得出的10種趨勢:


          從左到右:Fireart Studio,Ionutzamfir(IG),Dawid Tomczyk,Ui8net(IG)


          1.新Neuomorphism


          新形態在不斷發展,我想它會一直存在(無論你喜歡與否)。它最初的形式并沒有持續很長時間,但是它正在朝著更加復雜和易于訪問的方向發展。這幾乎就像擬物象,但有一種新鮮、現代、更美學的氛圍。


          從左到右:Dominik Bednarz,Mufidul.design(IG),Haolabteam,Ariuka_dsgn(IG),Sajon007(IG)


          2.軟漸變


          漸變無處不在!實際上,我在背景和UI元素(例如按鈕,卡片和圖形)上看到了很多。


          混合兩種以上的顏色以創建一個彩色模糊的背景也是一件事!


          從左到右:Victor.niculici(IG),Sun,Ashik,Interfacely.net,Halolabteam


          3.幾何元素


          無論是作為主要的背景或主題,還是只是讓設計看起來更有趣的一個細節——幾何元素越來越受到關注。通常將它們混合在一起以創建馬賽克——結果看起來非???!


          從左到右:Emy Lascan,Zerotoone.de,DesigningUI.com,jajadesign(IG),Flowstudio。


          4.柔和的背景


          不得不說我喜歡這種趨勢,我見過許多令人驚艷的、輕量級的、美觀的設計,其具有非常精致、明亮柔和的配色方案。

          它使設計看起來非?,F代、沒有干擾、清新而令人愉悅,其中內容扮演主要角色,其他一切只是一個微妙的背景。


          從左到右:batcz(IG),tranmautitram(IG),Purrweb_design(IG),Izmahsa(IG),tranmautritram(IG)


          5.插圖和3D


          插圖仍然很流行,不同的樣式、配色方案、或多或少的抽象,所以它們符合產品的特點。不僅是平面的,而且還模仿了3D的外觀。我相信這是一個很好的改變,在地球上的每一個數字項目使用了這么多年的庫存圖片之后,我在這里給出了一些有關如何創建簡單插圖的提示:


          從左到右:弗拉基米爾·格魯夫(Vladimir Gruev),c.sen_(IG),埃迪·洛比亞諾夫斯基(Eddie Lobianovsky),cmarixtechnolabs(IG)


          6.抽象的形狀


          用于背景和不同的UI元素,它們使界面看起來更“有機”和好玩,我認為這是一件好事。使用鋼筆工具編輯最簡單的形狀(正方形,橢圓形),使用不同的邊框半徑,嘗試使用不同的顏色/漸變,你可能會得到一個非常有趣的結果。在這里嗎,我們或許可以嘗試一下這個簡單卻神奇的工具Blobmaker。


          從左至右:UXdesignlabs(IG),dragonlee_design(IG),JIANGGM,reyiands(IG),Saepul Rohman


          7.暗模式


          暗模式是界面的顏色反轉版本,以使其在晚上更易于訪問。由于我是典型的夜貓子,因此我經常在晚上使用深色模式。創建暗模式時,記住要在不同元素和版式之間保持正確的對比。


          從左到右:Hype4.com,nickelfoxstudio,purrweb_design(IG),Vadim Drut,UI8net


          8.角度元素


          不僅用于Dribbble shots,而且還用作以非標準方式在網站上呈現不同內容的方式。它使內容看起來更有趣和吸引眼球。那么,如何快速實現這一效果呢?首先,對0度的角度拼貼元素。把他們分成一組。然后,更改組角度(從30°到50°),瞧!這樣,你就不必手動更改每個元素的角度了。


          從左到右:Cuberto,Fireart Studio,Dogstudio,Hype4.com,Prakhar Neel Sharma


          9.柔和的陰影


          這是另一個我最喜歡的趨勢,柔和的陰影使UI看起來更深入。這種效果通常非常微妙,但在美學上令人愉悅。一般來說,陰影使某些UI元素變得“可單擊”,并且它們有助于區分內容之間的層次結構。你可以在此處了解如何進行操作:


          從左到右:andreisimon.design(IG),Shakib Ali,Felixlesoeuf(IG),Glebich(IG),Tramautritram(IG)


          10.簡單、thick字體


          我從不喜歡比較薄的字體(在iOS7時代),所以我很高興看到這種趨勢消失了?,F在,我正在觀察使用更粗、更簡單的形式(幾乎為方形)的可讀字體。它們使界面看起來更加現代和優美。如果你要搜索類似的產品,可以試試Poppins、Montserrat(免費)、Gilroy、Sofia Pro、Proxima Nova(付費)。

          來源:Diana Malewicz:10 Newest and promising UI design trends




          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

                                                                      微信圖片_20210513163802.png

           

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

           

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務






          攝影術的誕生和發展

          資深UI設計者

          對第一回還有印象的朋友應該知道,平面設計的定義簡單說來就是:“以某種法則,將文字、圖案、攝影圖片在平面空間中進行編排設計,以達成信息傳達或者行為引導等目的的活動”。

          用一篇文章,幫你了解攝影術的誕生和發展

          △ 圖文結合的平面設計作品

          這個定義大致在 1970 年代才成熟,但相信隨著科技進一步發展,這個定義還會修正變化,但當前可以肯定的是,平面設計中有三個核心元素,分別是文字、圖案跟攝影圖片。

          文字跟圖案都已經歷史悠久,其中圖案最早,文字次之,而攝影則到了 19 世紀中期才被發明,發明之前有著漫長的醞釀演變過程。

          用一篇文章,幫你了解攝影術的誕生和發展

          △ 圖文結合的平面設計作品

          我們本次一起來了解一下攝影術的誕生過程,還有其對平面設計發展產生的一些影響。攝影術的發展其實主要分為幾個階段,史太濃把他們總結為三段,分別是:

          • 探索者的探索。
          • 商用后的進化
          • 與平面設計的結合

          從小孔成像出發

          根據歷史記錄看來,歐洲在古希臘時期就有人嘗試捕捉真實世界的影像,這個人很知名,就是大哲學家亞里士多德(Aristotle)。

          亞里士多德發現的其實就是“小孔成像”原理,物理課大家有學過,因為光是成直線射入的,當人站在小孔前,頭部擋住上面的光,成影在下邊,腳擋住下面的光,成影在上邊,所以成像是倒立的。

          用一篇文章,幫你了解攝影術的誕生和發展

          △ 小孔成像原理

          神奇的是,跟亞里士多德接近同期的中國思想家墨子也同時發現了這個情況,并且比亞里士多德還早一些做了這個實驗,記錄在「墨子·經說下」書中,這種文明發展不約而同的狀態非常多,很難解釋,似乎冥冥之中自有主宰。

          用一篇文章,幫你了解攝影術的誕生和發展

          △ 墨子關于小孔成像原理的研究

          隨后有藝術家基于這個原理制作一種叫“暗箱”的東西來輔助自己進行繪畫創作,這樣可以高效的畫出相當準確的圖形來,好比我們設計師有時候也會使用“透寫臺”輔助臨摹一樣。

          用一篇文章,幫你了解攝影術的誕生和發展

          △ 畫家制作的暗箱裝置

          時間一直去到 19 世紀初,有人基于這個“小孔成像”原理完成突破性探索,他就是來自法國的約瑟夫·尼伯斯(Joseph Niepce)。這個突破性發展跟一些現代材料的發展密切相關,就是他嘗試將一些感光材料涂在暗箱的平面上,通過曝光的化學變化嘗試將影像捕捉下來。

          用一篇文章,幫你了解攝影術的誕生和發展

          △ 尼伯斯的攝影探索試驗

          這種方式被認為是最早有記載的攝影技術,尼伯斯將這種方法命名為“陽光腐蝕法”(sun engraving),通過這個方式尼伯斯在 1822 年制作出世界上最早的人物攝影作品,名為《紅衣主教》。(Cardinald Ambroise)

          用一篇文章,幫你了解攝影術的誕生和發展

          1826 年他再如法炮制,完成世界上第一張風景攝影,拍攝的就是其房間窗外的街道,圖像朦朧不清,但是完成了歷史的突破。

          用一篇文章,幫你了解攝影術的誕生和發展

          尼伯斯本身是一名印刷家,他這方面的探索動機其實是為了尋求一種替代手工插圖的方法,以提升印刷效率,因為手工插圖不但時間長,成本也很高,比如要邀請技術精湛的藝術家創作。

          不幸的是,尼伯斯的探索還沒去到實用性階段本人就因為心肌梗塞在 1833 年去世了,幸好此時他已經有了一位合伙人,可以繼續他的研究,那就是畫家出身同為法國人的路易斯·達貴爾(Louis Jacques Daguerre)。

          用一篇文章,幫你了解攝影術的誕生和發展

          △ 路易斯·達貴爾

          商用之路

          達貴爾基于尼伯斯的探索基礎進一步深化,首先改善感光材料,比方使用銀金屬成分的感光版,同時優化制作過程,對感光后的銀版再做工藝處理,出來的攝影效果讓精確度大幅提高。

          1839 年時候,達貴爾采用自己打磨了 7 年的技術對巴黎街景進行拍攝,出來的效果可以說非常好,清晰度很高,讓他非常振奮。

          用一篇文章,幫你了解攝影術的誕生和發展

          獲得這樣的成果后,在一些經商朋友的建議下,他果斷向法國科學院呈報自己與尼伯斯的攝影研究成果,科學院的院士看到作品后大為震驚,一致表示肯定,而且迅速向全世界自豪的宣布法國人發明了攝影術。

          與此同時,達貴爾也馬上開始努力的推動攝影術商業化,首當其沖的自然就是生產“攝影機“進行銷售,因為有法國科學院支持,過程很順利,第二年就生產并賣出 50 萬臺,讓達貴爾一下子名成利就。

          用一篇文章,幫你了解攝影術的誕生和發展

          △ 達貴爾相機

          用一篇文章,幫你了解攝影術的誕生和發展

          △ 達貴爾相機拍攝的作品

          這事情讓一位叫塔波特(WilliamHenry fox talbot)的英國人氣得吐血,因為他早在 1833 年也開始探索攝影技術,并且在 1835 年就設計出一種小型攝影機,可以拍攝到很小的物體。

          其原理連暗箱都不需要,屬于一種化學反應的直接曝光,產生的圖像是黑白負片,但是很精確,他獲得這些成就后居然不認為有商業價值,所以丟在一旁好幾年。

          用一篇文章,幫你了解攝影術的誕生和發展

          △ 塔波特相機拍攝的作品

          當通過媒介聽聞達貴爾的事跡時候,他匆匆將自己的技術向英國皇家學院匯報,英國人也趕忙向世界宣布發明了攝影術,但也只能成為發明者之一,而并非世界第一了。

          用一篇文章,幫你了解攝影術的誕生和發展

          △ 很不開心的塔波特

          但塔波特痛定思痛,發力追趕,1840 年時候更新了感光材料,居然可以將感光之后的底片取出來在暗房沖洗,也發明出負片變成片的方法,雖然多了一道程序,但是得到的效果完勝達貴爾相機,正負片這樣的攝影方式一直到 20 世紀 90 年代都還存在著。

          用一篇文章,幫你了解攝影術的誕生和發展

          △ 塔波特相機完成的作品

          正負片的核心競爭力在于可以無限復制,而達貴人爾的銀版攝影只有一張圖片,所以塔波特相機的商業價值也完勝達貴爾,真正做到后來居上,可見事在人為啊。

          上一期說過,當一件事情體現出商業價值,就會吸引到一大堆能人參與,讓事情的發展速度快速提升,攝影的發展也不例外。1880 年時候有人發明出干底片,因為之前的感光材料都是濕涂的,很不方便,再后來就是大家感覺相機體積太大,一起去研究怎么變小。1888 年世界第一臺小型照相機出現,發明者叫喬治·伊士曼(George Eastman),后來他成立了一間公司,就是大名鼎鼎的“柯達公司“(EastmanKodak Company)。

          用一篇文章,幫你了解攝影術的誕生和發展

          △ 喬治·伊士曼

          用一篇文章,幫你了解攝影術的誕生和發展

          △ 柯達公司 EastmanKodak Company

          柯達公司同時也主力生產后來風行世界的膠卷,記得小時候我還能在家里找到很多這樣的小圓筒包裝的膠卷,很后悔沒有好好保存一些下來,現今的還能零星找到的卡帶在不久的將來也會消失,建議大家可以收藏。

          用一篇文章,幫你了解攝影術的誕生和發展

          攝影術與平面設計的結合

          首先將攝影與平面設計結合的是美國人約翰·莫斯(John Calvin Moss),他在 1871 年時候首先嘗試將有影像的底片投射到有敏感感光材料的金屬版上,通過腐蝕獲得正片樣式的畫面,這個金屬板就可以直接用于印刷,從而獲得插圖。

          這種方式比金屬雕刻與木刻插圖都快很多倍,而且成本低,制作出來的插圖非常真實,還有一種特殊的類似鋼筆畫一般的藝術效果,廣受社會大眾的歡迎。

          用一篇文章,幫你了解攝影術的誕生和發展

          △ 莫斯結合攝影技術制作的印刷品

          當攝影技術走向成熟的時候,有一些藝術家也開始嘗試基于底片為藍本,將其再創作為版畫,這樣就獲得了準確與藝術化的平衡,而且效率也很高。

          世界上現存最早以攝影底片為藍本創作的木刻版畫作品叫《里什蒙運河邊的自由人》(Freemen on the Canal Bankat Richmond),創作時間是 1865 年,主題是一個黑人家庭合照,大家可以看到有很好的藝術韻味。

          用一篇文章,幫你了解攝影術的誕生和發展

          △ 《里什蒙運河邊的自由人》

          而大部分印刷廠也在探索怎么直接將攝影圖片印刷在紙張上的方法,據聞這種方法其實約翰·莫斯已經掌握,但一直高度保密,沒有釋放到商業應用中。到了 1880 年時候,美國的《紐約每日圖畫報》第一次以攝影直接制版方法刊載了一個城鎮風景照片,因為地位特殊,這張印刷照片也歷史留名,叫《尚地鎮的風景》(A scenenin shanty town)。

          用一篇文章,幫你了解攝影術的誕生和發展

          △ 《尚地鎮的風景》

          我們從圖片細節看來會發現圖像好像由一個個小點構成,如果這樣就對了,因為這種印刷照片的方法就是大名鼎鼎的“絲網制版”。這種方式是把攝影底片通過絲網照射形成很多細小的格子,格子黑白明暗程度不同,在感光底版上通過曝光就形成金屬印刷版,繼而就可以將照片印刷出來。

          這種方式慢慢被不斷優化,越來越多印刷廠都廣泛采用。

          用一篇文章,幫你了解攝影術的誕生和發展

          △ 絲網制版與印刷

          當攝影可以順利變成印刷品后,其媒介地位日益提升,因為采用照片方式做插圖有很多好處,其一是節省成本,其二是真實,其三則是效率很高。

          所以攝影作品就跟之前任何一種媒介形式的發展路徑一樣,從追求有到追求好,再由追求好變成追求個性,大家都在努力探索一些新鮮的攝影方法,如今單純攝影的學問絕對不比平面設計低,而且兩者之間的關系非常密切,很多法則也可以相互引用。

          世界上第一位探索人造光源攝影的人是來自法國的納達(F.T.Nadar),他在 1886 年做了世界上第一次攝影采訪,對象就是我們在「風格列傳」新印象派篇談到過的化學家謝弗勒爾(Michel Eugene Chevreul)。

          用一篇文章,幫你了解攝影術的誕生和發展

          △ 納達采訪謝弗勒爾

          過程中完成了 21 張由人造燈光配合的現場照片,最后配以文字發表在法國刊物《插圖雜志》上,讓那一期的刊物銷量大增,因為讀者可以配合生動的照片更好了解內容,當時而言顯得非常有趣。

          從此之后,照片與平面設計的關系變得越來越重要,越來越多平面設計師也開始進一步探索照片與排版之間的法則。

          文章來源:優設  作者:土撥鼠

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          圖形簡化+衍生,教你真正的圖形創意方法!

          周周


          大家是不是很好奇別人的圖形怎么都這么有創意,而自己想設計圖形的時候卻無從下手??赡苁沁€沒有掌握方法。今天就分享一個圖形創意的方法。希望大家了解后,在設計圖形的時候有一個清晰的思路。

          圖形簡化+衍生,教你真正的圖形創意方法!

          △ 插圖來自日本插畫師 Yu Nagaba

          我們先來看這個圖形,大家能認出這是誰嗎?

          圖形簡化+衍生,教你真正的圖形創意方法!

          沒錯,是愛因斯坦。為什么僅僅幾條簡單的線條,就能把一個真實的人物刻畫出來呢?這就是我們今天講的內容,如何去簡化并且衍生成完整的圖形。

          圖形簡化+衍生,教你真正的圖形創意方法!

          圖形簡化+衍生,教你真正的圖形創意方法!

          簡化的圖形一直是趨勢。它不僅僅利于快速傳播、具有非常強的延展性,也經常作為海報的主體。

          圖形簡化+衍生,教你真正的圖形創意方法!

          標志上也大部分以圖形為主。所以作為設計師,簡化圖形的能力是必不可少的。

          圖形簡化+衍生,教你真正的圖形創意方法!

          但是很多人對于圖形簡化還沒有一個清晰的理解,更多的只會在圖片的基礎上進行簡單的描摹。

          圖形簡化+衍生,教你真正的圖形創意方法!

          這樣描摹出來的圖像很可能缺乏識別度,就像這個例子,描摹出來后它到底是狗呢,還是狼呢?

          圖形簡化+衍生,教你真正的圖形創意方法!

          圖形簡化+衍生,教你真正的圖形創意方法!

          圖形簡化+衍生,教你真正的圖形創意方法!

          簡化的第一步是確定基本元素??偟膩碚f,就是什么元素能夠確定這個物體的種類。比如玫瑰是確定它是“花”這一種類。什么元素能讓我們辨別它是花而不是其他東西呢?

          圖形簡化+衍生,教你真正的圖形創意方法!

          圖形簡化+衍生,教你真正的圖形創意方法!

          枝莖加上花苞,以及紅綠配色就可以讓我們辨別它是“花”的種類了。至于葉子就屬于補充元素。這都是讓我們辨別它的種類的基本元素。

          圖形簡化+衍生,教你真正的圖形創意方法!

          圖形簡化+衍生,教你真正的圖形創意方法!

          圖形簡化+衍生,教你真正的圖形創意方法!

          玫瑰花苞和枝莖的常態關系是:花苞在枝莖的末端。如果隨意變換關系,會影響最簡形態下的識別度,所以前期簡化最好不要做變化。

          雖然這兩個步驟能確定它的種類是“花”。但是它是什么花呢?我們還分辨不出來。就需要到第三步,找到圖形的重要特征。

          圖形簡化+衍生,教你真正的圖形創意方法!

          圖形簡化+衍生,教你真正的圖形創意方法!

          這個時候玫瑰花就需要以種類內的事物做參考。也是和其他花做對比。找出玫瑰花區別于其他花卉的重要特征。

          圖形簡化+衍生,教你真正的圖形創意方法!

          圖形簡化+衍生,教你真正的圖形創意方法!

          紅綠配色是我們對玫瑰的印象。玫瑰的枝莖帶刺。玫瑰花的花瓣開得比較緊密,花瓣層層包裹像漩渦一樣。這些都是玫瑰比較明顯的特征。

          圖形簡化+衍生,教你真正的圖形創意方法!

          分析完這些特點,我們只需要在原有的元素關系上加上這些特點,就能分辨出它是玫瑰花了。而這些特點可以在保證識別度的情況下任意刪減組合。

          圖形簡化+衍生,教你真正的圖形創意方法!

          比如說去掉刺也能通過其他特征辨別玫瑰?;蛘弑A舸?,去掉花瓣的細節,如果對于玫瑰有刺這一點比較熟悉的人來說也可以辨別它是玫瑰。又或者保留所有的圖形細節,把顏色變成黑白,都是可以的。

          圖形簡化+衍生,教你真正的圖形創意方法!

          我們剛剛說的玫瑰是本身自帶的特征,其實在現實生活中還存在其他因素影響的特征。

          圖形簡化+衍生,教你真正的圖形創意方法!

          比如附加特征,這個圖形我們都能分辨它是鳥,但是具體是什么鳥卻看不出來。

          圖形簡化+衍生,教你真正的圖形創意方法!

          一旦加入橄欖枝,啊,我們就知道,它是鴿子。鴿子本身是沒有橄欖枝的,它代表和平也是人類賦予它的象征。所以這些屬于附加特征。

          圖形簡化+衍生,教你真正的圖形創意方法!

          還有狀態特征,比如壁虎,哪種壁虎的狀態和角度更容易讓你辨別它們的身份呢?我相信應該是能看到壁虎緊緊抓在墻上的狀態。所以它的狀態是否能體現它的身份,也是很重要的一點。

          圖形簡化+衍生,教你真正的圖形創意方法!

          圖形簡化+衍生,教你真正的圖形創意方法!

          現在的示意圖它只是隨便畫出來的,如果用在設計中,這個圖形是不合格的,所以需要對它進行改造。

          圖形簡化+衍生,教你真正的圖形創意方法!

          衍生圖形主要從兩個角度入手,風格化和陌生化。

          圖形簡化+衍生,教你真正的圖形創意方法!

          比如花的漩渦狀可以用同心圓表現?;ò冒雸A形、枝莖和葉子同樣用最基本的形狀概括。

          這個風格的圖形非常簡單,會顯得它的完成度不高。所以這時就需要陌生化的處理,讓它在創意想法上有亮點。

          圖形簡化+衍生,教你真正的圖形創意方法!

          比如我們把同心圓的顏色改變,雖然辨識度少了。但是這種創意圖形加上文案與畫面氛圍,可以判斷出它的身份。

          那么漩渦一定要圓形的嗎?

          圖形簡化+衍生,教你真正的圖形創意方法!

          帶著這種疑問,我們就可以開始第二個衍生。以四變形為基本形,通過旋轉不同角度,再加上漸變風格。第二個圖形就衍生出來了??赡苓@兩個會偏抽象一點,那也可以選擇保留更多的特征。

          圖形簡化+衍生,教你真正的圖形創意方法!

          就像這個圖形的外形和線條刻畫上更大地保留了玫瑰形態,所以在顏色上就可以不用完全遵循現實。

          圖形簡化+衍生,教你真正的圖形創意方法!

          很容易,三個不同的圖形就完成了。

          因為圖形衍生的過程對于想法、造型能力、不同風格的掌握有所要求,沒辦法通過簡單的理論來分析,接下來會通過分析四個不同的案例的衍生方式,給大家提供一些衍生的思路。

          圖形簡化+衍生,教你真正的圖形創意方法!

          圖形簡化+衍生,教你真正的圖形創意方法!

          螃蟹它的顏色是橙紅色。蟹鉗是螃蟹比較明顯的特征。蟹的八條腿可以作為輔助元素。它的軀殼偏圓形。這些特點的組合就能呈現一個非常清晰的螃蟹的形象。但是別忘了圖形的衍生是需要對特征有所取舍和變化的。

          圖形簡化+衍生,教你真正的圖形創意方法!

          為了讓螃蟹看起來更加的陌生化,我們可以考慮改變印象中螃蟹的常見形態,讓它以一種更加有趣的動態呈現,比如讓這個多爪動物以一種太陽一樣的放射狀呈現,變身元氣螃蟹。

          圖形簡化+衍生,教你真正的圖形創意方法!

          第二個方案保留圓形的身體,加上尖銳的蟹鉗特征,就完成了一個新的螃蟹圖形。雖然顏色的變化和少了八條腿的特征,但是在保留其他特征時作出的變化卻也能讓我們清晰辨別它是螃蟹。

          圖形簡化+衍生,教你真正的圖形創意方法!

          那傳統的螃蟹都是圓形的身子,我們能不能嘗試把螃蟹的身體變方呢?帶著這種思考,保留其他特征的同時作相應的風格化處理。又一個新的圖形產生。

          圖形簡化+衍生,教你真正的圖形創意方法!

          這些就是螃蟹部分的衍生圖形。

          圖形簡化+衍生,教你真正的圖形創意方法!

          圖形簡化+衍生,教你真正的圖形創意方法!

          火龍果的配色是很明顯的特點。表皮會帶有綠色的鱗片。相對橢圓的身體。火龍果是白色的果肉和黑籽的組合。

          圖形簡化+衍生,教你真正的圖形創意方法!

          第一個衍生很簡單的,就是簡化火龍果的外形,最后變化顏色。

          圖形簡化+衍生,教你真正的圖形創意方法!

          這一次同樣保留火龍果的外皮特征,因白色果肉和黑籽的結合讓我聯想到骰子,我們可以把這個想法和火龍果結合一下,讓它變得更加有創意。

          圖形簡化+衍生,教你真正的圖形創意方法!

          使用不尋常的切塊方式,也能產生另一個圖形。

          圖形簡化+衍生,教你真正的圖形創意方法!

          這些就是火龍果部分的衍生圖形。

          圖形簡化+衍生,教你真正的圖形創意方法!

          圖形簡化+衍生,教你真正的圖形創意方法!

          顏色同樣是我們辨別它的一個很重要的特征。除了顏色,我們還可以看到西瓜的表面有條紋的覆蓋。像是西瓜這種簡單的圓形水果,切塊之后的造型,可能會更有辨識性。是一個很好的附加特征。最后,黑色的瓜籽同樣是我們辨別西瓜時的一個顯著特性。接下來就需要對它們進行風格化的處理。

          圖形簡化+衍生,教你真正的圖形創意方法!

          西瓜的條紋部分,這一次我們用幾何圖形來做一些嘗試。錯位再壓縮,讓條紋的比例感更強。加入半圓形的西瓜切塊之后,感覺有點像是人臉對吧?那我們就順勢添加一個眼睛,讓它擬人化。

          圖形簡化+衍生,教你真正的圖形創意方法!

          符合了這么多特征之后,造型上就不用那么寫實了,我們完全可以抽象一些來繪制它。加入之前的眼睛和切塊之后,它就完成了。

          圖形簡化+衍生,教你真正的圖形創意方法!

          西瓜切開后的這個形狀特征讓我們很容易辨別它的身份,所以就可以保留這個形狀特征,做一些大膽的變化。

          圖形簡化+衍生,教你真正的圖形創意方法!

          比如顏色上可以完全脫離西瓜原有的顏色。用幾何色塊的方式去填充造型,讓風格化的更強烈。到這里,這個圖形也就完成了。按照這種思路,能不能保留配色,但是在切塊的形狀上進行改變呢?

          圖形簡化+衍生,教你真正的圖形創意方法!

          那就到了第三個衍生,我們把它分成三塊去表現西瓜的層次。因為造型已經足夠抽象了,所以這里我們用顏色去盡量還原西瓜的印象。組合到一塊,是不是就有西瓜切塊的感覺了呢?

          圖形簡化+衍生,教你真正的圖形創意方法!

          我們把這個數量增加一些,就更有辨識度了,再調整里面的一點變化。那么到這里,這個圖形也就完成了。

          圖形簡化+衍生,教你真正的圖形創意方法!

          這是西瓜部分的衍生。

          圖形簡化+衍生,教你真正的圖形創意方法!

          圖形簡化+衍生,教你真正的圖形創意方法!

          青蛙是綠色的,由于身體和四肢的對比,會感覺四肢很細長。另外后爪很長,并且有蹼。彎曲的后腿是青蛙比較特別的地方。

          圖形簡化+衍生,教你真正的圖形創意方法!

          這一次,我們可以從造型上做變化。比如切斷連接四肢的關節部分,不過這樣的造型在美感上還不是很理想。

          圖形簡化+衍生,教你真正的圖形創意方法!

          那么嘗試到這里,覺得下面的這個腳的直線結構很有趣,是一個很有變化性的特點。所以我們可以按照這個方向再去嘗試一下。

          圖形簡化+衍生,教你真正的圖形創意方法!

          把手臂的部分也修改成直線的樣式,那么這里這個圖形就完成了。

          圖形簡化+衍生,教你真正的圖形創意方法!

          這一次,我們把目光聚焦到青蛙細長的四肢上,為了讓造型看起來更生動,這個圖形我決定打破對稱的方式。將四肢和身體的比例做一些夸張的處理,讓身體更小,四肢更大。爪尖用來劃水的蹼也同樣做了夸張的處理。那么在這個過程中,我們會繼續擺放四肢的位置,讓每個部分的空間看起來更均衡一些。

          圖形簡化+衍生,教你真正的圖形創意方法!

          強調了四肢之后,我們還可以反著來,嘗試強調身體的部分。為了讓四肢看上去更細小,這一次我們用線條來繪制。

          圖形簡化+衍生,教你真正的圖形創意方法!

          這是青蛙部分的效果。

          圖形簡化+衍生,教你真正的圖形創意方法!

          來回顧一下我們這篇教程所有的圖形。

          我們從極簡化的元素開始,通過不同特征的組合與變化,再為它添加陌生化和風格化的處理,就能能衍生出非常多形態各異、各種風格的圖形。




          文章來源:優設網       作者:研習社



          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務



          一款軟件界面設計的重要性

          seo達人

           

          這周繼續做我們的作品,感覺實現了功能不是很多,而我們把更多的精力投到了界面的修飾上,感覺以前的界面太不好看,和人家正規的瀏覽器相比簡直不堪一擊.在這周我感受最深的就是一款軟件的成功以否不僅僅在于功能的強大以否上,界面也占了其成功因素的半壁江山. 

            作品開始準備以前就聽八期的師哥師姐說,界面的美觀,協調,布置合理等是一款軟件成功不可或缺的因素.前幾次作品展最后獲勝的都是界面漂亮,和諧,布置合理,非常吸引人的作品,例如寶寶樂園等,他們運用了Flash等工具,的確非常漂亮吸引人!通過這周的做作品和觀察比較流行,受歡迎的軟件,我發現一款軟件界面的重要性和設計界面需要注意的事項。

            重要性

          1,軟件的界面相當于我們人的整體外表,相當于我們人的氣質等。誰都知道我們希望自己漂亮一些,希望自己有氣質一些,這些不僅可以增加我們的人氣,更可以幫助我們披荊斬棘,更加順利走向我們的目標。當然,軟件的界面美觀與否,直接影響著人們使用此軟件時的心情,進而影響人們對此軟件的喜歡與否。而那些所謂的強大的功能是在人們喜歡這款軟件之后再考慮的問題。

            2,功能菜單的布局,這個布局合理與否,是否符合大眾的使用習慣。也直接影響著使用者對此軟件的喜歡與否。如果一款軟件的各項功能菜單布局不合理,不符合大眾化,那么再強大的功能,使用者也找不著,那樣也白搭。所以界面的布局也是非常重要的。

          總而言之,界面的設計,直接決定著使用者對這款軟件的第一印象,直接決定著使用者對其的青睞與否。

          在這里我想向大家提出幾點注意事項

          1,色調的選擇,在這里主要以和諧,舒適感為目標。色調的選擇要是使用者感到非常舒服,色彩的搭配更要凸顯界面的和諧優美。

          2,功能菜單簡潔明確,主次分明。按鈕的功能要簡單明了,易于使用掌握,主次要分清,分清使用者使用此軟件的主要功能,常用功能和附加功能,處處以使用者的角度去想問題.設計軟件.

          3,符合常規邏輯思維,給用戶以很好的引導作用,良好的界面布局,會給用戶操作帶來方便和引導,軟件使用起來流暢自然。設計不合理的界面,用戶往往要費一些時間去找功能塊啦、按鈕啦、定位文本框啦,甚至根本不明白軟件再說什么,還得自己去理解它的意思。

          4,我們在制作軟件時,要懂得虛心向別人請教,尤其是界面問題,往往我們的缺點我們自己難于發現。如果必要的話,我們可以做問卷調查,向更多的用戶調查需求,從而更有助于我們做出符合大眾需求的軟件產品。

          總而言之,界面是軟件非常重要的一大項,我們要對他重視起來,不要一味的把心思全投放到功能的實現上。當然我們做軟件的每一點都要以使用者的心態,使用者的需求去設計,界面是軟件的門戶,更是如此。如何讓使用者用著更方便,更開心,更簡捷,我們就如何設計,完全貫徹“全心全意為人民服務”的理念。

           

          文章來源:CNDN   作者:iteyey_45

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

           

          2021年版式設計趨勢

          ui設計分享達人

          排版將文字從單純的文本轉換為巧妙的交流方式。字體和類型設計可以說出這么多–從突出的粗體字體到精致的襯線字體。從傳統的永恒變化到全新的技術。

          字體在現代文化和商業中的突出地位受到包豪斯藝術運動的影響。赫伯特·拜耳(Herbert Bayer)是包豪斯(Bauhaus)的學生,并通過采用還原性極簡主義的原則在版式設計上留下了杰出的印記。

          數字圖形媒體和設計師本身的爆炸式增長催生了各種各樣令人驚奇的想法和進化。有些想法只是一時的流行,而另一些則是可以保留的趨勢。我們重點介紹了2021年最流行的字體趨勢。

          1. 襯線字體

          襯線字體當然是永恒的–因此,當以新的現代方式使用它們時,它們會重新出現在趨勢圖上。通過將細長和粗體元素并置,我們看到古典襯線字體作為一種持續的趨勢重新回到設計中。尤其是受到美容和DTC品牌的推崇,該款式具有柔和的美感,可以在許多行業中使用。

          我們的示例顯示了帶有泥土色的苗條襯線字體的優雅搭配,從而柔和了整體氛圍。

          Neubel本身是一家字體鑄造廠,使用柔和而優雅的顏色托盤并將文本覆蓋在對比鮮明的藝術品上,以大膽地表達自己的觀點。

          設計公司Autumn展示了視覺層次結構的強大功能以及自信的版式和簡單的形狀。

          2.輪廓字體

          輪廓字體在2020年出現了很多的創意,我們希望在2021年會看到更多。透明字體在與粗體,填充字體并排顯示時,更加強大。

          我們的示例表明,輪廓傾向于在網頁設計中占據中心位置。Heetch在相同顏色的純色襯線字體上方使用藍紫色輪廓字體,以表現出對比效果。

          Aldo在“走進愛情”廣告系列中使用了當年Pantone顏色的陰影。廣告系列以自信和表達為中心,明亮的黃色將那種感覺放在了中心。輪廓字體是使粗體黃色發光的絕佳選擇。日本設計師Ukyo Masuda憑借中性灰色調色板為該群體錦上添花,盡管如此,它還是通過創意的輪廓字體而栩栩如生。

          3.進化的野獸派

          如果您希望營造視覺張力并擺脫標準網頁設計的束縛,那么野獸派字體與現代野獸派元素相結合就可以完成工作。野獸派字體的清晰,原始,略顯復古的設計經過了現代化改造,成為我們所謂的“進化的野獸派”。在經過改進的版本中,苛刻的元素被軟化并與各種調色板和形狀結合在一起。

          我們的示例顯示了進化的野獸派的不同變體和組合。內森·泰勒(Nathan Taylor)使用了大量實驗元素和互動性。整個設計是野獸派的,不僅僅是字體。這是對更加野蠻的野蠻主義的一個很好的展示,但是現代的元素使這種感覺更加精致和進化。

          4.文本與其他元素的分層

          通過有意地分層排列文本和圖像,可以使得整個頁面更有空間感。這種組合使焦點很清楚。它允許用戶在滾動之前暫停一秒鐘并全部接收信息。

          這些示例是最有趣的。登錄Mammut貝加爾湖頁面后,您即會感受到電影般的震撼力。圖像的運動和貝加爾湖文字與人類交織在一起,使您感覺自己像是體驗的一部分。

          德國品牌代理公司MJND的層次結構要簡單得多,但是層次感仍然很突出。對于那些使用文本和圖像的人來說,這種設計更容易上手。

          Owlsome Studio使字體更加突出,并在其后面分層顯示較小的正方形圖像。這是其他兩個示例的替代方案,但是由于它打破了網絡的現狀,因此可能以自己的方式產生影響。

          5.文字圖像融合

          比文本分層更進一步的是文本與圖像相互融合,而兩者是密不可分的。這給圖像帶來真正的優質感,并引起您的注意。它們不再是文本和圖像層的組合,而是變成一個整體。

          我們喜歡這種格式允許的創意表達,并提供無盡的組合。Satellite414使用透明的輪廓文字,這些文字實際上成為照片的一部分。它是動態,現代和新鮮的。

          Kieran Baybutt中文字完全取代了圖像。這使得文本部分與典型鏡頭一樣重要。Craig Reynolds中圖像和文本滑入和滑出組合,將它們合并在一起,從而使用戶注意到它們。

          6.新迷幻效果

          全新迷幻氛圍是對時髦色彩的復古回歸,融合了現代感。它借鑒了過去的迷幻設計。

          從1960年代到1970年代的劇烈社會動蕩帶來了新藝術和設計的變革。迷幻的影響在那個時代就很明顯了,今天我們看到了一種新的潮流。韋斯·威爾遜(Wes Wilson)是那個時代的重要設計師,他創造了一種新字體,成為該地區的象征-著名的迷幻設計。

          Victor Moscoso為他的印刷沉重設計帶來了鮮艷的色彩,這些色彩影響了示例中所見的現代霓虹色調色板。

          宙斯·瓊斯(Zeus Jones)是我們所看到的趨勢的完美典范–光譜中各種鮮艷的色彩,以夢幻般的方式與斜體字體結合在一起,并為流動的漸變帶來了清晰的通信效果。

          查理·勒·麥格南(Charlie Le Maignan)為我們提供了一種有趣的復古字體,可在頁面上擴展和折疊。此外,在Showreel部分,我們看到了一段令人迷惑的文字彩虹,讓人聯想起1970年代的專輯和那些酸酸的歌曲。

          圣馬丁代理公司在令人眼花scene亂的場景中為我們帶來歡樂和情感的熔巖燈。字體與背景配合得很好–簡單性與無窮復雜的色彩并置。

          7.粗體現代襯線字體

          到2021年,這并不是一個全新的概念,現代的襯線字體處理技術隨著新外觀的發展而不斷變化。

          一個新的變化是,我們看到粗體襯線字體完全占據了屏幕。在許多情況下,文本是整體設計,而粗體的現代襯線字體則可解決問題。

          樣條線使用黑底紅字表示強烈的陳述,并使用完全大寫的文字來增強效果。對于試圖喚起技能,信心和權威的公司,這種組合效果很好。

          Orto保持簡單,但將宏偉提升到另一個層次。超大,明亮的字體只會迫使您注意并進一步深入。

          8.賽博朋克風格

          也許最分裂的想法之一是計算機朋克和汽具美學。計算機,視頻游戲和1980年代流行美學的模糊組合以某種怪異,令人著迷的組合在一起。

          80年代是數字游戲和新的計算機浪潮的開始。賽博朋克和汽具設計是80年代復古設計的變體。隨著計算機和AI的發展,我們可能會看到印刷術和美學的新融合。

          Next Big Thing Academy顯然具有對未來的關注。雖然這里的字體選擇不是什么極端的選擇,但總體上符合復古主義的未來美學。

          浮標也不使用任何大膽創新的字體,但是圖像與字體的整體配對符合這種趨勢。

          文章來源:站酷   作者:DuiaDesign

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          字有道理,文字編排的細節

          ui設計分享達人

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


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

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

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

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

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

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

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


          1.11字體家族的縮寫


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

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

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

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

          1.12字體家族系統


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

          1.13字體家族/字族的寬窄


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

          1.14字體家族/字族造型


          造型系統是為給不同應用場景下字體做區分的,正常的分為:常規體,意大利斜體,空心體,裝飾花邊,老式數字。

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

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

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

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

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

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

          1.15字體家族/字族的字重


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

          1.16字體家族的用途


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

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


          2.10中文字體的編排


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

          2.11西文字體的編排


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

          2.12中西文混合編排


               在版式設計中,經常會遇到中英文對照的情況。中文字體的象形、會意等特征和英文字體的簡單、圖形化的特征充分結合,展現兩種字體的優勢。編排時應該注意中文字體與英文字體的設計創意與主次關系,做到層次明確,并且要注意字體的統一性,如果字體變化過多,很容易造成版面的混亂。

          2.20西文的演化歷程


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

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

          2.21西文的基礎款字體


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

          • 襯線體

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

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

          Bodoni筆畫有明顯的過度,比較現代,

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

          • 無襯線體

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

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

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

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


          2.22中文的基礎款字體


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

          • 襯線體

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

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

          • 無襯線體

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

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

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


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


               在我們日常的設計工作中,襯線體和無襯線體該怎么選擇呢?我相信很多設計師都在這個問題上糾結過。我們來結合歷史來看看這個問題吧

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


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

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

          2.32現代主義設計風格


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

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

          而在現代化風格的影響下,產生出了工業衍生品也非常簡約,現代。

          2.33字體該怎么選擇


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

               那么字體也是一樣的,有襯線的字體屬于比較古典的氣質,簡約的無襯線字體則是比較現代的工業風。

          2.34中西文襯線體的分類


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

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

          2.35中西文無襯線體的分類


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


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

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

          2.36怎么去選擇字體


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

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

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

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

          2.37中西文如何搭配


            我們為什么要做中西文的那我們在中西文搭配的時候應該怎么去搭配呢?下面是我總結的三個方向:

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

          2.時間相同,就是在某一個時間節點下同時產生的兩款字體。

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

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

          • 外形類似

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

          • 時間相同

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

          • 氣質相同

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

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

               

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

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

          3.10文字組編排的對比基礎


          對比廣泛的存在于我們的生活中,對比的形式也是多種多樣的,例如身高的高矮對比,體重的胖瘦對比,速度的快慢對比等等。在設計領域內,對比是最常出現的形式。對于信息來說,適當的對比可以讓信息層級更加清晰明了,同一層級的信息更加豐富。對于畫面整體來說,恰當的對比可以很好的制造出焦點(畫面主體)當我們需要突出某一個元素的時候,其他的元素相應的就要做出對比關系,才能保證主體的突出。

          3.11字號對比

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

          3.12設計中常用的字號對比


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

          3.13行距對比


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

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

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

          3.20行距對比的作用


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

          3.21平衡版面

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

          3.22閱讀效率


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

          3.30字距的作用

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

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

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

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


          3.31中宮對字距對影響


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

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


          3.32文本性質對字距對影響


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


          3.33字體形狀對字距對影響


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

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


          3.40欄寬的設定


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

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

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

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


          3.40字重平衡

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

            3.50/知句逗


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

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

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

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

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



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

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

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


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


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

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

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


          4.11  閱讀中的節奏感與心理引導


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

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

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


          4.12  什么是文字組的節奏感


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

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

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


          4.20 視覺邏輯


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

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


          4.21  閱讀順序和文字的關系


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

          • 橫排文字

          正常我們去閱讀橫排文字就是先從左到右,從上到下的規律去閱讀。

          • 豎排文字

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






          4.22  通過閱讀邏輯引導視覺


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

          4.23  閱讀中的視覺聚焦


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

          4.30  如何進行視線對比引導


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

          4.31  大小對比


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


          4.32  色彩對比


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

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

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

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

          暖色調比冷色調會更加吸引人

          4.33視覺吸引力的關系


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


          4.40視線的引導


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


          4.41 元素的指向性


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


          4.42 線的引導


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

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


          4.43 向下一數字移動視線


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

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

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


          5.10 居中構圖


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


          5.11 對稱構圖


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


          5.12 傾斜構圖


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


          5.13 S/Z型構圖


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

          要表現畫面的空間感和縱深感也可以用S型購物,這也是S型構圖的特性,讓畫面更有空間感。


          5.14 壓腳構圖


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


          5.15 散點構圖


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


          5.16 三分法構圖


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

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


          6.10 總結


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

          我們的感覺,即我們的視覺和我們的美感,優于幾何結構,當我們在處理黑白對比的平衡時,我們必須訴諸感,

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

          文章來源:優設   作者:Endings

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          安娜?庫娜:如何用信息圖表做出好作品?

          ui設計分享達人

          娜?庫娜是西班牙馬德里的一位自由職業插畫師和設計師以及歐洲設計學院的信息圖表課程教師。

          安娜?庫娜

          信息圖表:框架、分層、排版、插畫

          安娜?庫娜是西班牙馬德里的一位自由職業插畫師和設計師以及歐洲設計學院的信息圖表課程教師。她參與過多個插畫項目,為音樂家、書籍封面、雜志內容、紡織產品以及漫畫制作插畫,同時還合作過Monocle?雜志、《快公司》、PDN、Netflix、微軟、福克斯、Snapchat 等品牌。


          #信息圖表由文字、數據以及圖像組成。


            
          眾所周知,信息圖表由文字、數據以及圖像組成。如何做出好的作品?很多設計師有著不同的見解,其中來自西班牙的信息圖表設計師安娜?庫娜認為,信息圖表的關鍵是分析內容、創建框架,做好信息分級,并再加入排版設計和插畫,通過一個完整的系統把信息清楚地表達出來。 

            

          undefined


          也就是說,設計師應該具備準確地、有條理性地處理文字、數據和圖像的能力。這也是庫娜從作為歐洲設計學院教師的角度,對信息圖表設計的教育提出的關于新聞工作、平面設計、插畫和編輯設計等方面的培訓的一些意見。信息圖表的插畫以及排版設計,都是她在創作中所關注的。 

            

            

          Q1

          Q: 很多人認為信息圖表很難學。作為信息圖表課程的老師,你認為學好信息圖表設計關鍵點是什么?關于一個完整的信息圖表作品,從開始構思到完成是一個怎么樣的流程?   

            
          A:我認為信息圖表最復雜的地方是對內容的理解,這需要我們深入地分解內容,分成小的部分,貼標簽,分等級,然后再合在一起。你需要創造一個信息分層的體系。其次就是一個結實的框架串聯起所有的內容,這是關鍵。 

            


          FILTROS MADRID


            

            

          Q2

          Q:從你眾多的設計合作項目來看,你認為自己的信息圖表作品中最與眾不同的地方在哪里?你最想挑戰的是哪個部分? 
            

            
          A:我想最與眾不同的地方應該是色調、信息圖表的網格布局以及主插畫的黑邊線條。我目前想挑戰的是用更新鮮的風格、更自由的排版以及創造不同視角時的對比來設計信息圖表。我還想更多地利用信息圖表的等距視角,因為我喜歡畫等距線,以此探索排版風格。對我來說,編輯設計和排版是長久的挑戰,因為這是我較少涉獵的領域。 

            

          BUSCADOR VIAJES


            

            

            

            

          Q3

          Q: 插畫是信息圖表中常用的設計元素,它在作品中的角色是什么?最需要注意的是哪些方面?   

            
          A:我認為插畫一方面撐起了文本和信息,另一方面增加了閱讀性和幫助理解。就像奧圖?紐拉特所說的“ words divide, pictures unite ”(意:話語相隔,圖像相合)。圖像易被理解的關鍵就在于,插畫創作時應做到讓內容變得簡單,更易理解。圖像或者插畫都必須起到解釋的作用。 

            

          undefined

                   AD&D/Ana Cuna,CD/Maria Rufilanchas,DS/Teta&Teta,2019

          與 Teta&Teta 合作的項目,在乳腺癌日幫助人們提高自查意識?!坝?70% 的女性從不自查乳房。每月一次,在月經后請檢查乳房是否有異常。如果有,請及時就醫。請不要害怕!因為 98 % 及時發現的乳腺癌病例最后的結果都是沒有問題的。” 


            

            

            

            

            

          Q4

          Q:與Netflix合作的插畫中,你加入了很多影視劇中的經典符號。你在創作前會把相關的影視劇都看一遍嗎?你如何把握和呈現插畫中這些小細節? 
            

            
          A:有個夏天我對Netflix非常癡迷,這組插畫里所關聯的全部劇集我都看了,非常喜歡。如此一來,我只需要做分析,把劇集里比較經典的元素找出來就可以了。 

            

          undefined

          ▲Netflix Series,2018
          AD         &         D / Ana Cuna CD / Adolfo Domenech DS / The Huffpost


          這是一個互動的演示項目,來呈現 Netflix 在 2018 年夏季西班牙播出劇集中最具影響力的主角。設計師以集合和等距的方式展示了《去他 * 的世界》、《胖妞星探》、《怪奇物語》、《毒梟》和《接線女孩》的人物和劇情環境。 


            
          當我做信息圖表的時候,我通常也是這樣分析全部信息的,不管是一部電影、一本漫畫還是一篇文章,過程都差不多。你必須做足初步理解,分析所有元素。在我們周圍的每一個事物都會有一個信息層級。 


            

          Q5

          Q:你為PDN?Education設計了多個城市信息圖表,包含了大量的插畫和文字、數據資訊。當面對復雜的資訊時,如何平衡插畫、資料和資訊的分布?要處理復雜的圖表時,設計的原則是什么? 
            

            
          A:如我所說,信息圖表設計的關鍵是對內容做好分析,再創建框架,以助信息分級。然后還是對信息的整理并在此基礎上加入必要的排版和插畫,好讓整個作品看起來是一個完整的系統:主插畫,輔助插畫的其他工具,以及排版。 

            

          undefined

          ▲PDN EDUCATION INFOGRAPHICS,2017-2019
          AD&         D/Ana Cuna,CD/Jacqui Palumbo & Stacey Goldberg,DS/PDN Edu


          在一個地方學習、生活和工作要花多少錢?這是一個信息圖表設計項目,旨在展示洛杉磯、博爾德、匹茲堡、菲尼克斯等地的攝影大學,讓人們了解當地生活成本,及這些城市的攝影工作場所的情況,以供相互比較。設計師創作了一系列結構相同、布局相同的信息圖表,呈現了不同城市在 2017 至 2019 年不同期雜志上的差異。 



            

            

          Q6

          Q:有沒有比較欣賞的信息圖表設計師或者插畫師?你怎么看信息圖表設計的發展前景?而對應的教育資源有做到相應的配備嗎?        

            
          A:我欣賞的一些信息圖表的設計師有弗朗切斯科?弗蘭基、阿圖爾?加拉切、Relajaelcoco工作室、Jing Zhang、羅姆瓦爾多?福拉等等。 

            
            

            
          因為信息圖表的培訓已進行多年,我相信教育在這一方面做好了相應的配備。我上面提到的人還有些曾經是我的老師!不管怎么說,我認為好的信息圖表培訓應該結合新聞工作以及平面設計培訓,并涵蓋插畫、排版還有編輯設計等。 

            


          BUSCADOR VIAJES


          把握信息表達的張力、排版能力、插畫創作以及整體設計感,對信息圖表設計師來說各有各的挑戰性,也讓信息圖表設計逐漸發展成為現代平面設計中的一大重要門類。 

          文章來源:站酷 作者:BranD雜志

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

          為什么高手的配色那么搶眼? 原來是用了CMYK 配色法!

          周周

          界面配色

          2016 年玩追波的時候,有幸加入了 FreedomUnion 團隊,當時團隊內的小D(Dea_n)的界面漸變風很受歡迎,他使用的顏色干凈、舒服、有感染力,很快形成了自己特有的設計風格。

          我被他的配色深深吸引了,特別想研究他的配色,就嘗試把他的作品在 PS 中打開,嘗試吸色,找找他經常使用的配色范圍。為什么他配出來的顏色就很吸引人,長時間看眼睛也不會太累?下面先欣賞一下小D(Dea_n)的設計作品。

          為什么高手的配色那么搶眼? 原來是用了CMYK 配色法!

          為什么高手的配色那么搶眼? 原來是用了CMYK 配色法!

          為什么高手的配色那么搶眼? 原來是用了CMYK 配色法!

          為什么高手的配色那么搶眼? 原來是用了CMYK 配色法!

          為什么高手的配色那么搶眼? 原來是用了CMYK 配色法!

          為什么高手的配色那么搶眼? 原來是用了CMYK 配色法!

          作品已經過了三年了,如果是一般的配色作品應該看上去會有些過時,但是小D(Dea_n)的作品看上去并沒有,還是有不少作品的配色現在看上去也是很前衛的。一起來看看我對小D(Dea_n)的大部分作品的吸色情況吧。

          為什么高手的配色那么搶眼? 原來是用了CMYK 配色法!

          小D(Dea_n)的用色著實很大膽,很多都是貼邊用色。我上大學的時候,老師曾經說過盡量少用貼邊的顏色設計,包括灰色也可以使用帶有顏色傾向的高級灰。這下終于明白了為什么小D(Dea_n)的配色這么亮眼。

          當然我也有自己的小發現,我發現每個的作品主配色的 CMYK 值總會有兩種色值為 0%,比如C:0%、M:91%、Y:95%、K:0%。

          為什么高手的配色那么搶眼? 原來是用了CMYK 配色法!

          為什么高手的配色那么搶眼? 原來是用了CMYK 配色法!

          為什么高手的配色那么搶眼? 原來是用了CMYK 配色法!

          為什么高手的配色那么搶眼? 原來是用了CMYK 配色法!

          為什么高手的配色那么搶眼? 原來是用了CMYK 配色法!

          難道只是偶然?當時我也請教過小D(Dea_n)是否是刻意的,得到的答案是并沒有。然后小D(Dea_n)靠自己卓越的配色能力進入小米 RIGO 設計團隊。

          為什么高手的配色那么搶眼? 原來是用了CMYK 配色法!

          當小米 miui9 系統官網海報出來的時候,我把作品拿到 PS 一吸色,結果告訴我小D 一定參與了這個作品的配色設計。那為什么只有黃色的 CMYK 的色值是有 3 種顏色混合而成的。

          難道僅靠著一點吸色就可以肯定 CMYK 配色方法的存在?CMYK 配色方法是不是只存在 UI 界面設計中?CMYK 配色方法可不可以增加它的擴展性?CMYK 配色方法可以作為一種配色方法幫助設計師完成色彩搭配的工作嗎?帶著這些疑問我繼續研究配色。

          圖標配色

          我們來看一下「子彈短信」的應用圖標,它的用色基本符合之前說的 CMYK 配色方法,當然是不包含子彈上的深色調。漸漸地我發現 CMYK 配色方法的路子越來越寬了。

          為什么高手的配色那么搶眼? 原來是用了CMYK 配色法!

          Asher 是追波繪畫寫實圖標的大神,他的寫實作品配色飽和度高,光影通透到位,需要很強的手繪功底。在他的設計作品中除去暗色調和深色調的部分,其他配色基本都使用了 CMYK 配色的技巧。

          為什么高手的配色那么搶眼? 原來是用了CMYK 配色法!

          為什么高手的配色那么搶眼? 原來是用了CMYK 配色法!

          大廠系統規范

          我們都知道 iOS 系統和 Android 系統,在他們各自的系統規范中對配色也有相應的規范。我們提取兩大系統規范中的配色進行吸色分析。

          為什么高手的配色那么搶眼? 原來是用了CMYK 配色法!為什么高手的配色那么搶眼? 原來是用了CMYK 配色法!

          一頓猛吸之后,發現大廠系統規范的用色也基本符合 CMYK 配色方法的標準。

          為什么高手的配色那么搶眼? 原來是用了CMYK 配色法!

          為什么高手的配色那么搶眼? 原來是用了CMYK 配色法!

          前段時間 IBM 重新定義了他們的設計語言,在產品配色中 Blye 60、Alert60、Alert40、Alert20、Alert50 等主要配色都符合 CMYK 配色的方法。

          配色中的主色或品牌色

          近期很多互聯網公司進行了品牌改版,深亮色調到淺亮色調慢慢成為一種趨勢。

          為什么高手的配色那么搶眼? 原來是用了CMYK 配色法!

          新版的 Facebook LOGO 從深藍色變為亮藍色,字體則繼續保持原樣。其中 CMY 值進行適當減少。除此之外,圖標部分也由原來的圓角正方形變為圓形,圖標中的「f」從偏右的位置移到圓形的中間位置。

          為什么高手的配色那么搶眼? 原來是用了CMYK 配色法!

          全球旅行者喜愛的民宿預訂平臺 Airbnb 的品牌 logo 主色也符合 CMYK 配色的方法。和 2019 潘通流行色珊瑚橘很接近。

          為什么高手的配色那么搶眼? 原來是用了CMYK 配色法!

          微信 7.0 版本使用了經過調整的全新圖標。圖標除了原來綠色漸變的背板變淺外,兩個標志性的對話氣泡與背景板的比例也做了相應的調整。色彩的 CY 值減少了。調整后的新版圖標除了空間感和符號感也更強外,整體變得「更輕」了。

          為什么高手的配色那么搶眼? 原來是用了CMYK 配色法!

          在網易云音樂 6.0 版本中,對品牌 LOGO 再次進行了調整。新版網易云音樂圖標最明顯的變化為紅色的主色調,其次為「留聲機」和「音符」組合而成的圖形部分。

          紅色較之前變得更加明亮,同時圖標紅色背景由之前的純色改為輕微的紅色漸變填充。新的紅色著重考慮了用戶長時間使用屏幕造成的視覺疲勞,采用比較「輕」的色彩可有效降低這種問題。其中顏色 CMY 三種色值都有減少。圖形部分,新版圖形縮小了中間交叉部分的面積,頂部向右彎曲的弧形變大。整體效果較之前更加清晰,特別是在更小的應用尺寸中,其展示的效果明顯要比之前的好。

          不同顏色CMYK的色域范圍

          看到上面的描述是不是特別想知道當 CMYK 中的兩個色值同時為 0 時,不同顏色的色域范圍?帶著這樣的想法,把紅橙黃綠青藍紫中每類選一種顏色進行區域研究。打開 PS,在拾色器中截取不同顏色的色域范圍如下:

          為什么高手的配色那么搶眼? 原來是用了CMYK 配色法!

          上圖白色區域就是在紅色 C 值為 0、K值為 0 時的色域范圍,范圍還是很小的。

          為什么高手的配色那么搶眼? 原來是用了CMYK 配色法!

          黃色的 CMYK 色域很奇怪,在色相 38-58 度的黃色純度最高時,CMY 都有色值。也就是 PS 里面最純的黃色也是由 CMY 復色調和而成的。這也是為什么之前黃色使用時,CMYK 色值是由三種顏色混合而成的。

          為什么高手的配色那么搶眼? 原來是用了CMYK 配色法!

          上圖白色區域就是在綠色 M 值為 0、K 值為 0 時的色域范圍,范圍開始慢慢變大,意味著綠色高飽和度的可使用顏色越來越多。

          為什么高手的配色那么搶眼? 原來是用了CMYK 配色法!

          上圖白色區域就是在綠色 M 值為 0、K 值為 0 時的色域范圍,范圍也開始慢慢變大,大體范圍和綠色相當。

          為什么高手的配色那么搶眼? 原來是用了CMYK 配色法!

          上圖白色區域就是在藍色 Y 值為 0、K 值為 0 時的色域范圍,范圍應該很大了。

          為什么高手的配色那么搶眼? 原來是用了CMYK 配色法!

          上圖白色區域就是在紫色 Y 值為 0、K 值為 0 時的色域范圍,范圍和藍色的色域范圍相當。

          為什么高手的配色那么搶眼? 原來是用了CMYK 配色法!

          上圖白色區域就是在洋紅色 Y 值為 0、K 值為 0 時的色域范圍,范圍和藍色、紫色的色域范圍相當。

          1. CIE

          從理論上講,可見光分布的色彩域就是 CIE 所表示的色域。在顏色感知的研究中,CIE 1931 XYZ 色彩空間(也叫做CIE 1931色彩空間)是其中一個最先采用數學方式來定義的色彩空間。從 CIE 圖中能看出冷色的區域遠遠大于暖色的區域。其中黃色和紅色的色域范圍相對較少,完全符合 PS 拾色器里面的色域范圍。

          為什么高手的配色那么搶眼? 原來是用了CMYK 配色法!

          2. RGB

          RGB 是計算機熒光屏顯示顏色的色彩方式,它們是由 R、G、B 三種發光質通過加光混合產生的。RGB 色彩模式是一種加色模式,將紅光、綠光和藍光以不同的比例相加可以合成各種各樣的色光。R、G、B 三種顏色各能產生 2 的 8 次冪,即 256 級不同等級亮度的顏色。256*256*256 即 16777216種顏色。RGB 色彩模式主要用在電腦顯示器和電視上。RGB 色彩模式是繪圖軟件最常用的一種顏色模式。

          3. CMYK

          CMYK 由C(青)、M(品紅)、Y(黃)、K(黑)四色高飽和度的油墨以不同角度的網屏疊印形成復雜的彩色圖片。CMYK 色彩模式是一種顏料模式,它利用色料三原色混色原理,加上黑色油墨,形成各種各樣的色彩。

          這種模式屬于相減混色模式,廣泛運用于繪畫和印刷領域。CMYK 的色域范圍比 RGB 的色域范圍要小,某些色彩無法用 CMYK 油墨印刷出來。當這些不能印刷出來的顏色出現時,在 PS 的「拾色器」對話框上會顯示一個帶感嘆號的三角形警告標志,表示這些顏色超出 CMYK 的色域。即使設計了比較鮮艷的顏色,如果超出了 CMYK 印刷顏色的色域,計算機就會用一個接近它的較灰暗的顏色去頂替它??梢姶蟛糠?CMYK 印刷顏色的色域小于 RGB 屏幕顏色的色域。

          為什么高手的配色那么搶眼? 原來是用了CMYK 配色法!

          我們來仔細研究下 CIE 色域范圍,CMYK 當中的黃色色域值有一小段超過了 RGM 的色域值。這就說明黃色的更飽和的 CMYK 的原色和間色可能在 RGB 的范圍之外。

          其他的我們還有一個方法去驗證。就是在 PS 里面新建顏色模式為 CMYK 的文件,打開拾色器界面,把顏色調到右上角改變色相值的 0-360度 的范圍。色相在 38-58 度的黃色區域對話框上不會顯示帶感嘆號的三角形警告標志,表示黃色區域的 CMYK 色域值是超過 RGB 的色域值。這就是為什么 iOS 系統規范中的黃色色值必須是三種顏色混合而成的。這時候特殊的顏色就需要特殊處理。

          為什么高手的配色那么搶眼? 原來是用了CMYK 配色法!

          CMYK配色法使用技巧

          CMYK 配色法就是兩種顏色的色值為 0%,但是黃色因為色域問題是由三色組成的(c值盡量小于10)。

          色域集中在純色系的范圍,濁(灰)色系和暗色系除外。

          界面的主色(純色系為主)、圖標設計、品牌色(純色系為主)都可以使用 CMYK 配色法。

          總結

          CMYK 配色法目前多適用于互聯網產品,雖說在創意上要敢于創新,但在實際的工作中還是需要理性地根據公司品牌和產品定位,合理地進行色彩搭配。目前此方法沒有更多的理論依據支撐,如有疑問希望多多交流。


          文章來源:優設網     作者:水手哥



          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合