关于The Shift
浏览地址:https://theshift.tokyo/ja/
The Shift是一个负责设计/广告企划的一家独立公司,这个网站也是即是他们公司的官网。
网站一进去就可以感觉到个性十分强,因为主要目的还是突出公司的个性与特色。
发现优点
轮播图的设计
首先是静态设计,轮播图的构造就很不一般了,几何形状和文字、图片的组合搭配时尚感扑面而来。它的动画切换效果是飞过平行四边形来完成一个过渡,并非图片间的过渡,再加上Shift这个单词的搭配,可以说是很匹配的感觉。
效果呼应
除了轮播图的切换效果,不仅如此,这种上下切换的细节还体现在文字的切换效果上,一旁的文字的hover效果也是上下切换的动画,呼应了幻灯片的设计。并且这种切换不是直生生的切换,还带了一种波动效果,给人感觉很灵动。
鼠标交互
网站给鼠标加上了圆形的设计元素,同样它是跟着鼠标移动的位置以及交互的动作,元素的样式也会改变,加上背景的搭配,整个效果的体现又上了一层。
并且鼠标经过内容的时候,样式也会发生改变,添加了颜色的对比,在美化的同时,也能提醒用户选中了这个区域。
主题的突出
如图是Project页面,可以看到把Project标记放在了背景的位置。
并且随着鼠标的滑动,Project字样原来越大,直到滚动条拉到底部。虽然可能不能一直放大Project,标题的突出也可能也没那么重要,但是这种效果除了增加用户的新奇感,还能强调这个页面是Project。
细微的交互
在用户滚动内容向下的时候,它的页面header其实是隐藏的,因为考虑此时用户的注意力都关注在网页内容上,可能用不到它们,反而也会有些许遮挡,可能会引导用户去向错误的目的地。
但当用户开始向上滑动页面,很可能是因为用户想返回到其他页面,所以页面的header又会出现。
小缺点
总体来说,我个人很喜欢这个网站,但是我自己还是提出一些认为的一些不太好的细节:
- 首页的页面只有一个屏幕那么大,鼠标的滑动有明显的交互效果,会让用户感觉可以滑到底,但是滑了半天可能结果就是停留在这个页面,就容易感觉到很懵😵。
- 附页的标题只显示了子页面的名字,未标识主站的名字,在浏览器多个标签下容易给用户带来混淆。
- 文章内页采用的多是大图,但是在网络不顺畅的情况下是直接可以看到整个加载过程,而且很容易让用户以为是一片空白。
- ICON的颜色是红色,整个设计是属于冷淡色系,虽然有ICON颜色的些许点缀,但是一开始可能还是会感觉到有点违和感。