告訴你如何做出微軟風格的PPT?

2023-11-20 17:41:17 來源/作者: / 己有:4人學習過

大部分圖標還具有鏡像樣式,以供使用雙向文本的語言使用。

這里提供一些 Unicode ID。

紅心大戰(zhàn)

告訴你如何做出微軟風格的PPT?

星形評級

告訴你如何做出微軟風格的PPT?

復選框組件

告訴你如何做出微軟風格的PPT?

單選按鈕

告訴你如何做出微軟風格的PPT?

雜項

告訴你如何做出微軟風格的PPT?

滾動條

告訴你如何做出微軟風格的PPT?

漸進式公開箭頭

告訴你如何做出微軟風格的PPT?

后退按鈕

后退按鈕的字形提供了 3 種不同大小,以便外環(huán)的權重等于 16pt、20pt 和 42pt。這些字形設計用于支持分層。

告訴你如何做出微軟風格的PPT?

HTML 的后退箭頭

記得添加其他代碼,創(chuàng)建環(huán)繞這些字形的圓環(huán)。

告訴你如何做出微軟風格的PPT?

用于控制的圖標的字形

這些字形設計為以 14pt 大小顯示。記得使用其他代碼,創(chuàng)建環(huán)繞這些字形的圓環(huán)。

告訴你如何做出微軟風格的PPT?

告訴你如何做出微軟風格的PPT?

告訴你如何做出微軟風格的PPT?

告訴你如何做出微軟風格的PPT?

告訴你如何做出微軟風格的PPT?

告訴你如何做出微軟風格的PPT?

六、動畫

如果你有心做動畫,喜歡折騰搗鼓,那就試試吧。PowerPoint 中部分動畫的“平滑結束”比較用得上,但至今配合動畫延遲也沒有嘗試出完全相同的程度。Modern UI 中很多動畫的“位移-時間”圖像是曲線。

1、底部 Action Bar:https://content5.ssl.catalog.video.msn.com/e2/ds/42bad77c-661f-457f-ad89-9fdf0742d807.mp4

這個使用進入動畫“飛入” – 從底部 – 持續(xù)時間和平滑結束時間自行設定。

2、隱藏面板 Charm:https://content5.ssl.catalog.video.msn.com/e2/ds/629ed613-3265-42f6-878c-c057313643d3.mp4 設定方式與上一條同理。但視頻中還是早期樣式,Windows 8.1 中面板與其上的文字有動畫延遲,顯得更有活力。視頻中文字內容和面板還是一個整體。要做新樣式,將文字內容與底部面板分離,設置動畫延遲。

3、彈出動畫:https://content3.ssl.catalog.video.msn.com/e2/ds/2a38b01a-a40b-491e-8802-5a9572a123a2.mp4 包括一個平移,它是在彈出元素淡入時從初始位置到最終位置的垂直移動。平移距離和方向由應用指定。在大多數(shù)情況下,平移應為 50 像素,以向上方向移動。不過,如果彈出元素顯示在觸發(fā)彈出的 UI 元素下方,則平移應是向下移動 50 像素。例如,此下載平移將適用于從導航欄或從應用標題觸發(fā)的浮出控件。這是為了向用戶提供彈出元素與其觸發(fā)元素之間的可視鏈接。

更多動畫自行操作、觀察。

我是從介紹其設計準則這個角度來回答如何制作這種風格的 PPT 的,試圖把重點的一部分呈現(xiàn)出來,整理下大家紛亂的感知,我認為這樣做更實際。

告訴你如何做出微軟風格的PPT?

這是我看到的一個提煉:

Metro UI設計具備以下五點原則:

1. 干凈、輕量、開放、快速

2. 要內容,而不是質感

3. 整合軟硬件

4. 世界級的動畫

5. 生動,有靈魂

# 注釋 #

在【一、字體】中提及的 SS01 樣式,出現(xiàn)了一些復雜的情況,感謝 @prox 用心的查證,手動點贊!因 @prox 網(wǎng)絡問題無法發(fā)表,在這里貼出他的修正內容:

Segoe UI 的兩種造型?

@佳偉發(fā)現(xiàn)列出的 Segoe UI 字體,字形竟然是不一致的。

告訴你如何做出微軟風格的PPT?

作為 Segoe UI 的粉絲,我不辭勞苦(?)地找到了一臺 Windows 7 電腦,使用 QQ 遠程協(xié)助截下了如下珍貴圖像。po主真的很拼……

這是 Windows 7 下的 Segoe 字體集。

告訴你如何做出微軟風格的PPT?

在圖中,發(fā)現(xiàn)了兩個名為“Segoe UI 常規(guī)”的文件。它們分別是這樣的:

告訴你如何做出微軟風格的PPT?

告訴你如何做出微軟風格的PPT?

顯然這兩種字形是不一致的。第二種,通常我們認為是微軟雅黑的西文樣式。注意兩個字體文件版本號,可見下圖版本號更低。

我想這大概就是佳偉截圖中出現(xiàn)兩種不同樣式的 Segoe 的原因了:微軟中途發(fā)布了新版本的 Segoe 字體。
我找到了這樣一個鏈接:Segoe UI Light

告訴你如何做出微軟風格的PPT?

?其中有這樣一行:

可見表格當中并未列出這個 5.11 版本。推測,這可能只是一個臨時的、中間的、不正式的版本。
Segoe 字體本身是不包括中文的。微軟當前對它的用法是,與微軟雅黑中文搭配成新版 YaHei Light,或與方正中等線搭配成 Windows Phone 自帶 DengXian 字體。所以呢,也許是 5.11 版本打包的時候出錯了,直接將一整套微軟雅黑扔了進去……(注意5.11與其他任何版本的中 文字體都不一樣,其他的選擇了默認宋體作為中文字體缺失時的替換展示字體,而 5.11 版本帶有雅黑)
Bing 的搜索結果也傾向我的推測。

告訴你如何做出微軟風格的PPT?

因此,Segoe 就是這樣的:

告訴你如何做出微軟風格的PPT?

并非為了兼容 Windows 7 而把自己改成 YaHei UI Regular 的樣子。

再次感謝!

設計師為此付出了艱辛勞動,程度之大是我們無法想象到的。

它傾注了設計師多年的用心探索、大量的資料、不斷推翻改進的設計。不然,何以成為微軟整個公司轉型而確定的設計風格呢。

那些令人尊敬的人們,現(xiàn)在或許正為未來五年或十年的設計風格而探索著。

設計規(guī)則是人定的,為了更好地展現(xiàn)。那么規(guī)則也是可變的。期待 Modern UI 的不斷精進!

(按當時 Windows 8 的開發(fā)情況,最終的配色方案和 UI 是在零售版中露面的。而有人聲稱 Windows 10 每個外放的預覽版本都會暫時封鎖一部分功能,這也是展示的 9841 和下載下來的 9841 有多處不同的原因了。那么沒有理由不相信 Windows 10 最終會擁有一套漂亮的界面!鑒于保密工作越發(fā)嚴謹,大家還是等正式發(fā)布的那天吧!→ 如果過早曝光,沒了驚喜,那多沒意思嘛^_^)

全篇完結。