界面设计的结构与实现

界面设计的第一步是将任务设计的结果作为输入,设计成一组逻辑模块,然后加上存取机制,把这些模块组织成界面结构。存取机制可以是分层、网络的或直接的,机制的类型主要由任务结构决定,也取决于设计风格。例如,菜单提供了层次结构,图标则是直接存取,也可以是层次的,而命令语言可提供网络也可提供直接存取机制。第二步是将每一模块分成若干步,每步又被组装成细化的对话设计,这就是界面细化设计。

界面设计包括如下几点:
1.界面对话设计
2.数据输入界面设计
3.屏幕显示设计
4.控制界面设计

1.界面对话设计
在界面设计中要使用对话风格的选择,并加上用户存取和控制机制。对话是以任务顺序为基
础,但要遵循如下原则:

(1)反馈(Feed back):随时将正在做什么的信息告知用户,尤其是响应时间十分长的情况下。

(2)状态(Status):告诉用户正处于系统的什么位置,避免用户在错误环境下发出了语法正确的

命令。

(3)脱离(Escape):允许用户中止一种*作,且能脱离该选择,避免用户死锁发生。

(4)默认值(Default):只要能预知答案,尽可能设置默认值,节省用户工作。

(5)尽可能简化对话步序:使用略语或代码来减少用户击键数。

(6)求助(Help):尽可能提供联机在线帮助。

(7)复原(Undo):在用户*作出错时,可返回并重新开始。

在对话设计中应尽可能考虑上述准则,媒体设计对话框有许多标准格式供选用。另外,对界面设计中的冲突因素应进行折衷处理。

2.数据输入界面设计
数据输入界面往往占终端用户的大部分使用时间,也是计算机系统中最易出错的部分之一。
其总目标:简化用户的工作,并尽可能降低输入出错率,还要容忍用户错误。

这些要求在设计实现时可采用多种方法:

(1)尽可能减轻用户记忆,采用列表选择。

对共同输入内容设置默认值;使用代码和缩写等;系统自动填入用户已输入过的内容。
(2)使界面具有预见性和一致性。

用户应能控制数据输入顺序并使*作明确,采用与系统环境(如Windows*作系统)一致风格
的数据输入界面。

(3)防止用户出错。

在设计中可采取确认输入(只有用户按下键,才确认),明确的移动(使用TAB键或鼠标在表中
移动),明确的取消,已输入的数据并不删除。对删除必须再一次确认,对致命错误,要警告并退

出。对不太可信的数据输入,要给出建议信息,处理不必停止。

(4)提供反馈。

要使用户能查看他们已输入的内容,并提示有效的输入回答或数值范围。
(5)按用户速度输入和自动格式化。

用户应能控制数据输入速度并能进行自动格式化,对输入的空格都能被接受。
(6)允许编辑。

理想的情况,在输入后能允许编辑且采用风格一致的编辑格式。
数据输入界面可通过对话设计方式实现,若条件具备尽可能采用自动输入。特别是图像、声
音输入在远程输入及多媒体应用中会迅速发展。


 

 

UI 设计利器-Balsamiq Mockups

 作为C/S架构工程师,UI设计方面是很值得考虑部分。以前和客户商讨软件界面时总是在草稿上完成,既不方便修改,也不能明确的表达自己的真实想法,最近在网上发现一款基于AIR开发的工具:Balsamiq Mockups ,能够迅速画出UI草图,希望各位coder利用这款工具构建出漂亮的界面。


操作方面,拖拽,控件分组,甚至元素之间的对齐都做得很贴心;
预制了很多界面元素,从简单的输入框,下拉框,浏览器主要元素,到经常用得到的导航条,日历,表格,到复杂的Tag Cloud,Cover Flow, 地图,WYSWYG的格式工具栏等,有了这些不用从头画起,往往比用白板都快;
界面元素的修改很简单,比如导航条的几个标签页的label,就是用逗号分隔的文字,下拉框的选项就是分行的文字;
使用xml语言来记录和保存界面元素和布局,
这使得每个设计都能被很好得放进SVN,Git,和CVS等工具中进行管理和跟踪;
可以设计复杂的界面元素,保存后,以后可以重复使用(包括修改);
可以将设计导出成PNG格式的图片;
可以用命令行进行导出操作,这样就能让我写个脚本,从svn里checkout某个目录下的所有设计文件后,导出图片,打包后用邮件发到项目经理,工程师甚至客户那;
跨平台,Balsamiq Mokups是用Flex和Air实现的,所以在Mac OS, Linux和Windows下都能使用;
不仅仅有桌面版本,还有能集成在Confluence,JIRA,和XWiki中的版本,使得异地在线协作更方便有效;

 

内地与台湾两岸UI设计业界交流

国台湾网8月19日北京消息 首届海峡两岸互动数字内容设计大赛总决赛昨日在北京举行,全程参与赛事协办的UI聚合网总编徐海波先生在赛程间隙接受本网记者专访时表示,虽然UI(用户界面)设计行业发展迅猛,但认识和参与其中的人员太少,特别是两岸业界在相互交流与学习上还存在很大空间。希望有更多的人能了解、关注、支持这个行业,让其获得更好、更快、更稳的发展。

  UI中文是用户界面的意思,UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品味,还要让软件的操作变得舒适、简单、自由、充分体现软件的定位和特点。对绝大部分人来讲,UI及UI设计都是相对陌生的词汇,而对非营利性专业组织UI聚合网来说,为了让更多的人了解UI设计,他们一直在努力,协办首届海峡两岸互动数字内容设计大赛即是方式之一。

  UI聚合网全程参与了赛事组织筹备的各个环节,并充分发挥其大陆UI设计权威组织的作用,联合和团结所有在大陆的设计同行共同参与赛事,徐海波还兼任大赛“2010 Digital UI用户界面评选”环节主持人。据介绍,这种付出并不追求商业利益,“只是想让更多的企业知道我们,让更多的消费者关注我们,让更高一级的行业组织知道我们,以致最后让政府和全社会都知道我们”。

  作为近几年新兴的行业,UI设计存在着制约其发展的种种问题。徐海波认为,获得社会各个阶层深入、广泛的了解、关注和支持,是解决行业发展问题与矛盾的必需条件。行业人员为此组织并参与了不少面向广泛的各类线下活动,努力普及UI设计概念、培育行业土壤人群。徐海波表示,UI设计就像唱歌,歌唱得好,还要有人欣赏、知道怎么欣赏,会欣赏的多了,才不会曲高和寡,希望越来越多的人能“懂我们的设计、懂我们的方法”,也希望有越来越多的人加入到这个行业。

 

 

关于UI设计“大气”二字

很多人包括我在评论一个UI设计时,经常用“大气”和“小气”来做整体感觉的评论,但真让我说出怎么才叫“大气”,我还真说不出来,只能意会不能言传,只是种感觉。但这种感觉能否从理论上进行详细描述或定义?应该来说还是可以量化一部分的,以下是在网上看到的一些观点,仅作参考:
1、网页的背景色的选择如果合适(比如浅色),会使页面显的明亮而开阔,进而让我们感觉到画面的大气;
2、色彩简洁,偏冷色系更显得大气,杂乱的色彩组合或者浓郁的颜色会使大气显得不明显;
3、在页面排版设计上,局限在一个框子里的国字型十分“小气”,无轮阔限制的顶天顶地型的格局排版更加有气魄;
4、规则的设计更显理智而大气,不规则的设计会因个性过于鲜明而掩盖了大气;
5、简洁的风格永远给人留下如“大将风范”般的气势与气魄,过于复杂和繁琐的设计只能突出独特性而导致减弱气势;
6、信息多而丰富,可提高信任度,缺乏信息内容则显得“萎缩”而小气;
7、宋体、黑体虽为最普通的字体,却能给人留下良好的印象,花体有个性却使画面浮躁,失去了严谨的风范。
8、大气,很虚的一个形容词,也很难说明。我个人理解的是,简单而不粗燥。
9、对于苏州园林,给人的第一印象不是大气,而是精致、婉约。北方园林就不会给人精致的感觉,一般都是有大气,恢弘的感觉。两者之间的占地面积相差不大,但是给人的感觉不一样,就是说布局上的造成。
10、色彩搭配。国人对于颜色有一定的先入为主的概念,用嫩绿或是粉色,你可以自己想想会不会有大气的感觉?
11、注重整体,不拘泥细节的雕琢,看似简单却构思精巧。
12、“大气”这种状态是绝对不可能有固定定义的。大气的网站是让人找不到小气的地方的,你只要做到这点就成了。
13、别问需要什么颜色,需要什么字体,统统借口。 颜色没有错,字体也没有错。如果设计出来不好看,只有搭配他的人的错。
14、不同类别,不同行业,不同风格的网站,它的大气定义也就不同。
15、辅助大气的东西可以很多。 简洁美观有亲和力的页面加上丰富准确的内容数据,会让一个网站很大气。
16、我工作的时候,通常会拿一半甚至一大半的时间去思考,去悟,真正制作的时间很少。千万别一拿到单子就打开软件咕噜咕噜开始设计,这是不负责的。
17、劝告一些觉得自己的设计总被和谐的设计师们。你之所以身为一个设计师,吃这碗饭,你就应该知道自己不能够象个艺术家那样把自己的意志强加到你的客户身上。 客户也是有审美的,可能他喜欢大红大紫,喜欢“野兽派”,让你很鄙夷,但作为一个优秀的设计师,如何去找到客户和你之间的平衡点,并且完美的实现三方可接受的作品(包括市场),才是见你功力的地方。
18、简约而不简单,注重细节的设计,清晰、明朗
19、画面华美但不凌乱,也不妖媚
20、线条可以多采用直的,不要层次不清
21、画面有视觉重点,有层次感,有很好的整体性
 

UI设计师和视觉设计师的区别

 UI设计师是要指出一个产品的好坏,不仅是它看上去如何,重点在于它是否易学好用,是否容易让用户上手,是否支持用户更好的完成达到目的操作任务。

Jeff Jhnson认为UI设计师应该包括如下工作内容:

1.将一个程序中的命令务数量从100减少到48个;
2.尽可能的减少菜单层次;
3.将完成一个任务的鼠标移动次数尽可能的减少一半;
4.整合菜单中的命令,将不易用的专业术语变成通俗易懂的短语;
5.把用专业术语表达的提示信息,变成简练、和任务相关的通俗语言。

    UI设计师应该擅长分析和理解用户的需求,让信息的架构更加合理,尽可能的简化使用难度,同时找出用户使用产品时会遇到哪些问题;而视觉设计师擅长的是艺术设计、形象的表达功能,为产品创造自己的风格,同时配合相关的显示设备和图形合理安排信息,让用户能够轻松愉快的完成功能。

    UI设计师的工作职责:

· 任务分析,概念设计;
·‍ 进行流程设计;
·‍ 说明实时响应标准;
·‍ 易用性评估、易用性测试;
· 评定易用性标准的一致性;
·‍ 布局;

   视觉设计时的职责:

·‍ 创建和识别的图像;
·‍ 艺术的外观;
· 充分利用所相关的显示媒体;
·‍ 形象的表达功能;
·‍ 视觉一致性;
·‍ 布局;


   一个好的UI设计师,设计出可用性高的产品,可以增加市场的接纳率,减少售后服务的费用。他应该关注例如用户学习是否费力、产品功能和用户目的是否匹配,用户完成目标过程中,把目标转化为产品中相应的概念是否困难。

 

一个真正的符合Web标准的IE

这个消息让我们振奋,在经过9个版本更替后,我们终于看到了(或者说即将看到)一个真正符合Web标准的IE浏览器。在Web开发设计界,人们对IE的忍耐到达了极限,最终,很多人宣布不再支持IE的某些版本,IE9的出现将改变这一现状,我们从这件事可以学到的东西是,施以压力与时间,任何顽固的东西都会改变。

移动Web的爆发

移动Web为开发与设计界带来了变革,成为一种时尚与不可逆转的趋势。曾几何时,Web开发设计者们认为,随着网络带宽的增加以及显示器的变大,我们的Web画面会越来越大,那些传统的960网格已经显得局促,然而事实却往相反的方向发展,Web开始被放进那些狭窄的小屏幕,人们喜欢这种变化,随时随地用掌上设备访问Web站点。

我们从中学到的东西是,相对于展示效果,人们更看重方便性。

社会网络主导一切

关于社会网络,曾经的那些质疑声还萦绕在耳,一个140个字符的博客平台有什么出息?社会网络管我什么事?我开的是公司,不是学校。然而,似乎一夜间,社会媒体网络遍地开花并迅速主导一切,老网民热烈拥抱,新网民也一拥而上。我们从中可以学到的是,当网络将人们连接在一起的时候,它所爆发的力量是惊人的。

Web开发与设计已经成为成熟的市场

帮人设计网站曾经是你赚外快的业余职业,是吧,如今,Web开发与设计已经成为非常稳定且成熟的市场,专业的开发设计有大量的需求。

从XHTML到HTML5

拥有严格语法和代码规范的XHTML曾被认为是Web的未来,然而不是,Web的未来是HTML5。当然,导致HTML5受宠的不是它松散的语法(XHTML严格的代码规范仍然是一种很好的习惯),而是它强大的原生功能,原生的媒体播放能力,本地数据库,画布等等。当Web从单纯的文档向应用转变的时候,丰富的原生功能是非常必要的。

苹果与Flash之争

Flash曾是众多Web开发与设计者的最爱,当然,它也惹恼了同样多的人。突然有一天,苹果站出来向Adobe发难,乔布斯在众多场合指责Flash不稳定,不实用,iPhone和iPad均不支持Flash,当苹果在移动Web领域凭借HTML5主宰市场的时候,Adobe风光不再。我们从中得到的教训是,没有任何技术会成为永远的明星。

JavaScript重放异彩

曾经,JavaScript是用来让一些画面在网页上飘来飘去的,如今,JavaScript成了Web开发与设计中不可或缺的东西,现在的Web开发者甚至不再考虑用户是否禁用了JavaScript这样的问题。当Web逐渐成为一个应用平台的时候,JavaScript成了这个平台中最强大的工具。

jQuery成为真正的明星

JavaScript虽然强大,但很难用,至少在2006年之前是这样的,接着,一个叫jQuery的JavaScript框架面世,这个开源的,跨浏览器兼容的JavaScript框架拥有强大的功能与简单的语法,迅速风靡Web开发与设计界,并成为真正的明星。如今,运行jQuery的著名站点多不胜数。

CSS动画

CSS是网页式样语言,动画,那不是JavaScript的事吗?然而,从2007年开始,Webkit开始尝试CSS动画,并最终将这一梦想变成现实。

 

iPhone触摸屏UI界面设计

1 iPhone触摸屏UI界面设计的发展

    触摸屏的应用从以前的银行ATM自动取款机、科技馆中的互动设备等,很快应用到手机、GPS全球定位系统等移动设备以及最近推出的平板电脑系列。苹果公司好像一直引领者触摸屏的潮流,其推出的iPhone系列产品很有可能成为星星之火,将带来燎原之势的触摸屏时代。触摸屏的UI设计随着触摸屏应用的发展而发展,因此触摸屏UI设计也变得越来越重要。iPhone触摸屏UI界面设计依附于iPhone操作系统的更新而发展。

2 iPhone触摸屏UI界面设计与一般UI界面设计的异同点

    触摸屏UI设计相比较其他一般UI设计最大的不同或者说难点,就是因为人的手指没有鼠标的小箭头精准,所以会导致手去点击触摸屏上比较小的控件之类的东西会比较困难,可能会产生误操作。这是在做触摸屏设计时必须要考虑到的,可以使按钮稍微大一些,以增加可接触面积。操作的过程其实就是手指和机器对话交流的过程,手指在屏幕上触动操作,比起物理键盘操作有更大的灵活性、随意性。相信触摸屏UI设计将会成为人机交互的最佳界面设计。

     iPhone触摸屏UI界面设计与一般UI界面设计的相同点就是都要以用户为中心进行设计,不是随意的艺术创作,设计要以人为本。

3 iPhone触摸屏手机软件开发UI界面设计中以人为本的重要性 

     从设计心理学的角度来看,设计的好坏是人的心理感受来评价的,人与冰冷的机器之间的交流,需要美的设计做融合。“UI设计也属于工业设计的范畴,工业设计活动是处理人与产品、社会、环境关系的系统工程,可以称它为社会工程或文化工程。它的出发点是消费者的需求,归宿则是消费者需求的满足。即工业设计是以消费者为中心,满足消费者全方位需求的设计活动”。iPhone触摸屏手机软件开发UI界面设计也是如此。

     从人机工程学角度来看,交互设计的空间还很大,更多的为人考虑,以人为本。“设计是给人设计的,人来使用,要充分考虑到人的生理结构,生活习惯等”。iPhone触摸屏手机软件开发UI界面设计更是如此,人与屏幕的接触来进行软件的操作,界面怎么布局设计才能让用户用的更舒适?在特殊情况下,如只能一只手操作时,都要考虑到设计中去。

     由此可见,无论是在设计心理学的角度还是在人机工程学角度来看,以人为本在iPhone触摸屏手机软件开发UI界面设计中是很重要的。

 


Page 1 of 9
  服务地区:上海 江苏 浙江 安徽 山东 福建 广东 江西 杭州 苏州 北京 深圳 广州 天津 大连 无锡 香港 台湾 新加坡 日本 美国 英国 法国 德国 意大利  
 
导航: 多媒体设计开发   软件界面设计   手机界面设计   网站设计   图标设计   VI设计   角色及短片设计