首頁

ui設(shè)計(jì)背景元素設(shè)計(jì)技巧,提升用戶停留率

seo達(dá)人


無論是設(shè)計(jì)網(wǎng)頁還是海報(bào),背景圖片都是最常用、也最能體現(xiàn)當(dāng)下設(shè)計(jì)趨勢的一種設(shè)計(jì)元素。在設(shè)計(jì)APP 的時(shí)候同樣是如此。過去的10年當(dāng)中,用戶的品味發(fā)生了不小的變化,而現(xiàn)在,整個(gè)設(shè)計(jì)趨勢上,似乎正處在一個(gè)關(guān)鍵的轉(zhuǎn)折點(diǎn)上。


在我們所能觀察到的諸多設(shè)計(jì)當(dāng)中,淺色的背景是當(dāng)之無愧的主流。淺色背景本身就不太可能喧賓奪主,讓視覺主體更加突出。而如今,我們逐漸發(fā)現(xiàn),背景還具備補(bǔ)充主體的功能,并且這種補(bǔ)充是潛移默化的。背景的功能性其實(shí)還可以強(qiáng)化,這種思路可以在如今的APP 界面設(shè)計(jì)當(dāng)中應(yīng)用,讓整體設(shè)計(jì)更加平衡。


如今的UI設(shè)計(jì)師大都明白在背景中融入元素來吸引用戶的眼球,提升產(chǎn)品調(diào)性,提高內(nèi)容的可讀性。而這也促使圖片、插畫、色塊等元素在背景當(dāng)中發(fā)揮了更大的作用。



1、為創(chuàng)造戲劇感,使用色彩分割背景


分屏式設(shè)計(jì)并不新鮮,它是一個(gè)存在了很長時(shí)間的設(shè)計(jì)趨勢了。在桌面端的屏幕上,分屏式設(shè)計(jì)一直都很有效,寬廣的屏幕讓設(shè)計(jì)師有足夠的施展空間,但是在移動端上則是個(gè)挑戰(zhàn)。

大圖模式



在 UI 設(shè)計(jì)師們找到了解決方案,對比色是增加視覺吸引力的最佳方式。

在 Tubik Studio 的這個(gè)設(shè)計(jì)案例當(dāng)中,設(shè)計(jì)師使用不均等分布的色塊來分割屏幕,同時(shí)使用白色背景區(qū)塊來承載主體內(nèi)容,避免被背景色彩干擾。設(shè)計(jì)師充分利用了對比色的對抗性,以及和白色之間的對比度,功能完善,但是有趣又漂亮。



2、為營造氛圍,在背景上疊加輔助性圖形元素


雖然在背景圖片中疊加各種圖形化的元素聽起來很奇怪,但是確實(shí)是逐漸流行起來的一種背景設(shè)計(jì)玩法。不過,這存在一種風(fēng)險(xiǎn),就是如果疊加太多的圖形化元素,會讓整體看起來過于雜亂。盡量在豐富視覺和制造視覺污染之間找到平衡,最終的設(shè)計(jì)效果,能夠給你帶來意料之外的優(yōu)質(zhì)效果。


大圖模式


雖然手機(jī)越來越大,但是屏幕空間依然很寶貴。通過疊加一些特定的圖形元素來創(chuàng)造視覺深度,給用戶以空間感。


這種背景設(shè)計(jì)的另外一個(gè)好處在于,你可以讓整個(gè)UI顯得更加富有視覺吸引力。在設(shè)計(jì)的時(shí)候,需要注意的是,要保持元素之間的一致性,確保不同的元素在屏幕上呈現(xiàn)的時(shí)候,仍然保持協(xié)調(diào)。



3、為保持整體感,使用整圖作為背景


使用整張圖片作為背景,一直被UI/UX領(lǐng)域的設(shè)計(jì)師所爭論。對,你沒看錯(cuò),這個(gè)事情一直存在爭議。有人非常喜歡使用圖片背景,有人則完全無法接受這種呈現(xiàn)方式。


但是撇開個(gè)人喜好,趨勢上,這種背景運(yùn)用方式還是越來越流行了。在APP的UI界面中,如果你能靈活自由地使用全屏背景的化,對于接下來的設(shè)計(jì)肯定是有所助益的。


大圖模式


圖片所呈現(xiàn)的信息量當(dāng)然是毋庸置疑的,更重要的是如何貼合品牌和氛圍,呈現(xiàn)出應(yīng)有的氣場。

當(dāng)然,最核心的技巧,是在于透明度的控制,和內(nèi)容框的設(shè)計(jì)。為了避免信息和背景之間的對比度不足,合理的方法是使用內(nèi)容框?qū)⑶熬暗脑爻休d起來。而為了避免背景圖片喧賓奪主,還可以借助透明度的控制,來確保背景圖片更加平滑自然,不會影響到閱讀和使用。



4、需要強(qiáng)化感受和情緒,使用漸變色背景


漸變色在幾年前回歸之后,在設(shè)計(jì)當(dāng)中的運(yùn)用范圍越來越廣。漸變色不僅賦予設(shè)計(jì)更加強(qiáng)烈的個(gè)性,而且能夠和用戶之間產(chǎn)生足夠的情感共鳴。


你可以使用漸變色來營造調(diào)性,創(chuàng)造對比,甚至還可以借助漸變色才來作為視覺線索和引導(dǎo)。比如當(dāng)你在背景中使用藍(lán)色的時(shí)候,可以通過深淺漸變來創(chuàng)造方向性,引導(dǎo)用戶向特定的地方瀏覽。


大圖模式


但是,漸變色背景流行起來最重要的原因還是它的情感共鳴的能力。許多 UI 設(shè)計(jì)師已經(jīng)意識到心理因素在移動端設(shè)備中的巨大影響,能否喚醒用戶的情感是關(guān)鍵。


漸變色背景的設(shè)計(jì)玩法有很多,變化幅度的大小,方向,對比度和亮度的變化差異,都會帶來不同的影響。當(dāng)然,漸變背景同樣必須遵循一個(gè)原則,那就不能喧賓奪主。在設(shè)計(jì)的時(shí)候,同樣可以借助透明度的調(diào)整,來降低它和CTA按鈕之間的對比度。


5、為了強(qiáng)化故事性,使用插畫背景


插畫師可以根據(jù)需求更加自由地繪制足以滿足不同需求的插畫,獨(dú)特,個(gè)性,定制化。不過,想要創(chuàng)建足以代表企業(yè)、團(tuán)隊(duì)、產(chǎn)品或者用戶角色的插畫,并不能憑空創(chuàng)建,而是需要一個(gè)研究過程,通過調(diào)研和分析,才能提出需求,再做執(zhí)行。它是一個(gè)機(jī)器人,還是一個(gè)更加擬真的角色?又或者使用動物擬人化的形象更合適?


大圖模式


許多設(shè)計(jì)師更加傾向于在APP中使用自定義插畫,因?yàn)檫@樣更加自由輕松地達(dá)成各種目標(biāo),從新用戶引導(dǎo),到提供教程。



6、基礎(chǔ)但通用,使用幾何圖形來構(gòu)建背景


幾何圖形本身是非?;A(chǔ)的元素,它們的含義和感覺非?;A(chǔ),也具有普世性。雖然它們很簡單,但是在UI 設(shè)計(jì)中非常強(qiáng)大。單一的幾何形狀是簡單的,但是結(jié)合不同的效果、不同的組合,即使使用簡單的幾何形狀,也能夠發(fā)揮出多樣的變化。


大圖模式


當(dāng)然,具體怎么運(yùn)用幾何圖形,還要看你的UI界面上,有哪些東西,作為背景的幾何圖形和 UI 中的主體元素之間,空間關(guān)系要怎么控制,怎樣保持優(yōu)雅簡潔,確保品牌信息的傳達(dá)。


結(jié)語


就像 UI 界面中其他的元素一樣,背景同樣值得關(guān)注和規(guī)劃。最重要的是,你想表達(dá)什么,傳達(dá)什么樣的信息,想借助整個(gè)UI 界面來實(shí)現(xiàn)什么樣的功能,規(guī)劃好了才能更好地呈現(xiàn)內(nèi)容。


背景的選取之所以會成為UI設(shè)計(jì)趨勢的關(guān)注點(diǎn),很大程度是因?yàn)閁I 和UX 設(shè)計(jì)的關(guān)注點(diǎn)開始越來也深入到設(shè)計(jì)的方方面面,大家考慮問題也需要越來越細(xì)致。

文章來源:快資訊 作者:衍果設(shè)計(jì)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

                                                            微信圖片_20210513163802.png

 

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

 

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

優(yōu)秀網(wǎng)站設(shè)計(jì)賞析+美圖分享

前端達(dá)人

很多網(wǎng)站仍然在使用老舊的頁面設(shè)計(jì),比如國內(nèi)一些企業(yè)官網(wǎng),萬年不變的相類似的模板,外國的則是hero頁面,帶CTA按鈕,三欄式的布局。這些設(shè)計(jì)不能說是不好的設(shè)計(jì),很實(shí)用,用戶能夠預(yù)測展示的內(nèi)容,也容易找到需要的內(nèi)容。但是正因?yàn)榭深A(yù)測,用戶沒有新鮮感,沒有期待,所以我們找了一些不僅打破常規(guī),也依然有良好用戶體驗(yàn)的網(wǎng)頁設(shè)計(jì)。

藍(lán)藍(lán)設(shè)計(jì)(北京蘭亭妙微科技有限公司)是一家專注而深入的UI設(shè)計(jì)公司,公司對UI設(shè)計(jì)的追求一向很高,致力于為卓越的國內(nèi)外企業(yè)提供卓越的手機(jī)app/安卓ui設(shè)計(jì)、軟件界面設(shè)計(jì)、網(wǎng)站設(shè)計(jì),用戶研究、交互設(shè)計(jì)服務(wù)。

接下來是精彩的UI設(shè)計(jì)賞析


WechatIMG1899.jpegWechatIMG1900.jpegWechatIMG1901.jpegWechatIMG1902.jpegWechatIMG1903.jpegWechatIMG1904.jpegWechatIMG1905.jpegWechatIMG1912.jpegWechatIMG1911.jpegWechatIMG1910.jpegWechatIMG1909.jpegWechatIMG1908.jpegWechatIMG1907.jpegWechatIMG1906.jpegWechatIMG1913.jpeg



藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png



十個(gè)UI設(shè)計(jì)小套路

seo達(dá)人

十個(gè)UI設(shè)計(jì)小套路


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

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

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



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

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



3 合并重復(fù)的功能而使界面簡潔

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

4 客戶的評價(jià)好過自吹自擂

在獲得項(xiàng)目機(jī)會或提高項(xiàng)目轉(zhuǎn)化率時(shí)客戶的好評是一種極為有效的手段。當(dāng)潛在客戶看到其他人對你的服務(wù)給予好評時(shí),項(xiàng)目機(jī)會會大增。所以試著提供一些含金量高的證據(jù)證明這些好評是真實(shí)可信的。



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

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



6 將選項(xiàng)與按鈕區(qū)分開來

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



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

當(dāng)展示許多項(xiàng)服務(wù)時(shí),給出一個(gè)重磅的推薦項(xiàng)是個(gè)不錯(cuò)的做法,盡管推薦的設(shè)置無法滿足所有用戶。這么做是有理論依據(jù)的,一些研究已經(jīng)揭示了這么一種現(xiàn)象:當(dāng)面臨的選擇越多時(shí),用戶就越難做出決定。所以你可以高亮某個(gè)選項(xiàng)來幫助用戶做出選擇。

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

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



9 指出產(chǎn)品適用人群而不是做成全年齡

你是想把產(chǎn)品做成大眾化的呢還是有精確的適用人群?在產(chǎn)品定位上你需要更精確些。通過不斷了解目標(biāo)客戶的需求及標(biāo)準(zhǔn),你能把產(chǎn)品做得更好得到更多與客戶交流的機(jī)會,并且讓客戶覺得你很專業(yè),在這方面是獨(dú)家提供的優(yōu)質(zhì)服務(wù)。把產(chǎn)品定位得精確的風(fēng)險(xiǎn)就是可能縮小了目標(biāo)潛在客戶的范圍,也使自身變得不那么全能。但這種做得更專業(yè)的精神卻反過來會贏得信任,權(quán)威。





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

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








文章來源:知乎


藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

                                                            微信圖片_20210513163802.png

 

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

 

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








UI設(shè)計(jì)切圖規(guī)范

seo達(dá)人

UI設(shè)計(jì)切圖規(guī)范


移動UI設(shè)計(jì)切圖是UI設(shè)計(jì)師最重要的設(shè)計(jì)輸出物,切圖資源輸出是否規(guī)范直接影響到工程師對設(shè)計(jì)效果的還原度。設(shè)計(jì)師的切圖輸出物是是體現(xiàn)一個(gè)設(shè)計(jì)師專業(yè)水準(zhǔn)的重要標(biāo)準(zhǔn),同時(shí)也是設(shè)計(jì)師表達(dá)自己對設(shè)計(jì)態(tài)度的最有力的語言。合適、精準(zhǔn)的切圖可以最大限度的還原設(shè)計(jì)圖,起到事半功倍的效果。如何輸出具有全局把控和細(xì)節(jié)專注的高段位切圖,應(yīng)該是所有設(shè)計(jì)師一直需要追求的能力。

設(shè)計(jì)切圖的原則

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

1.切圖資源尺寸必須為雙數(shù)

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



2.圖標(biāo)切圖輸出應(yīng)根據(jù)標(biāo)準(zhǔn)尺寸輸出并且考慮到手機(jī)適配

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




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

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



4.可點(diǎn)擊部件應(yīng)當(dāng)注意其點(diǎn)擊區(qū)域不小于88px

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



5.可點(diǎn)擊部件要把相關(guān)狀態(tài)都切圖輸出,比如正常狀態(tài)、點(diǎn)擊狀態(tài)。

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



切圖輸出類型

1.桌面圖標(biāo)切圖輸出

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



2.系統(tǒng)圖標(biāo)切圖輸出

一套圖適配雙平臺:

ios平臺和安卓平臺公用44*44px切圖素材,即可實(shí)現(xiàn)一套切圖適配兩個(gè)平臺的開發(fā)。




適配大屏幕:

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


3.圖片類切圖輸出

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

全屏切圖類



局部切圖類



4.可拉伸元素切圖輸出

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

橫向拉伸切圖




豎向拉伸切圖





文章來源:知乎


藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

                                                            微信圖片_20210513163802.png

 

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

 

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






UI設(shè)計(jì)的10大發(fā)展趨勢

seo達(dá)人





最近,我花了一些時(shí)間觀察UI設(shè)計(jì)的發(fā)展方向。我偶然發(fā)現(xiàn)了一些非常有創(chuàng)意的趨勢,我認(rèn)為這些趨勢將在不久的將來將重新塑造UI設(shè)計(jì)。


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


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


1.新Neuomorphism


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


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


2.軟漸變


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


混合兩種以上的顏色以創(chuàng)建一個(gè)彩色模糊的背景也是一件事!


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


3.幾何元素


無論是作為主要的背景或主題,還是只是讓設(shè)計(jì)看起來更有趣的一個(gè)細(xì)節(jié)——幾何元素越來越受到關(guān)注。通常將它們混合在一起以創(chuàng)建馬賽克——結(jié)果看起來非??幔?


從左到右:Emy Lascan,Zerotoone.de,DesigningUI.com,jajadesign(IG),F(xiàn)lowstudio。


4.柔和的背景


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

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


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


5.插圖和3D


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


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


6.抽象的形狀


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


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


7.暗模式


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


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


8.角度元素


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


從左到右:Cuberto,F(xiàn)ireart Studio,Dogstudio,Hype4.com,Prakhar Neel Sharma


9.柔和的陰影


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


從左到右:andreisimon.design(IG),Shakib Ali,F(xiàn)elixlesoeuf(IG),Glebich(IG),Tramautritram(IG)


10.簡單、thick字體


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

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




藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

                                                            微信圖片_20210513163802.png

 

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

 

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






攝影術(shù)的誕生和發(fā)展

資深UI設(shè)計(jì)者

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

用一篇文章,幫你了解攝影術(shù)的誕生和發(fā)展

△ 圖文結(jié)合的平面設(shè)計(jì)作品

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

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

用一篇文章,幫你了解攝影術(shù)的誕生和發(fā)展

△ 圖文結(jié)合的平面設(shè)計(jì)作品

我們本次一起來了解一下攝影術(shù)的誕生過程,還有其對平面設(shè)計(jì)發(fā)展產(chǎn)生的一些影響。攝影術(shù)的發(fā)展其實(shí)主要分為幾個(gè)階段,史太濃把他們總結(jié)為三段,分別是:

  • 探索者的探索。
  • 商用后的進(jìn)化
  • 與平面設(shè)計(jì)的結(jié)合

從小孔成像出發(fā)

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

亞里士多德發(fā)現(xiàn)的其實(shí)就是“小孔成像”原理,物理課大家有學(xué)過,因?yàn)楣馐浅芍本€射入的,當(dāng)人站在小孔前,頭部擋住上面的光,成影在下邊,腳擋住下面的光,成影在上邊,所以成像是倒立的。

用一篇文章,幫你了解攝影術(shù)的誕生和發(fā)展

△ 小孔成像原理

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

用一篇文章,幫你了解攝影術(shù)的誕生和發(fā)展

△ 墨子關(guān)于小孔成像原理的研究

隨后有藝術(shù)家基于這個(gè)原理制作一種叫“暗箱”的東西來輔助自己進(jìn)行繪畫創(chuàng)作,這樣可以高效的畫出相當(dāng)準(zhǔn)確的圖形來,好比我們設(shè)計(jì)師有時(shí)候也會使用“透寫臺”輔助臨摹一樣。

用一篇文章,幫你了解攝影術(shù)的誕生和發(fā)展

△ 畫家制作的暗箱裝置

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

用一篇文章,幫你了解攝影術(shù)的誕生和發(fā)展

△ 尼伯斯的攝影探索試驗(yàn)

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

用一篇文章,幫你了解攝影術(shù)的誕生和發(fā)展

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

用一篇文章,幫你了解攝影術(shù)的誕生和發(fā)展

尼伯斯本身是一名印刷家,他這方面的探索動機(jī)其實(shí)是為了尋求一種替代手工插圖的方法,以提升印刷效率,因?yàn)槭止げ鍒D不但時(shí)間長,成本也很高,比如要邀請技術(shù)精湛的藝術(shù)家創(chuàng)作。

不幸的是,尼伯斯的探索還沒去到實(shí)用性階段本人就因?yàn)樾募」H?1833 年去世了,幸好此時(shí)他已經(jīng)有了一位合伙人,可以繼續(xù)他的研究,那就是畫家出身同為法國人的路易斯·達(dá)貴爾(Louis Jacques Daguerre)。

用一篇文章,幫你了解攝影術(shù)的誕生和發(fā)展

△ 路易斯·達(dá)貴爾

商用之路

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

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

用一篇文章,幫你了解攝影術(shù)的誕生和發(fā)展

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

與此同時(shí),達(dá)貴爾也馬上開始努力的推動攝影術(shù)商業(yè)化,首當(dāng)其沖的自然就是生產(chǎn)“攝影機(jī)“進(jìn)行銷售,因?yàn)橛蟹▏茖W(xué)院支持,過程很順利,第二年就生產(chǎn)并賣出 50 萬臺,讓達(dá)貴爾一下子名成利就。

用一篇文章,幫你了解攝影術(shù)的誕生和發(fā)展

△ 達(dá)貴爾相機(jī)

用一篇文章,幫你了解攝影術(shù)的誕生和發(fā)展

△ 達(dá)貴爾相機(jī)拍攝的作品

這事情讓一位叫塔波特(WilliamHenry fox talbot)的英國人氣得吐血,因?yàn)樗缭?1833 年也開始探索攝影技術(shù),并且在 1835 年就設(shè)計(jì)出一種小型攝影機(jī),可以拍攝到很小的物體。

其原理連暗箱都不需要,屬于一種化學(xué)反應(yīng)的直接曝光,產(chǎn)生的圖像是黑白負(fù)片,但是很精確,他獲得這些成就后居然不認(rèn)為有商業(yè)價(jià)值,所以丟在一旁好幾年。

用一篇文章,幫你了解攝影術(shù)的誕生和發(fā)展

△ 塔波特相機(jī)拍攝的作品

當(dāng)通過媒介聽聞達(dá)貴爾的事跡時(shí)候,他匆匆將自己的技術(shù)向英國皇家學(xué)院匯報(bào),英國人也趕忙向世界宣布發(fā)明了攝影術(shù),但也只能成為發(fā)明者之一,而并非世界第一了。

用一篇文章,幫你了解攝影術(shù)的誕生和發(fā)展

△ 很不開心的塔波特

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

用一篇文章,幫你了解攝影術(shù)的誕生和發(fā)展

△ 塔波特相機(jī)完成的作品

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

上一期說過,當(dāng)一件事情體現(xiàn)出商業(yè)價(jià)值,就會吸引到一大堆能人參與,讓事情的發(fā)展速度快速提升,攝影的發(fā)展也不例外。1880 年時(shí)候有人發(fā)明出干底片,因?yàn)橹暗母泄獠牧隙际菨裢康?,很不方便,再后來就是大家感覺相機(jī)體積太大,一起去研究怎么變小。1888 年世界第一臺小型照相機(jī)出現(xiàn),發(fā)明者叫喬治·伊士曼(George Eastman),后來他成立了一間公司,就是大名鼎鼎的“柯達(dá)公司“(EastmanKodak Company)。

用一篇文章,幫你了解攝影術(shù)的誕生和發(fā)展

△ 喬治·伊士曼

用一篇文章,幫你了解攝影術(shù)的誕生和發(fā)展

△ 柯達(dá)公司 EastmanKodak Company

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

用一篇文章,幫你了解攝影術(shù)的誕生和發(fā)展

攝影術(shù)與平面設(shè)計(jì)的結(jié)合

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

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

用一篇文章,幫你了解攝影術(shù)的誕生和發(fā)展

△ 莫斯結(jié)合攝影技術(shù)制作的印刷品

當(dāng)攝影技術(shù)走向成熟的時(shí)候,有一些藝術(shù)家也開始嘗試基于底片為藍(lán)本,將其再創(chuàng)作為版畫,這樣就獲得了準(zhǔn)確與藝術(shù)化的平衡,而且效率也很高。

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

用一篇文章,幫你了解攝影術(shù)的誕生和發(fā)展

△ 《里什蒙運(yùn)河邊的自由人》

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

用一篇文章,幫你了解攝影術(shù)的誕生和發(fā)展

△ 《尚地鎮(zhèn)的風(fēng)景》

我們從圖片細(xì)節(jié)看來會發(fā)現(xiàn)圖像好像由一個(gè)個(gè)小點(diǎn)構(gòu)成,如果這樣就對了,因?yàn)檫@種印刷照片的方法就是大名鼎鼎的“絲網(wǎng)制版”。這種方式是把攝影底片通過絲網(wǎng)照射形成很多細(xì)小的格子,格子黑白明暗程度不同,在感光底版上通過曝光就形成金屬印刷版,繼而就可以將照片印刷出來。

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

用一篇文章,幫你了解攝影術(shù)的誕生和發(fā)展

△ 絲網(wǎng)制版與印刷

當(dāng)攝影可以順利變成印刷品后,其媒介地位日益提升,因?yàn)椴捎谜掌绞阶霾鍒D有很多好處,其一是節(jié)省成本,其二是真實(shí),其三則是效率很高。

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

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

用一篇文章,幫你了解攝影術(shù)的誕生和發(fā)展

△ 納達(dá)采訪謝弗勒爾

過程中完成了 21 張由人造燈光配合的現(xiàn)場照片,最后配以文字發(fā)表在法國刊物《插圖雜志》上,讓那一期的刊物銷量大增,因?yàn)樽x者可以配合生動的照片更好了解內(nèi)容,當(dāng)時(shí)而言顯得非常有趣。

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

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

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


圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

周周


大家是不是很好奇別人的圖形怎么都這么有創(chuàng)意,而自己想設(shè)計(jì)圖形的時(shí)候卻無從下手。可能是還沒有掌握方法。今天就分享一個(gè)圖形創(chuàng)意的方法。希望大家了解后,在設(shè)計(jì)圖形的時(shí)候有一個(gè)清晰的思路。

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

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

我們先來看這個(gè)圖形,大家能認(rèn)出這是誰嗎?

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

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

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

簡化的圖形一直是趨勢。它不僅僅利于快速傳播、具有非常強(qiáng)的延展性,也經(jīng)常作為海報(bào)的主體。

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

標(biāo)志上也大部分以圖形為主。所以作為設(shè)計(jì)師,簡化圖形的能力是必不可少的。

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

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

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

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

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

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

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

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

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

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

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

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

這個(gè)時(shí)候玫瑰花就需要以種類內(nèi)的事物做參考。也是和其他花做對比。找出玫瑰花區(qū)別于其他花卉的重要特征。

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

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

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

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

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

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

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

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

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

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

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

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

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

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

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

現(xiàn)在的示意圖它只是隨便畫出來的,如果用在設(shè)計(jì)中,這個(gè)圖形是不合格的,所以需要對它進(jìn)行改造。

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

衍生圖形主要從兩個(gè)角度入手,風(fēng)格化和陌生化。

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

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

這個(gè)風(fēng)格的圖形非常簡單,會顯得它的完成度不高。所以這時(shí)就需要陌生化的處理,讓它在創(chuàng)意想法上有亮點(diǎn)。

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

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

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

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

帶著這種疑問,我們就可以開始第二個(gè)衍生。以四變形為基本形,通過旋轉(zhuǎn)不同角度,再加上漸變風(fēng)格。第二個(gè)圖形就衍生出來了。可能這兩個(gè)會偏抽象一點(diǎn),那也可以選擇保留更多的特征。

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

就像這個(gè)圖形的外形和線條刻畫上更大地保留了玫瑰形態(tài),所以在顏色上就可以不用完全遵循現(xiàn)實(shí)。

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

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

因?yàn)閳D形衍生的過程對于想法、造型能力、不同風(fēng)格的掌握有所要求,沒辦法通過簡單的理論來分析,接下來會通過分析四個(gè)不同的案例的衍生方式,給大家提供一些衍生的思路。

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

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

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

為了讓螃蟹看起來更加的陌生化,我們可以考慮改變印象中螃蟹的常見形態(tài),讓它以一種更加有趣的動態(tài)呈現(xiàn),比如讓這個(gè)多爪動物以一種太陽一樣的放射狀呈現(xiàn),變身元?dú)怏π贰?

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

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

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

那傳統(tǒng)的螃蟹都是圓形的身子,我們能不能嘗試把螃蟹的身體變方呢?帶著這種思考,保留其他特征的同時(shí)作相應(yīng)的風(fēng)格化處理。又一個(gè)新的圖形產(chǎn)生。

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

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

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

火龍果的配色是很明顯的特點(diǎn)。表皮會帶有綠色的鱗片。相對橢圓的身體?;瘕埞前咨墓夂秃谧训慕M合。

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

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

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

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

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

使用不尋常的切塊方式,也能產(chǎn)生另一個(gè)圖形。

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

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

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

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

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

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

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

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

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

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

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

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

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

那就到了第三個(gè)衍生,我們把它分成三塊去表現(xiàn)西瓜的層次。因?yàn)樵煨鸵呀?jīng)足夠抽象了,所以這里我們用顏色去盡量還原西瓜的印象。組合到一塊,是不是就有西瓜切塊的感覺了呢?

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

我們把這個(gè)數(shù)量增加一些,就更有辨識度了,再調(diào)整里面的一點(diǎn)變化。那么到這里,這個(gè)圖形也就完成了。

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

這是西瓜部分的衍生。

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

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

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

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

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

那么嘗試到這里,覺得下面的這個(gè)腳的直線結(jié)構(gòu)很有趣,是一個(gè)很有變化性的特點(diǎn)。所以我們可以按照這個(gè)方向再去嘗試一下。

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

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

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

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

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

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

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

這是青蛙部分的效果。

圖形簡化+衍生,教你真正的圖形創(chuàng)意方法!

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

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




文章來源:優(yōu)設(shè)網(wǎng)       作者:研習(xí)社



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



一款軟件界面設(shè)計(jì)的重要性

seo達(dá)人

 

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

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

  重要性

1,軟件的界面相當(dāng)于我們?nèi)说恼w外表,相當(dāng)于我們?nèi)说臍赓|(zhì)等。誰都知道我們希望自己漂亮一些,希望自己有氣質(zhì)一些,這些不僅可以增加我們的人氣,更可以幫助我們披荊斬棘,更加順利走向我們的目標(biāo)。當(dāng)然,軟件的界面美觀與否,直接影響著人們使用此軟件時(shí)的心情,進(jìn)而影響人們對此軟件的喜歡與否。而那些所謂的強(qiáng)大的功能是在人們喜歡這款軟件之后再考慮的問題。

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

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

在這里我想向大家提出幾點(diǎn)注意事項(xiàng)

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

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

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

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

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

 

文章來源:CNDN   作者:iteyey_45

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

 

2021年版式設(shè)計(jì)趨勢

ui設(shè)計(jì)分享達(dá)人

排版將文字從單純的文本轉(zhuǎn)換為巧妙的交流方式。字體和類型設(shè)計(jì)可以說出這么多–從突出的粗體字體到精致的襯線字體。從傳統(tǒng)的永恒變化到全新的技術(shù)。

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

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

1. 襯線字體

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

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

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

設(shè)計(jì)公司Autumn展示了視覺層次結(jié)構(gòu)的強(qiáng)大功能以及自信的版式和簡單的形狀。

2.輪廓字體

輪廓字體在2020年出現(xiàn)了很多的創(chuàng)意,我們希望在2021年會看到更多。透明字體在與粗體,填充字體并排顯示時(shí),更加強(qiáng)大。

我們的示例表明,輪廓傾向于在網(wǎng)頁設(shè)計(jì)中占據(jù)中心位置。Heetch在相同顏色的純色襯線字體上方使用藍(lán)紫色輪廓字體,以表現(xiàn)出對比效果。

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

3.進(jìn)化的野獸派

如果您希望營造視覺張力并擺脫標(biāo)準(zhǔn)網(wǎng)頁設(shè)計(jì)的束縛,那么野獸派字體與現(xiàn)代野獸派元素相結(jié)合就可以完成工作。野獸派字體的清晰,原始,略顯復(fù)古的設(shè)計(jì)經(jīng)過了現(xiàn)代化改造,成為我們所謂的“進(jìn)化的野獸派”。在經(jīng)過改進(jìn)的版本中,苛刻的元素被軟化并與各種調(diào)色板和形狀結(jié)合在一起。

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

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

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

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

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

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

5.文字圖像融合

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

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

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

6.新迷幻效果

全新迷幻氛圍是對時(shí)髦色彩的復(fù)古回歸,融合了現(xiàn)代感。它借鑒了過去的迷幻設(shè)計(jì)。

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

Victor Moscoso為他的印刷沉重設(shè)計(jì)帶來了鮮艷的色彩,這些色彩影響了示例中所見的現(xiàn)代霓虹色調(diào)色板。

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

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

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

7.粗體現(xiàn)代襯線字體

到2021年,這并不是一個(gè)全新的概念,現(xiàn)代的襯線字體處理技術(shù)隨著新外觀的發(fā)展而不斷變化。

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

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

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

8.賽博朋克風(fēng)格

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

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

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

浮標(biāo)也不使用任何大膽創(chuàng)新的字體,但是圖像與字體的整體配對符合這種趨勢。

文章來源:站酷   作者:DuiaDesign

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

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

ui設(shè)計(jì)分享達(dá)人

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


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

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

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

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

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

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

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


1.11字體家族的縮寫


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

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

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

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

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


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

1.13字體家族/字族的寬窄


     寬窄系統(tǒng):只有比較大的字體公司去做這類型字體,因?yàn)椴怀S茫宰龅木捅容^少,漢字里面好像漢儀旗黑又寬窄系統(tǒng),那我們怎么去識別呢,以Ai為例子,如果我們在字體后綴發(fā)現(xiàn)帶Condensed,那么我們可以確定這個(gè)字體為窄體,以后如果我們在字體后綴發(fā)現(xiàn)帶Extended,那么這個(gè)字體則為寬體。如果設(shè)計(jì)中有特殊的需求,需要我們可以通過后綴去識別。

1.14字體家族/字族造型


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

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

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

空心體:英文后綴一般帶Outline,在一些大型的字庫公司設(shè)計(jì)的字體會有,他打出的字不是實(shí)心的,而是空心字類型的,常見會在比較粗的字體上會有,因?yàn)檫@個(gè)的字體變成空心字不容易破壞字體的負(fù)空間。

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

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

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

1.15字體家族/字族的字重


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

1.16字體家族的用途


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

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


2.10中文字體的編排


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

2.11西文字體的編排


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

2.12中西文混合編排


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

2.20西文的演化歷程


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

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

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


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

  • 襯線體

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

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

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

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

  • 無襯線體

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

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

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

因?yàn)榛A(chǔ)款的字體很多字體公司都會去做,我們可以通過谷歌可商用字體庫去尋找免費(fèi)字體尋找:http://www.googlefonts.net/


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


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

  • 襯線體

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

思源宋體,前身是小塚明朝體改進(jìn)的,筆畫特征比較相似,小塚明朝橫筆畫要細(xì)點(diǎn),思源宋體橫筆畫要粗點(diǎn)。

  • 無襯線體

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

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

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


2.30無襯線體和襯線體的應(yīng)用場景


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

2.31巴洛克時(shí)期和洛可可時(shí)期


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

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

2.32現(xiàn)代主義設(shè)計(jì)風(fēng)格


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

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

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

2.33字體該怎么選擇


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

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

2.34中西文襯線體的分類


     也不是所有的襯線字體都是比較古老的,而Didot這款字體因?yàn)樗煨偷奶匦裕矔?jīng)常出現(xiàn)在雜志封面和一些奢侈品的設(shè)計(jì)中。從時(shí)間的角度來講,最有歷史痕跡的是括弧線襯線又稱古典型襯線,其次是過渡型襯線到粗襯線,最現(xiàn)代的就是極細(xì)型襯線。

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

2.35中西文無襯線體的分類


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


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

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

2.36怎么去選擇字體


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

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

合適的用字場景,看選用的字是用在標(biāo)題還是還是正文,標(biāo)題字可以選用張力比較強(qiáng)的字體,因?yàn)闃?biāo)題的文字需要醒目,可以直接傳遞版面需要表達(dá)的主題,而正文需要閱讀文本則選擇無個(gè)性的黑體比較合適。

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

2.37中西文如何搭配


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

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

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

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

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

  • 外形類似

帶有這種轉(zhuǎn)角圓滑的裝飾線的宋體字我們一般是搭配古典型的襯線體,這樣搭配起來會更舒服,或者漢字的黑體搭配西文的無襯線體,因?yàn)樗鼈兲卣魇且粯拥?,然后就是中文的圓體也同樣會搭配一個(gè)西文的圓體,這些都是細(xì)節(jié)類似的搭配方法。

  • 時(shí)間相同

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

  • 氣質(zhì)相同

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

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

     

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

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

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


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

3.11字號對比

      字號對比是最快可以提現(xiàn)內(nèi)容層級關(guān)系的一個(gè)設(shè)計(jì)點(diǎn),一個(gè)版面里面不會有太多的文字層級,一般保持在3-5個(gè)層級,大部分的軟件都會自己自帶的推薦字號,為什么最小的字號是6號,因?yàn)橛∷⒗锸强梢暤臉O限。

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


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

3.13行距對比


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

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

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

3.20行距對比的作用


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

3.21平衡版面

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

3.22閱讀效率


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

3.30字距的作用

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

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

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

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


3.31中宮對字距對影響


   同時(shí)字距也會受到中宮的影響,在同字號的情況下,微軟雅黑會比其他字號大一號,中宮越大,字面也會越大,因?yàn)楣P畫外擴(kuò),中宮大的字體,字面大,默認(rèn)間距小

   中宮大的字體,字面大,默認(rèn)間距小,他的字距可以給大點(diǎn),中宮小的字體,字面小,默認(rèn)間距大,他的字距可以給小點(diǎn),


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


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


3.33字體形狀對字距對影響


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

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


3.40欄寬的設(shè)定


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

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

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

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


3.40字重平衡

   上面的舒服,因?yàn)榇旨?xì)對比比較平衡,下面面的對比過度,什么時(shí)候下可以做強(qiáng)對比呢?做了字號對比,就不要做過大的字重對比,

  3.50/知句逗


    在現(xiàn)在的板式設(shè)計(jì)中,有一個(gè)被忽略的知識點(diǎn),就是標(biāo)點(diǎn)符號。標(biāo)點(diǎn)符號在當(dāng)今社會不僅僅是用來斷句,也是可以用來傳遞情感,例如下圖,同一句話因?yàn)榧恿瞬煌臉?biāo)段符號,所傳達(dá)的意思就完全不一樣了。

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

   你一句話表達(dá)驚訝和疑問的時(shí)候,我們應(yīng)該將問號放在前面感嘆號放在后面。

例如有書名號的文本段是不在需要用頓號去隔開的,如果當(dāng)書名號后面有括號則是需要用標(biāo)點(diǎn)符號去把他們分割開來的。

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



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

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

那我我們一起來看看實(shí)際的案例吧!


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


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

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

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


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


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

      其實(shí)節(jié)奏感隨著地球開始有生命開始便存在了,因?yàn)樘柹鸬铰湎率怯兄约好刻旃潭ǖ墓?jié)奏的,太陽升起人開始勞作,看著周圍的動物和植物都一天天有變化,感受著自己由青澀稚嫩到遲暮之年;這些有規(guī)則的事物形成的固有的節(jié)奏。

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


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


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

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

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


4.20 視覺邏輯


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

    因?yàn)槊總€(gè)人都心理感受都不一樣,所以當(dāng)視覺引導(dǎo)不一樣的時(shí)候,傳遞的感受也是不一樣的,文字組合的目的是為了增強(qiáng)其視覺傳達(dá)功能,賦予審美情感,誘導(dǎo)人們有興趣地進(jìn)行閱讀。因此,在組合方式上就需要順應(yīng)人們的心理感受。人們的一般閱讀順序是:水平方向上,視線一般是從左向右流動;垂直方向上,視線一般從上向下流動;大于45°斜度時(shí),視線從上而下流動;小于45°時(shí),視線從下向上流動。  


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


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

  • 橫排文字

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

  • 豎排文字

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






4.22  通過閱讀邏輯引導(dǎo)視覺


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

4.23  閱讀中的視覺聚焦


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

4.30  如何進(jìn)行視線對比引導(dǎo)


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

4.31  大小對比


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


4.32  色彩對比


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

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

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

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

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

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


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


4.40視線的引導(dǎo)


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


4.41 元素的指向性


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


4.42 線的引導(dǎo)


線作為板式中的引導(dǎo),也是非常常用的,它既可以作為引導(dǎo)視線的切入點(diǎn),也可以填補(bǔ)畫面中的空白點(diǎn)。

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


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


   我們從小在學(xué)校學(xué)習(xí)了數(shù)字的大小順序,在在考試時(shí),我們會順著考生號找座位,坐車時(shí)順著車票找座位。我們生活中還有很多地方會應(yīng)用到編號。所以我們的目光會隨編號移動,是因?yàn)槲覀円恢本陀羞@樣的習(xí)慣。如果看到1,就自然會找2,看到A會去尋找B,視線就會這樣一直移動下去。

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

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


5.10 居中構(gòu)圖


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


5.11 對稱構(gòu)圖


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


5.12 傾斜構(gòu)圖


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


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


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

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


5.14 壓腳構(gòu)圖


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


5.15 散點(diǎn)構(gòu)圖


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


5.16 三分法構(gòu)圖


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

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


6.10 總結(jié)


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

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

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

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

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

日歷

鏈接

個(gè)人資料

存檔