首頁

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

前端達(dá)人

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

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

 

 

 

 

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

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

 

 

 

 

 

 

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

 

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

 

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

 

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

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

 

 

 


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

 

 

 

 

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

 

 

 

 

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

 

 

 

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

 

 

 

從視覺效果上來看，由于圓角的聚焦效應(yīng)，非通欄卡片對于凸顯單個(gè)卡片的獨(dú)立性和內(nèi)容的效果都更好，畫面的分割感會(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ò)展頁面的橫向空間時(shí)，暗示頁面可以橫向滑動(dòng)時(shí)，需要采用非通欄卡片，利用橫向內(nèi)容連續(xù)性原則，幫助用戶建立可以橫向滑動(dòng)的意識。

 

 

 

 

小結(jié)：

 

 

 

 

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

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

藍(lán)藍(lán)設(shè)計(jì)(m.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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)的軟件開發(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開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)



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

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

博博

圖表的作用

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

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

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

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

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

圖表的類型（僅展示幾種常用圖表）

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

類型舉例：

條形圖/柱狀圖

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

堆積條形圖/堆積柱狀圖

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

折線圖

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

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

類型舉例：

雷達(dá)圖

雷達(dá)圖是以從同一點(diǎn)開始的軸上表示的三個(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)形圖、樹狀圖。

類型舉例：

餅圖/環(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ù)據(jù)的類別，通過面積大小來展示該組數(shù)據(jù)中不同分類數(shù)據(jù)的占比情況。

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

類型舉例：

?；鶊D

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

漏斗圖

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

瀑布圖

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

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

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

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

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

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

具體操作演示：



作者：Hapic21
來源：站酷

藍(lán)藍(lán)設(shè)計(jì)(m.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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)的軟件開發(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開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

評論(0) 瀏覽(598)

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

博博

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

 

 

含義：

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

運(yùn)用場景：

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

？圖標(biāo)（幫助）：通常用于提供用戶幫助和解答疑問。例如，在應(yīng)用程序的菜單中，可以使用？圖標(biāo)來提供關(guān)于如何使用該功能或應(yīng)用程序的幫助文檔鏈接。

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

 

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

1. 區(qū)別：

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

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

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

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

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

 

 

簡單總結(jié)一下

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

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

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

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

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

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

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

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


作者：齊天大碩
來源：站酷

藍(lán)藍(lán)設(shè)計(jì)(m.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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)的軟件開發(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開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

評論(0) 瀏覽(631)

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

博博

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

一、什么是泰斯勒定律 ？

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

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

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

1、讓用戶識別而不是記憶

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

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

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

3、整合功能、簡化用戶界面

隨著用戶需求的不斷增加，產(chǎn)品也將會(huì)不斷迭代，越到后面功能也可能會(huì)越來也多而且復(fù)雜。在不影響用戶需求和體驗(yà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ù)，為用戶提供更簡單的功能會(huì)增加其他方面的復(fù)雜性；

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

3、界面不能太過簡單，適當(dāng)?shù)膹?fù)雜度也會(huì)吸引用戶；

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

 

作者：哆啦的設(shè)計(jì)筆記
來源：站酷

藍(lán)藍(lán)設(shè)計(jì)(m.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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)的軟件開發(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開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

評論(0) 瀏覽(747)

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

前端達(dá)人

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

藍(lán)藍(lán)設(shè)計(jì)(m.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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)的軟件開發(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開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)



作者：A大林子
鏈接：https://www.zcool.com.cn/article/ZMTYwNjk2MA==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
評論(0) 瀏覽(640)

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

前端達(dá)人

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

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

 

 

 

 

 

 

 

 

 

 

 

 

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

藍(lán)藍(lán)設(shè)計(jì)(m.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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)的軟件開發(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開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

 

藍(lán)藍(lán)設(shè)計(jì)(m.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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)的軟件開發(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開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

評論(0) 瀏覽(612)

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

博博

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

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

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

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

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

3、做競品分析

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

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

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

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

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

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

如果你想要問具體的，你得問更具體的問題。

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

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

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

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

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

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

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

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

9、幫忙寫PPT

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

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

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

作者：彩云Sky
來源：站酷

藍(lán)藍(lán)設(shè)計(jì)(m.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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)的軟件開發(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開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

評論(0) 瀏覽(582)

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

博博

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

作者：阿琦Aqi
來源：站酷

藍(lán)藍(lán)設(shè)計(jì)(m.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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)的軟件開發(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開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

評論(0) 瀏覽(613)

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)鍵頁面開始設(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ì)、組件
蘋果在這方面有他們自己的建議，并且已經(jīng)發(fā)布了他們的UI工具包。
Vision OS能根據(jù)環(huán)境光照條件和場景環(huán)境實(shí)時(shí)調(diào)整窗口現(xiàn)實(shí)效果。
Vision OS能根據(jù)環(huán)境光照條件和場景環(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í)，你想象一下臥室墻面的燈光開關(guān)面板，早上按下和傍晚按下的光線效果、角度是一樣的嗎？
全是細(xì)節(jié)啊?。?！
體驗(yàn)Apple Vision Pro后的一點(diǎn)思考
 
針對空間設(shè)計(jì)方面需要了解的一些知識點(diǎn)：
視覺
用戶感知到的深度，可以通過平面的方式進(jìn)行設(shè)計(jì)，也可以通過實(shí)際在Z軸上的位置來進(jìn)行設(shè)計(jì)。平面的方式，提供的是視覺深度，是假三維；牽扯到Z軸的位置，提供的是確實(shí)深度，是真三維。
為了更好的進(jìn)行空間視覺設(shè)計(jì)，需要首先了解一些人體工學(xué)的知識。
(一)人體工學(xué)
第一，視覺系統(tǒng)辨別深度的方式。
視覺系統(tǒng)辨別深度的方式依靠2種線索：單眼線索和雙眼線索。
顧名思義，單眼線索只需要一只眼睛即可提供給我們視覺系統(tǒng)依據(jù)，雙眼線索需要依靠兩只眼睛才能提供深度依據(jù)。
體驗(yàn)Apple Vision Pro后的一點(diǎn)思考
 
第二，人眼的舒適閱讀區(qū)域和注意力時(shí)長。
在頭部不主動(dòng)轉(zhuǎn)動(dòng)的情況下，正負(fù)30度的弧度，以及比視線水平位置稍稍靠下的位置更適合閱讀。
超過這個(gè)區(qū)域，即使用戶不轉(zhuǎn)頭，也會(huì)因?yàn)楹馁M(fèi)精力而感到不那么舒適。
體驗(yàn)Apple Vision Pro后的一點(diǎn)思考
 
從視覺暫留（殘像）和瞬目反射（眨眼睛）的角度來說，我們的眼睛是不能一直工作的，在設(shè)計(jì)中可以余留出可以讓眼睛休息的時(shí)間。
視覺的余留有點(diǎn)類似于留白，讓眼睛不需要通過這部分視覺去識別出什么。比如兩個(gè)按鈕中間的空隙，兩個(gè)虛像之間的不重要的輔助內(nèi)容等等。
 
(二)視覺設(shè)計(jì)
空間里的視覺設(shè)計(jì)，除了我們熟知顏色、大小等，還有尺寸、距離等?？梢岳斫鉃?，一類是二維參數(shù)，即Sketch等二維設(shè)計(jì)軟件里可以調(diào)整的參數(shù)，一類是三維參數(shù)，即3Dmax等三維設(shè)計(jì)軟件里，多出來的那些可以調(diào)整的參數(shù)。
無論是二維參數(shù)還是三維參數(shù)，就可視化來說，都可以針對顏色、模糊、大小、動(dòng)效、背景、光影、遮擋、密度這八種對象進(jìn)行定義，這就是官方說明中所提到的：圖像線索用法。
 
(三)窗口內(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. 避免單純無意義的角度移動(dòng)（因?yàn)闀?huì)讓焦點(diǎn)移動(dòng)）
5. 避免過快的動(dòng)畫
6. 如果動(dòng)畫變化過大，使用漸近漸出過場銜接
7. 前后移動(dòng)的動(dòng)效，內(nèi)容間距放大，物體放小
8. 使用低反光的材質(zhì)


作者：20th_Century_Boy
來源：站酷

藍(lán)藍(lán)設(shè)計(jì)(m.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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)的軟件開發(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開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

評論(0) 瀏覽(729)

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

前端達(dá)人

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

藍(lán)藍(lán)設(shè)計(jì)(m.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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)的軟件開發(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開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

 


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

日歷

鏈接

個(gè)人資料

存檔