什么是扁平化設(shè)計(jì)?
簡(jiǎn)單的說(shuō)就是拋棄那些已經(jīng)流行多年的漸變、陰影、高光等擬真視覺(jué)效果,使用一些簡(jiǎn)單的純色塊,從而打造出一種看上去更“平”的界面。扁平風(fēng)格的一個(gè)優(yōu)勢(shì)就在于它可以更加簡(jiǎn)單直接的將信息和事物的工作方式展示出來(lái),減少認(rèn)知障礙的產(chǎn)生。
下面是列舉一些國(guó)外網(wǎng)站的例子:
Squarespace
新版的Squarespace幾乎完全采用了扁平化的視覺(jué)風(fēng)格,只在一些細(xì)節(jié)當(dāng)中使用了相對(duì)傳統(tǒng)的方式突出了重要的交互元素。試用一下你就會(huì)發(fā)現(xiàn),其實(shí)他們的產(chǎn)品在功能邏輯上還是蠻復(fù)雜的,但這一切都隱含在簡(jiǎn)約直白的界面背后,你真的可以從中隱約感受到其設(shè)計(jì)團(tuán)隊(duì)付出的心血。
Facebook
Facebook是扁平化界面設(shè)計(jì)的絕佳案例。除了幾個(gè)主要的動(dòng)作按鈕當(dāng)中使用了輕微的斜面效果以外,其他界面元素全部采用扁平風(fēng)格。鑒于他們多年來(lái)在這方面一直保持著這樣的特色,至少我們可以說(shuō)這種設(shè)計(jì)風(fēng)格對(duì)于Facebook來(lái)說(shuō)是完全適用的。
Rdio
Rdio最新版本的網(wǎng)站及產(chǎn)品界面中都采用了很徹底的最小化、扁平化的設(shè)計(jì)風(fēng)格,你很難找到使用了陰影、漸變等效果的界面元素。
Nest
在他們的網(wǎng)站中,實(shí)際的產(chǎn)品及相關(guān)的應(yīng)用環(huán)境照片作為“真實(shí)”元素融入到扁平風(fēng)格的媒介載體當(dāng)中,虛實(shí)結(jié)合,讓訪問(wèn)者可以很容易的將注意力聚焦在產(chǎn)品上,而不會(huì)被網(wǎng)站界面上的視覺(jué)元素所干擾。
對(duì)設(shè)計(jì)風(fēng)格的選取最終還是要取決于具體產(chǎn)品的實(shí)際情況。在我個(gè)人看來(lái),相比于擬物化而言,扁平風(fēng)格的一個(gè)優(yōu)勢(shì)就在于它可以更加簡(jiǎn)單直接的將信息和事物的工作方式展示出來(lái),減少認(rèn)知障礙的產(chǎn)生。
無(wú)論采用怎樣的風(fēng)格,優(yōu)秀的界面設(shè)計(jì)都需要遵從一些共通的設(shè)計(jì)原則:
一致性
通過(guò)具有一致性的設(shè)計(jì)模式及視覺(jué)風(fēng)格,為用戶(hù)建立起完整一致的心智模型,使產(chǎn)品更加易用,提升整體體驗(yàn)。
對(duì)比
通過(guò)對(duì)配色、尺寸和布局的調(diào)整,使可點(diǎn)擊的界面元素在視覺(jué)上與其他元素形成鮮明的對(duì)比。
布局
可以嘗試使用960gs一類(lèi)的網(wǎng)格布局為界面設(shè)定視覺(jué)規(guī)范,使用戶(hù)的視線(xiàn)可以跟隨內(nèi)容本身所界定出的路徑自然的移動(dòng),增強(qiáng)界面的視覺(jué)平衡。
層級(jí)化
最重要的東西要比相對(duì)次要的東西更容易被看到。關(guān)于這個(gè)話(huà)題我可以寫(xiě)一整篇文章出來(lái),簡(jiǎn)單的說(shuō),就是在界面設(shè)計(jì)中著重突出那些與核心功能與常見(jiàn)用例相關(guān)的交互元素,而將其他操作元素置于次要位置,這可以使界面得到最有針對(duì)性的優(yōu)化和簡(jiǎn)化。
目標(biāo)用戶(hù)
不同類(lèi)型的用戶(hù)所青睞的界面風(fēng)格也有所不同。建筑、設(shè)計(jì)、時(shí)尚等領(lǐng)域的用戶(hù)可以更好的擁抱扁平化風(fēng)格,而其他更加“普通”的用戶(hù)則更容易接受相對(duì)傳統(tǒng)的擬物化界面。
反饋
當(dāng)點(diǎn)擊行為發(fā)生時(shí),要立刻向用戶(hù)提供清晰明確的視覺(jué)反饋。動(dòng)畫(huà)過(guò)渡效果就是一種比較常見(jiàn)的反饋方式,例如在用戶(hù)執(zhí)行操作后,使用旋轉(zhuǎn)圖標(biāo)提示用戶(hù)系統(tǒng)正在進(jìn)行響應(yīng)。
降低“摩擦力”
無(wú)論采用怎樣的視覺(jué)風(fēng)格,都要使界面盡量簡(jiǎn)化,減少用戶(hù)完成目標(biāo)所需執(zhí)行的操作,打造更加流暢的交互體驗(yàn)。任何一點(diǎn)障礙或額外的步驟都會(huì)提高操作成本,增加功能的復(fù)雜度,進(jìn)而降低轉(zhuǎn)化率。
鼓勵(lì)探索
了解目標(biāo)用戶(hù)有可能對(duì)產(chǎn)品進(jìn)行哪些方面的探索。一旦他們習(xí)慣了產(chǎn)品的界面與基礎(chǔ)功能,并開(kāi)始向“高級(jí)用戶(hù)”的階段進(jìn)發(fā)時(shí),要為他們的探索和學(xué)習(xí)行為進(jìn)行必要的指引與“獎(jiǎng)勵(lì)”回饋。
原型
無(wú)論風(fēng)格如何,界面形式都取決于實(shí)際的功能。好的設(shè)計(jì)方案離不開(kāi)產(chǎn)品前期的規(guī)劃工作,特別是通過(guò)草圖或線(xiàn)框原型進(jìn)行的探索。識(shí)別出最核心的用例需求,使用原型不斷嘗試和驗(yàn)證,為接下來(lái)的界面設(shè)計(jì)工作打下堅(jiān)實(shí)的基礎(chǔ)。
本文來(lái)源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司!
網(wǎng)站欄目:扁平化網(wǎng)頁(yè)界面風(fēng)格的設(shè)計(jì)
文章鏈接:http://redsoil1982.com.cn/news32/326982.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供、外貿(mào)網(wǎng)站建設(shè)、做網(wǎng)站、企業(yè)建站、ChatGPT、網(wǎng)站建設(shè)
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話(huà):028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源:
創(chuàng)新互聯(lián)