一.工程師對設計偏見的起源

迅速想像一副世界地圖，它是什麼樣子的？

這樣?

還是這樣？

如果仔細觀察上面兩幅圖，可以看出其中的差異：

以英文為關鍵詞搜索，大部分世界地圖的中心是美洲歐洲；但如果以中文為關鍵詞搜索，搜索結果中地圖的中心則是亞洲。

為什麼是這樣？

因為我們總是以自己的經驗為中心建構世界，而上面的地圖，不過是這種構建中心差異的展示—— 亞洲人以自己為中心，歐美人也同樣以他們為中心，再往前推到地心說，則認為地球是宇宙的中心。

真實的世界非常複雜，每時每刻從我們感官中流過的信息幾乎是無窮無盡的，但只有少數會被我們知覺到。人類大腦處理信息的能力存在上限，但進化給了人類能力來避免信息過載。

其中一種能力是給事物建立模型，以便於把握這個紛亂的世界，這種模型通常根據零碎的經驗構建而成，對事情的來龍去脈只有一種膚淺的理解，並依據某種通俗心理學，形成對事物起因，機制和相互關係等各種因素的看法。

這也就是所謂的心智模型（mental model），它有助於我們理解自己的經歷，預測我們的行為結果，應對出乎意料的情況。這些簡化的心智模型減少了人類的認知負擔，而且多數情況下能滿足人類的需要（比如前面對地圖的構建並沒有問題，相反把自己所處的位置放在世界中心，有助於構建對整個世界的認知圖景），但一些錯誤的模式會導致人們在日常生活中受挫，或者是誤解他人，或是產生偏見。

如同盲人摸象

有一些我們不明覺厲

有一些我們會認為 —— WTF？

但你稍微補充相關經驗理論後...

上圖顯示的是畢加索畫公牛時的行為，這是一種從極度複雜中抽象出來的簡約，畢加索說最後一張圖具備了當人們提起公牛這個概念時，頭腦中浮現出的畫面的全部特徵。

毫無疑問的是，上面幾幅圖中醫生和普通人，看到整個公牛作畫流程後的你和看之前的你，視網膜上的圖像幾乎是完全一樣的。但是醫生和普通人，之前的你和之後的你卻產生了不同的認知。這是認知心理學中一個被普遍接受的觀點：

我們對事物的認知，即取決於視網膜上的圖像，又受頭腦中已有知識結構的影響。

當工程師們以自己的經驗為中心去看設計時，偏見已經產生了，如果你不理解畢加索作畫的整個流程，那麼你可能上來就會嘲笑它不過是幼童的塗鴉之作。

二. 對概念的認識

我們對很多概念的認識，不像自認為的那樣清楚

比如下面這些詞：

• 「模態框」與流
• 「修辭術」
• 「工程」，「設計」，「藝術」

可以自己思考一下試試，對於這些詞我們真正理解到了什麼程度？

工程師群體對於設計概念的認知

工程師對設計的認知，基本停留在狹義「UI」上，而對UI的認知，基本停留在視覺設計這一層次上。對於視覺設計，一般人又是怎麼理解的呢？一般會停留在一種樸素的美學視角上，也就是make it beautiful，讓事物變得好看的層面上。

這種通俗美學認識往往流於形式，如果設計的層次僅僅在於make it beautiful的視覺處理上，設計會是怎麼樣？美國有一句俚語形象地解釋了這種理解下的設計：put lipstick on a pig

給豬畫上紅嘴唇兒，但豬還是豬

三. 重新認識設計的概念

So... what is design?

維基百科:

Design is the creation of a plan or convention for the construction of an object, system or measurable human interaction (as in architectural blueprints, engineering drawings, business processes, circuit diagrams, and sewing patterns). Design has different connotations in different fields.

詞源:

設：安排，籌劃；

計：計劃；

設計：按照任務的目的和要求,預先定出工作方案和計劃；

design: plan、purpose、intention

我想你看出來了，這段定義其實是在說...

不好意思，其實沒辦法非常精準的定義「設計」這個概念

我們只知道它是在一些領域中，帶著「目的」和「意圖」的有意識行為

沒有精準定義怎麼辦？

不要緊，因為：

一方面，沒有精準的定義不影響我們正常使用它，比如「遊戲」。

我們經常會使用「遊戲」這個術語，但是如果讓你精確地定義它，也就是通過定義來把遊戲同人類的其他活動形式區分開，你就會發現，這不是一件容易的事情。

另一方面，還可以通過其他方式來進一步理解

• 對比其他概念
• 放到特定場景中

我們對概念的認識，很多都是跟其他事物對比的時候來獲取理解的，通過對比我們能更好的理解事物和作為比較的事物。

放到特定場景中也是一種做法，我們可以縮小一個詞的應用範圍，來較為精準地理解它在這種場景下的含義。

在與其他概念的對比中尋求理解

設計和藝術（目的，意圖）

我們常常會把這兩個詞放在一起使用，但它們的重要區別是：

• 藝術家的目標在於創造一個能夠激發美學反應的可見人工製品。

• 藝術是藝術家或整個社會，在所關心的情感或理性主題上的一種自我表達方法

• 設計必須滿足他人的需要，而不是自己的需要

• 對美學當然都有追求，但側重不同

• 如果說藝術可以是超脫的，那設計必須有世俗的一面，設計追求功能與形式的統一，追求功能的時候，必須要涉及人類學知識

從這個對比中，我們可以看出設計是帶有目的和意圖的一種滿足他人需要的，功能與形式統一的， 適當追求審美的行為

設計和工程（約束條件）

一個顯而易見的事實是，在真實世界中人類面臨著各種各樣的約束條件

• 資源上
• 時間上
• 技術上
• 人類自身能力

這些約束條件，決定了人類沒辦法隨心所欲的做任何想做的事，比如我們沒辦法吹口氣就建造出一個金字塔，沒辦法睡一覺就解決臭氧層空洞問題。

像建造金字塔級別的工作，要求必須組織起來，跟同伴合作，跟未來不同時期的自己合作，以克服這些各種各樣的約束條件，這就是工程學要解決的問題。而在工程學中，如果沒有精心的設計，所謂的工程學就是空談。

即便是一個軟體項目，也複雜到需要工程學介入的程度，上個世紀就湧現出了各種軟體工程學理論，來幫助人們更好地組織軟體開發。這些理論小到注釋，命變數命名方式，大到整個工程的結構組織，包括整個項目時間線上開發採用的模型（瀑布流，敏捷迭代等等），都有所涉及，近些年來又出現了用戶故事地圖（User Story）的概念，這些方法無一不是工程學和設計思想的體現。

為什麼要選擇良好的命名，良好的注釋？ 便於他人也便於自己在不同時期的理解。

為什麼要選擇面向對象編程？ 為了更好的組織代碼？但為什麼要組織代碼？很大一部分作用是便於他人也便於自己在不同時期的理解。

為什麼要採用用戶故事地圖？是為了通過一個個完整的流程，將整個項目分而治之，產生快速迭代的可用產品，並且盡量不影響用戶體驗，讓用戶覺得這個產品是場景完整的。

工程師在代碼中所作出的設計，除了一部分是在性能上做出改善外，其他的工程類設計的目的基本都是：為了理解和合作。

跟工程的對比，可以知道工程中的設計是一種帶有明確目的和意圖的，為了追求系統最優的，為了理解和合作的行為

特定場景下理解——把視線收回到產品設計上

一個產品的誕生，一定是背負某種使命而來，從設計者到底通過什麼來影響受眾？上圖中間缺失的一環，就是「產品的設計表達」。

產品的設計表達？

再說修辭術

修辭立其誠，所以居業也；—— 《周易·乾·文言》

我們從小學就開始學各種修辭手法，比喻，擬人，誇張，通感等等；老師不可不說是傾囊教授，學生們也在作文中使用各種修辭手法，但是不知道多少人問了自己這個問題：

到底什麼是修辭"？

修辭，顧名思義：修飾言辭。從周易中的修辭立其誠，到詩經的賦比興手法，到唐詩宋詞的格律，修辭一直是文學創作中的表現手法。西方從柏拉圖和亞里士多德就開始系統研究修辭學。

亞里士多德說的「修辭學」是跟他的「辯證法」想近的概念。他認為「辯證法」是面向真理的方法，也就是說大家會通過辯證法去辯論，來達到接近真理的目的。

「修辭學」則是面向公眾的方法，這種方法強調表達。

我們用語言表達思維有很多可選方式，對於同一種想法，我們可以這樣說，也可以那樣說，選擇不同的辭彙，不同的方式，就會對受眾產生不同的效果。

在一場交流中或一次寫作中，當你考慮怎麼說更合適的時候，你已經在進行「修辭」這種活動了。我們會考慮受眾有什麼特點，針對這些特點如何進行表達？例如，如果你的演講面向的是小學生，那需要你儘可能講的深入淺出。但如果面對的是一群博士生，直接開門見山講述一些深入的東西就好。

而產品設計本身就是一種修辭，通過對產品的修飾來達到自己目的，正如在語言修飾中，我們不僅會考慮受眾的身份地位，考慮措辭，還會考慮我們到底想要表達什麼東西，達到什麼樣的效果，這種產品設計上的修飾也並不只是停留在視覺層面，而是貫穿於整個產品之中，我們在產品設計中會考慮一些相似的東西：

有何目的，向誰表達，如何表達?

目的，意圖

如上圖，設計者要提供的是像亞馬遜這樣的一種服務，還是類似於今日頭條這樣的一種信息，或者二者兼而有之？提供這種服務（信息），要達到什麼目的？阿里的「讓天下沒有難做的生意」，今日頭條的「你關心的，才是頭條」，這些口號都是一種目的的表達。

向誰表達？

上圖是三個不同國家的筷子設計，你能說出分別是哪三個國家的嗎？

最短的是日本的，最長的是中國的，中間鐵質扁筷是韓國的。因為日本這個國家吃飯時比較獨立，大家各自吃盛放在面前餐具中的食物，所以筷子很短。而中國喜歡很多人一起聚餐，為方便夾菜需要比較長的筷子。而韓國則是吃泡菜比較多，鐵質的扁筷可以輕易地撕開泡菜。

從這些細節中可以看出來，面對不同的文化群體，設計要考慮不同的內容。比如抖音的年輕化群體，內涵的中年人團體等等。

每一個受眾都有自己的需求層次，最基礎的可能是衣食住行，再往上會有情感訴求，個人理想的實現等等。如果一個產品不考慮這些訴求，而僅僅是消耗用戶的空白時間的話，註定是蒼白的。

如何表達？

在日常交流中我們進行表達時，會有各種修辭手法，在產品設計中同樣有用於輔助表達的模型，如出自《用戶體驗要素》的產品層次模型：

需要注意的是，「模型」並不代表事物真實的樣子，而是用來幫助人類分析，理解，預測事情的框架工具，如果一個模型能做到這些就是一個好的模型，反之就應該拋棄它，不管是物理學還是更具體的數學建模，其實都是在做這樣的事情。

上圖中的產品層次模型模型覆蓋了從設計者的目的到最終視覺實現的整個流程。它以一種更加條理化的形式，幫助我們理清整個產品設計中需要考慮的方方面面，簡要說明如下：

• 戰略層

  • 我們為什麼做這個產品？
  • 我們有什麼目標？能滿足用戶什麼目標？
  • 比如我要做一個微信，目的是為了讓大家以一種更緊密的方式來進行社交

• 範圍層

  • 為了滿足目標，我們應該把那些內容包括在內？
  • 比如微信主要包括即時聊天，朋友圈兩大塊

• 結構層

  • 這些內容該如何組織？
  • 如何形成一種系統的，用戶更容易理解和使用的「概念結構」？
  • 比如微信中，如何將聊天，朋友圈結合起來，形成一種渾然一體的概念結構：在社交關係中這一點可能比較明顯，聯繫人，朋友，朋友圈這些內容在生活中已經是比較成熟的結構形式。但在知乎這種問答社區中，可以看到更複雜的融合： 問答，文章，專欄，書店，圓桌。這些概念如何經過設計來統一起來形成系統的？

• 框架層

  • 概念結構形成後，排版，導航怎麼做？
  • 按鈕應該如何放？
  • 如何讓信息更好地展示？
  • 還是微信為例，我的四個底tab應該怎麼放置？用戶從打開微信，到使用某個功能，中間會經過哪些步驟？

• 表現層

  • 視覺設計師所處的層次
  • 配色，字體？
  • 微信該使用什麼色調？圖標如何設計？

層次模型更詳細的內容可以參考《用戶體驗要素》，在國內普通公司中，戰略層和範圍層基本是老闆和產品經理的事情，結構層，框架層是產品經理和交互設計師的工作，而表現層可以說是視覺設計師的工作。這些工作的邊界比較模糊，但是大同小異都包含這些關鍵內容。

設計表達中的其他考慮

• 資源&約束條件
• 人性關懷或者哲學上的考慮
  • 形式追隨功能
  • 讓人去適應機器，還是讓機器來適應人
  • UCD：以用戶為中心的設計
  • 一堆設計的準則
  • 無設計

視覺層以下——以內涵後台中的一些設計為例

【略】

對於視覺設計層，我們需要了解什麼

設計語言

在視覺設計中，頭等大事應該就是視覺語言的概念。比如今日頭條，內涵段子，抖音等產品，每個產品都有自己的待選顏色集合，字體，圖標集合，窗口的樣式，動畫集合等，這些視覺元素組合在一起就構成了一門小型的「設計語言」

「語言」這個詞可能會影響理解。

在現實世界中，每一個人的最本質的部分都隱藏在頭骨黑箱之中，通過各種感官和外界產生聯繫。而不同人之間的聯繫只能靠語言，我們有很多種語言（書面的和口頭的，肢體的），並且通過這些語言來表達和交流思想。

也就是說語言是一種思維的交流系統，這放在設計中也是同樣，視覺設計師們做出一種設計，其目的也是為了傳達某些觀念給最終的受眾，而傳達需要藉助的媒介就是各種視覺元素，它們何在一起就構成了「視覺語言」。

一個視覺語言很好的例子是google的material design。眾所周知，由於android的開放性，整個平台上的APP設計風格可以說是眾生百態，亂象叢生。為了加強對設計者的約束，google推出了自己的設計語言及一系列規範。

大家都學過唐詩宋詞，這些體裁有著嚴格的形式和音律要求，如果一個詩人想寫一首詩，那麼必須得按照這種約束來組織自己的內容，這可以稱得上一種「領域特定語言」。

material design 設計語言帶來的好處是顯而易見的，它約束了APP設計的形式，讓平台有更好的一致性。

但設計語言也有自己的一些缺點，就像詩人需要往形式和音律中套內容一樣，這多少會有一些削足適履的感覺，詩人無數，但著名的也就那麼一些。

設計模式（design pattern)

另一個重要概念，是模式，也就是抽象出來的，特定場景下常用的策略方法。

很多行業中都有一些成熟的模式，這種思想來源於亞歷山大的《建築模式語言》，作者在書中總結了建築學中一些常見的場景及其解決方法。然後被軟體界的工程師借鑒，形成了代碼的設計模式，在設計中也不例外。

模式的存在降低了門檻， 但模式同樣是脫離上下文的一種解決方式，有著缺陷存在。如果想做出更好的設計，就需要回到事務流，信息流，目標，願景，人類認知特點這些東西上面來。

最後——這次設計普及的「意義」

說「有助於產生更好用戶體驗的產品」的話，我是不信的，我不相信一次設計知識普及能帶來立竿見影的效果。

我們總是在不同的語境下使用「意義」這個詞，這裡說的是這次普及能帶來什麼好處？

這其實是一篇設計通識性質的文章， 旨在促進大家對設計的理解，能夠認識到設計領域並非是單薄的一層，而是有著深厚的知識背景。而且希望這次分享能夠帶來啟動效應：讓大家在今後的學習生活中，開始留意到那些東西有設計的痕迹，最重要的是「正確地正確，正確地錯誤」，在看到一個頁面，乃至一個產品時，能知道它為何是這樣，如果錯了，知道為什麼存在問題。

--the end

Live long and prosper