如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
小小開關中的大學問
故事要從我搬到新出租屋開始講起。半年前搬到新的出租屋后，房間里配置的洗衣機也比之前的大了一倍，而且操作區上分布著的密密麻麻的文字和按鈕讓洗衣機看起來更高級了，然而這種對它的好感并沒有持續多久。在我第一次使用它時，我將衣物放進洗衣機后，選擇好時間和洗滌方式，按下了啟動按鈕（如下圖右側白色按鈕）。
按下后洗衣機發出了“滴”的一聲，在我的認知里它應該是開始工作了，但是10秒過后沒有任何抽水聲和洗衣服的聲音。我疑惑地想：“是不是剛才并沒有成功啟動？”，于是再次按下了啟動按鈕，又是“滴”的一聲，但是這次我等了 1 分鐘沒有任何反應。之后的十分鐘里，我與這臺匪夷所思的機器“交涉”多次才理解了它的運行方式。這臺洗衣機啟動后需要等待大概十幾秒才開始運行，但是在我按下啟動按鈕后我得不到任何反饋或者提示來告訴我洗衣機已經開始工作了，所以疑惑的我又按下了一次啟動按鈕，然而令人崩潰的是這臺洗衣機的啟動和暫停按鈕是一體的，我第二次按下實際是進行了暫停操作，從而導致我第二次的困惑。
如果你是這臺洗衣機的設計師，你會怎么解決上述的問題呢？
可能你的心中已經有了答案，在回答之前我們先試著探究問題的本質。
人們不管是使用日常物品還是與機器進行交互，都會面對兩個階段的問題。一個是「執行」，一個是「評估」。執行時用戶需要理解如何操作，操作后可能會有什么結果。評估時用戶需要知道具體發生了什么。作為設計師我們要通過合理的手段幫助用戶解決這些問題，保證交互的可用性和流暢性。
通常我們會使用「意符」在用戶執行前告知用戶如何理解、如何操作、操作后會有什么結果。在評估前通過「反饋」告知用戶結果是什么。
對于意符的定義，在《設計心理學 1-日常的設計》一書中，作者唐納德·諾曼做出了這樣的解釋：
人們需要某種方式了解他們將要使用的產品或服務，某些標識表明的用途，會發生什么，有什么樣的替代方案。人們尋找蛛絲馬跡，尋找任何可以幫助他們應對和理解的符號。任何可能標識出有意義的信息的符號非常重要。設計師需要提供這些線索。人們所需要的和設計師必須提供的，就是意符。除此之外，優良的設計要求對產品的目的、結構和設備的操作與使用者進行良好的交代。那就是意符的作用。
簡而言之，意符就是在用戶使用前，機器為了讓用戶更好地理解和使用它而做出的提示。而反饋就更好理解了，機器在我們操作后做出的反應就是反饋，沒有反應同樣也是一種反饋。
下圖展示了機器與用戶如何進行交互。一個合理的設計可以讓用戶快速順暢地進行 1234 四個步驟進而完成任務，而糟糕的設計會讓用戶不斷重復這個流程。之所以會出現糟糕的設計，就是因為在步驟 1 和 3 沒有進行合理的意符提示和反饋提示讓用戶摸不著頭腦，進而導致用戶根據自己的猜測和過往經驗來進行操作，最后得到非預期的結果。
回到文章開始時的洗衣機開關問題，因為開始和暫停按鈕是一體的，在沒有任何意符和反饋的情況下我按下這個按鈕時我并不知道我啟動的是開始操作還是暫停操作。
我們可以就這個問題列出以下解決方案：
1.增加文字提示，如啟動時在顯示屏上顯示“已啟動”，暫停時顯示“已暫?！保?/span>
2.增加語音提示，啟動開關后使用語音告知用戶“已啟動”或“已暫?！?。
當然解決方案有很多，每個人都可以根據場景想出不同的解決方案。
與現實機器的開關類似，在 UI 設計中我們如果進行開關設計也需要遵循相應的設計原則。
一個合理的開關設計主體包含的意符分別有兩種：
1.表示當前狀態；
2.表示操作后的狀態。
主體之外我們還可以添加輔助提示更加清晰地傳達意符和反饋。
接下來將介紹一些常見的開關類型和輔助提示類型，最后總結出體驗優質的開關設計方法。
二.開關類型
1.icon
在 UI 設計中最常見的開關可能就是 icon 了，即由單一的 icon 通過顏色或圖形的變化來表示開或關的狀態。因為交互設計從古到今并沒有統一的嚴格標準，所以到底是將開關 icon 的樣式設計為「當前狀態樣式」還是設計為「按下之后的狀態樣式」并沒有一個約定俗成的規則。然而，對比而言如今各類 App 設計中常見的且體驗比較好的方案還是將開關樣式設計為當前狀態樣式。如下圖iPhone自帶相機的實況照片開關icon就是顯示當前狀態。
然而，并不是說將開關樣式設計為當前狀態樣式做法普遍且體驗更好就可以這樣做了，有些開關的設計因為使用廣泛，已經在用戶的心智中扎根，我們如果強行改變反而適得其反導致體驗變差。最典型的就是視頻和音樂的播放暫停開關，他們表示的就是操作后的狀態而不是當前狀態，如下圖。
因此，大部分應用的開關類 icon 都是混用當前狀態和操作后狀態的，如下圖嗶哩嗶哩的視頻播放界面，播放暫停開關 icon 表示的是操作后狀態，彈幕開關表示的是當前狀態，而視頻鎖開關 icon 又變成了表示操作后狀態了。
是否統一倒不是關鍵，關鍵是我們是否能夠讓用戶理解相應的意符和反饋，目標是讓用戶在操作開關前能夠知道當前狀態是什么，操作開關后當前狀態是什么。
舉一個反例，下圖中的美顏相機的夜拍模式開關就沒有直觀表現出當前是開還是關，這種有歧義的設計可能讓新手用戶手足無措，可能本來未開啟的功能讓用戶誤以為已開啟，導致拍出來的照片不符合用戶預期。
由此我們可以看出，單一的 icon 開關如果沒有其他的輔助提示會造成意符和反饋的缺失，進而形成較大的歧義性，用戶會在疑惑中按照自己固有的心理模型和過往經驗進行判斷，體驗因此降低。
2.主體與開關分離（分離式）
上一部分舉了美顏相機的反例，其意符和反饋不明產生的歧義問題導致了用戶的困惑，但使用「主體與開關分離」（后文一致簡稱為“分離式”）的開關設計可以解決這個問題，它在意符和反饋層面都給予了用戶提示，可視性很強，完全解決了開關狀態無法被用戶感知的問題。分離式開關指的是，主體不再充當開關，只當做開關的名稱或icon，另外制作一個開關傳達意符和反饋，解決了當前狀態與操作后狀態混淆的問題，其通常的樣式如下圖。
如下圖，Faceu激萌不同于美顏相機設計方式就是將主體與開關分離，很清晰地傳達了當前開關狀態。
大部分App的設置頁面使用的開關都是主體與開關分離的方式，如下圖。
顯而易見，分離式開關直觀展示了當前狀態，在消除歧義方面優于 icon 開關，但同時缺點也很明顯，它占用了過多頁面空間并美感欠佳。
3.名稱變化
名稱變化指的是開關依賴于其名稱的變化告知用戶開關的當前狀態和操作，常見的類型如下：
部分 App 會將開關的名稱變化的方式統一，但也有部分 App 會將這兩類進行混用，即一個是表示當前狀態，一個是表示操作。
下圖為部分 App 的名稱開關，我們可以將上圖的開關名稱類型的序號對號入座。
表示操作的按鈕文字具有一定引導性，用戶容易感知和觸發，反之，表示狀態的按鈕文字由于不具有引導性，如果用戶沒有對這類按鈕形成使用習慣甚至難以意識到它是可點擊的，因此我們可以利用其特性進行逆向應用引導用戶的行為。比如在直播App中，我們希望引導用戶關注主播，又試圖避免用戶關注后又取關主播。我們就可以將“關注”制作為表示操作，文案寫為“關注主播”（屬于1.開啟...）。將“取消關注”制作為表示當前狀態，文案寫為“已關注”（屬于7.已開啟...）。前后的顏色進行區分，“關注主播”的按鈕制作得對比度強，吸引力大，“已關注”做得弱一些，讓用戶誤以為不可點擊，如下圖的斗魚直播。
然而，名稱變化的開關由于語言的模糊性，仍然造成了部分歧義。我們可以發現很多App的名稱變化開關設計中，都會在操作后加入其它提示來消除歧義（如：toast 提示），有些App則并未加入，因此在后文中會著重介紹輔助提示的優點和使用方法。
小結
icon、分離式、名稱變化，如果按照消除歧義的優劣排列的話，大概是 分離式>名稱變化>icon。
那這樣的話是不是應該把開關都換成分離式呢？當然不是，分離式雖然在意符和反饋的層面很充分地消除了歧義，但是其也有明顯的缺點，分離出的開關會占用部分空間，可能會影響美觀，因此我們需要根據需求和頁面結構選擇最適合的開關類型。
那名稱變化和 icon 類的開關如何消除歧義呢，我們可以通過添加下面介紹的輔助提示來解決。
三.輔助提示
1.環境暗示
環境暗示指的是用戶在操作開關前，開關以外的區域給予用戶的提示，這些提示本身存在于交互流程中并不是我們刻意加入的，用戶根據這些提示可以判斷當前狀態以及按下開關后的狀態。
例如在觀看視頻時，當用戶去按下視頻播放按鈕前，用戶會通過當前圖像靜止與無聲音這個環境暗示明白當前狀態是可能是視頻未播放，所以應該按下播放按鈕讓視頻播放。
再比如得到 App 的夜間模式，用戶可以通過當前界面的樣式判斷當前是否已經開啟了夜間模式，如下圖。
看下圖，如果沒有環境暗示，你能分清得到的夜間模式的開關哪個當前狀態是夜間哪個當前狀態是日間嗎？
因此，環境暗示的優勢是我們不需要進行另外設計其他的意符和反饋告知用戶當前狀態，環境給予的暗示已經足夠直觀。
2.模態/非模態提示
當用戶按下開關后模態和非模態提示可以在反饋層面告知用戶，讓用戶知道自己是觸發了開啟還是關閉。
常見的模態提示控件是「警告框（Alerts）」，非模態提示控件是「提示框（Toast）」，前者提示強度大，使用在一些危險、重要的反饋中，后者則使用在一些輕量的提示中。
介紹 icon 開關的部分我們提到了美顏相機的夜拍模式的 icon 開關狀態難以區分，但美圖秀秀在這里使用了頂部的非模態提示在反饋層面告知用戶當前狀態，很好地解決了這個問題，如下圖。
拉勾網的設置中，隱藏簡歷為危險操作，用戶極有可能由于開關名稱的歧義或由于疏忽觸發開關導致簡歷被隱藏從而錯過工作機會，因此此處設計了一個形式為警告框的模態提示來告知用戶當前狀態以及潛在風險。
3.輔助文案
輔助文案指的是在主體（主體可能是開關名稱、icon 或二者皆有之）之外另外放置一些文案信息來充當意符和反饋。下圖案例就是高德地圖的下車提示的開關，開關的主體是名稱，但是下面的一行輔助文案很清晰地傳達了當前的開關是什么狀態。
4.其他輔助提示
并不是所有提示都需要讓用戶看見，我們可以給予用戶其他感官的信號告知用戶當前開關的狀態。
在現實生活中，我們會通過鑰匙在鎖中扭動發出的聲音判斷鎖是否被打開，通過觸摸感受摩托車是否繼續震動判斷其是否已經熄火。
同樣，在 UI 設計中，我們也仍然可以使用聽覺和觸覺來消除開關的歧義。一個比較優秀的案例是高德地圖，當用戶打開下車提示之后，會出現語音提示“已開啟下車提醒”，它充分考慮到身處戶外的用戶可能并不能很方便地獲取屏幕上的視覺信息，因此使用語音的形式提示用戶。
小結
輔助提示很好地補充了開關在消除歧義上的不足，但我們需要合理使用否則就會產生不必要的視覺噪聲。如下圖，試想音樂的暫停播放開關如果加入的 toast 提示會怎么樣呢？由于我們已經可以通過“手機是否發出聲音”這個環境暗示獲知當前的開關狀態，如果再加入 toast 提示必然會出現不必要的視覺噪聲。
4.總結
介紹完開關類型和輔助提示后，我們如何將其應用到我們的產品中，設計出無歧義或低歧義的開關呢？
如果我們選擇的開關類型已經足夠的消除歧義，如分離式，我們就不太需要額外地增加輔助提示了。但是如果使用容易造成歧義的開關，我們可以按照（開關類型+輔助提示 1 +輔助提示 2 +......）的公式進行設計，即一種輔助提示不足夠消除歧義，可以使用多種一起。
舉個上文的例子，高德地圖的下車提醒開關的設計就是「名稱變化開關+輔助文案+語音提示」 的組合。
然而，任何設計都不是完美的，很多地方都需要我們做出妥協，雖然我們可以選擇合適的開關類型和輔助提示解決歧義問題，但隨之而來就可能出現其他問題。如分離式開關消除歧義效果很好，但是占用空間且不美觀，模態和非模態提示給予用戶的反饋比較強，但是可能打擾到用戶。
綜合上文提到的三款相機軟件作為案例，如下圖，我們可以發現在消除歧義的過程中避免不了對用戶造成的干擾或頁面美觀度的降低。我們很難去評判Faceu激萌、美顏相機和美圖秀秀哪個設計得更好，它們只是在易用性和美觀性之間找到了它們所認為的平衡點。具體如何設計，還是要具體問題具體分析。
那么我們應該如何進行取舍呢，在這里我們要考慮另外的因素。我們可以從以下角度分析，使用頻率、用戶人群、潛在風險等。
使用頻率：使用頻率越高，用戶對操作的熟悉度越高，歧義對用戶造成的理解與記憶成本就降低了，設計可以偏向低干擾和美觀度，反之使用頻率越低，歧義對用戶造成的理解與記憶成本升高，設計就應該偏向于易理解。
用戶人群：不同的用戶人群的風格偏好、認知能力是不一樣的。例如，我們要設計一款目標用戶為年輕人的相機產品，設計風格簡約，此時我們比較偏向的設計方案可能就類似美顏相機。反之，如果我們的目標用戶是中老年人，就要偏向于易用而犧牲美觀度，方案轉而偏向美圖秀秀或 Faceu 激萌。
潛在風險：開關的切換如果會導致潛在風險，設計就應該偏向于易理解，且需要使用模態提示告知用戶風險。例如用戶如果關閉了推送通知開關，會導致接收不到實時重要的信息通知，此時不僅要使用易識別的開關類型，還需要添加模態提示告知用戶風險。
我們可以將這些考慮角度放到雷達圖，如下圖所示，最終形成的面積越大我們越應該將按鈕制作得易理解、易使用，反之我們可以偏向于將開關制作得更美觀犧牲一些易用性?？紤]到一些特殊產品的特殊用戶屬性，我們可以在下圖中增加其他考慮角度，其并不是一成不變的。
以上是本次對開關設計的思考，看似小小的一個開關，包含的學問卻不勝枚舉。作為一個互聯網產品設計從業者，一定要善于感受生活，用設計師細膩的內心去打量、洞察身邊的一切事物，發現美與不足，思考改進方法，并在這個過程中逐漸提升自我的價值。
轉自：站酷-Ballen貝林
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
介紹表單設計里經常會犯的錯誤~
無論是注冊流程，還是信息輸入的界面，表單都是產品設計里最重要的組件之一。本文重點介紹了表單設計里常見的注意事項。不過這些只是通用的規則，實際應用中總有例外~
少于6個選項的情況，建議全部顯示
把選項內容放在下拉框里，不僅隱藏了選項內容，而且需要兩次點擊。如果大于5個選項，建議用輸入選擇器，如果超過25個選項，建議加上搜索功能~
輸入框長度可以暗示內容長度
輸入內容的長度決定了輸入框的長度。這種做法適合應用在一些固定長度信息的情況，比如銀行卡號、電話號碼、郵政編碼等。
標簽頂部對齊
相比左對齊，標簽頂部對齊的表單用戶完成率更高。移動設備屏幕大小有限，頂部對齊的效果也更好（標簽文案長度不可控）。然而在大量數據輸入時，還是可以考慮左對齊標簽，因為瀏覽更，還能節省高度。
不要把占位符當做標簽
用戶在輸入的時候就會看不到標簽內容是什么了。詳見Nielsen Norman團隊的總結。
*也可以參考Google的做法，默認把占位符當作標簽，輸入時標簽移動到輸入框上方
將復選框/單選框上下排列
上下排列方便瀏覽閱讀，橫向排列選項內容會被選框控件隔開。
指出錯誤在哪
告訴用戶具體哪里出錯了，以及錯誤的原因。
等用戶填完了再進行驗證
不要在用戶正在輸入的時候就去驗證，除非這能幫到他。例如在創建一個有字數限制的密碼～
不要隱藏幫助信息
盡量默認顯示幫助信息。如果信息太復雜，考慮在輸入時放在輸入框的旁邊。
不要用*星號表示必填項，標出選填字段
用戶不一定知道星號代表什么含義。還不如明確的標出哪些是選填字段。
標簽和輸入框成組
標簽和對應的輸入框形成一組，他們之間的間距要比組與組之間的間距小，這樣用戶不會困惑標簽是屬于上面還是下面。
按鈕的文案描述具體意圖
比如按鈕上的文字建議寫“注冊”，而不是“提交”。
主次按鈕有層次區分
關系近的內容成組
太長的表單讓用戶感到不知所措。有邏輯地分組能讓用戶更快地理解表單。
轉自：站酷-大秘密mimi
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
自從上一篇發文得到一些發表方向，以后決定以個人獨特的總結以及符合商業的思維邏輯來寫作設計拆解的相關文章教程，前期我還是按大類去詮釋我的整個想法，看看大家的反饋，如果理解門檻還是有很大障礙，我在后期的文章中會再將文章細化出來。
拆解分類
拆解1、視覺面積的影響
拆解2、明度對比的影響
拆解3、色彩的影響
拆解4、視覺位置的影響
拆解5、豐富層度的影響
拆解6、其他（浮層、常用點、角標、動效）
拆解1、視覺面積的影響
視覺面積越大層級越高，而且與比較層的面積倍數有關，參考層如果為1級，那比較層的等級是由和參考層的倍數有關，大一倍那就為2級，大兩倍那就是3級，依次類推。這是美術基礎中的近遠的關系，越靠近的視覺點越大，越靠遠的視覺點越遠，這樣也很容易知道，越近獲得關注越高，越遠越低。
界面舉例我們告一段落，這里再說一下比較常遇到的文字視覺面積，這塊很容易被忽略，其實文字也是具有視覺面積的，而且有不同的視覺大小。接下來我會將所有可能性都拆解出來。
同字號大小，不同粗細層度的影響/文字的邊寬形成的格式塔大小就是文字面積，但不一樣的是，文字是線性結構，所以他不是實面，而是虛面，所以它相對于實面來說還是低一個等級，再說回到粗細的層級比較，越粗的文字他是越靠近實面的，所以這就能判斷越粗的文字層級越高這個道理。
同粗細，同字號大小，一個是有文字底塊，一個沒有，這樣有文字底塊的視覺層級會比沒有文字底塊的視覺層級要高，因為有底塊相當于為實面，這樣就比沒有文字底塊的層級要高了
同粗細，不同字號大小，這個不難理解，這個不存在實面虛面的概念了，因為都是一樣的粗細，但是這個格式塔大小不一樣，也就是說，格式塔越大的層級越高，字號越大的層級越高。
拆解2、明度對比的影響
明度對比越高的視覺點會比明度對比低的視覺點視覺層級要高，這里其實也是美術基礎中的空間的視覺差，越遠的物體越模糊（對比?。?，越近的物體越清晰（對比大）。所以對比大的層級會比對比小的層級會高。（這里插一句，色相也是有明度的，不同的色相也是有不同明度解析，這個可以運用到電商banner的配色上）
下面來看看文字和背景不同對比度對視覺層級的影響。我們將統一文字大小和粗細，背景為白色。
拆解3、色彩的影響
有色的視覺點總會比無色的視覺點更吸引人，因為色彩也是美術的一類，給沒有色彩的視覺上色是提升視覺體驗的一步。
文字為例：同等大小同等粗細同等明度的字，有顏色的字體會有更大的關注點。
拆解4、視覺位置的影響
給界面一個橫軸和縱軸，從橫軸的左邊到右邊起視覺層級逐漸減弱，從縱軸的上到下邊視覺層級逐漸減弱。這是因為用戶閱讀習慣的問題，人們習慣從左上方開始往右邊閱讀，然后慢慢的往下讀取信息。
拆解5、豐富層度的影響
豐富層度越高的視覺層級越高，豐富層度越高的點信息量越大，越需要花時間停留。
文字為例：設計過的字體豐富層度會比默認字體高，所以有些需要強調的標題或者banner上的字體都是有精心設計過，為了拉開于界面的層級。
界面為例：界面首頁中的banner是豐富層度最高，其次是金剛區，再是標簽欄。
拆解6、其他
除了上訴的主要層級影響，還有其他一些特殊的影響，我這就說兩三個子吧。一個呢是給模塊直接加投影，硬生生的造成前后層級。還有角標的影響，在干凈的頁面中突然來個提示角標，例如微信有消息時的小角標。還一個就是用戶常用關鍵點，那個視覺層級整個產品中的最高層級，這個需要打破所有規則，這個是由用戶主動選擇的視覺層級點，例如電商軟件的搜索框，不管這個搜索框大小如何，層級怎么低都行，但對于用戶進來，第一個渴望的點就是這里，最后是動效的影響，每個動效就是一個互動，動的東西永遠比靜止的東西有活力更加吸引人。
圖片來源UIGREAT的作者JGM
總結
視覺層級的梳理可以很大幅度的提升視覺規范和用戶體驗，通過視覺層級的分析，可以從不同方面去詮釋復雜的頁面，也可以更好的去處理文本關系。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
正確認識卡片式設計，什么是卡片、總結卡片優勢、卡片正確設計知識通過設兩個案例進行講解，卡片在運用時的技法，望能幫助大家。
今天順叔和大家一起聊一聊卡片式設計，無論是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計，大家都在應用，希望這個文章能給大家帶來一點點知識點，那就不枉費我在熬夜寫這篇文章。
不為別的，只是一個喜歡分享的肉團子。這篇文章就寫到這里，如果喜歡請給個贊吧。如內容有沒說到的地方，各位可以進行補充，以上兩個圖你稀罕哪個呢？
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、網站建設 、平面設計服務。
編輯：藍藍
另外一種探索需要被定義和解決的問題的本質的方法是圏問題。
簡單地說,我們向于用常具體的表達方式來定義問題,這會嚴重限探索解決方案的機會空間。
你同樣可以運用可視化的方法去“圈問題”來跳出這個預設。
在運用這個工具的時候,比起在不同利益相關方的視角之間切換,更多的是要變換看待挑戰的有利視角,例如從零距離、較遠處、10000英尺去看,都會產生對問題的不同看法,以及新的解決問題的空間。
圈問題的定義
首先,在一頁紙的中間,寫下你對問題的定義,把它圈起來。現在考慮一個更廣泛的、更考慮問題所處環境的定義,寫在第一層定義旁,然后把它圈起來。
這樣做一到兩次,每次都讓問題的定義變得更像是放在環境中考慮的,當然,要和原始的問題定義相關。
例如,或許你的團隊正在開發一種液體洗滌劑,瓶蓋有間題,液體很容易流出,搞得一片狼藉。
你可能把問題定義成“瓶蓋封閉的問題”。把它寫在中心,圈起來,這是一個非常具體的問題的定義,也很容易解決。
但就這樣的定義方式,該問題解決起來可能是漸進的、很枯燥的。現在寫一個更放在環境中考慮的問題定義,也許這是一個“倒液體的便捷性問題”,把它圈起來。
第三層再用更抽象的語言去定義:挑戰是“使用無憂,有樂趣”。毎個定義不同,指向的解決方案就不同,最后一個或許是給了足夠的開放的空間,以產生出創造性解決方案的,例如可分離式容器。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
作為交互設計師，天天畫的就是交互稿了。而對于很多新手交互設計師以及想轉行做交互的同學們來說，一定都非常想知道大廠的交互設計師畫出來的交互稿具體是什么樣子的。但和視覺稿不同，交互稿里面體現了太多產品本身的邏輯，難免涉及到一些敏感內容，所以具體的交互稿不太適合直接分享，這就是比較尷尬的問題了。
不過，這不妨礙我為你們做一份交互稿模板。一來我自己也在用，二來可以幫助大家，何樂而不為。
但我必須重點強調一句話：框架是死的，人是活的，不一定要拘泥于某種形式，你可以根據自己的需要自由修改。
第一個是 PPT 型的分頁交互稿，這個樣式最早是從騰訊 CDC 團隊流傳下來的，我在第二家公司的時候就從他們的博客中看到過，當時還用 InDesign 做過一個模板。而我現在所在的團隊用的也是這個，因此我過來后就自己重新用 Sketch 做了一版，方便以后使用。
1. 封面
封面很簡單，就是文檔標題和作者，頂部有一個通用的文檔標題欄，上面的內容包括：
我在 Sketch 中為這個模板中需要改動的內容都定義了 Symbol，比如這個標題欄，你只要選中之后，就可以在右邊的屬性面板中自定義里面的內容。
2. 修訂記錄
修訂記錄這頁，記錄了從文檔建立開始，每次更新的主要內容，以及相關人員，方便后期交接的時候給對應的產品經理、游戲策劃和設計師查看。有時候交互稿更新一次只是修改一小處地方，如果不備注對方就會很難找到，可能以后你自己都會遺忘。
這一塊我也定義了 Symbol 元件，你可以直接復制一行，然后修改里面的內容，「更新內容」的文本支持多行輸入。
3. 目錄
這種分頁型的文檔一定要有目錄，備注好每個模塊對應的頁碼，否則十幾頁看下來都暈了，每次想找到對應的界面還得重新翻一遍。
4. 內容頁面
具體的內容頁面才是交互稿的核心，一般會用小氣泡和箭頭進行標注，然后在右側用對應的數字和它們對應，寫下詳細的交互說明。
結構可以有很多種，比如上面這種豎屏的界面可以是左右結構，如果是橫屏界面還可以是上下結構等等，根據情況自由調整。文字段落的樣式我已經定義好了，直接修改套用就行。
其中最重要的氣泡我也做了元件，選中之后直接在右邊修改數字即可。
5. 導出方式
使用這套模板做好交互稿后，使用 Sketch 的 File -> Export Artboards to PDF 即可將交互稿導出成 PDF 文檔。我很喜歡這個格式，與 PPT 相比，PDF 在任何平臺都可以通用，包括手機、Mac，不用特地裝什么軟件都能很好地打開。
另一種是更常見的交互稿形式，這也是我這幾年進騰訊后一直使用的格式。
如果你曾經用過上文介紹的 PPT 型模板，你一定會發現：它的好處是 PDF 分頁格式非常整齊，比較適合一次性做一個大產品的交互功能介紹，而不適合小功能的頻繁修改。
今天介紹的這第二種，則是更加輕便快捷的類型。
這種長圖型的交互稿，優點很明顯：
來看一張基本樣例：
它的結構分為：
交互稿標題、日期
按照項目、模塊和功能的方式命名（如：電腦管家 V12 -清理垃圾-深度清理圖標化改版），可以地規范交互稿名稱，讓其他人很容易理解交互稿涉及的是什么內容。
相關負責人
對應的產品經理，交互稿的作者，方便評審時或者交接后找人。
需求背景
簡單介紹為什么要做這次設計，出發點是什么，遇到了什么問題。
主要界面
這次設計中，涉及到的所有主要界面，先陳列出來方便大家快速評審和討論，視覺接手后可以根據這些來進行風格設計。
流程說明
有了主要界面后，我們還可能需要對一些操作流程進行說明，比如怎樣發送一條語音消息，怎樣刪除一條會話等等。
異常狀態
最后還要記得檢查一下，每個界面在沒有內容時的空狀態、斷網時的異常狀態，彈出各種通知的位置等等，千萬不要等到開發同學找你的時候才想起來。
上面所說的，就是一份交互稿的常見內容模塊了。
該模板是專門給 Mac 平臺的 Sketch 用的。
下載后（下載方式見文末），打開你會看到這個界面：
里面的每個模塊我都做了 Symbol 元件，你只要選中就可以在右側更改內容了。
比如下面的文檔基本信息：
我還把可能會用到的各種字體大小、顏色、對齊方式都做成了文字樣式：
選中文字后，在右側下拉框中選擇你要的樣式就好。
交互稿用的都是黑白灰，還有藍色作為標注。
我一直用的這幾種，足夠用。
是不是很心動？別著急，先把這個 Sketch 文件保存成 Template（模板）。
然后，你就可以在新建文件時，選擇從模板處新建，直接用這個模板開始畫稿。
下載鏈接：https://pan.baidu.com/s/1Jrv7-JDyf2j2SDvvg0-wrA
提取碼：npq2
備用鏈接：https://pan.baidu.com/s/1yIMSWw7pJuHF4H3BgoyrPA
作者：WingST（寇敬），男，33歲，騰訊高級交互設計師、騰訊學院認證講師，9 年工作經驗的資深互聯網人，曾任 MIG 桌面安全產品部軒轅設計組組長，目前在騰訊游戲 NEXT Studios 工作室負責《樂高無限》創造型沙盒游戲的用戶體驗設計。
負責過的產品有騰訊電腦管家 V11.0、加速小火箭 V2.0、騰訊手游助手、騰訊網游助手等。曾在 OPPO 手機、金蝶軟件等企業工作，有著 PC、Web、移動端等多平臺的豐富設計經驗。
感謝大家的閱讀，末尾做個小廣告，我的新書《交互思維：詳解交互設計師技能樹》馬上就要上市了，這是我自己九年多來做交互設計師的經驗總結，也是市面上第一本詳細介紹交互設計師所應該掌握的職業技能的書，適合所有希望了解交互、學習交互的設計師和產品經理。同時書中也有我進騰訊的成長故事，以及一些個人工作和學習方法的分享，絕對物超所值 → https://item.jd.com/12576242.html
這是我所總結的「交互設計師技能樹」。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
作為視覺設計師你是否會遇到這樣的問題，當需要做一個 loading 或者其他動效的時候，總會或多或少的出現一些問題，如何使用更輕量的 Sketch 直接將矢量圖形轉到 AE 制作動效，如何不再受 GIF 導出的失真問題困擾，如何讓開發完美還原我們的動效設計稿等，如果你也存在這些疑問，那以下介紹的2款插件就可以完美的解決這些問題。AEUX 是由 Google 團隊推出的，運用在 Sketch 和 AE 的一組插件，能將 Sketch 里的圖層以及整個畫板一鍵導入到 AE 里，同時能在 AE 里解決圖形分組和分層的問題，減少導出圖片或者轉入 Illustrator 處理帶來的不必要的重復動作。
以下是我做的一個簡單小案例，通過此次案例將介紹怎么更好的使用這個插件：
首先在 Sketch 內將圖層進行分組，在多圖層的情況下，需要在前期進行動效構思，根據構思在 Sketch 里對圖層進行分組，所做的分組將會是你在 AE 里的合成分組。
方法一：直接復制選中圖層
安裝好插件后，打開 AEUX，選擇你將導入到 AE 里的圖層，點擊 Send selection to Ae，同時在AE里打開安裝的 AEUX插件，在 BUILD COMP 區域出現了從 Sketch 導入的圖層數量，勾選 Precomp groups，點擊將自動加載入 AE 合成里。
方法二：導出json文件
從 Sketch 的 AEUX 面板里點擊 Export AEUX.json 導出 json 文件，打開 AE 的 AEUX 面板勾選中 Precomp groups，將導出的 json 拖入到 BUILD COMP 區域，或者點擊「曲別針」icon打開 json 文件。
這樣導入到 AE 里的圖層是以合成的形式展示 Sketch 里的分組。
如果在 sketch 內，分組圖層不在同一組內，導入 AE 后會出現變形和位移的情況。
如果 sketch 內形狀圖層有投影/漸變/point type 的編輯形狀時，導入 AE 后將出現投影消失，漸變消失，形狀變形的情況，在遇到這種情況時，會通過導出圖片的方式處理。
導入 AE 的 AEUX 面板時如果沒有勾選 Precomp groups，多圖層導入的情況下，組內的圖層都會生成在 AE 中的同一個合成中。
1. Detach symbols
這是一個解除 symbol 的功能，在 sketch 內如果沒有解除 symbol，導入到 AE 里將出現圖形位移和變形的情況。
2. Flatten shapes
AEUX 支持布爾運算，但是在一個組中混合不同的運算符（如添加然后減去）對于Ae來說比較困難。點擊 Flatten shapes 可以合并布爾運算圖形。
3. Images to symbols
Sketch 只能導出它在畫板上看到的內容。如果在 sketch 內圖像的一部分超出畫板邊界，復制到 AE 內部的圖像將出現位移的情況。導出前點擊 Images to symbols 不會發生被裁剪和位移的情況。
1. Come size multiplier：切換倍數
可以設置 sketch 畫板的倍數合成。
2. Auto build artboards：自動構建合成
導入前勾選此功能，在 sketch 的 AEUX面板中復制圖層后，在 AE 里不需要任何操作，它會自動復制圖層導入到創建合成中。
3. Convert to precomp：創建合成
同時選中單一圖層，可以將他們建立一個新的合成。
4. Un-Precomp group：解除合成分組
點擊可以解除合成的分組，變成單一的一個一個的圖層
5. Toggle Visibility：可以一鍵隱藏和顯示所有的父級圖層
6. Delete group layers：刪除父級圖層
雖然現在 AEUX 有些上面所講的功能不能支持，但是在一步步完善，希望可以幫助一些習慣用 sketch 畫插圖的設計師提高動效制作效率，減少不必要的操作步驟。
在動效制作好后，通常我們會導出 mov 然后導入 PS 里生成 gif 格式，但是 gif 會出現質量過低的情況，比如漸變分層，邊緣有毛邊等情況，所以由2017年 Airbnb 團隊開發的 lottie 動效可以完美的解決這些問題，而實現 lottie 動畫需要在 AE 中安裝一款名為 Bodymovin 的插件。
Bodymovin 以 Android/iOS 原生動畫的形式在移動設備上渲染播放，在制作動效時導出 json 文件直接給到開發，可以幫助提高實現動效效率，同時提高動效質量。
1. 它還有很多的優點
2. 在使用中有幾點注意
3. 所需軟件
ZXP installer
下面是一組之前做的頁面加載loading效果，開發小哥哥反饋：實現挺。
4. 步驟
下載ZXP installer：https://aescripts.com/learn/zxp-installer/
下載bodymovin：https://github.com/airbnb/lottie-web
下載之后，點開剛下載的 ZXP，點開頂部 file-open，打開 bodymovin插件。
當出現以下界面時代表已經安裝成功。
意外情況：在用 ZXP 安裝 bodymovin插件的時候出現以下提示。
原因是沒有通過 Adobe Creative Cloud 下載 AE，需要重新通過 Adobe Creative Cloud 下載。
打開AE，After Effect CC – 首選項 – 常規，勾選允許腳本寫入文件和訪問網絡。
打開窗口 – 擴展查看是否添加成功。
調出 Bodymovin 面板，選擇需要導出的合成。
點擊你要保存的 json文件地址，點擊 Render。
點擊 Brown 載入剛導出的 json文件，檢查動效是否有誤。
這時候就可以把 json 文件給到開發，如果 AE 合成中有圖片，需要把圖片放在文件夾內一起提供給開發，同時也會給到一個 gif文件，如果實現有不一樣的地方，開發可以詢問設計師。
如果想在移動端上瀏覽可以打開網址：https://www.lottiefiles.com/，下載安裝移動端客戶端（ios/Android）
注冊登錄成功后打開 Lottie Preview 添加 AE 里用 bodymovin 導出的 json文件。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
我們在設計諸如CRM（客戶關系管理）、OA（辦公自動化）等面向B端用戶的后臺界面時，往往會被各種各樣錯綜繁雜的組件弄得暈頭轉向，不知該如何選擇。有時好不容易選完之后，又會發現有更合適的組件，導致反復修改設計稿，降低了工作效率。那么在對比了幾個常用的組件庫（Ant Design / Element / iView）并結合自身的工作經驗之后，我選擇了一些常用的組件，來和大家簡單總結下它們的使用場景以及可能出現的誤區。
在Ant Design 的組件庫中，分為了通用、布局、導航、數據錄入、數據展示、反饋、其他這七大類組件。今天先來看看數據錄入中的相關組件，我將其又分為了手動輸入以及點擊選擇兩大類。（評分、上傳等特征明顯的組件就不在此贅述了。）
1. 輸入框Input
輸入框是數據錄入中最常見也是最基礎的組件，在需要用戶輸入內容的時候即可選用。
除了常規的輸入框，帶前/后綴、帶圖標、帶按鈕的輸入框也是較常用到的。
在輸入內容中頭/尾是相對固定的時候，我們就可以采用帶前/后綴的輸入框來減少用戶手動輸入，比如網址輸入框就可以加上后綴。
有時候為了幫助用戶了解輸入內容的類型，可以在輸入框中加上圖標，比如輸入用戶名或密碼的時候。
帶按鈕的輸入框最常使用的場景就是搜索框了。
2. 自動完成AutoComplete
自動完成其實是輸入框Input 的一項功能，但是 Ant Design 和 iView 中將其單獨拎出來了，為了避免大家搞混，我們這兒也單獨講。（Element中在輸入框 – 帶輸入建議）
顧名思義，自動完成就是輔助用戶輸入。在輸入一部分內容后，提供相關的備選項，不僅可以減少手動輸入，還能更精準的輸入。常見的使用場景就是搜索框了。
3. 數字輸入框InputNumber
數字輸入框特用于需要輸入范圍數值的場景（電話QQ等號碼不宜使用）。右側的步進器則可以幫助用戶精準控制數值的增減。
當然作為輸入框的一種，也可以加上前/后綴來減少固定內容的輸入，比如%或者貨幣單位（￥、$、元、円）。
1. 單選框Radio
單選框顧名思義就是在一組選項中僅可選擇一個時使用。
由于單選框的選項都是平鋪展示的，所以選項不宜過多，當選項較多時建議采用選擇器Select（后文會提到）。
按鈕形式的單選框也可以被當作標簽頁Tabs 來使用（標簽頁Tabs的本質其實就是單選框）。
2. 多選框Checkbox
多選框則是在一組選項中需要選擇多個時使用。
同樣，由于是平鋪展示，選項不宜過多。
多選框不同于單選框Radio 的是，它可以單獨使用，來表示兩種狀態之間的切換，類似于開關Switch。區別在于開關Switch 會直接觸發改變狀態，多選框則一般用于狀態標記，需要配合提交操作使用。
3. 選擇器Select
選擇器也是數據錄入中很常見的組件，它以下拉菜單的形式來呈現選項（選項較少時建議采用單選框Radio 或多選框Checkbox 平鋪展示）。
除了單選，還有多選的形式。
上文輸入組件中提到的自動完成AutoComplete，其實也是選擇器的一種衍生方式──帶輸入的選擇器。
4. 級聯選擇Cascader
級聯選擇是指，在選擇器Select 選項數量較大時，采用多級分類的方式將選項進行分隔，便于用戶選擇。比如地址選擇，就可以按省市區一層層分類。
5. 穿梭框Transfer
當多選框Checkbox 選項過多時，除了選擇器Select 的多選形式，還可以用穿梭框的形式來呈現。相比于選擇器Select，穿梭框占據更大的空間，當然也可以展示選項的更多信息。
6. 日期選擇器DatePicker
當需要錄入日期的時候，可以選用日期選擇器。用戶從彈出的日歷面板中直接選取即可。
當然，需要錄入一段時間的時候，也可以同時選擇開始日期和結束日期。
7. 時間選擇器TimePicker
時間選擇器與日期選擇器DatePicker 幾乎一樣，從彈出面板中選擇時間即可。
時間選擇器和日期選擇器DatePicker 還可以組合使用。
8. 滑塊Slider
滑塊的使用場景類似于數字輸入框InputNumber，需要在某個范圍內錄入數值。不同的是，它可以直接選取而不用手動輸入。
當然，也可以和數字輸入框InputNumber 配合使用。
還可以選擇某個區間，比如價格區間。
當數據選項較少或者離散（不連續）時，還可以采用分段的形式。
今天主要講了數據錄入的相關組件，共11個：
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
藍藍設計的小編 http://www.syprn.cn
