首頁

212024-2

一招教會你頁面分割怎么用

前端達人

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

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

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

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

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

留白分割的分類及適用場景：當條目信息層次較少（≦2）時，留白分割是比較合適的，當信息層次較多（≧3）時，留白分割既會浪費空間，也難以達到一目了然的分割效果。

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

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

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

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

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

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

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

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

小結(jié)：

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

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

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

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

銀行金融軟件 UI界面設(shè)計、能源及監(jiān)控軟件 UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計、軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件 UI界面設(shè)計、醫(yī)療行業(yè)軟件 UI界面設(shè)計、教育行業(yè)軟件 UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計、軟件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) 瀏覽(415)

202024-2

淺談實際應用中圖表的選擇與思考

博博

圖表的作用

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

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

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

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

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

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

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

類型舉例：

條形圖/柱狀圖

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

堆積條形圖/堆積柱狀圖

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

折線圖

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

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

類型舉例：

雷達圖

雷達圖是以從同一點開始的軸上表示的三個或更多個定量變量的二維圖表的形式顯示多變量數(shù)據(jù)的圖形方法。

散點圖/氣泡圖

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

氣泡圖與散點圖相似，不同之處在于，氣泡圖允許在圖表中額外加入一個表示大小的變量。

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

類型舉例：

餅圖/環(huán)形圖

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

樹狀圖

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

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

類型舉例：

桑基圖

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

漏斗圖

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

瀑布圖

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

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

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

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

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

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

具體操作演示：

作者：Hapic21
來源：站酷

評論(0) 瀏覽(469)

202024-2

B端設(shè)計：提示圖標中蘊藏的奧義

博博

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

含義：

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

運用場景：

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

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

這些圖標的使用可以幫助用戶更好地理解和使用應用程序，提供額外的信息和幫助，從而提升用戶體驗。

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

1. 區(qū)別：

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

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

2. 如何判斷該用哪個：

- 如果需要提供特定項目或字段的額外信息或解釋，可以使用i圖標。

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

簡單總結(jié)一下

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

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

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

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

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

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

同時我也問了一些大廠的朋友，這種地方是個仁者見仁智者見智的場景，所以此處可以對于圖標的運用可以靈活一些。

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

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

評論(0) 瀏覽(495)

202024-2

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

博博

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

一、什么是泰斯勒定律？

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

二、泰斯勒定律在設(shè)計中的運用

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

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

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

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

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

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

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

三、總結(jié)

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

1、系統(tǒng)的總復雜度是一個常數(shù)，為用戶提供更簡單的功能會增加其他方面的復雜性；

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

3、界面不能太過簡單，適當?shù)膹碗s度也會吸引用戶；

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

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

評論(0) 瀏覽(577)

182024-2

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

前端達人

簡介

設(shè)計方法論在UI設(shè)計中的應用帶來了顯著好處，通過系統(tǒng)性的設(shè)計流程和框架，團隊能夠更有效地處理挑戰(zhàn)、創(chuàng)造出用戶關(guān)注的界面。它促進了團隊協(xié)作與溝通，強調(diào)問題解決與創(chuàng)新，同時重視持續(xù)的用戶測試與反饋循環(huán)，有助于提高設(shè)計質(zhì)量和用戶滿意度，使得設(shè)計過程更為高效、有條理并具備創(chuàng)造性。

設(shè)計原則目錄

希克定律

?？硕擅枋隽诉x擇時間與選擇項數(shù)量之間的關(guān)系，即選擇的時間會隨著可選項的增加而增加。在設(shè)計中，這個定律提醒我們在界面設(shè)計時要簡化選擇過程，減少選項數(shù)量，使用戶更輕松、更快速地做出選擇。

確認偏差

確認偏差指出人們更傾向于接受與自己原有信念或期望相符的信息。在設(shè)計中，了解確認偏差有助于設(shè)計師合理呈現(xiàn)信息，將重要內(nèi)容放置在用戶預期區(qū)域，增強用戶對界面的認可感。

鄰近法則

鄰近法則是指將視覺上相關(guān)的元素放置在彼此附近，使用戶更容易將它們視作相關(guān)的一部分。在設(shè)計中，合理利用鄰近法則能夠組織信息、創(chuàng)造更清晰易懂的界面布局，提高用戶對界面內(nèi)容的理解和識別。

菲茨定律

菲茨定律描述了目標大小和距離對用戶操作效率的影響。設(shè)計師可以利用這個原則優(yōu)化界面元素的大小與間距，使用戶更快速、更準確地完成操作，提升用戶體驗和界面的易用性。

什么是?？硕桑?/div>

?？硕墒且粋€與人類反應時間和選擇數(shù)量之間關(guān)系的心理學原理，特別適用于界面設(shè)計和用戶體驗。這個定律是由英國心理學家威廉·?？耍╓illiam Edmund Hick）在20世紀初提出的。

簡而言之，希克定律表明人們做出選擇所需的時間與可供選擇的數(shù)量成正比。這意味著當選項的數(shù)量增加時，決策所需的時間也會相應增加。在UI設(shè)計中，這個定律強調(diào)了簡化選擇以提高用戶體驗的重要性。

通過減少選擇數(shù)量，設(shè)計師可以幫助用戶更快速、更輕松地做出決策。這可以通過多種方式實現(xiàn)，例如使用更簡潔的菜單結(jié)構(gòu)、合并功能或選項、使用默認設(shè)置以減少用戶需要作出的選擇等。

了解?？硕蓪τ谠O(shè)計者來說是極為重要的，因為它提醒我們：在設(shè)計界面時，簡化和優(yōu)化選擇可能會帶來更流暢、更高效的用戶體驗。

它是怎么產(chǎn)生的？

?？硕墒腔谛睦韺W和人類認知過程的研究而產(chǎn)生的。威廉·?？撕退耐略?930年代進行了一系列的實驗，旨在了解人們在不同選擇數(shù)量下做出決策的反應時間。

實驗中，被試者面對不同數(shù)量的選擇，例如按鈕或選項，然后被要求盡快做出選擇。實驗結(jié)果顯示，隨著選項數(shù)量的增加，被試者做出選擇所需的時間也相應增加。這一觀察成為?？硕傻幕A(chǔ)。

?？硕傻谋举|(zhì)是認知心理學的一部分，它涉及到人類對信息的處理方式。當人們面對多個選項時，他們需要對每個選項進行評估和決策，這會增加認知負荷。結(jié)果是，隨著選項數(shù)量的增加，處理和選擇所需的時間也相應增加。

這個定律提出了一種對設(shè)計界面和交互方式有深遠影響的見解：簡化界面，減少選擇數(shù)量，可以幫助用戶更快速、更輕松地做出決策。這種認知負荷的理論成果對于優(yōu)化用戶體驗和提高界面效率有著重要的指導作用。

思考下?？硕蒛I作用？

希克定律在UI設(shè)計中具有重要作用，它強調(diào)了簡化選擇以提高用戶體驗的重要性。以下是?？硕稍赨I設(shè)計中的一些具體作用和應用：

簡化菜單和導航

：減少導航菜單中的選項數(shù)量，將類似功能的項目歸類或合并，可以減輕用戶的選擇負擔，幫助他們更快速地找到所需信息。

優(yōu)化工作流程

：在應用程序或網(wǎng)站設(shè)計中，簡化工作流程和操作步驟可以減少用戶需要做出的決策，提高用戶完成任務(wù)的效率。

默認設(shè)置和建議

：使用默認設(shè)置或提供建議可以減少用戶必須做出的選擇。通過合理設(shè)置默認選項，可以簡化用戶體驗，讓用戶更快地進入應用或網(wǎng)站并開始使用。

信息層級結(jié)構(gòu)

：設(shè)計清晰的信息架構(gòu)和層級結(jié)構(gòu)有助于將內(nèi)容組織得更有條理，使用戶能夠更容易地定位所需信息，避免過多的選擇。

上下文反饋和指導

：提供清晰的上下文反饋和指導，幫助用戶更快速地了解當前操作的影響，減少不必要的猶豫和選擇焦慮。

用戶個性化和智能推薦

：利用個性化推薦或智能算法，根據(jù)用戶的歷史偏好為其提供定制化的選擇，減少不必要的選擇。

在UI設(shè)計中，理解希克定律可以引導設(shè)計師創(chuàng)造出更簡潔、更直觀、更易用的界面，從而提高用戶滿意度和效率。通過減少選擇數(shù)量和簡化操作，設(shè)計可以更好地配合人類認知特性，使用戶在界面上的交互變得更加流暢和自然。

需要我們記住什么？

在UI設(shè)計中，了解和應用希克定律有助于創(chuàng)造更優(yōu)秀的用戶體驗。以下是需要記住的一些關(guān)鍵點：

選擇數(shù)量與決策時間成正比

：用戶需要花費更多時間來做出決策，當他們面對更多選擇時。減少選擇數(shù)量可以提高用戶的決策效率。

簡化界面以降低認知負荷

：設(shè)計簡潔、清晰的界面可以減少用戶的認知負荷，幫助他們更輕松地使用應用或網(wǎng)站。

層級結(jié)構(gòu)和組織

：通過良好的信息層級結(jié)構(gòu)和內(nèi)容組織，可以使用戶更快速地找到所需信息，減少選擇過程。

默認設(shè)置的重要性

：合理設(shè)置默認選項可以簡化用戶體驗，降低他們需要做出的選擇，從而更快地開始使用應用或網(wǎng)站。

上下文反饋和引導

：提供清晰的上下文反饋和指導，幫助用戶更快速地了解其操作的影響，減少選擇焦慮。

用戶個性化和智能推薦

：利用用戶個性化數(shù)據(jù)和智能算法，為用戶提供定制化的選擇，降低不必要的選擇過程。

記住這些關(guān)鍵點能夠幫助設(shè)計師更好地優(yōu)化界面，提供更出色的用戶體驗，減少用戶做出選擇所需的時間，從而增強產(chǎn)品或應用的吸引力和實用性。

在app產(chǎn)品中，我們應該怎么應用?？硕?/div>

在移動應用程序（App）設(shè)計中，應用?？硕煽梢酝ㄟ^以下方式提高用戶體驗：

簡化導航和菜單

：減少主導航菜單中的選項數(shù)量，將類似的功能合并或分類，以簡化用戶的選擇過程。使用清晰的圖標和標簽幫助用戶更快速地理解選項。

優(yōu)化注冊和登錄流程

：在注冊和登錄過程中盡可能減少必填項，使用社交媒體登錄或單一注冊選項簡化流程，降低用戶的選擇負擔。

默認設(shè)置和個性化推薦：利用用戶的偏好和歷史數(shù)據(jù)，為用戶提供個性化的推薦或默認設(shè)置，減少用戶需要做出的選擇，并快速展示最相關(guān)的內(nèi)容或功能。

簡化表單和輸入

：最小化表單字段，根據(jù)上下文預填充表單內(nèi)容或使用智能輸入建議，以降低用戶輸入的認知負擔。

上下文引導和反饋

：在用戶進行關(guān)鍵操作時提供清晰的引導和反饋，讓用戶了解他們的操作將會帶來的結(jié)果，減少不必要的猶豫和選擇焦慮。

智能搜索和過濾功能

：提供強大的搜索和過濾功能，幫助用戶快速找到所需內(nèi)容，減少在大量選項中的選擇時間。

簡化購買流程

：在電商應用中，優(yōu)化購買流程，減少購物車和結(jié)賬過程中的步驟和選擇，提供清晰的購買路徑。

通過以上方式，設(shè)計師可以在App中運用?？硕桑瑤椭脩舾p松、更高效地使用應用，提高用戶滿意度并增強應用的吸引力。這些方法都圍繞著減少選擇數(shù)量、簡化操作和提供個性化的體驗，以減少用戶的認知負荷，提高用戶的決策效率。

?？硕煽偨Y(jié)

?？硕稍谝苿討迷O(shè)計中的應用關(guān)鍵在于簡化選擇、優(yōu)化流程以提升用戶體驗。通過減少主導航選項、優(yōu)化注冊與登錄流程、提供個性化推薦、簡化表單輸入、提供清晰反饋和引導、強化搜索功能以及簡化購買流程，設(shè)計師可以降低用戶的選擇焦慮和認知負荷，使用戶更輕松、更高效地使用應用，提升用戶滿意度。這些策略圍繞著簡化操作、減少選項數(shù)量和提供個性化體驗，有助于提高用戶的決策效率，增強應用的吸引力與可用性。

什么是確認偏差？

確認偏差是一種認知偏差，指的是人們更傾向于尋找、記住或贊同支持已有信念或假設(shè)的信息，而忽視或排斥與其相矛盾的信息。這種偏差導致人們在尋求信息和形成觀點時傾向于選擇那些與他們已有信念相一致的信息，而忽視那些與之相悖的信息。

在設(shè)計和決策過程中，確認偏差可能會對判斷和決策產(chǎn)生影響。設(shè)計師或決策者可能會傾向于尋找支持他們最初想法或假設(shè)的信息，而忽略潛在的反對觀點或證據(jù)。這可能導致錯誤的假設(shè)、不完整的分析或偏離客觀事實的判斷。

了解確認偏差對于設(shè)計師和決策者來說是很重要的，因為它可以影響到他們對問題的看法和解決方案的選擇。為了減輕確認偏差的影響，重要的做法包括尋求多樣的觀點和信息來源、鼓勵團隊開放性討論、持續(xù)評估和反思自己的假設(shè)，以及意識到并主動應對這種偏差。

它是怎么產(chǎn)生的？

確認偏差的產(chǎn)生與人類的認知方式和信息處理方式有關(guān)。它可以追溯到我們處理信息的心理機制，以及對信息的選擇性接收和處理。

信息過濾和選擇性接收

：人類大腦處理的信息量龐大，為了應對這種信息負荷，我們會有意無意地選擇性地接收與已有信念相符的信息，因為這樣更容易被接受和理解。

認知一致性和舒適度

：我們傾向于尋求與我們已有信念一致的信息，因為這會讓我們感到更加舒適和認知上的一致性，而與之相悖的信息則可能引起認知不適或挑戰(zhàn)。

記憶偏差

：我們記憶中更容易保留和回憶起與我們已有信念相符的信息，而忽略或淡化與之不符的信息，導致我們更傾向于記住和重復暴露于已有信念的信息。

社會影響和團隊動態(tài)

：在團隊環(huán)境中，人們可能更容易受到同伴或領(lǐng)導觀點的影響，導致更多地尋求與團隊共識一致的信息。

因此，確認偏差源于我們處理信息的方式和尋求認知一致性的趨勢，這種傾向性會影響我們對信息的選擇、記憶和接受，使得我們更容易偏向于支持已有信念的信息。

思考下確認偏差在UI作用？

認知偏差在UI設(shè)計中有著深遠的影響，設(shè)計師需要了解并考慮這些偏差，以創(chuàng)造更符合用戶認知和行為的界面：

信息呈現(xiàn)與確認偏差：

UI設(shè)計中的信息呈現(xiàn)方式能夠影響用戶的感知。確認偏差提示我們，設(shè)計師應該精心布局信息，確保用戶首先接觸到的內(nèi)容是符合其期望和信念的。在重要位置展示與用戶預期一致的信息能夠增強用戶對界面的認可感。

用戶體驗與認知一致性：

UI設(shè)計應該符合用戶的認知模式和習慣。保持一致的界面元素、布局結(jié)構(gòu)和交互方式有助于降低用戶學習成本，提升用戶體驗，因為這與用戶的認知一致性相契合。

選擇性暴露與設(shè)計引導：

設(shè)計師可以利用確認偏差的特性來引導用戶，將重要信息或功能放置在易于察覺的位置，引導用戶進行特定的操作。然而，需要謹慎處理，以避免對用戶造成信息過載。

避免偏見與用戶測試：

設(shè)計師應該避免自身的認知偏差影響設(shè)計，而是更多地關(guān)注用戶的實際需求和行為。通過持續(xù)的用戶測試和反饋，可以驗證設(shè)計的有效性，確保設(shè)計更加客觀、全面地服務(wù)于用戶。

認知偏差不僅能夠幫助設(shè)計師更好地了解用戶行為和認知模式，也提醒設(shè)計師需要謹慎地處理信息的呈現(xiàn)方式，以創(chuàng)造出更符合用戶認知特點和期望的界面。

需要我們記住什么？

用戶選擇性感知：

用戶會傾向于選擇性地接收與其已有信念相符的信息。因此，在設(shè)計中需要注意如何呈現(xiàn)信息，以便用戶更容易接收并理解與其預期一致的內(nèi)容。

認知一致性與用戶體驗：

用戶更喜歡一致性的界面設(shè)計。保持界面元素、布局和交互方式的一致性有助于提高用戶體驗，減少認知負擔。

引導與用戶行為：

可以利用認知偏差的特性來引導用戶行為，但需要謹慎，以避免對用戶造成信息過載或誤導。

客觀設(shè)計與用戶測試：

設(shè)計師需保持客觀，在設(shè)計中避免個人偏見的影響。持續(xù)的用戶測試和反饋是驗證設(shè)計有效性的關(guān)鍵。

用戶需求至上：

最重要的是設(shè)計能夠滿足用戶的實際需求。認知偏差提醒我們關(guān)注用戶行為和反饋，確保設(shè)計更加貼近用戶期望。

記住這些關(guān)鍵點有助于設(shè)計師更好地應用認知偏差的理論，創(chuàng)造出更符合用戶認知和行為習慣的界面，提升用戶體驗和產(chǎn)品吸引力。

在app產(chǎn)品中，我們應該怎么應用認知偏差

在App產(chǎn)品中，了解和應用認知偏差可以改善用戶體驗和促進用戶參與。以下是一些應用認知偏差的方法：

個性化內(nèi)容推薦

：利用用戶的歷史數(shù)據(jù)和偏好，提供個性化的內(nèi)容推薦，引導用戶瀏覽與其興趣相關(guān)的信息，這符合用戶的認知偏好。

強調(diào)常用功能

：將常用功能放置在易于察覺的位置，這有助于用戶更快速地找到并使用常用功能，符合用戶對信息的選擇性感知。

引導用戶決策

：通過明確的引導和推薦，幫助用戶做出決策。例如，突出顯示推薦選項或使用明確的指導語言，以降低用戶的選擇焦慮。

增加用戶互動和獎勵機制：利用認知偏差中的獎勵機制，激勵用戶參與互動。例如，獎勵積分、勛章或獎勵物品以促進用戶的積極參與。

社交證據(jù)和影響力

：強調(diào)其他用戶的行為和意見，例如顯示用戶評論或社交分享，可以影響新用戶的決策，符合社會影響的認知偏差。

提供個性化的反饋和建議

：根據(jù)用戶的行為提供個性化的反饋和建議，引導用戶完成特定的動作或行為，符合用戶的認知偏好和選擇性感知。

綜合利用這些策略可以更好地與用戶互動，促進參與度，提高用戶對產(chǎn)品的滿意度。然而，需要謹慎運用，避免過度使用以至于影響用戶體驗或?qū)е滦畔⑦^載。

認知偏差總結(jié)

綜合利用認知偏差的這些方面，設(shè)計者可以更加精準地與用戶互動，提升用戶體驗和參與度。但務(wù)必注意，應用認知偏差需要在不影響用戶信任和體驗的前提下進行，避免過度干預或引導，以免影響用戶的自主性和信任感。

什么是鄰近法則？

鄰近法則是設(shè)計中的一項基本原則，描述了物體或元素在空間中距離越近，就越有可能被視為相關(guān)的部分。這個原則是Gestalt心理學的一部分，指出物體在空間上的接近會引起它們被認為是相關(guān)的，無論它們的形狀或特征如何。

在設(shè)計中，鄰近法則指導著將相關(guān)的元素放置在彼此附近，以便用戶能夠?qū)⑺鼈円暈橐唤M或相關(guān)部分。這個原則常用于布局設(shè)計，例如將相關(guān)的菜單選項放在一起、相關(guān)的控件放置在同一區(qū)域等。通過利用元素之間的空間距離，設(shè)計師可以引導用戶對信息進行邏輯分組，提高用戶對頁面內(nèi)容的理解和整體結(jié)構(gòu)的認知。

鄰近法則的應用有助于創(chuàng)造出更清晰、更易于理解的設(shè)計布局，讓用戶更輕松地識別和理解相關(guān)的信息，提升界面的可讀性和可理解性。

它是怎么產(chǎn)生的？

鄰近法則源自格式塔心理學，起源于20世紀初期。格式塔探索者觀察到人類視覺系統(tǒng)傾向于將靠近的物體視為一組或相關(guān)的部分，而將遠離的物體視為不相關(guān)的。

本次創(chuàng)作的原則是基于觀察：

人們傾向于將距離較近的元素視為相關(guān)的整體，即使它們的形狀、顏色或其他特征不同。

空間上的接近性會引導人們將相關(guān)的元素組合在一起，形成邏輯上的群體或集合。

基于這些觀察，計算者得出結(jié)論：元素之間的接近程度影響了人們?nèi)绾魏徒M織信息。這個理論評估理解視覺，成為設(shè)計中常用的一項原則，幫助設(shè)計師創(chuàng)建更多條理和易于理解的界面布局和視覺組織。通過合理的安排和組織元素之間的距離，設(shè)計師能夠引導用戶更清晰地理解頁面的結(jié)構(gòu)和相關(guān)性。

思考下鄰近法則UI作用？

鄰近法則在 UI 設(shè)計中有著重要的應用，能夠指導設(shè)計師創(chuàng)建更直觀、更易理解的界面布局和組織方式。以下是鄰近法則在 UI 設(shè)計中的應用方法：

邏輯分組和視覺關(guān)聯(lián)：

將相關(guān)的元素放置在彼此附近，例如將菜單選項、功能按鈕或相關(guān)信息放在相近的區(qū)域，以形成邏輯上的群組或關(guān)聯(lián)，使用戶能夠更快速地理解信息之間的相關(guān)性。

表現(xiàn)信息層級和結(jié)構(gòu)：

通過合理安排元素之間的間距，設(shè)計師可以展現(xiàn)信息的結(jié)構(gòu)和層級。在網(wǎng)頁或應用中，合理的鄰近性有助于傳達頁面組織的邏輯和信息的重要性。

避免視覺混亂和誤導：

合理利用鄰近法則可以避免界面的視覺混亂。將不相關(guān)的元素保持一定的間距，避免過度擁擠，讓用戶更輕松地理清界面的內(nèi)容和結(jié)構(gòu)。

指引用戶流程和操作：

在設(shè)計工作流或操作步驟時，將相關(guān)的元素放在一起，以引導用戶流程，提高用戶操作的連貫性和流暢性。

視覺組織與導航：

在導航設(shè)計中，將相關(guān)功能或內(nèi)容放置在相鄰位置，例如將相關(guān)菜單項放在同一區(qū)域，以便用戶更快速地找到并使用所需功能。

適當運用鄰近法則可以改善用戶對界面的理解和認知，提高用戶操作的效率和體驗。它有助于營造清晰的信息層級、減少視覺混亂，并引導用戶更直觀地瀏覽和操作界面。

需要我們記住什么？

在設(shè)計中運用鄰近法則時，需要記住以下幾點：

相關(guān)性與空間接近性

：用戶傾向于將距離近的元素視為相關(guān)的整體。因此，在設(shè)計中將相關(guān)的元素放置在彼此附近，能夠幫助用戶更直觀地理解它們的關(guān)聯(lián)性。

信息組織和層級結(jié)構(gòu)

：通過合理的空間安排，展示信息的邏輯結(jié)構(gòu)和層級關(guān)系。這有助于用戶更輕松地理清界面內(nèi)容和操作流程。

避免視覺干擾和混亂

：控制元素之間的距離，避免過度擁擠和混亂，以免干擾用戶的視覺和理解。

引導用戶視線和操作：

合理利用鄰近法則可以引導用戶的視線和操作流程，使其更自然、更順暢地瀏覽和使用界面。

反復測試與用戶反饋

：不斷測試和收集用戶反饋，以確保所安排的元素之間的關(guān)聯(lián)性和距離對用戶理解和操作的有效性。

記住這些關(guān)鍵點有助于在設(shè)計中更好地應用鄰近法則，創(chuàng)造出更清晰、更易于理解的界面布局，提高用戶體驗和界面的可用性。

在app產(chǎn)品中，我們應該怎么應用鄰近法則

在App產(chǎn)品設(shè)計中，應用鄰近法則可以改善用戶界面的布局和交互，提升用戶體驗。以下是一些應用鄰近法則的方法：

相關(guān)功能分組

：將相關(guān)功能或信息放置在彼此附近，例如將設(shè)置選項放在同一區(qū)域，讓用戶能夠更輕松地找到并使用相關(guān)功能。

類似操作的分組

：將相似操作或功能放在相鄰位置，例如將編輯工具放在同一區(qū)域，以便用戶更快速地使用相關(guān)工具。

導航欄與內(nèi)容對應

：將導航欄與相應的內(nèi)容區(qū)域?qū)?，以減少用戶在不同頁面間的跳轉(zhuǎn)，并幫助用戶更好地理解頁面的結(jié)構(gòu)。

按鈕和功能布局

：設(shè)計時將按鈕和功能布局合理分組，保持相關(guān)的按鈕或操作盡可能靠近，減少用戶在界面中尋找所需功能的時間。

信息層級和結(jié)構(gòu)展示

：通過鄰近法則將相關(guān)信息放置在一起，展現(xiàn)信息的邏輯層級和關(guān)聯(lián)性，以幫助用戶更清晰地理解頁面結(jié)構(gòu)。

交互流程的布局

：設(shè)計操作流程時，將相關(guān)步驟或功能放置在相鄰位置，以引導用戶進行更自然、連貫的操作流程。

這些方法能夠通過鄰近法則幫助設(shè)計師更好地組織界面元素，提高用戶對界面的理解和操作效率，增強用戶的滿意度和體驗。

鄰近法則總結(jié)

鄰近法則在App產(chǎn)品設(shè)計中指導著將相關(guān)的元素放置在彼此附近，以創(chuàng)建更直觀、更易于理解的界面布局。通過合理的空間分配和元素排列，幫助用戶更快速地找到相關(guān)功能、理解信息層級結(jié)構(gòu)，提升用戶操作的效率和界面的可用性。這個原則可以優(yōu)化布局設(shè)計，使得用戶能夠更輕松地掌握界面內(nèi)容和操作流程。

什么是菲茨定律？

菲茨定律是一項關(guān)于人機交互的基本原理，描述了人類手指或鼠標等指針設(shè)備移動到目標區(qū)域的時間與目標的大小和距離成反比的關(guān)系。這個定律是由保羅·菲茨在20世紀50年代提出的，廣泛應用于人機界面設(shè)計領(lǐng)域。

根據(jù)菲茨定律，目標越大或距離越近，用戶將指針移動到目標區(qū)域的時間就越短。具體而言，菲茨定律可以用以下公式表示： T=a+b×log 2 ( W/D+1)

其中：

T 是用戶移動到目標區(qū)域所需的時間。

D 是指針初始位置與目標中心之間的距離。

W 是目標區(qū)域的寬度或大小。

a 和 b 是與設(shè)備和任務(wù)有關(guān)的常數(shù)。這個定律的應用范圍非常廣泛，尤其在界面設(shè)計中。設(shè)計師可以利用菲茨定律來優(yōu)化界面布局和交互元素的設(shè)計，使得用戶更容易、更快速地點擊或選擇目標區(qū)域。通過增大目標區(qū)域的大小、減少目標間距離和提供合適的反饋，可以顯著改善用戶體驗，并使用戶更高效地使用界面。

它是怎么產(chǎn)生的？

菲茨定律的產(chǎn)生是基于人類運動學和認知心理學的研究。保羅·菲茨在20世紀50年代的研究中發(fā)現(xiàn)，在人類運動中存在一種模式，即手指或鼠標等指針設(shè)備移動到目標區(qū)域的時間與目標的大小和距離成反比關(guān)系。

這個定律的提出是基于以下觀察和假設(shè)：

較大的目標區(qū)域更容易命中。用戶更容易準確地將指針移動到較大的目標上。

較近的目標更容易到達。距離更近的目標比距離更遠的目標更容易被選中。

基于這些發(fā)現(xiàn)，菲茨提出了一個數(shù)學模型來描述這種關(guān)系，并提出了菲茨定律。這個定律通過對目標的大小和距離進行量化，為界面設(shè)計和人機交互提供了理論依據(jù)，指導設(shè)計師如何優(yōu)化界面布局和元素設(shè)計，以提高用戶的操作效率和準確性。因此，菲茨定律成為了設(shè)計界面和交互方式的重要指導原則之一。

思考下菲茨定律UI作用

菲茨定律在 UI 設(shè)計中有著深遠的影響，設(shè)計師可以利用這個原理來優(yōu)化界面，提高用戶的操作效率和體驗。以下是一些菲茨定律在 UI 設(shè)計中的應用方法：

增大可點擊區(qū)域

：根據(jù)菲茨定律，較大的目標區(qū)域更容易被點擊，因此，為重要的操作按鈕或功能區(qū)域提供更大的點擊面積。這有助于用戶更準確地點擊目標，尤其對于移動設(shè)備上的小屏幕更為重要。

減少目標間距離

：將常用功能或相關(guān)操作的按鈕或鏈接放置更接近，以減少目標之間的距離。這樣用戶在切換不同功能時能更快速地移動到目標區(qū)域，減少了操作時間。

考慮手勢操作和屏幕布局

：對于觸摸屏設(shè)備，菲茨定律同樣適用。設(shè)計師可以考慮手勢操作、放大目標區(qū)域或布局方式，使得用戶更容易地觸摸、滑動或縮放屏幕上的目標。

合理利用白空間

：在設(shè)計中留出足夠的空間，確保目標區(qū)域不會過于擁擠，從而減少誤觸或混淆。良好的白空間布局有助于提高用戶的操作準確性。

提供視覺反饋和指引

：為了幫助用戶更準確地選擇目標區(qū)域，提供視覺反饋，如按鈕狀態(tài)變化或指示箭頭，可以讓用戶更清晰地了解下一步操作。

通過運用菲茨定律，設(shè)計師可以優(yōu)化界面布局和元素的大小與間距，使得用戶更輕松、更快速地進行交互操作。這有助于提升用戶體驗，減少用戶的操作時間和錯誤率。

需要我們記住什么？

在設(shè)計中運用菲茨定律時，需要記住以下幾點：

目標大小與距離關(guān)系

：目標的大小和距離會影響用戶操作的效率。大的目標區(qū)域和較近的距離能夠更快速、更準確地被選中。

重要操作優(yōu)先考慮

：對于常用或重要的操作按鈕，設(shè)計師應該確保其具有足夠的大小和合適的間距，以提高用戶操作的效率和準確性。

觸摸屏設(shè)備的優(yōu)化

：對于移動設(shè)備和觸摸屏，合理設(shè)置觸摸區(qū)域大小和間距，有助于用戶更輕松地操作，避免誤操作。

視覺反饋和引導

：提供明確的視覺反饋，如按鈕狀態(tài)變化或指示箭頭，有助于用戶更準確地選中目標區(qū)域。

用戶反饋和測試

：不斷收集用戶反饋并進行測試，以確保設(shè)計的目標大小和距離對用戶操作的有效性。

記住這些關(guān)鍵點有助于設(shè)計出更符合菲茨定律原理的界面，提高用戶的操作效率和滿意度。優(yōu)化目標區(qū)域的大小和距離，可以有效地改善用戶體驗，并增強產(chǎn)品或應用的易用性。

在app產(chǎn)品中，我們應該怎么應用菲茨定律

在 App 產(chǎn)品設(shè)計中，應用菲茨定律可以優(yōu)化用戶體驗和操作流程。以下是一些應用菲茨定律的方法：

按鈕大小與布局

：增大重要操作按鈕的大小，確保它們?nèi)菀c擊并位于用戶自然手指或鼠標移動的路徑上。將常用的按鈕放置在更接近用戶自然操作位置的地方。

減少操作距離

：將相關(guān)操作或頁面之間的距離縮短，以減少用戶在不同功能區(qū)域間的切換所需的操作次數(shù)和時間。

設(shè)計適合手勢操作的界面

：針對觸摸屏設(shè)備，設(shè)計手勢操作區(qū)域，使得用戶能夠輕松地進行滑動、放大縮小等手勢操作。

避免過度擁擠和重疊

：在設(shè)計中避免過多的重疊元素和擁擠，確保目標區(qū)域清晰可見且易于選擇。

提供清晰的反饋和指引

：確保用戶點擊或選擇目標時獲得清晰的視覺反饋，如按鈕狀態(tài)變化、高亮顯示或動畫效果，以便明確指示用戶的操作結(jié)果。

持續(xù)優(yōu)化與用戶反饋

：不斷收集用戶反饋，通過用戶測試和數(shù)據(jù)分析，優(yōu)化界面的目標大小和距離，以提高用戶的操作效率和滿意度。

這些策略都是基于菲茨定律，旨在提高用戶點擊或選擇目標區(qū)域的效率和準確性，從而改善用戶體驗并增強產(chǎn)品的易用性。

菲茨定律總結(jié)

菲茨定律在App產(chǎn)品設(shè)計中強調(diào)了目標區(qū)域的大小和距離對用戶操作的影響。通過增大重要按鈕的大小、減少操作間距離、設(shè)計適合手勢操作的界面以及提供清晰的反饋指引，可以優(yōu)化用戶體驗，提高用戶操作的準確性和效率。這個原理指導著設(shè)計師如何布局界面元素，使得用戶更輕松、更快速地進行交互操作，進而提升產(chǎn)品的易用性和吸引力。

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

評論(0) 瀏覽(512)

182024-2

分享精彩的后臺管理軟件界面設(shè)計欣賞 —藍藍UI設(shè)計公司

前端達人

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

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

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

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

評論(0) 瀏覽(494)

182024-2

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

博博

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

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

具體的一些提示文案細化以及示例

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

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

3、做競品分析

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

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

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

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

4、學習設(shè)計流程

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

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

5、學習設(shè)計工具

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

6、找設(shè)計資源

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

7、學習更好表達

向團隊其他成員解釋一些復雜概念

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

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

9、幫忙寫PPT

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

10、組織活動流程

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

作者：彩云Sky
來源：站酷

評論(0) 瀏覽(477)

172024-2

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

博博

一、關(guān)于設(shè)計趨勢

設(shè)計創(chuàng)意是符合設(shè)計趨勢的，我們需要關(guān)注設(shè)計趨勢。

我覺得趨勢這個詞，書里面有個觀點還是可以的：關(guān)注長期趨勢。

為什么這么說呢，因為趨勢不是朝三暮四的，往往會保持很長的時間。所以我們在做設(shè)計創(chuàng)意的時候可以適當關(guān)注長期趨勢。

1.1關(guān)注社會趨勢的重要性

最直接影響的就是職業(yè)生涯的發(fā)展。譬如你是一名UI設(shè)計師或者即將畢業(yè)的學生，在當前的形勢下UI設(shè)計師已經(jīng)趨于飽和，你想完成一次職業(yè)方向的確定或轉(zhuǎn)變，你會往哪里走？

那么你需要關(guān)注設(shè)計趨勢。

如果你選擇的是一個接近飽和的方向，那么你的薪資幾年內(nèi)肯定也得不到提高。有的設(shè)計師經(jīng)常會說我做UI設(shè)計5-7年了，但是薪資依然還是1萬，我只能說你現(xiàn)在沒有什么競爭力。

所以趁著年輕，你可以考慮換一條細分的賽道。

譬如逐漸趨于飽和的車載HMI設(shè)計，即將爆發(fā)的類似于Vision Pro的增強現(xiàn)實設(shè)計。。。

來自于蘋果官網(wǎng)

1.2如何了解設(shè)計趨勢

首先，最直觀的就是設(shè)計大事件。

譬如蘋果等著名品牌引導的設(shè)計承載方式的變革。從羅永浩推出無限屏概念開始，其實類似的空間設(shè)計就已經(jīng)處于慢熱狀態(tài)。直到蘋果正式發(fā)布了Vision Pro，這種大事件直接將增強空間設(shè)計推向了高潮。

我們可以通過蘋果的官方網(wǎng)站，去了解Vision Pro的使用方法，以此來感受Vision pro可以改變什么？文本編輯、影視、閱讀以及游戲等等用戶體驗與手機操作的不同點，從而延伸出未來可以商業(yè)化的場景方向，可以做預知性的推斷。

有興趣的設(shè)計師還可以通過蘋果發(fā)布的Vision pro模擬器，來嘗試性地輸出一些創(chuàng)新的想法和創(chuàng)意，以此來建立自己在增強空間設(shè)計上的設(shè)計經(jīng)驗和競爭力。

其次，可以通過設(shè)計網(wǎng)站、社區(qū)和平臺。

譬如優(yōu)設(shè)、站酷、人人都是產(chǎn)品經(jīng)理等一些設(shè)計資訊平臺。很多設(shè)計師會將國外的一些好的設(shè)計趨勢的文章翻譯，我們可以通過這些文章來獲取設(shè)計趨勢。

再者，可以通過行業(yè)內(nèi)的研究報告。

譬如艾瑞咨詢發(fā)布的《2023年AIGC場景應用展望研究報告》，里面就闡述了下一年甚至是未來AIGC的發(fā)展方向。

二、經(jīng)驗積累促進設(shè)計創(chuàng)意輸出

2.1經(jīng)驗積累到一定程度的好處

一般設(shè)計師在自身發(fā)展的同時，也都會留意身邊設(shè)計師發(fā)展的如何，嫉妒和對比是很正常的。有的設(shè)計師會覺得為什么他年紀不大卻能當領(lǐng)導，為什么他的薪資比我多那么多，為什么每次任務(wù)下來后他總是做的又快又好。。。

因為這是工作/設(shè)計經(jīng)驗給他帶來了各種紅利。

為什么經(jīng)驗豐富的設(shè)計師創(chuàng)意那么多呢？那就是尤尼卡效應（靈感的悄然而至）。有經(jīng)驗的設(shè)計師，職業(yè)生涯過程中看過無數(shù)的案例，想過無數(shù)的方案，做過無數(shù)的作品。所以，他們可以在看到問題的時候，立馬給你輸出設(shè)計方案。如果你能達到這種地步，你的競爭力也將無可匹敵。

2.2經(jīng)驗積累下的靈感輸出

做到兩點：【建立方向】和【埋頭苦干】。

畢業(yè)5年內(nèi)的設(shè)計師，可以不用過多的去關(guān)注別人與自己的差別，你要做的就是【建立方向】和【埋頭苦干】，幸運只光顧有準備的頭腦。那些有經(jīng)驗的設(shè)計師也都是摸爬滾打一點一滴練出來的。過年的時候跟大學同學吃飯，設(shè)計耕耘10余載，他已經(jīng)是某設(shè)計院的總監(jiān)了。想想與他一起住過的小黑屋，想想我們打地鋪黑燈瞎火的做項目，為了錢么？是因為熱愛，想做出更好的作品。再看看他一路走來的工作歷程，他基本上在一個垂直方向上深耕細作，從場館的設(shè)計方案到制定預算，從項目投標到施工流程，整個一套流程都駕輕就熟了。

2.3不斷嘗試后的靈感輸出

設(shè)計師們都知道，靈感不會輕易上門。

創(chuàng)意是被逼出來的！這一點設(shè)計師們都很有感觸。

這里的經(jīng)驗積累不完全是工作年限的意思，也有深度挖掘之意。

尤尼卡效應要求我們，即使在設(shè)計工作中沒有靈感的時候，繼續(xù)嘗試著梳理思路不斷鉆研，肯定會有靈感乍現(xiàn)的那一刻。就像書中說的那樣：

因為創(chuàng)新是一個漸進的過程，一次加上一點思考，最終會柳暗花明。

MIdjourny輸出：設(shè)計師絞盡腦汁

三、創(chuàng)意匯報

3.1高中低方案戰(zhàn)略

要想實現(xiàn)創(chuàng)意被大家更好地接受，通?？梢詼蕚淙N可能的方案：1.最佳方案2.中間方案3.最差方案。領(lǐng)導的決策，也需要有一定的參考。我們給出的方案，盡量涵蓋高中低三種維度，以便進行對比。

3.2選擇時機進行推薦

創(chuàng)意方案出來后，你可以安排一次會議/宣講會，闡述一下自己的設(shè)計方案。聰明的做法就是在會議召開之前，先私下把方案簡單過一下，以獲得一定的支持。

3.3學會傾聽

你在匯報項目的過程中，別人會有一些想法和建議，麻煩你認真傾聽。不要著急去打斷，以免造成厭惡性溝通。

3.4不要放棄

創(chuàng)意被否定很正常。

真正能一次通過的創(chuàng)意實屬罕見，就好比不能因為拿不到第一就不上場比賽一樣，你也不應該因為創(chuàng)意被否一次就永遠自暴自棄。

四、創(chuàng)意輸出需要心流狀態(tài)

心流狀態(tài)是指自己已經(jīng)完全沉浸在設(shè)計創(chuàng)意中了。

心流狀態(tài)可以很好地幫助設(shè)計師提高工作效率，促進設(shè)計創(chuàng)意的輸出。

4.1如何獲得心流狀態(tài)

環(huán)境很重要。

對于設(shè)計師而言，通過調(diào)整周圍的環(huán)境，比如說引進一些比較明亮的色彩、圖片、標語等，可以大大激發(fā)一個人的學習能力。

開放、整潔、平整的表面有助于整理人的思維，所以一般來說，你的桌子越干凈，就越容易提高工作效率，應對工作中的各種挑戰(zhàn)。

五、創(chuàng)意伙伴日常溝通

眾人拾柴火焰高。

5.1與什么樣的人溝通

與相同價值的人溝通。

《探尋第一名》(Looking Out for Number One)一書中，作者羅伯特·林格(Robert Ringer)指出，持久的關(guān)系——一方為另一方提供相同的價值，雙方的利益交織在一起，讓這種關(guān)系持續(xù)下去——非常有價值。

因此你找的人必定是彼此都珍視的人，可以成為創(chuàng)意伙伴。你可以每個月找創(chuàng)意伙伴聊聊天喝喝茶充充電，獲取一些新的想法，讓自己的大腦保持常青常新。馬云說過，企業(yè)在不缺錢的時候融資，而不是缺錢了再去融資。

設(shè)計圈有認識的大佬都很重視溝通，會經(jīng)常跟身邊的朋友聊天，其實這很大程度上

可以讓一個人擁有多個人的經(jīng)驗和能力。

所以設(shè)計師應該嘗試著開放一些，而不是閉門造車。

MIdjourny輸出：設(shè)計師聊天

六、公司層面：討論/溝通氛圍的重要性

公司層面，應該鼓勵設(shè)計師在會議上多闡述自己的意見。

很多公司是不是有這樣一種現(xiàn)象：開會的時候鴉雀無聲，只聽到匯報的人膽怯地練著演講稿或者說著自己的方案，讓其他人給意見的時候基本無人舉手，只能等領(lǐng)導給一些修改意見，

然后這個設(shè)計方案就變成了領(lǐng)導認可的設(shè)計方案了。

其實這種工作氛圍真的非常糟糕，限制了設(shè)計師的創(chuàng)意的發(fā)揮，同時也讓產(chǎn)品成為了一個片面性的產(chǎn)品。

6.1建立討論溝通氛圍的好處

所以團隊的討論氛圍一定要建立起來。

書里這樣描述：

1.當一個人感覺自己的想法受人歡迎的時候，他會想出更多有創(chuàng)意的點子來解決眼前的問題——有時可能會在會上發(fā)表看法，有時則是在私下里提出建議；

2.如果團隊的每個成員都感覺更有滿足感，他們的參與熱情就會高漲。想想看，如果人人都愿意獻計獻策，事情將會變得多么容易啊！

6.2好好先生對設(shè)計創(chuàng)意的阻礙

討論溝通，也促進了不同聲音的展現(xiàn)。團隊需要不同的聲音，團隊需要謙和而堅定的人來告訴我們事情的本來面目，要聽到赤裸裸的現(xiàn)實。

作者：阿琦Aqi
來源：站酷

評論(0) 瀏覽(492)

172024-2

Apple Vision Pro中的設(shè)計細節(jié)！

博博

1. 沉浸感

將整個設(shè)計放在真實的空間中，使得設(shè)計更符合自己的體驗、更加真實。

需要你拍攝一張真實的空間照片，臥室、街道、戶外......

2. 設(shè)計

從關(guān)鍵頁面開始設(shè)計

設(shè)計空間界面的第一個原則是熟悉性。

在你面前滑動一個180°視野的走馬燈界面，但主要焦點始終在最中心的設(shè)計上。

從側(cè)面看，它會有點像這樣

3. 中保真設(shè)計

4. 材質(zhì)、組件

蘋果在這方面有他們自己的建議，并且已經(jīng)發(fā)布了他們的UI工具包。

Vision OS能根據(jù)環(huán)境光照條件和場景環(huán)境實時調(diào)整窗口現(xiàn)實效果。

最重要的一點：在我的實際體驗感受中，當物理世界的背景發(fā)生變化時（亮度變化），窗口界面的實時效果也會發(fā)生相應變化調(diào)整，主要是透明度、窗口邊緣、光線效果的變化，特別是一些按鈕、點擊的交互，模擬物理按鈕設(shè)計的點擊效果非常真實，你想象一下臥室墻面的燈光開關(guān)面板，早上按下和傍晚按下的光線效果、角度是一樣的嗎？

全是細節(jié)啊?。?！

針對空間設(shè)計方面需要了解的一些知識點：

視覺

用戶感知到的深度，可以通過平面的方式進行設(shè)計，也可以通過實際在Z軸上的位置來進行設(shè)計。平面的方式，提供的是視覺深度，是假三維；牽扯到Z軸的位置，提供的是確實深度，是真三維。

為了更好的進行空間視覺設(shè)計，需要首先了解一些人體工學的知識。

(一)人體工學

第一，視覺系統(tǒng)辨別深度的方式。

視覺系統(tǒng)辨別深度的方式依靠2種線索：單眼線索和雙眼線索。

顧名思義，單眼線索只需要一只眼睛即可提供給我們視覺系統(tǒng)依據(jù)，雙眼線索需要依靠兩只眼睛才能提供深度依據(jù)。

第二，人眼的舒適閱讀區(qū)域和注意力時長。

在頭部不主動轉(zhuǎn)動的情況下，正負30度的弧度，以及比視線水平位置稍稍靠下的位置更適合閱讀。

超過這個區(qū)域，即使用戶不轉(zhuǎn)頭，也會因為耗費精力而感到不那么舒適。

從視覺暫留（殘像）和瞬目反射（眨眼睛）的角度來說，我們的眼睛是不能一直工作的，在設(shè)計中可以余留出可以讓眼睛休息的時間。

視覺的余留有點類似于留白，讓眼睛不需要通過這部分視覺去識別出什么。比如兩個按鈕中間的空隙，兩個虛像之間的不重要的輔助內(nèi)容等等。

(二)視覺設(shè)計

空間里的視覺設(shè)計，除了我們熟知顏色、大小等，還有尺寸、距離等?？梢岳斫鉃?，一類是二維參數(shù)，即Sketch等二維設(shè)計軟件里可以調(diào)整的參數(shù)，一類是三維參數(shù)，即3Dmax等三維設(shè)計軟件里，多出來的那些可以調(diào)整的參數(shù)。

無論是二維參數(shù)還是三維參數(shù)，就可視化來說，都可以針對顏色、模糊、大小、動效、背景、光影、遮擋、密度這八種對象進行定義，這就是官方說明中所提到的：圖像線索用法。

(三)窗口內(nèi)的動效

因為大窗口的內(nèi)容動效可能讓用戶產(chǎn)生混淆，官方給了8點設(shè)計建議。

1. 保證窗口內(nèi)內(nèi)容和物理世界保持水平

2. 保證動效擴展中心點的穩(wěn)定。這里有一個一個概念：擴散焦點，可以理解為動效的感知起點。

3. 擴散焦點永遠保持在窗口內(nèi)

4. 避免單純無意義的角度移動（因為會讓焦點移動）

5. 避免過快的動畫

6. 如果動畫變化過大，使用漸近漸出過場銜接

7. 前后移動的動效，內(nèi)容間距放大，物體放小

8. 使用低反光的材質(zhì)

作者：20th_Century_Boy
來源：站酷

評論(0) 瀏覽(609)

172024-2

XDC干貨｜雪球表情升級全紀錄

前端達人

寫在前面

在社區(qū)平臺語境里，表情無疑是很重要的組成部分。一套豐富且定位準確的表情可以幫助用戶更清晰地表達自己的感受，增進溝通的準確性，同時增添社交互動的趣味性，拉進用戶之間的距離。帶有平臺特性的表情更能彰顯平臺自身的獨特性。

雪球作為金融社區(qū)平臺，表情自然也是重要的元素。我們通過數(shù)據(jù)調(diào)研，發(fā)現(xiàn)雪球社區(qū)互動中表情的滲透率達到18%，表情的使用率比較高。而現(xiàn)有的表情年久失修，存在幾個比較明顯的問題，首先視覺風格陳舊辨識度低；再有，表情中原本存在一些股票梗的表現(xiàn)力較弱，畫風不夠有趣。第三，雪球誕生了新IP“呦呦”，非常適合在表情中應用來推廣雪球品牌特性。

基于以上背景我們展開了對于表情翻新改版的項目。

現(xiàn)狀&問題

通過對當前狀況進行系統(tǒng)梳理，我們發(fā)現(xiàn)了一些存在的問題。

1.設(shè)計風格陳舊，不易識別表現(xiàn)力弱：

目前線上雪球表情風格老舊，視覺表達不符合當下設(shè)計潮流趨勢；由于表情是白色在行文中表現(xiàn)力不足且不易被用戶識別，因而趣味性表達的作用不夠凸顯。

2.缺乏股票基金場景的情緒表達

社區(qū)場景中有大量的股票基金的討論和相關(guān)內(nèi)容的情緒表達，而目前表情體系中缺乏此類表達或表達不夠生動。

比如「關(guān)燈吃面」和「割肉」，在行文中一眼能識別到視覺主體是表情臉，而“吃面”和“割肉”的語義沒有生動的體現(xiàn)出來；還比如「跳水」又太具象和寫實，少了表情的趣味性。

3.沒有將雪球的新IP融入表情

雪球誕生了新的IP“呦呦”，表情的體系非常適合融入IP向的內(nèi)容，將IP表情化也更利于IP的推廣和品牌的傳播。

視覺風格探索

1.雪球用戶特征

設(shè)計風格需要根據(jù)平臺用戶特征進行確定。開始設(shè)計之前，我們先看看雪球用戶大概是什么樣的。

雪球的主要用戶為男性且集中在30-50歲左右，所以在視覺表現(xiàn)上盡量避免女性化或低齡化的風格。

2.視覺風格探索

風格確定

舊版的表情蒼白，雖然細節(jié)很多但在行文中難以識別，本次改版重要任務(wù)之一是改版新的視覺風格。emoji是最被用戶熟知的表情體系，我們決定新版向傳統(tǒng)黃臉emoji表情靠攏。大方向定了，但還需要確定視覺感受符合雪球的emoji。最后在兩種視覺風格中我們選擇了視覺感受偏中性、風格扁平的這個方向，這個風格和雪球用戶特征更契合。

提升辨識度

表情在交流中作為非文字的“語言”，其辨識度至關(guān)重要。表情在行文中的尺寸相對較小和單個文字差不多，那么如何保證在文字中依然能一眼讀懂表情？

在對表情整體風格的把控下，需要通過對細節(jié)的打磨和反復實驗，得出更有辨識度的設(shè)計方案。保持視覺扁平，盡量使用簡潔的幾何圖形，加強顏色對比度，減少顏色數(shù)量，放大表情特征。通過以上手段有效的提升了表情的一致性和在行文中的辨識度。

發(fā)現(xiàn)股民討論語境下的“梗”

本次表情升級除了對現(xiàn)有表情進行改造升級，還針對雪球社區(qū)特色進行挖掘。

1.挖掘“梗”

前面我們說到雪球用戶是集中在30-50歲左右的男性，那么這類人群在社區(qū)中有怎樣的表達特點呢？

通過觀察我們發(fā)現(xiàn)，在面對股市的波動和不確定性，雪球用戶更喜歡用幽默詼諧的論調(diào)來調(diào)侃市場以宣泄心中的無奈和負面情緒，同時在波動面前展現(xiàn)出一種堅韌和自嘲的心態(tài)。我們可以在這種“戲謔調(diào)侃”中挖掘可以視覺化的情緒和表情。以此作為本次表情升級的一個重要方向。

戲謔調(diào)侃的表情有哪些呢？我們挖掘了當下網(wǎng)絡(luò)社交流行的表情包和熱詞?；叵胍幌挛覀兪欠褚步?jīng)常使用類似“地鐵老人看手機”“黑人問號臉”等網(wǎng)絡(luò)熱圖來表達內(nèi)心的復雜情緒呢。

在變幻莫測的股市中，面對現(xiàn)實的無力和不確定，祈福求平靜成了股民表達情緒舒緩心情的一種方式，比如“敲木魚”“祈求大漲”等儀式感的情境以表情的方式呈現(xiàn)，也能一定程度上引起用戶的共鳴。

2.讓表情“淋漓盡致”

微表情盡顯“內(nèi)心戲”

一個表情里往往蘊含不只一種情感，短暫而難以察覺的面部變化最能傳達個體真實的情感狀態(tài)，一個眼神、嘴唇微動等細微變化，常常表達出個體內(nèi)在的真實狀態(tài)。

在設(shè)計“大哭”這個表情時，我們挖掘到大哭背后可能是某種“絕望”，那么觀察下人們絕望時最大的面部特點是不是空洞的眼神和僵硬的臉？用這樣的微表情和大哭結(jié)合在一起，感受大哭情緒的同時也傳遞了絕望的內(nèi)心戲。

賺了、虧了一目了然

股票社區(qū)中漲跌是永遠的話題，市場的漲跌背后牽動著的是股民們真金白銀的賬戶。“虧大了”和“暴富”這兩個表情很生動的表達了用戶盈虧的兩種處境，但原有表情的視覺表達過于保守和隱晦。要讓用戶一眼看到就產(chǎn)生共鳴，紅綠色是最直觀的漲跌信號，我們把這種語義和表情結(jié)合，“虧大了”除了表情沮喪還得加點綠色烘托氛圍，“暴富”的喜悅中再加上紅包加持情緒。

戲劇化表達

在某些極端情緒上我們還嘗試打破舊表情的禁錮，用更加生動夸張的方式呈現(xiàn)。比如“絕望”，只靠面部表情似乎無法充分的表達，所以我們營造了簡單的環(huán)境和肢體動作，一個癱在墻角雙目無神的小黃臉，絕望的形象躍然紙上。

3.股票專屬“梗”

雪球社區(qū)里有一些獨特的表情，比如“關(guān)燈吃面”，它是雪球老用戶傳承的經(jīng)典梗；還有諸如跳水、割肉、抄底、滿倉等股票術(shù)語梗也頗受歡迎。升級優(yōu)化這類表情的同時我們小開腦洞在原有基礎(chǔ)上增加了“好基友”等新梗，讓股民表達更豐富有趣。

IP表情化

去年雪球誕生了自己的IP“YOYO”，此次表情升級正好可以將IP表情化，在平臺應用和傳播。

YOYO所代表的品牌語義

1.福祿壽：因其原型是馴鹿，取福祿壽之意，代表財富；

2.溫暖陪伴&服務(wù)感：馴鹿具備天生的陪伴和服務(wù)感，與雪球強調(diào)的品牌服務(wù)感相契合。

YOYO品牌語義表情化

根據(jù)YOYO的兩種品牌語義，我們分別開腦洞。

哪些意向和財富相關(guān)呢？我們找到“錦鯉”“招財貓”“金元寶”，這些元素和表情相結(jié)合形成財富類表達；那么陪伴和服務(wù)感我們使用“抱抱”、“打call”這類溫暖鼓勵意向的肢體語言來和YOYO結(jié)合傳達。

寫在最后

此次表情改版我們不僅從視覺和交互體驗角度進行優(yōu)化升級，還通過挖掘平臺特征、用戶特征來探索表情更豐富的表達和更深層語義。通過本次升級希望助力雪球社區(qū)的互動性、豐富性、趣味性。引發(fā)用戶共鳴和更積極的互動，建立更強大的社區(qū)鏈接。

內(nèi)容指導 | @Zway @默默

內(nèi)容寫作｜@潔潔

排版編輯&優(yōu)化 | @丸子

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

評論(0) 瀏覽(421)

1 2 3 4 5 6

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://m.miumiuwan.com

首頁

圖表的作用

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

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

條形圖/柱狀圖

堆積條形圖/堆積柱狀圖

折線圖

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

散點圖/氣泡圖

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

餅圖/環(huán)形圖

樹狀圖

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

桑基圖

漏斗圖

瀑布圖

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

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

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

具體操作演示：

含義：

運用場景：

1. 區(qū)別：

2. 如何判斷該用哪個：

- 如果需要提供特定項目或字段的額外信息或解釋，可以使用i圖標。

- 如果需要提供整體上的幫助和支持，可以使用？圖標。

簡單總結(jié)一下

但是有一類場景會讓人有些摸不著頭腦，爭議點比較大（如下圖）

一、什么是泰斯勒定律 ？

二、泰斯勒定律在設(shè)計中的運用

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

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

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

三、總結(jié)

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

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

3、做競品分析

4、學習設(shè)計流程

5、學習設(shè)計工具

6、找設(shè)計資源

7、學習更好表達

8、搜索設(shè)計趨勢

9、幫忙寫PPT

10、組織活動流程

分類

日歷

鏈接

個人資料

存檔

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

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

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

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

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

- 如果需要提供特定項目或字段的額外信息或解釋，可以使用i圖標。

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

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

一、什么是泰斯勒定律？

二、泰斯勒定律在設(shè)計中的運用

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

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

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

三、總結(jié)

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

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

3、做競品分析

4、學習設(shè)計流程

6、找設(shè)計資源

7、學習更好表達

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

9、幫忙寫PPT