告訴你如何做出微軟風格的PPT?
大部分圖標還具有鏡像樣式,以供使用雙向文本的語言使用。
這里提供一些 Unicode ID。
紅心大戰(zhàn)
星形評級
復選框組件
單選按鈕
雜項
滾動條
漸進式公開箭頭
后退按鈕
后退按鈕的字形提供了 3 種不同大小,以便外環(huán)的權(quán)重等于 16pt、20pt 和 42pt。這些字形設(shè)計用于支持分層。
HTML 的后退箭頭
記得添加其他代碼,創(chuàng)建環(huán)繞這些字形的圓環(huán)。
用于控制的圖標的字形
這些字形設(shè)計為以 14pt 大小顯示。記得使用其他代碼,創(chuàng)建環(huán)繞這些字形的圓環(huán)。
六、動畫如果你有心做動畫,喜歡折騰搗鼓,那就試試吧。PowerPoint 中部分動畫的“平滑結(jié)束”比較用得上,但至今配合動畫延遲也沒有嘗試出完全相同的程度。Modern UI 中很多動畫的“位移-時間”圖像是曲線。
1、底部 Action Bar:https://content5.ssl.catalog.video.msn.com/e2/ds/42bad77c-661f-457f-ad89-9fdf0742d807.mp4
這個使用進入動畫“飛入” – 從底部 – 持續(xù)時間和平滑結(jié)束時間自行設(shè)定。
2、隱藏面板 Charm:https://content5.ssl.catalog.video.msn.com/e2/ds/629ed613-3265-42f6-878c-c057313643d3.mp4 設(shè)定方式與上一條同理。但視頻中還是早期樣式,Windows 8.1 中面板與其上的文字有動畫延遲,顯得更有活力。視頻中文字內(nèi)容和面板還是一個整體。要做新樣式,將文字內(nèi)容與底部面板分離,設(shè)置動畫延遲。
3、彈出動畫:https://content3.ssl.catalog.video.msn.com/e2/ds/2a38b01a-a40b-491e-8802-5a9572a123a2.mp4 包括一個平移,它是在彈出元素淡入時從初始位置到最終位置的垂直移動。平移距離和方向由應(yīng)用指定。在大多數(shù)情況下,平移應(yīng)為 50 像素,以向上方向移動。不過,如果彈出元素顯示在觸發(fā)彈出的 UI 元素下方,則平移應(yīng)是向下移動 50 像素。例如,此下載平移將適用于從導航欄或從應(yīng)用標題觸發(fā)的浮出控件。這是為了向用戶提供彈出元素與其觸發(fā)元素之間的可視鏈接。
更多動畫自行操作、觀察。
我是從介紹其設(shè)計準則這個角度來回答如何制作這種風格的 PPT 的,試圖把重點的一部分呈現(xiàn)出來,整理下大家紛亂的感知,我認為這樣做更實際。
這是我看到的一個提煉:
Metro UI設(shè)計具備以下五點原則:
1. 干凈、輕量、開放、快速
2. 要內(nèi)容,而不是質(zhì)感
3. 整合軟硬件
4. 世界級的動畫
5. 生動,有靈魂
# 注釋 #
在【一、字體】中提及的 SS01 樣式,出現(xiàn)了一些復雜的情況,感謝 @prox 用心的查證,手動點贊!因 @prox 網(wǎng)絡(luò)問題無法發(fā)表,在這里貼出他的修正內(nèi)容:
Segoe UI 的兩種造型?
@佳偉發(fā)現(xiàn)列出的 Segoe UI 字體,字形竟然是不一致的。
作為 Segoe UI 的粉絲,我不辭勞苦(?)地找到了一臺 Windows 7 電腦,使用 QQ 遠程協(xié)助截下了如下珍貴圖像。po主真的很拼……
這是 Windows 7 下的 Segoe 字體集。
在圖中,發(fā)現(xiàn)了兩個名為“Segoe UI 常規(guī)”的文件。它們分別是這樣的:
顯然這兩種字形是不一致的。第二種,通常我們認為是微軟雅黑的西文樣式。注意兩個字體文件版本號,可見下圖版本號更低。
我想這大概就是佳偉截圖中出現(xiàn)兩種不同樣式的 Segoe 的原因了:微軟中途發(fā)布了新版本的 Segoe 字體。
我找到了這樣一個鏈接:Segoe UI Light
?其中有這樣一行:
可見表格當中并未列出這個 5.11 版本。推測,這可能只是一個臨時的、中間的、不正式的版本。
Segoe 字體本身是不包括中文的。微軟當前對它的用法是,與微軟雅黑中文搭配成新版 YaHei Light,或與方正中等線搭配成 Windows Phone 自帶 DengXian 字體。所以呢,也許是 5.11 版本打包的時候出錯了,直接將一整套微軟雅黑扔了進去……(注意5.11與其他任何版本的中 文字體都不一樣,其他的選擇了默認宋體作為中文字體缺失時的替換展示字體,而 5.11 版本帶有雅黑)
Bing 的搜索結(jié)果也傾向我的推測。
因此,Segoe 就是這樣的:
并非為了兼容 Windows 7 而把自己改成 YaHei UI Regular 的樣子。
再次感謝!
設(shè)計師為此付出了艱辛勞動,程度之大是我們無法想象到的。
它傾注了設(shè)計師多年的用心探索、大量的資料、不斷推翻改進的設(shè)計。不然,何以成為微軟整個公司轉(zhuǎn)型而確定的設(shè)計風格呢。
那些令人尊敬的人們,現(xiàn)在或許正為未來五年或十年的設(shè)計風格而探索著。
設(shè)計規(guī)則是人定的,為了更好地展現(xiàn)。那么規(guī)則也是可變的。期待 Modern UI 的不斷精進!
(按當時 Windows 8 的開發(fā)情況,最終的配色方案和 UI 是在零售版中露面的。而有人聲稱 Windows 10 每個外放的預覽版本都會暫時封鎖一部分功能,這也是展示的 9841 和下載下來的 9841 有多處不同的原因了。那么沒有理由不相信 Windows 10 最終會擁有一套漂亮的界面!鑒于保密工作越發(fā)嚴謹,大家還是等正式發(fā)布的那天吧!→ 如果過早曝光,沒了驚喜,那多沒意思嘛^_^)
全篇完結(jié)。