盡管我并非藝術出生，既沒有任何設計基礎，又沒有較高藝術涵養，也深諳在短時間內創造一定藝術造詣并非易事，但是既然當初選擇從事網站前端開發，我的目光不能僅停留在前端代碼上。作為一名志向在前端領域發展的人員，能夠創作出協調和諧的界面，和熟悉前后臺交互一樣重要。

?

　　為控制成本，在網站素材（婚紗攝影圖片和網站文字）未準備好時，網站上都是些測試數據，不堪入目。因此我的處女作暫且還沒投入使用，實為一大遺憾。在網站投入使用之后，必定附上網址，讓大家一睹為快。

?

一，色彩的聯想

?

　　每種色彩帶給用戶不同的心理感受，因此，在設計頁面時，絕對不能忽視每一種顏色帶給客戶的信息。主調色的選取，直接影響網站設計的整體風格。更重要的一點，色彩是向外界傳遞品牌識別的一個重要元素，大公司一直以來都堅持使用相同的色彩，例如銀白色的蘋果和綠色的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數據處理

?

?

轉載于:https://www.cnblogs.com/0603ljx/p/3580256.html

總結

以上是生活随笔為你收集整理的对WEB前端的几段思考（一）——界面设计和性能优化（整理中）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。