整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
欲善其事，必先利其器
如今，越來越多的工具可以幫助我們在設計工作上縮短時間，提高效率。比如：之前需要我們手動標注的部分，現在一個html文件就可以全部搞定；原來用AE制作好動效需要我們批量導出圖片交給開發，現在一個代碼文件就可以輕松解決。
今天就來為大家來盤點下那些非常使用的軟件插件
1.AE插件：GifGun
目前，我所知道的最簡單高效的視頻轉GIF的插件。
在使用這款插件之前，導出GIF最常見的方法一是通過AE導出視頻，后用PS進行再次導出。缺點是操作繁瑣，而且文件很大的情況下非常吃內存。第二種是借助Adobe自家的media encoder進行導出。缺點是你需要再裝一個軟件，并且要導出最終滿意的效果需要反復調試，操作并不簡單。
而這款插件完全傻瓜式操作，還可以導出高質量的GIF文件。
2.AE插件：Motion 2
MG動效神器。不過，我個人最常用到的功能是“錨點設置”。軟件提供了九個位置的錨點選擇。無論是做MG動效還是UI動態演示稿，在確定中心點位置的時候非常好用。而且其他功能也非常豐富。比如：彈性動效、爆炸效果、復制關鍵幀、批量命名等等，功能非常全面且操作簡單。
3.AE插件：Bodymovin
設計師在設計動效時會有很多想法。不過，用AE軟件可以輕松制作出來的效果，在開發同學那里可就不一定了。在工期緊張的情況下，耗費大量精力和時間去還原這些動畫效果，顯然有些不切實際。
不過，當Airbnb開發出Lottie并開源之后，這種情況就不同了。設計師可以通過Bodymovin這款插件導出JSON格式文件，讓工程師放入APP項目中，就可以百分百還原AE中所制作的效果了。
雖然插件還并不是十分的完善，一些復雜的效果還無法實現。但項目中90%的效果都是可以轉化導出的。
4.PS插件：Cutterman、GuideMe、Parker、Psmirror四件套
Cut君開發的幾款PS插件。Cutterman切圖工具；GuideMe自定義參考線工具，個人在網頁端最常使用；Parker支持全方位標注的插件；Psmirror個人最常用的實時預覽工具。
以上幾款插件有三款是收費軟件。不過，考慮到都沒過百元，可以購買永久且免費升級，還是非常劃算的。插件均為中文，并且自帶使用說明，非常的良心。
5.PS插件：藍湖
藍湖本身的功能就非常強大。插件主要功能包括上傳設計稿和標記切圖。制作完成的設計稿上傳之后可以和團隊其他成員共享。并且網頁端會自動標注，十分方便。標記切圖功能也很簡單。將要切圖的元素添加標記，上傳之后開發人員可以一鍵下載切圖，非常高效。
6.Sketch插件：AutoFixiOSTextLineHeight
在公眾號中找到的一枚插件，充分解決了開發與設計圖在行高上不統一的問題。為了使字體行高更加精準，也為了避免反復調節，可以使用這款插件，能夠很好地幫助我們解決此類問題。
7.Sketch插件：Sketch Measure
高效的切圖標注工具，和sketch軟件十分匹配。有各種標注功能和切片功能，可直接導出html格式，里面包含全部規范細節和css格式等。可以很好的降低溝通成本，提高效率。
在這里我相信有很多想要學習UI設計的小伙伴，我自己是一名從事了多年UI設計工作的設計師，辭職目前在做自己的私人定制課程，今年年初我花了一個月時間整理了一份最適合2019年學習的學習干貨，從最基礎到實戰都有整理，送給每一位想學習的小伙伴，想要獲取的可以關注然后私信我“學習”兩個字，即可免費獲取資料，伸手黨勿擾~
介： 《 優酷 APP 全量支持“暗黑模式” 設計與技術完整總結》正式發布……
隨著iOS 13和Android 10的正式發布，一個名詞"暗黑模式(Dark Mode)"逐漸走入了大家的視野。各大APP都將暗黑模式的適配列入了開發日程，輿情上用戶們對暗黑模式支持的呼聲也非常的高。優酷主客也順應時勢，啟動了相應的技術預研。
從2019年11月開始，優酷主客Android端和iOS端使用了兩個版本的時間，推動各業務方基本完成了主要使用路徑上數十個頁面的改造，還使用同一套方案同步完成了部分Weex頁面和H5頁面的適配，并完整地通過了UED的視覺驗收。
當前，到APP Store和各大Android市場下載的優酷APP最新版本，均已全量支持“暗黑模式”。我們邀請了參與優酷APP暗黑模式設計/開發/測試的同學們編寫《 優酷APP全量支持“暗黑模式” 設計與技術完整總結》，全面介紹了整個項目的實施流程和經驗教訓，也是對整個項目做一個完整的總結，感興趣的同學可下翻至文末下載。
不考慮計算機工業早期的黑色底，綠色字符的終端界面，暗黑模式的概念主要來源于MacOS，該系統為用戶提供兩個外觀，即"淺色"和"深色"。
自從有了這個概念之后，很多網站都為用戶提供了“淺色”和“深色”兩套界面，便于用戶根據自己的習慣或愛好進行切換。
在MacOS之后，很多APP和Android定制ROM也加入了所謂"深色模式"的支持；在iOS 13和Android 10發布之后，"暗黑模式" 終于被添加到官方支持的特性列表。
根據Apple官方的說法，暗黑模式可以“改善電池壽命，改善視力不佳和強光下的人的可視性，以及在弱光環境中更好地使用設備”。
從下圖中notebookcheck的功耗分析可以看出，在使用OLED屏幕時，屏幕上顯示的內容決定了功耗。當屏幕基本全黑時，OLED屏在任何亮度下的功耗都保持恒定。顯示了白色內容的屏幕，功耗曲線會隨著亮度提高而逐漸變陡。
圖片來源：
https://www.notebookcheck.net/Display-Comparison-OLED-vs-IPS-on-Notebooks.168753.0.html
我們面對的用戶群體中有一部分是色盲或者色弱用戶，暗黑模式對于色盲/色弱用戶群體是非常友好的。
在溫暖的被窩中也可以舒服地看劇了，再也不用害怕被白色背景閃瞎眼了。
業務開發中難免會用到系統默認控件，而系統默認控件都支持了暗黑模式。如果自定義控件不支持的話，當用戶打開暗黑模式后，就會發現風格不統一的情況。
以iOS為例，在下圖的界面中， Tabbar已經被轉成暗黑模式的樣式，但畫面上方的組件、文字因為都是自定義顏色/樣式，并沒有隨著模式切換而自動調整，這也讓整個畫面看起來不太協調。
如果短時間內沒有精力支持暗黑模式，也可以在開發階段強制指定不支持暗黑模式。
對于iOS，需要在APP的Info.plist里面添加名稱為User Interface Style, 類型為String的項目，將User Interface Style 的值設置為Light，聲明"只支持 Light Mode"，就可以避免系統控件轉換為暗黑狀態。
對于Android，需要在APP的Application里面調用下面的代碼，聲明不支持暗黑模式。
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO);
深色模式的切換就像拉上了家中的窗簾，光線暗下來但不會改變壁紙和家具的固有色。我們主要對優酷五大欄目頭部氛圍和底欄圖標進行了深色的第二套設計，讓他們在深色上看起來和諧。
基于對內容兼容度的考慮，我們選擇了足夠深的深色但比黑色淺一些。這樣能夠與包含黑色的媒資圖片拉開空間層次，同時與前景色有足夠大的對比度，保證在弱光和強光環境下的識別度。
深色模式的主背景色應該保持安靜不搶戲，給定制主題場景包括運營場、垂類頻道、會員場，保留發聲的空間。所以選擇相對中性的顏色。
色調協調，要考與主場景的氛圍融合，優酷主要涉及到五大欄目導航欄和首焦吸色。
我們將現有色彩進行歸類，并歸納出每個類型的用途，從而建立色彩框架。這樣可以幫助我們確保同一用途的色彩包含的深色模式和淺色模式兩個色彩組合的唯一性，而不是單個色彩的唯一性。例如：白色會同時使用在背景和有些按鈕文字上，我們不能在深色模式中規定白色變成深色，因為在按鈕上不適用。我們應該規定背景色的淺色模式是白色，深色模式是深色，這樣按鈕文字就不會受到影響。
值得注意的是要先抓住一般類型，再看特殊個例。類如：我們將文字、圖標歸納為信息層并劃分三個層級，而不是歸納為主標題、副標題、按鈕文字、底欄圖標、頂導航圖標。
用一般類型歸納色彩的用途可以涵蓋絕大部分的色彩類型，而特殊類型可以用場景、狀態、組件等維度來劃分，例如：“少兒一級背景色”、“可以隱藏的分割線”“黑色導航欄”。
主要類型：
1）對比度的階梯：清晰降噪
我們在背景的對比度上設置均勻的階梯變化，這種均勻的變化有利于建立背景層級的秩序感。值得注意的是與淺色模式不同在深色模式下背景的視覺感受是逐步被抬高的層，海拔越高明度高。
文字的對比度階梯則不同于背景，在深色和淺色模式下文字的對比度階梯是趨同的。原因是我們希望主標題和副標題要有足夠大的反差使主標題足夠醒目，而副標題與置灰文字的反差則不需要那么大。值得注意的是需要適度提升次要層級文字的對比度。
更好的對比度階梯有利于在復雜信息密度界面的視覺降噪。
2）可讀性：跨場景測試
深色的外觀很可能受到用戶的喜歡，要考慮到用戶在深夜弱光的環境中使用深色模式的同時也不能排除白天強光的使用場景。手機屏幕的自動亮度調節會給實際的比度帶來影響。我們觀察到 iOS 深色模式的設計提升了幾乎所有元素的對比度，這值得我們有所考慮。所以盡可能在這兩種極端環境中測試我們的最終設計，保證信息的可讀性。
3）規范化：建立深色模式色板
基于色彩框架以層級劃分色彩為主，特殊類型作補充，在對應的淺色模式的層級下添加
深色模式的色彩。
同時我們需要在產品的真實場景中反復的對比嘗試確保實際效果是滿足要求的。
另外，一些細節上的處理仍然值得我們的關注：
1）圖標：面型圖標在深色下識別性更優
深色模式下線條型的圖標有時會顯得過于單薄缺少份量感導致關注度降低，為改善這種情況我們可以替換為塊面型的圖標。此外有研究表明多數情況下塊面型的圖標會比線條型的圖標有更好的易用性，他們會被更快速的識別。
2）分割線和陰影：轉換為填充色來區分
深色模式多數情況下對于層級的區隔來說，使用填充色會比分割線和陰影更有效。
深色模式不是簡單的顏色的明暗變化的處理，它是一套全新的設計風格，涉及的場景與團隊非常多，按照常規做法會耗費巨大的開發成本，如何快速實現優酷雙端的深色模式適配是當前面臨的主要問題。
優酷去年設計主導與開發共同搭建視覺產品化能力，設計側針對優酷業務屬性把視覺進行不同顆粒度的拆解抽象，把影響視覺風格調性的最基礎屬性（顏色、字號、間距、圓角、尺寸）進行了統一design token命名，設計與開發團隊共同維護一套可擴展的視覺屬性。視覺屬性與框架布局分離并與開發邏輯相互對應，通過SDK 的方式統一管理，一處替換全端生效，遍于控制并快速定義產品風格。
在視覺產品化能力下進行深色模式的適配與落地相對來說比較容易。在兩個風格的轉化中主要需要適配：色彩、圖片。
整個優酷系統顏色體系分：靜態色（在淺色模式下與深色模式下不需要變化的）、動態色（在深色模式下需要變化）。
動態色根據不同的層級進行重新語意化工程命名，底層還是保留靜態色design token 。整個顏色會由一個sdk 進行統一控制，也保證了整體的一致性。
同時，我們遵循了 iOS HIG 中的語義命令方式，這對于設計師和開發都非常友好。語義命名實際上是為深色模式的動態色建立一個令牌，例如，命名一個叫“主背景色”的動態色，它實際包含了深色模式的主背景色和淺色模式的主背景色。設計師把“主背景色”標注在界面中相應的元素上，開發就可以實現這個元素兩種模式的色彩切換。當然我們還要為開發同學準備一份動態色的對照表。
對于深色模式的圖片處理，我們給出以下建議：
1）設計側盡可能一套圖片適配兩個模式, 例如，使用不透明度設置這類淡彩色可以同時適配淺色和深色模式，這是一種取巧的做法；
2）開發側可以選擇代碼濾鏡；
3）對于一些無法復用的重要圖片，需根據深色界面增加一套新的切圖資源。
通常設計完成后與開發之間的協作是通過sketchMeasure直接一鍵導出標注即可。
那我們對基礎屬性進行統一design token命名后，后續的標注設計要如何標注？需要對照表格手動標注么？開發怎么看design token？
蓋亞是優酷設計主要在用的一個提效工具，不同于sketch Measure 導出RGB色值，蓋亞導出標注會對屬性的值進行符號化處理，顯示屬性對應的值的同時會顯示對應的designtoken。從而解決了設計輸出與開發實現的效率問題。
暗黑模式的官方設計指南，可以參考iOS和Android的官方文檔：
點擊“了解更多”獲取官方文檔
關鍵詞：移動開發、weex、開發工具、Android開發、iOS開發、UED、MacOS
從google 2014年推出Material Design設計語言以來，material design一直是使用最多（也是最受喜愛）的視覺設計語言！主要有兩個原因：
統一：跨平臺運行的可視化語言。
直覺：Material Design的核心理念是“材料/表面”的行為方式。這使得用戶幾乎可以看到交互中會發生什么。
但谷歌希望Material Design不僅僅是另一種視覺語言。Google正在構建工具來改進我們的設計開發工作流程！以下是今年google i/o發布的重要消息：
材料主題
這是Material Design的重大升級！材料主題是“系統”定制材料設計以更好地反映產品品牌的能力。讓我在這里解釋系統的含義：
品牌通過顏色，印刷和形狀在視覺上的呈現。
所以我們需要一種方法來改變材質組件中的這些東西！
之前做出這樣的改變，我們不得不使用多個插件來更新Sketch 符號/庫，但是現在我們有了“ 主題編輯器 ”。
一些很酷的功能：
1. 更改/添加/更新顏色：這很酷，它可以了解顏色的使用位置，并相應地生成陰影/色調。
2. 字體管理：這允許您創建視覺上相似的類型層次結構！
3. 形狀：這是新東西，是材料設計的核心，因為這是關于更新材料（卡片/形狀）的！您可以根據品牌定義自定義形狀。
4. 新的圖標樣式：你是否像我一樣被圖標和固定樣式的選擇所困擾呢？那么，現在我們有5種不同風格的圖標。
畫廊
您是否記得去年Google發布的一項工具，聲稱這將簡化您的設計工作流程，但它所能做的只是允許用戶對圖像版本進行評論！
而現在，Google的畫廊回來了！現在它可以在一定程度上解決您設計上的切換的問題。讓我們看看它到底是怎么樣的。
1. 它允許附加Google文檔，表格和幻燈片！因此，我們可以從需求文檔到用戶研究，到最終的設計方案，在一個地方完成。
2. 它新增了“項目和收藏”的概念。這與我們的Sketch文件類似，并且有多個頁面！對我來說這是一件很大的改進。
3. 如果您上傳的文件名稱相同，則會創建該文件的版本。這有助于了解您的線框如何變成真正的設計。或者只是看看反饋如何影響您的用戶界面。
4. 檢查模式：規范生成器！不是一個普通的，它可以檢測符號并顯示你鏈接到該組件的代碼！此外，它可以識別字體家族并顯示Google字體的鏈接！
5. 當然，它是免費的！不再用Sketch Measure，Zeplin，Marvel或Invison
其他主要更新
1. iOS，Android，Web和Flutter的材質組件：
https://material.io/develop/
2. Google如何創建自定義Material主題：解釋Google如何處理其Material Design規則。
https://material.io/articles/how-google-created-a-custom-material-theme.html#01
3.Material design合作伙伴：了解諸如Lyft，Genius，NPR，Pocket Casts和Zappos等應用如何將Material設計賦予新的表現力。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
