• 
• 
• 
• 
• 
• 
• 

知識普及 ? 扁平化設(shè)計在網(wǎng)站制作上的應(yīng)用

扁平化設(shè)計在網(wǎng)站制作上的應(yīng)用

奈薇網(wǎng)站建設(shè) 于2020-06-05 13:29發(fā)表 閱讀次數(shù) 2238次

隨著電子設(shè)備界面設(shè)計趨勢越來越傾向于扁平化，這也是出于人性化瀏覽的考慮，相信大家都喜歡iOS里很多擬物擬真風格的界面，最典型的包括語音備忘錄、iBooks、iPad里的日歷等等，它們的界面讓我們覺得親切自然，讓我們可以在冰冷的電子設(shè)備當中找到現(xiàn)實生活的真實感。 　　下面這些截圖來自我平常自娛自樂時會用到的一些音樂方面的iOS或OSX應(yīng)用。它們的功能的確非常棒。 　　之前看到過一句話，大意是，Metro風格讓人看到未來，而擬物化則讓人感覺像是回到家里一樣。說的挺不錯的；人不可能一直呆在家里，也無法始終飄逸灑脫的在外面尋求新鮮與未來感。我喜歡聽真人使用真實樂器演奏的音樂，但這不妨礙我偶爾聽聽電子的東西。 　　如今，關(guān)于“扁平化”與“擬物化”孰優(yōu)孰劣的爭論在圈子里此起彼伏的。我們總是會被極簡設(shè)計所吸引，所以扁平化的界面設(shè)計風格確實是優(yōu)化了我們的瀏覽體驗。 　　什么是扁平化設(shè)計在青島網(wǎng)站建設(shè)中，“扁平化設(shè)計”一詞所指的是拋棄那些已經(jīng)流行多年的漸變、陰影、高光等擬真視覺效果，從而打造出一種看上去更“平”的界面。 　　Layervault的設(shè)計師AllenGrinshtein曾經(jīng)在HackerNews的一篇文章當中說： 　　“長久以來，網(wǎng)站的界面風格似乎都在遵從著同一種設(shè)計美學，大家都在用斜面、漸變、陰影一類的效果來突出界面元素的質(zhì)感。對于設(shè)計師們來說，制作這類‘可愛’的元素簡直變成了行規(guī)甚至是榮譽。不過對于我們，以及為數(shù)不多的其他一些設(shè)計師來說，這種慣用的方式并非一定正確。” 　　去Layervault看上幾眼，四處轉(zhuǎn)轉(zhuǎn)，你會發(fā)現(xiàn)他們所追求的這種于簡約當中體現(xiàn)出的視覺美感?？吹轿覀円恢币詠砹晳T了的那些視覺風格正在越來越多的網(wǎng)站和移動應(yīng)用產(chǎn)品中被潛移默化的顛覆著，也是蠻有意思的事情。下面是其他一些例子： 　　Squarespace 　　新版的Squarespace幾乎完全采用了扁平化的視覺風格，只在一些細節(jié)當中使用了相對傳統(tǒng)的方式突出了重要的交互元素。試用一下你就會發(fā)現(xiàn)，其實他們的產(chǎn)品在功能邏輯上還是蠻復(fù)雜的，但這一切都隱含在簡約直白的界面背后，你真的可以從中隱約感受到其設(shè)計團隊付出的心血。 　　Rdio 　　Rdio最新版本的網(wǎng)站及產(chǎn)品界面中都采用了很徹底的最小化、扁平化的設(shè)計風格，你很難找到使用了陰影、漸變等效果的界面元素。 　　Facebook 　　另外一個大家所熟悉的例子就是Facebook了。 　　“Facebook是扁平化界面設(shè)計的絕佳案例。除了幾個主要的動作按鈕當中使用了輕微的斜面效果以外，其他界面元素全部采用扁平風格。鑒于他們多年來在這方面一直保持著這樣的特色，至少我們可以說這種設(shè)計風格對于Facebook來說是完全適用的。”-IanStormTaylor(Segment.io) 　　Nest 　　我曾經(jīng)作為前端工程師參與過Nest的網(wǎng)站開發(fā)，現(xiàn)在依然記得他們的設(shè)計師對扁平風格的熱情追求。在他們的網(wǎng)站中，實際的產(chǎn)品及相關(guān)的應(yīng)用環(huán)境照片作為“真實”元素融入到扁平風格的媒介載體(網(wǎng)站本身)當中，虛實結(jié)合，讓訪問者可以很容易的將注意力聚焦在產(chǎn)品上，而不會被網(wǎng)站界面上的視覺元素所干擾。 　　Beforweb本小站亂入...譯者C7210注 　　對擬物化的逆襲正如20世紀建筑界當中的極簡主義運動，扁平化設(shè)計風格的逐漸興起也可以被看作是對多年以來過度設(shè)計、過度雕琢的界面風格的逆襲；尤其是最近一段時間，蘋果一直以來的擬物風格被詬病的蠻犀利的。 　　Wikipedia對擬物化(“仿制品”、“Skeuomorph”)的定義是： 　　原有物件中某些必需的形式在新的設(shè)計中已不再必要，但新設(shè)計仍模仿舊有形式，以使新的外觀讓人感覺熟悉和親切。 　　舉個例子，我們通常會為界面當中的按鈕添加漸變和投影效果，因為現(xiàn)實當中的按鈕就是具有這些視覺特征的，即使這些效果對于界面元素的功能來說沒有任何實際意義。又譬如有些天氣方面的應(yīng)用會使用溫度計的形式來展示氣溫；在現(xiàn)實世界中，這種實體的存在是必需的，而在應(yīng)用軟件當中，溫度計的形象則純粹是裝飾性的。 　　日歷應(yīng)用當中皮革質(zhì)地的設(shè)計元素是必需的嗎？如果按鈕上不使用3D質(zhì)感，用戶是否還知道它們可以被點擊？有多少裝飾性的元素是真正必要的？ 　　“在現(xiàn)實生活中，當按鈕被按下時，你可以清楚的感受到它的彈性，但在桌面設(shè)備或移動設(shè)備的顯示屏上，你無法感覺到這種物理回饋?？瓷先ナ菍嶓w的東西卻無法讓人感受到實體本該具有的反饋效應(yīng)，至少對我來說這是一種很蹩腳的、不符合預(yù)期的體驗。”-AllanYu(svpply/eBay) 　　扁平還是擬物？只是個選擇的問題至少我沒有見到任何研究報告表明擬物風格的按鈕會帶來更多的點擊量。的確，有足夠多的理論和實踐結(jié)論可以證明在視覺上能產(chǎn)生更強對比效果的交互元素可以更好的引起用戶的注意，但我相信，在某些上下文環(huán)境中，一個扁平化的橘色按鈕所帶來的對比效應(yīng)會高于具有凸起質(zhì)感的按鈕。所以，上下文，也就是具體產(chǎn)品的具體界面環(huán)境，是這里的一個關(guān)鍵要素。我們來看看其他設(shè)計師的一些看法： 　　“這件事和時裝時尚有些類似。當某種風格被全面普及之后，作為設(shè)計師，要想脫穎而出，你就得反其道而行之。”-CemreGüngör(Branch) 　　“如果有人告訴你‘擬物化是不好的設(shè)計’，這就相當于在說‘紫色是丑陋的顏色’，沒有任何意義。”-SachaGreif 　　“為什么要在沒有任何實際證據(jù)的情況下貶低某種設(shè)計風格，同時抬高另外一種？忽略產(chǎn)品的實際功能與整體體驗而單純追求某種設(shè)計風格，這并不是一件令人興奮和愉悅的事。”-GeoffSteams(YouTube) 　　相關(guān)閱讀：從iOS到Metro-重新設(shè)計應(yīng)用的交互模式 　　形式服務(wù)于功能20世紀建筑界的極簡主義運動當中提出了一些著名的口號，包括“形式服務(wù)于功能(formfollowsfunction)”、“少即是多(lessismore)”等等，直到今天我們依然會談到這些。此外，我個人非常喜歡米開朗基羅在被問到他是怎樣創(chuàng)作大衛(wèi)雕像時回答的： 　　“很簡單。我只要鑿去多余的石頭，留下有用的。” 　　對于界面設(shè)計來說，也是同樣的道理；37signals的家伙們在這方面的本事是有目共睹的。要在實際當中卓有成效的實現(xiàn)扁平化風格的設(shè)計美學，作為設(shè)計師，我們本質(zhì)上最需要關(guān)注的是產(chǎn)品功能如何運作，而不僅僅是考慮視覺呈現(xiàn)方面的問題。 　　設(shè)計的好壞不是“美學”可以決定的對設(shè)計風格的選取最終還是要取決于具體產(chǎn)品的實際情況。在我個人看來，相比于擬物化而言，扁平風格的一個優(yōu)勢就在于它可以更加簡單直接的將信息和事物的工作方式展示出來，減少認知障礙的產(chǎn)生。 　　無論采用怎樣的風格，優(yōu)秀的界面設(shè)計都需要遵從一些共通的設(shè)計原則： 　　一致性通過具有一致性的設(shè)計模式及視覺風格，為用戶建立起完整一致的心智模型，使產(chǎn)品更加易用，提升整體體驗。 　　對比通過對配色、尺寸和布局的調(diào)整，使可點擊的界面元素在視覺上與其他元素形成鮮明的對比。 　　布局可以嘗試使用960gs一類的網(wǎng)格布局為界面設(shè)定視覺規(guī)范，使用戶的視線可以跟隨內(nèi)容本身所界定出的路徑自然的移動，增強界面的視覺平衡。 　　層級化最重要的東西要比相對次要的東西更容易被看到。關(guān)于這個話題我可以寫一整篇文章出來，簡單的說，就是在界面設(shè)計中著重突出那些與核心功能與常見用例相關(guān)的交互元素，而將其他操作元素置于次要位置，這可以使界面得到最有針對性的優(yōu)化和簡化。 　　鼓勵探索了解目標用戶有可能對產(chǎn)品進行哪些方面的探索。一旦他們習慣了產(chǎn)品的界面與基礎(chǔ)功能，并開始向“高級用戶”的階段進發(fā)時，要為他們的探索和學習行為進行必要的指引與“獎勵”回饋。 　　原型無論風格如何，界面形式都取決于實際的功能。好的設(shè)計方案離不開產(chǎn)品前期的規(guī)劃工作，特別是通過草圖或線框原型進行的探索。識別出最核心的用例需求，使用原型不斷嘗試和驗證，為接下來的界面設(shè)計工作打下堅實的基礎(chǔ)。 　　“我個人的經(jīng)驗是，無論扁平化還是擬物化都沒什么所謂，最重要的是界面能夠讓用戶在最短的時間內(nèi)清楚的識別出信息和功能的層級關(guān)系，并且很容易的知道接下來應(yīng)該做什么。”-CarolineKeem 　　目標用戶不同類型的用戶所青睞的青島網(wǎng)站建設(shè)界面風格也有所不同。建筑、設(shè)計、時尚等領(lǐng)域的用戶可以更好的擁抱扁平化風格，而其他更加“普通”的用戶則更容易接受相對傳統(tǒng)的擬物化界面。 　　反饋當點擊行為發(fā)生時，要立刻向用戶提供清晰明確的視覺反饋。動畫過渡效果就是一種比較常見的反饋方式，例如在用戶執(zhí)行操作后，使用旋轉(zhuǎn)圖標提示用戶系統(tǒng)正在進行響應(yīng)。 　　推薦閱讀：為用戶的成功操作提供正面反饋 　　降低“摩擦力”無論采用怎樣的視覺風格，都要使界面盡量簡化，減少用戶完成目標所需執(zhí)行的操作，打造更加流暢的交互體驗。任何一點障礙或額外的步驟都會提高操作成本，增加功能的復(fù)雜度，進而降低轉(zhuǎn)化率。

扁平化設(shè)計在網(wǎng)站制作上的應(yīng)用相關(guān)標簽：做網(wǎng)站，制作網(wǎng)頁，網(wǎng)站制作公司，網(wǎng)站建設(shè)公司

相關(guān)熱點推薦

在青島做一個公司網(wǎng)站多 談搜索引擎影響網(wǎng)站收錄 探討運用seo技術(shù)做網(wǎng) 八個優(yōu)秀的圖片和圖標的 通過robots.tx 青島網(wǎng)站改版的公司哪家 青島網(wǎng)站制作支持舊IE 如何處理好網(wǎng)站設(shè)計的細 產(chǎn)品設(shè)計的模糊前期 奈薇建站網(wǎng)科技2017 搜索引擎蜘蛛理解相關(guān)性 網(wǎng)站的表單設(shè)計要點 與用戶體驗的這兩年 運用什么技巧使用戶喜歡 網(wǎng)站設(shè)計中程序員和美工 Tab(選項卡)的產(chǎn)品 從精簡導(dǎo)航談小型網(wǎng)站的 如今虛擬外鏈對我們的作 網(wǎng)頁設(shè)計中的版式原理- 使用框架和滑動門技術(shù)進 清新的網(wǎng)站設(shè)計風格 網(wǎng)頁設(shè)計之視覺信息傳達 用戶體驗與網(wǎng)頁界面設(shè)計 沒有交互意識的設(shè)計師， 企業(yè)網(wǎng)站規(guī)劃和網(wǎng)頁設(shè)計 網(wǎng)站大改版=壯烈的死亡 2016年百度排名的算 網(wǎng)站建設(shè)合同簽訂需要注 人機交互界面設(shè)計的三個 系統(tǒng)化學習SEO技術(shù)的 用戶體驗中溝通的技巧 迭代的設(shè)計 網(wǎng)站中視覺元素的設(shè)計 網(wǎng)站設(shè)計的前期溝通之重 在青島，企業(yè)網(wǎng)站建設(shè)對 手機建站時容易進入哪些 如何有效的提高網(wǎng)站關(guān)鍵 淺談品牌的視覺識別 怎樣充分利用你的網(wǎng)站設(shè)

奈薇建站網(wǎng)青島網(wǎng)站建設(shè)公司/青島網(wǎng)站制作公司，專業(yè)提供"氣質(zhì)"型網(wǎng)站建設(shè)及精美網(wǎng)站制作服務(wù)，同時歡迎各地網(wǎng)站建設(shè)公司、網(wǎng)站制作公司代理我們的奈薇建站系統(tǒng)共同發(fā)展

熱點地區(qū)：青島網(wǎng)站建設(shè)價格 青島即墨網(wǎng)站制作公司 開發(fā)區(qū)信息港 山東在線門戶