PhpWind教程:PHPWind V7.5 圖標規范及使用說明_PhpWind教程

視覺的作用   

        當用戶下載PHPWind程序安裝使用時，其實需要更改的圖標并不多，但一些比較重要的圖標icon卻起著極其關鍵的作用。    而我們發現，大多數站長朋友們并不能正確的使用圖標，使得論壇看上去總覺得有些地方特別的礙眼。    現在的圖標設計并不是單單讓眼睛可以享受到視覺盛宴，我們所希望帶給大家的是一種依附在視覺基礎上的情感設計。而對于情感設計，大多數人可能聽上去很神秘，而其實就是大家可能經常聽到的什么紅色表示快樂、熱情。這就是情感設計，因為它能給人情緒熱烈、飽滿，激發愛的這么一種情感。我想現在大家都不難理解為什么PHPWind一直使用以藍色為基準的色彩搭配，因為藍色能給人安靜、涼爽、舒適之感，使人的心胸開朗。 

 
圖標的使用 

        在PHPWind程序中，你不必使用多么華麗的圖片圖標去裝飾你的論壇，而相對精準的圖標細膩的搭配才是目前的站點們所欠缺的。何以“精準”？其實就是控制圖標的大小尺寸，顏色純度飽和，透明或者不透明...這些都是至關重要的。眾所周知，PHPWind做為通用型軟件，且為了保證其運行效率帶給大家飛一般的速度，不得不在圖標的尺寸和顏色上下功夫，且存在的圖標，大多時候都不止用于一個地方，控制大小的一個原因是考慮運行效率，另外一個就是為了在其它你不熟知的地方突然出現這個圖標的時候不至于過大或者過小而尷尬，而對于這些，我們PHPWind在制作圖標的時候，都是精確到像素級的。

圖標文件夾分類說明

本圖采用Google Doc制作

像素圖標說明

常用圖標說明

提示圖標

1.1 基礎信息 
      3種尺寸的圖標(32x32,24x24,16x16)以適應各種環境

 
1.2 設計理念 

       以三種鮮亮的色彩來詮釋圖標的含義，取自生活中紅綠燈的想法，沿用它的設計理想的好處是不需

         去習慣它而可以直接從潛意識里貫徹用戶對這三種顏色的理解。

1.3 樣式規范           

       分別以藍，紅，黃作為色彩基準           

       光源位于icon的左上角，同時有環繞光照亮icon的其它部分。           

       使用一定的漸變效果，使icon的外觀更加豐滿。
 
2 帖子閱讀頁圖標

 
2.1 尺寸
     16x16

2.2 設計理念
      延續傳統設計理念進行加工。

2.3 樣式規范
      以橙黃作為主要色彩
      使用不同的角度和透視增加圖標活力
      光源位于icon的左上角，同時有環繞光照亮icon的其它部分。
      添加輪廓是圖像清晰
      使用一定的漸變效果，使icon的外觀更加豐滿。

2.4 交互設計
    鼠標做觸碰動作時完成圖形切換的交互過程。
 
3 帖子類型圖標規范

3.2 設計理念

      參考現實生活中的物件進行創作 

3.3 樣式規范    

      分別以藍，黃，綠作為色彩基準    

      光源位于icon的左上角，同時有環繞光照亮icon的其它部分。  

      添加輪廓是圖像清晰    

      參考日常對象創作圖標。    

      使用一定的漸變效果，使icon的外觀更加豐滿。

4.圈子圖標

    圈子里的圖標數量不多,主要分為側欄的24x24的應用圖標和16x16的像素級圖標。

 
    24x24的圖標的應用范圍只有側欄導航和頁頭標題旁,一般如果要更換只要控制其大小在這個范圍即可,文字的行距為36px。

    而16x16的應用圖標和其他一些例如加好友發郵件的小圖標的應用范圍卻是跨系統的,所以這些圖標的尺寸一定得嚴格控制好,比如名片系統(論壇,圈子).

3.1 尺寸    16x16

查看更多 PhpWind教程  PhpWind模板風格