實戰干貨!?網頁設計中如何運用方框/方形元素? - 優設-UISDC

                                        實戰干貨!?網頁設計中如何運用方框/方形元素?

                                        2017/02/21 16824評論區

                                        編者按:如何讓方正方框/方形元素不死板有創意?今天這篇好文總結了超多的設計方法和實戰案例,建議閱讀。

                                        常常聽見大神說設計不需要方方正正的,這樣會顯得死板,沒有創意。LOW…等等,其實不然,我認為每一種元素,只要在對的環境中,去運用。相信會出現讓人耳目一新的效果。

                                        比如我們身邊使用的電腦,冰箱 房屋架構等等,都離不開方形的支持。雜志中常常會讓方形元素融入進文字或者圖片中間,去突出或去修飾它們。隨著現在技術越來發達,設計師也會將雜志中的一些元素,融入到網頁設計中去。讓網頁設計更加有新意。

                                        作用

                                        下面我們就來說下方形方框在網頁之中的運用。

                                        01:分割

                                        我們已知的分割的元素,主要是線和面 ,其實方形/方框也是具有分割的作用。在設計中運用的話會讓你的作品別具一格。

                                        下面設計作品畫面中出現了多個文案信息,這么多的信息集中在一個畫面中,如何讓它們變得有主有次呢,為了讓用戶清晰的閱讀到每一個單獨的文案信息,所以設計師加入方框的元素,利用大小對比的關系,有效的避免了內容的沖突和雜亂 。這里的設計通過加方框的元素,使畫面中的文字也具有一定的強調作用。

                                        這塊設計也是具有相同的處理方式:

                                        02:強調

                                        如何讓文字內容在眾多元素里面突出。 要么弱化其他,要么強化自己,顯然下面設計中為了讓用戶第一視覺就能看到表達的文字信息,所以設計師利用了方框的元素進行了強突出。

                                        下面的海報設計,也是運用到了方框的元素,把用戶的視覺焦點聚焦了起來。既強調了重要信息也不丟失畫面的美感和創意。

                                        03:修飾

                                        當我們的在設計一個海報,或者網站頁面中的一段文字的時候,有時候畫面太單薄,一些設計師會用其他的方式進行修飾,但是也有設計師利用方框,不一定是完整的方框,這樣整個畫面一定會別具一格。下面來看設計案例吧。

                                        下面是一組平面VI的作品,本來是一個平平淡淡的名片,但是設計師加方框的一角進行修飾,瞬間這個作品變得創意十足了。

                                        下面網頁設計中,原本標題在大面積的留白中間,變得單薄,導致頁面的中心不穩定,所以設計師在標題上增加了方框的元素,進行輔助修飾作用 ,有效了豐富了標題的展示效果。

                                        04 :色塊對比讓版面變得有血有肉

                                        設計師利用方形的色塊讓網站變得生動創新,使網站在布局上面變得有節奏,有主次,邏輯清晰。下面我們來看看這些設計案例。

                                        下面是一家家具類的網站,設計師利用方塊的大小來做對比 。使得整個畫面中間的元素組織起來變得清晰有條理,讓用戶在視覺上變得有層次感, 使得整個版面變得簡約清晰。

                                        下面這個建筑公司的首頁,采用了方形的元素進行大小層次感的相互結合起來,讓整個畫面變得極其有穩重感,讓原本網站上復雜而多的類容,變得條理清晰,干凈簡潔。同時在畫面的版式也是獨裁新意。

                                        05:信息引導的作用

                                        在復雜而多的海報或者網站架構中,利用方框進行信息引導是非常有效而且新穎的表現方式。

                                        以下網站是左側一個男模特的網站,整個banner采用了紅色調,設計師為了讓用戶快速往下瀏覽,所有大膽的添加了紅色系的方框,有效的引導了用戶的視覺,從上而下的瀏覽,同時使得整個畫面不會出現頭重腳輕的問題。另外這樣的處理讓整個版面設計上更加新穎,使得作品脫穎而出。

                                        右邊是阿迪達斯的一個品牌網站,設計師利用了方形的元素作為視覺引導,將用戶的視覺一步一步的從引導下去,了解他們的全部商品。

                                        下面一組時尚的海報設計,這里將文字利用方形的規律進行引導排版,讓用戶有順序的閱讀。

                                        06:讓文字之間相關聯

                                        下面海報設計,如果按照正常設計師的話,對于文案的處理方式,肯定會根據文案信息以及海報架構進行分散排版設計。

                                        這樣的處理方式,對海報的畫面要求會比較高,如果海報比較亂的話,哪么文案的識別性就會降低,為了解決這些問題,設計師選擇了方框的元素,利用方框講文案信息關聯再一起。然后再利用方框的大小,根據文案內容的主次進行合理的組織分配。這樣不僅讓視覺上的到別具一格,而且也降低了畫面上其他的元素對文案內容的干擾。讓用戶第一視覺了解到海報需要傳達的信息。

                                        下列海報設計中也利用了方框的元素,讓文案信息相聯組織在一起。通過改變方框的大小,來突出文案信息的主次之分。視覺上給用戶舒適的體驗,畫面也會讓人難以忘記。

                                        如果我們在設計中充分利用上述幾個表現方式,相信我們的設計一定會脫穎而出。所以設計優秀的作品并不難,難的是你去發現優秀作品的規律。當然還有很多點值得我們去發現~

                                        應用

                                        上訴講到了方框元素的作用,哪么我們來說說方框 方形元素經常運用在那些地方。

                                        01:網頁板塊

                                        ?方框方形元素,經常運用于網頁中的各大板塊,它們能夠有效的將網頁中的元素變得條理清晰等,那么我們來看看下面一些案例是如何巧妙的運用方框。

                                        下面是一個旅行網頁。整個網站用了大面積的方形元素,利用這些方形的大小和改變長寬比例來錯列排版,使得整個網頁信息分類明確,節奏感十足。

                                        一些商城網站也融入了方形的元素,有效的管理和整合了各類商品信息,同時也利于網站適配不同端口設備展示:

                                        02:btn按鈕,搜索,表單 等

                                        網頁中常見的按鈕,其實近幾年開始流行的幽靈按鈕(透明按鈕)就是大量借鑒了方框元素,當然實心按鈕也采用了方形元素。下面我們來看下運用了這些元素的案列。

                                        下面整個網頁色調明亮清新,除了漸變的背景就是內容。高飽和度的藍色背景里有點狀的世界地圖作為紋理點綴,使之不顯得單調。

                                        大小錯落的內容靠左對齊,下面設計師在按鈕上利用了框型的元素設計了幽靈按鈕,使得整個文字內容搭配更加通透。

                                        這個網站使用了視頻作為背景,訪問者只需要通過變化的背景就可以明白組織的工作流程。通過調色之后的背景視頻并不影響前景的Logo、設計師利用了框型的元素設計了幽靈按鈕,使得整個網站顯得巧妙而優雅。

                                        下面是網站中一段引導語,采用淺灰色的背景加上文字在一起,加上一定的留白,整個畫面顯得潔凈而優雅。設計師在這里采用方形元素來設計了實心按鈕,使用戶對新頁面起到了引導作用。

                                        下面網站是利用了方型/方框的元素,來設計了 表單和搜索框部分,表單部分讓原本復雜相互干擾的文案信息變得條理清晰,畫面簡潔。搜索框部分視覺強化,引導用戶進入網站搜索獲取內容。

                                        03:圖片

                                        現在越來越多的方框/方形元素出現在網站圖片中,下面案例是一個標準的圖文結合的設計案例,設計師為了讓圖片和文案左右兩邊的視覺平衡,于是加入了方框/方形的元素與圖片進行結合。瞬間整個畫面變的富有設計感起來了。

                                        下面案例圖片中設計師為了讓多張圖片進行統一 協調起來,也加入了方框的元素,給用戶傳達了三塊內容的體系關系,讓原本簡約而優雅的畫面變得多姿多彩。

                                        一個人物如何簡單的讓他在平面中變得有立體感?下面案例設計師采用了框型的元素,與人物結合起來,讓原本沒有空間感,頭重腳輕的男士,變得穩重而富有層次,同時也抓住了用戶的視覺。讓原本平淡的頁面變得富有創意。

                                        04:文字

                                        復雜的文案排版起來單調,過于平淡,無層次感?哪么我們來看看方框/方形是如何解決這些問題的。

                                        下面案例中,設計師在這段文案進行設計排版的時候,如果素材有限不能放圖片,如何才能讓它們變得富有設計感,左右平衡呢?于是設計師將左邊的文字與方框元素結合起來,輕松的解決了這個問題。

                                        下面案例中,設計師如何巧妙的利用方形元素,將banner 和內容兩塊連接呢?原本應該放置在banner 上的文字,被放在了方形色塊上,不但在傳統的版式架構上得以突破,而且引導了用戶從上而下的閱讀信息。

                                        下面案例中,banner中的文案只有一句話,搭配其他產品。設計師利用方框元素,將分散的文字變成了整體,所以使瓶子靠在文字上,給人更安全穩定的感覺。

                                        下面案例中,設計師利用方框元素,將一個圖形與文字進行結合起來,讓整個文字的疏密對比性加強,即使沒有圖片也能 瞬間提升整個畫面的創意。

                                        文字這一塊就不多講啦,還有很多的運用,等待你們去發現。

                                        05:VI logo

                                        方框方形的元素如果放在VI 中結合,是不是很有趣~

                                        以下是1+手機的Logo ,通過結合了方框的一部分,兩邊的線條將用戶的視覺引導至+的圖形上去,即使在不了解這個品牌的用戶 也能夠快速的閱讀了解這是1+(個人見解)。

                                        搭配整個畫面,大量的留白,左上-右下的視覺定律,讓畫面變得簡約而不簡單。

                                        類別

                                        這里我就不做細的分析啦~主要在于大家的靈活運用。

                                        01:方框之間的結合

                                        方框/方框之間的結合,一般主要是用在復雜而多的文案內容中間,起到相互關聯的作用,讓彼此更加的緊密。

                                        ??

                                        02:方形與方框之間的結合

                                        這樣的方式開始流行了,主要的作用是用來修飾過于單調的物體,豐富畫面的美感,以及平衡左右關系。往往方框和方形之間會伴隨著圖片或文字一起出現。

                                        03:用于標簽部分

                                        表單按鈕之類的就不做舉例子啦,大家都知道~

                                        04:大的方框/方形

                                        大的方框/方形主要運用于海報之中,或者網頁的架構上等較多的信息內容中。

                                        主要作用在 起到畫面協調,強調 ,區分等等用途。

                                        05:殘缺的方框/方形

                                        這類元素往往結合文案一起展示,主要通過方框的線條將用戶的視覺中心指引到作者想要表達的內容。

                                        歡迎關注作者的微信公眾號:「WEB」

                                        「學好點線面,網頁設計不會差」

                                        1. 《平面設計中如何用“點”提高視覺張力?》
                                        2. 《實戰教程!聊聊平面構成中線的風格和玩法》
                                        3. 《設計基礎功!聊聊平面構成中的點線面(超多案例)》
                                        4. 《實戰教程第二彈!聊聊平面構成中「面」的風格和玩法》

                                        【優設網 原創文章 投稿郵箱:[email protected]

                                        ================關于優設網================
                                        “優設網uisdc.com“是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
                                        【特色推薦】
                                        設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/
                                        設計微博:擁有粉絲量190萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
                                        設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com

                                        優設大課堂

                                        非特殊說明,本文版權歸原作者所有,轉載請注明出處
                                        本文地址:http://www.ndwc.tw/square-elements-in-web-design

                                        發表評論 加載中....

                                        評論加載中....

                                        uisdc

                                        評論區都快餓癟了,看看我期盼的小眼神...

                                        sketch 優設大課堂 轉場動效 界面設計 設計師 扁平化設計 交互設計師 排版布局 職場 平面設計 設計師專訪 素材下載 視覺設計 配色 設計流程 用戶體驗設計 web前端開發 AI教程 海報設計 設計理論 神器下載 字體下載 設計規范 設計趨勢 psd下載 動效設計 產品設計 圖標設計 logo設計 ICON 神器推薦 職場規劃 App設計 字體設計 酷站推薦 交互設計 ui設計 設計師職場 優秀網頁設計 用戶體驗 ps技巧 酷站 PS教程 網頁設計 經驗分享
                                        wechat

                                        優設官方微信

                                        50萬設計師關注

                                        微信號:youshege

                                        把好文章收藏到微信

                                        打開微信,掃碼分享
                                        學設計 優設網 在這里

                                        江苏11选5开奖结果