交互设计师需要懂前端吗？

Circle_H

成都/UX设计师/5年前/483浏览

版权

交互设计师需要懂前端吗？

Circle_H

答案是需要！

一.背景

在中小型公司，遇到“善良”的BOOS的概率是挺大的。现在清楚记得那是2017年的中旬，初到公司的我和其他3个设计同事跟着产品经理去智慧南京中心出差，按设计圈标准的设计流程通宵达旦的干。老板来南京开会，看到我们在用Axue、sketch、photoshop做交互和界面后“龙颜大怒”，列出不会前端的N宗罪。

# 你们不懂前端的原理能做出好的设计？

# 不懂前端的知识如何和研发人员沟通，能有统一的沟通语言？

# 学前端知识对你们自己和对前端同事有什么好处？

# 阿里巴巴和国外的设计者都是设计+前端全栈知道吗？人家设计产出可以直接交付给后台开发。

（有阿里的小伙伴路过的请解惑，你们真这样吗？）

BOSS：“现在前端框架多的很，拿过来就开始用，有什么难的？别再让我看到你们用什么sketch、photoshop做设计了。在国外，那叫做painter！不是Designer”。你的一字一句犹如刀疤划心上～（好好说，怎么唱起来了）

BOOS让我们直接用BootStrap设计，别画图了。当时还没有前端的知识储备，直接上手BootStrap框架的我们是一脸懵逼。由于刚到公司，和前端小伙伴关系还没“决裂”，我们还是相亲相爱的一家人。我们的跪舔换来一次巧妙的度劫。

总不能每次都投机取巧吧？告诉自己，要站着把钱给挣了。所以，出差回成都马上找资料开始学前端。总结了几点经验给朋友们分享。

1.【动手敲代码，记学习笔记】

2.【要认识一个会前端的朋友】在学习过程中，会经常遇到些莫名其妙的问题。明明跟着一步一步做却不出效果，这很打击学习的信心的。不然入门到放弃可能就二三天的事。认识前端朋友可以在遇到问题时请教。

3.【转化关系观念】别把学习当任务。想着他日涨薪，迎娶白富美，走上人生巅峰。

4.【持久力】如果学两天放两天的话，很容易就把之前又给忘了。

二.学习目标

本章教程目标：塑造学习成就感。

大家跟着我教程走，一点一点地实现下方页面效果。完成的时候，不仅在自己电脑上能查看效果，也能发URl地址给其他同事来观察查看页面在不同尺寸的移动设备中的效果。

注：本章教程不会讲HTML、CSS、JavaScript基础的知识。让大家在本章教程取得一定的成就感、提高学习兴趣后在下一章教程开始讲基础知识。

下一章教程开始，就用做各种app的各种小组件作为案例，带大家入门前端。这样的案例驱动教学没那么枯燥。

学习过程中有什么问题，欢迎加我微信 K-singer

三.编码

1.下载代码编辑器，下一步下一步安装即可。

下载地址:

https://www.dcloud.io/hbuilderx.html

注：选择对应自己电脑系统的APP开发版

2.打开代码编辑器，新建项目。

接着自动弹出填写项目属性的面板，设置如下：

3.展开刚才新建的项目

将下方百度云盘中的图片拖到这个项目中的img文件夹中去。

链接: https://pan.baidu.com/s/14uA8Emk3b5pJJus-MRxkTA 密码: 2rum

将下方百度云盘中的文件拖到这个项目中的js文件夹中去。

链接: https://pan.baidu.com/s/1Es2hUN-EtxfixruxKKOO-g 密码: 5tes

4.双击index.html文件

5.在body里敲入/复制导航栏的代码（敲的同学一定切换到英文输入法）

</div>

</div>

写了一通代码，还不知道现在页面长什么样子吧？在浏览器中查看效果快捷键 Mac【command+R】 PC【control+R】

是不是被丑哭了？没关系接下来给它加点样式，变好看点点。

6.在css文件夹上右键，新建 ——> css文件，命名为index.css

7.在index.html中敲入/复制以下代码，引入index.css样式文件并保存当前index.html文件。快捷键 Mac【command+S】 PC【control+S】

8.在index.css文件里敲入/复制以下导航栏的样式代码（含去除一些标签默认样式的代码），并保存。

/* 样式重置 */

* {

margin: 0;

padding: 0;

outline: none;

list-style: none;

}

html {

font-size: 8px;

}

body {

font-size: 16px;

background: #F3F3F3;

}

/* 导航栏的样式*/

.xiao-btn-fan-wei {

width: 2.5rem;

height: 2.5rem;

display: flex;

align-items: center;

justify-content: left;

}

.dao-hang {

height: 5.5rem;

background: linear-gradient(-90deg, #FBCA61, #F67F48);

display: flex;

align-items: center;

text-align: center;

position: relative;

}

.backBtn {

margin-left: 1rem;

}

h1 {

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

font-size: 2.125rem;

color: #fff;

font-weight: 400;

}

如果你代码敲的排版很乱，可以使用快捷键重排代码，让代码父、子、兄、弟关系明显一点 Mac【command+K】 pc【control+K】

点击index.html文件，切换到index.html后，使用快捷键在浏览器中打开页面看一看。是不是完成了变身？

9.接着在index.html里写步进器的结构，在body里面敲入/复制以下代码，并保存。

注：和导航栏和同层级的兄弟关系。

</div>

</div>

<p>3.填基本信息</p>

</div>

</div>

</div>

</div>

<p>7.补充买方信息</p>

</div>

</div>

</div>

使用快捷键在浏览器中打开页面看一看，是不是和刚才一样很丑，页面是乱的？没关系，那就像刚才一样给它写一点样式。

10.点击index.css，敲入/复制以下步进器的样式代码，并保存。

/* 导航栏的样式*/

.xiao-btn-fan-wei {

width: 2.5rem;

height: 2.5rem;

display: flex;

align-items: center;

justify-content: left;

}

.dao-hang {

height: 5.5rem;

background: linear-gradient(-90deg, #FBCA61, #F67F48);

display: flex;

align-items: center;

text-align: center;

position: relative;

}

.backBtn {

margin-left: 1rem;

}

h1 {

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

font-size: 2.125rem;

color: #fff;

font-weight: 400;

}

/* 步进器 */

.bu-jin-qi {

background: #fff;

height: 5.5rem;

box-sizing: border-box;

overflow-y: scroll;

}

.bu-jin-qi-inner {

background: #fff;

}

.bu-zou {

background: #FFFFFF;

color: #88909F;

height: 100%;

float: left;

padding: 0 1.8rem;

text-align: center;

border-right: 1px solid #EEEEEE;

}

.bu-zou img {

height: 2rem;

margin-top: 0.5rem;

}

.bu-zou p {

font-size: 1.375rem;

font-weight: 300;

}

.dang-qian-bu-zou {

color: #1A9BD7;

background: linear-gradient(90deg, #FAFEFF, #E8FAFF);

}

/* 进度条 */

.jin-du-tiao {

height: 1.5rem;

background: #F3F3F3;

}

.jin-du-tiao-inner {

width: 100px;

background: #F67F48;

height: 100%;

border-radius: 0px 40px 40px 0px;

position: relative;

}

.jin-du-tiao-inner span {

color: #fff;

font-size: 0.75rem;

line-height: 0.625rem;

position: absolute;

right: 0.625rem;

top: 0.5rem;

}

使用快捷键在浏览器中打开页面看一看页面效果，在实际开发过程中也是这样不断观察效果，来看自己写的代码是否达到想要的效果。

11.接着在index.html里添加一个装搜索组件和房源卡片的父盒子，在body里面敲入/复制以下代码，并保存。

</div>

12.接着在index.html里的<div class="continer"> </div>标签里面追加敲入/复制以下搜索组件代码，并保存。

</div>

<p class="fu-zhu">房太多不好找？试试输入房的坐落信息搜索</p>

</div>

使用快捷键在浏览器中打开页面看一看页面效果。

13.在index.css文件里追加敲入/复制以下导航栏的样式代码（含去除一些标签默认样式的代码），并保存。

/* 包搜索和房源卡片的父盒子 */

.continer {

box-sizing: border-box;

padding: 0 1rem;

}

/* 搜索 */

.sou-suo {

margin-top: 3rem;

}

.shu-ru-zu-jian {

position: relative;

}

.shu-ru-zu-jian input {

width: calc(100% - 1rem);

height: 5rem;

border: 1px solid #C6CAD0;

border-right: none;

padding-left: 2rem;

box-sizing: border-box;

border-radius: 1rem 0 0 1rem;

font-size: 1.75rem;

}

.shu-ru-zu-jian p {

position: absolute;

top: 0;

color: #C3C7CF;

font-size: 1.75rem;

line-height: 5rem;

left: 1rem;

transition: .3s;

/* background: #fff; */

}

.shu-ru-zu-jian button {

position: absolute;

right: 0;

top: 0;

height: 100%;

width: 8rem;

color: #fff;

border: none;

background: linear-gradient(-90deg, #FBCA61, #F67F48);

font-size: 1.75rem;

font-weight: 400;

border-radius: 0 1rem 1rem 0;

}

.sou-suo .fu-zhu {

color: #88909F;

font-size: 1.375rem;

font-weight: 300;

margin-top: 0.5rem;

text-indent: 1rem;

}

.er-ji-biao-ti {

font-size: 1.75rem;

margin: 3rem 0 1rem 0;

position: relative;

text-indent: 1.5rem;

color: #0B0E21;

}

14.接着在index.html里的<div class="continer"> </div>标签里面继续敲入/复制以下房源卡片的代码，并保存。

<p class="zhi">清半夏小区</p>

</li>

</li>

<p class="zhi">滨海区幸福现路清半夏小区2号楼</p>

</li>

</li>

</ul>

15.在index.css文件里追加敲入/复制以下房源卡片的样式代码，并保存。

/* 房源卡片 */

.ka-pian {

background: #fff;

padding: 1rem 0;

border-radius: 1rem

}

.ka-pian li:last-child {

border: none;

}

.er-ji-biao-ti::before {

content: '';

display: block;

position: absolute;

width: 0.625rem;

height: 1.625rem;

background: #F6844A;

border-radius: 10px;

top: 0.375rem;

}

.shu-ju-zhan-shi {

padding: 1rem 0px;

width: calc(100% - 2rem);

margin: 0 auto;

border-bottom: 1px solid #F1F1F3;

}

.shu-ju-zhan-shi .jian {

color: #C1C5CD;

font-size: 1.375rem;

margin-bottom: 0.25rem;

}

.shu-ju-zhan-shi .zhi {

font-size: 1.75rem;

color: #202020;

font-weight: 400;

}

.shu-ju-zhan-shi.btn {

overflow: hidden;

}

.shu-ju-zhan-shi.btn button {

float: right;

margin-left: 2.5rem;

height: 3.75rem;

padding: 0 2rem;

border-radius: 0.5rem;

font-size: 1.75rem;

}

.shu-ju-zhan-shi.btn button:nth-of-type(2) {

background: #fff;

color: #88909F;

border: 1px solid #88909F;

border-radius: 0.5rem

}

.shu-ju-zhan-shi.btn button:nth-of-type(1) {

background: linear-gradient(-90deg, #FBCA61, #F67F48);

color: #fff;

border: none;

}

到这里，接近尾声了。还差搜索组件的动效。

16.在index.html敲入/复制以下代码，并保存。

17.在js文件上右击，新建 ——> js文件，命名为index.js

18.在index.js敲入/复制以下代码，并保存。

$(function(){

//给步进器设置宽度

var zongKuan = 0;

$('.bu-zou').each(function(){

zongKuan += $(this).innerWidth();

})

$('.bu-jin-qi-inner').width(zongKuan+8);

//输入框的动态效果

$(".su-ru-kuang").focus(function(){

$(".zhan-wei-ti-shi").css("top","-70%");

});

$(".su-ru-kuang").blur(function(){

if($(this).val() == ""){

$(".zhan-wei-ti-shi").css("top","0%");

}

});

})

19.在index.html追加敲入/复制以下代码，并保存。

20.在index.html追加敲入/复制以下适配移动设备的代码，并保存。

到这里，真的是整个项目就写完了，可以使用快捷键在浏览器中查看一下整体效果。

四.手机运行项目

是不是挺有成就感？但是有没有注意到，到目前只是在电脑上查看，之前说的可以在手机上运行呀？怎么不一样了呢？

接下来教大家手机上查看项目的方法

1.找到电脑本机的ip，并复制

mac的方法：

pc的方法：

请参考这个百度经验 https://jingyan.baidu.com/article/495ba841d36b0938b30ede9c.html

2.点击项目的index.html文件，用快捷浏览器中打开 mac【command + R】 pc【control + R】

3.把刚复制的ip粘贴覆盖冒号：左边的所有内容，左边的所有内容，左边的所有内容，并回车键。

注：不用纠结怎么和我的显示不一样，每个机器的ip和端口是不同的。

5.将浏览器地址栏的URL全选复制后，通过QQ发到手机上去。

6.让手机连的无线网和电脑连的无线网是同一个！（非常重要）

7.可以点开链接查看项目了，QQ能打开查看，复制到手机浏览器中也能打开查看。

下一章开始的教程，会以视频教程为主，文字教程为辅的形式呈现。

声明

原创文章 UI