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