做B端后臺(tái)產(chǎn)品很復(fù)雜?這里有一份完整的UI設(shè)計(jì)規(guī)范
本文是作者在不同的項(xiàng)目中不斷反思和總結(jié)。作者把自己的一些想法和經(jīng)驗(yàn)分享出來,總結(jié)自己工作中遇到的問題和解決的方法,記錄自己思考和理解的過程,希望對(duì)即將或正在從事B端后臺(tái)產(chǎn)品設(shè)計(jì)的你有一點(diǎn)點(diǎn)啟發(fā)或幫助。
寫在前面
作為一個(gè)新時(shí)代全能打雜,日常工作包括移動(dòng)端、PC端的UI設(shè)計(jì)以及各類平面視覺設(shè)計(jì),其中自然少不了令人“禿”然的B端后臺(tái)產(chǎn)品設(shè)計(jì)。
畢業(yè)兩年來一直都做著B端產(chǎn)品的UI設(shè)計(jì)工作,參與過的后臺(tái)產(chǎn)品設(shè)計(jì)面對(duì)的主要客戶有公司內(nèi)部、各大企業(yè)以及政府機(jī)構(gòu)。工作和學(xué)習(xí)的過程中走過不少彎路,也在不同的項(xiàng)目中不斷反思和總結(jié)。把自己的一些想法和經(jīng)驗(yàn)分享出來,總結(jié)自己工作中遇到的問題和解決的方法,記錄自己思考和理解的過程,也希望對(duì)即將或正在從事B端后臺(tái)產(chǎn)品設(shè)計(jì)的你有一點(diǎn)點(diǎn)啟發(fā)或幫助。
希望在日后的工作和學(xué)習(xí)中,通過實(shí)踐來不斷完善自己對(duì)B端后臺(tái)產(chǎn)品的理解。
目錄:
一、明修棧道C和暗度陳倉B
二、后臺(tái)產(chǎn)品設(shè)計(jì)思路
三、后臺(tái)產(chǎn)品設(shè)計(jì)規(guī)范
四、經(jīng)驗(yàn)觀點(diǎn)及設(shè)計(jì)資源
一、明修棧道C和暗度陳倉B
1.1 初識(shí)B端產(chǎn)品和C端產(chǎn)品
按照C端產(chǎn)品和B端產(chǎn)品的專業(yè)術(shù)語來解釋的話,C端Consumer,表示為消費(fèi)者、個(gè)人用戶或終端用戶設(shè)計(jì),直接面向普通用戶提供服務(wù)來幫助他們實(shí)現(xiàn)個(gè)人需求。B端Business,它面對(duì)商業(yè)和企業(yè),是為幫助企業(yè)集團(tuán)等實(shí)現(xiàn)商業(yè)目的而設(shè)計(jì)的軟件、工具或者平臺(tái)。
在我們?nèi)粘I钪?,在手機(jī)上使用的大多是C端產(chǎn)品,單一的C端產(chǎn)品通常是為了實(shí)現(xiàn)單一的需求,比如看網(wǎng)紅的抖音、聽音樂的酷狗、買車票的12306、社交的微信等,這些產(chǎn)品有自己的核心功能,其他的功能則是附加的,倘若沒有這些附加功能,雖然用戶體驗(yàn)感會(huì)降低,但并不會(huì)影響產(chǎn)品的核心功能。
而面向B端的產(chǎn)品,我個(gè)人稱之為“暗度陳倉”。當(dāng)個(gè)人用戶為實(shí)現(xiàn)個(gè)人需求產(chǎn)生了一系列動(dòng)作,往往伴隨著該需求的另一端也會(huì)反饋一系列動(dòng)作,即C端產(chǎn)品的后臺(tái)產(chǎn)品線(BtoC),比如淘寶賣家平臺(tái)、餓了么商家版等。除此之外,還有面向商家、企業(yè)、業(yè)務(wù)部門提供的企業(yè)級(jí)服務(wù)產(chǎn)品,以及面對(duì)企業(yè)或者個(gè)人提供的平臺(tái)級(jí)工具產(chǎn)品等。
雖說我們?nèi)粘J褂玫母嗍荂端產(chǎn)品,但是B端產(chǎn)品對(duì)我們的影響也是時(shí)時(shí)刻刻都存在著的。C端產(chǎn)品在明,逐漸改變著現(xiàn)代人的生活方式,B端產(chǎn)品在暗,間接服務(wù)于用戶,讓一切流程化秩序化,并且具有多個(gè)主要功能點(diǎn)。
- “ToB還是ToC?這是個(gè)問題……”
- “不管ToB還是ToC,最后都還是ToP(people)?!?/li>
1.2 B端和C端產(chǎn)品的區(qū)別
在我看來,C端產(chǎn)品以消費(fèi)互聯(lián)網(wǎng)為主,B端產(chǎn)品以產(chǎn)業(yè)互聯(lián)網(wǎng)為主,C端更感性,而B端更理性。
從使用者的角度來說:
- C端產(chǎn)品關(guān)鍵詞包括免費(fèi)使用、迅速上手、體驗(yàn)為王、你能讓我做什么;
- B端產(chǎn)品的關(guān)鍵詞則是付費(fèi)購買、上手緩慢、效率第一、你能為我做什么。
從開發(fā)的角度來說:
- C端周期短,B端周期長(zhǎng);
- C端用戶多,B端用戶少;
- C端邏輯簡(jiǎn)單,B端邏輯復(fù)雜;
- C端競(jìng)品較多,B端競(jìng)品較少;
- C端主戰(zhàn)場(chǎng)是移動(dòng)端,B端則是PC端;
- C端是用戶體驗(yàn)驅(qū)動(dòng),B端是解決問題驅(qū)動(dòng);
- C端產(chǎn)品的使用決策權(quán)在用戶手中,而B端產(chǎn)品的使用決策權(quán)則在客戶手中(B端客戶不一定是用戶);
- C端產(chǎn)品除了產(chǎn)品的體驗(yàn)以外,也要讓產(chǎn)品更美觀,讓活動(dòng)更有趣,讓用戶更舒服,產(chǎn)品經(jīng)理有很強(qiáng)的同理心,B端產(chǎn)品的實(shí)用性大于美觀性,能切實(shí)解決問題、配置資源的B端產(chǎn)品才是一個(gè)好的B端產(chǎn)品,產(chǎn)品經(jīng)理要具有更強(qiáng)的邏輯思維能力。
1.3 后臺(tái)產(chǎn)品常見分類
后臺(tái)產(chǎn)品按其作用可大致分為兩類:一是支撐前臺(tái)產(chǎn)品,二是管理各種資源。
我認(rèn)為后臺(tái)產(chǎn)品應(yīng)當(dāng)是囊括在B端產(chǎn)品的范圍之內(nèi)的,常見的類型包括:
- C端產(chǎn)品的后臺(tái)產(chǎn)品線——如淘寶商家版,餓了么商家版,對(duì)訂單和用戶進(jìn)行管理,支持C端產(chǎn)品的業(yè)務(wù)進(jìn)展;
- 平臺(tái)級(jí)工具產(chǎn)品——如微信公眾平臺(tái),對(duì)文章和讀者的數(shù)據(jù)統(tǒng)計(jì)和管理;各大互聯(lián)網(wǎng)公司的開放平臺(tái),如微博開放平臺(tái)等;
- 企業(yè)級(jí)服務(wù)產(chǎn)品——虛擬主機(jī)系統(tǒng)(VMware),云主機(jī)管理系統(tǒng)(深信服、xensystem、騰訊云)以及各種云SaaS;
- 企業(yè)的業(yè)務(wù)處理平臺(tái)——對(duì)內(nèi)有考勤、報(bào)銷等OA辦公系統(tǒng),對(duì)外有CRM客戶管理系統(tǒng),ERP資源及供應(yīng)鏈管理系統(tǒng)。
二、后臺(tái)產(chǎn)品設(shè)計(jì)思路
2.1 初識(shí)后臺(tái)產(chǎn)品設(shè)計(jì)
說起后臺(tái)產(chǎn)品,很容易想到復(fù)雜、龐大、邏輯縝密,而作為設(shè)計(jì)師,苦于競(jìng)品短缺、架構(gòu)復(fù)雜,設(shè)計(jì)的前期工作比設(shè)計(jì)本身要復(fù)雜得多。
后臺(tái)產(chǎn)品不同于普通用戶所使用的APP,它在用戶初次使用和短暫時(shí)間內(nèi)的認(rèn)知成本是較高的。當(dāng)用戶用慣了一個(gè)音樂類的app,再給他幾個(gè)其他的音樂APP,用戶是可以迅速上手并且輕易解決自己的需求的。而后臺(tái)產(chǎn)品則不然。
- 對(duì)于后臺(tái)產(chǎn)品來說,首先,所見之少,它并不是隨隨便便就可以下載使用的,即便你在使用的過程中,也因角色不同而受到權(quán)限限制,一般來講很難像超級(jí)管理員一樣接觸到整體功能;
- 其次,門檻之高,后臺(tái)產(chǎn)品的使用者一般都是在該行業(yè)沉淀了很久,所以要對(duì)后臺(tái)產(chǎn)品進(jìn)行設(shè)計(jì)就需要同樣了解該行業(yè)、甚至更能洞察該行業(yè),業(yè)務(wù)本身的復(fù)雜性質(zhì)決定了后臺(tái)產(chǎn)品架構(gòu)也會(huì)比較龐大;
- 然后,無論是工廠商家的進(jìn)銷存管理,還是政府醫(yī)院的工作流和業(yè)務(wù)流,乃至企業(yè)內(nèi)部的產(chǎn)品,除了不同行業(yè)都有門檻外,對(duì)信息和產(chǎn)品也有“保密協(xié)議”的使命感。所謂“隔行如隔山”,在后臺(tái)產(chǎn)品更是如此;
- 最后,后臺(tái)產(chǎn)品設(shè)計(jì)往往沒有固定的功能架構(gòu)和商業(yè)模式,對(duì)于產(chǎn)品經(jīng)理的邏輯思維能力要求更高,設(shè)計(jì)師不僅僅是做界面、優(yōu)化流程,也要主動(dòng)和產(chǎn)品經(jīng)理溝通交流,并對(duì)產(chǎn)品進(jìn)行思考和探索。
這大概就是后臺(tái)產(chǎn)品相關(guān)資源較少、設(shè)計(jì)難度較大的一些原因。
2.2 后臺(tái)UI設(shè)計(jì)工作流程
后臺(tái)UI設(shè)計(jì)的工作,大體分為三個(gè)部分:需求分析——設(shè)計(jì)執(zhí)行——數(shù)據(jù)分析。
在需求分析階段,要對(duì)產(chǎn)品本身和行業(yè)本身有一些基本的認(rèn)知。要了解產(chǎn)品的基本情況,比如:產(chǎn)品目標(biāo)、用戶人群、產(chǎn)品定位、需求分析、功能模塊、主要競(jìng)品和產(chǎn)品特色。
做這個(gè)產(chǎn)品是為了解決什么問題?想實(shí)現(xiàn)什么目標(biāo)?使用這個(gè)系統(tǒng)的用戶有哪些?不同角色的用戶有哪些具體的權(quán)限?是否需要對(duì)每一個(gè)用戶的行為都生成操作日志?產(chǎn)品有哪些主要的功能模塊?產(chǎn)品的業(yè)務(wù)流程是怎樣的?有哪些同類型的產(chǎn)品?和他們相比我們的產(chǎn)品有什么特色和特點(diǎn)?
成功的做出大而全的后臺(tái)產(chǎn)品,是整個(gè)設(shè)計(jì)團(tuán)隊(duì)和開發(fā)團(tuán)隊(duì)能力的體現(xiàn),而對(duì)很多小團(tuán)隊(duì)來說,只能做一些大團(tuán)隊(duì)不愿去做的產(chǎn)品,或另辟蹊徑在某些方面做專做精。
在設(shè)計(jì)執(zhí)行階段,參照PM給出的功能清單做原型和流程的梳理,需要關(guān)注的有當(dāng)前版本規(guī)劃、功能模塊、功能類型、功能描述、任務(wù)優(yōu)先級(jí)、完成時(shí)間等,交互原型則伴隨著功能描述、規(guī)則判定條件、觸發(fā)條件等內(nèi)容。
原型設(shè)計(jì)完成,開始做UI視覺方面的設(shè)計(jì),而這時(shí)后端同步構(gòu)思需求的實(shí)現(xiàn)方案。UI設(shè)計(jì)師向前端了解實(shí)現(xiàn)框架,方便交接和溝通。當(dāng)界面實(shí)現(xiàn),UI設(shè)計(jì)師應(yīng)該是最早進(jìn)行測(cè)試的,力求視覺設(shè)計(jì)和代碼實(shí)現(xiàn)無誤差。在完成設(shè)計(jì)執(zhí)行后,從信息層級(jí)、文字、圖標(biāo)、圖片等方面進(jìn)行設(shè)計(jì)走查,進(jìn)行多次設(shè)計(jì)驗(yàn)證與測(cè)試。
數(shù)據(jù)分析是產(chǎn)品優(yōu)化迭代的重要依據(jù)。進(jìn)行多番測(cè)試和評(píng)審后交付客戶(或內(nèi)部)使用,根據(jù)產(chǎn)生的具體問題進(jìn)行不斷迭代,且觀察產(chǎn)品能否通過準(zhǔn)確的數(shù)據(jù)反映問題、體現(xiàn)能力,應(yīng)虛心接納使用者的使用建議并嚴(yán)謹(jǐn)思考其合理性,用戶的使用和反饋是優(yōu)化產(chǎn)品的重要途徑。只有達(dá)到了管理和運(yùn)營(yíng)的指標(biāo),后臺(tái)產(chǎn)品才是真正產(chǎn)生了價(jià)值。
2.3 制定設(shè)計(jì)規(guī)范的作用
為后臺(tái)產(chǎn)品制定設(shè)計(jì)規(guī)范有哪些作用和好處呢?簡(jiǎn)單來說就是對(duì)產(chǎn)品好、對(duì)自己好、對(duì)團(tuán)隊(duì)好、對(duì)客戶好。
- 對(duì)產(chǎn)品——在項(xiàng)目完成第一版較為穩(wěn)定的版本時(shí),著手制定設(shè)計(jì)標(biāo)準(zhǔn),統(tǒng)一公司視覺設(shè)計(jì)規(guī)范及某些特定交互設(shè)計(jì)規(guī)范。同一個(gè)項(xiàng)目會(huì)有多個(gè)設(shè)計(jì)師的參與,規(guī)范化的設(shè)計(jì)語言,避免因設(shè)計(jì)控件混亂而影響設(shè)計(jì)輸出;
- 對(duì)自己——組件化同類元素,提高工作效率,建立公司產(chǎn)品的組件庫,以便不同項(xiàng)目的復(fù)用及設(shè)計(jì)延展;在同一個(gè)項(xiàng)目中也能更好的把控該項(xiàng)目的視覺規(guī)范,提高效率;
- 對(duì)團(tuán)隊(duì)——設(shè)計(jì)規(guī)范的制定,規(guī)范了設(shè)計(jì)團(tuán)隊(duì)的輸出,同時(shí)方便了與開發(fā)團(tuán)隊(duì)的交接和協(xié)作。通過設(shè)計(jì)規(guī)范的制定,前端實(shí)現(xiàn)也能擁有一套可供復(fù)用和擴(kuò)展的組件庫,助力上下游交接及團(tuán)隊(duì)協(xié)作;
- 對(duì)客戶——制定設(shè)計(jì)規(guī)范的同時(shí)需要考慮設(shè)計(jì)延展性,為不同客戶的定制化需求提供更高效的輸出。同時(shí)在進(jìn)行產(chǎn)品迭代時(shí),設(shè)計(jì)規(guī)范的組件化調(diào)整也大大提高了工作效率。
三、后臺(tái)產(chǎn)品設(shè)計(jì)規(guī)范
*以下內(nèi)容僅供參考和交流,圖片內(nèi)容不代表真實(shí)尺寸,請(qǐng)結(jié)合特定產(chǎn)品靈活使用。
3.1 頁面布局
(1)統(tǒng)一尺寸
據(jù)統(tǒng)計(jì),目前PC端用戶屏幕分辨率占比排名前三的是1920*1080、1366*768、1440*900,以1440來設(shè)計(jì)的話,向上適配或者向下適配誤差會(huì)比較小。
(2)適配方案
面向多個(gè)客戶,后臺(tái)產(chǎn)品設(shè)計(jì)功能型頁面的尺寸統(tǒng)一為1440*900,按照柵格系統(tǒng)原則向上或向下適配;展示型頁面以1440*900為主,同時(shí)設(shè)計(jì)出極端情況(寬度為1280以及寬度為1920)的效果圖,力求實(shí)現(xiàn)前端實(shí)現(xiàn)效果和高保真設(shè)計(jì)圖誤差最小。
面向公司內(nèi)部的后臺(tái)系統(tǒng),由于各個(gè)職工電腦屏幕是統(tǒng)一采購、統(tǒng)一尺寸,所以開發(fā)適配的分辨率可以統(tǒng)一尺寸進(jìn)行設(shè)計(jì),這個(gè)尺寸根據(jù)公司內(nèi)部采購屏幕的尺寸和分辨率選擇即可(提前和前端溝通好)。
(3)頁面框架
頁面框架主要分為左右欄布局和上下欄布局,還有其他的布局。
- 左右欄布局包括頂部欄、左側(cè)菜單欄、主體內(nèi)容三大區(qū)域,其中頂部菜單欄、左側(cè)菜單欄為固定結(jié)構(gòu),右側(cè)主體內(nèi)容根據(jù)分辨率進(jìn)行動(dòng)態(tài)縮放;
- 上下欄布局包括頂部菜單欄和主體內(nèi)容兩大區(qū)域,其中頂部菜單欄為固定結(jié)構(gòu),主體內(nèi)容進(jìn)行動(dòng)態(tài)縮放且需定義主體內(nèi)容左右兩邊空白區(qū)域最小值;
- 左右欄布局時(shí),左側(cè)菜單可收縮展開,收縮狀態(tài)下固定寬度。
(4)柵格布局
柵格系統(tǒng)的使用是為了解決自適應(yīng)和響應(yīng)式問題,從而更好地進(jìn)行產(chǎn)品設(shè)計(jì)和產(chǎn)品開發(fā)。響應(yīng)式柵格采用24列柵格體系實(shí)現(xiàn),以滿足2,3,4,5,6分比布局等多種情況。固定寬度Column,將間隔Gutter進(jìn)行動(dòng)態(tài)縮放。需要柵格化處理的內(nèi)容的總寬度=23列(1列=1寬度Column+1間隔Gutter)+1寬度Column=24寬度Column+23間隔Gutter。
谷歌規(guī)定模塊和結(jié)構(gòu)之間要以8px為基準(zhǔn),布局間相對(duì)間距可采用8px以及8的倍數(shù),但一些小組件(按鈕、間隔、輸入框 )可以以4為基準(zhǔn)。柵格布局是為了輔助設(shè)計(jì),靈活運(yùn)用,不要被它所局限。
(5)尺寸設(shè)定
一般在整體區(qū)域左上角放置產(chǎn)品LOGO及產(chǎn)品名稱,大部分系統(tǒng)頂部欄高度48+8n,側(cè)邊欄寬度200+8n。我常用的是頂部欄高度56px,側(cè)邊欄寬度200px,側(cè)邊欄收縮狀態(tài)寬度56px,右側(cè)的側(cè)浮窗寬度400px。
(6)相對(duì)間隔
定義主體內(nèi)容的上下左右邊距,定義主體區(qū)域內(nèi)各模塊的邊距及安全寬度,超出內(nèi)容區(qū)域的部分采用區(qū)域內(nèi)滾動(dòng)或整屏滾動(dòng),視情況固定導(dǎo)航欄。
3.2 標(biāo)準(zhǔn)色
顏色分為品牌色、輔助色、中性色。根據(jù)不同產(chǎn)品的不同需求,可能也會(huì)將統(tǒng)計(jì)圖、標(biāo)簽等進(jìn)行統(tǒng)一標(biāo)準(zhǔn)色設(shè)定。
品牌色即產(chǎn)品主色,產(chǎn)品主色的設(shè)定直接影響產(chǎn)品氣質(zhì)和直觀感受,也是產(chǎn)品直接對(duì)外的形象。品牌色要根據(jù)產(chǎn)品特性、用戶使用場(chǎng)景、產(chǎn)品定位等進(jìn)行選取,盡量做好色彩的延伸性,可支持換膚。品牌色的應(yīng)用場(chǎng)景包括操作狀態(tài)、按鈕色、可操作圖標(biāo)等。
- 輔助色用于提示其他場(chǎng)景,比如:成功、失敗、警告、無效等。
- 中性色常用于文本、背景、邊框、分割線等,需要考慮深色背景和淺色背景的差異,可以選擇同一色相控制透明度變化,用來表現(xiàn)不同的層級(jí)結(jié)構(gòu)。
- 其他色如統(tǒng)計(jì)圖、數(shù)據(jù)可視化、多個(gè)標(biāo)簽的不同配色方案根據(jù)項(xiàng)目情況單獨(dú)設(shè)定。
3.3 標(biāo)準(zhǔn)字
后臺(tái)系統(tǒng)常用的字體:windows系統(tǒng),中文Microsoft YaHei,英文Arial;Mac字體,中文PingFang SC,英文Helvetica;除此之外可以選擇的字體還有segoe UI、思源黑體、Hiragino Sans GB等。
后臺(tái)系統(tǒng)中常用字體大小為12px、13px、14px、16px、18px、20px、24px、30px。
行高設(shè)定,根據(jù)文字大小及使用場(chǎng)景設(shè)置行高,一般行高=文字大小+6px/8px。
3.4 圖標(biāo)
圖標(biāo)是UI設(shè)計(jì)中重要組成部分,一般分為功能圖標(biāo)和應(yīng)用圖標(biāo),以圖形的方式傳達(dá)概念,可以降低理解成本,使得界面更加協(xié)調(diào)美觀。在后臺(tái)產(chǎn)品中,圖標(biāo)的功能則更偏向輔助性,輔助用戶對(duì)功能的認(rèn)識(shí)。
除了某些常用的圖標(biāo),有一些專業(yè)性的操作和詞匯則需要設(shè)計(jì)師進(jìn)行繪制,現(xiàn)在比較高效方便的方法是在iconfont提供的圖標(biāo)模板上用AI繪制,畫板1024*1024,提供圓形、正方形、矩形形狀(文末提供下載)。圖標(biāo)尺寸按照8的倍數(shù)進(jìn)行延展,繪制完成后生成svg格式文件,提交到阿里巴巴矢量圖標(biāo)庫的項(xiàng)目組里,方便前端調(diào)用,調(diào)整大小和顏色更為方便,且能夠優(yōu)化系統(tǒng)內(nèi)存和性能。
分享一個(gè)我個(gè)人常用的AI使用小習(xí)慣,因?yàn)閏trl+q、ctrl+w作為退出和關(guān)閉我用的不多,而且有時(shí)候手抖會(huì)在保存時(shí)候不小心點(diǎn)成了關(guān)閉,所以我無情地把ctrl+q、ctrl+w變成了拓展和拓展外觀的快捷鍵……感受還不錯(cuò)。
3.5 按鈕
按鈕是后臺(tái)產(chǎn)品進(jìn)行交互設(shè)計(jì)是重要元素,提供給用戶進(jìn)行點(diǎn)擊操作,是視覺上最引人注目的控件,具有一定的視覺受范性。常用按鈕可分為填充按鈕、線性按鈕、文字按鈕。
按鈕的交互狀態(tài)包括默認(rèn)、懸停、點(diǎn)擊和不可用。按鈕根據(jù)需求分為不同尺寸,大中小三個(gè)級(jí)別用在不同的場(chǎng)景,一般按照8的倍數(shù)設(shè)定,如高度分別設(shè)定為24、32、40px。
規(guī)范整理時(shí)要規(guī)定不同類型按鈕的寬高、圓角及文字大小,同時(shí)還要將按鈕的不同狀態(tài)展現(xiàn)出來。
填充按鈕之間間距最小為10px。
3.6 導(dǎo)航
導(dǎo)航的類型有很多種,常用的比如:頂欄菜單、側(cè)欄菜單、折疊菜單、下拉菜單、面包屑、分頁、步驟條、時(shí)間軸、tab標(biāo)簽頁、膠囊菜單、徽標(biāo)數(shù)等。各類導(dǎo)航中的字體大小可進(jìn)行統(tǒng)一設(shè)定。
- 頂欄菜單多為一級(jí)菜單,點(diǎn)擊切換,或作為下拉菜單的父級(jí),將子級(jí)菜單合理分類。
- 側(cè)欄菜單為垂直導(dǎo)航菜單,可以內(nèi)嵌子菜單。
- 下拉菜單的觸發(fā)方式一般有鼠標(biāo)懸停和鼠標(biāo)點(diǎn)擊兩種。步驟條引導(dǎo)用戶按照流程來完成任務(wù),一般步驟不得少于兩步。分頁的高度設(shè)定為24px、30px、32px,根據(jù)應(yīng)用場(chǎng)景適當(dāng)增減內(nèi)容,比如設(shè)定每頁展示數(shù)據(jù)的條數(shù)、跳轉(zhuǎn)至指定頁等。
- 面包屑用于說明層級(jí)結(jié)構(gòu),使用戶明確當(dāng)前所在位置,并且可以回到任一上級(jí)頁面。
- 徽標(biāo)數(shù)用來通知用戶當(dāng)前有未讀消息,一般出現(xiàn)在圖標(biāo)的右上角或者跟在文字后面。
3.7 表單
表單多由一條或多條列表項(xiàng)組成,單一列表項(xiàng)的類型有字段輸入框、條件選擇器。
字段輸入框的標(biāo)題和輸入框分布方式包括左右、上下、無標(biāo)題。左右分布是常見的對(duì)齊方式,比較適合PC端的使用;上下分布增加了表單的整體高度,視情況選擇使用;無標(biāo)題經(jīng)常應(yīng)用在登錄注冊(cè),雖然減少了面積,但是增加了理解難度。
輸入框的交互狀態(tài)包括默認(rèn)、輸入結(jié)果、提示錯(cuò)誤、禁用、獲取焦點(diǎn)。輸入框的尺寸可按照8的倍數(shù)進(jìn)行設(shè)定,比如:24px、32px,也可根據(jù)系統(tǒng)實(shí)際情況進(jìn)行設(shè)定。我常用的輸入框高度為30px,寬度視情況而定,無圓角。上下布局的多個(gè)輸入框上下間距為20px,有錯(cuò)誤提示時(shí)候豎向增加10px或橫向顯示在輸入框右側(cè)(預(yù)留出位置)。
表單中標(biāo)題文字左對(duì)齊,輸入框左對(duì)齊,標(biāo)題文字距離輸入框20px(多個(gè)長(zhǎng)度不同的輸入框算最長(zhǎng)的);標(biāo)題文字右對(duì)齊,輸入框左對(duì)齊,也是常用的方式。輸入框內(nèi)正文字體14px,文字和左右兩邊邊框的邊距10px。
選擇器包括單選、多選、時(shí)間選擇、開關(guān)切換、下拉選擇、滑塊選擇、旋鈕等。單選框多為圓形,復(fù)選框多為方形。
搜索框和選擇框的高度為30px或按照8的倍數(shù)自行設(shè)定,通常和輸入框保持一致。搜索框距離右側(cè)按鈕4px,內(nèi)部文字14px。單選多選框尺寸16*16px,多個(gè)選項(xiàng)橫向排列間距16px,縱向排列間距8px。開關(guān)按鈕外框40*20px,內(nèi)部圓形16*16px。
3.8 表格
表格在后臺(tái)產(chǎn)品UI設(shè)計(jì)中站的比重非常大,用來展示數(shù)據(jù)、統(tǒng)一管理、作為詳情入口,是最清晰、高效的形式之一。在設(shè)計(jì)規(guī)范中需設(shè)定表頭高度、表格行高、表格列寬范圍,同時(shí)也包括表格中的按鈕樣式、標(biāo)簽樣式。
表格主要分為五大區(qū)域:選擇搜索區(qū)、操作區(qū)、表頭、正文、底欄。
- 選擇搜索區(qū)放置篩選框和搜索框,為用戶提供按需搜索,可以大大提高用戶效率;
- 操作區(qū)指各種對(duì)表格內(nèi)容進(jìn)行增刪改查、批量處理、配置列的動(dòng)作;
- 表頭展示列標(biāo)題,一般具有排序功能;
- 正文主要展示各種各樣的數(shù)據(jù),要注意行高、對(duì)齊、分割、信息層級(jí)等,要考慮是否提供行內(nèi)操作;
- 底欄顯示分頁、總數(shù)統(tǒng)計(jì)等。
表格信息一般主要功能為增刪改查,查看和編輯是最基本的功能,表格信息支持篩選、搜索、排序、分頁。對(duì)可批量操作的表格數(shù)據(jù)在第一列增加多選框。
(1)行高
表格行高可設(shè)置為表格內(nèi)字體高度的2~3倍,主表格會(huì)間隔顯示不同顏色,用于區(qū)分不同行數(shù)據(jù)、加強(qiáng)視覺流引導(dǎo),展開單行的內(nèi)置表格可采用純色,選中行應(yīng)有視覺上的反饋。表頭要和表格內(nèi)容有視覺上的區(qū)分。表格行高可采用36、40、48、60等。
(2)行數(shù)
表格行數(shù)太多加載速度會(huì)降低,延長(zhǎng)用戶等待時(shí)間;行數(shù)太少會(huì)導(dǎo)致用戶不斷翻頁,降低使用效率。比較合適的默認(rèn)表格行數(shù)是20或50,用戶可以根據(jù)自己需求選擇默認(rèn)的行數(shù)。設(shè)定行數(shù)之后,如果每頁行數(shù)多余每屏行數(shù),可在表格內(nèi)引入滾動(dòng)條,這時(shí)可以固定表頭滾動(dòng)內(nèi)容。
(3)列寬
列寬根據(jù)內(nèi)容字段長(zhǎng)短需要有不同且合理的默認(rèn)值,使得表格字段有良好的展示效果。列內(nèi)容的長(zhǎng)度固定時(shí),列寬應(yīng)大于固定寬度(比如時(shí)間、MD5、SHA1);列內(nèi)容不固定時(shí),能預(yù)判最大寬度的按照最大寬度設(shè)定列寬(比如IP地址、MAC地址、姓名),不能預(yù)判最大寬度的設(shè)定列寬按照常用寬度,多于內(nèi)容省略以“…”展示,鼠標(biāo)懸停出現(xiàn)完整內(nèi)容(比如詳情、描述)。
(4)列數(shù)
表格列不應(yīng)過多,列數(shù)比較多的情況下應(yīng)該合理進(jìn)行合并、隱藏、刪除或進(jìn)行優(yōu)先級(jí)處理。常用的方法有引入配置列,用戶可自定義展示必需列以外的其他列;只展示重要信息,下拉展開列查看完整信息;在表格中引入橫向滾動(dòng)條,根據(jù)實(shí)際情況選擇是否要始終固定基本信息列(如第一列是文件名)和操作列(最后一列的操作)。
(5)對(duì)齊方式
表格內(nèi)的文本應(yīng)按照文本類型不同進(jìn)行統(tǒng)一規(guī)范,如金額類數(shù)值保留相同位數(shù)小數(shù),SHA1雖然是一串?dāng)?shù)字但是其實(shí)那并不是數(shù)據(jù)而是一串編碼,所以可以像文文本一樣左對(duì)齊。根據(jù)文本內(nèi)容不同,對(duì)齊方式也應(yīng)靈活調(diào)整,可采用文本左對(duì)齊、數(shù)據(jù)右對(duì)齊、金額小數(shù)點(diǎn)對(duì)齊的方式。數(shù)據(jù)前面有標(biāo)簽的,將標(biāo)簽前置對(duì)齊。類似IP地址、MD5、SHA1、域名這樣的信息,也可以根據(jù)產(chǎn)品需要在文本前面增加“復(fù)制”圖標(biāo),方便用戶調(diào)用。
(6)詳情入口
表格內(nèi)部數(shù)據(jù)的詳情入口,將能點(diǎn)擊下鉆查看詳情的內(nèi)容以不同顏色表示,同時(shí)在表格行最后一列操作按鈕部分放置一個(gè)查看按鈕。
3.9 反饋
包括彈框、側(cè)滑框、骨架屏、全局提示、警告提示、消息提醒、加載狀態(tài)等。分為模態(tài)框和非模態(tài)框,區(qū)別是是否會(huì)打斷用戶工作流。
彈框又稱對(duì)話框,是疊加在應(yīng)用主窗口上的彈出式窗口,以對(duì)話的方式使用戶參與進(jìn)來。
- 彈框——彈框出現(xiàn)時(shí),主題內(nèi)容增加一層遮罩#000,透明度50%,避免使用雙層彈框,可同時(shí)采用有關(guān)閉圖標(biāo)的彈框和無關(guān)閉圖標(biāo)的彈框,引導(dǎo)用戶對(duì)內(nèi)容進(jìn)行正確操作。如果設(shè)定系統(tǒng)內(nèi)所有彈框均可以點(diǎn)擊彈框外區(qū)域關(guān)閉, 則需要為用戶新增或編輯內(nèi)容的彈框彈出二級(jí)確認(rèn)的彈框,或者再次進(jìn)行交互梳理。
- 側(cè)滑框——又稱抽屜,出現(xiàn)在右側(cè),固定寬度400px,高度覆蓋在主題內(nèi)容之上,點(diǎn)擊側(cè)滑框以外的區(qū)域則收起側(cè)滑框。
- 骨架屏——為某些特定數(shù)據(jù)提供數(shù)據(jù)加載等待時(shí)的占位圖形組合。
- 全局提示——建議停留時(shí)間3s,可根據(jù)文字字?jǐn)?shù)調(diào)整停留時(shí)間,文字內(nèi)容限制在30以內(nèi)。
- 警告提示——用不同顏色和樣式展示需要關(guān)注的信息。
- 通知提醒——消息通知和告警信息用通知提醒框,單個(gè)消息從頁面右側(cè)以抽屜的方式劃出,用戶可手動(dòng)關(guān)閉,或停留3s后自動(dòng)關(guān)閉。
3.10 缺省狀態(tài)
繪制不同類型的情感畫插畫表示缺省狀態(tài),如:404、500、暫時(shí)沒有數(shù)據(jù)、沒有新消息等。
頁面需要一個(gè)默認(rèn)的底色,錯(cuò)誤文字使用14px,與情感化插畫間距20px,與按鈕間距30px。
3.11 數(shù)據(jù)可視化
數(shù)據(jù)可視化部分可能是后臺(tái)產(chǎn)品中對(duì)視覺設(shè)計(jì)要求較高的部分,使用情境為各類統(tǒng)計(jì)圖、大屏展示頁面等。
功能型頁面的數(shù)據(jù)可視化可以引入圖形化設(shè)計(jì)組件,Echarts、G2、d3等;展示型頁面的數(shù)據(jù)可視化則可以做的更有趣,比如立體的統(tǒng)計(jì)圖、粒子地球效果、靈活有趣的網(wǎng)絡(luò)拓?fù)鋱D等。
考慮到數(shù)據(jù)可視化可能會(huì)需要深色淺色不同的背景,在數(shù)據(jù)可視化統(tǒng)計(jì)圖的色彩搭配上要注意顏色的拓展性。
四、經(jīng)驗(yàn)觀點(diǎn)及設(shè)計(jì)資源
4.1 設(shè)計(jì)前端一家親
Ant Design的設(shè)計(jì)組件,實(shí)現(xiàn)框架React、Angular——https://ant.design/docs/spec/layout-cn
Element的設(shè)計(jì)組件,實(shí)現(xiàn)框架Vue 2.0、 Angular——http://element-cn.eleme.io/#/zh-CN/component/checkbox
iView的設(shè)計(jì)組件,實(shí)現(xiàn)框架Vue——https://www.iviewui.com/docs/guide/theme
飛冰的設(shè)計(jì)組件,實(shí)現(xiàn)框架React——https://alibaba.github.io/ice/
Layui的設(shè)計(jì)組件——https://www.layui.com/demo/grid.html
G2可視化圖形組件——https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html
Echarts可視化圖形組件——https://echarts.baidu.com/
d3.js可視化圖形組件——https://github.com/d3/d3/wiki/Gallery
在線柵格化計(jì)算工具——http://grid.guide/#/1000/24/34/8/0
4.2 不丑也要多讀書
《B端產(chǎn)品經(jīng)理必修課》
《交互設(shè)計(jì)精髓》
《U一點(diǎn)料·Ⅱ》
《簡(jiǎn)約至上:交互式設(shè)計(jì)四策略》
4.3 文章和作品推薦
Christie Tang《如何更好地使用柵格系統(tǒng)》——原版https://uxdesign.cc/responsive-grids-and-how-to-actually-use-them-970de4c16e01?中文版https://www.ui.cn/detail/465158.html
UXBoy《柵格系統(tǒng)及其在后臺(tái)設(shè)計(jì)中的應(yīng)用》——https://www.uisdc.com/grid-system-and-application-in-background-design
蝸牛醒《新人來收!10分鐘幫你掌握柵格系統(tǒng)基礎(chǔ)知識(shí)!》——https://www.uisdc.com/grid-system-basics
MrLei《原子化設(shè)計(jì)-后臺(tái)產(chǎn)品組件庫建設(shè)》——https://www.zcool.com.cn/article/ZOTYyNTQw.html
八戒Maria《如何寫后臺(tái)系統(tǒng)UI設(shè)計(jì)規(guī)范?》——https://www.zcool.com.cn/article/ZODIwNTg4.html
千夜Ryan_Vision《B端產(chǎn)品設(shè)計(jì)》——https://www.uisdc.com/product-design-to-business
Z清暉《面向企業(yè)中后臺(tái)產(chǎn)品的設(shè)計(jì)系統(tǒng)大合集》——https://www.ui.cn/detail/409269.html
BruceXLS《B端網(wǎng)頁設(shè)計(jì)規(guī)范全方位匯總》——https://www.ui.cn/detail/427365.html
可樂Cola《如何利用走查表驅(qū)動(dòng)設(shè)計(jì)改版》——https://www.ui.cn/detail/451478.html
Michal Parulski的后臺(tái)可視化設(shè)計(jì)作品——https://dribbble.com/Shuma87
zoeyshen的后臺(tái)可視化設(shè)計(jì)作品——https://dribbble.com/zoeyshen
三魚先生的數(shù)據(jù)可視化設(shè)計(jì)作品——https://feizai.zcool.com.cn/
寫在后面
不管是做C端產(chǎn)品還是B端產(chǎn)品,都是為了實(shí)現(xiàn)用戶的需求、幫用戶解決問題。
剛接觸后臺(tái)產(chǎn)品的UI設(shè)計(jì)師工作時(shí)候,最希望能把產(chǎn)品做的炫酷、美觀,工作中慢慢地發(fā)現(xiàn)項(xiàng)目的背后思考更為重要,產(chǎn)出的設(shè)計(jì)成果也應(yīng)該有理有據(jù)、支撐整個(gè)設(shè)計(jì)體系。
網(wǎng)上供大家使用和學(xué)習(xí)的資源非常多,對(duì)一些公司來說、專門去制定一套自己的后臺(tái)設(shè)計(jì)規(guī)范不免顯得費(fèi)時(shí)費(fèi)力,合理引入antdesign和element等開源的設(shè)計(jì)組件,會(huì)使得設(shè)計(jì)師以及設(shè)計(jì)師的好朋友前端小哥哥事半功倍,有助于設(shè)計(jì)師把更多的精力投入到沉淀行業(yè)知識(shí)、研究產(chǎn)品架構(gòu)、梳理交互方式和創(chuàng)新視覺表現(xiàn)上。
在后臺(tái)產(chǎn)品的設(shè)計(jì)過程中,更應(yīng)該把寶貴的時(shí)間用在更值得關(guān)注的事物上,讓設(shè)計(jì)師能夠輔助業(yè)務(wù)挖掘,從趨于相同的表象中找到產(chǎn)品獨(dú)有的閃光點(diǎn),從而切實(shí)解決問題和實(shí)現(xiàn)價(jià)值。
希望對(duì)你有幫助~
本文由 @阿北 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自Unsplash,基于CC0協(xié)議
有個(gè)疑問想跟各位同行交流一下,就是咱們的后臺(tái)規(guī)范發(fā)布下去以后,如何進(jìn)行驗(yàn)收呢?如何保證自己的規(guī)范得到執(zhí)行落實(shí)?
太棒啦
時(shí)隔一年來自本文作者的碎碎念:很榮幸能在這個(gè)平臺(tái)分享自己的這篇筆記,謝謝各位的認(rèn)可支持與批評(píng)建議!??!在這里收到了很多鼓勵(lì)和意見,現(xiàn)在再看這篇文章,自己也覺得真是“又臭又長(zhǎng)”??但是還是有一些自己的說明:(1)占星的星大佬說寫的啰里啰嗦——B端產(chǎn)品真的很復(fù)雜呀,我最初對(duì)于后臺(tái)產(chǎn)品的感覺就是這樣,繁瑣復(fù)雜云里霧里,想努力整理出一套清晰的邏輯,所以不是文章啰嗦,是后臺(tái)復(fù)雜,哈哈,我是完美呈現(xiàn)了在B端產(chǎn)品里一臉懵逼的我…(2)可以用餓了么之類的組件庫——正如Fier Bee這位小伙伴所說,共享資源是可以用,但是不同行業(yè)不同業(yè)務(wù),往往用了也需要加以修改,再生成自己的組件庫。而且組件庫OK以后,還可以根據(jù)業(yè)務(wù)需要整理通用模塊、通用頁面,是提高效率的利器呀~我現(xiàn)在在銀行工作,銀行自己有好幾套組件庫,現(xiàn)在在整理通用模板,而且還在不斷完善(而且港澳臺(tái)有些大佬不喜歡表單表格的形式,想要更多有創(chuàng)意的后臺(tái)設(shè)計(jì))。(3)做后臺(tái)的UI精力應(yīng)該放在交互上——交互是產(chǎn)品和設(shè)計(jì)師一起來做的(其實(shí)我現(xiàn)在是收到文字或者表格的需求文檔直接交互UI一起做,只有項(xiàng)目經(jīng)理沒有產(chǎn)品經(jīng)理),組件化是為了提高自己的工作效率,然后有更多的時(shí)間研究交互和體驗(yàn)呀,所以組件化屬于前人栽樹后人乘涼,交互和邏輯要靠行業(yè)的沉淀和浸潤(rùn),我寫文章的理念也是希望大家好好做交互。(4)產(chǎn)品的某些講解誤人子弟——我針對(duì)自己待過的行業(yè)和自己淺薄的理解整理自己的筆記,會(huì)有很多不足之處,如果因?yàn)槲业倪@篇筆記給哪位小伙伴造成了職業(yè)生涯的斷裂我表示…應(yīng)該不太可能??如果涉及到某些行業(yè)我講的不對(duì),懇請(qǐng)有行業(yè)知識(shí)的大佬不吝賜教,對(duì)我批評(píng)教育的同時(shí)也讓看到這篇筆記的其他小伙伴引以為戒,先謝謝您了?。。?)寫這篇筆記的初心,是之前一直在只有一位設(shè)計(jì)師的小公司摸爬滾打,從app開始了解UI,在做pc端和后臺(tái)時(shí)候走了很多彎路,所以分享出來一些自己的經(jīng)驗(yàn)教訓(xùn),希望能大家提供一點(diǎn)點(diǎn)幫助和警示,能有幫助我就很開心了~能得到大佬的批評(píng)指正真的很榮幸~(6)最后,喜歡和選擇設(shè)計(jì)行業(yè),就是因?yàn)楦杏X這個(gè)行業(yè)的大家熱心、友好,前輩會(huì)對(duì)新人不吝賜教,大家也都各抒己見,互相幫助共同進(jìn)步的氛圍真的很美妙,所以在受到很多幫助之后,也希望自己能幫助到大家哪怕一點(diǎn)點(diǎn),當(dāng)然啦,我也在繼續(xù)學(xué)習(xí)和努力,希望能產(chǎn)出更多有價(jià)值的東西。真的非常感謝大家,啥也不說了,比個(gè)心吧~?
還會(huì)繼續(xù)寫新文章嗎
大佬,萌新有個(gè)疑問,在24柵格中,gutter跟culomn的值誰固定。
https://www.ui.cn/detail/427365.html
這位大佬的設(shè)定跟你的設(shè)定不統(tǒng)一。跟同事溝通的話用哪種固定值呢
教程工具書啊,謝啦~
感謝,很用心
干貨很多 學(xué)習(xí)了
基本和作者是同崗位的。很多經(jīng)驗(yàn)都值得參考。關(guān)于規(guī)范這塊,一個(gè)小細(xì)節(jié)是B端產(chǎn)品頁面信息量大,而餓了嗎組件的尺寸等不太符合。所以也會(huì)自己定義尺寸。另外,B端需要多抽離出業(yè)務(wù)信息模塊規(guī)范,因?yàn)楹芏嗟胤蕉紩?huì)使用同類型信息,或類似信息。
時(shí)隔一年來自本文作者的碎碎念:很榮幸能在這個(gè)平臺(tái)分享自己的這篇筆記,謝謝各位的認(rèn)可支持與批評(píng)建議?。?!在這里收到了很多鼓勵(lì)和意見,現(xiàn)在再看這篇文章,自己也覺得真是“又臭又長(zhǎng)”??但是還是有一些自己的說明:(1)占星的星大佬說寫的啰里啰嗦——B端產(chǎn)品真的很復(fù)雜呀,我最初對(duì)于后臺(tái)產(chǎn)品的感覺就是這樣,繁瑣復(fù)雜云里霧里,想努力整理出一套清晰的邏輯,所以不是文章啰嗦,是后臺(tái)復(fù)雜,哈哈,我是完美呈現(xiàn)了在B端產(chǎn)品里一臉懵逼的我…(2)可以用餓了么之類的組件庫——正如Fier Bee這位小伙伴所說,共享資源是可以用,但是不同行業(yè)不同業(yè)務(wù),往往用了也需要加以修改,再生成自己的組件庫。而且組件庫OK以后,還可以根據(jù)業(yè)務(wù)需要整理通用模塊、通用頁面,是提高效率的利器呀~我現(xiàn)在在銀行工作,銀行自己有好幾套組件庫,現(xiàn)在在整理通用模板,而且還在不斷完善(而且港澳臺(tái)有些大佬不喜歡表單表格的形式,想要更多有創(chuàng)意的后臺(tái)設(shè)計(jì))。(3)做后臺(tái)的UI精力應(yīng)該放在交互上——交互是產(chǎn)品和設(shè)計(jì)師一起來做的(其實(shí)我現(xiàn)在是收到文字或者表格的需求文檔直接交互UI一起做,只有項(xiàng)目經(jīng)理沒有產(chǎn)品經(jīng)理),組件化是為了提高自己的工作效率,然后有更多的時(shí)間研究交互和體驗(yàn)呀,所以組件化屬于前人栽樹后人乘涼,交互和邏輯要靠行業(yè)的沉淀和浸潤(rùn),我寫文章的理念也是希望大家好好做交互。(4)產(chǎn)品的某些講解誤人子弟——我針對(duì)自己待過的行業(yè)和自己淺薄的理解整理自己的筆記,會(huì)有很多不足之處,如果因?yàn)槲业倪@篇筆記給哪位小伙伴造成了職業(yè)生涯的斷裂我表示…應(yīng)該不太可能??如果涉及到某些行業(yè)我講的不對(duì),懇請(qǐng)有行業(yè)知識(shí)的大佬不吝賜教,對(duì)我批評(píng)教育的同時(shí)也讓看到這篇筆記的其他小伙伴引以為戒,先謝謝您了?。。?)寫這篇筆記的初心,是之前一直在只有一位設(shè)計(jì)師的小公司摸爬滾打,從app開始了解UI,在做pc端和后臺(tái)時(shí)候走了很多彎路,所以分享出來一些自己的經(jīng)驗(yàn)教訓(xùn),希望能大家提供一點(diǎn)點(diǎn)幫助和警示,能有幫助我就很開心了~能得到大佬的批評(píng)指正真的很榮幸~(6)最后,喜歡和選擇設(shè)計(jì)行業(yè),就是因?yàn)楦杏X這個(gè)行業(yè)的大家熱心、友好,前輩會(huì)對(duì)新人不吝賜教,大家也都各抒己見,互相幫助共同進(jìn)步的氛圍真的很美妙,所以在受到很多幫助之后,也希望自己能幫助到大家哪怕一點(diǎn)點(diǎn),當(dāng)然啦,我也在繼續(xù)學(xué)習(xí)和努力,希望能產(chǎn)出更多有價(jià)值的東西。真的非常感謝大家,啥也不說了,比個(gè)心吧~?
pm在設(shè)計(jì)后端的時(shí)候還是重邏輯,重功能。ui還是交給ui去做吧。
業(yè)務(wù)功能復(fù)雜的后臺(tái)系統(tǒng),我不建議設(shè)計(jì)師自己定義一套后臺(tái)ui規(guī)范,用餓了么這種設(shè)計(jì)組件就很好,那是眾多大神智慧的結(jié)晶啊。我所經(jīng)歷的現(xiàn)實(shí)情況就是有經(jīng)驗(yàn)的前端開發(fā),寫出來的頁面比資質(zhì)平平的ui設(shè)計(jì)師設(shè)計(jì)的還要好。我覺得做后臺(tái)的設(shè)計(jì),精力應(yīng)該放在交互上,提高后臺(tái)的易用性。
2B產(chǎn)品往往業(yè)務(wù)需求都不能很好地滿足,用現(xiàn)成控件規(guī)范已經(jīng)足夠,精力應(yīng)該主要放在業(yè)務(wù)上。
作為前端開發(fā)轉(zhuǎn)產(chǎn)品的,也覺得現(xiàn)在已經(jīng)有很多優(yōu)秀的UI框架了,包括表單驗(yàn)證、不同場(chǎng)景下的按鈕狀態(tài)和顏色和提示框,這些都封裝得非常成熟了。產(chǎn)品應(yīng)該更注重業(yè)務(wù)邏輯。只是這樣一來,那UI不就沒活了嗎?
非常棒!學(xué)習(xí)了
講的非常到位,贊??
非常有必要,細(xì)致詳實(shí)。
說啰嗦的同學(xué),是不是沒做過需要多名產(chǎn)品協(xié)同的B端產(chǎn)品??
很有感觸,很不錯(cuò)!
馬克,先收藏為敬
我做PM以來就是以B端為主,你真的好啰嗦,而且關(guān)于產(chǎn)品講的好片面,你是UI設(shè)計(jì)師,還是聚焦講設(shè)計(jì)上的吧,本來看題目三天了想進(jìn)來細(xì)讀讀,三天都是在忍受不了,是在太啰嗦,由其關(guān)于產(chǎn)品部分的講解有些是對(duì)的,有些是誤人子弟!
忍受不了可以不看,或者掃一下就走。但是看完人家的東西在這吐槽就不好了,而且吐個(gè)槽還這么啰嗦。你這么厲害干脆自己寫一篇好了。
說的很好 很有道理
?? 我也這么認(rèn)為?。?!
握個(gè)爪 ??
那你豈不是也在這里吐槽,己所不欲勿施于人,因?yàn)槲沂亲鲞@塊的,有些的確是錯(cuò)的,而且我平?jīng)]有一味抨擊,對(duì)于你UI上的設(shè)計(jì),我也是認(rèn)可的,你這里噼里啪說別人,忍不了你掃一眼評(píng)論就走啊,這么吐槽我有算什么
另外抱歉我在寫書
祝你的書大賣!
寫個(gè)大西瓜
難道讓作者講業(yè)務(wù)么?講組織架構(gòu)、角色權(quán)限、工作流、業(yè)務(wù)功能設(shè)計(jì)么? UI設(shè)計(jì)這塊是唯一可以用短篇幅大概講明白的吧。別打擊作者積極性
真tm牛逼 講全面這點(diǎn)篇幅講的完? 笑死 你開個(gè)專欄大家來膜拜一下行嗎
感謝分享
現(xiàn)在很多前端UI庫可以直接使用,不過設(shè)計(jì)一套公司規(guī)范也十分重要。
好啰嗦
感謝分享,順便問下用8倍數(shù)的柵格,為什么文中提到的一些間隔卻選擇10或者20
感謝分享!
中間干貨還可以,前面的廢話太多
還是鼓勵(lì)為主
非常好,感謝分享