2024年网页交互和设计教程 篇1
首先要明确汇报对象，根据不同的人制定不同的汇报思路和组织不同的语言。
一、向领导汇报。一般思路是先说结论，然后分析得到结论的过程。交互设计的话，我的工作习惯是第一次给出3个方案和一个主推方案的主要流程，然后询问领导对三个方案的意见，看是否有第四个方案，也就是老板想的集合三个方案的优点的方案。每个方案都要说明方案本身的优缺点，然后说明主推方案的优势，比如从开发成本、项目进度、可扩展性、统一性角度去说明。
二、向视觉同事汇报，也就是确定方案后的说明。这时需要告知同事项目背景和目的。同步共有几个需求点，简要讲解需求的流程，然后逐个页面的说明。此时要说明的是设计要点，风格统一性，页面模块优先级等，让设计同学知道自己应该重点关注哪些，哪些可以创意思考，哪些可以简单处理，哪些可以套用之前的格式。
三、向开发、测试汇报，这就是所谓的交互需求评审会。开发在乎的是逻辑，测试重点听的是流程细节，所以可以从大逻辑出发，先口述大体流程，然后逐个页面进行说明。当然首先还是要说明一下需求的背景目的，然后主要讲解一个页面中有哪些功能，哪些操作，每个操作后的展现形式。然后一个功能从开始到结束的流程进行说明，同时要说明哪些是新功能，哪些是旧功能的优化升级。哪些不需要更改，哪些需要优化等细节问题。
因为每个职位的人听取方案的重点不同，所以先搞清楚你汇报的对象，然后了解他想知道什么，他更在意什么，就把他关心的重点放在前边说明。
2024年网页交互和设计教程 篇2
好好考一个设计类高校，学好基础知识后找个大公司去实习工作。这样才能学好
2024年网页交互和设计教程 篇3
给你推荐几个常用的网站：
1、站酷，国内最大的设计师网站，里面优秀的作品很多。
2、UI 中国，国内算是不错的 UI 设计网站。
3、Dribbble，全球最有名的 UI 设计网站，不过里面的作品偏概念，可以了解设计趋势。
4、Behance，全球最有影响力的设计网站之一，Adobe 官方出品，里面的作品完成度更高，更具有实际落地价值。
5、Pinterest，全球最多人访问的设计灵感获取网站，里面各种设计类型都有，可以日常访问提升设计阅读量，培养设计审美。
6、https://www.invisionapp.com/ 这是一个国外的设计协同工具网站，但是里面的一些设计文章写得很不错。
7、Medium，国外最大的文章平台，里面有很多优秀的 UI 设计文章，值得多多学习。
8、Ant Design，由蚂蚁金服推出的 Web 端设计语言，组件完整，设计理念也比较有参考价值，值得好好学习。
9、Material Deisgn，由 Google 官方推出的设计语言，在设计圈备受推崇，内容含金量很高，但是学习量也非常大，值得静下心来研究。
10、http://www.awwwards.com/ 优秀设计网站的排名，可以理解为 UI 届的红点奖。更新很频繁，里面的设计页面都是比较有创意的，用来开发脑洞。
11、http://iconfont.cn/ 阿里官方的图标库，用起来很方便，可以大大提升设计效率。
12、https://unsplash.com/ 最好用的免费图库，里面的图片都是可以免费商用的，更新频繁，质量也非常高，适合平时做 UI 的时候拿来用。
暂时分享到这里，如果点赞高，我再更新，十来年的积累，大概有百来个网站吧。
2024年网页交互和设计教程 篇4
之前整理过UI的一套系统的教程，稍后会给出完整的UI学习路线图。
要说交互设计，我相信每个设计师都对交互设计有一定的理解。对于UI设计来说，交互设计是对于用户产品使用行为的优化设计。一个UI设计师为了让自己的产品得到用户的喜欢，一定要揣摩用户的心思，了解用户的使用场景。比如说一个购物商城，在哪里设计一些技巧，就可以让用户不自觉的多下单，我想这就是交互设计的真谛吧。
干货分享UI学习路线图
第一阶段
推荐视频：
PS精品教程视频：http://pan.baidu.com/s/1c17doVu
第二阶段
推荐视频
手绘教程：http://pan.baidu.com/s/1pKY1WuR
第三阶段
推荐视频
ai教程视频：http://pan.baidu.com/s/1kUNKcmj
第四阶段
UI设计视频教程 http://pan.baidu.com/s/1o8TmLyM
电商设计实战：http://pan.baidu.com/s/1c0CaXC
电商广告创意设计视频教程 http://pan.baidu.com/s/1dFvFl1v
第五阶段
AE视频教程：http://pan.baidu.com/s/1mh6hJ7a
第六阶段：
WEB前端视频教程：http://pan.baidu.com/s/1eSecg5W绿色食品网整站制作项目：http://pan.baidu.com/s/1dFDWdR7
JavaScript & jQuery精品教程：http://pan.baidu.com/s/1hr8XHSo
响应式网页制作：http://pan.baidu.com/s/1bp8Ir2R
2024年网页交互和设计教程 篇5
一个完整的交互设计流程是怎样的呢？
首先，我们先来认识一下产品的五个用户体验的要素
用体验的五个层面分为：战略层、范围层、结构层、框架层、表现层。
五个层面自上而下地建设，具备基本的双重性、用户体验的要素和应用这些要素。
所谓战略层，即为产品目标、用户需求，通俗来讲，经营者想从网站上得到什么，用户想从网站上得到什么？
所谓范围层，即功能规格和内容需求，其意义在于这是一个有价值的过程，同时能够产生有价值的产品。比如，提供用户可以保存之前的邮寄地址功能。
结构层，即交互设计、信息架构层，其目的是为了确定各个将要呈现给用户的元素的“模式”和“顺序”。交互设计关注于将影响用户执行和完成任务的元素。信息架构则关注如何将信息表达给用户的元素。重点：理解用户的工作方式、行为和思考模式。
框架层，即界面设计、导航设计、信息设计层。
界面设计是用来确定界面空间元素以及位置，提供用户完成任务的能力，通过它，用户能真正的接触到那些“在结构层的交互设计中”确定的具体功能。
导航设计：呈现信息的一种界面形式，提供给用户区某个地方的能力。
信息设计：呈现有效地信息沟通，表达想法，它是这个层面中范围最广的一个要素。
实现方法建议以线框图将设计信息、界面设计和导航设计放置到一起，形成一个统一的、有内在凝聚力的架构的地方。
1，通过安排和选择界面元素来整合界面设计；通过识别和定义核心导航系统来整合导航设计；通过放置和排列信息组成部分的优先级来整合信息设计。
线框图的好处是可以确定一个建立在基本概念结构上的架构，同时指出了视觉设计应该前进的方向。
表现层，即为视觉设计。
界面设计考虑可交互元素的不足，导航设计考虑在产品中引导用户移动的元素安排，信息设计考虑传达给用户的信息要素的排布，解决并弥补“产品框架层的逻辑排布”的感知呈现问题。
评估一个页面的视觉设计的简单方法：终于眼睛。一个成功的设计有2个重要的特点：
遵循的是一条流畅的路径；在不需要太多细节来吓到用户的前提下，它为用户提供有效选择的、某种可能的“引导”。
所以，我们的设计师应该怎么做呢？
读懂原型图
读懂PRD。确保在需求理解上，与PM保持一致；查找漏洞。人无完人，在成熟的PM，也难免有疏漏。找出遗漏，与PM反馈、沟通；提出产品新想法。读PRD时，总会有一些产品的好想法冒出来，及时与PM和团队沟通；开始构思交互。
草图快速沟通
通过草图，快速将“产品关键流程”、“关键交互界面布局”呈现纸面，以此与PM、技术沟通至达成共识；目的是为了：
再次扫遗漏；收拢想法。这个阶段，产品设计基本定型；达成共识。确保让产品、设计、技术队要做的事情有一致的理解，PM需更新PRD、技术开始做开发准备。
Axure线框图表现产品流程、界面
包含：产品流程图、全部的页面原型。
Axure让团队对产品的理解无异议，对最终的产品有直观的了解。这个阶段，产品需求冻结。开发人员可以依据原型对UI关联较小的部分进行技术开发。
视觉设计
有前面两个“扫清障碍”的过程，这个阶段，视觉设计时非常舒服的事情。在相对完整的设计规范、控件规范的前提下，视觉包括：
风格探索；关键页面的视觉设计；关键交互动画表现（如果无法口头项技术表达动画效果时，给出一个“活的”效果，是非常直观的。
视觉素材输出、设计文件标注
每个项目最终给到开发人员的都要有效果图、标注图、切图三个文件夹。Pxcook、Markman是不错的标注工具，Cutteran、Assistor PS是很方便的切图工具。
开发后期，细节跟进
与开发跟进细节，是设计过程的一部分。在我们团队，完全依靠规范作业、设计文件标注（不和开发人员说一句话）,能够确保80%的交互、视觉细节能够被还原。剩下的20%，就要设计师与开发人员肩并肩坐在一起打磨了。开发过程中，一定要预留这个时间。主要包括：边距、字体、界面动画的数值微调。
2024年网页交互和设计教程 篇6
交互设计师的知识体系
交互设计是一门交叉学科，广义的交互设计涉及人机工程学、心理学、社会学、设计学等等知识，从狭义的角度看，交互设计主要指人机界面交互。涉及到用户研究能力、需求分析能力、信息架构设计能力、流程逻辑设计能力、原型设计能力、编写交互设计文档、了解设计原则以及一些其他能力。
▲交互设计师知识体系
01用户研究能力
在一个完整的UED团队中，其实是有专门的用户研究人员。用户研究人员负责做用户研究，并把研究结果制作成用户研究报告。在这里把用户研究放到交互设计师的知识体系中，是因为用户研究在整个设计的过程中有着至关重要的地位。
交互设计师虽然不是专职的用户研究人员，但是也需要掌握一定的用户研究知识，学会建立用户模型，分析用户研究数据，挖掘用户行为数据。这样有利于交互设计师在设计阶段对产品核心需求及价值的把握，常用的用户研究方法有问卷调查、深入访谈等。
02需求分析能力
当面对用户研究得到的数据时，交互设计师应该具有一定的需求分析能力。需求分析的目的是明确产品目标用户、使用场景、产品定位、产品功能优先级、并让开发、测试等相关人员能明确了解需求，便于日后印证设计。交互设计师需要在了解用户的主导需求之后能够挖掘出用户的潜在诉求，并对竞品和已有的产品版本进行分析。
03信息架构设计能力
信息架构是产品的骨架，是对产品功能进行的层级式的梳理。良好的信息架构可以对产品的功能进行明确的分类，并明确各个层级之间的功能关系，符合目标用户的心理模型。常用的信息架构模式包括层级结构、线型结构、自然结构、矩阵结构。交互设计师需要了解各个结构模式的特点并根据自己产品的特点选择合适的信息架构形式。
信息架构常用的梳理方法是卡片分类法。通常的操作过程是设计师准备一定量的功能卡片，让用户将这些类型进行分类，形成功能集群，并对每个功能集群进行功能性概括。
▲“最美应用”信息构架
04流程逻辑设计能力
流程逻辑设计是基于上步中的信息架构，也就是依据产品功能进行的。流程逻辑设计要表现用户使用产品过程中的关键点，明确产品的操作链，是对信息架构的逻辑梳理。
在流程设计过程中，可以使用Visio、Mindmanger等专业的流程图绘制软件进行绘制，在绘制流程图时要注意考虑流程节点的正常情况和异常情况。
05原型设计能力
产品的流程逻辑设计结束之后，就进入原型设计的环节。原型主要表现业务流程、产品的框架和布局以及交互规则，原型分为低保真原型和高保真原型。
低保真原型的设计主要是在设计的开始阶段，采用线框图的形式制作一个可演示的Demo，便于设计师与产品经理讨论修改。高保真原型是指更接近真实产品效果的Demo。在实际工作中，大部分项目都不需要高保真，只需要低保真原型的设计。
▲原型图示例
06编写交互设计文档
交互设计文档本质上是一种交互设计说明，是用来梳理交互事件、页面之间的逻辑关系、页面跳转等交互动作的文字和图片相结合的说明稿。交互设计说明书的阅读对象是产品经理、UI设计师、研发人员、测试人员。交互设计文档包括软件页面、页面状态、页面流程、交互动作说明文字。好的交互设计文档可以让团队中其他的人员能迅速了解产品的整体架构和逻辑关系，以便对产品进行评审和改进，避免产品设计的偏差。
▲交互设计文档示例
07了解设计原则
掌握一些交互设计原则是交互设计师必备的技能。交互设计不是无章可循，而是有一些设计的原则需要交互设计师遵守，如一致性原则、Jakob Nislsen的10条可用性原则、易用原则、中间用户原则、基于用户心理模型、2——8原则等等。基于交互设计原则的交互设计可以保证交互设计的流畅性。
08其他能力
除了上述讲到的能力之外，交互设计师需要了解不同设计平台的规范、有一定的文案设计能力，同时最好可以了解一些代码内容，建议学习一些HTML、CSS、JS、PHP、Android、C#、JSP、Java等知识，这样便于交互设计师与开发人员沟通，可以使项目的进展更加顺利。
交互设计师的工作流程
交互设计师这个角色通常会贯穿到整个项目的始终。交互设计师的工作流程可以分为以下几个步骤:
▲交互设计师工作流程
01参与需求评估
一个完整的设计团队一般有专业的需求分析师，需求分析一般由需求分析师根据用研结果提交需求说明书，而如果没有这样的角色，需求分析主要由产品经理或者交互设计师完成。参与需求评估的人员一般为老板、项目经理、产品经理、研发人员、交互设计师，每个人对需求进行评估，提出自己的意见，通过多次迭代最终形成最终的需求方案。
02功能设计
在需求确定之后，需要进行产品主要功能设计。这部分工作的主要负责人是项目的产品经理，产品经理需要根据需求、并综合商业等其他因素对产品功能进行设计。在大型项目中项目经理不负责执行时，就需要交互设计师进行产品功能设计。
03产品功能评估
在功能设计之后，需要对产品功能进行评估，主要是衡量产品功能设计是否按照需求来做，哪些需求已经提出、哪些需求的功能没有得到满足，明确产品方案是否通过。如果不能通过需要怎样修改。
04信息架构与流程图设计
此时交互设计师正式进入交互设计阶段。交互设计师需要根据产品功能进行信息架构的设计，细化功能细节，之后进行交互流程的设计。
▲“在线等”app流程图
05原型设计
在明确了产品的信息架构和流程图之后，交互设计师进入了原型设计阶段，在原型设计的过程中要明确产品的页面逻辑和跳转关系，明确交互动效，但不用纠结于细节交互的实现。在设计的过程中尽量不要使用色彩，以免给UI设计师的设计带来困扰。
▲原型图示例
06撰写交互设计文档
在原型设计完之后，交互设计师需要撰写交互设计文档。交互设计文档主要是用来梳理交互事件、页面流程逻辑和跳转等交互动作，主要以文字加图片的形式展示。交互设计文档是提供给UI设计师、研发团队及测试团队，便于整个团队对产品有深入的了解。
07交互设计方案评审
交互设计方案的评审与产品功能评审相似，明确交互部分哪些是按照需求做的，哪些地方还有不足，有不足的地方需要加以改进。
08与UI设计师、开发测试人员的协调沟通
交互设计师需要和UI设计师协调沟通，明确交互原型，并对UI设计师的视觉输出方案从交互的角度进行评估，有不一致或者遗漏的地方需要让UI设计师进行修改。在开发阶段，若开发对交互有疑问，交互设计师需要和开发人员进行沟通，并确定最终方案。在测试阶段，测试人员会考虑到一些更全面的使用场景，这时就需要交互设计师补充相应的交互设计说明。
案例：小红书设计
爱美的女生对小红书这款APP肯定不会陌生，它是一款国内移动跨境电商APP。在APP的设计过程中，首先就是要了解用户的需求，对目标用户的需求进行进行深入挖掘并进行需求评估。
小红书的目标用户集中在女性、职业主要以大城市白领、公务员、以及留学生为主。其主要需求是寻求一种安全便捷的境外购物途径，同时能解决选择难的问题。小红书的定位为社区型跨境电商。
小红书根据用户需求进行功能设计，其主要功能点是通过搜索内容笔记、获取产品的评价、性能等，从而促进用户在小红书上消费。
根据产品功能评估的结构完善产品功能，并进行信息架构和流程图的设计。之后进行原型设计，并进行交互设计方案的评审。与UI设计师沟通，UI设计师根据交互原型进行视觉设计。最后与开发测试人员协调，实现设计效果。小红书最后效果如下图：
了解交互设计师的知识体系和工作流程，可以帮助刚刚入门的交互设计师对交互设计有一个整体性的了解，方便对交互设计进行系统深入的学习。