我在2017年學習Sketch的時候買過一本書，叫《動靜之美——Sketch移動UI與交互動效設計詳解》。當時對于剛轉(zhuǎn)型到移動端設計的我來說，這本書給了很多幫助，特別是對Sketch這門軟件的學習。四年后，當我不經(jīng)意找到《視覺之外》這本書閱讀的時候，我才發(fā)現(xiàn)，這原來就是4年前《動靜之美》的作者黃方聞。
雖然我和他素未謀面，也沒任何交集，但這種感覺很像遇見一個老朋友，特別是當我把《視覺之外：全鏈路UI設計思維的培養(yǎng)與提升》讀完以后，真的就像四年前一樣，豁然開朗、醍醐灌頂。
我非常喜歡他在自序里的一句話——“如果說《動靜之美——Sketch移動UI與交互動效設計詳解》想說明什么是“對的設計”，那么本書想讓大家感受到什么是“好的設計”，也為大家提供從本質(zhì)上解決問題的方法。”
從“怎么做”到“為什么這樣做”，這看上去好像很簡單，但其實是一個設計師的重大思維升級。當我們不再為用什么軟件、這個設計效果怎么實現(xiàn)而困擾的時候，你就會發(fā)現(xiàn)，真正決定一個設計師的上限是——這個設計師有沒有思考能力。那么，設計的思考能力是什么，需要思考什么，這本書，將會給你一部分答案。

 

 

一、這本書講了什么？


1. 內(nèi)容結(jié)構(gòu)
這本書作者寫了差不多11萬字，實體書應該挺厚的，但整本書的內(nèi)容結(jié)構(gòu)非常簡單，讀起來也很容易。它主要分為五個部分，按照產(chǎn)品設計的工作流程來介紹，分別是產(chǎn)品、交互、設計、研發(fā)和數(shù)據(jù)分析（可以理解為運營）。用作者的話來說，通過這五個關(guān)鍵階段思維能力的提升，設計師才能快速構(gòu)建綜合思維模型，成為“全鏈路設計師”。

 

2. 產(chǎn)品
在往期的讀書分享里，有很多設計師會問我，怎么樣去提升產(chǎn)品的基礎知識。其實我很仔細思考過這個問題，我也對比了好幾本書。但最后我發(fā)現(xiàn)《視覺之外》關(guān)于產(chǎn)品基礎知識這一節(jié)，其實可以算得上一個產(chǎn)品知識的初級入門。這一節(jié)作者就給我們介紹了好幾個非?；A、關(guān)鍵的產(chǎn)品知識點。


2.1 產(chǎn)品生命周期
在「設計大偵探」產(chǎn)品拆解的「產(chǎn)品畫像」部分，有一個模塊不知道大家有沒有注意到，那就是產(chǎn)品的生命周期。在把行業(yè)、競爭對手、產(chǎn)品介紹、用戶畫像、信息結(jié)構(gòu)等都介紹完以后，我會告訴大家，這個產(chǎn)品當前處于哪一個生命周期，當下產(chǎn)品目標聚焦于商業(yè)變現(xiàn)還是用戶增長。
如果你不懂產(chǎn)品生命周期的概念，那你就很難明白為什么一個產(chǎn)品在不同的階段他們的業(yè)務目標不一樣。比如一款處于引入期和成長期的產(chǎn)品，你會發(fā)現(xiàn)他們會拼命砸錢來獲取用戶。像滴滴、美團這些產(chǎn)品，在他們剛推出的時候，瘋狂地給用戶各種補貼、紅包。而一個處于成熟期的產(chǎn)品，比如我們拆解過的QQ音樂、微信讀書，他們都在探索豐富多樣的盈利模式，實現(xiàn)商業(yè)變現(xiàn)。這就是因為產(chǎn)品的生命周期不同，所以業(yè)務目標不同。
作者花了一個很長的篇幅去講解產(chǎn)品生命周期，比如它包含的四個階段，還有不同階段產(chǎn)品關(guān)注的焦點和目標，這些知識非常實用，你讀完以后，會豁然開朗。

 

2.2 最小可行性產(chǎn)品設計
什么是最小可行性產(chǎn)品？也就是一個能滿足用戶使用最基礎功能的產(chǎn)品。比如你做一個商城，最基礎的功能就是實現(xiàn)用戶在前臺付錢購買，后臺接收訂單數(shù)據(jù)，只要這個流程沒問題，就能保證產(chǎn)品的基礎運轉(zhuǎn)。至于其他拼團、會員、物流、積分這些功能，他們就可以推后設計，甚至都可以不用設計。我們通常把最小可行性產(chǎn)品稱為MVP（Minimum Viable Product），這個概念是出自于埃里克·萊斯《精益創(chuàng)業(yè)》這本書，這是產(chǎn)品設計里面經(jīng)常提及的一個設計方法，我們需要熟記。

 

2.3 設計沖刺
「設計沖刺」和「MVP」一樣，它也是一種產(chǎn)品設計的方法，是谷歌設計團隊根據(jù)自己的工作經(jīng)驗提煉出來的，而且有專門介紹這個方法的同名書籍。這個方法和「MVP」不同，它更側(cè)重于在短時間團隊聚焦于解決某個產(chǎn)品在某個時間段的設計目標。

 

2.4 產(chǎn)品價值和產(chǎn)品需求
其實我在梳理這一節(jié)的時候，我突然發(fā)現(xiàn)當你讀的書越多，你讀起來就越容易。為什么這么說呢？因為這一節(jié)作者所提出的問題，恰好可以用曲卉在《硅谷增長黑客筆記》里描述的「設計公式」來解答。如何去判斷某一個新功能是否有必要開發(fā)、以及這個功能開發(fā)的優(yōu)先順序，說實話，不是靠感覺，而是有成型的公式來幫助你做決策。有興趣的朋友，可以讀一下6月份我寫的《送給在線英語啟蒙教育從業(yè)者的產(chǎn)品設計公式》那篇行業(yè)洞察，那篇文章對「設計公式」的提煉和運用就寫得很清晰。

2.5 競品分析
你會發(fā)現(xiàn)所有的講交互設計、產(chǎn)品知識的書籍，都會提到競品分析。足以說明，競品分析真的是每一個產(chǎn)品經(jīng)理、交互/UI設計師必備的基礎技能。我不展開說，因為下個月我就會準備給大家單獨分享一本專門講競品分析的書籍——張在旺老師的《有效競品分析》。


3. 交互
作者在交互設計這個章節(jié)，主要介紹了交互設計的基礎概念、用戶調(diào)研的流程方式、信息架構(gòu)的概念和制作、流程圖和原型設計的繪制方法等。如果你讀過《步步為贏》，你會發(fā)現(xiàn)這些知識點當你再看一次的時候，它們都慢慢成為你的朋友。作者講得很細，具體大家可以去仔細讀，有兩個點我覺得很重要，單獨給大家說一下。


3.1 交互設計在產(chǎn)品設計各階段的作用
作者通過一個產(chǎn)品研發(fā)的完整流程來介紹交互設計師的作用。雖然交互設計師通常被很多人理解為畫原型的，但事實上交互設計師會參與整個產(chǎn)品設計研發(fā)的所有階段。
在想法變?yōu)樾枨笾埃绻@個時候有交互設計師參與，那么很多偽需求就會在這個環(huán)節(jié)被PASS了。一個有經(jīng)驗的交互設計師，會快速的去判斷這個需求是否符合業(yè)務邏輯，能夠找到有相似業(yè)務流程的競品，千萬別小看這個環(huán)節(jié)，很多創(chuàng)業(yè)型的團隊都死在偽需求上面。
需求確認以后，其實就到了原型設計階段，這是交互設計師最核心的工作。我上次在《步步為贏》里面總結(jié)的，交互設計師，就是產(chǎn)品團隊的業(yè)務需求翻譯官，把需求翻譯成頁面，讓整個產(chǎn)品團隊清晰明了知道這是一個什么樣的產(chǎn)品，我們要怎么做。
最后到界面設計、研發(fā)、測試直至上線，交互設計師都扮演了非常重要的角色，可以說，交互設計師并不只是給UI設計師畫線框圖，而是為一個產(chǎn)品從想法到上線保駕護航，降低產(chǎn)品的失敗率。

 

3.2 信息架構(gòu)的概念和制作
信息架構(gòu)是什么？信息架構(gòu)就是一個產(chǎn)品的骨骼，從這個信息架構(gòu)就可以看到這個產(chǎn)品有多少器官。我在直播臨摹實操的時候，單獨演示過用Xmind來梳理一個產(chǎn)品的信息架構(gòu)。其實方法就是這樣，不管是我們設計一個產(chǎn)品，還是去調(diào)研一個產(chǎn)品，信息架構(gòu)一定是所有產(chǎn)品設計的第一步。只有把這個產(chǎn)品的內(nèi)容規(guī)劃好，你的頁面才知道要放什么內(nèi)容，怎么放。Xmind這些思維導圖軟件很好上手，大家只需要親自做幾個，就能對信息架構(gòu)快速上手。

 

4. 設計
在本節(jié)中，作者針對UI界面設計的一些基礎知識點，進行了全面的歸納，比如當下流行的UI設計風格、UI設計中的基礎入門知識、多平臺的設計注意事項等等。這些知識點都很基礎，我就不過多介紹，大家可以去仔細讀，把這些知識點吸收。


5. 研發(fā)
很多設計師都會說，我是做設計的，代碼這種事兒，和我沒啥關(guān)聯(lián)。事實上，如果你能掌握一些基礎的產(chǎn)品研發(fā)知識，這會對你在工作中的協(xié)作起到非常大的幫助。我一直給大家說，做設計，一定要和前端處好關(guān)系，因為你們兩的工作，是捆綁在一起的。你的設計再漂亮，如果前端無法還原，最后的體驗也會大打折扣。怎么樣去和前端處好關(guān)系，那就是需要你去學習一些基礎的技術(shù)知識。作者在這一章里講了很多知識點，包括Html的學習、CSS的快速入門，甚至還有一節(jié)是教設計師如何用Wordpress搭建自己的博客。我篩選幾個重要的知識點，分享給大家。


5.1 前端和后端
這兩個詞，大家一定聽得耳熟能詳了吧。但是還是有必要給大家提一下，前端就是用戶看得見的部分，比如一個購物網(wǎng)站，我們能使用的所有功能，都屬于前端，這些都是用戶可視化的。而后端，則是指用戶看不到的數(shù)據(jù)交換，比如當天產(chǎn)生了多少訂單、支付了多少錢等等。UI設計師和前端的聯(lián)系最緊密，一定要時間去了解前端的基礎知識。

 

5.2 后端和后臺
后端和后臺是兩個完全不同的概念，并且兩者也不是同一層級的內(nèi)容。簡單來說，后臺是需要前端和后端一起才能開發(fā)出來的，可以把后臺理解為一個產(chǎn)品。比如站酷的創(chuàng)作者中心，它其實就像一個后臺，你可以查看自己數(shù)據(jù)、管理自己的作品，這些用戶是看不到的，但你所操作的后臺，事實上也是由前端和后端構(gòu)成，你看不見的數(shù)據(jù)就是后端，你操作的所有數(shù)據(jù)交換和處理都是由后端人員完成。

 

5.3 動態(tài)頁面和靜態(tài)頁面
動態(tài)頁面，就是這個數(shù)據(jù)會實時更新，可以由管理員在后臺發(fā)布更新；而靜態(tài)頁面，一般就是前端工程師會直接以代碼的形式把頁面給寫死，后臺沒有修改這個頁面內(nèi)容的功能。這兩個概念對UI設計師來說，其實真的非常重要，一定要去充分理解動態(tài)頁面和靜態(tài)頁面的區(qū)別，因為這往往關(guān)乎到你的設計實用性。
我遇見過很多的設計師，他們的設計稿真的很漂亮，但是一點都不實用，為什么會造成這樣的原因，很多時候因為他們不懂動態(tài)和靜態(tài)的區(qū)別。特別是在品牌官網(wǎng)的設計中，有很多設計師在新聞資訊、發(fā)展歷程這些頁面去設計很多創(chuàng)新的效果，但往往忽略了這些內(nèi)容，是需要經(jīng)常維護更新的。一旦設計師考慮不周，就會導致設計稿很好看，上線效果一塌糊涂。理解動態(tài)和靜態(tài)的區(qū)別，可以為整個產(chǎn)品運營團隊降低很多工作量。

 

5.4 HTML、CSS和JavaScript之間的關(guān)系
HTML就像我們頁面設計的內(nèi)容，有頭部、有金剛區(qū)、有菜單欄；CSS就像是顏色樣式、文本樣式，你可以批量去修改這個公共樣式，整個設計就能保持一致；而JavaScript就像交互動態(tài)效果，比如點擊某個按鈕，它會產(chǎn)生移出的效果。作者針對這三個內(nèi)容都有很詳細的介紹，各位可以結(jié)合自己的興趣去閱讀，掌握一些基礎的編程知識。

 

6. 數(shù)據(jù)分析
當一個產(chǎn)品正式上線運營以后，這個產(chǎn)品就會不斷迭代。而設計師在產(chǎn)品的運營過程中，一定要去學習了解一些常見的數(shù)據(jù)指標，這些數(shù)據(jù)指標，可以真實反饋產(chǎn)品是否解決用戶的使用情況，以及用戶在產(chǎn)品使用過程中所遇見的難點。沒有數(shù)據(jù)，再完美的產(chǎn)品也沒有討論的意義。

 

6.1 常見的數(shù)據(jù)指標
作者把數(shù)據(jù)指標分成了三類，分別是與用戶相關(guān)、與行為相關(guān)和與業(yè)務相關(guān)的數(shù)據(jù)指標。其實如果你經(jīng)常閱讀我們的產(chǎn)品拆解，很多專業(yè)名詞都已經(jīng)很熟悉了，比如獲客、激活、留存、日活、PV等等。

6.1.1 DAU和MAU
DAU和MAU分別稱為日活躍用戶數(shù)量（簡稱“日活”）和月活躍用戶數(shù)量（簡稱“月活”），主要用來觀察某個產(chǎn)品以日或者以月為單位的用戶活躍量。

 

6.1.2 PV和UV
PV是指頁面瀏覽量，UV是指訪問某個頁面的獨立用戶數(shù)。比如3個用戶訪問了一個APP的100個頁面，那么PV就是100次，UV是3。

 

6.1.3 GMV
GMV全稱為Gross Merchandise Volume，指一段時間內(nèi)的成交總額，一般在電商類產(chǎn)品進行數(shù)據(jù)統(tǒng)計或者制訂KPI（Key Performance Indicator，關(guān)鍵績效指標）時使用。


6.2 A/B測試
A/B測試就是把所有的用戶分成兩部分，一部分用戶看到的是A方案，另一部分用戶看到的是B方案，然后對兩部分用戶使用產(chǎn)品時產(chǎn)生的數(shù)據(jù)進行分析，為最終選擇使用哪個版本的方案提供有效的參考依據(jù)。最近一周，站酷就在進行A/B測試，目的就是搜集不同用戶群的反饋。

 

我把這一章的內(nèi)容歸納為運營基礎知識，在后續(xù)的時間里，我們會單獨去講《增長黑客》、《硅谷增長黑客筆記》，到時候大家就會對這些知識熟悉了。


7. 總結(jié)
《視覺之外：全鏈路UI設計思維的培養(yǎng)與提升》這本書內(nèi)容非常夯實，不僅僅全面介紹了全鏈路設計師所需要學習掌握的五個部分，而且還加入了很多實操的內(nèi)容。比如流程圖的繪制、信息結(jié)構(gòu)的工具、編程語言的學習、CSS的入門等等。這本書真的非常適合比較傳統(tǒng)的UI設計師學習，可以通過這本書快速打破自己的知識盲區(qū)，從而明白當下以及未來的UI設計師發(fā)展方向，成為一名有競爭力、有價值的全鏈路設計師。


二、這本書對我們有什么啟發(fā)？


1. 全鏈路設計師的成長模型
作者寫這本書的內(nèi)容結(jié)構(gòu)，其實就是一個全鏈路設計師的成長模型。如果你想成為一名全鏈路設計師，那么你就需要在產(chǎn)品需求、交互設計、UI視覺設計、產(chǎn)品研發(fā)和數(shù)據(jù)分析這五個關(guān)鍵階段去學習。你可以根據(jù)這個成長模型去規(guī)劃自己的學習內(nèi)容，比如你當下產(chǎn)品的知識非常薄弱，那么你就可以提升產(chǎn)品知識。這樣你就很有目標感，這個模型可以對你起到指導和審視的作用。

 

2. 產(chǎn)品設計的思維能力
我在分享臨摹設計資源的時候，都會加上《你好，UI設計師》這篇文章。我之所以會分享這些辛辛苦苦臨摹的設計文件，其實更多是想去做一個引路人。讓大家從我的臨摹文件里面，結(jié)合產(chǎn)品拆解去學習這個方法。
一款產(chǎn)品設計不是一個點，一條線，一個面，而是一個系統(tǒng)工程。就像作者在這本書里所列舉的五個部分，如果你只是局限于某個產(chǎn)品設計的美丑，那么你的思維能力就無法取得突破。你一定要有全局觀，要從整體去出發(fā)思考一個產(chǎn)品如何設計；你一定要跳出設計的執(zhí)行層，從頭到尾去思考，這樣你才能從掌握一個設計工具到學習到一種產(chǎn)品設計思維能力。

 

3. 從”怎么做“到”為什么這樣做“？
我把這個思維的提升定義為一個設計師蛻變的節(jié)點。就像我過去做外包設計的時候，更多只停留于如何按照客戶的需求去把項目設計好，而根本沒有去思考客戶為什么會有這樣的需求。
我年初發(fā)布丁香醫(yī)生產(chǎn)品拆解的時候，我把花了2個月做這件事的目的描述為——我想去思考一個優(yōu)秀的產(chǎn)品，到底設計了什么，為什么這樣設計。可能沒有幾個人注意到這個細節(jié)，但其實對我來說，這就是設計思維真正的蛻變。
我為什么花那么多時間去做產(chǎn)品拆解，就是我想讓大家跟著我跳出執(zhí)行層去思考，為什么別人這么做，他們遵循了什么設計原則，只有這樣，我們才能培養(yǎng)設計的思考能力，從而破繭成蝶。

三、寫在后面的話
就像我在開頭寫的那樣，黃方聞的書籍，很有自己的特點。為了解讀他的這本書，我特意去關(guān)注了他的公眾號，然后又找到了他的個人公眾號，看了他很多的生活隨筆文章。有初為人父的感動，有因為疫情困在上海無法陪伴家人的無奈，我感覺他真是一個非常細膩的人，而他的書，也沿襲他的風格。
這本《視覺之外：全鏈路UI設計思維的培養(yǎng)與提升》不僅僅向你全面介紹了成為一個全鏈路設計師的技能模型，更是分享了很多實操的方法。就像他在序里所寫的，他想幫助大家打開一扇門，一扇可以連接其他崗位的門，我已經(jīng)打開了，接下來，到你了！開始閱讀吧！

 

 

作者：廖爾摩斯

鏈接：https://www.zcool.com.cn/article/ZMTQ0OTg3Ng==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

 

 

 

 

藍藍設計(m.sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計，以及相關(guān)的軟件開發(fā)服務，咨詢電話：01063334945。

關(guān)鍵詞：UI咨詢、UI設計服務公司、軟件界面設計公司、界面設計公司、UI設計公司、UI交互設計公司、數(shù)據(jù)可視化設計公司、用戶體驗公司、高端網(wǎng)站設計公司

銀行金融軟件UI界面設計、能源及監(jiān)控軟件UI界面設計、氣象行業(yè)UI界面設計、軌道交通界面設計、地理信息系統(tǒng)GIS UI界面設計、航天軍工軟件UI界面設計、醫(yī)療行業(yè)軟件UI界面設計、教育行業(yè)軟件UI界面設計、企業(yè)信息化UI界面設計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)