UI設計與認知心理學（全綵）

這本書更合適的名字可以叫《認知心理學在設計中體現和運用》。作者用了相當大量的篇幅介紹認知心理學的相關知識，好巧不巧，與我正在看的《普通心理學》和《心理學與生活》搭配出一套課外延伸閱讀的體系，其中還涉及了社會心理學，生物心理學等內容，還提到了文化對認知的影響，進而對建築設計園林設計的影響，對UI設計的影響。 本書更側重的是對設計原因的探尋，對UI設計的直接指導很少，知識很龐雜，看下去需要有耐心有悟性，有各類知識，還可以懂得作者的邏輯框架（感覺這個框架有點偏了）。

我來搜索關於《UI設計與認知心理學》這本書的相關信息，以便爲您提供準確的主要觀念和思維導圖內容。 根據搜索結果，我爲您整理了《UI設計與認知心理學》的主要觀念和思維導圖框架。 📚 書籍基本信息 - 書名：《UI設計與認知心理學》 - 作者：鄭昊 - 出版社：電子工業出版社 - 出版時間：2019年9月 - ISBN：9787121295195 - 頁數：300頁 - 作者背景：北京理工大學設計與藝術學院碩士，北京搜狗科技發展有限公司資深交互設計師，參與設計人人網、百度手機輸入法、搜狗搜索、搜狗百科等衆多項目 --- 🎯 核心觀念與主要內容 一、認知是UI設計的本源問題 核心議題 關鍵觀點 設計的本質 UI設計不僅是視覺美學，更是認知過程的設計 互聯網產品本質 信息交互與認知效率的優化 與傳統設計的區別 UI設計更偏重"示能性"（Affordance），即物體本身具有的、暗示其用途的屬性 理論基礎 必須基於認知心理學與神經科學，而非僅憑經驗直覺 二、格式塔心理學在UI設計中的應用 1. 視覺感知原理 - 圖形與背景關係：金剛區圓形圖標與矩形圖片的差異設計 - 接近性原則：空間接近的元素被視爲一組 - 相似性原則：形狀、顏色相似的元素被視爲一組 - 連續性原則：人眼傾向於將連續的元素視爲整體 - 閉合性原則：人眼傾向於將不完整的形狀"補全" 2. 注意機制的設計運用 - 反射性注意：UI動效和光強變化引起上丘投射，自動吸引注意力 - 有意注意：基於目標和任務的主動注意力分配 - 設計策略：利用圖形與背景差異、大小差異、清晰度差異、陰影差異、顏色差異引導注意 三、認知神經科學的設計啓示 1. 面孔識別與情緒感知 - 梭狀回面孔區（FFA）：大腦存在特異化的神經結構專門用於面孔識別 - 設計應用： - 頭像與表情在UI中更能吸引注意力 - 社交應用中情緒符號（文字表情、GIF表情、AR表情）的設計至關重要 - 面部表情提供豐富的情緒狀態信息，對社交類應用尤爲重要 2. 記憶系統與設計 - 外顯記憶：有意識回憶的信息存儲 - 內隱記憶：無意識影響的技能與習慣 - 場景性設計：好的圖片具有場景性，能交代故事背景（如親子關係配沙灘大海背景） 四、信息認知的平衡定律（扁平化設計理論基礎） 1. 逆簡化原理 - 當視覺內容極度單調時，用戶會追求形式信息的複雜和多樣 - 反之，當視覺內容充實時，形式信息趨向簡化 2. UI扁平化的認知根源 - 技術驅動：CPU工藝進步支持複雜UI，但富媒體化導致軟件內部界面形式信息必須簡化 - 三維化需求：系統UI界面三維化需要去除擬物界面的冗餘信息 - 空間隱喻：扁平化通過三維空間隱喻信息結構（層級縮放、水波點擊效果、高斯模糊景深等） 3. 扁平化設計要點 - 通過距離區隔信息（無框界面、無UI設計） - 簡化與逆簡化的動態平衡 - 桌面端與移動端的差異：桌面端可保留更多三維信息線索 五、重要心理學效應 1. 曝光效應（多看效應） - 人們偏好熟悉的人或事物 - 設計應用：適度"刷存在感"的元素更容易被用戶接受 2. 斯特普魯效應（Stroop Effect） - 對文字意義的反應（優勢反應）快於對顏色的識別（非優勢反應） - 設計啓示：避免文字與顏色信息衝突，減少認知干擾 3. 黃金分割比效應 - 費希納與拉洛的實驗證明人們對黃金分割比矩形有天然偏好 - 設計應用：界面比例、圖片裁切、佈局分割的數學基礎 4. 模度理論 - 以人體比例作爲設計基準（柯布西埃《模度》） - 設計應用：觸控按鈕大小、信息層級間距的人體工學依據 --- 🧠 思維導圖框架 ``` 《UI設計與認知心理學》 │ ├── 01 認知是UI設計的本源問題 │ ├── 1.1 爲什麼英文版面看上去更簡潔 │ ├── 1.2 設計的本質 │ ├── 1.3 互聯網產品的本質與UI設計的本質 │ ├── 1.4 UI設計與傳統設計的區別 │ ├── 1.5 UI設計在"示能性"上的偏重 │ ├── 1.6 UI設計需要認知心理學與神經科學 │ └── 1.7 本書結構：解決問題的過程 │ ├── 02 格式塔心理學與視覺感知 │ ├── 圖形與背景關係 │ │ └── 金剛區圓形圖標 vs 矩形圖片 │ ├── 接近性原則 │ ├── 相似性原則 │ ├── 連續性原則 │ └── 閉合性原則 │ ├── 03 注意機制的設計運用 │ ├── 反射性注意 │ │ ├── UI動效引起上丘投射 │ │ └── 光強變化與注意力轉移 │ ├── 有意注意 │ │ └── 基於目標的主動注意分配 │ └── 引導注意的設計手段 │ ├── 圖形與背景差異 │ ├── 大小差異 │ ├── 清晰度差異 │ ├── 陰影差異 │ └── 顏色有無差異 │ ├── 04 面孔識別與情緒設計 │ ├── 梭狀回面孔區（FFA） │ │ └── 特異化的神經結構 │ ├── 頭像與表情的注意力吸引 │ ├── 情緒符號設計 │ │ ├── 文字表情 │ │ ├── GIF表情 │ │ └── AR表情 │ └── 社交應用中的情緒傳達 │ ├── 05 記憶系統與場景設計 │ ├── 外顯記憶與注意 │ ├── 內隱記憶與習慣 │ └── 場景性圖片設計 │ └── 交代故事背景（如沙灘大海+親子關係） │ ├── 06 信息認知的平衡定律 │ ├── 逆簡化原理 │ │ ├── 視覺內容匱乏 → 形式信息複雜化 │ │ └── 視覺內容充實 → 形式信息簡化 │ ├── UI扁平化的認知根源 │ │ ├── 富媒體化導致形式信息簡化 │ │ └── 三維化需求去除冗餘信息 │ └── 扁平化設計要點 │ ├── 三維空間隱喻信息結構 │ ├── 通過距離區隔信息（無框界面） │ └── 簡化與逆簡化的平衡 │ ├── 07 重要心理學效應 │ ├── 曝光效應（多看效應） │ │ └── 熟悉度偏好 │ ├── 斯特普魯效應 │ │ └── 優勢反應 vs 非優勢反應 │ ├── 黃金分割比效應 │ │ └── 費希納與拉洛的實驗 │ └── 模度理論 │ └── 人體比例設計基準 │ └── 08 設計實踐應用 ├── 導航條位置（左上角 vs 右上角） ├── 信息層級設定（WAP端三級 vs Web端兩級） ├── 控件按鈕的位置與形態規劃 └── 產品信息結構的認知依據 ``` --- 💡 核心設計原則總結 1. 認知負荷最小化：減少用戶處理信息所需的認知資源 2. 注意引導：利用視覺差異和動效引導用戶關注重點信息 3. 情緒設計：重視面孔、表情等情緒符號在社交應用中的作用 4. 空間隱喻：扁平化設計通過三維空間關係展示信息層級 5. 熟悉度偏好：適度重複增強用戶接受度（曝光效應） 6. 人體工學：以人體比例作爲界面元素大小的設計基準 7. 場景化：通過背景交代增強信息的故事性和說服力 --- 🔍 書籍特色與價值 - 理論深度：基於格式塔心理學、認知心理學、神經科學的經典研究 - 實踐結合：融合搜狗搜索等互聯網產品的真實工作經驗 - 問題導向：解決設計師面臨的職業困境（如如何證明設計價值） - 跨學科視角：引入神經科學、生物學、醫學、計算機科學等多領域知識 - 未來導向：爲UI設計的基礎理論構建和未來發展提供方向

廢話連篇，不排除明顯湊字數的嫌疑。搬運 Norman 內容的同時，轉譯卻不得精髓。建議有興趣的朋友可直接移步《設計心理學》。

將認知心理學原理融入 UI 設計的各個環節，搭建起了一座連接用戶心理與界面設計的橋樑。 書中強調，認知心理學爲 UI 設計提供了科學依據。設計界面時，不能僅追求視覺上的美觀，更要考慮用戶的認知習慣和心理預期。例如，在信息架構的搭建上，要遵循用戶的思維模式，讓用戶能快速找到他們需要的內容。利用格式塔原理，合理安排元素的位置和間距，增強界面的整體感和可識別性，幫助用戶更高效地處理信息。 優秀的 UI 設計不僅是技術與藝術的結合，更是對人性的洞察。它要求設計師站在用戶的角度，瞭解他們的認知侷限、行爲習慣和情感需求。只有這樣，才能設計出用戶體驗良好的界面，減少用戶的學習成本和操作失誤，提高用戶的滿意度。

看標題好像是給設計師看的書，但對只學藝術和設計的人來說有點硬核或者說痛苦。大部分內容不是UI設計而是神經科學的長篇解釋，還有像分析哲學一樣晦澀的邏輯表達，不是通俗易懂的風格。建議用AI輔助閱讀。

作者從人類認知的生物學、心理學方面講述了UI設計的含義以及背後的原因。 1、UI設計的本源問題是認知。 UI設計是非語言的表達，這種表達的本質是爲了解決信息與人之間的溝通問題，再進一步，其實是我們如何認知信息。 而互聯網設計則是在無實體的虛擬世界中，對信息及感受的表達。 涉及到表達，那就要考慮到人類文明發展；涉及到認知，那麼就要考慮認知心理學和神經科學。 於是乎作者給出了UI設計解決問題的過程：①選擇合適構圖比例 ②利用柵格系統構建界面邊界和具體結構 ③利用格式塔原理組織頁面要素 ④確定合理色調 ⑤確定icon的表達意義 ⑥確定虛擬空間及動畫效果 2、黃金分割比例來源於生物環境特徵。 黃金分割比例符合斐波那契數列，爲什麼黃金分割看起來更舒服，因爲人類心理存在曝光效應。 即出現次數越多越有印象，在生物環境中，黃金分割比例存在較好的生存優勢，因此存在更多符合此類特徵的生物，進而人類在此環境下更偏向習慣此類比例。 3、使用柵格系統是因爲人的視覺認知基礎偏向喜愛簡單幾何。 人類的記憶規律是簡化，抽取特徵，然後記憶。因此使用簡單幾何可以降低認知過程成本。 4、鄰近原則與赫布定律 鄰近原則只空間相鄰或時間相鄰的元素，人類更傾向於視爲整體併產生關聯。 格式塔中的非封閉視圖可以帶來封閉感覺，是因爲一個不完整刺激可以激活完整刺激，這就是赫布定律——一個鄰近的神經元被長久刺激後，周圍的神經元也傾向屬於這個刺激-反應中。 應用到設計中，我們可以通過給不同元素之間相同規律（共同命運原則）使其感覺起來是一個整體。 5、人類視覺原理及色彩認知 人眼有兩種細胞一種是視杆細胞一種是視錐細胞，視錐細胞對色彩反應，視杆細胞對明暗反應。 不同視錐細胞對色相反應不同，大致可以分爲紅 藍 綠，作用機理是受到刺激時會興奮某部分並抑制某部分細胞。 紅綠色盲只能看到黃色的原因是缺失了反應紅或綠的視錐細胞，進而產生紅不明顯，抑制綠不明顯，兩者共同作用激活了黃色的感受。 人類喜愛暖色調是在生存中尋找食物和溫暖留下的習慣。 而視杆細胞則是感受明暗，在暗環境中會提亮某個亮點，刺激更強烈，所以我們手機需要夜間模式。 色彩的明暗會導致產生色相偏差，所以暗一點和亮一點的時候相同顏色看起來感受不同。 6、人類圖像及物體識別原理 人類通過聲音、視覺來判斷距離。 視覺是因爲我們通過視差來感受判斷距離，我們通常用一隻眼睛作爲主視眼，另一隻眼輔助完成視差距離感判斷。 視錐，視杆，橫向細胞會組成感受野，其結構帶來特點是中心會對光線刺激更興奮，兩側則是對暗感更抑制。 所以我們在明暗交接處會看到暗側有亮邊，亮處有暗邊，所以形成輪廓陰影感覺。 7、利用上述視覺原理設計UI動效 動效的目的是吸引注意力，表達空間和信息，表現風格。 歸納起來，我們在設計中如何展現距離：遮擋（safari標籤欄）、透視（素描的透視）、參考已知物體（遠小近大）、改變陰影（輪廓陰影表現凸出方向）和改變景深（iOS文件夾的高斯模糊背景） 8、外部信息刺激帶來的認知 我們接受信息是有過濾機制的，感光細胞和神經細胞會模糊視線邊緣，清晰視線中央，這是因爲一個依賴視杆細胞一個依賴視錐細胞，其生物原理是爲了偵查中央，警覺周圍。 利用這個原理我們可以設計出有動效的UI來吸引注意力，加強表現效果。 9、內部感受刺激帶來的認知 內部感受與記憶關聯，作者將人類記憶分爲 長期記憶，短期記憶和感覺記憶，其中長期記憶又分爲可陳述和非陳述記憶。非陳述記憶又分爲聯繫的，條件反射的，知覺層面的，非聯想學習的。 我感覺作者想表達就是人會有反射性的記憶，然後多次刺激形成短期記憶，久而久之又形成了身體裏的長期記憶。 再簡單點，人類有思維定式：頁面導航一般在左上角，東方古畫多朝右，西方古畫多朝左。 應用到設計中：icon改版要使用漸進式，不然一下改變的圖形會存在很高的學習成本，體驗不好。針對首次上線的新產品，要預設所有可能的視覺目標，然後都做好引導和反饋。對於有針對性目標的產品，要學會突出該視覺目標。 10、創造是模因的正遷移 創造是源於有目標和有困境，這裏介紹了兩個人類描述信息的假說：雙重編碼和命題，雙重編碼認爲人類通過視覺+語言/語義來描述信息，而命題認爲人類通過主謂賓結構表述元素間關係從而描述信息。但二者問題在於有時候圖像和語義會互相影響作用，我們描述單個物體變化不需要命題。 所以作者提出了模因論，類似自然選擇學說就是一個視覺表象在不斷的複製和變異中，適用於環境的被保留了下來並形成了人類的思維定式。 ...然後我就看不懂中心思想了。 11、分解練習有助於提高能力 12、扁平化原因是因爲信息爆炸密集之後，不需要通過豐富細節來提供信息，因此通過扁平化來精簡表達。 扁平化的設計要點是：更多利用空間變換，圖形的選擇和縮放；更多利用現實世界的物理規則來模擬；利用格式塔 距離感來區分區域 形成無框界面；扁平化與否，簡化細節與否與信息承載容量有關，越大肯定越多細節。 末尾幾個章節作者講了一些AI/5G/VR的原理知識和見解，這裏不贅述了。 全文用了很多生物與心理的理論知識，算是很深入地較科學地探討了UI設計與認知的本源。 需要吐槽的是，本書過於理論化，對設計應用篇幅較少，更多地在解釋一些學說，這也是這本書有些晦澀的原因； 還有一點是作者在表述上的邏輯關係不夠清晰，致使我有些地方看不太懂想要表達的中心思想。何爲邏輯關係呢，就是並列，因果，遞進這種關係，而作者非常喜歡分段然後給段落加上1 2 3的序號。每次你以爲他在描述幾個並列的事情，結果他講了兩個並列和一對因果；你以爲他在並列，不，他說這個我們下一章再說。 這種感覺在第7第8章感覺最明顯。 最後這種通過生理學和心理學來探討設計規律，書中的認知理論，莉莎費德曼巴瑞特的《情緒》有相似而詳細的描述，感興趣可以閱讀下。

理論很好，有些收穫，但是怎麼落到實處，沒說。

這本書討論的全面得來很淺薄，又把一些本來可以集中簡單說的要點無限沒有重點的延伸。總的來說不是內行人寫給內行人看的，像是外行人教的學術作業。

從斐波那契數列、格式塔鄰近原則、庫裏肖夫效行、色彩拮抗理論、有意注意、斯特普魯效應、無意識設計、表徵的雙重編碼理論、VR到5G等等等講述UI設計的理論來源或參照，講述到去爲什麼mac os和ios系統的icon設計不同、爲什麼手機導航欄要是原型、爲什麼扁平化不是潮流是發展的必然趨勢，棒！！！

內容很豐富，但閱讀起來有一定的難度，一些專有名詞的理解上面尚有困難。中間的一些內容直接把我打趴下，讓我直呼好傢伙！根本看不懂啊，這可如何是好