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

最新推荐文章于 2018-10-17 08:11:30 发布

ArthurSlog

最新推荐文章于 2018-10-17 08:11:30 发布

阅读量204

点赞数

分类专栏： 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>