| 方 案 | 實現方式 | 優點 | 缺點 |
|---|---|---|---|
| vm vh | 1.按照設計稿的尺寸，將px按比例計算轉為vw和vh | 1.可以動態計算圖表的寬高，字體等，靈活性較高 2.當屏幕比例跟 ui 稿不一致時，不會出現兩邊留白情況 | 1.每個圖表都需要單獨做字體、間距、位移的適配，比較麻煩 |
| scale | 1.通過 scale 屬性，根據屏幕大小，對圖表進行整體的等比縮放 | 1.代碼量少，適配簡單2.一次處理后不需要在各個圖表中再去單獨適配 3.文字，圖片等大小均能自動適配 | 1.因為是根據 ui 稿等比縮放，當大屏跟 ui 稿的比例不一樣時，會出現周邊留白情況2.當縮放比例過大時候，字體會有一點點模糊，就一點點3.當縮放比例過大時候，事件熱區會偏移。 |
| 插件v-scale-screen | 是使用 css 屬性 transform 實現縮放效果的一個大屏自適應組件，通過 scale 進行等比例計算，達到等比例縮放的效果 | 可以通過api調整原稿的寬高 |
1.當屏幕正好為16：9的時候
2.當屏幕的尺寸比例大于 16:9 （左右拉長）
3.當屏幕的尺寸比例小于 16:9 時（左右變窄或者上下拉高）
實現方法：
css 方案 - sass
utils.scss
// 使用 scss 的 math 函數，https://sass-lang.com/documentation/breaking-changes/slash-div @use "sass:math"; // 默認設計稿的寬度 $designWidth: 1920; // 默認設計稿的高度 $designHeight: 1080; // px 轉為 vw 的函數 @function vw($px) { @return math.div($px, $designWidth) * 100vw; } // px 轉為 vh 的函數 @function vh($px) { @return math.div($px, $designHeight) * 100vh; } 復制代碼
路徑配置只需在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 函數，將像素值傳進去，得到的就是具體的 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>
css 方案 - less
utils.less @charset "utf-8"; // 默認設計稿的寬度 @designWidth: 1920; // 默認設計稿的高度 @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 函數，將像素值傳進去，得到的就是具體的 vw vh單位 */ .box{ .px2vw(width, 300); .px2vh(height, 100); .px2font(16); .px2vw(margin-left, 300); .px2vh(margin-top, 100); background-color: black; } </style> 定義 js 樣式處理函數 // 定義設計稿的寬高 const designWidth = 1920; const designHeight = 1080; // px轉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'; };
屏幕變化后，圖表自動調整
這種使用方式有個弊端，就是屏幕尺寸發生變化后，需要手動刷新一下才能完成自適應調整
為了解決這個問題，你需要在各個圖表中監聽頁面尺寸變化，重新調整圖表，在 vue 項目中，也可以借助element-resize-detector，最好封裝個 resize 的指令，在各圖表中就只要使用該指令就可以了，畢竟作為程序員，能偷懶就偷懶
解決方案一
npm install element-resize-detector --save
// 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(); }; // 監聽綁定的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 });
import '@/directive/directive';
<template> <div class="linechart"> <div ref="chart" v-chart-resize class="chart"></div> </div> </template>
這里要注意的是，圖表中如果需要 tab 切換動態更新圖表數據，在更新數據時一定不要用 echarts 的 dispose 方法先將圖表移除，再重新繪制，因為 resize 指令中掛載到的圖表實例還是舊的，就監聽不到新的 chart 元素的 resize 了，更新數據只需要用 chart 的 setOption 方法重新設置配置項即可。
解決方案二
1.在echarts中可以echarts.init(chatDom).resize()來解決寬高的自適應問題
let chatDom = document.getElementById('main'); let myChart = this.$echarts.init(chatDom); //根據父盒子的尺寸調整echarts的大小 setTimeout(() => { window.addEventListener('resize', () => { this.$echarts.init(chatDom).resize(); }); }, 20);
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++; }); }); } }
通過 css 的 scale 屬性，根據屏幕大小，用js監測屏幕的大小變化對圖表進行整體的等比縮放，從而達到自適應效果
當屏幕的尺寸比例剛好是 16:9 時，頁面能剛好全屏展示，內容占滿顯示器
當屏幕尺寸比例大于 16:9 時，上下左右留白，左右占滿并居中，顯示比例保持 16:9
當屏幕尺寸比例大于 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>
js
<script> export default { mounted() { // 初始化自適應 ----在剛顯示的時候就開始適配一次 this.handleScreenAuto(); // 綁定自適應函數 ---防止瀏覽器欄變化后不再適配 window.onresize = () => this.handleScreenAuto(); }, deleted() { window.onresize = null; }, methods: { // 數據大屏自適應函數 handleScreenAuto() { const designDraftWidth = 1920; //設計稿的寬度 const designDraftHeight = 1080; //設計稿的高度 // 根據屏幕的變化適配的比例 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>
css
<style lang="scss" scoped> /* 除了設計稿的寬高是根據您自己的設計稿決定以外，其他復制粘貼就完事 */ h1 { color: red; font-size: 50px; } .screen-root { height: 100vh; width: 100vw; .screen { display: inline-block; width: 1920px; //設計稿的寬度 height: 1080px; //設計稿的高度 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>
它其實也是通過 scale 進行等比例計算放大和縮小的，和方案二的原理是一樣的，還可以通過api調整樣式，源碼地址和對應的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
2.使用-vue2中使用插件導入，vue3以組件導入
vue2 // main.js import VScaleScreen from 'v-scale-screen' Vue.use(VScaleScreen) 組件內使用 //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' }, }
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>
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
在本教程中，我將向大家展示如何使用 Laravel + Vue 3 使用 typescript 和 Vite 設置你自己的單頁應用程序。
這是在 Laravel 項目中添加 PWA 的手動方法。我們不會使用 InertiaJS 或其他類似的東西，我們也不會混合使用。我們將手動實現我們自己的 VueJS 前端。
composer create-project laravel/laravel laravel-vue-manual
在我們的 laravel 項目中，讓我們使用 yarn 運行一個命令，并選擇 vue 和 typescript。
yarn create vite
將項目名稱設置為：FrontEndApp
選擇：Vue
選擇：TypeScript
然后轉到我們的FrontEndApp目錄并運行yarn或yarn install安裝依賴項。
配置 Vite
讓我們配置我們的 vite 配置FrontEndApp\vite.config.ts
import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; export default ({ mode }) => { // 檢查是否開發 const isDevelopment = mode === "development"; return defineConfig({ server: { port: 3000, }, build: { // 生成的文件將添加到此處 outDir: "./../public/app", }, // 也將更改基于模式的基礎 base: isDevelopment ? "/" : "/app/", plugins: [vue()], }); };
然后讓我們更改build腳本FrontEndApp\package.json，這樣每次我們構建它時都會替換以下文件public/app：
{ ... "scripts": { "dev": "vite", "build": "vue-tsc --noEmit && vite build --emptyOutDir", "preview": "vite preview" }, ... }
現在，如果我們在FrontEndApp中運行yarn build，它應該在laravel項目的根目錄中的public文件夾中創建一個名為 app 的文件夾。
讓我們設置我們的 laravel 路由，以便我們可以訪問我們剛剛創建的文件。
讓我們編輯這個文件 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');
現在，如果我們http://127.0.0.1:8000/app在瀏覽器中打開，我們現在可以看到我們的應用程序已啟動。
我們將在我們的根項目目錄中添加一個開發包，并同時調用它。我們用它來一次運行 2 個或更多命令。
安裝：
yarn add -D concurrently
如果我們想要自動工作，不想每次使用時都重新構建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" }, ... }
這樣， running yarn serve將同時運行 127.0.0.1:8080 和 localhost:3000。你現在可以同時使用這兩個項目。
完成 FrontEndApp 的工作后，你可以運行 yarn deploy 以構建我們的前端。
我相信這也是大家可以在 laravel 項目中添加 pwa 的一種方式，這樣你就可以將它們保存在一個項目中。
考慮到這一點，你可以添加routes到你的 FrontEndApp 項目中，還可以添加狀態管理器PiniaJA，例如 等等。
文章來源：csdn
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
作者：博博 來源：大作
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
作者：博博 來源：大作
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
作者：博博 來源：大作
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
本文講述了“峰終定律”的定義，并結合筆者生活中的兩個例子做了圖文分析，最后通過學習海底撈的案例，然后結合顧客角度將一次糟糕的活動進行了改進。
峰終定律（ Peak–End Rule），是由丹尼爾·卡尼曼（2002年諾貝爾經濟學獎獲得者，心理學家）提出的——他發現人們對體驗（體驗事物或者產品）的記憶由兩個因素決定：
即，除了峰值和終值時之外的其他體驗，無論好與不好體驗的比重是多少，體驗時間的長短，對記憶或感受都沒那么大影響，會被選擇性忽略。
概念講完，下面筆者結合去飯店買飯的故事，使用“峰終定律”進行圖文分析，為什么一家飯店給我的體驗非常糟糕，而另一家飯店我愿意推薦我的同事也去嘗試。
之前有一段時間飯店聯合天地壹號搞活動，買飯送一瓶鐵罐裝的天地壹號。某天中午下班提前5分鐘到了飯店，我特意說明了要醬汁，老板的“嗯嗯哦哦”充滿了敷衍。
我看著店里配餐員配餐、出餐，然后我問這份是不是我的，店里服務員支支吾吾，也沒有看著我，然后那份飯被拿去跟天地壹號的工作人員合影，一張不滿意又拍一張，一個角度拍完又換一個角度。最后，飯店的服務員才把那份飯給我，當時我心里憋了一股氣，就差破口大罵：我中午吃飯+午睡時間就一個小時，為了能睡好點還要吃得快點。
這家店給我的體驗就是，不把用戶當用戶，心里非常不是滋味。
而當我向同事說起這家店時，我會推薦手撕雞飯，這是我在廣州吃過的最好吃的手撕雞飯， 沒有之一。同時，我還會說上面的故事給同事，最后評價道：可以試試的，另外，出餐質量有問題他們也會給你換一份的。
當我說完這次的經歷給同事聽，同事并沒有表示會去嘗試一次，因為我說的故事，又因為價格也不便宜。所以說，店鋪（或者說品牌）是在食物（或者說餐品）之前被消費的，這是給用戶留下第一印象的關鍵，第一印象不好，即便是廣州第一手撕雞，也不會去嘗試。
那么使用“峰終定律”去分析這次糟糕的就餐體驗就是：
峰值有兩個，正峰值是廣州第一手撕雞的“口味”，負峰值是“員工服務”。負峰值的出現，說明了店家在活動開始前并沒有設計好活動流程，服務員也就沒有足夠的授權去處理和應對。
終值是“離店”時的不爽，店家并沒有作出任何的正面回應，沒有表達歉意，沒有意識到這樣做會給顧客造成怎樣的影響。
“員工服務”是直接突破了我的忍耐底線，“離店”時店家的不作為再次挑戰了我的忍耐底線。短時間內兩次挑戰我的忍耐底線，店家不但“失去”了我，我的幾個同事也不會是潛在客戶了。
忍耐底線不是卡尼曼教授的理論，是我結合了梁寧老師講過的內容，然后加到了這張“用戶體驗模型”圖上。
梁寧老師講的是：“PC時代用戶等待一個頁面打開的忍耐底線平均數是7秒，等了7秒還沒打開，基本上99%的用戶就會離開。所以，對成本的控制是本分，但是不能挑戰用戶的忍耐底線?！?
某天中午我發現寫字樓下新開了一家飯店，我到店里問老板，有什么賣的好的推薦一下，老板面帶笑容用“廣普”跟我一一介紹：哪個菜用什么材料做，哪個湯用什么材料燉，吃不了辣可以吃……在老板眾多推薦中選了一份，第一次嘗試這家店，總體感覺不錯。后面選擇了老板推薦的肉餅飯，發現真合我胃口。
上兩周有兩天中午休息時都到店里想點肉餅飯，但是連續兩天都在我來之前賣完了，之后老板說可以掃門口的小程序預約下單，第二天上班我早早的就預約了肉餅飯，到店之后老板已經打包好了，我把訂單信息給老板看，老板說了一句我聽到就覺得好笑，并且每當給人推薦這家店時就說的一句話：“這是我們專門給您留的肉餅飯?！?
當我笑著回應謝謝的時候我也在想，這飯是我在小程序上面早早預定的，老板還說是專門我留的；因為我先付錢了，所以老板不賣給別人了。
我又想到，這家店的老板是愿意站在顧客的角度來提供對應的服務的，并且我也確實感受到了老板的真誠、熱情。
于是我把這家店介紹給了幾個同事，他們都表示下次沒有自己帶午餐的時候會試一下，并且有兩個同事聽了我的推薦后去下單了，其中有一位同事表示會回購。
這家店給我的體驗就是，不把用戶當流量，心里有用戶，產品可以，用戶自然會安利給身邊人嘗試一下。
使用“峰終定律”去分析這次就餐體驗就是：
有兩個正峰值，第一個正峰值是讓我感受到店家心里有顧客的“員工服務”。第二個正峰值是“口味”，這里甚至有一點點主觀上的小驚喜：當時抱著不知道會不會踩雷，試試新店的心態，當我試到肉餅飯時，小驚喜就來了——比我以往在外面吃到的肉餅飯都好吃。
小結：
當我跟同事同事說起第一家飯店體驗不好的時候，并不是說他的“港式氛圍”裝修不好，不是說出餐有問題不給換新的，手撕雞也是廣州最好吃的，而是說，這家店給我的感覺是他并不像跟用戶建立長期關系，只做一桿子買賣。于是他們并不注重維護客情關系，當他們把合過影的手撕雞飯遞給我時，連安撫情緒的話都沒有，就餐體驗自然就糟糕透了。
那么如果我是這家燒臘飯店的主理人，那我會如何設計本次活動？
我們先看看餐飲行業的巨頭都是怎么做的，因服務被大家口口相傳的海底撈就是非常值的學習的對象。
通過模型，我有以下幾點感悟：
服務觸點：用戶為了完成目標，需要做一系列連續的行為，而這一連串行為中會涉及到一個一個的用戶與產品完成交互的觸點，這就是服務觸。比如上圖所示的，海底撈出于提高轉化率、降低顧客等待叫號時的無聊感等原因，在顧客排隊時可以體驗免費的美甲服務、免費擦鞋服務等。
帶著學習完海底撈得出的感悟，下面我來嘗試思考一下，我現在是這家燒臘飯店的主理人，那我會這樣設計本次活動：
首先需要了解我們的顧客：
1、顧客畫像
附近街坊、附近上班族，方便快捷解決午/晚餐。
2、顧客預期
選擇符合自己口味的菜品，店內就餐/打包回公司吃；店家穩定出餐（口味穩定、不要有異物等）；不希望排長龍。
3、服務觸點
點餐時、支付時、等待出餐時（排隊）、（打包完）出餐時、離店時。
其次，才到本次活動的設計：
1、背景
贊助商天地壹號需要做品牌推廣，找到我們合作，方案就是消費即送天地壹號一瓶。
2、目的
幫助合作伙伴宣傳的同時，吸引新的顧客，回饋老顧客，提升營業額。
3、具體方案
3.1、制作印有“12.1~12.3日，消費即送天地壹號一瓶，送完即止”的宣傳海報，并且放置在店鋪門口。
3.2、完善服務流程。（請看下圖）
3.3、設置幾種異常情況的應對方案。（請看下圖）
完善好服務流程，提前設置好幾個異常情況的應對方案，相比于海底撈一連串的各種免費服務，其實花不了多少實際的金錢成本。但是卻能用最少的資源，最大程度的避免“負峰值”的出現。
另外，天地壹號的工作人員提出合影，飯店應該用自己的員工餐，而不是用顧客的。這其實不是異常情況的應對方案，而是作為服務行業從業人員該有的覺悟。
本文到此結束，朋友們如果設計/體驗了好的“峰終體驗”的案例，麻煩在評論區告知我一聲，讓我也去體驗一把~
作者：我是Berwin
來源：人人都是產品經理
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
時間對于我們每個人來說都極為重要和珍貴。隨著生活節奏的加速，很多產品也都開始注重和考慮對于用戶時間的節省和分配。本文重點分享三種在交互設計中幫助用戶「同時做幾件事」的設計方法，以及其對應的優秀案例：
希望會為你帶來更多的設計靈感。
通過將屏幕的布局進行分割處理，可同時呈現多項內容，讓用戶自由選擇任務主次，同時處理多項任務。分屏設計很常見，但其中的體驗細節卻依舊值得研究和優化。
案例1
微信在 Pad 端的分屏布局考慮得很周到，看微信視頻時支持分屏功能，還能夠調整屏幕分割的尺寸比例。最小的分屏尺寸做成了手機尺寸，體驗順暢，看視頻、接微信兩不誤：
案例 2
bilibili 在移動端的視頻通過小窗模式可以不間斷播放，不僅可以在 App 內或外呈現小窗模式，正在播的視頻，在被臨時打斷退出視頻后，還可以用音頻的方式繼續播放：
案例 3
微信的新功能，在你閱讀文章時依舊能看到朋友發來的微信消息，可以直接在當前頁面回復消息，避免你在看文章時閱讀不了微信消息。你還可以將信息“標記未讀”，一會兒再做處理：
案例4
微信視頻號改版后，點擊視頻號下方的博主名稱和頭像，下方彈窗會彈出該博主的主頁和其他視頻，而當前正在播放的視頻會漸漸呈現小屏播放，視頻內容不會被遮擋，既不影響觀看，也不影響用戶探索該博主的其他視頻內容：
案例 5
在微信訂閱號中展示的視頻內容可以通過劃到右下角變成小窗播放音頻，既可以聽內容，也不影響你繼續瀏覽訂閱號的其他內容：
產品可以讓操作更容易被用戶管理和掌控，在被打斷后很容易被用戶重新再續，給用戶足夠的掌控感。在一些特殊情況下，幾件事可以交替、穿插地處理，同時進行。
案例 1
釘釘的移動端浮窗功能，向右滑動退出正在操作的頁面時，就會出現添加浮窗區域，用于收錄未做完的操作。同時顯示出已添加浮窗的內容數量，最多添加 5 個：
案例2
微信的浮窗功能也可以幫助用戶更快捷地收錄未及時閱讀的內容，在打開時還可以定位到上次中斷閱讀的位置。用戶不再需要整塊的大量的時間來閱讀長篇文章，可以更合理地掌控閱讀節奏：
案例3
微信讀書 App 會在你跳讀到其他章節時，在頁面下方顯示“返回原進度”的按鈕，方便你在跳讀后回來繼續閱讀：
案例4
網易163 郵箱側重于為你呈現工作的多線程。每點開一封郵件，頁面上方會增加一個類似瀏覽器標簽頁的 Tab，你可以通過它們查看自己的工作和閱讀軌跡。當你在寫郵件時，同時又收到了其他的新郵件，去查看新郵件之后，可以通過 Tab 直接回到郵件編輯頁面，繼續編寫剛才的郵件：
案例5
使用釘釘發起會議邀請，如果中途退出，系統幫助你自動保存。再發起會議邀請時也會給出上次操作的提示，幫你續寫內容：
用戶可以選擇忽略或隱藏并不重要的、正在進程中的任務，將更多的時間用在其他事情而非無法控制的等待上。
案例1
iOS 系統中，當你在不同 App 之間傳遞文件時，如果文件過大，彈窗的“取消”按鈕會在幾秒鐘之后變成“隱藏”，用戶點擊后可以繼續做其他操作，并不妨礙后臺的文件傳輸。
案例2
微信在接收超大文件時，增加了“發送給朋友”的選項，你不必等待文件在自己這邊下載完成后再發送，可以直接發送源文件給對方，同時下載：
案例3
微信撥打語音的界面，在等待好友接聽的過程中，你可以看到對方朋友圈的動態，緩解無聊的等待，也為即將進行的語音聊天提供了話題：
作者：元堯
來源：人人都是產品經理
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
作者：YoueSir 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
作者：秦冬冬 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
作者：山上一只貓 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn
