写今天这篇文章时,我突然想到一句当下流行的话——世上哪有什么岁月静好,不过是有人替你负重前行。其实,企业建站也许也是如此。并非每一个品牌网站设计都是那么的富有创意和个性的,虽然客户总是希望自己的网站能打造成为绝世作品。我们从大量国内外优秀的网页设计作品中发现,其实那些被广为传颂的经典网站,反而是在我们最常见的版式中寻求突破,把细致做好,把更多的美好和愿望赋予到网站中来。
01.
网站页面排版设计中,利用页头header与主体内容content之间的间距来拉开距离和空间感,是很多日本网站管用的手法。这样做的主要目的是让用户在访问时视觉上产生空间感。这种留白的技巧可以给界面带来禅意。跟我们最为常见的页头下来一个全屏海报轮播做法有很大的差异。
下面对于信息的陈列layout设计也花了点心思。一般来说,一行三列,四列的布局采用瀑布流的布局方式是挺不错的。只需要对具体每一个信息块做精致设计即可。但这个作品还结合了一些例如关于、产品分类之类的功能入口来进行二度布局,形成了不均衡的比例关系。
02.
网页设计中利用线条来进行视觉分区的案例我们能看到很多。例如深圳市室内建筑设计协会官网。线条的排版方式能引导用户的视线进行有效的视觉分区。但也要注意它们的粗细、长短和多少。这个案例基本是采用了接近#DDDDDD的线条进行排版。同时banner区域采用了比较特殊的文本来做聚焦。通常简约的网页结构,都隐藏着巨大的交互设计效果。
03.
这个网页设计作品底部的一行五列设计就非常到位。首先是每个块的信息呈现方式到位,翻页切换以及鼠标移动到块上时的交互,都是很有意思的。
04.
这个网页设计作品,仅从网站的logo设计来看就很有逼格。对于这一类标志为粗线条与字母结合的品牌官网,我们可以花点精力去研究一下,他们的网站是如何设计的。中间最出彩的地方是类似九宫格的布局,以及产品图的拍摄角度。
05.
常见的版式布局,经过仔细推敲和变化,还是作出不一样的视觉效果。通常可以利用块状区域的面积进行变化,结合一些文字来排版,形成主次的对比。版面中如果全部都是图片,效果会差一些。
06.
网页界面中,色彩搭配方案以及色块的运用是一个难点,运用得当,效果就很好,用户的印象会深刻一些。这个网页设计作品还利用了虚实结合的原理,注意到了整体的平衡和对成。
07.
我个人喜欢这个网页作品的大胆留白,以及里面的装饰元素的运用,瞬间感受到界面上的艺术氛围。假设中间四个模块状的地方不是采用交互的方式呈现主图,而是一开始就直白得展示,效果会大打折扣。
08.
这只是一个简单的一行2列布局的网页设计作品,但是给人感觉最大的2个设计特点就是留白和对齐的巧妙。其中还巧妙运用了线条、大标题、摘要来辅助排版,形成大小对比,空间感拉开。有时候,并不是客户不接受我们这种做法,而是我们设计师不敢这样去尝试,然后给界面上慢慢加上很多东西... ...
09.
最后用这个商品详情页设计来做收尾。从界面中能感受到强烈的设计感。对于客户而言,他们只能对自己的需求描述为主题鲜明、简洁大方、国际化等等。而我们设计方则是通过具体的版式、图片、文字及网页设计语言来落地的。
对于商品详情页而言,除了网页公共部分外,电商网页详情页应该包含了产品主图、产品标题、买点描述、价格、颜色、规格、选择数量、加入购物车、产品相关的参数介绍、相关产品推荐等等。
小结
网页设计中的美好创意,需要我们阅读大量的优秀设计作品,以及相关行业的设计作品。你可能想象不到,一个做法律行业的朋友平时有空了也会翻翻好的设计杂志和书籍;一个做程序开发的同事,平时也爱阅读设计类文献和作品。后来发现,这个同事写的代码非常简洁、美观。美的东西不只是从事设计行业的设计师的专利,但作为设计师更应该多看美的东西。我们做每一个网站设计项目,都在绞尽脑汁想要获得巨大突破,然而经过今天学习,你能理解最普通的、最为常见的版式,经过细细琢磨也能设计出有特色的作品吗?