目錄
介紹
目錄
介紹
學習vue-router做的一些總結(jié)筆記，內(nèi)容會持續(xù)更新！
目錄
1、HTML和JS中使用router
2、動態(tài)路由
3、嵌套路由
4、編程式導(dǎo)航
5、命名路由、命名視圖
6、重定向、別名
7、路由組件傳參
8、導(dǎo)航守衛(wèi)
9、路由元信息
10、過度動效
11、數(shù)據(jù)獲取
12、滾動條位置
今天，你的朋友圈、微博首頁是不是被一部韓國電影刷屏了？
韓國電影《寄生蟲》在剛剛結(jié)束的第92屆奧斯卡頒獎禮上斬獲最佳影片、最佳導(dǎo)演、最佳國際影片、最佳原創(chuàng)劇本四項大獎。
p.s.文末附有第92屆奧斯卡完整獲獎名單和兩個彩蛋，不要錯過。
本以為拿到最佳外語片就結(jié)束使命的導(dǎo)演奉俊昊，在接連收獲最佳導(dǎo)演和最佳影片大獎時，發(fā)表了一段激動人心的演講，導(dǎo)演奉俊昊獲得第92屆奧斯卡最佳導(dǎo)演獎視頻觀看鏈接：https://v.qq.com/x/page/i3063i874m3.html
不想看視頻的盆友們可以品品以下獲獎感言：
謝謝，我以為拿了最佳國際影片后，今天就沒事了，還準備好好放松一下，太感謝了！
在我年輕學電影的時候，有句話讓我印象深刻，」最個人化的表達是最有創(chuàng)造力的「。說這句話的人是我們偉大的馬丁·斯科塞斯。
我在學校的時候?qū)W過馬丁·斯科塞斯的電影，能夠被提名已經(jīng)是巨大的榮譽，我從沒想過自己會得獎。
當美國人不熟悉我的電影時，昆汀一直在推薦我的作品，他今天也在這，太感謝了，昆汀，我愛你！還有Todd，和Sam，都是我非常崇敬的導(dǎo)演們。
如果奧斯卡允許，我想買一把德州電鋸，把這個獎分成五份，和你們每個人共享。謝謝！我會暢飲到明天早上的，謝謝。
這段獲獎感言或許也能激勵無數(shù)迷弟迷妹們，如果你獲得了大獎是可以直接在領(lǐng)獎臺上向愛豆表白的！
奉俊昊看著奧斯卡小金人，嘿嘿地笑了起來。
在領(lǐng)取最佳原創(chuàng)劇本獎時，導(dǎo)演奉俊昊提到「劇本創(chuàng)作是一個孤獨的過程」，這樣的孤獨我們可以從一本《寄生蟲-分鏡書》猜測到一些。
韓版由著名的DVD發(fā)行公司plain archive出版，包含劇本+分鏡頭書
相比直接雇傭員工專職繪制分鏡頭，導(dǎo)演奉俊昊選擇自己繪制分鏡頭，他會把隨時能想到的元素都畫在自己的iPad上，再通過云盤同步。
凡事精益求精， 或許也是這部電影能橫掃奧斯卡的原因吧。
除了電影好看，《寄生蟲》各個版本的電影宣傳海報也值得我們細品。
這部電影的所有海報中，最出名的就要數(shù)韓國正式海報了。這張海報非常具有現(xiàn)代主義的美學感，但每個人的眼睛都被一條方形長條蓋住了。
細心的盆友或許會發(fā)現(xiàn)，電影中的窮人眼前的都是黑色長條，而富人眼前的都是白色長條。這或許暗示著貧富差距帶來的視角都是不同的。
而電影中的一些關(guān)鍵元素，例如圓錐形帳篷，奇石，只露出一半的腿……也點綴在這張海報上，懸念滿滿。
很多國家和地區(qū)的宣傳海報也是根據(jù)這張官方海報進行修改的，除了文字不同，其他的地方幾乎沒有變化。
以文化藝術(shù)為名的法國宣傳方看不下去了，保留了關(guān)鍵元素「黑色長條」又設(shè)計了一個新版本。這個版本上的貧富差距更加赤裸裸：富人都穿了鞋，窮人都光著腳。
由上面這張海報衍生出來的負片版本中寫了這么一句話「沒有人是非黑即白的」。
泰國版的海報則是直接變成了黑白照片，原本溫馨的全家福瞬間變得詭異。
法國宣傳方發(fā)布了一張表面上其樂融融的全家福：
但是有細心的設(shè)計師透露這張海報是對法國喜劇海報的惡搞。
除了上面這些根據(jù)官方海報、劇照衍生出來的海報，還有一些插畫風格的海報更讓人印象深刻。
其中不得不提的就是下面這兩張水墨風格的國際版海報，看懂這兩張海報你才算是看懂了電影。
第一張海報以電影中的關(guān)鍵道具「石頭」為主體，窮人一家站在山頂，富人一家坐在岸邊，這樣看似一高一低的地位都少不了影片中的關(guān)鍵元素「水蜜桃」。
但這一切都是幻影，水中的倒影才是貧瘠的現(xiàn)實，富人依然凌駕于窮人之上。
第二張海報中，原本平靜的水面開始波瀾起伏，象征希望的石頭上也變得血淋淋。
看到上面這兩張海報，或許會有不少人聯(lián)想起同樣是韓國電影的《小姐》的海報，同樣相似的畫風、細節(jié)上用關(guān)鍵元素裝飾，一張圖就把一部電影說透了。
或許是受「倒影」的啟發(fā)，設(shè)計師 Andrew Bannister 也創(chuàng)作了一張可以翻轉(zhuǎn)過來的海報，這張海報更加赤裸裸地揭露了電影中的貧富差距。
一上一下的行走方向，和紅綠色調(diào)一樣，充滿了對比和沖突感。
如果窮人想跨越階級向上爬，就要像這張海報的背景一樣，付出血紅的代價。
下面這張由葡萄牙藝術(shù)家Vicente Niro和IgorMade創(chuàng)作的海報更直白地把人之間的互相壓迫展現(xiàn)了出來：
藝術(shù)家Randy Ortiz創(chuàng)作的一張海報揭露了在這部電影展現(xiàn)的世界中，窮人有時候還不如富人養(yǎng)的一條寵物狗：
除了上面這些以人物為主體的海報，還有不少設(shè)計師將目光聚集在了電影中貧富兩個家庭居住的環(huán)境上。
韓國藝術(shù)家Jisu Choi詳細地繪制了電影中富人一家居住的房子：
這張海報上的建筑風格和構(gòu)圖，啟發(fā)設(shè)計師Curzon release設(shè)計了另一張藏滿彩蛋的海報：
這張海報上幾乎把電影的關(guān)鍵元素都放進去了：披薩盒、石頭、自畫像、桃子、帳篷……你甚至能找到燈飾中隱藏的摩爾斯電碼，和桌子底下的奧斯卡獎杯。
除了這些暗藏彩蛋的建筑海報，還有一些通過建筑表現(xiàn)貧富差距的作品。
加拿大藝術(shù)家Marie Bergeron在海報上突出了電影中兩個家庭高低階級的壓迫和對立：
當你以為窮人一家已經(jīng)身處底層時，沒想到還有比他們更底層的人，而富人永遠都處于頂端。
△ 上圖由bearjew 416創(chuàng)作
一部好的電影值得影迷們的贊美，也值得設(shè)計師不同角度的演繹。從上面這些不同風格創(chuàng)意的海報中，我們也能知道這部電影為什么能橫掃奧斯卡獎了。
除了寄生蟲，還有一些設(shè)計師為奧斯卡最佳電影獎提名電影創(chuàng)作了一系列的海報，看看你能猜中多少部？
△ 海報由藝術(shù)家Olly Gibbs設(shè)計
△ 海報來源于SG Posters
最后附上第92屆奧斯卡獎完整獲獎名單：
你喜歡的那部電影獲獎了嗎？
文章來源：優(yōu)設(shè) 作者：Canva設(shè)計
我承認，為「這個激動人心的新趨勢」共同命名（注：Neumorphism 新擬物化，即 New 和 Skeumorphism 的結(jié)合詞，最初由作者 Michal Malewicz 另一篇文章《Neumorphism in user interface》的一位讀者提出）是件很有趣的事。但我沒想到它能被炒得這么火熱。
很多博客和 twitter 文聲稱它是「2020 年最值得期待的設(shè)計手法」。趁著它還沒膨脹，讓我先把這個幻想的泡泡戳破吧。
△ 以#neumorphism為主題的設(shè)計作品逐漸萌芽，但是大部分「淺色」設(shè)計看起來都相差無幾
論成為一個流行設(shè)計風格，Neumorphism 并不夠多樣化，尤其對于現(xiàn)實中需要寫代碼的產(chǎn)品。
當然你可以將它使用在 Dark Mode 深色模式中，同時你可以選擇同一種類白色的背景顏色，我們可以依此設(shè)計出六種風格，不過他們的區(qū)別甚微。
當前新擬物化設(shè)計被過度使用到各類元素中，例如卡片和按鈕，但他們大多都違背了我在另一篇文章《Neumorphism in user interface》中略述的設(shè)計規(guī)則。雖然我也認同它將按鈕的選中狀態(tài)呈現(xiàn)得很美觀，但是對很多人而言，不同按鈕狀態(tài)間的微妙差別讓人難以分辨。
此處的「很多人」并不只是指患有視力障礙的群體，同時也包括使用設(shè)備的屏幕質(zhì)量較差或?qū)Ρ榷容^低的用戶。
按鈕可能是使用新擬物化風格典型雙側(cè)陰影最糟糕的地方，尤其是在呈現(xiàn)按鈕的選中狀態(tài)時。很多人分辨不出不同狀態(tài)的差別，其相似程度就像圖中右邊那樣。
下圖將新擬物化、擬物化及扁平化風格的按鈕進行對比，我們可以明顯地看出，新擬物化風格的按鈕看起來既不像按鈕，也沒有達到引導(dǎo)操作的作用。
△ 你會點選哪個呢？
卡片和滑動條可能是這項趨勢的最佳使用場景。但是需要注意的是，卡片的結(jié)構(gòu)需要處理恰當。需要確保圖片、圖標和字體間的層級清晰，間距足夠明顯。測試卡片設(shè)計的最好方式就是將新擬物化風格的背景去掉，優(yōu)秀的設(shè)計在去除背景后視覺上也沒問題（尤其是在其他卡片并排在一起的時候）。
△ 要將新擬物化風格的卡片呈現(xiàn)得好，需要確保即使將元素用框架呈現(xiàn)并去掉背景，它們也可被視為同一組
簡而言之，可以從界面中移除而不造成影響的卡片設(shè)計就是好的設(shè)計。這建議聽起來很不錯吧？尤其是當我們考慮到 Dieter Rams （德國著名工業(yè)設(shè)計師迪特·拉姆斯，提出「設(shè)計十誡」的那位）所提出的移除「不必要」的設(shè)計理念。
還記得 Pantone2019 年的年度色嗎？讓我來為你回顧一下這項在 2019 年 1 月提出的「2019 設(shè)計新趨勢」。
盡管最初我們可以看到很多應(yīng)用這種「鮮亮的珊瑚色」的設(shè)計案例，但其中的大多數(shù)在 2019 年 2 月初時看起來就像要過時了。
在我看來，等到我們把所有可行的新擬物化設(shè)計組合都發(fā)掘得差不多了，我們就可能會選擇第一版了。
并不是說新擬物化設(shè)計就此湮沒了。
只是說，僅僅是用這種風格，不足以讓整個產(chǎn)品成功。確實，最初采用這種風格的幾款產(chǎn)品可能會獲得成功，但是一段時間后，它將會比 Material 設(shè)計更令人厭倦。
將新擬物化設(shè)計和其他風格各取特點，加以結(jié)合，勢必會成為 2020 年及今后的趨勢走向。
想要兼顧產(chǎn)品的美觀度和功能性就意味著，在兩個方面都不要做得太極端。即使是當前流行的柔和彩色陰影也僅僅在按鈕或圖標上才行得通。想象一下，把它用在整個產(chǎn)品上會有多不適？
下面作者探討了六種將新擬物化風格和其他風格相結(jié)合的設(shè)計方向。
1. 深色模式
不管我們接受與否，深色模式一定會是大勢所趨。不過它不局限于我們隨處可見的采用低飽和度灰藍色的深色模式。
自從 OLED 屏幕的推出，純黑色低耗能的特性就很顯著了。所以如果采用深色模式的目的在于節(jié)約電量，我們應(yīng)當會開始看到更多極簡，注重功能性的界面以黑色作為主色，而非深灰。
采取深色模式的另一個主要原因在于緩解視覺壓力。在這種情況下，柔和的深色模式必然美觀得多。
△ 許多應(yīng)用的界面都采用了淺色和深色的雙模式設(shè)計
2. 插圖和3D
我們勢必需要更多樣的插圖設(shè)計。作為當前最流行的風格，略不成比例的身體結(jié)構(gòu)和松散的線條已然隨處可見。但這很快就會造成審美疲勞。
△ 這些插圖看起來都不錯，但是過于相似
然而插圖其實是突出畫面最好的方式之一，前提是我們要嘗試多種方案以免同質(zhì)化。
3D 反而更容易設(shè)計出不同的風格。不過它也難做得多，需要下更多工夫。這也就說明，如果將時間投入到制作 3D 渲染上，我們更容易做出高質(zhì)量、符合品牌調(diào)性的作品。
△ 品牌風格圖的優(yōu)秀案例 Pitch.com
3. 動畫
過渡和場景搭建會在今年更受重視。它的催化劑之一是很多令人激動人心的 JS 庫的推出，它們極大程度上方便了復(fù)雜 2D 和 3D 過渡效果的制作。
是的，現(xiàn)在可以更輕松地用代碼寫出「很酷的東西」了，但建議不要過度使用。
我們要將這種扁平化設(shè)計用在平面上，再讓其旋轉(zhuǎn)起來，就像在游戲菲斯中（注：FEZ 菲斯，以復(fù)古的像素畫為風格，結(jié)合了 2D 橫向卷軸和 3D 效果，詳情可自行百度）。
4. 等軸設(shè)計
在 2019 年，我在搭建我們的加密貨幣分析平臺期間，花了些時間分析超過 2000 個和加密有關(guān)的網(wǎng)站的設(shè)計，并逐一對其設(shè)計質(zhì)量、原創(chuàng)性和一致性進行評分。
△ 這個設(shè)計真的很漂亮，但同時相似的圖片到處都是，真的很無趣
很觸動我的一點是在近乎 1/4 的網(wǎng)站中都具有某種等軸測的圖片。他們都采用不同卻似曾相識的風格，以至于一段時間后我竟然不確定他們是不是出自同一個免費庫。
這種風格可以被呈現(xiàn)得很棒，但是如果你僅僅打算將流行設(shè)計照搬到自己的設(shè)計中，我勸你還是放棄這個念頭吧。它已經(jīng)成了 2019 年最被濫用的設(shè)計之一（僅次于彩色陰影之后）。
5. 能充實內(nèi)心的極簡主義設(shè)計
這種趨勢初露苗頭，也許只會停留在一個小群體中。今年我和周圍的許多人一樣陷入了電子產(chǎn)品戒癮的怪圈，使用了一些設(shè)計更極簡化的產(chǎn)品。
左：Mudita Pure，右：Light Phone 2。兩個產(chǎn)品我均有購入，目前正在使用 Light Phone2，設(shè)計非常清新。
許多產(chǎn)品諸如 Mudita Pure 和 Light Phone 2 傳達出簡潔、黑白、極端簡化的界面。如果我們將使用的 app 看做是一定要滿足某種功能的工具，極簡的界面設(shè)計就有一定意義了。當然不是所有的 app 都可以用這種風格（想象一下純文字的 Instagram）。
6. 語音界面
我在今年參加的一場論壇上，聽到過這樣一句話：不要再學習 UI 了。在不久的將來我們大多會使用聲音識別與設(shè)備對話。
雖然這有些未來主義，并且在某些場景中適用（例如駕駛和運動中）。但是我認為有兩個原因?qū)е抡Z音界面至少在目前還不足以居于主導(dǎo)地位。
此處唯一的正確答案是，我也不知道?？赡芪业呐袛嗍д`，未來我們會有很多突出的軟塑料風格（新擬物化設(shè)計的特點之一），或者我們的手機屏幕會采用擠壓玻璃以呈現(xiàn)更逼真的設(shè)計。
△ 將如上探討的所有風格進行疊加的嘗試
但是很可能發(fā)生的事情是，沒有單一風格會成為今年的主導(dǎo)。
最優(yōu)秀的設(shè)計一如既往會恰當?shù)亟Y(jié)合當下趨勢并采用優(yōu)秀的字體風格。你可以在卡片上采取不同風格的陰影，但如果其中的文字呈現(xiàn)得雜亂而古怪，任何流行風格都不會讓設(shè)計看起來美觀。
可讀即美觀。在 2020 年記住這句話！
文章來源：優(yōu)設(shè) 作者：彩云譯設(shè)計
「層次感」這個詞在設(shè)計中的出現(xiàn)頻率是很高的，主要體現(xiàn)在信息層級關(guān)系和視覺豐富度這兩點，而缺少層次感的設(shè)計會給人一種信息雜亂、畫面單調(diào)的視覺感受，甚至枯燥、乏味，這也恰恰與設(shè)計目的相悖。那么當我們的作品出現(xiàn)層次感缺失時，應(yīng)該從哪些方面著手改善、解決呢？本期內(nèi)容希望能對大家有所幫助。
營造視覺元素的差異化可以起到很好的改變畫面信息層級關(guān)系的作用，從而增強設(shè)計作品的層次感，這和對比手法很雷同。無論是畫面中的視覺元素多還是少，都要做到有主有次、有大有小、有粗有細、元素與元素之間形成對比關(guān)系，舉個簡單的例子：
很明顯第一排的形狀之間是完全相同的，在視覺上給人的感覺就會很平，缺少變化；而下面兩排在視覺上都營造了一個與周圍存在差異化的視覺元素，使得整體在視覺上有了閱讀的先后順序，形成了簡單的信息層級關(guān)系。
當畫面中的視覺元素相同或者相似時，信息的層級關(guān)系就相對而言不容易體現(xiàn)出來，那么此時就需要我們營造具有差異化的視覺元素打破這一現(xiàn)象，從而增強畫面的視覺層次感，無論切入點是什么。再比如我們看到的風景照：
從近到遠在視覺上存在著很明顯的差異化，比如：近實遠虛、近大遠小、近處的飽和度高遠處飽和度低、近處的明度暗遠處的明度亮等等，大自然的風景本身就能很好地詮釋視覺層次感，所謂「設(shè)計源于生活」正是如此。那么這些應(yīng)用到設(shè)計中又應(yīng)該如何體現(xiàn)呢？下面再看一個例子：
如果產(chǎn)品這么擺放的話，那么何來層次感而言呢？只能理解為重要的事情重復(fù)三遍。做個小小的改變：
畫面有了大小關(guān)系，故而有了主次關(guān)系，此時視覺的層次感已經(jīng)有所體現(xiàn)：
大小與虛實的雙重結(jié)合，視覺層次感更加強烈了，加點透視看看：
這里做了點透視效果，結(jié)合大小、虛實的變化，是不是有種由近到遠的既視感？通過營造視覺元素的差異化，視覺層次感也更加強烈，這種虛實結(jié)合的形式在設(shè)計中也非常實用，下面我們再看案例：
這種虛實對比的形式也是視覺元素差異化體現(xiàn)形式之一，很直觀地提升了整體的視覺層次感，包括在一些文字排版中也很實用。所以當我們的作品整體視覺層次感不夠強烈時，不妨試試通過營造視覺元素差異化的形式進行提升和改變，只是既然用了這種表現(xiàn)手法，就要做得足夠明顯，否則只會適得其反。
我們前面說了，提升視覺層次感可以從兩個點切入，即：提升信息層次感以及畫面整體豐富度，而裝飾性元素的使用剛好可以契合這兩點，它既有提升信息層次感的作用，又能起到很好豐富畫面的作用。下面我們看個案例：
通過上下兩個案例的對比我們發(fā)現(xiàn)：
需要注意：裝飾性元素也不能過多的使用，因為過量使用很容易在視覺上形成散亂、不夠整體的情況，要根據(jù)實際情況合理使用。
使用肌理是設(shè)計中非常實用的一個設(shè)計手法，肌理有著很好的豐富畫面、增加細節(jié)、提升層次感的作用，比如可以用做一些海報的底紋、文字的材質(zhì)，甚至是一些形式感很強的肌理可以作為畫面的抽象主體。下面舉個例子：
案例中將遠山風景圖片通過透明度調(diào)整作為肌理使用，這樣做的好處在于：首先肌理相較于整個畫面來說不是那么顯眼，這樣就避免搶了主體；其次因為遠山給人的視覺感受就是層次感強烈，而這里當作肌理既起到了一定的填充、豐富的作用，又保留了一些遠山的屬性，在視覺上層次感更加強烈。
再比如一些文字也會使用肌理，用于增強文案信息的視覺層次感受，比如：
主要字體使用肌理會在讓其形象更加鮮明，與正常文案形成對比，也能間接提升文字排版的視覺層次感。
當作品視覺層次感不夠強烈時，我們可以轉(zhuǎn)化為思考如何提升畫面豐富度以及信息層次感。比如前面說的：對比、裝飾元素、肌理都可以與之對應(yīng)起來，那么為什么說合理的使用色彩在一定程度上也能起到提升視覺豐富度的作用呢？下面舉個例子：
這里是通過有彩色與無彩色的案例對比，以視覺感受來看：左側(cè)明顯比右側(cè)顯得更空一些，因為色彩也是一種信息傳達的媒介，也就是說顏色也在傳遞信息，所以當畫面顯得空、缺少層次感的時候，通過顏色的調(diào)整也能起到一定的增加視覺層次感的作用，舉個例子：
這里只是改變了底色，在視覺豐富度上給人的感受差距一目了然，因為純白底會給人一種空、缺少內(nèi)容的視覺感受，所以一般情況下我們的處理方式會選擇添加一些視覺元素，比如：裝飾性元素、材質(zhì)、線條等等，現(xiàn)在我們又多了一個選項，就是無彩色向有彩色的改變，雖然這種方法有一定的局限性，但也不失為一種可行的解決方式。
其實這種營造前后疊加關(guān)系的方式在之前的文章中也提到過，其實就是尋找元素與元素之間的物理疊加關(guān)系，會給人一種很強烈的層次變化，對于提升畫面層次感能起到立竿見影的作用，比如：
案例中的文字與主體物之間存在著視覺上的前后疊加關(guān)系，給用戶更強烈的視覺層次感，這種營造前后疊加關(guān)系的處理手法在標題設(shè)計中也很實用。
透視也可以理解為營造空間關(guān)系的手法，當平面的視覺元素賦予其透視關(guān)系后，會形成一種類似三維空間的視覺感受，在一定程度上也能起到增強畫面視覺層次感的作用。下面舉個例子：
很明顯，透視的感覺會給人一種空間感、延伸感，視覺層次更加強烈，這種形式在日常的設(shè)計中也很實用，比如：
改變透視會在視覺上形成一種縱向的延伸感，空間上層次關(guān)系更加強烈，只是這種形式有一定的局限性。
結(jié)合今天所說到的這些手法，通過不斷演變的形式，我們簡單做一組文字排版的案例：
這就是一句普通的話，沒有主次、沒有修飾、毫無層次感，改變一下：
已經(jīng)有了信息的層級關(guān)系，即大小對比，視覺元素之間形成了差異化的表現(xiàn)，還可以繼續(xù)深入：
通過改變顏色，對比更加強烈，層次感稍加增強，感覺還不夠？下面我們繼續(xù)再改：
這里通過肌理、虛實結(jié)合以及改變字體形態(tài)的表現(xiàn)形式，使得整體視覺層次感又提升了一個檔次，如果還想繼續(xù)提升，那么就要想，還缺少點什么？比如裝飾性元素試一試？
增加了裝飾性元素之后，畫面整體的豐富度提升了很多，而且對比的形式更多元化。案例中主要用到了：差異化元素、對比、肌理、裝飾性元素這四種表現(xiàn)形式，當然這也許不是最好的表現(xiàn)形式，目的是為了讓理論成為實踐。
當作品缺少層次感時，上述的一些改變方法可以供大家參考，但是不要僅僅局限于這些，還有一些我們常用的，比如：投影就非常實用，可以給文字、色塊、主體物等等做投影，拉開前后關(guān)系，這樣也會一定程度上增強視覺層次感。再比如：倒影、環(huán)境感等等，這些目的都是盡可能去豐富畫面、營造信息層次關(guān)系。并不是說這些手法一定要完全體現(xiàn)在一個作品上，層次關(guān)系過多反而會使得畫面整體散亂，一定要根據(jù)實際情況選擇使用，切記并不是視覺層次數(shù)越多就越好，這是一個誤區(qū)。
重復(fù)原則是指：版面中的視覺要素要重復(fù)出現(xiàn)，可以重復(fù)顏色、字體、圖形、形狀、材質(zhì)、空間關(guān)系等。使用重復(fù)原則既能增加畫面的條理性，還可以加強統(tǒng)一性，讓版面更富有層次感、邏輯性，可以提高閱讀效率和信息的傳達。有規(guī)律的重復(fù)可以產(chǎn)生節(jié)奏感和韻律美，增強觀者的印象。
仔細觀察，生活中隨處都有重復(fù)之美：
1. 文字樣式的重復(fù)
同一級別的文字信息需采用相同的文字樣式，也就是說，在字體、字號、字重以及特殊效果等方面都要保持一致，方便閱讀和信息的傳達。
此案例并列關(guān)系的文字信息，重復(fù)使用了同樣的字體、字號、字重。可以很直觀地把大量的信息分為四個信息層級：主標題、小標題、正文、輔助說明文字。
2. 配色方案的重復(fù)
色彩的重復(fù)在版面設(shè)計中尤為重要，當一個版面中出現(xiàn)太多顏色，控制不好版面便會出現(xiàn)雜亂花哨等問題，因此使用重復(fù)的顏色，控制好色彩的種類、純度和明度，讓版面更和諧統(tǒng)一是最常用的方法。
標題選擇和圖形顏色統(tǒng)一的深藍色，并使用橙色進行點綴突出；展覽時間是次級要強調(diào)的信息，選用和圖形顏色統(tǒng)一但是比標題淺一些的青色進行強調(diào)；展覽地點和內(nèi)容處于三級信息，使用無彩色的黑色進行弱化。這樣三個層級信息重復(fù)使用相同的色彩，讓版面信息清晰有序，能保證較好的閱讀體驗，有助于信息更好地傳達。
3. 圖片使用的重復(fù)
有多張圖片需要出現(xiàn)在同一版面，需統(tǒng)一圖片的大小、色調(diào)、比例、裁切方式等，這樣可以使版面美觀整齊。
整個版面出現(xiàn)的人物非常多，但圖片統(tǒng)一采取退底形式，并把顏色調(diào)整為黑白，具有很強的整體性。
4. 設(shè)計元素的重復(fù)
設(shè)計元素（如圖標、形狀、肌理、空間關(guān)系等）在版面中起到了強調(diào)和裝飾的功能，而同類的設(shè)計元素重復(fù)出現(xiàn)，不僅使版面有了統(tǒng)一的風格，也豐富了視覺效果，使版面更有設(shè)計感和整體感。
如上一期對齊原則的案例示范中，就使用了各種設(shè)計元素的重復(fù)：文字背景框統(tǒng)一的偽立體效果圖形，背景圖案的黃色幾何形狀和背景黑色點狀肌理。正是這種形狀的重復(fù)，在很大程度上造成了整體設(shè)計的統(tǒng)一性和其獨特風格。
1. 統(tǒng)一性、秩序化
重復(fù)是構(gòu)成統(tǒng)一與秩序的關(guān)鍵，讓視覺要素在整個作品中重復(fù)出現(xiàn)，統(tǒng)一的字體樣式、重復(fù)的設(shè)計元素、相同的圖片形狀與裁切方式，這樣既能增加條理性，還可以加強統(tǒng)一性。讓頁面更富有層次感、邏輯性，提高閱讀效率和信息的傳達。
2. 整體性、風格化
重復(fù)產(chǎn)生統(tǒng)一，統(tǒng)一形成風格。重復(fù)不僅對單個頁面很有用，對于多個頁面的設(shè)計更重要。正是在多個頁面中運用重復(fù)原則，才賦予了整體設(shè)計上的統(tǒng)一感、整體性，才形成了一定的設(shè)計風格。
我們會覺得這幾個頁面屬于同一個應(yīng)用，因為它們都具備一些相同的細節(jié)特征，比如一致的幾何圖形、不斷復(fù)現(xiàn)的色彩 、相同的字體、有規(guī)律的字號字重、統(tǒng)一的構(gòu)圖形式等等，這些重復(fù)的元素相互影響并不斷加強我們對頁面相似處的感知，所以我們一致會覺得這些頁面的風格是統(tǒng)一的。
3. 節(jié)奏感、律動美
節(jié)奏最常見的形式就是有規(guī)律的重復(fù)，是版面構(gòu)成要素利用疏密、聚散、連續(xù)、漸變等方式有條理有秩序地重復(fù)呈現(xiàn)，形成一種律動的美感，還可以增強觀者的印象。
有優(yōu)點就有缺點，重復(fù)給人帶來統(tǒng)一與秩序感的同時，還會帶來呆板、乏味、機械化等負面印象。應(yīng)當盡量采用多樣性實現(xiàn)統(tǒng)一， 在保證版面有秩序的前提下，讓設(shè)計元素產(chǎn)生形態(tài)的差異或距離上的變化來調(diào)節(jié)視覺感受，不規(guī)則的重復(fù)會讓畫面更動感、活潑。
在重復(fù)中產(chǎn)生變化，一是可以避免版面的單調(diào)與平淡，增加版面的趣味性，激發(fā)讀者閱讀和觀看的興趣；二是為了形成反差，區(qū)分主次，突出重點。特異點更易獲得視覺聚焦，引起注意。
為了讓大家加深對重復(fù)原則的理解，提取本期文章的主要內(nèi)容作為原始資料，運用重復(fù)原則進行設(shè)計示范。
運用「親密性原則」進行信息的分組和距離的調(diào)整，排版時要遵循「對齊原則」。運用「重復(fù)原則」把同一級別的文字設(shè)置為相同的文字樣式，增加條理性，加強統(tǒng)一性。
繼續(xù)豐富畫面，加入配色和設(shè)計元素，相同級別的文字信息使用統(tǒng)一的顏色和點綴元素，讓頁面更富有層次感、邏輯性，提高閱讀效率和信息的傳達。
現(xiàn)在畫面文字信息已經(jīng)清晰而有序的排列好，但是缺少主體。把標題內(nèi)容「重復(fù)原則」作為主體元素進行設(shè)計，給文字加入從橙色到藍色的漸變。
復(fù)制四組新的文字，使用自由變換工具把文字壓扁，每次變形的程度逐漸加強，使其呈現(xiàn)出漸變的節(jié)奏感，形成一種模擬翻頁效果。
把設(shè)計好的文字復(fù)制一份，并鏡像翻轉(zhuǎn)，主體就設(shè)計好了。重復(fù)出現(xiàn)標題內(nèi)容，可以增強視覺沖擊力，有較強的形式感，可以讓觀者加深印象。
把設(shè)計好的主體元素和文字信息放置到畫面中，使用上下構(gòu)圖，采取黃金分割比例進行布局。
最后給背景加入點狀肌理，在信息群組間加入線條，使層次分割更清晰，讓細節(jié)更豐富，視覺效果更美觀。設(shè)計完成：
樣機效果：
重復(fù)是構(gòu)成統(tǒng)一與秩序的關(guān)鍵，使用重復(fù)原則能讓版面更富有層次感、邏輯性，可以讓信息層級更清晰，能保證較好的閱讀體驗。有規(guī)律的重復(fù)可以產(chǎn)生節(jié)奏感和韻律美，增強觀者的印象，有助于信息更好傳達。
重復(fù)不僅僅是單一、機械地重復(fù)使用某些元素，而是要兼顧版面的形式美感與內(nèi)在的圖文內(nèi)容，讓版面實現(xiàn)內(nèi)容與形式的和諧統(tǒng)一。
文章來源：優(yōu)設(shè) 作者：藝海拾貝Design「口罩還是呼吸機，您老看著二選一；帶病回鄉(xiāng)不孝兒郎，傳染爹娘喪盡天良」
前段時間河南硬核橫幅及喊話霸榜熱搜，著實讓全民在疫情籠罩的陰霾下得到了一絲放松。這些土味硬核橫幅，話糙理不糙，用來勸誡家中長輩，做成表情包親戚群里分享，應(yīng)該會有很不錯的效果！
別看這些話語簡單粗暴，但卻極其上頭，可不就是 rap 里常說的單押，雙押嘛，再來普及一下 rap 里的常用詞：
在土味文案的催化下，我除了研究押韻這門學問，偶爾也會來兩句：
yo，喜歡唱歌刷劇看恐怖片，喜歡擼貓擼狗拍照片。
誒，我的flow就是這么的秀。
獻丑了獻丑了，說正經(jīng)的，就在我研究這個單雙押的時候發(fā)現(xiàn)了一個寫詞好幫手——押韻助手，網(wǎng)站簡介說明了這是一個不簡單的神器。
押韻助手是一個可以在線查詢押韻的字、詞、詩、歌的網(wǎng)站，支持單押多押；海量詞庫，保持更新；文案、金句、詩詞、Rap歌詞創(chuàng)作者的必備神器。
試玩地址：https://yayun.la/
值得一試的三個理由：
或許你會認為這算是一個「智能槍手」，但其實不然，除了能查普通詞匯的押韻之外，它還能檢測出與你搜索詞匯相押韻的唐詩、宋詞、元曲、歌詞，連英文單詞也能搜索出來，寫詞的時候還能順帶學習一波，贊。
此外，你還可以進行默認查詢設(shè)置，主要根據(jù)你個人的需求進行定制搜索設(shè)置，可以進行輔音和詞庫的選用（不過太苛刻的條件可能會影響搜索結(jié)果的可用性）。
押韻助手還有一個 AI 作詞功能，是基于其神經(jīng)網(wǎng)絡(luò)作詞，但是創(chuàng)造出來的句子可讀性欠佳，而且還不押韻，僅是娛樂型的功能。在此，我輸入了「敷衍」一詞，搜索出來的結(jié)果……我是沒看懂的，大家品品。
總體來說押韻助手用來查詢詞匯的押韻是非常不錯的選擇，大家在家也可以進行「rap 創(chuàng)作」、文案創(chuàng)作、詩詞創(chuàng)作等。另外，押韻助手還有手機 APP，APP 體量非常小，僅 3.2 M，功能除了沒有 AI 作詞以外，其余功能和網(wǎng)頁相差無幾，所以大家擇其一進行試玩就可以。
值得一試的三個理由：
文章來源：優(yōu)設(shè) 作
使用 vue-cli 創(chuàng)建 vue 項目：
cd 到指定的目錄下 命令行輸入：
vue init webpack-simple <項目名稱>
根據(jù)提示設(shè)置Project name
設(shè)置Project description
設(shè)置Author
設(shè)置License
設(shè)置Use sass?
cd到剛剛創(chuàng)建的項目名稱目錄
命令行輸入：npm install
等待安裝完成后 執(zhí)行 npm run dev 命令
注：以下部分練習是在https://jsfiddle.net 中進行
創(chuàng)建組件：（創(chuàng)建全局組件）
Html 部分：
<div id="app">
<div>練習</div>
<!-- 這里的 inline-template 取代組件函數(shù)中的 template:'' -->
<my-cmp inline-template>
<p>{{ status }}</p>
</my-cmp>
<hr>
<my-cmp inline-template>
<p>第二次使用{{ status }}</p>
</my-cmp>
</div>
Js 部分：
Vue.component('my-cmp',{
data: function () {
return {
status:'Critical'
}
},
methods: {}
});
var vm = new Vue({
el: "#app"
})
如果將data提取成公共的部分，則多次使用同一個組件則這部分數(shù)據(jù)在內(nèi)存中使用的是同一塊存儲 如下演示：
html部分：
<div id="app">
<div>練習</div>
<my-cmp></my-cmp>
<hr>
<my-cmp></my-cmp>
</div>
Js 部分
var data = {status:'Critical'};
Vue.component('my-cmp',{
data: function () {
return data
},
template:'<p>Server status {{ status }} (<button @click="changeStatus">Change</button>)</p>',
methods: {
changeStatus(){
this.status = "Nomal"
}
},
});
var vm = new Vue({
el: "#app"
})
上面的js代碼當點擊按鈕的時候兩個組件引用的數(shù)據(jù)均會發(fā)生變化
局部注冊組件：
html部分：
<div id="app">
<div>局部注冊組件練習</div>
<local-cmp></local-cmp>
<hr>
<local-cmp></local-cmp>
</div>
Js 部分：
var cmp = {
data: function () {
return {
status:'Critical'
}
},
template:'<p>Server status {{ status }} (<button @click="changeStatus">Change</button>)</p>',
methods: {
changeStatus(){
this.status = "Nomal"
}
},
};
var vm = new Vue({
el: "#app",
components:{'local-cmp':cmp}
})
平面設(shè)計師不可忽視的“數(shù)據(jù)”
短視頻泛濫的今天，足以證明純文字或者純圖像的輸出已不能滿足人們對信息的攝入?？磮D太單調(diào)，看文字太枯燥，所以不斷有設(shè)計師開始思考怎么重新設(shè)計圖文的形式讓信息視覺化效果更佳。
信息設(shè)計區(qū)別于傳統(tǒng)的平面設(shè)計，它更著重于數(shù)據(jù)的視覺化。目前，全球范圍內(nèi)的設(shè)計師們都在尋求以更創(chuàng)新、更獨特、更有趣的方式來展示數(shù)據(jù)，信息圖表就是信息設(shè)計中的一個子集，它能夠使人們更好的讀懂數(shù)據(jù)。越來越多的國家和企業(yè)已將信息圖表設(shè)計運用于各領(lǐng)域的日常工作。
信息爆炸的時代正好缺少了這樣一種整合信息的手段，信息圖表的形式正好幫助人們解決了這樣的一個難題。所以說信息圖表設(shè)計不等于視覺設(shè)計，平面設(shè)計師通過扮演數(shù)據(jù)分析師獲得鍛煉，通過數(shù)據(jù)對比掌握最真實的情況，拉大平面設(shè)計師的思維范疇同時獲得更多尊重與信任。
信息圖表早已出現(xiàn)
信息圖表的歷史早于網(wǎng)絡(luò)，大約32，000年。公元前30，000年的洞穴繪畫很容易被稱為第一個信息圖表，描繪了周邊地區(qū)的動物和其他資源。作為數(shù)據(jù)的直觀表示，它們絕對是信息圖表。
埃及的象形文字也是如此。公元前3000年左右，古埃及人用這些信息圖表來講述生活，工作和宗教的故事。
更為現(xiàn)代的信息圖表歷史可能始于William Playfair，他是統(tǒng)計圖形學的早期創(chuàng)新者。1786年，他出版了商業(yè)和政治地圖集，其中顯示了許多代表英格蘭經(jīng)濟的條形圖，折線圖和直方圖。他在1801年用第一張面積圖和第一張餅圖進行了跟蹤。
1857年，英國護士佛羅倫斯·南丁格爾使用信息圖形，說服維多利亞女王改善軍隊醫(yī)院的條件。她的圖表顯示了克里米亞戰(zhàn)爭每個月的死亡人數(shù)和原因：可預(yù)防的藍色疾病，紅色傷口和其他黑色病因。
說到英格蘭，信息圖表歷史上的一大步是在1933年，當時哈里貝克創(chuàng)建了倫敦地鐵的第一張地圖，只顯示了描繪公共交通路線和車站的線路。這是一個重要的發(fā)展，因為它將視覺圖表移動到日常生活中。
信息圖表的應(yīng)用范圍
因為日常生活中最常被我們接觸到的信息圖表就是地圖，所以總有人認為信息圖表就是地圖。其實地圖僅是信息圖表的用途之一，信息圖表不應(yīng)該被局限地認為只能作為地圖使用，下面為大家普及一些信息圖表案例：
①
說明書
②
游戲設(shè)計
③
網(wǎng)頁設(shè)計
④
APP界面設(shè)計
⑤
指示系統(tǒng)
信息圖表設(shè)計覆蓋的領(lǐng)域非常廣泛，小到說明書、地圖、各種場合PPT制作、書籍設(shè)計、游戲、UI、App、而完成一項信息圖表設(shè)計需要經(jīng)過數(shù)據(jù)采集、分析統(tǒng)計、對比采納、最后通過平面設(shè)計師制作完成。
全球著名信息圖表設(shè)計師
Jan Schwochow
Jan Schwochow是柏林Golden Section Graphics機構(gòu)的所有者和創(chuàng)意主管，并且在柏林的KircherBurkhardt機構(gòu)設(shè)立了一個信息圖表部門。自2007年以來，他一直在管理Golden Section Graphics辦公室，該辦公室目前擁有多達16名員工。該團隊的工作獲得了眾多國家和國際獎項。
①
作品：一個模型體育場
②
啟發(fā)性廣告
Alberto Lucas López
Alberto Lucas López是華盛頓高級地理圖形編輯，他的作品在美國、亞洲和歐洲獲得了無數(shù)獎項。Alberto的信息圖表從其他領(lǐng)域脫穎而出，因為他的精致和反由他不斷尋求創(chuàng)新所驅(qū)動的直觀概念。僅在2015年，他就贏得了50多項國際獎項。
①
作品：Fender Stratocaster
Antonio Farach
Antonio Farach是Muscat Media Group的信息圖表編輯，也是阿曼時報和Al Shabiba的出版商。
①
作品：Crimean-Congo Fever
SUNGHWAN JANG張圣煥／韓國
韓國弘益大學美術(shù)學院視覺設(shè)計系學士、弘益大學產(chǎn)業(yè)美術(shù)研究院碩士?，F(xiàn)為203 X Design Studio代表、文化月刊《Street H》發(fā)行人，他在2013年開設(shè)了自己的“信息圖表實驗室”，研究和設(shè)計了不少優(yōu)秀的信息圖表作品。
①
作品：Self-Publishing
②
作品：Understanding Cat Care
③
作品：Burger
④
作品：Korean SOJU
為什么我們要學習信息圖表設(shè)計？
信息圖表我認為它始于阿爾塔米拉洞窟里的繪畫。最開始僅僅是用于視覺交流。隨著語言、文字的出現(xiàn)以及紙張的發(fā)明，信息得到了的傳達，以文本為主的書籍也成為了交流的中心。辨別出好的信息以及如何精準傳達顯得尤其重要。
我們可以輕松地在世界上任意一個國家的機場里找到廁所，是因為有代表“廁所”的圖片和圖畫文字。當然圖畫文字只是信息圖表中一個很小的部分?，F(xiàn)在，我們生活的世界已經(jīng)成為一個，比起文字，更多地運用視覺信息打破地域和語言限制的時代。
— 張圣煥2018年Malofiej獎銅獎獲得者
Malofiej獎是由新聞設(shè)計協(xié)會舉辦的。如今這個獎項被稱為信息圖表界的普利策獎，Malofiej獎一直以來表彰在出版和線上的最佳信息圖表。
Malofiej獎26屆信息圖表銅獎▲
為什么你的信息圖表設(shè)計就是學不好？
漸漸地發(fā)現(xiàn)，信息圖表設(shè)計已進入到國內(nèi)視覺傳達專業(yè)里，而事實上在國外信息圖表設(shè)計早已是一門獨立的專業(yè)學科，我們常常問為什么歐美國家做的UI那么漂亮？
這是有原因的，在國內(nèi)師資相當缺乏的條件下，信息圖表設(shè)計往往是走馬觀花，忽視制作方法上的有效性，導(dǎo)致作品要么擁有視覺沖擊力卻缺乏表達的準確性，要么就是由數(shù)據(jù)轉(zhuǎn)化出的視覺效果平庸缺乏魅力。那么怎么樣才可以制作出有魅力的信息圖表設(shè)計？
經(jīng)過深入的觀察與分析，我們認為信息圖表設(shè)計將改變平面設(shè)計的未來，由Helvetica 掀起的字體設(shè)計熱蔓延全球，讓字體設(shè)計意識得到重視與提高，而下一股推動這個信息時代發(fā)展的必定是信息圖表設(shè)計，有魅力的信息圖表設(shè)計記錄時代的變遷，讓世界越有魅力！
BranD × 張圣煥
作者：BranD
鏈接：https://www.sohu.com/a/245081283_611151
來源：搜狐
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
藍藍設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
HT 是啥：Everything you need to create cutting-edge 2D and 3D visualization.
這口號是當年心目中的產(chǎn)品方向，接著就朝這個方向慢慢打磨，如今 HT 算是達到了這樣的效果，談不上用盡洪荒之力，但我們對產(chǎn)品結(jié)果很滿意，特別是 HT 的用戶手冊，將例子和文檔無縫融合一體，小小 10 來兆開發(fā)包居然包含了四十五份手冊，數(shù)百個活生生的 HTML5 例子，還沒體驗過的同學可以點擊 http://www.hightopo.com/guide... HT 手冊入口玩一玩。
這樣綜合并可搜索的手冊入口居然還常被問及 HT 的 Demo 在哪里？只能怪這些年深入人心的用戶體驗理念，把人慣得包括很多程序員都如此之“懶”，當然也怪我們沒把用戶體驗的最后一公里做到位，于是最近 wangyinlong 同學人工例子抓圖，將數(shù)百個手冊例子進行了歸類整理，最終形成了方便大家直觀查找所有 HT 例子的頁面：http://www.hightopo.com/demos...
很明顯 http://www.hightopo.com/demos... 相比 http://www.hightopo.com/guide... 頁面，對于 HT 老用戶包括我們自己做技術(shù)支持，都感覺查找例子更直觀方便，但對于 HT 初學者，面對這一堆數(shù)百個涵括通用組件、網(wǎng)絡(luò)拓撲圖組件、3D 組件、矢量圖形、各種編輯器等等五法八門的 HTML5 例子盛宴，往往無從下手，為此我打算寫個《數(shù)百個HTML5例子學習HT圖形組件》的系列文章，引導(dǎo)各種電力、電信、工控 SCADA 等不同行業(yè)領(lǐng)域用戶，學習使用 HT 這全套一站式 HTML5 圖形組件。
拓撲圖組件作為最典型的 HT 客戶需求應(yīng)用，自然是首篇登場。
HT 的拓撲圖組件主要基于 HTML5 的 Canvas 技術(shù)，拓撲圖是電力和電信的叫法，但該組件遠不僅僅用于呈現(xiàn)節(jié)點和連線，在 HT 里面我們沒把該組件狹義的稱為 Topology、Network 或 Diagram，我們將該組件類名稱為更通用的 GraphView，只要你有想象力，你可以用拓撲圖組件做出任何其他組件，對于一些需求你想不出來用啥組件實現(xiàn)時，往往就是拓撲圖組件需要站出來發(fā)力了：
可能大部分不在游戲領(lǐng)域混的同學會好奇上面兩張圖是什么鬼？這兩張是開源的 HTML5 游戲引擎工具 QICI Engine （https://github.com/qiciengine...）游戲工程抓圖，有興趣的同學可到 Github 上下載試玩。
QICI Engine：A free JavaScript game engine library with a web-based comprehensive suite of toolset for making HTML5 games.
整個 QICI Engine 的 HTML5 游戲引擎編輯工具就是基于 HT 組件定制開發(fā)出來的，上圖刀塔場景的資源管理器就是圖標可縮放，圖集可展開合并，可縮小變成樹層次的 GraphView 拓撲圖，而第二張的動作編輯器、曲線編輯器等等部分也都是 GraphView 的身影。
現(xiàn)在你應(yīng)該能理解為什么我說拓撲圖組件幾乎可作出任何其他組件，當然定制其他組件是需要時間精力成本的，否則也不需要有其他組件的存在意義了，開發(fā) QICI Engine 產(chǎn)品是另一個故事，今天就先不展開了。HTML5 游戲已經(jīng)不是啥新鮮玩意兒了，但游戲開發(fā)工具完全基于 HTML5 可運行在瀏覽器還是有點意思的，下圖附上阿明同學的得意之作《城市消消樂》抓圖，有興趣的可玩之：http://engine.zuoyouxi.com/ga...
回到今天的主題，學習使用拓撲圖，第一步就是: Get Your Hands Dirty，哪怕你不熟悉 HTML，直接照葫蘆畫瓢按 http://www.hightopo.com/guide... 的代碼構(gòu)建出兩個節(jié)點三條連線：
// 創(chuàng)建數(shù)據(jù)模型容器
var dataModel = new ht.DataModel();
// 創(chuàng)建拓撲圖組件
var graphView = new ht.graph.GraphView(dataModel);
// 創(chuàng)建一個起始節(jié)點，設(shè)置名字和位置屬性，添加到數(shù)據(jù)模型容器
var source = new ht.Node();
source.setName('source');
source.setPosition(100, 70);
dataModel.add(source);
// 創(chuàng)建一個結(jié)束節(jié)點，設(shè)置名字和位置屬性，添加到數(shù)據(jù)模型容器
var target = new ht.Node();
target.setName('target');
target.setPosition(260, 70);
dataModel.add(target);
// 創(chuàng)建一條連線，設(shè)置起始和結(jié)束節(jié)點，添加到數(shù)據(jù)模型容器
var edge = new ht.Edge();
edge.setSource(source);
edge.setTarget(target);
dataModel.add(edge);
相信上面的代碼很直觀就能理解拓撲圖構(gòu)建的原理，很多人會問 HT 如何通訊獲取數(shù)據(jù)，對后端有限制嗎？HT 只是客戶端組件，不介入到后臺通訊，因此客戶可以采用任何后臺系統(tǒng)，Java、C++、PHP、Node.js 等等，可采用任何通訊方式 HTTP/AJAX、WebSocket 等，采用任何數(shù)據(jù)格式 XML、JSON 或 TXT 等，只需要最后用戶根據(jù)自己格式的數(shù)據(jù)內(nèi)容，采用 HT 圖形庫提供的標準 API 接口創(chuàng)建相應(yīng)的節(jié)點、連線等圖元，設(shè)置相關(guān)的屬性信息，即可實現(xiàn)圖形呈現(xiàn)，所以 HT 組件對后臺和通訊方式?jīng)]有任何要求。
以上的例子對于名稱和位置的設(shè)置都是 demo 中隨意設(shè)置的值，真正的系統(tǒng)用戶一般會通過后臺數(shù)據(jù)庫查詢，然后根據(jù)業(yè)務(wù)數(shù)據(jù)內(nèi)容構(gòu)建圖元并設(shè)置相應(yīng)的屬性。你會發(fā)現(xiàn)雖然在構(gòu)建拓撲圖，但你80%的代碼都在和 Data 和 DataModel 打交道，這兩個又是什么鬼？其實絕大部分 HT 的客戶開發(fā)完整個系統(tǒng)都沒必要認真學習《HT for Web 數(shù)據(jù)模型手冊》，也不用管 HT 采用的是啥 MVC/MVP/MVVM 框架，需要深入了解的可閱讀 http://www.hightopo.com/guide... 手冊
簡單說 Data 就是 HT 的最小數(shù)據(jù)單元，對于 GraphView 組件可以說是一個圖元，一個節(jié)點或一條連線；對于 Tree 組件可以說是一個樹節(jié)點；對于 Table 組件可以說是一行記錄，這些 Data 圖元需要添加到 DataModel 的數(shù)據(jù)容器中，而 HT 的所有視圖組件 GraphView、List、Tree、Table 甚至是 3D 組件 Graph3dView 都會綁定一個數(shù)據(jù)容器，這些視圖都會監(jiān)聽數(shù)據(jù)容器的事件變化，進行自身組件的刷新顯示工作，這些事件包括圖元的屬性變化、圖元的增刪，還有很重要的一個關(guān)系，就是圖元的父子關(guān)系變化。
提到父子關(guān)系讓我們來看看一個比較綜合性的小例子：http://www.hightopo.com/guide...
// 創(chuàng)建數(shù)據(jù)容器
dataModel = new ht.DataModel();
// 創(chuàng)建拓撲圖、屬性頁、列表、樹、表格、樹表組件
graphView = new ht.graph.GraphView(dataModel);
propertyView = new ht.widget.PropertyView(dataModel);
listView = new ht.widget.ListView(dataModel);
treeView = new ht.widget.TreeView(dataModel);
tablePane = new ht.widget.TablePane(dataModel);
treeTablePane = new ht.widget.TreeTablePane(dataModel);
// 創(chuàng)建組圖元，添加孩子節(jié)點，加入數(shù)據(jù)容器
group = new ht.Group();
group.setName('HT for Web ' + ht.Default.getVersion());
group.addChild(hello);
group.addChild(world);
group.addChild(edge);
dataModel.add(group);
這個例子增加了設(shè)置父子關(guān)系的代碼，同時有更多的組件（拓撲圖、屬性頁、列表、樹、表格、樹表組件）綁定了同一個數(shù)據(jù)模型 DataModel，但用戶的代碼依然主要在 Data 和 DataModel 上的操作，這也是 HT 架構(gòu)設(shè)計的優(yōu)勢，用戶使用更多組件并沒有增加新的學習成本，只要掌握的 DataModel 的基本操作，更多的組件也是如此。
雖然圖元屬性設(shè)置、增加變化甚至是選中操作都可以通過 DataModel 搞定，但并不意味著 DataModel 是萬能的，有些需求還是需要通過 View 視圖進行。例如很多基本需求是雙擊圖元要做些業(yè)務(wù)處理，如何監(jiān)聽呢？怎么從 Node 上沒找到啥 onClick 之類的接口？這可以從《HT for Web 入門手冊》的交互章節(jié)找到答案：http://www.hightopo.com/guide...
graphView.addInteractorListener(function (e) {
if(e.kind === 'clickData'){
console.log(e.data + '被單擊');
}
else if(e.kind === 'doubleClickData'){
console.log(e.data + '被雙擊');
}
});
如果你還想打破砂鍋問到底為什么不直接在 Data 或 DataModel 上提供交互處理，Data 數(shù)據(jù)是可以給很多 View 視圖共享用的，DataModel 甚至都不知道 View 視圖的存在，
他們只會派發(fā)模型變化事件，而 View 通過監(jiān)聽模型的變化進行相應(yīng)的更新處理，HT 的模型架構(gòu)上極其類似 Facebook React https://facebook.github.io/re... 的 Flux
單向流設(shè)計理念：http://facebook.github.io/flu...
HT 的 DataModel 相當于 Flux 中的 Store 模塊，拓撲圖、樹和表格這些自然對應(yīng) View 模塊，一般發(fā)起 Action 動作就是后臺數(shù)據(jù)變化，或者用戶手工輸入表格屬性值之類，但最終都不是直接修改 View，都是從 Data/DataModel/Store 發(fā)起修改，然后數(shù)據(jù)模型派發(fā)事件給所有 View，最后 View 根據(jù)不同事件做相應(yīng)的處理。
有興趣的同學可以打開 http://www.hightopo.com/guide... 控制臺，輸入如圖的代碼體驗下實時修改數(shù)據(jù)模型的效果：
剛才的例子我們提到了一個 Group 類型，這個類型圖元節(jié)點在 GraphView 上顯示成了組合效果，可雙擊展開合并，可跟隨著孩子節(jié)點的位置大小變化和自適應(yīng)變動，除了 Node、Edge、Group 外，HT 還提供了 Shape、Polyline、Grid、SubGraph 等多種圖元類型，這些圖元類型都具是有針對性的展示效果，以滿足各種行業(yè)的基本圖元需求：http://www.hightopo.com/guide...
對于連線 Edge，HT 還提供了自定義走向的擴展機制，并提供了相應(yīng)的預(yù)制擴展連線類型插件，參見《HT for Web 連線類型手冊》http://www.hightopo.com/guide...
當然預(yù)定義的類型再多也不可能滿足千奇百怪的行業(yè)圖元需求，這是你該閱讀下《HT for Web 矢量手冊》http://www.hightopo.com/guide... 的時候了，關(guān)于矢量的介紹以前寫過兩篇老文供大家參考：《HT全矢量化的圖形組件設(shè)計》和《HT圖形組件設(shè)計之道（二）》
以上這個例子你可以在這里玩：http://www.hightopo.com/demo/... 。相關(guān)視頻：http://v.youku.com/v_show/id_...
另外 HT 的矢量內(nèi)置了 Chart 類型，矢量內(nèi)置的 Chart 不同于傳統(tǒng)獨立的 Chart 組件，傳統(tǒng)的 Chart 是獨立的視圖 DOM 組件，但 HT 的拓撲是 Cavans 方式繪制，因此沒法實現(xiàn) Chart 組件和普通圖元的不同層次融合顯示，但矢量的 Chart 類型倒是完美的實現(xiàn)了這樣的融合，很多工控應(yīng)用的客戶會將矢量 Chart 與拓撲圖元素融合一體，可參見《基于HT for Web的Web SCADA工控移動應(yīng)用》http://www.hightopo.com/blog/... 一文中 HT 的 Web SCADA 應(yīng)用案例
當然你也可以把 HT 與 百度 ECharts 進行整合，只要是 HTML 圖形組件就可以整合到 HT 的布局容器中，可參考《ECharts整合HT for Web的網(wǎng)絡(luò)拓撲圖應(yīng)用》，此例子將 ECharts 整合 HT 拓撲圖做了告警統(tǒng)計的圖表呈現(xiàn)效果：
除了混合第三方圖形組件庫外，HT 圖撲還能嵌入 SVG 的圖片進行矢量呈現(xiàn)，參見《繪制SVG內(nèi)容到Canvas的HTML5應(yīng)用》
在某些特殊的情況下用戶還可以將 HTML 元素嵌入作為普通的 Node 節(jié)點，并支持拓撲圖的縮放、改變大小等等操作效果，可參考《HT for Web HtmlNode 手冊》http://www.hightopo.com/guide... ，這種結(jié)合有一定的局限性，不到萬不得已不建議用戶使用該插件。
HT 提供了各種豐富的通用組件，以及復(fù)雜的拓撲圖編輯交互插件 http://www.hightopo.com/guide...，用戶分分鐘可以快速開發(fā)出各種各樣的編輯器工具。入門手冊中也有個 http://www.hightopo.com/guide... 簡單的編輯器例子，教用戶如何自定義創(chuàng)建節(jié)點、連線和多邊形的示例教材，學習自定義拓撲圖交互可從此例子入手。
甚至可以像 http://www.hightopo.com/guide... 這個例子那樣，關(guān)閉掉拓撲圖的所有默認交互，直接通過添加原生的 HTML DOM 的事件監(jiān)聽進行自定義交互邏輯處理。
構(gòu)建出拓撲圖后很多人關(guān)系的是如何實現(xiàn)動畫，動畫從本質(zhì)上來說就是在一定的時間點上驅(qū)動圖元的參數(shù)變化，例如大小、顏色、粗細包括可見不可見等來實現(xiàn)各種動畫效果，而 HT 本來所有圖元都是數(shù)據(jù)驅(qū)動，用戶隨時可以修改 Data 上的任何屬性，因此隨便起個定時器 windwo.setInterval 不斷改變圖元屬性值即可實現(xiàn)動畫效果，但為了方便客戶 HT 還提供了諸多方便函數(shù)和插件。
例如 http://www.hightopo.com/guide... 中的 ht.Default.startAnim 函數(shù)，該函數(shù)支持 Frame-Based 和 Time-Based 兩種方式的動畫，為了理解其中的 Easing 參數(shù)可參見 《透過WebGL 3D看動畫Easing函數(shù)本質(zhì)》文章和 http://www.hightopo.com/guide... 這個例子
如果是持續(xù)周期的變化可采用《HT for Web 調(diào)度手冊》http://www.hightopo.com/guide... 的調(diào)度插件：
如果你喜歡 https://github.com/tweenjs/tw... 的 chaining 函數(shù)方式串聯(lián)多種動畫，可采用《HT for Web 動畫手冊》http://www.hightopo.com/guide... 的插件。對于連線流動、虛線流動等常見連線動畫需求 HT 已經(jīng)封裝了相應(yīng)的插件《HT for Web 流動手冊》和《HT for Web 虛線流動手冊》
HT 的拓撲圖的節(jié)點位置都是邏輯坐標，并非 GIS 的地理信息經(jīng)緯度坐標，但這并不妨礙 HT 的拓撲圖可以和百度地圖、GoogleMap、OpenLayers 等第三方 GIS 地圖引擎進行整合呈現(xiàn)，參見《百度地圖、ECharts整合HT for Web網(wǎng)絡(luò)拓撲圖應(yīng)用》，該文將 HT 拓撲圖、百度地圖、ECharts、HT 連線流動和面板等插件做了個綜合的呈現(xiàn)展示效果：http://www.hightopo.com/demo/...
拓撲圖做完呈現(xiàn)需求效果之后，常會有拓撲圖紙數(shù)據(jù)需要保存的需求，這個很簡單，DataModel 內(nèi)置將所有數(shù)據(jù)轉(zhuǎn)換成 JSON 的功能，非常方便用戶將拓撲圖內(nèi)容進行導(dǎo)入導(dǎo)出工作，一般用戶會將 JSON 數(shù)據(jù)字符串化并進行壓縮，然后存到后臺數(shù)據(jù)庫或文件系統(tǒng)，運行時再進行加載導(dǎo)入，這方面請參見《HT for Web 序列化手冊》，其實 HT 的可序列化功能并非為拓撲圖組件特殊設(shè)計，本質(zhì)是整個 DataModel 數(shù)據(jù)層就可以序列化，所以意味著你可以存儲表格內(nèi)容、樹層次關(guān)系包括 3D 場景。
關(guān)于客戶端存儲數(shù)據(jù)方面還可參考這篇文章《HTML5 Web 客戶端五種離線存儲方式匯總》
http://www.hightopo.com/guide...
另外 HT 的數(shù)據(jù)綁定功能是非常贊的特點，往往讓你意想不到的寥寥幾行代碼即可實現(xiàn)很有趣的功能，例如下面這個例子，實現(xiàn)一個 Chart 圖元在拓撲圖中，用戶看看拖拽圖元實現(xiàn)餅圖旋轉(zhuǎn)，雙擊切換是否中空，只有寥寥十來行代碼即可實現(xiàn)，我是想不到如何還能更簡單實現(xiàn)這樣的功能：http://www.hightopo.com/guide...
對于電信網(wǎng)管客戶常常有告警的特殊行業(yè)呈現(xiàn)需求，這方面 HT 也提供了針對電信 OSS/BSS 網(wǎng)管拓撲圖應(yīng)用的《HT for Web 電信擴展手冊》http://www.hightopo.com/guide... 插件，針對圖元告警渲染、告警傳播等提供了特殊定制化的展示效果：http://www.hightopo.com/guide...
雖然 HT 的拓撲圖組件可以承載萬以上的拓撲圖元量，但如果這些拓撲圖元都通過手工布局那是不可思議的工作量，因此 HT 為拓撲圖組件提供的多種自動布局引擎算法，例如彈力布局、圓形布局、星型布局和層次布局等多種樣式效果
《HT for Web 自動布局手冊》http://www.hightopo.com/guide...
《HT for Web 彈力布局手冊》http://www.hightopo.com/guide...
HT 還為拓撲圖組件提供了貼心的鷹眼 Overview 插件（http://www.hightopo.com/guide...），整合上 HT 的 Panel 面板插件（http://www.hightopo.com/guide...）是用戶常見的融合拓撲和鷹眼的展示方式，鷹眼具有實時同步拓撲內(nèi)容，可滾輪縮放，點擊定位，拖拽平移等操作方式，非常方便用戶瀏覽導(dǎo)航大數(shù)據(jù)量拓撲圖的應(yīng)用場景。
拓撲圖篇就寫這些吧，HT 的拓撲圖組件還有非常多的功能，無法在一篇博客中說透，我只能蜻蜓點水的提到大部分拓撲圖應(yīng)用需要關(guān)注的功能點，HT 更多的 HTML5 拓撲圖功能留給大家去探索吧。
http://www.hightopo.com/guide...
藍藍設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
環(huán)境搭建
首先在微信公眾平臺注冊一個我們自己的賬號：
根據(jù)注冊提示完成注冊
藍藍設(shè)計的小編 http://m.yvirxh.cn
<tbody id="2w2yc"></tbody>