廈門(mén)網站(zhàn)建設:什麽是無框界面

縱使幾大(dà)設計(jì)風格已形成寡頭壟斷（如蘋果的圓角玻璃、谷歌(gē)的層級、微軟的方塊…），但(dàn)界面設計(jì)的進化曆程才剛剛開(kāi)始。

我曾在之前的《[譯文] 去形式化——移動設計(jì)新趨勢化》寫過關于去形式化的話(huà)題。在這個(gè)新趨勢中，界面上(shàng)的內(nèi)容越來(lái)越重要，相對的，一切與內(nèi)容無關的都被大(dà)大(dà)削減。

去形式化是一張非常模糊的全景圖，在演化中一些(xiē)新的設計(jì)風格逐漸清晰起來(lái)，例如——無框界面。

也許你(nǐ)已經發現了，今年來(lái)越來(lái)越多(duō)的網站(zhàn)和(hé)應用，尤其是那(nà)些(xiē)注重設計(jì)的，都有(yǒu)這樣的趨勢。曾經用來(lái)劃分區(qū)域的邊框和(hé)邊線逐漸消失，然而在幹淨的界面上(shàng)，通(tōng)過距離分割，各區(qū)域的差别依舊(jiù)清晰可(kě)辨。

那(nà)麽卡片化呢？

如果你(nǐ)的設計(jì)思維還(hái)停留在卡片話(huà)，那(nà)就落伍了，因為(wèi)無框界面的趨勢下，卡片的概念被淡化。卡片與否有(yǒu)何重要？反正用戶甚至不會(huì)察覺，他們隻關心自己來(lái)這裏的最終目的，界面對他們來(lái)說隻是搜尋信息的手段之一罷了（如果有(yǒu)很(hěn)好的搜索功能可(kě)用的話(huà)，說不定根本不用掃一眼界面）。

沒錯，卡片化的由來(lái)有(yǒu)它的合理(lǐ)性。幾年前大(dà)家(jiā)注意到顯示屏的尺寸越來(lái)越不可(kě)預期，設計(jì)師(shī)急需一種設計(jì)手段，來(lái)讓設計(jì)出的界面能夠适應不同尺寸的屏幕。卡片剛好能夠解決這一點，因為(wèi)它将內(nèi)容封裝成固定的小(xiǎo)區(qū)塊，像水(shuǐ)一樣，可(kě)以放在任何比自己大(dà)的容器(qì)中。不但(dàn)如此，卡片式界面還(hái)可(kě)以根據需要随時(shí)删減卡片，以此靈活控制(zhì)界面上(shàng)的內(nèi)容種類和(hé)數(shù)量。由此響應式界面的大(dà)環境下，卡片化這個(gè)詞被越來(lái)越多(duō)地注意到。

其實無框界面與卡片化并不真正相沖，将內(nèi)容分裝成小(xiǎo)區(qū)塊的概念依舊(jiù)還(hái)在，隻是此時(shí)卡片已經完全透明(míng)，不需要看到卡片的樣子了。

無框的優勢？

用文字來(lái)討(tǎo)論太過抽象，所以我用無框的概念優化了一個(gè)大(dà)家(jiā)熟悉的有(yǒu)框界面。不要問我是哪個(gè)網站(zhàn)，哈哈~

下圖：上(shàng)面的是原版界面，下面的是我修改的無框版。我這個(gè)修改主要隻是将框去掉而已，然後為(wèi)了配合無框風格對細節做(zuò)了一些(xiē)修改，目的僅僅是為(wèi)了對比同一個(gè)界面在有(yǒu)框和(hé)無框兩種情況下看起來(lái)有(yǒu)什麽不同。

掌控注意力

用戶之于界面，最寶貴的莫過于注意力。因為(wèi)一個(gè)産品想要提供給用戶的功能是越多(duō)越好，但(dàn)是用戶的注意力始終隻有(yǒu)那(nà)麽一丁點。所以，掌控用戶的注意力是設計(jì)師(shī)的關鍵使命。如果界面上(shàng)擺放了過多(duō)色彩顯明(míng)、吸引注意力的“裝飾”，用戶看到內(nèi)容的幾率變下降了。當然，即便有(yǒu)邊框，還(hái)是能夠通(tōng)過對邊框的特殊設計(jì)來(lái)控制(zhì)用戶的注意力不分散，但(dàn)是邊框越多(duō)，難度就越大(dà)。

減少(shǎo)設計(jì)束縛

設計(jì)是連貫、統一的。一旦一個(gè)區(qū)域有(yǒu)了邊框，其它很(hěn)多(duō)地方都要加上(shàng)邊框與之呼應。邊框一多(duō)，束縛也多(duō)。因為(wèi)這意味着從此以後，不論一項要在界面上(shàng)加一點什麽别的東西，都要思考一下，是否需要加上(shàng)邊框，如果邊框還(hái)分好幾類，那(nà)麽這時(shí)還(hái)要判斷一下此處的內(nèi)容适合使用哪類邊框。這樣設計(jì)師(shī)不自覺地給自己加了越來(lái)越多(duō)的束縛，而這些(xiē)束縛，用戶其實根本不care。

增加界面利用率

所有(yǒu)的邊框，可(kě)以不要邊線，但(dàn)是至少(shǎo)得(de)要有(yǒu)兩個(gè)邊距，即內(nèi)邊距和(hé)外邊距，這樣才能保證視(shì)覺效果的舒适性。然而如果去掉邊框，用距離分割內(nèi)容區(qū)塊，那(nà)麽兩個(gè)內(nèi)容區(qū)塊之間(jiān)就隻需要一個(gè)間(jiān)距就好了。就算(suàn)為(wèi)了區(qū)分要拉大(dà)這個(gè)間(jiān)距，也通(tōng)常不會(huì)超過有(yǒu)邊框情況下內(nèi)外邊距之和(hé)。

這樣算(suàn)來(lái)，無框界面的界面利用率會(huì)更高(gāo)，能夠在有(yǒu)限的空(kōng)間(jiān)裏，擺放更多(duō)的內(nèi)容。

提升設計(jì)效率

前面提過的減少(shǎo)設計(jì)束縛，可(kě)看作(zuò)是一種對設計(jì)思考效率的提升。除了思考之外，無框界面對畫(huà)圖效率的提升更加明(míng)顯。

在畫(huà)圖過程中，給內(nèi)容加上(shàng)邊框意味着每增加一塊內(nèi)容都要先畫(huà)出邊框；每修改以此內(nèi)容，邊框都要一并修改一次。尤其是在很(hěn)多(duō)工具中，圓角、雙線等特殊邊框畫(huà)起來(lái)相當繁瑣。

有(yǒu)何争議

視(shì)覺手段減少(shǎo)

為(wèi)了區(qū)分、突出、弱化某些(xiē)東西，視(shì)覺上(shàng)可(kě)以用N中方法解決。但(dàn)是如果死守無框，這些(xiē)可(kě)用的手段就減少(shǎo)了。但(dàn)本人(rén)認為(wèi)，少(shǎo)點套路多(duō)些(xiē)真誠是這個(gè)時(shí)代的精神追求，所以大(dà)部分情況下，視(shì)覺上(shàng)樸素些(xiē)也挺好。但(dàn)是在特殊情況下，完全不需要死守任何教條，畢竟規矩就是為(wèi)了在少(shǎo)數(shù)情況被打破而存在的。

視(shì)覺與交互的分歧

縱使無框界面有(yǒu)再多(duō)易用性的有(yǒu)點，視(shì)覺設計(jì)師(shī)依舊(jiù)可(kě)能對此無感。因為(wèi)凡是強調某種風格，都視(shì)覺來(lái)說都是一種限制(zhì)。而如果将無框看作(zuò)對視(shì)覺設計(jì)的限制(zhì)，其結果受益于易用性，視(shì)覺設計(jì)可(kě)能難以接受。很(hěn)多(duō)事情難的不是增加而是減少(shǎo)，這種轉變需要像當前喬布斯去除手機鍵盤一樣，有(yǒu)一個(gè)具有(yǒu)全局觀的決策者。

同質化

這是個(gè)嚴肅的課題，可(kě)以上(shàng)升至哲學境界，這裏隻能頂多(duō)隻能抛些(xiē)磚角。我在《[譯文] 去形式化——移動設計(jì)新趨勢化》寫過同樣的問題，在去除多(duō)餘“裝飾”之後，界面隻剩下內(nèi)容，這會(huì)讓不同産品之間(jiān)越來(lái)越相似，走到極緻，甚至可(kě)能大(dà)家(jiā)看起來(lái)完全一模一樣都有(yǒu)可(kě)能。

一方面對于用戶來(lái)說，這根本不是個(gè)問題。雖然用戶也很(hěn)享受産品提供的附加價值，但(dàn)是他們并不指望産品提供觀賞性和(hé)趣味性，畢竟大(dà)家(jiā)平時(shí)有(yǒu)的是娛樂手段，使用非娛樂性産品時(shí)除了快速達到自己的目的之外别無他求。

另一方面對于産品本身來(lái)說，都想要樹(shù)立自己的風格，體(tǐ)現自己的品牌識别性，使出渾身解數(shù)想要獲得(de)用戶的額外喜愛(ài)。

在這兩個(gè)方面要如何取舍？未來(lái)肯定是用戶的。但(dàn)界面的直接粗暴并不一定與識别性完全沖突，即便操作(zuò)界面的識别性為(wèi)零，也可(kě)以通(tōng)過Logo、文字等手段來(lái)樹(shù)立品牌形象。

從另一個(gè)角度來(lái)思考，我曾在《圖形界面的末路？》論證過，在不知多(duō)遠的未來(lái)，人(rén)類和(hé)機器(qì)之間(jiān)，很(hěn)有(yǒu)可(kě)能已經不再需要界面來(lái)交流了。舉個(gè)最接地氣的例子，如果Siri可(kě)以取代iOS的一切界面，那(nà)麽不要說無框界面，所有(yǒu)界面都沒了，這是不是代表iOS這整個(gè)産品的品牌形象就喪失了？當然不是，語音(yīn)的音(yīn)色、語氣、回答(dá)方式……有(yǒu)太多(duō)的東西都能讓用戶産生(shēng)印象了。

說到這裏，如果你(nǐ)還(hái)在擔憂同質化的問題，那(nà)麽另一篇文章見吧(ba)。

一個(gè)輪回

作(zuò)為(wèi)一個(gè)有(yǒu)全局觀的人(rén)，我又要提一下曆史了。

其實最早的人(rén)機界面是無框的——命令行(xíng)，還(hái)記得(de)嗎？

但(dàn)是，圖像界面幾乎一誕生(shēng)就是有(yǒu)框的，而且早期的圖形界面幾乎滿屏都是框。因為(wèi)那(nà)時(shí)大(dà)家(jiā)還(hái)隻會(huì)用線來(lái)劃分區(qū)塊。

發展了好久，終于在一兩年前，咱們學會(huì)了用色塊取代邊線。

不要多(duō)久，更多(duō)的人(rén)會(huì)發現連色塊都不需要就可(kě)以将內(nèi)容區(qū)分開(kāi)，那(nà)就真正是無框界面時(shí)代了。

總結

無框界面其實不過是界面風格的一種罷了，并不是包治百病的神藥。糟糕的設計(jì)師(shī)，什麽風格都拯救不了；而能自成一派的優秀設計(jì)師(shī)并不需要受到任何風格的局限。

即便在今天，全鍵盤的黑(hēi)莓手機依舊(jiù)在歐洲市場(chǎng)占據重要位置。我從不認為(wèi)有(yǒu)框與無框之間(jiān)又對錯之分，隻是此處做(zuò)個(gè)預言，未來(lái)的世界會(huì)朝無框邁進。(廈門(mén)網站(zhàn)建設文章來(lái)自百度新聞)