Hi，我是彩云。設計趨勢年年在變，設計技能也在不斷更新，但回到本源，底層的理論知識是不會變的。我自己幾乎每年還會翻看一些講設計基礎的書，比如《寫給大家看的設計書》之類的，會發現這些原理每次看都會有新的收獲。隨著工作年數增加，對底層知識的價值認識也越來越深刻，不知道你會不會有這種感覺？
在Medium上看到一位工作超過17年的國外設計leader寫的一篇關于設計原理的文章，講設計如何變得有效？總結得很好。
當沒有認知緊張時，用戶心流才會發生。當一個設計有效時，你才能體驗到認知上的輕松。如果沒有，你的“心流狀態”就會中斷(稍后會詳細討論)，讓我們陷入認知緊張，于是“設計失敗了”。
當基本設計原則被忽略時，這種情況很容易發生，導致設計無法“整合”。這些基本原則包括：平衡性、一致性和視覺層次、負空間、接近性、對比、統一、一致性、配色方案和排版層次等方面。（彩云注：很多人看到這些以為自己都懂，但實際設計時犯錯最多的也是這些問題）
從神經科學的角度來說，當一個設計起作用時，我們會“感受到它”。其影響立竿見影。它發生在潛意識里，在一瞬間完成，是人的本能反應。我們不需要把它放在顯微鏡下分析它。
優秀設計以簡潔和優雅而引人注目。喬納森·伊夫(Jonathan Ive)和迪特爾·拉姆斯(Dieter Rams)都可以算作這種設計思想的擁躉。
人們常說，優秀設計背后的工藝是無形的。然而，這不是隨機發生的。不管人們是否注意到，設計的背后是遵循著大量而嚴格的原理去執行的。偉大的設計師不會在畫板上隨意地將各種元素組合在一起，這是有方法的。
為什么有些設計具有美的感受，而有些卻沒有
相反地，當一項設計被認為“有些地方不對勁”時，人們就會下意識地覺得這個設計是有問題的。這樣的結果會給品牌或產品帶來不好的影響。當一個高端或奢侈品品牌受到高度關注時，這種影響尤其有害。這就是為什么你永遠不會遇到設計不完美的香奈兒(Chanel)商店的原因。
“你對一件事的第一印象會建立起你隨后的觀念，如果一家公司在你看來不專業，你可能會認為他們做的其他事情都不專業?！狣aniel Kahneman，普林斯頓大學心理學教授。
這不是一個精心制作的設計，會導致認知緊張。你會在這個網站上預訂你的行程嗎?
我們都同意上面是糟糕的設計，就像建在沙子上的房子，一個忽視基本設計原則的設計將會崩潰。潛意識里，它會立即被認為是破碎的，無論是視覺上、精神上和情感上。
人類的大腦是懶惰的、有偏見的，喜歡走捷徑。Daniel Kahneman稱之為“低維思維”。當人們看到某種設計時，它的“美學完整性”、視覺感知和神經科學之間存在著相互關聯。
當一個設計是合理的，換句話說，它是令人愉快的、有效的，我們會迅速、直觀的判斷它是合理的。我們的心率降低，多巴胺水平增加，會有一種幸福和平靜的感覺。這就像我們聽到舒緩的音樂，會沉浸在一種每時每刻的“心流狀態” 中?！霸谶@種狀態下，人們會專注于一項活動，其他一切似乎都不重要”——來自于一個心理學概念，由 Mihaly Csikszentmihalyi在他的暢銷書《心流:最佳體驗的心理學》中寫道。
你更愿意住進哪個房間？
蘋果的人機界面指南（Apple’s Human Interface Guidelines）幾十年來一直在談論“美學完整性”。它也可以被稱為“設計完整性”或“審美凝聚力”。
蘋果對美學完整性的定義是“當一個設計的外觀和行為與其功能完美匹配時”（彩云注：我的理解就是所見即所得，符合用戶的心理預期）。換句話說，設計的構成是產品的一個組成部分。我們將研究決定設計組合成敗的設計原則——更多的是關于 UI，而不是關于 UX。
美學完整性不僅僅是關于設計有多好看。它指的是具有明顯連貫性的設計：有效的結構和布局，是什么讓它產生效果。換句話說，它的元素在視覺層次、對齊、間距、平衡、對稱、重復、比例、強調、接近、對比、統一、一致性、配色、排版、負空間等方面都有出色的運用，這里僅舉幾個例子。
這與“黃金比例”無關，黃金分割不能解決問題。斐波那契數列螺旋沒那么玄乎，給設計師帶不來驚人的設計。
設計師們在安吉麗娜·朱莉或蒙娜麗莎的臉上畫出金色螺旋形時驚呼道：”果然是”黃金比例“（彩云注：但事實上有點故弄玄虛了）。當然，自然界中確實有神圣幾何學(黃金比例，又稱斐波那契螺旋，是基于此)，但依賴“黃金螺旋”作為設計原則是一種謬論，它已被多次暴露在其赤裸裸的荒謬中。
這是我的洗衣機，上面疊加了斐波那契螺旋。
“審美的完整性”不是沒道理的。這個概念是基于基本的設計原則，是有成就的設計師實踐他們的藝術作品的經驗總結。
讓我們來看看一些設計原則，以及它們為什么會使得你的設計更能更加有效。通常情況下，真正優秀的設計會結合這些設計原則。
我們將探討以下這些最底層的設計原理：
視覺感知的基本規則對任何視覺設計都是至關重要的，因為它們指導著如何盡可能快地傳達信息。視覺層次是設計中信息的結構和優先級。它決定了人們接受和處理信息的順序，因為它以一種視覺方式引導他們。
視覺層次感重在打造視覺優先級。通過巧妙地使用顏色、形狀、大小、間距、比例和方向，創造性地使用決定層次的視覺元素來傳達構圖的意義、概念和情緒。
核心關注點是什么，你希望用戶首先注意到或開始閱讀的設計中最重要的元素是什么？我們想讓它成為焦點，然后其他部分的設計從這里展開。
一個具有良好視覺層次的網站會引導用戶關注重要的部分
視覺層次對于每一種視覺設計都是至關重要的，無論是需要引導訪客眼球的首頁還是移動端UI的導航入口。用戶對每個元素的理解取決于組合中的其他元素及其上下文。
建立視覺層次的一些技術是:位置、大小和比例、顏色和對比、間距和親密性、負空間、紋理、引導線和高度。在一個元素周圍使用豐富的負空間可以使它看起來更有意義。使用引導線可以創造移動，就像一個人的眼睛在設計上移動一樣。排版的層次結構也扮演著重要的角色，通過不同的大小和權重，我們可以讓更重要的文本元素脫穎而出并建立秩序。
加分技巧
沒有視覺層次的網站沒有明顯的興趣點。
設計中的對齊和間距通過空間上的連接傳達出一種秩序和組織感，這兩個原則都在設計背后發揮重要價值。設計師早期學到的基本知識之一是在網格上編排設計，然后對齊和分隔這些元素。
左對齊、居中對齊、右對齊都沒錯，但你必須對齊，否則當元素沒有對齊時，設計就會給人崩潰的感覺。它給人一種不安的感覺。
沒對齊的話，眼睛看著很難受
網格有很多不同的類型:列網格、基線網格、模塊網格、層次網格、像素網格等。不同設計使用不同網格，但最基本的是設計元素的對齊和間距。（彩云注：關于網格方面的知識，彩云以前也寫過不少，感興趣的也可以在公眾號的歷史發文中翻翻看）比如：
(Illustration courtesy UX Engineer)
網格可以被打破。一個死板的構圖可能會在視覺上無趣，除非一個元素從網格中脫穎而出。錯位或“打破網格”是賦予元素更多視覺權重的一個機會。當在設計中設置視覺層次結構時，它可以用來強調某些東西。
有時打破網格可以創造強調和移動
設計上有兩種平衡:對稱和不對稱。所有的構成元素：排版、顏色、圖像、形狀、圖案、留白等，都具有一定的視覺重量。有些元素很重，很吸引眼球，而有些元素很輕，感覺不那么重要。
這些元素的放置方式能夠在對稱設計中創造出一種平等的順序感，或者一種稍微偏離平衡能夠創造出一種不對稱的設計。無論對稱還是不對稱，我們的大腦都被某種平衡感所吸引，因為它創造了和諧、秩序和美學上令人愉悅的結果。
多重原則:平衡、對齊和對稱在網站上發揮作用
“對比”指的是使設計中不同的元素更容易區別開。強烈的對比可以在設計中強調一個區域，而微弱的對比可以弱化它，創造一個視覺層次。對比在設計中也扮演著重要的角色。對比不足會使文字特別難以閱讀，尤其是對視力有障礙的人來說。
在左邊的設計中，一些文字和背景之間的對比不夠。
Web內容可訪問性指南 (WCAG)呼吁“文本的視覺呈現應該有至少4.5:1的對比度”，除了大規模文本，它應該有至少3:1的對比度。因此，設計師需要確保內容保持舒適易讀。（彩云注：具體可用性配色工具，彩云之前的文章中有分享過，現在這種可用性顏色已經越來越被重視了，你也要用起來啊）,之前寫的文章，推薦大家可以看看：
《以前我經常為配色發愁，自從知道這3個配色神器后，配色變得容易多了！》
其他UI元素(如各種顯示器和設備上的卡片、按鈕、文字和圖標)之間的適當對比也是必須的。如果UI元素之間沒有明顯的區分度，設計就容易產生混亂。
在格式塔原理中，對稱和秩序的法則也被稱為pr?gnanz，德語單詞“好身材”的意思。這個原理說的是，大腦會以盡可能簡單的方式感知模糊的形狀，這都是為了節省大腦能量。
我們傾向于尋找一切事物的對稱性。幾項研究發現，面部對稱能提高人們對人臉吸引力的評價(盡管完全對稱的臉其實并不一定那么有吸引力)。該理論認為，這種偏好與選擇DNA最好的伴侶的進化優勢。
對稱在自然界中也無處不在?？纯匆恢缓?，一朵花，或者一只海星。
對稱
同樣的原理也適用于數字領域，平衡對稱的設計更令人愉悅。
對稱性在應用中發揮作用。Uber Eats、Booking.com和Behance。
重復是一致性的近親，是優秀可用性的標志。在設計中利用重復是件好事，因為我們的大腦總是在尋找模式、相似性和一致性。為什么?因為重復相同性質的元素需要更少的認知努力。
我們更容易識別重復的模式，而不是每次看到新模式都要重新校準大腦。正如前面提到的，大腦作為一種生存機制是懶惰的，模式識別和認知捷徑意味著有意識地處理視覺信息所需的能量更少。
例如，重復元素的形狀和大小、填充、留白、類型和顏色，也有助于更對稱、更好地平衡，做出美觀的設計。
The Athletic這個軟件就是用重復元素做設計的好例子
奇數法則意思是說，在設計作品中奇數元素比偶數元素更有趣。偶數元素在圖像中產生了對稱，這可能會顯得過于正式和不自然。比如，在一行中排列三個或五個卡片會比2個或4個效果更好，作品會更加讓用戶感到舒服和自然。
Iskos Design 就是用的奇數原則做的網頁設計
三分法構圖（也被稱之為黃金網格規則），在畫面中以水平和豎直方向分成3x3的網格和4個交叉點。這個規則能很好的協助設計師將最重要的元素放在網格的交叉點上，這樣可以很容易的設計出滿意的構圖。
為什么會這樣？因為三分法構圖創造了類似斐波那契數列(黃金比例)那種不對稱的美，產生了更有吸引力的構圖。
你希望用戶關注哪些地方？高級設計師非常擅長引導用戶的視覺焦點，這種引導可以通過可見和不可見的引導線來完成。這些線條在構圖中也可以打造一種動感，也能為畫面增添視覺沖擊力。
達到這種效果通常用特定的形狀和線條，或者是它們的組合形成難以察覺的引導線來實現。利用透視、顏色、對比度和正負空間同樣可以幫助達到這種想要的效果。
從左到右的不易察覺的曲線將用戶的視線引導到頁面文字上
大?。╯cale）是設計中一個元素與另一個元素的相對大小。元素通過大小不同創建視覺層次，其中最大的元素首先會吸引用戶的注意力，因此看起來是最重要的。常規的設計策略就是將最重要的元素做成最大的，然后逐級遞減。
比例(Proportion)不同于大小，類似但有區別。比例原則是指一個整體設計中各部分的尺寸關系。設計中的元素可以有各種大小，但它們之間的大小差異，整體來看就是比例。
熟練地使用大小和比例是實現設計統一的關鍵。當一些元素的大小過大或過小，或者比例失調時，設計組合就會失去統一性。這種錯誤可能發生在排版和其他元素上。例如，標題與子標題和正文相比顯得過大。當設計元素失衡時，設計就會“感覺不平衡”。
大小和比例都沒做好時(左圖)，看起來處理的比較細致了，但依然沒有做到很好，在大小上正文和標題分不清(右圖)
強調原則用于使設計的某些元素突出(使用對比、接近、比例、留白等)或不突出，即弱化強調(例如在頁面底部有一個幾乎看不見的“小字”)。強調是層級之母，因為沒有強調就沒有層級。
與其他一些設計原則一樣，“強調”是用來引導人們關注設計，并強調需要重點關注的第一、第二和第三點。首頁面和電商轉化頁面在99%的情況下都使用這種原則。
使用這個原則，在購物網站上強調了標語和產品，轉化效果非常好
統一是指設計元素如何很好地結合在一起，形成“視覺凝聚力”。它指的是設計中的連貫性，讓人們覺得所有部分都是一起的。每個元素都應該具有清晰的視覺關系，以幫助傳達清晰、簡潔的信息。整體性好的設計比整體性差的設計更有條理，質量也更高。
運用統一的配色，重復、平衡和對稱之類的原則將有助于在設計中形成一種和諧感，也就是一致性。設計中良好的一致性就好比歌曲中一首歌被和諧地唱出來，形成一個完美的整體。
一致的顏色、重復的圖案、平衡和對稱在蒂芙尼的網站上創造了一種統一的感覺。
格式塔的接近原則讓設計師將同類型的相關元素進行分組。把它們分開得更遠，元素就顯得越不相關，它們之間的關系就會減弱。一般來說，人們會認為遠離的元素是不相關的。
不應該讓用戶在設計中分辨哪些元素是相互關聯的，正如美國郵政服務的例子所顯示的那樣，缺乏對鄰近性的關注會導致直接的認知緊張，損害用戶體驗。
接近原則沒做好的案例。由于字段標簽離它們下面的字段更近，人們可能會搞混。
下面是一個鄰近性原則做的好的案例，我們可以看到相關元素是如何通過鄰近性關聯起來的(分組的元素用紫色表示)
一個把接近原則用好的網頁設計案例
一致性原則使數字產品的使用更加可預測，符合用戶的期望。設計中的一致性可以培養熟悉度，它可以提高用戶體驗、可用性和用戶使用效率。另一方面，不一致的設計將產生更多的認知負荷/腦力勞動，并導致困惑和挫折。這就相當于在用戶的路徑上設置障礙。讓用戶的心流嘎然而止!
做好一致性可以增強“審美凝聚力”。“我們都知道，當我們使用應用時，應用的導航位置如果經常變化，或者像“加入購物車”這樣的主按鈕在不同屏幕上從紅色變成綠色，這是多么令人沮喪。
除了視覺一致性和易用性，品牌一致性在產品設計中也發揮著重要作用。如果沒有一致的元素呈現，如排版、配色和圖案，高質量的品牌體驗將無法傳遞。
在用戶體驗方面，一致性意味著在設計中使用相似的UI元素來完成相似的任務，即在整個產品中擁有相似的功能和行為。因為可用性是一種評估用戶界面易用性的質量屬性，所以一致性對用戶體驗的可用性有很大的貢獻。
一致性是通過使用相同的配色、排版、間距、模式和交互來實現的。
色彩心理學也不容忽視。色彩承載著意義和情感，可以向人的潛意識傳遞信息。在品牌方面，人們對顏色做了大量的心理學研究，因為在人們與品牌進行任何互動之前，顏色會讓他們產生一種本能的反應。例如，藍色通常被認為是可靠的、安全的和平靜的，想想銀行；而紅色是刺激的，被認為是增加人們的心率，想想飲料包裝。
一個極簡主義的暗色主題設計傳達了一個特定的品牌氣質，并使用了少量的顏色。
排版在設計中扮演著非常重要的角色，它的重要性再怎么強調都不為過。在構圖中，字體樣式對人們感知設計的影響比任何其他元素都大，可能除了顏色。
因為我們的大腦以閃電般的速度運轉，一個字體會對一個設計產生影響，以至于它可能在不到一眨眼的時間內改變用戶的印象。與顏色一樣，字體甚至會影響我們的情緒，資深設計師可以通過字體傳達情緒和風格。通過選擇合適的字體，我們可以傳達出穩定、優雅、舒適、可靠、有力等信息。
排版層次結構可以快速建立視覺層次結構，并且通常在其中扮演重要角色。因此，在設計中經常使用不同的字體和字體大小來表示層次結構，例如標題、副標題、正文和引用。
“除了確保文本清晰易讀，排版可以幫助你理清信息層次，傳達重要內容，并表達你的品牌。” ——蘋果的人機界面指南
蘭博基尼的網站巧妙地使用了排版風格和比例來賦予其設計力量
Claude Debussy 曾說過，“音樂是音符之間的空間“。同樣的觀點也適用于設計，元素之間的負空間給予設計強調、平衡和統一。
元素周圍適當的負空間將焦點集中在元素本身。它強調了內容，并提供了必要的喘息空間，以確保布局不顯得雜亂。沒有了呼吸空間，人腦就不太可能掃描興趣點，更容易感到困惑。
蘋果官網提供了一個利用負空間創造強烈焦點的杰出例子。
人們已經開始期待所有平臺和設備上的優化、無阻礙的用戶體驗。理解設計原則及其交互方式對所有設計師來說都是至關重要的。使用專業技能設計它們是創造具有視覺吸引力的功能性設計的關鍵。我們不要忘記，美學的完整性會嚴重影響用戶體驗。
基于原則的設計是設計師在感覺有點迷失或用盡創意時可以依賴的黃金標準方法。在沒有理解和實現設計原則的情況下，也可能實現可接受的設計。然而，這可能需要大量的嘗試和錯誤才能創造出看起來不錯的內容，并創造出最佳的用戶體驗。
產品的美學質量與它的實用性密不可分，因為我們每天使用的產品影響著我們和我們的幸福?！钡挥芯闹谱鞯奈锲凡艜利?。— Dieter Rams(迪特爾·拉姆斯)
當我們不關注由設計原則驅動的設計質量時，我們可能會忽視品牌質量及其所代表的一切。當某些東西設計不好時，品牌就會受到傷害，產品也會受到影響。這就是為什么偉大的設計師在他們的工作中極其嚴謹， 他們知道“你永遠不會有第二次機會給人留下良好的第一印象?！?/strong>
設計的細節成就了設計本身。—— 查爾斯 伊姆斯（Charles Eames）
作者：彩云Sky 來源：站酷網
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
卡片是一個UI組件，包含了某一個內容的信息和操作。卡片可以包含各種元素，但它們都應該屬于同一個主題。
這樣做的目的是為了避免冗長的文字，并呈現更多的內容。即使從設計的角度來看，用戶可能不熟悉卡片的概念，但他們馬上就知道如何使用它們，因為它們與實體卡片是一樣的。（彩云注：這個就是用戶心理學中隱喻的運用）
卡片之所以流行，是因為它們能更好的把控內容。卡片是模塊化的，所以不同的內容可以堆疊在一起，而不需要注意它們的差異。
卡片通過強制內容適應卡片邊界和卡片布局上的限制來聚焦內容。設計師喜歡通過卡片混排大量內容，而無需擔心設計會變得雜亂無章。
卡片可以將內容分解成易于理解的小塊，以便用戶與之互動。通過給內容一個容器，卡片向用戶表明內容是真實和感性的。
卡片 UI 設計流行的原因還有很多：
直觀：卡片在界面中看起來與現實世界中的卡片相同，它們對用戶來說似乎很常見。在卡片成為移動和網絡應用中的流行元素之前，它們在現實生活中無處不在：名片、棒球卡、便簽。卡片代表了一種有益的視覺類比，它允許我們的大腦直觀地將卡片與其所代表的內容聯系起來，就像在現實生活中一樣。
易于閱讀：卡片不占用太多空間，并敦促設計師優先考慮其內容。不同的是，每張卡片都變成了易于閱讀的內容?？ㄆ層脩舾菀渍业剿麄兏信d趣的內容。
有吸引力且對用戶更友好：基于卡片的設計通常非常依賴視覺效果（尤其是圖片）；就信息架構而言，視覺層次會更加清晰。使用圖片有助于使基于卡片的設計比不在卡片中排列的相同內容對用戶更具吸引力。
有利于響應式設計：卡片是矩形的，可以平滑地調整大小，以適應不同屏幕的水平和垂直正面，這意味著用戶可以在所有設備上獲得統一的體驗。
便于分享：卡片可以鼓勵用戶在社交媒體上分享內容，因為它允許用戶只分享特定的內容，而不是整個頁面。
什么時候應用卡片設計？
這通常是當你有:
基于搜索的界面: 卡片能通過模塊的內容快速顯示合適的內容，這使得用戶可以深入了解自己的興趣。基于卡片的設計是一種非常適合呈現這類內容的方式。
信息瀏覽：當用戶瀏覽信息時，卡片的兼容性更好。
任務管理：當可以將流程中的單個任務作為卡片進行說明時， 可以輕松組織卡片以獲取任務列表。任務管理應用在使用卡片式界面為用戶創建儀表板方面做得很好，其中每張卡片代表一個單獨的任務。
類似項目：卡片最適合于異構項目的集合（當并非所有內容都是相同的基本類型時）。
可視化分析: 儀表板通常在同一頁上同時顯示各種內容樣本。在這種情況下，卡片類比可以幫助在不同物品之間創造出更明顯的差異，其中每張卡片可以適應不同的角色。
卡片的布局可以不同，以支持它們包含的內容類別。下面的組件通?？梢栽诙喾N卡片樣式中找到。
(1)富媒體: 卡片可以包含縮略圖，以顯示圖片，插圖，頭像，Logo，圖標或圖形。
(2) 標題: 標題文本可以包含相冊或文章的名稱或標題。
(3) 描述: 支持文本，如文章摘要或簡短的描述。
(4) 行動按鈕: 卡片可以包含用于操作的按鈕。
(5) 副標題: 副標題文本可以包含詳細介紹，如文章的署名或標記的位置。
(6) 圖標: 卡片可以包含操作圖標。
有一些小的技巧可以快速提高卡片設計細節。
1. 使用相關主題的圖片
圖片是卡片設計的主角，你需要一個高級的圖片來吸引用戶對每張卡片的注意。不僅是圖像，卡片還可以包含插圖、帶有淺色背景框的圖標或任何其他類型的富媒體，但需要與內容主題相關。
2. 增加視覺層次
卡片內的層次結構有助于引導用戶對重要信息的閱讀。將主要內容放在卡片的頂部，并使用排版來強化主要內容。使用空白和對比來分隔需要更多視覺分隔的內容區域。（彩云注：視覺層級對于信息表達至關重要?。?nbsp;
3. 限制內容長度
一張卡片應該只包含重要的信息，并提出一個相關的觀點，以獲取額外的細節，而不是完整的細節本身。當我們試圖在一張卡片中放入太多內容時，卡片可能會變得很冗長，并失去與卡片類比的實際聯系，因為它不再像一張卡片了。
4. 避免嵌入鏈接
不要包含內聯鏈接，卡片應該自己鏈接。嵌入文字鏈接會讓用戶誤操作。
5. 區分操作主次
包含不同操作的卡片應該在視覺上形成對比。在下面的例子中，我通過使用一種較輕的色調而不是主要的按鈕風格來降低后續操作的視覺強度。
6. 去掉分割線
對于新手設計師來說，用分割線來區分內容是一種常見的方式，以此定義不同的組。這些邊框會造成不必要的視覺干擾，從而影響內容。
APP中的卡片并不是純粹的擬物概念，但通常情況下，使用一致的類比和物理原理能幫助用戶理解界面并分析內容中的視覺層次。在卡片的情況下，你可以做幾件事:
1. 使用圓角
在形態上與真實世界的卡片進行視覺對比。圓角更有效，因為它們讓我們的眼睛容易跟隨視覺動線，“因為它更適合頭部和眼睛的自然運動”。
2. 增加一個輕微的外邊框或者投影
增加一條淡淡的描邊框或者增加一個淡淡的投影都是很好的做法。陰影在界面中創造了一個層次，這有助于我們區分UI元素。
然而，在設計中添加陰影并不像聽起來那么簡單。有時候設計師會過分強化投影效果，讓原本看起來不錯的設計看起來很廉價。避免使用純黑色的陰影。
3.注意字體和留白
重要的是要讓每一張卡片都能被人看到、閱讀和理解。在每個塊周圍添加大量的空白，讓用戶有時間處理并進行視覺重置，有精力看完一張卡再到下一張。
選擇簡單和基本的字體，因為基本的排版最大限度地提高了可讀性，并有助于瀏覽。
讓我們看看一些真實項目中的卡片設計案例：
信息流中的卡片設計
保持信息流卡片簡單是很重要的。它們應該有一個一致的、重復的結構，但是使用不同的圖片和字體大小來代表卡片中最重要的和最不重要的元素，以使讀卡片的人更容易理解它們。
由Diseno Constructivo和Webpixels設計
他們突出特色圖片和標題作為最突出的元素，這能幫助用戶決定文章或發布的內容是否適合他們。
電商卡片設計
產品卡片是一個很重要的東西，它可以幫助你將訪問者轉化為客戶。一張優秀的產品卡片應該能夠吸引人們的注意，激發人們獲得產品的欲望，激勵人們購買，并在搜索結果中得到高效推廣。
由Webpixels設計
產品的名稱應該放在最顯眼的地方，這樣參觀者就會立刻明白他來對地方了。一個好的配圖能告訴顧客勝過千言萬語，所以你需要一個高質量的產品配圖來設計完美的產品卡片。
如果產品有特價，不僅要在價格欄中注明促銷價格，還要注明常規價格，以及客戶可以節省多少錢。
個人中心卡片設計
簡介卡已經成為一個應用或網站中的功能模板。隨著個人品牌變得比以往任何時候都重要，卡片設計在這里也能發揮重要作用。
由Neelesh Chaudhary設計
就像每一張卡片一樣，配置文件卡片也是一個UI組件，它包含了對它所代表的內容至關重要的信息。為了達到你的目標，你要向其他人推銷你自己。
確保只包括必要的信息(例如，照片，名字，職業)，讓你的“關于”頁面有剩余的細節來完善你的個人資料。
儀表盤卡片設計
儀表板的設計可以有很大的不同。但是所有的儀表盤都是用卡片做的。根據儀表板的類型，每張卡片可能包括概要信息、通知、快速鏈接或導航設計元素、關鍵數據、圖表和數據表。確保你為每個元素使用了正確類型的卡片。
由Simmmple設計
儀表盤卡設計允許用戶決定他們想要關注哪些數據。易于理解的UI，允許用戶精確地控制哪些數據需要在儀表板的前端做好。
只包括最相關的信息，為用戶使用方便。當你的數據集在一起看更容易理解時，找到在一張卡片上顯示它們的方法。但是要小心，不要讓用戶感到困惑。
日常計劃卡片設計
看板任務卡似乎是一件非常簡單的事情——拿一張便簽，寫下你需要做什么，然后把它貼在墻上。這些卡片必須包含需要行動的單位數量。它們還可能包含各種各樣的其他信息，清楚地傳達了必須做什么。
由Neelesh Chaudhary設計
卡片上包含的信息包括任務的名稱和重要的細節，如任務的類型和誰擁有它?？窗蹇ǚ旁跔顟B類別下。最基本的狀態類別是“計劃要做”、“正在進行中”和“完成”，但是狀態可能因項目而異。
卡片結構最適用于添加或刪除任務這樣的小改變，而不是改變像你的總體目標這樣的大想法。
有幾種方法可以使卡片設計更加有效。通過最初定義和觀察卡片，我們可以更好地了解跨行業的這種設計模式。這也讓我們能夠推測用戶希望在這些卡片上采取什么行動?？ㄆ谔峁┰S多不同種類內容摘要的環境中尤其有效，而不是簡單地作為內容列表的現代替代品。
演出項目可分為【有座項目】和【無座項目】兩種類型，有座項目又可分為【選座售賣項目】和【非選座售賣項目】。
大部分話劇、音樂劇、舞蹈芭蕾項目都是選座售賣項目?？蛻魜淼截堁劭蛻舳酥羞x擇想看的項目，選定座位并下單，最后檢票入場觀演，完成閉環。其中選座體驗是客戶轉化重要的一環，影響客戶決策。
為了提升用戶體驗，提升數據轉化，我們對貓眼目前選座體驗進行走查，探討問題原因，找到產品痛點和機會點，為產品優化做準備。
貓眼客戶端選座體驗問題：
1.自營項目無法直接選座，無論場館大小必須先選擇區域再選擇座位
如下圖，無法選擇圖中的座位，點擊座位跳轉到對應區域的座位圖，需要再次點擊選擇。
2.無法根據場館座位分布全局選座
如下圖，選擇A區后僅能查看到A區座位，無法看到其他區域座位和舞臺。
3.場館分區圖風格樣式不統一
如下圖，繪制精細程度不一，風格樣式不一。
這些問題產生的原因：
問題1：產品結構規劃上將場館分為區域和座位兩個層級，未根據場館規模分級別展示，例如大型場館先選區域再選擇座位，小型場館直接選擇座位。
問題2：B端后臺性能問題阻礙了客戶端全局查看選座。
問題3：區域圖依靠B端后臺上傳，沒有統一的繪制標準約束，故客戶端的樣式不統一。
通過以上原因可以看出客戶端選座體驗很大程度上取決于B端后臺的配置，所以要從B端配置入手，從根源上解決體驗問題。
本次研究目的
研究對象
我們通過產品研究和用戶訪談形式，結合業務需求，對產品功能進行審視走查，希望能挖掘出產品痛點和機會點。
B端場館圖繪制及座位配置的主要用戶是運維人員，所以我們對運維人員進行了深度訪談，主要目的：
1.了解用戶使用貓眼B端的操作行為和痛點；
2.觀察用戶使用相似產品【城市售票網B端系統】的行為和痛點。
演出項目座位配置業務流程
商務與場館洽談好合作后，會提交添加/修改場館座位模板的郵件給到運維人員，由運維人員在B端后臺中進行創建和修改。商務可在B端后臺創建項目關聯到對應場館配置票價等。
在這條業務流程中，涉及到B端選座配置的部分：
1.創建/維護場館分區模板；
2.創建有座項目、關聯對應場館、配置票價、配置預留。
一、創建/維護場館分區模板
創建場館分區模板主要分為兩個步驟：
創建場館分區：包含兩個主要頁面和一個彈窗，承載創建分區圖和設置分區信息功能。創建分區支持上傳底圖、SVG圖，編輯器繪制。
創建分區座位：包含一個主要彈窗，承載畫座位、座位編號、移動座位、統計座位等功能。
1. 創建分區體驗痛點
1.1 使用SVG編輯器繪制場館分區圖操作不便
嵌入式畫圖工具僅能繪制較為簡單的圖形，門檻高且繪制成果不理想，對于復雜場館無法滿足繪制需求，無法與演出業務很好的結合。
1.2 運維使用第三方工具，繪制風格差異大
由于畫圖工具繪制不理想，運維人員自學AI、Coreldraw等繪制后上傳到后臺系統。人和工具的不同導致座位圖風格差異較大。
1.3 項目變動維護不便
項目調整需通過第三方繪制工具修改或重新繪制導出后上傳到后臺，修改流程長且重復操作過多。
2. 創建座位體驗痛點
2.1 畫座方式不支持繪制傾斜、曲度、錯位的座位
固定的座位方格坐標對坐標，自由度差，無法自定義座位角度和排布形式。無法精準還原場館座位分布。
2.2 不支持自定義舞臺方向和位置
舞臺位置方向固定，無法滿足多個舞臺、座位包圍舞臺配置。
2.3 繪制座位交互操作單一
僅支持鼠標在方格內拖動繪制，效率低，增刪改操作麻煩。
2.4 交互流程不通順
編號、移動等功能先切換功能再選擇座位的順序不符合用戶行為，符合用戶操作的順序是先選擇座位再點擊對應操作配置。
座位編號、移動、統計功能不適合tab形式，交互組件使用不當。
2.5 交互界面表達有誤
座位編號分為排編號和列編號兩種方式，選擇一種并填寫配置參數。系統界面中兩種方式都有*（必填）容易引起誤導。
2.6 刪除編號語義不明確
選擇座位后點擊刪除編號按鈕后座位和編號都被刪除，按鈕語義與實際意思不符。并且誤刪除座位還會增加重新繪制工作量。
3. 產品結構體驗痛點
3.1 分區形狀與座位分布關聯度低
分區的大致形狀應由分區座位的排布所決定，而產品中分區形狀與分區座位形狀并無直接的關聯，導致用戶在選座時產生較大的割裂感。
3.2 不支持直接選座
為了讓客戶更直觀的掌握場館座位分布，運維人員繪制時會盡可能還原，但客戶選擇時還要進入分區后才能選擇座位，且僅能查看到一個分區的座位，不能全局選座。
4. 框架和容器動線體驗痛點
4.1 分區配置位置分散，操作效率低
分區繪制與信息配置分散在兩個頁面和1個彈窗中，頁面布局分散，動線復雜多變。
4.2 座位配置比重弱
座位配置權重高且操作復雜，不適合使用彈窗承載，位置層級太深。
5. 產品與業務關聯體驗痛點
5.1 座位配置功能單一，缺少輔助操作
繪制座位圖是一項龐大的工程，系統內大型場館的座位達到4-9萬個，例如鳥巢、梅賽德斯奔馳文化中心。繪制大型場館需要花費3-4天時間，座位分布復雜的場館需要花費更長時間。目前系統僅有單一拖動方格的繪制方式，缺少提升繪制效率的輔助工具，例如撤回、復制座位、多種對齊/翻轉方式等。
6. 體驗優點
6.1 繪制場館分區圖時支持導入SVG
方便繪制大型復雜的場館。
6.2 系統穩定
復雜的場館繪制時間長且操作復雜，系統未產生過崩潰或其他終止情況。
二、配置票價和預留
配置票價和預留主要分為三個步驟：
選定場館分區：確認場館并選擇場館內分區
配置票價：選擇座位配置票價。
配置預留：選擇座位配置預留。
1. 框架和容器動線體驗痛點
1.1 頁面結構相似，內容重復
票價和預留頁面重復度高，都包含分區預覽、選座情況、分區座位圖模塊。
2. 交互細節體驗痛點
2.1 同樣功能不同頁面交互和視覺不一致
兩個頁面都包含分區預覽模塊，但交互視覺差別較大，交互視覺操作不統一。
2.2 內容表達不清晰
設置預留操作中，“對象”文案語義表述不清晰、“貓眼”和“釋放”不屬于同一層級且語義表達不清楚；新增預留標記按鈕位置有誤，應該放置在自定義預留下方，而不是與“對象“平級。
2.3 設置預留后無法查看座位編號
設置預留后，座位編號被預留標簽替換，從而看不到座位編號，影響識別。
3. 產品功能體驗痛點
3.1 不支持導出票務方案圖
在項目洽談后、正式開票前，報批時需要提供給主辦和公安票務方案圖，供主辦審核，目前需要運維自行制作不支持導出。
一、維護場館分區模板
1. 產品結構
與貓眼B端后臺相同，城市售票網在繪制場館分區圖時也是分為兩個步驟，先配置區域再配置座位。
區域配置：支持上傳底圖并通過繪制工具畫出區域形狀，繪制完成后可直接配置區域信息。
座位配置：通過繪座工具畫出區域座位，選座工具和配置工具進行輔助繪制。
2. 產品布局
2.1 區域與座位配置結構清晰，頁面布局規整；
2.2 區域和座位配置兩步銜接緊密，操作動線流暢。
3. 區域配置功能分析
優點：
1）支持上傳底圖及調整比例；
2）繪制工具易用性較高；
3）繪制風格統一；
4）分區配置動線流暢。
痛點：
1）不支持上傳SVG圖；
2）繪制POH(區域)的工具少，僅鋼筆工具；
根據產品定義，繪制座位分區使用區域工具，繪制舞臺、樓梯、出入口等場館輔助設施使用形狀工具。根據業務實際情況，區域繪制為主，形狀繪制為輔。然而區域繪制工具僅有一個鋼筆工具，Shape(形狀)繪制工具有三個，主次顛倒。
3）區域和形狀繪制工具容易混淆。
左側工具欄中兩類繪制工具未明確分開，非熟練人員操作時會誤用兩種工具。
4. 座位配置功能分析
4.1 創建座位
優點：
1）工具繪制靈活自由；
2）支持旋轉座位。
痛點：
1）需要熟悉繪制工具交互操作，有一定的上手門檻；
2）單個座位工具、路徑繪制工具在繪制結束需要鼠標雙擊，在無指導的情況下用戶很難發現。交互操作缺少說明文字或圖片解釋。
4.2 選擇座位
優點：
1）多種輔助工具提升繪制效率；
2）支持區域內復制黏貼座位。
痛點：
1）僅能在區域內復制黏貼座位，不具備區域之間座位復制或復制區域的能力。
對稱布局是場館中常見的一種布局形式，繪制好一個區域座位后復制并翻轉就可以快速畫完另一個區域。
如下圖所示，當前在G區域編輯座位，雖然可以復制G區的座位黏貼，但僅在G區能看到，無法復制到C區圖層內。
2）不支持設置弧度座位。
如下圖所示場館無法在系統內完全還原。
4.3 座位編號
優點：
1）編號方式支持字母、數字、字母數字結合形式，符合多種場景需求。
痛點：
1）編號受限于繪制時的分組；
繪制座位需要根據座位編號邏輯繪制分組，不可以一次性全部繪制完后分開編號。
若第一次繪制有遺漏座位，第二次補充后，無法整體編號。
2）無法取消編號。
編號僅能修改，不能刪除
5. 產品視圖分析
5.1 編輯座位視角
缺點：
1）僅支持在預覽功能時查看創建的全部座位。繪制某一區域座位時無法看到其他區域座位，缺少全局參考。
二、配置票價和預留
1. 產品布局
優點：
1）票檔和預留配置與場館座位配置結構相似，布局和操作統一，易于理解。
2）票價和防漲配置在一個頁面內完成，簡單清晰。
2. 票價及預留配置功能分析
痛點：
1）設置預留后無法查看到座位編號
如下圖中A標記的座位是預留座位，無法查看座位編號
2）預留模式下，選中已設置票檔、未設置預留的座位時，無法區分票檔
如下圖選中狀態下1-6號座位無法區分票檔A/B
3. 總結
城市售票網B端系統的在繪制場館圖上靈活度自由度高，界面布局規整，動線清晰，產品功能適用于多元復雜場景，不過需要用戶具有一定的繪圖基礎或熟悉成本。
通過以上分析，我們總結出貓眼B端系統后續的優化方向，框架和容器動線上需要提高用戶瀏覽和操作效率，頁面進行歸類整合，布局樣式統一；繪制環境上需要為用戶提供靈活自由的區域座位繪制工具，配備高效的選座和輔助工具。
一、整體布局
1）打破現有的分區與座位不平衡布局模式，梳理動線
二、功能
1. 場館分區設置
1）提供與業務關聯度高的、易用的分區繪制工具；
2）支持多種類型分區，例如舞臺區、座位區、舞池區等；
3）提高分區與座位繪制還原度；
4）確立場館規模分級，客戶端根據級別展示座位層級或直接進入分區層級。
2. 場館座位設置
1）提供易用度高的座位繪制工具或座位添加方式；
2）支持靈活選座，靈活編號；
3）支持調整座位角度、弧度、間距參數；
4）提供提升繪制效率的輔助工具；
5）支持跨區復制座位或復制區域功能；
6）提升座位配置頁面權重，完善座位配置界面。
3. 配置票價和預留
1）整合票價和預留頁面；
2）修正界面交互視覺問題；
3）支持設置預留后查看座位號；
4）增加導出票務方案圖功能。
這次研究我們從業務、產品功能、用戶三方面對選座配座模塊進行走查，抓住產品痛點，為后續改造指明了方向；對同類型產品的選座配座解決方案進行分析，幫助我們獲得新思路。
隨著沉浸式劇場、互動型劇場等新型演出的發展，場館座位布局不再是單一的座位正對舞臺，多個舞臺、座位多角度圍繞舞臺的布局形式不斷出現，今后還會有更多新型座位布局出現。設計適用于多種業務場景、頁面動線清晰、繪制功能好用的后臺工具不僅能提升運維人員的操作效率，也能提升客戶端用戶選座體驗和購票轉化，從而提升產品的市場競爭力。隨著演出行業的逐步復蘇，大量選座項目上線，改造選座模塊是我們工作重中之重。
筆者在車聯網行業任職HMI視覺設計師，由于HMI設計發展的較晚，所以基本上在開始進入到這個領域的人，大多來自于互聯網行業。由于互聯網行業發展的比較早，形成了一套成熟的工作流程，即：分工明確的遞進式協作：交互設計師要等到產品PRD評審結束才開始介入需求，然后交付黑白線框稿等給到視覺設計師繼續跟進。這種工作模式可以讓每個人在自己的崗位上做得更加專業，成為垂直領域的專家。在車聯網行業發展初期的時候，這種工作模式對于傳統行業的來講，比較新穎、高效，所以在一定程度上促進了行業發展，但汽車操作系統的設計還是有很多不同于互聯網設計的地方，所以本文旨在討論HMI工作流程，如何分工，怎樣高效的進行設計協同，以期望探索更適合車聯網行業的設計協同方案，希望對你可以有所助益。
對于HMI設計來講，需要了解很多專業知識，比如：屏幕、硬件、三電、法規……這些東西都會影響到設計的視覺表達，所以設計協同就顯得尤為重要，那么什么是設計協同呢？指設計師在設計之初，即可開啟分享與協作，讓協同者盡可能早的參與到設計中，通過提供一系列工具，讓協同者有更加友好地體驗，保證每個人都可以準確找到相應需求的內容，并且快速提出修改意見與反饋。簡單地講，就是讓每個人都參與到設計過程中，以使最終的結果能夠滿足用戶的需求。
從產品功能邏輯層面來講，HMI設計的“復雜度”是具有有一定的“限制性”的，即保證安全第一，過度復雜的設計必然影響駕駛和乘坐人的安全。所以對于設計，是需要進行全方位評估的，必然會涉及到不同的角色。同時隨著項目的不斷發展，設計團隊也在不斷壯大，設計師之間的協作也越來越多，相應的溝通和協作成本就會不斷增加。如何才能更高效的合作，并把設計質量和一致性做得更好，是我們需要解決的問題。所以設計協同的最終目的是為了解決問題，做正確的事，讓設計師做真正該做的事情。
讓設計師專注于真正重要的事情，而不是把精力放在可以自動化處理的事情上。對所有人員的工作進行集中化管理，所有人員基于統一數據源進行協作。
通過構建團隊資產庫，比如設計規范、控件組件庫等，通過建立健全設計規范，讓數據沉淀，一方面讓設計師的設計有據可依，提升設計的專業性，另一方面，減少因為人員變動造成的數據丟失。
在設計之初，就讓協同者參與到設計之中，保證每個人都可以準確的找到他們的需求內容，并快速提出修改意見與反饋，讓設計師更有針對性的解決問題，讓設計師無需做重復性的工作。
在HMI設計的工作流程中，主要涉及到的角色有產品經理、交互設計師、視覺設計師、研發工程師、測試工程師、項目經理。
不同角色主要工作內容是：
圍繞著HMI設計的整個工作流程是：
產品經理確認需求，輸出PRD文檔；交互設計師收到PRD文檔以后，基于需求，梳理功能，完善業務流程，完成交互文檔的制作，輸出UE文檔；視覺設計師在收到UE文檔以后，針對交互文檔中的流程頁面，進行視覺設計，輸出UI文件給到研發同學；研發同學根據UI文件和交互文檔進行代碼化，完成以后進入測試環節，測試工程師和產品、交互、視覺都需要參與到測試過程中，當完成測試工作以后進行發版。
涉及角色
自己、設計師小團隊。
痛點
工作中很多重復的內容，比如：Button、List等使用的地方很多，如果每個元素都重新繪制，勢必會投入很多時間，同時因為人為因素，難免會出現不統一的地方。那么怎么樣解決這個問題呢？
協同方式
當團隊初期發展的時候，或者整個團隊只有少數幾個設計師的時候，通過匯總通用樣式和組件，形成視覺指導Guide，方便通用樣式的復用，減少重復工作量，達到快速完成視覺設計的目的。
優點
通過樣式庫和控件組件庫的搭建，形成了一定的共有樣式，方便復用，有效的減少了重復工作量。
缺點
由于控件組件庫是在設計進行到一定程度以后提煉的，會存在滯后性，并且隨著設計工作越來越往后，會發現前期的控件組件存在不合適的地方，需要對之前的工作進行修正。
涉及角色
設計團隊內部。
痛點
當公司發展到一定的階段：
當設計團隊越來越大，大家分工越來越細，想法越來越多，就會發現，復制粘貼guide的方式，已經無法滿足團隊的發展了，經常出現組件不能滿足使用的情況，或者是組件相似但不知道怎么選擇等問題。
同時因為沒有統一的流程，會發現不同的業務對于同一功能交互邏輯的不統一現象，比如：搜索是很多業務都會使用的功能，因為沒有統一定義，有的業務會采用即時搜索模式，有的業務必須點擊搜索以后才可以進行搜索，并且這種問題，前期很難發現，只有到了中后期走查的時候才會發現。
所以在后期會針對每一個差異點進行統一，需要全流程重新來一遍，費時費力。那么怎么才可以避免這種情況的發生呢？答案就是構建設計系統。
協同方式
設計系統不同于guide的地方是：樣式，控件組件只是設計系統中的兩個組成部分，除此以外，設計系統還包括了一系列的標準來指導設計。比如：圖標、動效、音效等。這些標準記錄了設計團隊內達成一致的一系列的決定，比如如何選擇控件，如何在不同的控件中選擇。正是這些標準才確保了設計方案不僅僅只解決一個問題，而是可以被復用的。這些標準也是為什么用戶能獲得一致的體驗的原因。
通過設計系統的建立，讓設計規?；?，繼而進一步強化車機系統的統一性，同時為設計師在做設計時提供一個很好的指導方向，讓團隊內不同成員的設計在風格上保持一致，提升設計團隊的專業度。關于設計系統的建立本文就不再過多描述，后續會出專門的文章進行詳述，這里主要是講述設計系統搭建以后的協同方式。
設計系統的搭建需要專門的人或者團隊進行，當搭建完成以后，需要輸出的資源有：UE控件組件庫、顏色/字體樣式庫、UI控件組件庫、UI控件組件說明文檔。這些資源各有什么用呢，接下來進行詳細說明：
UE控件組件庫
提供給交互設計師，基于提供的內容，交互可以快速的構建界面、交互和流程等，就像搭樂高一樣。可以快速的構建一些產品原型或者是實驗性的功能，來進行測試以快速驗證想法。
顏色/字體樣式庫、UI控件組件庫
提供給UI設計師，形式可以是Sketch Libraries，一方面方便設計師調用，使不同的設計師的設計變得更加統一，且更加可預測，同時組件也可以讓設計師更多的時間專注于如何構建更好的用戶體驗，而不是去糾結于樣式的調整。
UI控件組件說明文檔
提供給研發，可以是pdf之類的文檔形式，主要是詳細的描述每一個組件的各種屬性，以及里面包含的交互邏輯等，幫助研發搭建起研發自己的底層代碼平臺。
那么這些資源和不同的角色之間是怎么協作呢？UE控件組件庫不需要常常更新，完成后給到交互設計團隊，供交互設計師使用搭建UE文檔。在項目開始之前，負責設計系統的UI團隊進行顏色/字體樣式庫、UI控件組件庫制作，完成以后分享到團隊內，供業務設計師使用進行界面設計，同時進行UI控件組件說明文檔的編撰，完成以后提供給相應的平臺研發，讓平臺研發進行組件代碼化。當代碼實現以后進行走查，檢查是否按照UI準確的實現。當業務設計師完成了業務的界面設計以后，進行評審，輸出給對應的業務研發，研發對于相應的視覺界面進行對應的代碼化，使用組件的地方直接調用平臺代碼，剩下的由業務研發進行代碼化。
優點
組件由專門的UI設計師和研發團隊負責，當出現設計變更以后，業務設計師可以快速通過組件庫更新最新的視覺樣式，同時和平臺研發對接，進行代碼修改，而不需要每個業務研發單獨修改，大大減少了跨部門的協作溝通成本。
缺點
團隊內需要專門的設計師構建設計系統并負責日常維護。
涉及角色
設計、交互團隊。
痛點
由于需求的不確定性，以及車聯網項目周期較長等特點，會出現需求經常變更的情況，那么交互就需要不停的更新交互文檔，UI也需要不停的輸出視覺文檔，往往一個項目結束以后，會有幾十份甚至上百份的設計文檔的情況出現。
協同方式
隨著云端化辦公軟件Figma的興起，為多角色協作提供了可能性，目前主流的工具有：Figma、MasterGo、Pixso、即時設計等在線軟件。
設計文件現在是一個鏈接，這意味著：
UI設計師不必再等到交互完成評審，輸出交互文檔以后進行視覺設計，交互和設計完全可以合二為一，輸出一份高保真交互流程文檔，并且輸出的文檔可以供研發直接瀏覽器查看，而不需要像之前一樣，不停的進行設計資源的輸出。極大的節省了設計師輸出時間。優化了協作工作流。
優點
協作設計，云端辦公，多角色參與。
一鍵獲取文件，不需要通過其他平臺轉化，步驟簡單；自動生成代碼與標注。設計稿修改后自動更新，無需重復下載。
缺點
云端保存，會有數據泄露的風險。
必須在線操作。
涉及角色
UE、UI、研發。
痛點
由于公司發展，業務線增加了很多適配線，這塊的工作基本上屬于：把已有的UI適配到另一個屏幕尺寸下，需要設計的地方不太多，需要花更多的時間去重新按照最新的屏幕尺寸搭建一遍UI界面，屬于用時間換業績，為了達到這個目標，可以采取的方式大致分為兩種：
第一種是增加更多的人力，不管是招更多的人，還是增加更多的供應商人員，都會增加業務支出，并且由于業務無法一直保證飽和，所以會出現一段時間忙的要命，招了很多人員，過了這段時間，業務不太多了，大家都閑了下來，但是開支還是必要的，所以這算是一種沒有辦法的辦法，對于團隊或是公司來講，并不可持續。
另外一種方式就是重新梳理工作流，減少一些重復無意義的工作，比如像是系統設置等瀑布流式的界面，不同車型下的區別只來自于功能的有無，界面上并無太大區別，這里所說的工作，不僅僅指設計師的界面設計工作，同時也包括了研發同學的研發落地工作，同時因為研發同學的適配，也會造成測試走查環節，這些都是一些重復性的工作量，所以是否有一種更好的協作方式可以避免這種情況的發生呢？
答案就是我們接下來要講的一種全新的工作模式：C2D2C模式。
協同方式
由于設計團隊在早期的發展中，積累了大量的設計資產。這些設計資產的沉淀就是設計標準化的基礎，將設計資產轉為封裝好的代碼組件，也就是C2D的過程。然后將封裝好的組件通過低代碼平臺進行屬性配置、搭建頁面、布局調整實現頁面的設計就是 D2C 的過程。通過平臺設定交互行為和綁定后臺數據，完成整個系統，最后再進行站點發布，就實現了 C2D2C 的完整流程。
C2D2C（Code to design to design）的模式，簡單講就是研發同學把設計資產通過設計標準化和研發工業化的方式完成代碼化，然后讓設計師調用已經代碼化的設計資產進行設計工作，這樣子當設計師完成了界面設計的時候，相當于同時完成了前端開發，接下來研發同學只需要根據拿到的界面添加簡單的邏輯就算完成了研發工作，實現中后臺設計研發流程的整體提效。
優點
由于樣式、組件已經完成了代碼化，那么在適配工作中，控件組件化高的界面就可以直接生成代碼，不需要設計師重復設計，同時由于減少了設計師和研發的參與，節省了大量溝通成本，也減少了很多因為人為因素而產生的bug。
由于設計師減少了重復工作量，可以有更多的時間集中在視覺表現上，有效提升了設計輸出的質量，保證了產品的設計感。
對于大量適配項目的團隊，可以由設計師直接配置項目組件，無需經過研發，減少出錯概率，極大提升工作效率。
缺點
前期需要研發同學代碼化基礎控件，所以需要投入人力、精力進行前期的工作。
由于控件提前進行了代碼化，后續可能會出現無法滿足業務需求等情況出現，所以需要有人及時對代碼進行維護更新。
涉及角色
產品、UE、UI、研發、測試。
痛點
基于上面講述的C2D2C模式，已經完成了一個共享平臺的搭建，由于配置需要研發的參與，所以始終需要研發同學作為集成人員，并不利于其他角色的使用，那么怎么樣可以讓產品同學，設計同學，或者說是普通用戶使用呢？
協同方式
一個優秀的共享平臺是需要所有人都可以在其中使用的，所以，當公司或者團隊發展到穩定階段，我們需要重構工作流，以需求為導向，搭建全員工作平臺，基于設計師和研發搭建的平臺基礎上，提煉需求，強化個性化和定制化，滿足品牌產品的個性化需求，具體來講，就是把UI界面中元素提煉出相應的功能，生成功能清單，通過選擇不同的功能，生成相對應的界面。
當完整的共享平臺搭建完成以后，團隊中的每個角色的工作內容都發生了變化，產品的工作是構建更多的需求，交互設計師的工作是構建更多的交互形式，產品架構，UI設計師的工作是設計更多更好的界面布局，視覺表現，然后研發把上述內容通過代碼匯總進我們的需求池中，擴展我們的平臺豐富度。
HMI設計工作，就變成了：客戶在我們的配置面板中選擇需要的需求，喜歡的布局，想要的視覺，點擊完成，就可以即刻看到高度定制化的一套系統。
優點
讓每個人回歸工作的本質，不需要為了一些重復的繁雜的內容而疲于奔命，做更有價值的工作，實現工作的價值
賦能行業，可以滿足車企定制化的需求，提供車企一套完整的車機系統解決方案。
缺點
投入大，對于小體量的業務來講短期無法創造價值。
對于現在的行業環境，增速提效已經達成了基本共識，設計協同就成了一個大課題，但是不同的企業，不同的團隊面對的具體問題不一樣，可使用的資源也不太一樣，那么采用哪種協同方式并無定式，需要根據實際情況，進行具體分析，畢竟效率的提升是為了創造最大的價值。我們所有的努力最終目的是為了解決問題，做正確的事。
作者：菘藍C 來源：站酷網
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
看完本篇文章，你會學到以下內容：
1，什么是彈窗？
2，彈窗的規范如何定義？
3，彈窗使用規則是什么？
4，什么是抽屜？和彈窗對比優缺點是什么？
一、什么是彈窗？
彈窗是在保留當前頁面狀態的情況下，告知用戶并承載相關操作。
思考：彈窗里面哪些構成原件可以根據業務屬性可以有可以沒有呢？
答案：標題區和操作區。
二、彈窗的規范如何定義？
1、定義彈窗的大小規范
彈窗的的大小有兩種定義方式。一種是固定大小，一種是自定義大小。需要根據自己的業務場景二選一。
彈窗寬度一般定義為三種。分別為560px，720px，960px，都是8的倍數方便記憶。尺寸并不是定死的，可以根據自身業務場景調節。
彈框固定高度會有一個最小高度200px，一個最大高度560px。在其之間的高度是由內容區的內容決定，超過最大高度560px時出滾動條。
彈窗自定義高度，只定義最大高度，隨著頁面拉升縮小，彈窗邊距不變。
2、定義彈窗內容規范
定義：標題欄操作欄高度，內容區邊距。
3、彈窗類型
彈框類型是根據使用場景區分提示彈窗，自定義彈窗兩種
彈窗優點：沒有跳出父級頁面，彈窗任務完成后仍然會留在父頁面進行操作，減少用戶操作中步驟體感
彈窗缺點：信息承載量少，信息內容過多的時候會出現上下左右滾動條，彈窗會降低用戶操作效率
三、彈窗使用規則是什么？
1、不超過兩種操作選項
假如承載的操作項比較多，建議新跳轉一個落地頁。
2、多步驟操作，選擇用頁面承載
3、盡量避免彈窗疊彈窗
第一個彈窗的內容考慮用頁面承載或者第二個彈窗是否可以用氣泡或者下拉來承載。
假設一定要疊，二級彈窗的復雜度要低于一級彈窗，滿足形式上的平衡，遵循從大到小的邏輯或者是覆蓋上級，完成任務后點“返回”返回。
四、什么是抽屜？和彈窗相比優缺點是什么？
抽屜是信息承載量和頁面比肩，又兼具彈窗的優點。
作者：鯤sky 來源：站酷網
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
看完本篇文章，你會學到以下內容：
1， 什么是表單頁？
2，表單頁設計原則
3，表單的構成
4，表單的交互
5，頁面布局
6，提升表單易用性
7，體驗衡量指標
1、采集/錄入數據信息。2、編輯數據信息。3、特殊的條件設置。后臺產品的本質是針對數據的增、刪、改、查。而增、改、查都可以用表單完成。
OA系統里面的請假申請，報銷申請，錄入員工，新建會議。教育類的創建課程。HRM系統里面發布職位以及物聯網管理系統新建設備等等。
用戶快速定位重要信息和目標選項同時文案和組件能夠準確傳達相應含義
整體表單排布有合理的交互形式；科學的信息布局和組織形式；盡可能“少操作一步”用戶在面對50和表單和500個表單的心理壓力是不一樣的。
操作前：提示和防錯。
操作中：實時反饋與糾錯
操作后：合理的保存、清空、取消、撤銷機制。
表單通常由表單標簽、表單域、提示提示、操作按鈕四部分構成。
左標簽
優點：表意明確，節約縱向空間，多用于web端
缺點：不太適用于移動端等狹長空間
頂標簽
優點：對齊舒適，節約橫向空間，多用于移動端及英文場景下。
缺點：縱向空間利用率不高
行內標簽
優點：最節省空間，多用于注冊登錄
缺點：輸入狀態標簽消失，用戶陷入迷茫
左對齊標簽
視線從標簽移動到表單域時間為500ms，這比右對齊標簽所用的時間長的多，所以更適合閱讀，用于詳情的陳列。
特點：閱讀效率高，操作效率較低；
右對齊標簽
視覺動線參差不齊，不適合高效閱讀，但適合高效操作，更適合表單填寫。
特點：閱讀效率不高，標簽指向明確，操作效率高
步驟一：根據業務已經有的字段長度定義4-5種寬度規范，建議寬度可以是8或者是40的倍數。
步驟二：根據你要搭建的表單，選用合適的規范，長度與輸入預期成正比。有人會說排出來的表單左邊沒對齊，右邊也沒對齊，其實這就是B端產品特征那就是是好用大于好看，就要給用戶一種心智那就是給你的這個長度那就是要輸入一個這么長的內容。
避免“正確的廢話”：給不到用戶任何的幫助還增加了用戶的閱讀成本。
按鈕常見位置：一般出現在頁面頂部、跟隨表單里的內容、表單內容底部、頁面底部。
按鈕閱讀順序：按鈕出現頁面右上角或右下角時，閱讀順序是從右往左，這符合pc端操作習慣以及人閱讀習慣。按鈕跟隨表單內容或在表單內容底部時，閱讀順序為從左往右，這符合人的填寫順序從上往下，從左往右。
底部按鈕右對齊：一般用在彈框，因為彈框頁面比較小，右對齊比較符合操作習慣。
底部按鈕居中：一般用在頁面中，因為右下角操作距離會有點遠，所以表單用頁面承載的話按鈕建議居中。
表單中字體全部統一采用14px。表單上下間距一般有三種，1.內容與內容間距為24px。2.內容與說明文案間距為4px。3.內容與子內容間距以及及子內容之間的間距為8px。
表單交互方式有四種。1.原位編輯；2.氣泡卡片；3.彈窗/抽屜；4.頁面跳轉。
原位編輯
編輯內容即為展示內容，容量低于5個時使用。
氣泡卡片
設置項與看板內容緊密相關時使用氣泡卡片，建議設置項低于5個。
彈窗/抽屜
設置項與看板內容可以有關聯也不可以沒有，大于三個以上的錄入項使用。
如果錄入項較多，用彈框承載出現翻頁的情況下可考慮使用抽屜。
頁面跳轉
如果容量超出了彈框/抽屜的承載量并且錄入項與看板沒有那么強的關聯性可采用頁面跳轉的方式。
頁面布局方式有四種。1.分組；2.錨點定位；3.標簽頁；4.分步驟
5.1.1標題分組
設置項超過7個；彼此間的關聯性較弱且可以分類去歸納
5.1.2卡片分組
有多個設置項，多個分類；彼此之間的關聯性更弱，分類明確
有多個分類的情況可通過錨點定位迅速找到相關信息
彼此之間沒有特定的相關性，可以獨立設置。每個設置包含了多個錄入項且使用了標題分組。
小結
當錄入項少于7個時使用基礎布局；當錄入項在7-15個時可采用標題分組，卡片分組、錨點定位布局；當錄入項大于15個時需采用標簽頁布局。
利用步驟條將大型，復雜任務拆解為多個部分，并按照相關性分組。
建議3種分組依據
1.采用必填項劃分，把必填的選項分在一起；2.采用相關性劃分；3.以操作成本劃分。把好填的簡單的表單放在前面，復雜的放在后面。
提升表單易用性方式有5種。1.信息降噪；2.清晰易讀；3.高效智能；4.防錯糾錯；5.所見即所得
場景一：當表單中大多數都是必填只有極少數非必填時
場景二：表單項非必填項比較多，可將低頻的非必填項收起
場景一：盡量采用單列布局，視覺動線流暢，不容易遺漏信息；按enter鍵換行。
場景二：如果出于業務方需要，必須在橫向添加內容，那最好有一定的分組依據。但這樣就不應該出現豎向分組，以免遺漏信息。
6.3.1根據上下文信息可以自動獲取的，無需用戶再次填寫。
例如根據手機號帶出用戶姓名；根據地址帶出郵政編碼；根據身份信息帶出生日。
6.3.2提供合適的“默認項”。
例如根據行業現狀提供常規的比例分配；根據定位把地區做默認的填充。
6.3.3提供搜索、聯想，自動顯示匹配的信息
用戶在進行輸入等操作時可以提供智能輔助，例如表單填寫時對需要錄入信息的區域提供輔助提示，通過自動補全或聯想詞來幫助用戶快速錄入信息，在保持用戶的操作自由度的情況下提效。
6.3.4 OCR識別文件內容
對于一些標準證件信息的錄入，可以通過OCR識別文件內容。當用戶上傳圖片后，運用圖像識別技術提取關鍵信息并自動填入結果。
6.4.1對于長數字，四位一空格，用來分段
例如輸入銀行卡號；充值場景下輸入手機號等
6.4.2為用戶封閉不正確道路
將超出時間選擇范圍的日期置灰。電話號、身份證錄入時只允許輸入數字同時設置字數上限。
6.4.3告訴用戶哪里錯了，而非簡單粗暴的錯誤提示
表單頁對填寫的物料內容進行映射，展示真實效果預覽，降低用戶心理的不確定性。適合對移動端、小程序、H5頁面的設置。
體驗衡量指標有4種。1.任務完成率；2.任務完成時長；3.必填項目數；4.易用度評分
7.1任務完成率
7.2任務完成時長
7.3必填項目數
結合業務場景給出最適合的必填項設定，提高用戶填寫效率。
7.4易用度評分（用戶完成某項任務的難易程度）
易用度可通過調研問卷和評分量表獲取。
作者：鯤sky 來源：站酷網
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
我們需要什么樣的配色方案？
B端的系統的主色代表著一個系統的氣質，與所在行業、產品的定位、用戶群體都有一定的關系。前面調研了眾多竟品及市場前沿配色方案，目的就是期望從它們身上找出共性，引領我們的系統找到最適合的方案，這是知彼。
光有“知彼”是不夠的，我們還要清晰的知道自己是誰？這樣我們才可以說我們的配色方案是最適合我們的，有理有據的方案。
B端系統的真正使用人群比較復雜，具有年齡跨度大，文化水平參差不等，從事行業廣泛等特點。
源于自然之美的色調，突顯靈活性與再生的創意！
依據彩通色彩研究所專家的說法，紐約時裝周2021春夏季的色彩強調我們渴望能激發出巧思與創意的色彩，這些色彩的百搭性質穿越季節，容許更多的選擇自由，適于表達原創的風格，也足夠靈活來適應現代新的更片斷化的生活方式 。
“2021春夏的色調呈現出大自然，強調我們渴望擁有全年皆宜的靈活色彩，這一季的色彩充滿道地真實的感覺，這種感覺對色彩而言愈來愈重要，同時結合了某種程度的舒適與輕松感，并散發出活力，激勵振奮我們的心情”
說到這里“主題色”如何來選擇？
色彩對于人的大腦的沖擊力大于造型，比如淘寶，我們會記憶起淘寶的主色是橙色；色彩是影響人類視覺思維的重要因素，色彩能直觀的體現產品的性格和氣質，所以選擇一款適合產品的主色很重要。
我們的用戶在更替，如何讓產品年輕化、品牌年輕化是現在幾乎所有企業都在思考的問題，新的用戶群體從小接受的教育和喜好決定著產品的發展方向。
比如：我們這次顏色升級中律動、青春活力是核心關鍵詞，而藍色則可以讓產品視覺符號得到延續。
對于主題色的選擇指標有哪些？
通過關鍵詞圖片像素化提取顏色，同時參考B端產品顏色流行趨勢和當年的年度流行色，以及竟品顏色分析結果，獲取藍色的色相、純度、明度范圍。
2020潘通年度顏色經典藍（19-4052 Classic Blue），顏色值為#174A7B（H207 S81 B48）
2021潘通年度顏色搭配色鳥舍系列中19-4151Skydiver，顏色值為#02569D（H207 S99 B62）
假設：竟品的主題色藍色的色相范圍為205-225；純度的范圍為70-96，平均值為86；明度的范圍為70-98，平均值為88，B端產品流行趨勢的主色也多是藍色系，色相范圍為200-232；純度的平均值為70；明度的平均值為68。
色彩的使用范圍及色階有哪些？
色彩的應用場景包括：關鍵行動點，操作狀態、重要信息高亮，圖形化等場景；針對這些使用場景只有一個色值是不能滿足所有場景使用的，所以我們要建立主題色的不同色階來滿足不同場景下顏色的使用。以建立色彩層級，或傳達信息，或強化界面層級。
在色彩系統中，常使用 Tints and shades 系統來建立調色板，通過在顏色上面增加白色，或者增加黑色，來改變它的明度和飽和度，形成同色系的調色板，在符合無障標準的區域，選擇不同明度飽和度的色彩，形成有梯度、有層級的彩色調色板。
B端產品中光有“主角”是不夠的，還要有“配角” 所以我們還要看一下輔助顏色是如何定義的？
輔助色是為了幫助頁面區分狀態和層級而設立的顏色，主要包括圖表類儀表盤顏色和功能色，通過合理的顏色傳遞產品正確的信息，讓其信息傳達更明確清晰。
輔助色的作用是配合襯托產品主色調，在不同的產品中，輔助色運用的策略是不同的，比如我們在竟品調研中發現，輔助色經常是取自主色的鄰近色、對比色和互補色等。
儀表盤配色：通過對竟品的分析可得知，優秀的儀表盤的配色有多系列及低純度的特點，多系列配色是為了滿足用戶個性化的需求，而低純度是考慮用戶在長時間使用產品，色彩對其心理的影響。
功能色：這類顏色在系統一般不會隨意更改，而且特定的語義一般都有固定的色相，只需改變其純度和明度，使其視覺上符合主色的氣質，使其搭配和諧。
1.通過默認主題色選擇輔助色及默認儀表盤顏色
我們以默認主題色為#467FEA（H 219 S 70 B 92) 為起始點，S（飽和度）、B（明度）保持不變，H（色相）以180°為起點，以15°為增量或減量標準，生成24色色板。這個色板是我們選取輔助色的重要依據。
以鄰近色、互補色、對比色為原則選擇豐富的顏色
鄰近色：在色相環中，相差15°的顏色為鄰近色，凡在60°范圍內的顏色都屬于鄰近色的范圍，主色和鄰近色的色系組成的搭配，可以在同一個色調中構建出豐富的視覺層次感和質感，賦予不同的功能含義，信息表達明確，和諧統一感很好，視覺上的趣味性，顏色的搭配顯得很柔和。
對比色： 在色相環中，角度相差120°-180°之間的色彩，這里使用了120°為角度來選擇對比色。
互補色： 在色相環中成180°角的兩種顏色，互為補色；主色可以和其互補色的兩個色彩的搭配，該色彩可以為鄰近色，例如：藍色和黃色、橙色的搭配；這種搭配既能保持互補色搭配強烈的對比度，區分關鍵信息，次要信息，又能增加視覺上的趣味性，色彩看上去豐富多彩。
例如：藍色作為主色，互補色黃色作為輔助色應用在圖表、圖標和標簽上，再選擇黃色的鄰近色橙色作為另外一個輔助色，應用在不同的關鍵信息上，有助于用戶更好的閱讀產品的功能和內容。
獲得輔助色-9色相
通過鄰近色、互補色和對比色的選擇，我們從24色色相環中得到了9色相色環，9色相色盤優化后將做為圖表的儀表盤顏色和語義類的功能色出現頁面設計中。
校正輔助顏色
雖然我們保持相同的飽和度和明度，使用科學的方法得到了較為合適的色相，但由于色彩本身自帶感官明度屬性，導致在視覺感受上的感官體驗并不同頻。
黃色、綠色的明度即發光度較高，藍色就稍微偏暗一些，導致色板看起來不一致，為了讓不同色相看起來更加協調，需要調整色板的明度和飽和度，以保證視覺感官體驗同頻且更加和諧舒適。
校正后的顏色主要用于功能色和儀表盤顏色。
從輔助色中提取功能色及儀表盤色系
通過對竟品的分析總結同時結合默認主題色分析得出的9色色環，歸納分離，最后形成系統的默認儀表盤顏色。
功能色的目的是明確信息及狀態，比如成功、出錯、失敗、提醒、鏈接等；功能色的選取需要遵守用戶對色彩的基本認知，結合分析得出的9色色環，顏色校正，得出系統功能色。
輔助色的色階
為了度量不同的可視化從高到低的數值，我們儀表盤顏色遠遠不夠，所有為了保證視覺上的統一性，我們需要加入輔助色的明度色階來區分數據層級。
同時我們產品有深色和淺色兩種模式，由于視覺對比的原因，在深色的場景看下看的顏色，和淺色場景下看到的顏色是兩種感受，深色場景下顏色會發亮，所以為了保持視覺上統一，我們也需要加入輔助色的色階。
輔助色色階建立方法與主色的色階建立方法一致，使用 Tints and shades 系統，通過在顏色上面增加白色，或者增加黑色，來改變它的明度和飽和度，形成同色系的調色板。
模擬方案一主色、輔助色及消色匯總
通過以上分析我們得出模擬的主題色、儀表盤顏色、功能色及消色。為了方便記憶，我們分別給顏色取了名字和編號，命名方式采用植物色彩命名，這也是200多年前顏色數值出來之前的命名方式，最早見于1814 年出版的《維爾納色彩命名法》
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
設計過程被描述為多個階段，每個階段都包含不同的活動來完成該階段，它沒有統一的標準流程，每個公司和設計師都有自己的流程版本。
盡管存在多個流程，但一般流程和階段類似于以下內容:
了解問題：初步了解問題。觀察、采訪和傾聽用戶。
定義問題：解釋和定義要解決的問題。
構思：通過頭腦風暴產生盡可能多的想法。
原型設計：構建原型并與其他人分享（ 再次縮小解決方案空間，為實驗階段 ）。
測試：測試可能的解決方案、實施、改進或重新設計。
傳統的問題解決采取有條不紊而又科學的形式。該過程從一個問題開始，定義要采取的步驟以及達到解決方案的工具或方法。
設計思維是一種創造性的策略，可以產生創造性的未來結果和/或創造性的問題解決方式，它應該被認為是一種以解決方案為中心的思維策略。
它通常被描述為一種創造性、主觀和感性的對許多大型組織的分析邏輯（ 布朗，2008 年 ），或作為分析和創造性推理模式的組合（ 鄧恩 & 馬丁，2006 年；利特卡，2015 年 ）。
設計思維來源于常規問題解決方法，常規問題解法是設計思維的基礎。
從解決問題到設計思維，Liedtka (2013)
結果發現，設計思維實際上也是一個解決問題的過程，而不僅僅是一個創新過程（ 利特卡，2013）
一個例子是，豐田采用設計思維從頭開始分析其西海岸的一個客戶聯絡中心，在重新設計過程中，組建了一個由一線呼叫代表、軟件工程師、業務主管和變革代理組成的跨職能團隊，這一舉動最終改變了客戶和員工的服務中心體驗。
我們每天都會遇到問題，但是當我們解決同樣的問題時，它們就成了例行公事（ 似乎已經忘記它們是問題了 ），我們甚至都沒有意識到正在解決這些問題。例如，我的辦公室在 30 分鐘路程之外，該怎么到達那里？開車、坐火車或巴士到目的地；除非車子輪胎被刺破，否則你就需要弄清楚如何到達辦公室。
1990 年代，IDEO 的 David Kelley 和 Tim Brown 與 Roger Martin 共同創造了特定術語：“設計思維”，并將多年來醞釀的方法和想法封裝成一個統一的概念。
設計思維是以人為中心、開放式、基于問題的方法論。這種方法最初是為了改變工程教育中的教學方式，而工程師處理和解決問題的方式有其設計思維的基礎。
設計思維一詞可以追溯到 1987 年 Peter Rowe 的著作：“設計思維?！?他描述工程師和建筑師處理問題的方法有很大不同。
90 年代初，認知科學家 Don Norman 加入 Apple 團隊，擔任他們的用戶體驗架構師，這使他成為第一個在職位中包含 UX 的人。他提出了“用戶體驗設計”這個術語，因為他想“涵蓋人們對系統體驗的所有方面，包括工業設計、圖形、界面、物理交互和手冊。” 從那時起，這些領域中的每一個都將用戶體驗，擴展到了自己的專業領域。
設計思維在解決“棘手問題”時特別有用。
棘手問題的特征
“棘手問題”一詞是由設計理論家 Horst Rittel 在 1972 年創造的，用來描述本質上非常模糊 \ 特別棘手的問題。棘手問題，有很多未知因素，沒有確定的解決方案。問題或解決方案可能與另一個棘手的問題有關，因此這是一個需要設計思維的持續過程。貧困、饑餓和氣候變化是一些現代的棘手問題。
設計主題的范圍是普遍的，因為 設計思維可以應用于人類經驗的任何領域。
它可以用于：
符號和視覺傳達：這包括平面設計的傳統工作，如排版和廣告、書籍和雜志制作、科學插圖、攝影、電影、電視和計算機顯示。
材料：這包括對日常用品的形式和視覺外觀的傳統關注 —— 服裝、家用物品、工具、儀器、機械和車輛。
人類活動和組織性服務：包括對物流的傳統管理關注，結合物質資源、工具和人類低效的序列和時間表，以達到特定的目標。
復雜的系統或環境：生活、工作、娛樂和學習。這包括系統工程、建筑和城市規劃的傳統關注點，或復雜整體部分的功能分析及其隨后在層次結構中的集成。
設計思維起源于設計師的培訓和專業實踐，但這些原則可以被每個人實踐并擴展到每個活動領域。（布朗，2013 年）
在企業中，設計過程可以為企業環境中的問題解決帶來創新思維。它還可以用于醫療保健，通過向護士、醫生和管理人員教授設計思維技術，我們可以激勵相關從業者貢獻新的想法。
不管是什么設計，理解和研究問題是必不可少的，因為我們能夠從其出發，從而進行以用戶為中心的設計。
設計思維的最早階段是搞懂你能帶來的情感價值。設計思維方法迫使你停留在提問與質疑階段，而不是準確定義出問題后進入下一階段。我們都有過快進入解決方案模式的傾向，所以設計思維方法迫使你真實地存在于這個不清楚、有時還非?；靵y的時刻，從而使你對要解決的問題產生更好的理解。（利特克，2013）
傳統的問題解決涉及提出一個解決方案，但設計思維首先使我們發散，試圖為問題生成各種可能的替代解決方案。然后讓我們進行收斂性思維，縮小多種可能性，找到單一的最佳解決方案。
根據利特卡和奧美 (2011) 的說法，設計思維的全部意義在于學習一種新的、系統的解決問題的方法。正如我們思考創造力一樣，即使是設計思維也可以通過實踐來教授和改進。
設計過程從來都不是線性的，它由多次失敗和迭代組成（布朗，2018）。
首先，設計師試圖將問題與過去的類似案例聯系起來。如果這種方法不能提供任何解決方案，下一步就是使用知識和創造力作為一種實驗思維形式來產生新的想法。使用決策矩陣對這些想法進行評估，從而會產生被進一步分析和測試的解決方案。如果成功，它將被實施。如果不成功，則需要重新表述問題，并重復該過程。這是一個迭代過程，即循環方法。
這一持續不斷的重新再設計過程，源于和客戶親密接觸的洞察。
學習設計思維不僅僅意味著學習一套新的工具。它還意味著：學習收集和分析大量數據；學習挖掘對象可能的形態而不是自主認為他是什么；學習管理不確定感，以及與許多新的伙伴合作（ 利特卡和奧美，2011）。你可以進行的研究類型分為三類：生成性研究、評估性研究和驗證性研究。
一種常見的表述 —— 實際上是設計思維的另一種視角 —— 即設計師應該預料到會“很快失敗或經常失敗”（布朗，2009）。
當過程早期發生故障時，例如被拒絕的原型，實質上它可以為有效解決方案提供關鍵見解。這種觀點與傳統的先形成理論，再檢驗正誤的方式相矛盾。
Airbnb、Braun 和百事可樂等多元化公司都在 采用設計思維并將其作為核心戰略。例如，IBM 為全球旗下的 44 個設計工作室聘請了 1600 名設計師，并且正在培訓數以萬計的設計師員工建立深度創新能力 ( O'Keefe, 2017 )
設計思維為我們解決問題添加了以人為本的元素。當我們試圖通過牢記人們的想法來解決問題，并使用基于直接觀察乃至訪談的研究時，我們便會捕捉到與消費者需求一致的意外見解和創新。
它有助于將成功的產品更快地推向市場，最終節省企業資金。
IBM 的健康和人類服務組織的設計思維實踐，通過有效使用設計和設計思維幫助企業將缺陷數量減少了 50% 以上。這種更高效的工作流程導致計算出的 ROI 超過 300%。
由于復雜的問題從來不能被所有人完全理解，因此在嘗試設計解決方案時，處理歧義和多個并發的思路方向的能力是至關重要的素質。
設計思維通過綜合和歸納思維，幫助實現質的飛躍。它允許通過解構來測試約束，并允許通過多樣性思維和批評思維，來擁抱和探索歧義。
消費者通常不知道他們有什么問題需要解決，或者他們無法用語言表達出來。只有經過仔細觀察，設計者才能根據真實消費者行為中看到的東西來識別問題，而不是簡單地根據對消費者的想法來確定問題。這有助于定義模棱兩可的問題，并找到解決方案。
該方法鼓勵“跳出框架思考”（“瘋狂的想法”）；它蔑視顯而易見的事物并采用更具實驗性的方法。
在早期的流程階段鼓勵大膽的想法，以產生創造性的解決方案。使用它是為了讓設計師可以嘗試開發新的不受約束的思維方式，或對常見問題的創新解覺方法。
根據大多數設計學院的說法，具備特定特質的人能夠更好地發揮設計思維的作用。
同理心：從多個角度想象世界 —— 同事、甲方客戶、實際使用者和消費者的角度。要成為更好的同理心，必須傾聽和觀察他人的行為，注意并獲得洞察力。
綜合思維：重要的是不僅要有分析能力，而且要能夠提出新穎的解決方案，還要憑直覺。
樂觀：除非你相信有解決方案，否則在遇到挑戰且解決方案遇到瓶頸時，你可能會放棄。
實驗主義：重大創新并非來自漸進式調整。設計思想家以創造性的方式提出問題并探索限制因素，并朝著全新的方向發展。
協作：產品、服務和體驗日益復雜，因此必須擁有一支具有不同背景的團隊，以幫助從多個角度看待問題。
當我們想到一個問題的多種解決方案時，對我們解決問題會非常有幫助，因此“功能固定性”阻止了我們以新穎的方式使用舊工具解決新問題。想要擺脫功能固定，首先是要讓人們可以使用“改造后的衣架進入上鎖的汽車”。這也是盜賊第一次可以用信用卡撬開簡單的彈簧門鎖。
為了幫助設計師利用文科和技術理論，整合多個領域的知識以找到創新的解決方案，我們采用設計思維來獲得洞察力。該方法側重于可視化和操作，因而幫助我們更容易地了解實際解法，而不僅僅是理論模型。
第一批美國公司在 2000 年代初期開始實施設計思維，這一概念引起了德國投資者 Hasso Plattner 的興趣，他于 2006 年資助創建了兩所設計學校（d.schools），其中一所位于波茨坦大學（德國），另一所位于美國斯坦福大學。由于兩所學校都成功地為大型組織提供了高管設計思維培訓，因此該研究重點關注這些國家，以尋找早期實施者。
設計思維通常涉及希望參與整個設計和開發過程的龐大利益相關者團隊。
觀點、才能和經驗的多樣性被認為是注入新思維的部分重要來源。多樣性確保通過融合不同的觀點、技能和知識來產生創意（卡振思，2018 年；薩梅和德拉赫-扎哈維，2013 年）。設計思維的協作方法和工具可幫助團隊以積極的方式利用他們的差異。
決策是平等的，因為每個成員的意見都被征求和使用（卡爾格倫等，2016）。
當 IDEO 去 Apple 展示他們的鼠標時，它不是什么花哨的設備，而是一個用膠帶粘起來的原型。
低保真原型制作起來既快速又便宜（ 想想幾分鐘和幾分錢 ），但可以從用戶和同事那里得到有用的反饋，這符合快速驗證、廉價試錯的原則。為每個想法投入盡可能少的資源意味著前期投入的時間和金錢更少。此外，將多個原型帶到現場進行測試為用戶提供了比較的基礎參考，同時也有助于揭示某些需求。
為了創新，設計思維意識到認知和行動對創新過程很重要。認知包括接受度、樂觀和創造性的信心（ 凱莉 & 凱莉，2013；鄭，2018），而行動包括快速原型設計、旅程地圖和假設浮現（ 假設浮現：assumption surfacing，這是一種評估技術，涉及寫出潛在的假設和反假設。）（ 卡爾格倫等，2016；利特卡，2015）
如果領導層不歡迎風險、模棱兩可和風格的改變，實施起來就會變得更加困難。它會被管理者“質疑”其具體指標
沃爾特斯 ( 2011 ) 聲稱，由于設計思維的模糊性，它與組織文化相沖突。
據受訪者稱，在日常業務中使用設計思維之所以不會是最優選項， 因為它是資源密集型的，增加了工作量。（ 麗莎等，2016）
在醫療保健等規避風險的行業和公司中，“經常和早點失敗”的方法被認為是非常困難的。
許多設計師反對設計思維這一觀點，設計思維不僅關乎一個過程，而且關乎改變思維過程并提高人們可能提出的解決方案的創造力。
“設計思維”的推廣已被大型全球公司用來增加業務。不過，在更廣泛的設計世界中，我甚至會說“設計思維”的過度宣傳導致了所提供設計質量的下降?！?Yasushi Kusume
弗吉尼亞理工大學科學、技術和社會助理教授 Lee Vinsel 在《設計思維運動是荒謬的》中寫道，“歸根結底，設計思維與設計無關。這與文科無關。這與任何有意義的創新無關。如果這意味著重大的社會變革，那肯定不是關于“社會創新”。這是關于商業化的?！?
觀察人們的行為以及他們如何與環境互動，可以為你提供有關人們想法和感受的線索。
你可能認為你知道問題所在，但只有通過觀察才能了解消費者真正需要什么。
宜家派設計師到人們家中，觀測他們的互動行為來了解他們的需求。這將使設計者能夠推斷這些經歷的無形含義，以發現洞察。這些洞察提供創新解決方案的構思方向。而事實上，最好的解決方案來自于對人類行為的最佳洞察。
Good Kitchen 是一家為老年人和體弱者提供膳食的社會服務機構。起初的問題似乎是設計不當的膳食菜單。然后設計思維揭示了無數問題，所有問題都源于服務本身的性質。因此，經由對服務進行了徹底改革的之后，最終提高了客戶和員工的滿意度（利特卡，2014）
如何讓自己的產品在保證基本的可用性和易用性的同時，還能讓界面看起來柔和、更富有親和力？一個產品能留住用戶的雖然是內容本身的質量與吸引力，但一個小小的細節卻能夠阻止用戶的流失，成為內容轉化的最后一道防線，讓人眼前一亮，值得借鑒。
體驗目錄：
01. 【剪映】化繁為簡，突破性的C端深度編輯交互界面！
02.【剪映】組合操作，簡化界面跳轉的“批量編輯”
03.【必剪】軌道按鈕文案自適應滑動跟隨
04.【剪映/IOS】首頁新增（試試看）教程專區板塊，快速入門軟件
05.【剪映】“剪同款”功能，讓用戶快速出片
06.【剪映】上滑升起列表，讓用戶查看選擇更加直觀
07.【剪映】不同類型的模塊，分區展示
08.【剪映】選中特效后，自動播放（特效預覽效果）
09.【剪映】濾鏡功能“單行瀏覽”的原因以及必要性
產品體驗：
在此前，用戶想要對視頻進行剪輯操作，用戶大多都需要使用電腦的Ae、Pr等剪輯軟件，此類軟件體量大，操作門檻高，而且需要有電腦的存在，在人手一臺智能手機的今天，剪映等專業剪輯APP的出現，填補了用戶需要在手機上進行視頻剪輯的需求空白。
剪映的UI交互界面，既保留了Ae、Pr等專業剪輯軟件的界面特點（畫面軌道，音頻軌道），也大大的降低了剪輯軟件的操作門檻。
剪映的UI交互精明之處在于，它將專業剪輯軟件的復雜，位置隱蔽，但又常用的剪輯操作。「整合」成為底部一個個顯眼的功能圖標，并且用極為精簡易懂的文案，對功能進行了一個充分的描述。這一舉動，大大降低了用戶對剪輯軟件復雜功能的理解門檻，用一種整合式的思維，提供功能給用戶合成使用。這簡單易懂的交互體驗，也大大提高了用戶的黏度，忠誠度。讓小白用戶接觸了剪映后，再也無法回到Ae、Pr了。
交互思考：
在AI人工智能浪潮下，一切機器輔助，機器完成，需要人效的地方越來越少，在這大背景下，我們軟件的用戶只會變得越來越懶。
在新時代的背景下，我們UI、交互設計師，需要一種寶貴的「化繁為簡」能力，在不影響最終呈現效果的前提下，將一個軟件的交互體驗，文案、功能理解，以及功能使用操作做得越簡單，用戶的黏度，忠誠度就會越高。
一個工具類APP何為「好用」？也許就是像剪上映一樣，“化繁為簡，成效依然”
產品體驗：
在剪映中，識別字幕的交互邏輯，是自動識別所有視頻片段的語音，并且插入時間線中，識別字幕是【批量進入時間軸】的。所以想統一進行編輯，得一個個反復選中，然后逐一檢查，這種累人的交互體驗，讓用戶用了第一次就不會想用第二次。
剪映推出了「批量編輯」交互功能。
語音識別后，用戶點擊其中一個識別字幕，底部第一個功能就是「批量剪輯」功能，點擊后，可以一鍵編輯全體的識別字幕內容，減少了用戶調整識別字幕是的操作交互時間，增加了用戶操作效率
設計思考：
在產品的功能交互設計中，不妨使用剪映的「整合思維」，將一些重復性高，標簽統一，可統一操作的元素整合在一個功能中統一編輯，減少用戶的操作切換與跳轉，增加用戶的交互體驗與操作效率
產品體驗：
在必剪中隨著用戶左右移動，軌道按鈕的文案也會跟隨移動，讓用戶無論滑動到何處，什么位置，都能清晰的知道軌道的應用名稱，而不會出現混淆的情況。最大程度上，減輕了用戶的理解成本
設計思考：
當我們的圖標，功能板塊，或者某些重要信息，被用戶左右、上下滑動導致超出屏幕展示區域，用戶想回頭找到這些元素，就得重新滑動到對應位置，走一趟“回頭路操作” 。這對用戶來說其實是不便捷的，對交互設計來說，是不聰明的
我們可以利用【必剪】的文字跟隨交互，來舉一反三，讓一些重要的功能，信息區域，隨著用戶的滑動而自適應跟隨，最大限度地保證用戶他不錯過這些重要的功能、信息。
產品體驗：
在用戶（特別是大齡用戶），在初次使用【剪映】這種有一定入門難度的APP的時候，其實都是感到陌生的，新手指引雖然能一定程度解決此問題，但是新手引導只能在第一次打開APP時展示，而且新手指引有非常強的局限性，它只能告訴能這功能要怎么用，而無法告訴你這功能的使用場景。
所以在首頁中新增一個軟件使用技巧、教程專區，可以讓有需要的用戶第一時間觀看課程，入門軟件，而且課程用戶可反復觀看，不像新手指引般一次性展示。
這種交互體驗，大大減輕了用戶入門軟件的難度。
設計思考：
在我們設計的產品是一個工具型軟件，且有一定入門、使用難度的時候，不妨參考一下【剪映】的首頁+軟件使用教程 的交互思維。
用最低成本教會用戶如何使用這個軟件，而且展示位置是每次打開APP時都會看到的首頁，不用擔心一些粗心的用戶錯過。
產品體驗：
在剪映Tap欄中，有一個 “剪同款” 功能，選中對應的視頻模版后，填入自己相冊的素材，聽過自動剪輯，特效覆蓋，自動填充文字、BGM等一系列操作，支持用戶一鍵快速成片。
設計思考：
在流量為王的時代，內容輸出效率就代表了一切，剪映的 “剪同款” 功能，就是讓用戶的內容輸出效率大大提高，將輸出內容的過程簡單化，無腦化，用戶無需再去想用什么創意，視頻用什么BGM，以及視頻特效如何制作，這些都由APP的模版設計師幫你搞定，用戶需要做的，就是提供出自己的素材即可。
這給予了我們產品設計師一個啟發，在我們設計產品時，是否也能關注一下，急需內容輸出，但內容輸出困難的領域呢？也能把一些可自動化實現的步驟（如特效，BGM，字幕等等），交給系統，用戶只需參與拍攝或提供一小部分素材，即可生成一條優質的內容。解決用戶輸出內容痛點，從而留存用戶數量，從而實現用戶量變現。
產品體驗：
在剪映APP中，一些展示選擇列表的功能中，用戶上滑，列表都會隨之升起，讓用戶可以更直觀的查看選中其中內容，大大增加視覺傳達效率。
讓用戶不會被窗口高度限制，更高效地瀏覽、選用列表中的元素，增加產品功能成效效率
設計思考：
當我們的瀏覽窗口，因UI布局高度受限時，設計師可以通過【窗口隨著滑動響應移動】的交互方式，使得界面UI交互更多變幻，更為靈活。
產品體驗：
在剪輯APP中，難免會有許多種類不同，作用各樣的模塊，但是剪輯軌道UI展示的空間有限，如果沒有分區思維，那么整個剪輯軌道將會變得雜亂不堪，用戶用久了看到各種軌道模塊，也會疲勞過載
而剪映提供的UI解決方案也非常值得參考，將各種不同種類的效果軌道模塊，分區展示，在用戶點擊【特效】前，剪輯軌道不展示所有的【特效模塊】，在用戶點擊【特效】功能后，才展示對應的【特效模塊】軌道
設計思考：
在我們面對多種不同類型，但是作用相同對象的作用對象時，利用交互思維，在UI界面上進行視覺分類很重要，否則你整個APP的操作界面將會雜亂無章。
剪映給了我們一個很好的參考，就是將不同種類的對象 【分區展示，分區管理，分區操作】，最大限度的保證交互界面的簡潔舒適，且分類也能讓用戶更好的“點對點”進行操作，節省尋找對應操作對象的時間，所以，分類思維 是目前作為交互設計師的一項必不可少的技能了。
產品體驗：
在剪映APP中，當用戶選中特效，系統會自動播放【特效預覽效果】，且自動暫停（如特效時長3s，那么系統播放完3s特效效果后會自動暫停，不會繼續播放）
用戶可以直接了當地查看特效與畫面融合的效果，而不用選中后，再點擊播放預覽效果，覺得效果不滿意，還得反復切換。這種交互方式，大大節省了用戶的選擇模版時間，讓其成為（選擇+預覽=選中） 的高效交互流程
設計思考：
在我們設計一些需要實時預覽的功能時，我們不妨參考一下剪映的（選擇+預覽=選中）的高效交互流程，讓用戶免去反復操作預覽，重復選擇的無效交互，提升用戶在工具型APP的內容輸出效率
產品體驗：
當用戶在剪映中喚起濾鏡功能列表時，難免會感到驚訝，以及提出疑問：“為什么剪映要用單行瀏覽這種低效的交互方式？”
但是只要你仔細思考，并付出實踐你就會明白，剪映在濾鏡列表中，使用單行瀏覽的原因。
因為用戶對濾鏡的選擇，是出于此濾鏡的畫面效果，所以展示濾鏡效果時，濾鏡效果圖的比例大小是否清晰顯得尤為重要，所以，剪映犧牲了一些瀏覽效率，但是大大保證了用戶對此濾鏡的瀏覽精讀。
另外，濾鏡列表不同于特效列表，具有大量重復圖片填充。濾鏡幾乎每張填充的圖片都是有所不同的，所以使用多行列表式排列，在多種不同顏色，不同風格的圖片填充下，畫面會變得雜亂不堪
設計思考：
當我們遇到，填充圖片風格各異、或者注重展示畫面的列表設計時，可以參考剪映，犧牲一下瀏覽效率，保證瀏覽舒適度，精讀的設計方式，來防止我們設計的列表在視覺交互上顯得雜亂無章
作者：堅行 來源：站酷網
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
設計過程被描述為多個階段，每個階段都包含不同的活動來完成該階段，它沒有統一的標準流程，每個公司和設計師都有自己的流程版本。
盡管存在多個流程，但一般流程和階段類似于以下內容:
了解問題：初步了解問題。觀察、采訪和傾聽用戶。
定義問題：解釋和定義要解決的問題。
構思：通過頭腦風暴產生盡可能多的想法。
原型設計：構建原型并與其他人分享（ 再次縮小解決方案空間，為實驗階段 ）。
測試：測試可能的解決方案、實施、改進或重新設計。
傳統的問題解決采取有條不紊而又科學的形式。該過程從一個問題開始，定義要采取的步驟以及達到解決方案的工具或方法。
設計思維是一種創造性的策略，可以產生創造性的未來結果和/或創造性的問題解決方式，它應該被認為是一種以解決方案為中心的思維策略。
它通常被描述為一種創造性、主觀和感性的對許多大型組織的分析邏輯（ 布朗，2008 年 ），或作為分析和創造性推理模式的組合（ 鄧恩 & 馬丁，2006 年；利特卡，2015 年 ）。
設計思維來源于常規問題解決方法，常規問題解法是設計思維的基礎。
從解決問題到設計思維，Liedtka (2013)
結果發現，設計思維實際上也是一個解決問題的過程，而不僅僅是一個創新過程（ 利特卡，2013）
一個例子是，豐田采用設計思維從頭開始分析其西海岸的一個客戶聯絡中心，在重新設計過程中，組建了一個由一線呼叫代表、軟件工程師、業務主管和變革代理組成的跨職能團隊，這一舉動最終改變了客戶和員工的服務中心體驗。
我們每天都會遇到問題，但是當我們解決同樣的問題時，它們就成了例行公事（ 似乎已經忘記它們是問題了 ），我們甚至都沒有意識到正在解決這些問題。例如，我的辦公室在 30 分鐘路程之外，該怎么到達那里？開車、坐火車或巴士到目的地；除非車子輪胎被刺破，否則你就需要弄清楚如何到達辦公室。
1990 年代，IDEO 的 David Kelley 和 Tim Brown 與 Roger Martin 共同創造了特定術語：“設計思維”，并將多年來醞釀的方法和想法封裝成一個統一的概念。
設計思維是以人為中心、開放式、基于問題的方法論。這種方法最初是為了改變工程教育中的教學方式，而工程師處理和解決問題的方式有其設計思維的基礎。
設計思維一詞可以追溯到 1987 年 Peter Rowe 的著作：“設計思維。” 他描述工程師和建筑師處理問題的方法有很大不同。
90 年代初，認知科學家 Don Norman 加入 Apple 團隊，擔任他們的用戶體驗架構師，這使他成為第一個在職位中包含 UX 的人。他提出了“用戶體驗設計”這個術語，因為他想“涵蓋人們對系統體驗的所有方面，包括工業設計、圖形、界面、物理交互和手冊?！?從那時起，這些領域中的每一個都將用戶體驗，擴展到了自己的專業領域。
設計思維在解決“棘手問題”時特別有用。
棘手問題的特征
“棘手問題”一詞是由設計理論家 Horst Rittel 在 1972 年創造的，用來描述本質上非常模糊 \ 特別棘手的問題。棘手問題，有很多未知因素，沒有確定的解決方案。問題或解決方案可能與另一個棘手的問題有關，因此這是一個需要設計思維的持續過程。貧困、饑餓和氣候變化是一些現代的棘手問題。
設計主題的范圍是普遍的，因為 設計思維可以應用于人類經驗的任何領域。
它可以用于：
符號和視覺傳達：這包括平面設計的傳統工作，如排版和廣告、書籍和雜志制作、科學插圖、攝影、電影、電視和計算機顯示。
材料：這包括對日常用品的形式和視覺外觀的傳統關注 —— 服裝、家用物品、工具、儀器、機械和車輛。
人類活動和組織性服務：包括對物流的傳統管理關注，結合物質資源、工具和人類低效的序列和時間表，以達到特定的目標。
復雜的系統或環境：生活、工作、娛樂和學習。這包括系統工程、建筑和城市規劃的傳統關注點，或復雜整體部分的功能分析及其隨后在層次結構中的集成。
設計思維起源于設計師的培訓和專業實踐，但這些原則可以被每個人實踐并擴展到每個活動領域。（布朗，2013 年）
在企業中，設計過程可以為企業環境中的問題解決帶來創新思維。它還可以用于醫療保健，通過向護士、醫生和管理人員教授設計思維技術，我們可以激勵相關從業者貢獻新的想法。
不管是什么設計，理解和研究問題是必不可少的，因為我們能夠從其出發，從而進行以用戶為中心的設計。
設計思維的最早階段是搞懂你能帶來的情感價值。設計思維方法迫使你停留在提問與質疑階段，而不是準確定義出問題后進入下一階段。我們都有過快進入解決方案模式的傾向，所以設計思維方法迫使你真實地存在于這個不清楚、有時還非常混亂的時刻，從而使你對要解決的問題產生更好的理解。（利特克，2013）
傳統的問題解決涉及提出一個解決方案，但設計思維首先使我們發散，試圖為問題生成各種可能的替代解決方案。然后讓我們進行收斂性思維，縮小多種可能性，找到單一的最佳解決方案。
根據利特卡和奧美 (2011) 的說法，設計思維的全部意義在于學習一種新的、系統的解決問題的方法。正如我們思考創造力一樣，即使是設計思維也可以通過實踐來教授和改進。
設計過程從來都不是線性的，它由多次失敗和迭代組成（布朗，2018）。
首先，設計師試圖將問題與過去的類似案例聯系起來。如果這種方法不能提供任何解決方案，下一步就是使用知識和創造力作為一種實驗思維形式來產生新的想法。使用決策矩陣對這些想法進行評估，從而會產生被進一步分析和測試的解決方案。如果成功，它將被實施。如果不成功，則需要重新表述問題，并重復該過程。這是一個迭代過程，即循環方法。
這一持續不斷的重新再設計過程，源于和客戶親密接觸的洞察。
學習設計思維不僅僅意味著學習一套新的工具。它還意味著：學習收集和分析大量數據；學習挖掘對象可能的形態而不是自主認為他是什么；學習管理不確定感，以及與許多新的伙伴合作（ 利特卡和奧美，2011）。你可以進行的研究類型分為三類：生成性研究、評估性研究和驗證性研究。
一種常見的表述 —— 實際上是設計思維的另一種視角 —— 即設計師應該預料到會“很快失敗或經常失敗”（布朗，2009）。
當過程早期發生故障時，例如被拒絕的原型，實質上它可以為有效解決方案提供關鍵見解。這種觀點與傳統的先形成理論，再檢驗正誤的方式相矛盾。
Airbnb、Braun 和百事可樂等多元化公司都在 采用設計思維并將其作為核心戰略。例如，IBM 為全球旗下的 44 個設計工作室聘請了 1600 名設計師，并且正在培訓數以萬計的設計師員工建立深度創新能力 ( O'Keefe, 2017 )
設計思維為我們解決問題添加了以人為本的元素。當我們試圖通過牢記人們的想法來解決問題，并使用基于直接觀察乃至訪談的研究時，我們便會捕捉到與消費者需求一致的意外見解和創新。
它有助于將成功的產品更快地推向市場，最終節省企業資金。
IBM 的健康和人類服務組織的設計思維實踐，通過有效使用設計和設計思維幫助企業將缺陷數量減少了 50% 以上。這種更高效的工作流程導致計算出的 ROI 超過 300%。
由于復雜的問題從來不能被所有人完全理解，因此在嘗試設計解決方案時，處理歧義和多個并發的思路方向的能力是至關重要的素質。
設計思維通過綜合和歸納思維，幫助實現質的飛躍。它允許通過解構來測試約束，并允許通過多樣性思維和批評思維，來擁抱和探索歧義。
消費者通常不知道他們有什么問題需要解決，或者他們無法用語言表達出來。只有經過仔細觀察，設計者才能根據真實消費者行為中看到的東西來識別問題，而不是簡單地根據對消費者的想法來確定問題。這有助于定義模棱兩可的問題，并找到解決方案。
該方法鼓勵“跳出框架思考”（“瘋狂的想法”）；它蔑視顯而易見的事物并采用更具實驗性的方法。
在早期的流程階段鼓勵大膽的想法，以產生創造性的解決方案。使用它是為了讓設計師可以嘗試開發新的不受約束的思維方式，或對常見問題的創新解覺方法。
根據大多數設計學院的說法，具備特定特質的人能夠更好地發揮設計思維的作用。
同理心：從多個角度想象世界 —— 同事、甲方客戶、實際使用者和消費者的角度。要成為更好的同理心，必須傾聽和觀察他人的行為，注意并獲得洞察力。
綜合思維：重要的是不僅要有分析能力，而且要能夠提出新穎的解決方案，還要憑直覺。
樂觀：除非你相信有解決方案，否則在遇到挑戰且解決方案遇到瓶頸時，你可能會放棄。
實驗主義：重大創新并非來自漸進式調整。設計思想家以創造性的方式提出問題并探索限制因素，并朝著全新的方向發展。
協作：產品、服務和體驗日益復雜，因此必須擁有一支具有不同背景的團隊，以幫助從多個角度看待問題。
當我們想到一個問題的多種解決方案時，對我們解決問題會非常有幫助，因此“功能固定性”阻止了我們以新穎的方式使用舊工具解決新問題。想要擺脫功能固定，首先是要讓人們可以使用“改造后的衣架進入上鎖的汽車”。這也是盜賊第一次可以用信用卡撬開簡單的彈簧門鎖。
為了幫助設計師利用文科和技術理論，整合多個領域的知識以找到創新的解決方案，我們采用設計思維來獲得洞察力。該方法側重于可視化和操作，因而幫助我們更容易地了解實際解法，而不僅僅是理論模型。
第一批美國公司在 2000 年代初期開始實施設計思維，這一概念引起了德國投資者 Hasso Plattner 的興趣，他于 2006 年資助創建了兩所設計學校（d.schools），其中一所位于波茨坦大學（德國），另一所位于美國斯坦福大學。由于兩所學校都成功地為大型組織提供了高管設計思維培訓，因此該研究重點關注這些國家，以尋找早期實施者。
設計思維通常涉及希望參與整個設計和開發過程的龐大利益相關者團隊。
觀點、才能和經驗的多樣性被認為是注入新思維的部分重要來源。多樣性確保通過融合不同的觀點、技能和知識來產生創意（卡振思，2018 年；薩梅和德拉赫-扎哈維，2013 年）。設計思維的協作方法和工具可幫助團隊以積極的方式利用他們的差異。
決策是平等的，因為每個成員的意見都被征求和使用（卡爾格倫等，2016）。
當 IDEO 去 Apple 展示他們的鼠標時，它不是什么花哨的設備，而是一個用膠帶粘起來的原型。
低保真原型制作起來既快速又便宜（ 想想幾分鐘和幾分錢 ），但可以從用戶和同事那里得到有用的反饋，這符合快速驗證、廉價試錯的原則。為每個想法投入盡可能少的資源意味著前期投入的時間和金錢更少。此外，將多個原型帶到現場進行測試為用戶提供了比較的基礎參考，同時也有助于揭示某些需求。
為了創新，設計思維意識到認知和行動對創新過程很重要。認知包括接受度、樂觀和創造性的信心（ 凱莉 & 凱莉，2013；鄭，2018），而行動包括快速原型設計、旅程地圖和假設浮現（ 假設浮現：assumption surfacing，這是一種評估技術，涉及寫出潛在的假設和反假設。）（ 卡爾格倫等，2016；利特卡，2015）
如果領導層不歡迎風險、模棱兩可和風格的改變，實施起來就會變得更加困難。它會被管理者“質疑”其具體指標
沃爾特斯 ( 2011 ) 聲稱，由于設計思維的模糊性，它與組織文化相沖突。
據受訪者稱，在日常業務中使用設計思維之所以不會是最優選項， 因為它是資源密集型的，增加了工作量。（ 麗莎等，2016）
在醫療保健等規避風險的行業和公司中，“經常和早點失敗”的方法被認為是非常困難的。
許多設計師反對設計思維這一觀點，設計思維不僅關乎一個過程，而且關乎改變思維過程并提高人們可能提出的解決方案的創造力。
“設計思維”的推廣已被大型全球公司用來增加業務。不過，在更廣泛的設計世界中，我甚至會說“設計思維”的過度宣傳導致了所提供設計質量的下降。—— Yasushi Kusume
弗吉尼亞理工大學科學、技術和社會助理教授 Lee Vinsel 在《設計思維運動是荒謬的》中寫道，“歸根結底，設計思維與設計無關。這與文科無關。這與任何有意義的創新無關。如果這意味著重大的社會變革，那肯定不是關于“社會創新”。這是關于商業化的。”
觀察人們的行為以及他們如何與環境互動，可以為你提供有關人們想法和感受的線索。
你可能認為你知道問題所在，但只有通過觀察才能了解消費者真正需要什么。
宜家派設計師到人們家中，觀測他們的互動行為來了解他們的需求。這將使設計者能夠推斷這些經歷的無形含義，以發現洞察。這些洞察提供創新解決方案的構思方向。而事實上，最好的解決方案來自于對人類行為的最佳洞察。
Good Kitchen 是一家為老年人和體弱者提供膳食的社會服務機構。起初的問題似乎是設計不當的膳食菜單。然后設計思維揭示了無數問題，所有問題都源于服務本身的性質。因此，經由對服務進行了徹底改革的之后，最終提高了客戶和員工的滿意度（利特卡，2014）
作者：用盡晴天來源：站酷網
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
藍藍設計的小編 http://www.syprn.cn