可能很多人認為搜索設計很簡單：在主頁頂部設計一個搜索框或者搜索圖標，就可以完成操作。但搜索前、中、后的體驗大家有沒有仔細考慮過呢？
在搜索過程中需要展示什么？如何幫助用戶盡快找到他們想要的？搜索的體驗如何與其他體驗相聯系？這是很多設計師思維模糊的地方。
在本文中，將介紹搜索設計需要了解的內容，以及在不同App和案例中的搜索體驗。
搜索是產品中不可或缺的一部分，無論打開哪個App, 我們都能很快找到搜索功能。搜索作為一個功能入口，簡單的呈現方式對用戶來說很重要。
搜索設計常見的形式有3種:
頂部搜索框
圖標(放大鏡)搜索
底部搜索導航
從視覺和優先程度來看，底部導航>搜索框>圖標。那么每種形式的優缺點是什么，又分別在什么時候使用呢？
搜索框通常位于App主頁的頂部，作為一個大的觸摸目標，更容易被用戶發現和使用。搜索框的組成一般包括容器、預設文字、操作按鈕。
容器通常填充為白色或灰色，里面帶有預設好的產品文案。但是容器什么時候用白色，什么時候用淺灰色呢？這取決于App主頁的背景色。
設計準則是始終將容器的顏色與頁面背景色相對比。拿谷歌地圖和微信讀書相比較，灰色背景下用白色的搜索框，反之亦然。
當然也有例外，Airbnb在白色背景上就有一個白色的搜索框。為什么這樣設計呢？因為它的搜索框帶有陰影，能和背景作出區分，也是一種可行的設計方法。
預設文字的作用是提示用戶要搜索的內容或搜索方向，告訴用戶可以從搜索中得到什么。在App Store中，預設文字告訴用戶可以搜索“游戲、應用、故事等”，Messenger中的預設文字只有“搜索”，為用戶提供功能入口。
預設文字在內容瀏覽類App中很常見——不僅可以展示擁有的內容類別，還能結合搜索趨勢來積極地推廣熱門內容。比如微信讀書的搜索框使用最近流行的書作為預設文字，以此提高內容的曝光率，吸引用戶閱讀。
操作按鈕雖然與搜索相關，但擺放的位置不固定?？赡茉谒阉骺騼炔浚部赡茉谒阉骺騼蓚取Ｄ男﹫D標/文本按鈕對搜索有幫助呢？最常見的是搜索框中的語音輸入功能和二維碼圖標。
另外一個好的搜索體驗的關鍵是能從視覺上區分與搜索相關的圖標。
如果一款產品希望用戶專注于瀏覽內容，或者不需要頻繁使用搜索，可以采用圖標的樣式將搜索入口放在頁面頂部。例如，在Medium上用戶通常是漫無目的地瀏覽內容，而不是搜索特定的主題；Facebook上的用戶通常只想瀏覽朋友的帖子，很少搜索內容。
與前兩種形式相比，底部搜索導航離用戶距離最近，更容易作為接觸目標也被賦予更多的特性。
UberEats通過主頁的排序和過濾，幫助用戶分類感興趣的餐廳，并將搜索作為底部導航的第二個標簽，這樣用戶就能夠不斷看到和探索新餐廳。
Tiktok也將搜索入口放在第二導航中，完整的首頁有利于為瀏覽視頻的用戶提供沉浸式的體驗。
當用戶想搜索某個內容，點擊搜索框之后該做什么呢？App應該如何幫助用戶搜索？
用戶點擊搜索框時會彈出一個頁面，我們將其定義為“搜索頁”。搜索頁的目的是讓用戶做好搜索的準備，對要尋找的內容進行提示，拓寬用戶對要搜索的內容的看法。
彈出的搜索頁幫助產品完成兩個主要任務：
利用視覺和交互告訴用戶已經做好搜索的準備；
通過頁面上的內容提醒用戶他們正在尋找的東西，或者為他們提供可能感興趣的東西。
當我們有一個特定的搜索目標時，我們的注意力就會完全放在搜索框(或搜索圖標)上，如果突然被引導到一個新的頁面，可能會帶來零碎的體驗。
所以要把“搜索前”到“搜索頁”的轉換做得更自然，讓用戶感覺仍然在同一個頁面上操作一樣。點擊Facebook的搜索圖標，圖標通過平滑的動效擴展成一個搜索框。
無論搜索在什么位置，顯示搜索框的不同狀態很重要，告訴用戶“已經準備好進行搜索”。以領英為例，分析一下從搜索前到搜索頁面發生了哪些變化：
從搜索中返回的方法：取消。這對所有的搜索體驗都是必要的，可以使用取消或者返回圖標。
搜索框改變了填充色。搜索框從灰色變為白色，反映當前搜索操作處于焦點狀態。
只留下必要的圖標。二維碼能幫助搜索所以仍然保留，而左邊的個人資料圖標和搜索圖標都會消失。
彈出光標來鼓勵用戶輸入文字。
在某些App中，搜索框在“搜索前”和“搜索頁”中的位置可能不相同，這樣做的目的是在兩種體驗之間進行平滑的過渡。Google的搜索框向上滑動來展示搜索內容，保證過渡動效的流暢性。
有些搜索體驗不可能讓用戶停留在同一頁面上。Airbnb的搜索需要一系列的引導將用戶轉移到一個全屏的流程中。
關鍵的地方在于，搜索頁面在屏幕中間彈出，鍵盤向上滑動，用戶可以通過無縫的交互從“搜索前”平滑過渡到“搜索中”。
歷史記錄可以幫助用戶進行有針對性的搜索，因為過去的興趣是當前興趣的有力指標。但是只顯示歷史搜索記錄會將用戶的注意力集中到過去的搜索上，而不是保持搜索的狀態。所以除了顯示搜索記錄外，顯示推薦內容能拓寬用戶對潛在事物的興趣。
當一款產品的功能主要是為了讓用戶完成某個特定的任務或達到某個目標，那么它可能就沒有動機去推廣任何內容。這類產品只會顯示最近的搜索記錄，比如Notion是一個筆記應用，只負責存儲用戶的筆記，因此只顯示過去的搜索記錄來幫助用戶進行搜索。
有的產品通過將各種內容提供給用戶查看和探索，為用戶實現某個目標。谷歌地圖的搜索框下面有熱門的標簽，用戶很可能會從標簽中找到他們感興趣的類別。用戶點擊搜索框后，谷歌就會假設用戶有特定的去處，只專注于幫助他們到達想去的地方。
主頁上的推薦內容可能很容易被忽略(因為它可能與用戶的操作無關)，但是搜索頁上的熱門推薦很少會被忽視。因為用戶是帶著目標主動進入搜索頁，所以不會省略頁面上的任何信息。
通過在最近搜索頁上將各種美食放在首位，UberEats和Doordash這類送餐App就可以引導用戶嘗試更多的餐廳。
展示熱門話題能為用戶創造一種社區感，會讓用戶覺得他們與更大的社會保持聯系。Quora是很大的問答平臺，它不僅顯示推薦的話題，還顯示了關注者的數量。看到這一點，用戶會想：“如果一個話題有13萬追隨者，那一定很好！我也想成為其中的一員?！?
新聞類搜索具有很強的時效性，用戶很清楚明天的內容將不同于今天的內容。所以有些App會對新聞或熱搜進行實時排名，向用戶展示最熱門的資訊。
Reddit展示了當前的趨勢，讓用戶了解的內容，Robinhood每小時都會更新華爾街關于股市的文章，這樣用戶就可以做出及時和明智的財務選擇。
通過算法，很多App都能從用戶過去的興趣中推斷用戶的喜好，然后不斷推送相似的內容，比如淘寶的相似商品推薦。
同樣的策略也可以應用于搜索頁。小紅書作為一款流行App，搜索頁顯示根據用戶口味定制的推薦；Twitter的“For you”標簽根據過去的搜索展示的相關內容。顯示更多與用戶相關的內容可以拉近與產品的距離，用戶也會花更多的時間使用產品。
Medium的搜索做得很聰明，它將搜索頁面細分為兩個步驟：先點擊搜索框來瀏覽不同的主題，再次點擊會顯示光標和搜索記錄。通過這種分解體驗，用戶在搜索時獲得了更多的信息量和更簡潔的體驗。
以上是關于搜索前和搜索頁的體驗設計。產品的搜索體驗受到多方面的影響：自身目的、內容種類、受眾類型。希望這篇文章能夠讓你了解搜索體驗的可能性，為搜索設計帶來更清晰的方向。
文章來源：站酷 作者：Clippp
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
伴隨著移動互聯網的快速發展，5G通信，人工智能，物聯網等新技術的發展也越趨成熟，人們接觸信息的效率不斷在提高，接受信息的緯度也更廣泛，如何消化我們在生活中被大量切割的碎片化時間，如何能讓用戶更聚焦內容不被打擾，拉長用戶的停留時間，我們正身處在一個內容快速消費的時代。
長短視頻，動畫電影，互動裝置等形式能夠更容易吸引用戶的注意力，無論是消費者，創作者或是設計的從業者，制作的門檻降低了，以往是一個團隊的輸出，現在一個人也能夠打造高質量的爆款，人人都是內容的生產者成為了這個時代的標簽。文章從設計從業者的角度出發，從攝影攝像，視頻動畫，動態圖形，交互裝置等四個緯度來闡述內容設計的制作方法與近幾年的風格趨勢。
實拍一直是多媒體領域最常見也是最不可替代的呈現方式，在他的發展歷程中這項技術也衍生出了不少有趣的風格和玩法，隨著技術的進步，各種實拍新技術也是不停一直在影響著攝影師拍攝。
1. 微距拍攝
微距，特別適合用來展示被攝物體的細節，比如小昆蟲的五官，花蕊上的露水，冰霜上的晶體結構等等。您可以在攝影棚或室外環境中拍攝微觀照片和視頻，只要您充分放大被攝體即可。通常來講人眼最近對焦距離是15cm，低于這個距離就看不清東西了，而專業的光學矯正鏡頭按照近距離拍攝進行設計可以拍攝出一個極端的近景視圖，可以得到肉眼無法看到的細節。
△ 來源于網絡
產品為了吸引消費者的購買熱情，自然離不開產品宣傳片，如今的產品廣告不再局限于片面的展示產品，而是開始尋找不同的視感令自己的產品看上去更具吸引力。在很多產品拍攝當中會經常用到微距拍攝的手法，正如前面所說，利用微距拍攝手法展示產品部分的細節有的時候或許可以讓畫面更有質感。
△ 威士忌廣告片段
△ TOREAD探路者戶外新品面料-「遇水搭橋」系列主題微距圖拍攝
微距攝影是區別于常規攝影的一種特殊的攝影方法，這門拍攝技術帶來的視感也非常的吸引人，但是往往這種特殊的拍攝手法卻非常受限于硬件設備，正如我們前面所說的設備參數都是專門的微距鏡頭設計的。為了抓住這一點，讓更多人知道這個有趣的拍攝手法，市面上也出現了越來越多不同的微距鏡頭給不同需求的攝影師使用。近兩年比較經典的一個就是LAOWA24mm鏡頭，在于它獨特的形狀可以到達普通鏡頭無法企及的位置，機位更加獨特。
△ 來源于網絡
2. 升格拍攝
升格拍攝無疑是讓視頻表現提升幾個檔次的常用手段之一，電影的標準幀速率是24幀每秒，但是為了實現升格就需要一些技巧，比如拍攝的幀數高于24幀每秒，這就是我們常見的「慢動作」?，F有的升格拍攝幀數基本上分為30幀，60幀，120幀，240幀，再往上則是影視和特殊拍攝會用到的了。由于肉眼觀察高速運動物體是有限制的，在拍攝高速運動的物體的時候，利用升格將畫面播放速度變慢便可以更好的觀察到物體高速運動時的狀態。
△ 來源于網絡
在廣告拍攝當中升格鏡頭也是一個十分常用的拍攝手法，正如我們所說肉眼觀察高速運動物體的速度是有限， 往往人們沒辦法看清楚快速運動的物體，有些產品廣告使用慢動作升格鏡頭加上充分美化的畫面便更能吸引消費者的目光。
△ 來源于網絡
拍攝影片的時候在不同的環境之下也會利用升格烘托氣氛，在我們看到的很多片子里面有緊張刺激的，煽情的，都會利用升格來烘托片子的氣氛。由于相機技術的進步，拍攝變得比以往任何時候都更加容易。今天任何人都可以通過相機和高質量的麥克風輕松地成為vlogger拍攝出好看的旅拍視頻，加上升格鏡頭在硬件技術的加持下可以快速的出效果，令這部分人群創作出更好的拍攝作品。
3. 無人機航拍
航拍一直以來都是一個不可或缺的拍攝手法，很多的電影以及廣告宣傳片當中我們都可以看到不少的大范圍運鏡片段，天空中的視角對與陸地上行走的人來說還是一個十分新奇的視角，一般來說也很難看得到，所以片子中加入航拍的元素往往可以增加不少高級感。
△ 來源于網絡片段
如今技術發展，無人機的民用化推進，市面上各大廠商開始推出自己的航拍無人機，航拍也開始出現在了普通人的視野中，讓普通人也可以在高空拍出想要的風景。加上如今4G和5G技術的發展，短視頻的流行，令網絡上的自媒體人也擁有了更好的展現自己作品的平臺，這些拍攝技術的平民化讓自媒體人們可以更好的發揮視頻創作，而不會總是局限于技術。
△ 來源于網絡片段
4. 高質量色彩呈現
如果你有自己拍攝視頻，那或許有聽說過LOG配置文件，LOG模式通常在專業和專業消費級相機中所配置的拍攝模式，LOG模式的顏色看起來非常平均，因為這樣可以地減少截取捕獲的高光或陰影。這使得輸出的視頻幾乎沒法直接使用，直到對其進行編輯。它的優點在于，以輸出高比溶度的視頻方式來調整顏色和對比度（即，對其進行分級）從而可以得到自己想要的視頻顏色風格。
△ 威士忌廣告片段
△ ANGIE’S爆米花廣告
LOG指的是數學上的曲線函數，并不是一個獨立的拍攝風格，而是風格用上了LOG函數轉換，在這個模式下我們可以看到無論是明處或暗部LOG都將細節保留了下來，在這個基礎之上調出我們想要的顏色方可得到一個更加清晰的圖像。在數據圖當中我們也可以看到log模式下所有的顏色數據都處于中間值，不會有過度夸張的位置，編輯之后的圖像所有顏色的明暗都區分開來了，也形成了自己想要的色調。
△ QQ x MINISO
實拍產業作為一個主流多媒體形式一直在發生著改變，隨著科技的進步，曾經我們需要大費周章才能拍出來的效果，如今也越來越簡單。各種新技術的出現不斷地改變著人們拍攝的方式和形式，新的玩法也層出不窮并不斷影響著其他的多媒體形式。未來實拍將會更加的簡單平民化，讓普通人也能拍出曾經大費周章才能做到效果。
縱觀整個互聯網設計行業發展史,計算機圖形技術一直在影響著設計。
在計算機圖形輸出里，最終效果呈現靠的是圖像渲染（Renderding），渲染又分離線渲染和實時渲染，以往字面上理解則是實時渲染，高質量則是離線渲染。下面介紹一下為了如何可以將兩者結合實現高質量輸出CG，視頻動畫。
Realtime-Render （實時渲染）：在虛擬世界的圖形表現中，實時渲染占有很重要的地位。所謂實時渲染，就是圖形數據的實時計算和輸出。如果說實時渲染的概念對你很陌生，那如果用實時渲染領域中的一個重頭戲來給你舉例，相信你就不會有陌生的感覺：那就是游戲。游戲因為需要玩家去互動，因而對渲染的實時性有很高的要求。隨著計算機圖形技術的不斷發展、硬件計算能力的不斷升級，游戲實時渲染的畫面逐漸從簡陋走向逼近真實。
△ Unreal engine 4
以上Demo 是專業團隊制作完成的高質量短片，但是普通用戶想要達到這種級別還是有些難度的。放出這些短片也代表現有的軟件技術和硬件設備已經可以達到這個水平，當然有也商業競爭的成分Unity和Unreal 是目前用戶最多游戲開發引擎，想要在游戲以外其他領域競爭實時渲染市場份額。也不斷在更新自己的技術。這代表除了游戲行業以為其他跟圖形有關的（像電影，廣告，互聯網）行業也慢慢開始進入實時渲染時代，到目前為止實時渲染還沒有真正得到廣泛應用是因為實時渲染還不能達到想離線渲染那樣影視廣告級別高質量的畫面。
△ Visual ASMR Rock by Onesal
離線渲染大概的流程需要經過模型-場景-綁定-材質-燈光--合成-輸出，每一個步驟都需要大量的技術支持，像上面阿凡達這類大片級別的影片，為了某個效果很研究開發一些新的技術，所以要詳細說明要花很多時間，我們就不詳細說明了，回到主題高質量輸出上面。所以每一步廣告影視作品，都是靠大量的時間和人力堆出來的。那么廣告影視這種渲染方式為離線渲染，而游戲為實時渲染。
△ Unreal engine 5
實際上二者的區別也就在這，但是就是因為這二者的這一個區別，就引發了不少的技術差別在里面。離線渲染對時間往往沒有很極端的要求，用接近現實的光線跟蹤算法技術，設置很高的采樣值和迭代次數，就如阿凡達每一幀畫面需要渲染幾十個小時以上，只要畫面質量夠真實，這些時間成本都可以被容忍。而游戲畫面的渲染，也就是實時渲染的話，則在時間上的資源尤其地珍貴游戲所用的實時渲染就沒有那么滋潤了，先不說幾分鐘渲染一張這么的事情，就連1秒鐘出一張，都不夠人看的。對于游戲來說，再不濟，也要有1秒20多張，才能給玩家看（還不算能流暢操作的情況）。那么實時渲染有可能用于畫面要求高質量的影視廣告等行業嗎。
虛幻5
2020年5月13號,Unreal engine官網發布了Unreal Engine 5 并在Playstation5上運行進行展示Demo（「Lumen in the Land of Nanite」）
△ Unreal engine 5
該演示展示了虛幻引擎5的兩大全新核心技術：
△ Unreal engine 5
Nanite
虛擬微多邊形幾何體可以讓美術師們創建出人眼所能看到的一切幾何體細節。Nanite虛擬幾何體的出現意味著由數以億計的多邊形組成的影視級美術作品可以被直接導入虛幻引擎——無論是來自Zbrush的雕塑還是用攝影測量法掃描的CAD數據。Nanite幾何體可以被實時流送和縮放，因此無需再考慮多邊形數量預算、多邊形內存預算或繪制次數預算了；也不用再將細節烘焙到法線貼圖或手動編輯LOD，畫面質量不會再有絲毫損失。
△ Unreal engine 5
傳統的模型資產做法–先是用Zbrush等雕刻軟件又或者是3D掃描等數據模型–重新拓撲為高、中、底三種面數模型–展UV上材質–烘培法線、凹凸等貼圖–導入游戲引擎中使用，那么為什么要做那么復雜呢？游戲引擎運行資源越大，可能會導致游戲的流程度和游戲體驗不好，為了讓玩家有流程的操作體驗，通過高精度多邊形幾何體烘焙法線凹凸等貼圖用在低精度多邊形幾何體上可以保留高模的細節從而節省運行資源提升游戲流暢度，Nanite完美解決了這個問題。
Lumen
是一套全動態全局光照解決方案，能夠對場景和光照變化做出實時反應，且無需專門的光線追蹤硬件。該系統能在宏大而精細的場景中渲染間接鏡面反射和可以無限反彈的漫反射；小到毫米級、大到千米級，Lumen都能游刃有余。美術師和設計師們可以使用Lumen創建出更動態的場景，例如改變白天的日照角度，打開手電或在天花板上開個洞，系統會根據情況調整間接光照。Lumen的出現將為美術師省下大量的時間，大家無需因為在虛幻編輯器中移動了光源再等待光照貼圖烘焙完成，也無需再編輯光照貼圖UV。同時光照效果將和在主機上運行游戲時保持完全一致。官方的宣傳已經非常親民了，很多業外人士基本知道是怎么回事，也知道虛幻引擎5的優勢。簡而概之：簡化的制作復雜程度，模型師的工作量將大大縮小，二是畫質效果又將邁向更高的一個品質。
△ Unreal engine 5
Unreal 5 這兩大功能可以說是克服了現階段的難題讓實時渲染更接近影視級渲染，然后簡化了以前復雜的工作流程，讓創造變得更簡單了。這代表著以后只要涉及CG類的行業都會發展巨變。
2019年11月12日Quixel 公司被Epic Game（Unreal的公司）收購并宣布Quixel 旗下Bridge(材質管理軟件) Mixer(材質編輯軟件) Megascans(3D掃描資產)對所有Unreal engine 用戶免費，這一爆炸新聞。此前Quixel 是靠賣高精度3D掃描資產盈利的。用Megascans 的3D資產可以創造電影級4K-8K的真實畫面，Unreal engine 5的dome也是用的Megascans 的資產，下面的案例（Rebirth）也是用的Megascans的資產。
△ Rebirth
在沒有免費開放Megascans的之前想要制作8K的3D掃描資產是非常困難的，需要大量的設備和人力支持，在網絡上購買價格也不便宜導致普通個人用戶是很難制作這樣高精度的畫面，這一消息讓更多的自由職業者和個人藝術家加入了實時渲染的潮流趨勢中。讓4K創造不再那么困難。
Megascans Ecosystem: Giving more Power to Artists(Megascans生態系統)
△ After the mountain Rain
來自中國的藝術家Fisher Dai（戴鑫祺）使用Megascans和Unreal engine4創造的4K個人作品。
△ After the mountain Rain(戴鑫祺)
2020年7月14日Unreal Engine 官方發布一條宣傳片（Unreal for all Creator ）by The Mill,視頻展示了Unreal Engine實時渲染在互聯網、游戲、電影、電視、建筑、汽車等行業驚人的表現。
https://www.youtube.com/watch?v=6xbxA8tnlbY
△ Unreal for all Creators by The Mill
伴隨硬件技術的發展和軟件性能各方面的提升，能夠更加真實的模擬自然的運動規律和真實的質感；畫面趨向更為克制的顏色呈現；在一些品牌廣告短片中，使產品的屬性與抽象的自然屬性相結合，使用相似的自然形態去表現產品的特性，突顯產品的特點。
△ 《Bloom》by Hubert Blajer
△ 《Mostly wood》by Nejc Polovsak
△ 《Digital Design Days 2020 titles》
R&D
（Research and development研究與開發）在三維領域是一直有存在的，只是以前大公司才會有的職位，R&D早期是服務存在于影視動畫公司的，像工業光魔，迪士尼，皮克斯，這些公司都會有自己的R&D部門，最近幾年隨著三維技術進步簡化，使得更多的人加入這個行業，很多個人R&D藝術家大量的出現在網絡社交品平臺上，不只是影視動畫，還有廣告，汽車，消費品等行業。舉例R&D在廣告行業的應用，藝術家們會對某個產品的材質和物理學的多方面進行研究，并用三維軟件(houdini C4D等)視覺化出來，比如下面這個案例的海綿材質物理碰撞模擬。
△ Manvsmachine 《No stress Test》
△ 《A website makes it real》
△ Lukas Vojir R&Dshowreel
使用VR設備進行環境建模工作。
The Loch by Boxfort
同樣的環境下，人們對于手繪等真實樸實的質感又有了新的追求，各類動畫的制作方式得到了不斷優化和流程上的整合，在軟件使用上也多了更多選擇，使得動畫的呈現方式趨向于多種形式結合。
例如常見的3D的場景和鏡頭運動搭配2D的角色動畫，使用非常流暢的鏡頭運動和豐富細致的3D場景，而視覺表現上保留傳統2D動畫的一些特性，兩者結合形成的一種新奇動畫語言，在未來還會繼續流行。
△ 《PlusOne Manifesto》 By Martijn Hogenkamp
△ 《Disney XD And Children’s Health》By BLIRP STUDIO
△ 《企鵝誕生記》By ISUX
Blender 是現階段很熱門的開源（免費）三維制作軟件，因為是開源的而且功能豐富所以在市面上已經有了很多個人藝術家使用。Grease Pencil只是個方便三維空間中起稿的輔助性工具，在版本2.8之后這個功能被大幅加強成為了一個超級強大的畫筆工具 ，發布以后出現了很多優秀的藝術家用它來創作。
△ 《Futuro Darko》 By Craig Farquharson
5. 影視手法的動態呈現
在這個快速變化的時代，我們趨向追求更快更緊張的刺激感受。受到《蜘蛛俠平行宇宙》、《阿麗塔》這樣的動畫電影的出現所帶來的影響，動畫廣告在一定程度上混合了影視和游戲常用的一些表現方式，比如更大的鏡頭畸變和游戲風格的未來元素，快節奏的剪輯手法配合游戲電音，能夠在短時間內給觀眾帶來強烈的感官刺激與情感體驗。
△ 《Gogoro S3 Future Fast》 By MIXCODE STUDIO
在充滿了未來感科技感的3D大趨勢下，顏色丟失，色調分離，質量損失的顆粒質感，低飽和低保真的畫面呈現，也開始帶來一種新的視覺感受。過往的動畫風格與當下科技感、未來感的潮流碰撞又呈現了新的表現方式。這種風格應用在街頭潮流的時尚產品的時候，跟以往60或80年代的復古元素相結合，使用新的設計語言去包裝整合，能夠強化產品的故事感，引起大家強烈的共鳴和代入感，激發大家頭腦中那段美好回憶。
△ 《The Legend of IQOO 戦う！鉄拳》 by 茶山有鹿
△ 《MouseQ 滑板俱樂部》By ISUX
△ 《ACE OF SPADES》 by Tony Babel
△ 《Can of worms》 by Tony Babel
7. 更克制的色調與秩序感
在充斥著各式各樣的新鮮元素的當下，節奏更快顏色更有吸引力，各類信息視覺都在捕捉你的視線。干凈的色調、簡單的視覺、真實的肌理、強調秩序感的動畫的出現，使得人在視覺上獲得了舒適的體驗，很大程度上緩解了極速發展的時代所帶給人們的焦慮。
△ 《BIC》by Artem ‘Hinz’ Yudin
△ 《Microsoft SharePoint 》
△ 《Beautyrest》 by Tendril
突破限制的版式
在當下許多海報等平面視覺都有了動態化表現的需求的情況下，動態視覺的加入打破了很多條框和顏色的禁忌，去掉了華麗的修飾性的元素，在內容的呈現上體現了更多的創意，畫面中不斷變化的圖形排列、動態的3D圖形和字體起到了非常吸睛的效果。在大量時尚品牌和藝術活動的宣發當中，畫面結合強烈的撞色熒光色，以及波譜的拼貼藝術手法，能夠更好的表達品牌傳遞的時尚感和新鮮感。
△ CreativeCrew
△ Le Cantiche 1320
△ reed.be
△ Olympic Sports Website by Daniel Tan
近些年來各媒介手段和智能裝置應用的興起，人們已經不滿足于單一的視覺感受。電子音樂與擬態三維全息投影相互配合，在不斷變化的聲光交互光影和空間場景中，能迅速把觀眾帶入多個不同的全新場景的沉靜式體驗。
AR/VR
△ Fórum Internacional de Gaia 2019
△ 《JOURNEY》 by NOHLAB
△ 《Teleport 》By PITCH
在信息爆炸的2020年，Motion的流行趨勢在不斷變化，有的風格將會繼續延續，例如在各個場景中大量應用的3D視覺，會在未來更加普及和優化并趨向于更輕量化的新極簡主義；有的風格重新回歸到大眾視野，例如Y2K、色損故障、顆粒等復古風格和逐幀動畫，它們與新環境下的設計語言相互碰撞，給人們帶來新鮮的視覺感受；在視覺設計領域，網頁設計中融入了更多精彩的交互動畫，界面的UI設計中體現了更多激動人心動效語言，版式設計有了動畫的加持更大膽更具活力且不斷突破現有規則。
隨著硬件和軟件的跟新迭代，同時我們也看到了更多其他方向的可能性，例如實時渲染以及虛擬現實。據資料顯示，虛擬現實的市場規模預計將達到447億美元，復合年增長率為33.47％，這個市場會逐步打開，影視廣告等行業將迎來前所未有的技術革命浪潮。大批更智能的應用軟件橫空出世，學習門檻的降低使得更多藝術家和設計師共同參與，跨媒介的應用將在未來百花齊放。
多媒體的設計趨勢在未來會如何發展，我們拭目以待。
文章來源：站酷 作者：騰訊ISUX
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在這個項目中，主要任務是為舊金山最古老的玩具品牌 Jeffrey’s Toys 設計一個全新的品牌電商網站。
新電商網站最主要的目的是吸引顧客前往線下店鋪選購商品，同時也希望通過快遞和門店自提的方式來完善線上銷售流程，拓展消費群體。
該網站需要鞏固品牌核心業務價值觀：傳統，有趣和創意。該網站還需要通過強調其龐大的庫存體量和手工精選商品來將 Jeffrey’s Toys 和其他電子商務零售商區分開。
該網站的主要業務目標包括：
能快速定位商品
每一個商品都有單獨的詳情頁
用戶能成功購買一個或多個商品
為爆款商品引流
1. 用戶畫像
誰才是這個網站真正的用戶？當我接到這個任務的時候，客戶已經繪制出了3個用戶畫像，每個用戶畫像都有特定的需求和痛點。
△ 客戶繪制的三個用戶畫像
基于三個用戶畫像，我確定了該網站要滿足的用戶需求，同時也考慮了Jeffrey’s Toys的需求。
確定的主要需求是：
通過清晰的商品組織分類來提供流暢的電商購物體驗
通過商品搜索使用戶能夠快速找到想要的商品
通過實用的商品推薦來體現 Jeffrey’s Toys 的專業以及龐大的庫存
通過與用戶建立品牌關系來樹立信任
通過產品細節信息來確保用戶選購合適的商品
通過商品評論來輔助用戶作出消費決策并允許用戶進行商品反饋
通過的下單結賬流程簡化購買行為并節省用戶時間
2. 競品分析
為了獲得啟發，我確定了3個主要競品，特別是舊金山的精品玩具店；還有3個玩具零售市場的間接競品。直接競品我分析了包括 Ambassador Toys 、 Amazon 和 TANTRUM 。間接競品分析了 Lululemon 、Ikea 和 CVS 。競品分析的目的是比較并找出這些電商網站的共同特征以及 Jeffrey’s Toys 能夠脫穎而出的潛在機會。
競品分析最重要的收獲是了解了不同的電商網站的商品選擇模塊以及網站整體的布局。這些信息有助于鞏固我第二階段的研究。
△ 比較直接競品和間接競品的特征
2. 思維導圖
在完成競品分析之后，我把這個項目中用戶的需求和客戶的需求列成了長長的信息清單。之后我又通過思維導圖來理清了在這個項目中用戶的需求和客戶的需求。思維導圖幫助我將信息組織成更清晰的想法，同時在各個想法之間建立層次結構關系。
△ 用來理清信息和想法的思維導圖
接下來我通過卡片分類法來構造網站的導航系統，卡片分類法是一種利用人們現有思維模型的研究技術。在構造導航系統時，我了解到94種商店中最暢銷的商品庫存信息。擁有如此龐大的商品庫存，就很有必要通過清晰易懂的方式組織、分類庫存信息，以便用戶能夠快速的找到他們想要的商品。
1. 卡片分類
△ 卡片分類的初期階段
開放式卡片分類：我要求9位參與調研的用戶通過他們自己覺得合理的分類規則將94種商品分類，然后給每個類別加上他們認為能夠準確描述該類別的標簽。這樣做的目的是對于網站潛在的商品分類方式及類別名稱有一個大致的了解。
封閉式卡片分類：基于開放式卡片分類的結果，我從最常見的類別標簽中創建了13個預定類別。然后，我進行了封閉式的卡片分類，我邀請了20位參與調研的用戶將商品逐一分類到我之前預定的13種類別中。封閉式卡片分類有助于讓我在進行設計之前能夠清楚判斷這些類別是否符合大部分網站用戶的分類邏輯。
△ 通過卡片分類得到的13種商品類別
2. 站點圖
根據卡片分類以及競品分析的結果，我繪制了網站的站點圖來明確整個網站的框架結構。這是為了確保所有產品都放置在用戶期望的位置，同時使購物體驗更加直觀。
△ 站點地圖
3. 系統架構圖
為了對用戶將會如何瀏覽網站有一個全面的概述，我繪制一張系統架構圖。這樣做的主要目的是為了了解網站應該給用戶提供什么功能以及功能拓展的廣度。我還通過系統架構圖來探索電商網站和實體店鋪之間的聯系。
△ 系統架構圖演示用戶將會如何瀏覽網站
4. 用戶流程
在確定了我需要給用戶提供的體驗「全局」之后，我為每一個用戶畫像創建了不同的用戶流程，通過不同的用戶流程來使購物體驗更加符合他們的需求。構建用戶流程的目的是確定每個用戶為了實現各自的預期目標經過的頁面和操作步驟。這不僅能使我專注于每個用戶的操作，也使我能夠在設計網站的時候將功能拆分，以便給用戶提供更佳的購物體驗。
我繪制的第一個用戶流程是關于用戶畫像是 Jenny 的。Jenny 最主要的目是為自己的孫子購買初級魔術玩具。Jenny 的用戶流程（如下圖所示）表明了她是如何搜索初級魔術玩具，以及為了成功購買她可能采取的幾種不同路徑。
△ Jenny 的用戶流程
Debbie 和 Jenny 都希望能有一個的下單結賬流程，所以很有必要在用戶流程中繪制出下單結賬流程。下圖的用戶流程顯示了Debbie在選定一個特技自行車之后該如何進行結賬下單。通過允許她登錄自己的帳號，自動輸入她的結賬信息來簡化她的結賬下單流程。
△ Debbie 的用戶流程
1. 草稿
在我整理了前期獲取的所有信息之后，我就開始著手設計網站?；谥罢沓鰜淼挠脩袅鞒虉D，我開始繪制幾個主要頁面的草圖，同時快速思考出幾個不同的網站布局方案。之后我邀請3個用戶參與了用戶調研，以驗證這些方案是否同時滿足客戶和網站用戶的需求。
△ 網站首頁和品類頁面的初稿
2. 線框圖
基于用戶對草圖的反饋和我個人的想法，我開始使用Figma來繪制線框圖。整個過程中，根據優先級不同，優先考慮最能滿足網站用戶的功能。
△ 網站首頁和產品詳情頁的線框圖
1. 主頁
首頁我盡可能的保持簡潔，避免用戶進入網站時被過多的信息干擾而不知所措。
首頁放置了全局導航、輔助導航和搜索欄，方便用戶快捷的找到自己想要的商品。首頁還放置了新品推薦，因為新品推薦能夠展示品牌豐富的庫存，同時能為用戶提供有用的購買建議。我想通過介紹 Jeffrey’s Toys 豐富的歷史來樹立用戶品牌聯系，所以在首頁我還放置了「關于我們」部分，用戶點擊還可跳轉到具體的介紹頁面查看更多關于品牌故事的信息。在頁腳，我放置了其他的用戶可能需要的信息。除此之外，我還將用戶交流系統放在頁腳，這樣是為了獲得用戶想法并在店鋪進行活動時通過用戶參與提高店鋪活動氛圍。
2. 商品類別頁面
當用戶點擊商店按鈕或者是某個類別之后，用戶將會前往一個列出了該類別下所有商品的商品列表頁。有個用戶畫像想要給他的孫子買一個合適他孫子年齡的玩具，所以頁面需要一個品類篩選器，同時支持商品按照不同的屬性例如年齡、價格和品牌分類也很重要。除此之外，我還通過面包屑導航來方便用戶定位頁面位置。
△ 商品類別頁線框圖
3. 商品詳情頁
在商品詳情頁，我希望能夠提供盡可能多的商品詳情來確保這個商品是用戶想要的。
在頁面下方，網站會基于當前商品給用戶推薦其他相似商品。在商品詳情頁，產品評論區占了很大一部分，因為用戶可以在產品評論區反饋商品信息，便于樹立用戶信任，同時用戶能夠通過其他用戶的評論來作出更明智的購買決定。為了簡化下單流程，我設計了一個購物車預覽頁，用戶在購物車預覽頁可以預覽商品信息，用戶每次將商品加入購物車后都會出現購物車預覽頁，在購物車預覽頁面，用戶可以很方便的點擊「選好了」按鈕而進入結賬下單流程。
△ 商品詳情頁線框圖
4. 購物車預覽頁
當用戶點擊「選好了」按鈕或者是購物車按鈕，用戶將會進入到一個如下圖所示的購物車預覽頁。這是結賬下單流程的第一步，用戶在購物車可以管理他們所選的商品，作出合適的調整。用戶在下單時，可以選擇到店自提或者是物流配送，設置到店自提是為了引導用戶去 Jeffrey’s Toy的線下店鋪，同時降低運輸成本。
△ 購物車預覽頁線框圖
5. 結帳頁面
客戶提供的三個用戶畫像的主要痛點之一就是想要有一個的結賬流程，所以我得確保結賬下單體驗要盡可能的流暢。作為一個回頭客，用戶可以選擇登錄自己的帳號，并自動保存物流信息和支付信息。我決定在一個頁面上承載全部的結賬流程，這樣方便用戶在結賬流程中任何時刻都能編輯信息。頂部的進度欄顯示了下單結賬流程有多少步，用戶當前在哪一步以及用戶還剩下多少步驟。
△ 登錄頁
△ 下單頁
△ 訂單查看頁
6. 其他畫面
我還創建了一些其他頁面，例如訂單確認頁面。訂單確認頁面明確告知用戶結賬流程已經完成了，用戶還能在訂單確認頁查看有關訂單的其他信息，以供參考。
我創建了一個店鋪聯系頁面，當用戶在網站找不到想要的商品時，可以在店鋪聯系頁面查詢線下店鋪商品情況以及店鋪的營業時間、位置和聯系電話。
除此之外我還創建了一個「關于頁面」用來著重強調 Jeffrey’s Toys 與其他電商網站例如亞馬遜的區別。我還在這個頁面介紹了Jeffrey’s Toys 長達60年的獨特歷史，以增強用戶對于品牌傳統、有趣和創意的商業價值的印象。
△ 訂單確認頁
△ 聯系方式頁
△ 公司介紹頁
7. 可用性測試
在完成線框圖之后，我就開始繪制網站原型以便進行可用性測試。這使我能夠評估用戶將會如何與網站進行交互，也能讓我評估網站是否滿足了用戶的基本需求。在進行UI設計之前，通過中保真原型進行可用性測試來獲取潛在用戶真實、關鍵的反饋是很有必要的，可用性測試還能鞏固網站的功能需求。
我邀請了4位用戶進行可用性測試，為了讓他們吻合用戶畫像中的用戶特征，我指定了三種用戶場景來讓他們完成測試。這三種用戶場景包括：
您需要為您的女兒購買一個玩具。您會怎么查找商品并完成購買。
您可以通過什么方法知道 Jeffrey’s Toys 下個月將要舉辦的店鋪活動。
當您在網站上沒有找到您想要的玩具時，您將如何查詢并購買。
這些是我通過可用性測試得到的用戶反饋：
總體而言，用戶能夠輕松地找到想要的產品和信息
在結賬流程中，促銷活動部分會分散用戶的注意力
部分用戶不想通過電話來查詢商品信息，需要提供其他的查詢方式。
部分用戶覺得前往線下店鋪的引導部分還可以增強，目前的引導不夠。
△ 可用性測試得到的反饋
8. 后續步驟
這個案例研究展現的只是電商網站設計的開端。后續我將會繼續進行可用性測試，并進一步迭代我的設計。如果有更多的時間，我將會著重探索更多從網站引導用戶前往線下店鋪的方式。我也將會繼續豐富網站頁面并將Jeffrey’s Toys的視覺風格融入到網站中。下圖展示了我最初設想的UI設計風格。UI設計我希望秉持簡潔、創意、傳統的設計理念。
△ 首頁
△ 商品分類頁
△ 商品詳情頁
本文以玩具購物網站這個小案例，清晰地記錄了一個較為完整的產品設計流程。不論是設計方法，還是記錄方法，都可以借鑒運用在工作、匯報和作品集上。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
容易被忽視的圖形，不僅能傳達不同的情緒，也能提升視設計的品質感。
本文節選自德國紅點獲獎設計師大凡的分享，主要包括三個部分：
1 圖形是什么
2 好的圖形設計長什么樣
3 圖形設計創意思路分享
提到圖形設計，你腦海中對應到的第一個畫面是什么？我們打開了某搜索器，檢索了「圖形」二字，這里的圖形多集中于「幾何圖形、標志、矢量圖形、圖標」。
我們又搜集了一些不錯的設計網站，搜索「圖形設計」或「graphic design」，它的表現形式與應用范圍都擴大了，海報、信息、插圖、包裝、圖標、字體、攝影、標志、品牌，無所不在。
如果給圖形下個定義，它主要指二維空間中可以用輪廓劃分出的空間形狀，設計中無處不在的表現手法。它與色彩、版式、字體等一樣，在設計師的知識體系中處于相對重要的位置，但往往容易被忽視。
在優秀的設計作品中，圖形可以作為主體、符號、輔助、信息等不同角色出現在設計的各個應用場景中，可以通過抽象的、具象的、平面的、空間的多樣化表達手法，傳達出不同風格的視覺表現力。
那么，好的圖形是什么樣的？我們可以從3個維度去感受好的圖形設計作品：抽象、創意與風格。
抽象是對日常事物的提煉與概括，我們先來感受一下下面兩組建筑，某搜索器中的「最丑建筑」和「知名建筑」之間的對比。可以很直觀的感受到，抽象的圖形與色彩可以傳遞更加豐富的情感。
對企業來說，溝通成本代表的就是金錢，而一個抽象的符號就能巧妙地為企業節省了很多說話的時間。
我們可以看這個案例，1個點產生了多少可能性？這是美國一家大型連鎖超市的logo，以這個點為原型，衍生出了各種解鎖生活方式的海報。簡單的點，發散出各種生活方式，一看就能夠知道超市供應的各種商品。
設計的創意體現在哪兒呢？我們先看看那些腦洞大開的大師們是如何使用圖形的。
第一位是福田繁雄大師，在他的年代沒有人用這樣的圖形方式做設計，炮彈朝向炮筒里面，一張非常簡潔的反戰海報。他也特別擅長運用圖形的異形同構。
第二位是瑞士的史蒂芬邦迪大師，這些是他為劇場設計的宣傳海報。簡單的人形搭配鮮血撕裂感的方式就可以把卡門劇情表達出來了。
創意是天馬行空的。我們看下面這個音樂節海報設計，拆解其中包含的文字、吉他、人影、波浪等，每個元素與音樂都息息相關，組合在一起就缺了些創意表達。
再看網易云音樂與快手聯合做的民謠音樂節H5，音樂的感覺一下就出來了。
很簡單的圖形運用，就能產生創意性的差距。
著名的可可香奈兒女士曾經說過，流行稍縱即逝，但風格永存。
從包豪斯開始，設計風格發展到今天已經是多元混合存在的，很多所謂流行不過是循環與往復。
即使是運用最簡單的圖形，也可以表達出不同的風格，甚至引領浪潮，為品牌傳播加分。比如，下面這組圖，你能猜的到是同一家公司的傳播海報嗎？
現在，我們感受到了圖形的巧妙之處。但具體拿到一個需求后，我們該如何去用圖形輔助設計呢？這里分享一個“三步理性創意發散法”。
舉個栗子，我們為「夏季青年音樂節」設計一張活動海報。
我們首先給主題做一個分析、把關鍵詞拆解與排序后，視覺的重要程度依次是：音樂、夏季、青年、節日。
這些關鍵詞讓你最直觀的感受是什么呢？
基于感受，我們可以嘗試提取出基礎的圖形元素了。
色彩方面，我們也可以根據對應的元素去設置，最終我們提取出了這組圖形元素。
這一步需要我們設計師發揮想象力了，為一組元素找到視覺上的聯結關系。這也需要大家平時能去多看、多想、多練。
然后，我們為圖形融合進更多的細節。
我們首先采取最簡單的主體式構圖方式，將想突出的圖形最大化、成為視覺焦點，添加海報所需文字進行排版。
這種方式能夠做出相對合格的圖形海報，但我們可以用不同的版式與分割構圖，去嘗試更多的可能性。比如第三個海報，我們可以先建立不一樣的版面分割、進行配色，然后再放入圖形與文字進行排版，營造不同的畫面感覺。
其他兩組也可以用這種方式、進行不同嘗試。
最后，我們可以整體上對比一下。
大師級的創意難得，但基本的圖形創意確實有跡可循，希望本次的分享能夠給大家帶來圖形思維上的啟發。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
文字 LOGO 的設計經常會采用優質的經典字體作為基底，那么我們所熟悉的著名品牌會使用哪些經典字體？這些字體本身又有哪些特質，被這些品牌所選擇？而設計師在設計的時候，又是如何借用這些字體的特質來凸顯品牌的特征？這回借用一個 LOGO 「逆向工程」設計項目，盤點8款經典英文字體，以及一系列優秀的 LOGO 設計范例。
雖然很多品牌LOGO 在設計的時候，會專門設計字體，但是實際上，很多品牌的 LOGO 其實是使用既有的字體來進行小幅度優化來進行設計的。最近幾年，設計師 Emanuele Abrate 一直在關注一些著名的品牌 LOGO 背后的設計處理技巧，他開始借助這些字體背后原始的字體來進行「逆向工程」。
Abrate 的 Logofonts 項目就是這個「逆向工程」之后的結果?！府斠恍┠隳吧脑睾湍闶煜さ脑亟Y合到一起的時候，有趣的事情就會發生……所以我決定重新拆解這些大眾所熟悉的品牌，然后將文字部分替換成這個 LOGO 對應的字體名稱」Abrate 的思路就是這樣來的。
其實，以這種方式來重新解構這些令人熟悉的 LOGO 本身是一種非常有趣的嘗試，給人的體驗也頗為不同。但是回過頭來說，這也證明了一件事情：即使是那些你感覺很熟悉的字體，同樣可以借助一些并不復雜的方式，來制造出爆款設計，營造出令人過目不忘的獨特視覺體驗。
如果你使用 Instagram，那么你可以在上面關注一下這個 LogoFonts 項目。
在這些品牌 LOGO 的文本字體當中，有很多大家非常非常熟悉的字體，它們在英文字體中的大眾認知程度，完全不亞于「微軟雅黑」在中文世界里的認知度。
Futura 字體的靈感來自包豪斯運動，繼承了包豪斯的設計理念，由設計師保羅倫納1924年至1926年所創建。Futura 不僅本身大獲成功，而且成功催生了新的幾何無襯線字體。
在國外的設計圈中，設計師私下經常調侃，在設計的時候嘗試過很多不同的字體，最后總會用回 Futura ，于是有了「字體不決就用 Futura」的調侃。當然，很品牌的 LOGO 設計是否幾經修改重回 Futura 就很難說了，但是我還蠻認可這種說法的。
FedEx
Supreme
PayPal
Nike
Red Bull
Helvetica是一種被廣泛使用的的西文字體，于1957年由瑞士字體設計師愛德華德·霍夫曼（Eduard Hoffmann）和馬克斯·米耶丁格（Max Miedinger）設計，體現了瑞士設計的理性主義精神，同時被認為是現代主義設計理念的典范。
很多現代都使用 Helvetica 字體來作為設計的基底，借助基礎的傾斜、色彩和裝飾，在它現代和整飭的設計基礎上，來營造獨特品牌視覺特征和氣質。
Target
Energizer
Post-it
The North Face
CAT
Behance
Avenir是由Adrian Frutiger設計的一款無襯線字體，最初于1988年由萊諾字體公司發布?！窤venir」在法語當中是「未來」的意思，在某種意義上，它和 Futura 在精神內核上有所呼應。
和 Helvetica 一樣，Avenir 字體是為了「基本適合用在任何平面設計場合」的一種字體，同時，Frutiger 先生也認為，無襯線字體是不應該有斜體的，所以他也僅僅只是為了商業需求，使用光學儀器制作了偽斜體的效果。
Avenir 這款字體整體呈現出一種中性、去性格化的特點，是一種氣質「透明」的字體。
Toyota
我們常說的 Avant Garde 字體完整的名稱應該是 ITC Avant Garde Gothic，它原本是 Avant Garde 雜志的 LOGO 字體，由 Herb Lubalin 所創建。
之后他與盧巴林設計公司的合伙人 Tom Carnase 一同努力，將這款字體完善成為一套完整的標準字體。
由于 Avant Garde 出色的幾何特征，很多品牌 LOGO 在設計的時候都考慮并采用了這款字體。
Adidas
New Balance
Durex
Gotham 是一款 2000 年的時候為 GQ 所設計，并于 2002 年向公眾開放的字體。它出現的地方很多，從可樂瓶、推特、Spotify、Netflix、Saks 到紐約大學、翠貝卡電影節，這還不止，包括《柯南秀》和《周六夜現場》在內的電視劇、包括《盜夢空間》、《點球成金》、《可愛的骨頭》和《月光男孩》在內的電影，都用到了這一字體。
關于這款字體的故事，可以看看這篇文章：
Gotham 原本的設計構思中，是要呈現出一種「新鮮和陽剛」的氣息，不過真正投入使用的時候，才發現它的細體非常的具有女性的「優雅感」。Gotham 在現代的品牌和 LOGO 設計中應用廣泛，它兼顧了靈活和高級感，說是「可鹽可甜」一點錯都沒有。
TikTok
Spotify
Discovery
Univers 字體和 Avenir 同樣出自設計師 Adrian Frutiger 之手，不過 Univers 是 Frutiger 的早期字體作品，它和 Helvetica 并稱為「瑞士風格字體」，最初是作為一款照相排印字體所發布的。
Univers 字體的字重控制和其他的字體不同，是按照數字來進行區分的，到現在 Univers 字體族當中所包含的變體已經非常之多了，多達44種，不同寬度、粗細變化的衍生字體使得它作為 LOGO 字體非常方便。
Alibaba
ebay
正如同你從下圖看到的，Myriad 字體就是 Adobe 的LOGO 品牌用字，因為這款字體原本就是 Robert Slimbach 和 Carol Twombly 為 Adobe 定制的字體。不過，值得一提的是，Myriad 字體的基底是 Frutiger 字體——而 Frutiger 、Univers、Avenir 三款字體系出同門，都出自 Adrian Frutiger 之手。
和很多早期的非襯線體字體不同，Myriad 從一開始就是為了數字化而設計的，字體家族內不同字重、樣式的變化是動態的，通過不同的字母寬度調解平衡，給人溫暖友好的感覺，而這一點也使得它在屏幕和印刷品上，顯得更加協調和自然。
Adobe
Visa
Walmart
其實 Arial 這款字體能走向世界，和微軟息息相關。這款 Monotype 出品的數字字體是隨著當年的 Windows 3.1 操作系統和當時的 Truetype 技術一同分發出來的，它的競爭對象則是最為經典的 Helvetica 字體，而在視覺上，Arial 和 Helvetica 是非常相近的。
Monatype 在設計Arial 時，考慮到會在電腦上面使用，在字體及字距上都作了一些細微的調整和變動，以增加它在電腦屏幕上不同分辨率下的可讀性。
Skype
Pxxxhub
其實經典的字體有很多，你單獨看這些字體的時候可能會感到單調，但是Abrate 的 Logofonts 能夠幫你了解到這些經典的英文字體是怎么應用到 LOGO 當中，讓你看到這些字體本身豐富的可能性和多變性格氣質。我將一部分字體打包存到百度云當中，供你學習研究。如果你需要在設計項目當中使用，請購買正版授權。
文章來源：優設 作者：陳子木
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在進行小程序項目啟動，進行技術選型的時候，對市場上多個小程序框架進行了考慮:
團隊成員mpvue、wepy、uni-app都有實際的項目經驗,且根據Github上的star數還有issue,最后決定回到到使用原生開發。
雖然框架有些很成熟，有工程化和跨端的解決方案，也有實際的上線項目，但考慮到后續一些支撐性的問題(維護，文檔，坑等)，在github上看了issue，有些已經沒在維護了。
想著讓項目持續迭代，不受第三方框架限制，保持穩健，最后決定使用原生，跟著官方的迭代升級，自己維護，引入前端工程化的思想，提高繁瑣的流程以及開發效率。
基于Webpack4.x,自定義Webpack配置
scss編譯為wxss：定義全局變量,使用公共的樣式文件,提高css開發效率和可維護性；
自動壓縮圖片資源 : 小程序對包大小有限制，壓縮圖片大小可以減少空間，加快頁面加載；普通的圖片壓縮需要將圖片上傳到在線圖片壓縮網站，壓縮完再保存下來，效率比較低?，F在執行命令就可以自動壓縮圖片。
代碼規范
eslint: 能在js運行前就識別一些基礎的語法錯誤，減少不必要的小問題，提高調試效率；
husky、line-staged、prettier: 統一團隊代碼規范: 當執行代碼提交到git倉庫時，會將已改動文件的代碼格式化統一規范的代碼風格;
命令行創建頁面和組件模板
引入jest單元測試
app -> 小程序程序的入口，使用微信開發者工具制定app目錄cli -> 生pages和components的模板腳手架img ->
圖片資源原文件.eslintignore.eslintrc.js.gitignore(忽略wxss的提交，多人和做改動，容易有沖突，將scss文件傳到服務器就好了).prettierrc.js(代碼格式化風格配置)babel.config.jsjest.config.js(單元測試配置文件)webpack.compress.js(指定入口圖片資源文件，將圖片壓縮編譯到小程序的資源目錄)webpack.config.js -> (工程化入口文件,指定入口scss文件，監聽文件變化，自動將scss編譯為wxss)
. 安裝依賴 npm install 或 yarn install. 編譯scss
npm run dev. 壓縮圖片 npm run img. 單元測試 npm run test(生成測試報告) npm run test:watch(監聽測試文件改動—開發環境下使用)
執行 npm run dev
執行 npm run img將圖片壓縮到app/assets/img目錄下,一張7k的圖片變成5k，肉眼看不出有什么差別。
執行 npm run create終端會提示選擇頁面還是組件,選擇頁面,按Enter鍵，輸入頁面的名稱，會自動將4個文件創建到app/pages/xxx下。
執行 npm run create終端會提示選擇頁面還是組件,選擇組件,按Enter鍵，輸入組件的名稱，會自動將4個文件創建到app/components/xxx下。
執行 npm run test 生成測試報告執行 npm run test:watch 監聽測試文件，方便開發使用
工程化的初衷就是為了減少重復性的操作，提高編碼的效率和樂趣。
JavaScript是弱類型語言，好處是靈活，壞處是太靈活(多人協作，維護別人寫的代碼就是很痛苦了)。
項目最主要的是穩健，可高度自定義拓展，不拘束于版本和地上那方，特別多人協作的團隊，工程化能給團隊帶來更多的收益，后續也會考慮將TypeScript等其他好的方案引入項目。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在經典的尼爾森十大啟發式當中，「系統狀態可見性」可以說是如今交互設計領域當中，最為重要的原則之一。通過向用戶展現當前的狀態，讓用戶擁有對系統的控制權，建立用戶對于產品的信任感，這也是這種設計啟發式的最重要的價值之一。
但是，想要做到可靠、易用，系統狀態展現的技巧是很講究的。這里梳理了4種最為常用的方法，結合了不少實用的案例，希望對你有所幫助。
1.1、讓用戶知道自己在哪
沒有人會喜歡迷失方向，但是無論在現實生活還是在數字領域當中，這種情況都會發生。讓用戶知道他們在哪里是創建良好導航體驗的關鍵。應用程序和網站都應該凸顯當前的導航選項，幫助用戶了解他們所在的位置。
Google 的底部導航欄設計
1.2、要經過多少步驟來完成任務
這也是一個非?；镜牟僮?，通過展現步驟數量，幫助用戶來預估完成這個過程所需要的時間。
Selecto 的調查問卷的設計
數字界面畢竟不是現實世界中的真實硬件機構，用戶更多只能借助交互過程中的即時視覺反饋來確定是否完成了操作，即時的視覺反饋因此顯得非常重要。
即時的視覺反饋讓用戶的操作得到了視覺上的「認可」，從而強化了「確信感」，這樣一來一回的確認可以避免錯誤的發生，比如可以避免用戶因為「感覺沒有點下去」而反復點擊。
這種視覺反饋的設計，最常見的范例就是點擊按鈕按下的微交互動畫，它告知用戶「系統已經捕捉到點擊交互了」。
AliAli 所設計的懸停點擊動畫
但是在某些狀況下，按鈕的視覺反饋還有很多不同的呈現形式，有更多可見的、可理解的新形態，可以在原有的基礎上探索更多可能性，比如下面的
2.1、單擊點贊按鈕
Spread love, not viruses ，作者 Charles Patterson
2.2、開關按鈕
這個開關按鈕不僅有點擊動效，而且色彩和按鈕標識也隨之改變，更為清晰地表明狀態，甚至兼顧到了視覺障礙用戶
Switcher XLIV , 作者 Oleg Frolov
2.3、書簽按鈕微交互
這個書簽按鈕通過色彩的虛實變化來呈現書簽已添加的狀態，頗為巧妙。
Bookmark interaction，作者 Oleg Frolov
2.4、添加購物車微交互
在這種情況下，視覺反饋非常明確且優雅地告知用戶已經添加到購物車里面了。
咖啡下單動效，作者 Nhat M. Tran
3.1、系統正忙于什么事情
當系統正在加載，正在執行，正在運行的過程中，通過動效來告知用戶系統并沒有停止，而是正忙于執行某件事情，是避免用戶誤解的手段。在用戶等待的過程中，通常會實用無限加載的動效（一般使用在低于10s的操作中）：
對于超過10s的更長的執行過程，無限加載的動效會顯得令人沮喪，這個時候實用進度條會更好：
這些視覺反饋很大程度上降低了系統給人的不確定感。
對于移動端應用，在初始加載階段所使用的啟動動畫界面，是否精心設計，決定了用戶對于整個產品的第一印象，優秀的初始加載動畫能夠將用戶的注意力從焦躁的等待中解放出來。
Logo 閃屏 ，作者 Gleb Kuznetsov?
3.2、內容加載
當用戶需要時間來加載內容的時候，建議使用一種特殊的的容器「界面骨架」來展現。這種臨時的內容容器不僅能夠幫助用戶快速地了解界面的整體框架，構建用戶預期，并且能夠在后臺快速地加載數據，漸進式地幫用戶獲得信息。
內容加載，作者 Ginny Wood
這種設計方式對于移動端和桌面端的設計同樣適用：
界面骨架加載動效，作者 Shane Doyle
4.1、通知和提醒
有效的通知和提醒，能幫用戶意識到有新的事情正在發生。在多數時候，我們建議設計師使用微妙的動畫來進行通知，因為動畫效果會自然地吸引用戶的注意力，人類的雙眼的動態視覺其實是非常強的。
Aleksei Kipin 設計的通知動效
4.2、提示用戶采取行動
在很多情況下，用戶界面中會有很多地方會需要用戶提交信息。比如，需要用戶提交表單，或者用戶創建了一個密碼，但是在復雜度上不足需要修正，或者填寫郵箱來訂閱信息的時候，郵箱格式出錯，等等。使用適當的視覺反饋總能夠更加有效地將問題告知用戶。
內聯郵箱驗證機制，作者 Derek Reynolds
讓用戶有掌控感，就是為用戶創造更好的體驗。在很多設計方案中，視覺反饋會因為種種原因被削弱了，甚至被忽略了。但是當用戶在和 UI 進行交互的時候，期望度和可動性其實是高度依賴于這些動效和微交互，而這正是設計師需要設計出優秀視覺反饋效果的原因所在。
文章來源：優設 作者：Nick Babich
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
隨著大眾消費生活多元化和個性化的發展，卡通形象在當下社會的影響力變得越來越重要，它們活躍在各個文化領域中，特別是在商業中應用也越來越頻繁。
在信息爆炸時代，大多數人對過量的文字信息容易產生排斥的心理，并漸漸樂于接受視覺圖像形式的表達；而卡通形象由于其本身簡潔的視覺形象，也成為了最理想的視覺傳播符號之一。
本期分享會先從比較知名的幾個卡通形象切入，然后分享過去幾年我自己創作過的一些形象，希望對正在設計卡通形象或自己想創作形象的朋友有些許幫助。
先羅列幾個比較有名的卡通形象
卡通形象一般分為具象動物類型和抽象類型兩個方向。一提起動物類比較有名氣的卡通形象（比如熊這種動物），你大概會先想到熊本熊、布朗熊、泰迪熊，還有韓國的倒霉熊……兔子類的就是兔斯基、找死兔、可妮兔、流氓兔，還有很早的兔八哥……太多太多。
熊本熊的特征比較明顯，一身黑色加上兩個紅腮點，顏色上本身就給人很潮很時尚的感覺，體型略寬厚偏呆萌。很多女生會覺得它給人一種安全感，我的印象里它一直都是很憨厚的面癱造型出現，特別是出現在GIF動圖里大量真人穿著它的道具摔倒的畫面（有了“智障熊”這個外號）比較搞笑，有點愣頭愣腦。
所以設計造型上除了能讓粉絲記住的特征外，更多的是對于它的性格打造成，給人總愛賣萌的印象。
流氓兔（MASHIMARO）是一只瞇著眼的韓國兔子，隨著無厘頭文化的興起，流氓兔調皮又帶戲謔的個性通過原創者創作的網絡動畫形式呈現，其FLASH動畫在亞洲乃至全球掀起不小的風潮。
還有監獄兔、兔斯基、兔八哥…這些耳熟能詳的形象，這里不一一列舉了。
以具象動物創作卡通形象既簡單又挺難的，為什么簡單？因為不用你去較勁腦汁再重新創造一個新的形象，具象動物（比如熊）就是那個樣子。那為什么又很難？具象動物卡通形象太多了，不管你怎么去變著法兒努力畫的不一樣，但最后的效果可能還是會雷同，況且知名的具象動物IP形象又很多，所以不容易創作。
如何創作一個有特征的卡通形象
那么，今天主要是聊一聊我之前創作過的卡通形象當中的心得體會和一些過程稿。第一個例子是在創作浪小花時候，主要從微博品牌標志找切入點，提取LOGO的主要特征（就是圖形頭上的三個波浪，如下圖），這也是比較能體現卡通形象與品牌之間關系的地方。
前期草圖探索是比較漫長和煎熬的，（下圖）這些是其中的一部分比較靠譜的草圖，盡管只是三個波，但做了很多種不同的變化。比如可以像個公雞冠一樣長在頭上，也可以帽子形式戴在頭頂上，還可以長在后背上。
在創作形象時是先從PC端的動態表情（下圖22px大?。╅_始的，也就是先從主要使用場景著手，所以做出來的表情利用好有限的展示活動區域，頭身比例控制好，既要考慮形象的完整性，又要考慮動作展示能夠看得最清楚，還要能突出這個不一樣的品牌特征（腦袋上那三個波），這也是一個非常具有挑戰性的案例。
到了手機移動端里，表情基本上是把PC上的表情一部分移植過去，不改變比例和動作情況下，盡可能豐富設計的細節。
這里要提的是形象顏色的選擇，考慮要最貼近用戶，不用微博那么重的紅色，由于表情是最開始是用在PC網頁版微博文字里，顏色太重就會看來視覺比較突兀，所以選了一個跟人的膚色很近的肉粉色（有點像小嬰兒），這樣表情用起來就比較具有親和感。
而在設計微小米的時候選用了LOGO本身的顏色大紅色，由于使用場景是手機端聊天對話里（下圖），感覺不會那么影響閱讀（其實我個人很喜歡這個紅色，給人很喜慶的感覺）。
（下圖）在確定這個形象之前的一些探索草圖這里也發出來，而且這一次創作了三個形象，包括一個白胖子和一只小雞，（有參考了Line的形象）希望能出一個小家族，這樣后期延展運用也能玩起來。
在創作這個形象前，嘗試了很多不同的形象（上圖），最后采用了這個大紅口袋娃娃：臉和身子是連在一起的，也看不到脖子，所以這個形象的特點也就在這里。另外，頭上加了一個小揪兒。
（上圖）這個是優化前的樣子（頭上是圓圓的揪兒），為了制作動態GIF時，讓頭上的小揪兒動起來更帶感，就改成了（下圖）這個樣子，跳起來可以一甩一甩的。
在進行卡通形象提案之前，如果能花點心思做一個小小的場景（下圖）也能給自己的方案加分。
每個形象都嘗試一些動作變化，這樣它們各自的性格就很容易把握了。比如，我會覺得（下圖）紅框那個表情延伸感覺很猥瑣，不太適合這個形象，所以后面的表情延展盡量讓微小米表現得更萌一些，避開這種很猥瑣的感覺。(當然這些說起來都比較偏個人感受，只有作者自己可以體會到）
把這幾個形象性格先摸透很有必要（來一張定妝的全家福）。
我個人比較滿意（下圖）這一組系列的扁平化風格，沒有描線的感覺確實更輕快，偏小清新。
下面是幾組自己平時的創作，也是利用業余時間創作的幾個形象，我會思考如何抓取每一個形象不一樣的特征？于是，這些特征可能是發型的變化，可能是眼睛的變化，也可能是衣著的變化……
這些不一樣的變化都是讓這個形象看起來與眾不同，讓人先記住它，但最打動人的還是這個形象能否跟看到它的人產生互動和共鳴……這也是這個形象的靈魂和存在的意義。
這一個形象的創意點是借用大家都熟知的“小紅帽”這個經典童話造型，讓這個小人長著胡子，名字和形象就會形成一個心理和視覺的反差。
將自戀、貪吃、自大、邋遢……這些小人物的缺點賦予這個形象，這樣一個活脫脫的“小屌絲”的形象可能就會給人很深的記憶。
畢竟生活中大部分人都有著這樣那樣的缺點，但都希望擺脫囧態，讓自己變好的那分勵志感。
我很喜歡畫一些丑乖的東西，現在大家都審美疲勞了，可愛的東西都乏味了，反而更喜歡一些丑的可愛的形象。那么給這些形象加個厚嘴唇、小胡子什么的，反而很容易出效果。
好了，寫到這里……下面的圖大家自己發現亮點，自己感受腦補吧……總之，創作形象時還是要抓住大眾的心理軟肋，先打動自己再去感染別人。
在畫卡通形象時候，我們往往很容易陷入兩個難以跳出的區域：一個是容易畫得偏低幼、低齡化；另一個就是表情動作偏呆板國企風。這是受我們從小周圍接收的圖像信息影響的，在還沒有將練習探索的草圖量形成一個質的提升之前，先有這種意識也很重要，這種意識會幫助你在以后摸索練習的時候注意到形象的頭身比例，以及思路慣性的打破。
歡迎對品牌、插畫和卡通形象感興趣的朋友可以一起討論、練習。
文章來源：我們的設計日記（ID：helloskys）
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
很多朋友面對AE表達式望而生畏，不過再難的東西都會有它最本質的規則，如果你理解了基本的原理和常用的表達式命令，這也許會提高你的工作效率。我通過自己對AE表達式的理解，嘗試用最簡單的語言解釋一些看似復雜的操作，如果此篇文章能給你帶來一些啟發，不勝榮幸~
表達式就是AE內部基于JS編程語言開發的編輯工具，可以理解為簡單的編程，不過沒有編程那么復雜。其次表達式只能添加在可以編輯的關建幀的屬性上，不可以添加在其他地方；表達式的使用根據實際情況來決定，如果關鍵幀可以更好的實現你想要的效果，使用關鍵幀就可以啦，表達式大部分情況下是可以更節約時間，提高工作效率的。
A.表達式開關 B.表達式圖表 C.表達式關聯器 D.表達式語言菜單
由于AE里不同的屬性的參數不同，常用的我們可以分為：數值（旋轉/不透明度）、數組（位置/縮放）、布爾值（true代表真、false代表假/0代表假、1代表真）這三種形式來進行書寫表達式。對于表達式AE也有很多內置的函數命令，直接可以在表達式語言菜單里面進行調用。
原理:
time表示時間，以秒為單位，time*n =時間（秒數）*n （若應用于旋轉屬性，則n表示角度）
舉例:
若在旋轉屬性上設置time表達式為time*60，則圖層將通過1秒的時間旋轉60度，2秒時旋轉到120度以此類推（數值為正數時順時針旋轉，為負數時逆時針旋轉）
注意事項:
time只能賦予一維屬性的數據。(位置屬性可進行單獨尺寸的分離，從而可單獨設置X或Y上的time)
wiggle(freq, amp, octaves = 1, amp_mult = 0.5, t = time)
原理:
freq=頻率（設置每秒抖動的頻率）；amp=振幅（每次抖動的幅度）；octaves=振幅幅度（在每次振幅的基礎上還會進行一定的震幅幅度，很少用）；amp_mult=頻率倍頻（默認數值即可，數值越接近0，細節越少；越接近1，細節越多）；t=持續時間（抖動時間為合成時間，一般無需修改）；一般只寫前兩個數值即可
舉例:
若在一維屬性中，為位置屬性添加wiggle(10,20)，則表示圖層每秒抖動10次，每次隨機波動的幅度為20；若在二維屬性中，為縮放添加n=wiggle(1,10);[n[0],n[0]]，則表示圖層的縮放XY在每秒抖動10次，每次隨機波動的幅度為20；若在二維屬性中，想單獨在單維度進行抖動，需要將屬性設置為單獨尺寸后添加wiggle(10,20)，表示圖層的縮放X軸在每秒抖動10次，每次隨機波動的幅度為20。
注意事項:
可直接在現有屬性上運行，包括任何關鍵幀
原理:
為每間隔多少數值來產生多少變化
舉例:
若為圖層1的旋轉屬性添加表達式index*5 ，則第一個圖層會旋轉5度，之后按Ctrl+D去復制多個圖層時，第2個圖層將旋轉10度，以此類推；若想第一層圖形不產生旋轉保持正常形態，復制后的圖形以5度遞增，表達式可寫為(index-1)*5
原理:
在當前時間輸出當前屬性值
舉例:
若對位置屬性添加表達式為value+100，則位置會在關鍵幀數值的基礎上對X軸向右偏移100（正數向右側，負數像左側）；若想控制Y軸的位置屬性，則可對位置屬性進行單獨尺寸的分割，從而可單獨控制Y軸（正數向下，負數向上）
注意事項:
更多的使用場景是結合其他表達式一起應用
5. random表達式（隨機表達式）
原理:
random(x,y)在數值x到y之間隨機進行抽取，最小值為x，最大值為y
舉例:
若為數字源文本添加表達式random(20)，則數據會隨機改變，最大值不會超過20；
若為數字源文本添加表達式random(10,100)，則數據會在10<數值<100之間隨機改變； 若為數字源文本添加表達式seedRandom(5, timeless = false)，random(50)，則數據會在50以內隨機改變（前面的5是種子數，如一張畫面中需要多個相同區間的數值做隨機變化，就要為他們添加不同的種子數，防止兩者隨機變化雷同）,若希望數字隨機變化為整數則應添加表達式為Math.round(random(2,50))，表示在2和50之間隨機改變無小數
注意事項:
隨機表達式不僅局限于數據上的使用，其他屬性也可以應用，若數值為整數Math的M要大寫
原理:
以此類推
舉例:
如下圖gif
原理:
timeRemap*n，n以幀為單位
舉例:
將圖層設置為timeRemap*10，代表每隔10幀就抽掉1幀畫面，(根據要抽取的速率決定)
注意事項:
使用timeRemap表達式之前要啟用時間重映射，否則無法使用此表達式
原理:
舉例:
見下圖均以(time,0,3,131,1000)為例，若為數字的源文本屬性添加此表達式可以制作出倒計時的效果n=linear(time, 0, 3, 3, 0)表示從0-3秒數字從3到0，希望數字為整體需添加Math.floor(）
注意事項:
倒計時的用法比較常用，整數M要大寫
原理:
degreesToRadians(degrees) 角度轉為弧度（degrees度的變量或表達式）radiansToDegrees(radians)弧度轉為角度（radians弧度的變量或表達式）
舉例:
常用語數學中的一些計算sin，cos，tan，sec，csc，cot等
原理:
layer(index)中index 是數值，按照編號檢索圖層；layer(name)中name 是一個字符串，按照名稱檢索圖層（若沒有圖層名稱，則根據源名稱）；layer(otherLayer, relIndex)中otherLayer 表示圖層對象，relIndex 表示數值，檢索屬于圖層對象的數值圖層
舉例:
原理:
marker.key(index)中index 是數值；marker.key(name)中name 是一個字符串
舉例:
thisComp.marker.key(1).time表示返回第一個合成標記的時間;thisComp.marker.key(“我叫注釋名稱”).time表示返回具有名稱”我叫注釋名稱”的合成標記的時間
原理:
width表示返回合成寬度；height表示返回合成高度
舉例:
[thisComp.width/2, thisComp.height/2]表示寬度和高度為合成的一半也就是居中的位置
原理:
param(name)中name表示字符串；param(index)表示數值
舉例:
effect(“高斯模糊”).param(“模糊度”)效果控制點始終位于圖層空間中
原理:
復制粘貼表達式使用就可以，amp表示振幅,freq表示頻率,decay表示衰減（根據不同需求做不同的調整）
舉例:
n = 0; if (numKeys > 0){
n = nearestKey(time).index;
if (key(n).time > time){n–;}}
if (n == 0){t = 0;}else{
t = time – key(n).time;}
if (n > 0){
v = velocityAtTime(key(n).time – thisComp.frameDuration/10);
amp = .03;
freq = 2.5;
decay = 4.0;
value + v*amp*Math.sin(freq*t*2*Math.PI)/Math.exp(decay*t);
}else{value;}
上述內容復制粘貼使用即可
注意:motion2腳本也帶此功能，方法不唯一
原理:
k表示反彈最終結果，a表示反彈阻力，b表示反彈變化時間
舉例:
k=500; a=8; b=30; x=k*(1-Math.exp(-a*time)*Math.cos(b*time));[x,x]（根據不同情況調節kab的數值即可）
原理:
StartNumber表示開始時的數值，EndNumber表示結束時的數值，StartTime表示開始的時間，EndTime表示結束的時間，和前面的linear表達式相對應
舉例:
StartNumber=1;
EndNumber=20;
StartTime=0;
EndTime=3;
t=linear(time,StartTime,EndTime,StartNumber,EndNumber);Math.floor(t)
原理:
spd表示擠壓拉伸的速度，maxDev表示擠壓拉伸的大小，decay表示衰減
舉例:
spd =20;maxDev =10;
decay = 1;
t = time – inPoint;
offset = maxDev*Math.sin(t*spd)/Math.exp(t*decay);
scaleX = scale[0] + offset;scaleY = scale[1] – offset;
[scaleX,scaleY]
原理:
delay表示要延遲的幀數
舉例:
為位置屬性添加表達式delay = 0.5;
d = delay*thisComp.frameDuration*(index – 1);
thisComp.layer(1).position.valueAtTime(time – d)；
如想要實現不透明度拖尾需為不透明度屬性添加表達式opacityFactor =.80;
Math.pow(opacityFactor,index – 1)*100(調整好一個圖層后復制多個)
文章來源：優設 作者：凌旬
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
如果要設計產品或開發界面，我們通常會需要風格相同的圖標，若無法自行繪制或不希望付費購買也有很多替代方案，本文要推薦的「Basicons」是一款基礎、簡單的圖標設計，可用于產品開發設計，這套圖標一共收錄186種圖案，同時提供.svg向量圖格式可一次打包下載，利用Basicons界面快速預覽圖標，也能切換不同尺寸下的呈現樣式，包括12px、16px、24px和32px四種大小和1px、1.5px和2px筆觸粗細，可以快速下載圖標圖案或取得源碼。
Basicons也有一個內嵌（Embed）語法產生器，能產生帶入圖標圖案的JavaScript語法和HTML程式碼，如果要獲得更好的效能，建議直接從網站一次下載所有圖標，再依照需求使用即可。這套圖標集以MIT授權方式釋出。（即可以免費使用、修改、出售，附上協議即可）
使用教學
STEP 1
開啟Basicons 從首頁就能預覽完整圖標圖案，這套圖標特色是以非常精簡、干凈的線條繪制而成的圖形，每個圖案下方會有名稱，應該能夠很快速聯想到圖標代表的意思（否則就失去圖標的意義…），可以稍微預覽一下看看自己需要的圖案有沒有列在上面，依照說明，Basicons 每周都會更新加入新的圖案。
STEP 2
從右側的「Customize」自訂選項可以調整圖標尺寸、線條粗細，調整后會直接呈現于左側。
STEP 3
點選要下載的圖標后再按下右側的「Download」就能下載.svg圖標格式（或是從上方點選Download All將所有186個圖標完整下載），如果想直接取用SVG原始碼的話可點選「Copy SVG」復制程式碼。
除此之外，Basicons 還有提供直接嵌入的JavaScript 鏈結和原始碼。
文章來源：優設 作者：Pseric
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn