網(wǎng)頁(yè)設計與其讓界面扁平不如讓信息層級扁平發(fā)布者：本站     時(shí)間：2021-12-09 09:12:40

如果UI 界面使用了擬物化的風(fēng)格，看起來(lái)跟生活實(shí)物一模一樣，你一定會(huì )有按下去的欲望;而扁平化思想是一種讓設計者在界面設計過(guò)程中減少信息層級的思想。

當下 UI 設計的扁平化浪潮可謂如日中天，從微軟的 Windows 8 開(kāi)始，還有后來(lái) Google 的 Android，到現在的蘋(píng)果 iPhone 的 iOS，都采用了扁平化的設計理念?？墒?，你真的理解什么是扁平化嗎?這不禁要畫(huà)上一個(gè)大大的問(wèn)號。

在開(kāi)篇之前，我先來(lái)賣(mài)個(gè)關(guān)子：我更喜歡擬物化的界面風(fēng)格，和扁平化的設計思想。(請揣摩這句話(huà))很多人眼中的扁平化 UI 設計就是：界面被設計成扁的平的，并且無(wú)立體感的。僅僅是這些嗎?有這些就夠了嗎?

與其讓界面扁平不如讓信息層級扁平,PS教程,

如果 UI 界面使用了擬物化的風(fēng)格，那么意味著(zhù)人們對產(chǎn)品使用的學(xué)習成本大大降低，老少皆會(huì )用，因為界面看起來(lái)跟生活實(shí)物一模一樣，看到界面中擬物風(fēng)格的按鈕，你一定會(huì )有按下去的欲望。如果是“扁平”的按鈕呢?抱歉，你一定會(huì )聽(tīng)到很多抱怨：啊，原來(lái)這個(gè)還能點(diǎn)?在繼續閱讀本文之前，請先欣賞一張擬物風(fēng)格的 UI 設計圖：

與其讓界面扁平不如讓信息層級扁平,PS教程,

這個(gè)界面很明顯是用戶(hù)在注冊時(shí)會(huì )見(jiàn)到的，左側有一個(gè)信封樣子的輸入框，并且右側有一個(gè)“注冊”的按鈕，當你輸完郵箱賬號并點(diǎn)擊注冊以后你會(huì )發(fā)現，這信封被塞了進(jìn)去，塞到哪里去呢?一定是網(wǎng)站當中了，而且注冊完又馬上顯示 Hello, Alex )) 以表示對用戶(hù)的歡迎。不得不對這種設計感到贊嘆，實(shí)在太精妙了，看到這個(gè)信封被投了進(jìn)去，讓人有一種被接受了的愉悅感，讓人感覺(jué)到非常的自然，非常的舒適，馬上就對這個(gè)網(wǎng)站產(chǎn)生好感。不是每個(gè)人都有豐富的電子產(chǎn)品的使用經(jīng)歷，所以，缺乏這些經(jīng)歷的人初次使用該產(chǎn)品的時(shí)候，就會(huì )更傾向于點(diǎn)擊那些擬物化的按鈕，因為，人生來(lái)如此，用手“按”得如此自然，如此舒心;而“扁平”的按鈕則會(huì )讓那些沒(méi)有電子產(chǎn)品使用經(jīng)歷的老人或者兒童感到迷惑，這個(gè)能按嗎?啊!原來(lái)這個(gè)還真能按!或許對于我們這些電子產(chǎn)品熟客來(lái)說(shuō)，這個(gè)按鈕可以點(diǎn)已經(jīng)是常識之中的事了，但是過(guò)度扁平的界面會(huì )讓人感到疑惑，增加人的反應時(shí)間。因此，擬物化圖標設計勢在必行。

與其讓界面扁平不如讓信息層級扁平,PS教程,

那么扁平化呢?我們應該拋棄嗎?請注意，在之前一段當中，我沒(méi)有用到“扁平化”這三個(gè)字，而是用“扁平”二字代替。這有什么區別嗎?…… 有的!“扁平”二字特指的是視覺(jué)上圖標或者界面的扁平，像在張白紙上做設計一樣，沒(méi)有任何的立體感;而“扁平化”這三個(gè)字呢?這正是今天要講的主題：扁平化是一種內在的設計思想。扁平化思想是一種讓設計者在界面設計過(guò)程中減少信息層級的思想。

與其讓界面扁平不如讓信息層級扁平,PS教程,

什么是減少信息層級?相信有用過(guò)智能手機的用戶(hù)都知道，手機中每天都要用到的應用有：天氣、時(shí)鐘、日期信息、電池電量等。在不考慮桌面小部件的前提下，你是否有想過(guò)，為什么我想看個(gè)天氣必須點(diǎn)開(kāi)這個(gè)圖標以后才能看得到;為什么我想看下今天是幾號星期幾還必須點(diǎn)開(kāi)那個(gè)應用才行?像這樣的抱怨不在少數，看個(gè)電池電量的具體數值(百分比)為什么還要進(jìn)入應用以后才能看到，為什么不能直接顯示在圖標上?我認為，圖標不僅僅是應用程序本身的入口，更是一個(gè)信息的載體，這點(diǎn) Windows 8 的磁貼做得很好。

與其讓界面扁平不如讓信息層級扁平,PS教程,

怎么減少信息層級?直接把天氣、時(shí)間、日期、電量等信息直接顯示在圖標上就是一種減少信息層級的方式，表面上這種做法是減輕用戶(hù)的工作量，實(shí)質(zhì)上這是對用戶(hù)的一種關(guān)懷，而用戶(hù)是能夠感受到這種關(guān)懷的。進(jìn)而用戶(hù)給設計者帶來(lái)的回報是：用戶(hù)把這款產(chǎn)品推薦給更多的人，好的用戶(hù)體驗口口相傳，最終你的用戶(hù)會(huì )越來(lái)越多，從而你的收入也會(huì )越來(lái)越多。以上這個(gè)例子僅僅是減少信息層級的一種體現而已，其實(shí)還有更多。如 Windows 8 中的磁貼，它直接將所需展示的信息直接顯示在磁貼上，這樣我們可以不用點(diǎn)進(jìn)去就可以看到一些重要的信息。

與其讓界面扁平不如讓信息層級扁平,PS教程,

今后的 UI 設計方向將會(huì )更傾向于一種擬物化與扁平化相結合的設計風(fēng)格。從外觀(guān)上看，界面是擬物的，但是實(shí)際使用中可以感受到信息層級的減少，以及化繁為簡(jiǎn)帶來(lái)的愉悅感。前幾年蘋(píng)果 iOS 的擬物設計風(fēng)格，在業(yè)界引起軒然大波，各家紛紛效仿，于是有了當時(shí)擬物化的電子世界;而最近幾年，微軟 Windows 8 扁平化的設計風(fēng)格，亦在業(yè)界引起不小的波動(dòng)，Android 甚至 iOS 都開(kāi)始效仿，于是有了現在扁平的界面風(fēng)格;而在將來(lái)，亦不是擬物化的 UI 獨霸天下，也不是扁平化的界面稱(chēng)霸武林，而是一種擬物化風(fēng)格與扁平化思想相結合的 UI 設計笑傲江湖。