交互设计实例分享


交互设计实例分享

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

移动应用交互设计实例


1. 3D立体展示图片列表

以立体展示的方式呈现所有的图片内容。左侧时间轴会根据滑动图片时的停留,显示对应图片的拍摄时间。最终停留的图片会在界面中部完全显示。

交互设计实例分享

2.上下滑动切换的卡片化图片展示

这个案例中采用了卡片式设计,通过上下滑动切换图片。卡片式的设计不仅能给人很好的视觉一致性,而且更易于设计上的迭代。图文混排的模式,既在视觉上做到尽量一致,又很好的平衡文字和图片的强弱。卡片化和上下滑动的交互结合也是一个不错的效果。

交互设计实例分享

3.富有星空元素的搜索页

导航页面融入星空元素,每一个图标代表不同的导航功能。在页面上滑动导航图标,被选中的图标自动放大尺寸,其他图标则自动变换位置和大小。交互设计的优势在炫酷简洁的星空元素中发挥到极致。

交互设计实例分享

4. 数据化的创意设计APP

这款文件管理应用将所有文件的存储量以数据化的方式呈现,直观简洁,一目了然。当每个文件夹存储量有变化时,环形统计图里的数据和对应文件夹的色块比例也会做出相应的交互变化。

交互设计实例分享

网页交互设计实例


介绍完这些比较常见的移动应用交互设计,接下来再给大家介绍一些比较优秀的网页交互设计的案例。

1. Sketchin

简洁的导航栏使整个网站看起来十分简洁美观。

交互设计实例分享

2. Seeing Data

这个网站是一个动态的信息图表,它可以为用户提供信息统计,绘制图表。

交互设计实例分享

3. 1000 Chrome Experiments

这个网站是由Google创意实验室创建的,不仅有华丽的动画,而且它的功能和网络技术方面也让人印象深刻。

交互设计实例分享

4. Celebrating Chinese New Year

庆祝中国新年是一个专业的实现WebGL的实验,可以将您的问候转化为烟花。

交互设计实例分享

5. Carbon Studio

怀念老式的拖放导航?不妨看看Carbon Studio这个网站。

交互设计实例分享

6.Nick Jones

这个网站可能已经过时了,但它的互动设计还是很棒的。

交互设计实例分享

总结


从欣赏的角度来说,优秀网页和应用设计本身就是一种美,能为设计师和用户带来一种纯粹的乐趣。这10个交互设计实例可能有些稍微有些过时,但它们的交互设计思路和技巧还是值得学习和思考。希望对你们有用。

交互设计实例分享

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

(0)
TinadminTinadmin
上一篇 2017-08-03 08:08
下一篇 2017-08-04

相关推荐

  • 交互设计中的心理学

    整理认知心理学中对交互设计(用户研究)有所启发的一些知识点(参考《认知与设计——理解UI设计准则》)包括:中央凹与边界视野——如何呈现信息以获取注意力格式塔原理——如何处理不同界面元素的关系时间感知——如何让…

  • app反馈信息的交互设计

    请戳“小白的交互设计”,关注我,么么哒。反馈的作用是帮助用户理解系统行为,合理的反馈就像两个用普通话交流的人之间的对话,互相可以轻易地理解,而糟糕的反馈就像是一个用普通话,一个用粤语的两个人之间的对话…

    2017-08-02
  • 【交互设计】手机界面中的灰色运用

    苹果手机的出现,有效的提升了设计师的地位。我有个在微软工作过的朋友告诉我,在苹果手机产生规模性的影响前,他们把设计师称为“美工”,后来,才尊称一下“设计师”。在手机界面的设计中,灰色的使用常常可以为界面…

    2017-08-01
  • 让人最不喜欢的交互设计错误列表,来看看你中枪了没!

    好的交互设计可以区分开有质量的网站和其他普通网站。然而,如果有明显的设计错误,它只会给予你本来想打动的用户以刺激和挫败感。下面是Speckyboy上总结的让人最不喜欢的交互设计错误列表,来看看你中枪了没!1缺…

    2017-08-02
  • 史上最完整交互设计基本原则|推荐收藏

    下面的原则对于有效的用户界面的设计和实现都是最基本的,不管是针对传统的图形用户界面还是针对任意的可联网的智能电子设备都是有用的。有效的用户界面是视觉明显的并且宽容的,会带给用户一种控制感。用户能很快…

    2017-08-01
  • 看了都说好!如何建立交互设计自查表?

    强烈推荐!很多同学做设计的时候经常会漏掉这个漏掉那个,等到开发来问的时候才想到。现在有了网易同学自创的自查表,可以把一些问题提前预防起来,文章系统全面,条理性强,是不可多得的实用好文呦。飞灵:对于移…

    2017-08-01
  • 用好的交互设计来管理复杂

    作者:Mandy权,一名快乐的产品经理!~微信公众号:Q产品复杂是可以被管理的,但要做到这一点,我们都必须做好自己该做的那部分工作。筛选器Tesler’s Law/泰思勒定律(复杂性守恒定律),这个定律告诉我们:每个应…

    2017-08-01
  • 【交互设计】信息图(infographic)的圆形表达

    信息图形(Infographic),又称为信息图,是指数据、信息或知识的可视化表现形式。信息图形主要应用于必须要有一个清楚准确的解释或表达甚为复杂且大量的信息。公元1958年,Stephen Toulmin提出了一种图形化的理论…

    2017-08-01
  • “数风流人物,还看今朝”-交互设计的价值是什么

     获奖公告 第2天的获奖者提名有“吴乐”"淡淡""小楼"三位小伙伴。根据规则最终获奖者是"吴乐",获赞45个(虽然我知道你肯定拉票了,哈哈),请微信联系我,把收货地址发给我。另外,由于“淡淡”继续获得了提…

  • 交互设计:补上学校不教的这一环

    作者:郦橙 锦妖链接:https://zhuanlan.zhihu.com/p/25279058不知道其他专业有多么具体和细致,我自己的专业(CMU Mii-PS)是典型地抓大放小,各种设计实操细节统统不讲,全靠自己摸索。我也曾经狂看blog,看书,…

    2017-08-02