草監網路已從Blogger搬離至獨立網站https://gratch.tw/ ，將於3秒後自動跳轉
今天要介紹的就是透過CSS搭配icon圖示所作的84個按鈕，有別於一般圖片式按鈕，這84個按鈕是採用純文字方式來製作，所以在按鈕選單上的修改就非常的方便，進來年隨著搜尋引擎的發展，許多網頁設計製作技巧也越來越多，並且隨著使用者研究日益重要，網頁設計也越來越趨向簡潔、單純，並強調可重複利用性的重要，將整個製作流程精簡，越來越趨向SOP，而一切常用的連結選像也開始有一個趨向統一化的icon設計，比方說看到首頁（Home）就會畫一間屋子，看到地圖（Map）就會出現Google map的地標，像這樣的東西在GUI中可是占有非常重要的地位，因為這是最容易被看到的細節。
何謂GUI？GUI是Graphical User Interface的簡稱，中文通常就直接翻譯為圖形用戶界面，一般通常會說是界面設計、用戶界面設計。這樣的設計通常用在系統、面板、軟體、網頁中，今天所提的Pure CSS GUI icons就是網頁或網路系統可以使用的GUI icon。
Pure CSS GUI icons是由Nicolas Gallagher這位設計顧問所製作的，Nicolas Gallagher是一位英國前端設計師也是一位親和力顧問，什麼是親和力？就讓你的產品更容易讓人接受與使用，就像萬人迷一樣的受歡迎，也就說Nicolas Gallagher不光是一位設計師還是深深瞭解使用者的易用性專家，既然這位英國專家也提出這種純CSS製作的選單，就知道這樣的設計方式在未來會越來越普遍，畢竟不光是Nicolas Gallagher所提出的Pure CSS GUI icons，就連jQueryUI也有這樣的設計，所以如果你在設計網站的過程中還是時常用圖片來製作選單，也許你該思考一下為什麼國外的設計師都漸漸趨向不使用圖片的原因。
Pure CSS GUI icons簡單分成三類：使用者互動、其他雜項、媒體播放，透過這三類的內容，可以推測目前網站所需的常用元素分別為哪些，當然不同類型的網站也會有不同的配套，就Nicolas Gallagher的經驗他整理出了84個（jQueryUI有173個），如果說你的網站想要擁有基本的親和力卻不知道如何下手，我想，這84個icon按鈕就是一個快速的入門喔！
留言
張貼留言