作者：Steven Garrity? ? ? ? ?翻譯：三米工作室PNG團隊
您被要求為移動或網絡應用設計個人資料屏幕。它需要包括頭像，名稱，職位和位置。你啟動Sketch或Figma。也許你拿出你的繪圖鉛筆或直接去標記和CSS①。
無論您選擇何種工具，您最終都可能會得到一些占位符數據。你是那種使用自己名字的人，或者你是否想起你的老朋友Lorem Ipsum先生？也許你有一個假的名字，比如Sophia J. Placeholder。
對我來說，這是Nuno Bettencourt?；蛘?i>Nuno Duarte Gil Mendes Bettencourt，更正式。Nuno在90年代早期的樂隊Extreme中擔任吉他手。對于你們中間的年輕人，他是蕾哈娜的旅行音樂家。這些對我們今天的目的來說都不重要，除了他那相當長的名字。
對于占位符名稱，您可能覺得不重要。它不會在最終產品中結束- 它只是一個變量。嗯，這很重要。您開始使用的文本將巧妙地影響您對布局和樣式的處理方式。它可能會限制您自己考慮的選項范圍，或者更危險的是，會掩蓋您稍后會遇到的實際限制。
可能會想到一些明顯的解決方案：使用長占位符名稱;?在您的設計中使用真實數據。雖然這些都是一個良好的開端，但值得深入探討這些和其他實踐如何改善您的設計過程并幫助生產更耐用的產品。
?
這不僅僅是假名
這不僅僅是假名。這也是假地址！假標題！假照片！當我們圍繞有限的數據進行設計時，限制就會滲透到我們的設計中。
無法處理長字符串文本是組件在與實際數據接觸時可能失敗的最基本且最常見的方式。您認為標簽會標記為“設置”嗎？那么，現在它被稱為“應用程序首選項”。
長度只是真實文本和數據可以使弱設計變形的眾多方式之一。您可能還會遇到意外的換行符，甚至是太短的文本。請注意以下我們傾向于使用簡單的占位符數據作弊的區域。
帳戶資料照片
不要指望人們擁有具有純白色背景的工作室品質的自畫像（并且懷疑那些做過的人?。?。許多人可能根本不想為他們的帳戶上傳照片。其他人可能會試圖將他們太寬的公司徽標擠進那個小方形或圓形區域。您無法考慮所有可能的數據，但如果您在設計過程的早期就將其中一些不太直觀的理想案例納入其中，那么您的輸出將更具彈性。
視頻和照片的縮略圖
并非所有縮略圖都符合您預期的寬高比。有些可能包含與周圍頁面意外沖突的文本或圖像。我看到的一個常見問題是設計精美的主頁，頂部突出顯示公司徽標。然后，視頻到達，視頻的默認海報圖像也包括公司徽標?，F在，您美麗的主頁布局看起來像徽標沙拉。
量的狂野變化
????包含列表的元素，其中這些列表中的項目數量可能會有很大差異。想象一下帶有卡片的布局，其中每張卡片都包含一組標簽。一張卡可能有三個標簽，而另一張卡可能有二十五個。當一個特定元件的長度與其他元件的長度變化很大時，表格數據在美學和易讀性方面也會受到影響。
缺少元素
您可以為站點標題創建一個漂亮的布局，從手機到27英寸顯示屏可以很好地擴展。然后你發現它需要一個支持菜單項 - 但沒有空間！我經常通過編譯兩個列表來啟動線框。第一個包含此屏幕的訪問者需要完成的目標。第二個有需要在這個屏幕上生活的元素。請務必包括所有元素 - 從主要內容到廣告，再到頁腳中的隱私鏈接。在沒有考慮其包含的廣告的情況下，發現設計的網站特別容易。
視口大小
除了占位符數據，我們傾向于以最迷人的視口大小呈現我們的設計。或者更確切地說，我們設計的布局最適合我們為模型選擇的尺寸- 特別是當我們使用圍繞固定框架尺寸構建的工具進行設計時。在被忽視的響應式設計低谷中，我們發現了兩個常見的陷阱：拉伸的移動布局和壓扁的桌面設計布局。???
靈活的設計可以更容易設計
我們不能在每一個邊緣案例上花費無數的時間（以及我們客戶的錢）。我們可以更加關注我們創建的畫布，我們使用的工具以及我們設計的數據的影響。
有必要將注意力和測試重點放在最常訪問網站的方式上。在每個屏幕尺寸上，不一定是完美的，也永遠不會是完美的。放開控制并抓住這種靈活性是網絡設計的一部分。
?????靈活設計還可以使您的設計更易于訪問。那些有視力障礙的人（我們大多數人在我們生活中的某些時候）可以使用自定義的最小字體大小進行瀏覽。其他人可能會在縮放級別瀏覽，即使在大型桌面瀏覽器上也會觸發針對移動設備的響應式布局。
避免令人失望的揭示?
有足夠的因素可以為客戶和利益相關者帶來不切實際的期望，并對最終的實施感到失望。不要通過展示看起來完美無瑕的設計來增加這種潛在的期望錯配，只是讓客戶在嚴酷的實際數據中審視它們。
雖然你可能需要讓人們相信你的設計的優點，但如果你選擇展示一個不切實際的設計，你只會讓自己失敗。相反，最初通過顯示具有理想數據的布局來沉迷然后通過顯示難以處理的數據的變化來展示設計的持久性和靈活性。這不僅有助于人們了解您的設計，還有助于您了解流程和專業知識的價值。
當我還是個孩子的時候，我清楚地記得從一個門到另一個門的真空推銷員跳上吸塵器來展示他的產品的耐用性。我們不需要一個新的真空（整個門到門模型的缺陷），但這畫面一直困擾著我。跳上你的設計吧！把它們扔在墻上！用垃圾填充它們并顯示它們如何保持良好狀態。
例如，在向客戶端顯示設計時，向他們展示它如何適應各種視口寬度和默認字體大小。向客戶展示他們的網站如何響應瀏覽器大小也可以幫助他們放棄僅針對特定設備和他們碰巧使用的尺寸進行設計的需求。如果你有一個很好的方式來處理個人資料頁面上的長名稱，請展示它！這可以幫助您的客戶了解除靜態屏幕截圖中可見的工作（以及時間和金錢）之外還有其他方面的工作。
垃圾進去，黃金出來？
舊的計算機科學格言寫道：“垃圾進入，垃圾出來。”相反，目標是“垃圾進入，人力資源......還不錯?！备玫闹V語可能是Postel定律，也稱為魯棒性原則：“保守你的所作所為，也要接受別人的自由?！叭绻阆胂笥幸粋€壞人試圖選擇你的設計，他們將如何打破它？也許將瀏覽器壓縮到一個狹窄的大小，并輸入一些異常長的標題（垃圾進入）。您的設計應該對窄寬度做出很好的響應，并優雅地減少特別長的標題（金色）的字體大小。
通過練習，您可以內化部分此過程。你會直覺地知道給定視覺設計會帶來哪些陷阱。與可訪問性或國際化方面的專家學習快速發現限制設計普遍性的常見缺陷的方式大致相同。雖然我們的直覺可以幫助我們，但它也可以欺騙我們- 確保測試，并了解真實的人如何使用您的產品。
即使你磨練自己預測和避免常見錯誤的能力，你的思想也會不斷地走向阻力最小的道路。像在高海拔地區訓練的耐力運動員，用腳踝重量訓練，或者職業棒球運動員用加重蝙蝠練習揮桿，我們必須繼續人為地增加我們的工作壓力。
真實數據不夠好
關于使用真實數據進行設計的好處已經寫了很多。我的同事Daniel Burka寫道：
“盡量不掩飾復雜性。在現實世界中進行設計工作非常困難。如果你設計一個虛假的圖表，請輸入真實的數據。如果你假裝重新設計一個網站，...不要只是神奇地刪除一個廣告單元。如果您創建一個性感的虛假登錄屏幕，請不要忘記包括恢復丟失的密碼或用戶名的方法。...寫真實副本。Lorem ipsum適合業余愛好者。”
Daniel是對的 - 特別是在界面元素方面，文本的含義與函數不可分割。當涉及到可能顯示廣泛可變內容的設計元素（例如，配置文件照片或名稱）時，您可以比使用真實數據做得更好。超越現實數據。獲取困難的數據。
如果您能夠提取實際數據，請在最壞的情況下進行挖掘。如果你可以處理最壞的情況，常見的情況將是輕而易舉的。
重新設計現有屏幕時，請利用可用的當前和歷史數據。挖掘數據的極端，找到最長和最短的標題。如果您使用照片或視頻的縮略圖進行設計，請抓取一組隨機的真實縮略圖，然后扔掉那些您知道易于設計的縮略圖。
如果您沒有現有數據，甚至在沒有現有數據時，請創建困難的示例。寫出標題，推動超出屏幕可容納的范圍。創建具有自己的內置邊框或陰影的縮略圖圖像，并查看它們與您所擁有的內容的沖突。
有時可以（并且應該）修復困難的數據
雖然您的設計應盡可能健壯，但有時可能會出現不必如此的邊緣情況。在設計帶有客戶端的列表頁面時，我們查看了他們的完整數據存檔，以了解項目標題的長度是如何變化的。最短的標題是8個字符，最長的是超過320個，但只有少數超過80個。
我們與客戶合作創建了一個迎合最多80個字符標題的設計。然后對那些少數異常值進行了一些編輯手術以使它們處于極限之下。結果他們最終成為了更好的頭銜。
在處理由您的公司，團隊或客戶管理的內容時，還需要將這些實踐編入風格指南。您無需花費大量精力設計來自大廳的困難數據。
國際化
我有幸與Mozilla的團隊合作，在那里頁面被翻譯成多達八十種語言。通過這種廣泛的本地化工作，我們學會了構建支持非拉丁字符集和具有從右到左文本方向的語言的頁面布局和設計。
支持從左到右和從右到左的語言不僅需要允許文本字符串反轉。布局和設計的整個視覺結構需要能夠水平翻轉。而不是令人沮喪的限制，你會發現這個和其他類似的限制將幫助你開發設計超級大國。
由于預期德語等語言中的文本字符串較長，一些設計人員開發了一個過程，其中拉丁文本的生成長度是源文本的兩倍。W3C有一篇關于跨語言共同長度比的方便文章。
資本化在某些語言環境中也可能存在問題- 尤其是在強制使用CSS時。如果您的設計確實依賴于text-transform: uppercase或者text-transform: lowercase，要么重新審視設計更靈活，要么在源文本中處理大寫（而不是通過CSS），以便本地化團隊可以保持對大寫的控制。
MDN是更多關于本地化設計的重要資源。在設計過程中涉及占位符數據時要注意自己的文化盲目性。設計作弊經常影響那些最不喜歡自己的人。
盡可能設計困難的數據
關于我們的工具如何幫助我們設計真實數據已經寫了很多（并且應該被閱讀）。借助現代設計和原型設計工具，HTML / CSS / JS原型，甚至靜態模型，如果我們不將設計推向突破點，結果將是自欺欺人。
在快速制造和過度建設之間總是存在平衡。與設計和網絡上的所有內容一樣，這取決于數據，受眾，項目和目標。
設計不出更優秀的作品的常見借口往往是時間表和預算。特別是在大型項目中，學習如何將更多難度數據納入早期設計過程可以節省很多時間。
就像長跑運動員通過在高海拔的空氣中訓練而提高，通過從一開始就建立困難的數據，你將成為一個更優秀的設計師。您將更加了解設計可能處在什么位置并防患于未然，從而更好地傳達您的流程和決策。
注：
①：CSS：層疊樣式表(英文全稱：CascadingStyle Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。 CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力。
———三米工作室PNG團隊翻譯
