威海網絡公司:淺談扁平化(huà)2.0設計布局-網站設計-威海志成網絡公司-提供威海網站_微信小程序_網絡推廣等網絡營銷解決方案!
當前位置:首頁>>新聞資訊>>網站設計

威海網絡公司:淺談扁平化(huà)2.0設計布局

發表日期:2017-08-17 06:43:27文章(zhāng)編輯:admin浏覽次數:767 标簽:

  【威海網絡公司訊】8月(yuè)17日,随著(zhe)扁平化(huà)1. 0 運用(yòng)了(le)兩三年,新的(de)扁平化(huà)2. 0 時(shí)代,在漸變流行打破了(le)開端.時(shí)至今日,扁平化(huà)已不再是流行一時(shí)的(de)設計風潮,而是一種美(měi)學風格。扁平化(huà)大(dà)膽的(de)用(yòng)色,簡潔明(míng)快(kuài)的(de)界面風格一度讓大(dà)家耳目一新,當它對(duì)元素效果抛棄的(de)如此徹底之際,它又将效果撿起來(lái),改裝成另一番模樣,使得(de)扁平化(huà)進化(huà)爲扁平化(huà)2.0。

  扁平化(huà)設計特質

  對(duì)于扁平化(huà)的(de)定義,依然沒有一個(gè)固定範式,但概括起來(lái)有下(xià)面四個(gè)特征:

  1)沒有多(duō)餘的(de)效果,例如投影(yǐng)、凹凸或漸變等

  2)使用(yòng)簡潔風格的(de)元素和(hé)圖标

  3)大(dà)膽豐富且明(míng)亮的(de)配色風格

  4)盡量減少裝飾的(de)極簡設計

  扁平化(huà)所追随的(de)細節依然不變,然而這(zhè)些“規範”開始松懈了(le)。随著(zhe)扁平化(huà)進化(huà)到2.0時(shí)代,我們再來(lái)看看2016年,有哪些是扁平化(huà)設計以前從未有的(de)。

  扁平化(huà)2.0的(de)全新細節

  爲了(le)避免純粹的(de)扁平化(huà)設計,一些細微的(de)效果逐漸被運用(yòng)其中。

  扁平化(huà)曆來(lái)被人(rén)所诟病的(de)方面即交互不夠明(míng)顯,按鈕難以找到等。現在這(zhè)些問題都可(kě)以通(tōng)過增加一些小小的(de)效果而得(de)以解決。但這(zhè)些效果的(de)運用(yòng)也(yě)是符合扁平化(huà)的(de)簡潔美(měi)學的(de)。

  一、微陰影(yǐng)

  微陰影(yǐng),就是極其微弱的(de)投影(yǐng),這(zhè)是一種幾乎不被人(rén)所立刻察覺的(de)投影(yǐng),它可(kě)以增加元素的(de)深度,使其從背景中脫穎而出,引起用(yòng)戶的(de)注意。但在使用(yòng)這(zhè)一效果時(shí)候需要注意,要讓它保持柔和(hé)感和(hé)隐蔽性。

  利用(yòng)元素的(de)形狀,使其從背景中獨立出來(lái)。即使元素與背景有著(zhe)同樣的(de)顔色,依然可(kě)以通(tōng)過微陰影(yǐng)加以區(qū)分(fēn),而視覺上還(hái)能保持色調一緻的(de)簡潔性。

  有人(rén)這(zhè)時(shí)會提到長(cháng)陰影(yǐng),但長(cháng)陰影(yǐng)通(tōng)常運用(yòng)的(de)地方隻是在LOGO、圖标等元素的(de)内部,它是扁平化(huà)的(de)一種設計風格的(de)延伸。

  二、幽靈按鈕

  這(zhè)不是指一個(gè)幽靈形狀的(de)按鈕。恰恰相反,這(zhè)類按鈕的(de)形狀非常簡單,僅僅是一個(gè)矩形或一個(gè)圓角矩形的(de)邊框,内部爲透明(míng)。看上去若有若無,類似于幽靈的(de)出沒方式。

  也(yě)許你已經在很多(duō)扁平化(huà)設計風格中見過它們了(le)。它們通(tōng)常會設計得(de)比普通(tōng)的(de)按鈕略大(dà),浮動于大(dà)圖背景、視頻(pín)的(de)上方。你可(kě)以在飽覽整張圖片或整個(gè)視頻(pín)的(de)同時(shí)也(yě)能看到它的(de)存在,爲了(le)讓它獲得(de)聚焦,通(tōng)常它位于比較顯眼的(de)位置,例如屏幕的(de)中間。

  幽靈按鈕的(de)顔色通(tōng)常爲黑(hēi)或白,這(zhè)是因爲它需要和(hé)周圍環境所協調。如果可(kě)以,試試别的(de)色彩也(yě)未嘗不可(kě)。例如無色的(de)黑(hēi)白圖片搭配有色的(de)幽靈按鈕。

  同時(shí),也(yě)需要注意,與幽靈按鈕搭配的(de)也(yě)多(duō)半是無襯線的(de)字體,中文也(yě)是細黑(hēi)等類似的(de)字體。這(zhè)樣就讓按鈕和(hé)其字體都在外觀上取得(de)一緻性。

  三、低調漸變

  談到避免極端的(de)扁平主義,漸變的(de)運用(yòng)就有回暖之勢。而新的(de)漸變不同以往,它往往是以更爲低調的(de)姿态出現的(de),比如隻用(yòng)于背景色或氛圍色,不再喧兵(bīng)奪主,并且隻在兩種顔色之間漸變過渡。下(xià)面是雙色漸變的(de)實例。

  可(kě)以看出這(zhè)一案例中,網頁已經讓漸變成爲了(le)一種設計元素。霸占整個(gè)屏幕的(de)圖片充滿震撼,而讓其也(yě)參與到過度的(de)漸變中,讓圖片散發出霓虹燈一樣的(de)效果,搭配幽靈按鈕,這(zhè)幾乎是信手拈來(lái)的(de)絕佳創意。

  四、圓形

  毫無疑問,扁平化(huà)設計就是Google的(de)Material Design的(de)前身,這(zhè)在Material Design的(de)設計風格中可(kě)以看出扁平化(huà)的(de)影(yǐng)子,但後者不但繼承其簡潔的(de)優勢,還(hái)進一步在用(yòng)戶體驗上得(de)以發揮。

  最明(míng)顯的(de)是,除了(le)模拟現實環境裏紙質重疊的(de)微投影(yǐng),那恐怕就要數圓的(de)運用(yòng)了(le)。扁平化(huà)中圓形的(de)元素越來(lái)越多(duō),可(kě)以說圓形在移動端的(de)優勢是特别明(míng)顯的(de)。由于圓形很好的(de)模拟了(le)手指印,因此一個(gè)圓的(de)存在看似就是一個(gè)可(kě)觸的(de)地方。這(zhè)對(duì)于喚起用(yòng)戶的(de)操作發揮了(le)極大(dà)的(de)作用(yòng)。

  由于圓形本身的(de)特殊性,使它極易從背景中分(fēn)離出來(lái),因此将重要的(de)元素設計爲圓形也(yě)是心機滿滿。例如下(xià)面這(zhè)家餐廳的(de)網頁設計,圓形本身具有一種親和(hé)感,非常契合餐廳這(zhè)類溫馨休閑的(de)品牌氛圍。

  五、雙色搭配

  早期的(de)扁平化(huà)配色是非常鮮豔大(dà)膽的(de),它可(kě)以在高(gāo)飽和(hé)度中挑選六到七種顔色進行搭配。如今,扁平化(huà)設計的(de)配色選擇雖然仍然朝明(míng)亮大(dà)膽的(de)方向走,但隻局限于有限的(de)顔色選擇,雙色調配色是目前逐漸流行起來(lái)的(de)另一種配色方向。

  大(dà)家都知道通(tōng)過配圖來(lái)強調配色。最初的(de)扁平化(huà)的(de)設計,隻有十分(fēn)有限的(de)素材資源,因此色彩的(de)選擇相對(duì)也(yě)有限。近來(lái),扁平化(huà)項目包含了(le)大(dà)量的(de)影(yǐng)像。由于這(zhè)一轉變,就能從衆多(duō)明(míng)亮或鮮豔的(de)色系中進行選擇配色。

  文章(zhāng)整理(lǐ):威海網絡公司 http://www.zccn.cc

相關新聞

志彙雲商城(chéng) | 用(yòng)戶隐私設置

配置位置 記住一定要配置15個(gè)才能全功能自己填寫appid方式既非授權方式小程序配置位置如果是使用(yòng)授權三方小程序配置位置:總共15個(gè)内容用(yòng)戶信息(微信昵稱、頭像):幫助用(yòng)戶設置個(gè)人(rén)信息位置信息幫助用(yòng)戶完善收貨地址信息及進行個(gè)性化(huà)内容展示地址幫助用(yòng)戶完善收貨地址信息發票(piào)信息幫助用(yòng)戶獲取發票(piào)信息微信運動數據...

日期:2024-04-08 浏覽次數:124

AI智能翻譯|頁面、産品、新聞,一鍵翻譯完成

文章(zhāng)整理(lǐ):威海網絡公司 https://www.zccn.cc...

日期:2024-03-11 浏覽次數:157

小程序備案和(hé)騰訊手機号驗證收費新規,必看!

各位商家朋友注意了(le)!微信近期有一些重大(dà)調整,與我們商家息息相關,請大(dà)家仔細閱讀并轉發互相提醒!1、小程序備案通(tōng)知爲貫徹落實《中華人(rén)民共和(hé)國反電信網絡詐騙法》、《互聯網信息服務管理(lǐ)辦法》及《非經營性互聯網信息服務備案管理(lǐ)辦法》等法律法規要求,配合相關部門做(zuò)好移動互聯網信息服務管理(lǐ),根據2023年8月(yuè)4日工信部...

日期:2024-02-26 浏覽次數:222

微信小程序備案指引

一、小程序備案法律法規參考1、《中華人(rén)民共和(hé)國反電信網絡詐騙法》 第二十三條 設立移動互聯網應用(yòng)程序應當按照(zhào)國家有關規定向電信主管部門辦理(lǐ)許可(kě)或者備案手續。2、《互聯網信息服務管理(lǐ)辦法》 第四條 國家對(duì)經營性互聯網信息服務實行許可(kě)制度;對(duì)非經營性互聯網信息服務實行備案制度。未取得(de)許可(kě)或者未履行備案手續的(de),...

日期:2024-02-26 浏覽次數:212

雙十一提前準備,微信小程序獲客爆單指南(nán)

每年的(de)雙十一,各個(gè)電商平台都使出了(le)渾身解數,隻有你想不到的(de),沒有商家爸(bà)爸(bà)想不到的(de)方法。今年的(de)雙十一活動已經默默敲響,但與過去不同的(de)是,今年受到大(dà)環境的(de)影(yǐng)響,商家紛紛做(zuò)起了(le)私域流量帶貨,利用(yòng)微信小程序獲客營銷,希望能夠在雙十一期間絕地反擊,爲年初的(de)影(yǐng)響好好「回血」。電商零售裂變拉新分(fēn)銷裂變...

日期:2023-10-19 浏覽次數:249

小程序常見的(de)4個(gè)引流方法

一、威海小程序通(tōng)過關鍵詞引流。當用(yòng)戶需要一個(gè)小程序時(shí),他(tā)們會習(xí)慣性地在微信上搜索,與用(yòng)戶搜索詞相關的(de)小程序會優先顯示給用(yòng)戶。因此,企業在确定小程序名稱時(shí),可(kě)以選擇用(yòng)戶經常搜索的(de)關鍵詞,這(zhè)樣用(yòng)戶就可(kě)以搜索到企業的(de)小程序。而且小程序越早開通(tōng),排名就越高(gāo),所以企業注冊開發小程序要趁早。二、使用(yòng)...

日期:2023-10-19 浏覽次數:243