工作經驗| B 端產品組件設計細節(jié)及經驗分享(一)

2021-10-27    lanlanwork


1、中性色色值為什么要使用透明度? 

有細心的用戶發(fā)現,在 Ant Design 的設計規(guī)范里,中性色色值可以按照透明度來設置,見下圖中性色色值表(百分數代表不透明度):

圖片

平時大家似乎更喜歡使用 #333333、#666666 這種色值,那使用透明色有什么優(yōu)勢呢?

我們知道,中性色主要被大量的應用在界面的文字部分,此外背景、邊框、分割線等場景中也非常常見。產品中性色的定義需要考慮背景以及有色背景的差異,同時結合 WCAG 2.0 標準。

現在  Ant Design 的色板中,透明色模式和實色模式都是有的。透明度模式可以做到背景色兼容。

如下圖示例,我們以顏色 gray-6 為例,這個顏色在實色模式的色值是 #BFBFBF,透明色模式的色值是 000000-25%。兩者在白色背景上的顏色完全相同,但是在灰色或其他顏色的背景上,卻有明顯差別:

圖片

因此在透明色模式下,以中性色為主的前景色,會與背景色有一個更明顯的色彩對比,對背景的兼容性也會更好,保證內容的可讀性。

Ant Design 提供了透明色和實色兩種顏色模式供用戶選擇,也會使組件更具通用性。

 

2、組件和設計師之間的關系是? 

當下很多常見的、優(yōu)秀的組件庫,都為設計和開發(fā)的工作提供了便利。

圖片

那么使用組件庫可以替代設計師么?組件和設計師之間的關系又是什么呢?我個人觀點如下:

 

1 . 組件是「效率」工具

組件是工具,用來為設計師和開發(fā)提升工作效率。所有組件庫的初衷都不是要替代設計師,而是要提高整個團隊的工作效率。使用組件可以從兩個方面提效:

(1)工作內容上:可以將不必要的、重復性勞動的時間節(jié)省出來

(2)工作流程上:便于設計師與前端開發(fā)做交接和協作,節(jié)省溝通成本

 

2 . 組件是「質量」保障

使用組件做設計稿,可以在一定程度上保證工作質量。組件規(guī)范了前端和設計師的工作方法,建立相對底層的系統(tǒng),設定了設計和開發(fā)的質量底線。

圖片

基于組件規(guī)范設計和開發(fā)的產品更容易具備:

(1)一致性:具備相對一致的表現樣式,設計風格和交互體驗上均可保持統(tǒng)一

(2)可用性:對于用戶操作,可以保證最基本的可理解性和可操作性

(3)審美性:符合基本審美標準,雖不會很亮眼,但也不會很難看

 

3 . 設計師要「沉淀」業(yè)務組件

設計師可以嘗試沉淀有針對性的業(yè)務組件。很多業(yè)務領域有其獨特性,比如金融類組件和政務類的產品頁面列表內容就有很大區(qū)別。單一的元素組件在應用的過程中可以被再次組合和沉淀。

舉個例子,我之前在做業(yè)務需求設計時,相比于 AntD,其實更常用的是 TechUI —— 它是建立在 AntD 基礎上的、由我們螞蟻的設計師通過對業(yè)務需求的提煉、組合和封裝,做成的一套于螞蟻自己的【業(yè)務組件】。

圖片

再總結下二者的區(qū)別:

– Ant Design:是所有人的,是通用的,是單一的原子級別的(比如一個輸入框)組件。

– TechUI:是螞蟻自己的,是私有的,是組合的區(qū)塊級別的(比如一整個表單)組件,更具備螞蟻集團自己的業(yè)務屬性。

圖片

針對你公司不同業(yè)務類型,沉淀出不同種類的區(qū)塊級別的組件,這類組件使用起來也會更加得心應手、加倍提效。這也是 B 端設計師可以去學習和精進的一點。

 

4 . 設計師要「洞察」業(yè)務訴求

使用組件可以讓設計師把節(jié)約出來的時間和精力放到更多有價值的工作上去。作為 Ant Design 的設計師之一,坦白的說,即使你的設計稿全部使用了 Ant Design 的組件搭建,最終的頁面效果也仍不完善,在用戶體驗上始終可以更進一步。

設計師應該更多去關注對用戶需求和業(yè)務邏輯的深入挖掘,不僅僅是在界面細節(jié)的表現手法上下功夫,還要學會站在全局,用系統(tǒng)性思維看待每一個項目,為整個產品的系統(tǒng)流程做優(yōu)化,做更全面的產品體驗升級。

 

原文鏈接:長弓小子(公眾號)

作者:元堯

轉載請注明:學UI網》工作經驗| B 端產品組件設計細節(jié)及經驗分享(一)

藍藍設計建立了UI設計分享群,每天會分享國內外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

藍藍設計www.bouu.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


分享本文至:

日歷

鏈接

個人資料

藍藍設計的小編 http://www.bouu.cn

存檔