對WEB前端的幾段思考（一）——界面設計和性能優化（整理中）

　　　　儘管我並不是藝術出生，既沒有任何設計基礎，又沒有較高藝術涵養，也深諳在短期內創造必定藝術造詣並不是易事，可是既然當初選擇從事網站前端開發，個人目光不能僅停留在前端代碼上。做爲一名志向在前端領域發展的人員，可以創做出協調和諧的界面，和熟悉先後臺交互同樣重要。

 

　　爲控制成本，在網站素材（婚紗攝影圖片和網站文字）未準備好時，網站上都是些測試數據，不堪入目。所以個人處女做暫且還沒投入使用，實爲一大遺憾。在網站投入使用以後，一定附上網址，讓你們一睹爲快。

 

一，色彩的聯想

 

　　每種色彩帶給用戶不一樣的心理感覺，所以，在設計頁面時，絕對不能忽視每一種顏色帶給客戶的信息。主調色的選取，直接影響網站設計的總體風格。更重要的一點，色彩是向外界傳遞品牌識別的一個重要元素，大公司一直以來都堅持使用相同的色彩，例如銀白色的蘋果和綠色的360，在公衆中創造強烈的視覺衝擊。

 

紅色：活力，具備強烈的感情色彩。和白色等淺色搭配，富有視覺衝擊力。

黃色、橙色：歡快活潑，溫暖幸福。

綠色：和諧舒心，環保健康。可用做平衡其餘顏色，是設計的總體感受更紮實。

「插圖」

藍色：寧靜深邃，是最流行的色彩。企業網站界面多選深藍，更顯內涵。

紫色：高貴而神祕，暗紫中帶白，更顯優美和柔和。淺紫色表明浪漫，暗紫表明奢華。

 

黑色：深沉而神祕，體現前衛，能與衆多色彩構成良好對比協調。

白色：純潔明快乾淨。沒有過多色彩修飾，不易於分散用戶的注意力。

 

　　設計界面以前，我查看部分婚紗攝影樓網站，絕大多數的網站以白色爲背景，紅色，紅紫色等鮮明、喜慶、溫暖的顏色做爲點綴。白色背景可以讓人聯想到潔白的婚紗，凸顯愛情的純潔美好。簡潔的內容和佈局，下降用戶注意力分散的可能，使用戶更目光集中在攝影做品上。

但是採用白色背景有惟一個弊端，就是使得有部份內容和背景混雜一塊兒，效果單一，毫無層次感。

　　我選取一個紫紅色爲主調，白色高光方框點綴的背景，background-position屬性設置爲Fixed，使得主容器內容隨滾動條或鼠標滾動時，背景固定，產生一種內容浮動的想、錯覺。白色或淺紫色的邊框或字體和深顏色的背景造成視覺衝擊，使內容極具層次感,選擇高光的背景，網頁很光亮。

　　　　　　

　　　　　　

　　

同時紫色爲主調，凸顯婚紗攝影樓的高貴大氣，浪漫高端。

 

 

二，配色

　　1，單色系配色：色彩選取比較容易，選定某一色彩爲主，其餘顏色採用它的漸變色便可，方法較爲穩重。我得出如下規律：由深到淺：正文>標題>背景，強調或圖形顏色採用介於正文和標題的顏色

　　2，互補色配色：例如白色和綠色，紫色和粉色等等

互補顏色具備天生動感，將標題顏色換成互補色，可增添幾分活力。

 　　　　"插入"

　　選取主掉色和配色後，在往後的開發設計中，我應該注意，無論是主頁面仍是內部的子頁面，都要保持一直的視覺效果。一致的良好的設計理念，除了給用戶留下更深入印象外，還有助於用戶在操做時不會猶豫，從而快速熟悉網站，學會使用網站。

 

 

三，樣式

 

　　　　樣式可以表達完整的設計意圖，創意設計一樣經過樣式傳遞給用戶。

　　有一下幾點值得注意：

 

　　1，規範樣式文件。

　　　　樣式文件能夠分爲兩種形式：開發態和運行態。目的的不一樣，兩種形態會有不一樣的表現形式。開發態爲了維護和管理方便，能夠將不一樣做用的樣式進行拆分，好比：

　　全局樣式（global.css），結構佈局樣式（layout.css），色彩樣式（color.css），文字樣式（text.css），和重置樣式（reset.css）.

　　在生產運行環境中，基於性能考慮，能夠將樣式文件合併壓縮，減小與服務器交互的時間和次數。

 

　　2，重置樣式。

　　　　瀏覽器針對每種標籤都有默認的樣式，咱們須要在使用以前清理乾淨。對於一些樣式框架，咱們須要一個reset.css文件重置樣式。「附件」

 

　　3，爲樣式加上清晰的註釋。

　　　　註釋是給維護人員看的，再好的網站也離不開往後的維護，即使開發的是你，維護的又是你，在每一個文件頭標明它的做用，做者等基本信息，而且每一個段落樣式標註索引。

 

　　4，合併圖像。

　　　　基於性能考慮，合併圖像可以減小HTTP的請求數量，節省帶寬並加快頁面的加載速度。一個頁面上若是包含大量圖片，裝載這個頁面時就要屢次向服務器發送請求，HTTP請求會耗費網絡帶寬，圖片只能一張張顯示。

使用CSS背景定位(background-position)的方法便可獲取合併圖片中的相關圖像。

 

　　5，Hack

　　　　兼容性，是我最薄弱的一點，若是要實現對衆多瀏覽器的兼用，就須要或多或少的使用一些hack技術。。。。

 

四，簡潔性

 

　　系統的功能隨着開發愈來愈多，咱們會陷入系統的技術支持、bug修復的漩渦中，沒有精力去改善實際用戶最經常使用的功能，如導航設置，基本組件的位置。

 

　　功能上須要簡潔，操做流程、視覺效果上也須要簡潔。混雜的圖片顯示，大篇幅的文字，影響用戶體驗度。簡潔的界面具備一下優勢：

　　　　①簡潔的設計，更易於導航，減小冗餘信息，就是下降分散用戶注意力可能性，使得網站內容更加突出，可以讓用戶更快找到所需的內容。

　　　　②使得網站的目的性明確，精細準確表達想表達的意思，不會有使人煩躁的內容影響視覺體驗，用戶更加容易進入意境。

 

　　所以在設計上，我特別注意一下幾點：

　　　　①有效利用網站空間

　　　　　　和諧的排版並有效地將空間拉開，不盡讓用戶在視覺上更舒服，還能體現元素與元素之間的層次。

　　　　②將重要內容放在顯眼位置

　　　　③削減無光內容，從導航入手。

　　《大巧不工》一書提到的導航7+2原則;

 

　　　　「插圖」

 

　　　　套用二八定律法則，對於簡潔的網站或應用，80%的有用部分來自20%的功能——即，只有20%具備奉獻價值，咱們應該強化20%基本功能。

 

　　　　我過去企圖用豐富的動畫效果，絢麗的色彩搭配充斥用戶眼球的想法是多麼天真、單純。經過堆砌功能，填充網站空白位置的想法最終只會獲得一個評價：平庸、臃腫，須要學習。

 

　　　　例如，咱們在設計導航時候，不該該把全部功能羅列出來。而是應該思考用戶須要的功能，從用戶角度去設計，用戶沒有過多時間選擇思考。「這個是否須要，是否有更簡潔的實現方法。」這個想法，是從UCD上獲得啓發，和這現在流行的設計原則不謀而合：

 

UCD——以用戶爲中心的設計原則

　　1，關注信息醒目 2，更換網銀，新網銀轉帳簡單 3，網頁上只有喜歡內容

　　以上例子表明用戶有三特性：懶惰，有想法，喜新厭舊。

 

　　在這樣一個用戶需求日益變化，而互聯網資源及其豐富的時代，如何才能吸引用戶，如何才能創造價值？設計時遵循以用戶爲中心的設計原則是不錯的思路。

以用戶爲中心的設計（User -Centered Design ，UCD），是以用戶爲中心進行產品的設計、開發和維護，一切都從用戶的感覺與需求出發，而不是讓用戶適應產品。

產品的設計不只僅是將元素擺在頁面上，不管是作視覺仍是交互，深刻理解需求之下的用戶須要，才能使產品真正推向市場。

 

　　出於這方面的考慮，我設計除了設計通常的導航，位於公司名下以外，我還增設「便捷導航」（垂直導航）

　　　　「補充」

 

　　「簡潔是一種思想，咱們須要更高層次去理解它，不求最多，但求最好。」

 

 

　　在開發一個新產品時，我不經意調查其餘產品，瞭解競爭對手怎麼作。經行設計開發時，我還思考是否採用一樣的實現方式。通常狀況下，我也會遵循慣常的方法，一種特定的內容展現有必定表現方式，這些方式爲用戶所接受，用戶對這種方式不感到陌生，於是就更加容易被用戶所接受。

 

　　　　「補充」

 

　　個人網站不管是界面設計，亦或是代碼質量，不可能一步到位，步步成功，須要持續地改進設計，精簡代碼。

 

 

五，動態交互

 

　　交互之美從何體現？有人說，現於交互之流程，特效之絢麗，然而這些美只體如今表面，真正美的腳本設計應該體如今良好的結構和清晰的層級，以及腳本的可維護性與可擴展性上，腳本的「內在美」，也就是結構美比「外在美」更加劇要。

《大巧不工》一書提到「事件驅動的設計方式其實就是以用戶爲中心設計的一種表現形式，他把設計的關注點放在用戶的行爲上，用戶須要什麼，用戶會作有哪些行爲等角度去分析，而不是從框架具備那些功能或者瀏覽器具有那些功能的角度去分析。這是一種以用戶爲中心的思想。」

 

　　1，不能過度依賴腳本。

　　　　沒有人能保證本身設計的站點在沒有JavaScript的狀況下可以正常使用，處於某些緣由（好比殺毒軟件禁用腳本，用戶瀏覽器安全級別設置太高）網站還可以退而求其次，沒有動態的樣式，可是可以正常使用。在腳本收到影響的狀況下，應該作出友好的提示。

咱們須要認真思考，某些功能是否能夠不經過腳本或者經過部分腳本就能實現，保證網站的可訪問性，帶給用戶更好的交互體驗。「」

 

　　2，前端須要分層。

　　　　衆所周知，JavaScript是一種提升站點可用性的最好解決方案。對於HTML決定頁面包含那些元素，CSS決定那些元素應該怎麼展示，JavaScript決定元素將其具備哪些行爲，這是一個獨立的思惟。對於前端設計來講，將JavaScript代碼從HTML中剝離出來是有意義的。

前端從概念上能夠分爲三個層次：結構（HTML），樣式（CSS），行爲（JavaScript）。這三種層次相互獨立，互不影響，意義在於：

　　·腳本代碼更加簡潔、規範、，邏輯結構更加清晰，便於代碼維護。

　　·獨立的腳本代碼更容易測試和調試。

　　·行爲層次的獨立增長了腳本代碼複用的可能。

　　實現行爲層次的獨立，有一些基本原則：

　　　　（1）JavaScript代碼只出如今.js文件中。

　　　　（2）在HTML中，不會出現onload、onclick等元素，全部行爲都使用綁定的方法來實現，而不是內聯屬性來設置。

　　　　（3）只關注行爲，不能在JavaScript中定義CSS樣式

　　這些JavaScript的新思惟爲前端複雜的腳本設計提供了良好的理論基礎與實踐指導。

 

　　我爲個人處女做選擇了一把鋒利的「刀」——jQuery,它是現在流行的JavaScript庫之一，具有簡潔，可擴展等優勢。

 

　　3，使用ready方法來進行初始化。

　　　　這一點有點細，之因此讓它做爲一大點，是由於不少人和我同樣，一直依賴jQuery提供的ready方法，殊不知道因此然，其實它真的很重要。過往在頁面已經加載完成時調用某方法，是經過設置body標籤的onload時間，可是onload時間須要頁面元素徹底加載完成纔會被調用，可是若是網頁比較大（有大量圖片和多媒體元素），則有可能出現初始化邏輯沒有運行，用戶就開始操做，從而形成體驗方面的問題。

jQuery提供ready的方法可讓開發人員在DOM初始化完成後就開始執行初始化邏輯，從而有效避免這些問題。

 

　　　　固然有時候，咱們須要按照onload事件（當文件加載完成後觸發）來延遲加載內容，從而優化性能。咱們先要看看哪些內容是頁面呈現時所必須首先加載的（好比導航和文章內容），那些內容是能夠稍後加載的（好比動態操做、網頁特效等），經過onload來分割。在頁面中實現的拖放和動畫的JavaScript就能夠在onload事件後加載，由於網頁上拖放元素是在初始化呈現以後才發生的，有些資源甚至能夠在相關時間（點擊事件等）觸發的時候再加載。

 

　　4，提升可讀性

　　要使代碼更加精簡，而且易於維護，可讀性高意味着容易維護。若是簡潔代碼，設計高效率的算法，是我一直不懈追求的目標

 

 -----------------------------------------------------------------------------------------------------------------------------------------------------

 

　　外聯JavaScript和CSS文件

　　　　第三點樣式和第五點動態交互都要注意合理地利用緩存。使用外部的JavaScript和CSS。談到性能問題的時候，不少人都會問一個問題，JavaScript和CSS究竟是要放在外部文件中，仍是應該放在頁面中呢？

　　　　多數狀況，使用外部文件能夠有效提頁面的加載速度，緣由很簡單：外部的JavaScript和CSS文件都能在瀏覽器中產生緩存，同時能夠減小HTML文檔的大小，而若是將JavaScript和CSS代碼內置在HTML中，則每次請求的時候都會隨HTML文檔從新下載。在用戶訪問站點中的多個頁面時，這種方式帶來的性能提升更加顯著，由於同一站點每每使用相同的腳本和樣式表，這些緩存外部文件就會帶來更高程度的體驗提升。

固然，有時候，例如Yahoo！主頁，它在一次對話中擁有較少（可能只有一次）的瀏覽量，內置代碼更加合適，內置JavaScript和CSS對於終端用戶來講會加快響應時間。

把樣式表放在文檔<head/>內部和將腳本放在樣式後面加載會加快網頁加載速度，

 

 -----------------------------------------------------------------------------------------------------------------------------------------------------

 

　　剔除無關通信量

　　　　剔除沒用到的腳本和樣式，一個網站通過長時間維護，站中每每會遺留大量無用的JavaScript和CSS，或者網站上爲了使用某個控件而使用的腳本框架。多餘的腳本和樣式天然會影響站點的性能，這時，使用性能測試工具來分析，好比Page Speed自動檢測頁面上未使用的樣式和腳本，再結合具體狀況進行精簡。

 

 

 -----------------------------------------------------------------------------------------------------------------------------------------------------

 

5.重構

 

　　重構通常理解爲在編程領域中爲了改善代碼的質量而經行的工做。可是，我更想將重構理解爲「改進」，就是在網站最第一版本推行時，認真審度每個組件的設置和樣式，結合用戶反饋的信息（不過是網站上傳後內部交流得出的小意見而已），反覆揣摩那些不足，如何改進，改進到什麼程度？在設計一開始，我爲本身制定一下幾個原則：

 

　　（1）交互更人性化。

　　　　例如，要設計郵件系統，當用戶在收件箱中選擇某一右鍵經行刪除操做時，它不該該像日常那樣彈出警告窗口「你肯定要刪除嗎？」，而是提示「該會話已移至‘已刪除郵件’」，而且提供一個撤銷功能。一方面全部操做都不會被打斷，另外一方面又能預防用戶誤操做時將重要的郵件刪除，提供一我的性化的「撤銷」功能。

 

　　（2）收集好的樣式，吸收好的設計。

一些好的設計裏面可以指引一種模式，體現將來社會潮流，給咱們不錯的提示和啓發。有了參照物，咱們在編寫樣式代碼的時候就更駕輕就熟。一些大公司的交互設計比較有說服力，例如分頁模式，購物車模式和標籤雲模式。

 

　　（3）加多點創意。

　　「補充 」

　　儘管如此，創新不該該無止境、無方向的，創新的目標是什麼？脫離了產品的基本功能、違背可用性的基本原則的創新都是毫無心義的。好比，你想完成一個新創意，這個創意需經過大量的腳本運算實現，而且這段代碼大約是70~80K，這樣的創意是否要實施呢？答案顯然是否認。這樣的創意違背了可用性。腳本過大就目前的網絡情況來看，70~80K的腳本嚴重拖慢網站的加載速度。同時，腳本的運算加劇了瀏覽器的負擔，客戶配置越低，用戶體驗度相應越低。

 

　　　　總結，構建一個網站不管是界面設計，亦或是代碼質量，不可能一步到位，步步成功，須要持續地學習，積累，整理。總結。構建事後，也並不是一勞永逸，怎麼才能讓網站設計更加人性化，代碼更增強健，要靠往後長時間而又高效的維護。

 

 

 

 -----------------------------------------------------------------------------------------------------------------------------------------------------

 

 

 

在我編程進步路上，我前端成長的路上，感謝全部學術指導性網站，感謝我所閱讀過的書刊的做者們，感謝大家的一路陪伴，我會加倍努力，堅持下去，作得更好。

 

　　下集預報，從處女做出發，我對WEB前端的幾段思考（二）——分頁和json數據處理