零基础学习交互设计先从这些知识开始!

@黄红艺Designer :交互设计三部曲终于写到最后了,今天聊聊交互设计的最后一个要素 —— 交互细节设计。本要素是在前两个要素指导下的设计实践,也是交互设计可视化与形象化的关键。


相对于前两个要素的完整性和系统性,第三个要素-交互细节设计,就显得琐碎和零散。根据交互设计由浅入深的渐进,交互细节可以分为布局、控件、适配、音效与动效、流(目光与手指的循迹)等等。接下来,我们就从布局开始聊一聊交互细节设计。


首先是布局。页面布局的首要目的就是为了页面功能的秩序感,使其在页面功能的分类以及轻重缓急的表现上更加合理,符合用户的心智模型,在用户使用的过程中,做到Don’t make me think !在交互细节设计中,页面布局与前两个要素之间的联系最为紧密。布局的依据就是通过卡片分类法获取的并通过流程设计优化过的交互设计信息架构。根据得到的信息架构,我们就可以知道页面导航应该采用什么样的导航方式,抽屉式导航还是标签式导航,以及每个页面应该有哪些相关元素需要体现和体现的程度。笔者在页面布局中主要坚持格式塔心理学的设计原则。


格式塔心理学派断言:人们在观看时眼脑共同作用,并不是在一开始就区分一个形象的各个单一的组成部分,而是将各个部分组合起来,使之成为一个更易于理解的统一体。当一个格式塔单元中包含了太多互不相关的单位,眼脑就会试图将其简化,把各个单位加以组合,使之成为知觉上易于理解的整体。格式塔理论明确地提出:眼脑作用是一个不断组织、简化、统一的过程,正是通过这一过程,才产生出易于理解、协调的整体。由此产生出了格式塔的一些基本原则(适用于布局和界面设计):主要包括接近原则、连续原则、相似原则和闭合原则。


零基础学习交互设计先从这些知识开始!

有兴趣的读者可以了解相关的知识。


在交互设计的页面布局中,要对不同的功能进行分类,并将其在视觉体验上分开,这就会用到格式塔心理学中的接近原则。同理,页面布局中,主要功能的凸显、次要功能的弱化。总的要求就是重点突出,详略得当。


其次就是控件。说到控件,更多的是指移动端应用,Android和ios应用。控件的作用有两个:一、采用同一类型的控件可以使得应用的风格鲜明、有个性,赋予应用一种独特的气质;二、以不同平台为基础的控件,在开发的时候减少工作量,做到拿来就用。控件包括按钮、开关、输入框和进度指示器。控件还可以根据自己的需要来自己定义。有些应用在开发的过程中,制作设计规范的同时,会制作相应的控件,便于在后期的开发过程中减少工作量。


零基础学习交互设计先从这些知识开始!

△ 界面控件距离(来源网络)

其次,是不同终端之间的界面适配。包括不同分辨率手机之间的适配、移动端和PC端的适配。适配有一个更专业的名称叫响应式设(ResponsiveDesign)。响应式的设计分为三个等级,第一等级是最弱的适配,就是没有适配,手机端会等比例缩小,需要放大才能查看,但是,不会出现图片破损的状况。第二个等级是轻度适配,可以实现移动端的正常预览,文字大小不变,图片等比例缩小。第三等级是图片、文字、元素位置以及显示方式等等,都会随着显示屏幕的大小而适应屏幕显示,达到显示效果的最优化,提高用户体验。


零基础学习交互设计先从这些知识开始!
△ 响应式设计(来源网络)


更多的交互知识戳阅读原文就能看到啦~

原创文章,作者:Tinadmin,如若转载,请注明出处:https://www.iamue.com/33234/

(0)
TinadminTinadmin
上一篇 2017-08-02 17:06
下一篇 2017-08-02 18:48

相关推荐

  • 破茧成蝶读书笔记

    01什么是用户体验  用户体验:使用一个产品时的主观感受 用户体验设计:提升用户体验而做的设计 书中讲到首先我们要明确什么是设计?设计不等于艺术。我了解到的是,设计是解决问题的,艺术是提出问题的。 书中两口…

  • 【交互】做上进的设计师,交互设计大趋势!

    一群关注趋势的小伙伴,从大量的APP中去发现设计范式,挖掘设计趋势,预测出在移动产品中会被广泛应用的十大交互设计趋势。希望这些新颖的设计模式,为设计师们带来创新设计灵感,进而为用户带来新鲜有趣的体验。|…

    2017-08-01
  • 交互设计的未来在哪?

    这是2017年的第13篇文章除了电脑和手机,越来越多承载了新交互形式的产品涌现。语音、体感等更加自然的交互方式会不会成为主流?未来的产品形态和交互方式会走向何方?当NUI(自然用户界面)代替GUI时交互设计师和…

    2017-08-01
  • 交互设计不只是解决业务问题

    「解决问题」是很多人对设计的定义归纳,具体到产品/交互设计领域,深入理解业务并提出合适的解决方案也是一项很基础、重要的要求。但对于用户体验/交互设计师来说,我觉得「理解业务」和「解决问题」本身都并不足…

  • 交互设计的三个半原则

    一些设计的基本原则往往是通用的、甚至可以说放之四海皆准的,例如优先级、一致性、界面的隐喻等等,好的设计都需要考虑到这些问题,甚至再更广的范围内也同样适用,而不仅仅是交互设计范畴。一个设计师&产品经…

    2017-08-01
  • 交互设计新人必看:怎样让你的线框图发挥出真正价值?

    当一个想法出来之后我们都知道先用线框画下来,但是画着画着,总觉得不对劲,总觉得加上视觉元素之后才能真正看出效果来。原作者:Dustin Senos翻译:zhuyuxuan地址:http://www.ui.cn/detail/148272.html转载请经…

    2017-08-01
  • iOS10交互设计启示

    数十万互联网从业者的共同关注!作者:MOGU_Dribbbler。作者授权早读课发表,转载请联系作者。来源:站酷。欢迎投稿到早读课,投稿邮箱:mm@zaodula.com背景前段时间被一篇名为《从iOS10设计指南变化看设计的新趋势…

    2017-08-04
  • 艺计回忆录 | 交互求职

    前几天和胡老板聊起我们这一代人在北上广深踟蹰前行即将奔三时的焦虑,不可避免地说到了职业规划这个话题。 对我们这些刚工作但残留一张学生脸的职场小腊肉来说,现状基本是满意的,前路虽不暗淡却也少不得早早谋划…

    2017-03-07
  • 【交互设计】Dribbble上的 UI 大神MIKE作品欣赏

    Dribbble 上的UI 大神MIKE作品欣赏幻灯片浏览幻灯片浏览幻灯片浏览幻灯片浏览幻灯片浏览幻灯片浏览幻灯片浏览幻灯片浏览幻灯片浏览幻灯片浏览幻灯片浏览幻灯片浏览幻灯片浏览幻灯片浏览幻灯片浏览幻灯片浏览幻灯片…

    2017-08-04
  • 交互设计 ▏当谈论『隐形设计』时,大家会谈些什么?

    设计并不总是耀眼夺目的艺术。它讲究微妙、实用,而且常常是不确定的。很简单,好的设计往往是隐形的。原作者:Carrie Cousins 翻译:IFEC团队译者 十萬個為什麼当你创造网页、移动应用甚至智能手表的交互时,就是…

    2017-08-01