“頁面思維”，UX設計師需要警惕的思維盒子

Sponsor

從頁面開始思考確實是很多產品經理和設計師的思維習慣，但那很有可能是一種不良習慣。

現在，信息流、大彈窗、半浮層等等這些產品界面形式的發展，在逐漸消解用戶的頁面跳轉體驗。所以，如果我們還在單個頁面、單個頁面地提供設計方案，那很有可能并不是最佳方案。

頁面，是UX/UI設計師理解產品，進入設計的方式，但長期用頁面來思考設計問題，成就了UX設計師的自我束縛的思維盒子。

就像Ralph Ammer創作的這個動態圖形，我們在相同的框架下思考和學習，這讓我們快速入門和成長。但成長到一定階段，就需要打破這個思維的盒子。但是你如果身處這個盒子之中，想要 Think out of box，是非常困難的。

二維生物無法像三維生物一樣思考。很有可能，真正的好的設計方案其實是在你當前苦苦思考的這個頁面之外。

頁面，是一個有明確邊界的二維平面載體。我們現在之所以還會覺得以頁面來思考問題奏效，是因為手機和電腦屏幕是平面的。這個平面的載體，很有可能在可見的未來得到顛覆。

元宇宙可能太遠，就在VR虛擬現實界面設計中，你覺得“頁面”還會存在嗎？

1.設計職位的名稱擾亂了設計師的心智，跳出單頁思維框架，才能實現能力進階

有很長一段時間，我總是喜歡思考一些最根本的問題，并試圖對這些問題給出一個自己的答案。

比如，人怎樣活著才算有意義？設計的價值到底在哪里？上班打工是為了做對的事情還是為了做老板認為對的事情……類似這樣的問題中，有幾個我很早就有了答案。其中有兩個是：

歸根結底，交互設計設計的是什么？視覺設計設計的是什么？

這兩個問題，我五年前的答案是交互設計設計的是用戶行為，視覺設計設計的是信息和情感?，F在看起來，這個答案看上去也并沒有什么問題。

我不知道各位做設計的朋友怎么看，問上面那樣的問題會不會很無聊，可能明擺著的：UI設計和UX設計設計的就是一個個頁面，視覺設計設計的就是banner、海報、開屏、長圖。

以媒介的角度來思考設計，會有書籍裝幀設計、UI設計、3D設計、IP形象設計、VI設計等等這樣的門類。這種命名方式是以最終的交付節點而命名的，因為最終的交付媒介是UI所以我們就叫UI設計師。往往以媒介來命名的設計工作比較直接、也更方便入門，所以很多更資深的設計師在設計能力提升之后更愿意換一個其他的名字。比如做logo設計的會把自己叫做“品牌設計師”，后者一聽，就感覺大了很多，也難了很多，也更接近設計的本質。

那么UX設計/用戶體驗設計呢？我們無法在最終交付節點交付明確的用戶體驗，因為用戶體驗不是一個具體的媒介，而是用戶的感受，并且非常不可控。

UX設計/用戶體驗設計（或品牌設計）更像是一種以設計出發點命名的職業，含義應該是為了塑造好的用戶體驗（或品牌體驗）而進行設計工作的設計師。所以這個講法本身是可以跨越媒介的，也是跨學科的。理論上，如果你可以做好一個在線就醫的服務體驗設計，也可以做好一個線下醫院的就醫服務體驗設計。理論上，如果你可以成功地設計出一個打動用戶的品牌形象，也應該懂得如何根據業務目標進行品牌營銷campaign的策劃。否則我們懂的就只是皮毛。

現在也有公司在使用“產品設計師”這樣的職位，這個職位名稱我覺得要比UI設計、用戶體驗設計都要好。因為它既不會讓設計師局限在一張張UI界面上，也不會讓設計師在“用戶體驗”這個又大又虛的詞匯中迷失。

2. 警惕“頁面思維”

UX設計、UI設計的前身叫做網頁設計，PC網頁設計時代也講用戶體驗，User Friendly 這樣的理念在PC時代就是有的。在UI設計起始之時，設計師們習慣以頁面為單位來理解需求、展開方案、進行交付。在PC時代，很多承接網站設計的設計公司也都是以頁面為單位來計費，那時候講的“頁面”背后的含義其實是“網頁”（Web Page），很多公司招聘設計師的title也是“網頁設計師”。

雖然現在設計的名詞變化了，但設計師仍然會以“頁面”為載體來輸出自己的設計交付物，時間一長，工具都會影響思維，所以設計師就自然而然的用“頁面”來思考問題。

與此同時，隨著智能手機和移動應用（App）的發展，iOS和安卓迅速迭代自己的設計系統，在這一迭代過程中產品應用的設計與研發方式都得到了快速的發展，在Apple HIG和安卓MD的設計規范中逐漸取消了頁面（page）這一概念（或者從一開始就沒有，待考證）。

設計師和產品經理在談到頁面的時候，往往想到的是一個個單獨的頁面。但平臺級的設計系統以及開發工程師們已經不這么思考問題了。

walling

比如我們看Walling這樣優秀的產品設計，他強調Folder、Wall、p、Brick這樣的層級概念，而不強調Page。當然你也可以把Wall理解為Page，如果一旦這樣理解，那就陷入到了“好，我現在要創造一個頁面，然后用文件夾把頁面歸類一下”這樣的思維里。

3. 原子設計理論中被忽視的中間步驟

早在2013年，前端工程師 Brad Forst 將原子理論運用在界面設計中，形成一套設計系統，包含5個層面：原子、分子、組織、模板、頁面。原子理論時至今日在國內的UX設計領域得到廣泛應用，在講到設計規范的時候，90%以上的UI設計師的作品集里，你幾乎都可以看到這張圖。

原子理論讓UI設計回到了界面設計的第一性來思考問題，通過顏色、間距、文本、圓角等最最基礎的設計元素來逐漸塑造設計調性、建立設計秩序。

但大多數團隊基本只做到了原子到分子，跳過了更關鍵的部分直接去組成頁面了。但其實我覺得，原子理論最中間的“組織”，是與產品/業務聯系更緊密、更能夠發揮設計價值的部分。而在這部分，大部分設計團隊投入的普遍較少。從而還是陷入了“原子分子組成頁面，頁面組成產品”的思維之中。

如果你認為是一張張頁面組成了產品，那就說明你一直是在以“頁面思維”來思考產品。你可以用頁面思維來理解一個網站，但不能以頁面思維來理解一個工具類App、一個平臺類產品。

Brad Forst 在2013年畫這張圖的時候還是把設計的落腳點放到了“頁面(page)”上，因為他是一個前端工程師，并不負責客戶端的開發工作。如果我們放著客戶端的規范不管，拿著前端工程師的理論去跟客戶端工程師去溝通，是不是有點不妥呢。因為時至今日，我們翻一翻Apple HIG，根本找不到Page這個東西。

所以我們要不要想一想，9年前提出的原子設計理論，現在是不是已經過時了呢？

4. “頁面思維”的弊端

如果我們以習慣以“頁面思維”來理解產品結構，以“頁面思維”來思考用戶任務，我覺得可能會存在幾個弊端：

• 對用戶任務的關注度降低如果以單個頁面來思考問題，容易忽略頁面與頁面之間的交互關系。用戶完成任務是需要跨頁面完成的；
• 對產品架構的理解單一樹狀架構是容易理解的，但真實的產品架構是網狀的；
• 思考問題表面化由內而外的思考沒問題，由表及里的思考也沒問題。但如果從表面思考，也從表面產出，只看到水面上的冰山一角，認為那就是全部，可能就會有問題；
• 設計創造性力受限Think out of box，頁面是一個二維的有限的畫布，盯著這個畫布容易受到思維限制，妄圖在這個有限的平面里解決所有問題是不切實際的。因為也有可能真正對的解決方案并不需要這個頁面。

作者：柴林
來源：柴林的設計筆記（ID：Lynn-Chai-Designer）

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。