国产成在线人视频免费视频-国产成综合-国产床上视频-国产大臿蕉香蕉大视频女-国产大尺度pr社18福利在线

首頁

B端基礎 | 彈窗設計基礎知識

天宇

建筑設計師尤哈尼·帕拉斯瑪說、簡約并非簡單,它是通過深思熟慮后對事物本質的準確把握。知其然、知其所以然。這次文章會盡量簡潔一點。
 
奔跑的日子、總是希望優秀的你和我一起同行。讓我們一起在藝術的環境里生菌、知識的海洋里狗刨~
 
B端基礎 | 彈窗設計基礎知識
 
 
第一部分 | 彈窗基礎知識
如果你只是想了解一下彈窗的基礎知識,那么看這部分就夠了。只需3分鐘無痛、來去自如不影響上班哦。
彈窗定義;彈窗來歷;彈窗拆分;彈窗分類;彈窗尺寸;
B端基礎 | 彈窗設計基礎知識
 
 
1、彈窗定義
彈窗是用戶和系統交互信息的容器
。(在網上搜了一些文章看,他們的彈窗定義寫的基本都是各寫各的)我的這個定義絕對靠譜。站的維度高,從人機交互工程出發。這定義沒錯的妥妥的。說出去基本不會有人反駁你(如果有人敢反駁你把我的名字告訴他,反正我他也不認識我哈哈哈)
 
2、彈窗來歷
彈窗最早的起源可以追溯至上世紀90年代。當時,互聯網廣告的投放形式主要是將廣告嵌入在頁面內容中,但這種方式存在一些問題。廣告商擔心消費者在瀏覽負面內容時,會將廣告與負面信息聯系在一起,從而對品牌造成不利影響。因此,網頁托管網站trippod.com利用網頁腳本程序,發明了一種在新開窗口發布廣告的方法,這就是網絡彈窗的起源。
B端基礎 | 彈窗設計基礎知識
 
 
3、彈窗拆分
整體的去分析、在大部分的彈窗類型里都會包括
關閉、內容區、模態層
(非模態類別的沒有個元素)
B端基礎 | 彈窗設計基礎知識
 
 
3.1、模態層
模態層通常是擱在原頁面和彈窗之間的半透明黑色。其主要的作用是1、降低用戶在操作中被強打斷的不適和跳出當前頁面的恐慌感。讓我們的用戶更加的聚焦彈窗內容。
B端基礎 | 彈窗設計基礎知識
 
 
我個人在設計時模態層基本都是50%的純黑,但并不是一定要用50%的純黑,要結合自己的平臺業務、設計風格等方面去制定。偷偷的告訴你這個模態層加入一點微微的色彩傾向在視覺上往往會更好一點。
3.2、關閉
彈窗的關閉是用戶退彈窗的重要途徑、一般都會在彈窗內容右上角。彈窗關閉按鈕也有在彈窗范圍外的。我們要保證彈窗關閉的清晰明確,來方便用戶操作。
在彈窗中、關閉彈窗的途徑除了叉掉。還可能有其他的。如取消按鈕。
3.3、內容區
內容區的內容是根據彈窗類型的不同,內容就會有所不同。什么都可能有、圖標、確認信息、選擇框、輸入框。只要是頁面上能出現的都可能會出現在彈窗的內容區域。
B端基礎 | 彈窗設計基礎知識
 
 
4、彈窗分類
彈窗的分類從交互形式差的差異。我們可以將其分為
模態類和非模態類
。這兩個大類就比較好區分,看看有沒有那層模就行了。常見彈窗類型表單彈窗、抽屜、警告提示、全局提示、通知提示、氣泡確認等。
B端基礎 | 彈窗設計基礎知識
 
 
4.1、模態類
模態是目前我們比較常見的類型、模態類彈窗打斷用戶的操作行為,用戶必須對其進行操作才能解散彈窗,否則不能進行其他操作。模態類最常見的就是、
表單彈窗、確認彈窗
。當然還有其他的文件選擇、信息展示、等等。
B端基礎 | 彈窗設計基礎知識
 
 
4.1.1、表單彈窗
這彈窗在B端設計里是最最最常見的一種彈窗。雖然我們現在的系統大部分是很智能的。但是復雜的業務就意味著你會和系統產生大量的交互信息的交換。所以這表單可太常見了哪哪都是他。(煩死個人)不過在你制定好一套規使用規范后。基本這樣的彈窗是不太需要設計介入的,產品和FE兩人一對使用模版就上了。
4.1.2、確認彈窗
這種彈窗就比較好理解了。承載較為緊急的信息,讓用戶快速處理;如:用戶未保存,就點擊離開當前頁面,通過對話框讓用戶做出選擇。在執行一個重要信息的刪除時,通過二次詢問引起用戶的注意,讓用戶再次做判斷;這類彈窗;
4.1.3、優點/缺點
優點:
強不會讓用戶忽略或跳過,確保信息的交互響應;引導用戶操作;增加用戶的參與度,可以提升用戶的活躍度和參與度。
缺點:
01、會中斷用戶的操作流程,打斷用戶的思路或行為。
02、可能會影響用戶體驗,因為用戶需要等待關閉彈窗后才能繼續其他操作。如果彈窗內容過多或過于復雜,用戶可能會感到困惑或不知所措。
03、如果過度使用模態類彈窗,例如頻繁彈出廣告或無意義的信息提示,用戶可能會對其產生反感甚至抵制使用相關軟件或平臺。
4.2、非模態
可以不打斷父應用程序,無需停止進度,用戶仍可以對父級內容進行交互。大部分應用于信息的反饋和提示。常見的非模態類彈窗大概有、警告提示、全局提示、通知彈窗、氣泡確認框;
B端基礎 | 彈窗設計基礎知識
 
 
4.2.1非模態優點/缺點
優點:
不打斷操作流程;不會干擾用戶操作用戶體驗更好;常用于輕量級的信息或提示。
缺點:
可能會被忽略,導致信息傳遞不暢;不適合展示重要信息;形式通常比較單一,不能滿足復雜的展示需求
4.3、其他
林子大了什么鳥兒都會有,一定會有我沒有接觸到的前沿交互方式。所以這個其他留給未來更優秀的我們去發現。
5、彈窗尺寸
彈窗的尺寸和電腦屏幕分辨率是有關系的。主流的分辨率1920*1080像素。其他的還有1024x768、1280x800、1366x768、1440x900、1680x1050、1920x1080、2560x1440等。
我在設計界面是一般用的是1440*900的設計尺寸。在做彈窗的時候已經不考慮1366*768分辨率以下的屏幕了。多以彈窗的安全高度要小于600px
彈窗的寬度還是要根據自己業務需求去定義的。比如我們的業務最寬的彈窗1280像素。像站酷的查看作品他是整屏的寬度。
模特還怪好看的
模特還怪好看的
 
我在我們平臺定義的表單彈窗寬度雖然很不嚴謹、好像也沒有什么理論支撐。但是確一直再用。尺寸分別為、400、600、800、1000、1280。之后還是要細化的。這樣的定義彈窗尺寸導致的結果是,開發還原想過不是太好。
B端基礎 | 彈窗設計基礎知識
 
 
第二部分 |彈窗2.0項目里
承載內容、為什么會有這么多的彈窗類型。問題不在于彈窗,而在于合適的承載內容和交互類型。
B端基礎 | 彈窗設計基礎知識
 
 
1、彈窗、抽屜、界面
在項目里我們應該怎么去選擇這三種內容呈現方式呢。如果你只是設計師大部分時間你也不用選。你只有建議的權利沒有決定的權利。如果產品原型是彈窗、你給做了個抽屜。你可以從下面幾方面去找支撐點去和產品撕逼、干翻他的原型用你的效果圖。
AI的提高畫面質量還是有待提高呀
AI的提高畫面質量還是有待提高呀
 
1.1、內容
彈窗和抽屜或界面他們承載的內容量是不一樣的。所以在選擇用那種交互方式時可以從我們業務需要展示的內容量來考慮。簡單的確認或通知適合用彈窗、需要展示大量內容或進行復雜的功能時就適合用抽屜或者界面了。
1.2、體驗
我們可以從用戶體驗方面出發、如頁面的空間感、考慮空間大小和布局。操作流程上、考慮用戶在界面上被打斷進程的成本。一致性、確保與其他業務模塊交互方式保持一致,為用戶提供一致的體驗。
1.3、效率
考慮到用戶的使用成本、B端設計中效率的提升優先率老高了。考慮系統的加載速度、確保我們使用的交互方式不會影響整體的性能和體驗。
 
本身彈窗、抽屜或者界面的使用選擇是需要很綜合考慮的。總的來說核心是提升效率、保證我們用戶好的體驗。
2、彈窗交互優缺點
當涉及到B端彈窗的交互方式時,有以下幾點核心優缺點:
B端基礎 | 彈窗設計基礎知識
 
 
2.1、優點
提供及時反饋
彈窗可以快速向用戶顯示重要的信息或請求,使用戶能夠即時了解系統的狀態或需要執行的操作。
簡化操作流程
對于某些復雜的操作或任務,彈窗可以提供直觀的界面和簡化的步驟,使用戶更容易完成目標。
吸引用戶注意力
通過使用彈窗,可以確保用戶在操作過程中不會被其他界面元素分散注意力,從而更專注于當前的任務。
提供額外的信息或功能
彈窗可以包含更多的詳細信息或額外的功能選項,使用戶能夠更深入地了解或操作某個特定內容。
2.2、缺點
干擾用戶操作
過度或不合適的彈窗可能會干擾用戶的正常操作,打斷用戶的工作流程,影響用戶體驗。
誤導用戶
不清晰或誤導性的彈窗信息可能會使用戶產生困惑或誤解,導致錯誤的操作或決策。
影響性能
彈窗的彈出和關閉可能會增加系統的負擔,影響性能和響應速度。
不符合用戶習慣
對于習慣于傳統界面的用戶來說,過于復雜或與眾不同的彈窗交互方式可能會造成使用上的困擾和不適應。
3、我的一些設計
我們項目里把升級彈窗做成了模版、廣告彈窗也是模版。當然像二次確認這樣的彈窗是組件,上貨看東西。
B端基礎 | 彈窗設計基礎知識
 
 
這個是系統的一個展示彈窗、和一個從彈窗形式優化到抽屜的模塊界面。
B端基礎 | 彈窗設計基礎知識
 
 
這個就是一個在線聊天界面。是從SaaS里跳轉新建頁面。
大概是想了想、平時做的項目確實比較碎、最近也沒做整理盒復盤。所以界面的展示就不放太多了。而且有的信息頁模糊了。不是我不信家人們。是我不信自己、朦朧也是一種美吧。哈哈哈
 
B端基礎 | 彈窗設計基礎知識
 
 
最后
我大學設計史陳老師告誡過我們。她說同學們,我其實不怕你們眼高手低。我怕的是你們眼都不高。和優秀的人一起前行、希望和優秀的你們一起去經歷設計、生活、工作的美好。
期待你的加入、我們的大伐木累。我可以作品集指導反正閑著也沒事不要錢。我和群里的小伙伴都是多年一線設計師來自于天南海北,不乏有互聯網大廠設計師。再次
期待你的加入...
 
參考
優設網:4個方面層層遞進,分析如何設計B端產品的彈窗
知乎:B端設計指南04-彈窗
知乎:運營彈窗的設計要點拆解
知乎:淺談B端產品彈窗一級設計方法
人人都是產品經理:WEB端彈框掌握著幾天就夠了
 


作者:彪形大漢pro
鏈接:https://www.zcool.com.cn/article/ZMTYwNjg4NA==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

7大色彩技巧讓你界面更吸睛

天宇

色彩在我們日常設計中起著定生死的作用,它是設計的靈魂,舒適的色彩搭配可以讓設計師一遍定稿,感覺在自己的設計生涯中,大部分都是在與色彩的博弈中度過的,雖然客戶可能不懂色彩原理,可是客戶天生都是色彩的感受家,什么樣的色彩搭配美,通常他們瞄一眼就會有定論,不用你去辯解太多,不好的搭配,縱使有千萬種理由,也說服不了客戶,所以好好研究色彩以及每一種色彩傳遞的情感對我們做好設計至關重要。
 
7大色彩技巧讓你界面更吸睛
 
 
 
目錄
一、 色彩的定義
二、 色彩的三屬性
三、 色彩的三種常見模型
四、 色彩的語意及它的應用
五、 不同場景下的色彩應用
六、 色彩在B端設計中的作用
七、 B端色彩設計使用的原則
 
7大色彩技巧讓你界面更吸睛
 
 
 
 
 
一、色彩的定義?
1、物理學角度
色彩是光的屬性,當光波通過物體時,物體會吸收某些波長的光,而反射或透射其他波長的光,這些被反射或透射的光波長度決定了我們看到的顏色。
 
2、心理學角度
色彩是人腦對光波長的視覺感知,不同的波長刺激視網膜上不同類型的感光細胞,進而產生不同的色彩感覺。
 
3、 藝術學角度
色彩是藝術創作的重要元素,它不僅關乎視覺感受,還與情感、文化、象征意義相關聯。
 
4、 設計學角度
在設計領域,色彩是傳達信息、影響情緒和創造美感的關鍵工具。
 
5、 計算機科學角度
在數字圖像處理中,色彩通常通過顏色模型(如RGB、CMYK等)來定義,這些模型通過不同比例的原色或色料混合來表示各種顏色。
 
 
 
二、色彩的三屬性
1、色相
色相是指不同顏色之間的差別,即不同顏色的表象和名稱,每個顏色都有自己的專屬ID,如紅、橙、黃、綠、青、藍、紫等。不同的色別都可用光譜中的波長來表示,人的眼睛可分辨出的色別有180種左右。
7大色彩技巧讓你界面更吸睛
 
 
 
2、明度
明度是指色彩的明暗程度。一般在反光率相同的情況下,不同色別的明暗程度不同。如黃色光比紅色光更明亮,而紅色光則比青色光要明亮。
同時,同一色相在受光強弱或者物體對光的吸收、反射性能不同的情況下,會呈現不同的明暗變化和差異。
7大色彩技巧讓你界面更吸睛
 
 
  
 
3、飽和度(純度)
飽和度(純度)是指同一色別的純凈度和鮮明度的變化。從色光的角度而言,光的波長單一程度越高,飽和度就會越高;不同色別所達到的飽和度不同,一般情況下,紅色的純度可達到最高,綠色的則相對較低;同一色相深淺不同的顏色有不同的飽和度;黑白色光的滲入會導致飽和度和明度發生變化;通常,照明光線的性質、物體表面結構對光線吸收與反射的性能等因素影響飽和度。
7大色彩技巧讓你界面更吸睛
 
 
 
 
 
三、色彩的三種常見模型
1、HSB模型
HSB模型也叫HSV模型,其中H代表色相,即顏色的種類;S代表飽和度,即顏色的純度;B(V)代表亮度,即顏色的明亮程度。
 
這種色彩模型是我日常在的設計工作中用的最多的一種色彩模型,如果在同色系中如果只想讓他們有細微的變化,我通常會通過調節S和B的百分比數值來達到自己想要的目的。
7大色彩技巧讓你界面更吸睛
 
 
以上就是我在設計項目中,運用該色彩模型做的一個實戰,項目中用到了一個圖形,需要用同色系來表達,我保持了H色值的不變,讓S值和B值都發生著微妙的不同,于是就產生了四五種同色系的綠色,該色彩模型特別的好使,也鼓勵大家多在實戰中運用這樣的色彩模型,簡單實用。
 
H色相:Hue,以角度(0°-360°)表示
S飽和度:Saturation,以百分比值(0%-100%)表示
B/V 亮度:Brightness 或 Value,以百分比值(0%-100%)表示
 
 
 
 
2、RGB模型
RGB是從顏色發光的原理來設計定的,通俗點說它的顏色混合方式就好像有紅、綠、藍三盞燈,當它們的光相互疊合的時候,色彩相混,而亮度卻等于三者亮度之總和,越混合亮度越高,即加法混合。
 
紅、綠、藍三個顏色通道每種色各分為256階亮度,在0時“燈”最弱——是關掉的,而在255時“燈”最亮。當三色灰度數值相同時,產生不同灰度值的灰色調,即三色灰度都為0時,是最暗的黑色調;三色灰度都為255時,是最亮的白色調。
7大色彩技巧讓你界面更吸睛
 
 
R紅:Red,以數值(0-255)表示
G綠:Green,以數值(0-255)表示
B藍:Blue,以數值(0-255)表示
7大色彩技巧讓你界面更吸睛
 
 
 
 
3、CMYK模型
雖然RGB模型色彩更加的豐富,但是很多顏色不能完全打印出來,于是CMYK模型就成了打印、印刷的不二選擇。C是青、M是品紅、Y是黃、K是黑,通過顏料反射和吸收光線來顯色。
 
記得之前自己從事平面工作的時候,就經常要用到CMYK模式,因為印出來的效果偏差是最小的,是最靠近設計效果圖的。
7大色彩技巧讓你界面更吸睛
 
 
通過對比,我們發現RGB色彩模型顏色顯示上確實更加的絢麗豐富些,而CMYK的色彩模型顏色顯示上就黯淡了不少,但是要印刷的話,就必須轉化為成CMYK的色彩模式。
 
R青:Cyan,以百分比值(0%-100%)表示
M品紅:Magenta,以百分比值(0%-100%)表示
Y黃:Yellow,以百分比值(0%-100%)表示
B黑:Black,以百分比值(0%-100%)表示
 
 
 
 
四、色彩的語意及應用
1、紅色的語意及應用
紅色代表熱情、活力、強烈的情感和愛。它可以象征著激情、勇氣和行動力,也常與興奮、熱烈的情緒相關。
著名的快餐品牌肯德基,在自己的網頁及店鋪裝修中都運用了紅色,因為紅色是所有顏色中最容易引起人們注意的顏色,也是很容易刺激人們食欲和購買的顏色。
7大色彩技巧讓你界面更吸睛
 
 
 
 
2、橙色的語意及應用
橙色傳達溫暖、歡快和積極向上的情感;它常與樂觀、友好、創造力聯系在一起,給人以活力充沛和充滿希望的感覺。
百度網盤的這個登錄界面就運用了橙色,給人陽光、向上、熱情的感覺,通過色彩的運用一下讓界面有了溫度。
7大色彩技巧讓你界面更吸睛
 
 
 
 
3、黃色的語意及應用
黃色象征快樂、開朗和樂觀;它能帶來明亮、愉悅的情緒,代表著陽光、溫暖和智慧。
叫叫閱讀是一款非常著名的兒童閱讀軟件,整個色調采用的是非常有活力的黃色,這與兒童處于好奇與活力的階段相符合,這種高亮的黃色,飽和度和明度都非常的高,特別容易抓住兒童的目光,同時它是一種快樂的顏色,也是一種能激發孩子創造力和想象力的顏色,特別符合兒童成長的需求。
7大色彩技巧讓你界面更吸睛
 
 
 
 
4、綠色的語意及應用
綠色代表平靜、和諧與生機。綠色常與大自然相關,給人帶來安寧、放松的感覺,也象征著成長、希望和新生。
青椒云的目標用戶是吸引年輕用戶和創意工作者,綠色這種富有活力和創意的顏色更容易吸引他們的關注,同時綠色也代表著健康、可持續發展的企業形象。
7大色彩技巧讓你界面更吸睛
 
 
 
 
5、青色的語意及應用
青色寓意清新、寧靜和沉穩,它給人一種冷靜、理智的印象,同時也帶有一絲清新的活力。
青色是一種帶有藍色和綠色的顏色,因此青色既有藍色的專業感、信任感,也有綠色的生機感、希望感。
以下是日本某牙醫品牌的官網首頁,病人希望在這里帶來健康與復蘇,也希望獲得專業、可靠的治療,而青色就成了很好傳遞這種情感的品牌色。 
7大色彩技巧讓你界面更吸睛
 
 
 
 
6、藍色的語意及應用
藍色代表冷靜、忠誠和信任;它常與沉穩、深邃的情感相關,能帶來寧靜、平和的心境,也象征著智慧和理性。
123云盤使用了藍色,藍色符合社會的普遍審美認知,接受度比較高;其次,藍色給人安全的感覺,也符合云盤的初衷,給用戶安全的存儲服務。
7大色彩技巧讓你界面更吸睛
 
 
 
 
7、紫色的語意及應用
紫色象征神秘、高貴和浪漫;它常給人一種優雅、奢華的感覺,同時也帶有神秘莫測的氛圍,與夢幻、創造力等情感相關。
美柚的主要用戶是女性,紫色在色彩心理學中常被認為具有優雅、神秘、浪漫的特質,這些特質與女性的審美和情感需求相契合,能夠吸引女性的關注。
7大色彩技巧讓你界面更吸睛
 
 
 
 
8、白色的語意及應用
 
白色代表著純潔、神圣、信任、安靜、樸素和雅致,是一種充滿純潔的顏色,它可以跟任何顏色和諧的共生。
以下是熊掌ID的登錄界面,顏色用了大量的白與灰,簡潔又不失大氣,傳遞出了一種質樸、雅致的感覺。 
7大色彩技巧讓你界面更吸睛
 
 
 
 
 
五、不同場景下的色彩應用
 
1、商場的色彩為什么總是多彩熱烈的?
 
? 吸引顧客注意力
在眾多商業場所中脫穎而出,色彩鮮艷的商場外觀和內部裝飾更容易在人們的視線中凸顯出來,吸引過往行人的目光,激發他們的好奇心和探索欲。
 
確實多彩的顏色更加容易引起我的關注,這不看到商場的美圖,都忍不住拍照留念了,成功的吸引了我的目光。
7大色彩技巧讓你界面更吸睛
 
 
 
? 增強可見性
即使在較遠的距離或在繁忙的街道上,多彩熱烈的配色也能讓商場更容易被發現,提高商場的知名度和曝光度。
多彩的配色,讓我遠遠的就被商場美輪美奐的插畫吸引,大大增加了商場的可見性。
7大色彩技巧讓你界面更吸睛
 
 
 
?
營造愉悅氛圍
色彩可以激發積極情緒,明亮、鮮艷的色彩往往與快樂、活力和興奮等積極情緒相關聯。當顧客進入一個色彩豐富的商場時,會感受到一種愉悅和輕松的氛圍,從而更愿意在商場中停留和購物。
星沙永旺城的美陳設計很好,墻面采用極具誘惑力的顏色與美食,把小小實物十倍放大,增加了視覺看點,讓人忍不住過去拍照曬一下,大大增加了愉悅性。
7大色彩技巧讓你界面更吸睛
 
 
 
?
緩解壓力
在現代生活中,人們常常面臨各種壓力。走進一個多彩熱烈的商場,可以暫時擺脫日常的煩惱和壓力,享受購物的樂趣。
特別可愛夸張的插圖設計,引發了絲絲童趣和歡樂,讓人短暫忘記壓力,遠離煩惱。
7大色彩技巧讓你界面更吸睛
 
 
 
?
引導消費行為
商場通常會使用不同的顏色來區分不同的區域,如購物區、餐飲區、娛樂區等。這樣可以幫助顧客更快速地找到自己感興趣的區域,提高購物效率。
突出重點商品,對于一些重點推薦的商品或促銷活動,商場可以使用鮮艷的色彩來突出展示,吸引顧客的注意力,引導他們進行購買。
7大色彩技巧讓你界面更吸睛
 
 
 
?
塑造品牌形象
6.1 傳達個性和風格
不同的商場可能有不同的品牌定位和目標客戶群體。通過選擇特定的色彩組合,商場可以傳達出自己的個性和風格,吸引與之相符的顧客。
 
6.2 增強品牌記憶度
獨特而鮮明的色彩搭配可以讓商場在顧客的心中留下深刻的印象,提高品牌的記憶度和辨識度。
 
芙蓉區的龍湖天街主要面向中等收入新興家庭,是一個區域型的購物中心,集購物、餐飲、休閑、娛樂等多業態于一體,為消費者提供一站式商業綜合體,它在餐飲區采用了大量的吃喝玩樂的插畫,來引導用戶消費。
7大色彩技巧讓你界面更吸睛
 
 
 
 
2、為什么藍色在B端設計中廣泛應用?
? 視覺特性方面
1.1 穩定性
藍色給人一種沉穩、可靠的感覺。在B端產品中,用戶往往需要處理重要的業務數據和進行復雜的操作,藍色的穩定性可以讓用戶感到安心,增強對產品的信任感。
7大色彩技巧讓你界面更吸睛
 
 
 
1.2 專業性
藍色通常與科技、專業領域相關聯。B端產品通常面向企業用戶,需要傳達出專業、高效的形象,藍色正好符合這一需求。
 
? 心理影響方面
2.1 減少焦慮
相比鮮艷、刺激的顏色,藍色較為柔和,不容易引起用戶焦慮和緊張的情緒;在B端使用場景中,用戶可能需要長時間使用產品,藍色的舒緩效果有助于提高用戶的使用體驗。
 
2.2 提高專注度
藍色具有一定的沉靜作用,能夠幫助用戶集中注意力,專注于工作任務。對于B端用戶來說,高效完成工作是首要目標,藍色的這一特性有助于提高工作效率。
 
B端產品在心理上追求的是類似如下圖的這種寧靜式的體驗,跟教育有著異曲同工之處,就像這個易貝樂少兒英語一樣,用大面積的藍色,希望孩子在這里能很快的安靜下來學習、專注自己的事情。
7大色彩技巧讓你界面更吸睛
 
 
 
? 行業習慣方面
3.1 科技行業引領
許多知名的科技企業和軟件產品在 B 端市場中廣泛使用藍色,逐漸形成了一種行業習慣。其他企業在設計B端產品時,也會傾向于選擇藍色以符合用戶的認知和期望。
 
3.2 傳統與延續
在過去的設計中,藍色在 B 端領域的成功應用使得它成為了一種傳統選擇。設計師們在延續這一傳統的同時,也不斷優化和創新藍色的運用方式,使其更符合現代設計趨勢和用戶需求。
 
嘉為科技是一個有著20多年技術沉淀的科技公司,它的官網和產品風格一直是沿用著科技藍的風格,應該也是基于傳統的沉淀吧。
7大色彩技巧讓你界面更吸睛
 
 
 
?藍色可以提高產品的復用率
很多用戶都能接受藍色的B端界面,當面對有差不多需求客戶時,同一套UI,可以多次復用,可以減少開發成本和設計成本,這也是自己通過長期實戰觀察發現的。
 
一個UI風格,用在了兩個項目中,不同的用戶,趨向同樣的風格,說明藍色在大家心目中的接受度是非常的高,用藍色可以促進設計的多次復用。
7大色彩技巧讓你界面更吸睛
 
 
在日常的項目中,我看到的B端UI界面是千篇一律的穩重,不追求過于刺激的顏色搭配,通常都比較的干凈簡潔,不像商場里面的美陳背景設計,色彩對比非常的強烈,比較的吸引人眼球。
 
有一次我厭煩了常規的穩重風,探索一種大膽的色彩風格時,雖然風格比較新穎,可是發出去客戶的接受度不高,覺得太不穩重了,然后重新按照以往習慣進行設計時,就很好,客戶一致認同。
 
可見每個領域都有自己的色彩運用習慣,商場需要吸引人眼球、刺激消費,越大膽越好,可是B端設計需要提供一個讓人平靜去處理工作事項的環境,它需要安靜,不需要過于刺激的顏色搭配。
7大色彩技巧讓你界面更吸睛
 
 
 
 
 
六、色彩在B端設計中的作用?
1、通過色彩向用戶反饋操作結果及當前狀況
比方在日常設計當中,紅色代表流程失敗,綠色代表流程成功,橙色代表信息有告警,藍色代表著鏈接,同時不同的按鈕顏色也可以很好的區分按鈕狀態,在反饋結果和狀況方面,色彩起著非常重要的作用。
 
下面這個IDC運營的監測平臺,它就是通過顏色來區分不同的告警級別的,可見顏色在B端產品中的重要性。(備注:圖中數據都不是真實數據,僅做展示)
7大色彩技巧讓你界面更吸睛
 
 
 
 
2、可以很好的進行品牌傳達
B端設計中大面積使用品牌色,可以強化品牌形象,使用與品牌標志風格相近的色彩,可以幫助用戶快速識別和記住品牌,在不同的B端產品界面中使用統一的色彩方案,有助于建立品牌的連貫性和一致性,增強用戶對品牌的信任。
 
例如我給湖南高速設計的一套B端界面設計,用戶強烈要求改變傳統的藍色風格,要求整套界面設計要用湖南高速品牌色-綠色,說明在追求大流和品牌色之間,客戶更加傾向品牌的傳達。(備注:圖中數據都不是真實數據,僅做展示)
7大色彩技巧讓你界面更吸睛
 
 
 
 
3、顏色可以很好的進行信息區分
在B端界面設計中,顏色在幫助信息區分起著非常重要的作用,通常可以通過不同的色彩來區分功能區域,可以讓用戶更清晰地了解界面的結構和布局,例如,導航欄使用一種特定的顏色,而內容區域則使用另一種顏色。
 
我設計的天翼寫作,就是這樣的設計思路,導航欄和內容區的顏色完全不一樣,這里顏色起到了很好的區分作用。
7大色彩技巧讓你界面更吸睛
 
 
 
 
4、舒適的色彩搭配可以提升用戶體驗
選擇合適的色彩對比度可以增強文本的可讀性,減少用戶的視覺疲勞。例如,黑色文字在白色背景上通常比較容易閱讀。
 
選擇適當的色彩可以營造出專業、高效、舒適的工作氛圍,從而影響用戶的情緒和感受,提高用戶的使用體驗。
 
我參與的這個后臺界面,就是通過合理的色彩搭配來引導用戶使用的,當用戶已經完成的環節都是用綠色表示,沒有走完的流程就會是灰色的,寓意指示非常的鮮明,很好的解決了用戶不知道清晰進程的卡點,提升了用戶體驗。
7大色彩技巧讓你界面更吸睛
 
 
 
 
5、色彩可以傳遞性格
人的性格有活潑的、文靜的、沉穩的、深邃的,其實色彩也是有性格的,不同的色彩也有不同的性格,當我們對色彩的性格有足夠多的了解,在面對不同的客戶時,我們對色彩的拿捏以及設計需求的把握時,會更加的游刃有余。
7大色彩技巧讓你界面更吸睛
 
 
 
我們平常確實是在做設計,但是我們更多的是在與人打交道,我們更好的聆聽,會幫助我們更快的抓取到客戶的喜好,快速做出滿足客戶需求的設計,少受加班之苦。
比方說我之前給云門戶設計的一套UI,客戶的決策層是男性,且年齡偏大,他們就偏愛深沉的UI風格;而我負責的天翼云電腦專家,客戶的決策層是女性,且年齡偏年輕,她每次就喜歡輕盈、明快的UI色調,不同的決策層客戶,就會帶來不同的設計結果。
 
7大色彩技巧讓你界面更吸睛
 
 
 
 
 
七、B端色彩設計使用的原則
1、B端設計中,色彩設計應遵循6:3:1原則
在這個登錄頁面中,我就是運用的6:3:1原則,60%的主色,30%的次要色,10%的點綴色;使用了大面積的藍色和藍灰色,最后使用一點點的橙色,這樣的配色會顯得高級。
7大色彩技巧讓你界面更吸睛
 
 
 
 
2、文字、卡片背景色和邊框都使用無彩色
為了保證畫面風格的統一、干凈整潔,文字顏色、邊框顏色、以及邊框背景色都需要用到無彩色,通常通過顏色的深淺來區分信息的層級關系。
 
比方說我參與的星辰大模型AI文檔生成能力的應用,里面無論文字顏色還是底色都是運用的無彩色,只是通過了色彩深淺變化來做了層級區分,因為無彩色可以起到很好的降噪作用,既傳達了信息,又不會顯得界面凌亂復雜。
7大色彩技巧讓你界面更吸睛
 
 
 
 
3、需要凸顯的內容,用明度和純度比較高的色彩
比方說,日常我們設計的卡片都是用的白色,而底色我們用的是灰色,因為卡片里面的內容都是比較重要的信息,需要用一個亮度比較的高的顏色,讓內容往前走,而灰色的背景通常就往后走的感覺,這樣能跟卡片形成一個一前一后的對比,更好的幫助內容進行傳播。
 
比方說我設計的這個IT運維監控平臺的首頁,物理主機、網絡及安全設備、工單、在途工單這幾個指標是非常關鍵的,所以他們的圖片底色用了純度比較高的有彩色來標識。
 
7大色彩技巧讓你界面更吸睛
 
 
 
 
4、設計前一定要有定色調的意識
作為設計師,我們的設計工作其實就是在設計一種感覺,一種情緒,設計前定調的意識真的太重要了,感覺對了,什么都就對了。
 
比方說我前段時間接到了一個B端的大屏可視化需求設計,客戶說之前的大屏設計不喜歡,希望重新出一個新的設計,然后公司的需求對接人員在給我下達需求時,真的就只是給我下達了這幾個字,讓我重新出一個設計試試。
 
以我的職業直覺,感覺這個需求是不夠細化的,于是我就多問了幾句,我問客戶是想要常規的藍色調的還是別的?果然一問,客戶說不希望再用常規的藍色的,希望新的設計要用他們的品牌色綠色,剛聽到這幾個字的時候,我以為這次我把握住需求了,在收集參考圖的時候,我發現常見的綠色大屏有深色的和淺色的,根據自己以往的作圖習慣,我覺得深色會更加的受歡迎一些,我自以為是的朝著深色的方向去出圖,出到了一半的時候,我內心有些許的忐忑,我于是找了一深一淺的參考圖,讓同事跟客戶確認一下,客戶是想要深色的感覺,還是要淺色的感覺,這次溝通又給了我深深的一擊,客戶不按常理出牌,說希望按淺色的風格來出圖。
 
在出稿之前,通過自己反復的溝通確認,發現設計前的定調意識真的太重要了,要不是有出圖前一波三折的反復確認以及需求的細化,就不會有后來的一遍過稿。
7大色彩技巧讓你界面更吸睛
 
 
 
5.設計的灰色盡量使用帶有色彩偏向的灰
不管我們設計什么色系的界面,都避不開用到灰色,在設計中用跟主視覺相符的灰,會使得界面更加的高級、協調與美觀,注意好了這個小細節,會給我們的設計加分不少。
 
下面是我日常體驗到的兩個界面,上面綜合管理平臺里面的灰色就沒有跟主色調藍色相呼應,灰色沒有向藍色傾斜,界面看起來就沒那么美觀;下面通義千問的灰色設計就非常的注重細節,灰色偏紫,整個界面看起來渾然天成,毫無違和,美感、檔次瞬間提升好幾個等級。
 
一個微小細節的在意,在無形中拉高了設計的高度,十個細節乃至更多細節的在意,就會帶來更多意想不到的結果。
 
7大色彩技巧讓你界面更吸睛
 
 
 
 
總結:
以上就是我最近對色彩的一些頓悟、感受和學習收獲,在不斷的復盤總結中,我們總會收獲一些新的認知,通過這次色彩的復盤之旅,發現色彩對設計師真的太重要了,希望我的分享對大家有啟發,不足之處也歡迎大家留言交流。


作者:姝斐suphie
鏈接:https://www.zcool.com.cn/article/ZMTYzOTMwMA==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

精通B端界面設計:揭秘7大彈窗類型及其實戰案例分析

藍藍設計的小編

 
 
 
面向企業用戶、注重效率與管理、解決企業痛點、技術與服務并重、決策過程復雜
B端關注的是如何通過技術手段賦能企業,提升其業務處理能力和管理效能,是企業間或企業內部運作不可或缺的工具和服務。
彈窗-聚焦任務處理與即時提醒的高效交互工具;作為一種常見的交互設計元素,在提升用戶體驗和效率方面扮演著重要角色。
精通B端界面設計:揭秘7大彈窗類型及其實戰案例分析
 
 
精通B端界面設計:揭秘7大彈窗類型及其實戰案例分析
 
 
精通B端界面設計:揭秘7大彈窗類型及其實戰案例分析
 
 
精通B端界面設計:揭秘7大彈窗類型及其實戰案例分析
 
 
精通B端界面設計:揭秘7大彈窗類型及其實戰案例分析
 
 
精通B端界面設計:揭秘7大彈窗類型及其實戰案例分析
 
 
精通B端界面設計:揭秘7大彈窗類型及其實戰案例分析
 
 
精通B端界面設計:揭秘7大彈窗類型及其實戰案例分析
 
 
精通B端界面設計:揭秘7大彈窗類型及其實戰案例分析
 
 
精通B端界面設計:揭秘7大彈窗類型及其實戰案例分析
 
 
精通B端界面設計:揭秘7大彈窗類型及其實戰案例分析
 
 
精通B端界面設計:揭秘7大彈窗類型及其實戰案例分析
 
 
精通B端界面設計:揭秘7大彈窗類型及其實戰案例分析
 
 
精通B端界面設計:揭秘7大彈窗類型及其實戰案例分析
 
 
精通B端界面設計:揭秘7大彈窗類型及其實戰案例分析
 
 
精通B端界面設計:揭秘7大彈窗類型及其實戰案例分析
 
 
精通B端界面設計:揭秘7大彈窗類型及其實戰案例分析
 
 
精通B端界面設計:揭秘7大彈窗類型及其實戰案例分析
 
 
精通B端界面設計:揭秘7大彈窗類型及其實戰案例分析
 
 
精通B端界面設計:揭秘7大彈窗類型及其實戰案例分析
 
 
精通B端界面設計:揭秘7大彈窗類型及其實戰案例分析
 
 
精通B端界面設計:揭秘7大彈窗類型及其實戰案例分析
 
 
精通B端界面設計:揭秘7大彈窗類型及其實戰案例分析
 
 
 


作者:Miao_C
鏈接:https://www.zcool.com.cn/article/ZMTYyNDEwMA==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。
 

B端基礎 | 52000余字總結 B 端基礎設計知識

天宇

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

作者:彪形大漢pro
鏈接:https://www.zcool.com.cn/article/ZMTYyMTEyNA==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

B端用戶中心設計剖析:構建高效、定制化的企業服務平臺

藍藍設計的小編

一、引言 在數字化轉型的大潮中,B端(Business-to-Business)服務市場日益繁榮,企業對高效、智能化、定制化的業務管理系統需求迫切。B端用戶中心作為連接企業與服務商的關鍵橋梁,其設計不僅關乎用戶體驗,更直接影響到企業的運營效率與市場競爭力。本文將從設計原則、功能模塊、用戶體驗及數據安全四個維度,深入剖析B端用戶中心的設計要點。 二、設計原則 ...

UI 設計公司蘭亭妙微分享:人工智能大模型管理平臺UI設計

藍藍設計的小編

一、項目背景

(一)在當下數字化浪潮中,各類大模型如語言、圖像生成模型不斷涌現,企業與機構對其應用需求激增。然而,模型開發流程繁瑣、部署成本高昂,不同模型間數據交互與共享困難重重。同時,模型性能優化、安全管理等問題亟待解決。在此背景下,大模型管理平臺應運而生,它旨在整合資源,簡化模型開發與部署流程,提升模型性能與安全性,為各行業高效利用大模型提供有力支持,助力人工智能技術深度融入業務。

(二)該系統的原首頁中信息量比較少,在設計時除了對頁面美觀的優化,從內容、布局、用戶使用場景、使用習慣、交互方式等方 面也進行考慮,增加了一些統計的圖表, 「歷史訪問信息」采用卡片式列表,突出模塊和內容。同時增加「個人上傳記錄」信息和「歷史訪問信息」可以進行 切換查看。

二、項目概述

(一)產品定位

大模型管理平臺定位為人工智能領域的核心樞紐。它是模型全生命周期的智慧管家,從研發時整合數據與算法資源,到部署時適配多元硬件環境,再到運營中實時監測性能,全方位守護。同時,它也是跨行業的賦能引擎,為金融、醫療、制造等行業提供定制化模型服務,加速業務智能化轉型。

(二)目標用戶

大模型管理平臺的目標用戶廣泛且多元。科技企業研發團隊、金融機構從業者、醫療行業的研究人員和臨床醫生、教育領域的課程開發者與教育科技企業。此外,政府部門進行城市規劃、交通管理等決策時,也能從平臺獲取支持。這些用戶都期望通過大模型管理平臺,挖掘數據價值,實現業務的智能化升級 。

(三)設計風格

系統首頁重構信息組織架構,豐富信息 和數據,同時頁面采用精美的圖標和小 插圖提高頁面的精細美觀度。 設計風格采用簡約的設計語言,清晰、 簡潔和直觀的表達方式,模塊化布局, 強調的是界面強調可復用性和通用性, 配色采用經典藍色,藍色具有很好的兼 容性,可以與多種顏色搭配使用,形成 和諧的視覺效果。

level2_img.jpg.png

三、設計亮點

(一)流程圖設計前后對比

「模型仿真評估流程」是首頁的主要功能區,在模塊布局上加中 比例成為頁面的聚焦區域,每個節點采用小插圖,插圖方便復制 及拓展、修改,提升設計開發效率,技術實現便捷,落地相對成 本低。增加了背景圖案,使該模塊更加有空間感,同時增加了整 個頁面的靈動性。

level3_img1.png

(二)增加統計圖表

圖表能夠直觀地展示關鍵數據,使用戶一目了然地了解整體情況, 快速把握數據的變化趨勢和規律。其次,統計圖表有助于提升用 戶對數據的理解和分析能力,通過視覺化的方式展現數據間的關 聯和差異,降低理解難度,提高決策效率。同時,美觀的統計圖 表也能提升系統首頁的整體視覺效果,吸引用戶的注意力,增加 用戶的粘性。該區域后期也可以根據實際需求換成其它內容。

level3_img2.png

四、首頁其他方案欣賞

level4_img.jpg.png

蘭亭妙微(m.z1277.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。

如何做好 B 端設計色彩搭配

ui設計分享達人

一、遵循色彩基本原理

  1. 色彩心理學:不同顏色會引發不同的心理感受。例如,藍色常被視為專業、可靠,在 B 端設計中常用于表示信息的穩定和安全;綠色代表自然、健康,可用于強調環保、可持續發展相關的功能或產品。了解這些色彩心理,能讓我們在選擇顏色時更貼合產品定位和用戶心理預期。
  1. 色彩對比度:恰當的對比度能讓界面元素清晰可辨。文本與背景之間要有足夠的對比度,以確保用戶在不同環境下都能輕松閱讀。一般來說,WCAG(Web Content Accessibility Guidelines)建議正常文本的對比度至少為 4.5:1,大文本(18pt 及以上)為 3:1 。同時,在強調重要信息或操作按鈕時,也可以通過色彩對比度來突出顯示。

二、契合品牌調性

B 端產品通常與企業品牌緊密相連,色彩搭配應體現品牌的價值觀和個性。如果品牌形象是創新、活力的,那么在界面設計中可以適當加入一些明亮、活潑的色彩作為點綴;若品牌強調穩重、專業,則應以中性色和深色系為主。保持品牌色彩在 B 端產品中的一致性,有助于增強品牌辨識度,讓用戶在使用產品過程中強化對品牌的認知。

三、考慮業務場景和用戶需求

  1. 業務場景:不同的業務場景對色彩有不同的需求。例如,金融類 B 端產品可能更注重安全、可靠的視覺感受,多采用藍色、灰色等冷色調;而創意設計類的產品則可以更具靈活性,使用豐富的色彩激發用戶的創造力。
  1. 用戶群體:了解目標用戶群體的特點也很重要。如果用戶主要是年輕的互聯網從業者,他們可能對時尚、簡潔的色彩風格更感興趣;而對于年齡較大或對色彩敏感度較低的用戶,簡潔、高對比度的色彩組合會更合適。

四、構建合理的色彩體系

  1. 主色調:確定一個主色調作為界面的基礎色,它應占據界面的大部分面積,奠定整體的視覺風格。主色調的選擇要綜合考慮品牌、業務場景和用戶需求等因素。
  1. 輔助色:輔助色用于補充主色調,增強界面的層次感和豐富度。一般選擇 2 - 3 種與主色調相協調的顏色作為輔助色,可用于按鈕、圖標、分隔線等元素。
  1. 強調色:強調色用于突出重要信息或操作,吸引用戶的注意力。通常選擇與主色調形成鮮明對比的顏色作為強調色,如在藍色為主色調的界面中,橙色可以作為強調色來突出關鍵按鈕。

五、注重色彩的一致性和可擴展性

  1. 一致性:在整個 B 端產品中,保持色彩使用的一致性至關重要。無論是不同頁面之間,還是同一頁面的不同元素之間,相同類型的信息和操作都應使用相同的顏色,避免用戶產生混淆。
  1. 可擴展性:隨著產品功能的不斷增加和迭代,色彩體系需要具備一定的可擴展性。在構建色彩體系時,要預留一定的空間,以便在后續設計中能夠靈活添加新的顏色,同時又不破壞整體的協調性。
做好 B 端設計的色彩搭配需要綜合考慮多方面的因素,從色彩原理、品牌調性、業務場景到用戶需求,每一個環節都不容忽視。只有通過精心的策劃和設計,才能打造出既美觀又實用的 B 端產品界面,提升用戶體驗,助力業務發展。
 
 

如何讓 B 端深色界面設計符合用戶習慣

ui設計分享達人

深入的用戶調研是讓 B 端深色界面設計符合用戶習慣的基礎。不同行業、不同崗位的用戶對界面的需求大相徑庭。例如,設計師群體可能更注重色彩的協調性和視覺的舒適度,而數據分析師則更關注數據展示的清晰度和操作的便捷性。通過問卷調查、用戶訪談、可用性測試等方式,收集用戶對界面顏色、布局、交互方式等方面的反饋和期望,能夠為設計提供有力的依據。了解到多數用戶在長時間使用 B 端產品時,希望界面能減輕眼睛疲勞,那么在深色界面的設計中,就可以選擇低亮度、高對比度的顏色組合,以減少視覺負擔。
合理的界面布局是提升用戶體驗的關鍵。B 端產品通常功能復雜,信息量大,因此清晰、簡潔的布局至關重要。在深色界面中,應遵循用戶的操作習慣和視覺流程,將常用功能和重要信息置于顯眼位置。主導航欄可以固定在頂部或左側,方便用戶隨時切換功能模塊;操作按鈕的設計要大小適中、易于點擊,并且通過顏色和圖標進行區分,讓用戶一目了然。運用留白和層次分明的設計手法,避免界面元素過于擁擠,使信息呈現更加有序。這樣,用戶在使用過程中就能快速找到所需功能,提高工作效率。
 
色彩搭配和對比度的把握直接影響著用戶對 B 端深色界面的接受程度。雖然深色界面以深色為主色調,但并不意味著只能使用單一的黑色或深灰色??梢赃x擇富有層次感的深色系,如深藍、深紫等,作為背景色或主要元素的顏色。在文本和圖標顏色的選擇上,要確保與背景色有足夠的對比度,以保證可讀性。白色或淺灰色的文本在深色背景下通常較為清晰,但要注意避免顏色過于刺眼。對于重要的操作按鈕或提示信息,可以使用明亮的對比色進行突出顯示,吸引用戶的注意力。
交互設計要符合用戶的操作邏輯和習慣。B 端產品的用戶往往需要頻繁進行各種操作,因此簡單、高效的交互設計能夠大大提升用戶的滿意度。提供清晰的操作反饋,讓用戶知道自己的操作是否成功執行;支持快捷鍵操作,方便用戶快速完成常見任務;設計合理的菜單和彈窗,避免過多的層級嵌套,讓用戶能夠輕松地進行操作。
讓 B 端深色界面設計符合用戶習慣需要從用戶調研、界面布局、色彩搭配、交互設計等多個方面入手。只有深入了解用戶需求,不斷優化設計細節,才能打造出用戶滿意的 B 端深色界面,為用戶提供更加高效、舒適的使用體驗。
 

日歷

鏈接

個人資料

藍藍設計的小編 http://m.z1277.cn

存檔

主站蜘蛛池模板: 一区二区三区毛片免费 | 二区在线视频 | 五月天久久婷婷 | 手机在线日韩高清理论片 | 国内精品视频在线播放一区 | 亚洲午夜国产片在线观看 | 国产毛片在线高清视频 | 成人国产精品一级毛片视频 | 日韩精品免费看 | 精品在线观看免费 | 亚洲国产精品xo在线观看 | 小视频在线免费观看 | 亚洲香蕉综合在人在线时看 | 国产成人综合亚洲欧美在线n | 在线观看日本污污ww网站 | 分享一个无毒不卡免费国产 | 国产乱人乱精一区二区视频密 | 亚洲国产成人99精品激情在线 | 国产一级久久免费特黄 | 黄页网址大全免费观看不用 | 欧美 日韩 中文字幕 | 国产人成亚洲第一网站在线播放 | 青青国产成人久久91 | 婷婷月 | 亚洲精品视频免费 | 2019在线大片免费观看 | 国产精品国产福利国产秒拍 | 自拍亚洲国产 | 亚洲狠狠婷婷综合久久蜜桃 | 色的视频在线观看免费播放 | 亚洲精品在线观看91 | 成人精品一区二区不卡视频 | 丁香午夜婷婷 | 高清不卡毛片 | 久久国产精品一国产精品金尊 | 日本美女一区二区 | 午夜亚洲精品久久久久 | 日韩中文字幕高清在线专区 | 国内精品久久久久香蕉 | 午夜国产福利在线 | 97视频福利 |