如今，隨著線下和線上競(jìng)爭(zhēng)的不斷增長(zhǎng)和多樣化，企業(yè)必須比以前更具創(chuàng)造力和獨(dú)創(chuàng)性，才能讓客戶注意到他們的報(bào)價(jià)并參與購(gòu)買。因此，結(jié)合不同的營(yíng)銷技巧，新的開拓性技術(shù)和工具在這方面大有幫助。在我們的新案例研究中，我們將向您展示我們與其中之一的合作：歡迎查看 CSConnect 網(wǎng)站設(shè)計(jì)的創(chuàng)意故事，這是一種為營(yíng)銷提供沉浸式視覺體驗(yàn)的服務(wù)。
CS連接是面向消費(fèi)品牌的 SaaS 移動(dòng)營(yíng)銷解決方案。它展示了沉浸式體驗(yàn)營(yíng)銷平臺(tái)，允許其客戶創(chuàng)建和啟動(dòng)零編碼的增強(qiáng)現(xiàn)實(shí)和購(gòu)物娛樂活動(dòng)。通過這種方式，它可以幫助不同的消費(fèi)品牌適應(yīng)電子商務(wù)的條件，因?yàn)樗鼰o法像在航行點(diǎn)那樣覆蓋與產(chǎn)品的實(shí)時(shí)接觸，因此品牌可以更有說服力和更有吸引力地與客戶溝通，展示他們的產(chǎn)品。
在討論了客戶的愿景和偏好，并對(duì)市場(chǎng)和目標(biāo)受眾進(jìn)行了廣泛的研究和分析后，該團(tuán)隊(duì)得出了一組適用于 CSConnect 網(wǎng)站的通用基本要點(diǎn)：
可變的字體樣式以創(chuàng)建清晰而牢固的排版層次結(jié)構(gòu)
強(qiáng)大的、可識(shí)別的品牌將在競(jìng)爭(zhēng)中脫穎而出
將網(wǎng)站和品牌與競(jìng)爭(zhēng)對(duì)手區(qū)分開來的顏色
清楚地展示產(chǎn)品功能
插圖和圖形，使品牌能夠創(chuàng)造和突出自己的個(gè)人風(fēng)格
在此細(xì)分市場(chǎng)中未廣泛使用的網(wǎng)絡(luò)動(dòng)畫將成為打動(dòng)訪問者和支持品牌知名度的另一種方式
直觀和直接的導(dǎo)航和交互，對(duì)于不同技術(shù)水平的訪問者來說毫不費(fèi)力
干凈、通風(fēng)、整潔的布局，帶有立即引人注目的 CTA 元素，以支持有效的轉(zhuǎn)換
傳統(tǒng)上，對(duì)網(wǎng)站或應(yīng)用程序設(shè)計(jì)做出的最有影響力的決定之一是顏色和字體的選擇，它們既可以支持功能，又可以設(shè)定品牌努力傳遞給自己的情緒和印象。
另一種安排內(nèi)容的方法是對(duì)某些部分使用不同的背景顏色來分隔不同的信息塊。此外，該設(shè)計(jì)還采用了突出的信息圖表樣式數(shù)字的方法。正如我們?cè)谖恼轮刑岬降?/span>網(wǎng)絡(luò)可掃描性, 讀者會(huì)下意識(shí)地將數(shù)字與事實(shí)、統(tǒng)計(jì)數(shù)據(jù)、大小和距離——潛在的有價(jià)值數(shù)據(jù)聯(lián)系起來。因此，文案中包含的數(shù)字會(huì)引起讀者的注意，而代表數(shù)字的詞可能會(huì)在文案中被忽略。而且數(shù)字更緊湊，內(nèi)容更簡(jiǎn)潔，掃描更省時(shí)。應(yīng)用的方法意味著使數(shù)字比文本更突出和更引人注目，就像在信息圖表中經(jīng)常做的那樣。
網(wǎng)絡(luò)上的排版已經(jīng)走過了漫長(zhǎng)的道路。我們已經(jīng)從一些基本的基于系統(tǒng)的字體到現(xiàn)在幾乎無限的可能性。但所有這些選擇都會(huì)給設(shè)計(jì)師帶來一些挑戰(zhàn)。
例如，對(duì)于我們?cè)陧?yè)面上加載的每種字體，性能都會(huì)受到負(fù)面影響。即使使用具有多種樣式（粗體，斜體等）的單個(gè)字體系列，也需要多次調(diào)用服務(wù)器。當(dāng)每一毫秒都很重要時(shí)，這可以真正開始在一個(gè)行業(yè)中加起來。
其中有可變字體的巨大前景。突然之間，沒有必要加載六個(gè)字體文件來檢索你想要的樣式。相反，字體系列所需的一切只包含在一個(gè)文件中。它極大地提高了效率并且易于實(shí)施。
對(duì)我們排版工具箱的這一新增內(nèi)容感到好奇嗎？這是你需要知道的：
更靈活
雖然潛在的性能提升可能是可變字體最明顯的特征，但還有更多值得愛的。另一個(gè)關(guān)鍵賣點(diǎn)是它們提供比傳統(tǒng)字體更高的靈活性。
例如，可變字體允許設(shè)計(jì)者利用CSS轉(zhuǎn)換。當(dāng)字體從一種樣式變?yōu)榱硪环N樣式時(shí)，這可用于創(chuàng)建一些超平滑的動(dòng)畫。鏈接和導(dǎo)航等元素可以變得更加有趣和獨(dú)特。雖然它可能聽起來像一個(gè)小細(xì)節(jié)，但這為我們提供了另一種改善用戶體驗(yàn)的方法。
在同一個(gè)保護(hù)傘下，使用可變字體時(shí)也可以創(chuàng)建自定義字體樣式。由于這些字體的構(gòu)建方式，您不必滿足于預(yù)制樣式，如淺色或粗體。相反，您可以選擇幾乎任何介于兩者之間的任何東西，或調(diào)整可用的字體軸以根據(jù)您的需要定制類型。
真正令人驚奇的是，像Font Playground這樣的工具使這些調(diào)整變得非常容易。它們提供了一個(gè)可視化的UI，可以根據(jù)您的內(nèi)容調(diào)整內(nèi)容。您無需成為專家即可獲得所需的結(jié)果。而且，它甚至?xí)槟峁┍匾腃SS代碼。
最重要的一點(diǎn)是，排版變得不那么僵硬，對(duì)設(shè)計(jì)師的解釋更加開放。當(dāng)然，如果您愿意，可以使用標(biāo)準(zhǔn)樣式。但您也可以選擇將自己的個(gè)人風(fēng)格放在項(xiàng)目上。
使用Font Playground自定義可變字體。
還處于起步階段
與幾乎所有新技術(shù)一樣，可變字體旁邊還有一些星號(hào)。然而，這些限制更多地是它們存在的早期時(shí)間的產(chǎn)物，而不是致命的缺陷。
有限的選擇
可變字體的數(shù)量似乎每天都在增長(zhǎng)。盡管如此，與傳統(tǒng)字體相比，可用數(shù)量仍然很小。
此時(shí)，Google Fonts并未在其標(biāo)準(zhǔn)庫(kù)中提供任何可變字體。雖然，Amstelvar，Cabin和Nunito字體可通過Early Access計(jì)劃獲得。
但是有越來越多的替代資源。地方如V-字體和字體游樂場(chǎng)有足夠的選擇，以適應(yīng)大多數(shù)項(xiàng)目的需求。而且，一些獨(dú)立開發(fā)者已經(jīng)開始出版他們自己的家庭。
在V字體調(diào)整可變字體。
有限支持
瀏覽器對(duì)可變字體的支持涵蓋了大多數(shù)現(xiàn)代瀏覽器的較新版本。您將無法獲得對(duì)Internet Explorer等舊版產(chǎn)品的支持，甚至不會(huì)支持較新版本的Chrome，Edge，F(xiàn)irefox和Safari。
這可能是也可能不是交易破壞者，具體取決于您的目標(biāo)受眾。當(dāng)然，通過的時(shí)間越長(zhǎng)，遺產(chǎn)支持就越不令人擔(dān)憂。而且，可用字體的選擇只會(huì)繼續(xù)增長(zhǎng)。
瀏覽器支持可變字體。
網(wǎng)絡(luò)排版的恩惠
可變字體看起來可以將Web排版提升到更高的水平。設(shè)計(jì)師不僅沒有被迫使用可用的風(fēng)格，而且還有能力做更多事情。將其添加到簡(jiǎn)化的字體管理和提高性能，您可以獲得幾乎可以使任何項(xiàng)目受益的內(nèi)容。
不難想象可變字體成為標(biāo)準(zhǔn)的未來。我們看到變量字體越多，就越難以看到傳統(tǒng)產(chǎn)品如何保持相關(guān)性。
隨著平面設(shè)計(jì)逐漸演變成不太嚴(yán)重的問題，它開始實(shí)施以前流行的設(shè)計(jì)趨勢(shì)。陰影在這里是顯而易見的發(fā)展，因?yàn)樗鼈兣c最小的設(shè)計(jì)風(fēng)格和平面設(shè)計(jì)元素形成鮮明對(duì)比。
在本文中，我們將回顧一些網(wǎng)頁(yè)設(shè)計(jì)中最好的當(dāng)前陰影實(shí)現(xiàn)。
接近殘酷主義，Julian Buehler的網(wǎng)站使用陰影的巧妙3D形狀，提供獨(dú)特的深度效果。
結(jié)合舊式的反思，陰影給對(duì)象一種現(xiàn)實(shí)的感覺，并且肯定會(huì)成功地創(chuàng)造出獨(dú)特而不尋常的東西。
Ustwo是一個(gè)更微妙的實(shí)現(xiàn)，它使用重疊文本與陰影一起創(chuàng)建分層效果。這導(dǎo)致增加了一些分離以及視角和視覺興趣。
ATOLYE15巧妙地在白色背景下使用陰影來創(chuàng)建英雄部分透明度的錯(cuò)覺。這個(gè)最小的實(shí)現(xiàn)是微妙而有效的，并且是陰影如何增強(qiáng)網(wǎng)站設(shè)計(jì)的一個(gè)很好的例子。
更好的是在其設(shè)計(jì)獨(dú)特的陰影被連接到的對(duì)象，創(chuàng)造有被其上放置的物品表的錯(cuò)覺。
Plasso是一個(gè)完美的網(wǎng)站設(shè)計(jì)。陰影盡量少用，但以完美的方式實(shí)現(xiàn)。他們只是優(yōu)雅的主要CTA按鈕和內(nèi)容卡，創(chuàng)造了一個(gè)非常小但突出的設(shè)計(jì)，突出并帶來了所有重要領(lǐng)域的關(guān)注。
Stripe以其出色的設(shè)計(jì)方向而聞名。隨著它繼續(xù)推出更多產(chǎn)品和功能，這個(gè)方向的延續(xù)包括豐富的令人印象深刻的陰影。
Smallchat在他們非常小而豐富多彩的設(shè)計(jì)中包含了陰影。它們?cè)黾恿水a(chǎn)品圖像背后的對(duì)比，并幫助將其與書面內(nèi)容區(qū)分開來。所有這一切，都為設(shè)計(jì)增添了一層吸引人的層面，并實(shí)現(xiàn)了出色的登陸頁(yè)面。
Scaphold像上面的Better一樣使用陰影在產(chǎn)品插圖下面產(chǎn)生類似桌面的效果。在這個(gè)例子中，它使用了各種陰影樣式，包括非常粗糙的邊緣以及更柔和，更高的陰影，這些陰影產(chǎn)生了漂浮在空中的元素幻覺。
你最近注意到網(wǎng)頁(yè)設(shè)計(jì)中有陰影的例子嗎？在下面與我們分享！
在撰寫提案之前，您需要做好自己的研究。仔細(xì)閱讀他們的整個(gè)帖子，以確定幾件事情：
他們的時(shí)間表是什么
他們的預(yù)算是多少（如果它甚至值得你花時(shí)間！）
他們最終要求什么產(chǎn)品
他們的目標(biāo)受眾是誰
他們需要或?qū)で笫裁醇寄?/span>
他們可能希望看到的以前的項(xiàng)目
一旦你完成了解析他們的請(qǐng)求的盡職調(diào)查，那么你可以著手編寫一個(gè)適當(dāng)?shù)奶岚浮?/span>雖然我們強(qiáng)烈建議您不要使用通用的復(fù)制/粘貼提案，但如果要制定提案的架構(gòu)以使其更快寫入，同時(shí)證明您了解客戶的需求，則始終有一個(gè)好主意。
一旦你找到了工作，有一個(gè)像這樣的標(biāo)準(zhǔn)表格可能是一個(gè)好主意，你可以發(fā)送客戶表明你很專業(yè)，并且關(guān)心他們的投入。
我們推薦如下內(nèi)容：
我是[ 他們 ] [ 他們正在尋找的具體詞語，如設(shè)計(jì)師，作家或開發(fā)人員 ] [技能]和[ 與他們已建立的項(xiàng)目具體相關(guān)的工作或項(xiàng)目的經(jīng)驗(yàn)]你可以在這里查看[ 提供你項(xiàng)目的鏈接 ]。我也有與[ 他們的目標(biāo)受眾以及您為他們寫作的經(jīng)驗(yàn)等 ]合作的經(jīng)驗(yàn)。我可以[ 插入時(shí)間范圍 ]為[ 您的價(jià)格點(diǎn) ] 完成您的項(xiàng)目。
它不需要像這樣，但是具有標(biāo)準(zhǔn)形式與回收相同的提案不同，因?yàn)槟梢酝ㄟ^這種方式快速方便地找到相應(yīng)的提案，因此您不需要花費(fèi)幾個(gè)小時(shí)就可以完成提案，同時(shí)還可以能夠在您的提案中具有原創(chuàng)性和特定性。
不要忘了具體說明你的技能。你有5年的平面設(shè)計(jì)經(jīng)驗(yàn)嗎，還是你有專業(yè)寫作學(xué)士學(xué)位？不要讓他們篩選300頁(yè)以上的技能 - 使其簡(jiǎn)單易讀，但足夠廣泛，以至于他們看到你可以處理他們工作的每個(gè)組成部分。
記住客戶也有工作要做。與他們溝通，確保你從他們那里得到你需要的東西。
您不必每周花40小時(shí)寫一份提案，但如果您真的想要這份工作，您需要花費(fèi)幾秒鐘的時(shí)間完成一些工作。
想想客戶花了多少時(shí)間來制作他們的建議，并發(fā)布它來尋找人們來幫助他們 - 理想情況下，您應(yīng)該花費(fèi)大量的時(shí)間花費(fèi)在自己的招聘信息上，就像您在提案中所做的一樣。
讓我們首先重申：不要復(fù)制和粘貼。是的，這是一種簡(jiǎn)單的方法，可以快速獲取您的名字，但客戶可以通過此方式看到。當(dāng)你甚至沒有提到他們的項(xiàng)目或者他們的項(xiàng)目可以提供什么價(jià)值時(shí)，最糟糕的進(jìn)攻是。
您的客戶可以在幾秒鐘內(nèi)看到您的模糊通用提案。有時(shí)候，這是一個(gè)問題，客戶會(huì)在他們的提案中要求自由職業(yè)者在提交之前在提案的開始部分放置“菠蘿”或“獨(dú)角獸”等詞語，以確保他們已閱讀并理解有關(guān)工作發(fā)布的所有信息。
展示你的作品！如果你沒有太多的樣品可以發(fā)送，特別是如果你剛剛開始使用，那么當(dāng)他們提出要求時(shí)，為客戶提供一些模型以提供給客戶將是一個(gè)很好的時(shí)間和精力投資。更好的是，不要等待他們問 - 向他們展示！獲取一個(gè)網(wǎng)站來引導(dǎo)您的客戶參與您的建議。
重新設(shè)計(jì)一些你最喜歡的網(wǎng)站，為假公司制作一些標(biāo)志，寫一些關(guān)于任何事情的博客文章 - 這主要取決于你做了什么和你申請(qǐng)什么，但是確保你有什么證明你的東西可以完成這項(xiàng)工作。
這是至關(guān)重要的，不僅僅是說你可以在兩周內(nèi)完成工作。通過將他們的項(xiàng)目分解成更小的任務(wù)并為每個(gè)任務(wù)提供一個(gè)時(shí)間表來盡可能具體。例如，你可以說研究和頭腦風(fēng)暴將需要三天的時(shí)間，用一點(diǎn)時(shí)間與客戶就你的想法進(jìn)行交流，并將他們的反饋意見加入其中，并且線框圖需要兩天，等等。
客戶不僅會(huì)感激您花時(shí)間充分考慮您的承諾和他們的需求，同時(shí)也會(huì)理解您明白他們要求的復(fù)雜性和細(xì)微差別。它將表明你對(duì)工作的認(rèn)真態(tài)度，并將幫助客戶更好地理解與你的合作將會(huì)是什么樣子，以及項(xiàng)目的更大進(jìn)程是什么樣子。
請(qǐng)記住，作為一名自由職業(yè)者，你在銷售自己和你的服務(wù)，你必須看到你自己，你的工作以及你作為一個(gè)企業(yè)所提供的東西。
不要讓你的提案長(zhǎng)達(dá)五頁(yè)。保持簡(jiǎn)短，甜美，簡(jiǎn)潔和經(jīng)濟(jì)。你希望盡可能具體和狹隘，并且在解釋你的過程和他們的項(xiàng)目時(shí)盡可能描述性，同時(shí)盡可能簡(jiǎn)潔，以便他們迅速而迅速地知道你是合適的工作自由職業(yè)者。
這樣想一想：選擇3個(gè)技能，挑選3個(gè)最近的項(xiàng)目，并將時(shí)間表分成至少 3個(gè)任務(wù)。現(xiàn)在出發(fā)，開始工作吧！
最大的收獲？花在提案上的額外時(shí)間可以為您帶來更好的合同，這意味著支付更高的工作機(jī)會(huì)更少。你可以更好地工作，減少工作量。
在社會(huì)上，成功經(jīng)常被描繪成非常接近一個(gè)單一的定義。我們認(rèn)為一個(gè)成功的企業(yè)家駕駛特斯拉并生活在最聰明的智慧家園。或者我們看到一個(gè)大鏡頭高管“生活”的富裕，就像他們說的那樣。
但成功是一個(gè)非常個(gè)人和主觀的事情。沒有正確或錯(cuò)誤的定義，因?yàn)樗俏覀冃闹械囊粋€(gè)問題。我的成功措施可能與你的不同。但這是否意味著我們?nèi)匀粦?yīng)該采取同樣的成就做法？
雖然像努力工作和誠(chéng)信這樣的特質(zhì)將永遠(yuǎn)是共同的因素，我們?nèi)绾翁幚砦覀兊淖杂稍O(shè)計(jì)業(yè)務(wù)應(yīng)該更好地反映我們個(gè)人對(duì)成功的定義。這里有一些方法來定制您的業(yè)務(wù)，以幫助您獲得快樂的地方。
專注于正確的項(xiàng)目類型
對(duì)某些人來說，成功的一部分定義涉及到具體種類的項(xiàng)目。履行可能以設(shè)計(jì)非營(yíng)利組織網(wǎng)站或最喜愛的運(yùn)動(dòng)的形式出現(xiàn)。其他人可能不關(guān)心行業(yè)太多，因?yàn)樗麄冴P(guān)心吸引大筆支付的項(xiàng)目。
關(guān)鍵是要弄清這些項(xiàng)目的類型，讓你到達(dá)你想去的地方。從那里，這是一個(gè)營(yíng)銷自己的任何利益的利益的問題。
當(dāng)然這比說起來容易得多。運(yùn)行自己的業(yè)務(wù)的現(xiàn)實(shí)有時(shí)意味著不得不承擔(dān)不一定符合您的成功愿景的項(xiàng)目。但是沒關(guān)系 - 只要你不會(huì)陷入干擾你長(zhǎng)期目標(biāo)的東西。
事實(shí)上，除非您已經(jīng)有行業(yè)聯(lián)系，否則將您的業(yè)務(wù)指向特定類型的項(xiàng)目通常是需要時(shí)間的過程。但一旦你踏上門，就可以開辟各種各樣的可能性。
想想你在哪里，何時(shí)以及如何工作
您的工作環(huán)境可以大大影響成功。當(dāng)你想到這一點(diǎn)，這是一個(gè)影響和定義我們成功的領(lǐng)域。如果你從一個(gè)不想要的地方開始網(wǎng)站，那么做得更好很難做到。
但它也遠(yuǎn)遠(yuǎn)超出了位置。有一些情況，我們的成功的一部分不僅在于我們的工作，而且我們的工作時(shí)間。考慮三個(gè)最常見的：
作為家長(zhǎng)和設(shè)計(jì)師
自由職業(yè)者，為家長(zhǎng)謀生和為孩子們提供了一個(gè)很好的機(jī)會(huì)。就個(gè)人而言，它允許我讓我的女兒上下班，并有機(jī)會(huì)與她花更多的時(shí)間。所以對(duì)我來說，在家工作的標(biāo)準(zhǔn)時(shí)間是正確的情況。除非絕對(duì)必要，否則周末通常是禁止使用的。
在初始業(yè)務(wù)設(shè)置方面，這可能是一個(gè)相當(dāng)簡(jiǎn)單的安排。最大的挑戰(zhàn)是，當(dāng)天有中斷可能會(huì)有點(diǎn)混亂。但是在家里肯定會(huì)比傳統(tǒng)的辦公室更容易處理混亂。
把“自由”放在自由職業(yè)者中
有許多設(shè)計(jì)師將他們的自由職業(yè)作為追求旅行或志愿服務(wù)等其他激情的工具。因此，自己工作時(shí)間的靈活性是很大的。實(shí)現(xiàn)這一點(diǎn)也是一個(gè)挑戰(zhàn)。
工作奇怪的時(shí)間真的取決于你擁有的客戶類型。一些演出要求您在“正常”營(yíng)業(yè)時(shí)間內(nèi)可用。而在辦公室不到標(biāo)準(zhǔn)的每周5天也可以采取一些仔細(xì)的規(guī)劃。
不過，可以做到這一點(diǎn)。這一切都是為了找到一個(gè)方程式，a）讓你工作一個(gè)個(gè)性化的時(shí)間表; 和b）使您能夠謀生。如果你真的很熱衷于一些事情，你會(huì)發(fā)現(xiàn)一種方法使它一切正常。
打擊大時(shí)間
尋找大票項(xiàng)目的人可能會(huì)比上述兩種情況對(duì)自由職業(yè)有所不同。對(duì)于一個(gè)，更高層次的項(xiàng)目可能意味著與大公司合作。雖然有些客戶可能會(huì)偏僻的會(huì)議，但其他人可能更喜歡親自見到你。這意味著可能需要旅行或有會(huì)議空間。
這里另外一個(gè)重要的考慮因素是額外的工作量。即使你正在管理其他自由職業(yè)者，可能會(huì)有很多夜晚和周末充滿工作（更不用說營(yíng)銷自己的時(shí)間了）。
如果這聽起來像你的果醬，那么專注于過程效率可以讓一切順利進(jìn)行。建立一個(gè)項(xiàng)目如何按時(shí)和預(yù)算完成的過程，以便您可以保持該貨幣兌換機(jī)。
進(jìn)度緩慢時(shí)
作為自由職業(yè)者最好的方面之一是能夠以自己的方式做事情。那是一個(gè)很大的責(zé)任。很容易陷入不好的習(xí)慣，最終會(huì)傷害你的生活和工作的機(jī)會(huì)，你想要的方式。
所以，如果你沒有看到你希望的進(jìn)步，可能是時(shí)候仔細(xì)看看你的業(yè)務(wù)運(yùn)作。雖然運(yùn)氣不好可以發(fā)揮作用，但大多數(shù)情況下，您會(huì)發(fā)現(xiàn)這是您可能做的不同的具體事情。
在您的財(cái)務(wù)狀況方面，請(qǐng)仔細(xì)檢查您收取的費(fèi)用以及您如何收取款項(xiàng)。特別是網(wǎng)頁(yè)設(shè)計(jì)是價(jià)格上漲的行業(yè)。你想確保你沒有收取太多或太少的收費(fèi)。
網(wǎng)站設(shè)計(jì)是設(shè)計(jì)和創(chuàng)建網(wǎng)站的行為，它很快成為現(xiàn)代藝術(shù)形式。一個(gè)網(wǎng)站的設(shè)計(jì)往往是決定游客離開或停留的因素。
在20世紀(jì)90年代初，萬維網(wǎng)推出后，網(wǎng)路上只有少數(shù)幾個(gè)網(wǎng)站。20世紀(jì)末網(wǎng)站數(shù)量呈指數(shù)增長(zhǎng)，今天有數(shù)億個(gè)網(wǎng)站。每月增加數(shù)百萬個(gè)新網(wǎng)站，大部分網(wǎng)站由網(wǎng)站設(shè)計(jì)師創(chuàng)建。
網(wǎng)站設(shè)計(jì)師通常負(fù)責(zé)網(wǎng)站的布局，配色方案和一般設(shè)計(jì)。設(shè)計(jì)網(wǎng)站不僅僅是使網(wǎng)站美觀，而且。熟練的網(wǎng)站設(shè)計(jì)師還必須使網(wǎng)站易于瀏覽，所以訪問者可以盡快找到他們需要的內(nèi)容。網(wǎng)站設(shè)計(jì)師還必須知道如何幫助網(wǎng)站在搜索引擎中排名，以及在哪里放置廣告，使其有效。
網(wǎng)站設(shè)計(jì)師通常是創(chuàng)意類型，但是也需要廣泛的計(jì)算機(jī)知識(shí)。即使是使用簡(jiǎn)單網(wǎng)站設(shè)計(jì)軟件的設(shè)計(jì)師，至少應(yīng)該有一些計(jì)算機(jī)編程和編碼知識(shí)。
大多數(shù)網(wǎng)站設(shè)計(jì)師每小時(shí)收費(fèi)從20美元到50美元不等。該速率可以根據(jù)設(shè)計(jì)者的經(jīng)驗(yàn)以及網(wǎng)站的復(fù)雜性而變化。一般的網(wǎng)站設(shè)計(jì)師通常可以期待每年大約5萬美元。然而，網(wǎng)站設(shè)計(jì)師的薪水在很大程度上取決于他的技能和工作頻率。
例如，一些更有才華和勤奮的網(wǎng)站設(shè)計(jì)師每年可以賺取超過10萬美元。另一方面，業(yè)余或兼職設(shè)計(jì)師每年只能賺2萬美元。
沒有設(shè)定教育要求成為網(wǎng)站設(shè)計(jì)師，一些積極的個(gè)人可能只能通過自己學(xué)習(xí)設(shè)計(jì)和編程技能打破這個(gè)領(lǐng)域。網(wǎng)站設(shè)計(jì)是一個(gè)快速增長(zhǎng)和競(jìng)爭(zhēng)激烈的行業(yè)，然而，成功的網(wǎng)站設(shè)計(jì)師通常至少有幾年的專上學(xué)校。
網(wǎng)站設(shè)計(jì)師需要具有藝術(shù)性和計(jì)算機(jī)知識(shí)。因此，大多數(shù)網(wǎng)站設(shè)計(jì)學(xué)位課程的重點(diǎn)是將數(shù)字媒體課程與電腦和網(wǎng)絡(luò)編程課程相結(jié)合。至少網(wǎng)站設(shè)計(jì)者應(yīng)該知道基本的網(wǎng)絡(luò)編程語言，特別是HTML和CSS。
越來越多的傳統(tǒng)大學(xué)正在提供網(wǎng)站設(shè)計(jì)方案，以及許多在線大學(xué)。對(duì)網(wǎng)站設(shè)計(jì)學(xué)位感興趣的學(xué)生也可能考慮藝術(shù)學(xué)校以及技術(shù)學(xué)院。
網(wǎng)站設(shè)計(jì)和開發(fā)公司也定期聘請(qǐng)有才華的網(wǎng)站設(shè)計(jì)師獲得學(xué)位。經(jīng)驗(yàn)不足的網(wǎng)站設(shè)計(jì)師通常會(huì)開始作為助理或?qū)W徒，以獲得寶貴的實(shí)踐經(jīng)驗(yàn)。他們幫助設(shè)計(jì)了幾個(gè)網(wǎng)站后，往往能夠提升自己的職業(yè)生涯并承擔(dān)更具挑戰(zhàn)性的項(xiàng)目。
網(wǎng)站設(shè)計(jì)師也可以作為自由職業(yè)者工作。這意味著他直接為需要設(shè)計(jì)網(wǎng)站的個(gè)人或公司工作。為了獲得一致的工作，自由網(wǎng)站設(shè)計(jì)師通常需要擁有廣泛和令人印象深刻的以前設(shè)計(jì)的網(wǎng)站的組合。
在快速移動(dòng)的社交媒體平臺(tái)，如Facebook和Twitter和新興的移動(dòng)智能手機(jī)和平板電腦之間，保持簡(jiǎn)單的在線的關(guān)鍵。好消息是：新的第三方工具的絨屑使重新設(shè)計(jì)你的網(wǎng)站的速度和簡(jiǎn)單性比以往任何時(shí)候都更容易。
這里有五個(gè)基本步驟，一個(gè)干凈，簡(jiǎn)單和無壓力的網(wǎng)站重新設(shè)計(jì)。
1.專注于網(wǎng)站的數(shù)據(jù)來優(yōu)化您的功能。 徹底審核顯示人們?nèi)绾问褂媚?dāng)前網(wǎng)站的數(shù)據(jù)。保持簡(jiǎn)單的訣竅是找出你絕對(duì)需要的元素。
用什么：基本工具，如網(wǎng)站的流量日志和免費(fèi)服務(wù)，如雅虎網(wǎng)站分析或谷歌Analytics（分析）提供洞察到你的網(wǎng)站的性能。但復(fù)雜的數(shù)據(jù)分析工具也可以證明是有幫助的。拉米拉達(dá)，總部位于加州CrazyEgg（起價(jià)為每月$ 9）創(chuàng)建顯示您的網(wǎng)站的最頻繁點(diǎn)擊的部分可視化熱圖。這類網(wǎng)站的FiveSecondTest和UserTesting.com可以提供從實(shí)際用戶對(duì)什么是工作，而不是與您的網(wǎng)站工作的定性分析。費(fèi)用每月20美元，每個(gè)測(cè)試員39美元。
我們的目標(biāo)：創(chuàng)建列表必須具備基于用戶數(shù)據(jù)的功能。
2.突破你的網(wǎng)站應(yīng)該和不應(yīng)該做的。 有了正確的數(shù)據(jù)，企業(yè)應(yīng)該能夠消除許多未使用的功能。之后，將剩余的功能按照它們對(duì)實(shí)現(xiàn)目標(biāo)的重要性排序，并開始布置頁(yè)面的過程。
用什么：基于Web的頭腦風(fēng)暴，并概述工具可以創(chuàng)建符合新計(jì)劃，粗糙的頁(yè)面設(shè)計(jì)。總部位于舊金山的WorkFlowy（免費(fèi)多達(dá)500存儲(chǔ)理念）和德國(guó)的MindMeister（每月$ 4.99開始）的工具來規(guī)劃內(nèi)容流，功能集和基本布局。
我們的目標(biāo)：創(chuàng)建一組頁(yè)面布局是盡可能準(zhǔn)確的，包括最重要的功能。不要擔(dān)心，如果這一點(diǎn)沒有什么比基本的聯(lián)系信息，鏈接到社交網(wǎng)絡(luò)和一個(gè)簡(jiǎn)單的品牌聲明。
3.根據(jù)您的需要匹配正確的網(wǎng)站解決方案。最重要的業(yè)務(wù)內(nèi)容通常可以適合少量的網(wǎng)站空間。因此，現(xiàn)在可能有一個(gè)深層的托管網(wǎng)站服務(wù)。這些托管服務(wù)不需要編碼經(jīng)驗(yàn)，而且可以管理從安全到升級(jí)的所有內(nèi)容，并創(chuàng)建適合在平板電腦和其他設(shè)備上正常運(yùn)行的移動(dòng)設(shè)備適用功能。
用什么：簡(jiǎn)單的幾乎與托管的網(wǎng)站總是更好。一個(gè)簡(jiǎn)單的登陸頁(yè)面-鏈接到社交媒體-紐約的Flavors.me或西班牙的Dooid提供基本的，易于建立網(wǎng)站。
對(duì)于更多功能，如在線表單或產(chǎn)品照片庫(kù)，更復(fù)雜的網(wǎng)絡(luò)選項(xiàng)是必要的。曼哈頓的Squarespace（開始于每月$ 8），總部位于倫敦的Moonfruit（每月$ 6開頭），以及基于愛沙尼亞，Edicy的（約$ 7.50，每月開始）提供的設(shè)計(jì)功能，易用性和性能的平衡。
其目標(biāo)是：選擇精益托管解決方案成為可能，并且一定要發(fā)展自己的網(wǎng)站用手機(jī)或平板電腦方便，以確認(rèn)它的作品，因?yàn)樗鼞?yīng)該在這些設(shè)備上。重要的是，您的網(wǎng)站能夠正確有效地展示給越來越多的移動(dòng)互聯(lián)網(wǎng)用戶。
4.在您的設(shè)計(jì)中強(qiáng)調(diào)社交媒體。請(qǐng)仔細(xì)考慮在您的網(wǎng)站上放置社交媒體內(nèi)容。通常，它的前面和中心，并提供你最動(dòng)態(tài)的內(nèi)容，包括博客文章，更新和視頻。
用什么： Facebook的，Twitter的，Pinterest的和其他社交網(wǎng)絡(luò)已經(jīng)引發(fā)了山寨機(jī)行業(yè)，他們的工具集成到您的網(wǎng)站和移動(dòng)設(shè)備的第三方應(yīng)用程序。探索在社交媒體上分享您公司內(nèi)容的方法，并尋找在Twitter上推廣的功能，以及在Facebook上喜歡的功能。
其目標(biāo)是：外包盡可能多的現(xiàn)場(chǎng)體驗(yàn)盡可能社交媒體和移動(dòng)設(shè)備，同時(shí)還按照你的設(shè)計(jì)方案。
5.一旦開始運(yùn)行，請(qǐng)嚴(yán)格測(cè)試您的新網(wǎng)站。決定如何衡量您網(wǎng)站的成功或失敗。這將有所不同，但有用的指標(biāo)包括電子郵件列表注冊(cè)，額外的關(guān)注者和轉(zhuǎn)化為電話或聊天會(huì)話。
用什么：有第三方工具的陣列來優(yōu)化您的設(shè)計(jì)不同元素的表現(xiàn)。Optimizely（起價(jià)為每月$ 17），谷歌內(nèi)容實(shí)驗(yàn)（免費(fèi)在谷歌Analytics（分析）包），視覺網(wǎng)站優(yōu)化工具（每月$ 49），SproutSocial（開始于$ 39）和Radian6的通過Salesforce的（免費(fèi)啟動(dòng)Salesforce的用戶，計(jì)劃在開始每個(gè)用戶每月$ 5）將社交媒體結(jié)合到數(shù)據(jù)分析中。另外值得一看是客戶反饋服務(wù)，如Hively（基本計(jì)劃是免費(fèi)的，付費(fèi)服務(wù)每月$ 15開始），提示游客回答有關(guān)使用你的網(wǎng)站他們的經(jīng)驗(yàn)調(diào)查問題，這些問題。
其目標(biāo)是：有一個(gè)明確的計(jì)劃來追蹤你的網(wǎng)站性能，并致力于管理所需的資源和更新新的設(shè)計(jì)。網(wǎng)絡(luò)是一個(gè)永無止境的工作進(jìn)展 - 你的新網(wǎng)站也是如此。
當(dāng)客戶來到你的網(wǎng)站 -無論是從網(wǎng)上搜索結(jié)果或在廣告中的鏈接-網(wǎng)頁(yè)，他或她的土地上被稱為目標(biāo)網(wǎng)頁(yè)。這些可以是您的主頁(yè)或您在網(wǎng)站上創(chuàng)建任何其他頁(yè)面。由于這些頁(yè)面可以隨意轉(zhuǎn)換成瀏覽器是至關(guān)重要的付費(fèi)用戶，這一點(diǎn)很重要，他們是最大的參與優(yōu)化。
如果您擔(dān)心您當(dāng)前的著陸頁(yè)可能是驅(qū)動(dòng)游人流連忘返，而不是鼓勵(lì)他們與您的內(nèi)容進(jìn)一步參與的，請(qǐng)考慮以下策略來優(yōu)化您的著陸頁(yè)：
1.創(chuàng)建自定義的目標(biāo)網(wǎng)頁(yè)。
請(qǐng)記住，你是不是僅限于一個(gè)單一的目標(biāo)網(wǎng)頁(yè)。您可以創(chuàng)建多個(gè)頁(yè)面，每個(gè)頁(yè)面定制特定類型的訪問者。
理想情況下，一個(gè)登陸頁(yè)面應(yīng)該成為你的流量引薦源之間的橋梁 - 如廣告或社交媒體鏈接 - 與您的網(wǎng)站的其余部分，提供了量身定制的個(gè)人游客的需求信息。例如，如果你運(yùn)行一個(gè)付費(fèi)點(diǎn)擊（PPC）廣告系列中的廣告推廣特定產(chǎn)品，然后放下你的訪問者到你的主頁(yè)，他們可能會(huì)覺得搞亂了。
更好的方法是創(chuàng)建或識(shí)別特定的目標(biāo)網(wǎng)頁(yè)，將提供這些游客正在尋找馬上的信息。這可能是因?yàn)槟木W(wǎng)站或復(fù)雜如創(chuàng)建每個(gè)你的PPC廣告組的唯一登陸頁(yè)面選擇現(xiàn)有的特定產(chǎn)品登陸頁(yè)面一樣簡(jiǎn)單。顆粒越多，你去用這種方法，你可以更好的調(diào)整目標(biāo)網(wǎng)頁(yè)的信息，并呼吁到行動(dòng)，個(gè)人游旅客。
當(dāng)然，自定義目標(biāo)網(wǎng)頁(yè)不應(yīng)該只針對(duì)PPC廣告活動(dòng)中使用。如果游客從客戶的職位或其他可識(shí)別的源網(wǎng)站上的到達(dá)，考慮為他們創(chuàng)造特殊的著陸頁(yè)為好。
2.拆分測(cè)試目標(biāo)網(wǎng)頁(yè)。
著陸頁(yè)優(yōu)化還沒有結(jié)束，一旦你創(chuàng)建了定制頁(yè)面訪問者不同的群體。要真正提高你的網(wǎng)站的性能，考慮你個(gè)人的登陸頁(yè)面運(yùn)行的分割測(cè)試。對(duì)比測(cè)試基本上可以讓您比較網(wǎng)頁(yè)的兩個(gè)或多個(gè)版本，以確定哪些元素或功能是最有效的。
請(qǐng)記住，大部分游客只花了幾秒鐘在新網(wǎng)站上決定是否與內(nèi)容進(jìn)一步參與或點(diǎn)擊“返回”按鈕。所以，如果您的目標(biāo)網(wǎng)頁(yè)正在形成，介紹你的新訪客到您的網(wǎng)站的內(nèi)容的其余部分的橋梁，這是至關(guān)重要的，這個(gè)頁(yè)面盡可能地讓新訪客進(jìn)一步調(diào)查一樣引人注目。
要確定哪些目標(biāo)網(wǎng)頁(yè)的功能，更有效，你可以做A / B分割測(cè)試。修改目標(biāo)網(wǎng)頁(yè)上的小變量，然后隨機(jī)服務(wù)的每個(gè)變化給游客在現(xiàn)場(chǎng)的環(huán)境。
測(cè)試變量可能包括：
到達(dá)網(wǎng)頁(yè)標(biāo)題的寫法，字體，顏色和頁(yè)面位置。
著陸頁(yè)上使用的任何圖像。
著陸頁(yè)的設(shè)計(jì)，包括背景顏色，列大小或?qū)Ш皆亍?/p>
著陸頁(yè)上所描述的具體利益。
您的目標(biāo)網(wǎng)頁(yè)的號(hào)召性的行動(dòng)。
測(cè)試盡可能多的這些變量盡可能使用免費(fèi)的谷歌Analytics（分析）“ 內(nèi)容實(shí)驗(yàn) ”計(jì)劃。然后，用你的實(shí)驗(yàn)結(jié)果，使您的自定義登陸頁(yè)面轉(zhuǎn)換中的新訪客到終身讀者更有效。
3.嘗試使用視頻的目標(biāo)網(wǎng)頁(yè)。
如果您沒有看到您是否想在純文本的目標(biāo)網(wǎng)頁(yè)的結(jié)果，你可能想嘗試不同的東西：視頻著陸頁(yè)。
視頻著陸頁(yè)功能單一的視頻文件，而不是文本塊。參與率往往比使用基于文本的互動(dòng)元素的含量越高，所以你可能會(huì)抓住觀眾的注意力更好地被輸送通過視頻，而不是文字相同的信息。
制作視頻的目標(biāo)網(wǎng)頁(yè)的最簡(jiǎn)單的方法是使用電腦的內(nèi)置攝像頭，并記錄您的介紹與YouTube的視頻錄像機(jī)。一旦您的視頻已被記錄，它可以取代你的文字中可以嵌入到您的著陸頁(yè)。這是一個(gè)簡(jiǎn)單而優(yōu)雅的解決方案，以誘人的新訪客的問題留在網(wǎng)站上更長(zhǎng)的時(shí)間。
如果你決定使用視頻的目標(biāo)網(wǎng)頁(yè)進(jìn)行實(shí)驗(yàn)，讓他們簡(jiǎn)短而中肯。簡(jiǎn)明地解釋你的網(wǎng)站的好處和觀眾接下來采取的行動(dòng)。此外，要注意您的演示文稿。衣著得體，在提供專業(yè)的或局部背景的位置，你的聲音能量和電影說話。
把一點(diǎn)點(diǎn)額外的努力進(jìn)入你的網(wǎng)站的登陸頁(yè)面 - 無論是通過自定義的基于文本的頁(yè)面或引人入勝的視頻文件 - 將有可能使您的網(wǎng)站的性能差異。
成功的產(chǎn)品營(yíng)銷正在尋求從客戶或用戶的角度來看的產(chǎn)品和服務(wù)。以用戶為中心的設(shè)計(jì)優(yōu)化產(chǎn)品，為用戶如何需要使用它們，而不是強(qiáng)迫用戶改變他們的行為，以使用產(chǎn)品。
我們可以使用用戶之間進(jìn)行區(qū)分的一個(gè)重要變量是性別。有研究提供的證據(jù)表明有繼承之間的差異 認(rèn)知風(fēng)格 的男人和女人-換句話說，一路男女思考，觀察和記憶信息。
據(jù)西蒙·巴倫 - 科恩在劍橋大學(xué)發(fā)展精神病理學(xué)教授之間有男孩和女孩的行為在出生時(shí)細(xì)微的差別。雖然大多數(shù)女寶寶把大部分的注意力轉(zhuǎn)移到社會(huì)刺激，如人臉和聲音，大部分男生最注重的非社會(huì)，空間的刺激，如移動(dòng)掛嬰兒床上方的運(yùn)動(dòng)。
在其整個(gè)生命，雌雄個(gè)體繼續(xù)在越來越復(fù)雜的方式來體現(xiàn)這些早期的性狀。越來越多的證據(jù)表明，身體，男性自發(fā)地向制度化比女性做更大程度，而女性自發(fā)同情比男性更大。
其他研究也表明，工程數(shù)學(xué)，物理學(xué)和-所有這些都需要高度系統(tǒng)化的-更常見的男性職業(yè)，而女性則在從語音或面部表情的基調(diào)解碼非語言的交流，拿起細(xì)微差別更好或判斷一個(gè)人的性格。顯然，這 并非 意味著所有的男人都systemizers和所有的女人都empathizers。
在Clicktale研究中，我們分析了這樣男女搭配不同的網(wǎng)站進(jìn)行互動(dòng)。行為的差異進(jìn)行了反復(fù)觀察：下面的圖片是從配方的網(wǎng)站上得到。從側(cè)面由端鼠標(biāo)點(diǎn)擊熱圖呈現(xiàn)在這里，您可以看到網(wǎng)站訪客誰在頁(yè)面的各個(gè)部分點(diǎn)擊率。男子在左側(cè)熱圖，而婦女在右側(cè)的熱圖所示。
乍一看，很明顯，更多的婦女與頂部的菜單欄從事 - 點(diǎn)擊進(jìn)入各個(gè)類別，查看不同的食譜。此外，女性更可能點(diǎn)擊左側(cè)的圖標(biāo)，而不是僅僅停留在食譜。男人，在另一方面，往往是遠(yuǎn)在他們點(diǎn)擊比較有限 - 他們尋找的正是他們追殺什么，然后離開現(xiàn)場(chǎng)當(dāng)他們完成。
正如在頁(yè)面中心看到由狹窄的“熱”樂隊(duì)，男人都集中在配方中的成分以及如何準(zhǔn)備。婦女，在另一方面，瀏覽上下頁(yè)越來越不太集中 - 由更廣泛，更漫射的“熱”帶所見。
這兩個(gè)熱圖證實(shí)，男性在表達(dá)其在網(wǎng)站上的行為更加系統(tǒng)化而女性更適合移情認(rèn)知方式。
如果你閱讀了今年早些時(shí)候出現(xiàn)的無數(shù)網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)報(bào)告，你可能會(huì)讀到大型，英雄大小的電影院在所有地方的主頁(yè)上的顯著位置的承諾。那么他們?cè)谀睦铮?/p>
雖然一些時(shí)尚前沿公司在他們的網(wǎng)站上使用它們，但電影已經(jīng)大部分被降級(jí)為展示綜合文章和網(wǎng)頁(yè)。
我說足夠了。現(xiàn)在是時(shí)候，電影院起來，并采取他們正確的地方作為他們注定要成為的網(wǎng)頁(yè)heros。
為什么電影工作
追隨網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)的想法只是因?yàn)樗活A(yù)測(cè)從來沒有真的讓我興奮。但是，如果你能真正開拓這樣的趨勢(shì)怎么辦？如果它實(shí)際上有一個(gè)目的，并同時(shí)解決了一個(gè)問題？
當(dāng)談到cinemagraphs，所有上述陳述是真實(shí)的。雖然它已經(jīng)被討論，（甚至預(yù)測(cè)為網(wǎng)絡(luò)設(shè)計(jì)的趨勢(shì)），很少有網(wǎng)站實(shí)際使用它們。因此，他們甚至沒有接近達(dá)到臨界質(zhì)量，所以他們?nèi)匀幻宰〈蠖鄶?shù)網(wǎng)絡(luò)用戶。
不是一個(gè)照片，不是一個(gè)視頻，電影是固有的眼睛糖果，因?yàn)樗麄冇夼^眾只是足夠長(zhǎng)，讓他們?cè)俅慰纯础Ｔ贏.D.D.時(shí)代我們生活在今天，任何你可以用來讓用戶暫停 - 即使只是一個(gè)瞬間 - 被認(rèn)為是一個(gè)小勝利一個(gè)非常重要的原因：
你有他們的關(guān)注。
在網(wǎng)站上吸引一些注意力的一種特別有效的方式一直是視頻。人眼喜歡運(yùn)動(dòng)。但一個(gè)大英雄視頻（即使是一個(gè)短的）是如此龐大。當(dāng)然，你可以壓縮它的一英寸的生命，但然后它只是看起來...壓縮。或者你可以獨(dú)自留下，受到緩慢加載網(wǎng)頁(yè)的后果。
但通過使用電影院，您可以節(jié)省大量的帶寬，同時(shí)仍然滿足運(yùn)動(dòng)的需要。事實(shí)上，你是在嘲笑，因?yàn)槟憧梢岳秒娪霸旱男路f性方面 - 人們只是不經(jīng)常看到他們，當(dāng)他們做的時(shí)候印象深刻。
所以現(xiàn)在你知道為什么cinemagraph應(yīng)該在網(wǎng)絡(luò)上重要的地方，讓我們采取一個(gè)高層次的觀點(diǎn)，如何使一個(gè)生命。
Glendevon Motors在其英雄區(qū)域使用了一個(gè)電影院來傳達(dá)一種心情，并在其競(jìng)爭(zhēng)對(duì)手中脫穎而出，成為一個(gè)“高級(jí)品牌”。
選項(xiàng)1：使用先前存在的電影
有許多實(shí)例，當(dāng)采購(gòu)一個(gè)現(xiàn)成的CG是可以接受的，或甚至喜歡自己做。我會(huì)說，如果你能找到你所需要的，并在你的預(yù)算，獲得它的權(quán)利，那么這是走的路。唯一的問題是：你在哪里找到它？
好消息是，你有選擇。它們將在很大程度上取決于您的預(yù)算（或您的客戶的），但是有很多來源。甚至有幾個(gè)免費(fèi)的選擇。然而，如果你有八十塊錢花，Shutterstock有一個(gè)相當(dāng)不錯(cuò)的選擇高清CG。
（提示：他們沒有獨(dú)立的影片段，因此您只需搜索“cinemagraph”這一術(shù)語，以及“視頻”部分中的其他搜索字詞）。
在我開始這篇文章之前，我必須處理一個(gè)語義問題。根據(jù)我的字典的字體是“一組一個(gè)特定的臉和大小字體；字體是一個(gè)特定類型的設(shè)計(jì)。在計(jì)算條件的字體是一個(gè)數(shù)字文件，存儲(chǔ)所需的信息，以使'一個(gè)特定的人臉和大小'在屏幕上的一組。字體和字體是不同的東西，迂腐的設(shè)計(jì)師堅(jiān)持認(rèn)為你不使用的術(shù)語。你要知道這是在回答“你能使用任何字體/字體在您的網(wǎng)站上？“你要知道，當(dāng)我把字體我是說像Arial或Times New Roman字體時(shí)，我指的是我所說的文件，你的計(jì)算機(jī)使用的渲染字體。這可能聽起來微不足道，但我可以向你保證，這是相關(guān)的。
網(wǎng)頁(yè)上使用的字體文件
當(dāng)你瀏覽網(wǎng)頁(yè)的字體（S）在網(wǎng)頁(yè)上使用的是從您的計(jì)算機(jī)上的字體渲染。所以，如果你沒有在您的計(jì)算機(jī)上的Web頁(yè)面將顯示你的系統(tǒng)的默認(rèn)字體必要的字體文件。
因?yàn)椴煌南到y(tǒng)（窗口，蘋果，蘋果）有不同的字體，有極少數(shù)的字體，被認(rèn)為是可供廣大用戶。這種字體被稱為“網(wǎng)絡(luò)安全”字體。你可能已經(jīng)注意到字體相同的少數(shù)人在大多數(shù)網(wǎng)站使用。你限制這些選擇了嗎？默認(rèn)情況下你是很有限，但有幾個(gè)選項(xiàng)，允許你使用額外的字體。這里有幾個(gè)：
在服務(wù)器上設(shè)置字體文件
您可以保證所有的訪問者將有必要的字體文件，通過在您的網(wǎng)站的服務(wù)器上托管。您可以設(shè)置您的網(wǎng)站，所以字體是下載和使用您的訪問者的計(jì)算機(jī)。大多數(shù)瀏覽器的工作很好。然而，它確實(shí)打開了一些許可證問題，因?yàn)榇蠖鄶?shù)字體許可證不允許你在公共領(lǐng)域中提供一個(gè)字體文件，這是有效的你所做的。然而，字體托管服務(wù)，為您提供法律方面的照顧。這并不意味著你可以使用任何你喜歡的字體；你依賴于主機(jī)服務(wù)來承載你的字體。這個(gè)選擇仍然是有限的，但要少得多，所以依靠用戶在他們的電腦上。
字體為圖像
如果你將它轉(zhuǎn)換為任何圖像，你可以使用任何字體的設(shè)計(jì)。這幾乎滿足所有許可證。但有2個(gè)主要的缺點(diǎn)：網(wǎng)站不能讀取搜索引擎和文本是不適合“動(dòng)態(tài)”的內(nèi)容（由數(shù)據(jù)庫(kù)或用戶輸入的內(nèi)容生成）。
字體為閃光電影
閃光電影允許字體文件被嵌入，但不公開的字體可供人使用。有幾個(gè)技術(shù)可以用一個(gè)小的閃光電影，用一個(gè)小的閃光的電影，以取代生活文本。這是一個(gè)很好的選擇標(biāo)題點(diǎn)是用大段文字或?qū)δ承┍尘安豢扇 ?/span>
所以有幾個(gè)選項(xiàng)，但所有的人都有其缺點(diǎn)。網(wǎng)絡(luò)文件和字體從來沒有被一個(gè)又一個(gè)的好朋友。在大多數(shù)情況下，你只需要做一個(gè)壞的情況最好的。
賠率是你看到字體真棒在使用上的一些網(wǎng)站，你頻繁。這個(gè)網(wǎng)站的字體完全可以縮放矢量圖標(biāo)已經(jīng)迅速成為最常用的工具，在網(wǎng)絡(luò)設(shè)計(jì)師的阿森納。在這個(gè)快速的教程中，我們將調(diào)用字體真棒圖標(biāo)，以幫助建立一個(gè)比較溫和的垂直菜單欄，但首先讓我們看看什么使字體真棒這么可怕…
可伸縮性-無論屏幕分辨率是什么樣的圖標(biāo)都會(huì)很好地選擇響應(yīng)的設(shè)計(jì)。
CSS樣式-如果你可以使用CSS樣式，你可以將它應(yīng)用到這些圖標(biāo)。
兼容-字體真棒發(fā)現(xiàn)其根源在推特引導(dǎo)，所以它與其他框架的作品。
許可證-字體真棒完全開源和GPL的友好，它可以在任何地方使用不受限制。
設(shè)置字體真棒
字體真棒，很容易建立在您的網(wǎng)站上使用的鏈接回到bootstrapcdn的CSS的CSS或上傳到您的Web目錄。這篇教程的目的，我們要鏈接到bootstrapcdn.com但是如果你希望使用的任何其他方法引用的CSS字體真棒，他們可以在這里找到。
添加字體真棒沒有下載或安裝任何事情是通過添加一個(gè)單一的代碼行：
<鏈接href =“/ maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font真棒。min.css”rel=“樣式表”>
在你的HTML的<head>標(biāo)簽之間。如果你是本地測(cè)試，你將需要更改代碼行添加HTTP之上：
<鏈接ref=“http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font真棒。min.css”rel=“樣式表”>
樣式的菜單
現(xiàn)在你的網(wǎng)站已準(zhǔn)備好的圖標(biāo)，讓我們繼續(xù)用下面的CSS創(chuàng)建一個(gè)垂直的導(dǎo)航菜單：
列表組{
margin-bottom: 20px；
填充左：0px；
}
* {
框大小：邊框框；
寬度：65%
}
。列表組項(xiàng)目：第一子{
邊框右半徑：10px；
邊框左上半徑為10px；
}
a.list-group-item {
顏色：# 555；
}
列表組項(xiàng)目{
位置：相對(duì)；
顯示：塊；
填料：10px 15px；
利潤(rùn)率底：- 1px；
背景顏色：# c3c3c3；
邊境：1px solid # 000000；
}
{
顏色：# 21b384；
文字裝飾：無；
背景：無重復(fù)滾動(dòng)0% 0%透明；
}
這類清單組現(xiàn)在可以用來創(chuàng)建一個(gè)基本的垂直導(dǎo)航菜單而不是我們使用一個(gè)無序列表。上面的樣式給我們一個(gè)較深的文本的灰色背景，但你可以調(diào)整背景顏色，字體顏色，甚至添加到成品的懸停樣式。
然而，空菜單，讓我們?cè)谀抢锏玫揭恍┦褂肏TML導(dǎo)航元素。不要把這個(gè)放進(jìn)你的頁(yè)面，因?yàn)槲覀儧]有在這個(gè)代碼中添加圖標(biāo)。
＜div class=“組”>
< class=“清單組項(xiàng)目“href =“#”>家</a>
< class=“清單組項(xiàng)目“href =“#”>關(guān)于我們</a>
< class=“清單組項(xiàng)目“href =“#”>搜索</a>
< class=“清單組項(xiàng)目“href =“#”>聯(lián)系我們</a>
< / DIV >
添加圖標(biāo)
字體真棒圖標(biāo)可以添加到您的頁(yè)面上的任何地方使用圖標(biāo)標(biāo)記<我>。例如，如果你想添加一個(gè)鉛筆圖標(biāo)，你需要插入下面的代碼行：
<我班=“發(fā)”
這就告訴瀏覽器圖標(biāo)是從字體真棒，發(fā)，和圖標(biāo)的名稱，以顯示是鉛筆，發(fā)鉛筆。為我們的菜單，我們將添加<我>和< /我>標(biāo)簽，以及一個(gè)非破壞的空間，直接在菜單項(xiàng)。因?yàn)槲覀兪桥c菜單項(xiàng)的工作，我們也會(huì)加入足總FW給我們的圖標(biāo)固定寬度。
＜div class=“組”>
< class=“清單組項(xiàng)目“href =“#”> <我class=“FA家fa-fw”> < /
我是家里的
< class=“清單組項(xiàng)目“href =“#”> <我class=“FA用戶發(fā)FW”> < /
我>關(guān)于我們< / >
< class=“清單組項(xiàng)目“href =“#”> <我class=“FA搜索fa-fw”> < /
我>搜索< / >
< class=“清單組項(xiàng)目“href =“#”> <我class=“FA電話fa-fw”> < /
我，聯(lián)系我們< / >
< / DIV >
你有它！最終的結(jié)果會(huì)是這樣：
多做
有更多的你可以做與字體真棒圖標(biāo)從直接在<我>標(biāo)簽。你可以讓它們更大，邊框可以添加，圖像可以旋轉(zhuǎn)，你甚至可以告訴圖標(biāo)旋轉(zhuǎn)。字體真棒網(wǎng)站的實(shí)例頁(yè)面提供了關(guān)于如何在自己的頁(yè)面上應(yīng)用這些樣式的說明。如果你想看到所有479個(gè)圖標(biāo)，隨著他們的名字用在你的網(wǎng)頁(yè)，查看列表作為一個(gè)方便的參考指南。新的圖標(biāo)正在不斷地被添加到庫(kù)中，所以確保你使用的是這個(gè)文檔中最新的版本，以獲得最從這個(gè)工具。