UI设计注意事项
第一部分: Windows程序UI设计初步
1.背景介绍
UI就是用户界面( user interface ) ,就是人和工具之间的界面。在人和机器的互动过程中,必须经由界面。这个界面实际上是体现在我们生活中的每一个环节的,例如我们开车时候方向盘和仪表盘就是这个界面,看电视的时候遥控器和屏幕就是这个界面,用电脑的时候键盘和显示器就是这个界面,到了使用软件的时候,用户能够通过视觉看到的都是界面。这个界面包括硬件和软件。我们这里讲的UI设计特指Windows操作系统下的软件界面。
用户界面设计有三个基本的原则:a. 置界面于用户的控制之下;b. 减少用户的负担;c. 保持界面的一致性。 从程序设计开发的角度来看,界面设计可以分为结构设计、交互设计、视觉设计三个部分。
结构设计也称概念设计 (Conceptual Design),是界面设计的骨架,通过对用户研究和任务分析,制定出产品的整体架构。基于纸质的的低保真原型(Paper Prototype)可提供用户测试并进行完善。在结构设计中,目录体系的逻辑分类和语词定义是用户易于理解和操作的重要前提。
交互设计是程序的神经,使用户与软件处理部分进行沟通,最终目的是使产品让用户能简单使用。 任何产品功能的实现都是通过人和机器的交互来完成的。因此,人的因素应作为设计的核心被体现出来。
1)有清楚的错误提示。错误操作后,系统提供有针对性的提示。
2)让用户控制界面。“下一步”、“完成”,面对不同层次提供多种选择,给不同层次的用户提供多种可能性。
3)允许兼用鼠标和键盘。同一种功能,同时可以用鼠标和键盘。提供多种可能性。
4)允许工作中断。例如用手机写新短信的时候,收到短信或电话,完成后回来仍能够找到刚才正写的新短信。
5)使用用户的语言,而非技术的语言。
6)提供快速反馈。给用户心理上的暗示,避免用户焦急。
7)方便退出,如手机的退出,是按一个键完全退出,还是一层一层的退出。提供两种可能性。
8)导航功能。随时转移功能,很容易从一个功能跳到另外一个功能。
视觉设计是在结构设计的基础上,参照目标群体的心理模型和任务达成的,是程序的脸面,要达到使用户愉悦的目的,包括色彩、字体、页面等。视觉设计的原则如下:
1)界面清晰明了。允许用户定制界面。
2)减少短期记忆的负担。让计算机帮助记忆,例:User Name,、Password、IE进入界面地址可以让机器记住。
3) 依赖认知而非记忆。如打印图标的记忆、下拉菜单列表中的选择。
4)提供视觉线索。图形符号的视觉的刺激;GUI(图形界面设计):Where, What, Next Step。
5)提供默认(default)、撤销(undo)、恢复(redo)的功能
6)提供界面的快捷方式。
7)尽量使用真实世界的比喻。如:电话、打印机的图标设计,尊重用户以往的使用经验。
8)完善视觉的清晰度。条理清晰;图片、文字的布局和隐喻不要让用户去猜。
9)界面的协调一致。如手机界面按钮排放,左键肯定;右键否定;或按内容摆放。
10)同样功能用同样的图形。
11)色彩与内容。整体软件不超过5个色系,尽量少用红色、绿色。近似的颜色表示近似的意思。
2. UI设计的一些原则。
对于Windows用户来说,用户认识到的就是所看到的。必须看到的现实就是:界面是面向用户的,用户需要的是开发者开发的应用软件满足其需求,并且易于使用。好的用户界面使得用户不用阅读用户手册或接受培训就能使用应用软件。
2.1 交互设计的一些原则:
2.1.2让用户控制界面。"下一步"、"完成",面对不同层次提供多种选择,给不同层次的用户提供多种可能性。让用户知道自己当前的位置,使其做出下一步行动的决定。允许工作中断,方便退出。整个交互过程提供快速反馈。给用户心理上的暗示,避免用户焦急。
2.1.3允许兼用鼠标和键盘等多种输入。同一种功能,提供多种方式。
2.1.4使用非破坏性的缺省按钮。通常每个屏幕定义一个缺省按钮,如果用户按了回车键调用此按钮。问题是有时用户会意外敲击回车键,结果激活了缺省按钮。缺省按钮决不能有潜在的破坏性,如删除或保存(也许用户根本不想保存)。最好的方法是使用组合键来设置按钮,更彻底的方法是去掉默认按钮,这违背了同时支持多种输入的原则,但是在特定的场合是可以考虑的。
2.1.6弹出菜单不应是唯一的功能来源,主要功能菜单不应该被隐藏起来。适当使用上下文相关菜单。根据情况提供鼠标右键的这种菜单,缺少过滥都是不科学的。
2.2视觉设计的一些原则:
2.2.4 提供视觉线索。图形符号的视觉的刺激远远大于文字。尽量使用真实世界的比喻。如:电话、打印机的图标设计,同样功能用同样的图形。加图标的目的是为了使它更醒目,更突出。但是如果不加区分的全加、滥加,反而突出不了重点,都是重点就等于都不是重点。加图标要保持风格一致,不要一个按钮的图标是XP风格的真彩图标,下一个又成了Win95风格的16色图标,到下一个又成了Mac风格的唯美图标,这样一个大杂烩显得极不专业,降低用户的信赖度。
2.2.5色彩与内容。整体软件不超过5个色系,尽量少用红色、绿色。近似的颜色表示近似的意思。颜色使用要适当,得一致,以使整个软件有同样的观感。此外,在不同平台上,色彩的表现不尽人意.在一个系统上看上去很好,在另一个系统上常常看上去很糟,需要考虑软件的运行环境而不是开发环境下闭门造车。颜色的使用要遵循对比原则。确保屏幕的可读性,最好的方法是遵循对比原则:在浅色背景上使用深色文字,在深色背景上使用浅色文字。蓝色文字以白色为背景很容易读,但以红色为背景很难辨认。问题出在蓝色与红色之间没有足够反差,而蓝色与白色之间则反差很大。字体使用要适当。要用那些可读性好的字体,如Times Roman。节俭、有效地使用两、三种字体的屏幕看上去远胜于使用五、六种字体的屏幕。此外,字体的使用要一致,要记住每次改变了字体的大小、风格(粗体、斜体、下划线,……)、样式或颜色,都是在使用不同的字体,就表示了他们的不完全一致。显示一定要考虑用户所使用的输入/输出设备,如触摸设备相对要大些。
3. 用户的操作
对于用户来说,操作越简单越好,程序的使用思路越清晰越好。下面结合环境简单说明一下常用控件该如何合理使用。
3.1对于较长时间的运算:
建议使用进度条(progress bar)比如要进行数据库操作,需要时间长的情况。使用进度条可以让用户有个等待的时间,否则用户不知道你的程序在干什么,用户对于不明不白花费的时间一般容易恼火。设计的时候,对自己的操作运算时间进行估算,确定是否需要使用。如果只有5秒钟,用户一般是可以忍受的,加入进度条反而会产生画蛇添足的效果。
在使用进度条的同时,可以配合使用状态栏。StatusBar经常被放置在窗体的下面,建议使用dock。可以在状态栏中提供多个面板(pane)来提供不同的信息。 状态栏中,通常都会有一个面板来提示程序运行的信息,例如显示进度,时间等。需要扩展的话,需要owerndrawn属性支持。可以添加按钮等,如取消。一般,在长时间的后台运算开始时,在状态栏中设置开始的状态信息,在计算结束之后,清除状态信息或将状态信息设置为停止状态,在后台运行期间通过状态栏来显示必要的错误信息,提示用户当前的状态。比如,进行一个计算时,开始显示:正在计算,请耐心等待。当运算结束时显示:可以结束,正确退出。
等待指针的使用,在进行计算的时候,尤其在很难计算出这些操作的进度的情况下,设置前台鼠标指针为wait cursor是对用户一个很好的提示。如果有些操作必须是阻塞的,这时需要使用等待指针(wait cursor)也是对用户很好的交代。同样,光标的形状是非常灵活的,合理的使用能够给用户恰当的提示。
总之,使用上面的控件,能通过可视化的方式通知用户有一些程序正在执行过程中,可能需要等待一定的时间。
在程序中合理使用try…finally语句可以达到很好的效果。保证无论遇到什么情况,是正常也还,是异常也好,反正最后都会执行到finally。
3.2操作开始之后,在适当的时候提供必要的程序开关。
用户应当能够通过界面操作取消或终止较长时间的运算。不管你在做什么,都要给用户一个机会,因为用户是程序的使用着。当然,不能让用户,任何时间都可以插手程序的操作,比方,一个数据保存的界面,保存,关闭,取消三个按钮,当正在保存数据的时候,如果强行关闭的话,会导致数据的异常,在这种情况下就需要适当的启用,禁用控件。对于该界面来说,“保存”点击后,禁用“关闭按钮”。在保存处理完毕后,再启用“保存按钮”。
3.3适时合理禁用一些菜单
通过可视化的方式提示用户在运行某些程序的时候某些功能是被禁用的,程序结束后,重新启用一些被禁止的菜单和控件,并通过适当的方式提示用户操作已完成。同时,适当的启用禁用菜单可以使用户更清晰的理解应用程序的工作流程,理解应用程序执行的逻辑。比如用户,一般先要看你界面上什么功能可以使用,什么需要达到一定的前提才能使用。在执行某功能的时候,通过禁用启用,可以知道这个不能执行。当执行完毕后,用户发现,哦,那个按钮亮了,可以执行了。
3.4验证用户的输入,使用validation control。
避免因为用户的失误,导致程序的失败,意外。使用界面友好的MessageBox,注意要在提示对话框中使用适当的按钮和图标,它的重载比较多,根据具体的情况选择不同的图标和按钮。比方说,如果用户强行退出,可以弹出警告,这个时候就应该告诫用户可能产生的不良后果。
3.6使用适当的控件
使用TreeView控件来显示有层次的数据,使用ListView来显示一组具有多个列的数据,使用DataGrid控件可以让用户改变每一个单元格中的数据,使用TabControl可以将窗体中的控件按照使用逻辑进行分类,根据具体的需要开发复合控件,扩展控件,自定义控件。
3.7 合理使用Splitters Docking与Anchoring属性
当窗体放大时,你的窗体上的各种元素是否能够按照比例放大,并且填充区域呢。
用Splitter控件来分离用户区域,使用Dock属性的Fill选项使控件能够填充屏幕的一部分,设置Anchor可以在窗口大小变化时,保证窗体中的控件与窗体的相对位置不发生变化。通过设置
3.8不同分辨率下显示效果的自动调整。
考虑到用户的使用环境,程序在高分辨率下,字体,图片,显示需要随着分辨率自动调整,以满足用户的视觉效果。
3.9通过使用Common Dialog可以让用户通过熟悉的界面来实行标准的操作
ColorDialog,FontDialog,OpenFileDialog等等
3.10对于较长时间的操作,不要阻塞主线程,也就是UI线程
如果时间长的话,建议使用多线程。可以使用ThreadPool.QueueUserWorkItem()来进行异步调用。在该类中,管理线程,QueueUserWorkItem:将方法变成代理,将代理交给QueueUserWorkItem,如果没有其他线程,则立即计算,否则需要等待,给用户提供 取消/停止 的功能。从其它线程中更新用户界面中的控件,需要使用BeginInvoke和delegate。Hook,当前线程中调用的方法,获得另外线程中的方法,在另外的线程中操作。不是用来创建线程,只是让线程去执行想执行的方法。代理 函数指针的封装,自己作为对象 在程序中传递,实现callback机制。在NF2中,使用辅助线程Backgroundworker
3.11关闭确认原则。关闭需要激活原则,使权限不够的用户不能关闭程序。对实时软件尤其重要。
TAG:
相信现在比明天好,今年比明年好!
标题搜索
日历
|
|||||||||
日 | 一 | 二 | 三 | 四 | 五 | 六 | |||
1 | |||||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 | |||
9 | 10 | 11 | 12 | 13 | 14 | 15 | |||
16 | 17 | 18 | 19 | 20 | 21 | 22 | |||
23 | 24 | 25 | 26 | 27 | 28 | 29 | |||
30 |
我的存档
数据统计
- 访问量: 2198
- 日志数: 3
- 建立时间: 2008-05-08
- 更新时间: 2013-11-25