《印像》设计文档

👇下面三个红色箭头可以控制开合目录

作品体验

访问网站 yx.whisper.ink or yinxiang.pages.dev，或者扫描以下二维码。

主页

网页主页设计三个交互按钮，设计为拍立得照片的形式，分别对应A影集、B相片电影、C电子杂志。主页选择深蓝色作为背景，以达到突出三张拍立得片为主题的想法。整体设计以简洁大方，富有秩序感为思路，删减掉多余的文字信息，并将必要的信息折叠（文字排版进行特殊设计），滚动鼠标方可查看。第一眼打开网页时，仅展示出杂志名称。

pc端

移动端

 

二级界面

二级界面分别对应A、B、C界面，整体思路依旧沿用“简洁大方，富有秩序感”，分别以橙红色、紫罗兰色、草绿色为主题颜色，进行区分。

整体版式为左右分布式，左边为板块对应封面，右边为对应子项目（三级界面）入口。返回按钮设计在头部右上角。

移动端状态下，首屏界面底部会出现一个指示用户滚动的箭头组件，增强用户交互体验。

A影集

子项目入口在大屏PC界面状态下为横向滚动样式，用户可以通过直接滚动鼠标来界面子项。

可以点击对应子项，前往影集对应三级界面：分别对应A1印物、A2印生活、A3印景、A4印品、A5印人。

pc

移动

B相片电影

右侧子项的是一个视频（无声视频），直接设计在了二级界面视图上，可以通过点击右侧子项，控制视频的播放与暂停。

pc

移动

C电子杂志

由于我们的杂志目前只有一期，所以这里的右侧子项只有一项，所有显得略显单调。

整体设计如A影集一般，右侧子项也是设定成横向滚动的效果；点击杂志封面，将会体验较真实的阅读感受。

pc

移动

 

三级界面

载入前Loading界面

由于该类网站静态图片资源较多，加载需要一定时间，所以设计了一个界面加载完毕前的loading界面，改善观感。

影集三级界面

该界面分为3个部分：首屏顶部背景音乐控制、首屏主体轮播图、余下部分。

首屏顶部：在界面启动前左上角Logo旁边为三角播放按钮，在用户点击之后，将变为暂停按钮；播放中途，还会有背景进度条来显示当前音乐播放的进度。

首页主体：该部分是一组轮播图，图片内容是该影集板块对应的杂志对翻页的展示；用户可以通过鼠标拖动或者点击左右的按钮来切换图片。

余下部分：这部分最开始是一个“introduce”介绍该板块影集的说明文字。在此之后是以“瀑布流”形式呈现的影集图片；这部分还做了“按需加载”的处理，即并不一下子加载所有图片，而是通过用户滚动鼠标，来一部分一部分加载图片，这种处理可减少一些不必要的流量损失；这个板块的图片还可以点击预览，方便观看细节。

首屏

余下部分

图片预览

电子杂志三级界面

该界面为C电子杂志的子级界面，可以体验较为真实的阅读感受。

 

补充说明

电子杂志三级界面是由Flip Html5工具生成的电子web网页，并非本团队设计，为尊重该平台，特此说明。

本作品的设计灵感来源于戴兜的小屋 、ORDINARY、博客主题——素锦，为表示感谢，特此说明。

除以上提到的，其余部分，如服务器及域名的购买、网站的搭建、网站代码的编写、摄影素材的拍摄、视频及音频的创作、整体界面设计等，均为团队小组自主完成。

网站运用了vue这一技术栈，并且使用了插件——fancybox，实现了图片预览以及轮播图，特此感谢。