前端如何搞设计

  • 通过这堂课-我希望大家了解设计,并真正的去设计我们的程序
  • 前端原来也可以做很多设计(就是我们思考的东西 - 记录下来)

什么是设计

生活中,设计无所不在。同一件事,同一个人,都可以有不同的设计。代码中的设计模式,也提现设计之美(问题:设计模式有哪几种,那些场景在使用)

  • 对设计官方的解答为:设计是把一种设想通过合理的规划、周密的计划、通过各种感觉形式传达出来的过程。
  1. 学习前端的路线与内容(从html到css再到js再到框架vue/react)
    html/css

js
web

  1. 旅游攻略(元旦三天去玩什么,去哪里玩,怎么玩,和谁玩^_^)做到 花最少的钱,看最多的风景

第一天:飞机抵达云南,入住温泉酒店,看看丽江

丽江

第二天:石林、彝人古镇、楚雄野生菌火锅

彝人古镇

第三天:洱海特色游船 - -万亩花海-网红玻璃球-白色桌椅- 大理古城

彝人古镇

  • 设计无处不在 - 它不同于只思考不做,或只做不思考。设计让两者趋近平衡,一个好的设计,会更加容易达到目标,一次次的设计,它会不断锻炼你的思考能力与执行能力。

设计的目的

  • 思路整理,减少遗漏(设计讲究细节)
  • 提前避免一定风险(技术复杂度/业务复杂度)
  • 可维护(存档机制)

程序如何做设计

做设计前我们应该要知道的事情

在思考如何实现的过程中,有了疑惑。必须解决疑惑再继续设计,否则疑问越大你的设计越容易被推翻。设计中不存在疑问,有疑问也在设计之前必须解决。

需求背景,功能流程。为达到什么目标,理解产品,这个时候也就能设计产品(这个系统是你设计的,你能给出更多的意见和达到目标的实现方式)

上下游环节必须清楚两者之间的联系,前端作为一个重要的中间人物,连接着多个方面,当涉及到任何一方,都需要出一份与之相关的设计

关联层
  1. (前端与后端)-- 接口协议,动作方式(增删改查)
  2. (前端与客户端-ios/android)-- 容器/前端与客户端通信协议
  3. (前端与运维)-- 部署与访问
  4. (前端与UI)-- 界面展示效果与动画
  5. (前端与产品)-- 展示业务信息
  6. (前端与用户)-- 用户交互体验与交互流程
  7. (前端当前打开环境)-- 浏览器环境(版本/第三方/自定义)
代码层
  • 文件目录结构设计
    ├── components  --------------------------------- 业务模块集合目录(组件)
    ├──  ├── index.js ------------------------------- 注册所有全局组件
    ├── router  ------------------------------------- 路由
    ├── store  -------------------------------------- vuex(分模块)
    ├── utils  -------------------------------------- 工具函数
    ├──  ├── commonData  ---------------------------- 挂载在$common上的数据
    ├──  ├── directive ------------------------------ 所有指令
    ├──  ├── filter  -------------------------------- 所有过滤器
    ├──  └── veeValidate ---------------------------- 表单校验配置
    ├── plugins  ------------------------------------ 引入的插件自动生成的配置
    ├── views  -------------------------------------- 页面集合目录
    ├── ├── xx.vue  --------------------------------- 页面
    ├── └── children -------------------------------- 拆分出的子页面
    ├── App.less  ----------------------------------- 主样式
    ├── App.vue  ------------------------------------ 主组件
    └── main.js  ------------------------------------ 项目级入口配置文件
  • 组件设计
// 上传图片
<template>
    <div>
        <p class="uploadTitle">{{this.item.label}}</p>
        <template v-if="isIOS">
            <sdk-button @click.native='iosUploadPic' :style="{background:themestyle}">
                上传图片
            </sdk-button>
        </template>
        <template v-else>
            <input type='file' v-show='false' accept='image/*' ref='input' @change='fileChange'>
            <sdk-button @click.native='$refs.input.click()' :style="{background:themestyle}">
                上传图片
            </sdk-button>
        </template>
        <div v-if='tip' class="tipText">{{tipText}}</div>
        <img v-if='imgUrl' class='imgShow' :src='imgUrl'/>
    </div>
</template>
  • 获取数据后处理设计 -- (缓存)
  • 功能设计 -- (vant?swiper?xxxx)
  • 路由设计 -- (navTabs)
  • utils设计 -- (验证/提示组件/通用方法)
  • 代码实现案例
通用层
  • 背景
  • 流程(数据流程与页面交互流程)
  • 排期
  • 风险

本次是新项目

设计案例演示

核心SDK:https://www.yuque.com/docs/share/9e42ca91-047e-495a-8eba-840c0822f649?# 《SDK前端设计文档》

nuxt改造:https://www.yuque.com/docs/share/27bc0c4f-f48d-46c7-807b-a0d4060022be?# 《SEO-nuxt改造实践》

作业:元旦节后的项目,写一份前端设计文档 - 发给小橘子

Last modification:December 31st, 2020 at 06:06 pm
如果和我讨论问题,请加好友qq/wx