簡潔而直觀的界面設(shè)計(jì)：工具類產(chǎn)品應(yīng)該擁有直觀的界面設(shè)計(jì)，減少用戶的認(rèn)知負(fù)擔(dān)和操作復(fù)雜度。關(guān)鍵功能應(yīng)該明確可見，界面元素的排列應(yīng)該合乎邏輯，并遵循常見的設(shè)計(jì)模式和交互規(guī)范。
強(qiáng)大而高效的功能：工具類產(chǎn)品應(yīng)該滿足用戶的實(shí)際需求，提供強(qiáng)大而高效的功能。產(chǎn)品應(yīng)該具備核心功能，并結(jié)合用戶反饋不斷優(yōu)化和升級，以提供更加豐富的功能和更好的用戶體驗(yàn)。
清晰而詳盡的文檔和教程：工具類產(chǎn)品應(yīng)該提供清晰、詳細(xì)的文檔和教程，幫助用戶了解產(chǎn)品的特性和功能。文檔和教程應(yīng)該包含逐步指導(dǎo)、示例代碼和常見問題解答，以減少用戶在使用過程中的困惑和迷失。
友好而高效的技術(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è)知識和良好的溝通能力，能夠幫助用戶解決問題和提供專業(yè)建議。
持續(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)文章，未來將會持續(xù)在平臺上分享關(guān)于設(shè)計(jì)行業(yè)的文章。此外藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，添加vx藍(lán)小助ben_lanlan，報(bào)下信息，藍(lán)小助會請您入群。同時(shí)添加藍(lán)小助我們將會為您提供優(yōu)秀的設(shè)計(jì)案例和設(shè)計(jì)素材等，歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
藍(lán)藍(lán)設(shè)計(jì)( www.cqzjtgb.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ì)師是否會被取代？
交互設(shè)計(jì)師是數(shù)字產(chǎn)品設(shè)計(jì)領(lǐng)域中的重要角色，他們負(fù)責(zé)設(shè)計(jì)用戶界面、用戶體驗(yàn)和用戶互動等方面。隨著人工智能技術(shù)的發(fā)展和普及，有些人擔(dān)心交互設(shè)計(jì)師的工作會被機(jī)器替代。本文將從以下幾個(gè)方面探討交互設(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ù)可以通過機(jī)器學(xué)習(xí)和自然語言處理等技術(shù)來模擬人類的思維和行為，從而輔助交互設(shè)計(jì)師完成一些簡單的設(shè)計(jì)任務(wù)。例如，人工智能技術(shù)可以根據(jù)用戶的行為和反饋，自動優(yōu)化用戶界面和用戶體驗(yàn)。但是，人工智能技術(shù)還無法完全替代交互設(shè)計(jì)師的工作。
交互設(shè)計(jì)師需要根據(jù)用戶的需求和行為，設(shè)計(jì)出符合用戶習(xí)慣和心理的用戶界面和用戶體驗(yàn)。這需要交互設(shè)計(jì)師具備創(chuàng)造力和設(shè)計(jì)思維。交互設(shè)計(jì)師需要不斷地創(chuàng)新和嘗試，以滿足用戶的需求和期望。這是人工智能技術(shù)無法替代的。
交互設(shè)計(jì)師需要不斷地進(jìn)行測試和優(yōu)化，以確保數(shù)字產(chǎn)品能夠符合用戶的需求和期望。這需要交互設(shè)計(jì)師具備豐富的經(jīng)驗(yàn)和智慧。交互設(shè)計(jì)師需要不斷地學(xué)習(xí)和研究，以提高自己的專業(yè)水平。這也是人工智能技術(shù)無法替代的。
交互設(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ì)師的作用將會越來越重要，因?yàn)樗麄兡軌驗(yàn)橛脩籼峁└玫挠脩趔w驗(yàn)和用戶互動，從而提高數(shù)字產(chǎn)品的質(zhì)量和用戶滿意度。
今日分享這篇文章是藍(lán)藍(lán)設(shè)計(jì)的原創(chuàng)文章，未來將會持續(xù)在平臺上分享關(guān)于設(shè)計(jì)行業(yè)的文章。此外藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，添加vx藍(lán)小助ben_lanlan，報(bào)下信息，藍(lán)小助會請您入群。同時(shí)添加藍(lán)小助我們將會為您提供優(yōu)秀的設(shè)計(jì)案例和設(shè)計(jì)素材等，歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
藍(lán)藍(lán)設(shè)計(jì)( www.cqzjtgb.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ì)公司
先問你一個(gè)問題。
拼多多、淘寶、京東這三家購物平臺，你認(rèn)為它們的區(qū)別是什么？
或者換個(gè)方式問你。
買電器你去哪個(gè)平臺？買衣服你去哪個(gè)平臺？ 買垃圾袋你去哪個(gè)平臺？
是不是有了答案了？
沒猜錯(cuò)的話， 大部分人的答案是：買電器去京東、買衣服去淘寶、買垃圾袋去拼多多。
你看，這就是一個(gè)購物心智模型，你的心里對這三家平臺已經(jīng)產(chǎn)生了固有的心智，如果讓你去京東買衣服，你會不會覺得，有些別扭？沒錯(cuò)，這就是心智模型。
百度百科對心智模型的定義是：
“深植我們心中關(guān)于我們自己、別人、組織及周圍世界每個(gè)層面的假設(shè)、形象和故事。并深受習(xí)慣思維、定勢思維、已有知識的局限。”
關(guān)鍵詞是：故事、習(xí)慣、局限。
淘寶一開始就我們講了一個(gè)故事，一個(gè)萬能的集市，我們習(xí)慣在上面買衣服，但是也產(chǎn)生了局限性，那就是，當(dāng)我們想買大額電器的時(shí)候，還是會選擇京東。
我個(gè)人對心智模型的理解是：
我們內(nèi)心深處對一個(gè)事物的看法。
空口聊天多沒意思，下面舉個(gè)例子。
這是一尊陶俑，第一眼你覺得她像什么？
是不是覺得像米老鼠？
為什么？
因?yàn)樘召傅念^上的發(fā)髻和米老鼠標(biāo)志性的耳朵很像。
如果你從沒見過米老鼠，你還會覺得她像米老鼠嗎？
一定不會。
這就是心智模型，你對頭頂?shù)拇髨A形的心智是“米老鼠”，所以一旦你看到類似的形狀，米老鼠的形象就會浮現(xiàn)出來，這個(gè)發(fā)髻的形狀和你心里對米老鼠的形象產(chǎn)生了匹配。
對心智模型有沒有一點(diǎn)印象了？下面我們接著聊。
我不想用具體的界面來聊，那樣的話太散，我認(rèn)為要想理解一個(gè)概念，最好還是從“面”的角度來說，所以下面我會舉一些商業(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)好了，你離不開它了，所以平臺可以“不慣著你了”。
還有唯品會的正品低價(jià)、瑞幸一開始的星巴克平替，這些都是他們想要植入到用戶大腦中的心智。
為什么要費(fèi)勁植入一個(gè)新的想法？
因?yàn)橐坏┲踩肓?，就很難改變。
現(xiàn)在我身邊的很多朋友想買一些低價(jià)的品牌都會上唯品會，買咖啡會喝瑞幸，一旦用戶的習(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 種用法：
下面聊聊，咱們怎么做才能更加匹配用戶的心智模型？
同樣的，我不會拿具體頁面來舉例，還是希望把思考方式分享給大家，而不是某一個(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ù)。
拼多多和淘寶同樣都是電商平臺，可它們的用戶心智相差甚大，因?yàn)樽詈蠓桨冈O(shè)計(jì)是服務(wù)于最初的業(yè)務(wù)目標(biāo)的，業(yè)務(wù)不同，呈現(xiàn)的方案也不一樣，最后讓用戶形成的心智也不同。
2. 了解用戶
為啥？給老人和小孩設(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)研了解市場的通識性做法。
以上。
文章來源：優(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ì)( www.cqzjtgb.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ù)
首先說明，競品調(diào)研的方法有很多，本文只提供一種方法供參考，建議大家活學(xué)活用。建議從下面 4 個(gè)方面入手：
1. 調(diào)研背景
主要說一些為什么要調(diào)研，希望通過調(diào)研答達(dá)到什么樣的目的？是視覺升級、體驗(yàn)升級還是為了提升轉(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)研目的來確定，例如如果是為了視覺升級，那么調(diào)研維度主要就集中在視覺效果上，如果是體驗(yàn)升級，那么調(diào)研維度主要集中在交互體驗(yàn)層面。所以維度的選擇一定是和此次調(diào)研的目的緊密相關(guān)的，不過，倒也不是說如果是視覺升級就只調(diào)研視覺方面的內(nèi)容，而是咱們要有一個(gè)主要的調(diào)研方向，啥都想要，最后啥都做不好。
4. 結(jié)論
結(jié)論是最重要的，畢竟，做這次的調(diào)研不就是為了這份結(jié)論嗎？所以最后一定要有結(jié)論，也就是咱們通過調(diào)研得到了什么結(jié)論。
1. 調(diào)研背景
我公司這個(gè)項(xiàng)目是做一個(gè)官網(wǎng)的改版，官網(wǎng)主要就改版主要目標(biāo)有兩個(gè)：
第一個(gè)目標(biāo)是視覺體驗(yàn)升級，拆解下來就是界面更好看，內(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)的通識性做法，畢竟站在巨人的肩膀上才能看得更遠(yuǎn)嘛。
①整體架構(gòu)
我當(dāng)時(shí)的做法是把主要競品的官網(wǎng)都截圖下來，然后一個(gè)模塊一個(gè)模塊的去分析，其實(shí)看下來你會發(fā)現(xiàn)，大家的做法都是有跡可循的。
看下面的圖片，我把他們類似的模塊用同樣的顏色框出來，框出來后就會發(fā)現(xiàn)，哦，原來，這就是行業(yè)內(nèi)的通識性做法。
然后我把這種通識性做法歸納總結(jié)出來，發(fā)現(xiàn)，其實(shí)官網(wǎng)首頁可以劃分為四大板塊：
你看，看似有很多復(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è)拆解維度，不然會沒有方向，這里我分了三個(gè)維度來進(jì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ì)( www.cqzjtgb.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è)網(wǎng)站配色方式，除了打開開發(fā)人員工具或是檢視源碼，也有第三方服務(wù)可以使用，即使無法完整復(fù)制別人的配色，也能快速得知網(wǎng)站使用的顏色代碼或配色模式，取得顏色的色碼或色彩名稱。有沒有任何更直覺、簡單的方式來完成這些工作呢？若你有類似的需求，接下來要介紹的服務(wù)或許可以滿足，這項(xiàng)服務(wù)會提取特定網(wǎng)頁使用的顏色，讓顏色相關(guān)信息更一目了然。
本文要介紹的「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)站試試看。
網(wǎng)站鏈接：https://alwane.io/
使用教學(xué)
開啟 Alwane 網(wǎng)站后直接在左上角「Extract CSS Colors」輸入要提取顏色的網(wǎng)址，預(yù)設(shè)情況下會從 HTML 和 CSS 樣式表單取得顏色，如果某些情境下需要從 JavaScript 獲取顏色可在「Advanced」設(shè)定選項(xiàng)找到。
從提取后的色彩結(jié)果可以看到各種顏色分布，包括顏色的預(yù)覽、變量名稱和色碼（hex code），從左側(cè)可選擇為顏色重新分組、排序或是切換 CSS、SASS 色碼。
從上方選項(xiàng)切換調(diào)色盤或程序代碼模式，也能快速將所有 CSS 代碼復(fù)制到剪貼簿。
如果想要保存或分享網(wǎng)站的配色、調(diào)色盤、CSS 等信息，點(diǎn)選右上角「Generate」就能產(chǎn)生鏈接咯！
值得一試的三個(gè)理由：
文章來源：優(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ì)( www.cqzjtgb.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ù)
柵格一直都是很多同學(xué)非常疑惑的地方，無論是柵格的日常使用，又或者是柵格在整個(gè)產(chǎn)品當(dāng)中的作用，一直以來都有非常多的疑惑，今天就來聊聊柵格在實(shí)際工作如何使用，以及產(chǎn)品之間究竟有何區(qū)別。
上期回顧：
其實(shí)在說柵格的使用，我們就在討論網(wǎng)頁當(dāng)中的布局方式，以及他們之間的不同點(diǎn)。
布局方式，本質(zhì)上就是去處理窗口寬度與網(wǎng)頁內(nèi)容的關(guān)系
用戶會使用瀏覽器打開不同尺寸的窗口寬度，而網(wǎng)頁內(nèi)容究竟應(yīng)該如何去適應(yīng)這些窗口尺寸？
通常會分為：固定布局、流式布局、自適應(yīng)布局、響應(yīng)式布局
固定布局是一種最為簡單的方式，它的設(shè)計(jì)邏輯是將頁面當(dāng)中的內(nèi)容 “寫死固定” 在屏幕上，內(nèi)容不會隨著本身窗口寬度進(jìn)行改變，所有元素都使用 px 作為基礎(chǔ)單位
當(dāng)然在固定布局當(dāng)中，窗口大小與頁面內(nèi)容會存在兩種基本關(guān)系：窗口過大則將頁面元素進(jìn)行居中，窗口過小則展示橫向滾動條
固定布局的好處是這種方式相對簡單，只需將頁面設(shè)計(jì)好即可，不會存在太多兼容性的問題（因?yàn)橐矇焊鶝]有考慮兼容性的相關(guān)問題）
固定布局通常出現(xiàn)在 老舊的政府項(xiàng)目、網(wǎng)頁的登錄注冊中
流式布局是最基礎(chǔ)的變化布局，它的設(shè)計(jì)邏輯是將頁面當(dāng)中的元素設(shè)計(jì)成可以流動的 “水” ，通過在頁面，設(shè)計(jì)不同的“杯子”容器來裝下頁面內(nèi)容
這里的“水”一般指的是 文字、圖標(biāo)、以及一些頁面重復(fù)出現(xiàn)的元素。而杯子通常是我們設(shè)計(jì)的容器，它高度固定，只會變化其寬度，比如卡片、外層容器控制寬度 等等...
因?yàn)椤氨印钡南拗疲簿蛯?dǎo)致水會根據(jù)杯子的寬度進(jìn)行延展流動，進(jìn)而形成流式布局
使用流式布局可以通過較低的開發(fā)成本，來實(shí)現(xiàn)一個(gè)頁面當(dāng)中多尺寸的小范圍適配，如果屏幕尺寸跨度較大，則會比較困難
而流式布局最常使用的方式就是通過柵格系統(tǒng)，來確定整個(gè)“杯子”的寬度，進(jìn)而讓“水”能夠在頁面當(dāng)中實(shí)時(shí)滾動展示
這里有兩個(gè)需要注意的點(diǎn)：
在研發(fā)層面，杯子的大小是需要進(jìn)行限制的，通常會去設(shè)定它的最大值與最小值，當(dāng)它超過最大值則居中對齊，當(dāng)他
在流式布局當(dāng)中，窗口超過其最大值則固定左側(cè)，右側(cè)空白補(bǔ)充；窗口小于其最小值則展示橫向滾動條
比如與上方同樣的案例，將頁面當(dāng)中內(nèi)容的文字實(shí)現(xiàn)成流式布局，并且將其流體布局的寬度限制為 200px - 120px，這時(shí)則會形成頁面的寬度變化，會導(dǎo)致內(nèi)容發(fā)生直接的變化
流動的“水” 需要去考慮它漫出的情況，即在“水杯”高度固定的情況下，整個(gè)寬度無法裝下如此多“水”的情況，通常我們可以使用 “...” 進(jìn)行標(biāo)注。這個(gè)思路后續(xù)在響應(yīng)式布局當(dāng)中也會體現(xiàn)
自適應(yīng)布局是將差別較大的屏幕尺寸，去創(chuàng)建多個(gè)不同的設(shè)計(jì)稿，每一個(gè)設(shè)計(jì)稿去對應(yīng) 一個(gè)用戶實(shí)際的尺寸范圍。改變屏幕分辨率就可以去切換不同的設(shè)計(jì)方案
通俗一點(diǎn)來說，自適應(yīng)就是去單獨(dú)設(shè)計(jì)桌面端、平板端、移動端的頁面，并且將它們?nèi)哌M(jìn)行獨(dú)立，而系統(tǒng)通過不同尺寸間的 屏幕斷點(diǎn)/瀏覽器 UA 等...（實(shí)際前端判斷遠(yuǎn)比這個(gè)更加復(fù)雜，但是為了方便理解可以暫且這么認(rèn)為），進(jìn)而適應(yīng)出不同的設(shè)計(jì)頁面
而通俗一點(diǎn)來說，自適應(yīng)是使用多套代碼去對應(yīng)多個(gè)頁面，并且都是在業(yè)務(wù)非常復(fù)雜的情況下進(jìn)行使用，在國內(nèi)當(dāng)中最常使用便是 桌面端與移動端 的產(chǎn)品
比如 語雀 當(dāng)中的 桌面端與移動端就是一個(gè)典型案例，他通過判斷用戶的使用設(shè)備，將頁面拆分為了，桌面端、移動設(shè)備端、小程序（單獨(dú)設(shè)計(jì)適配的）。因此只需要將每種設(shè)備的設(shè)計(jì)思路分析清楚即可
自適應(yīng)布局與柵格
自適應(yīng)主要是表達(dá)多個(gè)設(shè)備尺寸下進(jìn)行切換的 布局方式，在不同的設(shè)備之間，也是需要去使用流式布局以及其他布局方式
而不同的設(shè)備之間，屏幕分辨率的差異就會涉及到一個(gè)關(guān)鍵點(diǎn)，屏幕斷點(diǎn)
屏幕斷點(diǎn)
屏幕斷點(diǎn)，又叫媒體查詢 @media，因?yàn)樵谡麄€(gè)設(shè)計(jì)當(dāng)中，屏幕尺寸是極其復(fù)雜的，除了我們常見的尺寸：1920、1080、1440、1366
用戶還可以通過調(diào)整窗口的大小，進(jìn)而改變網(wǎng)頁尺寸。而屏幕斷點(diǎn)，最主要是判斷屏幕的寬度，來確定目前的尺寸究竟應(yīng)該采取什么設(shè)計(jì)方案
比如在設(shè)計(jì)一款成熟的 B 端產(chǎn)品時(shí)，因?yàn)樯虡I(yè)的緣故我們作為各大平臺（釘釘、企微、飛書）的 ISV（合作上架），產(chǎn)品上架到不同平臺時(shí)，需要對不同平臺尺寸進(jìn)行調(diào)整，比如釘釘為 1024px、企微為 980px、飛書為 1280px，這時(shí)為了滿足用戶的實(shí)際場景，會將這幾類特殊的尺寸作為屏幕斷點(diǎn)進(jìn)行對應(yīng)的布局設(shè)計(jì)，以滿足不同產(chǎn)品當(dāng)中的最佳實(shí)踐
關(guān)于屏幕斷點(diǎn)的媒體查詢，是在前端 CSS3 代碼當(dāng)中，提供給用戶校驗(yàn)整個(gè)屏幕的寬度，比如在下圖前端代碼當(dāng)中，則代表在屏幕尺寸小于 480px 時(shí)，使用 字體大小為 16px
而確定斷點(diǎn)才是這其核心，這里給大家提供兩個(gè)思路，實(shí)際設(shè)計(jì)當(dāng)中還會更為復(fù)雜：
物理斷點(diǎn)：也就是屏幕當(dāng)中，已經(jīng)劃分好的斷點(diǎn)方式，比如顯示器的全寬大小、不同設(shè)備之間的屏幕分辨率差異
設(shè)計(jì)斷點(diǎn)：在設(shè)計(jì)過程當(dāng)中，一些必要的屏幕尺寸。比如上方講到不同平臺的設(shè)計(jì)問題
其實(shí)屏幕斷點(diǎn)不是最終目的，最終還是想通過屏幕斷點(diǎn)，將頁面當(dāng)中不同的不同元素的處理方式實(shí)現(xiàn)在設(shè)計(jì)稿中，如果不需要，完全可以不考慮增加屏幕斷點(diǎn)。
這里先多聊一句，其實(shí)響應(yīng)式的大規(guī)模普及，是源自 2015 年 Google 的倡導(dǎo)（可以看到 Google 旗下的很多產(chǎn)品都采取的響應(yīng)式布局，例如 YouTube），它最初的目的非常簡單，就是為了提高響應(yīng)式在移動終端上的運(yùn)行效率。因?yàn)樵?2015 年時(shí)，安卓 生態(tài)下的屏幕尺寸多到可怕，以至于需要有一套解決辦法來讓用戶運(yùn)行并使用。
響應(yīng)式布局是確保一個(gè)頁面當(dāng)中所有的設(shè)備（桌面端、平板端、移動端）都能夠展示出非常滿意的效果，進(jìn)行產(chǎn)生的一種技術(shù)方案。它更像是 流式布局與自適應(yīng)布局 的結(jié)合，它能夠通過對屏幕尺寸的快速響應(yīng)，進(jìn)而對頁面的內(nèi)容進(jìn)行更為細(xì)致的變化。
通俗一點(diǎn)來說就是通過一套代碼去實(shí)現(xiàn)多個(gè)頁面，并且將多個(gè)頁面的內(nèi)容進(jìn)行細(xì)化，進(jìn)而能夠快速適配多個(gè)設(shè)備。
對于多個(gè)設(shè)備，最主要是調(diào)整頁面柵格數(shù)量、水槽寬度、頁面距進(jìn)行適應(yīng)，比如在 YouTube 當(dāng)中，就是通過響應(yīng)式布局，讓頁面實(shí)時(shí)響應(yīng)進(jìn)行處理。
響應(yīng)式布局與柵格
比如以 Ant Design Pro 的頁面進(jìn)行拆解，你會發(fā)現(xiàn)它在 575、767、991 的尺寸中，頁面布局發(fā)生變化，然后根據(jù)屏幕斷點(diǎn)之間的頁面布局，采用向下兼容的適配方式，Ant design Pro 屏幕斷點(diǎn)可以劃分為 320、576、768、992、1200，響應(yīng)策略如下圖：
你會發(fā)現(xiàn)布局其實(shí)是依賴于柵格，而柵格的使用，正是由于不同的布局所導(dǎo)致。只有通過柵格，才能夠確定流式布局的比例、響應(yīng)式布局的變化方式，但是在 B 端產(chǎn)品當(dāng)中，并不是所有頁面都需要使用柵格，經(jīng)常看到一些作品集其實(shí)是為了柵格而柵格
在 B 端產(chǎn)品當(dāng)中在，真正使用柵格的地方更多是工作臺、官網(wǎng)，而其他相對復(fù)雜的頁面是沒辦法使用柵格，而對我們每一個(gè)產(chǎn)品而言，可以優(yōu)化的點(diǎn)就是在屏幕尺寸較小的情況下，默認(rèn)讓整個(gè)產(chǎn)品導(dǎo)航菜單收起，以提供給用戶更多展示內(nèi)容。
文章來源：優(yōu)設(shè)網(wǎng) 作者：CE青年
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.cqzjtgb.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ù)
什么是柵格？我這里就不做說明了。很多優(yōu)設(shè)的文章都寫的很清晰了。這篇文章僅從我最開始接觸柵格所遇到的困惑和部分設(shè)計(jì)師始終糾結(jié)的點(diǎn)來和大家一起討論討論。
B 端到底用什么尺寸進(jìn)行設(shè)計(jì)？
要弄清楚用什么尺寸設(shè)計(jì)，首先要確定布局。我們常用的就是上下布局、左右布局、“T”字布局。其他布局基本上是這三者的延伸和拓展。上下布局一般是固定頂部，有點(diǎn)類似于 PC 網(wǎng)頁設(shè)計(jì)，實(shí)際上也差不多?，F(xiàn)在的B端設(shè)計(jì)中很多都會搭配著這種布局用，比如幫助中心、消息通知，客戶入網(wǎng)申請等（這些我都遇見并做過）。左右布局和“T”字布局，一般固定左側(cè)，右側(cè)區(qū)域做自適應(yīng)。
我們看一下百度統(tǒng)計(jì)最新出來的當(dāng)前計(jì)算機(jī)分辨率數(shù)據(jù)，從統(tǒng)計(jì)的數(shù)據(jù)中可以看出，小尺寸的屏幕是越來越少了。但是不是我們就要用最小的尺寸或者用份額最大的 1920 進(jìn)行設(shè)計(jì)了？
顯然不是按照這個(gè)維度來確定尺寸的。對網(wǎng)頁設(shè)計(jì)來說，設(shè)計(jì)師差不多都知道有一個(gè) 1200 有效內(nèi)容區(qū)域的說法。如果沒有特殊要求，上下布局也是遵循這個(gè)原則的。設(shè)計(jì)師中絕大部分，包括我很多同事平時(shí)基本上用的 1920 和 1440 兩種尺寸來進(jìn)行設(shè)計(jì)。對于 B 端來說，不管你采用 1920 或者 1440，在做上下布局頁面定寬設(shè)計(jì)的時(shí)候，遵循 1200 有效內(nèi)容區(qū)域這個(gè)原則就是沒有問題的，看了很多文章上面舉例了 960、990、1024、1156 等等，大家都不用糾結(jié)，沒有特殊要求，這些都沒啥問題。
上下布局在 B 端設(shè)計(jì)中是一個(gè)補(bǔ)充，有的可能有，有的可能沒有，所以用 1920 還是 1440 最好還是根據(jù)左右布局來，保持統(tǒng)一。兩年前我看過一篇大廠寫的布局的文章，用的是 1280 的尺寸，記得是說因?yàn)榭紤]縮小瀏覽器會發(fā)生遮擋或者擠壓（別問我為啥還記得，因?yàn)楫?dāng)時(shí)對于尺寸糾結(jié)的太厲害，至今難以忘懷），現(xiàn)在因?yàn)榧夹g(shù)等方面的發(fā)展，個(gè)人認(rèn)為再用 1280 的做已經(jīng)不合適了。1440 的尺寸目前做中后臺是比較通用的，大家也可以參考看一下螞蟻 Ant Design。至于 1920 的用來設(shè)計(jì) B 端行不行呢？我認(rèn)為也是可以的，我就用過，也沒用戶反饋說顯示有問題，我就當(dāng)他沒問題了。不過我還是建議大家在做 B端設(shè)計(jì)的時(shí)候用 1440 的來做，特別是用戶群很復(fù)雜的情況下，方便低分辨率的電腦查看。當(dāng)然如果我們給某一企業(yè)做定制服務(wù)，那就沒尺寸的問題了，照著客戶電腦尺寸來就行了。
現(xiàn)在有很多插件可以進(jìn)行布局，軟件一般也有自帶布局功能。這里不做陳述：
這里介紹我常用的 sketch 布局。
這里我也創(chuàng)建了一個(gè) 1440 的網(wǎng)格系統(tǒng)，供大家參考，大家也可以根據(jù)自己的實(shí)際情況去建立自己的網(wǎng)格。
頂部高度沒有特殊要求建議不要超過 100px，我一般就是 60-80px 內(nèi)設(shè)定的；左側(cè)可以根據(jù)目錄內(nèi)容自己設(shè)定一下，一般 200 多就差不多了。邊距我一般設(shè)定 20px、24px。這樣再對剩下的距離做柵格就行了，列寬保持偶數(shù)即可。
有時(shí)候做柵格的時(shí)候會遇到一部分列寬是 42px，一部分列寬是 43px，這種設(shè)定也是可以的，回歸到柵格系統(tǒng)的意義，柵格本質(zhì)上不是為了保證像素級精確，而是為了保證瀏覽視覺級別的秩序、協(xié)調(diào)與統(tǒng)一，所以大家沒有必要糾結(jié)。
“沒有絕對正確的柵格設(shè)計(jì)，只有最適合的柵格設(shè)計(jì)”，希望這篇文章可以幫助對柵格有疑惑的設(shè)計(jì)師們，同時(shí)也期待大家留言，大家一起學(xué)習(xí)探討。
文章來源：優(yōu)設(shè)網(wǎng) 作者：神經(jīng)蛙
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.cqzjtgb.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ù)
前言
表單是我們生活中常見的信息添加、錄入的方式之一，如何進(jìn)行表單的設(shè)計(jì)也是 B 端設(shè)計(jì)師的必修課。身邊別的部門的同事常常會說：表單不就是幾個(gè)輸入框，幾個(gè)組件組成的東西么，挺簡單的，有什么好設(shè)計(jì)的。但通常情況下，越是簡單的東西，要思考的點(diǎn)卻越多，想要把一個(gè)表單做好也是一件不容易的事情。
生活中，大多數(shù)人都不喜歡表單，比如前段時(shí)間有一些許久沒有聯(lián)系過的朋友讓我?guī)兔μ顚懸幌抡{(diào)查問卷，作為一個(gè)熱心市民的我，自然是選擇點(diǎn)開鏈接幫忙填寫；一鼓作氣填了一段時(shí)間后，看著剩下的問題，我不耐煩的放棄了填寫這個(gè)調(diào)查問卷。所以作為設(shè)計(jì)師，我們應(yīng)該“由內(nèi)而外”而不是“由外而內(nèi)”的去設(shè)計(jì)表單，如何讓表單變得更容易讓人接受也是設(shè)計(jì)師應(yīng)該考慮的問題。
更多兆日UCD的干貨：
表單是一種用于信息添加、錄入的頁面類型。是連接用戶與數(shù)據(jù)庫的橋梁，通過引導(dǎo)用戶進(jìn)行信息的填寫，從而提交數(shù)據(jù)給后臺。在用戶填寫提交時(shí)，還需要對用戶輸入內(nèi)容進(jìn)行校驗(yàn)與反饋，保證用戶信息填寫的完整度。
填寫表單是一件麻煩事，當(dāng)我們想做的是投票、網(wǎng)上購物或者添加好友之前，總是會有表單防礙著我們。正因?yàn)槎鄶?shù)人不喜歡填寫表單，所以在做表單設(shè)計(jì)時(shí)，我們的首要目標(biāo)是讓人們迅速輕松的完成填寫，同時(shí)獲得系統(tǒng)和用戶想要的東西。
1. 表單拆分
基礎(chǔ)表單中會有以下六個(gè)元素：
1. 標(biāo)簽：標(biāo)簽文本主要是解釋輸入項(xiàng)的含義，一般不宜太長，需要簡明扼要，快速讓用戶理解；還有一部分是告知用戶哪些是必填項(xiàng)。
2. 占位提示：直接展示在輸入項(xiàng)中，采用弱提示文本對所需信息描述，當(dāng)用戶輸入信息時(shí)即消失。
3. 校驗(yàn)：對輸入項(xiàng)進(jìn)行驗(yàn)證，并給出反饋提示，如：用戶未填寫，格式錯(cuò)誤、內(nèi)容錯(cuò)誤等
4. 基礎(chǔ)組件：可交互輸入的區(qū)域，是構(gòu)成表單的核心內(nèi)容，主要有：輸入框、單（復(fù)）選框、上傳、時(shí)間選擇器、開關(guān)……
5. 提示：描述該輸入項(xiàng)需要的輸入類型，如：上傳的文件類型
6. 按鈕：用戶完成輸入后，點(diǎn)擊按鈕進(jìn)行提交、進(jìn)入下一步等，按鈕一般是跟隨的最后一個(gè)輸入項(xiàng)后面，若輸入項(xiàng)超出一屏顯示，建議將按鈕懸浮固定在底部。
當(dāng)我們開始制作某一表單的時(shí)候，我們需要強(qiáng)迫自己思考一下每個(gè)元素的 UI 問題：
2. 表單錄入模式
表單根據(jù)錄入模式可以分為：單步表單、分步表單和高級表單
① 單步表單：
單步錄入指的是在一個(gè)頁面即可完成內(nèi)容輸入。使用于內(nèi)容較少，結(jié)構(gòu)簡單的場景，我們常見的登錄頁就是典型的單步表單。
② 分步表單：
內(nèi)容較多、錄入內(nèi)容的方式差異較大的情況且業(yè)務(wù)本身具有流程化特性，一般通過添加分步導(dǎo)航展示內(nèi)容。常見的例如銀行轉(zhuǎn)賬，修改密碼等等。
③ 高級表單（分組表單）：
高級表單（分組表單）：主要用于需要一次性錄入大批量數(shù)據(jù)的場景。高級表單與分步表單有點(diǎn)類似，都是為了減輕用戶填寫壓力，將填寫內(nèi)容進(jìn)行分塊。不同的點(diǎn)在于，分步表單的流程化明顯，后一步填寫的內(nèi)容都是基于前一步來填寫、是前一步反饋。
3. 表單的頁面框架
表單的頁面框架指的是承載著整個(gè)表單頁的頁面框架，即：整頁式（新頁面）、彈窗式、側(cè)邊欄式。因?yàn)槠漤撁婷娣e大小不一樣，所以使用情境有所不同。
整頁式（新頁面）：最常用方式，適用于絕大部分的表單，可以支持構(gòu)建復(fù)雜的表單。
彈窗式：通過小面積的彈窗進(jìn)行輕量化的編輯，方便快速進(jìn)行增、刪、改、查；輸入項(xiàng)較少，一般不會有滾動條。
側(cè)邊欄式：與彈窗式相似，通過小面積的側(cè)邊欄進(jìn)行編輯；可承載比彈窗更復(fù)雜一些的表單內(nèi)容，可以有滾動條。
我們在選擇頁面框架時(shí)通常需要綜合以下三個(gè)因素去考慮：
4. 表單的排列方式
① 布局方式
在制作表單的時(shí)候分成兩種排列方式：單列布局和多列布局。我們可以通過以下幾個(gè)因素去考慮使用什么布局：
1. 在輸入項(xiàng)不多的情況下，建議采用單列布局，因?yàn)閱瘟胁季郑脩籼顚懙穆窂骄褪菑纳现料碌囊粭l直線，十分符合用戶的視覺動線，能夠提高用戶瀏覽與填寫的效率。
2. 多列布局的表單會導(dǎo)致用戶的視覺路徑變長，用戶需以 “Z” 字形的視覺動線掃描表單，會提高瀏覽與填寫的效率，并且多列表單容易造成用戶填寫時(shí)的混亂，易填錯(cuò)，體驗(yàn)差。
但是有時(shí)部分業(yè)務(wù)訴求和某些特性的場景要求，會需要在有限的空間上放入更多的控件來收集用戶的信息，這時(shí)就不得不使用多列布局的樣式，因?yàn)槎嗔心軌蚴】v向空間。
單列布局
優(yōu)勢：視覺路徑清晰，填寫效率高，體驗(yàn)好；
劣勢：垂直空間占用率高。
建議使用場景：表單內(nèi)容較少的情況下使用單列布局
多列布局
優(yōu)勢：省空間，能夠放置更多的控件；
劣勢：視覺路徑模糊，填寫成本高，填寫易出錯(cuò)。
建議使用場景：關(guān)聯(lián)性強(qiáng)的填寫項(xiàng)橫向排放，且將該列中最重要填寫項(xiàng)的放于最左側(cè)。
② 標(biāo)簽對齊方式
標(biāo)簽的對齊方式有：左對齊、右對齊和頂對齊，除了需要考慮單列式布局還是多列式布局，還有我們也需要考慮標(biāo)簽的對齊方式。
馬泰奧·彭佐在 2006 年 7 月對表單的每種對齊方式做過眼動測試研究，根據(jù)研究結(jié)論做出以下分析：
頂對齊標(biāo)簽：
研究中，從標(biāo)簽移動到輸入框只需 50 毫秒。比左對齊標(biāo)簽快了 10 倍，后者需要 500 毫秒；比右對齊標(biāo)簽方式快 2 倍，后者高達(dá) 240 秒。能迅速填完頂對齊標(biāo)簽表單的原因之一，是因?yàn)檠矍蛑恍枰跇?biāo)簽和輸入框之間進(jìn)行上下單向運(yùn)動。
優(yōu)勢：眼動測試中移動速度最快，最有利于提高用戶填寫表單的效率。標(biāo)簽字?jǐn)?shù)相比于左右對齊標(biāo)簽可容納更多字?jǐn)?shù)。
劣勢：縱向空間占用率高，對于小屏用戶不太友好（設(shè)計(jì)前需要考慮用戶使用場景以及使用設(shè)備）
建議使用場景：希望用戶快速完成表單；對標(biāo)簽的擴(kuò)展性高，有國際化需求（中文轉(zhuǎn)英文，英文會比較長）；更適用于彈窗式、側(cè)邊欄式布局。
右對齊標(biāo)簽：
如果要盡量減少表單占用垂直屏幕空間，右對齊能提供快速完成時(shí)間。研究中，專家用戶和新手用戶掃視（眼睛運(yùn)動）右對齊標(biāo)簽表單的標(biāo)簽和輸入框的平均時(shí)間分別在 170 毫秒和 240 毫秒，而填寫完成時(shí)間比左對齊快 2 倍。
優(yōu)勢：標(biāo)簽和輸入框位置緊密，更方便填寫
劣勢：右對齊的布局會造成標(biāo)簽的左側(cè)不齊，影響快速閱讀表單的效率問題；如果增加填寫項(xiàng)標(biāo)題字?jǐn)?shù)過多，整體的表單頁都需要修改，右對齊靈活性低。
建議使用場景：適用于需要填寫效率但受到屏幕垂直面積限制的頁面。更適用于整頁式布局。
左對齊標(biāo)簽：
在頂、右、左三種方案中，左對齊表單填寫速度最慢。因?yàn)樽髮R表單解析問題時(shí)眼球定位次數(shù)最多，用戶一般情況下都能將左對齊布局中的標(biāo)簽和輸入框聯(lián)系起來，只是花費(fèi)時(shí)間較長。在研究中，典型掃視時(shí)間為 500 毫秒，很長說明用戶經(jīng)歷了沉重的認(rèn)知壓力。
優(yōu)勢：易瀏覽標(biāo)簽；占用縱向空間較少
劣勢：標(biāo)簽和輸入框距離較大，表單填寫效率低
建議使用場景：需要讓用戶認(rèn)真思考后填寫的頁面；更適用于整頁式布局
輸入字段上方的粗體標(biāo)簽
在頂對齊的情況下，設(shè)計(jì)師可能會想：如果我們將標(biāo)簽進(jìn)行加重，這增加了它們的視覺重量，并將它們帶到了布局的最前面，這樣說是不是可以讓用戶更好的去完成表單的填寫呢？但事實(shí)卻和設(shè)想相反：粗體標(biāo)簽反而增加了用戶填寫的負(fù)擔(dān)。
粗體標(biāo)簽導(dǎo)致從標(biāo)簽移動到輸入字段的掃視時(shí)間增加了近 60% ，從沒有粗體標(biāo)簽的 50 毫秒到有粗體標(biāo)簽的 80 毫秒，更突出的標(biāo)簽沒有明顯優(yōu)勢。粗體標(biāo)簽更難讓用戶閱讀和感知——可能是因?yàn)榇煮w文本和輸入字段的相鄰粗邊框之間存在更多的視覺混淆。
小結(jié)
標(biāo)簽位置：單從效率角度看，頂對齊>右對齊>左對齊，但是根據(jù)應(yīng)用場景，效率快并不是我們選擇標(biāo)簽對齊方式的唯一的指標(biāo)。在大多數(shù)情況下，將標(biāo)簽放在輸入字段上方效果更好，頂對齊的情況下標(biāo)簽的擴(kuò)展性更高，且用戶不會被迫分開查看標(biāo)簽和輸入字段。需要注意在視覺上將下一個(gè)輸入字段的標(biāo)簽與前一個(gè)輸入字段分開。
粗體標(biāo)簽：閱讀粗體標(biāo)簽對用戶來說有點(diǎn)困難，因此最好使用純文本標(biāo)簽。但是，當(dāng)使用粗體標(biāo)簽時(shí)，可能希望將輸入字段設(shè)置為沒有粗邊框。
1. 什么是表單的校驗(yàn)
為了讓用戶準(zhǔn)確的填寫表單，在用戶填寫表單中/填寫表單后，常常會增加我們常說的“反饋提示“，針對反饋信息的準(zhǔn)確性，我們會采用兩種校驗(yàn)形式：前端校驗(yàn)和后端校驗(yàn)。
① 前端校驗(yàn)：
主要負(fù)責(zé)校驗(yàn)輸入的內(nèi)容格式是否正確；例如常見的手機(jī)號格式是否正確、密碼格式是否符合要求。
② 后端校驗(yàn)：
與數(shù)據(jù)庫相關(guān)，主要負(fù)責(zé)校驗(yàn)輸入內(nèi)容是否正確；例如常見的手機(jī)號是否存在，密碼是否正確。
③ 校驗(yàn)觸發(fā)條件：
④ 報(bào)錯(cuò)方式：
2. 校驗(yàn)形式
根據(jù)不同的校驗(yàn)觸發(fā)條件和報(bào)錯(cuò)方式，我們可以組合成以下幾種校驗(yàn)形式：
① 輸入時(shí)即時(shí)驗(yàn)證，即時(shí)報(bào)錯(cuò)
用戶在輸入的過程中進(jìn)行實(shí)時(shí)驗(yàn)證，輸入框處于聚焦時(shí)開始提示，隨著輸入的過程，符合要求后已與用戶通過驗(yàn)證的反饋。例如在注冊阿里云賬號時(shí)，設(shè)置密碼需要滿足三個(gè)條件，這里采取了即時(shí)驗(yàn)證。
優(yōu)點(diǎn)：可以實(shí)時(shí)告知用戶表單的填寫時(shí)候符合規(guī)范
缺點(diǎn)：實(shí)時(shí)驗(yàn)證會使用戶分散注意力，也有可能會引起用戶的反感
使用場景：注冊時(shí)需要設(shè)置密碼，通過密碼不同的組成，時(shí)判斷密碼的強(qiáng)度，比如純數(shù)字密碼符合最低安全要求密碼，但增加大些字母和小寫字母后就形成了更安全的密碼
② 失去焦點(diǎn)后即時(shí)報(bào)錯(cuò)
用戶在輸入完成后進(jìn)行驗(yàn)證，輸入框失去聚焦后（即用戶點(diǎn)擊輸入框以外的位置后）與用戶進(jìn)行反饋。例如在注冊網(wǎng)易郵箱時(shí)，填寫完畢后即時(shí)報(bào)錯(cuò)。
優(yōu)點(diǎn)：為用戶修改錯(cuò)誤節(jié)省時(shí)間、避免出現(xiàn)很多錯(cuò)誤需要改正的情況。
缺點(diǎn)：如果輸入有誤，用戶需要多一步操作，點(diǎn)擊會有錯(cuò)誤的輸入框進(jìn)行修改。
使用場景：注冊用戶名時(shí)，取消聚焦后會反饋用戶名是否可用，不可用的情況下是被注冊還是格式有問題。
③ 操作后（保存/提交/下一步）后全部報(bào)錯(cuò)
用戶完成表單填寫后，點(diǎn)擊操作按鈕（保存/提交/下一步），系統(tǒng)將表單統(tǒng)一上傳到后端數(shù)據(jù)庫中進(jìn)行對比后集中與用戶進(jìn)行反饋。
優(yōu)點(diǎn)：減少對用戶的打擾，減少后端服務(wù)器壓力，提高效率
缺點(diǎn)：用戶只能點(diǎn)擊按鈕后才可以得到反饋，不能及時(shí)修改；若表單過長，用戶返回修改的路徑也將增加。
使用場景：登錄賬號是判斷密碼是否正確
文章來源：優(yōu)設(shè)網(wǎng) 作者：兆日UCD
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.cqzjtgb.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ù)
在大數(shù)據(jù)盛行的今天，人們不僅僅講究以事實(shí)說話，更愿意以數(shù)據(jù)講話。數(shù)據(jù)作為結(jié)果的直接衡量指標(biāo)，更真實(shí)、也更具有說服力，那如何直觀的展示數(shù)據(jù)，幫助決策者做出正確決策或行動，發(fā)揮數(shù)據(jù)最大的價(jià)值？可視化數(shù)據(jù)大屏應(yīng)運(yùn)而生，讓我們一起來談?wù)劙?
說到數(shù)據(jù)大屏的時(shí)候，我們要先了解一下數(shù)據(jù)可視化，那什么叫做數(shù)據(jù)可視化呢？比較專業(yè)的解釋是利用計(jì)算機(jī)圖形學(xué)和圖像處理技術(shù)，將數(shù)據(jù)轉(zhuǎn)換成圖形或圖像在屏幕上顯示出來，并進(jìn)行交互處理的一種理論、方法和技術(shù)，它為我們研究、處理、分析數(shù)據(jù)提供了理論依據(jù)。
我們?nèi)说拇竽X處理視覺信息的速度比文字快幾萬倍，將抽象的數(shù)據(jù)轉(zhuǎn)化成圖表、圖形能更快速幫助我們更快理解數(shù)據(jù)中的含義，趨勢以及相關(guān)性。
簡單來說，可視化數(shù)據(jù)大屏，將我們難以理解的抽象的數(shù)據(jù)概念以圖形化的形式展現(xiàn)，方便我們快速理解這些數(shù)據(jù)的含義，也方便這些重要的信息在最短的時(shí)間內(nèi)傳給最重要的人。
數(shù)據(jù)大屏可分為信息展示類、數(shù)據(jù)分析類、監(jiān)控預(yù)警類，多展示酷炫的效果，數(shù)據(jù)之間有層次區(qū)分，好的數(shù)據(jù)大屏是布局、色彩、圖表、動效的綜合運(yùn)用。
數(shù)據(jù)可視化，讓很多員工從繁瑣復(fù)雜的數(shù)據(jù)工作中解脫過來，那它到底有什么優(yōu)點(diǎn)呢？
近幾年來，國家的相關(guān)法律政策相繼出臺，大數(shù)據(jù)企業(yè)的技術(shù)研發(fā)水平不斷提高，促使大數(shù)據(jù)行業(yè)市場規(guī)模從 2014 年的 212.5 億元增長至 2020 年的 548.5 億元，數(shù)據(jù)可視化對于公司發(fā)現(xiàn)解鎖數(shù)據(jù)潛在價(jià)值意義重大。
有研究表明，人類可以用比處理文字快60000倍的速度來處理圖像，可視化能直觀呈現(xiàn)大量數(shù)據(jù)，以前企業(yè)員工檢測到數(shù)據(jù)進(jìn)行匯總分析需要數(shù)小時(shí)，可視化通過特定的格式來呈現(xiàn)大量數(shù)據(jù)幾乎不費(fèi)時(shí)間。
視覺形式的數(shù)據(jù)更易理解，數(shù)據(jù)可視化能快速顯示操作、運(yùn)營與結(jié)果之間的關(guān)系。企業(yè)管理不是憑空作決定，正確的方式應(yīng)該是，依據(jù)所獲得的數(shù)據(jù)信息來做輔助分析，數(shù)據(jù)可視化內(nèi)容能讓管理人員和決策者清楚看清數(shù)據(jù)趨勢，快速制定及消化關(guān)鍵指標(biāo)。
比如當(dāng)上圖科學(xué)決策平臺的網(wǎng)絡(luò)總數(shù)特別時(shí)多，決策者可以快速調(diào)取相關(guān)數(shù)據(jù)找出異常原因 —— 是上次活動運(yùn)營推廣到位，故增加了很多用戶？也就是決策者可以通過異常數(shù)據(jù)快速鉆取數(shù)據(jù)，用來解釋正在發(fā)揮作用的運(yùn)營條件或決策與所遇到的指標(biāo)之間的關(guān)系。
根據(jù)Aberdeen報(bào)告收集的信息，利用數(shù)據(jù)可視化的組織能夠及時(shí)訪問信息的可能性比其他組織高28％。數(shù)據(jù)可視化有助于我們以客戶和投資者能理解的方式向他們提供信息，它比PPT更容易讓人理解，也能吸引那些對企業(yè)內(nèi)容運(yùn)作了解甚少的人。
比如上方的區(qū)域經(jīng)濟(jì)地圖，通過地圖與定位街道區(qū)域內(nèi)容、顏色結(jié)合的展示樣式，很容易看出各街道產(chǎn)值、稅收等，也更有場景感；居民可支配收入版塊，通過顏色區(qū)分、大小圓形、時(shí)間線來直觀展示居民收入變化內(nèi)容，形象且清晰。
制作數(shù)據(jù)可視化的工具有很多，最常見的就是Excel工具，非常容易上手，基本人人都會，操作簡單，但它的缺點(diǎn)也很明顯，沒什么特色，靜態(tài)數(shù)據(jù)展示過于死板，樣式老舊。第二類是Python等編程類工具，這類優(yōu)點(diǎn)是碼數(shù)據(jù)速度快，自動獲取，看起來很高端，但缺點(diǎn)也很明顯，如：學(xué)習(xí)成本高、學(xué)習(xí)比較困難、很難比較熟練的掌握等。
第三類就是SAAS類可視化工具，這類工具容易上手，操作簡單、動態(tài)數(shù)據(jù)自動獲取、動態(tài)效果無敵炫酷，不需要下載安裝，缺點(diǎn)就是部分渲染組件比較耗費(fèi)電腦配置。那我們今天就來推薦幾款常用的SAAS工具。
網(wǎng)易有數(shù)大數(shù)據(jù)是一個(gè)企業(yè)級的大屏大數(shù)據(jù)可視化展示系統(tǒng)平臺，具有深度的交互式數(shù)據(jù)探索。它有豐富的使用場景，支持?jǐn)?shù)據(jù)接入、數(shù)據(jù)導(dǎo)入處理、數(shù)據(jù)分析生成報(bào)告等，用戶無需編程，簡單拖拽即可生成可視化圖表。缺點(diǎn)是數(shù)據(jù)探索性分析能力有限。
網(wǎng)易有數(shù)可視化實(shí)戰(zhàn)案例——業(yè)務(wù)安全大屏。通過大屏進(jìn)行業(yè)務(wù)安全監(jiān)控，清晰的展示各業(yè)務(wù)分布要點(diǎn)的數(shù)據(jù)情況，頂部實(shí)時(shí)更新各重要區(qū)域數(shù)據(jù)情況，銷量對比、售后情況，產(chǎn)品產(chǎn)比，以及用戶分布也有清晰的直觀展示。
FineBI作為一款商業(yè)智能（BI）軟件，擁有豐富的報(bào)表編輯和數(shù)據(jù)分析功能，同時(shí)它也支持可視化大屏的編輯。決策報(bào)表采用了畫布式操作界面，通過拖拉拽可以想成一個(gè)強(qiáng)大的、全面的可視化大屏，能實(shí)現(xiàn)在一個(gè)頁面整合不同的數(shù)據(jù)，完美的展示各類業(yè)務(wù)指標(biāo)，實(shí)現(xiàn)數(shù)據(jù)多維度分析。缺點(diǎn)是大屏組件不夠豐富，開發(fā)拓展性不強(qiáng)，不支持云端托管等。
帆軟可視化實(shí)戰(zhàn)案例——銀行大屏駕駛艙。通過大屏直觀展示銀行存款、貸款數(shù)據(jù)，業(yè)務(wù)辦理詳情等，圖表形式展示內(nèi)部管理、外部管理情況，分行放貸統(tǒng)計(jì)情況等，便于數(shù)據(jù)管理查看及決策制定參考。
Data V是阿里云內(nèi)部的可視化大屏開發(fā)平臺，同時(shí)面向開發(fā)者和零基礎(chǔ)用戶，支持大屏圖形化編輯和在線編程開發(fā)，可幫助非專業(yè)的工程師通過圖形化的界面搭建專業(yè)水準(zhǔn)的可視化應(yīng)用。
它有海量行業(yè)模板，DataV數(shù)據(jù)可視化設(shè)計(jì)團(tuán)隊(duì)會定期從大量真實(shí)項(xiàng)目中尋找優(yōu)質(zhì)場景，制作為模板，涵蓋媒體、零售、工業(yè)、電商、金融、防疫、氣象等多個(gè)行業(yè)，為用戶提供會議展覽、業(yè)務(wù)監(jiān)控、風(fēng)險(xiǎn)預(yù)警、地理信息分析等各種設(shè)計(jì)參考。
產(chǎn)品功能方面，它有豐富的可視化編輯工具，提供多種業(yè)務(wù)模塊級的非圖表組件，只要通過拖拉拽便可創(chuàng)造出專業(yè)的可視化應(yīng)用，另外豐富的組件庫與模板庫包含多種場景模板，簡單修改即可快速投入使用。智能化工具擁有主題配色，一鍵美化、大屏智能生成等工具，快速解決在搭建可視化應(yīng)用時(shí)遇到的整體樣式配置困難。專業(yè)的地理信息可視化，支持地理軌跡、飛線、熱力分布、3D地球等效果，同時(shí)數(shù)據(jù)驅(qū)動三維世界生成，低代碼交互配置將復(fù)雜邏輯可視化呈現(xiàn)，整體效果更炫酷。它還有靈活開放的部署方式，支持多種發(fā)布方式，如：鏈接分享、二維碼發(fā)布；支持自定義組件接入；支持云上部署，也支持線上開發(fā)。
DataV數(shù)據(jù)可視化實(shí)戰(zhàn)案例——智慧工廠生產(chǎn)控制大屏，綜合呈現(xiàn)了每個(gè)生產(chǎn)階段的生產(chǎn)狀態(tài)參數(shù)，將整個(gè)車間的情況匯總到一個(gè)調(diào)度控制中心，方便管理人員了解各階段的工作情況。
袋鼠云數(shù)據(jù)可視化EAsyV，擁有業(yè)內(nèi)領(lǐng)先的數(shù)據(jù)可視化大屏故事策劃、視覺設(shè)計(jì)、前端和數(shù)據(jù)開發(fā)技術(shù)實(shí)力，尤其擅長3D模型展示，基于GIS地理信息展示等。它里面有豐富的組件，樣式制作精美，支持多種不同類型的數(shù)據(jù)導(dǎo)入，還有動態(tài)面板和交互功能，讓大屏看起來更靈動。
EasyV數(shù)據(jù)可視化實(shí)戰(zhàn)案例——寧波圖書館可視化平臺。大屏包含人流分析監(jiān)測、讀者畫像分析、借閱行為洞察等，從多角度全面的幫助用戶及時(shí)把握場館運(yùn)營效果，為其提供館內(nèi)建設(shè)與活動運(yùn)營的監(jiān)控分析服務(wù)。
深色的大屏設(shè)計(jì)能讓其數(shù)據(jù)顯示更明顯，也方便營造科技感，另外大屏設(shè)計(jì)圖表文字的顏色要統(tǒng)一，避免出挑的內(nèi)容分散用戶注意力，使用圖片或者是動態(tài)的背景，也可以讓大屏更有氛圍感。那除了這些，好的大屏還有哪些特質(zhì)呢？
首先是策劃有故事。從客戶的真實(shí)需求去梳理數(shù)據(jù)可視化內(nèi)部的視覺傳達(dá)，確保內(nèi)容傳達(dá)克制有條理，有重點(diǎn)、有故事。盡可能讓用戶花費(fèi)更少的時(shí)間獲取更多信息，完成數(shù)據(jù)空間到圖形空間的映射，讓數(shù)據(jù)的價(jià)值被看見。
如上方的品牌銷售數(shù)據(jù)大屏，銷售額與門店數(shù)，數(shù)據(jù)明顯，與銷售額相關(guān)內(nèi)容有季度線上線下銷售額，會員數(shù)、款式數(shù)量、爆款排行等，故這塊內(nèi)容排在左側(cè)。右側(cè)就是區(qū)域訂單、毛利統(tǒng)計(jì)。中間放用戶關(guān)心的地圖區(qū)域分布、爆款分析等內(nèi)容。
其次是可視化要有效率。通過工具軟件，數(shù)據(jù)可視化變得更簡單高效，變得靈活易實(shí)現(xiàn)，多端適配，加入組件化的拖拉拽操作，加入了多種交互和遠(yuǎn)程控制，能有效率的實(shí)現(xiàn)海量數(shù)據(jù)實(shí)時(shí)同步，實(shí)現(xiàn)高效率、高質(zhì)量大屏交付。
最后是大屏要有數(shù)據(jù)價(jià)值。數(shù)據(jù)可視化最重要的還是要落實(shí)到數(shù)據(jù)上，脫離數(shù)據(jù)談美觀是不切實(shí)際的空想，數(shù)據(jù)可視化就是要充分利用并方大數(shù)據(jù)的價(jià)值，保證數(shù)據(jù)實(shí)時(shí)、全域、精準(zhǔn)、讓數(shù)據(jù)講話。
設(shè)計(jì)可視化數(shù)據(jù)大屏?xí)r我們設(shè)計(jì)師要抓住問題的重點(diǎn)，即這樣設(shè)計(jì)出來的內(nèi)容能不能真的讓數(shù)據(jù)產(chǎn)生價(jià)值，能否經(jīng)得起業(yè)務(wù)部門推敲？是否為企業(yè)經(jīng)營提供了幫助？思考完這些再去做的大屏更有價(jià)值，大屏做的酷炫是其次，能夠讓人一目了然的看見關(guān)鍵信息，聯(lián)想到業(yè)務(wù)實(shí)際，才是我們設(shè)計(jì)師最需要關(guān)注的方向。
文章來源：站酷 作者：知果日記YRrui
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.cqzjtgb.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ù)
費(fèi)茨定律(Fitts'sLw)是一個(gè)描述人類運(yùn)行學(xué)的經(jīng)驗(yàn)公式，用于計(jì)算人們移動手指或鼠標(biāo)等設(shè)備到某個(gè)目標(biāo)的時(shí)間，以考慮目標(biāo)大小和距離為主。
費(fèi)茨定律的公式是T=a+blog2(D/S+1)，其中T是時(shí)間，a和b是實(shí)驗(yàn)測得的常數(shù)，D是目標(biāo)的距離，S是目標(biāo)的大小。說明了在給定目標(biāo)情況下，目標(biāo)距離越遠(yuǎn)，需要的時(shí)間越長；在給定距離的情況下，目標(biāo)越小，需要的時(shí)間越長。
費(fèi)茨定律廣泛地用于人機(jī)交互界面設(shè)計(jì)中，例如在B端常用的設(shè)計(jì)按鈕上，可根據(jù)該定律來選擇適當(dāng)?shù)哪繕?biāo)大小和間距，以使用戶更好地達(dá)到業(yè)務(wù)目標(biāo)。
比如在B端產(chǎn)品彈窗界面設(shè)計(jì)中，確定和取消按鈕都會放在右下角，使得用戶更容易點(diǎn)擊。確定按鈕更高頻故放在最右邊，視覺表現(xiàn)更明顯，使其更容易一眼點(diǎn)擊。此外，兩個(gè)按鈕之間的距離也很重要，因?yàn)樗鼤绊懙接脩舻狞c(diǎn)擊時(shí)間，為了讓用戶更容易進(jìn)行選擇，按 鈕間保持12px距離，避免用戶誤觸。
1956年美國心理學(xué)家喬治·米勒對短時(shí)記憶能力進(jìn)行了定量研究，他發(fā)現(xiàn)人的短時(shí)記憶能力廣度為7±2個(gè)信息塊，記憶信息超過了該范圍就容易出錯(cuò)。因此心理學(xué)家把這個(gè)神奇的記憶容量規(guī)律稱為“7±2法則”。 在人機(jī)交互設(shè)計(jì)界面中，如果要引入新的元素或操作，應(yīng)該盡可能地減少其數(shù)量和復(fù)雜性，以便用戶更容易理解和記憶。
比如在B端卡片設(shè)計(jì)中的操作按鈕一般會控制在7-2法則即5個(gè)操作按鈕，若有其它操作會隱藏在更多按鈕里面，把頻次較高的按鈕放在一級展示中，頻次較少的按鈕放在二級浮窗展示中。通過分解復(fù)雜的任務(wù)和信息，減少冗余內(nèi)容使得用戶更容易理解且更快完成業(yè)務(wù)過程。
格式塔原理是心理學(xué)的一個(gè)概念，也廣泛應(yīng)用于設(shè)計(jì)領(lǐng)域中。該原理認(rèn)為人類大腦在處理感知信息時(shí)，會自動將信息組織成具有整體性、完整性和結(jié)構(gòu)性的形態(tài)，即所謂的“格式塔”。
在設(shè)計(jì)中，格式塔原理有幾個(gè)常見應(yīng)用：
1.相似性原則：相似的事物更容易被視為一組，與不同的事物分離。因此，設(shè)計(jì)師可以使用相似的顏色、形狀、大小等元素來將相關(guān)的信息組織在一起，提高信息的可讀性和易用性。
2.接近性原則：接近的事物更容易被視為一組，與遠(yuǎn)離的事物分離。因此，設(shè)計(jì)師可以使用空間布局來將相關(guān)的信息組織在一起，提高信息的可讀性和易用性。
3.對稱性原則：人類大腦喜歡對稱和平衡的形態(tài)。因此，設(shè)計(jì)師可以使用對稱的布局來吸引用戶的注意力，提高視覺吸引力和美感。
4.閉合性原則：人類大腦傾向于將不完整的形狀視為完整的形狀。因此，設(shè)計(jì)師可以使用封閉的形狀來強(qiáng)調(diào)信息，使用戶更容易理解和記憶。
相似性原則的應(yīng)用比如在B端的卡片設(shè)計(jì)中，所有的卡片樣式相似在人腦理解中默認(rèn)會視為相同的一組數(shù)據(jù)。
接近性原則比如在B端的表單設(shè)計(jì)中，常常會將一組數(shù)據(jù)通過接近性原則組織在一起，提高信息易讀性。
對稱性原則常用在大屏與報(bào)表設(shè)計(jì)中，通過對稱性布局提高視覺美感，吸引用戶注意力。
閉合性原則常用于連續(xù)性表格或圖形等設(shè)計(jì)中，通過不連續(xù)性來讓用戶大腦形成封閉路徑強(qiáng)調(diào)后續(xù)可讀信息。
比如在下面的表格中通過形狀的不連續(xù)性反而讓用戶大腦更快感知到還有信息可以滾動查看。
雅各布定律(Jacob'sLaw)是一條常被引用的交互設(shè)計(jì)法則，它由美國心理學(xué)家Donald Norman提出。該定律指出，人們在使用任何新系統(tǒng)時(shí)，都會將他們以前所經(jīng)驗(yàn)過的類似系統(tǒng)的知識應(yīng)用于新系統(tǒng)。
雅各布定律的核心思想是，在設(shè)計(jì)新系統(tǒng)時(shí)，應(yīng)該考慮到用戶的現(xiàn)有經(jīng)驗(yàn)和期望，并盡量避免創(chuàng)造完全不同的界面模式。這樣可以使用戶更容易理解和掌握新系統(tǒng)，并減少學(xué)習(xí)成本。
比如在B端設(shè)計(jì)中常用到的圖表編輯快鍵可以延用用戶在其他系統(tǒng)常用到的快捷鍵，如win或mac系統(tǒng)都常用到的快捷指令可復(fù)用到B端產(chǎn)品的快捷操作中。
防錯(cuò)原則(Principle of Fail--Safe or Fault-Tolerance)是一種設(shè)計(jì)思想，其目的是減少或避免因錯(cuò)誤或故障而導(dǎo)致的不良后果。它通常被用于設(shè)計(jì)高度可靠的系統(tǒng)或設(shè)備，以確保在錯(cuò)誤事故發(fā)生時(shí)，系統(tǒng)或設(shè)備仍然能夠繼續(xù)正常運(yùn)行，或者能夠平穩(wěn)地停止運(yùn)行，以避免進(jìn)一步的損害或危險(xiǎn)。
在界面設(shè)計(jì)中如設(shè)計(jì)可撤銷操作，通過系統(tǒng)中允許用戶執(zhí)行可撤銷操作，以避免因誤操作而導(dǎo)致的不良后果。
或在界面設(shè)計(jì)中常用到的反饋和提醒彈窗等操作，以幫助用戶及時(shí)發(fā)現(xiàn)錯(cuò)誤或故障，并采取適當(dāng)?shù)拇胧?
泰思勒基本定律(Tesler’sLaw)由Larry Tesler于l984年明確提出，也稱 「復(fù)雜性質(zhì)量守恒」。
該基本定律覺得：該定律認(rèn)為每一個(gè)過程都有其固定的復(fù)雜性，存在一個(gè)臨界點(diǎn)，超過這個(gè)點(diǎn)過程就不能再簡化了，你只能將固有的復(fù)雜性從一個(gè)地方移動到另外一個(gè)地方。
可以通過簡約至上的隱藏、轉(zhuǎn)移、刪除等原則進(jìn)行用戶體驗(yàn)的提升。
早在14世紀(jì)，哲學(xué)家、圣方濟(jì)各會修士奧卡姆的威廉提出來了奧卡姆剃刀原理，這個(gè)原理說的是“切勿浪費(fèi)較多東西去做較少的東西同樣可以做好的事情”，后來以一種更為廣泛的形式被人們知曉“如無必要，勿增實(shí)體”。
奧卡姆剃刀常用于兩種假說的取舍上：如果對于同一現(xiàn)象有兩種不同的假說，我們應(yīng)該采取比較簡單的那一種。對于幾個(gè)功能相同的設(shè)計(jì)，在設(shè)計(jì)都可用的情況下，則選擇視覺干擾較少的設(shè)計(jì)。
在設(shè)計(jì)上則能夠指導(dǎo)我們對產(chǎn)品做減法，去減少不必要的元素，在進(jìn)行設(shè)計(jì)的時(shí)候，先分析用戶的的主流程是什么，流程內(nèi)的引導(dǎo)盡量弱化，沒有必要則不增加。
比如在B端產(chǎn)品設(shè)計(jì)中的登錄頁面以登錄流程為核心，不需要增加其它沒必要的流程。
除了以上七大定律外，也有尼爾森的10大設(shè)計(jì)原則，與以上定律基本一致。總而言之，交互設(shè)計(jì)規(guī)律的宗旨都是幫助設(shè)計(jì)師創(chuàng)造易用、高效、愉悅的用戶體驗(yàn)。在B端產(chǎn)品設(shè)計(jì)中，將交互定律貫穿于產(chǎn)品設(shè)計(jì)中可以提升產(chǎn)品易用性，降低學(xué)習(xí)成本，使產(chǎn)品更規(guī)范，對企業(yè)用戶的工作效率與商業(yè)價(jià)值都有積極的影響
文章來源：優(yōu)設(shè)網(wǎng) 作者：麗創(chuàng)輕文
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.cqzjtgb.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ù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.cqzjtgb.com