網(wǎng)站設計中，Web Style Guide（設計規(guī)范）應該包含哪些內(nèi)容，有哪些不錯的范例？

時間：2024-02-10 01:40:01 | 來源：網(wǎng)站運營

時間：2024-02-10 01:40:01 來源：網(wǎng)站運營

網(wǎng)站設計中，Web Style Guide（設計規(guī)范）應該包含哪些內(nèi)容，有哪些不錯的范例？：下面的是我自己根據(jù)自己的設計經(jīng)驗的愚見哦，希望能多多交流?？赡苡姓f漏的，難免，呵呵～～稍微舉了一些小例子，大眾化的例子，容易看到的例子，不一一解說咯，根據(jù)大框架去搜索即可了解相關知識，呵呵。說重點。。開始，另外，那些規(guī)范都是按小類來加序號的，細化了，呵呵。。


網(wǎng)站設計中，Web Style Guide（設計規(guī)范）應該包含哪些內(nèi)容，有哪些不錯的范例？自己對這個方面做了一個摸索整合，因為一個規(guī)范關系到細節(jié)的一切和態(tài)度的一切，所以基本是很重要的，學習精神也相當重要。


可能有說漏的，難免，呵呵～～


1.HTML代碼規(guī)范：
符合國際標準的W3C規(guī)范，比如title,meta標簽的書寫，引號，標簽的閉合等等書寫技巧


2.CSS樣式文件：
比如如何在不同瀏覽器，不同兼容性的情況下調(diào)用不同的css文件，css代碼編寫時注釋的寫法，hack的識別規(guī)范等等，還有別忘了樣式的英文命名規(guī)范，讓開發(fā)者和設計者易懂，便于團隊協(xié)作。


3.文件命名和網(wǎng)站結構：
比如網(wǎng)頁文件后綴的書寫，文件命名，怎惡魔去影響瀏覽者等等。網(wǎng)站結構包含網(wǎng)站上線后的內(nèi)部關系結構和開發(fā)時的目錄結構，也關系到SEO，開發(fā)者的使用便利性。
再比如文件夾的使用等等


4.網(wǎng)頁框架尺寸規(guī)范：
比如一般標準設計按照980px~1000px這類的寬度去設計，再在這寬度擴展成寬屏效果，這樣兼容各種分辨率，滿足不同的用戶瀏覽視覺需求。


5.頁面內(nèi)部設計的用戶體驗規(guī)范：
比如字體使用，字體大小，按鈕設計，留白，主視覺banner大小，LOGO大小等等，都是需要設計者發(fā)揮心思的地方。


6.代碼編寫規(guī)范：
比如什么時候用表格，什么時候用div+css.什么時候用HTML5的語義標簽，總之，即讓搜索引擎易識別，又讓用戶能易懂，加強協(xié)作精神。


7.圖片文件使用規(guī)范：
根據(jù)設計需求，png,gif,jpg圖片要合理使用，在透明度和網(wǎng)站視覺效果上稍有選擇


8.網(wǎng)頁文件運行速度：
比如調(diào)用的js，代碼結構，網(wǎng)頁文件的大小，都要合理，這樣就不會影響瀏覽者的體驗叻。盡量快


9.色彩搭配：
好的頁面，都有一個"系統(tǒng)色彩"，什么色彩反應什么心情，色彩是一門很難的學問，也是對網(wǎng)頁至關重要的一門標準，具體多學點美術知識，哈哈。


10.多媒體使用規(guī)范
針對特別需求的網(wǎng)站，多媒體也極大影響了網(wǎng)站的性能，是否用flash，是否用HTML5直接誒渲染，是否用js？？這些，都是設計者要考慮的規(guī)范化問題。


11.布局規(guī)范
這個范圍太廣了，大致要主題頭部，主題，頁腳，主視覺，欄目位置等等的編排，布局有多種，也可以突破傳統(tǒng)布局，但是再個性的布局，它都有一個基礎規(guī)范，怎樣讓用戶易識別，易操作等等。


12.草圖方案
任何有思想的設計出爐之前，都有一段耐人尋味的過程，沒錯，這就是草稿。草稿是一個流程，相當重要的流程，它決定了一個頁面的基調(diào)（色彩方案、布局、風格、內(nèi)涵等），當然可以大肆優(yōu)化草圖/素描稿，可以專門做成項目組成元素，這是成功的起點。


13.情感傳達
不論你是為自己還是為別人做設計，我覺得都需要傳達一個設計的情感和內(nèi)心的思想。有抱怨，有成就，有責任，有想法。設計是否是自己苦心磨練的，是否是抱著自己的良心去思考的，這就是一個情感融合，一個優(yōu)秀的網(wǎng)頁設計，應當無形中融入和基本的情感，這也是一個規(guī)范。誰都不想自己做的東西打水漂，或者對不起自己花的時間和精力，對吧？


——————————————————————

補充，這是我以前的一套非常完整的和web設計規(guī)范有關的視頻公開課，對于一些理論和實際操作都做了比較詳細的歸納總結和演示，或許看了會有幫助，感興趣可以直接看一下。

麥子學院限制需要注冊才能全部看完，不過是免費的公開課，所以可以全部看。

WEB UI(網(wǎng)頁界面設計)基礎+進階免費視頻公開課2016完整版