<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    <del id="afajh"><form id="afajh"></form></del>
        1. <th id="afajh"><progress id="afajh"></progress></th>
          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>

          實戰(zhàn)技巧|設(shè)計一個有效的儀表盤很難嗎?

          共 3072字,需瀏覽 7分鐘

           ·

          2021-06-22 19:40

          點擊"三分設(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)心的事。如果你沒有丟失任何信息,那么儀表盤對于用戶來說是一個非常有價值的助手,而非一件花哨的玩具。



          推 薦 閱 讀
          華為用戶體驗設(shè)計的體系搭建方法
          超 10 億用戶的產(chǎn)品,到底是怎么做用戶體驗的?
          揭秘滴滴、蔚來等大廠的用戶體驗設(shè)計策略
          一款為你帶來難忘體驗的美食 APP
          谷歌的新一代 Web 性能體驗和質(zhì)量指標(biāo)
          2021 年用戶體驗設(shè)計趨勢分析
          想要引導(dǎo)用戶行為轉(zhuǎn)化,理解這 4 個認(rèn)知心理學(xué)理論
          讓設(shè)計圈一片嘩然的 Google 新 logo 到底出了什么問題?
          如何系統(tǒng)的增強(qiáng)用戶粘性,提升產(chǎn)品轉(zhuǎn)化率?
          設(shè)計新趨勢「玻璃擬態(tài)」到底是什么?
          如何將設(shè)計系統(tǒng)快速的從 Sketch 切換到 Figma?



          歡迎大家關(guān)注三分設(shè),每天分享優(yōu)質(zhì)設(shè)計、創(chuàng)意靈感、新知新識,定期大咖老師直播分享,零距離連麥,答疑解惑。
          瀏覽 29
          點贊
          評論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報
          評論
          圖片
          表情
          推薦
          點贊
          評論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報
          <kbd id="afajh"><form id="afajh"></form></kbd>
          <strong id="afajh"><dl id="afajh"></dl></strong>
            <del id="afajh"><form id="afajh"></form></del>
                1. <th id="afajh"><progress id="afajh"></progress></th>
                  <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  黄色直播在线观看 | 欧美成人生活片一区三区 | 大白屁股日本女人视频 | 三级片视频在线观看 | 天天操天天干天天透 |