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