
無論是設計網頁還是海報,背景圖片都是最常用、也最能體現當下設計趨勢的一種設計元素。在設計APP 的時候同樣是如此。過去的10年當中,用戶的品味發生了不小的變化,而現在,整個設計趨勢上,似乎正處在一個關鍵的轉折點上。
在我們所能觀察到的諸多設計當中,淺色的背景是當之無愧的主流。淺色背景本身就不太可能喧賓奪主,讓視覺主體更加突出。而如今,我們逐漸發現,背景還具備補充主體的功能,并且這種補充是潛移默化的。背景的功能性其實還可以強化,這種思路可以在如今的APP 界面設計當中應用,讓整體設計更加平衡。
如今的UI設計師大都明白在背景中融入元素來吸引用戶的眼球,提升產品調性,提高內容的可讀性。而這也促使圖片、插畫、色塊等元素在背景當中發揮了更大的作用。
分屏式設計并不新鮮,它是一個存在了很長時間的設計趨勢了。在桌面端的屏幕上,分屏式設計一直都很有效,寬廣的屏幕讓設計師有足夠的施展空間,但是在移動端上則是個挑戰。
在 UI 設計師們找到了解決方案,對比色是增加視覺吸引力的最佳方式。
在 Tubik Studio 的這個設計案例當中,設計師使用不均等分布的色塊來分割屏幕,同時使用白色背景區塊來承載主體內容,避免被背景色彩干擾。設計師充分利用了對比色的對抗性,以及和白色之間的對比度,功能完善,但是有趣又漂亮。
雖然在背景圖片中疊加各種圖形化的元素聽起來很奇怪,但是確實是逐漸流行起來的一種背景設計玩法。不過,這存在一種風險,就是如果疊加太多的圖形化元素,會讓整體看起來過于雜亂。盡量在豐富視覺和制造視覺污染之間找到平衡,最終的設計效果,能夠給你帶來意料之外的優質效果。
雖然手機越來越大,但是屏幕空間依然很寶貴。通過疊加一些特定的圖形元素來創造視覺深度,給用戶以空間感。
這種背景設計的另外一個好處在于,你可以讓整個UI顯得更加富有視覺吸引力。在設計的時候,需要注意的是,要保持元素之間的一致性,確保不同的元素在屏幕上呈現的時候,仍然保持協調。
使用整張圖片作為背景,一直被UI/UX領域的設計師所爭論。對,你沒看錯,這個事情一直存在爭議。有人非常喜歡使用圖片背景,有人則完全無法接受這種呈現方式。
但是撇開個人喜好,趨勢上,這種背景運用方式還是越來越流行了。在APP的UI界面中,如果你能靈活自由地使用全屏背景的化,對于接下來的設計肯定是有所助益的。
圖片所呈現的信息量當然是毋庸置疑的,更重要的是如何貼合品牌和氛圍,呈現出應有的氣場。
當然,最核心的技巧,是在于透明度的控制,和內容框的設計。為了避免信息和背景之間的對比度不足,合理的方法是使用內容框將前景的元素承載起來。而為了避免背景圖片喧賓奪主,還可以借助透明度的控制,來確保背景圖片更加平滑自然,不會影響到閱讀和使用。
漸變色在幾年前回歸之后,在設計當中的運用范圍越來越廣。漸變色不僅賦予設計更加強烈的個性,而且能夠和用戶之間產生足夠的情感共鳴。
你可以使用漸變色來營造調性,創造對比,甚至還可以借助漸變色才來作為視覺線索和引導。比如當你在背景中使用藍色的時候,可以通過深淺漸變來創造方向性,引導用戶向特定的地方瀏覽。
但是,漸變色背景流行起來最重要的原因還是它的情感共鳴的能力。許多 UI 設計師已經意識到心理因素在移動端設備中的巨大影響,能否喚醒用戶的情感是關鍵。
漸變色背景的設計玩法有很多,變化幅度的大小,方向,對比度和亮度的變化差異,都會帶來不同的影響。當然,漸變背景同樣必須遵循一個原則,那就不能喧賓奪主。在設計的時候,同樣可以借助透明度的調整,來降低它和CTA按鈕之間的對比度。
插畫師可以根據需求更加自由地繪制足以滿足不同需求的插畫,獨特,個性,定制化。不過,想要創建足以代表企業、團隊、產品或者用戶角色的插畫,并不能憑空創建,而是需要一個研究過程,通過調研和分析,才能提出需求,再做執行。它是一個機器人,還是一個更加擬真的角色?又或者使用動物擬人化的形象更合適?
許多設計師更加傾向于在APP中使用自定義插畫,因為這樣更加自由輕松地達成各種目標,從新用戶引導,到提供教程。
幾何圖形本身是非?;A的元素,它們的含義和感覺非?;A,也具有普世性。雖然它們很簡單,但是在UI 設計中非常強大。單一的幾何形狀是簡單的,但是結合不同的效果、不同的組合,即使使用簡單的幾何形狀,也能夠發揮出多樣的變化。
當然,具體怎么運用幾何圖形,還要看你的UI界面上,有哪些東西,作為背景的幾何圖形和 UI 中的主體元素之間,空間關系要怎么控制,怎樣保持優雅簡潔,確保品牌信息的傳達。
就像 UI 界面中其他的元素一樣,背景同樣值得關注和規劃。最重要的是,你想表達什么,傳達什么樣的信息,想借助整個UI 界面來實現什么樣的功能,規劃好了才能更好地呈現內容。
背景的選取之所以會成為UI設計趨勢的關注點,很大程度是因為UI 和UX 設計的關注點開始越來也深入到設計的方方面面,大家考慮問題也需要越來越細致。
文章來源:快資訊 作者:衍果設計
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
很多網站仍然在使用老舊的頁面設計,比如國內一些企業官網,萬年不變的相類似的模板,外國的則是hero頁面,帶CTA按鈕,三欄式的布局。這些設計不能說是不好的設計,很實用,用戶能夠預測展示的內容,也容易找到需要的內容。但是正因為可預測,用戶沒有新鮮感,沒有期待,所以我們找了一些不僅打破常規,也依然有良好用戶體驗的網頁設計。
藍藍設計(北京蘭亭妙微科技有限公司)是一家專注而深入的UI設計公司,公司對UI設計的追求一向很高,致力于為卓越的國內外企業提供卓越的手機app/安卓ui設計、軟件界面設計、網站設計,用戶研究、交互設計服務。
接下來是精彩的UI設計賞析
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。
前兩天一個從事UI設計的朋友問了我一個這樣的問題:我從事UI設計一年多, UI設計上的一些基本知識差不多已經掌握,但是想更進一步的提升下自己,讓自己的作品更加有優秀,但不知道從哪里入手?胡老師有沒有什么好的建議。今天給大家分享十個UI設計套路!
1 盡量使用單列而不是多列布局
單列布局能夠讓對全局有更好的掌控。同時用戶也可以一目了然內容。而多列而已則會有分散用戶注意力的風險使你的主旨無法很好表達。最好的做法是用一個有邏輯的敘述來引導用戶并且在文末給出你的操作按鈕。
2 放出禮品往往更具誘惑力
給用戶一份精美小禮品這樣的友好舉動再好不過了。具體來講,送出禮品也是之有效的獲得客戶忠誠度的戰術,這是建立在人們互惠準則上的。而這樣做所帶來的好處也是顯而易見的,會讓你在往后的活動進展(不管是推銷,產品更新還是再次搞活動)中更加順利。
3 合并重復的功能而使界面簡潔
在整個產品開發期間我們會有意無意地創建很多模塊,版面或者元素,而它們的功能可能有些是重疊的。此種情況表明界面已經過度設計了。時刻警惕這些冗余的功能模塊,它無用且降低了電腦性能。此外,界面上模塊越多,用戶的學習成本就越大。所以請考慮重構你的界面使它足夠精簡。
4 客戶的評價好過自吹自擂
在獲得項目機會或提高項目轉化率時客戶的好評是一種極為有效的手段。當潛在客戶看到其他人對你的服務給予好評時,項目機會會大增。所以試著提供一些含金量高的證據證明這些好評是真實可信的。
5 頻繁展示你的主旨來加深印象
多次重復主旨口號這種方法適用于界面很長或者分頁的情況。首先你肯定不想滿屏刷出相同的信息,這樣會讓人生厭。但當頁面足夠長的時候這些重復就顯示自然多了并且也不顯得擁擠。所在在頁面頂部放一個按鈕然后在頁面底部再適當放個突出的按鈕的做法沒有什么不妥。這樣當用戶到達頁面底部在思考接下來該做什么的時候,你提供的按鈕就可以獲得一個潛在的合同或者即使用戶不需要你的服務這個按鈕也可以起到過濾的作用。
6 將選項與按鈕區分開來
諸如顏色,層次及模塊間的對比這些視覺上的設計可以很好地幫助用戶使用產品:他時刻知道當前所處的頁面以及可以轉到哪些頁面。要傳達這樣一個好的界面,你就需要將可點擊的元素(比如連接,按鈕),可選擇的元素(比如單選多選框)以及普通的文字明顯區分開來。在下圖的例子中,我將點擊操作的元素設置為藍色,選中的當前元素為黑色。這樣適當的設計可以讓用戶很方面地在產品的各模塊間切換。但千萬不要把這三種元素設計得混亂不堪。
7 給出推薦而不是讓用戶來選擇
當展示許多項服務時,給出一個重磅的推薦項是個不錯的做法,盡管推薦的設置無法滿足所有用戶。這么做是有理論依據的,一些研究已經揭示了這么一種現象:當面臨的選擇越多時,用戶就越難做出決定。所以你可以高亮某個選項來幫助用戶做出選擇。
8 給出撤銷操作來代替確定操作
假設你剛點擊了一個連接或者按鈕,撤銷操作可以讓操作流暢自然,這也符合人類的本能。而每次操作都彈一個確定框則好像是在質問用戶你明白不明白這個操作會產生什么后果。我還是更習慣假設用戶每次操作都是正確的,其實只有極少數情況下才會發生誤操作。所以,為了防止誤操作而設計的確認窗口其實是不人性化的,用戶每次操作都需要進行毫無意義的確定。所以請考慮在你的產品里實現撤銷操作來增加用戶的操作友好度吧。
9 指出產品適用人群而不是做成全年齡
你是想把產品做成大眾化的呢還是有精確的適用人群?在產品定位上你需要更精確些。通過不斷了解目標客戶的需求及標準,你能把產品做得更好得到更多與客戶交流的機會,并且讓客戶覺得你很專業,在這方面是獨家提供的優質服務。把產品定位得精確的風險就是可能縮小了目標潛在客戶的范圍,也使自身變得不那么全能。但這種做得更專業的精神卻反過來會贏得信任,權威。
10 試著直接果斷而不要唯唯諾諾
你可以通過不確定而顫抖的聲音來表達傳遞自己的意思,當然也可以通過很自信的方式表達。如果你在界面中的表述用語多以問號結束,比如"也許","可能","感興趣?" 或者"想要試試么?",那么你完全還可以把語氣變得更堅定一些。不過萬事無絕對,或許適當放松措詞讓用戶有自行思考的余地也是可以的。
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
移動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設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
最近,我花了一些時間觀察UI設計的發展方向。我偶然發現了一些非常有創意的趨勢,我認為這些趨勢將在不久的將來將重新塑造UI設計。
以下是根據我的觀察得出的10種趨勢:
新形態在不斷發展,我想它會一直存在(無論你喜歡與否)。它最初的形式并沒有持續很長時間,但是它正在朝著更加復雜和易于訪問的方向發展。這幾乎就像擬物象,但有一種新鮮、現代、更美學的氛圍。
漸變無處不在!實際上,我在背景和UI元素(例如按鈕,卡片和圖形)上看到了很多。
混合兩種以上的顏色以創建一個彩色模糊的背景也是一件事!
無論是作為主要的背景或主題,還是只是讓設計看起來更有趣的一個細節——幾何元素越來越受到關注。通常將它們混合在一起以創建馬賽克——結果看起來非??幔?
不得不說我喜歡這種趨勢,我見過許多令人驚艷的、輕量級的、美觀的設計,其具有非常精致、明亮柔和的配色方案。
它使設計看起來非?,F代、沒有干擾、清新而令人愉悅,其中內容扮演主要角色,其他一切只是一個微妙的背景。
插圖仍然很流行,不同的樣式、配色方案、或多或少的抽象,所以它們符合產品的特點。不僅是平面的,而且還模仿了3D的外觀。我相信這是一個很好的改變,在地球上的每一個數字項目使用了這么多年的庫存圖片之后,我在這里給出了一些有關如何創建簡單插圖的提示:
用于背景和不同的UI元素,它們使界面看起來更“有機”和好玩,我認為這是一件好事。使用鋼筆工具編輯最簡單的形狀(正方形,橢圓形),使用不同的邊框半徑,嘗試使用不同的顏色/漸變,你可能會得到一個非常有趣的結果。在這里嗎,我們或許可以嘗試一下這個簡單卻神奇的工具Blobmaker。
暗模式是界面的顏色反轉版本,以使其在晚上更易于訪問。由于我是典型的夜貓子,因此我經常在晚上使用深色模式。創建暗模式時,記住要在不同元素和版式之間保持正確的對比。
不僅用于Dribbble shots,而且還用作以非標準方式在網站上呈現不同內容的方式。它使內容看起來更有趣和吸引眼球。那么,如何快速實現這一效果呢?首先,對0度的角度拼貼元素。把他們分成一組。然后,更改組角度(從30°到50°),瞧!這樣,你就不必手動更改每個元素的角度了。
這是另一個我最喜歡的趨勢,柔和的陰影使UI看起來更深入。這種效果通常非常微妙,但在美學上令人愉悅。一般來說,陰影使某些UI元素變得“可單擊”,并且它們有助于區分內容之間的層次結構。你可以在此處了解如何進行操作:
我從不喜歡比較薄的字體(在iOS7時代),所以我很高興看到這種趨勢消失了?,F在,我正在觀察使用更粗、更簡單的形式(幾乎為方形)的可讀字體。它們使界面看起來更加現代和優美。如果你要搜索類似的產品,可以試試Poppins、Montserrat(免費)、Gilroy、Sofia Pro、Proxima Nova(付費)。
來源:Diana Malewicz:10 Newest and promising UI design trends
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
對第一回還有印象的朋友應該知道,平面設計的定義簡單說來就是:“以某種法則,將文字、圖案、攝影圖片在平面空間中進行編排設計,以達成信息傳達或者行為引導等目的的活動”。
△ 圖文結合的平面設計作品
這個定義大致在 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 張由人造燈光配合的現場照片,最后配以文字發表在法國刊物《插圖雜志》上,讓那一期的刊物銷量大增,因為讀者可以配合生動的照片更好了解內容,當時而言顯得非常有趣。
從此之后,照片與平面設計的關系變得越來越重要,越來越多平面設計師也開始進一步探索照片與排版之間的法則。
大家是不是很好奇別人的圖形怎么都這么有創意,而自己想設計圖形的時候卻無從下手??赡苁沁€沒有掌握方法。今天就分享一個圖形創意的方法。希望大家了解后,在設計圖形的時候有一個清晰的思路。
△ 插圖來自日本插畫師 Yu Nagaba
我們先來看這個圖形,大家能認出這是誰嗎?
沒錯,是愛因斯坦。為什么僅僅幾條簡單的線條,就能把一個真實的人物刻畫出來呢?這就是我們今天講的內容,如何去簡化并且衍生成完整的圖形。
簡化的圖形一直是趨勢。它不僅僅利于快速傳播、具有非常強的延展性,也經常作為海報的主體。
標志上也大部分以圖形為主。所以作為設計師,簡化圖形的能力是必不可少的。
但是很多人對于圖形簡化還沒有一個清晰的理解,更多的只會在圖片的基礎上進行簡單的描摹。
這樣描摹出來的圖像很可能缺乏識別度,就像這個例子,描摹出來后它到底是狗呢,還是狼呢?
簡化的第一步是確定基本元素??偟膩碚f,就是什么元素能夠確定這個物體的種類。比如玫瑰是確定它是“花”這一種類。什么元素能讓我們辨別它是花而不是其他東西呢?
枝莖加上花苞,以及紅綠配色就可以讓我們辨別它是“花”的種類了。至于葉子就屬于補充元素。這都是讓我們辨別它的種類的基本元素。
玫瑰花苞和枝莖的常態關系是:花苞在枝莖的末端。如果隨意變換關系,會影響最簡形態下的識別度,所以前期簡化最好不要做變化。
雖然這兩個步驟能確定它的種類是“花”。但是它是什么花呢?我們還分辨不出來。就需要到第三步,找到圖形的重要特征。
這個時候玫瑰花就需要以種類內的事物做參考。也是和其他花做對比。找出玫瑰花區別于其他花卉的重要特征。
紅綠配色是我們對玫瑰的印象。玫瑰的枝莖帶刺。玫瑰花的花瓣開得比較緊密,花瓣層層包裹像漩渦一樣。這些都是玫瑰比較明顯的特征。
分析完這些特點,我們只需要在原有的元素關系上加上這些特點,就能分辨出它是玫瑰花了。而這些特點可以在保證識別度的情況下任意刪減組合。
比如說去掉刺也能通過其他特征辨別玫瑰?;蛘弑A舸?,去掉花瓣的細節,如果對于玫瑰有刺這一點比較熟悉的人來說也可以辨別它是玫瑰。又或者保留所有的圖形細節,把顏色變成黑白,都是可以的。
我們剛剛說的玫瑰是本身自帶的特征,其實在現實生活中還存在其他因素影響的特征。
比如附加特征,這個圖形我們都能分辨它是鳥,但是具體是什么鳥卻看不出來。
一旦加入橄欖枝,啊,我們就知道,它是鴿子。鴿子本身是沒有橄欖枝的,它代表和平也是人類賦予它的象征。所以這些屬于附加特征。
還有狀態特征,比如壁虎,哪種壁虎的狀態和角度更容易讓你辨別它們的身份呢?我相信應該是能看到壁虎緊緊抓在墻上的狀態。所以它的狀態是否能體現它的身份,也是很重要的一點。
現在的示意圖它只是隨便畫出來的,如果用在設計中,這個圖形是不合格的,所以需要對它進行改造。
衍生圖形主要從兩個角度入手,風格化和陌生化。
比如花的漩渦狀可以用同心圓表現?;ò冒雸A形、枝莖和葉子同樣用最基本的形狀概括。
這個風格的圖形非常簡單,會顯得它的完成度不高。所以這時就需要陌生化的處理,讓它在創意想法上有亮點。
比如我們把同心圓的顏色改變,雖然辨識度少了。但是這種創意圖形加上文案與畫面氛圍,可以判斷出它的身份。
那么漩渦一定要圓形的嗎?
帶著這種疑問,我們就可以開始第二個衍生。以四變形為基本形,通過旋轉不同角度,再加上漸變風格。第二個圖形就衍生出來了。可能這兩個會偏抽象一點,那也可以選擇保留更多的特征。
就像這個圖形的外形和線條刻畫上更大地保留了玫瑰形態,所以在顏色上就可以不用完全遵循現實。
很容易,三個不同的圖形就完成了。
因為圖形衍生的過程對于想法、造型能力、不同風格的掌握有所要求,沒辦法通過簡單的理論來分析,接下來會通過分析四個不同的案例的衍生方式,給大家提供一些衍生的思路。
螃蟹它的顏色是橙紅色。蟹鉗是螃蟹比較明顯的特征。蟹的八條腿可以作為輔助元素。它的軀殼偏圓形。這些特點的組合就能呈現一個非常清晰的螃蟹的形象。但是別忘了圖形的衍生是需要對特征有所取舍和變化的。
為了讓螃蟹看起來更加的陌生化,我們可以考慮改變印象中螃蟹的常見形態,讓它以一種更加有趣的動態呈現,比如讓這個多爪動物以一種太陽一樣的放射狀呈現,變身元氣螃蟹。
第二個方案保留圓形的身體,加上尖銳的蟹鉗特征,就完成了一個新的螃蟹圖形。雖然顏色的變化和少了八條腿的特征,但是在保留其他特征時作出的變化卻也能讓我們清晰辨別它是螃蟹。
那傳統的螃蟹都是圓形的身子,我們能不能嘗試把螃蟹的身體變方呢?帶著這種思考,保留其他特征的同時作相應的風格化處理。又一個新的圖形產生。
這些就是螃蟹部分的衍生圖形。
火龍果的配色是很明顯的特點。表皮會帶有綠色的鱗片。相對橢圓的身體?;瘕埞前咨墓夂秃谧训慕M合。
第一個衍生很簡單的,就是簡化火龍果的外形,最后變化顏色。
這一次同樣保留火龍果的外皮特征,因白色果肉和黑籽的結合讓我聯想到骰子,我們可以把這個想法和火龍果結合一下,讓它變得更加有創意。
使用不尋常的切塊方式,也能產生另一個圖形。
這些就是火龍果部分的衍生圖形。
顏色同樣是我們辨別它的一個很重要的特征。除了顏色,我們還可以看到西瓜的表面有條紋的覆蓋。像是西瓜這種簡單的圓形水果,切塊之后的造型,可能會更有辨識性。是一個很好的附加特征。最后,黑色的瓜籽同樣是我們辨別西瓜時的一個顯著特性。接下來就需要對它們進行風格化的處理。
西瓜的條紋部分,這一次我們用幾何圖形來做一些嘗試。錯位再壓縮,讓條紋的比例感更強。加入半圓形的西瓜切塊之后,感覺有點像是人臉對吧?那我們就順勢添加一個眼睛,讓它擬人化。
符合了這么多特征之后,造型上就不用那么寫實了,我們完全可以抽象一些來繪制它。加入之前的眼睛和切塊之后,它就完成了。
西瓜切開后的這個形狀特征讓我們很容易辨別它的身份,所以就可以保留這個形狀特征,做一些大膽的變化。
比如顏色上可以完全脫離西瓜原有的顏色。用幾何色塊的方式去填充造型,讓風格化的更強烈。到這里,這個圖形也就完成了。按照這種思路,能不能保留配色,但是在切塊的形狀上進行改變呢?
那就到了第三個衍生,我們把它分成三塊去表現西瓜的層次。因為造型已經足夠抽象了,所以這里我們用顏色去盡量還原西瓜的印象。組合到一塊,是不是就有西瓜切塊的感覺了呢?
我們把這個數量增加一些,就更有辨識度了,再調整里面的一點變化。那么到這里,這個圖形也就完成了。
這是西瓜部分的衍生。
青蛙是綠色的,由于身體和四肢的對比,會感覺四肢很細長。另外后爪很長,并且有蹼。彎曲的后腿是青蛙比較特別的地方。
這一次,我們可以從造型上做變化。比如切斷連接四肢的關節部分,不過這樣的造型在美感上還不是很理想。
那么嘗試到這里,覺得下面的這個腳的直線結構很有趣,是一個很有變化性的特點。所以我們可以按照這個方向再去嘗試一下。
把手臂的部分也修改成直線的樣式,那么這里這個圖形就完成了。
這一次,我們把目光聚焦到青蛙細長的四肢上,為了讓造型看起來更生動,這個圖形我決定打破對稱的方式。將四肢和身體的比例做一些夸張的處理,讓身體更小,四肢更大。爪尖用來劃水的蹼也同樣做了夸張的處理。那么在這個過程中,我們會繼續擺放四肢的位置,讓每個部分的空間看起來更均衡一些。
強調了四肢之后,我們還可以反著來,嘗試強調身體的部分。為了讓四肢看上去更細小,這一次我們用線條來繪制。
這是青蛙部分的效果。
來回顧一下我們這篇教程所有的圖形。
我們從極簡化的元素開始,通過不同特征的組合與變化,再為它添加陌生化和風格化的處理,就能能衍生出非常多形態各異、各種風格的圖形。
文章來源:優設網 作者:研習社
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
這周繼續做我們的作品,感覺實現了功能不是很多,而我們把更多的精力投到了界面的修飾上,感覺以前的界面太不好看,和人家正規的瀏覽器相比簡直不堪一擊.在這周我感受最深的就是一款軟件的成功以否不僅僅在于功能的強大以否上,界面也占了其成功因素的半壁江山.
作品開始準備以前就聽八期的師哥師姐說,界面的美觀,協調,布置合理等是一款軟件成功不可或缺的因素.前幾次作品展最后獲勝的都是界面漂亮,和諧,布置合理,非常吸引人的作品,例如寶寶樂園等,他們運用了Flash等工具,的確非常漂亮吸引人!通過這周的做作品和觀察比較流行,受歡迎的軟件,我發現一款軟件界面的重要性和設計界面需要注意的事項。
重要性:
1,軟件的界面相當于我們人的整體外表,相當于我們人的氣質等。誰都知道我們希望自己漂亮一些,希望自己有氣質一些,這些不僅可以增加我們的人氣,更可以幫助我們披荊斬棘,更加順利走向我們的目標。當然,軟件的界面美觀與否,直接影響著人們使用此軟件時的心情,進而影響人們對此軟件的喜歡與否。而那些所謂的強大的功能是在人們喜歡這款軟件之后再考慮的問題。
2,功能菜單的布局,這個布局合理與否,是否符合大眾的使用習慣。也直接影響著使用者對此軟件的喜歡與否。如果一款軟件的各項功能菜單布局不合理,不符合大眾化,那么再強大的功能,使用者也找不著,那樣也白搭。所以界面的布局也是非常重要的。
總而言之,界面的設計,直接決定著使用者對這款軟件的第一印象,直接決定著使用者對其的青睞與否。
在這里我想向大家提出幾點注意事項:
1,色調的選擇,在這里主要以和諧,舒適感為目標。色調的選擇要是使用者感到非常舒服,色彩的搭配更要凸顯界面的和諧優美。
2,功能菜單簡潔明確,主次分明。按鈕的功能要簡單明了,易于使用掌握,主次要分清,分清使用者使用此軟件的主要功能,常用功能和附加功能,處處以使用者的角度去想問題.設計軟件.
3,符合常規邏輯思維,給用戶以很好的引導作用,良好的界面布局,會給用戶操作帶來方便和引導,軟件使用起來流暢自然。設計不合理的界面,用戶往往要費一些時間去找功能塊啦、按鈕啦、定位文本框啦,甚至根本不明白軟件再說什么,還得自己去理解它的意思。
4,我們在制作軟件時,要懂得虛心向別人請教,尤其是界面問題,往往我們的缺點我們自己難于發現。如果必要的話,我們可以做問卷調查,向更多的用戶調查需求,從而更有助于我們做出符合大眾需求的軟件產品。
總而言之,界面是軟件非常重要的一大項,我們要對他重視起來,不要一味的把心思全投放到功能的實現上。當然我們做軟件的每一點都要以使用者的心態,使用者的需求去設計,界面是軟件的門戶,更是如此。如何讓使用者用著更方便,更開心,更簡捷,我們就如何設計,完全貫徹“全心全意為人民服務”的理念。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
排版將文字從單純的文本轉換為巧妙的交流方式。字體和類型設計可以說出這么多–從突出的粗體字體到精致的襯線字體。從傳統的永恒變化到全新的技術。
字體在現代文化和商業中的突出地位受到包豪斯藝術運動的影響。赫伯特·拜耳(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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
全文1萬4千字,講解文字編排有兩個層面的作用。其一,它做了一些傳遞信息的工作;其二,它自身在合理地編排下就會有韻律的美感。
在通常版式設計中,一般是由文字、色彩、圖形三個要素組合而成的。通過這三個要素的有機搭配,從而給人視覺上造成一定的沖擊,激發人們的閱讀興趣。
其次,文字組合編排是構成版式設計中最主要的構成要素,也是傳遞信息的重要的設計手法和策略。字體的選擇是否合適則會直接影響版式的效果,雖然能現在可供選擇的字體五花八門,但是所選擇的字體要能夠與版式的主題相吻合。除此之外,文字的字號也會影響閱讀,在排版時要注意文字信息的等級關系,做到有主有次。
如果文字從發明出來的那一刻起,就是為了記錄和傳遞信息,那在版式中的文字就是通過設計設計手法來更好的傳遞信息。
怎么去理解這句話呢?如果大家看過《王牌對王牌》這節目,里面有個游戲叫傳聲筒,里面的游戲規則是“每隊輪流參賽,每隊任選5名成員,每個成員用隔板隔開,第一人將對手所出題目,演繹給隊友,只能通過音效和動作表達,依次傳遞給下一位隊友,經過三四個人傳遞后最后一名隊友,猜測題目上的信息。猜對得一分,最終積分高的一隊獲勝?!?
這種形式像不像設計師的日常呢?老板或者領導有個“牛批卡拉斯”的想法,然后他在想法告訴運營總監或者文策劃總監,然后在由下面的運營/策劃專員做成方案,最后在交給設計師做成圖片來傳遞老板那個“牛批卡拉斯”的想法。
那么文字組合怎么去編排就成為將老板的想法完美的傳遞出來的關鍵要素,為了不南轅北轍,我們需要將文字編排的形成方案,并在實際的工作中通過不斷的實踐去完善,那讓我們一起來了解下文字組編排的技巧吧。
一般的軟件里面都會有字體選擇器,我們需要找想要的字體的時候都是直接在里面去搜索,然后再去點擊使用,那么今天我來看看怎么通過觀察字體家族的特征來找到我們想要的字體吧。
家庭中的所有成員都有各不同的稱謂來辨別身份,在字體家族中也是如此,我們通過不同的前綴后綴的縮寫來區別字體的樣式。
例如:字體前面的LT代表的是萊諾字體公司,如果我們使用的字體前面或者后面帶有LT,那就說明這個款字體是由萊諾字體公司出版的。
當然,我們日??吹阶煮w廠家也會有很多,例如常見的MS是微軟公司,MT是蒙納字體,ITC是國際字體公司等等,一般字體公司的名稱的縮寫為連著的大寫字母,所以我們看到字體中帶有2-3的大寫字母,我們可以默認他們是字體公司的名稱縮寫。
那剛剛我們看到LT后面還有STD,那個是什么意思呢?STD是英文單詞“Standard”的縮寫,代表著這個字體只支持基礎的字符集,它的字體字符集相對會少點,與其相對應的“PRO”是英文單詞“Professional”,則是代表字符集比較多的后綴。
既然字體家族的縮寫那么多,那我們怎么把它規整好方便記憶呢?方便我們通過不同的前綴后綴來區別字體的樣式。正常的我們講字體家族系統一分為三類,1.字體的寬窄,2.字體的造型,3.字體的字重。
寬窄系統:只有比較大的字體公司去做這類型字體,因為不常用,所以做的就比較少,漢字里面好像漢儀旗黑又寬窄系統,那我們怎么去識別呢,以Ai為例子,如果我們在字體后綴發現帶Condensed,那么我們可以確定這個字體為窄體,以后如果我們在字體后綴發現帶Extended,那么這個字體則為寬體。如果設計中有特殊的需求,需要我們可以通過后綴去識別。
造型系統是為給不同應用場景下字體做區分的,正常的分為:常規體,意大利斜體,空心體,裝飾花邊,老式數字。
常規題:常規體的后面一般帶Roman或者Regular,帶著著這個字體里面最常用也是最適中的字體。
意大利斜體:英文后綴一般帶Italic,這類型的字體一般是專人設計過的傾斜體,比軟件生成看起來更加舒適和諧。例如有的字體公司為了區分窄體的傾斜體,有的也會用這個單詞,oblique,但是意大利斜體(Italic)代表的是常規字的傾斜體。
空心體:英文后綴一般帶Outline,在一些大型的字庫公司設計的字體會有,他打出的字不是實心的,而是空心字類型的,常見會在比較粗的字體上會有,因為這個的字體變成空心字不容易破壞字體的負空間。
裝飾花邊:英文后綴一般帶Ornament,這種類型的字體一般比較少見,只要一個字體的字庫做到比較全的時候,才會考慮開發類似的字體。這個可以理解為字體類的素材,一般的應用場景比較少。
老式數字:英文后綴一般帶Oldstyle Figures,比較明顯的特征是高低不一樣,這類型的字體一般應用在小寫字母的編排中讓數字看起來更和諧。
標題專用字:英文后綴一般帶Titling,這類型的字體在放大后使用看起來比較精致,細節相對比較豐富,但是也有特殊的,例如Caslon字體的標題字用的是540的后綴。所以當找不到的時候我們可以通過細節去分辨。
字重的選擇一般是根據當前的選擇的字體去跳兩個字重去選擇,這樣才會有對比。字重也是我們設計中常用的選字模式。
我們認識了字體家族對我們做設計有什么作用呢,一個字體家族越全面,我們做設計是可以選擇的范圍就越大,也就越方便,所以我們接到需求,需要選擇字體排版的時候,大致看下字體家族,就可以分辨出這款字體是否適合我們去使用。
需要做好文字組合的編排的基礎是需要選擇合適的版面氣質的字體和相對應的中英文混合編排。
中文字體屬于方塊字,具有字體的輪廓性,并且每個字符占據的空間都是相同的,限制較為嚴格,如段落開頭必須空兩格,豎排文字必須從右到左等規則。中文字體是一種非常規整的文字,因此靈活性相對較小,編排難度較大。
一般情況下,英文字體采用流線型方式,靈活性很強,能夠根據版面的需求靈活變化字體的形態,以解決版面僵硬、呆板的問題,創造出豐富生動的版面效果。
在版式設計中,經常會遇到中英文對照的情況。中文字體的象形、會意等特征和英文字體的簡單、圖形化的特征充分結合,展現兩種字體的優勢。編排時應該注意中文字體與英文字體的設計創意與主次關系,做到層次明確,并且要注意字體的統一性,如果字體變化過多,很容易造成版面的混亂。
我們在聊中西文的編排之前我們需要先了解下西文的歷史,就像我們在打王者榮耀一樣,要學習某個英雄,就先得了解英雄的技能,然后才是這些技能怎么去搭配使用,學習文字組編排也是一樣的道理。
設計的目的一般是為零解決一些生活中的問題,字體的演化設計之路也是一樣的,都是通過外部能力能觸達的能力加上內部的需求所達到的最優的解決方案?,F在我們將西文字體在歷史上的進程可以分為“文藝復興體” “古羅馬襯線體”“過程型襯線體”“粗襯線體”“無襯線體”。
我們可以大致簡單的把基礎款的字體分為兩種,一種是一種是襯線體和無襯線體,襯線體(Caslon,Baskeville,Bodoni,Didot,Garamond,),無襯線體(DIn,Helvetica),
襯線體
Garamond是一個早期字體,有老式數字,雕刻感比較強,有傾斜體,
Baskeville修飾比Garamond要粗點,稍微有點厚重感,偏向優雅,特征明顯,
Bodoni筆畫有明顯的過度,比較現代,
Didot比較常見,特征更明顯,現代感更加強,女性感強,多用品牌,雜志,簡化大膽。筆畫對比更加大,出現的比較晚
無襯線體
Helvetica,特征,比較平穩,沒有特征,沒有華麗的裝飾,在國外特別受歡迎
DIN,和Helvetica區別:變化性特殊,切口有角度性的變化,更加簡單干凈。偏向美術字體數字的幾何形強,比較抓眼球
Futuer:菱角分明,幾何無襯線體,冰冷,升部比較高,比較高挑,多用于科技感比較足的設計中。
因為基礎款的字體很多字體公司都會去做,我們可以通過谷歌可商用字體庫去尋找免費字體尋找:http://www.googlefonts.net/
中文的基礎款排版字體一般為黑體,宋體,圓體,楷體和一些風格多變的美術體。
襯線體
最早是為適應印刷而出現的一種漢字字體,筆畫粗細有變化,而且一般是橫細豎粗,末端有裝飾部分,(即字腳,襯線),點,撇,捺,鉤等筆畫有尖端,屬于襯線字體,常用于書籍雜志報紙等正文排版,趙集,瘦金體。
思源宋體,前身是小塚明朝體改進的,筆畫特征比較相似,小塚明朝橫筆畫要細點,思源宋體橫筆畫要粗點。
無襯線體
黑體,屏顯字體,無論放大還是縮小都能看的清晰,黑體可塑性比較強,常用于標題字的制作,小的可以作為內文,黑體有稱作方體或者等線體,沒有襯線裝飾,字形端莊,筆畫橫平豎直,筆跡全部一樣粗細,結構嚴謹醒目,筆畫粗壯有力,撇捺等筆畫不尖銳,使人易于閱讀。由于其醒目的特點,常用于標題,導語,標志等。
思源黑體:是最廣泛知道的字體,質量高,7個字重,
漢儀旗黑:可以滿足所有的排版的需求,寬窄系統也有。
在我們日常的設計工作中,襯線體和無襯線體該怎么選擇呢?我相信很多設計師都在這個問題上糾結過。我們來結合歷史來看看這個問題吧
我們把時間倒退到歐洲17-18世紀,這個時期盛行一種藝術“巴洛克藝術”和“洛可可藝術”,巴洛克是一種更早期的宏大而華麗的藝術風格,后世有人將洛可可風格看作是巴洛克風格的晚期,即巴洛克的瓦解和頹廢階段。它產生在反宗教改革時期的意大利,發展于歐洲信奉天主教的大部分地區,以后隨著天主教的傳播,其影響遠及拉美和亞洲國家。巴洛克作為一種在時間、空間上影響都頗為深遠的藝術風格,其興起與當時的宗教有著緊密的聯系。然而它不僅在繪畫方面,巴洛克藝術代表整個藝術領域,包括音樂、建筑、裝飾藝術等,內涵也極為復雜。
基本的特點是打破文藝復興時期的嚴肅、含蓄和均衡,崇尚豪華和氣派,注重強烈情感的表現,氣氛熱烈緊張,具有刺人耳目、動人心魄的藝術效果。所以它代表那個時期最流行風格。同時我們可以看看那個時期所產生的字體,也是一樣浮夸,裝飾性明顯。
我們在把時間撥20世紀德國,一所代表著現代主義設計風格的學校誕生了,包豪斯學院,德國魏瑪市的 “公立包豪斯學?!保⊿taatliches Bauhaus)的簡稱,后改稱“設計學院”(Hochschule für Gestaltung),習慣上仍沿稱“包豪斯”。在兩德統一后位于魏瑪的設計學院更名為魏瑪包豪斯大學(Bauhaus-Universit?t Weimar)。它的成立標志著現代設計教育的誕生,對世界現代設計的發展產生了深遠的影響,包豪斯也是世界上第一所完全為發展現代設計教育而建立的學院。包豪斯風格成為了現代主義風格的代名詞。
而包豪斯的設計理念:把簡單的問題把形成標準化,強調一些構成上的東西,所以在這種觀念的影響下,就產生了一些非常好看的無襯線字體。
而在現代化風格的影響下,產生出了工業衍生品也非常簡約,現代。
做設計是一個入世學,所有的問題都需要結合現有的場景來看,我們上面聊完每個時期藝術熏陶下所產生的字體,那么我們結合實際情況來看下,我們和我們的父母都是在不同文化體系下所產生不同審美觀的人。左邊度圖是我們絕大數父母喜歡的裝修風格,像洛可可那時候一樣浮夸,而我們卻喜歡簡約的現代風格。
那么字體也是一樣的,有襯線的字體屬于比較古典的氣質,簡約的無襯線字體則是比較現代的工業風。
也不是所有的襯線字體都是比較古老的,而Didot這款字體因為它造型的特性,也會經常出現在雜志封面和一些奢侈品的設計中。從時間的角度來講,最有歷史痕跡的是括弧線襯線又稱古典型襯線,其次是過渡型襯線到粗襯線,最現代的就是極細型襯線。
而中文的襯線體沒有明確的區分,但是我們可以根據字體特征按照西文的類目去區分。
那上面談到,不是所有的襯線體都代表古典或者歷史的厚重感,所以無襯線體也不是根據出現時間和之前的應用場景也是有區分的。
西文的無襯線體分為傳統型無襯線,人文主義無襯線,和現代主義無襯線(幾何形無襯線),傳統型無襯線的G開口的地方都是水平的,開口的地方也比較小,看起來比較保守,母A它的筆畫是由粗到細,落差不是特別的大,字體造型也比較穩重。人文主義無襯線它慢慢的開始出現一些傾斜的特征,這樣它的開口處可以做的更大一點,它的負空間也會更大一點,字母A為了讓它的負空間也就是字谷變的更大,它的筆畫粗細變的更大了,手寫的感覺會更多一點,現代主義無襯線體字母G它不僅開口要大,而且還有很多圓形切割的特點。幾何的特征會更濃厚一點,我們把這個特征稱為幾何型無襯線字體。
中文的無襯線則分為傳統型無襯線,中間無襯線,現代型無襯線。在漢字的黑體里,分為2類字體,一類是有喇叭口的,一類是沒有喇叭口的,喇叭口的造型特征是在筆畫的轉折或筆畫造型豐富的地方會有一些向里面凹陷或微微凸起的造型特征,沒有喇叭口的字體特征是在任何筆畫造型都收拾的比較干凈利落。像傳統和中間型無襯線都是慢慢像現代型無襯線演化,喇叭口慢慢的演化成工業的切口風。
字體的選擇我們應該基于合適的主題,合適的用字場景以及使用平臺或者場景,這樣才可以選出合適的字體。
合適的主題:這點適用可以在運營設計或者平面設計中,我們接到的需要適用何種風格,例如國潮肯定會選用毛筆字這種張力比較強的字體,在例如比較有工匠精神的工藝品可以選用有手工感的宋體字。
合適的用字場景,看選用的字是用在標題還是還是正文,標題字可以選用張力比較強的字體,因為標題的文字需要醒目,可以直接傳遞版面需要表達的主題,而正文需要閱讀文本則選擇無個性的黑體比較合適。
適用的平臺,設計展現的平臺也是對字體選用的影響的關鍵因素之一,例如在iOS上選用蘋方字體,安卓上選用思源黑體,PC選用微軟雅黑都可以減輕開發打包的大小。
我們為什么要做中西文的那我們在中西文搭配的時候應該怎么去搭配呢?下面是我總結的三個方向:
1.細節類似,細節類似我們可以觀察字體的細節進行搭配
2.時間相同,就是在某一個時間節點下同時產生的兩款字體。
3 .氣質相同,這個是在漢字里面才有的,我們常見的字體除了宋體和黑體外,還有是書法字體或手寫體,這類型的字體在通常是不太好搭配字體的。
那要是原字體的西文不太好看,我們怎么去搭配呢?、
外形類似
帶有這種轉角圓滑的裝飾線的宋體字我們一般是搭配古典型的襯線體,這樣搭配起來會更舒服,或者漢字的黑體搭配西文的無襯線體,因為它們特征是一樣的,然后就是中文的圓體也同樣會搭配一個西文的圓體,這些都是細節類似的搭配方法。
時間相同
是看筆畫相似來匹配的,我們可以看到下面這個中文的筆畫特征是帶有喇叭口,這種類型的黑體很明顯是印刷工業時代的產物才會有的特征,而右邊的西文是粗襯線字體,也是帶有工業時期復古的感覺,而且產生的時間也是比較近似的,一個是20世紀左右產生的字體,一個是19世紀產生的字體,這兩款字體搭配在一起可以凸顯工業感,穩重感,復古感都有,這也是時間匹配法。
氣質相同
例如在中國像楷書字體的特征獨特,但是英文的字體沒有類似特征的字體,所以楷書和宋體在中國都可以列為書法體,在氣質上是相同的,所以搭配在一起也是比較常見的。
另外我也總結了一些常用的字體搭配方法,放在下圖了,這些只是給大家平常搭配字體時候的一個參考依據。
我們在日常的的設計工作中,無論是哪種設計,都會涉及文字組的編排,我們可以觀察到一般的文本分兩種組合,一種是標題文本+說明性文本。
標題文本主要放置版本需要傳遞的重要信息,說明性文本是輔助傳遞標題文本的含義。
對比廣泛的存在于我們的生活中,對比的形式也是多種多樣的,例如身高的高矮對比,體重的胖瘦對比,速度的快慢對比等等。在設計領域內,對比是最常出現的形式。對于信息來說,適當的對比可以讓信息層級更加清晰明了,同一層級的信息更加豐富。對于畫面整體來說,恰當的對比可以很好的制造出焦點(畫面主體)當我們需要突出某一個元素的時候,其他的元素相應的就要做出對比關系,才能保證主體的突出。
字號對比是最快可以提現內容層級關系的一個設計點,一個版面里面不會有太多的文字層級,一般保持在3-5個層級,大部分的軟件都會自己自帶的推薦字號,為什么最小的字號是6號,因為印刷里是可視的極限。
常見的字號比例有1:1.5,1:1.618,1:1.732,1:2等等。這些比例在正常使用能很快可以做出層級關系且不會有特別大的問題。例如1:1.618是黃金比例,也是很多植物生長的規律,符合人正常的審美感受。
行距比例如果沒設置合適,對閱讀會造成影響,很容易造成眼睛是視覺疲勞,看來不舒服且文本不容易閱讀。
當行距設置到合適的時候, 我們閱讀起來會比較舒服,也會提高閱讀效率。
行距的設定也可以套用固定的算法:字號*倍率=行距。
我們在日常的設計工作中,當行距調整到比較合適的大小的時候,版面會具備層次感 ,但超過一定限度也不太好。那行距的調整具體有哪些用途呢,1.平衡版面,2.閱讀效率
例如現在整個版面看起來比較輕盈,那么我們可以選擇一個比較大的行距,因為中間的空比較多,所以看起來并沒有那么重。例如我們現在的版面非常重,我們需要平衡他,那我們的行距就可以給近一點,讓文本塊在視覺上更重,這就是平衡的作用。
行距的設定大小會影響我們閱讀的效率,例如行距比例小的,一般用在標題文本,因為標題的文本一般需要我們快速閱讀并了解清楚。
字距大設定也對人的閱讀也會有影響,字據過大的時候像樹懶說話一樣慢,字據小的時候感覺說話比較快。
當字距是-800時候的感受,感覺想動漫里的樹懶一樣,說起話來慢吞吞的。
當字距是--100時候的感受,感覺像和人在吵架一樣,說話的語速比較急切。
在一般的平面設計中字據設定為正負40-70之間去選擇,但是在UI設計中,字距一般為0.
同時字距也會受到中宮的影響,在同字號的情況下,微軟雅黑會比其他字號大一號,中宮越大,字面也會越大,因為筆畫外擴,中宮大的字體,字面大,默認間距小
中宮大的字體,字面大,默認間距小,他的字距可以給大點,中宮小的字體,字面小,默認間距大,他的字距可以給小點,
例如平方字體,正常0間距做內文會比較舒服,但是作為標題,調了之后會讀起來比較連貫。
無論是西文還是漢字,他的形狀都會不一樣,有圓形的,正方形的,三角形的等等,不同的形狀,負空間是不一樣的,不同的字號是需要微調字距的,我們需要軟件視覺來調整。
在AI中有個功能是基于視覺對齊,我們開啟便可以解決這個問題。
分欄的寬度,決定了一行的長度和字數,當欄寬太長的時候,我們閱讀可以會比較吃力,總感覺一眼看不到頭。
一行多少字合適呢?一般的是20-30字之間,極限是15-30之間比較合適,一行字太少和太長都會讓人很累,,這也是為什么有的書為啥讀不下去的原因。
這也是為什么很多娛樂消遣方便的書一頁的字很多,也是為為了提升閱讀的興趣。
文字設計的成功與否,不僅在于字體自身的書寫,也在于其運用的排列組合是否得當,文字層級之間的關系,適用規則,欄距>行距>字距。
上面的舒服,因為粗細對比比較平衡,下面面的對比過度,什么時候下可以做強對比呢?做了字號對比,就不要做過大的字重對比,
在現在的板式設計中,有一個被忽略的知識點,就是標點符號。標點符號在當今社會不僅僅是用來斷句,也是可以用來傳遞情感,例如下圖,同一句話因為加了不同的標段符號,所傳達的意思就完全不一樣了。
所以標點符號的運用與文字組的編排在板式設計中同樣的重要,例如在聊天的時候,我們隨意的時候的問號在正式排版中,“!”和“?”的疊用不能超過3個。
你一句話表達驚訝和疑問的時候,我們應該將問號放在前面感嘆號放在后面。
例如有書名號的文本段是不在需要用頓號去隔開的,如果當書名號后面有括號則是需要用標點符號去把他們分割開來的。
當然還有就是逗號和不能在一段的前面等等,這些都只是給各位小伙伴一些拓展知識,有興趣的小伙伴如果想自己的板式更加規范可以自己去查閱相關資料。
梳理信息層級有哪些作用呢?我們在自然界中會發現很多與階級有關的現場,例如狼群里,一般都會有頭狼,也叫狼王,主要是統領狼群的行動及群體意識,在企業中,老板作為一個公司的核心人物,一般正常的普通員工去離職,不會影響公司的正常運作,但是如果涉及到公司的老板不知下落或者企業的核心管理層離職,會對公司的股價和正常的業務流程造成很大的干擾。
在我們日常設計中編排文字組也是一樣的,我們首先需要確定接到的需求哪些是重要且關鍵的信息,哪些是次要信息。當它的重要層級越高,他在版面中所扮演傳遞信息的角色就越重要,我們接下來便是通過設計手法,例如通過字距,筆畫粗細,顏色,以及字體等等來做出層級的區分。
那我我們一起來看看實際的案例吧!
梳理信息層級有哪些作用呢?我們在自然界中會發現很多與階級有關的現場,例如狼群里,一般都會有頭狼,也叫狼王,主要是統領狼群的行動及群體意識,在公司中,老板
1.首先是它會便于傳遞信息的中心思想,有助于用戶快速理解,所以一般大標題文字很對都會做效果,有助于提升視覺的焦點,2.信息層級分明,主次有序的在版面中傳遞信息,3.降低視覺噪音:當版面中的文字信息案例主次有序的排列后,版面看起來比較和諧,所有的元素感覺是本應該就在那里的。
如果信息層級沒有梳理過的版面,則會閱讀起來非常的吃力卻效率低下。
關于文字編排節奏感,很多人應該好奇了節奏不是音樂的范疇嗎?怎么文字編排也說有節奏嗎了?
其實節奏感隨著地球開始有生命開始便存在了,因為太陽升起到落下是有著自己每天固定的節奏的,太陽升起人開始勞作,看著周圍的動物和植物都一天天有變化,感受著自己由青澀稚嫩到遲暮之年;這些有規則的事物形成的固有的節奏。
在文字編排中也可以感受到這樣的節奏,例如,字體是直線還是曲線,垂直還是水平,傾斜還是正立,緊湊還是寬松,對稱還是不對稱……這些都體現著文字的節奏。段與段之間的留白多少,字間距的大小都是有規律可以尋找的,如果文字組合被有規律的設計、排版,那在設計稿中本身就具有了一種節奏感的吸引力。沒有節奏就不會有生命,也不會有任何創造。
好聽的因為是因為音樂的節奏會有起有伏,有前奏有副歌有高潮部分,這樣的音樂才不會讓人覺得平淡,我們轉換到文字組編排也是一樣的道理,當我們把一些沒有節奏感的書籍拿出來看是會覺得很困的。
如果我們加以設計的手法,把文字組合好好的排版一下,這是可以提升我們對內容的閱讀興趣的。例如我們閱讀的雜志和一些資訊類的APP,他們對文字和圖片的排版就會很下心思。
那我們怎么打造自己設計中的節奏感呢?那接下來我們聊聊怎么通過閱讀視線心理去引導用戶。首先是基礎的視覺邏輯,讓用戶漸入佳境,通過常規的的閱讀習慣,其實是根據大小、色彩、線的指向去引導用戶的視線節奏,其次是視線引導,根據用戶的常用邏輯打造版面中的節奏感。
我們平時在看版面的時候的視線觀看邏輯是怎么確定的呢?1.根據日常的書寫邏輯:我們看圖習慣和我們日常的書寫習慣是密不可分的,一般是從左至右,從上到下,所以我們很少會看到從右往左的排版和從下往上的排版,因為這樣的不符合人的邏輯,
因為每個人都心理感受都不一樣,所以當視覺引導不一樣的時候,傳遞的感受也是不一樣的,文字組合的目的是為了增強其視覺傳達功能,賦予審美情感,誘導人們有興趣地進行閱讀。因此,在組合方式上就需要順應人們的心理感受。人們的一般閱讀順序是:水平方向上,視線一般是從左向右流動;垂直方向上,視線一般從上向下流動;大于45°斜度時,視線從上而下流動;小于45°時,視線從下向上流動。
板式的閱讀順序有兩種:從左到右和從右到左。這是人們平時慣性的限制,就好像寫文章一樣,一旦決定了從左到右寫,就不會更改,板式也是如此,一旦決定了板式的閱讀順序,許多元素都會隨之被限制。
橫排文字
正常我們去閱讀橫排文字就是先從左到右,從上到下的規律去閱讀。
豎排文字
豎排文字的閱讀順序是從上到下,整體在從右上至左下。我們無論是橫排版還是豎排版,行距都是要大于字距的。
版式設計的核心就是吸引人的視線。當我們在觀看某些東西時,大部分的人都有自己習以為常的觀看習慣。人們往往在一瞬間就會判斷出這是什么?這一現象導致的結果是人們會想起與所看到的東西相近的信息,并判斷畫面中信息的價值,我們將這種心理傾向稱之為視覺心理。視線的引導是建立在視線的移動之上的,在引導視線前,我們需要先建立焦點。
視覺聚焦是在文字組編排中先建立視覺的突破口,然后就再去引導其他的內容。設計師,有一個重要的瓶頸就是,無法在版面中快速的傳達主題的中心思想,明明什么信息都有,就是讓人抓不住重點。如何一秒吸引別人的注意力,快速get要表達的點?那就是需要在版面中埋下引導別人實現的點。
引導方式可以根據版面現有的內容做大小層次對比,顏色對比,空間對比及元素具有的特有指向性。
人們在日常生活中,通常會先注意到大的東西,在有較大的元素在版面中,我們的視線往往會向大的元素是聚集,從大到小,這樣一步一步的去看,在版面設計運用這樣的小技巧,我們閱讀起來相對來說比較順暢。特別是當兩件物體顏色或材質相同的時候,視線往往會集中在大的物體上。根據這一原理,應該盡量放大希望吸引讀者注意的東西。
通過有序的色彩的引導視線是版式設計中不可或缺的主要元素,同時也頻繁應用于視覺引導中。色彩的心理效果在視覺引導中的運用就是:人的目光首先會注意眾多色彩中不同的那一個。例如下圖中,當色彩是藍色的時候,是沒有焦點的,當出現別等顏色是特別吸引人的目光的。
然后在加上大小的對比之后,吸引我們眼球的肯定是下面這個大圓形。
如果在下面這個大圓形去改變顏色,這個便會更加大吸引人
其次是亮明度高的顏色比明度低的更吸引人的目光。
暖色調比冷色調會更加吸引人
我們正常的瀏覽順序是從左至右,從上至下,那當我們怎么打破這個順序呢?首先是暖色>冷色,明度高>明度低的,元素大的>元素小的,那下圖我們瀏覽順序應該是先看紅色,在上面開始看,其次是右邊和下方。
引導是一種視覺的語言。一幅好的設計作品,用戶的視線一定是被控制在主體和興趣點上,而不是被其他與主題無關的雜物所吸引,只要用好視線的引導,才可以傳遞我們想傳遞的。
當版面中出現箭頭或者人臉等相關指向性的圖片或者元素出現,是因為古希臘畢達哥拉斯學派和柏拉圖認為眼睛在捕捉物體時,視線、目光和力量會以物體為目標,從眼睛向物體方向傳送,把這一想法用設計原理來表示時。這時候的帶有指向性的圖片或者元素,便是視覺的切入點。
線作為板式中的引導,也是非常常用的,它既可以作為引導視線的切入點,也可以填補畫面中的空白點。
線除了是直線,還可以是曲線,文字組成的線或者負空間形成的線,都是具有引導視線的作用。
我們從小在學校學習了數字的大小順序,在在考試時,我們會順著考生號找座位,坐車時順著車票找座位。我們生活中還有很多地方會應用到編號。所以我們的目光會隨編號移動,是因為我們一直就有這樣的習慣。如果看到1,就自然會找2,看到A會去尋找B,視線就會這樣一直移動下去。
設計離不開構圖,構圖通俗地講:就是為了表現畫面的主題思想,而對畫面上的人或物及其陪體、環境作出恰當的、合理的、舒適的安排,并運用藝術的技巧、技術手段強化或削弱畫面上某些部分,最終達到使主題形象突出,主體和陪體之間的布局多樣統一,畫面疏密有致,以及結構均衡的藝術效果,使主題思想得到充分、完美的表現。
當我們把文字組編排好了,可以通過構成形式將他們串聯起來,這才是好的排版,能快速想到版面的效果。
居中構圖是最常見的構圖,指的是將畫面的主要元素放置在版面的中軸線上,目的是快速吸引眼球,占據視覺焦點,突出主體。中心構圖的版式簡潔、利落,給人以雅致的視覺感受。在突出主體的同時又能賦予畫面穩定感,并使整體畫面具有一定的沖擊力,需要表現規整穩定、醒目大方的版面時,可以使用居中構圖。其次對稱構圖是居中的一種特例。
對稱的形態在視覺上有自然、安定、均勻、協調、整齊、典雅、莊重、完美的樸素美感,符合人眼的視覺習慣。平面構圖中的對稱,可分為點對稱和軸對稱。在平面構圖中應用對稱法則要避免由于過分的絕對對稱而產生單調、呆板的感覺。有時,在整體對稱的格局中加入一些不對稱的因素,反而能增加構圖的生動性和美感,避免了單調和呆板。能夠突出主體,聚焦視線,當制作的圖片沒有太多文字,并且展示主體很明確的情況下,可以使用對稱構圖,在電影海報中也是比較常見的。
斜線式構圖又稱傾斜構圖,是將文字或者主體物以傾斜的方式放置在版面當中。傾斜的角度產生勢能,給人以引導作用。優化視覺層級,清晰的傳遞信息。讓比較呆板的畫面具有活力和生機,當制作的版面需要沖擊、不穩定效果時,可以使用傾斜式構圖,需要沖擊感和不穩定感時可以嘗試,也可以做透視,讓他有近大遠小的空間感。
曲線式構圖指的是版面中重要元素呈曲線排布,其他元素填充剩余空間,曲線具有靈活的屬性。其中“S”形狀從前景向中景和后景延申,畫面構成縱深方向的空間關系的視覺感,所以曲線構圖的版面常常顯得充實、熱鬧、生動、空間感。具有曲線的優美而富有活力和韻味,需要有力的表現場景的空間感和深度時,可以選擇S形構圖,例如瑜伽海報。
要表現畫面的空間感和縱深感也可以用S型購物,這也是S型構圖的特性,讓畫面更有空間感。
壓角式構圖適用于標題字數較少的版式設計,標題作為絕對重要的元素放置四角,一眼就能被看到。要做好壓住四角的版式設計得進行網格構架,控制好版面之間的比例。這種構圖形式使得畫面更加穩定,突出中心主體。
散點式構圖是指主體數量較多,散落在畫面當中的構圖方法。在應用散點式構圖時應防止散亂,宜用隱性結構線或結構形將各個“點暗連起來,相互呼應形成聯系?!边m用于標題文字稍多的平面版式設計。文字排布時,拉開字的間距,在版式上化作為元素。標題文字的縱向距離要大于橫向距離,否則容易誤導閱讀順序。當文字信息比較多的時候,可以選擇散點構圖。
三分法是一條法則,同時也不是一條規則。 這個說法很拗口,我們來理解一下。 從本質上講,它就是我們的眼睛自然感知圖像的方式,這些圖像被限制在一個邊界之內(例如畫框)。 這些框架,都有一個固定的長度和寬度; 將這兩個屬性分別分成三個相等的部分,這會包含兩條水平和垂直穿過框架的等距線,形成四個線相交的點,并創建九個相等大小的框架,如下圖的九宮格。
而當版面的主要元素分布在三分線或點上,多數人會感覺這個畫面會比較和諧舒服,這接近是一種天性和本能了。當然,你還可以舉例說很多不是三分構圖的例子來反駁我,但這不重要,只要你要知道大部分遵循三分法構圖的畫面看著都是比較舒服的事實就行了。
古時候的文人墨客的門檻是“知句逗”,我個人覺得設計要想入行設計的門檻便是最基本的文字組的編排,
我們的感覺,即我們的視覺和我們的美感,優于幾何結構,當我們在處理黑白對比的平衡時,我們必須訴諸感,
在文字組的編排中,其中包含的技藝、功能和形式設計是絕對不能分開的。當我們作為設計師,做好每一處設計的細節,也是對觀看版面用戶最基本的尊重吧!
文章來源:優設 作者:Endings
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn