首頁

前端大屏常用的幾種適配方案

前端達(dá)人

方 案 實現(xiàn)方式 優(yōu)點 缺點
vm vh 1.按照設(shè)計稿的尺寸，將px按比例計算轉(zhuǎn)為vw和vh 1.可以動態(tài)計算圖表的寬高，字體等，靈活性較高 2.當(dāng)屏幕比例跟 ui 稿不一致時，不會出現(xiàn)兩邊留白情況 1.每個圖表都需要單獨做字體、間距、位移的適配，比較麻煩
scale 1.通過 scale 屬性，根據(jù)屏幕大小，對圖表進(jìn)行整體的等比縮放 1.代碼量少，適配簡單2.一次處理后不需要在各個圖表中再去單獨適配 3.文字，圖片等大小均能自動適配 1.因為是根據(jù) ui 稿等比縮放，當(dāng)大屏跟 ui 稿的比例不一樣時，會出現(xiàn)周邊留白情況2.當(dāng)縮放比例過大時候，字體會有一點點模糊，就一點點3.當(dāng)縮放比例過大時候，事件熱區(qū)會偏移。
插件v-scale-screen 是使用 css 屬性 transform 實現(xiàn)縮放效果的一個大屏自適應(yīng)組件，通過 scale 進(jìn)行等比例計算，達(dá)到等比例縮放的效果 可以通過api調(diào)整原稿的寬高

方案一：vw vh

1.當(dāng)屏幕正好為16：9的時候
2.當(dāng)屏幕的尺寸比例大于 16:9 （左右拉長）
在這里插入圖片描述
3.當(dāng)屏幕的尺寸比例小于 16:9 時（左右變窄或者上下拉高）

在這里插入圖片描述
實現(xiàn)方法：
css 方案 - sass
utils.scss 

// 使用 scss 的 math 函數(shù)，https://sass-lang.com/documentation/breaking-changes/slash-div @use "sass:math"; // 默認(rèn)設(shè)計稿的寬度 $designWidth: 1920; // 默認(rèn)設(shè)計稿的高度 $designHeight: 1080; // px 轉(zhuǎn)為 vw 的函數(shù) @function vw($px) { @return math.div($px, $designWidth) * 100vw; } // px 轉(zhuǎn)為 vh 的函數(shù) @function vh($px) { @return math.div($px, $designHeight) * 100vh; } 復(fù)制代碼 


    




    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    •

路徑配置只需在vue.config.js里配置一下utils.scss的路徑，就可以全局使用了
vue.config.js 

module.exports = { css: { loaderOptions: { sass: { prependData: `@import "@/assets/css/utils.scss";` } } }, } 在 .vue 中使用 <template> <div class="box"> </div> </template> <script> export default{ name: "Box", } </script> <style lang="scss" scoped="scoped"> /* 
 直接使用 vw 和 vh 函數(shù)，將像素值傳進(jìn)去，得到的就是具體的 vw vh 單位   
 */ .box{ width: vw(300); height: vh(100); font-size: vh(16); background-color: black; margin-left: vw(10); margin-top: vh(10); border: vh(2) solid red; } </style> 


    




    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    • 

    
  • 
        22
    
    • 

    
  • 
        23
    
    • 

    
  • 
        24
    
    • 

    
  • 
        25
    
    • 

    
  • 
        26
    
    • 

    
  • 
        27
    
    • 

    
  • 
        28
    
    • 

    
  • 
        29
    
    • 

    
  • 
        30
    
    • 

    
  • 
        31
    
    • 

    
  • 
        32
    
    • 

    
  • 
        33
    
    • 

    
  • 
        34
    
    • 

    
  • 
        35
    
    •

css 方案 - less 

utils.less
@charset "utf-8"; // 默認(rèn)設(shè)計稿的寬度 @designWidth: 1920; // 默認(rèn)設(shè)計稿的高度 @designHeight: 1080; .px2vw(@name, @px) { @{name}: (@px / @designWidth) * 100vw; } .px2vh(@name, @px) { @{name}: (@px / @designHeight) * 100vh; } .px2font(@px) { font-size: (@px / @designWidth) * 100vw; } 路徑配置在vue.config.js里配置一下utils.less <style lang="less" scoped="scoped"> /* 
 直接使用 vw 和 vh 函數(shù)，將像素值傳進(jìn)去，得到的就是具體的 vw vh單位   
 */ .box{ .px2vw(width, 300); .px2vh(height, 100); .px2font(16); .px2vw(margin-left, 300); .px2vh(margin-top, 100); background-color: black; } </style> 定義 js 樣式處理函數(shù) // 定義設(shè)計稿的寬高 const designWidth = 1920; const designHeight = 1080; // px轉(zhuǎn)vw export const px2vw = (_px) => { return (_px * 100.0) / designWidth + 'vw'; }; export const px2vh = (_px) => { return (_px * 100.0) / designHeight + 'vh'; }; export const px2font = (_px) => { return (_px * 100.0) / designWidth + 'vw'; }; 


    




    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    • 

    
  • 
        22
    
    • 

    
  • 
        23
    
    • 

    
  • 
        24
    
    • 

    
  • 
        25
    
    • 

    
  • 
        26
    
    • 

    
  • 
        27
    
    • 

    
  • 
        28
    
    • 

    
  • 
        29
    
    • 

    
  • 
        30
    
    • 

    
  • 
        31
    
    • 

    
  • 
        32
    
    • 

    
  • 
        33
    
    • 

    
  • 
        34
    
    • 

    
  • 
        35
    
    • 

    
  • 
        36
    
    • 

    
  • 
        37
    
    • 

    
  • 
        38
    
    • 

    
  • 
        39
    
    • 

    
  • 
        40
    
    • 

    
  • 
        41
    
    • 

    
  • 
        42
    
    • 

    
  • 
        43
    
    • 

    
  • 
        44
    
    • 

    
  • 
        45
    
    • 

    
  • 
        46
    
    • 

    
  • 
        47
    
    • 

    
  • 
        48
    
    • 

    
  • 
        49
    
    • 

    
  • 
        50
    
    • 

    
  • 
        51
    
    •

屏幕變化后，圖表自動調(diào)整
這種使用方式有個弊端，就是屏幕尺寸發(fā)生變化后，需要手動刷新一下才能完成自適應(yīng)調(diào)整

為了解決這個問題，你需要在各個圖表中監(jiān)聽頁面尺寸變化，重新調(diào)整圖表，在 vue 項目中，也可以借助element-resize-detector，最好封裝個 resize 的指令，在各圖表中就只要使用該指令就可以了，畢竟作為程序員，能偷懶就偷懶
解決方案一

  1. 安裝 element-resize-detector 
npm install element-resize-detector --save 

    

    
  • 
        1
    
    •
  1. 封裝成自定義指令使用 
// directive.js import * as ECharts from "echarts"; import elementResizeDetectorMaker from "element-resize-detector"; import Vue from "vue"; const HANDLER = "_vue_resize_handler"; function bind(el, binding) { el[HANDLER] = binding.value ? binding.value : () => { let chart = ECharts.getInstanceByDom(el); if (!chart) { return; } chart.resize(); }; // 監(jiān)聽綁定的div大小變化，更新 echarts 大小 elementResizeDetectorMaker().listenTo(el, el[HANDLER]); } function unbind(el) { // window.removeEventListener("resize", el[HANDLER]); elementResizeDetectorMaker().removeListener(el, el[HANDLER]); delete el[HANDLER]; } // 自定義指令：v-chart-resize 示例：v-chart-resize="fn" Vue.directive("chart-resize", { bind, unbind }); 


    




    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    • 

    
  • 
        22
    
    • 

    
  • 
        23
    
    • 

    
  • 
        24
    
    • 

    
  • 
        25
    
    •
  1. main.js 中引入 
 import '@/directive/directive'; 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    •
  1. html 代碼中使用 
<template> <div class="linechart"> <div ref="chart" v-chart-resize class="chart"></div> </div> </template> 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    •

這里要注意的是，圖表中如果需要 tab 切換動態(tài)更新圖表數(shù)據(jù)，在更新數(shù)據(jù)時一定不要用 echarts 的 dispose 方法先將圖表移除，再重新繪制，因為 resize 指令中掛載到的圖表實例還是舊的，就監(jiān)聽不到新的 chart 元素的 resize 了，更新數(shù)據(jù)只需要用 chart 的 setOption 方法重新設(shè)置配置項即可。
解決方案二
1.在echarts中可以echarts.init(chatDom).resize()來解決寬高的自適應(yīng)問題 

 let chatDom = document.getElementById('main'); let myChart = this.$echarts.init(chatDom); //根據(jù)父盒子的尺寸調(diào)整echarts的大小 setTimeout(() => { window.addEventListener('resize', () => { this.$echarts.init(chatDom).resize(); }); }, 20); 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    •

2.在DataV中可以添加key來解決 

<dv-water-level-pond :config="config2" :key="key" ref="pie2" /> data(){ return { key: 1 } }, mounted() { this.pieOutlineFunc(); }, methods: { pieOutlineFunc() { var _this = this; window.addEventListener('resize', function (e) { _this.$nextTick(() => { console.log(_this.$refs.pie2); _this.key++; }); }); } } 


    




    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    •

方案二：csale

通過 css 的 scale 屬性，根據(jù)屏幕大小，用js監(jiān)測屏幕的大小變化對圖表進(jìn)行整體的等比縮放，從而達(dá)到自適應(yīng)效果
當(dāng)屏幕的尺寸比例剛好是 16:9 時，頁面能剛好全屏展示，內(nèi)容占滿顯示器
在這里插入圖片描述
當(dāng)屏幕尺寸比例大于 16:9 時，上下左右留白，左右占滿并居中，顯示比例保持 16:9

在這里插入圖片描述
當(dāng)屏幕尺寸比例大于 16:9 時，頁面左右留白，上下占滿并居中，顯示比例保持 16:9
在這里插入圖片描述
上代碼
html 

<template> <div class="screen-root"> <div class="screen" id="screen"> <div class="div1"> <h1>11111111111</h1> </div> <div class="div2"> <h1>2222222222</h1> </div> <div class="div3"> <h1>3333333333</h1> </div> </div> </div> </template> 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    •

js 

<script> export default { mounted() { // 初始化自適應(yīng)  ----在剛顯示的時候就開始適配一次 this.handleScreenAuto(); // 綁定自適應(yīng)函數(shù)   ---防止瀏覽器欄變化后不再適配 window.onresize = () => this.handleScreenAuto(); }, deleted() { window.onresize = null; }, methods: { // 數(shù)據(jù)大屏自適應(yīng)函數(shù) handleScreenAuto() { const designDraftWidth = 1920; //設(shè)計稿的寬度 const designDraftHeight = 1080; //設(shè)計稿的高度 // 根據(jù)屏幕的變化適配的比例 const scale = document.documentElement.clientWidth / document.documentElement.clientHeight < designDraftWidth / designDraftHeight ? document.documentElement.clientWidth / designDraftWidth : document.documentElement.clientHeight / designDraftHeight; // 縮放比例 document.querySelector('#screen').style.transform = `scale(${scale}) translate(-50%,-50%)`; return 1; } } }; </script> 


    




    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    • 

    
  • 
        22
    
    • 

    
  • 
        23
    
    • 

    
  • 
        24
    
    • 

    
  • 
        25
    
    • 

    
  • 
        26
    
    • 

    
  • 
        27
    
    • 

    
  • 
        28
    
    • 

    
  • 
        29
    
    • 

    
  • 
        30
    
    •

css 

<style lang="scss" scoped> /*
  除了設(shè)計稿的寬高是根據(jù)您自己的設(shè)計稿決定以外，其他復(fù)制粘貼就完事
*/ h1 { color: red; font-size: 50px; } .screen-root { height: 100vh; width: 100vw; .screen { display: inline-block; width: 1920px; //設(shè)計稿的寬度 height: 1080px; //設(shè)計稿的高度 transform-origin: 0 0; position: absolute; left: 50%; top: 50%; border: 2px solid rgb(31, 210, 145); box-sizing: border-box; display: flex; .div1 { background-color: #fff; height: 100%; text-align: center; flex: 0 1 30%; } .div2 { background-color: rgb(133, 14, 14); height: 100%; text-align: center; flex: 0 1 40%; } .div3 { background-color: rgb(61, 6, 188); height: 100%; text-align: center; flex: 0 1 30%; } } } </style> 


    




    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    • 

    
  • 
        22
    
    • 

    
  • 
        23
    
    • 

    
  • 
        24
    
    • 

    
  • 
        25
    
    • 

    
  • 
        26
    
    • 

    
  • 
        27
    
    • 

    
  • 
        28
    
    • 

    
  • 
        29
    
    • 

    
  • 
        30
    
    • 

    
  • 
        31
    
    • 

    
  • 
        32
    
    • 

    
  • 
        33
    
    • 

    
  • 
        34
    
    • 

    
  • 
        35
    
    • 

    
  • 
        36
    
    • 

    
  • 
        37
    
    • 

    
  • 
        38
    
    • 

    
  • 
        39
    
    • 

    
  • 
        40
    
    • 

    
  • 
        41
    
    • 

    
  • 
        42
    
    • 

    
  • 
        43
    
    •

方案三：插件v-scale-screen

它其實也是通過 scale 進(jìn)行等比例計算放大和縮小的，和方案二的原理是一樣的，還可以通過api調(diào)整樣式，源碼地址和對應(yīng)的API
在這里插入圖片描述
使用方法：
1.vue2請使用v-scale-screen@1.0.0版本，vue3請使用v-scale-screen@2.0.0版本 

npm install v-scale-screen@1.0.0 -save
# or
yarn add v-scale-screen 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    •

2.使用-vue2中使用插件導(dǎo)入，vue3以組件導(dǎo)入 

vue2 // main.js import VScaleScreen from 'v-scale-screen' Vue.use(VScaleScreen) 組件內(nèi)使用 //html <v-scale-screen width="1920" height="1080" :boxStyle="boxStyle"> <div> <v-chart>....</v-chart> <v-chart>....</v-chart> <v-chart>....</v-chart> <v-chart>....</v-chart> <v-chart>....</v-chart> </div> </v-scale-screen> //js data() { return { boxStyle: { backgroundColor: 'green' }, } 


    




    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    • 

    
  • 
        22
    
    • 




vue3 <v-scale-screen width="1920" height="1080"> <div> <v-chart>....</v-chart> <v-chart>....</v-chart> <v-chart>....</v-chart> <v-chart>....</v-chart> <v-chart>....</v-chart> </div> </v-scale-screen> <script> import VScaleScreen from 'v-scale-screen' export default { components:{ VScaleScreen } } </script> 


    




    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    •
  1. vue2演示地址



    著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

    藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加藍(lán)小助，微信號:ben_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。


    分享此文一切功德，皆悉回向給文章原作者及眾讀者.
    免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

    藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

評論(0) 瀏覽(2117)

Laravel + Vue 3（Vite、TypeScript）SPA 設(shè)置

前端達(dá)人

在本教程中，我將向大家展示如何使用 Laravel + Vue 3 使用 typescript 和 Vite 設(shè)置你自己的單頁應(yīng)用程序。

這是在 Laravel 項目中添加 PWA 的手動方法。我們不會使用 InertiaJS 或其他類似的東西，我們也不會混合使用。我們將手動實現(xiàn)我們自己的 VueJS 前端。

第 1 步：讓我們創(chuàng)建我們的 Laravel 項目 

composer create-project laravel/laravel laravel-vue-manual 

    

    
  • 
        1
    
    •

第 2 步：設(shè)置前端

在我們的 laravel 項目中，讓我們使用 yarn 運行一個命令，并選擇 vue 和 typescript。 

yarn create vite 

    

    
  • 
        1
    
    •

將項目名稱設(shè)置為：FrontEndApp
選擇：Vue
選擇：TypeScript

然后轉(zhuǎn)到我們的FrontEndApp目錄并運行yarn或yarn install安裝依賴項。

配置 Vite

讓我們配置我們的 vite 配置FrontEndApp\vite.config.ts 

import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; export default ({ mode }) => { // 檢查是否開發(fā) const isDevelopment = mode === "development"; return defineConfig({ server: { port: 3000, }, build: { // 生成的文件將添加到此處 outDir: "./../public/app", }, // 也將更改基于模式的基礎(chǔ) base: isDevelopment ? "/" : "/app/", plugins: [vue()], }); }; 


    




    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    •

然后讓我們更改build腳本FrontEndApp\package.json，這樣每次我們構(gòu)建它時都會替換以下文件public/app： 

{ ... "scripts": { "dev": "vite", "build": "vue-tsc --noEmit && vite build --emptyOutDir", "preview": "vite preview" }, ... } 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    •

現(xiàn)在，如果我們在FrontEndApp中運行yarn build，它應(yīng)該在laravel項目的根目錄中的public文件夾中創(chuàng)建一個名為 app 的文件夾。

在這里插入圖片描述

第 3 步：設(shè)置 Laravel 路由

讓我們設(shè)置我們的 laravel 路由，以便我們可以訪問我們剛剛創(chuàng)建的文件。

讓我們編輯這個文件 routes\web.php 

<?php

use Illuminate\Support\Facades\Route; Route::get('/', function () { return view('welcome'); }); Route::get('/app/{any}', function () { $path = public_path('app/index.html'); abort_unless(file_exists($path), 400, 'Page is not Found!'); return file_get_contents($path); }) ->name('FrontEndApp'); 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    •

現(xiàn)在，如果我們http://127.0.0.1:8000/app在瀏覽器中打開，我們現(xiàn)在可以看到我們的應(yīng)用程序已啟動。

第 4 步：設(shè)置腳本

我們將在我們的根項目目錄中添加一個開發(fā)包，并同時調(diào)用它。我們用它來一次運行 2 個或更多命令。

安裝： 

yarn add -D concurrently 

    

    
  • 
        1
    
    •

如果我們想要自動工作，不想每次使用時都重新構(gòu)建frontednapp，我們要做的是在package.json項目的根目錄中添加一個新腳本。 

{ ... "scripts": { ... "front:serve": "cd FrontEndApp && yarn dev", "front:build": "cd FrontEndApp && yarn build", "serve": "concurrently \"php artisan serve --port=8080\" \"yarn front:serve\"", "deploy": "yarn setup && yarn front:build && php artisan migrate" }, ... } 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    •

這樣， running yarn serve將同時運行 127.0.0.1:8080 和 localhost:3000。你現(xiàn)在可以同時使用這兩個項目。

完成 FrontEndApp 的工作后，你可以運行 yarn deploy 以構(gòu)建我們的前端。

結(jié)論

我相信這也是大家可以在 laravel 項目中添加 pwa 的一種方式，這樣你就可以將它們保存在一個項目中。

考慮到這一點，你可以添加routes到你的 FrontEndApp 項目中，還可以添加狀態(tài)管理器PiniaJA，例如 等等。




文章來源：csdn

著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加藍(lán)小助，微信號:ben_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。


分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

評論(0) 瀏覽(707)

HMI靈感-儀表盤（深色風(fēng)格）

博博

1備份@1x.png2@1x.png



作者：博博      來源：大作



藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。 



分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 



藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

評論(0) 瀏覽(664)

HMI靈感-中控（淺色風(fēng)格）

博博

1@1x.png2@1x.png

3@1x.png4@1x.png



作者：博博      來源：大作



藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。 



分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 



藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

評論(0) 瀏覽(710)

HMI靈感-儀表盤（科技風(fēng)格）

博博


1@1x.png2@1x.png3@1x.png

作者：博博      來源：大作



藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。 



分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 



藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

評論(0) 瀏覽(872)

用戶體驗 | 從生活中感悟峰終定律

ui設(shè)計分享達(dá)人

本文講述了“峰終定律”的定義，并結(jié)合筆者生活中的兩個例子做了圖文分析，最后通過學(xué)習(xí)海底撈的案例，然后結(jié)合顧客角度將一次糟糕的活動進(jìn)行了改進(jìn)。

一、峰終定律定義：

峰終定律（ Peak–End Rule），是由丹尼爾·卡尼曼（2002年諾貝爾經(jīng)濟學(xué)獎獲得者，心理學(xué)家）提出的——他發(fā)現(xiàn)人們對體驗（體驗事物或者產(chǎn)品）的記憶由兩個因素決定：

  • 第一個因素是體驗最高峰時的感覺（最高峰分為正的最高峰和負(fù)的最高峰）。
  • 第二個因素是體驗結(jié)束時的感覺。

即，除了峰值和終值時之外的其他體驗，無論好與不好體驗的比重是多少，體驗時間的長短，對記憶或感受都沒那么大影響，會被選擇性忽略。

概念講完，下面筆者結(jié)合去飯店買飯的故事，使用“峰終定律”進(jìn)行圖文分析，為什么一家飯店給我的體驗非常糟糕，而另一家飯店我愿意推薦我的同事也去嘗試。

二、兩個故事

1. 第一家體驗不好的店：某燒臘飯店

之前有一段時間飯店聯(lián)合天地壹號搞活動，買飯送一瓶鐵罐裝的天地壹號。某天中午下班提前5分鐘到了飯店，我特意說明了要醬汁，老板的“嗯嗯哦哦”充滿了敷衍。

我看著店里配餐員配餐、出餐，然后我問這份是不是我的，店里服務(wù)員支支吾吾，也沒有看著我，然后那份飯被拿去跟天地壹號的工作人員合影，一張不滿意又拍一張，一個角度拍完又換一個角度。最后，飯店的服務(wù)員才把那份飯給我，當(dāng)時我心里憋了一股氣，就差破口大罵：我中午吃飯+午睡時間就一個小時，為了能睡好點還要吃得快點。

這家店給我的體驗就是，不把用戶當(dāng)用戶，心里非常不是滋味。

而當(dāng)我向同事說起這家店時，我會推薦手撕雞飯，這是我在廣州吃過的最好吃的手撕雞飯， 沒有之一。同時，我還會說上面的故事給同事，最后評價道：可以試試的，另外，出餐質(zhì)量有問題他們也會給你換一份的。

當(dāng)我說完這次的經(jīng)歷給同事聽，同事并沒有表示會去嘗試一次，因為我說的故事，又因為價格也不便宜。所以說，店鋪（或者說品牌）是在食物（或者說餐品）之前被消費的，這是給用戶留下第一印象的關(guān)鍵，第一印象不好，即便是廣州第一手撕雞，也不會去嘗試。

那么使用“峰終定律”去分析這次糟糕的就餐體驗就是：

峰值有兩個，正峰值是廣州第一手撕雞的“口味”，負(fù)峰值是“員工服務(wù)”。負(fù)峰值的出現(xiàn)，說明了店家在活動開始前并沒有設(shè)計好活動流程，服務(wù)員也就沒有足夠的授權(quán)去處理和應(yīng)對。

終值是“離店”時的不爽，店家并沒有作出任何的正面回應(yīng)，沒有表達(dá)歉意，沒有意識到這樣做會給顧客造成怎樣的影響。

“員工服務(wù)”是直接突破了我的忍耐底線，“離店”時店家的不作為再次挑戰(zhàn)了我的忍耐底線。短時間內(nèi)兩次挑戰(zhàn)我的忍耐底線，店家不但“失去”了我，我的幾個同事也不會是潛在客戶了。

忍耐底線不是卡尼曼教授的理論，是我結(jié)合了梁寧老師講過的內(nèi)容，然后加到了這張“用戶體驗?zāi)Ｐ汀眻D上。

梁寧老師講的是：“PC時代用戶等待一個頁面打開的忍耐底線平均數(shù)是7秒，等了7秒還沒打開，基本上99%的用戶就會離開。所以，對成本的控制是本分，但是不能挑戰(zhàn)用戶的忍耐底線?！?

2. 第二家體驗好的店：某粥粉面飯店

某天中午我發(fā)現(xiàn)寫字樓下新開了一家飯店，我到店里問老板，有什么賣的好的推薦一下，老板面帶笑容用“廣普”跟我一一介紹：哪個菜用什么材料做，哪個湯用什么材料燉，吃不了辣可以吃……在老板眾多推薦中選了一份，第一次嘗試這家店，總體感覺不錯。后面選擇了老板推薦的肉餅飯，發(fā)現(xiàn)真合我胃口。

上兩周有兩天中午休息時都到店里想點肉餅飯，但是連續(xù)兩天都在我來之前賣完了，之后老板說可以掃門口的小程序預(yù)約下單，第二天上班我早早的就預(yù)約了肉餅飯，到店之后老板已經(jīng)打包好了，我把訂單信息給老板看，老板說了一句我聽到就覺得好笑，并且每當(dāng)給人推薦這家店時就說的一句話：“這是我們專門給您留的肉餅飯?！?

當(dāng)我笑著回應(yīng)謝謝的時候我也在想，這飯是我在小程序上面早早預(yù)定的，老板還說是專門我留的；因為我先付錢了，所以老板不賣給別人了。

我又想到，這家店的老板是愿意站在顧客的角度來提供對應(yīng)的服務(wù)的，并且我也確實感受到了老板的真誠、熱情。

于是我把這家店介紹給了幾個同事，他們都表示下次沒有自己帶午餐的時候會試一下，并且有兩個同事聽了我的推薦后去下單了，其中有一位同事表示會回購。

這家店給我的體驗就是，不把用戶當(dāng)流量，心里有用戶，產(chǎn)品可以，用戶自然會安利給身邊人嘗試一下。

使用“峰終定律”去分析這次就餐體驗就是：

有兩個正峰值，第一個正峰值是讓我感受到店家心里有顧客的“員工服務(wù)”。第二個正峰值是“口味”，這里甚至有一點點主觀上的小驚喜：當(dāng)時抱著不知道會不會踩雷，試試新店的心態(tài)，當(dāng)我試到肉餅飯時，小驚喜就來了——比我以往在外面吃到的肉餅飯都好吃。

小結(jié)：

當(dāng)我跟同事同事說起第一家飯店體驗不好的時候，并不是說他的“港式氛圍”裝修不好，不是說出餐有問題不給換新的，手撕雞也是廣州最好吃的，而是說，這家店給我的感覺是他并不像跟用戶建立長期關(guān)系，只做一桿子買賣。于是他們并不注重維護(hù)客情關(guān)系，當(dāng)他們把合過影的手撕雞飯遞給我時，連安撫情緒的話都沒有，就餐體驗自然就糟糕透了。

那么如果我是這家燒臘飯店的主理人，那我會如何設(shè)計本次活動？

我們先看看餐飲行業(yè)的巨頭都是怎么做的，因服務(wù)被大家口口相傳的海底撈就是非常值的學(xué)習(xí)的對象。

三、使用“峰終定律”分析最近一次我去海底撈時的體驗

通過模型，我有以下幾點感悟：

  • 排隊時海底撈提供的各種免費服務(wù)及零食飲料，目的是降低顧客等待叫號的無聊感，甚至讓顧客心甘情愿地等待叫號就餐，進(jìn)而提高顧客滿意度。
  • 海底撈從顧客排隊，到顧客就餐，最后離店，打造了一套密集的正峰值的服務(wù)觸點。因此人們講到海底撈最先想起的就是海底撈服務(wù)。
  • 上圖列舉的點無明顯的負(fù)峰值，并且有很多服務(wù)觸點都是免費的，這就要求海底撈必須投入相應(yīng)的資源，那么成本必然會少不了。
  • 關(guān)于資源與成本。理想情況下，每一個服務(wù)觸點都需要妥善處理。但實際情況是，我們不可能讓用戶在所有服務(wù)觸點都達(dá)到預(yù)期，我們必須在有限的資源下，換取用戶更多的正峰值與更好的終值，因此如何控制成本，合理配置有限的資源非常重要。

服務(wù)觸點：用戶為了完成目標(biāo)，需要做一系列連續(xù)的行為，而這一連串行為中會涉及到一個一個的用戶與產(chǎn)品完成交互的觸點，這就是服務(wù)觸。比如上圖所示的，海底撈出于提高轉(zhuǎn)化率、降低顧客等待叫號時的無聊感等原因，在顧客排隊時可以體驗免費的美甲服務(wù)、免費擦鞋服務(wù)等。

四、燒臘飯店活動改進(jìn)方案

帶著學(xué)習(xí)完海底撈得出的感悟，下面我來嘗試思考一下，我現(xiàn)在是這家燒臘飯店的主理人，那我會這樣設(shè)計本次活動：

首先需要了解我們的顧客：

1、顧客畫像

附近街坊、附近上班族，方便快捷解決午/晚餐。

2、顧客預(yù)期

選擇符合自己口味的菜品，店內(nèi)就餐/打包回公司吃；店家穩(wěn)定出餐（口味穩(wěn)定、不要有異物等）；不希望排長龍。

3、服務(wù)觸點

點餐時、支付時、等待出餐時（排隊）、（打包完）出餐時、離店時。

其次，才到本次活動的設(shè)計：

1、背景

贊助商天地壹號需要做品牌推廣，找到我們合作，方案就是消費即送天地壹號一瓶。

2、目的

幫助合作伙伴宣傳的同時，吸引新的顧客，回饋老顧客，提升營業(yè)額。

3、具體方案

3.1、制作印有“12.1~12.3日，消費即送天地壹號一瓶，送完即止”的宣傳海報，并且放置在店鋪門口。

3.2、完善服務(wù)流程。（請看下圖）

3.3、設(shè)置幾種異常情況的應(yīng)對方案。（請看下圖）

完善好服務(wù)流程，提前設(shè)置好幾個異常情況的應(yīng)對方案，相比于海底撈一連串的各種免費服務(wù)，其實花不了多少實際的金錢成本。但是卻能用最少的資源，最大程度的避免“負(fù)峰值”的出現(xiàn)。

另外，天地壹號的工作人員提出合影，飯店應(yīng)該用自己的員工餐，而不是用顧客的。這其實不是異常情況的應(yīng)對方案，而是作為服務(wù)行業(yè)從業(yè)人員該有的覺悟。

本文到此結(jié)束，朋友們?nèi)绻O(shè)計/體驗了好的“峰終體驗”的案例，麻煩在評論區(qū)告知我一聲，讓我也去體驗一把~

作者：我是Berwin
來源：人人都是產(chǎn)品經(jīng)理
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加藍(lán)小助，微信號:ben_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。


分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

評論(0) 瀏覽(809)

設(shè)計怎樣讓用戶「同時」做好多件事？

ui設(shè)計分享達(dá)人

時間對于我們每個人來說都極為重要和珍貴。隨著生活節(jié)奏的加速，很多產(chǎn)品也都開始注重和考慮對于用戶時間的節(jié)省和分配。本文重點分享三種在交互設(shè)計中幫助用戶「同時做幾件事」的設(shè)計方法，以及其對應(yīng)的優(yōu)秀案例：

  • 分割屏幕的布局
  • 更容易再續(xù)操作
  • 忽略非重要操作

希望會為你帶來更多的設(shè)計靈感。

01 分割屏幕的布局

通過將屏幕的布局進(jìn)行分割處理，可同時呈現(xiàn)多項內(nèi)容，讓用戶自由選擇任務(wù)主次，同時處理多項任務(wù)。分屏設(shè)計很常見，但其中的體驗細(xì)節(jié)卻依舊值得研究和優(yōu)化。

案例1

微信在 Pad 端的分屏布局考慮得很周到，看微信視頻時支持分屏功能，還能夠調(diào)整屏幕分割的尺寸比例。最小的分屏尺寸做成了手機尺寸，體驗順暢，看視頻、接微信兩不誤：

案例錦囊｜設(shè)計怎樣讓用戶「同時」做好多件事？

案例 2

bilibili 在移動端的視頻通過小窗模式可以不間斷播放，不僅可以在 App 內(nèi)或外呈現(xiàn)小窗模式，正在播的視頻，在被臨時打斷退出視頻后，還可以用音頻的方式繼續(xù)播放：

案例錦囊｜設(shè)計怎樣讓用戶「同時」做好多件事？

案例 3

微信的新功能，在你閱讀文章時依舊能看到朋友發(fā)來的微信消息，可以直接在當(dāng)前頁面回復(fù)消息，避免你在看文章時閱讀不了微信消息。你還可以將信息“標(biāo)記未讀”，一會兒再做處理：

案例錦囊｜設(shè)計怎樣讓用戶「同時」做好多件事？

案例4

微信視頻號改版后，點擊視頻號下方的博主名稱和頭像，下方彈窗會彈出該博主的主頁和其他視頻，而當(dāng)前正在播放的視頻會漸漸呈現(xiàn)小屏播放，視頻內(nèi)容不會被遮擋，既不影響觀看，也不影響用戶探索該博主的其他視頻內(nèi)容：

案例錦囊｜設(shè)計怎樣讓用戶「同時」做好多件事？

案例 5

在微信訂閱號中展示的視頻內(nèi)容可以通過劃到右下角變成小窗播放音頻，既可以聽內(nèi)容，也不影響你繼續(xù)瀏覽訂閱號的其他內(nèi)容：

案例錦囊｜設(shè)計怎樣讓用戶「同時」做好多件事？

02 更容易再續(xù)操作

產(chǎn)品可以讓操作更容易被用戶管理和掌控，在被打斷后很容易被用戶重新再續(xù)，給用戶足夠的掌控感。在一些特殊情況下，幾件事可以交替、穿插地處理，同時進(jìn)行。

案例 1

釘釘?shù)囊苿佣烁〈肮δ?，向右滑動退出正在操作的頁面時，就會出現(xiàn)添加浮窗區(qū)域，用于收錄未做完的操作。同時顯示出已添加浮窗的內(nèi)容數(shù)量，最多添加 5 個：

案例錦囊｜設(shè)計怎樣讓用戶「同時」做好多件事？

案例2

微信的浮窗功能也可以幫助用戶更快捷地收錄未及時閱讀的內(nèi)容，在打開時還可以定位到上次中斷閱讀的位置。用戶不再需要整塊的大量的時間來閱讀長篇文章，可以更合理地掌控閱讀節(jié)奏：

案例錦囊｜設(shè)計怎樣讓用戶「同時」做好多件事？

案例3

微信讀書 App 會在你跳讀到其他章節(jié)時，在頁面下方顯示“返回原進(jìn)度”的按鈕，方便你在跳讀后回來繼續(xù)閱讀：

案例錦囊｜設(shè)計怎樣讓用戶「同時」做好多件事？

案例4

網(wǎng)易163 郵箱側(cè)重于為你呈現(xiàn)工作的多線程。每點開一封郵件，頁面上方會增加一個類似瀏覽器標(biāo)簽頁的 Tab，你可以通過它們查看自己的工作和閱讀軌跡。當(dāng)你在寫郵件時，同時又收到了其他的新郵件，去查看新郵件之后，可以通過 Tab 直接回到郵件編輯頁面，繼續(xù)編寫剛才的郵件：

案例錦囊｜設(shè)計怎樣讓用戶「同時」做好多件事？

案例5

使用釘釘發(fā)起會議邀請，如果中途退出，系統(tǒng)幫助你自動保存。再發(fā)起會議邀請時也會給出上次操作的提示，幫你續(xù)寫內(nèi)容：

案例錦囊｜設(shè)計怎樣讓用戶「同時」做好多件事？

03 忽略非重要操作

用戶可以選擇忽略或隱藏并不重要的、正在進(jìn)程中的任務(wù)，將更多的時間用在其他事情而非無法控制的等待上。

案例1

iOS 系統(tǒng)中，當(dāng)你在不同 App 之間傳遞文件時，如果文件過大，彈窗的“取消”按鈕會在幾秒鐘之后變成“隱藏”，用戶點擊后可以繼續(xù)做其他操作，并不妨礙后臺的文件傳輸。

案例錦囊｜設(shè)計怎樣讓用戶「同時」做好多件事？

案例2

微信在接收超大文件時，增加了“發(fā)送給朋友”的選項，你不必等待文件在自己這邊下載完成后再發(fā)送，可以直接發(fā)送源文件給對方，同時下載：

案例錦囊｜設(shè)計怎樣讓用戶「同時」做好多件事？

案例3

微信撥打語音的界面，在等待好友接聽的過程中，你可以看到對方朋友圈的動態(tài)，緩解無聊的等待，也為即將進(jìn)行的語音聊天提供了話題：

案例錦囊｜設(shè)計怎樣讓用戶「同時」做好多件事？

作者：元堯
來源：人人都是產(chǎn)品經(jīng)理
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加藍(lán)小助，微信號:ben_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。


分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

評論(0) 瀏覽(760)

「無畏·無界」比亞迪智能座艙UI創(chuàng)意設(shè)計大賽

博博


「無畏·無界」比亞迪智能座艙UI創(chuàng)意設(shè)計大賽
收藏
「無畏·無界」比亞迪智能座艙UI創(chuàng)意設(shè)計大賽
收藏
「無畏·無界」比亞迪智能座艙UI創(chuàng)意設(shè)計大賽
收藏
「無畏·無界」比亞迪智能座艙UI創(chuàng)意設(shè)計大賽
收藏
「無畏·無界」比亞迪智能座艙UI創(chuàng)意設(shè)計大賽
收藏
「無畏·無界」比亞迪智能座艙UI創(chuàng)意設(shè)計大賽



作者：YoueSir      來源：站酷



藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。 



分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 



藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

評論(0) 瀏覽(895)

HMI概念設(shè)計

博博


HMI概念設(shè)計
收藏
HMI概念設(shè)計
收藏
HMI概念設(shè)計
收藏
HMI概念設(shè)計
收藏
HMI概念設(shè)計
收藏
HMI概念設(shè)計



作者：秦冬冬      來源：站酷



藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。 



分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 



藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

評論(0) 瀏覽(892)

《地平線》——比亞迪智能座

博博



作者：山上一只貓      來源：站酷



藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。 



分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 



藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

評論(0) 瀏覽(860)

日歷

鏈接

個人資料

存檔