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

本篇為如何從零構(gòu)建UI組件及設(shè)計(jì)規(guī)范之介紹篇，介紹設(shè)計(jì)規(guī)范能給公司帶來的價(jià)值，怎么做一套符合公司系統(tǒng)平臺(tái)的設(shè)計(jì)規(guī)范以及如何利用組化的思維去維護(hù)后續(xù)的迭代及優(yōu)化，以及讓團(tuán)隊(duì)更好的協(xié)作，與大家分享！

《如何從零構(gòu)建組件及設(shè)計(jì)規(guī)范》共分為5個(gè)系列，分別為《一：介紹篇》、《二：設(shè)計(jì)原則》、《三：全局樣式》、《四：基礎(chǔ)組件》、《五：通用模版》

一、做什么（What）

• 公司設(shè)計(jì)規(guī)范：我們對(duì)過去設(shè)計(jì)的這些產(chǎn)品進(jìn)行思考和沉淀，抽象并形成了一些穩(wěn)定且復(fù)用性高的內(nèi)容，打磨出一套適合于公司產(chǎn)品設(shè)計(jì)模式及規(guī)范。
• 全面的設(shè)計(jì)語言：設(shè)計(jì)規(guī)范從設(shè)計(jì)原則到頁面布局，從交互到文案，從基本組件到模版頁面…. 提供了產(chǎn)品設(shè)計(jì)上的解決方法。

在多數(shù)情況下可以指導(dǎo)設(shè)計(jì)、產(chǎn)品和開發(fā)可以快速找到相關(guān)的指導(dǎo)內(nèi)容，有效地幫助完善工作并且提高效率。

二、為什么要做（Why）

分子是由原子組成的。分子分成原子，原子也可以重新組合成新的分子。一個(gè)界面是由獨(dú)立的基本組件搭建而成，基本組件由基本樣式、組件特性構(gòu)成，基于不同的基本樣式和特性再重組構(gòu)成新的界面。

• 保證平臺(tái)一致性：加強(qiáng)產(chǎn)品與開發(fā)的溝通，解決多平臺(tái)后期多而復(fù)雜頁面帶來的不一致性。用戶用到一個(gè)新功能或者切換到另一個(gè)新平臺(tái)，不需要再花額外的學(xué)習(xí)時(shí)間，所以保證一致性可以讓用戶形成習(xí)慣性路經(jīng)思考。
• 提升產(chǎn)品使用效率：組件化設(shè)計(jì)是通過對(duì)頁面中元素的拆解、歸納和重組，并基于可被復(fù)用的目的，形成規(guī)范化的組件。再通過組合來構(gòu)建整個(gè)設(shè)計(jì)方案，從而提升設(shè)計(jì)效能。所以組件化為產(chǎn)品帶來一致的設(shè)計(jì)語言和工作效率上的提升，另一方面確保使用的客戶或用戶在很短的時(shí)間內(nèi)使用平臺(tái)。
• 提升產(chǎn)品細(xì)節(jié)體驗(yàn)：當(dāng)前的互聯(lián)網(wǎng)產(chǎn)品發(fā)展到下半場(chǎng)，所有的產(chǎn)品在能用的基礎(chǔ)上希望能夠有良好的使用體驗(yàn)。美觀的產(chǎn)品能夠提升體驗(yàn)和激發(fā)愉悅用戶的重要手段，這要求我們?cè)诋a(chǎn)品設(shè)計(jì)時(shí)需要思考產(chǎn)品的細(xì)節(jié)美觀等。

國外的一項(xiàng)數(shù)據(jù)研究：在保證數(shù)量和質(zhì)量的前提下，運(yùn)用組件化的設(shè)計(jì)推動(dòng)模式，原本200人的團(tuán)隊(duì)，可以縮減為100人，能夠?yàn)楣竟?jié)省大量的人力成本。

組件化能讓公司以更快的速度和更低的成本開發(fā)產(chǎn)品，在前期也能對(duì)產(chǎn)品的想法快速驗(yàn)證。

1）公司維度
通過組件化推動(dòng)的產(chǎn)品設(shè)計(jì)與迭代，可以使團(tuán)隊(duì)工作增效，降低成本。產(chǎn)品或者設(shè)計(jì)可以在很短的時(shí)間內(nèi)出十幾個(gè)頁面，前端開發(fā)人員也可以通過查看prd文檔，直接調(diào)取組件代碼完成需求；以此來提高開發(fā)效率加快產(chǎn)品的開發(fā)進(jìn)度。

2）產(chǎn)品維度

• 從設(shè)計(jì)方案上：對(duì)于一些適用組件化的產(chǎn)品形態(tài)，我們可以運(yùn)用組件化思維將其「化整為零」。對(duì)需求有更規(guī)范的統(tǒng)籌，建立一個(gè)可復(fù)用的組件結(jié)構(gòu)，以保證交互和視覺的一致性。
• 從工作流程上：不同的產(chǎn)品、設(shè)計(jì)及不同的開發(fā)，相同角色無交集。缺乏溝通會(huì)導(dǎo)致大量重復(fù)性工作，又或因?yàn)榇罅繙贤◣淼馁Y源浪費(fèi)，因此會(huì)增加項(xiàng)目的開發(fā)周期和管理難度。

3）用戶維度

幫助到客戶和用戶體驗(yàn)到優(yōu)秀的產(chǎn)品，對(duì)產(chǎn)品的設(shè)計(jì)不僅僅停留在是能用，而是在能夠用的基礎(chǔ)上。讓產(chǎn)品的細(xì)節(jié)更加優(yōu)秀，體驗(yàn)更加智能、流暢，讓使用者愿意使用產(chǎn)品以幫助到他們的工作。

三、怎么做（How）

1. 傳統(tǒng)的生產(chǎn)頁面模式

傳統(tǒng)的頁面生產(chǎn)流程是瀑布式的，從業(yè)務(wù)需求到產(chǎn)品設(shè)計(jì)，再到開發(fā)是一串的工作流程。

這樣會(huì)導(dǎo)致重復(fù)性業(yè)務(wù)頁面設(shè)計(jì)制作、反復(fù)低效率的溝通、糾結(jié)的還原度修復(fù)等。通過組件化設(shè)計(jì)我們可以將大量的頁面進(jìn)行整合設(shè)計(jì)。

2. 我們的做法

設(shè)計(jì)規(guī)范是建立一套基于業(yè)務(wù)的為基礎(chǔ)的組件庫，對(duì)于組件庫里已有的組件，在產(chǎn)品設(shè)計(jì)時(shí)可直接調(diào)取組合并構(gòu)建新的頁面。

新增的組件則經(jīng)過常規(guī)設(shè)計(jì)流程后，歸納沉淀并有產(chǎn)品組審核通過后入庫，以提升后續(xù)組件擴(kuò)展能力，助力產(chǎn)品快速迭代發(fā)展。每個(gè)組件模塊基于復(fù)用為目的，通過標(biāo)準(zhǔn)的規(guī)范組合方式來構(gòu)建整個(gè)設(shè)計(jì)方案，從而提升設(shè)計(jì)效能。

3. 組件化設(shè)計(jì)的關(guān)鍵點(diǎn)

基礎(chǔ)組件：從需求出發(fā)，結(jié)合Element框架，拆解頁面所需的基礎(chǔ)組件。

模版頁面：通用的組件的布局體系及替換規(guī)則。設(shè)計(jì)模式是設(shè)計(jì)過程中問題解決的核心方法，也是構(gòu)建整個(gè)平臺(tái)或框架所要遵循的基礎(chǔ)和標(biāo)準(zhǔn)。

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

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