用户体验已经成为衡量应用软件质量的重要标准。在过去我们可能会惊叹于某个Web应用的华丽界面,现在,随着HTML5的强势登场,各类表现层技术及开发框架的发布,Web与窗体应用的界限正在被逐渐模糊。虽然技术已经焕然一新,但很多开发人员并不是专业的信息架构师,可能还在使用传统的、平凡的UI设计风格。富应用已成定局,过去难以实现的效果在今天看来已如此简单。本文旨在通过借鉴Web界面设计经验,来探寻系统UI设计的最佳实践。
一指导原则概述
二UI设计流程
第一步:理解需求并了解我们的用户
了解系统中的角色,以及他们之间的关系。在设计UI前,我们应该知道这些角色能够做什么,期望做些什么以及不能做些什么。我们要了解这些角色的主要任务,并深入研究他们的工作习惯、知识层次以及他们理想中的软件应该是什么样子。与这些代表不同角色的关键用户交谈,为他们每一个人编写一个场景来描述他们理想中的最佳体验是个不错的方法。作为设计者来说,我们必须清楚用户的习惯。在某些行业,可能从业者所希望的界面风格是常人无法理解的,但对于该角色确实是可行的。这些信息,如果不与用户面对面的沟通,恐怕很难从文档中获取。
一般步骤如下:
What用户要做什么?用户的期望是什么?
Why用户的目标什么?用户为什么有这样的想法?
Where用户处在何种场景活应用环境中使用系统?
Who谁在使用这一系统?他们有什么差异?他们的习惯有何不同?
How用户的业务流程是什么样的?系统如何帮助用户完成任务?
第二步:定义功能,划分模块
进入这一阶段表示需求已经被分析并定义。UI设计者应该确认以下事项是否已经清晰:
如果上述问题还存有疑问,那么就应该停下来把前期工作做好。
第三步:设计全局导航与局部导航
导航与标识的设计体现了设计者对复杂事物的组织能力。导航与标识往往密不可分,很多时候导航就在充当标识。标识如同系统中的地标,帮助用户了解:他们身在何处,他们的目的地在哪,以及他们如何完成操做等。在大型系统中,标识帮助用户不会迷失。导航则帮助用户迅速达到目的地。
有3类导航,分别为:
导航有2类模式,分别为:
“用例图”和“系统结构图”都能反映出系统的功能结构。但是,它们都无法反映出用户如何使用系统。“路径图”反映了用户如何使用系统,包含了业务逻辑,以及各功能模块之间的调用关系和数据流向。“路径图”显示了用户完成任务,需要在系统中行走的路径,就如同地图一样,反映出不同功能的复杂程度。
确定导航栏的位置放在顶部可以增加内容区域的面积,但是导航条目过多时,一行就放不下了。放在左侧,可以增加导航栏的面积,可以放入比横行更多的按钮,但是会减少内容区域的面积。两者给有所长。需要根据需要选取。
设计导航树设计导航树要考虑两个问题。第一,导航树要适合进行权限控制。第二,导航树的层次要便于用户使用,一般常用功能的排列靠前,还有考虑树的深度,太深了会增加用户的记忆负担。
首先,要确定局部导航的形式,可能的形式包括:包括在Logo中添加链接,在数据查询结果集中添加链接,“面包屑”等。
然后,确定局部导航的规模,局部导航过多会使系统路径相对复杂,增大开发工作量。因此,应该压低局部导航的数量,力争做到简单实用。
具有动画的导航具有更高的用户体验,而且对于数据需要延迟加载的导航来说,动画效果是必须的。然而,使用的场合要区别对待,并不是效果越绚丽越好。动画只需要流畅并能够个用户以反馈就好,毕竟对于应用系统而言,业务处理才是其核心价值,不能浪费项目组的宝贵资源来打造一个“花瓶”。
第四步:界面设计
界面设计最简单的方法就是参考同类系统的UI设计,结合实际项目和用户需要进行调整。界面设计有极大的自由度,因此也带来的一定的风险。设计者需要很强的业务知识,如果缺乏对用户工作的了解,很可能无法理解用户的真正期望。因此,调研和沟通非常重要。界面设计长犯以下错误:
第五步:界面分割与整合
第六步:开发原型->演示->收集反馈->改进
以用户为中心设计系统的很重要的一步就是收集用户反馈。完成原型开发,并及时向用户演示,与用户频繁地交流,共同测试系统原型,能有效促成UI的高可用性。
三设计图标
图形隐喻就是通过图形暗示用户的一种技巧。比如Windows里的回收站,历代Windows系列产品,只要我们看见那个“垃圾桶”我们就知道那是回收站。可见,好的UI,往往需要对图标进行定制化设计,使其包含某种隐喻来引导用户使用系统。图形隐喻可以推广到整个UI设计,不仅仅是图标设计,尤其是在游戏软件中。令我深有感触的就是《星际争霸II》,其UI设计无疑增加了游戏整体的用户体验。但是,使用图形隐喻存在一定风险。UI设计者的个人看法,如果与大多数的人有偏差,就会适得其反。毕竟,我们做的仍然是应用软件而不是游戏,不会有强大的美工和设计团队,在我们追求前卫设计的时候,可能会让用户感到困惑。因此,笔者从风险和成本角度考虑,并不建议在应用软件中过多地依赖图形隐喻。也许,我们的软件没有什么特点,但作为应用软件UI,简约、易用、高效才是我们设计的目标。所以,在此我只考虑图标的设计原则。
图标设计的核心思想——用美观的图形抽象现实事务(事物)。以下是一些指导原则:
图标设计,可能已经超出了我们大多数人的技术范畴。这类工作更适合于专业的美工来完成,而不是UI设计人员。如果你不擅长矢量作图,请一名专业美工可能更好。
感谢您阅读本文,如果您觉得有所收获,麻烦点一下右边的“推荐”,您的支持是对我最大的鼓励...