恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
 交互设计原则:对齐和网格 优漫动游
0.0°
2023-08-31 好文转载 经验/观点 原作者: 广州UI设计培训 举报 382 0 0 0

普遍存在的错误信息框是最典型的公告对话框,通常程序名在标题中显示

  普遍存在的错误信息框是最典型的公告对话框,通常程序名在标题中显示,一些概括问题的简短文字作为显示主体,一个图像图标表明问题的严重性同学有一个OK按钮,通常这些构成了一个统一的整体,有时加上一个启动的在线帮助的按钮。  

  绝不要用临时对话框作为错误信息框或确认信息框。  

  交互设计原则:管理并设计对话框的内容,标签对话框,扩展对话框,级联对话框  

  标签对话框,允许你在一个对话框中填充更多控件,但拥有更多的控件并不一定意味着用户会发现你的界面更易于使用或者功能更为强大,并不意味着用户会发现你是将不同窗格的内容必须有放在一起的道理,否则这种退化对程序员有利,而不是对用户有利。标签之所以如此成功是因为该习惯遵循了用户有关“事物存储”的心理模型,即单层分组,不同控件组成多了个平行窗格,只有一个层次深度,但是这种习惯用法经常被滥用。比如word2003中的options对话框竟然有12个标签堆叠在一起就破坏了这个习惯用法的作用。不要堆叠标签是一个设计原则。  

  扩展对话框,在许多主流应用程序中可以找到它们,例如word的“find”(查找)对话框,扩展后显示更多控件,有“更多”和“更少”的扩展按钮,可以让对话框返回初学者状态。  

  级联对话框,是一个糟糕的习惯用法,它是在一个对话框中的控件,通常是按钮,点击后会在另一个层次关系的嵌套中调用另一个对话框,第2个对话框经常覆盖第1个对话框,有时第2个还会调用第3个,幸好,级联对话框现已失宠。标签对话框的优势在于处理复杂的广度问题,而级联对话框更适合处理深度问题,问题在于层次太深是界面太过复杂时的主要症状,如果发现除了用户通常不需要的模糊信息以外,你的程序仍需要使用级联对话框,那么应该全面审查界面的整体复杂性,而不是使用这种后落的级联思想。  

  交互设计原则:错语对话框,警告对话框,确认对话框,取代对话框,错误对话框  

  错误消息框愚蠢地停止进度,应该避免,人们讨厌,抵触,责备发出错误消息的一方,我们要通过消除错误对话框来大幅度改善界面的质量。错误消息真正所做的只不过是保护程序不陷入麻烦,只不过是防止用户不向数字段中输入字母,它与防止用户不输入错误数字无关。让错误成为不可能是我们的目标。同时我们也要记住当系统告诉用户他们失败时,用户会觉得很没面子。一个合理的错误消息框应当是有礼貌而清楚的说明问题、有启发和有帮助的提出解决问题的好建议,如果可以将操作按钮和产生结果也描述得很清楚,它甚至没有暗示用户的行为有任何缺陷。  

  警告对话框  

  警告是通知用户程序的行为,而确认给用户赋予一种忽略该行为的权力,这也是要消除的习惯用法。例如,word查找对话框在未搜寻,完成相关的任务时弹出一个模态的警告对话框提示未找到,或者操作失败,在这里报告事实是查找功能的另一个功能?如果不是,为什么要用不同的对话框呢?非模态的对话框已经足够。软件需要告诉用户其行为,如果用户期望这样,它应该在主屏幕上有可视化的指示器,使用户可以获得这种状态信息,启动模态警告对知框来宣布一个没有请求的操作已经够糟,又为一个已经请求的操作再发起一个警告信息就更加荒谬。有些自动启动却杀毒失败的杀毒软件就是一个例子。  

  确认对话框  

  它的弹出是程序对自己的行为不自信而来询问用户的许可征求,有时程序是在对用户的行为做事后的劝告而提供确认;有时程序认为没有能力做决定,而用确认对话框让用户替它选择,无论怎么样总是来自己程序而不是用户,这意味着它们是实现模型的反映,而不是用户目标的代表,向用户展示实现模型,产生的用户界面一定是让人不愉快且低劣的用户界面,存在确认对话框是不恰当的交互呈现,我们永远不能把责任推卸给用户,我们的程序应当得到用户的永久信任,恰当的解决方法是使动作易于恢复,并提供足够的非模态反馈。大量滥用确认对话框造成的后果就像寓言故事里大叫“狼来了”的男孩,当最后真正危险时,确认对话框不难起作用,困为它在没有危险时叫了太多次。消除确认对话框的办法是:让所有的操作都可以撤消,当程序行为不合时宜时,让用户发起停止并撤消的命令,取代预先用确认对话框提问的方式。提供非模态反馈来帮助避免用户犯错误。  

  取代对话框,丰富的非模态反馈  

  我们否定了以上三种对话框的友好性,但是持续的反馈又是用户确实需要的,这时我们可以通过改变交互渠道来达到我们的目的,即丰富的视觉非模态反馈,听觉反馈,负面听觉反馈(宣告用户错误),正面听觉反馈。  

  丰富的视觉非模态反馈  

  这种类型的反馈在提供当前应用的对象或过程的状态和属性的深入信息方面非常丰富,因为它运用了屏幕的像素,它是视觉化的,非模态的,这种信息是预先显示,用户不需要特别的操作或模态变换来浏览和理解这种反馈。例如,MAC,当你从互联网上下载一个文件时,下载的文件此伏彼起为一个图标出现在桌面上,用一个小的动态更新进度栏在视觉上表明下载的百分比。创造丰富模态视觉反馈必须注意的一个要点是它不是为新手用户创建的,丰富视觉非模态反馈是用户可以实时发现的内容,当他们发现后会感到如此奇妙,但是与此同时他们也需要菜单和对话框的支持来寻找需要的信息,这意味着取代警告和严重问题警告的丰富视觉非模态反馈对用户来说必须特别清晰,必须确保这种状态在视觉上比次要的提供信息的丰富视觉非模态反馈更突出强调。  

  听觉反馈  

  可以用听觉来监测输入是否成功,但建议这种听觉反馈不要和错误信息框发出的嘟嘟声相同,建议作为问题反馈的听觉指示是没有声音,和正面听觉反馈相比,负面反馈才是合情合理的。  

  负面听觉反馈:宣告用户错误  

  伴随错误消息的刺耳“嘟嘟”的噪声是对用户错误的公然宣告,它向听力范围内的所有人公布你已经做了可恨而愚蠢的事,人类喜欢听一切正常的声音,他们也需要知道什么时候做得不太好,但是这不意味着他们喜欢听到这些,负面反馈系统明显不如正面反馈系统受欢迎。在无声和有声的负面反馈之间人们会选择前者;在无声与有噪声的正面反馈之间,人们会根据个人情况和品们选择;在无声音与柔和悦耳的正面听觉反馈之间,人们会选择后者。在程序中我们从来没有为用户提供过高质量的正面听觉反馈,所以不奇怪人们会把声音与坏的界面联系在一起。  

  正面听觉反馈  

  正面听觉反馈的有效性起源于人类的敏感性,没有人喜欢别人告诉他失败了,错误消息框是负面反馈,在用户做错了事时通知用户,沉默可以确保用户知道,而又没有实际告诉他失败,它有明显的效果,因为软件不必伤害用户感情,而又能完成任务。游戏一般擅长正面听觉反馈,MACOSX还用精细的正面听觉反馈在文档保存和拖放时做了很发的工作,当然,听觉反馈必须在正确的音量状态,windows和MA提供了一个标准音量控件,所以良好听觉反馈的障碍已经排除,但是听觉反馈的音量不应该超过正在播放的音乐的音量。  

  交互设计原则:定义视觉框架  

  1)开始视觉语言研究,做一个整体格调评估,保持和交互设计的粗细程度相匹配,但不要给本来简单粗略的交互设计进行精雕细琢的视觉设计。  

  2)将选择的视觉风格运用在产品原型上,在提交视觉设计前进一步使视觉风格完善,从而可以体现和反应关键的行为和信息。  

  绝对不要向利益关系人展现你不满意的设计方案,可能那正是他们喜欢。  

  视觉信息设计  

  视觉信息设计者关心是的如何将数据,内容及导航视觉化,而不是交互功能。他们的技能对于视觉设计非常重要,尤其是具有大量数据的应用和网站,这里内容常常比功能更重要。信息设计的重点在于将将据以一种容易理解的方式表达出来,主要是通过使用视觉属性来控制信息的层次,这些视觉属性包括颜色,形状,位置及范围等。信息设计中常见的内容包括图表,图形,以及其他表示量化信息的形式。  

  视觉界面设计的组成要素  

  如何处理和组织好视觉元素,有效传达行为和信息。当两个对象有相同的属性时用户可以认为它们是相关,或者类似;如果两个对象中的属性存在着大量的不同,这会吸引我们的注意。  

  形状  

  它是圆,方,不规则的?用户习惯通过外形轮廓来辨识物体,但是形状作为辨识一个物体的一个因素具有明显的弱点,例如Apple和OSX中的DOCK即屏幕下方停靠栏,上的itunes和iDVD会经常被搞混,iweb和iphoto也容易被搞混。虽然图标的形状不同,但是大小,颜色和纹理是相似的。  

  尺寸  

  在一群类似的物体中,较大的物体更容易引起我们的注意,尺寸也是可以顺序和可以量化的变量,这意味着人们可以按照物体的大小自动地将它们排序,并在主观上赋予相应的值。尺寸上明显的不同也会迅速引起我们的注意,就是一张A4纸上的4种尺寸,我们便会认为,超大的文字也越重要,粗体比普通体要重要。  

  值  

  在明亮的背景下,暗色的类型物体就会很突出,和尺寸一样,值可以是游离的,比如如果一个照片太亮或者太暗,那么你就很难看清楚照片拍摄的是什么,人们很容易快速地察觉到值的对比反差,因此我们可以利用值来突出那些需要引起人们注意的元素,值同样也是顺序的变量,例如,较低值(较暗)的颜色在地图上用来标识较深的水域或者较密的人口。  

  颜色  

  颜色的不同可以快速的引起我们的注意,会计把“红色”当作负的,把“黑色”当作正的;证券市场上的交易员知道蓝色表示“买”,红色表示“卖”(至少在美国是这样)。红色在交通信号灯中的意思是“停止”,在西方人的眼中,红色还意味着“危险”,在中国红色却意味着吉利。类似地,白色在西方代表着纯洁与祥和,但在亚洲一些国家则被用于葬礼中。和尺寸或者值不同,颜色本质不是顺序的也不是定量的,因此并不太适合表达这种类型的数据,还有由于存在着色盲现象,因此我们也不能信赖颜色,把它当作是唯一的传达矢量。  

  方位  

  当我们有和方向有关的信息传达时方位是个很有用的变量,例如,如果你想表示股市下滑,你可以使用一个向下指的箭头,同时标为红色。  

  纹理  

  在屏幕上的元素没有真正的纹理,不过它们可以具有纹理的外表,纹理很少被用来表达不同或者引起注意,因为分辩纹理需要很强的注意力,纹理通常也需要不少的像素来表达。它可以被用做重要的启示暗示。用户界面上的元素如果有突起或者隆起,则意味着这个元素是可以拖放的:如果按钮上有斜面或者有限影,则意味着这个按钮是可以单击的。  

  位置  

  位置它可以被用来传达层次结构方面的信息,屏幕上的阅读顺序可以帮助我们来顺序地定位元素,比如把最重要的对象放在屏幕的最左上角。也可以用位置来创造出屏幕对象和现实世界对象的空间对应关系。  

  交互设计原则:交互界面设计的原则  

  运用视觉属性将元素分组,创造出清晰的层次结构。  

  在每个组织层次上提供视觉构架和流。  

  使用紧凑,一致且上下文合适的图像。  

  风格一致,功能全面并有目的性。  

  避免视觉口声和杂乱  

  交互设计原则:视觉模式是视觉界面的基础  

  通过分组的方式我们可以将不同逻辑的控制或者数据集区别开来,我们通常按照视觉习属性来分组,比如颜色和形状,在界面上自始至终地运用这些视觉属性,你可以创造出用户可以学习识别的模式,例如,在windowsxp操作系统中所有的按钮都是小圆角,所有的文本框都是方形并微微下凹,同时具有蓝色边框和白色背景,正是由于这种自始至终的一致性,所以尽管按钮和文本框有很多相似这处我们仍然可以很容易地将它们区分开来。  

  交互设计原则:对齐和网格  

  对齐视觉元素是帮助用户有组织而系统地熟悉产品的一个重要途径,成组的元素须在水平竖直方向对齐,屏幕上的每个元素都要尽可能和其他的每一个元素对齐,任何两个元素或者两组元素没有对齐的情况都必须有足够充分的理由,或者是要达到特别的与众不同的效果,具体来说,设计者当注意如下方面。  

  对齐标签----控件的标签竖直排列要彼此对齐,在输入表单大小相同的情况下,左对齐比右对齐对于用户浏览起来会更方便。  

  在控件集合内对齐----相互有关系的复选框,单选按钮或文本字段组都应该按照规则的网格对齐。  

  控件组和窗格之间要对齐----控件组和其他屏幕元素都应该尽可能使用同一个网格结构对齐。  

  交互设计原则:网格系统  

  网格系统是视觉设计者最有效的设计工具之一,对于设计有视觉层次和功能上较为复杂的界面特别重,在交互设计者定义应用的整体框架和用户界面元素之后,视觉界面设计者应该在网格结构中把布局“规则化”,即适当地强调高层次的元素和结构,并为低层次的元素或次重要的控件留出适当的空间。  

  常用比例是“黄金分割”大约是1.61,但是如果采用黄金分割比例却导致了元素放不下的情况,则对于屏幕上可读性来说一点帮助也没有。  

  如果两个区域的需求不同,那么就把它们做成明显的不同,如果网格的原子单位太小,网格就会变得复杂而难于识别;如果仅仅有细微的差别,对于用户感觉起来是不稳定,尽管他们可能也不太清楚为什么会有这种感觉,最终会导致网格不能发挥其本来的功效。  

  在视觉设计中运用网格系统可以带给你如下好处,可用性,由于网格会使元素的位置更加规则,所以使用者可以快速地找到关键的界面元素,如果屏幕的标题部分始终精确地出现在同一位置,用户就无须思考或者用眼睛扫描界面,一致的间隔和定位可以辅助用户内在的视觉处理机制,设计良好的网格可以极大地提高屏幕的可读性;美学上吸引人,精心运用原子网格,在屏幕的不同区域之间建立好适当的关系,这样的设计可以创造出一种井井有条的感觉,使用者会感觉到舒服,并可以吸引使用者与这个产品进行互动;提高效率,将布局标准可以减少创造高质量的视觉界面设计的反复所需要的工作量,尽早地定义并采用网格,可以减少界面设计的反复和修改。  

  交互设计原则:创建逻辑路径  

  布局上必须采用正确而有效的逻辑路径,用户可以沿着这个逻辑路径与界面互动,比如从左到右,从上而下。  

  交互设计原则:对称和平衡的视觉平衡观点  

  经验丰富的设计师善于通过控制单个元素的视觉权重来获得不对称的平衡。界面中常用的两种对称,即垂直对称(沿一根垂直线对称,此线常位于一组元素的中央)或对角线对称(沿对角线对称)。多数典型的对话框呈两种对称中的一种,对角线对称最常见。  

  交互设计原则:在视觉上区分不同行为的元素  

  对人物角色及其心理模型的理解为界面中使用文字语言和视觉语言奠定了坚实的基础,设计面向功能或对象的图标给设计代来有趣挑战,可以运用以下的指导原则。  

  将动作和动作施加的对象同时表达有助于增进理解,名词和动词结合在一起比单纯用动词更易被人理解;小心使用与你的目标用户想象中不同的隐喻和表现方式;  

  在视觉上将相关功能分组,以提供空间上的使用情境,如果不行就使用颜色或其他的视觉提供使用情境的信息;  

  保持图标简单,避免过分的视觉细节;  

  尽可能重用,这样用户只需要学习一次;  

  交互设计原则:将功能与行为视觉化  

  不要只用文字描述界面功能的结果,要用视觉元素向用户展示行为的结果是什么。  

  交互设计原则:全面而有目的地把风格和功能结合起来  

  界面中的每个方面都必须从视图的风格考虑,而不是单个控件或其他的视觉元素,产品的行为是品牌的一部分,用户对产品的体验反映是形式,内容和行为的合理平衡。  

  在开发到某种视觉风格的过程中,应考虑控件上基本形状,行为和控件的视觉启示,并且纯粹的美学上的考虑不应该干扰到界面的含义或用户与它交互的能力。  

  品牌的价值在于顾客与企业交互的总和,这种不断增加的交互通过基于技术的各种渠道,因此现在比以往任何时候都更强调用户界面品牌,如果目标始终都是促进良好积极的顾客交互,那么语言、视觉和行为的品牌信息就必须一不能致,对交互设计和行为控制,则常常是遵守视觉对用户所做承诺的最好方式。  

  交互设计原则:将元素一样一样从设计中移走,直到设计坍塌,再把最后一样移走的元素放回去。  

  继承设计元素的风格一致有利于用户在理解一个元素后就可以很容易的理解下一个类似的元素,并将设计元素简单化,严格限制颜色的数量,并且应该以较为不饱和的颜色或者中性的颜色为主,可以适当加入一些高对比作为强调重要信息的颜色,在同一个界面中,版式也不可以有较大的变化。控制尺寸,颜色,位置是最有效的方式。  

  交互设计原则:视觉界面中的文本  

  文字可以传递大量信息和细微信息,但是如果使用不当,文字是有可能把事情搞得更加复杂,而且有可能是误导用户。界面上必读的文本适用以下指导准则。  

  采用高对比度文本------确保文本与背景对比明显,不要使用互补的颜色,以免影响可读性,最佳的对比度是80%,这可以作为一般的经验值。  

  选择合适的字形和字号-----一般来说,整齐利落的Sans-serif字体比较适合,比如Verdana或者Tahoma就特别适合阅读,Serif字体则显得有些毛毛草草,不利索,比如Times或者Georgia字体;但是如果字体尺寸足够大或者进行了平滑处理及抗锯齿处理,则可以弥补这个不足。小于10个像素的字在大多数情况下都难于阅读,如果必须采用小字体,则最好使用Sans-serif字体,并且没有做过抗锯齿处理。  

  将文本清晰地组成段落----为便于理解,用最少量的必要文字清楚地表达意思,避免用缩略语,如果必须,要用标准缩略语。  

  交互设计原则:视觉界面上的颜色  

  注意:颜色不能太多,饱和互补颜色的使用,过度饱和,对比度不够,对色彩缺陷注意不够;  

  颜色不能太多:大脑不得不花费额外的时间记住每种颜色的意义,降低了我们处理速度。  

  饱和互补颜色的使用:互补颜色在颜色处理中是指那些相反的颜色,当这些颜色被高度饱和并且放置在一起时,就会制造出视觉假象。并且非常难以正确辨识,也非常难以让人聚精会神。  

  过度饱和:高度饱和的颜色看起来会显得鲜艳,从而吸引过多的注意力,在较小的地方适当地运用饱和适中的颜色可以有效地吸引用户的注意力,但这种用法应该保守使用。  

  对比度不够:如果图形颜色与背景颜色只是颜色不同,而在饱和度和亮度上没有差别,则很难辨识,图形和背景除了色调不同外,饱和度和亮度也应有区别,如果可能,应尽可能避免在彩色背景上运用彩色文本。  

  交互设计原则:视觉信息设计的原则  

  加强视觉对比,显示因果关系,显示多个变量,央一个显示中结合文本、图形及数据,确保内容的品质、相关性和完整性,在相邻空间上显示事物,而不按时间堆积,可量化的数据变要量化。  

  加强视觉对比:为用户提供可以进行相关变量和趋势的对比手段,或者是事件前后的对比手段,对比可以产生一种情境,使信息更有价值,用户更易理解。轻易地获得交互前后的对比。  

  显示因果关系:交互界面中应该使用非模态视觉反馈告诉用户其行为的可能结果或提供如何完成操作的暗示。  

  显示多个变量:投资者通常对多个证券、指数及指标的相互关系非常感兴趣,多个变量随时间演变的图形可以帮助投资者揭示这种关系,在交互式显示中,用户可选择开启或关闭变量,使对比更容易,相关也更清晰。  

  在相邻空间上显示事物,而不按时间堆积:如果要表达按时间发生的变化,将这些变化安排在相邻的空间上显示,而不是彼此叠加,那么用户会更容易理解。连环画就是一个这样的好例子,它在相邻空间上显示随时间推进的流和变化。除非有真正卓越的替代方案,否则必须遵守以上标准,但一致性并不意味着僵化。

Powered by Froala Editor

更新:2023-08-31

收藏

0人已收藏

乜野瓜

你好咯

  • 268

    作品

  • 1

    粉丝

  • 0

    关注

  • 分享几个免费AI生成工具  优漫教育
  • AppUI交互与视觉设计  优漫教育
  • 应届毕业生都转行学UI设计了,为什么呢?优漫教育
  • 混迹职场必需知道的职场交往技巧优漫教育
相关标签
广州Ui设计培训

    猜你喜欢

      2023-08-31 好文转载 经验/观点 原作者: 广州UI设计培训 举报 382 0 0 0

       交互设计原则:对齐和网格 优漫动游

      0.0°

      你确定要举报 交互设计原则:对齐和网格 优漫动游

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2023年08月31日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      0
      0
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录