对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數據處理
?
?
轉載于:https://www.cnblogs.com/0603ljx/p/3580256.html
總結
以上是生活随笔為你收集整理的对WEB前端的几段思考(一)——界面设计和性能优化(整理中)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: centoros 环境安装
- 下一篇: 大家帮帮忙,有没有当过网络写手的天涯er