topsapps is a reporting platform for mobile developers that automatically downloads and visualizes sales data, App Store reviews, hourly ranks and more

布局還是內容,誰更優先?

Product Design YvetteBurris 25℃ 0评论

如果你要開始準備網站的重設計且手頭恰好有一堆文字圖片的話,內容優先的戰略肯定是沒錯的。當你力圖讓新網站能在小屏幕上有不錯的體驗時,最好基於那些按照用戶需求優化后的內容採用漸進增強原則及響應式設計。然而在大公司里,細緻的分工往往意味着布局會在還沒拿到確切內容的情況下(比如文案還沒有準備好,或者內容校審正在并行工作)就着手進行設計。不幸的是,當把文字和其容器(譯者註:container,布局的主要構成部分,用來包裹文字圖片等內容,下文中都會稱為“容器”;比如在畫線框圖時:這個“容器”是用來放文章標題的,那個“容器”是用來放一張圖片和一段註釋的)結合之時很可能會出現意料之外的結果,這將導致高成本的重複工作亦或是無奈裁剪內容以適配布局等。為了避免這些常見的問題,最好是讓內容和布局能彼此針對性地進行設計。布局還是內容,誰更優先?CNN的這個柵格系統就很讓人無語。儘管它看起來不錯,但對於大多數網站來說,裁剪內容以適配這些柵格將會帶來各種麻煩。內容管理系統通常會包含很多佔位符(譯者註:placeholder, 比如lorem ipsum或一眾亂碼及無意義文字作為填充內容之用),而這些佔位符所代表的內容版塊並不一定是你需要的。這會直接導致在後續設計中版面內出現大量空白無用的空間。這就是為什麼我呼籲“Lorem ipsum”必須死的原因。封閉僵化的所謂一致性會直接導致內容的冗餘和無關內容影響到頁面的實用性。舉個例子,如果一個模板提供了三個標題,而你的真實內容里只有兩個,那你決不應該因為顧慮留空會不好看而去附和模板重新複製黏貼一遍標題。正如Tog說的,“滿足用戶期望的連貫統一才是最重要的一致性。”布局還是內容,誰更優先?當這類關於佔位符和內容冗餘的問題出現時,請盡最大可能對模板進行調整:如果和模板不一致而出現空白的標題,那麼完全可以對該處進行合併。如果這都對你沒幫助,那麼就請考慮使用一個可自行增減標題數量的新模板。避免濫用佔位符,尤其是在使用現成平台時,請務必根據需求來自行調整。內容尺寸不適應所處容器時,適配問題應運而生,常見的該類問題包括:布局還是內容,誰更優先?NZ Herald採用了一個彼此之間互不關聯的靈活垂直布局。這種報紙一般的布局遇到即便字數和圖片都各異的內容也能從容應對。佔位符往往是為了特定規劃內的布局模板而生的,因此你看到的並不能作為自己套用后最終呈現的結果之參照。舉些模板帶給你限制的例子:廣告的位置和尺寸都是不定的。之前幾乎所有的廣告都是橫着的矩形樣式的。在幾年時間內它們的形狀發生了翻天覆地的變化,現在我們見到的廣告有很多都是正方形的,它們會在頁面里飄來飄去亦或是在跳轉的間隙里給你冷不丁插進來。設計師如果希望他們的設計具備可持續性就不應該在設計布局是惦記着廣告偽裝是廣告的一大癖好。有時廣告會潛伏在滾動條附近,這樣就能讓手殘的用戶有相當概率點到它們(不要試圖用廣告戲耍你的用戶,這會導致客觀的用戶流失)。廣告內容的一部分,我是說最次等的一部分。有一些模板在把廣告位置都去掉后看起來簡直慘不忍睹,這也表明這種模板即便在廣告全開的情況下也只會更加難看。如果你正在專心為廣告位置設計模板,那也就意味着你對那些用戶們真正關心的東西:內容置若罔聞。廣告總會被人下意識地忽視。任何在廣告周邊的內容甚至按鍵都很可能會被用戶誤以為是廣告的一部分而下意識地忽視。可悲的是,你在布局擁有真實的內容之前,無法對這類廣告問題進行測試。創建靈活的布局。這已是老生常談了,但我們仍然可以看到有太多死板僵化的設計。對於當下無窮無盡的屏幕尺寸來說,響應式是唯一出路。適應(adaptive)及響應(responsive)的設計讓內容具備更好的適應能力。但在缺乏掌握實際內容的情況下,這依然是紙上談兵。在設計流程中以及網站上線后你都必須確保布局、導航和內容都是靈活的。採用漸進增強原則(progressive enhancement principles)來為可達性(accessibility)和跨平台兼容設計。用已有的內容來設計。如果你正在重設計且手頭有內容了(即便是非常陳舊的內容),你可以從它們着手開始。無論如何你需要確保設計和內容在針對多平台的設計中能夠彼此配合,因為網站的布局設計必須和內容齊頭並進。如果你手頭沒有內容,那麼從其它渠道找一些近似的媒體(圖片、文字等)應用在你的線框圖、原型和其它mockups中。你也可以打印出內容,進行裁剪,然後在桌上重新排布,以構想你自己期望的頁面布局。這樣的實踐可以幫助你更好地理解你需要的內容類型,以便於構建出一個在你的行業中具備競爭力和可比性的網站。只有在不得已的情況下再使用佔位符,並確保只在低保真原型的初步階段用作內部溝通之用。準備好擁抱未來。你的設計或許比你設想的還要活得久。問問你自己,如果這個星球上所有人的網速都更快了,設計將會有何不同?當大如黑板那樣的顯示器和智能手錶那樣的小屏幕隨處可見時又會如何?當人工智能已成熟到成為每一個人的私人助手時,你的移動網站需要什麼?你的中文B2B網站需要什麼?從這個角度來看,或許你需要更多的模板以避免未來昂貴的重設計(redesign)。思考一下未來的內容類型和顯示尺寸,以及如何復用內容所有過去那些固定寬度的表格布局都必須被淘汰掉。Orbital Content, 這篇來自A List Apart的文章指出網站內容正在被五花八門的容器包含。舉個例子,人們和應用通常使用瀏覽器插件來重排頁面,以避免糟糕的布局和文字處理而更容易地閱讀文章。類似地,網站可以通過各種方式在其中插入一堆其它文檔。因此請為嵌入和分享的浪潮做好準備。為適配更多的內容做準備。除非必要,儘可能不要限制文字或特定組件的長度。每次都試試如果把當前字號放大布局會不會亂掉。為所有這一切做好準備,尤其是導航。記錄下你的設計決策。具象化所有設計思路,這樣利益相關者就可以在“限制內容”還是“給更多時間去讓排版更完美”之間進行選擇。考慮是否這些限制和他們的設計結果需要在你的style guide或pattern library里被提及。在早期就開始測試,越多越好。從一個規劃好的布局開始,嘗試加入真實的內容,根據需要進一步改進設計。注意那些潛在的內容尺寸和排位的問題:對邊緣情況作出測試。讓你的布局即便遇到異常也能看起來湊合:內容太小、太大、太長、太多時會怎麼樣;頁面上全是文字或大多是圖片時會怎麼樣;遇到圖表等信息圖時會怎麼樣。還有那些超長的標題、縮進的列表、大段引文和表格等等。在儘可能多的不同設備和屏幕尺寸上對你的布局進行測試。你不可能確保你的設計百分百兼容所有設備,但在構建布局之前把這裡理一遍能避免你日後再多做個第三版、第四版。布局還是內容,誰更優先?從這份來自Open Signal關於安卓設備屏幕尺寸的報告中我們可以看到內容設計的靈活性是唯一的出路。對你的內容進行翻譯,看看會出什麼問題。採用真實的文字后再把它翻譯成德語或其它擁有不同字形的語言。這是幫助你驗證極端情況下布局的潛在問題。同時這能幫助你在忽略內容意義的情況下對整體布局有個更視覺化的認識。布局還是內容,誰更優先?很多人用翻譯引擎來閱讀網頁。你也可以使用像google Translator這樣的軟件來看看你的排版是否對全球用戶的口味。正如我所言,要想讓內容類型和尺寸適應所有的布局顯然是不可能的,尤其我們還要留意未來的無限可能,然而你至少應該思考在幾年內都可持續的實用和可用的布局。在設計中對布局的精心調試將會節省大量統版(根據印刷核算版面)的時間及重設計的投入。來源: nngroup – SUSAN FARRELL   譯文出處:@勵定洲

转载请注明:TopsApps » 布局還是內容,誰更優先?

喜欢 (0)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址