告訴你如何做出微軟風(fēng)格的PPT?(4)
本汪曾負(fù)責(zé)過微軟的某些視頻。
Modern UI 的大部分特性是適合用來做 PPT 的。
好的 PPT 應(yīng)該是基于演講者定制的。不要輕易相信有了好的模板你的演示就一定會(huì)比別人的好——好的模板套成渣的也不在少數(shù),好的 PPT 配上水平不夠的演講也很常見。演講的目的在于讓聽眾明白你的想法,PPT 只是一個(gè)輔助工具,是聽眾在“明白你的想法”這一環(huán)節(jié)的催化劑。演講才是重點(diǎn)。
關(guān)注此問題的應(yīng)該大多是會(huì)自己動(dòng)手做的,每次從空白 PPT 開始構(gòu)想創(chuàng)作是一件很好的事。
貼上微軟官方的設(shè)計(jì)理念:微軟 /design design.microsoft.com
不建議把 Modern UI 簡單粗暴地理解為“色塊”堆砌而成的界面——那界面上的“擬物”還是所謂“扁平”又有何本質(zhì)區(qū)別?也不能把 Modern UI 叫做“扁平化”,微軟官方可是從來沒有用過“扁平化”這樣的措辭。(早期叫 Metro UI,涉及商標(biāo)原因改為 Modern UI 或 Windows 8 Style UI。Metro UI 的早期,那些個(gè)磁貼是長條狀的,比現(xiàn)在看到的長許多。)
不認(rèn)同 Modern UI 的,每個(gè)人有各自喜好。但我們無法否認(rèn)要獨(dú)立于 iOS、Android 樣式之外設(shè)計(jì)出一套極具辨識(shí)性與差異化的 UI 不是一件容易事的事實(shí)。許多手機(jī)產(chǎn)商用盡各種方式,卻似乎始終無法跳出那個(gè)框框。
一、字體英文: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è)計(jì)準(zhǔn)則還沒有一個(gè)完整成型的資料對外公開或樣式呈現(xiàn))。
對英文原版系統(tǒng)來說,在沒有安裝中文語言包的情況下,不會(huì)有“微軟雅黑”這個(gè)字體,但是有 Microsoft YaHei UI。也就是說,即使“微軟雅黑”不可用,Microsoft YaHei UI 都是處于可用的狀態(tài)。UI 是代表系統(tǒng)界面顯示的字體。
默認(rèn)字體經(jīng)幾次系統(tǒng)升級發(fā)生了改進(jìn):
Windows 8 的默認(rèn)字體:
SS01 樣式(Windows 7 的默認(rèn)樣式。這里謝謝 @prox 的關(guān)注和提醒,為引起注意,相關(guān)信息附在文末):
SS20 樣式(首選的設(shè)計(jì)和間距):
第一眼你們可能覺得除了字母符號(hào) Q I & 有變化之外只是數(shù)字 1 有了變化。很遺憾地告訴你,好幾個(gè)數(shù)字都發(fā)生了變化:
Windows 7 中的默認(rèn)字體:
Windows 8 中的 Segoe UI:
注意事項(xiàng):
如果頁面標(biāo)題或副標(biāo)題太長而無法顯示,請使用省略號(hào) (U+2026),而不要使用 3 個(gè)點(diǎn)。不要在標(biāo)題文本末尾和省略號(hào)之間添加空格。不要使用傾斜字體。應(yīng)遵循布局。(這點(diǎn)在之后會(huì)說明,簡而言之:勿亂擺)二、字面內(nèi)容(語言風(fēng)格)① 字詞:
-
若要體現(xiàn)“簡單”和“輕松”,請使用簡單的句子和短語、最短的文本和日常字詞。精心挑選的精確字詞可清晰地表達(dá)意義。通常,少即是多。
以客戶(對應(yīng) PPT 的觀眾)的語氣說話。你要假設(shè)你只懂一點(diǎn)或完全不懂你所面對的產(chǎn)品,并以這樣的眼光審視你的作品。下面是一些調(diào)整前和調(diào)整后的示例:
請說“獲取 Windows 8.1”,而不是“查看產(chǎn)品”。請說“你需要一個(gè) ID,如下所示:customer@microsoft.com”,而不是“ID 無效”。請說“選擇你的主題”,而不是“配置你的顯示效果”。同樣,盡量避免那些聽起來嚇人或?qū)τ诖蠖鄶?shù)客戶僅有模糊意義的“技術(shù)”字詞。比如:無效、錯(cuò)誤、配置、管理、設(shè)備(請改用“電腦”或“手機(jī)”)等。
② 標(biāo)點(diǎn)符號(hào):
標(biāo)點(diǎn)符號(hào)能幫助傳達(dá)意義,但它不可替代字詞。以下是要記住的幾點(diǎn):
不要過度使用感嘆號(hào)。相反,選擇程度更深的字詞。和感嘆號(hào)一樣,請慎用問號(hào)。當(dāng)鏈接采用客戶問題的措辭時(shí),它們效果很好。③ 用法:略。
④ 注意格式規(guī)范:
-
“英文” “中文” “數(shù)字”相互之間須有空格。比如 [我們將在 4 月 29 日召開 Build 大會(huì),會(huì)上會(huì)有更多關(guān)于 Windows 10 的信息公布。]英文句子間須有空格。比如 [We released Windows 10 Technical Preview last year, and many people like it. We also showed HoloLens.] 在逗號(hào)后面、句點(diǎn)后面均有空格。大小寫。如:Windows 不能寫作 windows 或者 win。Windows 10 for Phones 不宜寫作 Win10 for phone。對于有特別作出規(guī)定的標(biāo)志,比如 Microsoft 徽標(biāo) Microsoft Corporate Logo Guidelines(請展開其中的 + 號(hào)按鈕)。
【附加示例】
調(diào)整前的文本:你嘗試打開的文件不屬于允許的文件類型。
調(diào)整后的文本:不能在手機(jī)上打開此類文件。
調(diào)整前的文本:我們正在將該演示設(shè)備的設(shè)置還原到預(yù)配置的值。此過程不可中斷。
調(diào)整后的文本:我們正在將該電腦還原到用于演示的原始設(shè)置。該過程需要一些時(shí)間,并且不能中斷。
調(diào)整前的文本:Microsoft 可能會(huì)使用你提供的信息,以通過與你的帳戶相關(guān)聯(lián)的服務(wù)相關(guān)強(qiáng)制性通信聯(lián)系你,并提供我們認(rèn)為你感興趣的其他通信。
調(diào)整后的文本:Microsoft 可能針對關(guān)于你的帳戶的服務(wù)相關(guān)信息聯(lián)系你,或者向你提供你可能感興趣的其他有用信息。
【配置正確合適的字面內(nèi)容,也是 Modern UI 的設(shè)計(jì)準(zhǔn)則之一!如果沒有做到,便不能算是 Modern UI。重申一遍,不建議把 Modern UI 理解為“色塊堆砌”!
三、顏色Modern UI 的顏色是飽滿、鮮明和真實(shí)的數(shù)字,涵蓋了顯示技術(shù)所能夠達(dá)到的整個(gè)色域。Windows 主要使用單一純色,但利用各種技巧創(chuàng)造深度,如透明度、分層和混合。
先上一張色表吧。此色表僅對 Windows Phone 起作用,Windows 又是另外一套顏色方案(不是不整合,是兩種設(shè)備的融合度還不高、使用場景還有很多隔閡的時(shí)候,顏色的使用也需要隨使用場景的特點(diǎn)而有不同。這點(diǎn)又反映在磁貼的動(dòng)畫上,Windows 上的磁貼不會(huì)也是禁止進(jìn)行前后翻轉(zhuǎn)。)另,此色表是當(dāng)時(shí)的,現(xiàn)在我手里有一臺(tái) Lumia 830,它的主題色還多了一種“亮綠”,是為了配合亮綠色背殼而增加的,且它排在最后一位,而不是插隊(duì)到綠色位置。還有的運(yùn)營商可能會(huì)有定制的主題色,這些暫時(shí)都不在我們的考慮范圍內(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)過組合配色的隨機(jī)選的顏色)毫無規(guī)律地拼湊在一起——尤其是手機(jī)這樣小尺寸的手持設(shè)備,因?yàn)樗c大屏幕的設(shè)備有不同的特點(diǎn),配色方法是有區(qū)別的。簡單說來,如果你要在一個(gè)小的地方,比如明信片、名片、書簽等等的小物品上運(yùn)用Moder UI,記得:少用色,用好色。
比如 Microsoft Account 的各處登錄頁面(如 Outlook),它經(jīng)常需要在手機(jī)或各種設(shè)備上顯示,它非常簡潔,就一種藍(lán)色藍(lán)色(Xbox 登錄可能會(huì)是綠色,是顏色在品牌上的變換),不會(huì)五花八門。且用色之處,皆為重要信息,或,希望你關(guān)注的信息。
Modern UI 體現(xiàn)在 Windows 上的配色:
正如你知道的那樣,系統(tǒng)顏色和應(yīng)用顏色是不同的。系統(tǒng)顏色是用戶選擇并由 Windows 應(yīng)用到系統(tǒng)中主要 UI 表面的顏色,如“開始”屏幕背景、邊欄菜單、按鈕顏色等等。應(yīng)用顏色是應(yīng)用開發(fā)人員選擇的獨(dú)特顏色,它獨(dú)立于系統(tǒng)顏色之外。應(yīng)用顏色表示應(yīng)用的品牌和標(biāo)識(shí)。
這點(diǎn)應(yīng)用到 PPT 上可以變換為,選定用于貫穿整個(gè) PPT 的主色,和你的分頁顏色。比如目錄用色,和目錄上各章節(jié)的配色。
能輕易發(fā)現(xiàn),背景色一定不是淺色系的!(至少默認(rèn)配色方案不會(huì)給出淺色系背景,至于可自定顏色不在討論范圍內(nèi))默認(rèn)的紫色,是深紫,明度較低,即用沉穩(wěn)的色調(diào),去反襯磁貼的多彩。若背景色是淺色系的,那么整個(gè)界面會(huì)顯得凌亂,難分主次。
應(yīng)用在 PPT 上,背景要具有承載頁面內(nèi)容的能力。即使是圖片作為背景,也要將圖片的明度調(diào)暗?稍囍x擇桌面壁紙當(dāng)作開始屏幕背景,并和桌面切換對比,你會(huì)發(fā)現(xiàn),開始屏幕雖然使用了桌面壁紙作為圖片,卻也是經(jīng)過了加暗處理。(Windows 上的內(nèi)置應(yīng)用配色,是經(jīng)過調(diào)色配置好的一套顏色,可自行取色使用。但不要從開始屏幕上的磁貼取,請從“所有應(yīng)用”界面的小圖標(biāo)取。因大磁貼顏色實(shí)際是漸變色,而非真純色。)
另,為何 Windows 8.1 更新后默認(rèn)壁紙是黃色的呢?因?yàn)楸旧睃S色不適合作為開始屏幕上的磁貼顏色,會(huì)造成文字變黑的結(jié)果。黃色同時(shí)是中性色,冷暖不定。到了 Windows 8.1,桌面變?yōu)辄S色,廣告圖中多是中等正方形狀態(tài)。顏色上,弱化它;功能上,不強(qiáng)調(diào)它。微軟希望大家更多地使用 Modern 應(yīng)用,而不是桌面,趨勢。)
一個(gè)案例:多彩的鬧鐘,下方開關(guān)白色為開,否則是關(guān)。增強(qiáng)了對比度,這就是在視覺上將開關(guān)的狀態(tài)感知增強(qiáng)了,且因背景是深灰,而非鮮亮色,這種感覺就更強(qiáng)了。當(dāng)你放眼看這張圖的時(shí)候就有“一目了然”的感覺。如果用左右拉的開關(guān),并放于鬧鐘名稱右側(cè),放眼望去,便不會(huì)那么清晰了。
作用在 PPT 上,即運(yùn)用高對比度的顏色來獲得“看一眼就明白”的效果。(黑、灰、白不屬于色彩。)
總之:主角是前景被關(guān)注的內(nèi)容,而非背景。這里反映出 Modern UI 的一個(gè)原則:突出最重要的信息,內(nèi)容第一,而非無謂的裝飾。讓信息量達(dá)到“無法向下刪減”的程度。
再看幾個(gè)應(yīng)用的顏色:
郵件現(xiàn)已經(jīng)改為藍(lán)色,可能是為了和 Outlook 藍(lán)色調(diào)配合。
界面上色系越少(相近色不算),Modern UI 的特征越明顯。
統(tǒng)一配色,并將最需要引人注意的部分用該顏色標(biāo)注出來,除此之外,用不同灰度的黑色。底部菜單欄也為了和背景形成反差,引起注意。比如郵件應(yīng)用,被藍(lán)綠色標(biāo)記的文字是郵件前面幾個(gè)字的提要,而不是發(fā)件人或者其他,這是因?yàn)猷]件內(nèi)容是最最重要的,比如“周末一起去野餐吧”這樣的郵件消息,而不是“洪國明”這樣的名字。(洪國明是微軟用于 Demo 的一群名字中的一個(gè),還有“曾樹山”等等……如果有關(guān)注廣告可能會(huì)看到。另,Contoso 是微軟用于 Demo 的公司名字,幾乎每個(gè)案例都是說 Contoso 公司,還為其注冊商標(biāo)、開發(fā)演示應(yīng)用。contoso.com 好像是會(huì)跳轉(zhuǎn)到 Microsoft 官網(wǎng)。)
拓展: Windows 窗口的背景并不是白色,而是鉻色。:-)
再來個(gè)優(yōu)秀案例:
“閱讀列表”應(yīng)用的頂部菜單欄之一(按時(shí)間排序,從左到右是“今天、昨天、這周的早些時(shí)候、上周、上個(gè)月”)。下面是界面圖片:
想必不用多解釋,此案例中“今天”的配色是明度最高的,因其是“今天”共享進(jìn)來的。時(shí)間越之前,明度越暗:弱化注意力。越是之前的,越可能是已經(jīng)閱讀過了的、無需關(guān)注的。
應(yīng)用在 PPT 上,想象一個(gè)場景:時(shí)間軸式的事件圖,若時(shí)效性較強(qiáng),可逐漸改變明度。若特征不是時(shí)效性,是某幾個(gè)關(guān)鍵時(shí)刻,那么關(guān)鍵時(shí)刻就用明度高的,其余的依次弱化。
為什么說不要把 Modern UI 理解為“色塊堆砌”,其中一個(gè)原因:用色是有講究的,即使是大純色塊,也不是亂用的。重點(diǎn)不在于“大的純色塊”這樣的視覺表象,而是用色塊表現(xiàn)了什么、突出了什么、弱化了什么、起到了怎樣的交互引導(dǎo)作用、產(chǎn)生了什么樣的品牌形象、怎樣提升了用戶的操作效率等。
四、排布與對齊本節(jié)末尾有提供官方干貨哦。——欸別急,先看再下。
寫在最前:我所見過許多想模仿“磁貼”卻模仿不到位的,很大問題出在“磁貼間距”上,要么太離散,要么靠得太近。間距是直接影響到“像不像”的一個(gè)因素。
1、使用網(wǎng)格系統(tǒng)(要做出嚴(yán)苛精確的界面)
在設(shè)計(jì) PPT 時(shí)候,記得用網(wǎng)格。
網(wǎng)格由單元和子單元組成。測量的基本單位就是單元。一個(gè)單元等于 20 × 20 像素。每個(gè)單元進(jìn)一步細(xì)分為 5 × 5 像素的子單元。每個(gè)方形單元有 16 個(gè)子單元。下面這張圖描述了屏幕左上角處的網(wǎng)格。放大該圖像即可顯示像素、子單元以及單元。
2、頁眉
頁眉的基線應(yīng)該為距離頂部 5 個(gè)單元或 100 個(gè)像素。頁眉的左邊距為 6 個(gè)單元或 120 個(gè)像素。Windows 8 頁眉為 Segoe UI 樣式集 20 細(xì)線。
(還有一些用于程序設(shè)計(jì)的 UX 事項(xiàng),比如 Windows 8.1 中鼠標(biāo)觸頂會(huì)出現(xiàn)標(biāo)題欄,設(shè)計(jì)時(shí)要考慮元素不會(huì)被遮擋。這些內(nèi)容就不贅述了,PPT 制作中基本沒人去寫這種交互。)
這很適合用來填寫 PPT 的頁標(biāo)題(如果頁面不是只有這一個(gè)標(biāo)題的話)?梢韵茸瞿赴妫ê梦,這樣就很方便,不用每次去調(diào)整。
3、內(nèi)容區(qū)域
內(nèi)容區(qū)域的上邊距為 7 個(gè)單元或 140 個(gè)像素。左邊距為 6 個(gè)單元或 120 個(gè)像素。下邊距非常靈活。對于水平平移的內(nèi)容,應(yīng)該不超過 6.5 個(gè)單元(130 個(gè)像素),且不少于 2.5 個(gè)單元(50 個(gè)像素)。 對于垂直平移的內(nèi)容,上邊距和左邊距保持不變。由于內(nèi)容滾出屏幕,因此未指定下邊距。
用在 PPT 上是很科學(xué)的。我們按 16:9 的屏幕來講(2013 版之后默認(rèn)的比例),尤其內(nèi)容的左側(cè),不能靠太近邊緣,因?yàn)闄M向本身就比較長,要達(dá)到平衡。
4、水平填充值
內(nèi)容項(xiàng)之間的水平填充因項(xiàng)而異。對于明邊項(xiàng)(如圖像和用戶磁貼),磁貼和隨附文本之間的填充為 2 個(gè)子單元或 10 個(gè)像素。對于列表,列之間的填充為 2 個(gè)單元或 40 個(gè)像素。對于明邊項(xiàng),列之間的填充為 2 個(gè)子單元或 10 個(gè)像素。
這里就涉及到開頭說的“間距”的問題啦~ 規(guī)定是磁貼間間隔 10 像素。開始屏幕上的每塊磁貼都是有 1 px 的邊框的哦,那個(gè)邊框就包含在“10 像素的間距”之中。也就是說,除去邊框,還有 8 px 的空間。
這里就不舉反例了,相信大家都曾經(jīng)見到過,嗯。如果你實(shí)在沒把握,可以把開始屏幕或者其他的截屏一下,放進(jìn) PPT,然后用圖形臨摹重疊,再刪除截屏。
5、垂直填充值
內(nèi)容項(xiàng)之間的垂直填充也因項(xiàng)的類型而異。 對于磁貼和文本列表,行內(nèi)項(xiàng)之間的垂直填充為 1 個(gè)單元或 20 個(gè)像素。對于明邊對象,行內(nèi)項(xiàng)之間的填充為 2 個(gè)子單元或 10 個(gè)像素。
6、組之間的水平填充
組之間的填充為 4 個(gè)單元或 80 個(gè)像素。此填充足夠大,在用戶平移時(shí)足以輕松辨別組。
嗯,分組。不過 PPT 中應(yīng)該很少會(huì)用到組的樣式吧……
再給大家提供幾張圖,是微軟用作為講解案例的:
可以說,排布和對齊,是很大程度影響到你的 Modern UI 看起來“正不正宗”或者說“像不像”的關(guān)鍵因素之一。
寧可多花一點(diǎn)時(shí)間在對齊和排布上。另,PowerPoint 中的“對齊”功能挺好用的。
說了這么多,你一定在找干貨……好的,這就給你!
等等!這是側(cè)重排布與對齊以及模塊樣式的,不是側(cè)重用色的。
用于 PowerPoint 的設(shè)計(jì)模板: https://go.microsoft.com/fwlink/p/?LinkId=325041
用于 Photoshop 的設(shè)計(jì)模板: ttps://go.microsoft.com/fwlink/p/?LinkId=325040
用于 Illustrator 的設(shè)計(jì)模板: https://go.microsoft.com/fwlink/p/?LinkId=325039
這些資產(chǎn),適合用于 PPT 某些頁面的設(shè)計(jì)(看起來更接近 Modern UI)、適合用于應(yīng)用的 UI 設(shè)計(jì)。但是記得,我們很難用 PPT 達(dá)到動(dòng)態(tài)磁貼的效果,也是 Modern UI 的一個(gè)精髓所在。要想方設(shè)法讓你靜態(tài)的頁面內(nèi)容達(dá)到“一目了然”和”突出重點(diǎn)”的狀態(tài)。
剛剛給了一些干貨。
那么就來說說,這些干貨你準(zhǔn)備怎么用?可不是亂搭的呀寶貝們……
就舉個(gè)實(shí)例吧,表單的布局。或者說,把表單換成一行行內(nèi)容,對應(yīng)進(jìn)去就好啦。
先給一張各種元素的建議大小,包括間距:
之所以說表單,就是想拓展一下。不僅僅是用于 PPT。比如你要用 Modern UI 來設(shè)計(jì)一張或多張打印出來的填表,就能注意到。
下面是使用單列布局的短表單示例:
下面是使用單列布局的較長表單示例:
請不要嘗試將大量內(nèi)容置于一個(gè)非常長的表單中,而是考慮將任務(wù)分成多個(gè)組或多個(gè)表單序列。下面是分為多個(gè)組的較長表單示例(比如你設(shè)計(jì)的問卷,一長串連在一起,對方看到就覺得很多,看著不舒服,帶來一種煩躁感。這不是 Modern UI 所提倡的,而應(yīng)該簡單化,有焦點(diǎn)。因此要分頁):
下面是分為多個(gè)頁面的較長表單示例:
何時(shí)使用兩列布局?
將兩列布局用于僅能進(jìn)行有限垂直平移的短表單。 兩列布局在橫向充分利用了屏幕空間。 請記得為兩列之間保留足夠的用于裝訂線的空間。
下面是使用兩列布局的表單示例:
此外,我想分享一個(gè)大家應(yīng)該都見過的表單設(shè)計(jì):
五、圖標(biāo)圖標(biāo)使用最少的部分和細(xì)節(jié),可以提取和簡化概念。它們在本質(zhì)上是圖形,并且采用平面透視效果和單色,強(qiáng)化了內(nèi)容重于版式的思想。
透視
的圖標(biāo)是二維符號(hào)形狀。圖標(biāo)可以巧妙地暗示體積或深度,但我們一般避免增加透視線或角度。大多數(shù)圖標(biāo)代表一個(gè)概念或?qū)ο。如果一個(gè)圖標(biāo)代表一個(gè)以上的對象,前面的對象“擠出”后面的對象。
“擠出”一個(gè)對象意味著當(dāng)圖標(biāo)中的一個(gè)元素顯示為覆蓋另一元素時(shí),覆蓋操作將創(chuàng)建一個(gè)與背景顏色匹配的間隙。
顏色
圖標(biāo)的主要顏色是純白色。白色是可以在大多數(shù)具有豐富的彩色背景的顏色上下文(如應(yīng)用磁貼和應(yīng)用欄)中很好地顯示的單一顏色。
生產(chǎn)
建議使用矢量繪制所有圖標(biāo),尤其是在 Adobe Illustrator 或 Expressions Design 中。將矢量形狀貼靠在字形系統(tǒng)中是至關(guān)重要的。Windows 圖標(biāo)必須有清晰、干凈的邊緣。
圖標(biāo)不只是提供功能。還有助于將用戶與應(yīng)用的總體構(gòu)想聯(lián)系起來,甚至可以喚起對應(yīng)用的良好情感。圖標(biāo)不但要透出品牌的個(gè)性,而且要保持界面的效率。
另外,來說說 Segoe UI Symbol 圖標(biāo)。用這些圖標(biāo)會(huì)顯得你的 Modern UI 更加接近原本的設(shè)計(jì)。
大部分此類字形在提供時(shí)其間距為零。你可以在每個(gè)零寬度字形上放置其他零寬度字形。例如,如果你插入零寬度的紅色的實(shí)心 (U+E00B),光標(biāo)不會(huì)跑到心形的末尾,因?yàn)槠鋵挾葹榱恪H缓,如果你插入黑色的心形輪?(U+E006),則心形輪廓會(huì)放置在實(shí)心之上。
大部分圖標(biāo)還具有鏡像樣式,以供使用雙向文本的語言使用。
這里提供一些 Unicode ID。
紅心大戰(zhàn)
星形評級
復(fù)選框組件
單選按鈕
雜項(xiàng)
滾動(dòng)條
漸進(jìn)式公開箭頭
后退按鈕
后退按鈕的字形提供了 3 種不同大小,以便外環(huán)的權(quán)重等于 16pt、20pt 和 42pt。這些字形設(shè)計(jì)用于支持分層。
HTML 的后退箭頭
記得添加其他代碼,創(chuàng)建環(huán)繞這些字形的圓環(huán)。
用于控制的圖標(biāo)的字形
這些字形設(shè)計(jì)為以 14pt 大小顯示。記得使用其他代碼,創(chuàng)建環(huán)繞這些字形的圓環(huán)。
六、動(dòng)畫如果你有心做動(dòng)畫,喜歡折騰搗鼓,那就試試吧。PowerPoint 中部分動(dòng)畫的“平滑結(jié)束”比較用得上,但至今配合動(dòng)畫延遲也沒有嘗試出完全相同的程度。Modern UI 中很多動(dòng)畫的“位移-時(shí)間”圖像是曲線。
1、底部 Action Bar:https://content5.ssl.catalog.video.msn.com/e2/ds/42bad77c-661f-457f-ad89-9fdf0742d807.mp4
這個(gè)使用進(jìn)入動(dòng)畫“飛入” – 從底部 – 持續(xù)時(shí)間和平滑結(jié)束時(shí)間自行設(shè)定。
2、隱藏面板 Charm:https://content5.ssl.catalog.video.msn.com/e2/ds/629ed613-3265-42f6-878c-c057313643d3.mp4 設(shè)定方式與上一條同理。但視頻中還是早期樣式,Windows 8.1 中面板與其上的文字有動(dòng)畫延遲,顯得更有活力。視頻中文字內(nèi)容和面板還是一個(gè)整體。要做新樣式,將文字內(nèi)容與底部面板分離,設(shè)置動(dòng)畫延遲。
3、彈出動(dòng)畫:https://content3.ssl.catalog.video.msn.com/e2/ds/2a38b01a-a40b-491e-8802-5a9572a123a2.mp4 包括一個(gè)平移,它是在彈出元素淡入時(shí)從初始位置到最終位置的垂直移動(dòng)。平移距離和方向由應(yīng)用指定。在大多數(shù)情況下,平移應(yīng)為 50 像素,以向上方向移動(dòng)。不過,如果彈出元素顯示在觸發(fā)彈出的 UI 元素下方,則平移應(yīng)是向下移動(dòng) 50 像素。例如,此下載平移將適用于從導(dǎo)航欄或從應(yīng)用標(biāo)題觸發(fā)的浮出控件。這是為了向用戶提供彈出元素與其觸發(fā)元素之間的可視鏈接。
更多動(dòng)畫自行操作、觀察。
我是從介紹其設(shè)計(jì)準(zhǔn)則這個(gè)角度來回答如何制作這種風(fēng)格的 PPT 的,試圖把重點(diǎn)的一部分呈現(xiàn)出來,整理下大家紛亂的感知,我認(rèn)為這樣做更實(shí)際。
這是我看到的一個(gè)提煉:
Metro UI設(shè)計(jì)具備以下五點(diǎn)原則:
1. 干凈、輕量、開放、快速
2. 要內(nèi)容,而不是質(zhì)感
3. 整合軟硬件
4. 世界級的動(dòng)畫
5. 生動(dòng),有靈魂
# 注釋 #
在【一、字體】中提及的 SS01 樣式,出現(xiàn)了一些復(fù)雜的情況,感謝 @prox 用心的查證,手動(dòng)點(diǎn)贊!因 @prox 網(wǎng)絡(luò)問題無法發(fā)表,在這里貼出他的修正內(nèi)容:
Segoe UI 的兩種造型?
@佳偉發(fā)現(xiàn)列出的 Segoe UI 字體,字形竟然是不一致的。
作為 Segoe UI 的粉絲,我不辭勞苦(?)地找到了一臺(tái) Windows 7 電腦,使用 QQ 遠(yuǎn)程協(xié)助截下了如下珍貴圖像。po主真的很拼……
這是 Windows 7 下的 Segoe 字體集。
在圖中,發(fā)現(xiàn)了兩個(gè)名為“Segoe UI 常規(guī)”的文件。它們分別是這樣的:
顯然這兩種字形是不一致的。第二種,通常我們認(rèn)為是微軟雅黑的西文樣式。注意兩個(gè)字體文件版本號(hào),可見下圖版本號(hào)更低。
我想這大概就是佳偉截圖中出現(xiàn)兩種不同樣式的 Segoe 的原因了:微軟中途發(fā)布了新版本的 Segoe 字體。
我找到了這樣一個(gè)鏈接:Segoe UI Light
?其中有這樣一行:
可見表格當(dāng)中并未列出這個(gè) 5.11 版本。推測,這可能只是一個(gè)臨時(shí)的、中間的、不正式的版本。
Segoe 字體本身是不包括中文的。微軟當(dāng)前對它的用法是,與微軟雅黑中文搭配成新版 YaHei Light,或與方正中等線搭配成 Windows Phone 自帶 DengXian 字體。所以呢,也許是 5.11 版本打包的時(shí)候出錯(cuò)了,直接將一整套微軟雅黑扔了進(jìn)去……(注意5.11與其他任何版本的中 文字體都不一樣,其他的選擇了默認(rèn)宋體作為中文字體缺失時(shí)的替換展示字體,而 5.11 版本帶有雅黑)
Bing 的搜索結(jié)果也傾向我的推測。
因此,Segoe 就是這樣的:
并非為了兼容 Windows 7 而把自己改成 YaHei UI Regular 的樣子。
再次感謝!
設(shè)計(jì)師為此付出了艱辛勞動(dòng),程度之大是我們無法想象到的。
它傾注了設(shè)計(jì)師多年的用心探索、大量的資料、不斷推翻改進(jìn)的設(shè)計(jì)。不然,何以成為微軟整個(gè)公司轉(zhuǎn)型而確定的設(shè)計(jì)風(fēng)格呢。
那些令人尊敬的人們,現(xiàn)在或許正為未來五年或十年的設(shè)計(jì)風(fēng)格而探索著。
設(shè)計(jì)規(guī)則是人定的,為了更好地展現(xiàn)。那么規(guī)則也是可變的。期待 Modern UI 的不斷精進(jìn)!
(按當(dāng)時(shí) Windows 8 的開發(fā)情況,最終的配色方案和 UI 是在零售版中露面的。而有人聲稱 Windows 10 每個(gè)外放的預(yù)覽版本都會(huì)暫時(shí)封鎖一部分功能,這也是展示的 9841 和下載下來的 9841 有多處不同的原因了。那么沒有理由不相信 Windows 10 最終會(huì)擁有一套漂亮的界面!鑒于保密工作越發(fā)嚴(yán)謹(jǐn),大家還是等正式發(fā)布的那天吧!→ 如果過早曝光,沒了驚喜,那多沒意思嘛^_^)
全篇完結(jié)。
學(xué)習(xí) · 提示
相關(guān)教程
推薦教程
- 色彩知識(shí),講解顏色基礎(chǔ)知識(shí)和配色理論
- 調(diào)色知識(shí),簡單實(shí)用的調(diào)色原理
- 圖片畫冊平面設(shè)計(jì)排版ps理論教程
- 顏色管理,讓自己的照片在網(wǎng)上正確地顯示
- Photoshop初級教程-命令的技巧
- 移動(dòng)設(shè)計(jì),移動(dòng)應(yīng)用導(dǎo)航模式設(shè)計(jì)方法
- 用戶體驗(yàn),分享20個(gè)有影響力的包裝設(shè)計(jì)
- 設(shè)計(jì)界面最常用最舒服的12種顏色(含色
- UI知識(shí),尺寸對UI設(shè)計(jì)的影響
- 用戶體驗(yàn),如何讓用戶心動(dòng)?