一砾肺、什么是感知性設計模式
產品界面設計中的感知性設計模式大致包括話術氣質、字體防嗡、配色变汪、圖片與圖形風格、空間與布局本鸣、特定的形狀疫衩、交互感知硅蹦、動效荣德、音效闷煤，以及所有對這些要素進行組合運用的特定方法。
1.?感知性模式有助于品牌特質的體現(xiàn)
????????1. 清晰有效的感知性設計模式是構筑品牌差異化的重要手段
????????2. 感知性設計模式由界面來傳達品牌信息涮瞻，界面也因此具有品牌識別性鲤拿，可以給用戶留下深刻的印象
????????3. 成功的感知性模式能通過界面的局部截圖就能使用戶辨認出品牌
????????4. 全局范圍內確保字體與配色的一致、特定的比例關系與搭配方式對于品牌特質的傳達都存在影響
2. 感知性模式將局部連接為整體
????????1. 感知性模式的關聯(lián)能力不僅作用于模塊之間署咽，同時還能體現(xiàn)在產品與系統(tǒng)平臺或適用情境的關系當中近顷。
????????2. 跨平臺的產品中重復運用帶有特色的元素（組件等）能夠幫助感知性模式的體現(xiàn)
二、感知性設計模式的體系化
1. 探索與識別感知性設計模式
1.1 探索方法
????????1. 情緒版（Mood Boards）：通過軟件宁否、印刷素材拼貼來收集靈感窒升。可以是泛化的慕匠，也可以聚焦于某些特定的方向饱须。
????????2. 風格磁貼（Style Tiles）：確定了大致的品牌設計方向后，通過風格磁貼對細節(jié)層面進行探索台谊。由一些關鍵字體蓉媳、配色及界面元素的基礎定義所組成的設計產出物，用于傳達品牌視覺風格的基本構成锅铅。
????????3. 元素拼貼（Element Collages）：將若干界面元素匯集在一處酪呻，集中探索品牌風格在實際界面中的傳達效果。聚焦于實體元素盐须，即功能性設計模式玩荠。
2.2 識別外觀特質與標志性設計模式
識別標志性模式是個不錯的實踐起點》岣瑁可以讓團隊的每一個人將他們認為最能體現(xiàn)你們產品差異性的姨蟋、最令人印象深刻的樣式元素記錄下來。包括：
????????1. 想到你們的產品時立帖，哪些風格或調性會首先浮出腦海
????????2. 用戶時如何描述你們產品的外觀特質的?
????????3. 有哪些元素時用戶時常在反饋當中提及的眼溶？例如“哪個總是讓我感到開心的粉色對勾”一類?
????????4. 特色風格要素，比如“動效精致而緩和晓勇，不急促不張揚”等
2. 定義感知性設計模式
完成標志性設計模式識別后堂飞，可以將其歸納為若干類：配色、交互狀態(tài)绑咱、動效绰筛、字體、柵格邊距描融、圖標風格铝噩、形狀邊框樣式、插圖窿克、圖片骏庸、語氣基調毛甲、音效。
其中每個類別的體系化定義工作都要參考一下流程進行：分析目標具被、清查與歸類玻募、定義設計模式、規(guī)范使用方式一姿。
2.1 配色
為了確保配色規(guī)則的一致性七咧，我們首先要將每個顏色在界面中的功能用途一一列出。
? ??????1. 分析目標
????????????描述配色目標時叮叹，用詞必須清晰明了艾栋。更具體的描述方式：
????????????(a）用于體現(xiàn)文本的類型與層級關系（正文、標題蛉顽、引用）
????????????(b) 用于呈現(xiàn)鏈接與行動點（主要行為召喚裹粤、次級行為召喚、文本鏈接）
????????????(c) 吸引用戶關注特定的信息蜂林，體現(xiàn)信息的類型差異（確認信息遥诉、警示信息）
????????????(d)?區(qū)隔內容，體現(xiàn)重點（背景噪叙、邊框）
? ??????2. 配色清查
????????????從四個方面對每種顏色進行描述矮锈，包括：
????????????(a) 類型：使用了該顏色的界面元素類型，例如行為召喚按鈕睁蕾、頁頭等
????????????(b) 范例：通過實際截圖演示使用了該顏色的具體界面元素
????????????(c) 色值：Hex色值
????????????(d) 感知：如果該顏色用于塑造特定的感知或氛圍苞笨，則進行描述
? ??????3. 定義設計模式
????????????基于清查清單對配色進行實際定義。? ?從功能目標的維度對配色進行梳理子眶，從而發(fā)現(xiàn)顏色誤用的問題.
? ??????4. 凝練
? ? ? ? ? ? (a) 僅定義用得到的配色：控制色盤的增幅瀑凝，保持色盤的的簡約和聚焦
????????????(b) 確保對比度：測試字色與背景色的對比度，移除不利于閱讀的多余配色（https://contrast-ratio.com/）
? ??????5. 規(guī)范使用方式
????????????制定配色使用原則臭杰，供實際工作參考執(zhí)行粤咪。
2.2 動效
? ??????1. 分析目標
????????????識別動效的目標用途大致包括： ? ?
????????????(a) 使交互狀態(tài)的切換更加柔和自然，例如鼠標懸停樣式的變化
????????????(b) 強化信息或行動點的呈現(xiàn)效果渴杆，例如輕微的推移效果有助于用戶留意并點擊”下一步“按鈕
????????????(c) 隱藏或呈現(xiàn)內容寥枝，例如收起側邊菜單，展開下拉列表或是呈現(xiàn)彈窗
????????2. 動效清查
????????????通過錄屏工具捕捉
????????3. 定義設計模式
????????????以設計目標與感知類型作為分類為度
????????4. 凝練
? ? ? ? ? ? (a) 兩個關鍵概念：時長（timing）磁奖、緩動（easing）
? ? ? ? ? ? (b) 時長對于動效非常關鍵囊拜。一致的參數(shù)未必能夠實現(xiàn)感知上時長一致性例如尺寸不同或運動距離不同的兩個元素，即便動效時長相同比搭，給人帶的感知也會有很大差別冠跷。
????????5. 規(guī)范使用方式
????????????需要對具體行為方式進行定義。像material design，實體化材料的隱喻有助于設計師和工程師更加具象化地思考動效的實現(xiàn)方式蜜托。
2.3 語氣基調
????????1. 語氣基調清查
????????????人們在日常交流和會議中的語言模式弟疆，包括對話習慣都可以作為其產品的語氣基調情緒版當中的素材。?? ?
? ??????2. 定義設計模式
????????????MailChimp的基調規(guī)范網站是這方面最具代表性的范例盗冷。其語氣運用方式會隨著用戶的情緒狀態(tài)變化而調整，例如何時應該表現(xiàn)出幽默無憂同廉，何時應該更具嚴肅性和實踐性等等仪糖。 ???? ?
? ??????3. 規(guī)范使用方式
????????????Quickbook的設計體系當中對語氣基調的運用原則進行了詳細的定義，包括“引領行為”迫肖、“保持簡練”锅劝、“趣味”等多個方面。
3. 創(chuàng)建設計模式文檔
????????1. 描述使用方式：正確與錯誤的使用方式對照也是一種常用的形式蟆湖。
????????2. 跨類定義：對功能性設計模式的風格定義可以出現(xiàn)在感知性文檔中
????????3. 描述風格元素之間的關聯(lián)：顏色之間的關聯(lián)故爵、字體與空間的關聯(lián)、視覺風格與語氣基調的關聯(lián)等
三隅津、迭代
1. 品牌風格與一致性之間尋求平衡
????????1. 在品牌探索階段诬垂，不要對方向和范圍做太多約束，也無需下沉到細節(jié)層面
????????2. 在驗證和迭代階段伦仍，重點就變成了收歸而非發(fā)散结窘，需要持續(xù)進行細化和精煉
????????3. 僅聚焦于一致性的維護可能導致能在細節(jié)中體現(xiàn)品牌氣質的風格要素被忽略
2. 關于“標志性時刻”
標志性時刻：足以成為產品差異化標志的細節(jié)設計模式
3. 小規(guī)模測試
????????1. 現(xiàn)在小地方進行設計的試驗，如果一些模式被證明是行之有效的充蓝，再逐漸將其整合到界面的其他部分
????????2. 以最小化的方式進行新風格嘗試隧枫，明確探索的目標是什么，且要時刻記得探索的實驗性谓苟。
????????3. 新風格被證明局部有效后官脓，需要謹慎的逐漸進行推官，期間務必明確其作用范圍
4. 在品牌風格與業(yè)務需求之間尋求平衡
當新的業(yè)務需求與設計模式放生沖突或需要定義新的設計模式時涝焙，作為設計師應當去捍衛(wèi)產品的品牌特質卑笨，保持敏感，不能任由體系外的元素泛濫仑撞。
以上筆記均來源于閱讀《設計體系 Design Systems》Alla Kholmatova —— C7210譯版（譯者C7210湾趾，于2018年7月至8月發(fā)布于公眾號“Beforeweb”，并非中國大陸官方引進的譯版）有興趣的朋友可以去讀一下這本書的完整版派草。
本篇筆記純個人讀書記錄非盈利目的搀缠，禁止商業(yè)轉載或任何盈利目的傳播。
