web界面设计基本原则(转)

学习链接地:http://www.php100.com/html/webkaifa/DIV_CSS/2012/1010/11210.html


平时大多数做的是公司内部网站的功能设计工作,逻辑和规则是主要的考虑点,对易用性考虑欠缺。真正设计给客户使用时才发现对web界面设计的基本原则没有及时的学习和总结。从网上搜索了一些相应的原则,在此与大家分享一下。

web界面设计应遵循的基本准则有以下几点:显示信息一致性的原则;以用户为主导原则;易用性原则;鼠标与键盘一致性原则;系统响应时间原则;出错信息和警告原则;信息显示原则;数据输入原则;合理性原则;美观与协调性原则

(1)显示一致性原则:

主要是指控件使用,提示信息措辞,颜色、窗口布局风格,遵循统一的标准。

好处:用户使用起来能够建立起精确的心里模型,使用熟练了一个系统界面后,切换到另外一个系统界面能够很轻松的推测出各种功能,降低培训成本。给用户统一感觉,不混乱。

(2)以用户我主导原则:

根据用户的工作流程设计操作流程,符合用户使用习惯。

PS:现在有时根本不了解用户,只是根据“我以为”的去设计。

(3)易用性原则:

完成相同或相近功能的按钮用Frame框起来,常用按钮要支持快捷方式。

完成同一功能或任务的元素放在集中位置,减少鼠标移动的距离。

按功能将界面划分局域块,用Frame框括起来,并要有功能说明或标题。

界面要支持键盘自动浏览按钮功能,即按Tab键的自动切换功能。界面上首先应输入的和重要信息的控件在Tab顺序中应当靠前,位置也应放在窗口上较醒目的位置。

同一界面上的控件数最好不要超过10个,多于10个时可以考虑使用分页界面显示。分页界面要支持在页面间的快捷切换,常用组合快捷键Ctrl+Tab。

默认按钮要支持Enter操作,即按Enter后自动执行默认按钮对应操作。如表单的保存、提交按钮。

可写控件要能自动获得焦点并检测到非法输入后应给出相应提示,提示尽量简洁明了。

复选框和选项框按选择几率的高底而先后排列。

专业性强的软件要使用相关的专业术语,通用性界面则提倡使用通用性词眼。

④鼠标与键盘一致性原则

尽量遵循可不用鼠标的原则:应用中的功能只用键盘也应当可以完成。但是,许多鼠标的操作,如双击、拖动对象等,并不能简单地用键盘来模拟即可实现,此类操作可适当增加操作按钮。

PS:个人觉得此项原则根据应用的用户人群需求省略。对大家都熟悉的功能可以适当增加一些快捷键操作。

⑤系统响应时间原则

系统响应时间应该适中,响应时间过长,用户就会感到不安和沮丧,而响应时间过快也会影响到用户的操作节奏,并可能导致错误。因此在系统响应时间上坚持如下原则:

0-5秒鼠标显示成为沙漏;

5秒以上显示处理窗口,或显示进度条;

一个长时间的处理完成时应给予完成警告信息。

PS:不知这个时间段划分是否合理。个人感觉某些需要长时间处理的任务可以给用户提示并转到后台执行,在页面上显示进度,当执行结束后给出提示。这样避免用户一直等待该响应,浪费时间。

⑥出错信息和警告原则

出错信息和警告是指出现问题时系统给出的坏消息,对于出错信息和警告应该遵循以下原则:

信息以用户可以理解的术语描述;信息简明扼要,指出出错原因并提供解决办法提示。

PS:发现过一些提示不明确的情况,比如某批未及时处理被强制,弹出的提示没有指明批号等,需要用户根据业务规则自己排查。

⑦信息显示原则

信息显示遵循以下原则:

只显示与当前用户语境环境有关的信息;

不要用数据将用户包围,使用便于用户迅速吸取信息的方式表现信息;

使用一致的标记、标准缩写和颜色,显示信息的含义应该非常明确,用户不必再参考其它信息源;

产生有意义的出错信息;

使用窗口分隔控件分隔不同类型的信息;

高效地使用显示器的显示空间,但要避免空间过于拥挤。

⑧数据输入原则

数据输入遵循以下原则:

尽量减少用户输入动作的数量;

维护信息显示和数据输入的一致性;

交互应该是灵活的,对键盘和鼠标输入的灵活性提供支持;

在当前动作的语境中使不合适的命令不起作用;

让用户控制交互流,用户可以跳过不必要的动作、改变所需动作的顺序

(如果允许的话)以及在不退出系统的情况下从错误状态中恢复;

为所有输入的动作提供帮助;

消除冗余输入。可能的话提供默认值、绝不要让用户提供程序中可以自

动获取或计算出来的信息。

⑨合理性原则

屏幕对角线相交的位置是用户直视的地方,正上方四分之一处为易吸引

用户注意力的位置,在放置窗体时要注意利用这两个位置。

⑩美观与协调性原则

界面应该大小适合美学观点,感觉协调舒适,能在有效的范围内吸引用户的注意力。

长宽接近黄金点比例,切忌长宽比例失调、或宽度超过长度。

布局要合理,不宜过于密集,也不能过于空旷,合理的利用空间。

按钮大小基本相近,忌用太长的名称,免得占用过多的界面位置。

按钮的大小要与界面的大小和空间要协调。

避免空旷的界面上放置很大的按钮。

放置完控件后界面不应有很大的空缺位置。

字体的大小要与界面的大小比例协调, 通常使用的字体中宋体9-12较为美观,很少使用超过12号的字体。

前景与背景色搭配合理协调,反差不宜太大。常用色考虑使用Windows界面色调。

如果使用其他颜色,主色要柔和,具有亲和力,坚决杜绝刺目的颜色。

大型系统常用的主色有“#E1E1E1”、“#EFEFEF”、“#C0C0C0”等。

#E1E1E1
#EFEFEF
#C0C0C0

界面风格要保持一致,字的大小、颜色、字体要相同,除非是需要艺术处理或有特殊要求的地方。

如果窗体支持最小化和最大化或放大时,窗体上的控件也要随着窗体而缩放;切忌只放大窗体而忽略控件的缩放。

通常父窗体支持缩放时,子窗体没有必要缩放。

如果能给用户提供自定义界面风格则更好,由用户自己选择颜色、字体等。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,047评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,807评论 3 386
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,501评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,839评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,951评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,117评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,188评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,929评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,372评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,679评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,837评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,536评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,168评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,886评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,129评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,665评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,739评论 2 351

推荐阅读更多精彩内容

  • 1、窗体 1、常用属性 (1)Name属性:用来获取或设置窗体的名称,在应用程序中可通过Name属性来引用窗体。 ...
    Moment__格调阅读 4,531评论 0 11
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,889评论 25 707
  • 《裕语言》速成开发手册3.0 官方用户交流:iApp开发交流(1) 239547050iApp开发交流(2) 10...
    叶染柒丶阅读 26,348评论 5 19
  • 界面是软件与用户交互的最直接的层,界面的好坏决定用户对软件的第一印象。而且设计良好的界面能够引导用户自己完成...
    A梦想才让心跳存在阅读 1,038评论 0 4
  • 人生七十古来稀,不现世事见沧桑。 多少春秋多少梦,只是弹指一挥间。 花前月下金樽酒,似是而非古人欢。 请君细思眼前...
    梦江瑶阅读 254评论 0 4