web界面注意问题

/Web界面设计注意事项以下讨论内容，是基于web应用类的界面，如网站界面，后台管理界面等。讨论内容是指一般界面，特殊的如个性化博客，非主流空间不在讨论之列。总体布局模板采用12/16/24格栏栅模板进行编辑。（注：该类模板有12格，16格，24格三种）下图12格模型该模板的原理是把界面等分切成12格，每个红色区域是60px，间隔是10px。所以，一个单位的内容框的长度就可以是60px，120px……。如果页面有3个内容框，则每个占4个区域，240px。好处：界面比例合理，美观，整齐，对于css编写方便。我是寂寞分割线start许多网站都采用这种布局模式:阿里巴巴（该网站采用24格模式，与12格原理一样）迅雷用户中心我是寂寞分割线end2背景：一般采用白色做背景。界面顶部可以采用线图案加以修饰，但颜色不宜过多。3目的：整齐，美观，区域划分明显，信息容易获取。局部1设计思路--时刻站在用户的角度思考布局。要明白，做出来的界面是用别人使用的，用户不一定明白我们的设计思路。所以要在细节上，要站在用户的角度，以用户为中心设计界面，而不是以自我感觉（我觉得是）去设计界面在制作的过程中，要注意：对不同元素的区分是否明显，对用户的引导是否足够，是否能突出重点内容：是否能减少不必要的文字干扰，按钮干扰，背景干扰等影响息的获取。模拟用户的操作过程。当你安排一个按钮，要设想，用户可能会这么操作，会不会和我的设想有出入？我的按钮安排在这里，用户容不容易找到等等一系列问题。2标准化规定（1）颜色类型，勾选只有web颜色图层/组命名：图层组的名字尽量能体现图层内容，用图层组来“合并图层”。一方面方便自己查找，修改，一方面方便别人修改。切忌用图层1，图层2，图层组1，图层组2此类命名！重点的图层还可以用图层颜色加以区分字体。一般网站的正文，标题显示都是12号。栏目标题可能是14号+加粗，都是宋体一般红色区域都是设置为无。当字体都16号以上时，会出现锯齿。例如：左边为“无”，右边为“浑厚”左边的字型较为清晰，右边相对模糊具体操作技巧1颜色搭配技巧：选用同一种颜色，使用其不同透明度。我是寂寞分割线start例如：背景为颜色#cccc，透明度10%边框为颜色#cccc透明度20%效果图：***降低透明度一方面边框颜色不会太刺眼并且便于调整颜色，而且开始选择颜色的时候可以很快。选用同一种颜色，可以增加整体感，不会突兀***我是寂寞分割线end建议：有文本的内容框底色为白色，内容框的标题栏颜色与边框最好保持一致。我是寂寞分割线start例如腾讯迅雷：我是寂寞分割线end2白色画笔的使用很多界面的标题栏\按钮都用了渐变，而且是很浅的渐变，透明度都很低。如果用混合选则难以控制渐变。这时使用白色画笔十分方便。思路：用画笔画白色区域，遮住底图的颜色，再调整底图的透明度，白色区域的透明度，边框的透明度。我是寂寞分割线star例如：步骤A.先画出底图，再选择底图（A）的选区，再激活新的图层（B），再用画笔在新图层（B）画出白色部分。这样子，画笔画的区域不会超过底图A的选区。B.画笔的透明度降低一些，可以有羽化的效果C.在用画笔时，按住shift键，可以以直线绘画。D.调低底图灰色的的透明度，再加个边框。边框的颜色与底图都是一样的灰色。底图是30%透明度，边框是50%透明度。效果如下***很多有质感的背景，按钮都是用了浅浅的渐变，都可以用画笔画出。***我是寂寞分割线end3减少冗余信息的干扰。（1）通过过比颜色的对比，大小的对比，能很快的引导用户的目光，突出重点。我是寂寞分割线star例如大标题：家用电器用了14号加粗宋体二级标题：大家电则用正常的12号黑色宋体三级标题：洗衣机，平板电脑用了12号灰色字体。这样，3者的层次关系非常明显。如果3个级别的标题都采用了12号黑色，则显得凌乱，没有重点，没有层次感又如：***这样就突出了1，2，3，4这些数字***对比下***哪一种的信息量更明显？更容易获取信息？更好减少冗余信息干扰***又如“来自豆瓣猜”作为次要信息量，用灰色，减少干扰。“神探”作为最重要信息量，用蓝色与“电影，刘青云/香港”形成对比我是寂寞分割线end用色块区分信息量用于信息量较多的文本框内，但，颜色不能太深，应以低透明度为准。我是寂寞分割线start比较下列2种不同的排列***二者都存在信息量过多，没有视觉突出的毛病。***但第2个用蓝色色块做底图来区分不同的“行”。对于区分每行信息，还有有好处的。再如***有加粗的对比，有颜色的区分。***Ps：稍显不足的是文字不够对齐我是寂寞分割线end（3）利用浅灰色实线，虚线。在区分不同类型的文字，或者是文字跟按钮之间，可以用实线或虚线。要点：颜色为低透明度的灰色，减少对文字等内容的视觉干扰实线或虚线可以不需要延长到外边框我是寂寞分割线start如：***用灰色线条区分不同的选项，而且线条左右两边并跟外边框有一定的间隔***又如***用虚线来给眼睛“休息”，相当句子中的逗号，使信息量有层次感。***又如：我是寂寞分割线end分割线start总而言之，平时多看，多留意其他网站在颜色，信息分类，布局方面。谨记一条原则：一切以用户为中心