弹窗在设计中运用的非常广泛，基本上每个应用都会涉及到。恰好这段时间我也在整理公司设计组件这一块，所以就想总结分享一下
设计师都会使用弹窗，但对于弹窗背后的分类及运用可能还不是特别了解，在写这篇文章之前，我查看了很多应用及资料，所以下面会有大量的案例，相信大家看完可以对弹窗的认识更明确，做设计规范的时候也能有自己的想法。
现在的弹窗分为两种，一种是模态弹窗（重提示），一种是非模态弹窗（轻提示）。
常见的模态弹窗：Dialog/Alert、Actionbar、Popover/Popup
常见的非模态弹窗：Toast/Hud、Tips、Snackbar、
Dialog/Alert 对话框
对话框是我们常用的弹窗，安卓开发语言是Dialog，iOS开发语言Alert，它通常出现在页面的中间，对话框/警示框的类别非常多，对用户的干扰比较大。前面之所以说模态弹窗是一种重提示，是因为它需要用户主动触发选择才可以继续当前的操作。
① 信息-选择确定
特点：这类弹窗通常是一些系统功能的授权、版本更新、消息通知、重要提示等，通常只有1～3个主按钮，只需要用户进行简单的选择。
下图举例分析：
iOS询问是否删除APP，就属于重要提示弹窗，它一般会用在像删除、确认提交...一些比较重要的功能操作中。
小红书的这个是否允许使用网络弹窗，大家一定在许多APP中都见过，这属于一个系统自带的授权弹窗。
马蜂窝与天猫的消息提醒弹窗，一个属于初次使用APP时，系统自带的弹窗，一个属于使用后期APP为了推送消息，主动提示你开启消息通知。
有钱花和爱奇艺的版本升级弹窗，都属于偏运营类的弹窗，这一类的弹窗通常会弱化暂不升级的按钮，突出升级主按钮。
② 信息-输入勾选
特点：这类弹窗通常是输入一些比较少的信息或者勾选信息，常用于备注输入、规格选择、分组选择等，通常只有确定和取消两个按钮。
下图举例分析：
微博对于已关注人的分组及备注，都属于信息输入及勾选类弹窗，操作通常都比较简单。
③ 信息-传达展示
特点：这类弹窗通常是一些广告、红包优惠、节日活动等一些运营类弹窗，主要是吸引用户点击及参加活动，这类运营弹窗通常会设计的比较吸引人，造型各异，会突出领取、查看等大按钮，弱化关闭按钮。
下图举例分析：
拼多多和饿了么这类的红包优惠弹窗，就不多说了，大家都懂，它们最主要的目的就是吸引用户点击，提升购买率。
美团的变黄送好礼弹窗，属于一次比较大的品牌升级，它主要目的是让用户更好的了解并接受品牌色升级。整体的元素及动效设计都非常清晰，视觉感很强。
支付宝的这个猜世界杯赢蚂蚁积分的弹窗，属于活动弹窗，它的整体设计非常贴合主题。
Actionbar操作栏
Actionbar主要分为Action Views和Action Sheets。它们通常是由底部弹出，它的操作及信息会比对话框类型的弹窗更多更复杂。这种当前页面的下拉弹窗好处就是，可以让用户清楚的感知当前的操作，比跳转到新页面更加有安全感。还有一个特殊的抽屉式弹窗也顺便说一下。
① Action Views操作视图
特点：这类视图弹窗通常占屏比较多，以文字、图标等形式展示各种功能，也可以说这类的弹窗是一个小型的页面。它一般从底部弹出，不太强调归属，大多出现在购买、支付、分享等场景。
下图举例分析：
百度网盘的这个+号扩展弹窗比较特殊，它也可以说是浮层，占满整个屏幕，它最吸引人的还是它的小动效。
京东购买时的弹窗和支付宝付款时的弹窗，都是比较典型的，在各种电商产品及付款页面用的非常多。
转转这个的键盘与输入为一体的弹窗，设计的非常人性化，让用户一次就可以输入多个价格。大大提高了用户的操作效率。
网易云音乐的分享弹窗就是典型的以文字与图标来展示功能的。
微信读书的底部阅读设置弹窗，比较特殊，为了使用户沉浸阅读，它是比较隐藏的，而且非常轻量化。
② Action Sheets 操作列表
特点：操作列表相对于操作视图，它更单一。主要是以文字展示功能按钮，重要敏感的功能操作一般会用主题颜色或红色显示，主要运用在一些日常控件、功能选择、删除、保存等场景。
下图举例分析：
Keep的选择日期，属于iOS原生控件，非常常见。
淘宝的选择地址弹窗，整个展示的非常清晰全面，而且用户每选择一项，就会有相应的显示。
支付宝和天猫超市的两种列表弹窗，就不多说了，简单的功能选择都会采用这种。
③ 抽屉式弹窗
特点：这种抽屉式弹窗一般从左右两边弹出，经常运用在一些导航扩展和目录展示中，它能承载比较多的信息，基本上都是用来放一些不太常用的功能。
下图举例分析：
微信读书及一些其他阅读类产品，由于目录很长，而且一般是从上到下浏览的，所以基本都采用了这种抽屉式弹窗。
小红书的这个抽屉式弹窗，以图标和文字的形式展示了一些不是很常用的功能，为我的页面节约了不少空间。
Popover/Popup 浮层
Popover是ios的开发语言，popup是安卓的开发语言，浮层是指，用户点击某个功能后浮出一个临时气泡对其作出补充，它通常会伴随着半透明的遮罩或者投影衬底，用户需要点击功能区域操作，或者点击空白处取消，才能进入下一步操作。它与上面操作栏的最大区别就在于，它更强调归属，可以出现在页面的任何地方，而操作栏一般只出现在底部，不强调归属。
① 指向浮层
特点：这类的浮层一般伴随有小三角指向，强调归属。气泡里面的功能通常以单一的文字或文字与图标结合的形式来展示，主要运用在顶部加号补充、复制、分享转发等场景。
下图举例分析：
支付宝和美团的顶部加号补充浮层，展示形式是差不多的，只是UI样式不一样，一个是白色气泡黑色半透明遮罩，一个是深灰色气泡。
微信读书和微信的选择文字气泡，在文字复制中很常见，通常会与其他转发收藏小功能一起出现。
② 导航筛选浮层
特点：所谓导航筛选，自然是与导航分不开的，再加上浮层是比较强调归属的，所以它通常会与导航连在一起，一般出现在顶部。
下图举例分析：
美团的导航筛选，因为选项及开关很多，所以它的底部会有两个主按钮，一个完成，一个重置。
饿了么的这个只有一个功能选项，所以它一般是直接选择就收起浮层了。
③ 引导浮层
特点：引导浮层的作用就是引导用户更好的使用产品及交互，降低用户的学习成本。它通常会出现在用户首次进入APP的时候，一般只会出现一次，点击空白位置或我知道了浮层就会消失。
下图举例分析：
QQ音乐与微医的引导浮层都是用户首次进入应用时，给出的功能搬家提醒浮层。
Toast/Hud 提示框
Hud是ios的控件名词，Toast是安卓的控件名词，它们都属于一种轻提示，给予用户及时反馈，让用户知道自己当前所处的状态。
Hud一般只出现在屏幕的中央，以毛玻璃的样式表现，内容展示比较富丰富。
Toast可以出现在屏幕任意位置，通常以黑色半透明的小框来表现，内容一般是纯文字提示或者文字与图标结合提示。
① 状态提示
特点：状态提示的Toast，它们一般都是反馈用户当前操作的状态，只出现1到2秒就会自动消失，场景一般是关注成功、密码错误、音量提示、静音、清除缓存等。
下图举例分析：
移动的属于操作遇阻提示。
京东的属于操作成功反馈。
iOS的音量控制属于毛玻璃Hud。
微信的清除缓存属于正在操作状态。
② 按键提示
特点：按键Toast提示与状态提示不同，它们一般自动出现或者点击触发才会出现，用于对功能点的补充说明，让用户对功能有更深的了解。
下图举例分析：
蚂蚁森林里点击树木就会出现相关信息，当然它也会自动出现，点击其他区域也会自动消失。
知乎的消息标签不仅有小红点提示，还会在上方自动出现数字提示。
Snackbar
Snackbar是Android中的一个控件。它一般会在超时自动关闭或者在屏幕上滑动关闭，它没有Toast那么轻量，设置出现的时间会比Toast长，而且可以点击按钮进行交互。
下图举例分析：
UC浏览器的Snackbar，是在提示用户上滑，来查看更多内容，它需要滑动或者超时才能关闭。
京东的Snackbar，是在为用户推荐商品，提示用户点击箭头来查看喜欢的商品，它比UC浏览器多了一个关闭的按钮。
Tips提示
Tips与Snackbar最主要的区别就是：Tips它是内嵌在页面上的，而Snackbar则是浮在页面上的。Tips一般要让用户主动触发关闭按钮或点击进入下级页面才会消失，一般用于需要用户感知到的通知信息，或者植入广告。
下图举例分析：
百度网盘在下载视频时，就会出现一个Tips的提示，让用户观看广告来得到加速下载。这种提示虽说是广告，但它抓住了用户的场景及心理，观看广告的几率大大提升。
爱奇艺的Tips提示就属于重要通知提示了，提示用户VIP即将到期，续费可优惠，它们都有一个主按钮及关闭按钮，需要用户主动触发提示才会消失。
规范总结
目前的弹窗样式非常多，你能想到的，你想不到的基本都可以技术实现。但这同时也带来一个问题，那就是“不规范”。以上提到的弹窗种类，你只需要选择符合你产品要求的几个类型，最好不要在一个产品中运用多个同种类型的弹窗，否则后期会很难规范及组件化，当然运营广告类弹窗可以另当别论。
转自：站酷
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
一、搭建cli
1.事先安装好cnpm(淘宝镜像)
npm install -g cnpm --registry=https://registry.npm.taobao.org
1
2.cnpm install -g vue-cli
全局安装vue脚手架工具。（下载一次就好）
3.vue init webpack your_project_name
创建一个脚手架项目（每次创建需要）
eg:这时在命令行中有需要你填的信息{
你的项目名；
你的项目描述；
还有你想是否下载的插件（y/n）；
}
4.使用 npm run dev来运行项目
就这样，一个简单的vue开发项目模板就这样下载完成了。
eg：
i 是install 的简写。
全局安装依赖：
cnpm i 依赖名
1
局部安装依赖：
cnpm i -D 依赖名
1
二、vue-router
一般事先安装模板时，已经安装上了。
可以查看package.json中。
如果没有安装
cnpm i -D vue-router
1
安装好之后，在src目录中会生成一个router目录，里面放着index.js，
一般有两种配置
第一种：
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
export default new Router({
routes: [
// 一进入就显示页面
{
path: '/',
redirect: '/index'
},
{
path: '/',
component: pather => require(['../components/common/bodys.vue'], pather),
meta: { title: '主体' },
children:[
{
path: '/index',
component: pather => require(['../components/page/index.vue'], pather),
meta: { title: '系统首页' }
},
{
path: '/biaoge',
component: pather => require(['../components/page/biaoge.vue'], pather),
meta: { title: '基础表格' }
},
{
path: '/Tab',
component: pather => require(['../components/page/Tab.vue'], pather),
meta: { title: 'tab选项卡' }
},
{
path: '/jibenbiaodan',
component: pather => require(['../components/page/jibenbiaodan.vue'], pather),
meta: { title: '基本表单' }
},
{
path: '/fuwenben',
component: pather => require(['../components/page/fuwenben.vue'], pather),
meta: { title: '富文本编辑器' }
},
{
path: '/bianjiqi',
component: pather => require(['../components/page/bianjiqi.vue'], pather),
meta: { title: 'markdown编辑器' }
},
{
path: '/shangchuan',
component: pather => require(['../components/page/shangchuan.vue'], pather),
meta: { title: '文件上传' }
},
{
path: '/scharts',
component: pather => require(['../components/page/scharts.vue'], pather),
meta: { title: 'schart图表' }
},
{
path: '/tuozhuai',
component: pather => require(['../components/page/tuozhuai.vue'], pather),
meta: { title: '拖拽列表' }
},
{
path: '/quanxianceshi',
component: pather => require(['../components/page/quanxianceshi.vue'], pather),
meta: { title: '权限测试', permission: true }
}
]
},
{
path: '/login',
component: pather => require(['../components/page/login.vue'], pather)
},
{
path: '/cuowu404',
component: pather => require(['../components/page/cuowu404.vue'], pather)
},
{
path: '/cuowu403',
component: pather => require(['../components/page/cuowu403.vue'], pather)
},
{
path: '*',
redirect: '/404'
}
],
// 去掉#号
mode:"history"
})
第二种：
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
三、axios
先安装
cnpm i -D axios
1
然后在main.js写入
import axios from 'axios'
Vue.prototype.$axios = axios
1
2
3
这样就可以在组件中使用axios 获取数据了
loadData(){
this.$axios.get(['https://free-api.heweather.com/v5/weather?city=qingdao&key=1b47b16e4aa545eaa55a66f859ac0089'])
.then((response) => {
// success
console.log(response.data);
})
.catch((error) => {
//error
console.log(error);
})
},
四、vuex
1、安装
cnpm i -D vuex
1
2、然后需要手动创建一个文件夹store在src目录当中，
接着在store文件夹中创建store.js
例：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
increment: state => state.count++,
decrement: state => state.count--,
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
3、然后在main.js引入注册
import Vuex from 'vuex'
import store from './store/store'
Vue.use(Vuex)
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
比如在headers.vue使用vuex
<template>
<div class="headers">
<p>{{count}}</p>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
name: 'headers',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
methods: {
increment(){
this.$store.commit('increment')
},
decrement(){
this.$store.commit('decrement')
}
},
computed:{
count(){
return this.$store.state.count
},
}
}
</script>
<style scoped lang="scss" >
</style>
五、sass
1、需要安装sass
(1)安装node-sass
(2)安装sass-loader
(3)安装style-loader 有些人安装的是 vue-style-loader 其实是一样的！
cnpm install node-sass --save-dev
cnpm install sass-loader --save-dev
cnpm install style-loader --save-dev
1
2
3
2、接着需要更改build文件夹下面的webpack.base.config.js
'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
function resolve (dir) {
return path.join(dirname, '..', dir)
}
module.exports = {
context: path.resolve(dirname, '../'),
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
module: {
rules: [
{
test: /.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},
{
test: /.(png|jpe?g|gif|svg)(\?.)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
},
{ //从这一段上面是默认的！不用改！下面是没有的需要你手动添加，相当于是编译识别sass!
test: /.scss$/,
loaders: ["style", "css", "sass"]
}
]
},
node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
}
}
3、在你需要使用sass的地方写入即可
<style lang="scss" scoped="" type="text/css">
$primary-color: #333;
body {
color: $primary-color;
}
</style>
六、vue UI库
这里已著名的Element组件库为例
https://element.eleme.cn/#/zh-CN/component/carousel
1、安装
npm i element-ui -S
1
2、使用
在main.js写入
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
1
2
3
4
3、然后在组件使用就可以了
例：轮播图
<template>
<el-carousel indicator-position="outside">
<el-carousel-item v-for="item in 4" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</template>
<style>
.el-carouselitem h3 {
color: #475669;
font-size: 18px;
opacity: 0.75;
line-height: 300px;
margin: 0;
}
.el-carouselitem:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
</style>
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
设计概要（Design briefs），也可以理解为设计简报、设计说明文档。设计概要负责说明设计的目标、设计的方向风格、不同阶段及对应的里程碑（指标）。
简而言之，设计概要是对本次设计项目的简要概括，可能是一份文档，或者一组文件内容，其中包括设计的几个关键概念如项目描述、项目范围、项目目标，目标受众、风格外观、预算时间安排。那么我们所整理的设计概要是提给谁看的呢？按照原作者观点是增进设计师和需求方的理解及信任。作者的观点是建立在服务甲方的基础上提出的，因为作者所属领域为平面设计领域，偏向创意性设计活动，因此通过建立共同目标，统一想法更容易创造出高满意度的方案。
但事实上设计概要不止于此，它不应该被局限在平面设计领域，虽然作者是以平面设计师的身份来普及这个观念（倾向提点平面广告类设计工作者，而不是UI/UX领域），但事实上其中很多角度都是从设计本质及设计工作的协作本质上提出的，它也可以被我们移植到UI/UX领域。当我读完这篇文章，我发现了设计概要一个更加重要的功能，那就是帮助UX设计团队梳理关键工作，建立共同目标，提高设计工作的效率，促进团队成员的协作与信任。（从设计团队角度）
当然如果从甲方角度考虑，设计简报依然可以用于UIUX领域，比如向leader提案，以及在项目初期向外包方展示设计说明，增进沟通交流，以保证设计师对需求的理解，同时更展示了设计人员的专业性。
总之设计概要适合在设计流程的前期被组织，并分享至团队和需求方，增进团队的凝聚力，促进创意的发生，展示团队专业性及增加需求方与设计人员的理解与信任。设计概要与最终提案实际上是一次完整的设计活动的首与尾，两者应当相互对应，设计结果应当围绕最初定义的目标进行，设计概要更像是设计思维的理解和定义阶段，把我们面临的问题，假设的目标呈现出来，以便在接下来的设计过程中精准打击，去解决设计概要中提到的问题或者目标。
下面开始正文。这里是帅气的分割线
在过去18年的广告设计工作中，我逐渐意识到这个行业里最好的事情就是与你合作的人——作家，艺术总监，用户体验和用户界面设计师，拥有出色的有创意的大脑，卓越的才能，不同的心态。
当他们有清晰的指导和足够的自由与时间时，他们往往能迸发出好的想法，提出创意性的解决方案。但只要是缺乏指导，各种相互矛盾的指示，混乱的目标及紧迫的时间，将导致设计师无法产出优秀的方案。
我多年来一直在观察这个现象，但我不知道该如何解决。一开始，我很难将客户需求好创意输出完美的结合，随着时间流逝，我逐渐明白，这一切都因为我们没有一个清晰地设计概要。从客户的需求文档开始，我们从中收集信息建立我们的总的设计概要，然后以此总概要来进一步细分为具体的概要，如视觉设计概要、体验设计概要、布局排版设计概要等。
没有任何东西可以取代一份准确详细的设计概要。没有任何电子邮件或者个人会议可以取代创意概要。如果缺少基本信息，你无法开始任何工作，无法估算资源，无法保证最后期限。
如果认真对待，设计概要就是任何创造性工作的关键。主要问题是客户和设计师在某些情况下都被低估了。设计行业变得如此庞大且不断扩张，任何人都可以称自己为设计师，任何人都可以收取任何费用。因此，需要特定流程的真正的设计被置于次要地位，完全以价格来评判。虽然我支持竞争并且完全理解并非每个公司或个人都能获得同样的预算，但它仍然对整个行业不利。
设计概要是一个很关键的部分，应当在正式设计开始前就组织好，但在一般设计流程中，它经常会缺失，通常我们认为我们一切都准备好了，认为我们的方案没有问题可以直接开始设计了，但事实往往相反。
什么是概要（brief）？
“概要”一词来源于军事术语，在军事术语中，简报被定义为“事先给出具体指示或信息的行为”。“它有一个具体的结构，简短扼要，包括所有必要的资信息，但不多，并包括一项既定的任务和要完成的结果，但有足够的自由来适应局势(任务摘要)。
当指示部队接管敌方阵地时，将军可能会给出如何执行以及考虑哪些因素的指示，但不会说把右脚放在左脚前面，重复这个动作100米（前进一百米），然后右转，等等。军事简报只给出一项任务，留给个人决定的空间。同样，creative briefing也不是一个描述创意过程的详细用户手册。它也不是对预期结果的描述。创意概要是一个框架，它可以通过提供足够的指导来推动创意过程，使创意保持在正确的轨道上，并为创意提供足够的自由。（译者注：核心是指导列表，且保证足够的自由，只提供框架，不干扰创意执行）
为什么我们在创作过程中需要概要？
如果我们有一个需要别人解决的问题，我们需要创意简报和创意简报用作说明，就是这么简单。当我们要进行创意活动时我们会写创意概要，列出关键的点，这意味着我们此时已经清楚存在的既定问题，我们列出问题然后才知道去解决什么。当然，也只有在别人要执行设计活动时，我们才需要去写一份概要，以供说明。 （简单理解，从某种角度，设计概是要写给需要执行设计的人员看的，我们需要别人去解决问题，而概要负责说明这些问题。）
什么是设计概要？
设计概要是描述设计项目的目标和里程碑的书面文档。它是设计过程中至关重要的一部分，因为它有助于在客户和设计师之间建立信任和理解。它和合同一样重要，是双方的重要参照点。它确保重要的设计问题在设计师开始工作之前就被考虑和讨论。
根据不同工作范围和不同产品领域，设计概要可以由许多元素组成，每个元素都详细描述某个范围的特定部分。
但为了保持简洁，以下五个要素不容忽视:
1.项目描述
简单描述一下我们需要做什么:我们对任务了解多少?期望是什么?一个新的设计?一个新的想法?现有的网站重新设计?我们需要用它来解决什么问题?这最多只能是一句话。
译者注：项目描述是对你所进行的项目的最简洁的概括，比如"我们在做一个共享打车的产品"。当然可以在这基础上丰富一点如：“我们在做一个服务白领人群、针对夜间打车场景的共享打车产品”，后面这个描述增加了用户和场景，但整个描述仍然是清晰易懂的。项目描述一般由战略层相关人员来定义，如公司老大，产品经理等。当然对于redesign项目，则需要设计师自己明确项目目标，然后去定义一个简洁的项目描述。
2.项目范围
根据项目的大小，这里需要提供更多的细节。什么是预期目标，有多少页多少内容量，它将具有什么功能和特性。你需要了解更多的细节来服务一个新的企业品牌项目，而不是一个简单的网站。报价将主要依据这一环节。尽可能具体是至关重要的。
此外，在互联网世界中，客户相信设计师能够解决所有问题，从UI到UX，最终开发一个完整的网站并解决SEO排名（seo即搜索引擎优化的意思），非常重要的是，尽早说明哪些内容在范围内，哪些不包括在范围内。
译者注：项目范围即范围层中的内容规格。我们在产品设计的五个层面中第二层中可以了解这部分内容，内容规格是对产品目标的拆解，细化为具体的内容和功能，例如我们设计一款打车应用，它可能会包含，顺风车（对应顺路接送服务）、普通快车（对应出租车服务）、高端用车（对应企业服务高端出行领域）这三种规格。
3.目标
通常情况下，你的客户并不知道他们的目标，也不知道设计工作会如何影响他们。但概括下来有以下三种不同类型的目标。
业务目标:客户给出的一个可衡量的目标，例如增加销售、市场份额、渗透率、减少X%的客户流失率等KPI。
营销目标:帮助客户实现商业目标中一切与营销相关的事情。帮助客户提升客户参与度的活动:意识-考虑-偏好-试用-购买-忠诚-宣传。（对标用户生命周期模型：获客、留存、激活、变现、传播 ）
沟通目标:我们需要行动的目标!预期的结果是什么，消费者的行为或预期从我们设计的产品中获得什么?它必须以具体有形的形式表达出来，例如1500人注册，5000个额外的点赞，优惠券下载，产品试用，撰写评论，应用程序的使用，潜在客户，分享。
虽然了解业务和营销目标很重要，但是让我们的客户了解UI和UX有其局限性，并且它们并不会对糟糕的商业策略产生影响，这一点非常重要。这可能很关键（撇清责任俗称帅锅哈哈）。
4. 目标受众
这个产品是给谁的?谁将使用它，在什么时候什么场景下，为什么使用?描述用户受众必须尽可能具体，因为设计师通常会考虑到角色，特别是在UX方面，产品使用流程主要由用户角色及其在客户旅程中的特定阶段决定。
6.预算和时间
有些人可能会争论是否应该在一个简短的报告中加入预算，不一定是准确的预算，但我们至少要确定一个大致范围。清晰的预算可能意味着设计师或代理机构甚至不会接受该项目，或者如果客户无法支付他们的服务费用，他们会考虑另一种成本更低的解决方案。但若没有沟通清楚，在设计进行期间更容易产生分歧和问题。
定义总的时间和预期的各时间节点则是为了避免那些清晰沟通可以避免的冲突点。时间还会影响预算;在任何紧急情况下，获得额外资源都是可能的（比如若时间紧急可会提高价格）。
根据我的经验，真正重要的问题都是双重的。
1.客户的教育程度不足以提供可以推动项目正常运行的必要信息
2.设计师在没有正确理解客户的需求的情况下就心急直接开始设计。
总结
如果您是客户，一个好的设计概要将节省您在无意义的电子邮件，电话和会议上花费的时间。它还可以帮助您获得来自不同设计师和代理商的更和可比的报价。
如果你是一名设计师，如果你坚持从一个设计概要文件开始你的设计工作，你会从客户那里获得简洁的愿景和期望，这可以让你保持动力。你的时间和努力是昂贵的，从潜在客户那里获取的某种信息可能毫无意义。明智的做法是优先考虑那些已经有一些远见、愿意承担自己那部分工作的客户。（即优先考虑那些清晰的分析了产品的各类目标、预算等关键内容规格的客户）
一个好的简介应该是简洁、清晰和全面的。如果目标足够清晰，应当不超过两页。
为了使最终的结果尽可能的好，我们需要鼓励和教育客户和设计师去做更好的设计概要（说明文件），让我们的工作更容易，并把重点放在更重要的事情上。
文章来源：UI中国
在java的学习中，当接触到类这一章的时候，就会避免不了的接触到this关键字。
首先，this关键字指向的是当前对象的引用
作用：
this.属性名称
指的是访问类中的成员变量，用来区分成员变量和局部变量（重名问题）
class Test_08{
public static void main(String [] args){
//调用无参构造函数，
Person p1 = new Person();
p1.setAge(20);
p1.setName("张三");
p1.setGender("男");
System.out.println(""+p1.getName()+" 今年"+p1.getAge()+"岁 性别为："+p1.getGender());
}
}
class Person{
private String name;
private int age;
private String gender;
Person(){}
Person(String name,int age,String gender){
this.name = name;
this.age = age;
this.gender = gender;
}
public void setName(String name){
name = name;
}
public String getName(){
return name;
}
public void setAge(int age){
age = age;
}
public int getAge(){
return age;
}
public void setGender(String gender){
gender = gender;
}
public String getGender(){
return gender;
}
}
对Test_08运行后发现，调用的set方法并没有对 对象中的变量进行赋值，是因为，传入的参数变量名与类中属性变量名重复，因此我们在set方法和有参构造方法中加上了this.类属性名称，这样就可以完成对 对象变量的赋值。如下图：
this.方法名称
用来访问本类的成员方法
this();
访问本类的构造方法
()中可以有参数的 如果有参数 就是调用指定的有参构造
注意事项:
1.this() 不能使用在普通方法中 只能写在构造方法中
2.必须是构造方法中的第一条语句
例如，当我们把this()放在有参构造函数的末尾时，例如用this("哈哈");我们先不管语法是否有错误，试着按照程序的运行来判断一下结果，我们可以看出，当在创建对象时，假定调用含有this（“哈哈”）的构造函数，则刚开始存放的值，会被this（“哈哈”）调用的只含有一个参数的构造函数覆盖，也就是说，最后的name会变成“哈哈”，这是与我们的初衷相违背的，而且运行结果也是报错，
当我们换到构造方法的第一句时，则不会有这种错误，因为它并不会影响到后面name的赋值。
我们接下来把this语句放在构造函数的第一句位置，
就不会有报错
————————————————
版权声明：本文为CSDN博主「BetterShon」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42386014/article/details/81138684
实现导航的左右滑动类似于腾讯新闻，网易等导航，一下贴上代码：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,p,th,td,table,textarea,select{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
th,em{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
img,a img{border:0;}
body{font:12px 'Microsoft YaHei',Arial;color:#666;background-color:#eee;}
.nav{width:100%;overflow:hidden;margin:0 auto;height:35px;position:relative; line-height:35px;background-color:#000;}
.nav ul{position:absolute;left:0;top:0;width:640px;z-index:1;}
.nav ul li{width:80px; float:left; overflow:hidden;}
.nav a{color:#fff;width:100%; display:block; text-decoration:none; text-align:center;}
</style>
<body>
<div class="nav" id="nav">
<ul>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单3</a></li>
<li><a href="#">菜单4</a></li>
<li><a href="#">菜单5</a></li>
<li><a href="#">菜单6</a></li>
<li><a href="#">菜单7</a></li>
<li><a href="#">菜单8</a></li>
<li><a href="#">菜单9</a></li>
<li><a href="#">菜单10</a></li>
</ul>
</div>
<script>
window.Swipe = function(b, a) {
if (!b) {
return null
}
this.options = a || {};
this.index = this.options.startSlide || 0;//开始的导航页的第几屏
this.speed = this.options.speed || 300;//速度
this.lwidth = this.options.width || 80;//导航li宽度
this.delay = this.options.auto || 0;//自动滚动菜单速度0为不自动滚动
this.container = b;//在那个容器内
this.element = this.container.children[0];//
this.setup();
if (this.delay != 0) {
this.begin();
}
if (this.element.addEventListener) {
this.element.addEventListener("touchstart", this, false);
this.element.addEventListener("touchmove", this, false);
this.element.addEventListener("touchend", this, false);
this.element.addEventListener("touchcancel", this, false);
this.element.addEventListener("webkitTransitionEnd", this, false);
this.element.addEventListener("msTransitionEnd", this, false);
this.element.addEventListener("oTransitionEnd", this, false);
this.element.addEventListener("transitionend", this, false);//监听过度动画是否结束
window.addEventListener("resize", this, false)
}
};
Swipe.prototype = {
//设置其基本样式
setup: function() {
this.slides = this.element.children;
this.width = Math.ceil(("getBoundingClientRect" in this.container) ? this.container.getBoundingClientRect().width: this.container.offsetWidth);
if (!this.width||this.slides.length < 1) {//没有子节点，获取不到屏幕宽度均返回
return null
}
this.element.style.width = Math.ceil(this.slides.length this.lwidth) + "px";
var a = this.slides.length;
while (a--) {
var b = this.slides[a];
b.style.width = this.lwidth + "px";
}
this.slide(this.index, 0);
},
slide: function(a, c) {
var b = this.element.style;
if (c == undefined) {
c = this.speed
}
//过度效果需要花费时间
b.webkitTransitionDuration = b.MozTransitionDuration = b.msTransitionDuration = b.OTransitionDuration = b.transitionDuration = c + "ms";
this.index = a
//console.log(a this.width,Math.ceil((this.slides.lengththis.lwidth)/this.width));
if(a this.width>(Math.ceil((this.slides.lengththis.lwidth)/this.width)-1)this.width){
// b.MozTransform = b.webkitTransform = "translate3d(" + -((Math.ceil((this.slides.lengththis.lwidth)/this.width)-1) this.width) + "px,0,0)";
// b.msTransform = b.OTransform = "translateX(" + -((Math.ceil((this.slides.lengththis.lwidth)/this.width)-1) this.width) + "px)";
return false;
}
else{
b.MozTransform = b.webkitTransform = "translate3d(" + -(a this.width) + "px,0,0)";
b.msTransform = b.OTransform = "translateX(" + -(a this.width) + "px)";
}
},
getPos: function() {
return this.index
},
//前一个，
prev: function(a) {
this.delay = a || 0;
clearTimeout(this.interval);
// console.log(this.index);
if (this.index) {
this.slide(this.index - 1, this.speed)
//console.log( this.index);
} else {
this.slide(this.length - 1, this.speed)
}
},
//后一个
next: function(a) {
this.delay = a || 0;
clearTimeout(this.interval);
if (this.index < this.length - 1) {
this.slide(this.index + 1, this.speed)
} else {
this.slide(0, this.speed)
}
},
begin: function() {
var a = this;
console.log(a);
this.interval = (this.delay) ? setTimeout(function() {
a.next(a.delay)
},
this.delay) : 0
},
stop: function() {
this.delay = 0;
clearTimeout(this.interval)
},
resume: function() {
this.delay = this.options.auto || 0;
this.begin()
},
handleEvent: function(a) {
switch (a.type) {
case "touchstart":
this.onTouchStart(a);
break;
case "touchmove":
this.onTouchMove(a);
break;
case "touchcancel":
case "touchend":
this.onTouchEnd(a);
break;
case "webkitTransitionEnd":
case "msTransitionEnd":
case "oTransitionEnd":
case "transitionend":
this.transitionEnd(a);
break;
case "resize":
this.setup();
break
}
},
transitionEnd: function(a) {
if (this.delay) {
this.begin()
}
},
onTouchStart: function(a) {
this.start = {
pageX: a.touches[0].pageX,
pageY: a.touches[0].pageY,
time: Number(new Date())
};
// console.log(this.start)
this.isScrolling = undefined;
this.deltaX = 0;
this.element.style.MozTransitionDuration = this.element.style.webkitTransitionDuration = 0;
a.stopPropagation()
},
onTouchMove: function(a) {
if (a.touches.length > 1 || a.scale && a.scale !== 1) {
return
}
this.deltaX = a.touches[0].pageX - this.start.pageX;
if (typeof this.isScrolling == "undefined") {
//判断是横向还是树向滑动
this.isScrolling = !!(this.isScrolling || Math.abs(this.deltaX) < Math.abs(a.touches[0].pageY - this.start.pageY))
}
if (!this.isScrolling) {
a.preventDefault();
clearTimeout(this.interval);
this.deltaX = this.deltaX / ((!this.index && this.deltaX > 0 || this.index == this.length - 1 && this.deltaX < 0) ? (Math.abs(this.deltaX) / this.width + 1) : 1);
this.element.style.MozTransform = this.element.style.webkitTransform = "translate3d(" + (this.deltaX - this.index * this.width) + "px,0,0)";
a.stopPropagation()
}
},
onTouchEnd: function(c) {
var b = Number(new Date()) - this.start.time < 250 && Math.abs(this.deltaX) > 20 || Math.abs(this.deltaX) > this.width / 2,
a = !this.index && this.deltaX > 0 || this.index == this.length - 1 && this.deltaX < 0;
if (!this.isScrolling) {
this.slide(this.index + (b && !a ? (this.deltaX < 0 ? 1: -1) : 0), this.speed)
}
c.stopPropagation()
}
};
//开始调用插件
var slider=new Swipe(document.getElementById('nav'),{speed:500,auto:0,width:100,col:4,});
</script>
</body>
</html>
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
app.vue
<template>
<div id="app">
<transition :name="transitionName">
<keep-alive >
<router-view v-if="$route.meta.keepAlive" class="Router"></router-view>
</keep-alive>
</transition >
<transition :name="transitionName">
<router-view v-if="!$route.meta.keepAlive" class="Router"></router-view>
</transition >
<Play></Play>
</div>
</template>
<script>import Play from './components/play'
export default {
name: 'App',
data () {
return {
transitionName: 'slide-left'
}
},
watch: {
'$route' (to, from) {
// 切换动画
let isBack = this.$router.isBack // 监听路由变化时的状态为前进还是后退
if (isBack === true) {
this.transitionName = 'slide-right'
// from.meta.keepAlive = false
// to.meta.keepAlive = true
} else {
// from.meta.keepAlive = true
// to.meta.keepAlive = false
// this.transitionName = 'slide-left'
if (this.$route.path.split('/').length < 3) {
this.transitionName = 'slide-fade'
} else {
this.transitionName = 'slide-left'
}
}
this.$router.isBack = false
}
},
components: {
Play
}
}
</script>
<style>
.Router {
font-family: Roboto, Lato, sans-serif;
position: absolute;
width: 100%;
height: 100%;
padding-bottom: 60px;
transition: all .377s ease;
box-sizing: border-box;
overflow: auto;
}
.slide-left-enter,
.slide-right-leave-active {
opacity: 0;
-webkit-transform: translate(100%, 0);
transform: translate(100%, 0);
}
.slide-left-leave-active,
.slide-right-enter {
opacity: 0;
-webkit-transform: translate(-100%, 0);
transform: translate(-100% 0);
}
.ovf {
overflow: hidden;
}
.center {
width: 95%;
margin: 0 auto;
overflow-y: hidden;
}
li {
list-style: none;
}
</style>
路由配置
{
path: '/playListDetail/:id',
name: 'playListDetail',
component: pather => require(['../components/playListDetail.vue'], pather),
meta: {
title: '歌单详情',
keepAlive: true,
isBack: false
}
},
返回事件
back () {
this.$router.go(-1)
this.$router.isBack = true
}
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
在日常的设计工作中，我们也许会遇到这样的情况：作品缺少变化导致枯燥乏味；而变化太多又会显得杂乱、没有章法；这就对应了设计中统一和打破的关系，那么为什么统一和打破这两种看似矛盾的关系，却总是能同时出现在我们的设计作品中？如何更好的理解二者之间的关系并运用到日常的工作中去？希望本期内容能对大家有所帮助。
在设计中统一并不是所有元素1:1的一模一样，它可以体现在：板式、配色、元素属性、处理手法等等，那么为什么要统一？统一的目的是什么？下面我们具体来说：
统一：让作品更整体
作品不够整体，会给人一种信息散乱、没有视觉焦点的感受；而将视觉元素进行“统一”，就能很好的解决这一现象，这无关乎技法的熟练与否，在我们的日常生活中就随处可见：比如：我们的书本排版，会有统一的页眉、页脚、段落留白、文字间距等等，其目的就有让文本内容在视觉感受上更像一个整体；下面我们看个设计中的案例：
如图所示，上侧案例给人的感觉比较杂乱，不够整体，原因在于：元素与元素之间的关联性不强，且视觉形态及色彩属性各不相同，导致整体各元素之间的呼应不够明显，所以会给人一种不够整体甚至杂乱的感觉。而下侧案例通过在形态、色彩、属性等方面的统一化处理，加强了每个单独视觉元素之间的呼应，使得画面更整体！
统一：让作品更整洁
不管是在设计工作还是日常生活中，干净整洁的东西都是更易于大众接受的，在设计工作中，做好统一是最重要的一环，在此前提下，才能做好另一环“打破”！所以当设计作品出现乱的现象时，我们需要对其视觉元素进行规整及相应的处理，比如：
通过左右对比我们发现，很明显右侧给人的感觉杂乱无章，而左侧干净整洁、有条理，原因在于：
①、元素与元素之间并不是相互孤立的，而是在视觉上存在着一定的呼应关系，相互关联，这样画面整体性也会更强。
②、视觉上将原本各不相同的形态以及色彩重新进行了统一处理，目的是通过减少视觉元素形态及色彩变化而进一步提升画面的整洁。
③、视觉元素在物理关系以及属性上也做到了统一，即统一元素与元素之间的间隔、形态、颜色等等。
下面我们再看组案例：
上图中，相比而言案例二比案例一给人的感觉更整洁、干净、也更像一个整体，原因在于：案例二中配图的属性做到了视觉上的统一，具体体现在：①、图片的颜色属性：统一蓝色色相属性；②、图片的内容属性：统一高端、仰视角度建筑属性；③、图片的留白属性：每一幅配图在视觉上都会有一些留白性质的属性，给人的感觉很舒服。
所以：出于让整体更整洁的统一，大多是在做减法或者合并的过程，目的是减少一些造成视觉整体杂乱的因素，比如：色彩杂乱、图形杂乱、文字形式杂乱、视角角度杂乱、以及过多无关联的视觉元素等等，统一的过程也是整合视觉元素的过程。
注意：设计中的统一并不是绝对的，而是相对的，如果所有的视觉元素、属性都严格按照统一化去处理，那么就会滋生另一个问题：整体视觉太过平滑、缺少变化甚至会给人一种单调、枯燥的感受。那么在强调统一的同时，“打破”就是为了解决这难题的。
在日常设计工作中，打破是建立在统一基础之上的操作，那么既然已经做好了统一，为什么还要打破呢？打破能为作品带来什么？下面我们具体分析：
打破：提升作品视觉层次感
当作品过于统一时，很容易会给人一种单调、乏味、缺少层次变化的视觉感受，而在统一的基础上做一定的打破操作，就能起到很好的解决这一现象的作用，那么什么是打破？举几个简单的例子：
如上图所示，图①就属于过于统一的表现形式，很明显整体平淡、乏味，缺少视觉变化；而其他都是在统一的基础上做了一些“打破”的处理，只不过各自切入点不同，下面我们逐一分析：
图②：切入点是打破了一成不变的排列形式。
图③：切入点是打破了一成不变的配色形式。
图④：切入点是打破了完全统一的配色形式以及形态。
图⑤：切入点是打破了统一的元素属性值。
图⑥：切入点是打破了统一的元素属性。
以上这些虽然切入点都各不相同，但是目的都是通过打破过于统一的视觉现象，增加整体视觉变化程度，从而提升整体视觉层次感，也打破了呆板、乏味，增添了一些视觉上的跳跃性。
下面我们再看个设计中的例子：
如图所示，上侧案例属于很好的贯彻整体统一的理念，而下侧案例则是打破了固有的统一、却也保留了大部分统一的属性，通过两者对比我们发现，其实单只看这一组案例：两种表现形式都是可取的，只不过相比而言下侧案例给人的视觉感受变化更多、层次感更强，所以相比而言给人留下的视觉印象更深刻。
上面说两种表现形式都可取的前提是：单单只看这组案例，但是很显然这组案例只是页面的局部，如果整体页面都如上侧案例那样严格的按照统一进行，那么页面整体就会过于平淡、缺少视觉层次感、甚至主次不分明。
打破：划分视觉主次
在现实生活中，具有差异化的人或实物会很容易引起周围人的注意，甚至印象深刻、难以忘怀。在设计中亦是如此！其具体表现形式参考上图①-⑥，因为打破过于统一就是在营造具有差异化的视觉元素，从而会很容易在视觉上形成先后、主次之分，所以就起到了一定的划分视觉主次的作用。
注意：打破也不可盲目的进行，过于统一会单调、乏味、重复感强；而过于追求差异化也会出现杂乱、没有章法的视觉现象。所以一定要结合实际情况灵活运用。一幅作品中大多情况下：打破的次数要少于统一，即作品整体绝大不多保留整体统一的属性，通过局部打破处理提升整体出彩度，这样容易给人一种干净、整洁且不失视觉变化、层次感的感受！
不妨找一些优秀的网页分析一下，是否很多优秀的设计作品都符合这一规律？
综上所述，统一是为了让作品有视觉条理性、更整体，而打破则是增加视觉层次变化，让作品更出彩！统一和打破看似是两个矛盾的名词，实则在设计中是相辅相成的作用！不管是统一还是打破，两者的切入点都是相似的，一般体现在：形态、属性、色彩、大小、位置关系、留白等等。但是无论如何统一都是打破的前提，如果作品整体性都不够，再一味的追求打破关系，只会让作品越做越乱。所以一定要先做好统一，其次才是进行打破、改变。当然文中提到的只是一部分，希望大家能活学活用、举一反三！
文章来源：站酷
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
之前一直在做移动端的 UI 设计，在进入小米后，开始接触电视端的 UI 设计，目前在负责小米电视商城。经过一个电视端项目后，自己做了一些关于电视 UI 的总结以及设计方法原则。电视 UI 算得上是一个偏冷门的界面设计，因为它的交互比较特殊，同时有一些限制，比如交互限制，焦点原则等等。以下就自己的项目经验为电视 UI 设计原则做一个总结。
对于现在家庭智能电视而言，技术在不断的进步，但是其饱和度和对比度有的还是很强，还会遇到大红碰到大紫的色块对比。但是信息变得简约了，都是以 tab 导航为主，下面是几个卡片信息瀑布流显示。语音提示很重要，会随着焦点的移动发出提示声响，提示用户电视焦点的移动状态。
小米电视商城全新改版，在接到需求后，一定要模拟用户来体验一下购物流程还有用电视购物的环境，环境应该是固定的，那就是在家里。电视和手机购物体验是不一样的，电视是要用遥控器来控制，所以每一步的操作流程都很珍贵，如果界面跳转太多，会给用户一种烦躁的感觉，所以尽量同一层级的信息要在同一界面填写完毕，避免二次跳转。
第二点说的就是焦点问题，焦点不能层次不齐，跳动太大会引起视觉不适。以小米电视商城详情为例，焦点尽量在同一水平线上，同行的焦点移动，视觉感受上会舒服很多。
智能电视的分辨率和大家平常在 app 看电影的时候差不多，如上图所示，目前 1080p 最常见，2k 和 4k 基本都是资源类节目。设计尺寸以小米电视为例，通常做 1920*1080 的视觉稿就可以了，开发会适配比 1920*1080 小的电视屏幕，这样下来，如果小分辨率的电视没问题了，大的分辨率也就没问题了。
我们知道在设计 app 的时候，都有左右间距的控制，移动端一般常见的控制在 28px 或者 32px，电视端因为是大屏设计，所以预留的空间也要大一些，基本左右留出 120px，上面留出 90px 就可以了。一般我设计的时候左右是固定的 120px，上面可以随设计内容来自定义，90px 或者 100px，都是可以的，只要视觉舒服即可。
焦点在电视端 UI 设计里显得尤为重要，因为它就是你的视觉焦点，焦点会随着遥控器上下左右确认而改变。焦点的设计不能是扁平的，因为那样不能够提醒用户焦点状态的位置，焦点的设计应该是放大的、夸张的、可以带边框，也可以使用投影外发光的方式来设计，确保能够给用户足够的清晰位置。
焦点放大我这里建议放大 1.1 倍或者 1.2 倍就可以了，再大就显得过于大了。
如上图所示，我在设计焦点的时候，就用了放大+外边框的形式，这样焦点移动起来可以让用户足够看到位置所在。电视端的交互也是很简单的，基本属于十字交互，即自上而下，从左到右的交互方式。红色剪头属于禁区，所有的电视交互，没有斜 45 度的交互，这样是错误的。
大家可以看到，在 app 里，常见的弹窗和浮窗可以压盖在可点击功能上，比如美团的红包，爱奇艺的一键关注，即使是这样，也不会影响功能的正常使用。但是电视端的设计，如果两个可点击功能压盖在一起，焦点是无法获取的，因为它没法判断你想要选的那个功能，所以在电视上，一定要将两个功能分开来布局最为合适。
露出屏外的内容，和移动端设计是一样的。如果有多个卡片内容，我们需要将露出屏外的那张卡片做一些边界化处理，控制好间距，也就是说我们要将一个完整的卡片漏出来一些，让用户知道，后面还有内容；反之，用户可能不知道后面还有内容，就不会按遥控器右键查看了。
电视端 UI 设计忌讳控件隐藏，比如上图，如果有很多文字的时候，左边的设计是错误的，因为隐藏了 button 按钮。改为右边的设计是比较好的，我们可以选择焦点选中文字给一个弹窗状态或者其它，将 button 功能位露出来，如果一个界面可选功能位较少，我们设计的时候尽量在第一屏展示。如果实在不行，可以选择吸底吸边来设计。
颜色的选择运用是重中之重，因为这个会直接影响到用户的视觉体验。因为用户环境大多数是晚上的时候回去看电视，分开灯和关灯的情况，开灯的情况其实还好。如果关灯，颜色太刺眼的话，饱和度较高的颜色会直接影响到眼睛，这个危害是很大的，而且不一样颜色的色块，会增加用户的视觉负担，这样就得不偿失了。所以我们要避免大面积的使用单一纯色或者渐变色。
电视 UI 设计中，白色谨慎使用。因为白色过多实在是太刺眼了，我们可以选中较为灰一些的接近白色的颜色来代替。
背景的运用这里也建议使用深色的背景，原因和上述讲的一样，还有一个就是深色背景可以更好地衬托出界面的主要内容。反之如果用浅色的背景，有的卡片如果需求方要求设计成浅色，那么这样浅色的背景+浅色的卡片叠在一起，主要内容就特别难区分了。
我们在设计电视端 UI 的时候，要真实的先去体验一下特殊的场景，电视端每个 tab 是一个频道，每个频道的设计风格也是不同的，比如少儿频道，购物频道和电影电视剧频道，设计风格肯定不同，体验模拟流程可以让我们更快地了解电视特性。
字体的选择默认思源黑体，因为这个字体是开源字体，可以免费使用，没有版权之分，以上列入的字体是小米电视商城改版的字号，具体的字体和间距可以根据自己的设计需求变化。
关于字体的选择，当然你也可以选用其它字体，或者一些特殊字体，好看的字体，但是这样的话，字体包应该会很大，会影响一些加载速度。
字体颜色的选择尽量用白色或者亮色，深色背景上选用白色是最好的，这样更易于阅读。
字体的粗细大小，这里标题建议加粗选择，其余选择常规字体就好，避免太粗或者太细的字体。
电视的设计只是其中的一部分，未来我们的电视可能比现在的体验更加好，比如会出现实景商城，单一的图片形式已经不能满足我们对购物的需求，一些视频类，动效类的体验会更加合适。想让电视拥有好的体验并不是一件简单的事情，想必大家已经从诸多「电视盒子」上体验到了这一点。我们曾经熟悉的电视已经发生改变，而我们适应的手机、平板和电脑和新的电视还有着巨大的差别，我们需要忘掉之前熟悉的模式，未来五年、十年、甚至更久。电视、电灯、冰箱洗衣机等智能家具的体验，正是我们设计师需要在未来几年所做的事情，这很重要。
小米电视商城全新改版是我接触的第一个电视端 UI 设计项目，第一期的优化还有很多不足，根据项目经验总结了上面的规范。以上的基本设计规范掌握后，那么做电视 UI 基本问题不大，大的错误肯定不会有了，但是每个公司的设计规范肯定也有所差别。电视端的设计是个偏冷门的 UI 设计，多掌握一些另类项目经验也是设计师必备的技能。
文章来源：优设网
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
小小开关中的大学问
故事要从我搬到新出租屋开始讲起。半年前搬到新的出租屋后，房间里配置的洗衣机也比之前的大了一倍，而且操作区上分布着的密密麻麻的文字和按钮让洗衣机看起来更高级了，然而这种对它的好感并没有持续多久。在我第一次使用它时，我将衣物放进洗衣机后，选择好时间和洗涤方式，按下了启动按钮（如下图右侧白色按钮）。
按下后洗衣机发出了“滴”的一声，在我的认知里它应该是开始工作了，但是10秒过后没有任何抽水声和洗衣服的声音。我疑惑地想：“是不是刚才并没有成功启动？”，于是再次按下了启动按钮，又是“滴”的一声，但是这次我等了 1 分钟没有任何反应。之后的十分钟里，我与这台匪夷所思的机器“交涉”多次才理解了它的运行方式。这台洗衣机启动后需要等待大概十几秒才开始运行，但是在我按下启动按钮后我得不到任何反馈或者提示来告诉我洗衣机已经开始工作了，所以疑惑的我又按下了一次启动按钮，然而令人崩溃的是这台洗衣机的启动和暂停按钮是一体的，我第二次按下实际是进行了暂停操作，从而导致我第二次的困惑。
如果你是这台洗衣机的设计师，你会怎么解决上述的问题呢？
可能你的心中已经有了答案，在回答之前我们先试着探究问题的本质。
人们不管是使用日常物品还是与机器进行交互，都会面对两个阶段的问题。一个是「执行」，一个是「评估」。执行时用户需要理解如何操作，操作后可能会有什么结果。评估时用户需要知道具体发生了什么。作为设计师我们要通过合理的手段帮助用户解决这些问题，保证交互的可用性和流畅性。
通常我们会使用「意符」在用户执行前告知用户如何理解、如何操作、操作后会有什么结果。在评估前通过「反馈」告知用户结果是什么。
对于意符的定义，在《设计心理学 1-日常的设计》一书中，作者唐纳德·诺曼做出了这样的解释：
人们需要某种方式了解他们将要使用的产品或服务，某些标识表明的用途，会发生什么，有什么样的替代方案。人们寻找蛛丝马迹，寻找任何可以帮助他们应对和理解的符号。任何可能标识出有意义的信息的符号非常重要。设计师需要提供这些线索。人们所需要的和设计师必须提供的，就是意符。除此之外，优良的设计要求对产品的目的、结构和设备的操作与使用者进行良好的交代。那就是意符的作用。
简而言之，意符就是在用户使用前，机器为了让用户更好地理解和使用它而做出的提示。而反馈就更好理解了，机器在我们操作后做出的反应就是反馈，没有反应同样也是一种反馈。
下图展示了机器与用户如何进行交互。一个合理的设计可以让用户快速顺畅地进行 1234 四个步骤进而完成任务，而糟糕的设计会让用户不断重复这个流程。之所以会出现糟糕的设计，就是因为在步骤 1 和 3 没有进行合理的意符提示和反馈提示让用户摸不着头脑，进而导致用户根据自己的猜测和过往经验来进行操作，最后得到非预期的结果。
回到文章开始时的洗衣机开关问题，因为开始和暂停按钮是一体的，在没有任何意符和反馈的情况下我按下这个按钮时我并不知道我启动的是开始操作还是暂停操作。
我们可以就这个问题列出以下解决方案：
1.增加文字提示，如启动时在显示屏上显示“已启动”，暂停时显示“已暂停”；
2.增加语音提示，启动开关后使用语音告知用户“已启动”或“已暂停”。
当然解决方案有很多，每个人都可以根据场景想出不同的解决方案。
与现实机器的开关类似，在 UI 设计中我们如果进行开关设计也需要遵循相应的设计原则。
一个合理的开关设计主体包含的意符分别有两种：
1.表示当前状态；
2.表示操作后的状态。
主体之外我们还可以添加辅助提示更加清晰地传达意符和反馈。
接下来将介绍一些常见的开关类型和辅助提示类型，最后总结出体验优质的开关设计方法。
二.开关类型
1.icon
在 UI 设计中最常见的开关可能就是 icon 了，即由单一的 icon 通过颜色或图形的变化来表示开或关的状态。因为交互设计从古到今并没有统一的严格标准，所以到底是将开关 icon 的样式设计为「当前状态样式」还是设计为「按下之后的状态样式」并没有一个约定俗成的规则。然而，对比而言如今各类 App 设计中常见的且体验比较好的方案还是将开关样式设计为当前状态样式。如下图iPhone自带相机的实况照片开关icon就是显示当前状态。
然而，并不是说将开关样式设计为当前状态样式做法普遍且体验更好就可以这样做了，有些开关的设计因为使用广泛，已经在用户的心智中扎根，我们如果强行改变反而适得其反导致体验变差。最典型的就是视频和音乐的播放暂停开关，他们表示的就是操作后的状态而不是当前状态，如下图。
因此，大部分应用的开关类 icon 都是混用当前状态和操作后状态的，如下图哔哩哔哩的视频播放界面，播放暂停开关 icon 表示的是操作后状态，弹幕开关表示的是当前状态，而视频锁开关 icon 又变成了表示操作后状态了。
是否统一倒不是关键，关键是我们是否能够让用户理解相应的意符和反馈，目标是让用户在操作开关前能够知道当前状态是什么，操作开关后当前状态是什么。
举一个反例，下图中的美颜相机的夜拍模式开关就没有直观表现出当前是开还是关，这种有歧义的设计可能让新手用户手足无措，可能本来未开启的功能让用户误以为已开启，导致拍出来的照片不符合用户预期。
由此我们可以看出，单一的 icon 开关如果没有其他的辅助提示会造成意符和反馈的缺失，进而形成较大的歧义性，用户会在疑惑中按照自己固有的心理模型和过往经验进行判断，体验因此降低。
2.主体与开关分离（分离式）
上一部分举了美颜相机的反例，其意符和反馈不明产生的歧义问题导致了用户的困惑，但使用「主体与开关分离」（后文一致简称为“分离式”）的开关设计可以解决这个问题，它在意符和反馈层面都给予了用户提示，可视性很强，完全解决了开关状态无法被用户感知的问题。分离式开关指的是，主体不再充当开关，只当做开关的名称或icon，另外制作一个开关传达意符和反馈，解决了当前状态与操作后状态混淆的问题，其通常的样式如下图。
如下图，Faceu激萌不同于美颜相机设计方式就是将主体与开关分离，很清晰地传达了当前开关状态。
大部分App的设置页面使用的开关都是主体与开关分离的方式，如下图。
显而易见，分离式开关直观展示了当前状态，在消除歧义方面优于 icon 开关，但同时缺点也很明显，它占用了过多页面空间并美感欠佳。
3.名称变化
名称变化指的是开关依赖于其名称的变化告知用户开关的当前状态和操作，常见的类型如下：
部分 App 会将开关的名称变化的方式统一，但也有部分 App 会将这两类进行混用，即一个是表示当前状态，一个是表示操作。
下图为部分 App 的名称开关，我们可以将上图的开关名称类型的序号对号入座。
表示操作的按钮文字具有一定引导性，用户容易感知和触发，反之，表示状态的按钮文字由于不具有引导性，如果用户没有对这类按钮形成使用习惯甚至难以意识到它是可点击的，因此我们可以利用其特性进行逆向应用引导用户的行为。比如在直播App中，我们希望引导用户关注主播，又试图避免用户关注后又取关主播。我们就可以将“关注”制作为表示操作，文案写为“关注主播”（属于1.开启...）。将“取消关注”制作为表示当前状态，文案写为“已关注”（属于7.已开启...）。前后的颜色进行区分，“关注主播”的按钮制作得对比度强，吸引力大，“已关注”做得弱一些，让用户误以为不可点击，如下图的斗鱼直播。
然而，名称变化的开关由于语言的模糊性，仍然造成了部分歧义。我们可以发现很多App的名称变化开关设计中，都会在操作后加入其它提示来消除歧义（如：toast 提示），有些App则并未加入，因此在后文中会着重介绍辅助提示的优点和使用方法。
小结
icon、分离式、名称变化，如果按照消除歧义的优劣排列的话，大概是 分离式>名称变化>icon。
那这样的话是不是应该把开关都换成分离式呢？当然不是，分离式虽然在意符和反馈的层面很充分地消除了歧义，但是其也有明显的缺点，分离出的开关会占用部分空间，可能会影响美观，因此我们需要根据需求和页面结构选择最适合的开关类型。
那名称变化和 icon 类的开关如何消除歧义呢，我们可以通过添加下面介绍的辅助提示来解决。
三.辅助提示
1.环境暗示
环境暗示指的是用户在操作开关前，开关以外的区域给予用户的提示，这些提示本身存在于交互流程中并不是我们刻意加入的，用户根据这些提示可以判断当前状态以及按下开关后的状态。
例如在观看视频时，当用户去按下视频播放按钮前，用户会通过当前图像静止与无声音这个环境暗示明白当前状态是可能是视频未播放，所以应该按下播放按钮让视频播放。
再比如得到 App 的夜间模式，用户可以通过当前界面的样式判断当前是否已经开启了夜间模式，如下图。
看下图，如果没有环境暗示，你能分清得到的夜间模式的开关哪个当前状态是夜间哪个当前状态是日间吗？
因此，环境暗示的优势是我们不需要进行另外设计其他的意符和反馈告知用户当前状态，环境给予的暗示已经足够直观。
2.模态/非模态提示
当用户按下开关后模态和非模态提示可以在反馈层面告知用户，让用户知道自己是触发了开启还是关闭。
常见的模态提示控件是「警告框（Alerts）」，非模态提示控件是「提示框（Toast）」，前者提示强度大，使用在一些危险、重要的反馈中，后者则使用在一些轻量的提示中。
介绍 icon 开关的部分我们提到了美颜相机的夜拍模式的 icon 开关状态难以区分，但美图秀秀在这里使用了顶部的非模态提示在反馈层面告知用户当前状态，很好地解决了这个问题，如下图。
拉勾网的设置中，隐藏简历为危险操作，用户极有可能由于开关名称的歧义或由于疏忽触发开关导致简历被隐藏从而错过工作机会，因此此处设计了一个形式为警告框的模态提示来告知用户当前状态以及潜在风险。
3.辅助文案
辅助文案指的是在主体（主体可能是开关名称、icon 或二者皆有之）之外另外放置一些文案信息来充当意符和反馈。下图案例就是高德地图的下车提示的开关，开关的主体是名称，但是下面的一行辅助文案很清晰地传达了当前的开关是什么状态。
4.其他辅助提示
并不是所有提示都需要让用户看见，我们可以给予用户其他感官的信号告知用户当前开关的状态。
在现实生活中，我们会通过钥匙在锁中扭动发出的声音判断锁是否被打开，通过触摸感受摩托车是否继续震动判断其是否已经熄火。
同样，在 UI 设计中，我们也仍然可以使用听觉和触觉来消除开关的歧义。一个比较优秀的案例是高德地图，当用户打开下车提示之后，会出现语音提示“已开启下车提醒”，它充分考虑到身处户外的用户可能并不能很方便地获取屏幕上的视觉信息，因此使用语音的形式提示用户。
小结
辅助提示很好地补充了开关在消除歧义上的不足，但我们需要合理使用否则就会产生不必要的视觉噪声。如下图，试想音乐的暂停播放开关如果加入的 toast 提示会怎么样呢？由于我们已经可以通过“手机是否发出声音”这个环境暗示获知当前的开关状态，如果再加入 toast 提示必然会出现不必要的视觉噪声。
4.总结
介绍完开关类型和辅助提示后，我们如何将其应用到我们的产品中，设计出无歧义或低歧义的开关呢？
如果我们选择的开关类型已经足够的消除歧义，如分离式，我们就不太需要额外地增加辅助提示了。但是如果使用容易造成歧义的开关，我们可以按照（开关类型+辅助提示 1 +辅助提示 2 +......）的公式进行设计，即一种辅助提示不足够消除歧义，可以使用多种一起。
举个上文的例子，高德地图的下车提醒开关的设计就是「名称变化开关+辅助文案+语音提示」 的组合。
然而，任何设计都不是完美的，很多地方都需要我们做出妥协，虽然我们可以选择合适的开关类型和辅助提示解决歧义问题，但随之而来就可能出现其他问题。如分离式开关消除歧义效果很好，但是占用空间且不美观，模态和非模态提示给予用户的反馈比较强，但是可能打扰到用户。
综合上文提到的三款相机软件作为案例，如下图，我们可以发现在消除歧义的过程中避免不了对用户造成的干扰或页面美观度的降低。我们很难去评判Faceu激萌、美颜相机和美图秀秀哪个设计得更好，它们只是在易用性和美观性之间找到了它们所认为的平衡点。具体如何设计，还是要具体问题具体分析。
那么我们应该如何进行取舍呢，在这里我们要考虑另外的因素。我们可以从以下角度分析，使用频率、用户人群、潜在风险等。
使用频率：使用频率越高，用户对操作的熟悉度越高，歧义对用户造成的理解与记忆成本就降低了，设计可以偏向低干扰和美观度，反之使用频率越低，歧义对用户造成的理解与记忆成本升高，设计就应该偏向于易理解。
用户人群：不同的用户人群的风格偏好、认知能力是不一样的。例如，我们要设计一款目标用户为年轻人的相机产品，设计风格简约，此时我们比较偏向的设计方案可能就类似美颜相机。反之，如果我们的目标用户是中老年人，就要偏向于易用而牺牲美观度，方案转而偏向美图秀秀或 Faceu 激萌。
潜在风险：开关的切换如果会导致潜在风险，设计就应该偏向于易理解，且需要使用模态提示告知用户风险。例如用户如果关闭了推送通知开关，会导致接收不到实时重要的信息通知，此时不仅要使用易识别的开关类型，还需要添加模态提示告知用户风险。
我们可以将这些考虑角度放到雷达图，如下图所示，最终形成的面积越大我们越应该将按钮制作得易理解、易使用，反之我们可以偏向于将开关制作得更美观牺牲一些易用性。考虑到一些特殊产品的特殊用户属性，我们可以在下图中增加其他考虑角度，其并不是一成不变的。
以上是本次对开关设计的思考，看似小小的一个开关，包含的学问却不胜枚举。作为一个互联网产品设计从业者，一定要善于感受生活，用设计师细腻的内心去打量、洞察身边的一切事物，发现美与不足，思考改进方法，并在这个过程中逐渐提升自我的价值。
转自：站酷-Ballen贝林
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
在产品交互设计中，
有些交互逻辑会“故意”让选择用户多走一步，
（在不影响用户体验情况下）
而这次，我在体验这些产品当中，获取的一些思考分享给大家。
我们就来聊聊有哪些是多让我们做一步而让产品更加升华的一些APP吧！
文中涉及到的理论包括：
我们常能听到以上的十大原则之中的著名设计理论，
但可能还是不太清晰是什么意思
而这篇文章将会实际分析
涉及到的原则知识我将会在案例中分析讲解～
--------------------------------------我是分割线------------------------------------
以下是实例分析：
「中级用户的数量远高于初级和高级用户数。为大多数用户设计，
不要低估，也不可轻视，保持灵活。」
（收藏后选择歌单方便一步）
在网易云的歌曲收藏功能里，点击收藏需要再次选择你想放入的歌单才能收藏成功。相比于淘宝的点击收藏立马收藏成功，这样的做法明显是网易云多了一步，而个人观点分析这样做的是因为（网易云重度用户）：
1.功能性来说：
歌单是早期网易云诞生的重要和特色功能
2.行为路径来说：
减少用户后期创建新歌单过程中 还要去重新收集歌曲，从而更容易定位快速创建自己的个人歌单
（歌单做分类 同时网易云歌单作为分享也占很大一部分）
总结来说：网易云是一个主打评论和歌单的音乐社区软件，先选择歌单多一步步骤，让用户后面听自己的歌单更为清晰的知道分类，也同时活跃于创建歌单的乐趣当中，让用户停留的时间越长，产品也就得到了一部份价值，从而增加了用户的粘性。这样就是“多一步”的特别之处。
（表单信息更便利一步）
爱彼迎在用户注册信息的时候，会把收集的资料分多次进行输入。
这样的设计解决了用户面对长篇表单填写的心理压力，同时告知余下的页面数，让用户心理存在预期考虑。
将复杂的表单分成若干步，并引导用户如何操作，并提示余下操作的步骤。一个这样的举动，不光是分段优化了表单的填写步骤的一小步，同时让新用户更轻松注册，提升了用户的注册转化率的一大步。
目前近几年大部分应用的退出账号功能是做的比较隐藏（点击设置icon-最下方才能退出）
相比于早些年app在个人中心里最下方直接会出现退出登录
近年来隐藏二级或三级页面下的做法是在太普遍
而大概分析了如下App的的做法
小红书个人中心界面设置除去顶部个人信息展示
另外就是侧重笔记功能-收藏功能-赞过功能
因为这三个功能方便了用户能快速找到自己的收藏从而阅读或者自己发布，而设置功能仅用一个icon去代表，而整体布局就摒弃了传统的功能设置列表那样，更突出了产品功能侧重点，也迎合了产品的业务发展。
淘宝的个人中心页面就十分大体量了 里面涵盖了诸多产品功能 一个很完备的生态系统 ，隐藏在二级的功能设置顺应了产品的向上的全面发展轨迹，设置功能（退出等）就属于一个超低频率的触发事件了。节约了界面的展示成本。
而存在较为直接展示退出账号的App吗？
答案肯定是有的～
此类应用首先功能比较单一，
就先拿qq安全中心来说，它是属于一个账户保护监管的应用，而为什么不把设置隐藏在更深的页面呢？
如图所示就大概看的出来，产品功能较为单一，再去添加一个设置功能二级入口就显得冗余了，且对于用户拥有多个账户 退出切换功能就比较重要了。
Appstore也是如此 垂直于App的应用商店，在个人设置上功能较少，也是较为直观的放在底部。
印象笔记的退出登录其实比较迷了 在个人中心界面放的犹为突出，而底部的现在同步功能我觉得在同类笔记中是较为重要。而这样本末倒置了，就是一个大的谜了。
--------------------------------------我是分割线------------------------------------
「比出现错误信息提示更好的是更用心的设计防止这类问题发生。在用户选择动作发生之前，就要防止用户容易混淆或者错误的选择」
（增加双重验证一步）
拿招商银行推出的掌上生活App来说，在用户每次重新打开的同时都需要重新验证身份（各类平台存在 Face ID 手势密码 登录密码等），而你在付款或者交易的过程中，需要再次密码验证， 这样每次都多一步交互动作，其实都是为了更加安全的保障用户的个人财产，同时也突出了产品的安全性和可靠性。
那为啥QQ 微信每次不这样呢？（常用设备环境下）
微信qq虽然也有锁定功能，但考虑用户使用打开频率较高，所以只在支付层面上保护验证密码。
（增加确认删除一步）
微信聊天列表的滑动删除在一次点击后会继续显示“确认删除”按钮，其实也是二次保障让用户有一个心理预期，效果其实和大部分APP弹窗显示删除一样。
而淘宝收藏列表的商品侧滑删除点击就立马删除，由于没有提示“确认字样”，对于很少用该功能的用户来说，会带来一种不符合预期的想法。
当然淘宝和微信区分做法认为考虑的是 ：
淘宝：让用户能够快速删除该商品，不需要造成不必要的二次确认，浪费时间。
微信：删除的是聊天记录，是不可逆的操作，聊天记录对用户价值比较大，而淘宝的商品是可以继续收藏回来，就比重来看的话，两个删除操作其实大有不同。
（增加提示一步）
在大部分视频App中，当在无WIFI环境下的4g网络连接下，播放视频过程中会显示当前视频为流量播放单中，是否继续使用流量播放下去，这样一个小提示，避免了用户因为WiFi断开导致产生大量流量费用。
--------------------------------------我是分割线------------------------------------
「尽量减少用户对操作目标的记忆负荷，动作和选项都应该是可见的。用户不必记住一个页面到另一个页面的信息。系统的使用说明应该是可见的或者是容易获取的。这也说了交互的一部分，比如填完表单，下一步应该生成表单，而不是下一步就是完成。」
（增加表单全部展示一步）
在最近新出的淘宝人生账单中，会展示出自己消费的数据，
并在分享之前再次确认信息的完整度。这里为什么要需要最后展示一步呢？
而 同等逻辑下网易云音乐2018年度报告，
没在最后展示所有分析数据，我们是否质疑没做到很优秀呢？
其实不然，首先网易云音乐的报告长度很长，放在最后面会导致长图分享，没有单页面展示效果好，也照顾到了大量数据长图表单分享的复杂性。
1.并且我们目前大部分年轻人分享某个页面的时候， 惯用的操作是立马截图，
而网易云音乐做到了每个页面都放置了当前的二维码 从而做到识别二维码快速分享，
也能让用户快速打开自己的年度报告。
2.心理层面深度分析下：部分数据的内容，其实用户不太想分享，如果网易云做了最后的长图分享，其实会让部分用户不愿意分享自己的某些不想让别人知道的私密歌曲或其他。造成多余的用户操作（裁切或者隐藏）给部分用户带来不便。
展示完表单数据，下一步生成对应表单，让用户有意识性的能再次确认内容，从而分享转发，而不是盲目的完成，造成用户的上一页查看产生困扰。
的做法，由于数据的复杂性和多样性，聪明的以现在的用户操作行为和心理研究等，每页嵌入二维码，做到了更发散思维的方法拓展。
（增加5秒跳过广告一步）
youtobe的广告是业内运营的比较好的例子，他的好在于，在一段30秒的广告当中，让用户可以选择5秒后跳过此广告，但为什么要让用户不看完广告就可以跳过呢？这不就让广告没有价值了？
其实不然，youtobe也分析了用户的等待广告行为，在投放youtobe的30秒广告当中，5秒的广告，会让用户会更有耐心看完，因为时间短，用户愿意等待，而不是用户去上个洗手间，去冰箱拿个汽水之类的行为，用户会更加专注于5秒的广告当中，而广告投放商们，他们会更加把5秒的视频内容做的更加突出重点，短短5秒就呈现出该广告的优势所在，从而用户会激发点击欲望，从而达到商业价值。这里的产品增加跳过广告一步，其实蕴含的价值，推广远比完整30秒的广告更加优秀。
--------------------------------------我是分割线------------------------------------
转自：站酷-tronyoung
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
蓝蓝设计的小编 http://www.lanlanwork.com