2024-9-5 資深UI設(shè)計者
我在2017年學(xué)習(xí)Sketch的時候買過一本書，叫《動靜之美——Sketch移動UI與交互動效設(shè)計詳解》。當(dāng)時對于剛轉(zhuǎn)型到移動端設(shè)計的我來說，這本書給了很多幫助，特別是對Sketch這門軟件的學(xué)習(xí)。四年后，當(dāng)我不經(jīng)意找到《視覺之外》這本書閱讀的時候，我才發(fā)現(xiàn)，這原來就是4年前《動靜之美》的作者黃方聞。
雖然我和他素未謀面，也沒任何交集，但這種感覺很像遇見一個老朋友，特別是當(dāng)我把《視覺之外：全鏈路UI設(shè)計思維的培養(yǎng)與提升》讀完以后，真的就像四年前一樣，豁然開朗、醍醐灌頂。
我非常喜歡他在自序里的一句話——“如果說《動靜之美——Sketch移動UI與交互動效設(shè)計詳解》想說明什么是“對的設(shè)計”，那么本書想讓大家感受到什么是“好的設(shè)計”，也為大家提供從本質(zhì)上解決問題的方法。”
從“怎么做”到“為什么這樣做”，這看上去好像很簡單，但其實是一個設(shè)計師的重大思維升級。當(dāng)我們不再為用什么軟件、這個設(shè)計效果怎么實現(xiàn)而困擾的時候，你就會發(fā)現(xiàn)，真正決定一個設(shè)計師的上限是——這個設(shè)計師有沒有思考能力。那么，設(shè)計的思考能力是什么，需要思考什么，這本書，將會給你一部分答案。
一、這本書講了什么？
1. 內(nèi)容結(jié)構(gòu)
這本書作者寫了差不多11萬字，實體書應(yīng)該挺厚的，但整本書的內(nèi)容結(jié)構(gòu)非常簡單，讀起來也很容易。它主要分為五個部分，按照產(chǎn)品設(shè)計的工作流程來介紹，分別是產(chǎn)品、交互、設(shè)計、研發(fā)和數(shù)據(jù)分析（可以理解為運(yùn)營）。用作者的話來說，通過這五個關(guān)鍵階段思維能力的提升，設(shè)計師才能快速構(gòu)建綜合思維模型，成為“全鏈路設(shè)計師”。
2. 產(chǎn)品
在往期的讀書分享里，有很多設(shè)計師會問我，怎么樣去提升產(chǎn)品的基礎(chǔ)知識。其實我很仔細(xì)思考過這個問題，我也對比了好幾本書。但最后我發(fā)現(xiàn)《視覺之外》關(guān)于產(chǎn)品基礎(chǔ)知識這一節(jié)，其實可以算得上一個產(chǎn)品知識的初級入門。這一節(jié)作者就給我們介紹了好幾個非常基礎(chǔ)、關(guān)鍵的產(chǎn)品知識點(diǎn)。
2.1 產(chǎn)品生命周期
在「設(shè)計大偵探」產(chǎn)品拆解的「產(chǎn)品畫像」部分，有一個模塊不知道大家有沒有注意到，那就是產(chǎn)品的生命周期。在把行業(yè)、競爭對手、產(chǎn)品介紹、用戶畫像、信息結(jié)構(gòu)等都介紹完以后，我會告訴大家，這個產(chǎn)品當(dāng)前處于哪一個生命周期，當(dāng)下產(chǎn)品目標(biāo)聚焦于商業(yè)變現(xiàn)還是用戶增長。
如果你不懂產(chǎn)品生命周期的概念，那你就很難明白為什么一個產(chǎn)品在不同的階段他們的業(yè)務(wù)目標(biāo)不一樣。比如一款處于引入期和成長期的產(chǎn)品，你會發(fā)現(xiàn)他們會拼命砸錢來獲取用戶。像滴滴、美團(tuán)這些產(chǎn)品，在他們剛推出的時候，瘋狂地給用戶各種補(bǔ)貼、紅包。而一個處于成熟期的產(chǎn)品，比如我們拆解過的QQ音樂、微信讀書，他們都在探索豐富多樣的盈利模式，實現(xiàn)商業(yè)變現(xiàn)。這就是因為產(chǎn)品的生命周期不同，所以業(yè)務(wù)目標(biāo)不同。
作者花了一個很長的篇幅去講解產(chǎn)品生命周期，比如它包含的四個階段，還有不同階段產(chǎn)品關(guān)注的焦點(diǎn)和目標(biāo)，這些知識非常實用，你讀完以后，會豁然開朗。
2.2 最小可行性產(chǎn)品設(shè)計
什么是最小可行性產(chǎn)品？也就是一個能滿足用戶使用最基礎(chǔ)功能的產(chǎn)品。比如你做一個商城，最基礎(chǔ)的功能就是實現(xiàn)用戶在前臺付錢購買，后臺接收訂單數(shù)據(jù)，只要這個流程沒問題，就能保證產(chǎn)品的基礎(chǔ)運(yùn)轉(zhuǎn)。至于其他拼團(tuán)、會員、物流、積分這些功能，他們就可以推后設(shè)計，甚至都可以不用設(shè)計。我們通常把最小可行性產(chǎn)品稱為MVP（Minimum Viable Product），這個概念是出自于埃里克·萊斯《精益創(chuàng)業(yè)》這本書，這是產(chǎn)品設(shè)計里面經(jīng)常提及的一個設(shè)計方法，我們需要熟記。
2.3 設(shè)計沖刺
「設(shè)計沖刺」和「MVP」一樣，它也是一種產(chǎn)品設(shè)計的方法，是谷歌設(shè)計團(tuán)隊根據(jù)自己的工作經(jīng)驗提煉出來的，而且有專門介紹這個方法的同名書籍。這個方法和「MVP」不同，它更側(cè)重于在短時間團(tuán)隊聚焦于解決某個產(chǎn)品在某個時間段的設(shè)計目標(biāo)。
2.4 產(chǎn)品價值和產(chǎn)品需求
其實我在梳理這一節(jié)的時候，我突然發(fā)現(xiàn)當(dāng)你讀的書越多，你讀起來就越容易。為什么這么說呢？因為這一節(jié)作者所提出的問題，恰好可以用曲卉在《硅谷增長黑客筆記》里描述的「設(shè)計公式」來解答。如何去判斷某一個新功能是否有必要開發(fā)、以及這個功能開發(fā)的優(yōu)先順序，說實話，不是靠感覺，而是有成型的公式來幫助你做決策。有興趣的朋友，可以讀一下6月份我寫的《送給在線英語啟蒙教育從業(yè)者的產(chǎn)品設(shè)計公式》那篇行業(yè)洞察，那篇文章對「設(shè)計公式」的提煉和運(yùn)用就寫得很清晰。
2.5 競品分析
你會發(fā)現(xiàn)所有的講交互設(shè)計、產(chǎn)品知識的書籍，都會提到競品分析。足以說明，競品分析真的是每一個產(chǎn)品經(jīng)理、交互/UI設(shè)計師必備的基礎(chǔ)技能。我不展開說，因為下個月我就會準(zhǔn)備給大家單獨(dú)分享一本專門講競品分析的書籍——張在旺老師的《有效競品分析》。
3. 交互
作者在交互設(shè)計這個章節(jié)，主要介紹了交互設(shè)計的基礎(chǔ)概念、用戶調(diào)研的流程方式、信息架構(gòu)的概念和制作、流程圖和原型設(shè)計的繪制方法等。如果你讀過《步步為贏》，你會發(fā)現(xiàn)這些知識點(diǎn)當(dāng)你再看一次的時候，它們都慢慢成為你的朋友。作者講得很細(xì)，具體大家可以去仔細(xì)讀，有兩個點(diǎn)我覺得很重要，單獨(dú)給大家說一下。
3.1 交互設(shè)計在產(chǎn)品設(shè)計各階段的作用
作者通過一個產(chǎn)品研發(fā)的完整流程來介紹交互設(shè)計師的作用。雖然交互設(shè)計師通常被很多人理解為畫原型的，但事實上交互設(shè)計師會參與整個產(chǎn)品設(shè)計研發(fā)的所有階段。
在想法變?yōu)樾枨笾埃绻@個時候有交互設(shè)計師參與，那么很多偽需求就會在這個環(huán)節(jié)被PASS了。一個有經(jīng)驗的交互設(shè)計師，會快速的去判斷這個需求是否符合業(yè)務(wù)邏輯，能夠找到有相似業(yè)務(wù)流程的競品，千萬別小看這個環(huán)節(jié)，很多創(chuàng)業(yè)型的團(tuán)隊都死在偽需求上面。
需求確認(rèn)以后，其實就到了原型設(shè)計階段，這是交互設(shè)計師最核心的工作。我上次在《步步為贏》里面總結(jié)的，交互設(shè)計師，就是產(chǎn)品團(tuán)隊的業(yè)務(wù)需求翻譯官，把需求翻譯成頁面，讓整個產(chǎn)品團(tuán)隊清晰明了知道這是一個什么樣的產(chǎn)品，我們要怎么做。
最后到界面設(shè)計、研發(fā)、測試直至上線，交互設(shè)計師都扮演了非常重要的角色，可以說，交互設(shè)計師并不只是給UI設(shè)計師畫線框圖，而是為一個產(chǎn)品從想法到上線保駕護(hù)航，降低產(chǎn)品的失敗率。
3.2 信息架構(gòu)的概念和制作
信息架構(gòu)是什么？信息架構(gòu)就是一個產(chǎn)品的骨骼，從這個信息架構(gòu)就可以看到這個產(chǎn)品有多少器官。我在直播臨摹實操的時候，單獨(dú)演示過用Xmind來梳理一個產(chǎn)品的信息架構(gòu)。其實方法就是這樣，不管是我們設(shè)計一個產(chǎn)品，還是去調(diào)研一個產(chǎn)品，信息架構(gòu)一定是所有產(chǎn)品設(shè)計的第一步。只有把這個產(chǎn)品的內(nèi)容規(guī)劃好，你的頁面才知道要放什么內(nèi)容，怎么放。Xmind這些思維導(dǎo)圖軟件很好上手，大家只需要親自做幾個，就能對信息架構(gòu)快速上手。
4. 設(shè)計
在本節(jié)中，作者針對UI界面設(shè)計的一些基礎(chǔ)知識點(diǎn)，進(jìn)行了全面的歸納，比如當(dāng)下流行的UI設(shè)計風(fēng)格、UI設(shè)計中的基礎(chǔ)入門知識、多平臺的設(shè)計注意事項等等。這些知識點(diǎn)都很基礎(chǔ)，我就不過多介紹，大家可以去仔細(xì)讀，把這些知識點(diǎn)吸收。
5. 研發(fā)
很多設(shè)計師都會說，我是做設(shè)計的，代碼這種事兒，和我沒啥關(guān)聯(lián)。事實上，如果你能掌握一些基礎(chǔ)的產(chǎn)品研發(fā)知識，這會對你在工作中的協(xié)作起到非常大的幫助。我一直給大家說，做設(shè)計，一定要和前端處好關(guān)系，因為你們兩的工作，是捆綁在一起的。你的設(shè)計再漂亮，如果前端無法還原，最后的體驗也會大打折扣。怎么樣去和前端處好關(guān)系，那就是需要你去學(xué)習(xí)一些基礎(chǔ)的技術(shù)知識。作者在這一章里講了很多知識點(diǎn)，包括Html的學(xué)習(xí)、CSS的快速入門，甚至還有一節(jié)是教設(shè)計師如何用Wordpress搭建自己的博客。我篩選幾個重要的知識點(diǎn)，分享給大家。
5.1 前端和后端
這兩個詞，大家一定聽得耳熟能詳了吧。但是還是有必要給大家提一下，前端就是用戶看得見的部分，比如一個購物網(wǎng)站，我們能使用的所有功能，都屬于前端，這些都是用戶可視化的。而后端，則是指用戶看不到的數(shù)據(jù)交換，比如當(dāng)天產(chǎn)生了多少訂單、支付了多少錢等等。UI設(shè)計師和前端的聯(lián)系最緊密，一定要時間去了解前端的基礎(chǔ)知識。
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設(shè)計師來說，其實真的非常重要，一定要去充分理解動態(tài)頁面和靜態(tài)頁面的區(qū)別，因為這往往關(guān)乎到你的設(shè)計實用性。
我遇見過很多的設(shè)計師，他們的設(shè)計稿真的很漂亮，但是一點(diǎn)都不實用，為什么會造成這樣的原因，很多時候因為他們不懂動態(tài)和靜態(tài)的區(qū)別。特別是在品牌官網(wǎng)的設(shè)計中，有很多設(shè)計師在新聞資訊、發(fā)展歷程這些頁面去設(shè)計很多創(chuàng)新的效果，但往往忽略了這些內(nèi)容，是需要經(jīng)常維護(hù)更新的。一旦設(shè)計師考慮不周，就會導(dǎo)致設(shè)計稿很好看，上線效果一塌糊涂。理解動態(tài)和靜態(tài)的區(qū)別，可以為整個產(chǎn)品運(yùn)營團(tuán)隊降低很多工作量。
5.4 HTML、CSS和JavaScript之間的關(guān)系
HTML就像我們頁面設(shè)計的內(nèi)容，有頭部、有金剛區(qū)、有菜單欄；CSS就像是顏色樣式、文本樣式，你可以批量去修改這個公共樣式，整個設(shè)計就能保持一致；而JavaScript就像交互動態(tài)效果，比如點(diǎn)擊某個按鈕，它會產(chǎn)生移出的效果。作者針對這三個內(nèi)容都有很詳細(xì)的介紹，各位可以結(jié)合自己的興趣去閱讀，掌握一些基礎(chǔ)的編程知識。
6. 數(shù)據(jù)分析
當(dāng)一個產(chǎn)品正式上線運(yùn)營以后，這個產(chǎn)品就會不斷迭代。而設(shè)計師在產(chǎn)品的運(yùn)營過程中，一定要去學(xué)習(xí)了解一些常見的數(shù)據(jù)指標(biāo)，這些數(shù)據(jù)指標(biāo)，可以真實反饋產(chǎn)品是否解決用戶的使用情況，以及用戶在產(chǎn)品使用過程中所遇見的難點(diǎn)。沒有數(shù)據(jù)，再完美的產(chǎn)品也沒有討論的意義。
6.1 常見的數(shù)據(jù)指標(biāo)
作者把數(shù)據(jù)指標(biāo)分成了三類，分別是與用戶相關(guān)、與行為相關(guān)和與業(yè)務(wù)相關(guān)的數(shù)據(jù)指標(biāo)。其實如果你經(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是指訪問某個頁面的獨(dú)立用戶數(shù)。比如3個用戶訪問了一個APP的100個頁面，那么PV就是100次，UV是3。
6.1.3 GMV
GMV全稱為Gross Merchandise Volume，指一段時間內(nèi)的成交總額，一般在電商類產(chǎn)品進(jìn)行數(shù)據(jù)統(tǒng)計或者制訂KPI（Key Performance Indicator，關(guān)鍵績效指標(biāo)）時使用。
6.2 A/B測試
A/B測試就是把所有的用戶分成兩部分，一部分用戶看到的是A方案，另一部分用戶看到的是B方案，然后對兩部分用戶使用產(chǎn)品時產(chǎn)生的數(shù)據(jù)進(jìn)行分析，為最終選擇使用哪個版本的方案提供有效的參考依據(jù)。最近一周，站酷就在進(jìn)行A/B測試，目的就是搜集不同用戶群的反饋。
我把這一章的內(nèi)容歸納為運(yùn)營基礎(chǔ)知識，在后續(xù)的時間里，我們會單獨(dú)去講《增長黑客》、《硅谷增長黑客筆記》，到時候大家就會對這些知識熟悉了。
7. 總結(jié)
《視覺之外：全鏈路UI設(shè)計思維的培養(yǎng)與提升》這本書內(nèi)容非常夯實，不僅僅全面介紹了全鏈路設(shè)計師所需要學(xué)習(xí)掌握的五個部分，而且還加入了很多實操的內(nèi)容。比如流程圖的繪制、信息結(jié)構(gòu)的工具、編程語言的學(xué)習(xí)、CSS的入門等等。這本書真的非常適合比較傳統(tǒng)的UI設(shè)計師學(xué)習(xí)，可以通過這本書快速打破自己的知識盲區(qū)，從而明白當(dāng)下以及未來的UI設(shè)計師發(fā)展方向，成為一名有競爭力、有價值的全鏈路設(shè)計師。
二、這本書對我們有什么啟發(fā)？
1. 全鏈路設(shè)計師的成長模型
作者寫這本書的內(nèi)容結(jié)構(gòu)，其實就是一個全鏈路設(shè)計師的成長模型。如果你想成為一名全鏈路設(shè)計師，那么你就需要在產(chǎn)品需求、交互設(shè)計、UI視覺設(shè)計、產(chǎn)品研發(fā)和數(shù)據(jù)分析這五個關(guān)鍵階段去學(xué)習(xí)。你可以根據(jù)這個成長模型去規(guī)劃自己的學(xué)習(xí)內(nèi)容，比如你當(dāng)下產(chǎn)品的知識非常薄弱，那么你就可以提升產(chǎn)品知識。這樣你就很有目標(biāo)感，這個模型可以對你起到指導(dǎo)和審視的作用。
2. 產(chǎn)品設(shè)計的思維能力
我在分享臨摹設(shè)計資源的時候，都會加上《你好，UI設(shè)計師》這篇文章。我之所以會分享這些辛辛苦苦臨摹的設(shè)計文件，其實更多是想去做一個引路人。讓大家從我的臨摹文件里面，結(jié)合產(chǎn)品拆解去學(xué)習(xí)這個方法。
一款產(chǎn)品設(shè)計不是一個點(diǎn)，一條線，一個面，而是一個系統(tǒng)工程。就像作者在這本書里所列舉的五個部分，如果你只是局限于某個產(chǎn)品設(shè)計的美丑，那么你的思維能力就無法取得突破。你一定要有全局觀，要從整體去出發(fā)思考一個產(chǎn)品如何設(shè)計；你一定要跳出設(shè)計的執(zhí)行層，從頭到尾去思考，這樣你才能從掌握一個設(shè)計工具到學(xué)習(xí)到一種產(chǎn)品設(shè)計思維能力。
3. 從”怎么做“到”為什么這樣做“？
我把這個思維的提升定義為一個設(shè)計師蛻變的節(jié)點(diǎn)。就像我過去做外包設(shè)計的時候，更多只停留于如何按照客戶的需求去把項目設(shè)計好，而根本沒有去思考客戶為什么會有這樣的需求。
我年初發(fā)布丁香醫(yī)生產(chǎn)品拆解的時候，我把花了2個月做這件事的目的描述為——我想去思考一個優(yōu)秀的產(chǎn)品，到底設(shè)計了什么，為什么這樣設(shè)計。可能沒有幾個人注意到這個細(xì)節(jié)，但其實對我來說，這就是設(shè)計思維真正的蛻變。
我為什么花那么多時間去做產(chǎn)品拆解，就是我想讓大家跟著我跳出執(zhí)行層去思考，為什么別人這么做，他們遵循了什么設(shè)計原則，只有這樣，我們才能培養(yǎng)設(shè)計的思考能力，從而破繭成蝶。
三、寫在后面的話
就像我在開頭寫的那樣，黃方聞的書籍，很有自己的特點(diǎn)。為了解讀他的這本書，我特意去關(guān)注了他的公眾號，然后又找到了他的個人公眾號，看了他很多的生活隨筆文章。有初為人父的感動，有因為疫情困在上海無法陪伴家人的無奈，我感覺他真是一個非常細(xì)膩的人，而他的書，也沿襲他的風(fēng)格。
這本《視覺之外：全鏈路UI設(shè)計思維的培養(yǎng)與提升》不僅僅向你全面介紹了成為一個全鏈路設(shè)計師的技能模型，更是分享了很多實操的方法。就像他在序里所寫的，他想幫助大家打開一扇門，一扇可以連接其他崗位的門，我已經(jīng)打開了，接下來，到你了！開始閱讀吧！
作者：廖爾摩斯
鏈接：https://www.zcool.com.cn/article/ZMTQ0OTg3Ng==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
藍(lán)藍(lán)設(shè)計(www.gyxygd.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。
關(guān)鍵詞：UI咨詢、UI設(shè)計服務(wù)公司、軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司、UI交互設(shè)計公司、數(shù)據(jù)可視化設(shè)計公司、用戶體驗公司、高端網(wǎng)站設(shè)計公司
銀行金融軟件UI界面設(shè)計、能源及監(jiān)控軟件UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計、軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件UI界面設(shè)計、醫(yī)療行業(yè)軟件UI界面設(shè)計、教育行業(yè)軟件UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)
藍(lán)藍(lán)設(shè)計的小編 http://www.gyxygd.cn