加载中…【网页设计学习】—Valeriemartinez.com（图片展示、简洁、有格调）
(2014-12-28 02:10:02)
标签：
it |
今天终于不犯懒啦，在WOW跟写文章的斗争中，理智最终战胜了情感！大家一起看个设计出色的网站吧~
关键词：图片展示、简洁、有格调
网站目标
Valerie Martinez Agency（下面简称VMA）是一个拥有许多摄影师、导演的一个机构，这个机构帮助他们发展自己的职业生涯，类似娱乐圈中经纪公司的感觉。机构官网的主要作用就是通过展示这些摄影师、导演的作品，为其寻找潜在的合作发展机会。
网站风格
网站的风格往往要根据其主要功能及目标用户来确定。
MVA官网承载的主要功能是一小部分摄影师或导演的作品展示，内容并不是非常庞杂，并且目标用户主要在时尚、艺术、广告圈。基于以上前提，网站选择了比较简洁并带有设计感的风格。除了较为松散图片展示，其余部分只有黑白灰三种基本色调作为背景，没有过多花哨的装饰，保证了展示图片的突出，并且感觉比较有格调，不落俗套。
页面布局
网站一共包括了三个类型的页面：首页、作品展示页、信息介绍页（如机构本身、摄影师经历）。
1.
- 最上方是机构品牌展示区。仅包括Logo、机构名称以及一个“关于我们”按钮。在如此重要的第一屏放置机构品牌的信息，除了内容较少不必要放置导航外，强化该机构品牌的曝光可能是重要的原因。滑动页面时，最上方区域不会随屏向上滑动，而是被中间层覆盖，会让页面更有层次感，而不是一个简单由底色分割。
http://s16/mw690/001pSqhYzy6OIPwLVYraf&690
- 中间部分为摄影师区域，总共展示了6位摄影师及其作品。为了在用户更多了解摄影的作品的同时保持简洁，每个摄影师只有一个图片坑位且默认展示一张图片。但当鼠标悬停时，图片区域会略微缩小以标识选中态，同时图片会在摄影师的5-6张作品中不停切换。当鼠标离开图片区域时，最终静态显示的图片就是离开时最后展示的那张图片。因为用户将鼠标悬停在某张图片时，很可能是对该图片或摄影师产生兴趣，这时展示摄影师更多图片就可以让用户对摄影师有更多了解，如果有兴趣，则可以再进入摄影师作品展示页。整体来说，兼顾了信息展示与简洁。
http://s6/mw690/001pSqhYzy6OIPEfRRz75&690
- 最下方为网站标准底部，主要为机构的联系方式。点击地址可以直接从Google Map中展示，点击电话也可以直接进行拨号（如果终端支持）。此外，鼠标悬停时被选中联系方式的下方会有出现下划线的动画，非常流畅简洁。
2. 作品展示页分为四个部分，每个部分也是通过背景色进行区分：
- 最上方依然是机构品牌展示区，不过有了回到首页的导航按钮。
- 最主要的区域为摄影师作品展示区。展示中的图片按主题分为不同的组别，同一组的图片横向展示，组与组之间纵向排列。组内图片可以通过鼠标点击进行选中或左右切换。当某一张图片被选中时，高分辨率的图片会充满全屏，通过鼠标移动可以完整查看图片，点击图片任何区域可以关闭图片的全屏展示。此外，一组图片可能有十几张，通过鼠标点击切换可能比较麻烦，所以网站支持键盘左右方向键切换图片，长摁左或右方向键可以直接到达该组图片的首尾端，这算是一个快捷路径。
http://s16/mw690/001pSqhYzy6OIPFD8ej8f&690
http://s3/mw690/001pSqhYzy6OIPFFj9062&690
- 第三个部分是关联导航区，用户可以跳转至前一位或后一位摄影师的作品展示页，也可以回到首页。
http://s12/mw690/001pSqhYzy6OIPINWob9b&690
- 第四部分依然是网站标准底部。
3.
http://s5/mw690/001pSqhYzy6OIPKO6cQ24&690
页面切换效果
网站页面间切换的动效比较统一，都是由屏幕左侧至右侧以纵线为刷新线进行一次刷新，并且刷新线的运动速度是一个加速过程，相比匀速刷新而言更具爽快感。
http://s15/mw690/001pSqhYzy6OIPMfMkKee&690页面Loading状态
网站中一些页面由于图片较多，需要较长的加载时间。加载状态时，页面正中展示网站的Logo，Logo下方是不断变换的图片，通过镂空的Logo区域展示一小部分。Logo下方还有进度条提示加载进度。此外，不断变化的图片内容是什么小白通过Logo区域的一小部分还是看不出来，可能有某些意义，而不仅仅是几张普通的图片吧，大家有看出来的么？
http://s5/mw690/001pSqhYzy6OIPNT82ga4&690按钮悬停状态
网站使用的基本都是幽灵按钮，默认状态下按钮与底色相同并有一个不太明显的边框。当鼠标悬停时，先用背景色的反色从两个方向勾画按钮边框，同时按钮的背景色由上而下刷新为背景色反色，最后按钮文字由下至上淡入，颜色为网页背景色。其实就是整体为按钮的边框、背景色、文字做了个反色操作，不过动效让这个过程更加流畅自然。
http://s2/mw690/001pSqhYzy6OIPPttkZ71&690嗯，大概就是这些~如果有内容不是非常多、比较要求格调、简洁的图片展示网站，在布局、配色和交互上可以考虑进行参考。大家可以去www.valeriemartinez.com自己体验一下，如果有什么想法可以随时讨论哦~
喜欢
0
赠金笔