亚洲五码高清在线观看,国产精品77,www.色婷婷五月综合在线色吧 ,天天久久无码一区二区三区,国产视频九九九,蜜桃传媒一区二区亚洲AV,中国毛片视频,天天操天天操天天干

▲點擊"三分設(shè)"關(guān)注，回復(fù)"社群"加入我們

歡迎來到專業(yè)設(shè)計師學(xué)習(xí)交流社區(qū)

三分設(shè)｜連接知識，幫助全球 1 億設(shè)計師成長

阿里巴巴設(shè)計官方認(rèn)證 MCN 機(jī)構(gòu)

SUXA 深圳體驗設(shè)計協(xié)會華東分會

全球服務(wù)設(shè)計共創(chuàng)節(jié)城市站發(fā)起者

轉(zhuǎn)自：UX 辭典

編輯：李凱悅

共 3177 字，預(yù)計閱讀 8 分鐘

工具？玩具？

一個美觀的儀表盤通常會帶有很多功能和小部件，且非常有設(shè)計感。但實際上，它總是看著很花哨，并不實用。就像魔術(shù)師玩兒撲克牌，讓人眼花繚亂。一味強(qiáng)調(diào)視覺效果的儀表盤，會讓人很快喪失興趣。為什么會發(fā)生這種情況？我們應(yīng)如何創(chuàng)造一個有效的工具？

Outcrowd

一、設(shè)計儀表盤：大腦

萬事開頭難，卻也最重要，你正在為儀表盤的長期開發(fā)奠定基礎(chǔ)。

你需要決定：

-儀表盤將如何推進(jìn)公司目標(biāo)？

-儀表盤的結(jié)構(gòu)、功能和視覺效果？

-哪種設(shè)計最適合你的目標(biāo)受眾？

這些問題的答案將構(gòu)成你的基礎(chǔ)設(shè)計理念。

Perls

儀表盤「智能化」是其實現(xiàn)目標(biāo)的能力。

有人認(rèn)為儀表盤只需要可讀性就夠了，但這種想法很片面。假設(shè)有一個用于激勵員工的儀表盤，設(shè)計師只注重美化數(shù)據(jù)，而不是突出激勵信息，這就足以讓儀表盤失去其真正意義。

儀表盤中沒有任何瑣碎的細(xì)節(jié)。

儀表盤顯示的信息應(yīng)幫助用戶做出決定。設(shè)計師的工作是幫助用戶解決問題，而不是設(shè)計一系列無關(guān)緊要的瑣碎工具，任何不朝著目標(biāo)前進(jìn)的事情都應(yīng)及時糾正。

從項目的啟動到結(jié)束，設(shè)計師必須時刻關(guān)注公司目標(biāo)和用戶目標(biāo)。

否則，儀表盤設(shè)計將停滯不前。

Clover

二、數(shù)據(jù)和 KPI 選擇：循環(huán)系統(tǒng)

儀表盤數(shù)據(jù)就像循環(huán)的血液，我們必須了解它們的來源。設(shè)計師需要了解指標(biāo)與信息，從而挑選合適的窗口部件。例如，用戶希望在屏幕上能讀取不同的數(shù)據(jù)，面對繁雜的數(shù)據(jù)信息，你要做的不是刪除，而是分清主次，弱化不必要的內(nèi)容。

Bidding Car

最重要的指標(biāo)有助于實現(xiàn)目標(biāo)和把控流程（或產(chǎn)品）。例如：

顯示實際的成功率；

影響人們對產(chǎn)品的看法；

激勵產(chǎn)品研發(fā)團(tuán)隊。

KPI 指標(biāo)的建立與用戶是分不開的。比如，哪種視覺呈現(xiàn)方式最容易被用戶理解？

人們喜歡看到與目標(biāo)相符的數(shù)字。

Panch

三、儀表盤結(jié)構(gòu)：骨架

好的儀表盤就像一個整潔、干凈的房間，所有功能與必需品都一目了然。那設(shè)計師有哪些方法保持頁面「整潔」呢？

層次結(jié)構(gòu)

請先對所有數(shù)據(jù)進(jìn)行排序和分類，理解哪些是先出現(xiàn)，哪些又應(yīng)該最后出現(xiàn)的，保證用戶可以快速看到關(guān)鍵內(nèi)容。

視覺層次結(jié)構(gòu)必須反映信息層次結(jié)構(gòu)。

數(shù)據(jù)層次結(jié)構(gòu)通過小部件的大小和位置表示，如果你的用戶習(xí)慣從左到右閱讀，那么關(guān)鍵信息務(wù)必放在左上角，最不相關(guān)的信息置于右下角。

對數(shù)據(jù)排序的方法取決于儀表盤的用途，根據(jù)信息的優(yōu)先級組織信息、創(chuàng)建邏輯是非常重要的。

將信息面板視為一個故事，而不是一系列數(shù)據(jù)點。

柵格

柵格是設(shè)計師的老朋友了，幫助我們 創(chuàng)建頁面布局、排序、協(xié)調(diào)和對齊元素。

信息模塊

模塊系統(tǒng)類似于房間分區(qū)，臥室用來睡覺，餐廳用來吃飯——每個區(qū)域都有其功能。居住時的舒適程度，取決于它們位置的便利程度，糟糕的布局是不可逆地，很難通過家具裝飾來改變。所以同樣地，我們在設(shè)計儀表盤前，必須事先考慮清楚模塊地劃分。

模塊清晰地展示了內(nèi)容層次結(jié)構(gòu)，并根據(jù)數(shù)據(jù)的重要性、相關(guān)性和邏輯性進(jìn)行了分組，每個模塊在流程中都有自己的實際作用。

連續(xù)性和接近性

相互關(guān)聯(lián)的過程，在邏輯上也應(yīng)是接近的。如果其中一個進(jìn)程需要另一個模塊信息去支持，在布局上就要建立聯(lián)系。設(shè)計師必須事先考慮，這樣用戶就不必逐一尋找了。

Illustration: Outcrowd

從最重要到最不重要，所有信息都應(yīng)按重要程度分組，并就近放置。

分離模塊

想讓信息呈現(xiàn)更具「呼吸感」，可以加入一些負(fù)空間，來平衡設(shè)計元素。

Wingle

四、功能：肌肉

功能和工具的數(shù)量取決于儀表盤的用途和用戶的關(guān)鍵目標(biāo)。不要在控制面板上放很多工具，過多會使人們感到困惑。

Band

五、小部件：重要器官

設(shè)計師的工作是讓相關(guān)數(shù)據(jù)可訪問，但又不過量，用戶應(yīng)該在幾秒內(nèi)就理解看到的內(nèi)容。數(shù)據(jù)可視化的部件通常包括：表格、曲線圖、示意圖、卡片、指示器、圖像、群組和列表等信息。

Activity

小部件的選擇取決于儀表盤的用途與受眾。試著考慮以下幾點：

哪個窗口小部件能最好地顯示 KPI？

哪個小部件是用戶最容易理解的？

什么可以幫助用戶更快地找到他們需要的東西？

選擇易于理解和閱讀的小部件。

下圖是一個令人困惑的窗口小部件示例：

通過主要「目標(biāo)」來吸引用戶注意力。比如，首要任務(wù)是績效目標(biāo)，則使用數(shù)字；如果需要對比值，用折線圖或柱形圖會更直觀；若是激勵團(tuán)隊，可以使用具有相關(guān)亮點的排行榜。

選擇錯誤的小部件或默認(rèn)小部件模板，可能會讓用戶感到困惑或誤解數(shù)據(jù)。

最好的解決方案是經(jīng)過分析和測試得出的結(jié)果。

最好的小部件設(shè)計是簡約且易于閱讀的。例如，一個 3D 圖表可能看起來令人印象深刻，但它分散了用戶大部分的注意力；像漸變，花哨的顏色與過多的細(xì)節(jié)，也都會引發(fā)同樣的問題。

六、視覺設(shè)計：常規(guī)方法

我們已經(jīng)創(chuàng)建了儀表盤的核心主體，剩下要做的事情就是皮膚——視覺設(shè)計?？梢愿鶕?jù)設(shè)計的基本原則實現(xiàn)，但仍有一些細(xì)節(jié)需注意。

簡潔

儀表盤應(yīng)具備必要的工具和文件，避免過多冗雜得信息，做到簡潔無干擾。

MEMO

調(diào)色板

儀表盤的顏色選擇，應(yīng)以清楚地顯示信息為導(dǎo)向。調(diào)色板越復(fù)雜，完成起來也越困難。為了區(qū)分不同數(shù)據(jù)，可以使用同色系或相鄰色系。

避免使用可能具有負(fù)面含義的顏色。下圖示例中，紅色看起來像是代表不良和不受歡迎的事物。

如果儀表盤提供可自定義的顏色，請確保所有可用的選項在視覺上別有太大出入。Adobe Color CC 取色器，可以幫助你又快又準(zhǔn)確地拾取。

突出

為了突出顯示一個元素，可以在 顏色（對比度和亮度）、形狀、大小、負(fù)空間等下功夫。

可讀性和數(shù)字格式

確保信息清晰可讀的要點：布局簡潔、搭建視覺層次、突出重點、元素對比，字體得當(dāng)。高精度的數(shù)字格式很難理解，最好四舍五入一下。

七、適應(yīng)性

建立不同端的應(yīng)用程序，先看目標(biāo)用戶的使用需求。如果你的用戶主要集中在移動端，那就先開發(fā)移動端吧，之后再搭建其他設(shè)備端也不遲。

Snap

寫在最后

設(shè)計一個好的儀表盤絕非易事。我們把它看做是一種「進(jìn)化」，因為它是記錄并展示重要內(nèi)容的一種新方式。在開發(fā)時，應(yīng)時刻提醒自己：是否一切已準(zhǔn)備就緒？用戶會喜歡這個結(jié)果嗎？它有用嗎？綜上來看，視覺呈現(xiàn)是我們最不應(yīng)該擔(dān)心的事。如果你沒有丟失任何信息，那么儀表盤對于用戶來說是一個非常有價值的助手，而非一件花哨的玩具。

推薦閱讀