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