告訴你如何做出微軟風(fēng)格的PPT?
本汪曾負(fù)責(zé)過微軟的某些視頻。
Modern UI 的大部分特性是適合用來做 PPT 的。
好的 PPT 應(yīng)該是基于演講者定制的。不要輕易相信有了好的模板你的演示就一定會比別人的好——好的模板套成渣的也不在少數(shù),好的 PPT 配上水平不夠的演講也很常見。演講的目的在于讓聽眾明白你的想法,PPT 只是一個輔助工具,是聽眾在“明白你的想法”這一環(huán)節(jié)的催化劑。演講才是重點。
關(guān)注此問題的應(yīng)該大多是會自己動手做的,每次從空白 PPT 開始構(gòu)想創(chuàng)作是一件很好的事。
貼上微軟官方的設(shè)計理念:微軟 /design design.microsoft.com
不建議把 Modern UI 簡單粗暴地理解為“色塊”堆砌而成的界面——那界面上的“擬物”還是所謂“扁平”又有何本質(zhì)區(qū)別?也不能把 Modern UI 叫做“扁平化”,微軟官方可是從來沒有用過“扁平化”這樣的措辭。(早期叫 Metro UI,涉及商標(biāo)原因改為 Modern UI 或 Windows 8 Style UI。Metro UI 的早期,那些個磁貼是長條狀的,比現(xiàn)在看到的長許多。)
不認(rèn)同 Modern UI 的,每個人有各自喜好。但我們無法否認(rèn)要獨立于 iOS、Android 樣式之外設(shè)計出一套極具辨識性與差異化的 UI 不是一件容易事的事實。許多手機產(chǎn)商用盡各種方式,卻似乎始終無法跳出那個框框。
一、字體英文:Segoe UI
中文:Microsoft YaHei UI、Microsoft YaHei、微軟雅黑
Segoe 是 Modern UI 規(guī)定使用字體。微軟還開發(fā)或授權(quán)一組字體,中文的 Microsoft YaHei UI 就屬于其中一種,用于簡體中文的顯示,現(xiàn)有 Light / Regular / Blod 三種版本。附上官方鏈接 Windows 下的字體。
在控制面板中提取字體,或從 Microsoft 官方獲?。篎ont Families
Windows Phone 上的中文使用 Dengxian 字體,英文使用 Segoe WP 字體(Light / Semilight / Semibold)。它們或?qū)⒃?Windows 10 for Phones 中與 Windows 10 統(tǒng)一(目前 Windows 10 的設(shè)計準(zhǔn)則還沒有一個完整成型的資料對外公開或樣式呈現(xiàn))。
對英文原版系統(tǒng)來說,在沒有安裝中文語言包的情況下,不會有“微軟雅黑”這個字體,但是有 Microsoft YaHei UI。也就是說,即使“微軟雅黑”不可用,Microsoft YaHei UI 都是處于可用的狀態(tài)。UI 是代表系統(tǒng)界面顯示的字體。
默認(rèn)字體經(jīng)幾次系統(tǒng)升級發(fā)生了改進:
Windows 8 的默認(rèn)字體:
SS01 樣式(Windows 7 的默認(rèn)樣式。這里謝謝 @prox 的關(guān)注和提醒,為引起注意,相關(guān)信息附在文末):
SS20 樣式(首選的設(shè)計和間距):
第一眼你們可能覺得除了字母符號 Q I & 有變化之外只是數(shù)字 1 有了變化。很遺憾地告訴你,好幾個數(shù)字都發(fā)生了變化:
Windows 7 中的默認(rèn)字體:
Windows 8 中的 Segoe UI:
注意事項:
如果頁面標(biāo)題或副標(biāo)題太長而無法顯示,請使用省略號 (U+2026),而不要使用 3 個點。不要在標(biāo)題文本末尾和省略號之間添加空格。不要使用傾斜字體。應(yīng)遵循布局。(這點在之后會說明,簡而言之:勿亂擺)二、字面內(nèi)容(語言風(fēng)格)① 字詞:
-
若要體現(xiàn)“簡單”和“輕松”,請使用簡單的句子和短語、最短的文本和日常字詞。精心挑選的精確字詞可清晰地表達意義。通常,少即是多。
以客戶(對應(yīng) PPT 的觀眾)的語氣說話。你要假設(shè)你只懂一點或完全不懂你所面對的產(chǎn)品,并以這樣的眼光審視你的作品。下面是一些調(diào)整前和調(diào)整后的示例:
請說“獲取 Windows 8.1”,而不是“查看產(chǎn)品”。請說“你需要一個 ID,如下所示:customer@microsoft.com”,而不是“ID 無效”。請說“選擇你的主題”,而不是“配置你的顯示效果”。同樣,盡量避免那些聽起來嚇人或?qū)τ诖蠖鄶?shù)客戶僅有模糊意義的“技術(shù)”字詞。比如:無效、錯誤、配置、管理、設(shè)備(請改用“電腦”或“手機”)等。
② 標(biāo)點符號:
標(biāo)點符號能幫助傳達意義,但它不可替代字詞。以下是要記住的幾點:
不要過度使用感嘆號。相反,選擇程度更深的字詞。和感嘆號一樣,請慎用問號。當(dāng)鏈接采用客戶問題的措辭時,它們效果很好。③ 用法:略。
④ 注意格式規(guī)范:
-
“英文” “中文” “數(shù)字”相互之間須有空格。比如 [我們將在 4 月 29 日召開 Build 大會,會上會有更多關(guān)于 Windows 10 的信息公布。]英文句子間須有空格。比如 [We released Windows 10 Technical Preview last year, and many people like it. We also showed HoloLens.] 在逗號后面、句點后面均有空格。大小寫。如:Windows 不能寫作 windows 或者 win。Windows 10 for Phones 不宜寫作 Win10 for phone。對于有特別作出規(guī)定的標(biāo)志,比如 Microsoft 徽標(biāo) Microsoft Corporate Logo Guidelines(請展開其中的 + 號按鈕)。
【附加示例】
調(diào)整前的文本:你嘗試打開的文件不屬于允許的文件類型。
調(diào)整后的文本:不能在手機上打開此類文件。
調(diào)整前的文本:我們正在將該演示設(shè)備的設(shè)置還原到預(yù)配置的值。此過程不可中斷。
調(diào)整后的文本:我們正在將該電腦還原到用于演示的原始設(shè)置。該過程需要一些時間,并且不能中斷。
調(diào)整前的文本:Microsoft 可能會使用你提供的信息,以通過與你的帳戶相關(guān)聯(lián)的服務(wù)相關(guān)強制性通信聯(lián)系你,并提供我們認(rèn)為你感興趣的其他通信。
調(diào)整后的文本:Microsoft 可能針對關(guān)于你的帳戶的服務(wù)相關(guān)信息聯(lián)系你,或者向你提供你可能感興趣的其他有用信息。
【配置正確合適的字面內(nèi)容,也是 Modern UI 的設(shè)計準(zhǔn)則之一!如果沒有做到,便不能算是 Modern UI。重申一遍,不建議把 Modern UI 理解為“色塊堆砌”?!?/p> 三、顏色
Modern UI 的顏色是飽滿、鮮明和真實的數(shù)字,涵蓋了顯示技術(shù)所能夠達到的整個色域。Windows 主要使用單一純色,但利用各種技巧創(chuàng)造深度,如透明度、分層和混合。
先上一張色表吧。此色表僅對 Windows Phone 起作用,Windows 又是另外一套顏色方案(不是不整合,是兩種設(shè)備的融合度還不高、使用場景還有很多隔閡的時候,顏色的使用也需要隨使用場景的特點而有不同。這點又反映在磁貼的動畫上,Windows 上的磁貼不會也是禁止進行前后翻轉(zhuǎn)。)另,此色表是當(dāng)時的,現(xiàn)在我手里有一臺 Lumia 830,它的主題色還多了一種“亮綠”,是為了配合亮綠色背殼而增加的,且它排在最后一位,而不是插隊到綠色位置。還有的運營商可能會有定制的主題色,這些暫時都不在我們的考慮范圍內(nèi)。
Modern UI 體現(xiàn)在 Windows Phone 上的配色:
謹(jǐn)慎地融入顏色,對品牌產(chǎn)生影響。使用離散、高對比度的顏色組合來體現(xiàn)清晰度和可見性。應(yīng)當(dāng)盡量少用鮮艷的顏色,如果你無法決定使用哪種顏色,則默認(rèn)使用中性或單色色調(diào)。意思就是不要將各種五花八門甚至發(fā)亮的顏色(而且還是沒有經(jīng)過組合配色的隨機選的顏色)毫無規(guī)律地拼湊在一起——尤其是手機這樣小尺寸的手持設(shè)備,因為它與大屏幕的設(shè)備有不同的特點,配色方法是有區(qū)別的。簡單說來,如果你要在一個小的地方,比如明信片、名片、書簽等等的小物品上運用Moder UI,記得:少用色,用好色。
比如 Microsoft Account 的各處登錄頁面(如 Outlook),它經(jīng)常需要在手機或各種設(shè)備上顯示,它非常簡潔,就一種藍色藍色(Xbox 登錄可能會是綠色,是顏色在品牌上的變換),不會五花八門。且用色之處,皆為重要信息,或,希望你關(guān)注的信息。
Modern UI 體現(xiàn)在 Windows 上的配色:
正如你知道的那樣,系統(tǒng)顏色和應(yīng)用顏色是不同的。系統(tǒng)顏色是用戶選擇并由 Windows 應(yīng)用到系統(tǒng)中主要 UI 表面的顏色,如“開始”屏幕背景、邊欄菜單、按鈕顏色等等。應(yīng)用顏色是應(yīng)用開發(fā)人員選擇的獨特顏色,它獨立于系統(tǒng)顏色之外。應(yīng)用顏色表示應(yīng)用的品牌和標(biāo)識。
這點應(yīng)用到 PPT 上可以變換為,選定用于貫穿整個 PPT 的主色,和你的分頁顏色。比如目錄用色,和目錄上各章節(jié)的配色。
能輕易發(fā)現(xiàn),背景色一定不是淺色系的?。ㄖ辽倌J(rèn)配色方案不會給出淺色系背景,至于可自定顏色不在討論范圍內(nèi))默認(rèn)的紫色,是深紫,明度較低,即用沉穩(wěn)的色調(diào),去反襯磁貼的多彩。若背景色是淺色系的,那么整個界面會顯得凌亂,難分主次。
應(yīng)用在 PPT 上,背景要具有承載頁面內(nèi)容的能力。即使是圖片作為背景,也要將圖片的明度調(diào)暗??稍囍x擇桌面壁紙當(dāng)作開始屏幕背景,并和桌面切換對比,你會發(fā)現(xiàn),開始屏幕雖然使用了桌面壁紙作為圖片,卻也是經(jīng)過了加暗處理。(Windows 上的內(nèi)置應(yīng)用配色,是經(jīng)過調(diào)色配置好的一套顏色,可自行取色使用。但不要從開始屏幕上的磁貼取,請從“所有應(yīng)用”界面的小圖標(biāo)取。因大磁貼顏色實際是漸變色,而非真純色。)
另,為何 Windows 8.1 更新后默認(rèn)壁紙是黃色的呢?因為本身黃色不適合作為開始屏幕上的磁貼顏色,會造成文字變黑的結(jié)果。黃色同時是中性色,冷暖不定。到了 Windows 8.1,桌面變?yōu)辄S色,廣告圖中多是中等正方形狀態(tài)。顏色上,弱化它;功能上,不強調(diào)它。微軟希望大家更多地使用 Modern 應(yīng)用,而不是桌面,趨勢。)
一個案例:多彩的鬧鐘,下方開關(guān)白色為開,否則是關(guān)。增強了對比度,這就是在視覺上將開關(guān)的狀態(tài)感知增強了,且因背景是深灰,而非鮮亮色,這種感覺就更強了。當(dāng)你放眼看這張圖的時候就有“一目了然”的感覺。如果用左右拉的開關(guān),并放于鬧鐘名稱右側(cè),放眼望去,便不會那么清晰了。
作用在 PPT 上,即運用高對比度的顏色來獲得“看一眼就明白”的效果。(黑、灰、白不屬于色彩。)
總之:主角是前景被關(guān)注的內(nèi)容,而非背景。這里反映出 Modern UI 的一個原則:突出最重要的信息,內(nèi)容第一,而非無謂的裝飾。讓信息量達到“無法向下刪減”的程度。
再看幾個應(yīng)用的顏色:
郵件現(xiàn)已經(jīng)改為藍色,可能是為了和 Outlook 藍色調(diào)配合。
界面上色系越少(相近色不算),Modern UI 的特征越明顯。
統(tǒng)一配色,并將最需要引人注意的部分用該顏色標(biāo)注出來,除此之外,用不同灰度的黑色。底部菜單欄也為了和背景形成反差,引起注意。比如郵件應(yīng)用,被藍綠色標(biāo)記的文字是郵件前面幾個字的提要,而不是發(fā)件人或者其他,這是因為郵件內(nèi)容是最最重要的,比如“周末一起去野餐吧”這樣的郵件消息,而不是“洪國明”這樣的名字。(洪國明是微軟用于 Demo 的一群名字中的一個,還有“曾樹山”等等……如果有關(guān)注廣告可能會看到。另,Contoso 是微軟用于 Demo 的公司名字,幾乎每個案例都是說 Contoso 公司,還為其注冊商標(biāo)、開發(fā)演示應(yīng)用。contoso.com 好像是會跳轉(zhuǎn)到 Microsoft 官網(wǎng)。)
拓展: Windows 窗口的背景并不是白色,而是鉻色。:-)
再來個優(yōu)秀案例:
“閱讀列表”應(yīng)用的頂部菜單欄之一(按時間排序,從左到右是“今天、昨天、這周的早些時候、上周、上個月”)。下面是界面圖片:
想必不用多解釋,此案例中“今天”的配色是明度最高的,因其是“今天”共享進來的。時間越之前,明度越暗:弱化注意力。越是之前的,越可能是已經(jīng)閱讀過了的、無需關(guān)注的。
應(yīng)用在 PPT 上,想象一個場景:時間軸式的事件圖,若時效性較強,可逐漸改變明度。若特征不是時效性,是某幾個關(guān)鍵時刻,那么關(guān)鍵時刻就用明度高的,其余的依次弱化。
為什么說不要把 Modern UI 理解為“色塊堆砌”,其中一個原因:用色是有講究的,即使是大純色塊,也不是亂用的。重點不在于“大的純色塊”這樣的視覺表象,而是用色塊表現(xiàn)了什么、突出了什么、弱化了什么、起到了怎樣的交互引導(dǎo)作用、產(chǎn)生了什么樣的品牌形象、怎樣提升了用戶的操作效率等。
四、排布與對齊