2019-6-21 資深UI設(shè)計者
1. 初識B端產(chǎn)品和C端產(chǎn)品
C端 Consumer,表示為消費者、個人用戶或終端用戶設(shè)計,直接面向普通用戶提供服務(wù)來幫助他們實現(xiàn)個人需求。B端 Business,它面對商業(yè)和企業(yè),是為幫助企業(yè)集團(tuán)等實現(xiàn)商業(yè)目的而設(shè)計的軟件、工具或者平臺。
在我們?nèi)粘I钪?,在手機(jī)上使用的大多是 C 端產(chǎn)品,單一的 C 端產(chǎn)品通常是為了實現(xiàn)單一的需求。比如看網(wǎng)紅的抖音、聽音樂的酷狗、買車票的12306、社交的微信等,這些產(chǎn)品有自己的核心功能,其他的功能則是附加的,倘若沒有這些附加功能,雖然用戶體驗感會降低,但并不會影響產(chǎn)品的核心功能。
而面向 B 端的產(chǎn)品,我個人稱之為「暗渡陳倉」,當(dāng)個人用戶為實現(xiàn)個人需求產(chǎn)生了一系列動作,往往伴隨著該需求的另一端也會反饋一系列動作,即 C 端產(chǎn)品的后臺產(chǎn)品線(BtoC),比如淘寶賣家平臺、餓了么商家版等。除此之外,還有面向商家、企業(yè)、業(yè)務(wù)部門提供的企業(yè)級服務(wù)產(chǎn)品,以及面對企業(yè)或者個人提供的平臺級工具產(chǎn)品等。
雖說我們?nèi)粘J褂玫母嗍?C 端產(chǎn)品,但是 B 端產(chǎn)品對我們的影響也是時時刻刻存在著。C 端產(chǎn)品在明,逐漸改變著現(xiàn)代人的生活方式,B 端產(chǎn)品在暗,間接服務(wù)于用戶,讓一切流程化秩序化,并且具有多個主要功能點。
2. B端和C端產(chǎn)品的區(qū)別
在我看來,C 端產(chǎn)品以消費互聯(lián)網(wǎng)為主,B 端產(chǎn)品以產(chǎn)業(yè)互聯(lián)網(wǎng)為主,C 端更感性,而B 端更理性。
從使用者的角度來說:
從開發(fā)的角度來說:
3. 后臺產(chǎn)品常見分類
后臺產(chǎn)品按其作用可大致分為兩類,一是支撐前臺產(chǎn)品,二是管理各種資源。我認(rèn)為后臺產(chǎn)品應(yīng)當(dāng)是囊括在 B 端產(chǎn)品的范圍之內(nèi)的,常見的類型包括:
1. 初識后臺產(chǎn)品設(shè)計
說起后臺產(chǎn)品,很容易想到復(fù)雜、龐大、邏輯縝密,而作為設(shè)計師,則苦于競品短缺、架構(gòu)復(fù)雜,設(shè)計的前期工作比設(shè)計本身要復(fù)雜得多等問題。
后臺產(chǎn)品不同于普通用戶所使用的 APP,它在用戶初次使用和短暫時間內(nèi)的認(rèn)知成本是較高的。當(dāng)用戶用慣了一個音樂類的 app,再給他幾個其他的音樂 APP,用戶是可以迅速上手并且輕易解決自己的需求的。而后臺產(chǎn)品則不然。
對于后臺產(chǎn)品來說,它并不是隨隨便便就可以下載使用的,即便你在使用的過程中,也因角色不同而受到權(quán)限限制,一般來講很難像超級管理員一樣接觸到整體功能;其次,門檻之高,后臺產(chǎn)品的使用者一般都是在該行業(yè)沉淀了很久,所以要對后臺產(chǎn)品進(jìn)行設(shè)計就需要同樣了解該行業(yè),甚至更能洞察該行業(yè),業(yè)務(wù)本身的復(fù)雜性質(zhì)決定了后臺產(chǎn)品架構(gòu)也會比較龐大;然后,無論是工廠商家的進(jìn)銷存管理,還是政府醫(yī)院的工作流和業(yè)務(wù)流,乃至企業(yè)內(nèi)部的產(chǎn)品,除了不同行業(yè)都有門檻外,對信息和產(chǎn)品也有「保密協(xié)議」的使命感,所謂「隔行如隔山」,在后臺產(chǎn)品更是如此;最后,后臺產(chǎn)品設(shè)計往往沒有固定的功能架構(gòu)和商業(yè)模式,對于產(chǎn)品經(jīng)理的邏輯思維能力要求更高,設(shè)計師不僅僅是做界面、優(yōu)化流程,也要主動和產(chǎn)品經(jīng)理溝通交流,并對產(chǎn)品進(jìn)行思考和探索。
2. 后臺UI設(shè)計工作流程
后臺 UI 設(shè)計的工作,大體分為三個部分:需求分析、設(shè)計執(zhí)行、數(shù)據(jù)分析。
在需求分析階段,要對產(chǎn)品本身和行業(yè)本身有一些基本的認(rèn)知。要了解產(chǎn)品的基本情況,比如產(chǎn)品目標(biāo)、用戶人群、產(chǎn)品定位、需求分析、功能模塊、主要競品和產(chǎn)品特色。做這個產(chǎn)品是為了解決什么問題?想實現(xiàn)什么目標(biāo)?使用這個系統(tǒng)的用戶有哪些?不同角色的用戶有哪些具體的權(quán)限?是否需要對每一個用戶的行為都生成操作日志?產(chǎn)品有哪些主要的功能模塊?產(chǎn)品的業(yè)務(wù)流程是怎樣的?有哪些同類型的產(chǎn)品?和他們相比我們的產(chǎn)品有什么特色和特點?成功地做出大而全的后臺產(chǎn)品,是整個設(shè)計團(tuán)隊和開發(fā)團(tuán)隊能力的體現(xiàn),而對很多小團(tuán)隊來說,只能做一些大團(tuán)隊不愿去做的產(chǎn)品,或另辟蹊徑在某些方面做專做精。
在設(shè)計執(zhí)行階段,參照 PM 給出的功能清單做原型和流程的梳理,需要關(guān)注的有當(dāng)前版本規(guī)劃、功能模塊、功能類型、功能描述、任務(wù)優(yōu)先級、完成時間等,交互原型則伴隨著功能描述、規(guī)則判定條件、觸發(fā)條件等內(nèi)容。原型設(shè)計完成,開始做 UI 視覺方面的設(shè)計,而這時后端同步構(gòu)思需求的實現(xiàn)方案。UI 設(shè)計師向前端了解實現(xiàn)框架,方便交接和溝通。當(dāng)界面實現(xiàn),UI 設(shè)計師應(yīng)該是最早進(jìn)行測試的,力求視覺設(shè)計和代碼實現(xiàn)無誤差。在完成設(shè)計執(zhí)行后,從信息層級、文字、圖標(biāo)、圖片等方面進(jìn)行設(shè)計走查,進(jìn)行多次設(shè)計驗證與測試。
數(shù)據(jù)分析是產(chǎn)品優(yōu)化迭代的重要依據(jù)。進(jìn)行多番測試和評審后交付客戶(或內(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á)到了管理和運營的指標(biāo),后臺產(chǎn)品才是真正產(chǎn)生了價值。
3. 制定設(shè)計規(guī)范的作用
為后臺產(chǎn)品制定設(shè)計規(guī)范有哪些作用和好處呢?簡單來說就是對產(chǎn)品好、對自己好、對團(tuán)隊好、對客戶好。
以下數(shù)值為參考,請結(jié)合特定產(chǎn)品靈活運用。
統(tǒng)一尺寸
據(jù)統(tǒng)計,目前 PC 端用戶屏幕分辨率占比排名前三的是 1920*1080、1366*768、1440*900,以 1440 來設(shè)計的話,向上適配或者向下適配誤差會比較小。
適配方案:面向多個客戶,后臺產(chǎn)品設(shè)計功能型頁面的尺寸統(tǒng)一為 1440*900,按照柵格系統(tǒng)原則向上或向下適配。展示型頁面以 1440*900 為主,同時設(shè)計出極端情況(寬度為 1280 以及寬度為 1920)的效果圖,力求實現(xiàn)前端實現(xiàn)效果和高保真設(shè)計圖誤差最小。面向公司內(nèi)部的后臺系統(tǒng),由于各個職工電腦屏幕是統(tǒng)一采購、統(tǒng)一尺寸,所以開發(fā)適配的分辨率可以統(tǒng)一尺寸進(jìn)行設(shè)計,這個尺寸根據(jù)公司內(nèi)部采購屏幕的尺寸和分辨率選擇即可(提前和前端溝通好)。
頁面框架
頁面框架主要分為左右欄布局和上下欄布局,還有其他的布局。左右欄布局包括頂部欄、左側(cè)菜單欄、主體內(nèi)容三大區(qū)域,其中頂部菜單欄、左側(cè)菜單欄為固定結(jié)構(gòu),右側(cè)主體內(nèi)容根據(jù)分辨率進(jìn)行動態(tài)縮放;上下欄布局包括頂部菜單欄和主體內(nèi)容兩大區(qū)域,其中頂部菜單欄為固定結(jié)構(gòu),主體內(nèi)容進(jìn)行動態(tài)縮放且需定義主體內(nèi)容左右兩邊空白區(qū)域最小值;左右欄布局時,左側(cè)菜單可收縮展開,收縮狀態(tài)下固定寬度。
柵格布局
柵格系統(tǒng)的使用是為了解決自適應(yīng)和響應(yīng)式問題,從而更好地進(jìn)行產(chǎn)品設(shè)計和產(chǎn)品開發(fā)。響應(yīng)式柵格采用 24 列柵格系統(tǒng)實現(xiàn),以滿足 2,3,4,5,6 分比布局等多種情況。固定寬度 Column,將間隔 Gutter 進(jìn)行動態(tài)縮放。
谷歌規(guī)定模塊和結(jié)構(gòu)之間要以 8px 為基準(zhǔn),布局間相對間距可采用 8px 以及 8 的倍數(shù),但一些小組件(按鈕、間隔、輸入框)可以以 4 為基準(zhǔn)。柵格布局是為了輔助設(shè)計,靈活運用,不要被它所局限。
尺寸設(shè)定
一般在整體區(qū)域左上角放置產(chǎn)品 LOGO 及產(chǎn)品名稱,大部分系統(tǒng)頂部欄高度 48+8n,側(cè)邊欄寬度 200+8n。我常用的是頂部欄高度 56px,側(cè)邊欄寬度 200px,側(cè)邊欄收縮狀態(tài)寬度 56px,右側(cè)的側(cè)浮窗寬度 400px。
相對間隔
定義主體內(nèi)容的上下左右邊距,定義主體區(qū)域內(nèi)各模塊的邊距及安全寬度,超出內(nèi)容區(qū)域的部分采用區(qū)域內(nèi)滾動或整屏滾動,視情況固定導(dǎo)航欄。
顏色分為品牌色、輔助色、中性色。根據(jù)不同產(chǎn)品的不同需求,可能也會將統(tǒng)計圖、標(biāo)簽等進(jìn)行統(tǒng)一標(biāo)準(zhǔn)色設(shè)定。
品牌色即產(chǎn)品主色,產(chǎn)品主色的設(shè)定直接影響產(chǎn)品氣質(zhì)和直觀感受,也是產(chǎn)品直接對外的形象。品牌色要根據(jù)產(chǎn)品特性、用戶使用場景、產(chǎn)品定位等進(jìn)行選取,盡量做好色彩的延伸性,可支持換膚。品牌色的應(yīng)用場景包括操作狀態(tài)、按鈕色、可操作圖標(biāo)等。
輔助色用于提示其他場景,比如成功、失敗、警告、無效等。
中性色常用于文本、背景、邊框、分割線等,需要考慮深色背景和淺色背景的差異,可以選擇同一色相控制透明度變化,用來表現(xiàn)不同的層級結(jié)構(gòu)。
其他色如統(tǒng)計圖、數(shù)據(jù)可視化、多個標(biāo)簽的不同配色方案根據(jù)項目情況單獨設(shè)定。
后臺系統(tǒng)常用的字體:windows 系統(tǒng),中文 Microsoft YaHei,英文 Arial;Mac 字體,中文 PingFang SC,英文 Helvetica;除此之外可以選擇的字體還有 segoe UI、思源黑體、Hiragino Sans GB等。
后臺系統(tǒng)中常用字體大小為 12px、13px、14px、16px、18px、20px、24px、30px。
行高設(shè)定,根據(jù)文字大小及使用場景設(shè)置行高,一般行高=文字大小+6px/8px。
圖標(biāo)是 UI 設(shè)計中重要組成部分,一般分為功能圖標(biāo)和應(yīng)用圖標(biāo),以圖形的方式傳達(dá)概念,可以降低理解成本,使得界面更加協(xié)調(diào)美觀。在后臺產(chǎn)品中,圖標(biāo)的功能則更偏向輔助性,輔助用戶對功能的認(rèn)識。
除了某些常用的圖標(biāo),有一些專業(yè)性的操作和詞匯則需要設(shè)計師進(jìn)行繪制,現(xiàn)在比較方便的方法是在 iconfont 提供的圖標(biāo)模板上用 AI 繪制,畫板 1024*1024,提供圓形、正方形、矩形形狀。圖標(biāo)尺寸按照 8 的倍數(shù)進(jìn)行延展,繪制完成后生成 svg 格式文件,提交到阿里巴巴矢量圖標(biāo)庫的項目組里,方便前端調(diào)用,調(diào)整大小和顏色更為方便,且能夠優(yōu)化系統(tǒng)內(nèi)存和性能。
按鈕是后臺產(chǎn)品進(jìn)行交互設(shè)計是重要元素,提供給用戶進(jìn)行點擊操作,是視覺上最引人注目的控件,具有一定的視覺受范性。常用按鈕可分為填充按鈕、線性按鈕、文字按鈕。
按鈕的交互狀態(tài)包括默認(rèn)、懸停、點擊和不可用。
按鈕根據(jù)需求分為不同尺寸,大中小三個級別用在不同的場景,一般按照 8 的倍數(shù)設(shè)定。如高度分別設(shè)定為 24、32、40px。
規(guī)范整理時要規(guī)定不同類型按鈕的寬高、圓角及文字大小,同時還要將按鈕的不同狀態(tài)展現(xiàn)出來。
填充按鈕之間間距最小為 10px。
導(dǎo)航的類型有很多種,常用的比如頂欄菜單、側(cè)欄菜單、折疊菜單、下拉菜單、面包屑、分頁、步驟條、時間軸、tab標(biāo)簽頁、膠囊菜單、徽標(biāo)數(shù)等。
各類導(dǎo)航中的字體大小可進(jìn)行統(tǒng)一設(shè)定。
頂欄菜單多為一級菜單,點擊切換,或作為下拉菜單的父級,將子級菜單合理分類。
側(cè)欄菜單為垂直導(dǎo)航菜單,可以內(nèi)嵌子菜單。
下拉菜單的觸發(fā)方式一般有鼠標(biāo)懸停和鼠標(biāo)點擊兩種。
步驟條引導(dǎo)用戶按照流程來完成任務(wù),一般步驟不得少于兩步。
分頁的高度設(shè)定為 24px、30px、32px,根據(jù)應(yīng)用場景適當(dāng)增減內(nèi)容,比如設(shè)定每頁展示數(shù)據(jù)的條數(shù)、跳轉(zhuǎn)至指定頁等。
面包屑用于說明層級結(jié)構(gòu),使用戶明確當(dāng)前所在位置,并且可以回到任一上級頁面。
徽標(biāo)數(shù)用來通知用戶當(dāng)前有未讀消息,一般出現(xiàn)在圖標(biāo)的右上角或者跟在文字后面。
表單多由一條或多條列表項組成,單一列表項的類型有字段輸入框、條件選擇器。
字段輸入框的標(biāo)題和輸入框分布方式包括左右、上下、無標(biāo)題。左右分布是常見的對齊方式,比較適合 PC 端的使用;上下分布增加了表單的整體高度,視情況選擇使用;無標(biāo)題經(jīng)常應(yīng)用在登錄注冊,雖然減少了面積,但是增加了理解難度。
輸入框的交互狀態(tài)包括默認(rèn)、輸入結(jié)果、提示錯誤、禁用、獲取焦點。
輸入框的尺寸可按照8的倍數(shù)進(jìn)行設(shè)定,比如 24px、32px,也可根據(jù)系統(tǒng)實際情況進(jìn)行設(shè)定,我常用的輸入框高度為 30px,寬度視情況而定,無圓角。上下布局的多個輸入框上下間距為 20px,有錯誤提示時候豎向增加 10px 或橫向顯示在輸入框右側(cè)(預(yù)留出位置)。
表單中標(biāo)題文字左對齊,輸入框左對齊,標(biāo)題文字距離輸入框20px(多個長度不同的輸入框算最長的);標(biāo)題文字右對齊,輸入框左對齊,也是常用的方式。輸入框內(nèi)正文字體 14px,文字和左右兩邊邊框的邊距 10px。
選擇器包括單選、多選、時間選擇、開關(guān)切換、下拉選擇、滑塊選擇、旋鈕等。單選框多為圓形,復(fù)選框多為方形。
搜索框和選擇框的高度為 30px 或按照 8 的倍數(shù)自行設(shè)定,通常和輸入框保持一致。搜索框距離右側(cè)按鈕 4px,內(nèi)部文字 14px。
單選多選框尺寸 16*16px,多個選項橫向排列間距 16px,縱向排列間距 8px。
開關(guān)按鈕外框 40*20px,內(nèi)部圓形 16*16px。
表格在后臺產(chǎn)品 UI 設(shè)計中占比非常大,用來展示數(shù)據(jù)、統(tǒng)一管理、作為詳情入口,是最清晰、的形式之一。在設(shè)計規(guī)范中需設(shè)定表頭高度、表格行高、表格列寬范圍,同時也包括表格中的按鈕樣式、標(biāo)簽樣式。
表格主要分為五大區(qū)域:選擇搜索區(qū)、操作區(qū)、表頭、正文、底欄。選擇搜索區(qū)放置篩選框和搜索框,為用戶提供按需搜索,可以大大提高用戶效率;操作區(qū)指各種對表格內(nèi)容進(jìn)行增刪改查、批量處理、配置列的動作;表頭展示列標(biāo)題,一般具有排序功能;正文主要展示各種各樣的數(shù)據(jù),要注意行高、對齊、分割、信息層級等,要考慮是否提供行內(nèi)操作;底欄顯示分頁、總數(shù)統(tǒng)計等。
表格信息一般主要功能為增刪改查,查看和編輯是最基本的功能,表格信息支持篩選、搜索、排序、分頁。對可批量操作的表格數(shù)據(jù)在第一列增加多選框。
行高
表格行高可設(shè)置為表格內(nèi)字體高度的 2~3 倍,主表格會間隔顯示不同顏色,用于區(qū)分不同行數(shù)據(jù)、加強(qiáng)視覺流引導(dǎo),展開單行的內(nèi)置表格可采用純色,選中行應(yīng)有視覺上的反饋。表頭要和表格內(nèi)容有視覺上的區(qū)分。表格行高可采用 36、40、48、60 等。
行數(shù)
表格行數(shù)太多加載速度會降低,延長用戶等待時間;行數(shù)太少會導(dǎo)致用戶不斷翻頁,降低使用效率。比較合適的默認(rèn)表格行數(shù)是 20 或 50,用戶可以根據(jù)自己需求選擇默認(rèn)的行數(shù)。設(shè)定行數(shù)之后,如果每頁行數(shù)多于每屏行數(shù),可在表格內(nèi)引入滾動條,這時可以固定表頭滾動內(nèi)容。
列寬
列寬根據(jù)內(nèi)容字段長短需要有不同且合理的默認(rèn)值,使得表格字段有良好的展示效果。列內(nèi)容的長度固定時,列寬應(yīng)大于固定寬度(比如時間、MD5、SHA1);列內(nèi)容不固定時,能預(yù)判最大寬度的按照最大寬度設(shè)定列寬(比如IP地址、MAC地址、姓名),不能預(yù)判最大寬度的設(shè)定列寬按照常用寬度,多于內(nèi)容省略以「…」展示,鼠標(biāo)懸停出現(xiàn)完整內(nèi)容(比如詳情、描述)。
列數(shù)
表格列不應(yīng)過多,列數(shù)比較多的情況下應(yīng)該合理進(jìn)行合并、隱藏、刪除或進(jìn)行優(yōu)先級處理。常用的方法有引入配置列,用戶可自定義展示必需列以外的其他列;只展示重要信息,下拉展開列查看完整信息;在表格中引入橫向滾動條,根據(jù)實際情況選擇是否要始終固定基本信息列(如第一列是文件名)和操作列(最后一列的操作)。
對齊方式
表格內(nèi)的文本應(yīng)按照文本類型不同進(jìn)行統(tǒng)一規(guī)范,如金額類數(shù)值保留相同位數(shù)小數(shù),SHA1 雖然是一串?dāng)?shù)字但是其實那并不是數(shù)據(jù)而是一串編碼,所以可以像文本一樣左對齊。根據(jù)文本內(nèi)容不同,對齊方式也應(yīng)靈活調(diào)整,可采用文本左對齊、數(shù)據(jù)右對齊、金額小數(shù)點對齊的方式。數(shù)據(jù)前面有標(biāo)簽的,將標(biāo)簽前置對齊。類似 IP 地址、MD5、SHA1、域名這樣的信息,也可以根據(jù)產(chǎn)品需要在文本前面增加「復(fù)制」圖標(biāo),方便用戶調(diào)用。
詳情入口
表格內(nèi)部數(shù)據(jù)的詳情入口,將能點擊下鉆查看詳情的內(nèi)容以不同顏色表示,同時在表格行最后一列操作按鈕部分放置一個查看按鈕。
包括彈框、側(cè)滑框、骨架屏、全局提示、警告提示、消息提醒、加載狀態(tài)等。分為模態(tài)框和非模態(tài)框,區(qū)別是是否會打斷用戶工作流。
彈框又稱對話框,是疊加在應(yīng)用主窗口上的彈出式窗口,以對話的方式使用戶參與進(jìn)來。
彈框
彈框出現(xiàn)時,主題內(nèi)容增加一層遮罩 #000,透明度 50%,避免使用雙層彈框,可同時采用有關(guān)閉圖標(biāo)的彈框和無關(guān)閉圖標(biāo)的彈框,引導(dǎo)用戶對內(nèi)容進(jìn)行正確操作。如果設(shè)定系統(tǒng)內(nèi)所有彈框均可以點擊彈框外區(qū)域關(guān)閉, 則需要為用戶新增或編輯內(nèi)容的彈框彈出二級確認(rèn)的彈框,或者再次進(jìn)行交互梳理。
側(cè)滑框
側(cè)滑框又稱抽屜,出現(xiàn)在右側(cè),固定寬度 400px,高度覆蓋在主題內(nèi)容之上,點擊側(cè)滑框以外的區(qū)域則收起側(cè)滑框。
骨架屏
為某些特定數(shù)據(jù)提供數(shù)據(jù)加載等待時的占位圖形組合。
全局提示
建議停留時間 3s,可根據(jù)文字字?jǐn)?shù)調(diào)整停留時間,文字內(nèi)容限制在 30 以內(nèi)。
警告提示
用不同顏色和樣式展示需要關(guān)注的信息。
通知提醒
消息通知和警告信息用通知提醒框,單個消息從頁面右側(cè)以抽屜的方式劃出,用戶可手動關(guān)閉,或停留 3s 后自動關(guān)閉。
繪制不同類型的情感化插畫表示缺省狀態(tài),如404、500、暫時沒有數(shù)據(jù)、沒有新消息等。
頁面需要一個默認(rèn)的底色,錯誤文字使用 14px,與情感化插畫間距 20px,與按鈕間距 30px。
數(shù)據(jù)可視化部分可能是后臺產(chǎn)品中對視覺設(shè)計要求較高的部分,使用情境為各類統(tǒng)計圖、大屏展示頁面等。
功能型頁面的數(shù)據(jù)可視化可以引入圖形化設(shè)計組件,Echarts、G2、d3等;展示型頁面的數(shù)據(jù)可視化則可以做得更有趣,比如立體的統(tǒng)計圖、粒子地球效果、靈活有趣的網(wǎng)絡(luò)拓?fù)鋱D等。
考慮到數(shù)據(jù)可視化可能會需要深色淺色不同的背景,在數(shù)據(jù)可視化統(tǒng)計圖的色彩搭配上要注意顏色的拓展性。
1. 設(shè)計前端一家親
2. 書籍推薦
3. 文章和作品推薦
不管是做 C 端產(chǎn)品還是 B 端產(chǎn)品,都是為了實現(xiàn)用戶的需求、幫用戶解決問題。
剛接觸后臺產(chǎn)品的時候,最希望能把產(chǎn)品做的炫酷、美觀,工作中慢慢地發(fā)現(xiàn)項目的背后思考更為重要,產(chǎn)出的設(shè)計成果也應(yīng)該有理有據(jù)、支撐整個設(shè)計體系。網(wǎng)上供大家使用和學(xué)習(xí)的資源非常多,對一些公司來說、專門去制定一套自己的后臺設(shè)計規(guī)范不免顯得費時費力,合理引入 antdesign 和 element 等開源的設(shè)計組件,會使得設(shè)計師以及前端事半功倍,有助于設(shè)計師把更多的精力投入到沉淀行業(yè)知識、研究產(chǎn)品架構(gòu)、梳理交互方式和創(chuàng)新視覺表現(xiàn)上。
在后臺產(chǎn)品的設(shè)計過程中,更應(yīng)該把寶貴的時間用在更值得關(guān)注的事物上,讓設(shè)計師能夠輔助業(yè)務(wù)挖掘,從趨于相同的表象中找到產(chǎn)品獨有的閃光點,從而切實解決問題和實現(xiàn)價值。
藍(lán)藍(lán)設(shè)計( tweetduck.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
藍(lán)藍(lán)設(shè)計的小編 http://tweetduck.com