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

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

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

看上圖能發(fā)現(xiàn)，其實我們在市場和渠道上需要大量的H5，比如：社群裂變landingpage / 官網(wǎng) / 公眾號SVG推文等等； 但，問題來了，woc我們特么沒有前端啊！萬了！萬了！芭比Q了個屁的了…

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

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

一、盒子模型的三維化

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

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

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

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

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

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

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

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

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

二、微妙的視覺沖力

三維的盒子借助空間就很容易產(chǎn)生微妙的效果，比如下圖這個例子，雖然終點是相同的畫面，但起點不同使這個過程帶了來大為不同的視覺沖力（gif實在是太拉垮了，again！）：

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

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

三、參考/工具推薦

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

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

因為大小限制，截屏只是一小部分，建議鐵子們?nèi)タ匆幌峦暾娴捻撁妫浅ｓ@艷，也能更好的理解上文所說的“精神小盒”具體的含義，鏈接： https://www.nio.cn/ep9-experience ，還有2款小工具提供給鐵子們供大家使用：

第一款，瀏覽器CSS overview

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

第二款，VisBug

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

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

四、總結(jié)一下

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

#專欄作家#

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

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

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