如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
視覺設計師作為展示產品最終形態的執行層，產品上線前走查視覺與交互還原是必經環節，而留給設計師走查修改的時間其實非常少，有時候為了配合產品上線時間，通常只能犧牲一些細節，在下一次迭代進行優化。為了每一次上線的產品都能夠得到更好地還原，這就需要設計師去了解開發到底是根據哪些規則還原我們的設計稿，以及在每一次制作和交付設計稿的時候，我們應如何設定好每一個細節的規則。開發：這里已經完全對齊了。
視覺：看起來還沒完全對齊，我的圖也沒有切錯吧？
開發：字體大小和間距都是按照視覺稿來的。
視覺：這里間距偏差這么大，為什么不按照視覺稿？
開發：視覺樣式好多，每個設計師的間距好像都不一樣。
視覺：……
我們經常會聽到身邊的設計師與開發小哥的一些對話，關于對齊、大小、間距等設計還原問題經常會討論很久，有時甚至會覺得，幾個像素的間距是不是沒有必要這么糾結。以我較常接觸的云產品官網為例，云產品官網體量龐大，單個頁面或信息模塊的樣式復用可高達上百個子產品頁面，此時第一個模塊設計的規范性、擴展性、復用性則變得尤為重要，所以為了讓設計方案更加合理，為了讓合作更加，這里總結一些設計經驗，與大家一起探討。
本文將從以下三個方面，思考作為視覺設計師，應當如何讓設計更加合理有效：
1. 字體結構
網頁設計中，我們總避免不了與字體打交道，字體也是我們在設計中經常容易忽視的部分，而經常出錯的原因往往是因為我們對文字的理解不夠清晰。相比西文字體，中文字體結構復雜，字庫龐大，網頁的渲染效果會比西文字體艱難很多。
但無論是中文還是西文，我們經常需要用到的無非是字體大小、字重、字色，還有就是經常被我們忽視的行高和行寬，我們從西文字體提取三個最主要的因素，即字高、行高、行寬?；谖魑淖煮w的結構轉換為中文，我們可以理解為，字高指的就是我們肉眼所能看到的字體的實際高度，而行高指的是字高+上邊距＋下邊距，反過來說，行高減去字高除以 2 就能得到我們的上下邊距，行寬指的就是整個文本的寬度。
舉一個圖文模塊的例子，圖（1）中我們肉眼所看到間距，在我們做標注時，看到的其實是圖（2）中的三個色塊，我們實際給到開發的標注，是色塊的尺寸和色塊之間的間距，以及詳細的文本屬性。
2. 文字行寬
關于行寬，以設計 banner 的標題及描述文字為例，定義行寬是為了讓文本在極限寬度的時候進行換行，再固定好配圖的尺寸，從而得到文本與配圖之間的間距，定義行寬、行數、字數，能夠更好地為運營人員規范輸出的文案，避免因字數過多或過少所造成的視覺不平衡。
當我們處理無序列表時，四個短句文本，長短不一，同樣我們需要限制一行文本寬度，定義一行能承載的最多字數，以及跟產品確認可能出現的最多字數的情況，確認模塊設計的可行性，保證后續運營人員在替換文案的時候不會出錯。
以上兩個例子都是我們設計文字經常出錯的地方，正確的定義規范，無論是交付開發或者其他下游，都能保證模塊設計的可擴展性及規范化，保證最終上線質量。
3. 圖標視錯覺
關于圖標，這里提到一個幾何學錯覺的概念，視覺上的大小、長度、面積、方向、角度等幾何構成，和實際上測得的數字有明顯差別的錯覺，稱為幾何學錯覺。人眼所接受的視覺平衡，往往不是設計軟件上精準的對齊，我們總是會通過調整間距、大小或角度來補齊一些負空間，讓畫面保持視覺平衡。
以客戶案例的卡片樣式為例，客戶案例在 to B 產品中是必不可少的模塊，我們的客戶 logo 有的圓形，有的長方形，有的純文字，尺寸差距比較懸殊，這種情況下我們需要給他限制一個高度，在這個高度以內，再根據 logo 本身的體量來調整圖形的大小，處理好 logo 的視覺平衡，最后紅色區域是 logo 的實際尺寸，藍色區域則是我們實際給到開發的尺寸，從開發的角度來看其實就是占位符，而規范的作圖則是把占位符的透明度調整為 0，以占位符為實際有效作圖區。
UI 設計中通常以「向右箭頭」來表示當前鏈接可跳轉，使用箭頭作圖時，當我們把箭頭和文字右對齊，箭頭其實會更加的往外突出，這時候我們會人為的往里邊推 1 至 2 像素，最后實際給到開發的也應該是紅框的尺寸，也就是 16×16 的占位圖尺寸。
「按鈕」也是 UI 設計中常用的組件，當我們在按鈕里使用圖標加文字時，由于文字的體量更大，整體重心會往右偏，所以我們通常會認為讓圖標和文字整體往左偏移，使整體的視覺更加平衡，實際給到開發的，也是兩個不同等的邊距。
1. 理性的設計
在 iOS 和 Android 的設計規范中，都有提到過使用「8點柵格」的概念，即建議使用 8×8 的網格系統進行設計，我們都知道 0.5px 的渲染在屏幕上會變模糊，之所以使用 8 的倍數是因為市場上主流的屏幕都能被 8 整除，使用 8 點柵格能夠的讓我們所設計的內容樣式在屏幕上保持高清顯示，而在日常的網頁設計中，我其實更加傾向使用 4 點柵格系統。
我們以下圖 4 組數列為例，大家可能都曾使用過上面三組藍色數列中的數值應用到設計中，或以 5 為倍數，或以 10 為倍數、或以偶數為設計邏輯，而實際上以 5 為倍數則會包含奇數，奇數會導致控件文字對不齊，當 5 的倍數和偶數同時使用時，則會出現類似 14、15、16 這種相差為 1 的相鄰數，這樣會導致我們的尺寸規范不好定義規則，難以形成邏輯，而使用 4 的倍數，他們的公差為 4，不會出現奇數，也不會出現相鄰數。
我們再看看一些通用的尺寸定義，例如常見的 icon 設計尺寸都是以 4 為倍數。
常見的網頁柵格及其所均分的卡片和間距，也都是 4 的倍數，如果我們的控件尺寸，圖標尺寸和間距都使用 4 的倍數來定義，那所有的信息模塊自然都能更好的相互適應，層層遞進的邏輯關系也會更加明顯。
我們把 4 點柵格的設計邏輯套用到卡片設計上，第一眼我們可能比較難去評判兩者的好壞，但仔細看，我們就會發現第一個卡片的按鈕沒有水平對齊，相互之間的間距尺寸也是沒什么邏輯性。假如今天調整一個 8px 的間距，明天調一個 10px 的間距，設計師走查起來也很難發現有問題，對接的開發也難以有一個可以參考的規范標準。而相對的，以 4 為倍數，我們會發現所有的信息都會完美對齊，而且倍數為 4 的每個數值之間公差為 4，即使設計稿微調了 1px 我們都能很快發現，開發在還原設計稿時也會有一個衡量標準。
網格設計在報紙、雜志、海報等平面設計領域中也是十分常見的設計手法，通過建立網格，考究每一個信息模塊在頁面中的擺放位置，大小占比，顏色占比，從而使得頁面信息保持秩序、均衡。
使用 4 點柵格系統，通過理性、秩序、邏輯的設計方式賦予畫面秩序感以及閱讀體驗，而以 4 為倍數，每個數字之間都相差為 4，不會太大，也不會太小，同時保持著秩序，讓設計更加理性。對于團隊合作，設計師與開發也將更有默契，不必再為不清不楚的間距浪費時間。
1. 有效切圖
關于切圖，切圖之前應跟開發確定好輸出的格式和尺寸，確定應該用 SVG，一倍圖或是兩倍圖。SVG 體量小渲染質量好，單色使用時還能替換顏色，PNG 則通常用在實景圖，一倍圖和二倍圖則根據實際需要進行輸出。
如果要做分層動畫，那我們就需要分層切圖，如果桌面端和手機端樣式差別較大，那我們需要和開發溝通好如何實現，是否需要特殊切圖，所有的特殊切圖和特殊樣式，我們都應該提前跟開發溝通好。
2. 交互細節
如果某個控件或信息模塊交互樣式較多，那我們可以有一個空白畫板來清晰地標注這些狀態和樣式，很多開發在還原過程中都是一手視覺稿一手交互稿，但視覺設計師作為展示產品最終形態的執行層，很多情況下，視覺階段依然會有很多需要跟交互和產品溝通修改的地方，所以為了避免遺漏修改點，視覺稿應該呈現最完整的設計細節，這樣也會很大程度上節省開發的時間，減少出錯的幾率。
當頁面內容有一定的更新頻率，我們則需要標明視覺樣式規范，以及后續的運營規則，完整的收尾，可以避免產品經常過來尋求上線素材和規范。有些需要隔三個月或半年才上線的需求，清晰的標注也能幫助我們快速回憶起需求背景，讓我們在日常工作中保持頭腦清晰，有條不紊，這其實也是在給我們自己節省時間。
3. 重構稿走查
走查還原的時候，在 Chrome 瀏覽器的空白處右鍵點擊檢查，找到里面的 Computed 窗口，我們可以找到具體的文字、間距、投影等屬性，有時候一些比較細微的調整，我們可以雙擊具體的數值進行調整，調整到自己滿意之后再把具體的數值給到開發，這樣就不用在我們搖擺不定的情況下，造成雙方的困擾。
最后，在預發布的時候，我們可以利用 SwitchHosts 的客戶端來配置開發環境進行體驗，保證最終上線的效果。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
WWDC19 可能是最近幾年最令人激動的蘋果開發者大會了。重回高端專業領域的 Mac Pro 不僅僅是性能怪獸，在專業度、設計感甚至細節的模塊化的設計上，體現出了蘋果這一頂尖大廠應有的底蘊，說實話，考驗民間硬件評測玩家們的資金實力和評測能力的時候到了。在發布Mac Pro 這一系列產品的環節，空耳幾乎完全聽不懂說的是啥，不過可以全程感知到每一個單詞都是牛X的，蘋果官方頁面的介紹現在肯定是最有說服力的，因為最近的評測起碼是要等到今年年底。
屬于 iOS 13 的 Dark Mode 正正好好滿足了所有人的想象，但是和簡單直接的 Android Dark Mode 相比，又多出一絲優雅，非常蘋果。擁有 App Store 和一連串新功能的 watchOS 終于成為了一個更加獨立、功能強大的硬件設備了，而 tvOS …… 不是重點。
重點是，在 iOS 和 macOS 之間，硬生生多出了一個 iPadOS，這才是整個發布會上，最亮眼的星。
屏幕尺寸介于 iPhone 和 Mac 之間的 iPad ，一直沿用著交互機制相對比較簡約的 iOS 。也正是因此，絕大多數的用戶的重度需求，被電腦尤其是Mac 所分走了，而高頻輕量的需求則被 iPhone 給分走了，iPad 系列產品在很多時候都是作為家庭娛樂設備而存在，你聽到更多關于它的功能應用場景，是看視頻追劇。
Apple Pencil 是這個系列的轉折點。書寫，創作，搭配鍵盤輸入，屏幕尺寸從9.7 一路上探到 12.9，iPad 開始在觸摸為王的時代，開始切入更多的使用場景。在學校里面越來越多的學生開始使用一臺iPad 來作為 All in one 學習/娛樂設備，藝術家和音樂者開始使用 iPad 替代手繪板和合成器，AR和娛樂的結合也越來越緊密，從創作到專業領域，iPad 成為了越來越多輕應用場景的核心。
吃灰的 iPad 擁有了更多的可能性，而 iOS 的功能限制反倒成為了 iPad 短板，這大概也是 iPadOS 在整個生態中獨立出來的最重要原因之一吧。
使用單一屏幕作為輸入核心，圍繞觸摸來交互，以原有 iOS 作為開發核心，深入到更多的細分應用場景，連通 macOS 和 iOS ，iPadOS 的定位看似曖昧，實則在這個多元和高度垂直的時代，幫蘋果趟出了第三條路。
iPadOS 的新布局看起來終于不那么 iPhone了，原有最左一屏的小組件匯集到主屏幕之后，看起來越來越有桌面的意思的。
……專為多點觸摸的顯示屏而設計，通過直觀的手勢實現多任務……它現在被稱為iPadOS。
這是蘋果給 iPadOS 所寫的出道宣言。
比起 iOS 12 時代更強的分屏模式，發布會現場演示的時候，展示了使用托拽在多個應用之間快托拽內容和元素的操作，多屏互通效率極高。
而多任務不僅僅體現在多個應用之間的互動，同一個應用同樣可以多屏存在——也就是我們常說的多任務。比如打開兩個「提醒事項」應用，在兩個筆記之間，來回編輯內容。點擊Dock 中的特定應用圖標，你就能看到它到底開了多少個頁面。
仔細想想，這是不是和桌面端的系統的邏輯越來越接近了？
想成為了一個獨立的設備，iPad 在用戶輸入端的短板需要補足，而為了解決這一問題，蘋果為 iPadOS 精心定制化了一套組合拳：編輯手勢，輸入提速，外設支持。
快速輸入是 iPad 的短板之一。不借助鍵盤而能快速輸入的方法之一，就是單手快速輸入。蘋果在iPadOS 上使用了一個全局的小鍵盤，使用雙指捏合快速呼出，全局浮動，使用QuichPath 滑動手勢輸入法，減少輸入的難度。這就是使用輸入法和鍵盤輸入提速的方法之一。
長段落或者是其他內容，又要怎么編輯呢？蘋果巧妙地將 Macbook 系列觸控板的三指手勢微調了一下，給遷移過來了：三指捏合是復制，三指散開是粘貼，而三指滑動是撤銷。
而輔助快速編輯手勢的， 是智能選取功能，光標定位比以往更加智能和精準，把編輯輸入的最后一個短板也給補上了。
iPad 的多點觸摸屏幕本就支持大量不同的手勢，功能支持不是難點，難點在于用盡可能少、且認知度足夠高的常見手勢，以的認知負荷，讓用戶更快上手，更舒適地做到各種各樣的事情。
以觸摸為核心的交互，以及的指針的交互，在iPadOS 上交匯了。這種交互模式無疑是實驗性的，但是這也是未來所有的移動端和數字產品的設計者都要考慮的問題，而iPadOS 就是最重要的試驗田。
當然，外置鍵盤輸入也并不是難事。iPad 本身的配套鍵盤套和第三方藍牙鍵盤，多數有輸入需求的用戶都已經購置了，為此，蘋果給iPadOS 搭配了豐富的快捷鍵，來輔助輸入：
當然，輸入這件事情上，Apple Pencil 也是非常重要的組成部分。蘋果將系統自帶的備忘錄應用進行了重設計，其中很大一部分原因，就是為 Apple Pencil 提供更為強大的繪圖功能：
這樣一來，即使你沒有購買第三方的繪圖工具，同樣可以用它畫出足夠漂亮的插畫作品。除了特定APP中的手寫輸入和繪圖這樣的使用場景之外，Apple Pencil 還作為日常截圖批注的主力，方便日常作筆記：
更好的輸入，最終的目的，始終是為了更好地輸出內容。
iPadOS 的野心很大。作為一塊10英寸上下的屏幕之內的操作系統，它作為內容承載的硬件，是一個很合理的想象，不然也不會有那么多開發者一直在開發將iPad 作為外接屏幕的應用，而現在，用戶只需要連上Wifi ，它就能作為 Mac的外接屏幕。
打通了這一個環節之后，后面的事情就自然而然了：Apple Pencil 可以在屏幕上畫畫，這樣一來，它很自然而然就成了手繪板。發布會上，蘋果官方所放出的圖片當中，涵蓋了多數設計師都在使用的設計軟件，其中不乏 AI、AE、Pr、Sketch、C4D、Zbrush 這些大熱設計工具。
更重要的一點在于，Apple Pencil 原本 20ms 的反應延遲，在這次的更新之后，將會達到9ms，反應速度提升了一倍以上！它已經是一個稱職的手繪板了。
有意思的地方在于，并沒有 PS。為什么？答案很簡單啊，iPadOS平臺上的原生 PS 馬上就要來了啊！連上Adobe 的創意云，兩個平臺又呼應上了……
畢竟，想要打通細分的應用場景，iPadOS 是需要自身具備強大生產力的，這意味著大量的獨立功能、服務和應用支撐。
想要 iPadOS 能夠獨立完成視覺創造的工作，對于多種字體的支持是肯定需要的。在iPad 上獨立運行 Photoshop 也同樣是需要這樣的功能支撐的，所以，干脆官方提供支持了：
而值得注意的是，作為一個設計公司，蘋果的想象力并不止于此。這次更新的功能當中，有一個非常引人矚目的功能是 SF Symbols。
蘋果將1000多個常見的 iOS 和 macOS 的圖標和蘋果官方的舊金山字體融為一體，這些圖標和符號支持 iOS 13、iPadOS以及的 watchOS 6 和 tvOS 13，而且你還可以在官方的文檔支持之下，自己創造！
具體可以戳這里了解：SF-symbols 使用文檔
完全獨立的 iPadOS 將會需要好好管理本地和云端的文件系統，官方將文件管理器進行了升級，確保它無需借助另外一臺電腦來完成操作。
核心應用沒有問題，和外接內容進入口也要一并升級。功能強大的 TypeC接口能夠直接讀取U盤和存儲卡：
而作為主要的瀏覽器，Safari 瀏覽器也向著桌面端瀏覽器的方向進了優化和調整，比如支持下載：
此外，圖片、照片和視頻的本地管理和剪輯功能，也一并進行了升級，這也是為了讓iPad 能夠成為一個更加獨立的產品而存在。
而真正改變游戲玩法的東西，在開發和設計上。
多年以前，蘋果為了統一全平臺的應用開發，開發語言從原本的 Obj-C 遷移到自家的 Swift 語言。隨著移動端應用量的快速增長，移動端的應用數量其實早已超過 macOS 平臺的開發數量和頻度，這種變化也催生了 Project Catalyst。
圖片來自 engatget
這個名為「催化劑」的項目的目標是希望開發者可以更加便捷地將 iOS 應用遷移到 macOS 上，比如說 Twitter 的開發者只花了幾天時間，就將現有的 iOS APP 遷移到 macOS 上。緊隨其后，成千上萬的移動端應用將都可以逐步地反哺到 macOS 上。
但是 Project Catalyst 只是權宜之計，真正治根又治本的東西，則是這次的新的UI框架，SwiftUI。SwiftUI 是一個典型的原生應用框架，是蘋果在磨合了上十年的經驗之后，所創造出一個的UI開發框架，開發者僅僅只需要極少量的代碼和交互式的設計，就能夠調用這一框架。這一改變對于 iOS 平臺的設計和開發都會有直接的影響。
在現場演示的時候，原本復雜無比的開發代碼，在換用 SwiftUI 之后僅需幾行代碼聲明就可以搞定：
新的 Xcode 11 當中，開發者可以使用托拽的方式來增刪組件，而右側的實時預覽則能夠呈現每一點改變。而基于 SwiftUI 的代碼開發模式，可以快速復用遷移到整個蘋果的產品平臺上，比以往任何時候都要快：
關于SwiftUI 的相關文檔：https://developer.apple.com/documentation/swiftui/
官方教程：https://developer.apple.com/tutorials/swiftui/
在新的 iPadOS 和 iOS13 中，系統的整體速度和性能得到了進一步的提升，解鎖速度提升了30%，啟動速度是以往的2倍，而應用的容量也比以往要小。
對，深色模式也是蘋果這次 iOS 產品更新的最核心特點，甚至整個WWDC19 主題演講環節的整體視覺設計也是完全沿用這種沉浸感極強的深色模式視覺來進行構建的。目前蘋果的 HIG 當中 iOS 的章節中新增了 Dark mode 的章節，而 iPadOS 相關的系統的設計設計指南還未更新。
「在 iOS 13 及以上的版本當中，用戶可以選擇深色模式為默認的外觀風格。在深色模式下，系統界面、視圖、菜單和控件都會使用較暗的配色方案，并且讓前景元素更加鮮艷，確保突出。用戶可以選擇選擇深色模式作為默認的視覺風格，也可以通過設置，讓它在光線較暗的時候，自動切換過去。需要注意的是，深色模式可以讓人更加專注。在設計的時候，需要在淺色模式和深色模式中都進行測試，因為有些元素和配色在一種模式下可用，在另一種模式下并不一定適用?！?
蘋果目前在設計規范中所提供的設計要求相對比較簡略，感興趣的同學可以借助翻譯工具看一下：Dark Mode
如果你對于深色模式感興趣，我們還有文章提供給你：
由于目前蘋果官方暫時沒有更多的內容，我們可以把深色模式更多的內容留到今后來聊。
覺得社交網絡帳號登錄不夠安全？Google 和 Facebook 兩大巨頭在發布會上成了反面案例，蘋果適時地推出了自家的帳號登錄服務。
蘋果將產品和用戶之間的邊界劃分得非常清晰，包括借助 Homekit 為用戶提供基于本地存儲的安全服務，在網上登錄的時候使用經過加密的郵箱帳號，等等。
而被蘋果點名的兩家著名科技企業，Google 和 Facebook 也是在之前的 Google I/O 大會以及F8 大會上，相繼針對隱私策略、安全服務進行了提升。
如果你對于這些大會感興趣可以看看之前的文章：
和每年9月的新品發布相比，WWDC 的信息量一點都不小。尤其今年還有超贊的 Mac Pro，單開2篇文章都不一定聊得完。但是在我看來，和設計關系最緊密的產品，應該就是 iPadOS了。這個獨特操作系統，巧妙地卡在一個獨特的需求點上，它本身的設計和定位、用戶體驗的考量、服務用戶的思路、牽涉到的功能和服務乃至于它對于設計的影響，都是巨大的。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
我們已經生活在未來，那些曾經只出現在科幻劇太空飛船上的酷炫技術，如今正以不可思議的速度出現在汽車中。近年，一個量產車中出現了最令人感興趣的技術叫做抬頭顯示（Head-up Displays）。
雖然汽車 HUD 的出現讓人無比著迷，但它的交互設計和視覺設計卻與之相反。
為了解決這個問題，來自德國 Fachhochschule Potsdam 學院用戶界面設計專業的 25 名學生和老師經過多輪討論，最終總結出一系列新的觀點和想法，并將它們制作成高保真原型。
在這次設計作業中，25 名學生分別為寶馬、雪鐵龍、雷克薩斯、Mini、梅賽德斯奔馳、Smart、特斯拉和大眾等 8 個汽車廠商設計了接近未來概念的「HUD高保真原型」。
盡管不同的汽車廠商風格迥異且目標群體不盡相同，但駕駛者行車時的需求并沒有太大的變化。因此，一些內容會反復地在不同廠商的高保真原型中出現。
當使用圖形而不是數字來展示速度和速度限制時，駕駛者更容易識別和理解。
△ Smart —— 速度與當前的限速標準有關，且可視化。
△ 雪鐵龍 —— 地圖外側的圓圈是速度可視化的效果。當兩個進度條在頂部重合時，代表達到限速標準。©Marie Claire Leidinger、Jonathan Jonas、David Brandau
△ 大眾 —— 抽象的圖形代表速度和限速標準之間的關系。©Dominic R?del、Laurids Düllmann、Phillip Steinacher
△ 雷克薩斯 —— 速度被可視化，成為一條直線，限速標準在直線的中間，當車速超過車速限制時，直線變為黃色且車速線變粗。©Christian Franke、Sebastian Prein、Lennart Ziburski
HUD 可以容納儀表盤內容以外的其他信息，但這些信息應該用不同的圖形展現，且設計時需注意充分利用車窗顯示空間。
△ 特斯拉 —— 特斯拉的 HUD 展示儀表盤時速部分的簡化版。©Constantin Eichstaedt、Steffen Gabel
△ BMW —— HUD 不僅顯示車速，還顯示混合動力汽車狀態和活動。©Patricia Dobrindt、Simon Martin、Jakob Flemming
在不同場景下，車窗顯示中的內容可能不同，但都必須是非常重要的信息。顯然，大量的信息和裝飾物會將重要的信息掩埋，導致重要的信息不能被快速、有效地識別。
△ Smart —— 導航提示僅在轉向時出現，一些需要長時間顯示的信息，例如「預計到達時間」沒有被設計在 HUD 視覺界面中。©Cécile Zahorka、Fabian Archner、Sebastian Kaim
HUD 的視覺設計必須保證具有最大的對比度和清晰度，理想的 HUD 即使模糊不清，但仍然具有可讀性。
△ 梅賽德斯奔馳（左）、大眾（右）—— 盡管 UI 已經模糊不清，但重要信息，比如車速過快仍然可以識別。©left：David Rehman、Michael Dietz、Thomas Petrach；©right：Dominic R?del、Laurids Düllmann、Phillip Steinacher
與電影院昏暗的環境和純色幕布不同，HUD 投影的幕布是車窗，而車窗后的世界是復雜多變的，有時甚至有強烈的陽光直射車窗，這也使得 HUD 設計充滿諸多限制。
△ Mini —— 這一概念設計方案挑戰如何在多變的復雜車窗環境中設計常顯的菜單，菜單中包括導航、電話和音樂。©Kien Nguyen Canh、Moritz Kronberger
我們的研究報告顯示，許多駕駛者對一些我們以為對他有幫助的行為感到不滿，比如為了強調車速限制或其他交通規則而突然出現的警告信息。
的確，在駕駛者沒有建立「速度上升會導致某些問題」這一預期時，突然彈出警告信息是很突兀甚至冒昧的做法。
因此在 HUD 設計中提供一個過渡順暢的動畫也許是一個解決方案，比如隨著車速的上升，提示信息從相對緩和的提醒慢慢過渡到嚴重的警告會更加友好。
△ 梅賽德斯奔馳 —— 駕駛者超速越多，出現在車速圓環外部的紅色圓環越多。©David Rehman、Michael Dietz、Thomas Petrach
汽車儀表盤上，晦澀難懂的 icon 有著悠久的歷史，「紅色的三角形代表什么」。
這是因為以前的儀表盤是斷碼屏，文字的顯示較難，但最近幾年，液晶顯示屏在汽車上被廣泛應用，設計儀表盤的 UI 時，文字位置不再是一個問題。
另外，增加清晰的文字說明可以有效地降低用戶的學習成本。
△ 如果沒有文字說明，駕駛者很難明白大眾 HUD 中 Steinschlag（碎石塌方）的圖標代表什么。特斯拉 HUD 中低電量 icon 加上文字說明后也更容易被人理解。©left：Dominic R?del、Laurids Düllmann、Phillip Steinacher；right：Constantin Eichstaedt、Steffen Gabel
最近在研究汽車 HUD 設計，偶然間發現這篇文章中的一些細節，對自己正在著手進行的 HUD 設計很有參考價值，所以著手將它翻譯下來，分享給大家，希望也能給大家帶來一些幫助。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
有句話叫：神造了世界，荷蘭人用設計造了荷蘭。到底怎么回事呢，今天我們一起來揭曉。話說現代主義設計的形成如果要追溯，離不開三駕馬車，分別是德國包豪斯、俄國構成主義跟荷蘭風格派，而荷蘭的現代設計起源跟荷蘭風格派分不開，包豪斯及俄國構成主義我們均已在之前的分享里詳細談過，所以今天我們聊一聊最后一架馬車 —— 荷蘭設計。
相比英國、美國及日本，荷蘭這個國家于大家而言未免有點陌生，但如果在歐洲設計圈，國家之間要投票排坐次的話，撇開愛國熱情，荷蘭挺進前三甲是毫無問題的。至于設計水平發達的原因有幾種說法，其中廣受公認的是因為荷蘭的生存空間太狹窄。
荷蘭 41000 平方公里的土地上容納了 1675 萬人口（2018數據），成為人口密度最高的國家之一，因為缺乏土地資源，所以在 1920 年政府動手排干一個叫伊塞米地區的海水，形成低于海平面的人造陸地，是歐洲最大的填海工程之一，項目成功后的荷蘭故技重施，陸陸續續進行填海，最后有四分之一的陸地是低于海平面的，所以整個國家在跟大自然搏斗中不得不進行各種設計思考，否則生存都成為問題，所以荷蘭設計總體而言發展到當代是特別功能主義及理性主義的。
所以荷蘭可謂是「因設計而生的國家」。
荷蘭位于西歐，東接德國，南接比利時，有悠久的文明歷史，文藝復興之后還曾經一度是海上霸權國家，比方說印度尼西亞就是它的殖民地之一。第二次世界大戰后的荷蘭開始高速發展資本主義，經過幾十年進取，進入了「世界最富有國家」俱樂部。
荷蘭的社會福利在江湖上令很多國家聞風喪膽，比方隨便列舉的三個第一：
這樣可能有點不夠具體，我羅列一個兒童福利的具體數據，比方小孩從出生至 18 歲，政府每月發放約 300 多歐元（大致2500元人民幣）兒女金，政府補貼兒童日托或幼兒園的費用達 70％，而且從小學到大學一直享受超過學費的現金補貼。說白了就是以各種不同形式給你錢花，等于說父母只是負責生，政府來養，甚至一不小心還能賺到錢。
荷蘭是一個工業高度發達的國家，擁有 1891 年成立的百年跨國大企業飛利浦，全球員工 13 萬人，在 28 個國家擁有生產基地，所以飛利浦是荷蘭的國家電器制造業中心，同時也是歐洲及世界最大的電器企業之一，它的設計系統非常完善，屬于戰后早期成立內部設計部的大型企業之一。設計帶動了整個公司的發展，甚至在戰后一度成為荷蘭的經濟核心，能與德國的 AEG（德國現代設計之父彼得貝倫斯設計世界最早的VI系統就是AEG）及西門子公司競爭，其中荷蘭有 45% 的出口產品都是飛利浦公司的，所以地位非常顯赫。
由于荷蘭的「風格派」設計過于知名，所以一談荷蘭設計大家都認為是紅黃藍這種類型，也正因為如此所以很多荷蘭當代杰出的設計師往往不為荷蘭以外的設計界所熟知，但其實這不能完全怪罪風格派，造成這個狀況還有一個更重要的原因，就是荷蘭政府跟社會都太過重視設計了。
除了設計師本身，荷蘭很多產品也沒有被世界普遍認識，比方汽車，荷蘭有一個跑車品牌叫「世爵（spyker）」，在中國基本看不到，我在網上找了很久才找到一個深圳二手車信息：
這臺 09 款的汽車原價 550 萬，9 年后仍需要 200 萬出手。沒錯，「世爵」的跑車全部只做純手工定制，所以只服務美國、西歐、中東及一些小型而富裕的國家，比方瑞士跟摩納哥。我們也可以從下面的圖片感受一下荷蘭的奢華汽車設計，還有純手工打造的內飾質感。
因為設計與荷蘭的國計民生密切相關，大量的圍海造田，強大安全的排水系統，農村的防潮汐堤壩、擁堵城市的合理交通網絡，都需要高水平的精心設計。荷蘭人民的歷史就是一場以設計建立生存空間的斗爭史，荷蘭的鹿特丹布寧根博物館館長威廉·科羅威爾曾經說過：只有依靠設計，我們才能使我們的國家成為一個可以日夜生存的地方。
所以荷蘭設計師在國內地位非常高，也因為如此設計市場非常繁榮，所以單單政府與市場需要消化的設計項目就忙不過來，也就少到其它國家行走，自然在名聲上也相對局限。
荷蘭政府對設計的重視猶如中國人對面子的重視，我們搞的是面子工程，而他們搞的工程都是面子。
比方以下幾個荷蘭本土項目，被視為世界上「教科書級」的設計范本。
荷蘭的貨幣設計
全世界的貨幣設計都有一種無言的默契，就是愛使用名人肖像為設計的中心元素，而荷蘭的貨幣設計是第一個打破這種規則，不使用任何人物的。如果一個國家并非重視設計行業，并非充分尊重設計師的話，這完全是匪夷所思的事情。
荷蘭的貨幣由財政部統一管理，在荷蘭財政部當中的設計管理部門的提議與組織下，聘請了荷蘭最知名的平面設計師來參與，其中也有不少獨立設計師，比方在去年很遺憾離世的荷蘭紙幣設計大師奧克斯納，他曾經在 1964 年受邀參加紙幣設計，他回憶說：每種面額紙鈔的設計周期需要 3 年，所以當最后一種面額投入流通，距離我剛剛開始紙鈔設計工作相隔整整 30 周年。
不以人物為中心的荷蘭貨幣設計主要是使用抽象圖案進行創作，體現出荷蘭從「風格派」以來的立體主義、構成主義形式傳統，所以世界上有諸多收藏家是專門收藏荷蘭紙幣的。比方 250 吉德（荷蘭貨幣單位）被視為藝術品，極具收藏價值，這是世界貨幣設計中的一種創舉。
荷蘭西佛爾國際機場
荷蘭的首都阿姆斯特丹國際機場又稱為西佛爾國際機場，它的設計面貌完整代表了荷蘭戰后政府對于基本建設及現代設計的積極態度和正確引導。
荷蘭長期以來一直沒有卷入地區性或者世界性的戰爭，比方第一次世界大戰它始終保持中立，但無奈第二次世界大戰中被德國短暫占領，時間為 1940-1945 年，隨后繼續獨立。西佛爾機場就是戰后 1967 年 4 月建成及投入運營的，當時世界各國都在著手建立自己的國際機場，但是一個為世界服務的現代化機場需要什么特征與設計考慮呢，幾乎沒有一個國家可以拿出成熟方案。
荷蘭政府牽頭組織了大量社會的優秀設計人員，技術人員成立項目組，充分考慮機場未來的交通流量、國際乘客的共同性要求及乘客特征，盡量讓機場達成中性、合理、理想等設計特點，跟著名的國際主義設計特點吻合，達到了能為廣泛乘客服務的目的，機場落成之后在整體性與功能性上都讓歐洲國家感到震驚。這座巨大的標志性建筑在建筑設計、室內設計、平面設計及導視設計等方面所具備的現代主義風格在長達 20 年的時間里，都成為歐洲國家設計國際機場時的重要參考。
荷蘭鐵路系統
荷蘭的鐵路系統是在機場完工之后相繼落成的，荷蘭設計有一個非常厲害的特點就是總體化規劃。如果設計師是演員，那么總體化規劃就是導演技能，荷蘭設計師善于此道，所以它的鐵路系統視覺化高度統一，形象與導視系統清晰簡明，功能性強，而且設計項目中包含的內容非常多，比方火車廂、火車站、客戶內部、車票、路牌、標識、乘務員制服等等，所以如果缺乏總體規劃，這是一項難以出色完成的設計工作。
經過一段時間的運營，荷蘭的這個鐵路系統在效率、安全性、舒適性上在全球都名列前茅，甚至被評為世界上設計得最完善的鐵路系統。
荷蘭的設計業為何如此的發達成熟，原因總的來說有幾個方面，國家相對比較小，擁有悠久的藝術歷史；擁有倫勃朗、梵高、蒙德里安等世界知名的藝術家；同時經濟富裕，需要通過設計與自然搏斗等幾個因素綜合起來，形成一個具有很濃厚創作性的社會氛圍。
其中尤為重要的還有荷蘭政府對文化事業非?？犊纬梢粋€寬松的文化贊助系統。設計師在一個資金充裕的環境里工作，很多時候不太需要考慮經濟效益，所以更加專注于設計的合理性及藝術性上，自然就有更高層次的輸出。
談到荷蘭設計自然無法繞過其標簽式的「風格派」運動，因為當代設計其實受其影響非常深遠，下面來聊一聊荷蘭的風格派產生、特點、代表人物，及對現代設計的影響。
荷蘭風格派設計及其相關的一些大咖已經在之前的各種分享當中客串走場，比方杜斯伯格出現在包豪斯的分享，蒙德里安出現在俄羅斯的構成主義分享等，今天他們終于要唱主角了。大家經過今天的了解，就會發現風格派一直以來都不容小覷。
首先我們來了解一下，風格派的特點是什么。其實風格派單單看名稱就特別牛氣，比方我們會說這個汽車叫奔馳，或者這個汽車叫捷豹，不會說這個汽車就叫汽車，然而當我們說起風格派時跟這個汽車就叫汽車一樣，這個風格派別就叫風格派。
風格派有一句名言，出自杜斯伯格，叫「剝去本質的外形，你就會得到風格?！?
這句話有點抽象，但有這種感覺已經對了，因為風格派確實是抽象的，而且屬于「冷抽象」。關于冷熱抽象這個概念大家可以回顧我們之前的分享《用一篇超全面的好文，帶你了解俄羅斯設計史的前世今生》，因為這種冷是相對俄國康定斯基的熱抽象而言的。
冷抽象大致是這樣的：
這是多數人對風格派的一種理解及印象，說白了就是紅黃藍三原色的組合設計，然后很多縱橫錯落的線條。因為風格派幾乎沒有曲線，直線讓人感覺很冷靜，很理性，很穩定，所以被定義為冷酷抽象。
我們再看看下面這幾個圖：
其實這也叫風格派設計，但并沒有出現紅黃藍，所以風格派設計一定就有紅黃藍是一個認識誤區，其實風格派的形式定義是這樣的：
把傳統建筑、家具、產品、繪畫、雕塑的特征完全去除，變成最基本的元素集合，甚至把某個元素單獨孤立起來絕對化，這些元素最后基本都以幾何形態呈現，形成簡單的結構組合，強調縱橫運用及不對稱，并且只使用三原色及黑白色（極色）。
看完這個解釋再回味杜斯伯格那句「剝去本質的外形，你就會得到風格」就相對好理解了。
那么這種風格到底是怎么形成的呢？這不是源于某一個人，某一個時間及地點，它就像一個集體完成的雕塑，其實大部分的風格都是如此，但自然離不開一些關鍵的大咖。
在敘述這些大咖之前，我們先來了解一下時代背景，是在什么樣的外部環境中孕育了風格派。
第一次世界大戰 1914-1918年期間，歐洲列強為了重新瓜分殖民地及爭奪世界霸權而打得不可開交時，位于西歐的荷蘭宣稱保持中立，歐洲列強自然清楚荷蘭曾經也是海上霸主及殖民地大國，不是省油的燈，所以荷蘭就在一戰期間獲得了安靜發展文化的環境。
由于中立，荷蘭成為歐洲各國藝術家的避難圣地，一時間人才濟濟，各種野獸主義、立體主義、未來主義等現代探索名家開始紛紛在此聚義，趁世界大亂之際研究如何形成一種新的藝術形式。
這個時候出現了一位人物，叫托馬斯·里特維爾德，他 1888 年生于荷蘭烏得勒支，是一位木工的兒子，從小自學繪畫，后來從事建筑設計。似乎那個年代的設計師都是建筑設計師起家，或者具備建筑設計技能，就好比當代很多 UI 設計師都是平面設計出身居多，這也屬于時代發展一種特征。里特維爾德在 1917 年做了一件大事，設計了一個劃時代的椅子叫「紅藍椅」，這個椅子被視為家具設計史上第一件現代家具，在色彩計劃上就是紅黃藍加極色（黑白）。雖然是一百年前的椅子，但就算放到當代展覽館也一點不顯得過時。
紅藍椅整體是木結構，13 根木條互相垂直，組成椅子的空間結構，結構間用螺絲緊固而非傳統的榫接方式，最初曾經是灰黑色的，后來里特維爾德希望用單純明亮的色彩來強化結構，于是參考了蒙德里安的三原色風格，而且被認為簡直是蒙德里安《紅黃藍相間》這個繪畫作品的立體版。椅子就這樣產生了紅色的靠背和藍色的坐墊，但手和椅腿仍保持黑色，少量黃色被用來強化端面，于是成了一個典型的風格派作品。
但這個作品其實歷史意義與形式主義大于其功能意義，因為很多有機會試坐這個椅子的人都感覺坐得很不舒服，特別對腰椎間盤突出者來講簡直是災難。我們很多時候衡量一個設計作品的好壞主要是兩把尺子，就是形式與功能，有時候很難去界定哪一個更加重要，但總的來說很多人是能夠忍受形式上的缺憾而無法忍受功能上的不足。比方你可以忍受一對鞋子顏色不太滿意，但無法忍受它比你的腳少了3碼，所以很多時候這兩者是優先級問題，假設三對鞋子都合腳，那么你選擇的時候形式就很重要了。
在設計紅藍椅之前里特維爾德還是一個無名之輩，他的工作仍然以建筑及室內設計方面為主。比方為一名與丈夫分居的女子設計房間，讓這位女士對其設計水平非?？隙āＶ钡?1917 年后里特維爾德成名后，這位女士也成了寡婦，憑借過往交情，她希望里特維爾德能為其孤兒寡母再設計一棟生活的寓所，并且任由里特維爾德發揮，于是歷時五年這個房子在 1924 年落成，就是歷史上非常著名的「施羅德住宅」：
而經過五年相處，里特維爾德與這名女士日久生情，兩人談起戀愛并且在這座共同完成的房子生活了一輩子，直到 1964 年里特維爾德去世，而這名女士一直在這所房子里活到 95 歲。這是繼上一期《用一篇超全面的好文，帶你了解英國設計史的前世今生》里威廉莫里斯與簡伯頓之后第二個關于房子的浪漫故事。
我們可以看看房子內部，簡潔的體塊，大片的玻璃，明快的三原色，錯落的線條，被視為現代設計建筑及室內設計教科書級的作品，同時也是風格派建筑當中重要的代表作品之一。
其實在我印象中，似乎九十年代初的廣東地區有很多住宅或者室內設計是模仿了這種風格的，特別是一些工裝設計，所以一直有種莫名的熟悉感，而且也分不出是在電影里看到還是現實中見過，不知道屏幕前的廣東朋友有否有同感。
跟里特維爾德差不多時期，有一名畫家叫萊克，畫風是這樣的：
很多人第一眼看到這種作品通常都會驚呆，他將很多視覺元素降低到了的界限，基本上就是使用三角形、四邊形跟不規則的多邊形來表達，可謂是將設計上的減法做到了。網上已經很難找到這位畫家詳細的資料，但當時風格派已經形成氣候，所以很多人都開始使用這種風格來進行探索。
△ 萊克
很多人看到風格派的表達形式時都覺得很容易偽裝，其實這種想法是很天真的，比方我們看看內地某個房產項目在模仿風格派時的建筑效果圖，就明白東施效顰的含義了。
風格派有另外一個別稱叫新造型主義，至于風格派的形成除了客觀的一戰時代背景外，也跟其核心思想有關，曾經有一種分析認為，風格派的的思想與哲學里的「二元論」有關。簡單來說二元論就是物質與精神都是世界的本原，好比風格派里堅持使用的橫線與豎線，但是把設計說到這個份上就很容易上神壇，而且很多時候也是后來者的一種臆想或者牽強附會，這并非史太濃傾向的敘述方式。風格派里的重要人物蒙德里安有過一些接觸通神論的經歷，所以他認為設計與藝術是一種純粹自我的精神表達，因而放棄寫實風格，而重視內心世界的表達一直是荷蘭人的一種藝術特色。
總結一下風格派作品的三個特點：
關于三原色的選用我最后多說幾句，就是設計上的三原色特別像音樂當中的主和弦、下屬和弦及屬和弦，比方 c 調當中的 c、f、g，這統稱正三和弦，在自然調式當中基本一首歌用正三和弦就可以基本演奏完整。
而很多時候很多老設計師都會跟新手強調一個 Logo 不要超過三種顏色，或者說一個頁面的主色不要超過三種等等，是否說明藝術間冥冥之中存在的同構。
這些留給愛設計又愛音樂的朋友慢慢思考。下面就聊聊荷蘭設計當中兩個最重要的人物，也是風格派當中最重要的兩個人物 —— 蒙德里安與杜斯伯格。
在荷蘭的現代設計當中，有兩個人物無法繞開，那就是風格派里的 twins，杜斯伯格與蒙德里安。根據出生年份，蒙德里安是比杜斯伯格年長 11 歲的，長者為尊，所以我們先來聊聊蒙德里安。
去年荷蘭搞了一個活動，叫「風格派100年」，意思是從 1917 年開始計算到 2017 年，而海報上面就用了一個人物，就是蒙德里安，而且最后還將 2017 年定為「蒙德里安年」。
但其實按歷史上的蓋棺論定，風格派的創始人是杜斯伯格，那為什么不放他呢？其實原因很簡單，蒙德里安比杜斯伯格紅。
△ 杜斯伯格
蒙德里安最廣為人知的特點自然就是畫格子跟討厭綠色，畫格子好理解，但為什么要討厭綠色呢？他討厭綠色的程度是要將家里的綠色植物的葉子涂成白色，至于為什么這樣始終是一個謎團，但是多數人接受的一個答案是，他討厭自然。
蒙德里安被稱為「一輩子畫格子的男人」其實是一種誤解，他并非一開始接觸畫畫就畫格子，反而是畫他后來被認為很討厭的大自然，比方荷蘭風車，教堂，蘋果樹，色彩鮮明，造型準確，所以 20 出頭已經是繪畫界的一股清流及潛力股，但為什么后來他變了呢，據說是因為一個男人。
這個男人出現在 1911 年，那就是西班牙鼎鼎大名的畫家畢加索先生，畢加索和布拉克在荷蘭的阿姆斯特丹舉辦了一場立體主義畫派展。在設計史太濃當中如果大家注意一些年份數字就會發現原來如此多的大師是在同一個時期存在、彼此認識或者彼此影響的，如果要歸納原因只能說是一種時勢造英雄，因為時勢的形成會讓一些有共同特點的人同時順應機會出現，比方中國 90 年代的搖滾人物，及后來中國互聯網創業大潮中的騰訊百度及阿里巴巴等，都成為順勢而為的既得利益者。
蒙德里安參觀了畢加索跟布拉克的畫展，被他們的作品感動到一塌糊涂，因為立體派講究的立體事實和明確客觀都是蒙德里安當時希望追求的目標，于是他那根潛在的抽象神經開始膨脹和律動，他如饑似渴地吸收著立體主義的養分，同年畫出了一張習作叫《灰色的樹》。畫中的樹帶有一些橢圓形構圖，這是模仿了畢加索與布拉克的立體派風格，但其仍然帶有不少具象元素，而他在 1912 年創作的相似尺寸的樹系列習作《花叢中的蘋果樹》（Apple Tree in Flower）中，雖然大致構圖和《灰色的樹》很相像，但這幅畫已經明顯更加抽象，更具形式感，畫面被一個個小的塊面魚鱗般拼接起來。
坦白說從《花叢中的蘋果樹》開始，蒙德里安就不容易看懂，這個時候的蒙德里安去了巴黎發展，因為他覺得那邊的環境更加適合從事藝術探索，在法國巴黎他遇到一群同他一樣在尋求現代性、革新藝術形式的藝術家、作家、思想家，對他的蛻變產生了不同程度的影響。
隨著對立體主義的探索跟創作，他又慢慢覺得立體主義仍然達不到自己想要的純粹實在，他希望有更加本質的表達。
在巴黎的那段歲月后期蒙德里安已經開始嘗試從立體主義繪畫變成一個畫格子的男人，只是這個時期的格子一般都沒有鮮明的顏色，體現的只是類似音樂里的節奏與韻律。玩熱抽象的康定斯基和玩冷抽象的蒙德里安都十分熱愛音樂，他們都曾借用音樂的概念放到自身的創作上，比方節奏與韻律?？刀ㄋ够旧砭褪且幻麡I余大提琴手，而蒙德里安人生中最后的一張作品就叫《百老匯爵士樂》。
1914 年時候，蒙德里安因為一戰世界大亂所以回到荷蘭，遇到他生命中第二個重要的男人，就是杜斯伯格，兩人在抽象藝術上有很多共同話題，越來越欣賞對方，于是決定組隊一起玩。他們在一次很偶然的機會中見到一名彩色玻璃藝術家的作品，其中僅僅使用三原色的色彩計劃讓蒙德里安深受啟發，而這個時候時間已經去到 1917 年，他跟杜斯伯格創立了一本奠定風格派江湖地位的雜志，就叫《風格》。而這一年也正是里特維爾德創作「紅藍椅」的同一年，而更準確的說法是，這個椅子在早幾年已經創作出形態機構，而受《風格》雜志的影響，才涂上了紅藍黃顏色，不知道這算不算靠蹭熱點成名的典型案例。
這個時候的蒙德里安就開始一直創作不同的紅黃藍格子畫，這些畫甚至連名字都懶得改，基本就是《紅黃藍》大哥，二嫂，表弟，堂弟之類的關系，普遍以《紅黃藍構圖》加數字來命名。我們看到這批作品時，會想這不就是扁平化風格的鼻祖大師嗎？
好了，這個時候我們要留一點戲份給杜斯伯格，杜斯伯格 1883 年出生于荷蘭的烏得勒之。他在早期撰寫過寓言、劇本以及通過臨摹博物館的名畫自學繪畫。25 歲那年，他首次舉行個人作品展。其后，他開始發表藝術評論，創作詩歌作品《滿月》，說明是有文學根基的。自 1916 年（33歲）起，他參加了先鋒派的所有重要活動，這個時候他已經認識了回國的蒙德里安，隨后和他在荷蘭萊德創建「風格派」及其同名雜志。
△ 年輕的杜斯伯格
所以嚴格一點來說，杜斯伯格類似搶注域名的性質，這個風格可以說是他跟蒙德里安一起探索形成的，但是他拿到了奠基人名分，當然我們也可以看看杜斯伯格的作品，其實跟蒙德里安的作品非常接近，都喜歡玩格子，區別是我們會在他的作品中看到一樣差異，就是他玩了斜線與對角線，這一點后來導致了他跟蒙德里安的決裂。
這個時候時間已經去到 1920 年，也就是德國包豪斯也已經成立了，而蒙德里安在跟杜斯伯格鬧翻后去了巴黎，在巴黎他因為這種全新的藝術形態加上不斷通過寫作、演講、發表作品等方式而成了大名，并成為風格派的代表人物，所以在搶注域名這個競爭中，蒙德里安順利地掰回了一局。
而 1921 年時候杜斯伯格也開始到德國包豪斯參觀，期間他對這所學校非常感興趣，甚至決定將《風格》雜志遷移到包豪斯來出版，他在講學中高度贊揚包豪斯的行動，卻又同時批評包豪斯的發展方向，他的《風格》雜志就類似現在的自媒體大號，擁有非常巨大的影響力，所以這對格羅比烏斯也造成困擾，這也是杜斯伯格一直以來的性格，就是性情變幻無常。當時正值俄國構成主義觀光團在德國游學，他可以當天對他們的作品高度贊揚，但是隔天又提出猛烈批評，完全不按常規套路出牌。另外關于他的一些故事也可以詳見《用一篇超全面的好文，帶你了解包豪斯的前世與今生》，他跟包豪斯的伊頓在著裝上喜歡一黑一白，相映成趣。
包豪斯里有一位著名的教員叫費寧格，他倒是喜歡杜斯伯格直接凌厲的性情，因為杜斯伯格雖然不按常規套路出牌，但是批評的時候理據都非常充分，而且杜斯伯格本身具備深厚扎實的藝術素養，并且當時他擁有自媒體大號，被他罵也是出名的一種渠道，所以費寧格建議格羅比烏斯可以游說杜斯伯格干脆在包豪斯開課程，成為特聘教員，開明的格羅比烏斯同意了這個建議。
但是這樣導致了包豪斯一場噩夢，因為杜斯伯格雖然在藝術理論上有主張，但是教學上傾向無政府主義，說白了就是完全不服從組織的管理與安排，在當時位于德國魏瑪的包豪斯搞結構主義與達達主義大會，但是在教學上這些激進思想并沒有給學生帶來太多實質性的支持與幫助，課堂上的杜斯伯格大吵大叫，而他的夫人則在一旁用鋼琴演奏構成主義的非調性音樂。關于什么是無調性音樂，大家可以看看網易音樂里的評論：
所以現場非?；靵y，簡直無法進行下去，而且他還經常在包豪斯的課堂上批評包豪斯是非理性的，是浪漫主義的，而自身卻在進行非理性的行為。于是在 1922 年，格羅比烏斯跟其他教員都實在無法忍受，決定由格羅比烏斯為代表對杜斯伯格進行勸退，最后杜斯伯格雖然是離開了包豪斯，但很快就在包豪斯附近建立自己的培訓學校，他傳授「風格派」抽象主義藝術思想與創作原則，這也吸引了大量的包豪斯學生前去聽他的講學，但期間他繼續對包豪斯的教學方向進行批評，可謂非常執著。
但不管如何，杜斯伯格是將風格派思想帶到德國包豪斯的關鍵人物，他主張的「風格派」（style-less），期望找到更加簡單、更加國際的術語來建立國際風格基礎。
這種藝術觀點為包豪斯所吸納并產生重大影響，抽象藝術也因此逐漸成為現代設計的一種國際風格，引導了整個 20 世紀的產品造型。他其實也通過包豪斯提升了「風格派」在國際上的地位，所以相輔相成?！革L格派」也因此與俄國的「構成主義」、德國現代設計運動一起成為現代藝術設計運動的重要組成部分。
杜斯伯格與蒙德里安在個性及氣質上形成比較鮮明的對比：蒙德里安溫和且有耐性，總是緩慢前進，不斷精益求精；杜斯伯格則常常顯得沖動，性格中更多的是挑釁和攻擊，而較少有建設性成分。但不管如何，兩人仍是風格派中的 twins，缺一不可。
杜斯伯格 1931 年時候在瑞士去世，享年 48 歲，而蒙德里安 1944 年在紐約去世，享年 72 歲，相信兩人在另一個空間會再次不期而遇，然后冰釋前嫌重修盟好，繼續探討藝術與設計。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
我們在設計中除了接觸到圖形，還需要了解文字的設計。特別的文字設計或者排版可以使整體的畫面效果更加有氛圍，甚至超過圖形表達的感受，更加直觀地表達出內容的主旨。文字的設計方式有很多種，例如通過字體變形，結構重組等方式來讓文字變得更加特別，但往往會讓我們耗費比較多的時間。
因此我一直在思考有沒有一些既簡單又的設計方式來提高文字的設計感。在瀏覽國外的一些設計網站的過程中，做了一下文字設計形式方面的收集，并整理出十種我認為具有代表性的文字設計形式。另外還參考這些設計方式，使用中文字體進行了一些嘗試。
拉伸的處理手法，讓文字更具有張力，整體氛圍更具標題感和圖形化，但依然保留著文字該有的識別度。常見于純文字排版的海報，既滿足閱讀需要，同時具有設計感。
拉伸與文字本身的字形、字體有著很大程度的關聯，并不是所有的文字都適合拉伸，例如下面的案例。
1. 不同字體對比
從方案嘗試中看出，左邊字體在進行拉伸之后，文字本身的結構會遭到破壞，而右邊的效果可以較為接受。因此在設計的過程中盡量選擇可適用于拉伸的字體，另外在拉伸的過程中需要對細節重新處理，使字體保留原有字體的細節美感。
2. 不同字形的對比
從下面案例中對比，O 在進行上下拉伸的時候效果比較好，而左右拉伸的時候會失去字體本身的美感，而 Y 在上下左右拉伸后整體視覺效果都相對平衡。
3. 細節處理對比
優化字體線條的細節可以使得整體文字更加規整、方正（右邊）。而未進行細節的設計則會顯得筆畫參差不齊（左邊）。
4. 傳統與現代對比
傳統的字體拉伸后（如下圖中間的字體），字體本身的韻味就失去了，因此不建議對一些較為傳統的字體進行拉伸設計。
5. 設計嘗試
中文字的筆畫比較多樣性，因此在細節的設計上比英文來得更加復雜，在處理「撇、捺、點、折、彎、勾」時需要保持原本的筆畫結構性。
6. 拓展案例
結合實際要表達的內容，使用拉伸的設計手法，例如結合物體，疊加顏色或者交錯拉伸等。
虛實結合即為線面/陰陽的設計手法，通過虛實的處理，可以突出一組或一段文字中的重點信息。在一些強調主次的設計中，可以嘗試這種方式來做區分，線面結合的處理手法讓原有都是面的字體多了一些透氣感和空間感。
虛實處理的方法需要考慮本身字體的粗細，過分纖細的字體效果可能并不明顯。
1. 嘗試對比
從對比中，發現粗體相比于細體來得更加直接更容易出效果，對比明確。
2. 中文字體的嘗試
從嘗試中來看，與上面中的結論較為一致，較細的字體使用虛實結合效果并不理想。對于書法體的應用，更多需要考慮字體的收邊效果是否工整，收邊過碎，會影響在描邊之后的細節美感。
3. 設計嘗試
通過遞增或者遞減的設計手法，讓原本簡單重復的文字元素，變得更加具有層次感和節奏感，讓文字的生命力變得更加豐富多樣。
在設計的過程中需要提前規范好各個字體之間的差異關系及變化的效果過程。按照一定的數值倍數差異比進行變化。
1. 不同方式的嘗試對比
在嘗試的時候發現，粗細變化的模式可能更多會依賴于字體本身的模式。
2. 中文字體的嘗試
中文在使用遞進漸變的方式中需要考慮整體文字的結構感和塊狀感，由于字形較為復雜，整體視覺效果會過于零碎。
與遞進漸變接近但卻又有差別的文字設計形式。擴展變化的文字具有張力的同時有一定的速度感和發射性，就像向四周展開的波紋效果，具有延續性。
按文字的行高或者字寬作為基礎值，按一定的比例，對文字進行破形切割處理，上下左右進行擴展發散。
1. 比例值示意效果
2. 中文字體的嘗試
外觀的完整度還算可以，但由于中文本身自有的特性（筆畫較為豐富多樣），因此在擴展層次的數量上需要進行一定的控制，不宜過多，以短語或標題使用較好，避免過于形式而導致文字識別性降低。
3. 設計嘗試
文字作為紋理出現在畫面中，區別于圖形化的紋理。既有圖形感，同時可以輔助傳達一定的信息和態度。
在字體的選擇上盡量適用字形較為簡潔的字體，避免影響前景內容的展示。設計上可以結合其他的設計形式，例如虛實結合/拉伸變形/擴展變化等方式，提升畫面的豐富程度。
1. 中文字體的嘗試
常規的中文字體，整體效果還算不錯。但結合中國書法字作為底紋，可以讓整體的設計更具有不同于英文的設計感，整體效果更具有力量感，因此建議在設計中文底紋的時候可以大膽嘗試中文書法字。
通過疊加的方式，讓原本簡單的文字和背景產生了融合。既提升了背景的層次感，又讓文字變得具有設計感。
粗細的字體會產生不一樣的視覺感受，較細的字體會產生若隱若現的視覺效果，文字的識別性會稍弱，較粗的字體識別度基本上沒有太大問題，因此在設計的過程中可以結合實際的情況選擇不同粗細的文字。
1. 粗細對比嘗試
穿透的文字設計，對于打造設計的大片感具有很突出的視覺效果。例如漫威的電影片頭設計。
2. 中文字體的嘗試
結合不同的語意使用不同的字體，再結合穿透的設計方式，使畫面具有中文的文藝感。
3. 拓展案例
結合實際的內容設計，穿透文字的玩法還可以拓展出更多不一樣的設計，例如下面這些例子。
扭動的設計，讓文字具有曲線的動態感，提升了文字的裝飾性。不同曲線的動態變化，賦予文字不同的律動感。變形的文字并未影響到文字該有的識別性和閱讀感，卻具有了設計感。
如下面的三個案例，曲率的差別，賦予文字不同的動態規則，有不同的視覺感知，有時柔美，有時卻具有速度感。因此在設計的時候，可根據具體的內容設計不同的扭動趨勢。
1. 中文字體的嘗試
對比可見較細的字體使用扭動的設計，效果并不理想。由于中文筆畫的差異點，經過扭動之后整體外形較為不規整，而粗體的效果則較為規整，動態曲線趨勢也較為明顯。
2. 設計嘗試
扭動+虛實+底紋的效果。
3. 拓展案例
更高級的設計手法是利用自然環境的介質結合文字，起到扭曲的視覺效果。
與擴展變化有異曲同工之妙，文字通過一定的角度和位移間隔，由二維向三維的視覺效果進行變化，讓文字更加多變化和有重量感、層次感。
立體層疊的設計對于字體本身具有一定的要求，較為纖細的字體出來的效果并不理想。
1. 不同的字體嘗試
從對比中看出，細體或較細的襯線字體，層疊后會出現銜接不上或視覺黑點的情況（如下面左圖和右圖）。因此設計時建議使用粗體，并且整體筆畫較為平均的字體（中間的圖）。
2. 中文字體的嘗試
雖然具有了層次感和空間感，但也會讓整體變得更加復雜，因此需要根據文字的多少情況進行使用。
3. 拓展案例
立體層疊還不止單向的設計，例如可以進行軌跡變化，向外擴展層疊，或是增加一些顏色漸變來豐富整體的設計。
文字通過錯位，疊加，顏色變化，透明度變化，切割等方式的設計之后，具有故障的視覺偏差感受。整體視覺感知類似雙重曝光的照片，文字具有豐富的層次感。
顏色疊加的效果，對于顏色的選擇極為重要，兩個顏色交錯之間的顏色可以為過渡色或者互補色。
細體的效果并不理想（如上圖左邊第一個），建議設計的過程中使用較粗的字體，另外在使用的過程中需要考慮文字的識別度（如右邊的效果），重疊之后文字的識別度或多或是會受到影響。
1. 中文字體的嘗試
由于中文字比英文復雜，因此使用中文字在設計的時候，可以尋找一些共筆的地方進行重疊（如下圖左邊的設計），利用字體筆畫粗細一致的情況下，進行了邊與邊的重疊。另外在設計的過程中建議加大字間距，這樣可以避免不同文字的重疊，產生過度復雜的效果，影響文字的識別性（如下圖最右邊的設計）。
2. 拓展案例
在簡單的疊色之外，結合不同質感和肌理，可以讓整個文字具有不一樣的視覺感受。
文字按照立方幾何結構進行排版，通過顏色差異，陰陽，線面等方式設計處理后形成空間感和立體感。相比于平面排列的文字更具有空間感和層次感，提升整體畫面的設計感。
1. 設計嘗試
使用空間錯位結合虛實的設計，讓簡單重復的文字變得具有空間感和立體感。
2. 拓展案例
除了常規的空間打造，甚至可以融入到場景中或者結合物體本身的設計。
以上設計風格，常常會在一些運動品牌的設計中看到。例如，Nike 的設計中應到的文字，也會結合這些方式，來豐富和提高整體的設計感。
火箭隊出場片頭的字體應用，線形字體疊加漸變的效果，具有層次感又有未來感。
阿迪達斯的廣告：
Converse 的廣告：
Under Armour 的廣告：
除了一些品牌的設計，音樂唱片的封面也有應用到這些類型的設計手法。
我們除了在一些常規的媒介上會看到相關的文字設計，在這兩年的耐克或阿迪達斯的鞋子設計中，也會加入文字元素的設計，甚至球員會直接在鞋子上寫上文字。
文字設計的拓展疊加
文字的設計已經成為一種新的設計趨勢，結合實際需要表達的想法，對于設計手法進行活學活用是做出好設計的關鍵。當然只有掌握了基礎手法才可能做到舉一反三的設計思考。在實際設計的過程中，我們往往不會是單獨使用某一種方式，而是對不同的設計手法進行重組再設計，或者使用 2~3 種方式疊加設計來打造整體的畫面效果。如下：
在這十種基礎的文字設計中，通過結合發散可以迸發出遠遠不止于十種的創意設計。本次收集總結除了自身學習提高之外，希望可以起到拋磚引玉的作用，激發設計師對于文字的設計思考。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
動效有助于讓UI具有更好的表現力及更易于使用，盡管具有如此大的潛力，但可能由于它是UI設計家族中的新成員之一，所以它大概是所有設計學科中最不被大眾所了解的。視覺設計和交互設計可追溯到早期的GUI，但由于動畫必須由現代硬件來順暢的渲染，而且UI動效和傳統動畫之間的重疊區間也使得兩者之間的區分變得復雜。傳統動畫需要掌握迪斯尼的12個基本原則，那么這是否意味著UI動效也像傳統動畫一樣復雜？我經常能聽到人們說，動效設計很復雜，不知道如何選擇相對應的動畫模式，但是我認為至少在UI領域，動效設計是可以很簡單的。
從哪里開始
動效主要是通過UI元素之間關系過渡來幫助用戶瀏覽App。當然還可以通過使用圖標、勛章以及插畫動效來為App增色，但是建立產品可用性應該優先于增加動效表現力。在展示你的動效設計技巧之前，讓我們先從設計一個基本的動效開始，即產品導航之間的過渡。
過渡模式
在設計導航之間進行動效過渡時，簡單性和一致性是最關鍵的點。為了達到這個目的，我們將以下2種動畫模式中進行選擇：
1、基于容器的過渡。
2、沒有容器的過渡。
基于容器的過渡
文本、圖標和圖片等元素在容器內進行分組
如果動畫涉及像按鈕，卡片或列表這樣的內容，則使用基于容器的動畫設計，容器通常有很明顯的邊界，這種模式分為三個步驟：
1.使用Material的標準緩動為容器設置動畫（意味著它可以快速加速，然后逐漸的慢下來）。在下圖的示例中，容器的尺寸和圓角半徑從圓形按鈕動畫過渡到填充整個屏幕的矩形。
2.縮放容器中的元素進行寬度自適應，將元素固定在頂部但是仍然存在容器內，這樣在容器和內部元素之間創建了清晰的關系鏈。
*放慢動畫速度以說明元素在容器內如何縮放
3.隨著容器加速，在過渡期間逐漸淡出消失。當容器減速時輸入的元素逐漸淡入。當元素進行快速移動時，通過淡入淡出來實現元素的更替。
*放慢動畫速度以說明元素如何使用淡出淡出
將此模式應用于所有涉及容器過渡的動效，這樣會建立起來一致的動效規則。這樣還使得開始和結束之間的關系更加清晰，因為它們是由兩個動畫容器互相銜接的。為了展示這種模式的靈活性，這里將它分為五種不同使用場景：
*放慢動畫速度以說明容器如何連接開始和結束
有的容器只是使用Material的標準緩動從屏幕外滑入，它滑動的方向取決于與之關聯的組件位置。例如點擊左上角的抽屜導航，圖標將從左側滑動容器。
如果容器從屏幕邊界進入，則它會淡入并放大。它并不是從0％的比例制作動畫，而是從95％開始，以避免元素之間的過渡幅度太大?？s放動畫使用Material的減速緩動，這意味著它以峰值速度開始并逐漸減速停止。在元素退出時，容器會在沒有縮放動畫的情況下淡出。為什么退出動畫會有這樣微妙的設計呢，這樣做是便于將注意力集中在新內容上。
*放慢動畫速度以說明容器如何通過淡入淡出進行縮放動畫
沒有容器的過渡
有些作品將使用沒有容器的過渡來構建動效設計，例如點擊底部導航中的圖標，將用戶帶到新的頁面，在這些情況下，將使用以下兩個步驟：
1、起始元素通過淡出消失，然后最終元素通過淡入進入。
2、隨著最終元素逐漸出現，使用Material的減速運動來巧妙的展現。但同時縮放僅適用于新舊內容的替換。
*放慢動畫速度以說明沒有容器的過渡如何使用淡入淡出和縮放
如果開始和結束的組合元素具有清晰的空間或順序關系，則可以使用共享動畫來強化它。例如當下圖觸發導航組件時，開始和結束的動畫都在垂直維度進行滑動，這加強了他們的垂直布局。當點擊下右圖入門流程中的下一個按鈕時，從左向右水平動畫強化了序列進行的的概念。共享動畫使用Material的標準緩動。
*減慢動畫以說明垂直和水平共享動畫
最佳方案
把事情變的更簡單一些
鑒于其動畫頻率高低與產品可用性密切相關，導航過渡通常應該優先于功能展示。引人注目的動畫通常最適用于小圖標，勛章，加載或空狀態等元素。下面這個簡單的案例可能不會得到Dribbble的那么多關注，但是它更像一個真實的產品。
*放慢動畫速度以顯示不同的動畫風格
選擇合適的時間及緩動類型
導航過渡應該使用合適的時間，快速過渡優先考慮功能，但是速度也不要太快，防止動畫路徑迷失。根據動畫占用的屏幕比例來選擇動畫持續時間。由于導航過渡通常占據屏幕的大部分，因此300ms是一個比較有經驗的動畫時長。相比之下，像開關按鈕這種小組件動畫持續時間很短，大概在100ms左右。如果過渡感覺太快或太慢，請以25ms的增量調整其持續時間，直到它達到合適的動畫節奏。
Easing描述了動畫加速和減速。大多數導航過渡使用Material的標準緩動，這是一種不對稱的緩動類型。這意味著元素會快速加速運動，然后緩慢減速以將注意力集中在動畫結束時。這種類型的緩動為動畫提供了自然的感覺，因為現實世界中的物體不會立即開始或停止移動。如果動畫看起來很僵硬或死板，那么可能是由于你選錯了緩動類型。
*放慢動畫速度以說明不同的緩動類型
本文所說的動效模式在建立一種實用而又微妙的動畫風格。這適用于大多數產品，但某些品牌可能需要更激進的動效表達。要了解更多有關動效的內容，請閱讀Material motion指南。
一旦處理好了導航之間的過渡動畫，在你的產品中添加角色動畫的挑戰就開始了。這意味著簡單動畫模式是不夠的，這時候動傳統的動畫工藝會真正閃耀起來。
角色動畫可以增加趣味性
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
新人設計師可能都會遇到這樣的問題：在設計一個復雜需求的時候，各種場景、可能性在腦中來回亂竄，常常覺得邏輯不夠嚴密。設計完成后，又被各方質疑，提出各種異常場景，導致頻繁修改，縫縫補補。本文將和大家分享下解決以上問題的小方法。本文就以「企業內部權限分配平臺」的需求為案例，整理了之前處理復雜需求的一些思路。講講在交互設計的過程中，如何避免以上兩種情況，讓我們的工作更好地服務用戶，體現價值。
首先，我想任何設計師在設計產品的時候第一步都是理解需求，這包括了需求的目標背景、角色場景、產品邏輯等，不同的需求側重點會不同。以「企業內部權限分配平臺」的需求為例，目標背景和角色都比較簡單，但是一般涉及權限的產品，背后的邏輯就會很復雜，場景情況也很多。
和產品溝通，和用戶溝通，甚至網上找資料，都是理解需求的一些好方法。比如本次設計的需求是關于權限分配，這一篇《網易高手：角色權限設計的100種解法》的文章，就很好地幫助我理解權限分配背后的設計邏輯。
包括理解需求內的專有名詞，為其建立特殊的標識樣式，也是幫助自己、團隊、用戶更好地理解產品需求的一種方式。
△ 名詞解釋
我們在最初思考需求的時候，肯定會從場景/問題出發，思考怎么去解決這個問題，是以「人」的思維來思考這個問題的，這是必然的，也是正確的。但此時我們的思維是散點式的，例如當我們想到權限分配的需求時，可能會說：這次我們要新增一個「崗位」的概念，讓權限和崗位綁定，不要和人綁定。對了，還有人員離職這個問題困擾業務很久了，我們這次要在人員離職的時候進行……
所以，在最初的需求框架確定后，我得到的是這樣兩段文字：
看上去已經非常全面了，但由于我們是散點式地收集需求，很多時候可能還是會有遺漏，或者說錯誤關聯了內在邏輯，導致一些邏輯沖突、漏洞。
此時，我們需要將我們的思維從「散點式收集」轉為「結構化梳理」。從需求說明里抽絲剝繭，我們可以得到：
各個對象之間的關系又是怎樣呢？我們把所有的對象兩兩組合，再把沒有關系的刪掉。
也就是：
這個具體的業務邏輯并不重要，不需要去費心理解，重要的是這樣一種結構化思考的方法，可以應用在后續各種各樣的設計中。
對象間的關聯，再和我們剛才梳理的人物、操作相結合，就可以還原成一系列的需求描述：「角色」可以在「A對象」下「操作」「B對象」，例如：超級管理員可以在部門下新增崗位。
至此，我們已經可以建立「需求→功能對應表」：
其中，紅色部分都是在之前散點式的需求羅列中沒有考慮到的功能點，通過結構化的梳理，我們可以提前把它們都一一補齊。
這個過程可以減少我們最小顆粒功能點的遺漏，避免在做完大部分設計后，突然發現遺漏了某個功能，任務時間點又已經到了，慌慌忙忙地加功能，就可能會影響整體的設計思路和框架。
完成了功能點的整理歸納后，就可以開始我們的界面設計了。在最初的界面設計中，這三點需要做減法：
當然，可以先把可能存在的異常、細節都記錄下來，以便后續補充。
比如，在人員權限分配的界面結構中，分為三個大模塊：
在有了界面框架和功能對應表后，我們做設計會變得比較簡單，按照之前整理的「需求→功能對應表」，把每個小顆粒的功能細節填充到界面框架內即可。
當主流程設計完畢之后，我們就要開始做加法了，在之前，我們一直是用一種純理性的視角來完成我們的設計，保持純理性的設計會有兩個問題：
例如，純從邏輯思維角度你能想到在一個企業里有人是沒有任何部門歸屬的嗎？然而現實中就存在這樣的情況──外包人員。不結合實際場景，我們也不知道用戶一天需要處理多少次重復操作，目前的設計對他是否足夠便捷。
作為一個企業內部權限分配平臺，我們可以把部?、崗位、人員等對象作為初始線索，站在不同的用戶使用角度，沿著線索去全面地思考場景，修改功能。有一些實在難以理解的業務，找用戶聊聊也是一個好方法。
很快，我們就找到了下面這些特殊場景。
1. 人員變動
處理方法：行政架構自動同步，紅點待辦。
我們與 OA 系統數據打通，自動形成四類待辦紅點：人員新增、人員離職、行政部門新增、行政部門刪除。
這樣 HR 就不需要重復做新人員的添加操作，只需要業務管理員把 OA 內無法覆蓋的人員崗位設定好就可以，也不會出現遺漏的情況。
2. 高管兼職
例如某位高管：本身為 A 部門負責人，臨時兼任 B 部門負責人，那么當他不再負責 B 部門時，該如何處理他的崗位？離職？轉崗？似乎都不合適。
處理方法：新增崗位移除功能。
3. 外包人員
了解到現實情況中，外包人員是沒有部門歸屬的，但是實際上他們肯定也有自己負責的業務范圍和崗位，在初始化時如何安置沒有部門的人？
處理方法：新增一個部門，叫做「無崗位人員」，并且標紅作為待辦，提醒操作者去處理這些「無崗位人員」。
4. 人員離職/轉崗
在進行功能設計整合時，我考慮是否「人員離職」應該叫「人員刪除」更系統化？是否可以直接整合為一個「人員編輯」的功能，將離職、轉崗的操作合并？（實際上這2個功能操作起來確實比較相似）
處理方法：最終我依然保留了「人員離職」、「人員轉崗」的功能，因為這樣更場景化，用戶清晰地知道自己當前該操作什么。
目前對一個人進行離職操作的路徑是：找到原部門→找到崗位→找到人→處理離職，而我們的企業有 2500+ 員工，對于離職操作者 HR 來說，這個路徑是否現實？是否快捷？
處理方法：新增搜索功能，直接搜索人名→處理離職，這個功能也方便了其他找人的場景。
5. 更多
諸如此類的考慮還有很多，例如新建部門的時候是否會有空部門，在企業進行組織架構重組時是否會有大批量的人員、組織變動，進而需要有批量操作等等。找到最初的線索，站在用戶的角度沿著線索思考，進行全局掃描，就會發現很多需要做加法的地方，發現的方式可以是觀察、訪談、思考等任何方式。
在已經保證了主流程的簡潔、清晰后，再用全局掃描的方式去搜集特殊場景，給我們的設計做加法，可以保證我們整體的設計框架是清晰可用的，而特殊場景是散落在骨干上的各種小分支。
如果我們可以做到，對所有的主干場景、分支場景了然于心，并且有自己的優先級考慮，那么對于項目成員、用戶提出的質疑，我們也有足夠的理由來證明自己設計的合理性。
當然，場景基本考慮全面后，還有最后一步，就是統一交互，完善細節，這一步也是設計上的加法。
以上，就是一個針對復雜需求的加減設計法案例，總結來說有四個大步驟：
所以，交互設計師是需要理性和感性的結合，要有抽絲剝繭，提煉總結的能力，也要有貼近用戶關注情感的細膩。把自己的工作規范化，減少無效付出，也是我們的一種能力。希望本篇文章對新人設計師有一些幫助，也歡迎大家一起探討交流。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
柵格系統在UI設計和前端開發中是被應用的很廣泛一套體系，但真正能掌握并很好運用的人卻不多，一起來學習吧！
環顧身邊常見的優秀設計很多都使用了柵格系統，你可能非常贊同在界面中使用柵格系統，但卻沒有人告訴你應該如何使用它們。
印刷中也會用到柵格，但就本文而言，我主要想討論的是用于PC和移動設備上的柵格系統設計。
紫色塊放內容
內容塊包括文本，圖片或者是兩者的組合形式，背景顏色實際上不能算是內容元素，除非是作為文本或者圖片的容器。
上圖中的粉色塊作為柵格中的列，它們構成了內容寬度。一般來說，列寬是不會變的，只是列數會隨著設備的不同而變化，比如從PC端的12列變為平板電腦上的8列，然后在移動端變為4列。嚴格來說，你其實可以定義任何想要的列寬，但大多數情況下的網格列寬都設置在60-80px之間。選擇合適的列寬是最重要的，因為它是內容寬度的主要決定因素。
水槽是在列與列之間的空間。20px是一個常見的尺寸設置，當設計塊狀或者卡片元素的網格時，這種間距非常重要，比如做照片類設計的時候。有些系統會隨著設備寬度的增加而增加水槽的寬度，但也可以保持固定。
外邊距也稱為外水槽，是內容寬度之外的空白區域。為了更方便的設計，外邊距會隨著設備寬度的增加而增加。移動設備的邊距通常為20-30px，而在平板電腦和PC端，這個間距通常會差異很大。
下面會介紹一些基本的準則，但要明白在實際設計中其實沒有任何硬性的規定。
1. 內容元素必須位于若干列上
其核心思想是內容元素必須位于若干列上，你可以任意分割，比如6x2,3x4,4x3。下面的例子中，我展示了不同分割方式設計的信息卡片。
不同柵格設計展示
很棒，這看起來很簡單對吧。有的時候，你想把內容嚴格的套用在柵格布局上，會發現可能不夠美觀，比如下面的例子。
如果我們把內容都放在網格上，文本內容會顯得很長，最佳的位置是不嚴格在任何網格上，這也是可以的，只要理解了整個元素實際上是一個不可見的，更大的容器就行。
這也是4x3的布局，只是給了它內部不可見的填充。當把這樣的設計稿給到開發時，他們就能很直觀的知道這一點，所以這更利于去理解如何實際地分配好內容。
2. 不要將內容元素留在水槽中
內容元素應該要在列寬以內，而不能流出在水槽之外，這樣會違背柵格化的目的。
3. 只要父級元素對齊柵格，子級可以不完全對齊列
有些時候，你想要將設計和卡片分成兩部分，一半是圖片，一半是文字。你可能遇到這樣尷尬的情況，圖片沒有完全落在一列上，文字被迫以一種奇怪的方式自適應。其實不用擔心，只要“父”容器對齊柵格，這就沒有關系。
父子級內容柵格排版示意
4. 除非有意，否則不要把列作為外部填充
所有重要內容都應該與柵格列寬相適應。一開始會覺得奇怪，因為如果不習慣使用網格，可能會把網格寬度當成全部內容區域，所以還需要給它設定一定的內邊距。此時外邊距就起到了留白的作用，它們充當了內邊距。不要在網格內部利用列寬當成內邊距，而是要與網格最外面保持對齊，利用網格外的間距來當做留白區域。根據代碼實現方式，要么網格內的內容按比例縮放，邊距固定，要么外邊距與內容同時縮放。
正確的內容填充方式和不正確的把柵格當做邊距
所以如果有人說“我需要一個1200px寬的設計”，這并不意味著你的設計就是1200px寬，這其實是說設計內容寬度在1200px的畫布內，實際內容占位是960px，這樣就會有空間留出外邊距。
5. 完全出血的元素或紋理圖形應該設計在畫板邊緣，并理解為出血的列網格
這個頁面布局的頂部圖片被設計成完全出血
這是一個例外的規則，當背景顏色或者圖片在完全出血的情況下，開發同學會把它理解為一個全屏的內容元素。
如果設計的是裝飾元素之類的內容，可以接受它被裁切掉，此時也可以脫離柵格化的設計。
一些圖片和文字的出血設計
頁眉和頁腳有時也有例外，它們不被認為是內容的一部分。有些設計將它們固定在瀏覽器邊緣，有些則喜歡保持內容的寬度，這取決于自身功能和內容的情況。將它們保持在內容寬度內的好處是，當用戶在寬屏顯示器上看頁面時，不需要來回掃視；將它們固定在瀏覽器上的好處是可以為導航元素提供更多的空間。
柵格化布局如何做到響應式
圖片來源Intuit
在傳統的柵格化系統設計中，列的寬度和水槽的寬度是保持不變的，只是列的“數量”發生變化。為什么要這么處理呢？這是為了讓設計更簡單。如果一組三張卡片分別放在桌面的四列上，那么在平板電腦上，會顯示兩張卡片，并把第三張卡片進行折行顯示在第二行上。不需要做任何的調整，因為已經知道它位于第四列上了。在手機上，答案也很簡單，只需要一張卡片，其他的就會自動堆到下面的行中。如果你愿意，也可以變得有創意，選擇只在手機上顯示一張卡片，或者做一個水平滾動。這些列的自適應對于代碼來說就是很簡單的參考。
實際上，web必須呈現任何瀏覽器的寬度。例如，有一個大顯示器，它可以看到1600像素寬的東西，實際上pc端的網頁設計是1200px寬，平板電腦上是768px寬，手機是360px寬。所以你會看到一個小于1200px的設計，有大量的留白。但是當你的瀏覽器再小一個像素，1199px，會發生什么呢？
固定網格
固定柵格示意
如果開發那邊寫了一個固定柵格，當你從桌面縮小到平板電腦，就像是在900px的瀏覽器寬度時，你不會看到任何變化，設計就像是被剪掉了一樣。但當達到768px臨界點時，設計馬上就會改變，平板電腦上的顯示效果就會好起來。如果繼續減小這個值，同樣的事情也會發生，在到達另一個臨界值之前，設計看起來都是不變的。
流動網格
流動網格的示例
現在來看看流動網格的特點，當窗口縮小時，內容將動態的發生變化，文本會進行換行，元素也會變窄。然而，這些元素在內容寬度縮小到下一個臨界值之前，布局是不會變化的。
所以我想說的是，設計的臨界值只是一個更改布局的參考點。這就是為什么列寬和水槽在網格中不會改變的原因，因為我們想讓設計師在考慮布局時能夠更容易地創建一致性。
混合網格
在實際項目中，使用流動網格和固定網格的組合也是常見的做法。網站通常是流動網格，因為它要去適應各種不同終端的大小。
一些做的很酷的柵格系統
不需要太死板地去堅持傳統柵格套路，12、8、4這樣的分布，甚至不需要20px的水槽。下面是一些在設計中使用柵格系統做的很棒的設計靈感。
Invision’s Genome Project
可以看到，他們的設計故意不去使用任何的水槽，所以看起來是無縫的。
這個網站不僅設計的很好，他們還利用了在設計中展示他們自己的柵格系統來讓整體的設計變得更加酷炫。
Dropbox Design
他們沒有設計水槽和外邊距，相反，整個頁面被分成兩半，然后將內容填充到這兩部分。
Wordpress
Wordpress創建賬號頁面
使用網格的方式取決于你自己。你可以在主要內容部分使用網格，次要內容則不使用。在Wordpress的例子中，頁面中間的部分使用柵格化設計，左側的側邊欄則沒有使用。
The Mockup Club
內容和網格也并不總是從中間開始，對于模型網站，內容在左邊也未嘗不可。
我非常確定的說，Instagram的PC端是用上了6列柵格布局。
要點總結
寫這篇文章的目的是想提供一些關于如何在響應式設計中使用柵格系統。我知道對于我自己來說，我花了很多年的時間寫了大量的代碼來理解網格是如何工作的。我在YouYube上看了很多視頻，也閱讀了大量的文章，但每個人都在關注它為什么重要，卻不去注重到底怎么在自己的項目中使用這些原則。
你要做的最好的事情就是從現在開始注意那些優秀設計是如何對齊元素的，你將會開始看到這些模式。為了幫助理解，這里有一些設計系統概述了它們的網格使用：
Google’s Material Design System
Intuit’s Design System
IBM’s Carbon Design System
…And here’s huge list of other systems you can look through
在完全理解了網格的工作原理之后，我已經成為了一名更好的設計師，因為我知道我的設計將如何在臨界值之間進行轉換。我也可以落地我的設計，使它們能夠有一個完美的像素對齊。這樣的規范帶來了更一致，更簡潔的設計，當用戶從一個界面到另一個界面流轉時，這真的提升了產品的檔次。我建議在你的設計中去應用這些網格，并和開發一起，以相同的方式將它們落地，這將會是一個非常不錯的進步。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
藍藍設計的小編 http://www.syprn.cn
