web界面注意问题.doc

《web界面注意问题.doc》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、Web界面设计注意事项以下讨论容，是基于web应用类的界面，如界面，后台管理界面等。讨论容是指一般界面，特殊的如个性化博客，非主流空间不在讨论之列。-----------------------------总体布局----------------------------------1.模板采用12/16/24格栏栅模板进行编辑。（注：该类模板有12格，16格，24格三种）下图12格模型该模板的原理是把界面等分切成12格，每个红色区域是60px，间隔是10px。所以，一个单位的容框的长度就可以是60px，120px……。如果页面有3个容框，则每个占4个区域，24

2、0px。好处：界面比例合理，美观，整齐，对于css编写方便。--------------------------------------我是寂寞分割线start-----------------------------------------------------许多都采用这种布局模式:阿里巴巴（该采用24格模式，与12格原理一样）迅雷用户中心--------------------------------------我是寂寞分割线end-----------------------------------------------------2背景：一般采用

3、白色做背景。界面顶部可以采用线图案加以修饰，但颜色不宜过多。3目的：整齐，美观，区域划分明显，信息容易获取。-----------------------------------局部------------------------------------------1设计思路--时刻站在用户的角度思考布局。要明白，做出来的界面是用别人使用的，用户不一定明白我们的设计思路。所以要在细节上，要站在用户的角度，以用户为中心设计界面，而不是以自我感觉（我觉得是）去设计界面在制作的过程中，要注意：（1）对不同元素的区分是否明显，对用户的引导是否足够，（2）是否能突出重点

4、容：是否能减少不必要的文字干扰，按钮干扰，背景干扰等影响息的获取。（3）模拟用户的操作过程。当你安排一个按钮，要设想，用户可能会这么操作，会不会和我的设想有出入？我的按钮安排在这里，用户容不容易找到等等一系列问题。2标准化规定（1）颜色类型，勾选只有web颜色（2）图层/组命名：图层组的名字尽量能体现图层容，用图层组来“合并图层”。一方面方便自己查找，修改，一方面方便别人修改。切忌用图层1，图层2，图层组1，图层组2此类命名！重点的图层还可以用图层颜色加以区分（2）字体。一般的正文，标题显示都是12号。栏目标题可能是14号+加粗，都是宋体一般红色区域都是设置为

5、无。当字体都16号以上时，会出现锯齿。例如：左边为“无”，右边为“浑厚”左边的字型较为清晰，右边相对模糊--------------------------------具体操作技巧---------------------------------1颜色搭配技巧：选用同一种颜色，使用其不同透明度。--------------------------------------我是寂寞分割线start-----------------------------------------------------例如：背景为颜色#cccc，透明度10%边框为颜色#cccc透明

6、度20%效果图：***降低透明度一方面边框颜色不会太刺眼并且便于调整颜色，而且开始选择颜色的时候可以很快。选用同一种颜色，可以增加整体感，不会突兀***--------------------------------------我是寂寞分割线end-----------------------------------------------------建议：有文本的容框底色为白色，容框的标题栏颜色与边框最好保持一致。--------------------------------------我是寂寞分割线start-----------------------

7、------------------------------例如腾讯迅雷：--------------------------------------我是寂寞分割线end-----------------------------------------------------2白色画笔的使用很多界面的标题栏按钮都用了渐变，而且是很浅的渐变，透明度都很低。如果用混合选则难以控制渐变。这时使用白色画笔十分方便。思路：用画笔画白色区域，遮住底图的颜色，再调整底图的透明度，白色区域的透明度，边框的透明度。-------------------------------

8、-------我是寂寞分割线star-