2020-5-31 ui設計分享達人
你知道嗎？視力，聽力和行動能力完全健康的人，可以輕松地讀寫，可以有效執行多任務，并且始終可以正常工作的人約占總人口的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>，然后用小的低質量模糊圖像填充它，最后用所需的高質量圖像替換它。
在每個數字產品中都遵循上述最佳實踐，這是高可訪問性標準的良好起點。但是總會有改進的余地，并且更好地了解我們的用戶可以揭示提高無障礙標準的新方法。因此，有必要花費一些時間和金錢來更多地了解我們的不同類型的用戶，因為他們可以教會我們很多有關使包容性體驗成為現實的知識。
了解我們的用戶將幫助我們練習同理心。“賦權”不是偶然的設計思維過程的第一步。在移情階段，我們的目標是加深對我們正在設計的人員及其獨特視角的了解，因此我們可以在進行任何設計決策時與他們認同并代表他們。
zhuanz
