編輯導(dǎo)讀：每一個(gè)職場(chǎng)人都應(yīng)該善于從工作中發(fā)現(xiàn)問(wèn)題，并整理思路。本文作者經(jīng)歷了一個(gè)產(chǎn)品從0到1的設(shè)計(jì)過(guò)程，通過(guò) CSS 對(duì)視覺(jué)空間有了一些新的想法，從中總結(jié)出了一些經(jīng)驗(yàn)，和大家分享。

最近幾個(gè)月都在忙乎自己的產(chǎn)品，活生生體驗(yàn)了一把需求-設(shè)計(jì)-前端開(kāi)發(fā)集成式累死狗的節(jié)奏；但，自從離開(kāi)學(xué)校后基本沒(méi)怎么敲代碼的半吊子選手，通過(guò)這次的自力更生，仿佛在黑暗中找到了光明，變得大徹大悟，牛的一比哈哈哈哈~

簡(jiǎn)單交代下事發(fā)背景，我這款產(chǎn)品的研發(fā)人員構(gòu)成：就倆人，除了我還有一個(gè)iOS工程師，那么按照常識(shí)我們都知道，一款產(chǎn)品的上線需要經(jīng)過(guò)「1.確定方向」-「2.具體需求分析與產(chǎn)出」-「3.產(chǎn)品設(shè)計(jì)」-「4.產(chǎn)品研發(fā)」-「5.市場(chǎng)推廣和渠道投放」這些個(gè)環(huán)節(jié)（我分的顆粒度比較粗），才算是勉勉強(qiáng)強(qiáng)的一個(gè)合格的流程；所以因?yàn)楣しN原因，我把這些環(huán)節(jié)做了些許整理分配給我們倆，大致情況如下：

看上圖能發(fā)現(xiàn)，其實(shí)我們?cè)谑袌?chǎng)和渠道上需要大量的H5，比如：社群裂變landingpage / 官網(wǎng) / 公眾號(hào)SVG推文等等；但，問(wèn)題來(lái)了，woc我們特么沒(méi)有前端啊！萬(wàn)了！萬(wàn)了！芭比Q了個(gè)屁的了…

在這種情況下，鄙人尋思了半天想出兩個(gè)結(jié)局，要么冷啟動(dòng)階段不做宣發(fā)，讓這個(gè)襁褓中的產(chǎn)品自生自滅（這不行，舍不得）；要么自己coding，每晚拜四阿哥，祈求他干掉每一個(gè)bug！換的一方平安，順利渡過(guò)冷啟動(dòng)階段（就這個(gè)了?。?；

背景就是這樣，于是我開(kāi)始自己寫吧（邊寫邊查邊百度復(fù)制），打算重新跟CSS / JS交個(gè)朋友…令人萬(wàn)萬(wàn)沒(méi)想到的事，就在這個(gè)擰巴的過(guò)程中我通過(guò) CSS 對(duì)視覺(jué)空間有了一些新的想法：

一、盒子模型的三維化

說(shuō)個(gè)大家都懂但又繞不過(guò)去的概念，網(wǎng)頁(yè)設(shè)計(jì)中常聽(tīng)的屬性名：內(nèi)容(content)、內(nèi)邊距(padding)、邊框(border)、外邊距(margin)，CSS都具備這些屬性。這些屬性我們可以用日常生活中的常見(jiàn)事物——盒子作一個(gè)比喻來(lái)理解，所以叫它盒子模型，CSS盒子模型就是在網(wǎng)頁(yè)設(shè)計(jì)中經(jīng)常用到的 CSS 技術(shù)所使用的一種思維模型：

雖然所有HTML元素可以看作盒子，但在日常應(yīng)用時(shí)，按照過(guò)往的認(rèn)知，我們通常只對(duì)單一的某個(gè)元素賦予盒子，給ta添加相關(guān)屬性，總體上這種做法確實(shí)可以讓一個(gè)物體更充實(shí)豐富，也因?yàn)閮H僅是對(duì)個(gè)體的屬性，也就是說(shuō)即使在xy軸的二維空間上玩出花來(lái)，也無(wú)法幫助整個(gè)畫面里的所有元素形成相對(duì)舒適的關(guān)系。

舉個(gè)例子?來(lái)說(shuō)明下，方便理解，下圖是我孵化的新產(chǎn)品產(chǎn)品歡迎頁(yè)，當(dāng)設(shè)計(jì)完成后，看了半天生出一種“平平無(wú)奇”的雞肋感；坦誠(chéng)的講，這樣的畫面談不上多好，中規(guī)中矩罷了，于是反復(fù)的觀摩，逐漸發(fā)現(xiàn)了問(wèn)題，造成這種高不成低不就的原因有二：缺點(diǎn)東西和少點(diǎn)層次…

你會(huì)發(fā)現(xiàn)其實(shí)這些看似摸不著頭腦的問(wèn)題背后的本質(zhì)是很直接和明了的，空間太單薄，設(shè)計(jì)出來(lái)的東西也立不住，會(huì)有一種縹緲的感覺(jué)，也對(duì)應(yīng)的畫面不夠豐富飽滿；因?yàn)橹饕獑?wèn)題出在空間上，所以也是基于此我從源頭開(kāi)始來(lái)了個(gè)重新推導(dǎo)，結(jié)合CSS盒子模型把視覺(jué)結(jié)構(gòu)重新塑造了一番：

然后，我隨意畫了幾個(gè)長(zhǎng)方形，看起來(lái)像碎紙屑的樣子，再試著把頁(yè)面的元素按照總結(jié)的方法套進(jìn)去，效果如下（gif實(shí)在是太拉垮了）：

嗯，總體感覺(jué)舒服多了，該有的也有了，還不戳~如果你細(xì)品，就會(huì)發(fā)現(xiàn)這個(gè)理論構(gòu)建了一個(gè)半自動(dòng)的工作流，只需要把特定的幾個(gè)元素替換下，調(diào)節(jié)部分屬性參數(shù)，就可以復(fù)制出一系列的視覺(jué)方案；按照這個(gè)方法，我做了一系列的拓展方便未來(lái)做產(chǎn)品運(yùn)營(yíng)可以用的上：

要說(shuō)明的是，解決層級(jí)問(wèn)題的方法有很多，立體化的盒子是辦法，通過(guò)改變材料或質(zhì)地也是一種辦法，比如我們現(xiàn)在及其流行的磨砂玻璃：

·要說(shuō)明的是，解決層級(jí)問(wèn)題的方法有很多，立體化的盒子是辦法，通過(guò)改變材料或質(zhì)地也是一種辦法，比如我們現(xiàn)在及其流行的磨砂玻璃：

他們的本質(zhì)都是讓畫面各種元素關(guān)聯(lián)起來(lái)，互相之間都有聯(lián)系，從而凸顯層級(jí)關(guān)系，三維盒子是這樣，磨砂玻璃同樣也是，這跟扁平的設(shè)計(jì)風(fēng)格區(qū)別很大。說(shuō)到這就不得不提一嘴歷史，從過(guò)去到現(xiàn)在，我們反復(fù)在經(jīng)歷“寫實(shí)”-“扁平”-“寫實(shí)”-“扁平”的設(shè)計(jì)浪潮，2種風(fēng)格在時(shí)代的沖擊下不停迭代著，我們很難評(píng)價(jià)他們的好壞，但如果細(xì)琢磨也能發(fā)現(xiàn)兩者的不同，從我的觀點(diǎn)出發(fā)，寫實(shí)是對(duì)現(xiàn)實(shí)的隱喻，ta強(qiáng)調(diào)關(guān)系（源于現(xiàn)實(shí)世界沒(méi)有獨(dú)立存在的個(gè)體），每一個(gè)物體都會(huì)處于某一個(gè)環(huán)境，形成一定的空間，產(chǎn)生一定的關(guān)系；扁平是對(duì)規(guī)則的抽象，ta強(qiáng)調(diào)約束，因?yàn)樯倭送敢晫蛹?jí)，所以需要在僅有的二維空間里盡可能的通過(guò)邏輯規(guī)則幫助畫面統(tǒng)一和諧；可以預(yù)見(jiàn)的是，不管你是喜歡或討厭，它們還是會(huì)此消彼長(zhǎng)，永遠(yuǎn)循環(huán)著。

二、微妙的視覺(jué)沖力

三維的盒子借助空間就很容易產(chǎn)生微妙的效果，比如下圖這個(gè)例子，雖然終點(diǎn)是相同的畫面，但起點(diǎn)不同使這個(gè)過(guò)程帶了來(lái)大為不同的視覺(jué)沖力（gif實(shí)在是太拉垮了，again?。?/p>

所以如果你恰巧在做動(dòng)態(tài)設(shè)計(jì)或者視頻剪輯等工作的話，那么別單純的把這當(dāng)做一個(gè)視覺(jué)問(wèn)題，本質(zhì)還是信息與視覺(jué)神經(jīng)的交互問(wèn)題，還是以上面兩個(gè)例子來(lái)說(shuō)，他們分別給了觀者“撲面而來(lái)”和“穿腦而過(guò)”的感覺(jué)，如果細(xì)品你會(huì)發(fā)現(xiàn)：前者是壓迫和震撼，后者是意外和出奇。

另外，在靜態(tài)的設(shè)計(jì)上也同樣如此，我翻了下最近收到的作品集，也發(fā)現(xiàn)很多朋友為了顯得項(xiàng)目厚實(shí)寫了很多推導(dǎo)，這導(dǎo)致畫面臃腫不堪，在面試官和信息的交互上并沒(méi)有起到很好地作用，甚至增添了獲取信息的成本，所以，排版盡量簡(jiǎn)潔，這無(wú)關(guān)美丑，只是讓信息提取過(guò)程高效且舒服就好。

三、參考/工具推薦

最后推薦個(gè)參考和幾個(gè)web工具：我自己是個(gè)重度3C愛(ài)好者，所以閑著沒(méi)事我就會(huì)去看看各大手機(jī)（硬件/汽車主機(jī)廠）廠商的官網(wǎng)，特別是手機(jī)和新能源汽車行業(yè)卷到死，年度旗艦感覺(jué)一年都能搞個(gè)3-5款，更別提頻率接近每個(gè)月的新品發(fā)布會(huì)了，所以這些網(wǎng)站就成了我攝取靈感的最佳基地；

這里面強(qiáng)如apple沒(méi)毛病，華米OV（華為/小米/oppo/vivo）等手機(jī)廠商也不賴，還有蔚小理（蔚來(lái)/小鵬/理想）等等新能源廠商，他們的產(chǎn)品詳情頁(yè)基本走在了趨勢(shì)的前沿，對(duì)技術(shù)和設(shè)計(jì)也都具備很高的水平，比如其中我最喜歡蔚來(lái)的這個(gè)：

因?yàn)榇笮∠拗疲仄林皇且恍〔糠?，建議鐵子們?nèi)タ匆幌峦暾娴捻?yè)面，非常驚艷，也能更好的理解上文所說(shuō)的“精神小盒”具體的含義，鏈接：https://www.nio.cn/ep9-experience，還有2款小工具提供給鐵子們供大家使用：

第一款，瀏覽器CSS overview

這簡(jiǎn)直就是神器，可以在任意站點(diǎn)查看他們的顏色使用情況、字體使用情況，甚至能分析出是否符合wcag的可用性標(biāo)準(zhǔn)；我在最常用的兩款瀏覽器上（Chrome / edge）都測(cè)試了一下，響應(yīng)速度超快，通過(guò)自帶的分析基本可以推導(dǎo)出每家企業(yè)的基礎(chǔ)規(guī)劃和應(yīng)用，棒的一比~而且只需要非常簡(jiǎn)單的操作就可以解鎖這神仙工具：

第二款，VisBug

這款插件是Chrome開(kāi)發(fā)者峰會(huì)上，Google推出的新開(kāi)發(fā)工具，它簡(jiǎn)化了使用簡(jiǎn)單的點(diǎn)擊式界面編輯網(wǎng)頁(yè)的任務(wù)，更適合產(chǎn)品設(shè)計(jì)師使用，操作如下：

這款工具的應(yīng)用意味著，頁(yè)面初步開(kāi)發(fā)完成之后，完全可以在一個(gè)簡(jiǎn)單的GUI完成所有的細(xì)節(jié)調(diào)整。開(kāi)發(fā)者和設(shè)計(jì)師再也不用在瀏覽器和開(kāi)發(fā)工具之間來(lái)回切換、調(diào)整、部署了。

四、總結(jié)一下

不得不說(shuō)，產(chǎn)品設(shè)計(jì)一直以來(lái)都是側(cè)注重于規(guī)則和方法，比如設(shè)計(jì)組件、設(shè)計(jì)規(guī)范、轉(zhuǎn)化方法、引流方法等等等等；但產(chǎn)品在視覺(jué)上因?yàn)闊o(wú)法使用方法，以至于權(quán)重或多或少的被降低了，這也涉及到一個(gè)概念——方法之所以稱之為方法，具備一定的流程性和可復(fù)制性，所以這篇文章盡可能的把視覺(jué)總結(jié)歸納成現(xiàn)實(shí)可用的方法，希望對(duì)鐵子們有那么一丁點(diǎn)的啟發(fā)吧~

#專欄作家#

負(fù)能量補(bǔ)給站，微信公眾號(hào)：負(fù)能量補(bǔ)給站，人人都是產(chǎn)品經(jīng)理專欄作家。專注設(shè)計(jì)觀點(diǎn)輸出和資源共享。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自?Unsplash，基于 CC0 協(xié)議