圖標是任何設計系統(tǒng)不可或缺的一部分。使用圖標的主要原因是幫助用戶快速理解想法，實現(xiàn)快速導航，解決語言障礙，最終提升用戶體驗。
圖標作為一種設計工具，在UI/UX和平面設計師中最受歡迎。這些微小的設計元素對每個人來說都是簡單易懂的，這些特征賦予了它們通用數(shù)字語言的地位。
在這篇文章中，我整理了10個簡單又重要的技巧幫你設計出更專業(yè)的圖標。
最小的圖標大小通常是12 x 12px。以這個尺寸為基礎，行業(yè)標準中大多數(shù)其他尺寸只是通過將之前的尺寸翻倍而產(chǎn)生的。
重要提示：當你設計圖標時，重要的是要按100%顯示的比例去設計，使圖標完美像素并放大像素塊查看準確性。
完美像素圖標在屏幕上能呈現(xiàn)尖銳和清晰的線條和形狀。如今，高分辨率顯示器和視網(wǎng)膜顯示器正變得越來越好，所以在不久的將來，對像素完美圖標的需求可能會減少。但就目前而言，讓你的圖標具有可伸縮性、響應性和適配更多設備是非常重要的。
1) 像素網(wǎng)格對齊.
使直線部分完全清晰，并增加曲線和邊角的清晰度。（彩云注：盡可能的使線條實心）
2)完美角度
有角度的線更模糊。創(chuàng)建圖標的最佳角度是45°，因為形成一個角的像素彼此對稱。
3)邊緣清晰
直線必須占據(jù)其邊緣上最暗的4個像素。這樣線的邊緣看起來更清晰。
為了讓圖標看起來整潔一致，重要的是要記住線條寬度和間隙大小。這條規(guī)則我認為是必須遵循的:所有線條的寬度都是相同的。
理想情況下，線寬和間隙大小也應該相等。
然而，有時候你必須打破這個規(guī)則。當你需要解釋我們在日常生活中面對的一個具有非對稱模式的物體時，它就會發(fā)生。比如條形碼這個例子來說，我故意使圖標內(nèi)的線寬和間隙大小不均勻，以表示條碼的特征。
在UI設計中，對象(包括圖標)的角半徑定義了項目的外觀和感覺。當我們說到一個集合中的多個對象時，規(guī)則很簡單：在正方形和圓角之間進行選擇，并對所有的圖標應用相同的屬性。
為什么它如此重要?一致性是UI/UX設計的關鍵原則。一個可用和用戶友好的設計總是提供一致的體驗。在下面的例子中，你可以看到打破這個原則是如何影響視覺感知的。
在電腦上看起來完美對齊和平衡的東西，在你的眼睛看來可能并不一樣。
當我們把大小相等的正方形和圓放在一起時，我們會有一種不對勁的感覺，圓似乎比正方形小。為了使我們的形狀在尺寸上看起來相同，我們應該使圓更大(或減少正方形的尺寸)。
這個原則也適用于圖標的設計和使用。有些圖標的一側可能較重。試著調(diào)整它們一兩個點，直到整體對齊看起來正確。在下面的例子中，你可以看到突出顯示的圖標看起來很大，盡管它與其他部分的大小相同。為了平衡這個集合，我們需要通過縮小圖標的大小來調(diào)整突出顯示的圖標。
（彩云注：這個原則很多人應該都知道，但我發(fā)現(xiàn)也是在整套圖標的設計中最容易出現(xiàn)的問題，當把圖標匯總在一起的時候，這個問題尤其需要重視。）
我們經(jīng)常在設計軟件中使用中心對齊，這種方法沒有錯。但當涉及到細節(jié)時，比如圖標設計，我們需要相信自己的眼睛，打破數(shù)學法則，以增強元素的平衡。
讓我們以播放按鈕作為展示。這個例子很簡單，但非常能說明問題，因為形狀越不對稱，需要改進的缺陷就越明顯。
我打賭你已經(jīng)猜到我們指的是KISS原則。這一原則背后的思想是，大多數(shù)系統(tǒng)在保持簡單的情況下工作得最好。用戶越容易理解某樣東西并與之互動，它就越具有通用性。
（彩云注：KISS原則是“Keep It Stupid Simple”或者“Keep It Simple, Stupid”的縮寫。篇幅有限，彩云幫大家找了一篇參考文獻https://www.jianshu.com/p/7d58b96d0185#comments ，感興趣的可以去學習下。）
它如何適用于圖標設計?
1）別使用文字
文本和圖標的綁定減少了圖標的通用性。此外，小尺寸的文本是可讀性很差。如果一定要文本作為支持元素，使用工具提示和圖標旁邊的標簽。
2）不要過度設計
不必要的復雜性阻礙了合理的表達，應該避免。過載的設計會將用戶體驗變成一場噩夢。
3）避免不必要的元素
只要確保每個圖標在整體環(huán)境中是可理解和清晰的就行。（彩云注：比如已經(jīng)是在郵件客戶端中，就不需要再額外增加表示郵件的圖標部分）
重要提示：在圖標設計中合理地使用KISS原則，也不要把事情做得太簡單，否則會影響功能。一個優(yōu)秀的圖標應清晰易懂。
圖標規(guī)范框架通常是指組合在一起的圓形、正方形、縱向和橫向矩形。它們創(chuàng)建了一個框架來設計圖標。但是，這個規(guī)則非常靈活，只是作為參考，方便圖標的設計在視覺上平衡。所以，如果你覺得你的圖標不完全匹配這個框框，但看起來完全正確——相信你的眼睛！
框架是設計的“容器”?？蚣芤?guī)范了一個統(tǒng)一的范圍來設計圖標，這背后有一些原因：
1) 大小
由于其幾何形狀，所有圖標都具有不同的高度和寬度。為了在我們的設計中統(tǒng)一圖標尺寸，我們應該將它們放置在大小始終相同的框架中。
2)輸出
框架內(nèi)的圖標與視覺中心對齊，這經(jīng)常被開發(fā)人員忽略，因為他們經(jīng)常根據(jù)實際的中心來調(diào)整圖標，而沒有注意到差異。這就是為什么用框架輸出圖標是至關重要的，當你按這個框架輸出圖標時，能保證視覺設計時想要的視覺中心。
3)效率
如果使用Figma，可以通過創(chuàng)建組件來節(jié)省時間。可以使用實例快速地將一個圖標替換為另一個圖標。
如果你要打算做圖標資源庫的話。要想到當設計師在庫中搜索圖標時，會遇到哪些挑戰(zhàn)?他們的痛點是什么?他們的需求是什么?要回答這些問題，請設身處地為用戶著想。
1）不要讓用戶思考
例如，如果他們不知道自己想要找到哪種花卉圖標，那么就讓他們看到一系列選擇:鮮花項鏈，室內(nèi)花卉，植物商店等。
2）展示關聯(lián)圖標
例如，如果用戶想在相同的主題或類別中找到圖標，他們可以快速地檢查包含這個特定圖標的完整集合。
3）使用標簽
用戶可能很難找到合適的詞進行搜索，或者可能希望看到所有類似的補充選項，從中選擇最合適的。例如，當一個圖標的實際名稱是“蘭花花瓣”，你仍然可以找到它與以下關鍵詞: #蘭花#花瓣#花瓣#花#裝飾#花#植物#花園#開花#植物#自然#熱帶#樹枝#美麗#植物#美麗#自然#葉子#優(yōu)雅#浪漫
最終應該導出SVG或PNG格式？這是一個關鍵問題。讓我們來比較一下格式:
我個人的選擇是使用SVG圖標，因為它可以節(jié)省很多時間。但是，一定要小心縮小復雜的形狀，并記住舊的瀏覽器可能不支持SVG格式。
到這里你應該已經(jīng)學會了這10個圖標設計要點，在你的圖標設計中使用這些規(guī)則，相信會讓你的圖標變得更加專業(yè)！
彩云注：圖標設計是一個設計師的基礎能力，在彩云看過的無數(shù)份作品集中最普遍的問題也就是圖標設計。今天這篇文章雖然非?；A，但千萬別小看它，用這10條技巧重新審視自己的圖標作品，相信會有新的收獲！
作者：彩云Sky 來源：站酷網(wǎng)
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
Hi，我是彩云。界面是用戶在與任何產(chǎn)品、APP或平臺交互時看到的內(nèi)容，用戶體驗就是建立在堅實的界面設計基礎之上的。所以，如果你想要在UI設計上提升能力，應該多去思考界面設計背后的原因。
今天會跟大家分享一些被廣泛運用的界面設計規(guī)則，它們能快速使得你的界面設計更干凈、高效。
用更容易讓用戶理解（說人話）的引導文案，提升使用體驗。
（彩云注：下面2個案例中，左側的“購物車”和“庫存2”太過于術語化，右側的“僅剩2”和“加入購物車”更加貼近用戶的日常理解。大家平時工作的時候，也一定要注意界面中的文案，尤其是說明文字，控件文字等等，這個點經(jīng)常容易被忽略。）
良好的對齊方式，可以增強內(nèi)容的可讀性，讓用戶的視線更容易掃描。
（彩云注：左側的“之”字形視動線比較難閱讀，且不夠專業(yè)；右側的垂直對齊增強了可讀性，也讓設計看起來更加統(tǒng)一，能夠快速的提升設計細節(jié)。）
使用圖標、動畫作為標簽，有助于更輕松地理解內(nèi)容，它使界面看起來更加理性和豐富，能瞬間抓住用戶的眼球。
（彩云注：左側的導航相較于右邊，很難第一時間準確識別它的意思，增加圖標后不僅更快看清，視覺上也更加美觀。）
大段的長句會讓內(nèi)容變得難以閱讀。
為了獲得好的體驗和UI，應該注意拆分內(nèi)容，并使用項目符號突出關鍵點，利用拆分好的內(nèi)容塊讓用戶更快抓住重點。特別是在“功能說明和條款條件”或任何聲明時，提煉要點有助于提升用戶體驗，這樣也不至于讓用戶直接忽略。
（彩云注：左側的大段文字我想應該沒多少人會去閱讀，右邊的至少還能在短時間內(nèi)快速看看幾個關鍵詞。）
進度條幫助用戶追蹤流程，它也能使查看上下步驟更加容易。線上購物，表單填寫，申請流程等場景使用這種格式能很好的簡化流程。
（彩云注：左邊的表單UI不方便跟蹤進度和流程，右邊的表單把進度放在頂部能幫助用戶清楚的知道流程進度。）
錯誤提示一定要明確，易于理解，方便用戶進行下一步的操作。如果用戶不理解界面上出現(xiàn)的錯誤，用戶就會感到很失望，可能會放棄接下來的流程。在UI設計時，在正確的地方用通俗的語言說明問題，以避免歧義，這一點非常重要。
（彩云注：我常常遇到各種出錯，但出現(xiàn)的提示太過于術語化，也沒有提示在正確的地方讓我非?？鄲?。）
從菲茨定律（Fitt's Law）中我們應該知道，目標區(qū)域的距離和外觀與所采取的行動成正比。因此，為了將注意力集中在轉化按鈕上，按鈕應該準確放置在合理位置上。此外，按鈕的大小應該易于點擊，避免用戶因嘗試點擊時不方便而流失。
（彩云注：左側的按鈕不在正確的決策位置以及按鈕太小，右側的按鈕簡潔明了并且符合用戶的心理預期，能夠讓用戶更快決策并點擊。）
顏色是UI中不可缺少的部分，它能影響用戶使用應用時的情緒。正確地使用顏色將使UI看起來更加豐富合理。
（彩云注：左側的藍色按鈕顏色并不符合用戶對于刪除的心理預期，右側的紅色按鈕對用戶的心理預期有危險和警告，用紅色代表刪除能夠讓用戶集中注意力關注這一特殊的操作。）
用單列展示內(nèi)容，能更好地幫助用戶掃描。當你的應用和網(wǎng)站上要展示大量信息時，將所有信息垂直對齊時，能更好的保持用戶關注度。
用戶準備登錄或注冊你平臺的時候，把所有可用的社交媒體登錄盡量放在首位。這將避免用戶填寫表格時付出額外的認知負擔和時間消耗而流失。首先使用社交媒體賬號，能很好地增加點擊率。
在用戶做選擇的時候，需要清晰地告訴用戶選中的到底是哪一個選項。模棱兩可的顏色會增加用戶的認知負擔。更少的顏色和清晰的選中狀態(tài)能讓用戶獲得更好的體驗。
（彩云注：左側的問題在于選中狀態(tài)不清晰且選項的顏色過于豐富，右側的選中狀態(tài)清晰且選項顏色只有2種，選中和非選中，體驗會更好。）
如果想給信息分組，使用留白是最好的方式。加條線作為分組符號會在界面中增加了一個額外元素，空白能讓UI看起來更加干凈和優(yōu)雅。用線分組的情況適用于類似Twitter、Medium之類的重內(nèi)容平臺等場景。
保持設計的一致性，能夠降低功能復雜度并讓用戶更快決策，一致性設計讓用戶更快熟悉操作而不需要太多思考。
（彩云注：左側的選項圓角不一致，會讓用戶思考為什么這里會有不同，而右側的一致性選項設計，能讓用戶忽略內(nèi)容外的干擾。）
14. 搜索中的占位符要用好
在搜索輸入欄添加適當?shù)恼嘉环崾居脩艨梢栽谄脚_上搜索和找到的內(nèi)容，這樣可以提供用戶參考并帶來更好的用戶體驗。
高飽和度的顏色能形成強烈的對比。在暗黑模式下使用高飽和度會很刺眼，給用戶很不好的體驗。暗黑模式一般在晚上使用，因此對設計師來說，需要做的是讓整個配色相對柔和，讓用戶感到放松?；诖?，在設計的時候應該將飽和度限制在200-500之間。
(彩云注：這里的200-500彩云去查了不少資料，但沒有找到最好的答案，這里引用的是Material Design中的顏色規(guī)范，感興趣的同學可以自行查找)
在同一個界面，最理想的狀態(tài)是只有一個最主要的關鍵按鈕和緊跟著的次要按鈕。這是因為如果一個界面上有太多這種行動按鈕（CTA）按鈕，會讓關鍵操作淹沒在這些按鈕中，讓用戶不知所措。
17. 簡化不必要的動詞
沒必要在菜單上增加動詞和短語，用最少的信息寫清楚功能就足夠讓用戶理解了。所以，在菜單設計上要盡量避免增加無關緊要的詞，這樣才不會影響用戶體驗。
你可能注意到，很少有表單的字體大小不平衡，字體之間的類別盡量少一些看起來會更加平衡。在決定字體大小時，盡量規(guī)范字號的標準。比如標題（16px），副標題（12px），正文（10px），說明文字（8px），這些尺寸都是以2為倍數(shù)的。
盡管我知道要做好圖標一致性，但在實際工作中依然經(jīng)常犯錯。很多設計師經(jīng)常用不同風格的圖標混在一起，這樣會讓整個UI界面的設計顯得很不成熟。圖標是為了讓用戶更有效率地理解事物。在使用圖標的時候一定要注意圖標的一致性，尤其是一些是一些風格細節(jié)。
這里也跟大家分享2個我自己常用的figma圖標庫：
1)Unicorn (https://www.figma.com/community/file/931512007012650048)
2)Basil Icons (https://www.figma.com/community/file/931906394678748246)
通常情況下，我們會認為一個顏色在深色模式和亮色模式下是用的同一個顏色值，但這其實是錯誤的。一個顏色在亮色模式下看起來非常漂亮，但在深色模式看可能就太暗了，反之亦然。解決這個問題最好辦法是使用2套不同飽和度的顏色。
App的新手引導決定了用戶第一次體驗產(chǎn)品時的感受。在設計的時候，試著公開需要哪些具體步驟，增加”跳過“和前后移動查看的能力對新用戶來說非常重要。
許多網(wǎng)站和App都是用圖片驅動的，但在圖片上直接增加文字內(nèi)容有時候會被淹沒掉。在圖片上增加一個疊加層可以提升內(nèi)容的可讀性。
23. 信息部分露出
對于一些大屏設備來說，像筆記本電腦，平板電腦和智能電視，它們都有非常多閑置的空間。對于這些閑置的空間來說，盡量通過設計告訴它底部還有更多內(nèi)容。這對UI和UX方面都有好處，因為空間的使用方式能夠讓用戶清晰的知道所有內(nèi)容。
為了讓用戶聚焦閱讀，應盡量避免使用大段的長/寬行。保持短句和簡潔能夠增加內(nèi)容的可讀性。
（彩云注：這點用在你的作品集里也是很合適的，有些人經(jīng)常使用大段的文字內(nèi)容來描述，很可能直接勸退面試官）
Z字形原理，也就是大眾所熟知的”古騰堡原理“，它描述了當人們看到一個均勻分布元素的設計時，眼睛的總體運動情況。通過這個原理我們知道，用戶在內(nèi)容上的視線是沿著Z字形來閱讀的，所以遵循這一原理設計你想要核心表達的內(nèi)容。
擴大點擊區(qū)域，維護像按鈕、單選、多選等控件的響應尺寸，如果你設計的點擊區(qū)域太小會讓用戶點擊困難，造成流失。
避免使用花俏和俗氣的圖標，它們會讓整個設計顯得非常不成熟，同時也是很難理解的。用上更簡單的圖標形式，會讓界面更高級。
（彩云注：當然越簡單的圖標其實想畫出彩會更難，另外也需要區(qū)分不同的場景，像一些運營類的圖標可能會為了活動氛圍做的相對風格化一些。）
選錯文案，會讓人們對于任務缺乏興趣，根據(jù)上下文使用更合適的詞組。
輕敲和點擊有時候很累人，可能不如使用滑動、拖拽等手勢操作，這些操作會讓界面更簡潔并且也能順利地完成既定任務。
在探索酒店、目的地甚至是閱讀任何文章時，用戶經(jīng)常都需要點擊卡片。為了使得探索更加吸引人注目和干脆，避免使用長文本導致的滾動。相反，可以加一個閱讀更多的按鈕方便想看全所有內(nèi)容的用戶。
”鄰近的物體往往被視為是同一組內(nèi)容“。有時候為了把內(nèi)容區(qū)分開的更清晰，嘗試用線對相關內(nèi)容進行分組。
（彩云注：其實有留白和不同顏色做區(qū)分也是可以的，建議根據(jù)自己的設計風格和具體內(nèi)容來定）
在設計控件時，如果可以用圖形可視化的地方就優(yōu)先嘗試把控件圖形化，除了非常需要很精確的設置參數(shù)。對于價格范圍這種，很容易將它可視化為滑塊控件。
對一些人來說容易理解的東西，對某些人來說可能不是。因此，最好使用示例占位符來解釋輸入字段，這可以防止用戶在填寫內(nèi)容時出錯。
根據(jù)”系列位置效應“，心理傾向于記住列表的第一項和最后一項，而不是中間項。因此，在任何App中設計導航時，根據(jù)應用的上下文保持最左和最右的選項。例如instagram，最左邊是”首頁“，而最右邊是”用戶“。
（彩云注：這是一個心理學上的理論，人們對于一系列的材料更容易記住開頭的內(nèi)容，也叫做首因效應或者首位效應；更容易記住末尾的內(nèi)容，就叫近因效應。）
在設計任何體驗時，點擊次數(shù)都是非常重要的指標。統(tǒng)計用戶需要點擊多少次才能完成他的目標，額外的點擊會減慢整個操作過程。簡化過程，自然體驗就會更好，所以盡可能的減少點擊次數(shù)。
（彩云注：下面的案例，增加可點擊符號也可以減少用戶思考的時間。）
為了使內(nèi)容突出，沒有必要使用多種字體類型，包括加粗、改色等等。只在最需要的位置使用增強的的文字層次結構、字體重量，同時只使用一種字體足以吸引用戶對內(nèi)容的注意力。
留白在設計中非常重要，太少或者沒有留白會使得設計非?；靵y。明智地使用留白可以明確地強調(diào)內(nèi)容。
根據(jù)多爾蒂閾值(Doherty Threshold)這個理論：”系統(tǒng)需要在 400ms 內(nèi)對使用者的操作做出響應，這樣才能夠讓使用者保持專注，并提高生產(chǎn)效率?！?。因此，我們可以使用動畫、圖像甚至文本來保持用戶的注意力。（彩云注：給用戶的提示可以先快速加載信息框架，讓用戶有事可做，而不是什么都看不到）
作者：彩云Sky 來源：站酷網(wǎng)
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
Hi，我是彩云。設計趨勢年年在變，設計技能也在不斷更新，但回到本源，底層的理論知識是不會變的。我自己幾乎每年還會翻看一些講設計基礎的書，比如《寫給大家看的設計書》之類的，會發(fā)現(xiàn)這些原理每次看都會有新的收獲。隨著工作年數(shù)增加，對底層知識的價值認識也越來越深刻，不知道你會不會有這種感覺？
在Medium上看到一位工作超過17年的國外設計leader寫的一篇關于設計原理的文章，講設計如何變得有效？總結得很好。
當沒有認知緊張時，用戶心流才會發(fā)生。當一個設計有效時，你才能體驗到認知上的輕松。如果沒有，你的“心流狀態(tài)”就會中斷(稍后會詳細討論)，讓我們陷入認知緊張，于是“設計失敗了”。
當基本設計原則被忽略時，這種情況很容易發(fā)生，導致設計無法“整合”。這些基本原則包括：平衡性、一致性和視覺層次、負空間、接近性、對比、統(tǒng)一、一致性、配色方案和排版層次等方面。（彩云注：很多人看到這些以為自己都懂，但實際設計時犯錯最多的也是這些問題）
從神經(jīng)科學的角度來說，當一個設計起作用時，我們會“感受到它”。其影響立竿見影。它發(fā)生在潛意識里，在一瞬間完成，是人的本能反應。我們不需要把它放在顯微鏡下分析它。
優(yōu)秀設計以簡潔和優(yōu)雅而引人注目。喬納森·伊夫(Jonathan Ive)和迪特爾·拉姆斯(Dieter Rams)都可以算作這種設計思想的擁躉。
人們常說，優(yōu)秀設計背后的工藝是無形的。然而，這不是隨機發(fā)生的。不管人們是否注意到，設計的背后是遵循著大量而嚴格的原理去執(zhí)行的。偉大的設計師不會在畫板上隨意地將各種元素組合在一起，這是有方法的。
為什么有些設計具有美的感受，而有些卻沒有
相反地，當一項設計被認為“有些地方不對勁”時，人們就會下意識地覺得這個設計是有問題的。這樣的結果會給品牌或產(chǎn)品帶來不好的影響。當一個高端或奢侈品品牌受到高度關注時，這種影響尤其有害。這就是為什么你永遠不會遇到設計不完美的香奈兒(Chanel)商店的原因。
“你對一件事的第一印象會建立起你隨后的觀念，如果一家公司在你看來不專業(yè)，你可能會認為他們做的其他事情都不專業(yè)?！狣aniel Kahneman，普林斯頓大學心理學教授。
這不是一個精心制作的設計，會導致認知緊張。你會在這個網(wǎng)站上預訂你的行程嗎?
我們都同意上面是糟糕的設計，就像建在沙子上的房子，一個忽視基本設計原則的設計將會崩潰。潛意識里，它會立即被認為是破碎的，無論是視覺上、精神上和情感上。
人類的大腦是懶惰的、有偏見的，喜歡走捷徑。Daniel Kahneman稱之為“低維思維”。當人們看到某種設計時，它的“美學完整性”、視覺感知和神經(jīng)科學之間存在著相互關聯(lián)。
當一個設計是合理的，換句話說，它是令人愉快的、有效的，我們會迅速、直觀的判斷它是合理的。我們的心率降低，多巴胺水平增加，會有一種幸福和平靜的感覺。這就像我們聽到舒緩的音樂，會沉浸在一種每時每刻的“心流狀態(tài)” 中?！霸谶@種狀態(tài)下，人們會專注于一項活動，其他一切似乎都不重要”——來自于一個心理學概念，由 Mihaly Csikszentmihalyi在他的暢銷書《心流:最佳體驗的心理學》中寫道。
你更愿意住進哪個房間？
蘋果的人機界面指南（Apple’s Human Interface Guidelines）幾十年來一直在談論“美學完整性”。它也可以被稱為“設計完整性”或“審美凝聚力”。
蘋果對美學完整性的定義是“當一個設計的外觀和行為與其功能完美匹配時”（彩云注：我的理解就是所見即所得，符合用戶的心理預期）。換句話說，設計的構成是產(chǎn)品的一個組成部分。我們將研究決定設計組合成敗的設計原則——更多的是關于 UI，而不是關于 UX。
美學完整性不僅僅是關于設計有多好看。它指的是具有明顯連貫性的設計：有效的結構和布局，是什么讓它產(chǎn)生效果。換句話說，它的元素在視覺層次、對齊、間距、平衡、對稱、重復、比例、強調(diào)、接近、對比、統(tǒng)一、一致性、配色、排版、負空間等方面都有出色的運用，這里僅舉幾個例子。
這與“黃金比例”無關，黃金分割不能解決問題。斐波那契數(shù)列螺旋沒那么玄乎，給設計師帶不來驚人的設計。
設計師們在安吉麗娜·朱莉或蒙娜麗莎的臉上畫出金色螺旋形時驚呼道：”果然是”黃金比例“（彩云注：但事實上有點故弄玄虛了）。當然，自然界中確實有神圣幾何學(黃金比例，又稱斐波那契螺旋，是基于此)，但依賴“黃金螺旋”作為設計原則是一種謬論，它已被多次暴露在其赤裸裸的荒謬中。
這是我的洗衣機，上面疊加了斐波那契螺旋。
“審美的完整性”不是沒道理的。這個概念是基于基本的設計原則，是有成就的設計師實踐他們的藝術作品的經(jīng)驗總結。
讓我們來看看一些設計原則，以及它們?yōu)槭裁磿沟媚愕脑O計更能更加有效。通常情況下，真正優(yōu)秀的設計會結合這些設計原則。
我們將探討以下這些最底層的設計原理：
視覺感知的基本規(guī)則對任何視覺設計都是至關重要的，因為它們指導著如何盡可能快地傳達信息。視覺層次是設計中信息的結構和優(yōu)先級。它決定了人們接受和處理信息的順序，因為它以一種視覺方式引導他們。
視覺層次感重在打造視覺優(yōu)先級。通過巧妙地使用顏色、形狀、大小、間距、比例和方向，創(chuàng)造性地使用決定層次的視覺元素來傳達構圖的意義、概念和情緒。
核心關注點是什么，你希望用戶首先注意到或開始閱讀的設計中最重要的元素是什么？我們想讓它成為焦點，然后其他部分的設計從這里展開。
一個具有良好視覺層次的網(wǎng)站會引導用戶關注重要的部分
視覺層次對于每一種視覺設計都是至關重要的，無論是需要引導訪客眼球的首頁還是移動端UI的導航入口。用戶對每個元素的理解取決于組合中的其他元素及其上下文。
建立視覺層次的一些技術是:位置、大小和比例、顏色和對比、間距和親密性、負空間、紋理、引導線和高度。在一個元素周圍使用豐富的負空間可以使它看起來更有意義。使用引導線可以創(chuàng)造移動，就像一個人的眼睛在設計上移動一樣。排版的層次結構也扮演著重要的角色，通過不同的大小和權重，我們可以讓更重要的文本元素脫穎而出并建立秩序。
加分技巧
沒有視覺層次的網(wǎng)站沒有明顯的興趣點。
設計中的對齊和間距通過空間上的連接傳達出一種秩序和組織感，這兩個原則都在設計背后發(fā)揮重要價值。設計師早期學到的基本知識之一是在網(wǎng)格上編排設計，然后對齊和分隔這些元素。
左對齊、居中對齊、右對齊都沒錯，但你必須對齊，否則當元素沒有對齊時，設計就會給人崩潰的感覺。它給人一種不安的感覺。
沒對齊的話，眼睛看著很難受
網(wǎng)格有很多不同的類型:列網(wǎng)格、基線網(wǎng)格、模塊網(wǎng)格、層次網(wǎng)格、像素網(wǎng)格等。不同設計使用不同網(wǎng)格，但最基本的是設計元素的對齊和間距。（彩云注：關于網(wǎng)格方面的知識，彩云以前也寫過不少，感興趣的也可以在公眾號的歷史發(fā)文中翻翻看）比如：
《想要用好網(wǎng)格系統(tǒng)，這8個小技巧你必須知道》
《網(wǎng)格系統(tǒng)真是太好用了，后悔沒有早點學會！》
(Illustration courtesy UX Engineer)
網(wǎng)格可以被打破。一個死板的構圖可能會在視覺上無趣，除非一個元素從網(wǎng)格中脫穎而出。錯位或“打破網(wǎng)格”是賦予元素更多視覺權重的一個機會。當在設計中設置視覺層次結構時，它可以用來強調(diào)某些東西。
有時打破網(wǎng)格可以創(chuàng)造強調(diào)和移動
設計上有兩種平衡:對稱和不對稱。所有的構成元素：排版、顏色、圖像、形狀、圖案、留白等，都具有一定的視覺重量。有些元素很重，很吸引眼球，而有些元素很輕，感覺不那么重要。
這些元素的放置方式能夠在對稱設計中創(chuàng)造出一種平等的順序感，或者一種稍微偏離平衡能夠創(chuàng)造出一種不對稱的設計。無論對稱還是不對稱，我們的大腦都被某種平衡感所吸引，因為它創(chuàng)造了和諧、秩序和美學上令人愉悅的結果。
多重原則:平衡、對齊和對稱在網(wǎng)站上發(fā)揮作用
“對比”指的是使設計中不同的元素更容易區(qū)別開。強烈的對比可以在設計中強調(diào)一個區(qū)域，而微弱的對比可以弱化它，創(chuàng)造一個視覺層次。對比在設計中也扮演著重要的角色。對比不足會使文字特別難以閱讀，尤其是對視力有障礙的人來說。
在左邊的設計中，一些文字和背景之間的對比不夠。
Web內(nèi)容可訪問性指南 (WCAG)呼吁“文本的視覺呈現(xiàn)應該有至少4.5:1的對比度”，除了大規(guī)模文本，它應該有至少3:1的對比度。因此，設計師需要確保內(nèi)容保持舒適易讀。（彩云注：具體可用性配色工具，彩云之前的文章中有分享過，現(xiàn)在這種可用性顏色已經(jīng)越來越被重視了，你也要用起來?。?之前寫的文章，推薦大家可以看看：
《以前我經(jīng)常為配色發(fā)愁，自從知道這3個配色神器后，配色變得容易多了！》
其他UI元素(如各種顯示器和設備上的卡片、按鈕、文字和圖標)之間的適當對比也是必須的。如果UI元素之間沒有明顯的區(qū)分度，設計就容易產(chǎn)生混亂。
在格式塔原理中，對稱和秩序的法則也被稱為pr?gnanz，德語單詞“好身材”的意思。這個原理說的是，大腦會以盡可能簡單的方式感知模糊的形狀，這都是為了節(jié)省大腦能量。
我們傾向于尋找一切事物的對稱性。幾項研究發(fā)現(xiàn)，面部對稱能提高人們對人臉吸引力的評價(盡管完全對稱的臉其實并不一定那么有吸引力)。該理論認為，這種偏好與選擇DNA最好的伴侶的進化優(yōu)勢。
對稱在自然界中也無處不在?？纯匆恢缓欢浠?，或者一只海星。
對稱
同樣的原理也適用于數(shù)字領域，平衡對稱的設計更令人愉悅。
對稱性在應用中發(fā)揮作用。Uber Eats、Booking.com和Behance。
重復是一致性的近親，是優(yōu)秀可用性的標志。在設計中利用重復是件好事，因為我們的大腦總是在尋找模式、相似性和一致性。為什么?因為重復相同性質的元素需要更少的認知努力。
我們更容易識別重復的模式，而不是每次看到新模式都要重新校準大腦。正如前面提到的，大腦作為一種生存機制是懶惰的，模式識別和認知捷徑意味著有意識地處理視覺信息所需的能量更少。
例如，重復元素的形狀和大小、填充、留白、類型和顏色，也有助于更對稱、更好地平衡，做出美觀的設計。
The Athletic這個軟件就是用重復元素做設計的好例子
奇數(shù)法則意思是說，在設計作品中奇數(shù)元素比偶數(shù)元素更有趣。偶數(shù)元素在圖像中產(chǎn)生了對稱，這可能會顯得過于正式和不自然。比如，在一行中排列三個或五個卡片會比2個或4個效果更好，作品會更加讓用戶感到舒服和自然。
Iskos Design 就是用的奇數(shù)原則做的網(wǎng)頁設計
三分法構圖（也被稱之為黃金網(wǎng)格規(guī)則），在畫面中以水平和豎直方向分成3x3的網(wǎng)格和4個交叉點。這個規(guī)則能很好的協(xié)助設計師將最重要的元素放在網(wǎng)格的交叉點上，這樣可以很容易的設計出滿意的構圖。
為什么會這樣？因為三分法構圖創(chuàng)造了類似斐波那契數(shù)列(黃金比例)那種不對稱的美，產(chǎn)生了更有吸引力的構圖。
你希望用戶關注哪些地方？高級設計師非常擅長引導用戶的視覺焦點，這種引導可以通過可見和不可見的引導線來完成。這些線條在構圖中也可以打造一種動感，也能為畫面增添視覺沖擊力。
達到這種效果通常用特定的形狀和線條，或者是它們的組合形成難以察覺的引導線來實現(xiàn)。利用透視、顏色、對比度和正負空間同樣可以幫助達到這種想要的效果。
從左到右的不易察覺的曲線將用戶的視線引導到頁面文字上
大?。╯cale）是設計中一個元素與另一個元素的相對大小。元素通過大小不同創(chuàng)建視覺層次，其中最大的元素首先會吸引用戶的注意力，因此看起來是最重要的。常規(guī)的設計策略就是將最重要的元素做成最大的，然后逐級遞減。
比例(Proportion)不同于大小，類似但有區(qū)別。比例原則是指一個整體設計中各部分的尺寸關系。設計中的元素可以有各種大小，但它們之間的大小差異，整體來看就是比例。
熟練地使用大小和比例是實現(xiàn)設計統(tǒng)一的關鍵。當一些元素的大小過大或過小，或者比例失調(diào)時，設計組合就會失去統(tǒng)一性。這種錯誤可能發(fā)生在排版和其他元素上。例如，標題與子標題和正文相比顯得過大。當設計元素失衡時，設計就會“感覺不平衡”。
大小和比例都沒做好時(左圖)，看起來處理的比較細致了，但依然沒有做到很好，在大小上正文和標題分不清(右圖)
強調(diào)原則用于使設計的某些元素突出(使用對比、接近、比例、留白等)或不突出，即弱化強調(diào)(例如在頁面底部有一個幾乎看不見的“小字”)。強調(diào)是層級之母，因為沒有強調(diào)就沒有層級。
與其他一些設計原則一樣，“強調(diào)”是用來引導人們關注設計，并強調(diào)需要重點關注的第一、第二和第三點。首頁面和電商轉化頁面在99%的情況下都使用這種原則。
使用這個原則，在購物網(wǎng)站上強調(diào)了標語和產(chǎn)品，轉化效果非常好
統(tǒng)一是指設計元素如何很好地結合在一起，形成“視覺凝聚力”。它指的是設計中的連貫性，讓人們覺得所有部分都是一起的。每個元素都應該具有清晰的視覺關系，以幫助傳達清晰、簡潔的信息。整體性好的設計比整體性差的設計更有條理，質量也更高。
運用統(tǒng)一的配色，重復、平衡和對稱之類的原則將有助于在設計中形成一種和諧感，也就是一致性。設計中良好的一致性就好比歌曲中一首歌被和諧地唱出來，形成一個完美的整體。
一致的顏色、重復的圖案、平衡和對稱在蒂芙尼的網(wǎng)站上創(chuàng)造了一種統(tǒng)一的感覺。
格式塔的接近原則讓設計師將同類型的相關元素進行分組。把它們分開得更遠，元素就顯得越不相關，它們之間的關系就會減弱。一般來說，人們會認為遠離的元素是不相關的。
不應該讓用戶在設計中分辨哪些元素是相互關聯(lián)的，正如美國郵政服務的例子所顯示的那樣，缺乏對鄰近性的關注會導致直接的認知緊張，損害用戶體驗。
接近原則沒做好的案例。由于字段標簽離它們下面的字段更近，人們可能會搞混。
下面是一個鄰近性原則做的好的案例，我們可以看到相關元素是如何通過鄰近性關聯(lián)起來的(分組的元素用紫色表示)
一個把接近原則用好的網(wǎng)頁設計案例
一致性原則使數(shù)字產(chǎn)品的使用更加可預測，符合用戶的期望。設計中的一致性可以培養(yǎng)熟悉度，它可以提高用戶體驗、可用性和用戶使用效率。另一方面，不一致的設計將產(chǎn)生更多的認知負荷/腦力勞動，并導致困惑和挫折。這就相當于在用戶的路徑上設置障礙。讓用戶的心流嘎然而止!
做好一致性可以增強“審美凝聚力”。“我們都知道，當我們使用應用時，應用的導航位置如果經(jīng)常變化，或者像“加入購物車”這樣的主按鈕在不同屏幕上從紅色變成綠色，這是多么令人沮喪。
除了視覺一致性和易用性，品牌一致性在產(chǎn)品設計中也發(fā)揮著重要作用。如果沒有一致的元素呈現(xiàn)，如排版、配色和圖案，高質量的品牌體驗將無法傳遞。
在用戶體驗方面，一致性意味著在設計中使用相似的UI元素來完成相似的任務，即在整個產(chǎn)品中擁有相似的功能和行為。因為可用性是一種評估用戶界面易用性的質量屬性，所以一致性對用戶體驗的可用性有很大的貢獻。
一致性是通過使用相同的配色、排版、間距、模式和交互來實現(xiàn)的。
色彩心理學也不容忽視。色彩承載著意義和情感，可以向人的潛意識傳遞信息。在品牌方面，人們對顏色做了大量的心理學研究，因為在人們與品牌進行任何互動之前，顏色會讓他們產(chǎn)生一種本能的反應。例如，藍色通常被認為是可靠的、安全的和平靜的，想想銀行；而紅色是刺激的，被認為是增加人們的心率，想想飲料包裝。
一個極簡主義的暗色主題設計傳達了一個特定的品牌氣質，并使用了少量的顏色。
排版在設計中扮演著非常重要的角色，它的重要性再怎么強調(diào)都不為過。在構圖中，字體樣式對人們感知設計的影響比任何其他元素都大，可能除了顏色。
因為我們的大腦以閃電般的速度運轉，一個字體會對一個設計產(chǎn)生影響，以至于它可能在不到一眨眼的時間內(nèi)改變用戶的印象。與顏色一樣，字體甚至會影響我們的情緒，資深設計師可以通過字體傳達情緒和風格。通過選擇合適的字體，我們可以傳達出穩(wěn)定、優(yōu)雅、舒適、可靠、有力等信息。
排版層次結構可以快速建立視覺層次結構，并且通常在其中扮演重要角色。因此，在設計中經(jīng)常使用不同的字體和字體大小來表示層次結構，例如標題、副標題、正文和引用。
“除了確保文本清晰易讀，排版可以幫助你理清信息層次，傳達重要內(nèi)容，并表達你的品牌。” ——蘋果的人機界面指南
蘭博基尼的網(wǎng)站巧妙地使用了排版風格和比例來賦予其設計力量
Claude Debussy 曾說過，“音樂是音符之間的空間“。同樣的觀點也適用于設計，元素之間的負空間給予設計強調(diào)、平衡和統(tǒng)一。
元素周圍適當?shù)呢摽臻g將焦點集中在元素本身。它強調(diào)了內(nèi)容，并提供了必要的喘息空間，以確保布局不顯得雜亂。沒有了呼吸空間，人腦就不太可能掃描興趣點，更容易感到困惑。
蘋果官網(wǎng)提供了一個利用負空間創(chuàng)造強烈焦點的杰出例子。
人們已經(jīng)開始期待所有平臺和設備上的優(yōu)化、無阻礙的用戶體驗。理解設計原則及其交互方式對所有設計師來說都是至關重要的。使用專業(yè)技能設計它們是創(chuàng)造具有視覺吸引力的功能性設計的關鍵。我們不要忘記，美學的完整性會嚴重影響用戶體驗。
基于原則的設計是設計師在感覺有點迷失或用盡創(chuàng)意時可以依賴的黃金標準方法。在沒有理解和實現(xiàn)設計原則的情況下，也可能實現(xiàn)可接受的設計。然而，這可能需要大量的嘗試和錯誤才能創(chuàng)造出看起來不錯的內(nèi)容，并創(chuàng)造出最佳的用戶體驗。
產(chǎn)品的美學質量與它的實用性密不可分，因為我們每天使用的產(chǎn)品影響著我們和我們的幸福?！钡挥芯闹谱鞯奈锲凡艜利??！?Dieter Rams(迪特爾·拉姆斯)
當我們不關注由設計原則驅動的設計質量時，我們可能會忽視品牌質量及其所代表的一切。當某些東西設計不好時，品牌就會受到傷害，產(chǎn)品也會受到影響。這就是為什么偉大的設計師在他們的工作中極其嚴謹， 他們知道“你永遠不會有第二次機會給人留下良好的第一印象?！?/strong>
設計的細節(jié)成就了設計本身?！?查爾斯 伊姆斯（Charles Eames）
作者：彩云Sky 來源：站酷網(wǎng)
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
卡片是一個UI組件，包含了某一個內(nèi)容的信息和操作?？ㄆ梢园鞣N元素，但它們都應該屬于同一個主題。
這樣做的目的是為了避免冗長的文字，并呈現(xiàn)更多的內(nèi)容。即使從設計的角度來看，用戶可能不熟悉卡片的概念，但他們馬上就知道如何使用它們，因為它們與實體卡片是一樣的。（彩云注：這個就是用戶心理學中隱喻的運用）
卡片之所以流行，是因為它們能更好的把控內(nèi)容。卡片是模塊化的，所以不同的內(nèi)容可以堆疊在一起，而不需要注意它們的差異。
卡片通過強制內(nèi)容適應卡片邊界和卡片布局上的限制來聚焦內(nèi)容。設計師喜歡通過卡片混排大量內(nèi)容，而無需擔心設計會變得雜亂無章。
卡片可以將內(nèi)容分解成易于理解的小塊，以便用戶與之互動。通過給內(nèi)容一個容器，卡片向用戶表明內(nèi)容是真實和感性的。
卡片 UI 設計流行的原因還有很多：
直觀：卡片在界面中看起來與現(xiàn)實世界中的卡片相同，它們對用戶來說似乎很常見。在卡片成為移動和網(wǎng)絡應用中的流行元素之前，它們在現(xiàn)實生活中無處不在：名片、棒球卡、便簽?？ㄆ砹艘环N有益的視覺類比，它允許我們的大腦直觀地將卡片與其所代表的內(nèi)容聯(lián)系起來，就像在現(xiàn)實生活中一樣。
易于閱讀：卡片不占用太多空間，并敦促設計師優(yōu)先考慮其內(nèi)容。不同的是，每張卡片都變成了易于閱讀的內(nèi)容?？ㄆ層脩舾菀渍业剿麄兏信d趣的內(nèi)容。
有吸引力且對用戶更友好：基于卡片的設計通常非常依賴視覺效果（尤其是圖片）；就信息架構而言，視覺層次會更加清晰。使用圖片有助于使基于卡片的設計比不在卡片中排列的相同內(nèi)容對用戶更具吸引力。
有利于響應式設計：卡片是矩形的，可以平滑地調(diào)整大小，以適應不同屏幕的水平和垂直正面，這意味著用戶可以在所有設備上獲得統(tǒng)一的體驗。
便于分享：卡片可以鼓勵用戶在社交媒體上分享內(nèi)容，因為它允許用戶只分享特定的內(nèi)容，而不是整個頁面。
什么時候應用卡片設計？
這通常是當你有:
基于搜索的界面: 卡片能通過模塊的內(nèi)容快速顯示合適的內(nèi)容，這使得用戶可以深入了解自己的興趣?；诳ㄆ脑O計是一種非常適合呈現(xiàn)這類內(nèi)容的方式。
信息瀏覽：當用戶瀏覽信息時，卡片的兼容性更好。
任務管理：當可以將流程中的單個任務作為卡片進行說明時， 可以輕松組織卡片以獲取任務列表。任務管理應用在使用卡片式界面為用戶創(chuàng)建儀表板方面做得很好，其中每張卡片代表一個單獨的任務。
類似項目：卡片最適合于異構項目的集合（當并非所有內(nèi)容都是相同的基本類型時）。
可視化分析: 儀表板通常在同一頁上同時顯示各種內(nèi)容樣本。在這種情況下，卡片類比可以幫助在不同物品之間創(chuàng)造出更明顯的差異，其中每張卡片可以適應不同的角色。
卡片的布局可以不同，以支持它們包含的內(nèi)容類別。下面的組件通?？梢栽诙喾N卡片樣式中找到。
(1)富媒體: 卡片可以包含縮略圖，以顯示圖片，插圖，頭像，Logo，圖標或圖形。
(2) 標題: 標題文本可以包含相冊或文章的名稱或標題。
(3) 描述: 支持文本，如文章摘要或簡短的描述。
(4) 行動按鈕: 卡片可以包含用于操作的按鈕。
(5) 副標題: 副標題文本可以包含詳細介紹，如文章的署名或標記的位置。
(6) 圖標: 卡片可以包含操作圖標。
有一些小的技巧可以快速提高卡片設計細節(jié)。
1. 使用相關主題的圖片
圖片是卡片設計的主角，你需要一個高級的圖片來吸引用戶對每張卡片的注意。不僅是圖像，卡片還可以包含插圖、帶有淺色背景框的圖標或任何其他類型的富媒體，但需要與內(nèi)容主題相關。
2. 增加視覺層次
卡片內(nèi)的層次結構有助于引導用戶對重要信息的閱讀。將主要內(nèi)容放在卡片的頂部，并使用排版來強化主要內(nèi)容。使用空白和對比來分隔需要更多視覺分隔的內(nèi)容區(qū)域。（彩云注：視覺層級對于信息表達至關重要?。?nbsp;
3. 限制內(nèi)容長度
一張卡片應該只包含重要的信息，并提出一個相關的觀點，以獲取額外的細節(jié)，而不是完整的細節(jié)本身。當我們試圖在一張卡片中放入太多內(nèi)容時，卡片可能會變得很冗長，并失去與卡片類比的實際聯(lián)系，因為它不再像一張卡片了。
4. 避免嵌入鏈接
不要包含內(nèi)聯(lián)鏈接，卡片應該自己鏈接。嵌入文字鏈接會讓用戶誤操作。
5. 區(qū)分操作主次
包含不同操作的卡片應該在視覺上形成對比。在下面的例子中，我通過使用一種較輕的色調(diào)而不是主要的按鈕風格來降低后續(xù)操作的視覺強度。
6. 去掉分割線
對于新手設計師來說，用分割線來區(qū)分內(nèi)容是一種常見的方式，以此定義不同的組。這些邊框會造成不必要的視覺干擾，從而影響內(nèi)容。
APP中的卡片并不是純粹的擬物概念，但通常情況下，使用一致的類比和物理原理能幫助用戶理解界面并分析內(nèi)容中的視覺層次。在卡片的情況下，你可以做幾件事:
1. 使用圓角
在形態(tài)上與真實世界的卡片進行視覺對比。圓角更有效，因為它們讓我們的眼睛容易跟隨視覺動線，“因為它更適合頭部和眼睛的自然運動”。
2. 增加一個輕微的外邊框或者投影
增加一條淡淡的描邊框或者增加一個淡淡的投影都是很好的做法。陰影在界面中創(chuàng)造了一個層次，這有助于我們區(qū)分UI元素。
然而，在設計中添加陰影并不像聽起來那么簡單。有時候設計師會過分強化投影效果，讓原本看起來不錯的設計看起來很廉價。避免使用純黑色的陰影。
3.注意字體和留白
重要的是要讓每一張卡片都能被人看到、閱讀和理解。在每個塊周圍添加大量的空白，讓用戶有時間處理并進行視覺重置，有精力看完一張卡再到下一張。
選擇簡單和基本的字體，因為基本的排版最大限度地提高了可讀性，并有助于瀏覽。
讓我們看看一些真實項目中的卡片設計案例：
信息流中的卡片設計
保持信息流卡片簡單是很重要的。它們應該有一個一致的、重復的結構，但是使用不同的圖片和字體大小來代表卡片中最重要的和最不重要的元素，以使讀卡片的人更容易理解它們。
由Diseno Constructivo和Webpixels設計
他們突出特色圖片和標題作為最突出的元素，這能幫助用戶決定文章或發(fā)布的內(nèi)容是否適合他們。
電商卡片設計
產(chǎn)品卡片是一個很重要的東西，它可以幫助你將訪問者轉化為客戶。一張優(yōu)秀的產(chǎn)品卡片應該能夠吸引人們的注意，激發(fā)人們獲得產(chǎn)品的欲望，激勵人們購買，并在搜索結果中得到高效推廣。
由Webpixels設計
產(chǎn)品的名稱應該放在最顯眼的地方，這樣參觀者就會立刻明白他來對地方了。一個好的配圖能告訴顧客勝過千言萬語，所以你需要一個高質量的產(chǎn)品配圖來設計完美的產(chǎn)品卡片。
如果產(chǎn)品有特價，不僅要在價格欄中注明促銷價格，還要注明常規(guī)價格，以及客戶可以節(jié)省多少錢。
個人中心卡片設計
簡介卡已經(jīng)成為一個應用或網(wǎng)站中的功能模板。隨著個人品牌變得比以往任何時候都重要，卡片設計在這里也能發(fā)揮重要作用。
由Neelesh Chaudhary設計
就像每一張卡片一樣，配置文件卡片也是一個UI組件，它包含了對它所代表的內(nèi)容至關重要的信息。為了達到你的目標，你要向其他人推銷你自己。
確保只包括必要的信息(例如，照片，名字，職業(yè))，讓你的“關于”頁面有剩余的細節(jié)來完善你的個人資料。
儀表盤卡片設計
儀表板的設計可以有很大的不同。但是所有的儀表盤都是用卡片做的。根據(jù)儀表板的類型，每張卡片可能包括概要信息、通知、快速鏈接或導航設計元素、關鍵數(shù)據(jù)、圖表和數(shù)據(jù)表。確保你為每個元素使用了正確類型的卡片。
由Simmmple設計
儀表盤卡設計允許用戶決定他們想要關注哪些數(shù)據(jù)。易于理解的UI，允許用戶精確地控制哪些數(shù)據(jù)需要在儀表板的前端做好。
只包括最相關的信息，為用戶使用方便。當你的數(shù)據(jù)集在一起看更容易理解時，找到在一張卡片上顯示它們的方法。但是要小心，不要讓用戶感到困惑。
日常計劃卡片設計
看板任務卡似乎是一件非常簡單的事情——拿一張便簽，寫下你需要做什么，然后把它貼在墻上。這些卡片必須包含需要行動的單位數(shù)量。它們還可能包含各種各樣的其他信息，清楚地傳達了必須做什么。
由Neelesh Chaudhary設計
卡片上包含的信息包括任務的名稱和重要的細節(jié)，如任務的類型和誰擁有它。看板卡放在狀態(tài)類別下。最基本的狀態(tài)類別是“計劃要做”、“正在進行中”和“完成”，但是狀態(tài)可能因項目而異。
卡片結構最適用于添加或刪除任務這樣的小改變，而不是改變像你的總體目標這樣的大想法。
有幾種方法可以使卡片設計更加有效。通過最初定義和觀察卡片，我們可以更好地了解跨行業(yè)的這種設計模式。這也讓我們能夠推測用戶希望在這些卡片上采取什么行動?？ㄆ谔峁┰S多不同種類內(nèi)容摘要的環(huán)境中尤其有效，而不是簡單地作為內(nèi)容列表的現(xiàn)代替代品。
演出項目可分為【有座項目】和【無座項目】兩種類型，有座項目又可分為【選座售賣項目】和【非選座售賣項目】。
大部分話劇、音樂劇、舞蹈芭蕾項目都是選座售賣項目。客戶來到貓眼客戶端中選擇想看的項目，選定座位并下單，最后檢票入場觀演，完成閉環(huán)。其中選座體驗是客戶轉化重要的一環(huán)，影響客戶決策。
為了提升用戶體驗，提升數(shù)據(jù)轉化，我們對貓眼目前選座體驗進行走查，探討問題原因，找到產(chǎn)品痛點和機會點，為產(chǎn)品優(yōu)化做準備。
貓眼客戶端選座體驗問題：
1.自營項目無法直接選座，無論場館大小必須先選擇區(qū)域再選擇座位
如下圖，無法選擇圖中的座位，點擊座位跳轉到對應區(qū)域的座位圖，需要再次點擊選擇。
2.無法根據(jù)場館座位分布全局選座
如下圖，選擇A區(qū)后僅能查看到A區(qū)座位，無法看到其他區(qū)域座位和舞臺。
3.場館分區(qū)圖風格樣式不統(tǒng)一
如下圖，繪制精細程度不一，風格樣式不一。
這些問題產(chǎn)生的原因：
問題1：產(chǎn)品結構規(guī)劃上將場館分為區(qū)域和座位兩個層級，未根據(jù)場館規(guī)模分級別展示，例如大型場館先選區(qū)域再選擇座位，小型場館直接選擇座位。
問題2：B端后臺性能問題阻礙了客戶端全局查看選座。
問題3：區(qū)域圖依靠B端后臺上傳，沒有統(tǒng)一的繪制標準約束，故客戶端的樣式不統(tǒng)一。
通過以上原因可以看出客戶端選座體驗很大程度上取決于B端后臺的配置，所以要從B端配置入手，從根源上解決體驗問題。
本次研究目的
研究對象
我們通過產(chǎn)品研究和用戶訪談形式，結合業(yè)務需求，對產(chǎn)品功能進行審視走查，希望能挖掘出產(chǎn)品痛點和機會點。
B端場館圖繪制及座位配置的主要用戶是運維人員，所以我們對運維人員進行了深度訪談，主要目的：
1.了解用戶使用貓眼B端的操作行為和痛點；
2.觀察用戶使用相似產(chǎn)品【城市售票網(wǎng)B端系統(tǒng)】的行為和痛點。
演出項目座位配置業(yè)務流程
商務與場館洽談好合作后，會提交添加/修改場館座位模板的郵件給到運維人員，由運維人員在B端后臺中進行創(chuàng)建和修改。商務可在B端后臺創(chuàng)建項目關聯(lián)到對應場館配置票價等。
在這條業(yè)務流程中，涉及到B端選座配置的部分：
1.創(chuàng)建/維護場館分區(qū)模板；
2.創(chuàng)建有座項目、關聯(lián)對應場館、配置票價、配置預留。
一、創(chuàng)建/維護場館分區(qū)模板
創(chuàng)建場館分區(qū)模板主要分為兩個步驟：
創(chuàng)建場館分區(qū)：包含兩個主要頁面和一個彈窗，承載創(chuàng)建分區(qū)圖和設置分區(qū)信息功能。創(chuàng)建分區(qū)支持上傳底圖、SVG圖，編輯器繪制。
創(chuàng)建分區(qū)座位：包含一個主要彈窗，承載畫座位、座位編號、移動座位、統(tǒng)計座位等功能。
1. 創(chuàng)建分區(qū)體驗痛點
1.1 使用SVG編輯器繪制場館分區(qū)圖操作不便
嵌入式畫圖工具僅能繪制較為簡單的圖形，門檻高且繪制成果不理想，對于復雜場館無法滿足繪制需求，無法與演出業(yè)務很好的結合。
1.2 運維使用第三方工具，繪制風格差異大
由于畫圖工具繪制不理想，運維人員自學AI、Coreldraw等繪制后上傳到后臺系統(tǒng)。人和工具的不同導致座位圖風格差異較大。
1.3 項目變動維護不便
項目調(diào)整需通過第三方繪制工具修改或重新繪制導出后上傳到后臺，修改流程長且重復操作過多。
2. 創(chuàng)建座位體驗痛點
2.1 畫座方式不支持繪制傾斜、曲度、錯位的座位
固定的座位方格坐標對坐標，自由度差，無法自定義座位角度和排布形式。無法精準還原場館座位分布。
2.2 不支持自定義舞臺方向和位置
舞臺位置方向固定，無法滿足多個舞臺、座位包圍舞臺配置。
2.3 繪制座位交互操作單一
僅支持鼠標在方格內(nèi)拖動繪制，效率低，增刪改操作麻煩。
2.4 交互流程不通順
編號、移動等功能先切換功能再選擇座位的順序不符合用戶行為，符合用戶操作的順序是先選擇座位再點擊對應操作配置。
座位編號、移動、統(tǒng)計功能不適合tab形式，交互組件使用不當。
2.5 交互界面表達有誤
座位編號分為排編號和列編號兩種方式，選擇一種并填寫配置參數(shù)。系統(tǒng)界面中兩種方式都有*（必填）容易引起誤導。
2.6 刪除編號語義不明確
選擇座位后點擊刪除編號按鈕后座位和編號都被刪除，按鈕語義與實際意思不符。并且誤刪除座位還會增加重新繪制工作量。
3. 產(chǎn)品結構體驗痛點
3.1 分區(qū)形狀與座位分布關聯(lián)度低
分區(qū)的大致形狀應由分區(qū)座位的排布所決定，而產(chǎn)品中分區(qū)形狀與分區(qū)座位形狀并無直接的關聯(lián)，導致用戶在選座時產(chǎn)生較大的割裂感。
3.2 不支持直接選座
為了讓客戶更直觀的掌握場館座位分布，運維人員繪制時會盡可能還原，但客戶選擇時還要進入分區(qū)后才能選擇座位，且僅能查看到一個分區(qū)的座位，不能全局選座。
4. 框架和容器動線體驗痛點
4.1 分區(qū)配置位置分散，操作效率低
分區(qū)繪制與信息配置分散在兩個頁面和1個彈窗中，頁面布局分散，動線復雜多變。
4.2 座位配置比重弱
座位配置權重高且操作復雜，不適合使用彈窗承載，位置層級太深。
5. 產(chǎn)品與業(yè)務關聯(lián)體驗痛點
5.1 座位配置功能單一，缺少輔助操作
繪制座位圖是一項龐大的工程，系統(tǒng)內(nèi)大型場館的座位達到4-9萬個，例如鳥巢、梅賽德斯奔馳文化中心。繪制大型場館需要花費3-4天時間，座位分布復雜的場館需要花費更長時間。目前系統(tǒng)僅有單一拖動方格的繪制方式，缺少提升繪制效率的輔助工具，例如撤回、復制座位、多種對齊/翻轉方式等。
6. 體驗優(yōu)點
6.1 繪制場館分區(qū)圖時支持導入SVG
方便繪制大型復雜的場館。
6.2 系統(tǒng)穩(wěn)定
復雜的場館繪制時間長且操作復雜，系統(tǒng)未產(chǎn)生過崩潰或其他終止情況。
二、配置票價和預留
配置票價和預留主要分為三個步驟：
選定場館分區(qū)：確認場館并選擇場館內(nèi)分區(qū)
配置票價：選擇座位配置票價。
配置預留：選擇座位配置預留。
1. 框架和容器動線體驗痛點
1.1 頁面結構相似，內(nèi)容重復
票價和預留頁面重復度高，都包含分區(qū)預覽、選座情況、分區(qū)座位圖模塊。
2. 交互細節(jié)體驗痛點
2.1 同樣功能不同頁面交互和視覺不一致
兩個頁面都包含分區(qū)預覽模塊，但交互視覺差別較大，交互視覺操作不統(tǒng)一。
2.2 內(nèi)容表達不清晰
設置預留操作中，“對象”文案語義表述不清晰、“貓眼”和“釋放”不屬于同一層級且語義表達不清楚；新增預留標記按鈕位置有誤，應該放置在自定義預留下方，而不是與“對象“平級。
2.3 設置預留后無法查看座位編號
設置預留后，座位編號被預留標簽替換，從而看不到座位編號，影響識別。
3. 產(chǎn)品功能體驗痛點
3.1 不支持導出票務方案圖
在項目洽談后、正式開票前，報批時需要提供給主辦和公安票務方案圖，供主辦審核，目前需要運維自行制作不支持導出。
一、維護場館分區(qū)模板
1. 產(chǎn)品結構
與貓眼B端后臺相同，城市售票網(wǎng)在繪制場館分區(qū)圖時也是分為兩個步驟，先配置區(qū)域再配置座位。
區(qū)域配置：支持上傳底圖并通過繪制工具畫出區(qū)域形狀，繪制完成后可直接配置區(qū)域信息。
座位配置：通過繪座工具畫出區(qū)域座位，選座工具和配置工具進行輔助繪制。
2. 產(chǎn)品布局
2.1 區(qū)域與座位配置結構清晰，頁面布局規(guī)整；
2.2 區(qū)域和座位配置兩步銜接緊密，操作動線流暢。
3. 區(qū)域配置功能分析
優(yōu)點：
1）支持上傳底圖及調(diào)整比例；
2）繪制工具易用性較高；
3）繪制風格統(tǒng)一；
4）分區(qū)配置動線流暢。
痛點：
1）不支持上傳SVG圖；
2）繪制POH(區(qū)域)的工具少，僅鋼筆工具；
根據(jù)產(chǎn)品定義，繪制座位分區(qū)使用區(qū)域工具，繪制舞臺、樓梯、出入口等場館輔助設施使用形狀工具。根據(jù)業(yè)務實際情況，區(qū)域繪制為主，形狀繪制為輔。然而區(qū)域繪制工具僅有一個鋼筆工具，Shape(形狀)繪制工具有三個，主次顛倒。
3）區(qū)域和形狀繪制工具容易混淆。
左側工具欄中兩類繪制工具未明確分開，非熟練人員操作時會誤用兩種工具。
4. 座位配置功能分析
4.1 創(chuàng)建座位
優(yōu)點：
1）工具繪制靈活自由；
2）支持旋轉座位。
痛點：
1）需要熟悉繪制工具交互操作，有一定的上手門檻；
2）單個座位工具、路徑繪制工具在繪制結束需要鼠標雙擊，在無指導的情況下用戶很難發(fā)現(xiàn)。交互操作缺少說明文字或圖片解釋。
4.2 選擇座位
優(yōu)點：
1）多種輔助工具提升繪制效率；
2）支持區(qū)域內(nèi)復制黏貼座位。
痛點：
1）僅能在區(qū)域內(nèi)復制黏貼座位，不具備區(qū)域之間座位復制或復制區(qū)域的能力。
對稱布局是場館中常見的一種布局形式，繪制好一個區(qū)域座位后復制并翻轉就可以快速畫完另一個區(qū)域。
如下圖所示，當前在G區(qū)域編輯座位，雖然可以復制G區(qū)的座位黏貼，但僅在G區(qū)能看到，無法復制到C區(qū)圖層內(nèi)。
2）不支持設置弧度座位。
如下圖所示場館無法在系統(tǒng)內(nèi)完全還原。
4.3 座位編號
優(yōu)點：
1）編號方式支持字母、數(shù)字、字母數(shù)字結合形式，符合多種場景需求。
痛點：
1）編號受限于繪制時的分組；
繪制座位需要根據(jù)座位編號邏輯繪制分組，不可以一次性全部繪制完后分開編號。
若第一次繪制有遺漏座位，第二次補充后，無法整體編號。
2）無法取消編號。
編號僅能修改，不能刪除
5. 產(chǎn)品視圖分析
5.1 編輯座位視角
缺點：
1）僅支持在預覽功能時查看創(chuàng)建的全部座位。繪制某一區(qū)域座位時無法看到其他區(qū)域座位，缺少全局參考。
二、配置票價和預留
1. 產(chǎn)品布局
優(yōu)點：
1）票檔和預留配置與場館座位配置結構相似，布局和操作統(tǒng)一，易于理解。
2）票價和防漲配置在一個頁面內(nèi)完成，簡單清晰。
2. 票價及預留配置功能分析
痛點：
1）設置預留后無法查看到座位編號
如下圖中A標記的座位是預留座位，無法查看座位編號
2）預留模式下，選中已設置票檔、未設置預留的座位時，無法區(qū)分票檔
如下圖選中狀態(tài)下1-6號座位無法區(qū)分票檔A/B
3. 總結
城市售票網(wǎng)B端系統(tǒng)的在繪制場館圖上靈活度自由度高，界面布局規(guī)整，動線清晰，產(chǎn)品功能適用于多元復雜場景，不過需要用戶具有一定的繪圖基礎或熟悉成本。
通過以上分析，我們總結出貓眼B端系統(tǒng)后續(xù)的優(yōu)化方向，框架和容器動線上需要提高用戶瀏覽和操作效率，頁面進行歸類整合，布局樣式統(tǒng)一；繪制環(huán)境上需要為用戶提供靈活自由的區(qū)域座位繪制工具，配備高效的選座和輔助工具。
一、整體布局
1）打破現(xiàn)有的分區(qū)與座位不平衡布局模式，梳理動線
二、功能
1. 場館分區(qū)設置
1）提供與業(yè)務關聯(lián)度高的、易用的分區(qū)繪制工具；
2）支持多種類型分區(qū)，例如舞臺區(qū)、座位區(qū)、舞池區(qū)等；
3）提高分區(qū)與座位繪制還原度；
4）確立場館規(guī)模分級，客戶端根據(jù)級別展示座位層級或直接進入分區(qū)層級。
2. 場館座位設置
1）提供易用度高的座位繪制工具或座位添加方式；
2）支持靈活選座，靈活編號；
3）支持調(diào)整座位角度、弧度、間距參數(shù)；
4）提供提升繪制效率的輔助工具；
5）支持跨區(qū)復制座位或復制區(qū)域功能；
6）提升座位配置頁面權重，完善座位配置界面。
3. 配置票價和預留
1）整合票價和預留頁面；
2）修正界面交互視覺問題；
3）支持設置預留后查看座位號；
4）增加導出票務方案圖功能。
這次研究我們從業(yè)務、產(chǎn)品功能、用戶三方面對選座配座模塊進行走查，抓住產(chǎn)品痛點，為后續(xù)改造指明了方向；對同類型產(chǎn)品的選座配座解決方案進行分析，幫助我們獲得新思路。
隨著沉浸式劇場、互動型劇場等新型演出的發(fā)展，場館座位布局不再是單一的座位正對舞臺，多個舞臺、座位多角度圍繞舞臺的布局形式不斷出現(xiàn)，今后還會有更多新型座位布局出現(xiàn)。設計適用于多種業(yè)務場景、頁面動線清晰、繪制功能好用的后臺工具不僅能提升運維人員的操作效率，也能提升客戶端用戶選座體驗和購票轉化，從而提升產(chǎn)品的市場競爭力。隨著演出行業(yè)的逐步復蘇，大量選座項目上線，改造選座模塊是我們工作重中之重。
筆者在車聯(lián)網(wǎng)行業(yè)任職HMI視覺設計師，由于HMI設計發(fā)展的較晚，所以基本上在開始進入到這個領域的人，大多來自于互聯(lián)網(wǎng)行業(yè)。由于互聯(lián)網(wǎng)行業(yè)發(fā)展的比較早，形成了一套成熟的工作流程，即：分工明確的遞進式協(xié)作：交互設計師要等到產(chǎn)品PRD評審結束才開始介入需求，然后交付黑白線框稿等給到視覺設計師繼續(xù)跟進。這種工作模式可以讓每個人在自己的崗位上做得更加專業(yè)，成為垂直領域的專家。在車聯(lián)網(wǎng)行業(yè)發(fā)展初期的時候，這種工作模式對于傳統(tǒng)行業(yè)的來講，比較新穎、高效，所以在一定程度上促進了行業(yè)發(fā)展，但汽車操作系統(tǒng)的設計還是有很多不同于互聯(lián)網(wǎng)設計的地方，所以本文旨在討論HMI工作流程，如何分工，怎樣高效的進行設計協(xié)同，以期望探索更適合車聯(lián)網(wǎng)行業(yè)的設計協(xié)同方案，希望對你可以有所助益。
對于HMI設計來講，需要了解很多專業(yè)知識，比如：屏幕、硬件、三電、法規(guī)……這些東西都會影響到設計的視覺表達，所以設計協(xié)同就顯得尤為重要，那么什么是設計協(xié)同呢？指設計師在設計之初，即可開啟分享與協(xié)作，讓協(xié)同者盡可能早的參與到設計中，通過提供一系列工具，讓協(xié)同者有更加友好地體驗，保證每個人都可以準確找到相應需求的內(nèi)容，并且快速提出修改意見與反饋。簡單地講，就是讓每個人都參與到設計過程中，以使最終的結果能夠滿足用戶的需求。
從產(chǎn)品功能邏輯層面來講，HMI設計的“復雜度”是具有有一定的“限制性”的，即保證安全第一，過度復雜的設計必然影響駕駛和乘坐人的安全。所以對于設計，是需要進行全方位評估的，必然會涉及到不同的角色。同時隨著項目的不斷發(fā)展，設計團隊也在不斷壯大，設計師之間的協(xié)作也越來越多，相應的溝通和協(xié)作成本就會不斷增加。如何才能更高效的合作，并把設計質量和一致性做得更好，是我們需要解決的問題。所以設計協(xié)同的最終目的是為了解決問題，做正確的事，讓設計師做真正該做的事情。
讓設計師專注于真正重要的事情，而不是把精力放在可以自動化處理的事情上。對所有人員的工作進行集中化管理，所有人員基于統(tǒng)一數(shù)據(jù)源進行協(xié)作。
通過構建團隊資產(chǎn)庫，比如設計規(guī)范、控件組件庫等，通過建立健全設計規(guī)范，讓數(shù)據(jù)沉淀，一方面讓設計師的設計有據(jù)可依，提升設計的專業(yè)性，另一方面，減少因為人員變動造成的數(shù)據(jù)丟失。
在設計之初，就讓協(xié)同者參與到設計之中，保證每個人都可以準確的找到他們的需求內(nèi)容，并快速提出修改意見與反饋，讓設計師更有針對性的解決問題，讓設計師無需做重復性的工作。
在HMI設計的工作流程中，主要涉及到的角色有產(chǎn)品經(jīng)理、交互設計師、視覺設計師、研發(fā)工程師、測試工程師、項目經(jīng)理。
不同角色主要工作內(nèi)容是：
圍繞著HMI設計的整個工作流程是：
產(chǎn)品經(jīng)理確認需求，輸出PRD文檔；交互設計師收到PRD文檔以后，基于需求，梳理功能，完善業(yè)務流程，完成交互文檔的制作，輸出UE文檔；視覺設計師在收到UE文檔以后，針對交互文檔中的流程頁面，進行視覺設計，輸出UI文件給到研發(fā)同學；研發(fā)同學根據(jù)UI文件和交互文檔進行代碼化，完成以后進入測試環(huán)節(jié)，測試工程師和產(chǎn)品、交互、視覺都需要參與到測試過程中，當完成測試工作以后進行發(fā)版。
涉及角色
自己、設計師小團隊。
痛點
工作中很多重復的內(nèi)容，比如：Button、List等使用的地方很多，如果每個元素都重新繪制，勢必會投入很多時間，同時因為人為因素，難免會出現(xiàn)不統(tǒng)一的地方。那么怎么樣解決這個問題呢？
協(xié)同方式
當團隊初期發(fā)展的時候，或者整個團隊只有少數(shù)幾個設計師的時候，通過匯總通用樣式和組件，形成視覺指導Guide，方便通用樣式的復用，減少重復工作量，達到快速完成視覺設計的目的。
優(yōu)點
通過樣式庫和控件組件庫的搭建，形成了一定的共有樣式，方便復用，有效的減少了重復工作量。
缺點
由于控件組件庫是在設計進行到一定程度以后提煉的，會存在滯后性，并且隨著設計工作越來越往后，會發(fā)現(xiàn)前期的控件組件存在不合適的地方，需要對之前的工作進行修正。
涉及角色
設計團隊內(nèi)部。
痛點
當公司發(fā)展到一定的階段：
當設計團隊越來越大，大家分工越來越細，想法越來越多，就會發(fā)現(xiàn)，復制粘貼guide的方式，已經(jīng)無法滿足團隊的發(fā)展了，經(jīng)常出現(xiàn)組件不能滿足使用的情況，或者是組件相似但不知道怎么選擇等問題。
同時因為沒有統(tǒng)一的流程，會發(fā)現(xiàn)不同的業(yè)務對于同一功能交互邏輯的不統(tǒng)一現(xiàn)象，比如：搜索是很多業(yè)務都會使用的功能，因為沒有統(tǒng)一定義，有的業(yè)務會采用即時搜索模式，有的業(yè)務必須點擊搜索以后才可以進行搜索，并且這種問題，前期很難發(fā)現(xiàn)，只有到了中后期走查的時候才會發(fā)現(xiàn)。
所以在后期會針對每一個差異點進行統(tǒng)一，需要全流程重新來一遍，費時費力。那么怎么才可以避免這種情況的發(fā)生呢？答案就是構建設計系統(tǒng)。
協(xié)同方式
設計系統(tǒng)不同于guide的地方是：樣式，控件組件只是設計系統(tǒng)中的兩個組成部分，除此以外，設計系統(tǒng)還包括了一系列的標準來指導設計。比如：圖標、動效、音效等。這些標準記錄了設計團隊內(nèi)達成一致的一系列的決定，比如如何選擇控件，如何在不同的控件中選擇。正是這些標準才確保了設計方案不僅僅只解決一個問題，而是可以被復用的。這些標準也是為什么用戶能獲得一致的體驗的原因。
通過設計系統(tǒng)的建立，讓設計規(guī)模化，繼而進一步強化車機系統(tǒng)的統(tǒng)一性，同時為設計師在做設計時提供一個很好的指導方向，讓團隊內(nèi)不同成員的設計在風格上保持一致，提升設計團隊的專業(yè)度。關于設計系統(tǒng)的建立本文就不再過多描述，后續(xù)會出專門的文章進行詳述，這里主要是講述設計系統(tǒng)搭建以后的協(xié)同方式。
設計系統(tǒng)的搭建需要專門的人或者團隊進行，當搭建完成以后，需要輸出的資源有：UE控件組件庫、顏色/字體樣式庫、UI控件組件庫、UI控件組件說明文檔。這些資源各有什么用呢，接下來進行詳細說明：
UE控件組件庫
提供給交互設計師，基于提供的內(nèi)容，交互可以快速的構建界面、交互和流程等，就像搭樂高一樣?？梢钥焖俚臉嫿ㄒ恍┊a(chǎn)品原型或者是實驗性的功能，來進行測試以快速驗證想法。
顏色/字體樣式庫、UI控件組件庫
提供給UI設計師，形式可以是Sketch Libraries，一方面方便設計師調(diào)用，使不同的設計師的設計變得更加統(tǒng)一，且更加可預測，同時組件也可以讓設計師更多的時間專注于如何構建更好的用戶體驗，而不是去糾結于樣式的調(diào)整。
UI控件組件說明文檔
提供給研發(fā)，可以是pdf之類的文檔形式，主要是詳細的描述每一個組件的各種屬性，以及里面包含的交互邏輯等，幫助研發(fā)搭建起研發(fā)自己的底層代碼平臺。
那么這些資源和不同的角色之間是怎么協(xié)作呢？UE控件組件庫不需要常常更新，完成后給到交互設計團隊，供交互設計師使用搭建UE文檔。在項目開始之前，負責設計系統(tǒng)的UI團隊進行顏色/字體樣式庫、UI控件組件庫制作，完成以后分享到團隊內(nèi)，供業(yè)務設計師使用進行界面設計，同時進行UI控件組件說明文檔的編撰，完成以后提供給相應的平臺研發(fā)，讓平臺研發(fā)進行組件代碼化。當代碼實現(xiàn)以后進行走查，檢查是否按照UI準確的實現(xiàn)。當業(yè)務設計師完成了業(yè)務的界面設計以后，進行評審，輸出給對應的業(yè)務研發(fā)，研發(fā)對于相應的視覺界面進行對應的代碼化，使用組件的地方直接調(diào)用平臺代碼，剩下的由業(yè)務研發(fā)進行代碼化。
優(yōu)點
組件由專門的UI設計師和研發(fā)團隊負責，當出現(xiàn)設計變更以后，業(yè)務設計師可以快速通過組件庫更新最新的視覺樣式，同時和平臺研發(fā)對接，進行代碼修改，而不需要每個業(yè)務研發(fā)單獨修改，大大減少了跨部門的協(xié)作溝通成本。
缺點
團隊內(nèi)需要專門的設計師構建設計系統(tǒng)并負責日常維護。
涉及角色
設計、交互團隊。
痛點
由于需求的不確定性，以及車聯(lián)網(wǎng)項目周期較長等特點，會出現(xiàn)需求經(jīng)常變更的情況，那么交互就需要不停的更新交互文檔，UI也需要不停的輸出視覺文檔，往往一個項目結束以后，會有幾十份甚至上百份的設計文檔的情況出現(xiàn)。
協(xié)同方式
隨著云端化辦公軟件Figma的興起，為多角色協(xié)作提供了可能性，目前主流的工具有：Figma、MasterGo、Pixso、即時設計等在線軟件。
設計文件現(xiàn)在是一個鏈接，這意味著：
UI設計師不必再等到交互完成評審，輸出交互文檔以后進行視覺設計，交互和設計完全可以合二為一，輸出一份高保真交互流程文檔，并且輸出的文檔可以供研發(fā)直接瀏覽器查看，而不需要像之前一樣，不停的進行設計資源的輸出。極大的節(jié)省了設計師輸出時間。優(yōu)化了協(xié)作工作流。
優(yōu)點
協(xié)作設計，云端辦公，多角色參與。
一鍵獲取文件，不需要通過其他平臺轉化，步驟簡單；自動生成代碼與標注。設計稿修改后自動更新，無需重復下載。
缺點
云端保存，會有數(shù)據(jù)泄露的風險。
必須在線操作。
涉及角色
UE、UI、研發(fā)。
痛點
由于公司發(fā)展，業(yè)務線增加了很多適配線，這塊的工作基本上屬于：把已有的UI適配到另一個屏幕尺寸下，需要設計的地方不太多，需要花更多的時間去重新按照最新的屏幕尺寸搭建一遍UI界面，屬于用時間換業(yè)績，為了達到這個目標，可以采取的方式大致分為兩種：
第一種是增加更多的人力，不管是招更多的人，還是增加更多的供應商人員，都會增加業(yè)務支出，并且由于業(yè)務無法一直保證飽和，所以會出現(xiàn)一段時間忙的要命，招了很多人員，過了這段時間，業(yè)務不太多了，大家都閑了下來，但是開支還是必要的，所以這算是一種沒有辦法的辦法，對于團隊或是公司來講，并不可持續(xù)。
另外一種方式就是重新梳理工作流，減少一些重復無意義的工作，比如像是系統(tǒng)設置等瀑布流式的界面，不同車型下的區(qū)別只來自于功能的有無，界面上并無太大區(qū)別，這里所說的工作，不僅僅指設計師的界面設計工作，同時也包括了研發(fā)同學的研發(fā)落地工作，同時因為研發(fā)同學的適配，也會造成測試走查環(huán)節(jié)，這些都是一些重復性的工作量，所以是否有一種更好的協(xié)作方式可以避免這種情況的發(fā)生呢？
答案就是我們接下來要講的一種全新的工作模式：C2D2C模式。
協(xié)同方式
由于設計團隊在早期的發(fā)展中，積累了大量的設計資產(chǎn)。這些設計資產(chǎn)的沉淀就是設計標準化的基礎，將設計資產(chǎn)轉為封裝好的代碼組件，也就是C2D的過程。然后將封裝好的組件通過低代碼平臺進行屬性配置、搭建頁面、布局調(diào)整實現(xiàn)頁面的設計就是 D2C 的過程。通過平臺設定交互行為和綁定后臺數(shù)據(jù)，完成整個系統(tǒng)，最后再進行站點發(fā)布，就實現(xiàn)了 C2D2C 的完整流程。
C2D2C（Code to design to design）的模式，簡單講就是研發(fā)同學把設計資產(chǎn)通過設計標準化和研發(fā)工業(yè)化的方式完成代碼化，然后讓設計師調(diào)用已經(jīng)代碼化的設計資產(chǎn)進行設計工作，這樣子當設計師完成了界面設計的時候，相當于同時完成了前端開發(fā)，接下來研發(fā)同學只需要根據(jù)拿到的界面添加簡單的邏輯就算完成了研發(fā)工作，實現(xiàn)中后臺設計研發(fā)流程的整體提效。
優(yōu)點
由于樣式、組件已經(jīng)完成了代碼化，那么在適配工作中，控件組件化高的界面就可以直接生成代碼，不需要設計師重復設計，同時由于減少了設計師和研發(fā)的參與，節(jié)省了大量溝通成本，也減少了很多因為人為因素而產(chǎn)生的bug。
由于設計師減少了重復工作量，可以有更多的時間集中在視覺表現(xiàn)上，有效提升了設計輸出的質量，保證了產(chǎn)品的設計感。
對于大量適配項目的團隊，可以由設計師直接配置項目組件，無需經(jīng)過研發(fā)，減少出錯概率，極大提升工作效率。
缺點
前期需要研發(fā)同學代碼化基礎控件，所以需要投入人力、精力進行前期的工作。
由于控件提前進行了代碼化，后續(xù)可能會出現(xiàn)無法滿足業(yè)務需求等情況出現(xiàn)，所以需要有人及時對代碼進行維護更新。
涉及角色
產(chǎn)品、UE、UI、研發(fā)、測試。
痛點
基于上面講述的C2D2C模式，已經(jīng)完成了一個共享平臺的搭建，由于配置需要研發(fā)的參與，所以始終需要研發(fā)同學作為集成人員，并不利于其他角色的使用，那么怎么樣可以讓產(chǎn)品同學，設計同學，或者說是普通用戶使用呢？
協(xié)同方式
一個優(yōu)秀的共享平臺是需要所有人都可以在其中使用的，所以，當公司或者團隊發(fā)展到穩(wěn)定階段，我們需要重構工作流，以需求為導向，搭建全員工作平臺，基于設計師和研發(fā)搭建的平臺基礎上，提煉需求，強化個性化和定制化，滿足品牌產(chǎn)品的個性化需求，具體來講，就是把UI界面中元素提煉出相應的功能，生成功能清單，通過選擇不同的功能，生成相對應的界面。
當完整的共享平臺搭建完成以后，團隊中的每個角色的工作內(nèi)容都發(fā)生了變化，產(chǎn)品的工作是構建更多的需求，交互設計師的工作是構建更多的交互形式，產(chǎn)品架構，UI設計師的工作是設計更多更好的界面布局，視覺表現(xiàn)，然后研發(fā)把上述內(nèi)容通過代碼匯總進我們的需求池中，擴展我們的平臺豐富度。
HMI設計工作，就變成了：客戶在我們的配置面板中選擇需要的需求，喜歡的布局，想要的視覺，點擊完成，就可以即刻看到高度定制化的一套系統(tǒng)。
優(yōu)點
讓每個人回歸工作的本質，不需要為了一些重復的繁雜的內(nèi)容而疲于奔命，做更有價值的工作，實現(xiàn)工作的價值
賦能行業(yè)，可以滿足車企定制化的需求，提供車企一套完整的車機系統(tǒng)解決方案。
缺點
投入大，對于小體量的業(yè)務來講短期無法創(chuàng)造價值。
對于現(xiàn)在的行業(yè)環(huán)境，增速提效已經(jīng)達成了基本共識，設計協(xié)同就成了一個大課題，但是不同的企業(yè)，不同的團隊面對的具體問題不一樣，可使用的資源也不太一樣，那么采用哪種協(xié)同方式并無定式，需要根據(jù)實際情況，進行具體分析，畢竟效率的提升是為了創(chuàng)造最大的價值。我們所有的努力最終目的是為了解決問題，做正確的事。
作者：菘藍C 來源：站酷網(wǎng)
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
最近 AI 繪畫越來越成熟，能做的事情也越來越多，很多同學經(jīng)常在群里或私信中問我關于對 AI 繪畫的觀點和看法，以及 AI 繪畫對 UI 設計師有什么影響，所以今天獨立寫一篇內(nèi)容，來具體討論下這個話題。
首先輸出一個太長不看版的結論：
AI 繪圖可以協(xié)作 UI 設計師更快地完成一些邊角料工作，但無法取代 UI 設計師的核心價值，不會對 UI 崗位造成大范圍沖擊……
那下面就來具體討論吧！
相信大家都有這種感覺，2022年開始，AI 繪畫突然就毫無征兆地火起來了，用火遍大街小巷來形容一點也不過分，當我走在地鐵和機場等公共場所都能隨處可見 AI 繪畫作品的展示。
其實AI繪畫這個技術一直都有，比如 OpenAi 的 Dall·E，但真正產(chǎn)生質變的時候是從 2022 年2月 Disco Diffusion 發(fā)布以后，讓 AI 繪畫的能力得到了質的飛躍。
隨后一些使用它創(chuàng)作的作品開始流通，且在美國的某數(shù)碼繪畫比賽中由 AI 作品獲得冠軍，徹底吸引了公眾的視線。隨后，一系列新的 AI 繪畫工具開始開發(fā)和上線，包括目前為大家所熟知的 Stable Diffusion 和 Midjourney、NovelAI。
從上線到現(xiàn)在不到1年的時間里，這些軟件都完成了多次的大版本更新和迭代，讓 AI 繪圖的能力越來越強，準確性越來越高，我們甚至很難想象再過五年以后會發(fā)展到什么可怕的地步。
除了目前已經(jīng)正式發(fā)布的繪圖工具外，還有很多新的產(chǎn)品正在熱火朝天的開發(fā)階段，如巨頭 Adobe 的 Firefly ，Stability 的新產(chǎn)品 REimagine 等。
產(chǎn)品的多樣性，差異化，以及本身的進化，為視覺設計和藝術創(chuàng)作提供了全方位的支持和可能性，也對相關行業(yè)產(chǎn)生了巨大的沖擊。
我們不得不面臨一個很現(xiàn)實的問題，AI 是不是會取代大多數(shù)插畫、設計師？
這是很有可能的，不管是從網(wǎng)上，還是認識的朋友學員那邊獲得的反饋，高度依賴插畫、場景建模的行業(yè)，都在受到 AI 的劇烈沖擊，有的將接入 AI 制定成 KPI 要求全團隊 ALL IN，有的在跑通AI工作流以后直接啟動裁員進程或關閉外包渠道。
AI 的出現(xiàn)對于美術行業(yè)，就像燃油車出現(xiàn)對馬車的革命，照相機的出現(xiàn)對手繪的沖擊，是非常值得思考的，因為我們或多或少也身在其中。
因為在產(chǎn)品方向，Midjourney 已經(jīng)可以通過指令生成用戶界面了，試用 ChatGPT-4 已經(jīng)可以用指令10秒創(chuàng)建一個可以操作和訪問的網(wǎng)頁，看起來未來已經(jīng)提前朝我們走來。
所以 UI 設計師是不是很快也要被取代直至消亡？
相信有長期看我們公眾號分享和公開課的同學，應該知道我一直在強調(diào)，界面對于 UI 設計師的工作只是必要但占比并不高的部分，如果認為我們的工作價值僅僅是最后產(chǎn)出的視覺界面，那淘汰多數(shù) UI 設計師的方式根本輪不到 AI 來動手，按目前市面流通的前端框架和組件庫就夠了。
之所以有大量的現(xiàn)成素材、模版、組件庫，還不能淘汰 UI 設計師，原因就是整個項目設計過程中所需的變通、靈活性、抽象思維要求，是它們完全無法覆蓋的。
一個稍微成熟點的項目設計圖產(chǎn)出和交付，是需要經(jīng)過下面這個流程的：
從這個簡化的流程模型里，大家要明白專業(yè)的設計稿輸出是有 “黑箱” 加工步驟的，要在這階段，對工作的需求進行大量的研究、分析，并做出決策確定出設計目標或者方案。
在現(xiàn)代設計團隊中，直接拿到需求就做設計稿的模式是很難產(chǎn)出高質量設計的，或者應對更專業(yè)嚴格的要求。設計師需要在這個階段投入大量精力，盡可能提升設計產(chǎn)生的價值，減少出現(xiàn)不良影響的風險，以及 —— 說服團隊接受當前的設計思路。
而這是 AI 繪圖完全無法實現(xiàn)的東西，我們使用 AI 繪畫僅僅是輸入做好的決策，讓它生成結果，但沒辦法通過輸入業(yè)務、需求的疑問，讓它給出一個有詳盡理由和邏輯的設計成果。
可能有同學會下意識的想到，那我們用 ChatGPT 這樣的工具，提出問題，讓它自己給出解答并直接給出繪圖指令操作繪圖工具生成界面，順帶再自己開發(fā)號產(chǎn)品，不就行了，一個人就是一個團隊，人人都是產(chǎn)品經(jīng)理終于實現(xiàn)……
這個業(yè)務模型非常合理，看起來似乎完全可以實現(xiàn)。但真的有項目經(jīng)驗的自己去思考一下，就會發(fā)現(xiàn)中間存在的問題無窮無盡。
第一點，“黑箱” 是給出問題答案的分析處理過程，ChatGPT 再怎么神通廣大，也需要我們?nèi)ソo到有效的問題和需求，它才能給你有用的答案。那么問題來了，你怎么和它描述具體的業(yè)務需求、產(chǎn)品需求、體驗問題和各類用戶痛點？
以上一篇分享為例，我們優(yōu)化 Stable Diffusion 的輸入框，光和 AI 說優(yōu)化輸入框約等于廢話，你得告訴它怎么優(yōu)化，那怎么優(yōu)化這件事不就是得去找出原產(chǎn)品問題的缺陷嘛？如果我自己去找完缺陷了，那最后畫那點圖例的工作量有什么了不起的呢？
更何況一些復雜的業(yè)務，尤其是B端行業(yè)，完全無法用簡單的幾句話描述清楚，要搭配各種框架圖和流程圖，光開一個業(yè)務評審和培訓的會議，可能就要花非常長的時間。
所以該用什么形式去和 AI 描述這些抽象的信息內(nèi)容？
第二點，還是以上面案例為例，在這個輸入框中，包含很多交互的小細節(jié)，輸入框內(nèi)光標的操作，鍵盤的操作邊界在哪里，輸入文字后提示關聯(lián)的邏輯，不同輸入指令類型要區(qū)分怎么和 AI 描述，全都成為問題。
所以光生成一個界面是沒有意義的，這個界面做的再好看再美觀，也不代表它有真實落地的可能，只是完成了設計工作的一小部分而已。所以看到這里是不是感覺很熟悉？和我們在追波上看到的各類飛機稿案例沒有太大的區(qū)別。
第三點，上面的模型只是一個非常簡化的流程，有過真實的項目經(jīng)驗就應該知道流程中會有反復拉鋸的事件，需求的變動，設計稿的修改，方案的調(diào)整，這些零碎的工作去和 AI 提，你會發(fā)現(xiàn)有輸入問題的時間，可能設計早就修改完了。
尤其在最終的標注和切圖環(huán)節(jié)，涉及到設計時對設計稿的制定，標注和切圖實際上有很多主觀性和經(jīng)驗化、場景化的輸出要求，它需要設計師在經(jīng)歷整個項目流程后自行判斷。
除了以上三點，還有很多其它的問題難以解決，而這些問題的總和，決定了沒有出現(xiàn)真正的人工智能之前，使用 AI 來輸出 UI 界面是一件不靠譜的事情。
只有視覺領域沒有前期那么多條條框框，也沒有后續(xù)一系列交付和維護需求的場景，才是 AI 真正產(chǎn)生價值和影響的方向。
用 AI 做 UI 設計不靠譜，但是不代表對UI設計師沒價值。這話聽著可能挺拗口的，但事實如此，因為在國內(nèi)的UI設計環(huán)境中，UI 設計師的工作內(nèi)容往往不局限于產(chǎn)品設計一個領域內(nèi)。
還包含下面這些操作：
我相信大多數(shù) UI 設計師做平面和運營設計的感受就和上墳的狀態(tài)是一樣的，上墳起碼是懷有對先人獻花，做平面和運營設計只會產(chǎn)生對自己深深的唾棄……
所以 AI 的出現(xiàn)可以很好的處理這部分的需求，比如一些雖然用處不大，但就是甲方還是老板就是想用的 3D 風格圖標。
或者，在登陸頁用的比較濫俗的 3D 場景背景，為了這樣的東西花很長的時間去建模和渲染，投入和收益是完全不成正比的。所幸使用 AI 也可以幫助我們非常短的時間內(nèi)獲取想要的效果。
還有就是各類運營設計圖，互聯(lián)網(wǎng)運營設計和一般的品牌廣告視覺比較起來，就是對創(chuàng)意性的忽視，畫面并不需要埋伏大量的隱喻、內(nèi)涵或故事，就是單純的應景和吸引用戶注意力，這恰恰也是 AI 最適合輸出的東西。
包括廣告 Banner、H5、啟動頁等，都可以通過 AI 快速生成一些高質量的插畫，來替代我們自己從頭開始繪制的苦惱。
所以你看，對于我們職業(yè)價值不高的這些雜活，AI 都可以很好的去完成，而且可以肯定未來可以完成得越來越好，我們就可以節(jié)省更多的時間，不管是投入精力給體驗和交互，還是準點下班，都符合我們自身的利益。
所以，UI 設計師對 AI 的態(tài)度并不是敵視和悲觀，而是要把它當作救星和幫手，把我們從運營設計的水火中拯救出來……
不僅是觀念上的調(diào)整，掌握一定的 AI 繪制技巧也是必要的，將他們?nèi)谌氲侥阏降墓ぷ髁鞒讨?，所需投入的精力也遠遠小于你從頭開始學插畫和 3D 渲染。
相信不久的將來，UI 設計師的招聘中部分要求手繪和建模的 JD，會替換成熟練使用 AI 繪圖。
作者：酸梅干超人 來源：站酷網(wǎng)
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
看完本篇文章，你會學到以下內(nèi)容：
1，什么是彈窗？
2，彈窗的規(guī)范如何定義？
3，彈窗使用規(guī)則是什么？
4，什么是抽屜？和彈窗對比優(yōu)缺點是什么？
一、什么是彈窗？
彈窗是在保留當前頁面狀態(tài)的情況下，告知用戶并承載相關操作。
思考：彈窗里面哪些構成原件可以根據(jù)業(yè)務屬性可以有可以沒有呢？
答案：標題區(qū)和操作區(qū)。
二、彈窗的規(guī)范如何定義？
1、定義彈窗的大小規(guī)范
彈窗的的大小有兩種定義方式。一種是固定大小，一種是自定義大小。需要根據(jù)自己的業(yè)務場景二選一。
彈窗寬度一般定義為三種。分別為560px，720px，960px，都是8的倍數(shù)方便記憶。尺寸并不是定死的，可以根據(jù)自身業(yè)務場景調(diào)節(jié)。
彈框固定高度會有一個最小高度200px，一個最大高度560px。在其之間的高度是由內(nèi)容區(qū)的內(nèi)容決定，超過最大高度560px時出滾動條。
彈窗自定義高度，只定義最大高度，隨著頁面拉升縮小，彈窗邊距不變。
2、定義彈窗內(nèi)容規(guī)范
定義：標題欄操作欄高度，內(nèi)容區(qū)邊距。
3、彈窗類型
彈框類型是根據(jù)使用場景區(qū)分提示彈窗，自定義彈窗兩種
彈窗優(yōu)點：沒有跳出父級頁面，彈窗任務完成后仍然會留在父頁面進行操作，減少用戶操作中步驟體感
彈窗缺點：信息承載量少，信息內(nèi)容過多的時候會出現(xiàn)上下左右滾動條，彈窗會降低用戶操作效率
三、彈窗使用規(guī)則是什么？
1、不超過兩種操作選項
假如承載的操作項比較多，建議新跳轉一個落地頁。
2、多步驟操作，選擇用頁面承載
3、盡量避免彈窗疊彈窗
第一個彈窗的內(nèi)容考慮用頁面承載或者第二個彈窗是否可以用氣泡或者下拉來承載。
假設一定要疊，二級彈窗的復雜度要低于一級彈窗，滿足形式上的平衡，遵循從大到小的邏輯或者是覆蓋上級，完成任務后點“返回”返回。
四、什么是抽屜？和彈窗相比優(yōu)缺點是什么？
抽屜是信息承載量和頁面比肩，又兼具彈窗的優(yōu)點。
作者：鯤sky 來源：站酷網(wǎng)
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
看完本篇文章，你會學到以下內(nèi)容：
1， 什么是表單頁？
2，表單頁設計原則
3，表單的構成
4，表單的交互
5，頁面布局
6，提升表單易用性
7，體驗衡量指標
1、采集/錄入數(shù)據(jù)信息。2、編輯數(shù)據(jù)信息。3、特殊的條件設置。后臺產(chǎn)品的本質是針對數(shù)據(jù)的增、刪、改、查。而增、改、查都可以用表單完成。
OA系統(tǒng)里面的請假申請，報銷申請，錄入員工，新建會議。教育類的創(chuàng)建課程。HRM系統(tǒng)里面發(fā)布職位以及物聯(lián)網(wǎng)管理系統(tǒng)新建設備等等。
用戶快速定位重要信息和目標選項同時文案和組件能夠準確傳達相應含義
整體表單排布有合理的交互形式；科學的信息布局和組織形式；盡可能“少操作一步”用戶在面對50和表單和500個表單的心理壓力是不一樣的。
操作前：提示和防錯。
操作中：實時反饋與糾錯
操作后：合理的保存、清空、取消、撤銷機制。
表單通常由表單標簽、表單域、提示提示、操作按鈕四部分構成。
左標簽
優(yōu)點：表意明確，節(jié)約縱向空間，多用于web端
缺點：不太適用于移動端等狹長空間
頂標簽
優(yōu)點：對齊舒適，節(jié)約橫向空間，多用于移動端及英文場景下。
缺點：縱向空間利用率不高
行內(nèi)標簽
優(yōu)點：最節(jié)省空間，多用于注冊登錄
缺點：輸入狀態(tài)標簽消失，用戶陷入迷茫
左對齊標簽
視線從標簽移動到表單域時間為500ms，這比右對齊標簽所用的時間長的多，所以更適合閱讀，用于詳情的陳列。
特點：閱讀效率高，操作效率較低；
右對齊標簽
視覺動線參差不齊，不適合高效閱讀，但適合高效操作，更適合表單填寫。
特點：閱讀效率不高，標簽指向明確，操作效率高
步驟一：根據(jù)業(yè)務已經(jīng)有的字段長度定義4-5種寬度規(guī)范，建議寬度可以是8或者是40的倍數(shù)。
步驟二：根據(jù)你要搭建的表單，選用合適的規(guī)范，長度與輸入預期成正比。有人會說排出來的表單左邊沒對齊，右邊也沒對齊，其實這就是B端產(chǎn)品特征那就是是好用大于好看，就要給用戶一種心智那就是給你的這個長度那就是要輸入一個這么長的內(nèi)容。
避免“正確的廢話”：給不到用戶任何的幫助還增加了用戶的閱讀成本。
按鈕常見位置：一般出現(xiàn)在頁面頂部、跟隨表單里的內(nèi)容、表單內(nèi)容底部、頁面底部。
按鈕閱讀順序：按鈕出現(xiàn)頁面右上角或右下角時，閱讀順序是從右往左，這符合pc端操作習慣以及人閱讀習慣。按鈕跟隨表單內(nèi)容或在表單內(nèi)容底部時，閱讀順序為從左往右，這符合人的填寫順序從上往下，從左往右。
底部按鈕右對齊：一般用在彈框，因為彈框頁面比較小，右對齊比較符合操作習慣。
底部按鈕居中：一般用在頁面中，因為右下角操作距離會有點遠，所以表單用頁面承載的話按鈕建議居中。
表單中字體全部統(tǒng)一采用14px。表單上下間距一般有三種，1.內(nèi)容與內(nèi)容間距為24px。2.內(nèi)容與說明文案間距為4px。3.內(nèi)容與子內(nèi)容間距以及及子內(nèi)容之間的間距為8px。
表單交互方式有四種。1.原位編輯；2.氣泡卡片；3.彈窗/抽屜；4.頁面跳轉。
原位編輯
編輯內(nèi)容即為展示內(nèi)容，容量低于5個時使用。
氣泡卡片
設置項與看板內(nèi)容緊密相關時使用氣泡卡片，建議設置項低于5個。
彈窗/抽屜
設置項與看板內(nèi)容可以有關聯(lián)也不可以沒有，大于三個以上的錄入項使用。
如果錄入項較多，用彈框承載出現(xiàn)翻頁的情況下可考慮使用抽屜。
頁面跳轉
如果容量超出了彈框/抽屜的承載量并且錄入項與看板沒有那么強的關聯(lián)性可采用頁面跳轉的方式。
頁面布局方式有四種。1.分組；2.錨點定位；3.標簽頁；4.分步驟
5.1.1標題分組
設置項超過7個；彼此間的關聯(lián)性較弱且可以分類去歸納
5.1.2卡片分組
有多個設置項，多個分類；彼此之間的關聯(lián)性更弱，分類明確
有多個分類的情況可通過錨點定位迅速找到相關信息
彼此之間沒有特定的相關性，可以獨立設置。每個設置包含了多個錄入項且使用了標題分組。
小結
當錄入項少于7個時使用基礎布局；當錄入項在7-15個時可采用標題分組，卡片分組、錨點定位布局；當錄入項大于15個時需采用標簽頁布局。
利用步驟條將大型，復雜任務拆解為多個部分，并按照相關性分組。
建議3種分組依據(jù)
1.采用必填項劃分，把必填的選項分在一起；2.采用相關性劃分；3.以操作成本劃分。把好填的簡單的表單放在前面，復雜的放在后面。
提升表單易用性方式有5種。1.信息降噪；2.清晰易讀；3.高效智能；4.防錯糾錯；5.所見即所得
場景一：當表單中大多數(shù)都是必填只有極少數(shù)非必填時
場景二：表單項非必填項比較多，可將低頻的非必填項收起
場景一：盡量采用單列布局，視覺動線流暢，不容易遺漏信息；按enter鍵換行。
場景二：如果出于業(yè)務方需要，必須在橫向添加內(nèi)容，那最好有一定的分組依據(jù)。但這樣就不應該出現(xiàn)豎向分組，以免遺漏信息。
6.3.1根據(jù)上下文信息可以自動獲取的，無需用戶再次填寫。
例如根據(jù)手機號帶出用戶姓名；根據(jù)地址帶出郵政編碼；根據(jù)身份信息帶出生日。
6.3.2提供合適的“默認項”。
例如根據(jù)行業(yè)現(xiàn)狀提供常規(guī)的比例分配；根據(jù)定位把地區(qū)做默認的填充。
6.3.3提供搜索、聯(lián)想，自動顯示匹配的信息
用戶在進行輸入等操作時可以提供智能輔助，例如表單填寫時對需要錄入信息的區(qū)域提供輔助提示，通過自動補全或聯(lián)想詞來幫助用戶快速錄入信息，在保持用戶的操作自由度的情況下提效。
6.3.4 OCR識別文件內(nèi)容
對于一些標準證件信息的錄入，可以通過OCR識別文件內(nèi)容。當用戶上傳圖片后，運用圖像識別技術提取關鍵信息并自動填入結果。
6.4.1對于長數(shù)字，四位一空格，用來分段
例如輸入銀行卡號；充值場景下輸入手機號等
6.4.2為用戶封閉不正確道路
將超出時間選擇范圍的日期置灰。電話號、身份證錄入時只允許輸入數(shù)字同時設置字數(shù)上限。
6.4.3告訴用戶哪里錯了，而非簡單粗暴的錯誤提示
表單頁對填寫的物料內(nèi)容進行映射，展示真實效果預覽，降低用戶心理的不確定性。適合對移動端、小程序、H5頁面的設置。
體驗衡量指標有4種。1.任務完成率；2.任務完成時長；3.必填項目數(shù)；4.易用度評分
7.1任務完成率
7.2任務完成時長
7.3必填項目數(shù)
結合業(yè)務場景給出最適合的必填項設定，提高用戶填寫效率。
7.4易用度評分（用戶完成某項任務的難易程度）
易用度可通過調(diào)研問卷和評分量表獲取。
作者：鯤sky 來源：站酷網(wǎng)
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
設計做到極致注重的就是對于細節(jié)的把控力，大廠的設計師之所以比較優(yōu)秀，就是他們具備很好的細節(jié)把控力。想要提高產(chǎn)品設計的能力，發(fā)現(xiàn)設計細節(jié)和思考設計深入的能力至關重要。
最近在體驗產(chǎn)品的時候，發(fā)現(xiàn)了一些設計細節(jié)做得比較好的優(yōu)秀案例，分享給大家學習一下。
分享目錄
一、Banner 輪播轉場的品牌化
二、情感化的彈窗設計
三、最小化顯示提高空間利用率
四、動態(tài)化的設置引導
五、沉浸式的活動氛圍設計
六、人性化的提示設置
七、動態(tài)感知的溫度設計
八、無處不在的廣告位開發(fā)
九、主題化的圖標設計
十、新穎的卡片式設計
一、Banner 輪播轉場的品牌化
立足于品牌做設計，才能強化自身產(chǎn)品的差異化。如何在更多設計場景中融入品牌基因，是設計師需要深入思考的關鍵。
最近在使用騰訊視頻 APP 時，發(fā)現(xiàn)首頁 Banner 圖在輪播的轉場過程中，以品牌 LOGO 造型作為轉場過度。一個小小的細節(jié)強化了用戶對于品牌的記憶度，也體現(xiàn)出專屬的設計差異。
二、情感化的彈窗設計
通過彈窗設計可以提高用戶操作效率，也是傳播信息（活動/廣告）最直觀的形式。但是體驗多了用戶便會開始排斥，提高彈窗的情感化設計變得尤為重要，降低用戶的排斥感才能提高彈窗的作用。
很多娛樂影視等 APP 都會有“青少年模式”彈窗提示，抖音將彈窗視覺表達融入了精美的國風插畫。也通過針對性的內(nèi)容作為設置的引導，提高了用戶對“青少年模式”的深入理解，增強了體驗的積極性。
插畫的形式在彈窗設計中表現(xiàn)比較突出，比如嘀嗒出行 APP 將“推送通知”的彈窗設計運用插畫增強情感化表達。相較于生硬的表達方式用戶更能接受，通過營銷的文案引導用戶授權，提高了產(chǎn)品的感官體驗。
三、最小化顯示提高空間利用率
對于工具型產(chǎn)品不同用戶的操作焦點不同，更多定制化的體驗才能提高用戶的操作效率。
釘釘 APP 在協(xié)作欄目中，默認展示的各類工具可以進行收起，實現(xiàn)最小化顯示。用戶可以根據(jù)使用習慣和操作方式選擇收起/展開，提高了當前空間的利用率，自定義的功能設計可以提高用戶的操作體驗。
四、動態(tài)化的設置引導
為了提高用戶隱私權益，手機系統(tǒng)針對產(chǎn)品調(diào)用權限進行了阻力設計，需要用戶的授權操作。提高用戶的各類功能授權就需要設計師探索，降低用戶的排斥感和提高授權的利好政策才能獲得授權。
抖音在引導用戶開啟通知權限的設計中，采用了動態(tài)畫面的表達來強調(diào)開啟通知的利好政策，以此來攻破用戶的心理防備。相較于生硬的彈窗提示，動態(tài)的表達和引導性的文案更能拉近與用戶的距離感。
五、沉浸式的活動氛圍設計
沉浸式的體驗可以帶給用戶更好的場景感，提高用戶的參與度。在活動的設計中，不斷向游戲化和沉浸式方向加強體驗，提高活動的趣味性和強化用戶參與的積極性。
騰訊視頻在情人節(jié)的互動活動設計中，就將搶紅包的活動融入到當前的界面中，紅包雨鋪滿整個屏幕，以趣味性的形式滿足用戶心理。不隔斷與界面之間的聯(lián)系，降低活動對用戶的干擾，進而提高活動氛圍感和參與度。
六、人性化的提示設置
短視頻近些年改變了大家的生活方式和娛樂形式，也有用戶容易過度依賴進而影響休息質量。
抖音作為短視頻領域的頭部產(chǎn)品之一，在增強用戶體驗的同時也要起到良性的引導作用。當用戶刷短視頻一定時間后會彈窗提示休息，而提示時間用戶可以根據(jù)自己的實際情況進行設置，靈活的設置可以讓用戶合理分配時間。健康使用的引導可以讓用戶感受到產(chǎn)品的溫度，提高用戶體驗的認可度。
七、動態(tài)感知的溫度設計
天氣預報是用戶關注度較高的信息，對于溫度的感知可以讓我們出行更容易把控。在產(chǎn)品中顯示天氣情況也是一種情感化的升級，可以帶給用戶更有溫度的體驗。
利用餓了么 APP 點餐之后，首頁會顯示配送情況和當前的天氣溫度，背景以動態(tài)的天氣畫面增強視覺感知。也希望用戶可以根據(jù)天氣情況對外賣員多一份理解，加強人與人之間的寬容心，帶給用戶更強的情感化體驗。
最近在使用愛奇藝 APP 時，發(fā)現(xiàn)左上角的品牌位置也結合了天氣情況，結合頂部視覺區(qū)域的流體漸變，新增的天氣預報和品牌 LOGO 完美的通過動效過度。整個設計表達流暢自然，感官體驗也是非常值得學習的。
八、無處不在的廣告位開發(fā)
廣告是眾多產(chǎn)品實現(xiàn)流量變現(xiàn)的方式之一，廣告位的開發(fā)也是見縫插針，如何在僅有的空間增加更多廣告位，產(chǎn)品設計師也在不斷探索。
最近在使用騰訊視頻 APP 時，進入到個人中心時會默認有個下拉廣告。這個見縫插針的廣告位新增，對于設計師來說讓我感受到了廣告的無處不在，不過對于用戶來說是否會心生排斥感得通過數(shù)據(jù)去驗證。但是作為產(chǎn)品設計師這也是一個啟發(fā)，將有限的空間進行深度開發(fā)，還不會影響已有的結構布局，這也是一個啟發(fā)性的案例。
九、主題化的圖標設計
圖標是產(chǎn)品中不可或缺的存在，圖標設計的研究也是設計師需要重點對待的技能范圍。精美的圖標不僅可以提高產(chǎn)品的感官體驗，也能吸引用戶的關注度，進而提高業(yè)務模塊的點擊欲。
最近在使用順豐速運小程序時，寄快遞欄目的各業(yè)務入口圖標設計非常引人注目，結合主題化的圖標設計突出了活動傳播力度。對于工具型產(chǎn)品而言，強化氛圍感可以打破用戶原有的認知，不僅可以突出活動主題，也能強化用戶對產(chǎn)品的視覺感知。
十、新穎的卡片式設計
卡片式設計已經(jīng)流行好幾年了，目前依然是非常普及的 UI 設計趨勢之一。如何進一步強化卡片式設計的創(chuàng)新度，我們需要不斷的嘗試和總結。
嘩哩嘩哩 APP 的創(chuàng)作中心設計也許是一個不錯的啟發(fā)，卡片內(nèi)部右上角的視覺強化使得原本普通的表達變得更有視覺感。突出的設計也成功的吸引了 UP 主的注意力，強化了該入口的點擊欲。這樣的設計表達在保留卡片式設計的基礎上，也是一種新穎的視覺表現(xiàn)，可以作為突出業(yè)務入口的表現(xiàn)方式進行探索。
作者：黑馬青年 來源：站酷網(wǎng)
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
藍藍設計的小編 http://m.yvirxh.cn