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