首頁

商業(yè)實(shí)戰(zhàn)丨如何通過競品分析快速提煉設(shè)計(jì)策略應(yīng)用到售前設(shè)計(jì)?

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

售前設(shè)計(jì),主要是指在To B銷售中從銷售線索挖掘到設(shè)計(jì)項(xiàng)目方案直至最終簽約的這個(gè)環(huán)節(jié)。這個(gè)環(huán)節(jié)可謂是真正的商戰(zhàn),大家為了戰(zhàn)勝其他競爭對手,都會絞盡腦汁投入極高的人力和時(shí)間成本競標(biāo)。

B端彈窗設(shè)計(jì)-彈窗承載信息量不固定?該如何定義彈窗尺寸規(guī)范?

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

相信大多B端設(shè)計(jì)師對web彈窗設(shè)計(jì)的規(guī)范都不陌生:
比如彈窗按交互形式可分為模態(tài)彈窗和非模態(tài)彈窗;按承載內(nèi)容類型分為:提示類、操作類、展示類彈窗;按照彈窗承載信息量的大小可以分為:小尺寸彈窗、中尺寸彈窗、大尺寸彈窗...等等但最近,在做一個(gè)操作提效的需求設(shè)計(jì)時(shí)遇到了需求方對彈窗尺寸的規(guī)范挑戰(zhàn)~

設(shè)計(jì)調(diào)研三部曲

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

在設(shè)計(jì)領(lǐng)域,調(diào)研是一個(gè)至關(guān)重要的環(huán)節(jié),然而,要進(jìn)行一次有效的設(shè)計(jì)調(diào)研并不容易。它需要我們掌握一系列方法和技巧,靈活運(yùn)用定性和定量的研究手段,同事還要結(jié)合實(shí)際情況進(jìn)行分析和判斷。本文將探討如何進(jìn)行設(shè)計(jì)調(diào)研,介紹產(chǎn)品分析,競品分析和用戶分析的方法和工具,為您的設(shè)計(jì)工作注入新的靈感和價(jià)值。

用一篇文章,帶你完整了解近年來流行的視覺風(fēng)格

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

作為設(shè)計(jì)師,我們經(jīng)常需要做產(chǎn)品的視覺風(fēng)格定義。那么什么是視覺風(fēng)格,具體又要怎么定義?我隨便在群里問了下這個(gè)問題,好像大多都比較模糊,更別說設(shè)計(jì)行業(yè)外的人了。
借這個(gè)問題,我想來聊聊我的理解,希望對大家有所啟發(fā)。
對于不同的領(lǐng)域或產(chǎn)品來說,視覺風(fēng)格的定義、要素以及設(shè)計(jì)方法,可能也是完全不同的。
 

從用戶角度出發(fā),如何優(yōu)化大數(shù)據(jù)可視化體驗(yàn)|北京藍(lán)藍(lán)UI設(shè)計(jì)公司

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

隨著現(xiàn)代科技的不斷進(jìn)步,數(shù)據(jù)量的急劇增加,大數(shù)據(jù)已經(jīng)成為人們探索世界的新工具。但是,對于普通用戶而言,大數(shù)據(jù)往往比較抽象和難以理解,因此,大數(shù)據(jù)可視化作為一種非常有效的工具工具被廣泛應(yīng)用。然而,在實(shí)際應(yīng)用中,僅僅使用大數(shù)據(jù)可視化工具還不夠,如何從用戶角度出發(fā),優(yōu)化大數(shù)據(jù)可視化體驗(yàn)是非常關(guān)鍵的。

 

B端設(shè)計(jì)速查-篩選 | 這樣去做篩選才不會爛|北京藍(lán)藍(lán)UI設(shè)計(jì)公司

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

 

我們在B端設(shè)計(jì)里,對于一個(gè)平臺或工具系統(tǒng)而言其包含的數(shù)據(jù)往往是邏輯復(fù)雜其龐大的。在這龐大的數(shù)據(jù)海里,我們能有用精準(zhǔn)的篩選方式來定位我們所需要的數(shù)據(jù)。這是一個(gè)系統(tǒng)所要具備最基礎(chǔ)的功能,也是提升用戶體驗(yàn)的關(guān)鍵。

UI設(shè)計(jì)中交互設(shè)計(jì)7大定律|北京藍(lán)藍(lán)UI設(shè)計(jì)公司

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

01菲茨定律

A點(diǎn)移動到B點(diǎn)所需要的時(shí)間,距離(L)和目標(biāo)大小(D)決定了這個(gè)參數(shù)!

我們可以理解成射箭,要想更容的打中靶心,可以放大靶心,或者移動兩者之間的距離!

UI設(shè)計(jì)中其實(shí)包含很多,比說banner圖點(diǎn)擊任意地方就可以進(jìn)入,或者是鼠標(biāo)直接右鍵,或者是直接放大的按鈕!

02席克定律:

當(dāng)一個(gè)人面臨選擇越多的時(shí)候,所花費(fèi)的時(shí)間就越長!

我們可以通過,將這些選擇進(jìn)行分類打包,以站酷為例子將類似功能進(jìn)行分類或者分頁面,幫助用戶梳理進(jìn)行梳理。

現(xiàn)實(shí)中比如超市的水果區(qū),蔬菜區(qū),以及廚房調(diào)料區(qū)也都是這個(gè)道理!

03接近原則

當(dāng)兩個(gè)物體里的比較近的時(shí)候,你就認(rèn)為他們是有聯(lián)系的,這個(gè)感覺簡單到感覺不能算定律的定律,是格式塔心理學(xué)上的老知識了,就比如兩個(gè)不認(rèn)識異性同事從賓館中走出,在別人眼中別人就以為他們是開房去了。

在UI中最常見的就是布局排版和歸類的暗示用戶相關(guān)聯(lián)的元素,比如用更大的間距或者顏色隔開相同的元素。

04交互設(shè)計(jì)7±2

美國心理學(xué)家(喬治·米勒)研究中認(rèn)為,人對5-9個(gè)元素之間會表現(xiàn)出比較良好的記憶狀態(tài),如果超出這個(gè)范圍就會容易出錯(cuò)。

在UI設(shè)計(jì)當(dāng)中的應(yīng)用那就是真的太廣泛了,比如說APP當(dāng)中的底部欄或者金剛區(qū),一般單行不會超過5個(gè)圖標(biāo)按鈕,或者是文案標(biāo)題,你仔細(xì)想想,單獨(dú)超過9個(gè)字的標(biāo)題是不是很少。

05泰勒斯定律

該定律認(rèn)為每一個(gè)流程都有一定的復(fù)雜性,且存在一定臨界值!超過這個(gè)零界點(diǎn)就不能在簡化了,你只能將這些復(fù)雜的流程從一個(gè)地方搬移到另一個(gè)地方。

比如以前的電視機(jī)遙控器很復(fù)雜,但是遙控器很簡單!現(xiàn)在的遙控器很簡單,但是電視界面很復(fù)雜!

UI設(shè)計(jì)中最常見的就是認(rèn)證流程,其實(shí)分步驟填寫也是這個(gè)道理。
當(dāng)然一些雞賊的產(chǎn)品經(jīng)理往往會把最復(fù)雜的流程放到最后,你都填寫那么多了,總不能最后直接放棄吧!

這個(gè)定律也微信和qq經(jīng)久不衰重大原因之一,好多不相關(guān)的網(wǎng)站都可以通過這些巨頭的賬號一鍵登錄!
他們直接把數(shù)據(jù)庫進(jìn)行搬移或者共享,讓用戶省去復(fù)雜的認(rèn)證流程!

06新鄉(xiāng)重夫防錯(cuò)原則

大部分的操作失誤都是因?yàn)樵O(shè)計(jì)不當(dāng)造成的,我們可以通過優(yōu)化設(shè)計(jì)去減少失誤,比如說最常見的就是出現(xiàn)一些敏感操作的時(shí)候進(jìn)行一些提示!

這個(gè)定律也可以反過來用,比如說你要卸載一些軟件,或者是取消一些購物的時(shí)候。那個(gè)卸載或者是取消購物的按鈕,他總是灰色的!

07奧卡姆剃刀原理

一切以簡單實(shí)用為原則,去掉不必要的因素!減少用戶反復(fù)操作帶來的厭惡感!比如我做的這個(gè)后臺管理,就比如說投影、描邊、多色彩圖標(biāo)、以及沒必要背景元素,統(tǒng)統(tǒng)不要!

這個(gè)定律是非常契合b端交互模式的,但是在C端當(dāng)中有一些確實(shí)不適用的,比如說電商或者是產(chǎn)品活動網(wǎng)頁,
需要用戶更長時(shí)間的停留在這個(gè)界面,這個(gè)時(shí)候我們就需要對圖進(jìn)行填充更多元素,來激發(fā)用戶的購買欲望或者停留時(shí)間!

作者:達(dá)達(dá)里鴨
鏈接:https://www.zcool.com.cn/article/ZMTU4MjI0MA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助,微信號:ben_lanlan,報(bào)下信息,藍(lán)小助會請您入群。歡迎您加入噢~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(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ì)公司

北京藍(lán)藍(lán)UI設(shè)計(jì)公司 | 如何挖掘產(chǎn)品需求 | 利益相關(guān)者漣漪&SWOT

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

在一個(gè)項(xiàng)目中,我們第一步要確認(rèn)的是如何準(zhǔn)確的定位用戶群體。

即這個(gè)項(xiàng)目對接的核心角色是誰?

我們知道一個(gè)B端需求會涉及多個(gè)角色,每個(gè)角色都可以看作是一個(gè)利益相關(guān)者。

越靠近核心角色,代表重要程度越高,這就意味著,我們做這個(gè)需求的時(shí)候要根據(jù)重要程度排優(yōu)先級,才能符合需求。

數(shù)據(jù)透視設(shè)計(jì)力:北京藍(lán)藍(lán)UI設(shè)計(jì)揭秘如何量化評估設(shè)計(jì)系統(tǒng)的用戶體驗(yàn)

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

在當(dāng)今數(shù)字化時(shí)代,設(shè)計(jì)系統(tǒng)的健康運(yùn)轉(zhuǎn)對于提升用戶體驗(yàn)、優(yōu)化產(chǎn)品功能至關(guān)重要。然而,如何科學(xué)地度量評估設(shè)計(jì)系統(tǒng)的表現(xiàn),尤其是組件庫的維護(hù)升級效果,一直是業(yè)內(nèi)關(guān)注的焦點(diǎn)。傳統(tǒng)的問卷形式定性評估雖然廣泛應(yīng)用,但因其受限于樣本量和周期性評估的特性,難以提供實(shí)時(shí)、精準(zhǔn)的反饋。

在B端設(shè)計(jì)領(lǐng)域,Light Design設(shè)計(jì)系統(tǒng)憑借其出色的組件庫,為用戶帶來了極大的便利。然而,隨著產(chǎn)品功能的不斷迭代和用戶體驗(yàn)要求的提升,組件庫的維護(hù)升級也面臨著越來越多的挑戰(zhàn)。為了更加敏捷地應(yīng)對這些挑戰(zhàn),我們急需一種實(shí)時(shí)的定量監(jiān)測能力,以便快速定位問題、明確迭代方向,進(jìn)而減少維護(hù)成本,提升組件庫的易用性。

本文將以Light Design設(shè)計(jì)系統(tǒng)的組件庫為例,深入探討如何通過定量指標(biāo)來優(yōu)化組件庫的維護(hù)升級流程。我們將從四個(gè)關(guān)鍵方面展開:明確問題、選擇指標(biāo)、探究現(xiàn)狀、解決風(fēng)險(xiǎn)。

首先,我們需要明確想要挖掘組件庫的哪些問題。這些問題可能涉及組件的使用頻率、錯(cuò)誤率、性能表現(xiàn)等多個(gè)方面。通過將這些問題按維度分類,我們可以更加清晰地了解組件庫的現(xiàn)狀和潛在風(fēng)險(xiǎn)。

接下來,根據(jù)設(shè)立的維度,我們將選擇合適的觀測指標(biāo)。這些指標(biāo)應(yīng)該能夠準(zhǔn)確地反映組件庫的性能表現(xiàn)和用戶體驗(yàn),同時(shí)也需要具有可量化、可比較的特點(diǎn)。

在確定了觀測指標(biāo)后,我們將開始探究這些指標(biāo)所反映的現(xiàn)狀和風(fēng)險(xiǎn)。通過收集和分析實(shí)際數(shù)據(jù),我們可以了解組件庫在實(shí)際使用中的表現(xiàn),發(fā)現(xiàn)存在的問題和瓶頸,為后續(xù)的優(yōu)化提供有力支持。

首先,我們需要明確希望定量評估幫助解決哪些問題,從參與組件庫的角色來入手把問題維度進(jìn)行分類:

角色一是維護(hù)方,負(fù)責(zé)生產(chǎn)和迭代組件。對于這一方,希望宏觀的知道目前組件庫的體量,判斷是需要精簡還是擴(kuò)充;

以及還需要判斷迭代周期是否合理,那么就對應(yīng)以下2個(gè)維度:

1.構(gòu)成規(guī)模-即組件庫由多少組件構(gòu)成。

2.維護(hù)效率-即組件庫迭代的快慢。

角色二是引用方,也就是各個(gè)業(yè)務(wù)平臺的設(shè)計(jì)師、研發(fā)同學(xué)。他們會在日常的需求消化中,引用組件完成功能迭代。我們希望通過這些引用的行為觀測組件庫的覆蓋能力,提前預(yù)知不易用的風(fēng)險(xiǎn)組件,盡早升級。于是就有了以下2個(gè)維度:

1.引用規(guī)模-即有多少平臺用到了組件庫。

2.易用性-即組件是否在各業(yè)務(wù)場景都方便引用。

有了維度分類后,接下來就需要在眾多組件庫的觀測數(shù)據(jù)中,選取合適的數(shù)據(jù)成為觀測指標(biāo)。

下面是我們根據(jù)評估維度選擇的觀測指標(biāo):

構(gòu)成規(guī)模

1.組件個(gè)數(shù)-基礎(chǔ)、業(yè)務(wù)、圖表等多組件庫分別計(jì)數(shù)。

2.組件庫覆蓋率-各組件庫中被引用組件對于全集的占比。

維護(hù)效率

1.組件庫迭代進(jìn)度-迭代性質(zhì)可分為問題修復(fù)、特性和實(shí)驗(yàn)性功能增優(yōu)。

引用規(guī)模

1.引用平臺數(shù)-有多少平臺引用了組件庫。

2.組件庫版本引用占比-各平臺引用的是哪個(gè)版本的組件庫(組件庫每升級一次,即為一個(gè)新版本)。

3.各平臺組件庫引用覆蓋-我們提供了基礎(chǔ)、業(yè)務(wù)、圖表3個(gè)大組件庫,從這個(gè)數(shù)據(jù)可以獲知各個(gè)業(yè)務(wù)平臺都引用了前述的哪些組件庫,以及各引用了多少組件。

易用性

1.組件引用次數(shù)-組件被各業(yè)務(wù)方引用了多少次。

2.組件改寫次數(shù)-此處為非正常改寫,業(yè)務(wù)的研發(fā)強(qiáng)行破壞了組件的既有樣式,業(yè)內(nèi)通常稱其為"Hack"。

通過上面的分析,我們就得到了一個(gè)較為完整的觀測指標(biāo)框架,下面我們來探討下如何利用他們實(shí)際去發(fā)現(xiàn)和解決問題。

探&解

確定以上觀測指標(biāo),我們搭建了監(jiān)測平臺,日常監(jiān)控組件庫的數(shù)據(jù)表現(xiàn),產(chǎn)出數(shù)據(jù)報(bào)告。下面就用實(shí)際的例子來講講如何利用這些定量的觀測指標(biāo),發(fā)現(xiàn)并解決組件庫的易用性和維護(hù)上的一系列問題。

易用性相關(guān)

問題1:如何定位到不好用的組件?是否值得升級?又如何進(jìn)行優(yōu)化呢?

解:這里需要依靠2個(gè)數(shù)據(jù)指標(biāo)來判斷,分別是組件的引用次數(shù)和改寫次數(shù)。簡單解釋就是高頻引用同時(shí)又頻繁改寫的組件嚴(yán)重影響了業(yè)務(wù)方的引用效率,這些組件自然是不好用的,需要重點(diǎn)解決。

我們以表單組件為例,來看下具體的工作流。

1.定位出高頻引用且高頻改寫的組件:首先定位到"表單"組件出現(xiàn)在引用數(shù)Top5內(nèi),且改寫數(shù)是非常頻繁的。

2.還原具體改寫場景并分類歸因:針對"表單"組件,拉取了改寫的css代碼,逐一分析都改寫了哪些樣式。從中提煉出共性的改寫場景,進(jìn)行分類歸因。于是可以把表單組件的改寫問題分為4大類,分別是行間距問題、標(biāo)簽寬度問題、橫向表單缺失問題、附屬表單樣式規(guī)范問題。

3.針對不同原因?qū)С鼋鉀Q手段進(jìn)行組件升級:最后,根據(jù)上述問題,逐一進(jìn)行設(shè)計(jì)和研發(fā)升級。升級后的表單組件再被業(yè)務(wù)方引用時(shí),免去了改寫的成本,平均單次引用可節(jié)省約1h的研發(fā)耗時(shí)。

問題2:上面解決了單個(gè)組件的易用性問題,但無法從全局判斷組件庫整體的易用性表現(xiàn),那應(yīng)該如何解決呢。

解:把所有組件的引用次數(shù)加和,得到總體數(shù)值,并結(jié)合時(shí)間維度,觀察組件庫整體改寫數(shù)與引用數(shù)各自的變化趨勢。用線形圖來描述的話,隨著時(shí)間推移,引用越多,改寫越少,兩條線呈開口狀,那就表示組件庫處于越來越健康的狀態(tài)。反之則需要警惕了。同時(shí)我們搭建了一套評分體系,基于引用/改寫數(shù)值,通過歸一化和加權(quán)等一系列計(jì)算,by月/季度給組件庫易用性打分,也能精準(zhǔn)的知道組件庫易用性的表現(xiàn),如果分值是下降的,就要具體去定位哪些組件出了問題,再根據(jù)上述的方法相應(yīng)地進(jìn)行升級。

日常維護(hù)相關(guān)

問題1:業(yè)務(wù)方反饋的升級訴求經(jīng)常扎堆,怎么去快速判斷升級的優(yōu)先級呢,提高維護(hù)效率呢?

解:為了能提高組件庫的維護(hù)效率,及時(shí)滿足各業(yè)務(wù)方的訴求,會從易用性、引用規(guī)模、升級成本這三方面來綜合判斷升級的優(yōu)先級。

首先,將業(yè)務(wù)側(cè)提出升級訴求的組件按業(yè)務(wù)上線時(shí)間由近到遠(yuǎn)排序。這就有了一個(gè)基礎(chǔ)的優(yōu)先級。

然后,從中挑選有嚴(yán)重bug的組件(易用性差)、多平臺高頻引用的組件(引用規(guī)模大),往前調(diào)整優(yōu)先級。

最后,評估它們的升級成本,如果成本小,迅速能迭代,那就按順序解決。如果其中有大規(guī)模升級的組件,不一定能敏捷支持,那就需要與業(yè)務(wù)側(cè)商量,先提供臨時(shí)替代方案,再專項(xiàng)升級組件。

問題2:日常維護(hù)組件庫,如何保持組件庫的活力?

解:組件庫若長期未更新,說明對業(yè)務(wù)升級訴求的支持效率不高。此外若存在一些低頻使用甚至冗余的組件,則會在組件庫升級時(shí)帶來很大的負(fù)擔(dān)。所以需要時(shí)刻保持組件庫的精煉和活力。我們從兩方面來評估,第一、固定周期內(nèi)的迭代頻次,這體現(xiàn)了應(yīng)對業(yè)務(wù)方訴求的響應(yīng)速度和自驅(qū)升級的主動性;第二、低頻引用的組件個(gè)數(shù),首先我們會定期清理引用數(shù)為0的組件,并分析低頻組件不常被引用的原因,相應(yīng)做精簡、合并,控制低頻引用組件個(gè)數(shù),有利于我們將更多的精力聚焦在重點(diǎn)組件的維護(hù)升級上。

結(jié)語

上述給大家簡單地介紹了設(shè)計(jì)系統(tǒng)相關(guān)的定量指標(biāo)及其使用案例,那么除了以上這些,其實(shí)我們還有很多可擴(kuò)展的空間,如目前的數(shù)據(jù)維度都是針對系統(tǒng)"維護(hù)方"和"引用方"的,還缺少"平臺體驗(yàn)者",也就是真正用戶對設(shè)計(jì)系統(tǒng)的視覺/操作體驗(yàn)指標(biāo),如何通過定量的手段收集這些指標(biāo)數(shù)據(jù),與定性數(shù)據(jù)相輔相成讓組件庫的評估更為精準(zhǔn),將是我們接下來需要探索的課題。

 

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助,微信號:ben_lanlan,報(bào)下信息,藍(lán)小助會請您入群。歡迎您加入噢~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(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ì)公司

關(guān)于一個(gè)數(shù)據(jù)概覽的復(fù)盤|北京藍(lán)藍(lán)UI設(shè)計(jì)公司

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

前言在B端的業(yè)務(wù)之中,數(shù)據(jù)概覽頁面屬于常見的頁面,對主管有快速查看/查詢/決策的左右,對于執(zhí)行也能查詢到KPI是否完成的,防止遺漏的作用。今天就結(jié)合業(yè)務(wù)之中的一個(gè)案例,跟大家做一個(gè)分享,有不同的意見可以留言或者是私聊溝通(謝謝大家)。業(yè)務(wù)需求我們團(tuán)隊(duì)主要做的OA類型的項(xiàng)目,主要是服務(wù)于公司內(nèi)部的開發(fā)團(tuán)隊(duì)。隨著業(yè)務(wù)的逐步拓展、用戶的角色需求的多樣化、角色數(shù)量的多樣化、團(tuán)隊(duì)內(nèi)部開發(fā)團(tuán)隊(duì)難度、設(shè)計(jì)師人手有限等矛盾不斷遞增,8個(gè)數(shù)據(jù)概覽模塊面臨著體驗(yàn)復(fù)雜以及設(shè)計(jì)開發(fā)難度大的問題。涉及到的元素

業(yè)務(wù):涉及8個(gè)應(yīng)用,40個(gè)頁面。
角色分解:QA,IPM,SPM,TMDE,TES,模塊owner。
使用場景:管理者匯總團(tuán)隊(duì)信息、向上匯報(bào)以及分析數(shù)據(jù)。

現(xiàn)有問題體驗(yàn)不一致,提高管理成本:

架構(gòu)組件以及樣式不同的模塊完全不相同,缺少規(guī)范性

開發(fā)低效,溝通成本高:

組件重復(fù)開發(fā),開發(fā)成本高
設(shè)計(jì)師與開發(fā)溝通成本高

解決問題解決流程分為:找高頻框架通過收集40個(gè)頁面的布局,結(jié)合對執(zhí)行者與決策者的角色行為進(jìn)行分析,將所有的頁面分為:

數(shù)據(jù)概覽
數(shù)據(jù)分析
詳情查看

重復(fù)組件將可視化按照空間分成;

底層:背景
內(nèi)容層:頁頭+篩選+圖表+表格
頂層:動作按鈕

高頻樣式現(xiàn)有的樣式雜亂無章,因此針對現(xiàn)有的樣式進(jìn)行收集和整理分類為布局,色板,字體,將所有的頁面所有的元素進(jìn)行拆解,統(tǒng)計(jì)高頻樣式。分成:

布局:按照業(yè)務(wù)流程順序區(qū)分
高度:統(tǒng)計(jì)導(dǎo)航欄的高度重新計(jì)算高度
走向:統(tǒng)計(jì)現(xiàn)有瀏覽器導(dǎo)航高度重新定高度
字體:現(xiàn)有字體尤其是在數(shù)字的展現(xiàn)方式區(qū)分度不夠

組架構(gòu)組合3個(gè)場景并且對頁面進(jìn)行分類,提取其中高頻的進(jìn)行整理繼續(xù)布局:

數(shù)據(jù)概覽:圖表+頁頭
數(shù)據(jù)分析:頁頭+篩選+指標(biāo)+圖表
詳情查看:頁頭+篩選+圖表+詳細(xì)表格

組件組合模塊根據(jù)業(yè)務(wù)進(jìn)行“總-分”形式的:

功能模塊
子模塊
子功能

上面是針對于常規(guī)的功能模塊,針對非常規(guī)的模塊「例如:結(jié)果頁面」進(jìn)行更加細(xì)化的區(qū)分“圖表”“表格”“篩選”,再度細(xì)分成為主體和變體進(jìn)行區(qū)分。樣式組合

布局:將7個(gè)常規(guī)的布局手鏈成為2個(gè):“字-左上,圖表右下”,“圖表左右,注釋右邊”
高度:以win為例,導(dǎo)航欄分為3欄,再去保證頁面的報(bào)告率格急性型分組:1920對應(yīng)的是440,1600對應(yīng)的是360px,1366對應(yīng)的是280px
走向:根據(jù)統(tǒng)計(jì)的數(shù)據(jù)來,3個(gè)模塊會出現(xiàn)超過20字的注釋或者是標(biāo)簽名,因此延伸出2套解決方案:“自上而下”,和“自下而上”,經(jīng)過驗(yàn)證邀請幾個(gè)同學(xué)發(fā)現(xiàn)自上而下閱讀成本低,理解成本更低
字體:現(xiàn)有字體中,常規(guī)的默認(rèn)字體區(qū)區(qū)分度不高,所以引入了Din作為支持?jǐn)?shù)字呈現(xiàn)的

作者:一只雞腿啊啊啊
鏈接:https://www.zcool.com.cn/article/ZMTU4NDQyOA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助,微信號:ben_lanlan,報(bào)下信息,藍(lán)小助會請您入群。歡迎您加入噢~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(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è)人資料

存檔