首页

Vue+Electron下Vuex的Dispatch没有效果的解决方案

seo达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

这个问题是解决基于 vue 和 electron 的开发中使用 vuex 的 dispatch 无效的问题,即解决了 Please, don't use direct commit's, use dispatch instead of this. 问题。

先允许我梳理一下目录结构,以便阅读的时候不会一头雾水,你到底说的这个文件是哪个……



其中 /src/main 是存放主配置文件的,/src/render 下面有 store、router、components 等。

components 下面就是很多 .vue 文件,router 下面就是一些路由配置的 js 文件和一些拦截器的 js。

关键是 store,store 下面有一个 index.js 的主配置文件 index.js,和一个 modules 文件夹。

index.js 里面写的是(记住这句话,后面会用到):

import Vue from 'vue'
import Vuex from 'vuex'

import { createPersistedState, createSharedMutations } from 'vuex-electron'

import modules from './modules'

Vue.use(Vuex)

export default new Vuex.Store({
  modules,
  plugins: [
    createPersistedState(),
    createSharedMutations()
  ],
  strict: process.env.NODE_ENV !== 'production'
})

而 modules/ 下面存放各个实体,例如上图中的 Auth.js 和 Counter.js,并通过 index.js 全部引入。

/**
 * The file enables `@/store/index.js` to import all vuex modules
 * in a one-shot manner. There should not be any reason to edit this file.
 */

const files = require.context('.', false, /\.js$/)
const modules = {}

files.keys().forEach(key => {
  if (key === './index.js') return
  modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
})

export default modules


然后来看一个 vuex 的官方样例:

const state = {
  main: 0
}

const mutations = {
  DECREMENT_MAIN_COUNTER (state) {
    state.main--
  },
  INCREMENT_MAIN_COUNTER (state) {
    state.main++
  }
}

const actions = {
  someAsyncTask ({ commit }) {
    // do something async
    commit('INCREMENT_MAIN_COUNTER')
  }
}

export default {
  state,
  mutations,
  actions
}


之后很显然的,我想要在 Vue 的组件调用 INCREMENT_MAIN_COUNTER 对计数器加 1。

this.$store.commit('INCREMENT_MAIN_COUNTER');
// this.$store.commit('INCREMENT_MAIN_COUNTER', payload);
1
2
如果是一般的 vue,就 OK 了,但是,我遇到了报错,说,Please, don't use direct commit's, use dispatch instead of this.



那好吧,没事,不就是不然用 Commit,非要用 Dispatch 嘛,那我就写一个 Action,里面直接调用 Mutation,就像这个样子:

const actions = {
  JUST_INCREASE ({ commit }) {
    commit('INCREMENT_MAIN_COUNTER')
  }
}
1
2
3
4
5
然而奇怪的事情是,this.$store.dispatch('JUST_INCREASE') 并不能运行,没反应,计数器还是 0,不能赋值,就像是这个函数没有被执行一样。没有报错,没有任何异常,查也查不出什么问题。





网上的资料似乎也挺少。

折腾了很久,后来发现是 vuex-electron 里面一个插件的锅。

解决方法有两个。

方法一:

在 store/index.js 里面,就是上文特别强调了的那个文件,去掉 createSharedMutations 插件。

import Vue from 'vue'
import Vuex from 'vuex'

import { createPersistedState, createSharedMutations } from 'vuex-electron'

import modules from './modules'

Vue.use(Vuex)

export default new Vuex.Store({
  modules,
  plugins: [
    createPersistedState(),
    createSharedMutations() // 注释掉这一行
  ],
  strict: process.env.NODE_ENV !== 'production'
})


这是因为 vuex-electron 引入了一个用于多进程间共享 Vuex Store 的状态的插件。如果没有多进程交互的需求,完全可以不引入这个插件。

注释掉以后重启项目,用 this.$store.commit('XXX') 就可以使用了。

然而,如果需要多进程来处理怎么办?

方法二:

https://github.com/vue-electron/vuex-electron#installation

看第 3 条:

In case if you enabled createSharedMutations() plugin you need to create an instance of store in the main process. To do it just add this line into your main process (for example src/main.js):

import './path/to/your/store'
1
这种时候就不能用第一种方法来解决问题了。

好在文档也说了,加上一行导入。

找到 /src/main/index.js,在前面加上一句:

import '../renderer/store'
1


之后一切正常,可以使用 Dispatch 来进行操作了。



最后还有一个比较奇怪的问题:



在直接调用 state 的时候,这样写 this.$store.state.loginStatus 是不行的,会 undefined,必须写成 this.$store.state.Auth.loginStatus,就像是 this.$store.state.Counter.main 一样,似乎可以解释为,不同的模块不指定名字的话就找不到。

但是,在写 Dispatch 的时候又不需要指定名字了,直接 dispatch('changeLoginStatus') 就行了,不然难道不应该是也按照 dispatch('Auth/changeLoginStatus') 这样子来写嘛……
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 平面设计服务

大陆19届毕业展海报实力平平,港澳台能不能扳回一局?

雪涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

前天看完大陆毕业展海报合集,不少小伙伴大呼看得不够过瘾。为了满足大家炙热的求知欲与上进心,美丫姐又花足工夫找来了今年港澳台、日本、欧美等地毕业展海报。

依旧干货十足,依旧吐槽猛烈,希望优秀如你,能够看得开心。

港澳台地区-眼前一亮系列

首先我们来看看让人印象最为深刻的优秀作品。

1. 岭东科技大学视觉传达设计系

渴望自由的金鱼

鱼缸中的生活再怎么无忧无虑,也拦不住金鱼一跃而出的渴望,就像喷薄欲出的创意,就像按捺不住跑出校园的毕业生。

2. 台湾科技大学毕业展

架着一个歪斜的棚子,支撑着我们的二十二

猛然撞上了即将踏入社会的迷茫与不安,台科大的莘莘学子鼓起勇气,向老师询问着最后一个问题「老师您看这展厅,供电是不是不太够?」

3. 台南应用科技大学多媒体动画系

伏流

有时候你以为自己发现了一股清泉,其实全是大佬手里玩剩下的,人外有人,天外有天。

4. 国立台湾艺术大学设计学院

喜欢做,肝愿受

其实大家刚毕业头几年也是这么想的,几年之后肝还好,头很冷。

5. 国立台南大学视觉艺术与设计学系

后浪

长江后浪推前浪,后浪还有后后浪。大家都是被时代的洪流裹挟着前进,显然这届毕业生还没毕业,已经被学弟学妹们震得神志不清了。

6. 国立台中科技大学商业设计系

超人请回答

整个童年,大人都忙着策划一个玩笑,让孩子天真的相信世界上真的有超人,等到成年之后他们再哈哈大笑「哈哈哈她真的信有超人」,偶有不愿从童真中醒来的人继续寻找,你们等着,迟早给你们找来真的超人。

7. 朝阳视觉传达设计系

青浪

用各式纹理堆叠表现出了「浪潮」的韵味,既能联想到青出于蓝胜于蓝,又有长江后浪推前浪的语境,画面动感,锐意十足,就是不知道早就毕业的学长们会怎么看。

8. 朝阳科技大学工业设计系

那个967呢?

找了很久只找到「967=很想你」的说法,但想来不至于借毕业海报,发出「凭什么就我四年没有恋爱」的呐喊,越不知道就让人越想知道,竟有一丝等待戈多的意味。

9. 佛光大学产品与媒体设计学系

非想非非想

到底是佛光普照大学毕业的学生,还没出校门,就已经参透了甲方的真谛,非想,问他想要什么,说不出来;非非想,却总能提出一大堆意见。

10. 国立台中教育大学文创系

泛流意识

总说要把意识汇聚成一道洪流,变成一道铁流,细想也没什么不对,毕竟钢铁、石头、血红细胞里都含有铁元素。

11. 义守大学创意商品设计学系

灵光乍现

灵光就像这一坨奇妙的东西,摸不着更说不清,出现的时候总让人欣喜若狂,定睛一看,可真不是个东西。

12. 明志科技大学工业设计系

明志科技大学旗下有两大门派,一派工业设计,一个视觉传达,两大派的关系想必是剑拔弩张,一派冷静沉稳,舍我其谁。

13. 明志科技大学视觉传达设计系

眼波

一派浮夸前卫,闪瞎人眼。

14. 台南应用科技大学美术系

画语者

老猎人除了酷爱炫耀猎物,更爱炫耀不离身的老猎枪,情人眼里出西施,用心爱的工具们铺满整张海报,还能有谁比他们更爱这个行业。

15. 昆山科技大学视觉传达设计系

形象组无能

「海报做成这样,都怪老师举棋不定」,多少年后才突然醒悟,原来老师的犹豫不决,是为让我享受最后一次任性的机会。

16. 环球科技大学视觉传达设计系

轮迴

「谁TM把灯打开了?」。不,是天又亮了。多少优秀的作品背后,都是无数个日日夜夜的轮回

17. 世新大学数位多媒体设计学系

今宵霓烂

在陈列室打碟,在毕业展上蹦迪,如果连想都不敢想,那你凭什么认为你能改变这世界?

港澳台地区-成绩优秀系列

其次是第二梯队,虽然不算突出,但也算优秀作品。

1. 岭东科技大学数位媒体设计系

淘色风波

龌龊的语意,来自成人龌龊的内心,让家长面红耳赤的「淘色风波」,不过只是毕业生们翘课逛展打游戏。

2. 国立台北科技大学工业设计系

新一代设计展

废掉的第一稿千万别撕,不然最后出街时就是这个鬼样子。

3. 国立台中科技大学创意商品设计系

被……的那五年

科大的毕业展为什么延期了五年?估计是地图画得太烂,大家花了五年才找到举办的地址。

4. 国立云林科技大学视觉传达设计系

发声关系

「喔」「啊」「曰」,奇了,大家都是纸打印出来的作品,凭什么就你们家海报有声音?

5. 东南科技大学数位媒体设计系

生长轮

树木的年轮记录着时光,每当有大事发声,从年轮中就能看出一二,你看今年新的圈圈它又白又圆。就像学生们毕业一样,脚踏实地、悄无声息。

6. 国立清华大学艺术与设计学系

升温计画

温室效应?冰川融化?这些都远远不够,沉默四年平淡如水,如果一生一次的毕业大展再不燥起来,那可就真的毕业了。

7. 国立云林科技大学数位媒体设计系

外出取材中

闷在家里一时爽,一直闷着一直爽?活像躺在盒子里的量产玩具,该出去走走,看下绚丽多彩的世界了。

8. 岭东科技大学创意产品设计系

三角关系

创意、媒介、受众,所谓传媒,正是一场相爱相杀的三角游戏。

9. 南华大学视觉艺术与设计学系

零睡时间

你以为躺在床上就是不思进取?不,我是在梦里收集创意,一时的休憩,是为了更好的前进。

10. 国立云林科技大学工业设计系

问HOW

寒窗十数载,大人都说不懂就问,步入社会才知道大家都只能强撑,明明面对奇葩需求,想要大声反问一句「HOW?」看看瘪掉的钱包,只能脱口而出,说一个「好」。

11. 铭传大学数位媒体设计学系

蹦起来

设计水平还没那么高的时候,一定记得猥琐发育不要太跳。不然,甲方连头都给你锤爆。

港澳台地区-迷惑不解系列

最后是第三梯队,先不论好坏,总之看得人迷惑得很。

1. 亚洲大学数位媒体设计学系

复燃

想让葬爱家族设计风潮死灰复燃,甚至风靡世界也不是问题,只需简单一步,把地球表面刷成 QQ 空间那么黑。

2. 高雄师范大学美术系

扔出去的,头也不回

扔出去的飞机稿就别再捡回来了,即使马粪风干后看着像块巧克力,但只要你一舔就会发现,呸,果然还是那堆马粪。

3. 义守大学传播与设计原住民专班

是生活

怀疑是在暗示黄色比生活更吸引人,但手上又没啥证据。

4. 中国科技大学视觉传达设计系

一体两面

思维定势是一件很可怕的事情,比如甲方经常让把大象换个面,觉得不是正面就是反面,可换来换去还是不满意,就没想过,甲方要的是横切面。

5. 义守大学电影与电视学系

艺眼瞬间

好设计让人瞠目结舌,觉得语言乏力,丑的设计也能让人瞬间语塞,根本说不出丑在哪里。

6. 大叶大学工业设计系

DNA

看完台湾大叶大学官网上的师生风采,就能明白这确实是一所连空气都飘着直男审美的理工科大学。

也就不难理解为什么连设计系学生们的毕业海报都会有这么大一股子消毒水味。

7. 大叶大学视觉传达设计学系

记得呼吸

比起上一张工业设计系海报的冷静,视觉传达系海报走向了另一个极端,线条凌乱,张牙舞爪,若不用文字提醒「记得呼吸」,不少观众会因为过于震撼憋死在原地。

8. 澳门科技大学

跨越

连着领导的修改意见以及删除线,一齐打印出来的终级作品。

「香港的呢?」抱歉,一张都没找到。

日本

日本,设计强国近邻日本。今年毕业展海报也是颇有看头,他山之石可以攻玉。

1. 多摩美术大学

能顺利毕业的,都是怪物。

2. 武蔵野美术大学

感受扑面而来的乡土气息。

3. 东京艺术大学

这就是设计师通宵后倒下的身影。

4. 东京造型大学

综合各位老师意见之后的海报作品。

5. 东京五艺术大学联合展

「我用图画工具都比你画得好!」「好好好你行你来。」

6. 仓敷艺术科学大学

「快从楼顶下来,这次真的不改了!」「你们签字画押」。

7. 京都精华大学

学习四年,设计使我面目扭曲。

8. 京都造型艺术大学

套用学长给的模板,但忘了改日期。

9. 金泽艺术工业大学

金泽大学深造多年,最拿手的就是往产品上喷金漆。

10. 冈山县立大学

让我看看,谁还没交毕设作品。

11.日本桑泽设计研究所

我们的展区在山顶上,请大家参展时做好御寒准备。

12. 名古屋艺术大学

为了让画面更丰富,我放了 267 顶帐篷。

13. 奈良艺术短期大学

毕业考试第一题,画出任课老师的脸。

14. 文化学院大学

反正到时候大家都是要哭的。

欧美地区

欧美地区毕业展海报内容更加现代,但因为文化差异较大,消化起来相对比较困难,这里就不一一吐槽了,大家自由学习。

1. 路易斯安纳州艺术与设计学院

2. 伦敦都会大学

3. 美国Art Center

4. 英属哥伦比亚大学

5. 美国马里兰艺术学院

6. 英国皇家艺术学院

想不到你这帮浓眉大眼的英国人,也玩「爱滴魔力转圈圈」。

好了,以上就是今天的全部内容,谁要是还觉得不过瘾,只能老老实实等明年新生毕业了。

总体说来,亚洲地区文化的多样化性,还是完胜欧美,这点非常值得欣慰,但是回头看看大陆毕业展海报,又千篇一律到让人完全开心不起来。总之还是那句老话,革命尚未成功,同志,仍须努力啊。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

地图设计参考

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

各国的地图设计类参考

 微信图片_20190514110049.jpg微信图片_20190514110140.jpg微信图片_20190514110145.jpg微信图片_20190514110151.jpg微信图片_20190514110203.jpg微信图片_20190514110215.jpg微信图片_20190514110223.jpg微信图片_20190514110234.jpg微信图片_20190514110243.jpg微信图片_20190514110249.jpg微信图片_20190514110255.jpg微信图片_20190514110300.jpg微信图片_20190514110303.jpg微信图片_20190514110306.jpg微信图片_20190514110312.jpg微信图片_20190514110316.jpg微信图片_20190514110321.jpg微信图片_20190514110325.jpg微信图片_20190514110329.jpg

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

参与多个项目后,我总结了这份可能是网上最全的小程序设计规范

雪涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

最近设计群里经常有人问起小程序设计规范的问题,虽然官方有提供样式库的下载,但是停留在 16 年版,不是的。而设计经验这部分网络上也没有比较全面的分享,这促使我停下手上的计划,加快输出本篇文章。正好近期刚结束几个小程序项目,总结下经验,并结合微信小程序的官方设计指南,一起分享给大家,希望帮助大家更快速地上手。

随着 2018 年小程序的迅猛发展,小程序现已被各大企业广泛采用,「触手可及、用完即走」的用户体验备受青睐,随之小程序设计也成为设计师的必备技能,那在进行小程序界面设计时,应该如何快速做设计?过程中又要注意哪些问题呢?

对于已经开发了 App 的产品,在进行小程序设计时需遵守小程序的规范,同时要保持小程序界面设计与 App 的风格统一性。

小程序设计区域

小程序的「所有页面」右上角位置,都固定放置了小程序的菜单,在设计界面时需预留出该区域空间。

Nav Bar设计

1. 小程序菜单固定样式

微信提供了深浅两种配色样式,以便更好地融合到各种风格的页面中,需注意保持小程序菜单清晰的辨识度。

线上案例:

2. 交互注意事项

如果要在小程序菜单附近放置交互元素,要考虑是否有交互冲突,应尽量避免误触的可能。

建议开发者设计的自有导航样式与微信官方小程序菜单样式保持一定差异,以便区分。

如上图,小红书的自有导航样式个人不推崇,理由如下:

  • 样式与官方菜单样式未区分开,容易产生疑惑;
  • Nav Bar 栏两端对称在顶部,视觉上显得过于呆板。

微信读书既有微信线条外框的 DNA,又区别于官方样式,是不错的综合。以上仅限个人观点,还需用户数据来客观验证。

3. 搜索框常见的几种表现形式

Tool Bar设计

1. 小程序设计规范

顶部标签分页栏颜色可自定义,一般会沿用 App 的设计风格,以保证两个平台的视觉统一性。

2. 常见的几种表现形式

Tab Bar设计

1. 小程序设计规范

微信有提供小程序的底部标签样式,建议标签数量在 2-4 个适宜。

也可根据产品需要选择或者去掉底部标签栏功能。

2. 常见的几种表现形式

启动页图标

启动页除品牌 Logo 外,其他元素都由微信统一提供,且不能更改,设计师仅需提供 2 倍和 3 倍尺寸的 Logo 即可。

加载样式

1. 小程序设计规范

全局加载是小程序名称左侧的加载图标。模态的加载样式将覆盖整个页面,由于无法明确告知具体加载的位置或内容,可能会引起用户的焦虑感,建议谨慎使用。

2. 常用的加载样式

需告知用户具体加载的位置形状,减轻用户焦虑情绪。

对于没有开发App来说,可依据官方推出的《微信小程序设计指南》来设计,以确保快速设计出符合规范的小程序。

小程序设计应遵循友好、、一致的设计原则,每个页面都应有明确的重点,清晰明确地告知用户身在何处,又可以往何处去,确保用户在页面中游刃有余地穿梭而不迷路。

平台设计网站推荐

最后,推荐几个常用的平台设计网站。

1. BAT各平台小程序设计规范网站

微信小程序设计指南:https://developers.weixin.qq.com/miniprogram/design/

支付宝小程序设计规范:https://docs.alipay.com/mini/design

百度-智能小程序设计规范:
https://smartprogram.baidu.com/docs/design/overview/introduction/

2. 其他常用的设计规范网站

苹果-人机界面指南:https://developer.apple.com/design/human-interface-guidelines/

详细介绍了 iOS 设计规范,同时还提供了 UI 设计资源下载。

安卓-MD设计指南:https://material.io/design/

蚂蚁设计:https://design.alipay.com/#ds

提供移动和 Web 端的设计组件,还有设计案例和心得的文章供学习。

微信样式库:https://weui.io/

提供微信内的网页和小程序设计规范。


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

让设计更有说服力的20条经典原则:帕累托原则

雪涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

简介说明

1. 理论表述

对于许多事件,大约 80% 的影响来自 20% 的原因。

2. 理论背景

1896 年,意大利经济学家帕累托出版了《经济政治学课程》(Cours d’economie Politique),其中描述了他所观察到的一些现象,比如意大利 80% 的土地掌握在 20% 的人手中;比如花园里 20% 的豌豆荚产出了 80% 的豌豆。

上世纪 40 年代,美国一位管理顾问 Joseph M Juran 观察到一个在商业以及生活中普遍存在的现象:在某一过程中,80% 的影响来自于 20% 的投入。他将这一现象以帕累托为名,称为「帕累托原则」。

80/20 虽然只是一个相当不的数字,在很多具体情况之下,这个数字会有细微的波动,但这个数字背后所蕴含的思想或是规律却是不变的:更集中的投入将产出大于预期的结果。

设计案例

1. 将时间投入到用户常用的页面

一般来说,一个 APP 大多拥有几十上百个页面,但是这些页面并不是用户都能用到的,有时候大多数用户只会常用那么几个页面,所以将有限的时间和精力投入到这些页面将给你带来更大的收益。

案例1:网易云音乐的 UI 迭代

最近网易云音乐和虾米音乐都迎来了大版本更新,UI 也几乎重新设计了一遍,但我们所看到的重设计,只局限在那些关键的页面上,一些次要的页面基本没改。比如网易云音乐,首页这种重中之重的页面不仅风格、排版大改,连产品逻辑都改了(比如快速入口由四个变为五个,改变了私人 FM 的位置等),但是等级页这种无关紧要的页面,除了头部的全局性改动外,其他地方一点没变。

2. 奥卡姆剃刀的另一种诠释

那我换个角度想,如果我们的应用已经存在了这么多需要花费时间和精力的页面,现在产品经理希望增加另一项需求量小但确实存在的功能,我们应该怎么办?奥卡姆剃刀指出「如无必要,勿增实体」,这是我们对此欲增加的功能的终极评判标准。

要知道,页面中每增加一个元素,对于用户体验的影响是巨大的,这意味用户着需要花费额外的时间去理解新增加的元素是什么;在所有元素中寻找特定的一项又多了一些备选;浏览页面时的视觉噪声又多了一些。

所以到底要不要增加这个功能,关键在于能否很好地控制上述的用户体验成本,以及后续的迭代成本。从帕累托原则的语境来看,小众但是确实存在的需求大概率不足以产生能够克服用户体验损失的收益,哪怕我们投入了一定的精力去做,日常依然无法给它百分之二十以上的关注去修改,去完善,去迭代,所以这个功能也大概率不需要增加。

3. 长尾模型与帕累托原则的对抗

说起帕累托原则就不得不提到长尾模型,长尾模型的分布曲线与帕累托长得很像,但是结论却完全相反,长尾模型提醒我们无法忽略那条长长的尾巴的影响,虽然它收益低,但架不住数量多,比例高。所以我们可以看到「尾巴」所占据的面积几乎和「大头」相当。

04 年长尾模型被提出来的时候,很多人认为长尾模型是对帕累托原则的颠覆,诸多例子都侧面佐证了长尾模型的正确性,比如 Google 目前约有一半的生意来自小网站,比如亚马逊图书的总盈利中少数畅销书占一半,绝大多数的冷门书占另一半。

听起来好像很有道理,长尾模型好似在控诉着开发者不去关注那些小众而众多的琐碎需求。事实真的如此吗?

长尾模型本身隐藏了两点不可或缺的前置条件,一是尾巴真的要足够长(小众需求真的有这么多),二是这么长的尾巴能被用户发现。无论哪一点,都建立在海量的用户资源之上,所以中小型 APP 大多望尘莫及。能够有余力去关注长尾模型的大多是用户量达到一定规模的产品,比如之前例子中所举的 Google、亚马逊,国内的微信、QQ、淘宝、支付宝、京东,这些产品的用户量足够多,用户类型足够广,尾巴足够长,哪怕再隐蔽的功能入口也能拥有不错的曝光度(总会有用户发现它),所以才能发挥长尾模型的作用。

所以在用户量达到 QQ、淘宝的级别之前,长尾模型看看就好,帕累托依然是主要的指导原则。

注意事项

注意点1:不得不做的需求

虽然我们要将精力放在重要的事情上,但有些功能和标识即使对于用户意义不大,和产品的增长也没有实际联系,但我们也依旧需要花费大量精力投入。最常见的就属于法律规定和平台规则相关的需求了。

比如 18 年的大事件,欧盟推行《一般数据保护条例》俗称「GDPR」,所有国际版的应用都需要针对这个条例对注册流程做出大改,比如这篇文章介绍的:《GDPR合规下的 App 产品设计——启动页面和账号注册》

注意点2:最重要的「少数人」

满足大多数用户的需求是一个必要条件,但不代表在任何情况下少数人就是可以被忽略的群体。对于工具化的应用而言,真正为应用带来收入和传播的,恰恰是占比较低的付费用户,可能连 20% 都不到。

在这类应用开发的周期中,前期完成了满足大多数用户的基础功能,之后更多的精力会被分配在满足少数付费用户的需求上。产品的方向和目标都可能随着不同的时期发生变化,帕累托原则是一个决策工具,但决策方向是需要经过我们充分思考以后得到的,切勿盲目地服从一个指标。

总结

怎样回应不好的设计建议?

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

一位高管在餐巾纸上画了一个新的主页原型来演示她使用和喜欢的网站。一个开发人员晚上在公司呆到很晚,并添加了一个他认为很酷的新功能。或者产品经理坚持采用与竞争对手相同的设计模式。

如果这些故事听起来很熟悉,那么你并不孤单。大多数设计师都会收到这种“帮助”。

你的第一直觉可能是以平淡无奇的方式回应“不”。但是,一个用户体验建议是否来自一个关键的利益相关者或项目周边的人,应该仔细处理。在您做出反应之前,请考虑以下步骤:

你的第一反应可能是利索地对对方说“不”。但是,无论UX建议是来自关键的利益相关者还是项目的外围人员,都应该仔细地处理它。在你做出回应之前,考虑以下步骤:

一、消除主观意识

第一步是将消除自己的主观意识;你可能拥有丰富的设计经验,但不排除会有更好的想法。不要仅仅因为它是在PowerPoint文件而不是Photoshop原型中呈现,所以不要认为一个想法是坏的。

观点的多样性可以更有效的构思:即使提出建议的人缺乏设计知识,他们可能会有不同的专业知识或经验,并且可能会为您正在尝试解决的问题带来宝贵的不同视角。

你如果像设计的上帝一样扼杀了他人的创造力,最终会导致更糟糕的结果。

二、听他们的想法

不加考虑就无情地否定别人的想法会阻碍人们在未来提出其他(有价值的)想法。即使一个想法对你来说显然是错误的,但请记住,这个人也试图让设计变得更好,尽管他可能对“更好”的含义有不同的看法。通过允许他们:

  • 解释这个想法
  • 解释一下推理
  • 向您展示草图或案列

三、将建议与问题分开

您可能会发现,虽然提出的解决方案并不合适,但需要解决的问题很重要。

问问这个人他的设计理念想要达到什么目标。他在考虑不同的用户群或业务需求吗?继续问“什么?”和“为什么?”(可能以不同的方式),直到你明白他考虑的问题及思考方式是什么。

四、评估潜力

确定建议和问题和好处。即使是一个坏主意也有一些好处。

例如,在大屏幕版本的网站上使用汉堡包菜单不利于用户轻松找到导航。这是不使用它的一个非常重要的原因。然而,桌面上的汉堡也有一个视觉上吸引人、整洁的标题。确认想法的成本和收益,以便更准确地评估权衡,可以通过不同的方法牺牲或实现哪些目标。

考虑举行设计原型会议(一个设计原型会议是短,会议期间,团队成员迅速协作和草图设计,以探索和分享的设计思路广阔的多样性),一起观看用户研究视频,或举办其他类型的用户体验工作坊,以便这个想法的支持者可以继续为这项想法解释。

五、花点时间进行研究和探索

解释一下,现在做一个设计决定意味着跳过构思、研究和用户反馈。在理想的情况下,转向设计思维过程,为所解决的问题找到正确的解决方案。

根据您对目标用户及其任务的了解程度,确定一个想法的优缺点可能需要:

  • 回顾以前的研究,看看这个想法是否已经过测试,结果是什么。
  • 搜索可用性指南和最佳实践,以获得类似想法的案列。
  • 在可用性测试或A / B测试中构建和测试该想法的原型。

论证该想法的成本可能会由于潜在的用户混淆,而导致的用户体验问题,以及诸如可能延迟发布其他更重要功能的开发计划中断等后勤问题。要评估大量想法,请使用对其进行优先级排序。

六、如何说“不”

如果您评估确定不应该实施该想法,您可以以积极的方式拒绝。

承认其贡献

你不必着急全盘否定,但不要愚蠢的全去试一遍。找到您相信的有关他们建议的真实或有效的内容,并将其标注出来。这可能是这样的:

  • “这种设计对于[角色类型]用户可能有意义,因为他们需要[此功能]。”
  • “听起来你想要解决与重要用户任务相关的[特定客户投诉]。”

由于这些短语之后都会出现“but”,因此请确保您在所提出的观点中是真实的。否则,说它们根本不值得。

分享您的评估理由

当人们投入足够的时间来提出建议时,就是帮助他们学习更多关于用户体验的知识,并在整个团队中传播更多用户体验知识的理想时机。利用这些时间,交流你评估的理由,而不是仅仅告诉他们一个“不”。

1. “这种设计对于[persona type]用户可能有意义,因为他们需要[此功能]。但是我们的主要角色可能会有这个问题,因为[原因]。“

2. “听起来你想要解决与重要用户任务相关的[特定客户投诉]。确定信息的优先顺序可能会有所帮助,但要使其更大,颜色不同可能会导致横幅失明。我想在第二天做一些调查,并提出一些替代解决方案的原型。“

考虑提供原型,案列,设计原则,模式或研究发现,以帮助他们理解为什么一个设计可能会导致问题,以及为什么不同的设计会更好地工作。把每一次互动都看作是灌输贡献者设计理念的机会——这是对未来的一种投资。

七、对强权讲真话

当客户或强大的同事发出特定请求(或要求)时,即使您给出了解释,也很难说“不”。但这并不意味着你应该放弃自己的观点并同意有害的建议。相反,与他们讨论如何将想法背后的目标和资源结合在一起,而不必直接实施。

合气道是一种试图和平解决冲突的武术,它依靠转弯和枢轴等动作来融合对立的能量。同样的原则可以应用于处理围绕设计的冲突:与其直接拒绝一个想法,不如同意继续探索这个建议,而不是明确地承诺实现它。

建议召开一次工作会议,在会上你可以提出既能获得同样好处又能避免成本的选择。例如,你可以说:

  • “我明白你想达到的目标。让我把它与一些用户体验研究和模式进行比较,看看我们如何能够在我们的约束条件下提供最好的解决方案来实现你的目标。“
  • “我想看看我们的一些竞争对手是如何做到这一点的,并确保我们做得更好,或者至少做得一样好。”
  • “让我们按照这些思路勾勒出一些东西,以及一些相关的替代方案,并获得一些用户反馈,这样我们就能实现你的目标。”

八、通过寻求早期设计输入来预防这些问题

比优雅地转移坏主意更好的方法是主动引导合作进入更有效的轨道。您可以通过在结构化的、战略性的时间(例如预定的研讨会)寻求输入,最大限度地利用每个人的贡献。这种主动的方法减少了在无法有效评估或合并意外更改请求时感到意外的可能性。

九、结论

每个人都对设计都自己的看法,这使得UX设计师的工作充满挑战。有些人总喜欢在界面中添加一些令人困惑的元素,比如原型、这会影响产品开发进度(可能包含UX迭代),以及那些喜欢设计(甚至认为自己是设计师)但缺乏任何真正的UX设计专业知识的人。

但是,如果您与您的合作者进行深入交流,向他们灌输设计理念并引导他们发挥自己的长处,这种“设计帮助”的多样性将是一种宝贵的资产。

最有成效的用户体验设计师在设计过程中会和许多人合作。他们与各种团队成员和主要利益相关者讨论业务目标,发展机会和约束,优先级,要求和设计理念。这些人来自许多职能团体;具有不同的UX专业知识,想法和思考。

要想成为一名优秀的用户体验设计师并创作出优秀的设计作品,培养必要的沟通技巧来利用这些信息来源和输入是必不可少的。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

这样设计按钮,会提高转化率哦

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

是能点还是不能点呢?”这是当用户在面对一些操作按钮时,大脑中所迟疑的问题。

按钮越多,做决定的时间就越长。用户必须仔细看每个按钮,才能确定哪个是他们需要的。对于按钮的任何不确定性,都可能会导致他们不敢操作或误操作。

设计师可以把按钮的优先级设计的更加直观以减少这样的情况发生。当用户注意到哪个按钮与他们的任务目标更契合时,就能帮助他们快速做出决定。这篇文章就是介绍一些这样的设计技巧,通过简单的调整使得按钮变得更加直观有效。

1、根据阅读习惯设计按钮

在App中,一个常见错误就是按钮的排列顺序偏离了用户的阅读习惯。他们将优先级最高的按钮放在最前面,期望用户能首先注意到它。但其实只要按钮足够突出,视觉分量够重,用户就会注意到它,而无视它的排列顺序。

按钮顺序不是为了提供可视性,而是为了要提率。在最前面放高优先级的按钮会导致用户自上而下的阅读习惯被打断,看到按钮后还会继续阅读下面的文字,然后再回过头来找前面的按钮进行操作。

不要让用户返回再次检查按钮,而是让他们以自然的阅读习惯看完所有的内容后,按视觉比重快速进行选择。

通过将优先级高的按钮放在底部,让它处于视觉阻力最小的路径上,这使得这个按钮可以更有效率的被点击。此外,底部位置是手指最容易达到的区域,这进一步提高了效率。

2、区分带形状按钮和纯文字按钮

App上的另一个错误是只使用文字来表示按钮。设计师使用文字按钮来表示优先级较低的操作。但是对于用户来说,这是一个糟糕的选择,因为纯文本没有一个按钮的外观,这可能导致用户会忽略了这些操作。

纯文本按钮会让用户迟疑到底是按钮还是内容,从而造成混淆。这种不确定性可能会导致他们直接跳过这些按钮。

纯文本按钮不仅让人感到疑惑,在操作上也不容易点击。将文本内容放在按钮框中,可以使得按钮更容易被点击和注意到。

与纯文本相比,描边形式的按钮是降低优先级的更好方法。它们使每个选项都易于识别,以便用户能选择他们所期望的目标。

3、为主要按钮加上颜色

高优先级的按钮应该是最容易被识别到的,它是直接指向用户最需要的目标操作。如果不确定优先级,请考虑哪些操作会使得用户朝着目标前进,哪些操作会使得用户回退。

在这个例子中,”付款”具有更高的优先级,因为它顺应着用户的目标流程。但不大清楚”查看购物车”还是”继续购买”的优先级是如何。

“查看购物车”操作让用户查看已经在购物车的商品,然后继续结账。”继续购物”操作将用户带回到远离结账的产品页面。

通过思考这些操作,可以清楚的看到”查看购物车”具有中等优先级,而”继续购物”具有较低的优先级。判断的理由是哪些操作使用户朝着他们的目标前进,哪些操作使他们远离目标。

前进的操作总是会比回退的操作优先级更高,因此,它们应该被设计地有更强的视觉重量和更高的颜色对比度。

颜色是一种增加按钮权重的有效方法,因为它从文本颜色中脱颖而出,吸引了用户的注意力。当按钮的颜色与文本的颜色相同时,提示性就没有那么强了。为优先级更高的按钮使用不同的颜色来辅助用户进行快速决策。

如果对每个不同优先级按钮使用相同的颜色,用户将不知道哪个优先级更高。而使用不同的颜色只会让用户更加困惑,不知道这些颜色到底意味着什么。不仅如此,每个按钮使用不同颜色,还会让视觉权重重新变得一样。

秘诀就在于使用相同的色相颜色,但改变饱和度和亮度就能改变这个按钮的优先级了,使得它比高优先级的按钮更轻。现在按钮的视觉比重有了区分,一下子就变得清晰了很多。

为了增加对比度,可以使用反色。在主按钮的深色背景上使用浅色文本,而在中等优先级按钮上使用浅色文本。这样就使得高优先级的按钮具有最亮的文本和最强的对比度。

4、改变文本的粗细

用之前说的几个方法,已经足以区分优先级,但还可以做的更好。每个按钮设计的越直观,让用户的思考就越少。

在每个按钮文本上使用相同的粗细以表示相同的重量,最好根据优先级不同去强调不同的文本。尝试改变文本的粗细,优先级越高的按钮使用最粗体,而优先级的文本则不加粗,这样,按钮文本也有了不同的优先级,用户在阅读这些文字内容的时候就能感知到。

在这个例子中,我把”付款”这个按钮文字使用了粗体,使它变得更加醒目和明亮。”查看购物车”使用了半粗体,”继续购物”使用了中等。所以,按钮文本此时也有了一定的视觉权重。”查看购物车”中的”3项”没有加粗,因为它是补充信息,不代表具体的操作。

5、给高优先级的按钮增加图标

最后一个技巧是一种更加全面的思考,它将使按钮可供盲人使用。色盲的人是无法通过颜色来区分按钮的视觉重量的,他们还需要清晰的视觉符号。

给高优先级的按钮加上一个图标能够起到强调作用而与其他按钮区分开。当用户浏览时,他们往往更关注视觉元素而不是文本。使用图标按钮的方式能够确保引起用户足够的注意力而快速选择到高优先级的按钮。

如果删除了颜色和外框,用户仍然能够识别付款按钮,图标与文本一样,也能够起到说明的作用。

你的按钮设计的直观吗?

如果用户要花很长时间在操作按钮上,或者按钮的点击率很低,那就可能是按钮设计的不够直观。如果遇到了这样的情况,请尝试使用文中所说的这些技巧来优化操作按钮,或许你将会在前后版本中看到非常大的差异。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

让设计更有说服力的20条经典原则:冯·雷斯托夫效应、蔡格尼克记忆效应

雪涛

冯·雷斯托夫效应 Von Restorff Effect

1. 简介说明

理论表述

当存在多个相似的物体时,与众不同的那个更容易被记住。

理论背景

冯·雷斯托夫效应(Von Restorff Effect),也称为隔离效应(Isolation Effect)。1933 年,德国精神病学家、儿科医生 Hedwig Von Restorff 在研究中发现,对被测试者提供一系列相似的项,而只有一项显得特别、孤立、与众不同的时候,这一项往往更容易被记住。

在此之后,对冯·雷斯托夫效应的研究也有进一步的进展,比如从生理学上,大脑对特异点有着更加明显的 ERP(事件相关电位),这或许可以解释特异点更容易回忆的原因;再比如冯·雷斯托夫效应与年龄有着密不可分的联系,老年人对特异点的记忆就没那么深刻。

不管如何,我们还是在频繁地应用着冯·雷斯托夫效应,并能够看到它在视觉设计中卓著的效果。

2. 设计案例

冯·雷斯托夫效应可以应用的场景分成两种:环境差异和经验差异。环境差异是指在空间尺度上做出的差异(同一平面内),而经验差异是指在时间尺度上做出的差异(不同时间点的同一平面),我们来详细聊一聊这两个尺度。

环境差异──获取视觉焦点

也有的文章中会表达为「背景差异」或「情景差异」,这不重要,我们只需要知道这个差异产生的原因:即在相似的周围环境中出现差异。参考百度百科我们来进行一个简单易懂的小实验。

案例1:环境差异小实验

请试图去记住上面那几串字符串。好吧,我放弃了,但如果努力一下,我们就会发现最容易记住的是与周围环境最不一样的那个。第一行是数字「5」,第二行是星号,第三行是红色的字母「F」。

这就是环境差异所带来的识别度与记忆度的提升,也是我们经常能在 UI 设计中所看到的一种有效吸引用户点击的手段。

案例2:起点、大众点评

比如起点希望用户在个人页时去点击「版本测试」按钮,比如大众点评希望强化「订单」按钮的视觉特征以便用户能够更快速地找到,所以在列表中这两者都会长得不太一样。这种区别于环境中的其余功能按钮,为了吸引或暗示用户点击的按钮有一个专门的名字,叫做「Call-to-Action 按钮」(CTA 按钮/行为召唤按钮)。一般来说,CTA 按钮大多会利用冯·雷斯托夫效应的环境差异来达到 Call to action 的目的。

经验差异──强化时间特征

与用户过往的经验或记忆做出差异,叫做经验差异。这种差异可以放大时间点的特征,使用户对差异所在的时间点记忆更深。

案例3:google doodles

我们都知道 google 会在一些比较特殊的日子改变 logo 的设计,给 logo 加上一些非常有趣的涂鸦,与平时的 logo 做出差异,就是为了利用经验差异使用户在记忆中强化时间特征,更好地记住这个时间点。

记住时间点有什么好处呢?比如 Google 可能是为了传播世界上那么多有意义的节日,也带给公司一种具备着人文关怀的气质。再比如淘宝、京东和 Steam,在「双11」、「618」、「圣诞特卖」一定会改变主页的设计,就是为了让用户记住这几个被创造出来的节日,好让大家每年这个时候都心甘情愿地剁手。

3. 注意事项

注意点1:所有都不一样 = 所有都一样

页面中的特异点终归只能属于少数,如果整个页面所有元素都想做得不一样,都想突出,那不仅没办法突出任何一项,页面的整体视觉都将崩溃。

反面案例1:新手常常会陷入什么都想突出,但什么都不能突出的境地

注意点2:把差异放在该放的地方

当用户被特异的那一个点吸引的时候,对其他的注意力就将下降,这是冯·雷斯托夫效应天然的副作用。我们能做的就是把特异点放在最关键的地方,而不是次要的地方,这样副作用就不会太过影响体验。

反面案例2:闲鱼、虎课的退出登录按钮

前几年我们经常能看到这样的退出登录按钮,使用高饱和红色的背景,成为了这一页最亮的那个按钮。之前我们基于「警示用户谨慎按下」的理由,将退出登录按钮做成最具警示意义的红色,但是你看,一旦我们这么做了,这个按钮就成了页面中最不一样的那个,强势地拿下「Call to action」的大旗,时时刻刻都在散发着快来按我的气息,这显然与我们「不希望用户随意退出登录」的意愿相违背。所以,我们现在去看微信、QQ 这些巨头应用,都已经把退出登录按钮的差异做到最小,甚至没有差异,就是基于上述的考量。

4. 小结
  • 利用环境差异让元素快速获得视觉焦点;
  • 利用经验差异使用户记住特殊的时间点;
  • 一页中不能做太多差异化设计,得做到关键的元素上。

蔡格尼克记忆效应

1. 简介说明

理论表述

人们对未完成任务的记忆比已完成的更深刻。

理论背景

Bluma Wulfovna Zeigarnik,前苏联心理学家和精神病理学家。她的导师首先注意到了餐厅服务员能够很好地记住未付账单,但是却无法记住已付账单的更多细节,针对这种现象,她进行了更加深入的研究。在研究中,她发现了人存在一种天生的,做事有始有终的驱动力,这种驱动力使得人们对还没有完成的任务念念不忘,而对已经做完的任务印象不深。

蔡格尼克效应被用于证明格式塔现象不仅在感知中普遍存在,在认知中也是如此。勒温的场论给出了一种解释:一项任务被启动之后人会形成一种处于紧张状态的场,这会增强对所有与该任务相关信息的认知;任务完成后紧张的状态就会得到缓解。

注:勒温的场论(Lewin’s Field Theory)是格式塔心理学的一条分支,该理论受现代物理学场论的影响颇深,认为人在认知过程中大脑会形成一种场,这个场影响着人的感官信息的处理。

2. 设计案例

对未显示完全的信息设置「悬念」

在文字较多的组件中我们时常能看到这样的一个符号出现:「…」,这个符号用于表示文字信息未显示完全,点开可以看到完整的信息。

案例1:新草、bilibili

就是这个小小的符号,时刻提醒着我们当前所显示的信息并不完整,吸引着我们点开它继续看下去,旁边还伴随着「全部」、「展开」等词都是为了强化这一特征。

当然,不止如此,Web 端也会出现文章显示不完全的情况。

案例2:知乎、简书 web 版

通过这种方式,激发用户继续往后看,产生把文章完整看结束的驱动力。

提醒用户任务还未完成

如果一个任务存在多个步骤,那么在任务结束之前应该用某种形式(比如进度条)提醒用户任务还没完成,这能够激发用户完成任务的欲望。

案例3:多邻国

在选择和测试过程中,顶部都会出现一条进度条清晰地表达着目前任务还没完成,进行到了哪一步。在这样的提示之下,用户会有更大的动力去完成整个任务流程。

有效的任务激励

越来越多的应用(尤其是技能学习类应用)开始对学习进程进行更细致的任务分解,然后利用蔡格尼克效应的影响对用户的学习进程进行激励。

案例4:Drops

在任务进行中始终展示任务的完成进度,任务完成之后会有对应的完成提示,并且可以获得勋章/成就之类的小物件儿。也包括很多番茄类应用、习惯养成类应用,都会有类似的设计,比如 Eggzy、Forest、美妙激励等等,都是通过这种方式激励用户完成自己的目标的。我们可以从中看到蔡格尼克记忆效应发挥着不可或缺的作用,正是我们追求有始有终的驱动力,在进度条的提醒下才能一步步完成目标任务。

3. 注意事项

注意点1:任务已完成同样需要提醒

另一方面,已完成的任务同样需要给予用户相应的提示,不然用户会感到压力,会困惑自己到底有没有做完这件事,这样紧张的情绪将会一直存在,而紧张过后就是不安和不信任。

反面案例1:起点任务结束没有反馈

起点的新手任务是我最近遇到的一件特糟心的事儿。我明明已经完成了「添加一部作品到书架」的操作却没有任何完成的提示,甚至我不知道自己究竟有没有完成。明明做完了,却依然显示着「去完成」,是还有隐藏条件没做到?还是我加的那本书不算?还是必须要两个任务一起做完才算完成?还是我没氪金不让我完成?还是纯粹的 bug?我不知道,用户不知道,或许只有产品团队的人才知道。

所以,如果已完成的任务没有给予用户合理的提示或者反馈,这样的体验是很差的。

注意点2:避免过分强迫

过长的进度条会给人形成压迫,进度极其缓慢的任务,或者长时间完不成一项任务会让用户产生挫败感,对完成整个任务来说尤为不利。

反面案例2:百词斩让人绝望的进度条

192/6270,相信这个进度不仅仅是让我,让所有看到的人都感到窒息和绝望。我并不是在为我的拖延症找借口。我想表达的是,这种超长的进度条和超缓慢的任务进度,每天 50 个单词也就是进度条每天推进 0.8%,不足 1%,对用户形成的压力是巨大的,过长的任务周期也会让用户快速失去信心。

4. 小结
  • 利用「未完成」的可视化意象对用户形成激励;
  • 已完成的任务同样需要提示;
  • 拆分任务进度,避免形成过分强迫。

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档