寫給外貿(mào)人看的網(wǎng)站制作書

時(shí)間：2023-07-25 06:45:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-07-25 06:45:01 來源：網(wǎng)站運(yùn)營

寫給外貿(mào)人看的網(wǎng)站制作書：第一章 ————引言
WordPress在中國的發(fā)展
零九年，cn域名被收回，正式開始大張旗鼓備案制度，基本KO了整個(gè)個(gè)人建站市場。那時(shí)候其實(shí)很多人都在用WordPress，很多，特別是學(xué)生群體。從那時(shí)起，中國的互聯(lián)網(wǎng)對(duì)個(gè)人就極其不友好，也是從那時(shí)起，很多個(gè)人開始尋找國外建站的渠道。而任何一個(gè)市場的培育，都需要有良好的營商環(huán)境，中國互聯(lián)網(wǎng)對(duì)個(gè)人，沒有什么營商環(huán)境可言。個(gè)人用戶市場培養(yǎng)不起來，胎死腹中，行業(yè)必備的知識(shí)積累，基礎(chǔ)設(shè)施也建立不起來，光是人數(shù)就不夠，不可能不產(chǎn)生念頭，不可能沒人做出好的studio。生態(tài)一旦形成，便欣欣向榮，不可能產(chǎn)生不了好東西。好東西被人看到，不可能產(chǎn)生不了商業(yè)鏈條。有了商業(yè)鏈條，想弄死都難。
設(shè)計(jì)，內(nèi)容建設(shè)，轉(zhuǎn)化率的學(xué)問，郵件營銷，響應(yīng)式設(shè)計(jì)，用戶體驗(yàn)設(shè)計(jì)。如果你仔細(xì)去看看，在這些領(lǐng)域，中國互聯(lián)網(wǎng)市場幾乎找不到真一線，有知名度的公司和個(gè)人。這個(gè)領(lǐng)域的知識(shí)建設(shè)，最佳實(shí)踐全部來自于國外，而且因?yàn)檎Z言的關(guān)系，國內(nèi)建站社區(qū)得到的基本是這個(gè)領(lǐng)域知識(shí)和技能樹的幾片葉子。
反之國外這個(gè)市場，新技術(shù)新理念新工具層出不窮，很多個(gè)人驅(qū)動(dòng)，幾個(gè)人就能影響整個(gè)行業(yè)，社區(qū)反哺，形成了健康良好的生態(tài)鏈條，生產(chǎn)率也上升得非?？欤_整個(gè)社區(qū)的重難點(diǎn)問題，都能在一年兩年時(shí)間內(nèi)獲得解決，小到圖標(biāo)庫，組件庫，大到成體系的整體建站方案。而國內(nèi)這些領(lǐng)域一直蠕動(dòng)，基本沒有任何進(jìn)展。大量企業(yè)仍然沒有互聯(lián)網(wǎng)戰(zhàn)略，他們只想要一個(gè)網(wǎng)站，但時(shí)至今日，大量企業(yè)仍然沒有明白網(wǎng)站有什么價(jià)值。
網(wǎng)站是品牌的延伸，是“營銷”體系的重要環(huán)節(jié)，需要長期運(yùn)營，才會(huì)有回報(bào)，內(nèi)容建設(shè)，SEO，和業(yè)務(wù)對(duì)接，建立自己的用戶群，哪一項(xiàng)都需要時(shí)間。但大多數(shù)企業(yè)沒有耐心做這些事。想做也做不成，因?yàn)橄胱鲆舱也坏健皩I(yè)”的團(tuán)隊(duì)，市場上根本沒有“專業(yè)”的人。能找到的只有小作坊，不懂BI，沒有營銷和設(shè)計(jì)的概念，只是恰好懂怎么用技術(shù)做網(wǎng)頁。
WordPress已經(jīng)存在十幾年，是一個(gè)十分成熟的平臺(tái)。內(nèi)容創(chuàng)作管理工具，強(qiáng)大的設(shè)計(jì)師群體，業(yè)界最好的SEO工具鏈，在這些東西的支持下，能讓個(gè)人和企業(yè)以極低的成本擁有一個(gè)網(wǎng)站，并非常高效地運(yùn)營下去。絕大多數(shù)的國內(nèi)東WordPress的個(gè)人，因?yàn)镼和語言的問題，都停留在了這個(gè)生態(tài)低端的位置，我相信有不少人以為自己能把網(wǎng)站裝起來就算是懂WordPress了。
因?yàn)椴粔驅(qū)I(yè)化，也沒有充分競爭開，什么東西都停留在30%就能掙錢，結(jié)果就是那1%，那1%還是包含了所有玩兒票的用戶，如果這個(gè)數(shù)字準(zhǔn)確，那國內(nèi)的WordPress市場基本就處于根本沒有開始的狀態(tài)。還有更糟的，是綏靖心態(tài)的醞釀，國外有好的東西，不去學(xué)習(xí)掌握，貶低的反而多起來，弄不懂的東西就毀掉，希望別人也不懂，根本認(rèn)識(shí)不到WP平臺(tái)的質(zhì)量?；剡^頭去用那些不成熟的樣子貨平臺(tái)，捧著當(dāng)寶貝，中國的互聯(lián)網(wǎng)很多網(wǎng)站的中國特色。
形成不了生態(tài)，和國內(nèi)的互聯(lián)網(wǎng)制度有關(guān)系，和我們做事的那種習(xí)慣有關(guān)系，文化起了相當(dāng)作用，而我們的技術(shù)文化，設(shè)計(jì)文化，營銷文化，還沒有形成，非常稚嫩，所以還得當(dāng)學(xué)徒，還得當(dāng)很長時(shí)間。從2005年到2017年這么長的時(shí)間，國外的這個(gè)產(chǎn)業(yè)規(guī)模估計(jì)至少百億以上，我希望中文專業(yè)建站，專業(yè)設(shè)計(jì)，專業(yè)營銷，所有有品位的工種，能發(fā)展得更好。
-By WP叔叔（本站，有刪節(jié)）
外貿(mào)網(wǎng)站的行業(yè)現(xiàn)狀和標(biāo)準(zhǔn)基本原則
結(jié)果導(dǎo)向，即網(wǎng)站是生產(chǎn)工具，是投資，流量在網(wǎng)站上纏身詢盤；跟展會(huì)，Alibaba，開發(fā)新一樣，做為一種常見的獲客手段。
外貿(mào)網(wǎng)站的好壞即是帶來部分流量（SEO）以及將所有的流量轉(zhuǎn)化為詢盤；或者是訂閱等；
99%不合格，表現(xiàn)在收錄，外觀等。
原因是國內(nèi)對(duì)于網(wǎng)站本身的不依賴；
外貿(mào)網(wǎng)站只是其中公司的一個(gè)業(yè)務(wù)，沒有獨(dú)立的外貿(mào)建站行業(yè)。所以沒有標(biāo)準(zhǔn)。

---

第二章 設(shè)計(jì)
就像“觀看者眼中的美麗”一樣，有效的網(wǎng)頁設(shè)計(jì)是由網(wǎng)站的用戶而不是網(wǎng)站所有者來判斷的。影響網(wǎng)站可用性的因素很多，不僅僅是形式（看上去有多好），還有功能（使用起來有多容易）。
近代大神喬布斯幫主曾經(jīng)說過：
設(shè)計(jì)不僅是看起來怎樣或者感覺如何，設(shè)計(jì)是理想的運(yùn)行（how it works, 翻譯略有不當(dāng)）。



設(shè)計(jì)不好的網(wǎng)站往往表現(xiàn)不佳，并且Google Analytics（分析）指標(biāo)不理想（例如跳出率高，網(wǎng)站停留時(shí)間短，每次訪問頁數(shù)低，轉(zhuǎn)換次數(shù)低）。那么，什么使得好的網(wǎng)頁設(shè)計(jì)？
良好的網(wǎng)頁設(shè)計(jì)總是迎合用戶的需求。您的網(wǎng)絡(luò)訪問者是否在尋找信息，娛樂，某種交互方式或與您的業(yè)務(wù)進(jìn)行交易？您網(wǎng)站的每個(gè)頁面都需要有一個(gè)明確的目標(biāo)，并以最有效的方式滿足您網(wǎng)站用戶的特定需求。
在廣告行業(yè)中AIDMA是一個(gè)廣為人知的詞，這個(gè)詞表示人的消費(fèi)活動(dòng)中的五個(gè)階段，網(wǎng)站的作用可以用ADIMA來表示。
A: Attention（引起注意）
I: Interest （引起興趣）
D: Desire（喚起欲望）
M: Memory（留下記憶）
A: Action（購買行動(dòng)）
只要牢記這些設(shè)計(jì)元素，創(chuàng)建一個(gè)美觀而實(shí)用的網(wǎng)站是很容易的。你有一個(gè)網(wǎng)站設(shè)計(jì)，需要審查或優(yōu)化？或者，也許你正在計(jì)劃一個(gè)網(wǎng)站，你正在尋求從頭開始設(shè)計(jì)。無論哪種方式，這些有效的網(wǎng)頁設(shè)計(jì)原則可以幫助您的網(wǎng)站更吸引，有用，令人難忘的訪問者。
在這里引入一個(gè)名詞，或者說創(chuàng)造一個(gè)名詞，叫做impression ratio， IR；
是指一個(gè)用戶對(duì)于網(wǎng)站某些原色的印象，包括字體，按鈕，顏色，圖片等等。
我們希望的是讓用戶過目不忘；
跟IR相對(duì)的是 friendly ratio，F(xiàn)R，是用戶對(duì)某種原色的熟悉程度；
一般來說，越熟悉，則越?jīng)]有印象。
Impression Value，IV，
IV=IR * time
引入了概念 IR Impression ratio，對(duì)于顏色，字號(hào)，布局和轉(zhuǎn)化率開先河；
I-R Line Information – Result Line，對(duì)于轉(zhuǎn)化率和用戶體驗(yàn)的頁面布局開先河；
顏色，圖標(biāo)，圖片——已完成

顏色越少感覺越高級(jí)，最高級(jí)的就是黑色+白色，這兩種在網(wǎng)頁設(shè)計(jì)中不算是顏色。從用戶體驗(yàn)角度來講，紅色給人危險(xiǎn)和警示的作用，用戶看到大面積紅色后會(huì)迅速離開，給用戶的IR高。深思熟慮的調(diào)色板可以大大提高用戶體驗(yàn)。



單色原則
單色制造出簡潔的感覺，配合適合的留白就可以制作出大方的風(fēng)格；最后但并非最不重要的是，空白/負(fù)空間是非常有效的給你的網(wǎng)站一個(gè)現(xiàn)代和整潔的外觀。
互補(bǔ)色
彩創(chuàng)造平衡與和諧。對(duì)文字和背景使用對(duì)比色將使閱讀更容易，注意要有主色；如果是三種顏色，比例可以考慮7:2:1
避免的原則：
鮮艷的色彩創(chuàng)造情感，應(yīng)該謹(jǐn)慎使用（例如按鈕和CTA）
冷色配深色；
推薦的幾種顏色
紅色+白色：突出品牌
紅色+黑色：高性能運(yùn)動(dòng)
藍(lán)色+白色：商務(wù)
明黃+黑色：機(jī)械
紅色：#c71a1d
藍(lán)色：#112a88
用色一般考慮是logo顏色和行業(yè)顏色，顏色有情感性別。
推薦配色網(wǎng)站
http://paletton.com/
http://peise.net
配色效果




圖標(biāo)應(yīng)該有專門的設(shè)計(jì)師來制作，或者參考VI視覺標(biāo)準(zhǔn)手冊(cè)制作；可以調(diào)用fontawesome 簡單的圖標(biāo)字體；
有能力用AI聲稱SVG格式的文件，相對(duì)較小，矢量。
要點(diǎn)：

1. weight，粗細(xì)一致；粗細(xì)跟字體也最好一致；
2. radius，
3. color，跟字體搭配或者一致。

阿里巴巴做了一個(gè)矢量圖庫，可以拿來主義。http://iconfont.cn
再牛的高手就直接做成字體。用偽類調(diào)用。
讓天下沒有難做的圖標(biāo)

Logo設(shè)計(jì)
Logo設(shè)計(jì)可以用dafont網(wǎng)站和http://logomakr.com來輕松制作，外貿(mào)的Logo簡單化和字母化，盡量不要中英文同時(shí)出現(xiàn)。注意使用VI，留意淺色圖標(biāo)，最小辨識(shí)像素等。
*廣告：本人承接Logo制作，10K起。

一張圖片可以說一千個(gè)字，并為您的網(wǎng)站選擇正確的圖像可以幫助品牌定位，并與您的目標(biāo)受眾連接。如果手頭沒有高質(zhì)量的專業(yè)照片，可以考慮購買照片來提升網(wǎng)站的外觀。還要考慮使用信息圖表，視頻和圖形，因?yàn)榧词故菍懙米詈玫奈谋疽部梢愿行У剡M(jìn)行溝通。
產(chǎn)品圖片：盡量自己拍，參考行業(yè)的角度；一般來說這年頭手機(jī)拍的就可以，燈箱也比較有必要，畢竟不貴，而且效果好；
考慮到視網(wǎng)膜屏幕的清晰度，一般用實(shí)際大小x2. 建議的寬度是768px。
一般用產(chǎn)品名稱含有關(guān)鍵詞命名，圖片在本地沒有Alt屬性，在上傳到網(wǎng)站上之后才有；默認(rèn)的Alt即圖片名稱。
場景圖片：不好拍，有能力的自己拍。場景圖片一般用在首頁幻燈片，或者背景圖；盡量用PS壓縮下大小。圖片盡量不要直接加蒙版，比如白色文字，用深色蒙版加在圖片上；盡量不要這么做的原因是，場景圖片一般加大，如果加載不出會(huì)看不清楚文字?？梢钥紤]：1. 在slider revolution中增加一個(gè)蒙版涂層；在visual composer中加一個(gè)overlay，或者注意本行的背景色是對(duì)比顏色，即可。
網(wǎng)站要出彩，場景圖片非常關(guān)鍵。
圖片比例：牽扯到布局和板式，圖像豎版叫做portrait-肖像畫，橫版叫做landscape，風(fēng)景畫。谷歌給出的平均照片比例。



The average engagement rate for a landscape photo is 1.26%. The average engagement rate for a portrait photo is 1.43%.
一般來說，自然的東西是舒服的，也是覺察不到的。非自然的東西即是強(qiáng)調(diào)。具體可以到Amaury Descours的網(wǎng)站上了解更多。https://photovideocreative.com/ 教人拍照，有很多理論，比如螺旋，三分，情感等。
這里推薦黃金比例1:1.618
佐佐木剛士在版式設(shè)計(jì)理論中說，
有一種比例關(guān)系基本上是最容易收到人們喜歡的。在過去的文化遺產(chǎn)中也有很多這樣的遺存，這就是直哪些用了黃金分割率而建成的建筑物。在長方形的邊長比例中，被認(rèn)為最理想的長寬比是1:1.618。如果把這個(gè)比率用到排版設(shè)計(jì)中，就容易設(shè)計(jì)出更為讀者所喜歡的構(gòu)圖。
此外，以黃金分割率為一個(gè)標(biāo)準(zhǔn)，一種廣為流傳的說法是，比黃金比例更細(xì)長的是一種端正的，女性的圖形。與之相反，隨著他逐漸趨向于正方形，這個(gè)圖形就會(huì)變成更加男性的構(gòu)圖。作為一種參考。



字體——已完成

一般來說，Sans Serif字體（如Arial和Verdana）更容易在線閱讀（Sans Serif字體是沒有襯線的當(dāng)代外觀字體），一般建站Sans serif更容易駕馭，適合機(jī)械，日常，購物等。Serif可以用在一些時(shí)尚或者權(quán)威方面。
不知道怎么選，就選擇sans serif。



設(shè)計(jì)常用字體——擴(kuò)展閱讀



以下是最知名設(shè)計(jì)網(wǎng)站https://www.awwwards.com 給出的20個(gè)谷歌字體。
個(gè)人喜歡用roboto，本站用的是roboto，偏硬一點(diǎn)可以用roboto condensed。





字體根據(jù)粗細(xì)（Light-Black）和寬窄（Extended-Condensed）有不同的搭配，設(shè)計(jì)師Adrian Frutiger 設(shè)計(jì)了Frutiger’s Gird，福魯?shù)细窬W(wǎng)格，來區(qū)分寬度和磅值，是搭配的選擇的編號(hào)系統(tǒng)。
簡單的說，就是不要用太接近的粗細(xì)寬窄，也不要用太懸殊的粗細(xì)寬窄。




比例
標(biāo)題和正文的對(duì)比IR建議在0.6，黃金比例是最耐看的；突出品牌或者首頁大標(biāo)題下可以到0.95左右，適當(dāng)加大標(biāo)題。在常用性，大小等問題上參考IR原則。
段落
每行建議字?jǐn)?shù)在14-90；超過或者不夠容易造成閱讀困難；
避免寡行（結(jié)尾段落剩余的文字較少，是印刷行業(yè)中成為孤行或者寡行，視覺上不平衡。）
避免大量粗體（美國文化認(rèn)為bold有罵人的意思）和全部大寫字母（閱讀困難）
行距，邊距一般用默認(rèn)即可。行距1.2，邊距PC 60px，手機(jī)15px做參考。

字體字磅
字體是”SF Pro Display”,”SF Pro Icons”,”Helvetica Neue”,”Helvetica”,”Arial”,sans-serif。前兩個(gè)是不常見的字體，整體偏細(xì)。新聞?wù)囊话阍跇?biāo)準(zhǔn)400；副標(biāo)題標(biāo)題在500；首頁配合大圖介紹產(chǎn)品一般用600.
正文
Apple一般正文用19點(diǎn)字號(hào)（磅是印刷的，電子屏幕一般用點(diǎn)or PX or像素來代替），一般介紹的時(shí)候只有一段，外加一個(gè)標(biāo)題，一個(gè)圖片。在有多段的時(shí)候一般用17點(diǎn)字號(hào)。段首不鎖進(jìn)（鎖進(jìn)是老式打印機(jī)的產(chǎn)物），在段間距和行距一樣的時(shí)候才鎖進(jìn)。字體顏色是HEX #333
標(biāo)題
英國的Gavin Ambrose和Paul Harris認(rèn)為字體和標(biāo)題的比例是黃金比例，即0.6倍，或者說1.6倍。來看下蘋果的。大圖的標(biāo)題h2，44px；內(nèi)容h3，32px；比例1.83。小圖標(biāo)題h4 40px，內(nèi)容h5 21px，比例1.9。大家可以用作突出的參考。在新聞界面，副標(biāo)題24px和正文17px比例是1.41。字重區(qū)別都比較大。顏色HEX #111
對(duì)齊
只有在介紹產(chǎn)品的主圖時(shí)候劇中。其他情況一律居左對(duì)齊。做劇中對(duì)齊，字號(hào)一定對(duì)比要強(qiáng)烈，Apple在1.8-1.9倍左右。常規(guī)的左對(duì)齊在1.4倍。
顏色
主要的顏色是黑白灰。有時(shí)候會(huì)配合著產(chǎn)品出淡金色，紅色，深空灰等。鏈接顏色藍(lán)色。顏色H #111 P #333 Link: #0070c9。頁腳顏色 標(biāo)題： #333，text #555，note 淺灰色#888，border-bottom-color: rgb(214, 214, 214);背景顏色 導(dǎo)航 background: rgba(0,0,0,0.8); 主頁淺灰1 #fafafa， #f5f5f5，#eee。頁腳背景 #f2f2f2。
圖片
圖片很奇怪，首頁都用了jpeg格式；看到的圖片又是有背景的。PNG按理說可以做成透明底，并且相對(duì)要小，但蘋果沒用png。以背景形式做的，下載有一定門檻。我猜測是為了防止盜圖。
鏈接和按鈕
只有在購買的時(shí)候有button，其他時(shí)候的鏈接，就僅僅是加了一個(gè)>的符號(hào)。顏色藍(lán)色。某些地方的鏈接比如頁腳，hover動(dòng)作沒有顏色變化，只是增加下劃線。一致性強(qiáng)。沒有hover變化底色的強(qiáng)烈交互。簡單作風(fēng)。
布局位置
導(dǎo)航欄只有Logo，產(chǎn)品和搜索。左側(cè)的位置重要，閱讀習(xí)慣是從左向右，所以左上角最重要的位置，放logo突出品牌。導(dǎo)航很簡單，只有產(chǎn)品。搜索永遠(yuǎn)是導(dǎo)航找不到才用的備選，只有圖標(biāo)。點(diǎn)擊后全寬搜索。其他的欄目放在了頁腳。沒有訂閱，沒有社交，沒有返回頂部，沒有側(cè)邊欄。國內(nèi)大部分的網(wǎng)站（有時(shí)候我也不得不）是導(dǎo)航有分類目錄，側(cè)邊欄是分類目錄，頁腳還是分類目錄。其實(shí)這是兩個(gè)設(shè)計(jì)思路；要么從每個(gè)地方都能進(jìn)入；要么某個(gè)欄目只能在某個(gè)最合適的地方，像python語言。
導(dǎo)航欄
導(dǎo)航欄上的圖標(biāo)和導(dǎo)航，都是用的svg適量格式，作為背景。布局是flex從頭到尾。手機(jī)或者寬度小于768，漢堡包導(dǎo)航不是三道杠，是兩道杠?？雌饋砗唵吸c(diǎn)？導(dǎo)航是在左邊，不是常規(guī)的右邊?？戳讼轮車艘话闶怯沂?。但是MAC上的很多操作都在左邊。看一下iphone上多數(shù)的點(diǎn)擊事件，是集中在左邊的。比如返回，取消。再看一下iphone的滑動(dòng)事件，大多都是從左邊到右邊的。最后再看下硬件設(shè)計(jì)，音量的設(shè)計(jì)也放在了左邊。電源鍵也正好在我的食指位。蘋果的諸多設(shè)計(jì)，都是為了方便左手單手持設(shè)備可以完成操作的。我的結(jié)論：故意的。

---

板式和布局——已完成
布局在攝影這門學(xué)科中相對(duì)較難，講究突出重點(diǎn)，平衡等；在網(wǎng)頁設(shè)計(jì)里面還要考慮人機(jī)交互，但總的來說，板式研究的是人的行為，而不是頁面本身的屬性，所以以下這些理論也只能是當(dāng)前的一種理論而已，況且我個(gè)人研究內(nèi)容僅僅在英語商業(yè)網(wǎng)站一種，可能有所偏頗，僅僅是個(gè)人心得。

• 信息結(jié)果線

從右上到左下的直線，左側(cè)注重信息，從上向下逐漸減弱；在布局信息的時(shí)候，盡量把重要信息放在上邊和左邊。大家甚至習(xí)以為常，比如我們的導(dǎo)航欄和左側(cè)側(cè)邊欄，這些信息一般是用于信息的快速查找。



比如F字形的熱力圖。眼睛跟蹤研究已經(jīng)確定人們以“F”模式掃描計(jì)算機(jī)屏幕。大多數(shù)人看到的是在屏幕的頂部和左側(cè)，屏幕的右側(cè)很少見。有效設(shè)計(jì)的網(wǎng)站不會(huì)強(qiáng)迫觀眾的視覺流動(dòng)，而是以讀者的自然行為來工作，并按照重要性（從左到右，從上到下）的順序顯示信息。



右邊是注重結(jié)果，比如注冊(cè)，聯(lián)系，購買等進(jìn)一步的行為，大家可以參考http://apple.com，http://amazon.com等大型網(wǎng)站，一般來說，右側(cè)是下定決心做某件事了，知道這個(gè)信息對(duì)轉(zhuǎn)化率有用。
在設(shè)計(jì)的時(shí)候，如果省略右下部分，變成空白，會(huì)在視覺上不平衡。

---

• 標(biāo)準(zhǔn)板式

每一項(xiàng)標(biāo)準(zhǔn)都得來不易，有學(xué)習(xí)的部分，也有值得推敲的部分。這六層的樣式非常想易經(jīng)中的第10卦_履卦(天澤履)_乾上兌下，履虎尾，不咥人，亨。意思是說：本卦上卦為乾，為天，下卦為兌，為澤，上天下澤，尊卑顯別，這是履卦的卦象。君子觀此卦象，從而分別上下尊卑，使人民循規(guī)蹈矩，安份守紀(jì)。放在這里意思也很合適，這樣操作無大錯(cuò)。



既然是標(biāo)準(zhǔn)，我們?cè)诖硕嘟忉屜拢?br>header

• 不論top，main還是bottom，logo居左較多，突出logo；有的放在中間，不推薦，眼睛停留的路線設(shè)計(jì)會(huì)比較曲折。
• menu，如果有二級(jí)菜單，可以用簡單的flyout，也可以用megamenu，一般建議主要信息放在menu中，比如產(chǎn)品等
• 搜索，一般放在右側(cè)，因?yàn)橛覀?cè)是結(jié)果，訪問者如果用搜索，說明第一，他在目錄中沒有找到，所以搜索是補(bǔ)充；第二，目的性較強(qiáng)，所以用搜索。右側(cè)的位置恰好適合補(bǔ)充+目的。
• 按鈕，一般放在右側(cè)，用對(duì)比色，比如聯(lián)系/預(yù)約/購買等。
• 語言切換，不建議語言放在header中，建議放在bottom中，但有很多人仍然放在header中。

content

• title一般有title本身，描述性文字，
• 面包屑導(dǎo)航作為上面menu的補(bǔ)充，是找尋信息的第三點(diǎn)。
• 側(cè)邊欄一般有搜索（不建議），二級(jí)導(dǎo)航/產(chǎn)品分類等和聯(lián)系方式（不建議），左側(cè)側(cè)邊欄的作用主要是產(chǎn)品索引，右側(cè)側(cè)邊欄作用時(shí)結(jié)果，補(bǔ)充等。
• 內(nèi)容頁面內(nèi)容充分，可以放聯(lián)系信息，訂閱，review互動(dòng)，分享按鈕，上一篇下一篇，related products等。

footer

• 一般是次要的目錄信息，新聞，faq等。
• 訂閱-許可郵件營銷第一步
• 社交-一種增加可信度，外鏈的方式
• 聯(lián)系信息-其實(shí)聯(lián)系信息本身應(yīng)該是在練習(xí)頁面，后來因?yàn)檐浳牡某霈F(xiàn)聯(lián)系信息放在的文章底部；繼而出現(xiàn)在頁腳。
• 版權(quán)和隱私聲明的信息（這一點(diǎn)會(huì)越來越重要，德國這邊好多沒事兒干的律師都喜歡抓別人網(wǎng)站的小辮子?？吹?jīng)]寫清楚的版權(quán)和隱私聲明就郵寄罰單）
• 請(qǐng)留意，一般超級(jí)嚴(yán)肅的網(wǎng)站，比如美國商務(wù)部（搜索符號(hào)都是文字），http://apple.com等，頁腳一般只用文字，沒有社交按鈕，沒有訂閱，沒有聯(lián)系信息等。

索引信息的最佳位置：導(dǎo)航——側(cè)邊欄導(dǎo)航——頁腳導(dǎo)航——面包屑導(dǎo)航
聯(lián)系信息的最佳位置，每一篇軟文的最后——聯(lián)系頁面——頁腳——頂部——側(cè)邊欄

---

• 簡約至上

上邊提到了縮陰信息和聯(lián)系信息的位置，這里有兩種思路，第一種是，我盡量在所有的地方都放上目錄和聯(lián)系；第二種是，我只在最佳位置放最合適的信息。
這兩種思路都可以，比如windows要打開某一個(gè)文件夾的方式就有很多，因?yàn)椴煌娜讼矚g用不同的方法；同樣的在linux和python中，做某個(gè)事情只有一種方法，路線會(huì)簡單，報(bào)錯(cuò)少。在外貿(mào)網(wǎng)站的設(shè)計(jì)中，可以做一下減法。修改和設(shè)計(jì)都應(yīng)該依據(jù)某個(gè)標(biāo)準(zhǔn)，比如轉(zhuǎn)化率。
簡潔是智慧的靈魂。



Giles Colborne在《簡約至上》里面提到了四個(gè)原則，

比如蘋果刪除了 back to top這樣的按鈕
比如蘋果頁腳里面很多內(nèi)容的組織，
把蘋果語言按鈕轉(zhuǎn)移到了頁腳
蘋果產(chǎn)品具體的新技術(shù)和次要參數(shù)隱藏
簡約至上10分鐘閱讀版，本站鏈接： https://zhuanlan.zhihu.com/p/24554014

---

• 未來樣式

之前用pc多，PC屏幕大，landscape橫屏；未來手機(jī)多，portrait豎屏，設(shè)計(jì)思路也不同；
之前先進(jìn)入主頁，未來可能直接進(jìn)入某個(gè)產(chǎn)品內(nèi)頁；
所以設(shè)計(jì)可以不同；




導(dǎo)航顯得不那么重要，淪為跟頁腳相同的地方，甚至沒什么區(qū)分，搜索框和logo也可以都放在頁腳。



未來的版式不止一種，也不止幾種。

---

一些悖論：
有人把食物分為酸性堿性，說肉是酸性，水果蔬菜是堿性，多吃堿性對(duì)身體好。雖然我承認(rèn)現(xiàn)在的生活水平應(yīng)該多吃蔬菜和水果，但是對(duì)于酸性堿性確實(shí)沒有理論依據(jù)；更有甚者說酸性生女孩，堿性男孩。比如說進(jìn)化論，認(rèn)為人是海洋生物進(jìn)化而來，但是找不到中間物種如此等等
獨(dú)立思考是讀書人的靈魂。
其實(shí)相信這件事，并不是相信事情本身；而是某種言論跟自己的觀念契合；梁氏對(duì)于國民性有比較深刻的描述，在做網(wǎng)絡(luò)和營銷里面，國民性的滑于惰顯露無疑。

1. 營銷型網(wǎng)站。網(wǎng)站本身不會(huì)帶來訂單，網(wǎng)站至多是把流量轉(zhuǎn)化為詢價(jià)；我不懷疑網(wǎng)站有營銷型的，但是這樣提出一個(gè)名次，反而會(huì)誤導(dǎo)，似乎做了網(wǎng)站就有詢盤。我也經(jīng)常被問，你做的網(wǎng)站是不是營銷型的，會(huì)比較無語。想要網(wǎng)站產(chǎn)出詢盤，第一步需要通過SEO，SNS和PPC給網(wǎng)站帶來流量，第二需要自己不斷做AB測試，將轉(zhuǎn)化率提高。
2. 三點(diǎn)擊規(guī)則。營銷型網(wǎng)站的百度定義里面，說三次點(diǎn)擊以內(nèi)找到信息才算是營銷型。其實(shí)營銷理論，客戶從沒有問題——發(fā)現(xiàn)問題——沒有解決方案——找到解決方案——最佳解決方案——聯(lián)系/購買。并不是這條線越短越好，也不是聯(lián)系的按鈕越大，位置越淺越好。而是給用戶瀏覽的這條線足夠結(jié)實(shí)，而且符合用戶的心里。比如（德國人）篩選供應(yīng)商，先看資質(zhì)，其次產(chǎn)品，再次服務(wù)，最后價(jià)格；那么網(wǎng)頁設(shè)計(jì)里面就應(yīng)該把資質(zhì)和產(chǎn)品放在前面，這里是發(fā)詢盤的門檻。

Robin Williams在《給大家看的設(shè)計(jì)書》里面提到了四個(gè)原則
親密性
對(duì)齊
重復(fù)
對(duì)比
現(xiàn)在做網(wǎng)站，甚至做設(shè)計(jì)的，大多比較煩躁；很少有人安靜讀書，安靜研究下響應(yīng)式設(shè)計(jì)，內(nèi)容建設(shè)，轉(zhuǎn)化率的學(xué)問，郵件營銷，用戶體驗(yàn)設(shè)計(jì)等問題。
廣告：承接頁面設(shè)計(jì)，1000/屏。

第三章 WordPress DIY制作

域名——已完成
域名是外貿(mào)網(wǎng)站的門牌號(hào)。
域名選擇？
四個(gè)原則，分別是，

• .com結(jié)尾，嚴(yán)肅的商業(yè)網(wǎng)站用com結(jié)尾；
• 短，為了手動(dòng)收入減少錯(cuò)誤；
• 容易讀，不要有英語的歧義或者貶義；
• 容易記，比如crazyeggs，雖然長，但是容易記住；

如果品牌 http://brand.com 還沒有被注冊(cè)首選；其次是brand+http://keywords.com
從哪里購買域名 ？
從阿里云和namesilo，bluehost，godaddy買沒什么太大的區(qū)別。區(qū)別在于國內(nèi)一般需要實(shí)名制。（域名的實(shí)名制不同于服務(wù)器的ICP備案）
其他域名相關(guān), SEO等。
一般外貿(mào)網(wǎng)站用不到二級(jí)域名或者子文件夾，域名中最好不要出現(xiàn)數(shù)字或者中橫線。
商城類的網(wǎng)站一般需要SSL證書，即https綠色標(biāo)。
域名中的關(guān)鍵詞對(duì)于SEO來說微乎其微，不做起名的考慮因素。
域名一定掌握在所有人手中；
域名是郵箱的前提，如果域名易主，下邊的郵箱也暴露。
服務(wù)器
點(diǎn)此購買vultr服務(wù)器
推薦Vultr，支持支付寶和微信支付，外加BT面板，搭建多個(gè)網(wǎng)站非常完美。越來越喜歡Vultr，是VPS主機(jī)還便宜；Bluehost(英文版)虛擬主機(jī)非常棒，自帶了面板，所以操作簡單，沒有什么解析之類的，但是隨著用的人越來越多服務(wù)質(zhì)量也變得很次。



工具：Termius for Mac
BT 面板
yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && bash install.sh






其他服務(wù)器推薦
阿里云
bluehost
hostgrand
hostgator
linode
一鍵導(dǎo)入所有
得到wordpress 自帶主題之后，只需要安裝一個(gè)導(dǎo)入插件All WP imgrant，然后導(dǎo)入本文件。包含了Impreza主題，Visual Composer，Slider Revolution。
WordPress？
WordPress是最適合做外貿(mào)官網(wǎng)的程序，沒有之一，現(xiàn)在的用wordpress做了世界上大約30.3%的網(wǎng)站，可以說明一切問題。
WP不是博客嗎？了解真實(shí)的WP。
具體參考WordPress的showcase，wordpress做了世界上很多流弊的網(wǎng)站，索尼，奔馳，憤怒的小鳥，奧巴馬基金會(huì)，芝加哥太陽報(bào)等等。WordPress可以做博客，商城，論壇，社區(qū)等等。
我不是程序員，可以編輯嗎？
可以，跟走路一樣簡單。
認(rèn)識(shí)下主題，盜版的也可以？
盜版主題的缺點(diǎn)是：無法更新和獲取幫助；永遠(yuǎn)建議商業(yè)主體購買正版。


Impreza主題
認(rèn)識(shí)下Themeforest
世界上最大的WordPress主題插件庫，付費(fèi)的。一般一個(gè)標(biāo)準(zhǔn)主題的在50-60刀之間。
VC插件
簡答
關(guān)于插件（10個(gè)插件推薦）
插件是WordPress的核心和精神，可以擴(kuò)展WordPress功能。比如加速，在線聊天，表單，商城，安全等等插件。

1. Visual Composer
2. Slider Revolution
3. Yoast SEO/ All in one SEO
4. Super Cache/ Fastest Cache
5. Contact From 7
6. TablePress

郵箱
怎么辦？推薦谷歌郵箱。
推薦Google企業(yè)郵箱，服務(wù)器方比如bluehost hostgator都有免費(fèi)郵箱，不限制數(shù)量和空間。

第四章 營銷
許可郵件營銷
偽郵件營銷
SEO
SEO研究是不是網(wǎng)站，不是搜索引擎，是用戶。
SEO的根本原則是用戶
延伸閱讀
seo每日一貼
backlinko 越訪問量25000的秘密
PPC
SNS

常見問題
一般
關(guān)于手機(jī)端
打開速度
怎樣算是好網(wǎng)站？
我為什么要建站？
SEO，怎么做？
SEO站內(nèi)
SEO外鏈
SEO文案狗
SEO工具
SEO， 可以外包？No
建站可以外包？ YES
有人保證關(guān)鍵詞排名，是怎么做的？沒人搜的自己造的所謂長尾詞啦
優(yōu)化就是優(yōu)化核心關(guān)鍵詞
社交網(wǎng)絡(luò)怎么玩？
Facebook
Linkedin
Youtube
Google+
商城網(wǎng)站就是加WooCommerce
SSL是什么？
CDN需要嗎？
解析重要嗎？
說靜態(tài)頁面好？
PPC是什么？
做品牌和做產(chǎn)品不同嗎？
需要獨(dú)立IP嗎？
虛擬主機(jī)和ＶＰＳ哪一個(gè)好？
哪里有ＷＰ的教程？
推薦哪一個(gè)主題？
用戶體驗(yàn)怎么做？
怎么做后臺(tái)的數(shù)據(jù)分析
其他的程序比如Ｊｏｏｍｌａ
什么是ＵＩ
什么是ＶＩ
為什么國內(nèi)少見優(yōu)秀的建站商？
什么是響應(yīng)式？
什么是營銷型？３次點(diǎn)擊？不對(duì)呦
極簡風(fēng)格好嗎？要看我們的聽眾在哪里？
怎么推廣？
工具列表
布局，側(cè)邊欄左右之分，導(dǎo)航和頁腳
著陸頁
跳出率
ＡＢ測試
顏色與心理
黑帽
黑客與網(wǎng)站安全
ｗｈｏｉｓ信息和隱私
谷歌分析
谷歌站長
外包的建站流程應(yīng)該是什么？
我應(yīng)該有什么權(quán)限？
怎么就成了一灘渾水。
建站跟平臺(tái)比怎樣？虛擬的平臺(tái)ａｌｉ，展會(huì)，等。
Ｂ２Ｃ建站跟平臺(tái)比怎樣？Amazon
轉(zhuǎn)化率什么鬼？
建站多少錢合適？我說的是應(yīng)該多少錢？續(xù)費(fèi)呢？
怎么解決收錄問題。
Robots txt
.htaccess ?
圖片怎么來？
文案到底怎么寫？
外包給老外怎樣？可以，溝通。
多久完成合適？要不就外包？
產(chǎn)品跟推廣的方法有關(guān)系？
什么是growth hacker
要不要現(xiàn)在本地做一個(gè)？
FTP上傳工具？
BT寶塔面板
備份的思路，數(shù)據(jù)庫。
有免費(fèi)建站？二級(jí)域名可能有。
WordPress建站教程
好網(wǎng)站賞析；
不好的網(wǎng)站的特點(diǎn)
建站后期怎樣維護(hù)？尤其是ＳＥＯ
可以Adsense把流量變現(xiàn)？
SEO公式詳解。
推薦好的ＳＥＯ博主，ＳＥＯ書籍
網(wǎng)站運(yùn)營策略
網(wǎng)站的懲罰
職業(yè)的建站商前途如何？
ＷＰ多能做那些網(wǎng)站？預(yù)定，購物，ｆｏｒｔｕｎｅ，
有基礎(chǔ)ｈｔｍｌ　ｃｓｓ　ｊｓ?。穑瑁鹱詈?，有了之后可以做調(diào)整。更放心大膽。
自己建站跟外包建站有什么優(yōu)缺點(diǎn)？
SOHO是DIY好還是外包？
說說建站流程吧。
你能不能給我司建站？




出自：www.imaiko.com

建站請(qǐng)聯(lián)系 2466380523 QQ