先問你一個問題。
拼多多、淘寶、京東這三家購物平臺,你認(rèn)為它們的區(qū)別是什么?
或者換個方式問你。
買電器你去哪個平臺?
買衣服你去哪個平臺? 買垃圾袋你去哪個平臺?
是不是有了答案了?
沒猜錯的話, 大部分人的答案是:買電器去京東、買衣服去淘寶、買垃圾袋去拼多多。
你看,這就是一個購物心智模型,你的心里對這三家平臺已經(jīng)產(chǎn)生了固有的心智,如果讓你去京東買衣服,你會不會覺得,有些別扭?
沒錯,這就是心智模型。
百度百科對心智模型的定義是:
“深植我們心中關(guān)于我們自己、別人、組織及周圍世界每個層面的假設(shè)、形象和故事。并深受習(xí)慣思維、定勢思維、已有知識的局限?!?br />
關(guān)鍵詞是:故事、習(xí)慣、局限。
淘寶一開始就我們講了一個故事,一個萬能的集市,我們習(xí)慣在上面買衣服,但是也產(chǎn)生了局限性,那就是,當(dāng)我們想買大額電器的時候,還是會選擇京東。
我個人對心智模型的理解是:
我們內(nèi)心深處對一個事物的看法。
空口聊天多沒意思,下面舉個例子。
這是一尊陶俑,第一眼你覺得她像什么?
是不是覺得像米老鼠?
為什么?
因?yàn)樘召傅念^上的發(fā)髻和米老鼠標(biāo)志性的耳朵很像。
如果你從沒見過米老鼠,你還會覺得她像米老鼠嗎?
一定不會。
這就是心智模型,你對頭頂?shù)拇髨A形的心智是“米老鼠”,所以一旦你看到類似的形狀,米老鼠的形象就會浮現(xiàn)出來,這個發(fā)髻的形狀和你心里對米老鼠的形象產(chǎn)生了匹配。
對心智模型有沒有一點(diǎn)印象了?
下面我們接著聊。
我不想用具體的界面來聊,那樣的話太散,我認(rèn)為要想理解一個概念,最好還是從“面”的角度來說,所以下面我會舉一些商業(yè)上的案例來輔助理解。
心智模型有哪三種運(yùn)用方式?
第一種:創(chuàng)建新的心智模型
第二種:改變舊的心智模型
第三種:匹配現(xiàn)有的心智模型
可以理解成一件事情的新生、改變和延續(xù)。
下面咱們一個個來。
第一種:創(chuàng)建新的心智模型
難度指數(shù):難啊。
記得《盜夢空間》里最難的是什么嗎?
最難的不是盜夢,而是植入一個想法。
創(chuàng)建新的心智模型有異曲同工之妙,都是讓別人內(nèi)心接收一個事物,需要刻意培養(yǎng)。
舉幾個例子。
當(dāng)年外賣剛開始的時候,家家搞補(bǔ)貼,很多時候幾乎不花錢就可以點(diǎn)外賣,后來這些福利沒有了,為啥?
因?yàn)辄c(diǎn)外賣的心智已經(jīng)培養(yǎng)好了,你離不開它了,所以平臺可以“不慣著你了”。
還有唯品會的正品低價、瑞幸一開始的星巴克平替,這些都是他們想要植入到用戶大腦中的心智。
為什么要費(fèi)勁植入一個新的想法?
因?yàn)橐坏┲踩肓?,就很難改變。
現(xiàn)在我身邊的很多朋友想買一些低價的品牌都會上唯品會,買咖啡會喝瑞幸,一旦用戶的習(xí)慣養(yǎng)成就很難改變,意味著什么?
意味著留存和轉(zhuǎn)化的成本更低了。
第二種:改變舊的心智模型
難度指數(shù):也難。
《盜夢空間》里小李子的妻子被他植入了一個想法“你不在現(xiàn)實(shí)世界里”,當(dāng)他和他妻子回到現(xiàn)實(shí)世界后,他妻子仍舊認(rèn)為自己不在現(xiàn)實(shí)世界里,這個被植入的想法已經(jīng)根深蒂固,很難改變。
所以改變舊的心智也不簡單。
例如小米最初主打極致性價比,后來想往高端路線走,很難,大家心里已經(jīng)認(rèn)準(zhǔn)了小米就是“性價比之王”,也就是你的產(chǎn)品不僅要好還要便宜。
這就導(dǎo)致小米一漲價,大家就罵他們忘了初心……所以小米拆分出了紅米主攻性價比,小米往高端發(fā)展,但是仍舊很難。
拼多多的百億補(bǔ)貼也是一樣的道理,一開始的砍一刀深入人心,大家對拼多多的心智已經(jīng)成型:便宜,質(zhì)量一般。拼多多想改變這個心智,推出百億補(bǔ)貼,并承諾假一賠十,就是想告訴大家,我拼多多,也是有正品好貨的。不過,效果嘛,見仁見智。
第三種:匹配現(xiàn)有的心智模型
難度指數(shù):相對簡單。
其實(shí)匹配現(xiàn)有的心智模型,是相對最簡單的方法,市場已經(jīng)幫你把用戶習(xí)慣培養(yǎng)好了,你直接使用,那肯定事半功倍,省時省力啊。
舉個例子,大家最近有關(guān)注小米的 13 Ultra 嗎?
小米和徠卡聯(lián)合研發(fā)的,主打徠卡調(diào)色的相機(jī)。
我有一個同事就直接把手里的微單換成了 13 Ultra ,因?yàn)榕恼兆銐蚝每炊冶銛y。
這里不是要推銷手機(jī)啊,是想讓你們了解 13 Ultra 是個什么東西。
然后給大家看看它的手柄(一個配角,可以拆卸)。
是不是有些熟悉?
和相機(jī)像不像?
這個手柄就是沿用了相機(jī)的心智模式。
小結(jié)一下:
心智模型有3種用法:
新建:創(chuàng)建新的心智模型
改變:改變舊的心智模型
延續(xù):匹配現(xiàn)有的心智模型
下面聊聊,咱們怎么做才能更加匹配用戶的心智模型?
同樣的,我不會拿具體頁面來舉例,還是希望把思考方式分享給大家,而不是某一個頁面的設(shè)計。
要想匹配用戶的心智模型其實(shí)就三步:
了解業(yè)務(wù)、了解用戶、競品調(diào)研。
或者可以這么說, 在懂業(yè)務(wù)、懂用戶的基礎(chǔ)上,還要了解行業(yè)內(nèi)的通用做法。
1)了解業(yè)務(wù)
一定要了解業(yè)務(wù),為什么?
因?yàn)楹玫脑O(shè)計方案千千萬,但是匹配你的業(yè)務(wù)的方案才是好方案,如果不了解業(yè)務(wù),可能設(shè)計出來的方案就是自嗨,例如網(wǎng)上很多的dribble風(fēng)設(shè)計。
又比如說手機(jī)瀏覽器一般都把搜索框放到屏幕頂部,而夸克瀏覽器卻把搜索框放到了下面。
為什么?
因?yàn)榭淇讼胪品瓊鹘y(tǒng)的瀏覽器,想打造一款更年輕更好用的瀏覽器,把搜索框放到下面也是滿足他們的業(yè)務(wù)訴求,現(xiàn)在手機(jī)屏幕越來越大,搜索框放在下面手指操作更加方便。
所以,一定要先去了解業(yè)務(wù)。
拼多多和淘寶同樣都是電商平臺,可它們的用戶心智相差甚大,因?yàn)樽詈蠓桨冈O(shè)計是服務(wù)于最初的業(yè)務(wù)目標(biāo)的,業(yè)務(wù)不同,呈現(xiàn)的方案也不一樣,最后讓用戶形成的心智也不同。
2)了解用戶
為啥?給老人和小孩設(shè)計的界面能一樣嗎?
就拿顏色和文字來說。
小孩喜歡高飽和、豐富的顏色,而老人則需要考慮在各種場景下都能看得清楚信息的顏色。
小孩喜歡圓潤的卡通字體,而老人需要識別度更高的字體,更大的字號。
不同的用戶,采用的設(shè)計一定是不同的,只有了解了他們的喜好和痛點(diǎn),才能做出符合他們心智模型的設(shè)計。
3)競品調(diào)研
為啥要競品調(diào)研呢?
因?yàn)楦偲泛臀覀兊漠a(chǎn)品類似,那么意味著用戶大概率重合度也高,甚至業(yè)務(wù)上都有一定相似度,那么意味著,競品的方案,大概率是經(jīng)過市場驗(yàn)證的符合用戶心智模型的方案。
你看,既然競品已經(jīng)給咱們打了個樣,為何還要自己悶頭造輪子呢?
咱們目的是解決問題,又不是為了證明自己很厲害。
但是,不要誤解,我不是說照著競品抄,而是取長補(bǔ)短,所以不僅要調(diào)研,還要分析,分析就是把競品的優(yōu)劣勢找出來,好的地方咱們可以酌情借鑒,不好的地方,咱們也要避個雷嘛。
好了,小結(jié)一下,要想匹配用戶的心智模型,一定要了解業(yè)務(wù)、了解用戶,還要做競品調(diào)研了解市場的通識性做法。
以上。
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加微信ban_lanlan,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。
分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( www.88yangsc.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計公司。
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加微信ban_lanlan,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。
分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( www.88yangsc.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計公司。
一、弧形輪播的 Banner 圖設(shè)計
在移動端 Banner 圖通常以左右輪播居多,也有個別產(chǎn)品會在輪播形式上創(chuàng)新,比如上下輪播、分層輪播、漸隱輪播、Z 軸輪播等。
最近在體驗(yàn)態(tài)棒 App 時,其 Banner 圖采用弧形輪播的形式。利用弧度的形式展示商品提高了 Banner 位的利用率,有助于展示更多推薦商品,直觀的表達(dá)也使得商品更加突出。自動輪播類似于滾動的櫥窗,表現(xiàn)形式非常新穎,帶給用戶更好的感官體驗(yàn)。
二、默認(rèn)頭像的多種預(yù)設(shè)選擇
隨著產(chǎn)品感官體驗(yàn)的提升,很多產(chǎn)品在默認(rèn)頭像的設(shè)計層面變得更豐富,不一定需要用戶上傳照片,自定義的選擇也更靈活。
除了通過 IP 形象強(qiáng)化默認(rèn)頭像的視覺感以外,最近在使用智行火車票 App 時,其默認(rèn)頭像以矢量插畫風(fēng)為主。用戶進(jìn)行頭像設(shè)置時無需上傳照片,產(chǎn)品提供了多個默認(rèn)頭像,方便用戶根據(jù)自己的喜好作出預(yù)設(shè)。多種預(yù)設(shè)讓自定義選擇更靈活,也能讓默認(rèn)頭像更美觀,提升用戶對產(chǎn)品的好感度。
三、趣味性的心情打卡設(shè)計
對于職場人來說壓力是難以避免的,總會遇到一些煩心的事或者壓力,就會因此影響我們的情緒。我們要試著釋放壓力,治愈我們的情緒才能迎接美好的明天。
最近體驗(yàn)到一個幫你記錄心情,治愈心事的產(chǎn)品-歲歲。整個產(chǎn)品設(shè)計風(fēng)格清新可愛,看著就有種治愈感??梢詫ψ约寒?dāng)前的心情進(jìn)行打卡,類似于儀表盤一樣的心情打卡設(shè)計也是趣味性十足,表情設(shè)計風(fēng)格非??蓯?,哪怕是不開心也能通過這樣趣味性的打卡形式而治愈。設(shè)計風(fēng)格觀賞性很高,值得大家體驗(yàn)。
四、五一主題氛圍設(shè)計
眾多產(chǎn)品都會在五一假期期間進(jìn)行系列主題活動,如何充分利用好當(dāng)前布局結(jié)構(gòu),是產(chǎn)品設(shè)計師進(jìn)行設(shè)計發(fā)揮的關(guān)鍵。
在五一期間使用嘀嗒出行 App 時,多個主界面結(jié)合了五一主題氛圍設(shè)計,青春活潑的插畫風(fēng)渲染出歡快的節(jié)奏。整個界面被裝扮得非常有氛圍感,既傳播了主題活動,也帶給用戶非常新穎的視覺享受。
五、場景化的積分兌換設(shè)計
為了提高用戶黏性,通過簽到積分、消費(fèi)積分、任務(wù)積分等,再結(jié)合積分兌換提高用戶參與度,是提升黏性轉(zhuǎn)化的有效形式。
麥當(dāng)勞 App 在積分兌換的設(shè)計中結(jié)合了兌換套餐的實(shí)物照片,讓用戶對于兌換商品更有直觀感受。也可以切換不同積分兌換的差異,提高用戶參與積分的積極性。通過場景化的積分兌換設(shè)計,不僅提高用戶參與度,設(shè)計感官度也非常棒。
六、動態(tài)賣點(diǎn)強(qiáng)化關(guān)注度
需要強(qiáng)化功能的關(guān)注度時,除了在視覺表現(xiàn)層體現(xiàn)差異以外,動靜結(jié)合也能起到突出作用。
比如智行火車票 App 首頁設(shè)計中,以動效的形式演變賣點(diǎn),以此突出酒店欄目。動效表達(dá)的形式形成動靜對比,以差異化的形式突出業(yè)務(wù)重點(diǎn),提高用戶的關(guān)注度。
七、播放按鈕的品牌氛圍營造
越來越多的產(chǎn)品開始注重立足于品牌的設(shè)計,強(qiáng)化品牌曝光度和產(chǎn)品差異化,品牌基因的融入可以一舉多得。
最近在使用汽水音樂 App 聽歌時,播放按鈕暫停狀態(tài)背景會有氣泡漂浮,還原了汽水帶給用戶的視覺感。通過小小的動效表達(dá)不僅強(qiáng)化了品牌感,也提高了播放按鈕的點(diǎn)擊欲,帶給用戶不錯的感官體驗(yàn)。
八、登錄設(shè)計中的動態(tài)背景
登錄已經(jīng)逐步成為體驗(yàn)產(chǎn)品的必備步驟,很多產(chǎn)品都需要用戶登錄才可以體驗(yàn),如何提高用戶的登錄意愿度變得至關(guān)重要。
吃貨筆記 App 在登錄設(shè)計中采用動態(tài)背景增強(qiáng)視覺感,有種炫酷的感覺。動態(tài)背景結(jié)合炫酷的圖形設(shè)計,營造出不錯的氛圍感,以此降低登錄帶來的排斥感,提高用戶登錄體驗(yàn)產(chǎn)品的意愿度。
九、導(dǎo)航結(jié)束的人性化設(shè)計
導(dǎo)航算是這個時代最便民的工具之一,讓大家的出行更便捷和安全。隨著導(dǎo)航產(chǎn)品的不斷完善,使用體驗(yàn)也越來越人性化。
五一期間使用高德地圖導(dǎo)航時,抵達(dá)目的地結(jié)束導(dǎo)航的設(shè)計中,會根據(jù)目的地屬性進(jìn)行場景表達(dá)。比如目的地是古鎮(zhèn)類景區(qū),會以古鎮(zhèn)代表的圖標(biāo)設(shè)計替代默認(rèn)圖標(biāo),也會顯示景區(qū)購票信息,方便用戶進(jìn)行購票和了解相關(guān)信息。結(jié)合場景打造人性化的設(shè)計,讓用戶時刻感受到產(chǎn)品的溫度。
十、不一樣的點(diǎn)贊設(shè)計
點(diǎn)贊設(shè)計已經(jīng)很普遍,通常以伸大拇指和愛心圖標(biāo)為主,點(diǎn)擊變化過程中也會結(jié)合動效和衍生設(shè)計。
最近在體驗(yàn)歲歲 App 時,在樹洞欄目中點(diǎn)贊設(shè)計采用動效結(jié)合卡通形象。點(diǎn)贊時以動效表達(dá)卡通形象送愛心的過程,呈現(xiàn)出不一樣的點(diǎn)贊效果,帶給用戶差異化的點(diǎn)贊體驗(yàn)。
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加微信ban_lanlan,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。
分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( www.88yangsc.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計公司。
這個頁面第一眼最突兀的地方首先是“知道了”這3個字,因?yàn)樵谶@個界面中,橙色產(chǎn)品色,而突然出現(xiàn)的藍(lán)色會讓你覺得特別醒目,所以我們第一眼會看到這三個字以及這一行的內(nèi)容,這里只涉及到了UI層面上的視覺表現(xiàn)就可以將用戶的注意力吸引過來,但提示欄的視覺優(yōu)先級并不應(yīng)該設(shè)計的這么高。
這里的業(yè)務(wù)規(guī)則是,用戶必須將保險內(nèi)容全部瀏覽完才可以進(jìn)入到下一階段,也就是說一共4頁內(nèi)容,如果你在擊下方的checkbox或者下一步時時,內(nèi)容沒有定位在4/4的分頁狀態(tài)時,就會被判定沒有閱讀完保險內(nèi)容。但是這里的文案只是告訴用戶,請向下滑動瀏覽全部內(nèi)容。
底部有3個條款按鈕,在視覺表現(xiàn)上是3個統(tǒng)一樣式的幽靈按鈕,點(diǎn)擊后會出現(xiàn)彈窗讓用戶閱讀條款內(nèi)容,并在一定時間內(nèi)允許關(guān)閉,用戶點(diǎn)擊閱讀完后樣式不變,但這里的規(guī)則是必須閱讀條款且全部閱讀。
必須閱讀完三個條款與說明,才可進(jìn)入下一步。所以這里就會出現(xiàn)多種問題,比如用戶閱讀完保單內(nèi)容但沒有注意到中間的條款按鈕,在視覺沒有給出“必讀”的意符的情況下,用戶會先點(diǎn)擊下一步,但是被告知需要閱讀條款,用戶點(diǎn)擊閱讀完第一條條款,認(rèn)為自己已經(jīng)完成要求后繼續(xù)點(diǎn)擊下一步,但發(fā)現(xiàn)需要閱讀完三個條款才能完成要求。
這樣的交互與信息設(shè)計讓用戶在該頁面的操作效率大幅度下降,所以面對這種情況,我們是否可以用一些交互優(yōu)化的手段來解決這些問題呢?在選擇策略和方案之前,我們需要思考一些問題:
1.條款的必讀性、風(fēng)險控制
2.效率與法律責(zé)任的權(quán)衡
3.面對多文本、文檔的操作、閱讀的便利性
其實(shí)這些問題一部分是業(yè)務(wù)規(guī)則,如果業(yè)務(wù)上的要求不是必須的那么在效率上的操作空間就會比較大。比如我們經(jīng)??吹降臈l款和說明的閱讀,幾乎沒有人會去全部一字不落的看完,但是為了讓用戶充分了解條款、協(xié)議的內(nèi)容,以防后續(xù)帶來的風(fēng)險,現(xiàn)在產(chǎn)品的設(shè)計策略就是給用戶一個5秒的閱讀倒計時,倒計時結(jié)束前無法關(guān)閉彈窗,但說實(shí)話這種設(shè)計也是雞肋的很,不想看的人你給60秒也不會去看,想看的人不設(shè)計倒計時也會很仔細(xì)的看。所以現(xiàn)在很多產(chǎn)品也做了簡化處理,例如在這個保險條款的交互方式中,我們也可以這樣設(shè)計。在底部直接將條款做成鏈接的形式,和checkbox一同做在一個欄里方便用戶操作,想看自己點(diǎn),不想看就直接勾選后下一步即可。
關(guān)于風(fēng)險揭示、知曉以及同意協(xié)議這個步驟有很多種做法,還有下方的3種例子:
1.將所有風(fēng)險平鋪?zhàn)層脩艄催x并同意,這樣的方式比做在一個模塊里打鉤其實(shí)形式上是一樣的,因?yàn)槎伎梢匀x后確認(rèn),一種同構(gòu)異型的做法。將風(fēng)險需知面積展示的更多,希望用戶能對其重視,但是為了效率起見還是做了一個全選,也是在形式上尊重了“風(fēng)險”。
2.用標(biāo)簽選擇的形式將合同、條款披露給用戶,這種形式在本質(zhì)上也和上面的差不多,甚至很多用戶可能不回去點(diǎn)第二個標(biāo)簽。
3.現(xiàn)在很多產(chǎn)品因?yàn)檎叩年P(guān)系都會在登錄頁面中加上用戶協(xié)議和隱私政策的說明,需要用戶自己去點(diǎn)擊,很多用戶都覺得在登錄前點(diǎn)擊該協(xié)議非常的麻煩,有時也會忽略,所以一些聰明的產(chǎn)品就在用戶點(diǎn)擊登錄后再彈出彈框讓用戶同意該協(xié)議。
最后,話又說回來,領(lǐng)導(dǎo)非讓用戶點(diǎn)擊完3個按鈕,才可以點(diǎn)擊下一步,該怎么設(shè)計呢?首先在視覺樣式層面,用常規(guī)的色塊、線條樣式的按鈕肯定是不行的,因?yàn)樵谶@里我們要考慮幾個點(diǎn):
1.如何讓用戶知道這3個條款是必須點(diǎn)擊閱讀的
2.讓用戶知道只有全部閱讀完才可以進(jìn)行下一步。所以做成常規(guī)按鈕,用戶無法知道該點(diǎn)哪個,先點(diǎn)哪個,要點(diǎn)幾個。
那可以做成勾選嗎?也不行,感覺比做成按鈕還要離譜。
那我們可以考慮這樣做,在這個步驟中也無法單獨(dú)將閱讀條款列為一個界面,所以只能繼續(xù)在頁面下方用列表的形式讓用戶去閱讀。通過這樣的設(shè)計可以讓用戶明確我該點(diǎn)哪個,哪個還沒有閱讀,當(dāng)用戶沒有完成閱讀要求時,底部按鈕置灰。
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加微信ban_lanlan,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。
分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( www.88yangsc.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計公司。
用戶體驗(yàn)設(shè)計流程
由于系統(tǒng)軟件糟糕的UI設(shè)計(菜單排布問題)所導(dǎo)致的誤操作,美國居民受到導(dǎo)彈襲擊的驚嚇
· 美國Forester的一項(xiàng)研究發(fā)現(xiàn),針對UX投入的每1美元,能夠帶來2~100美元的收益。
· Amazon把按鈕文字從“注冊(register)”改成“繼續(xù)(continue)”之后,銷售增長了3億元。
· McAfee重新設(shè)計UI之后,客服電話減少了90%?!?Airbnb的Mike Gebbia認(rèn)為,公司從接近失敗到獲得100億美元市值,最大因素要?dú)w功于UX
UX究竟在設(shè)計些什么
廣義的用戶體驗(yàn)設(shè)計,是包含了內(nèi)容功能設(shè)計,信息架構(gòu)設(shè)計,用戶界面設(shè)計,交互設(shè)計,視覺設(shè)計,語言設(shè)計,動效設(shè)計,音效設(shè)計,在一定程度上涵蓋了產(chǎn)品物理外觀設(shè)計(工業(yè)設(shè)計),平面/包裝設(shè)計,空間設(shè)計,服務(wù)流程設(shè)計等。它意味著一個高度交叉綜合的領(lǐng)域,涉及到人與產(chǎn)品系統(tǒng)或服務(wù)發(fā)生關(guān)系并產(chǎn)生體驗(yàn)的所有觸點(diǎn)。一般或狹義的UX Design,則主要作為與UI Design區(qū)分,多用于互聯(lián)網(wǎng)軟件(或消費(fèi)電子等)行業(yè)基于屏幕的設(shè)計,包含信息框架設(shè)計,用戶交互設(shè)計,可用性研究等。這里的UI Design偏重于視覺上的設(shè)計。而在現(xiàn)實(shí)中我們也經(jīng)常把UX等同于“交互”。
用戶體驗(yàn)設(shè)計的核心和本質(zhì),就是研究目標(biāo)用戶在特定場景下的思維方式和行為模式,通過設(shè)計提供產(chǎn)品或服務(wù)的完整流程,去影響用戶的主觀體驗(yàn)??梢娪脩粞芯吭谡麄€UX流程當(dāng)中的重要性。而認(rèn)知心理學(xué)(Cognitive Psychology)則是用戶體驗(yàn)設(shè)計的理論基礎(chǔ)和科學(xué)依據(jù)。它是一門研究認(rèn)知及行為背后之心智處理(包括思維、 決定、推理和一些動機(jī)和情感的程度)的心理科學(xué)。這門科學(xué)包括了廣泛的研究領(lǐng)域,旨在研究記憶、注意、感知、知識表征、推理、創(chuàng)造力,及問題解決的運(yùn)作。相關(guān)的還有人體工學(xué)(Ergonomics)與人因工程學(xué)(Human Factors Engineering),是研究人和機(jī)器、環(huán)境的相互作用及其合理結(jié)合,使設(shè)計的機(jī)器和環(huán)境系統(tǒng)適合人的生理及心理等特點(diǎn),達(dá)到提高效率、安全、健康和舒適目的的一門科學(xué)??捎眯裕║sability)的概念最早出現(xiàn)于1979年,遠(yuǎn)比唐·諾曼在1993年提出的“用戶體驗(yàn)”概念要早??捎眯缘腎SO定義是“用戶在特定環(huán)境下完成指定目標(biāo)的效果、效率和滿意度”(ISO 9241-11),而用戶體驗(yàn)指“用戶與產(chǎn)品、服務(wù)、設(shè)備或環(huán)境交互時各方面的體驗(yàn)和感受”??捎眯缘姆懂牨扔脩趔w驗(yàn)窄,它聚焦于任務(wù)完成。而用戶體驗(yàn)是外觀呈現(xiàn)、功能組合、系統(tǒng)性能和交互行為等因素的綜合結(jié)果。
上圖將用戶體驗(yàn)細(xì)分為工具性(Utility)、可用性(Usability)、合意性(Desirability)和品牌體驗(yàn)(Brand Experience),最內(nèi)部的圓代表最基礎(chǔ)的用戶體驗(yàn)。
用戶體驗(yàn) / 產(chǎn)品設(shè)計的流程與方法
以用戶為中心的設(shè)計(User-Centered Design,簡稱UCD)概括了用戶體驗(yàn)設(shè)計的典型流程和方法學(xué)。以用戶為中心的設(shè)計思想非常簡單:在設(shè)計開發(fā)產(chǎn)品的每一個步驟中,都要把用戶列入考慮范圍。從前期的用戶研究需求挖掘,到后期的用戶測試設(shè)計驗(yàn)證,都要圍繞目標(biāo)用戶群來進(jìn)行。
在UCD設(shè)計流程的每個階段,都有多種不同的方法來幫助我們達(dá)到目的。
用研分析:
· 單獨(dú)訪談(Individual Interviews):一對一的用戶討論,讓你了解某個用戶是如何工作,使你知道用戶的感受,想要什么和他的經(jīng)歷。
· 焦點(diǎn)小組(Focus Groups):組織一組的用戶進(jìn)行討論,讓你更了解用戶的理解、想法、態(tài)度和想要什么。
· 關(guān)鍵利益人訪談(Stakeholders Interview)
· 情境訪談(Contextual Inquiry or Field Study):走進(jìn)用戶的現(xiàn)實(shí)環(huán)境,讓你了解你的用戶的工作方式,生活環(huán)境等等情況。
· 日記研究(Diary Study):日記研究可以讓用戶記錄自己的進(jìn)程,研究者以非打擾的視角探查用戶的體驗(yàn)。
· 問卷調(diào)研(Questionnaire Study):利用網(wǎng)上或紙張的問題list對用戶進(jìn)行發(fā)放填寫,從而收集用戶對產(chǎn)品的需求建議。
· 任務(wù)分析(Task Analysis):通過任務(wù)分析了解用戶使用產(chǎn)品時的目標(biāo)和操作方式,習(xí)慣(GOMS模型)。
· 用例分析(Use Case Analysis)
· 卡片分類(Card Sorting)、樹形圖測試(Tree Testing):觀察用戶是如何理解內(nèi)容和組織信息,用來幫助你的產(chǎn)品更合理地組織信息?!?競品分析(Competitive Analysis)、標(biāo)桿分析法(Benchmarking)· 桌面研究(Desktop Research)、市場研究(Market Research)· 用戶角色模型(Personas):構(gòu)建一個虛構(gòu)的人來代表特定目標(biāo)用戶群組,設(shè)計團(tuán)隊(duì)圍繞這個虛擬人物設(shè)計開發(fā)產(chǎn)品。
· 用戶體驗(yàn)旅程圖(User/Customer Journey Mapping or Experience Mapping):從用戶角度出發(fā),以敘述故事的方式描述用戶使用產(chǎn)品或接受服務(wù)的體驗(yàn)情況,以可視化圖形的方式展示,從中發(fā)現(xiàn)用戶在整個使用過程中的痛點(diǎn)和滿意點(diǎn),最后提煉出產(chǎn)品或服務(wù)中的優(yōu)化點(diǎn)、設(shè)計的機(jī)會點(diǎn)。
· 態(tài)度研究(Attitudinal Research)和行為研究(Behavioural Research)
· 定性研究(Qualitative Research)和定量研究(Quantitative Research)
設(shè)計階段:
· 腦力風(fēng)暴(Brainstorming Ideation)
· 概念草圖(Concept Sketching)
· 思維導(dǎo)圖(Mind Mapping)· 交互流程(User Interaction Flow)
· 信息架構(gòu)(Information Architecture):對功能內(nèi)容進(jìn)行高度概括的統(tǒng)籌規(guī)劃、設(shè)計安排。
· 情景與故事版設(shè)計(Scenario & Storyboard Design):情景是指特定用戶如何使用產(chǎn)品完成特定目標(biāo)的簡短故事。故事板是連續(xù)的一系列草圖,用視覺的方式表現(xiàn)用戶如何使用產(chǎn)品,形式上類似漫畫分鏡。
· 線框圖(Wireframing)
· 低保真原型與高保真原型(Lo-fi & Hi-fi Prototyping)
· 紙質(zhì)原型(Paper Prototype)
· 視頻原型(Video Prototype):通過視頻來演示用戶如何與產(chǎn)品系統(tǒng)進(jìn)行交互。
· 綠野仙蹤原型(Wizard of oz Prototype):使用角色扮演來模擬用戶如何與產(chǎn)品系統(tǒng)進(jìn)行交互。
· 可交互原型(Interactive Prototype)
· 視覺設(shè)計(Visual Design)
· 設(shè)計模式(Design Patterns)、設(shè)計語言(Design Language)、設(shè)計規(guī)范(Design Guidelines)與設(shè)計體系(Design System)
· 標(biāo)注文檔(Design Spec)
· 動效設(shè)計(Animation Design)
· 參與式設(shè)計(Participatory Design):將終端使用者或利益相關(guān)者帶入設(shè)計流程中。
· 共情/移情/同理心設(shè)計(Empathic Design):將設(shè)計師帶入使用者情境中進(jìn)行觀察設(shè)計。
· 平行設(shè)計(Parallel Design):對同一個產(chǎn)品進(jìn)行分開的設(shè)計,從而比較選擇一個最佳方案。
評估驗(yàn)證:
· 啟發(fā)式評估(Heuristic Evaluation):由一組行內(nèi)專家依據(jù)尼爾森十大原則對產(chǎn)品進(jìn)行可用性檢查。
· 專家評審(Expert Inspection)
· 可用性測試(Usability Testing):邀請用戶來試用你的產(chǎn)品,有任務(wù)性的完成測試,從而達(dá)到評估的目的。分為Moderated和Unmoderated,In-person或Remote。
· 組內(nèi)測試(Within-Subject Testing)與組間測試(Between-Subject Testing)
· 游擊式調(diào)研(Guerrilla Research):便宜、快速地得到大致的用戶反饋。
· 問卷調(diào)查(Surveys):利用網(wǎng)上或紙張的問題list對用戶進(jìn)行發(fā)放填寫,從而收集用戶對產(chǎn)品的反饋意見。
· CSAT(Customer Satisfaction Score)與NPS(Net Promoter Score)
· 眼動追蹤(Eye Tracking)和熱力圖(Heat Map)
· 點(diǎn)擊流分析(Clickstream Analysis)
· 產(chǎn)品漏斗(Product Funnel)和使用情況分析(Usage Analytics)
· 統(tǒng)計學(xué)分析(Statistical Analysis)
· A/B測試:在同一時間維度,分別讓相似的目標(biāo)人群隨機(jī)的訪問產(chǎn)品的不同版本,收集各群組的用戶體驗(yàn)數(shù)據(jù)和業(yè)務(wù)數(shù)據(jù),最后分析、評估出最好版本,正式采用。
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助,微信號:ben_lanlan,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。
分享此文一切功德,皆悉回向給文章原作者及眾讀者.免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( www.88yangsc.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計公司
看完本篇文章,你會學(xué)到以下內(nèi)容:
1、什么是詳情頁
2、詳情頁設(shè)計原則
3、詳情頁的構(gòu)成
4、詳情頁設(shè)計要點(diǎn)拆解
一、什么是詳情頁?
詳情頁向用戶展示一個對象的完整信息,主要用于信息瀏覽,允許對該對象發(fā)起編輯等操作。如電商的訂單詳情,OA的審批詳情等等。
二、詳情頁設(shè)計原則?
1、直接了當(dāng)
信息盡量平鋪展示,如沒有必要不要做隱藏折疊。
2、層次分明
按照接近原則,對信息分層分組展示,降低單個頁面內(nèi)信息復(fù)雜度。
3、化繁為簡
減少復(fù)雜結(jié)構(gòu)的使用,盡量使用相似的結(jié)構(gòu)和模塊,降低結(jié)構(gòu)差異對用戶進(jìn)行干擾,讓用戶聚焦信息本身。
三、詳情頁構(gòu)成
詳情頁由標(biāo)題、標(biāo)簽頁、圖片、文字詳情、按鈕、可視化、列表、表格、篩選、數(shù)據(jù)統(tǒng)計、進(jìn)度軸、標(biāo)簽構(gòu)成
詳情頁的特點(diǎn):1、內(nèi)容雜,什么元素/模塊都可能出現(xiàn)。2、布局多,布局沒有套路,核心是做好內(nèi)容分塊和視覺引導(dǎo)。3、差異大,頁面與頁面巨大差異
四、詳情頁設(shè)計要點(diǎn)拆解
1.容器
由內(nèi)容由少到多劃分為原位展開、氣泡卡片、彈窗、抽屜、頁面。能優(yōu)先滿足內(nèi)容收納的同時,容易盡可能輕量。
2.布局
根據(jù)內(nèi)容從簡單到復(fù)雜可分為基礎(chǔ)樣式、標(biāo)題分組、色塊/分割線/卡片分組、錨點(diǎn)定位/標(biāo)簽頁、自由布局。核心是做好內(nèi)容分區(qū)、視覺引導(dǎo)符合用戶操作習(xí)慣。
布局注意事項(xiàng):把用戶最關(guān)心的內(nèi)容放在最顯眼的地方
3.交互操作
交互操作可分為編輯(原位/氣泡/彈窗/頁面),查看詳情(內(nèi)容不多的話可以少用頁面容器,減少套娃),業(yè)務(wù)操作(層級清晰,符合用戶操作習(xí)慣)。
企業(yè)級B端產(chǎn)品具有行業(yè)壁壘高、業(yè)務(wù)復(fù)雜、服務(wù)角色多等特點(diǎn),在大型迭代項(xiàng)目中,如何做好設(shè)計協(xié)同,把握設(shè)計一致性和還原度常常讓很多設(shè)計團(tuán)隊(duì)感覺無從下手,找不到切入點(diǎn)。在長期的項(xiàng)目實(shí)踐中我們發(fā)現(xiàn),做好設(shè)計規(guī)范能規(guī)范可以幫助個人、團(tuán)隊(duì)以及整個企業(yè)提高效率和產(chǎn)出質(zhì)量,保障用戶體驗(yàn)統(tǒng)一。
那么,我們該如何做好體驗(yàn)標(biāo)準(zhǔn)化,保障基礎(chǔ)體驗(yàn)一致性?下面將和大家分享我們公司在構(gòu)建設(shè)計規(guī)范的實(shí)踐案例。
以我們設(shè)計團(tuán)隊(duì)為例,隨著業(yè)務(wù)不斷擴(kuò)大,定制化需求不斷增加,大型迭代項(xiàng)目做不好設(shè)計和開發(fā)協(xié)同,導(dǎo)致出現(xiàn)“體驗(yàn)一致性差”“設(shè)計效率低”“還原度不可控”等問題。如何有效解決這些問題呢?可以通過構(gòu)建設(shè)計規(guī)范,以保證一致性,實(shí)現(xiàn)工作提效。
從不同角度出發(fā),構(gòu)建設(shè)計規(guī)范都能發(fā)揮積極的作用。
對企業(yè)來說:有利于實(shí)現(xiàn)產(chǎn)品經(jīng)理、設(shè)計和研發(fā)的輸出一致。設(shè)計側(cè)主動建立產(chǎn)品設(shè)計規(guī)范,很大程度上是為了做好設(shè)計管控,實(shí)現(xiàn)原型、設(shè)計稿到線上頁面統(tǒng)一的設(shè)計語言,從根本上提升設(shè)計質(zhì)量和還原度,提高用戶滿意度。
對個人來說:當(dāng)多個設(shè)計師共同協(xié)作同一項(xiàng)目時,由于設(shè)計理解不一致等原因,容易出現(xiàn)設(shè)計控件使用混亂等問題。若有詳細(xì)的設(shè)計規(guī)范作為引導(dǎo),有利于實(shí)現(xiàn)產(chǎn)品各個模塊間的一致性。組件化的工具也能減少機(jī)械重復(fù)性的工作,讓設(shè)計師將更多精力投入到用戶研究和提升用戶體驗(yàn)上。
產(chǎn)品有不同發(fā)展階段,設(shè)計規(guī)范同樣也有,不同階段下的產(chǎn)品目標(biāo)和規(guī)范需要覆蓋的內(nèi)容都不盡相同。我們要既要避免做多,保證投入產(chǎn)出比最大化;同時也要構(gòu)建一個合理的規(guī)范迭代思路。
該階段的產(chǎn)品核心目標(biāo)是「驗(yàn)證產(chǎn)品或商業(yè)模型」,業(yè)務(wù)需求都是小步快跑、頻繁迭代。產(chǎn)品處于從0到1的野蠻生長狀態(tài),存在著“先滿足功能,再優(yōu)化體驗(yàn)”的情況,導(dǎo)致該階段的產(chǎn)品體驗(yàn)往往不太過關(guān)。
搭建目的:通過定義原則,梳理關(guān)鍵頁面和流程,搭建基本的規(guī)范框架。既讓團(tuán)隊(duì)對產(chǎn)品有統(tǒng)一的設(shè)計價值觀和認(rèn)知判斷;從頁面到流程,又能對應(yīng)設(shè)計參照標(biāo)準(zhǔn);同時業(yè)務(wù)可以在規(guī)定的框架下發(fā)展,不僅讓產(chǎn)品體驗(yàn)的根基牢固,而且不會限制功能設(shè)計自由。
搭建范圍:「全局說明」「頁面布局」「通用流程」
該階段的產(chǎn)品基本形態(tài)已穩(wěn)定,也形成了初步的模型結(jié)構(gòu)。后續(xù)迭代是在現(xiàn)有結(jié)構(gòu)的基礎(chǔ)上,進(jìn)行增加或優(yōu)化功能。雖然探索期定義了產(chǎn)品原則、布局和流程,但探索期產(chǎn)品的自由生長,會導(dǎo)致不少設(shè)計細(xì)節(jié)不一致,從而影響了產(chǎn)品整體的體驗(yàn)和效率。
搭建目的:通過回溯整理過往設(shè)計,沉淀優(yōu)化成完整的交互規(guī)范。再根據(jù)規(guī)范統(tǒng)一產(chǎn)品體驗(yàn),進(jìn)一步優(yōu)化流程和效率, 讓整個產(chǎn)品體驗(yàn)達(dá)到相對穩(wěn)定的狀態(tài)。
搭建范圍:「全局說明」「頁面布局」「通用流程」「基礎(chǔ)組件」「業(yè)務(wù)組件」
好的設(shè)計規(guī)范有很多優(yōu)秀的例子,例如Google、Apple、Microsoft這些引領(lǐng)全球設(shè)計風(fēng)尚的公司,設(shè)計規(guī)范已經(jīng)上升為設(shè)計語言,指導(dǎo)旗下所有產(chǎn)品的設(shè)計。國內(nèi)做的優(yōu)秀的案例,比如Ant Design,Element,arco.design等,像這類的產(chǎn)品已經(jīng)實(shí)現(xiàn)了端到端的體驗(yàn)一致,把交互、前端和視覺的事情一并解決了,是值得學(xué)習(xí)的典范。這些優(yōu)秀的設(shè)計規(guī)范都包含以下幾個特點(diǎn):靈活性,可擴(kuò)展性,系統(tǒng)性和標(biāo)準(zhǔn)性。
一般團(tuán)隊(duì)內(nèi)部構(gòu)建的設(shè)計規(guī)范都源于某一產(chǎn)品或者業(yè)務(wù),因?yàn)橹饕菆F(tuán)隊(duì)內(nèi)部成員使用,追求的是投入產(chǎn)出比最大化。所以可在行業(yè)通用設(shè)計規(guī)范的基礎(chǔ)上,適度參考行業(yè)設(shè)計規(guī)范,能復(fù)用的直接參考,同時專注于業(yè)務(wù)本身,具有業(yè)務(wù)特性的再集合業(yè)務(wù)綜合考慮,使整個規(guī)范制定效率更高,科學(xué)性、指導(dǎo)性更強(qiáng)。
設(shè)計規(guī)范的執(zhí)行和推動主要分為四大步驟:
類型梳理:分析業(yè)務(wù)場景,整理和歸類組件,評估具體組件優(yōu)先級和迭代計劃;
全局說明:統(tǒng)一布局,色板,字體,常用樣式,規(guī)范設(shè)計語言;
抽象設(shè)計:將設(shè)計共性抽象出來,構(gòu)建組件通用方案;
效果驗(yàn)證:通過定性/定量數(shù)據(jù)追蹤效果,分析原因,迭代改進(jìn);
收集現(xiàn)有設(shè)計頁面,分析業(yè)務(wù)場景,再參考行業(yè)通用規(guī)范的定義,整理和歸類組件,可以先羅列完整,再根據(jù)產(chǎn)品實(shí)際業(yè)務(wù)需要進(jìn)行增刪改。
全局說明:明確影響整站各個模塊、各個頁面設(shè)計的原則和規(guī)范,指導(dǎo)我們后續(xù)各種規(guī)范的定義和設(shè)計。包括統(tǒng)一布局,色板,字體,樣式等設(shè)計規(guī)則。
基礎(chǔ)組件:可參考行業(yè)通用規(guī)范中的基礎(chǔ)組件分類和組成,因?yàn)榇蟛糠只A(chǔ)組件都具有一定的通用性,站在巨人的肩膀上更高效。這里我們根據(jù)實(shí)際情況,將基礎(chǔ)組件分為導(dǎo)航,通用,數(shù)據(jù)展示,數(shù)據(jù)錄入,反饋5個大模塊,每個模塊下再細(xì)分各小類,構(gòu)成基礎(chǔ)組件的類目。
業(yè)務(wù)組件:根據(jù)業(yè)務(wù)需求,可以定義屬于自己的業(yè)務(wù)組件,這也是區(qū)別于其他通用行業(yè)組件庫的一個核心部分。
因?yàn)樵诖篌w量產(chǎn)品設(shè)計中,每個模塊都由不同的同學(xué)負(fù)責(zé),這樣全局產(chǎn)品的把握就會降低,需要去補(bǔ)充全局規(guī)范說明去維持產(chǎn)品全局通用部分的一致性。包括布局,色彩規(guī)范,字體,樣式等;
抽象設(shè)計是設(shè)計規(guī)范中最核心,工作量最大,難度最高的一個環(huán)節(jié)。我們可以將它拆解成幾個部分,先做出基礎(chǔ)組件,再基于基礎(chǔ)組件和業(yè)務(wù)需求抽象設(shè)計業(yè)務(wù)組件,最后抽象成頁面模板。
基礎(chǔ)組件
組件庫的搭建,就一定要提到原子思維。道爾頓原子論認(rèn)為,物質(zhì)世界的最小單位是原子,原子是單一的,獨(dú)立的,不可被分割的,在化學(xué)變化中保持著穩(wěn)定的狀態(tài)。這個原子理論同樣適用于設(shè)計系統(tǒng)中。
其中,最小單位設(shè)計元素就是基礎(chǔ)組件。我們在做設(shè)計系統(tǒng)的時候希望當(dāng)你改動任何一個原子,你有自信其他所有依賴于這個原子的部件全部自動更新。只有滿足了這一點(diǎn),設(shè)計系統(tǒng)設(shè)想中的效率、解放生產(chǎn)力才會真正實(shí)現(xiàn)。例如,在sketch中,分享樣式和嵌套符號的使用。
業(yè)務(wù)組件
在構(gòu)建完基礎(chǔ)組件后,可以根據(jù)業(yè)務(wù)需求,將使用頻率較高的組件進(jìn)行評估,抽象成業(yè)務(wù)組件。
一般業(yè)務(wù)組件可分成兩大類:
一類是由多個基礎(chǔ)組件組成的帶有業(yè)務(wù)需求復(fù)合組件,如:復(fù)合標(biāo)簽,快捷時間選擇器等;
另一類是針對特定業(yè)務(wù)場景的業(yè)務(wù)組件:如地圖,站點(diǎn)等;
頁面模版
在完成基礎(chǔ)組件和業(yè)務(wù)組件的構(gòu)建后,我們可以根據(jù)全局說明,利用組件搭建頁面模板。頁面模版不僅能有效的提升組件的使用效率,也能提供很好的組件使用示范效應(yīng),加強(qiáng)設(shè)計說明和組件之間的結(jié)合。
組件質(zhì)量評估:從物理到行為層,包括樣式、組件、框架、組件交互 共4個維度。通過一致性評分衡量標(biāo)準(zhǔn)化覆蓋的好壞。
系統(tǒng)應(yīng)用層面的評價:
系統(tǒng)是否幫助業(yè)務(wù)提效;
當(dāng)業(yè)務(wù)不能直接應(yīng)用系統(tǒng),能否靈活改動;
系統(tǒng)是否幫助業(yè)務(wù)變得更有競爭力、更創(chuàng)新;
迭代機(jī)制
當(dāng)我們完成設(shè)計規(guī)范的整體構(gòu)建后,對于新需求,通過評估復(fù)用性、通用性和優(yōu)先級,低級別的走定制設(shè)計完成交付。高級別的通過抽象設(shè)計、內(nèi)審、沉淀到組件庫中。
機(jī)制提效
在完成設(shè)計規(guī)范的構(gòu)建后,我們可以聯(lián)合產(chǎn)品經(jīng)理和前端工程師,幫助每個環(huán)節(jié)的人員快速搭建產(chǎn)出物,推動上下游機(jī)制提效。
例如,我們會基于設(shè)計規(guī)范,為產(chǎn)品經(jīng)理提供符合設(shè)計規(guī)范的Axure元件庫,產(chǎn)品經(jīng)理使用元件庫,可以快速搭建原型,產(chǎn)出prd,與設(shè)計師、開發(fā)的溝通也更加順暢。簡單的修改可以跳過設(shè)計師出圖這一步驟,直接和開發(fā)溝通,極大加快前期的節(jié)奏。甚至通過借助元件庫,產(chǎn)品經(jīng)理可以搭建出高保真原型,用于直接和用戶確認(rèn)或者給客戶進(jìn)行demo的演示。
基于設(shè)計規(guī)范,推動研發(fā)實(shí)現(xiàn)組件代碼化,通過設(shè)計標(biāo)準(zhǔn)化可以達(dá)到研發(fā)工業(yè)化。通過定義標(biāo)準(zhǔn)規(guī)范,提高流程、組件的復(fù)用率,開發(fā)側(cè)就可以制定相應(yīng)組件,形成前端腳手架,方便后期迭代的組件化使用,有效地避免不必要的分歧點(diǎn)和重復(fù)造輪子,同時減少上線前設(shè)計走查、測試的工作量,保證落地效果,提升生產(chǎn)力。
以上就是我們在構(gòu)建自己的企業(yè)設(shè)計規(guī)范的流程,最后,給大家展示一下,我們目前的企業(yè)設(shè)計規(guī)范和部分應(yīng)用情況。
今天帶來的是《交互設(shè)計沉思錄》第一部分的第二章「管理復(fù)雜性」。
主要講述的是交互設(shè)計師是如何理解&組織所獲取到的數(shù)字、文字?jǐn)?shù)據(jù)。
通過這些步驟&方法能夠幫助交互設(shè)計師更加清楚信息間的關(guān)系,建立很強(qiáng)的心智圖景。
其間也穿插了很多職能相關(guān)部分的對比,如「交互設(shè)計師與信息架構(gòu)師」「交互設(shè)計師與界面設(shè)計師」「交互設(shè)計師與電子工程師」。
作者:Viola_1241 來源:站酷網(wǎng)
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加微信ban_lanlan,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。
分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( www.88yangsc.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計公司
今天帶來的是《交互設(shè)計沉思錄》第一部分的第二章「管理復(fù)雜性」。
主要講述的是交互設(shè)計師是如何理解&組織所獲取到的數(shù)字、文字?jǐn)?shù)據(jù)。
通過這些步驟&方法能夠幫助交互設(shè)計師更加清楚信息間的關(guān)系,建立很強(qiáng)的心智圖景。
其間也穿插了很多職能相關(guān)部分的對比,如「交互設(shè)計師與信息架構(gòu)師」「交互設(shè)計師與界面設(shè)計師」「交互設(shè)計師與電子工程師」。
藍(lán)藍(lán)設(shè)計( www.88yangsc.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計公司
注:閱讀此文章大約需要30分鐘
先給大家看兩個案例:大家都很熟悉的,自動感應(yīng)測溫,不需要人為操控
第二個案例則是nest智能恒溫器,比起傳統(tǒng)的需要人為的去手動觸發(fā)調(diào)節(jié)溫度,他能夠?qū)崟r感知家里的溫度,基于不同的場景與客戶習(xí)慣去調(diào)節(jié)溫度,比起傳統(tǒng)模式便捷了不少
那么從這兩個案例中,大家可以發(fā)現(xiàn),傳統(tǒng)人機(jī)交互與下一代人機(jī)交互是有著本質(zhì)區(qū)別的,傳統(tǒng)人機(jī)交互一直以來都是輸入輸出的被動交互邏輯,什么是被動交互呢,就是必須有用戶向機(jī)器發(fā)送指令,機(jī)器接收指令,執(zhí)行后將結(jié)果反饋給用戶。而新的交互模式,則是用戶不需要做任何指令輸入,機(jī)器自動感知當(dāng)前的場景,來理解你的意圖是什么,來去主動幫你完成任務(wù)。那么這是如何實(shí)現(xiàn)的呢,主要是依靠傳感器,算法等實(shí)現(xiàn)的。這也說明了我們的生活開始下一代人機(jī)交互的新時代。
這也就是今天的主題,那么今天,我會詳細(xì)講解,把這個課題講透。包括什么是智能感知交互,他的底層框架模型是怎樣的,以及結(jié)合案例是講解他是如何落地使用的,
回顧整個人機(jī)交互的發(fā)展史,經(jīng)過了不同的階段,從命令行界面,也就是通過手柄,遙控等進(jìn)行交互,再然后是圖形用戶界面,也就是觸摸屏等交互,再到語音交互,圖像識別等等
人們對于人機(jī)交互也從依賴于人去手動觸發(fā),再到趨于自然和本能,隨著技術(shù)的發(fā)展,我們也迎來的技能感知交互的新時代
在這里也對智能感知交互做了初步定義:是以人為中心,基于傳感器、大數(shù)據(jù)及AI技術(shù),自動感知用戶情景,理解用戶意圖,主動響應(yīng)用戶需求,真正提升人機(jī)交互效率
那么智能感知交互也有幾個特征,更加的趨于自然,輸入輸出方式更加無感知,智能
接下來是最核心的重點(diǎn),智能感知交互的框架是怎么樣的,他的底層邏輯是怎樣運(yùn)行的,這也是整套理論知識的基石和核心。
智能感知交互模型主要分為三層:
那么以剛開頭的無接觸測溫門為例,在感知層主要通過紅外傳感器去感知人的體溫,在決策層則是當(dāng)遇到發(fā)燒的顧客則需要進(jìn)行干預(yù),在表達(dá)層,則會通過音效、光效做出主動的預(yù)警的設(shè)計表達(dá)。
那么我們接下來詳細(xì)的看下整個框架模型,那么,感知層又細(xì)分為三大模塊:
第一塊為【用戶感知】,第二塊為【場景感知】,第三塊為【行為感知】。 那我這里給他串聯(lián)起來,簡單來說就是感知用戶是誰,在什么楊的場景下,做了什么樣的行為。那么決策層則細(xì)分為兩大塊,也就是無感知之后怎么做決策,理解用戶的意圖是什么,。那么第二則是做出決策后怎么去做設(shè)計表達(dá)和輸出呢,受到那些變量因素的影響,這是由設(shè)計表達(dá)影響因子模型決定的。那么最后一層則是正式做出設(shè)計表達(dá),目前表達(dá)的介質(zhì)主要有界面、聲音、光效、觸覺、動作等。那么這張圖是一個大框架,接下來我會詳細(xì)的剖析每一層
先講第一層,感知層,就是感知技術(shù),這里在進(jìn)一步細(xì)分為三個板塊,用戶感知,場景感知,行為感知,用戶感知為,用戶性別、地域、年齡等等特征,場景感知則是什么時間、什么地點(diǎn),當(dāng)前環(huán)境、溫度等等,行為感知則是去感知,你用了什么工具,對什么對象,做了什么操作行為等等。針對不同的業(yè)務(wù)會有不同的針對感知,例如開頭案例中的體溫測量,他對溫度這一屬性重點(diǎn)感知。大家這里也能想到,世間萬物都可感知,為了方便后續(xù)的統(tǒng)計和分析,需要進(jìn)行加工處理,需要將當(dāng)前的感知線上化和數(shù)據(jù)化,同時會將這些數(shù)據(jù)進(jìn)行標(biāo)簽化的處理,那么如何去處理這些數(shù)據(jù)呢,這里主要分成三類:
簡單來說就是從傳感器或者線上平臺等渠道直接獲取的數(shù)據(jù)。舉個例子,比如說登錄網(wǎng)站,那么我們可以獲取用戶ID,從溫度傳感器,我們可以直接獲得溫度。這些都是統(tǒng)計類數(shù)據(jù)
簡單來說就是基于一定的規(guī)則產(chǎn)生,舉個例子,比如我們規(guī)定用戶與設(shè)備之間的距離為0~40cm為近距離,,工人每小時生產(chǎn)產(chǎn)品80件定義為熟練工,這些都定義為規(guī)則類數(shù)據(jù)
他是通過機(jī)器學(xué)習(xí)挖掘產(chǎn)生,根據(jù)相關(guān)屬性進(jìn)行預(yù)測和判斷。比如淘寶上對男女的劃分,他通過你買的商品去判斷你是男生還是女生,你的興趣愛好是什么
那么接下來我們講決策層,那么剛剛我也介紹了整個框架模型,決策層主要有兩部分,現(xiàn)在講述第一部分,也就是整體框架中紅色圈住部分,針對【意圖識別決策模型】進(jìn)行剖析。簡單來說就是我感知之后去理解用戶的訴求是什么,這里也抽象為四大類決策方向:行為干預(yù)、推送建議、意圖預(yù)判、自動決策
簡單來說就是我感知到當(dāng)前的行為是異常、錯誤的,會做出主動預(yù)警進(jìn)行干預(yù)。舉個例子,比如圖中的場景,通過攝像頭的圖像識別檢測到工人的操作不規(guī)范,會通過光效和音效的預(yù)警來進(jìn)行行為干預(yù)
是基于你的愛好去推送不同的內(nèi)容
感知之后去預(yù)判,你接下來會做什么。比如上圖,當(dāng)系統(tǒng)之前感知到用戶粘貼了地址和電話信息,那么系統(tǒng)就預(yù)判你是不是要寄快遞
比如陀螺儀識別用戶將設(shè)備傾斜了多少度,將屏幕做自動關(guān)屏
那么前面講述的是決策層的第一大板塊,那么現(xiàn)在講第二板塊,也就是設(shè)計表達(dá)影響因子模型。簡單來說,就是我已經(jīng)決策完成,那么我怎么去做決策和輸出,受那些變量因子影響呢
那么這里也抽象為三大類變量因子,用戶感官因子,環(huán)境因子,設(shè)備因子。
比如在【用戶感官因子】上,會去分析,用戶當(dāng)前的認(rèn)知負(fù)荷是什么樣的,如果當(dāng)前是在黑暗的情況下,用戶的視覺負(fù)荷比較大的話,那么設(shè)計表達(dá)是不是就應(yīng)該以聽覺和觸覺為主。同時我們還會去分析用戶是運(yùn)動狀態(tài)還是靜止?fàn)顟B(tài),如果是運(yùn)動狀態(tài)那么在設(shè)計的時候是不是需要考慮,字體是不是需要更大,方便用戶獲取信息等等案例。
【環(huán)境因子】就是環(huán)境光線的強(qiáng)弱,噪聲的大小等等,比如設(shè)計的時候,是在室外,光線比較強(qiáng)的環(huán)境,那么設(shè)計的界面對比度是不是就得更強(qiáng)。
【設(shè)備因子】就是傳統(tǒng)設(shè)計當(dāng)中,他的輸入通道是物理按鍵,還是觸屏,還是語音,手勢這些,以及輸出通道,有沒有喇叭,指示燈等等。這些都會影響我們采用怎樣的方式去進(jìn)行設(shè)計表達(dá)。
那么第三層就是我們最熟悉的表達(dá)層,也就是具體的交互執(zhí)行。常用的表達(dá)方式主要有界面,音效,光效,觸覺,動作這幾類,這些大家都很熟悉,這里就不做詳細(xì)的講解。
那智能感知交互依賴的技術(shù)和條件也是比較多的,所以他是分企業(yè)分階段發(fā)展的。那么這里主要分為5個等級。從無智能到完全智能,那么目前呢主要處在中間C2這個條件智能的階段中。簡單來說就是機(jī)器自動感知部分情景,再加上人的輔助輸入,讓系統(tǒng)完成任務(wù)。
那么前面說這些都是偏理論偏框架類的,那么下面我會結(jié)合案例具體講解智能感知交互是怎樣去落地使用的
那么當(dāng)有了模型框架后怎樣應(yīng)用呢,首先,離不開設(shè)計流程,和傳統(tǒng)設(shè)計流程類似,智能感知交互的設(shè)計流程也為:【發(fā)現(xiàn)一個機(jī)會點(diǎn),制定對應(yīng)的設(shè)計策略,然后定義具體的設(shè)計表達(dá),持續(xù)監(jiān)測進(jìn)行迭代和優(yōu)化?!窟@樣構(gòu)成,那么大家就會想了,那我們的不同之處在哪呢?這其實(shí)離不開設(shè)計對于技術(shù)的洞察力,我們設(shè)計對于技術(shù)的了解和應(yīng)用其實(shí)貫穿在全流程中。
比如說,在我們在做UED設(shè)計中,發(fā)現(xiàn)痛點(diǎn)時,我們可以通過問卷調(diào)研,訪談?wù){(diào)研獲得用戶的主觀數(shù)據(jù),也可以通過埋點(diǎn)檢測獲得用戶的行為數(shù)據(jù),而我們在優(yōu)化的時候,除了從設(shè)計側(cè)出發(fā)的體驗(yàn)優(yōu)化,那是不是可以不給自己設(shè)立邊界,比如從技術(shù)出發(fā),讓算法自身不斷學(xué)習(xí),讓準(zhǔn)確率有所提升。帶著這樣的不同,我來舉一個案例。
這塊沙琪瑪出生在一個非常傳統(tǒng)的食品供應(yīng)鏈公司,她從出生出來到被運(yùn)送到客戶手中,會經(jīng)過4個空間,12個節(jié)點(diǎn)。而在這層層的校驗(yàn)中,當(dāng)我們想知道沙琪瑪?shù)馁|(zhì)量,生產(chǎn)日期,和他的位置,需要的是員工的手動介入和對于條形碼的掃描,
但我想更精細(xì)化的知道沙琪瑪具體的信息來進(jìn)行更好的數(shù)字化管理,那就變得非常困難。所以我們在想,怎么可以讓對沙琪瑪?shù)墓芾?,變得更聰明一些呢,那改變這傳統(tǒng)模式的機(jī)會,就來自于識別技術(shù)的發(fā)展。
那么現(xiàn)在已經(jīng)運(yùn)用起來這樣的技術(shù)了,一些商場的衣服和商品上都會有RFID標(biāo)簽,比如優(yōu)衣庫,在進(jìn)行結(jié)賬時只要將多件商品投送到結(jié)賬框中,就可以一次性識別多個商品完成結(jié)賬,這就是RFID的優(yōu)勢,他可以完成一對多的批量識別,并且具有更大的識別范圍,識別過程中不需要設(shè)備和條碼直接對視。
那我們就要想了,如果每個沙琪瑪都有一個RFID碼,那我們是不是就可以批量無感知的識別他們了呢。帶著這樣的技術(shù)優(yōu)勢,我們來回顧整個操作流程,我們發(fā)現(xiàn),在圍繞沙琪瑪?shù)囊粚右粚有r?yàn)中,已我剛剛提到的【行為干預(yù)、意圖預(yù)測、自動決策和推送建議】四個角度來找到更智能的優(yōu)化點(diǎn),比如說,當(dāng)沙琪瑪從車間生產(chǎn)出來,即將被打包的時候,我們?nèi)绻l(fā)現(xiàn)了一個異常,可以怎么處理呢,大家覺得~~~~我們是不是可以進(jìn)行一個行為干預(yù),來將這個異常及時的告知給用戶,又或者,我們可以進(jìn)行一個自動決策 ,我們通過自動化設(shè)備,來吧出現(xiàn)異常的商品進(jìn)行自動剔除。
那由于整個鏈路太長,所以我現(xiàn)在呢,以沙琪瑪離開倉庫的最后一個校驗(yàn)環(huán)節(jié)為例,來做展開
這個時候,用戶拖著托盤,來到月臺,準(zhǔn)備將沙琪瑪裝上卡車,這個時候,如果沙琪瑪上錯了車,那我們就非常難以將他追溯回來了。所以這個時候,用戶的意圖是非常清晰的,那就是及時的阻止這個異常的商品流出倉庫。但我們知道了,那下一步呢,就是讓機(jī)器也知道這一個意圖,其實(shí)在這個場景下非常簡單,無非是,某人在某場景下做出了某個行為,而這個場景下我們可以通過員工的賬號ID來獲取的員工的身份,
我們也可以通過設(shè)備上在運(yùn)行的秘鑰來獲得當(dāng)前的實(shí)操場景是什么,
還能通過RFID的天線,他所識別到的信號逐漸增強(qiáng),來發(fā)現(xiàn),啊確實(shí)有一個用戶,在拖著商品逐漸靠近,那以上這三個條件,就可以觸發(fā)我們對于托盤上的貨物的識別來判斷,他上的車是不是對的呢,數(shù)量是不是準(zhǔn)確呢,一旦發(fā)現(xiàn)異常,我們就需要將信號及時的傳給用戶
那下面問題就來了,我們該怎么表現(xiàn)這個異常,剛才也提到,我們設(shè)計的表達(dá)是多種多樣的,有界面內(nèi)的,界面外的,環(huán)境空間的。而用戶接收的渠道卻非常的單一,無非是,視覺、聽覺、觸覺、甚至以后可能會有嗅覺。
所以我們在定義一個合適的表達(dá)方案的時候,就需要考慮到當(dāng)下用戶、環(huán)境、設(shè)備的影響因素,那在我們的場景中,我們應(yīng)該怎樣選擇一個合適的感官通道來傳遞這個異常信號呢
這就需要我們清晰的了解,在這個場景下,每一個感官通道被占用的情況,這樣我們才能選擇其中占據(jù)優(yōu)勢的那些來做出我們的設(shè)計表達(dá)
為此,我們總結(jié)過往一些學(xué)術(shù)研究,來將用戶、環(huán)境、設(shè)備他具體的影響程度進(jìn)行數(shù)值化。比如對于用戶的限制,我們采用VACP的工作負(fù)荷模型來量化用戶的各個通道上認(rèn)知資源被占用的程度。而對于用戶自身的能力限制,我們通過劍橋大學(xué)提出的一個無障礙公式,來計算用戶自身能力限制的程度,同樣,我們綜合國內(nèi)一些常見的標(biāo)準(zhǔn),來將環(huán)境因素,例如,亮度、噪聲、和設(shè)備自身的表達(dá)能力進(jìn)行等級的劃分。那大家就要好奇了,那要數(shù)值化,那數(shù)值化靠譜嗎,我們怎么做這個數(shù)值化呢?
那我以VACP工作負(fù)荷模型來做一個簡單的展開,他起源與1984年,對于飛行員在駕駛飛機(jī)的一個觀察和研究。研究者將他劃分為視覺、聽覺、認(rèn)知、運(yùn)動四個維度。同時呢,對于不同難度系數(shù)的任務(wù),劃分了不同對資源程度占用不同的等級,這樣,我們就可以像查閱字典一樣,來根據(jù)我們需要的任務(wù)表現(xiàn),找到這個通道上對應(yīng)具體的占用程度
回到我們剛才的場景,當(dāng)用戶拖著托盤靠近的時候,他需要時刻注意眼前的道路,避免和其他物品碰撞,這個時候,視覺上他對物體的追蹤和跟隨,這個時候呢,在視覺上通道上他會有77%的占用情況
而聽覺上,雖然他不需要聲音來辨別道路,但在這個過程中,有可能有小組長會叫他說,唉,你過來以下,那這樣我們就需要做一個聲音的辨認(rèn),那在聽覺通道上,可能會有14%的占用程度
而在月臺上,時刻會有運(yùn)輸與發(fā)動機(jī)的聲音,這個大約在70分貝的噪聲,會給用戶在聽覺上有個二級的干擾作用
綜合來看,首先,我們對用戶在觸覺上的反饋通道就被阻斷了,因?yàn)樵O(shè)備端離用戶實(shí)在太遠(yuǎn)了,無法進(jìn)行一個觸覺上的反饋,
而剩下的視覺通道已經(jīng)被高度占用了,他的有效性是較為有限的。而在聽覺上,雖然他的占用程度沒這么高,但他收到了環(huán)境噪聲的二級干擾,所以我們單一的通過視覺或者聽覺都不足以達(dá)到一個有效的反饋?zhàn)饔谩?
好在現(xiàn)在用戶的認(rèn)知還是比較充沛的,所以呢,我們可以通過視覺、聽覺、認(rèn)知三個通道上的整合,來做一個比較有效的反饋。
也就是,當(dāng)用戶靠近時,首先,她會在聽覺上聽到蜂鳴器的報警,
然后呢,他的注意力就被抓到了燈光的閃爍模式上。,他從他的記憶中記得的燈光的三種閃爍模式上,辨識到了這個閃爍意味著說:這個閃爍,標(biāo)識著我現(xiàn)在拉得沙琪瑪品類有問題,那我要好好的檢查一下。那我們的反饋呢,就成功的達(dá)成了
那除了剛剛提到的,多感官的反饋,我們在對于界面的設(shè)計上,也考慮到了多因素的影響
那第一個就是大家相當(dāng)熟悉的視覺距離,在我們的生活場景中,,有手持設(shè)備的近視距,也有推動設(shè)備的中視距,還有推動大型設(shè)備上走向通道門的,遠(yuǎn)達(dá)130厘米的遠(yuǎn)視距
那面對這樣不同的視覺距離,和用戶靜態(tài)或者動態(tài)的移動狀態(tài),我們推導(dǎo)了計算文字高度和文字字號的公式,
然后計算這樣的視覺距離和運(yùn)動速度的不同,來對關(guān)鍵信息做突出化的展示,保證用戶在看到關(guān)鍵信息時他的清晰度。那大家可以想想,除了視覺的距離以外,還有什么因素會影響到視覺的表達(dá)呢,
那就是環(huán)境的亮度。在我們的場景內(nèi),盡管有部分都是在室內(nèi)發(fā)生,但也有部分是在室外發(fā)生,就比如我們舉的沙琪瑪?shù)睦樱窃谠屡_發(fā)生的場景,那這個時候,就需要我們在色彩的設(shè)計上,去考慮到環(huán)境亮度的影響,
我們基于 W3C,對于色彩對比度的分析,然后定義了我們的配色方案,在對于室外的環(huán)境,我們會采用色彩對比度較高的配色方案,而到了室內(nèi)呢,我們會動態(tài)的將色彩對比度降低,避免用戶長時間注視對比度高的界面,造成視覺疲勞
那既然有設(shè)計方案,那自然就有效果評估,
我們將智能感知設(shè)計的評估,分為主觀和客觀兩個部分,主觀就是大家比較熟悉的,比如我們感知的這個情景是否準(zhǔn)確,能不能夠幫助用戶提高效率呢,整個感受是不是愉悅的,是不是有效的,那么這一塊我們是通過李克特5點(diǎn)量表問卷,和SAM問卷來進(jìn)行度量,另外一部分則是客觀部分,這一部分我們通過對于算法模型的評估指標(biāo)來進(jìn)行度量,比如他的準(zhǔn)確率,召回率,精準(zhǔn)率來評估他的算法是否可以不斷學(xué)習(xí)和進(jìn)步。
那智能感知交互的分享就到這里,這里我衍生一下,從剛才的案例中,主要都是實(shí)操類的,那么我們是不是可以做個衍生,將智能感知設(shè)計的思路方法也延用到產(chǎn)品設(shè)計中呢,比如現(xiàn)在的抖音,頭條,他們?nèi)シ治鑫覀兊南埠?,主動的替我們進(jìn)行篩選,于是在使用產(chǎn)品的時候,我們可以說是被動的看內(nèi)容,被動的看到商品被吸引然后下單。那么B端產(chǎn)品也可以以此類推,傳統(tǒng)模式下,是人登錄后臺,主動去找任務(wù),那么在這里,我們是否可以換個思路,任務(wù)主動來找人,通過感知到用戶的身份,我們來主動檢測,他所關(guān)注的任務(wù)的進(jìn)度,并且在這個任務(wù)落后的時候,主動發(fā)出預(yù)警和提示,真正的提升用戶的管理效率。
藍(lán)藍(lán)設(shè)計( www.88yangsc.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計公司
藍(lán)藍(lán)設(shè)計的小編 http://www.88yangsc.com