首頁

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

ui設(shè)計分享達人

1、
內(nèi)容總結(jié)
因為在寫這個系列的文章時我加入了很多擴展知識。希望告訴你更多。這里我會把主要的這個系列的知識總結(jié)一下讓你盡量一次看完。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計知識
 
 
1.1、登陸頁面
 
最近就在做我們系統(tǒng)的登陸頁面優(yōu)化。回頭我會寫一個項目總結(jié)給你們看。這里介紹一下B端登陸頁面該怎么去做。其實還挺簡單了。因為現(xiàn)在主流的布局就那幾個。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計知識
 
 
登陸頁面：布局分為三種；居左、居右、居中
頁面元素：導(dǎo)航、登錄框、背景（裝飾元素）、互聯(lián)網(wǎng)信息。
導(dǎo)航
高度：68px或48px、文字大小：14（大部分）16（也可以）
登錄框
大?。捍笮〕叽绮唤y(tǒng)一、沒有固定的尺寸。可以根據(jù)自己和領(lǐng)導(dǎo)的喜好決定。對還有要承載的內(nèi)容多少。
登錄方式：掃碼、手機號、賬號、第三方
標題切換字號：我喜歡用26px（也要其他的16、/18、/20）
輸入框高度：48px
按鈕文字和高度：16px、和輸入框高度一直就行。
背景
可以是配的插畫（這種最簡單）、一般都是科技風
底部
要不就是單純的互聯(lián)網(wǎng)信息。要不就是快捷入口、聯(lián)系方式什么。這個就不多說了正常排版就行。
 
1.2、篩選
 
篩選相對是很簡單的部分把、因為你直接用規(guī)范里的組件。雖然不會很優(yōu)秀、但是剛重要的是不會出什么錯誤。主要是就大廠規(guī)范能夠快速的幫你解決問題。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計知識
 
 
篩選的意義：定位數(shù)據(jù)、縮短查詢路徑、數(shù)據(jù)內(nèi)容分類
 
篩選類型：基礎(chǔ)篩選組件（就是我們常見的頁面頂部的篩選）、高級篩選（就是那些需要你定義想一想的篩選部分）
 
篩選布局：頂部和左側(cè)
 
篩選樣式：平鋪；折疊；Tab篩選；單側(cè)選擇；表頭；綜合
 
1.3、柵格
 
這里其實還簡單的、首先你要明白柵格在我們的設(shè)計里面很重要。你不用當然也可以呀。但是你想要做的更好那就用起來你會有意外的收獲。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計知識
 
 
怎么用：直接看ant design、TDesign、阿科desing的規(guī)范就行、寫的很清楚。
 
注意點：不要硬套、我們要根據(jù)自己的系統(tǒng)去自己定制。比如我們系統(tǒng)、用的是ant design的框架、但是我們的網(wǎng)格系統(tǒng)是自己定制的。因而我們的邊距不是24px、我們是20px
 
1.4、顏色
 
這部分相對來說是我自己的弱項、在寫當時的文章的時候也是收獲頗多的。明白了大廠規(guī)范是怎么確定自己色彩設(shè)計規(guī)范的。也清楚了自己應(yīng)該怎么去規(guī)定自己的設(shè)計規(guī)范。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計知識
 
 
主色確定：常見的方法、1、用自己品牌logo的顏色；2、用行業(yè)色
 
配色確定：我一般是找競品、或者優(yōu)秀的配色方案、來確定自己的。多參考大廠的配色方案。雖然不全是好的。但是好的還是站大多數(shù)的。
 
大廠色彩：這里我分享了大廠的色彩是怎么去確定的、如何去確定?？梢匀タ纯础Ｎ以谧约旱墓ぷ髦猩实膽?yīng)用就參考了ant Design的色彩應(yīng)用方式定制的。
 
1.5、字體
 
字體部分我覺得最有意思是的是分享了、我們宋體、楷體、隸屬、甲骨的發(fā)展歷史和由來。還有就是如何去設(shè)計一款自己的字體。還有后臺字體規(guī)范的制定
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計知識
 
 
中國文字：這里中國文字的發(fā)展歷史、所有字體的產(chǎn)生都是有自己發(fā)展的歷史原因的。很有意思。建議你看看、可以當做你喝酒吹水的談資。
 
字體規(guī)范：我們大部分的字體會采用黑體、可讀性強、親和、現(xiàn)代、清晰。
 
字號：最新的字體12px、正文、14px、通過+2， +4，+8，+12，+16 的步數(shù)增長規(guī)律
 
行高：通過邏輯得到這樣一個公式：「 行高 = 字號 + n 」，8 作為變量正好同時滿足與 1.5 倍的「 14px & 16px 」常用字號行高保持一致，總體文字間隙穩(wěn)定呼吸，行高空間較一致得出計算公式：「line-height = font size+8」
 
字重（就是字粗）：建議使用兩種常規(guī)和加粗（在前端里一般就是400和500）
 
顏色：我是主張帶有色彩傾向的顏色應(yīng)用的。根據(jù)字體樣式的設(shè)計原則，制定了簡易好記的透明度數(shù)值區(qū)間并且將該字色與界面系統(tǒng)的色彩系統(tǒng)結(jié)合，文字顯示色彩對比滿足至少1:4.5( AA級別）。且驗證了其中的實用性，共分為亮暗兩種模式，4 個色階。
 
1.6、ICON（圖標）
 
你要統(tǒng)一風格成套的去找參考和應(yīng)用。在我們的系統(tǒng)里我是自己畫icon的然后傳到阿里巴巴矢量圖庫讓開發(fā)直接引用。這個是自己累點、但是可以保障實現(xiàn)效果。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計知識
 
 
設(shè)計原則：準確、簡單、節(jié)奏、愉悅。
 
設(shè)計實戰(zhàn)：采用柵格
我是用的阿里巴巴矢量圖庫的設(shè)計規(guī)范、因為我要傳到這個平臺應(yīng)用
 
ICON分類：交互性圖標、裝飾性圖標、說明性圖標
 
1.7、按鈕
 
按鈕我覺得這部分是相對簡單的、也是要做到風格的統(tǒng)一。直接用大廠組件然后根據(jù)自己平臺的風格、不如圓角的大小其他的倒是沒什么了。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計知識
 
 
常規(guī)按鈕：次要按鈕、主要按鈕、文字按鈕、圖標按鈕
 
按鈕狀態(tài)：可用、禁用、加載、懸浮
 
尺寸：把按鈕分成：迷你、小、中、大，四種尺寸。高度分別為：24px/28px/32px/36px。推薦及默認為尺寸「中」。
 
樣式：各個規(guī)范對按鈕形狀的規(guī)范基本都一樣。提供長方形、正方形、圓角長方形、圓形四種形狀。
 
 
布局：這里分享了兩個概念、古登堡法則、費茨定律、告訴你我們?yōu)槭裁催@么排版。對產(chǎn)品和甲方很有用、哈哈、這是我的秘訣。
 
1.8、彈窗
 
后臺彈窗是一個很復(fù)雜的內(nèi)容、但是也是一個相對很好處理的部分。只要你做好規(guī)范這部分、簡直就是一點開胃小菜。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計知識
 
 
彈窗是一個我頭痛的問題因為不太好規(guī)范。但是我還是把這個彈窗系統(tǒng)、在我們的體系中形成了一個小的規(guī)范。感謝領(lǐng)導(dǎo)、感謝前段端的龍哥。
 
我們把前段粗略的分為400px、600、800、1000、最大、廣告。業(yè)務(wù)里我們會采用4、/6、/8、/1、最大、推廣和通知我們就統(tǒng)一的尺寸。
 
1.9、表單
 
什么是表單：我理解表單就是系統(tǒng)為和用戶進行交互、所要收集用戶信息的或獲得用戶反饋的一種方式的載體。在后臺產(chǎn)品中對我們數(shù)據(jù)做的增、刪、改、查、驗都可以通過表單完成。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計知識
 
 
我們在后臺系統(tǒng)中、大部分的場景都會使用上表單。信息采集呀、編輯數(shù)據(jù)呀等。在表單設(shè)計時要遵循的原則、簡潔明了、清晰高效、適應(yīng)業(yè)務(wù)、即時反饋。
 
表單的構(gòu)成結(jié)構(gòu)、基本都是由、標簽、域、提示、操作按鈕這四個部分構(gòu)成的。
 
表單布局在表單中我們采用多種布局方式。信息分組、內(nèi)容列表、標簽頁、分步驟。
 
1.10、表格
 
B端設(shè)計中，對數(shù)據(jù)瀏覽、操作、過濾、展示是最高效的。這你就不用質(zhì)疑了。因為結(jié)構(gòu)簡單、精準高效、數(shù)據(jù)形式豐富。
 
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計知識
 
 
表格是用來收集、整理、組織、分析數(shù)據(jù)的二維矩陣。它由內(nèi)、外兩部分組成。其中，內(nèi)部包含表頭、表體、底欄等。外部包含標題、篩選區(qū)、操作按鈕區(qū)等。
 
表格的類型：基礎(chǔ)表格、樹形、子表格、交叉表格、圖表表格、卡片表格
 
表格的樣式：網(wǎng)格型、水平線型、斑馬紋、自由形式
 
進階的一些知識就是表格數(shù)據(jù)的優(yōu)化和表格的交互知識了。想了解去看更詳細的我的文章11表格設(shè)計和12表格優(yōu)化項目實戰(zhàn)。
 
1.11、大廠規(guī)范
 
如果你是一個小廠B端設(shè)計師、剛好沒有自己平臺的設(shè)計規(guī)范。那就去直接用的場的設(shè)計規(guī)范。去用沒問題的。大廠那么多的牛逼設(shè)計給你做好了你不用。都塞到嘴巴上、不吃就不給面了。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計知識
 
 
在使用大廠的設(shè)計規(guī)范時然后慢慢的積累自己平臺的設(shè)計規(guī)范。逐漸的你就會形成一個屬于你們自己平臺業(yè)務(wù)的高質(zhì)量設(shè)計規(guī)范了。
 
2、計劃
 
這個基礎(chǔ)系列的文章就這樣寫結(jié)束掉吧、希望可以對你的B端設(shè)計有所幫助。之后我會寫二個系列的文章、去分享我理解的B端設(shè)計。
 
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計知識
 
 
第一個系列是B端基礎(chǔ)設(shè)計的加強版、B端高手。B端高手是會寫我的實戰(zhàn)里是怎么去做的。其實就是我的設(shè)計項目復(fù)盤。
 
第二個系列就隨便的去分享一些設(shè)計知識。比如哪些什么什么原理呀、什么什么法則呀、在設(shè)計里的應(yīng)用。而且會提出和討論一些設(shè)計問題。
 
 
 


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

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

前端達人

一、什么是一致性呢？
二、  為什么一致性很重要呢？
三、  生活中一致性的案例
四、  UI設(shè)計一致性的體現(xiàn)
五、  交互設(shè)計一致性的體現(xiàn)
六、  總結(jié)
設(shè)計原則之一致性
 
 
一、什么是一致性呢？
一致性的字面意思和使用的場景不同代表的含義也會有區(qū)別，這里主要使用在UI/UX設(shè)計中。
UI/UX設(shè)計中一致性是指在整個應(yīng)用程序或網(wǎng)站中使用相同的設(shè)計元素和模式。它涉及在所有頁面和屏幕上使用相同的視覺語言、布局和交互，以創(chuàng)造一致且直觀的用戶體驗。一致性有助于用戶了解如何瀏覽應(yīng)用程序或網(wǎng)站，消除困惑和沮喪，并使他們更容易學(xué)習(xí)和記住如何使用產(chǎn)品。
設(shè)計并非孤立的實踐。它與其他領(lǐng)域交織在一起，其中之一就是心理學(xué)。在設(shè)計中發(fā)揮根本作用的心理學(xué)原理是重復(fù)定律。
這一定律的起源可以追溯到 20 世紀早期，當時德國心理學(xué)家赫爾曼·艾賓浩斯進行了開創(chuàng)性的研究。他的工作對理解人類記憶具有革命性意義。艾賓浩斯最著名的貢獻是“遺忘曲線”，它表明如果不嘗試保留信息，信息會隨著時間的推移而丟失。然而，他還發(fā)現(xiàn)，反復(fù)接觸信息會極大地影響我們記憶信息的能力。從本質(zhì)上講，重復(fù)可以強化回憶。
 
設(shè)計原則之一致性
 
 
艾賓浩斯的重復(fù)實驗主要關(guān)注學(xué)習(xí)和記憶的過程，但其影響遠不止于此。這讓人們認識到，重復(fù)的元素更容易被記住，從而引導(dǎo)觀眾的注意力和焦點。很明顯，重復(fù)可以用來引導(dǎo)行為和理解。
通過重復(fù)顏色、形狀和圖案等特定元素，設(shè)計師可以創(chuàng)造一種統(tǒng)一感和節(jié)奏感。這種重復(fù)還使設(shè)計師能夠強調(diào)基本元素或信息。
重復(fù)不僅僅是一種設(shè)計原則，更是生活的一個基本方面。在自然界中，重復(fù)以各種方式體現(xiàn)，從雪花的對稱性到海浪拍打海岸的韻律圖案，從貝殼的螺旋到一年四季的循環(huán)。這種自然的重復(fù)帶來了節(jié)奏、結(jié)構(gòu)和可預(yù)測性，創(chuàng)造了一種舒適和熟悉的感覺。
人類是自然的一部分，天生就能夠識別和響應(yīng)這些模式。我們的大腦是出色的模式識別機器，我們傾向于認為重復(fù)的模式令人感到舒適和熟悉。這種認知特征解釋了為什么設(shè)計中的重復(fù)模式（無論是在數(shù)字界面、實體產(chǎn)品、建筑還是營銷中）會引起我們的共鳴。
設(shè)計原則之一致性
 
 
二、  為什么一致性很重要？
在 iOS 的設(shè)計指南中，一致性被視為讓設(shè)計融入 iOS 生態(tài)的關(guān)鍵，它幫助用戶在不同應(yīng)用間建立起一種熟悉感。遵循規(guī)范的一致性可以「help your design feel at home in iOS」，保持一致性是為用戶帶來產(chǎn)品愉悅感的重要方式。
在經(jīng)典交互設(shè)計原則中，「一致性」一直是重要的設(shè)計準則。在幾乎可以稱為「設(shè)計師必讀」的雅各布·尼爾森的十條可用性原則中，一致性（Consistency and standards）位列第四，原則建議設(shè)計者在界面和交互上遵循既定的規(guī)則，無論是在應(yīng)用內(nèi)部還是跨平臺之間。
在具體的執(zhí)行中，內(nèi)部一致性通常指應(yīng)用內(nèi)應(yīng)當使用統(tǒng)一的視覺風格和交互語言，相同的功能和操作應(yīng)該在體驗上保持一致。而外部一致性則更強調(diào)用戶應(yīng)該遵循平臺和系統(tǒng)的設(shè)計規(guī)范，保持用戶在同一平臺不同應(yīng)用間體驗的相似性。
一致性在UI/UX（用戶界面/用戶體驗）中非常重要，因為它對于提供良好的用戶體驗和用戶界面的可用性至關(guān)重要。下面詳細說明一致性的幾個重要原因：
 
設(shè)計原則之一致性
 
 
1、  用戶學(xué)習(xí)曲線：
一致的UI/UX設(shè)計可以降低用戶的學(xué)習(xí)曲線。當用戶在應(yīng)用程序或網(wǎng)站中遇到一致的元素、布局和交互方式時，他們可以快速理解并準確預(yù)測如何與界面進行交互。這減少了用戶的混淆和困惑，提高了他們的效率和滿意度。
2、  提升可用性：
一致性使用戶界面更加易于使用。當用戶在不同的頁面或功能之間找到相似的設(shè)計元素和交互模式時，他們可以輕松地將已有的知識和經(jīng)驗應(yīng)用于新的情境中。這種一致性幫助用戶快速完成任務(wù)，減少錯誤和迷失，提供更好的導(dǎo)航和流暢的體驗。
3、  品牌認可度：
一致的UI/UX設(shè)計有助于樹立品牌形象和增強品牌認可度。通過在不同的渠道和平臺上保持一致的設(shè)計元素、標識和視覺風格，品牌可以建立起獨特而可識別的形象。用戶在不同的觸點上都能感受到品牌的一致性，從而增加品牌的信任和忠誠度。
4、  用戶滿意度：
一致性直接影響用戶的滿意度。當用戶在使用應(yīng)用程序或網(wǎng)站時感受到一致的設(shè)計和交互方式時，他們會感到更加舒適和自信。一致性傳遞了專業(yè)和質(zhì)量的信號，讓用戶感到被關(guān)注和重視。這種積極的用戶體驗有助于提升用戶滿意度，并促使他們持續(xù)使用和推薦你的產(chǎn)品或服務(wù)。
 
三、  生活中一致性的案例
設(shè)計原則之一致性
 
 
生活中的案例保持一致性的有很多，
a、例如紅綠燈，在學(xué)習(xí)駕照或老師教學(xué)時會統(tǒng)一講解紅燈停，綠燈行。
b、向左向右箭頭符號的使用，在日常生活中都會保持一致。
c、我們乘坐地鐵時，地鐵的線路圖也會保持一致性，每個站的點大小，文字，到站和未到站以及行駛過的站點都有清晰統(tǒng)一的設(shè)計和交互操作。
 
四、  UI設(shè)計一致性的體現(xiàn)
 
設(shè)計原則之一致性
 
 
1、  顏色
顏色是一種物理現(xiàn)象和感官體驗,是光波在人眼視網(wǎng)膜上的反射或吸收所形成的視覺效果。
設(shè)計中的顏色選擇代表了一個項目的品牌，例如常見的餓了么藍，美團的黃，京東的紅等等，顏色的一致性有助于營造良好的視覺體驗,強化品牌形象,提升可用性和無障礙性,最終改善用戶的整體交互感受。這對于產(chǎn)品的成功至關(guān)重要。在設(shè)計時顏色（品牌色）會延續(xù)到按鈕，圖標，字體、標簽，背景，banner等模塊使用。
設(shè)計原則之一致性
 
 
2、  字體
字體是一種特定的文字樣式,它描述了文字的形狀、大小、粗細、間距等視覺特征。
字體是設(shè)計中非常重要的元素之一，不同類型的字體，字體的粗細，有襯線字體和有襯線字體，字體的字重等，這些不一致會造成頁面混亂，字體的選擇和使用會對用戶的視覺體驗、信息感知、品牌聯(lián)系和情感體驗產(chǎn)生重要影響。
開發(fā)實現(xiàn)上如果字體使用較多，會影響加載速度，沒有統(tǒng)一的字體制定規(guī)則后期更新迭代也會比較繁瑣，造成資源浪費。
 
設(shè)計原則之一致性
 
 
3、  圖標
圖標是一種簡化的、具有視覺表現(xiàn)力的符號圖形,在用戶界面設(shè)計、信息傳達等領(lǐng)域廣泛應(yīng)用。
在眾多APP中，常使用APP的你肯定可以感受到，圖標除了準確的表達某個含義，還需要在設(shè)計時保持一致性，圖標的大小，設(shè)計的風格例如線型圖標、填充圖標、簡約圖標、立體圖標、卡通圖標等，如果這些圖標風格進行混合使用就會造成混亂，影響用戶體驗，看起來很不專業(yè)也會影響用戶使用時對于安全性的擔憂。
設(shè)計原則之一致性
 
 
4、  按鈕樣式
按鈕是一種常見的交互界面元素,用于觸發(fā)某種操作或功能。
設(shè)計中的按鈕有很多樣式，因為項目類型的不同按鈕樣式也不同，按鈕的樣式有圓形按鈕，矩形按鈕，圓角矩形按鈕，菱形按鈕等，同一個項目中建議使用統(tǒng)一的按鈕樣式，除了可以體現(xiàn)專業(yè)性，還可以讓用戶增加信任度，按鈕樣式使用很多，用戶除了使用體驗不友好，還會覺得是不是跳出了這個產(chǎn)品去到了另一個地方。
 
設(shè)計原則之一致性
 
 
5、  排版
排版是指在印刷或數(shù)字媒體中,對文本、圖像等內(nèi)容進行有規(guī)則的布局和格式化的過程。
設(shè)計中排版的一致性，使用戶能夠快速適應(yīng)和理解界面的結(jié)構(gòu)，降低學(xué)習(xí)成本，用戶對于熟悉的排版模式產(chǎn)生更強烈的歸屬感和安全感，使內(nèi)容更易讀，用戶可以依照熟悉的視覺動線快速找到所需信息，提高信息獲取效率。
五、  交互設(shè)計一致性的體現(xiàn)
 
設(shè)計原則之一致性
 
 
1、  操作一致
根據(jù)文字意思就是用戶才操作時候的流程保持一致，操作保持一致，例如大家常見的下單購買商品流程，
用戶在購買商品時：點擊商品——商品詳情——付款購買，其他商品也應(yīng)該是這樣流程，
如果每個商品流程不同就會很亂，例如：
點擊A商品————商品詳情——付款購買；
點擊B商品——付款購買——查看商品詳情；
點擊C商品——同類商品列表——商品詳情——付款購買，
這樣就會很亂，用戶不知道點擊下一個商品會是什么樣子。
例如：
設(shè)計原則之一致性
 
 
1、APP中的視頻瀏覽是上下滑動，進入新的模塊后視頻瀏覽變成了左右滑動。
2、需要確認某些操作時，確認按鈕一會在右側(cè)，一會確認又在左側(cè)。
用戶在操作時會除了體驗很亂，也很難培養(yǎng)用戶習(xí)慣。
設(shè)計原則之一致性
 
 
2、  文案符號一致
文案和標點符號的一致比較好理解，例如常見的輸入框，“請您輸入帳號”，“請輸入你的密碼”，同一頁面場景下文案和稱呼不統(tǒng)一，會造成用戶操作遲疑，是不是這個不重要才用了“你”，重要的才用“您”，為了避免用戶進行不必要的思考文案保持一致，符號亦是如此。
設(shè)計原則之一致性
 
 
3、  反饋一致
當我們看到下一步按鈕時，有些地方交互是進入了新的頁面，有的是分步式使用。建議使用一種保持統(tǒng)一，避免用戶產(chǎn)生誤導(dǎo)。
操作反饋后的彈窗，相同功能反饋的彈窗樣式不一致：一會是圖文彈窗，一會純文字提示，用戶也會很亂，包括交互時出現(xiàn)的樣式也需要保持一致，劇中或從下向上彈出。
六、  總結(jié)
一致性在UI/UX中的重要性在于提供清晰、高效、易用和令人愉悅的用戶體驗。通過保持設(shè)計元素、布局和交互方式的一致性，可以降低用戶的認知負荷，提高用戶的學(xué)習(xí)效率，增強品牌形象，提升用戶滿意度，并最終實現(xiàn)更好的業(yè)務(wù)成果，詳細分為以下七點：
設(shè)計原則之一致性
 


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

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

前端達人

B 端產(chǎn)品的業(yè)務(wù)場景通常比 C 端更為復(fù)雜，因此在進行產(chǎn)品設(shè)計時對信息的處理方式也需要根據(jù)不同的業(yè)務(wù)場景進行設(shè)計。今天主要聊一下 B 端產(chǎn)品設(shè)計中彈窗設(shè)計。
常見的B端彈窗樣式設(shè)計總結(jié)
 
 
彈窗的定義
彈窗是展現(xiàn)在用戶操作界面之上的容器，在 X 軸和 Y 軸的平行空間之上擴展了頁面的高度。是系統(tǒng)與用戶之間建立聯(lián)系非常重要的組成部分。它通常在用戶進行特定操作或訪問特定頁面功能時彈出，目的是向用戶展示某些信息、提供選擇或執(zhí)行某些操作。
 
彈窗使用場景
  1.  
    需要呈現(xiàn)的內(nèi)容篇幅相對較少。
  2.  
    常用于針對某些內(nèi)容進行補充說明、需要用戶處理關(guān)鍵信息、重要的警告提示等。
  3.  
    通常是由系統(tǒng)觸發(fā)（用戶被動接受）。
  4.  
    彈窗整體高度和寬度不做絕對的標準或規(guī)定，可以根據(jù)內(nèi)容篇幅的多少和視覺的平衡度來確定，整體規(guī)范保持一致即可。
 
總體概括為簡單和復(fù)雜兩個場景。
 
一、場景簡單
場景簡單包括：全局提示、氣泡確認框、警告提示、通知提醒框，通常是操作確認和系統(tǒng)內(nèi)部自動觸發(fā)性提示時使用。
 
1. 全局提示
以 toast 提示居多，通常在頁面中間偏上的位置。
常見的B端彈窗樣式設(shè)計總結(jié)
 
 
 
2. 氣泡提示
用于解釋難理解的功能名詞或者由于版面限制文字展示不完，利用氣泡來展示。
常見的B端彈窗樣式設(shè)計總結(jié)
 
 
 
3. 警告提示
用于重點內(nèi)容的警告提醒，降低用戶犯錯概率，提升用戶的使用體驗。
常見的B端彈窗樣式設(shè)計總結(jié)
 
 
 
4. 提示性通知彈窗：
位置相對固定，通常出現(xiàn)在需要介紹說明的功能旁邊或者居頁面中間展示。
例如，當系統(tǒng)發(fā)生重要更新維護或者重點功能引導(dǎo)時，可以顯示一個提示性通知彈窗，告知用戶當前狀態(tài)。
類型主要包括以下三種：
常見的B端彈窗樣式設(shè)計總結(jié)
 
 
常見的B端彈窗樣式設(shè)計總結(jié)
 
 
常見的B端彈窗樣式設(shè)計總結(jié)
 
 
 
舉例：
有贊后臺頁面
有贊后臺頁面
 
 
 
二、場景復(fù)雜
1. 場景復(fù)雜｜全屏彈窗
常見的B端彈窗樣式設(shè)計總結(jié)
 
 
 
新開頁簽（瀏覽器
 


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

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

前端達人

   不知道大家有沒有這樣的困擾，每次制作GIF圖的時候，難免會出現(xiàn)邊緣鋸齒，就算加上白邊之后，在夜晚模式的時候鋸齒就更明顯了。除此之外，GIF圖對于漸變填充的呈現(xiàn)也很糟糕，會出現(xiàn)漸變斷層的情況，看起來很不自然。
最讓人難以接受的情況是：
        稍微把動畫做流暢一些，GIF的文件大小就變得巨大無比。
        在2017年的時候，一款比GIF動畫更好用的動畫圖片格式誕生了?。?！
        那就是我們今天將要介紹的Lottie動畫。
     
        什么是Lottie動畫？
       Lottie動畫是一種基于 JSON 的動畫文件格式，允許在任何平臺上發(fā)送動畫，就像發(fā)送圖片一樣輕松。Lottie是可在任何設(shè)備上運行的小文件，并且可以放大或縮小而不會出現(xiàn)鋸齒的一種動畫格式。
比GIF更好用的Lottie動畫是什么？
 
 
 
相較于其他動圖格式，Lottie有哪些優(yōu)點？
比GIF更好用的Lottie動畫是什么？
 
 
①文件大小
和GIF、Apng 或 MP4 等其他格式相比，Lottie 動畫要小得多，同時保持相同的動畫表現(xiàn)，甚至更流暢。
比GIF更好用的Lottie動畫是什么？
 
 
②無線擴展
Lottie動畫是基于矢量設(shè)計制作的，這意味著可以隨意放大或縮小它們，而不必擔心分辨率的大小導(dǎo)致的鋸齒問題。放大無數(shù)倍也是清晰如初。
比GIF更好用的Lottie動畫是什么？
 
 
③支持多平臺
對于所有開發(fā)人員來說，Lottie動畫的交接非常簡單?，F(xiàn)在我們可以在 iOS、Android、Web 和 React Native 上使用 Lottie 動畫，也不需要修改。使用和調(diào)用都非常方便。
比GIF更好用的Lottie動畫是什么？
 
 
④可交互
在 Lottie 動畫中，動畫元素可以設(shè)計為可交互組件，用戶可以操縱它們進行交互，實現(xiàn)滾動、單擊和懸停等交互效果。這是GIF、Apng和MP4等動畫文件都沒辦法做到的。
比GIF更好用的Lottie動畫是什么？
 
 
  怎么設(shè)計制作Lottie動畫呢？
       目前，Lottie官網(wǎng)提供了很多動效設(shè)計軟件的插件供大家使用和下載。目前下面這些設(shè)計軟件可以在官網(wǎng)下載到Lottie動畫的導(dǎo)出插件。
比GIF更好用的Lottie動畫是什么？
 
 
其中，Lottie Creator是Lottie官方的網(wǎng)頁版動畫制作工具，登錄官網(wǎng)就可以使用。
Lottie官網(wǎng)地址 
 https://lottiefiles.com
比GIF更好用的Lottie動畫是什么？
 
 
       說了這么多Lottie的優(yōu)點，其實Lottie也是有短板的。比如說，AE里面的fx效果，Lottie就全部不支持，另外復(fù)合路徑動畫等等動效效果也不支持。
       為了方便大家快速上手Lottie動畫，作者把Lottie支持的效果整理歸類成了幾張圖片，方便大家制作的時候快速查閱。
 
比GIF更好用的Lottie動畫是什么？
 
 
比GIF更好用的Lottie動畫是什么？
 
 
比GIF更好用的Lottie動畫是什么？
 
 
比GIF更好用的Lottie動畫是什么？
 
 
比GIF更好用的Lottie動畫是什么？
 
 
比GIF更好用的Lottie動畫是什么？
 
 
比GIF更好用的Lottie動畫是什么？
 
 
比GIF更好用的Lottie動畫是什么？
 
 

藍藍設(shè)計(363858.cn )是一家專注而深入的界面設(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/ZMTYxODY4MA==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
評論(0) 瀏覽(647)

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

前端達人

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

 

1. 界面簡潔，功能齊全

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

 

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

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

 

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

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

 

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

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

 

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

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

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

 

藍藍設(shè)計(363858.cn )是一家專注而深入的界面設(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ā)

評論(0) 瀏覽(785)

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

前端達人

電商boss系統(tǒng)采購訂單頁面在移動端呈現(xiàn)，我做了哪些思考？
PC端的頁面設(shè)計，如何優(yōu)雅呈現(xiàn)在移動端？
 
 
在B端UI/UX設(shè)計領(lǐng)域，我們常常會遇到類似的需求：隨著業(yè)務(wù)的發(fā)展，需要將復(fù)雜系統(tǒng)中的核心功能摘出來，并在小程序或移動應(yīng)用上呈現(xiàn)，以便客戶能夠便捷地使用和操作，從而提升工作效率。然而，實際操作中我們會發(fā)現(xiàn)，盡管對這些功能很熟悉，但是落地過程中卻會遇到一系列問題。
 
本文中，將分享我在將復(fù)雜電商BOSS系統(tǒng)的訂單頁面呈現(xiàn)在移動端的設(shè)計過程，希望對大家有所幫助。通過本文，您將了解到以下內(nèi)容：
1、如何在設(shè)計過程中充分考慮電腦端和移動端用戶的需求和使用習(xí)慣；
2、如何將復(fù)雜的訂單頁面優(yōu)化為簡潔、易用的移動端界面；
3、針對移動端的限制和挑戰(zhàn)，如何進行設(shè)計決策和權(quán)衡；
4、使用哪些有效的UX技巧來提升用戶體驗和工作效率。
PC端的頁面設(shè)計，如何優(yōu)雅呈現(xiàn)在移動端？
 
 
 
一、深入分析業(yè)務(wù)背景和使用場景
1、業(yè)務(wù)背景關(guān)系梳理
選款的零售商客戶通過衫海精選款下單后，訂單信息和訂單狀態(tài)會傳到BOSS后臺，相關(guān)負責人可隨時查看并處理。
PC端的頁面設(shè)計，如何優(yōu)雅呈現(xiàn)在移動端？
 
 
2、為什么需要在移動端呈現(xiàn)？
為了確保平臺高效履約，需要市場部同事隨時掌握訂單狀態(tài)，特別是
發(fā)貨即將超時、攬收即將超時、發(fā)貨已超時和攬收已超時
的訂單，以便及時通知上下游。但是由于工作性質(zhì)，他們無法隨時坐在電腦面前，所以需要在小程序上呈現(xiàn)訂單信息，可以讓市場部同事隨時查看并處理訂單，避免出現(xiàn)訂單超時，客戶投訴的情況。
PC端的頁面設(shè)計，如何優(yōu)雅呈現(xiàn)在移動端？
 
 
 
二、功能拆解
1、將電腦端訂單內(nèi)容拆分重組，信息歸類
PC端的頁面設(shè)計，如何優(yōu)雅呈現(xiàn)在移動端？
 
 
PC端的頁面設(shè)計，如何優(yōu)雅呈現(xiàn)在移動端？
 
 
 
2、訂單功能拆分后，主要分為以下四個部分
PC端的頁面設(shè)計，如何優(yōu)雅呈現(xiàn)在移動端？
 
 
1）訂單狀態(tài)
訂單狀態(tài)包括：全部、待付款、備貨中、待收貨、已完成、已關(guān)閉。全部狀態(tài)下
新訂單、售后中、發(fā)貨即將超時、攬收即將超時、發(fā)貨已超時、攬收已超時
的訂單類型需要重點露出，方便快速查詢。
  •  
    設(shè)計差異：
1、訂單狀態(tài)：電腦端大屏橫向可以全部平鋪展示；移動端則是橫向滑動。
2、售后中、發(fā)貨即將超時、攬收即將超時、發(fā)貨已超時、攬收已超時的訂單快捷入口，電腦端大屏可以全部平鋪展示；移動端則需要換行，這里不做橫向滑動是因為會影響用戶的操作效率
PC端的頁面設(shè)計，如何優(yōu)雅呈現(xiàn)在移動端？
 
 
2）訂單查詢條件
訂單查詢條件包括：訂單編號、時間排序、商品名稱、供應(yīng)商名稱、下單時間、訂單狀態(tài)、履約方、SKU編碼、商品ID、是否缺貨、所屬云倉等等。
  •  
    設(shè)計思考：
分析用戶日常的使用習(xí)慣，對高頻操作的篩選項進行提煉在移動端展示，提升使用效率。低頻操作則不在移動端展示。
PC端的頁面設(shè)計，如何優(yōu)雅呈現(xiàn)在移動端？
 
 
經(jīng)過與業(yè)務(wù)方溝通，訂單編號、時間排序、商品名稱、供應(yīng)商名稱、下單時間、訂單狀態(tài)、履約方的使用頻次相對較多，
訂單編號、時間排序
使用頻次最高。
 
a、訂單編號/排序時間
  •  
    設(shè)計差異：
1、訂單編號查詢：電腦端和移動端都是直接輸入，但是電腦端支持批量查詢，單次查詢內(nèi)容會更多。
2、下單時間排序：電腦端采用input框的樣式，下拉篩選；移動端是通過點擊切換排序方式，操作會更便捷。
PC端的頁面設(shè)計，如何優(yōu)雅呈現(xiàn)在移動端？
 
 
 
b、商品/供應(yīng)商查詢
  •  
    設(shè)計思考：
1、商品查詢：電腦端、移動端都是直接輸入；
2、供應(yīng)商查詢：電腦端采用input框的樣式，下拉篩選；移動端則是進入新的頁面進行選擇；兩者都支持關(guān)鍵字搜索；
移動端不直接展開的原因是：供應(yīng)商數(shù)量多，在當前頁面展示篇幅較長，還涉及到分頁，會影響用戶的操作體驗。
PC端的頁面設(shè)計，如何優(yōu)雅呈現(xiàn)在移動端？
 
 
 
c、時間查詢
  •  
    設(shè)計差異：
電腦端點擊出現(xiàn)時間選擇器，支持快捷查詢；移動端點擊選擇跳轉(zhuǎn)到新頁面，時間全部鋪開展示；兩者都支持滑動鼠標(手指)連續(xù)選擇時間段。
PC端的頁面設(shè)計，如何優(yōu)雅呈現(xiàn)在移動端？
 
 
d、訂單狀態(tài)查詢
  •  
    設(shè)計差異：
電腦端采用input框，下拉選中；移動端則是全部展示出來，采用勾選的方式進行選擇。
PC端的頁面設(shè)計，如何優(yōu)雅呈現(xiàn)在移動端？
 
 
3）批量操作
小程序不做批量操作功能。
 
4）訂單內(nèi)容
訂單內(nèi)容包括訂單編號、下單時間、零售商、商品信息、數(shù)量、發(fā)貨方式、買家信息、訂單狀態(tài)、實收款、訂單詳情、查看物流。這些內(nèi)容可以歸納為3類：
a、訂單信息 b、商品信息 c、操作。
 
a、訂單信息
訂單信息包括：訂單編號、下單時間、零售商、、發(fā)貨方式、買家信息、訂單狀態(tài)、實收款
  •  
    設(shè)計差異：
電腦端面積大，內(nèi)容需要散開排列；移動端面積小，內(nèi)容需要集中排列。
PC端的頁面設(shè)計，如何優(yōu)雅呈現(xiàn)在移動端？
 
 
b、商品信息
商品信息包括：商品名稱、圖片、價格、貨號、規(guī)格、SKU編碼、供應(yīng)商、下單數(shù)量、拿貨數(shù)量、倉內(nèi)現(xiàn)貨、缺貨原因
  •  
    設(shè)計差異：
同樣的內(nèi)容，移動端更加聚焦，但是商品數(shù)量展示也偏少。
PC端的頁面設(shè)計，如何優(yōu)雅呈現(xiàn)在移動端？
 
 
c、操作
操作包括：訂單詳情、查看物流
  •  
    設(shè)計差異：
交互方式相同，都是跳轉(zhuǎn)到新頁面。
PC端的頁面設(shè)計，如何優(yōu)雅呈現(xiàn)在移動端？
 
 
 
三、總結(jié)
由于屏幕大小和分辨率的不同，電腦端和移動端頁面在功能的布局和信息展示上也會有所不同。
電腦端使用鼠標操作，包含滑動、左擊、右擊、雙擊等，相對來說單一，交互效果較少。而對于手機端來說，由于屏幕大小的限制，操作方式需要更加的豐富，通過這些豐富的操作來實現(xiàn)頁面和功能之間的交互。所以電腦端和移動端相同功能的操作方式也會不同，組件也有所差異。在做設(shè)計時，盡量使用成熟的組件，給用戶良好的使用體驗。
遇到復(fù)雜的設(shè)計需求，不要慌張，
核心都是看透事物的本質(zhì)，拆解為基礎(chǔ)的組件，再從根本上解決問題。
謝謝！
 

藍藍設(shè)計(363858.cn )是一家專注而深入的界面設(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ā)



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

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

前端達人

 

 

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

 

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

image.png

藍藍設(shè)計(363858.cn )是一家專注而深入的界面設(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ā)

評論(0) 瀏覽(490)

為極端情況而設(shè)計

前端達人

前言
為極端情況而設(shè)計
 
 
當我們在進行產(chǎn)品設(shè)計的時候，設(shè)計師會優(yōu)先考慮理想狀況下的各種場景，而理想的用戶流程是沒有任何問題和障礙的。但是人們很少按照我們期望的方式使用我們的產(chǎn)品。超出預(yù)期之外的情況，就是我們通常所說的「邊緣情況」，或者說「極端情況」。
事實上，針對不太理想的情況進行設(shè)計同樣重要。如果沒有計劃界面如何處理異常情況，整個體驗可能很快就會令人崩潰。
作為一名職場中合格的用戶體驗設(shè)計師，避免在工作中遺漏各種邊緣情況的考慮，與規(guī)避在方案評審的時候會遭到評審會中其他同學(xué)的各種diss的尷尬，有時候業(yè)內(nèi)也會將“解決邊緣情況問題”的能力作為一個產(chǎn)品經(jīng)理或交互設(shè)計師是否有經(jīng)驗是否資深的一個評判標準。。
所以，
設(shè)計方案的完整程度需要看是否有對邊緣情況的對應(yīng)處理方案。
產(chǎn)品設(shè)計其實是“向好避壞”并行的設(shè)計過程
，向好設(shè)計是要追求絕對的好，結(jié)合實際情況盡可能保證產(chǎn)品體驗的舒適和驚喜，這是產(chǎn)品設(shè)計一定要為用戶的極致體驗需要負責的；避壞設(shè)計是相對的壞，結(jié)合實際情況盡可能為一些低頻場景的極端情況做好容錯方案和機制，這就是產(chǎn)品設(shè)計中常常提到的邊緣情況處理設(shè)計。
為極端情況而設(shè)計
 
 
為什么要重視極端情況？
針對用戶體驗中的邊緣情況進行設(shè)計至關(guān)重要，
因為這些特殊場景雖然不太常見，但可能會對用戶體驗產(chǎn)生重大影響。
通過解決邊緣情況，可以確保產(chǎn)品設(shè)計能夠滿足更廣泛的用戶需求和情況，從而提高可用性、可訪問性和用戶滿意度。主要有以下幾個方面的好處：
  1.  
    提高產(chǎn)品質(zhì)量和可靠性
    ： 考慮邊界情況可以幫助發(fā)現(xiàn)并解決潛在的問題和漏洞，從而提高產(chǎn)品的質(zhì)量和可靠性。通過深入挖掘極端情況，可以發(fā)現(xiàn)在正常使用中可能不會遇到的問題。
  2.  
    增強用戶體驗
    ： 處理邊界情況可以確保產(chǎn)品在各種情況下都能提供良好的用戶體驗。當用戶遇到邊界情況時，如果產(chǎn)品能夠正確處理并給予合適的反饋，用戶將感到滿意，并且對產(chǎn)品的信任感會增強。
  3.  
    降低風險
    ： 不考慮邊界情況可能會導(dǎo)致嚴重的問題，甚至是安全漏洞。通過在設(shè)計和開發(fā)過程中考慮邊界情況，可以降低產(chǎn)品出現(xiàn)故障或安全漏洞的風險，從而減少潛在的損失和責任。
  4.  
    滿足法律和標準要求
    ： 在某些行業(yè)中，產(chǎn)品必須符合特定的法律法規(guī)或行業(yè)標準?？紤]到邊界情況是滿足這些要求的一部分，因為它們通常要求產(chǎn)品能夠在各種情況下都能夠安全可靠地運行。
  5.  
    增強產(chǎn)品競爭力
    ： 在當今競爭激烈的市場環(huán)境中，提供穩(wěn)健、可靠的產(chǎn)品可以幫助企業(yè)贏得用戶信任并提升競爭力?？紤]到邊界情況可以幫助企業(yè)開發(fā)出更具有吸引力和競爭力的產(chǎn)品。
所以考慮邊界情況對于確保產(chǎn)品的質(zhì)量、用戶體驗和安全性至關(guān)重要，并且有助于降低風險并提高產(chǎn)品競爭力
 
常見的極端情況有哪些
一、文本極限值
處理文本極限值在 UI 設(shè)計中是一個重要的考慮因素，特別是當設(shè)計涉及到文本輸入框、文本區(qū)域或文本標簽等元素時。以下是一些處理文本極限值的常見方法：
1、限制輸入長度。
對于文本輸入框，可以設(shè)置最大字符數(shù)限制，以確保用戶輸入的文本不會超過預(yù)期的長度。這可以通過前端或后端驗證來實現(xiàn)，避免用戶輸入過長的文本。
2、提供字符計數(shù)器。
在文本輸入框旁邊或下方顯示一個字符計數(shù)器，實時顯示用戶已輸入的字符數(shù)和允許的最大字符數(shù)。這可以幫助用戶了解他們輸入的文本長度，并且知道何時達到了極限值。
3、友好的錯誤提示。
當用戶輸入超過最大字符數(shù)限制時，及時向用戶提供友好的錯誤提示，說明他們已經(jīng)超出了文本長度限制，并且指導(dǎo)他們?nèi)绾芜M行修正。
4、自動修剪或截斷文本。
對于一些 UI 元素，可以自動修剪或截斷超出限制的文本。例如，可以在顯示文本的區(qū)域中截斷超出限制的字符，并在末尾添加省略號。
5、動態(tài)調(diào)整輸入框大小。
對于可調(diào)整大小的文本輸入框，可以根據(jù)用戶輸入的文本長度動態(tài)調(diào)整輸入框的大小，以確保用戶能夠看到他們輸入的所有內(nèi)容。
6、提供預(yù)覽功能。
在用戶輸入長文本時，提供一個預(yù)覽功能，讓用戶可以在輸入之前查看他們輸入的文本在 UI 中的最終顯示效果，從而避免超過極限值。
7、
多行文本框。
如果用戶需要輸入大段文本，可以提供一個多行文本輸入框，允許用戶自由輸入任意長度的文本，但也需要在適當?shù)臅r候提醒用戶輸入的文本長度限制。
綜上所述，處理文本極限值需要綜合考慮用戶體驗和界面美觀性，通過設(shè)置限制、提供實時反饋、自動修剪或截斷文本等方式，以確保用戶能夠方便地輸入和管理文本內(nèi)容。
為極端情況而設(shè)計
 
 
二、空狀態(tài)
處理空狀態(tài)是指在應(yīng)用程序或網(wǎng)站中，當沒有數(shù)據(jù)或內(nèi)容可顯示時所呈現(xiàn)的界面狀態(tài)。這種情況下，用戶可能會感到困惑或失望，因此設(shè)計空狀態(tài)界面非常重要，以提供清晰的信息和引導(dǎo)。
以下是常見的空狀態(tài)使用場景以及處理建議：
1、
用戶主動觸發(fā)
主要分為「內(nèi)容被清空/已完成」和「搜索結(jié)果為空」兩種情況。
1.1、內(nèi)容被清空/已完成
這種空狀態(tài)是用戶自主刪除所有數(shù)據(jù)或完成了所有任務(wù)的情況。一般此類場景不需要進行操作引導(dǎo)，只需要用「插圖+正文」或「僅正文」的形式說明情況即可
為極端情況而設(shè)計
 
 
1.2、搜索結(jié)果為空
當用戶搜索關(guān)鍵字后沒有對應(yīng)的結(jié)果顯示時出現(xiàn)的空狀態(tài)。此場景需要用「插圖+正文」的形式說明情況，并視情況增加行動連接引導(dǎo)用戶進行下一步操作，例如：添加、查看等
友好的提示信息： 當搜索結(jié)果為空時，向用戶顯示友好的提示信息，說明搜索未返回任何結(jié)果，并且可能提供一些建議或建議用戶修改搜索條件。
相關(guān)建議或推薦： 在搜索結(jié)果為空時，向用戶提供一些相關(guān)的建議或推薦，以幫助他們找到他們感興趣的內(nèi)容。這可以是熱門搜索、相關(guān)主題、或類似內(nèi)容的推薦。
為極端情況而設(shè)計
 
 
2、
用戶被動接受
主要分為「暫無消息/內(nèi)容/權(quán)限」、「初始狀態(tài)（新手指引）」兩種情況。
2.1、
暫無內(nèi)容/消息/權(quán)限
這種情況表示頁面暫時無數(shù)據(jù)的狀態(tài)，一般情況下使用「插圖+正文」的形式，必要時可增加行動連接來引導(dǎo)用戶進行下一步操作
為極端情況而設(shè)計
 
 
為極端情況而設(shè)計
 
 
2.2、
初始狀態(tài)（新手指引）
對于首次使用復(fù)雜流程功能的用戶來說，一個新手指引可以幫助用戶快速上手，也可以填充原本為空的界面。
除了空狀態(tài)之外，向用戶提供有關(guān)如何開始的說明非常有幫助。
教程是讓人們輕松了解應(yīng)用程序功能的好方法。在普通用戶界面中使用微妙的動畫或提示可以讓用戶開始執(zhí)行一些關(guān)鍵任務(wù)。
最好的教程是不引人注目的。與其展示超長的視頻或幻燈片說明，不如將提示置于體驗本身的背景中，這可能非常有效。這有助于用戶邊做邊學(xué)，而不是被動地接受大量信息。
僅在必要時才應(yīng)使用教程。如果您的界面是不言自明的，則可能不需要它。是否包含教程是您需要考慮的設(shè)計因素。另一種方法是引導(dǎo)用戶直接進入他們的第一個任務(wù)，讓他們“邊做邊學(xué)”。
為極端情況而設(shè)計
 
 
多鄰國的這個很棒的示例展示了如何將教程構(gòu)建到應(yīng)用程序體驗中。它有助于指導(dǎo)用戶設(shè)置應(yīng)用程序，并直接進入使用過程。
 
三、
用戶和系統(tǒng)的錯誤
1、用戶操作錯誤
每當發(fā)生某種用戶輸入時，通常都有可能出現(xiàn)錯誤。考慮一下輸入長表單的時候。這些是潛在用戶錯誤的雷區(qū)。
即使我們盡力讓事情變得直觀，也很難完全消除發(fā)生錯誤的可能性，這些都需要在設(shè)計階段進行規(guī)劃。
有許多不同類型的錯誤值得我們思考。
驗證。
用戶沒有按照系統(tǒng)期望的方式輸入信息。
提交。
出現(xiàn)的問題不是用戶的錯，但我們需要讓他們知道。
內(nèi)容。
用戶請求了我們無法提供的東西。
在設(shè)計產(chǎn)品時，您需要考慮可能發(fā)生錯誤的每種情況。然后，您應(yīng)該為其設(shè)計一個狀態(tài)，以確保系統(tǒng)正常處理該錯誤。
這可能很耗時，但正是對細節(jié)的關(guān)注才造就了設(shè)計精良的產(chǎn)品。
這里有一些不同的事情需要考慮......
錯誤是如何出現(xiàn)的。
我們應(yīng)該使用動畫或?qū)Ρ榷葋砦脩舻淖⒁饬Α?/div>
樣式和位置。
錯誤通知應(yīng)直觀地鏈接到問題發(fā)生的位置。
語言。
錯誤應(yīng)該以清晰、用戶友好且品牌化的方式編寫。不惜一切代價避免“技術(shù)演講”。
明確的解決方案。
在通知用戶錯誤之后，我們還應(yīng)該提及解決方案。這可能是一條說明，或者是其他可能對他們有幫助的內(nèi)容的鏈接。
為極端情況而設(shè)計
 
 
輸入錯誤的密碼后，該字段會左右輕微晃動（就像有人搖頭一樣）。這會引起用戶對問題的注意，但不會顯得突兀
2、系統(tǒng)錯誤
服務(wù)器異常、無訪問權(quán)限、 網(wǎng)絡(luò)異常（斷網(wǎng)、網(wǎng)速過慢、加載失敗、網(wǎng)絡(luò)連接失?。?、瀏覽器異常、數(shù)據(jù)出錯；
異常狀態(tài)用來提醒用戶發(fā)生了未指定的系統(tǒng)錯誤，需要用戶了解此情況，并且提供下一步引導(dǎo)或解決建議，為用戶解釋異常狀態(tài)的原因，解決困惑，提供解決辦法，引導(dǎo)用戶繼續(xù)產(chǎn)品流程而不是關(guān)閉窗口離開
為極端情況而設(shè)計
 
 
四、
頁面內(nèi)容過多時的加載方式
還有一種情況就是頁面內(nèi)容過多的情況，這里我們不考慮頁面展示只考慮進入頁面的加載，大家平時估計遇到過點開一個列表頁面，就一直在觀看“菊花轉(zhuǎn)”（頁面內(nèi)容加載狀態(tài)），等的時間如果超過5秒可能就會產(chǎn)生焦慮了，再多點時間直接就和產(chǎn)品說拜拜了，那么這種極端情況一般怎么處理呢?
1、
骨架屏
骨架屏是一個可選方案，也就是說不一定要有，有了會更好。
骨架屏適合頁面布局固定的頁面，目前很多APP都會使用骨架屏，常用的頁面有列表頁、詳情頁等。
一般骨架屏由開發(fā)寫，如果我們要做骨架屏，需要定義好骨架屏的樣式，讓開發(fā)照著寫，骨架屏實現(xiàn)難度我也跟開發(fā)同學(xué)咨詢過，很簡單，所以可以放心大膽用。
2、
占位圖
占位圖應(yīng)該是許多新人容易忽視的地方，提及占位圖就不得不提到加載，為了減少用戶感知加載時間，應(yīng)用加載一般會先加載文字后加載圖片，可以緩解用戶等待的焦慮情緒。
如果這么做就涉及到一個問題：原本放圖片的位置拿什么來占位？
所以就出現(xiàn)了占位圖這個東西，當圖片還沒有加載出來的時候，使用一個占位圖進行占位，讓用戶知道這里是有東西的
占位圖一般有帶logo的圖片和純色圖，如果是加載視頻，一般還會在圖片上做一個視頻的圖標，讓用戶知道這里是視頻。
為極端情況而設(shè)計
 
 
五、頁面上滑處理
當一個頁面向上滾動時，頁面的元素會發(fā)生什么變化，場景的變化有導(dǎo)航欄置頂、標簽欄置頂?shù)龋@些都是我們需要提前定義好的。
處理頁面上滑的交互是指當用戶向上滑動頁面時所觸發(fā)的交互效果或行為。這種交互可以增強用戶體驗，并使用戶更輕松地瀏覽頁面內(nèi)容。以下是一些處理頁面上滑交互的方法：
1、導(dǎo)航欄
1.1、固定導(dǎo)航欄
即將導(dǎo)航欄固定在頂部，其余內(nèi)容上滑，我個人比較傾向于這種方式，當頁面比較長的時候可以讓用戶隨時可以看到導(dǎo)航欄，不僅僅是給習(xí)慣了導(dǎo)航欄的用戶增添一份安全感，更是因為當導(dǎo)航欄有功能入口（比如設(shè)置）的時候，用戶可以隨時看到并隨時點擊
1.2、內(nèi)容遷移
這就是一種內(nèi)容遷移到導(dǎo)航欄區(qū)域的情況，這種交互方式不僅能提升用戶的操作體驗，也能提升產(chǎn)品的數(shù)據(jù)，比如當關(guān)注入口曝光更多，點擊關(guān)注的概率就會有一定上升。
為極端情況而設(shè)計
 
 
2、篩選欄
篩選欄的固定方式也極為常見，很多地方為了用戶可以方便做切換，都會把篩選欄固定在頂部，那么這時候就需要我們對交互進行詳細的定義。
2.1、第一種是篩選欄本身就在頂部
當篩選欄在頁面頂部時：
如果此時我們需要讓篩選欄固定在頂部，那么可以這么說明：
頁面上滑時，導(dǎo)航欄和篩選欄固定在頂部，其余內(nèi)容向上滑動。
2.2、第二種是篩選欄在頁面中間
這時候有兩種情況，一種是篩選欄隨頁面一起上滑不做固定，另一種是篩選欄需要做固定。具體使用哪種需要視具體場景來定，下面說一下當篩選欄需要固定時我們該如何描述交互。
我們可以以篩選欄為基準
① 當篩選欄位置未到達頂部時
頁面整體上滑（一般情況下導(dǎo)航欄當然始終固定在頂部）
② 當篩選欄的位置到達導(dǎo)航欄下方時
篩選欄固定，篩選欄下方內(nèi)容繼續(xù)向上滑動
為極端情況而設(shè)計
 
 
如何找到極端情況
有些設(shè)計師認為，極端情況往往是意料之外的情況，但是實際上，絕大多數(shù)的極端情況是可以提前預(yù)測的。有兩種方法可以幫你找到極端情況：
1、
設(shè)計評審。
為了創(chuàng)造出色的設(shè)計，你應(yīng)當主動尋找極端情況。設(shè)計評審是一個非常有用的環(huán)節(jié)，它可以幫助產(chǎn)品團隊找到許多潛在的優(yōu)勢案例。在產(chǎn)品設(shè)計的早期，就應(yīng)該進行設(shè)計評審。為了獲得更好的結(jié)果，最好邀請開發(fā)人員和其他的團隊成員參與此類會議。
2、
使用真實用戶測試。
盡早在其他的團隊成員的幫助下尋找極端情況是一種很好的辦法，但是它不能保證你會發(fā)現(xiàn)所有的問題來源。只有在真正的用戶進行測試的時候，才能幫你了解用戶使用你的產(chǎn)品的時候所面臨的問題。同時，值得一提的是，嚴格且有節(jié)制的可用性測試，用戶可能會因為經(jīng)常被指示要做什么而很難暴露極端情況的存在。所以，最好創(chuàng)建一個讓用戶可以嘗試和探索的體系，在靈活的測試和充足的時間下，更容易找到問題。
 
結(jié)語
為各種可能發(fā)生的情況進行設(shè)計
好的設(shè)計就是注重細節(jié)。
正是這種針對每種場景進行設(shè)計的承諾，才使出色的體驗與普通體驗區(qū)分開來。作為設(shè)計師，你有責任針對這些邊緣情況進行規(guī)劃。無論您是否為它們進行設(shè)計，它們都會發(fā)生，所以最好做好準備！
以上僅僅舉了幾個極端情況的例子，實際上還會有很多，若想盡量覆蓋全極端情況，在設(shè)計時可以多多思考，將自己切換成“找茬兒模式”，也可以尋求QA同學(xué)的幫助，因為他們在寫用例時會考慮的更多。即使努力去想可能發(fā)生的極端情況，但是有些極端情況還是可能會遺漏，到真正遇到了才知道，不過其實也說明了那些想不到的極端情況可能發(fā)生的概率更小。
總之，有些極端情況一定要處理，盡量做到給用戶一個好的體驗，但是有些情況其實并不需要投入過多精力去思考該如何提升體驗，因為本身就不是正常的產(chǎn)品使用場景，只要在發(fā)生的時候保證產(chǎn)品可用性即可，因為還有更重要的產(chǎn)品主線體驗需要不斷去迭代提升。
 


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

藍藍設(shè)計(363858.cn )是一家專注而深入的界面設(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ā)

評論(0) 瀏覽(487)

UI設(shè)計公司打造的B端后臺管理界面欣賞與優(yōu)化

前端達人

在現(xiàn)代商業(yè)環(huán)境中，B端后臺管理界面的設(shè)計質(zhì)量直接影響到企業(yè)的運營效率和員工的使用體驗。本文將帶您欣賞和解析由專業(yè)UI設(shè)計公司打造的幾個優(yōu)秀的B端后臺管理界面設(shè)計案例，并分享一些優(yōu)化建議，以提升后臺系統(tǒng)的用戶體驗和功能性。

藍藍UI設(shè)計公司的杰出案例

在眾多UI設(shè)計公司中，藍藍UI設(shè)計公司憑借其卓越的設(shè)計能力和豐富的項目經(jīng)驗，打造了多個備受贊譽的B端后臺管理界面。其設(shè)計案例不僅美觀實用，還充分考慮了用戶的操作習(xí)慣和實際需求。

例如，在一個大型零售企業(yè)的后臺管理系統(tǒng)中，藍藍UI設(shè)計公司采用了簡潔清晰的布局，結(jié)合現(xiàn)代化的設(shè)計元素，使得界面不僅美觀，還極大地提升了用戶的操作效率。通過直觀的導(dǎo)航欄和精心設(shè)計的圖表，用戶可以快速獲取所需信息，簡化了復(fù)雜的數(shù)據(jù)管理流程。

 

優(yōu)化B端后臺管理界面的關(guān)鍵要素

在欣賞這些優(yōu)秀設(shè)計的同時，我們也可以總結(jié)出一些優(yōu)化B端后臺管理界面的關(guān)鍵要素：

 

簡潔明了的布局

：后臺管理界面通常需要展示大量信息，簡潔明了的布局可以幫助用戶快速找到所需內(nèi)容，減少操作時間。

 

直觀的導(dǎo)航

：清晰的導(dǎo)航結(jié)構(gòu)是提升用戶體驗的關(guān)鍵。使用固定導(dǎo)航欄或側(cè)邊欄可以幫助用戶在不同模塊之間快速切換。

 

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

：通過圖表和圖形展示數(shù)據(jù)，比純文本更直觀、更易理解。適當?shù)臄?shù)據(jù)可視化設(shè)計可以幫助用戶快速分析和決策。

 

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

：確保后臺管理界面在不同設(shè)備上都能良好顯示，尤其是在移動設(shè)備上的表現(xiàn)，這對于需要隨時隨地訪問后臺的用戶尤為重要。

用戶反饋機制

：在用戶進行重要操作（如數(shù)據(jù)刪除或修改）時，提供及時的反饋或確認提示，可以避免誤操作，提高系統(tǒng)的安全性和可靠性。

結(jié)語

總之，優(yōu)質(zhì)的B端后臺管理界面設(shè)計不僅需要美觀的視覺效果，還需兼顧功能性和用戶體驗。通過參考藍藍UI設(shè)計公司等專業(yè)設(shè)計公司的成功案例，并結(jié)合以上優(yōu)化建議，相信企業(yè)可以打造出更加高效、便捷的后臺管理系統(tǒng)，提升整體運營效率和用戶滿意度。

無論是新系統(tǒng)的設(shè)計還是現(xiàn)有系統(tǒng)的優(yōu)化，選擇一家經(jīng)驗豐富、口碑良好的UI設(shè)計公司都是至關(guān)重要的。希望本文提供的案例欣賞與優(yōu)化建議能為您的B端后臺管理界面設(shè)計提供一些啟發(fā)和幫助。

藍藍設(shè)計(363858.cn )是一家專注而深入的界面設(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ā)

評論(0) 瀏覽(709)

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

前端達人

電商boss系統(tǒng)采購訂單頁面在移動端呈現(xiàn)，我做了哪些思考？
PC端的頁面設(shè)計，如何優(yōu)雅呈現(xiàn)在移動端？
 
 
在B端UI/UX設(shè)計領(lǐng)域，我們常常會遇到類似的需求：隨著業(yè)務(wù)的發(fā)展，需要將復(fù)雜系統(tǒng)中的核心功能摘出來，并在小程序或移動應(yīng)用上呈現(xiàn)，以便客戶能夠便捷地使用和操作，從而提升工作效率。然而，實際操作中我們會發(fā)現(xiàn)，盡管對這些功能很熟悉，但是落地過程中卻會遇到一系列問題。
 
本文中，將分享我在將復(fù)雜電商BOSS系統(tǒng)的訂單頁面呈現(xiàn)在移動端的設(shè)計過程，希望對大家有所幫助。通過本文，您將了解到以下內(nèi)容：
1、如何在設(shè)計過程中充分考慮電腦端和移動端用戶的需求和使用習(xí)慣；
2、如何將復(fù)雜的訂單頁面優(yōu)化為簡潔、易用的移動端界面；
3、針對移動端的限制和挑戰(zhàn)，如何進行設(shè)計決策和權(quán)衡；
4、使用哪些有效的UX技巧來提升用戶體驗和工作效率。
PC端的頁面設(shè)計，如何優(yōu)雅呈現(xiàn)在移動端？
 
 
 
一、深入分析業(yè)務(wù)背景和使用場景
1、業(yè)務(wù)背景關(guān)系梳理
選款的零售商客戶通過衫海精選款下單后，訂單信息和訂單狀態(tài)會傳到BOSS后臺，相關(guān)負責人可隨時查看并處理。
PC端的頁面設(shè)計，如何優(yōu)雅呈現(xiàn)在移動端？
 
 
2、為什么需要在移動端呈現(xiàn)？
為了確保平臺高效履約，需要市場部同事隨時掌握訂單狀態(tài)，特別是
發(fā)貨即將超時、攬收即將超時、發(fā)貨已超時和攬收已超時
的訂單，以便及時通知上下游。但是由于工作性質(zhì)，他們無法隨時坐在電腦面前，所以需要在小程序上呈現(xiàn)訂單信息，可以讓市場部同事隨時查看并處理訂單，避免出現(xiàn)訂單超時，客戶投訴的情況。
PC端的頁面設(shè)計，如何優(yōu)雅呈現(xiàn)在移動端？
 
 
 
二、功能拆解
1、將電腦端訂單內(nèi)容拆分重組，信息歸類
PC端的頁面設(shè)計，如何優(yōu)雅呈現(xiàn)在移動端？
 
 
PC端的頁面設(shè)計，如何優(yōu)雅呈現(xiàn)在移動端？
 
 
 
2、訂單功能拆分后，主要分為以下四個部分
PC端的頁面設(shè)計，如何優(yōu)雅呈現(xiàn)在移動端？
 
 
1）訂單狀態(tài)
訂單狀態(tài)包括：全部、待付款、備貨中、待收貨、已完成、已關(guān)閉。全部狀態(tài)下
新訂單、售后中、發(fā)貨即將超時、攬收即將超時、發(fā)貨已超時、攬收已超時
的訂單類型需要重點露出，方便快速查詢。
  •  
    設(shè)計差異：
1、訂單狀態(tài)：電腦端大屏橫向可以全部平鋪展示；移動端則是橫向滑動。
2、售后中、發(fā)貨即將超時、攬收即將超時、發(fā)貨已超時、攬收已超時的訂單快捷入口，電腦端大屏可以全部平鋪展示；移動端則需要換行，這里不做橫向滑動是因為會影響用戶的操作效率
PC端的頁面設(shè)計，如何優(yōu)雅呈現(xiàn)在移動端？
 
 
2）訂單查詢條件
訂單查詢條件包括：訂單編號、時間排序、商品名稱、供應(yīng)商名稱、下單時間、訂單狀態(tài)、履約方、SKU編碼、商品ID、是否缺貨、所屬云倉等等。
  •  
    設(shè)計思考：
分析用戶日常的使用習(xí)慣，對高頻操作的篩選項進行提煉在移動端展示，提升使用效率。低頻操作則不在移動端展示。
PC端的頁面設(shè)計，如何優(yōu)雅呈現(xiàn)在移動端？
 
 
經(jīng)過與業(yè)務(wù)方溝通，訂單編號、時間排序、商品名稱、供應(yīng)商名稱、下單時間、訂單狀態(tài)、履約方的使用頻次相對較多，
訂單編號、時間排序
使用頻次最高。
 
a、訂單編號/排序時間
  •  
    設(shè)計差異：
1、訂單編號查詢：電腦端和移動端都是直接輸入，但是電腦端支持批量查詢，單次查詢內(nèi)容會更多。
2、下單時間排序：電腦端采用input框的樣式，下拉篩選；移動端是通過點擊切換排序方式，操作會更便捷。
PC端的頁面設(shè)計，如何優(yōu)雅呈現(xiàn)在移動端？
 
 
 
b、商品/供應(yīng)商查詢
  •  
    設(shè)計思考：
1、商品查詢：電腦端、移動端都是直接輸入；
2、供應(yīng)商查詢：電腦端采用input框的樣式，下拉篩選；移動端則是進入新的頁面進行選擇；兩者都支持關(guān)鍵字搜索；
移動端不直接展開的原因是：供應(yīng)商數(shù)量多，在當前頁面展示篇幅較長，還涉及到分頁，會影響用戶的操作體驗。
PC端的頁面設(shè)計，如何優(yōu)雅呈現(xiàn)在移動端？
 
 
 
c、時間查詢
  •  
    設(shè)計差異：
電腦端點擊出現(xiàn)時間選擇器，支持快捷查詢；移動端點擊選擇跳轉(zhuǎn)到新頁面，時間全部鋪開展示；兩者都支持滑動鼠標(手指)連續(xù)選擇時間段。
PC端的頁面設(shè)計，如何優(yōu)雅呈現(xiàn)在移動端？
 
 
d、訂單狀態(tài)查詢
  •  
    設(shè)計差異：
電腦端采用input框，下拉選中；移動端則是全部展示出來，采用勾選的方式進行選擇。
PC端的頁面設(shè)計，如何優(yōu)雅呈現(xiàn)在移動端？
 
 
3）批量操作
小程序不做批量操作功能。
 
4）訂單內(nèi)容
訂單內(nèi)容包括訂單編號、下單時間、零售商、商品信息、數(shù)量、發(fā)貨方式、買家信息、訂單狀態(tài)、實收款、訂單詳情、查看物流。這些內(nèi)容可以歸納為3類：
a、訂單信息 b、商品信息 c、操作。
 
a、訂單信息
訂單信息包括：訂單編號、下單時間、零售商、、發(fā)貨方式、買家信息、訂單狀態(tài)、實收款
  •  
    設(shè)計差異：
電腦端面積大，內(nèi)容需要散開排列；移動端面積小，內(nèi)容需要集中排列。
PC端的頁面設(shè)計，如何優(yōu)雅呈現(xiàn)在移動端？
 
 
b、商品信息
商品信息包括：商品名稱、圖片、價格、貨號、規(guī)格、SKU編碼、供應(yīng)商、下單數(shù)量、拿貨數(shù)量、倉內(nèi)現(xiàn)貨、缺貨原因
  •  
    設(shè)計差異：
同樣的內(nèi)容，移動端更加聚焦，但是商品數(shù)量展示也偏少。
PC端的頁面設(shè)計，如何優(yōu)雅呈現(xiàn)在移動端？
 
 
c、操作
操作包括：訂單詳情、查看物流
  •  
    設(shè)計差異：
交互方式相同，都是跳轉(zhuǎn)到新頁面。
PC端的頁面設(shè)計，如何優(yōu)雅呈現(xiàn)在移動端？
 
 
 
三、總結(jié)
由于屏幕大小和分辨率的不同，電腦端和移動端頁面在功能的布局和信息展示上也會有所不同。
電腦端使用鼠標操作，包含滑動、左擊、右擊、雙擊等，相對來說單一，交互效果較少。而對于手機端來說，由于屏幕大小的限制，操作方式需要更加的豐富，通過這些豐富的操作來實現(xiàn)頁面和功能之間的交互。所以電腦端和移動端相同功能的操作方式也會不同，組件也有所差異。在做設(shè)計時，盡量使用成熟的組件，給用戶良好的使用體驗。
遇到復(fù)雜的設(shè)計需求，不要慌張，
核心都是看透事物的本質(zhì)，拆解為基礎(chǔ)的組件，再從根本上解決問題。
謝謝！
 
 

藍藍設(shè)計(363858.cn )是一家專注而深入的界面設(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ā)



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

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://363858.cn

存檔