作者：Steven Garrity??2018年9月6日

翻譯：三米工作室PNG團(tuán)隊(duì)

您被要求為移動(dòng)或網(wǎng)絡(luò)應(yīng)用設(shè)計(jì)個(gè)人資料屏幕。它需要包括頭像，名稱(chēng)，職位和位置。你啟動(dòng)Sketch或Figma。也許你拿出你的繪圖鉛筆或直接去標(biāo)記和CSS①。

無(wú)論您選擇何種工具，您最終都可能會(huì)得到一些占位符數(shù)據(jù)。你是那種使用自己名字的人，或者你是否想起你的老朋友Lorem Ipsum先生？也許你有一個(gè)假的名字，比如Sophia J. Placeholder。

對(duì)我來(lái)說(shuō)，這是Nuno Bettencourt。或者Nuno Duarte Gil Mendes Bettencourt，更正式。Nuno在90年代早期的樂(lè)隊(duì)Extreme中擔(dān)任吉他手。對(duì)于你們中間的年輕人，他是蕾哈娜的旅行音樂(lè)家。這些對(duì)我們今天的目的來(lái)說(shuō)都不重要，除了他那相當(dāng)長(zhǎng)的名字。

對(duì)于占位符名稱(chēng)，您可能覺(jué)得不重要。它不會(huì)在最終產(chǎn)品中結(jié)束- 它只是一個(gè)變量。嗯，這很重要。您開(kāi)始使用的文本將巧妙地影響您對(duì)布局和樣式的處理方式。它可能會(huì)限制您自己考慮的選項(xiàng)范圍，或者更危險(xiǎn)的是，會(huì)掩蓋您稍后會(huì)遇到的實(shí)際限制。

可能會(huì)想到一些明顯的解決方案：使用長(zhǎng)占位符名稱(chēng);?在您的設(shè)計(jì)中使用真實(shí)數(shù)據(jù)。雖然這些都是一個(gè)良好的開(kāi)端，但值得深入探討這些和其他實(shí)踐如何改善您的設(shè)計(jì)過(guò)程并幫助生產(chǎn)更耐用的產(chǎn)品。

?

這不僅僅是假名

這不僅僅是假名。這也是假地址！假標(biāo)題！假照片！當(dāng)我們圍繞有限的數(shù)據(jù)進(jìn)行設(shè)計(jì)時(shí)，限制就會(huì)滲透到我們的設(shè)計(jì)中。

無(wú)法處理長(zhǎng)字符串文本是組件在與實(shí)際數(shù)據(jù)接觸時(shí)可能失敗的最基本且最常見(jiàn)的方式。您認(rèn)為標(biāo)簽會(huì)標(biāo)記為“設(shè)置”嗎？那么，現(xiàn)在它被稱(chēng)為“應(yīng)用程序首選項(xiàng)”。

長(zhǎng)度只是真實(shí)文本和數(shù)據(jù)可以使弱設(shè)計(jì)變形的眾多方式之一。您可能還會(huì)遇到意外的換行符，甚至是太短的文本。請(qǐng)注意以下我們傾向于使用簡(jiǎn)單的占位符數(shù)據(jù)作弊的區(qū)域。

帳戶(hù)資料照片

不要指望人們擁有具有純白色背景的工作室品質(zhì)的自畫(huà)像（并且懷疑那些做過(guò)的人！）。許多人可能根本不想為他們的帳戶(hù)上傳照片。其他人可能會(huì)試圖將他們太寬的公司徽標(biāo)擠進(jìn)那個(gè)小方形或圓形區(qū)域。您無(wú)法考慮所有可能的數(shù)據(jù)，但如果您在設(shè)計(jì)過(guò)程的早期就將其中一些不太直觀的理想案例納入其中，那么您的輸出將更具彈性。

視頻和照片的縮略圖

并非所有縮略圖都符合您預(yù)期的寬高比。有些可能包含與周?chē)?yè)面意外沖突的文本或圖像。我看到的一個(gè)常見(jiàn)問(wèn)題是設(shè)計(jì)精美的主頁(yè)，頂部突出顯示公司徽標(biāo)。然后，視頻到達(dá)，視頻的默認(rèn)海報(bào)圖像也包括公司徽標(biāo)。現(xiàn)在，您美麗的主頁(yè)布局看起來(lái)像徽標(biāo)沙拉。

量的狂野變化

包含列表的元素，其中這些列表中的項(xiàng)目數(shù)量可能會(huì)有很大差異。想象一下帶有卡片的布局，其中每張卡片都包含一組標(biāo)簽。一張卡可能有三個(gè)標(biāo)簽，而另一張卡可能有二十五個(gè)。當(dāng)一個(gè)特定元件的長(zhǎng)度與其他元件的長(zhǎng)度變化很大時(shí)，表格數(shù)據(jù)在美學(xué)和易讀性方面也會(huì)受到影響。

缺少元素

您可以為站點(diǎn)標(biāo)題創(chuàng)建一個(gè)漂亮的布局，從手機(jī)到27英寸顯示屏可以很好地?cái)U(kuò)展。然后你發(fā)現(xiàn)它需要一個(gè)支持菜單項(xiàng) - 但沒(méi)有空間！我經(jīng)常通過(guò)編譯兩個(gè)列表來(lái)啟動(dòng)線(xiàn)框。第一個(gè)包含此屏幕的訪(fǎng)問(wèn)者需要完成的目標(biāo)。第二個(gè)有需要在這個(gè)屏幕上生活的元素。請(qǐng)務(wù)必包括所有元素 - 從主要內(nèi)容到廣告，再到頁(yè)腳中的隱私鏈接。在沒(méi)有考慮其包含的廣告的情況下，發(fā)現(xiàn)設(shè)計(jì)的網(wǎng)站特別容易。

視口大小

除了占位符數(shù)據(jù)，我們傾向于以最迷人的視口大小呈現(xiàn)我們的設(shè)計(jì)。或者更確切地說(shuō)，我們?cè)O(shè)計(jì)的布局最適合我們?yōu)槟Ｐ瓦x擇的尺寸- 特別是當(dāng)我們使用圍繞固定框架尺寸構(gòu)建的工具進(jìn)行設(shè)計(jì)時(shí)。在被忽視的響應(yīng)式設(shè)計(jì)低谷中，我們發(fā)現(xiàn)了兩個(gè)常見(jiàn)的陷阱：拉伸的移動(dòng)布局和壓扁的桌面設(shè)計(jì)布局。

靈活的設(shè)計(jì)可以更容易設(shè)計(jì)

我們不能在每一個(gè)邊緣案例上花費(fèi)無(wú)數(shù)的時(shí)間（以及我們客戶(hù)的錢(qián)）。我們可以更加關(guān)注我們創(chuàng)建的畫(huà)布，我們使用的工具以及我們?cè)O(shè)計(jì)的數(shù)據(jù)的影響。

有必要將注意力和測(cè)試重點(diǎn)放在最常訪(fǎng)問(wèn)網(wǎng)站的方式上。在每個(gè)屏幕尺寸上，不一定是完美的，也永遠(yuǎn)不會(huì)是完美的。放開(kāi)控制并抓住這種靈活性是網(wǎng)絡(luò)設(shè)計(jì)的一部分。

靈活設(shè)計(jì)還可以使您的設(shè)計(jì)更易于訪(fǎng)問(wèn)。那些有視力障礙的人（我們大多數(shù)人在我們生活中的某些時(shí)候）可以使用自定義的最小字體大小進(jìn)行瀏覽。其他人可能會(huì)在縮放級(jí)別瀏覽，即使在大型桌面瀏覽器上也會(huì)觸發(fā)針對(duì)移動(dòng)設(shè)備的響應(yīng)式布局。

避免令人失望的揭示?

有足夠的因素可以為客戶(hù)和利益相關(guān)者帶來(lái)不切實(shí)際的期望，并對(duì)最終的實(shí)施感到失望。不要通過(guò)展示看起來(lái)完美無(wú)瑕的設(shè)計(jì)來(lái)增加這種潛在的期望錯(cuò)配，只是讓客戶(hù)在嚴(yán)酷的實(shí)際數(shù)據(jù)中審視它們。

雖然你可能需要讓人們相信你的設(shè)計(jì)的優(yōu)點(diǎn)，但如果你選擇展示一個(gè)不切實(shí)際的設(shè)計(jì)，你只會(huì)讓自己失敗。相反，最初通過(guò)顯示具有理想數(shù)據(jù)的布局來(lái)沉迷然后通過(guò)顯示難以處理的數(shù)據(jù)的變化來(lái)展示設(shè)計(jì)的持久性和靈活性。這不僅有助于人們了解您的設(shè)計(jì)，還有助于您了解流程和專(zhuān)業(yè)知識(shí)的價(jià)值。

當(dāng)我還是個(gè)孩子的時(shí)候，我清楚地記得從一個(gè)門(mén)到另一個(gè)門(mén)的真空推銷(xiāo)員跳上吸塵器來(lái)展示他的產(chǎn)品的耐用性。我們不需要一個(gè)新的真空（整個(gè)門(mén)到門(mén)模型的缺陷），但這畫(huà)面一直困擾著我。跳上你的設(shè)計(jì)吧！把它們?nèi)釉趬ι希∮美畛渌鼈儾@示它們?nèi)绾伪３至己脿顟B(tài)。

例如，在向客戶(hù)端顯示設(shè)計(jì)時(shí)，向他們展示它如何適應(yīng)各種視口寬度和默認(rèn)字體大小。向客戶(hù)展示他們的網(wǎng)站如何響應(yīng)瀏覽器大小也可以幫助他們放棄僅針對(duì)特定設(shè)備和他們碰巧使用的尺寸進(jìn)行設(shè)計(jì)的需求。如果你有一個(gè)很好的方式來(lái)處理個(gè)人資料頁(yè)面上的長(zhǎng)名稱(chēng)，請(qǐng)展示它！這可以幫助您的客戶(hù)了解除靜態(tài)屏幕截圖中可見(jiàn)的工作（以及時(shí)間和金錢(qián)）之外還有其他方面的工作。

垃圾進(jìn)去，黃金出來(lái)？

舊的計(jì)算機(jī)科學(xué)格言寫(xiě)道：“垃圾進(jìn)入，垃圾出來(lái)。”相反，目標(biāo)是“垃圾進(jìn)入，人力資源......還不錯(cuò)。”更好的諺語(yǔ)可能是Postel定律，也稱(chēng)為魯棒性原則：“保守你的所作所為，也要接受別人的自由。“如果你想象有一個(gè)壞人試圖選擇你的設(shè)計(jì)，他們將如何打破它？也許將瀏覽器壓縮到一個(gè)狹窄的大小，并輸入一些異常長(zhǎng)的標(biāo)題（垃圾進(jìn)入）。您的設(shè)計(jì)應(yīng)該對(duì)窄寬度做出很好的響應(yīng)，并優(yōu)雅地減少特別長(zhǎng)的標(biāo)題（金色）的字體大小。

通過(guò)練習(xí)，您可以?xún)?nèi)化部分此過(guò)程。你會(huì)直覺(jué)地知道給定視覺(jué)設(shè)計(jì)會(huì)帶來(lái)哪些陷阱。與可訪(fǎng)問(wèn)性或國(guó)際化方面的專(zhuān)家學(xué)習(xí)快速發(fā)現(xiàn)限制設(shè)計(jì)普遍性的常見(jiàn)缺陷的方式大致相同。雖然我們的直覺(jué)可以幫助我們，但它也可以欺騙我們- 確保測(cè)試，并了解真實(shí)的人如何使用您的產(chǎn)品。

即使你磨練自己預(yù)測(cè)和避免常見(jiàn)錯(cuò)誤的能力，你的思想也會(huì)不斷地走向阻力最小的道路。像在高海拔地區(qū)訓(xùn)練的耐力運(yùn)動(dòng)員，用腳踝重量訓(xùn)練，或者職業(yè)棒球運(yùn)動(dòng)員用加重蝙蝠練習(xí)揮桿，我們必須繼續(xù)人為地增加我們的工作壓力。

真實(shí)數(shù)據(jù)不夠好

關(guān)于使用真實(shí)數(shù)據(jù)進(jìn)行設(shè)計(jì)的好處已經(jīng)寫(xiě)了很多。我的同事Daniel Burka寫(xiě)道：

“盡量不掩飾復(fù)雜性。在現(xiàn)實(shí)世界中進(jìn)行設(shè)計(jì)工作非常困難。如果你設(shè)計(jì)一個(gè)虛假的圖表，請(qǐng)輸入真實(shí)的數(shù)據(jù)。如果你假裝重新設(shè)計(jì)一個(gè)網(wǎng)站，...不要只是神奇地刪除一個(gè)廣告單元。如果您創(chuàng)建一個(gè)性感的虛假登錄屏幕，請(qǐng)不要忘記包括恢復(fù)丟失的密碼或用戶(hù)名的方法。...寫(xiě)真實(shí)副本。Lorem ipsum適合業(yè)余愛(ài)好者。”

Daniel是對(duì)的 - 特別是在界面元素方面，文本的含義與函數(shù)不可分割。當(dāng)涉及到可能顯示廣泛可變內(nèi)容的設(shè)計(jì)元素（例如，配置文件照片或名稱(chēng)）時(shí)，您可以比使用真實(shí)數(shù)據(jù)做得更好。超越現(xiàn)實(shí)數(shù)據(jù)。獲取困難的數(shù)據(jù)。

如果您能夠提取實(shí)際數(shù)據(jù)，請(qǐng)?jiān)谧顗牡那闆r下進(jìn)行挖掘。如果你可以處理最壞的情況，常見(jiàn)的情況將是輕而易舉的。

重新設(shè)計(jì)現(xiàn)有屏幕時(shí)，請(qǐng)利用可用的當(dāng)前和歷史數(shù)據(jù)。挖掘數(shù)據(jù)的極端，找到最長(zhǎng)和最短的標(biāo)題。如果您使用照片或視頻的縮略圖進(jìn)行設(shè)計(jì)，請(qǐng)抓取一組隨機(jī)的真實(shí)縮略圖，然后扔掉那些您知道易于設(shè)計(jì)的縮略圖。

如果您沒(méi)有現(xiàn)有數(shù)據(jù)，甚至在沒(méi)有現(xiàn)有數(shù)據(jù)時(shí)，請(qǐng)創(chuàng)建困難的示例。寫(xiě)出標(biāo)題，推動(dòng)超出屏幕可容納的范圍。創(chuàng)建具有自己的內(nèi)置邊框或陰影的縮略圖圖像，并查看它們與您所擁有的內(nèi)容的沖突。

有時(shí)可以（并且應(yīng)該）修復(fù)困難的數(shù)據(jù)

雖然您的設(shè)計(jì)應(yīng)盡可能健壯，但有時(shí)可能會(huì)出現(xiàn)不必如此的邊緣情況。在設(shè)計(jì)帶有客戶(hù)端的列表頁(yè)面時(shí)，我們查看了他們的完整數(shù)據(jù)存檔，以了解項(xiàng)目標(biāo)題的長(zhǎng)度是如何變化的。最短的標(biāo)題是8個(gè)字符，最長(zhǎng)的是超過(guò)320個(gè)，但只有少數(shù)超過(guò)80個(gè)。

我們與客戶(hù)合作創(chuàng)建了一個(gè)迎合最多80個(gè)字符標(biāo)題的設(shè)計(jì)。然后對(duì)那些少數(shù)異常值進(jìn)行了一些編輯手術(shù)以使它們處于極限之下。結(jié)果他們最終成為了更好的頭銜。

在處理由您的公司，團(tuán)隊(duì)或客戶(hù)管理的內(nèi)容時(shí)，還需要將這些實(shí)踐編入風(fēng)格指南。您無(wú)需花費(fèi)大量精力設(shè)計(jì)來(lái)自大廳的困難數(shù)據(jù)。

國(guó)際化

我有幸與Mozilla的團(tuán)隊(duì)合作，在那里頁(yè)面被翻譯成多達(dá)八十種語(yǔ)言。通過(guò)這種廣泛的本地化工作，我們學(xué)會(huì)了構(gòu)建支持非拉丁字符集和具有從右到左文本方向的語(yǔ)言的頁(yè)面布局和設(shè)計(jì)。

支持從左到右和從右到左的語(yǔ)言不僅需要允許文本字符串反轉(zhuǎn)。布局和設(shè)計(jì)的整個(gè)視覺(jué)結(jié)構(gòu)需要能夠水平翻轉(zhuǎn)。而不是令人沮喪的限制，你會(huì)發(fā)現(xiàn)這個(gè)和其他類(lèi)似的限制將幫助你開(kāi)發(fā)設(shè)計(jì)超級(jí)大國(guó)。

由于預(yù)期德語(yǔ)等語(yǔ)言中的文本字符串較長(zhǎng)，一些設(shè)計(jì)人員開(kāi)發(fā)了一個(gè)過(guò)程，其中拉丁文本的生成長(zhǎng)度是源文本的兩倍。W3C有一篇關(guān)于跨語(yǔ)言共同長(zhǎng)度比的方便文章。

資本化在某些語(yǔ)言環(huán)境中也可能存在問(wèn)題- 尤其是在強(qiáng)制使用CSS時(shí)。如果您的設(shè)計(jì)確實(shí)依賴(lài)于text-transform: uppercase或者text-transform: lowercase，要么重新審視設(shè)計(jì)更靈活，要么在源文本中處理大寫(xiě)（而不是通過(guò)CSS），以便本地化團(tuán)隊(duì)可以保持對(duì)大寫(xiě)的控制。

MDN是更多關(guān)于本地化設(shè)計(jì)的重要資源。在設(shè)計(jì)過(guò)程中涉及占位符數(shù)據(jù)時(shí)要注意自己的文化盲目性。設(shè)計(jì)作弊經(jīng)常影響那些最不喜歡自己的人。

盡可能設(shè)計(jì)困難的數(shù)據(jù)

關(guān)于我們的工具如何幫助我們?cè)O(shè)計(jì)真實(shí)數(shù)據(jù)已經(jīng)寫(xiě)了很多（并且應(yīng)該被閱讀）。借助現(xiàn)代設(shè)計(jì)和原型設(shè)計(jì)工具，HTML / CSS / JS原型，甚至靜態(tài)模型，如果我們不將設(shè)計(jì)推向突破點(diǎn)，結(jié)果將是自欺欺人。

在快速制造和過(guò)度建設(shè)之間總是存在平衡。與設(shè)計(jì)和網(wǎng)絡(luò)上的所有內(nèi)容一樣，這取決于數(shù)據(jù)，受眾，項(xiàng)目和目標(biāo)。

設(shè)計(jì)不出更優(yōu)秀的作品的常見(jiàn)借口往往是時(shí)間表和預(yù)算。特別是在大型項(xiàng)目中，學(xué)習(xí)如何將更多難度數(shù)據(jù)納入早期設(shè)計(jì)過(guò)程可以節(jié)省很多時(shí)間。

就像長(zhǎng)跑運(yùn)動(dòng)員通過(guò)在高海拔的空氣中訓(xùn)練而提高，通過(guò)從一開(kāi)始就建立困難的數(shù)據(jù)，你將成為一個(gè)更優(yōu)秀的設(shè)計(jì)師。您將更加了解設(shè)計(jì)可能處在什么位置并防患于未然，從而更好地傳達(dá)您的流程和決策。

注：

①：CSS：層疊樣式表(英文全稱(chēng)：CascadingStyle Sheets)是一種用來(lái)表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語(yǔ)言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。 CSS 能夠?qū)W(wǎng)頁(yè)中元素位置的排版進(jìn)行像素級(jí)精確控制，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁(yè)對(duì)象和模型樣式編輯的能力。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?———三米工作室PNG團(tuán)隊(duì)翻譯