PConline 資訊】今天微軟已經(jīng)正式推送Windows 10正式版，部分用戶已經(jīng)收到了推送并升級成功，好些網(wǎng)友已經(jīng)在用Win10系統(tǒng)看我們的文章了！

日常工作離不開窗口，尤其對于并行事務較多的桌面用戶來說，沒有一項好的窗口管理機制，簡直寸步難行。相比之前的操作系統(tǒng)，Win10在這一點上改變巨大，提供了為數(shù)眾多的窗口管理功能，能夠方便地對各個窗口進行排列、分割、組合、調(diào)整等操作。接下來，小編就為大家列舉幾項比較常見的窗口管理功能，希望能對大家有所啟發(fā)。

圖01 Win10多窗口排列技巧

一. 按比例分屏

Aero Snap是Win7時代增加的一項窗口排列功能，俗稱“分屏”。一個最簡單例子，就是當你把窗口拖至屏幕兩邊時，系統(tǒng)會自動以1/2的比例完成排布。在Win10中，這樣的熱區(qū)被增加至七個，除了之前的左、上、右三個邊框熱區(qū)外，還增加了左上、左下、右上、右下四個邊角熱區(qū)以實現(xiàn)更為強大的1/4分屏。同時新分屏可以與之前的1/2分屏共同存在，具體效果如下圖所示。

圖02 Win10分屏熱區(qū)示意圖（藍色：1/2分屏 紅色：1/4分屏）

圖03 一個窗口分屏結(jié)束后，Win10會自動詢問用戶另一側(cè)打開哪個窗口，這項功能被稱為“分屏助理”

二. 非比例分屏

雖然Snap Mode的使用非常方便，但過于固定的比例或許并不能每次都讓人滿意。比方說當你覺得左側(cè)的瀏覽器窗口應該再大點兒的話，就應該手工調(diào)整一下窗口間的大小比例了。

在Win10中，一個比較人性化的改進就是調(diào)整后的尺寸可以被系統(tǒng)識別。比方說當你將一個窗口手工調(diào)大后（必須得是分屏模式），第二個窗口會自動利用剩余的空間進行填充。這樣原本應該出現(xiàn)的留白或重疊部分就會自動整理完畢，高效的同時也省了用戶很多事。

圖04 當一個窗口被手工調(diào)整尺寸后，Win10會自動調(diào)整后續(xù)分屏窗口的默認比例，以便填滿整個空白

三． 層疊與并排

如果要排列的窗口超過4個，分屏就顯得有些不夠用了，這時不妨試一試最傳統(tǒng)的窗口排列法。具體方法是，右擊任務欄空白處，然后選擇“層疊窗口”、“并排顯示窗口”、“堆疊顯示窗口”。選擇結(jié)束后，桌面上的窗口會瞬間變得有秩序起來，可以明顯感覺到不像以前那么擋手了。最為關鍵的是，Modern應用也能使用這一功能，相比Win8或Win8.1是一個進步。

圖05 更多窗口可使用傳統(tǒng)的窗口排列功能

圖06 “層疊窗口”效果

圖07 “堆疊窗口”效果

圖08 “并排窗口”效果（與“堆疊”最大的不同就是堆疊僅僅分成兩列，其余窗口縱向排列）

四． 虛擬桌面

此外“虛擬桌面”也可看作是Win10中一項另類的窗口管理功能，因為它的意思很明確，放不下的窗口直接扔到其他“桌面”就行了！

圖09 虛擬桌面視圖

虛擬桌面的打開可以使用任務欄按鈕，當然也可按下快捷鍵Win+Tab。按下按鈕后，系統(tǒng)會自動展開一個桌面頁，通過最右側(cè)的“新建桌面”建立新桌面。當感覺到當前桌面不夠用時，只要將多余窗口用鼠標拖至其他“桌面”即可，簡單卻很方便。

圖10 “多余”的窗口可直接拖拽到其他桌面

寫在最后

當然類似的技巧在Win10中還有很多，對于一款操作系統(tǒng)而言，Win10不僅僅對應于各類炫酷功能，簡單高效也是它的一大看點。

前，設計行業(yè)存在多種設計軟件，在互聯(lián)網(wǎng)產(chǎn)品設計領域，Sketch已經(jīng)取代了PS成為主流的視覺設計軟件，并有逐漸取代Axure來進行交互設計的趨勢。然而，相對于交互原型工具Axure而言，sketch不支持交互動效設計，同時，導出的HTML文件的排序需要人為干預，不能自動體現(xiàn)頁面的邏輯關系。因此，很多銜接sketch的軟件完成動效設計的軟件應運而生，包括Flinto、Principle。其中，Principle+Sketch被稱為UI設計的黃金搭檔。

相較于Flinto，Principle強大的動效預置，可以極大的減少動效設計的時間，并能完成出較為優(yōu)質(zhì)的動效設計。在效率為王的互聯(lián)網(wǎng)產(chǎn)品時代，Principle確實是一款適合交互設計師使用的動效軟件。

下面，我們就詳細了解一下principle。

一. 主要功能

目前版本的Principle，就動效設計功能方面，相較于Axure、AE而言，要簡單很多。它是一款主要用來銜接交互原型與動態(tài)效果呈現(xiàn)的動效制作軟件，其功能可分為五大類，分別是基礎功能、Create Component（組件）、Animate（時間軸）、Drivers（聯(lián)動）以及頁面動效。

主要功能

1. 基礎功能

基礎功能包括矩形、文字工具，導入功能，群組、Mirror、上/下一層。目前自定義工具僅支持矩形（快捷鍵R）和文字工具（快捷鍵T），因此在制作頁面動效時，需要從sketch中導入或copy頁面元素，來完成頁面動效。在矩形工具的基礎上，可以延伸出正方形、圓型、圓角矩形。

導入功能是銜接sketch的主要接口，每次只能導入已打開sketch文件的一個page頁面中的元素。在導入sketch文件時，比較省事的做法是，在文件中新建一個page，作為導入素材的入口，同時，page可以重復導入，最新導入的頁面（不同頁面元素）會放到最后。Principle中的畫板大小與最后一次的畫板大小保持一致，因此導入的畫板也要保持一致。

群組、上/下一層的功能操作與sketch一致。Mirror是用來在制作手機應用時，在手機端進行預覽操作的功能，目前只支持Apple的產(chǎn)品連接。

2. 組件

組件（Create Component）與Axure中的元件庫、sketch中的symbol類似，可以包含動效，支持在不同principle文件中進行復制、粘貼。這是一個實用的功能，如《動效設計-交互設計的最后一公里（一）》中的菜單動效、加載動效等，就可以制作成組件，在其他項目中可以作為動效控件加以應用，直接復制、粘貼即可。由此，可以推演提煉出動效設計控件，在版本迭代中可以在動效方面保持產(chǎn)品氣質(zhì)的延續(xù)性。

3. 時間軸

時間軸（Animate）是對AE時間軸的一種簡化，不能進行K幀(此處有疑問者，請參考本系列文章《動效設計-交互設計的最后一公里（一）》），只能控制某一動效在時間維度上的起止位置以及持續(xù)時間。另外，元素的運動形式也可以在時間軸上進行設置調(diào)整，包括：默認、緩入、緩出、緩動、彈性、線性、無等七種運動形式，同時可以對前五種進行曲線調(diào)節(jié)。

運動形式及調(diào)節(jié)

4. 聯(lián)動

聯(lián)動（Drivices）是對時間軸功能的補充與擴展。Principle主要應用于制作移動端產(chǎn)品的交互、動效設計，相較于web頁面，移動端設備主要是觸屏操作，包括點擊、拖動、滑動等，這些元素之間的關系是位置上的聯(lián)動關系，而不是時間上的。

5. 頁面動效

頁面動效包括靜態(tài)、拖拽、滾動、翻頁四類。嚴格意義，頁面動效并不是獨立的功能，需要配合Drivices來使用。因此，在確定了滾動、拖拽、翻頁以后，選擇一個觸發(fā)操作元素，在Drivices中，對其在不同位置的節(jié)點處K關鍵幀，同時，將聯(lián)動元素在不同節(jié)點處的變化進行調(diào)整，進而形成位置關系上的聯(lián)動。

二. 優(yōu)勢

相較于其他工具，Principle的優(yōu)勢還是比較明顯。基于其優(yōu)勢，Principle在合適的動效設計上效率非常高，同時動效的質(zhì)量也比較高。整體來說，Principle的優(yōu)勢如下：

1. 擁有sketch的頁面布局

猶如PS/AI與AE之間的關系，Principle與sketch之間存在著很多相似之處，包括頁面布局及風格、快捷鍵等，很好的讓交互設計與動效設計進行銜接，減少了動效工具的學習成本。sketch文件的導入可以實時進行，此時的sketch文件猶如動效設計階段的組件，在動效設計過程中，需要哪一個頁面，就可以將頁面單獨導入，減少了頁面的復雜度。

Principle軟件界面

2. 補間動畫

源于Flash的補間動畫幾乎是所有動效工具的特點，也是保持動效流暢的主要環(huán)節(jié)。相較于其他工具的補間動畫，Principle的補間動畫是預設的，并且經(jīng)過實際的實驗驗證，可以直接使用。如上文中所描述，principle的效果預設是隱藏在動效的時間軸上，在設置動效持續(xù)時長的同時，調(diào)整其運動樣式與效果。另外，補間動畫的形式與節(jié)奏會自動統(tǒng)一到整個動效設計中，即新建的動效預設與上一次的預設保持一致。

補間動畫

如上圖，制作出動畫的起點與終點畫面，在兩個畫面之間制動生成補間動畫，通過調(diào)整補間動畫的運動形態(tài)與樣式，完成動效的制作。

3. Keynote的神奇移動效果

熟悉keynote的小伙伴應該知道，其最大的亮點就是神奇移動。在Principle中，元素的運動變化原則與Keynote一致，即若兩個畫板中兩個元素的命名一樣，在畫板切換過程中，則默認該元素從畫板一的樣式漸變到畫板二的狀態(tài)，包括顏色、位置、透明度、形狀等，但前提是該元素是可編輯的，而不是圖片。這種神奇移動的效果保證了動效的連續(xù)性與流暢性。

類似Keynote的”神奇移動”

對于變化的形式、速率以及時機可以在Animate中進行調(diào)節(jié)。

4. 簡易方便的Animate

Animate是用來控制補間動畫的節(jié)奏、形式、時間以及時機等，其控制較為粗糙，不如AE的時間細致。在神奇移動的案例中，元素的變化有長、高、旋轉(zhuǎn)、透明度四種，在Animate中可以控制每種變化的開始時間（錯幀）以及持續(xù)的時長，來控制動效效果。同時，其動效形式的預設與比較符合用戶的心理預期，在動效節(jié)奏的調(diào)整上可以節(jié)省較多的時間。

Animate面板

5. 類似Origami的事件管道拖拽

類似Origami的事件管道拖拽該功能指的就是Drivice，這也是Principle在移動端產(chǎn)品設計中的優(yōu)勢所在。Animate是時間與元素變化效果之間的映射關系，那么，Drivices就是一個元素的坐標位置與其他元素變化效果的映射關系。這個面板在拖動等的操作中應用的極為廣泛，可以逼真的模擬觸控操作中的位置映射關系。

Drag的Drivice應用

在示例中，設置的滑塊位置與矩形形狀圓角大小、旋轉(zhuǎn)的映射，實現(xiàn)滑動調(diào)節(jié)圓角大小與旋轉(zhuǎn)的效果。

三. 劣勢

一個工具的優(yōu)勢較為明顯，往往其缺點（限制）也較為突出，Principle也是一樣。根據(jù)作者多個項目的時間經(jīng)驗，發(fā)現(xiàn)了以下較為突出的缺點：

1. Principle不太適合整體產(chǎn)品的動效設計。Principle的畫板是橫向順序排列，用戶不能自定義其位置，因此其畫板數(shù)量不易過多，否則頁面管理將會使人崩潰。Principle比較適合核心功能、局部頁面或頁面細節(jié)動動效設計。

2. 動效預設質(zhì)量比較高，但自定義形式較弱。Principle的動效變化形式，包括顏色、大小、位置、透明度、形變（極少）等，這就限制了設計師對動效的修改與再創(chuàng)作。因此，Principle比較適合做轉(zhuǎn)場類、入場類以及引導類動效，但是對于牽涉到復雜形變、效果的品牌與反饋類動效，就是Principle所鞭長莫及的了。

3. 對于Sketch導入的元素，有些是不能編輯的，包括文字、symbol以及有些群組。這就導致在這些元素的動效變化時，就需要在Principle中重新制作。

4. Principle中每一個畫板相當于一個一個關鍵幀，對于已經(jīng)完成的動效設計，在過程中新增關鍵幀（畫板）會比較繁瑣，需要刪除兩個關鍵幀之間的動效鏈接，然后新增一個畫板，最后將新增畫板與前后的畫板進行鏈接，形成新的動效。這也是在Principle比較適合順序K幀的原因。

5. Principle效果文件的導出僅支持GIF與mov格式的導出。其導出是對操作的錄制，因此，對自動類型動畫的錄制開始的時機較難把握，如果有必要需要其他軟件進行剪切編輯。

四. 技巧與特點

Principle的動效制作原理與AE不同，因此，其特點與應用技巧也略有差異。在長時間使用Principle以后，對于一些功能的特殊使用方式也有一些心得：

1. Principle動效中，元素屬性的變化是通過不同屬性節(jié)點之間形成補間動畫形成的，Principle識別不同畫板之間的元素是通過名稱的一致性。名稱一致，則該元素在兩個畫板之間會順暢的形成補間動畫（是可編輯元素），因此若下個頁面中要出現(xiàn)某個元素，至少在上一個頁面要存在該元素，否則就會違背動效設計的原則（有始有終、三不）。

2. Principle中每一個畫板就是一個最小單位的節(jié)點關鍵幀，在制作動效時，將連接動效指向主畫板（或自己），復制出新的畫板，然后在新畫板上進行動效元素的變化調(diào)整。這樣可以保證每個畫板中的元素名稱保持一致。

3. 不要將sketch中的整個Page頁面的畫板一起導入Principle，這樣畫板的管理會造成極大的困擾。本人的做法是在sketch中新建一個頁面，作為專門進行導入的入口，同時頁面中的畫板不易過多，最好有一個主頁面，其他頁面作為備用素材使用。

4. 對于透明的元素，Principle是不能作為動效鏈接的元素，因此在制作觸控熱區(qū)時不能將透明度降為零，可保持1% 的不透明度。但是，即使元素的透明度為零且不能作為鏈接元素，被該元素完全覆蓋的其他元素也是不能作為鏈接元素，這時可以選中該元素，勾選touchable，就可以被點擊到。

5. Principle中的旋轉(zhuǎn)是以元素的物理中心為圓心進行旋轉(zhuǎn)的。若要制作元素圍繞一個點進行旋轉(zhuǎn)時，可以以該點作為中心對稱的點建一個同樣的元素，并將二者進行群組，將其中一個的透明度改為零，這樣群組的中心點就在旋轉(zhuǎn)中心了。

6. principle中的群組是單獨一個元素，其大小是可以自定義的，不是由群組的元素大小所確定的，并且群組可以作為一個元素進行鏈接對象制作動效。因此，在這種特性下，可以將群組作為熱區(qū)使用或用來調(diào)整元素的旋轉(zhuǎn)中心等。

其特點不止于此，有很多技巧等待你去發(fā)掘……

到目前為止，作者已經(jīng)完成了若干線性加載動效控件的制作，如下圖：

Loading

我們以其中一個案例的制作，結(jié)束本次對Principle的探討。

加載動效

五. 示例講解

第一步：新建直徑分別為9、7、5、3、1的圓形，圓形的直徑要是連續(xù)的奇數(shù)或偶數(shù)，保證圓形能夠絕對的居中對齊。

新建原型

第二步：將每個圓單獨群組，并調(diào)整其群組的高度，分別為54、52、50、48、46，并將其進行居中對齊。上文中已經(jīng)提起，群組的中心可以作為整體旋轉(zhuǎn)中心，因此，最大的群組高度就是最終動效的直徑。選擇所有群組，將其左右居中對齊。

調(diào)整群組高度

第三步：選中畫板，點擊右側(cè)出現(xiàn)的小閃電圖標，選擇最后一個指向畫板1，產(chǎn)生一個新的畫板，并選中畫板2中的所有群組，修改旋轉(zhuǎn)角度為360°。

起始畫板樣式

新畫板

第四步：在Animate中修改每個動效條的長度為1s，根據(jù)半徑，從大到小，以此錯幀（0.2s）。動效條的長度決定了一個元素旋轉(zhuǎn)一周的時長。錯幀可以實現(xiàn)元素的跟隨效果，錯幀的時長控制了兩兩元素在運動過程中的距離，同時還受到整體時長的影響。

Antimate調(diào)節(jié)

第五步：按照第三步的方式，以第二個畫板為基礎，產(chǎn)生第三個畫板，并將第三個畫板中的其他元素全部刪除，只保留半徑最大的圓，修改其名稱不與其他元素重名。如果沒有第三個畫板，直接指回第一個畫板，畫面中的元素會出現(xiàn)逆向的運動，即每個群組會將旋轉(zhuǎn)角度變回0°，回到第一個畫板的狀態(tài)。

制作替身

第六步：選中最后一個畫板，按照步驟三，將箭頭指向第一個畫板，即可完成該加載動效的制作。

形成閉環(huán)

整體上，整個動效的制作時間只有5分鐘，效率遠遠高于AE，這正是Principle的優(yōu)勢所在。

另外，需要加載案例工程文件的童鞋，可以到百度云盤中下載：

鏈接：https://pan.baidu.com/s/17KWy1yEMRCKB4ip9-3T9ug

密碼：d3j0