欧美亚洲免费久久久,无码人妻丰满熟妇精品区

首頁

212024-5

層級思維解構(gòu)圖標(biāo)分類體系

近年來，Ul設(shè)計(jì)行業(yè)蓬勃發(fā)展，圖標(biāo)設(shè)計(jì)風(fēng)格更是呈現(xiàn)出多元化的特點(diǎn)，各種新穎、創(chuàng)意的設(shè)計(jì)風(fēng)格層出不窮。圖標(biāo)樣式早已從潺潺溪水變成汪洋大海，通過系統(tǒng)歸納和整理各類常用的面性圖標(biāo)設(shè)計(jì)類型與風(fēng)格，我們構(gòu)建了一套體系化的記憶框架，使得在日常工作中能夠迅速且準(zhǔn)確地作出圖標(biāo)樣式的決策，從而有效提升設(shè)計(jì)效率與質(zhì)量。本文章主要討論近年UI界面中會經(jīng)常使用的圖標(biāo)風(fēng)格，線性圖標(biāo)樣式組成一般過于簡單，在此不做討論。

本文在探討圖標(biāo)的分類思維時(shí)，巧妙地運(yùn)用了層級理念，

并特別關(guān)注層級是否穿透這一關(guān)鍵因素來區(qū)分不同類型的圖標(biāo)。這種分類思維不僅使圖標(biāo)的辨識變得更為便捷，還有助于人們更輕松地形成深刻的記憶印象。通過這種創(chuàng)新性的分類方法，我們得以更清晰地理解圖標(biāo)的本質(zhì)與特點(diǎn)，進(jìn)一步提升我們對常用圖標(biāo)的認(rèn)知水平和應(yīng)用

評論(0) 瀏覽(502)

212024-5

B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識

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

1、

內(nèi)容總結(jié)

因?yàn)樵趯戇@個(gè)系列的文章時(shí)我加入了很多擴(kuò)展知識。希望告訴你更多。這里我會把主要的這個(gè)系列的知識總結(jié)一下讓你盡量一次看完。

B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識

1.1、登陸頁面

最近就在做我們系統(tǒng)的登陸頁面優(yōu)化?；仡^我會寫一個(gè)項(xiàng)目總結(jié)給你們看。這里介紹一下B端登陸頁面該怎么去做。其實(shí)還挺簡單了。因?yàn)楝F(xiàn)在主流的布局就那幾個(gè)。

登陸頁面：布局分為三種；居左、居右、居中

頁面元素：導(dǎo)航、登錄框、背景（裝飾元素）、互聯(lián)網(wǎng)信息。

導(dǎo)航

高度：68px或48px、文字大小：14（大部分）16（也可以）

登錄框

大?。捍笮〕叽绮唤y(tǒng)一、沒有固定的尺寸?？梢愿鶕?jù)自己和領(lǐng)導(dǎo)的喜好決定。對還有要承載的內(nèi)容多少。

登錄方式：掃碼、手機(jī)號、賬號、第三方

標(biāo)題切換字號：我喜歡用26px（也要其他的16、/18、/20）

輸入框高度：48px

按鈕文字和高度：16px、和輸入框高度一直就行。

背景

可以是配的插畫（這種最簡單）、一般都是科技風(fēng)

底部

要不就是單純的互聯(lián)網(wǎng)信息。要不就是快捷入口、聯(lián)系方式什么。這個(gè)就不多說了正常排版就行。

1.2、篩選

篩選相對是很簡單的部分把、因?yàn)槟阒苯佑靡?guī)范里的組件。雖然不會很優(yōu)秀、但是剛重要的是不會出什么錯誤。主要是就大廠規(guī)范能夠快速的幫你解決問題。

篩選的意義：定位數(shù)據(jù)、縮短查詢路徑、數(shù)據(jù)內(nèi)容分類

篩選類型：基礎(chǔ)篩選組件（就是我們常見的頁面頂部的篩選）、高級篩選（就是那些需要你定義想一想的篩選部分）

篩選布局：頂部和左側(cè)

篩選樣式：平鋪；折疊；Tab篩選；單側(cè)選擇；表頭；綜合

1.3、柵格

這里其實(shí)還簡單的、首先你要明白柵格在我們的設(shè)計(jì)里面很重要。你不用當(dāng)然也可以呀。但是你想要做的更好那就用起來你會有意外的收獲。

怎么用：直接看ant design、TDesign、阿科desing的規(guī)范就行、寫的很清楚。

注意點(diǎn)：不要硬套、我們要根據(jù)自己的系統(tǒng)去自己定制。比如我們系統(tǒng)、用的是ant design的框架、但是我們的網(wǎng)格系統(tǒng)是自己定制的。因而我們的邊距不是24px、我們是20px

1.4、顏色

這部分相對來說是我自己的弱項(xiàng)、在寫當(dāng)時(shí)的文章的時(shí)候也是收獲頗多的。明白了大廠規(guī)范是怎么確定自己色彩設(shè)計(jì)規(guī)范的。也清楚了自己應(yīng)該怎么去規(guī)定自己的設(shè)計(jì)規(guī)范。

主色確定：常見的方法、1、用自己品牌logo的顏色；2、用行業(yè)色

配色確定：我一般是找競品、或者優(yōu)秀的配色方案、來確定自己的。多參考大廠的配色方案。雖然不全是好的。但是好的還是站大多數(shù)的。

大廠色彩：這里我分享了大廠的色彩是怎么去確定的、如何去確定?？梢匀タ纯?。我在自己的工作中色彩的應(yīng)用就參考了ant Design的色彩應(yīng)用方式定制的。

1.5、字體

字體部分我覺得最有意思是的是分享了、我們宋體、楷體、隸屬、甲骨的發(fā)展歷史和由來。還有就是如何去設(shè)計(jì)一款自己的字體。還有后臺字體規(guī)范的制定

中國文字：這里中國文字的發(fā)展歷史、所有字體的產(chǎn)生都是有自己發(fā)展的歷史原因的。很有意思。建議你看看、可以當(dāng)做你喝酒吹水的談資。

字體規(guī)范：我們大部分的字體會采用黑體、可讀性強(qiáng)、親和、現(xiàn)代、清晰。

字號：最新的字體12px、正文、14px、通過+2， +4，+8，+12，+16 的步數(shù)增長規(guī)律

行高：通過邏輯得到這樣一個(gè)公式：「行高 = 字號 + n 」，8 作為變量正好同時(shí)滿足與 1.5 倍的「 14px & 16px 」常用字號行高保持一致，總體文字間隙穩(wěn)定呼吸，行高空間較一致得出計(jì)算公式：「line-height = font size+8」

字重（就是字粗）：建議使用兩種常規(guī)和加粗（在前端里一般就是400和500）

顏色：我是主張帶有色彩傾向的顏色應(yīng)用的。根據(jù)字體樣式的設(shè)計(jì)原則，制定了簡易好記的透明度數(shù)值區(qū)間并且將該字色與界面系統(tǒng)的色彩系統(tǒng)結(jié)合，文字顯示色彩對比滿足至少1:4.5( AA級別）。且驗(yàn)證了其中的實(shí)用性，共分為亮暗兩種模式，4 個(gè)色階。

1.6、ICON（圖標(biāo)）

你要統(tǒng)一風(fēng)格成套的去找參考和應(yīng)用。在我們的系統(tǒng)里我是自己畫icon的然后傳到阿里巴巴矢量圖庫讓開發(fā)直接引用。這個(gè)是自己累點(diǎn)、但是可以保障實(shí)現(xiàn)效果。

設(shè)計(jì)原則：準(zhǔn)確、簡單、節(jié)奏、愉悅。

設(shè)計(jì)實(shí)戰(zhàn)：采用柵格

我是用的阿里巴巴矢量圖庫的設(shè)計(jì)規(guī)范、因?yàn)槲乙獋鞯竭@個(gè)平臺應(yīng)用

ICON分類：交互性圖標(biāo)、裝飾性圖標(biāo)、說明性圖標(biāo)

1.7、按鈕

按鈕我覺得這部分是相對簡單的、也是要做到風(fēng)格的統(tǒng)一。直接用大廠組件然后根據(jù)自己平臺的風(fēng)格、不如圓角的大小其他的倒是沒什么了。

常規(guī)按鈕：次要按鈕、主要按鈕、文字按鈕、圖標(biāo)按鈕

按鈕狀態(tài)：可用、禁用、加載、懸浮

尺寸：把按鈕分成：迷你、小、中、大，四種尺寸。高度分別為：24px/28px/32px/36px。推薦及默認(rèn)為尺寸「中」。

樣式：各個(gè)規(guī)范對按鈕形狀的規(guī)范基本都一樣。提供長方形、正方形、圓角長方形、圓形四種形狀。

布局：這里分享了兩個(gè)概念、古登堡法則、費(fèi)茨定律、告訴你我們?yōu)槭裁催@么排版。對產(chǎn)品和甲方很有用、哈哈、這是我的秘訣。

1.8、彈窗

后臺彈窗是一個(gè)很復(fù)雜的內(nèi)容、但是也是一個(gè)相對很好處理的部分。只要你做好規(guī)范這部分、簡直就是一點(diǎn)開胃小菜。

彈窗是一個(gè)我頭痛的問題因?yàn)椴惶靡?guī)范。但是我還是把這個(gè)彈窗系統(tǒng)、在我們的體系中形成了一個(gè)小的規(guī)范。感謝領(lǐng)導(dǎo)、感謝前段端的龍哥。

我們把前段粗略的分為400px、600、800、1000、最大、廣告。業(yè)務(wù)里我們會采用4、/6、/8、/1、最大、推廣和通知我們就統(tǒng)一的尺寸。

1.9、表單

什么是表單：我理解表單就是系統(tǒng)為和用戶進(jìn)行交互、所要收集用戶信息的或獲得用戶反饋的一種方式的載體。在后臺產(chǎn)品中對我們數(shù)據(jù)做的增、刪、改、查、驗(yàn)都可以通過表單完成。

我們在后臺系統(tǒng)中、大部分的場景都會使用上表單。信息采集呀、編輯數(shù)據(jù)呀等。在表單設(shè)計(jì)時(shí)要遵循的原則、簡潔明了、清晰高效、適應(yīng)業(yè)務(wù)、即時(shí)反饋。

表單的構(gòu)成結(jié)構(gòu)、基本都是由、標(biāo)簽、域、提示、操作按鈕這四個(gè)部分構(gòu)成的。

表單布局在表單中我們采用多種布局方式。信息分組、內(nèi)容列表、標(biāo)簽頁、分步驟。

1.10、表格

B端設(shè)計(jì)中，對數(shù)據(jù)瀏覽、操作、過濾、展示是最高效的。這你就不用質(zhì)疑了。因?yàn)榻Y(jié)構(gòu)簡單、精準(zhǔn)高效、數(shù)據(jù)形式豐富。

表格是用來收集、整理、組織、分析數(shù)據(jù)的二維矩陣。它由內(nèi)、外兩部分組成。其中，內(nèi)部包含表頭、表體、底欄等。外部包含標(biāo)題、篩選區(qū)、操作按鈕區(qū)等。

表格的類型：基礎(chǔ)表格、樹形、子表格、交叉表格、圖表表格、卡片表格

表格的樣式：網(wǎng)格型、水平線型、斑馬紋、自由形式

進(jìn)階的一些知識就是表格數(shù)據(jù)的優(yōu)化和表格的交互知識了。想了解去看更詳細(xì)的我的文章11表格設(shè)計(jì)和12表格優(yōu)化項(xiàng)目實(shí)戰(zhàn)。

1.11、大廠規(guī)范

如果你是一個(gè)小廠B端設(shè)計(jì)師、剛好沒有自己平臺的設(shè)計(jì)規(guī)范。那就去直接用的場的設(shè)計(jì)規(guī)范。去用沒問題的。大廠那么多的牛逼設(shè)計(jì)給你做好了你不用。都塞到嘴巴上、不吃就不給面了。

在使用大廠的設(shè)計(jì)規(guī)范時(shí)然后慢慢的積累自己平臺的設(shè)計(jì)規(guī)范。逐漸的你就會形成一個(gè)屬于你們自己平臺業(yè)務(wù)的高質(zhì)量設(shè)計(jì)規(guī)范了。

2、計(jì)劃

這個(gè)基礎(chǔ)系列的文章就這樣寫結(jié)束掉吧、希望可以對你的B端設(shè)計(jì)有所幫助。之后我會寫二個(gè)系列的文章、去分享我理解的B端設(shè)計(jì)。

第一個(gè)系列是B端基礎(chǔ)設(shè)計(jì)的加強(qiáng)版、B端高手。B端高手是會寫我的實(shí)戰(zhàn)里是怎么去做的。其實(shí)就是我的設(shè)計(jì)項(xiàng)目復(fù)盤。

第二個(gè)系列就隨便的去分享一些設(shè)計(jì)知識。比如哪些什么什么原理呀、什么什么法則呀、在設(shè)計(jì)里的應(yīng)用。而且會提出和討論一些設(shè)計(jì)問題。

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

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

評論(0) 瀏覽(466)

202024-5

設(shè)計(jì)原則之一致性

前端達(dá)人

一、什么是一致性呢？

二、為什么一致性很重要呢？

三、生活中一致性的案例

四、 UI設(shè)計(jì)一致性的體現(xiàn)

五、交互設(shè)計(jì)一致性的體現(xiàn)

六、總結(jié)

一、什么是一致性呢？

一致性的字面意思和使用的場景不同代表的含義也會有區(qū)別，這里主要使用在UI/UX設(shè)計(jì)中。

UI/UX設(shè)計(jì)中一致性是指在整個(gè)應(yīng)用程序或網(wǎng)站中使用相同的設(shè)計(jì)元素和模式。它涉及在所有頁面和屏幕上使用相同的視覺語言、布局和交互，以創(chuàng)造一致且直觀的用戶體驗(yàn)。一致性有助于用戶了解如何瀏覽應(yīng)用程序或網(wǎng)站，消除困惑和沮喪，并使他們更容易學(xué)習(xí)和記住如何使用產(chǎn)品。

設(shè)計(jì)并非孤立的實(shí)踐。它與其他領(lǐng)域交織在一起，其中之一就是心理學(xué)。在設(shè)計(jì)中發(fā)揮根本作用的心理學(xué)原理是重復(fù)定律。

這一定律的起源可以追溯到 20 世紀(jì)早期，當(dāng)時(shí)德國心理學(xué)家赫爾曼·艾賓浩斯進(jìn)行了開創(chuàng)性的研究。他的工作對理解人類記憶具有革命性意義。艾賓浩斯最著名的貢獻(xiàn)是“遺忘曲線”，它表明如果不嘗試保留信息，信息會隨著時(shí)間的推移而丟失。然而，他還發(fā)現(xiàn)，反復(fù)接觸信息會極大地影響我們記憶信息的能力。從本質(zhì)上講，重復(fù)可以強(qiáng)化回憶。

艾賓浩斯的重復(fù)實(shí)驗(yàn)主要關(guān)注學(xué)習(xí)和記憶的過程，但其影響遠(yuǎn)不止于此。這讓人們認(rèn)識到，重復(fù)的元素更容易被記住，從而引導(dǎo)觀眾的注意力和焦點(diǎn)。很明顯，重復(fù)可以用來引導(dǎo)行為和理解。

通過重復(fù)顏色、形狀和圖案等特定元素，設(shè)計(jì)師可以創(chuàng)造一種統(tǒng)一感和節(jié)奏感。這種重復(fù)還使設(shè)計(jì)師能夠強(qiáng)調(diào)基本元素或信息。

重復(fù)不僅僅是一種設(shè)計(jì)原則，更是生活的一個(gè)基本方面。在自然界中，重復(fù)以各種方式體現(xiàn)，從雪花的對稱性到海浪拍打海岸的韻律圖案，從貝殼的螺旋到一年四季的循環(huán)。這種自然的重復(fù)帶來了節(jié)奏、結(jié)構(gòu)和可預(yù)測性，創(chuàng)造了一種舒適和熟悉的感覺。

人類是自然的一部分，天生就能夠識別和響應(yīng)這些模式。我們的大腦是出色的模式識別機(jī)器，我們傾向于認(rèn)為重復(fù)的模式令人感到舒適和熟悉。這種認(rèn)知特征解釋了為什么設(shè)計(jì)中的重復(fù)模式（無論是在數(shù)字界面、實(shí)體產(chǎn)品、建筑還是營銷中）會引起我們的共鳴。

二、為什么一致性很重要？

在 iOS 的設(shè)計(jì)指南中，一致性被視為讓設(shè)計(jì)融入 iOS 生態(tài)的關(guān)鍵，它幫助用戶在不同應(yīng)用間建立起一種熟悉感。遵循規(guī)范的一致性可以「help your design feel at home in iOS」，保持一致性是為用戶帶來產(chǎn)品愉悅感的重要方式。

在經(jīng)典交互設(shè)計(jì)原則中，「一致性」一直是重要的設(shè)計(jì)準(zhǔn)則。在幾乎可以稱為「設(shè)計(jì)師必讀」的雅各布·尼爾森的十條可用性原則中，一致性（Consistency and standards）位列第四，原則建議設(shè)計(jì)者在界面和交互上遵循既定的規(guī)則，無論是在應(yīng)用內(nèi)部還是跨平臺之間。

在具體的執(zhí)行中，內(nèi)部一致性通常指應(yīng)用內(nèi)應(yīng)當(dāng)使用統(tǒng)一的視覺風(fēng)格和交互語言，相同的功能和操作應(yīng)該在體驗(yàn)上保持一致。而外部一致性則更強(qiáng)調(diào)用戶應(yīng)該遵循平臺和系統(tǒng)的設(shè)計(jì)規(guī)范，保持用戶在同一平臺不同應(yīng)用間體驗(yàn)的相似性。

一致性在UI/UX（用戶界面/用戶體驗(yàn)）中非常重要，因?yàn)樗鼘τ谔峁┝己玫挠脩趔w驗(yàn)和用戶界面的可用性至關(guān)重要。下面詳細(xì)說明一致性的幾個(gè)重要原因：

1、用戶學(xué)習(xí)曲線：

一致的UI/UX設(shè)計(jì)可以降低用戶的學(xué)習(xí)曲線。當(dāng)用戶在應(yīng)用程序或網(wǎng)站中遇到一致的元素、布局和交互方式時(shí)，他們可以快速理解并準(zhǔn)確預(yù)測如何與界面進(jìn)行交互。這減少了用戶的混淆和困惑，提高了他們的效率和滿意度。

2、提升可用性：

一致性使用戶界面更加易于使用。當(dāng)用戶在不同的頁面或功能之間找到相似的設(shè)計(jì)元素和交互模式時(shí)，他們可以輕松地將已有的知識和經(jīng)驗(yàn)應(yīng)用于新的情境中。這種一致性幫助用戶快速完成任務(wù)，減少錯誤和迷失，提供更好的導(dǎo)航和流暢的體驗(yàn)。

3、品牌認(rèn)可度：

一致的UI/UX設(shè)計(jì)有助于樹立品牌形象和增強(qiáng)品牌認(rèn)可度。通過在不同的渠道和平臺上保持一致的設(shè)計(jì)元素、標(biāo)識和視覺風(fēng)格，品牌可以建立起獨(dú)特而可識別的形象。用戶在不同的觸點(diǎn)上都能感受到品牌的一致性，從而增加品牌的信任和忠誠度。

4、用戶滿意度：

一致性直接影響用戶的滿意度。當(dāng)用戶在使用應(yīng)用程序或網(wǎng)站時(shí)感受到一致的設(shè)計(jì)和交互方式時(shí)，他們會感到更加舒適和自信。一致性傳遞了專業(yè)和質(zhì)量的信號，讓用戶感到被關(guān)注和重視。這種積極的用戶體驗(yàn)有助于提升用戶滿意度，并促使他們持續(xù)使用和推薦你的產(chǎn)品或服務(wù)。

三、生活中一致性的案例

生活中的案例保持一致性的有很多，

a、例如紅綠燈，在學(xué)習(xí)駕照或老師教學(xué)時(shí)會統(tǒng)一講解紅燈停，綠燈行。

b、向左向右箭頭符號的使用，在日常生活中都會保持一致。

c、我們乘坐地鐵時(shí)，地鐵的線路圖也會保持一致性，每個(gè)站的點(diǎn)大小，文字，到站和未到站以及行駛過的站點(diǎn)都有清晰統(tǒng)一的設(shè)計(jì)和交互操作。

四、 UI設(shè)計(jì)一致性的體現(xiàn)

1、顏色

顏色是一種物理現(xiàn)象和感官體驗(yàn),是光波在人眼視網(wǎng)膜上的反射或吸收所形成的視覺效果。

設(shè)計(jì)中的顏色選擇代表了一個(gè)項(xiàng)目的品牌，例如常見的餓了么藍(lán)，美團(tuán)的黃，京東的紅等等，顏色的一致性有助于營造良好的視覺體驗(yàn),強(qiáng)化品牌形象,提升可用性和無障礙性,最終改善用戶的整體交互感受。這對于產(chǎn)品的成功至關(guān)重要。在設(shè)計(jì)時(shí)顏色（品牌色）會延續(xù)到按鈕，圖標(biāo)，字體、標(biāo)簽，背景，banner等模塊使用。

2、字體

字體是一種特定的文字樣式,它描述了文字的形狀、大小、粗細(xì)、間距等視覺特征。

字體是設(shè)計(jì)中非常重要的元素之一，不同類型的字體，字體的粗細(xì)，有襯線字體和有襯線字體，字體的字重等，這些不一致會造成頁面混亂，字體的選擇和使用會對用戶的視覺體驗(yàn)、信息感知、品牌聯(lián)系和情感體驗(yàn)產(chǎn)生重要影響。

開發(fā)實(shí)現(xiàn)上如果字體使用較多，會影響加載速度，沒有統(tǒng)一的字體制定規(guī)則后期更新迭代也會比較繁瑣，造成資源浪費(fèi)。

3、圖標(biāo)

圖標(biāo)是一種簡化的、具有視覺表現(xiàn)力的符號圖形,在用戶界面設(shè)計(jì)、信息傳達(dá)等領(lǐng)域廣泛應(yīng)用。

在眾多APP中，常使用APP的你肯定可以感受到，圖標(biāo)除了準(zhǔn)確的表達(dá)某個(gè)含義，還需要在設(shè)計(jì)時(shí)保持一致性，圖標(biāo)的大小，設(shè)計(jì)的風(fēng)格例如線型圖標(biāo)、填充圖標(biāo)、簡約圖標(biāo)、立體圖標(biāo)、卡通圖標(biāo)等，如果這些圖標(biāo)風(fēng)格進(jìn)行混合使用就會造成混亂，影響用戶體驗(yàn)，看起來很不專業(yè)也會影響用戶使用時(shí)對于安全性的擔(dān)憂。

4、按鈕樣式

按鈕是一種常見的交互界面元素,用于觸發(fā)某種操作或功能。

設(shè)計(jì)中的按鈕有很多樣式，因?yàn)轫?xiàng)目類型的不同按鈕樣式也不同，按鈕的樣式有圓形按鈕，矩形按鈕，圓角矩形按鈕，菱形按鈕等，同一個(gè)項(xiàng)目中建議使用統(tǒng)一的按鈕樣式，除了可以體現(xiàn)專業(yè)性，還可以讓用戶增加信任度，按鈕樣式使用很多，用戶除了使用體驗(yàn)不友好，還會覺得是不是跳出了這個(gè)產(chǎn)品去到了另一個(gè)地方。

5、排版

排版是指在印刷或數(shù)字媒體中,對文本、圖像等內(nèi)容進(jìn)行有規(guī)則的布局和格式化的過程。

設(shè)計(jì)中排版的一致性，使用戶能夠快速適應(yīng)和理解界面的結(jié)構(gòu)，降低學(xué)習(xí)成本，用戶對于熟悉的排版模式產(chǎn)生更強(qiáng)烈的歸屬感和安全感，使內(nèi)容更易讀，用戶可以依照熟悉的視覺動線快速找到所需信息，提高信息獲取效率。

五、交互設(shè)計(jì)一致性的體現(xiàn)

1、操作一致

根據(jù)文字意思就是用戶才操作時(shí)候的流程保持一致，操作保持一致，例如大家常見的下單購買商品流程，

用戶在購買商品時(shí)：點(diǎn)擊商品——商品詳情——付款購買，其他商品也應(yīng)該是這樣流程，

如果每個(gè)商品流程不同就會很亂，例如：

點(diǎn)擊A商品————商品詳情——付款購買；

點(diǎn)擊B商品——付款購買——查看商品詳情；

點(diǎn)擊C商品——同類商品列表——商品詳情——付款購買，

這樣就會很亂，用戶不知道點(diǎn)擊下一個(gè)商品會是什么樣子。

例如：

1、APP中的視頻瀏覽是上下滑動，進(jìn)入新的模塊后視頻瀏覽變成了左右滑動。

2、需要確認(rèn)某些操作時(shí)，確認(rèn)按鈕一會在右側(cè)，一會確認(rèn)又在左側(cè)。

用戶在操作時(shí)會除了體驗(yàn)很亂，也很難培養(yǎng)用戶習(xí)慣。

2、文案符號一致

文案和標(biāo)點(diǎn)符號的一致比較好理解，例如常見的輸入框，“請您輸入帳號”，“請輸入你的密碼”，同一頁面場景下文案和稱呼不統(tǒng)一，會造成用戶操作遲疑，是不是這個(gè)不重要才用了“你”，重要的才用“您”，為了避免用戶進(jìn)行不必要的思考文案保持一致，符號亦是如此。

3、反饋一致

當(dāng)我們看到下一步按鈕時(shí)，有些地方交互是進(jìn)入了新的頁面，有的是分步式使用。建議使用一種保持統(tǒng)一，避免用戶產(chǎn)生誤導(dǎo)。

操作反饋后的彈窗，相同功能反饋的彈窗樣式不一致：一會是圖文彈窗，一會純文字提示，用戶也會很亂，包括交互時(shí)出現(xiàn)的樣式也需要保持一致，劇中或從下向上彈出。

六、總結(jié)

一致性在UI/UX中的重要性在于提供清晰、高效、易用和令人愉悅的用戶體驗(yàn)。通過保持設(shè)計(jì)元素、布局和交互方式的一致性，可以降低用戶的認(rèn)知負(fù)荷，提高用戶的學(xué)習(xí)效率，增強(qiáng)品牌形象，提升用戶滿意度，并最終實(shí)現(xiàn)更好的業(yè)務(wù)成果，詳細(xì)分為以下七點(diǎn)：

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

評論(0) 瀏覽(553)

202024-5

常見的B端彈窗樣式設(shè)計(jì)總結(jié)

前端達(dá)人

B 端產(chǎn)品的業(yè)務(wù)場景通常比 C 端更為復(fù)雜，因此在進(jìn)行產(chǎn)品設(shè)計(jì)時(shí)對信息的處理方式也需要根據(jù)不同的業(yè)務(wù)場景進(jìn)行設(shè)計(jì)。今天主要聊一下 B 端產(chǎn)品設(shè)計(jì)中彈窗設(shè)計(jì)。

彈窗的定義

彈窗是展現(xiàn)在用戶操作界面之上的容器，在 X 軸和 Y 軸的平行空間之上擴(kuò)展了頁面的高度。是系統(tǒng)與用戶之間建立聯(lián)系非常重要的組成部分。它通常在用戶進(jìn)行特定操作或訪問特定頁面功能時(shí)彈出，目的是向用戶展示某些信息、提供選擇或執(zhí)行某些操作。

彈窗使用場景

需要呈現(xiàn)的內(nèi)容篇幅相對較少。
常用于針對某些內(nèi)容進(jìn)行補(bǔ)充說明、需要用戶處理關(guān)鍵信息、重要的警告提示等。
通常是由系統(tǒng)觸發(fā)（用戶被動接受）。
彈窗整體高度和寬度不做絕對的標(biāo)準(zhǔn)或規(guī)定，可以根據(jù)內(nèi)容篇幅的多少和視覺的平衡度來確定，整體規(guī)范保持一致即可。

總體概括為簡單和復(fù)雜兩個(gè)場景。

一、場景簡單

場景簡單包括：全局提示、氣泡確認(rèn)框、警告提示、通知提醒框，通常是操作確認(rèn)和系統(tǒng)內(nèi)部自動觸發(fā)性提示時(shí)使用。

1. 全局提示

以 toast 提示居多，通常在頁面中間偏上的位置。

2. 氣泡提示

用于解釋難理解的功能名詞或者由于版面限制文字展示不完，利用氣泡來展示。

3. 警告提示

用于重點(diǎn)內(nèi)容的警告提醒，降低用戶犯錯概率，提升用戶的使用體驗(yàn)。

4. 提示性通知彈窗：

位置相對固定，通常出現(xiàn)在需要介紹說明的功能旁邊或者居頁面中間展示。

例如，當(dāng)系統(tǒng)發(fā)生重要更新維護(hù)或者重點(diǎn)功能引導(dǎo)時(shí)，可以顯示一個(gè)提示性通知彈窗，告知用戶當(dāng)前狀態(tài)。

類型主要包括以下三種：

舉例：

有贊后臺頁面

二、場景復(fù)雜

1. 場景復(fù)雜｜全屏彈窗

新開頁簽（瀏覽器

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

評論(0) 瀏覽(526)

172024-5

比GIF更好用的Lottie動畫是什么？

前端達(dá)人

不知道大家有沒有這樣的困擾，每次制作GIF圖的時(shí)候，難免會出現(xiàn)邊緣鋸齒，就算加上白邊之后，在夜晚模式的時(shí)候鋸齒就更明顯了。除此之外，GIF圖對于漸變填充的呈現(xiàn)也很糟糕，會出現(xiàn)漸變斷層的情況，看起來很不自然。

最讓人難以接受的情況是：

稍微把動畫做流暢一些，GIF的文件大小就變得巨大無比。

在2017年的時(shí)候，一款比GIF動畫更好用的動畫圖片格式誕生了?。?！

那就是我們今天將要介紹的Lottie動畫。

什么是Lottie動畫？

Lottie動畫是一種基于 JSON 的動畫文件格式，允許在任何平臺上發(fā)送動畫，就像發(fā)送圖片一樣輕松。Lottie是可在任何設(shè)備上運(yùn)行的小文件，并且可以放大或縮小而不會出現(xiàn)鋸齒的一種動畫格式。

相較于其他動圖格式，Lottie有哪些優(yōu)點(diǎn)？

①文件大小

和GIF、Apng 或 MP4 等其他格式相比，Lottie 動畫要小得多，同時(shí)保持相同的動畫表現(xiàn)，甚至更流暢。

②無線擴(kuò)展

Lottie動畫是基于矢量設(shè)計(jì)制作的，這意味著可以隨意放大或縮小它們，而不必?fù)?dān)心分辨率的大小導(dǎo)致的鋸齒問題。放大無數(shù)倍也是清晰如初。

③支持多平臺

對于所有開發(fā)人員來說，Lottie動畫的交接非常簡單?，F(xiàn)在我們可以在 iOS、Android、Web 和 React Native 上使用 Lottie 動畫，也不需要修改。使用和調(diào)用都非常方便。

④可交互

在 Lottie 動畫中，動畫元素可以設(shè)計(jì)為可交互組件，用戶可以操縱它們進(jìn)行交互，實(shí)現(xiàn)滾動、單擊和懸停等交互效果。這是GIF、Apng和MP4等動畫文件都沒辦法做到的。

怎么設(shè)計(jì)制作Lottie動畫呢？

目前，Lottie官網(wǎng)提供了很多動效設(shè)計(jì)軟件的插件供大家使用和下載。目前下面這些設(shè)計(jì)軟件可以在官網(wǎng)下載到Lottie動畫的導(dǎo)出插件。

其中，Lottie Creator是Lottie官方的網(wǎng)頁版動畫制作工具，登錄官網(wǎng)就可以使用。

Lottie官網(wǎng)地址

https://lottiefiles.com

說了這么多Lottie的優(yōu)點(diǎn)，其實(shí)Lottie也是有短板的。比如說，AE里面的fx效果，Lottie就全部不支持，另外復(fù)合路徑動畫等等動效效果也不支持。

為了方便大家快速上手Lottie動畫，作者把Lottie支持的效果整理歸類成了幾張圖片，方便大家制作的時(shí)候快速查閱。

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

評論(0) 瀏覽(602)

172024-5

B端后臺管理界面設(shè)計(jì)欣賞

前端達(dá)人

在現(xiàn)代企業(yè)中，B端后臺管理界面設(shè)計(jì)是提升工作效率和用戶體驗(yàn)的關(guān)鍵因素。本文將通過UI設(shè)計(jì)公司提供的優(yōu)秀案例，探討如何優(yōu)化后臺管理界面的設(shè)計(jì)，提升用戶的使用體驗(yàn)。

1. 界面簡潔，功能齊全

一個(gè)優(yōu)秀的B端后臺管理界面，首先應(yīng)具備簡潔明了的設(shè)計(jì)風(fēng)格。UI設(shè)計(jì)公司在設(shè)計(jì)過程中，通常會通過簡潔的布局和清晰的導(dǎo)航，幫助用戶快速找到所需功能。例如，藍(lán)藍(lán)設(shè)計(jì)公司就采用了極簡設(shè)計(jì)原則，在保持美觀的同時(shí)，確保用戶能夠高效操作。

2. 交互設(shè)計(jì)人性化

人性化的交互設(shè)計(jì)是提升用戶體驗(yàn)的關(guān)鍵。UI設(shè)計(jì)公司會根據(jù)用戶的使用習(xí)慣和需求，設(shè)計(jì)直觀的操作流程和反饋機(jī)制。例如，通過在重要操作后提供即時(shí)反饋，減少用戶操作的疑惑和錯誤。

3. 數(shù)據(jù)可視化

對于后臺管理界面來說，數(shù)據(jù)可視化是不可或缺的一部分。通過圖表、儀表盤等可視化工具，用戶可以直觀地了解業(yè)務(wù)數(shù)據(jù)，從而做出更好的決策。UI設(shè)計(jì)公司通常會使用最新的數(shù)據(jù)可視化技術(shù)，幫助用戶快速理解復(fù)雜的數(shù)據(jù)。

4. 響應(yīng)式設(shè)計(jì)

隨著移動設(shè)備的普及，響應(yīng)式設(shè)計(jì)變得尤為重要。優(yōu)秀的B端后臺管理界面應(yīng)能夠在不同設(shè)備和屏幕尺寸下保持良好的使用體驗(yàn)。UI設(shè)計(jì)公司會在設(shè)計(jì)時(shí)考慮多種終端的兼容性，確保界面在手機(jī)、平板和電腦上都能流暢運(yùn)行。

5. 安全性與穩(wěn)定性

后臺管理界面涉及大量敏感數(shù)據(jù)，安全性和穩(wěn)定性是設(shè)計(jì)過程中不可忽視的因素。UI設(shè)計(jì)公司在設(shè)計(jì)時(shí)會采用多層次的安全措施，保障數(shù)據(jù)的安全，同時(shí)通過優(yōu)化代碼和服務(wù)器配置，確保系統(tǒng)的穩(wěn)定性和高效性。

通過以上幾個(gè)方面的優(yōu)化，UI設(shè)計(jì)公司能夠打造出高效、美觀、易用的B端后臺管理界面，助力企業(yè)提升管理水平和工作效率。希望這些優(yōu)秀案例能為你的設(shè)計(jì)工作提供一些啟發(fā)和參考。

評論(0) 瀏覽(756)

162024-5

當(dāng)你設(shè)計(jì)時(shí)，你應(yīng)該思考些什么

資深UI設(shè)計(jì)者

寫這篇文章的目的，既是整理自己平時(shí)的一些思考和想法，以輸出的形式來加強(qiáng)記憶；也是希望文中所寫的點(diǎn)能夠給大家?guī)硪恍椭?/p>

評論(0) 瀏覽(488)

162024-5

PC端的頁面設(shè)計(jì)，如何優(yōu)雅呈現(xiàn)在移動端

前端達(dá)人

電商boss系統(tǒng)采購訂單頁面在移動端呈現(xiàn)，我做了哪些思考？

PC端的頁面設(shè)計(jì)，如何優(yōu)雅呈現(xiàn)在移動端？

在B端UI/UX設(shè)計(jì)領(lǐng)域，我們常常會遇到類似的需求：隨著業(yè)務(wù)的發(fā)展，需要將復(fù)雜系統(tǒng)中的核心功能摘出來，并在小程序或移動應(yīng)用上呈現(xiàn)，以便客戶能夠便捷地使用和操作，從而提升工作效率。然而，實(shí)際操作中我們會發(fā)現(xiàn)，盡管對這些功能很熟悉，但是落地過程中卻會遇到一系列問題。

本文中，將分享我在將復(fù)雜電商BOSS系統(tǒng)的訂單頁面呈現(xiàn)在移動端的設(shè)計(jì)過程，希望對大家有所幫助。通過本文，您將了解到以下內(nèi)容：

1、如何在設(shè)計(jì)過程中充分考慮電腦端和移動端用戶的需求和使用習(xí)慣；

2、如何將復(fù)雜的訂單頁面優(yōu)化為簡潔、易用的移動端界面；

3、針對移動端的限制和挑戰(zhàn)，如何進(jìn)行設(shè)計(jì)決策和權(quán)衡；

4、使用哪些有效的UX技巧來提升用戶體驗(yàn)和工作效率。

一、深入分析業(yè)務(wù)背景和使用場景

1、業(yè)務(wù)背景關(guān)系梳理

選款的零售商客戶通過衫海精選款下單后，訂單信息和訂單狀態(tài)會傳到BOSS后臺，相關(guān)負(fù)責(zé)人可隨時(shí)查看并處理。

2、為什么需要在移動端呈現(xiàn)？

為了確保平臺高效履約，需要市場部同事隨時(shí)掌握訂單狀態(tài)，特別是

發(fā)貨即將超時(shí)、攬收即將超時(shí)、發(fā)貨已超時(shí)和攬收已超時(shí)

的訂單，以便及時(shí)通知上下游。但是由于工作性質(zhì)，他們無法隨時(shí)坐在電腦面前，所以需要在小程序上呈現(xiàn)訂單信息，可以讓市場部同事隨時(shí)查看并處理訂單，避免出現(xiàn)訂單超時(shí)，客戶投訴的情況。

二、功能拆解

1、將電腦端訂單內(nèi)容拆分重組，信息歸類

2、訂單功能拆分后，主要分為以下四個(gè)部分

1）訂單狀態(tài)

訂單狀態(tài)包括：全部、待付款、備貨中、待收貨、已完成、已關(guān)閉。全部狀態(tài)下

新訂單、售后中、發(fā)貨即將超時(shí)、攬收即將超時(shí)、發(fā)貨已超時(shí)、攬收已超時(shí)

的訂單類型需要重點(diǎn)露出，方便快速查詢。

設(shè)計(jì)差異：

1、訂單狀態(tài)：電腦端大屏橫向可以全部平鋪展示；移動端則是橫向滑動。

2、售后中、發(fā)貨即將超時(shí)、攬收即將超時(shí)、發(fā)貨已超時(shí)、攬收已超時(shí)的訂單快捷入口，電腦端大屏可以全部平鋪展示；移動端則需要換行，這里不做橫向滑動是因?yàn)闀绊懹脩舻牟僮餍?/div>

2）訂單查詢條件

訂單查詢條件包括：訂單編號、時(shí)間排序、商品名稱、供應(yīng)商名稱、下單時(shí)間、訂單狀態(tài)、履約方、SKU編碼、商品ID、是否缺貨、所屬云倉等等。

設(shè)計(jì)思考：

分析用戶日常的使用習(xí)慣，對高頻操作的篩選項(xiàng)進(jìn)行提煉在移動端展示，提升使用效率。低頻操作則不在移動端展示。

經(jīng)過與業(yè)務(wù)方溝通，訂單編號、時(shí)間排序、商品名稱、供應(yīng)商名稱、下單時(shí)間、訂單狀態(tài)、履約方的使用頻次相對較多，

訂單編號、時(shí)間排序

使用頻次最高。

a、訂單編號/排序時(shí)間

設(shè)計(jì)差異：

1、訂單編號查詢：電腦端和移動端都是直接輸入，但是電腦端支持批量查詢，單次查詢內(nèi)容會更多。

2、下單時(shí)間排序：電腦端采用input框的樣式，下拉篩選；移動端是通過點(diǎn)擊切換排序方式，操作會更便捷。

b、商品/供應(yīng)商查詢

設(shè)計(jì)思考：

1、商品查詢：電腦端、移動端都是直接輸入；

2、供應(yīng)商查詢：電腦端采用input框的樣式，下拉篩選；移動端則是進(jìn)入新的頁面進(jìn)行選擇；兩者都支持關(guān)鍵字搜索；

移動端不直接展開的原因是：供應(yīng)商數(shù)量多，在當(dāng)前頁面展示篇幅較長，還涉及到分頁，會影響用戶的操作體驗(yàn)。

c、時(shí)間查詢

設(shè)計(jì)差異：

電腦端點(diǎn)擊出現(xiàn)時(shí)間選擇器，支持快捷查詢；移動端點(diǎn)擊選擇跳轉(zhuǎn)到新頁面，時(shí)間全部鋪開展示；兩者都支持滑動鼠標(biāo)(手指)連續(xù)選擇時(shí)間段。

d、訂單狀態(tài)查詢

設(shè)計(jì)差異：

電腦端采用input框，下拉選中；移動端則是全部展示出來，采用勾選的方式進(jìn)行選擇。

3）批量操作

小程序不做批量操作功能。

4）訂單內(nèi)容

訂單內(nèi)容包括訂單編號、下單時(shí)間、零售商、商品信息、數(shù)量、發(fā)貨方式、買家信息、訂單狀態(tài)、實(shí)收款、訂單詳情、查看物流。這些內(nèi)容可以歸納為3類：

a、訂單信息 b、商品信息 c、操作。

a、訂單信息

訂單信息包括：訂單編號、下單時(shí)間、零售商、、發(fā)貨方式、買家信息、訂單狀態(tài)、實(shí)收款

設(shè)計(jì)差異：

電腦端面積大，內(nèi)容需要散開排列；移動端面積小，內(nèi)容需要集中排列。

b、商品信息

商品信息包括：商品名稱、圖片、價(jià)格、貨號、規(guī)格、SKU編碼、供應(yīng)商、下單數(shù)量、拿貨數(shù)量、倉內(nèi)現(xiàn)貨、缺貨原因

設(shè)計(jì)差異：

同樣的內(nèi)容，移動端更加聚焦，但是商品數(shù)量展示也偏少。

c、操作

操作包括：訂單詳情、查看物流

設(shè)計(jì)差異：

交互方式相同，都是跳轉(zhuǎn)到新頁面。

三、總結(jié)

由于屏幕大小和分辨率的不同，電腦端和移動端頁面在功能的布局和信息展示上也會有所不同。

電腦端使用鼠標(biāo)操作，包含滑動、左擊、右擊、雙擊等，相對來說單一，交互效果較少。而對于手機(jī)端來說，由于屏幕大小的限制，操作方式需要更加的豐富，通過這些豐富的操作來實(shí)現(xiàn)頁面和功能之間的交互。所以電腦端和移動端相同功能的操作方式也會不同，組件也有所差異。在做設(shè)計(jì)時(shí)，盡量使用成熟的組件，給用戶良好的使用體驗(yàn)。

遇到復(fù)雜的設(shè)計(jì)需求，不要慌張，

核心都是看透事物的本質(zhì)，拆解為基礎(chǔ)的組件，再從根本上解決問題。

謝謝！

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

評論(0) 瀏覽(488)

西派特（北京）科技有限公司是研發(fā)和制造科學(xué)儀器和智能工業(yè)儀表的國家高新技術(shù)企業(yè)，公司總部位于北京經(jīng)濟(jì)技術(shù)開發(fā)區(qū)。產(chǎn)品是將光譜與物質(zhì)物化性質(zhì)全息智能分析技術(shù)相結(jié)合，開發(fā)制造的快檢設(shè)備，可快速檢測液體、固體、氣體物料的多種性質(zhì)指標(biāo)。適用于煉油、化工、煤炭、電力、生物發(fā)酵等領(lǐng)域。

該軟件由北京西派特科技有限公司委托藍(lán)藍(lán)設(shè)計(jì)負(fù)責(zé)界面視覺設(shè)計(jì)、交互設(shè)計(jì)。藍(lán)藍(lán)設(shè)計(jì)人員通過前期詳細(xì)溝通，參考大量相關(guān)競品，為其提供四種方案視覺設(shè)計(jì)。最終雙方確定方案一設(shè)計(jì)風(fēng)格，后續(xù)根據(jù)客戶提供的原型圖及需求完成其他頁面設(shè)計(jì)。

首頁

層級思維解構(gòu)圖標(biāo)分類體系

B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識

設(shè)計(jì)原則之一致性

常見的B端彈窗樣式設(shè)計(jì)總結(jié)

比GIF更好用的Lottie動畫是什么？

B端后臺管理界面設(shè)計(jì)欣賞

當(dāng)你設(shè)計(jì)時(shí)，你應(yīng)該思考些什么

APP消息中心設(shè)計(jì)思考

PC端的頁面設(shè)計(jì)，如何優(yōu)雅呈現(xiàn)在移動端

原創(chuàng)作品案例：光譜油氣檢測軟件界面設(shè)計(jì)

分類

日歷

鏈接

個(gè)人資料

存檔