前言
線條是網頁設計中非常常見的一種構成元素,線的性質讓它能身兼數職,又不霸占視覺風頭。上一次我們已經討論過點的平面構成之“點”睛的張力,這一次讓我們一起來到線的世界。
把這些最最最最最基礎,看上去不難的知識點吃透且靈活運用你會發現,大佬做的圖其實就是看上去復雜。
一、線是一個點的行跡
任何形都由線包圍而成,線就是一個二維里的產物,它有長度、寬度,它甚至還能幫我們模擬三維的深度。你可以把線看成一個點的運行軌跡,那么這個思路就可以幫你找到線的本質:線是一條運行軌跡,它是從點的基礎上發展而來的。
一條線也并不拘泥于就是平直的線條形式,只要能連綴成串的,我們都可以把它看成一條線,它就能在構成中發揮起線的作用。(把這個道理吃的透透的你就是造物的上帝??)
接下來我們看一組圖它就是連綴成串的,但不同的節奏給人感官非常不一樣
二、點線面直接的變化
三、“線”的性格:
線針對心理上的影響比“點”更強烈,也更具有性格特點。不同種類的線有著不同的性格,在心理上形成的感受也不同。比如徒手畫的自由的“線”,更具有很濃的人情味,表現更為感性和情緒化。
接下來我們來看看大佬們怎么運用這些原理的
大佬們的的確確把這些看似很簡單的道理運用到極致
這樣當大家再找到好看圖又想吸取經驗的時候就都不會迷茫了
如果你做完圖總感覺很呆板,用這個【X破X】的辦法檢查哪里出問題了
一幅圖
過多相同性質的線出現太多導致畫面呆板【不可】
不同性質的線占比平均導致畫面太亂【不可】
這個只能靠平時大量作圖和看圖來培養自己處理這些細節功力了
聽著好繞啊。。。
其實并不繞,舉個很簡單的例子:綜藝想必大家都看過
明星們都是要在里面瘋狂坳人設的,那是導演要求的
為什么要坳人設,導演就是怕大家性格和表現都一樣觀眾老爺們不會買賬的
所以設計也一樣呀
四、線”的引導性:
下面這個頁面的所有線,都分別指引著你的視線往它想要你展現的信息上滑過去。
五、線的風格感受
線條的風格表現在線的寬窄樣式和線的平直彎曲,這些形態上的變化,可以演繹出謹慎嚴肅,也能釋放某種率性天真。
纖細的線
如下面導航中的細細的水平線,表達一種穩定精致的感受。目前在網頁設計中也非常受歡迎,這類線條比較簡潔,能和任何前景背景都混為一片,豐富細節又能引導用戶的視覺方向。
常見在導航和按鈕的設計里,扁平化傳遞某種精致感,首選是細細的直線,不夾雜私欲,有點“冷淡”的矜持。
·粗壯的線
較粗的直線,表達出一種穩定,稍微會引發緊張,放在文字下方有強調的作用。這其實是因為它能誘發你去依傍一個大只佬,由此帶來的某種安全感。
·自然卷的線
說到曲線,很想提一提一百多年前的“新藝術”運動。由于當時的歐美進入工業化量產時代,所有的產品設計、平面設計因為經由機器大量生產,慢慢失去了對審美的追求,因此當時的某些平面設計的先驅們紛紛投入到一場反工業反粗俗的革新運動中,主動設計出大量帶有此類反機械化,有手工業色彩的作品。
這場運動的靈感來源主要是中世紀的裝飾藝術、日本的一些東方裝飾風格和自然主義。他們提倡靈感來源于自然,因此他們設計出的作品都是以卷草圖案等曲線為主的。我們可以看到,在我們的自然界里,沒有一條是完全絕對的直線,葉、花、樹葉、鳥、海浪、山川、河流……而直線恰恰是人類的作用痕跡:建筑、工業、日常用品的造型大都以直線為主,經過這番觀察,你就可以大致了解,曲線是自然的表達式,當你想要傳遞與自然有關的信號時,就盡量不要用一些特別僵直的線條。
你看羅馬建筑就超愛用大量卷曲的線。
一條一絲不茍的直線帶來緊張,相對而言,曲線、波浪或卷曲的線條就象征著某種放松。在網頁設計中,線的功能主要是指向作用,也必要需要一點緊張以期關注,因此,大部分我們能見到的線條都是直線,曲線比較少見。
曲折之美
折線是一個特殊的存在,因為它既不是直線,也不是曲線,它沒有流暢感,卻另有一番曲折的美感,一條單一的曲線能給的信息量不多,但如果是規律排列起來的曲線就能形成紋理,作為背景它并不突兀,而且能創造出某種曲折處的雅致效果。
最后那些復雜的UI組件其實沒那么復雜
體會一個箭頭里的線體魔力
從這枚箭頭中,我們可以看到,通過線的視覺導向作用,最長的線引領你的視覺從左滑到右,而右端的箭頭上的小尖角的作用更指向了右方。利用這個原理,你就能創作出更多的其他樣式的箭頭來引領視線。
最后來看看 Learn Squared大佬的操作