如何讓搜索引擎自動送流量上門

發(fā)布時間：2016-11-01 文章來源：瀏覽次數(shù)：2978

Claudio Guglieri 在紐約廣告公司 B-Reel 任職總監(jiān)，他撰寫了本網(wǎng)站設(shè)計培訓(xùn)指南，旨在匡助您了解設(shè)計網(wǎng)站布局的全過程。
　　開始講述設(shè)計網(wǎng)站布局的主題之前，我想先分享自己多年從事設(shè)計工作中看到的一些常見錯誤，尤其是“網(wǎng)站設(shè)計培訓(xùn)”中所述的實習(xí)生和新手們的通病。
　　本文羅列了打造完美網(wǎng)站布局的步驟，旨在涵蓋開始新項目前以及項目設(shè)計過程中的各項應(yīng)知應(yīng)會，適合數(shù)字廣告公司內(nèi)就職的所有網(wǎng)站設(shè)計師新人閱讀。
　　以下原則不僅包含各種設(shè)計細節(jié)，還提供了常規(guī)工作流程，從而匡助您精彩地完成工作。遵循這些原則，您很快就能上手，設(shè)計出專業(yè)的網(wǎng)站布局。
　　01. 先在紙上收拾整頓思緒
　　 initial sketch
　　世界各處城市插圖系列簡筆
　　此條顯然很重要，但是我常常發(fā)現(xiàn)一些設(shè)計師會跳過這步直接使用 Photoshop CS6 而不去思索他們需要解決的題目。設(shè)計的目的在于解決題目，而這些有待解決的題目無法通過漸變或暗影效果得到解決，而是需要完美的布局和清楚的結(jié)構(gòu)。想一想內(nèi)容、布局和功能，然后再開始上暗影效果。
　　02. 從頂層框架草圖入手
UX sketch
　　草繪基本的框架將匡助你解決 UX 題目，并組織布局結(jié)構(gòu)
　　假如我要做一個項目的外觀和感覺，第一件事就是先建一個頂層框架，可解決所有設(shè)計題目�？蚣苁侵竷�(nèi)容附近的 UI，有助于執(zhí)行操縱并進行瀏覽。其中包括導(dǎo)航和各類組件，例如邊欄和底欄。
　　假如你從這點著手設(shè)計，則設(shè)計主頁以外的部門時，布局內(nèi)容將了然于心。
　　03. 為 PSD 添加網(wǎng)格
grid
　　以 10 像素基線繪制的 978 網(wǎng)格示例
　　這步操縱非常簡樸。在 Photoshop 中著手設(shè)計任何內(nèi)容前，你需要創(chuàng)建一個合適的網(wǎng)格。這一步的道理眾所周知，假如你沒有這么做，我可以斷言，最后的設(shè)計老是無法盡善盡美。
　　借助于網(wǎng)格，你能鋪排不同部門的布局結(jié)構(gòu);還能指導(dǎo)你按照特定屏幕尺寸要求進行設(shè)計，并能匡助你創(chuàng)建相應(yīng)的模板，以便符合間距和其他設(shè)計題目。
　　04. 選擇排版樣式
typography
　　根據(jù)常規(guī)經(jīng)驗，一個網(wǎng)站布局中所用字型最好不要超過兩種
　　了解不同的字型和配色是項目開發(fā)階段的工作。我建議一個網(wǎng)站中所用字型不要超過兩種，不外實際上，還需取決于你可用的色系�？傊x字體需便于閱讀大量文字，且與標(biāo)題和操縱相映成趣。大膽勇敢使用大字體，并在使用字型時保持整體一致性和生動感。
　　05. 選擇主題顏色
colours
　　使用有限的色階和色調(diào)以免產(chǎn)生視覺疲憊
　　選完要使用的一系列字型后，你應(yīng)開始研究 UI、背景和文本該用什么顏色。關(guān)于顏色，我建議在處理常規(guī)用戶界面是用色及色調(diào)需簡潔。
　　根據(jù)元素功能在設(shè)計 UI 時保持一致性非常重要。想想 Facebook、Twitter、Quora 和 Vimeo 之類的網(wǎng)站布局。除 UI 外，插圖或圖形細節(jié)部門只要沒有干擾組件功能的話，在用色方面也沒什么限制。
　　06. 劃分布局
　　 B-reel homepage
　　網(wǎng)站結(jié)構(gòu)越簡樸，用戶瀏覽時就越利便
　　網(wǎng)站各個部門都需要施展各自的作用。對于用戶而言，每個部門都有各自存在的理由，并能得到相應(yīng)的終極結(jié)果。布局需要匡助夸大其內(nèi)容著重顯示該部門最重要的信息。實際上，一個頁面并不需要太多調(diào)用按鈕，因此每個內(nèi)容都應(yīng)推動到終極“我可以在此實現(xiàn)什么目的”。
　　思索一下，你可認為一個簡樸的目標(biāo)構(gòu)想到的最簡樸的布局，并開始添加所需組件。最后你會驚喜的發(fā)現(xiàn)簡潔也并非易事。
　　07. 重新思索已建內(nèi)容
search button
　　我們真的還需要一個搜索按鈕嗎?在大多數(shù)情況下，謎底是不。
　　作為設(shè)計職員，我們構(gòu)建了用戶瀏覽互聯(lián)網(wǎng)的方式，需要采取多少步驟才能執(zhí)行一個簡樸的操縱以及網(wǎng)站的復(fù)雜性都是由我們來決定的。我們一直都在遵循一些設(shè)計模式和慣例，由于它們切實有效，但有時候只是由于沒人有足夠的時間進行衡量或者重新思索。重新思索組件上已建的交互模式，并看看是否可以進行改進，這點至關(guān)重要。
　　08. 自我挑戰(zhàn)
　　我鼓勵每位設(shè)計職員不要墨守成規(guī)，而是在每個項目長進行自我挑戰(zhàn)。并非每個項目都要求立異，因此，需要我們自己決定是否要增加一些交互設(shè)計相關(guān)的內(nèi)容。好比，各種自我挑戰(zhàn)可能包括使用新的網(wǎng)格系統(tǒng)、創(chuàng)建新的組件，或者甚至包括一些小挑戰(zhàn)，諸如避免混合模式或者避免使用特定的顏色。
　　09. 留意細節(jié)
　　 game work in progress
　　正在進行的游戲項目：細節(jié)視圖
　　這條也算是須生常談了，但并非始終在成品中得到應(yīng)用。根據(jù)項目的概念，“關(guān)注點”也會有所不同。
　　可以注重小型交互、意想不到的動畫或?qū)徝栏锌腥�，例如按鈕上的小漸變或是背景盒子附近的微妙筆畫之類。但是總的來說，假如你樂在其中，這種感慨感染非常重要，而且非常天然。
　　10. 當(dāng)真對待每個組件，就當(dāng)參加設(shè)計比賽
video component
　　注重每個組件，一加一大于二
　　我必需承認這并不是我首創(chuàng)的理論。過去曾在 Fantasy Interactive 上聽到這種說法，當(dāng)時我就震動了，這句話如斯明確中肯。每個組件都需單獨設(shè)計，使其卓絕超凡。有時候，設(shè)計師會將一些部門歸為最不重要的內(nèi)容，終極并不會對其引起正視。
　　11. 進步設(shè)計作品清楚度
blurry pixels
　　避免泛起像素恍惚的現(xiàn)象，嘗試準(zhǔn)確設(shè)置筆觸效果和背景之間的對比度或背景顏色
　　除美學(xué)考量之外，有些共同的題目需要予以避免，從而創(chuàng)造出一個干凈準(zhǔn)確的作品。嘗試進步設(shè)計清楚度時應(yīng)留意以下幾點：梯度條帶、恍惚的邊沿、字體渲染選項(部門字體取決于字體大小，最好在特定的渲染模式下查看)以及與背景融合的筆觸效果。
　　以上列出了一些基本留意事項，但實際上需要留意的題目還有良多。務(wù)必以整體視角檢查設(shè)計，看看是不是都非常完美，然后再單獨分析每個組件還有什么題目。
　　12. 收拾整頓 PSD
　　假如你通過 Photoshop 進行設(shè)計，那么這點至關(guān)重要(結(jié)合網(wǎng)格使用)。不管項目有多大，有多少設(shè)計師介入其中，你都需要保證文件干凈。這樣就能保證不同部門都能輕松導(dǎo)出，從而進步設(shè)計流程的速度，并能處理與其他設(shè)計師共享的文件。
　　13. 設(shè)計最好的情況，但為最壞的情況做預(yù)備
　　 Clear app
　　謹記不同設(shè)備和尺寸大小上如何讓你的設(shè)計施展作用
　　作為設(shè)計師，我們的工作就是通過不同的限制解決題目。網(wǎng)頁設(shè)計過程中，會碰到各種限制，包括概念和技術(shù)題目以及內(nèi)容相關(guān)的題目。
　　我們需要創(chuàng)建一個網(wǎng)站，其不僅可以在理想狀態(tài)下運行，同時也可以在最糟糕的環(huán)境下運行。例如，用戶可使用相稱小的屏幕查看網(wǎng)站，此時網(wǎng)站上的內(nèi)容看起來支離破碎。
　　但是，鑒于我們展示設(shè)計作品的目的，我個人強烈建議為其創(chuàng)建最佳環(huán)境。因此我們將要顯示最理想的內(nèi)容量，同時以最佳瀏覽器尺寸進行展示，也就是用戶最常用的環(huán)境。
　　14. 陷溺于設(shè)計，因愛生恨
　　假如你鉆研設(shè)計，我保證你已經(jīng)干過這種事。只要完成一項設(shè)計就會倍感自豪，設(shè)計已經(jīng)成為糊口的一部門了。還會截圖，與其他設(shè)備比較，將其設(shè)為桌面背景，甚至打印出來掛在墻上。
　　整個過程中，我達到某個臨界點，終極產(chǎn)生厭惡;我開始發(fā)現(xiàn)各種缺點和錯誤，然后進行修改。不喜歡自己以前的設(shè)計是成熟的表現(xiàn)，也就是說，你終極發(fā)現(xiàn)自己的題目。
　　15. 與客戶交流前避免鋪張?zhí)鄷r間設(shè)計概念
　　提交交互概念或設(shè)計外觀與體驗時，你需要確保你和客戶盡快同步。初始概念通過審核后，你可以稍作放松，然后開始設(shè)計。
　　但是假如提交后初始概念后，并未深得客戶的歡心，你就應(yīng)該收集各種反饋，以便第二次提交的概念方案能夠符合客戶的要求。
　　16. 和你的開發(fā)者成為摯友
developer Rafael Mumme
　　開發(fā)者創(chuàng)意十足，而且熱愛自己的工作，和你一樣。但是他們并非老是在項目一開始就介入其中，而且大多時候，他們都是在概念設(shè)計敲定之后才開始介入設(shè)計的，因此他們的創(chuàng)意工作就遭到了扼殺。這種流程是錯誤的;一些非常優(yōu)秀的想法主意都是開發(fā)團隊提出的。分享你的概念，你會驚喜地發(fā)現(xiàn)他們會把它變成更加美觀、更加便于設(shè)計。
　　17. 展示：說明時請將受眾想象為四歲兒童
　　展示作品和設(shè)計作品一樣重要。使用錯誤的展示方式，可能會埋沒優(yōu)秀的設(shè)計或者使其慘遭淘汰。謹記，受眾第一次看到你的設(shè)計時，并不了解你了然于心的各個重點。
　　18. 肯定自己的創(chuàng)意，但不要成為其奴隸
　　了解何時宣傳自己的創(chuàng)意，或是了解團隊或客戶何時會產(chǎn)生不合，這里存在一個小小的臨界點。作為設(shè)計師，你需要堅信自己的設(shè)計，但是你也應(yīng)樂于接受他人意見，快速改變自己的創(chuàng)意以及展開后續(xù)調(diào)整。不要健忘條條大路通羅馬。
　　19. 開發(fā)過程中跟進設(shè)計
　　假如您在廣告公司中工作，你必需明白，固然你剛剛完成的一個項目已經(jīng)投入開發(fā)，你不得不參加另一個新項目的設(shè)計，這是家常便飯。大家普遍以為 PSD 和樣式表提交后就萬事大吉了，這是分歧錯誤的，實在一切還剛剛開始。
　　假如你真的關(guān)心自己的設(shè)計和交互理念是否完全貫徹，可以實時與開發(fā)者友人溝通，并盡量提供匡助，以便達到至臻至美的效果。
　　20. 逐步正在設(shè)計的作品
style sheets
　　與大家分享樣式表和正在設(shè)計的組件
　　作為設(shè)計團隊的一員，我們不僅但愿看到終極的成品，同時也想看一看正在設(shè)計的作品。有時候，出于種種原因，項目最優(yōu)秀的部門可能會被忽略，然后一直存放在歸檔文件夾中。項目完成并獲得客戶/制作方認可后，可以著手進行改善，如有可能，可以創(chuàng)建案例研究，分析設(shè)計中的作品以及終極并未采用的作品。這有助于匡助拓寬團隊知識，同時你也能收集寶貴的反饋意見。
　　Claudio Guglieri 目前在紐約國際電子廣告公司 B-Reel 就任藝術(shù)總監(jiān)。之
　　前在 Fantasy Interactive 任藝術(shù)總監(jiān)，負責(zé)領(lǐng)導(dǎo)和制作客戶端交互體驗，如 Google、EA CNN、Nikelodeon、History Channel、Range Roverand Microsoft。如有任何題目，可 @claudioguglieri。

上一條：網(wǎng)站運營：需格外留意的五...

下一條：分享國外電商網(wǎng)站的七大時...