網頁與文案設計應該學什麼

1、令人無法抗拒的營銷型網頁文案該如何寫？

目前的非常多的銷售型網站的轉化率都非常低，如果能夠在網頁布局和文案上按照心理學思考模式來安排和撰寫的話，轉化可以大幅度提升。

在銷售心理學中，站到客戶的角度，需要回答客戶以下幾個疑問：

1、你是誰？

2、你要跟我介紹什麼？

3、你介紹的產品和服務對我有什麼好處？

4、如何證明你介紹的是真實的？

5、為什麼我要跟你買？

6、為什麼我要現在跟你買？

你可以對照一下普通的電子商務網站，你就會發現他們只做了1點和第2點，後面那四條超級重要的卻沒有去做，所以他們的轉化率會非常低。

我們可以知道，在網路上要想提升我們的網站的轉化率，就一定需要讓顧客知道，我們可以為他們解決問題，並且讓他們相信我們有這個能力幫他們解決。

在這之前，我們需要讓他們知道我們是誰，從而對我們有個基本的了解，增加些信任。

讓他們了解我們能為他們做什麼，讓他們知道我們是做什麼的，讓他們知道我們為什麼可以為他們做。

這需要我們去證明我們的能力，最終我們還得告訴他們，為什麼我們比別人更適合他，並告訴他們現在就購買我們的理由。

如果一個網站，連這幾點，都沒有做好，又怎麼能讓人相信你銷售的東西是可靠的呢？

當一個網站沒有名氣的時候，就需要做好這些，讓人了解你。

當你有名後，你可以不說，別人也知道你。

比如淘寶網，凡客誠品，賣包包，當當網等。

這些網站，都有自己的品牌文化，都有自己看得見的優勢，所以不需要這么去強調。

正因為如此，如果是做為一個個人，那麼去開設一個電子商務形式的產品銷售網站，是非常難得成功的，因為前期是需要打造品牌的過程，而這個過程，是需要大量的資金支持的。

對於個人來說，最好的通過網路賺錢的方法，就是一是做競價網站，二是做銷售信網站。

就目前一般的企業網站，也需要非常注意根據營銷心理去設計網站。我看到很多的網站，連聯系方式和郵政地址都沒有，起碼這一點就讓人覺得信任不過。

企業網站，需要有企業介紹，也要介紹企業能提供哪些服務，這些服務可以幫助到顧客什麼。

為什麼說你的企業服務是非常棒的，有哪些可以證明，獲過什麼獎，還是有什麼認證，有哪些成功的案例，為什麼現在就要聯系企業來購買服務。

2、網頁文案是什麼？

網頁文案設計淺談
當人們訪問你的站點時，他們會立即下意識地判斷：這個站點怎麼樣？值不值得當回事兒？要知道，互聯網提供了天下大同的機會，也同時讓虛擬世界充斥著數不清的垃圾站點、垃圾信息。 他們靠什麼判斷？速度、設計，最根本的，還是內容。訪客會迅速從你的內容、寫作技巧和你呈現內容的方式，來判斷值不值得在你的站點上投資時間。 所以，網頁文案是極其重要的工作。那麼，網頁文案設計有哪些基本技巧呢？ 文本內容的表現方式，就像你身體的氣味一樣。如果人家喜歡它，他們就會走近來。如果人家不喜歡，馬上逃之夭夭。你希望人家對你的內容感興趣？沒問題，只要你的內容豐富，而且表現方式讓人家的眼睛看起來舒服、大腦接受起來舒服。 　 　怎樣才算最好地表現你的內容呢？說起來也簡單，根本的根本，是設身處地為讀者著想：想想人家用什麼樣的瀏覽器？人家的網路速度？怎樣的方式最便捷、能使 人家在最短的時間內接觸到你的內容？別以為你的系統、你的技術全世界通行，你的網站應該盡量考慮所有的網民、考慮他們所有的需求。 下面我們就從網頁文本表現技巧、電子雜志的文本格式以及網頁文本撰寫技巧幾個方面來具體談談網頁文案設計這個問題，希望對大家有所幫助。一、網頁文本表現技巧 我們現在從網頁文本的工作流程，來看看有哪些需要把握的技巧。 在設計網頁之前，你應該是把你所有的文本內容寫好了、編輯好了吧？那麼先把每個話題、概念、建議和指導意見等等分門別類，切為不同的段落、部分(注意段落要精簡)，拿做菜打比方，有點像配菜。 接下來：做標題。記住，標題就像路牌一樣，人家在你的網站上逛來逛去，全靠它指路了。標題要意義清晰、描述性強，有人喜歡用花里胡哨的詞彙，是很酷，但會增加人家的負擔，讓人家多花一份腦筋琢磨究竟是什麼。 巧妙使用列單和表格。把你的想法按邏輯關系，一條條破解出來，列出來，讓人家在視覺上一目瞭然。同樣，表格也能起來這樣的效果。適於用表格表現的內容，如果是文字，讀起來別提多難受了，是吧？ 立體規劃內容，將所有部分按一定的構架各就其位、分別納入不同層次的頁面。注意先要把最重要的內容放到首頁上，其他的依次就緒。 現在你就可以勾劃頁面藍圖、編HTML了。就文本內容的表現而言，記住盡量別讓一行文字的寬度橫跨整個屏幕。段落一多，這樣子看起來很費勁，而且別人的瀏覽器還可能和你的差別很大。最好別超過屏幕寬度的一半。 內容主體的文字字型大小，最好用軟體的默認值，這可以保證大多數人的閱讀效果。為加強效果，文字大小可以時不時地變一下，不過要適度，別喧賓奪主。 如何適度地使表現形式活躍起來呢？別用下劃線，容易和鏈接標識相混，誤引來點擊。可考慮顏色、粗體、斜體等手段。 記住，每頁都得有個「標題」，就是頁面最頂端出現的那行文字。有的人不知道這個「TITLE」的重要性，隨意來點什麼或者根本就忘了。它和文本內容的標題一樣，都是你站點的一個個路標，能省嗎？ 還有一點，記著考慮如何讓人家列印方便。和書刊相比，電腦上的閱讀環境要難受得多，所以有條件的讀者會選擇將網頁內容列印下來，躺在沙發上慢慢看。如果資源容許，最好能設定兩個版本，一個是正常版本，一個是純文本的，適合列印。 　 　怎麼算適合列印呢？還是那句話，體貼讀者情況。比方說，別把文本拉到全屏的寬度，有的列印機會切去右邊不少寬度的內容。又如，顏色也得注意，黃色背景下 的紅色文本，列印出來就很模糊。最好還是來簡單的：白紙黑字。還有，有的瀏覽器列印帶框架(frame)的頁面會出錯，這個也應該考慮進去。 二、新聞郵件、電子雜志的文本格式 要充分利用互聯網的通訊便捷特點，留住「回頭客」。最方便的，就是通過電子郵件發送站點內容更新通知，再正規一點，發送定期的新聞郵件、電子雜志等等。那麼這些電子郵件媒體有什麼講究呢？ 　 　最基本的，要控制每行文字的長度。每行最好在20個字左右，超過30字就有點玄了，有的訂戶接到的郵件，看起來就是七零八落、參差不齊。文字長度的控 制，可以用字處理程序來做，實在不行，就手工來。這是針對純文本郵件而言的，有人喜歡用HTML格式的，下面我們就看看網頁文本需要哪些技巧。 三、網頁文本撰寫技巧1、最吸引人內容要先說先說最吸引人的內容，然後再慢慢展開。然後再慢慢展開。或者說，把你的獨特內容包裹成一個懸念，吸引人家注意。讀者看一篇文章，前三段注意力最集中，如果這「寸土寸金」的前三段用不好，人家就要和你說再見了。 遵從同一法則，做標題更為重要。讀者一般只是尋找某些特定的信息，而不是什麼都看。他們會掠過一行行文字，捕捉感興趣的關鍵詞、句子或段落，如果你用清晰的標題指引人家，會使他們瀏覽起來很便利。 同理，措辭要講究，適當使用形容詞，吸引力會更大。比方說，「功能強大的新軟體包」，和「新軟體包真好」相比，是不是更引人些？ 總之，要有些想像力，花點心思，琢磨琢磨用怎樣的文字，才能最大限度地挑起讀者的好奇心和注意力。 2、內容要使讀者在思想上、在視覺上產生愉悅感你在寫作時，要記住，你的網頁可能會被成千上萬的人瀏覽。如果你的內容讓人家覺得是專門為他(她)而寫，那麼，你的站點對他們的吸引力就大得多。別自顧自地講大道理，實在點、直接點、輕松點，就像和你的一位好朋友面對面聊天一樣，讓人家看得下去。 3、著筆盡量要細致讓人家能在最短的時間內，了解你想呈現給人家什麼。給人家一幅清晰的畫卷，別雲山霧罩的。 4、開門見山，直接了當大家都知道，網友的耐心尤其少。你能提供的信息或許對他們有裨益，但如果要人家沒完沒了地翻下去才能找到，恐怕極少有人有這份耐心。 5、越簡捷越好一個句子最好別超過25個字，太長了，會讓讀者接不上氣。段落也要盡量簡短，6-8句足矣。再長，屏幕上黑乎乎一片，人家眼睛先花了，屏幕上看東西本來就沒有讀書讀報來得舒服。 6、認真修改　 　寫完了，文字很「酷」，標題很「酷」，是不是就可以萬事大吉了？NO。先好好組織一下段落結構、邏輯關系，別東一榔頭西一棒子，要一段一個意思，一部分 一個題，全篇從邏輯上要完整、順暢。要注意給讀者留點自由，讓人家一看就能放心地選擇，哪些感興趣，哪些可以跳過去。 再仔仔細細地通讀一遍，看有沒有錯別字、病句、邏輯混亂問題？直到一切OK才行。 你不必有諾貝爾文學獎得主那樣的寫作天賦和素養，只要肯花心思琢磨，參照上面的「規矩」，你的網頁內容應該會為你贏得更多的訪問量和注意力資源，不信試試看。

3、做網頁設計時文案在哪裡找比較多？

可以在網上專門搜集一些類似的資料，也可以關注一些寫文案的微信公眾號

4、前端開發 要做一個類似公眾號平台那樣可以編輯文案的頁面，有什麼框架或者模板推薦嗎？

最近剛做了一個微信圖片投稿的小應用。前端功能很簡單，填寫表格，上傳圖片。圖片部分用了微信的 JS SDK，同時兼容非微信瀏覽器或低版本微信（也就是調用系統input啦）。
前端我用的是 React＋Bootstrap。因為我現在就靠這一套通吃。。。（別的不會
頁面文檔：1.4KB
css：1.9KB，
bootstrap.min.js：120KB，
app.js：138.2KB，
微信 JS SDK：9.4KB
字體：17.9KB
一共279.4KB，用起來還 OK，實際上這個應用頁面很簡單，不用 Bootstrap 完全可以（我就是懶），體積一下就能減少43%。
測試過的機型包括 iPhone 5s＋，Nexus 5，小米 Note，魅族 MX5，MOTO X Style，三星 Galaxy 4，OPPO A31。iOS 微信版本6.3.9，Android 微信版本6.3.8，OPPO 的微信版本是5.3，不支持 chooseImg 介面。
事實上微信頁面並不會太復雜，或者說太復雜的頁面並不適合微信，復雜度應該在產品設計階段就解決掉，如果前端需要上重武器才能完成需求，不如回過頭好好想想產品設計的問題～

5、網頁設計文案的重要性以及如何做好內容為中心的設計

設計師往往忘記重視設計結構那樣重視編寫文案，以便在網頁上突出文案。今天我們將討論為什麼文案是如此的重要，誰又應該學習掌握它，以及如何做好內容為中心的設計。 設計好，文案差 As designers, we rightfully spend our time focused on aesthetics. We are pixel pushers who firmly believe with the strongest conviction that attractive websites are fundamentally better websites. 作為設計師，我們理所當然地多花時間專注於美學方面。有吸引力的網站可以從根本上改善網站，我們正是這種觀念最堅信的推崇者。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 second. Finally, as our various GTD apps inform us that the time has 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 still marred by the subpar copy that appears on every page. 我們使用「Lorem Ipsum」文本排版生成器建立我們的排版模型，所以我們有時間的時候還可以回頭寫更好的東西。而截止日期的做法（甚至是我們自己）仍然有可能把文案推遲到最後一秒。然後，各種GTD程序通知我們是時候提交我們的作品了，我們就在漂亮的作品上臨急臨忙的放些速寫的文字，然後就扔出去了。最後每個頁面即使視覺上都沒有什麼挑剔，卻依然看到很多美中不足的文案。 For many of us, this is simply how we』re programmed. We』re visual beasts that thrive on good design. The problem of course is that the neglect of solid copy will often cause the finished proct to suffer as much or more than a poor design. Unless designers are your target market, your user base will be populated largely by indivials that don』t speak design. Show them Dribbble.com and they』ll wonder aloud why anyone would ever create such a service. 對於我們大多數人而言，如何編程對我們來說簡單的很，我們是靠優秀設計成長壯大的視覺怪獸。然而問題是，我們對實在文案的忽視導致我們最終的成品大受影響，影響甚至超過那些差勁的設計。除非你的目標市場是設計師，否則你的用戶群中大多都是不跟你談設計的。你告訴他們Dribbble.com，他們會好生奇怪，為什麼有人會提供這樣的服務。 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, easy to navigate or impossible. This is what is meant when designers say that great design is transparent. If your users notice your interface too much, it』s probably because they hate it. 當然，他們往往可以解釋什麼是醜陋的，什麼是雷同的，就像我們一樣，但只能在一個直觀的水平。他們真正在意的是網站的整體感覺，是否流暢或繁瑣，是否易於操作。這就是設計師所說的，優秀的設計是透明的。如果你的用戶對界面很關心，很有可能是因為他們很討厭這個界面。 This same metaphor of transparency applies to copywriting on the web. It』s worth noting that the average user is in fact trained in reading and writing far more than design, though still only as much as a standard ecation supplies. To these users, we』ll call them 「normal people」 as opposed to we visual freaks, browsing the web is a reading experience. Evaluating a service involves skimming the sales pitch and reading the list of features as much or more than evaluating the visual layout of the elements on the page. They』ll even hire a designer based as much on what he says about himself as what appears in his portfolio. If you have strong copy, they won』t notice or evaluate it too much,they』ll be far too busy being convinced of what it』s saying. 這個透明的比喻同樣適用於網頁上的文案。值得一提的是，實際上一般用戶在閱讀和寫作方面所受的教育要遠遠超過設計方面，雖然依然只是一個標准教育的產品。對於這些用戶，我們會稱他們為「正常用戶」而不是我們這些視覺怪獸，瀏覽網頁對他們是一種閱讀體驗。他們關注那些涉及到服務的促銷廣告詞和特性列表的閱讀，相當甚至是超過關注網頁上元素的視覺布局。他們甚至會更願意聘請這樣的設計師——他們自己說什麼就做出什麼樣的設計作品。如果你有足夠扎實的文案，他們就不會太在意或諸多評價，他們正忙於確信文案的內容。 Heads or Tails? 正面還是反面? The point that I』m driving at here is that design and copywriting are two sides of the same coin; inseparable in every way. The user doesn』t see the design and the text, he sees a website. A single integrated item that is either desirable or not. 在這里我想說的關鍵點是，設計和文案是一個硬幣上不同的兩面，是相互聯系密不可分的。用戶不是單純看設計還是文字，而是在看一個網站，一個單獨的綜合項目的可取與否。 The trick then is to toss out 「lorem ipsum」 for as much of the design process as possible. Stop designing without any notion of the goal of the design. To engage in design without copy is to build a box before you know what will be placed inside. To put it differently, consider the following quote from Jeffrey Zeldman 有一個技巧是在設計過程中盡可能的揚棄」文本排版「。如果沒有任何設計目標的概念，就停止那些設計。如果設計沒有文案，在你了解要放什麼在裡面之前可以先留出一塊方框。換種方式講，應該考慮一下Jeffrey Zeldman下面這句話：「內容先於設計。沒有內容的設計那不是設計，是裝飾。」This is precisely my point. Unless you』re designing purely for the sake of design and not engaging in some professional venture, the design should serve to reinforce the message, not the other way around. 這正是我的意思。除非你是純粹為設計而設計，而沒有涉及到一些專業風險，設計應有助於加強內容消息，而不是相反。 As an experiment, try building your next project by first placing in all the content that should be on the page. Throw in the headlines, the copy, the features, the widgets, the navigation; everything you can think of, but do so without design. The first step is merely to put it all in one place. Once you』ve got it there, then begin to style it. Think about different ways you can arrange it, color it, and bring it to life. 作為一個實驗，在你的下一個項目中可以嘗試一些把應該在頁面顯示的內容最先放上去。加上標題，文案，專欄，小掛件，導航，一切你能想到的，不要帶設計。首先是把所有內容都放上去，一旦你想好了排版位置，然後開始風格化。你可以嘗試不同的方式來編排，加些顏色，讓頁面活潑起來。 This will lead to design that is both more effective and more original. It will be more effective because the entire page is structured to highlight and communicate your primary message. Obviously, to even begin this design process, you』re forced to focus entirely on structuring your communication. Use a simple text editor so that you』re not distracted by how the message looks. Instead pay attention only to how it reads. 這樣做設計不但更有效率，也更具創新。之所以更高效是因為整個頁面的結構都突出和表達了你的主要信息。很明顯，因為甚至是在設計過程的開始，你就不得不把重點放在結構化你的信息表達。最好使用一個簡單的文本編輯器，這樣你不會受文字信息的「長相」所干擾，而只需關注它的閱讀效果。 Consider above all else your target audience. Who are you seeking to appeal to with this message? What do they already possess in this area and why ins』t it good enough? And of course the most important question of all: Why wouldn』t they want to use the site, buy the proct, hire the person, etc.? We』ll discuss this question more in a later article so for now just know that this question is the key to great marketing. 考慮你的目標群體高於一切。你希望誰閱讀這些消息？他們在這方面已經具備了什麼？為什麼還總不夠好？當然，其中最重要的問題是：他們希望使用的網站干什麼？購買產品？僱用職員？等等。 我們將在以後的文章中討論這些問題，現在只需要知道這是良好營銷的關鍵問題。 Finally, the method mentioned above will lead to more original design becauseyou』re not designing by using other sites you』ve seen as a starting point. Rather than wireframing someone else』s design with your own coat of paint you』re instead solving a puzzle. The puzzle is of course how to best arrange and style the content that is already on the page. The tradition method involves jamming content into a predefined 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-existing content. 最後，上述的方法將會產生更多的創新設計，因為你沒有使用你已經看過的網站作為一個起點。 你應該解決一個問題——而不是使用別人的設計披上你設計的外衣。而這個問題當然是，如何最好地安排和風格化網頁上已經有的內容。在傳統的方法，一般只是你購買了預設計的模板，才涉及到給預定義的空間填充內容。更好的方法是根據預先存在的內容剪裁和設計空間。

6、求一款文案做網頁設計用的軟體（好像是國外的，跟DW有些類似）！！！

notepad++