如果你要開始準備網(wǎng)站的重設計且手頭恰好有一堆文字圖片的話，內(nèi)容優(yōu)先的戰(zhàn)略肯定是沒錯的。當你力圖讓新網(wǎng)站能在小屏幕上有不錯的體驗時，最好基于那些按照用戶需求優(yōu)化后的內(nèi)容采用漸進增強原則及響應式設計。然而在大公司里，細致的分工往往意味著布局會在還沒拿到確切內(nèi)容的情況下（比如文案還沒有準備好，或者內(nèi)容校審正在并行工作）就著手進行設計。

不幸的是，當把文字和其容器（譯者注：container，布局的主要構(gòu)成部分，用來包裹文字圖片等內(nèi)容，下文中都會稱為“容器”；比如在畫線框圖時：這個“容器”是用來放文章標題的，那個“容器”是用來放一張圖片和一段注釋的）結(jié)合之時很可能會出現(xiàn)意料之外的結(jié)果，這將導致高成本的重復工作亦或是無奈裁剪內(nèi)容以適配布局等。為了避免這些常見的問題，最好是讓內(nèi)容和布局能彼此針對性地進行設計。

CNN的這個柵格系統(tǒng)就很讓人無語。盡管它看起來不錯，但對于大多數(shù)網(wǎng)站來說，裁剪內(nèi)容以適配這些柵格將會帶來各種麻煩。

封閉僵化的所謂一致性會直接導致內(nèi)容的冗余和無關(guān)內(nèi)容影響到頁面的實用性。舉個例子，如果一個模板提供了三個標題，而你的真實內(nèi)容里只有兩個，那你決不應該因為顧慮留空會不好看而去附和模板重新復制黏貼一遍標題。正如Tog說的，“滿足用戶期望的連貫統(tǒng)一才是最重要的一致性?！?/p>

當這類關(guān)于占位符和內(nèi)容冗余的問題出現(xiàn)時，請盡最大可能對模板進行調(diào)整：如果和模板不一致而出現(xiàn)空白的標題，那么完全可以對該處進行合并。如果這都對你沒幫助，那么就請考慮使用一個可自行增減標題數(shù)量的新模板。

避免濫用占位符，尤其是在使用現(xiàn)成平臺時，請務必根據(jù)需求來自行調(diào)整。

適配問題

當內(nèi)容尺寸不適應所處容器時，適配問題應運而生，常見的該類問題包括：

1. 布局無法很好地適應導航元素增多，這意味著導航元素很可能會破壞頁面的布局，亦或者就用模板的那一套，它有幾個導航按鍵我們就有幾個，多一個也不成；
2. 內(nèi)容相對于其指派的容器來說太大或太小，產(chǎn)生視覺障礙；
3. 圖片在某些時候不得已被縮得很??；

NZ Herald采用了一個彼此之間互不關(guān)聯(lián)的靈活垂直布局。這種報紙一般的布局遇到即便字數(shù)和圖片都各異的內(nèi)容也能從容應對。

無意識的限制

占位符往往是為了特定規(guī)劃內(nèi)的布局模板而生的，因此你看到的并不能作為自己套用后最終呈現(xiàn)的結(jié)果之參照。

舉些模板帶給你限制的例子：

1. 所有你要加的圖片注釋都必須是兩行；
2. 所有的概述文字都必須是五行；
3. 隨意增加一句話很可能會導致多出一整頁；
4. 缺失內(nèi)容會導致人們點進空白的頁面
5. 菜單選項的問題或者標題都必須限定在1-2個單詞的長度，哪怕多出一個也不行；
6. 在不干擾其它頁面元素的前提下，每一列的寬度無法自由改變；
7. 調(diào)整瀏覽器文字大小會導致整個頁面的布局全亂掉；

廣告的問題

廣告的位置和尺寸都是不定的。之前幾乎所有的廣告都是橫著的矩形樣式的。在幾年時間內(nèi)它們的形狀發(fā)生了翻天覆地的變化，現(xiàn)在我們見到的廣告有很多都是正方形的，它們會在頁面里飄來飄去亦或是在跳轉(zhuǎn)的間隙里給你冷不丁插進來。設計師如果希望他們的設計具備可持續(xù)性就不應該在設計布局是惦記著廣告。

偽裝是廣告的一大癖好。有時廣告會潛伏在滾動條附近，這樣就能讓手殘的用戶有相當概率點到它們（不要試圖用廣告戲耍你的用戶，這會導致客觀的用戶流失）。

廣告是內(nèi)容的一部分，我是說最次等的一部分。有一些模板在把廣告位置都去掉后看起來簡直慘不忍睹，這也表明這種模板即便在廣告全開的情況下也只會更加難看。如果你正在專心為廣告位置設計模板，那也就意味著你對那些用戶們真正關(guān)心的東西：內(nèi)容置若罔聞。

廣告總會被人下意識地忽視。任何在廣告周邊的內(nèi)容甚至按鍵都很可能會被用戶誤以為是廣告的一部分而下意識地忽視。

可悲的是，你在布局擁有真實的內(nèi)容之前，無法對這類廣告問題進行測試。

該做什么

創(chuàng)建靈活的布局。這已是老生常談了，但我們?nèi)匀豢梢钥吹接刑嗨腊褰┗脑O計。對于當下無窮無盡的屏幕尺寸來說，響應式是唯一出路。適應（adaptive）及響應(responsive)的設計讓內(nèi)容具備更好的適應能力。但在缺乏掌握實際內(nèi)容的情況下，這依然是紙上談兵。

在設計流程中以及網(wǎng)站上線后你都必須確保布局、導航和內(nèi)容都是靈活的。

采用漸進增強原則（progressive enhancement principles）來為可達性（accessibility）和跨平臺兼容設計。

用已有的內(nèi)容來設計。如果你正在重設計且手頭有內(nèi)容了（即便是非常陳舊的內(nèi)容），你可以從它們著手開始。無論如何你需要確保設計和內(nèi)容在針對多平臺的設計中能夠彼此配合，因為網(wǎng)站的布局設計必須和內(nèi)容齊頭并進。

如果你手頭沒有內(nèi)容，那么從其它渠道找一些近似的媒體（圖片、文字等），應用在你的線框圖、原型和其它mockups中。你也可以打印出內(nèi)容，進行裁剪，然后在桌上重新排布，以構(gòu)想你自己期望的頁面布局。這樣的實踐可以幫助你更好地理解你需要的內(nèi)容類型，以便于構(gòu)建出一個在你的行業(yè)中具備競爭力和可比性的網(wǎng)站。

只有在不得已的情況下再使用占位符，并確保只在低保真原型的初步階段用作內(nèi)部溝通之用。

準備好擁抱未來。你的設計或許比你設想的還要活得久。問問你自己，如果這個星球上所有人的網(wǎng)速都更快了，設計將會有何不同？當大如黑板那樣的顯示器和智能手表那樣的小屏幕隨處可見時又會如何？當人工智能已成熟到成為每一個人的私人助手時，你的移動網(wǎng)站需要什么？你的中文B2B網(wǎng)站需要什么？從這個角度來看，或許你需要更多的模板以避免未來昂貴的重設計（redesign）。

思考一下未來的內(nèi)容類型和顯示尺寸，以及如何復用內(nèi)容。所有過去那些固定寬度的表格布局都必須被淘汰掉。Orbital Content, 這篇來自A List Apart的文章指出網(wǎng)站內(nèi)容正在被五花八門的容器包含。舉個例子，人們和應用通常使用瀏覽器插件來重排頁面，以避免糟糕的布局和文字處理而更容易地閱讀文章。類似地，網(wǎng)站可以通過各種方式在其中插入一堆其它文檔。因此請為嵌入和分享的浪潮做好準備。

為適配更多的內(nèi)容做準備。除非必要，盡可能不要限制文字或特定組件的長度。每次都試試如果把當前字號放大布局會不會亂掉。為所有這一切做好準備，尤其是導航。

記錄下你的設計決策。具象化所有設計思路，這樣利益相關(guān)者就可以在“限制內(nèi)容”還是“給更多時間去讓排版更完美”之間進行選擇?？紤]是否這些限制和他們的設計結(jié)果需要在你的style guide或pattern library里被提及。

在早期就開始測試，越多越好。從一個規(guī)劃好的布局開始，嘗試加入真實的內(nèi)容，根據(jù)需要進一步改進設計。

注意那些潛在的內(nèi)容尺寸和排位的問題：

• 那些固定寬度的東西；
• 將會容納文字的元素；
• 在內(nèi)容中插入的圖片和視頻的比例；
• 水平布局元素帶來的“整潔”假象（false floors）；
• 難辨或殘缺的內(nèi)容；
• 被擠成一堆的可點按元素；
• 確保遇到以下情況時你知道布局會發(fā)生何等變化：
• 導航元素變長或變多；
• 通過screen-reader這樣的軟件朗讀頁面內(nèi)容；（很多逗比網(wǎng)站念著念著給我念廣告去了）
• 跨設備瀏覽頁面，包括在手機上；
• 內(nèi)容類型（廣告，視頻和文字）改變形狀或大??；
• JavaScript, Flash, 和webfonts都被關(guān)掉的情況下；
• 表單、回執(zhí)等重要項被打印出來的時候；

對邊緣情況作出測試。讓你的布局即便遇到異常也能看起來湊合：內(nèi)容太小、太大、太長、太多時會怎么樣；頁面上全是文字或大多是圖片時會怎么樣；遇到圖表等信息圖時會怎么樣。還有那些超長的標題、縮進的列表、大段引文和表格等等。

在盡可能多的不同設備和屏幕尺寸上對你的布局進行測試。你不可能確保你的設計百分百兼容所有設備，但在構(gòu)建布局之前把這里理一遍能避免你日后再多做個第三版、第四版。

從這份來自Open Signal關(guān)于安卓設備屏幕尺寸的報告中我們可以看到內(nèi)容設計的靈活性是唯一的出路。

對你的內(nèi)容進行翻譯，看看會出什么問題。采用真實的文字后再把它翻譯成德語或其它擁有不同字形的語言。這是幫助你驗證極端情況下布局的潛在問題。同時這能幫助你在忽略內(nèi)容意義的情況下對整體布局有個更視覺化的認識。

很多人用翻譯引擎來閱讀網(wǎng)頁。你也可以使用像Google Translator這樣的軟件來看看你的排版是否對全球用戶的口味。

結(jié)語

正如我所言，要想讓內(nèi)容類型和尺寸適應所有的布局顯然是不可能的，尤其我們還要留意未來的無限可能，然而你至少應該思考在幾年內(nèi)都可持續(xù)的實用和可用的布局。在設計中對布局的精心調(diào)試將會節(jié)省大量統(tǒng)版（根據(jù)印刷核算版面）的時間及重設計的投入。

來源： nngroup – SUSAN FARRELL???譯文出處：@勵定洲