做網(wǎng)站建設(shè)的，布局**？還是內(nèi)容**？

時(shí)間：2015-12-28作者：深圳市全通網(wǎng)絡(luò)有限公司瀏覽：181

在深圳做網(wǎng)站建設(shè)的，如果你開始準(zhǔn)備網(wǎng)站的設(shè)計(jì)，并且手上恰好有一堆文字圖片的話，內(nèi)容**的戰(zhàn)略肯定是沒錯(cuò)的。當(dāng)你力圖讓新網(wǎng)站能在小屏幕上有不錯(cuò)的體驗(yàn)時(shí)，基于那些按照用戶需求優(yōu)化后的內(nèi)容采用漸進(jìn)增強(qiáng)原則及響應(yīng)式設(shè)計(jì)。然而在大公司里，細(xì)致的分工往往意味著布局會在還沒拿到確切內(nèi)容的情況下就著手進(jìn)行設(shè)計(jì)。

不幸的是，當(dāng)把文字和其容器結(jié)合之時(shí)很可能會出現(xiàn)意料之外的結(jié)果，這將導(dǎo)致高成本的重復(fù)工作亦或是無奈裁剪內(nèi)容以適配布局等。為了避免這些常見的問題，是讓內(nèi)容和布局能彼此針對性地進(jìn)行設(shè)計(jì)。

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

內(nèi)容管理系統(tǒng)通常會包含很多占位符，而這些占位符所代表的內(nèi)容版塊并不一定是你需要的。這會直接導(dǎo)致在后續(xù)設(shè)計(jì)中版面內(nèi)出現(xiàn)大量空白無用的空間。這就是為什么我呼吁“Lorem ipsum”必須死的原因。

目的的一致性

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

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

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

適配問題

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

1.布局無法很好地適應(yīng)導(dǎo)航元素增多，這意味著導(dǎo)航元素很可能會破壞頁面的布局，亦或者就用模板的那一套，它有幾個(gè)導(dǎo)航按鍵我們就有幾個(gè)，多一個(gè)也不成；

2.內(nèi)容相對于其指派的容器來說太大或太小，產(chǎn)生視覺障礙；

3.圖片在某些時(shí)候不得已被縮得很??；

NZ Herald采用了一個(gè)彼此之間互不關(guān)聯(lián)的靈活垂直布局。這種報(bào)紙一般的布局遇到即便字?jǐn)?shù)和圖片都各異的內(nèi)容也能從容應(yīng)對。無意識的限制占位符往往是為了特定規(guī)劃內(nèi)的布局模板而生的，因此你看到的并不能作為自己套用后終呈現(xiàn)的結(jié)果之參照。

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

1.所有你要加的圖片注釋都必須是兩行；

2.所有的概述文字都必須是五行；

3.隨意增加一句話很可能會導(dǎo)致多出一整頁；

4.缺失內(nèi)容會導(dǎo)致人們點(diǎn)進(jìn)空白的頁面

5.菜選項(xiàng)的問題或者標(biāo)題都必須限定在1-2個(gè)單詞的長度，哪怕多出一個(gè)也不行；

6.在不干擾其它頁面元素的前提下，每一列的寬度無法自由改變；

7.調(diào)整瀏覽器文字大小會導(dǎo)致整個(gè)頁面的布局全亂掉；廣告的問題廣告的位置和尺寸都是不定的。之前幾乎所有的廣告都是橫著的矩形樣式的。在幾年時(shí)間內(nèi)它們的形狀發(fā)生了翻天覆地的變化，現(xiàn)在我們見到的廣告有很多都是正方形的，它們會在頁面里飄來飄去亦或是在跳轉(zhuǎn)的間隙里給你冷不丁插進(jìn)來。設(shè)計(jì)師如果希望他們的設(shè)計(jì)具備可持續(xù)性就不應(yīng)該在設(shè)計(jì)布局是惦記著廣告。

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

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

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

可悲的是，你在布局擁有真實(shí)的內(nèi)容之前，無法對這類廣告問題進(jìn)行測試。該做什么創(chuàng)建靈活的布局

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

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

采用漸進(jìn)增強(qiáng)原則（progressive enhancement principles）來為可達(dá)性（accessibility）和跨平臺兼容設(shè)計(jì)。

用已有的內(nèi)容來設(shè)計(jì)

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

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

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

準(zhǔn)備好擁抱未來

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

思考一下未來的內(nèi)容類型和顯示尺寸，以及如何復(fù)用內(nèi)容

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

為適配更多的內(nèi)容做準(zhǔn)備

除非必要，盡可能不要限制文字或特定組件的長度。每次都試試如果把當(dāng)前字號放大布局會不會亂掉。為所有這一切做好準(zhǔn)備，尤其是導(dǎo)航。

記錄下你的設(shè)計(jì)決策

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

在早期就開始測試，越多越好

從一個(gè)規(guī)劃好的布局開始，嘗試加入真實(shí)的內(nèi)容，根據(jù)需要進(jìn)一步改進(jìn)設(shè)計(jì)。

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

那些固定寬度的東西；

將會容納文字的元素；

在內(nèi)容中插入的圖片和視頻的比例；

水平布局元素帶來的“整潔”假象（false floors）；

難辨或殘缺的內(nèi)容；

被擠成一堆的可點(diǎn)按元素；

確保遇到以下情況時(shí)你知道布局會發(fā)生何等變化：

導(dǎo)航元素變長或變多；

通過screen-reader這樣的軟件朗讀頁面內(nèi)容；（很多逗比網(wǎng)站念著念著給我念廣告去了）

跨設(shè)備瀏覽頁面，包括在手機(jī)上；

內(nèi)容類型（廣告，視頻和文字）改變形狀或大??；

JavaScript, Flash, 和webfonts都被關(guān)掉的情況下；

表單、回執(zhí)等重要項(xiàng)被打印出來的時(shí)候；

對邊緣情況作出測試

讓你的布局即便遇到異常也能看起來湊合：內(nèi)容太小、太大、太長、太多時(shí)會怎么樣；頁面上全是文字或大多是圖片時(shí)會怎么樣；遇到圖表等信息圖時(shí)會怎么樣。還有那些**長的標(biāo)題、縮進(jìn)的列表、大段引文和表格等等。

在盡可能多的不同設(shè)備和屏幕尺寸上對你的布局進(jìn)行測試

你不可能確保你的設(shè)計(jì)*兼容所有設(shè)備，但在構(gòu)建布局之前把這里理一遍能避免你日后再多做個(gè)*三版、*四版。

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

對你的內(nèi)容進(jìn)行翻譯，看看會出什么問題

采用真實(shí)的文字后再把它翻譯成德語或其它擁有不同字形的語言。這是幫助你驗(yàn)證較端情況下布局的潛在問題。同時(shí)這能幫助你在忽略內(nèi)容意義的情況下對整體布局有個(gè)較視覺化的認(rèn)識。

很多人用翻譯引擎來閱讀網(wǎng)頁。你也可以使用像Google Translator這樣的軟件來看看你的排版是否對**用戶的口味。結(jié)語正如我所言，要想讓內(nèi)容類型和尺寸適應(yīng)所有的布局顯然是不可能的，尤其我們還要留意未來的無限可能，然而你至少應(yīng)該思考在幾年內(nèi)都可持續(xù)的實(shí)用和可用的布局。在設(shè)計(jì)中對布局的精心調(diào)試將會節(jié)省大量統(tǒng)版（根據(jù)印刷核算版面）的時(shí)間及重設(shè)計(jì)的投入。


深圳市全通網(wǎng)絡(luò)有限公司專注于深圳網(wǎng)站建設(shè),深圳網(wǎng)頁設(shè)計(jì),營銷型網(wǎng)站建設(shè),深圳網(wǎng)站開發(fā)等

• 詞條

  詞條說明

• 深圳網(wǎng)絡(luò)推廣公司如何有效的進(jìn)行SEO

  在深圳做網(wǎng)站推廣幾年了，對于常用的網(wǎng)站推廣工具和資源也有了大致上的了解了。大致包括：：搜索引擎、分類目錄、電子郵件、網(wǎng)站鏈接、在線黃頁和分類廣告、信息發(fā)布、論壇、博客網(wǎng)站、網(wǎng)絡(luò)實(shí)名/通用網(wǎng)址、電子書、免費(fèi)軟件、即時(shí)信息、網(wǎng)絡(luò)廣告媒體、傳統(tǒng)推廣渠道等。而網(wǎng)站推廣方法就是對這些常規(guī)網(wǎng)站推廣工具和資源的有效利用。 下面，讓小編介紹一下，小編在深圳做網(wǎng)站推廣常用的八種方法。因?yàn)?，網(wǎng)站推廣的實(shí)施是通過各種

• 做網(wǎng)頁設(shè)計(jì)時(shí)，不可違背的五項(xiàng)原則

  在深圳網(wǎng)站建設(shè)公司做網(wǎng)頁設(shè)計(jì)時(shí)，從字體設(shè)計(jì)、制圖到頁面版式，都會去遵循這幾條通用的原則。因?yàn)檫@適用于網(wǎng)頁或者印刷。。然而，在網(wǎng)頁設(shè)計(jì)這邊，很多本應(yīng)該有的規(guī)則都被搞亂了，就只是跟著感覺走。這并不是說設(shè)計(jì)師在規(guī)則方面有松懈，而是大多數(shù)網(wǎng)絡(luò)工作者都不知道要遵守這些規(guī)則——就算他們知道，也不知道怎么去用。 結(jié)合網(wǎng)頁講，就是以下幾條：一、平衡平衡感挺難拿捏的。網(wǎng)頁上呈現(xiàn)出的平衡有兩種——對稱和不對稱。我們

• 互聯(lián)網(wǎng)+六大模式，深圳全通網(wǎng)絡(luò)帶您玩轉(zhuǎn)互聯(lián)網(wǎng)

  說說網(wǎng)站建設(shè) 如何讓有效的信息在網(wǎng)絡(luò)上以快及有效的呈現(xiàn)給用戶，搜索引擎起著很關(guān)鍵的作用。對一個(gè)網(wǎng)站的建設(shè)來說，只有真正把用戶的有效點(diǎn)擊、瀏覽作為標(biāo)準(zhǔn)才能得到好的發(fā)展。筆者覺得，一個(gè)好的網(wǎng)站發(fā)展，可能需要有好的內(nèi)容，也需要有好的流量，再加上好的技術(shù)架構(gòu)，好的用戶體驗(yàn)，擁有一定的特色，才能使網(wǎng)站能達(dá)到一定的規(guī)模，能使網(wǎng)站的排名得到一定的提升，增加用戶量。一個(gè)網(wǎng)站單擁有好的內(nèi)容，是不可能會有很好的進(jìn)步

• 深圳網(wǎng)頁制作公司哪家好？如何選擇？

  三站合一式網(wǎng)站建設(shè)是指實(shí)現(xiàn)手機(jī)網(wǎng)站(手機(jī)APP)+微信網(wǎng)站+電腦網(wǎng)站(PC站)的三站四**三站合一。三站四**三站一體式建站是目前新型的建站方式，也是有發(fā)展?jié)摿Φ慕ㄕ痉绞健?據(jù)新官方數(shù)據(jù)統(tǒng)計(jì)：國內(nèi)網(wǎng)民用戶已經(jīng)達(dá)到6.18億，其中使用手機(jī)上網(wǎng)用戶有5億。但是只有20%的企業(yè)進(jìn)行網(wǎng)絡(luò)營銷，其中90%企業(yè)只使用電腦網(wǎng)站營銷。 營銷型PC網(wǎng)站+手機(jī)網(wǎng)站+微信網(wǎng)站+全網(wǎng)營銷(全通網(wǎng)絡(luò)強(qiáng)勢推出整體打包服務(wù))