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

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

相关推荐

  • 交互设计文档怎么写? | 设计基础05

    摘要交互设计师的工作虽不只是画交互稿子,但是好的交互稿不仅能够完美阐释产品内容和设计师的设计思路,还能够在项目各方协调工作中起到重要作用。保证完整的呈现产品需求和设计思路的交互稿,能够让各方工作人员…

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

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

    2017-08-02
  • 交互设计用户模型建立

    点击信息与交互设计关注我们!Persona交互设计用户模型建立:一、什么是用户模型?Persona([pə:'səunə]):(Persona是用户模型的的简称)是虚构出的一个用户用来代表一个用户群。一个persona可以比任何一个真实…

    2017-08-01
  • 产品经理的末路,交互设计的穷途

    2016年上半年我跟进了几个项目,“开始众筹”、“finger”、“分答”和“袋鼠云”,“袋鼠云”是企业级服务,前面三个是toC的服务,在为这些老板提供支持的时候,问他们需要什么人才,都说需要技术大牛和运营大神,没有一个提…

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

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

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

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

    2017-08-01
  • App收银台交互设计思考

    数十万互联网从业者的共同关注!作者:柒0。作者授权早读课转载。来源:简书编辑:Juvae最近完成了“app收银台设计重构”的需求(一期为“账户充值”),作为一个刚毕业的交互新人,踩了一些坑,总结了这次思考的过程与…

    2017-08-01
  • 交互设计自我发展三部曲——“器、势、人”

    数十万互联网从业者的共同关注!作者: 集创堂-纯色个人微信号:jichuangtang作者授权早读课发表,转载请联系原作者欢迎投稿到早读课,投稿邮箱:mm@zaodula.com交互设计师(或者称UI设计师)发展的三部曲——器、势…

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

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

    2017-08-04
  • 浅谈微信应用交互设计

    微信应用相信大家都不陌生,比如前段时间风靡朋友圈的神经猫,就创造了三天过亿访问量的神话,开发一款好玩有趣的微信应用,通过微信朋友圈的自发传播,达到品牌和产品的有效推广,是当下很多企业都在尝试的,但事…

    2017-08-02