源:微信公眾號 PingMianDesigner(平面設計)
扁平化設計風格也稱簡約設計風格、極簡設計風格,它的核心就是去掉冗余的裝飾效果,摒棄高光、陰影等能造成透視感的效果,通過抽象、簡化、符號化的設計元素來表現(xiàn)。界面UI上也使用扁平化設計,采用抽象的方法,使用矩形色塊、大字體,光滑感、現(xiàn)代感十足。
扁平化風格與擬物化風格形成鮮明對比,扁平化在移動系統(tǒng)上不僅界面美觀、簡潔,而且降低了功耗,延長了待機時間,提高了運算速度。
降低移動設備的硬件需要,提高運行速度,延長電池使用壽命和待機時間,使用更加高效。簡約而不簡單,搭配一流的色彩,讓看久了擬物化的用戶感覺煥然一新。
突出內容主體,減弱各種漸變、陰影、高光等模擬真實視覺效果對用戶視線的干擾,信息傳達更簡單、直觀,緩解審美疲勞設計更容易,開發(fā)更簡單。扁平化設計更加簡約,條理清晰,在適應不同屏幕尺寸方面設計更加容易修改。
扁平化風格雖然有很多優(yōu)點,但對于不適應的人來說,缺點也是有的。在色彩和立體感上的缺失,使用戶體驗度降低,特別在一些非移動設備上,設計過于簡單設計簡單造成直觀感缺乏,有時候需要學習才可以了解,造成一定的學習成本。簡單的線條和色彩,造成傳達的感情不豐富。
扁平化設計雖然簡單,但也需要技巧,否則整個設計會因為過于簡單而缺乏吸引力,甚至沒有個性,不能給用戶留下深刻的印象。扁平化設計可以遵循以下原則:
從扁平化風格的定義可以看出,扁平化設計屬于極簡設計,力求取出冗余的裝飾效果,在設計上追求二維效果,所以在設計時與擬物化風格完全相反,去掉大量的修飾,比如:陰影、斜面、浮雕、漸變、羽化,遠離寫實主義,通過抽象、簡化或符號化的設計手法將其表現(xiàn)出來。
在扁平化設計中,按鈕、圖標等的設計多使用簡單的幾何元素,如矩形、圓形、多邊形等,使設計整體上趨近極簡主義設計理念。通過簡單的圖形達到設計目的,對于相似的集合元素,可以用不同的色彩填充來進行區(qū)別,同時,簡化按鈕和選項,做到極簡效果。
在扁平化設計中,顏色的使用是非常重要的,力求色彩鮮艷、明亮,在選色上要注意顏色的多樣性,以更多的顏色、更炫麗的顏色來劃分界面不同的范圍,以免造成平淡的視覺感受。
風格包括:常規(guī)扁平化、長投影、投影式、漸變式。
一、常規(guī)扁平化
1、寬度: 500px, 高度: 400px. 背景色#e8d59b.
2、參考線設置:
垂直:157px,177px,250px,323px, 343px, 378px
水平:72px, 107px, 127px, 200px, 273px, 293px, 328px
最終結果:
3、前景色#d14242,,圓角矩形工具,半徑40,如下
4、橢圓工具,顏色#ffffff, 在中心創(chuàng)建圓狀物體。
依然在圓形圖層,選擇減去頂層形狀,畫出圓環(huán)形狀如下圖。
5、自定義形狀工具,前景色 #ffffff, 中心創(chuàng)建三角箭頭
基本扁平化圖標告成
二、長投影
1、矩形工具,前景色#000000, 在三角箭頭圖層以及圓環(huán)圖層下方畫出形狀如下圖
自由變換,選擇45度
為矩形形狀添加圖層蒙版
在圖層蒙版位置按住CMD+左鍵單擊圓角矩形形狀圖層,然后選擇>反向
使用油漆桶工具,前景色設置為#000000,抹去超出圓角矩形的陰影
如下圖使用鋼筆工具
不透明度設置為 20%
2、步驟1是三角箭頭的陰影,步驟2是圓環(huán)的陰影,類似同上,不再贅述。
三、 漸變式
1、復制圓角矩形圖層,然后移動到圖層最頂端,填充設置為 0%
2、使用鋼筆工具,刪除一些錨點,然后拖移一些錨點到中心,如下圖。
為復制后的圖層添加圖層樣式,如下(正片疊底 不透明度20% 縮放100%)
3、原圓角矩形圖層也如下設置(正片疊底 不透明度10% 縮放100%)
四、投影式
這個超級簡單,給所有圖層添加如下圖層樣式即可(正片疊底 不透明度20% 距離10)
======