網(wǎng)頁設(shè)計(jì)文案的重要性以及如何做好內(nèi)容為中心的設(shè)計(jì).

1、設(shè)計(jì)師往往忘記重視設(shè)計(jì)結(jié)構(gòu)那樣重視編寫文案，以便在網(wǎng)頁上突出文案。今 天我們將討論為什么文案是如此的重要，誰又應(yīng)該學(xué)習(xí)掌握它，以及如何做好內(nèi)容為 中心的設(shè)計(jì)。設(shè)計(jì)好，文案差A(yù)s designers, we rightfully spend our time focused on aesthetics. We are pixel pushers who firmly believe with the stron gest conv icti on that attractive websites are fun dame ntally better websites.作為設(shè)計(jì)師，我們理所當(dāng)然地多

2、花時(shí)間專注于美學(xué)方面。有吸引力的網(wǎng)站可以 從根本上改善網(wǎng)站，我們正是這種觀念最堅(jiān)信的推崇者。We build our mockups with “ lorem ipsum ” so we can go back and write something better when we have the time. Deadlines approach and still we put off the text until the last possible sec ond. Fin ally, as our various GTD apps inform us that the time has

3、come to submit the artwork, we hash out some quick text to throw onto our beautiful creations and send them off, without a visual blemish yet stillmarred by the subpar copythat appears on every page.我們使用“Lorem Ipsum文本排版生成器建立我們的排版模型，所以我們有時(shí)間 的時(shí)候還可以回頭寫更好的東西。而截止日期的做法（甚至是我們自己仍然有可能把文案推遲到最后一秒。然后，各種GTD程序通知我

4、們是時(shí)候提交我們的作品了 ， 我們就在漂亮的作品上臨急臨忙的放些速寫的文字，然后就扔出去了。最后每個(gè)頁面即使視覺上都沒有什么挑剔，卻依然看到很多美中不足的文案。For many of us, this is simply how we re programmed. We re visual bea sts that thrive on good desig n. The problem of course is thatthe n eglect of solid copy will ofte n cause the fini shed product to suffer as much orm

5、ore tha n a poor desig n. Uni ess desig ners are your target market, your user base will bepopulated largely by individuals that don t speak design. Show them D andthey ll wonder aloud why anyone would ever create such a service.對(duì)于我們大多數(shù)人而言，如何編程對(duì)我們來說簡單的很，我們是靠優(yōu)秀設(shè)計(jì)成長壯大的視覺怪獸。然而問題是，我們對(duì)實(shí)在文案的忽視導(dǎo)致我們最終的成品大受影

6、響，影響甚至超過那些差勁的設(shè)計(jì)。除非你的目標(biāo)市場是設(shè)計(jì)師，否則你的用戶群中大多都是不跟你談設(shè)計(jì)的。你告訴他們D,他們會(huì)好生奇怪，為什么有人會(huì)提供這樣的服務(wù)。Sure, they can often interpret what is ugly and what isn t similarly to how we can,but only on an intuitive level. What they really notice is how the website feels. Whether it s smooth or clunky, eas navigate or impossible

7、. This is what is meant when desig ners say thatgreat desig n is tran spare nt.If your users no tice your in terface too mu ch, it s probably because they hate it.當(dāng)然，他們往往可以解釋什么是丑陋的，什么是雷同的，就像我們一樣，但只能在一 個(gè)直觀的水平。他們真正在意的是網(wǎng)站的整體感覺，是否流暢或繁瑣，是否易于操作。這就是設(shè)計(jì)師所說的，優(yōu)秀的設(shè)計(jì)是透明的。如果你的用戶對(duì)界面很關(guān)心，很有可能是因?yàn)樗麄兒苡憛掃@個(gè)界面。This same m

8、etaphor of transparency applies to copywriting on the web. It s wortnoting that the average user is in fact traine d in reading and writing far more than design, though still only as much as a standard education supplies. To these users, we ll call them“normal people ” as opposed to we visual freaks

9、, browsing the web is a reading experienee. Evaluating a service invoIves skimming the sales pitch and reading the list of features as much or more tha n evaluati ng the visual layout of the eleme nts on the page.They II even hire a designer based as much on what he says about himself as whatappears

10、 in his portfolio. If you have strong copy, they won t notice or evaluate it toomuch,they ll be far too busy being convinced of what it s saying.這個(gè)透明的比喻同樣適用于網(wǎng)頁上的文案。值得一提的是，實(shí)際上一般用戶在閱讀和寫作方面所受的教育要遠(yuǎn)遠(yuǎn)超過設(shè)計(jì)方面，雖然依然只是一個(gè)標(biāo)準(zhǔn)教育的產(chǎn) 品。對(duì)于這些用戶，我們會(huì)稱他們?yōu)檎Ｓ脩簟倍皇俏覀冞@些視覺怪獸，瀏覽網(wǎng)頁 對(duì)他們是一種閱讀體驗(yàn)。他們關(guān)注那些涉及到服務(wù)的促銷廣告詞和特性列表的閱讀，相當(dāng)甚至是超過關(guān)注

11、網(wǎng)頁上元素的視覺布局。他們甚至?xí)敢馄刚?qǐng)這樣的設(shè)計(jì)師 他們自己說什么就做出什么樣的設(shè)計(jì)作品。如果你有足夠扎實(shí)的文案，他們就不會(huì)太在意或諸多評(píng)價(jià)，他們正忙于確信文案的內(nèi)容。Heads or Tails?正面還是反面？The point that I m driving at here is that design and copywriting are two sides of the same coin; in separable in every way.The user doesn t see the design and the text, he sees a website.A si

12、n gle in tegrated item that is either desirable or not.在這里我想說的關(guān)鍵點(diǎn)是，設(shè)計(jì)和文案是一個(gè)硬幣上不同的兩面，是相互聯(lián)系密 不可分的。用戶不是單純看設(shè)計(jì)還是文字，而是在看一個(gè)網(wǎng)站，一個(gè)單獨(dú)的綜合項(xiàng)目 的可取與否。The trick then is to toss out“ lorem ipsum ” for as much of the design process aspossible. Stop desig ning without any no ti on of the goal of the desig n. To en gag

13、e in desig n without copy is to build a box before you know what will be placed in side. To put it differe ntly, con sider the followi ng quote fromJeffrey Zeldma n“ Content precedes design. Design in the absenee of conterrtdSdesign, it s decoratio n.”有一個(gè)技巧是在設(shè)計(jì)過程中盡可能的揚(yáng)棄”文本排版。如果沒有任何設(shè)計(jì)目標(biāo) 的概念，就停止那些設(shè)計(jì)。如

14、果設(shè)計(jì)沒有文案，在你了解要放什么在里面之前可以先 留出一塊方框。換種方式講，應(yīng)該考慮一下Jeffrey Zeldman下面這句話：內(nèi)容先于設(shè)計(jì)。沒有內(nèi)容的設(shè)計(jì)那不是設(shè)計(jì)，是裝飾。”This is precisely my point. Uni ess you re desig ning purely for the sake of desig n andnot en gagi ng in some professi onal ven ture, the desig n should serve to rein force the message, not the other way aroun

15、d.這正是我的意思。除非你是純粹為設(shè)計(jì)而設(shè)計(jì)，而沒有涉及到一些專業(yè)風(fēng)險(xiǎn)，設(shè) 計(jì)應(yīng)有助于加強(qiáng)內(nèi)容消息，而不是相反。As an experime nt, try build ing your n ext project by first plac ing in all the content that should be on the page. Throw in the headli nes, the copy, the features, the widgets, the n avigatio n; everythi ng you can thi nk of, but do so withou

16、t desig n. The first step is merely to put it all in one place.Once you ve got it there, then beginstyle it.Think about different ways you can arrange it, color it, and bring it to life.作為一個(gè)實(shí)驗(yàn)，在你的下一個(gè)項(xiàng)目中可以嘗試一些把應(yīng)該在頁面顯示的內(nèi)容最 先放上去。加上標(biāo)題，文案，專欄，小掛件，導(dǎo)航，一切你能想到的，不要帶設(shè)計(jì)。首先是 把所有內(nèi)容都放上去，一旦你想好了排版位置，然后開始風(fēng)格化。你可以嘗試不同的

17、方式來編排，加些顏色,讓頁面活潑起來。This will lead to desig n that is both more effective and more orig in al. It will be more effective because the en tire page is structured to highlight and com muni cate your primary message.Obviously, to eve n beg in this desig n process, you re forced to focus en tirely onstruc

18、turing your communication. Use a simple text editor so that you re not distracted byhow the messag e looks. In stead pay atte nti on only to how it reads.這樣做設(shè)計(jì)不但更有效率，也更具創(chuàng)新。之所以更高效是因?yàn)檎麄€(gè)頁面的結(jié)構(gòu)都突出和表達(dá)了你的主要信息。很明顯，因?yàn)樯踔潦窃谠O(shè)計(jì)過程的開始，你就不得不 把重點(diǎn)放在結(jié)構(gòu)化你的信息表達(dá)。最好使用一個(gè)簡單的文本編輯器，這樣你不會(huì)受 文字信息的 長相”所干擾，而只需關(guān)注它的閱讀效果。Con sider ab

19、ove all else your target audie nee. Who are you seek ing to appeal to with this message? What do they already possess in this area and why ins t it good eno ugh?And of course the most importa nt questi on of all: Why would no usetttteyiwa nt tbuy the product, hire the pers on, etc.?We ll discuss thi

20、s question more in a later article so for now just kn ow that this questi on is the key to great marketi ng.考慮你的目標(biāo)群體高于一切。你希望誰閱讀這些消息？他們?cè)谶@方面已經(jīng)具備了什么？為什么還總不夠好？當(dāng)然,其中最重要的問題是：他們希望使用的網(wǎng)站干什么？ 購買產(chǎn)品？雇用職員？等等。我們將在以后的文章中討論這些問題，現(xiàn)在只需要知道 這是良好營銷的關(guān)鍵問題。Finally, the method mentioned above will lead to more original desig

21、n becauseyou re not designing by using other sites you ve s een as a starting point.Rather tha n wirefram ing some one else s desig n with your own coat of paint you in stead sol ving a puzzle. The puzzle is of course how to best arra nge and style the content that is already on the page. The tradit

22、ion method invoIves jamming content into apredefined space as is the case when you purchase a pre-built design template. The better route is to tailor and evolve the space to accommodate pre-exist ing content.最后，上述的方法將會(huì)產(chǎn)生更多的創(chuàng)新設(shè)計(jì)，因?yàn)槟銢]有使用你已經(jīng)看過的網(wǎng)站 作為一個(gè)起點(diǎn)。你應(yīng)該解決一個(gè)問題 而不是使用別人的設(shè)計(jì)披上你設(shè)計(jì)的外衣。而這個(gè)問題當(dāng)然是，如何最好地安排和風(fēng)格

23、化網(wǎng)頁上已經(jīng)有的內(nèi)容。在傳統(tǒng)的 方法，一般只是你購買了預(yù)設(shè)計(jì)的模板，才涉及到給預(yù)定義的空間填充內(nèi)容。更好的 方法是根據(jù)預(yù)先存在的內(nèi)容剪裁和設(shè)計(jì)空間。注重內(nèi)容，無論是不是你寫的A com mon questi on that arises out of this questi on is whether or not it s your ja designer to write good copy. The ultimate answer sounds like a copout but is completely accurate in real-world setti ngs: it dep

24、e nds. However, no matter what the an swer to this questio n is for you pers on ally, your job is still to focus on the content.由此而浮現(xiàn)出一個(gè)常見的問題，作為一個(gè)設(shè)計(jì)師,寫好文案是是否是你的工作職 責(zé)。最終的答案聽起來像是逃避，但在現(xiàn)實(shí)中確實(shí)事實(shí)如此：它依賴于你。不過，無論 你個(gè)人是怎么回答這個(gè)問題，你工作的重點(diǎn)仍然是內(nèi)容。There are cases where desig ners n eed n ever con sider writi ng a sin g

25、le word themselves. These setti ngs exist mostly in traditi onal brick and mortar desig n offices that contain both a desig n departme nt and a copywriti ng departme nt. I ve pers on ally see n thsetup in most of the big marketing companes that I ve worked with as well as print based bus in esses su

26、ch as magaz ine layout departme nts.有些情況下，設(shè)計(jì)師從來不需要考慮自己寫一個(gè)字。這情況大都是在傳統(tǒng)的設(shè) 計(jì)公司，有各自獨(dú)立設(shè)計(jì)部門和文案部門。我親眼看過和我合作過的這樣的營銷大 公司，比如那些印刷為主的企業(yè)，如雜志出版社。In this latter situati on, magaz ines employ coun tless writers and would n ever expect their designers to be gifted in sesquipedalian locution. However, the mode of oper

27、ation in these bus in esses is ofte n exactly that which I suggested for the web desig n experime nt. Magazine designers are daily given new content to work withand “ pretty up. ” The magaz ine already has a developed style, but this can and does vary drastically from pagere not timagazjraontesigner

28、sto page and each issue prese nts new challe nges for both creativity and spatial requireme nts. As a result, eve n though they ofte n excel at creati ng conten t-ce ntric desig ns在這種情況下，雜志社會(huì)聘請(qǐng)很多作家，決不對(duì)他們的設(shè)計(jì)師在語言天賦方面抱有幻想。然而，這些企業(yè)的運(yùn)作模式剛剛是我提倡給網(wǎng)頁設(shè)計(jì)試驗(yàn)的建議。雜志設(shè)計(jì)師每天都有新內(nèi)容打交道或者美化”，雜志已經(jīng)有一個(gè)成熟的風(fēng)格，但頁與頁之間也可以不盡相同，而且每一

29、個(gè)頁面都有創(chuàng)新和空間需求的挑戰(zhàn)。因 此，即使他們不是作家，雜志設(shè)計(jì)師往往善于倉 M乍內(nèi)容為中心的設(shè)計(jì)。The other com mon sce nario is the plight of the freela ncer. I nthis case, you re a one man/woman show. There s no copywriting department or senioreditor working in conjunction with a design team, just you. In these circumstances, it becomes absolu

30、tely n ecessary for you to hone your copywrit ing skills . Whether or not you think it s fair for clients to expect this of you, the truth is they其他常見的情況則是自由職業(yè)者的困境。在這種情況下，你是單槍匹馬的。沒有文案部門或資深編輯與你的設(shè)計(jì)團(tuán)隊(duì)一起工作，只有你自己。在這種情況下，無論你是否認(rèn)為客戶這樣期望對(duì)你是否公平，磨練文采寫文案成為你絕對(duì)必要的技能，事實(shí)是客戶re a也會(huì)這么認(rèn)為。I apologize for the harsh ness,

31、 but if you can wield Photoshop betterthan Deke McClelland but can t write a great headline to save your life, you freelancer . It s time to drop the excuses and learn to write great copy. Turn your weak ness into one of your stron gpo in ts. Make it your competitive adva ntage, somethi ngyou can tell potential clients that they won t find in chea