淺談扁平化設(shè)計(jì)—– keep it simple
2013可以說(shuō)是扁平化設(shè)計(jì)的一年。 扁平化時(shí)代之前,設(shè)計(jì)師的作品往往非常的寫(xiě)實(shí),非常的有立體感!但是現(xiàn)在即便是擬物設(shè)計(jì)的引領(lǐng)者蘋(píng)果,也不得不轉(zhuǎn)變?cè)O(shè)計(jì)思路,在iOS 7上開(kāi)始著手扁平化設(shè)計(jì)的探索。
什么是扁平化設(shè)計(jì)?
對(duì)于設(shè)計(jì)師來(lái)說(shuō),扁平化設(shè)計(jì)是一種實(shí)打?qū)嵉脑O(shè)計(jì)風(fēng)格,不要花招,不要粉飾。從整體的角度來(lái)講,扁平化設(shè)計(jì)是一種極簡(jiǎn)主義美學(xué),附以明亮柔和的色彩,最后配上粗重醒目,而風(fēng)格又復(fù)古的字體。扁平化設(shè)計(jì)簡(jiǎn)化了諸如按鈕、圖標(biāo)一類(lèi)的界面元素。
大圖片取代了動(dòng)效。在極簡(jiǎn)主義風(fēng)格的設(shè)計(jì)中,設(shè)計(jì)師通常給予內(nèi)容充足的空間以供傳達(dá),這樣就能夠簡(jiǎn)單、直接的講述內(nèi)容。從扁平化設(shè)計(jì)中又衍生出幾個(gè)不同的小流派:”似扁平化設(shè)計(jì)”和”長(zhǎng)投影設(shè)計(jì)”就是最近被反復(fù)強(qiáng)調(diào)的兩個(gè)概念。
“似扁平化設(shè)計(jì)”(Almost Flat Design)是以扁平化設(shè)計(jì)為基礎(chǔ),但是添加了一些簡(jiǎn)單的效果,比如簡(jiǎn)單的投影,基本的漸變。
“長(zhǎng)投影設(shè)計(jì)”圖標(biāo)設(shè)計(jì)中使用較多,一般是一道45度角的陰影從圖標(biāo)中延伸而出,最近的圖標(biāo)設(shè)計(jì),大部分都采用”長(zhǎng)投影設(shè)計(jì)”。
高效率應(yīng)用扁平化UI套件(UI kits)
通過(guò)UI套件,我們可以初步了解扁平化設(shè)計(jì)。 套件非常的節(jié)省時(shí)間——可以自由選擇套件中的元素,然后進(jìn)行自己的實(shí)驗(yàn)。大多數(shù)UI套件的格式是PSD,非常易于編輯。
扁平化UI套件推薦
下面推薦的UI套件種類(lèi)不一,從簡(jiǎn)單免費(fèi)的到復(fù)雜收費(fèi)的,扁平化的UI套件可真是越來(lái)越多了。
簡(jiǎn)約、支持視網(wǎng)膜(Retina),照片滾動(dòng)箭頭、按鈕、簡(jiǎn)單的圖標(biāo),什么都有。大小適中,顏色復(fù)古。
由Designmodo出品,黑暗風(fēng)格,包含了多種按鈕和面板,有點(diǎn)Win8的風(fēng)格。而且扁平之中帶點(diǎn)擬物風(fēng)格。
包含了一些非常實(shí)用的基本元素,比如社交網(wǎng)絡(luò)登錄按鈕,菜單、媒體播放器,配色非常扁平化。
包含了從下拉菜單到導(dǎo)航條再到社交分享工具在內(nèi)的大量元素。
扁平化圖標(biāo)推薦
扁平化設(shè)計(jì)的圖標(biāo)無(wú)處不在,資源也非常豐富。 跟UI套件一樣,大多數(shù)的圖標(biāo)采用PSD格式,這樣可以根據(jù)個(gè)人情況進(jìn)行修改。 很多圖標(biāo)的設(shè)計(jì)非常的具有專(zhuān)業(yè)性,專(zhuān)門(mén)為某類(lèi)應(yīng)用而設(shè)計(jì)。這種圖標(biāo),用來(lái)做按鈕也很合適。 當(dāng)選擇圖標(biāo)下載時(shí),記得尺寸大小選擇要合適。有的是矢量圖形,而有的放大時(shí)會(huì)損失質(zhì)量。
用途廣泛,涵蓋了歐美幾乎所有流行的網(wǎng)站,并采用了長(zhǎng)投影設(shè)計(jì)。通過(guò)用色和投影上的細(xì)微差別,達(dá)到了不同圖標(biāo)之間的高辨識(shí)度。每種圖標(biāo)有4種大小——32,64,128以及256。
非常棒的作品,跟SEO相關(guān) 的一些圖標(biāo),扁平化+長(zhǎng)投影,對(duì)于一些機(jī)構(gòu)來(lái)說(shuō)非常合適。
本文地址:http://m.likemindfilms.com/tutorial/id1726.html
您可能還喜歡
- 關(guān)于第三方注冊(cè)和本地注冊(cè)的選擇
- 8大網(wǎng)頁(yè)前端界面必備jQuery插件
- 掌上指路標(biāo) —– APP架構(gòu)與導(dǎo)航設(shè)計(jì)
- 時(shí)尚電商網(wǎng)站交互分析
- 軟件推薦為移動(dòng)設(shè)計(jì)而生-Justinmind
- TGideas實(shí)例:加載,不只是少一點(diǎn)點(diǎn)
- 網(wǎng)頁(yè)設(shè)計(jì)中引人入勝的引導(dǎo)頁(yè)設(shè)計(jì)
- 體驗(yàn)新版Apple AppStore ——App設(shè)計(jì)從
- 確認(rèn)按鈕在左邊,取消按鈕在右邊?
- 交互設(shè)計(jì)從登錄開(kāi)始
- 專(zhuān)訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類(lèi)
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏