您被要求為移動或網(wǎng)絡(luò)應用設(shè)計個人資料屏幕。它需要包括頭像牍帚，名稱儡遮，職位和位置。你啟動Sketch或Figma暗赶。也許你拿出你的繪圖鉛筆或直接去標記和CSS①鄙币。
無論您選擇何種工具，您最終都可能會得到一些占位符數(shù)據(jù)蹂随。你是那種使用自己名字的人十嘿，或者你是否想起你的老朋友Lorem Ipsum先生？也許你有一個假的名字岳锁，比如Sophia J. Placeholder详幽。
對我來說，這是Nuno Bettencourt浸锨〈狡福或者Nuno Duarte Gil Mendes Bettencourt，更正式柱搜。Nuno在90年代早期的樂隊Extreme中擔任吉他手迟郎。對于你們中間的年輕人，他是蕾哈娜的旅行音樂家聪蘸。這些對我們今天的目的來說都不重要宪肖，除了他那相當長的名字。
對于占位符名稱健爬，您可能覺得不重要控乾。它不會在最終產(chǎn)品中結(jié)束 - 它只是一個變量。嗯娜遵，這很重要蜕衡。您開始使用的文本將巧妙地影響您對布局和樣式的處理方式。它可能會限制您自己考慮的選項范圍设拟，或者更危險的是慨仿，會掩蓋您稍后會遇到的實際限制久脯。
? ? ? ?可能會想到一些明顯的解決方案：使用長占位符名稱;?在您的設(shè)計中使用真實數(shù)據(jù)。雖然這些都是一個良好的開端镰吆，但值得深入探討這些和其他實踐如何改善您的設(shè)計過程并幫助生產(chǎn)更耐用的產(chǎn)品帘撰。
這不僅僅是假名
? ? ? ?這不僅僅是假名。這也是假地址万皿！假標題摧找！假照片！當我們圍繞有限的數(shù)據(jù)進行設(shè)計時牢硅，限制就會滲透到我們的設(shè)計中蹬耘。
? ? ? ?無法處理長字符串文本是組件在與實際數(shù)據(jù)接觸時可能失敗的最基本且最常見的方式。您認為標簽會標記為“設(shè)置”嗎唤衫？那么婆赠，現(xiàn)在它被稱為“應用程序首選項”。
? ? ? ?長度只是真實文本和數(shù)據(jù)可以使弱設(shè)計變形的眾多方式之一佳励。您可能還會遇到意外的換行符休里，甚至是太短的文本。請注意以下我們傾向于使用簡單的占位符數(shù)據(jù)作弊的區(qū)域赃承。
帳戶資料照片
? ? ? ?不要指望人們擁有具有純白色背景的工作室品質(zhì)的自畫像（并且懷疑那些做過的人Ｃ钍颉）。許多人可能根本不想為他們的帳戶上傳照片瞧剖。其他人可能會試圖將他們太寬的公司徽標擠進那個小方形或圓形區(qū)域拭嫁。您無法考慮所有可能的數(shù)據(jù)，但如果您在設(shè)計過程的早期就將其中一些不太直觀的理想案例納入其中抓于，那么您的輸出將更具彈性做粤。
視頻和照片的縮略圖
? ? ? ?并非所有縮略圖都符合您預期的寬高比。有些可能包含與周圍頁面意外沖突的文本或圖像捉撮。我看到的一個常見問題是設(shè)計精美的主頁怕品，頂部突出顯示公司徽標。然后巾遭，視頻到達肉康，視頻的默認海報圖像也包括公司徽標。現(xiàn)在灼舍，您美麗的主頁布局看起來像徽標沙拉吼和。
量的狂野變化
? ? ? ?包含列表的元素，其中這些列表中的項目數(shù)量可能會有很大差異骑素。想象一下帶有卡片的布局炫乓，其中每張卡片都包含一組標簽。一張卡可能有三個標簽，而另一張卡可能有二十五個厢岂。當一個特定元件的長度與其他元件的長度變化很大時光督，表格數(shù)據(jù)在美學和易讀性方面也會受到影響阳距。
缺少元素
? ? ? ?您可以為站點標題創(chuàng)建一個漂亮的布局塔粒，從手機到27英寸顯示屏可以很好地擴展。然后你發(fā)現(xiàn)它需要一個支持菜單項 - 但沒有空間筐摘！我經(jīng)常通過編譯兩個列表來啟動線框卒茬。第一個包含此屏幕的訪問者需要完成的目標。第二個有需要在這個屏幕上生活的元素咖熟。請務(wù)必包括所有元素 - 從主要內(nèi)容到廣告圃酵，再到頁腳中的隱私鏈接。在沒有考慮其包含的廣告的情況下馍管，發(fā)現(xiàn)設(shè)計的網(wǎng)站特別容易郭赐。
視口大小
? ? ? ?除了占位符數(shù)據(jù)，我們傾向于以最迷人的視口大小呈現(xiàn)我們的設(shè)計确沸“贫В或者更確切地說，我們設(shè)計的布局最適合我們?yōu)槟Ｐ瓦x擇的尺寸 - 特別是當我們使用圍繞固定框架尺寸構(gòu)建的工具進行設(shè)計時罗捎。在被忽視的響應式設(shè)計低谷中观谦，我們發(fā)現(xiàn)了兩個常見的陷阱：拉伸的移動布局和壓扁的桌面設(shè)計布局。
? ? ? ? ? ? ? 拉伸的移動布局? ? ? ? ? ? ? ? ? ? ? 壓扁的桌面布局
靈活的設(shè)計可以更容易設(shè)計
? ? ? ?我們不能在每一個邊緣案例上花費無數(shù)的時間（以及我們客戶的錢）桨菜。我們可以更加關(guān)注我們創(chuàng)建的畫布豁状，我們使用的工具以及我們設(shè)計的數(shù)據(jù)的影響。
? ? ? ?有必要將注意力和測試重點放在最常訪問網(wǎng)站的方式上倒得。在每個屏幕尺寸上泻红，不一定是完美的，也永遠不會是完美的霞掺。HYPERLINK "https://alistapart.com/article/the-illusion-of-control-in-web-design"放開控制并抓住這種靈活性是網(wǎng)絡(luò)設(shè)計的一部分谊路。
? ? ? ?靈活設(shè)計還可以使您的設(shè)計更易于訪問。那些有視力障礙的人（我們大多數(shù)人在我們生活中的某些時候）可以使用自定義的最小字體大小進行瀏覽根悼。其他人可能會在縮放級別瀏覽凶异，即使在大型桌面瀏覽器上也會觸發(fā)針對移動設(shè)備的響應式布局。
避免令人失望的揭示?
? ? ? ?有足夠的因素可以為客戶和利益相關(guān)者帶來不切實際的期望挤巡，并對最終的實施感到失望剩彬。不要通過展示看起來完美無瑕的設(shè)計來增加這種潛在的期望錯配，只是讓客戶在嚴酷的實際數(shù)據(jù)中審視它們矿卑。
? ? ? ?雖然你可能需要讓人們相信你的設(shè)計的優(yōu)點喉恋，但如果你選擇展示一個不切實際的設(shè)計，你只會讓自己失敗。相反轻黑，最初通過顯示具有理想數(shù)據(jù)的布局來沉迷然后通過顯示難以處理的數(shù)據(jù)的變化來展示設(shè)計的持久性和靈活性糊肤。這不僅有助于人們了解您的設(shè)計，還有助于您了解流程和專業(yè)知識的價值氓鄙。
? ? ? ?當我還是個孩子的時候馆揉，我清楚地記得從一個門到另一個門的真空推銷員跳上吸塵器來展示他的產(chǎn)品的耐用性。我們不需要一個新的真空（整個門到門模型的缺陷）抖拦，但這畫面一直困擾著我升酣。跳上你的設(shè)計吧！把它們?nèi)釉趬ι咸铮∮美畛渌鼈儾@示它們?nèi)绾伪３至己脿顟B(tài)噩茄。
? ? ? ? 例如，在向客戶端顯示設(shè)計時复颈，向他們展示它如何適應各種視口寬度和默認字體大小绩聘。向客戶展示他們的網(wǎng)站如何響應瀏覽器大小也可以幫助他們放棄僅針對特定設(shè)備和他們碰巧使用的尺寸進行設(shè)計的需求。如果你有一個很好的方式來處理個人資料頁面上的長名稱耗啦，請展示它凿菩！這可以幫助您的客戶了解除靜態(tài)屏幕截圖中可見的工作（以及時間和金錢）之外還有其他方面的工作。
垃圾進去芹彬，黃金出來蓄髓？
? ? ? ?舊的計算機科學格言寫道：“垃圾進入，垃圾出來舒帮』岷龋”相反，目標是“垃圾進入玩郊，人力資源......還不錯肢执。”更好的諺語可能是 HYPERLINK "https://en.wikipedia.org/wiki/Robustness_principle" Postel定律译红，也稱為魯棒性原則：“保守你的所作所為预茄，也要接受別人的自由≌旌瘢“如果你想象有一個壞人試圖選擇你的設(shè)計耻陕，他們將如何打破它？也許將瀏覽器壓縮到一個狹窄的大小刨沦，并輸入一些異常長的標題（垃圾進入）诗宣。您的設(shè)計應該對窄寬度做出很好的響應，并優(yōu)雅地減少特別長的標題（金色）的字體大小想诅。
? ? ? ? 通過練習召庞，您可以內(nèi)化部分此過程岛心。你會直覺地知道給定視覺設(shè)計會帶來哪些陷阱。與可訪問性或國際化方面的專家學習快速發(fā)現(xiàn)限制設(shè)計普遍性的常見缺陷的方式大致相同篮灼。雖然我們的直覺可以幫助我們忘古，但它也可以欺騙我們 - 確保測試，并了解真實的人如何使用您的產(chǎn)品诅诱。
? ? ? ?即使你磨練自己預測和避免常見錯誤的能力髓堪，你的思想也會不斷地走向阻力最小的道路。像在高海拔地區(qū)訓練的耐力運動員逢艘，用腳踝重量訓練旦袋，或者職業(yè)棒球運動員用加重蝙蝠練習揮桿骤菠，我們必須繼續(xù)人為地增加我們的工作壓力它改。
真實數(shù)據(jù)不夠好
? ? ? ?關(guān)于使用真實數(shù)據(jù)進行設(shè)計的好處已經(jīng)寫了很多。我的同事HYPERLINK "https://library.gv.com/fake-designs-yield-real-results-c39cfc9ae93" Daniel Burka寫道：
? ? ? ?“盡量不掩飾復雜性商乎。在現(xiàn)實世界中進行設(shè)計工作非常困難央拖。如果你設(shè)計一個虛假的圖表，請輸入真實的數(shù)據(jù)鹉戚。如果你假裝重新設(shè)計一個網(wǎng)站鲜戒，...不要只是神奇地刪除一個廣告單元。如果您創(chuàng)建一個性感的虛假登錄屏幕抹凳，請不要忘記包括恢復丟失的密碼或用戶名的方法遏餐。...寫真實副本。Lorem ipsum適合業(yè)余愛好者赢底∈Ф迹”
? ? ? ?Daniel是對的 - 特別是在界面元素方面，文本的含義與函數(shù)不可分割幸冻。當涉及到可能顯示廣泛可變內(nèi)容的設(shè)計元素（例如粹庞，配置文件照片或名稱）時，您可以比使用真實數(shù)據(jù)做得更好洽损。超越現(xiàn)實數(shù)據(jù)庞溜。獲取困難的數(shù)據(jù)。
? ? ? ? 如果您能夠提取實際數(shù)據(jù)碑定，請在最壞的情況下進行挖掘流码。如果你可以處理最壞的情況，常見的情況將是輕而易舉的延刘。
? ? ? ? 重新設(shè)計現(xiàn)有屏幕時漫试，請利用可用的當前和歷史數(shù)據(jù)。挖掘數(shù)據(jù)的極端访娶，找到最長和最短的標題商虐。如果您使用照片或視頻的縮略圖進行設(shè)計觉阅，請抓取一組隨機的真實縮略圖，然后扔掉那些您知道易于設(shè)計的縮略圖秘车。
? ? ? ?如果您沒有現(xiàn)有數(shù)據(jù)典勇，甚至在沒有現(xiàn)有數(shù)據(jù)時，請創(chuàng)建困難的示例叮趴。寫出標題割笙，推動超出屏幕可容納的范圍。創(chuàng)建具有自己的內(nèi)置邊框或陰影的縮略圖圖像眯亦，并查看它們與您所擁有的內(nèi)容的沖突伤溉。
有時可以（并且應該）修復困難的數(shù)據(jù)
? ? ? ?雖然您的設(shè)計應盡可能健壯，但有時可能會出現(xiàn)不必如此的邊緣情況妻率。在設(shè)計帶有客戶端的列表頁面時乱顾，我們查看了他們的完整數(shù)據(jù)存檔，以了解項目標題的長度是如何變化的宫静。最短的標題是8個字符走净，最長的是超過320個，但只有少數(shù)超過80個孤里。
? ? ? ? 我們與客戶合作創(chuàng)建了一個迎合最多80個字符標題的設(shè)計伏伯。然后對那些少數(shù)異常值進行了一些編輯手術(shù)以使它們處于極限之下。結(jié)果他們最終成為了更好的頭銜捌袜。
? ? ? ? 在處理由您的公司说搅，團隊或客戶管理的內(nèi)容時，還需要將這些實踐編入風格指南虏等。您無需花費大量精力設(shè)計來自大廳的困難數(shù)據(jù)弄唧。
國際化
? ? ? ? 我有幸與Mozilla的團隊合作，在那里頁面被翻譯成多達八十種語言博其。通過這種廣泛的本地化工作套才，我們學會了構(gòu)建支持非拉丁字符集和具有從右到左文本方向的語言的頁面布局和設(shè)計。
? ? ? ? 支持從左到右和從右到左的語言不僅需要允許文本字符串反轉(zhuǎn)慕淡。布局和設(shè)計的整個視覺結(jié)構(gòu)需要能夠水平翻轉(zhuǎn)背伴。而不是令人沮喪的限制，你會發(fā)現(xiàn)這個和其他類似的限制將幫助你開發(fā)設(shè)計超級大國峰髓。
? ? ? ?由于預期德語等語言中的文本字符串較長傻寂，一些設(shè)計人員開發(fā)了一個過程，其中拉丁文本的生成長度是源文本的兩倍携兵。W3C有HYPERLINK "https://www.w3.org/International/articles/article-text-size"一篇關(guān)于跨語言共同長度比的HYPERLINK "https://www.w3.org/International/articles/article-text-size"方便文章疾掰。
? ? ? ?資本化在某些語言環(huán)境中也可能存在問題 - 尤其是在強制使用CSS時。如果您的設(shè)計確實依賴于text-transform: uppercase或者text-transform: lowercase徐紧，要么重新審視設(shè)計更靈活静檬，要么在源文本中處理大寫（而不是通過CSS）炭懊，以便本地化團隊可以保持對大寫的控制。
? ? ? ? MDN是更多關(guān)于HYPERLINK "https://developer.mozilla.org/en-US/docs/Mozilla/Localization/Localization_content_best_practices" \l "Create_localizable_UI"本地化設(shè)計的重要資源拂檩。在設(shè)計過程中涉及占位符數(shù)據(jù)時要注意自己的文化盲目性侮腹。設(shè)計作弊經(jīng)常影響那些最不喜歡自己的人。
盡可能設(shè)計困難的數(shù)據(jù)
? ? ? ? 關(guān)于我們的HYPERLINK "https://medium.com/bridge-collection/modern-design-tools-using-real-data-62d499e97482"工具如何幫助我們設(shè)計真實數(shù)據(jù)已經(jīng)寫了很多（并且應該被閱讀）稻励。借助現(xiàn)代設(shè)計和原型設(shè)計工具父阻，HTML / CSS / JS原型，甚至靜態(tài)模型望抽，如果我們不將設(shè)計推向突破點加矛，結(jié)果將是自欺欺人。
? ? ? ?在快速制造和過度建設(shè)之間總是存在平衡煤篙。與設(shè)計和網(wǎng)絡(luò)上的所有內(nèi)容一樣斟览，這取決于數(shù)據(jù)，受眾舰蟆，項目和目標趣惠。
? ? ? ?設(shè)計不出更優(yōu)秀的作品的常見借口往往是時間表和預算。特別是在大型項目中身害，學習如何將更多難度數(shù)據(jù)納入早期設(shè)計過程可以節(jié)省很多時間草戈。
? ? ? ? 就像長跑運動員通過在高海拔的空氣中訓練而提高唐片，通過從一開始就建立困難的數(shù)據(jù)，你將成為一個更優(yōu)秀的設(shè)計師抢埋。您將更加了解設(shè)計可能處在什么位置并防患于未然，從而更好地傳達您的流程和決策。
注：
①：CSS：層疊樣式表(英文全稱：CascadingStyle Sheets)是一種用來表現(xiàn)HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言驾诈。CSS不僅可以靜態(tài)地修飾網(wǎng)頁翘鸭，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進行格式化拱烁。 CSS 能夠?qū)W(wǎng)頁中元素位置的排版進行像素級精確控制邦投，支持幾乎所有的字體字號樣式猛们，擁有對網(wǎng)頁對象和模型樣式編輯的能力。
——— 三米工作室 · 每周優(yōu)質(zhì)文章翻譯 ——
