基于尼康公司网站的界面设计研究

2017-01-29陈慧洁胡巧红

山西青年 2017年11期

关键词：界面设计网页按钮

陈慧洁胡巧红

浙江树人大学艺术学院，浙江杭州 310053

基于尼康公司网站的界面设计研究

陈慧洁*胡巧红*

浙江树人大学艺术学院，浙江杭州 310053

网页设计作为新兴的设计领域，是视觉传达与动画的融合。不同于传统的视觉传达以静态的视觉为传达方式，网页界面设计更具有综合性和跨学科性。本文以尼康公司网页设计为研究对象，分析作为优秀网站，其网站是如何架构，分析界面设计中的亮点，以及界面中的动态效果设计，这几个方面出发，研究网页界面设计的设计方法与设计思路。

界面设计；交互设计；网页设计

一、网页设计项目背景

网页设计，融合了艺术与技术两种特性，是一门横跨学科的交叉学科，具有很强的综合性。[1]作为网页设计师，需要在网页设计之初，对于整个网站如何构架，进行深入研究，了解客户的需求与市场的定位，从而制定出网站的框架。该网站是Nikon官方网站中，体验Nikon一项中的子网站，名为Universcale。公司用这个网站来宣传自身的产品特点。该网站以尺度为主题，比较世间万物的大小，小到显微镜下的细胞，大到整个宇宙星系，都被囊括进了这个网站中。该网站的互动效果独具特色，侧重虚拟体验。该网站整个制作历时数月，制作严谨，尺度精确，文字内容详实，风格独特。通过该网站Nikon公司达到了预期的宣传效果，既普及了科普知识又宣传了相机的特性，给每一个访问该网站的用户带来了虚拟体验的乐趣。

二、网站构架的项目流程

网站的构架是网站前期设计环节中十分重要的一环，对于网站内容的构建，并非一朝一夕能够完成的，往往需要倾注设计团队大量的心血和汗水。合理、有效的项目流程，将会对网站设计起到事半功倍的效果。

该公司的网站Universcale，其项目的开发流程包括：前期策划、创意构思、制定网站框架、网站界面设计、动态效果设计与制作、添加多媒体元素(视频、音效)、上传与维护。整个流程清晰、有序合理，可以使项目能够顺利地进行下去。在设计Nikon公司网站前，需要先了解网站的整体定位，进行框架搭建和创意构思。具体步骤如下：

(一)了解网站内容。通过和客户沟通，了解网站的内容是宣传Nikon公司的设备。需要突出相机的性能。

(二)收集相关资料。收集并整理相关文字与图片资料。收集微观物体和宏观物体的图片，以及尺寸和相关的文字资料。

(三)整理相关资料。按照尺度大小来分类整理各种图片和文字资料。进行有选择性地筛选，挑选出有代表性的图片。

三、设计形式语言表达

(一)创意构思

富有创意的设计将会另网站富有独特的魅力，能吸引更多的用户来访问。[2]鉴于该公司已经有自身的官方网站，所以这个网站是区别于官方网站的，形式应该新颖独特，并加入丰富的互动效果。考虑到能够更好地突出相机镜头的特性，于是，确定由宏观到微观展示世间万物这一构思。

(二)网站界面设计

Nikon网站的界面设计，采用矢量二维图形设计风格，结合图片、文字来进行编排。

1.色调与风格

网站的整体色调为灰色调，局部加强明度对比，如鼠标经过的图形，和文字都采用白色。

由深到浅的渐变色衬托了网站想要营造的氛围，黑色的水平线上是苍茫的夜空。整个色调的设计使访客沉浸在茫茫的宇宙中。

2.界面插图设计

网站中的矢量图形设计，将写实的图片，勾勒成平面剪影的矢量效果。图片都经过设计师的精心筛选和处理，使物体都保持统一角度，再挑选出造型好、适合剪影图形表现的图形来进行矢量图的制作。

而网站中设计了丰富的手绘插图。物体放大呈现的图案，是经过精心绘制而成的。设计师并没有选用素材摄影图片，而是为网站量身定做了插图，不怕繁琐只求达到最好效果。

3.适当的编排设计

图形和文字的编排采用以水平为主的分割形式，将标尺位于下方，图形排列在中心部分，文字说明部分采用白色块衬托，并进行分割，使内容紧凑、有序。

4.细节设计

页面中每一处按钮都需要经过精心地设计。画面中的色块和细线都需经过细心地琢磨。

(三)动态效果设计

1.片头动画设计

进入Flash网站，我们通常会看到一段片头动画，这段动画是网站设计中的一环，起到介绍和宣传网站内容与特点的作用。Nikon网站在进入后，我们可以看到连绵的山脉和字幕，仿佛电影的开场一样，随着镜头的逐步推进，水平线上远处的物体缓缓地移动、放大。这时我们会感觉到自己已经完全沉浸在了这片虚拟世界中，最后镜头定格，浮现出网站的标题——“Uiverscale”。这正是设计师独具匠心之处，灵活地运用了影视镜头语言，使平面二维的图像变得生动。可见，网页设计交叉学科、综合学科知识的重要性。

2.流畅的Flash动态设计

设计师通过Flash软件来进行动画的制作，设计流畅地移动动画。点击标尺上不同单位的按钮，就可以迅速流动地查看到该尺度的物体。而不点击按钮时，位于标尺上的物体会依次缓慢地移动、放大，就仿佛镜头在逐步地向前推进。图形移动随着访客鼠标的点击快慢相间、大小相生，整个动态效果虽然简单，却富有节奏和韵律。这种动态的节奏和韵律感正是设计师需要细心把握的关键。

3.按钮设计

位于界面两侧的两个按钮，起到了功能补充的作用，使访客也可以在水平线上逐个查看更小或更大的物体。最下方的按钮是关于各种单位的解释，如mm、nm、ly的概念。整段的文字都是居中编排，以水平分割法来处理色块、文字、图形的关系。