设计到页面实践 2

未来已来2018-09-12 09:26
  • 关键词:DesigntoHTML 瀑布流 css3动效 多图解释 多视频 分段教程
  • 角色:视觉宝 前端宝 QA宝

实验背景:团建旅游归来,大量照片没有来得及整理,纠结上传相册失真,查阅不方便等问题,好奇心作祟自己“写了”个相册;利用极基础的前端技术、现成的代码块极速搭建本地DEMO级相册“ Portfolio”当作自己日常的一次练习,以瀑布流形式展示旅游中记实摄影,批量修图,CSS3动画微特效改善浏览图片体验,视觉设计到前端页面的相关技术实践

  • 看DEMO URL :Photo Demo 公司内部网络测试,不兼容IE 8及以下版本浏览器,不确定个别楼层同学能否访问;IP 地址不一样
  • 在保证视觉效果的前提下,优化页面性能,减少loading 时间,对图片进行懒加载
  • 看不了线上的,同学可以下载DEMO 资源包 mabao-photo.zip
  • 视觉包下载 mabao-design.zip
  • 以瀑布流形式迅速预览 旅游途中好玩搞笑的照片,心里暖暖的感动

设计资料:

  1. 部门旅游花絮 -台湾
  2. 漂亮妹子照片
  3. loading 逐帧动画
  4. 录屏 视频剪辑,诚意满满地MV制作[ 视频集合地址: https://vimeo.com/148870682 ]

工具:

  • 设计和代码 Sketch / PS / Brackets / Iconjar / safari / chrome
  • 录屏及剪辑 ScreenFlow

Part 1 视觉设计

看视频,背景音乐《 Troye Sivan- cool 》;设计从业者一直认为设计是一件很COOL的事情;

1.sketch 完成页面栅格布局



2.通过☞“Content Generator”插件快速生成随机图片内容,操作 Plugins>“Content Generator”>Photos >(My photos 自定义图片)



3.®简易logo设计     

4.☝︎banner 设计,⇂重现设计过程⇃

5.响应式设计,完成 不同分辨率下的页面效果,CSS中通媒体查询实现 @media

6.完成About 单页设计

7.完成样式后,通过 sketch 3.4以上版本自带的“ local sharing”,本地web共享,从浏览器中查看页面效果,当修改sketch 文件时,web服务会自动刷新效果 http://10.242.48.201:8080/YJT66Y/web/ 服务开启的前提下,可以共享给同事查看效果图



Part 2 前端代码

看视频,我通过 8倍速视频快放来模拟 我厂大前端高级码农构建页面的过程;作为一个基础码盲向前端大牛们致敬;学习不断学习前端微专业 ★★★★★ ★;仅有的前端知识只能修改 简易 CSS/JS 在视频中,我加了背景音乐 《 玛卡瑞纳-南涩雨 》蓝调复古摇滚,雷鬼式音乐风格弥漫着淡淡的乡土重金属潮流非常符合码农也有“潮流洋气”的气质,欣赏哦~

1.推荐使用 Brackets,可以快速在代码上指示所对应的资源,比方说图片、颜色等


2.结构

<!DOCTYPE html>
<html>
    <head>
        <!--css部分-->
        <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
        <link href="css/style.css" rel="stylesheet" media="screen">
    </head>
    <body>
        <!-- 主体内容-->
        <div id="page-wrap" class="page-wrap"></div>
        <!-- about内容-->
        <div class="overlay overlay-contentpush"></div>        
        <!-- js部分-->
    </body>
</html>

3.CSS,利用现有的bootstarap 库 完成栅格布局,按百分比分布将页面布局分为12等分,每个栅格间距特定,自定义样式写在style.css

<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet" media="screen">

4.logo 模块

<a href="" class="logo-minimal"></a>
/*css 样式*/
a.logo-minimal {
    display: inline-block;
    margin-bottom: 46px;
    background: url("../images/logo.svg") no-repeat;
    background-size: 80px;
    width: 100px;
    height: 60px;}

5.图片部分,jpg格式 高质量 80%,满足前端性能

<div class="content-wrap">
    <ul class="grid-art" id="gridArt">
        <li><img src="images/photo/img1.jpg"></li>
        ...
        <li><img src="images/photo/N.jpg"></li>
    </ul>
</div>

6.About 关闭 动画


7.实时预览,左边编码右边出效果进行调试

8.loading 图标,PS完成GIF设计,               

    <div class="loading"><img src="images/spinner.gif"></div>

9.页面完成本地发布 终端输入命令

     $puer    快速搭建本地服务器



本文来自网易实践者社区,经作者马宝授权发布