首頁

設(shè)計師如何做產(chǎn)品需求分析:先聊聊兩個“價值”

杰睿

近兩年出現(xiàn)了不少“解放設(shè)計師雙手”的設(shè)計工具、AI工具,我們似乎能很快輸出N種流程方案、N種布局方案、N種UI風(fēng)格等等。問題是:這樣窮舉設(shè)計方案的工作方式當(dāng)真有效嗎?
 
請警惕“莫得感情”的出圖機(jī)器!具備競爭力的設(shè)計師必須有自主意識,包括清晰的思維邏輯、果敢的決策力。而體現(xiàn)這一意識和能力的重要環(huán)節(jié)之一,就是產(chǎn)品生產(chǎn)鏈路中的首個環(huán)節(jié)“需求分析”。
 
需求分析并不僅僅是產(chǎn)品經(jīng)理的事兒。從共同目標(biāo)的角度來看,互聯(lián)網(wǎng)企業(yè)在崗位劃分上區(qū)分了產(chǎn)品經(jīng)理、設(shè)計師、開發(fā)工程師等,是順應(yīng)人的精力時間有限、術(shù)業(yè)有專攻的自然規(guī)律,但是從業(yè)務(wù)目標(biāo)來說,每一個崗位都應(yīng)該對“最佳用戶體驗(yàn)和最大化商業(yè)利益的平衡”負(fù)責(zé),確保這艘船在正確的航道上。所以,如果每個“船員”都具備主人翁意識和需求分析的能力,航程必然更健康穩(wěn)健。
設(shè)計師如何做產(chǎn)品需求分析:先聊聊兩個“價值”
 
對設(shè)計師來說,需求分析不僅僅是“這個功能要不要做”的問題,也會影響后續(xù)的設(shè)計方案決策。每一次的功能增刪或調(diào)整,都是在改變用戶接收產(chǎn)品界面信息的整體效用,那么每一個產(chǎn)品需求的分析都要評估這個功能在整個信息架構(gòu)、用戶體驗(yàn)鏈路的位置孰輕孰重,也就必然會影響你的設(shè)計方案決策。
 
產(chǎn)品需求從哪里來?
 
“有用戶反饋說……"
“國慶節(jié)快到了,我們策劃了一個活動……”
“這個付費(fèi)轉(zhuǎn)化率很低,達(dá)不到預(yù)期。我們想……”
……
產(chǎn)品需求的來源多種多樣,可能來自產(chǎn)品經(jīng)理、用戶反饋、產(chǎn)品數(shù)據(jù)、市場風(fēng)向、技術(shù)革新等等。當(dāng)然,還有來自作為設(shè)計師的”我自己“。當(dāng)我靈光一閃想到一個很炫酷的小創(chuàng)意,情感上免不了自以為是地想”咱們產(chǎn)品這么不做這個“——這個時候我也會用需求分析的框架來質(zhì)問自己:
“值不值得做(價值評估)”、“應(yīng)當(dāng)先做什么(優(yōu)先級)”、“用戶需求要滿足到什么程度(核心體驗(yàn)鏈路)”這三個問題。
 
做需求分析,要想什么?
我們常說產(chǎn)品需求要“洞察用戶真正的需求”,要明確“用戶價值”。剛?cè)胄械臅r候,我們都會點(diǎn)點(diǎn)頭,心想“對哦”??墒鞘裁词?ldquo;真正的”、什么是“假的”、什么是“價值”?說實(shí)話,這些概念都挺虛的。只有當(dāng)理論落到某個用戶場景去分析,我們才能理解其深意。
 
先說點(diǎn)虛的,什么是“價值”?
 
價值是多維度的概念,在不同的學(xué)科中都會在“價值”前加一個表范圍的定語,比如“勞動價值”、“經(jīng)濟(jì)價值”、”社會價值”。隨著互聯(lián)網(wǎng)的發(fā)展,我們出現(xiàn)了兩個重要的新詞“用戶價值”和“產(chǎn)品價值”。
 
對于用戶而言,他們購買或使用產(chǎn)品或服務(wù)是為了滿足特定的需求,比如提升效率、獲得愉悅、獲取經(jīng)濟(jì)收益等。那么我們說這個產(chǎn)品具有“用戶價值”。
 
所以需求分析首先是“評估價值”,而價值評估則拆分為“用戶價值”和“商業(yè)價值”兩部分。即使當(dāng)下的需求目標(biāo)是提升用戶規(guī)模(拉新、促活、挽留等),并不需要用戶掏錢,也是為了實(shí)現(xiàn)長遠(yuǎn)的商業(yè)價值。當(dāng)然,這僅適用于以盈利為目標(biāo)的企業(yè),非盈利組織還有“社會影響力”的目標(biāo),不在本文討論范圍內(nèi)。
 
下面我們進(jìn)一步拆解價值評估:“用戶價值評估”和“商業(yè)價值評估”。
設(shè)計師如何做產(chǎn)品需求分析:先聊聊兩個“價值”
 
 
1、用戶價值評估
解決哪些用戶在什么場景下的什么問題?
 
這個問題越具體到“人”,就越容易分析。如果需求來自于用戶反饋,我們溯源到具體的用戶。
 
有一個朋友出去創(chuàng)業(yè),想做一個“找飯搭子”的同城陌生人交友軟件。他說,偶爾看到微信朋友圈有人召喚“有沒有人一起探店”的動態(tài),去網(wǎng)絡(luò)社區(qū)搜索“飯搭子”、“同城探店”等詞匯也能看到不少帖子。而且探店吃飯這件事直接關(guān)聯(lián)消費(fèi),商業(yè)模式很清晰。他想通過他的產(chǎn)品解決“用戶|在探店場景中|無法及時找到飯友”的問題。——“找飯友”是一個行為動作,沒有切入到用戶的內(nèi)在需求。
 
定義用戶價值不能只停留在“行為上”,可以嘗試找到目標(biāo)用戶做定性訪談,進(jìn)一步深挖問題。比如,我們想進(jìn)一步把問題下鉆,可能會問到這些問題:
 
● 用戶為什么要找飯友?不能一個人探店?
● 用戶為什么找不到“飯友”?
● ……
 
我們進(jìn)一步細(xì)化“用戶-場景-問題”的價值定義:
解決 一線城市年輕用戶(尤其是剛遷移新城市的年輕人)|通過約伴探店|解決 同好交友(社群需求)、 “量大”餐館均攤成本(省錢需求)、獲得更愉悅的吃飯氛圍 (情緒需求)的問題。
設(shè)計師如何做產(chǎn)品需求分析:先聊聊兩個“價值”
 
 
那有了這個用戶價值定義是不是就可以順利立項(xiàng)呢?——看這個文章的篇幅,你只讀了不到一半,當(dāng)然還有更多需要推敲的問題,請繼續(xù)閱讀。
 
這個需求接觸不到真實(shí)用戶怎么辦?
 
有時候我們的需求來源可能是市場風(fēng)向、技術(shù)革新帶來的未知變化。我們無法直觀地獲知“具體的用戶是誰”、“TA在什么場景遇到什么問題”。
——這種情況,我們則需要反向思考:這個需求如果做了,獲益的用戶是誰?滿足了他們在什么場景下的需求?如果不做,用戶會不會因此棄用我們的產(chǎn)品?可能流失的用戶,大盤占比可能是多少?是不是高價值用戶?
設(shè)計師如何做產(chǎn)品需求分析:先聊聊兩個“價值”
 
 
用上面的思路去層層推敲,可能會否定原來的產(chǎn)品策劃,可能會挖掘出新的需求,可能會改變需求的優(yōu)先級。
 
值得一提的是,有時候經(jīng)過層層推敲,最終得到的決策可能會與市面上的競品有所雷同。也就是我們經(jīng)常會問的一個問題:為什么A產(chǎn)品已經(jīng)做了這件事,B產(chǎn)品還要做同樣的事情?
 
有的功能或服務(wù)是順應(yīng)用戶需求而產(chǎn)生的,如果有所缺失,就無法達(dá)成用戶目標(biāo)。比如短視頻產(chǎn)品都會做點(diǎn)贊和評論,因?yàn)橐曨l創(chuàng)作者和消費(fèi)者分別有“獲得認(rèn)可”的被尊重訴求、”表達(dá)意見“的掌控欲等心理需要。而產(chǎn)品則需要這些點(diǎn)贊和評論數(shù)據(jù)去評判內(nèi)容熱度和豐富個性化標(biāo)簽,以優(yōu)化內(nèi)容的推送機(jī)制。很多同一賽道的產(chǎn)品會有雷同的功能,雖然常常被調(diào)侃為”相互抄“,但是真正做需求分析才能看清“什么是無腦抄”、“什么是必然如此”。
 
2、商業(yè)價值評估
用戶會為你這個新產(chǎn)品/新功能買單嗎?
 
我們找到一個有用的需求點(diǎn)是簡單的,因?yàn)樾枨蟮膩碓凑娴奶嗵?,但是?dāng)我們發(fā)現(xiàn),用戶不一定會為我們的新產(chǎn)品或新功能買單。
請注意,這里的“買單”不限于用戶掏錢,還包括用戶決定使用哪個產(chǎn)品的決策成本、用戶愿意花費(fèi)在某個產(chǎn)品的時間和學(xué)習(xí)成本等。
 
那我們怎么預(yù)判用戶會不會買單呢?或者,如何提升用戶的買單意愿呢?
 
如前面所言,“用戶價值”就是通過你的產(chǎn)品獲得了預(yù)期的效用。效用可以是省了時間、省了錢、省了學(xué)習(xí)成本、獲得情緒價值、獲得安全感等。而用戶對效用的感知,往往是對比過去經(jīng)驗(yàn)的解決方案得到的。所以,我們首先要看用戶之前是怎么解決這個問題的,然后是用戶遷移到新的解決方案(使用新產(chǎn)品或新功能)要付出多少成本。
 
繼續(xù)用上面“飯搭子”的案例:
設(shè)計師如何做產(chǎn)品需求分析:先聊聊兩個“價值”
 
 
——我們從這個案例可以看到,當(dāng)我們做成本對比,不能簡單地說新舊方案哪個成本更高。用戶付出的“成本”是多維度,包括“時間成本”、“經(jīng)濟(jì)成本”、“安全風(fēng)險”等維度。
“飯搭子”這個新方案,對比舊方案,并沒有沒有壓倒性的成本優(yōu)勢。我們雖然可以通過產(chǎn)品設(shè)計和運(yùn)營降低當(dāng)中的用戶成本,比如通過用戶歷史參與數(shù)據(jù)(參與飯局次數(shù)、飯友評價、真實(shí)職業(yè)信息等)提供用戶靠譜度評分,以降低安全成本。但消除用戶成本,需要花費(fèi)較大的資源投入,我們可以預(yù)判這不是一個高ROI的產(chǎn)品項(xiàng)目。
有趣的是,人不是完全理性的。有的場景,只要其中一項(xiàng)成本感知強(qiáng)烈,人就可能選擇棄用這個產(chǎn)品。比如“飯搭子”這個案例中,女性用戶對安全風(fēng)險更為敏感,女性用戶更不愿意嘗試陌生社區(qū)。
設(shè)計師如何做產(chǎn)品需求分析:先聊聊兩個“價值”
 
 
如果我做的是一個非常創(chuàng)新的項(xiàng)目,真的沒辦法找到“舊方案”做對比呢?或者我無法獲知舊方案的用戶成本呢?——我們依然建議盡可能地接近用戶、收集足夠多的信息,以輔助判斷。如果依然非常不明朗,可以通過MVP的方案去預(yù)估。關(guān)于MVP實(shí)踐的書籍和網(wǎng)絡(luò)資料很多,大家可以自行搜索。
 
多少用戶會買單呢?
? 確認(rèn)了這個需求有用戶價值
? 確認(rèn)了有XX需求的用戶很可能會買單
——接下來可以開干了嗎?
 
不夠,還需要預(yù)判收入規(guī)模。因?yàn)椋菏杖?客單價x支付用戶數(shù)=客單價x訪問用戶數(shù)x支付轉(zhuǎn)化率。
這個等式適用于一般的to C產(chǎn)品,不同的產(chǎn)品可能有差異,比如視頻用戶的使用時長可能與產(chǎn)品收入掛鉤,那么用戶時長也需要作為一個變量放入到你的產(chǎn)品收入公式中。
當(dāng)我們要開發(fā)一個新的付費(fèi)互動功能,我們需要做數(shù)據(jù)預(yù)估:這個互動功能放在這個位置,每天的曝光可能是多少?按照此頁面同樣位置的點(diǎn)擊轉(zhuǎn)化和其他功能的付費(fèi)轉(zhuǎn)化,能否預(yù)估這個新功能的收入?這個收入規(guī)模值得投入X天的開發(fā)人力嗎?
如果這個需求的直接目標(biāo)不是收入,而是獲取更大用戶規(guī)模。我們也同樣用“等式”這個思考方式來去做數(shù)據(jù)估算,只是把“收入”理解為用戶量或其他目標(biāo)數(shù)值、而非金錢收入。
當(dāng)然,通過歷史數(shù)據(jù)估算收入是比較理想的情況。如果身處一個數(shù)據(jù)體系建設(shè)落后的企業(yè)中,我無法獲取足夠的數(shù)據(jù)支持,怎么辦呢?或者,這是一個絕對的革新體驗(yàn)(比如AI輔助內(nèi)容創(chuàng)作),我無法用過往的數(shù)據(jù)或經(jīng)驗(yàn)評估收入規(guī)模,怎么辦呢?
那么,至少解答“解決哪些用戶在什么場景下的什么問題”,來看看這個需求的用戶場景覆蓋是否足夠廣;再權(quán)衡為了獲得這個新產(chǎn)品/新功能帶來的新體驗(yàn),用戶要投入哪些成本,以此做需求的排除法——跟創(chuàng)業(yè)一樣,做產(chǎn)品本身就存在了諸多不確定性,并非所有的決策都能通過公式去論證。
我們只能在有限條件下盡量選擇做正確的事,排除那些大概率不能成功的事。然后嘗試MVP,或直接交給市場和時間驗(yàn)證。
此外,如果設(shè)計師想作為初創(chuàng)成員加入新產(chǎn)品,還要跑通可持續(xù)的盈利模式。這里又是一大塊學(xué)問,比如了解這個企業(yè)做這件事的資源優(yōu)勢等等,本文作者的知識域和本文篇幅都有限,建議感興趣的朋友翻看商業(yè)分析相關(guān)書籍。但是新舊方案的用戶成本對比、收入公式的拆解,依然是重要且可行的商業(yè)價值視角。
 
3、優(yōu)先級
“優(yōu)先級”可以分為兩層理解,一層是產(chǎn)品需求之間的優(yōu)先級排序,另一層則是功能范圍層的優(yōu)先級,也就是我們聊需求經(jīng)常會問的問題:我們明確了這個產(chǎn)品需求當(dāng)下就要啟動,但是當(dāng)前要做到什么程度呢?
前者,對比不同需求的產(chǎn)品價值大小,再結(jié)合開發(fā)實(shí)現(xiàn)成本和耗時、是否需要追趕某個時間節(jié)點(diǎn)等,產(chǎn)品需求之間優(yōu)先級不難得出。而設(shè)計師更多要思考的是后者。
舉個例子:開學(xué)季馬上要到了,產(chǎn)品經(jīng)理了解到學(xué)校有類似“語文朗誦作業(yè)打卡”的作業(yè)打卡訴求。我們希望搶時間窗去滿足這個大規(guī)模的家校場景,即“如何最快地滿足每日/周重復(fù)的信息收集需求”?作業(yè)打卡場景可否延伸到其他打卡場景,不同的打卡有何共性或差異?
其中“最快”暗含的意思是“這個功能至少要做到什么程度才能滿足最核心的用戶需求”。這個時候,我們拉了一個表格,快速梳理不同用戶角色(比如區(qū)分“打卡創(chuàng)建者”和“參與打卡者”)的體驗(yàn)鏈路,再決策各個體驗(yàn)環(huán)節(jié)的功能復(fù)雜度要到哪里。
從全盤中抽取出體驗(yàn)閉環(huán)的最小集
從全盤中抽取出體驗(yàn)閉環(huán)的最小集
 
不要忽視商業(yè)競爭中的時間差,因?yàn)閾屜日碱I(lǐng)市場的產(chǎn)品實(shí)際上是提升用戶遷移到競爭對手的成本。過去我們提倡匠人精神,不放過每一個細(xì)節(jié)。而當(dāng)前激烈的市場競爭環(huán)境下,“有的放矢”比“摳細(xì)節(jié)”更加重要。
 
小結(jié)
我們歸納一下需求分析的思路,多問問這些問題:
設(shè)計師如何做產(chǎn)品需求分析:先聊聊兩個“價值”
 
 
需求分析是比較考驗(yàn)全局觀、邏輯性、數(shù)理分析和共情能力的。工作中可以通過拉表格、思維導(dǎo)圖、白板等工具梳理思路。如果你喜歡寫文字,那就用寫的方式??傊屑山拥疆a(chǎn)品需求就動手出界面方案。
最后,小作者想留一個開放性問題:“AI能替代人類做產(chǎn)品需求分析嗎?”期待大家的評論區(qū)留言~
 

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

小功能大細(xì)節(jié)|掌握選擇控件設(shè)計

杰睿

 

我們UI設(shè)計師在界面設(shè)計的時候經(jīng)常會使用到單選按鈕、復(fù)選框、開關(guān)這些選擇控件,它們是設(shè)計中經(jīng)常會使用到的讓用戶進(jìn)行選擇的控件。盡管它們在用戶界面中是常用的組件,但設(shè)計師、產(chǎn)品經(jīng)理在為他們的任務(wù)選擇合適的組件時,仍然會有很多現(xiàn)實(shí)的麻煩,而我們則需要更認(rèn)真地探究其中的細(xì)節(jié)。
良好的掌握每個組件的使用場景,可以更加積極的幫助用戶體驗(yàn)產(chǎn)品。本文通過結(jié)合實(shí)際案例與思考,與各位分享這類選擇控件在web端的使用邏輯與細(xì)節(jié)差異,希望能對設(shè)計工作帶來一定的指導(dǎo)意義。
 
你是否有這種困惑?
當(dāng)我們需要用戶在兩個選項(xiàng)中選擇一個選項(xiàng)時,在這種情況下可以使用三種控件:單個復(fù)選框、兩個單選按鈕或者開關(guān),那么我們應(yīng)該如何做出抉擇呢?
感覺似乎使用Radio單選按鈕、Checkbox復(fù)選框和Switch切換開關(guān)這三個組件好像都是可以的。下面文中會對于這三個組件的基本特點(diǎn)、使用準(zhǔn)則,以及常見場景等的探討來告知設(shè)計師們該如何去做出正確的選擇。
 
小功能大細(xì)節(jié)|掌握選擇控件設(shè)計
 
 
 
要搞清楚這些組件的使用問題,我們需要來了解一下這些組件的由來與用法場景。
 
小功能大細(xì)節(jié)|掌握選擇控件設(shè)計
 
 
 
選擇控件(Selection Control):是一種供用戶選擇不同選項(xiàng)的,常用于表單、設(shè)置頁等。它一般分為三類:單選按鈕(Radio)、復(fù)選框(Checkbox) 和開關(guān)(Switch)。
 
小功能大細(xì)節(jié)|掌握選擇控件設(shè)計
 
 
 
一、選擇控件的由來與用法
不論是單選按鈕、復(fù)選框還是開關(guān),他們都能在現(xiàn)實(shí)世界中找到事例。這些組件是將現(xiàn)實(shí)生活中的事物映射反應(yīng)到界面設(shè)計中,使得用戶可以更加簡單高效地理解他們本身所代表的交互含義,通過官方定義的“建議”用來指導(dǎo)標(biāo)準(zhǔn)化使用。
 
小功能大細(xì)節(jié)|掌握選擇控件設(shè)計
 
 
 
二、選擇控件的差異
單選按鈕、復(fù)選框、開關(guān)組件它們都具有不同的時效性。
 
小功能大細(xì)節(jié)|掌握選擇控件設(shè)計
 
 
 
單選按鈕/復(fù)選框本質(zhì)上只是變輸入為選擇的快捷方式,當(dāng)需要用戶輸入的內(nèi)容只有幾種固定的格式時,可以通過變輸入為選擇,這樣不僅節(jié)約時間,也能避免輸入出錯,但這需要提托頁面中的其他觸發(fā)組件來保存和執(zhí)行這樣的操作。開關(guān)這類組件被點(diǎn)擊后會立刻執(zhí)行,并觸發(fā)界面或系統(tǒng)中可明顯被用戶感知到的某些變化。
 
小功能大細(xì)節(jié)|掌握選擇控件設(shè)計
 
 
 
小功能大細(xì)節(jié)|掌握選擇控件設(shè)計
 
 
 
如何才能正確的選擇合適的控件,這就需要從了解每一個組件開始。
 
一、 Radio 單選按鈕
1. 了解單選按鈕按鈕的由來
單選按鈕(Radio)最早的設(shè)計模型來源于老式收音機(jī)上用于頻率和預(yù)設(shè)電臺之間切換的物理按鍵。當(dāng)其中一個按鍵被按下時,所有其他的按鍵都會被彈出,被按下的那個按鍵就成為了唯一一個處于“按下”狀態(tài)的選中按鈕。
單選按鈕將這一物理特征進(jìn)行了隱喻設(shè)計,是一種涇渭分明的表現(xiàn)。
但是感覺這樣的說法可能有些不嚴(yán)謹(jǐn)。從物理世界演化到UI后,這個組件有了交互上的變化,UI設(shè)計中的單選按鈕功能只是錄入內(nèi)容,并不立即執(zhí)行,而收音機(jī)的物理按鍵卻能立即觸發(fā)(換臺)操作,所以單選按鈕的使用是在不斷的演變中發(fā)展變化著,未來也許還有新的改變。
UI概念是由Xerox PARC的研究首次引入的,它是一家研發(fā)公司,應(yīng)用業(yè)務(wù)涉及到常用的計算機(jī)技術(shù),包括:以太網(wǎng)、圖形用戶界面、編程、鼠標(biāo)等。Xerox Star 8010工作站是第一款在圖形用戶界面中帶有單選按鈕的設(shè)備。
 
小功能大細(xì)節(jié)|掌握選擇控件設(shè)計
 
 
 
2. 單選按鈕的特點(diǎn)
單選按鈕是將所有信息條件暴露給用戶,它不像開關(guān)在使用上帶有猜測、探索的必要。
1)
標(biāo)識性:單選按鈕通常以圓形圖標(biāo)的形式呈現(xiàn),旁邊附有文字說明,用于表示選項(xiàng)的內(nèi)容。這種設(shè)計使得單選按鈕易于用戶識別和操作。
2)
互斥性:僅允許用戶在一組選項(xiàng)中選擇其中一項(xiàng)。
3)
直觀性:每個單項(xiàng)選擇都非常直觀,它會公開所有可用選項(xiàng),用戶能夠一眼看到所有可用的選項(xiàng)并做出選擇。如果希望用戶明確閱讀完所有選項(xiàng),則最好使用單選按鈕。
4)
拓展性:單選按鈕的拓展性更強(qiáng),相對于復(fù)選框、開關(guān)的布爾值,單選按鈕能承載兩個或兩個以上的選項(xiàng)。
5)
默認(rèn)值:單選會提供默認(rèn)值選項(xiàng),且默認(rèn)值可以承載具體內(nèi)容。
 
3.
單選組件的用法準(zhǔn)則
單選按鈕是主要用于兩個或更多選項(xiàng)列表的選擇器,列表中的所有選項(xiàng)是相互排斥的,用戶必須清楚準(zhǔn)確地選擇一個選項(xiàng)。
1)當(dāng)用戶點(diǎn)擊一個未選擇的單選選項(xiàng)時,它將取消選擇先前選擇的任何其他選項(xiàng)。
2)要為用戶提供默認(rèn)選項(xiàng),確保它對于用戶來講是最安全或者最可能的選項(xiàng)。
3)選擇較少的情況下使用單選按鈕組件更好,但選項(xiàng)一旦較多,例如七八個的時候就不太適合一一展開,這會占用很多空間,因此將選項(xiàng)收起來放在下拉選單里會比較合適。
4)清楚表明單選按鈕各個狀態(tài),才能使用戶更明確使用,達(dá)到設(shè)計目的。
 
小功能大細(xì)節(jié)|掌握選擇控件設(shè)計
 
 
 
4. 案例場景分析
1)讓用戶明確知道單選、復(fù)選的區(qū)別,強(qiáng)調(diào)各個選項(xiàng)的不同
不同的選項(xiàng)內(nèi)容,如果采用復(fù)選框,用戶需要在兩個差距較大的選項(xiàng)中去思考,延長考慮時間,使得用戶更為焦躁。
 
小功能大細(xì)節(jié)|掌握選擇控件設(shè)計
 
 
 
2)開啟/關(guān)閉的單選狀態(tài),建議使用復(fù)選框
復(fù)選框?qū)τ诮^大多數(shù)用戶都是非常清楚,復(fù)選框?qū)τ谠诳臻g、視覺焦點(diǎn)上使用更為集中,如果只針對開啟/關(guān)閉的單選狀態(tài),則不建議選擇單選按鈕,推薦使用復(fù)選框。
 
小功能大細(xì)節(jié)|掌握選擇控件設(shè)計
 
 
 
3)每個選項(xiàng)都關(guān)聯(lián)內(nèi)容時,使用單選按鈕
如果默認(rèn)選項(xiàng)內(nèi)容設(shè)計的好,會讓更多人保持選擇默認(rèn)選項(xiàng)。
在表單設(shè)計中一個不錯的默認(rèn)選項(xiàng),會讓很多人保持選擇默認(rèn)選項(xiàng),提升表單操作效率。下圖案例如果采用復(fù)選框或者開關(guān)控件,用戶就不得不去思考開啟后是什么,還要擔(dān)心理解開啟/關(guān)閉后帶來的影響,但對于絕大多數(shù)用戶來說,系統(tǒng)默認(rèn)內(nèi)容無需改動,給用戶提供的默認(rèn)選擇,一般是安全、方便的選項(xiàng)。
 
小功能大細(xì)節(jié)|掌握選擇控件設(shè)計
 
 
 
4)較長需隱藏拆分的內(nèi)容情況,使用單選按鈕
在界面設(shè)計中,如果遇到的內(nèi)容需要重新組織或者拆分時,選擇使用單選按鈕組件。不僅能夠做到信息簡潔,也能夠提高用戶的瀏覽效率。
 
小功能大細(xì)節(jié)|掌握選擇控件設(shè)計
 
 
 
5)垂直排列單選,信息閱讀更佳
如果選項(xiàng)文字名稱較長,需要添加說明,這時單選組件承載的信息較多,同時使用垂直排列的方式能讓用戶有一致的閱讀瀏覽方向,眼球動線移動幅度較小,信息獲取體驗(yàn)更佳。如果選項(xiàng)文字較少,也可橫排不占用太多的垂直空間。
 
小功能大細(xì)節(jié)|掌握選擇控件設(shè)計
 
 
 
6)提供默認(rèn)選項(xiàng),保持視覺分量相同
單選按鈕總是默認(rèn)選中一個選項(xiàng),不應(yīng)該展示沒有默認(rèn)選擇的單選組件。這個規(guī)則的唯一例外情況是在使用單選按鈕進(jìn)行用戶問卷選擇時,使用單選按鈕在所有選項(xiàng)列表中要有相同的視覺分量,使用戶從列表中選擇任何選項(xiàng)的可能性是相等的。默認(rèn)被選中的單選框設(shè)計可以為用戶提供明確的建議。默認(rèn)的選項(xiàng)可以引導(dǎo)用戶做出最佳選擇,并增強(qiáng)他們繼續(xù)完成任務(wù)的信心。
 
小功能大細(xì)節(jié)|掌握選擇控件設(shè)計
 
 
 
7)明確的可交互區(qū)域,讓用戶易于操作
單選按鈕、復(fù)選框是UI設(shè)計中最小的交互式元素之一,因此它們需要有一個易于訪問的點(diǎn)擊區(qū)域。單選組件交互操作時需要讓用戶不僅通過單擊或點(diǎn)擊該小控件,還可以單擊標(biāo)簽相關(guān)聯(lián)的文本來選擇一個選項(xiàng),確保用戶可以單擊單選控件或標(biāo)簽文本上的任意一個選項(xiàng)時都易于操作。
 
小功能大細(xì)節(jié)|掌握選擇控件設(shè)計
 
 
 
8)所有的選項(xiàng)要對齊
單選按鈕不應(yīng)該有什么子選項(xiàng),單選按鈕的設(shè)計初衷是讓用戶在多個選項(xiàng)中選擇一個,而不是在一個選項(xiàng)內(nèi)部進(jìn)行進(jìn)一步的選擇。單選按鈕通常與RadioGroup一起使用,用于將多個單選按鈕組合為一組,確保同一組內(nèi)的單選按鈕只能有一個被選中。錯誤的排列會讓用戶感到困擾,所有的選項(xiàng)要對齊放置在同一層級。
 
小功能大細(xì)節(jié)|掌握選擇控件設(shè)計
 
 
 
9)選項(xiàng)小于等于5個,可使用單選按鈕
當(dāng)選項(xiàng)小于5個,應(yīng)考慮使用單選按鈕,
用戶可以不需要任何點(diǎn)擊或輸入操作即可馬上瀏覽所有選項(xiàng)并直接點(diǎn)擊選擇出來。
 
小功能大細(xì)節(jié)|掌握選擇控件設(shè)計
 
 
 
10)選項(xiàng)只有且必須一個時,使用單選按鈕
當(dāng)選項(xiàng)只能選擇一個,且必須選擇1個時,應(yīng)使用單選按鈕。
 
小功能大細(xì)節(jié)|掌握選擇控件設(shè)計
 
 
 
11)單選項(xiàng)確保選項(xiàng)既全面又互斥
如果無法保證全面,需提供“其他”選項(xiàng),比如在婚姻狀態(tài)里,除已婚、未婚外,如果你不知道還有別的什么狀態(tài),最好提供“其他”選項(xiàng)作為補(bǔ)充,否則諸如離異、喪偶等情況會無法使用該系統(tǒng)。
 
小功能大細(xì)節(jié)|掌握選擇控件設(shè)計
 
 
小功能大細(xì)節(jié)|掌握選擇控件設(shè)計
 
 
 
二、 Checkbox 復(fù)選框
1. 了解復(fù)選框組件
復(fù)選框的物理原型來自于紙張上的多選題,例如餐廳的菜單,選多選少互不影響,并且用戶傾向于用?這個符號來勾選,這個符號從古代商號記流水賬核查到現(xiàn)在教師批閱作業(yè)的“對勾”,無一不表示著“正確、認(rèn)可”。它代表的是一種選擇,而現(xiàn)實(shí)中的多選題,往往是非時效性的,勾選之后不會立即生效。
 
小功能大細(xì)節(jié)|掌握選擇控件設(shè)計
 
 
 
復(fù)選框既可以是單個選項(xiàng),也可以是可供選擇的一組選項(xiàng)。當(dāng)用戶可以選擇任意數(shù)量的選項(xiàng),包括零個、一個或幾個時可使用復(fù)選框組件。集合中的每個復(fù)選框都獨(dú)立于其他所有復(fù)選框,因此選中一個復(fù)選框不會對其他復(fù)選框產(chǎn)生任何影響。而復(fù)選框讓用戶在兩個選項(xiàng)之間進(jìn)行選擇,勾選后和未勾選表示則可表示“是/否、要/不要、開啟/關(guān)閉…” 等結(jié)果,準(zhǔn)確的使用復(fù)選框也需要認(rèn)清復(fù)選框的各種狀態(tài),才能更好的表示選項(xiàng)意義。
 
小功能大細(xì)節(jié)|掌握選擇控件設(shè)計
 
 
 
2. 復(fù)選框的特點(diǎn)
1)直觀性:每個復(fù)選框通常由一個方框和一個標(biāo)簽組成,標(biāo)簽用于描述選項(xiàng)內(nèi)容,用戶可以通過點(diǎn)擊方框來切換其選中狀態(tài)。
2)非互斥性:復(fù)選框通常用戶表示一組非互斥的選項(xiàng),即選擇一個不會影響其他選項(xiàng)狀態(tài)。
3)多選性:復(fù)選框允許用戶從一組選項(xiàng)中選擇一個或多個,與單選按鈕不同,復(fù)選框的選中狀態(tài)是獨(dú)立的,選項(xiàng)之間相互獨(dú)立且相關(guān),用戶可以同時選中多個復(fù)選框。
4)公開性:復(fù)選框可公開所有可用選項(xiàng),用戶一眼能夠看到所有可用的選項(xiàng)并做出選擇。
5)靈活性:復(fù)選框可以用于多種場景,如在線調(diào)研、注冊表單等,能夠提高用戶體驗(yàn)和效率。
3. 復(fù)選框的用法準(zhǔn)則
1)為了方便用戶快速理解,復(fù)選框的選項(xiàng)內(nèi)容一般是一句話,不用逗號隔開。
2)父級復(fù)選框允許快速便捷選擇或取消選擇所有項(xiàng)目。
3)復(fù)選框表示狀態(tài),用戶可以延遲提交的交互操作。
4)復(fù)選框作為單選狀態(tài)時,操作對象和選項(xiàng)主體內(nèi)容視覺焦點(diǎn)是不分開的,選擇后就知道被選中了(比如登錄頁面中的用戶需知)。
5)復(fù)選框也可直接表示選項(xiàng)內(nèi)容的開啟、關(guān)閉。
 
4. 案例分析
1) 使用復(fù)選框代表用戶清楚會發(fā)生什么
如果使用單選或開關(guān),會發(fā)現(xiàn)視覺干擾特別嚴(yán)重,一般表單內(nèi)容不需要特別去強(qiáng)調(diào)每一個選項(xiàng)的開啟關(guān)閉狀態(tài)。如果排版受限制,可以將復(fù)選框放到標(biāo)簽的右側(cè)對齊。
 
小功能大細(xì)節(jié)|掌握選擇控件設(shè)計
 
 
 
2)復(fù)選框的標(biāo)簽文本要措辭主動
使用復(fù)選框,要保證選項(xiàng)后標(biāo)簽文本的措辭積極主動,而不是否定的。這將幫助用戶理解如果打開復(fù)選框會發(fā)生什么。
 
小功能大細(xì)節(jié)|掌握選擇控件設(shè)計
 
 
 
3) 提前告知用戶,提示消息可減少復(fù)選框錯誤選擇概率
如果用戶必須從列表中選擇一些選項(xiàng),您應(yīng)該在用戶開始執(zhí)行之前告知用戶,通過顯示提示類似“您應(yīng)該至少選擇X個選項(xiàng)”的消息,來減少用戶復(fù)選框錯誤選擇的機(jī)率。
 
小功能大細(xì)節(jié)|掌握選擇控件設(shè)計
 
 
 
4)復(fù)選框生效需配合提交按鈕
一般情況下,復(fù)選框不會像開關(guān)一樣點(diǎn)擊后立即生效,它需要配合提交按鈕生效。所以用戶在提交前可查看選擇的內(nèi)容是否正確,更有助于信息防錯。如果在設(shè)置頁面,復(fù)選框也可單獨(dú)作為設(shè)置且立即生效。
復(fù)選組件的選項(xiàng)信息和復(fù)選框在一起,特別是對于批量填寫或設(shè)置多個字段,使用復(fù)選框效率更高。
 
小功能大細(xì)節(jié)|掌握選擇控件設(shè)計
 
 
 
5)用復(fù)選框控制表單局部細(xì)節(jié)
如果控制對象的功能是表單頁面的一個局部或信息內(nèi)容不多,用戶也清楚了解選擇后是什么,這種時候復(fù)選框更適合。我們不需要過重的給用戶強(qiáng)調(diào)是什么,用復(fù)選框比使用開關(guān)能使得表單結(jié)構(gòu)內(nèi)容更清晰。
 
小功能大細(xì)節(jié)|掌握選擇控件設(shè)計
 
 
 
6)多選項(xiàng)使用復(fù)選框
在表單中,同個問題中提供多個選項(xiàng)時,使用復(fù)選框。勾選能直接表明“要”或“不要”。
 
小功能大細(xì)節(jié)|掌握選擇控件設(shè)計
 
 
 
7)有且只有一個明顯選項(xiàng)時,用復(fù)選框
只有“選擇”或”取消選擇”一個顯而易見的選項(xiàng)時,更適合使用復(fù)選框。
 
小功能大細(xì)節(jié)|掌握選擇控件設(shè)計
 
 
 
8)存在父子嵌套關(guān)系的分組,多選項(xiàng)能清晰表達(dá)中間選擇狀態(tài)。
未全選中中間狀態(tài)表示在列表中選擇了多個子選項(xiàng)(但不是全部),這時,開關(guān)按鈕不能表示部分選項(xiàng)被選中的狀態(tài),單選按鈕亦不能表示嵌套關(guān)系。
 
小功能大細(xì)節(jié)|掌握選擇控件設(shè)計
 
 
小功能大細(xì)節(jié)|掌握選擇控件設(shè)計
 
 
 
三、 Switch 開關(guān)
1. 了解開關(guān)組件
開關(guān)組件是現(xiàn)實(shí)生活中仿照物理開關(guān)按鈕在界面設(shè)計中的映射,提供了兩種最簡單、直接的對立選項(xiàng),比如開/關(guān)、啟動/禁用等。它就像生活中控制燈泡的開關(guān),當(dāng)我們?nèi)ゲ僮鏖_關(guān)時,燈泡會點(diǎn)亮或者熄滅,會對事物立即產(chǎn)生影響。它的意符必須明確,不然用戶不知道即將要啟動或者關(guān)閉什么
。
小功能大細(xì)節(jié)|掌握選擇控件設(shè)計
 
 
 
在界面設(shè)計中,開關(guān)也同樣具備即時觸發(fā)的特性,如打開Wi-Fi、開啟暗黑模式等,
由于開關(guān)具備很明顯的在用戶心中扎根的隱喻心智,相較于復(fù)選組件而言,操作前后的狀態(tài)更明顯,感知更強(qiáng)烈。
開關(guān)組件提示用戶在兩個互斥選項(xiàng)中進(jìn)行選擇,并且總是有一個默認(rèn)值。當(dāng)用戶必須回答是或否問題和二進(jìn)制操作,如啟用或禁用特定設(shè)置時,它是最合適的組件。開關(guān)組件也屬于雙態(tài)按鈕,是指有開和關(guān)兩個兩種狀態(tài),是在兩個狀態(tài)之間切換。
 
小功能大細(xì)節(jié)|掌握選擇控件設(shè)計
 
 
 
在使用開關(guān)組件時要注意需要提供足夠的視覺反饋,告知用戶什么狀態(tài)下是開著的。
 
2. 開關(guān)組件的特點(diǎn)
1)直觀性:開關(guān)切換組件的設(shè)計通常很直觀,開關(guān)主體選項(xiàng)信息和開關(guān)組件是分離的,兩個視覺焦點(diǎn),用戶可以通過滑動滑塊來改變狀態(tài),而不需要閱讀額外的說明和標(biāo)簽。
2)二元性:開關(guān)切換組件表示兩種相反且互斥的狀態(tài),通常多用在表示“開啟/關(guān)閉”,主要在選項(xiàng)中來回切換,這種二元性使得它非常適合于需要明確狀態(tài)切換的場景。
3)及時性:當(dāng)用戶操作開關(guān)時,相關(guān)的功能和設(shè)置會立即給予用戶反饋,無需額外的確認(rèn)步驟。
4)易用性:開關(guān)組件簡單易懂,即使技術(shù)不太熟悉的用戶也能快速學(xué)會如何使用。
5)可訪問性:現(xiàn)在的開關(guān)設(shè)計考慮到可訪問性,確保所有用戶,包括有視覺或運(yùn)動障礙的人,都能方便地使用。
3. 開關(guān)組件的用法準(zhǔn)則
1)當(dāng)用戶點(diǎn)擊一個開關(guān)時,其對應(yīng)的動作立即生效。
2)由于開關(guān)顯示實(shí)際狀態(tài),所以有時狀態(tài)變化會有延遲。在這種情況下,可使用"處理中"的狀態(tài)動畫,減少用戶焦慮。
3)開關(guān)組件沒有hover效果,有動作效果,用手指的切換更容易,這個組件非常適合應(yīng)用于移動設(shè)備。
4)避免使用開關(guān)控制局部細(xì)節(jié)或者次要的設(shè)置,開關(guān)的視覺權(quán)重比較高,所以用它控制內(nèi)容較多更為合適,比如可以將它作為總開關(guān)打開或關(guān)閉一組設(shè)置。
5) 通常不要用開關(guān)替代復(fù)選框,如果在規(guī)范中定義了復(fù)選框,則盡可能保持一致的使用規(guī)范。
6)對象名稱要傳達(dá)清晰,讓用戶能夠明確感知操作后的動作開啟或關(guān)閉什么。
7)撥動開關(guān)的滑塊后如果狀態(tài)切換失敗,要馬上彈回來。
8)開關(guān)的規(guī)范做法是滑塊在左為“關(guān)”狀態(tài),在右邊為“開”。
9)由于開關(guān)會立即執(zhí)行,所以若是危險的操作需要用戶再次確認(rèn)。
4. 案例場景分析
1)開關(guān)的文本內(nèi)容意思需傳達(dá)清晰開關(guān)主體的信息和按鈕是分離的,和單選、復(fù)選框不一樣。
用戶在點(diǎn)擊開關(guān)按鈕前,必須清晰告知用戶點(diǎn)擊后會發(fā)生什么,有時需要通過增加副標(biāo)題文字內(nèi)容來加以說明。
 
小功能大細(xì)節(jié)|掌握選擇控件設(shè)計
 
 
 
2)立即生效的場景一般使用開關(guān)組件
在表單填寫時,往往最終會有「提交」按鈕作為結(jié)束態(tài),開關(guān)作為表單字段的填寫,用戶點(diǎn)擊后并不能夠立即生效,而是需要再次點(diǎn)擊「提交」按鈕,這樣處理會讓開關(guān)的特點(diǎn)所滯后。所以開關(guān)組件應(yīng)該提供即時生效的結(jié)果,它們不應(yīng)該要求用戶單擊保存或者提交按鈕來應(yīng)用新狀態(tài)。
 
小功能大細(xì)節(jié)|掌握選擇控件設(shè)計
 
 
 
3)著重提醒用戶有風(fēng)險
開關(guān)的視覺權(quán)重較高,在復(fù)雜的表單信息中,它能夠快速吸引用戶注意力,給用戶以視覺提醒。
 
小功能大細(xì)節(jié)|掌握選擇控件設(shè)計
 
 
 
4)避免大面積使用開關(guān),可使用它控制局部細(xì)節(jié)或者次要設(shè)置
開關(guān)在視覺感知上和按鈕有些接近,所以盡可能避免在表單中大量使用開關(guān)來控制局部層級內(nèi)容,推薦使用復(fù)選框來替代開關(guān)作為局部內(nèi)容控制。
 
小功能大細(xì)節(jié)|掌握選擇控件設(shè)計
 
 
 
5)作為高層級內(nèi)容控制或信息設(shè)置
開關(guān)作為總控制來顯示更高層級內(nèi)容,避免web表單中過多使用開關(guān)按鈕,會和其他的基本組件造成視覺干擾。少量使用既凸顯其重要性,又能提升用戶瀏覽表單的效率。
 
小功能大細(xì)節(jié)|掌握選擇控件設(shè)計
 
 
 
6)避免寫“開啟/關(guān)閉”帶動詞含義的字在組件上
如果要將說明文本放在按鈕里面,它們會讓人搞不懂是表示當(dāng)前狀態(tài)還是表示切換后的狀態(tài),此時如果圖形本身狀態(tài)辨認(rèn)度較低,就會使這個問題尤為嚴(yán)重。所以,在設(shè)計開關(guān)時,一定要分別用艷麗和暗淡的顏色來表示開和關(guān)狀態(tài)。
 
小功能大細(xì)節(jié)|掌握選擇控件設(shè)計
 
 
 
7)語序和狀態(tài)要一致
用戶有可能不知道當(dāng)前點(diǎn)擊狀態(tài)到底是開啟還是關(guān)閉。我們可以使用文案輔助來清晰地傳達(dá)意圖和反饋。如以下場景,在文案中添加【開啟】二字結(jié)合開關(guān)按鈕使用,能有效減少用戶對于按鈕與文案之間關(guān)系的思考。請勿使用文案是“關(guān)閉”作為開啟的語序,增加理解成本。
 
小功能大細(xì)節(jié)|掌握選擇控件設(shè)計
 
 
小功能大細(xì)節(jié)|掌握選擇控件設(shè)計
 
 
 
 
小功能大細(xì)節(jié)|掌握選擇控件設(shè)計
 
 
 
1. 單選按鈕、復(fù)選框、開關(guān)組件在正確使用時需特別注意哪些?
1)選擇控件的已選狀態(tài)應(yīng)該要比未選狀態(tài)更加醒目。
2)我們把選擇控件所代表的內(nèi)容稱為標(biāo)簽,標(biāo)簽文本都應(yīng)該簡潔易懂,
避免使用否定詞匯,否則用戶還需要繞彎理解。開關(guān)標(biāo)簽被誤解尤為常見,如“請勿打開”、“補(bǔ)光燈關(guān)閉“、“延時關(guān)閉”這些都是不好的,它們都有否定詞。
3)把控件圖標(biāo)+文字一起作為可點(diǎn)擊區(qū)域,會使用戶操作更方便。
2. 明確清楚單選按鈕、復(fù)選框、開關(guān)各組件的使用方法,才能設(shè)計出更加好用易用的產(chǎn)品。
1)單選組件承載的信息量較多,如果希望用戶對比感知到兩者信息的明顯不同,那么推薦使用單選組件。
2) 復(fù)選框組件適用和拓展性極強(qiáng),即可以單獨(dú)作為設(shè)置使用,也不用配合其他提交按鈕作為表單填寫的一部分。
3)開關(guān)在表單結(jié)構(gòu)、各種控件內(nèi)容較多時,需要頁面清晰、避免過多的視覺突出,所以盡量避免讓無數(shù)個開關(guān)組件在表單中使用。
理論只是指導(dǎo)實(shí)踐的一部分,上述內(nèi)容方法可能只在用戶認(rèn)知和易用性之間,找到一個相對平衡點(diǎn),在未來的設(shè)計中具體的使用場景情況,還是要具體問題具體分析。
 
小功能大細(xì)節(jié)|掌握選擇控件設(shè)計
 
 
文中主要概括總結(jié)了單選按鈕、復(fù)選框、開關(guān)的使用規(guī)范及案例。設(shè)計規(guī)范只是基于產(chǎn)品本身建立的一個標(biāo)準(zhǔn),為了保持后續(xù)視覺統(tǒng)一而提供規(guī)范化的參考。
在實(shí)際的工作設(shè)計中,設(shè)計規(guī)范主要起到指導(dǎo)作用,每個產(chǎn)品需要根據(jù)各自的屬性特點(diǎn)和使用場景進(jìn)行靈活調(diào)整,讓組件規(guī)范個性化匹配自身產(chǎn)品的特點(diǎn)。
設(shè)計規(guī)范只是設(shè)計執(zhí)行中一個基本準(zhǔn)則和使用標(biāo)準(zhǔn),遵循的同時既要根據(jù)各產(chǎn)品中不同的設(shè)計細(xì)節(jié),查缺補(bǔ)漏、迭代優(yōu)化,將產(chǎn)品亮點(diǎn)與規(guī)范達(dá)到一種平衡,在標(biāo)準(zhǔn)的基礎(chǔ)上突出自身產(chǎn)品特點(diǎn),讓其更具有優(yōu)秀的代表性。以上總結(jié)如果不妥之處,望大家交流指正,一起探討學(xué)習(xí)。
 


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

大屏數(shù)據(jù)界面設(shè)計:解鎖數(shù)據(jù)可視化的新境界

藍(lán)藍(lán)設(shè)計的小編

在數(shù)字化轉(zhuǎn)型的浪潮中,大屏數(shù)據(jù)展示已成為企業(yè)決策支持、運(yùn)營監(jiān)控及信息展示的重要窗口。一個精心設(shè)計的大屏數(shù)據(jù)界面,不僅能夠?qū)崟r匯聚海量數(shù)據(jù),以直觀、生動的方式呈現(xiàn)關(guān)鍵信息,還能有效提升團(tuán)隊協(xié)作效率,助力管理層快速做出精準(zhǔn)決策。以下,我們將深入探討大屏數(shù)據(jù)界面設(shè)計的核心要素與實(shí)踐策略,為您解鎖數(shù)據(jù)可視化的新境界。

一、明確設(shè)計目標(biāo):以用戶為中心

(一)用戶需求分析

設(shè)計之初,首要任務(wù)是深入理解目標(biāo)用戶群體的需求與偏好。這包括但不限于他們的信息獲取習(xí)慣、決策關(guān)注點(diǎn)以及對于視覺效果的接受度。通過問卷調(diào)查、訪談或工作坊等形式,收集用戶反饋,確保設(shè)計貼合實(shí)際需求。

(一) 業(yè)務(wù)場景定位

大屏的應(yīng)用場景多樣,如控制中心、會議室展示、銷售業(yè)績分析等。明確應(yīng)用場景,有助于確定信息的優(yōu)先級展示、布局風(fēng)格及交互邏輯,使界面更加貼合業(yè)務(wù)場景,提升信息傳達(dá)效率。

二、數(shù)據(jù)可視化策略:直觀與深度并重

(一) 選擇合適的圖表類型

根據(jù)數(shù)據(jù)類型及展示目的,合理選擇圖表類型(如柱狀圖、折線圖、餅圖、熱力圖等)。優(yōu)秀的圖表設(shè)計應(yīng)能在第一眼吸引注意力,同時準(zhǔn)確傳達(dá)數(shù)據(jù)背后的故事。

(二)數(shù)據(jù)層次清晰展現(xiàn)

利用顏色、大小、位置等視覺元素區(qū)分?jǐn)?shù)據(jù)的重要性,構(gòu)建清晰的信息層次。重要數(shù)據(jù)應(yīng)突出顯示,輔助信息則以更柔和的方式呈現(xiàn),避免信息過載。

(三)動態(tài)交互增強(qiáng)體驗(yàn)

加入動態(tài)效果(如數(shù)據(jù)滾動、實(shí)時更新、交互篩選等),使大屏界面更加生動,增強(qiáng)用戶體驗(yàn)。同時,確保交互設(shè)計直觀易懂,降低學(xué)習(xí)成本。

三、美學(xué)與實(shí)用性并重:打造視覺盛宴

(一) 色彩與布局的藝術(shù)

色彩搭配需考慮品牌調(diào)性、情感表達(dá)及視覺舒適度。布局上,遵循“F型”或“Z型”閱讀模式,引導(dǎo)用戶視線流動,確保重要信息一目了然。

(二)字體與圖標(biāo)的選用

選用清晰易讀的字體,大小適中,確保在各種觀看距離下都能輕松閱讀。圖標(biāo)應(yīng)簡潔明了,符合國際通用標(biāo)準(zhǔn),輔助信息傳遞。

(三)響應(yīng)式設(shè)計

考慮到不同屏幕尺寸和分辨率的適配性,采用響應(yīng)式設(shè)計原則,確保大屏內(nèi)容在各種展示環(huán)境下都能保持最佳視覺效果。

四、持續(xù)優(yōu)化與迭代

(一) 數(shù)據(jù)反饋機(jī)制

建立數(shù)據(jù)反饋機(jī)制,收集用戶對界面布局、信息準(zhǔn)確性及交互體驗(yàn)等方面的反饋,作為后續(xù)優(yōu)化的依據(jù)。

(二)技術(shù)與內(nèi)容的同步更新

隨著業(yè)務(wù)發(fā)展和技術(shù)進(jìn)步,定期評估并更新大屏界面,引入新技術(shù)(如AR/VR、AI分析)和數(shù)據(jù)可視化工具,保持界面的先進(jìn)性和實(shí)用性。

58.png

B端用戶中心設(shè)計剖析:構(gòu)建高效、定制化的企業(yè)服務(wù)平臺

藍(lán)藍(lán)設(shè)計的小編

一、引言 在數(shù)字化轉(zhuǎn)型的大潮中,B端(Business-to-Business)服務(wù)市場日益繁榮,企業(yè)對高效、智能化、定制化的業(yè)務(wù)管理系統(tǒng)需求迫切。B端用戶中心作為連接企業(yè)與服務(wù)商的關(guān)鍵橋梁,其設(shè)計不僅關(guān)乎用戶體驗(yàn),更直接影響到企業(yè)的運(yùn)營效率與市場競爭力。本文將從設(shè)計原則、功能模塊、用戶體驗(yàn)及數(shù)據(jù)安全四個維度,深入剖析B端用戶中心的設(shè)計要點(diǎn)。 二、設(shè)計原則 ...

UI 設(shè)計公司蘭亭妙微分享:人工智能大模型管理平臺UI設(shè)計

藍(lán)藍(lán)設(shè)計的小編

一、項(xiàng)目背景

(一)在當(dāng)下數(shù)字化浪潮中,各類大模型如語言、圖像生成模型不斷涌現(xiàn),企業(yè)與機(jī)構(gòu)對其應(yīng)用需求激增。然而,模型開發(fā)流程繁瑣、部署成本高昂,不同模型間數(shù)據(jù)交互與共享困難重重。同時,模型性能優(yōu)化、安全管理等問題亟待解決。在此背景下,大模型管理平臺應(yīng)運(yùn)而生,它旨在整合資源,簡化模型開發(fā)與部署流程,提升模型性能與安全性,為各行業(yè)高效利用大模型提供有力支持,助力人工智能技術(shù)深度融入業(yè)務(wù)。

(二)該系統(tǒng)的原首頁中信息量比較少,在設(shè)計時除了對頁面美觀的優(yōu)化,從內(nèi)容、布局、用戶使用場景、使用習(xí)慣、交互方式等方 面也進(jìn)行考慮,增加了一些統(tǒng)計的圖表, 「歷史訪問信息」采用卡片式列表,突出模塊和內(nèi)容。同時增加「個人上傳記錄」信息和「歷史訪問信息」可以進(jìn)行 切換查看。

二、項(xiàng)目概述

(一)產(chǎn)品定位

大模型管理平臺定位為人工智能領(lǐng)域的核心樞紐。它是模型全生命周期的智慧管家,從研發(fā)時整合數(shù)據(jù)與算法資源,到部署時適配多元硬件環(huán)境,再到運(yùn)營中實(shí)時監(jiān)測性能,全方位守護(hù)。同時,它也是跨行業(yè)的賦能引擎,為金融、醫(yī)療、制造等行業(yè)提供定制化模型服務(wù),加速業(yè)務(wù)智能化轉(zhuǎn)型。

(二)目標(biāo)用戶

大模型管理平臺的目標(biāo)用戶廣泛且多元。科技企業(yè)研發(fā)團(tuán)隊、金融機(jī)構(gòu)從業(yè)者、醫(yī)療行業(yè)的研究人員和臨床醫(yī)生、教育領(lǐng)域的課程開發(fā)者與教育科技企業(yè)。此外,政府部門進(jìn)行城市規(guī)劃、交通管理等決策時,也能從平臺獲取支持。這些用戶都期望通過大模型管理平臺,挖掘數(shù)據(jù)價值,實(shí)現(xiàn)業(yè)務(wù)的智能化升級 。

(三)設(shè)計風(fēng)格

系統(tǒng)首頁重構(gòu)信息組織架構(gòu),豐富信息 和數(shù)據(jù),同時頁面采用精美的圖標(biāo)和小 插圖提高頁面的精細(xì)美觀度。 設(shè)計風(fēng)格采用簡約的設(shè)計語言,清晰、 簡潔和直觀的表達(dá)方式,模塊化布局, 強(qiáng)調(diào)的是界面強(qiáng)調(diào)可復(fù)用性和通用性, 配色采用經(jīng)典藍(lán)色,藍(lán)色具有很好的兼 容性,可以與多種顏色搭配使用,形成 和諧的視覺效果。

level2_img.jpg.png

三、設(shè)計亮點(diǎn)

(一)流程圖設(shè)計前后對比

「模型仿真評估流程」是首頁的主要功能區(qū),在模塊布局上加中 比例成為頁面的聚焦區(qū)域,每個節(jié)點(diǎn)采用小插圖,插圖方便復(fù)制 及拓展、修改,提升設(shè)計開發(fā)效率,技術(shù)實(shí)現(xiàn)便捷,落地相對成 本低。增加了背景圖案,使該模塊更加有空間感,同時增加了整 個頁面的靈動性。

level3_img1.png

(二)增加統(tǒng)計圖表

圖表能夠直觀地展示關(guān)鍵數(shù)據(jù),使用戶一目了然地了解整體情況, 快速把握數(shù)據(jù)的變化趨勢和規(guī)律。其次,統(tǒng)計圖表有助于提升用 戶對數(shù)據(jù)的理解和分析能力,通過視覺化的方式展現(xiàn)數(shù)據(jù)間的關(guān) 聯(lián)和差異,降低理解難度,提高決策效率。同時,美觀的統(tǒng)計圖 表也能提升系統(tǒng)首頁的整體視覺效果,吸引用戶的注意力,增加 用戶的粘性。該區(qū)域后期也可以根據(jù)實(shí)際需求換成其它內(nèi)容。

level3_img2.png

四、首頁其他方案欣賞

level4_img.jpg.png

蘭亭妙微(bouu.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計桌面端界面設(shè)計APP界面設(shè)計、圖標(biāo)定制、用戶體驗(yàn)設(shè)計交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計,有興趣請加入一起學(xué)習(xí)成長,咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。

平面設(shè)計:創(chuàng)意與視覺的交響

藍(lán)藍(lán)設(shè)計的小編

一、平面設(shè)計的定義與意義 平面設(shè)計,簡而言之,是通過文字、圖形、色彩等視覺元素,在二維空間內(nèi)進(jìn)行創(chuàng)意性的組合與排列,旨在達(dá)到特定的信息傳遞和審美目的。它超越了簡單的排版和美化,是一種藝術(shù)創(chuàng)造,體現(xiàn)了設(shè)計師對世界的獨(dú)特理解和表達(dá)。 二、創(chuàng)意:平面設(shè)計的靈魂 在平面設(shè)計中,創(chuàng)意是不可或缺的靈魂。一個好的設(shè)計作品往往憑借其獨(dú)特的創(chuàng)意,讓人眼前一亮,留下深刻印象。設(shè)...

UI 設(shè)計風(fēng)格與布局:打造卓越用戶體驗(yàn)的基石

藍(lán)藍(lán)設(shè)計的小編

在數(shù)字化時代,UI(用戶界面)設(shè)計的優(yōu)劣直接決定了用戶對產(chǎn)品的第一印象和使用體驗(yàn)。其中,設(shè)計風(fēng)格與布局是兩大核心要素。
UI 設(shè)計風(fēng)格豐富多樣,各有獨(dú)特魅力與適用場景。極簡主義風(fēng)格以簡潔為美,去除一切不必要元素,僅保留核心功能與信息。其界面清爽,能讓用戶快速聚焦關(guān)鍵內(nèi)容,如一些資訊類 APP 便常采用,提升瀏覽效率。擬物風(fēng)格則致力于模擬現(xiàn)實(shí)物體外觀與質(zhì)感,給人熟悉親切之感,早期的手機(jī)圖標(biāo)設(shè)計多運(yùn)用此風(fēng)格,幫助用戶輕松理解功能。還有如今流行的扁平化風(fēng)格,簡潔明了、色彩鮮明,兼具現(xiàn)代感與高效性,在各類移動應(yīng)用中廣泛應(yīng)用。
合理的布局是良好用戶體驗(yàn)的保障。布局需遵循清晰、易用原則。首先要明確信息層級,重要信息置于顯眼位置,如電商 APP 將商品圖片與價格突出展示。常見布局方式有分欄布局,可將不同類型信息有序分隔,適用于內(nèi)容較多的頁面;卡片式布局則將信息以卡片形式呈現(xiàn),便于用戶快速識別與操作,社交媒體 APP 常用此布局展示動態(tài)。此外,響應(yīng)式布局至關(guān)重要,確保界面在不同設(shè)備屏幕上都能完美適配,為用戶提供一致體驗(yàn)。

產(chǎn)品設(shè)計如何利用心理學(xué)

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

產(chǎn)品設(shè)計的成功除了依賴設(shè)計方案和技術(shù)實(shí)現(xiàn),還與用戶的心理密切相關(guān)。用戶心里決定了我們用怎樣的設(shè)計策略解決問題。我們常認(rèn)為人們做決策時是理性的,但其實(shí)用戶行為經(jīng)常是非理性,會受到情緒、習(xí)慣和社交環(huán)境的影響。了解這些心理學(xué)規(guī)律能幫助我們更好地的預(yù)測和引導(dǎo)用戶行為,優(yōu)化產(chǎn)品體驗(yàn),提高用戶的粘性、留存率和轉(zhuǎn)化率,從而產(chǎn)品商業(yè)價值最大化。
產(chǎn)品設(shè)計如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計如何利用心理學(xué)


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

UI設(shè)計的重要性

資深UI設(shè)計者

UI設(shè)計師,在接到低保真原型之后需要做的一些事情。

日歷

鏈接

個人資料

存檔