翻譯：浣熊君
原文作者：Javier Cuello
原文鏈接：https://www.smashingmagazine.com/2017/03/beauty-imperfection-interface-design/
本文由非科班設計翻譯小組翻譯
有時，我們傾向于將我們的設計看作是藝術品。但是如果我們以這種方式看待它們，這意味著它們沒辦法在面對“現實世界”的不確定條件時，保持實用性。一個能適應變化，適配性好的界面也可以很有美感。我們必須承認，界面確實會變化，并且時常變化。
在設計移動APP的時候，我非常享受把產品從初始概念，發展成型到后期微調和改進界面細節的過程。這可是一個步驟繁多的過程。在這個過程中，我和團隊的其他幾名成員（從調研人員，插畫人員到開發人員）一起參與設計。但這也意味著在每一個階段，我們都必須要做出大量決定，而其中一些并不有趣反而很棘手。
作為UX專家，我們有各種不同的出身背景，但視覺界面是我們花費最多的時間的部分（而這部分的成功也往往歸功于我們）。我們是有火眼金睛的視覺思想家。這就是為什么有時候在開始一個新項目時，我們總想直接跳轉到可視化界面設計階段，這也是為什么我們有時候會認為其他任務無聊的原因之一。
這也意味著我們經常推遲（甚至更糟糕，忽略）我們工作過程和流程中的其他重要部分：定義用戶需求和目標，繪制任務流程，處理信息和交互設計的所有細節等。這些部分同樣是至關重要的，同時，對于許多人而言，它們更具抽象性，更難想象它們是如何成為最終產品的具體的部分的。
制作界面的細節時你也該問問自己，你為什么要建立它。（圖片：Webshocker的天氣APP）
當我們開展視覺設計時，所謂的像素完美哲學可能是陷阱，讓我們花費更多不必要的時間來制作細節，直到頁面中最小的細節也達到了“完美” 。這導致產生了一代使用Dribbble和Behance的設計師，他們在網站上主要是展示經過精心雕琢后的應用和網站界面，他們更關心設計“看”起來怎么樣，而不是設計“用”起來怎么樣。在現實世界中，事情往往不會像我們所期望的那樣順利。
或者，正如保羅·亞當斯（PaulAdams）所說：
我看到很多設計師在設計時只關注第四層次的設計，而不考慮其他方面。設計應該自下而上，而不是自上而下。如果其他三個層次的問題尚未得到解決，網格，字體，顏色和審美風格都是無關緊要的。許多設計師說他們會考慮其他方面，但事實是他們并沒有這樣做，因為相比起做出復雜商業決策，以及和意見相左的人商討斡旋，有時候畫出精美設計圖和糾結于像素間更有趣。留在第四層也沒關系，但你必須認清，這是藝術，而不是設計。你是使用數碼工具的藝術家，而不是設計師。
就個人而言，我認為最好的設計（在用戶界面設計領域）不僅要外觀和感覺都不錯，而且還能對多變的使用環境，甚至是不可預知的情況做出優雅的反應。
在構建一個產品的漫長的道路中，有些階段需要設計師把更多精力放在協同合作，而不是視覺設計上。這也正是這篇不太長的文章（我可不想讓你在鍵盤上睡著啦！）的重點了。在接下來的幾段中，我將就如何測試正在開發的APP設計并檢查它是否準備好被發布，提出一些建議和提示。
在不完美中尋找美麗
當我在大學學習平面設計時，他們教導了我平衡，對齊，比例和緊張的美感，以及如何在空間中放置元素，能使他們和諧和令人愉悅。有了這個知識以后，我的生活改變了，我開始用不同的視角觀察世界。后來，我開始設計界面，我試圖把這些原則運用到實踐中——界面上的所有信息都應該形成讓人非常滿意的視覺效果。
如果你將這些原則應用于移動應用設計，那么我們會發現只有在我們顯示適量的信息量時，視覺效果才好。例如，如果這個頁面必須列出人物名稱，設計師通常會選擇一些簡短且常見的名字，并將它們完美地排列在一起——而沒有考慮不受人喜歡但可能出現的長名稱。這樣的長名稱可能會破壞設計美感，或者使設計崩潰。
這種做法是基于這樣一種假設，即混沌和不完美中不可能有美感——即使混沌和不完美在現實世界中經常出現。但視覺界面并不是靜態的觀賞性的藝術品;它們是動態的，功能性的空間，可以自適應每個用戶，并為用戶而改變形態。我們不應該屈服于純美學設計的誘惑，因為我們根本不可能控制界面呈現（和提供）給用戶的東西。
相反，我們必須為改變而設計！日本人把這稱為wabi-sabi，“以接受短暫和不完美為中心的世界觀”。
因為這個，我們以不同的方式思考和設計就顯得很重要了：
嘗試以多種方式在你的設計中呈現數據;
盡可能使用真實數據。
當你嘗試以幾種方式展示數據時，包括一些不可預測的數據，你將能夠測試界面是否準備好處理超出設計“舒適區”的情況。此外，為極端情況（比如沒有信息或有大量信息時）做準備，并嘗試避免“中心情況”（一切看起來都很好，很平衡的情況）。
如果你已經發布了該產品，這將更容易，因為你可以關注真實的數據并將其用于你正在進行的設計中作為參考。但是，如果你正在開發一些新的東西，那么你將不得不深入挖掘，做一些研究，并了解信息將如何（以及什么樣的信息會）被展示。你還可以和后端團隊的開發人員討論這一點，他能夠更好地向你解釋什么樣的數據將被存儲和呈現。
當使用得當時，scrim（淺遮罩層）能使文字在各種類型的圖像上都便于閱讀。這種技術確保了無論使用哪種（較亮或較暗的）圖像，其頂部的文字都將始終保持清晰。
我會給你一個最后一個更加具體化，有圖像的例子。我的一個開發者朋友把我的行為稱為“漂亮朋友綜合癥”。當我們設計一個包含人物照片（如用戶個人資料）的界面時，我們傾向于使用看起來很好看，和頁面設計風格符合的照片。然而，當我的開發者朋友們看到這樣的設計，他們說：“我倒希望我有這么帥的朋友。”
“完美”照片的替代方案可能是隨機使用不同人群的人的照片。這樣，你就可以測試不同背景上，層層疊疊的元素是否還合拍，對比度和易讀性是否還能保留。
TinyFaces是一個免費的來源于群眾的頭像畫廊（sketch插件），其中頭像可用于個人和商業項目。
不要太樂觀
我們很自然地就對APP的工作能力抱樂觀態度。我們假設一切都會快速流暢地進行而不會中斷，因為……為什么不呢？這樣的態度導致我們有時會忘記設計和處理用戶可能遇到的一些潛在的意外情況。
舉幾個例子，如果用戶突然斷網會發生什么？或者如果執行任務時瀏覽器嘗試連接到API，但出現錯誤怎么辦？如果連接速度太慢，會出現一個加載指示器（如微調器或進度條），還是在加載實際數據時（暫時）填充顯示塊的占位符？刷新APP中的某個界面時會發生什么？什么時候（在哪種情況下）這些可能發生？
Facebook在信息加載時同時顯示。這樣，你會感覺信息的加載速度比實際的要快。
正如你所看到的，我不是在談論用戶導致的錯誤（例如填寫表單時出錯），而是無法控制但還是會發生的錯誤。在這種情況下，更重要的是與開發人員溝通，明白和理解不同界面上可能出現的問題，然后設計一種可以使用戶輕松擺脫困境的方法，讓他們可以稍后再次嘗試，或者執行不同的操作。
在任何情況下，識別觸發每個錯誤的具體條件，并為每個案例設計一個能幫助用戶的錯誤提示總是一個好主意。這些提示將有助于用戶在各種情況下進行適當的回應，并了解解決問題的下一步。即使有時候我們會想偷懶，但也要不惜一切代價避免使用一個統一的錯誤提示。
了解流程
一個界面包括許多元素，它們一起形成了APP的整個布局。然而，當我們把整個用戶界面作為一個整體看待的時候，我們經常會忘記，有些元素還有著一些小的，但服務于整體的任務目標。
說到目標，這就像足球。我是足球運動的大粉絲，就像我的故鄉阿根廷的大多數人。為了使整個團隊能夠贏得勝利，教練要能預料每個球員的表現，并知道他們在不同時刻要執行什么任務——即使是其中一些人的能力不可預知（就像梅西的魔力），讓這種預測更難時，也需要堅持。
Google地圖的保存按鈕有不同的狀態：（1）初始狀態，（2）正在執行操作時表示加載中的狀態;（3）顯示成功結果的最終狀態。
我們繼續往下并（盡量）忘記我的運動類比，讓我們把它翻譯成我們的設計案例。如果有一個觸發某種交互動作的按鈕或項目，請看看下一步：在執行操作時是否顯示加載狀態？有可能因為某些原因被禁用嗎？如果用戶長按按鈕怎么辦？會有什么反饋嗎？就像整個頁面有不同的狀態，單個元素也會有不同狀態。
此外，請記住要考慮產品的邏輯如何與用戶的心理模型相匹配，幫助他們準確有效地實現目標，并以有意義的和可預測的方式完成任務。
解決所有這些問題的方法是停止正在做的任務，暫停，退后一步，通過一系列步驟和操作來查看多個界面和狀態的整個流程，更宏大的全景。我會尋找導致一個問題的多個原因，以及解決它的多條路徑。
你可以在使用原型時進行同樣的操作，緩慢，認真而仔細。如果這對你來說太有挑戰性——因為你以前可能已經做了好幾次，現在就成為一種自動化的工作——你可以借用一些新鮮的眼睛（當然不是字面上的！），只需要一個同事，朋友或活躍用戶來看看設計或原型。看到其他人使用和與你設計的界面進行互動，可能是很有啟發性的，因為我們往往和它太靠近和太熟悉，所以常常忽略它。
為你的屏幕而設計
當我在設計時，我通常會把我的手機放在邊上，以便我預覽我的設計并進行實時調整。為了做到這一點，我會使用Mira，Crystal或Sketch Mirror，這取決于我是為Android還是iOS設計。
我認為這是一個很好的做法，但這樣做也很容易忘記其他使用和你的手機不同型號的手機的用戶。我們有許多不同的屏幕尺寸（特別是在Android平臺上），應該考慮所有可能的變化。
了解從哪里開始的一個方法是檢查你的真實用戶使用哪些類型的電子設備。
當你想讓你的設計適配各種屏幕尺寸時，可不能只是拉伸方框和重新定位元素。我們必須仔細考慮如何能讓它適應各種情況，以及如何進行必要的調整，即使這意味著偏離原始設計。
Google日歷的設計師在手機旋轉時完全重新設計應用的布局，最大限度適應每種情況。
在這些情況下，我們之前討論的原則仍然適用：不可預測的情況，不同種類的內容，多變的信息量，缺失的數據等等——你必須為各種可能的情況設計。不要陷入分割地，獨立地設計界面的陷阱——它們都是息息相關的。
這不僅是對你有幫助，對你的開發者朋友也有幫助，他們需要了解各種可能的情況，以編寫代碼并準備接口來解決這些情況。
你今天需要的東西，可能明天也需要
你可能已經注意到，本文中許多要點的目的是減少沒有準備的情況。即使如此，還是會有很多你不會有明確的答案的情況。開發者經常會問：“如果我這樣做而不是那樣做會發生什么？”——指出你以前沒有考慮過的潛在結果。
如果發生這種情況，那么你只需要解決這一個特定問題，只需要畫一個界面。但我們應該有全局觀，考慮如何將這個特定頁面設計得靈活，以便日后再次使用。
畢竟，這就是我們UX設計人員該做的，我們設計和定義一個靈活的系統，它能適應各種未知狀態，環境和流程。將你的界面視為有生命力的，帶有可移動，可改變的智能部件的生態系統，而不是單個像素塊的集合。
Airbnb的設計團隊制作了一系列組件，可以在整個應用程序中輕松重用。
在這部分過程中，你需要與團隊中的開發人員緊密合作，為各種情況定義一組行為規則。但要保持良好的平衡——盡量不要過度設計，用一般常識設定自己的設計極限。你需要在功能性和一致性之間取得良好的平衡。請記住，一個好的設計系統是靈活的，并且在某些特定情況下能打破規則。
另一方面，想想你已經設計的元素可以如何調整，以適應新的情況。如果你創建一個設計組件庫，這將會更清楚更明確。只需要大概瀏覽設計組件庫，就可以了解你是需要重新設計一個組件，還是可以使用現成的東西。
最終提示和技巧
如果你想讓你的設計能面對各種不可預知的情況，和主要開發人員好好相處吧，提前為他們準備好他們將需要的一切——下面給你一些提示。
與開發人員聯系更加密切
迄今為止，我和開發者朋友（嗨，Pier！）在一起最棒的體驗之一就是坐在他旁邊。這是非常重要的，能帶來巨大的改變，因為這會促進交流。你需要經常和他溝通，來更好地了解產品，其工作原理以及開發人員需要向你了解的內容。你還需要問，一遍又一遍地問，來從宏觀上看清所有可能產生的結果。
參與你自己的設計
以有意識的，愛挑剔的方式參與自己的設計，注意細節和小的交互設計點，深度參與并奉獻自己。在每一步中，想好設計每一個元素的目的，哪些交互動作觸發它，以及在某個控件正常或非正常狀態下，它會發生什么變化。
在不同的場景中測試
看看在你進行設計的環境，設計的舒適區之外，在不同的環境和情況下，你的設計將如何工作。離開你的工作臺，和正在使用（或將要使用）你設計的APP的用戶交流。而且，如果可能的話，最好和你的團隊中的其他人一起去。這也非常重要——每個人都必須和現實世界保持聯系，這樣你們就都能更好地了解真實用戶的情況。
避免無意義的流行語，進行良好溝通
良好溝通的關鍵是相互理解。有時候我們會說一些花哨的話，讓我們聽起來“更聰明”，來證明我們的工作是正確的，但對我們來說更重要的是團隊中的每個人都在同一頻道，能理解對方。相互理解是關鍵。
開發者有自己的行話，但大多數時候你們是在談論同樣的事情，只是用不同的表達。例如，你所說的“界面”對他們來說是“視圖”，你所說的“按鈕”對他們來說是“控件”等等。所以，盡量協調和統一你們將要使用的術語，使信息交流更加暢通。
當你與產品經理和業務合作伙伴交流時，這同樣重要。設計人員需要“多語言”技能并能理解每個人的表達。
使用組件，設計系統和內部圖案庫
我是否提到我是設計系統的積極提倡者？使用組件庫，我可以在僅僅五分鐘內設計一個新界面（不要告訴我的老板！），因為我已經有了我組件新界面所需要的東西。你需要在這些組件第一次出現時定義保存它們，但以后在類似的情況中，它們就可以重復使用，而不僅僅是為了在緊急情況下節省時間。即使在開始時這看起來可能像是浪費時間，但是從長遠來看，這樣做你一定會得到回報。
注意：本文不是主要講組件或圖案庫，但是這是一個很好的（非常詳細的）拓展閱讀。如果你想了解更多信息可以閱讀這篇文章：“Taking PatternLibraries to the Next Level”。
通用電氣的Predix設計系統（來源：“Taking Pattern Libraries to the Next Level”）
