從頁面開始思考，可能是很多產(chǎn)品經(jīng)理和設(shè)計(jì)師的思維習(xí)慣，然而這可能是一種不良習(xí)慣。如何跳出“頁面思維”，實(shí)現(xiàn)能力進(jìn)階呢？一起來看一下吧。

從頁面開始思考確實(shí)是很多產(chǎn)品經(jīng)理和設(shè)計(jì)師的思維習(xí)慣，但那很有可能是一種不良習(xí)慣。

現(xiàn)在，信息流、大彈窗、半浮層等等這些產(chǎn)品界面形式的發(fā)展，在逐漸消解用戶的頁面跳轉(zhuǎn)體驗(yàn)。所以，如果我們還在單個(gè)頁面、單個(gè)頁面地提供設(shè)計(jì)方案，那很有可能并不是最佳方案。

頁面，是UX/UI設(shè)計(jì)師理解產(chǎn)品，進(jìn)入設(shè)計(jì)的方式，但長(zhǎng)期用頁面來思考設(shè)計(jì)問題，成就了UX設(shè)計(jì)師的自我束縛的思維盒子。

就像Ralph Ammer創(chuàng)作的這個(gè)動(dòng)態(tài)圖形，我們?cè)谙嗤目蚣芟滤伎己蛯W(xué)習(xí)，這讓我們快速入門和成長(zhǎng)。但成長(zhǎng)到一定階段，就需要打破這個(gè)思維的盒子。但是你如果身處這個(gè)盒子之中，想要 Think out of box，是非常困難的。

二維生物無法像三維生物一樣思考。很有可能，真正的好的設(shè)計(jì)方案其實(shí)是在你當(dāng)前苦苦思考的這個(gè)頁面之外。

頁面，是一個(gè)有明確邊界的二維平面載體。我們現(xiàn)在之所以還會(huì)覺得以頁面來思考問題奏效，是因?yàn)槭謾C(jī)和電腦屏幕是平面的。這個(gè)平面的載體，很有可能在可見的未來得到顛覆。

元宇宙可能太遠(yuǎn)，就在VR虛擬現(xiàn)實(shí)界面設(shè)計(jì)中，你覺得“頁面”還會(huì)存在嗎？

01 跳出單頁思維框架，才能實(shí)現(xiàn)能力進(jìn)階

有很長(zhǎng)一段時(shí)間，我總是喜歡思考一些最根本的問題，并試圖對(duì)這些問題給出一個(gè)自己的答案。

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

歸根結(jié)底，交互設(shè)計(jì)設(shè)計(jì)的是什么？視覺設(shè)計(jì)設(shè)計(jì)的是什么？

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

我不知道各位做設(shè)計(jì)的朋友怎么看，問上面那樣的問題會(huì)不會(huì)很無聊，可能明擺著的：UI設(shè)計(jì)和UX設(shè)計(jì)設(shè)計(jì)的就是一個(gè)個(gè)頁面，視覺設(shè)計(jì)設(shè)計(jì)的就是banner、海報(bào)、開屏、長(zhǎng)圖。

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

那么UX設(shè)計(jì)/用戶體驗(yàn)設(shè)計(jì)呢？我們無法在最終交付節(jié)點(diǎn)交付明確的用戶體驗(yàn)，因?yàn)橛脩趔w驗(yàn)不是一個(gè)具體的媒介，而是用戶的感受，并且非常不可控。

UX設(shè)計(jì)/用戶體驗(yàn)設(shè)計(jì)（或品牌設(shè)計(jì)）更像是一種以設(shè)計(jì)出發(fā)點(diǎn)命名的職業(yè)，含義應(yīng)該是為了塑造好的用戶體驗(yàn)（或品牌體驗(yàn)）而進(jìn)行設(shè)計(jì)工作的設(shè)計(jì)師。所以這個(gè)講法本身是可以跨越媒介的，也是跨學(xué)科的。

現(xiàn)在也有公司在使用“產(chǎn)品設(shè)計(jì)師”這樣的職位，這個(gè)職位名稱我覺得要比UI設(shè)計(jì)、用戶體驗(yàn)設(shè)計(jì)都要好。因?yàn)樗炔粫?huì)讓設(shè)計(jì)師局限在一張張UI界面上，也不會(huì)讓設(shè)計(jì)師在“用戶體驗(yàn)”這個(gè)又大又虛的詞匯中迷失。

02 警惕“頁面思維”

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

雖然現(xiàn)在設(shè)計(jì)的名詞變化了，但設(shè)計(jì)師仍然會(huì)以“頁面”為載體來輸出自己的設(shè)計(jì)交付物，時(shí)間一長(zhǎng)，工具都會(huì)影響思維，所以設(shè)計(jì)師就自然而然的用“頁面”來思考問題。

與此同時(shí)，隨著智能手機(jī)和移動(dòng)應(yīng)用（App）的發(fā)展，iOS和安卓迅速迭代自己的設(shè)計(jì)系統(tǒng)，在這一迭代過程中產(chǎn)品應(yīng)用的設(shè)計(jì)與研發(fā)方式都得到了快速的發(fā)展，在Apple HIG和安卓MD的設(shè)計(jì)規(guī)范中逐漸取消了頁面（page）這一概念（或者從一開始就沒有，待考證）。

設(shè)計(jì)師和產(chǎn)品經(jīng)理在談到頁面的時(shí)候，往往想到的是一個(gè)個(gè)單獨(dú)的頁面。但平臺(tái)級(jí)的設(shè)計(jì)系統(tǒng)以及開發(fā)工程師們已經(jīng)不這么思考問題了。

walling

比如我們看Walling這樣優(yōu)秀的產(chǎn)品設(shè)計(jì)，他強(qiáng)調(diào)Folder、Wall、Section、Brick這樣的層級(jí)概念，而不強(qiáng)調(diào)Page。當(dāng)然你也可以把Wall理解為Page，如果一旦這樣理解，那就陷入到了“好，我現(xiàn)在要?jiǎng)?chuàng)造一個(gè)頁面，然后用文件夾把頁面歸類一下”這樣的思維里。

03 原子設(shè)計(jì)理論中被忽視的中間步驟

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

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

但大多數(shù)團(tuán)隊(duì)基本只做到了原子到分子，跳過了更關(guān)鍵的部分直接去組成頁面了。但其實(shí)我覺得，原子理論最中間的“組織”，是與產(chǎn)品/業(yè)務(wù)聯(lián)系更緊密、更能夠發(fā)揮設(shè)計(jì)價(jià)值的部分。而在這部分，大部分設(shè)計(jì)團(tuán)隊(duì)投入的普遍較少。從而還是陷入了“原子分子組成頁面，頁面組成產(chǎn)品”的思維之中。

如果你認(rèn)為是一張張頁面組成了產(chǎn)品，那就說明你一直是在以“頁面思維”來思考產(chǎn)品。你可以用頁面思維來理解一個(gè)網(wǎng)站，但不能以頁面思維來理解一個(gè)工具類App、一個(gè)平臺(tái)類產(chǎn)品。

Brad Forst 在2013年畫這張圖的時(shí)候還是把設(shè)計(jì)的落腳點(diǎn)放到了“頁面(page)”上，因?yàn)樗且粋€(gè)前端工程師，并不負(fù)責(zé)客戶端的開發(fā)工作。如果我們放著客戶端的規(guī)范不管，拿著前端工程師的理論去跟客戶端工程師去溝通，是不是有點(diǎn)不妥呢。因?yàn)闀r(shí)至今日，我們翻一翻Apple HIG，根本找不到Page這個(gè)東西。

所以我們要不要想一想，9年前提出的原子設(shè)計(jì)理論，現(xiàn)在是不是已經(jīng)過時(shí)了呢？

04 “頁面思維”的弊端

如果我們以習(xí)慣以“頁面思維”來理解產(chǎn)品結(jié)構(gòu)，以“頁面思維”來思考用戶任務(wù)，我覺得可能會(huì)存在幾個(gè)弊端：

1）對(duì)用戶任務(wù)的關(guān)注度降低

如果以單個(gè)頁面來思考問題，容易忽略頁面與頁面之間的交互關(guān)系。用戶完成任務(wù)是需要跨頁面完成的。

2）對(duì)產(chǎn)品架構(gòu)的理解單一

樹狀架構(gòu)是容易理解的，但真實(shí)的產(chǎn)品架構(gòu)是網(wǎng)狀的。

3）思考問題表面化

由內(nèi)而外的思考沒問題，由表及里的思考也沒問題。但如果從表面思考，也從表面產(chǎn)出，只看到水面上的冰山一角，認(rèn)為那就是全部，可能就會(huì)有問題。

4）設(shè)計(jì)創(chuàng)造性力受限

Think out of box，頁面是一個(gè)二維的有限的畫布，盯著這個(gè)畫布容易受到思維限制，妄圖在這個(gè)有限的平面里解決所有問題是不切實(shí)際的。因?yàn)橐灿锌赡苷嬲龑?duì)的解決方案并不需要這個(gè)頁面。

以上。