好久沒有發文章了，今天順叔和大家一起聊一聊卡片式設計，無論是WEB還是APP卡片式設計運用的比較多，很多UI設計師比較偏愛這樣的表現，卡片式設計會給人一種視覺上的享受，也能對于界面具有層次感。但往往在卡片設計中有一些技法還是需要了解，不能因為卡片式設計而卡片式設計，要能更好的應用到界面場景中。希望在這次分享中一些知識點能幫助到大家，之后的幾篇系列文章中，順叔會從界面中比較趨勢的設計技法進行分析，希望能幫助到一些設計的小伙伴。
教程前的引言
卡片式設計這幾年比較流行，同樣這樣的設計表達也是個趨勢，應用在APP PC界面中至今還流行著，從事UI設計的都會知道卡片式設計，具有把內容整合模塊化，從視覺，個性化體驗上進行呈現，是設計師在設計時常用的一種表現，同樣也具有獨特的創新概念。
在一些項目中，一些客戶會說這個設計的APP界面有點太白，沒有層次感怎么辦，那這時你應該和客戶說在APP設計中運用了現在比較流行的一個表現手法，卡片式設計，可以解決在畫面中有個性化 、變化、 層次感的設計。那客戶又問什么是卡片式設計呢？
一、什么是卡片
無處不在的卡片設計具有個性的美感和很好的易用性，是以文字標題，小標題， 圖形或圖片組成的模塊化，以塊狀形式規整的整合內容，讓內容更規整化，視覺上更個性化，也是操作上快捷的內容信息入口。更直觀的表達內容信息和快捷跳轉操作。成為當今在設計中一個比較流行趨勢，而卡片在設計中也占用一定的優勢，讓整體更加的有層次感，在運用起來也比較方便，從視覺、體驗、交互都具有不錯的優點
設計效果圖展示
順叔為了這個文章特意設計了兩個案例，通過這兩個案例進行一些講解。請見下圖：
二、卡片設計優勢
1.趨勢
無論是大平臺 還是小平臺的產品都會運用這樣的卡片式，跟風式設計趨勢，也讓卡片式設計成為了一個現在常用的優勢，不過卡片式設計的確有很好的效果
2. 層次感
具有一定的層次感，能在頁面版式中起到設計上的不同，個性化變化，頁面層次感區分強烈，能更好的體現提煉出內容
3. 規整化
卡片式設計以圖片、 圖標 、LOGO、 標題、 整合到一起 以塊狀的形式在界面中展示，更規整的排版呈現。雖然內容多會導致頁面亂，一個模塊包含內容之后就會規整不少，也給頁面設計上帶來了更好的視覺
4. 視覺體驗
卡片式給整個頁面會增加視覺上的體驗，特別那種大圖片卡片式更具有視覺上的沖擊力，背景襯托出前景卡片式設計。同樣對卡片式也感覺到舒適感?？ㄆ皆O計還是需要根據整個布局、 產品需求 、功能進行設計。以達到最好的用戶體驗、視覺體驗。
不要為了卡片設計而卡片設計。
5. 易用性
卡片式設計在易用性和靈活性上比較高，在響應式設計中同樣應用的也比較多一些。能更好的有序排列。
6.簡約設計
簡約設計會更顯得品質，不需要過多的進行裝飾，哪怕就是一個白色的色塊，上面點綴有色彩的圖標和標題 副標的變化，也會覺得顯得高大上，就算是一個帶有顏色的色塊卡片，也無須過多的設計 內容上的標題 、圖標、 按鈕就足以支撐起卡片
7. 交互效果
在卡片式的設計中會有一些動效交互，比如整體卡片放大、 縮小 、左滑、 右滑，可以整模塊化滑動 縮放。整體效果增加了不錯的視覺交互體驗
三、卡片正確設計知識
一般在界面設計中卡片的存在的意義和表現手法都是什么樣的呢，下面為大家舉例了幾種常用的正確的設計表達姿勢。希望小伙伴在設計的同時有所靈感和參考，把一些表現手法加入到自己的設計中，適合才最重要?？ㄆ皆O計還是要根據整個風格和整個布局而進行展示，在做進一步的對比和布局中以最好的效果為最終展示方式，總結分析幾個常見代表例子，如有不全請討論補充，下面就是一些例子
1.卡片式形式一
以色塊為主體并用現在比較流行的漸變色組成，其中四邊為圓角，同樣色塊下邊陰影襯托出主題，這個是在卡片中設計比較常見的運用手法，卡片的長高在設計中也是根據結構，內容功能而進行設定。正方形，長方形都是一個表現得手法，在色塊上面標題文字，圖標，圖形是整個卡片的布局的形式，無非就是左右布局和上下布局
應用場景：卡包、天氣、類別、入口、優惠劵，卡劵
此圖片來自于網絡
2. 卡片式形式二
這種形式共同點都是在頭部C位出現的卡片式設計，其中承載著標題，副標題，以及圖文版式，不難發現，如果圖片有顏色，那么下面是白色底，這樣在白底上面色塊的出現還是比較簡約凸顯卡片，如果背景有顏色，卡片也有顏色那么卡片的凸顯程度就不會那么強，圖二很多在會員卡設計中常用的比較多，也比較簡約，另外兩個共同特點背景有顏色，一般底部背景顏色就是整個界面的主色調，背景有色塊，上面就用白色卡片，卡片上方標題、 文字、 圖片呈現。只不過排版的方式有所不同而已，在很多APP設計中，這樣的表達也很多，通過主色調可以很融合的把上面的狀態欄，導航欄融為一體視覺上統一性，底部背景顏色延續下來，上面凸顯白色卡片，這樣更具有視覺感和層次感。白色的卡片不需要過多的修飾，更能體現的上面的文字和圖片。
應用場景：會員卡，滑動卡片，圖文標題，入口
此圖片來自于網絡
3. 卡片式形式三
這種形式上圖下文字，或者是上標題，下圖片的形式，這種形式特別在圖片素材的選擇上尤為重要，有視覺效果好的圖片通過剪切，處理，合成，攝影，插畫等等方式，出現的圖片質量上好的話可以帶動整個設計的逼格，通過有效的圖片傳達，文字傳達，讓用戶更清晰的了解。這樣的形似一般在入口或者列表的形式出現的比較多，同樣也能體現出整體化和視覺化
應用場景：滑動卡片，圖文標題，入口，列表
此圖片來自于網絡
4. 卡片式形式四
大圖卡片式，一般以攝影圖片，插畫形式，文字壓與圖片之上，這樣的效果更具有沖擊力，也能顯得出比較潮流。體驗也很不錯，放大視覺，展示內容，圖片相結合，讓瀏覽者更愿意多看一會。表達的圖片與文字內容相符，做到圖文交融的程度。一般這樣對于圖片的選擇上還是比較要求嚴格的。沒有質量的圖效果會降低。
應用場景：列表，說明，入口，天氣
此圖片來自于網絡
5.卡片式形式五
列表卡片設計，這種形式一般白色的卡片，上面標題，頭像，按鈕，扁平插畫形式體現，更多應用在一級頁面的下方內容，以及二級頁面的列表頁或者集合頁，整體弱化背景以白色為主，給予圓角及陰影承托出層次感同時，體現上面內容部分。每個模塊的單元體具有統一的視覺。
應用場景：列表，集合頁，入口
此圖片來自于網絡
6. 卡片式形式六
大卡片式設計，表現為一塊特大的卡片式，上面會有標題，按鈕等信息，同樣表現出突出層次感，個性化設計的特質。體現出內容，一般背景有顏色上面卡片為白色，如下面背景為白色，那么卡片的形式也可色塊，在對比上有個反差，才能突出卡片的作用性。
應用場景：提示，說明，優惠劵，劵，入口
此圖片來自于網絡
以上總結的幾種卡片的形式，在設計中可以根據情況而設計，卡片多樣化，布局多樣化，適合自己產品的才最重要，雖然在界面設計中常用的設計，但不要盲目的為了卡片而卡片套用設計，這樣起不到作用反而效果達不到理想程度。希望幾個卡片形式總結能給大家帶來一些靈感和啟發。
同樣在這些卡片中會有一些基本的共同的特點
共同的特點是
1. 四個角都是圓角
2. 根據潮流漸變色或白卡片
3. 色塊下的陰影，色塊下的陰影更能體現出層次
4. 卡片上面組成部分，標題，副標題，圖形，按鈕，圖片，頭像
5. 字體大小，字體顏色的變化
6. 一般卡片應用在會員，列表，說明，優惠劵，分類，類別，集合頁，歡迎頁等場景常見
三、卡片正確設計知識
為了講解文章，順叔臨時構思一個產品原型，而快速進行了簡單的設計，一個第一版，一個優化版，主要為了講解一下這個卡片設計一些問題，
以下此圖為構思的原型圖
經過分析原型圖之后開始進行設計，首先設計一個版本的，如果這樣卡片布局設計，這樣色彩搭配的情況下，會怎么樣呢，整體設計用了藍紫色為主色調，首先鋪藍紫色的色塊作為背景，然后上面放白色卡片，以至于卡片上詳細的內容，比如數字，圖形 能更好的豐富支撐卡片。同樣數據流也是比較重要的C位。也是比較重要的位置。接著根據原型圖下面有兩個卡片，通過扁平化設計，以色塊為主設計一個藍色，一個橙色的卡片，上面并有圖標，頭像，以及標題，兩個顏色的對比，更讓視覺有沖擊力，整體看這個設計并沒有什么，但有個問題在于單個模塊拿出來效果的確都不錯，但組成之后上面的卡片C位讓下面的兩個帶顏色的卡片搶了視覺，當打開這個界面的時候視覺落點在彩色卡片上，那么這個整體設計上就出現了問題，上面的數據，白色卡片其實是比較重要的，而且整個畫面都是卡片毫無設計上的變化，
那么只能在這個基礎上在進行優化，其實大家在做設計的同時也這樣，在考慮功能模塊前提下，用戶體驗，也要考慮視覺體驗，那么視覺從哪方面來，色彩、層次、版式等等方面。那么能不能在進行一下優化呢，其實還是有空間在進行優化。以下圖為第一版
設計第一版
根據上面的設計在進行優化，同樣保留白色卡片部分元素，在卡片與卡片之間放一些顏色的圖標，這樣更好的給功能上快捷入口，也能給卡片設計增添了變化。使得整個畫面更靈活
雖然白色卡片，但有一些色彩的點綴，也讓白色卡片活躍起來，把顏色的卡片改成白色卡片，從上到下的版式舒服多了，也沒有那么跳。整個風格更簡約，同時功能也更全面。
調整后
從原型圖，在到設計第一版，在到優化調整之后，證明一點，卡片不要因為卡片而套設計，反而會失去效果，考慮功能模塊，用戶體驗，視覺體驗也一定讓整體舒服。一直都說，繪畫中需要有主有次，設計中也一定要有主，有次的進行設計。這樣層級關系才能更清晰。
但這些條件一定是從，體驗、色彩、布局、版式等方面進行對比和研究的。設計不要先著急做設計，前期的進行思考，邏輯清楚了，在進行設計的時候會更加的順暢?？ㄆ皆O計，大家都在應用，希望這個文章能給大家帶來一點點知識點，那就不枉費我在熬夜寫這篇文章。
不為別的，只是一個喜歡分享的肉團子。這篇文章就寫到這里，如果喜歡請給個贊吧。如內容有沒說到的地方，各位可以進行補充，以上兩個圖你稀罕哪個呢？
隨著當今越來越多的信息需要被展示、曝光，而移動設備的屏幕空間又有限，為了減少用戶在使用應用時的跳轉，減少用戶的路徑，設計師們開辟了第三個維度——即在 z 軸上展示疊加的分層動效進行交互表達，從二維到三維，這樣更能有效利用手機屏幕上的有限空間，這也是以后界面設計的大趨勢。
這個思維方式最早是在安卓的MATERIAL DESIGN語言上體現出來的。（以下簡稱MD）
Depth（深度）：
Material Design UIs are displayed in an environment that expresses three-dimensional (3D) space using light, surfaces, and cast shadows. All elements in the Material environment move horizontally, vertically, and at varying depths along the z-axis. Depth is depicted by placing elements at various points along the positive z-axis extending towards the viewer.On the web, the UI expresses 3D space by manipulating the y-axis.
在MD的設計規范中，用Depth來說明界面設計中的深度，既而在界面設計中引入了Z軸的設計思維，將界面設計由二維設計引進了三維設計思維的地帶。MD通過抽象化紙片在物理世界中的形態，定義除了各種信息層級以及常用狀態的表達方式。
再來看看，如今iOS的最新版本iOS 12，也已經開始向這一方向進行發展。最典型的要屬以下的iOS的內置應用：股市、語音備忘錄、地圖、錢包、音樂、播客、App Store等。
三維設計法，在界面設計當中，主要分為兩個方向來運用，視覺設計和交互設計。
人們通過雙眼能夠分辨出物體遠近大小的形態，因此如果利用這樣的視覺規律，便可以在畫面中呈現出真實的效果，突出視覺的立體化。
因為使畫面產生三維的模擬真實的效果，可以畫面更具有吸引力，我們之所以能夠看清楚物體，是因為有光的存在，現實生活的影子是因光而產生的，才是一個真實立體形。如果能恰當運用光影的效果，那將會讓圖形在進行三維空間轉換時變得更加凸顯。
當今，在界面的視覺設計方面，通過層疊、卡片化和投影的設計手法來對界面的內容進行處理，可以增加界面的層次感。在如今同質化嚴重的扁平化設計下，能給人煥然一新的感覺，同時也給人一種內容呼之欲出的感覺，加強了點擊的欲望。這樣的設計手法讓界面的Z軸空間得以加強，必將是下一個新的趨勢。
例如：KEEP、潮汐、蝦米音樂
例如：Dribbble 和 Behance
圖片來源于網絡
而在交互設計方面，想同時展示多種內容時，假設對一個需求有著很強的曝光要求，或者是想讓用戶知道有這項內容的存在，但又不想讓頁面內容過長，導致被忽略或難以找到時，可以采用頁面Z軸層級覆蓋的表現形式。
采用了Z軸層級覆蓋的架構形式，用戶主要的交互操作變為上拉、下拉來閱讀信息，減少了點擊跳轉這一類的操作，減少了用戶的操作成本。且滑動手勢，是以后人機交互發展中的一個必然趨勢。
在一些APP中有所表現的有：豆瓣FM、豆瓣詳情頁等。（大家可以從這些APP上獲取設計靈感）
豆瓣FM
豆瓣（電影詳情頁）
例如：
上圖是京東（APP）的商品詳情頁，這時候我們接到的需求是將上圖的文案放進這個界面中。
要知道在寸土寸金的APP界面中，每一個位置都是十分的寶貴，一但放置不佳，就會給用戶的視覺流造成一定的影響，使得用戶體驗下降。況且，還是京東這樣流量巨大的電商APP，位置便顯得更加寶貴，而上圖中的紅色標記范圍就是我們的限制區域，下面我們先來看一個不合理的做法。
上圖我們是直接加了一個界面，將這個模塊設定為可以進行跳轉，從而達到顯示完整（文案）的需求。
這樣做，不僅增加了用戶的路徑，而且還會給來回切換的用戶造成一定的困擾，消耗了手機的資源的同時，下面的留白也顯得很浪費、空曠，視覺上就很不美觀。
那么，京東是怎么做的呢？
京東采用了一個浮層設計（Z軸），將全跳轉改為半跳轉，這便是在界面設計中的Z軸運用，這樣既可以達到文案所要求的曝光，也能最大利用讓界面的空間，實現與原場景的完美銜接。
通過在 Z 軸上進行分層設計，模擬物理世界中人與物的真實的交互模式，幫助用戶理解產品設計，將信息更好的淺層化，這樣可以給設計師們帶來更多發揮的空間。
在使用這個思維來做設計時，可以事先考慮以下幾點：
根據用戶使用體驗，來判斷是否需要使用Z軸分層交互。
這樣做是否能幫助用戶更好的理解你所做的設計？
空間感設計主要意義是能正確的引導用戶，并建立起對產品的使用邏輯。
每一個界面層級只需要表現一件事。
當你想要在界面中加入一個菜單欄但發現沒有空間？這時候可以考慮使用Z軸的設計。
謹慎使用Z軸層級交互，因為它會增加空間關系的復雜度。
多參考現實世界中的真實交互，它給你的預期和感受，在互聯網設計中的很多靈感都來自于對真實世界的理解。
總結：
我們在做設計時，可以把當前的界面可以想象成一個的三維世界——分作X軸，Y軸，與Z軸，在這三個坐標軸上，可以進行思維上拓展。
在交互設計當中，減少跳轉便是減少用戶路徑，就是使用各種方法在三維空間中，用x軸、y軸、z軸做出最合適、合理的用戶體驗設計。
前言
之前為大家分享過很多工作的案例，很多伙伴表示收獲頗多，之所以分享工作案例是為了，給大家講解設計思路，讓大家明白，為什么這樣設計，出于什么目的，要解決什么問題，這些正是UI設計的根本所在，掌握了設計思路就能應對各種問題。
接下來本期的分享，依舊會用真實案例解析從需求到設計的完整過程。
接需求與案例解析
我司的運營小姐姐@我要改個產品的UI，下午找我聊需求。
一、準備工作
提前了解產品，從視覺、交互上感受一遍，標記產品中有疑問的地方，這樣大概對產品有個概念，為接下來的溝通做好鋪墊。
二、了解業務
首先需要運營小姐姐講解一下業務邏輯，了解產品涉及到的各種角色，產品使用場景等等，期間把疑問一一了解清楚，盡可能對業務、角色、使用場景有充分的了解。
通過溝通，了解到這個產品是一個H5問卷后臺，業務上用來查看問卷統計的結果，使用的人群是公司的運營人員，產品時常會打包賣給客戶，客戶的使用場景不定，多數用戶會用手機端查看統計結果。
三、溝通需求
接下來，溝通中我會先聽她講解需求，講完后我會問她一些問題，確保我理解的正確。
需求溝通后，此產品問題為：界面太亂，很難用，需要改的好看舒服好用。
這時候就要想到她是不是用了其他體驗好的產品，如果是的話，這個產品可能是重要的設計參考，然而了解后并不是因為用了其他產品，是一直以來就不好用，沒時間改而已。
接下來的需求溝通就要落實到頁面中，需要一起探討產品，不明白的地方要了解清楚，從中總結優化的地方。
下面開始案例分享：
第一個頁面改版
上圖為“統計問卷”首頁，A、B、C處為頁面中較為突出的點，其中C處最為明顯，溝通后得知C處圖表的切換是為了截取圖表做ppt，僅此而已，所以此處UI設計上需要弱化。
其實用戶之所以覺得頁面看起來不舒服，是因為想看的元素被弱化，而不該看的卻過度設計，這樣用戶在看頁面過程就會很費神，因為獲取信息要躲開視覺上被過度設計的地方。
例如A處，用了頁面中唯一的橘黃色，當初設計者應該是為了能強化區別上下題目的分界，但也成了突出的視覺干擾項。
其實分析后，頁面中用戶要看的是兩個地方，一個是B處答題的比例數據，另一個是旁邊的“小記”數據量，而B處進度條的設計過于突出，與文字沒有良好的視覺比重。
結合以上問題進行改版：
解決A處問題
把每道題設計為卡片式，這樣能很好的區別上下題的界線，題號從突出的橘黃色改為黑色，使得頁面視覺上不那么跳躍。
解決B處問題
弱化變細進度條，與文字視覺比重相當，不會顯得突兀，排版上下排列改為左右排列，這樣能夠縮減表格的高度，頁面可以顯示更多的內容。
解決C處問題
圖表切換是個弱功能，使用頻率較低，所以放到卡片的右上角弱化設計，用切換的方式展示。
不僅僅是以上的問題，排版的細節也會大大提升產品的質感。
舊版所有元素的排版間距幾乎沒有什么規律，這也是導致用戶對產品有亂糟糟印象的原因。
改進后，用間距去表達元素之間的關系，間距設計常常會用到“黃金比例”或“五分原則”，黃金比例不必多說，五分原則就是相關的元素用周邊0.5倍的距離表達親密關系。
當設計好第一個頁面后，需要先給到需求方評審，確認沒問題后再繼續，這樣就盡可能保證了后面的設計是符合他們需要的。
上圖只是個最終的結果，過程中做過一些小改動，最初發給需求方設計的頁面，需要做簡單的設計注解，這樣才會更容易被理解，且具有說服力，最終確認沒問題再繼續其他頁面的設計。
第二個頁面改版
上圖是給做問卷的人配置紅包獎品的頁面，看完后我表示心疼我們的運營人員。
A處本可以切換項目，但現在的設計顯然是不可點擊切換的狀態。
B處是這個項目總金額統計，目前排版色彩雜亂且擁擠。
C處是給問卷配置紅包獎品的各個屬性信息，然而元素間沒有層次，依舊雜亂擁擠。
D處按鈕沒有主次關系，排版擁擠。
E處是個“增加獎品”按鈕，現在看起來沒太大問題。
改版后頁面延續了首頁的卡片風格，保持一致性。
解決A處問題
“子入口切換”用戶很難理解，因為不是確切詞，例如換成“項目切換”“問卷切換”就很容易理解，當然也是可以去掉的，因為運營人員對每個項目都很熟悉，沒必要注解。
解決B處問題
重新定義排版后，顯而易見會比之前要清晰透氣很多，動態變化的金額用顏色突出強調，未配置金額為次要信息，用灰色表示。
解決C處問題
改變排版樣式，視覺上有主有次，“配置數量”跟“個數”為重復信息，只留一個即可。
解決D處問題
按鈕“已啟動點擊禁用”拆分為“點擊下線”按鈕，和問卷狀態（進行中），“展開”按鈕放到最左邊，和“編輯”并列。
解決E處問題
“新增獎品”按鈕，如果增加配置獎品列表，就會把按鈕擠到不可視區域，這樣的設計不是特別推薦，所以設計成懸浮按鈕，舊版本已經建立用戶的按鈕功能認知，懸浮按鈕上面配加號圖標，用戶就會很容易理解。
第三個頁面改版
上圖還是第二個改版頁面，此次要改版的是，點開“展開”按鈕顯示的屬性，目前的問題是有很多重復的信息，例如時間，上面已經顯示時間，最下面又出現同樣的時間。
最嚴重的問題是，所有灰色字的注釋，不符合邏輯，不應該在展開的屬性下面提示，因為這已經是編輯好的內容，再去提示就意義不大了。
模擬一個場景，比如上圖紅圈的地方，已經設置好了獎品名稱為“幸運紅包”，展開后有個灰色字提示“用戶中獎后，用于顯示給用戶看”，如果發現理解錯了，然而在此頁面是不可以改正的，所以灰色字應該在“新增獎品”的編輯中提示，用戶在輸入信息的場景下，提示才是最合理的。
頁面改進后，去掉重復的屬性信息，去掉灰色字的提示，（去掉這些內容是提前跟需求方探討過的）最后用最少的空間展示了所有的信息，更清晰明了，其實展開后的卡片高度，完全也是可以考慮去掉“展開”“收起”的功能。
然后
第四個頁面改版
當我看到這個頁面時，不知道為什么要有A處的信息，所以再次請教需求方尋求答案，給我的答案是“子入口”“IP”是為了給開發人員提供便捷查詢，例如這個中獎者存在刷紅包行為，可以通過A處的信息進行查詢。
很顯然這并不合理，因為對用戶來說沒有用，還造成了認知負擔，如果存在不良行為，提供編號信息就可以搞定了。
B處的設計，讓頁面沒有條理，更是一個信息干擾項。
頁面改進后，依然沿用首頁卡片式的設計，去掉“子入口”“IP”“昵稱”多余屬性，去掉昵稱是因為答問卷一般不會獲取到用戶昵稱。
“中獎”和“未中獎”卡片，設計上有明顯的視覺比重差異，去掉未中獎的綠色標示，只突出中獎者。
最后一個頁面改版
上圖是做問卷用戶答案頁，頁面的彈窗偏小，使用起來很憋氣，A處不知道什么意思，詢問后可以直接去掉，B處是一個不合理的“確定”按鈕，原因是用詞錯誤，應該叫“關閉”更合適，因為這個頁面是查看信息，并沒有執行某些任務操作。
改進后加大彈窗，去掉頁面中的多余元素顏色，上下題目用留白間距隔開，去掉“確定”大按鈕，因為太占面積，改為右上角“關閉”按鈕。
最后
當我們看到一個頁面時，如果只看到美與丑，那是不客觀的，這可能是對UI設計最大的誤解，UI的美不只體現在表面上，還有內在的體驗中。
UI設計一般都會帶著一種目的進行設計，目的絕不只是設計的好看，更多的是創造一個良好的產品體驗，同時能夠助力業務，實現產品價值。
UI設計師對于業務要積極的去了解，對需求不要總被動接收，要有意識的去探討挖掘，對業務的熟知，需求的準確拿捏，是你開始設計前最好的基石。
看了一位著名設計大師Aaron Gustafson關于UI設計的演講報告，討論和剖析了幾個自適應界面，并演示了他們如何智能地變形以滿足用戶的需求。這里我有一些心得體會分享給大家。
當我開始我的職業生涯，我還是一個簡單的網頁設計師。我在網頁設計工作了一年，從小型商業網站開始，最終轉移到更大的客戶。我發現對它并不感興趣。我對分頁模式，用戶與表單交互的方式，以及感覺到的性能，比網頁的視覺設計更感興趣。我發現我愛上了交互，體驗各種的性能。
當我看科幻電影時，我會看看界面。當我玩視頻游戲時，我會觀察菜單的布局方式。如果任何這些特質聽起來很熟悉，你也可能有一顆UI設計師的心臟。
于是我退出我的之前的設計公司，開始了我自己感興趣的項目與目標。在我的LinkedIn頁面上，我試圖總結我的新職業目標：創作出不僅具有視覺，交互，體驗，還應更加智能，更加方便的大膽構想。自從我愛上了我現在這份工作以來已經有三年了，我并不是把它當作工作，而是把它當作我興趣慢慢去培養，所以我的旅程并沒有停止。我目前在一家創業公司，這里有我們共同的夢想與信念，我們想把東西做好，做全面，希望廣大用戶會喜歡，我每天逼著自己去思考，去學習，去看一些書籍資料，但是很多時候事與愿違！
在這篇文章中，我主要想描述一個UI設計師是什么樣子：
這些工作是什么構成的？
哪里是最好的學習資源？
你如何在你的技藝得上展現更好？
UI設計的工作
我會將用戶界面設計的工作分為四類。與客戶溝通，研究，設計和原型，并與開發人員溝通。下面讓我們更詳細的去接觸一下怎么去工作。
溝通
客戶溝通是關于理解客戶的問題。目標是掌握客戶的業務。項目的開始通常包括很多的談話。在工作開始時，不要太多地去了解客戶的想法- 你可以設想可能的設計解決方案時，以全新的方式展現給她們看，然后接受需求，進行分析。
要成為一個好的UI設計師，你需要能夠最終考慮你的客戶的意愿。例如，您的客戶可能在航空，為他們工作最終將使你對這個行業有很多認知。所以，你會感受到：不能明智的去選擇你的工作行業，也就不會成為這行業的專家。我們需要對自己有足夠的認知。
在項目期間，溝通不會停止。作為設計師，你將不斷地展示你的工作。產品的誕生需要有火花的碰撞，所以我們迭代好，不斷的進行溝通與討論。
研究
與客戶溝通，你會做很多研究。這可能包括實地研究，與客戶的研討會，分析競爭或定義一個策略 - 基本上，只是幫助你理解手頭的問題。
研究是什么？研究可以告訴你的設計選擇。這是你讀過的文章，或者蘋果剛剛發布的新東西。當你解釋為什么做出一個特定的設計選擇時，你的研究會幫助你。
研究可以非常廣泛。我經常測試新的設備用于研究目的; 或注冊新的網絡應用程序以研究其用戶界面。
設計和原型
作為設計師，你可能會花大部分時間做設計調整工作。UI設計項目可以以多種方式前進，從素描，詳細設計到編碼。
您使用的方法在很大程度上取決于項目的類型。你在設計什么？這是一個網站，還是應用程序，或者你寧愿稱它為一個應用程序嗎？它使用本地技術嗎？是重新設計還是從頭開始？
在我們公司沒有固定的過程，但大多數項目遵循相同的粗略順序：他們從草圖和線框開始，繼續詳細的視覺和交互設計，并以一個原型結束。
作為設計師，我們花費了大量的時間來思考我們的工具。雖然強大的工具很重要，但它們不是最重要的事情。能夠使用Adobe Creative Suite和像Sketch這樣的應用程序是相當于能夠使用鉛筆繪畫或刷子來繪畫。
話雖如此，對工具的濃厚興趣是一件好事。我也喜歡嘗試新的設計工具，可以幫助我更有效率的完成工作。我最喜歡的矢量編輯工具是Illustrator，但我的大部分視覺設計工作是在這些天在PS上完成的。其他團隊成員已經切換到較新的工具，如Sketch,Affinity Designer,這些工具我們都需要了解，找到適合自己的就行。
工具是一個非常個人的選擇。只要我們能輕松地一起工作，每個人都可以自由選擇自己。為了使與客戶的討論，我們的設計更簡單，我們使用Axure制作原型。對于更高級的原型，我們使用HTML和CSS。你需要的工具都取決于你想要做的工作。
開發者溝通
溝通設計有多種形式：詳細規格，提供資產，一起審查設計。在每個實例中提供的意義很大程度上取決于項目是本機還是Web應用程序。
傳統的方法是在屏幕設計旁邊交付資源。屏幕設計可用于查看設計整體看起來是什么樣子，而資產是即用型PNG和圖標的SVG，因此開發人員不必處理圖形編輯器。
在我們公司，我們是提供更多的支持者。我們使用組件樣式指南來幫助保持我們設計的一致性。當我們處理一個web項目時，我們提供了詳細的HTML和CSS集合，逐條記錄，準備實施。我相信在軟件開發的每個階段都有設計眼光是實現我創建一流級軟件目標的唯一途徑。
Web與本機應用程序
然而，這些指南傾向于針對營銷網站進行調整，并且其中的內容并不總是導致良好的用戶界面決策。字體傾向于出于營銷原因而選擇，而不是為了易于理解。顏色可以是粗體和醒目的，它可以在廣告活動中使用，但不會在您日常使用的應用中使用。這些指南必須解釋。
有幾個UI設計的網絡指南。你可以認為網絡是不同風格的熔爐。如果你做任何感覺更像一個應用程序而不是一個網站，你需要知道廣泛使用的框架如Bootstrap和ZURB基金會?？蚣芟却蚝?，再開始確定事情應該如何去做，因為你不想重復做某一件事。
我比較喜歡使用Bootstrap。它為常見的UI元素（如按鈕，數據表和模態）提供了合理的默認大小。
在網頁設計中，您受網絡技術能力的限制。它曾經是很難實現簡單的視覺華麗像網站上的圓角?，F在很多構想都可以做了 - 你現在可以自由繪制大量的陰影，過渡，動畫甚至3D的用戶界面。
作為設計師，在瀏覽器中控制流程和設計是更加現實的。我還沒有看到許多UI設計師接管本地應用程序的UI編程，但是設計師做一個網絡應用程序的HTML和CSS是一個常見的事情。如果你可以編寫你自己的設計，你將有一項專業獨特的技能在你的同行，也會增加你許多優勢。但是對我來說，這也是唯一的方式，真正了解網絡的工作原理。所以作為一名設計師，還是需要懂代碼的。
Web約束
您很快就會發現，并非所有的瀏覽器都支持您學習的所有酷技巧，這是網頁設計的現實。這是很好的遵循著名的原則，如漸進增強，你盡可能加載增強內容，但也想想如何內容降級。
最近，“切割芥末”已經變得流行。在BBC的網絡團隊的支持下，這包括區分“好”和“壞”瀏覽器，并為“壞”瀏覽器提供有限的體驗。但是，它真的只適用于內容網站。
當涉及到類似應用程序的體驗，許多人只限于支持一些領先的瀏覽器，使開發更容易?？杀氖牵@讓我們回到1996年的情況，你需要一個特定的瀏覽器來查看內容。
改善你的技能
那么，你如何跟上快速移動的網絡行業的最新發展，并提高你的技能？讓我們看看幾種不同的方法提高你的技能...
平臺知識
設計師的主要部分是平臺知識。你應該知道各種操作系統，以及如何使用它們。作為設計師，我們傾向于使用Mac，但是很容易忘記，大多數人使用Windows框來完成他們的工作。
我覺得你只有真正理解的東西，如果你自己使用它。我喜歡使用我的Mac設計，但花費大量的時間趕上各種其他平臺的演變。我有幾個副本的Windows安裝在我的Mac上作為虛擬機。我一直在忙于使用Microsoft的Insider程序測試Windows 10的新構建，以檢查UI中的各種更改。
我也經常購買新硬件來測試它是如何工作的。我買了一個蘋果手表只是為了測試的平臺。然后我賣了它，因為我覺得它并不是必要的。
此外，web可以被視為其自己的操作系統。它不斷發展，每周都會向每個瀏覽器供應商添加新功能。非常值得了解瀏覽器的技術方面，特別是關于CSS和圖形能力。你需要知道SVG和WebGL是什么，以及如何使用Web動畫API。
每個平臺隨著時間演變，作為一個用戶界面設計師，它是你的任務，保持最新。畢竟，無論你在設計什么，都不是孤立生活，而是一個更大的軟件生態系統的一部分。
回到基本
我們今天所處的困境與我們在20年前所掙扎的情況沒有什么不同。書中有很多好的建議。嘗試防御設計的網頁由Jason Fried和馬修Linderman和不要讓我認為通過史蒂夫·克魯格的初學者。
如果你不知道概念，如模態和可承受性，你需要讀。你應該能夠解釋Fitts的定律是什么。格式塔的鄰近法？這是UI設計的面包和黃油。
受游戲和電影的啟發
作為UI設計師，我利用其他靈感來源來完成我的工作。我在游戲中找到很多靈感。一些游戲非常復雜，UI設計人員不得不解決與UI設計師在商業項目上工作相同的復雜界面問題。
游戲也可以表示趨勢。在Colin McRae Rally的菜單中發現的極簡主義讓我想起了iOS7的方向。在某種程度上，現在時尚的UI動畫設計出現在幾年和幾年前的游戲中。從skeuomorphism到裸，功能界面和“平面設計”的轉變在游戲中也很明顯。比較2006年的湮滅與2011年的天際。這兩個游戲都是同一系列的RPG，但差異是驚人的。
Marvel電影中的未來派界面如鋼鐵俠也是我的靈感。他們不是完全可用的例子，但他們確實讓我更多地關注計算作為一個整體。我們想要一個未來的屏幕，或者我們想讓屏幕消失？這可能是一個很好的問題，在一個酒吧的設計師。
前言
近年來，「設計規范」逐漸被「設計體系」或「設計語言」的概念重塑。基于一套架構嚴謹、規則統一的體系框架，產品表現層面的設計工作可以逐漸實現模塊化運作，從而讓視覺設計工作變得更加高效。
「Design System 系列」將會從設計觀、設計原則、設計形式三個方向入手，由深到淺、由整到分地演繹設計體系對整個產品迭代過程的價值和意義。有正確的設計觀作判斷好壞的標準，并結合行之有效的設計原則作指引，才能制定出最優的設計方案。
簡介
Robin Williams 的四大基本設計原則相信大家都不陌生，尤其在平面設計領域內對它的應用更為廣泛。在此基礎上，我結合中后臺產品的設計特點，將其縮寫為「兩對兩性」原則，即：對齊、對比、親密性、一致性。
每個優秀的設計中都會應用這些設計原則，并且各自是相互關聯的，只應用某一個原則的情況很少。
作為設計體系的一部分，這套設計原則也為設計實踐提供了理論依據。本章引用中后臺產品設計中一些常見的案例，并以簡潔凝練的語言，分析總結了這四個基本原則的實際應用方法和注意事項。
本章大綱如下：
一、對齊原則
任何元素都不能在頁面上隨意擺放，每一項都應該與頁面上的另一項或多項存在某種視覺關聯。即使對齊的元素空間上是相互分開的，但在水平或垂直位置上也會有一條“隱形的線”把它們連在一起。
在界面設計中，將元素進行對齊，既符合用戶的認知特性，也能引導視覺流向，讓用戶更流暢地接收信息。
1. 左對齊
左對齊是將文本信息或視覺元素沿垂直方向向左對齊的一種對齊方式，左側會有一條“隱形的線”，將彼此分離的文本或元素連在了一起。
文案類、列表類、表單類等排版會常用到左對齊的方式，這能讓用戶順著視覺流的方向，快速高效地接收信息或填寫表單內容。
2. 右對齊
右對齊與左對齊相反，右側會有一條“隱形的線”，將文本信息或視覺元素連在一起。
在表格或表單中使用右對齊，可以實現快速對比數值大小，建議數值的格式保持統一。常規類數值可以統一使用千位符，如「1,024」；金額類數值可以保留小數點后兩位，如「￥88.00」。
3. 居中對齊
居中對齊是第三種常見的對齊方式，中間會有一條“隱形的線”，將文本信息或視覺元素連在一起。
居中對齊會形成一種更正式、更穩重的外觀。盡管這是一種合理的對齊方式，但邊界是“軟”的，“對齊線”的強度也較弱，所以會顯得中規中矩。通常，首頁的功能介紹文案以及數據、金融等類型的產品界面會使用這種對齊方式。
4. 兩端對齊
兩端對齊也稱方形左右對齊，因為文本信息的左右兩端均對齊。
通常在商品信息結算、帶有輔助說明的列表等場景中會使用兩端對齊的方式，不僅能讓橫向的文案更具關聯性，易于用戶接受信息，也能使排版顯得更加工整和嚴謹。
二、對比原則
對比可以有效地增強頁面的視覺效果，同時也有助于元素之間建立一種有組織的層級結構，讓用戶快速識別關鍵信息。
需要注意的是，要想實現有效的對比，就應當拉開元素之間的差異，差異越大，對比效果越明顯。
1. 字體對比
字體對比包括：襯線體和無襯線體的對比，如 Georgia 和 PingFang；字重粗細的對比，如 Regular 和 Semibold；字號大小的對比，如 14px 與 20px；字體顏色的對比，如 #333 和 #999。
當界面或模塊的標題字體大而粗、且顏色較深，正文字體小而細、且顏色較淺時，信息層級關系更明顯，字體對比效果將更理想。
2. 顏色對比
顏色對比包括：色相對比，如 Red 和 Blue；飽和度對比，如 S100 和 S60；明度對比，如 B100 和 B60。
下圖中的百分比堆疊面積圖利用不同維度 (區域) 的色相對比，清晰的反應每個數值所占百分比隨時間或類別變化的趨勢，對于分析自變量是大數據、時變數據、有序數據時各個指標分量占比極為有用。
3. 大小對比
大小對比就是在同一畫面里利用大小兩種元素，以小襯大，或以大襯小，使主體得到突出。大小對比主要體現在面積或體積兩種維度上的對比。
在下圖的 Dialog 中，主體圖片的面積相對于商品信息文字的面積得到最大化突出，主次更加分明，視覺沖擊感也更加強烈。
4. 水平與垂直對比
水平與垂直對比，是指水平分布的視覺元素與垂直分布的視覺元素在橫縱方向上的對比。
在排版上，水平與垂直對比可以打破單一呆板的排列方式，在保持對齊的基礎上，豐富了界面元素的空間表現形式，減輕了用戶的疲勞感和無味感。
三、親密性原則
如果信息之間關聯性越高，它們之間的距離就應該越接近，從而形成一個視覺單元；反之，則它們的距離就應該越遠，從而形成多個視覺單元。
親密性的根本目的是實現組織性，讓用戶對頁面結構和信息層級一目了然。
1. 水平空間關系
為了自適應不同尺寸的屏幕，同時保持橫向上控件的關聯性，因而采用柵格布局的方式來組織擺放元素和控件，保證布局的靈活性。
同一控件內部的元素，橫向間距上也會有“親疏”之分，以體現組織性。
2. 垂直空間關系
在復雜的頁面或模塊設計中，縱向上需要使用高、中、低三種規格的間距來區分信息的層級關系?；凇冈g距」8px，三種規格可以是 24px (高間距)、16px (中間距)、8px (低間距)。
注：縱向間距公式：y=8+8×n。其中 y 是縱向間距，8 是元間距，n≥0。
另外，增加「分割線」等視覺元素，也是有效劃分頁面結構和信息層級的常用手段。
四、一致性原則
可以把「一致性」理解為「復用」，相同的元素在整個界面中不斷復用，復用元素可以是線框、顏色、控件、文本格式、空間間距、設計要素等等。
一致性的根本目的是統一元素，并增強視覺效果，降低用戶的學習成本，幫助用戶快速識別出這些元素之間的關聯性。
1. 線框復用
同類信息的載體可以是相同粗細的線框、相同投影的卡片、或是相同顏色的底面，注意保持樣式屬性值的一致，以及上下左右間距的一致。
2. 顏色復用
在界面設計中，相同的功能提示、圖表數據、文字層級、按鈕、圖標、分割線、背景等，應使用相同的顏色，保持色彩體系上的統一，避免同類型的元素使用不同顏色給用戶造成認知困擾。
3. 控件復用
使用統一的導航、按鈕、彈框、圖表、選擇器等控件，既可以提高設計者和開發者的工作效率，避免重復造輪子的現象出現，又可以保持界面設計的一致性，降低用戶的理解成本，提高使用效率。
4. 格式復用
相同類型、維度或級別的文案，應使用相同的展現格式。注意標題、正文、輔助信息的層級關系，使用統一的對齊方式，讓關聯性高的信息之間形成一個視覺整體。
本章小結
1. 對齊
任何元素都不能在頁面上隨意擺放，每一項都應該與頁面上的另一項或多項存在某種視覺關聯。
2. 對比
對比可以有效地增強頁面的視覺效果，建立一種有組織的層級結構，如果想讓元素不同，那就讓它們截然不同。
3. 親密性
如果信息之間關聯性越高，它們之間的距離就應該越接近，從而形成一個視覺單元，這有助于組織信息，減少混亂。
4. 一致性
一致性的根本目的是統一元素，并增強視覺效果，降低用戶的學習成本，幫助用戶快速識別出這些元素之間的關聯性。
好久沒有發文章了，今天順叔和大家一起聊一聊卡片式設計，無論是WEB還是APP卡片式設計運用的比較多，很多UI設計師比較偏愛這樣的表現，卡片式設計會給人一種視覺上的享受，也能對于界面具有層次感。但往往在卡片設計中有一些技法還是需要了解，不能因為卡片式設計而卡片式設計，要能更好的應用到界面場景中。希望在這次分享中一些知識點能幫助到大家，之后的幾篇系列文章中，順叔會從界面中比較趨勢的設計技法進行分析，希望能幫助到一些設計的小伙伴。
教程前的引言
卡片式設計這幾年比較流行，同樣這樣的設計表達也是個趨勢，應用在APP PC界面中至今還流行著，從事UI設計的都會知道卡片式設計，具有把內容整合模塊化，從視覺，個性化體驗上進行呈現，是設計師在設計時常用的一種表現，同樣也具有獨特的創新概念。
在一些項目中，一些客戶會說這個設計的APP界面有點太白，沒有層次感怎么辦，那這時你應該和客戶說在APP設計中運用了現在比較流行的一個表現手法，卡片式設計，可以解決在畫面中有個性化 、變化、 層次感的設計。那客戶又問什么是卡片式設計呢？
一、什么是卡片
無處不在的卡片設計具有個性的美感和很好的易用性，是以文字標題，小標題， 圖形或圖片組成的模塊化，以塊狀形式規整的整合內容，讓內容更規整化，視覺上更個性化，也是操作上快捷的內容信息入口。更直觀的表達內容信息和快捷跳轉操作。成為當今在設計中一個比較流行趨勢，而卡片在設計中也占用一定的優勢，讓整體更加的有層次感，在運用起來也比較方便，從視覺、體驗、交互都具有不錯的優點
設計效果圖展示
順叔為了這個文章特意設計了兩個案例，通過這兩個案例進行一些講解。請見下圖：
二、卡片設計優勢
1.趨勢
無論是大平臺 還是小平臺的產品都會運用這樣的卡片式，跟風式設計趨勢，也讓卡片式設計成為了一個現在常用的優勢，不過卡片式設計的確有很好的效果
2. 層次感
具有一定的層次感，能在頁面版式中起到設計上的不同，個性化變化，頁面層次感區分強烈，能更好的體現提煉出內容
3. 規整化
卡片式設計以圖片、 圖標 、LOGO、 標題、 整合到一起 以塊狀的形式在界面中展示，更規整的排版呈現。雖然內容多會導致頁面亂，一個模塊包含內容之后就會規整不少，也給頁面設計上帶來了更好的視覺
4. 視覺體驗
卡片式給整個頁面會增加視覺上的體驗，特別那種大圖片卡片式更具有視覺上的沖擊力，背景襯托出前景卡片式設計。同樣對卡片式也感覺到舒適感。卡片式設計還是需要根據整個布局、 產品需求 、功能進行設計。以達到最好的用戶體驗、視覺體驗。
不要為了卡片設計而卡片設計。
5. 易用性
卡片式設計在易用性和靈活性上比較高，在響應式設計中同樣應用的也比較多一些。能更好的有序排列。
6.簡約設計
簡約設計會更顯得品質，不需要過多的進行裝飾，哪怕就是一個白色的色塊，上面點綴有色彩的圖標和標題 副標的變化，也會覺得顯得高大上，就算是一個帶有顏色的色塊卡片，也無須過多的設計 內容上的標題 、圖標、 按鈕就足以支撐起卡片
7. 交互效果
在卡片式的設計中會有一些動效交互，比如整體卡片放大、 縮小 、左滑、 右滑，可以整模塊化滑動 縮放。整體效果增加了不錯的視覺交互體驗
三、卡片正確設計知識
一般在界面設計中卡片的存在的意義和表現手法都是什么樣的呢，下面為大家舉例了幾種常用的正確的設計表達姿勢。希望小伙伴在設計的同時有所靈感和參考，把一些表現手法加入到自己的設計中，適合才最重要?？ㄆ皆O計還是要根據整個風格和整個布局而進行展示，在做進一步的對比和布局中以最好的效果為最終展示方式，總結分析幾個常見代表例子，如有不全請討論補充，下面就是一些例子
1.卡片式形式一
以色塊為主體并用現在比較流行的漸變色組成，其中四邊為圓角，同樣色塊下邊陰影襯托出主題，這個是在卡片中設計比較常見的運用手法，卡片的長高在設計中也是根據結構，內容功能而進行設定。正方形，長方形都是一個表現得手法，在色塊上面標題文字，圖標，圖形是整個卡片的布局的形式，無非就是左右布局和上下布局
應用場景：卡包、天氣、類別、入口、優惠劵，卡劵
此圖片來自于網絡
2. 卡片式形式二
這種形式共同點都是在頭部C位出現的卡片式設計，其中承載著標題，副標題，以及圖文版式，不難發現，如果圖片有顏色，那么下面是白色底，這樣在白底上面色塊的出現還是比較簡約凸顯卡片，如果背景有顏色，卡片也有顏色那么卡片的凸顯程度就不會那么強，圖二很多在會員卡設計中常用的比較多，也比較簡約，另外兩個共同特點背景有顏色，一般底部背景顏色就是整個界面的主色調，背景有色塊，上面就用白色卡片，卡片上方標題、 文字、 圖片呈現。只不過排版的方式有所不同而已，在很多APP設計中，這樣的表達也很多，通過主色調可以很融合的把上面的狀態欄，導航欄融為一體視覺上統一性，底部背景顏色延續下來，上面凸顯白色卡片，這樣更具有視覺感和層次感。白色的卡片不需要過多的修飾，更能體現的上面的文字和圖片。
應用場景：會員卡，滑動卡片，圖文標題，入口
此圖片來自于網絡
3. 卡片式形式三
這種形式上圖下文字，或者是上標題，下圖片的形式，這種形式特別在圖片素材的選擇上尤為重要，有視覺效果好的圖片通過剪切，處理，合成，攝影，插畫等等方式，出現的圖片質量上好的話可以帶動整個設計的逼格，通過有效的圖片傳達，文字傳達，讓用戶更清晰的了解。這樣的形似一般在入口或者列表的形式出現的比較多，同樣也能體現出整體化和視覺化
應用場景：滑動卡片，圖文標題，入口，列表
此圖片來自于網絡
4. 卡片式形式四
大圖卡片式，一般以攝影圖片，插畫形式，文字壓與圖片之上，這樣的效果更具有沖擊力，也能顯得出比較潮流。體驗也很不錯，放大視覺，展示內容，圖片相結合，讓瀏覽者更愿意多看一會。表達的圖片與文字內容相符，做到圖文交融的程度。一般這樣對于圖片的選擇上還是比較要求嚴格的。沒有質量的圖效果會降低。
應用場景：列表，說明，入口，天氣
此圖片來自于網絡
5.卡片式形式五
列表卡片設計，這種形式一般白色的卡片，上面標題，頭像，按鈕，扁平插畫形式體現，更多應用在一級頁面的下方內容，以及二級頁面的列表頁或者集合頁，整體弱化背景以白色為主，給予圓角及陰影承托出層次感同時，體現上面內容部分。每個模塊的單元體具有統一的視覺。
應用場景：列表，集合頁，入口
此圖片來自于網絡
6. 卡片式形式六
大卡片式設計，表現為一塊特大的卡片式，上面會有標題，按鈕等信息，同樣表現出突出層次感，個性化設計的特質。體現出內容，一般背景有顏色上面卡片為白色，如下面背景為白色，那么卡片的形式也可色塊，在對比上有個反差，才能突出卡片的作用性。
應用場景：提示，說明，優惠劵，劵，入口
此圖片來自于網絡
以上總結的幾種卡片的形式，在設計中可以根據情況而設計，卡片多樣化，布局多樣化，適合自己產品的才最重要，雖然在界面設計中常用的設計，但不要盲目的為了卡片而卡片套用設計，這樣起不到作用反而效果達不到理想程度。希望幾個卡片形式總結能給大家帶來一些靈感和啟發。
同樣在這些卡片中會有一些基本的共同的特點
共同的特點是
1. 四個角都是圓角
2. 根據潮流漸變色或白卡片
3. 色塊下的陰影，色塊下的陰影更能體現出層次
4. 卡片上面組成部分，標題，副標題，圖形，按鈕，圖片，頭像
5. 字體大小，字體顏色的變化
6. 一般卡片應用在會員，列表，說明，優惠劵，分類，類別，集合頁，歡迎頁等場景常見
三、卡片正確設計知識
為了講解文章，順叔臨時構思一個產品原型，而快速進行了簡單的設計，一個第一版，一個優化版，主要為了講解一下這個卡片設計一些問題，
以下此圖為構思的原型圖
經過分析原型圖之后開始進行設計，首先設計一個版本的，如果這樣卡片布局設計，這樣色彩搭配的情況下，會怎么樣呢，整體設計用了藍紫色為主色調，首先鋪藍紫色的色塊作為背景，然后上面放白色卡片，以至于卡片上詳細的內容，比如數字，圖形 能更好的豐富支撐卡片。同樣數據流也是比較重要的C位。也是比較重要的位置。接著根據原型圖下面有兩個卡片，通過扁平化設計，以色塊為主設計一個藍色，一個橙色的卡片，上面并有圖標，頭像，以及標題，兩個顏色的對比，更讓視覺有沖擊力，整體看這個設計并沒有什么，但有個問題在于單個模塊拿出來效果的確都不錯，但組成之后上面的卡片C位讓下面的兩個帶顏色的卡片搶了視覺，當打開這個界面的時候視覺落點在彩色卡片上，那么這個整體設計上就出現了問題，上面的數據，白色卡片其實是比較重要的，而且整個畫面都是卡片毫無設計上的變化，
那么只能在這個基礎上在進行優化，其實大家在做設計的同時也這樣，在考慮功能模塊前提下，用戶體驗，也要考慮視覺體驗，那么視覺從哪方面來，色彩、層次、版式等等方面。那么能不能在進行一下優化呢，其實還是有空間在進行優化。以下圖為第一版
設計第一版
根據上面的設計在進行優化，同樣保留白色卡片部分元素，在卡片與卡片之間放一些顏色的圖標，這樣更好的給功能上快捷入口，也能給卡片設計增添了變化。使得整個畫面更靈活
雖然白色卡片，但有一些色彩的點綴，也讓白色卡片活躍起來，把顏色的卡片改成白色卡片，從上到下的版式舒服多了，也沒有那么跳。整個風格更簡約，同時功能也更全面。
調整后
從原型圖，在到設計第一版，在到優化調整之后，證明一點，卡片不要因為卡片而套設計，反而會失去效果，考慮功能模塊，用戶體驗，視覺體驗也一定讓整體舒服。一直都說，繪畫中需要有主有次，設計中也一定要有主，有次的進行設計。這樣層級關系才能更清晰。
但這些條件一定是從，體驗、色彩、布局、版式等方面進行對比和研究的。設計不要先著急做設計，前期的進行思考，邏輯清楚了，在進行設計的時候會更加的順暢?？ㄆ皆O計，大家都在應用，希望這個文章能給大家帶來一點點知識點，那就不枉費我在熬夜寫這篇文章。
不為別的，只是一個喜歡分享的肉團子。這篇文章就寫到這里，如果喜歡請給個贊吧。如內容有沒說到的地方，各位可以進行補充，以上兩個圖你稀罕哪個呢？
顏色是感知的問題。每種顏色代表不同的定義波長，但是我們每個人對顏色的感知都取決于我們的感知能力。此外，我們都有與顏色相關的不同文化或背景關聯。
有很多很棒的文章和視頻，介紹了色彩理論和色輪，還有許多用于生成調色板的工具。但是有時您會在實踐中發現這些文章不太好用，顏色組合不完全匹配或所生成的調色板在您的項目環境中效果不佳。
所以你會怎么做？您如何開始思考和查看顏色，使它們更易于選擇以及調整您的需求？
諸如互補和單色，飽和度和亮度之類的色彩理論術語并沒有吸引他們。
因此，我開始以不同的方式分解色彩，方法是從繪畫和室內設計等傳統視覺和圖形藝術中汲取靈感，并以對我們作為UI設計師所做的方式有意義的方式對其進行取景。
匹配調色板并平衡配色方案
也許您已經按照所有的色彩協調和顏色理論教程進行了準備，并生成了一個免費的調色板，但是您注意到這些顏色似乎不太匹配，也許它們看起來比較粗糙或不專業。
創建良好的配色方案就是與色調，陰影和溫度匹配的平衡。要在設計應用程序中成功做到這一點，您需知道要拉動哪些杠桿。
色彩理論提供了一些公式，可用于啟動調色板，這是理解調色板的重要基礎。但是創建漂亮的調色板不僅與這些公式有關，還與平衡色調，陰影和溫度有關。
這些是我們可以推拉的“杠桿”，可以為我們的UI設計實現更加平衡和獨特的顏色組合。
因此，首先，回顧一下這些杠桿的作用。
色相是用于描述所見到的每種色調的通用術語。
飽和度指的是我們正在查看的特定顏色的主要顏色系列。白色，黑色和灰色通常被稱為無彩色。
明度也指顏色的明暗程度。色調相同的顏色，明暗可能不同。例如，絳紅色和粉紅色都含有紅色，但前者顯暗，后者顯亮。
色溫-色溫更多地是關于我們如何感知所看到的色相。并且我們傾向于將它們分為暖色和冷色。
暖色-通常是通過增加色調中的紅色或黃色來獲得的顏色。這些往往會喚起激情，舒適，活力和運動的感覺。他們使我們想起陽光和熱量。
冷色-是增加藍色和綠色的顏色。這些趨向于喚起，清新，冬天，靜止，平靜。他們使我們想起冰，雪和水。
色彩模型和色彩空間
要獲得一些技術知識，您可能聽說過3種不同的顏色模型，這將有助于我們更好地理解光和顏色的協同作用。
CMYK使用減法混色。它指的是光線反射物理白頁的方式。顏色的重疊導致黑色。由于頁面無法投射光線并向您發光，因此頁面必須具有反射光。將這些顏色混合在一起就可以掩蓋頁面的白色，從而減少了可以反射的光量。
RGB稱為光的加法混合。它指的是數字屏幕向我們投射光的方式。您在全亮度下的顏色會導致我們看到白色的重疊。有點像被明亮的泛光燈所蒙蔽。
HSB-代表色相，飽和度和明度
HSB顏色模型為我們提供了放射狀的顏色，其中我們具有一定范圍的色相，飽和度和明度值。
這就是我們的眼睛和大腦如何解釋顏色HSB就是我們的眼睛所看到的一切，而與它是從屏幕還是在紙上投射的光線無關。
因此，出于為UI設計選擇顏色的目的，我們將使用HSB顏色模型。
顏色屬性
您經常會聽到兩種較大的顏色分組。暖色和冷色。
暖色通常被認為是主動色，這意味著它們會引起更多關注。
冷色通常被認為更被動且后退一些。
根據色彩的豐富程度和它們如何平衡，您可以使柔和的暖色充當被動元素，而更鮮艷的冷色則扮演主動角色。
現在，您了解了顏色如何在屏幕上顯示以及如何設置我們的設計應用程序。讓我們談談如何在我們的設計軟件中使用和推動這些杠桿，并平衡我們的配色方案和調色板。
為了得出這些不同的顏色類別，我們將集中于推和拉色調，飽和度和亮度（HSB）的控制桿。
在數字屏幕上，我發現有一個公式和安全范圍的飽和度和亮度，可以每次為每個類別創建一個完美的調色板。
為簡化起見，我將主要顏色分為6種通常可以識別的主要顏色類別。這些反映了我們在日常生活中談論顏色時通常傾向于指代顏色的方式：
1.寶石色調
S：83-73，B：76-56
這些顏色是飽和度很高的色調，以寶石命名，包括寶石藍，寶石紅，紫水晶紫色，檸檬黃和翠綠色。想一想紅色寶石項鏈或皇家紫色的魅力。這些顏色富麗堂皇，深沉，并賦予豪華感。
2.粉彩
S：14-21，B：89-96
柔和的顏色屬于淺色系。粉色，淡紫色和淡藍色是常用的柔和色。這個家庭的顏色通常被描述為“舒緩”。我們通過降低飽和度和調整色彩來創建這些顏色。
3.大地色調
S：36-41，B：77-36
這些是自然界中常見的顏色?？梢酝ㄟ^將純色與白色，黑色或灰色相結合來創建它們。從廣義上講，這些是中性色。它們受到樹木，森林，海洋和天空的色調的影響，被用以模仿自然色彩。我們通過增加飽和度和調整色調來創建大地色調。
4.中立
S：1-10，B：99-70
純中性色包括黑色，白色，米色和所有灰色，而接近中性色則包括棕色，棕褐色和深色。這些是通過使色彩去飽和來創建的。它們可以與以上任何類別配對以創造平衡。我們通過降低飽和度并調整色調，色調和陰影來創建中性色。
5.熒光燈/霓虹燈
S：100-63，B：100-82
在物理世界中，這是由霓虹燈管或紫外線反應涂料的顏色創造的，但在數字世界中，我們可以通過將非常明亮和高度飽和的顏色應用于我們的設計來獲得相同的效果。我們通過增加亮度和色調來創建它們。
6.陰影
S：0-0，B：0-100
兩種主要的陰影是黑色和白色，其他陰影也包括不同程度的灰色。
UI顏色組合
最佳的用戶界面設計結合使用一種顏色類別以及中性和陰影。
您實際上只需要這些類別中的1或2種顏色即可設計參與整個用戶界面。
我們為什么不這樣談論顏色
作為數字設計師，我們傾向于避免給這些配色方案分類，因為術語似乎是為混合自然色彩的畫家，印刷設計師和室內設計師保留的。但是從實際的角度來看，當我們仍在學習色彩理論并使我們的眼睛習慣于選擇可以一起使用的色彩時，我發現以這種方式引用色彩在UI和數字屏幕設計中可以非常有用。
這不是一門精確的科學，但是您會看到如何以這種方式思考顏色并掌握一些杠桿和數字，以指導您幫助用戶創建更令人愉悅和精致的調色板。
理解色彩理論的基礎和原理很重要，特別是當涉及到實際應用時，它就顯得尤為重要。引用不同的學科并找到對我們有用的類比可以帶來很大的不同。
作為UI / UX設計師，最重要的是，無論您如何去實現，您都能夠有效地使用顏色來傳達信息并為用戶創造最佳體驗。
UI 設計，是用理性方法，來滿足需求，并帶來美學享受。
本篇探討 UI 設計如何做到理性。全文共有三部分：有哪些理性，如何做到理性，止步于理性嗎。
UI 設計主要有四類理性：基本原則，基礎知識，風格設定，風格把控。四類理性有一個共同核心：活學活用。
共有四個基本原則：對齊，對比，親密，重復。
先說對齊。
秩序產生美。對齊作為一種基本秩序，主要事關整齊美觀和閱讀體驗。
對齊一般分左對齊、右對齊和居中對齊。
從閱讀體驗角度來講，左對齊通常勝過居中對齊，所以絕大部分文章和 UI 界面都是左對齊為主。
從美感角度來講，居中對齊往往勝過左對齊，所以一些強調美感勝過強調閱讀效率、篇幅不長、同時需要細品的詩或歌往往采用居中對齊。
從空間利用率角度來講，右對齊往往是左對齊的一種補充。比如微信的發現頁面，最重要的圖標和文字左對齊，次要的右箭頭和其它信息右對齊。
UI 設計追求閱讀體驗、美感和高空間利用率，所以這三種對齊方式大部分時候都會同時出現。整體而言，是以左對齊為主，居中對齊和右對齊為輔。
再說對比。
嘈嘈切切錯雜彈，大珠小珠落玉盤。音樂講究韻律和節奏，設計也追求錯落有致的節奏感。這種節奏感，很大程度上靠對比實現。
好的對比可以帶來視覺張力，就是抓人眼球的吸引力，同時也能起到主次分明和視覺引導的作用，最終帶來良好的閱讀體驗。
一定程度上，對比是無處不在的。只要存在不同，就存在對比。比如大小之間的對比，不同顏色之間的對比，文字與圖標/圖片之間的對比，不同對齊方式之間的對比，等等。
一般而言，對比需要果斷：若不同，就徹底不同。因為一般情況下，充分的對比能帶來更好的視覺張力和更好的閱讀體驗。
第三說親密。
設計就是分類，張小龍曾如是說。分類中最重要的原則是親密，還有一個副產物是留白。
性質相同或相似的元素，我們會讓它們看起來離的更近，關系更親密。親密成就分類，分類能化繁為簡。
最后說下重復。
設計追求一致性，一致性主要靠重復來實現。被大量“重復”的元素，比如這篇文章里的字體大小和字體顏色，既保證了一致性，又提高了效率。
基礎知識主要包括：手繪、顏色、版式設計、字體設計、品牌設計、動效設計、插畫設計等專業知識。
UI 設計師可能不用畫卡通人物或插畫，但一定會畫圖標和 logo，這些也會用到手繪。作為造型基本功，需要掌握一定手繪技能。
顏色方面，最重要的是能夠很好感受和理解顏色傳達出來的感覺，也即顏色的“精神之美”，這塊主要依賴審美和練習。
配色方面，推薦軟件里的 HSB（色相、飽和度和亮度） 模式，這種模式很好理解，也方便調色。另外還強烈推薦從照片中吸取顏色，因為照片往往會和“生活”、“自然”有一定關聯，“生活”和“自然”是非常重要的素材和靈感來源。從色卡中選擇顏色也是一個不錯的選擇。
版式設計就像是選秀節目中練習生的舞臺表演，考驗的是唱跳、表情管理、舞臺魅力、臨場應變等綜合實力。
“活學活用”環節，會結合例子分享版式設計。
字體設計、品牌設計、動效設計、插畫設計等方面，個人經驗不多，就不分享了。文末會附一份推薦書單，囊括基本原則和部分基礎知識。
風格設定，即上篇提到的“精確描述”，是在動手設計之前，先探索出合適的風格，并把它精確描述出來。
好的開始是成功的一半。風格設定是一個開始，極其重要。如果風格設定只做到 60 分，稍微打點折扣的執行結果就是不及格。所以，如果要把設計做到 85 分，風格設定一般要做到 90 分。
風格設定猶如在茫茫大海中行船，首要目標是把握方向，核心訴求是精準。海上并無現成道路和導航可循，只能依靠繁瑣而嚴謹的推理和計算。
風格設定的次要目標是劃一個既清晰界定風格、又清晰指明“發揮范圍”的“圓圈”，核心訴求是周密。因為需要清楚知道“圓圈”以內代表什么，“圓圈”以外代表什么。
在“精準”和“周密”上同時做到優良，風格設定才能做到優良。
既精準又周密的風格設定，通常無法一蹴而就：“風格設定”階段一般只能做到七成，剩下三成需要在設計過程中繼續探索和打磨。下一大段會結合案例分享具體方法。
風格把控有兩層含義，一是實現當初設定的風格，二是在實現的基礎上做到統一和規范。
只要嚴格在“圓圈”里發揮，實現當初設定的風格并不難。那做到統一和規范難嗎？往難了說就是需要做大量瑣碎工作：以聯系的眼光看待所有設計元素，并把它們分類規整好，注意分類不宜過多，同時分類邏輯上不能出現明顯問題。往簡單了說就是大量復用已有的設計樣式。
風格把控就是在劃定的“發揮范圍”內，利用設計知識和經驗，以規范的方式實現規劃好的風格。
活學活用作為四類理性的共同核心，最典型的應用場景是版式設計。
活學活用有兩個要點：正反結合，風格第一。
所謂正反結合，是指設計知識既能正著用，也能反著用。最常見的例子是對齊原則，大部分時候是正著用，但如果想要營造活潑的感覺，也會反著用：故意打破對齊原則。
除了對齊原則，其它設計知識，比如重復原則，也可以反著用。
本文配圖就是一個例子：圖片左上角、右上角和右下角分別散布著裝飾元素（橫線、圓環）和 logo，在裝飾元素的出現次數上，沒有用重復原則。過年家里掛燈籠一般至少掛兩個，同一裝飾元素一般至少出現兩次，以達到一種和諧和較為熱鬧的裝飾效果。
我在裝飾元素的出現次數上沒有用重復原則，而在出現位置（相似位置）、元素大?。ㄏ嗨拼笮。┖驮仡伾ㄏ嗨祁伾┥嫌昧酥貜驮瓌t，同樣達到了和諧效果。之所以沒在裝飾元素的出現次數上用重復原則，是想放一個隱喻在這里。
所謂風格第一，是指設計風格永遠第一，設計知識永遠第二。知識服務風格，切不可重知識輕風格。
《倚天屠龍記》中，張三豐教張無忌練習太極劍時，要他忘記劍招，只記劍意。某種程度上，版式設計也要將“劍意”放在第一位，“劍招”服務“劍意”。
對比原則也有反著用的時候。有一條關于對比的知識：對比要果斷，若不同，就徹底不同。這條知識能解釋百事可樂 logo 里紅色與藍色的強烈對比，但解釋不了山本耀司旗下大部分服裝那千篇一律的黑色——單色，無對比。
設計最重要的是感染力，感染力主要來自個性、態度、價值觀這些風格層面的東西，而非設計知識這些技法層面的東西。
當一個設計，技法高超而風格不足時，感染力和魅力就會不足，這也是設計師經常會犯的錯誤，大家需要注意。
可以簡單分成三步：規劃，成形，細化。下面結合微信 Redesign 這個案例來說明。
設定風格，用到的方法姑且稱之為“紅綠燈”法。“紅綠燈”法借鑒并改良了我在網上看到的一種“紅黃綠卡片法”（在紅、黃、綠三種顏色的卡片上寫下不同的設計關鍵詞），并和“情緒板”法有相似之處：都包含關鍵詞定位和圖片參考兩部分。
先說關鍵詞定位，共有兩步。
第一步類似頭腦風暴，結合產品屬性、用戶屬性、市場情況、個人喜好等因素，把能想到的設計關鍵詞全部寫下來。合適的不合適的都要寫，只要想到了就寫下來，確保有二三十個。如果關鍵詞數量不夠，這個步驟可以多重復幾次，直到夠了為止。這一步設計師和需求方都要參與進來，在提供關鍵詞上雙方是平等關系。
這個微信 Redesign 是個具有探索性質的小練習項目，基于微信 7.0，有兩個目的：首先保留原有交互體驗和品牌識別度，其次在視覺上更年輕、更流行?？梢酝ㄋ桌斫獬桑阂豢钗⑿拧捌つw”，主要給年輕用戶和趕新潮的中老年用戶用。
結合產品屬性（社交類、工具類、內容類）、用戶屬性（年輕用戶為主）、市場情況、個人喜好這些因素，這一步想到的關鍵詞如下圖所示。
第二步是歸類，就是把第一步產生的所有關鍵詞歸成“紅黃綠”三類。如果關鍵詞不夠，還可以再補充。這一步依然是需求方和設計師共同參與，但需要設計師來主導。
紅色關鍵詞代表不能踩的紅線：不能這樣做；黃色關鍵詞代表黃燈警告：這樣做不太合適；綠色關鍵詞代表暢通無阻：應該這樣做。
需要注意的是，綠色關鍵詞最好控制在 3-4 個之間，如果超過 4 個，就需要分成主綠關鍵詞和次綠關鍵詞，主綠關鍵詞依然要控制在 3-4 個之間。這樣做有兩個考量，一是確保簡單和重點突出，二是也更容易實現。
回到第一步的關鍵詞上來。設計中當然可以用“擬人”、“隱喻”等手法，所以“擬人”這個關鍵詞顯得意義不大，故刪去?！皽貪櫋焙汀坝H和”，“老少皆宜”和“大眾”在語義上都存在一定的重復，所以刪去后者。刪除這類不合適的關鍵詞后，剩余關鍵詞就按“紅綠燈”法歸類，歸類后情況如下。
（微信 Redesign 之按“紅綠燈”法歸類后的設計關鍵詞）
關鍵詞定位已就緒，再來找參考圖片。
可供參考的圖片有兩大類：照片和 UI 界面。UI 界面也有兩類：線上作品（真實項目、練習作品等）和上線作品。
做 UI 設計，參考什么樣的圖片？個人建議，做什么類型的設計，就重點參考什么類型的圖片。比如 UI 界面就重點參考 UI 界面，banner 就重點參考 banner。
UI 界面的設計，個人喜歡重點參考知名產品的上線作品。單從視覺角度來說，上線作品的質量可能比不過一些線上練習作品。但是已經上線的知名產品的 UI 設計，其風格的形成往往都會經過很多推敲，會有很多比較成熟的設計思路在里面。
參考別人的設計，最重要的是參考設計思路，其次才是參考表現形式。這種設計思路，有時候能從網上找到，但更多時候靠自己推測。
微信 Redesign，根據“很多年輕人在用，且風格比較流行”這條主線，找來了 QQ、抖音、B 站、小紅書、陌陌、Soul、騰訊視頻、愛奇藝等產品的截圖。這些產品的截圖，看完一圈后，就會面臨一個問題：以圖標為例，這幾個產品的圖標，風格各異，但基本都具備“年輕”和“流行”的特點，那應該參考哪一個？
這時就要求助關鍵詞定位。除了“年輕”和“流行”，主綠關鍵詞還有一個“輕微老少皆宜”。最符合“輕微老少皆宜”的是愛奇藝和騰訊視頻：很多老人和小孩也會用這兩個 App 看視頻，網上公開的數據也能佐證這一點，所以它們的設計一定會照顧中老年用戶的審美。
最后，出于個人偏好，我選擇重點參考愛奇藝的圖標風格，具體而言就是：深淺雙色、較粗(1.5pt)描邊、圓潤風格。
紅黃綠三色關鍵詞及重點參考圖片就緒后，就可以動手設計。
我一般會把界面設計粗略分成三大部分：版式風格、元素風格、元素大小，元素為圖標、圖片、按鈕等，然后去一一實現。
先說版式風格。
用的主要綠色關鍵詞是“更流行”和“更年輕”?！案餍小卑ǎ焊笞痔柕捻撁鏄祟}、盡可能用留白代替分割線和卡片的“無界”風格、圓形頭像、更多留白更多舒適、等等。“更年輕”包括：更圓潤的搜索框、輸入框和圖標、更年輕更具活力的配色、等等。
再說元素風格之圖標風格。
圖標主要參考愛奇藝 App：其一，底部導航和發現頁的圖標都是深淺雙色加較粗的描邊；其二，除了更圓潤以外，部分圖標還變 Q 了。
最后說元素大小。
以這個小項目為例，最主要的元素大小是圖標大小和字體大小，它們會影響整個設計的感覺。通常情況，元素越小，給人感覺越精致、越高端，此其一；其二，可能是年輕人和老年人視力存在差別的原因，越小的元素往往代表年輕人的審美，反之則代表老年人的審美。
元素大小主要運用的綠色關鍵詞是“輕微老少皆宜”。也就是說，需要在年輕人和中老年人的審美中找到一個平衡，所以元素大小基本直接參考了微信 7.0 的設計，個別地方做了微調。
最后，出來的效果如下圖所示。
這份設計我發在了網上，部分網友留言說看著不夠好，不太舒服，有一個表達的比較具體——“雖然用了大面積留白，卻讓人感到緊迫...”。
基于網友的留言，我仔細審視了這個設計，最后發現問題主要出在頁面（發現頁為例）左右兩側：留白過小。
當初之所以這么設計，是想通過頁面左右兩側較少的留白制造一種內容將要撐破屏幕的感覺，從而營造一種活潑的感覺。注意，彼時“活潑”還沒出現在“黃色”關鍵詞里，上文兩張關于關鍵詞的圖都省略了中間探索和優化的過程。
很多網友之所以沒有感受到活潑而只是覺得不太舒服，至少有兩個原因：第一，整個設計的基調是簡約、清爽，有一定的年輕感和流行感，但沒有太明顯的活潑感，硬往里面某個地方塞“活潑感”并不和諧，大家也難以感受到；第二，單純就“活潑感”而言，做的依然不到位，比如圖標與右側文字的留白，可以比圖標與左側邊界的留白大，方能更好彰顯活潑與活力。
考慮到“輕微老少皆宜”這個綠色關鍵詞及微信主要是工具型和內容型產品，“活潑感”用在這里并不十分合適，于是放棄，并將“活潑”歸為“黃色”關鍵詞。此處留白的目的就回歸其本職工作：整體和諧與舒服。于是就把留白相應調大了。
另外一個優化的點是“眼睛”的形狀：微信圖標、看一看圖標、表情圖標、朋友圈里將點贊和評論折疊起來的圖標都有一雙“眼睛”，這雙“眼睛”起初是豎著的橢圓形，很萌，也比較低齡化。為了盡可能的“輕微老少皆宜”，這里統一把“眼睛”由豎著的橢圓形改成了圓形，弱化了“萌”和“低齡化”的感覺。
還有一塊是顏色上，拍攝視頻動態的圖標有用到藍紫色。這個紫色基本符合“更年輕”、“更流行”，但不太符合“輕微老少皆宜”，所以最后放棄了紫色，保留了藍色。
遵循主綠關鍵詞里的“輕微老少皆宜”，其它優化的點有：微信圖標尖角處的圓角調小，刪除啟動頁與黑色"WeChat"字形成對比的綠色圓點。另外還有一些視覺層面美觀、和諧、舒適度的優化，比如顏色、留白、圓角大小、字體大小方面的微調。
優化后的微信 Redesign，整體效果如下圖所示。
凡事預則立，不預則廢。UI 設計如何做到理性，最核心的是設計風格，規劃、成形和細化都緊密圍繞設計風格展開。
最后，嘗試總結下“紅綠燈”法的優勢，主要有四點：精確、周密、穩妥、高效。
關于設計風格，傳統規劃方法一般只有三四個“綠色”關鍵詞。
“紅綠燈”法擁有“紅燈”、“黃燈”和“綠燈”三種顏色的關鍵詞，從而確保大方向更準確?！凹t綠燈”法會產生20個以上的紅黃綠關鍵詞，從而確保劃出來的“發揮范圍”更周密，極少有疏漏。
在“成形”這個設計環節，一旦踩到“紅線”和“黃線”，規劃好的紅黃綠關鍵詞都會馬上發出警報，從而大大降低“違規踩線”行為的發生次數，確保設計執行環節的穩當可靠。
“紅綠燈”法通俗易懂門檻低，需求方可以較為深度參與“規劃”環節。需求方在“規劃”環節的深度參與，理論上可以降低后期的返工和修改次數，從而確保整個設計過程的高效。同時理論上也能夠提高設計師和需求方雙方合作的愉快程度。
UI 設計，始于理性，但無法止步于理性，還需要超越理性。注意，這里的理性，僅指設計知識的相關理性。
超越理性主要有兩點：直覺，其它知識。
直覺是指一種能夠快速感受和評估設計優劣的感覺。良好的直覺往往快而準。
感知和評價別人的設計時，用到的幾乎全部是直覺。審視自己的設計時，也離不開直覺。
在審視自己的 UI 設計時，直覺主要發揮兩個作用：第一，囿于知識儲備或表達能力，有些地方就是解釋不清，這個時候就要靠直覺去感受去判斷；第二，直覺往往會作為檢視設計的最后一道關卡，也是最重要的一道關卡。
直覺來自哪里？
個人觀察是，直覺往往和審美正相關。比如一個設計師，他掌握的設計知識有限，經驗有限，對自我的要求也不高，最終的作品往往不出彩。但如果他審美好的話，往往能夠分辨出不同設計方案之間孰優孰劣。
如果你想就設計稿征求別人的意見，請去找那些審美好的人。
其它知識是指設計知識以外的所有其它知識。比如 iPhone 上刪除應用前應用圖標的抖動，其靈感應該來自生活中的搖頭求饒或嚇得發抖，抖動的幅度和頻率則需要利用物理學和數學方面的知識。
優秀的設計，一定會從生活中汲取大量靈感，并廣泛利用社會類、人文類和理工類學科的知識。就拿數學來說，在好的設計中，一定是個?？停阂驗槟阈枰煌５陌从嬎闫?，從而計算不同設計元素之間的比例關系和各自的大小。
汝欲學詩，功夫在詩外。遣詞造句這些文字技巧只能是寫詩的基礎，而非關鍵。寫詩的關鍵在于你對生活、對世事的積累和感悟，在于你的思想是否深刻，情懷是否充足。
寫詩如此，做設計亦如此。設計知識只是做設計的基礎，而非關鍵。做設計的關鍵在于“其它知識”?！捌渌R”非本文重點，就不展開了。
UI 設計里的理性，主要是各類設計知識。理性的核心在于活學活用各類設計知識。
理性嚴謹的做 UI 設計，可以簡單分成三步：規劃，成形，細化。好的開始是成功的一半，一個高質量的規劃顯得尤為必要。
用“紅綠燈”法做規劃，并指導成形和細化工作，會更精準、周密、穩妥和高效。
UI 設計，是七分理性，三分直覺。審美越好，直覺越準。
優秀的 UI 設計，一定會從生活中汲取大量靈感，并廣泛利用設計以外學科的知識。
推薦書單
[美]Robin Williams《寫給大家看的設計書》
[日]佐佐木剛士《版式設計原理》
[日]伊達千代《色彩設計的原理》
[日]小林章《西文字體1、2》
左佐《設計師的自我修養》
左佐《治字百方》
作者：王鐸(Micu設計)
這篇主要說一下版面和圖形使用，對高手來說可能有些老生常談，但對移動端界面設計或許會有點參考價值，用幾分鐘看看吧。
界面美不美，除了構圖之外，另一個重要手段的就是如何處理留白，也可以理解成版率。留白就是為了凸顯層次、突出內容。
手持設備屏幕較小，決定了信息顯示是有限的。用戶有效接受信息并不與界面內提供的信息量成正比，有的時候提供的越多，用戶反而真正接受的越少。妄想滿屏都是信息是不可能的。用戶越來越受不了滿屏的信息了。
讓用戶接受該接受的有效信息，是關鍵。
在設計界面的時候，因為內容和頁面都比較多，為了保證頁面與頁面的統一性，首先需要設定頁面內容四周的留白。在設定頁面的間距后相應的內容圖標，圖片等的安排就確定下來了。用這樣的方法能使調整出來的頁面更為條理化。
紅色色的部分就是內容。在頁面中一般會有導航的存在，那么內容區的版面是從導航下面計算的。
界面四周增加留白。這樣的界面很容易集中用戶的視線到少數的內容上去，突出了焦點，整體給人一種典雅高級的感覺。
反之，縮小留白或者不留白，頁面會顯得更豐富更充滿活力。而圖片的展示空間會增加，沖擊感增強，讓界面更顯得富更有張力。
根據頁面的內容不同和功能點，適當的調整界面周邊的留白非常重要。一般圖片本身比較有意境，可以直接采用“出血”的方式，不留白或者少留白。
下面介紹一些版面的小規律、小技巧。
1.取其精華，一塊顏色也能定天下！
提取主要的信息，通過對整個頁面的顏色進行調整，從而提高版面使用率。將一個或多個功能點作為主信息，提到首頁中進行設計，從達到想要的視覺效果。這樣處理后的界面設計不僅能顯得大氣有張力，而且展現出來的信息聚合度高。
在缺少圖像素材的情況下，如何讓界面顯得有張力，整體感強，呈現出來的版面率高。
單色背景留白，凸顯主要信息。要求圖標或者文字，相對簡潔，能夠很好地和背景色融為一體。再通過線條和規則的圖形來分割留白區域，增加層次感。
做好這些的前提是，設計師要明確主要信息，以及它們之間的關系。
結合產品特點巧妙的運用大色塊，將變化的信息用顏色區分出來。讓用戶最直觀的感知信息的變化。
2.多色塊靈活分割，加強內容使用率
圖片素材少，還可以采用多色塊進行分割，讓界面顯得不那么單調。
加強內容使用率可以通過色塊（臨近色或是互補色）的延伸或是圖像的重復來組織頁面版式。將圖片和色塊進行統一化排版布局，整體基調能使頁面豐富化。圖片與相同大小的色塊可以保持界面的統一性與簡潔性，色調的一致的統一性和連續性使頁面更為整體，這樣看起來的頁面就像一張圖片一樣有張力。并且這種方式讓用戶感覺點擊的區域也會增加，從而操作也變得便捷起來。
3.構圖不拘一格，找到最合適的內容版率。
橫向和縱向分割，使界面顯得整齊、穩定，而斜向分割讓界面沖擊感強。
使用不同的構圖方式，穿插性地將少量的圖片整合在構圖的形狀中，能讓界面變得活躍而富有活躍性。這樣的表現方式還能將產品的氣質融入進去，淋漓盡致地展現。有節奏感的設計更為取巧地加強了版式率。在界面設計中，圖文的穿插可以引導用戶的視線，讓原本簡單的內容變得有趣。在層次上，也可以區分內容的主次性，讓閱讀更加的輕松。
4.簡約化桌面或主頁，讓界面越近越美
常用方式：圖標、加大文案字號、序號、數字等來達到加強版式率的運用，提高視覺上的豐富性。
圖標表達
人們越來越認同扁平化，一方面是因為扁平化的圖標看上去清新簡潔，用戶理解快。另一方面，與圖標搭配的背景更加單純，要么留白，要么炫簡，盡可能減少給用戶在視覺上干擾。好的扁平化圖標不是簡單地刪減細節，而是著重凸顯有效的信息。
圖標是最為直接的表達方式，簡單明確的圖形，能讓用戶通過對圖標的認識快速找到想要的功能和需求點。圖標與文案的搭配有效的降低了閱讀時候的疲勞感。從而加強了界面內容的節奏。運用圖標的設計條理清晰，功能明確。
信息化圖標能給產品增色。有趣的圖標設計不僅能很好的將功能點進行區分，也能好的將軟件的特性和品牌展現出來。
把圖形融入到界面中，可讓內容更為豐富，層次更加的分明。
5.突出重點文案，調整版面率，讓信息更清晰。
調整文字大小將調整版式的使用率，使原本空的界面內容顯示的更為飽滿，用戶閱讀起立更為直接。使用較大的字號進行加強頁面使用率能讓頁面顯得更為信息。突出重要的引導文案，加強了軟件的情景感和帶入感。快速引導了用戶對功能的理解，從而準確的使用。
在頁面中我們可以強調重點數據或功能詞等來區分界面中的層次感。讓用戶的視線更為集中。
6.串聯圖片，讓它們講故事，視圖化版面。
這種設計方法更多的是將文案用圖形或插圖展現出來。在數據頁面和引導頁中最為常見。
一段文案一副插圖的引導頁更為有特色，給用戶的情懷感更強。這種設計手法也是最容易體現產品特質和吸引眼球的。圖案的易讀性高，能在極其短暫的時間內快速傳達給用戶信息。用圖像來講故事，是設計中最根本的表現方法，也更是最為受歡迎的表達方式。
圖在界面中的運用
三種方式：摳，邊界關系，殘缺
1.切摳弄，制造純色留白！
在處理圖片素材的時候，常常會碰到圖片背景雜亂，產品不夠突出的問題。在設計之前我們可以對素材先進行處理，將產品直接摳出來。利用這種方式可以找到產品的形狀，越明確的形狀越能反映用戶對產品的認知度。產品的獨特性能快速明確的表達給用戶，用戶從潛意識第一時間的判斷到產品的類型和使用特性。
下面是一個曲奇餅干的網站，將主餅干的勾出來，進行層次感的區分。在產品介紹中采用了側面的實物摳圖，體現出了曲奇餅干最為真實的厚度。運用碎落的餅干塊虛化拉開產品的層次。深色的背景與餅干對比強烈，直接凸顯了實物的形狀。讓用戶一目了然，食欲大增。從而增了用戶的購買欲望。
在很多的電商APP中也常采用摳圖，去除多余雜亂的信息，利用產品的形狀直接體現不同商品的特點。這樣的界面用戶閱讀起來輕松愉悅。
2.建立邊界，再打破邊界，破出重圍
如果需要展示的信息較多，采用分割區域的方法，可以使界面顯得整齊干凈。而當信息較少時，設計師可以大膽選用“局部出血”的方式，建立邊界，再突破它，增加層次感和沖擊力，以凸顯主題。
一定要記得設定好的內容范圍是為了讓頁面顯得整體化，而不僅僅是擺放和拼圖。
在網頁設計中有時候會見到這種方式，其實在手機、平板等UI設計中我們完全可以套用。
運用圖片的穿插來區分背景和產品或形象的層次感，處理完的界面更加富有生命力。放大需要突出的主形象，把它作為第一焦點展現在用戶的眼前，有種強烈的“面對面”感受。
在APP中采用將圖片局部突出出來，能拉開信息的層次，將需要突出的圖片信息第一時間展示給用戶。一方面可以方便和引導用戶點擊，另一方面在上下滾動的長副瀑布流里，適當地打破平衡，可以豐富頁面的節奏感。
在ICON的設計中我們也常用到破圖的方法。在統一的圓角矩形中，將表達寓意的圖形局部超出，使圖標更為有空間感和靈活性。
采用這種方式設計的圖標空間感強，層次感強烈，能使產品形象顯得更為突出。
在字體中也經常運用到破圖的方法，讓字體更為生動。在破字的過程中也能引發出不同的創意點。
大美青海字體設計我把數字9破出了方塊。而在優車尚品字體的設計中，我通過品字的破圖找到了車的聯想，讓整個字體設計的更為貼切靈動。
3.沖出畫面，只保留局部，讓產品再大一點！
有時候，我們拿到素材，在處理后發現，圖片比較平常，用戶一眼就知道是什么。這個時候，可以考慮保留局部的方式，營造殘缺美，增加時尚感。不要小看用戶的的腦補能力，當然，這種方案還是要與客戶或者產品經理及時溝通，殘缺美不是所有人動能接受的。
我們將圖片進行放大，找出產品特點。選擇能撐起整個頁面構圖的位置，切除不必要的圖形，讓圖片沖出畫面！這樣處理后，頁面顯得非常富有張力，激發了用戶想看到產品整個形象的欲望，起到產品預熱的效果。
在WATCH的預熱官網中，設計師將圖片放大，裁取有特點的部位進行展示，引導了用戶點擊觀看產品的整體形象，激發了用戶更多的去了解產品的特性。
從版面角度看，局部放大裁切圖片，增加了留白，增加了版式率，讓整個頁面顯得飽滿，微距的效果使用戶與產品更貼切。
這一篇主要理順了一下版面和圖形使用知識，并不全面，大家還是以欣賞為主。看完了能有個留白、破圖的印象就不算白看。
設計大方向上的東西終于絮叨得差不多了，我知道其實大家都懂，就是不知道從何下手而已，下一篇來點小方向的實用東西，歡迎大家留言。
藍藍設計的小編 http://www.syprn.cn