用一個案例，幫你學會實用的結構化設計思維

這期文章，我想引入一個知識點：結構化設計思維。這篇文章是在我拜讀《結構思考力》這本書之后的想法，并結合自己的設計經驗將一些在工作中用到的方法做一個系統的歸類。

很多同學在進行設計的時候往往知道設計方案卻無法系統和結構化，這導致了當設計目標和場景變化的時候就無法將設計運用自如。比如針對目前公司的產品，你可能很快就能出幾個設計方案，這時候讓你換一個產品做設計，你會發現無從下手，好的方案更是偶然性事件。

結構化設計思維能幫助你產出多目標，多環境下不同的設計策略。好，那么下面將分為3塊內容講述一下本文的核心觀點。

1. 什么是結構化思維

結構化的思維是我們人本身的職業思維方式，這種思維是我們思考（解決問題、決策）和表達（寫作、表述、溝通）等方面的一種基本思路。

結構思維的核心理念源于芭芭拉·明托的《金字塔原理》一書，縱向結構上，每一組觀點都必須是其下一個層次觀點的概括，每組各個觀點互不重疊且有一定邏輯順序。通過這樣的結構思考，我們就可以在一個抽象的設計目標下快速抓住主題和主旨，并理清步驟，將方案落地，提出一個合理完善的設計方案。

結構化思維的4個特點：結論先行、以上統下、歸類分組和邏輯遞進，下面用一副簡單的圖來表示結構。

下面再舉個簡單的例子，讓你描述一個女人，首先我們要下一個結論，比如這個女人很美，那么她身上什么地方讓你覺得很美，我們可以分為外在美和內在美兩部分，這兩個觀點讓我覺得這個女人是美的。那么分別再從這兩個觀點中找出其對應的幾點理由去支撐你的這個觀點，比如精致的五官，完美的身材，氣質的裝扮，說明了這個女人的外在美。尊老愛幼，溫柔體貼，勤儉持家說明了這個女人的內在美。如果說再說的細一點，比如完美的身材這個理由是由幾個數據來論證的：170的個子，九頭身，三圍的數據等等。

2. 為什么需要結構化設計思維

其實，并不只是設計的時候需要用到結構化思維，結構化思維使用的場景非常多，例如：項目匯報，年終總結，方案推演，面試，分享，自我介紹等等地方都需要用到。只不過這次我把這個概念用到了我們做設計方案的時候。

舉個例子，在面試的時候，面試官問你你能夠給公司帶來什么價值？那么我想到的是

1. 給產品帶來價值。

2. 給團隊帶來價值。

3. 給自己帶來價值。

給產品帶來價值：提升用戶體驗指標，強化品牌影響力，提升產品項目營收

給團隊帶來價值：提成團隊成員水平，搞好團隊文化建設，擴大團隊影響力

給自己帶來價值：個人專業提升，團隊協作能力提升，滿足職業規劃和福利薪酬，從而反哺團隊及產品。

具體子論點大家可以分別列出來，這樣的回答能夠讓面試官知道你清晰的結構化思維和邏輯，真是21世紀不可多得的人才。

結構化設計思維的優點在于能夠清晰的理清設計的上下游提出的需求，迅速抓住設計目標和重點，并快速給出合理完善的解決方案。

很多設計者雖然在職場上打拼多年，但是還是無法將自己的設計方法形成一個系統，如果設計師能夠有一定的系統理論做支撐的，并且以這個標準為大致方向和目標，那么在設計的過程中就比較容易判斷，更容易做出平衡性強的商業設計。

3. 如何以結構化思維做設計

我們同樣以案例方式為大家解讀實際的操作方法，但是結構化思維需要不斷的鍛煉，否則無法運用自如。

首先我們將會接到一個設計需求，例如一個首頁設計，產品說首頁里需要這些功能信息，好！幫我去設計一個產品首頁吧！當我們接到這個需求的時候我們腦中會出現很多想法和思路，但是全都揉雜在一起，無從下手，這時我們需要一條一條將他們理清楚。那么我們將一個有價值的首頁作為目標或者一個結論，來往下分解。

一個有價值的首頁我將它分成3個觀點來描述：

1. 滿足用戶需求

2. 滿足產品需求

3. 滿足自我需求

每一個論點，都是下面子論點的概述，就是以上統下的方式來進行，縱向需要有層次，橫向需要有邏輯遞進。

這3個觀點的合并就是一個有價值的首頁的體現。

那么繼續分解：

滿足用戶需求：

1. 獲取核心信息高效
2. 操作體驗流暢
3. 界面美觀

滿足產品需求：

1. 功能融合度高
2. 功能擴展性強
3. 功能轉化率高

滿足自我需求：

1. 設計理據充分
2. 嚴格貫徹設計規范
3. 細節把控合理穩妥
4. 溝通高效全面。
5. 項目跟進及時

這是針對“一個有價值的首頁”進行的觀點描述，如果我們的主標題換成了“有價值的產品”那么下面的子論點就會發生變化，可能依然是滿足用戶需求和產品需求，這兩個分論點。

但是滿足用戶需求的子論點會變成：

1. 滿足用戶剛需
2. 解決用戶痛點

等等。

而滿足產品需求的子論點就變成了

1. 用戶活躍度／粘性／留存高
2. 產品數據樂觀
3. 市場占有率大
4. 公司營收可觀

所以一個總標題/結論需要隨時貫徹到子論點進行驗證。以上是我用來舉例的觀點并不完全。

我們繼續回到一個有價值的首頁上來看我們的結構。繼續分解，

獲取核心信息高效：

1. 內容布局合理
2. 內容層次分明

操作流暢：

1. 反饋及時
2. 動效流暢
3. 符合預期

界面美觀：

1. 各元素保持高度統一
2. 配色合理舒適
3. 情感化部分讓用戶有共鳴

再細一步的分解大家可以看圖片來了解。

可能大家覺得這東西又實在偏理論，即便知道這個結構也無法上手做設計，那么接下來我們以一個實際需求來做一個設計。

先拿我公司的項目為例，需要設計一個貨源列表作為首頁，我收到了產品的一張原型，非常粗獷，只能看到一堆信息的冗雜，現在我們開始套用這個設計框架：

第一步

來看如何滿足用戶需求，那么我們就必須以用戶的角度和其使用場景來分析用戶要獲取什么樣的信息，這一步并不是我們憑空猜測和經驗之談，所以我們需要用研結果導入、故事板和實地驗證方為有效。

確定好了核心信息之后我們就需要根據一些理論知識來設計布局，比如格式塔原理的使用以及一些認知常識的使用。可以先做再驗證，也可以先驗證再做。

第二步

在保證用戶能高效獲取核心信息的前提之下我們來考慮用戶交互體驗方面的設計，比如按鈕按下的反饋，語音接收的反饋，頁面跳轉的動效方式，圖片資源的優化等等。

第三步

就是更直觀表現的東西了，首先就是整體風格和情感的定義，將會用到情緒板等召集用戶參與的討論，將產品顏色，產品風格有一個方向或者結論。

第四步

尋找讓用戶共鳴的點，情感化設計的探索，微交互，插畫等元素的使用。

我們再來回顧一下滿足用戶需求需要做到3個點，以這3個點進行擴展論證，當然你也可以分四個點，但這4個點同樣需要邏輯遞進。

以同樣的方式去考慮產品需求，這邊就不放開說了，在設計思考的時候滿足用戶需求，滿足產品需求以及滿足自我需求這三個論點，雖然列舉時有邏輯先后，但是在設計的時候我們要一起考慮，如何平衡化做設計，是非常考驗設計師的。

這是從原型到新版本的一個改版變化，雖然我們眼前只有3個版本，但是在設計的時候每個版本都有不下10個設計的方案，最后由專家小組來審核并敲定某一個設計方案，之后再去做驗證，不斷打磨和復盤。

總結：

結構化設計思維只是結構化思維的一種使用方式，在平時的生活，工作中我們利用這個方式來提高溝通的效率以及提高思考廣度和深度，這是一種職業人需要必備的一種能力。而這次講的結構化設計思維就是幫助設計者提高設計方案的產出效率和準確度，更全面的考慮影響設計的各種緯度還有條件。

注：想鍛煉出結構化思維，好的工具必不可少：《做你大腦中的記號筆！15款為設計師而生的思維導圖工具》

也可以看看專業設計師的思維是怎樣的：《初級進階教程！手把手教你培養專業的設計思維》

歡迎關注作者應駿的微信公眾號「shejishiyj」：應謀鬼計

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量180萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com