已經(jīng)了解了一定的設(shè)計(jì)方法，產(chǎn)品設(shè)計(jì)的過(guò)程中要怎樣理清工作思路？做設(shè)計(jì)的過(guò)程就是處理設(shè)計(jì)關(guān)系的過(guò)程，本文作者從宏觀(guān)設(shè)計(jì)角度出發(fā)，著眼于微觀(guān)設(shè)計(jì)面，介紹了設(shè)計(jì)中的七種設(shè)計(jì)關(guān)系，用整體的聯(lián)系的目光看待設(shè)計(jì)中的問(wèn)題，希望能在設(shè)計(jì)思路上提供更多的思考角度。適合關(guān)注產(chǎn)品設(shè)計(jì)的小伙伴閱讀。

做設(shè)計(jì)的過(guò)程就是處理設(shè)計(jì)關(guān)系的過(guò)程。而無(wú)論交互設(shè)計(jì)還是視覺(jué)設(shè)計(jì)，在設(shè)計(jì)過(guò)程中需要反復(fù)考慮的是這 7 種設(shè)計(jì)關(guān)系：

1. 生意介質(zhì)關(guān)系
2. 路徑聯(lián)動(dòng)關(guān)系
3. 系統(tǒng)構(gòu)成關(guān)系
4. 同類(lèi)并列關(guān)系
5. 分級(jí)從屬關(guān)系
6. 歸組收納關(guān)系
7. Z 軸層級(jí)關(guān)系

在這里強(qiáng)調(diào)關(guān)系這個(gè)詞，是因?yàn)樵O(shè)計(jì)這件事從來(lái)都不是孤立的。

這個(gè)道理雖然很容易明白，但是在我們大部分常規(guī)設(shè)計(jì)工作中，接到的設(shè)計(jì)任務(wù)往往是經(jīng)過(guò)拆解后的局部。陷入局部，忽略這個(gè)局部與其他因素之間的關(guān)系，是設(shè)計(jì)開(kāi)始變得糟糕的重要原因。

說(shuō)到設(shè)計(jì)方法，我們現(xiàn)在已經(jīng)有一些比較成熟的思維框架，比如斯坦福設(shè)計(jì)學(xué)院的 Design Thinking Process、雙鉆模型、體驗(yàn)地圖、用戶(hù)體驗(yàn)五要素框架等，但有了這些框架之后，在具體的設(shè)計(jì)問(wèn)題中，還是沒(méi)有一種行之有效的方法可以直接的指導(dǎo)、改善不同職級(jí)、不同經(jīng)驗(yàn)的設(shè)計(jì)師的設(shè)計(jì)產(chǎn)出。

基于這樣的現(xiàn)狀，我嘗試梳理了我的設(shè)計(jì)方法論，從宏觀(guān)的設(shè)計(jì)關(guān)系出發(fā)，側(cè)重眼于微觀(guān)的設(shè)計(jì)層面，希望用一種簡(jiǎn)單的方式抓住這 7 個(gè)詞，為設(shè)計(jì)工作提供一點(diǎn)建議和幫助。

一、生意介質(zhì)關(guān)系

為什么設(shè)計(jì)師容易自嗨？或者容易被別人認(rèn)為設(shè)計(jì)師在自嗨，所以不得不連續(xù)不斷不遺余力的進(jìn)行自證，自證設(shè)計(jì)的價(jià)值？很多時(shí)候是因?yàn)闆](méi)有處理好設(shè)計(jì)的生意介質(zhì)關(guān)系。

設(shè)計(jì)區(qū)別于藝術(shù)的一個(gè)根本點(diǎn)在于，設(shè)計(jì)是一種服務(wù)，而非自我表達(dá)。這種服務(wù)并不是說(shuō)設(shè)計(jì)師作為乙方需要服務(wù)好你的需求方，而是說(shuō)任何設(shè)計(jì)都始于明確的目標(biāo)，并服務(wù)于一種生意以及參與到這個(gè)生意中的用戶(hù)。

這種服務(wù)的第一屬性要求我們放下設(shè)計(jì)師的自嗨，分析生意和用戶(hù)，分析當(dāng)下遇到的問(wèn)題，并在困難中尋找最佳設(shè)計(jì)方案。所以從這個(gè)角度來(lái)看，任何一個(gè)設(shè)計(jì)都是困難的。如果你覺(jué)得沒(méi)有困難，那只能說(shuō)明你想的過(guò)于簡(jiǎn)單，或者沒(méi)有在從事真正意義上的設(shè)計(jì)工作。

為什么說(shuō)任何一個(gè)設(shè)計(jì)都是困難的？因?yàn)樵O(shè)計(jì)關(guān)乎用戶(hù)的的認(rèn)知、預(yù)期與習(xí)慣。

用戶(hù)認(rèn)知的形成取決于用戶(hù)過(guò)去的經(jīng)驗(yàn)，過(guò)去這個(gè)用戶(hù)或者說(shuō)這類(lèi)用戶(hù)在使用類(lèi)似產(chǎn)品時(shí)建立起來(lái)的基本認(rèn)知，帶著這個(gè)基本認(rèn)知以及用過(guò)過(guò)去養(yǎng)成的操作習(xí)慣甚至思維習(xí)慣，用戶(hù)看到你的產(chǎn)品界面時(shí)，首先會(huì)產(chǎn)生一個(gè)認(rèn)知，在這個(gè)認(rèn)知的基礎(chǔ)上形成一個(gè)對(duì)這個(gè)界面狀態(tài)的潛在預(yù)期。

好的設(shè)計(jì)能夠引導(dǎo)、管理用戶(hù)的這種認(rèn)知和預(yù)期，進(jìn)而促使用戶(hù)產(chǎn)生實(shí)際的操作行為。而差的設(shè)計(jì)往往不能幫助用戶(hù)直觀(guān)的建立基礎(chǔ)認(rèn)知，以至于不能產(chǎn)生我們想要的用戶(hù)預(yù)期，甚至產(chǎn)生了完全錯(cuò)誤的預(yù)期。當(dāng)用戶(hù)操作之后發(fā)現(xiàn)與自己的預(yù)期不相符的時(shí)候，體驗(yàn)痛點(diǎn)就產(chǎn)生了。

所以說(shuō)，設(shè)計(jì)是一種介質(zhì)。一種連接生意和用戶(hù)的介質(zhì)，一種復(fù)雜與簡(jiǎn)單之間的介質(zhì)，一種邊界模糊的、還在不斷進(jìn)化的介質(zhì)。

要做好這種介質(zhì)，需要設(shè)計(jì)師具備好的分析能力、邏輯思維與轉(zhuǎn)化能力、想象與創(chuàng)造能力，而這三種能力合起來(lái)，可以簡(jiǎn)單概括為我們常說(shuō)的洞察力。去洞察自己的洞察力吧。這樣才能處理好生意與用戶(hù)之間的設(shè)計(jì)關(guān)系，讓設(shè)計(jì)成為一種好的介質(zhì)。

二、路徑聯(lián)動(dòng)關(guān)系

交互設(shè)計(jì)設(shè)計(jì)的是什么？

設(shè)計(jì)的是用戶(hù)行為。

可用戶(hù)行為是虛的，那實(shí)際上設(shè)計(jì)的是什么呢？

設(shè)計(jì)的是一個(gè)個(gè)狀態(tài)以及狀態(tài)與狀態(tài)之間的聯(lián)動(dòng)關(guān)系。

這是一種設(shè)計(jì)關(guān)系，視覺(jué)設(shè)計(jì)考慮的點(diǎn)線(xiàn)面之間的關(guān)系，不同元素之間的組織關(guān)系，交互設(shè)計(jì)考慮的是不同信息之間的組織關(guān)系，不同狀態(tài)之間的交互聯(lián)動(dòng)關(guān)系。

在這個(gè)過(guò)程中，需要有好的用戶(hù)洞察，充分理解用戶(hù)場(chǎng)景與業(yè)務(wù)訴求，管理用戶(hù)預(yù)期，及時(shí)給予合理的界面反饋。

時(shí)間是線(xiàn)性的，我們的工作是線(xiàn)性的，用戶(hù)在你的產(chǎn)品中花費(fèi)的時(shí)間是線(xiàn)性的，所以用戶(hù)在使用產(chǎn)品的過(guò)程中所接觸到的一個(gè)個(gè)界面與交互也是線(xiàn)性的。

在這個(gè)線(xiàn)條中我們需要考慮到你當(dāng)前處理的這個(gè)點(diǎn)在整個(gè)用戶(hù)路徑中的關(guān)系，要如何處理才能使用戶(hù)不在當(dāng)前這個(gè)節(jié)點(diǎn)中斷任務(wù)甚至退出程序。在這個(gè)線(xiàn)條中的每一個(gè)節(jié)點(diǎn)都與它的上一個(gè)節(jié)點(diǎn)與下一個(gè)節(jié)點(diǎn)存在路徑聯(lián)動(dòng)關(guān)系。

這種路徑聯(lián)動(dòng)關(guān)系在交互設(shè)計(jì)的工作里常常以流程圖的方式輸出，容易理解，但同時(shí)也容易被忽視，尤其是對(duì)專(zhuān)職的視覺(jué)設(shè)計(jì)師而言。所以無(wú)論哪種形式的設(shè)計(jì)工作，對(duì)于路徑聯(lián)動(dòng)關(guān)系的處理，都需要充分考慮流程的起點(diǎn)與終點(diǎn)，以及路徑的匯合與分支。

交互設(shè)計(jì)的思維不應(yīng)該局限在交互設(shè)計(jì)這個(gè)工作或者交互設(shè)計(jì)師這個(gè)職位上，視覺(jué)設(shè)計(jì)師的工作同樣需要具備交互思維。

產(chǎn)品是一個(gè)復(fù)雜的系統(tǒng)，我們的日常工作是被拆分后的一個(gè)個(gè)節(jié)點(diǎn)。開(kāi)始一個(gè)設(shè)計(jì)項(xiàng)目之后，只有充分考慮當(dāng)前這個(gè)頁(yè)面或者這個(gè)視覺(jué)物料在用戶(hù)的時(shí)間線(xiàn)程里的前后聯(lián)動(dòng)關(guān)系。

多問(wèn)問(wèn)自己，用戶(hù)是從哪里來(lái)的，接觸到你當(dāng)前設(shè)計(jì)的這個(gè)界面/元素/物料之后，我們應(yīng)該如何引導(dǎo)用戶(hù)走到下一步。這個(gè)環(huán)節(jié)如果考慮的不夠全面，就有可能形成斷點(diǎn)。

三、系統(tǒng)構(gòu)成關(guān)系

每一個(gè)科技產(chǎn)品都是一個(gè)有機(jī)的系統(tǒng)，它的迭代與成長(zhǎng)呈現(xiàn)著基本的生命體征。每一個(gè)生命體的律動(dòng)都可以表現(xiàn)出自然的美感。生命的發(fā)展與進(jìn)化并不是被人為設(shè)計(jì)出來(lái)的，而現(xiàn)在我們?nèi)祟?lèi)希望自己設(shè)計(jì)和研發(fā)的產(chǎn)品能夠不斷進(jìn)化，并且經(jīng)久不衰的活下去。

想想這有多難，首先我們要?jiǎng)?chuàng)造一個(gè)生命，其次我們還要希望他在短時(shí)間內(nèi)根據(jù)達(dá)爾文的進(jìn)化論在自然選擇中不斷進(jìn)化，不斷的在惡劣的競(jìng)爭(zhēng)環(huán)境中存活、發(fā)展。

每一個(gè)小的設(shè)計(jì)都從屬于一個(gè)整體，是這個(gè)整體的一部分，并且?guī)в羞@個(gè)整體的特征。我們常說(shuō)的 DNA 也就是這個(gè)意思。每一個(gè)設(shè)計(jì)元素，都應(yīng)該從屬于一個(gè)設(shè)計(jì)語(yǔ)言，不管這個(gè)設(shè)計(jì)語(yǔ)言是顯性的還是隱性的。假如說(shuō)我們不在乎這個(gè)系統(tǒng)構(gòu)成關(guān)系，或者說(shuō)根本沒(méi)有這個(gè) DNA 的存在。

在設(shè)計(jì)上對(duì)于其他競(jìng)品的我們認(rèn)為好的、對(duì)數(shù)據(jù)有幫助的東西直接拿過(guò)來(lái)會(huì)有什么問(wèn)題嗎？如果我們覺(jué)得自己的手臂不夠強(qiáng)壯，是不是直接可以移植健身教練的手臂到自己身上呢？那結(jié)果必定是丑陋的、畸形的。

這也就是為什么我們?cè)谧鲈O(shè)計(jì)規(guī)范與設(shè)計(jì)語(yǔ)言，為什么我們吹毛求疵的追求系統(tǒng)一致性。

同樣的，平面構(gòu)成是設(shè)計(jì)基礎(chǔ)課程，我們可以學(xué)到一些基礎(chǔ)的構(gòu)成一個(gè)畫(huà)面的方式技巧。所以在設(shè)計(jì)草稿階段需要從構(gòu)圖考慮，而不是從單個(gè)元素的刻畫(huà)來(lái)進(jìn)行。如果我們?cè)谧鲈O(shè)計(jì)的時(shí)候忽略元素與元素之間的構(gòu)成關(guān)系，最后整體的效果可能是不協(xié)調(diào)的、不自然的、美感缺失的。

四、同類(lèi)并列關(guān)系

警察有兩種，胖警察和瘦警察；講笑話(huà)的表演有兩種，相聲和脫口秀；電影簡(jiǎn)單的說(shuō)也有兩種，故事片和紀(jì)錄片。并列與類(lèi)比是人們?cè)趯?duì)事物建立認(rèn)知時(shí)的一個(gè)簡(jiǎn)單可用的方法，分類(lèi)便于我們迅速理解世界，理解一個(gè)系統(tǒng)中不同功能、內(nèi)容/信息之間的關(guān)系。

同時(shí)，電影的類(lèi)型化為電影產(chǎn)業(yè)帶來(lái)了更多的觀(guān)眾，產(chǎn)品設(shè)計(jì)形態(tài)的類(lèi)型化為互聯(lián)網(wǎng)產(chǎn)品帶來(lái)了更多的用戶(hù)，信息的類(lèi)型化幫助用戶(hù)獲取到了更多的信息。

用戶(hù)的時(shí)間碎片化了，大塊的內(nèi)容被切分成了小的信息單元，這樣的背景下 Feed/信息流技術(shù)（算法匹配）發(fā)展起來(lái)。同時(shí)我們不能不看到這個(gè)懶惰的循環(huán)：碎片化催生了信息流，信息流讓用戶(hù)的時(shí)間更加碎片化。在這樣的環(huán)境下，各種類(lèi)型的信息被強(qiáng)行拆分塞進(jìn)了用戶(hù)的信息流。

這些信息并列在一起，無(wú)論是新聞資訊、生活貼士、旅行攻略、還是一條機(jī)靈段子，無(wú)論是深度長(zhǎng)文、番劇解說(shuō)視頻，還是一張吸引眼球的圖片，通通都并列在一起，一起爭(zhēng)奪用戶(hù)短暫的注意力。

歸類(lèi)的過(guò)程是強(qiáng)化共性擱置個(gè)性的過(guò)程。

們常常面對(duì)的困難也是該如何將功能或信息分類(lèi)。這些信息本來(lái)是千差萬(wàn)別的，這種并列關(guān)系的處理在設(shè)計(jì)上的困難也是顯而易見(jiàn)的。我們的困難是每當(dāng)我們進(jìn)入一個(gè)部分的設(shè)計(jì)時(shí)，總會(huì)覺(jué)得當(dāng)前處理的這個(gè)問(wèn)題是特殊的，并不那么容易對(duì)不必要的個(gè)性做出舍棄。

五、分級(jí)從屬關(guān)系

如果一個(gè)團(tuán)隊(duì)有100個(gè)人一起做一件事情，那么怎么進(jìn)行組織才能有效的完成這件事呢？如果一個(gè)系統(tǒng)有100個(gè)頁(yè)面，那么這些頁(yè)面如何能夠更有序的組織在一起，才能完成業(yè)務(wù)目標(biāo)并滿(mǎn)足用戶(hù)需求呢？如果一個(gè)頁(yè)面有20個(gè)不同的字段與元素，那么界面中用戶(hù)要閱讀的內(nèi)容、對(duì)下一步操作的引導(dǎo)等應(yīng)該如何進(jìn)行有效的組織？

分級(jí)從屬關(guān)系的建立可以幫助我們建立易于理解的設(shè)計(jì)框架。從信息架構(gòu)的組織、導(dǎo)航的設(shè)計(jì)到單個(gè)頁(yè)面、單個(gè)卡片的設(shè)計(jì)框架都需要清晰的傳遞分級(jí)從屬關(guān)系。

扁平化管理在互聯(lián)網(wǎng)公司一度聽(tīng)上去非常洋氣，但現(xiàn)在我們?nèi)匀粺o(wú)法確定扁平化管理一定優(yōu)于層級(jí)化管理。

扁平化的優(yōu)點(diǎn)和缺點(diǎn)都很明顯：他可以降低管理成本，但對(duì)公司結(jié)構(gòu)架構(gòu)能力和組織能力要求較高；他可以分權(quán)管理讓更多的人參與決策，但這樣的決策過(guò)程容易混亂；他可以更好的激勵(lì)人才培養(yǎng)，但同時(shí)隱晦的層級(jí)關(guān)系也無(wú)法避免。

扁平化設(shè)計(jì)更加凸顯內(nèi)容本身，避免信息傳達(dá)上的不必要干擾，強(qiáng)調(diào)界面的效率。但值得強(qiáng)調(diào)的是，扁平化設(shè)計(jì)并非直接放棄了信息的層級(jí)關(guān)系，而是在用更簡(jiǎn)練的形式來(lái)表現(xiàn)層級(jí)關(guān)系。當(dāng)扁平化成為一種設(shè)計(jì)趨勢(shì)被無(wú)腦濫用的時(shí)候，扁平化本身的缺點(diǎn)就被無(wú)限放大了。

在信息架構(gòu)層面，明確的層級(jí)關(guān)系要比所謂的流行趨勢(shì)重要的多。

還以微信為例，他為什么要把朋友圈歸到二級(jí)頁(yè)面？為什么要在 IM 頁(yè)單獨(dú)設(shè)置一個(gè)聊天詳情頁(yè)而不把操作選項(xiàng)前置？為什么對(duì)于單條朋友圈的點(diǎn)贊與評(píng)論沒(méi)有直接外露而收到一個(gè)單看上去表意并不明確的兩個(gè)點(diǎn)的圖標(biāo)里？這看上去一點(diǎn)也不扁平，但似乎并沒(méi)有影響到微信的易用性。

六、歸組收納關(guān)系

作為交互設(shè)計(jì)入門(mén)書(shū)籍的《簡(jiǎn)約至上》中談到了刪除、組織、隱藏、轉(zhuǎn)移四個(gè)設(shè)計(jì)策略，介紹了非常實(shí)用的設(shè)計(jì)方法。

幾年前在裝修房子的時(shí)候接觸了一點(diǎn)室內(nèi)設(shè)計(jì)的知識(shí)，小戶(hù)型空間的收納問(wèn)題、動(dòng)靜分區(qū)問(wèn)題、冰箱洗衣機(jī)放在什么位置會(huì)讓生活更舒適的問(wèn)題，這些問(wèn)題的解決方法都與交互設(shè)計(jì)的設(shè)計(jì)方法相通。

人們對(duì)簡(jiǎn)單的追求在不同的設(shè)計(jì)領(lǐng)域都非常相似。還有一個(gè)有趣的現(xiàn)象：世界是復(fù)雜的，人是復(fù)雜的，生意是復(fù)雜的，而大家在產(chǎn)品設(shè)計(jì)上的審美取向卻是簡(jiǎn)單的。

簡(jiǎn)單的體驗(yàn)簡(jiǎn)單的說(shuō)就是在易懂的基礎(chǔ)上易用，輕松，沒(méi)有不必要的干擾和負(fù)荷，而這種簡(jiǎn)單體驗(yàn)的塑造建立在更有效的歸組與收納的設(shè)計(jì)關(guān)系處理上。

卡片式布局、抽屜式菜單、發(fā)現(xiàn)頁(yè)都是對(duì)信息和功能的歸組收納。在什么場(chǎng)景什么時(shí)機(jī)下適合隱藏、刪除哪些內(nèi)容，把哪些內(nèi)容歸位一組是更合適的，這些都需要設(shè)計(jì)師結(jié)合當(dāng)前場(chǎng)景、結(jié)合其他幾個(gè)設(shè)計(jì)關(guān)系的處理來(lái)綜合考量。

七、Z 軸層級(jí)關(guān)系

設(shè)計(jì)的過(guò)程是處理信息關(guān)系的過(guò)程。人們有兩只眼睛來(lái)感受廣闊立體的空間，人們對(duì)信息的接收也從來(lái)都不是平面的。信息本身是立體的，而平面設(shè)計(jì)與互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)的媒介是平面的，設(shè)計(jì)師需要做的是把立體的信息通過(guò)平面的媒介完整的傳遞給用戶(hù)。

壓感式觸摸屏的技術(shù)發(fā)展帶來(lái)了的新的交互手勢(shì)；我們通過(guò)疊加與覆蓋等設(shè)計(jì)方式在平面上制造層次的視覺(jué)誤差來(lái)劃分信息層級(jí)；我們利用信息與信息之間的大小對(duì)比、色彩關(guān)系來(lái)幫助用戶(hù)更好的理解信息層級(jí)，降低視覺(jué)上的噪音與干擾。

這都是在處理Z軸上的信息層級(jí)關(guān)系。信息與信息之間的關(guān)系是立體的，功能與功能之間的關(guān)系也是如此。所以無(wú)論扁平化的設(shè)計(jì)趨勢(shì)如何，我們?cè)撎幚淼腪軸層級(jí)關(guān)系還是要處理。

–以上談到的 7 種設(shè)計(jì)關(guān)系并不是相互獨(dú)立的，相互之間存在交集，需要我們?cè)谠O(shè)計(jì)過(guò)程中綜合考慮靈活處理才可以形成結(jié)實(shí)、完整、成熟的設(shè)計(jì)方案。