交互设计

前一段时间在 58 UXD 平台做了分享，讲了一个很大的话题《AI 技术与经济环境影响下的新兴设计演变趋势》，分享完后有同学提问，问到了 AI 技术对交互设计师的影响。 往期AI相关的分析： 设计师哪些能力AI无法替代？来看总监的深度分析！最近参加了几个关于 AIGC 的设计交流活动，听到了一些不同领域、不同经验的设计师对 AIGC 这波浪潮的直接看法。阅读文章 > 回顾近 10 年来设计相…

关于 AIGC，我收到的同学提问大多都表示担忧，多数人会这样问： “AI 会不会替代交互设计师的工作？” 但真正聪明的设计师会换个角度来思考：“在交互设计师的每个工作环节中，AI 可以发挥什么作用，参与的程度和产出的质量如何？” 一、AI 如何参与交互设计工作 说到设计工作的流程和方法，最通用的表述方式就是“双钻设计模型（Double Diamond Design Model）”，由英国设计委员会…

工欲善其事，必先利其器。对设计师而言，一款优秀的软件不仅能提高设计师的工作效率，也会帮助设计师快速呈现自己的想法，发挥创造力，而不是让灵感囿于复杂的工具无法施展。 因此每年我都会关心设计软件的趋势，而在各大设计软件的趋势报告中，UXtools 以其样本量大（从全世界设计师用户中做调研）成为我的首选参考。 就在UXtools发布不久的这份全新设计工具报告中，我意外地发现了一匹黑马，看到排名时着实让我…

AI 时代，交互设计师应该了解的 AI 人机交互指南。此篇文章搬运自微软的 AI 设计团队，内附原文链接和资源链接，一共 18 条指南，希望可以启发到你~ 原文链接： https://docs.microsoft.com/en-us/ai/guidelines-human-ai-interaction/ 大牛出品！2019 年AI人机交互趋势研究报告AI 是这个时代最具变革的力量之一，它改变了我们…

摘要：毫无疑问，人工智能产品会慢慢渗入人们的工作、生活、娱乐当中，为各行各业带来革命性的变化。未来，产品与产品之间、产品与环境之间、产品与用户之间的边界会非常模糊，人们会在多设备中无缝跳转和紧密连接，形成一个“你中有我，我中有你”的整体。在人工智能时代里，「原生硬件」，「AI 引擎」和「智能 App」是构成完整智能体验和服务闭环的三要素。 图 1 人工智能三元理论 关键词：人工智能，人机交互，交互…

一、用户流程设计的现状 在一些流程比较规范的公司中，在做 UI设计之前，通常要进行交互设计，对产品给出的原型或者需求进行分析和梳理，输出用户在这个需求下的用户流程。 关于用户流程的设计，现在市面上有很多工具，比如老牌的 Axure、浏览器端的墨刀、Figma、Adobe的XD、新进的 invision studio 以及现在越来越多人在用的 sketch。 我在进入交互设计领域之前，主要在做 UI…

对于用户而言，网站不仅仅需要有优美易用的布局和漂亮美观的图片，网站的细节和整体体验都要足够突出，才能让人印象深刻。 你想让访客去哪里，希望他们看到什么，以及如何让他们顺利地获得想要的信息，这都是设计师需要借助各种工具和技巧来实现的事情。 这就是 UI 和 UX 真正考验人的地方。用户体验设计师所面对的需求，从未像今天一样严苛而复杂，而需求的维度和内容也随着时间推移，正变得越来越多。现在，UX 设计…

编者按：近年来，交互设计被越来越多的提及，并且还产生出了新的工作岗位「交互设计师」，而且交互设计在产品设计中所占的地位也越来越重要。我也是一直想转交互，了解过Flinto、Principle、Framer、Origami等等，但不是原型保真度不满意，就是学起来太难，或者就是各种代码表达式，很难上手。 我对交互工具的要求： 别让我写代码 支持Sketch导入 支持Windows和Mac（因为我有两台…

编者按：明确系统状态、让按钮和操控可触知、打造有意义的转场、强调界面的变化、增加愉悦的细节...... 今天腾讯设计师@月焱瞳 这篇译文，总结了6个做出细腻动态微交互的技巧，建议阅读。 UI界面动效设计方法： 先看看有意义的动效设计是啥样：《设计师的必备技能！你需要学会设计有意义的动效》 再来学习腾讯设计师写的动效设计指南：《腾讯精品文！超多干货的UI界面动效设计指南》 围观实战案例：《高手常用的…

动效是UI设计中最强有力的工具之一，它强化了界面的互动性和生命力。动效让用户可以更快地从界面获取反馈，提供更快更有效的微交互，让关键的要素脱颖而出，通过实时、动态的方式创造引人入胜的体验。巧妙的运用动效，能给整个体验带来更多的加成。考虑到屏幕尺寸和使用场景，在移动端上动效的作用就显得更加关键而有效了。 在我们之前的文章中曾经探讨过动效和UI设计之间的关系，以及它是如何催生高效的微交互。移动端设备的…

@围脖上的嘟嘟王子 ：如何巧妙运用交互设计中的暗黑模式，我们需要更多的思考和学习。不要介意用户骂你流氓，那说明你流氓的不高明。今天这篇好文带你看看有哪些看起来很愚蠢其实很巧妙的交互设计，案例都是取自国内的网站/App，非常有借鉴性。 有些操作非常容易就能达成，有些操作明却非要多出几个步骤；有的icon的位置按照设计规则与用户使用习惯来设计，有的icon的位置却违背了规则和用户习惯；为什么会这样？是…

对于视觉设计师、交互设计师来说，他们需要做的不仅仅是设计一张张静态的页面和独立的icon，他们需要将这些元素整体组合在一起，根据整体画面感和视觉体验来做出修改。与此同时，开发人员查看网站交互设计时也需要通过一定的工具。因此，一款快速、方便的视觉稿设计工具就显得尤为重要，通过这些工具，设计师可以真实地看到网站呈现的效果，并且可以传递至其他同事，还可以更加便利地与用户进行沟通交流，查看反馈。 1、In…

编者按：不想在错误的软件上花功夫？花五分钟看完这篇！今天推荐的这6款交互设计工具全是经过@敖厂长UX 上手研究过的，优缺点都总结出来了，看完相信同学们就有答案了。 1.  After Effects 你想在短时间内制作复杂演示效果。 请使用AE，曲线/锚点等使用MOTION V2脚本进行快速调整（在曲线界面中 鼠标拖动选择关键帧-->拖动脚本上的滑块-->对比缓动曲线 获得你想要的曲线…

编者按：几年前交互设计师还是一个不明觉厉的工作，而现在，交互设计师和UI设计师一同战在设计最前线。UI设计师们拥有经典的PS和先锋的Sketch来开疆拓土，相比之下交互设计师这个新兴的职业还没有比较统一的设计工具。不过，交互设计社区的成熟催生出越来越多功能完善的新工具，也使得2014年成为了交互设计工具之年。 在设计之初，UI设计师所提供的视觉稿和最终的可交互原型之间，需要交互设计师借助工具来补足…

今天推送的资源是一组消息（警告、通知等）弹出框的PSD，一共65个，包括弹出式、下拉式等，全都免费下载哟，你可以应用个人或者商业的作品中。 还有一些特别的PSD都整理出来咯： 《30+免费精美的购物车PSD下载》 《50+精美的播放器PSD免费下载》 《推荐！一组优质的邮箱界面PSD免费下载》 优设网老规矩，如果您下载后，欢迎打包分享放置在评论中。谢谢：） Popup Modal Window S…

在App设计完成后，你如何向客户展示功能和界面相关的内容呢？与其花时间费口舌向客户解释，不如用漂亮的动画来演绎产品的设计水平。 效果都是 gif 图，网速着急的童鞋可先来《推荐：设计师萌妹子求职记》 看这个令人捧腹大笑的史诗级面试，或者到《17条资深经验！视觉设计师如何进阶提升自己能力》汲取干货。 上一篇《聊聊那些令人愉悦的动画效果》已经说明了用动画展示设计的重要性，比如比静态图传达的内容更多，无…

@嶒經de恛憶 ：随着iOS7的发布，一时间，如何设计和适配iOS7风格，成为了炙手可热的东西。每种设计，它总有自己的关键点和设计风格，iOS7也不例外。 同类型文章： 《PS+AI制作精致可爱的毛线风格图标》 《在PHOTOSHOP中创建精细的工具图标》 《手把手教！用PS设计一枚IOS 7风格日记图标》 个人总结下来，认为iOS7风格主要有以下几个关键点： 一 . 手绘图标 相信大家都已经注意…

尚：作为一个交互设计师，选用什么工具来完成快速原型绘制是一个争论不断的话题，从早些年“唯一”的选择 visio 到如今 Axure / Omnigraffle / Adobe Creative Suite 遍地开花，再加上在线工具balsamiq, Lucidchart 或 Google Drive，思维导图工具 XMind, Mindmanager 或 MindNode，在不同的细分领域给了我们…

这篇文章由江南大学设计学院研究生孙启玉翻译，主要谈手机App中的转场动效，强烈推荐原型设计师阅读学习，体验下动效的神奇妙用。 好文推荐： 还等什么！是时候来了解动态设计啦 超赞！高大上的动效设计方法及流程总结 设计师们喜欢追求细节的完美 他们把大量时间花在了像素级按钮，表单样式，设置类型以及如何让那些图标变得漂亮和精致。 …但是关于如何设计衔接却很少有人考虑。你点下按钮表单就…出现了？你滑动删除一…

cocoachina：可能你对Google Search的使用频率远没有YouTube或者Gmail高，但是谷歌出品的Google Search在设计方面也有很多值得我们借鉴的地方。在最近几年，谷歌在设计语言方面取得了很大的进步，比如Google Search中出彩的设计细节。 动态设计专题： 还等什么！是时候来了解动态设计啦 聊聊那些令人愉悦的动画特效（GIF图） 超赞！高大上的动效设计方法及流…

说是专为自由设计师准备，事实上每个设计师都值得拥有！ 来吧！不管是不是自由设计师，下面这些资源都足以震撼你的心灵提升你的工作效率！“至于你信不信，反正我信了！” ：） 好文推荐： 《超赞！18个在线工具应用网站设计欣赏》 《一起来画画！8款最佳HTML5绘图工具》 《PHOTOSHOP玩腻了！这10个图形编辑神器你知道吗？》 一、设计/开发工具 Mail’ette 在此平台上展示你的原型或半成品。…

@陈泽涛 Facebook上周发布的独立应用Paper今天正式上架苹果App，该应用看起来相当简洁，与众不同，并没有像Facebook的原有应用产品那样充斥着各种按钮和菜单。 Paper 的诗意现身，一个叫做Origami的工具功不可没。Facebook 开发的这款图像设计动画合成工具，可以快速构建原型，并在不写一行代码的前提下完成对复杂动画的合成和测试。自上个月发布后，全世界的设计师都可以免费使…

Android的粉丝为Google Nexus5的发布而举杯同庆。LG的这款智能手机使用了最前沿的科技却提供了难以置信的合理价格。同时，还有另外一个理由让我们兴奋——它是搭载了Google最新一代的手机操作系统Android 4.4的第一款手持设备。但是，Google的更新与iOS7相比表现如何呢？接下来让我们一起探索一下。 相关推荐： 《触摸交互设计快速入门：手机篇》 《交互设计之路：几款适合设…

在沉寂许久之后，磨砂背景突然大受设计师青睐，继而重回大家的视线。在使用过程中，我们不难琢磨出其中的原因：这种方法可以让主要元素着重显示，在背景中突出，能不漏痕迹的强调放置在表层的内容、图标以及图表等。 除此之外，模糊背景还有其他优点，比如说你不用再为选哪些颜色搭配而烦恼，因为你可以只选一种基本色，然后调节不同的深浅。 相关推荐： 《PS教程:简单几步创建复古风格的图文排版》 《经验分享：APP设计…