1.产品定位清晰

网站本身被视为一种产品,产品的风格取向必然受到产品本身属性或用户属性的影响。也是了解产品定位或目标用户的重要环节。这些链接可以开发更符合产品或用户的信息框架或视觉表达。通常我们可以将网站类型分为企业官网、品牌官网、营销官网、门户网站、论坛相关、综合性网站六大类,下面就这些网站的定位和视觉特点作一简单的介绍;

企业官网风格较为庄重正式,个性化程度较低,相对平直;

品牌官网的内容是多样化的,具有更个性化的视野和互动性,没有太多的表现限制来传达品牌优势或能力。

营销网站更能体现产品或业务能力,且有相关咨询或消费者入口,图片插画应用不会少;

门户网站是指提供某种综合性互联网信息资源并提供相关信息服务的应用系统。

BBS又称BBS,是一种聚集用户进行信息、情感、娱乐等领域活动的电子公告系统。

综合性网站,内容结构更丰富,如企业营销品牌整合,通常以产品营销为核心,文字与文字搭配工作不累;

2.信息框决定了董事会的细节

通常一个网页如何设计版面,如何调整版面结构,调整基本的交互,都需要参考原型的信息框架。信息框架中元素的状态直接影响视觉输入和基本交互。如果信息框中有很多图像,那么设计需要考虑是平铺还是旋转。

那么,有什么好的方法来规划不同的信息体系结构呢?这一点通过搭配形式的内容,梳理出几种方式供参考:

文本の 处理:

通常一个纯文本界面是很难设计的,因为它太单调,可以使用

利用字体大小的对比度匹配几何色块形成冲击力

合理使用点、线、面装饰、标点符号和箭头

采用跳板率排版,有大小、节奏和对比

用文案补充插图,用小范围的插图来弥补单调

数字の 处理:

纯图片的形式很少见,但也不能否认,一般可能是图片本身有一定的信息传达,或者是图片浏览类的服务

旋转图片形式的横幅

大图像显示加预览切换控件

非全屏画面显示,带悬停状态提示开关,或屏幕上显示开关按钮,适合全屏布局

当选择鼠标悬停时,图片将以响应方式显示并放大

环绕显示,用鼠标拖动或按键切换焦点对象

多个图形可以通过大小比较和叠加来显示或放置,也可以光栅化错位,然后适当的用开关控制

文本和文本の 处理:

少量的图文匹配比较好处理,技巧也比较多,根据支持条件的多少也可以互换,形成错位来区分模块

大图像的背景是蒙版的,控件和较少的内容可用于全屏切换页面交互

图片铺垫和文字左右排版,注意空格。多组可以左右排列,也可以使用不同的背景色分割

图片显示是分幅或多幅水平排列,文字可以放在图片的上下或覆盖在图片上,也可以鼠标悬停对焦时显示

小图片与放大副本叠加显示,突出文本,辅以图片

视频の 处理:

视频处理分为自动控制和手动控制,自动作为后台自动播放,可以简单切换,手动时应注意相关按钮的布局和显示遮挡问题

视频封面以播放按钮为入口,不直接播放,入口可小可多,点击图片或全屏播放即可

设置视频播放的大小或位置,给出封面和播放按钮提示,或将鼠标移到显示播放按钮的范围内

为了减少视频模块的比例,最好给一个切换按钮或带缩略图封面的切换条来处理单个模块的多视频交互

为了保证内容在多次显示的情况下能够清晰显示,鼠标可以移动到目标中直接播放,达到视频预览效果

图形和视频の 混合料:

通常情况下,文本与视频混合的情况非常少见,视觉焦点不易控制。其中,视频作为背景处理效果最好,但内容信息不易过多

以视频为背景,用少量的文字或按钮构建页面框架,保证视频内容不受太大阻碍,同时也能更好地兼容这些元素

在播放视频之前,还可以覆盖遮罩和相关的图形信息或按钮控件。单击“播放”按钮后,可以将其折叠起来

用鼠标悬停在目标上后,“提示”浮动框将显示其他图形和视频信息或按钮控件

小范围视频支持全屏,使图片和文字视频可以在有限的范围内显示更有效的内容

半沉浸式全屏视频交互,采用ghost风格,将图形按钮控件分布到屏幕边缘,留下与视频交互或观看的核心区域

三维の 处理:

由于是三维场景,需要考虑三维场景下的透视形式和操作方式

固定视角,有固定的场景和视角,通过交互可以改变场景的内容,并且内容和操作可以轻量级

穿梭视角,通过互动场景中的图表或模型,形成前后穿梭的效果,适合多层内容的逐步查看或流程演进

自由透视,控制元素或透视在场景中自由移动,或元素周围的全景,适合细节展示或空间体验

固定操作是指由键盘控制的固定操作按钮布局或场景变化,适用于场景效果简单、规则的产品

三维操作,包含三维场景中鼠标可选择的元素,适用于场景元素交互、交互丰富的产品

按钮の 手柄:

按钮是网页中最常见的交互控件,是网页扭曲或功能启用的基础

色块按钮,色块式按钮,视觉上明显易触的优点

线性按钮,一种常用的按钮样式,用于减弱显示效果或显示背景内容

鼠标通过相关模块时,不会直接显示悬停按钮,而是显示相应的按钮

元素按钮事件,将单击事件添加到文本和文本内容中,由按钮使用,例如超链接

控制の 处理:

控制组适用于复杂场景中的任务交互,通常由多个按钮或控制单元组成,其特点是控制单元中多个模块所占比例较大

叠加卡,通过卡到主机控件,更多控件使用更大的卡

鬼影控件、与背景兼容的线性样式显示控件以及增强选择样式的鼠标悬停

使控件保持白色,使控件与之交互的区域保持空白,通常使用白色或实心背景来显示控件组

鼠标悬停展开,结合图标或直接隐藏,在鼠标悬停时显示选中的相关控件详细信息

展开控件组,小区域显示核心控件,用展开按钮隐藏更多

折叠按钮和跳转,通过按钮入口触发新的弹出窗口,或打开新页面以显示控制组以完成任务

3.如何启动互动创意

在结合信息框架对不同元素类型的视觉设计进行调整后,考虑了页面内容的基本交互,如烘焙、切换、弹出、展开折叠、过渡等,产生了更为细腻的交互创意思维。

基本交互电源点

鼠标悬停反馈:一种常见而重要的交互方式,通过鼠标悬停来提供有关选择状态的反馈或提示相关信息

按键反馈:鼠标点击后,利用按键或控件的颜色和形状变化效果反馈成功点击,达到同样的眼手体验

按钮长按效果:长按状态的动态指示,通过设置长按目标的动画,而不是简单地改变颜色或样式来响应进度或进行中的状态

改进加载动画:例如点击上传、下载、更新,会出现相应的进度条或加载动画,帮助用户提高身体感觉

内容进出动态效果:页面切换加载或滑动页面后,内容将动态效果有序带入场景定格,而不是僵硬的静态切换

多内容旋转应用程序:为横幅或其他多内容显示旋转交互式改进和定时细节控制

锦上添花的互动电源点

按钮切换动画:按钮切换是通过图标的路径动画来表达的,而不是直接的图标交换,更具个性和视觉欣赏性

鼠标跟踪动画:可以适当地做一些鼠标跟踪事件,使一些背景或界面元素跟随鼠标的节奏,增强互动性

特殊的滚轮联动效果:通过鼠标滚动,可以实现其他元素的交互变化,呈现更具创意的场景切换或内容显示

内容穿插和滚动:内容由层控制。当页面滚动时,元素被固定或交替显示,以产生穿梭感并提高界面级别

反应式展开:主要用于二级或下级内容的自动展开。它是自动展开和集中的鼠标,以减少用户的操作

音视频媒体组合控制:在页面中植入音视频内容进行交互或通过按钮或鼠标进行切换,创造出更具交互性的媒体交流

有趣的转换或页面加载:优化页面转换或加载的深度。采取更有创意的方式或动画来过渡,让视觉体验几十亿分

内容或窗口抖动错误报告:合理利用抖动效果进行错误反馈或特殊场景应用,使机械提示更加巧妙

DIY颜色或图形:为主题或模块提供DIY空间,允许用户根据自己的喜好编辑视觉效果

结合产品的场景创作

创建个性化模块展示:结合产品的应用场景,创建个性化展示

创造一个游戏互动的展示:游戏化的产品或内容有一个故事和一个故事可以让用户的有趣的互动更加深刻

最后创建一个过渡:结合鼠标滚轮链接创建创意快照,突出产品细节或内容演示

创建三维或全景场景:考虑使用三维场景来增强交互,并根据产品属性突出显示产品

创造仪式互动:利用视觉和互动的变化创造符合产品的应用效果,实现仪式在线体验

音频交互:比较少见,视产品而定,可以用来制作交互式或视觉效果的声音

镜头互动:适用于有镜头特定应用的产品,需要授权,需要隐私说明

补充按钮交互触发器:当场景中需要更复杂的交互时发生的常见解决方案

补充击键-鼠标交互:复杂的交互,适用于需要鼠标控制变量的击键触发交互


广州新跃专业做网站多年,通过了解企业的特性进行打造适合各种企业网站;

广州网站建设公司,广州新跃;

获取您的专业报价方案
取得联络 无限可能往往从第一次交流开始
15814558325微信二维码线上服务咨询