整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
PConline 資訊】今天微軟已經(jīng)正式推送Windows 10正式版，部分用戶已經(jīng)收到了推送并升級(jí)成功，好些網(wǎng)友已經(jīng)在用Win10系統(tǒng)看我們的文章了！
日常工作離不開窗口，尤其對(duì)于并行事務(wù)較多的桌面用戶來說，沒有一項(xiàng)好的窗口管理機(jī)制，簡(jiǎn)直寸步難行。相比之前的操作系統(tǒng)，Win10在這一點(diǎn)上改變巨大，提供了為數(shù)眾多的窗口管理功能，能夠方便地對(duì)各個(gè)窗口進(jìn)行排列、分割、組合、調(diào)整等操作。接下來，小編就為大家列舉幾項(xiàng)比較常見的窗口管理功能，希望能對(duì)大家有所啟發(fā)。
圖01 Win10多窗口排列技巧
一. 按比例分屏
Aero Snap是Win7時(shí)代增加的一項(xiàng)窗口排列功能，俗稱“分屏”。一個(gè)最簡(jiǎn)單例子，就是當(dāng)你把窗口拖至屏幕兩邊時(shí)，系統(tǒng)會(huì)自動(dòng)以1/2的比例完成排布。在Win10中，這樣的熱區(qū)被增加至七個(gè)，除了之前的左、上、右三個(gè)邊框熱區(qū)外，還增加了左上、左下、右上、右下四個(gè)邊角熱區(qū)以實(shí)現(xiàn)更為強(qiáng)大的1/4分屏。同時(shí)新分屏可以與之前的1/2分屏共同存在，具體效果如下圖所示。
圖02 Win10分屏熱區(qū)示意圖（藍(lán)色：1/2分屏 紅色：1/4分屏）
圖03 一個(gè)窗口分屏結(jié)束后，Win10會(huì)自動(dòng)詢問用戶另一側(cè)打開哪個(gè)窗口，這項(xiàng)功能被稱為“分屏助理”
二. 非比例分屏
雖然Snap Mode的使用非常方便，但過于固定的比例或許并不能每次都讓人滿意。比方說當(dāng)你覺得左側(cè)的瀏覽器窗口應(yīng)該再大點(diǎn)兒的話，就應(yīng)該手工調(diào)整一下窗口間的大小比例了。
在Win10中，一個(gè)比較人性化的改進(jìn)就是調(diào)整后的尺寸可以被系統(tǒng)識(shí)別。比方說當(dāng)你將一個(gè)窗口手工調(diào)大后（必須得是分屏模式），第二個(gè)窗口會(huì)自動(dòng)利用剩余的空間進(jìn)行填充。這樣原本應(yīng)該出現(xiàn)的留白或重疊部分就會(huì)自動(dòng)整理完畢，高效的同時(shí)也省了用戶很多事。
圖04 當(dāng)一個(gè)窗口被手工調(diào)整尺寸后，Win10會(huì)自動(dòng)調(diào)整后續(xù)分屏窗口的默認(rèn)比例，以便填滿整個(gè)空白
三． 層疊與并排
如果要排列的窗口超過4個(gè)，分屏就顯得有些不夠用了，這時(shí)不妨試一試最傳統(tǒng)的窗口排列法。具體方法是，右擊任務(wù)欄空白處，然后選擇“層疊窗口”、“并排顯示窗口”、“堆疊顯示窗口”。選擇結(jié)束后，桌面上的窗口會(huì)瞬間變得有秩序起來，可以明顯感覺到不像以前那么擋手了。最為關(guān)鍵的是，Modern應(yīng)用也能使用這一功能，相比Win8或Win8.1是一個(gè)進(jìn)步。
圖05 更多窗口可使用傳統(tǒng)的窗口排列功能
圖06 “層疊窗口”效果
圖07 “堆疊窗口”效果
圖08 “并排窗口”效果（與“堆疊”最大的不同就是堆疊僅僅分成兩列，其余窗口縱向排列）
四． 虛擬桌面
此外“虛擬桌面”也可看作是Win10中一項(xiàng)另類的窗口管理功能，因?yàn)樗囊馑己苊鞔_，放不下的窗口直接扔到其他“桌面”就行了！
圖09 虛擬桌面視圖
虛擬桌面的打開可以使用任務(wù)欄按鈕，當(dāng)然也可按下快捷鍵Win+Tab。按下按鈕后，系統(tǒng)會(huì)自動(dòng)展開一個(gè)桌面頁，通過最右側(cè)的“新建桌面”建立新桌面。當(dāng)感覺到當(dāng)前桌面不夠用時(shí)，只要將多余窗口用鼠標(biāo)拖至其他“桌面”即可，簡(jiǎn)單卻很方便。
圖10 “多余”的窗口可直接拖拽到其他桌面
寫在最后
當(dāng)然類似的技巧在Win10中還有很多，對(duì)于一款操作系統(tǒng)而言，Win10不僅僅對(duì)應(yīng)于各類炫酷功能，簡(jiǎn)單高效也是它的一大看點(diǎn)。
頁設(shè)計(jì)基礎(chǔ)知識(shí)
1 網(wǎng)站
網(wǎng)站(Web Site)是一個(gè)存放網(wǎng)絡(luò)服務(wù)器上的完整信息的集合體。它包含一個(gè)或多個(gè)網(wǎng)頁，這些網(wǎng)頁以一定的方式鏈接在一起，成為一個(gè)整體，用來描述一組完整的信息或達(dá)到某種期望的宣傳效果。有的網(wǎng)站內(nèi)容眾多，如新浪、搜狐等門戶網(wǎng)站；有的網(wǎng)站只有幾個(gè)頁面，如個(gè)人網(wǎng)站。
1.2 網(wǎng)頁
網(wǎng)頁（Web Page）實(shí)際上是一個(gè)文件，網(wǎng)頁里可以有文字、圖像、聲音及視頻信息等。網(wǎng)頁可以看成是一個(gè)單一體，是網(wǎng)站的一個(gè)元素。
平常我們所聽說的“新浪”、“搜狐”、“網(wǎng)易”等，即是俗稱的“網(wǎng)站”。而當(dāng)我們?cè)L問這些網(wǎng)站的時(shí)候，最直接訪問的就是“網(wǎng)頁”了。這許許多多的網(wǎng)頁則組成了整個(gè)站點(diǎn)，也就是網(wǎng)站。
1.3 首頁
首頁(Home page)，它是一個(gè)單獨(dú)的網(wǎng)頁，和一般網(wǎng)頁一樣，可以存放各種信息，同時(shí)又是一個(gè)特殊的網(wǎng)頁，作為整個(gè)網(wǎng)站的起始點(diǎn)和匯總點(diǎn)。例如，當(dāng)瀏覽者輸入搜狐網(wǎng)站地址“www.sohu.com”后出現(xiàn)在第一個(gè)頁面，即sohu網(wǎng)站的首頁。
問題：首頁和主頁有區(qū)別嗎？
通常網(wǎng)站為方便瀏覽者查找和分類瀏覽網(wǎng)站的信息，會(huì)將信息分類，并建立一個(gè)網(wǎng)頁以放置網(wǎng)站信息的目錄，即網(wǎng)站的主頁。
并非所有的網(wǎng)站都將主頁設(shè)置為首頁，有的網(wǎng)站喜歡在首頁放置一段進(jìn)入動(dòng)畫，并將主頁的鏈接放置在首頁上，瀏覽者需要單擊首頁的鏈接進(jìn)入主頁。
1.4網(wǎng)頁的表現(xiàn)形式
1.靜態(tài)網(wǎng)頁：客戶端與服務(wù)器端不發(fā)生交互
訪問者只能被動(dòng)地瀏覽網(wǎng)站建設(shè)者提供的網(wǎng)頁內(nèi)容。其特點(diǎn)：
網(wǎng)頁內(nèi)容不會(huì)發(fā)生變化，除非網(wǎng)頁設(shè)計(jì)者修改了網(wǎng)頁的內(nèi)容。不能實(shí)現(xiàn)和瀏覽網(wǎng)頁的用戶之間的交互。信息流向是單向的。
2.動(dòng)態(tài)網(wǎng)頁：客戶端與服務(wù)器端要發(fā)生交互
動(dòng)態(tài)網(wǎng)頁是指瀏覽器可以和服務(wù)器數(shù)據(jù)庫(kù)進(jìn)行實(shí)時(shí)數(shù)據(jù)交流的交互網(wǎng)頁，而不是加上了動(dòng)畫等效果的動(dòng)感網(wǎng)頁。動(dòng)態(tài)網(wǎng)頁技術(shù)的網(wǎng)站可以實(shí)現(xiàn)更多的功能，如用戶注冊(cè)、用戶登錄、搜索查詢、用戶管理、訂單管理等。信息流向是雙向的。
2.1 網(wǎng)站LOGO
1.通常網(wǎng)站為體現(xiàn)其特色與內(nèi)涵，涉及并制作一個(gè)LOGO圖像放置在網(wǎng)站的左上角或其他醒目的位置。
2.企業(yè)網(wǎng)站常常使用企業(yè)的標(biāo)志或者注冊(cè)商標(biāo)。
3.一個(gè)設(shè)計(jì)優(yōu)秀的LOGO可以給瀏覽者留下深刻的印象，為網(wǎng)站和企業(yè)形象宣傳起到十分重要的作用。
2.2 導(dǎo)航條
導(dǎo)航條是網(wǎng)頁的重要組成元素。設(shè)計(jì)的目的是將站點(diǎn)內(nèi)的信息分類處理，然后放在網(wǎng)頁中以幫助瀏覽者快速查找站內(nèi)信息。
導(dǎo)航條的形式多種多樣，包括文本導(dǎo)航條、圖像導(dǎo)航條以及動(dòng)畫導(dǎo)航條等。
有些使用特殊技術(shù)（例如Flash、JavaScript、CSS）制作的導(dǎo)航條還可以具有下拉菜單的功能。
2.3 Banner
Banner的中文意思是橫幅。Banner的內(nèi)容通常為網(wǎng)頁中的廣告。
在網(wǎng)頁布局中，大部分網(wǎng)頁將Banner放置在與導(dǎo)航條相鄰處，或者其他醒目的位置以吸引瀏覽者瀏覽。
2.4 內(nèi)容版塊
網(wǎng)頁的內(nèi)容版塊是整個(gè)頁面的組成部分。
設(shè)計(jì)人員可以通過該頁面的欄目要求來設(shè)計(jì)不同版塊，每個(gè)版塊可以有一個(gè)標(biāo)題內(nèi)容，并且每個(gè)內(nèi)容版塊主要來顯示不同文本信息。
2.5 版尾或版權(quán)版塊
版尾，即頁面最低端的版塊。
這部分位置通常放置網(wǎng)頁的版權(quán)信息，以及網(wǎng)頁所有者、設(shè)計(jì)者的聯(lián)系方式等。
有的網(wǎng)站也將網(wǎng)站的友情鏈接以及一些附屬的導(dǎo)航條放置在這里。
3.1 文本
網(wǎng)頁中的信息以文本為主。與圖片相比，文字雖然不如圖片那樣能夠很快引起瀏覽者的注意，但卻能準(zhǔn)確地表達(dá)信息的內(nèi)容和含義。
3.2 圖片
用戶在網(wǎng)頁中使用的圖片格式主要包括GIF、JPEG和PNG等，其中使用最廣泛的是GIF和JPEG兩種格式。
3.3 超鏈接
超鏈接在本質(zhì)上屬于一個(gè)網(wǎng)頁的一部分，是一種允許用戶同其他網(wǎng)頁或站點(diǎn)之間進(jìn)行連接的元素。
超鏈接是指從一個(gè)網(wǎng)頁指向一個(gè)目標(biāo)的連接關(guān)系，這個(gè)目標(biāo)可以是另一個(gè)網(wǎng)頁，也可以是相同網(wǎng)頁上的不同位置，還可以是一個(gè)圖片、一個(gè)電子郵件地址、一個(gè)文件，甚至是一個(gè)應(yīng)用程序。
3.4 動(dòng)畫
在網(wǎng)頁中為了更有效地吸引瀏覽者的注意，許多網(wǎng)站的廣告都做成了動(dòng)畫形式。
網(wǎng)頁中的動(dòng)畫主要有兩種：GIF動(dòng)畫和Flash動(dòng)畫。其中GIF動(dòng)畫只能有256種顏色，主要用于簡(jiǎn)單動(dòng)畫和圖標(biāo)。
3.5 聲音和視頻
聲音是多媒體網(wǎng)頁的一個(gè)重要組成部分。用于網(wǎng)絡(luò)的聲音文件的格式非常多，常用的有MIDI、WAV、MP3和AIF等。
很多瀏覽器不要插件也可以支持MIDI、WAV和AIF格式的文件，而MP3和RM格式的聲音文件則需要專門的瀏覽器播放。
3.6 表格
在網(wǎng)頁中表格用來控制網(wǎng)頁中信息的布局方式。
包括兩個(gè)方面：一是使用行和列的形式來布局文本和圖像以及其他的列表化數(shù)據(jù)；二是可以使用表格來精確控制各種網(wǎng)頁元素在網(wǎng)頁中出現(xiàn)的位置。
3.7 表單
網(wǎng)頁中的表單通常用來接受用戶在瀏覽器端的輸入，然后將這些信息發(fā)送到網(wǎng)頁設(shè)計(jì)者設(shè)置的目標(biāo)端。這個(gè)目標(biāo)可以是文本文件、Web頁、電子郵件，也可以是服務(wù)器端的應(yīng)用程序。
表單一般用來收集聯(lián)系信息、接受用戶要求、獲得反饋意見、設(shè)置來賓簽名簿、讓瀏覽者注冊(cè)為會(huì)員并以會(huì)員的身份登錄站點(diǎn)等。
3.8 其他常見元素
包括懸停按鈕、Java特效、ActiveX等各種特效。它們不僅能點(diǎn)綴網(wǎng)頁，使網(wǎng)頁更活潑有趣，而且在網(wǎng)上娛樂、電子商務(wù)等方面也有著不可忽視的作用。
4.1 文本編輯器
不僅在記事本中可以編寫HTML代碼，任何文本編輯器都可以編寫HTML。比如寫字板、word等，但保存的時(shí)候必須保存為.html或.htm格式。
有一些文本編輯器專門提供網(wǎng)頁制作及程序設(shè)計(jì)等許多有用的功能，支持HTML、CSS、PHP、ASP、Perl、C/C++、Java、JavaScript、VBScript等多種語法的著色顯示。
例如：Sublime text3、EmEditor、EditPlus、UltraEdit
4.2 Dreamweaver網(wǎng)頁設(shè)計(jì)軟件
這是現(xiàn)在使用最廣泛的網(wǎng)頁編輯工具之一。
Dreamweaver是Macromedia公司推出的網(wǎng)頁編輯工具。
它是一個(gè)所見即所得網(wǎng)頁編輯器，支持最新的DHTML（Dynamic HTML，動(dòng)態(tài)HTML）和CSS標(biāo)準(zhǔn)。采用了多種先進(jìn)技術(shù)，能夠快速高效地創(chuàng)建極具表現(xiàn)力和動(dòng)感效果的網(wǎng)頁，使網(wǎng)頁創(chuàng)作過程變得非常簡(jiǎn)單。
另外還有Microsoft公司開發(fā)的FrontPage也是設(shè)計(jì)網(wǎng)頁和管理網(wǎng)站的軟件。除了所見即所得的編輯功能之外，也可以直接編輯HTML標(biāo)記，讓設(shè)計(jì)者可以輕松的編輯網(wǎng)頁。
4.3 Photoshop圖像處理軟件
Photoshop是Adobe公司推出的功能強(qiáng)大的平面圖像處理軟件，Photoshop在圖像編輯、桌面出版、網(wǎng)頁圖像編輯、廣告設(shè)計(jì)、婚紗攝影等各行各業(yè)的廣泛應(yīng)用，它已成為許多涉及圖像處理的行業(yè)的事實(shí)標(biāo)準(zhǔn)。
4.4 Flash動(dòng)畫設(shè)計(jì)軟件
Flash是Macromedia公司開發(fā)的一款優(yōu)秀的網(wǎng)頁動(dòng)畫開發(fā)軟件，從簡(jiǎn)單的動(dòng)畫到復(fù)雜的交互式Web應(yīng)用程序，它使用戶可以創(chuàng)建任何作品。通過添加圖片、聲音和視頻，可以使Flash應(yīng)用程序媒體豐富多彩。
Flash被稱為“最靈活的前臺(tái)”，其獨(dú)特的編譯方式和跨平臺(tái)的能力，廣泛的應(yīng)用（軟件、游戲、Web應(yīng)用程序、多媒體娛樂等多方面），使之越來越成為一種重要的工具。
4.5 Fireworks網(wǎng)頁圖像處理軟件
Fireworks是Macromedia公司發(fā)布的一款專為網(wǎng)絡(luò)圖形設(shè)計(jì)的圖形編輯軟件，使用Fireworks都不僅可以輕松地制作出尺寸較小的圖形、GIF動(dòng)畫。
如果將Photoshop比作全能的圖像處理大師的話，F(xiàn)ireworks就是精于網(wǎng)頁圖像處理的專家。它在矢量圖形的處理方面有其獨(dú)特之處。
在Web應(yīng)用方面，F(xiàn)ireworks是最早提供切片功能的圖像處理軟件。Fireworks支持在圖像中繪制熱區(qū)并直接生成網(wǎng)頁文檔，并且具備簡(jiǎn)單的GIF動(dòng)畫制作能力，同時(shí)支持將動(dòng)畫轉(zhuǎn)換為Flash文件并嵌入到網(wǎng)絡(luò)中播放。
5.1 CSS
CSS即層疊樣式表（CascadingStyle Sheet）。在主頁制作時(shí)采用CSS技術(shù)，可以有效地對(duì)頁面的布局、字體、顏色、背景和其它效果實(shí)現(xiàn)更加精確的控制。
HTML=內(nèi)容
CSS=表現(xiàn)
CSS帶來的好處：
CSS使頁面載入更快；
CSS可以降低網(wǎng)站的流量費(fèi)用；
CSS使設(shè)計(jì)師在修改設(shè)計(jì)時(shí)更有效率，而代價(jià)更低；
CSS使整個(gè)站點(diǎn)保持視覺的一致性；
5.2 JavaScript
JavaScript是由 Netscape公司開發(fā)的一種腳本語言，可以被嵌入HTML文件中，它是一種基于對(duì)象和事件驅(qū)動(dòng)，并具有安全性能的腳本語言。
在HTML基礎(chǔ)上，使用JavaScript可以開發(fā)交互式Web網(wǎng)頁，可以回應(yīng)使用者的需求事件而不需要通過網(wǎng)絡(luò)來回傳輸資料。
簡(jiǎn)單地說，當(dāng)用戶輸入一項(xiàng)信息時(shí)，不需要先將信息傳給服務(wù)器處理，再傳回來，而是可以直接被客戶端的程序處理。
6.1 網(wǎng)頁布局
網(wǎng)頁布局是網(wǎng)頁設(shè)計(jì)的基礎(chǔ)，目前網(wǎng)頁的布局主要可歸為三大類型：
1．分欄式結(jié)構(gòu)
2．區(qū)域分布式結(jié)構(gòu)
3．無框架局限式結(jié)構(gòu)
分欄式布局
區(qū)域分布式布局
無框架局限式布局
6.2 導(dǎo)航設(shè)計(jì)
1.導(dǎo)航是網(wǎng)頁設(shè)計(jì)中不可或缺的基礎(chǔ)元素之一。導(dǎo)航就如同一個(gè)網(wǎng)站的路標(biāo)，有了它就不會(huì)在瀏覽網(wǎng)站時(shí)“迷路”。導(dǎo)航鏈接著各個(gè)頁面，只要單擊導(dǎo)航中的超級(jí)鏈接就能進(jìn)入相應(yīng)的頁面。
2.導(dǎo)航設(shè)計(jì)的好壞，決定著用戶是否能很方便地使用網(wǎng)站。導(dǎo)航設(shè)計(jì)應(yīng)直觀明確，最大限度地為用戶使用考慮，盡可能使網(wǎng)頁切換更便捷。導(dǎo)航的設(shè)計(jì)要符合整個(gè)網(wǎng)站的風(fēng)格和要求，不同的網(wǎng)站會(huì)采用不同的導(dǎo)航方式。
3.一般來說，在網(wǎng)頁的上端或左側(cè)設(shè)置導(dǎo)航欄是比較普遍的方式。網(wǎng)站采用上端文字作為一級(jí)導(dǎo)航，左側(cè)樹狀結(jié)構(gòu)菜單作為二級(jí)導(dǎo)航。
讓用戶了解當(dāng)前所處的位置；
4.讓用戶能根據(jù)走過的路徑，確定下一步的前進(jìn)方向和路徑；
5.不需要瀏覽太多的頁面才能找到需要的信息，讓用戶能快速而簡(jiǎn)捷地找到所需的信息，并以最佳的路徑到達(dá)這些信息；
6.讓用戶使用網(wǎng)站遇到困難時(shí)，能尋求到解決困難的方法，找到最佳路徑；
7.讓用戶清楚地了解整個(gè)網(wǎng)站的結(jié)構(gòu)概況，產(chǎn)生整體性感知；
8.對(duì)使用頻率不同的信息作有序處理。
7.1 頁面配色
設(shè)計(jì)精美的網(wǎng)站都有其色調(diào)構(gòu)成的總體傾向。以一種或幾種臨近顏色為主導(dǎo)，使網(wǎng)頁全局呈現(xiàn)某種和諧、統(tǒng)一的色彩傾向。
運(yùn)用色系。先根據(jù)網(wǎng)頁主題，選定一種主色，然后調(diào)整透明度或飽和度，也就是將色彩變淺或加深，調(diào)配出新的色彩。這樣的頁面看起來色彩一致，有層次感；一般來說，適合于網(wǎng)頁標(biāo)準(zhǔn)色的顏色有3大系：藍(lán)色、黃/橙色和黑/灰/白色。
使用對(duì)比色。可以充分利用對(duì)比色進(jìn)行設(shè)計(jì)，同時(shí)注意使用灰色調(diào)進(jìn)行調(diào)和。這樣的作品頁面色彩豐富.
7.2 文字藝術(shù)
文字在版面中一般占有絕大部分空間，是網(wǎng)頁信息的主要載體。處理好文字關(guān)系到網(wǎng)頁設(shè)計(jì)的成敗。字體的選擇、字號(hào)的大小、文字的顏色、行與行的距離、段落與段落的安排，都需要認(rèn)真考慮。好的文字設(shè)計(jì)會(huì)給網(wǎng)頁增色不少。
7.3 實(shí)例分析
1．網(wǎng)站描述
這是一家航空公司的網(wǎng)站首頁。界面設(shè)計(jì)給人現(xiàn)代、驛動(dòng)的感覺，這與公司的風(fēng)格相一致。導(dǎo)航設(shè)計(jì)簡(jiǎn)潔利落，很值得學(xué)習(xí)借鑒。
2．布局
網(wǎng)頁布局采用的是比較常見的分欄式結(jié)構(gòu)。A為網(wǎng)站的Logo所在的區(qū)域；B為網(wǎng)站主菜單所在的區(qū)域；C為搜索與其他公共功能所在的區(qū)域；D為網(wǎng)站的內(nèi)容區(qū)域，主要由文字和圖片組成；E為版權(quán)信息所在的區(qū)域。
3．配色
網(wǎng)頁選用藍(lán)色系，象征天空，與網(wǎng)站主題一致。網(wǎng)頁主要運(yùn)用了兩種藍(lán)色，分別是“#14397D”和“1E95BD”。除此之外，網(wǎng)頁文字的配色主要以白色和藍(lán)色為主。快快
前，設(shè)計(jì)行業(yè)存在多種設(shè)計(jì)軟件，在互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)領(lǐng)域，Sketch已經(jīng)取代了PS成為主流的視覺設(shè)計(jì)軟件，并有逐漸取代Axure來進(jìn)行交互設(shè)計(jì)的趨勢(shì)。然而，相對(duì)于交互原型工具Axure而言，sketch不支持交互動(dòng)效設(shè)計(jì)，同時(shí)，導(dǎo)出的HTML文件的排序需要人為干預(yù)，不能自動(dòng)體現(xiàn)頁面的邏輯關(guān)系。因此，很多銜接sketch的軟件完成動(dòng)效設(shè)計(jì)的軟件應(yīng)運(yùn)而生，包括Flinto、Principle。其中，Principle+Sketch被稱為UI設(shè)計(jì)的黃金搭檔。
相較于Flinto，Principle強(qiáng)大的動(dòng)效預(yù)置，可以極大的減少動(dòng)效設(shè)計(jì)的時(shí)間，并能完成出較為優(yōu)質(zhì)的動(dòng)效設(shè)計(jì)。在效率為王的互聯(lián)網(wǎng)產(chǎn)品時(shí)代，Principle確實(shí)是一款適合交互設(shè)計(jì)師使用的動(dòng)效軟件。
下面，我們就詳細(xì)了解一下principle。
目前版本的Principle，就動(dòng)效設(shè)計(jì)功能方面，相較于Axure、AE而言，要簡(jiǎn)單很多。它是一款主要用來銜接交互原型與動(dòng)態(tài)效果呈現(xiàn)的動(dòng)效制作軟件，其功能可分為五大類，分別是基礎(chǔ)功能、Create Component（組件）、Animate（時(shí)間軸）、Drivers（聯(lián)動(dòng)）以及頁面動(dòng)效。
主要功能
基礎(chǔ)功能包括矩形、文字工具，導(dǎo)入功能，群組、Mirror、上/下一層。目前自定義工具僅支持矩形（快捷鍵R）和文字工具（快捷鍵T），因此在制作頁面動(dòng)效時(shí)，需要從sketch中導(dǎo)入或copy頁面元素，來完成頁面動(dòng)效。在矩形工具的基礎(chǔ)上，可以延伸出正方形、圓型、圓角矩形。
導(dǎo)入功能是銜接sketch的主要接口，每次只能導(dǎo)入已打開sketch文件的一個(gè)page頁面中的元素。在導(dǎo)入sketch文件時(shí)，比較省事的做法是，在文件中新建一個(gè)page，作為導(dǎo)入素材的入口，同時(shí)，page可以重復(fù)導(dǎo)入，最新導(dǎo)入的頁面（不同頁面元素）會(huì)放到最后。Principle中的畫板大小與最后一次的畫板大小保持一致，因此導(dǎo)入的畫板也要保持一致。
群組、上/下一層的功能操作與sketch一致。Mirror是用來在制作手機(jī)應(yīng)用時(shí)，在手機(jī)端進(jìn)行預(yù)覽操作的功能，目前只支持Apple的產(chǎn)品連接。
組件（Create Component）與Axure中的元件庫(kù)、sketch中的symbol類似，可以包含動(dòng)效，支持在不同principle文件中進(jìn)行復(fù)制、粘貼。這是一個(gè)實(shí)用的功能，如《動(dòng)效設(shè)計(jì)-交互設(shè)計(jì)的最后一公里（一）》中的菜單動(dòng)效、加載動(dòng)效等，就可以制作成組件，在其他項(xiàng)目中可以作為動(dòng)效控件加以應(yīng)用，直接復(fù)制、粘貼即可。由此，可以推演提煉出動(dòng)效設(shè)計(jì)控件，在版本迭代中可以在動(dòng)效方面保持產(chǎn)品氣質(zhì)的延續(xù)性。
時(shí)間軸（Animate）是對(duì)AE時(shí)間軸的一種簡(jiǎn)化，不能進(jìn)行K幀(此處有疑問者，請(qǐng)參考本系列文章《動(dòng)效設(shè)計(jì)-交互設(shè)計(jì)的最后一公里（一）》），只能控制某一動(dòng)效在時(shí)間維度上的起止位置以及持續(xù)時(shí)間。另外，元素的運(yùn)動(dòng)形式也可以在時(shí)間軸上進(jìn)行設(shè)置調(diào)整，包括：默認(rèn)、緩入、緩出、緩動(dòng)、彈性、線性、無等七種運(yùn)動(dòng)形式，同時(shí)可以對(duì)前五種進(jìn)行曲線調(diào)節(jié)。
運(yùn)動(dòng)形式及調(diào)節(jié)
聯(lián)動(dòng)（Drivices）是對(duì)時(shí)間軸功能的補(bǔ)充與擴(kuò)展。Principle主要應(yīng)用于制作移動(dòng)端產(chǎn)品的交互、動(dòng)效設(shè)計(jì)，相較于web頁面，移動(dòng)端設(shè)備主要是觸屏操作，包括點(diǎn)擊、拖動(dòng)、滑動(dòng)等，這些元素之間的關(guān)系是位置上的聯(lián)動(dòng)關(guān)系，而不是時(shí)間上的。
頁面動(dòng)效包括靜態(tài)、拖拽、滾動(dòng)、翻頁四類。嚴(yán)格意義，頁面動(dòng)效并不是獨(dú)立的功能，需要配合Drivices來使用。因此，在確定了滾動(dòng)、拖拽、翻頁以后，選擇一個(gè)觸發(fā)操作元素，在Drivices中，對(duì)其在不同位置的節(jié)點(diǎn)處K關(guān)鍵幀，同時(shí)，將聯(lián)動(dòng)元素在不同節(jié)點(diǎn)處的變化進(jìn)行調(diào)整，進(jìn)而形成位置關(guān)系上的聯(lián)動(dòng)。
相較于其他工具，Principle的優(yōu)勢(shì)還是比較明顯。基于其優(yōu)勢(shì)，Principle在合適的動(dòng)效設(shè)計(jì)上效率非常高，同時(shí)動(dòng)效的質(zhì)量也比較高。整體來說，Principle的優(yōu)勢(shì)如下：
猶如PS/AI與AE之間的關(guān)系，Principle與sketch之間存在著很多相似之處，包括頁面布局及風(fēng)格、快捷鍵等，很好的讓交互設(shè)計(jì)與動(dòng)效設(shè)計(jì)進(jìn)行銜接，減少了動(dòng)效工具的學(xué)習(xí)成本。sketch文件的導(dǎo)入可以實(shí)時(shí)進(jìn)行，此時(shí)的sketch文件猶如動(dòng)效設(shè)計(jì)階段的組件，在動(dòng)效設(shè)計(jì)過程中，需要哪一個(gè)頁面，就可以將頁面單獨(dú)導(dǎo)入，減少了頁面的復(fù)雜度。
Principle軟件界面
源于Flash的補(bǔ)間動(dòng)畫幾乎是所有動(dòng)效工具的特點(diǎn)，也是保持動(dòng)效流暢的主要環(huán)節(jié)。相較于其他工具的補(bǔ)間動(dòng)畫，Principle的補(bǔ)間動(dòng)畫是預(yù)設(shè)的，并且經(jīng)過實(shí)際的實(shí)驗(yàn)驗(yàn)證，可以直接使用。如上文中所描述，principle的效果預(yù)設(shè)是隱藏在動(dòng)效的時(shí)間軸上，在設(shè)置動(dòng)效持續(xù)時(shí)長(zhǎng)的同時(shí)，調(diào)整其運(yùn)動(dòng)樣式與效果。另外，補(bǔ)間動(dòng)畫的形式與節(jié)奏會(huì)自動(dòng)統(tǒng)一到整個(gè)動(dòng)效設(shè)計(jì)中，即新建的動(dòng)效預(yù)設(shè)與上一次的預(yù)設(shè)保持一致。
補(bǔ)間動(dòng)畫
如上圖，制作出動(dòng)畫的起點(diǎn)與終點(diǎn)畫面，在兩個(gè)畫面之間制動(dòng)生成補(bǔ)間動(dòng)畫，通過調(diào)整補(bǔ)間動(dòng)畫的運(yùn)動(dòng)形態(tài)與樣式，完成動(dòng)效的制作。
熟悉keynote的小伙伴應(yīng)該知道，其最大的亮點(diǎn)就是神奇移動(dòng)。在Principle中，元素的運(yùn)動(dòng)變化原則與Keynote一致，即若兩個(gè)畫板中兩個(gè)元素的命名一樣，在畫板切換過程中，則默認(rèn)該元素從畫板一的樣式漸變到畫板二的狀態(tài)，包括顏色、位置、透明度、形狀等，但前提是該元素是可編輯的，而不是圖片。這種神奇移動(dòng)的效果保證了動(dòng)效的連續(xù)性與流暢性。
類似Keynote的”神奇移動(dòng)”
對(duì)于變化的形式、速率以及時(shí)機(jī)可以在Animate中進(jìn)行調(diào)節(jié)。
Animate是用來控制補(bǔ)間動(dòng)畫的節(jié)奏、形式、時(shí)間以及時(shí)機(jī)等，其控制較為粗糙，不如AE的時(shí)間細(xì)致。在神奇移動(dòng)的案例中，元素的變化有長(zhǎng)、高、旋轉(zhuǎn)、透明度四種，在Animate中可以控制每種變化的開始時(shí)間（錯(cuò)幀）以及持續(xù)的時(shí)長(zhǎng)，來控制動(dòng)效效果。同時(shí)，其動(dòng)效形式的預(yù)設(shè)與比較符合用戶的心理預(yù)期，在動(dòng)效節(jié)奏的調(diào)整上可以節(jié)省較多的時(shí)間。
Animate面板
類似Origami的事件管道拖拽該功能指的就是Drivice，這也是Principle在移動(dòng)端產(chǎn)品設(shè)計(jì)中的優(yōu)勢(shì)所在。Animate是時(shí)間與元素變化效果之間的映射關(guān)系，那么，Drivices就是一個(gè)元素的坐標(biāo)位置與其他元素變化效果的映射關(guān)系。這個(gè)面板在拖動(dòng)等的操作中應(yīng)用的極為廣泛，可以逼真的模擬觸控操作中的位置映射關(guān)系。
Drag的Drivice應(yīng)用
在示例中，設(shè)置的滑塊位置與矩形形狀圓角大小、旋轉(zhuǎn)的映射，實(shí)現(xiàn)滑動(dòng)調(diào)節(jié)圓角大小與旋轉(zhuǎn)的效果。
一個(gè)工具的優(yōu)勢(shì)較為明顯，往往其缺點(diǎn)（限制）也較為突出，Principle也是一樣。根據(jù)作者多個(gè)項(xiàng)目的時(shí)間經(jīng)驗(yàn)，發(fā)現(xiàn)了以下較為突出的缺點(diǎn)：
1. Principle不太適合整體產(chǎn)品的動(dòng)效設(shè)計(jì)。Principle的畫板是橫向順序排列，用戶不能自定義其位置，因此其畫板數(shù)量不易過多，否則頁面管理將會(huì)使人崩潰。Principle比較適合核心功能、局部頁面或頁面細(xì)節(jié)動(dòng)動(dòng)效設(shè)計(jì)。
2. 動(dòng)效預(yù)設(shè)質(zhì)量比較高，但自定義形式較弱。Principle的動(dòng)效變化形式，包括顏色、大小、位置、透明度、形變（極少）等，這就限制了設(shè)計(jì)師對(duì)動(dòng)效的修改與再創(chuàng)作。因此，Principle比較適合做轉(zhuǎn)場(chǎng)類、入場(chǎng)類以及引導(dǎo)類動(dòng)效，但是對(duì)于牽涉到復(fù)雜形變、效果的品牌與反饋類動(dòng)效，就是Principle所鞭長(zhǎng)莫及的了。
3. 對(duì)于Sketch導(dǎo)入的元素，有些是不能編輯的，包括文字、symbol以及有些群組。這就導(dǎo)致在這些元素的動(dòng)效變化時(shí)，就需要在Principle中重新制作。
4. Principle中每一個(gè)畫板相當(dāng)于一個(gè)一個(gè)關(guān)鍵幀，對(duì)于已經(jīng)完成的動(dòng)效設(shè)計(jì)，在過程中新增關(guān)鍵幀（畫板）會(huì)比較繁瑣，需要?jiǎng)h除兩個(gè)關(guān)鍵幀之間的動(dòng)效鏈接，然后新增一個(gè)畫板，最后將新增畫板與前后的畫板進(jìn)行鏈接，形成新的動(dòng)效。這也是在Principle比較適合順序K幀的原因。
5. Principle效果文件的導(dǎo)出僅支持GIF與mov格式的導(dǎo)出。其導(dǎo)出是對(duì)操作的錄制，因此，對(duì)自動(dòng)類型動(dòng)畫的錄制開始的時(shí)機(jī)較難把握，如果有必要需要其他軟件進(jìn)行剪切編輯。
Principle的動(dòng)效制作原理與AE不同，因此，其特點(diǎn)與應(yīng)用技巧也略有差異。在長(zhǎng)時(shí)間使用Principle以后，對(duì)于一些功能的特殊使用方式也有一些心得：
1. Principle動(dòng)效中，元素屬性的變化是通過不同屬性節(jié)點(diǎn)之間形成補(bǔ)間動(dòng)畫形成的，Principle識(shí)別不同畫板之間的元素是通過名稱的一致性。名稱一致，則該元素在兩個(gè)畫板之間會(huì)順暢的形成補(bǔ)間動(dòng)畫（是可編輯元素），因此若下個(gè)頁面中要出現(xiàn)某個(gè)元素，至少在上一個(gè)頁面要存在該元素，否則就會(huì)違背動(dòng)效設(shè)計(jì)的原則（有始有終、三不）。
2. Principle中每一個(gè)畫板就是一個(gè)最小單位的節(jié)點(diǎn)關(guān)鍵幀，在制作動(dòng)效時(shí)，將連接動(dòng)效指向主畫板（或自己），復(fù)制出新的畫板，然后在新畫板上進(jìn)行動(dòng)效元素的變化調(diào)整。這樣可以保證每個(gè)畫板中的元素名稱保持一致。
3. 不要將sketch中的整個(gè)Page頁面的畫板一起導(dǎo)入Principle，這樣畫板的管理會(huì)造成極大的困擾。本人的做法是在sketch中新建一個(gè)頁面，作為專門進(jìn)行導(dǎo)入的入口，同時(shí)頁面中的畫板不易過多，最好有一個(gè)主頁面，其他頁面作為備用素材使用。
4. 對(duì)于透明的元素，Principle是不能作為動(dòng)效鏈接的元素，因此在制作觸控?zé)釁^(qū)時(shí)不能將透明度降為零，可保持1% 的不透明度。但是，即使元素的透明度為零且不能作為鏈接元素，被該元素完全覆蓋的其他元素也是不能作為鏈接元素，這時(shí)可以選中該元素，勾選touchable，就可以被點(diǎn)擊到。
5. Principle中的旋轉(zhuǎn)是以元素的物理中心為圓心進(jìn)行旋轉(zhuǎn)的。若要制作元素圍繞一個(gè)點(diǎn)進(jìn)行旋轉(zhuǎn)時(shí)，可以以該點(diǎn)作為中心對(duì)稱的點(diǎn)建一個(gè)同樣的元素，并將二者進(jìn)行群組，將其中一個(gè)的透明度改為零，這樣群組的中心點(diǎn)就在旋轉(zhuǎn)中心了。
6. principle中的群組是單獨(dú)一個(gè)元素，其大小是可以自定義的，不是由群組的元素大小所確定的，并且群組可以作為一個(gè)元素進(jìn)行鏈接對(duì)象制作動(dòng)效。因此，在這種特性下，可以將群組作為熱區(qū)使用或用來調(diào)整元素的旋轉(zhuǎn)中心等。
其特點(diǎn)不止于此，有很多技巧等待你去發(fā)掘……
到目前為止，作者已經(jīng)完成了若干線性加載動(dòng)效控件的制作，如下圖：
Loading
我們以其中一個(gè)案例的制作，結(jié)束本次對(duì)Principle的探討。
加載動(dòng)效
第一步：新建直徑分別為9、7、5、3、1的圓形，圓形的直徑要是連續(xù)的奇數(shù)或偶數(shù)，保證圓形能夠絕對(duì)的居中對(duì)齊。
新建原型
第二步：將每個(gè)圓單獨(dú)群組，并調(diào)整其群組的高度，分別為54、52、50、48、46，并將其進(jìn)行居中對(duì)齊。上文中已經(jīng)提起，群組的中心可以作為整體旋轉(zhuǎn)中心，因此，最大的群組高度就是最終動(dòng)效的直徑。選擇所有群組，將其左右居中對(duì)齊。
調(diào)整群組高度
第三步：選中畫板，點(diǎn)擊右側(cè)出現(xiàn)的小閃電圖標(biāo)，選擇最后一個(gè)指向畫板1，產(chǎn)生一個(gè)新的畫板，并選中畫板2中的所有群組，修改旋轉(zhuǎn)角度為360°。
起始畫板樣式
新畫板
第四步：在Animate中修改每個(gè)動(dòng)效條的長(zhǎng)度為1s，根據(jù)半徑，從大到小，以此錯(cuò)幀（0.2s）。動(dòng)效條的長(zhǎng)度決定了一個(gè)元素旋轉(zhuǎn)一周的時(shí)長(zhǎng)。錯(cuò)幀可以實(shí)現(xiàn)元素的跟隨效果，錯(cuò)幀的時(shí)長(zhǎng)控制了兩兩元素在運(yùn)動(dòng)過程中的距離，同時(shí)還受到整體時(shí)長(zhǎng)的影響。
Antimate調(diào)節(jié)
第五步：按照第三步的方式，以第二個(gè)畫板為基礎(chǔ)，產(chǎn)生第三個(gè)畫板，并將第三個(gè)畫板中的其他元素全部刪除，只保留半徑最大的圓，修改其名稱不與其他元素重名。如果沒有第三個(gè)畫板，直接指回第一個(gè)畫板，畫面中的元素會(huì)出現(xiàn)逆向的運(yùn)動(dòng)，即每個(gè)群組會(huì)將旋轉(zhuǎn)角度變回0°，回到第一個(gè)畫板的狀態(tài)。
制作替身
第六步：選中最后一個(gè)畫板，按照步驟三，將箭頭指向第一個(gè)畫板，即可完成該加載動(dòng)效的制作。
形成閉環(huán)
整體上，整個(gè)動(dòng)效的制作時(shí)間只有5分鐘，效率遠(yuǎn)遠(yuǎn)高于AE，這正是Principle的優(yōu)勢(shì)所在。
另外，需要加載案例工程文件的童鞋，可以到百度云盤中下載：
鏈接：https://pan.baidu.com/s/17KWy1yEMRCKB4ip9-3T9ug
密碼：d3j0
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
