• 相關文章
  • 文字效果
  • 調色教學
  • 合成教學
  • 去背教學
  • 照片後製
  • 電腦繪圖
  • 設計教學
  • 動畫教學
  • 簽名製作
  • 其他教學
  • Illustrator
  • CorelDraw教學
  • 攝影教學
  • 3DMAX教學
  • AUTOCAD教學
  • MAYA教學
  • FireWorks教學
  • flash教學
  • 繪畫教學
  • PS作品欣賞
  • 包裝設計範例
  • LOGO設計範例
  • 封面設計範例
  • 名片設計範例
  • CG繪圖設計
  • 海報設計
  • 網頁設計範例
  • PS筆刷下載
  • PS濾鏡下載
  • PS動作下載
  • PS背景下載
  • PS樣式下載




  • 【 設計理論】詳細解析網頁設計中的韻律線條使用技巧




    詳細解析網頁設計中的韻律線條使用技巧

    這一次的教學是屬於設計理論領域中的設計理論的相關教學。

    文章出處是來自優設的設計理論類文章,寫教學的作者是佚名,感謝佚名提供設計理論的實作教學。

    教學大綱:

    在網頁設計中,橫向和豎向的直線非常常見,利用整齊的線條可以打造出有序的視覺路徑以及信息層級。當然,有些時候,可以不按理出牌,設計一些傾斜的線條,讓你的網站不拘一格,更加與眾不同。


    設計理論教學開始

    在網頁設計中,橫向和豎向的直線非常常見,利用整齊的線條可以打造出有序的視覺路徑以及信息層級。當然,有些時候,可以不按理出牌,設計一些傾斜的線條,讓你的網站不拘一格,更加與眾不同。

    打破傳統布局,創造動態的自由視感,讓構成更加複雜——無論是利用簡約的幾何圖形,或是精緻的傾斜圖像。讓你的設計更具吸引力,不妨試試斜線。

    Paseo Itaigara

    形狀感很強,整體設計的很成功,顯得並不雜亂。菱形無處不在,拼嵌式的菱形,裝飾性的菱形,按鈕的菱形,很好的主題一致性。

    詳細解析網頁設計中的韻律線條使用技巧

    Impero

    交互式網站,積極的氛圍、極簡的色彩。設計師利用兩組對角線(粗細交織)打造了視覺路徑。

    詳細解析網頁設計中的韻律線條使用技巧

    Alpina

    強烈推薦!利用視覺滾錯,加上美輪美奐的照片。來感受這趟視覺盛典吧。流暢優美的照片美景。斜線分割的很巧妙(試想用直線風格,效果不會這麼到位)

    詳細解析網頁設計中的韻律線條使用技巧

    Ullevi Preparty Area

    不平衡的使用圖像元素,溫暖的圖像,純白色的背景,整體感覺和諧又與眾不同。

    詳細解析網頁設計中的韻律線條使用技巧

    Case 3D

    乾淨、整齊,白色佐以霓虹色的藍綠色。三角形作為核心裝飾元素。感覺很現代。

    詳細解析網頁設計中的韻律線條使用技巧

    Networked Insights

    這個頁面的設計感覺相當的不平衡。大量傾斜的線條不但可以用來做裝飾,也可起到功能性作用。傾斜的矩形做微件,整體感很強烈。

    詳細解析網頁設計中的韻律線條使用技巧

    Wavefront Musical Festival

    色彩誘人,動態、神秘、音樂主題的外觀。網頁設計使用了全屏的圖片背景,以及可愛的半調視感。很好的詮釋了音樂節的氛圍。斜線,以及霓虹色彩的漸變讓網頁感覺更前衛。

    詳細解析網頁設計中的韻律線條使用技巧

    Bespoke

    利用投影一般延伸的六邊形,打造了視覺焦點。明亮的色彩,純色的背景,整體又非常簡約。

    詳細解析網頁設計中的韻律線條使用技巧

    Vida Comunicacao

    巧妙幾何了形狀,讓整體具有一種誘人的不對稱感,讓人禁不住要探索一番。

    詳細解析網頁設計中的韻律線條使用技巧

    Dunlop

    在滑動選塊中斜線被廣泛的使用,非常的抓眼。亮黃色的使用也很贊。

    詳細解析網頁設計中的韻律線條使用技巧

    Startup Giraffe

    創新機構,利用不對稱的斜線宣告自身的”創意無窮、不走尋常路”。乾脆、整潔、簡約的幾何形狀功不可沒。

    詳細解析網頁設計中的韻律線條使用技巧

    Timberline Tours

    非傳統的菜單,讓人感覺動感十足。三條斜線令人印象深刻,從而和菜單中其他按鈕有所區別。

    詳細解析網頁設計中的韻律線條使用技巧

    V2

    交互式網站,三維效果,非常節制的黑白紅三色配色,大量使用的幾何形狀——三角形、菱形以及矩形。

    詳細解析網頁設計中的韻律線條使用技巧

    4V Connect

    純白背景,以突出創新這一理念。乾淨、毫無繁雜感的頁面中使用了纖細的斜線,感覺優雅而又精緻。

    詳細解析網頁設計中的韻律線條使用技巧

    Fifteen Robin

    設計師利用了大量的斜線條紋。這樣整個頁面”亮”了起來,感覺非常的動態。

    詳細解析網頁設計中的韻律線條使用技巧

    Gaston Bouchayer

    極簡主義式設計,倘若去掉斜線,不免中規中矩,有時候破壞一下平衡桿,效果會更佳。

    詳細解析網頁設計中的韻律線條使用技巧

    Prophets

    灰色背景,多邊形裝飾。

    詳細解析網頁設計中的韻律線條使用技巧

    POSTYOU

    個性化的斜線切割。

    詳細解析網頁設計中的韻律線條使用技巧

    The Enterprise Foundation

    有效的視覺焦點打造,優秀的不對稱干。幾何形狀的Logo,傾斜的箭頭極富視覺吸引力。

    詳細解析網頁設計中的韻律線條使用技巧

    Precious Villas

    不平衡感強烈、歪斜的主頁。但是整體又簡潔、直觀。

    詳細解析網頁設計中的韻律線條使用技巧

    The George Hotel

    如何讓網頁中的某一區塊更加被注意?試試斜線吧。

    詳細解析網頁設計中的韻律線條使用技巧

    結論

    斜線、斜條紋、傾斜的形狀,能夠打造出不對稱感,讓網頁更加動態化。如果想要強調某一區域,不妨試試斜線,但要注意:使用斜線不意味着整體頁面可以繁雜、可以無組織。還是要注意整體的平衡感、組織感、整潔性。

    — —

    文章永久連結為: 詳細解析網頁設計中的韻律線條使用技巧