首頁(yè)

一招教會(huì)你頁(yè)面分割怎么用

前端達(dá)人

作為一名合格的UI設(shè)計(jì)師,用好留白分割、線性分割、卡片分割,你的頁(yè)面即成功了一半!

留白分割≧線性分割≧卡片分割

 

 

 

 

留白分割定義:指的是只通過(guò)增加間距的方式,利用人的視知覺(jué)原理(接近法則:人的大腦會(huì)傾向于把彼此靠近的元素視為一組),自然的將信息分組。(如上圖)

間距留白是區(qū)隔單一信息元素的默認(rèn)選擇。(如下圖)

 

 

 

 

 

 

使用原則:建議在不影響核心數(shù)據(jù)指標(biāo)的前提下,條目之間盡可能采用留白分割,會(huì)讓界面更清爽,瀏覽更沉浸。

 

留白分割的分類及適用場(chǎng)景:當(dāng)條目信息層次較少(≦2)時(shí),留白分割是比較合適的,當(dāng)信息層次較多(≧3)時(shí),留白分割既會(huì)浪費(fèi)空間,也難以達(dá)到一目了然的分割效果。

 

線性分割定義:用線來(lái)分隔不同的信息內(nèi)容。(大部分APP的分割線是1px粗細(xì),黑色,不透明度12%)。

 

使用原則:分割線可以幫助用戶理解頁(yè)面是如何組成的,但過(guò)度使用分割線會(huì)造成視覺(jué)干擾,影響頁(yè)面信息傳達(dá)。

Android系統(tǒng)明確規(guī)定了分割線的使用原則:
1、微妙的:分割線在布局中應(yīng)該很容易被注意到,但又不凸顯。
2、次要的:只有當(dāng)留白不能起到分割作用時(shí),才采用分分割線。
3、少用的:謹(jǐn)慎使用分割線,用它來(lái)創(chuàng)建分組而不是分割條目。(如下圖)

 

 

 


分類及使用場(chǎng)景:
1、通欄分割線:用于分割彼此完全獨(dú)立的內(nèi)容。
2、內(nèi)嵌分割線:用于分割有錨點(diǎn)(頭像或圖標(biāo))的相關(guān)內(nèi)容。
3、中間分割線:用于分割無(wú)錨點(diǎn)(頭像或圖標(biāo))的相關(guān)內(nèi)容。

 

 

 

 

如果為了提高屏效,希望在一屏內(nèi)盡可能多的展示信息,那么同樣的信息布局,分割線帶來(lái)的效果會(huì)更清晰(如下圖)

 

 

 

 

卡片分割定義:卡片是一個(gè)由內(nèi)容和操作組合而成的獨(dú)立主題的面性容器①,它可以包含縮略圖②、標(biāo)題③、副標(biāo)題④、副媒體⑤、文本⑥、問(wèn)文字按鈕⑦和圖標(biāo)按鈕⑧,除了卡片容器本身,其他元素都是可選的,所有元素都以易于掃描和操作的形式放置在卡片上。

 

 

 

使用原則:
1、包含的:卡片是一個(gè)可識(shí)別的,單獨(dú)的、包含內(nèi)容的單元。
2、獨(dú)立的:一張卡片可以獨(dú)立存在,而不依賴于上下文環(huán)境。
3、不可分割的:一張卡片不能與另一張合并,也不能拆分成多張卡片。
分類及適用場(chǎng)景:
卡片根據(jù)左右是否有邊距,可簡(jiǎn)單分為通欄卡片和非通欄卡片(如下圖)。

 

 

 

從視覺(jué)效果上來(lái)看,由于圓角的聚焦效應(yīng),非通欄卡片對(duì)于凸顯單個(gè)卡片的獨(dú)立性和內(nèi)容的效果都更好,畫(huà)面的分割感會(huì)更強(qiáng)。
1、當(dāng)這個(gè)主題內(nèi)部的內(nèi)容已經(jīng)有分割線時(shí),建議采用卡片分割,讓主題信息層次更加清晰。
2、當(dāng)單個(gè)主題內(nèi)部的內(nèi)容類型較多,上下所占空間較大,建議采用卡片分割,以更好的圈定該主題的內(nèi)容范圍,給用戶明確的內(nèi)容邊界感。
3、當(dāng)需要擴(kuò)展頁(yè)面的橫向空間時(shí),暗示頁(yè)面可以橫向滑動(dòng)時(shí),需要采用非通欄卡片,利用橫向內(nèi)容連續(xù)性原則,幫助用戶建立可以橫向滑動(dòng)的意識(shí)。

 

 

 

 

小結(jié):

 

 

 

 

  • 當(dāng)信息條目復(fù)雜度較低時(shí),優(yōu)先采用留白分割,視覺(jué)清爽無(wú)干擾。
  • 當(dāng)信息條目復(fù)雜度增加,只利用留白分割效果不明顯時(shí),建議引入線性分割,讓信息層次更清晰且屏效高。
  • 當(dāng)信息條目復(fù)雜度進(jìn)一步提升,(比如已經(jīng)有了線性分割,或者有更多操作),需要進(jìn)一步強(qiáng)化信息條目本身的邊界感,建議引入卡片,以強(qiáng)化條目信息的視覺(jué)層次和可操作性。

信息分割本身不是目的,分割方式的選擇是為了讓版面產(chǎn)生清晰的條理性,用悅目的信息秩序來(lái)更好的突出內(nèi)容,達(dá)成最佳的信息傳達(dá)效果,所以決策時(shí),除了上述細(xì)節(jié)考慮因素,還要考慮整體版面效果和信息傳達(dá)效率。

藍(lán)藍(lán)設(shè)計(jì)(yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。

關(guān)鍵詞:UI咨詢UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司

銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開(kāi)發(fā)、軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā)



作者:是一顆李子
鏈接:https://www.zcool.com.cn/article/ZMTYwMzU0NA==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

淺談實(shí)際應(yīng)用中圖表的選擇與思考

博博

圖表的作用

痛點(diǎn):數(shù)據(jù)無(wú)處不在,數(shù)據(jù)的存在與展示往往是巨量的、凌亂的,同時(shí)出現(xiàn)往往會(huì)使用戶分辨不清產(chǎn)生混亂。

解決辦法:為了使這些凌亂的數(shù)據(jù)更易懂,將其可視化是首要選擇。對(duì)數(shù)據(jù)分析結(jié)果的可視化呈現(xiàn)不僅可以幫助我們更好地理解數(shù)據(jù)內(nèi)容也可以幫助我們挖掘數(shù)據(jù)所傳達(dá)的價(jià)值。

數(shù)據(jù)可視化的本質(zhì)是視覺(jué)方向,將分析所得數(shù)據(jù)與圖形相結(jié)合,將冰冷的字符轉(zhuǎn)化為帶有趣味性的圖形,為數(shù)據(jù)提供了靈活性,從而更高效地傳達(dá)數(shù)據(jù)所附帶的價(jià)值信息。

設(shè)計(jì)工作中,對(duì)于圖表的設(shè)計(jì)并不能將所有精力都投入如何做出“精美、好看”的圖表,更要考慮的使用什么類型的圖表,圖表的什么樣的展示形式更有效的,更高效的傳達(dá)數(shù)據(jù)給用戶。

一般在圖表設(shè)計(jì)前,設(shè)計(jì)師應(yīng)優(yōu)先了解該條數(shù)據(jù)用途和目的,分析用戶需要什么樣的使用體驗(yàn),分析用戶的特征、使用場(chǎng)景、以及用戶使用這組數(shù)據(jù)的目的,制定出初步方案,避免因設(shè)計(jì)選擇圖表類型而增加數(shù)據(jù)傳達(dá)的復(fù)雜程度。

圖表的類型(僅展示幾種常用圖表)

1、適用于比較類的圖表,此類圖表用于顯示數(shù)據(jù)的差異與相似之處,對(duì)比數(shù)據(jù)變化,如:條形圖、柱狀圖、堆積柱狀圖、堆積條形圖、折線圖。

類型舉例:

條形圖/柱狀圖

條形圖是用于比較分析的主力圖表,此類圖表能夠通過(guò)將數(shù)據(jù)圖形化,快速傳達(dá)給人類相應(yīng)比較信息,通過(guò)人在視覺(jué)上快速辨別高度或者長(zhǎng)度的差異,從而達(dá)到傳達(dá)信息的目的,所以多用于呈現(xiàn)簡(jiǎn)單有序的數(shù)據(jù)。

堆積條形圖/堆積柱狀圖

堆積條形圖適合對(duì)比更復(fù)雜的類別和各類別之間的關(guān)系和差異,或者是用于同一組數(shù)據(jù)不同屬性數(shù)據(jù)各自占比。一般同組數(shù)據(jù)較多時(shí)適合使用堆積條形圖,同組數(shù)據(jù)較少時(shí)適合使用堆積柱狀圖。

折線圖

折線圖多用于連續(xù)的數(shù)據(jù)或者有序數(shù)據(jù)的變化趨勢(shì)的展示,適合用于數(shù)據(jù)在不同時(shí)間的變化,更有效直觀的展示數(shù)據(jù)的走向和趨勢(shì)。折線向下X軸投影面積也可以更直觀的展示數(shù)據(jù)信息。

2、適用于展示數(shù)據(jù)的分布情況,此類圖表用于傳達(dá)數(shù)據(jù)的關(guān)聯(lián)性,如:雷達(dá)圖,散點(diǎn)圖,氣泡圖。

類型舉例:

雷達(dá)圖

雷達(dá)圖是以從同一點(diǎn)開(kāi)始的軸上表示的三個(gè)或更多個(gè)定量變量的二維圖表的形式顯示多變量數(shù)據(jù)的圖形方法。

 

 

散點(diǎn)圖/氣泡圖

散點(diǎn)圖通常用于顯示和比較數(shù)據(jù),例如科學(xué)數(shù)據(jù)、統(tǒng)計(jì)數(shù)據(jù)和工程數(shù)據(jù)。當(dāng)要在不考慮時(shí)間的情況下比較大量數(shù)據(jù)點(diǎn)時(shí),使用散點(diǎn)圖。散點(diǎn)圖中包含的數(shù)據(jù)越多,比較的效果就越好。

氣泡圖與散點(diǎn)圖相似,不同之處在于,氣泡圖允許在圖表中額外加入一個(gè)表示大小的變量。

3、用于展示一組數(shù)據(jù)中各個(gè)分類數(shù)據(jù)比例關(guān)系,如:餅圖、環(huán)形圖、樹(shù)狀圖。

類型舉例:

餅圖/環(huán)形圖

當(dāng)只需要繪制一組數(shù)據(jù)并展示該組數(shù)據(jù)中不同分類的數(shù)據(jù)占比時(shí),餅圖或者環(huán)形圖是一個(gè)不錯(cuò)的選擇,餅圖有效直觀的展示該組數(shù)據(jù)這個(gè)特性,環(huán)形圖則在餅圖的基礎(chǔ)上可以添加傳達(dá)該組數(shù)據(jù)信息。

樹(shù)狀圖

樹(shù)狀圖,又稱樹(shù)枝圖。通過(guò)嵌套矩形的方式來(lái)展示數(shù)據(jù)的類別,通過(guò)面積大小來(lái)展示該組數(shù)據(jù)中不同分類數(shù)據(jù)的占比情況。

4、適用于各數(shù)據(jù)存在相互流轉(zhuǎn)關(guān)系,能有清晰有效的反映數(shù)據(jù)信息的同時(shí)還可以展示數(shù)據(jù)流轉(zhuǎn)的過(guò)程,如:桑基圖、漏斗圖、瀑布圖。

類型舉例:

?;鶊D

桑基圖可以有效顯示數(shù)據(jù)如何在兩個(gè)組之間流動(dòng),可清晰的展示一組數(shù)據(jù)中流轉(zhuǎn)到下一級(jí)時(shí),數(shù)據(jù)是如何分布的。同時(shí)也可以顯示負(fù)數(shù),并計(jì)算對(duì)總數(shù)據(jù)的影響。

漏斗圖

漏斗圖十分適用于表示數(shù)據(jù)在某種條件的過(guò)程中的各個(gè)階段,如市場(chǎng)營(yíng)銷或銷售過(guò)程這種每個(gè)階段都有一個(gè)值的數(shù)據(jù)。

瀑布圖

瀑布圖適用于流程各個(gè)狀態(tài)的起始值、中間值和最終值。適合用作反映數(shù)值的增減,比如市場(chǎng)銷售額一年中各月?tīng)I(yíng)收、客流量等指標(biāo)的變化。

案例分析:XX小學(xué)數(shù)學(xué)模擬考試成績(jī)下發(fā),數(shù)學(xué)老師想要知道每一個(gè)同學(xué)的成績(jī)變化以及浮動(dòng),針對(duì)性對(duì)不同學(xué)生進(jìn)行教學(xué),應(yīng)選擇什么樣的圖表更方便的數(shù)學(xué)老師查看信息呢?

案例如以下數(shù)據(jù):

首先分析數(shù)據(jù)信息,可見(jiàn)3月、6月、9月和12月的成績(jī)和排名都是不同的,根據(jù)用戶需求分析數(shù)據(jù),優(yōu)化數(shù)據(jù)排列方式,輸出新的數(shù)據(jù)表單:

如想要得到每個(gè)同學(xué)的成績(jī)變化與浮動(dòng),選用柱狀圖和折線圖較為適合,又考慮學(xué)生量較大(變量),在此可選擇折線圖用于數(shù)據(jù)分析。

輸出新的數(shù)據(jù)圖表:

具體操作演示:



作者:Hapic21
來(lái)源:站酷

藍(lán)藍(lán)設(shè)計(jì)(yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)桌面端界面設(shè)計(jì)APP界面設(shè)計(jì)、圖標(biāo)定制用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。

關(guān)鍵詞:UI咨詢UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司

銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開(kāi)發(fā)、軟件wpf開(kāi)發(fā)軟件vue開(kāi)發(fā)

B端設(shè)計(jì):提示圖標(biāo)中蘊(yùn)藏的奧義

博博

你是否和我一樣,曾經(jīng)有兩個(gè)圖標(biāo)擺在我面前,我卻傻傻分不清楚,隨便亂用,他們就是?和 i兩個(gè)小家伙。

 

 

含義:

在系統(tǒng)頁(yè)面當(dāng)中,i 圖標(biāo)通常代表信息(information),而 ? 圖標(biāo)代表幫助(help)。

運(yùn)用場(chǎng)景:

i 圖標(biāo)(信息):通常用于提示用戶可以獲取額外信息或詳細(xì)說(shuō)明的地方。例如,在表單輸入框旁邊的i圖標(biāo)可以提示用戶懸停或點(diǎn)擊以獲取有關(guān)該字段的更多信息。

?圖標(biāo)(幫助):通常用于提供用戶幫助和解答疑問(wèn)。例如,在應(yīng)用程序的菜單中,可以使用?圖標(biāo)來(lái)提供關(guān)于如何使用該功能或應(yīng)用程序的幫助文檔鏈接。

這些圖標(biāo)的使用可以幫助用戶更好地理解和使用應(yīng)用程序,提供額外的信息和幫助,從而提升用戶體驗(yàn)。

 

i 圖標(biāo)和 ?圖標(biāo)的意思確實(shí)很相近,但它們?cè)赨I設(shè)計(jì)中有著微妙的區(qū)別。下面是它們的區(qū)別和如何判斷該用哪個(gè)的方法:

1. 區(qū)別:

- i 圖標(biāo)(信息)通常用于提供有關(guān)特定項(xiàng)目或字段的額外信息、解釋或提示。它強(qiáng)調(diào)的是提供信息。

- ?圖標(biāo)(幫助)則更傾向于提供整體上的幫助和支持,通常用于指示用戶可以獲取額外的幫助文檔、FAQ(常見(jiàn)問(wèn)題解答)或聯(lián)系支持團(tuán)
隊(duì)。它強(qiáng)調(diào)的是提供幫助和解答疑問(wèn)。

2. 如何判斷該用哪個(gè):

- 如果需要提供特定項(xiàng)目或字段的額外信息或解釋,可以使用i圖標(biāo)。

- 如果需要提供整體上的幫助和支持,可以使用?圖標(biāo)。

 

 

簡(jiǎn)單總結(jié)一下

i 側(cè)重點(diǎn)是提供信息,詳細(xì)的說(shuō)明,重點(diǎn)提示。

? 側(cè)重點(diǎn)是幫助提示,對(duì)疑問(wèn)的解釋,如何使用該功能。

以上列舉出來(lái)的實(shí)例在提示圖標(biāo)的應(yīng)用上不會(huì)有太大的分歧,其場(chǎng)景都很明確也容易區(qū)分。

但是有一類場(chǎng)景會(huì)讓人有些摸不著頭腦,爭(zhēng)議點(diǎn)比較大(如下圖)

上圖所展示的,對(duì)于系統(tǒng)內(nèi)一些專業(yè)名詞的解釋,該使用哪種符號(hào)每個(gè)設(shè)計(jì)師和產(chǎn)品經(jīng)理處理的方式不一樣,甚至?xí)l(fā)現(xiàn)同一個(gè)系統(tǒng)下出現(xiàn)兩種符號(hào)同時(shí)使用的情況的場(chǎng)景(如:釘釘后臺(tái)管理頁(yè)面)

在這些特定的詞匯旁邊的提示圖標(biāo),所表達(dá)的潛在含義是:這是么?以及對(duì)這些字段的拓展解釋。

同時(shí)我也問(wèn)了一些大廠的朋友,這種地方是個(gè)仁者見(jiàn)仁智者見(jiàn)智的場(chǎng)景,所以此處可以對(duì)于圖標(biāo)的運(yùn)用可以靈活一些。

在實(shí)際應(yīng)用中,可以根據(jù)具體情況來(lái)判斷使用哪個(gè)符號(hào)。但最重要的是保持一致性和符合用戶習(xí)慣,確保用戶能夠直觀地理解并使用這些符號(hào)。


作者:齊天大碩
來(lái)源:站酷

藍(lán)藍(lán)設(shè)計(jì)(yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)UI咨詢、高端網(wǎng)站設(shè)計(jì)平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。

關(guān)鍵詞:UI咨詢UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司

銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開(kāi)發(fā)、軟件wpf開(kāi)發(fā)軟件vue開(kāi)發(fā)

交互設(shè)計(jì)基礎(chǔ)定律-泰斯勒定律

博博

“每一個(gè)產(chǎn)品有著不可降低的復(fù)雜性,這個(gè)復(fù)雜性有一個(gè)臨界點(diǎn),臨界點(diǎn)的位置決定了誰(shuí)將處理它。”

一、什么是泰斯勒定律 ?

泰斯勒定律又被稱作「復(fù)雜度守恒定律」,由拉里·泰斯勒于1984年提出。定律認(rèn)為:一個(gè)系統(tǒng)中有一定程度的復(fù)雜性是無(wú)法被降低的,內(nèi)在的復(fù)雜度只能通過(guò)產(chǎn)品設(shè)計(jì)去設(shè)法平衡和轉(zhuǎn)移。

二、泰斯勒定律在設(shè)計(jì)中的運(yùn)用

每一個(gè)產(chǎn)品都必然會(huì)有其系統(tǒng)和用戶兩端無(wú)法簡(jiǎn)化的復(fù)雜度,不論是在產(chǎn)品開(kāi)發(fā)環(huán)節(jié)還是產(chǎn)品交互環(huán)節(jié)都無(wú)法按照人們的意愿做刪除,只能設(shè)法去調(diào)整、平衡。通過(guò)轉(zhuǎn)移兩者直接的臨界點(diǎn),來(lái)提高產(chǎn)品的體驗(yàn)度。

1、讓用戶識(shí)別而不是記憶

在操作中最大限度的減少用戶的記憶負(fù)荷,通過(guò)減少獲取信息的復(fù)雜性,讓用戶在操作中去識(shí)別信息而不是去記憶,界面的交互動(dòng)作和選項(xiàng)都應(yīng)該是可見(jiàn)的。

2、算法程序、推薦正確內(nèi)容

用戶在使用產(chǎn)品的過(guò)程中是一個(gè)逐漸適應(yīng)成長(zhǎng)的過(guò)程,他們會(huì)從無(wú)經(jīng)驗(yàn)變得有經(jīng)驗(yàn),因此設(shè)計(jì)系統(tǒng)需要針對(duì)不同的人群提供差異化的操作,讓系統(tǒng)操作難度與用戶實(shí)際的經(jīng)驗(yàn)水平相匹配,滿足他們對(duì)產(chǎn)品靈活易用的控制欲,實(shí)現(xiàn)其目標(biāo)感以及成就感。

3、整合功能、簡(jiǎn)化用戶界面

隨著用戶需求的不斷增加,產(chǎn)品也將會(huì)不斷迭代,越到后面功能也可能會(huì)越來(lái)也多而且復(fù)雜。在不影響用戶需求和體驗(yàn)的前提下,盡可能的整合同類的功能,簡(jiǎn)化用戶界面的復(fù)雜度。

三、總結(jié)

在產(chǎn)品設(shè)計(jì)中,泰斯勒定律主要是為了權(quán)衡用戶復(fù)雜度和系統(tǒng)復(fù)雜度之間的一個(gè)平衡。在應(yīng)用「泰斯勒定律」平衡交互設(shè)計(jì)中的復(fù)雜度這時(shí)需要注意以下幾個(gè)要點(diǎn):

1、系統(tǒng)的總復(fù)雜度是一個(gè)常數(shù),為用戶提供更簡(jiǎn)單的功能會(huì)增加其他方面的復(fù)雜性;

2、找到復(fù)雜度轉(zhuǎn)移的「最低成本的方式」;

3、界面不能太過(guò)簡(jiǎn)單,適當(dāng)?shù)膹?fù)雜度也會(huì)吸引用戶;

而設(shè)計(jì)本身其實(shí)是一個(gè)平衡過(guò)程,需要我們與業(yè)務(wù)方反復(fù)的溝通,考慮綜合成本,確保以項(xiàng)目最低成本方式實(shí)現(xiàn)業(yè)務(wù)目標(biāo)與體驗(yàn)?zāi)繕?biāo)之間的平衡。

 

作者:哆啦的設(shè)計(jì)筆記
來(lái)源:站酷

藍(lán)藍(lán)設(shè)計(jì)(yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。

關(guān)鍵詞:UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司高端網(wǎng)站設(shè)計(jì)公司

銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開(kāi)發(fā)、軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā)

超長(zhǎng)干貨!UI設(shè)計(jì)師必須要懂的4個(gè)設(shè)計(jì)心理學(xué)

前端達(dá)人

簡(jiǎn)介
設(shè)計(jì)方法論在UI設(shè)計(jì)中的應(yīng)用帶來(lái)了顯著好處,通過(guò)系統(tǒng)性的設(shè)計(jì)流程和框架,團(tuán)隊(duì)能夠更有效地處理挑戰(zhàn)、創(chuàng)造出用戶關(guān)注的界面。它促進(jìn)了團(tuán)隊(duì)協(xié)作與溝通,強(qiáng)調(diào)問(wèn)題解決與創(chuàng)新,同時(shí)重視持續(xù)的用戶測(cè)試與反饋循環(huán),有助于提高設(shè)計(jì)質(zhì)量和用戶滿意度,使得設(shè)計(jì)過(guò)程更為高效、有條理并具備創(chuàng)造性。
超長(zhǎng)干貨!UI設(shè)計(jì)師必須要懂的4個(gè)設(shè)計(jì)心理學(xué)
 
 
設(shè)計(jì)原則目錄
??硕?/div>
??硕擅枋隽诉x擇時(shí)間與選擇項(xiàng)數(shù)量之間的關(guān)系,即選擇的時(shí)間會(huì)隨著可選項(xiàng)的增加而增加。在設(shè)計(jì)中,這個(gè)定律提醒我們?cè)诮缑嬖O(shè)計(jì)時(shí)要簡(jiǎn)化選擇過(guò)程,減少選項(xiàng)數(shù)量,使用戶更輕松、更快速地做出選擇。
確認(rèn)偏差
確認(rèn)偏差指出人們更傾向于接受與自己原有信念或期望相符的信息。在設(shè)計(jì)中,了解確認(rèn)偏差有助于設(shè)計(jì)師合理呈現(xiàn)信息,將重要內(nèi)容放置在用戶預(yù)期區(qū)域,增強(qiáng)用戶對(duì)界面的認(rèn)可感。
鄰近法則
鄰近法則是指將視覺(jué)上相關(guān)的元素放置在彼此附近,使用戶更容易將它們視作相關(guān)的一部分。在設(shè)計(jì)中,合理利用鄰近法則能夠組織信息、創(chuàng)造更清晰易懂的界面布局,提高用戶對(duì)界面內(nèi)容的理解和識(shí)別。
菲茨定律
菲茨定律描述了目標(biāo)大小和距離對(duì)用戶操作效率的影響。設(shè)計(jì)師可以利用這個(gè)原則優(yōu)化界面元素的大小與間距,使用戶更快速、更準(zhǔn)確地完成操作,提升用戶體驗(yàn)和界面的易用性。
 
超長(zhǎng)干貨!UI設(shè)計(jì)師必須要懂的4個(gè)設(shè)計(jì)心理學(xué)
 
 
什么是??硕桑?/div>
??硕墒且粋€(gè)與人類反應(yīng)時(shí)間和選擇數(shù)量之間關(guān)系的心理學(xué)原理,特別適用于界面設(shè)計(jì)和用戶體驗(yàn)。這個(gè)定律是由英國(guó)心理學(xué)家威廉·希克(William Edmund Hick)在20世紀(jì)初提出的。
簡(jiǎn)而言之,??硕杀砻魅藗冏龀鲞x擇所需的時(shí)間與可供選擇的數(shù)量成正比。這意味著當(dāng)選項(xiàng)的數(shù)量增加時(shí),決策所需的時(shí)間也會(huì)相應(yīng)增加。在UI設(shè)計(jì)中,這個(gè)定律強(qiáng)調(diào)了簡(jiǎn)化選擇以提高用戶體驗(yàn)的重要性。
通過(guò)減少選擇數(shù)量,設(shè)計(jì)師可以幫助用戶更快速、更輕松地做出決策。這可以通過(guò)多種方式實(shí)現(xiàn),例如使用更簡(jiǎn)潔的菜單結(jié)構(gòu)、合并功能或選項(xiàng)、使用默認(rèn)設(shè)置以減少用戶需要作出的選擇等。
了解??硕蓪?duì)于設(shè)計(jì)者來(lái)說(shuō)是極為重要的,因?yàn)樗嵝盐覀儯涸谠O(shè)計(jì)界面時(shí),簡(jiǎn)化和優(yōu)化選擇可能會(huì)帶來(lái)更流暢、更高效的用戶體驗(yàn)。
超長(zhǎng)干貨!UI設(shè)計(jì)師必須要懂的4個(gè)設(shè)計(jì)心理學(xué)
 
 
它是怎么產(chǎn)生的?
??硕墒腔谛睦韺W(xué)和人類認(rèn)知過(guò)程的研究而產(chǎn)生的。威廉·??撕退耐略?930年代進(jìn)行了一系列的實(shí)驗(yàn),旨在了解人們?cè)诓煌x擇數(shù)量下做出決策的反應(yīng)時(shí)間。
實(shí)驗(yàn)中,被試者面對(duì)不同數(shù)量的選擇,例如按鈕或選項(xiàng),然后被要求盡快做出選擇。實(shí)驗(yàn)結(jié)果顯示,隨著選項(xiàng)數(shù)量的增加,被試者做出選擇所需的時(shí)間也相應(yīng)增加。這一觀察成為??硕傻幕A(chǔ)。
??硕傻谋举|(zhì)是認(rèn)知心理學(xué)的一部分,它涉及到人類對(duì)信息的處理方式。當(dāng)人們面對(duì)多個(gè)選項(xiàng)時(shí),他們需要對(duì)每個(gè)選項(xiàng)進(jìn)行評(píng)估和決策,這會(huì)增加認(rèn)知負(fù)荷。結(jié)果是,隨著選項(xiàng)數(shù)量的增加,處理和選擇所需的時(shí)間也相應(yīng)增加。
這個(gè)定律提出了一種對(duì)設(shè)計(jì)界面和交互方式有深遠(yuǎn)影響的見(jiàn)解:簡(jiǎn)化界面,減少選擇數(shù)量,可以幫助用戶更快速、更輕松地做出決策。這種認(rèn)知負(fù)荷的理論成果對(duì)于優(yōu)化用戶體驗(yàn)和提高界面效率有著重要的指導(dǎo)作用。
超長(zhǎng)干貨!UI設(shè)計(jì)師必須要懂的4個(gè)設(shè)計(jì)心理學(xué)
 
 
思考下希克定律UI作用?
??硕稍赨I設(shè)計(jì)中具有重要作用,它強(qiáng)調(diào)了簡(jiǎn)化選擇以提高用戶體驗(yàn)的重要性。以下是??硕稍赨I設(shè)計(jì)中的一些具體作用和應(yīng)用:
簡(jiǎn)化菜單和導(dǎo)航
: 減少導(dǎo)航菜單中的選項(xiàng)數(shù)量,將類似功能的項(xiàng)目歸類或合并,可以減輕用戶的選擇負(fù)擔(dān),幫助他們更快速地找到所需信息。
優(yōu)化工作流程
: 在應(yīng)用程序或網(wǎng)站設(shè)計(jì)中,簡(jiǎn)化工作流程和操作步驟可以減少用戶需要做出的決策,提高用戶完成任務(wù)的效率。
默認(rèn)設(shè)置和建議
: 使用默認(rèn)設(shè)置或提供建議可以減少用戶必須做出的選擇。通過(guò)合理設(shè)置默認(rèn)選項(xiàng),可以簡(jiǎn)化用戶體驗(yàn),讓用戶更快地進(jìn)入應(yīng)用或網(wǎng)站并開(kāi)始使用。
信息層級(jí)結(jié)構(gòu)
: 設(shè)計(jì)清晰的信息架構(gòu)和層級(jí)結(jié)構(gòu)有助于將內(nèi)容組織得更有條理,使用戶能夠更容易地定位所需信息,避免過(guò)多的選擇。
上下文反饋和指導(dǎo)
: 提供清晰的上下文反饋和指導(dǎo),幫助用戶更快速地了解當(dāng)前操作的影響,減少不必要的猶豫和選擇焦慮。
用戶個(gè)性化和智能推薦
: 利用個(gè)性化推薦或智能算法,根據(jù)用戶的歷史偏好為其提供定制化的選擇,減少不必要的選擇。
在UI設(shè)計(jì)中,理解??硕煽梢砸龑?dǎo)設(shè)計(jì)師創(chuàng)造出更簡(jiǎn)潔、更直觀、更易用的界面,從而提高用戶滿意度和效率。通過(guò)減少選擇數(shù)量和簡(jiǎn)化操作,設(shè)計(jì)可以更好地配合人類認(rèn)知特性,使用戶在界面上的交互變得更加流暢和自然。
超長(zhǎng)干貨!UI設(shè)計(jì)師必須要懂的4個(gè)設(shè)計(jì)心理學(xué)
 
 
需要我們記住什么?
在UI設(shè)計(jì)中,了解和應(yīng)用??硕捎兄趧?chuàng)造更優(yōu)秀的用戶體驗(yàn)。以下是需要記住的一些關(guān)鍵點(diǎn):
選擇數(shù)量與決策時(shí)間成正比
: 用戶需要花費(fèi)更多時(shí)間來(lái)做出決策,當(dāng)他們面對(duì)更多選擇時(shí)。減少選擇數(shù)量可以提高用戶的決策效率。
簡(jiǎn)化界面以降低認(rèn)知負(fù)荷
: 設(shè)計(jì)簡(jiǎn)潔、清晰的界面可以減少用戶的認(rèn)知負(fù)荷,幫助他們更輕松地使用應(yīng)用或網(wǎng)站。
層級(jí)結(jié)構(gòu)和組織
: 通過(guò)良好的信息層級(jí)結(jié)構(gòu)和內(nèi)容組織,可以使用戶更快速地找到所需信息,減少選擇過(guò)程。
默認(rèn)設(shè)置的重要性
: 合理設(shè)置默認(rèn)選項(xiàng)可以簡(jiǎn)化用戶體驗(yàn),降低他們需要做出的選擇,從而更快地開(kāi)始使用應(yīng)用或網(wǎng)站。
上下文反饋和引導(dǎo)
: 提供清晰的上下文反饋和指導(dǎo),幫助用戶更快速地了解其操作的影響,減少選擇焦慮。
用戶個(gè)性化和智能推薦
: 利用用戶個(gè)性化數(shù)據(jù)和智能算法,為用戶提供定制化的選擇,降低不必要的選擇過(guò)程。
記住這些關(guān)鍵點(diǎn)能夠幫助設(shè)計(jì)師更好地優(yōu)化界面,提供更出色的用戶體驗(yàn),減少用戶做出選擇所需的時(shí)間,從而增強(qiáng)產(chǎn)品或應(yīng)用的吸引力和實(shí)用性。
 
在app產(chǎn)品中,我們應(yīng)該怎么應(yīng)用??硕?/div>
在移動(dòng)應(yīng)用程序(App)設(shè)計(jì)中,應(yīng)用??硕煽梢酝ㄟ^(guò)以下方式提高用戶體驗(yàn):
簡(jiǎn)化導(dǎo)航和菜單
: 減少主導(dǎo)航菜單中的選項(xiàng)數(shù)量,將類似的功能合并或分類,以簡(jiǎn)化用戶的選擇過(guò)程。使用清晰的圖標(biāo)和標(biāo)簽幫助用戶更快速地理解選項(xiàng)。
優(yōu)化注冊(cè)和登錄流程
: 在注冊(cè)和登錄過(guò)程中盡可能減少必填項(xiàng),使用社交媒體登錄或單一注冊(cè)選項(xiàng)簡(jiǎn)化流程,降低用戶的選擇負(fù)擔(dān)。
默認(rèn)設(shè)置和個(gè)性化推薦: 利用用戶的偏好和歷史數(shù)據(jù),為用戶提供個(gè)性化的推薦或默認(rèn)設(shè)置,減少用戶需要做出的選擇,并快速展示最相關(guān)的內(nèi)容或功能。
簡(jiǎn)化表單和輸入
: 最小化表單字段,根據(jù)上下文預(yù)填充表單內(nèi)容或使用智能輸入建議,以降低用戶輸入的認(rèn)知負(fù)擔(dān)。
上下文引導(dǎo)和反饋
: 在用戶進(jìn)行關(guān)鍵操作時(shí)提供清晰的引導(dǎo)和反饋,讓用戶了解他們的操作將會(huì)帶來(lái)的結(jié)果,減少不必要的猶豫和選擇焦慮。
智能搜索和過(guò)濾功能
: 提供強(qiáng)大的搜索和過(guò)濾功能,幫助用戶快速找到所需內(nèi)容,減少在大量選項(xiàng)中的選擇時(shí)間。
簡(jiǎn)化購(gòu)買流程
: 在電商應(yīng)用中,優(yōu)化購(gòu)買流程,減少購(gòu)物車和結(jié)賬過(guò)程中的步驟和選擇,提供清晰的購(gòu)買路徑。
通過(guò)以上方式,設(shè)計(jì)師可以在App中運(yùn)用希克定律,幫助用戶更輕松、更高效地使用應(yīng)用,提高用戶滿意度并增強(qiáng)應(yīng)用的吸引力。這些方法都圍繞著減少選擇數(shù)量、簡(jiǎn)化操作和提供個(gè)性化的體驗(yàn),以減少用戶的認(rèn)知負(fù)荷,提高用戶的決策效率。
 
??硕煽偨Y(jié)
??硕稍谝苿?dòng)應(yīng)用設(shè)計(jì)中的應(yīng)用關(guān)鍵在于簡(jiǎn)化選擇、優(yōu)化流程以提升用戶體驗(yàn)。通過(guò)減少主導(dǎo)航選項(xiàng)、優(yōu)化注冊(cè)與登錄流程、提供個(gè)性化推薦、簡(jiǎn)化表單輸入、提供清晰反饋和引導(dǎo)、強(qiáng)化搜索功能以及簡(jiǎn)化購(gòu)買流程,設(shè)計(jì)師可以降低用戶的選擇焦慮和認(rèn)知負(fù)荷,使用戶更輕松、更高效地使用應(yīng)用,提升用戶滿意度。這些策略圍繞著簡(jiǎn)化操作、減少選項(xiàng)數(shù)量和提供個(gè)性化體驗(yàn),有助于提高用戶的決策效率,增強(qiáng)應(yīng)用的吸引力與可用性。
 
 
超長(zhǎng)干貨!UI設(shè)計(jì)師必須要懂的4個(gè)設(shè)計(jì)心理學(xué)
 
 
什么是確認(rèn)偏差?
確認(rèn)偏差是一種認(rèn)知偏差,指的是人們更傾向于尋找、記住或贊同支持已有信念或假設(shè)的信息,而忽視或排斥與其相矛盾的信息。這種偏差導(dǎo)致人們?cè)趯で笮畔⒑托纬捎^點(diǎn)時(shí)傾向于選擇那些與他們已有信念相一致的信息,而忽視那些與之相悖的信息。
在設(shè)計(jì)和決策過(guò)程中,確認(rèn)偏差可能會(huì)對(duì)判斷和決策產(chǎn)生影響。設(shè)計(jì)師或決策者可能會(huì)傾向于尋找支持他們最初想法或假設(shè)的信息,而忽略潛在的反對(duì)觀點(diǎn)或證據(jù)。這可能導(dǎo)致錯(cuò)誤的假設(shè)、不完整的分析或偏離客觀事實(shí)的判斷。
了解確認(rèn)偏差對(duì)于設(shè)計(jì)師和決策者來(lái)說(shuō)是很重要的,因?yàn)樗梢杂绊懙剿麄儗?duì)問(wèn)題的看法和解決方案的選擇。為了減輕確認(rèn)偏差的影響,重要的做法包括尋求多樣的觀點(diǎn)和信息來(lái)源、鼓勵(lì)團(tuán)隊(duì)開(kāi)放性討論、持續(xù)評(píng)估和反思自己的假設(shè),以及意識(shí)到并主動(dòng)應(yīng)對(duì)這種偏差。
 
超長(zhǎng)干貨!UI設(shè)計(jì)師必須要懂的4個(gè)設(shè)計(jì)心理學(xué)
 
 
它是怎么產(chǎn)生的?
確認(rèn)偏差的產(chǎn)生與人類的認(rèn)知方式和信息處理方式有關(guān)。它可以追溯到我們處理信息的心理機(jī)制,以及對(duì)信息的選擇性接收和處理。
信息過(guò)濾和選擇性接收
: 人類大腦處理的信息量龐大,為了應(yīng)對(duì)這種信息負(fù)荷,我們會(huì)有意無(wú)意地選擇性地接收與已有信念相符的信息,因?yàn)檫@樣更容易被接受和理解。
認(rèn)知一致性和舒適度
: 我們傾向于尋求與我們已有信念一致的信息,因?yàn)檫@會(huì)讓我們感到更加舒適和認(rèn)知上的一致性,而與之相悖的信息則可能引起認(rèn)知不適或挑戰(zhàn)。
記憶偏差
: 我們記憶中更容易保留和回憶起與我們已有信念相符的信息,而忽略或淡化與之不符的信息,導(dǎo)致我們更傾向于記住和重復(fù)暴露于已有信念的信息。
社會(huì)影響和團(tuán)隊(duì)動(dòng)態(tài)
: 在團(tuán)隊(duì)環(huán)境中,人們可能更容易受到同伴或領(lǐng)導(dǎo)觀點(diǎn)的影響,導(dǎo)致更多地尋求與團(tuán)隊(duì)共識(shí)一致的信息。
因此,確認(rèn)偏差源于我們處理信息的方式和尋求認(rèn)知一致性的趨勢(shì),這種傾向性會(huì)影響我們對(duì)信息的選擇、記憶和接受,使得我們更容易偏向于支持已有信念的信息。
 
超長(zhǎng)干貨!UI設(shè)計(jì)師必須要懂的4個(gè)設(shè)計(jì)心理學(xué)
 
 
思考下確認(rèn)偏差在UI作用?
認(rèn)知偏差在UI設(shè)計(jì)中有著深遠(yuǎn)的影響,設(shè)計(jì)師需要了解并考慮這些偏差,以創(chuàng)造更符合用戶認(rèn)知和行為的界面:
信息呈現(xiàn)與確認(rèn)偏差:
UI設(shè)計(jì)中的信息呈現(xiàn)方式能夠影響用戶的感知。確認(rèn)偏差提示我們,設(shè)計(jì)師應(yīng)該精心布局信息,確保用戶首先接觸到的內(nèi)容是符合其期望和信念的。在重要位置展示與用戶預(yù)期一致的信息能夠增強(qiáng)用戶對(duì)界面的認(rèn)可感。
用戶體驗(yàn)與認(rèn)知一致性:
UI設(shè)計(jì)應(yīng)該符合用戶的認(rèn)知模式和習(xí)慣。保持一致的界面元素、布局結(jié)構(gòu)和交互方式有助于降低用戶學(xué)習(xí)成本,提升用戶體驗(yàn),因?yàn)檫@與用戶的認(rèn)知一致性相契合。
選擇性暴露與設(shè)計(jì)引導(dǎo):
設(shè)計(jì)師可以利用確認(rèn)偏差的特性來(lái)引導(dǎo)用戶,將重要信息或功能放置在易于察覺(jué)的位置,引導(dǎo)用戶進(jìn)行特定的操作。然而,需要謹(jǐn)慎處理,以避免對(duì)用戶造成信息過(guò)載。
避免偏見(jiàn)與用戶測(cè)試:
設(shè)計(jì)師應(yīng)該避免自身的認(rèn)知偏差影響設(shè)計(jì),而是更多地關(guān)注用戶的實(shí)際需求和行為。通過(guò)持續(xù)的用戶測(cè)試和反饋,可以驗(yàn)證設(shè)計(jì)的有效性,確保設(shè)計(jì)更加客觀、全面地服務(wù)于用戶。
認(rèn)知偏差不僅能夠幫助設(shè)計(jì)師更好地了解用戶行為和認(rèn)知模式,也提醒設(shè)計(jì)師需要謹(jǐn)慎地處理信息的呈現(xiàn)方式,以創(chuàng)造出更符合用戶認(rèn)知特點(diǎn)和期望的界面。
 
超長(zhǎng)干貨!UI設(shè)計(jì)師必須要懂的4個(gè)設(shè)計(jì)心理學(xué)
 
 
需要我們記住什么?
用戶選擇性感知:
用戶會(huì)傾向于選擇性地接收與其已有信念相符的信息。因此,在設(shè)計(jì)中需要注意如何呈現(xiàn)信息,以便用戶更容易接收并理解與其預(yù)期一致的內(nèi)容。
認(rèn)知一致性與用戶體驗(yàn):
用戶更喜歡一致性的界面設(shè)計(jì)。保持界面元素、布局和交互方式的一致性有助于提高用戶體驗(yàn),減少認(rèn)知負(fù)擔(dān)。
引導(dǎo)與用戶行為:
可以利用認(rèn)知偏差的特性來(lái)引導(dǎo)用戶行為,但需要謹(jǐn)慎,以避免對(duì)用戶造成信息過(guò)載或誤導(dǎo)。
客觀設(shè)計(jì)與用戶測(cè)試:
設(shè)計(jì)師需保持客觀,在設(shè)計(jì)中避免個(gè)人偏見(jiàn)的影響。持續(xù)的用戶測(cè)試和反饋是驗(yàn)證設(shè)計(jì)有效性的關(guān)鍵。
用戶需求至上:
最重要的是設(shè)計(jì)能夠滿足用戶的實(shí)際需求。認(rèn)知偏差提醒我們關(guān)注用戶行為和反饋,確保設(shè)計(jì)更加貼近用戶期望。
記住這些關(guān)鍵點(diǎn)有助于設(shè)計(jì)師更好地應(yīng)用認(rèn)知偏差的理論,創(chuàng)造出更符合用戶認(rèn)知和行為習(xí)慣的界面,提升用戶體驗(yàn)和產(chǎn)品吸引力。
 
在app產(chǎn)品中,我們應(yīng)該怎么應(yīng)用認(rèn)知偏差
在App產(chǎn)品中,了解和應(yīng)用認(rèn)知偏差可以改善用戶體驗(yàn)和促進(jìn)用戶參與。以下是一些應(yīng)用認(rèn)知偏差的方法:
個(gè)性化內(nèi)容推薦
: 利用用戶的歷史數(shù)據(jù)和偏好,提供個(gè)性化的內(nèi)容推薦,引導(dǎo)用戶瀏覽與其興趣相關(guān)的信息,這符合用戶的認(rèn)知偏好。
強(qiáng)調(diào)常用功能
: 將常用功能放置在易于察覺(jué)的位置,這有助于用戶更快速地找到并使用常用功能,符合用戶對(duì)信息的選擇性感知。
引導(dǎo)用戶決策
: 通過(guò)明確的引導(dǎo)和推薦,幫助用戶做出決策。例如,突出顯示推薦選項(xiàng)或使用明確的指導(dǎo)語(yǔ)言,以降低用戶的選擇焦慮。
增加用戶互動(dòng)和獎(jiǎng)勵(lì)機(jī)制: 利用認(rèn)知偏差中的獎(jiǎng)勵(lì)機(jī)制,激勵(lì)用戶參與互動(dòng)。例如,獎(jiǎng)勵(lì)積分、勛章或獎(jiǎng)勵(lì)物品以促進(jìn)用戶的積極參與。
社交證據(jù)和影響力
: 強(qiáng)調(diào)其他用戶的行為和意見(jiàn),例如顯示用戶評(píng)論或社交分享,可以影響新用戶的決策,符合社會(huì)影響的認(rèn)知偏差。
提供個(gè)性化的反饋和建議
: 根據(jù)用戶的行為提供個(gè)性化的反饋和建議,引導(dǎo)用戶完成特定的動(dòng)作或行為,符合用戶的認(rèn)知偏好和選擇性感知。
綜合利用這些策略可以更好地與用戶互動(dòng),促進(jìn)參與度,提高用戶對(duì)產(chǎn)品的滿意度。然而,需要謹(jǐn)慎運(yùn)用,避免過(guò)度使用以至于影響用戶體驗(yàn)或?qū)е滦畔⑦^(guò)載。
 
認(rèn)知偏差總結(jié)
綜合利用認(rèn)知偏差的這些方面,設(shè)計(jì)者可以更加精準(zhǔn)地與用戶互動(dòng),提升用戶體驗(yàn)和參與度。但務(wù)必注意,應(yīng)用認(rèn)知偏差需要在不影響用戶信任和體驗(yàn)的前提下進(jìn)行,避免過(guò)度干預(yù)或引導(dǎo),以免影響用戶的自主性和信任感。
 
 
超長(zhǎng)干貨!UI設(shè)計(jì)師必須要懂的4個(gè)設(shè)計(jì)心理學(xué)
 
 
什么是鄰近法則?
鄰近法則是設(shè)計(jì)中的一項(xiàng)基本原則,描述了物體或元素在空間中距離越近,就越有可能被視為相關(guān)的部分。這個(gè)原則是Gestalt心理學(xué)的一部分,指出物體在空間上的接近會(huì)引起它們被認(rèn)為是相關(guān)的,無(wú)論它們的形狀或特征如何。
在設(shè)計(jì)中,鄰近法則指導(dǎo)著將相關(guān)的元素放置在彼此附近,以便用戶能夠?qū)⑺鼈円暈橐唤M或相關(guān)部分。這個(gè)原則常用于布局設(shè)計(jì),例如將相關(guān)的菜單選項(xiàng)放在一起、相關(guān)的控件放置在同一區(qū)域等。通過(guò)利用元素之間的空間距離,設(shè)計(jì)師可以引導(dǎo)用戶對(duì)信息進(jìn)行邏輯分組,提高用戶對(duì)頁(yè)面內(nèi)容的理解和整體結(jié)構(gòu)的認(rèn)知。
鄰近法則的應(yīng)用有助于創(chuàng)造出更清晰、更易于理解的設(shè)計(jì)布局,讓用戶更輕松地識(shí)別和理解相關(guān)的信息,提升界面的可讀性和可理解性。
 
超長(zhǎng)干貨!UI設(shè)計(jì)師必須要懂的4個(gè)設(shè)計(jì)心理學(xué)
 
 
它是怎么產(chǎn)生的?
鄰近法則源自格式塔心理學(xué),起源于20世紀(jì)初期。格式塔探索者觀察到人類視覺(jué)系統(tǒng)傾向于將靠近的物體視為一組或相關(guān)的部分,而將遠(yuǎn)離的物體視為不相關(guān)的。
本次創(chuàng)作的原則是基于觀察:
人們傾向于將距離較近的元素視為相關(guān)的整體,即使它們的形狀、顏色或其他特征不同。
空間上的接近性會(huì)引導(dǎo)人們將相關(guān)的元素組合在一起,形成邏輯上的群體或集合。
基于這些觀察,計(jì)算者得出結(jié)論:元素之間的接近程度影響了人們?nèi)绾魏徒M織信息。這個(gè)理論評(píng)估理解視覺(jué),成為設(shè)計(jì)中常用的一項(xiàng)原則,幫助設(shè)計(jì)師創(chuàng)建更多條理和易于理解的界面布局和視覺(jué)組織。通過(guò)合理的安排和組織元素之間的距離,設(shè)計(jì)師能夠引導(dǎo)用戶更清晰地理解頁(yè)面的結(jié)構(gòu)和相關(guān)性。
 
超長(zhǎng)干貨!UI設(shè)計(jì)師必須要懂的4個(gè)設(shè)計(jì)心理學(xué)
 
 
思考下鄰近法則UI作用?
鄰近法則在 UI 設(shè)計(jì)中有著重要的應(yīng)用,能夠指導(dǎo)設(shè)計(jì)師創(chuàng)建更直觀、更易理解的界面布局和組織方式。以下是鄰近法則在 UI 設(shè)計(jì)中的應(yīng)用方法:
邏輯分組和視覺(jué)關(guān)聯(lián):
將相關(guān)的元素放置在彼此附近,例如將菜單選項(xiàng)、功能按鈕或相關(guān)信息放在相近的區(qū)域,以形成邏輯上的群組或關(guān)聯(lián),使用戶能夠更快速地理解信息之間的相關(guān)性。
表現(xiàn)信息層級(jí)和結(jié)構(gòu):
通過(guò)合理安排元素之間的間距,設(shè)計(jì)師可以展現(xiàn)信息的結(jié)構(gòu)和層級(jí)。在網(wǎng)頁(yè)或應(yīng)用中,合理的鄰近性有助于傳達(dá)頁(yè)面組織的邏輯和信息的重要性。
避免視覺(jué)混亂和誤導(dǎo):
合理利用鄰近法則可以避免界面的視覺(jué)混亂。將不相關(guān)的元素保持一定的間距,避免過(guò)度擁擠,讓用戶更輕松地理清界面的內(nèi)容和結(jié)構(gòu)。
指引用戶流程和操作:
在設(shè)計(jì)工作流或操作步驟時(shí),將相關(guān)的元素放在一起,以引導(dǎo)用戶流程,提高用戶操作的連貫性和流暢性。
視覺(jué)組織與導(dǎo)航:
在導(dǎo)航設(shè)計(jì)中,將相關(guān)功能或內(nèi)容放置在相鄰位置,例如將相關(guān)菜單項(xiàng)放在同一區(qū)域,以便用戶更快速地找到并使用所需功能。
適當(dāng)運(yùn)用鄰近法則可以改善用戶對(duì)界面的理解和認(rèn)知,提高用戶操作的效率和體驗(yàn)。它有助于營(yíng)造清晰的信息層級(jí)、減少視覺(jué)混亂,并引導(dǎo)用戶更直觀地瀏覽和操作界面。
 
超長(zhǎng)干貨!UI設(shè)計(jì)師必須要懂的4個(gè)設(shè)計(jì)心理學(xué)
 
 
需要我們記住什么?
在設(shè)計(jì)中運(yùn)用鄰近法則時(shí),需要記住以下幾點(diǎn):
相關(guān)性與空間接近性
: 用戶傾向于將距離近的元素視為相關(guān)的整體。因此,在設(shè)計(jì)中將相關(guān)的元素放置在彼此附近,能夠幫助用戶更直觀地理解它們的關(guān)聯(lián)性。
信息組織和層級(jí)結(jié)構(gòu)
: 通過(guò)合理的空間安排,展示信息的邏輯結(jié)構(gòu)和層級(jí)關(guān)系。這有助于用戶更輕松地理清界面內(nèi)容和操作流程。
避免視覺(jué)干擾和混亂
: 控制元素之間的距離,避免過(guò)度擁擠和混亂,以免干擾用戶的視覺(jué)和理解。
引導(dǎo)用戶視線和操作:
合理利用鄰近法則可以引導(dǎo)用戶的視線和操作流程,使其更自然、更順暢地瀏覽和使用界面。
反復(fù)測(cè)試與用戶反饋
: 不斷測(cè)試和收集用戶反饋,以確保所安排的元素之間的關(guān)聯(lián)性和距離對(duì)用戶理解和操作的有效性。
記住這些關(guān)鍵點(diǎn)有助于在設(shè)計(jì)中更好地應(yīng)用鄰近法則,創(chuàng)造出更清晰、更易于理解的界面布局,提高用戶體驗(yàn)和界面的可用性。
 
在app產(chǎn)品中,我們應(yīng)該怎么應(yīng)用鄰近法則
在App產(chǎn)品設(shè)計(jì)中,應(yīng)用鄰近法則可以改善用戶界面的布局和交互,提升用戶體驗(yàn)。以下是一些應(yīng)用鄰近法則的方法:
相關(guān)功能分組
: 將相關(guān)功能或信息放置在彼此附近,例如將設(shè)置選項(xiàng)放在同一區(qū)域,讓用戶能夠更輕松地找到并使用相關(guān)功能。
類似操作的分組
: 將相似操作或功能放在相鄰位置,例如將編輯工具放在同一區(qū)域,以便用戶更快速地使用相關(guān)工具。
導(dǎo)航欄與內(nèi)容對(duì)應(yīng)
: 將導(dǎo)航欄與相應(yīng)的內(nèi)容區(qū)域?qū)?yīng),以減少用戶在不同頁(yè)面間的跳轉(zhuǎn),并幫助用戶更好地理解頁(yè)面的結(jié)構(gòu)。
按鈕和功能布局
: 設(shè)計(jì)時(shí)將按鈕和功能布局合理分組,保持相關(guān)的按鈕或操作盡可能靠近,減少用戶在界面中尋找所需功能的時(shí)間。
信息層級(jí)和結(jié)構(gòu)展示
: 通過(guò)鄰近法則將相關(guān)信息放置在一起,展現(xiàn)信息的邏輯層級(jí)和關(guān)聯(lián)性,以幫助用戶更清晰地理解頁(yè)面結(jié)構(gòu)。
交互流程的布局
: 設(shè)計(jì)操作流程時(shí),將相關(guān)步驟或功能放置在相鄰位置,以引導(dǎo)用戶進(jìn)行更自然、連貫的操作流程。
這些方法能夠通過(guò)鄰近法則幫助設(shè)計(jì)師更好地組織界面元素,提高用戶對(duì)界面的理解和操作效率,增強(qiáng)用戶的滿意度和體驗(yàn)。
 
鄰近法則總結(jié)
鄰近法則在App產(chǎn)品設(shè)計(jì)中指導(dǎo)著將相關(guān)的元素放置在彼此附近,以創(chuàng)建更直觀、更易于理解的界面布局。通過(guò)合理的空間分配和元素排列,幫助用戶更快速地找到相關(guān)功能、理解信息層級(jí)結(jié)構(gòu),提升用戶操作的效率和界面的可用性。這個(gè)原則可以優(yōu)化布局設(shè)計(jì),使得用戶能夠更輕松地掌握界面內(nèi)容和操作流程。
 
 
 
超長(zhǎng)干貨!UI設(shè)計(jì)師必須要懂的4個(gè)設(shè)計(jì)心理學(xué)
 
 
什么是菲茨定律?
菲茨定律是一項(xiàng)關(guān)于人機(jī)交互的基本原理,描述了人類手指或鼠標(biāo)等指針設(shè)備移動(dòng)到目標(biāo)區(qū)域的時(shí)間與目標(biāo)的大小和距離成反比的關(guān)系。這個(gè)定律是由保羅·菲茨在20世紀(jì)50年代提出的,廣泛應(yīng)用于人機(jī)界面設(shè)計(jì)領(lǐng)域。
根據(jù)菲茨定律,目標(biāo)越大或距離越近,用戶將指針移動(dòng)到目標(biāo)區(qū)域的時(shí)間就越短。具體而言,菲茨定律可以用以下公式表示: T=a+b×log 2 ( W/D+1)
其中:
T 是用戶移動(dòng)到目標(biāo)區(qū)域所需的時(shí)間。
D 是指針初始位置與目標(biāo)中心之間的距離。
W 是目標(biāo)區(qū)域的寬度或大小。
a 和 b 是與設(shè)備和任務(wù)有關(guān)的常數(shù)。 這個(gè)定律的應(yīng)用范圍非常廣泛,尤其在界面設(shè)計(jì)中。設(shè)計(jì)師可以利用菲茨定律來(lái)優(yōu)化界面布局和交互元素的設(shè)計(jì),使得用戶更容易、更快速地點(diǎn)擊或選擇目標(biāo)區(qū)域。通過(guò)增大目標(biāo)區(qū)域的大小、減少目標(biāo)間距離和提供合適的反饋,可以顯著改善用戶體驗(yàn),并使用戶更高效地使用界面。
 
超長(zhǎng)干貨!UI設(shè)計(jì)師必須要懂的4個(gè)設(shè)計(jì)心理學(xué)
 
 
它是怎么產(chǎn)生的?
菲茨定律的產(chǎn)生是基于人類運(yùn)動(dòng)學(xué)和認(rèn)知心理學(xué)的研究。保羅·菲茨在20世紀(jì)50年代的研究中發(fā)現(xiàn),在人類運(yùn)動(dòng)中存在一種模式,即手指或鼠標(biāo)等指針設(shè)備移動(dòng)到目標(biāo)區(qū)域的時(shí)間與目標(biāo)的大小和距離成反比關(guān)系。
這個(gè)定律的提出是基于以下觀察和假設(shè):
較大的目標(biāo)區(qū)域更容易命中。用戶更容易準(zhǔn)確地將指針移動(dòng)到較大的目標(biāo)上。
較近的目標(biāo)更容易到達(dá)。距離更近的目標(biāo)比距離更遠(yuǎn)的目標(biāo)更容易被選中。
基于這些發(fā)現(xiàn),菲茨提出了一個(gè)數(shù)學(xué)模型來(lái)描述這種關(guān)系,并提出了菲茨定律。這個(gè)定律通過(guò)對(duì)目標(biāo)的大小和距離進(jìn)行量化,為界面設(shè)計(jì)和人機(jī)交互提供了理論依據(jù),指導(dǎo)設(shè)計(jì)師如何優(yōu)化界面布局和元素設(shè)計(jì),以提高用戶的操作效率和準(zhǔn)確性。因此,菲茨定律成為了設(shè)計(jì)界面和交互方式的重要指導(dǎo)原則之一。
 
超長(zhǎng)干貨!UI設(shè)計(jì)師必須要懂的4個(gè)設(shè)計(jì)心理學(xué)
 
 
思考下菲茨定律UI作用
菲茨定律在 UI 設(shè)計(jì)中有著深遠(yuǎn)的影響,設(shè)計(jì)師可以利用這個(gè)原理來(lái)優(yōu)化界面,提高用戶的操作效率和體驗(yàn)。以下是一些菲茨定律在 UI 設(shè)計(jì)中的應(yīng)用方法:
增大可點(diǎn)擊區(qū)域
: 根據(jù)菲茨定律,較大的目標(biāo)區(qū)域更容易被點(diǎn)擊,因此,為重要的操作按鈕或功能區(qū)域提供更大的點(diǎn)擊面積。這有助于用戶更準(zhǔn)確地點(diǎn)擊目標(biāo),尤其對(duì)于移動(dòng)設(shè)備上的小屏幕更為重要。
減少目標(biāo)間距離
: 將常用功能或相關(guān)操作的按鈕或鏈接放置更接近,以減少目標(biāo)之間的距離。這樣用戶在切換不同功能時(shí)能更快速地移動(dòng)到目標(biāo)區(qū)域,減少了操作時(shí)間。
考慮手勢(shì)操作和屏幕布局
: 對(duì)于觸摸屏設(shè)備,菲茨定律同樣適用。設(shè)計(jì)師可以考慮手勢(shì)操作、放大目標(biāo)區(qū)域或布局方式,使得用戶更容易地觸摸、滑動(dòng)或縮放屏幕上的目標(biāo)。
合理利用白空間
: 在設(shè)計(jì)中留出足夠的空間,確保目標(biāo)區(qū)域不會(huì)過(guò)于擁擠,從而減少誤觸或混淆。良好的白空間布局有助于提高用戶的操作準(zhǔn)確性。
提供視覺(jué)反饋和指引
: 為了幫助用戶更準(zhǔn)確地選擇目標(biāo)區(qū)域,提供視覺(jué)反饋,如按鈕狀態(tài)變化或指示箭頭,可以讓用戶更清晰地了解下一步操作。
通過(guò)運(yùn)用菲茨定律,設(shè)計(jì)師可以優(yōu)化界面布局和元素的大小與間距,使得用戶更輕松、更快速地進(jìn)行交互操作。這有助于提升用戶體驗(yàn),減少用戶的操作時(shí)間和錯(cuò)誤率。
 
 
超長(zhǎng)干貨!UI設(shè)計(jì)師必須要懂的4個(gè)設(shè)計(jì)心理學(xué)
 
 
需要我們記住什么?
在設(shè)計(jì)中運(yùn)用菲茨定律時(shí),需要記住以下幾點(diǎn):
目標(biāo)大小與距離關(guān)系
: 目標(biāo)的大小和距離會(huì)影響用戶操作的效率。大的目標(biāo)區(qū)域和較近的距離能夠更快速、更準(zhǔn)確地被選中。
重要操作優(yōu)先考慮
: 對(duì)于常用或重要的操作按鈕,設(shè)計(jì)師應(yīng)該確保其具有足夠的大小和合適的間距,以提高用戶操作的效率和準(zhǔn)確性。
觸摸屏設(shè)備的優(yōu)化
: 對(duì)于移動(dòng)設(shè)備和觸摸屏,合理設(shè)置觸摸區(qū)域大小和間距,有助于用戶更輕松地操作,避免誤操作。
視覺(jué)反饋和引導(dǎo)
: 提供明確的視覺(jué)反饋,如按鈕狀態(tài)變化或指示箭頭,有助于用戶更準(zhǔn)確地選中目標(biāo)區(qū)域。
用戶反饋和測(cè)試
: 不斷收集用戶反饋并進(jìn)行測(cè)試,以確保設(shè)計(jì)的目標(biāo)大小和距離對(duì)用戶操作的有效性。
記住這些關(guān)鍵點(diǎn)有助于設(shè)計(jì)出更符合菲茨定律原理的界面,提高用戶的操作效率和滿意度。優(yōu)化目標(biāo)區(qū)域的大小和距離,可以有效地改善用戶體驗(yàn),并增強(qiáng)產(chǎn)品或應(yīng)用的易用性。
 
在app產(chǎn)品中,我們應(yīng)該怎么應(yīng)用菲茨定律
在 App 產(chǎn)品設(shè)計(jì)中,應(yīng)用菲茨定律可以優(yōu)化用戶體驗(yàn)和操作流程。以下是一些應(yīng)用菲茨定律的方法:
按鈕大小與布局
: 增大重要操作按鈕的大小,確保它們?nèi)菀c(diǎn)擊并位于用戶自然手指或鼠標(biāo)移動(dòng)的路徑上。將常用的按鈕放置在更接近用戶自然操作位置的地方。
減少操作距離
: 將相關(guān)操作或頁(yè)面之間的距離縮短,以減少用戶在不同功能區(qū)域間的切換所需的操作次數(shù)和時(shí)間。
設(shè)計(jì)適合手勢(shì)操作的界面
: 針對(duì)觸摸屏設(shè)備,設(shè)計(jì)手勢(shì)操作區(qū)域,使得用戶能夠輕松地進(jìn)行滑動(dòng)、放大縮小等手勢(shì)操作。
避免過(guò)度擁擠和重疊
: 在設(shè)計(jì)中避免過(guò)多的重疊元素和擁擠,確保目標(biāo)區(qū)域清晰可見(jiàn)且易于選擇。
提供清晰的反饋和指引
: 確保用戶點(diǎn)擊或選擇目標(biāo)時(shí)獲得清晰的視覺(jué)反饋,如按鈕狀態(tài)變化、高亮顯示或動(dòng)畫(huà)效果,以便明確指示用戶的操作結(jié)果。
持續(xù)優(yōu)化與用戶反饋
: 不斷收集用戶反饋,通過(guò)用戶測(cè)試和數(shù)據(jù)分析,優(yōu)化界面的目標(biāo)大小和距離,以提高用戶的操作效率和滿意度。
這些策略都是基于菲茨定律,旨在提高用戶點(diǎn)擊或選擇目標(biāo)區(qū)域的效率和準(zhǔn)確性,從而改善用戶體驗(yàn)并增強(qiáng)產(chǎn)品的易用性。
 
菲茨定律總結(jié)
菲茨定律在App產(chǎn)品設(shè)計(jì)中強(qiáng)調(diào)了目標(biāo)區(qū)域的大小和距離對(duì)用戶操作的影響。通過(guò)增大重要按鈕的大小、減少操作間距離、設(shè)計(jì)適合手勢(shì)操作的界面以及提供清晰的反饋指引,可以優(yōu)化用戶體驗(yàn),提高用戶操作的準(zhǔn)確性和效率。這個(gè)原理指導(dǎo)著設(shè)計(jì)師如何布局界面元素,使得用戶更輕松、更快速地進(jìn)行交互操作,進(jìn)而提升產(chǎn)品的易用性和吸引力。
 

藍(lán)藍(lán)設(shè)計(jì)(yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。

關(guān)鍵詞:UI咨詢、UI設(shè)計(jì)服務(wù)公司軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司

銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開(kāi)發(fā)、軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā)



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

分享精彩的后臺(tái)管理軟件界面設(shè)計(jì)欣賞 —藍(lán)藍(lán)UI設(shè)計(jì)公司

前端達(dá)人

今天分享B端后臺(tái)管理界面欣賞,網(wǎng)上我們會(huì)搜集一些公開(kāi)的國(guó)內(nèi)外優(yōu)秀的軟件界面設(shè)計(jì)和大家分享。

藍(lán)藍(lán)設(shè)計(jì)也有很多精彩的案例,B端后臺(tái)管理界面是我們最主要的工作方向之一,但大多數(shù)是保密狀態(tài)的,所以不能在網(wǎng)上發(fā)。歡迎我們聯(lián)系,請(qǐng)到yvirxh.cn欣賞更多案例作品。

 

 

 

 

 

 

 

 

 

 

 

 

#后臺(tái)界面設(shè)計(jì)欣賞 #界面設(shè)計(jì)靈感 #設(shè)計(jì)外包 #UI設(shè)計(jì)公司 #b端設(shè)計(jì)接單 #B端設(shè)計(jì)

藍(lán)藍(lán)設(shè)計(jì)(yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù)

關(guān)鍵詞:UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)軟件qt開(kāi)發(fā)、軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā)

 

藍(lán)藍(lán)設(shè)計(jì)(yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。

關(guān)鍵詞:UI咨詢UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司高端網(wǎng)站設(shè)計(jì)公司

銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)航天軍工軟件UI界面設(shè)計(jì)醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開(kāi)發(fā)軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā)

設(shè)計(jì)師如何用chatGPT更好的工作?

博博

1、寫(xiě)產(chǎn)品文案

當(dāng)你需要的文案出來(lái)后,你可以讓它優(yōu)化。你可以約束字?jǐn)?shù),提更多具體要求,它都能滿足你。

具體的一些提示文案細(xì)化以及示例

2、設(shè)計(jì)產(chǎn)品框架

提供頁(yè)面框架設(shè)計(jì)思路,當(dāng)然你也可以把問(wèn)題換成你正在做的產(chǎn)品。

3、做競(jìng)品分析

針對(duì)某一個(gè)特定的產(chǎn)品寫(xiě)出分析報(bào)告框架。你可以換成其他你感興趣的產(chǎn)品。

這里需要提醒下,對(duì)于一些通用型知識(shí),它可以寫(xiě)的很好,但如果是針對(duì)某個(gè)特定產(chǎn)品的具體內(nèi)容,可能偏差會(huì)很大。

有了大綱再去找內(nèi)容可以省事很多,比如

那么可能你也還想進(jìn)一步問(wèn),如何做好競(jìng)品分析?因?yàn)檫@個(gè)雖然是基礎(chǔ),但如果你不知道背后原理,可以繼續(xù)追問(wèn)。

4、學(xué)習(xí)設(shè)計(jì)流程

幫助優(yōu)化設(shè)計(jì)工作流程,但它所提到的工作流程優(yōu)化屬于比較通用的。

如果你想要問(wèn)具體的,你得問(wèn)更具體的問(wèn)題。

5、學(xué)習(xí)設(shè)計(jì)工具

你也可以問(wèn)它任何你想學(xué)的其他工具和知識(shí)。

6、找設(shè)計(jì)資源

可以讓它給出資源鏈接,方便快速查看。如果鏈接打不開(kāi),甚至還能修正。

7、學(xué)習(xí)更好表達(dá)

向團(tuán)隊(duì)其他成員解釋一些復(fù)雜概念

如何給非行業(yè)內(nèi)的用戶解釋你的產(chǎn)品概念

8、搜索設(shè)計(jì)趨勢(shì)

9、幫忙寫(xiě)PPT

當(dāng)我加上頁(yè)碼后,居然真的會(huì)努力寫(xiě)到這個(gè)要求的頁(yè)數(shù),雖然實(shí)際上用處不是很大,但這個(gè)能力再進(jìn)化進(jìn)化,真的很厲害,至少能提供一個(gè)通用思路。

10、組織活動(dòng)流程

如何更好的組織一場(chǎng)設(shè)計(jì)腦爆會(huì)

作者:彩云Sky
來(lái)源:站酷

藍(lán)藍(lán)設(shè)計(jì)(yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。

關(guān)鍵詞:UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司

銀行金融軟件UI界面設(shè)計(jì)能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開(kāi)發(fā)、軟件wpf開(kāi)發(fā)軟件vue開(kāi)發(fā)

談?wù)勗O(shè)計(jì)創(chuàng)意獲取的思路

博博

一、關(guān)于設(shè)計(jì)趨勢(shì)
設(shè)計(jì)創(chuàng)意是符合設(shè)計(jì)趨勢(shì)的,我們需要關(guān)注設(shè)計(jì)趨勢(shì)。
我覺(jué)得趨勢(shì)這個(gè)詞,書(shū)里面有個(gè)觀點(diǎn)還是可以的:關(guān)注長(zhǎng)期趨勢(shì)。
為什么這么說(shuō)呢,因?yàn)橼厔?shì)不是朝三暮四的,往往會(huì)保持很長(zhǎng)的時(shí)間。所以我們?cè)谧鲈O(shè)計(jì)創(chuàng)意的時(shí)候可以適當(dāng)關(guān)注長(zhǎng)期趨勢(shì)。
1.1關(guān)注社會(huì)趨勢(shì)的重要性
最直接影響的就是職業(yè)生涯的發(fā)展。譬如你是一名UI設(shè)計(jì)師或者即將畢業(yè)的學(xué)生,在當(dāng)前的形勢(shì)下UI設(shè)計(jì)師已經(jīng)趨于飽和,你想完成一次職業(yè)方向的確定或轉(zhuǎn)變,你會(huì)往哪里走?
那么你需要關(guān)注設(shè)計(jì)趨勢(shì)。
如果你選擇的是一個(gè)接近飽和的方向,那么你的薪資幾年內(nèi)肯定也得不到提高。有的設(shè)計(jì)師經(jīng)常會(huì)說(shuō)我做UI設(shè)計(jì)5-7年了,但是薪資依然還是1萬(wàn),我只能說(shuō)你現(xiàn)在沒(méi)有什么競(jìng)爭(zhēng)力。
所以趁著年輕,你可以考慮換一條細(xì)分的賽道。
譬如逐漸趨于飽和的車載HMI設(shè)計(jì),即將爆發(fā)的類似于Vision Pro的增強(qiáng)現(xiàn)實(shí)設(shè)計(jì)。。。
來(lái)自于蘋(píng)果官網(wǎng)
來(lái)自于蘋(píng)果官網(wǎng)
 
1.2如何了解設(shè)計(jì)趨勢(shì)
首先,最直觀的就是設(shè)計(jì)大事件。
譬如蘋(píng)果等著名品牌引導(dǎo)的設(shè)計(jì)承載方式的變革。從羅永浩推出無(wú)限屏概念開(kāi)始,其實(shí)類似的空間設(shè)計(jì)就已經(jīng)處于慢熱狀態(tài)。直到蘋(píng)果正式發(fā)布了Vision Pro,這種大事件直接將增強(qiáng)空間設(shè)計(jì)推向了高潮。
我們可以通過(guò)蘋(píng)果的官方網(wǎng)站,去了解Vision Pro的使用方法,以此來(lái)感受Vision pro可以改變什么?文本編輯、影視、閱讀以及游戲等等用戶體驗(yàn)與手機(jī)操作的不同點(diǎn),從而延伸出未來(lái)可以商業(yè)化的場(chǎng)景方向,可以做預(yù)知性的推斷。
有興趣的設(shè)計(jì)師還可以通過(guò)蘋(píng)果發(fā)布的Vision pro模擬器,來(lái)嘗試性地輸出一些創(chuàng)新的想法和創(chuàng)意,以此來(lái)建立自己在增強(qiáng)空間設(shè)計(jì)上的設(shè)計(jì)經(jīng)驗(yàn)和競(jìng)爭(zhēng)力。
其次,可以通過(guò)設(shè)計(jì)網(wǎng)站、社區(qū)和平臺(tái)。
譬如優(yōu)設(shè)、站酷、人人都是產(chǎn)品經(jīng)理等一些設(shè)計(jì)資訊平臺(tái)。很多設(shè)計(jì)師會(huì)將國(guó)外的一些好的設(shè)計(jì)趨勢(shì)的文章翻譯,我們可以通過(guò)這些文章來(lái)獲取設(shè)計(jì)趨勢(shì)。
再者,可以通過(guò)行業(yè)內(nèi)的研究報(bào)告。
譬如艾瑞咨詢發(fā)布的《2023年AIGC場(chǎng)景應(yīng)用展望研究報(bào)告》,里面就闡述了下一年甚至是未來(lái)AIGC的發(fā)展方向。
二、經(jīng)驗(yàn)積累促進(jìn)設(shè)計(jì)創(chuàng)意輸出
2.1經(jīng)驗(yàn)積累到一定程度的好處
一般設(shè)計(jì)師在自身發(fā)展的同時(shí),也都會(huì)留意身邊設(shè)計(jì)師發(fā)展的如何,嫉妒和對(duì)比是很正常的。有的設(shè)計(jì)師會(huì)覺(jué)得為什么他年紀(jì)不大卻能當(dāng)領(lǐng)導(dǎo),為什么他的薪資比我多那么多,為什么每次任務(wù)下來(lái)后他總是做的又快又好。。。
因?yàn)檫@是工作/設(shè)計(jì)經(jīng)驗(yàn)給他帶來(lái)了各種紅利。
為什么經(jīng)驗(yàn)豐富的設(shè)計(jì)師創(chuàng)意那么多呢?那就是尤尼卡效應(yīng)(靈感的悄然而至)。有經(jīng)驗(yàn)的設(shè)計(jì)師,職業(yè)生涯過(guò)程中看過(guò)無(wú)數(shù)的案例,想過(guò)無(wú)數(shù)的方案,做過(guò)無(wú)數(shù)的作品。所以,他們可以在看到問(wèn)題的時(shí)候,立馬給你輸出設(shè)計(jì)方案。如果你能達(dá)到這種地步,你的競(jìng)爭(zhēng)力也將無(wú)可匹敵。
2.2經(jīng)驗(yàn)積累下的靈感輸出
做到兩點(diǎn):【建立方向】和【埋頭苦干】。
畢業(yè)5年內(nèi)的設(shè)計(jì)師,可以不用過(guò)多的去關(guān)注別人與自己的差別,你要做的就是【建立方向】和【埋頭苦干】,幸運(yùn)只光顧有準(zhǔn)備的頭腦。那些有經(jīng)驗(yàn)的設(shè)計(jì)師也都是摸爬滾打一點(diǎn)一滴練出來(lái)的。過(guò)年的時(shí)候跟大學(xué)同學(xué)吃飯,設(shè)計(jì)耕耘10余載,他已經(jīng)是某設(shè)計(jì)院的總監(jiān)了。想想與他一起住過(guò)的小黑屋,想想我們打地鋪黑燈瞎火的做項(xiàng)目,為了錢么?是因?yàn)闊釔?ài),想做出更好的作品。再看看他一路走來(lái)的工作歷程,他基本上在一個(gè)垂直方向上深耕細(xì)作,從場(chǎng)館的設(shè)計(jì)方案到制定預(yù)算,從項(xiàng)目投標(biāo)到施工流程,整個(gè)一套流程都駕輕就熟了。
2.3不斷嘗試后的靈感輸出
設(shè)計(jì)師們都知道,靈感不會(huì)輕易上門。
創(chuàng)意是被逼出來(lái)的!這一點(diǎn)設(shè)計(jì)師們都很有感觸。
這里的經(jīng)驗(yàn)積累不完全是工作年限的意思,也有深度挖掘之意。
尤尼卡效應(yīng)要求我們,即使在設(shè)計(jì)工作中沒(méi)有靈感的時(shí)候,繼續(xù)嘗試著梳理思路不斷鉆研,肯定會(huì)有靈感乍現(xiàn)的那一刻。就像書(shū)中說(shuō)的那樣:
因?yàn)閯?chuàng)新是一個(gè)漸進(jìn)的過(guò)程,一次加上一點(diǎn)思考,最終會(huì)柳暗花明。
MIdjourny輸出:設(shè)計(jì)師絞盡腦汁
MIdjourny輸出:設(shè)計(jì)師絞盡腦汁
 
三、創(chuàng)意匯報(bào)
3.1高中低方案戰(zhàn)略
要想實(shí)現(xiàn)創(chuàng)意被大家更好地接受,通??梢詼?zhǔn)備三種可能的方案:1.最佳方案2.中間方案3.最差方案。領(lǐng)導(dǎo)的決策,也需要有一定的參考。我們給出的方案,盡量涵蓋高中低三種維度,以便進(jìn)行對(duì)比。
3.2選擇時(shí)機(jī)進(jìn)行推薦
創(chuàng)意方案出來(lái)后,你可以安排一次會(huì)議/宣講會(huì),闡述一下自己的設(shè)計(jì)方案。聰明的做法就是在會(huì)議召開(kāi)之前,先私下把方案簡(jiǎn)單過(guò)一下,以獲得一定的支持。
3.3學(xué)會(huì)傾聽(tīng)
你在匯報(bào)項(xiàng)目的過(guò)程中,別人會(huì)有一些想法和建議,麻煩你認(rèn)真傾聽(tīng)。不要著急去打斷,以免造成厭惡性溝通。
3.4不要放棄
創(chuàng)意被否定很正常。
真正能一次通過(guò)的創(chuàng)意實(shí)屬罕見(jiàn),就好比不能因?yàn)槟貌坏降谝痪筒簧蠄?chǎng)比賽一樣,你也不應(yīng)該因?yàn)閯?chuàng)意被否一次就永遠(yuǎn)自暴自棄。
四、創(chuàng)意輸出需要心流狀態(tài)
心流狀態(tài)是指自己已經(jīng)完全沉浸在設(shè)計(jì)創(chuàng)意中了。
心流狀態(tài)可以很好地幫助設(shè)計(jì)師提高工作效率,促進(jìn)設(shè)計(jì)創(chuàng)意的輸出。
4.1如何獲得心流狀態(tài)
環(huán)境很重要。
對(duì)于設(shè)計(jì)師而言,通過(guò)調(diào)整周圍的環(huán)境,比如說(shuō)引進(jìn)一些比較明亮的色彩、圖片、標(biāo)語(yǔ)等,可以大大激發(fā)一個(gè)人的學(xué)習(xí)能力。
開(kāi)放、整潔、平整的表面有助于整理人的思維,所以一般來(lái)說(shuō),你的桌子越干凈,就越容易提高工作效率,應(yīng)對(duì)工作中的各種挑戰(zhàn)。
五、創(chuàng)意伙伴日常溝通
眾人拾柴火焰高。
5.1與什么樣的人溝通
與相同價(jià)值的人溝通。
《探尋第一名》(Looking Out for Number One)一書(shū)中,作者羅伯特·林格(Robert Ringer)指出,持久的關(guān)系——一方為另一方提供相同的價(jià)值,雙方的利益交織在一起,讓這種關(guān)系持續(xù)下去——非常有價(jià)值。
因此你找的人必定是彼此都珍視的人,可以成為創(chuàng)意伙伴。你可以每個(gè)月找創(chuàng)意伙伴聊聊天喝喝茶充充電,獲取一些新的想法,讓自己的大腦保持常青常新。馬云說(shuō)過(guò),企業(yè)在不缺錢的時(shí)候融資,而不是缺錢了再去融資。
設(shè)計(jì)圈有認(rèn)識(shí)的大佬都很重視溝通,會(huì)經(jīng)常跟身邊的朋友聊天,其實(shí)這很大程度上
可以讓一個(gè)人擁有多個(gè)人的經(jīng)驗(yàn)和能力。
所以設(shè)計(jì)師應(yīng)該嘗試著開(kāi)放一些,而不是閉門造車。
MIdjourny輸出:設(shè)計(jì)師聊天
MIdjourny輸出:設(shè)計(jì)師聊天
 
六、公司層面:討論/溝通氛圍的重要性
公司層面,應(yīng)該鼓勵(lì)設(shè)計(jì)師在會(huì)議上多闡述自己的意見(jiàn)。
很多公司是不是有這樣一種現(xiàn)象:開(kāi)會(huì)的時(shí)候鴉雀無(wú)聲,只聽(tīng)到匯報(bào)的人膽怯地練著演講稿或者說(shuō)著自己的方案,讓其他人給意見(jiàn)的時(shí)候基本無(wú)人舉手,只能等領(lǐng)導(dǎo)給一些修改意見(jiàn),
然后這個(gè)設(shè)計(jì)方案就變成了領(lǐng)導(dǎo)認(rèn)可的設(shè)計(jì)方案了。
其實(shí)這種工作氛圍真的非常糟糕,限制了設(shè)計(jì)師的創(chuàng)意的發(fā)揮,同時(shí)也讓產(chǎn)品成為了一個(gè)片面性的產(chǎn)品。
6.1建立討論溝通氛圍的好處
所以團(tuán)隊(duì)的討論氛圍一定要建立起來(lái)。
書(shū)里這樣描述:
1.當(dāng)一個(gè)人感覺(jué)自己的想法受人歡迎的時(shí)候,他會(huì)想出更多有創(chuàng)意的點(diǎn)子來(lái)解決眼前的問(wèn)題——有時(shí)可能會(huì)在會(huì)上發(fā)表看法,有時(shí)則是在私下里提出建議;
2.如果團(tuán)隊(duì)的每個(gè)成員都感覺(jué)更有滿足感,他們的參與熱情就會(huì)高漲。想想看,如果人人都愿意獻(xiàn)計(jì)獻(xiàn)策,事情將會(huì)變得多么容易??!
6.2好好先生對(duì)設(shè)計(jì)創(chuàng)意的阻礙
討論溝通,也促進(jìn)了不同聲音的展現(xiàn)。團(tuán)隊(duì)需要不同的聲音,團(tuán)隊(duì)需要謙和而堅(jiān)定的人來(lái)告訴我們事情的本來(lái)面目,要聽(tīng)到赤裸裸的現(xiàn)實(shí)。

作者:阿琦Aqi
來(lái)源:站酷

藍(lán)藍(lán)設(shè)計(jì)(yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。

關(guān)鍵詞:UI咨詢UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司

銀行金融軟件UI界面設(shè)計(jì)能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開(kāi)發(fā)、軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā)

Apple Vision Pro中的設(shè)計(jì)細(xì)節(jié)!

博博

1. 沉浸感
將整個(gè)設(shè)計(jì)放在真實(shí)的空間中,使得設(shè)計(jì)更符合自己的體驗(yàn)、更加真實(shí)。
需要你拍攝一張真實(shí)的空間照片,臥室、街道、戶外......
體驗(yàn)Apple Vision Pro后的一點(diǎn)思考
2. 設(shè)計(jì)
從關(guān)鍵頁(yè)面開(kāi)始設(shè)計(jì)
設(shè)計(jì)空間界面的第一個(gè)原則是熟悉性。
設(shè)計(jì)空間界面的第一個(gè)原則是熟悉性。
在你面前滑動(dòng)一個(gè)180°視野的走馬燈界面,但主要焦點(diǎn)始終在最中心的設(shè)計(jì)上。
在你面前滑動(dòng)一個(gè)180°視野的走馬燈界面,但主要焦點(diǎn)始終在最中心的設(shè)計(jì)上。
從側(cè)面看,它會(huì)有點(diǎn)像這樣
從側(cè)面看,它會(huì)有點(diǎn)像這樣
 
3. 中保真設(shè)計(jì)
體驗(yàn)Apple Vision Pro后的一點(diǎn)思考
 
4. 材質(zhì)、組件
蘋(píng)果在這方面有他們自己的建議,并且已經(jīng)發(fā)布了他們的UI工具包。
Vision OS能根據(jù)環(huán)境光照條件和場(chǎng)景環(huán)境實(shí)時(shí)調(diào)整窗口現(xiàn)實(shí)效果。
Vision OS能根據(jù)環(huán)境光照條件和場(chǎng)景環(huán)境實(shí)時(shí)調(diào)整窗口現(xiàn)實(shí)效果。
 
最重要的一點(diǎn):在我的實(shí)際體驗(yàn)感受中,當(dāng)物理世界的背景發(fā)生變化時(shí)(亮度變化),窗口界面的實(shí)時(shí)效果也會(huì)發(fā)生相應(yīng)變化調(diào)整,主要是透明度、窗口邊緣、光線效果的變化,特別是一些按鈕、點(diǎn)擊的交互,模擬物理按鈕設(shè)計(jì)的點(diǎn)擊效果非常真實(shí),你想象一下臥室墻面的燈光開(kāi)關(guān)面板,早上按下和傍晚按下的光線效果、角度是一樣的嗎?
全是細(xì)節(jié)?。。?!
體驗(yàn)Apple Vision Pro后的一點(diǎn)思考
 
針對(duì)空間設(shè)計(jì)方面需要了解的一些知識(shí)點(diǎn):
視覺(jué)
用戶感知到的深度,可以通過(guò)平面的方式進(jìn)行設(shè)計(jì),也可以通過(guò)實(shí)際在Z軸上的位置來(lái)進(jìn)行設(shè)計(jì)。平面的方式,提供的是視覺(jué)深度,是假三維;牽扯到Z軸的位置,提供的是確實(shí)深度,是真三維。
為了更好的進(jìn)行空間視覺(jué)設(shè)計(jì),需要首先了解一些人體工學(xué)的知識(shí)。
(一)人體工學(xué)
第一,視覺(jué)系統(tǒng)辨別深度的方式。
視覺(jué)系統(tǒng)辨別深度的方式依靠2種線索:?jiǎn)窝劬€索和雙眼線索。
顧名思義,單眼線索只需要一只眼睛即可提供給我們視覺(jué)系統(tǒng)依據(jù),雙眼線索需要依靠?jī)芍谎劬Σ拍芴峁┥疃纫罁?jù)。
體驗(yàn)Apple Vision Pro后的一點(diǎn)思考
 
第二,人眼的舒適閱讀區(qū)域和注意力時(shí)長(zhǎng)。
在頭部不主動(dòng)轉(zhuǎn)動(dòng)的情況下,正負(fù)30度的弧度,以及比視線水平位置稍稍靠下的位置更適合閱讀。
超過(guò)這個(gè)區(qū)域,即使用戶不轉(zhuǎn)頭,也會(huì)因?yàn)楹馁M(fèi)精力而感到不那么舒適。
體驗(yàn)Apple Vision Pro后的一點(diǎn)思考
 
從視覺(jué)暫留(殘像)和瞬目反射(眨眼睛)的角度來(lái)說(shuō),我們的眼睛是不能一直工作的,在設(shè)計(jì)中可以余留出可以讓眼睛休息的時(shí)間。
視覺(jué)的余留有點(diǎn)類似于留白,讓眼睛不需要通過(guò)這部分視覺(jué)去識(shí)別出什么。比如兩個(gè)按鈕中間的空隙,兩個(gè)虛像之間的不重要的輔助內(nèi)容等等。
 
(二)視覺(jué)設(shè)計(jì)
空間里的視覺(jué)設(shè)計(jì),除了我們熟知顏色、大小等,還有尺寸、距離等??梢岳斫鉃?,一類是二維參數(shù),即Sketch等二維設(shè)計(jì)軟件里可以調(diào)整的參數(shù),一類是三維參數(shù),即3Dmax等三維設(shè)計(jì)軟件里,多出來(lái)的那些可以調(diào)整的參數(shù)。
無(wú)論是二維參數(shù)還是三維參數(shù),就可視化來(lái)說(shuō),都可以針對(duì)顏色、模糊、大小、動(dòng)效、背景、光影、遮擋、密度這八種對(duì)象進(jìn)行定義,這就是官方說(shuō)明中所提到的:圖像線索用法。
 
(三)窗口內(nèi)的動(dòng)效
因?yàn)榇蟠翱诘膬?nèi)容動(dòng)效可能讓用戶產(chǎn)生混淆,官方給了8點(diǎn)設(shè)計(jì)建議。
1. 保證窗口內(nèi)內(nèi)容和物理世界保持水平
2. 保證動(dòng)效擴(kuò)展中心點(diǎn)的穩(wěn)定。這里有一個(gè)一個(gè)概念:擴(kuò)散焦點(diǎn),可以理解為動(dòng)效的感知起點(diǎn)。
3. 擴(kuò)散焦點(diǎn)永遠(yuǎn)保持在窗口內(nèi)
4. 避免單純無(wú)意義的角度移動(dòng)(因?yàn)闀?huì)讓焦點(diǎn)移動(dòng))
5. 避免過(guò)快的動(dòng)畫(huà)
6. 如果動(dòng)畫(huà)變化過(guò)大,使用漸近漸出過(guò)場(chǎng)銜接
7. 前后移動(dòng)的動(dòng)效,內(nèi)容間距放大,物體放小
8. 使用低反光的材質(zhì)


作者:20th_Century_Boy
來(lái)源:站酷

藍(lán)藍(lán)設(shè)計(jì)(yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。

關(guān)鍵詞:UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司

銀行金融軟件UI界面設(shè)計(jì)能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開(kāi)發(fā)軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā)

XDC干貨|雪球表情升級(jí)全紀(jì)錄

前端達(dá)人

寫(xiě)在前面
在社區(qū)平臺(tái)語(yǔ)境里,表情無(wú)疑是很重要的組成部分。一套豐富且定位準(zhǔn)確的表情可以幫助用戶更清晰地表達(dá)自己的感受,增進(jìn)溝通的準(zhǔn)確性,同時(shí)增添社交互動(dòng)的趣味性,拉進(jìn)用戶之間的距離。帶有平臺(tái)特性的表情更能彰顯平臺(tái)自身的獨(dú)特性。
雪球作為金融社區(qū)平臺(tái),表情自然也是重要的元素。我們通過(guò)數(shù)據(jù)調(diào)研,發(fā)現(xiàn)雪球社區(qū)互動(dòng)中表情的滲透率達(dá)到18%,表情的使用率比較高。而現(xiàn)有的表情年久失修,存在幾個(gè)比較明顯的問(wèn)題,首先視覺(jué)風(fēng)格陳舊辨識(shí)度低;再有,表情中原本存在一些股票梗的表現(xiàn)力較弱,畫(huà)風(fēng)不夠有趣。第三,雪球誕生了新IP“呦呦”,非常適合在表情中應(yīng)用來(lái)推廣雪球品牌特性。
基于以上背景我們展開(kāi)了對(duì)于表情翻新改版的項(xiàng)目。
 
XDC干貨|雪球表情升級(jí)全紀(jì)錄
 
 
現(xiàn)狀&問(wèn)題
通過(guò)對(duì)當(dāng)前狀況進(jìn)行系統(tǒng)梳理,我們發(fā)現(xiàn)了一些存在的問(wèn)題。
 
XDC干貨|雪球表情升級(jí)全紀(jì)錄
 
 
 
1.設(shè)計(jì)風(fēng)格陳舊,不易識(shí)別表現(xiàn)力弱:
目前線上雪球表情風(fēng)格老舊,視覺(jué)表達(dá)不符合當(dāng)下設(shè)計(jì)潮流趨勢(shì);由于表情是白色在行文中表現(xiàn)力不足且不易被用戶識(shí)別,因而趣味性表達(dá)的作用不夠凸顯。
XDC干貨|雪球表情升級(jí)全紀(jì)錄
 
 
 
2.缺乏股票基金場(chǎng)景的情緒表達(dá)
社區(qū)場(chǎng)景中有大量的股票基金的討論和相關(guān)內(nèi)容的情緒表達(dá),而目前表情體系中缺乏此類表達(dá)或表達(dá)不夠生動(dòng)。
比如「關(guān)燈吃面」和「割肉」,在行文中一眼能識(shí)別到視覺(jué)主體是表情臉,而“吃面”和“割肉”的語(yǔ)義沒(méi)有生動(dòng)的體現(xiàn)出來(lái);還比如「跳水」又太具象和寫(xiě)實(shí),少了表情的趣味性。
XDC干貨|雪球表情升級(jí)全紀(jì)錄
 
 
 
3.沒(méi)有將雪球的新IP融入表情
雪球誕生了新的IP“呦呦”,表情的體系非常適合融入IP向的內(nèi)容,將IP表情化也更利于IP的推廣和品牌的傳播。
XDC干貨|雪球表情升級(jí)全紀(jì)錄
 
 
 
XDC干貨|雪球表情升級(jí)全紀(jì)錄
 
 
視覺(jué)風(fēng)格探索
1.雪球用戶特征
設(shè)計(jì)風(fēng)格需要根據(jù)平臺(tái)用戶特征進(jìn)行確定。開(kāi)始設(shè)計(jì)之前,我們先看看雪球用戶大概是什么樣的。
XDC干貨|雪球表情升級(jí)全紀(jì)錄
 
 
雪球的主要用戶為男性且集中在30-50歲左右,所以在視覺(jué)表現(xiàn)上盡量避免女性化或低齡化的風(fēng)格。
2.視覺(jué)風(fēng)格探索
風(fēng)格確定
舊版的表情蒼白,雖然細(xì)節(jié)很多但在行文中難以識(shí)別,本次改版重要任務(wù)之一是改版新的視覺(jué)風(fēng)格。emoji是最被用戶熟知的表情體系,我們決定新版向傳統(tǒng)黃臉emoji表情靠攏。大方向定了,但還需要確定視覺(jué)感受符合雪球的emoji。最后在兩種視覺(jué)風(fēng)格中我們選擇了視覺(jué)感受偏中性、風(fēng)格扁平的這個(gè)方向,這個(gè)風(fēng)格和雪球用戶特征更契合。
XDC干貨|雪球表情升級(jí)全紀(jì)錄
 
 
 
提升辨識(shí)度
表情在交流中作為非文字的“語(yǔ)言”,其辨識(shí)度至關(guān)重要。表情在行文中的尺寸相對(duì)較小和單個(gè)文字差不多,那么如何保證在文字中依然能一眼讀懂表情?
在對(duì)表情整體風(fēng)格的把控下,需要通過(guò)對(duì)細(xì)節(jié)的打磨和反復(fù)實(shí)驗(yàn),得出更有辨識(shí)度的設(shè)計(jì)方案。保持視覺(jué)扁平,盡量使用簡(jiǎn)潔的幾何圖形,加強(qiáng)顏色對(duì)比度,減少顏色數(shù)量,放大表情特征。通過(guò)以上手段有效的提升了表情的一致性和在行文中的辨識(shí)度。
XDC干貨|雪球表情升級(jí)全紀(jì)錄
 
 
 
XDC干貨|雪球表情升級(jí)全紀(jì)錄
 
 
發(fā)現(xiàn)股民討論語(yǔ)境下的“梗”
本次表情升級(jí)除了對(duì)現(xiàn)有表情進(jìn)行改造升級(jí),還針對(duì)雪球社區(qū)特色進(jìn)行挖掘。
1.挖掘“梗”
前面我們說(shuō)到雪球用戶是集中在30-50歲左右的男性,那么這類人群在社區(qū)中有怎樣的表達(dá)特點(diǎn)呢?
通過(guò)觀察我們發(fā)現(xiàn),在面對(duì)股市的波動(dòng)和不確定性,雪球用戶更喜歡用幽默詼諧的論調(diào)來(lái)調(diào)侃市場(chǎng)以宣泄心中的無(wú)奈和負(fù)面情緒,同時(shí)在波動(dòng)面前展現(xiàn)出一種堅(jiān)韌和自嘲的心態(tài)。我們可以在這種“戲謔調(diào)侃”中挖掘可以視覺(jué)化的情緒和表情。以此作為本次表情升級(jí)的一個(gè)重要方向。
戲謔調(diào)侃的表情有哪些呢?我們挖掘了當(dāng)下網(wǎng)絡(luò)社交流行的表情包和熱詞?;叵胍幌挛覀兪欠褚步?jīng)常使用類似“地鐵老人看手機(jī)”“黑人問(wèn)號(hào)臉”等網(wǎng)絡(luò)熱圖來(lái)表達(dá)內(nèi)心的復(fù)雜情緒呢。
XDC干貨|雪球表情升級(jí)全紀(jì)錄
 
 
 
在變幻莫測(cè)的股市中,面對(duì)現(xiàn)實(shí)的無(wú)力和不確定,祈福求平靜成了股民表達(dá)情緒舒緩心情的一種方式,比如“敲木魚(yú)”“祈求大漲”等儀式感的情境以表情的方式呈現(xiàn),也能一定程度上引起用戶的共鳴。
XDC干貨|雪球表情升級(jí)全紀(jì)錄
 
 
 
2.讓表情“淋漓盡致”
  •  
    微表情盡顯“內(nèi)心戲”
一個(gè)表情里往往蘊(yùn)含不只一種情感,短暫而難以察覺(jué)的面部變化最能傳達(dá)個(gè)體真實(shí)的情感狀態(tài),一個(gè)眼神、嘴唇微動(dòng)等細(xì)微變化,常常表達(dá)出個(gè)體內(nèi)在的真實(shí)狀態(tài)。
在設(shè)計(jì)“大哭”這個(gè)表情時(shí),我們挖掘到大哭背后可能是某種“絕望”,那么觀察下人們絕望時(shí)最大的面部特點(diǎn)是不是空洞的眼神和僵硬的臉?用這樣的微表情和大哭結(jié)合在一起,感受大哭情緒的同時(shí)也傳遞了絕望的內(nèi)心戲。
XDC干貨|雪球表情升級(jí)全紀(jì)錄
 
 
 
  •  
    賺了、虧了一目了然
股票社區(qū)中漲跌是永遠(yuǎn)的話題,市場(chǎng)的漲跌背后牽動(dòng)著的是股民們真金白銀的賬戶。“虧大了”和“暴富”這兩個(gè)表情很生動(dòng)的表達(dá)了用戶盈虧的兩種處境,但原有表情的視覺(jué)表達(dá)過(guò)于保守和隱晦。要讓用戶一眼看到就產(chǎn)生共鳴,紅綠色是最直觀的漲跌信號(hào),我們把這種語(yǔ)義和表情結(jié)合,“虧大了”除了表情沮喪還得加點(diǎn)綠色烘托氛圍,“暴富”的喜悅中再加上紅包加持情緒。
 
XDC干貨|雪球表情升級(jí)全紀(jì)錄
 
 
  •  
    戲劇化表達(dá)
在某些極端情緒上我們還嘗試打破舊表情的禁錮,用更加生動(dòng)夸張的方式呈現(xiàn)。比如“絕望”,只靠面部表情似乎無(wú)法充分的表達(dá),所以我們營(yíng)造了簡(jiǎn)單的環(huán)境和肢體動(dòng)作, 一個(gè)癱在墻角雙目無(wú)神的小黃臉,絕望的形象躍然紙上。
XDC干貨|雪球表情升級(jí)全紀(jì)錄
 
 
3.股票專屬“梗”
雪球社區(qū)里有一些獨(dú)特的表情,比如“關(guān)燈吃面”,它是雪球老用戶傳承的經(jīng)典梗;還有諸如跳水、割肉、抄底、滿倉(cāng)等股票術(shù)語(yǔ)梗也頗受歡迎。升級(jí)優(yōu)化這類表情的同時(shí)我們小開(kāi)腦洞在原有基礎(chǔ)上增加了“好基友”等新梗,讓股民表達(dá)更豐富有趣。
XDC干貨|雪球表情升級(jí)全紀(jì)錄
 
 
XDC干貨|雪球表情升級(jí)全紀(jì)錄
 
 
IP表情化
去年雪球誕生了自己的IP“YOYO”,此次表情升級(jí)正好可以將IP表情化,在平臺(tái)應(yīng)用和傳播。
YOYO所代表的品牌語(yǔ)義
1.福祿壽:因其原型是馴鹿,取福祿壽之意,代表財(cái)富;
2.溫暖陪伴&服務(wù)感:馴鹿具備天生的陪伴和服務(wù)感,與雪球強(qiáng)調(diào)的品牌服務(wù)感相契合。
XDC干貨|雪球表情升級(jí)全紀(jì)錄
 
 
 
YOYO品牌語(yǔ)義表情化
根據(jù)YOYO的兩種品牌語(yǔ)義,我們分別開(kāi)腦洞。
哪些意向和財(cái)富相關(guān)呢?我們找到“錦鯉”“招財(cái)貓”“金元寶”,這些元素和表情相結(jié)合形成財(cái)富類表達(dá);那么陪伴和服務(wù)感我們使用“抱抱”、“打call”這類溫暖鼓勵(lì)意向的肢體語(yǔ)言來(lái)和YOYO結(jié)合傳達(dá)。
XDC干貨|雪球表情升級(jí)全紀(jì)錄
 
 
 
寫(xiě)在最后
此次表情改版我們不僅從視覺(jué)和交互體驗(yàn)角度進(jìn)行優(yōu)化升級(jí),還通過(guò)挖掘平臺(tái)特征、用戶特征來(lái)探索表情更豐富的表達(dá)和更深層語(yǔ)義。通過(guò)本次升級(jí)希望助力雪球社區(qū)的互動(dòng)性、豐富性、趣味性。引發(fā)用戶共鳴和更積極的互動(dòng),建立更強(qiáng)大的社區(qū)鏈接。
XDC干貨|雪球表情升級(jí)全紀(jì)錄
 
 
 
內(nèi)容指導(dǎo) | @Zway @默默
內(nèi)容寫(xiě)作|@潔潔
排版編輯&優(yōu)化 | @丸子
 
 
 


作者:雪球設(shè)計(jì)中心XDC
鏈接:https://www.zcool.com.cn/article/ZMTYwOTE0OA==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

日歷

鏈接

個(gè)人資料

存檔