未来已来

个人签名

124篇博客

最新博客

最新资源下载

编辑推荐

网易数帆开源API网关与容器云项目，让云原生生产落地“多快好网易汪源：统一负载与多云环境的“开放姿态”，才是云原生网易数帆如何用 Kubernetes“原语”搞定云原生中间件快手打新挤爆券商系统，网易数帆推出券商稳定性保障方案探索智慧校园新模式，网易有数在教育行业的实践分享金融行业大数据治理之路——数据模型篇

设计到页面实践 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    快速搭建本地服务器



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

推荐博客