隨著C端市場飽和與數字化的浪潮下，實體經濟、ToB 、ToG的產業再次迎來了它的曙光。視頻動效的作品占比也已超過C端界面設計，相信今年視頻動效作品占比還會再次提升。
追波年度最佳作品來自大家最熟悉的UI8團隊中的Tran Mau Tri Tam ?，作者來自越南西貢，最佳作品截止目前355K瀏覽量，2933個贊。
為什么看似平平無奇的作品卻能獲得追波年度最佳作品呢？既不是C端也不是純B端的作品，更像一個網頁與平面的結合體。如果去掉搜索圖標、分類圖標和按鈕，你可以理解它就是一個平面作品，一個字體加幾何形體構建的作品，為了豐富畫面的層次，讓畫面更加的活潑采用了多彩加幾何色塊，讓標題閱讀有停頓感和呼吸感。faster底部的橫線讓它從標題文字中脫穎而出，這種使用線條突出重要信息的設計也是今年追波設計流行趨勢之一。
MetroUI是Windows8的界面設計語言，在2010年至2013年間曾經風靡一時，那也是移動互聯網的發展元年，現在國家推行實體經濟、數字化帶動To B 、To G 的發展元年，通過幾何色塊（MetroUI）實現B端產品與C端設計風格的傳承與銜接，你會發現歷史總是驚人的相似。最后背景結合今年最流行的微軟風，毛玻璃的多彩高斯模糊漸變風，年度作品當之無愧。
最后來看下按鈕的設計，正常的按鈕要么文字加色塊，要么左圖標加右文字，它設計成左文本加右圖標，更加注重信息的可讀性和易讀性，也體現B端設計重功能和交互體驗，視覺點到為止的設計理念。
下面我們來欣賞年度最佳作品里面的流行趨勢吧。
字體三原則：可讀性、易識性、易讀性。當你同時讀一篇文言文和一篇設計文章，肯定設計文章的內容可讀性更好。易識性是用在字體設計上，不能過于浮夸的改變字體骨架、形體而不易識別。易讀性和每個位設計師都息息相關，因為我們都需要編排文本。當我們小時候寫作文時，不會寫的文字可以用拼音代替。這時候讀者讀到拼音時會有停頓感，更加適合用戶閱讀。
通過給用戶制作停頓感來增加用戶的易讀性?？梢栽谙嚓P聯文本后面添加圖片、表情、圖標來更好的理解文本內容，豐富文本內涵。比如情侶間表達愛意時會輸入文本，“我愛你”、“我Love你”、“我ai你”、“我??你”，哪個更加會有情感共鳴呢？不言而喻，相信你心中已經有答案了。
在標題文字上添加曲線來突出重要文案是2021追波最流行的趨勢之一，第一個設計目的就是突顯文字，其次就是想表現鉛筆真實書寫的感覺。之前很多帶有簽名的設計中，簽字的文本都是手寫體的感覺，手寫體對比電腦的機械字體會帶有一種人文氣息，也會讓兩者之間產生一種對比、矛盾。
除了突顯文本外，曲線還有視覺引導的作用。通過視覺引導讓用戶按照設計師編排的順序進行瀏覽界面。當然還有比這更科學的工具就是眼動儀測試，通過真實用戶眼睛瀏覽界面顯示對應的熱點圖。
多彩高斯漸變風是從色彩的角度來傳達和豐富畫面的，多彩高斯漸變風其實是從制造矛盾到平衡矛盾的過程，多彩漸變多為冷暖對比來制造畫面的沖突，需要控制冷暖畫面的大小來實現平衡。主流的還是以暖色突顯為主。多彩漸變主要起到活躍氣氛、吸引目光、平衡畫面的作用。
多彩高斯漸變還可以結合輕擬物、幾何圖形、三維等新的組合方式去創新，給用戶呈現一種更加新穎的視覺表現形式。最后我們還是要回歸到內容上，為了更好的傳達信息需要去設計與內容相匹配的視覺風格。
B端設計的火爆帶動了B端相關模塊設計，更多的人也愿意嘗試B端相關模塊設計，側邊欄作為產品架構中重要的導航系統，好的側邊欄設計能為用戶帶來更好的效率。主流側邊欄都做了展開、收起、拖拽等交互效果，也是受限于PC屏幕為展示更多數據而騰空間。側邊欄主要承擔的功能有導航、分類、自定義篩選、共享、新增等。追波的B端產品設計已經不再是假大空概念設計，而是一套實用美觀可落地的設計。
儀表盤設計是一個很好的隱喻，想象一下開摩托車或汽車主駕駛前面的屏幕，汽車儀表有燃油表、車速表、里程表、水溫表、轉速表、故障指示燈等。B端類產品后臺界面的儀表盤設計也需要展示一些重要的數據和各種狀態，大體分為側標欄、導航欄、待辦任務、個人信息、報表數據、消息中心、快捷入口等。當然最重要的就是報表數據，團隊收益、任務進度、轉化比例、新增、存量、團隊工作時長等都是老板或領導關心的內容。每個公司業務不同、每個人員權限不同，自定義的儀表盤也各有差異。重要的是突顯數據和業務狀態，需要分層級系統性去思考和設計。
復雜的事情簡單化，簡單的事情標準化，標準的事情流程化，流程的事情自動化。流程設計是每一個企業核心功能和業務，可自定義的管理流程系統搭建也是B端產品設計的難點，需要對業務高度抽象，讓每一個業務人員可自定義的流程才是好的流程設計。
B端C化是B端產品設計的視覺表現力慢慢往C端產品設計的視覺靠齊，國內B端產品界面設計視覺水平還有很大的提高空間。除了視覺上的提升外，由于業務的發展，B端產品也開始移動化、智能化，國內主流還是通過小程序、H5來現實B端產品C端化。
輕代碼化是一種低代碼賦能無代碼的方式，彌補無代碼拓展性差、覆蓋場景少的問題。在保有無代碼靈活、易用、快捷的同時，又能覆蓋低代碼使用場景。簡單理解就是無需代碼開發即可如搭積木般快速、靈活地創造屬于你的個性化管理系統，輕松實現多元業務場景的數字化管理。
輕代碼化將功能進行打包，升級成全局可以用的配置，技術人員配置好后，業務人員在應用編輯時直接選擇使用模版，綁定對應的變量即可使用。
為什么人加色塊的組合方式能流行起來？還是B端行業流行帶動的。B端講的更多的是企業對企業。企業對企業除了講行業解決方案外，還需要傳達公司的價值觀、使命、愿景。人加色塊的組合方式非常適合體現公司的企業文化。對于一家全球化的公司不同膚色的人物組合在一起，這種人文氣息和價值觀已經就不言而喻了。
當然企業也需要進行營銷，抓人眼球。幾千年來的遺傳證明了，人的大腦對食物、性、動的東西、人臉和眼睛、危險的動物很敏感。人加色塊的組合方式也具有抓人眼球營銷的功能。真可謂一舉兩得。
這種風格更適合大公司，國內的一些手機廠商OPPO、VIVO等也會通過手機+背景+人物來體現科技與人文的結合，而對于中小型公司產品差異化和行業解決方案展現應該還是重中之重。
毛玻璃效果加大了模糊程度，透明效果更加扁平，很好的順應當下UI扁平化的設計趨勢。蘋果Mac OS Big Sur系統的圖標、界面中運用了大量毛玻璃和半透明元素，界面更扁平。至于C4D三維彩色玻璃的視頻教程可以在B站搜索“透光藝術-C4D創建彩色玻璃的4個技法”，完全能滿足UI設計師。當然還有一個好消息就是Mac用戶可以享有OC一年免費的使用權，具體安裝購買方法可以上“某寶”就可以輕松搞定，真香。
輕擬物這幾年一直流行，在UI設計中趨于穩定的位置。從寫實到扁平再到輕擬物，其實是設計師們一路不斷探索的結果。本質就是光影對形體產生的視覺感受。在色彩中對高光、亮面、明暗交界線、暗面、反光（環境光）五個部分的處理。寫實三維的圖標等設計更適用于簡潔的畫面中，扁平等設計更適用于復雜一點的界面中，比如B端產品界面中的功能圖標。輕擬物可使用的范圍更廣，效果更佳。Sketch、Figma軟件對于漸變、高光、投影、高斯模糊處理已經非常簡單且出彩。
簡潔設計遵從了密斯·凡德羅的“少即是多”的設計原則，在B端產品界面中更加需要簡潔設計，我們最熟悉的Sketch軟件界面已經是相當的簡潔了。回到現實當需求功能不斷增加，產品界面的編排如何取舍，如何保證界面的簡潔是設計師需要深度思考的問題？如何與上級溝通？該功能是否可做可不做？是否需要埋點用數據說話？如果只是一味競品有我們就需要有，功能不斷累加只會讓界面越來越重。
幾何圖形和幾何插畫有異曲同工之妙，幾何圖形多為產品界面和宣傳內容的抽象，產品界面的幾何圖形多為占位符形式，加上色彩和幾何色塊讓其成為一個整體。B端產品視覺設計C端化的進程中，幾何圖形、幾何色彩不失為最好的突破口，相信今年追波B端產品的視覺設計一定會更上一個臺階。
幾何圖形另一個場景化的地方就是品牌，作為一名UI設計師一定會經歷從圖標到幾何圖形到品牌設計的過程，品牌設計的技巧基本還是以幾何圖形為主，至于品牌的內涵需要更深層次的解讀。掌握主流品牌設計的技巧對產品定位、品牌宣傳打下扎實的基礎。
暗黑模式的設計是解決在微弱環境下內容也可以有更高的可讀性。隨著用戶夜晚及深夜使用電子設備時長增大，如何在夜晚這個特定場景下使用更加舒適。合理使用暗黑模式可以減輕眼睛疲勞，提高在夜間使用的可讀性。
在設計暗黑主題時，不能為了突顯視覺上的逼格，而去使用高飽和度鮮艷的色彩來突顯界面的品質感。而應該把舒適度、可讀性作為設計的衡量指標。Material Design給出了暗黑主題的設計準則，即正文和背景之間的對比度應至少為15.8:1。按照此標準設計，可讀性都還不錯。這里介紹一個插件“Stark”（Figma、Sketch、XD、Chrome插件）用來測試界面的對比度。
為什么叫模塊化，而不叫組件化，組件化更多的利用原子系統從原子、分子、組織、模版、頁面來快速的搭建界面，但在B端產品設計中基礎組件和業務組件的搭建是以提高工作效率為前提，是否有從0到1搭建B端產品組件的經歷是設計師一生中最寶貴的經驗之一，它能提高設計師的系統化思維、邏輯思維和抽象思維能力。
產品模塊化設計就是將產品分成幾個部分，也就是幾個模塊，每一部分都是具有獨立功能，具有一致的連接接口和一致的輸入、輸出接口的單元，相同種類的模塊在產品族中可以重用和互換，相關模塊的排列組合就可以形成最終的產品。通過模塊的組合配置，就可以創建不同需求的產品，滿足客戶的定制需求 。
插畫作為設計的一大品類，不同的插畫師都有自己擅長的風格，本質是都有自己的個性，但是在產品設計中更多是需要共情、共性來講故事，表達產品理念和價值觀。這就需要插畫師去嘗試并探尋出適合互聯網產品設計類的插畫風格。設計的本質是舊元素的重新組合，插畫不會過時，而是需要結合當下和產品找到最匹配的設計風格。
幾何插畫算是插畫簡化的一種表現形式，人和物的形態不再寫實，而是抽象成幾何圖形拼湊的感覺，同時保留人物形態的神韻。加上幾何色塊與人物交互形態的表現，傳達出簡潔、科技的現代感。難點還是在人物形態的表現上，平時多練習練習速寫還是很有必要的。
線面插畫最近一兩年非常流行，準確的說是非常適合。首先線面插畫主要是由線條和塊面組合而成，用塊面表現人物形態時某些結構會表現不出來，這時候用線條簡單勾勒后，結構就會清晰明了。其次當線面插畫運用在界面上時，可以打破界面純文字或組件化的機械和沉悶感。線面插畫的風格提升畫面熱鬧感的同時，還能保持界面的干凈整潔。
界面微交互動效會讓用戶的體驗更加精致到位。想要打造優秀的產品設計，微交互和動效設計是繞不開的，UI界面設計通過微交互反饋告知用戶當前正在發生的事情，所處的狀態。細微的動效更能調動用戶情緒，取悅用戶。C端產品微交互和動效已經很成熟了，一部分功勞來自iOS系統原生自帶的效果。B端產品的微交互和動效更多還是在學習海外產品，還需要給前端工程師灌輸微交互和動效的設計價值，共同打造產品體驗細節。
Mg動畫需要很好的節奏感、韻律，每一個場景動畫都需要其中的元素進行連接變化，讓轉場動畫更加自然，MG人物動畫通過點線面的動效變化讓畫面更加有趣、自然，通過粒子效果讓特定場景無限循環會讓人更加印象深刻。
MacOS Big Sur系統圖標的更新帶動了三維圖標的流行，三維圖標的應該場景還是需要有較大留白空間的界面，因為三維圖標太小后就看不到更多細節。三維圖標感覺又回到了擬物化和扁平化哪個更好的問題上？設計師應該保持開放多元的視角。設計本身也在不斷的演化融合，存在即合理。合適最重要，它們都會有適合自己的場景和設計價值。
為什么輕三維在界面設計中占有一席之位？一個是設計師不斷追求差異化的產物。另一個是更好的表現內容，并與用戶產生共鳴。輕三維的基礎模型都是來自手機界面中的各種元素，比如組件、開關、按鈕、占位符、圖表、幾何圖形、圖標、進度條等，這些都是用戶日常使用系統軟件常見的元素，通過簡單的幾何形體建?！驘艄狻硬馁|—渲染—PS調色。難度系數不大但效果很出彩。第一個出彩點是模型帶有厚度的倒角，結合燈光渲染的光澤是二維軟件不能比擬的。第二個出彩點就是材質自由添加，特別是當下流行的毛玻璃效果，玻璃材質渲染效果更佳。第三個出彩點就是可以加局部燈光，局部的漸變色或環境光更佳出彩。
P4D是PS加C4D的設計表現技法，也是視覺設計的最后一個環節，通過PS對C4D的渲染圖片進行調色，利用PS的調色技巧可以很好的解決C4D打燈光的瑕疵，還可以利用PS強大的合成功能，將渲染圖片與圖片素材進行合成，來表現畫面的視覺度，當然三維軟件比較難實現的水、粒子、煙花等效果，也可以通過PS的后期合成來實現，這也是P4D的強大之處。
卡通IP設計最近三四年技術的迭代已經慢慢的走上成熟，卡通IP也從傳統的純PS手繪技法，轉到C4D建?！巧壎ā狹D衣服制作—OC渲染—PS（靜態）/AE（動態）調色。
卡通IP火的本質更適合做營銷，相比于品牌或Slogan，卡通IP具有親和力和畫面感。隨著各種手辦行業大熱，受互聯網大廠影響下，卡通IP已經是互聯網B輪以上公司的標配了。如果團隊中沒有這樣能力的人，也可以通過繪制好二維，一套三維可以選擇外包完成。
對于UI設計師來說學習是有成本的，暫時并不是必備技能，如果喜歡完全可以學習，從設計差異化的角度來看三維視覺確實有一定的競爭力。
C4D三維場景動畫通過構建實物和場景模擬生活中的現實場景，會讓用戶體驗真實感，三維軟件制作動效的最大優勢是通過動力學和表達式來模擬真實感，未來在AR/VR領域會有更好的發展。相對于界面動效學習成本難度也相對較大。在三維動畫中C4D軟件對于域、動力學還是有一定的優勢。
存在即合理，趨勢流行稍縱即逝，注定是不長久的，只有大浪淘沙歷史遺留下來的風格才能更長久。但我們也不能不去關注，因為哪有什么所謂的創新，只不過是舊元素的重新組合，并符合當下這個時代人的審美需求。香奈兒的“時尚易逝，風格永存”大概就是這個意思吧。
作者：水手哥 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
視覺空間、字體性格、顏色情緒三個大方面來談一下我對視覺知識的部分理解！目錄如下
空間感：空間感( sense of space)是指藝術形象通過一定手法引起的類似現實空間的審美感受。藝術家通過特定的瞬間造型和空間深度的追求，使人聯想到其活動、生活的環境空間。在繪畫、攝攝影藝術中，形象存在于二維平面中，但通過構圖、透視、線條走向、光影和色彩處理，使人感受到空間的整體性、立體性。
而在我理解總結，空間感其實就是運用各種手法，打造出畫面的空間縱深感，讓二維的畫面變成三維，從而提升畫面的品質、細節、沖擊力。
我們以人物海報為例對比幾張圖，直觀感受一下：
無空間感：
有空間感：
我們直觀的可以看到，都是人物海報，下面的兩張明顯更有品質感。有空間感的圖，畫面會更高級。
那是因為空間感會讓你的畫面更有層次，更靈動和富有場景感。這就是空間感的有點。
空間感，其實就是打造畫面縱深，讓元素之間形成前后關系，那有哪些方法來打造畫面縱深呢？我們總結了5個方法來分享給大家：
1.3.1 構圖
富有極強透視線的構圖能很直觀地表現出空間感。
比如
這類
這類擁有很強透視的構圖，不用做別的，光構圖就能體現出很強的空間感了。
實際運用中，我們還可以利用標題文案排列出這種透視構圖來打造空間感：
1.3.2 虛實
虛實分為：
1.輪廓虛實
2.顏色虛實
輪廓虛實：兩個相同的元素，輪廓模糊的在空間上會感覺處于輪廓實的元素后方。
這是兩個元素，放到一起就會感覺上是在同一個平面上的。沒有虛實關系。
如果把其中一個圓的輪廓虛化：
是不是就會感覺出右邊的會在左邊的前面，拉出了前后的空間感。這就是我們的輪廓虛實了。
顏色虛實：越貼近背景色的顏色，在空間上會感覺處于后方。
還是這兩個元素，如果把其中的一個顏色調成和背景貼近：
兩相比較，顏色更實的飛碟，會處于顏色較淺的飛碟前面。
1.3.3 大小
越大元素會感覺越近，越小的元素感覺越遠。
在實際操作中我們一般可以利用不同元素來制作這個效果。
比如這是一堆元素，如果大小都差不多，就會感覺是平鋪在一起的，沒有空間關系。
如果調整它們的大小， 重新擺放，通過近大遠小的原理，就可以很輕易地打造出元素之間的前后關系，從而營造出空間感了。
大小對比空間再其他畫面中的應用：
1.3.4 明暗對比
除了虛實、大小之外，明暗也能對比出前后關系，從而營造空間感。
通過紋理層次的明暗對比，一明一暗的對比，也能拉出前后關系。從而營造空間感。
1.3.5 穿插
利用元素相互穿插產生的前后關系，也能營造出空間感。
這是1個元素和兩個圓的平鋪，沒有交集。
如果我給他們穿插重疊在一起：
那就能產生元素之后的疊壓前后關系，從而也能營造空間感。
利用在海報中：
以上這五種方式就是我們今天分享給大家的方法啦，
在視覺海報的打造中，基本都不是只靠其中一種方法去打造空間感，而是3種，甚至5種一起運用，可以讓塑造的空間感的更有層次細節和沖擊力。
比如：輪廓虛實+顏色虛實+大小，或者：穿插+大小+明暗。
大家一定要靈活運用，自由組合，以畫面最優效果為目標去做，不要局限在某一個框架里。
字體也有字體的性格，不同的字體會呈現出不同的字體性格特征，比如高矮胖瘦、敏捷、邪惡、可愛、優雅文藝等等等等。通過精準地對字體的結構，筆畫粗細，細節調整，字體效果等的處理表現字體的差異化，使字體的性格調性，與畫面內容相匹配。
2.2.1 力量感、沉穩
特點：橫細豎粗/留白少/重心偏下/轉折筆直
2.2.2 可愛
特點：圓潤/不規則/擴張
2.2.3 優雅
弧度/纖細/重心偏高
2.2.4 活力
特點：傾斜/筆畫延伸/筆畫干脆，轉折彎曲很少
字體還有各種各樣的性格，比如魔幻、哥特、血腥、恐怖等等。
我們在做項目的時候，字體的感覺就一定要抓得準，符合整個畫面的調性：
比如這種歐式哥特的畫風， 字體就可以加一下哥特元素，點綴點玫瑰、藤條。
剛硬科技的畫風，字體筆畫就可以粗一些，添加點科技感和幾何圖形，營造超前科技的感覺：
植物自然的風格筆畫就可以柔和一些，帶有弧度，把一些畫面元素圖形化點綴在上面：
2.3.1 字型特點的提取
具體實操怎么做的呢？我們今天就給大家分享一個案例，看看是怎么操作的：
這是一張視覺，我們要給他做一個主標題，這個主標題的字型特點應該如何從圖里提取呢？
我們要提煉出三個點出來才能知道如何去做：
1.風格
我們先分析這張圖，它的一個風格是有點魔幻+復古，神話傳說加西域古代的一種史詩感。
我們可以找一些神話類史詩的類似的參考看看：
特征：
1.復古
2.重心高.
3.不用那么特別復古可用襯線體變形
2.特征
這個我們可以從人物身上去提取，人物有盔甲，我們可以把盔甲的特征提取出來：
3.配色
顏色也不是亂選的，一定要和圖能呼應關聯起來，那顏色怎么選呢？其實畫面里已經幫我們選好了配色。我們觀察一下畫面：
整體偏冷調，墨綠色居多。，對比色有紅色和黃色。
那我們為了突出字體，又能和畫面呼應，那黃色就是再好不過的選擇了。
那到這我們的設計目標就比較明確了：
2.3.2 字型設計
1.基礎字型：
雖然是往復古了去做，但也不是真做成甲骨文，還是結合一下使用場景，和識別度。參考中也有部分是使用宋體去變形的，所以我們可以先選一個宋體的字體出來當做基礎字型。
為了保證識別度，我們可以只做部分復古。
這里我挑靈下面“火”字，因為這個字處在中間，比較顯目。
2.調整重心
參考復古類型的字體重心都會往上偏移，讓字體稍顯長一些。
3.加入特征
（1）鋒銳：默認字體上有很多圓潤的地方，我們都改成尖銳的感覺。
把每一個筆畫都改掉：
（2）彎曲的尖角：
圖形提煉：
加入到字體當中：
字型到這里就完成啦。
（3）字體轉折的厚度：
字型完成了，字體轉折的厚度我可以再字體效果上去做。在筆畫中間加一個層次，以明暗分隔開，以實現盔甲上這種轉折的厚度：
全部加上，看下完成效果：
結合到畫面中看下：
效果還是很不錯的，整體風格也比較統一。
這一塊就是關于字體性格的內容，我們繼續往下看！
接下來我們來說下關于顏色情緒的問題！
配色感覺不對？顏色臟？配色不高級？
這些問題一直困擾著我們。應該怎么配色呢？其實顏色也是有規律可循的，這篇文章就是帶給大家一些顏色方面的啟發，讓你了解配色的底層邏輯，從而更明確快捷地配出想要的顏色。
認識色彩飽和度的情緒：
因為不同的配色會帶給觀者不同的情緒感受，只有在先了解不同顏色特性的基礎上才能為我們的配色指明方向。我們做出的畫面想要傳遞什么感覺，這種感覺對應什么顏色？
只有搞懂了邏輯，在之后的工作中，才能為我們的配色方案指明方向，而不會一開始就被難住。
如果我想配一個積極熱鬧活潑的畫面，顏色怎么配呢？ 如果想配一個溫柔恬靜小清新的畫面顏色又該如何選擇呢？他們都有什么特點，為什么會這樣？往下看
3.1.1 積極活力
我們先來看幾組圖片
用吸管工具提取一下它們的顏色觀察
我們可以看到這類海報視覺上都能給人一種熱鬧、動感、活力的feel。
通過顏色提取，再觀察它們選色的位置，可以發現它們的的配色的純度和飽和度都非常高。
這是為什么呢？接下來我們降低飽和度看看會發生什么：
可以很明顯的感受到畫面中已經失去了那種動感、熱鬧和活力的感覺了，整體更趨于平穩和安靜。
所以，高飽和度的配色會帶給觀者活力，動感，熱鬧的情緒。常常應用于一些電商、運動品牌的視覺項目中，用來渲染or打造年輕、活力、熱鬧、動感等氛圍。
3.1.2 溫柔平靜
我們再來看一組:
這一類圖片就會給人一種文藝小清新的feel，這類配色和熱鬧、運動的感覺完全不同。
都是低飽和度高明度的顏色。所以，低飽和度的顏色會給人傳達平和、放松、舒適的心情。
3.1.3 輕松休閑
這一類的圖片就給人以中正休閑的感覺。飽和度都趨于中性，不過高，也不會過低。
其實原理就是在取色器里，
我們看同一張圖片，給我們的感覺：
高飽和度配色給人感覺沖擊力很強，具有活力，對比非常強烈。
中飽和度畫面就弱了一級，視覺沖擊力沒那么強。畫面會放松一些，適合傳遞休閑的感覺。
使用低飽和度的顏色時，我們看到畫面更冷靜了，有些高級灰的感覺。
在以往的實際工作當中，我也是先用飽和度來定畫面的大情緒基調，只有大的感覺對了，后面才不會出大問題。比如像一些戰斗、pk、熱血類的banner，都用高飽和顏色:
我們可以來吸取他們的顏色看看：
基本都是靠右邊的顏色。
而像我在做下面這種類型的banner時，就會使用到中飽和度的顏色，給人一種輕松休閑的感覺：
我們再看下他們的色域：
都是趨于中間的位置。
最后一種低飽和的顏色，像下面這種作品，就有一種文藝、清新的感覺：
再來看看他們的顏色色域
都是比較靠左的顏色。
用飽和度來定畫面的大基調，還是非常好用的，可以說是屢試不爽，大家可以好好理解并且用起來！
總結：
高純度，高飽和度的顏色，會讓人感覺激動、積極、動感、醒目、記憶深刻等特點感官，常常應用于一些電商、運動品牌的視覺項目中，用來襯托年輕、活力、熱鬧、動感等氛圍。
中飽和度的顏色飽和度和純度都適中，顯得中正平和，又不會有低飽和度那樣的“平緩“，想要視覺年輕一些，但又不想飽和度那么的強烈，可以嘗試選擇中度的顏色。
低飽和度的顏色，會給人平和，舒適的感受，常常會結合大量無彩色一起使用，讓畫面傳遞出簡約，自然，小清新文藝的感覺。
作者：菜心工作室 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
在版式設計中對比其實就是差異化。若兩個元素有所不同，那就讓他們截然不同，不要拖泥帶水。
比如我用兩個圓表達大小對比，那么下圖則是拖泥帶水的反面教材。
因為此圖中的大小對比并不明顯，看不出要強調哪個圓形，主次不明，對比含糊不清。
對比上圖，此圖大小對比明顯，更能夠有效的傳遞出重要信息，所以要用對比的話，就讓元素差異化強烈一些。
對比的分類有很多種，比如：
除了這些還有字體類型的對比、距離對比、虛實對比、遠近對比等，可以說存在差異的地方就存在對比。而在版式設計上，我們要將這種對比最大化，以達到吸引眼球、方便閱讀的效果。
對比能簡化畫面，使版面主題更明確，更直觀。
運用對比能使視覺沖擊力更大，更抓人眼球。
對比使版面層級清晰，能夠突出重點，從而更有效的傳達信息。
通常一個作品中不會只用一種對比，而是多種對比方式組合使用的。比如上面左圖用強烈的大小對比出標題與正文的層級，同時加入光影對比為主體打造立體感，更抓人眼球。右圖使用方向對比與位置對比使版面更活躍，更有視覺張力。
幾乎所有的作品都會用到對比原則，在設計中我們也要善用對比原則。
對齊原則是讓版面中的元素有一種視覺上的聯系，以此來打造一種秩序感。
此版面中沒有運用對齊原則，各元素間沒有聯系，凌亂而沒有秩序感。
使用了對齊原則之后，整個版面規整又美觀，建立了一種秩序感而更利于閱讀。
左對齊：版面中的元素以左為基準對齊。左對齊是最常見的對齊方式，簡潔大方，利于閱讀。
右對齊：版面中的元素以右為基準對齊。相對于左對齊來說不太常見，給人一種人為干預的感覺，閱讀比率慢一些。
居中對齊：版面中的元素以中線為基準對齊。居中對齊給人一種嚴肅與正式感。
兩端對齊：版面中的元素拉伸或縮放與同一元素兩端對齊。兩端對齊通常用于大段落文字編排中，利于閱讀。
頂對齊：與左對齊相似，版面中的元素以頂部為基準對齊。
底對齊：版面中的元素以底部為基準對齊。
軸線對齊：軸線對齊是以版面中心線為對齊基準，而不是元素的中線。
除了上圖的案例為軸線對齊外，下圖的這幾種也都是軸線對齊的形式。
軸線對齊能給人正式感，同時各個部分又富有變化，比較靈活。
對齊的作用總結下來其實只有一點，就是能夠使版面統一簡潔更有條理，能夠引導視覺流向。
這是一個同學的名片作品，給人感覺凌亂、沒有秩序，信息傳達也不清晰。那么問題出在哪兒呢？
首先，綠點部分的文字大小差不多，缺乏對比，導致層級關系不分明。
其次對齊方式不統一，沒有秩序感。
那我們運用兩個原則修改后是什么樣子呢？
我們強調名片持有人的名字，將聯系方式等其余信息左對齊，LOGO與二維碼則置于右邊，是不是整潔規整了不少，信息的傳達性更強了。
同樣的，我們也可以將聯系方式與二維碼移到版面右邊，LOGO置于左下方，同樣很規整，簡潔美觀，利于傳播。
對齊與對比的組合會有多種變化，運用好了會使版面規整美觀不少。
接下來看一下修改前后的對比圖。
這是某同學的周練的海報作品，可以看到她對齊是統一的左對齊，沒有問題。但是畫面中卻缺乏對比，主次感不強。另外圖片選擇也不美觀。
同個主題下，另外一個同學的作品：
這個同學的作業突出了主標題，對比也非常明顯，其余的信息層級也有對比變化，視覺上比較豐富，統一的左對齊也非常有條理。
同樣的內容與主題，對比與對齊原則應用的好壞會直接影響版面的美觀性與易讀性。大多數情況下，對比與對齊是缺一不可的。
當然版式設計中有四大基礎原則，「對比」、「對齊」、「組合」、「重復」，一般情況下這四個基礎原則都是組合使用的?！笇Ρ取古c「對齊」只是一部分，「組合」與「重復」我們以后再細說吧。
作者：大貓404 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
近年來界面設計工具不斷推陳出新，一些新興的實用界面設計工具漸漸走進設計師們的視野，逐步改變著設計師的工作模式。作為互聯網設計師，效率至上的工作原則敦促我們不斷嘗試新工具，建立新的工作模式。本文將回顧界面設計工具的發展歷程，并著眼界面設計工具的發展趨勢，為大家推薦一些新興、高效的界面設計工具，涉及UI、動效設計領域，希望對大家有所幫助。
隨著互聯網行業的日益繁榮，界面設計領域逐漸走向成熟，界面設計工具也一直在以驚人的速度發展。界面設計工具的發展歷經了三個階段：
1. 第一階段是最早期界面設計領域剛剛起步，設計師普遍使用PS來制作界面。但PS是一個全面的而非專門針對界面設計的工具，因此界面設計師在界面的繪制、文件的交付上都存在一定不便。
2. 第二階段是Sketch的出現。雖然Sketch是一款Mac端軟件，但其作為一款專門針對界面設計的工具，以其高效、小巧的優勢迅速占領界面設計市場，逐步取代PS成為各大設計團隊的首選。由于Sketch在動效制作方面的欠缺，出現了Principle、Flinto、Protopie等專門設計界面動效的工具，一般設計師都會將其搭配使用。
3. 當前階段各種新興設計工具如XD、Figma、Framer Web逐漸走進設計師們的視野，它們專注于界面設計領域，不斷挖掘和突破Sketch的短板，為設計師們打造更良好的使用體驗。
界面設計工具的發展改變著設計師們的工作方式。界面設計工具也漸漸從單一專注設計本身向云端性、協作性、通用性發展，旨在實現更高效的設計生產活動。
云端性
隨著云計算的發展，界面設計工具也在逐步走向云端化。設計從本地轉向云端，不再依賴于本地硬件的性能，云端的計算能力讓使用性能得以提高。設計也不再受時間和空間的限制，只要有網絡，設計師可以隨時隨地的工作，臨時使用其他電腦工作時省去了安裝軟件、同步設計文件的麻煩。 設計文件的共享從傳送本地文件給對方，變成發送鏈接給對方。前者耗費本地內存與下載時間，后者有網即可打開。設計工具的云端性使得設計的靈活度增強，設計效率大大提高。
協作性
注重不同工種之間的高效協作也是設計工具的一個發展趨勢。新興的設計工具（如Figma、Framer Web）試圖將產品、設計、開發、測試融為一個整體，讓不同工種之間可以高效討論、同步設計方案。實現整個團隊效率的最大化。利用技術降低反復溝通的成本、減少同步不一致情況的發生，掃除各工種之間的協作障礙。
通用性
今年9月Figma舉辦的第二屆Config Europe大會，其主題是讓設計和代碼連接更緊密。可以看出設計工具越來越注重其通用性，設計工具不僅可以幫助設計師輸出設計稿本身，而且致力于打破設計與代碼之間的壁壘，降低交接成本。讓設計實現變得更加輕松高效。
Figma是一款全平臺通用的在線界面設計軟件。2019年UXTOOLS設計工具使用報告中顯示，Figma的使用率從12%增長至26%，在今年的Config Europe大會上Figma也預告了一些即將推出的功能迭代，其便捷高效的特性使其受到眾多設計師的追捧，正在逐步搶占sketch的用戶市場。
Figma與Sketch相比，亮點功能有哪些？
（1）Windows用戶也可隨心使用
與sketch只支持蘋果生態系統相比，Figma最大的好處是windows用戶也可以使用。他支持在Mac、windowsPC機甚至ipad上使用，理論上只要你能打開瀏覽器，就可以使用Figma愉快地設計。
（2）云端文件使用不卡頓，支持離線編輯
Figma創建的文件全部存儲在用戶的云端賬戶中，不占用本地內存。當文件過大時，sketch會出現卡頓現象，拖拽一個圖層都會變得很困難。而Figma對本地資源的消耗很小，大文件也幾乎不存在卡頓的情況。設計師們最關心的無網或若網情況下Figma的使用問題，Figma也給出了相應的解決方案。其支持離線編輯，離線時會自動把內容保存在本地，當網絡恢復后自動同步到云端。
（3）一鍵導入sketch文件
Figma可導入Sketch文件，大大降低了文件遷移成本。如果你想遷移全部工作到Figma是十分便捷快速的。
（4）更強大的組件功能
Figma和Sketch都擁有組件功能。當原始組件更改時，復制組件就會同步變化，在這點上二者是相同的。但Figma在組件邏輯上比Sketch更進一步，復制組件可以靈活處理與原始組件的同步關系。當設計師修改復制組件的樣式時，原始組件不受影響。此時二者的關聯邏輯仍然存在，當再次修改原始組件，復制組件仍然會同步變化。相比于Sketch，Figma把組件做的更加靈活限制更少。
同時Figma也在不斷優化其組件功能，在Config Europe大會上，Figma預告在今年11月會正式上線組件Variants功能。該功能是將一系列有關聯的內容生成一個Variants組件，在使用時可以直接通過識別出來的組件屬性改變組件樣式。其優勢在于使用組件時可以更輕松的切換所需組件的不同狀態,再也不需要像在sketch中一樣逐級尋找了。
如下圖中的按鈕組件，設計師可以將所有的按鈕狀態都列舉出來并按層級、顏色、狀態、大小命名。然后選中所有按鈕將其組成一個Variants組件。
（5）與代碼緊密結合
在使用sketch輸出設計稿時，設計師往往需要借助藍湖或zeplin輸出標注文件。Figma則與代碼緊密結合，本身自帶交付功能。 其文件中的每個模塊都有代碼模式，只需要將開發同學的賬號開通查看權限并發送鏈接，就可以直接在設計文件上獲取標注，也可自行導出所需的CSS、ios、Android樣式。
（6）一鍵恢復歷史版本
Figma會將設計師的每一次修改存成對應的歷史版本，當老板說想要某一版時，設計師只要恢復至老板想要的版本就ok啦。如果其他設計師誤刪除或錯誤修改文件，也有機會一鍵搶救。
（7）團隊協作
團隊協作功能可謂是Figma最大的核心競爭力。當幾位設計師需要維護同一份設計文件時，Figma可以支持幾位設計師同時在線修改，只要將文件鏈接分享給對方并給到相應權限（查看、編輯權限）即可。如果使用sketch，設計師一般會發送源文件給對方修改來達到協作效果。來回傳輸源文件不僅容易造成文件同步出錯，而且有一定的下載時間成本和存儲成本，相比之下Figma的優勢顯而易見。
除了設計師之間的協作，Figma也有效提高了設計評審的效率。與在工作群截設計圖標紅再描述相比，Figma的評論功能使得同事可以在設計文件中實時標注討論方案，提高了線上評審效率。
設計師受文件本地存儲的限制，在工作中把源文件給同事、設計稿給產品、切圖給開發、一項簡單的輸出對接任務變得瑣碎起來。Figma的出現打破了設計師長久以來的孤島工作狀態，設計師只需分享一個鏈接，同事可以修改設計稿、產品可以評審、開發可以查看界面模塊的屬性甚至查看代碼，大大提升了設計師的工作效率。如果您的團隊正在考慮更換設計工具,Figma是一個不錯的選擇。
Framer Web是一款在線動效設計軟件，于今年5月上線正式版，相比于Framer家族的前兩款產品Framer classic、Framer X, Framer Web突破了其以代碼為操作核心的理念，上線的新版本對設計師來說更加易用友好。
Framer Web的核心亮點是什么？
（1）網頁端全平臺可用
相比于Framer classic和Framer X作為本地客戶端軟件只支持Mac電腦，Framer Web是一款基于瀏覽器的在線設計工具，因此windows用戶也可以安心使用。同時個人版本免費，大大降低了設計師的使用成本。
（2）文件導入
Framer Web可通過import選項導入Sketch甚至Figma文件，可搭配Sketch和Figma快速制作高保真動效。
（3）輕松實現復雜動效
Framer一直主打利用代碼實現復雜可控的交互動效,。雖然可以保證輸出高質量的動效，但對于設計師們來講十分不友好，學習成本過高。此次發布的Framer Web為了解決這一問題，增加了適合設計師使用的可視化界面控制動效，設計師可以通過Magic Motion輕松實現復雜動效。
Magic Motion與principle、keynote的動畫實現原理類似。當你選擇目標元素添加了交互行為后，可以在Magic Motion中選擇一個過渡方式。只要兩個畫板中的元素名稱一致且在不同面板中擁有不同的形態，那么在畫板切換時該元素就會生成補間動畫發生相應變化。
同時Framer也新增了一些特別的交互控制實現一些特殊動效。比如自帶控件中的video，本身會有一些獨特的交互行為如End、Pause、Play（播放、停止、暫停），當進行這些操作時，會觸發相應的頁面變化。
（4）從設計到代碼
代碼一直是Framer的核心功能。Framer Web默認隱藏了代碼面板，設計師還是可以在設定了動效后，通過點擊頂部的handoff調出相應代碼。如果你是一個需要使用代碼的設計師，你仍然可以通過編輯代碼實現更復雜的動效。對于設計師來說，Framer提供的豐富動效已經可以滿足絕大部分訴求。絕大部分設計師已經無需再關注代碼部分，通過可視化界面完全可以做出很豐富的交互效果。而Framer Web最終的野心是希望設計師通過可視化界面設計出參數化的動效，可以直接導出相應的能交付生產端的代碼。目前Framer Web 已經可以實現導出相應動效代碼，但導出的效果仍有待完善，只是可以導出Transiton的參數而已。
（5）高效協作
Framer Web和Figma一樣，也非常注重團隊協作。設計師可以將鏈接分享對方進行查看、編輯，方便幾位設計師合作一個項目的情況。與需要反復傳輸文件相比，Framer Web省時省力，大大提高了設計師的工作效率。
小結
Framer Web放棄了攻占界面設計領域的策略，轉而和Figma官方達成積極的戰略合作，專注于做專業的動效設計軟件。因此Framer Web非常適合和Figma搭配使用。隨著產品策略的調整，相信在不久的將來Framer Web還會為設計師們提供更豐富、高效的動效設計功能，非常值得期待。
雖然云端化的設計工具正逐漸興起，但sketch仍然是目前較為主流的界面設計工具。因此接下來除了為大家介紹一些可以提升工作效率的Figma插件外，也會介紹一些好用的sketch插件，大家可以根據自己的需求自行嘗試體驗。
3.1 Design Lint（Figma）
設計師在做較大項目時可能會繪制幾十個頁面，難免會存在界面丟失元素的情況。Design Lint就能幫助你解決這一問題。它可以在你工作的時候進行實時更正，檢查不同界面直接的差異，包括顏色、字體、填充、半徑值等樣式差異并糾正錯誤。如果你做了一些修改，Desgn Lint也會根據你的修改實時更新。這款插件可以讓你更專注于設計本身，而不用浪費時間檢查不同頁面的元素是否使用正確，大大提高了設計師的工作效率。
https://www.figma.com/community/plugin/801195587640428208/Design-Lint
3.2 TinyImage Compressor（Figma）
設計師在做較大項目時導出的設計稿過大，存儲和傳播的成本高。用這款插件最多可以比Figma默認導出的文件小90%。同時支持導出多格式文件，導出多個圖片時還會自動生成一個zip壓縮包。
https://www.figma.com/community/plugin/789009980664807964/TinyImage-Compressorl
3.3 Design System Organizer（Figma）
這款插件幫助設計師在設計組件系統時管理組件系統。在設計組件系統時，會遇到如圖所示的：“Buttons-Small-Default...”的組織形式。該插件可以對組件進行管理、如分組、取消分組、移動、重命名。當重命名組后，該組中所有組件的名稱都會隨之改變，十分方便。
https://www.figma.com/community/plugin/802579985985331070/Design-System-Organizer
3.4 Juuust Handoff（Figma）
Figma本身自帶交付功能，但該插件的好處是生成的是離線文件，導出的文件可直接交付開發。開發同學可以不受網絡影響隨時查看間距、色值等信息。
https://www.figma.com/community/plugin/830051293378016221/Juuust-Handoff
3.5 Image Optim （Sketch）
設計師在導出設計稿時有時圖片過大，Image Optim可以在導出圖片時壓縮圖片，但不會影響圖片的質量。使用時需先安裝app再安裝Sketch插件。
https://oursketch.com/plugin/imageoptim
3.6 FontFinder（Sketch）
設計師在做較大項目時可能會繪制幾十個頁面，難免會存在字體使用錯誤的情況，Font FInder就能幫助你解決這一問題。它可以檢測出文件中存在的所有字體，你可以勾選想要更改的字體就可以一鍵將其改成目標字體。再也不需要在幾十個頁面中逐個尋找更改，大大提升了工作效率。
https://oursketch.com/plugin/font-finder
3.7 Craft（Sketch）
Craft插件十分強大，其中填充功能可以大大提升設計師的效率。在設計如列表頁時，設計師為了效果需要編輯不同的標題、圖片，都要冥思苦想編內容。Craft可以一鍵填充文字，如姓名、文章、日期、郵箱、地址、國家等。不同類別下面也設置了一些分類，方便設計師選擇。除此之外，Craft還可以一鍵填充真實不重復的照片,為設計師節省了很多時間。
https://www.invisionapp.com/craft
3.8 BaseAlign（Sketch）
Sketch自帶的對齊工具對形狀來說很好用，但對于文字來講一般是文字的文本框對齊，并不是文字本身對齊。BaseAlign插件使用的是文字自身的基線對齊，這樣就以保證不同大小的文字都可以對齊，設計效果更完美。
https://oursketch.com/plugin/basealign
XSHOW是一款由ISUX研發的高效設計協作平臺。XSHOW連接了產品經理、開發等各個不同工種，提高了設計資源輸出和分發效率。設計師將設計文件上傳到XSHOW，就可以將文件鏈接分享給產品經理、開發等同學。產品經理在手機小程序上就可以預覽方案，設計師每次更新的方案也可以直接預覽。開發同學可以直接查看標注和切片。同組設計師也可以直接下載源文件、甚至查看歷史迭代版本。
（1）可視化上傳文件
設計師先在Sketch中安裝XSHOW插件，可使用快捷鍵或直接點選需要上傳的文件畫板，接著直接選擇XSHOW中的“導出”，就可直觀快速的將文件上傳到XSHOW。
（2）記錄所有版本迭代，輕松找回第一稿
設計師每一次上傳的文件都會有云端記錄，設計師可以通過時間軸便捷找回歷史文件，輕松找回第一稿。
（3）靈活豐富的分享權限
對于項目分享的權限，XSHOW的設置更為靈活，除了支持私密、公開、指定人或團隊可見外，也可以控制權限的時效。
（1） 直觀了解團隊輸出,組建團隊展示能力空間
XSHOW除了個人使用外還可以組建團隊。項目管理者可以通過XSHOW直觀查看整個團隊的設計稿件輸出修改情況，同時可以組件團隊展示能力空間。
（2）方案變更及時知道
XSHOW有記錄所有版本迭代的能力，因此作為項目管理者可以及時知道團隊成員對方案的修改變更，解決了團隊內部有時同步不及時的問題。
（3）便捷組建項目和管理團隊成員
項目管理者可以在XSHOW便捷組建項目和管理團隊成員，大大提高了項目管理者的管理效率。
（1）多端查看更方便
XSHOW支持web和小程序兩種沉浸式查看方案的方式。在小程序上查看方案方便合作方直觀感受方案在手機上的真實效果，如果合作方身邊沒有電腦也可以及時查看稿件。
2. 查看歷史變更
XSHOW的歷史變更功能可以使合作方也及時了解方案的變更情況，大大提升了信息同步效率。
（1）便捷查看標注與管理切片
設計師將文件上傳到XSHOW后，只要將鏈接分享給開發，開發就可以直接在線查看文件標注、下載切片。
作者：騰訊ISUX 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
按住option單擊圖層縮略圖，視圖上會只顯示該圖層內容（暫時性隱藏其他圖層，進行其他操作依然會顯現出來）
在AD中同樣也是有蒙版功能的。例如下圖，這三個字實在是太霸氣了，我們想變慫一點，那該怎么辦呢？在右側圖層面板中，按住矩形層縮略圖，拖入文字層的縮略圖與圖層名稱之間（也可以看作是縮略圖層），即可完成蒙版操作。
但是要想調整文字大小，但是依然只顯示矩形所在區域范圍的內容呢？那么我們需要勾選上方工具欄中的【鎖定子項（lock children）】按鈕，在進行調整就OK了。
歷史記錄工具包含一個定位滑塊（position），拖動滑塊，可快速撤銷與復原，效率很高。同時也可以點擊列表的特定步驟，點擊后就會回到該步驟操作。
在文件菜單欄中有個【隨文檔保存歷史記錄（save history with document）】，勾選后，保存的文件將保留歷史記錄。當你在歷史記錄中選中曾經的特定操作的情況下，進行一步新操作，則歷史記錄會產生一個小分支符號，分支符號代表不同的未來。例如我新建一個黃色矩形，然后將顏色調整為藍綠色漸變。然后通過點擊歷史記錄，回到新建黃色矩形的步驟，然后把顏色改成藍紫色漸變，這樣在填充步驟就會出現分支符號，通過點擊分支可快速切換至藍綠色漸變，可用于嘗試性創作，并通過同時存在的兩種結局來進行對比。
復制粘貼和復制圖層操作與PS完全一致，不同的是power duplicate部分。首先，我們在畫布上繪制一個矩形，然后按command J復制出一個矩形副本，將矩形副本移動到矩形的左邊，然后縮放它，操作完成后按command J，在矩形副本的左邊就會出現一個比矩形副本更小的矩形副本2，副本2與矩形副本的距離與矩形副本與矩形的距離相同。好，我們回到第一步，繪制一個矩形。然后按住command 拖動矩形，則會出現矩形副本，然后移動矩形副本后，按command J，同樣可以達到上面的效果，我們把這個操作叫做power duplicate，也就是快速副本。PS也有同樣的功能，但是操作邏輯有些許不同，AD的更為清晰一點。
在AD中，有兩個圖層的概念，一個叫做圖層（就是普通圖層，可以包括像素圖層和矢量圖形圖層），另一個叫做像素圖層。如果選中圖層的狀態下添加像素圖層，則該像素圖層會默認放置在該圖層下，普通圖層與組的概念類似。如果選中畫板層的情況下添加像素圖層，則像素圖層自動創建在畫板層，與其他圖層同級。
2）三大角色模塊（personas）
在AD中有矢量部分、像素部分、導出部分的區別。不同部分的工具區是不一樣的。在矢量部分下，包括拖動矩形與鋼筆繪制形狀，所創建的都是矢量圖層；像素部分創建出來的都是像素圖層，這兩者是不一樣的，同時也是AD與AI的重要區別之一。
1）內置網格
與AI需要自己手動繪制等距視圖網格線不同，在AD中內置了一套優秀的網格系統，可以幫助我們快速的搭建出2.5D插畫需要的網格線，并且支持角度變換。在調節角度時可以預覽網格線的具體效果，就這一點就足以讓2.5D插畫作者扔掉AI轉投AD。
2）等軸測工具（isometric）
isometric工具可以幫助我們快速繪制等距視圖插畫。我們可以想象一下在AI中，好不容易利用旋轉復制人肉做出了參考線，還需要用鋼筆工具去點擊參考線的交點來繪制插畫的一個個立體塊面。在AD中這項繁復的工作將不復存在。通過等軸測工具，我們將告別手動對齊這種令人頭大的工作。
等軸測工具功能由兩部分構成，上方的三個立方體表示參考線當前描述的是哪個平面，并且可以通過這三個立方體來快速切換當前平面（current plane）。
在下方平面編輯選項部分，有這樣幾個功能項。
在平面中編輯（重點）：在該選項選中的狀態下，我們通過圖形繪制工具在畫布上直接就能拖動出符合參考線角度的圖形，特別是在繪制圓形時簡直不要太方便。
適應平面（重點）：在畫布中我們通過矩形工具繪制了一個正常的矩形，橫平豎直那種，然后點擊【適應平面（Fit to plane）】，只聽得啪的一聲，矩形就被啪到參考線上了，變成等軸視圖的一個部分。
在平面中翻轉/旋轉：這個沒什么說的，就是普通的翻轉旋轉操作，變成了等距視圖的翻轉旋轉操作。
相當于UI組件庫，Sketch與XD都有同樣的功能。
視圖（view）-studio-符號(symbols)，將圖形拖進去，就形成了symbols。
如果想要單獨修改某一個符號，則需要點擊符號面板右上方的【同步（sync）】來取消全局修改，然后單獨修改某一個符號。修改后，該符號將脫離符號控制，不受符號修改影響。
選擇節點工具[A]，去調整一條曲線的錨點，可以通過上方面板中的吸附（snapping）來選擇各種吸附方式。
視圖-參考線管理器，可打開參考線面板，已存在的參考線都會在上面顯示，同時可以點擊參考線的數值來修改參考線的具體位置。
因為需要時間消化的原因，我會將文章分為幾部分整理，在此階段如果有朋友感興趣可以去Affinity官網下載試用，同時結合本文上方的鏈接（官網的教學視頻被異次元封印了）可以更好地了解AD。再次提一下，一定要看官方教學視頻，不要想憑借著自己PS、AI的基礎去直接上手，AD真的不一樣。
AffinityDesigner（下文都用AD表示）是Affinity系列中偏向于矢量繪制與界面設計功能的工具，其并沒有能夠準確對標的競品，如果非要對標的話，可能就是Adobe Illustrator和Sketch了。Affinity系列中的另外兩款作品Affinity Photo（偏向圖像處理，對標Adobe Photoshop）與Affinity Publisher（印刷排版，對標Adobe InDesign）也是非常有潛力的作品，不過目前這兩款還沒有辦法完全替代掉Adobe家族的作品。
但是AD，我覺得是可以完全有實力跟Adobe Illustrator一較高下。在用過Sketch之前，我從未感覺用PS做UI有多低效，同樣，在了解AD之前，我也從來沒感覺Ai有多難以忍受，頂多有些地方感覺反人類罷了。但是經過兩三天的了解與試用，我立即就在App Store下單入正并拋棄了AI。
因為AD，真的有點東西。
作者：NOLeon_墨刃 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
『 寫在之前 』
最近在閱讀《佐藤可士和的超整理術》，書里講述的是作者通過對空間、信息和思考的整理，來解決復雜問題，讓工作變得高效。生活和工作離不開“整理”，好的設計也要從“整理”開始，組件化設計思維，也可以看做一種“整理術”。本篇文章將與大家探討如何運用組件化設計思維去“整理”項目，并發揮更高的價值。
文章分為兩個部分：
1. 組件化設計思維
2. 滴滴表單優化項目的沉淀總結：組件化思維的推動和執行
『 組件化設計思維 』
1. 什么是組件化設計思維
我們知道“分子是由原子組成的，分子分成原子，原子也可以重新組合成新的分子”。一個界面是由獨立的分子組件搭建而成，分子組件由原子元件構成，這些原子可通過不同的組合方式，組成新分子組件，繼而重組構成新的界面。
組件化設計思維是通過對功能及視覺表達中元素的拆解、歸納、重組，并基于可被復用的目的，形成規范化的組件，通過多維度組合來構建整個設計方案，從而提升設計效能。
2. 滴滴運用組件化帶來的收益
隨著滴滴業務的飛速增長，組件化為滴滴帶來了一致的設計語言和工作效率上的提升，因此滴滴在組件化道路上的決心愈發堅定。選擇以組件化展開設計實踐，帶來的變化與收益主要體現在公司、項目和個人三個維度：
2.1 公司維度
一款產品的更新迭代是依附于產品、設計、開發、測試等多個團隊協作進行的，隨著產品功能的完善，背后支撐的團隊也在不斷壯大。以運用組件化推動的產品設計與迭代，可以使團隊增效，降低成本。設計師可以只用幾個小時設計出幾十個頁面，開發人員也可以通過查看prd文檔，直接調取組件代碼完成需求，使得我們的生產力產生質的飛躍。在保證數量和質量的前提下，原本200人的團隊，可以縮減為100人，為公司節省了人力成本。組件化能讓公司以更快的速度和更低的成本開發產品，也能對產品想法快速驗證。
2.2 項目維度
● 從設計方案上
對于一些適用組件化的產品形態，我們可以運用組件化思維將其“化整為零”，對需求有更規范的統籌，理清框架，建立一個可復用的組件結構并持續優化，以保證交互和視覺的一致性。
● 從工作流程上
傳統的設計流程大多是同屬性多角色并行的，從需求到設計，從設計到前端的工作流程會涉及到不同的設計師及不同的前端工程師。相同角色間無交集、缺乏溝通會導致大量重復性工作，增加項目周期和管理難度。
而將組件化思維貫穿其中的設計流程，帶來了工作流程上的創新。我們建立了一套設計組件庫來提高協同效率，大量需求均通過需求評估來判斷是否需要新增或復用組件，對于組件庫里已有的組件，設計師可直接調取，組合構建出新頁面。對于新增組件則經過常規設計流程后，歸納沉淀并由組件委員會審核通過后方可入庫，以提升后續組件擴展能力，助力產品快速更新迭代。
2.3 個人維度
利用組件化，設計師可以從低價值的機械式工作中解放出來，參與到設計創新中去，發揮更高的設計價值。
另外，在工作中運用組件化設計思維有助于設計師更完整的思考，培養全局思維的能力；也有助于我們專注于細節，提供個性化的創新方法，產出適應不同場景的最優方案。
下面用一款優秀案例來解析組件化設計思維
『 滴滴表單優化項目沉淀 』
1. 項目背景
1.1 為什么要優化表單
滴滴出行5.0版本從2016年11月上線至今，隨著用戶體驗痛點不斷增加，業務的需求逐漸多元化，我們希望對表單進行一次統一的整合梳理和升級。為未來更多業務發展提供快速支撐和拓展，同時也注重用戶體驗的提升。
滴滴出行作為出行服務類應用，精準的發單表達是觸達用戶進入服務流程的關鍵。每個業務在確認呼叫的節點上擁有獨立的入口并滿足不同的需求（如下圖），確認呼叫頁表單（以下簡稱表單）作為最重要的多功能、多信息載體，需要高效、精準的表達和流暢的體驗。
1.2 跨業務共建
滴滴出行是涵蓋出租車、專車、快車等多項業務在內的一站式出行平臺，我們希望在保證全平臺統一化的基礎上，與業務尋求一種相輔相成的關系，并且在保證規范化輸出的同時，展現出業務特色。在需求階段，確定各業務接口人，收集需求，溝通評審促成各方達成一致目標。在方案執行階段，平臺設計師產出方案，與各業務線溝通并優化，1～2次循環后方案評審到最終確立。開發和測試階段，各方驗收通過后發版上線，上線后平臺沉淀設計規范，完善組件庫，跟蹤反饋，推動體驗優化形成工作流程閉環。
2. 確立設計目標
項目初始，平臺設計師需從業務訴求及用戶訴求兩方面著手，在收集到兩方需求后，對其進行歸類整理并定義優先級，從而確立設計目標，制定出具體的設計策略，提煉交互框架，再深入到細節的設計。
在表單項目中，基于滿足業務未來多元化及提升用戶體驗的需求，輸出目標為：
1）兼容各業務需求，建立具有可承載多種業務共性及特性的組件能力框架；
2）主要信息及次要信息的合理化分布；
3）傳遞真實感及專業感，拉近用戶體驗共鳴。
3. 以組件化設計思維展開設計探索
有了明確的目標后，根據目標制定相應的方向策略，也便于我們在后續的設計工作中尋找發力點。和業務溝通后，明確整體方案的設計基調聚焦在“擴展性”“統一性”“邏輯性”“個性”四個方向上：
擴展性——組件化視覺表達，能夠隨著滴滴多場景、多業務需求的變化進行延展和擴充；
統一性——各業務信息歸類統一、簡化；
邏輯性——信息層級清晰，增強主焦點認知，次要信息弱化；
個性——設計個性化表達
3.1 以組件化思維進行框架探索
在方案構思階段，我們是以組件化設計的思維方式先去全面的思考并分析問題，再進行拆解分類，最后歸納重組。
● 全面多維度分析問題
框架層：針對快、專、豪的確認呼叫表單的關鍵場景進行框架分析
因為業務不同，場景不同，確認呼叫這個流程觸點在各業務中是具有共性和差異性的。我們重新梳理了確認呼叫頁表單各業務的功能點（如下圖），可見各業務表單雖有一致模塊，但信息內容十分繁雜，層級區分無規律可循；操作區位置不統一，樣式各異；框架的兼容性及擴展性不高。
表現層：在視覺表現層面上，也暴露了很多問題，如：不同業務的車型選擇分別有各自的展示方式；價格區選中項的感知較弱且各業務的樣式不統一；價格小數點展示位數不一致等等。
新增業務特性訴求：新的框架還需滿足業務特性的訴求（如下圖）。
● 拆解并簡化
如何讓新的框架既能滿足越來越多的業務類型，保證體驗的統一，又能體現出業務特性，平衡取舍促進產品更新迭代呢？
我們回歸到本質，從以下四個方面對框架進行重新構思：
刪除——去掉無用的功能點
組織——根據類別將這些功能點分解后重新劃分成組
隱藏——突出主焦點的認知并隱藏次要信息
抽取——抽取共性，對比差異性
綜上，即對框架進行簡化，保證框架可靈活適配具有業務共性與特性的組件。
● 重組
簡化后的框架幾乎可以覆蓋所有必要功能點，有很強的適應能力和擴充能力，可以輕松應對未來多元化的出行服務及場景。
在共性中尋找差異性：全局操作、車型與價格、發單按鈕是業務共性部分，除車型／價格區和發單按鈕外，其余均可顯示或隱藏，可根據業務特點靈活配置。
在差異中尋找共性：車型與價格區所包含的服務選擇與附屬操作是業務差異部分，快車需要在一個卡片中呈現三個車型比價、需要有附屬操作，專豪則需要強調車型圖片的露出和服務配置。我們要找一個平衡去把這些差異點串聯起來，確保用戶擁有同樣的感受，不僅是交互方式、動效流轉，也需要關注同一層級信息的視覺表達。
3.2從框架層到表現層——從整體到細節的設計
● 視覺嘗試探索
在交互框架明確后，便進入視覺設計階段。平臺設計師基于統一的的框架進行視覺風格探索，兼顧擴展性和邏輯性，同時不能忽視業務特性，從而迸發更加出彩的設計想法。設計師是界面的規劃師，也是品質的把控者，大到頁面布局、組件的組合方式、顏色定義，小到按鈕在空間布局上的占比是否合理都要面面俱到。在這個過程中，不斷打磨微調，進一步細化并且有針對性的進行動效設計，以呈現更完美的方案。
● 組件化設計的細節打磨
在方案確定的同時，將模塊再次拆分成組件，組件包含不同類型、不同狀態的基本元件，進行深入打磨，從而實現與設計目標的高度吻合。
● 根據組件構建頁面
表單運用了組件化設計方法，建立了可承載業務共性與特性的框架。通過設計評審敲定最終方案后，提煉規范，設定組件標準，提取組合用法以覆蓋各業務場景。由于業務線設計師更了解業務的需求根源及業務流程，所以由其枚舉場景并輸出業務遍歷圖。
平臺與業務共建的過程，可以更好的調動業務線設計師的積極性和參與度，也能從業務的角度驗證組件的擴展能力；“共建”也能更快速的將組件規范推動落地，實現組件的復用、協調與升級，是快速搭建頁面、促進產品快速迭代的重要因素。
4. 項目反思
表單在 2017年10月19日 隨乘客端 V5.1.16 發布，我們通過數據分析來驗證表單優化的合理性。（以ios為例，分析上線一周后10月25日-10月31日的發單率和發單時長數據）
4.1 體驗量化
- 新表單較老表單，發單量增加，發單率提升14.83%；
- 新表單較老表單的平均發單時間降低了2%
數據分析表明，表單的設計優化是成功的，是設計師運用組件化思維在自驅項目中的每一個環節發揮高價值的體現。
4.2 快速落地
“共建”和“組件化”是促成表單項目在短時間內達成落地目標的關鍵因素，平臺與業務共建的工作方法也擴展運用到了更多項目中，是平臺與業務之間迅速確立方案、搭建設計規范、推動體驗優化和迭代的最高效路徑。
4.3 設計研發一體化
不僅如此，表單優化項目取得成功，離不開“組件化設計思維”在設計全流程上的應用。我們堅信，滴滴將在組件化道路上繼續前行，然而這條路任重而道遠。就現狀而言，我們的兩個組件庫——設計庫和開發庫仍需要分別維護，且設計和開發在溝通時成本較高。這使得我們需要創建一個能夠同時面向設計師和開發人員的共享組件庫，實現設計和研發一體化，讓設計師面向開發，讓開發貼近設計，減少設計及開發人員的額外工作量。我們設想，在設計和研發一體化的生態系統下，不論設計師或開發人員，通過搜索名稱就可以從共享組件庫中調取相應的組件進行設計，這些組件都有一對一的設計和開發數據，這會讓工作變得十分高效。
在滴滴的未來，設計研發一體化是可以將代碼實時渲染到設計軟件中審閱設計的生態系統，且并不遙遠。
作者：滴滴出行CDS 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
本文從What/How兩個部分循序漸進地闡述如何輸出清晰有效的設計方案，希望給大家一些建立系統性設計思路的啟發，幫助大家更好地輸出設計方案，為決策設計方案提供更有力的參考。
WHAT: 什么是清晰有效的設計方案
首先我們需要對清晰有效有一個整體的認知。所謂清晰，從字面上理解是指看得很清楚、明朗，設計層面來說就是方案能做到方向明確，方案明了。而有效字面上指的是有效果，有效力，從設計層面來說就是輸出的方案可以解決存在的問題，能達到設定的目標以及可以切實落地。
清晰和有效的考量維度是不一樣的：清晰更多是針對設計這一環節，在于不同方向/方案的差異度和側重點；而有效則更多需要聯合設計上下游（用戶/產品/開發）。對于優秀的設計方案來說兩者相輔相成，缺一不可。
接下來我們來詳細拆解什么是清晰和有效。
1.清晰 - 方向明確，方案明了
——————————
很多設計師對方案輸出的數量有個認知誤區，認為設計方案越多越好，可以給老板、合作方更多選擇，往往不假思索地用大量的時間輸出所有可能的方案，并拿出來讓別人評審，認為把所有的可能性列出來就不會錯，這正是對方案清晰性缺乏認知的表現。
在設計最初期，不要著急動手輸出界面，先結合目標（近期目標和遠期目標）綜合考量，系統性地思考有哪些途徑達到目標，確保所有實現手段的方式都有考慮到，并且可以整合途徑一致、方向近似的方案。對差異性不大的方案進行合并劃歸，才能在合理范圍內整理出具有不同思考維度與目標側重的提案方向。前期規劃思考的深度決定了方案的廣度，只有清晰的思考方案才會創造無限的可能。
用案例來讓大家對清晰這個定義有更具象的認知：
相冊小程序Logo這個需求的目標是需要突出相冊元素，并強化品牌識別度。
這是設計師輸出的Logo提案初稿，雖然輸出了28個方案之多，但沒有設計思路的規劃，想到哪就畫到哪，很多方案是重復的，還有一些方案在設計初期就應該Pass，設計的整個細致度也不夠充分。
于是設計師對設計方向重新進行規劃整合，按照輸出形式重新規劃了分類。
按照分類篩選出四個可以繼續優化的方案。并且拿著四個不同方向的方案去匯報。最終確定D方案。
我們重新回顧一下這個需求，28個方案 VS 4個方案，設計師需要的不是盡可能輸出多方案的能力，方案越多可能表示你在錯誤的道路上越走越遠，需要的是通過前期系統的思考能一次把方案做對的能力。
2. 有效 - 解決存在的問題、能達到設定的目標、可以落地的方案
——————————
很多設計師拿到產品需求會立即動手，認為滿足了產品這個角色提的需求便是好的設計輸出，或者把方案出的天花亂墜，當產品或者其他角色提出不同意見就會覺得他們不懂什么是好的設計。這些現象大多是因為設計師在項目前期沒有正確思考和評估這個需求本身需要解決什么問題、方案能否達到團隊共同設定的目標，以及方案是否能平穩落地這三個維度。
解決存在的問題—從問題出發
我們在實際輸出方案的時候，不能從產品經理的需求文檔開始，而是要把考量維度更前置，從項目現有的問題出發。這個問題的搜集包括外部用戶的反饋，內部團隊的聲音，但需要注意的是用戶的反饋不一定是真正的問題，需要做到篩選和甄別。比如新發布一個版本可能會碰到的一個情況是很多用戶打一星反饋說界面太難看太丑，這種屬于用戶感受，我們可以再深挖一下用戶覺得丑的原因，是不是改變了太多用戶習慣，但又沒有給用戶真的帶來更好的體驗和更多的收益。
能達到設定的目標—從目標啟動
問題還需要結合目標一起考慮，解決問題的思路并不完全等同于目標，目標是大家一起制定的未來產品的發展方向。比如我們新發布的版本里面新加了一個Tab改變了用戶習慣，大批用戶投訴，但如果這個新Tab是符合我們目標的，我們不能為了短期解決用戶投訴把這個Tab下掉，應該繼續觀察用戶在這個使用過程中碰到了什么問題，解決實際操作中碰到的問題。
用案例來讓大家對問題和目標有更具象的認知：
我們需要優化QQ空間的為空界面，首先我們梳理下現網存在的問題，風格整體比較老舊，很多圖形表意不明確，新出模塊就會有新風格，所以存在很多不統一的地方，空間整個業務有一百多個為空界面，導致開發也不清楚到底應該怎么用，用什么，所以很長一段時間是處于亂用的狀態。
接著我們梳理了這次優化的目標：
1 界面統一，用戶能對表意感知明確（解決現網問題）
2 強化QQ的品牌
3 做成基礎組件，保證復用性
4 低成本開發
確定了優化目標以后我們沒有馬上急于嘗試風格，而是先遍歷了所有為空異常頁，整合了所有場景最后梳理出八種情況，這八種情況可以覆蓋所有的為空場景，梳理整合場景是目標1、3、4能實現的前提。
然后我們基于這八個場景來輸出設計風格，要低成本開發，所以這里沒有考慮加動畫，用企鵝剪影結合具體的場景來表意，不僅強化了品牌，也能做到表意清晰明確。圖形定好以后我們馬上也輸出了規范，Push給對接的開發同學方便調用。
在輸出方案過程中，始終都要緊緊貼合問題和目標，避免無效設計。
能落地的方案—技術可以實現
在輸出設計方案的時候，設計師需要考慮到開發成本是什么，需要消耗多少資源去實現這個需求，最低成本達到目標的路徑是什么。如果有些方案開發成本很大卻收益價值卻很小，我們就需要斟酌它是否仍有執行的必要。避免一味的追求設計效果不去對齊成本、人力，最后也只會是設計的自嗨。
用案例來讓大家對清晰這個定義有更具象的認知：
產品提了好友生日推送禮物的需求，目標是想用生日這一比較溫情的場景去設計專門的祝福頁，用來提升寫操作和大盤活躍。我們需要設計送給用戶的禮物卡片，從實現手段的難易規劃了三個方向：
A 手勢交互但開發難度大: 3D手勢交互動畫
B 趣味動圖且開發成本適中：局部小動畫
C 靜態但開發成本低：全靜態視覺，復用已有開發流程
最后團隊對齊了人力成本，決定采用方案C，把設計精力放在本身卡片的表現上。
HOW: 如何輸出清晰有效的設計方案
那如何才能輸出清晰有效的設計方案呢？設計方案歸根結底是思維方式的具體體現，輸出清晰有效的設計方案最核心的點在于體系化的思考方式，我總結了一下幾點：
1 拓寬邊界
——————————
拓寬邊界需要設計師站在更高的視角和有更廣的視野，把設計從表現和執行抽離往前后延展，在整個設計過程中往前去挖掘需求和規劃產品結構，往后做到把控和沉淀，能站在上下游各維度去Review整個項目，只有站在更全局的視角審視，才能跳出片面設計的維度。
2 轉換視角
——————————
從不同的視角看待問題，學會拆解問題和解決問題，從產品/開發不同的角度來全盤看整個產品，分析這個需求的投入產出比是不是足夠，是不是能達到目標（包括設計目標和產品目標）。設計、產品、開發從來都不是對立的，都是不同角色為了整個產品發力。
舉個例子，產品同學覺得輸出的方案不好看，是在用感性表達，我們可以嘗試繼續拆解不好看背后的原因，比如是不是核心內容不夠突出、擔心按鈕轉化率等，一開始就抱著產品不懂設計這種想法是沒有辦法解決問題的。
還有一個就是用戶同理心，很多時候我們不能只站在設計師和產品的角度看待用戶反饋的問題，比如新功能內部團隊覺得很厲害，但實際門檻太高，用戶根本不知道怎么操作，而我們長期體驗這個產品反而忽略了產品的易用性。
3 結構思維
——————————
我們在啟動項目的時候，不要單點去看要在某個頁面要做什么改動，而是從問題入手，和產品同學對齊好目標，結合設計理念，最后找到發力點在哪里，循序漸進，這樣很大程度上能避免項目的反復，對設計流程的準確把控也是輸出優秀設計方案的基礎。
舉一個日常生活的例子幫助大家理解，比如我的問題是長得丑，我的目標是要變得更年輕漂亮，我的理念就是改善體型和優化五官，最后找到具體的發力點比如晚上不吃晚飯，去美容院打美容針、學會怎么化妝等。
4 認知創新
——————————
有些新設計師對設計創新的認知還停留在是去做一些創造世界、改變世界的事情，認為創新就是把原項目進行翻天覆地的改變，初入職場會覺得負責的業務和項目都很小，沒有什么意思，其實創新的維度有很多，包括設計工作流程的優化、還有從小的問題點著手去深挖和思考，找到合適的解決方案并打磨細節給用戶創造驚喜。擺正心態才能做對事做好事。
5 及時復盤
——————————
完成項目以后需要不斷的總結方法，遇到的問題，除了技法層面的提升，更重要的還包括思考層面的提升。學會去總結之前踩過的坑，避免重復性的問題，比如你的輸出一直存在層級不清晰的問題，那么你需要關注后續輸出的界面里大模塊之間以及元素之間的層次是否還存在這個問題?？梢苑稿e誤，但是盡量避免總是犯同樣的錯誤，這樣才能加速成長的腳步。
作者：騰訊ISUX 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
前人早已總結了讓動畫生動的技巧，早在1981年由兩位迪士尼動畫師所撰寫的《The illusion of life:Disney Animation》一書就提到了動畫的12項基本法則，該法則也是受用至今。法則雖是針對傳統動畫而制定，但對于我們日常需求中所接觸的動效/動畫需求也同樣受用。
1）動畫原則介紹
2）結合案例應用原則
3）流程方法論沉淀
4）結語
擠壓與伸展是我們最常用的運動技巧。使用擠壓與拉伸來強調物體的質感、重量、速度。擠壓和拉伸會給予物體運動時具備質量感和體積感的錯覺。例如當一個皮球正在進行下落運動，在運動過程中讓皮球體積產生一定拉伸來表現它的速度感，皮球落地后則因力的作用產生擠壓變形。
擠壓與伸展的幅度影響著物體的質感、重量。設計師們可根據物體的質感去決定擠壓伸展的幅度。動畫雖存在夸張性，但對于物體擠壓拉伸的體積盡可能保持視覺統一，避免較大的體積誤差導致運動的突兀。
預期動作可告知觀者物體運動即將發生，增強觀者的場景代入感，使運動更加生動真實。如果我們去除前期的預備過程物體所呈現的運動感知像是突然被前方磁鐵所吸引。
預期動作可對觀者視線進行引導，設計師可以根據預期動作所引導的方向來銜接鏡頭/場景的轉場。反之預期動作也可以用來欺騙觀眾，當用戶預期與畫面不符時也可增加動畫舞臺的趣味性。
每個角色/運動元素在運動過程中都會流露出獨特的態度和氣質。針對不同的角色/元素的運動特性運用不同的運鏡、表演技巧、時間節奏以及舞臺的編排技巧，傳遞貼合角色/元素氣質的動態感知。
在現今動畫工作流程中，考慮到流程效率及技巧利弊，我們可以使用兩者相互結合的方式。關鍵動作描述的是設計師們熟知的關鍵幀動畫的方式（類似AE）。在動畫設計前進行基本運動的關鍵動作提煉，再進行細化，一層層的遞進。底層的關鍵運動越完善，在后續添加細節時才不會耗費大量時間調整。而對于持續動作（逐幀動畫）的技巧，我們可以利用它處理一些復雜效果例如（涉及到運動空間的變化、形狀上的靈動變化等）。
逐幀動畫。
優點：自由且流暢的動態。
缺點：難以把控時間長短、體積大小。
關鍵幀動畫。
優點：清晰、可靠、規范。
缺點：修改成本略高。
跟隨動作指的是元素運動結束后不會立刻停止，會因為質量、慣性等因素，元素會慢慢進行振動減幅的過程。重疊動作則指的是運動不會同一時間發生，主體與附屬部分的運動會因質感、外力等因素產生不同的速率。
當一個人跳躍的時候，自身的衣帽等附屬物也會隨之擺動。跟隨&重疊動作反應著運動的力量感和速度感，利用好跟隨與重疊動作，可以更好地表現角色/元素主要動作/運動。當主要動作/運動力量大、速度快的時候，跟隨與重疊的物體運動幅度大，反之則運動幅度小。
真實世界的運動遵循著緩動運動的規律，而并非勻速運動。根據物體運動情況、動態質感去編排元素合適的運動速率。關于運動的速率編排相關內容，可以看看過往的文章-《動效的質感》。
仔細觀察可發現自然界中的運動多為弧形運動的組合，而勻速運動只存在于機械運動中。
在人物運動過程中使用弧形運動增添角色動畫表現力。比如當人物抬頭或轉頭時，通過弧度的變化映射人物的情感，是充滿好奇心的還是沮喪的。
在交互動效中，弧形運動路徑會給予觀者運動表現力較年輕活潑的感知隱喻。設計師可根據品牌調性及產品屬性去選擇運動路徑類型。
當主體在運動時，設計師可通過附屬物運動來輔助表達主體運動氣質。比如人物敲門時，捏緊拳頭的敲（代表生氣）與翹起蘭花指敲的（代表精致）區別。
在上篇文章其實我們有提到影響動效質感的原因之一就是時間，控制好物體的運動時間也是表現良好動畫節奏感的關鍵。
使用「時間偏差」的技巧，可以讓你的動畫更加生動。因為受力、質感等因素影響，主體運動時附屬部分的運動不會同時發生。比如當人物正在打哈欠時，首先是從嘴巴發力，再擴散至五官眉毛。
為保持動效的連續性以及營造自然流暢的交互體驗，適當的使用時間偏差，可避免動效元素變化過程出現空檔期，提升信息傳遞效率減少認知負荷。
通過夸張手法增添動畫表現張力，加強運動元素的吸引力令動畫更有代入感和戲劇性。
動畫設計時可通過營造鏡頭透視感、景深感模擬真實的空間感打破二維扁平視覺效果，提升畫面表現力。
一部好的動畫作品一定會有令人吸引的人事物，比如動態氣質或視覺風格等它們都能很好的吸引觀眾。除此之外，如何講好一個故事，通過趣味幽默的故事表達手法也可以增添動畫的吸引力。
通過對十二大基本原則的學習，我將技巧分為以下兩大類：設計技巧和表演技巧。
設計技巧：動畫設計的技法，增添動畫細節令動畫表現更生動自然。
表演技巧：舞臺表演的技巧，提升動畫舞臺全局的表現力。
接下來我們結合上述所提及的動畫原則，根據實際案例進行結合應用。一起來探討下當接到動效設計需求時，我們需要思考哪些點？才能使我們的動效表現力更上一層樓。
假設在項目中我們需要對設計元素（豬豬存錢罐）添加動效以提示用戶已省錢成功的情感氛圍。設計前我們先來分析下元素以什么動態/動作表現會更貼合元素性格。考慮到豬豬的可愛屬性，采用了跳躍的運動方式。并擬定了跳躍后天上落下金幣的動畫腳本。
將腳本確定后，我們在腦海里已經有大概的運動畫面。但在進入動效設計前，還需要明確在動畫中使用哪些動畫原則來提升動畫生動性。
在添加動畫細節前，我分享下在項目中經常用到的兩個技巧。
實現擠壓與伸展的方式有很多種，最常見的是直接改變物體的縮放比例或形狀路徑來實現。但在設計項目中我們往往會遇到非矢量的設計元素，利用xxx可實現圖層的彎曲扭曲等變形效果。
質地堅硬的物體受外力的影響較小，質地柔軟的物體受外力的影響較大。而像豬豬這類柔軟的物體在恢復靜止吋肉肉會有一個跟隨&重疊動作（抖動）。在處理這類抖動的效果除了使用常規的彈性表達式外還可配合使用AE的 CC bend it 效果增加形變細節令物體運動更為生動自然。
當我們去除這些動畫原則后，再去作對比明顯的感知差異就出來了。
根據過往項目經驗，我總結了動效/動畫設計的流程思路。從業務目標的分析到動畫腳本的確定，層層遞進。前期的目標和框架確定后，之后進行動畫原則的梳理及最后的動效輸出。設計師們不妨在項目中嘗試上述的流程思路及原則技巧，將自身動畫的表現力提升一個檔次。
隨著動畫/動效的落地方式愈來愈完善，像Lottie、svga等新型的動畫落地形式所帶來的高品質畫面呈現。設計師們不能滿足于動畫僅僅只是動那么簡單，如何去塑造生動的動畫形象還有不少我們需要考慮的細節。恰好前人總結了相應的原則技巧，幫助我們站在巨人的肩膀上看得更遠。除《The illusion of life:Disney Animation》外，近期也在閱覽《動畫師的生存手冊》里面涵蓋了不少關于角色動畫的運動技巧及細節。其中部分技巧并不局限于角色動畫的設計中，下期文章我將分享關于角色動畫的知識沉淀內容。
作者：Fiasc1 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
動效的質感主要由時間、速率、運動理念、運動方式等來表現。動效設計不僅僅只是動而已，作為設計師需要洞察更多的動效細節。通過對動效細節的把控去營造自然真實的動態體驗，并根據產品品牌特性去建立其動效理念。
速率影響著運動的質感。讓我們做一下對比實驗，在相同時間以及運動效果下，只改變運動元素的速率曲線并觀察它們的變化。兩元素為一組，一組速率曲線較陡峭而另一組則偏平緩。通過改變速率曲線，元素在下落運動中所呈現的物體質量也有明顯差異。運動曲線較陡峭且速率對比較大則會導致元素的質量更重沖擊感更強，反之較平緩的曲線元素運動則較為輕盈。
時間的變化感知是較為直觀的，我們可以通過調節運動時間的長短來表現物體的運動性格。時間越少，運動越快速干脆且可感知的運動細節更少。時間越多，則反之。
不同的運動理念會給物體帶來不同的質感表現。舉個例子一個活潑有活力的物體在運動的表現上會較為柔軟Q彈，就需要通過回彈擠壓來體現自身的質感。而運動理念生硬的物體，則相反。運動理念與產品品牌調性有關，根據品牌特性我們可提取一些適合的運動理念或在自然理念中吸取靈感，將其應用在自身的產品上可以更好的體現品牌價值。
運動方式依附于運動理念，是產品運動質感的一種表達方式。例如運動路徑是曲線還是直線？空間的景深程度是如何的？可以明確感受到空間感嗎？整體方式是基于效率還是表現力？在這一塊，也需要設計師根據品牌調性及產品屬性去作考慮。
因為運動曲線的存在，動效才會表現的如此自然。設計師可以通過曲線的方式進行運動速率節奏的編排，從而實現設計師們想表達的動效調性。在影響運動質感表達的部分速率的編排占了比較大的比重，借此機會講述下運動曲線的基礎知識幫助大家更好的理解曲線。
打開AE關鍵幀控制面板我們可以看到有兩種曲線的表達圖示；一種為速度曲線圖表一種則為數值（屬性）曲線圖表。
速度曲線記錄的是物體運動每一刻的速度變化。我們來分解下它的曲線圖表，x、y軸分別表示的是時間與速度。觀察下圖的曲線則可以得出物體起始速度為0呈靜止狀態，后續慢慢開始加速并且速度達到頂峰；最后物體運動至終點并停下。整體圖表展示較為直觀，經過分析我們可以得知整段運動其實就是我們熟知的緩動運動（起點和終點慢，運動過程快）
對于速度曲線的編輯，設計師可以通過曲線手柄來控制運動節點的加速度。讓我們雙擊節點查看關鍵幀速度圖表來分析下速度曲線的基本規律。此時速度圖表顯示傳入速度（incoming Velocity）為0，影響為33%?！競魅胨俣取刮覀兛梢岳斫鉃檫\動起點的速度，而「影響」這個數值則可以理解為加速度。傳入速度需要百分之多少的加速度即可達到最高速度，數值越大即代表加速的幅度越大曲線呈現的陡峭程度就越陡峭。
速度編排
當設計師們想針對物體運動速度做一些特殊的編排處理，使用速度曲線會更直觀一些。例如：想要模擬小球彈跳過程中的滯空感，我們只需調節小球懸空時的速度大小及加速度即可。想要達到滯空的感覺，那運動中程球體的速度需要大于0讓球體持續運動，就能達到我們想要的效果了。
表達式應用
我們經常會在動畫內使用彈性表達式，許多設計師也遇到過表達式輸入后還是沒效果的情況。其實是因為當前關鍵幀的速度為0而導致的，除表達式所設置的彈性頻率、衰減度外；速度也決定著彈性的強度，我們只需根據速度調節自己想要的彈性效果即可。
數值（屬性）曲線記錄的是元素屬性隨著時間的變化過程。我們也來分解下它的曲線圖表，x、y軸分別表示的是數值（當前運動變化的屬性）與時間。而該曲線代表著物體運動速率的分布情況，也就是速度等于=物體運動的距離（數值）/物體運動距離所花的時間（時間）?？赡芸粗酵唵蔚模ǔ踔形锢恚┑б豢磮D表還是比較抽象，我們可以一步步的將其拆解方便大家理解它的含義。
我們先確定元素位移時間以及距離，在不添加任何緩動插值的情況下，賦予他們最基礎的線形運動。也就是從0～1秒它的速度是呈勻速的狀態。再將整條曲線分解成平均的幾個關鍵時間點，記錄元素在不同時間點所在的位置。
根據速度公式，我們去測試下速度的變化對曲線的影響是什么？關于速度的計算公式其實我們都知道的，速度等于單位物體的位移距離除于位移所花的時間，也可以理解為圖表中的速度就是線段的斜率。
接著讓我們將其速度提升一倍，從1秒的總時長提到0.5秒的時間。根據圖示我們可以觀察到當我們將時長加快時，速率線段與我們的x時間軸的角度越來越大。同理我們嘗試下將運動屬性數值降低一倍，我們可以觀察到此時速率線段與我們的x時間軸的角度越來越小。我們通過上述的拆解分析，可以得到一些規律。在數值曲線下，時間以及運動屬性數值影響著物體運動速度。根據曲線陡峭程度影響著運動速率快慢的規律，我們可以總結一個觀察曲線的技巧。曲線越緩和（貼近時間軸x）速率越慢，曲線越陡峭（貼近數值軸Y）速率則越快。
在弄明白了數值曲線的基本規律后，我們將曲線做一些處理讓他更貼合于我們的現實自然運動。模擬現實物體運動的狀態，物體剛開始慢慢起步再到加速的過程。如下（P1）圖所示數值曲線在前半部分速率較慢，到達時間中點后突然增速并到達終點。將曲線作一定的平滑過渡處理就是我們所熟知的緩入（P2）曲線啦。
對于不同的運動曲線模式（速度/數值），設計師們需充分了解其曲線模式的含義。我們可以根據設計場景去選擇適合的曲線模式，關于場景還有很多，我大概羅列了部分項目接觸到的特定場景出來。主要目的是想讓大家意識到熟練的掌握兩種運動曲線模式的重要性，別將自己的工作方式或習慣限定太死，靈活的變通很重要。
AE動畫中部分無具體數值單位的動畫幀，例如（蒙版路徑），設計師們只能通過速度曲線進行調節。
使用彈性表達式需根據速度大小去調節彈性強度。
在UI交互動效的設計場景，數值曲線適應于落地開發的貝塞爾曲線插值器。
數值曲線是C4D動畫的默認函數曲線模式，在C4D中無法調節速度曲線。
通過上述分析我們對運動曲線模式的了解更進了一步，接下來讓我們結合案例探究下不同運動曲線類型的含義以及應用方式。減少大家在動效設計過程中的公式化硬思維，提升自身對于動效的編排能力。
緩入運動即加速運動，物體運動的時候都需要一個加速過程，并不會馬上達到速度的最高峰。觀察自然世界，有許多類似的運動案例例如彈弓以及汽車發動等。在交互動效中緩入運動會運用在元素離開頁面的情況。
這里的離開指的是元素永遠離開屏幕并且無法讓我們返回的操作例如，彈窗、通知等。元素將會一直加速至消失，且告知用戶該元素不會再出現在頁面某個角落了。
緩出運動與緩入運動相反，描述的是元素的減速運動。類似于我們生活中行駛中的汽車減速的案例。我們可以利用緩出運動表示界面外的元素進入屏幕，即元素以高速度進入屏幕慢慢減速至靜止的過程。
結合自然世界的運動規律來看，把頁面進入的元素比作是行駛的汽車，用戶當作是正在斑馬線上行駛的人，將馬路作為頁面空間。若汽車采用的是緩入運動（加速）的話，馬路上的行人則看到的是一輛不斷加速向他行駛過來的車輛。因為擔心車輛高速的逼近導致剎車不及時的情況，行人便會本能的作出躲閃的反應。其實頁面也是一個道理，進入的元素使用加速運動出現過沖的運動感知會讓用戶體驗時產生不適。
緩動運動即我們所接觸的常規運動類型，在運動開始慢慢加速再到運動結束慢慢減速的過程。該運動符合自然世界大多數物體的運動邏輯，也是頁面中經常使用的曲線類型。
閱覽Material design動效模塊中關于緩動曲線的描述，適當的增加曲線的不對稱感可以讓運動更加真實。我們可以根據頁面元素運動邏輯和產品品牌特性來設定緩動曲線。緩動曲線適用于大部分在頁面中運動的元素，當元素在頁面消失且用戶可進行返回等操作時也應使用緩動曲線。
在現實生活中，因為作用力與反作用力的存在。皮球觸碰到地面會不斷彈起，而用手推船，船就會離開岸邊。這就是我們所說的彈性運動。彈性曲線與其它曲線（常規緩動）有些許差異，彈性曲線由兩個值影響著它；彈性阻尼以及振動頻率。
彈性曲線相比常規運動曲線更貼合自然運動現象，在運動的衰減過程更為真實。早在ios7中，蘋果就已經大范圍使用該類曲線。例如APP收起展開、預覽窗口收起等。彈性運動并非需要表現出明顯的回彈感，就算運動無明顯的回彈感其效果相比常規曲線實現的運動啟動速度更快，且會有更長的一段衰減距離。讓用戶更加集中于物體運動的衰減過程（結尾）而并非加速過程，也使得ios的使用體驗更符合自然規律以及交互反饋更為真實流暢。
與常規的緩動曲線不同，設計師可在Framer、Protopie、flinto、principle等軟件根據自身需求來嘗試并輸出彈性運動相關數值提供于開發。對于不同（ios/安卓）平臺關于彈性數值單位的轉化，設計師們可根據MartinRgb的Animator list網站去模擬各端彈性運動的數值來對接開發。
Animator list：http://www.martinrgb.com/Animer_Web/#
彈性運動可賦予物體材質，通過彈性運動我們可以表達產品的品牌調性。例如面向低齡人群的產品或是娛樂類型的產品可在產品內大范圍的使用彈性運動去傳遞產品品牌的運動感知。除此之外，彈性也存在不少寓意。對于ios中使用的彈性運動，官方說法是基于用戶行為的獎勵反饋。如果用戶滑動操作UI元素的話，就有回彈，顯得用戶滑的力度很強，是一種獎勵性反饋使得用戶的體驗過程更為真實自然。彈性也具備提醒的作用，吸引用戶對元素的注意力以及提示用戶該元素可進行逆操作等。同時切忌在頁面中使用過多的彈性運動，設計師們在使用前需要充分的考慮當下頁面使用場景、產品品牌調性等因素。
現在越來越多的公司開始制定自己的設計語言/理念，像Material Design、IBM、IOS等。對于"動效"目前市面上大多數產品有著自己的動效規范，但并沒有上升到語言理念的層面。規范并不等同于語言，語言應反應其品牌特性和靈活性。為此最后分享下個人目前對于動效語言的理解，以及關于動效語言制定的技巧經驗。
作為互聯網設計師的我們都熟知視覺語言的概念，通常我們會根據產品所傳遞的品牌特質去制定產品的視覺語言。動態語言也是如此，通過提煉產品品牌氣質去傳遞一種感受。我們的動態體驗是什么樣的感受？是高效簡潔的還是活潑具有表現力的？為此我們可以找尋對應的品牌核心理念或是運動現象，組合提煉出符合品牌調性的理念和感受。
動態所傳遞的感受是感性與理性的結合，在感性層面我們根據產品的品牌形象提煉出相應的情感感知。而在理性層面我們需要分析產品受眾用戶特征以及產品類型業務屬性等，針對其特征進行產品體驗感知的傳遞。根據提煉結果，我們可以得出初步的動態感受。
以提煉的動態感受為出發點，理性的層面給予了我們大致的產品體驗感知，為我們的動效理念建成提供了框架。對此我們將繼續從感性層面出發，找尋可傳遞品牌感受的運動現象并加以組合提煉；將運動特征以及動態感受落點于實際的動態理念。這個過程與品牌設計非常相似，動效理念的孵化應充分考慮情感層面品牌感受的傳遞。而并非只考慮理性層面的感知，忽略其品牌氣質的塑造。
到這一步，動效語言的雛形已形成。通過感性與理性兩個層面去呈現「感受」，明確產品需給予用戶什么樣的動態感知。后續我們可以結合動態理念去進行動效原則的總結，根據原則去輸出后續的動效規范并進行推動落地。
建立動效語言體系，而并非只是建立規范。動效語言的價值除規范統一及體驗優化外，更重要的是傳遞產品品牌調性。以動效為例，用戶使用產品所接觸的交互動效、視效動效等其表現的動態感知都在潛移默化的影響著產品的使用體驗以及品牌形象。在目前大家都在注重設計帶來的短期商業價值的環境下，設計師也應重視下產品品牌、體驗價值的建設。
作者：Fiasc1 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
目錄
一、項目背景
二、項目分析
三、風格探索
四、設計原則
五、深色模式
六、設計規范
七、總結
一、項目背景
這家公司主要致力于研發醫療大數據和人工智能驅動的智慧醫療產品，其產品主要用于疾病的預測、篩查、診斷和治療的各個環節，主要聚焦于人工智能醫學影像領域。
產品定位
1、開發定位：web應用；
2、用戶群體：從事醫療行業的醫生；
3、功能定位：解決的是醫生閱片花費時間過長的問題，能夠輔助醫生智能診斷的工具型智能應用系統。
二、項目分析
從前面的產品定位，可以得到以下三個關鍵詞：web、醫療、應用，同時根據這三個關鍵詞可以延伸出一些問題，然后開始著手準備前期設計工作。
A、醫療設計注意事項
1、醫生的操作交互模式習慣于之前固有的Pacs閱片系統，設計時要尊重現有的交互模式；
2、因為多數影像科的使用環境都比較暗，所以界面整體風格采用深色模式。
3、因為有很多專家都是比較年長的，考慮到這一特點，在制作設計稿時字號不能太小。但是信息內容又多，字號大的話信息很難布局，這是一大問題；
4、和第3點類似，影像應用要求給影像顯示區域留有足夠的空間以，這就導致其它文字內容的空間又被壓縮了，其它文字內容的顯示又成了問題；
5、安全性，涉及到很多病患的信息，如何體現安全性很重要；
6、整體風格上趨于保守，因為是為醫院設計的，顏色使用上相對來說要克制。
B、web設計注意事項
1、最明顯的是用鼠標操作系統，鼠標的交互方式多，有hover、click、滾輪、左右鍵等等。而鼠標右鍵一般是瀏覽器自帶的功能，不方便定制。
2、pc端瀏覽器右上角帶有關閉瀏覽器。同時自帶后退、前進、關閉的按鈕，有點類似于安卓系統自帶返回鍵。這些功能影響著應用信息保存的交互問題；
3、布局問題，瀏覽器可自由伸縮，會影響頁面的布局；
4、設計時不存在@2x、@3x這些問題，采用@1x設計就可以，可以給設計和開發帶來不少便利，有些切圖為適配高分辨率的屏幕需要切2倍3倍圖；
5、頭部瀏覽器自帶菜單欄，會影響縱向空間的布局；
6、什么時候新開標簽頁和什么時候在當前頁面跳轉問題。研究顯示，國內網頁多喜歡新開標簽頁，國外網頁喜歡在當前頁面跳轉，但是應用類型的網頁更多的還是在當前頁面跳轉；
C、中后臺系統應用設計注意事項
1、中后臺系統信息繁多，因此系統用起來體驗好不好、效率高不高尤為重要，在醫療行業更是如此。如何用設計區分信息的層次，并且在有限的空間展示盡可能多的信息是設計的首要任務，為了展示正確的信息哪怕展示方式不對也比設計的好看而信息展示不全要好。
2、盡可能的優化操作流程，再精美的設計也不如優化一兩個流程效率來的快一些；
3、交互點到為止，盡量少用復雜的交互方式，比如拖拽，雙擊和右鍵都盡量少用；
4、對顏色和icon的運用要謹慎一些，以免造成多余的認知障礙。由于文字能夠傳達清晰準確的信息，無疑是更好的設計元素。
5、即時反饋是提高效率的有效手段。
三、風格探索
A、布局
我們采用左右布局的設計方案，將左側菜單欄固定，右側工作區域動態適配。菲茲定律表明：越遠難點擊，越近越容易點擊，靠近邊緣更容易點擊。因此菜單欄在左側時，當瀏覽器全屏時，點擊左側的菜單相當于是點擊邊緣的目標，這種操作路徑用戶所花的時間是最少的。而當菜單欄在上方時，因為上方有瀏覽器自帶的菜單欄，會影響用戶的操作，因此用戶點擊起來所花的時間更長，也容易操作失誤。
B、色彩
醫療產品多采用藍色作為主色調，藍色具有安靜、信賴、科技的色彩象征，然后綠色是生命、醫療的象征，所以最后選擇了一個藍色偏青的色彩，比較符合現有的產品調性。另外因為影像科工作環境多為暗室，所以界面整體采用深色模式設計，字體顏色的選取注意WCAG規范，文本和背景的對比度至少要有4.5:1。
C、字體
我們最開始設計demo時，常用文字使用的字體大小是12，而醫生試用后反饋字體太小。原來有很大一部分醫生專家都是比較年長的，12對于他們來說字體小了點，因此我們決定采用14作為主要字號，12作為輔助說明文字。
D、圖標和圓角
為了更好的搭配深色模式，我們決定圖標采用面性圖標（后文會講解）。圖標和按鈕的圓角也采用了直角硬邊風格代替了常見的有圓角風格。硬朗的圖標有一種精確性、科技感，更符合產品調性。
四、設計原則
A、層次清晰
中后臺系統有信息繁多，這就需要設計來區分信息的層次，引導用戶去關注最重要的東西，“偷偷地”給用戶一種高效的體驗。這里根據《寫給大家看的設計書》當中的四大原則：對比、對齊、親密性、重復，來區分信息的層次。
①、對比
對比即為設計元素的對比，可以是顏色對比、字體對比、大小對比等等。恰當的對比能讓看起來更有層次，能給產品提供一種韻律美。通過對比可以引導用戶的視線，減少用戶的選擇時間，間接的提高了使用效率。
②、對齊
對齊作為設計的最基本原則，是建立秩序的一種最基本手段，合理的利用對齊方式能夠有效地提高用戶體驗。常見的對齊方式有左對齊、居中對齊、右對齊、兩邊對齊。在中后臺系統中常常出現標題長度參差不齊，表單內容長短不一的情況，這種情況不論是左對齊還是右對齊都會出現不整齊的問題。而這時，我們往往要考慮的已經不是美的問題，而是哪種方式更能夠提高用戶的使用效率。
③、親密性
親密性能夠讓內容凝聚在一起，產生層次而不凌亂。信息的關聯性越高，它們之間的距離應該越近，反之就應該越遠。在本系統中頁面中的縱向間距采用小、中、大三種間距來區分層次，分別是8px、16px、32px，以此來體現頁面的組織性。另外，一些特殊情況，比如空間有限，最小間距可以是4px。其它不適應的情況統一采用8的整倍數定義間距。
④、重復
相同的元素在頁面間的重復運用，可以有效的降低用戶的學習成本。也能夠幫助用戶識別出這些元素的關聯性。重復的元素可以是某個顏色，某種樣式，某個布局。這里主要講重復在不同產品之間的應用，不同產品之間有相同的結構布局、相同的配色能夠讓用戶快速上手我們的產品，同時也是對品牌感的一種強調。例如：由于醫生以前習慣于使用醫院的pacs系統來閱片，所以在影像顯示頁面，我們延用之前pacs系統的布局，讓醫生找到一種熟悉感。
B、即時反饋
人機交互時，系統及時給出反饋非常重要，反饋能夠給用戶確定性和安全感。如果用戶操作了系統，得不到相應的反饋，用戶往往覺得系統是不是出錯了，就會給用戶造成一種負面使用體驗。常見的反饋形式有確認反饋、警告反饋、錯誤反饋、狀態反饋。本系統中從患者拍片、系統智能分析、醫生審核、保存打印，各個步驟都應該有確認反饋、警告反饋、錯誤反饋、狀態反饋，只是反饋的形式可能是彈窗，可能是顏色的變化，可能是符號的提示等等。這里舉例最基本的按鈕一定要有normal、hover、click、disable，不然用戶不知道自己的操作是否起作用了，給用戶造成認知障礙。
C、簡單有效
奧卡姆剃刀原理講究設計時避重趨輕、避繁逐簡、以簡御繁、避虛就實，因此在設計時，我們會和產品經理商量有些功能是否真的有必要放上去，或者有些信息是不是可以隱藏。例如：搜索欄，按照醫生閱片流程來看，醫生是很少會使用到搜索功能的，即使用到了，搜索病人ID就足夠了，其它項目的搜索完全可以放到高級搜索里。再比如病人列表里，往往會因為列表項太多使整個表格看起來非常臃腫，于是我們篩選出了最重要的7項，其它不是那么重要的，我們就以自由定制化的形式放在右側，醫生可以根據自己的需要進行定制。
五、深色模式
前文提到，根據醫療產品的特性以及用戶的使用環境，我們的系統采用深色模式。然而深色模式并不是簡單的背景色使用深色那么簡單，因為背景變成了深色，相應的字體的顏色、圖標的風格、元素的布局等等都會產生微妙的變化，以下列出一些深色模式要注意的一些事項。
A、顏色
1、深色的選取盡量不要直接選用純灰色，可以往冷色系偏一些；
2、白色背景上不會用純黑文字，同樣的深色背景上不要直接使用白色，否則會產生強烈的刺眼感，但是一些按鈕還是要使用白色；
3、字體的中性顏色深淺建議使用白色的透明度變化來制作深淺，原因有兩個：一是透明度變化能夠讓字本身投射出背景色的色調，做到自帶色調的效果，能夠讓頁面更自然協調；二是利于設計和開發理解記憶，有一個量度去衡量。雖然通過透明度變化有時會碰到沒有背景色的問題，但是這種情況很少，而且也很好解決，增加一個背景就可以了；
B、圖標
最開始我們就像以往一樣，圖標的形式采用線性圖標。但是我發現在深色模式下，線性圖標變得單薄、空洞。我們分析是因為在白色背景下，線性圖標是深色的，深色具有收縮感，讓人眼能夠關注到“線”和被線包圍的“留白”，人眼關注的是整體；而在深色模式下，線是白色的，白色具有擴張感，白色的擴展讓人眼的關注點變成了“線”，忽略了“留白”，所以人的觀察感覺是缺失的，而且在大面積深色的壓迫下，線性圖標變得特別單薄。于是我們決定采用面性圖標來代替之前的線性圖標。
六、設計規范
原子設計理念
原子設計理論由設計師Brad Frost首先提出，我覺得這套理論能夠很好的組織構建設計規范，也有利于團隊成員理解與協作，于是我把這套理論踐行于這套系統中。在原子設計理念中，一切設計都是由最小的原子組成，然后原子可以演變成分子，組織，模板，頁面。
1、原子
為UI設計構成的基本元素，文字、顏色、圖標、圖片、調色板、進度條、分割線、開關、單選框、復選框，也可以為抽象的概念，例如色調等。特點是不可再分割。
2、分子
由原子構成的簡單UI組件。按鈕、標簽、導航、輸入框、搜索框等。
3、組織
相對分子而言，較為復雜的構成物，由多個簡單的UI組件構成。彈窗、表單、列表、卡片、數據圖表等。
4、模板
以頁面為基礎的架構，將以上元素進行排版。例如消息模塊、列表模塊、項目模塊、表單填寫相關模塊。
作者：Watt海羅 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
藍藍設計的小編 http://www.syprn.cn