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