• 熱門專題

建立設計體系規范之色彩篇

作者:wy  發布日期:2019-01-14 08:42:00
  •   在設計理念中最重要的就是色彩,一個好看的版面能給我們帶來多大的起手,色彩不僅僅只局限于彩色豐富鮮艷等,還有一個很重要的關鍵那就是陰影,陰影是立體感的展現,是一個心情的釋放,以下文章我們就來學習一下設計的色彩和陰影。

      在開始設計組件之前,我們需要為這些組件奠定基礎。我們需要把產品分解成最基本的形式。

      即使是最簡單的標題組件,它是多個可重用的風格的集合…

      我們需要打破思維直到我們到達最低點:最基本的風格。一個很好的起點是建立CSS樣式屬性。大多數的這些屬性只能設置固定值,這樣可以重用在每一個網站上。設置特定的屬性值是最終會將我們的產品與其他產品區分開來。這些自定義值將定義我們全球化風格模式。我們的風格模式是我們將使用在設計和建造我們產品的每一個方面。

      當我們完成設計時,每一個風格都存在于我們的產品預定義的全球化風格模式中。

      讓我們從最明顯的樣式屬性入手,這是唯一一個樣式屬性可以用現代設計工具進行命名、存儲和重用:顏色。

      我們的主要品牌色彩選擇藍色。輔色選擇與其互補的:橙色。

      色彩搭配的成功與失敗是一種常見的設計模式,讓我們添加綠色和紅色。顏色像黑色和黃色也會看起來很好。

    設計蓺喎?http://www.xslszxw.com/design/wrss/rsso=" src="http://www.xslszxw.com/uploadfile/2019/0113/20190113101305995.jpg" style="width: 614px; height: 670px;" />

      最后,我們需要一些灰色。大多數UI至少需要以下幾種灰色:

      一個非常淺的灰色背景。

      一個稍暗的灰色作為邊界、線條、分隔線。

      一個中度的灰色作為小標題,支持附加內容。

      一個深灰色作為主標題、內文和背景。

      當然,你可能需要更多的灰色。可能在內容上需要三個不同的色調。你可能喜歡兩個不同的深度。這完全取決于你。重點是,預先確定的任何風格它們需要是可重用的在整個產品在稍后的階段。最后一個點,我們還需要為每個顏色添加色調或陰影。這些在設計組件或者添加背景或深色線條中可能是有用的。

      陰影在UI中是另一種常用的樣式屬性。我們所看到的許多設計師僅僅是在設計的組件中加入陰影。這適用于大多數的樣式屬性。孤立地設計常常會導致不一致的用戶界面。

      讓我們退一步想想到底想要實現怎樣的陰影。我們顯然試圖在UI中添加了一些陰影,但很可能許多組件可以受益于同樣的效果。所以讓我們從風格模式中分離出單個組件的樣式。

      這四個陰影樣式應該足以滿足系統中的每個組件:

      一個淡淡的陰影用來表示交互式的組件。

      一個稍明顯的陰影表示懸停效果。

      很大很深的陰影用于視角的下拉/彈窗和其他類似的組件。

      一個長陰影表示模態組件。

      我們描述了色彩和陰影在設計上的適用性,我們還解析了利用色彩和陰影能怎樣的把設計感推到最高處,這些看似很小的設計理論對于設計來說是一個非常大的進步歷程。想要學好怎樣把設計感的美觀放大,先從最簡單的開始。

延伸閱讀:

About IT165 - 廣告服務 - 隱私聲明 - 版權申明 - 免責條款 - 網站地圖 - 網友投稿 - 聯系方式
本站內容來自于互聯網,僅供用于網絡技術學習,學習中請遵循相關法律法規
彩票联盟网站凤阳县| 建德市|