如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里
這個(gè)問題是解決基于 vue 和 electron 的開發(fā)中使用 vuex 的 dispatch 無效的問題，即解決了 Please, don't use direct commit's, use dispatch instead of this. 問題。
先允許我梳理一下目錄結(jié)構(gòu)，以便閱讀的時(shí)候不會(huì)一頭霧水，你到底說的這個(gè)文件是哪個(gè)……
其中 /src/main 是存放主配置文件的，/src/render 下面有 store、router、components 等。
components 下面就是很多 .vue 文件，router 下面就是一些路由配置的 js 文件和一些攔截器的 js。
關(guān)鍵是 store，store 下面有一個(gè) index.js 的主配置文件 index.js，和一個(gè) modules 文件夾。
index.js 里面寫的是（記住這句話，后面會(huì)用到）：
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/ 下面存放各個(gè)實(shí)體，例如上圖中的 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
然后來看一個(gè) 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 的組件調(diào)用 INCREMENT_MAIN_COUNTER 對計(jì)數(shù)器加 1。
this.$store.commit('INCREMENT_MAIN_COUNTER');
// this.$store.commit('INCREMENT_MAIN_COUNTER', payload);
1
2
如果是一般的 vue，就 OK 了，但是，我遇到了報(bào)錯(cuò)，說，Please, don't use direct commit's, use dispatch instead of this.
那好吧，沒事，不就是不然用 Commit，非要用 Dispatch 嘛，那我就寫一個(gè) Action，里面直接調(diào)用 Mutation，就像這個(gè)樣子：
const actions = {
JUST_INCREASE ({ commit }) {
commit('INCREMENT_MAIN_COUNTER')
}
}
1
2
3
4
5
然而奇怪的事情是，this.$store.dispatch('JUST_INCREASE') 并不能運(yùn)行，沒反應(yīng)，計(jì)數(shù)器還是 0，不能賦值，就像是這個(gè)函數(shù)沒有被執(zhí)行一樣。沒有報(bào)錯(cuò)，沒有任何異常，查也查不出什么問題。
網(wǎng)上的資料似乎也挺少。
折騰了很久，后來發(fā)現(xiàn)是 vuex-electron 里面一個(gè)插件的鍋。
解決方法有兩個(gè)。
方法一：
在 store/index.js 里面，就是上文特別強(qiáng)調(diào)了的那個(gè)文件，去掉 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'
})
這是因?yàn)?vuex-electron 引入了一個(gè)用于多進(jìn)程間共享 Vuex Store 的狀態(tài)的插件。如果沒有多進(jìn)程交互的需求，完全可以不引入這個(gè)插件。
注釋掉以后重啟項(xiàng)目，用 this.$store.commit('XXX') 就可以使用了。
然而，如果需要多進(jìn)程來處理怎么辦？
方法二：
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
這種時(shí)候就不能用第一種方法來解決問題了。
好在文檔也說了，加上一行導(dǎo)入。
找到 /src/main/index.js，在前面加上一句：
import '../renderer/store'
1
之后一切正常，可以使用 Dispatch 來進(jìn)行操作了。
最后還有一個(gè)比較奇怪的問題：
在直接調(diào)用 state 的時(shí)候，這樣寫 this.$store.state.loginStatus 是不行的，會(huì) undefined，必須寫成 this.$store.state.Auth.loginStatus，就像是 this.$store.state.Counter.main 一樣，似乎可以解釋為，不同的模塊不指定名字的話就找不到。
但是，在寫 Dispatch 的時(shí)候又不需要指定名字了，直接 dispatch('changeLoginStatus') 就行了，不然難道不應(yīng)該是也按照 dispatch('Auth/changeLoginStatus') 這樣子來寫嘛……
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里
前天看完大陸畢業(yè)展海報(bào)合集，不少小伙伴大呼看得不夠過癮。為了滿足大家炙熱的求知欲與上進(jìn)心，美丫姐又花足工夫找來了今年港澳臺、日本、歐美等地畢業(yè)展海報(bào)。依舊干貨十足，依舊吐槽猛烈，希望優(yōu)秀如你，能夠看得開心。
首先我們來看看讓人印象最為深刻的優(yōu)秀作品。
渴望自由的金魚
魚缸中的生活再怎么無憂無慮，也攔不住金魚一躍而出的渴望，就像噴薄欲出的創(chuàng)意，就像按捺不住跑出校園的畢業(yè)生。
架著一個(gè)歪斜的棚子，支撐著我們的二十二
猛然撞上了即將踏入社會(huì)的迷茫與不安，臺科大的莘莘學(xué)子鼓起勇氣，向老師詢問著最后一個(gè)問題「老師您看這展廳，供電是不是不太夠？」
伏流
有時(shí)候你以為自己發(fā)現(xiàn)了一股清泉，其實(shí)全是大佬手里玩剩下的，人外有人，天外有天。
喜歡做，肝愿受
其實(shí)大家剛畢業(yè)頭幾年也是這么想的，幾年之后肝還好，頭很冷。
后浪
長江后浪推前浪，后浪還有后后浪。大家都是被時(shí)代的洪流裹挾著前進(jìn)，顯然這屆畢業(yè)生還沒畢業(yè)，已經(jīng)被學(xué)弟學(xué)妹們震得神志不清了。
超人請回答
整個(gè)童年，大人都忙著策劃一個(gè)玩笑，讓孩子天真的相信世界上真的有超人，等到成年之后他們再哈哈大笑「哈哈哈她真的信有超人」，偶有不愿從童真中醒來的人繼續(xù)尋找，你們等著，遲早給你們找來真的超人。
青浪
用各式紋理堆疊表現(xiàn)出了「浪潮」的韻味，既能聯(lián)想到青出于藍(lán)勝于藍(lán)，又有長江后浪推前浪的語境，畫面動(dòng)感，銳意十足，就是不知道早就畢業(yè)的學(xué)長們會(huì)怎么看。
那個(gè)967呢？
找了很久只找到「967=很想你」的說法，但想來不至于借畢業(yè)海報(bào)，發(fā)出「憑什么就我四年沒有戀愛」的吶喊，越不知道就讓人越想知道，竟有一絲等待戈多的意味。
非想非非想
到底是佛光普照大學(xué)畢業(yè)的學(xué)生，還沒出校門，就已經(jīng)參透了甲方的真諦，非想，問他想要什么，說不出來；非非想，卻總能提出一大堆意見。
泛流意識
總說要把意識匯聚成一道洪流，變成一道鐵流，細(xì)想也沒什么不對，畢竟鋼鐵、石頭、血紅細(xì)胞里都含有鐵元素。
靈光乍現(xiàn)
靈光就像這一坨奇妙的東西，摸不著更說不清，出現(xiàn)的時(shí)候總讓人欣喜若狂，定睛一看，可真不是個(gè)東西。
層
明志科技大學(xué)旗下有兩大門派，一派工業(yè)設(shè)計(jì)，一個(gè)視覺傳達(dá)，兩大派的關(guān)系想必是劍拔弩張，一派冷靜沉穩(wěn)，舍我其誰。
眼波
一派浮夸前衛(wèi)，閃瞎人眼。
畫語者
老獵人除了酷愛炫耀獵物，更愛炫耀不離身的老獵槍，情人眼里出西施，用心愛的工具們鋪滿整張海報(bào)，還能有誰比他們更愛這個(gè)行業(yè)。
形象組無能
「海報(bào)做成這樣，都怪老師舉棋不定」，多少年后才突然醒悟，原來老師的猶豫不決，是為讓我享受最后一次任性的機(jī)會(huì)。
輪迴
「誰TM把燈打開了？」。不，是天又亮了。多少優(yōu)秀的作品背后，都是無數(shù)個(gè)日日夜夜的輪回
今宵霓爛
在陳列室打碟，在畢業(yè)展上蹦迪，如果連想都不敢想，那你憑什么認(rèn)為你能改變這世界？
其次是第二梯隊(duì)，雖然不算突出，但也算優(yōu)秀作品。
淘色風(fēng)波
齷齪的語意，來自成人齷齪的內(nèi)心，讓家長面紅耳赤的「淘色風(fēng)波」，不過只是畢業(yè)生們翹課逛展打游戲。
新一代設(shè)計(jì)展
廢掉的第一稿千萬別撕，不然最后出街時(shí)就是這個(gè)鬼樣子。
被……的那五年
科大的畢業(yè)展為什么延期了五年？估計(jì)是地圖畫得太爛，大家花了五年才找到舉辦的地址。
發(fā)聲關(guān)系
「喔」「啊」「曰」，奇了，大家都是紙打印出來的作品，憑什么就你們家海報(bào)有聲音？
生長輪
樹木的年輪記錄著時(shí)光，每當(dāng)有大事發(fā)聲，從年輪中就能看出一二，你看今年新的圈圈它又白又圓。就像學(xué)生們畢業(yè)一樣，腳踏實(shí)地、悄無聲息。
升溫計(jì)畫
溫室效應(yīng)？冰川融化？這些都遠(yuǎn)遠(yuǎn)不夠，沉默四年平淡如水，如果一生一次的畢業(yè)大展再不燥起來，那可就真的畢業(yè)了。
外出取材中
悶在家里一時(shí)爽，一直悶著一直爽？活像躺在盒子里的量產(chǎn)玩具，該出去走走，看下絢麗多彩的世界了。
三角關(guān)系
創(chuàng)意、媒介、受眾，所謂傳媒，正是一場相愛相殺的三角游戲。
零睡時(shí)間
你以為躺在床上就是不思進(jìn)?。坎?，我是在夢里收集創(chuàng)意，一時(shí)的休憩，是為了更好的前進(jìn)。
問HOW
寒窗十?dāng)?shù)載，大人都說不懂就問，步入社會(huì)才知道大家都只能強(qiáng)撐，明明面對奇葩需求，想要大聲反問一句「HOW？」看看癟掉的錢包，只能脫口而出，說一個(gè)「好」。
蹦起來
設(shè)計(jì)水平還沒那么高的時(shí)候，一定記得猥瑣發(fā)育不要太跳。不然，甲方連頭都給你錘爆。
最后是第三梯隊(duì)，先不論好壞，總之看得人迷惑得很。
復(fù)燃
想讓葬愛家族設(shè)計(jì)風(fēng)潮死灰復(fù)燃，甚至風(fēng)靡世界也不是問題，只需簡單一步，把地球表面刷成 QQ 空間那么黑。
扔出去的，頭也不回
扔出去的飛機(jī)稿就別再撿回來了，即使馬糞風(fēng)干后看著像塊巧克力，但只要你一舔就會(huì)發(fā)現(xiàn)，呸，果然還是那堆馬糞。
是生活
懷疑是在暗示黃色比生活更吸引人，但手上又沒啥證據(jù)。
一體兩面
思維定勢是一件很可怕的事情，比如甲方經(jīng)常讓把大象換個(gè)面，覺得不是正面就是反面，可換來換去還是不滿意，就沒想過，甲方要的是橫切面。
藝眼瞬間
好設(shè)計(jì)讓人瞠目結(jié)舌，覺得語言乏力，丑的設(shè)計(jì)也能讓人瞬間語塞，根本說不出丑在哪里。
DNA
看完臺灣大葉大學(xué)官網(wǎng)上的師生風(fēng)采，就能明白這確實(shí)是一所連空氣都飄著直男審美的理工科大學(xué)。
也就不難理解為什么連設(shè)計(jì)系學(xué)生們的畢業(yè)海報(bào)都會(huì)有這么大一股子消毒水味。
記得呼吸
比起上一張工業(yè)設(shè)計(jì)系海報(bào)的冷靜，視覺傳達(dá)系海報(bào)走向了另一個(gè)極端，線條凌亂，張牙舞爪，若不用文字提醒「記得呼吸」，不少觀眾會(huì)因?yàn)檫^于震撼憋死在原地。
跨越
連著領(lǐng)導(dǎo)的修改意見以及刪除線，一齊打印出來的終級作品。
「香港的呢？」抱歉，一張都沒找到。
日本，設(shè)計(jì)強(qiáng)國近鄰日本。今年畢業(yè)展海報(bào)也是頗有看頭，他山之石可以攻玉。
1. 多摩美術(shù)大學(xué)
能順利畢業(yè)的，都是怪物。
2. 武蔵野美術(shù)大學(xué)
感受撲面而來的鄉(xiāng)土氣息。
3. 東京藝術(shù)大學(xué)
這就是設(shè)計(jì)師通宵后倒下的身影。
4. 東京造型大學(xué)
綜合各位老師意見之后的海報(bào)作品。
5. 東京五藝術(shù)大學(xué)聯(lián)合展
「我用圖畫工具都比你畫得好！」「好好好你行你來?！?
6. 倉敷藝術(shù)科學(xué)大學(xué)
「快從樓頂下來，這次真的不改了！」「你們簽字畫押」。
7. 京都精華大學(xué)
學(xué)習(xí)四年，設(shè)計(jì)使我面目扭曲。
8. 京都造型藝術(shù)大學(xué)
套用學(xué)長給的模板，但忘了改日期。
9. 金澤藝術(shù)工業(yè)大學(xué)
金澤大學(xué)深造多年，最拿手的就是往產(chǎn)品上噴金漆。
10. 岡山縣立大學(xué)
讓我看看，誰還沒交畢設(shè)作品。
11.日本桑澤設(shè)計(jì)研究所
我們的展區(qū)在山頂上，請大家參展時(shí)做好御寒準(zhǔn)備。
12. 名古屋藝術(shù)大學(xué)
為了讓畫面更豐富，我放了 267 頂帳篷。
13. 奈良藝術(shù)短期大學(xué)
畢業(yè)考試第一題，畫出任課老師的臉。
14. 文化學(xué)院大學(xué)
反正到時(shí)候大家都是要哭的。
歐美地區(qū)畢業(yè)展海報(bào)內(nèi)容更加現(xiàn)代，但因?yàn)槲幕町愝^大，消化起來相對比較困難，這里就不一一吐槽了，大家自由學(xué)習(xí)。
1. 路易斯安納州藝術(shù)與設(shè)計(jì)學(xué)院
2. 倫敦都會(huì)大學(xué)
3. 美國Art Center
4. 英屬哥倫比亞大學(xué)
5. 美國馬里蘭藝術(shù)學(xué)院
6. 英國皇家藝術(shù)學(xué)院
想不到你這幫濃眉大眼的英國人，也玩「愛滴魔力轉(zhuǎn)圈圈」。
好了，以上就是今天的全部內(nèi)容，誰要是還覺得不過癮，只能老老實(shí)實(shí)等明年新生畢業(yè)了。
總體說來，亞洲地區(qū)文化的多樣化性，還是完勝歐美，這點(diǎn)非常值得欣慰，但是回頭看看大陸畢業(yè)展海報(bào)，又千篇一律到讓人完全開心不起來。總之還是那句老話，革命尚未成功，同志，仍須努力啊。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里
各國的地圖設(shè)計(jì)類參考
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里
最近設(shè)計(jì)群里經(jīng)常有人問起小程序設(shè)計(jì)規(guī)范的問題，雖然官方有提供樣式庫的下載，但是停留在 16 年版，不是的。而設(shè)計(jì)經(jīng)驗(yàn)這部分網(wǎng)絡(luò)上也沒有比較全面的分享，這促使我停下手上的計(jì)劃，加快輸出本篇文章。正好近期剛結(jié)束幾個(gè)小程序項(xiàng)目，總結(jié)下經(jīng)驗(yàn)，并結(jié)合微信小程序的官方設(shè)計(jì)指南，一起分享給大家，希望幫助大家更快速地上手。
隨著 2018 年小程序的迅猛發(fā)展，小程序現(xiàn)已被各大企業(yè)廣泛采用，「觸手可及、用完即走」的用戶體驗(yàn)備受青睞，隨之小程序設(shè)計(jì)也成為設(shè)計(jì)師的必備技能，那在進(jìn)行小程序界面設(shè)計(jì)時(shí)，應(yīng)該如何快速做設(shè)計(jì)？過程中又要注意哪些問題呢？
對于已經(jīng)開發(fā)了 App 的產(chǎn)品，在進(jìn)行小程序設(shè)計(jì)時(shí)需遵守小程序的規(guī)范，同時(shí)要保持小程序界面設(shè)計(jì)與 App 的風(fēng)格統(tǒng)一性。
小程序的「所有頁面」右上角位置，都固定放置了小程序的菜單，在設(shè)計(jì)界面時(shí)需預(yù)留出該區(qū)域空間。
1. 小程序菜單固定樣式
微信提供了深淺兩種配色樣式，以便更好地融合到各種風(fēng)格的頁面中，需注意保持小程序菜單清晰的辨識度。
線上案例：
2. 交互注意事項(xiàng)
如果要在小程序菜單附近放置交互元素，要考慮是否有交互沖突，應(yīng)盡量避免誤觸的可能。
建議開發(fā)者設(shè)計(jì)的自有導(dǎo)航樣式與微信官方小程序菜單樣式保持一定差異，以便區(qū)分。
如上圖，小紅書的自有導(dǎo)航樣式個(gè)人不推崇，理由如下：
微信讀書既有微信線條外框的 DNA，又區(qū)別于官方樣式，是不錯(cuò)的綜合。以上僅限個(gè)人觀點(diǎn)，還需用戶數(shù)據(jù)來客觀驗(yàn)證。
3. 搜索框常見的幾種表現(xiàn)形式
1. 小程序設(shè)計(jì)規(guī)范
頂部標(biāo)簽分頁欄顏色可自定義，一般會(huì)沿用 App 的設(shè)計(jì)風(fēng)格，以保證兩個(gè)平臺的視覺統(tǒng)一性。
2. 常見的幾種表現(xiàn)形式
1. 小程序設(shè)計(jì)規(guī)范
微信有提供小程序的底部標(biāo)簽樣式，建議標(biāo)簽數(shù)量在 2-4 個(gè)適宜。
也可根據(jù)產(chǎn)品需要選擇或者去掉底部標(biāo)簽欄功能。
2. 常見的幾種表現(xiàn)形式
啟動(dòng)頁除品牌 Logo 外，其他元素都由微信統(tǒng)一提供，且不能更改，設(shè)計(jì)師僅需提供 2 倍和 3 倍尺寸的 Logo 即可。
1. 小程序設(shè)計(jì)規(guī)范
全局加載是小程序名稱左側(cè)的加載圖標(biāo)。模態(tài)的加載樣式將覆蓋整個(gè)頁面，由于無法明確告知具體加載的位置或內(nèi)容，可能會(huì)引起用戶的焦慮感，建議謹(jǐn)慎使用。
2. 常用的加載樣式
需告知用戶具體加載的位置形狀，減輕用戶焦慮情緒。
對于沒有開發(fā)App來說，可依據(jù)官方推出的《微信小程序設(shè)計(jì)指南》來設(shè)計(jì)，以確?？焖僭O(shè)計(jì)出符合規(guī)范的小程序。
小程序設(shè)計(jì)應(yīng)遵循友好、、一致的設(shè)計(jì)原則，每個(gè)頁面都應(yīng)有明確的重點(diǎn)，清晰明確地告知用戶身在何處，又可以往何處去，確保用戶在頁面中游刃有余地穿梭而不迷路。
最后，推薦幾個(gè)常用的平臺設(shè)計(jì)網(wǎng)站。
1. BAT各平臺小程序設(shè)計(jì)規(guī)范網(wǎng)站
微信小程序設(shè)計(jì)指南：https://developers.weixin.qq.com/miniprogram/design/
支付寶小程序設(shè)計(jì)規(guī)范：https://docs.alipay.com/mini/design
百度-智能小程序設(shè)計(jì)規(guī)范：
https://smartprogram.baidu.com/docs/design/overview/introduction/
2. 其他常用的設(shè)計(jì)規(guī)范網(wǎng)站
蘋果-人機(jī)界面指南：https://developer.apple.com/design/human-interface-guidelines/
詳細(xì)介紹了 iOS 設(shè)計(jì)規(guī)范，同時(shí)還提供了 UI 設(shè)計(jì)資源下載。
安卓-MD設(shè)計(jì)指南：https://material.io/design/
螞蟻設(shè)計(jì)：https://design.alipay.com/#ds
提供移動(dòng)和 Web 端的設(shè)計(jì)組件，還有設(shè)計(jì)案例和心得的文章供學(xué)習(xí)。
微信樣式庫：https://weui.io/
提供微信內(nèi)的網(wǎng)頁和小程序設(shè)計(jì)規(guī)范。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里
簡介說明1. 理論表述
對于許多事件，大約 80％ 的影響來自 20％ 的原因。
2. 理論背景
1896 年，意大利經(jīng)濟(jì)學(xué)家帕累托出版了《經(jīng)濟(jì)政治學(xué)課程》（Cours d’economie Politique），其中描述了他所觀察到的一些現(xiàn)象，比如意大利 80% 的土地掌握在 20% 的人手中；比如花園里 20% 的豌豆莢產(chǎn)出了 80% 的豌豆。
上世紀(jì) 40 年代，美國一位管理顧問 Joseph M Juran 觀察到一個(gè)在商業(yè)以及生活中普遍存在的現(xiàn)象：在某一過程中，80% 的影響來自于 20% 的投入。他將這一現(xiàn)象以帕累托為名，稱為「帕累托原則」。
80/20 雖然只是一個(gè)相當(dāng)不的數(shù)字，在很多具體情況之下，這個(gè)數(shù)字會(huì)有細(xì)微的波動(dòng)，但這個(gè)數(shù)字背后所蘊(yùn)含的思想或是規(guī)律卻是不變的：更集中的投入將產(chǎn)出大于預(yù)期的結(jié)果。
一般來說，一個(gè) APP 大多擁有幾十上百個(gè)頁面，但是這些頁面并不是用戶都能用到的，有時(shí)候大多數(shù)用戶只會(huì)常用那么幾個(gè)頁面，所以將有限的時(shí)間和精力投入到這些頁面將給你帶來更大的收益。
案例1：網(wǎng)易云音樂的 UI 迭代
最近網(wǎng)易云音樂和蝦米音樂都迎來了大版本更新，UI 也幾乎重新設(shè)計(jì)了一遍，但我們所看到的重設(shè)計(jì)，只局限在那些關(guān)鍵的頁面上，一些次要的頁面基本沒改。比如網(wǎng)易云音樂，首頁這種重中之重的頁面不僅風(fēng)格、排版大改，連產(chǎn)品邏輯都改了（比如快速入口由四個(gè)變?yōu)槲鍌€(gè)，改變了私人 FM 的位置等），但是等級頁這種無關(guān)緊要的頁面，除了頭部的全局性改動(dòng)外，其他地方一點(diǎn)沒變。
那我換個(gè)角度想，如果我們的應(yīng)用已經(jīng)存在了這么多需要花費(fèi)時(shí)間和精力的頁面，現(xiàn)在產(chǎn)品經(jīng)理希望增加另一項(xiàng)需求量小但確實(shí)存在的功能，我們應(yīng)該怎么辦？奧卡姆剃刀指出「如無必要，勿增實(shí)體」，這是我們對此欲增加的功能的終極評判標(biāo)準(zhǔn)。
要知道，頁面中每增加一個(gè)元素，對于用戶體驗(yàn)的影響是巨大的，這意味用戶著需要花費(fèi)額外的時(shí)間去理解新增加的元素是什么；在所有元素中尋找特定的一項(xiàng)又多了一些備選；瀏覽頁面時(shí)的視覺噪聲又多了一些。
所以到底要不要增加這個(gè)功能，關(guān)鍵在于能否很好地控制上述的用戶體驗(yàn)成本，以及后續(xù)的迭代成本。從帕累托原則的語境來看，小眾但是確實(shí)存在的需求大概率不足以產(chǎn)生能夠克服用戶體驗(yàn)損失的收益，哪怕我們投入了一定的精力去做，日常依然無法給它百分之二十以上的關(guān)注去修改，去完善，去迭代，所以這個(gè)功能也大概率不需要增加。
說起帕累托原則就不得不提到長尾模型，長尾模型的分布曲線與帕累托長得很像，但是結(jié)論卻完全相反，長尾模型提醒我們無法忽略那條長長的尾巴的影響，雖然它收益低，但架不住數(shù)量多，比例高。所以我們可以看到「尾巴」所占據(jù)的面積幾乎和「大頭」相當(dāng)。
04 年長尾模型被提出來的時(shí)候，很多人認(rèn)為長尾模型是對帕累托原則的顛覆，諸多例子都側(cè)面佐證了長尾模型的正確性，比如 Google 目前約有一半的生意來自小網(wǎng)站，比如亞馬遜圖書的總盈利中少數(shù)暢銷書占一半，絕大多數(shù)的冷門書占另一半。
聽起來好像很有道理，長尾模型好似在控訴著開發(fā)者不去關(guān)注那些小眾而眾多的瑣碎需求。事實(shí)真的如此嗎？
長尾模型本身隱藏了兩點(diǎn)不可或缺的前置條件，一是尾巴真的要足夠長（小眾需求真的有這么多），二是這么長的尾巴能被用戶發(fā)現(xiàn)。無論哪一點(diǎn)，都建立在海量的用戶資源之上，所以中小型 APP 大多望塵莫及。能夠有余力去關(guān)注長尾模型的大多是用戶量達(dá)到一定規(guī)模的產(chǎn)品，比如之前例子中所舉的 Google、亞馬遜，國內(nèi)的微信、QQ、淘寶、支付寶、京東，這些產(chǎn)品的用戶量足夠多，用戶類型足夠廣，尾巴足夠長，哪怕再隱蔽的功能入口也能擁有不錯(cuò)的曝光度（總會(huì)有用戶發(fā)現(xiàn)它），所以才能發(fā)揮長尾模型的作用。
所以在用戶量達(dá)到 QQ、淘寶的級別之前，長尾模型看看就好，帕累托依然是主要的指導(dǎo)原則。
注意點(diǎn)1：不得不做的需求
雖然我們要將精力放在重要的事情上，但有些功能和標(biāo)識即使對于用戶意義不大，和產(chǎn)品的增長也沒有實(shí)際聯(lián)系，但我們也依舊需要花費(fèi)大量精力投入。最常見的就屬于法律規(guī)定和平臺規(guī)則相關(guān)的需求了。
比如 18 年的大事件，歐盟推行《一般數(shù)據(jù)保護(hù)條例》俗稱「GDPR」，所有國際版的應(yīng)用都需要針對這個(gè)條例對注冊流程做出大改，比如這篇文章介紹的：《GDPR合規(guī)下的 App 產(chǎn)品設(shè)計(jì)——啟動(dòng)頁面和賬號注冊》。
注意點(diǎn)2：最重要的「少數(shù)人」
滿足大多數(shù)用戶的需求是一個(gè)必要條件，但不代表在任何情況下少數(shù)人就是可以被忽略的群體。對于工具化的應(yīng)用而言，真正為應(yīng)用帶來收入和傳播的，恰恰是占比較低的付費(fèi)用戶，可能連 20% 都不到。
在這類應(yīng)用開發(fā)的周期中，前期完成了滿足大多數(shù)用戶的基礎(chǔ)功能，之后更多的精力會(huì)被分配在滿足少數(shù)付費(fèi)用戶的需求上。產(chǎn)品的方向和目標(biāo)都可能隨著不同的時(shí)期發(fā)生變化，帕累托原則是一個(gè)決策工具，但決策方向是需要經(jīng)過我們充分思考以后得到的，切勿盲目地服從一個(gè)指標(biāo)。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里
一位高管在餐巾紙上畫了一個(gè)新的主頁原型來演示她使用和喜歡的網(wǎng)站。一個(gè)開發(fā)人員晚上在公司呆到很晚，并添加了一個(gè)他認(rèn)為很酷的新功能?；蛘弋a(chǎn)品經(jīng)理堅(jiān)持采用與競爭對手相同的設(shè)計(jì)模式。
如果這些故事聽起來很熟悉，那么你并不孤單。大多數(shù)設(shè)計(jì)師都會(huì)收到這種“幫助”。
你的第一直覺可能是以平淡無奇的方式回應(yīng)“不”。但是，一個(gè)用戶體驗(yàn)建議是否來自一個(gè)關(guān)鍵的利益相關(guān)者或項(xiàng)目周邊的人，應(yīng)該仔細(xì)處理。在您做出反應(yīng)之前，請考慮以下步驟：
你的第一反應(yīng)可能是利索地對對方說“不”。但是，無論UX建議是來自關(guān)鍵的利益相關(guān)者還是項(xiàng)目的外圍人員，都應(yīng)該仔細(xì)地處理它。在你做出回應(yīng)之前，考慮以下步驟:
第一步是將消除自己的主觀意識；你可能擁有豐富的設(shè)計(jì)經(jīng)驗(yàn)，但不排除會(huì)有更好的想法。不要僅僅因?yàn)樗窃赑owerPoint文件而不是Photoshop原型中呈現(xiàn)，所以不要認(rèn)為一個(gè)想法是壞的。
觀點(diǎn)的多樣性可以更有效的構(gòu)思：即使提出建議的人缺乏設(shè)計(jì)知識，他們可能會(huì)有不同的專業(yè)知識或經(jīng)驗(yàn)，并且可能會(huì)為您正在嘗試解決的問題帶來寶貴的不同視角。
你如果像設(shè)計(jì)的上帝一樣扼殺了他人的創(chuàng)造力，最終會(huì)導(dǎo)致更糟糕的結(jié)果。
不加考慮就無情地否定別人的想法會(huì)阻礙人們在未來提出其他（有價(jià)值的）想法。即使一個(gè)想法對你來說顯然是錯(cuò)誤的，但請記住，這個(gè)人也試圖讓設(shè)計(jì)變得更好，盡管他可能對“更好”的含義有不同的看法。通過允許他們：
您可能會(huì)發(fā)現(xiàn)，雖然提出的解決方案并不合適，但需要解決的問題很重要。
問問這個(gè)人他的設(shè)計(jì)理念想要達(dá)到什么目標(biāo)。他在考慮不同的用戶群或業(yè)務(wù)需求嗎？繼續(xù)問“什么？”和“為什么？”（可能以不同的方式），直到你明白他考慮的問題及思考方式是什么。
確定建議和問題和好處。即使是一個(gè)壞主意也有一些好處。
例如，在大屏幕版本的網(wǎng)站上使用漢堡包菜單不利于用戶輕松找到導(dǎo)航。這是不使用它的一個(gè)非常重要的原因。然而，桌面上的漢堡也有一個(gè)視覺上吸引人、整潔的標(biāo)題。確認(rèn)想法的成本和收益，以便更準(zhǔn)確地評估權(quán)衡，可以通過不同的方法犧牲或?qū)崿F(xiàn)哪些目標(biāo)。
考慮舉行設(shè)計(jì)原型會(huì)議（一個(gè)設(shè)計(jì)原型會(huì)議是短，會(huì)議期間，團(tuán)隊(duì)成員迅速協(xié)作和草圖設(shè)計(jì)，以探索和分享的設(shè)計(jì)思路廣闊的多樣性），一起觀看用戶研究視頻，或舉辦其他類型的用戶體驗(yàn)工作坊，以便這個(gè)想法的支持者可以繼續(xù)為這項(xiàng)想法解釋。
解釋一下，現(xiàn)在做一個(gè)設(shè)計(jì)決定意味著跳過構(gòu)思、研究和用戶反饋。在理想的情況下，轉(zhuǎn)向設(shè)計(jì)思維過程，為所解決的問題找到正確的解決方案。
根據(jù)您對目標(biāo)用戶及其任務(wù)的了解程度，確定一個(gè)想法的優(yōu)缺點(diǎn)可能需要:
論證該想法的成本可能會(huì)由于潛在的用戶混淆，而導(dǎo)致的用戶體驗(yàn)問題，以及諸如可能延遲發(fā)布其他更重要功能的開發(fā)計(jì)劃中斷等后勤問題。要評估大量想法，請使用對其進(jìn)行優(yōu)先級排序。
如果您評估確定不應(yīng)該實(shí)施該想法，您可以以積極的方式拒絕。
承認(rèn)其貢獻(xiàn)
你不必著急全盤否定，但不要愚蠢的全去試一遍。找到您相信的有關(guān)他們建議的真實(shí)或有效的內(nèi)容，并將其標(biāo)注出來。這可能是這樣的：
由于這些短語之后都會(huì)出現(xiàn)“but”，因此請確保您在所提出的觀點(diǎn)中是真實(shí)的。否則，說它們根本不值得。
分享您的評估理由
當(dāng)人們投入足夠的時(shí)間來提出建議時(shí)，就是幫助他們學(xué)習(xí)更多關(guān)于用戶體驗(yàn)的知識，并在整個(gè)團(tuán)隊(duì)中傳播更多用戶體驗(yàn)知識的理想時(shí)機(jī)。利用這些時(shí)間，交流你評估的理由，而不是僅僅告訴他們一個(gè)“不”。
1. “這種設(shè)計(jì)對于[persona type]用戶可能有意義，因?yàn)樗麄冃枰猍此功能]。但是我們的主要角色可能會(huì)有這個(gè)問題，因?yàn)閇原因]?！?
2. “聽起來你想要解決與重要用戶任務(wù)相關(guān)的[特定客戶投訴]。確定信息的優(yōu)先順序可能會(huì)有所幫助，但要使其更大，顏色不同可能會(huì)導(dǎo)致橫幅失明。我想在第二天做一些調(diào)查，并提出一些替代解決方案的原型?！?
考慮提供原型，案列，設(shè)計(jì)原則，模式或研究發(fā)現(xiàn)，以幫助他們理解為什么一個(gè)設(shè)計(jì)可能會(huì)導(dǎo)致問題，以及為什么不同的設(shè)計(jì)會(huì)更好地工作。把每一次互動(dòng)都看作是灌輸貢獻(xiàn)者設(shè)計(jì)理念的機(jī)會(huì)——這是對未來的一種投資。
當(dāng)客戶或強(qiáng)大的同事發(fā)出特定請求（或要求）時(shí)，即使您給出了解釋，也很難說“不”。但這并不意味著你應(yīng)該放棄自己的觀點(diǎn)并同意有害的建議。相反，與他們討論如何將想法背后的目標(biāo)和資源結(jié)合在一起，而不必直接實(shí)施。
合氣道是一種試圖和平解決沖突的武術(shù)，它依靠轉(zhuǎn)彎和樞軸等動(dòng)作來融合對立的能量。同樣的原則可以應(yīng)用于處理圍繞設(shè)計(jì)的沖突：與其直接拒絕一個(gè)想法，不如同意繼續(xù)探索這個(gè)建議，而不是明確地承諾實(shí)現(xiàn)它。
建議召開一次工作會(huì)議，在會(huì)上你可以提出既能獲得同樣好處又能避免成本的選擇。例如，你可以說:
比優(yōu)雅地轉(zhuǎn)移壞主意更好的方法是主動(dòng)引導(dǎo)合作進(jìn)入更有效的軌道。您可以通過在結(jié)構(gòu)化的、戰(zhàn)略性的時(shí)間（例如預(yù)定的研討會(huì)）尋求輸入，最大限度地利用每個(gè)人的貢獻(xiàn)。這種主動(dòng)的方法減少了在無法有效評估或合并意外更改請求時(shí)感到意外的可能性。
每個(gè)人都對設(shè)計(jì)都自己的看法，這使得UX設(shè)計(jì)師的工作充滿挑戰(zhàn)。有些人總喜歡在界面中添加一些令人困惑的元素，比如原型、這會(huì)影響產(chǎn)品開發(fā)進(jìn)度（可能包含UX迭代），以及那些喜歡設(shè)計(jì)（甚至認(rèn)為自己是設(shè)計(jì)師）但缺乏任何真正的UX設(shè)計(jì)專業(yè)知識的人。
但是，如果您與您的合作者進(jìn)行深入交流，向他們灌輸設(shè)計(jì)理念并引導(dǎo)他們發(fā)揮自己的長處，這種“設(shè)計(jì)幫助”的多樣性將是一種寶貴的資產(chǎn)。
最有成效的用戶體驗(yàn)設(shè)計(jì)師在設(shè)計(jì)過程中會(huì)和許多人合作。他們與各種團(tuán)隊(duì)成員和主要利益相關(guān)者討論業(yè)務(wù)目標(biāo)，發(fā)展機(jī)會(huì)和約束，優(yōu)先級，要求和設(shè)計(jì)理念。這些人來自許多職能團(tuán)體；具有不同的UX專業(yè)知識，想法和思考。
要想成為一名優(yōu)秀的用戶體驗(yàn)設(shè)計(jì)師并創(chuàng)作出優(yōu)秀的設(shè)計(jì)作品，培養(yǎng)必要的溝通技巧來利用這些信息來源和輸入是必不可少的。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里
是能點(diǎn)還是不能點(diǎn)呢？”這是當(dāng)用戶在面對一些操作按鈕時(shí)，大腦中所遲疑的問題。
按鈕越多，做決定的時(shí)間就越長。用戶必須仔細(xì)看每個(gè)按鈕，才能確定哪個(gè)是他們需要的。對于按鈕的任何不確定性，都可能會(huì)導(dǎo)致他們不敢操作或誤操作。
設(shè)計(jì)師可以把按鈕的優(yōu)先級設(shè)計(jì)的更加直觀以減少這樣的情況發(fā)生。當(dāng)用戶注意到哪個(gè)按鈕與他們的任務(wù)目標(biāo)更契合時(shí)，就能幫助他們快速做出決定。這篇文章就是介紹一些這樣的設(shè)計(jì)技巧，通過簡單的調(diào)整使得按鈕變得更加直觀有效。
在App中，一個(gè)常見錯(cuò)誤就是按鈕的排列順序偏離了用戶的閱讀習(xí)慣。他們將優(yōu)先級最高的按鈕放在最前面，期望用戶能首先注意到它。但其實(shí)只要按鈕足夠突出，視覺分量夠重，用戶就會(huì)注意到它，而無視它的排列順序。
按鈕順序不是為了提供可視性，而是為了要提率。在最前面放高優(yōu)先級的按鈕會(huì)導(dǎo)致用戶自上而下的閱讀習(xí)慣被打斷，看到按鈕后還會(huì)繼續(xù)閱讀下面的文字，然后再回過頭來找前面的按鈕進(jìn)行操作。
不要讓用戶返回再次檢查按鈕，而是讓他們以自然的閱讀習(xí)慣看完所有的內(nèi)容后，按視覺比重快速進(jìn)行選擇。
通過將優(yōu)先級高的按鈕放在底部，讓它處于視覺阻力最小的路徑上，這使得這個(gè)按鈕可以更有效率的被點(diǎn)擊。此外，底部位置是手指最容易達(dá)到的區(qū)域，這進(jìn)一步提高了效率。
App上的另一個(gè)錯(cuò)誤是只使用文字來表示按鈕。設(shè)計(jì)師使用文字按鈕來表示優(yōu)先級較低的操作。但是對于用戶來說，這是一個(gè)糟糕的選擇，因?yàn)榧兾谋緵]有一個(gè)按鈕的外觀，這可能導(dǎo)致用戶會(huì)忽略了這些操作。
純文本按鈕會(huì)讓用戶遲疑到底是按鈕還是內(nèi)容，從而造成混淆。這種不確定性可能會(huì)導(dǎo)致他們直接跳過這些按鈕。
純文本按鈕不僅讓人感到疑惑，在操作上也不容易點(diǎn)擊。將文本內(nèi)容放在按鈕框中，可以使得按鈕更容易被點(diǎn)擊和注意到。
與純文本相比，描邊形式的按鈕是降低優(yōu)先級的更好方法。它們使每個(gè)選項(xiàng)都易于識別，以便用戶能選擇他們所期望的目標(biāo)。
高優(yōu)先級的按鈕應(yīng)該是最容易被識別到的，它是直接指向用戶最需要的目標(biāo)操作。如果不確定優(yōu)先級，請考慮哪些操作會(huì)使得用戶朝著目標(biāo)前進(jìn)，哪些操作會(huì)使得用戶回退。
在這個(gè)例子中，”付款”具有更高的優(yōu)先級，因?yàn)樗槕?yīng)著用戶的目標(biāo)流程。但不大清楚”查看購物車”還是”繼續(xù)購買”的優(yōu)先級是如何。
“查看購物車”操作讓用戶查看已經(jīng)在購物車的商品，然后繼續(xù)結(jié)賬?！崩^續(xù)購物”操作將用戶帶回到遠(yuǎn)離結(jié)賬的產(chǎn)品頁面。
通過思考這些操作，可以清楚的看到”查看購物車”具有中等優(yōu)先級，而”繼續(xù)購物”具有較低的優(yōu)先級。判斷的理由是哪些操作使用戶朝著他們的目標(biāo)前進(jìn)，哪些操作使他們遠(yuǎn)離目標(biāo)。
前進(jìn)的操作總是會(huì)比回退的操作優(yōu)先級更高，因此，它們應(yīng)該被設(shè)計(jì)地有更強(qiáng)的視覺重量和更高的顏色對比度。
顏色是一種增加按鈕權(quán)重的有效方法，因?yàn)樗鼜奈谋绢伾忻摲f而出，吸引了用戶的注意力。當(dāng)按鈕的顏色與文本的顏色相同時(shí)，提示性就沒有那么強(qiáng)了。為優(yōu)先級更高的按鈕使用不同的顏色來輔助用戶進(jìn)行快速?zèng)Q策。
如果對每個(gè)不同優(yōu)先級按鈕使用相同的顏色，用戶將不知道哪個(gè)優(yōu)先級更高。而使用不同的顏色只會(huì)讓用戶更加困惑，不知道這些顏色到底意味著什么。不僅如此，每個(gè)按鈕使用不同顏色，還會(huì)讓視覺權(quán)重重新變得一樣。
秘訣就在于使用相同的色相顏色，但改變飽和度和亮度就能改變這個(gè)按鈕的優(yōu)先級了，使得它比高優(yōu)先級的按鈕更輕?，F(xiàn)在按鈕的視覺比重有了區(qū)分，一下子就變得清晰了很多。
為了增加對比度，可以使用反色。在主按鈕的深色背景上使用淺色文本，而在中等優(yōu)先級按鈕上使用淺色文本。這樣就使得高優(yōu)先級的按鈕具有最亮的文本和最強(qiáng)的對比度。
用之前說的幾個(gè)方法，已經(jīng)足以區(qū)分優(yōu)先級，但還可以做的更好。每個(gè)按鈕設(shè)計(jì)的越直觀，讓用戶的思考就越少。
在每個(gè)按鈕文本上使用相同的粗細(xì)以表示相同的重量，最好根據(jù)優(yōu)先級不同去強(qiáng)調(diào)不同的文本。嘗試改變文本的粗細(xì)，優(yōu)先級越高的按鈕使用最粗體，而優(yōu)先級的文本則不加粗，這樣，按鈕文本也有了不同的優(yōu)先級，用戶在閱讀這些文字內(nèi)容的時(shí)候就能感知到。
在這個(gè)例子中，我把”付款”這個(gè)按鈕文字使用了粗體，使它變得更加醒目和明亮。”查看購物車”使用了半粗體，”繼續(xù)購物”使用了中等。所以，按鈕文本此時(shí)也有了一定的視覺權(quán)重?！辈榭促徫镘嚒敝械摹?項(xiàng)”沒有加粗，因?yàn)樗茄a(bǔ)充信息，不代表具體的操作。
最后一個(gè)技巧是一種更加全面的思考，它將使按鈕可供盲人使用。色盲的人是無法通過顏色來區(qū)分按鈕的視覺重量的，他們還需要清晰的視覺符號。
給高優(yōu)先級的按鈕加上一個(gè)圖標(biāo)能夠起到強(qiáng)調(diào)作用而與其他按鈕區(qū)分開。當(dāng)用戶瀏覽時(shí)，他們往往更關(guān)注視覺元素而不是文本。使用圖標(biāo)按鈕的方式能夠確保引起用戶足夠的注意力而快速選擇到高優(yōu)先級的按鈕。
如果刪除了顏色和外框，用戶仍然能夠識別付款按鈕，圖標(biāo)與文本一樣，也能夠起到說明的作用。
如果用戶要花很長時(shí)間在操作按鈕上，或者按鈕的點(diǎn)擊率很低，那就可能是按鈕設(shè)計(jì)的不夠直觀。如果遇到了這樣的情況，請嘗試使用文中所說的這些技巧來優(yōu)化操作按鈕，或許你將會(huì)在前后版本中看到非常大的差異。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)
理論表述
當(dāng)存在多個(gè)相似的物體時(shí)，與眾不同的那個(gè)更容易被記住。
理論背景
馮·雷斯托夫效應(yīng)（Von Restorff Effect），也稱為隔離效應(yīng)（Isolation Effect）。1933 年，德國精神病學(xué)家、兒科醫(yī)生 Hedwig Von Restorff 在研究中發(fā)現(xiàn)，對被測試者提供一系列相似的項(xiàng)，而只有一項(xiàng)顯得特別、孤立、與眾不同的時(shí)候，這一項(xiàng)往往更容易被記住。
在此之后，對馮·雷斯托夫效應(yīng)的研究也有進(jìn)一步的進(jìn)展，比如從生理學(xué)上，大腦對特異點(diǎn)有著更加明顯的 ERP（事件相關(guān)電位），這或許可以解釋特異點(diǎn)更容易回憶的原因；再比如馮·雷斯托夫效應(yīng)與年齡有著密不可分的聯(lián)系，老年人對特異點(diǎn)的記憶就沒那么深刻。
不管如何，我們還是在頻繁地應(yīng)用著馮·雷斯托夫效應(yīng)，并能夠看到它在視覺設(shè)計(jì)中卓著的效果。
馮·雷斯托夫效應(yīng)可以應(yīng)用的場景分成兩種：環(huán)境差異和經(jīng)驗(yàn)差異。環(huán)境差異是指在空間尺度上做出的差異（同一平面內(nèi)），而經(jīng)驗(yàn)差異是指在時(shí)間尺度上做出的差異（不同時(shí)間點(diǎn)的同一平面），我們來詳細(xì)聊一聊這兩個(gè)尺度。
環(huán)境差異──獲取視覺焦點(diǎn)
也有的文章中會(huì)表達(dá)為「背景差異」或「情景差異」，這不重要，我們只需要知道這個(gè)差異產(chǎn)生的原因：即在相似的周圍環(huán)境中出現(xiàn)差異。參考百度百科我們來進(jìn)行一個(gè)簡單易懂的小實(shí)驗(yàn)。
案例1：環(huán)境差異小實(shí)驗(yàn)
請?jiān)噲D去記住上面那幾串字符串。好吧，我放棄了，但如果努力一下，我們就會(huì)發(fā)現(xiàn)最容易記住的是與周圍環(huán)境最不一樣的那個(gè)。第一行是數(shù)字「5」，第二行是星號，第三行是紅色的字母「F」。
這就是環(huán)境差異所帶來的識別度與記憶度的提升，也是我們經(jīng)常能在 UI 設(shè)計(jì)中所看到的一種有效吸引用戶點(diǎn)擊的手段。
案例2：起點(diǎn)、大眾點(diǎn)評
比如起點(diǎn)希望用戶在個(gè)人頁時(shí)去點(diǎn)擊「版本測試」按鈕，比如大眾點(diǎn)評希望強(qiáng)化「訂單」按鈕的視覺特征以便用戶能夠更快速地找到，所以在列表中這兩者都會(huì)長得不太一樣。這種區(qū)別于環(huán)境中的其余功能按鈕，為了吸引或暗示用戶點(diǎn)擊的按鈕有一個(gè)專門的名字，叫做「Call-to-Action 按鈕」（CTA 按鈕/行為召喚按鈕）。一般來說，CTA 按鈕大多會(huì)利用馮·雷斯托夫效應(yīng)的環(huán)境差異來達(dá)到 Call to action 的目的。
經(jīng)驗(yàn)差異──強(qiáng)化時(shí)間特征
與用戶過往的經(jīng)驗(yàn)或記憶做出差異，叫做經(jīng)驗(yàn)差異。這種差異可以放大時(shí)間點(diǎn)的特征，使用戶對差異所在的時(shí)間點(diǎn)記憶更深。
案例3：google doodles
我們都知道 google 會(huì)在一些比較特殊的日子改變 logo 的設(shè)計(jì)，給 logo 加上一些非常有趣的涂鴉，與平時(shí)的 logo 做出差異，就是為了利用經(jīng)驗(yàn)差異使用戶在記憶中強(qiáng)化時(shí)間特征，更好地記住這個(gè)時(shí)間點(diǎn)。
記住時(shí)間點(diǎn)有什么好處呢？比如 Google 可能是為了傳播世界上那么多有意義的節(jié)日，也帶給公司一種具備著人文關(guān)懷的氣質(zhì)。再比如淘寶、京東和 Steam，在「雙11」、「618」、「圣誕特賣」一定會(huì)改變主頁的設(shè)計(jì)，就是為了讓用戶記住這幾個(gè)被創(chuàng)造出來的節(jié)日，好讓大家每年這個(gè)時(shí)候都心甘情愿地剁手。
注意點(diǎn)1：所有都不一樣 = 所有都一樣
頁面中的特異點(diǎn)終歸只能屬于少數(shù)，如果整個(gè)頁面所有元素都想做得不一樣，都想突出，那不僅沒辦法突出任何一項(xiàng)，頁面的整體視覺都將崩潰。
反面案例1：新手常常會(huì)陷入什么都想突出，但什么都不能突出的境地
注意點(diǎn)2：把差異放在該放的地方
當(dāng)用戶被特異的那一個(gè)點(diǎn)吸引的時(shí)候，對其他的注意力就將下降，這是馮·雷斯托夫效應(yīng)天然的副作用。我們能做的就是把特異點(diǎn)放在最關(guān)鍵的地方，而不是次要的地方，這樣副作用就不會(huì)太過影響體驗(yàn)。
反面案例2：閑魚、虎課的退出登錄按鈕
前幾年我們經(jīng)常能看到這樣的退出登錄按鈕，使用高飽和紅色的背景，成為了這一頁最亮的那個(gè)按鈕。之前我們基于「警示用戶謹(jǐn)慎按下」的理由，將退出登錄按鈕做成最具警示意義的紅色，但是你看，一旦我們這么做了，這個(gè)按鈕就成了頁面中最不一樣的那個(gè)，強(qiáng)勢地拿下「Call to action」的大旗，時(shí)時(shí)刻刻都在散發(fā)著快來按我的氣息，這顯然與我們「不希望用戶隨意退出登錄」的意愿相違背。所以，我們現(xiàn)在去看微信、QQ 這些巨頭應(yīng)用，都已經(jīng)把退出登錄按鈕的差異做到最小，甚至沒有差異，就是基于上述的考量。
理論表述
人們對未完成任務(wù)的記憶比已完成的更深刻。
理論背景
Bluma Wulfovna Zeigarnik，前蘇聯(lián)心理學(xué)家和精神病理學(xué)家。她的導(dǎo)師首先注意到了餐廳服務(wù)員能夠很好地記住未付賬單，但是卻無法記住已付賬單的更多細(xì)節(jié)，針對這種現(xiàn)象，她進(jìn)行了更加深入的研究。在研究中，她發(fā)現(xiàn)了人存在一種天生的，做事有始有終的驅(qū)動(dòng)力，這種驅(qū)動(dòng)力使得人們對還沒有完成的任務(wù)念念不忘，而對已經(jīng)做完的任務(wù)印象不深。
蔡格尼克效應(yīng)被用于證明格式塔現(xiàn)象不僅在感知中普遍存在，在認(rèn)知中也是如此。勒溫的場論給出了一種解釋：一項(xiàng)任務(wù)被啟動(dòng)之后人會(huì)形成一種處于緊張狀態(tài)的場，這會(huì)增強(qiáng)對所有與該任務(wù)相關(guān)信息的認(rèn)知；任務(wù)完成后緊張的狀態(tài)就會(huì)得到緩解。
注：勒溫的場論（Lewin’s Field Theory）是格式塔心理學(xué)的一條分支，該理論受現(xiàn)代物理學(xué)場論的影響頗深，認(rèn)為人在認(rèn)知過程中大腦會(huì)形成一種場，這個(gè)場影響著人的感官信息的處理。
對未顯示完全的信息設(shè)置「懸念」
在文字較多的組件中我們時(shí)常能看到這樣的一個(gè)符號出現(xiàn)：「…」，這個(gè)符號用于表示文字信息未顯示完全，點(diǎn)開可以看到完整的信息。
案例1：新草、bilibili
就是這個(gè)小小的符號，時(shí)刻提醒著我們當(dāng)前所顯示的信息并不完整，吸引著我們點(diǎn)開它繼續(xù)看下去，旁邊還伴隨著「全部」、「展開」等詞都是為了強(qiáng)化這一特征。
當(dāng)然，不止如此，Web 端也會(huì)出現(xiàn)文章顯示不完全的情況。
案例2：知乎、簡書 web 版
通過這種方式，激發(fā)用戶繼續(xù)往后看，產(chǎn)生把文章完整看結(jié)束的驅(qū)動(dòng)力。
提醒用戶任務(wù)還未完成
如果一個(gè)任務(wù)存在多個(gè)步驟，那么在任務(wù)結(jié)束之前應(yīng)該用某種形式（比如進(jìn)度條）提醒用戶任務(wù)還沒完成，這能夠激發(fā)用戶完成任務(wù)的欲望。
案例3：多鄰國
在選擇和測試過程中，頂部都會(huì)出現(xiàn)一條進(jìn)度條清晰地表達(dá)著目前任務(wù)還沒完成，進(jìn)行到了哪一步。在這樣的提示之下，用戶會(huì)有更大的動(dòng)力去完成整個(gè)任務(wù)流程。
有效的任務(wù)激勵(lì)
越來越多的應(yīng)用（尤其是技能學(xué)習(xí)類應(yīng)用）開始對學(xué)習(xí)進(jìn)程進(jìn)行更細(xì)致的任務(wù)分解，然后利用蔡格尼克效應(yīng)的影響對用戶的學(xué)習(xí)進(jìn)程進(jìn)行激勵(lì)。
案例4：Drops
在任務(wù)進(jìn)行中始終展示任務(wù)的完成進(jìn)度，任務(wù)完成之后會(huì)有對應(yīng)的完成提示，并且可以獲得勛章/成就之類的小物件兒。也包括很多番茄類應(yīng)用、習(xí)慣養(yǎng)成類應(yīng)用，都會(huì)有類似的設(shè)計(jì)，比如 Eggzy、Forest、美妙激勵(lì)等等，都是通過這種方式激勵(lì)用戶完成自己的目標(biāo)的。我們可以從中看到蔡格尼克記憶效應(yīng)發(fā)揮著不可或缺的作用，正是我們追求有始有終的驅(qū)動(dòng)力，在進(jìn)度條的提醒下才能一步步完成目標(biāo)任務(wù)。
注意點(diǎn)1：任務(wù)已完成同樣需要提醒
另一方面，已完成的任務(wù)同樣需要給予用戶相應(yīng)的提示，不然用戶會(huì)感到壓力，會(huì)困惑自己到底有沒有做完這件事，這樣緊張的情緒將會(huì)一直存在，而緊張過后就是不安和不信任。
反面案例1：起點(diǎn)任務(wù)結(jié)束沒有反饋
起點(diǎn)的新手任務(wù)是我最近遇到的一件特糟心的事兒。我明明已經(jīng)完成了「添加一部作品到書架」的操作卻沒有任何完成的提示，甚至我不知道自己究竟有沒有完成。明明做完了，卻依然顯示著「去完成」，是還有隱藏條件沒做到？還是我加的那本書不算？還是必須要兩個(gè)任務(wù)一起做完才算完成？還是我沒氪金不讓我完成？還是純粹的 bug？我不知道，用戶不知道，或許只有產(chǎn)品團(tuán)隊(duì)的人才知道。
所以，如果已完成的任務(wù)沒有給予用戶合理的提示或者反饋，這樣的體驗(yàn)是很差的。
注意點(diǎn)2：避免過分強(qiáng)迫
過長的進(jìn)度條會(huì)給人形成壓迫，進(jìn)度極其緩慢的任務(wù)，或者長時(shí)間完不成一項(xiàng)任務(wù)會(huì)讓用戶產(chǎn)生挫敗感，對完成整個(gè)任務(wù)來說尤為不利。
反面案例2：百詞斬讓人絕望的進(jìn)度條
192/6270，相信這個(gè)進(jìn)度不僅僅是讓我，讓所有看到的人都感到窒息和絕望。我并不是在為我的拖延癥找借口。我想表達(dá)的是，這種超長的進(jìn)度條和超緩慢的任務(wù)進(jìn)度，每天 50 個(gè)單詞也就是進(jìn)度條每天推進(jìn) 0.8%，不足 1%，對用戶形成的壓力是巨大的，過長的任務(wù)周期也會(huì)讓用戶快速失去信心。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://sillybuy.com