你知道嗎？視力，聽力和行動能力完全健康的人，可以輕松地讀寫，可以有效執行多任務，并且始終可以正常工作的人約占總人口的50％？其余的人都是戴著眼鏡或有色盲，手腕或耳朵受傷，生活在嘈雜的環境中或網絡信號質量差，忙碌或忙碌中，閱讀障礙或有注意力障礙等。

這意味著大約一半的用戶可能很難使用我們的產品或瀏覽我們的網站。因此，我們可能錯過了提高用戶滿意度并擴大受眾范圍的機會。

不過在設計階段實施一些簡單的原則就可以改善交互和整體用戶體驗，極限設計可以為所有人帶來價值，我們稱之為“包容性設計”。

什么是包容性設計？包容性設計考慮了盡可能多的人的需求和能力，而不僅僅是針對殘疾人。它認識到我們的需求會隨著時間和環境的變化而變化，因此它會預測錯誤，掙扎和不同的交互方式。它的目的是在問題發生之前解決問題，提高標準并改變良好產品設計的標準。

包容的用戶界面是善解人意，有意識且可訪問的。年齡，性別，教育程度，財富和能力等不同特征，在不同環境中生活或工作，獲得技術水平不同的不同人群可以舒適地使用它。

我們將使用POUR作為在用戶與界面之間創建簡單，輕松，快速交互的參考。

POUR代表

• 可以理解：數字內容可以輕松地以不同方式進行解釋或處理嗎？

• 可操作：數字產品能否輕松自如地進行功能和控制？

• 可以理解：用戶可以理解界面的功能和內部信息嗎？

• 健壯性：數字產品是否與不同的輔助技術和設備兼容？

設計師如何提供幫助

作為設計師，我們當然不能控制以上所有要求都能做到。但是我們應該承認，人們遇到的許多可訪問性問題是由設計階段未做過的決定引起的。因此，設計師有很多機會可以有所作為。僅通過做出更明智的設計決策，我們就可以影響（改進或協助）四種經驗。

• 視覺體驗：這包括形狀，顏色，對比，文本樣式-產品界面的所有圖形元素。

• 聽覺體驗：這是指與產品互動時產生的聲音，音量和清晰度。

• 認知經驗：這描述了用戶花費在解釋界面上的時間，以及使用界面需要多少注意力和精力。

• 運動體驗：這包括執行任務或與產品交互所需的所有動作和動作。

通常，可訪問性被認為是對創造力的挑戰；但是，如果我們認為這是一個創造性的挑戰，那么我們會開辟全新的可能性領域。真正好的可訪問性的訣竅不是在功能或功能上進行折衷，也不是在美學上取舍，而是使功能和創意體驗也可以訪問。

改善視覺體驗

1.顏色

對比度對比度是亮度或顏色的差異，使物體從周圍環境中脫穎而出，并可能對清晰度產生顯著影響。高對比度使視覺元素從背景中脫穎而出，更加引人注目。

專家提示：純粹的＃000000黑白色會給眼睛帶來強烈的對比度，甚至會影響閱讀障礙者。這就是為什么我們傾向于避免使用它，而是選擇深灰色的原因。

亮度

亮度描述從光源發出的照明水平或從表面反射的光量。明亮的顏色反射更多的光線，并會干擾我們閱讀和處理信息的能力。

避免在背景或較大表面上使用鮮艷的顏色。請勿在文本上或文本附近使用鮮艷的顏色，以免干擾文本。如果品牌要求特定的高亮度顏色，請嘗試建議使用飽和或較深的顏色。如果你絕對必須使用明亮的顏色，則應將其用于突出顯示動作的方法最小化，并將其與較深的色相搭配以達到平衡和高對比度。

專家提示：任何含有超過50％黃色的顏色都會自然反射更多的光。這意味著黃色，橙色，綠色和藍綠色是高風險顏色，應謹慎使用。

色盲

色盲是無法區分特定顏色（通常是紅色和綠色，偶爾是藍色）的一種，它比你想象的要常見。

專家提示：不要僅僅依靠顏色；顏色不應該是傳達重要信息的唯一方法。您可以執行以下操作：

• 使用下劃線表示鏈接和斜體，或使用粗體突出顯示文本

• 將圖標與文本一起使用可傳達成功或失敗的信息

• 使用紋理或圖案作為圖表

• 為按鈕或明顯的通知使用清晰的視覺樣式，針對焦點或活動狀態使用不同的字體樣式

2.版式

字體選擇

通信是每個數字產品的首要目標，可以借助印刷術及其正確應用來實現。內容應清晰易讀，這意味著易于識別和解釋，輕松閱讀和處理。

簡潔明了對于快速閱讀和解釋至關重要，請避免使用復雜的字體，因為它們只會增加視覺干擾。選擇正確的字體家族，針對那些具有清晰定義和獨特形狀的字符，因為視力障礙或閱讀障礙的人可能會因某些字符或其組合而感到困惑。

字體樣式

字體樣式還會影響弱視或閱讀障礙者的閱讀性能。我們應該注意并謹慎使用字體樣式（如斜體，下劃線和大寫）的頻率和位置。

根據“英國閱讀障礙協會”的規定，應避免使用斜體，特別是對于較大的副本塊或較小的字體。這是因為它們使字母傾斜，顯得更加尖銳，因此更難以閱讀。

正文也應避免使用帶下劃線的字體樣式。給長的段落加下劃線會增加視覺噪音，從而降低閱讀性能，而給短的句子或單詞加下劃線會與活動鏈接相關聯，并可能引起混亂。粗體是添加對比度和強調的更好選擇。

盡管沒有確鑿的研究，但有一些證據支持也應避免主要針對正文使用大寫字母。似乎所有大寫字母的統一外觀會降低單詞形狀的對比度，從而使掃描變得不那么容易。此外，大寫看起來有點緊張，可能感覺好像有人在向您大喊大叫。

專家提示：平衡是關鍵。謹慎使用每個樣式并賦予其含義甚至可以提高可讀性。

字體大小

您知道絕大多數人戴眼鏡或隱形眼鏡嗎？實際上，十分之六以上！此外，約有62％的人通過手機訪問互聯網，這還不包括應用程序的使用情況。當視力不佳的人在旅途中在小屏幕上使用技術時，可能會出什么問題？

使用較大的字體。通常，16px被認為是最具有包容性的，但是請注意，字體可以以不同的比例站立，并且字體的大小可以相差很大。切勿低于14px，事實上，大多數現代網站的正文都使用18px字體，而標簽，標題或工具提示僅使用14px或16px。

專家提示：此外，避免使用薄而輕的字體，因為對于較小的字體或在明亮的光線下可能難以閱讀。

段落格式

幫助人們輕松瀏覽內容應該是我們的首要目標，因為只有20％的人可以閱讀內容，其中55％的人可以快速瀏覽內容。我們的工作是通過使用舒適的段落格式來盡可能地支持人們。

研究表明，用于支持可讀性的平均在線行長（包括空格）約為70個字符。標題，字幕和項目符號點將有助于掃描，而左段對齊將使文本更易于閱讀。

較長的文字墻使人們參與的機會大大減少。成功的段落長度不超過5到6個句子。

空格將幫助患有認知和注意力障礙的人，保持閱讀重點。對于其余的內容，它只會使閱讀更加愉快和流暢。根據WCAG，最佳做法是將行高（行之間的間距）設置為相對于該類型大小的1.5相對值。段落之間的間距也至少應比行間距大1.5倍，因此必須明確定義。

提示：行距不應超過2.0，因為它可能產生相反的效果并分散讀者注意力。

復制版面

作為設計師，我們經常陷入過度設計布局的陷阱，以使它們看起來引人注目或獨特，從而將可用性放在一邊。這就是為什么我們看到諸如文本的一部分之類的趨勢在彩色或帶紋理的背景上重疊圖像或文本的趨勢。只要我們知道如何以及何時使用它們，我們仍然可以享受其中的一些趨勢。

當在彩色或帶紋理的背景上使用文本時，我們需要確保它們之間的色彩對比度足夠高，同時在整個重疊區域都保持一致-意味著在副本下沒有較淺和較暗的區域，也沒有過多的細節干擾。較大的字體大小和較重的字體粗細也會提高對比度。

專家提示：一如既往地“了解您的用戶”。時髦的布局并不適合所有人。

改善聽覺體驗

您可能在想，視覺設計如何影響聽覺體驗？因此，想象一下您正在與一個俱樂部的朋友交談。我敢打賭，您只能聽見她說的話的一半，但是您可以通過看著她的嘴唇移動，肢體語言和面部表情來保持對話的進行。由于視覺效果的支持增強了模棱兩可的聲音，因此您最終可以理解它們。

在用戶界面中，聲音對于不同的人可能意味著各種各樣的事情。它們也很容易在嘈雜的背景中丟失，因此最好以視覺提示來支持它們。

我們的目標應該是提供聽覺和視覺提示的反饋，支持錯誤，通知以及與相關和鄰近圖形元素的重大交互。我們還必須確保視覺線索保持足夠長的活動時間，以使人們能夠看到和閱讀，同時又不隱藏任何重要的內容。

一個好的做法-不限于支持聲音輔助技術，是在UI元素中添加描述性標簽，并在圖像中添加標題，以便于在屏幕閱讀器中輕松導航。為視頻使用字幕是改善聽力體驗的另一種方法，對非母語人士也有幫助。

最后，我們不應該忽略聲音是問題的情況，這就是為什么我們需要視覺替代的原因。有些人可能對特定的聲音敏感，或者處于聲音可能引起干擾的情況下。然后，這是一個好習慣，讓人們可以選擇關閉聲音而不必調低揚聲器音量，從而使此功能清晰可見。

專家提示：避免使用不必要的自動播放聲音和音樂，因為它們會打擾甚至驚嚇別人。

改善認知體驗

1.知覺

視覺清晰度

清晰度是用戶界面中的第一個也是最重要的屬性。成功的用戶界面使用戶能夠識別和解釋他們所看到的內容，了解產品的價值和所要采取的行動，預測使用產品時會發生什么以及與產品成功交互。

• 形式跟隨功能是一項原則，指出對象應反映其預期的功能或目的。為了在用戶界面中實現此目的，我們使用了附加功能，附加到UI的視覺提示/屬性，以顯示用戶與其交互的可能方式。

  支付能力取決于用戶的身體能力，目標，過去的經驗，當然還取決于他們認為可能的情況。按鈕應該看起來像按鈕，就像鏈接，菜單標簽，表單等一樣。使用清晰的符號/功能可以幫助用戶識別或解釋界面，并輕松進行交互。

• 
  

• 在用戶界面中使用熟悉的和已建立的設計解決方案將幫助用戶預測結果并自信地采取行動。因此，使用設計模式來解決常見問題是一個好習慣，該設計模式是經過測試，優化和可重用的解決方案。

  設計模式建立在過去的經驗和可能性的基礎上，并附加到特定的目標上。為避免眼前的問題，選擇正確的設計模式應該是我們避免混淆或壓力大的交互的第一要務。

• 
  

• 建立一致的視覺語言是獲得更全面界面的關鍵。具有相同功能和/或重要性的重復交互式UI組件應始終以相同的方式外觀和操作。因此，導航，按鈕，鏈接，標簽，錯誤等元素應在整個產品中具有一致的樣式，顏色和動畫。
  值得注意的是，一致的視覺語言不僅可以通過附加含義和減少視覺噪音來幫助互動，而且還可以增強產品的個性，提升品牌知名度，建立情感聯系和信任。

  
  

層次結構

視覺層次結構是指圖形元素的視覺重量及其排列方式，使用戶可以輕松地探索和發現內容。通過為頁面元素分配不同的視覺權重，我們可以對內容進行分組并影響人們感知信息和瀏覽產品的順序。

• 顏色是第一大關注焦點。彩色元素將脫穎而出，因此在層次結構中位于較高位置。明亮的顏色會更加突出，因此，考慮到這一點，我們應該仔細安排和分配顏色，以將眼睛引導至正確的位置。

• 視覺元素的大小（例如印刷，按鈕，圖標和圖像）在確定重要性方面幾乎與顏色一樣強大。較大的圖形吸引了用戶的注意，并且顯得很重要。對于排版，明顯不同的尺寸縮放比例可以幫助建立內容層次結構，并使內容掃描變得輕松而輕松。

• 輔助視覺層次結構的另一種方法是通過設計一致性和例外。一致對齊，外觀相似，重復或相鄰的元素給人的印象是它們是相關且同等重要的，而偏離元素以及不尋常的形狀和有趣的紋理或樣式將更加顯著。太多的設計例外會引起人們的關注，并會增加復雜性，因此，謹慎使用它們是一個好習慣。

專家提示：研究格式塔原理及其在UI設計中的應用將有助于我們理解視覺感知和分組以改善視覺層次。

色彩應用

顏色不應該是傳達信息或增加意義的唯一方法，但它仍然有用且很有影響力，因此不應將其視為裝飾性元素。顏色具有含義，盡管沒有硬性規定，但是太多的顏色會導致信息疲勞，并且不一致地使用顏色會導致混亂。

• 避免使用太多顏色。通常，三種顏色足以描述頁面的所有重要視覺元素。60–30–10規則可以幫助我們建立完美的和諧。其中60％的彩色項目由原色組成，以創建統一的產品主題，具有30％的輔助顏色增強含義和/或創建引人注目的效果，以及10％的強調色，以補充和輔助主顏色和輔助顏色。

• 此外，我們需要確保為消息使用正確的色調。除了美學，顏色還可以創造情感和無意識的聯系。特定陰影的含義會因我們所處的文化和環境而異，并且顏色通常具有不同的含義-在西方世界，錯誤是紅色，成功是綠色，信息是藍色等。

專家提示：可以將我們自己的含義分配給顏色，只要它們不與既定規范重疊，并且我們在整個產品中使它們保持一致。

符號學

符號學是對符號/圖標及其含義的研究。它著重于人們如何形成和解釋這些含義，這取決于人們所看到的上下文。在用戶界面中，圖標是可視語言的一部分，用于表示功能，功能或內容。符號學可以幫助我們設計立即被識別和理解的圖像。

• 盡管這些年來，我們已經開發出具有大多數人接受和理解的含義的圖標。用戶還習慣于使用特定于平臺的圖標，并且可以輕松地進行解釋。在可能的情況下，最好遵循這些既定的解決方案，以獲得熟悉和流暢的體驗。

• 當然，在某些情況下，我們需要設計具有特定功能的自定義產品特定圖標。這些圖標必須盡可能簡單明了，以確保清晰度。它們還應該具有一致的視覺樣式，以傳達其功能或與其他非功能性元素區分開。

• 最后，我們不應該僅僅依靠視覺隱喻來傳達含義，因為某些關聯可能并不那么明顯。如果圖標需要標題來描述其含義，則可能不合適。如果不確定，請與實際用戶一起測試我們的設計會有所幫助。

專家提示：圖標不僅易于解釋，而且還可以具有多種含義。因此，將標記與功能圖標結合使用是一種很好的做法。

2.互動

記憶

許多心理學實驗表明，健康個體的處理能力非常有限。在我們的短期記憶中，我們大多數人平均可以保留7項，具體取決于個人。我們的大腦并未針對數字產品所需的抽象思維和數據記憶進行優化，因此良好的設計會有所作為。

• 減少頁面上可用選項和信息的數量，以及使用清晰的標題，面包屑和“后退”選項來訪問以前的內容，將幫助用戶記住或提醒自己他們在哪里，打算做什么或要做什么。是必需的。
  

• 交互元素上或附近的清晰可見副本將幫助用戶在整個交互過程中保持知情和自信。例如，表單標簽應始終可見，動作不應隱藏在懸停后面，按鈕應提供目標位置的上下文，并且各節的標題應明確。

  
  

專家提示：通過稱為“塊”的過程可以增加我們的短期記憶和處理能力。這是我們在視覺上將項目分組以形成更容易記住的較大項目的地方。

改善運動體驗

菲茨法

菲茨法則為人類的運動和互動提供了一個模型。它指出，將指針（光標或手指）快速移動到目標區域所需的時間是其距目標的距離除以目標大小的函數。意味著較小的目標會增加互動時間。

根據Fitts法則，我們旨在減小用戶與目標之間的距離，同時增加其尺寸。該法律主要適用于導航和按鈕。菜單和子菜單元素應在附近，而按鈕，鏈接和分頁應在較大區域上單擊，以實現更快更準確的交互。

專家提示：根據可用性最佳實踐，按鈕/鏈接的最小尺寸為42x42像素（重擊尺寸）。

獎勵：提高績效

到目前為止，我們已經建立了包容性設計，旨在讓盡可能多的人訪問并實現他們的目標或解決他們的問題，盡管他們有自己的情況。我們可能很幸運，可以使用進的設備或超高速互聯網，但是當我們的信號不太好時，我們會感到掙扎。對于大多數人來說，老式設備和糟糕的互聯網已成為常態，因此，為獲得最佳性能而設計是一件大事。

• 極簡主義是關鍵。如果我們打算創造一種可以被盡可能多的人使用的產品，那么我們就應該擺脫不必要的一切。圖形，圖像或動畫是有價值的，還是增加了視覺噪音和加載時間？如果是的話，那就必須走了。

• 圖像優化是幫助提高數字產品性能的另一個標準。通過將圖像調整為合適的大小，然后通過諸如ImageOptim和TinyPNG之類的工具運行它們，可以節省寶貴的千字節和實際的加載時間。

• 開發人員通常使用的一種提高性能的技術是“延遲加載”模式，其中圖像的加載是異步的，并延遲到需要時才加載。例如，如果您快速滾動到頁面底部，則在網站完全加載之前，您可能會看到類似網站線框的內容。“漸進圖像加載”的一種替代方法是“漸進圖像加載”，其中我們顯示一個空的占位符框<div>，然后用小的低質量模糊圖像填充它，最后用所需的高質量圖像替換它。

在每個數字產品中都遵循上述最佳實踐，這是高可訪問性標準的良好起點。但是總會有改進的余地，并且更好地了解我們的用戶可以揭示提高無障礙標準的新方法。因此，有必要花費一些時間和金錢來更多地了解我們的不同類型的用戶，因為他們可以教會我們很多有關使包容性體驗成為現實的知識。

了解我們的用戶將幫助我們練習同理心?！百x權”不是偶然的設計思維過程的第一步。在移情階段，我們的目標是加深對我們正在設計的人員及其獨特視角的了解，因此我們可以在進行任何設計決策時與他們認同并代表他們。

zhuanz

新擬物化設計只是一種風格嗎？

最近正火的新擬物化風格（Neumorphism）在 2019 年底，設計師 Alexander Plyuto 所提出的「Skeuomorph Mobile Banking」作品中亮相。之后不僅被選為 2020 年界面趨勢，又稱為 soft UI。但這種風格在真實世界落地時，可視性上受到許多爭議。

確實，新擬物化風格它算是一種風格，但又不是只有視覺上的風格這么簡單，它延伸出來的議題，其實是扁平化跟擬物化之間的戰爭。

擬物化與扁平化的瑜亮情結

擬物化是 Apple 在早期設計中大量使用在界面上呈現對象屬性、材質的方式。然而在 2013 年 ios7 發布時，Apple 開始為了畫面簡潔大量將界面元素扁平化，緊接著 Google 在 2015 年發布了 Material Design，宣示扁平化在 UI 設計中扮演著主導趨勢的角色。2020 年真是百家爭鳴的一年，首先是 BMW 發表的扁平化新 logo，接著是這一波新擬物化的反擊。究竟代表新擬物化可能奪回界面風格主導權？或僅是 2020 年曇花一現的視覺風格呢？

扁平化VS 擬物化，我們可以思考的五件事

我認為新擬物化的概念其實是融合扁平化與擬物化的集大成，它建立在扁平化風格之上，又將組件帶入了擬物化的元素，提高用戶的判斷力。不過在糾結于扁平化與擬物化哪個比較好時，有五個議題是可以讓 UI、UX 設計師去思考的。

1. 多數年長者對于扁平化界面提供的視覺元素暗示無法理解。

大家身邊一定都有那種已經把 Line 操作得滾瓜爛熟，但是每次要用 Line 加好友時，還是不知道怎么操作的長輩。最早期當人類還沒進入屏幕時代前，我們所使用的界面大多是實體產品上的控制界面，而這些界面上的每個開關、按鈕，都只有一個輸入源，對應到一個功能（一對一），我們因此就這樣與產品進行簡單的交互動作。然而在屏幕上這個簡單的交互模式被改變了，像是用鍵盤跟鼠標可以輔助我們，在系統中進行抽象與復雜的無限多任務（一對多）。

△ 你偏好用哪個微波爐加熱咖啡呢？Image credit:Bence Mózer

讓我們再來看看對長輩最重要的 Line 加好友功能，我們先不論這個功能在整個 APP 中被埋得多深，因為找到加好友的入口真的對長輩來說是看緣分～

在我引導長輩找出二維碼畫面的經驗中，發現他們都是用死記的方式，把下一步要按哪個鍵、在畫面的哪一個角落，記下來。但由于加好友功能并不是每天都會操作的，因此在學習上的效果，就像是高中時沒有把課文理解、吸收就硬死背下來一樣困難。

我們來看看「顯示行動條碼」在掃描二維碼畫面中，是否真的具有可以被點選的暗示。在掃描畫面背景單純的時候（如下圖情況 1），「顯示行動條碼」的 button 底色是有透明度的黑、扁平化后沒有陰影提供可以按的暗示，不過因為有大圓角的造型，勉強還是可以誘使人點點看；但一般情況下，掃面畫面背景不會那么理想的無其他干擾（如下圖情況2），button 原本的透明黑完全融入了后面的背景，這時候只剩下「顯示行動條碼」的文字，已經不具備可以被點選的提示。

△ 情況 2 中，顯示行動條碼的 button 看起來可以按嗎？

掃描畫面中的外框有一定的透明度，在可操作暗示（affordance）上已經不具有實體的特征，如果又放上有透明度的 button 在上面，讓人充滿不確定性，年長者無法將這樣的情況與現實生活中的經驗聯想在一起。

2.以顏色做區別真的是最好的方法嗎？

你知道同一個顏色，每個人看起來會不一樣嗎？而不同顏色在不同環境下，卻又能看起來像同一個顏色嗎？

不同意新擬物化設計的人中，有人主張運用顏色的引導用戶操作界面的色彩元素不能從界面設計中抽離。但事實上，不同年齡、性別，視覺錐細胞中的活躍程度不一樣。同一個顏色，不同人看，明度跟彩度會有差異。基于種種現實，由色彩的引導是好還是壞呢？

例子1：關于人類的視覺錐細胞

同一個顏色，不同人居然會看成不同顏色？

為什么阿嬤喜歡買大紅大紫的衣服？這個偏好除了受到個人喜好影響外，也關系到阿嬤視覺錐細胞的活躍度。老年人在上了年紀后，部分視覺錐細胞開始退化，因此對于藍色、綠色這類冷色系的顏色，老年人會開始接受不到這個區段的光帶來的刺激。因為視覺錐細胞對冷色系的刺激降低，導致阿嬤在菜市場逛街時會被偏暖色系的物品吸引。所以會買熱情系服飾不是阿嬤本人的意圖，而是老化的錐細胞在作祟。

例子2：關于學習觀察顏色這件事

不同顏色居然看成同一個顏色？

不同顏色卻看起來很像，有可能是光線造成，也有可能是使用者必須學習去觀察才知道的。日本的 JR 跟 Metro 系統，有著完整且細膩的視覺辨識系統。設計師理想中的情況是，我們將每條路線定義成不同顏色，可以讓使用者更容易學習辨識路線。

但實地走訪過東京的地下鐵跟 JR，常常會發現跟錯指示，才發現是潛意識辨認錯文字或是顏色。我自己遇到過的經驗是，在新宿站想要找都營大江戶線時，因為在改札口看到了同樣粉紅色的標志，原本已經要嗶卡進去，才發現那是京王新線的 IC 入口標志。

△ 新宿駛的改札口前，有兩個同為粉紅色的引導指標

所以說，高齡者或是天生視覺錐細胞有缺陷的人對于顏色無法清楚辨認外；大部分人可以借由學習來增強色彩辨識，除了可以對相似顏色進行更細節的判別外，也可以學著辨認不同光線（暖光、冷光）下造成的色彩差異。

但是，當我們在設計中，迫使用戶學習、習慣我們制定顏色的意義?？赡軙谛率?onboarding 時造成適應上的負擔，也有可能讓他們在使用別的系統造成錯亂。

3. 對于顏色被定義的意義各個文化、區域、種族都相同嗎？

在不同文化之下，對于色彩的觀察與運用也不一樣，舉個大家可能都有發現的例子，當你在不同城市旅游的時候，有沒有發現不同城市的優先座顏色不一樣？你能猜得出來，哪一個是臺北捷運上優先座的顏色嗎？

△ Image credit:wikipedia.org

當顏色在不同約定成俗下，有不一樣的意義，又剛好缺乏文字或圖像引導的時候，可能會讓使用者解讀成不同的意義。例如：紅色具有熱情、喜氣、帶來財運的意涵，但同時又具有危險的警示意義。

當設計師覺得紅色可以引起使用者的注意，而把 button 設計為紅色時，卻可能讓沒看清楚文字的用戶，認為按下這個 button 是危險的舉動。

△ Image credit:photoAC

4. 光與影（明亮面跟陰暗面）給使用者的可操作暗示（affordance）一樣嗎？

新擬物化設計中假設了人在使用界面時，會運用與生俱來能判斷光影效果的能力。這是真的嗎？讓我們來做個小實驗：

為什么在臺北車大廳席地而坐的人，會選擇坐在黑色的棋盤格上呢？如果根據人類從大自然中所得到的可操作暗示來說，有陰影的地方可以提供人類休憩的功能，例如樹陰下的陰影處。

△ Image credit:中央社、wikipedia.org

如果這樣說得通的話，代表光亮的區域對人來說是可以行走、活動的地方；而陰影處則是休息與暫停處。

根據以上的推測，我們做個小實驗，把車站中的 2 個不同區域的地面上分別涂上白色與黑色，來讓受測者選出哪些區域可以暫停，哪些區域可以走動：

問題Ａ：假設你要在車站的大廳等朋友，你會選擇站在哪里等他呢？

假設：受測者會選 2，因黑色區域（影子）讓人覺得可以暫停、休憩。

結果：符合假設

1：白色柱子前的白地面 32.5％； 2：白色柱子前的黑地面 67.5％

問題Ｂ：哪一邊的樓梯是往上的方向呢？

假設：大家會選 1，因為黑色區域（影子）讓人覺得可以踩上去。

結果：符合假設

1：白色立面＋黑色地面 61.3％；2：黑色立面＋白色地面 37.8％

由實驗Ａ、Ｂ可得證，雖然實驗結果符合先前假設，大多數的受測者可從陰影判斷要走哪條路，但還是有不少（30%以上）的受測者不認同。所以在用使用光亮陰影的設計暗示時，還是會遇到使用者感知的不同的問題。

5. 深度認知不同是導致判斷物體距離的能力受影響，也就是所謂的視差。

新擬物化設計中，將界面組件以類 3D 的方式呈現，使用戶在操作界面時必須去感知界面組件的遠近以判斷重要性，而在深度認知上有障礙的用戶此時就會受到挑戰。用戶可能會遇到，不知道哪個組件才是浮在最上面、最重要的；若界面中的組件有三種以上的陰影深淺，會讓用戶在判斷時要更花腦力判定物件在立體空間中的深淺。

總結

新擬物化風格中的光影表現提供了使用者人類最原始的操作意圖：可操作暗示，是一個好的出發點，然而必須針對 APP 性質的不同而有所改良。在設計較走生活風格理念，而操作界面不復雜的 APP 時，非常適合用新擬物化風格來詮釋：例如電子書服務、音樂軟件；但在設計功能導向，且有大量信息化圖表的界面，例如：移動網銀，還是需要以扁平化的界面為主要信息架構，新擬物風格可能會是極少量界面元素中，拿來呈現生活中真實物的質感（例如：用戶的信用卡）、或是作為亮點（例如：優惠卡片）的呈現方式，此類型 APP 中最重要的卡片與圖表對于此種風格，一定要謹慎使用，必定三思三思再三思。

文章來源：優設    作者：Muse Chang

今天和大家聊一個很多朋友常年卡在 P5/P6 需要關心的命題——如何從業務出發打造具有商業價值還能兼顧用戶體驗的設計，此篇不談理論，就通過 4 個經典的重量級產品案例就給大家安排明白啥是「一拳超人」式體驗設計——就一個字「強」。

滴滴出行-xpanel

滴滴出行應該屬于大家的高頻使用 app，但是使用的功能一般還是集中在叫車流程，所以大家可能不太會關注到 CDX 設計團隊一個非常核心的設計成果——xpanel。

簡單來說 xpanel 就是一個附著于第一信息架構層級上，垂直 Y 軸且支持 X 軸拓展滑動的 Feed 卡片位。內容上分為「消息卡片」「主體卡片」「拓展卡片」三個維度，首屏保障除了「消息」與「主體」外三分之一「拓展卡片1」的露出。

但在簡單的交互背后蘊藏的是基于業務的 UGD（用戶增長設計）設計思考，這里引用 2018IXDC 會上滴滴主講人的原話來說就是：

對特定場景垂直領域的深耕和挖掘，尋找「接觸點」，幫助獲取更多的功能、內容、服務、特性、品牌、運營甚至是喜好……進而實現業務的「有效增長」（轉化、變現、留存）。

通俗一點解釋就是 xpanel 利用主卡與拓展卡之間的信息架構關系，把拓展卡平衡的分為幾類，比如「與產品功能相關的卡片」「與運營相關的卡片」等。

把本來被 LBS 地圖一屏內搶占的空間通過簡易的交互模式補償回來了，這樣既不打破用戶的核心體驗 focus 在地圖與主卡上，同時又增強了運營、功能的玩法與拓展，可謂雙贏。

根據這幾年滴滴 xpanel 的線上應用，拓展卡片基本挖掘涵蓋了以下場景的露出：優惠福利、出現卡券、會員體系、安全相關、出行提醒、拉新導流、運營活動等，未來可拓展的價值內容會更多。看著各路出行類 app 又紛紛長期沿用 xpanel 的設計，想必線上的數據反饋應該也是很正向的。

抖音-TopView

在上篇文章《多維度解析 | 抖音vs快手的產品設計策略差異》中的商業化模塊里簡要提及過抖音的 Topiew 超級廣告位，這里單獨拿出來和大家解析一下它究竟有多6。

從功能角度看，它是一個從開屏延續到端內視頻信息流的廣告位，占據了用戶從進入抖音的第一視覺。

從交互角度看，topview 主要展現以開屏沉浸式視頻 3s 播放→淡出互動轉化組件 3s（完美融入原生視頻信息流），剩余操作手勢與功能等同原生視頻信息流。

在這樣一個有著 1 億+第一曝光的產品位置，單純只做常規靜態開屏穩當入賬不香嗎？事實是抖音確實讓它不香了，沒有創新就沒有新的收獲?；跇I務和當前產品形態下的交互模式使抖音有一個天時地利的優勢——沉浸式體驗，在這樣的交互模式下給視頻化的開屏提供了很好的承接入口。從開屏開啟到融入信息流，在交互形態的切換中又為廣告內容的播放時長贏得了更多時間。

更可怕的一點是 3s 播放后融入原生視頻信息流中的 TopView 除了正常收割廣告轉化帶來的單量，還可以通過右側的主頁鏈接輕松引流進行粉絲沉淀（今天就算你不買，先關注我，成為我的潛在用戶，來日我再推一個新商品視頻，你可以第一時間看見也許感興趣就買單了）。

說完這些大家仔細回憶一下平常我們接觸的有視頻廣告的視頻平臺，別說 60s、30s，15s 我們都嫌長，但為啥 TopView 顯得相對沒那么惹人煩呢（上次留的思考題）？個人認為除了抖音在選擇合作品牌時會傾向符合平臺氣質的品牌合作（細數它合作過的品牌：Mac、寶馬、林肯、vivo 等）保障廣告質量和提供「跳過」外，直接融入信息淡出的互動組件會不僅會給用戶新奇感，還會激發用戶的互動欲望。

最后看一組數據（與寶馬合作數據），曝光數：1.1 億+；有效播放率：53.82%；點擊率：13.26%。所以你猜一個最長可以展示 60s 的品牌視頻內容、同時進行品牌粉絲沉淀、良好體驗帶來更高有效播放的億級曝光廣告位能值多少錢？

淘寶-二樓

2016 年淘寶啟動了一個項目要做一款內容化欄目——以視頻為主，每晚更新一期，類比「一千零一夜」的故事。

那么在滿滿當當的淘寶運營區里該選擇哪一個來試玩這個有趣的「新欄目」呢？是在頭部的 10 宮格里再擠進去一個圖標呢？還是在熱門推薦里擠出一個 tab 呢？還是做一個懸浮的右下角的運營位？顯然都不太合適。

根據這款產品每晚 6 點鐘才可以使用，早上 7 點就會消失的游戲規則，最適配它的入口是一個不占界面原生空間，同時又有一定儀式感的位置。于是下拉 loading 的大空區成為了設計師們考慮的陣地。

△ 不知道這個banner為什么要排擠我

但地方選好了，又有了新顧慮。因為 iOS 的用戶基本被系統洗腦了下拉手勢，對于他們來說下拉=刷新，貿然在下拉刷新的手勢基礎上再疊加一個無關聯的結果顯然是有風險的。因此從交互上需要界定 2 個維度的指標來保障新欄目的體驗。

• 下拉速度（速度臨界值：速度多快？→刷新，多慢？→新欄目）——以速度為優先衡量指標（只要速度快，拉的距離再大也是→刷新）
• 下拉距離（距離臨界值：拉到多少距離進入新欄目？）——兼顧單手用戶操作難度

反復試錯 2 個指標數據的實際體驗之后，新欄目有了安身之所，賜名「二樓」。進入「二樓」的整體交互和現在的短視頻產品玩法基本雷同，全屏豎滑切換，小圖標帶貨。下拉加載位的開發，從普通 loading 動效到運營位的植入基本被各類電商平臺輕松復刻了，因此這一切看上去更沒什么了得，但對于原創來說那畢竟是 4 年前。

豆瓣-疊加上滑板

談到豆瓣我算是半個老用戶了，豆瓣自身是個比較復雜的集合多條業務線分支（「小組」「同城」「閱讀」「音影」……）的多生態產品，這里我們主要拿它 18 年 6.0 大改版中影音模塊的詳情頁大改造來說事兒。

△ 可能有很多人已經忘記6.0前的豆瓣電影詳情頁長啥樣了，帶你回顧一下。

看完對比圖，視力正常的朋友乍一看都能看出 6.0 版詳情頁整容得有多成功。但具體成功在哪里，可能不僅僅是好看這么簡單。

大背景從海報上智能取色雖然不算是什么稀奇的做法，但是加了適度的漸變應用在這里也可以說是非常的恰到好處了。另外深底色和視覺比重加大的外鏈區都突顯了「第三方播放」與「購票選座」的視覺感知。讓用戶沉浸在電影詳情中并引導他們走向「豆瓣的主要收入來源之一——電影票分銷與第三方視頻播放產品引流」正好是 6.0 豆瓣改版一個「小小的目標」——更務實（商業化）。

從交互層面看，且不說評論頭部吸底這個事情是不是也是因為 6.0 商業化的影響（評論區增加「話題」進行重點運營），這個交互本身我覺得還是很強大的。強大的體現在于良好的空間收納能力與信息拓展能力。我給它起了個好聽的名字叫-疊加上滑板（不好聽也認了吧，畢竟也沒有內部人員告訴我他們是不是起名字了）

這里可能又會有很多人質疑它與用戶已洗腦的上滑手勢之間的沖突，這點解釋起來和上文淘寶「二樓」有些類似，區別是豆瓣并沒有做上滑速度 or 距離的臨界值，只是把滑動區域做了隔離。而對比它的效仿者 boss 直聘，人家倒是在交互上做了進一步優化，適配自己的產品情況做了上滑疊層卡隱藏和上滑距離臨界值。

這個故事告訴我們，要抄也要抄得比人家的交互更優秀才不丟人昂。

文章來源：優設    作者：Nana的設計錦囊

最近身邊的一些小伙伴，總會遇見B端設計工作，對于這種偏后臺設計的B端設計，總會有大量的表單設計需要做，結合以前自己也有過不少表單設計的工作，在這里給大家分享一下自己對于PC端表單設計的研究，聊一聊表單在PC端中的運用。

表單的作用

商業離不開數據，而數據總會依賴不同的表現形式，不管是word文檔，還是數據可視化，都是瀏覽者通過表現形式來對數據進行閱讀和分析，因此表單的設計就是一種表現形式，我們將捋一捋如何通過表單更好的讓用戶閱讀順暢、操作方便、總而言之就是更好用啦。

表單信息的分割方式

無線分割：顧名思義，列表的信息之間正常情況下沒有分割線等方法來分隔，僅僅是用間距來分隔開內容。好處是元素更少，畫面更簡潔，但是視覺可能就沒那么清晰了，使用的出場率一般。

有線分割：同樣字面意思，就是通過簡單的分割線來分割列表中的信息，讓視線左右移動的時候更加穩定、輕松，在表單設計中使用的出場率非常高。

斑馬線：通過深淺交替的色塊，以及色塊產生的對比來分隔列表中的信息，深淺深淺的循環就好像斑馬線，使用時是通過色塊產生對比，所以也可以使用帶有適量飽和度的色塊來區分，占頁面面積比例較大，適當用色可以使得畫面更加活潑、豐滿，斑馬線也是出場率極高的一種展現形式。

斑馬線+分割線：很容易理解，就是斑馬線風格+分割線的結合，用色塊區分的同時又加了分割線，信息之間的區分對比更加強烈，但是畫面層級就多了一些，沒有其他的看起來簡潔，使用出場率也一般。

卡片式：跟卡片式風格其他設計一樣，分別用懸浮的色塊來區分，間隔的地方是背景色，分隔的力度比較強，內容區分的很清晰，弊端是更加占畫面的位置，尤其在信息很多列的時候，會增加大量的高度，用戶需要更多時間進行下翻的操作。使用出場率相對其他形式來說稍低。

可控制頁面顯示數量

場景：用戶需要閱讀大量的表單數據，且需要頻繁的翻頁、跳轉。

如圖，左下角可以設置界面中每頁顯示信息數量的多少，用戶可以根據自己的需要自由設置，當瀏覽的數據較多的時候，不再需要頻繁點擊下一頁來瀏覽信息，只需把每頁顯示的數量調高，如此便減少了大量的操作次數。

像這樣允許用戶可以自由編輯來改進體驗的方式還有很多，比如可以設置顯示密度，就是以一樣的方式自由調整信息與分割線的間距。除了行間距，有的可以自由設置每一列的列間距，用戶可以根據自己的習慣來設置。

列表+可視化

場景：用戶需要瀏覽大量的數據，并需要對數據反復進行計算、分析。

在使用大量的文字列表展示數據的同時，使用數據可視化加以配合，用戶可以更好的預覽到數據的大致情況，又可以在列表表單中閱讀到詳細的數據。

根據條件排序

場景：用戶想根據某種條件的大小排序，來先后閱讀數據。

通過點擊第一排小標題行，可以選擇不同的方式調整信息的排序方式，就和電商商品排序一樣，可以選擇金額高到低或者低到高排序，也可以選擇別的方式進行排序，從而更快找到自己所需要的內容。

篩選過濾

場景：從一大堆混雜的數據當中，尋找符合條件的自己所需要的數據。

添加篩選功能，過濾掉自己不想瀏覽的內容，通過條件篩選，更快的更的找到自己想要的內容、縮小查找范圍、減少達到目的所花的時間。一般通過下拉按鈕的形式選擇不同的條件來進行篩選過濾。

關鍵字搜索

場景：已知列表中某信息的名稱關鍵字，想從大量混雜的列表中快速找到。

跟篩選過濾一樣，添加關鍵字搜索功能，用戶提供部分關鍵字，可通過關鍵字查詢，最快最的找到想要的那一條內容。一般該目標內容是用戶已知的，有時候是針對性的。

懸停展現操作

場景：精簡設計風格的界面，不想界面中內容過于繁多。

如圖，鼠標懸停在哪一行，哪一行才會顯示該列表后面的操作按鈕，好處是減少了視覺干擾，能更快的找到捕捉到操作位置，弊端是用戶不進行交互的時候無法發現操作按鈕如何出現。

可展開列表

場景：想快速獲取列表中某信息的其他附屬內容。

如圖，點擊某一行后，展現該行的一些附屬信息。可以不用跳轉頁面而進一步了解該行信息的詳情。

可編輯列表

場景：在瀏覽列表的同時，需要頻繁的對列表中的信息進行編輯。

用戶可以直接對列表信息進行修改、編輯，省去了跳轉再編輯的麻煩步驟，更節約時間，用戶操作起來更加方便。

快速預覽

場景：需要充分了解列表中不同信息的詳細說明，頻繁跳轉又過于麻煩。

和可展開列表的作用類似，但是可展開列表顯示的內容有限，快速預覽的功能可以用側彈框的方式、彈出對話窗口的方式、以及其他方式對選中的內容直接展示詳細信息。用戶不需要跳轉至詳情頁就可以了解到大量信息，省去繁瑣的交互流程。不再需要頻繁的跳轉到詳情-返回-跳轉到另一個詳情-返回-跳轉-返回。使用快速預覽的功能就可以很好的解決這一問題。

（PS：彈出對話窗口的方式，可以同時彈出好幾項列表的詳情信息進行對比，但是側彈框因為高度優勢，可以展現更多內容）

自定義列

場景：列表中每條內容顯示信息參數過多，且很多不想瀏覽。

自定義列表功能是用戶可以自由設置每行信息參數的內容，比如我不想列表中顯示金額這一項，就可以刪除，想要的時候可以添加回來，這樣用戶可以保留自己想要的那幾項內容，可以更快更方便的閱讀到自己關心的那幾項參數，節省了用戶的有效時間。

固定頭部

場景：列表橫向或者縱向過多，下翻或橫拉的時候標題頭被隱藏，不知道自己當前瀏覽到的參數屬于哪一項。

交互過程中，可以把第一排重要的東西固定，列表內容翻動的同時，第一排仍然在原位不移動而且覆蓋列表中的其他信息，很多自帶的框架都是這樣的形式，使用的出場率也是非常高，這樣用戶可以隨時查看到自己看到的內容是屬于哪一項屬性，或者是屬于哪一條信息，可以是橫向固定，也可以固定豎直的第一排標題，也可以固定最后一塊操作點擊區域，具體如何固定、是否固定，根據整體的需求來選擇。

間距的規則

通常表單都是大量的文字，大多數的文字高度都在該行高度的三分之一左右。過于緊密用戶瀏覽不順暢，過于分開顯得畫面過于松散，不同的分割方式，間距也會有所不同。

總結

其實上面的每一條都是一個小總結，每一條在大部分的列表中都可以用到，主要還是根據實際需求來運用這幾點，比如分割的方式根據主體風格來搭配，不要為了設計而設計盲目運用，畢竟設計都是以內容為主，尤其是表單設計，本身就是更好的表達內容。

本文發布于人人都是產品經理。

有句話叫：「設計無小事」，很多看似不起眼的東西卻起著至關重要的作用，比如這期要說的線條，很多人對于線條的理解有局限性，比如：線條的形態可以是曲線、直線、折線、粗線、細線、實線、虛線等等。其實已經牽扯到了點、線、面的知識，這也是很多科班生在學校必學的知識點，但是這期所說的線與點線面中的線還是有所不同的，點線面中的線可以是線條、可以是文字或者是看不到的視線，而是今天著重說的是設計中很直觀的線條。下面我們還是通過實際的案例逐一分析：

線條可以引導視覺

設計類的知識很多都和日常生活息息相關，嘗試著把設計類的知識點與日常生活想結合，對于記憶和理解來說會更加得心應手，例如：

圖中的閃電可以視作為設計中的線條，給人的視覺感受是通過閃電把天與地連接為一個整體，而閃電在圖中的作用就是串聯整體，那么回到這里的正題：線條有引導視覺的作用該怎么理解呢？再舉一個現實生活中的案例：

我們選擇從北京到拉薩開車去，出發之前可能需要在地圖上看下路線，知道途徑哪些省市，規劃好行程路線，這里綠色的虛線就起到了引導視覺的作用。回歸設計中道理是一樣的，線條可以引導用戶把原本雜亂無章的視覺點規整為有次序的視覺元素，例如：

當看到左側這張海報時我們視覺次序會出現很多變化，比如：1>A>3>B>4>C>2 或者 A>2>C>4>B>3>1 等等 N 多種順序，這時給人的感覺就是雜亂無章的，毫無視覺次序而言；而看右側的海報給人的感覺卻是條例清晰的，相比而言只是多了兩條線，但是卻在整個海報中起到了引導視覺的作用，它可以給與用戶閱讀海報時視覺輔助的作用，讓用戶以右>左>右的視覺次序欣賞、閱讀，看似很不起眼，其作用卻至關重要。

前面也說了，線的形態可以有很多種，例如：

這里是以真實的可口可樂吸管作為設計中的線條，同樣起到了視覺引導的作用，但是我們不難發現，這里的線條不僅僅只有一個作用，也牽扯到另一個作用：線條有串聯整體的作用。

線條能夠串聯整體

在排版時我們有分組原則，即把互想關聯的元素彼此靠近，無關聯的相互疏遠。在頁面中我們會把同一色塊上的元素視作為一個整體；下面我們說下線條所帶來的串聯整體的作用是如何體現的，比如：

△ 圖一

△ 圖二

圖一因為大面積的留白能使得用戶很容易分辨出自行車與文案是一個整體，但是相較于圖二而言，其整體性略顯不足，而且給人的感覺太過單薄、重心不穩；圖二的整體性更強，這里的矩形線條就起到了串聯主題的作用，類似的還有：

不難看出，這些案例中的線條都有串聯主題的作用，線條使得主題元素整體感更強、畫面板式更加嚴謹；對于整體的視覺傳達也起到了串聯、引導的作用；在文字排版中，也有類似的線條，比如：

同樣是通過線條把文案更加整體化，也起到了串聯的作用。

線條可以突出主題

突出主題的方式有很多種，像我們之前所說到的留白、對比。接下來繼續說下另一個可以突出主題的方式—線條，下面看個案例：

通過對比觀察我們發現，右側海報整體感更強，主題文案信息更加清晰，主體更明確。其中的原理可以理解為：因為線條的存在，使得主題信息有了一定的范圍，在視覺上等于是在海報中劃定了視覺焦點，從而起到了突出主題的作用。當然還有其他的表現形式，比如：

很好的詮釋了線條的作用——突出標題序號。在進行創作時，作品的每個元素都要做到有理有據，否則只是一味的抄襲，到再創作時腦袋里還是一片空白，只有明白了其中的設計原理，才能做到活學活用。再看幾個案例：

突出主題也許一個線條就可以表現的淋漓盡致，因設計目的的不同，線條所發揮的作用也不盡相同。下面繼續分析：

線條可以分割整體

前面說了線條有串聯整體的作用，而這里又說可以分割整體，是否存在矛盾呢？下面舉個簡單的例子：

在小文案的區域中間我加了兩個線條，看似很小的改變，其目的是把文案很準確、嚴謹地分割為三個小整體，希望能給用戶帶來識別性更強的閱讀性，再舉個例子：

這里的線條把月份和日期分割、英文和中文分割開，使得用戶對于信息的捕捉能力以及可辨識性都提升了很多，而線條的作用就起到了分割的作用。

線條有修飾的作用

線條也能起到修飾、襯托的作用，很多小伙伴會忽視這一點，其實線條也可以成為海報中襯托畫面、修飾主題的元素，例如：

海報中的線條起到了襯托、修飾主題的作用，假如把這些線條都刪除，畫面整體會顯得相對單薄。

更多設計中線條的應用：

總結

線條的作用我們分為四個逐一分析，其實它們之間也存在著相輔相成的作用，不能以一概全，線條所起到的作用可以是一種，也可以是多種，比如：我們前面「可口可樂」的案例，即有串聯整體的作用，又有引導視覺的作用。只要我們在使用的時候能明確目的，而不是機械式的抄襲，那么最終一定會得心應手。

文章來源：優設    作者：美工美邦

文章來源：站酷    作者：設獵派

這篇文章來自于 Invision 出品的書籍，圍繞規劃、設計、構建和實現設計系統的實踐經歷來指導讀者，其中包含了經驗豐富專家的真知灼見和一手經驗。我很喜歡，也分享給大家，推薦閱讀。這是一個系列，一共有 7 章，感興趣的話，持續關注吧。

20 世紀 60 年代，計算機硬件技術的升級開始超越軟件發展的速度。計算機的處理速度變得越來越快，價格也越來越便宜，但計算機軟件開發仍然處于緩慢、難以維護的境地，并且還很容易出錯。兩者之間的差距以及解決這個問題的困境被稱之為「軟件危機」。

在 1968 年的北約軟件工程會議上，道格拉斯·麥克羅伊（Douglas McIlroy）提出了基于組件開發有可能是解決「軟件危機」的方法之一?；诮M件開發是一種通過復用代碼來提高編程潛力的方法，該方法能幫助編程工作更、更易于擴展。這樣做既能減少編程工作量又能提升軟件開發的速度，讓軟件更好地運用現代計算機的力量。

在 50 年后的今天，我們又面臨著類似的挑戰，只不過這一次是在設計領域。在 UI 設計中，設計的角色是在為特定需求量身定做解決方案，所以很難去基于整個應用進行擴展。

你有沒有走查過你輸出的界面，發現自己使用了幾十種類似的藍色，或者同一個按鈕不同的用法，將這些樣式組合對應到你設計的每一個 UI 界面，就會意識到一套不成體系的設計是多么的難以維護。

△ 一份 UI 樣式走查收集的成果，里面羅列的十幾種類似的按鈕樣式說明之前團隊挖的坑有多深。

在這種狀態下，設計要跟上開發的速度，公司可以選擇做以下三件事：

• 雇更多的人
• 提高設計速度
• 找到一個適用于多個問題的解決方案

通過復用設計，設計系統能夠幫助團隊更好、更快地構建產品——復用性使規范成為可能。這是設計系統的核心和價值。一個設計系統是一個可復用組件的合集，由清晰的規范作為指導，組合在一起構建成各種的應用程序。

50 多年來，工程師們一直在遵循著這個理念執行工作?，F在是時候讓設計充分發揮其潛力加入他們了。

用系統思維擴展設計

你可能已經清楚地意識到，設計系統已經成為當今軟件行業的一個熱門話題，并且理由也很充分。很多企業投資設計系統，因為他們認識到產品體驗能夠帶來競爭優勢，不僅能吸引和留住客戶，更降低產品學習成本。

在重視設計系統的公司內部，通常能看見這種情況：

• 設計團隊不斷壯大。
• 設計師分布在整個公司的團隊中，可能在多個部門。
• 設計在整個公司平臺上的各個產品中都起著關鍵作用。

如果你是設計師，那么前面所說對設計的投資聽起來可能會令你很興奮，但其實也帶來很多挑戰。當一個應用由不同的團隊負責迭代各自模塊的時候，你將如何跨平臺設計一致的 UI？又如何使所有團隊能夠進行快速迭代？當團隊的設計師設計出新的獨立樣式時，你又將如何處理這種不可避免的設計需求？

要了解如何應對上述的挑戰，我們要先了解什么是設計系統。設計系統將個體和整體兩個概念各自的優點結合在一起。

1. 標準

擁有 MAC 用戶界面的技術知識是產品設計的關鍵因素，但了解用戶界面背后的理論，才能夠幫助你創造出色的產品?！O果人機交互指南

為了設計卓越的用戶體驗，不僅要了解設計系統背后的內容，還要了解其設計的原因。我們一般會通過建立和遵守標準來達成共識，這樣做能消除主觀性和歧義性，保證產品團隊內部不會出現摩擦和混亂。

這套標準的內容涵蓋了設計和開發。例如對命名約定、無障礙標準和文件結構等等，幫助團隊達成共識，減少出錯。

視覺語言是設計標準的核心部分。定義顏色、形狀、類型、圖標、布局和動效的樣式和用法對于創建品牌一致的用戶體驗至關重要。系統中的每個組件都包含這些元素，它們在表達品牌特性中扮演著不可或缺的角色。

沒有標準，決策時就會無據可依。這不僅不能擴展設計，還會造成復雜、差勁的用戶體驗。

超越平臺

視覺語言可以不局限于單一平臺，可以在 Web，iOS，Android 和其他平臺上延續。將規范文檔展示在設計系統網站的醒目位置，能夠幫助系統開發者了解組件的樣式和交互模式。例如，Google 的 Material Design 就深入到其產品視覺語言的各個層面。

2. 組件

組件是系統中復用代碼的一部分，它們充當應用程序界面的基礎。組件的復雜性各不相同。將組件簡化為單個功能（如按鈕或下拉菜單）可以增加其靈活性，使其更易于復用。復雜的組件，如特定類型數據的圖表，可以很好地滿足其應用場景，但是這種復雜性限制它的使用場景數量。組件的復用性越高，需要維護的次數就越少，規模也就越簡單。

基于組件的開發通過復用代碼來減少技術開銷。建立標準規范了這些組件的用途、樣式和用法。兩者結合在一起，就相當于為你的產品團隊配備了一個清晰的系統，讓他們了解到為什么和怎么做。

設計系統的價值

讓我們詳細看看設計系統如何幫助你解決一直以來的痛苦。

1. 擴展式設計

隨著團隊的成長，設計師通常會將注意力集中在應用程序的獨立功能區域，如搜索和發現、帳戶管理等。這就會導致設計碎片化，就像是一座設計的巴別塔，每個設計師都將他們的設計語言往上添。當設計師單獨而不是系統地去解決問題時，就會發生這種情況。

沒有通用設計語言統一產品和設計，用戶體驗就會開始崩潰。當缺乏設計規范時，設計討論就變得毫無用處。為了使團隊內部保持一致，必須要有一個共享的來源——可供參考的官方樣式庫。

大多數情況下的樣式庫都是靜態的內容，例如設計模版。但是靜態的參考幾乎立刻就會過時。這就是為什么有的團隊會建造像 Shopify’s Polaris 站點這樣的網站——一個設計系統站點，用該設計系統構建而成，記錄系統的所有方面，包括組件、指南和交互最佳使用場景。因為它是與系統一起構建的，所以它能夠保持其永遠是的。

對于產品團隊而言，內部設計系統站點是最佳、最易訪問的共享來源。它提供了一個引力，使團隊成員保持一致和同步。

2. 管理你的債務

隨著應用程序和團隊的時間積累，會慢慢形成債務。這種債務不是金融債務，而是技術和設計債務。這些債務是因為解決獨立問題獲得的。設計債務由大量不可復用和不一致的樣式和慣例組成，而維護它們是不可能完成的任務。隨著時間的推移，這些債務的累積會成為減緩增長的巨大負擔。

創造行為本身并不會產生債務——就像花錢本身并不會產生金融債務一樣。但使用設計系統將使你的設計和代碼保持足夠簡潔，同時仍然允許你進行升級和迭代。

3. 一致的設計

一致且重復使用的標準化組件，使你應用程序的易用性大大提升。標準化的組件還能讓設計師花更少的時間關注樣式，花更多的時間專注于提升用戶體驗。

4. 更快的原型

在設計系統下工作，你可以像玩樂高一樣快速拼湊流程和交互，構建無數的原型和方案進行快速驗證，從而幫助團隊快速獲得數據和結論。

5. 提高可用性

頁面樣式的不一致會影響產品的可用性，當 CSS 因為數不清的不一致樣式元素和交互增加時，頁面加載時間也會加長，這會導致很糟糕的用戶體驗。它還可能產生沖突的 CSS 和 JavaScript，從而可能破壞你的應用程序。通過使用設計程序，通過構建一個整體的組件庫（而不是每頁）來避免這些沖突，從而花費更少的時間來保證產品質量。

6. 建立可訪問性程序

可訪問性在組件級別就可以實現，針對殘疾人士、網速較慢和老舊的計算機上進行優化。這是一個建立易用性程序很好的方法， 在第 3 章「構建設計系統」中，Katie Sylor-Miller 解釋了設計系統如何幫助你改善產品的可用性，并保證遵守你所在國家/地區的法律。

（譯者注：美國殘疾人法案于 1990 年 7 月通過并簽署，其中有規定網站的可用性必須遵守《美國殘疾人法》（ADA）的相關內容。）

設計系統的誤區

即使有上述說的這些好處，在團隊內部推行一個設計系統的時候，仍然很難說服團隊成員。設計師可能會感到局限或束縛，但通常這些被感知到的弱點正是設計系統的最大優勢。

讓我們來揭穿那些你在推行設計系統時經常會遇到的誤區吧。

誤區1：過于局限

誤區：負責深入獨立業務的設計師看到的設計標準可能會與其他需求的不一樣，因此，他們會認為通用的設計系統過于局限，可能無法滿足某些特定業務的需求。

現實：設計師通常會設計出自定義的解決方案以滿足應用中的獨立的業務，從而增加了設計和技術的負擔。而使用設計系統，這些被設計的新解決方案可以被反饋到設計系統里面，使每個人都可以使用這些改進方案。

誤區2：缺乏創造力

誤區：如果設計師被限制在一個設計系統下做設計，那么他將不能去自由地探索設計風格。前端的工作通常包含著各種樣式風格的更新。對應用程序的風格進行改版通常不是一個小任務。這也可能是一個很大的風險，因為從事這項工作會移除一部分的舊資源，可能會對可用性產生負面影響。

現實：設計系統的組成部分是相互關聯的，這意味著當一個位置進行更改時，這項更改會在整個系統中同步，這使得系統內的樣式更新工作變得輕而易舉，但影響卻大得多。以前是幾周甚至幾月的工作量，現在可以在一個下午就能完成。

誤區3：一勞永逸

誤區：設計和構建完設計系統后，工作就完成了。

現實：設計系統是有生命的，這意味著需要不斷對其進行維護和改進。但是由于應用是由設計系統的復用性組件提供支持的，因此該應用會自動同步設計系統的改進內容，從而減少維護應用程序的工作量。這就是設計系統提供的擴展能力。

總結

設計系統不是一時流行的方法，也不是未經檢驗的假設。為了讓設計找到與技術的快速發展相匹配的同等方案，基于組件的設計和開發是一種行之有效的可靠解決方案。

現在你已經了解了創建設計系統的真正價值，讓我們在下一章中深入探討實際的設計過程吧。

文章來源：優設    作者：彩云譯設計

奔馳法（SCAMPER）是能夠幫助我們拓寬解決問題的思路檢查列表。在解決問題的過程中，如果感到束手無策，可以嘗試從列表中顯示的方向重新思考問題，從而打開解決問題的思路。你將通過本文熟練掌握其運用方法。

SCAMPER的方向

SCAMPER 是七個英文短語的縮寫，同時也代表著七個解決問題的方向，這七個方向是：

• 替代
• 整合
• 調整
• 修改
• 另用
• 消除
• 逆反

SCAMPER 法的具體實踐步驟：

1. 首先列出現有產品或服務讓團隊止步不前的問題、障礙、困惑等。
2. 就 7 個切入點找出合適的定義（請參閱我們下面的步驟指南）。
3. 根據需要創造的對象或需要解決的問題來設計問題。
4. 逐項加以討論、研究，從中獲得解決問題的方法和創造發明的設想。
5. 評估可行方案，落實流程改善或進行產品改良。

示例：麥當勞

麥當勞家喻戶曉的知名度得益于極具傳奇色彩的麥當勞創始人雷·克羅克先進的經營理念。畢竟麥當勞的出現讓人們的生活模式發生了翻天覆地的變化。時至今日，我們仍然可以從麥當勞的商業戰略中識別出 SCAMPER 法的蹤跡：

• 另用：出售餐廳和房地產，而不是簡單的漢堡包。
• 消除：讓客戶為自己服務，從而避免高昂的人工成本。
• 調整：讓顧客在用餐前付款。

SCAMPER的步驟

替代

這里需要考慮的總體問題是：何物可被「取代」？

尋找當前選項的替代選項。這些替代選項可以是人，物或方案等一切等同于現有選項的東西。例如產品的替代材料，服務的替代方案以及后備人員等。

思考清單：

• 我可以對零件進行替換嗎？
• 我可以更換哪部分工作人員？
• 我可以更改規則嗎？
• 我可以更改成分或材料嗎？
• 我可以使用別的方法嗎？
• 我可以改變形狀、顏色、粗糙度、聲音或氣味嗎？
• 我可以把這個想法用在其他項目上嗎？
• 我可以改變自己的感受或態度嗎？
• ……

整合

這里需要考慮的總體問題是：可與何物合并而成為一體？

將現有產品和別的產品或系統結合在一起使用，或者能否與其它產品合并而成為一個整體？

思考清單：

• 組合起來怎么樣？
• 能否裝配成一個系統？
• 我可以將各種想法進行綜合嗎？
• 我可以把目的進行組合嗎？
• 我可以把各種部件進行組合嗎？
• 我可以合并哪些流程或步驟？
• 為了降低生產成本，我可以合并哪些方面？
• 我可以在哪里建立協同？
• ……

調整

這里需要考慮的總體問題是：原物是否有需要調整的地方？找出所有可以調整的選項。

思考清單：

• 可否改變一下形狀、顏色、音響、味道？
• 是否可改變一下意義、型號、模具、運動形式？
• 能否更換一下先后順序？
• 可否調換元件、部件？
• 是否可用其他型號，可否改成另一種安排方式？
• 原因與結果能否對換位置？
• 能否變換一下日程？
• ……

修改

這里需要考慮的總體問題是：可否改變原物的某些特質，如意義、顏色、聲音、形式等？修改現有的所有或部分選項，重新組合出新產品。

思考清單：

• 能否添加部件？拉長時間，增加長度，提高強度、延長使用壽命、提高價值？
• 現在的東西能否縮小體積，減輕重量，降低高度，壓縮、變?。?
• 能否省略，能否進—步細分？
• 能否添加額外的功能？
• 能否擴大目標群體？
• ……

另用

這里需要考慮的總體問題是：可有其它非傳統的用途？不斷尋找現有產品的新用途，將現有產品推廣到新地方。

思考清單：

• 它可以用在哪些地方呢？
• 是否有新的方式來使用它？
• 擴展以后是否還有其他用途？
• 是否還有其他市場呢？
• 哪些目標群體可以從該產品中受益？
• 還有誰可能會使用它？
• 它能讓原本不打算使用它的人使用嗎？
• ……

消除

這里需要考慮的總體問題是：可否將原物變?。繚饪s？或省略某些部分？使其變得更完備、更精致？消除不必要的選項，減少不需要的功能。

思考清單：

• 我可以消除或簡化哪些內容？
• 我可以減少時間或其他組件嗎？
• 如果我刪除某一部分會發生什么？
• 哪些是必要的或不必要的？
• 我可以取消這些規則嗎？
• ……

逆反

這里需要考慮的總體問題是：可否重組或重新安排原物的排序？或把相對的位置對調？重組或重新安排選項的順序，或把選項的位置對調。

思考清單：

• 倒過來會怎么樣？
• 上下是否可以倒過來？
• 左右、前后是否可以對換位置？
• 里外可否倒換？
• 正反是否可以倒換？
• 可否用否定代替肯定？
• 可以有其他的順序或者構造嗎？
• ……

SCAMPER的由來

這個檢查列表最早是為頭腦風暴設計的，旨在激活參與人員思路，起到發散思維的作用。心理學家羅伯特·艾伯爾總結了這些列表并做出最終的解釋。目前奔馳法主要用在產品改造和服務升級的過程中，但它對普通問題的解決也有幫助作用。

文章來源：優設    作者：陸小鳳不傳奇