中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

如何以產(chǎn)品設(shè)計(jì)的視角從0-1構(gòu)建整個(gè)企業(yè)級B端設(shè)計(jì)規(guī)范？本文從項(xiàng)目背景、用戶調(diào)研、競品分析、規(guī)劃產(chǎn)品路線、設(shè)計(jì)信息架構(gòu)、設(shè)計(jì)交互方案、設(shè)計(jì)視覺方案幾方面分析了整個(gè)流程。

關(guān)于建立企業(yè)級B端產(chǎn)品的設(shè)計(jì)規(guī)范，筆者在上篇文章中，提到了如下幾個(gè)問題：

• 如何建立設(shè)計(jì)規(guī)范，并落地到產(chǎn)品中？
• 如何解決設(shè)計(jì)規(guī)范與用戶需求的矛盾？
• 設(shè)計(jì)規(guī)范如何有效的迭代？

今天筆者就來給大家一一解答下。

百度百科描述：“產(chǎn)品是指做為商品提供給市場 ，被人們使用和消費(fèi)，并能滿足人們某種需求的任何東西，包括有形的物品、無形的服務(wù)、組織、觀念或它們的組合。”

因此，筆者在主導(dǎo)設(shè)計(jì)企業(yè)級規(guī)范的時(shí)候，將“企業(yè)級B端產(chǎn)品的設(shè)計(jì)規(guī)范“看做是一個(gè)產(chǎn)品，用產(chǎn)品經(jīng)理的思維去解決以上的問題，用產(chǎn)品設(shè)計(jì)的方法去逐步建立設(shè)計(jì)規(guī)范。

下面筆者與大家講述，如何以產(chǎn)品設(shè)計(jì)的視角從0-1構(gòu)建整個(gè)企業(yè)級B端設(shè)計(jì)規(guī)范：

一、項(xiàng)目背景

當(dāng)企業(yè)越來越大，產(chǎn)品越來越多，如何保證產(chǎn)品對內(nèi)集成的高效性與展示的一致性，保證產(chǎn)品對外輸出的一體性與品牌體驗(yàn)。

從產(chǎn)品本身的角度來說，設(shè)計(jì)規(guī)范可以解決上述的問題。細(xì)細(xì)說來，設(shè)計(jì)規(guī)范的誕生，是企業(yè)內(nèi)外部因素共同促成的。

1. 內(nèi)部因素

1. 企業(yè)級設(shè)計(jì)規(guī)范的定制必定伴隨著公司領(lǐng)導(dǎo)層在戰(zhàn)略層面上已經(jīng)達(dá)成共識，從上至下成為大家一致的目標(biāo)。
2. 產(chǎn)品界面上相同的元素和內(nèi)容很多，可以被抽象，一旦統(tǒng)一，可以提升團(tuán)隊(duì)協(xié)同設(shè)計(jì)的效率與開發(fā)效率。
3. 在產(chǎn)品研發(fā)流程中，保證產(chǎn)品經(jīng)理與技術(shù)經(jīng)理在輸出的原型中都能遵循相同的設(shè)計(jì)規(guī)范，減少前端開發(fā)人員對界面的理解。
4. 相同類型的設(shè)計(jì)稿在不同的前端人員中，開發(fā)實(shí)現(xiàn)度不一致，有了設(shè)計(jì)規(guī)范，就可以提高一致性。

2. 外部環(huán)境

1. 目前大廠都在輸出設(shè)計(jì)規(guī)范，設(shè)計(jì)規(guī)范提升了產(chǎn)研團(tuán)隊(duì)的協(xié)作效率，保障了產(chǎn)品的用戶體驗(yàn)。
2. 2019年，Sparkbox在對設(shè)計(jì)系統(tǒng)調(diào)查后匯總分析，結(jié)果顯示：設(shè)計(jì)規(guī)范非常重要，它可以保證：代碼重用性提高、UX/UI一致性、維持品牌標(biāo)準(zhǔn)等。

上述可見 ，企業(yè)級B端設(shè)計(jì)規(guī)范的構(gòu)建 ，是內(nèi)外因素共同作用的結(jié)果。為企業(yè)級產(chǎn)品建立一套統(tǒng)一的設(shè)計(jì)規(guī)范，不僅是跟隨潮流的表現(xiàn)，更是體現(xiàn)了產(chǎn)品的專業(yè)度。

二、用戶調(diào)研

既然要建立設(shè)計(jì)規(guī)范是大家一致認(rèn)同的，那么行動起來吧，看看產(chǎn)品用戶到底關(guān)注哪些關(guān)鍵點(diǎn) 。設(shè)計(jì)規(guī)范不是設(shè)計(jì)師憑空想出來的，想象出來的規(guī)范無法在實(shí)際產(chǎn)品中落地，而不會落地的設(shè)計(jì)規(guī)范，那真的不如不開始。這次選取的調(diào)研方式為：一對一用戶現(xiàn)場訪談。

1. 劃定目標(biāo)用戶類型

列出設(shè)計(jì)規(guī)范的目標(biāo)用戶，能讓我們收集上來的需求更精準(zhǔn)，后續(xù)更好的進(jìn)行需求分析。本次設(shè)計(jì)規(guī)范梳理出來的目標(biāo)用戶包括：

1）產(chǎn)品設(shè)計(jì)者

產(chǎn)品設(shè)計(jì)者的原型有時(shí)由于項(xiàng)目時(shí)間緊的原因，并沒有時(shí)間交接到設(shè)計(jì)師處進(jìn)行潤色，就得進(jìn)入開發(fā)。因此他們希望企業(yè)內(nèi)部能輸出一致的設(shè)計(jì)規(guī)范，對他們進(jìn)行培訓(xùn)和輔導(dǎo)后，使得他們能快速輸出可以被投入于開發(fā)的原型。

2）專業(yè)設(shè)計(jì)師

每個(gè)設(shè)計(jì)師都有自己的設(shè)計(jì)經(jīng)驗(yàn)和設(shè)計(jì)方法，設(shè)計(jì)師們認(rèn)為，沒有統(tǒng)一的設(shè)計(jì)規(guī)范，會導(dǎo)致大家重復(fù)設(shè)計(jì)類似的功能或界面。因此，建立大家可對標(biāo)的設(shè)計(jì)規(guī)范，可以統(tǒng)一設(shè)計(jì)師的產(chǎn)品稿。

3）產(chǎn)品開發(fā)者

同樣的組件和同樣的頁面，不同的開發(fā)者重復(fù)開發(fā)，效率很低，并且由于開發(fā)者本身技術(shù)能力的原因，同一個(gè)頁面不同的開發(fā)者開發(fā)出來的效果都是不同的。因此，運(yùn)用普適性的設(shè)計(jì)資產(chǎn)落地代碼，可以提升產(chǎn)品研發(fā)效率和保證相同頁面的實(shí)現(xiàn)一致性。

2. 設(shè)計(jì)訪談提綱

在設(shè)計(jì)訪談提綱的時(shí)候，需要注意以下幾點(diǎn)：

• 包含一般性問題和深入性問題，從淺入深。
• 設(shè)計(jì)的問題可以引導(dǎo)用戶描述問題的本質(zhì)，而不是泛泛而談。關(guān)注用戶過去的行為和直接性體驗(yàn)，驗(yàn)證痛點(diǎn)是否存在。
• 內(nèi)容可以區(qū)塊化，使得被訪談?wù)邔Ψ秸剝?nèi)容認(rèn)知清晰。

本次訪談提綱首先摘取出一些目標(biāo)產(chǎn)品，然后確定訪談人員，最后設(shè)計(jì)訪談提綱。提綱結(jié)構(gòu)如下，僅供參考：

3. 一對一面談

提綱設(shè)計(jì)好，約上訪談人員到一個(gè)輕松的環(huán)境，就可以開始一對一訪談了。面對面訪談要注意以下幾個(gè)技巧：

• 訪談前消除被訪談?wù)叩木o張情緒，找個(gè)訪談?wù)呤煜さ沫h(huán)境是最好的。
• 訪談前友好的邀請用戶 ，比如“非常感謝能邀請你來幫助我們共同改善產(chǎn)品”。
• 訪談時(shí)候循序漸進(jìn)，讓用戶充分表達(dá)他們的想法，從簡單到復(fù)雜、從整體到細(xì)節(jié)。
• 不要去暗示和引導(dǎo)答案。

本次面談中，我們直接約在了設(shè)計(jì)師、產(chǎn)品經(jīng)理、開發(fā)者的辦公座位上，打開他們的產(chǎn)品，就愉快的進(jìn)入訪談了。

我們首先詢問他們對設(shè)計(jì)規(guī)范的了解程度，然后將設(shè)計(jì)規(guī)范的作用講解給他們聽，接著讓他們聊聊對設(shè)計(jì)規(guī)范的興趣點(diǎn)，最后進(jìn)入組件（細(xì)節(jié)）的訪談環(huán)節(jié)，真正調(diào)研組件在他們產(chǎn)品中的使用程度和情況。

三、競品分析

競品分析是我們在設(shè)計(jì)一個(gè)產(chǎn)品前，必須要經(jīng)歷的過程。

俗話說“知彼知己，百戰(zhàn)不殆；不知彼而知己，一敗一負(fù)；不知彼不知己，每戰(zhàn)必殆?！?/p>

那競品分析要怎么做呢？

筆者在這里不具體詳述競品分析要用到的一些方法論（商業(yè)畫布、PEST分析等等），而是說說在設(shè)計(jì)規(guī)范上，我們是如何做競品分析的。主要步驟為：

1. 確定競品

在設(shè)計(jì)規(guī)范界，目前有以下幾個(gè)大廠在做：螞蟻金服、餓了么、視圖更新科技、用友網(wǎng)絡(luò)。

但真正有體系化系統(tǒng)化在做的，只有“螞蟻金服的Ant Design”。經(jīng)螞蟻金服體驗(yàn)技術(shù)部過大量項(xiàng)目實(shí)踐和總結(jié)，逐步打磨出一個(gè)服務(wù)于企業(yè)級產(chǎn)品的設(shè)計(jì)體系 —— Ant Design。

但是“餓了么的Element”在使用者數(shù)量上來說也是很多的，并且組件庫功能也較為豐富，也有一定的生態(tài)體系，因此Element也被納入我們的競品分析范圍。

iView2019年10月起正式更名為View UI，它經(jīng)過4年左右的沉淀，也積累了大量的用戶，同時(shí)擁有自己的生態(tài)：組件庫、Admin Pro、View UI Pro等。

綜上，競品分析對象就確定了：Ant Design、Element和View UI。

2. 確定分析范圍

如何確定競品分析的范圍呢？我們根據(jù)設(shè)計(jì)規(guī)范本身的初衷和功能范圍，去劃定需要分析的競品的范圍。

在設(shè)計(jì)規(guī)范中，第一期我們希望能包含基礎(chǔ)組件庫、頁面模板、設(shè)計(jì)理論體系、全局視覺、框架，而最重要的是基礎(chǔ)組件庫、設(shè)計(jì)價(jià)值觀、生態(tài)體系，這三者奠定了設(shè)計(jì)規(guī)范成長的基礎(chǔ)。

那么現(xiàn)在我們就來看看Ant Design、Element、View UI在基礎(chǔ)組件庫、生態(tài)體系、設(shè)計(jì)價(jià)值觀上各自的情況吧。

1）基礎(chǔ)組件庫：

Ant Design將基礎(chǔ)組件庫分為7類，共61個(gè)組件。Element為6類，共56個(gè)組件。View UI分為7類，共57個(gè)組件。它們的分類方式有所差異，同時(shí)，具體組件形態(tài)既有相同之處，也有差異點(diǎn)，這跟它們本身服務(wù)的中后臺業(yè)務(wù)有關(guān)系，也和設(shè)計(jì)者的思維方式密不可分。

筆者將三者的分類差異和共有、非共有的組件都取出來了，如下三幅圖展示：

三者的組件分類體系

三者共有的組件

三者非共有的組件

2）設(shè)計(jì)價(jià)值觀

Ant Design是這么描述設(shè)計(jì)價(jià)值觀的作用的：“設(shè)計(jì)價(jià)值觀為設(shè)計(jì)者提供評價(jià)設(shè)計(jì)好壞的內(nèi)在標(biāo)準(zhǔn)，啟示并激發(fā)了設(shè)計(jì)原則和設(shè)計(jì)模式，進(jìn)而為具體設(shè)計(jì)問題提供向?qū)Ш鸵话憬鉀Q方案?！?/p>

作為Ant Design指導(dǎo)性的設(shè)計(jì)價(jià)值觀，幫助了Ant Design建立了橫向和縱向的拓展性。

Element和View UI沒有設(shè)計(jì)價(jià)值觀一說，都只有設(shè)計(jì)原則，但是他們的設(shè)計(jì)原則不太一樣。Element為：一致性、反饋、效率、可控。View UI為：對比、重復(fù)、對齊、親密性。

3）生態(tài)體系

Ant Design的生態(tài)體系包括：組件庫、圖表庫、頁面模板、Kitchen、海兔、圖表庫、設(shè)計(jì)理論體系等。Element的生態(tài)體系目前只有組件庫。View UI的生態(tài)體系包括了：基礎(chǔ)組件庫、業(yè)務(wù)組件庫、頁面模板?？梢娚鷳B(tài)體系最全的是Ant Design，其生態(tài)體系中的每位成員都在為更好的服務(wù)中后臺產(chǎn)品而貢獻(xiàn)自己的力量。

3. 總結(jié)

由此可見，Ant Design在設(shè)計(jì)規(guī)范的制定上是進(jìn)行了系統(tǒng)化的思考和探索的，如果我們要制定企業(yè)級的設(shè)計(jì)規(guī)范，可以借鑒和研究Ant Design的思路。只有站在巨人的肩膀上，才能看的更遠(yuǎn)。

四、規(guī)劃產(chǎn)品路線

產(chǎn)品路線圖是團(tuán)隊(duì)行動指南，是產(chǎn)品可預(yù)見的未來方向，通常產(chǎn)品負(fù)責(zé)人綜合各方意見進(jìn)行規(guī)劃。同時(shí)，我們要意識到，在用戶需求不明確、團(tuán)隊(duì)成員意見不一致的時(shí)候，越需要制定路線圖，來保證團(tuán)隊(duì)的凝聚力。路線圖制定考慮兩個(gè)要素：

1. 先明確大目標(biāo)，再拆解成階段性目標(biāo)。
2. 路線圖是會調(diào)整和優(yōu)化的，不是一成不變的。

在我們的設(shè)計(jì)規(guī)范中，前期我們梳理了需求、調(diào)研了用戶、分析了競品，現(xiàn)在開始就進(jìn)入產(chǎn)品規(guī)劃階段了。我們根據(jù)自己企業(yè)的實(shí)際情況，制定了符合公司設(shè)計(jì)規(guī)范的一期產(chǎn)品規(guī)劃路線：

• 建立設(shè)計(jì)價(jià)值觀
• 建立設(shè)計(jì)指導(dǎo)原則
• 搭建組件庫
• 搭建布局框架
• 搭建頁面模板庫
• 落地與迭代（維護(hù)已有、發(fā)現(xiàn)新的）

同時(shí)，我們將路線圖上的內(nèi)容進(jìn)行了進(jìn)一步拆解，包括：類目下的具體內(nèi)容、實(shí)現(xiàn)目標(biāo)及想要獲得的收益、優(yōu)先級、計(jì)劃完成時(shí)間。

五、設(shè)計(jì)信息架構(gòu)

產(chǎn)品路線圖中，我們計(jì)劃了在一段時(shí)期內(nèi)要做的東西，和需要達(dá)到的目標(biāo)，那是不是就這樣子一上來我們就開始做呢，筆者認(rèn)為不是的。

我們需要設(shè)計(jì)整個(gè)產(chǎn)品的信息架構(gòu)。信息架構(gòu)是對信息進(jìn)行構(gòu)建、組織以及歸類的設(shè)計(jì)，是一個(gè)產(chǎn)品的骨架，它決定了一個(gè)產(chǎn)品的走向和內(nèi)涵，是用戶對一個(gè)產(chǎn)品最初的印象。

一個(gè)好的信息架構(gòu)，是產(chǎn)品成功的開始，可以讓用戶很快的上手使用。

為了讓大家直觀的感受什么是信息架構(gòu)，筆者拿APP舉例，APP的底部標(biāo)簽欄就是對整個(gè)APP的信息架構(gòu)：

那我們設(shè)計(jì)規(guī)范的信息架構(gòu)設(shè)計(jì)，就要讓用戶快速知道我們的設(shè)計(jì)規(guī)范要表達(dá)什么，包含哪些大模塊，他們?nèi)绾螐倪@些模塊里找到自己要的東西，同時(shí)知道如何使用。

順著這個(gè)思路走，我們將設(shè)計(jì)規(guī)范分為大信息架構(gòu)和小信息架構(gòu)兩部分。

大信息架構(gòu)是全局性的，你可以認(rèn)為是設(shè)計(jì)規(guī)范的生態(tài)；小信息架構(gòu)是子模塊下的信息組織（舉例：頁面模板）。大致如下圖展示：

大信息架構(gòu)

小信息架構(gòu)（舉例：頁面模板）

六、設(shè)計(jì)交互方案

當(dāng)我們進(jìn)入設(shè)計(jì)交互方案的階段，也就是進(jìn)入產(chǎn)品的詳細(xì)設(shè)計(jì)階段了。

對于設(shè)計(jì)規(guī)范來說，需要設(shè)計(jì)的內(nèi)容實(shí)在太多了，每一項(xiàng)都馬虎不得：每個(gè)組件的交互、布局的交互等。

筆者在這里就不詳細(xì)展開去說了，在這里和大家分享下一些交互設(shè)計(jì)原則，幫助我們更好的進(jìn)行設(shè)計(jì)規(guī)范設(shè)計(jì)：

1. 排版四大原則：親密性、對比、對齊、重復(fù)。
2. 尼爾森十大可用性原則 ：狀態(tài)可見原則、環(huán)境貼切原則、用戶可控原則、一致性原則、防錯(cuò)原則、易取原則、靈活高效原則、易掃原則、容錯(cuò)原則和人性化幫助原則。

七、設(shè)計(jì)視覺方案

視覺設(shè)計(jì)常常讓我們覺得無法用理性去衡量，視覺是顯性的，與大家的審美有很大的關(guān)系。

特別是服務(wù)企業(yè)級B端產(chǎn)品的設(shè)計(jì)規(guī)范，我們該如何去定制他的視覺模式呢？

我們經(jīng)過分析后發(fā)現(xiàn)，B端系統(tǒng)的視覺設(shè)計(jì)，不是為好不好看服務(wù)的，而是為了讓用戶在長時(shí)間使用后不產(chǎn)生視覺疲勞，提升用戶的工作效率服務(wù)的。

找到視覺設(shè)計(jì)服務(wù)的對象和源頭后，我們確定了極客藍(lán)作為我們的主色調(diào)，讓頁面操作元素的視覺符合W3C的無障礙設(shè)計(jì)原則。

W3C的無障礙設(shè)計(jì)原則是：文本和背景的對比足夠，為視力障礙者提供足夠的對比度。

• （3：1）在WCAG2.0 1.4.3（AA級）下，大型文本（18pt或14pt粗體或更大）的最小對比度。
• （4.5：1）在WCAG2.0 1.4.3（AA級）下，常規(guī)尺寸文本的最小對比度。
• （7：1）在WCAG2.0 1.4.6（AAA級）下，常規(guī)尺寸文本的增強(qiáng)對比度。

由此可見，視覺設(shè)計(jì)方案需要追溯源頭，找出視覺設(shè)計(jì)服務(wù)的對象，從而給出視覺設(shè)計(jì)方案。而不是什么配色好看，設(shè)計(jì)成什么樣子。

八、總結(jié)

針對文章一開始提出的問題，筆者認(rèn)為：

1. 要建立規(guī)范：需“了解項(xiàng)目背景、進(jìn)行用戶調(diào)研、進(jìn)行競品分析”。
2. 要落地到產(chǎn)品：需“進(jìn)行用戶調(diào)研、設(shè)計(jì)規(guī)范投入開發(fā)”。
3. 解決設(shè)計(jì)規(guī)范與用戶需求的矛盾：需“進(jìn)行用戶調(diào)研、進(jìn)行競品分析”。
4. 設(shè)計(jì)規(guī)范迭代：需“進(jìn)行用戶調(diào)研、進(jìn)行競品分析、研究設(shè)計(jì)趨勢”。

所以，企業(yè)級B端設(shè)計(jì)體系的建立，我們可以從產(chǎn)品設(shè)計(jì)的角度出發(fā)，將產(chǎn)品思維用于設(shè)計(jì)規(guī)范，剖析需求、快速迭代、建立生態(tài)。

作者：知果；公眾號：果有料

本文由 @知果 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。