首頁

超全面的B端幫助體系搭建指南|蘭亭妙微UI設(shè)計(jì)公司

資深UI設(shè)計(jì)者

超全面的B端幫助體系搭建指南|蘭亭妙微UI設(shè)計(jì)公司

隨著企業(yè)和組織越來越重視客戶體驗(yàn)和支持,搭建一個(gè)全面有效的B端幫助體系成為了一個(gè)非常重要的任務(wù)。本指南旨在為企業(yè)提供一套全面的搭建B端幫助體系的指南,包括定義目標(biāo)、設(shè)計(jì)內(nèi)容和功能、選擇合適的技術(shù)工具、實(shí)施和維護(hù)等方面。通過遵循本指南,企業(yè)可以打造一個(gè)卓越的B端幫助體系,提供高質(zhì)量的服務(wù)和支持,從而增強(qiáng)客戶滿意度和忠誠度。
第一部分:定義目標(biāo)
研究目標(biāo)用戶群體:了解B端用戶的需求、偏好和行為特點(diǎn),有針對性地為他們提供幫助和支持。
確定核心問題和痛點(diǎn):通過調(diào)研和分析,找出B端用戶常遇到的問題和痛點(diǎn),從而明確幫助體系的重點(diǎn)和方向。
第二部分:設(shè)計(jì)內(nèi)容和功能
創(chuàng)建知識(shí)庫:整理和組織常見問題解答、操作指南、教程和最佳實(shí)踐等知識(shí)內(nèi)容,以便用戶可以自助解決問題。
提供在線文檔:編寫詳細(xì)的產(chǎn)品文檔和用戶手冊,幫助用戶了解產(chǎn)品功能和使用方法。
建立社區(qū)論壇:打造一個(gè)用戶交流和互動(dòng)的平臺(tái),用戶可以在這里互相幫助、分享經(jīng)驗(yàn)和提出問題。
開設(shè)在線培訓(xùn)課程:為用戶提供系統(tǒng)的培訓(xùn)課程,幫助他們更好地理解和使用產(chǎn)品。
實(shí)時(shí)在線支持:提供實(shí)時(shí)的在線聊天或熱線電話支持,解答用戶問題并給予指導(dǎo)。
第三部分:選擇合適的技術(shù)工具
幫助臺(tái)系統(tǒng):選擇一個(gè)功能強(qiáng)大、易于使用和定制的幫助臺(tái)系統(tǒng),用于管理知識(shí)庫、文檔、社區(qū)和培訓(xùn)等內(nèi)容。
知識(shí)管理系統(tǒng):采用一款高效的知識(shí)管理系統(tǒng),能夠方便地整理、搜索和更新知識(shí)庫內(nèi)容。
社區(qū)平臺(tái):選擇一款流行且易于擴(kuò)展的社區(qū)平臺(tái),方便用戶互動(dòng)和交流。
在線培訓(xùn)平臺(tái):使用現(xiàn)代化的在線培訓(xùn)平臺(tái),支持課程管理、內(nèi)容創(chuàng)作和學(xué)員管理等功能。
實(shí)時(shí)聊天軟件:選擇一款穩(wěn)定可靠的實(shí)時(shí)聊天軟件,能夠與用戶進(jìn)行快速交流和支持。
第四部分:實(shí)施和維護(hù)
內(nèi)部培訓(xùn):對幫助體系相關(guān)人員進(jìn)行培訓(xùn),確保他們熟悉并能夠熟練使用相關(guān)工具和系統(tǒng)。
持續(xù)更新和優(yōu)化:定期檢查和更新知識(shí)庫和文檔內(nèi)容,根據(jù)用戶反饋和需求進(jìn)行優(yōu)化和改進(jìn)。
數(shù)據(jù)分析與反饋:利用數(shù)據(jù)分析工具對用戶訪問和使用情況進(jìn)行監(jiān)測和分析,從而根據(jù)數(shù)據(jù)提供更加精準(zhǔn)的支持和幫助。
用戶滿意度調(diào)查:定期進(jìn)行用戶滿意度調(diào)查,收集用戶反饋和建議,及時(shí)解決問題并改進(jìn)服務(wù)質(zhì)量。

藍(lán)藍(lán)未來將會(huì)持續(xù)在平臺(tái)上分享關(guān)于設(shè)計(jì)行業(yè)的文章。此外藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),添加vx藍(lán)小助ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請您入群。同時(shí)添加藍(lán)小助我們將會(huì)為您提供優(yōu)秀的設(shè)計(jì)案例和設(shè)計(jì)素材等,歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。
藍(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ù)、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ì)公司

格式塔原理在產(chǎn)品交互設(shè)計(jì)中的應(yīng)用

ui設(shè)計(jì)分享達(dá)人

“整體不等于部分之和,意識(shí)不等于感覺元素的集合,行為不等于反射弧的循環(huán)?!币?、格式塔的起源

格式塔的德文為“Gestalt”,意思為「形狀」和「圖形」,在心理學(xué)中可以看作是任何一種被分離的整體。格式塔心理學(xué)的研究源于視知覺,是現(xiàn)代認(rèn)知主義學(xué)習(xí)理論的先驅(qū),為后來的社會(huì)心理學(xué)的發(fā)展打下了堅(jiān)實(shí)的基礎(chǔ),其創(chuàng)始人是韋特海墨、考夫卡和苛勒。

奧卡姆剃刀-交互設(shè)計(jì)需遵循的簡單有效原理

ui設(shè)計(jì)分享達(dá)人

“如無必要,勿增實(shí)體”
“Make everything as simple as possible,but not simpler”

用戶心智模型的3運(yùn)用和3匹配

ui設(shè)計(jì)分享達(dá)人

你聽過用戶心智模型這個(gè)名詞嗎?設(shè)計(jì)方案時(shí)有考慮過匹配用戶心智模型嗎?如何匹配?下文將梳理智模型到底是什么以及如何運(yùn)用。

先問你一個(gè)問題。拼多多、淘寶、京東這三家購物平臺(tái),你認(rèn)為它們的區(qū)別是什么?或者換個(gè)方式問你。買電器你去哪個(gè)平臺(tái)?買衣服你去哪個(gè)平臺(tái)? 買垃圾袋你去哪個(gè)平臺(tái)?是不是有了答案了?沒猜錯(cuò)的話, 大部分人的答案是:買電器去京東、買衣服去淘寶、買垃圾袋去拼多多。你看,這就是一個(gè)購物心智模型,你的心里對這三家平臺(tái)已經(jīng)產(chǎn)生了固有的心智,如果讓你去京東買衣服,你會(huì)不會(huì)覺得,有些別扭?沒錯(cuò),這就是心智模型。
百度百科對心智模型的定義是:“深植我們心中關(guān)于我們自己、別人、組織及周圍世界每個(gè)層面的假設(shè)、形象和故事。并深受習(xí)慣思維、定勢思維、已有知識(shí)的局限?!标P(guān)鍵詞是:故事、習(xí)慣、局限。

淘寶一開始就我們講了一個(gè)故事,一個(gè)萬能的集市,我們習(xí)慣在上面買衣服,但是也產(chǎn)生了局限性,那就是,當(dāng)我們想買大額電器的時(shí)候,還是會(huì)選擇京東。我個(gè)人對心智模型的理解是:我們內(nèi)心深處對一個(gè)事物的看法。空口聊天多沒意思,下面舉個(gè)例子。這是一尊陶俑,第一眼你覺得她像什么?

是不是覺得像米老鼠?
為什么?
因?yàn)樘召傅念^上的發(fā)髻和米老鼠標(biāo)志性的耳朵很像。
如果你從沒見過米老鼠,你還會(huì)覺得她像米老鼠嗎?
一定不會(huì)。
這就是心智模型,你對頭頂?shù)拇髨A形的心智是“米老鼠”,所以一旦你看到類似的形狀,米老鼠的形象就會(huì)浮現(xiàn)出來,這個(gè)發(fā)髻的形狀和你心里對米老鼠的形象產(chǎn)生了匹配。

對心智模型有沒有一點(diǎn)印象了?下面我們接著聊。

我不想用具體的界面來聊,那樣的話太散,我認(rèn)為要想理解一個(gè)概念,最好還是從“面”的角度來說,所以下面我會(huì)舉一些商業(yè)上的案例來輔助理解。心智模型有哪三種運(yùn)用方式?
第一種:創(chuàng)建新的心智模型
第二種:改變舊的心智模型
第三種:匹配現(xiàn)有的心智模型
可以理解成一件事情的新生、改變和延續(xù)。

下面咱們一個(gè)個(gè)來。第一種:創(chuàng)建新的心智模型
難度指數(shù):難啊。
記得《盜夢空間》里最難的是什么嗎?
最難的不是盜夢,而是植入一個(gè)想法。

創(chuàng)建新的心智模型有異曲同工之妙,都是讓別人內(nèi)心接收一個(gè)事物,需要刻意培養(yǎng)。
舉幾個(gè)例子。
當(dāng)年外賣剛開始的時(shí)候,家家搞補(bǔ)貼,很多時(shí)候幾乎不花錢就可以點(diǎn)外賣,后來這些福利沒有了,為啥?
因?yàn)辄c(diǎn)外賣的心智已經(jīng)培養(yǎng)好了,你離不開它了,所以平臺(tái)可以“不慣著你了”。
還有唯品會(huì)的正品低價(jià)、瑞幸一開始的星巴克平替,這些都是他們想要植入到用戶大腦中的心智。
為什么要費(fèi)勁植入一個(gè)新的想法?
因?yàn)橐坏┲踩肓?,就很難改變。
現(xiàn)在我身邊的很多朋友想買一些低價(jià)的品牌都會(huì)上唯品會(huì),買咖啡會(huì)喝瑞幸,一旦用戶的習(xí)慣養(yǎng)成就很難改變,意味著什么?

意味著留存和轉(zhuǎn)化的成本更低了。
第二種:改變舊的心智模型
難度指數(shù):也難。
《盜夢空間》里小李子的妻子被他植入了一個(gè)想法“你不在現(xiàn)實(shí)世界里”,當(dāng)他和他妻子回到現(xiàn)實(shí)世界后,他妻子仍舊認(rèn)為自己不在現(xiàn)實(shí)世界里,這個(gè)被植入的想法已經(jīng)根深蒂固,很難改變。
所以改變舊的心智也不簡單。
例如小米最初主打極致性價(jià)比,后來想往高端路線走,很難,大家心里已經(jīng)認(rèn)準(zhǔn)了小米就是“性價(jià)比之王”,也就是你的產(chǎn)品不僅要好還要便宜。
這就導(dǎo)致小米一漲價(jià),大家就罵他們忘了初心……所以小米拆分出了紅米主攻性價(jià)比,小米往高端發(fā)展,但是仍舊很難。

拼多多的百億補(bǔ)貼也是一樣的道理,一開始的砍一刀深入人心,大家對拼多多的心智已經(jīng)成型:便宜,質(zhì)量一般。拼多多想改變這個(gè)心智,推出百億補(bǔ)貼,并承諾假一賠十,就是想告訴大家,我拼多多,也是有正品好貨的。不過,效果嘛,見仁見智。第三種:匹配現(xiàn)有的心智模型
難度指數(shù):相對簡單。
其實(shí)匹配現(xiàn)有的心智模型,是相對最簡單的方法,市場已經(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)有的心智模型下面聊聊,咱們怎么做才能更加匹配用戶的心智模型?
同樣的,我不會(huì)拿具體頁面來舉例,還是希望把思考方式分享給大家,而不是某一個(gè)頁面的設(shè)計(jì)。

要想匹配用戶的心智模型其實(shí)就三步:

了解業(yè)務(wù)、了解用戶、競品調(diào)研。
或者可以這么說, 在懂業(yè)務(wù)、懂用戶的基礎(chǔ)上,還要了解行業(yè)內(nèi)的通用做法。

1)了解業(yè)務(wù)
一定要了解業(yè)務(wù),為什么?
因?yàn)楹玫脑O(shè)計(jì)方案千千萬,但是匹配你的業(yè)務(wù)的方案才是好方案,如果不了解業(yè)務(wù),可能設(shè)計(jì)出來的方案就是自嗨,例如網(wǎng)上很多的dribble風(fēng)設(shè)計(jì)。

又比如說手機(jī)瀏覽器一般都把搜索框放到屏幕頂部,而夸克瀏覽器卻把搜索框放到了下面。
為什么?

因?yàn)榭淇讼胪品瓊鹘y(tǒng)的瀏覽器,想打造一款更年輕更好用的瀏覽器,把搜索框放到下面也是滿足他們的業(yè)務(wù)訴求,現(xiàn)在手機(jī)屏幕越來越大,搜索框放在下面手指操作更加方便。所以,一定要先去了解業(yè)務(wù)。
拼多多和淘寶同樣都是電商平臺(tái),可它們的用戶心智相差甚大,因?yàn)樽詈蠓桨冈O(shè)計(jì)是服務(wù)于最初的業(yè)務(wù)目標(biāo)的,業(yè)務(wù)不同,呈現(xiàn)的方案也不一樣,最后讓用戶形成的心智也不同。

2)了解用戶為啥?給老人和小孩設(shè)計(jì)的界面能一樣嗎?
就拿顏色和文字來說。
小孩喜歡高飽和、豐富的顏色,而老人則需要考慮在各種場景下都能看得清楚信息的顏色。
小孩喜歡圓潤的卡通字體,而老人需要識(shí)別度更高的字體,更大的字號(hào)。

不同的用戶,采用的設(shè)計(jì)一定是不同的,只有了解了他們的喜好和痛點(diǎn),才能做出符合他們心智模型的設(shè)計(jì)。3)競品調(diào)研為啥要競品調(diào)研呢?
因?yàn)楦偲泛臀覀兊漠a(chǎn)品類似,那么意味著用戶大概率重合度也高,甚至業(yè)務(wù)上都有一定相似度,那么意味著,競品的方案,大概率是經(jīng)過市場驗(yàn)證的符合用戶心智模型的方案。
你看,既然競品已經(jīng)給咱們打了個(gè)樣,為何還要自己悶頭造輪子呢?

咱們目的是解決問題,又不是為了證明自己很厲害。
但是,不要誤解,我不是說照著競品抄,而是取長補(bǔ)短,所以不僅要調(diào)研,還要分析,分析就是把競品的優(yōu)劣勢找出來,好的地方咱們可以酌情借鑒,不好的地方,咱們也要避個(gè)雷嘛。
好了,小結(jié)一下,要想匹配用戶的心智模型,一定要了解業(yè)務(wù)、了解用戶,還要做競品調(diào)研了解市場的通識(shí)性做法。

作者:餿面包
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

如何尋找更多的體驗(yàn)優(yōu)化思路

ui設(shè)計(jì)分享達(dá)人

不知道你會(huì)不會(huì)經(jīng)常經(jīng)歷這個(gè)情況:

1.自己設(shè)計(jì)的交互稿,不知道能不能再優(yōu)化。
2.審別人稿的時(shí)候,不知道提的意見是不是全面和更有價(jià)值的。
3.看別人作品,不知道怎么分析別人的作品,挖出有價(jià)值的點(diǎn)。

這些情況的出現(xiàn)我想是因?yàn)槲覀兪峭ㄟ^回憶以前的經(jīng)驗(yàn)來記起知識(shí),然后去設(shè)計(jì)或者審查設(shè)計(jì)稿。所以很考驗(yàn)我們過去的經(jīng)驗(yàn)和記憶力,一旦設(shè)計(jì)的是一個(gè)不是很熟悉的需求,我們能回憶的知識(shí)點(diǎn)很少,那我們會(huì)去借助大量的參考去完成交互設(shè)計(jì)。

工具類產(chǎn)品如何設(shè)計(jì)?大廠高手總結(jié)了5個(gè)要點(diǎn)!

資深UI設(shè)計(jì)者

設(shè)計(jì)工具類產(chǎn)品需要綜合考慮用戶需求、產(chǎn)品功能和用戶體驗(yàn)。以下是大廠高手總結(jié)的5個(gè)設(shè)計(jì)要點(diǎn):

  1. 簡潔而直觀的界面設(shè)計(jì):工具類產(chǎn)品應(yīng)該擁有直觀的界面設(shè)計(jì),減少用戶的認(rèn)知負(fù)擔(dān)和操作復(fù)雜度。關(guān)鍵功能應(yīng)該明確可見,界面元素的排列應(yīng)該合乎邏輯,并遵循常見的設(shè)計(jì)模式和交互規(guī)范。

  2. 強(qiáng)大而高效的功能:工具類產(chǎn)品應(yīng)該滿足用戶的實(shí)際需求,提供強(qiáng)大而高效的功能。產(chǎn)品應(yīng)該具備核心功能,并結(jié)合用戶反饋不斷優(yōu)化和升級(jí),以提供更加豐富的功能和更好的用戶體驗(yàn)。

  3. 清晰而詳盡的文檔和教程:工具類產(chǎn)品應(yīng)該提供清晰、詳細(xì)的文檔和教程,幫助用戶了解產(chǎn)品的特性和功能。文檔和教程應(yīng)該包含逐步指導(dǎo)、示例代碼和常見問題解答,以減少用戶在使用過程中的困惑和迷失。

  4. 友好而高效的技術(shù)支持:工具類產(chǎn)品的技術(shù)支持應(yīng)該友好、高效。產(chǎn)品開發(fā)團(tuán)隊(duì)?wèi)?yīng)該設(shè)立專門的技術(shù)支持渠道,快速響應(yīng)用戶的問題和需求,并及時(shí)提供解決方案。技術(shù)支持人員應(yīng)具備專業(yè)知識(shí)和良好的溝通能力,能夠幫助用戶解決問題和提供專業(yè)建議。

  5. 持續(xù)的更新和優(yōu)化:工具類產(chǎn)品應(yīng)該持續(xù)進(jìn)行更新和優(yōu)化,以適應(yīng)用戶的不斷變化的需求和技術(shù)環(huán)境。通過用戶反饋和市場調(diào)研,及時(shí)修復(fù)bug、改善性能,并增加新功能和改進(jìn)既有功能,提高產(chǎn)品的競爭力和用戶滿意度。

總之,設(shè)計(jì)工具類產(chǎn)品需要從用戶的角度出發(fā),以用戶為中心,注重界面設(shè)計(jì)、功能、文檔、技術(shù)支持和持續(xù)更新等方面的要點(diǎn),以提供優(yōu)質(zhì)的用戶體驗(yàn)和滿足用戶的需求。

今日分享這篇文章是藍(lán)藍(lán)設(shè)計(jì)的原創(chuàng)文章,未來將會(huì)持續(xù)在平臺(tái)上分享關(guān)于設(shè)計(jì)行業(yè)的文章。此外藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),添加vx藍(lán)小助ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請您入群。同時(shí)添加藍(lán)小助我們將會(huì)為您提供優(yōu)秀的設(shè)計(jì)案例和設(shè)計(jì)素材等,歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

藍(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ù)、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ì)公司

深度解析交互設(shè)計(jì)師是否會(huì)被取代?

資深UI設(shè)計(jì)者

深度解析交互設(shè)計(jì)師是否會(huì)被取代?

交互設(shè)計(jì)師是數(shù)字產(chǎn)品設(shè)計(jì)領(lǐng)域中的重要角色,他們負(fù)責(zé)設(shè)計(jì)用戶界面、用戶體驗(yàn)和用戶互動(dòng)等方面。隨著人工智能技術(shù)的發(fā)展和普及,有些人擔(dān)心交互設(shè)計(jì)師的工作會(huì)被機(jī)器替代。本文將從以下幾個(gè)方面探討交互設(shè)計(jì)師是否會(huì)被取代。

一、交互設(shè)計(jì)師的作用

交互設(shè)計(jì)師的工作涉及到用戶的心理、行為和需求等方面,需要對用戶進(jìn)行深入的研究和分析。通過了解用戶的需求和行為,交互設(shè)計(jì)師可以設(shè)計(jì)出符合用戶習(xí)慣和心理的用戶界面和用戶體驗(yàn)。交互設(shè)計(jì)師還需要不斷地進(jìn)行測試和優(yōu)化,以確保數(shù)字產(chǎn)品能夠符合用戶的需求和期望。因此,交互設(shè)計(jì)師的作用是不可替代的。

二、人工智能技術(shù)的應(yīng)用

人工智能技術(shù)可以通過機(jī)器學(xué)習(xí)和自然語言處理等技術(shù)來模擬人類的思維和行為,從而輔助交互設(shè)計(jì)師完成一些簡單的設(shè)計(jì)任務(wù)。例如,人工智能技術(shù)可以根據(jù)用戶的行為和反饋,自動(dòng)優(yōu)化用戶界面和用戶體驗(yàn)。但是,人工智能技術(shù)還無法完全替代交互設(shè)計(jì)師的工作。

三、交互設(shè)計(jì)師的創(chuàng)造力和設(shè)計(jì)思維

交互設(shè)計(jì)師需要根據(jù)用戶的需求和行為,設(shè)計(jì)出符合用戶習(xí)慣和心理的用戶界面和用戶體驗(yàn)。這需要交互設(shè)計(jì)師具備創(chuàng)造力和設(shè)計(jì)思維。交互設(shè)計(jì)師需要不斷地創(chuàng)新和嘗試,以滿足用戶的需求和期望。這是人工智能技術(shù)無法替代的。

四、交互設(shè)計(jì)師的智慧和經(jīng)驗(yàn)

交互設(shè)計(jì)師需要不斷地進(jìn)行測試和優(yōu)化,以確保數(shù)字產(chǎn)品能夠符合用戶的需求和期望。這需要交互設(shè)計(jì)師具備豐富的經(jīng)驗(yàn)和智慧。交互設(shè)計(jì)師需要不斷地學(xué)習(xí)和研究,以提高自己的專業(yè)水平。這也是人工智能技術(shù)無法替代的。

五、結(jié)論

交互設(shè)計(jì)師的作用是不可替代的。雖然人工智能技術(shù)可以輔助交互設(shè)計(jì)師完成一些簡單的設(shè)計(jì)任務(wù),但是交互設(shè)計(jì)師的創(chuàng)造力、設(shè)計(jì)思維、智慧和經(jīng)驗(yàn)是人工智能技術(shù)無法替代的。在數(shù)字產(chǎn)品的設(shè)計(jì)和開發(fā)過程中,交互設(shè)計(jì)師的作用將會(huì)越來越重要,因?yàn)樗麄兡軌驗(yàn)橛脩籼峁└玫挠脩趔w驗(yàn)和用戶互動(dòng),從而提高數(shù)字產(chǎn)品的質(zhì)量和用戶滿意度。

今日分享這篇文章是藍(lán)藍(lán)設(shè)計(jì)的原創(chuàng)文章,未來將會(huì)持續(xù)在平臺(tái)上分享關(guān)于設(shè)計(jì)行業(yè)的文章。此外藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),添加vx藍(lán)小助ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請您入群。同時(shí)添加藍(lán)小助我們將會(huì)為您提供優(yōu)秀的設(shè)計(jì)案例和設(shè)計(jì)素材等,歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

藍(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ù)、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ì)公司

高級(jí)設(shè)計(jì)師都掌握的心智模型,這篇幫你快速掌握它!

周周

一、用戶心智模型是什么

先問你一個(gè)問題。

拼多多、淘寶、京東這三家購物平臺(tái),你認(rèn)為它們的區(qū)別是什么?

或者換個(gè)方式問你。

買電器你去哪個(gè)平臺(tái)?買衣服你去哪個(gè)平臺(tái)? 買垃圾袋你去哪個(gè)平臺(tái)?

是不是有了答案了?

沒猜錯(cuò)的話, 大部分人的答案是:買電器去京東、買衣服去淘寶、買垃圾袋去拼多多。

你看,這就是一個(gè)購物心智模型,你的心里對這三家平臺(tái)已經(jīng)產(chǎn)生了固有的心智,如果讓你去京東買衣服,你會(huì)不會(huì)覺得,有些別扭?沒錯(cuò),這就是心智模型。

百度百科對心智模型的定義是:

“深植我們心中關(guān)于我們自己、別人、組織及周圍世界每個(gè)層面的假設(shè)、形象和故事。并深受習(xí)慣思維、定勢思維、已有知識(shí)的局限?!?

關(guān)鍵詞是:故事、習(xí)慣、局限。

高級(jí)設(shè)計(jì)師都掌握的心智模型,這篇幫你快速掌握它!

淘寶一開始就我們講了一個(gè)故事,一個(gè)萬能的集市,我們習(xí)慣在上面買衣服,但是也產(chǎn)生了局限性,那就是,當(dāng)我們想買大額電器的時(shí)候,還是會(huì)選擇京東。

我個(gè)人對心智模型的理解是:

我們內(nèi)心深處對一個(gè)事物的看法。

空口聊天多沒意思,下面舉個(gè)例子。

這是一尊陶俑,第一眼你覺得她像什么?

高級(jí)設(shè)計(jì)師都掌握的心智模型,這篇幫你快速掌握它!

是不是覺得像米老鼠?

為什么?

因?yàn)樘召傅念^上的發(fā)髻和米老鼠標(biāo)志性的耳朵很像。

如果你從沒見過米老鼠,你還會(huì)覺得她像米老鼠嗎?

一定不會(huì)。

這就是心智模型,你對頭頂?shù)拇髨A形的心智是“米老鼠”,所以一旦你看到類似的形狀,米老鼠的形象就會(huì)浮現(xiàn)出來,這個(gè)發(fā)髻的形狀和你心里對米老鼠的形象產(chǎn)生了匹配。

高級(jí)設(shè)計(jì)師都掌握的心智模型,這篇幫你快速掌握它!

對心智模型有沒有一點(diǎn)印象了?下面我們接著聊。

二、心智模型的3運(yùn)用

我不想用具體的界面來聊,那樣的話太散,我認(rèn)為要想理解一個(gè)概念,最好還是從“面”的角度來說,所以下面我會(huì)舉一些商業(yè)上的案例來輔助理解。

心智模型有哪三種運(yùn)用方式?

第一種:創(chuàng)建新的心智模型

第二種:改變舊的心智模型

第三種:匹配現(xiàn)有的心智模型

可以理解成一件事情的新生、改變和延續(xù)。

高級(jí)設(shè)計(jì)師都掌握的心智模型,這篇幫你快速掌握它!

下面咱們一個(gè)個(gè)來。

第一種:創(chuàng)建新的心智模型

難度指數(shù):難啊。

記得《盜夢空間》里最難的是什么嗎?

最難的不是盜夢,而是植入一個(gè)想法。

高級(jí)設(shè)計(jì)師都掌握的心智模型,這篇幫你快速掌握它!

創(chuàng)建新的心智模型有異曲同工之妙,都是讓別人內(nèi)心接收一個(gè)事物,需要刻意培養(yǎng)。

舉幾個(gè)例子。

當(dāng)年外賣剛開始的時(shí)候,家家搞補(bǔ)貼,很多時(shí)候幾乎不花錢就可以點(diǎn)外賣,后來這些福利沒有了,為啥?

因?yàn)辄c(diǎn)外賣的心智已經(jīng)培養(yǎng)好了,你離不開它了,所以平臺(tái)可以“不慣著你了”。

還有唯品會(huì)的正品低價(jià)、瑞幸一開始的星巴克平替,這些都是他們想要植入到用戶大腦中的心智。

為什么要費(fèi)勁植入一個(gè)新的想法?

因?yàn)橐坏┲踩肓?,就很難改變。

現(xiàn)在我身邊的很多朋友想買一些低價(jià)的品牌都會(huì)上唯品會(huì),買咖啡會(huì)喝瑞幸,一旦用戶的習(xí)慣養(yǎng)成就很難改變,意味著什么?

意味著留存和轉(zhuǎn)化的成本更低了。

第二種:改變舊的心智模型

難度指數(shù):也難。

《盜夢空間》里小李子的妻子被他植入了一個(gè)想法“你不在現(xiàn)實(shí)世界里”,當(dāng)他和他妻子回到現(xiàn)實(shí)世界后,他妻子仍舊認(rèn)為自己不在現(xiàn)實(shí)世界里,這個(gè)被植入的想法已經(jīng)根深蒂固,很難改變。

所以改變舊的心智也不簡單。

例如小米最初主打極致性價(jià)比,后來想往高端路線走,很難,大家心里已經(jīng)認(rèn)準(zhǔn)了小米就是“性價(jià)比之王”,也就是你的產(chǎn)品不僅要好還要便宜。

這就導(dǎo)致小米一漲價(jià),大家就罵他們忘了初心……所以小米拆分出了紅米主攻性價(jià)比,小米往高端發(fā)展,但是仍舊很難。

高級(jí)設(shè)計(jì)師都掌握的心智模型,這篇幫你快速掌握它!

拼多多的百億補(bǔ)貼也是一樣的道理,一開始的砍一刀深入人心,大家對拼多多的心智已經(jīng)成型:便宜,質(zhì)量一般。拼多多想改變這個(gè)心智,推出百億補(bǔ)貼,并承諾假一賠十,就是想告訴大家,我拼多多,也是有正品好貨的。不過,效果嘛,見仁見智。

第三種:匹配現(xiàn)有的心智模型

難度指數(shù):相對簡單。

其實(shí)匹配現(xiàn)有的心智模型,是相對最簡單的方法,市場已經(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 種用法:

  1. 新建:創(chuàng)建新的心智模型
  2. 改變:改變舊的心智模型
  3. 延續(xù):匹配現(xiàn)有的心智模型

下面聊聊,咱們怎么做才能更加匹配用戶的心智模型?

同樣的,我不會(huì)拿具體頁面來舉例,還是希望把思考方式分享給大家,而不是某一個(gè)頁面的設(shè)計(jì)。

三、心智模型的3匹配

要想匹配用戶的心智模型其實(shí)就三步:

了解業(yè)務(wù)、了解用戶、競品調(diào)研。

或者可以這么說, 在懂業(yè)務(wù)、懂用戶的基礎(chǔ)上,還要了解行業(yè)內(nèi)的通用做法。

高級(jí)設(shè)計(jì)師都掌握的心智模型,這篇幫你快速掌握它!

1. 了解業(yè)務(wù)

一定要了解業(yè)務(wù),為什么?

因?yàn)楹玫脑O(shè)計(jì)方案千千萬,但是匹配你的業(yè)務(wù)的方案才是好方案,如果不了解業(yè)務(wù),可能設(shè)計(jì)出來的方案就是自嗨,例如網(wǎng)上很多的 dribble 風(fēng)設(shè)計(jì)。

高級(jí)設(shè)計(jì)師都掌握的心智模型,這篇幫你快速掌握它!

又比如說手機(jī)瀏覽器一般都把搜索框放到屏幕頂部,而夸克瀏覽器卻把搜索框放到了下面。

為什么?

高級(jí)設(shè)計(jì)師都掌握的心智模型,這篇幫你快速掌握它!

因?yàn)榭淇讼胪品瓊鹘y(tǒng)的瀏覽器,想打造一款更年輕更好用的瀏覽器,把搜索框放到下面也是滿足他們的業(yè)務(wù)訴求,現(xiàn)在手機(jī)屏幕越來越大,搜索框放在下面手指操作更加方便。

所以,一定要先去了解業(yè)務(wù)。

拼多多和淘寶同樣都是電商平臺(tái),可它們的用戶心智相差甚大,因?yàn)樽詈蠓桨冈O(shè)計(jì)是服務(wù)于最初的業(yè)務(wù)目標(biāo)的,業(yè)務(wù)不同,呈現(xiàn)的方案也不一樣,最后讓用戶形成的心智也不同。

高級(jí)設(shè)計(jì)師都掌握的心智模型,這篇幫你快速掌握它!

2. 了解用戶

為啥?給老人和小孩設(shè)計(jì)的界面能一樣嗎?

就拿顏色和文字來說。

小孩喜歡高飽和、豐富的顏色,而老人則需要考慮在各種場景下都能看得清楚信息的顏色。

小孩喜歡圓潤的卡通字體,而老人需要識(shí)別度更高的字體,更大的字號(hào)。

高級(jí)設(shè)計(jì)師都掌握的心智模型,這篇幫你快速掌握它!

不同的用戶,采用的設(shè)計(jì)一定是不同的,只有了解了他們的喜好和痛點(diǎn),才能做出符合他們心智模型的設(shè)計(jì)。

3. 競品調(diào)研

為啥要競品調(diào)研呢?

因?yàn)楦偲泛臀覀兊漠a(chǎn)品類似,那么意味著用戶大概率重合度也高,甚至業(yè)務(wù)上都有一定相似度,那么意味著,競品的方案,大概率是經(jīng)過市場驗(yàn)證的符合用戶心智模型的方案。

你看,既然競品已經(jīng)給咱們打了個(gè)樣,為何還要自己悶頭造輪子呢?

咱們目的是解決問題,又不是為了證明自己很厲害。

但是,不要誤解,我不是說照著競品抄,而是取長補(bǔ)短,所以不僅要調(diào)研,還要分析,分析就是把競品的優(yōu)劣勢找出來,好的地方咱們可以酌情借鑒,不好的地方,咱們也要避個(gè)雷嘛。

好了,小結(jié)一下,要想匹配用戶的心智模型,一定要了解業(yè)務(wù)、了解用戶,還要做競品調(diào)研了解市場的通識(shí)性做法。

以上。




文章來源:優(yōu)設(shè)網(wǎng)    作者:餿面包


分享此文一切功德,皆悉回向給文章原作者及眾讀者.


免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(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ù)


如何做好競品分析?來看這份超詳細(xì)的實(shí)例拆解

周周

一、競品調(diào)研的結(jié)構(gòu)

首先說明,競品調(diào)研的方法有很多,本文只提供一種方法供參考,建議大家活學(xué)活用。建議從下面 4 個(gè)方面入手:

1. 調(diào)研背景

主要說一些為什么要調(diào)研,希望通過調(diào)研答達(dá)到什么樣的目的?是視覺升級(jí)、體驗(yàn)升級(jí)還是為了提升轉(zhuǎn)化率?只有了解為什么做調(diào)研這件事情,才能知道從哪幾個(gè)維度調(diào)研。

2. 調(diào)研樣本

建議選幾個(gè)直接競品,再選幾個(gè)優(yōu)秀的次要競品也是可以的,可以幫助補(bǔ)齊盲點(diǎn)。

3. 調(diào)研維度

調(diào)研維度要根據(jù)調(diào)研目的來確定,例如如果是為了視覺升級(jí),那么調(diào)研維度主要就集中在視覺效果上,如果是體驗(yàn)升級(jí),那么調(diào)研維度主要集中在交互體驗(yàn)層面。所以維度的選擇一定是和此次調(diào)研的目的緊密相關(guān)的,不過,倒也不是說如果是視覺升級(jí)就只調(diào)研視覺方面的內(nèi)容,而是咱們要有一個(gè)主要的調(diào)研方向,啥都想要,最后啥都做不好。

4. 結(jié)論

結(jié)論是最重要的,畢竟,做這次的調(diào)研不就是為了這份結(jié)論嗎?所以最后一定要有結(jié)論,也就是咱們通過調(diào)研得到了什么結(jié)論。

二、實(shí)例拆解

1. 調(diào)研背景

我公司這個(gè)項(xiàng)目是做一個(gè)官網(wǎng)的改版,官網(wǎng)主要就改版主要目標(biāo)有兩個(gè):

第一個(gè)目標(biāo)是視覺體驗(yàn)升級(jí),拆解下來就是界面更好看,內(nèi)容更好找。

第二個(gè)目標(biāo)是提升用戶轉(zhuǎn)化率,更細(xì)致的拆解一下就是讓更多的用戶點(diǎn)擊「咨詢」按鈕。

可以得到關(guān)鍵詞:界面更好看、內(nèi)容更好找、咨詢客服的人數(shù)更多。

好,咱們繼續(xù),下一步是找樣本。

2. 調(diào)研樣本

前面提到過,樣本最好是直接競品+間接競品(主要是一線大廠競品)。所以這次調(diào)研我選擇了幾個(gè)直接競品的官網(wǎng),以及華為、飛書等這樣的做的比較優(yōu)秀的產(chǎn)品進(jìn)行輔助分析。

3. 選取調(diào)研維度

調(diào)研維度又可以分為兩大部分:整體結(jié)構(gòu)、內(nèi)容拆解。

了解整體架構(gòu)是每個(gè)競品調(diào)研都離不開的步驟,可以幫助我們快速了解行業(yè)內(nèi)的通識(shí)性做法,畢竟站在巨人的肩膀上才能看得更遠(yuǎn)嘛。

①整體架構(gòu)

我當(dāng)時(shí)的做法是把主要競品的官網(wǎng)都截圖下來,然后一個(gè)模塊一個(gè)模塊的去分析,其實(shí)看下來你會(huì)發(fā)現(xiàn),大家的做法都是有跡可循的。

看下面的圖片,我把他們類似的模塊用同樣的顏色框出來,框出來后就會(huì)發(fā)現(xiàn),哦,原來,這就是行業(yè)內(nèi)的通識(shí)性做法。

如何做好競品分析?來看這份超詳細(xì)的實(shí)例拆解(附模版下載)

然后我把這種通識(shí)性做法歸納總結(jié)出來,發(fā)現(xiàn),其實(shí)官網(wǎng)首頁可以劃分為四大板塊:

  1. 常規(guī)內(nèi)容:head、foot
  2. 建立認(rèn)知:banner、產(chǎn)品介紹、解決方案、產(chǎn)品優(yōu)勢
  3. 增加信任:客戶評(píng)價(jià)、客戶案例、新聞資訊、行業(yè)認(rèn)可
  4. 轉(zhuǎn)化:免費(fèi)試用、在線咨詢、電話咨詢

如何做好競品分析?來看這份超詳細(xì)的實(shí)例拆解(附模版下載)

你看,看似有很多復(fù)雜內(nèi)容的官網(wǎng), 其實(shí)也就這幾個(gè)模塊,這樣看是不是就清晰多了。

既然咱們通過架構(gòu)梳理來了官網(wǎng)的內(nèi)容,下一步就進(jìn)行內(nèi)容的拆解了,拆解什么內(nèi)容?就是拆解上面總結(jié)出來的規(guī)律呀。

②內(nèi)容拆解

為啥要拆解內(nèi)容呢?因?yàn)樵蹅兏偲贩治龅哪康牟痪褪且龅健叭擞形覂?yōu)”嘛,咱們競品分析是為了青出于藍(lán)而勝于藍(lán)呀,所以咱們不能直接抄人家的內(nèi)容,這是無效設(shè)計(jì),咱們要做的是分析他們的優(yōu)點(diǎn),然后借鑒,然后超越。

進(jìn)行內(nèi)容拆解的時(shí)候,建議先定幾個(gè)拆解維度,不然會(huì)沒有方向,這里我分了三個(gè)維度來進(jìn)行拆解:

如何做好競品分析?來看這份超詳細(xì)的實(shí)例拆解(附模版下載)

  1. 用戶訴求:用戶的需求、疑問或者想達(dá)到的目標(biāo)
  2. 業(yè)務(wù)策略:針對用戶訴求,網(wǎng)站做出的一系列解決方案
  3. 表達(dá)形式:完成業(yè)務(wù)策略的交互/視覺展現(xiàn)方式

我就拿「建立認(rèn)知」板塊來舉例。

官網(wǎng)首頁的建立認(rèn)知是什么?

是讓進(jìn)來的用戶對整個(gè)網(wǎng)站有一個(gè)基礎(chǔ)的認(rèn)知,顧客來了,對店鋪總要有一個(gè)第一印象吧。

通過前面的架構(gòu)拆解我們發(fā)現(xiàn),首頁一般使用 4 種方法來對用戶建立認(rèn)知,哪四種?banner、產(chǎn)品介紹、解決方案、產(chǎn)品優(yōu)勢

一個(gè)用戶看了 banner,瀏覽了產(chǎn)品介紹和解決方案,看了產(chǎn)品優(yōu)勢,是不是對咱們的產(chǎn)品有了一個(gè)認(rèn)知了,這就是建立認(rèn)知的過程。

那么咱們?nèi)绾稳シ治瞿兀?

我的做法是一個(gè)個(gè)板塊分析,有些麻煩啊,但是相信我,值得。

下面我就拿建立認(rèn)知里面的“產(chǎn)品介紹”來舉例子,看看如何去分析產(chǎn)品介紹這個(gè)板塊。

使用 3 個(gè)維度來分析:

維度 1:用戶訴求(用戶進(jìn)來之后的訴求)

產(chǎn)品介紹內(nèi)容是否有我需要的產(chǎn)品和功能?是否滿足我的需求?

維度 2:業(yè)務(wù)策略(針對用戶訴求,業(yè)務(wù)是怎么解決的)

講清楚三個(gè)問題,即“我們的產(chǎn)品是什么”、“我們能做什么”、“我們有什么優(yōu)勢“

維度 3:常用表達(dá)形式(用什么樣的表達(dá)方式來實(shí)現(xiàn)策略)

分點(diǎn)描述:減少大段落文字,分點(diǎn)描述,增強(qiáng)閱讀性,降低理解成本

提煉賣點(diǎn):將核心功能提煉出來,吸引用戶注意力,精準(zhǔn)打擊,結(jié)合圖標(biāo)提升可讀性

試用入口:視覺上強(qiáng)化按鈕,引導(dǎo)轉(zhuǎn)化

圖文結(jié)合:圖>文,可視化表達(dá)降低理解成本,增強(qiáng)臨場感

拆解下來,是不是對產(chǎn)品介紹板塊很了解了,產(chǎn)品介紹板塊主要的目的就是為了講清楚咱們是誰,咱們的優(yōu)勢啊。王婆賣瓜,瓜雖好,但是咱們得讓來的人知道咱們的瓜好呀,所以表達(dá)方式也是至關(guān)重要的,用什么形式去表達(dá)這個(gè)板塊呢?其實(shí)競品已經(jīng)有了很好的解決方案,那就是上面描述的。

你看,這樣一通分析,其實(shí)你的方案就自然而出來了,你知道往哪個(gè)方向去使勁了,而不是看別人有啥咱們就做啥。


文章來源:優(yōu)設(shè)網(wǎng)    作者:餿面包


分享此文一切功德,皆悉回向給文章原作者及眾讀者.


免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(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ù)


想借鑒高手的配色體系?試試網(wǎng)頁取色神器 Alwane

周周

如果想知道某個(gè)網(wǎng)站配色方式,除了打開開發(fā)人員工具或是檢視源碼,也有第三方服務(wù)可以使用,即使無法完整復(fù)制別人的配色,也能快速得知網(wǎng)站使用的顏色代碼或配色模式,取得顏色的色碼或色彩名稱。有沒有任何更直覺、簡單的方式來完成這些工作呢?若你有類似的需求,接下來要介紹的服務(wù)或許可以滿足,這項(xiàng)服務(wù)會(huì)提取特定網(wǎng)頁使用的顏色,讓顏色相關(guān)信息更一目了然。

想借鑒高手的配色體系?試試網(wǎng)頁取色神器 Alwane

本文要介紹的「Alwane」是一個(gè)網(wǎng)頁色彩提取工具,可以在使用者輸入特定的網(wǎng)址后取得該網(wǎng)站使用的顏色代碼或描述,產(chǎn)生為調(diào)色盤鏈接,重新分類、編排各種顏色,最簡單的使用方式是輸入網(wǎng)站網(wǎng)址就能提取,也能顯示其他相關(guān)色彩,如果想分析、保存某個(gè)網(wǎng)站或品牌使用的顏色,Alwane 是個(gè)非常方便而且好用的工具。

除了將提取的顏色代碼以可視化方式呈現(xiàn),還能夠以調(diào)色盤或是程序代碼方式呈現(xiàn),包括 CSS 和 SASS 兩種顯示程序代碼,對于要取得特定的網(wǎng)站顏色來說很有用,若有類似需求的話不妨打開 Alwane 網(wǎng)站試試看。

Alwane

網(wǎng)站鏈接:https://alwane.io/

使用教學(xué)

開啟 Alwane 網(wǎng)站后直接在左上角「Extract CSS Colors」輸入要提取顏色的網(wǎng)址,預(yù)設(shè)情況下會(huì)從 HTML 和 CSS 樣式表單取得顏色,如果某些情境下需要從 JavaScript 獲取顏色可在「Advanced」設(shè)定選項(xiàng)找到。

想借鑒高手的配色體系?試試網(wǎng)頁取色神器 Alwane

從提取后的色彩結(jié)果可以看到各種顏色分布,包括顏色的預(yù)覽、變量名稱和色碼(hex code),從左側(cè)可選擇為顏色重新分組、排序或是切換 CSS、SASS 色碼。

想借鑒高手的配色體系?試試網(wǎng)頁取色神器 Alwane

從上方選項(xiàng)切換調(diào)色盤或程序代碼模式,也能快速將所有 CSS 代碼復(fù)制到剪貼簿。

想借鑒高手的配色體系?試試網(wǎng)頁取色神器 Alwane

如果想要保存或分享網(wǎng)站的配色、調(diào)色盤、CSS 等信息,點(diǎn)選右上角「Generate」就能產(chǎn)生鏈接咯!

想借鑒高手的配色體系?試試網(wǎng)頁取色神器 Alwane

值得一試的三個(gè)理由:

  1. Alwane 網(wǎng)頁色彩分析工具,輸入網(wǎng)址就能提取網(wǎng)頁出現(xiàn)的顏色
  2. 從 HTML、CSS 和 JavaScript 獲取色彩信息
  3. 查詢結(jié)果會(huì)有顏色預(yù)覽、變量名稱和色碼,也能切換為程序代碼模式

文章來源:優(yōu)設(shè)網(wǎng)    作者:PSERIC


分享此文一切功德,皆悉回向給文章原作者及眾讀者.


免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(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ù)


日歷

鏈接

個(gè)人資料

存檔