Design Pattern 劃分方式是對設計的邏輯思考

上周我們用一個更複雜的案例（List 列表頁）介紹了 Pattern 組合，通過它們來解決一些更為複雜的問題。這個話題確實有些大，所以有些同學對於這些還不是特別理解。所以今天我們更全局一些來介紹這個思路。

對於 Pattern 組合其實我們可以換一個角度來進行思考。我們之前聊過，在日常工作中當我們拿到一個設計需求時首先要做的就是識別設計要解決什麼本質問題，而這個問題也是可以分解成若干個獨立小問題。

比如我們要針對商品添加一個圖片評價功能，它背後實際要解決的是表單填寫&校驗、圖片拍攝兩個主要主要問題。

在整個設計的過程中，我們首先需要設計師對「表單填寫&校驗」和「圖片拍攝」這兩類問題（也代表兩個不同的 Design Pattern）有足夠的能力沉澱，也就是對這兩個問題的本質問題、設計思路及不同表現手法都能熟練運用。

在此基礎之上我們再疊加上當前產品的用戶特性和業務述求，每一步的基石將更加的堅實，最後得出的設計方案也會相對更加穩妥。

其實這類問題很多設計師都會遇到，在項目設計的過程中會去關注設計的表現或是當前需求的表面問題。因為缺少對問題本質獨立深入的研究，導致設計方案經不起太多的挑戰。

前段時間正好就有一個真實案例，某位同學需要為產品中一個新增功能進行設計。第一次的設計 review 基本都在疲於回答產品、開發同學提出的各個疑問。整個過程顯得混亂無序，設計方案也受到了很多的質疑。

縱觀整個 review 的過程，設計階段主要存在有 3 個問題：

1. 沒有清晰的梳理可能存在的 user flow，導致大家在 review 的過程中會在多條 flow 中跳來跳去，相應的設計也暴露出不少沒有考慮到的問題；
2. 問題本質沒有進行拆分，導致開發同學對於關注的模塊化功能的設計存有疑問；
3. 缺乏對分拆問題的深入研究，導致大家對每個設計節點有不同看法但又無法合理解釋。

第一個問題我們在之前的周刊其實已經聊過多次，這裡就不重複了，近期的主題中我們會更多的關注後面兩條。

就像我們對資料庫的操作都是建立在增刪改查上一樣，我們在日常工作所面對的設計問題大部分是可以被抽象出來的，而這部分內容則是我們設計師在專業能力方面不能忽視的一個重要部分。

再回到 Pattern 部分我們最核心關注的是兩個部分，一個是 Pattern 應該如何劃分，這與我們對問題的拆分思路有很大的關係；另一個則是如何去定義每一個 Pattern 的信息以及解決方案，這對構建產品（或個人）的設計理念有著很強的關聯。這裡我們先來聊聊 Pattern 的劃分。

Patterns 應該如何劃分

最近還有一位會員問到為什麼將 List 列表頁在很多其他的 System 中的定義是 Component，而在上周的期刊我將它成為了一個 Pattern？

沒錯，確實大多數的 System 都會將 List 列表頁劃分為 Components ，不過定義上是有差異的。比如 Material Design 定義 List 列表頁是用來連續的顯示多行（多元素）的信息，它關注的是 list 頁自身；而在上期中我對它的定義是：

List 的本質是為用戶提供一系列的同類信息展示，通過有效的信息組織，幫助用戶快速找到感興趣的信息並引導進入下一步的操作。

我更傾向於將它定義為引導進入下一步操作的一個中間過程，它會有更多的述求存在。因此 List 在這裡的複雜度和解決問題的能力已經被擴大，所以我更傾向於將它定義為一個 Pattern。

Pattern 的劃分方式背後代表的是對設計的邏輯思考，前文中提及的 Pattern 的核心是基於對問題本質的分解和解決方案。

就像我們在前幾期介紹不同 Design System 中提到的一樣，它們是可以存在不同維度的劃分的，這代表的是大家不同的思考維度和方式，並沒有絕對的對與錯。

之前給大家推薦的「A Pattern Language」是本很有意思的書，雖然是寫的是建築但與設計有很多相似的關聯。

比如書中對於「綠地」這個 Pattern 的解釋與我們對 Pattern 的定義就有很多相似之處。

綠地是人們在日常生活中社交、活動過程中必不可少的一部分，這首先定義了問題了 Pattern 存在的意義。但由於人類自身的一些因素，綠地的距離、規模、功能等都將直接影響想到用戶是否願意使用綠地，這就引出了對綠地設計上的要求。

同時綠地也是由多個不同的獨立單元所組成的，比如書中列舉出的聖地、運動場地、動物、植物、小憩的公共場地等，同時這些獨立單元也將會存在別的建築 Pattern 中。

為了深入、有效的研究每一個問題，我們需要對這些獨立單元（較小的 Pattern）進行獨立的設計研究。

比如小憩的公共場地，為了滿足人們的這一述求並確保不會被當今社會認定為不雅的公共行為，設計師需要考慮將考慮將其設置在相對隱蔽、不受來往人流影響同時還需要提供相對舒適的環境。

這個案例其實同樣也是將一個較大的問題分拆成了若干個小的問題，較大的問題對應一個具體的 Pattern，而這個 Pattern 的解決方案同樣也是需要多個更小的 Pattern 組合起來解決。

沿著這個思路，我們將 Design Pattern 劃分成以下三類，它們相互關聯但又不存在絕對的層級關係，只是基於問題的分解來進行歸納和研究。

基於這個分類我們可以拆分、歸納出常用的各類 Patterns，並用統一的格式對 Pattern 所針對的問題、關注點以及解決方案進行分析、總結。

以上是 Design System 系列的第 8 期的節選內容，在餘下的全文內容中（付費部分）我們將繼續對著三類 Pattern 進行展開講解，以及基於這個思路梳理的第一版 Pattern 大圖。接下來我們也將沿著這張大圖進行逐個的分析和方案闡述。

加入 PinDesign 會員，獲取本期主題「Design Pattern 劃分方式是對設計的邏輯思考」的全文內容及本系列前 2 期周刊的贈送。

Design System 是 PinDesign 周刊的一個新系列，基於「Design Systems」這本書結構框架的讀書筆記和經驗總結。希望將自己的感受和經驗分享給大家，輔助大家的閱讀。

點擊領取 PinDesign 會員計劃 50 元優惠券

Design System 系列已更新：

5key：什麼是 Design Systemzhuanlan.zhihu.com5key：Design Systems 02 - 什麼是 Design Principleszhuanlan.zhihu.com5key：Components 與 Patterns 究竟有什麼區別zhuanlan.zhihu.com5key：你該為產品設計怎樣的氣質zhuanlan.zhihu.com5key：Design System 中的 Design Tokenzhuanlan.zhihu.com5key：Design Pattern 實例 - 用戶通知與中斷zhuanlan.zhihu.com5key：Design Pattern 組合實例 - 列表頁設計思考zhuanlan.zhihu.com

點擊下方鏈接，了解 PinDesign 會員計劃詳細信息：

PinDesign 互聯網產品設計周刊wap.youzan.com

推薦閱讀：