Slog86_使用Sketch 设计ArthurSlog网站主页原型

ArthurSlog

于 2018-09-29 00:27:51 发布

阅读量192

点赞数

分类专栏： Sketch 个人网站文章标签： ArthurSlog Web 原型设计 UI Sketch

本文链接：https://blog.csdn.net/u010997452/article/details/82891906

版权

个人网站同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

Sketch

1 篇文章 0 订阅

订阅专栏

ArthurSlog

ArthurSlog
SLog-86
Year·1
Guangzhou·China
September 28th 2018

关注微信公众号“ArthurSlog”

理想是用实际行动去实现的而不是藏在心里！

开发环境MacOS(Mojave 10.14 (18A391))

需要的信息和信息源：

Sketch

开始编码

Sketch 是一个专业的矢量图形编辑器，特定于 MaoOS
使用过程中，与Axure Rp8 做对比
Sketch 目前更偏向于 UI设计和界面精细化设计
而 Axure RP8 目前更偏向与产品设计
一般来说，开发的流程如下：

Product Manager -> Designer -> Enginner



Product Manager: 产品经理根据用户调查表生成规格列表

Designer: 设计师们根据这些要求探索出低精确度的原型 最终创造出高保真的模型

Enginner: 工程师将这些设计应用到代码中 最终将产品交给用户

下次可以尝试这样的开发流程：

Axure -> Sketch -> Fonted Coding、 Backed Coding

这次先使用Sketch 来设计ArthurSlog 的主页
由于Sketch 需要通过一些第三方插件来实现 HTML文件的输出
为了节约时间这里我就自己Coding了，完整的代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ArthurSlog</title>
    <style type="text/css">
        body,
        html {
            position: relative;
            margin: 0%;
            padding: 0%;
            display: block;
        }

        div {
            position: relative;
            left: calc(50% - 720px);
            padding: 0;
            margin: 0;
        }

        img {
            padding: 0;
            margin: 0;
        }
    </style>
</head>

<body>
    <div>
        <img src="./nav_header.jpg">
        <img src="./hero.jpg">
        <img src="./text-left-image-right1.jpg">
        <img src="./gap.jpg">
        <img src="./text-left-image-right2.jpg">
    </div>
</body>

</html>

从Sketch导出所有设计好的图片文件之后，需要与上面的 HTML文件存放在同一路径下
效果展示：http://www.arthurslog.com/000100/index.html
这次为页面使用了 1440px 的宽度，把整个基本的页面确定了下来
源码已更新至 Github： https://github.com/BlessedChild/ArthurSlog.com
至此，使用Sketch 重新设计了ArthurSlog 的主页界面。

欢迎关注我的微信公众号 ArthurSlog

关注微信公众号“ArthurSlog”

如果你喜欢我的文章欢迎点赞留言

谢谢

ArthurSlog

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Slog86_使用Sketch 设计ArthurSlog网站主页原型

ArthurSlogSLog-86Year·1Guangzhou·ChinaSeptember 28th 2018ArthurSlog.comMSDN: ArthurSlogGitHub: BlessedChildNPMJS.com: arthurslog掘金主页简书主页segmentfault理想是用实际行动去...
复制链接

扫一扫