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模板风格