美文网首页设计设计智造平面设计
交互界面设计的基本原理!

交互界面设计的基本原理!

作者: 3ff99717dcad | 来源:发表于2019-02-28 17:39 被阅读13次

     

    文/吴寅 UI交互界面设计是在人机交互领域中的一门重要学科。而人机交互设计实质上是设计协调人与计算机共同工作时产生的矛盾,以最高效的方式满足人安全、效率、舒适需求的学科。用户界面以其工作流程的角度可以分为输入和输出。输入是指一个人如何将他的需求或愿望告诉计算机,输出表示计算机如何将它的计算结果和需要传达给用户。

    交互界面设计的要素 

    ①颜色。易识别的文字、和谐的色块、易用性的按钮可营造出舒适的使用环境。配色应针对不同用户群体的心理,不同的色彩方案具有不同的感情特征,会对人的心理状态和视觉感受造成不同的影响。颜色种类不宜过多,基于视觉分析,配色复杂会降低阅读的速度。

    ②文字。文字是界面中极其重要的组成部分,文字传递了大量的微信息。字字相连可成文本,成组可成为图形、符号。比如,在书本杂志等印刷品150dpi-300dpi高分辨率中,正文字体主要采用有衬线的宋体。而显示器的72dpi的低分辨率一般都用黑体或者微软雅黑,如果改为宋体当正文,文字衬线反而会妨碍阅读,易导致视觉疲劳。

    ③图标。图标分为标志与按钮,使用户通过形状和色彩清晰地了解信息的分类和操作界面中的图标。用户经常使用的工具栏的图标与下拉菜单需要与文字信息相结合使用。除了具备功能价值,图标在传递品牌属性上还会起到宣传作用。

    交互界面设计的原则 

    设计首先考虑的是用户如何交互,而不是技术问题。如何使软件界面更加美观、更易操作,首先可对这些相关视觉元素的设计进行分类分析。界面设计中一般包括布局、交互层次、视觉等元素,而这些元素的应用不仅要准确地传达信息,还能定位每位用户心理,并正确地引导用户持续关注和使用下去。

    界面布局即在有限的屏幕空间内科学、合理地编排一定量的信息,比如,最重要的元素应放在其他元素的上方或左侧突出的地方,视觉元素应在固定位置摆放信息与图形按钮。 随着硬件设备的提升,移动互联网向着需要低配置、高效能、个性化和优质用户体验的方向发展。目前,通过成功的例子看,扁平化的交互界面要比其他样式更容易处理,先从字面诠释“扁平化”,与之相对应是“结构层级”。  推荐阅读:APP界面的视觉设计原则!

    结构层级减少 

    一个好的设计任务是建立在结构的“扁平化”上的,即对有效的信息减少层级、精简结构,功能表达方式直白等等都是使交互扁平化的手段。层级结构减少,交互步骤必然减少,无疑让用户的使用效率得到了提高。

    快捷方式 

    以智能手机界面的快捷菜单为例,在任意界面上,只要滑动手指就能从底部划出一个快捷菜单,可设置蓝牙和震动等。对于一个新用户而言,如何简单地在新界面中操作,这都是值得我们研究的课题。

    减少点按 

    点按是个机械动作,一个动作重复多次会使用户记忆模糊。记忆的功能是由大脑完成的,当人们需要记忆一些必须由身体参与的技能和运动时,除了通过大脑进行记忆之外,肌肉自身也自觉启动记忆功能。一个用户离开系统一段时间,如果他们能很好地回忆起界面,则说明软件成功了一大半。比如,在苹果的ios7系统中,关闭后台程序时,只需要手指轻轻往上一滑就关闭了,这与我们生活中丢弃动作非常吻合。

    信息直观、有序 

    现在的移动设备繁多,传递的信息量大,设计师需要精简繁杂多余的元素,让信息更直观、明确地展示给用户。我们应在确定产品主要功能构架后进行分类,分类虽然不能降低产品的易用度,但能帮助用户分析产品,这有利于整理互联网中的大量信息,让用户能快速找到自己想要的信息。

    信息反馈 

    扁平化中的重点是及时的信息反馈与提示功能,比如,注重用户使用界面的过程、界面在用户操作出错时的提醒、优化反馈信息的易读性,从而让用户清晰地了解如何继续使用下去。

    优雅的视觉设计 

    视觉设计对品牌、用户体验都具有推动作用。优秀的设计作品具有简单明确、传达功能准确的特点。在设计中好的字体也起着点明主题的作用。用户界面的设计不要轻视美学方面的因素,视觉设计也不是简单的涂鸦,它可以有很多细节,也可以表现质感和动感,这需要设计师耐心去发现。

    注:本文为 设计智造编辑整理,转载请注明 来源:设计智造 http://cocoo.top

        本文版权归原作者所有,如有侵权请来信告知(cocootop@163.com),可合作,我们愿意支付稿费。

    相关文章

      网友评论

        本文标题:交互界面设计的基本原理!

        本文链接:https://www.haomeiwen.com/subject/nwekuqtx.html