UI/UE设计-官网设计

官网作为公司的重要门户网站，代表着公司的形象。非常重要

（仅做排版/配色/动效/交互/设计思路的学习参考）

官网设计-作品展示(排版/配色/动效/交互)

部分交互细节展示

想法构思

（1）官网作为公司的门户网站，代表着公司的形象，而首页首屏是用户进来官网后的第一展示页面，所以良好的视觉设计可以给用户留下一个良好的第一印象

（2）除了良好的视觉美感，做好页面信息导航和首页的信息导航，可以更好的宣传自己，可以帮助用户快速了解公司的基本信息，快速找到想要查看的内容

（3）产品作为公司的重要收入来源，所以最大化的产品宣传，做好商业和设计的平衡也是非常重要的。在合适的宣传场景下，产品入口/体验入口、客服入口都需要配套

交互方案

（1）页面窗口导航

（2）申请体验按钮

（3）配图交互

（4）首页内容导航

想法构思

（1）做极简的交互，内容动态化展示，即便用户不按鼠标，仅上下滑动页面，就能浏览完页面的所有内容

（2）合理的动效时间控制，保证用户在间隔时间可以看完相关的内容

（3）做高效/轻量的交互，鼠标悬浮文案即可实现内容切换

交互方案

（1）一共5个块内容默认是从上到下一直循环自动切换，进行轮播展示，间隔时间4秒，选择框的切换状态2种（选中和未选中），如图所示

（2）用户也可鼠标悬浮，进行手动切换展示

（3）申请体验和了解更多按钮

想法构思

（1）排版设计一个很大的优势是突出重点，动效设计一个很大的优势是引导用户的视线

（2）好的交互，可以充分发挥排版设计和动效设计的优势，然后实现互动

（3）解决方案的点击，间接反应了用户对产品的兴趣度/需求度。所以这里信息的突出展示和点击引导/交互都非常重要

交互方案

（1）一共6个块内容，第1/3/4张，默认显示图1；第2张默认是显示图2 （每张图都有对应的2张，分别为图1和图2）

默认是从右到左一直循环自动切换，进行轮播展示，间隔时间4秒；其中到第2个的时候，会被放大，显示图2；有切换动效。

（2）用户也可鼠标点击，进行手动切换展示

反馈1：鼠标悬浮方向键，方向键变绿色#22A8A4

反馈2：可点击 向左 方向键，右边的图往左移动1个

反馈3：可点击 向右 方向键，左边的图往右移动1个

想法构思

交互方案

（1）一共4个点内容默认是从左到右一直循环自动切换，进行轮播展示

（2）用户也可鼠标悬浮，进行手动切换展示（鼠标悬浮状态和选中状态一致）

交互方案

（1）鼠标悬浮，方框往上缓动10像素

交互方案

（1）一共10个块内容默认是从右到左一直循环自动切换，进行轮播展示，间隔时间4秒，有切换动效

（2）用户也可鼠标点击，也可进行手动切换展示

交互方案

（1）鼠标悬浮文案块内容，整体往上缓动10像素；同时背景框样式有做变化

交互方案

（1）一共4个块内容，从右往左缓慢移动

（2）鼠标悬浮，停止移动，对应的方块内容整体往上缓动20像素，出现可跳转的icon

（3）鼠标点击方块内任意位置，进行对应的页面跳转

（4）鼠标离开，继续从右往左缓慢移动

部分页面展示