什么是交互视觉设计？
苏州朝歌包装设计为您解答：
交互视觉设计相较于传统的视觉设计更倾向于用户目标的实现，以用户为设计理念中心，注重用户体验。从视觉上提高用户想参与的互动欲，从而唤起对产品、品牌的关注度。
首先来介绍下“界面设计”、“视觉设计”、“交互设计”这三个词。
交互设计：在产品经理定义完产品的需求、目标等等后，交互设计师确定用户达到每个小目标的过程中，用户和系统的对话过程；
界面设计：在系统和用户的每一个对话中，系统说的每一句话即是呈现给用户的一个页面，交互设计师确定这个页面应该表达什么，界面设计师在这个的指导下设计这个页面，达到交互设计师的要求；
视觉设计：这个相对比较简单，在不违反界面设计师的设计目的的情况下，将每一个页面美化。
本质上来讲这三者没有比较的意义，因为它们是不同视角下的概念。
如果非要划出范围，大致会是这样：
它们有大量不重叠部分。界面设计还包括很多技术层面的东西，视觉设计包括大量感官传达的东西，交互设计也有一些其他的纯行为流程类的东西。
但是，现实工作中一般不会牵涉这么广，互联网对三者的理解是窄化了的概念。
交互设计是一种目标导向设计，所有的工作内容都是在围绕着用户行为去设计的。交互设计师通过设计用户的行为，让用户更方便更有效率的去完成产品业务目标，获得愉快的用户体验。
如果是广义的UI设计，应该包括原型设计、交互设计、视觉设计。狭义的UI往往只是人们看到的最后一个环节UI视觉设计，交互是当用户发生动作事件，所产生的反映。比如点击弹出下拉菜单，浏览过链接的颜色变紫，这都是非常细微的交互，但却处处体现着用户体验。交互设计更多是对用户行为响应的设计,UI视觉设计，更多是界面的外观静态设计。
（2）保持一致性。语言、布局和设计是需要保持一致性的几个界面元素。一致性的界面可以让用户对于如何操作有更好的理解，从而提升效率。
（3）提供反馈。界面要始终保持和用户的沟通。
（4）方便使用原则：符合用户习惯为方便使用的第一原则。其它还包括，实现目标功能的最少操作数原则，鼠标最短距离移动原则等。
（5）界面色彩要求：计算机屏幕的发光成像和普通视觉成像有很大的不同，应该注意这种差别作出恰当的色彩搭配。对于需用户长时间使用的系统，应当使用户在较长时间使用后不至于过于感到视觉疲劳为宜。例如轻松的淡彩为主配色，灰色系为主配色等等。切忌色彩过多，花哨艳丽，严重妨碍用户视觉交互。
（6）界面平面版式要求：系统样式排版整齐划一，尽可能划分不同的功能区域于固定位置，方便用户导航使用；排版不宜过于密集，避免产生疲劳感。综合上述几个方面的考虑，作者完成了本系统的整体界面设计和界面布局，为下一步系统开发做好了准备。
我们在讨论什么？为什么会出现这些问题？
这些讨论都围绕着 “ 交互逻辑 ” 。接下来我会通过案例+要点的方式，和大家一起聊聊在视觉设计中要注意哪些交互逻辑，如何选择合适的方式来表达交互逻辑。
单页活动 的交互逻辑是相对简单的，只要理解交互稿中的主题表达，元素内容即可。这种类型的设计，给视觉同学的发挥度是很大的。
平台类设计 项目中，框架结构更严谨，交互逻辑的包含关系相对复杂，需要视觉同学去理解的交互表达也更多。
通过上图的交互、视觉稿对比，我们发现：这份视觉稿在理解交互稿的逻辑基础上，样式的使用非常灵活。比如服务保障区，视觉同学将内容区从banner正下方，挪到了右侧；再比如至IN尖货楼层，视觉同学将楼层的title进行了放大及突出处理...
这些变化是否改变了交互逻辑，在视觉阶段这样的调整是否合适？看完本文，你就会有清晰的答案。
可以看到，上图中新品速递的样式，在视觉环节有比较大的调整，主要是模块名称的位置和元素展示样式有了新的设计。 交互稿表达的是：这个区块的模块名称是 “ 新品速递 ” ，且希望用户第一眼就能看到；视觉稿正确的传达了这一逻辑。 至于样式选择则是视觉同学的专业范畴，可以灵活处理，包括添加new元素标签、底部填充色样式等。
这个案例中，我们需要了解到元素的视觉顺序（眼睛浏览路径）应严格按照交互逻辑，而元素表达可由视觉同学灵活处理。
你觉得下面这组案例，视觉稿件是否完整传递了交互逻辑？请先自己思考一下，再来看我的答案。
交互逻辑上，我们可以看到：整个区域有两个模块，“ 正在进行 ” 和 “ 品牌精选 ”；每个模块有四个等大的展示单元格。而视觉稿中， “ 正在进行 ” 模块中的模块比重其实是进行了调整，变成两大+两小的组合。从展示逻辑上来说，视觉稿的输出是不符合交互逻辑的。
但是，视觉稿的输出视效明显更有层次，更灵活；那么，能不能这么改呢？
这就要回归到交互为什么输出等大的样式这个问题上了。在交互环节，运营同学最初并不需要对四个专辑进行优先级区分，认为同等层级即可，因此交互进行了最初的稿件输出。
这种情况下，交互和视觉同学可以先进行讨论，从设计角度来看，这个整对页面整体逻辑有无严重影响，如果内部也认为改动更好，则可以拿视觉稿去和运营同学沟通，并告知原因。虽然我们调整了优先级，但视觉效果更好，建议他们进行这样的调整。
这个案例中，我们要重点关注模块的比重展现，以及模块样式的灵活处理。
上面这个案例同样也是关于模块的。可以看到元素的阅读顺序、模块表意和层级关系交互视觉稿都是一致的； 而最大的调整是模块名称区的优先级发生了较大变化，从不强调楼层名称变成楼层名称成为区域视觉焦点 。这类型改动建议和交互设计师进行讨论，在该案例中，虽然优先级逻辑发生了变化，但不影响用户的浏览体验，且能丰富楼层样式，因此可以调整。
对于同层级关系的单元格，我们也可以采用不同的表意方式，比如上面案例中，视觉环节使用了叠起的展示样式。相对于交互，优点在于增加了一种互动方式，而缺点则在于会对部分信息进行遮盖，不会直接呈现。这个案例的处理方式是，我们将两种方案的优劣告知运营方，运营方认为可以牺牲直观呈现，而选择互动方式的不同呈现。
TAB控件体现的是并列关系的多个模块呈现。可以有不同的视觉方案来体现。
我们可以根据表达主题，对TAB样式进行图形化设计。 比如新品推荐模块，是以一周七天的时间维度设计TAB内容。在视觉表现上，我们可以把样式设计的更像日历。
上面案例采用了更突破的视效体现，打破TAB的方形样式。 这带来TAB区域的扩大，会影响到一屏以后的内容呈现，需要和运营讨论是否可以接受。这种设计更适用于活动页，对首屏内容和页面长度要求不那么严格。
TAB的位置也会影响区块内容的引导。 比如在下图案例中，TAB的位置影响了阅读的语意。交互稿中，希望用户先通过TAB了解推荐手机的不同维度；而视觉稿中，则是先让用户看到主要推荐的产品，如果没有合适的，再通过TAB看其它。
元素的不同呈现顺序会体现不同的交互逻辑。
我们来看上图中的单个推荐区，交互上的顺序是图→人物→具体商品描述，第一强调的是商品，其次是用户的评价；而视觉上的顺序是人物→图→具体商品描述，第一强调的是评价的人，再说商品是什么。 两种逻辑其实都符合 “ 食鲜者说 ” 的逻辑，但从属关系是不同的。 这里的决策是，如果评价用户是知名度较高的，可以通过人物为食物加分，则我们选择视觉稿逻辑；而如果我们是靠商品图本身致胜，评论者只是辅助决策元素，则选择交互稿逻辑。
通过去色，可以去掉颜色和元素对界面优先级的影响，更聚焦逻辑本身。 对比下面案例，去色后可以更容易看到，优化后方案更加整体，视觉引导也更加顺畅。
模块位置调整一定要和交互同学沟通
还记得开篇留的题目嘛？相信你已经可以明确下面两张稿子中，交互和视觉表达逻辑的不同处，以及哪些逻辑能改哪些逻辑不能改了吧。这里，最后强调一下，模块位置的调整对整个页面的影响很大，涉及到模块重要层级，页面调性等的改变。
哦，还有一个小点补充以下
不同的元素顺序排列决定了用户看界面的阅读顺序，交互在选择样式的时候会考虑哪种顺序更利于表达模块想传递给用户的感受。
今天的小课堂结束啦 ~ 拜拜 ~ 恩，图片来源均为JDC_BAC ， 我交作业啦 ：）
下期预告
“ 样式，位置 ” 只是交互还原中的一个点，后续还有包括 “避免歧义，保持一致”、“ 多状态的控件 ” 等很多内容。如果你有兴趣，我们下次再一起聊呀。
UI 设计师的职能大体包括三方面:一是图形设计，软件产品的产品“外形”设计。二是交互设计，主要在于设计软件的操作流程、树状结构、操作规范等。三是用户测试/研究，这里所谓的“测试”，其目标恰在于测试交互设计的合理性及图形设计的美观性，主要通过以目标用户问卷的形式衡量 UI 设计的合理性。
UI设计目前的前景还是很不错的，很多企业都缺少 UI设计师。而且可以看到的是，现在社会的发展，更多的智能机和智能机器人研发出现，这些都离不开UI 设计师。所以说 UI 设计的是很有前途的，是不会失业的。而且 UI 设计门槛不高，要入门也不难的。
从工作内容来说，UI 设计在当前的互联网领域、科技领域可以说无处不在，
好的 UI 设计能够明显提升用户的使用体验,从而给产品带来更多的附加值,所以UI 设计对于互联网产品是非常重要的。目前 UT 设计通常分为两个大的工作方向，一个是交互设计,另一个是视觉设计。
总的来说，UI 设计相比较于编程而言，还是非常适合大众学的并且就业前景很广阔。学完 UI 设计，能获得一份稳定而又不失乐趣的工作，同时有利于追求更高品质的生活，在艺术领域可以获得更多的启迪。
平面设计实现过程是用印刷工艺去实现，比如一张名片，设计好了需要印刷出来才能使用，这时就需要借助于印刷工艺才行。
UI设计实现过程则是运用程度代码，设计好了后通过程序代码让UI设计实现其功能。
第二个区别，完成设计工作的人数不同。
平面设计一个人便可以完成全程的设计。老板或客户提供需求后，平面设计师便可以直接完成设计。
UI设计则需要团队成员一起设计方能完成，比如设计一个APP，需要有老板或客户给一个需求，然后产品经理，交互设计师，视觉设计师，程序员来配合起来才能完成。
第三个区别，工作的公司类型不一样。
平面设计一般去的公司，是传统企业，广告公司居多。
UI设计一般去的公司，是互联网企业，比如百度腾讯这样的互联网公司。
第四个区别，工作量不一样。
平面设计一般一个需求，就一到二页，比如一张名片，只有正反二面，只设计二面就行。
UI设计的话最少也是几十上百个页面，比如一个APP有登录页面，引导页，注册页面，主页面，设置页面，功能页面等等。
设计师的核心训练，就是学会怎么发现问题和解决问题，就这么一个事，一个最简单的东西，所以，没必要搞得那么复杂。
视觉设计的概念广度太大了，我们目光所及的室内、平面、工业、空间设计，都包含其中。
平面设计、UI设计的最主要区别，就是承载媒介的区别，一个是印刷物料，另一个是电子屏幕。
平面设计，需要解决的的问题是准确传达信息，保持与受众的紧密沟通。
而UI设计，会更加重视人们的使用习惯，关注人们是如何与设备进行交互的。
但是它们之间也有很多共通之处，那就是视觉表现所遵循的：色彩理论、版式理论，以及光影透视结构的自然视觉规律。以及在实现视觉创意表达的过程中，都会运用到Photoshop、illustrator、Sketch或者其它设计软件。
另外，纠正一下：UI设计不是敲程序代码的。在实际工作中，通常由UI设计师出具视觉稿，然后交由前端工程师，通过代码实现UI界面的重构，由后端工程师完成整个产品的数据结构、逻辑处理。
交互设计和视觉设计是现在互联网公司很热门的两个职位。两者之间互相配合设计出，从流程、感官上都满足用户需求的产品，二者缺一不可。
现在有很多公司没有交互设计师，仅是视觉设计师与产品经理就配合完成了产品的设计；但是辩证的去看，交互设计师只存在与较具规模的公司。那么是否是视觉设计更具价值，只有大公司能养得起价值不那么大交互设计？还是交互设计师的价值较高，但少有人的认知到？
交互设计师与视觉设计师的定义以及工作职责我就不做分析了，比较基础，不懂的可以自行百度。
（这是一张吸引点击的占位图）
1.交互设计和视觉设计的目的
交互设计和视觉设计的目的其实都是一样的，他们都是为了给用户带来愉快感。具有良好交互设计的网站，能让用户使用起来感觉很顺畅，很方便，这就是给用户来带愉快感。而好的视觉设计能传达一种感情给用户，让用户能够享受这种感情或者达到某种共鸣，这也给用户带来了愉快感。当一种产生愉快感不足时，可以用另一种愉快感弥补，但你很难说哪种愉快感一定超越另一种，具体的情况还是要看网站的性质。如是工具性质的强交互类的网站，这时交互设计会比视觉设计对用户影响更大些。反过来，一些视觉展示和体验类的网站通常视觉效果对用户影响更大，这时视觉设计会更重要些。
像airbnb的这个设计，新设计是「比交互稿还交互稿」，这是交互设计的趋势，字体设计与信息结构决定了这个产品的体验核心。
2.交互设计和视觉设计发展阶段不同
目前，交互设计是比较新兴的一个职业，从事这方面的人还不是很多，企业也渐渐发现它的重要性。相比竞争比较激烈接近饱和的视觉设计，交互设计目前的待遇可能会比视觉设计高些。但这并不表明交互设计的重要性超过视觉设计，只是说明交互设计这个职务的竞争还处在粥多僧少的阶段。
我们再来看Ins的改版，Ins的新icon已经足够colorful了（确实非常colorful……），所以更希望App内的颜色是来自于用户上传的照片和视频而不是App本身，然后就把影响用户内容展现的干扰给干掉了。
3.交互设计师与视觉设计师的真实工作状态
抛开设计的产出与公司发展的阶段，单纯的来看两者的工作状态。此处借用腾讯高级交互设计师C7210的对于业内现状的看法：
目前所能看到的“融合”分为两类
第一类：交互设计师与视觉设计师在产品层面统一认知，理解并认同商业意义及产品目标，以此为基础，在各施所长、各尽其职的同时，更多的学习、了解彼此职能的目标、焦点和工作方法，互相理解，融会贯通，减少分歧，降低成本，以最大化的合力完成产品设计工作。这种模式下，所谓“UX/产品设计师”是对两种职能的统称。本质上讲，这就是对于我们如今所熟悉的传统团队模式的一种渐进式提升。
第二类：团队同样由“交互设计师”与“视觉设计师”这两种传统意义上的独立职能构成，却在实际项目中刻意追求职能融合的理念，刻意模糊领域界线，刻意忽视以产品功能性、实用性及用户研究作为主要关注点的交互设计与以外在美观性、表现力和品牌传达等等作为主要关注点的视觉设计在思维模式和工作方法上的差异，刻意忽视多数成员因能力与视野有限而难以担当综合性owner角色的现实，以提升团队综合战斗力和产出效率为名义，实则鼓励各自为战或是重此轻彼。对于原本相对成熟的、成员能力相对较强的团队，这种模式在短时间内或许难见弊端，但理念与方式的畸形最终会体现到产品当中 – 或是只具备功能性而毫无个性与感情色彩，或是徒有其表，在视觉风格与动效运用等方面都能成为设计师个人的优秀案例，却难以成为在实际应用场景中辅助用户高效便捷完成目标的优秀产品。在这样的团队中，“协作”只是表象，人人都是名义上的“产品设计师”，但设计决策及团队产出更多是由其中的“核心职能”所定义的（或交互或视觉），而另外一个职能在多数时间扮演着支援或顾问一类的角色。
归根结底，不论是交互设计还是视觉设计都是用户体验设计，只是两者的出发点不同，思考问题的方式以及解决用户需求的产出不同，但是二者缺一不可，是产品拥有良好用户体验的保障。
