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

@黄红艺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

相关推荐

  • 交互设计的未来在哪?

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

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

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

    2017-08-04
  • 2017年交互设计的10大趋势

    UI 设计的趋势是变化非常快的,有的时候我们的脚步总是可能慢了一拍。 随着 2016 年接近尾声,Lin. 为大家整理了外网大牛 Jamie Leeson 总结的 2017 年 UI 设计的 10 个重要的趋势。01. 沉浸式的全屏视频Campos Cof…

    2017-08-02
  • 常逛这3个交互设计类网站,轻松get设计技巧和灵感

    DribbbleDribbble是一个著名的UI设计、交互设计社区,许多设计师寻找灵感,与设计师同行进行交流切磋等都会到这里来。 它面向创作家、艺术工作者、设计师等创意类作品的人群,提供作品在线服务,供网友在线查…

    2017-08-02
  • 交互设计应该学的软件有哪些?

    数十万互联网从业者的共同关注! 作者:Yoojoo,作者授权早读课发表,转载请联系作者。来源:知乎仅针对现有企业交互设计师常见设计范围(网页,桌面app,移动端app)作答。1-7为交互设计师必备,8-10有兴趣的…

    2017-08-01
  • 界面设计,视觉设计,交互设计之间区别

     设计师 交互设计师  UE是用户体验,UI是视觉设计,IxD是交互设计。  交互设计最开始不是服务于互联网的,是人机交互也就是人与计算机的现实输入输出、现实生活中设施的使用方式,不局限于互联网,好…

    2017-08-02
  • 卡片短信:如何把交互设计做成一门生意?

        点击信息与交互设计关注我们! 欢迎大家踊跃投稿哦!投稿邮箱:iidc@iidc.org.cn最近使用安卓手机走查竞品,发现安卓的短信大变样,变成了卡片式短信,经过深入了解发现,卡片式短信的背后…

    2017-08-01
  • 为什么我推荐使用Flinto做高保真交互设计稿?

    静电说:其实Flinto并不算一个新鲜的工具了,但是感觉在设计师中的流行程度并不高,可能是这个工具一直很低调的原因吧。在16年初,Flinto还只是个可以做连连看的工具,跟其它同类型的工具并没有太多的区别。但是随…

    2017-08-01
  • 非设计专业的学生,如何系统的学习交互设计

    数十万互联网从业者的共同关注!作者:青溪Joanna微信公众号:qingxizhaji(青溪札记)作者投稿早读课发表,转载请联系作者。曾经我也是一名非设计专业的学生,作为自动化专业的硕士希望自学做交互设计,有很长一段…

    2017-08-02
  • 交互设计实例分享

    现在很多优秀的网站、移动应用中都广泛的使用到交互设计。网络上也有很多相关的文章,例如什么是交互设计,交互设计的流程是怎样的?但是设计从来不是空谈,理论和实际的碰撞,才能激发出更多的灵感。以下是我自己…

    2017-08-03